public/themes/classic.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
77
78
79
80
81
82
83
84
85
86
87

:root {
	--background: var(--gray-900);
	--foreground: var(--gray-900);

	--accent: var(--error);

	--error: #E16D82;
	--disk-b-alt: #FDC0C4;

	--confirm: #71D9CC;
	--disk-a-alt: #C0FDEB;

	/* shade */
    --gray-100: #11171a;
    --gray-200: #222d33;
    --gray-300: #344047;
	--gray-400: #11171a88;

	--gray-600: #fcfffdaa;
	--gray-700: #81949E;
	--gray-800: #5d737e;

	--gray-900: #fcfffd;

	/* box-shadow */
	--drop-level-2: 0px 8px 32px 0px  rgba(0, 0, 0, 0.3);
	--drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);

	/* border-radius */
	--tight-corner: 8px;
	--loose-corner: 8px;

	/* margin/padding */
	--spacing-small:  6px;
	--spacing-medium: 12px;
	--spacing-large:  24px;
}

html:not(.dark) .pageTitle,
html:not(.dark) .footer {
	color: var(--gray-800) !important;
}

html:not(.dark) .footer svg circle.circle { stroke: var(--gray-800); }

html:not(.dark) .searchBar .input {
	background-color: var(--gray-900) !important;
	color: var(--gray-800);
}

html:not(.dark) .searchBar .input::placeholder { color: var(--gray-400); }

.newGameDialog .inviteButton {
	background-color: var(--gray-900) !important;
	color: var(--gray-800);
}

.newGameDialog .inviteButton.random .icon { color: var(--confirm); }
.newGameDialog .inviteButton.link .icon { color: var(--error); }

table.voerBord .cell.inner {
	border-color: var(--gray-700);
	opacity: .5;
}

html:not(.dark) *[contenteditable="true"] {
	color: var(--gray-800) !important;
}

html.dark {
	--background: var(--gray-100) !important;
	--foreground: var(--gray-900) !important;

    --gray-800: #222d33 !important;
    --gray-700: #344047 !important;
}

html.dark .newGameDialog .inviteButton,
html.dark .searchBar .input
{ background-color: var(--gray-100) !important; }

html.dark .dialogbox { background-color: var(--gray-800) !important; }

html.dark .newGameDialog .inviteFromFriendsList .inviteableFriend,
html.dark .gameRuleEdit .editableRulesSection
{ background-color: var(--gray-700) !important; }