forked from eesrakendused-2022/1-kodutoo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
133 lines (116 loc) · 2.94 KB
/
style.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
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
123
124
125
126
127
128
129
130
131
132
133
html {
height: 100vh;
background-color: rgba(26, 24, 24, 0.705);
}
body {
margin: 0;
display: flex;
flex-direction: row;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: rgba(184, 176, 176, 0.774);
height: 80vh;
width: 80vh;
border-radius: 5%;
margin: 5% 20%;
font-weight:500;
padding: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#clock {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 90%;
}
#time, #date {
display: flex;
justify-content: space-between;
}
#time {
font-weight: 700;
border: white solid 3px;
border-radius: 5px;
padding: 10%;
background-color:rgba(255, 255, 255, 0.288);
}
#day, #month, #year {
padding: 5px;
}
button {
margin: 20px 0;
padding: 7px;
border-radius: 5px;
font-size: 20px;
box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
#footer {
display: flex;
flex-direction: column;
align-items: center;
font-size: xx-small;
margin-top: 50px;
}
#controls {
display: flex;
flex-direction: column;
justify-content: center;
border-left: gray double 10px;
padding: 3%;
}
h5 {
font-size: 20px;
font-weight: 500;
margin-top: 45%;
margin-bottom: 5px;
}
/* Background Toggles */
#background-buttons {
display: flex;
flex-direction: row;
}
/* every div within background-toggles */
#background-buttons > button {
height: 35px;
width: 35px;
border-radius: 5px;
margin: 5px;
}
/* Backgrounds */
.background-1{
background-color: #eeecf2;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237b7a7e' fill-opacity='0.2' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.background-2 {
background-color: #f5f2fb;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236319d9' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M8 0v20L0 10M16 0v10L8 0M16 10v10H8'/%3E%3C/g%3E%3C/svg%3E");
}
.background-3 {
background-color: #e8e3f0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='%233cce7b' fill-opacity='0.33'%3E%3Cpath fill-rule='evenodd' d='M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z'/%3E%3C/g%3E%3C/svg%3E");
}
/* Text size */
#smaller {
height: 35px;
width: 35px;
border-radius: 5px;
font-size: 20px;
}
/* Opacity slider */
#slider {
left: -8px;
width: 130px;
height: 10px;
background: rgb(177, 177, 177);
outline: none;
opacity: 0.7;
cursor: pointer;
transition: opacity 0.2s;
}