styles/utility.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

.drop-1 { box-shadow: var(--drop-level-1); }
.drop-2 { box-shadow: var(--drop-level-2); }

.pad-s { padding: var(--spacing-small); }
.pad-m { padding: var(--spacing-medium); }
.pad-l { padding: var(--spacing-large); }

.round-l { border-radius: var(--loose-corner); }
.round-t { border-radius: var(--tight-corner); }

.bg-100 { background-color: var(--gray-100); }
.bg-200 { background-color: var(--gray-200); }
.bg-300 { background-color: var(--gray-300); }
.bg-700 { background-color: var(--gray-700); }
.bg-800 { background-color: var(--gray-800); }
.bg-900 { background-color: var(--gray-900); }

.fg-100 { color: var(--gray-100); }
.fg-900 { color: var(--gray-900); }

.outcome.win { color: var(--disk-a-alt); }
.outcome.lose { color: var(--disk-b-alt); }
.outcome.draw { color: var(--gray-600); }

.posabs { position: absolute; }
.posrel { position: relative; }
.posfix { position: fixed; }

.t0 { top: 0; }
.b0 { bottom: 0; }
.r0 { right: 0; }
.l0 { left: 0; }

.h0 { left: 0; right: 0; }
.v0 { top: 0; bottom: 0; }

.a0 { top: 0; bottom: 0; left: 0; right: 0; }

.dispnone { display: none; }
.dispinbl { display: inline-block; }
.dispbl { display: block; }

.valigntop { vertical-align: top; }
.valignsup { vertical-align: super; }

.cpointer { cursor: pointer; }
.cdefault { cursor: default; }

.center { text-align: center; }

.floatr { float: right; }
.floatl { float: left; }
.floatn { float: none; }

.w1fr { width: 1fr; }

.w100m2m { width: calc(100% - var(--spacing-medium)); }

.w100vw { width: 100vw; }
.h100vh { height: 100vh; }

.fullwidth {
	width: 100%;
	box-sizing: border-box;
}

.subtile {
	color: var(--gray-600);
	font-style: italic;
}

.nosel {
	user-select: none;
	font-weight: 600;
}

.gg-l { grid-gap: var(--spacing-large) !important; }
.sidebyside {
	display: grid;
	grid-gap: var(--spacing-medium);
	grid-auto-flow: column;
}

.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.abscenterh {
	left: 50%;
	transform: translateX(-50%);
}

.abscenterv {
	top: 50%;
	transform: translateY(-50%);
}

.abscenter {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}