-
Notifications
You must be signed in to change notification settings - Fork 1
/
style.css
73 lines (53 loc) · 2.23 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
* {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin: 0; padding: 0; box-sizing: border-box; color: #42606d;
}
body {
width: 100%; height: 100vh; padding-top: 30px; gap: 30px; flex-direction: column;
display: flex; align-items: center; justify-content: center;
}
.frame {
width: 400px; height: 400px; background: rgb(174,202,238);
background: linear-gradient(90deg,
rgba(174,202,238,1) 0%,
rgba(255,210,210,1) 100%);
border-radius: 5px; box-shadow: 5px 10px 20px rgba(128, 128, 128, 0.473);
display: flex; align-items: center; justify-content: center;
}
.container {
width: 60%; height: 70%; background-color: #fff; border-radius: 3px;
box-shadow: 5px 10px 20px rgba(128, 128, 128, 0.473); padding: 25px 35px;
display: flex; justify-content: space-evenly; flex-direction: column;
min-width: 260px;
}
.day-box { text-align: center; }
.day-box #day { font-weight: 600; font-size: 22px; }
.day-box #date { font-size: 13px; font-weight: 400; margin-top: 3px; }
.input { display: flex; margin-top: 15px; }
#input { background: #F6F1F1; border: 0; padding: 10px; border-radius: 5px; }
#input:focus { outline: none; }
#error-text { font-size: 10px; color: #f76868; width: max-content; margin: 5px auto;
}
.add-box { display: flex; justify-content: center;}
#btn {
padding: 5px 5px; border: none; color: #fff; transition: 1s;
font-size: 20px; cursor: pointer; background: #92baec;
border-radius: 5px; margin-left: -10px;
}
#lists { overflow: scroll; }
::-webkit-scrollbar { display: none; }
.tasks {
display: flex; justify-content: space-evenly; align-items: center; font-size: 13px; font-weight: 400;
text-transform: lowercase; margin-top: 13px;
}
::first-letter { text-transform: uppercase; }
label { width: calc(100% - 15px); transition: 1s; }
input:checked ~ label {
text-decoration: line-through; opacity: 0.5; font-style: italic; transition: 1s;
}
input[type="checkbox"] {
width: 15px; height: 15px; accent-color: #92baec; transition: 1s; margin-right: 5px;
}
#action { margin-top: 5px; float: right; }
#action i { cursor: pointer; margin-right: 5px; }
#action .icon { width: 15px; height: 15px; color: #f76868; }