Piece.css

1	@import url('./Base.css');
2
3	.piece {
4	width: var(--default-size);
5	height: var(--default-size);
6	padding: 10px;
7	border-radius: 50px;
8	animation: activeToDisabled .5s 1;
9	}
10
11	.p1-piece {
12	background-color: crimson;
13	}
14	.p2-piece {
15	background-color: mediumblue;
16	}
17
18	.active-player-piece {
19	width: var(--active-size);
20	height: var(--active-size);
21	animation: disabledToActive .5s 1;
22	}
23	.active-player-piece:hover {
24	filter: drop-shadow(1px 1px 5px black);
25	}
26
27	.selected-piece {
28	border: 2px white solid;
29	filter: drop-shadow(1px 1px 5px black);
30	}
31
32	@keyframes disabledToActive {
33	from {
34	width: var(--default-size);
35	height: var(--default-size);
36	}
37	to {
38	width: var(--active-size);
39	height: var(--active-size);
40	}
41	}
42	@keyframes activeToDisabled {
43	from {
44	width: var(--active-size);
45	height: var(--active-size);
46	}
47	to {
48	width: var(--default-size);
49	height: var(--default-size);
50	}
51	}