Rev 119 | Rev 176 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
| Rev 119 | Rev 175 | ||
|---|---|---|---|
| 1 | <?php |
- | |
| 2 | namespace de\pointedears\css\least;
|
1 | /* Responsive Web Design */
|
| 3 | 2 | ||
| 4 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
3 | <?php use de\pointedears\css\least\Mixins; ?> |
| 5 | 4 | ||
| 6 | /* Resource expires in HTTP/1.1 caches 24h after last retrieval */
|
5 | /* Desktops with medium-size browser viewport (SVGA resolution) */
|
| 7 | \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
- | |
| 8 | 6 | ||
| - | 7 | body {
|
|
| - | 8 | <?php |
|
| - | 9 | Mixins::transition('', |
|
| 9 | /* Resource expires in HTTP/1.0 caches 24h after last retrieval */
|
10 | 'margin-top 0.25s 0.75s linear,'
|
| 10 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
11 | . ' margin-left 0.25s 0.5s linear'); |
| - | 12 | ?>
|
|
| 11 | 13 | }
|
|
| 12 | \header('Content-Type: text/css; charset=UTF-8'); |
- | |
| 13 | 14 | ||
| - | 15 | .multi-display
|
|
| - | 16 | {
|
|
| - | 17 | <?php |
|
| - | 18 | Mixins::transition('', |
|
| - | 19 | 'top 0.25s 0.75s linear,'
|
|
| - | 20 | . ' left 0.25s 0.5s linear'); |
|
| - | 21 | ?>
|
|
| - | 22 | }
|
|
| - | 23 | ||
| - | 24 | .menu .bow |
|
| - | 25 | {
|
|
| - | 26 | <?php |
|
| - | 27 | Mixins::transition('', |
|
| - | 28 | 'width 0.5s 1s linear,'
|
|
| - | 29 | . 'background-color 0s 0.75s linear'
|
|
| - | 30 | ); |
|
| - | 31 | ?>
|
|
| - | 32 | }
|
|
| - | 33 | ||
| - | 34 | .multi-display .lower .bg |
|
| - | 35 | {
|
|
| - | 36 | <?php |
|
| - | 37 | /* Wait 1s for bow to become shallower */
|
|
| - | 38 | Mixins::transition('', |
|
| - | 39 | 'top 0.25s 0.75s linear,'
|
|
| - | 40 | . 'bottom 2.5s 0.5s ease'); |
|
| - | 41 | ?>
|
|
| - | 42 | }
|
|
| - | 43 | ||
| - | 44 | #bow-top { |
|
| - | 45 | <?php |
|
| - | 46 | Mixins::transition('', |
|
| - | 47 | 'left 0.5s 1.0s linear,'
|
|
| - | 48 | . ' min-width 0s 1.5s linear,'
|
|
| - | 49 | . ' border-top-left-radius 0.5s 1.0s linear,'
|
|
| - | 50 | . ' border-top-right-radius 0.5s 1.0s linear,'
|
|
| - | 51 | . ' border-bottom-right-radius 0.5s 1.0s linear,'
|
|
| - | 52 | . ' opacity 0s 1.0s linear'); |
|
| - | 53 | ?>
|
|
| - | 54 | }
|
|
| - | 55 | ||
| - | 56 | #bow-top .text { |
|
| - | 57 | <?php |
|
| - | 58 | Mixins::transition('-property', 'opacity'); |
|
| - | 59 | Mixins::transition('-delay', '1.5s'); |
|
| - | 60 | Mixins::transition('-timing-function', 'linear'); |
|
| - | 61 | ?>
|
|
| - | 62 | }
|
|
| - | 63 | ||
| - | 64 | #bow-top-left { |
|
| - | 65 | <?php |
|
| - | 66 | Mixins::transition('-property', 'height'); |
|
| - | 67 | Mixins::transition('-duration', '0.125s'); |
|
| - | 68 | Mixins::transition('-delay', '1.5s'); |
|
| - | 69 | Mixins::transition('-timing-function', 'linear'); |
|
| - | 70 | ?>
|
|
| - | 71 | }
|
|
| - | 72 | ||
| - | 73 | .menu-container
|
|
| - | 74 | {
|
|
| - | 75 | <?php |
|
| - | 76 | Mixins::transition('', |
|
| - | 77 | 'top 0.5s 1s linear,'
|
|
| - | 78 | . ' width 0.5s 1s linear,'
|
|
| - | 79 | . ' bottom 0.5s 1s linear,'
|
|
| - | 80 | . ' z-index 0s 1s linear'); |
|
| - | 81 | ?>
|
|
| - | 82 | }
|
|
| - | 83 | ||
| - | 84 | .menu { |
|
| - | 85 | <?php |
|
| - | 86 | Mixins::transition('', 'height 0.5s 1s linear'); |
|
| - | 87 | ?>
|
|
| - | 88 | }
|
|
| - | 89 | ||
| - | 90 | .menu ul:first-child { |
|
| - | 91 | <?php |
|
| - | 92 | Mixins::transition('', 'padding-top 0.5s 1s linear'); |
|
| - | 93 | ?>
|
|
| - | 94 | }
|
|
| - | 95 | ||
| - | 96 | .menu .button |
|
| - | 97 | {
|
|
| - | 98 | <?php |
|
| - | 99 | Mixins::transition('', 'width 0.5s 1s linear'); |
|
| - | 100 | ?>
|
|
| - | 101 | }
|
|
| - | 102 | ||
| - | 103 | #bow #bottom { |
|
| - | 104 | <?php |
|
| - | 105 | Mixins::transition('', 'visibility 0s 1.625s linear'); |
|
| - | 106 | ?>
|
|
| - | 107 | }
|
|
| - | 108 | ||
| - | 109 | #bow-bottom { |
|
| - | 110 | <?php |
|
| - | 111 | Mixins::transition('', |
|
| - | 112 | 'border-bottom-left-radius 0.5s 0.5s ease,'
|
|
| - | 113 | . ' border-bottom-right-radius 0.5s 0.5s ease,'
|
|
| - | 114 | . ' width 0.5s 0.5s ease,'
|
|
| - | 115 | . ' bottom 0.0225s 1.625s linear,'
|
|
| - | 116 | . ' height 0.0225s 1.625s linear'); |
|
| - | 117 | ?>
|
|
| - | 118 | }
|
|
| - | 119 | ||
| - | 120 | #bow-bottom .concave { |
|
| - | 121 | <?php |
|
| - | 122 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
|
| - | 123 | ?>
|
|
| - | 124 | }
|
|
| - | 125 | ||
| - | 126 | #connectors { |
|
| - | 127 | <?php |
|
| - | 128 | Mixins::transition('', 'opacity 0s 1.6475s linear'); |
|
| - | 129 | ?>
|
|
| - | 130 | }
|
|
| - | 131 | ||
| - | 132 | #connectors .right { |
|
| - | 133 | <?php |
|
| - | 134 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
|
| - | 135 | ?>
|
|
| - | 136 | }
|
|
| - | 137 | ||
| - | 138 | /* Desktops with large viewport (XGA resolution and more, or no toolbars) */
|
|
| - | 139 | @media all and (min-width: 1024px) and (min-height: 364px) {
|
|
| - | 140 | body {
|
|
| - | 141 | margin-left: 22em; |
|
| - | 142 | <?php |
|
| - | 143 | Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
|
| - | 144 | ?>
|
|
| - | 145 | }
|
|
| - | 146 | ||
| - | 147 | #bow #bottom |
|
| - | 148 | {
|
|
| - | 149 | width: 20.8em; |
|
| - | 150 | <?php |
|
| - | 151 | /* Wait 0.5s for multi-display to be reduced in height */
|
|
| - | 152 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
|
| - | 153 | ?>
|
|
| - | 154 | }
|
|
| - | 155 | ||
| - | 156 | #bow-bottom { |
|
| - | 157 | border-bottom-left-radius: 2.4em; |
|
| - | 158 | border-bottom-right-radius: 2em; |
|
| - | 159 | width: 20.6em; |
|
| - | 160 | <?php |
|
| - | 161 | Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
|
| - | 162 | Mixins::transition('-delay', '1.0s'); |
|
| - | 163 | Mixins::transition('-duration', '0.5s'); |
|
| - | 164 | Mixins::transition('-timing-function', 'ease'); |
|
| - | 165 | ?>
|
|
| - | 166 | }
|
|
| - | 167 | ||
| - | 168 | #bow-bottom .concave { |
|
| - | 169 | width: 7.6em; |
|
| - | 170 | <?php |
|
| - | 171 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
|
| - | 172 | ?>
|
|
| - | 173 | }
|
|
| - | 174 | ||
| - | 175 | #connectors .right { |
|
| - | 176 | width: 5em; |
|
| - | 177 | <?php |
|
| - | 178 | /* Wait 1.0s for multi-display to be moved to right */
|
|
| - | 179 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
|
| - | 180 | ?>
|
|
| - | 181 | }
|
|
| - | 182 | ||
| - | 183 | .multi-display
|
|
| - | 184 | {
|
|
| - | 185 | left: 15.8em; |
|
| - | 186 | <?php |
|
| - | 187 | Mixins::transition('', |
|
| - | 188 | 'left 0.5s 0.5s ease,'
|
|
| - | 189 | . 'top 0.5s 0.5s linear'); |
|
| - | 190 | ?>
|
|
| - | 191 | }
|
|
| - | 192 | ||
| - | 193 | .multi-display .lower .bg |
|
| - | 194 | {
|
|
| - | 195 | bottom: 2.8em; |
|
| - | 196 | <?php |
|
| - | 197 | Mixins::transition('', 'bottom 0.5s 0.5s ease'); |
|
| - | 198 | ?>
|
|
| - | 199 | }
|
|
| - | 200 | }
|
|
| - | 201 | ||
| - | 202 | /* Desktops with small viewport (VGA resolution and less, or toolbars) */
|
|
| - | 203 | @media all and (max-width: 640px) {
|
|
| - | 204 | /* 0.5 to 0.5225s */
|
|
| - | 205 | #connectors { |
|
| - | 206 | opacity: 0; |
|
| - | 207 | <?php |
|
| - | 208 | Mixins::transition('', 'opacity 0s 0.5s linear'); |
|
| - | 209 | ?>
|
|
| - | 210 | }
|
|
| - | 211 | ||
| - | 212 | #bow-bottom { |
|
| - | 213 | bottom: 2.6em; |
|
| - | 214 | height: 0em; |
|
| - | 215 | opacity: 0; |
|
| - | 216 | <?php |
|
| - | 217 | Mixins::transition('', |
|
| - | 218 | 'bottom 0.0225s 0.5s linear,'
|
|
| - | 219 | . ' height 0.0225s 0.5s linear,'
|
|
| - | 220 | . ' opacity 0s 0.5225s linear'); |
|
| - | 221 | ?>
|
|
| - | 222 | }
|
|
| - | 223 | ||
| - | 224 | #bow #bottom { |
|
| - | 225 | visibility: hidden; |
|
| - | 226 | <?php |
|
| - | 227 | Mixins::transition('', |
|
| - | 228 | 'visibility 0s 0.5225s linear'); |
|
| - | 229 | ?>
|
|
| - | 230 | }
|
|
| - | 231 | ||
| - | 232 | .menu-container
|
|
| - | 233 | {
|
|
| - | 234 | top: 11em; |
|
| - | 235 | width: 5em; |
|
| - | 236 | bottom: 0; |
|
| - | 237 | z-index: 1; |
|
| - | 238 | background-color: #fc6; |
|
| - | 239 | <?php |
|
| - | 240 | Mixins::transition('', |
|
| - | 241 | 'top 0.5s 0.5s linear,'
|
|
| - | 242 | . ' width 0.5s 0.5s linear,'
|
|
| - | 243 | . ' bottom 0.5s 0.5s linear,'
|
|
| - | 244 | . ' background-color 0s 1s linear'
|
|
| - | 245 | ); |
|
| - | 246 | ?>
|
|
| - | 247 | }
|
|
| - | 248 | ||
| - | 249 | .menu { |
|
| - | 250 | height: 21.8em; |
|
| - | 251 | <?php |
|
| - | 252 | Mixins::transition('', 'height 0.5s 0.5s linear'); |
|
| - | 253 | ?>
|
|
| - | 254 | }
|
|
| - | 255 | ||
| - | 256 | .menu ul:first-child { |
|
| - | 257 | padding-top: 0; |
|
| - | 258 | <?php |
|
| - | 259 | Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
|
| - | 260 | ?>
|
|
| - | 261 | }
|
|
| - | 262 | ||
| - | 263 | .menu .button |
|
| - | 264 | {
|
|
| - | 265 | width: 5em; |
|
| - | 266 | <?php |
|
| - | 267 | Mixins::transition('', 'width 0.5s 0.5s linear'); |
|
| - | 268 | ?>
|
|
| - | 269 | }
|
|
| - | 270 | ||
| - | 271 | /* 0.5225s to 0.6475s */
|
|
| - | 272 | #bow-top-left { |
|
| - | 273 | height: 0; |
|
| - | 274 | <?php |
|
| - | 275 | Mixins::transition('', 'height 0.125s 0.5225s linear'); |
|
| - | 276 | ?>
|
|
| - | 277 | }
|
|
| - | 278 | ||
| - | 279 | /* at 0.6475s */
|
|
| - | 280 | #bow-top .text { |
|
| - | 281 | opacity: 0; |
|
| - | 282 | <?php |
|
| - | 283 | Mixins::transition('-property', 'opacity'); |
|
| - | 284 | Mixins::transition('-delay', '0.6475s'); |
|
| - | 285 | Mixins::transition('-timing-function', 'linear'); |
|
| - | 286 | ?>
|
|
| - | 287 | }
|
|
| - | 288 | ||
| - | 289 | .empty #bow-top .text { |
|
| - | 290 | opacity: 1; |
|
| - | 291 | }
|
|
| - | 292 | ||
| - | 293 | /* 0.6475s to 1.1475s */
|
|
| - | 294 | #bow-top { |
|
| - | 295 | left: 100%; |
|
| - | 296 | min-width: auto; |
|
| 14 | require_once 'css/least/Mixins.php'; |
297 | border-top-left-radius: 0; |
| - | 298 | border-bottom-left-radius: 0; |
|
| - | 299 | border-top-right-radius: 1.2em; |
|
| - | 300 | border-bottom-right-radius: 1.2em; |
|
| - | 301 | opacity: 0; |
|
| - | 302 | <?php |
|
| - | 303 | Mixins::transition('', |
|
| - | 304 | 'left 0.5s 0.6475s linear,'
|
|
| - | 305 | . ' min-width 0s 0.6475s linear,'
|
|
| - | 306 | . ' border-top-left-radius 0.5s 0.6475s linear,'
|
|
| - | 307 | . ' border-top-right-radius 0.5s 0.6475s linear,'
|
|
| - | 308 | . ' border-bottom-right-radius 0.5s 0.6475s linear,'
|
|
| - | 309 | . ' opacity 0s 1.1475s linear'); |
|
| - | 310 | ?>
|
|
| - | 311 | }
|
|
| - | 312 | ||
| - | 313 | .empty #bow-top { |
|
| - | 314 | left: 0%; |
|
| - | 315 | min-width: 10em; |
|
| - | 316 | border-top-left-radius: 1.2em; |
|
| - | 317 | border-bottom-left-radius: 1.2em; |
|
| - | 318 | border-top-right-radius: 1.2em; |
|
| - | 319 | border-bottom-right-radius: 1.2em; |
|
| - | 320 | opacity: 1; |
|
| - | 321 | }
|
|
| - | 322 | ||
| - | 323 | .multi-display
|
|
| - | 324 | {
|
|
| - | 325 | top: 0.2em; |
|
| - | 326 | left: 0.2em; |
|
| - | 327 | <?php |
|
| - | 328 | Mixins::transition('', |
|
| - | 329 | 'top 0.25s 1.1475s linear,'
|
|
| - | 330 | . ' left 0.25s 1.3975s linear'); |
|
| - | 331 | ?>
|
|
| - | 332 | }
|
|
| - | 333 | ||
| - | 334 | .menu .bow |
|
| - | 335 | {
|
|
| - | 336 | background-color: #fc6; |
|
| - | 337 | <?php |
|
| - | 338 | Mixins::transition('', |
|
| - | 339 | 'width 0.5s 0.5s linear,'
|
|
| - | 340 | . 'background-color 0s 1.6475s linear'
|
|
| - | 341 | ); |
|
| - | 342 | ?>
|
|
| - | 343 | }
|
|
| - | 344 | ||
| - | 345 | .multi-display .lower .bg |
|
| - | 346 | {
|
|
| - | 347 | top: 11em; |
|
| - | 348 | <?php |
|
| - | 349 | Mixins::transition('', 'top 0.25s 1.1475s linear'); |
|
| - | 350 | ?>
|
|
| - | 351 | }
|
|
| - | 352 | ||
| - | 353 | body {
|
|
| - | 354 | margin-top: 9.6em; |
|
| - | 355 | margin-left: 6.4em; |
|
| - | 356 | <?php |
|
| - | 357 | Mixins::transition('', |
|
| - | 358 | 'margin-top 0.25s 1.1475s linear,'
|
|
| - | 359 | . ' margin-left 0.25s 1.3975s linear'); |
|
| - | 360 | ?>
|
|
| - | 361 | }
|
|
| - | 362 | ||
| - | 363 | .multi-display .upper .content #cmd2, |
|
| - | 364 | .multi-display .upper .content #cmd3 |
|
| - | 365 | {
|
|
| - | 366 | display: none; |
|
| - | 367 | }
|
|
| - | 368 | ||
| - | 369 | .multi-display .upper .content #cmd1, |
|
| - | 370 | .multi-display .upper .content #cmd4 |
|
| - | 371 | {
|
|
| - | 372 | right: 0; |
|
| - | 373 | }
|
|
| - | 374 | ||
| - | 375 | .multi-display .upper .content .analysis |
|
| - | 376 | {
|
|
| - | 377 | right: 5.2em; |
|
| - | 378 | }
|
|
| - | 379 | ||
| - | 380 | .multi-display .upper .content .commands |
|
| - | 381 | {
|
|
| - | 382 | width: 5.2em; |
|
| - | 383 | }
|
|
| - | 384 | }
|
|
| - | 385 | ||
| - | 386 | /* Mobile devices: HTC Sensation & friends */
|
|
| - | 387 | @media screen and (max-device-width: 540px) {
|
|
| - | 388 | /*
|
|
| - | 389 | html,
|
|
| - | 390 | #LCARS,
|
|
| - | 391 | .multi-display
|
|
| - | 392 | {
|
|
| - | 393 | max-width: 540px;
|
|
| - | 394 | }
|
|
| - | 395 | */
|
|
| - | 396 | /* 0.5 to 0.5225s */
|
|
| - | 397 | #connectors { |
|
| - | 398 | opacity: 0; |
|
| - | 399 | <?php |
|
| - | 400 | Mixins::transition('', 'opacity 0s 0.5s linear'); |
|
| - | 401 | ?>
|
|
| - | 402 | }
|
|
| - | 403 | ||
| - | 404 | #bow-bottom { |
|
| - | 405 | bottom: 2.6em; |
|
| - | 406 | height: 0em; |
|
| - | 407 | opacity: 0; |
|
| - | 408 | <?php |
|
| - | 409 | Mixins::transition('', |
|
| - | 410 | 'bottom 0.0225s 0.5s linear,'
|
|
| - | 411 | . ' height 0.0225s 0.5s linear,'
|
|
| - | 412 | . ' opacity 0s 0.5225s linear'); |
|
| - | 413 | ?>
|
|
| - | 414 | }
|
|
| - | 415 | ||
| - | 416 | #bow #bottom { |
|
| - | 417 | visibility: hidden; |
|
| - | 418 | <?php |
|
| - | 419 | Mixins::transition('', |
|
| - | 420 | 'visibility 0s 0.5225s linear'); |
|
| - | 421 | ?>
|
|
| - | 422 | }
|
|
| - | 423 | ||
| - | 424 | .menu-container
|
|
| - | 425 | {
|
|
| - | 426 | top: 11em; |
|
| - | 427 | width: 5em; |
|
| - | 428 | bottom: 0; |
|
| - | 429 | z-index: 1; |
|
| - | 430 | background-color: #fc6; |
|
| - | 431 | <?php |
|
| - | 432 | Mixins::transition('', |
|
| - | 433 | 'top 0.5s 0.5s linear,'
|
|
| - | 434 | . ' width 0.5s 0.5s linear,'
|
|
| - | 435 | . ' bottom 0.5s 0.5s linear,'
|
|
| - | 436 | . ' background-color 0s 1s linear'
|
|
| - | 437 | ); |
|
| - | 438 | ?>
|
|
| - | 439 | }
|
|
| - | 440 | ||
| - | 441 | .menu { |
|
| 15 | ?>@charset "UTF-8"; |
442 | height: 21.8em; |
| - | 443 | <?php |
|
| - | 444 | Mixins::transition('', 'height 0.5s 0.5s linear'); |
|
| - | 445 | ?>
|
|
| - | 446 | }
|
|
| - | 447 | ||
| - | 448 | .menu ul:first-child { |
|
| - | 449 | padding-top: 0; |
|
| - | 450 | <?php |
|
| - | 451 | Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
|
| - | 452 | ?>
|
|
| - | 453 | }
|
|
| - | 454 | ||
| - | 455 | .menu .button |
|
| - | 456 | {
|
|
| - | 457 | width: 5em; |
|
| - | 458 | <?php |
|
| - | 459 | Mixins::transition('', 'width 0.5s 0.5s linear'); |
|
| - | 460 | ?>
|
|
| - | 461 | }
|
|
| - | 462 | ||
| - | 463 | /* 0.5225s to 0.6475s */
|
|
| - | 464 | #bow-top-left { |
|
| - | 465 | height: 0; |
|
| - | 466 | <?php |
|
| - | 467 | Mixins::transition('', 'height 0.125s 0.5225s linear'); |
|
| - | 468 | ?>
|
|
| - | 469 | }
|
|
| - | 470 | ||
| - | 471 | /* at 0.6475s */
|
|
| - | 472 | #bow-top .text { |
|
| - | 473 | opacity: 0; |
|
| - | 474 | <?php |
|
| - | 475 | Mixins::transition('-property', 'opacity'); |
|
| - | 476 | Mixins::transition('-delay', '0.6475s'); |
|
| - | 477 | Mixins::transition('-timing-function', 'linear'); |
|
| - | 478 | ?>
|
|
| - | 479 | }
|
|
| - | 480 | ||
| - | 481 | .empty #bow-top .text { |
|
| - | 482 | opacity: 1; |
|
| - | 483 | }
|
|
| - | 484 | ||
| - | 485 | /* 0.6475s to 1.1475s */
|
|
| - | 486 | #bow-top { |
|
| - | 487 | left: 100%; |
|
| - | 488 | min-width: auto; |
|
| - | 489 | border-top-left-radius: 0; |
|
| - | 490 | border-bottom-left-radius: 0; |
|
| - | 491 | border-top-right-radius: 1.2em; |
|
| - | 492 | border-bottom-right-radius: 1.2em; |
|
| - | 493 | opacity: 0; |
|
| - | 494 | <?php |
|
| - | 495 | Mixins::transition('', |
|
| - | 496 | 'left 0.5s 0.6475s linear,'
|
|
| - | 497 | . ' min-width 0s 0.6475s linear,'
|
|
| - | 498 | . ' border-top-left-radius 0.5s 0.6475s linear,'
|
|
| - | 499 | . ' border-top-right-radius 0.5s 0.6475s linear,'
|
|
| - | 500 | . ' border-bottom-right-radius 0.5s 0.6475s linear,'
|
|
| - | 501 | . ' opacity 0s 1.1475s linear'); |
|
| - | 502 | ?>
|
|
| - | 503 | }
|
|
| - | 504 | ||
| - | 505 | .empty #bow-top { |
|
| - | 506 | left: 0%; |
|
| - | 507 | min-width: 10em; |
|
| - | 508 | border-top-left-radius: 1.2em; |
|
| - | 509 | border-bottom-left-radius: 1.2em; |
|
| - | 510 | border-top-right-radius: 1.2em; |
|
| - | 511 | border-bottom-right-radius: 1.2em; |
|
| - | 512 | opacity: 1; |
|
| - | 513 | }
|
|
| - | 514 | ||
| - | 515 | .multi-display
|
|
| - | 516 | {
|
|
| - | 517 | top: 0.2em; |
|
| - | 518 | left: 0.2em; |
|
| - | 519 | <?php |
|
| - | 520 | Mixins::transition('', |
|
| - | 521 | 'top 0.25s 1.1475s linear,'
|
|
| - | 522 | . ' left 0.25s 1.3975s linear'); |
|
| - | 523 | ?>
|
|
| - | 524 | }
|
|
| - | 525 | ||
| - | 526 | .menu .bow |
|
| - | 527 | {
|
|
| - | 528 | background-color: #fc6; |
|
| - | 529 | <?php |
|
| - | 530 | Mixins::transition('', |
|
| - | 531 | 'width 0.5s 0.5s linear,'
|
|
| - | 532 | . 'background-color 0s 1.6475s linear'
|
|
| - | 533 | ); |
|
| - | 534 | ?>
|
|
| - | 535 | }
|
|
| - | 536 | ||
| - | 537 | .multi-display .lower .bg |
|
| - | 538 | {
|
|
| - | 539 | top: 11em; |
|
| - | 540 | <?php |
|
| - | 541 | Mixins::transition('', 'top 0.25s 1.1475s linear'); |
|
| - | 542 | ?>
|
|
| - | 543 | }
|
|
| - | 544 | ||
| - | 545 | body {
|
|
| - | 546 | margin-top: 9.6em; |
|
| - | 547 | margin-left: 6.4em; |
|
| - | 548 | <?php |
|
| - | 549 | Mixins::transition('', |
|
| - | 550 | 'margin-top 0.25s 1.1475s linear,'
|
|
| - | 551 | . ' margin-left 0.25s 1.3975s linear'); |
|
| - | 552 | ?>
|
|
| - | 553 | }
|
|
| - | 554 | ||
| - | 555 | .multi-display .upper .content #cmd2, |
|
| - | 556 | .multi-display .upper .content #cmd3 |
|
| - | 557 | {
|
|
| - | 558 | display: none; |
|
| - | 559 | }
|
|
| - | 560 | ||
| - | 561 | .multi-display .upper .content #cmd1, |
|
| - | 562 | .multi-display .upper .content #cmd4 |
|
| - | 563 | {
|
|
| - | 564 | right: 0; |
|
| - | 565 | }
|
|
| - | 566 | ||
| - | 567 | .multi-display .upper .content .analysis |
|
| - | 568 | {
|
|
| - | 569 | right: 5.2em; |
|
| - | 570 | }
|
|
| - | 571 | ||
| - | 572 | .multi-display .upper .content .commands |
|
| - | 573 | {
|
|
| - | 574 | width: 5.2em; |
|
| - | 575 | }
|
|
| - | 576 | }
|
|
| 16 | 577 | ||