CoCalc -- main.css

GitHub Repository: AroriaNetwork/3kho-backup
Path: blob/main/projects/flappy-2048/style/main.css
¹⁸³⁴ views
1
@import url(fonts/clear-sans.css);
2
html, body {
3
  margin: 0;
4
  padding: 0;
5
  background: #faf8ef;
6
  color: #776e65;
7
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
8
  font-size: 18px; }
9

10
body {
11
  margin: 80px 0; }
12

13
.heading:after {
14
  content: "";
15
  display: block;
16
  clear: both; }
17

18
h1.title {
19
  max-width: 1px;
20
  white-space: nowrap;
21
  font-size: 50px;
22
  font-weight: bold;
23
  margin: 25px 0 0 0;
24
  display: block;
25
  float: left; }
26

27
@-webkit-keyframes move-up {
28
  0% {
29
    top: 25px;
30
    opacity: 1; }
31

32
  100% {
33
    top: -50px;
34
    opacity: 0; } }
35

36
@-moz-keyframes move-up {
37
  0% {
38
    top: 25px;
39
    opacity: 1; }
40

41
  100% {
42
    top: -50px;
43
    opacity: 0; } }
44

45
@keyframes move-up {
46
  0% {
47
    top: 25px;
48
    opacity: 1; }
49

50
  100% {
51
    top: -50px;
52
    opacity: 0; } }
53

54
.scores-container {
55
  float: right;
56
  text-align: right; }
57

58
.score-container, .best-container {
59
  position: relative;
60
  display: inline-block;
61
  background: #bbada0;
62
  padding: 15px 25px;
63
  font-size: 25px;
64
  height: 25px;
65
  line-height: 47px;
66
  font-weight: bold;
67
  border-radius: 3px;
68
  color: white;
69
  margin-top: 8px;
70
  text-align: center; }
