Rev 169 | Rev 179 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 50 | PointedEar | 1 | <?php |
| 125 | PointedEar | 2 | @\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
| 50 | PointedEar | 3 | |
| 116 | PointedEar | 4 | /* Resource expires in HTTP/1.1 caches 24h after last retrieval */ |
| 125 | PointedEar | 5 | @\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
| 58 | PointedEar | 6 | |
| 116 | PointedEar | 7 | /* Resource expires in HTTP/1.0 caches 24h after last retrieval */ |
| 125 | PointedEar | 8 | @\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
| 58 | PointedEar | 9 | |
| 125 | PointedEar | 10 | @\header('Content-Type: text/css; charset=UTF-8'); |
| 119 | PointedEar | 11 | |
| 12 | require_once 'css/least/Mixins.php'; |
||
| 169 | PointedEar | 13 | use de\pointedears\css\least\Mixins; |
| 79 | PointedEar | 14 | ?>@charset "UTF-8"; |
| 37 | PointedEar | 15 | |
| 58 | PointedEar | 16 | <?php |
| 17 | if (!isset($_GET['ani']) || $_GET['ani'] !== '0') |
||
| 18 | { |
||
| 123 | PointedEar | 19 | /* Optional general animations */ |
| 58 | PointedEar | 20 | ?> |
| 79 | PointedEar | 21 | @import url("/styles/lcars-ani.css"); |
| 58 | PointedEar | 22 | <?php |
| 23 | } |
||
| 24 | ?> |
||
| 123 | PointedEar | 25 | |
| 26 | <?php |
||
| 27 | /* Non-optional content-specific animations */ |
||
| 28 | Mixins::keyframes('analysis', <<<CSS |
||
| 29 | from, 74% { |
||
| 30 | opacity: 0; |
||
| 31 | } |
||
| 32 | |||
| 33 | 75%, to { |
||
| 34 | opacity: 1; |
||
| 35 | color: #fc6; |
||
| 36 | } |
||
| 37 | CSS |
||
| 38 | ); |
||
| 39 | ?> |
||
| 40 | |||
| 41 | <?php |
||
| 42 | Mixins::keyframes('analysis-scan', <<<CSS |
||
| 43 | from, 25% { |
||
| 44 | color: #fc6; |
||
| 45 | } |
||
| 46 | |||
| 47 | 26%, to { |
||
| 48 | color: #fff; |
||
| 49 | } |
||
| 50 | CSS |
||
| 51 | ); |
||
| 52 | |||
| 53 | /* FIXME: :hover hides first row */ |
||
| 54 | /* |
||
| 55 | .multi-display .upper .content .analysis:hover tr { |
||
| 56 | <?php |
||
| 57 | Mixins::animation('-play-state', 'paused'); |
||
| 148 | PointedEar | 58 | ?> |
| 123 | PointedEar | 59 | } |
| 60 | */ |
||
| 148 | PointedEar | 61 | ?> |
| 62 | |||
| 63 | .multi-display .upper .content .analysis tr:hover |
||
| 64 | { |
||
| 65 | color: #f90 !important; |
||
| 66 | } |
||
| 67 | |||
| 123 | PointedEar | 68 | /* Blink rate 1 Hz should be safe for people with photosensitive epilepsy */ |
| 148 | PointedEar | 69 | .multi-display .upper .content .analysis tr:nth-child(1) |
| 123 | PointedEar | 70 | { |
| 71 | <?php |
||
| 72 | Mixins::animation('', 'analysis 1.5s linear 0s, analysis-scan 4s linear 2.0s infinite'); |
||
| 73 | ?> |
||
| 74 | } |
||
| 75 | |||
| 148 | PointedEar | 76 | .multi-display .upper .content .analysis tr:nth-child(2) |
| 123 | PointedEar | 77 | { |
| 78 | <?php |
||
| 79 | Mixins::animation('', 'analysis 1.5s linear 0.25s, analysis-scan 4s linear 3.0s infinite'); |
||
| 80 | ?> |
||
| 81 | } |
||
| 82 | |||
| 148 | PointedEar | 83 | .multi-display .upper .content .analysis tr:nth-child(3) |
| 123 | PointedEar | 84 | { |
| 85 | <?php |
||
| 86 | Mixins::animation('', 'analysis 1.5s linear 0.5s, analysis-scan 4s linear 4.0s infinite'); |
||
| 87 | ?> |
||
| 88 | } |
||
| 89 | |||
| 144 | PointedEar | 90 | <?php |
| 91 | Mixins::keyframes('analysis-offline', <<<CSS |
||
| 92 | from, 33% { |
||
| 93 | color: #300; |
||
| 94 | } |
||
| 95 | |||
| 96 | 34%, to { |
||
| 97 | color: #f00; |
||
| 98 | } |
||
| 99 | CSS |
||
| 100 | ); |
||
| 101 | ?> |
||
| 102 | |||
| 103 | .offline { |
||
| 104 | <?php |
||
| 105 | Mixins::animation('', 'analysis-offline 3s linear 2.0s infinite'); |
||
| 106 | ?> |
||
| 107 | } |
||
| 108 | |||
| 37 | PointedEar | 109 | body { |
| 110 | margin-top: 12em; |
||
| 119 | PointedEar | 111 | margin-left: 16.8em; |
| 37 | PointedEar | 112 | margin-right: 0.2em; |
| 113 | margin-bottom: 0.2em; |
||
| 114 | } |
||
| 115 | |||
| 116 | PointedEar | 116 | /* HTML5 elements */ |
| 117 | |||
| 118 | nav |
||
| 119 | { |
||
| 120 | display: block; |
||
| 121 | } |
||
| 122 | |||
| 37 | PointedEar | 123 | /* Bow (main) and elbo (multi-view) */ |
| 124 | |||
| 125 | #LCARS { |
||
| 126 | position: fixed; |
||
| 127 | left: 0; |
||
| 128 | top: 0; |
||
| 129 | right: 0; |
||
| 130 | padding: 0.2em; |
||
| 131 | background-color: #000; |
||
| 132 | z-index: 1701; |
||
| 133 | } |
||
| 134 | |||
| 135 | #bow { |
||
| 136 | position: absolute; |
||
| 137 | left: 0.2em; |
||
| 138 | top: 0.2em; |
||
| 139 | right: 0.2em; |
||
| 140 | height: 2.4em; |
||
| 141 | padding-bottom: 0.2em; |
||
| 142 | background-color: #000; |
||
| 143 | } |
||
| 144 | |||
| 145 | #bow-top { |
||
| 146 | /* NOTE: position: absolute is needed for animation */ |
||
| 147 | position: absolute; |
||
| 148 | top: 0; |
||
| 149 | left: 0; |
||
| 150 | right: 0; |
||
| 151 | min-width: 15.4em; |
||
| 152 | height: 2em; |
||
| 153 | background-color: #999; |
||
| 154 | border-top-left-radius: 2.4em; |
||
| 155 | border-top-right-radius: 1.2em; |
||
| 156 | border-bottom-right-radius: 1.2em; |
||
| 157 | line-height: 0.9; |
||
| 158 | } |
||
| 159 | |||
| 160 | .empty #bow-top { |
||
| 161 | border-top-left-radius: 1.2em; |
||
| 162 | border-bottom-left-radius: 1.2em; |
||
| 38 | PointedEar | 163 | min-width: 10em; |
| 37 | PointedEar | 164 | } |
| 165 | |||
| 166 | |||
| 167 | #bow-top .text { |
||
| 168 | position: absolute; |
||
| 169 | margin: 0; |
||
| 170 | left: 4.33em; |
||
| 171 | top: 0; |
||
| 40 | PointedEar | 172 | right: 0.75em; |
| 37 | PointedEar | 173 | height: 1em; |
| 174 | text-align: right; |
||
| 175 | color: #fc0; |
||
| 176 | font-size: 2.4em; |
||
| 177 | padding-right: 0.1em; |
||
| 178 | overflow: hidden; |
||
| 179 | text-overflow: ellipsis; |
||
| 180 | } |
||
| 181 | |||
| 38 | PointedEar | 182 | .empty #bow-top .text { |
| 183 | left: 0.93em; |
||
| 184 | } |
||
| 185 | |||
| 37 | PointedEar | 186 | |
| 187 | |||
| 188 | #bow-top .text span { |
||
| 189 | padding-right: 0.1em; |
||
| 190 | background-color: #000; |
||
| 191 | padding-left: 0.1em; |
||
| 192 | text-transform: uppercase; |
||
| 193 | white-space: nowrap; |
||
| 194 | } |
||
| 195 | |||
| 38 | PointedEar | 196 | .empty #footer-container { |
| 197 | position: fixed; |
||
| 198 | left: 0.2em; |
||
| 199 | bottom: 0; |
||
| 200 | right: 0.2em; |
||
| 201 | min-height: 2.4em; |
||
| 202 | padding-top: 0.2em; |
||
| 203 | padding-bottom: 0.2em; |
||
| 204 | background-color: #000; |
||
| 205 | } |
||
| 206 | |||
| 40 | PointedEar | 207 | |
| 38 | PointedEar | 208 | .empty #footer { |
| 209 | position: absolute; |
||
| 210 | bottom: 0; |
||
| 211 | left: 0; |
||
| 212 | right: 0; |
||
| 213 | height: 2em; |
||
| 40 | PointedEar | 214 | min-width: 10em; |
| 38 | PointedEar | 215 | margin-bottom: 0.2em; |
| 216 | background-color: #999; |
||
| 217 | border-radius: 1.2em; |
||
| 40 | PointedEar | 218 | line-height: 0.9; |
| 38 | PointedEar | 219 | } |
| 220 | |||
| 221 | .empty #footer .text { |
||
| 222 | position: absolute; |
||
| 40 | PointedEar | 223 | margin: 0; |
| 224 | left: 0.93em; |
||
| 225 | top: 0; |
||
| 226 | right: 0.75em; |
||
| 227 | height: 1em; |
||
| 228 | background-color: transparent; |
||
| 38 | PointedEar | 229 | color: #fc0; |
| 40 | PointedEar | 230 | font-size: 2.4em; |
| 38 | PointedEar | 231 | padding-right: 0.1em; |
| 232 | overflow: hidden; |
||
| 233 | text-overflow: ellipsis; |
||
| 234 | } |
||
| 235 | |||
| 236 | .empty #footer .text span { |
||
| 237 | padding-right: 0.1em; |
||
| 40 | PointedEar | 238 | background-color: #000; |
| 38 | PointedEar | 239 | padding-left: 0.1em; |
| 240 | text-transform: uppercase; |
||
| 241 | white-space: nowrap; |
||
| 242 | } |
||
| 243 | |||
| 37 | PointedEar | 244 | .empty .separator-left { |
| 245 | position: absolute; |
||
| 246 | left: 2em; |
||
| 247 | height: 2em; |
||
| 248 | width: 0.25em; |
||
| 249 | background-color: #000; |
||
| 250 | } |
||
| 251 | |||
| 252 | .empty .separator-right { |
||
| 253 | position: absolute; |
||
| 254 | right: 2em; |
||
| 255 | height: 2em; |
||
| 256 | width: 0.25em; |
||
| 257 | background-color: #000; |
||
| 258 | } |
||
| 259 | |||
| 58 | PointedEar | 260 | .bow { |
| 261 | background-color: #999; |
||
| 262 | } |
||
| 263 | |||
| 37 | PointedEar | 264 | #bow-top-left { |
| 265 | position: absolute; |
||
| 266 | top: 2em; |
||
| 267 | left: 0; |
||
| 268 | right: 0; |
||
| 109 | PointedEar | 269 | height: 4.4em; |
| 37 | PointedEar | 270 | width: 9.2em; |
| 271 | background-color: #999; |
||
| 109 | PointedEar | 272 | overflow: hidden; |
| 37 | PointedEar | 273 | } |
| 274 | |||
| 275 | .empty #bow-top-left { |
||
| 276 | display: none; |
||
| 277 | } |
||
| 278 | |||
| 279 | #bow-top-left .concave { |
||
| 280 | position: absolute; |
||
| 281 | top: 0; |
||
| 282 | left: 8em; |
||
| 109 | PointedEar | 283 | height: 4.4em; |
| 37 | PointedEar | 284 | width: 1.2em; |
| 285 | background-color: #000; |
||
| 286 | border-top-left-radius: 1.2em; |
||
| 287 | } |
||
| 288 | |||
| 289 | .empty #bow-top-left-concave { |
||
| 290 | display: none; |
||
| 291 | } |
||
| 292 | |||
| 50 | PointedEar | 293 | .menu-container { |
| 43 | PointedEar | 294 | position: fixed; |
| 295 | left: 0.2em; |
||
| 109 | PointedEar | 296 | top: 6.8em; |
| 43 | PointedEar | 297 | width: 8em; |
| 298 | bottom: 2.8em; |
||
| 299 | background-color: #999; |
||
| 37 | PointedEar | 300 | overflow: auto; |
| 109 | PointedEar | 301 | overflow-x: hidden; |
| 302 | overflow-y: auto; |
||
| 37 | PointedEar | 303 | } |
| 304 | |||
| 50 | PointedEar | 305 | .menu |
| 43 | PointedEar | 306 | { |
| 167 | PointedEar | 307 | height: 23.6em; |
| 43 | PointedEar | 308 | background-color: #000; |
| 309 | } |
||
| 310 | |||
| 311 | .menu ul { |
||
| 103 | PointedEar | 312 | margin: 0 0.2em 0 0; |
| 37 | PointedEar | 313 | padding: 0; |
| 314 | } |
||
| 315 | |||
| 175 | PointedEar | 316 | .menu ul:first-child { |
| 317 | padding-top: 1em; |
||
| 318 | } |
||
| 319 | |||
| 43 | PointedEar | 320 | .menu li { |
| 37 | PointedEar | 321 | margin: 0; |
| 322 | } |
||
| 323 | |||
| 324 | #bow #bottom |
||
| 325 | { |
||
| 326 | position: fixed; |
||
| 327 | left: 0; |
||
| 328 | bottom: 0; |
||
| 119 | PointedEar | 329 | width: 10.4em; |
| 37 | PointedEar | 330 | height: 2.4em; |
| 331 | background-color: #000; |
||
| 332 | z-index: 1701; |
||
| 333 | } |
||
| 334 | |||
| 335 | #bow-bottom { |
||
| 336 | position: absolute; |
||
| 337 | bottom: 0.2em; |
||
| 338 | left: 0.2em; |
||
| 119 | PointedEar | 339 | width: 8em; |
| 167 | PointedEar | 340 | height: 2.4em; |
| 119 | PointedEar | 341 | border-bottom-left-radius: 0em; |
| 342 | border-bottom-right-radius: 0em; |
||
| 37 | PointedEar | 343 | background-color: #999; |
| 344 | } |
||
| 345 | |||
| 346 | .empty #bow-bottom { |
||
| 347 | display: none; |
||
| 348 | } |
||
| 349 | |||
| 350 | #bow-bottom .concave { |
||
| 351 | position: absolute; |
||
| 352 | margin-left: 0.2em; |
||
| 353 | margin-bottom: 0.2em; |
||
| 354 | bottom: 0.3em; |
||
| 355 | left: 7.8em; |
||
| 356 | height: 2.1em; |
||
| 119 | PointedEar | 357 | width: 2.2em; |
| 37 | PointedEar | 358 | border-bottom-left-radius: 1.2em; |
| 359 | border-bottom-right-radius: 1em; |
||
| 360 | background-color: #000; |
||
| 361 | } |
||
| 362 | |||
| 38 | PointedEar | 363 | #bow-bottom .spacer { |
| 37 | PointedEar | 364 | position: absolute; |
| 38 | PointedEar | 365 | left: 10.2em; |
| 94 | PointedEar | 366 | bottom: 0; |
| 38 | PointedEar | 367 | width: 0.2em; |
| 368 | height: 0.5em; |
||
| 369 | background-color: black; |
||
| 37 | PointedEar | 370 | } |
| 371 | |||
| 38 | PointedEar | 372 | .empty #bow-bottom-left-concave { |
| 373 | display: none; |
||
| 37 | PointedEar | 374 | } |
| 375 | |||
| 376 | /* Controls */ |
||
| 377 | |||
| 378 | .button:visited, |
||
| 379 | .button |
||
| 380 | { |
||
| 381 | position: relative; |
||
| 382 | display: inline-block; |
||
| 383 | margin-right: 0.2em; |
||
| 384 | margin-bottom: 0.2em; |
||
| 385 | width: 5em; |
||
| 386 | height: 2em; |
||
| 387 | background-color: #7d7d7d; /* c9c */ |
||
| 388 | color: #000 !important; |
||
| 389 | text-decoration: none !important; |
||
| 390 | text-transform: uppercase; |
||
| 139 | PointedEar | 391 | /* overflow: hidden; */ |
| 83 | PointedEar | 392 | cursor: pointer !important; |
| 37 | PointedEar | 393 | } |
| 394 | |||
| 395 | .button .text { |
||
| 396 | position: absolute; |
||
| 397 | bottom: 0; |
||
| 398 | right: 0.5em; |
||
| 83 | PointedEar | 399 | cursor: pointer !important; |
| 37 | PointedEar | 400 | } |
| 401 | |||
| 402 | .button.command { |
||
| 403 | border-radius: 1.2em; |
||
| 404 | } |
||
| 405 | |||
| 406 | .button.command .text { |
||
| 407 | position: absolute; |
||
| 408 | bottom: 0; |
||
| 409 | right: 1em; |
||
| 410 | } |
||
| 411 | |||
| 412 | .button:hover, |
||
| 413 | .button:focus, |
||
| 414 | .button.selected:hover, |
||
| 415 | .button.selected:focus, |
||
| 416 | .group .button:hover, |
||
| 417 | .group .button:focus, |
||
| 418 | .group .button:visited:hover, |
||
| 419 | .group .button:visited:focus |
||
| 420 | { |
||
| 421 | background-color: #f90 !important; |
||
| 422 | color: #000 !important; |
||
| 423 | } |
||
| 424 | |||
| 425 | .button:active, |
||
| 426 | .button.selected:active, |
||
| 427 | .group .button:active, |
||
| 428 | .group .button:visited:active |
||
| 429 | { |
||
| 430 | background-color: #fff !important; |
||
| 431 | color: #000 !important; |
||
| 432 | } |
||
| 433 | |||
| 175 | PointedEar | 434 | .menu bow { |
| 435 | width: 8em; |
||
| 436 | } |
||
| 437 | |||
| 43 | PointedEar | 438 | .menu .button { |
| 37 | PointedEar | 439 | display: block; |
| 440 | width: 8em; |
||
| 441 | height: 1em; |
||
| 442 | line-height: 1; |
||
| 443 | background-color: #9cf; |
||
| 444 | color: #000 !important; |
||
| 50 | PointedEar | 445 | text-overflow: ellipsis; |
| 446 | white-space: nowrap; |
||
| 37 | PointedEar | 447 | } |
| 448 | |||
| 58 | PointedEar | 449 | #connectors { |
| 450 | position: fixed; |
||
| 451 | left: 8.4em; |
||
| 452 | top: 5.6em; |
||
| 453 | } |
||
| 454 | |||
| 119 | PointedEar | 455 | #connectors div { |
| 456 | position: absolute; |
||
| 457 | } |
||
| 458 | |||
| 459 | #connectors .top { |
||
| 460 | top: 0; |
||
| 461 | height: 1em; |
||
| 462 | } |
||
| 463 | |||
| 464 | #connectors .mid { |
||
| 465 | top: 13.6em; |
||
| 466 | height: 0.8em; |
||
| 467 | } |
||
| 468 | |||
| 469 | #connectors .left { |
||
| 470 | left: 0; |
||
| 471 | width: 2em; |
||
| 472 | } |
||
| 473 | |||
| 474 | #connectors .right { |
||
| 475 | left: 2.2em; |
||
| 476 | width: 0em; |
||
| 477 | } |
||
| 478 | |||
| 37 | PointedEar | 479 | .multi-display |
| 480 | { |
||
| 481 | position: fixed; |
||
| 74 | PointedEar | 482 | top: 2.6em; |
| 119 | PointedEar | 483 | left: 10.6em; |
| 94 | PointedEar | 484 | right: 0; |
| 37 | PointedEar | 485 | } |
| 486 | |||
| 487 | .multi-display .button |
||
| 488 | { |
||
| 489 | width: 5em !important; |
||
| 490 | } |
||
| 491 | |||
| 492 | .multi-display .upper |
||
| 493 | { |
||
| 494 | position: absolute; |
||
| 495 | top: 0; |
||
| 496 | left: 0; |
||
| 497 | right: 0; |
||
| 94 | PointedEar | 498 | height: 7.5em; |
| 37 | PointedEar | 499 | padding-right: 0.2em; |
| 500 | background-color: black; |
||
| 501 | } |
||
| 502 | |||
| 74 | PointedEar | 503 | .multi-display .upper .content |
| 72 | PointedEar | 504 | { |
| 505 | position: absolute; |
||
| 506 | top: 0; |
||
| 74 | PointedEar | 507 | left: 6em; |
| 94 | PointedEar | 508 | bottom: 1.3em; |
| 72 | PointedEar | 509 | right: 0.2em; |
| 510 | background-color: black; |
||
| 511 | color: white; |
||
| 74 | PointedEar | 512 | text-align: right; |
| 513 | overflow: hidden; |
||
| 514 | text-overflow: ellipsis; |
||
| 515 | } |
||
| 516 | |||
| 517 | .multi-display .upper .content .title |
||
| 518 | { |
||
| 519 | position: absolute; |
||
| 520 | top: 0; |
||
| 94 | PointedEar | 521 | left: 0; |
| 74 | PointedEar | 522 | height: 1em; |
| 94 | PointedEar | 523 | right: 0; |
| 74 | PointedEar | 524 | background-color: black; |
| 525 | color: white; |
||
| 72 | PointedEar | 526 | font-size: 2.4em; |
| 527 | text-transform: uppercase; |
||
| 528 | text-align: right; |
||
| 74 | PointedEar | 529 | overflow: hidden; |
| 72 | PointedEar | 530 | } |
| 531 | |||
| 74 | PointedEar | 532 | .multi-display .upper .content .title span |
| 37 | PointedEar | 533 | { |
| 74 | PointedEar | 534 | white-space: nowrap; |
| 535 | } |
||
| 536 | |||
| 90 | PointedEar | 537 | .multi-display .upper .content .analysis { |
| 538 | position: absolute; |
||
| 539 | top: 2.4em; |
||
| 540 | bottom: 0; |
||
| 541 | right: 11em; |
||
| 542 | left: 0; |
||
| 543 | overflow: hidden; |
||
| 544 | text-align: left; |
||
| 118 | PointedEar | 545 | cursor: default; |
| 90 | PointedEar | 546 | } |
| 547 | |||
| 118 | PointedEar | 548 | .multi-display .upper .content .analysis table { |
| 549 | border-collapse: collapse; |
||
| 550 | line-height: 1.2; |
||
| 119 | PointedEar | 551 | max-width: 100%; |
| 118 | PointedEar | 552 | } |
| 148 | PointedEar | 553 | |
| 118 | PointedEar | 554 | .multi-display .upper .content .analysis th { |
| 120 | PointedEar | 555 | padding: 0 0.4em 0 0.1em; |
| 118 | PointedEar | 556 | font-weight: normal; |
| 557 | text-align: left; |
||
| 558 | text-transform: uppercase; |
||
| 559 | white-space: nowrap; |
||
| 560 | vertical-align: baseline; |
||
| 561 | } |
||
| 562 | |||
| 563 | .multi-display .upper .content .analysis td { |
||
| 120 | PointedEar | 564 | padding: 0 0.1em 0 0.1em; |
| 118 | PointedEar | 565 | text-overflow: ellipsis; |
| 566 | white-space: nowrap; |
||
| 567 | vertical-align: baseline; |
||
| 568 | text-overflow: ellipsis; |
||
| 569 | } |
||
| 570 | |||
| 571 | .multi-display .upper .content .analysis td sup { |
||
| 572 | line-height: 1; |
||
| 573 | font-weight: 500; |
||
| 574 | } |
||
| 575 | |||
| 92 | PointedEar | 576 | .multi-display .upper .content .commands |
| 74 | PointedEar | 577 | { |
| 578 | position: absolute; |
||
| 92 | PointedEar | 579 | margin: 0; |
| 580 | padding: 0; |
||
| 581 | top: 2.4em; |
||
| 94 | PointedEar | 582 | right: 0; |
| 92 | PointedEar | 583 | height: 3.8em; |
| 584 | width: 10.2em; |
||
| 585 | list-style: none; |
||
| 586 | } |
||
| 587 | |||
| 588 | .multi-display .upper .content .commands li |
||
| 589 | { |
||
| 590 | position: absolute; |
||
| 591 | margin: 0; |
||
| 592 | width: 5em; |
||
| 74 | PointedEar | 593 | height: 1.8em; |
| 92 | PointedEar | 594 | } |
| 595 | |||
| 596 | .multi-display .upper .content .commands .button |
||
| 597 | { |
||
| 598 | position: absolute; |
||
| 599 | top: 0; |
||
| 600 | left: 0; |
||
| 601 | margin: 0; |
||
| 602 | height: 1.8em; |
||
| 603 | border-radius: 0.9em; |
||
| 74 | PointedEar | 604 | text-transform: none; |
| 605 | } |
||
| 606 | |||
| 92 | PointedEar | 607 | .multi-display .upper .content .commands .button .text { |
| 101 | PointedEar | 608 | right: 1em; |
| 74 | PointedEar | 609 | } |
| 610 | |||
| 611 | .multi-display .upper .content #cmd1 |
||
| 612 | { |
||
| 92 | PointedEar | 613 | top: 0; |
| 74 | PointedEar | 614 | right: 5.2em; |
| 615 | } |
||
| 616 | |||
| 617 | .multi-display .upper .content #cmd2 |
||
| 618 | { |
||
| 92 | PointedEar | 619 | top: 0; |
| 74 | PointedEar | 620 | right: 0; |
| 621 | } |
||
| 622 | |||
| 623 | .multi-display .upper .content #cmd3 |
||
| 624 | { |
||
| 92 | PointedEar | 625 | top: 2em; |
| 626 | right: 0; |
||
| 74 | PointedEar | 627 | } |
| 628 | |||
| 629 | .multi-display .upper .content #cmd4 |
||
| 630 | { |
||
| 92 | PointedEar | 631 | top: 2em; |
| 632 | right: 5.2em; |
||
| 74 | PointedEar | 633 | } |
| 634 | |||
| 635 | .multi-display .upper .elbo-button |
||
| 636 | { |
||
| 637 | position: absolute; |
||
| 638 | top: 0; |
||
| 639 | left: 0; |
||
| 640 | width: 5em; |
||
| 641 | height: 4em; |
||
| 37 | PointedEar | 642 | background-color: #c9c !important; |
| 72 | PointedEar | 643 | color: #000 !important; |
| 83 | PointedEar | 644 | cursor: default; |
| 37 | PointedEar | 645 | } |
| 646 | |||
| 74 | PointedEar | 647 | .multi-display .upper .elbo-button .text |
| 72 | PointedEar | 648 | { |
| 649 | position: absolute; |
||
| 650 | bottom: 0; |
||
| 651 | right: 0.2em; |
||
| 102 | PointedEar | 652 | max-width: 4em; |
| 72 | PointedEar | 653 | max-height: 3.6em; |
| 654 | text-align: right; |
||
| 655 | overflow: hidden; |
||
| 656 | } |
||
| 657 | |||
| 37 | PointedEar | 658 | .multi-display .upper .elbo |
| 659 | { |
||
| 660 | position: absolute; |
||
| 661 | left: 0; |
||
| 74 | PointedEar | 662 | top: 4.2em; |
| 37 | PointedEar | 663 | width: 6em; |
| 664 | height: 3.2em; |
||
| 665 | border-bottom-left-radius: 2em; |
||
| 666 | background-color: #9cf; |
||
| 72 | PointedEar | 667 | color: #000; |
| 37 | PointedEar | 668 | } |
| 669 | |||
| 72 | PointedEar | 670 | .multi-display .upper .elbo .text |
| 671 | { |
||
| 672 | position: absolute; |
||
| 673 | top: 0; |
||
| 674 | right: 1.2em; |
||
| 102 | PointedEar | 675 | max-width: 4em; |
| 72 | PointedEar | 676 | max-height: 2.2em; |
| 677 | text-align: right; |
||
| 678 | overflow: hidden; |
||
| 83 | PointedEar | 679 | cursor: default; |
| 72 | PointedEar | 680 | } |
| 681 | |||
| 101 | PointedEar | 682 | .elbo [title], |
| 683 | .button [title] |
||
| 684 | { |
||
| 685 | border-bottom: none; |
||
| 686 | } |
||
| 687 | |||
| 37 | PointedEar | 688 | .multi-display .upper .elbo .concave |
| 689 | { |
||
| 690 | position: absolute; |
||
| 691 | left: 5em; |
||
| 692 | top: 0; |
||
| 103 | PointedEar | 693 | width: 1.1em; |
| 37 | PointedEar | 694 | height: 2.2em; |
| 695 | border-bottom-left-radius: 1em; |
||
| 696 | background-color: black; |
||
| 697 | } |
||
| 698 | |||
| 80 | PointedEar | 699 | .multi-display .border |
| 700 | { |
||
| 701 | height: 1em; |
||
| 702 | } |
||
| 703 | |||
| 37 | PointedEar | 704 | .multi-display .upper .border |
| 705 | { |
||
| 94 | PointedEar | 706 | position: absolute; |
| 707 | top: 6.4em; |
||
| 708 | left: 6em; |
||
| 37 | PointedEar | 709 | right: 0.2em; |
| 79 | PointedEar | 710 | } |
| 711 | |||
| 712 | .multi-display .border div |
||
| 713 | { |
||
| 714 | position: absolute; |
||
| 715 | top: 0; |
||
| 716 | height: 1em; |
||
| 717 | } |
||
| 718 | |||
| 719 | .multi-display .upper .border div |
||
| 720 | { |
||
| 37 | PointedEar | 721 | background-color: #9cf; |
| 80 | PointedEar | 722 | } |
| 79 | PointedEar | 723 | |
| 724 | .multi-display .upper .border .left |
||
| 725 | { |
||
| 726 | left: 0; |
||
| 727 | right: 5.2em; |
||
| 728 | height: 1em; |
||
| 37 | PointedEar | 729 | } |
| 730 | |||
| 79 | PointedEar | 731 | .multi-display .upper .border .right |
| 732 | { |
||
| 733 | width: 5em; |
||
| 734 | right: 0; |
||
| 735 | } |
||
| 736 | |||
| 37 | PointedEar | 737 | .multi-display .lower |
| 738 | { |
||
| 739 | position: absolute; |
||
| 74 | PointedEar | 740 | top: 7.5em; |
| 37 | PointedEar | 741 | left: 0; |
| 94 | PointedEar | 742 | height: 0.1em; |
| 743 | right: 0; |
||
| 37 | PointedEar | 744 | background-color: black; |
| 745 | } |
||
| 746 | |||
| 747 | .multi-display .lower .elbo |
||
| 748 | { |
||
| 94 | PointedEar | 749 | position: absolute; |
| 750 | top: 0.1em; |
||
| 751 | left: 0; |
||
| 37 | PointedEar | 752 | width: 6em; |
| 753 | height: 3em; |
||
| 754 | border-top-left-radius: 2em; |
||
| 755 | background-color: #fc6; |
||
| 756 | } |
||
| 757 | |||
| 758 | .multi-display .lower .elbo .concave |
||
| 759 | { |
||
| 760 | position: absolute; |
||
| 761 | left: 5em; |
||
| 762 | top: 1em; |
||
| 103 | PointedEar | 763 | width: 1.1em; |
| 764 | height: 2.1em; |
||
| 37 | PointedEar | 765 | background-color: black; |
| 766 | border-top-left-radius: 1em; |
||
| 767 | } |
||
| 768 | |||
| 769 | .multi-display .lower .bg |
||
| 770 | { |
||
| 771 | position: fixed; |
||
| 772 | top: 13.4em; |
||
| 119 | PointedEar | 773 | bottom: 0.2em; |
| 37 | PointedEar | 774 | width: 5em; |
| 775 | background-color: #fc6; |
||
| 776 | } |
||
| 777 | |||
| 778 | .multi-display .lower .border-container |
||
| 779 | { |
||
| 94 | PointedEar | 780 | position: absolute; |
| 781 | top: 0.1em; |
||
| 782 | left: 6em; |
||
| 783 | right: 0; |
||
| 37 | PointedEar | 784 | height: 1.2em; |
| 785 | background-color: black; |
||
| 786 | } |
||
| 787 | |||
| 788 | .multi-display .lower .border |
||
| 789 | { |
||
| 80 | PointedEar | 790 | position: absolute; |
| 37 | PointedEar | 791 | left: 0; |
| 792 | right: 0.2em; |
||
| 79 | PointedEar | 793 | } |
| 794 | |||
| 795 | .multi-display .lower .border div |
||
| 796 | { |
||
| 37 | PointedEar | 797 | background-color: #fc6; |
| 798 | } |
||
| 799 | |||
| 79 | PointedEar | 800 | .multi-display .lower .border .left |
| 801 | { |
||
| 802 | left: 0; |
||
| 80 | PointedEar | 803 | right: 5.2em; |
| 79 | PointedEar | 804 | } |
| 805 | |||
| 806 | .multi-display .lower .border .right |
||
| 807 | { |
||
| 808 | width: 5em; |
||
| 80 | PointedEar | 809 | right: 0; |
| 79 | PointedEar | 810 | } |
| 811 | |||
| 43 | PointedEar | 812 | .menu .button.secondary, |
| 813 | .multi-display .lower .elbo.secondary, |
||
| 814 | .multi-display .lower .bg.secondary, |
||
| 815 | .multi-display .lower .border.secondary |
||
| 816 | { |
||
| 817 | background-color: #f96; |
||
| 818 | } |
||
| 819 | |||
| 820 | .menu .button.ancillary, |
||
| 821 | .multi-display .lower .elbo.ancillary, |
||
| 822 | .multi-display .lower .bg.ancillary, |
||
| 823 | .multi-display .lower .border.ancillary |
||
| 824 | { |
||
| 825 | background-color: #c9c; |
||
| 826 | } |
||
| 827 | |||
| 828 | .menu .button.database, |
||
| 829 | .multi-display .lower .elbo.database, |
||
| 830 | .multi-display .lower .bg.database, |
||
| 831 | .multi-display .lower .border.database |
||
| 832 | { |
||
| 37 | PointedEar | 833 | background-color: #c66; |
| 834 | } |
||
| 835 | |||
| 43 | PointedEar | 836 | .menu .button .text { |
| 37 | PointedEar | 837 | position: static; |
| 838 | margin: 0 0.25em; |
||
| 839 | } |
||
| 840 | |||
| 841 | .button.selected { |
||
| 842 | background-color: #fc6 !important; |
||
| 843 | color: #000 !important; |
||
| 844 | } |
||
| 845 | |||
| 846 | .group { |
||
| 847 | margin: 0 auto; |
||
| 848 | position: relative; |
||
| 38 | PointedEar | 849 | width: 7.7em; |
| 37 | PointedEar | 850 | } |
| 851 | |||
| 852 | .group .separator { |
||
| 853 | float: left; |
||
| 854 | position: absolute; |
||
| 38 | PointedEar | 855 | top: 0; |
| 856 | left: 0; |
||
| 857 | width: 1.5em; |
||
| 37 | PointedEar | 858 | height: 100%; |
| 859 | background-color: #c66; |
||
| 860 | color: #000; |
||
| 861 | } |
||
| 862 | |||
| 863 | .group .separator:after { |
||
| 864 | position: absolute; |
||
| 38 | PointedEar | 865 | width: 0.8em; |
| 866 | height: 0.5em; |
||
| 867 | bottom: 0.25em; |
||
| 868 | left: 0.25em; |
||
| 37 | PointedEar | 869 | background-color: #000; |
| 870 | content: "\a0"; |
||
| 871 | } |
||
| 872 | |||
| 873 | .group ul { |
||
| 38 | PointedEar | 874 | margin-left: 1.7em; |
| 37 | PointedEar | 875 | } |
| 876 | |||
| 877 | .group li { |
||
| 38 | PointedEar | 878 | margin-bottom: 0; |
| 37 | PointedEar | 879 | } |
| 880 | |||
| 881 | .group .button:visited, |
||
| 882 | .group .button |
||
| 883 | { |
||
| 38 | PointedEar | 884 | display: block; |
| 37 | PointedEar | 885 | position: relative; |
| 38 | PointedEar | 886 | width: 6em; |
| 37 | PointedEar | 887 | background-color: #99f !important; |
| 888 | } |
||
| 889 | |||
| 38 | PointedEar | 890 | .group li:last-child .button |
| 891 | { |
||
| 892 | margin-bottom: 0; |
||
| 37 | PointedEar | 893 | } |
| 894 | |||
| 38 | PointedEar | 895 | .button.right { |
| 896 | border-top-right-radius: 1em; |
||
| 897 | border-bottom-right-radius: 1em; |
||
| 37 | PointedEar | 898 | } |
| 899 | |||
| 38 | PointedEar | 900 | .button.right .text { |
| 901 | right: 1em; |
||
| 902 | } |
||
| 903 | |||
| 904 | .button.left { |
||
| 905 | border-top-left-radius: 1em; |
||
| 906 | border-bottom-left-radius: 1em; |
||
| 907 | } |
||
| 908 | |||
| 37 | PointedEar | 909 | .group .button .key { |
| 910 | display: inline-block; |
||
| 911 | position: absolute; |
||
| 38 | PointedEar | 912 | left: 0.2em; |
| 37 | PointedEar | 913 | top: 0; |
| 914 | bottom: 0; |
||
| 38 | PointedEar | 915 | padding: 0 0.1em; |
| 37 | PointedEar | 916 | background-color: #000; |
| 917 | color: #f90; |
||
| 38 | PointedEar | 918 | font-size: 2.4em; |
| 37 | PointedEar | 919 | text-transform: uppercase; |
| 38 | PointedEar | 920 | line-height: 0.9; |
| 119 | PointedEar | 921 | } |
| 922 | |||
| 175 | PointedEar | 923 | <?php require_once 'lcars-responsive.css'; ?> |