Commit | Line | Data |
---|---|---|
72b294bb | 1 | body { |
2 | transform-origin: 0 0; | |
3 | overflow: hidden; | |
4 | text-align: center; | |
5 | } | |
6 | ||
7 | .clock-container { | |
8 | position: relative; | |
9 | } | |
10 | ||
11 | .flags { | |
12 | width: 570px; | |
13 | display: flex; | |
14 | justify-content: space-between; | |
15 | position: absolute; | |
16 | top: 40%; | |
17 | z-index: 9999; | |
18 | left: 0; | |
19 | right: 0; | |
20 | margin-left: auto; | |
21 | margin-right: auto; | |
22 | } | |
23 | ||
6f474901 AIL |
24 | h1 { |
25 | width: 20ch; | |
26 | text-align: center; | |
27 | position: absolute; | |
28 | top: 70%; | |
29 | z-index: 9999; | |
30 | left: 0; | |
31 | right: 0; | |
32 | margin-left: auto; | |
33 | margin-right: auto; | |
34 | } | |
35 | ||
72b294bb | 36 | .flags > div { |
37 | visibility: hidden; | |
38 | animation: blinker 1s linear infinite; | |
39 | font-size: 25pt; | |
40 | font-family: "DejaVu Sans",FreeSerif,Code2000,"BabelStone Han","Lucida Sans"; | |
41 | } | |
42 | ||
43 | @keyframes blinker { | |
44 | 50% { opacity: 0; } | |
45 | } | |
46 | ||
47 | .timers { | |
48 | width: 650px; | |
49 | display: flex; | |
50 | justify-content: center; | |
51 | align-items: center; | |
52 | /*margin-bottom: 96pt;*/ | |
53 | position: absolute; | |
54 | top: 50%; | |
55 | z-index: 9999; | |
56 | left: 0; | |
57 | right: 0; | |
58 | margin-left: auto; | |
59 | margin-right: auto; | |
60 | } | |
61 | ||
62 | .timer { | |
63 | margin-left: 48pt; | |
64 | margin-right: 48pt; | |
65 | font-size: 48pt; | |
66 | } | |
67 | ||
59026107 AIL |
68 | .increments { |
69 | width: 650px; | |
70 | display: flex; | |
71 | justify-content: center; | |
72 | align-items: center; | |
73 | /*margin-bottom: 96pt;*/ | |
74 | position: absolute; | |
75 | top: 50%; | |
76 | z-index: 9999; | |
77 | left: 0; | |
78 | right: 0; | |
79 | margin-left: auto; | |
80 | margin-right: auto; | |
81 | } | |
82 | ||
83 | .increment { | |
84 | width: 300pt; | |
85 | font-size: 12pt; | |
86 | text-align: right; | |
87 | } | |
88 | ||
89 | #increment-left { | |
90 | margin-right: 48pt; | |
91 | visibility: hidden; | |
92 | } | |
93 | ||
94 | #increment-right { | |
95 | margin-right: 32pt; | |
96 | visibility: hidden; | |
97 | } | |
98 | ||
72b294bb | 99 | .indicators { |
100 | width: 20pt; | |
101 | font-size: 20pt; | |
59026107 | 102 | transform: scaleX(2); |
72b294bb | 103 | } |
104 | ||
72b294bb | 105 | .commands { |
106 | margin: 0 auto; | |
107 | width: 650px; | |
108 | display: flex; | |
109 | justify-content: space-around; | |
110 | position: absolute; | |
111 | left: 0; | |
112 | right: 0; | |
113 | margin-left: auto; | |
114 | margin-right:auto; | |
115 | bottom: 5%; | |
116 | z-index: 9999; | |
117 | } | |
118 | ||
119 | .cmd { | |
120 | cursor: pointer; | |
121 | background-color: #FFF; | |
122 | padding: 5px; | |
123 | border: 3px solid #800000; | |
124 | border-radius: 5px; | |
125 | } |