BrickShifter/styles.css at master · guckstift/BrickShifter · GitHub

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
button {
	cursor: pointer;
}

#canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.label {
	--text-color: white;
	--shadow-color: white;
	user-select: none;
	position: absolute;
	color: var(--text-color);
	font-family: sans-serif;
	font-size: 2em;
	text-shadow:
			+2px +2px 4px var(--shadow-color),
			-2px -2px 4px var(--shadow-color);
}

#level_label {
	left: 1em;
	top: 1em;
}

#dist_label {
	right: 1em;
	top: 1em;
}

#level_complete_label {
	--text-color: #ffb700;
	--shadow-color: #6e5500;
	--scale-factor: 32;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	font-size: 4em;
}

#level_complete_label.visible {
	visibility: visible;
}

#level_complete_label > div {
	transition: transform 0.5s ease-in, opacity 0.5s ease-in;
	transform: scale(32);
	opacity: 0;
}

#level_complete_label.visible > div {
	transform: scale(1);
	opacity: 1;
}

#next_button {
	transition: opacity 1s ease-in;
	font-size: 1.5rem;
	opacity: 0;
	padding: 0.25em 0.5em;
	margin: 0;
	font-family: sans-serif;
	color: #484848;
	background: white;
	border: 2px solid #7c7c7c;
	border-radius: 4em;
}

#level_complete_label.visible #next_button {
	opacity: 1;
}

#toolbar {
	left: 1rem;
	bottom: 1rem;
	display: flex;
	flex-direction: row;
}

#toolbar button {
	display: block;
	border: none;
	padding: 0;
	background: transparent;
	opacity: 0.25;
}

#toolbar button:hover {
	opacity: 1;
}

#toolbar button img {
	display: block;
}

@media (max-width: 499px) {
	.label {
		font-size: 1.5em;
		margin: -0.5em;
	}

	#level_complete_label {
		font-size: 2em;
		margin: 0;
	}

	#next_button {
		font-size: 1.25rem;
	}
}