1/* radio settings 👇 */
2
3.theme-popup {
4  /* total */
5  --total_text_color: #e0e0e0;
6  --total_font_family: Menlo, Roboto Mono, monospace;
7  /* button */
8  --btn_bg: #3A3A3A;
9  --btn_padding: 0.5em;
10  --btn_height: 2em;
11  --btn_border_radius: 0.3125em;
12  --btn_outline_width: 0.0625em;
13  --btn_outline_color: #A0A0A0;
14  --btn_outline_offset: 0.0625em;
15  --btn_gap: 0.3125em;
16  /* list */
17  --list_padding: 0.5em;
18  --list_bg: var(--btn_bg);
19  --list_border_radius: var(--btn_border_radius);
20  --list_gap: 0.1875em;
21  --list_btn_hover_bg: #5A5656;
22  --list_btn_active: #b9b9b970;
23  --list_btn_border_radius: 0.25em;
24  --list_btn_padding: 0.35em 1em;
25  --list_btn_gap: 0.4375em;
26  --list_btn_outline_width: 0.0625em;
27  --list_btn_outline_color: rgb(212, 210, 210);
28  --list_offset: 0.35em;
29  --list_btn_font_size: 14px;
30  --list_position_left: 0;
31  --list_position_right: unset;
32  /* 👆 if you want to change sides just switch one property */
33  /* from properties to "unset" and the other to 0 */
34}
35
36.theme-popup__button .theme-popup__icons svg,
37#light,
38#dark, 
39#default, 
40#checkbox,
41.theme-popup__list-container {
42  display: none;
43}
44
45.theme-popup {
46  color: var(--total_text_color);
47  font-family: var(--total_font_family);
48  position: relative;
49  user-select: none;
50}
51
52.theme-popup__list-container {
53  position: absolute;
54  left: var(--list_position_left);
55  right: var(--list_position_right);
56  top: calc(var(--btn_height) + var(--list_offset));
57}
58
59.theme-popup__icons {
60  display: flex;
61  align-items: center;
62  justify-content: center;
63  width: 16px;
64  height: 16px;
65}
66
67.theme-popup__button {
68  line-height: var(--btn_height);
69  background-color: var(--btn_bg);
70  padding: 0 var(--btn_padding);
71  display: inline-flex;
72  align-items: center;
73  column-gap: var(--btn_gap);
74  border-radius: var(--btn_border_radius);
75  border: none;
76  color: inherit;
77  font-family: inherit;
78  outline: none;
79  font-weight: bold;
80}
81
82.theme-popup__list {
83  margin: 0;
84  list-style-type: none;
85  padding: var(--list_padding);
86  border-radius: var(--list_border_radius);
87  background-color: var(--list_bg);
88  display: flex;
89  flex-direction: column;
90  row-gap: var(--list_gap);
91}
92
93.theme-popup__list label {
94  display: flex;
95  align-items: center;
96  justify-content: start;
97  column-gap: var(--list_btn_gap);
98  padding: var(--list_btn_padding);
99  border-radius: var(--list_btn_border_radius);
100  white-space: nowrap;
101}
102
103.theme-popup__list label span {
104  font-size: var(--list_btn_font_size);
105}
106
107/* actions */
108
109#checkbox:checked~.theme-popup__button {
110  outline: var(--btn_outline_width) solid var(--btn_outline_color);
111  outline-offset: var(--btn_outline_offset);
112}
113
114#checkbox:checked~.theme-popup__list-container {
115  display: block;
116}
117
118.theme-popup__list label:hover,
119.theme-popup__button:hover,
120#checkbox:checked~.theme-popup__button {
121  background-color: var(--list_btn_hover_bg);
122}
123
124#default:checked~.theme-popup__list-container label[for="default"],
125#light:checked~.theme-popup__list-container label[for="light"],
126#dark:checked~.theme-popup__list-container label[for="dark"] {
127  background-color: var(--list_btn_active);
128  outline: var(--list_btn_outline_width) solid var(--list_btn_outline_color);
129}
130
131#default:checked~label svg.default,
132#light:checked~label svg.sun,
133#dark:checked~label svg.moon {
134  display: block;
135}