blob: d22c6c5810f28cab3924db9dc57db15795e54c9a (
plain) (
blame)
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
|
/* Theme switch toggle */
.switch {
position: relative;
height: 2em;
width: 4em;
cursor: pointer;
}
.switch-outer {
position: absolute;
height: 100%;
width: 100%;
border-radius: 2em;
transition: background-color 0.3s ease-out;
}
.switch.dark .switch-outer {
background-color: #22272E;
border: solid 1px #515151;
}
.switch.light .switch-outer {
background-color: #3f61d9;
}
.knob {
position: absolute;
padding-top: 20%;
height: 70%;
width: 37.5%;
border-radius: 10em;
transition: all 0.5s ease-out;
}
.knob.dark {
background-color: #586282;
margin: 7% auto auto 8%;
}
.knob.light {
background-color: white;
margin: 7% auto auto 56%;
}
.theme-icon {
position: absolute !important;
--ggs: 0.75;
transition: opacity 0.1s ease-out;
}
.theme-icon.light {
left: 10%;
top: 15%;
color: white;
}
.theme-icon.dark {
right: 10%;
top: 20%
}
.switch.dark .theme-icon.light {
opacity: 0;
}
.switch.light .theme-icon.dark {
opacity: 0;
}
|