Commit | Line | Data |
---|---|---|
feec2d1c RK |
1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this file, | |
3 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
4 | ||
cd37563a | 5 | |
14a57547 RK |
6 | /* The original LCARS font in Star Trek is Helvetica Ultra Condensed. |
7 | * We try to use open stuff here, so we use OSP-DIN from | |
8 | * http://openfontlibrary.org/en/font/osp-din, which is licensed under the | |
9 | * SIL OFL - http://scripts.sil.org/OFL */ | |
cd37563a | 10 | @font-face { |
14a57547 RK |
11 | font-family: OSPDIN; |
12 | src: url('OSPDIN.ttf') format('truetype'); | |
13 | font-weight: normal; | |
14 | font-style: normal; | |
cd37563a RK |
15 | } |
16 | ||
feec2d1c RK |
17 | html { |
18 | background-color: #000000; | |
19 | height: 100%; | |
20 | } | |
21 | ||
22 | body { | |
23 | border: 0px solid #9C9CFF; | |
24 | font-size: 16px; | |
25 | margin: 0px; | |
26 | height: 100%; | |
d75a7f97 | 27 | background-color: #000000; |
feec2d1c RK |
28 | color: #FF9F00; |
29 | position: relative; | |
14a57547 | 30 | font-family: OSPDIN,sans-serif; |
feec2d1c RK |
31 | } |
32 | ||
33 | h1 { | |
34 | display: none; | |
35 | } | |
36 | ||
37 | a:link { color: #FF9F00; } | |
38 | a:visited { color: #8050B0; } | |
39 | a:hover, a:active { color: #FFCF00; } | |
40 | ||
41 | #sidebar { | |
42 | position: absolute; | |
43 | top: 3px; | |
44 | bottom: 3px; | |
45 | left: 3px; | |
46 | right: auto; | |
14a57547 | 47 | width: 90px; |
cd37563a | 48 | height: auto; |
feec2d1c RK |
49 | padding: 0px; |
50 | margin: 0px 0px 0px 0px; | |
51 | border: 0px; | |
52 | overflow: hidden; | |
53 | } | |
54 | ||
55 | #sideTop { | |
56 | background-color: #6080F0; | |
57 | color: #000000; | |
14a57547 RK |
58 | width: 70px; |
59 | height: 60px; | |
feec2d1c RK |
60 | margin-bottom: 3px; |
61 | } | |
62 | ||
63 | #stardate { | |
64 | background-color: #A06060; | |
65 | color: #000000; | |
66 | padding: 3px 3px 10px; | |
feec2d1c RK |
67 | text-align: right; |
68 | border-bottom: 3px solid black; | |
69 | } | |
70 | ||
71 | #sideSepTop { | |
72 | background-color: #808090; | |
14a57547 | 73 | width: 90px; |
feec2d1c RK |
74 | height: 20px; |
75 | margin-bottom: 3px; | |
76 | padding-bottom: 10px; | |
77 | border-radius: 0px 0px 0px 15px; | |
78 | } | |
79 | #sideSepTopInsert { | |
80 | background-color: #000000; | |
81 | width: 20px; | |
82 | height: 100%; | |
14a57547 | 83 | margin-left: 70px; |
feec2d1c RK |
84 | border-radius: 0px 0px 0px 15px; |
85 | } | |
86 | #sideSepBottom { | |
d7e9f9cc | 87 | background-color: #6080F0; |
14a57547 | 88 | width: 90px; |
feec2d1c RK |
89 | height: 50px; |
90 | margin-bottom: 3px; | |
91 | padding-top: 10px; | |
92 | border-radius: 15px 0px 0px 0px; | |
93 | } | |
94 | #sideSepBottomInsert { | |
95 | background-color: #000000; | |
96 | width: 20px; | |
97 | height: 100%; | |
14a57547 | 98 | margin-left: 70px; |
feec2d1c RK |
99 | border-radius: 15px 0px 0px 0px; |
100 | } | |
101 | ||
102 | #sideBottom { | |
103 | background-color: #9C9CFF; | |
104 | color: #000000; | |
14a57547 | 105 | width: 70px; |
feec2d1c RK |
106 | margin-bottom: 3px; |
107 | position: absolute; | |
14a57547 RK |
108 | top: 159px; |
109 | bottom: 2em; | |
feec2d1c RK |
110 | height: auto; |
111 | } | |
112 | ||
113 | #navlist { | |
114 | list-style-type: none; | |
115 | margin: 0 0 1em; | |
116 | padding: 0 0 0.2em; | |
117 | } | |
118 | #navlist > li { | |
119 | margin: 0; | |
14a57547 | 120 | padding: 0.2em; |
feec2d1c | 121 | border-bottom: 3px solid #000000; |
14a57547 | 122 | text-transform: uppercase; |
feec2d1c RK |
123 | } |
124 | #navlist > li:hover, | |
14a57547 | 125 | #navlist > li:active { |
feec2d1c RK |
126 | background-color: #FFCF00; |
127 | color: #000000; | |
128 | } | |
129 | ||
14a57547 | 130 | #navlist > li.active { |
eabed1a4 RK |
131 | background-color: #008484; |
132 | color: #FFCF00; | |
14a57547 | 133 | outline: none; |
eabed1a4 RK |
134 | } |
135 | ||
14a57547 | 136 | #navPos { |
feec2d1c RK |
137 | background-color: #FF9F00; |
138 | color: #000000; | |
139 | } | |
14a57547 | 140 | #navGrav { |
feec2d1c RK |
141 | background-color: #C09070; |
142 | color: #000000; | |
143 | } | |
39b2fdef RK |
144 | #navSound { |
145 | background-color: #E7ADE7; | |
146 | color: #000000; | |
147 | } | |
148 | #navDev { | |
149 | background-color: #A09090; | |
150 | color: #000000; | |
151 | } | |
d7e9f9cc | 152 | #navOther { |
feec2d1c RK |
153 | background-color: #6000CF; |
154 | color: #000000; | |
155 | } | |
156 | ||
157 | #sideRemark { | |
158 | background-color: #E7ADE7; | |
159 | color: #000000; | |
14a57547 | 160 | width: 70px; |
feec2d1c RK |
161 | position: absolute; |
162 | bottom: 0px; | |
14a57547 RK |
163 | height: 2em; |
164 | margin: 0; | |
165 | padding: 0; | |
166 | list-style-type: none; | |
167 | } | |
168 | #sideRemark > li { | |
169 | text-transform: uppercase; | |
170 | padding-top: .25em; | |
171 | padding-left: .2em; | |
172 | height: 1.75em; | |
173 | margin: 0; | |
174 | } | |
175 | #sideRemark > li:hover, | |
176 | #sideRemark > li:active { | |
177 | background-color: #FFCF00; | |
178 | color: #000000; | |
feec2d1c | 179 | } |
feec2d1c RK |
180 | |
181 | #mainarea { | |
182 | position: absolute; | |
183 | top: 3px; | |
184 | bottom: 3px; | |
14a57547 | 185 | left: 95px; |
feec2d1c RK |
186 | right: 3px; |
187 | width: auto; | |
188 | padding: 1px; | |
d6ac45b1 | 189 | min-height: 20em; |
48fd8f1a | 190 | overflow: hidden; |
feec2d1c RK |
191 | border: none; |
192 | } | |
193 | ||
194 | #mainHeader { | |
195 | color: #FFCF00; | |
196 | font-size: 3em; | |
197 | font-weight: bold; | |
d75a7f97 | 198 | line-height: .8em; |
14a57547 | 199 | height: 82px; |
feec2d1c RK |
200 | text-align: center; |
201 | } | |
202 | ||
203 | #mainSepTop { | |
204 | background-color: #E7ADE7; | |
205 | font-size: 1px; | |
206 | height: 10px; | |
207 | margin-bottom: 3px; | |
208 | } | |
209 | #mainSepBottom { | |
210 | background-color: #A09090; | |
211 | font-size: 1px; | |
212 | height: 10px; | |
213 | margin-bottom: 3px; | |
214 | } | |
215 | ||
216 | #mainContent { | |
217 | position: absolute; | |
14a57547 | 218 | top: 109px; |
feec2d1c RK |
219 | bottom: 0px; |
220 | left: 0px; | |
221 | right: 1px; | |
222 | width: auto; | |
223 | padding: 1px; | |
224 | height: auto; | |
225 | overflow: auto; | |
226 | border: none; | |
d75a7f97 | 227 | background: transparent url("tilexborder.png") center center no-repeat; |
feec2d1c | 228 | } |
eabed1a4 RK |
229 | |
230 | section { | |
231 | display: none; | |
cd37563a | 232 | background-color: rgba(0,0,0,0.8); |
39b2fdef | 233 | height: 100%; |
eabed1a4 RK |
234 | } |
235 | ||
236 | section.active { | |
237 | display: block; | |
238 | } | |
eef5b2db | 239 | |
bdfbab86 RK |
240 | section > p:first-child { |
241 | margin-top: 0; | |
242 | padding-top: 1em; | |
243 | } | |
244 | ||
937918f2 RK |
245 | button { |
246 | font: inherit; | |
247 | border: none; | |
248 | color: #000000; | |
249 | background-color: #C09070; | |
250 | border-radius: 3000px; | |
937918f2 RK |
251 | } |
252 | ||
9adf799b | 253 | button:disabled { |
937918f2 RK |
254 | background-color: #402858; |
255 | } | |
256 | ||
33a80b5e | 257 | .posVal, .gravVal { |
eef5b2db | 258 | text-align: right; |
14a57547 RK |
259 | } |
260 | ||
33a80b5e RK |
261 | .posVal { |
262 | width: 24ch; | |
263 | } | |
264 | ||
265 | .gravVal { | |
266 | width: 10ch; | |
267 | } | |
268 | ||
269 | .note { | |
270 | font-size: .667em; | |
271 | } | |
272 | ||
39b2fdef RK |
273 | #soundavail { |
274 | height: 100%; | |
275 | } | |
276 | ||
937918f2 | 277 | #envFlashAvail { |
9adf799b RK |
278 | margin-top: .5em; |
279 | padding: .5em 3px 0; | |
280 | border-top: 2px solid #A09090; | |
281 | } | |
282 | ||
283 | .envButton { | |
284 | font-size: 200%; | |
285 | margin-top: .25em; | |
937918f2 RK |
286 | } |
287 | ||
288 | #envFlashOn { | |
9adf799b | 289 | margin-right: 3px; |
937918f2 RK |
290 | border-top-right-radius: 0; |
291 | border-bottom-right-radius: 0; | |
9adf799b | 292 | padding-left: .5em; |
937918f2 RK |
293 | } |
294 | ||
295 | #envFlashOff { | |
296 | margin-left: 0; | |
297 | border-top-left-radius: 0; | |
298 | border-bottom-left-radius: 0; | |
9adf799b | 299 | padding-right: .5em; |
937918f2 RK |
300 | } |
301 | ||
14a57547 RK |
302 | @media screen and (min-width: 500px) { |
303 | body { | |
304 | font-size: 24px; | |
305 | } | |
306 | #sidebar { | |
307 | width: 140px; | |
308 | } | |
309 | #sideTop { | |
310 | width: 120px; | |
311 | height: 80px; | |
312 | } | |
313 | #sideSepTop { | |
314 | width: 140px; | |
315 | } | |
316 | #sideSepTopInsert { | |
317 | margin-left: 120px; | |
318 | } | |
319 | #sideSepBottom { | |
320 | width: 140px; | |
321 | } | |
322 | #sideSepBottomInsert { | |
323 | margin-left: 120px; | |
324 | } | |
325 | #sideBottom { | |
326 | width: 120px; | |
327 | top: 179px; | |
328 | bottom: 40px; | |
329 | } | |
330 | #sideRemark { | |
331 | width: 120px; | |
332 | height: 40px; | |
333 | } | |
334 | #mainarea { | |
335 | left: 145px; | |
336 | } | |
337 | #mainHeader { | |
338 | height: 102px; | |
339 | } | |
340 | #mainContent { | |
341 | top: 129px; | |
342 | } | |
343 | } |