1:host { 2 --shell-margin: 25px; 3 --shell-background: #333; 4 --shell-terminal-background: #222; 5 --shell-terminal-color: #eee; 6 --shell-logo-color: #FF4180; 7 --shell-prompt-color: #75DF0B; 8 --shell-path-color: #1BC9E7; 9 10 margin: 0; 11 padding: 0; 12 background: var(--shell-background); 13 color: var(--shell-terminal-color); 14 font-family: monospace; 15 width: 100%; 16 height: 100%; 17 overflow: hidden; 18 display: block; 19 container-type: size; 20 21 --calculated-margin: var(--shell-margin); 22} 23 24*::-webkit-scrollbar-track { 25 border-radius: 8px; 26 background-color: #353535; 27} 28 29*::-webkit-scrollbar { 30 width: 8px; 31 height: 8px; 32} 33 34*::-webkit-scrollbar-thumb { 35 border-radius: 8px; 36 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); 37 background-color: #bcbcbc; 38} 39 40#shell { 41 background: var(--shell-terminal-background); 42 box-shadow: 0 0 5px rgba(0, 0, 0, .3); 43 font-size: 10pt; 44 display: flex; 45 flex-direction: column; 46 align-items: stretch; 47 max-width: calc(100% - 2 * var(--calculated-margin)); 48 max-height: calc(100% - 2 * var(--calculated-margin)); 49 resize: both; 50 overflow: hidden; 51 width: 100%; 52 height: 100%; 53 margin: var(--calculated-margin) auto; 54} 55 56#shell-content { 57 overflow: auto; 58 padding: 5px; 59 white-space: pre-wrap; 60 flex-grow: 1; 61} 62 63#shell-logo { 64 font-weight: bold; 65 color: var(--shell-logo-color); 66 text-align: center; 67} 68 69#shell-logo div { 70 text-align: left; 71 display: inline-block; 72} 73 74@container (min-width: 1200px) { 75 #shell { 76 --calculated-margin: calc(var(--shell-margin) * 2) !important; 77 } 78} 79 80@container (max-width: 991px) or (max-height: 600px) { 81 #shell-logo { 82 font-size: 6px; 83 margin: -25px 0; 84 } 85 86 #shell { 87 --calculated-margin: 0 !important; 88 resize: none; 89 } 90} 91 92@container (max-width: 767px) { 93 #shell-input { 94 flex-direction: column; 95 } 96} 97 98@container (max-width: 320px) { 99 #shell-logo { 100 font-size: 5px; 101 } 102} 103 104.shell-prompt { 105 font-weight: bold; 106 color: var(--shell-prompt-color); 107} 108 109.shell-prompt > span { 110 color: var(--shell-path-color); 111} 112 113#shell-input { 114 display: flex; 115 box-shadow: 0 -1px 0 rgba(0, 0, 0, .3); 116 border-top: rgba(255, 255, 255, .05) solid 1px; 117 padding: 10px 0; 118} 119 120#shell-input > label { 121 flex-grow: 0; 122 display: block; 123 padding: 0 5px; 124 height: 30px; 125 line-height: 30px; 126} 127 128#shell-input #shell-cmd { 129 height: 30px; 130 line-height: 30px; 131 border: none; 132 background: transparent; 133 color: #eee; 134 font-family: monospace; 135 font-size: 10pt; 136 width: 100%; 137 align-self: center; 138 box-sizing: border-box; 139} 140 141#shell-input div { 142 flex-grow: 1; 143 align-items: stretch; 144} 145 146#shell-input input { 147 outline: none; 148} 149