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 | } | |
d7e9f9cc | 144 | #navOther { |
feec2d1c RK |
145 | background-color: #6000CF; |
146 | color: #000000; | |
147 | } | |
148 | ||
149 | #sideRemark { | |
150 | background-color: #E7ADE7; | |
151 | color: #000000; | |
14a57547 | 152 | width: 70px; |
feec2d1c RK |
153 | position: absolute; |
154 | bottom: 0px; | |
14a57547 RK |
155 | height: 2em; |
156 | margin: 0; | |
157 | padding: 0; | |
158 | list-style-type: none; | |
159 | } | |
160 | #sideRemark > li { | |
161 | text-transform: uppercase; | |
162 | padding-top: .25em; | |
163 | padding-left: .2em; | |
164 | height: 1.75em; | |
165 | margin: 0; | |
166 | } | |
167 | #sideRemark > li:hover, | |
168 | #sideRemark > li:active { | |
169 | background-color: #FFCF00; | |
170 | color: #000000; | |
feec2d1c | 171 | } |
feec2d1c RK |
172 | |
173 | #mainarea { | |
174 | position: absolute; | |
175 | top: 3px; | |
176 | bottom: 3px; | |
14a57547 | 177 | left: 95px; |
feec2d1c RK |
178 | right: 3px; |
179 | width: auto; | |
180 | padding: 1px; | |
d6ac45b1 | 181 | min-height: 20em; |
48fd8f1a | 182 | overflow: hidden; |
feec2d1c RK |
183 | border: none; |
184 | } | |
185 | ||
186 | #mainHeader { | |
187 | color: #FFCF00; | |
188 | font-size: 3em; | |
189 | font-weight: bold; | |
d75a7f97 | 190 | line-height: .8em; |
14a57547 | 191 | height: 82px; |
feec2d1c RK |
192 | text-align: center; |
193 | } | |
194 | ||
195 | #mainSepTop { | |
196 | background-color: #E7ADE7; | |
197 | font-size: 1px; | |
198 | height: 10px; | |
199 | margin-bottom: 3px; | |
200 | } | |
201 | #mainSepBottom { | |
202 | background-color: #A09090; | |
203 | font-size: 1px; | |
204 | height: 10px; | |
205 | margin-bottom: 3px; | |
206 | } | |
207 | ||
208 | #mainContent { | |
209 | position: absolute; | |
14a57547 | 210 | top: 109px; |
feec2d1c RK |
211 | bottom: 0px; |
212 | left: 0px; | |
213 | right: 1px; | |
214 | width: auto; | |
215 | padding: 1px; | |
216 | height: auto; | |
217 | overflow: auto; | |
218 | border: none; | |
d75a7f97 | 219 | background: transparent url("tilexborder.png") center center no-repeat; |
feec2d1c | 220 | } |
eabed1a4 RK |
221 | |
222 | section { | |
223 | display: none; | |
cd37563a | 224 | background-color: rgba(0,0,0,0.8); |
eabed1a4 RK |
225 | } |
226 | ||
227 | section.active { | |
228 | display: block; | |
229 | } | |
eef5b2db | 230 | |
33a80b5e | 231 | .posVal, .gravVal { |
eef5b2db | 232 | text-align: right; |
14a57547 RK |
233 | } |
234 | ||
33a80b5e RK |
235 | .posVal { |
236 | width: 24ch; | |
237 | } | |
238 | ||
239 | .gravVal { | |
240 | width: 10ch; | |
241 | } | |
242 | ||
243 | .note { | |
244 | font-size: .667em; | |
245 | } | |
246 | ||
14a57547 RK |
247 | @media screen and (min-width: 500px) { |
248 | body { | |
249 | font-size: 24px; | |
250 | } | |
251 | #sidebar { | |
252 | width: 140px; | |
253 | } | |
254 | #sideTop { | |
255 | width: 120px; | |
256 | height: 80px; | |
257 | } | |
258 | #sideSepTop { | |
259 | width: 140px; | |
260 | } | |
261 | #sideSepTopInsert { | |
262 | margin-left: 120px; | |
263 | } | |
264 | #sideSepBottom { | |
265 | width: 140px; | |
266 | } | |
267 | #sideSepBottomInsert { | |
268 | margin-left: 120px; | |
269 | } | |
270 | #sideBottom { | |
271 | width: 120px; | |
272 | top: 179px; | |
273 | bottom: 40px; | |
274 | } | |
275 | #sideRemark { | |
276 | width: 120px; | |
277 | height: 40px; | |
278 | } | |
279 | #mainarea { | |
280 | left: 145px; | |
281 | } | |
282 | #mainHeader { | |
283 | height: 102px; | |
284 | } | |
285 | #mainContent { | |
286 | top: 129px; | |
287 | } | |
288 | } |