styles/game.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

.outcomeDialog .inner > * {
	margin-top: var(--spacing-medium);
}

.outcomeDialog .inner .button {
	float: unset;
	padding: var(--spacing-medium) var(--spacing-large);
}

.newGameDialog .inviteButton { height: 160px; }

.newGameDialog .inviteButton.random { background-color: var(--confirm); }

.newGameDialog .inviteButton.link { background-color: var(--error); }

.newGameDialog .inviteButton .icon {
	top: var(--spacing-medium);
	font-size: 100px;
}

.newGameDialog .inviteButton .label { bottom: var(--spacing-medium); }

.newGameDialog > div { margin-top: var(--spacing-large); }

.voerBord { border-spacing: var(--spacing-small); }

.voerBord .cell.inner { border: 2px solid var(--gray-800); }

.voerBord .square { margin-top: 100%; }

.voerBord.active .cell.inner { cursor: pointer; }

.voerBord .disk {
	border-radius: 999999999px;
	margin: 3px;
}

.gameBar .gameBarButton {
	margin: 0;
	margin-left: var(--spacing-small);
}

.gameBar .move {
	width: 32px;
	height: 32px;
	border-radius: 16px;

	margin: 8px;
}

.gameBar .move.move-a { background-color: var(--error); }
.gameBar .move.move-b { background-color: var(--confirm); }

.gameBar .timer span {
	margin: 0 4px;
	font-size: 20px;
}

.gameBar .score {
	font-size: 20px;
	z-index: 1;
}

.gameBar .score.winning { color: var(--disk-a-alt); }
.gameBar .score.losing { color: var(--disk-b-alt); }

.voerGame {
	max-width: 100vh;
	margin: 0 auto;
}

html.dark .newGameDialog .inviteButton { background-color: var(--gray-800); }
html.dark .newGameDialog .inviteButton.random .icon { color: var(--confirm); }
html.dark .newGameDialog .inviteButton.link .icon { color: var(--error); }
html.dark .newGameDialog .searchBar .input { background-color: var(--gray-800); }