touchtyping/styles.css at master · buggaarde/touchtyping · 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
.app {
	background: #fefaff;

	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	position: absolute;

	display: grid;
	grid-template-columns: [all-left] auto [mid-left] 33% [mid-right] auto [all-right];
	grid-template-rows: 15% minmax(auto, 15%) 1fr 45px 1fr 10fr;

	grid-template-areas:
		"left header right"
		"left ref-text right"
		"left padding-top right"
		"left input-text right"
		"left padding-right right"
		"left footer right";
}

div.header {
	grid-area: header;
}

input.main {
	grid-area: input-text;
}

span.reference {
	grid-area: ref-text;
}

input.main {
	border: 1px solid black;
	border-radius: 5px;
	font-size: 25px;
	text-align: left;
}

span.reference {
	text-align: center;
	background: none;
	font-size: 40px;
	font-family : Courier;
	overflow: hidden;
}

span.matched {
	border: 1px solid black;
}

span.not-matched {
	border: 1px solid #e45755;
}

mark {
	background : none;
}

mark.red {
	background: #e45755;
}

Mark.green {
	background: #afe7a1;
}

mark.neutral {
	color: black;
}