styles.css

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	}