fuzzyworld

dao-game / files / public / styles.css

styles.css

5.0 KB · history · blame

1:root {
2 --default-size: 5px;
3 --active-size: 40px;
4 --active-pulse-size: 30px;
5 --cell-size: 80px;
6 --max-width: 500px;
7 --font-family: Arial, sans-serif;
8}
9
10#other-mouse {
11 position: absolute;
12 z-index: 1000;
13 pointer-events: none;
14 display: none;
15}
16
17#table {
18 margin: auto;
19}
20
21#undo-button {
22 float: left;
23}
24#reset-button {
25 float: right;
26}
27
28#share-container {
29 align-content: center;
30 align-items: center;
31 justify-content: center;
32 text-align: center;
33}
34
35#share-link {
36 background-color: rgb(106, 170, 100);
37 border: black 1px solid;
38 max-width: var(--max-width);
39 margin: auto;
40 border-radius: 5px;
41 cursor: pointer;
42 display: flex;
43
44 align-content: center;
45 align-items: center;
46 justify-content: center;
47 text-align: center;
48
49 text-transform: uppercase;
50}
51
52.invisible {
53 display: none;
54}
55
56.title {
57 text-align: center;
58 font-family: var(--font-family);
59 font-size: 40px;
60 max-width: var(--max-width);
61 margin: auto;
62}
63
64.tile {
65 width: var(--cell-size);
66 height: var(--cell-size);
67 text-align: center;
68 border: 2px transparent solid;
69}
70
71.controls {
72 font-size: 90px;
73 font-family: var(--font-family);
74 font-size: 55px;
75 border-radius: 10px;
76 padding: 10px;
77 display: flex;
78 max-width: var(--max-width);
79 margin: auto;
80}
81
82.p1-turn-text,
83.p2-turn-text {
84 text-align: center;
85 color: lightgray;
86 background-color: white;
87 border-radius: 10px;
88 padding: 10px;
89 -ms-user-select: none;
90 -webkit-user-select: none;
91 user-select: none;
92 margin: auto;
93}
94
95.p1-turn-text.selected-player-text {
96 background-color: red;
97}
98
99.p2-turn-text.selected-player-text {
100 background-color: blue;
101}
102
103.selected-player-text {
104 color: white;
105}
106
107.button {
108 border-radius: 10px;
109 padding: 10px;
110 background-color: orange;
111 font-size: 60px;
112 border-color: transparent;
113 transition: 0.2s all;
114 margin: auto;
115}
116.button:active {
117 transform: scale(0.98);
118 box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
119}
120
121.white {
122 background-color: orange;
123}
124.black {
125 background-color: wheat;
126}
127
128.piece {
129 width: var(--default-size);
130 height: var(--default-size);
131 padding: 10px;
132 border-radius: 50px;
133 animation: activeToDisabled .5s 1;
134 margin: auto;
135}
136
137.p1-piece {
138 background-color: crimson;
139}
140.p2-piece {
141 background-color: mediumblue;
142}
143
144.active-player-piece {
145 width: var(--active-size);
146 height: var(--active-size);
147 animation: disabledToActive .5s 1;
148}
149
150.selected-piece {
151 animation: activePulsing .5s infinite;
152}
153
154.info {
155 /* text-align: center; */
156 font-family: var(--font-family);
157 font-size: 20px;
158 max-width: var(--max-width);
159 margin: auto;
160}
161
162.possible-move {
163 animation: blinkingText 1s infinite;
164 border-color: black;
165 filter: drop-shadow(0px 0px 5px black);
166}
167@keyframes blinkingText {
168 0% {
169 opacity: 1;
170 }
171 50% {
172 opacity: 0.6;
173 }
174 100% {
175 opacity: 1;
176 }
177}
178
179@keyframes fade-in {
180 0% {
181 opacity: 0;
182 }
183 50% {
184 opacity: 0.5;
185 }
186 100% {
187 opacity: 1;
188 }
189}
190
191@keyframes disabledToActive {
192 from {
193 width: var(--default-size);
194 height: var(--default-size);
195 }
196 to {
197 width: var(--active-size);
198 height: var(--active-size);
199 }
200}
201@keyframes activeToDisabled {
202 from {
203 width: var(--active-size);
204 height: var(--active-size);
205 }
206 to {
207 width: var(--default-size);
208 height: var(--default-size);
209 }
210}
211
212@keyframes activePulsing {
213 from {
214 opacity: 1;
215 }
216 50% {
217 opacity: .5;
218 }
219 to {
220 opacity: 1;
221 }
222}
223
224/* Snackbar, from https://www.w3schools.com/howto/howto_js_snackbar.asp */
225
226/* The snackbar - position it at the bottom and in the middle of the screen */
227#snackbar {
228 min-width: 250px; /* Set a default minimum width */
229 margin-left: -125px; /* Divide value of min-width by 2 */
230 background-color: #333; /* Black background color */
231 color: #fff; /* White text color */
232 text-align: center; /* Centered text */
233 border-radius: 2px; /* Rounded borders */
234 padding: 16px; /* Padding */
235 position: fixed; /* Sit on top of the screen */
236 z-index: 1; /* Add a z-index if needed */
237 left: 50%; /* Center the snackbar */
238 bottom: 30px; /* 30px from the bottom */
239 font-family: var(--font-family);
240 font-size: 20px;
241}
242
243/* Modal from https://www.w3schools.com/howto/howto_css_modals.asp */
244 /* The Modal (background) */
245.modal {
246 display: none; /* Hidden by default */
247 position: fixed; /* Stay in place */
248 z-index: 1; /* Sit on top */
249 left: 0;
250 top: 0;
251 width: 100%; /* Full width */
252 height: 100%; /* Full height */
253 overflow: auto; /* Enable scroll if needed */
254 background-color: rgb(0,0,0); /* Fallback color */
255 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
256 font-family: var(--font-family);
257 font-size: 30px;
258}
259
260/* Modal Content/Box */
261.modal-content {
262 background-color: #fefefe;
263 margin: 100px auto; /* 15% from the top and centered */
264 padding: 20px;
265 border: 1px solid #888;
266 /* width: 80%; /* Could be more or less, depending on screen size */
267 max-width: var(--max-width);
268}
269
270/* The Close Button */
271.close {
272 color: #aaa;
273 float: right;
274 font-size: 28px;
275 font-weight: bold;
276}
277
278.close:hover,
279.close:focus {
280 color: black;
281 text-decoration: none;
282 cursor: pointer;
283}