styles/index.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

.topbar * {
	--squareSize: 90px;
}

.loginOrRegisterBox {
	height: calc(var(--squareSize) + 2 * var(--spacing-large));
	width: 100%;
	max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
}

.loginOrRegisterBox .inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.loginOrRegisterBox .inner .registerMessage {
	user-select: none;
	display: inline-block;
	margin: 0 auto;
	min-width: 240px;
	max-width: 350px;
	text-align: center;
}

.loginOrRegisterBox .inner .button.register {
	background-color: var(--gray-700);
	color: var(--foreground);
}

.gamemode .icon {
	font-size: 64px;
	font-size: 64px;
	height: 64px;
	display: inline-block;
	position: absolute;
	top: var(--spacing-large);
	left: 50%;
	transform: translateX(-50%);
}

.gamemode .text {
	white-space: nowrap;
	display: inline-block;
	position: absolute;
	bottom: var(--spacing-large);
	left: 50%;
	transform: translateX(-50%);
	user-select: none;
	font-weight: 500;
}

.topbar .gamemode {
	--size: calc(var(--squareSize) + 2 * var(--spacing-large));
	width: var(--size);
	height: var(--size);
}

.topbar .profile .info {
	left: calc(90px + 12px);
	width: calc(100% - 90px - 12px);
	height: 100%;
}

.topbar .profile .info .username { max-width: 178px; }
.topbar .profile .info .score { margin-top: var(--spacing-small); }

.topbar .profile .info .games .divider {
	margin: 0 3px;
}