Rev 40 | Rev 50 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
| Rev 40 | Rev 43 | ||
|---|---|---|---|
| 1 | @CHARSET "UTF-8";
|
1 | @CHARSET "UTF-8";
|
| 2 | 2 | ||
| 3 | /* Basic fonts */
|
3 | /* Basic fonts */
|
| 4 | 4 | ||
| 5 | @font-face {
|
5 | @font-face {
|
| 6 | font-family: "LCARS"; |
6 | font-family: "LCARS"; |
| 7 | font-style: normal; |
7 | font-style: normal; |
| 8 | font-weight: normal; |
8 | font-weight: normal; |
| 9 | src: local("LCARS"), url(fonts/LCARS.ttf); |
9 | src: local("LCARS"), url(fonts/LCARS.ttf); |
| 10 | }
|
10 | }
|
| 11 | 11 | ||
| 12 | /* EOT font created with WEFT on 2002-03-23 */
|
12 | /* EOT font created with WEFT on 2002-03-23 */
|
| 13 | @font-face {
|
13 | @font-face {
|
| 14 | font-family: "Downloadable Haettenschweiler"; |
14 | font-family: "Downloadable Haettenschweiler"; |
| 15 | font-style: normal; |
15 | font-style: normal; |
| 16 | font-weight: normal; |
16 | font-weight: normal; |
| 17 | src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf); |
17 | src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf); |
| 18 | }
|
18 | }
|
| 19 | 19 | ||
| 20 | /*
|
20 | /*
|
| 21 | @font-face {
|
21 | @font-face {
|
| 22 | font-family:Webdings;
|
22 | font-family:Webdings;
|
| 23 | font-style:normal;
|
23 | font-style:normal;
|
| 24 | font-weight:normal;
|
24 | font-weight:normal;
|
| 25 | src:url(fonts/WEBDING0.eot);
|
25 | src:url(fonts/WEBDING0.eot);
|
| 26 | }
|
26 | }
|
| 27 | */
|
27 | */
|
| 28 | 28 | ||
| 29 | @font-face {
|
29 | @font-face {
|
| 30 | font-family: "Downloadable Zurich XCn BT"; |
30 | font-family: "Downloadable Zurich XCn BT"; |
| 31 | font-style: normal; |
31 | font-style: normal; |
| 32 | font-weight: normal; |
32 | font-weight: normal; |
| 33 | src: url(fonts/ZurichXCn.pfr); |
33 | src: url(fonts/ZurichXCn.pfr); |
| 34 | }
|
34 | }
|
| 35 | 35 | ||
| 36 | /* Basic display */
|
36 | /* Basic display */
|
| 37 | 37 | ||
| 38 | * { |
38 | * { |
| 39 | font-family: "LCARS", |
39 | font-family: "LCARS", |
| 40 | Haettenschweiler, "Downloadable Haettenschweiler", |
40 | Haettenschweiler, "Downloadable Haettenschweiler", |
| 41 | "Zurich XCn BT", "Downloadable Zurich XCn BT", |
41 | "Zurich XCn BT", "Downloadable Zurich XCn BT", |
| 42 | impact, Verdana, Geneva, Arial, Helvetica, sans-serif; |
42 | impact, Verdana, Geneva, Arial, Helvetica, sans-serif; |
| 43 | font-weight: normal; |
43 | font-weight: normal; |
| 44 | }
|
44 | }
|
| 45 | 45 | ||
| 46 | body {
|
46 | body {
|
| 47 | margin-top: 12em; |
47 | margin-top: 12em; |
| 48 | margin-left: 22em; |
48 | margin-left: 22em; |
| 49 | margin-right: 0.2em; |
49 | margin-right: 0.2em; |
| 50 | margin-bottom: 0.2em; |
50 | margin-bottom: 0.2em; |
| 51 | 51 | ||
| 52 | background-color: #000; |
52 | background-color: #000; |
| 53 | color: #99f; |
53 | color: #99f; |
| 54 | font-size: 131%; |
54 | font-size: 131%; |
| 55 | overflow: auto; |
55 | overflow: auto; |
| 56 | }
|
56 | }
|
| 57 | 57 | ||
| 58 | /* 0.0 to 1.0 s */
|
58 | /* 0.0 to 1.0 s */
|
| 59 | @-webkit-keyframes fade-in {
|
59 | @-webkit-keyframes fade-in {
|
| 60 | from {
|
60 | from {
|
| 61 | opacity: 0; |
61 | opacity: 0; |
| 62 | }
|
62 | }
|
| 63 | 63 | ||
| 64 | /* at 0.25 s */
|
64 | /* at 0.25 s */
|
| 65 | 25% { |
65 | 25% { |
| 66 | opacity: 0; |
66 | opacity: 0; |
| 67 | }
|
67 | }
|
| 68 | 68 | ||
| 69 | to {
|
69 | to {
|
| 70 | opacity: 1; |
70 | opacity: 1; |
| 71 | }
|
71 | }
|
| 72 | }
|
72 | }
|
| 73 | 73 | ||
| 74 | body.fade-in { |
74 | body.fade-in { |
| 75 | /* TODO: Step-by-step display instead */
|
75 | /* TODO: Step-by-step display instead */
|
| 76 | /*-webkit-animation-name: fade-in;*/
|
76 | /*-webkit-animation-name: fade-in;*/
|
| 77 | /* -webkit-animation-iteration-count: infinite; */
|
77 | /* -webkit-animation-iteration-count: infinite; */
|
| 78 | }
|
78 | }
|
| 79 | 79 | ||
| 80 | body.empty { |
80 | body.empty { |
| 81 | margin-top: 3em; |
81 | margin-top: 3em; |
| 82 | margin-left: 0.2em; |
82 | margin-left: 0.2em; |
| 83 | margin-bottom: 3em; |
83 | margin-bottom: 3em; |
| 84 | }
|
84 | }
|
| 85 | 85 | ||
| 86 | body.multi { |
86 | body.multi { |
| 87 | /* TODO from lcars21.css, use `em' instead */
|
87 | /* TODO from lcars21.css, use `em' instead */
|
| 88 | }
|
88 | }
|
| 89 | 89 | ||
| 90 | #content { |
90 | #content { |
| 91 | /* position: relative; */
|
91 | /* position: relative; */
|
| - | 92 | margin-right: 1em; |
|
| 92 | }
|
93 | }
|
| 93 | 94 | ||
| 94 | /* 0.0 to 0.6 s */
|
95 | /* 0.0 to 0.6 s */
|
| 95 | @-webkit-keyframes content {
|
96 | @-webkit-keyframes content {
|
| 96 | from {
|
97 | from {
|
| 97 | opacity: 0; |
98 | opacity: 0; |
| 98 | }
|
99 | }
|
| 99 | 100 | ||
| 100 | /* 0.6 s */
|
101 | /* 0.6 s */
|
| 101 | 99% { |
102 | 99% { |
| 102 | opacity: 0; |
103 | opacity: 0; |
| 103 | }
|
104 | }
|
| 104 | }
|
105 | }
|
| 105 | 106 | ||
| 106 | .empty.fade-in #content { |
107 | .empty.fade-in #content { |
| 107 | -webkit-animation-name: content; |
108 | -webkit-animation-name: content; |
| 108 | -webkit-animation-duration: 0.6s; |
109 | -webkit-animation-duration: 0.6s; |
| 109 | -webkit-animation-timing-function: linear; |
110 | -webkit-animation-timing-function: linear; |
| 110 | }
|
111 | }
|
| 111 | 112 | ||
| 112 | a {
|
113 | a {
|
| 113 | text-decoration: none; |
114 | text-decoration: none; |
| 114 | }
|
115 | }
|
| 115 | 116 | ||
| 116 | a:link:hover, |
117 | a:link:hover, |
| 117 | a:link:focus |
118 | a:link:focus |
| 118 | {
|
119 | {
|
| 119 | background-color:#000; |
120 | background-color:#000; |
| 120 | color: #f90; |
121 | color: #f90; |
| 121 | }
|
122 | }
|
| 122 | 123 | ||
| 123 | a:link:active { |
124 | a:link:active { |
| 124 | background-color:#000; |
125 | background-color:#000; |
| 125 | color: #fff; |
126 | color: #fff; |
| 126 | }
|
127 | }
|
| 127 | 128 | ||
| 128 | a:link { |
129 | a:link { |
| 129 | background-color:#000; |
130 | background-color:#000; |
| 130 | color:#fc9; |
131 | color:#fc9; |
| 131 | }
|
132 | }
|
| 132 | 133 | ||
| 133 | a:visited:hover, |
134 | a:visited:hover, |
| 134 | a:visited:focus |
135 | a:visited:focus |
| 135 | {
|
136 | {
|
| 136 | background-color:#000; |
137 | background-color:#000; |
| 137 | color:#f90; |
138 | color:#f90; |
| 138 | }
|
139 | }
|
| 139 | 140 | ||
| 140 | a:visited:active { |
141 | a:visited:active { |
| 141 | background-color:black; |
142 | background-color:black; |
| 142 | color:#fff; |
143 | color:#fff; |
| 143 | }
|
144 | }
|
| 144 | 145 | ||
| 145 | a:hover, |
146 | a:hover, |
| 146 | a:focus, |
147 | a:focus, |
| 147 | a:active
|
148 | a:active
|
| 148 | {
|
149 | {
|
| 149 | text-decoration: underline; |
150 | text-decoration: underline; |
| 150 | }
|
151 | }
|
| 151 | 152 | ||
| 152 | a:visited { |
153 | a:visited { |
| 153 | background-color:black; |
154 | background-color:black; |
| 154 | color:#c9c; |
155 | color:#c9c; |
| 155 | }
|
156 | }
|
| 156 | 157 | ||
| 157 | h2 {
|
158 | h2 {
|
| 158 | background-color: #000; |
159 | background-color: #000; |
| 159 | color: #fff; |
160 | color: #fff; |
| 160 | font-size: 136%; |
161 | font-size: 136%; |
| 161 | }
|
162 | }
|
| 162 | 163 | ||
| 163 | p {
|
164 | p {
|
| 164 | margin-top: 1em; |
165 | margin-top: 1em; |
| 165 | margin-bottom: 0; |
166 | margin-bottom: 0; |
| 166 | line-height: 1.5; |
167 | line-height: 1.5; |
| 167 | text-align: justify; |
168 | text-align: justify; |
| 168 | }
|
169 | }
|
| 169 | 170 | ||
| 170 | li p {
|
171 | li p {
|
| 171 | line-height: normal; |
172 | line-height: normal; |
| 172 | }
|
173 | }
|
| 173 | 174 | ||
| 174 | p:first-child { |
175 | p:first-child { |
| 175 | margin-top: 0; |
176 | margin-top: 0; |
| 176 | }
|
177 | }
|
| 177 | 178 | ||
| 178 | .instruction { |
179 | .instruction { |
| 179 | background-color: #000; |
180 | background-color: #000; |
| 180 | color: #f90; |
181 | color: #f90; |
| 181 | font-size: 136%; |
182 | font-size: 136%; |
| 182 | }
|
183 | }
|
| 183 | 184 | ||
| 184 | /* Language support */
|
185 | /* Language support */
|
| 185 | 186 | ||
| 186 | [lang^="x-vulcan-latin"] { |
187 | [lang^="x-vulcan-latin"] { |
| 187 | font-family: "URW Chancery L", "Matura MT Script Capitals", |
188 | font-family: "URW Chancery L", "Matura MT Script Capitals", |
| 188 | Haettenschweiler, Haettens, "Zurich XCn BT", impact, Verdana, |
189 | Haettenschweiler, Haettens, "Zurich XCn BT", impact, Verdana, |
| 189 | Geneva, Arial, Helvetica, sans-serif; |
190 | Geneva, Arial, Helvetica, sans-serif; |
| 190 | }
|
191 | }
|
| 191 | 192 | ||
| 192 | /* Bow (main) and elbo (multi-view) */
|
193 | /* Bow (main) and elbo (multi-view) */
|
| 193 | 194 | ||
| 194 | #LCARS { |
195 | #LCARS { |
| 195 | position: fixed; |
196 | position: fixed; |
| 196 | left: 0; |
197 | left: 0; |
| 197 | top: 0; |
198 | top: 0; |
| 198 | right: 0; |
199 | right: 0; |
| 199 | padding: 0.2em; |
200 | padding: 0.2em; |
| 200 | background-color: #000; |
201 | background-color: #000; |
| 201 | z-index: 1701; |
202 | z-index: 1701; |
| 202 | }
|
203 | }
|
| 203 | 204 | ||
| 204 | #bow { |
205 | #bow { |
| 205 | position: absolute; |
206 | position: absolute; |
| 206 | left: 0.2em; |
207 | left: 0.2em; |
| 207 | top: 0.2em; |
208 | top: 0.2em; |
| 208 | right: 0.2em; |
209 | right: 0.2em; |
| 209 | height: 2.4em; |
210 | height: 2.4em; |
| 210 | padding-bottom: 0.2em; |
211 | padding-bottom: 0.2em; |
| 211 | background-color: #000; |
212 | background-color: #000; |
| 212 | }
|
213 | }
|
| 213 | 214 | ||
| 214 | #bow-top { |
215 | #bow-top { |
| 215 | /* NOTE: position: absolute is needed for animation */
|
216 | /* NOTE: position: absolute is needed for animation */
|
| 216 | position: absolute; |
217 | position: absolute; |
| 217 | top: 0; |
218 | top: 0; |
| 218 | left: 0; |
219 | left: 0; |
| 219 | right: 0; |
220 | right: 0; |
| 220 | min-width: 15.4em; |
221 | min-width: 15.4em; |
| 221 | height: 2em; |
222 | height: 2em; |
| 222 | background-color: #999; |
223 | background-color: #999; |
| 223 | border-top-left-radius: 2.4em; |
224 | border-top-left-radius: 2.4em; |
| 224 | border-top-right-radius: 1.2em; |
225 | border-top-right-radius: 1.2em; |
| 225 | border-bottom-right-radius: 1.2em; |
226 | border-bottom-right-radius: 1.2em; |
| 226 | line-height: 0.9; |
227 | line-height: 0.9; |
| 227 | }
|
228 | }
|
| 228 | 229 | ||
| 229 | .empty #bow-top { |
230 | .empty #bow-top { |
| 230 | border-top-left-radius: 1.2em; |
231 | border-top-left-radius: 1.2em; |
| 231 | border-bottom-left-radius: 1.2em; |
232 | border-bottom-left-radius: 1.2em; |
| 232 | min-width: 10em; |
233 | min-width: 10em; |
| 233 | }
|
234 | }
|
| 234 | 235 | ||
| 235 | /* 0.0 to 0.5 s */
|
236 | /* 0.0 to 0.5 s */
|
| 236 | @-webkit-keyframes bow-top {
|
237 | @-webkit-keyframes bow-top {
|
| 237 | from {
|
238 | from {
|
| 238 | left: 90%; |
239 | left: 90%; |
| 239 | border-top-left-radius: 0; |
240 | border-top-left-radius: 0; |
| 240 | border-bottom-left-radius: 0; |
241 | border-bottom-left-radius: 0; |
| 241 | }
|
242 | }
|
| 242 | }
|
243 | }
|
| 243 | 244 | ||
| 244 | .fade-in #bow-top { |
245 | .fade-in #bow-top { |
| 245 | -webkit-animation-name: bow-top; |
246 | -webkit-animation-name: bow-top; |
| 246 | -webkit-animation-duration: 0.5s; |
247 | -webkit-animation-duration: 0.5s; |
| 247 | -webkit-animation-timing-function: linear; |
248 | -webkit-animation-timing-function: linear; |
| 248 | }
|
249 | }
|
| 249 | 250 | ||
| 250 | #bow-top .text { |
251 | #bow-top .text { |
| 251 | position: absolute; |
252 | position: absolute; |
| 252 | margin: 0; |
253 | margin: 0; |
| 253 | left: 4.33em; |
254 | left: 4.33em; |
| 254 | top: 0; |
255 | top: 0; |
| 255 | right: 0.75em; |
256 | right: 0.75em; |
| 256 | height: 1em; |
257 | height: 1em; |
| 257 | text-align: right; |
258 | text-align: right; |
| 258 | color: #fc0; |
259 | color: #fc0; |
| 259 | font-size: 2.4em; |
260 | font-size: 2.4em; |
| 260 | padding-right: 0.1em; |
261 | padding-right: 0.1em; |
| 261 | overflow: hidden; |
262 | overflow: hidden; |
| 262 | text-overflow: ellipsis; |
263 | text-overflow: ellipsis; |
| 263 | }
|
264 | }
|
| 264 | 265 | ||
| 265 | .empty #bow-top .text { |
266 | .empty #bow-top .text { |
| 266 | left: 0.93em; |
267 | left: 0.93em; |
| 267 | }
|
268 | }
|
| 268 | 269 | ||
| 269 | /* 0.0 to 0.5 s */
|
270 | /* 0.0 to 0.5 s */
|
| 270 | @-webkit-keyframes bow-top-text {
|
271 | @-webkit-keyframes bow-top-text {
|
| 271 | from {
|
272 | from {
|
| 272 | opacity: 0; |
273 | opacity: 0; |
| 273 | }
|
274 | }
|
| 274 | 275 | ||
| 275 | /* shortly before 1.0 s */
|
276 | /* shortly before 1.0 s */
|
| 276 | 99% { |
277 | 99% { |
| 277 | opacity: 0; |
278 | opacity: 0; |
| 278 | }
|
279 | }
|
| 279 | }
|
280 | }
|
| 280 | 281 | ||
| 281 | .fade-in #bow-top .text { |
282 | .fade-in #bow-top .text { |
| 282 | -webkit-animation-name: bow-top-text; |
283 | -webkit-animation-name: bow-top-text; |
| 283 | -webkit-animation-duration: 0.5s; |
284 | -webkit-animation-duration: 0.5s; |
| 284 | -webkit-animation-timing-function: linear; |
285 | -webkit-animation-timing-function: linear; |
| 285 | }
|
286 | }
|
| 286 | 287 | ||
| 287 | #bow-top .text span { |
288 | #bow-top .text span { |
| 288 | padding-right: 0.1em; |
289 | padding-right: 0.1em; |
| 289 | background-color: #000; |
290 | background-color: #000; |
| 290 | padding-left: 0.1em; |
291 | padding-left: 0.1em; |
| 291 | text-transform: uppercase; |
292 | text-transform: uppercase; |
| 292 | white-space: nowrap; |
293 | white-space: nowrap; |
| 293 | }
|
294 | }
|
| 294 | 295 | ||
| 295 | .empty #footer-container { |
296 | .empty #footer-container { |
| 296 | position: fixed; |
297 | position: fixed; |
| 297 | left: 0.2em; |
298 | left: 0.2em; |
| 298 | bottom: 0; |
299 | bottom: 0; |
| 299 | right: 0.2em; |
300 | right: 0.2em; |
| 300 | min-height: 2.4em; |
301 | min-height: 2.4em; |
| 301 | padding-top: 0.2em; |
302 | padding-top: 0.2em; |
| 302 | padding-bottom: 0.2em; |
303 | padding-bottom: 0.2em; |
| 303 | background-color: #000; |
304 | background-color: #000; |
| 304 | }
|
305 | }
|
| 305 | 306 | ||
| 306 | /* 0.0 to 0.5 s */
|
307 | /* 0.0 to 0.5 s */
|
| 307 | @-webkit-keyframes footer {
|
308 | @-webkit-keyframes footer {
|
| 308 | from {
|
309 | from {
|
| 309 | left: 90%; |
310 | left: 90%; |
| 310 | border-top-left-radius: 0; |
311 | border-top-left-radius: 0; |
| 311 | border-bottom-left-radius: 0; |
312 | border-bottom-left-radius: 0; |
| 312 | }
|
313 | }
|
| 313 | }
|
314 | }
|
| 314 | 315 | ||
| 315 | .empty.fade-in #footer { |
316 | .empty.fade-in #footer { |
| 316 | -webkit-animation-name: footer; |
317 | -webkit-animation-name: footer; |
| 317 | -webkit-animation-duration: 0.5s; |
318 | -webkit-animation-duration: 0.5s; |
| 318 | -webkit-animation-timing-function: linear; |
319 | -webkit-animation-timing-function: linear; |
| 319 | }
|
320 | }
|
| 320 | 321 | ||
| 321 | .empty #footer { |
322 | .empty #footer { |
| 322 | position: absolute; |
323 | position: absolute; |
| 323 | bottom: 0; |
324 | bottom: 0; |
| 324 | left: 0; |
325 | left: 0; |
| 325 | right: 0; |
326 | right: 0; |
| 326 | height: 2em; |
327 | height: 2em; |
| 327 | min-width: 10em; |
328 | min-width: 10em; |
| 328 | margin-bottom: 0.2em; |
329 | margin-bottom: 0.2em; |
| 329 | background-color: #999; |
330 | background-color: #999; |
| 330 | border-radius: 1.2em; |
331 | border-radius: 1.2em; |
| 331 | line-height: 0.9; |
332 | line-height: 0.9; |
| 332 | }
|
333 | }
|
| 333 | 334 | ||
| 334 | .empty #footer .text { |
335 | .empty #footer .text { |
| 335 | position: absolute; |
336 | position: absolute; |
| 336 | margin: 0; |
337 | margin: 0; |
| 337 | left: 0.93em; |
338 | left: 0.93em; |
| 338 | top: 0; |
339 | top: 0; |
| 339 | right: 0.75em; |
340 | right: 0.75em; |
| 340 | height: 1em; |
341 | height: 1em; |
| 341 | background-color: transparent; |
342 | background-color: transparent; |
| 342 | color: #fc0; |
343 | color: #fc0; |
| 343 | font-size: 2.4em; |
344 | font-size: 2.4em; |
| 344 | padding-right: 0.1em; |
345 | padding-right: 0.1em; |
| 345 | overflow: hidden; |
346 | overflow: hidden; |
| 346 | text-overflow: ellipsis; |
347 | text-overflow: ellipsis; |
| 347 | }
|
348 | }
|
| 348 | 349 | ||
| 349 | /* 0.0 to 0.5 s */
|
350 | /* 0.0 to 0.5 s */
|
| 350 | @-webkit-keyframes footer-text {
|
351 | @-webkit-keyframes footer-text {
|
| 351 | from {
|
352 | from {
|
| 352 | opacity: 0; |
353 | opacity: 0; |
| 353 | }
|
354 | }
|
| 354 | 355 | ||
| 355 | /* shortly before 0.5 s */
|
356 | /* shortly before 0.5 s */
|
| 356 | 99% { |
357 | 99% { |
| 357 | opacity: 0; |
358 | opacity: 0; |
| 358 | }
|
359 | }
|
| 359 | }
|
360 | }
|
| 360 | 361 | ||
| 361 | .empty.fade-in #footer .text { |
362 | .empty.fade-in #footer .text { |
| 362 | -webkit-animation-name: footer-text; |
363 | -webkit-animation-name: footer-text; |
| 363 | -webkit-animation-duration: 0.5s; |
364 | -webkit-animation-duration: 0.5s; |
| 364 | -webkit-animation-timing-function: linear; |
365 | -webkit-animation-timing-function: linear; |
| 365 | }
|
366 | }
|
| 366 | 367 | ||
| 367 | .empty #footer .text span { |
368 | .empty #footer .text span { |
| 368 | padding-right: 0.1em; |
369 | padding-right: 0.1em; |
| 369 | background-color: #000; |
370 | background-color: #000; |
| 370 | padding-left: 0.1em; |
371 | padding-left: 0.1em; |
| 371 | text-transform: uppercase; |
372 | text-transform: uppercase; |
| 372 | white-space: nowrap; |
373 | white-space: nowrap; |
| 373 | }
|
374 | }
|
| 374 | 375 | ||
| 375 | .empty .separator-left { |
376 | .empty .separator-left { |
| 376 | position: absolute; |
377 | position: absolute; |
| 377 | left: 2em; |
378 | left: 2em; |
| 378 | height: 2em; |
379 | height: 2em; |
| 379 | width: 0.25em; |
380 | width: 0.25em; |
| 380 | background-color: #000; |
381 | background-color: #000; |
| 381 | }
|
382 | }
|
| 382 | 383 | ||
| 383 | .empty .separator-right { |
384 | .empty .separator-right { |
| 384 | position: absolute; |
385 | position: absolute; |
| 385 | right: 2em; |
386 | right: 2em; |
| 386 | height: 2em; |
387 | height: 2em; |
| 387 | width: 0.25em; |
388 | width: 0.25em; |
| 388 | background-color: #000; |
389 | background-color: #000; |
| 389 | }
|
390 | }
|
| 390 | 391 | ||
| 391 | #bow-top-left { |
392 | #bow-top-left { |
| 392 | position: absolute; |
393 | position: absolute; |
| 393 | top: 2em; |
394 | top: 2em; |
| 394 | left: 0; |
395 | left: 0; |
| 395 | right: 0; |
396 | right: 0; |
| 396 | height: 3.2em; |
397 | height: 3.2em; |
| 397 | width: 9.2em; |
398 | width: 9.2em; |
| 398 | background-color: #999; |
399 | background-color: #999; |
| 399 | }
|
400 | }
|
| 400 | 401 | ||
| 401 | /* 0.0 to 0.625 s */
|
402 | /* 0.0 to 0.625 s */
|
| 402 | @-webkit-keyframes bow-top-left {
|
403 | @-webkit-keyframes bow-top-left {
|
| 403 | from {
|
404 | from {
|
| 404 | height: 0; |
405 | height: 0; |
| 405 | }
|
406 | }
|
| 406 | 407 | ||
| 407 | /* at 0.5 s */
|
408 | /* at 0.5 s */
|
| 408 | 80% { |
409 | 80% { |
| 409 | height: 0; |
410 | height: 0; |
| 410 | }
|
411 | }
|
| 411 | }
|
412 | }
|
| 412 | 413 | ||
| 413 | .fade-in #bow-top-left { |
414 | .fade-in #bow-top-left { |
| 414 | -webkit-animation-name: bow-top-left; |
415 | -webkit-animation-name: bow-top-left; |
| 415 | -webkit-animation-duration: 0.625s; |
416 | -webkit-animation-duration: 0.625s; |
| 416 | -webkit-animation-timing-function: linear; |
417 | -webkit-animation-timing-function: linear; |
| 417 | }
|
418 | }
|
| 418 | 419 | ||
| 419 | .empty #bow-top-left { |
420 | .empty #bow-top-left { |
| 420 | display: none; |
421 | display: none; |
| 421 | }
|
422 | }
|
| 422 | 423 | ||
| 423 | #bow-top-left .concave { |
424 | #bow-top-left .concave { |
| 424 | position: absolute; |
425 | position: absolute; |
| 425 | top: 0; |
426 | top: 0; |
| 426 | left: 8em; |
427 | left: 8em; |
| 427 | height: 3.2em; |
428 | height: 3.2em; |
| 428 | width: 1.2em; |
429 | width: 1.2em; |
| 429 | background-color: #000; |
430 | background-color: #000; |
| 430 | border-top-left-radius: 1.2em; |
431 | border-top-left-radius: 1.2em; |
| 431 | }
|
432 | }
|
| 432 | 433 | ||
| 433 | .empty #bow-top-left-concave { |
434 | .empty #bow-top-left-concave { |
| 434 | display: none; |
435 | display: none; |
| 435 | }
|
436 | }
|
| 436 | 437 | ||
| 437 | #bow .menu |
438 | #LCARS .menu-container { |
| 438 | {
|
- | |
| 439 | position: absolute; |
439 | position: fixed; |
| 440 | left: 0; |
440 | left: 0.2em; |
| 441 | top: 5.4em; |
441 | top: 5.6em; |
| 442 | width: 15.4em; |
442 | width: 8em; |
| - | 443 | bottom: 2.8em; |
|
| - | 444 | background-color: #999; |
|
| 443 | overflow: auto; |
445 | overflow: auto; |
| 444 | }
|
446 | }
|
| 445 | 447 | ||
| - | 448 | #LCARS .menu |
|
| - | 449 | {
|
|
| - | 450 | height: 17.6em; |
|
| - | 451 | background-color: #000; |
|
| - | 452 | }
|
|
| - | 453 | ||
| 446 | /* 0.0 to 1.125 s */
|
454 | /* 0.0 to 1.125 s */
|
| 447 | @-webkit-keyframes bow-menu {
|
455 | @-webkit-keyframes bow-menu {
|
| 448 | from {
|
456 | from {
|
| 449 | opacity: 0; |
457 | opacity: 0; |
| 450 | height: 0; |
- | |
| 451 | overflow: hidden; |
- | |
| 452 | }
|
458 | }
|
| 453 | 459 | ||
| 454 | /* at ca. 0.61875 s */
|
460 | /* at ca. 0.61875 s */
|
| 455 | 55% { |
461 | 55% { |
| 456 | opacity: 0; |
462 | opacity: 0; |
| 457 | }
|
463 | }
|
| 458 | 464 | ||
| 459 | 56% { |
465 | 56% { |
| 460 | opacity: 1; |
466 | opacity: 1; |
| 461 | height: 0; |
- | |
| 462 | overflow: hidden; |
- | |
| 463 | }
|
- | |
| 464 | - | ||
| 465 | to {
|
- | |
| 466 | height: auto; |
- | |
| 467 | }
|
467 | }
|
| 468 | }
|
468 | }
|
| 469 | 469 | ||
| 470 | .fade-in #bow .menu |
470 | .fade-in #LCARS .menu |
| 471 | {
|
471 | {
|
| 472 | -webkit-animation-name: bow-menu; |
472 | -webkit-animation-name: bow-menu; |
| 473 | -webkit-animation-duration: 1.125s; |
473 | -webkit-animation-duration: 1.125s; |
| 474 | -webkit-animation-timing-function: linear; |
474 | -webkit-animation-timing-function: linear; |
| 475 | }
|
475 | }
|
| 476 | 476 | ||
| 477 | #bow ul { |
477 | .menu ul { |
| 478 | margin: 0 0.2em 0.2em 0; |
478 | margin: 0 0.2em 0.2em 0; |
| 479 | padding: 0; |
479 | padding: 0; |
| 480 | }
|
480 | }
|
| 481 | 481 | ||
| 482 | #bow li { |
482 | .menu li { |
| 483 | margin: 0; |
483 | margin: 0; |
| 484 | }
|
484 | }
|
| 485 | 485 | ||
| 486 | #bow #bottom |
486 | #bow #bottom |
| 487 | {
|
487 | {
|
| 488 | position: fixed; |
488 | position: fixed; |
| 489 | left: 0; |
489 | left: 0; |
| 490 | bottom: 0; |
490 | bottom: 0; |
| 491 | width: 20.8em; |
491 | width: 20.8em; |
| 492 | height: 2.4em; |
492 | height: 2.4em; |
| 493 | background-color: #000; |
493 | background-color: #000; |
| 494 | z-index: 1701; |
494 | z-index: 1701; |
| 495 | }
|
495 | }
|
| 496 | 496 | ||
| 497 | #bow-bottom { |
497 | #bow-bottom { |
| 498 | position: absolute; |
498 | position: absolute; |
| 499 | bottom: 0.2em; |
499 | bottom: 0.2em; |
| 500 | left: 0.2em; |
500 | left: 0.2em; |
| 501 | width: 20.6em; |
501 | width: 20.6em; |
| 502 | height: 2.4em; |
502 | height: 2.4em; |
| 503 | border-bottom-left-radius: 2.4em; |
503 | border-bottom-left-radius: 2.4em; |
| 504 | border-bottom-right-radius: 2em; |
504 | border-bottom-right-radius: 2em; |
| 505 | background-color: #999; |
505 | background-color: #999; |
| 506 | }
|
506 | }
|
| 507 | 507 | ||
| 508 | .empty #bow-bottom { |
508 | .empty #bow-bottom { |
| 509 | display: none; |
509 | display: none; |
| 510 | }
|
510 | }
|
| 511 | 511 | ||
| 512 | #bow-bottom .concave { |
512 | #bow-bottom .concave { |
| 513 | position: absolute; |
513 | position: absolute; |
| 514 | margin-left: 0.2em; |
514 | margin-left: 0.2em; |
| 515 | margin-bottom: 0.2em; |
515 | margin-bottom: 0.2em; |
| 516 | bottom: 0.3em; |
516 | bottom: 0.3em; |
| 517 | left: 7.8em; |
517 | left: 7.8em; |
| 518 | height: 2.1em; |
518 | height: 2.1em; |
| 519 | width: 7.6em; |
519 | width: 7.6em; |
| 520 | border-bottom-left-radius: 1.2em; |
520 | border-bottom-left-radius: 1.2em; |
| 521 | border-bottom-right-radius: 1em; |
521 | border-bottom-right-radius: 1em; |
| 522 | background-color: #000; |
522 | background-color: #000; |
| 523 | }
|
523 | }
|
| 524 | 524 | ||
| 525 | #bow-bottom .spacer { |
525 | #bow-bottom .spacer { |
| 526 | position: absolute; |
526 | position: absolute; |
| 527 | left: 10.2em; |
527 | left: 10.2em; |
| 528 | bottom: 0em; |
528 | bottom: 0em; |
| 529 | width: 0.2em; |
529 | width: 0.2em; |
| 530 | height: 0.5em; |
530 | height: 0.5em; |
| 531 | background-color: black; |
531 | background-color: black; |
| 532 | }
|
532 | }
|
| 533 | 533 | ||
| 534 | .empty #bow-bottom-left-concave { |
534 | .empty #bow-bottom-left-concave { |
| 535 | display: none; |
535 | display: none; |
| 536 | }
|
536 | }
|
| 537 | 537 | ||
| 538 | /* Controls */
|
538 | /* Controls */
|
| 539 | 539 | ||
| 540 | .button:visited:hover, |
540 | .button:visited:hover, |
| 541 | .button:visited, |
541 | .button:visited, |
| 542 | .button:hover, |
542 | .button:hover, |
| 543 | .button
|
543 | .button
|
| 544 | {
|
544 | {
|
| 545 | position: relative; |
545 | position: relative; |
| 546 | display: inline-block; |
546 | display: inline-block; |
| 547 | margin-right: 0.2em; |
547 | margin-right: 0.2em; |
| 548 | margin-bottom: 0.2em; |
548 | margin-bottom: 0.2em; |
| 549 | width: 5em; |
549 | width: 5em; |
| 550 | height: 2em; |
550 | height: 2em; |
| 551 | background-color: #7d7d7d; /* c9c */ |
551 | background-color: #7d7d7d; /* c9c */ |
| 552 | color: #000 !important; |
552 | color: #000 !important; |
| 553 | font-family: "LCARS", |
553 | font-family: "LCARS", |
| 554 | Haettenschweiler, "Downloadable Haettenschweiler", |
554 | Haettenschweiler, "Downloadable Haettenschweiler", |
| 555 | "Zurich XCn BT", "Downloadable Zurich XCn BT", |
555 | "Zurich XCn BT", "Downloadable Zurich XCn BT", |
| 556 | impact, Verdana, Geneva, Arial, Helvetica, sans-serif; |
556 | impact, Verdana, Geneva, Arial, Helvetica, sans-serif; |
| 557 | text-decoration: none !important; |
557 | text-decoration: none !important; |
| 558 | text-transform: uppercase; |
558 | text-transform: uppercase; |
| 559 | overflow: hidden; |
559 | overflow: hidden; |
| 560 | cursor: pointer; |
560 | cursor: pointer; |
| 561 | }
|
561 | }
|
| 562 | 562 | ||
| 563 | .button .text { |
563 | .button .text { |
| 564 | position: absolute; |
564 | position: absolute; |
| 565 | bottom: 0; |
565 | bottom: 0; |
| 566 | right: 0.5em; |
566 | right: 0.5em; |
| 567 | }
|
567 | }
|
| 568 | 568 | ||
| 569 | .button.command { |
569 | .button.command { |
| 570 | border-radius: 1.2em; |
570 | border-radius: 1.2em; |
| 571 | }
|
571 | }
|
| 572 | 572 | ||
| 573 | .button.command .text { |
573 | .button.command .text { |
| 574 | position: absolute; |
574 | position: absolute; |
| 575 | bottom: 0; |
575 | bottom: 0; |
| 576 | right: 1em; |
576 | right: 1em; |
| 577 | }
|
577 | }
|
| 578 | 578 | ||
| 579 | .button:hover, |
579 | .button:hover, |
| 580 | .button:focus, |
580 | .button:focus, |
| 581 | .button.selected:hover, |
581 | .button.selected:hover, |
| 582 | .button.selected:focus, |
582 | .button.selected:focus, |
| 583 | .group .button:hover, |
583 | .group .button:hover, |
| 584 | .group .button:focus, |
584 | .group .button:focus, |
| 585 | .group .button:visited:hover, |
585 | .group .button:visited:hover, |
| 586 | .group .button:visited:focus |
586 | .group .button:visited:focus |
| 587 | {
|
587 | {
|
| 588 | background-color: #f90 !important; |
588 | background-color: #f90 !important; |
| 589 | color: #000 !important; |
589 | color: #000 !important; |
| 590 | }
|
590 | }
|
| 591 | 591 | ||
| 592 | .button:active, |
592 | .button:active, |
| 593 | .button.selected:active, |
593 | .button.selected:active, |
| 594 | .group .button:active, |
594 | .group .button:active, |
| 595 | .group .button:visited:active |
595 | .group .button:visited:active |
| 596 | {
|
596 | {
|
| 597 | background-color: #fff !important; |
597 | background-color: #fff !important; |
| 598 | color: #000 !important; |
598 | color: #000 !important; |
| 599 | }
|
599 | }
|
| 600 | 600 | ||
| 601 | #bow .button { |
601 | .menu .button { |
| 602 | display: block; |
602 | display: block; |
| 603 | width: 8em; |
603 | width: 8em; |
| 604 | height: 1em; |
604 | height: 1em; |
| 605 | line-height: 1; |
605 | line-height: 1; |
| 606 | background-color: #9cf; |
606 | background-color: #9cf; |
| 607 | color: #000 !important; |
607 | color: #000 !important; |
| 608 | }
|
608 | }
|
| 609 | 609 | ||
| 610 | .multi-display
|
610 | .multi-display
|
| 611 | {
|
611 | {
|
| 612 | position: fixed; |
612 | position: fixed; |
| 613 | top: 2.8em; |
613 | top: 2.8em; |
| 614 | left: 15.8em; |
614 | left: 15.8em; |
| 615 | right: 0em; |
615 | right: 0em; |
| 616 | }
|
616 | }
|
| 617 | 617 | ||
| 618 | .multi-display .button |
618 | .multi-display .button |
| 619 | {
|
619 | {
|
| 620 | width: 5em !important; |
620 | width: 5em !important; |
| 621 | }
|
621 | }
|
| 622 | 622 | ||
| 623 | .multi-display .upper |
623 | .multi-display .upper |
| 624 | {
|
624 | {
|
| 625 | position: absolute; |
625 | position: absolute; |
| 626 | top: 0; |
626 | top: 0; |
| 627 | left: 0; |
627 | left: 0; |
| 628 | right: 0; |
628 | right: 0; |
| 629 | height: 7.2em; |
629 | height: 7.2em; |
| 630 | padding-bottom: 0.2em; |
630 | padding-bottom: 0.2em; |
| 631 | padding-right: 0.2em; |
631 | padding-right: 0.2em; |
| 632 | background-color: black; |
632 | background-color: black; |
| 633 | }
|
633 | }
|
| 634 | 634 | ||
| 635 | .multi-display .upper .button |
635 | .multi-display .upper .button |
| 636 | {
|
636 | {
|
| 637 | height: 3.8em; |
637 | height: 3.8em; |
| 638 | background-color: #c9c !important; |
638 | background-color: #c9c !important; |
| 639 | }
|
639 | }
|
| 640 | 640 | ||
| 641 | .multi-display .upper .elbo |
641 | .multi-display .upper .elbo |
| 642 | {
|
642 | {
|
| 643 | position: absolute; |
643 | position: absolute; |
| 644 | left: 0; |
644 | left: 0; |
| 645 | top: 4em; |
645 | top: 4em; |
| 646 | width: 6em; |
646 | width: 6em; |
| 647 | height: 3.2em; |
647 | height: 3.2em; |
| 648 | border-bottom-left-radius: 2em; |
648 | border-bottom-left-radius: 2em; |
| 649 | background-color: #9cf; |
649 | background-color: #9cf; |
| 650 | }
|
650 | }
|
| 651 | 651 | ||
| 652 | .multi-display .upper .elbo .concave |
652 | .multi-display .upper .elbo .concave |
| 653 | {
|
653 | {
|
| 654 | position: absolute; |
654 | position: absolute; |
| 655 | left: 5em; |
655 | left: 5em; |
| 656 | top: 0; |
656 | top: 0; |
| 657 | width: 1em; |
657 | width: 1em; |
| 658 | height: 2.2em; |
658 | height: 2.2em; |
| 659 | border-bottom-left-radius: 1em; |
659 | border-bottom-left-radius: 1em; |
| 660 | background-color: black; |
660 | background-color: black; |
| 661 | }
|
661 | }
|
| 662 | 662 | ||
| 663 | .multi-display .upper .border |
663 | .multi-display .upper .border |
| 664 | {
|
664 | {
|
| 665 | position: fixed; |
665 | position: fixed; |
| 666 | top: 9em; |
666 | top: 9em; |
| 667 | left: 21.8em; |
667 | left: 21.8em; |
| 668 | right: 0.2em; |
668 | right: 0.2em; |
| 669 | height: 1em; |
669 | height: 1em; |
| 670 | background-color: #9cf; |
670 | background-color: #9cf; |
| 671 | }
|
671 | }
|
| 672 | 672 | ||
| 673 | .multi-display .lower |
673 | .multi-display .lower |
| 674 | {
|
674 | {
|
| 675 | position: absolute; |
675 | position: absolute; |
| 676 | top: 7.3em; |
676 | top: 7.3em; |
| 677 | left: 0; |
677 | left: 0; |
| 678 | padding-top: 0.1em; |
678 | padding-top: 0.1em; |
| 679 | background-color: black; |
679 | background-color: black; |
| 680 | }
|
680 | }
|
| 681 | 681 | ||
| 682 | .multi-display .lower .elbo |
682 | .multi-display .lower .elbo |
| 683 | {
|
683 | {
|
| 684 | position: relative; |
684 | position: relative; |
| 685 | width: 6em; |
685 | width: 6em; |
| 686 | height: 3em; |
686 | height: 3em; |
| 687 | border-top-left-radius: 2em; |
687 | border-top-left-radius: 2em; |
| 688 | background-color: #fc6; |
688 | background-color: #fc6; |
| 689 | }
|
689 | }
|
| 690 | 690 | ||
| 691 | .multi-display .lower .elbo.database, |
- | |
| 692 | .multi-display .lower .bg.database, |
- | |
| 693 | .multi-display .lower .border |
- | |
| 694 | {
|
- | |
| 695 | background-color: #c66; |
- | |
| 696 | }
|
- | |
| 697 | - | ||
| 698 | .multi-display .lower .elbo .concave |
691 | .multi-display .lower .elbo .concave |
| 699 | {
|
692 | {
|
| 700 | position: absolute; |
693 | position: absolute; |
| 701 | left: 5em; |
694 | left: 5em; |
| 702 | top: 1em; |
695 | top: 1em; |
| 703 | width: 1em; |
696 | width: 1em; |
| 704 | height: 2em; |
697 | height: 2em; |
| 705 | background-color: black; |
698 | background-color: black; |
| 706 | border-top-left-radius: 1em; |
699 | border-top-left-radius: 1em; |
| 707 | }
|
700 | }
|
| 708 | 701 | ||
| 709 | .multi-display .lower .bg |
702 | .multi-display .lower .bg |
| 710 | {
|
703 | {
|
| 711 | position: fixed; |
704 | position: fixed; |
| 712 | top: 13.4em; |
705 | top: 13.4em; |
| 713 | bottom: 2.8em; |
706 | bottom: 2.8em; |
| 714 | width: 5em; |
707 | width: 5em; |
| 715 | background-color: #fc6; |
708 | background-color: #fc6; |
| 716 | }
|
709 | }
|
| 717 | 710 | ||
| 718 | .multi-display .lower .border-container |
711 | .multi-display .lower .border-container |
| 719 | {
|
712 | {
|
| 720 | position: fixed; |
713 | position: fixed; |
| 721 | top: 10.2em; |
714 | top: 10.2em; |
| 722 | left: 21.8em; |
715 | left: 21.8em; |
| 723 | right: 0em; |
716 | right: 0em; |
| 724 | height: 1.2em; |
717 | height: 1.2em; |
| 725 | background-color: black; |
718 | background-color: black; |
| 726 | }
|
719 | }
|
| 727 | 720 | ||
| 728 | .multi-display .lower .border |
721 | .multi-display .lower .border |
| 729 | {
|
722 | {
|
| 730 | position: absolute; |
723 | position: absolute; |
| 731 | top: 0; |
724 | top: 0; |
| 732 | left: 0; |
725 | left: 0; |
| 733 | right: 0.2em; |
726 | right: 0.2em; |
| 734 | height: 1em; |
727 | height: 1em; |
| 735 | background-color: #fc6; |
728 | background-color: #fc6; |
| 736 | }
|
729 | }
|
| 737 | 730 | ||
| - | 731 | .menu .button.secondary, |
|
| - | 732 | .multi-display .lower .elbo.secondary, |
|
| - | 733 | .multi-display .lower .bg.secondary, |
|
| - | 734 | .multi-display .lower .border.secondary |
|
| - | 735 | {
|
|
| - | 736 | background-color: #f96; |
|
| - | 737 | }
|
|
| - | 738 | ||
| - | 739 | .menu .button.ancillary, |
|
| - | 740 | .multi-display .lower .elbo.ancillary, |
|
| - | 741 | .multi-display .lower .bg.ancillary, |
|
| - | 742 | .multi-display .lower .border.ancillary |
|
| - | 743 | {
|
|
| - | 744 | background-color: #c9c; |
|
| - | 745 | }
|
|
| - | 746 | ||
| 738 | #bow .button.database { |
747 | .menu .button.database, |
| - | 748 | .multi-display .lower .elbo.database, |
|
| - | 749 | .multi-display .lower .bg.database, |
|
| - | 750 | .multi-display .lower .border.database |
|
| - | 751 | {
|
|
| 739 | background-color: #c66; |
752 | background-color: #c66; |
| 740 | }
|
753 | }
|
| 741 | 754 | ||
| 742 | #bow .button .text { |
755 | .menu .button .text { |
| 743 | position: static; |
756 | position: static; |
| 744 | margin: 0 0.25em; |
757 | margin: 0 0.25em; |
| 745 | }
|
758 | }
|
| 746 | 759 | ||
| 747 | .button.selected { |
760 | .button.selected { |
| 748 | background-color: #fc6 !important; |
761 | background-color: #fc6 !important; |
| 749 | color: #000 !important; |
762 | color: #000 !important; |
| 750 | }
|
763 | }
|
| 751 | 764 | ||
| 752 | .group { |
765 | .group { |
| 753 | margin: 0 auto; |
766 | margin: 0 auto; |
| 754 | position: relative; |
767 | position: relative; |
| 755 | width: 7.7em; |
768 | width: 7.7em; |
| 756 | }
|
769 | }
|
| 757 | 770 | ||
| 758 | .group .separator { |
771 | .group .separator { |
| 759 | float: left; |
772 | float: left; |
| 760 | position: absolute; |
773 | position: absolute; |
| 761 | top: 0; |
774 | top: 0; |
| 762 | left: 0; |
775 | left: 0; |
| 763 | width: 1.5em; |
776 | width: 1.5em; |
| 764 | height: 100%; |
777 | height: 100%; |
| 765 | background-color: #c66; |
778 | background-color: #c66; |
| 766 | color: #000; |
779 | color: #000; |
| 767 | }
|
780 | }
|
| 768 | 781 | ||
| 769 | .group .separator:after { |
782 | .group .separator:after { |
| 770 | position: absolute; |
783 | position: absolute; |
| 771 | width: 0.8em; |
784 | width: 0.8em; |
| 772 | height: 0.5em; |
785 | height: 0.5em; |
| 773 | bottom: 0.25em; |
786 | bottom: 0.25em; |
| 774 | left: 0.25em; |
787 | left: 0.25em; |
| 775 | background-color: #000; |
788 | background-color: #000; |
| 776 | content: "\a0"; |
789 | content: "\a0"; |
| 777 | }
|
790 | }
|
| 778 | 791 | ||
| 779 | .group ul { |
792 | .group ul { |
| 780 | margin-left: 1.7em; |
793 | margin-left: 1.7em; |
| 781 | }
|
794 | }
|
| 782 | 795 | ||
| 783 | .group li { |
796 | .group li { |
| 784 | margin-bottom: 0; |
797 | margin-bottom: 0; |
| 785 | }
|
798 | }
|
| 786 | 799 | ||
| 787 | .group .button:visited, |
800 | .group .button:visited, |
| 788 | .group .button |
801 | .group .button |
| 789 | {
|
802 | {
|
| 790 | display: block; |
803 | display: block; |
| 791 | position: relative; |
804 | position: relative; |
| 792 | width: 6em; |
805 | width: 6em; |
| 793 | background-color: #99f !important; |
806 | background-color: #99f !important; |
| 794 | }
|
807 | }
|
| 795 | 808 | ||
| 796 | .group li:last-child .button |
809 | .group li:last-child .button |
| 797 | {
|
810 | {
|
| 798 | margin-bottom: 0; |
811 | margin-bottom: 0; |
| 799 | }
|
812 | }
|
| 800 | 813 | ||
| 801 | .button.right { |
814 | .button.right { |
| 802 | border-top-right-radius: 1em; |
815 | border-top-right-radius: 1em; |
| 803 | border-bottom-right-radius: 1em; |
816 | border-bottom-right-radius: 1em; |
| 804 | }
|
817 | }
|
| 805 | 818 | ||
| 806 | .button.right .text { |
819 | .button.right .text { |
| 807 | right: 1em; |
820 | right: 1em; |
| 808 | }
|
821 | }
|
| 809 | 822 | ||
| 810 | .button.left { |
823 | .button.left { |
| 811 | border-top-left-radius: 1em; |
824 | border-top-left-radius: 1em; |
| 812 | border-bottom-left-radius: 1em; |
825 | border-bottom-left-radius: 1em; |
| 813 | }
|
826 | }
|
| 814 | 827 | ||
| 815 | .group .button .key { |
828 | .group .button .key { |
| 816 | display: inline-block; |
829 | display: inline-block; |
| 817 | position: absolute; |
830 | position: absolute; |
| 818 | left: 0.2em; |
831 | left: 0.2em; |
| 819 | top: 0; |
832 | top: 0; |
| 820 | bottom: 0; |
833 | bottom: 0; |
| 821 | padding: 0 0.1em; |
834 | padding: 0 0.1em; |
| 822 | background-color: #000; |
835 | background-color: #000; |
| 823 | color: #f90; |
836 | color: #f90; |
| 824 | font-size: 2.4em; |
837 | font-size: 2.4em; |
| 825 | text-transform: uppercase; |
838 | text-transform: uppercase; |
| 826 | line-height: 0.9; |
839 | line-height: 0.9; |
| 827 | }
|
840 | }
|