blob: 7361ee5b0bcbf3502012d48e7c68878fd613641b (
plain)
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
|
.theme-switch {
display: none;
}
label[for=theme-switch] {
cursor: pointer;
}
.theme-switch:checked ~ .page {
--text: var(--light-text);
--aside-text: var(--light-aside-text);
--p-background: var(--light-p-bg);
--s-background: var(--light-s-bg);
--link: var(--light-link);
--link-visited: var(--light-link-visited);
--link-hover: var(--light-link-hover);
--border: var(--light-border);
--button: var(--light-button);
--button-text: var(--light-button-text);
--button-hover: var(--light-button-hover);
--button-border: var(--light-button-border);
--search-text: var(--light-search-text);
--switch-icon: var(--light-switch-icon);
--switch-shadow-color: var(--light-switch-shadow);
--switch-p-bg: var(--light-switch-p-bg);
--switch-s-bg: var(--light-switch-s-bg);
--switch-border: var(--light-switch-border);
--switch-transform: var(--light-switch-transform);
}
.switch-label {
display: inline-flex;
width: 35px;
height: 1rem;
border-radius: 1rem;
background-color: var(--switch-p-bg);
align-items: center;
align-content: center;
}
.switch-label::before {
content: var(--switch-icon);
position: relative;
transition: text-shadow .2s;
background: var(--switch-s-bg);
border: 1px solid var(--switch-border);
border-radius: 50%;
transform: var(--switch-transform);
width: 18px;
height: 18px;
}
.theme-switch:focus ~ .page .switch-label::before,
.switch-label:hover::before {
text-shadow: 0 0 15px var(--switch-shadow-color);
transition: transform 0.25s;
}
|
