├── LICENSE.md
├── README.md
├── animated-gameboy-in-css.css
├── animated-gameboy-in-css.html
├── animated-gameboy-in-css.less
└── animated-gameboy.gif
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Brian Chan (http://www.bchanx.com)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | animated-gameboy-in-css
2 | =======================
3 | 
4 |
5 | Animated Gameboy created in CSS, built in [less](http://www.lesscss.org).
6 |
7 | **See it in action here:** [bchanx.com/animated-gameboy-in-css](http://www.bchanx.com/animated-gameboy-in-css)
8 |
9 | *Credit to [@brentclouse](https://twitter.com/brentclouse) for the [original](https://dribbble.com/shots/1376791-Game-Boy-Color-GIF) inspiration.*
10 |
11 | Development
12 | ===========
13 | To view this locally, checkout this repository, then simply open the `.html` file in any browser.
14 |
15 | To make CSS changes, follow the installation instructions from the [less website](http://lesscss.org/#using-less-installation).
16 | Afterwards, compile `.less` to `.css` by running the following:
17 | ```bash
18 | $ lessc animated-gameboy-in-css.less animated-gameboy-in-css.css
19 | ```
20 |
21 | License
22 | =======
23 | This software is free to use under the MIT license.
24 |
--------------------------------------------------------------------------------
/animated-gameboy-in-css.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
GAME BOY
67 |
C
68 |
69 |
GAME BOY
70 |
Nintendo
71 |
72 |
.
73 |
74 |
B
75 |
A
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
Colors:
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/animated-gameboy-in-css.less:
--------------------------------------------------------------------------------
1 | //
2 | // Copyright (c) 2015 Brian Chan (bchanx.com)
3 | // All Rights Reserved.
4 | //
5 |
6 | @import url(https://fonts.googleapis.com/css?family=Asap:400italic,700italic);
7 | @import url(https://fonts.googleapis.com/css?family=Oxygen:700,300);
8 |
9 | ///// COLORS
10 |
11 | @white: #ffffff;
12 | @whitegray: #f0f0f0;
13 | @lightergray: #b0b0b0;
14 | @lightgray: #9d9d9d;
15 | @gray: #808080;
16 | @darkgray: #303030;
17 | @black: #222222;
18 | @lightgreen: #5cd17d;
19 | @green: #4ca879;
20 | @darkgreen: #308d58;
21 |
22 | @gameboy-red: #ff0151;
23 | @gameboy-purple: #5151dd;
24 | @gameboy-green: #85e367;
25 | @gameboy-yellow: #f9e52e;
26 | @gameboy-teal: #01b4dd;
27 | @gameboy-transparent: rgba(140, 46, 217, 0.125);
28 |
29 | @gameboy-colors: red, purple, green, yellow, teal, transparent;
30 | @gameboy-gloss-tints: 10%, 5%, 15%, 20%, 10%, 35%;
31 |
32 | ///// RESET
33 |
34 | * {
35 | box-sizing: border-box;
36 | }
37 |
38 | html {
39 | background-color: @whitegray;
40 | color: @black;
41 | }
42 |
43 | body {
44 | margin: 0;
45 | }
46 |
47 | ///// GAMEBOY
48 |
49 | @gameboy-width: 340px;
50 | @gameboy-height: 570px;
51 | @gameboy-duration: 8s infinite;
52 | @gameboy-border-radius: ~"15px 15px 170px 170px / 15px 15px 35px 35px";
53 |
54 | #gameboy {
55 | position: relative;
56 | width: @gameboy-width;
57 | height: @gameboy-height;
58 | overflow: hidden;
59 | margin: 40px auto;
60 | line-height: 1;
61 | border-radius: @gameboy-border-radius;
62 | .transform(translateZ(0));
63 | .border-radius-fix();
64 | &:hover {
65 | div {
66 | opacity: 0.7;
67 | }
68 | div[class="circuit"] {
69 | &::before,
70 | &::after {
71 | opacity: 0.5;
72 | }
73 | }
74 | div[id^="screen-"][id$="-text"] {
75 | opacity: 0;
76 | }
77 | div:not([id="speaker-holes"]):not([id^="cover-"]):not([id="power"]):not([class="capacitors"]):not([id$="-text"]):not([id="canvas"]):not([class="circuit"]):not([id="transistors"]):not([id="joystick-pad"]):not([id="control"]):not([id="start-select-button"]) {
78 | box-shadow: 0 0 0 2px @black;
79 | }
80 | #cover-vertical,
81 | #cover-horizontal {
82 | opacity: 0.1;
83 | }
84 | #gloss {
85 | opacity: 0.2;
86 | }
87 | }
88 | &.transparent {
89 | &:hover {
90 | #cover-vertical,
91 | #cover-horizontal {
92 | opacity: 0.4;
93 | }
94 | #gloss {
95 | opacity: 0.6;
96 | }
97 | }
98 | }
99 | }
100 |
101 | /////
102 |
103 | @canvas-width: @gameboy-width;
104 | @canvas-height: @gameboy-height;
105 | @canvas-top: 0;
106 | @canvas-right: 0;
107 | @canvas-color: @lightergray;
108 | @canvas-z: 1;
109 | .keyframes(canvas, {
110 | 0% { width: 0; height: 120px; border-radius: 15px 15px 0 0; }
111 | 3% { width: @canvas-width; height: 120px; }
112 | 5.5% { height: @canvas-height - 50px; }
113 | 6.0% { border-radius: 15px 15px 0 0; }
114 | 7.0% { height: @canvas-height; border-radius: @gameboy-border-radius; }
115 | });
116 |
117 | #canvas {
118 | position: absolute;
119 | width: @canvas-width;
120 | height: @canvas-height;
121 | top: @canvas-top;
122 | right: @canvas-right;
123 | border-radius: @gameboy-border-radius;
124 | background-color: @canvas-color;
125 | .animation(canvas @gameboy-duration linear);
126 | z-index: @canvas-z;
127 | }
128 |
129 | /////
130 |
131 | @border-width: 318px;
132 | @border-height: 526px;
133 | @border-thickness: 4px;
134 | @border-color: @gray;
135 | @border-top: @canvas-top + 20px;
136 | @border-right: (@gameboy-width - @border-width) / 2;
137 | @border-z: @canvas-z + 1;
138 | .keyframes(border, {
139 | 0% { border-width: 0; border-color: transparent; width: 0; height: 0; }
140 | 1% { border-width: 4px; border-top-color: @border-color; width: 0; height: 10px; }
141 | 3% { width: @border-width; border-left-color: transparent; height: 10px; }
142 | 3.3% { width: @border-width; border-left-color: @border-color; height: 10px; }
143 | 7.0% { border-radius: 15px 15px 0 0; }
144 | 7.3% { height: @border-height; border-radius: @gameboy-border-radius; }
145 | 7.4% { border-bottom-color: transparent; }
146 | 7.5% { border-bottom-color: @border-color; }
147 | 8.9% { border-right-color: transparent; }
148 | 9% { border-right-color: @border-color; }
149 | });
150 |
151 | #border {
152 | position: absolute;
153 | width: @border-width;
154 | height: @border-height;
155 | right: @border-right;
156 | top: @border-top;
157 | border: @border-thickness @border-color solid;
158 | border-radius: @gameboy-border-radius;
159 | z-index: @border-z;
160 | .animation(border @gameboy-duration linear);
161 | }
162 |
163 | /////
164 |
165 | @border-hide-z: @border-z + 1;
166 | #border-top,
167 | #border-bottom {
168 | position: absolute;
169 | background-color: @canvas-color;
170 | width: 0;
171 | height: @border-thickness * 2;
172 | z-index: @border-hide-z;
173 | }
174 |
175 | #border-left,
176 | #border-right {
177 | position: absolute;
178 | background-color: @canvas-color;
179 | height: 0;
180 | z-index: @border-hide-z;
181 | }
182 |
183 | .keyframes(border-top, {
184 | 0.5% { width: 0; }
185 | 3.0% { width: @border-width; right: @border-right; }
186 | 3.5% { width: @border-width; right: @border-right; }
187 | 5% { width: 0; right: @border-width + @border-right - @border-thickness * 5 ; }
188 | });
189 | #border-top {
190 | top: @border-top;
191 | right: @border-right;
192 | .animation(border-top @gameboy-duration linear);
193 | }
194 |
195 | .keyframes(border-left, {
196 | 0% { height: 0; }
197 | 3% { height: 0; }
198 | 5% { height: @border-height - 200px; top: @border-top; }
199 | 7.5% { height: 0; top: @border-height + @border-top; }
200 | });
201 | #border-left {
202 | left: @border-right;
203 | top: @border-top;
204 | width: @border-thickness * 5;
205 | .animation(border-left @gameboy-duration linear);
206 | }
207 |
208 | .keyframes(border-bottom, {
209 | 0% { width: 0; }
210 | 6.5% { width: 0; }
211 | 7.4% { width: @border-width; left: @border-right; }
212 | 9.0% { width: 0; left: @border-width + @border-right; }
213 | });
214 | #border-bottom {
215 | top: @border-top + @border-height - 30px;
216 | left: @border-right;
217 | height: 30px;
218 | .animation(border-bottom @gameboy-duration linear);
219 | }
220 |
221 | .keyframes(border-right, {
222 | 0% { height: 0; }
223 | 8% { height: 0; }
224 | 8.5% { height: @border-height - 30px; top: @border-top + 6px; }
225 | 9% { height: @border-height - 30px; }
226 | 11.5% { height: 0; top: @border-top + 6px; }
227 | 100% { top: @border-top + @border-height; }
228 | });
229 | #border-right {
230 | right: @border-right;
231 | top: @border-top + 6px;
232 | width: @border-thickness * 2;
233 | .animation(border-right @gameboy-duration linear);
234 | }
235 |
236 | /////
237 |
238 | @screw-small-radius: 9px;
239 | @screw-small-width: @screw-small-radius * 2;
240 | @screw-small-edge: 25px;
241 | @screw-small-top: @border-top + 14px;
242 | @screw-large-radius: 10px;
243 | @screw-large-width: @screw-large-radius * 2;
244 | @screw-large-edge: 3px;
245 | @screw-large-top: @border-top + 215px;
246 | @screw-z: @border-hide-z + 1;
247 |
248 | .screw {
249 | border-radius: 100%;
250 | background-color: @black;
251 | z-index: @screw-z;
252 | position: absolute;
253 | &.small {
254 | width: @screw-small-width;
255 | height: @screw-small-width;
256 | top: @screw-small-top;
257 | }
258 | &.large {
259 | width: @screw-large-width;
260 | height: @screw-large-width;
261 | top: @screw-large-top;
262 | }
263 | }
264 |
265 | .keyframes(screw-small-right, {
266 | 0% { width: 0; height: 0; right: @screw-small-edge + @screw-small-radius; top: @screw-small-top + @screw-small-radius; }
267 | 2.5% { width: 0; height: 0; right: @screw-small-edge + @screw-small-radius; top: @screw-small-top + @screw-small-radius; }
268 | 5.5% { width: @screw-small-width ; height: @screw-small-width; right: @screw-small-edge; top: @screw-small-top; }
269 | });
270 | #screw-small-right {
271 | right: @screw-small-edge;
272 | .animation(screw-small-right @gameboy-duration linear);
273 | }
274 |
275 | .keyframes(screw-small-left, {
276 | 0% { width: 0; height: 0; left: @screw-small-edge + @screw-small-radius; top: @screw-small-top + @screw-small-radius; }
277 | 3% { width: 0; height: 0; left: @screw-small-edge + @screw-small-radius; top: @screw-small-top + @screw-small-radius; }
278 | 6% { width: @screw-small-width ; height: @screw-small-width; left: @screw-small-edge; top: @screw-small-top; }
279 | });
280 | #screw-small-left {
281 | left: @screw-small-edge;
282 | .animation(screw-small-left @gameboy-duration linear);
283 | }
284 |
285 | .keyframes(screw-large-right, {
286 | 0% { width: 0; height: 0; right: @screw-large-edge + @screw-large-radius; top: @screw-large-top + @screw-large-radius; }
287 | 5.5% { width: 0; height: 0; right: @screw-large-edge + @screw-large-radius; top: @screw-large-top + @screw-large-radius; }
288 | 8.5% { width: @screw-large-width; height: @screw-large-width; right: @screw-large-edge; top: @screw-large-top; }
289 | });
290 | #screw-large-right {
291 | right: @screw-large-edge;
292 | .animation(screw-large-right @gameboy-duration linear);
293 | }
294 |
295 | .keyframes(screw-large-left, {
296 | 0% { width: 0; height: 0; left: @screw-large-edge + @screw-large-radius; top: @screw-large-top + @screw-large-radius; }
297 | 6.5% { width: 0; height: 0; left: @screw-large-edge + @screw-large-radius; top: @screw-large-top + @screw-large-radius; }
298 | 9.5% { width: @screw-large-width; height: @screw-large-width; left: @screw-large-edge; top: @screw-large-top; }
299 | });
300 | #screw-large-left {
301 | left: @screw-large-edge;
302 | .animation(screw-large-left @gameboy-duration linear);
303 | }
304 |
305 | /////
306 |
307 | @backboard-width: 220px;
308 | @backboard-mid-height: 36px;
309 | @backboard-height: 75px;
310 | @backboard-left: (@gameboy-width - @backboard-width) / 2;
311 | @backboard-bottom: 340px;
312 | @backboard-z: @canvas-z + 1;
313 | .keyframes(backboard, {
314 | 0% { width: 0; height: 0; left: @gameboy-width/2; bottom: @backboard-bottom; }
315 | 4.5% { width: 0; height: 0; left: @gameboy-width/2; }
316 | 6.5% { width: @backboard-mid-height; height: @backboard-mid-height; left: (@gameboy-width - @backboard-mid-height)/2; }
317 | 10% { width: @backboard-width; left: @backboard-left; }
318 | 10.5% { height: @backboard-mid-height; }
319 | 14% { height: @backboard-height; }
320 | });
321 |
322 | #backboard {
323 | z-index: @backboard-z;
324 | width: @backboard-width;
325 | height: @backboard-height;
326 | position: absolute;
327 | left: @backboard-left;
328 | bottom: @backboard-bottom;
329 | background-color: @black;
330 | .animation(backboard @gameboy-duration linear);
331 | }
332 |
333 | /////
334 |
335 | @motherboard-width: 270px;
336 | @motherboard-height: 400px;
337 | @motherboard-left: (@gameboy-width - @motherboard-width) / 2;
338 | @motherboard-top: @border-top + 55px;
339 | @motherboard-square: 56px;
340 | @motherboard-square-top: 265px;
341 | @motherboard-z: @backboard-z + 1;
342 | @motherboard-color: @green;
343 | @motherboard-detail-color: mix(@green, @gray, 50%);
344 | @cover-z: @motherboard-z + 10;
345 | .keyframes(motherboard, {
346 | 0% { width: 0; height: 0; left: @gameboy-width/2; top: @motherboard-square-top + @motherboard-square/2; }
347 | 6% { width: 0; height: 0; left: @gameboy-width/2; top: @motherboard-square-top + @motherboard-square/2; }
348 | 8% { width: @motherboard-square; height: @motherboard-square; left: (@gameboy-width - @motherboard-square)/2; top: @motherboard-square-top; }
349 | 8.5% { height: @motherboard-square; top: @motherboard-square-top; }
350 | 10.5% { width: @motherboard-square; height: @motherboard-height; top: @motherboard-top; }
351 | 11% { width: @motherboard-square; left: (@gameboy-width - @motherboard-square)/2; }
352 | 16% { width: @motherboard-width; left: (@gameboy-width - @motherboard-width)/2; }
353 | });
354 |
355 | @motherboard-before-left: 87px;
356 | .keyframes(motherboard-before, {
357 | 0% { height: 0; box-shadow: -6px @motherboard-height @motherboard-detail-color, 9px @motherboard-height @motherboard-detail-color; }
358 | 18% { height: 0; }
359 | 20% { height: 100%; box-shadow: -6px @motherboard-height @motherboard-detail-color, 9px @motherboard-height @motherboard-detail-color; }
360 | 22% { box-shadow: -6px 0 @motherboard-detail-color, 9px @motherboard-height @motherboard-detail-color; }
361 | 24% { box-shadow: -6px 0 @motherboard-detail-color, 9px 0 @motherboard-detail-color; }
362 | });
363 |
364 | #motherboard {
365 | z-index: @motherboard-z;
366 | position: absolute;
367 | width: @motherboard-width;
368 | height: @motherboard-height;
369 | left: @motherboard-left;
370 | top: @motherboard-top;
371 | overflow: hidden;
372 | background-color: @motherboard-color;
373 | .animation(motherboard @gameboy-duration linear);
374 | &::before {
375 | content: "";
376 | position: absolute;
377 | left: @motherboard-before-left;
378 | width: 2px;
379 | height: 100%;
380 | background-color: @motherboard-detail-color;
381 | box-shadow: -6px 0 @motherboard-detail-color, 9px 0 @motherboard-detail-color;
382 | .animation(motherboard-before @gameboy-duration linear);
383 | }
384 | }
385 |
386 | /////
387 |
388 | @chip-z: @motherboard-z + 1;
389 | @chip-color: @darkgreen;
390 | @chip-detail-color: shade(@chip-color, 20%);
391 | .chip {
392 | z-index: @chip-z;
393 | background-color: @chip-color;
394 | position: absolute;
395 | }
396 |
397 | /////
398 |
399 | @chip-tall-width: 30px;
400 | @chip-tall-right: 35px;
401 | .keyframes(chip-tall, {
402 | 0% { width: 0; height: @motherboard-height; right: 35px;}
403 | 6.5% { width: 0; }
404 | 8.5% { width: @chip-tall-width; }
405 | });
406 | .keyframes(chip-tall-before, {
407 | 0% { height: 0; }
408 | 10% { height: 0; }
409 | 11.5% { height: 100%; }
410 | });
411 | .keyframes(chip-tall-after, {
412 | 0% { height: 0; }
413 | 11.5% { height: 0; }
414 | 13% { height: 100%; }
415 | });
416 |
417 | #chip-tall {
418 | width: @chip-tall-width;
419 | height: @motherboard-height;
420 | top: @motherboard-top;
421 | right: @chip-tall-right;
422 | .animation(chip-tall @gameboy-duration linear);
423 | &::before {
424 | content: "";
425 | position: absolute;
426 | right: 8px;
427 | bottom: 0;
428 | width: 4px;
429 | height: 100%;
430 | background-color: @chip-detail-color;
431 | .animation(chip-tall-before @gameboy-duration linear);
432 | }
433 | &::after {
434 | content: "";
435 | position: absolute;
436 | right: 18px;
437 | bottom: 0;
438 | width: 4px;
439 | height: 100%;
440 | background-color: @chip-detail-color;
441 | .animation(chip-tall-after @gameboy-duration linear);
442 | }
443 | }
444 |
445 | /////
446 |
447 | @chip-short-width: 80px;
448 | @chip-short-height: 200px;
449 | @chip-short-height-final: 140px;
450 | .keyframes(chip-short, {
451 | 0% { width: 0; height: @chip-short-height; right: 35px; }
452 | 6.5% { width: 0; }
453 | 8.5% { width: @chip-tall-width; height: @chip-short-height; }
454 | 10.5% { width: @chip-short-width; height: @chip-short-height-final; }
455 | });
456 | .chip-details(@name, @x, @y) {
457 | .keyframes(@name, {
458 | 0% { background-color: transparent; box-shadow: @x @y transparent; }
459 | 18% { background-color: transparent; }
460 | 20% { box-shadow: @x @y transparent; }
461 | 24% { background-color: @motherboard-detail-color; }
462 | 26% { box-shadow: @x @y @motherboard-detail-color; }
463 | });
464 | }
465 | .chip-details(chip-details, 6px, 0);
466 | .chip-details(chip-details-diagonal, 5px, 4px);
467 |
468 | #chip-short {
469 | width: @chip-short-width;
470 | height: @chip-short-height-final;
471 | top: @motherboard-top;
472 | right: @chip-tall-right;
473 | .animation(chip-short @gameboy-duration linear);
474 | &::before {
475 | content: "";
476 | width: 2px;
477 | height: 201px;
478 | top: 199px;
479 | background-color: @motherboard-detail-color;
480 | position: absolute;
481 | left: -14px + (@chip-short-width - @chip-tall-width);
482 | box-shadow: 6px 0 @motherboard-detail-color;
483 | .animation(chip-details @gameboy-duration linear);
484 | }
485 | &::after {
486 | content: "";
487 | width: 2px;
488 | height: 100%;
489 | background-color: @motherboard-detail-color;
490 | position: absolute;
491 | left: -14px;
492 | box-shadow: 6px 0 @motherboard-detail-color;
493 | .animation(chip-details @gameboy-duration linear);
494 | }
495 | }
496 |
497 | /////
498 |
499 | @chip-diagonal-width: 50px;
500 | @chip-diagonal-height: 78px;
501 | @chip-diagonal-bottom: 295px;
502 | @chip-diagonal-left: 275px;
503 | .keyframes(chip-diagonal, {
504 | 0% { width: 0; height: 0; }
505 | 8.5% { width: 0; height: 0; }
506 | 10.5% { width: @chip-diagonal-width; height: @chip-diagonal-height; }
507 | });
508 |
509 | #chip-diagonal {
510 | width: @chip-diagonal-width;
511 | height: @chip-diagonal-height;
512 | left: @chip-diagonal-left;
513 | bottom: @chip-diagonal-bottom;
514 | border-bottom-right-radius: 100% 100%;
515 | .transform-origin(0 100%);
516 | .transform(rotateZ(-40deg));
517 | .animation(chip-diagonal @gameboy-duration linear);
518 | &::before {
519 | content: "";
520 | width: 2px;
521 | height: 100%;
522 | background-color: @motherboard-detail-color;
523 | position: absolute;
524 | left: -11px;
525 | top: -9px;
526 | box-shadow: 5px 4px @motherboard-detail-color;
527 | .animation(chip-details-diagonal @gameboy-duration linear);
528 | }
529 | }
530 |
531 | /////
532 |
533 | @capacitors-z: @chip-z + 1;
534 | @capacitors-box-shadow: 11px 0 1px @white, 11px -35px 1px @white, 31px -35px 1px @white, 21px -24px 1px @white, 21px -11px 1px @white;
535 | .capacitors-keyframes(@name, @start) {
536 | @one: @start;
537 | @two: @one + 1%;
538 | @three: @two + 1%;
539 | @four: @three + 1%;
540 | @five: @four + 1%;
541 | .keyframes(@name, {
542 | 0% { box-shadow: none; }
543 | @{one} { box-shadow: 11px 0 1px transparent; }
544 | @{two} { box-shadow: 11px 0 1px @white, 11px -35px 1px transparent, 31px -35px 1px transparent; }
545 | @{three} { box-shadow: 11px 0 1px @white, 11px -35px 1px @white, 31px -35px 1px @white, 21px -24px 1px transparent; }
546 | @{four} { box-shadow: 11px 0 1px @white, 11px -35px 1px @white, 31px -35px 1px @white, 21px -24px 1px @white, 21px -11px 1px transparent; }
547 | @{five} { box-shadow: 11px 0 1px @white, 11px -35px 1px @white, 31px -35px 1px @white, 21px -24px 1px @white, 21px -11px 1px @white; }
548 | });
549 | }
550 |
551 | .capacitors {
552 | position: absolute;
553 | z-index: @capacitors-z;
554 | width: 10px;
555 | height: 10px;
556 | border-radius: 50%;
557 | background-color: transparent;
558 | box-shadow: @capacitors-box-shadow;
559 | }
560 |
561 | @chip-capacitors-left: 240px;
562 | @chip-capacitors-top: 130px;
563 | .capacitors-keyframes(chip-capacitors, 12.5%);
564 | #chip-capacitors {
565 | left: @chip-capacitors-left;
566 | top: @chip-capacitors-top;
567 | .animation(chip-capacitors @gameboy-duration linear);
568 | }
569 |
570 | @motherboard-capacitors-left: 85px;
571 | @motherboard-capacitors-top: 265px;
572 | .capacitors-keyframes(motherboard-capacitors, 22.5%);
573 | #motherboard-capacitors {
574 | left: @motherboard-capacitors-left;
575 | top: @motherboard-capacitors-top;
576 | .transform(rotateZ(-90deg));
577 | .animation(motherboard-capacitors @gameboy-duration linear);
578 | }
579 |
580 | /////
581 |
582 | @contrast-knob-z: @motherboard-z + 1;
583 | @contrast-knob-top: 165px;
584 | @contrast-knob-left: 19px;
585 | @contrast-knob-size: 28px;
586 | @contrast-knob-offset: 15px;
587 |
588 | @contrast-knob-before-size: 32px;
589 | @contrast-knob-before-top: (@contrast-knob-size - @contrast-knob-before-size) / 2;
590 | @contrast-knob-before-left: -17px;
591 | .keyframes(contrast-knob, {
592 | 0% { width: 0; height: 0; left: @contrast-knob-left + @contrast-knob-size/2; top: @contrast-knob-top + @contrast-knob-offset + @contrast-knob-size/2; }
593 | 14% { width: 0; height: 0; left: @contrast-knob-left + @contrast-knob-size/2; top: @contrast-knob-top + @contrast-knob-offset + @contrast-knob-size/2; }
594 | 16.5% { width: @contrast-knob-size; height: @contrast-knob-size; left: @contrast-knob-left; top: @contrast-knob-top + @contrast-knob-offset; }
595 | 20% { top: @contrast-knob-top + @contrast-knob-offset; }
596 | 24% { top: @contrast-knob-top; }
597 | });
598 | .keyframes(contrast-knob-before, {
599 | 0% { width: 0; height: 0; left: @contrast-knob-before-left + @contrast-knob-before-size/2; top: @contrast-knob-before-top + @contrast-knob-before-size/2; }
600 | 16% { width: 0; height: 0; left: @contrast-knob-before-left + @contrast-knob-before-size/2; top: @contrast-knob-before-top + @contrast-knob-before-size/2; }
601 | 18% { width: @contrast-knob-before-size; height: @contrast-knob-before-size; left: @contrast-knob-before-left; top: @contrast-knob-before-top; }
602 | });
603 |
604 | #contrast-knob {
605 | z-index: @contrast-knob-z;
606 | position: absolute;
607 | top: @contrast-knob-top;
608 | left: @contrast-knob-left;
609 | width: @contrast-knob-size;
610 | height: @contrast-knob-size;
611 | background-color: @gray;
612 | .animation(contrast-knob @gameboy-duration linear);
613 | &:before {
614 | content: '';
615 | position: absolute;
616 | top: @contrast-knob-before-top;
617 | left: @contrast-knob-before-left;
618 | width: @contrast-knob-before-size;
619 | height: @contrast-knob-before-size;
620 | border-radius: 50%;
621 | background-color: @darkgray;
622 | .animation(contrast-knob-before @gameboy-duration linear);
623 | }
624 | }
625 |
626 | /////
627 |
628 | @link-port-z: @motherboard-z + 1;
629 | @link-port-top: 123px;
630 | @link-port-left: 3px;
631 | @link-port-size: 34px;
632 | @link-port-offset: 16px;
633 | .keyframes(link-port, {
634 | 0% { width: 0; height: 0; left: @link-port-left + @link-port-offset + @link-port-size/2; }
635 | 14% { width: 0; height: 0; left: @link-port-left + @link-port-offset + @link-port-size/2; }
636 | 16.5% { width: @link-port-size; height: @link-port-size; left: @link-port-left + @link-port-offset; }
637 | 18.5% { left: @link-port-left + @link-port-offset; }
638 | 20.5% { left: @link-port-left; }
639 | });
640 |
641 | #link-port {
642 | z-index: @link-port-z;
643 | position: absolute;
644 | top: @link-port-top;
645 | left: @link-port-left;
646 | width: @link-port-size;
647 | height: @link-port-size;
648 | background-color: @white;
649 | .animation(link-port @gameboy-duration linear);
650 | }
651 |
652 | /////
653 |
654 | @circuit-z: @motherboard-z + 1;
655 | @circuit-opacity: 0.5;
656 | .circuit-keyframes(@name, @start) {
657 | @opacity: @start - 0.1%;
658 | @before-name: "@{name}-before";
659 | @after-name: "@{name}-after";
660 | @before-start: @start;
661 | @before-end: @start + 2%;
662 | @after-start: @before-end;
663 | @after-end: @after-start + 2%;
664 | .keyframes(@name, {
665 | 0% { opacity: 0; }
666 | @{opacity} { opacity: 0; }
667 | @{start} { opacity: @circuit-opacity; }
668 | });
669 | .keyframes(@before-name, {
670 | 0% { height: 100%; }
671 | @{before-start} { height: 100%; }
672 | @{before-end} { height: 0%; }
673 | });
674 | .keyframes(@after-name, {
675 | 0% { height: 100%; }
676 | @{after-start} { height: 100%; }
677 | @{after-end} { height: 0%; }
678 | });
679 | }
680 | .circuit {
681 | z-index: @circuit-z;
682 | position: absolute;
683 | box-shadow: inset 0 0 0 1px @white;
684 | border-radius: ~"50% / 25%";
685 | opacity: @circuit-opacity;
686 | &::before {
687 | content: "";
688 | position: absolute;
689 | left: 50%;
690 | top: 0;
691 | width: 50%;
692 | height: 0%;
693 | background-color: @motherboard-color;
694 | }
695 | &::after {
696 | content: "";
697 | position: absolute;
698 | left: 0;
699 | bottom: 0;
700 | width: 50%;
701 | height: 0%;
702 | background-color: @motherboard-color;
703 | }
704 | }
705 |
706 | .circuit-keyframes(circuit-bottom, 13.5%);
707 | #circuit-bottom {
708 | width: 30px;
709 | height: 60px;
710 | top: 330px;
711 | left: 155px;
712 | .transform(rotateZ(-90deg));
713 | .animation(circuit-bottom @gameboy-duration linear);
714 | &::before {
715 | .animation(circuit-bottom-before @gameboy-duration linear);
716 | }
717 | &::after {
718 | .animation(circuit-bottom-after @gameboy-duration linear);
719 | }
720 | }
721 | .circuit-keyframes(circuit-top, 16.5%);
722 | #circuit-top {
723 | width: 40px;
724 | height: 80px;
725 | top: 100px;
726 | left: 70px;
727 | .animation(circuit-top @gameboy-duration linear);
728 | &::before {
729 | .animation(circuit-top-before @gameboy-duration linear);
730 | }
731 | &::after {
732 | .animation(circuit-top-after @gameboy-duration linear);
733 | }
734 | }
735 |
736 | /////
737 |
738 | @transistors-z: @motherboard-z + 1;
739 | @transistors-top: 310px;
740 | @transistors-left: 50px;
741 | @transistors-size: 8px;
742 | .keyframes(transistors, {
743 | 0% { opacity: 0; box-shadow: none; }
744 | 17% { opacity: 0; box-shadow: 16px 0 transparent; }
745 | 19% { opacity: 1; box-shadow: 16px 0, 32px 0 transparent; }
746 | 21% { box-shadow: 16px 0, 32px 0, 48px 0 transparent; }
747 | 23% { box-shadow: 16px 0, 32px 0, 48px 0; }
748 | });
749 |
750 | #transistors {
751 | z-index: @transistors-z;
752 | position: absolute;
753 | top: @transistors-top;
754 | left: @transistors-left;
755 | width: @transistors-size;
756 | height: @transistors-size;
757 | border-radius: 50%;
758 | background-color: @darkgray;
759 | box-shadow: 16px 0, 32px 0, 48px 0;
760 | .animation(transistors @gameboy-duration linear);
761 | }
762 |
763 | /////
764 |
765 | @processor-square: 56px;
766 | @processor-left: (@gameboy-width - @processor-square) / 2;
767 | @processor-top: @motherboard-top + 210px;
768 | @processor-z: @motherboard-z + 1;
769 | .keyframes(processor, {
770 | 0% { width: 0; height: 0; left: @gameboy-width / 2; top: @processor-top + @processor-square/2; }
771 | 12% { width: 0; height: 0; left: @gameboy-width / 2; top: @processor-top + @processor-square/2; }
772 | 14% { width: @processor-square; height: @processor-square; left: (@gameboy-width - @processor-square) / 2; top: @processor-top; }
773 | });
774 | .keyframes(processor-before, {
775 | 0% { width: 0; }
776 | 16% { width: 0; }
777 | 18% { width: 50px; }
778 | });
779 | .keyframes(processor-after, {
780 | 0% { width: 0; }
781 | 18% { width: 0; }
782 | 20% { width: 50px; }
783 | });
784 |
785 | #processor {
786 | position: absolute;
787 | width: @processor-square;
788 | height: @processor-square;
789 | top: @processor-top;
790 | left: @processor-left;
791 | z-index: @processor-z;
792 | background-color: @black;
793 | color: @white;
794 | font-size: 15px;
795 | letter-spacing: 3px;
796 | font-weight: 700;
797 | font-family: 'Oxygen', Helvetica, arial, sans-serif;
798 | .animation(processor @gameboy-duration linear);
799 | &::before {
800 | content: "llllll";
801 | position: absolute;
802 | width: 50px;
803 | overflow: hidden;
804 | text-shadow: -1px 0 0 @gray;
805 | .transform(rotateZ(-90deg));
806 | .transform-origin(0 0);
807 | left: 48px;
808 | bottom: -9px;
809 | .animation(processor-before @gameboy-duration linear);
810 | }
811 | &::after {
812 | content: "llllll";
813 | position: absolute;
814 | width: 50px;
815 | overflow: hidden;
816 | text-shadow: -1px 0 0 @gray;
817 | .transform(rotateZ(90deg) rotateY(180deg));
818 | .transform-origin(0 0);
819 | left: 7px;
820 | top: 50px;
821 | .animation(processor-after @gameboy-duration linear);
822 | }
823 | }
824 |
825 | /////
826 |
827 | @component-z: @motherboard-z + 1;
828 | @component-left: 228px;
829 | @component-offset: 16px;
830 | @component-top: @motherboard-top + 208px;
831 | @component-width: 14px;
832 | @component-height: 55px;
833 | .keyframes(component, {
834 | 0% { width: 0; height: 0; left: @component-left + @component-offset + @component-width/2; top: @component-top + @component-height/2; }
835 | 20.5% { width: 0; height: 0; left: @component-left + @component-offset + @component-width/2; top: @component-top + @component-height/2; }
836 | 23.5% { width: @component-width; height: @component-height; left: @component-left + @component-offset; top: @component-top; }
837 | 24.5% { left: @component-left + @component-offset; top: @component-top; }
838 | 28% { left: @component-left; top: @component-top; }
839 | });
840 |
841 | #component {
842 | z-index: @component-z;
843 | position: absolute;
844 | top: @component-top;
845 | left: @component-left;
846 | background-color: @black;
847 | border-left: 2px @gray dotted;
848 | border-top-right-radius: 3px;
849 | border-bottom-right-radius: 3px;
850 | width: @component-width;
851 | height: @component-height;
852 | .animation(component @gameboy-duration linear);
853 | }
854 |
855 | /////
856 |
857 | @controller-z: @motherboard-z + 1;
858 | @controller-width: 204px;
859 | @controller-height: 110px;
860 | @controller-top: @border-top + 370px;
861 | @controller-left: (@gameboy-width - @controller-width) / 2;
862 | .keyframes(controller, {
863 | 0% { width: 0; height: @controller-height; left: @gameboy-width/2; top: @controller-top; }
864 | 12% { width: 0; left: @gameboy-width/2; }
865 | 16% { width: @controller-width; left: (@gameboy-width - @controller-width)/2; }
866 | });
867 |
868 | @controller-before-width: 18px;
869 | @controller-before-height: 6px;
870 | @controller-before-left: -@controller-before-width;
871 | @controller-before-bottom: 25px;
872 | .keyframes(controller-before, {
873 | 0% { width: 0; height: 0; left: @controller-before-left + @controller-before-width/2; bottom: @controller-before-bottom + @controller-before-height/2; }
874 | 18% { width: 0; height: 0; left: @controller-before-left + @controller-before-width/2; bottom: @controller-before-bottom + @controller-before-height/2; }
875 | 21.5% { width: @controller-before-width; height: @controller-before-height; left: @controller-before-left; bottom: @controller-before-bottom; }
876 | });
877 |
878 | @controller-after-width: 114px;
879 | @controller-after-height: 24px;
880 | @controller-after-bottom: -@controller-after-height;
881 | @controller-after-left: (@controller-width - @controller-after-width)/2;
882 | .keyframes(controller-after, {
883 | 0% { width: 0; height: 0; left: @controller-width/2; bottom: 0; }
884 | 20% { width: 0; height: 0; left: @controller-width/2; bottom: 0; }
885 | 22.5% { width: @controller-after-width; height: @controller-after-height; left: @controller-after-left; bottom: @controller-after-bottom; }
886 | });
887 |
888 | #controller {
889 | position: absolute;
890 | z-index: @controller-z;
891 | width: @controller-width;
892 | height: @controller-height;
893 | top: @controller-top;
894 | left: @controller-left;
895 | background-color: @lightgray;
896 | .animation(controller @gameboy-duration linear);
897 | &::before {
898 | content: "";
899 | position: absolute;
900 | background-color: @black;
901 | width: @controller-before-width;
902 | height: @controller-before-height;
903 | left: -@controller-before-width;
904 | bottom: @controller-before-bottom;
905 | .animation(controller-before @gameboy-duration linear);
906 | }
907 | &::after {
908 | content: "";
909 | position: absolute;
910 | width: @controller-after-width;
911 | height: @controller-after-height;
912 | bottom: @controller-after-bottom;
913 | left: @controller-after-left;
914 | background-color: @darkgray;
915 | .animation(controller-after @gameboy-duration linear);
916 | }
917 | }
918 |
919 | /////
920 |
921 | @speaker-circle: 80px;
922 | @speaker-right: 20px;
923 | @speaker-bottom: 50px;
924 | @speaker-bottom-final: @speaker-bottom - 26px;
925 | @speaker-z: @controller-z + 1;
926 | .keyframes(speaker, {
927 | 0% { width: 0; height: 0; bottom: @speaker-bottom + @speaker-circle/2; right: @speaker-right + @speaker-circle/2; }
928 | 12% { width: 0; height: 0; bottom: @speaker-bottom + @speaker-circle/2; right: @speaker-right + @speaker-circle/2; }
929 | 15.5% { width: @speaker-circle; height: @speaker-circle; bottom: @speaker-bottom; right: @speaker-right; }
930 | 19.5% { bottom: @speaker-bottom; }
931 | 26% { bottom: @speaker-bottom-final; }
932 | });
933 |
934 | #speaker {
935 | position: absolute;
936 | z-index: @speaker-z;
937 | width: @speaker-circle;
938 | height: @speaker-circle;
939 | right: @speaker-right;
940 | bottom: @speaker-bottom-final;
941 | border-radius: 100%;
942 | background-color: @black;
943 | .animation(speaker @gameboy-duration linear);
944 | &::after {
945 | content: "";
946 | position: absolute;
947 | z-index: @speaker-z + 1;
948 | width: 42%;
949 | height: 42%;
950 | left: 50%;
951 | margin-left: -21%;
952 | top: 50%;
953 | margin-top: -21%;
954 | border-radius: 100%;
955 | background-color: @gray;
956 | }
957 | }
958 |
959 | /////
960 |
961 | @whitescreen-z: @capacitors-z + 1;
962 | @whitescreen-width: 188px;
963 | @whitescreen-height: 170px;
964 | @whitescreen-top: @border-top + 35px;
965 | @whitescreen-left: (@gameboy-width - @whitescreen-width)/2;
966 | @whitescreen-border-width: 5px;
967 | .keyframes(whitescreen, {
968 | 0% { width: 0; height: 0; left: @gameboy-width/2; top: @whitescreen-top + 50px; border: 0px; }
969 | 22% { width: 0; height: 0; left: @gameboy-width/2; top: @whitescreen-top + 50px; }
970 | 26% { width: @whitescreen-width - @whitescreen-border-width*2; height: @whitescreen-height - @whitescreen-border-width*2; left: @whitescreen-left + @whitescreen-border-width; top: @whitescreen-top + @whitescreen-border-width; border: 0px transparent; }
971 | 28% { width: @whitescreen-width; height: @whitescreen-height; border: 5px @gray solid; left: @whitescreen-left; top: @whitescreen-top; }
972 | });
973 |
974 | #whitescreen {
975 | position: absolute;
976 | z-index: @whitescreen-z;
977 | width: @whitescreen-width;
978 | height: @whitescreen-height;
979 | top: @whitescreen-top;
980 | left: @whitescreen-left;
981 | background-color: @white;
982 | border: @whitescreen-border-width @gray solid;
983 | .animation(whitescreen @gameboy-duration linear);
984 | }
985 |
986 | /////
987 |
988 | @glass-width: @border-width - 24px;
989 | @glass-height: @border-height/2;
990 | @glass-z: @cover-z + 1;
991 | @glass-left: (@gameboy-width - @glass-width)/2;
992 | @glass-bottom: 278px;
993 | @glass-bottom-square: 372px;
994 | @glass-height-square: 34px;
995 | @glass-width-square: 36px;
996 | .keyframes(screen, {
997 | 0% { width: 0; height: 0; bottom: @glass-bottom-square + @glass-height-square/2; left: @gameboy-width/2; border-radius: 0; }
998 | 16% { width: 0; height: 0; bottom: @glass-bottom-square + @glass-height-square/2 ; left: @gameboy-width/2; border-radius: 0; }
999 | 19.5% { width: @glass-width-square; height: @glass-height-square; left: (@gameboy-width - @glass-width-square)/2; bottom: @glass-bottom-square; border-radius: 0; }
1000 | 23.5% { bottom: @glass-bottom; height: @glass-height-square; border-radius: 0 0 25% 25% ~"/" 0 0 10px 10px; }
1001 | 27.5% { height: @glass-height; width: @glass-width-square; left: (@gameboy-width - @glass-width-square)/2; border-radius: 0 0 50% 50% ~"/" 0 0 20px 20px; }
1002 | 32.5% { width: @glass-width; left: (@gameboy-width - @glass-width)/2; border-radius: 10px 10px 50% 50% ~"/" 10px 10px 20px 20px; }
1003 | });
1004 |
1005 | #glass {
1006 | position: absolute;
1007 | z-index: @glass-z;
1008 | width: @glass-width;
1009 | height: @glass-height;
1010 | left: @glass-left;
1011 | bottom: @glass-bottom;
1012 | border-radius: 10px 10px 50% 50% ~"/" 10px 10px 20px 20px;
1013 | background-color: @black;
1014 | .animation(screen @gameboy-duration linear);
1015 | }
1016 |
1017 | /////
1018 |
1019 | @glass-gameboy-text-top: 242px;
1020 | @glass-gameboy-text-left: 90px;
1021 | @glass-gameboy-text-width: 95px;
1022 | @glass-gameboy-text-z: @glass-z + 1;
1023 | .keyframes(glass-gameboy-text, {
1024 | 0% { width: 0; }
1025 | 38% { width: 0; }
1026 | 42% { width: @glass-gameboy-text-width; }
1027 | });
1028 |
1029 | #glass-gameboy-text {
1030 | position: absolute;
1031 | z-index: @glass-gameboy-text-z;
1032 | top: @glass-gameboy-text-top;
1033 | left: @glass-gameboy-text-left;
1034 | width: @glass-gameboy-text-width;
1035 | color: @lightergray;
1036 | overflow: hidden;
1037 | font-size: 22px;
1038 | font-weight: 400;
1039 | font-style: italic;
1040 | font-family: 'Asap', sans-serif;
1041 | letter-spacing: -2px;
1042 | white-space: nowrap;
1043 | .transform(skew(-5deg));
1044 | .animation(glass-gameboy-text @gameboy-duration linear);
1045 | }
1046 |
1047 | /////
1048 |
1049 | @glass-color-text-z: @glass-z + 1;
1050 | @glass-color-text-left: 186px;
1051 | @glass-color-text-top: @glass-gameboy-text-top;
1052 | .keyframes(glass-color-text, {
1053 | 0% { color: transparent; }
1054 | 42% { color: transparent; }
1055 | 42.5% { color: @gameboy-red; }
1056 | });
1057 | .keyframes(glass-color-text-before, {
1058 | 0% { color: transparent; border-color: transparent; }
1059 | 42.5% { border-color: transparent; }
1060 | 43% { color: transparent; border-color: @gameboy-purple; }
1061 | 43.5% { color: @gameboy-green; }
1062 | });
1063 | .keyframes(glass-color-text-after, {
1064 | 0% { color: transparent; border-color: transparent; }
1065 | 43.5% { border-color: transparent; }
1066 | 44% { color: transparent; border-color: @gameboy-yellow; }
1067 | 44.5% { color: @gameboy-teal; }
1068 | });
1069 |
1070 | #glass-color-text {
1071 | z-index: @glass-color-text-z;
1072 | color: @gameboy-red;
1073 | position: absolute;
1074 | top: @glass-color-text-top;
1075 | left: @glass-color-text-left;
1076 | font-family: 'Comic Sans', 'Comic Sans MS', 'ChalkboardSE-Bold', sans-serif, cursive;
1077 | font-size: 23px;
1078 | letter-spacing: -2px;
1079 | font-weight: 700;
1080 | .animation(glass-color-text @gameboy-duration linear);
1081 | &::before {
1082 | content: "L";
1083 | position: absolute;
1084 | left: 12px;
1085 | top: 5px;
1086 | line-height: 5px;
1087 | text-indent: 10px;
1088 | color: @gameboy-green;
1089 | border: 4px @gameboy-purple solid;
1090 | border-radius: 50%;
1091 | width: 7px;
1092 | height: 7px;
1093 | .animation(glass-color-text-before @gameboy-duration linear);
1094 | }
1095 | &::after {
1096 | content: "R";
1097 | position: absolute;
1098 | left: 36px;
1099 | top: 5px;
1100 | line-height: 5px;
1101 | text-indent: 10px;
1102 | color: @gameboy-teal;
1103 | border: 4px @gameboy-yellow solid;
1104 | border-radius: 50%;
1105 | width: 7px;
1106 | height: 7px;
1107 | .animation(glass-color-text-after @gameboy-duration linear);
1108 | }
1109 | }
1110 |
1111 | /////
1112 |
1113 | @screen-width: 180px;
1114 | @screen-height: 160px;
1115 | @screen-width-square: 36px;
1116 | @screen-height-square: 32px;
1117 | @screen-top: @border-top + 40px;
1118 | @screen-left: (@gameboy-width - @screen-width)/2;
1119 | @screen-left-square: (@gameboy-width - @screen-width-square)/2;
1120 | @screen-top-square: @screen-top + 10px;
1121 | @screen-left-square: (@gameboy-width - @screen-width-square)/2;
1122 | @screen-top-rectangle: @screen-top-square + 60px;
1123 | @screen-color: @whitegray;
1124 | @screen-z: @glass-z + 1;
1125 | .keyframes(glass, {
1126 | 0% { width: 0; height: 0; top: @screen-top-square + @screen-height-square/2; left: @gameboy-width/2; }
1127 | 28% { width: 0; height: 0; top: @screen-top-square + @screen-height-square/2; left: @gameboy-width/2; }
1128 | 30% { width: @screen-width-square; height: @screen-height-square; top: @screen-top-square; left: @screen-left-square; }
1129 | 34% { top: @screen-top-rectangle; width: @screen-width-square; left: @screen-left-square; }
1130 | 37% { width: @screen-width; left: @screen-left; height: @screen-height-square; top: @screen-top-rectangle; }
1131 | 40% { height: @screen-height; top: @screen-top; }
1132 | });
1133 |
1134 | #screen {
1135 | position: absolute;
1136 | z-index: @screen-z;
1137 | width: @screen-width;
1138 | height: @screen-height;
1139 | left: (@gameboy-width - @screen-width)/2;
1140 | top: @screen-top;
1141 | background-color: @screen-color;
1142 | .animation(glass @gameboy-duration linear);
1143 | }
1144 |
1145 | /////
1146 |
1147 | @screen-gameboy-text-z: @screen-z + 1;
1148 | @screen-gameboy-text-left: -80px;
1149 | @screen-gameboy-text-top: 106px;
1150 | @screen-gameboy-text-width: 500px;
1151 | .keyframes(screen-gameboy-text, {
1152 | 0% { color: @gameboy-yellow; background-position: -120px; opacity: 0; }
1153 | 63.9% { opacity: 0; }
1154 | 64% { color: @gameboy-yellow; background-position: -120px; opacity: 1; }
1155 | 66.5% { color: @gameboy-yellow; }
1156 | 67% { color: @gameboy-red; }
1157 | 69.5% { color: @gameboy-red; }
1158 | 70% { color: screen(@gameboy-red, @gameboy-purple); }
1159 | 72.5% { color: screen(@gameboy-red, @gameboy-purple); }
1160 | 73% { color: @gameboy-green; }
1161 | 75.5% { color: @gameboy-green; }
1162 | 76% { color: saturate(@gameboy-purple, 30%); }
1163 | 78% { background-position: 130px; }
1164 | 87% { opacity: 1; }
1165 | 92% { opacity: 0; }
1166 | });
1167 |
1168 | #screen-gameboy-text {
1169 | position: absolute;
1170 | font-family: 'Asap', sans-serif;
1171 | font-size: 32px;
1172 | font-weight: 700;
1173 | font-style: italic;
1174 | letter-spacing: -2px;
1175 | text-align: center;
1176 | opacity: 0;
1177 | width: @screen-gameboy-text-width;
1178 | left: @screen-gameboy-text-left;
1179 | top: @screen-gameboy-text-top;
1180 | .transform(skew(-5deg));
1181 | overflow: hidden;
1182 | white-space: nowrap;
1183 | z-index: @screen-gameboy-text-z;
1184 | color: saturate(@gameboy-purple, 30%);
1185 | background: -webkit-linear-gradient(0deg, saturate(@gameboy-purple, 30%) 40%, @gameboy-green 40%, @gameboy-green 45%, screen(@gameboy-red, @gameboy-purple) 45%, screen(@gameboy-red, @gameboy-purple) 50%, @gameboy-red 50%, @gameboy-red 55%, @gameboy-yellow 55%, @gameboy-yellow 60%, @screen-color 60%);
1186 | background-position: 130px;
1187 | -webkit-background-clip: text;
1188 | -webkit-text-fill-color: transparent;
1189 | .animation(screen-gameboy-text @gameboy-duration linear);
1190 | }
1191 |
1192 | /////
1193 |
1194 | @screen-nintendo-text-z: @screen-z + 1;
1195 | @screen-nintendo-text-top: 167px;
1196 | @screen-nintendo-text-left: 138px;
1197 | .keyframes(screen-nintendo-text, {
1198 | 0% { opacity: 0; }
1199 | 56% { opacity: 0; }
1200 | 57% { opacity: 1; }
1201 | 87% { opacity: 1; }
1202 | 92% { opacity: 0; }
1203 | });
1204 |
1205 | #screen-nintendo-text {
1206 | z-index: @screen-nintendo-text-z;
1207 | position: absolute;
1208 | opacity: 0;
1209 | top: @screen-nintendo-text-top;
1210 | left: @screen-nintendo-text-left;
1211 | font-family: Arial Black, sans-serif;
1212 | font-weight: 700;
1213 | font-size: 13px;
1214 | .animation(screen-nintendo-text @gameboy-duration linear);
1215 | }
1216 |
1217 | /////
1218 |
1219 | @joystick-pad-z: @controller-z + 1;
1220 | @joystick-pad-size: 110px;
1221 | @joystick-pad-left: @border-right;
1222 | @joystick-pad-bottom: 130px;
1223 | .keyframes(joystick-pad, {
1224 | 0% { width: 0; height: 0; left: @joystick-pad-left + @joystick-pad-size/2; bottom: @joystick-pad-bottom + @joystick-pad-size/2; border: 0 transparent solid; box-shadow: 0 0; }
1225 | 14% { width: 0; height: 0; left: @joystick-pad-left + @joystick-pad-size/2; bottom: @joystick-pad-bottom + @joystick-pad-size/2; }
1226 | 18% { width: @joystick-pad-size; height: @joystick-pad-size; left: @joystick-pad-left; bottom: @joystick-pad-bottom; }
1227 | 18.5% { border: 0 transparent solid; }
1228 | 20% { box-shadow: 0 0; }
1229 | 20.5% { border: 5px @gray solid; }
1230 | 21.5% { border-width: 5px; box-shadow: 2px 4px; }
1231 | 22% { border-width: 4px; box-shadow: 2px 3px; }
1232 | });
1233 |
1234 | #joystick-pad {
1235 | position: absolute;
1236 | z-index: @joystick-pad-z;
1237 | width: @joystick-pad-size;
1238 | height: @joystick-pad-size;
1239 | border-radius: 100%;
1240 | border: 4px @gray solid;
1241 | box-shadow: 2px 3px;
1242 | background-color: @whitegray;
1243 | left: @joystick-pad-left;
1244 | bottom: @joystick-pad-bottom;
1245 | .animation(joystick-pad @gameboy-duration linear);
1246 | }
1247 |
1248 | /////
1249 |
1250 | @joystick-z: @cover-z + 1;
1251 | .keyframes(joystick, {
1252 | 0% { color: transparent; font-size: 12px; line-height: 101px; text-indent: 54px; }
1253 | 18% { font-size: 12px; line-height: 101px; text-indent: 54px; }
1254 | 20% { color: transparent; }
1255 | 23.5% { color: @black; font-size: 102px; line-height: 44px; text-indent: 43px; }
1256 | });
1257 | .keyframes(joystick-control, {
1258 | 0% { width: 0; height: 0; padding: 0; padding-top: 5px; font-size: 0; line-height: 1px; color: transparent; top: 55px; left: 55px; }
1259 | 18% { width: 0; height: 0; padding: 0; padding-top: 5px; font-size: 0; line-height: 1px; color: transparent; top: 55px; left: 55px; }
1260 | 20% { color: transparent; }
1261 | 23.5% { width: 26px; height: 86px; padding-left: 5px; padding-right: 5px; padding-top: 0; font-size: 16px; line-height: 21px; color: @black; top: 12px; left: 42px; }
1262 | });
1263 |
1264 | #joystick {
1265 | position: absolute;
1266 | z-index: @joystick-z;
1267 | width: @joystick-pad-size;
1268 | height: @joystick-pad-size;
1269 | bottom: @joystick-pad-bottom;
1270 | left: @joystick-pad-left;
1271 | font-size: 102px;
1272 | font-weight: 700;
1273 | font-family: 'Oxygen', Helvetica, arial, sans-serif;
1274 | line-height: 44px;
1275 | text-indent: 43px;
1276 | color: @black;
1277 | .animation(joystick @gameboy-duration linear);
1278 | &::before,
1279 | &::after {
1280 | position: absolute;
1281 | content: "\025B2\03000\03000\025BC";
1282 | box-sizing: border-box;
1283 | z-index: -1;
1284 | left: 42px;
1285 | top: 12px;
1286 | text-indent: 0;
1287 | width: 26px;
1288 | height: 86px;
1289 | padding-left: 5px;
1290 | padding-right: 5px;
1291 | line-height: 21px;
1292 | border-radius: 3px;
1293 | background-color: @darkgray;
1294 | word-wrap: break-word;
1295 | text-align: center;
1296 | font-size: 16px;
1297 | color: @black;
1298 | .animation(joystick-control @gameboy-duration linear);
1299 | }
1300 | &::after {
1301 | .transform(rotateZ(-90deg));
1302 | }
1303 | }
1304 |
1305 | /////
1306 |
1307 | @control-z: @controller-z + 1;
1308 | @control-width: 122px;
1309 | @control-height: 52px;
1310 | @control-bottom: 160px;
1311 | @control-right: 25px;
1312 | .keyframes(control, {
1313 | 0% { width: 0; height: 0; border: 0 transparent solid; box-shadow: 0 0; right: @control-right + @control-width/2; bottom: @control-bottom + @control-height/2; }
1314 | 16% { width: 0; height: 0; right: @control-right + @control-width/2; bottom: @control-bottom + @control-height/2; .transform(rotate(18deg)); }
1315 | 18.5% { width: @control-width; height: @control-height; right: @control-right; bottom: @control-bottom; .transform(rotate(-18deg)); }
1316 | 20% { border: 0 @gray solid; }
1317 | 22% { border-width: 6px; box-shadow: 0 0; }
1318 | 24% { border-width: 4px; box-shadow: 0 4px; }
1319 | 26% { box-shadow: 0 3px }
1320 | 100% { .transform(rotate(-18deg)); }
1321 | });
1322 |
1323 | #control {
1324 | position: absolute;
1325 | z-index: @control-z;
1326 | background-color: @whitegray;
1327 | width: @control-width;
1328 | height: @control-height;
1329 | bottom: @control-bottom;
1330 | right: @control-right;
1331 | border-radius: ~"20% / 50%";
1332 | border: 4px @gray solid;
1333 | box-shadow: 0 3px;
1334 | .transform(rotate(-18deg));
1335 | .animation(control @gameboy-duration linear);
1336 | }
1337 |
1338 | /////
1339 |
1340 | @control-button-z: @cover-z + 1;
1341 | @control-button-circle: 40px;
1342 | @control-button-font-size: 25px;
1343 | .control-button {
1344 | position: absolute;
1345 | z-index: @control-button-z;
1346 | width: @control-button-circle;
1347 | height: @control-button-circle;
1348 | background-color: @darkgray;
1349 | border-radius: 100%;
1350 | color: transparent;
1351 | text-shadow: 0 0 1px @black;
1352 | line-height: 38px;
1353 | text-align: center;
1354 | font-size: @control-button-font-size;
1355 | font-weight: 300;
1356 | font-family: 'Oxygen', Helvetica, arial, sans-serif;
1357 | }
1358 |
1359 | /////
1360 |
1361 | @control-b-right: @control-right + 72px;
1362 | @control-b-bottom: @control-bottom - 4px;
1363 | .keyframes(control-b, {
1364 | 0% { width: 0; height: 0; right: @control-b-right + @control-button-circle/2; bottom: @control-b-bottom + @control-button-circle/2; font-size: 0; }
1365 | 18.5% { width: 0; height: 0; right: @control-b-right + @control-button-circle/2; bottom: @control-b-bottom + @control-button-circle/2; }
1366 | 20% { font-size: 0; }
1367 | 21% { width: @control-button-circle; height: @control-button-circle; right: @control-b-right; bottom: @control-b-bottom; font-size: @control-button-font-size; }
1368 | });
1369 |
1370 | #control-b {
1371 | right: @control-b-right;
1372 | bottom: @control-b-bottom;
1373 | .animation(control-b @gameboy-duration linear);
1374 | }
1375 |
1376 | /////
1377 |
1378 | @control-a-right: @control-right + 9px;
1379 | @control-a-bottom: @control-bottom + 16px;
1380 | .keyframes(control-a, {
1381 | 0% { width: 0; height: 0; right: @control-a-right + @control-button-circle/2; bottom: @control-a-bottom + @control-button-circle/2; font-size: 0; }
1382 | 20% { width: 0; height: 0; right: @control-a-right + @control-button-circle/2; bottom: @control-a-bottom + @control-button-circle/2; }
1383 | 21.5% { font-size: 0; }
1384 | 22.5% { width: @control-button-circle; height: @control-button-circle; right: @control-a-right; bottom: @control-a-bottom; font-size: 25px; }
1385 | });
1386 |
1387 | #control-a {
1388 | right: @control-a-right;
1389 | bottom: @control-a-bottom;
1390 | .animation(control-a @gameboy-duration linear);
1391 | }
1392 |
1393 | /////
1394 |
1395 | @start-select-box-width: 100px;
1396 | @start-select-box-height: 25px;
1397 | @start-select-box-bottom: 85px;
1398 | @start-select-box-border: 4px;
1399 | @start-select-box-left: (@gameboy-width - @start-select-box-width)/2;
1400 | @start-select-box-z: @controller-z + 1;
1401 | .keyframes(start-select-box, {
1402 | 0% { width: 0; left: @gameboy-width/2; }
1403 | 18% { width: 0; left: @gameboy-width/2; }
1404 | 21.5% { width: @start-select-box-width; left: @start-select-box-left; }
1405 | });
1406 |
1407 | @start-select-pad-width: 40px;
1408 | @start-select-pad-height: 13px;
1409 | @start-select-pad-z: @start-select-box-z + 1;
1410 | @start-select-pad-bottom: 2px;
1411 | @start-select-pad-offset: 5px;
1412 | @start-select-pad-tweak: 4px;
1413 | @start-select-pad-color: @lightgray;
1414 | @start-select-pad-box-shadow: @start-select-box-width - @start-select-pad-offset * 2 - @start-select-pad-width;
1415 | @start-select-pad-box-shadow-offset: @start-select-box-width - @start-select-pad-width - (@start-select-pad-offset * 2) + (@start-select-pad-tweak * 2);
1416 | .keyframes(start-select-pad, {
1417 | 0% { width: 0; height: 0; left: @start-select-pad-offset - @start-select-pad-tweak + @start-select-pad-width/2; bottom: @start-select-pad-bottom + @start-select-pad-height/2; box-shadow: @start-select-pad-box-shadow-offset 0 @start-select-pad-color; }
1418 | 22% { width: 0; height: 0; left: @start-select-pad-offset - @start-select-pad-tweak + @start-select-pad-width/2; bottom: @start-select-pad-bottom + @start-select-pad-height/2; box-shadow: @start-select-pad-box-shadow-offset 0 @start-select-pad-color; }
1419 | 26% { width: @start-select-pad-width; height: @start-select-pad-height; left: @start-select-pad-offset - @start-select-pad-tweak; bottom: @start-select-pad-bottom; box-shadow: @start-select-pad-box-shadow-offset 0 @start-select-pad-color; }
1420 | 28.5% { left: @start-select-pad-offset; box-shadow: @start-select-pad-box-shadow 0 @start-select-pad-color; }
1421 | });
1422 |
1423 | #start-select-box {
1424 | border-top: @start-select-box-border @gray solid;
1425 | border-bottom: @start-select-box-border @gray solid;
1426 | position: absolute;
1427 | z-index: @start-select-box-z;
1428 | width: @start-select-box-width;
1429 | height: @start-select-box-height;
1430 | bottom: @start-select-box-bottom;
1431 | left: @start-select-box-left;
1432 | background-color: @whitegray;
1433 | .animation(start-select-box @gameboy-duration linear);
1434 | &::before {
1435 | content: "";
1436 | position: absolute;
1437 | z-index: @start-select-pad-z;
1438 | bottom: @start-select-pad-bottom;
1439 | width: @start-select-pad-width;
1440 | height: @start-select-pad-height;
1441 | border-radius: 10px;
1442 | background-color: @start-select-pad-color;
1443 | left: @start-select-pad-offset;
1444 | box-shadow: @start-select-pad-box-shadow 0 @start-select-pad-color;
1445 | .animation(start-select-pad @gameboy-duration linear);
1446 | }
1447 | }
1448 |
1449 | /////
1450 |
1451 | @start-select-button-width: 32px;
1452 | @start-select-button-height: 9px;
1453 | @start-select-button-bottom: @start-select-box-bottom + @start-select-box-border + @start-select-pad-bottom + (@start-select-pad-height - @start-select-button-height) / 2;
1454 | @start-select-button-z: @cover-z + 1;
1455 | @start-select-button-offset: @start-select-pad-offset + (@start-select-pad-width - @start-select-button-width)/2;
1456 | @start-select-button-left: @start-select-box-left + @start-select-button-offset;
1457 | @start-select-button-box-shadow: @start-select-box-width - @start-select-button-width - @start-select-button-offset * 2;
1458 | .keyframes(start-select-button, {
1459 | 0% { width: 0; height: 0; bottom: @start-select-button-bottom + @start-select-button-height/2; left: @start-select-button-left + @start-select-button-width/2; }
1460 | 29.5% { width: 0; height: 0; bottom: @start-select-button-bottom + @start-select-button-height/2; left: @start-select-button-left + @start-select-button-width/2; }
1461 | 34% { width: @start-select-button-width; height: @start-select-button-height; bottom: @start-select-button-bottom; left: @start-select-button-left; }
1462 | });
1463 |
1464 | #start-select-button {
1465 | position: absolute;
1466 | z-index: @start-select-button-z;
1467 | width: @start-select-button-width;
1468 | height: @start-select-button-height;
1469 | bottom: @start-select-button-bottom;
1470 | left: @start-select-button-left;
1471 | background-color: @darkgray;
1472 | border-radius: ~"80% / 100%";
1473 | box-shadow: @start-select-button-box-shadow 0 @darkgray;
1474 | .animation(start-select-button @gameboy-duration linear);
1475 | }
1476 |
1477 | /////
1478 |
1479 | @cover-v-slices: 10; // 10, 17, 20, 34
1480 | @cover-v-width: @canvas-width / @cover-v-slices;
1481 | @cover-v-height: @canvas-height;
1482 | .cover-v-box-shadow(@color, @counter, @current : @counter + 1) when (@counter > 0) {
1483 | .cover-v-box-shadow(@color, @counter - 1, @current);
1484 | & when (@counter < @current) {
1485 | box-shadow+: @cover-v-width*@counter 0 @color;
1486 | }
1487 | & when (@counter = @current) {
1488 | box-shadow+: @cover-v-width*@counter @cover-v-height/2 @color;
1489 | }
1490 | & when (@counter > @current) {
1491 | box-shadow+: @cover-v-width*@counter @cover-v-height @color;
1492 | }
1493 | }
1494 | .cover-v-box-shadow-keyframes(@color, @startPercentage, @endPercentage, @slices, @counter : 0) when (@counter <= @slices) {
1495 | @increment: (@endPercentage - @startPercentage) / (@slices + 1);
1496 | @currentPercentage: @startPercentage + @increment * @counter;
1497 | & when (@counter = 0) {
1498 | @{startPercentage} { width: @cover-v-width; height: 0 }
1499 | }
1500 | & when (@counter = 1) {
1501 | @{currentPercentage} { height: @cover-v-height/2; .cover-v-box-shadow(@color, @slices - 1, 0) }
1502 | }
1503 | & when (@counter = 2) {
1504 | @{currentPercentage} { height: @cover-v-height; .cover-v-box-shadow(@color, @slices - 1, 1) }
1505 | }
1506 | & when (@counter > 2) and (@counter < @slices) {
1507 | @{currentPercentage} { .cover-v-box-shadow(@color, @slices - 1, @counter - 1) }
1508 | }
1509 | & when (@counter = @slices) {
1510 | @{currentPercentage} { .cover-v-box-shadow(@color, @slices - 1, @counter - 1) }
1511 | @{endPercentage} { .cover-v-box-shadow(@color, @slices - 1) }
1512 | }
1513 | .cover-v-box-shadow-keyframes(@color, @startPercentage, @endPercentage, @slices, @counter + 1);
1514 | }
1515 |
1516 | #cover-vertical {
1517 | position: absolute;
1518 | z-index: @cover-z - 1;
1519 | width: @cover-v-width;
1520 | height: @cover-v-height;
1521 | bottom: 0;
1522 | }
1523 |
1524 | #gameboy {
1525 | .-(@i: length(@gameboy-colors)) when (@i > 0) {
1526 | @name: extract(@gameboy-colors, @i);
1527 | @color: %("gameboy-%s", @name);
1528 | .keyframes(~"cover-vertical-@{name}", {
1529 | 0% { width: 0; height: 0; box-shadow: none; }
1530 | .cover-v-box-shadow-keyframes(@@color, 39%, 49%, @cover-v-slices);
1531 | });
1532 | &.@{name} {
1533 | #cover-vertical {
1534 | background-color: @@color;
1535 | .animation(~"cover-vertical-@{name}" @gameboy-duration linear);
1536 | .cover-v-box-shadow(@@color, @cover-v-slices - 1);
1537 | }
1538 | }
1539 | .-((@i - 1));
1540 | } .-;
1541 | }
1542 |
1543 | /////
1544 |
1545 | @cover-h-slices: 15; // 10, 15, 19, 30, 38
1546 | @cover-h-width: @canvas-width;
1547 | @cover-h-height: @canvas-height / @cover-h-slices;
1548 | .cover-h-box-shadow(@color, @counter, @current : @counter + 1) when (@counter > 0) {
1549 | .cover-h-box-shadow(@color, @counter - 1, @current);
1550 | & when (@counter < @current) {
1551 | box-shadow+: 0 -@cover-h-height*@counter @color;
1552 | }
1553 | & when (@counter = @current) {
1554 | box-shadow+: -@cover-h-width/2 -@cover-h-height*@counter @color;
1555 | }
1556 | & when (@counter > @current) {
1557 | box-shadow+: -@cover-h-width -@cover-h-height*@counter @color;
1558 | }
1559 | }
1560 | .cover-h-box-shadow-keyframes(@color, @startPercentage, @endPercentage, @slices, @counter : 0) when (@counter <= @slices) {
1561 | @increment: (@endPercentage - @startPercentage) / (@slices + 1);
1562 | @currentPercentage: @startPercentage + @increment * @counter;
1563 | & when (@counter = 0) {
1564 | @{currentPercentage} { width: 0; height: @cover-h-height; }
1565 | }
1566 | & when (@counter = 1) {
1567 | @{currentPercentage} { width: @cover-h-width/2; .cover-h-box-shadow(@color, @slices - 1, 0) }
1568 | }
1569 | & when (@counter = 2) {
1570 | @{currentPercentage} { width: @cover-h-width; .cover-h-box-shadow(@color, @slices - 1, 1) }
1571 | }
1572 | & when (@counter > 2) and (@counter < @slices) {
1573 | @{currentPercentage} { .cover-h-box-shadow(@color, @slices - 1, @counter - 1) }
1574 | }
1575 | & when (@counter = @slices) {
1576 | @{currentPercentage} { .cover-h-box-shadow(@color, @slices - 1, @counter - 1) }
1577 | @{endPercentage} { .cover-h-box-shadow(@color, @slices - 1) }
1578 | }
1579 | .cover-h-box-shadow-keyframes(@color, @startPercentage, @endPercentage, @slices, @counter + 1);
1580 | }
1581 |
1582 | #cover-horizontal {
1583 | position: absolute;
1584 | z-index: @cover-z - 1;
1585 | width: @cover-h-width;
1586 | height: @cover-h-height;
1587 | bottom: 0;
1588 | left: 0;
1589 | }
1590 |
1591 | #gameboy {
1592 | .-(@i: length(@gameboy-colors)) when (@i > 0) {
1593 | @name: extract(@gameboy-colors, @i);
1594 | @color: %("gameboy-%s", @name);
1595 | .keyframes(~"cover-horizontal-@{name}", {
1596 | 0% { width: 0; height: 0; box-shadow: none; }
1597 | .cover-h-box-shadow-keyframes(@@color, 39%, 49%, @cover-h-slices);
1598 | });
1599 | &.@{name} {
1600 | #cover-horizontal {
1601 | background-color: @@color;
1602 | .animation(~"cover-horizontal-@{name}" @gameboy-duration linear);
1603 | .cover-h-box-shadow(@@color, @cover-h-slices - 1);
1604 | }
1605 | }
1606 | .-((@i - 1));
1607 | } .-;
1608 | }
1609 |
1610 | /////
1611 |
1612 | @gloss-width: 232px;
1613 | @gloss-height: 250px;
1614 | @gloss-z: @cover-z;
1615 | @gloss-top: 275px;
1616 | @gloss-left: 54px;
1617 | .keyframes(gloss, {
1618 | 0% { width: 0; height: 0; left: @gloss-left + @gloss-width/2; }
1619 | 46% { width: 0; height: 0; left: @gloss-left + @gloss-width/2; }
1620 | 52% { width: @gloss-width; height: @gloss-height; left: @gloss-left; }
1621 | });
1622 | #gloss {
1623 | position: absolute;
1624 | z-index: @gloss-z;
1625 | width: @gloss-width;
1626 | height: @gloss-height;
1627 | top: @gloss-top;
1628 | left: @gloss-left;
1629 | border-bottom-left-radius: @gloss-width/2 20px;
1630 | border-bottom-right-radius: @gloss-width/2 20px;
1631 | .animation(gloss @gameboy-duration linear);
1632 | }
1633 |
1634 | #gameboy {
1635 | .-(@i: length(@gameboy-colors)) when (@i > 0) {
1636 | @name: extract(@gameboy-colors, @i);
1637 | @color: %("gameboy-%s", @name);
1638 | &.@{name} {
1639 | #gloss {
1640 | background-color: tint(@@color, extract(@gameboy-gloss-tints, @i));
1641 | }
1642 | }
1643 | .-((@i - 1));
1644 | } .-;
1645 | }
1646 |
1647 | /////
1648 |
1649 | @speaker-holes-z: @cover-z + 1;
1650 | @speaker-holes-width: 5px;
1651 | @speaker-holes-height: 5px;
1652 | @speaker-holes-bottom: 42px;
1653 | @speaker-holes-left: 244px;
1654 | @speaker-holes-offset-x: 9.5px;
1655 | @speaker-holes-offset-y: 8px;
1656 | @speaker-holes-color: @black;
1657 | .speaker-holes-box-shadow(@start-x, @start-y, @counter) when (@counter > 0) {
1658 | .speaker-holes-box-shadow(@start-x, @start-y, @counter - 1);
1659 | box-shadow+: (@start-x + (@speaker-holes-offset-x * (@counter - 1))) (@start-y + (@speaker-holes-offset-y * (@counter - 1))) @speaker-holes-color;
1660 | }
1661 | .speaker-holes-box-shadow-generate() {
1662 | .speaker-holes-box-shadow(9.5px, 8px, 2);
1663 | .speaker-holes-box-shadow(0, -19px, 5);
1664 | .speaker-holes-box-shadow(0, -38px, 7);
1665 | .speaker-holes-box-shadow(9.5px, -49px, 7);
1666 | .speaker-holes-box-shadow(28px, -52px, 5);
1667 | .speaker-holes-box-shadow(47px, -56px, 3);
1668 | }
1669 | .keyframes(speaker-holes, {
1670 | 0% { width: 0; }
1671 | 41% { width: 0; }
1672 | 42% { width: @speaker-holes-width; }
1673 | });
1674 |
1675 | #speaker-holes {
1676 | background-color: @speaker-holes-color;
1677 | width: @speaker-holes-width;
1678 | height: @speaker-holes-height;
1679 | position: absolute;
1680 | bottom: @speaker-holes-bottom;
1681 | left: @speaker-holes-left;
1682 | z-index: @speaker-holes-z;
1683 | border-radius: 50%;
1684 | .speaker-holes-box-shadow-generate();
1685 | .animation(speaker-holes @gameboy-duration linear);
1686 | }
1687 |
1688 | /////
1689 |
1690 | @power-z: @glass-z + 1;
1691 | @power-left: 35px;
1692 | @power-top: 95px;
1693 | @power-width: 8px;
1694 | @power-height: 8px;
1695 | @power-decor-gray: @lightergray;
1696 | @power-decor-black: @black;
1697 | .power-box-shadow(@color) {
1698 | box-shadow: 5px 0 @black, 8px 0 @color, 12px 0 @black, 15px 0 @color, 19px 0 @black, 22px 0 @color;
1699 | }
1700 | .keyframes(power, {
1701 | 0% { opacity: 0; background-color: @darkgray; box-shadow: none; }
1702 | 36% { opacity: 0; }
1703 | 37% { opacity: 1; }
1704 | 39% { .power-box-shadow(@black); }
1705 | 40% { .power-box-shadow(@lightergray); }
1706 | 54% { background-color: @darkgray; }
1707 | 55% { background-color: @gameboy-red; }
1708 | });
1709 |
1710 | #power {
1711 | position: absolute;
1712 | z-index: @power-z;
1713 | top: @power-top;
1714 | left: @power-left;
1715 | width: @power-width;
1716 | height: @power-height;
1717 | border-radius: 50%;
1718 | background-color: @gameboy-red;
1719 | .power-box-shadow(@lightergray);
1720 | .animation(power @gameboy-duration linear);
1721 | }
1722 |
1723 | ///// MIXINS
1724 |
1725 | .keyframes(@name; @arguments) {
1726 | @-moz-keyframes @name { @arguments(); }
1727 | @-webkit-keyframes @name { @arguments(); }
1728 | @keyframes @name { @arguments(); }
1729 | }
1730 |
1731 | .transform(@rules) {
1732 | -webkit-transform: @rules;
1733 | transform: @rules;
1734 | }
1735 |
1736 | .animation(@rules) {
1737 | -webkit-animation+: @rules;
1738 | animation+: @rules;
1739 | }
1740 |
1741 | .transform-origin(@rules) {
1742 | -webkit-transform-origin: @rules;
1743 | transform-origin: @rules;
1744 | }
1745 |
1746 | .border-radius-fix() {
1747 | -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
1748 | }
1749 |
1750 | ///// COLOR SELECTION
1751 |
1752 | #colors {
1753 | font-family: 'Oxygen', Helvetica, arial, sans-serif;
1754 | font-weight: 300;
1755 | width: 100%;
1756 | margin: 0 auto 40px;
1757 | text-align: center;
1758 | span {
1759 | vertical-align: top;
1760 | }
1761 | .color {
1762 | cursor: pointer;
1763 | width: 20px;
1764 | height: 20px;
1765 | display: inline-block;
1766 | margin-left: 5px;
1767 | border-radius: 3px;
1768 | &.active,
1769 | &:hover {
1770 | opacity: 1 !important;
1771 | }
1772 | &[data-color="transparent"] {
1773 | border: 1px @lightgray dotted;
1774 | opacity: 0.4;
1775 | background: @gameboy-transparent;
1776 | }
1777 | &[data-color="red"] {
1778 | opacity: 0.1;
1779 | background: @gameboy-red;
1780 | }
1781 | &[data-color="purple"] {
1782 | opacity: 0.1;
1783 | background: @gameboy-purple;
1784 | }
1785 | &[data-color="green"] {
1786 | opacity: 0.2;
1787 | background: @gameboy-green;
1788 | }
1789 | &[data-color="yellow"] {
1790 | opacity: 0.3;
1791 | background: @gameboy-yellow;
1792 | }
1793 | &[data-color="teal"] {
1794 | opacity: 0.15;
1795 | background: @gameboy-teal;
1796 | }
1797 | }
1798 | }
1799 |
1800 |
--------------------------------------------------------------------------------
/animated-gameboy.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bchanx/animated-gameboy-in-css/f990845e817078501c06b3a019b15574a82c4cfd/animated-gameboy.gif
--------------------------------------------------------------------------------