-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcounter.css
91 lines (91 loc) · 9.6 KB
/
counter.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
* { box-sizing: border-box; }
input:focus { outline: none; }
button:focus { outline: none; }
.hidden { display: none !important; }
.body { margin: 0px; border: 0px; padding: 0px; width: 100vw; height: 100vh; position: relative; }
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.menu { height: 100%; overflow: hidden; background-color: #1D1F20; }
.menu .menu-scroll { height: 100%; overflow-y: auto; padding: 0px 5px 0px 5px; }
.head { background-image: url(img/head.png); background-repeat: no-repeat; background-position: top center; background-size: 23vh; height: 9vh; overflow: hidden; }
.menu-head { margin: 15px 0px 15px 0px; }
.menu-button { display: block; width: 100%; background-color: transparent; color: #e8e9e9; margin: 0px; border: 0px; padding: 8px; font-size: 125%; text-align: center; cursor: pointer; text-decoration: none; text-shadow: 1px 2px 3px rgba(0,0,0,0.5); }
.menu-button:hover { background-color: rgba(255,255,255,0.1); }
.menu-divider { height: 19px; margin: 5px 5px 5px 5px; background-image: url(img/hr.png); background-repeat: no-repeat; background-position: center center; }
.mitch { color: #e8e9e9; text-decoration: none; cursor: default; }
.credits { position: absolute; bottom: 0px; left: 0px; color: #e8e9e9; font-size: 11px; text-align: justify; padding: 0px 5px 5px 5px; cursor: default; }
@media screen and (max-height: 424px) {
.credits { display: none; }
.menu-head { margin: 10px 0px 10px 0px; }
}
.panel { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; }
.panel:before { content: ""; display: block; background-color: rgba(0,0,0,0); transition: background-color 0.5s ease-in-out; }
.panel-open:before { z-index: 99; position: absolute; top: 0px; bottom: 0px; width: 100%; background-color: rgba(0,0,0,.5); }
.choose { touch-action: none; background-color: #9e9e9e; width: 100%; height: 100%; overflow: hidden; padding: 0px 8px; }
.label { text-align: center; font-size: 7vw; padding: 4px 0px 8px 0px; cursor: default; }
.start-life { width: 100%; font-size: 7vw; margin: 0px 0px 8px 0px; padding: 2px 0px 2px 10px; border-radius: 7px; border: 2px solid #000000; cursor: pointer; }
.button-row-top { width: 100%; }
.button-table { width: 100%; display: table; }
.button-row { width: 100%; display: table-row; }
.button-column1 { width: 50%; display: table-cell; padding: 0px 4px 0px 0px; }
.button-column2 { width: 50%; display: table-cell; padding: 0px 0px 0px 4px; }
.fancy-button { width: 100%; text-align: center; padding: 3px 0px 2px 0px; cursor: pointer; border-color: #787878 #757575 #666666; background: #999999; background-image: linear-gradient(to bottom, #adadad 0%, #a6a6a6 50%, #999999 50%, #8e7b7c 100%); color: #000000; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); border: 2px solid; border-radius: 7px; outline: 0; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25); }
.fancy-button:disabled { width: 100%; text-align: center; padding: 3px 0px 2px 0px; cursor: pointer; background-color: #eeeeee; color: #cccccc; border: 2px solid #cccccc; border-radius: 7px; outline: 0; }
.player-button { font-size: 7vw; margin: 0px 0px 8px 0px; }
.play { background-color: #000000; width: 100%; height: 100%; overflow: hidden; }
.tile { height: 100%; overflow: hidden; position: relative; font-size: 12vmax; background-image: url(data:image/png;base64,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); }
.life { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 0px 0px 0px 1vw; display: grid; align-items: center; text-align: center; }
.life.death { background-color: #000000; background-image: url(img/skull.gif); background-position: center center; background-size: contain; background-repeat: no-repeat; }
.buttons { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.plus, .minus { display: inline-block; float: left; height: 100%; width: 50%; border: 0px; background-color: transparent; color: #000000; font-family: monospace; font-size: 8vmax; cursor: pointer; }
.plus { padding: 0px 0px 0px 10px; text-align: left; }
.minus { padding: 0px 10px 0px 0px; text-align: right; }
.plus:disabled, .minus:disabled { color: #000000; cursor: default; }
.animate { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0px; border: 0px; padding: 0px; background-color: transparent; font-size: 0px; cursor: pointer; }
.c1 { background-color: #b22222; }
.c2 { background-color: #2e86c1; }
.c3 { background-color: #228B22; }
.c4 { background-color: #911eb4; }
.c5 { background-color: #fec007; }
.c6 { background-color: #fe730e; }
.c7 { background-color: #a0522d; }
.c8 { background-color: #ce9ae4; }
.two-t,
.two-b { display: block; font-size: 20vmax; }
.two-t { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.four-t-l, .four-t-r,
.four-b-l, .four-b-r { display: inline-block ; float: left; width: 50%; }
.four-t-l, .four-t-r { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.five, .six { display: inline-block; float: left; width: 50%; }
.seven, .eight { display: inline-block; float: left; width: 50%; }
.two-t, .two-b { height: 50%; }
.four-t-l, .four-t-r, .four-b-l, .four-b-r { height: 50%; }
.five, .six { height: 33.3%; }
.seven, .eight { height: 25%; }
.two-t.timer, .two-b.timer { height: 48%; }
.four-t-l.timer, .four-t-r.timer, .four-b-l.timer, .four-b-r.timer { height: 48%; }
.five.timer, .six.timer { height: 32%; }
.seven.timer, .eight.timer { height: 24%; }
.slideout-menu { z-index: 0; position: fixed; top: 0px; bottom: 0px; width: 256px; min-height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; display: none; }
.slideout-menu-left { left: 0px; }
.slideout-menu-right { right: 0px; }
.slideout-panel { z-index: 1; position: relative; will-change: transform; background-color: #9e9e9e; min-height: 100vh; }
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel { overflow: hidden; }
.slideout-open .slideout-menu { display: block; overflow: hidden; }
.mask { z-index: 700; background: rgba(0,0,0,0.5); position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; }
.dialog { position: absolute; top: 50%; left: 50%; border: 2px solid #000000; border-radius: 7px; padding: 5px; background-color: #eeeeee; }
.dialog-close { position: absolute; top: -14px; right: -14px; width: 24px; height: 24px; margin: 0px; border: 2px solid #e8e9e9; border-radius: 14px; padding: 0px 0px 0px 0px; background-color: #000000; color: #e8e9e9; font-size: 12pt; }
.starting-player { z-index: 800; width: 250px; height: 101px; margin: -51px 0px 0px -125px; }
.starting-player-text { color: #000000; font-size: 20pt; text-align: center; padding: 5px 0px 10px 0px; }
.starting-player-button { font-size: 20pt; margin: 0px 0px 0px 0px; }
.colorpicker { z-index: 802; width: 256px; height: 316px; margin: -158px 0px 0px -128px; padding: 5px; }
.swatch { float: left; height: 60px; width: 60px; overflow: hidden; font-size: 0px; margin: 0px; border: 3px solid #eeeeee; padding: 0px; }
.swatch:hover { border-color: #ff0000; }
.swatch:focus { border-color: #ff0000; }
.more-commands { z-index: 803; width: 300px; height: 226px; margin: -113px 0px 0px -150px; }
.more-commands-button { display: block; font-size: 18pt; margin: 0px 0px 6px 0px; }
.time-container { overflow: hidden; height: 32px; background-color: #000000; color: #ffffff; }
.time { width: 80%; float: left; text-align: center; padding: 3px 0px 0px 0px; font-size: 24px; }
.time-close,
.time-reset { width: 10%; height: 100%; margin: 0px; border: 0px; padding: 0px; float: left; background-color: #000000; color: #ffffff; text-align: center; font-size: 24px; }