fuzzyworld

dao-game / files / public / styles.css

styles.css

Blame: the commit that last changed each line · file · history

9b517ee1 2022-02-27 Pavel Safronov1:root {
c3c52daf 2022-03-18 Pavel Safronov2 --default-size: 5px;
3 --active-size: 40px;
b3c7b964 2022-03-22 Pavel Safronov4 --active-pulse-size: 30px;
c3c52daf 2022-03-18 Pavel Safronov5 --cell-size: 80px;
b3c7b964 2022-03-22 Pavel Safronov6 --max-width: 500px;
7 --font-family: Arial, sans-serif;
9b517ee1 2022-02-27 Pavel Safronov8}
9
b3c7b964 2022-03-22 Pavel Safronov10#other-mouse {
11 position: absolute;
12 z-index: 1000;
13 pointer-events: none;
14 display: none;
15}
16
17#table {
c3c52daf 2022-03-18 Pavel Safronov18 margin: auto;
0b6fe828 2022-02-26 Pavel Safronov19}
20
b3c7b964 2022-03-22 Pavel Safronov21#undo-button {
22 float: left;
23}
24#reset-button {
25 float: right;
0b6fe828 2022-02-26 Pavel Safronov26}
27
b3c7b964 2022-03-22 Pavel Safronov28#share-container {
29 align-content: center;
30 align-items: center;
31 justify-content: center;
32 text-align: center;
0b6fe828 2022-02-26 Pavel Safronov33}
34
b3c7b964 2022-03-22 Pavel Safronov35#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;
c3c52daf 2022-03-18 Pavel Safronov42 display: flex;
b3c7b964 2022-03-22 Pavel Safronov43
44 align-content: center;
45 align-items: center;
46 justify-content: center;
47 text-align: center;
b4baeb1d 2022-02-27 Pavel Safronov48
b3c7b964 2022-03-22 Pavel Safronov49 text-transform: uppercase;
c3c52daf 2022-03-18 Pavel Safronov50}
51
9b517ee1 2022-02-27 Pavel Safronov52.invisible {
c3c52daf 2022-03-18 Pavel Safronov53 display: none;
9b517ee1 2022-02-27 Pavel Safronov54}
55
b4baeb1d 2022-02-27 Pavel Safronov56.title {
c3c52daf 2022-03-18 Pavel Safronov57 text-align: center;
b3c7b964 2022-03-22 Pavel Safronov58 font-family: var(--font-family);
c3c52daf 2022-03-18 Pavel Safronov59 font-size: 40px;
b3c7b964 2022-03-22 Pavel Safronov60 max-width: var(--max-width);
61 margin: auto;
0b6fe828 2022-02-26 Pavel Safronov62}
63
b3c7b964 2022-03-22 Pavel Safronov64.tile {
c3c52daf 2022-03-18 Pavel Safronov65 width: var(--cell-size);
66 height: var(--cell-size);
67 text-align: center;
68 border: 2px transparent solid;
0b6fe828 2022-02-26 Pavel Safronov69}
70
8f71d3db 2022-03-01 Pavel Safronov71.controls {
c3c52daf 2022-03-18 Pavel Safronov72 font-size: 90px;
b3c7b964 2022-03-22 Pavel Safronov73 font-family: var(--font-family);
c3c52daf 2022-03-18 Pavel Safronov74 font-size: 55px;
75 border-radius: 10px;
76 padding: 10px;
b3c7b964 2022-03-22 Pavel Safronov77 display: flex;
78 max-width: var(--max-width);
79 margin: auto;
0b6fe828 2022-02-26 Pavel Safronov80}
81
c3c52daf 2022-03-18 Pavel Safronov82.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;
b3c7b964 2022-03-22 Pavel Safronov92 margin: auto;
8f71d3db 2022-03-01 Pavel Safronov93}
94
4918da41 2022-03-17 Pavel Safronov95.p1-turn-text.selected-player-text {
c3c52daf 2022-03-18 Pavel Safronov96 background-color: red;
8f71d3db 2022-03-01 Pavel Safronov97}
98
4918da41 2022-03-17 Pavel Safronov99.p2-turn-text.selected-player-text {
c3c52daf 2022-03-18 Pavel Safronov100 background-color: blue;
8f71d3db 2022-03-01 Pavel Safronov101}
102
103.selected-player-text {
c3c52daf 2022-03-18 Pavel Safronov104 color: white;
8f71d3db 2022-03-01 Pavel Safronov105}
106
107.button {
c3c52daf 2022-03-18 Pavel Safronov108 border-radius: 10px;
109 padding: 10px;
110 background-color: orange;
111 font-size: 60px;
112 border-color: transparent;
113 transition: 0.2s all;
b3c7b964 2022-03-22 Pavel Safronov114 margin: auto;
f73c95d8 2022-03-01 Pavel Safronov115}
116.button:active {
c3c52daf 2022-03-18 Pavel Safronov117 transform: scale(0.98);
118 box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
0b6fe828 2022-02-26 Pavel Safronov119}
120
121.white {
c3c52daf 2022-03-18 Pavel Safronov122 background-color: orange;
0b6fe828 2022-02-26 Pavel Safronov123}
124.black {
c3c52daf 2022-03-18 Pavel Safronov125 background-color: wheat;
0b6fe828 2022-02-26 Pavel Safronov126}
127
9b517ee1 2022-02-27 Pavel Safronov128.piece {
c3c52daf 2022-03-18 Pavel Safronov129 width: var(--default-size);
130 height: var(--default-size);
131 padding: 10px;
132 border-radius: 50px;
b3c7b964 2022-03-22 Pavel Safronov133 animation: activeToDisabled .5s 1;
134 margin: auto;
0b6fe828 2022-02-26 Pavel Safronov135}
9b517ee1 2022-02-27 Pavel Safronov136
4918da41 2022-03-17 Pavel Safronov137.p1-piece {
c3c52daf 2022-03-18 Pavel Safronov138 background-color: crimson;
9b517ee1 2022-02-27 Pavel Safronov139}
4918da41 2022-03-17 Pavel Safronov140.p2-piece {
c3c52daf 2022-03-18 Pavel Safronov141 background-color: mediumblue;
0b6fe828 2022-02-26 Pavel Safronov142}
143
144.active-player-piece {
c3c52daf 2022-03-18 Pavel Safronov145 width: var(--active-size);
146 height: var(--active-size);
b3c7b964 2022-03-22 Pavel Safronov147 animation: disabledToActive .5s 1;
0b6fe828 2022-02-26 Pavel Safronov148}
149
150.selected-piece {
b3c7b964 2022-03-22 Pavel Safronov151 animation: activePulsing .5s infinite;
0b6fe828 2022-02-26 Pavel Safronov152}
153
b4baeb1d 2022-02-27 Pavel Safronov154.info {
b3c7b964 2022-03-22 Pavel Safronov155 /* text-align: center; */
156 font-family: var(--font-family);
c3c52daf 2022-03-18 Pavel Safronov157 font-size: 20px;
b3c7b964 2022-03-22 Pavel Safronov158 max-width: var(--max-width);
159 margin: auto;
b4baeb1d 2022-02-27 Pavel Safronov160}
161
6ef12b2c 2022-03-05 Pavel Safronov162.possible-move {
c3c52daf 2022-03-18 Pavel Safronov163 animation: blinkingText 1s infinite;
164 border-color: black;
165 filter: drop-shadow(0px 0px 5px black);
0b6fe828 2022-02-26 Pavel Safronov166}
167@keyframes blinkingText {
c3c52daf 2022-03-18 Pavel Safronov168 0% {
169 opacity: 1;
170 }
171 50% {
172 opacity: 0.6;
173 }
174 100% {
175 opacity: 1;
176 }
0b6fe828 2022-02-26 Pavel Safronov177}
178
8f71d3db 2022-03-01 Pavel Safronov179@keyframes fade-in {
c3c52daf 2022-03-18 Pavel Safronov180 0% {
181 opacity: 0;
182 }
183 50% {
184 opacity: 0.5;
185 }
186 100% {
187 opacity: 1;
188 }
8f71d3db 2022-03-01 Pavel Safronov189}
190
773cf7f1 2022-02-27 Pavel Safronov191@keyframes disabledToActive {
c3c52daf 2022-03-18 Pavel Safronov192 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 }
773cf7f1 2022-02-27 Pavel Safronov200}
201@keyframes activeToDisabled {
c3c52daf 2022-03-18 Pavel Safronov202 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 }
773cf7f1 2022-02-27 Pavel Safronov210}
211
212@keyframes activePulsing {
c3c52daf 2022-03-18 Pavel Safronov213 from {
b3c7b964 2022-03-22 Pavel Safronov214 opacity: 1;
c3c52daf 2022-03-18 Pavel Safronov215 }
216 50% {
b3c7b964 2022-03-22 Pavel Safronov217 opacity: .5;
c3c52daf 2022-03-18 Pavel Safronov218 }
219 to {
b3c7b964 2022-03-22 Pavel Safronov220 opacity: 1;
c3c52daf 2022-03-18 Pavel Safronov221 }
773cf7f1 2022-02-27 Pavel Safronov222}
f2c94061 2022-03-21 Pavel Safronov223
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 */
5648264d 2022-03-22 Pavel Safronov239 font-family: var(--font-family);
240 font-size: 20px;
f2c94061 2022-03-21 Pavel Safronov241}
b3c7b964 2022-03-22 Pavel Safronov242
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}