HTML-Alarm-Clock/clock.css at main · DefinitelyRus/HTML-Alarm-Clock · 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
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

html {
	/* Temporary solution. Prevents the scroll bar from appearing. */
	overflow: hidden;
	height: 100vh;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

#main {
	background-color: #222222;
	margin: 0px;
}

#sub1 {
}

#sub2 {
}

.sub3 {
	aspect-ratio: 1/1;
}

.sub4 {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#timer {
	font-family: "Audiowide";
	color: #009688;
	text-align: center;
	font-size: 8vw;

	transition: 500ms;

	/* Makes the timer not selectable. */
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor: default;
}

.button {
	font-family: "Audiowide";
	font-size: 5vw;
	text-align: center;
	color: #00968840;

	background: none;
	border: 8px solid #adadad40;
	border-radius: 15px;
	width: 35%;

	transition: 500ms;

	/* Makes the button not selectable. */
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor: default;
}

#button1:hover {
	transition: 500ms;
	color: #009688ff;
	border-color: #303030ff;
}

#button2 {
	border: 8px solid #00000000;
	background: #343434ff;
	color: #ffffff80;
}

.buffer42 {
	width: 10%;
}

#button2:hover {
	transition: 500ms;
	background: #303030ff;
	border: 8px solid #00000000;
	color: #ffffffff;
}