71
  .score-container:after, .best-container:after {
72
    position: absolute;
73
    width: 100%;
74
    top: 10px;
75
    left: 0;
76
    text-transform: uppercase;
77
    font-size: 13px;
78
    line-height: 13px;
79
    text-align: center;
80
    color: #eee4da; }
81
  .score-container .score-addition, .best-container .score-addition {
82
    position: absolute;
83
    right: 30px;
84
    color: red;
85
    font-size: 25px;
86
    line-height: 25px;
87
    font-weight: bold;
88
    color: rgba(119, 110, 101, 0.9);
89
    z-index: 100;
90
    -webkit-animation: move-up 600ms ease-in;
91
    -moz-animation: move-up 600ms ease-in;
92
    animation: move-up 600ms ease-in;
93
    -webkit-animation-fill-mode: both;
94
    -moz-animation-fill-mode: both;
95
    animation-fill-mode: both; }
96

97
.score-container:after {
98
  content: "Score"; }
99

100
.best-container:after {
101
  content: "Best"; }
102

103
p {
104
  margin-top: 0;
105
  margin-bottom: 10px;
106
  line-height: 1.65; }
107

108
a {
109
  color: #776e65;
110
  font-weight: bold;
111
  text-decoration: underline;
112
  cursor: pointer; }
113

114
strong.important {
115
  text-transform: uppercase; }
116

117
hr {
118
  border: none;
119
  border-bottom: 1px solid #d8d4d0;
120
  margin-top: 20px;
121
  margin-bottom: 30px; }
122

123
.container {
124
  width: 500px;
125
  margin: 0 auto; }
126

127
@-webkit-keyframes fade-in {
128
  0% {
129
    opacity: 0; }
130

131
  100% {
132
    opacity: 1; } }
133

134
@-moz-keyframes fade-in {
135
  0% {
136
    opacity: 0; }
137

138
  100% {
139
    opacity: 1; } }
140

141
@keyframes fade-in {
142
  0% {
143
    opacity: 0; }
144

145
  100% {
146
    opacity: 1; } }
147

148
.game-container {
149
  margin-top: 40px;
150
  position: relative;
151
  padding: 15px;
152
  cursor: default;
153
  -webkit-touch-callout: none;
154
  -webkit-user-select: none;
155
  -moz-user-select: none;
156
  background: #bbada0;
157
  border-radius: 6px;
158
  width: 500px;
159
  height: 500px;
160
  -webkit-box-sizing: border-box;
161
  -moz-box-sizing: border-box;
162
  box-sizing: border-box; }
163
  .game-container .game-message {
164
    display: none;
165
    position: absolute;
166
    top: 0;
167
    right: 0;
168
    bottom: 0;
169
    left: 0;
170
    background: rgba(238, 228, 218, 0.5);
171
    z-index: 100;
172
    text-align: center;
173
    -webkit-animation: fade-in 800ms ease 1200ms;
174
    -moz-animation: fade-in 800ms ease 1200ms;
175
    animation: fade-in 800ms ease 1200ms;
176
    -webkit-animation-fill-mode: both;
177
    -moz-animation-fill-mode: both;
178
    animation-fill-mode: both; }
179
    .game-container .game-message p {
180
      font-size: 60px;
181
      font-weight: bold;
182
      height: 60px;
183
      line-height: 60px;
184
      margin-top: 222px; }
185
    .game-container .game-message .lower {
186
      display: block;
187
      margin-top: 59px; }
188
    .game-container .game-message a {
189
      display: inline-block;
190
      background: #8f7a66;
191
      border-radius: 3px;
192
      padding: 0 20px;
193
      text-decoration: none;
194
      color: #f9f6f2;
195
      height: 40px;
196
      line-height: 42px;
197
      margin-left: 9px; }
198
      .game-container .game-message a.keep-playing-button {
199
        display: none; }
200
    .game-container .game-message.game-won {
201
      background: rgba(237, 194, 46, 0.5);
202
      color: #f9f6f2; }
203
      .game-container .game-message.game-won a.keep-playing-button {
204
        display: inline-block; }
205
    .game-container .game-message.game-won, .game-container .game-message.game-over {
206
      display: block; }
207

208
.grid-container {
209
  position: relative;
210
  overflow: hidden;
211
  z-index: 1; }
212

213
.grid-row {
214
  margin-bottom: 15px; }
215
  .grid-row:last-child {
216
    margin-bottom: 0; }
217
  .grid-row:after {
218
    content: "";
219
    display: block;
220
    clear: both; }
221

222
.grid-cell {
223
  width: 106.25px;
224
  height: 106.25px;
225
  margin-right: 15px;
226
  float: left;
227
  border-radius: 3px;
228
  background: rgba(238, 228, 218, 0.35); }
229
  .grid-cell:last-child {
230
    margin-right: 0; }
231

232
.grid-cell-x {
233
  width: 106.25px;
234
  height: 106.25px;
235
  position: absolute;
236
  border-radius: 3px;
237
  background: rgba(238, 228, 218, 0.35); }
238
  .grid-cell:last-child {
239
    margin-right: 0; }
240

241
.tile-container {
242
  position: absolute;
243
  z-index: 2; }
244

245
.tile, .tile .tile-inner {
246
  width: 107px;
247
  height: 107px;
248
  line-height: 116.25px; }
249
.tile.tile-position-1-1 {
250
  -webkit-transform: translate(0px, 0px);
251
  -moz-transform: translate(0px, 0px);
252
  transform: translate(0px, 0px); }
253
.tile.tile-position-1-2 {
254
  -webkit-transform: translate(0px, 121px);
255
  -moz-transform: translate(0px, 121px);
256
  transform: translate(0px, 121px); }
257
.tile.tile-position-1-3 {
258
  -webkit-transform: translate(0px, 242px);
259
  -moz-transform: translate(0px, 242px);
260
  transform: translate(0px, 242px); }
261
.tile.tile-position-1-4 {
262
  -webkit-transform: translate(0px, 363px);
263
  -moz-transform: translate(0px, 363px);
264
  transform: translate(0px, 363px); }
265
.tile.tile-position-2-1 {
266
  -webkit-transform: translate(121px, 0px);
267
  -moz-transform: translate(121px, 0px);
268
  transform: translate(121px, 0px); }
269
.tile.tile-position-2-2 {
270
  -webkit-transform: translate(121px, 121px);
271
  -moz-transform: translate(121px, 121px);
272
  transform: translate(121px, 121px); }
273
.tile.tile-position-2-3 {
274
  -webkit-transform: translate(121px, 242px);
275
  -moz-transform: translate(121px, 242px);
276
  transform: translate(121px, 242px); }
277
.tile.tile-position-2-4 {
278
  -webkit-transform: translate(121px, 363px);
279
  -moz-transform: translate(121px, 363px);
280
  transform: translate(121px, 363px); }
281
.tile.tile-position-3-1 {
282
  -webkit-transform: translate(242px, 0px);
283
  -moz-transform: translate(242px, 0px);
284
  transform: translate(242px, 0px); }
285
.tile.tile-position-3-2 {
286
  -webkit-transform: translate(242px, 121px);
287
  -moz-transform: translate(242px, 121px);
288
  transform: translate(242px, 121px); }
289
.tile.tile-position-3-3 {
290
  -webkit-transform: translate(242px, 242px);
291
  -moz-transform: translate(242px, 242px);
292
  transform: translate(242px, 242px); }
293
.tile.tile-position-3-4 {
294
  -webkit-transform: translate(242px, 363px);
295
  -moz-transform: translate(242px, 363px);
296
  transform: translate(242px, 363px); }
297
.tile.tile-position-4-1 {
298
  -webkit-transform: translate(363px, 0px);
299
  -moz-transform: translate(363px, 0px);
300
  transform: translate(363px, 0px); }
301
.tile.tile-position-4-2 {
302
  -webkit-transform: translate(363px, 121px);
303
  -moz-transform: translate(363px, 121px);
304
  transform: translate(363px, 121px); }
305
.tile.tile-position-4-3 {
306
  -webkit-transform: translate(363px, 242px);
307
  -moz-transform: translate(363px, 242px);
308
  transform: translate(363px, 242px); }
309
.tile.tile-position-4-4 {
310
  -webkit-transform: translate(363px, 363px);
311
  -moz-transform: translate(363px, 363px);
312
  transform: translate(363px, 363px); }
313

314
.tile {
315
  position: absolute;
316
  -webkit-transition: 100ms ease-in-out;
317
  -moz-transition: 100ms ease-in-out;
318
  transition: 100ms ease-in-out;
319
  -webkit-transition-property: -webkit-transform;
320
  -moz-transition-property: -moz-transform;
321
  transition-property: transform; }
322
  .tile .tile-inner {
323
    border-radius: 3px;
324
    background: #eee4da;
325
    text-align: center;
326
    font-weight: bold;
327
    z-index: 10;
328
    font-size: 55px; }
329
  .tile.tile-2 .tile-inner {
330
    background: #eee4da;
331
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
332
  .tile.tile-4 .tile-inner {
333
    background: #ede0c8;
334
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
335
  .tile.tile-8 .tile-inner {
336
    color: #f9f6f2;
337
    background: #f2b179; }
338
  .tile.tile-16 .tile-inner {
339
    color: #f9f6f2;
340
    background: #f59563; }
341
  .tile.tile-32 .tile-inner {
342
    color: #f9f6f2;
343
    background: #f67c5f; }
344
  .tile.tile-64 .tile-inner {
345
    color: #f9f6f2;
346
    background: #f65e3b; }
347
  .tile.tile-128 .tile-inner {
348
    color: #f9f6f2;
349
    background: #edcf72;
350
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
351
    font-size: 45px; }
352
    @media screen and (max-width: 520px) {
353
      .tile.tile-128 .tile-inner {
354
        font-size: 25px; } }
355
  .tile.tile-256 .tile-inner {
356
    color: #f9f6f2;
357
    background: #edcc61;
358
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
359
    font-size: 45px; }
360
    @media screen and (max-width: 520px) {
361
      .tile.tile-256 .tile-inner {
362
        font-size: 25px; } }
363
  .tile.tile-512 .tile-inner {
364
    color: #f9f6f2;
365
    background: #edc850;
366
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
367
    font-size: 45px; }
368
    @media screen and (max-width: 520px) {
369
      .tile.tile-512 .tile-inner {
370
        font-size: 25px; } }
371
  .tile.tile-1024 .tile-inner {
372
    color: #f9f6f2;
373
    background: #edc53f;
374
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
375
    font-size: 35px; }
376
    @media screen and (max-width: 520px) {
377
      .tile.tile-1024 .tile-inner {
378
        font-size: 15px; } }
379
  .tile.tile-2048 .tile-inner {
380
    color: #f9f6f2;
381
    background: #edc22e;
382
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
383
    font-size: 35px; }
384
    @media screen and (max-width: 520px) {
385
      .tile.tile-2048 .tile-inner {
386
        font-size: 15px; } }
387
  .tile.tile-super .tile-inner {
388
    color: #f9f6f2;
389
    background: #3c3a32;
390
    font-size: 30px; }
391
    @media screen and (max-width: 520px) {
392
      .tile.tile-super .tile-inner {
393
        font-size: 10px; } }
394

395
@-webkit-keyframes appear {
396
  0% {
397
    opacity: 0;
398
    -webkit-transform: scale(0);
399
    -moz-transform: scale(0);
400
    transform: scale(0); }
401

402
  100% {
403
    opacity: 1;
404
    -webkit-transform: scale(1);
405
    -moz-transform: scale(1);
406
    transform: scale(1); } }
407

408
@-moz-keyframes appear {
409
  0% {
410
    opacity: 0;
411
    -webkit-transform: scale(0);
412
    -moz-transform: scale(0);
413
    transform: scale(0); }
414

415
  100% {
416
    opacity: 1;
417
    -webkit-transform: scale(1);
418
    -moz-transform: scale(1);
419
    transform: scale(1); } }
420

421
@keyframes appear {
422
  0% {
423
    opacity: 0;
424
    -webkit-transform: scale(0);
425
    -moz-transform: scale(0);
426
    transform: scale(0); }
427

428
  100% {
429
    opacity: 1;
430
    -webkit-transform: scale(1);
431
    -moz-transform: scale(1);
432
    transform: scale(1); } }
433

434
.tile-new .tile-inner {
435
  -webkit-animation: appear 200ms ease 100ms;
436
  -moz-animation: appear 200ms ease 100ms;
437
  animation: appear 200ms ease 100ms;
438
  -webkit-animation-fill-mode: backwards;
439
  -moz-animation-fill-mode: backwards;
440
  animation-fill-mode: backwards; }
441

442
@-webkit-keyframes pop {
443
  0% {
444
    -webkit-transform: scale(0);
445
    -moz-transform: scale(0);
446
    transform: scale(0); }
447

448
  50% {
449
    -webkit-transform: scale(1.2);
450
    -moz-transform: scale(1.2);
451
    transform: scale(1.2); }
452

453
  100% {
454
    -webkit-transform: scale(1);
455
    -moz-transform: scale(1);
456
    transform: scale(1); } }
457

458
@-moz-keyframes pop {
459
  0% {
460
    -webkit-transform: scale(0);
461
    -moz-transform: scale(0);
462
    transform: scale(0); }
463

464
  50% {
465
    -webkit-transform: scale(1.2);
466
    -moz-transform: scale(1.2);
467
    transform: scale(1.2); }
468

469
  100% {
470
    -webkit-transform: scale(1);
471
    -moz-transform: scale(1);
472
    transform: scale(1); } }
473

474
@keyframes pop {
475
  0% {
476
    -webkit-transform: scale(0);
477
    -moz-transform: scale(0);
478
    transform: scale(0); }
479

480
  50% {
481
    -webkit-transform: scale(1.2);
482
    -moz-transform: scale(1.2);
483
    transform: scale(1.2); }
484

485
  100% {
486
    -webkit-transform: scale(1);
487
    -moz-transform: scale(1);
488
    transform: scale(1); } }
489

490
.tile-merged .tile-inner {
491
  z-index: 20;
492
  -webkit-animation: pop 200ms ease 100ms;
493
  -moz-animation: pop 200ms ease 100ms;
494
  animation: pop 200ms ease 100ms;
495
  -webkit-animation-fill-mode: backwards;
496
  -moz-animation-fill-mode: backwards;
497
  animation-fill-mode: backwards; }
498

499
.game-intro {
500
  margin-bottom: 0; }
501
  .game-intro .intro-container {
502
    display: inline-block;
503
    float: left; }
504

505
.game-explanation {
506
  margin-top: 0px; }
507

508
@media screen and (max-width: 520px) {
509
  html, body {
510
    font-size: 15px; }
511

512
  body {
513
    margin: 20px 0;
514
    padding: 0 20px; }
515

516
  h1.title {
517
    max-width: 1px;
518
    white-space: nowrap;
519
    font-size: 27px;
520
    margin-top: 15px; }
521

522
  .container {
523
    width: 280px;
524
    margin: 0 auto; }
525

526
  .score-container, .best-container {
527
    margin-top: 0;
528
    padding: 15px 10px;
529
    min-width: 40px; }
530

531
  .heading {
532
    margin-bottom: 10px; }
533

534
  .game-container {
535
    margin-top: 40px;
536
    position: relative;
537
    padding: 10px;
538
    cursor: default;
539
    -webkit-touch-callout: none;
540
    -webkit-user-select: none;
541
    -moz-user-select: none;
542
    background: #bbada0;
543
    border-radius: 6px;
544
    width: 280px;
545
    height: 280px;
546
    -webkit-box-sizing: border-box;
547
    -moz-box-sizing: border-box;
548
    box-sizing: border-box; }
549
    .game-container .game-message {
550
      display: none;
551
      position: absolute;
552
      top: 0;
553
      right: 0;
554
      bottom: 0;
555
      left: 0;
556
      background: rgba(238, 228, 218, 0.5);
557
      z-index: 100;
558
      text-align: center;
559
      -webkit-animation: fade-in 800ms ease 1200ms;
560
      -moz-animation: fade-in 800ms ease 1200ms;
561
      animation: fade-in 800ms ease 1200ms;
562
      -webkit-animation-fill-mode: both;
563
      -moz-animation-fill-mode: both;
564
      animation-fill-mode: both; }
565
      .game-container .game-message p {
566
        font-size: 60px;
567
        font-weight: bold;
568
        height: 60px;
569
        line-height: 60px;
570
        margin-top: 222px; }
571
      .game-container .game-message .lower {
572
        display: block;
573
        margin-top: 59px; }
574
      .game-container .game-message a {
575
        display: inline-block;
576
        background: #8f7a66;
577
        border-radius: 3px;
578
        padding: 0 20px;
579
        text-decoration: none;
580
        color: #f9f6f2;
581
        height: 40px;
582
        line-height: 42px;
583
        margin-left: 9px; }
584
        .game-container .game-message a.keep-playing-button {
585
          display: none; }
586
      .game-container .game-message.game-won {
587
        background: rgba(237, 194, 46, 0.5);
588
        color: #f9f6f2; }
589
        .game-container .game-message.game-won a.keep-playing-button {
590
          display: inline-block; }
591
      .game-container .game-message.game-won, .game-container .game-message.game-over {
592
        display: block; }
593

594
  .grid-container {
595
    position: relative;
596
    overflow: hidden;
597
    z-index: 1; }
598

599
  .grid-row {
600
    margin-bottom: 10px; }
601
    .grid-row:last-child {
602
      margin-bottom: 0; }
603
    .grid-row:after {
604
      content: "";
605
      display: block;
606
      clear: both; }
607

608
  .grid-cell {
609
    width: 57.5px;
610
    height: 57.5px;
611
    margin-right: 10px;
612
    float: left;
613
    border-radius: 3px;
614
    background: rgba(238, 228, 218, 0.35); }
615
    .grid-cell:last-child {
616
      margin-right: 0; }
617

618
  .tile-container {
619
    position: absolute;
620
    z-index: 2; }
621

622
  .tile, .tile .tile-inner {
623
    width: 58px;
624
    height: 58px;
625
    line-height: 67.5px; }
626
  .tile.tile-position-1-1 {
627
    -webkit-transform: translate(0px, 0px);
628
    -moz-transform: translate(0px, 0px);
629
    transform: translate(0px, 0px); }
630
  .tile.tile-position-1-2 {
631
    -webkit-transform: translate(0px, 67px);
632
    -moz-transform: translate(0px, 67px);
633
    transform: translate(0px, 67px); }
634
  .tile.tile-position-1-3 {
635
    -webkit-transform: translate(0px, 135px);
636
    -moz-transform: translate(0px, 135px);
637
    transform: translate(0px, 135px); }
638
  .tile.tile-position-1-4 {
639
    -webkit-transform: translate(0px, 202px);
640
    -moz-transform: translate(0px, 202px);
641
    transform: translate(0px, 202px); }
642
  .tile.tile-position-2-1 {
643
    -webkit-transform: translate(67px, 0px);
644
    -moz-transform: translate(67px, 0px);
645
    transform: translate(67px, 0px); }
646
  .tile.tile-position-2-2 {
647
    -webkit-transform: translate(67px, 67px);
648
    -moz-transform: translate(67px, 67px);
649
    transform: translate(67px, 67px); }
650
  .tile.tile-position-2-3 {
651
    -webkit-transform: translate(67px, 135px);
652
    -moz-transform: translate(67px, 135px);
653
    transform: translate(67px, 135px); }
654
  .tile.tile-position-2-4 {
655
    -webkit-transform: translate(67px, 202px);
656
    -moz-transform: translate(67px, 202px);
657
    transform: translate(67px, 202px); }
658
  .tile.tile-position-3-1 {
659
    -webkit-transform: translate(135px, 0px);
660
    -moz-transform: translate(135px, 0px);
661
    transform: translate(135px, 0px); }
662
  .tile.tile-position-3-2 {
663
    -webkit-transform: translate(135px, 67px);
664
    -moz-transform: translate(135px, 67px);
665
    transform: translate(135px, 67px); }
666
  .tile.tile-position-3-3 {
667
    -webkit-transform: translate(135px, 135px);
668
    -moz-transform: translate(135px, 135px);
669
    transform: translate(135px, 135px); }
670
  .tile.tile-position-3-4 {
671
    -webkit-transform: translate(135px, 202px);
672
    -moz-transform: translate(135px, 202px);
673
    transform: translate(135px, 202px); }
674
  .tile.tile-position-4-1 {
675
    -webkit-transform: translate(202px, 0px);
676
    -moz-transform: translate(202px, 0px);
677
    transform: translate(202px, 0px); }
678
  .tile.tile-position-4-2 {
679
    -webkit-transform: translate(202px, 67px);
680
    -moz-transform: translate(202px, 67px);
681
    transform: translate(202px, 67px); }
682
  .tile.tile-position-4-3 {
683
    -webkit-transform: translate(202px, 135px);
684
    -moz-transform: translate(202px, 135px);
685
    transform: translate(202px, 135px); }
686
  .tile.tile-position-4-4 {
687
    -webkit-transform: translate(202px, 202px);
688
    -moz-transform: translate(202px, 202px);
689
    transform: translate(202px, 202px); }
690

691
  .game-container {
692
    margin-top: 20px; }
693

694
  .tile .tile-inner {
695
    font-size: 35px; }
696

697
  .game-message p {
698
    font-size: 30px !important;
699
    height: 30px !important;
700
    line-height: 30px !important;
701
    margin-top: 90px !important; }
702
  .game-message .lower {
703
    margin-top: 30px !important; } }
704

705
Product

Resources

Company
