-
Notifications
You must be signed in to change notification settings - Fork 0
/
timer.css
81 lines (58 loc) · 1018 Bytes
/
timer.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
<style>
:root{
--primary:crimson;
--dark:#1f2937;
--darkdark:#111827;
--light:#f3f4f6;
}
*{
box-sizing:border-box;
margin:0;
font-family:Fira sans, sans serif;
}
body{
background:var(--darkdark);
color:var(--light);
}
.stopwatch{
text-align:center;
background-color:var(--dark);
width:100%;
max-width:360px;
margin:4rem auto;
padding:1rem 2rem;
border-radius:1rem;
}
.stopwatch a{
font-size:50px;
color:white;
}
.timer{
font-size:5rem;
font-weight:300;
margin-bottom:1rem;
}
.controlicons{
display:flex;
align-items:center;
justify-content:center;
}
.controlicons a{
appearance:none;
background:none;
border:none;
user-select:none /* to prvent users from highlighting */;
color:var(--light);
background-color:var(--primary);
margin:0 0.5rem;
padding:0.5rem 1rem;
transition:0.4s;
border-radius:0.5rem;
}
.stopwatch a:hover{
opacity:0.7;
}
.stopwatch a:active{
background-color: var(--dark);
}
</style>