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