Spaces:
Running
Running
neon_arch
commited on
Commit
β’
55e1672
1
Parent(s):
7a33ee0
π docs: update the theming and customisation explainations (#148)
Browse files- docs/theming.md +316 -69
docs/theming.md
CHANGED
@@ -8,17 +8,17 @@ By default `websurfx` comes with 9 colorschemes to choose from which can be easi
|
|
8 |
|
9 |
Creating coloschemes is as easy as it gets it requires the user to have a theme file name with the colorscheme in which every space should be replaced with a `-` (dash) and it should end with a `.css` file extension. After creating the file you need to add the following code with the `colors` you want:
|
10 |
|
11 |
-
```
|
12 |
-
:root{
|
13 |
-
--
|
14 |
-
--
|
15 |
-
--
|
16 |
-
--
|
17 |
-
--
|
18 |
-
--
|
19 |
-
--
|
20 |
-
--
|
21 |
-
--
|
22 |
}
|
23 |
```
|
24 |
|
@@ -27,17 +27,17 @@ Creating coloschemes is as easy as it gets it requires the user to have a theme
|
|
27 |
|
28 |
**Example of `catppuccin-mocha` colorscheme:**
|
29 |
|
30 |
-
```
|
31 |
:root {
|
32 |
-
--
|
33 |
-
--
|
34 |
-
--
|
35 |
-
--
|
36 |
-
--
|
37 |
-
--
|
38 |
-
--
|
39 |
-
--
|
40 |
-
--
|
41 |
}
|
42 |
```
|
43 |
|
@@ -47,14 +47,15 @@ Creating coloschemes is as easy as it gets it requires the user to have a theme
|
|
47 |
|
48 |
By default `websurfx` comes with 1 theme to choose from which can be easily chosen using the config file. To how to change themes please view the [Configuration](https://github.com/neon-mmd/websurfx/wiki/configuration) section of the wiki.
|
49 |
|
50 |
-
## Custom
|
51 |
|
52 |
-
To write custom color scheme, it requires the user to have some knowledge of `css stylesheets`.
|
53 |
|
54 |
**Here is an example of `simple theme` (which we provide by default with the app) which will give the user a better idea on how to create a custom theme using it as a template:**
|
55 |
|
56 |
### General
|
57 |
-
|
|
|
58 |
* {
|
59 |
padding: 0;
|
60 |
margin: 0;
|
@@ -71,11 +72,13 @@ body {
|
|
71 |
justify-content: space-between;
|
72 |
align-items: center;
|
73 |
height: 100vh;
|
74 |
-
background: var(--
|
75 |
}
|
76 |
```
|
|
|
77 |
### Styles for the index page
|
78 |
-
|
|
|
79 |
.search-container {
|
80 |
display: flex;
|
81 |
flex-direction: column;
|
@@ -88,8 +91,10 @@ body {
|
|
88 |
display: flex;
|
89 |
}
|
90 |
```
|
|
|
91 |
### Styles for the search box and search button
|
92 |
-
|
|
|
93 |
.search_bar {
|
94 |
display: flex;
|
95 |
}
|
@@ -101,7 +106,7 @@ body {
|
|
101 |
outline: none;
|
102 |
border: none;
|
103 |
box-shadow: rgba(0, 0, 0, 1);
|
104 |
-
background: var(--
|
105 |
}
|
106 |
|
107 |
.search_bar button {
|
@@ -114,8 +119,8 @@ body {
|
|
114 |
outline: none;
|
115 |
border: none;
|
116 |
gap: 0;
|
117 |
-
background: var(--
|
118 |
-
color: var(--
|
119 |
font-weight: 600;
|
120 |
letter-spacing: 0.1rem;
|
121 |
}
|
@@ -125,10 +130,12 @@ body {
|
|
125 |
filter: brightness(1.2);
|
126 |
}
|
127 |
```
|
|
|
128 |
### Styles for the footer and header
|
129 |
-
|
|
|
130 |
header {
|
131 |
-
background: var(--
|
132 |
width: 100%;
|
133 |
display: flex;
|
134 |
justify-content: right;
|
@@ -151,7 +158,7 @@ footer ul li a,
|
|
151 |
header ul li a:visited,
|
152 |
footer ul li a:visited {
|
153 |
text-decoration: none;
|
154 |
-
color: var(--
|
155 |
text-transform: capitalize;
|
156 |
letter-spacing: 0.1rem;
|
157 |
}
|
@@ -162,7 +169,27 @@ header ul li a {
|
|
162 |
|
163 |
header ul li a:hover,
|
164 |
footer ul li a:hover {
|
165 |
-
color: var(--
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
166 |
}
|
167 |
|
168 |
footer div span {
|
@@ -185,8 +212,10 @@ footer {
|
|
185 |
align-items: center;
|
186 |
}
|
187 |
```
|
|
|
188 |
### Styles for the search page
|
189 |
-
|
|
|
190 |
.results {
|
191 |
width: 90%;
|
192 |
display: flex;
|
@@ -213,28 +242,28 @@ footer {
|
|
213 |
|
214 |
.results_aggregated .result h1 a {
|
215 |
font-size: 1.5rem;
|
216 |
-
color: var(--
|
217 |
text-decoration: none;
|
218 |
letter-spacing: 0.1rem;
|
219 |
}
|
220 |
|
221 |
.results_aggregated .result h1 a:hover {
|
222 |
-
color: var(--
|
223 |
}
|
224 |
|
225 |
.results_aggregated .result h1 a:visited {
|
226 |
-
color: var(--
|
227 |
}
|
228 |
|
229 |
.results_aggregated .result small {
|
230 |
-
color: var(--
|
231 |
font-size: 1.1rem;
|
232 |
word-wrap: break-word;
|
233 |
line-break: anywhere;
|
234 |
}
|
235 |
|
236 |
.results_aggregated .result p {
|
237 |
-
color: var(--
|
238 |
font-size: 1.2rem;
|
239 |
margin-top: 0.3rem;
|
240 |
word-wrap: break-word;
|
@@ -245,13 +274,13 @@ footer {
|
|
245 |
text-align: right;
|
246 |
font-size: 1.2rem;
|
247 |
padding: 1rem;
|
248 |
-
color: var(--
|
249 |
}
|
250 |
```
|
251 |
|
252 |
-
### Styles for the 404 page
|
253 |
|
254 |
-
```
|
255 |
.error_container {
|
256 |
display: flex;
|
257 |
justify-content: center;
|
@@ -290,16 +319,18 @@ footer {
|
|
290 |
|
291 |
.error_content p a,
|
292 |
.error_content p a:visited {
|
293 |
-
color: var(--
|
294 |
text-decoration: none;
|
295 |
}
|
296 |
|
297 |
.error_content p a:hover {
|
298 |
-
color: var(--
|
299 |
}
|
300 |
```
|
|
|
301 |
### Styles for the previous and next button on the search page
|
302 |
-
|
|
|
303 |
.page_navigation {
|
304 |
padding: 0 0 2rem 0;
|
305 |
display: flex;
|
@@ -308,8 +339,8 @@ footer {
|
|
308 |
}
|
309 |
|
310 |
.page_navigation button {
|
311 |
-
background: var(--
|
312 |
-
color: var(--
|
313 |
padding: 1rem;
|
314 |
border-radius: 0.5rem;
|
315 |
outline: none;
|
@@ -326,40 +357,256 @@ footer {
|
|
326 |
This part is only available right now in the **rolling/edge/unstable** version
|
327 |
|
328 |
```css
|
329 |
-
.about-container article{
|
330 |
-
|
331 |
-
|
332 |
-
|
333 |
-
|
334 |
|
335 |
-
.about-container article h1{
|
336 |
-
|
337 |
-
|
338 |
-
|
339 |
|
340 |
-
.about-container article div{
|
341 |
-
|
342 |
-
|
343 |
|
344 |
-
.about-container a{
|
345 |
-
color:var(--
|
346 |
}
|
347 |
|
348 |
-
.about-container article h2{
|
349 |
-
color: var(--
|
350 |
font-size: 1.8rem;
|
351 |
padding-bottom: 10px;
|
352 |
}
|
353 |
|
354 |
-
.about-container p{
|
355 |
-
color:var(--
|
356 |
-
font-size:
|
357 |
padding-bottom: 10px;
|
358 |
}
|
359 |
|
360 |
-
.about-container h3{
|
361 |
font-size: 1.5rem;
|
362 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
363 |
```
|
364 |
|
365 |
-
[β¬
οΈ
|
|
|
8 |
|
9 |
Creating coloschemes is as easy as it gets it requires the user to have a theme file name with the colorscheme in which every space should be replaced with a `-` (dash) and it should end with a `.css` file extension. After creating the file you need to add the following code with the `colors` you want:
|
10 |
|
11 |
+
```css
|
12 |
+
:root {
|
13 |
+
--background-color: <background color>;
|
14 |
+
--foreground-color: <foreground color (text color on the website) >;
|
15 |
+
--color-one: <color 1>;
|
16 |
+
--color-two: <color 2>;
|
17 |
+
--color-three: <color 3>;
|
18 |
+
--color-four: <color 4>;
|
19 |
+
--color-five: <color 5>;
|
20 |
+
--color-six: <color 6>;
|
21 |
+
--color-seven: <color 7>;
|
22 |
}
|
23 |
```
|
24 |
|
|
|
27 |
|
28 |
**Example of `catppuccin-mocha` colorscheme:**
|
29 |
|
30 |
+
```css
|
31 |
:root {
|
32 |
+
--background-color: #1e1e2e;
|
33 |
+
--foreground-color: #cdd6f4;
|
34 |
+
--color-one: #45475a;
|
35 |
+
--color-two: #f38ba8;
|
36 |
+
--color-three: #a6e3a1;
|
37 |
+
--color-four: #f9e2af;
|
38 |
+
--color-five: #89b4fa;
|
39 |
+
--color-six: #f5c2e7;
|
40 |
+
--color-seven: #ffffff;
|
41 |
}
|
42 |
```
|
43 |
|
|
|
47 |
|
48 |
By default `websurfx` comes with 1 theme to choose from which can be easily chosen using the config file. To how to change themes please view the [Configuration](https://github.com/neon-mmd/websurfx/wiki/configuration) section of the wiki.
|
49 |
|
50 |
+
## Custom
|
51 |
|
52 |
+
To write custom color scheme, it requires the user to have some knowledge of `css stylesheets`.
|
53 |
|
54 |
**Here is an example of `simple theme` (which we provide by default with the app) which will give the user a better idea on how to create a custom theme using it as a template:**
|
55 |
|
56 |
### General
|
57 |
+
|
58 |
+
```css
|
59 |
* {
|
60 |
padding: 0;
|
61 |
margin: 0;
|
|
|
72 |
justify-content: space-between;
|
73 |
align-items: center;
|
74 |
height: 100vh;
|
75 |
+
background: var(--color-one);
|
76 |
}
|
77 |
```
|
78 |
+
|
79 |
### Styles for the index page
|
80 |
+
|
81 |
+
```css
|
82 |
.search-container {
|
83 |
display: flex;
|
84 |
flex-direction: column;
|
|
|
91 |
display: flex;
|
92 |
}
|
93 |
```
|
94 |
+
|
95 |
### Styles for the search box and search button
|
96 |
+
|
97 |
+
```css
|
98 |
.search_bar {
|
99 |
display: flex;
|
100 |
}
|
|
|
106 |
outline: none;
|
107 |
border: none;
|
108 |
box-shadow: rgba(0, 0, 0, 1);
|
109 |
+
background: var(--foreground-color);
|
110 |
}
|
111 |
|
112 |
.search_bar button {
|
|
|
119 |
outline: none;
|
120 |
border: none;
|
121 |
gap: 0;
|
122 |
+
background: var(--background-color);
|
123 |
+
color: var(--color-three);
|
124 |
font-weight: 600;
|
125 |
letter-spacing: 0.1rem;
|
126 |
}
|
|
|
130 |
filter: brightness(1.2);
|
131 |
}
|
132 |
```
|
133 |
+
|
134 |
### Styles for the footer and header
|
135 |
+
|
136 |
+
```css
|
137 |
header {
|
138 |
+
background: var(--background-color);
|
139 |
width: 100%;
|
140 |
display: flex;
|
141 |
justify-content: right;
|
|
|
158 |
header ul li a:visited,
|
159 |
footer ul li a:visited {
|
160 |
text-decoration: none;
|
161 |
+
color: var(--color-two);
|
162 |
text-transform: capitalize;
|
163 |
letter-spacing: 0.1rem;
|
164 |
}
|
|
|
169 |
|
170 |
header ul li a:hover,
|
171 |
footer ul li a:hover {
|
172 |
+
color: var(--color-five);
|
173 |
+
}
|
174 |
+
|
175 |
+
footer div span {
|
176 |
+
font-size: 1.5rem;
|
177 |
+
color: var(--color-four);
|
178 |
+
}
|
179 |
+
|
180 |
+
footer div {
|
181 |
+
display: flex;
|
182 |
+
gap: 1rem;
|
183 |
+
}
|
184 |
+
|
185 |
+
footer {
|
186 |
+
background: var(--background-color);
|
187 |
+
width: 100%;
|
188 |
+
padding: 1rem;
|
189 |
+
display: flex;
|
190 |
+
flex-direction: column;
|
191 |
+
justify-content: center;
|
192 |
+
align-items: center;
|
193 |
}
|
194 |
|
195 |
footer div span {
|
|
|
212 |
align-items: center;
|
213 |
}
|
214 |
```
|
215 |
+
|
216 |
### Styles for the search page
|
217 |
+
|
218 |
+
```css
|
219 |
.results {
|
220 |
width: 90%;
|
221 |
display: flex;
|
|
|
242 |
|
243 |
.results_aggregated .result h1 a {
|
244 |
font-size: 1.5rem;
|
245 |
+
color: var(--color-two);
|
246 |
text-decoration: none;
|
247 |
letter-spacing: 0.1rem;
|
248 |
}
|
249 |
|
250 |
.results_aggregated .result h1 a:hover {
|
251 |
+
color: var(--color-five);
|
252 |
}
|
253 |
|
254 |
.results_aggregated .result h1 a:visited {
|
255 |
+
color: var(--background-color);
|
256 |
}
|
257 |
|
258 |
.results_aggregated .result small {
|
259 |
+
color: var(--color-three);
|
260 |
font-size: 1.1rem;
|
261 |
word-wrap: break-word;
|
262 |
line-break: anywhere;
|
263 |
}
|
264 |
|
265 |
.results_aggregated .result p {
|
266 |
+
color: var(--foreground-color);
|
267 |
font-size: 1.2rem;
|
268 |
margin-top: 0.3rem;
|
269 |
word-wrap: break-word;
|
|
|
274 |
text-align: right;
|
275 |
font-size: 1.2rem;
|
276 |
padding: 1rem;
|
277 |
+
color: var(--color-five);
|
278 |
}
|
279 |
```
|
280 |
|
281 |
+
### Styles for the 404 page
|
282 |
|
283 |
+
```css
|
284 |
.error_container {
|
285 |
display: flex;
|
286 |
justify-content: center;
|
|
|
319 |
|
320 |
.error_content p a,
|
321 |
.error_content p a:visited {
|
322 |
+
color: var(--color-two);
|
323 |
text-decoration: none;
|
324 |
}
|
325 |
|
326 |
.error_content p a:hover {
|
327 |
+
color: var(--color-five);
|
328 |
}
|
329 |
```
|
330 |
+
|
331 |
### Styles for the previous and next button on the search page
|
332 |
+
|
333 |
+
```css
|
334 |
.page_navigation {
|
335 |
padding: 0 0 2rem 0;
|
336 |
display: flex;
|
|
|
339 |
}
|
340 |
|
341 |
.page_navigation button {
|
342 |
+
background: var(--background-color);
|
343 |
+
color: var(--foreground-color);
|
344 |
padding: 1rem;
|
345 |
border-radius: 0.5rem;
|
346 |
outline: none;
|
|
|
357 |
This part is only available right now in the **rolling/edge/unstable** version
|
358 |
|
359 |
```css
|
360 |
+
.about-container article {
|
361 |
+
font-size: 1.5rem;
|
362 |
+
color: var(--foreground-color);
|
363 |
+
padding-bottom: 10px;
|
364 |
+
}
|
365 |
|
366 |
+
.about-container article h1 {
|
367 |
+
color: var(--color-two);
|
368 |
+
font-size: 2.8rem;
|
369 |
+
}
|
370 |
|
371 |
+
.about-container article div {
|
372 |
+
padding-bottom: 15px;
|
373 |
+
}
|
374 |
|
375 |
+
.about-container a {
|
376 |
+
color: var(--color-three);
|
377 |
}
|
378 |
|
379 |
+
.about-container article h2 {
|
380 |
+
color: var(--color-three);
|
381 |
font-size: 1.8rem;
|
382 |
padding-bottom: 10px;
|
383 |
}
|
384 |
|
385 |
+
.about-container p {
|
386 |
+
color: var(--foreground-color);
|
387 |
+
font-size: 1.6rem;
|
388 |
padding-bottom: 10px;
|
389 |
}
|
390 |
|
391 |
+
.about-container h3 {
|
392 |
font-size: 1.5rem;
|
393 |
}
|
394 |
+
|
395 |
+
.about-container {
|
396 |
+
width: 80%;
|
397 |
+
}
|
398 |
+
```
|
399 |
+
|
400 |
+
### Styles for the Settings Page
|
401 |
+
|
402 |
+
This part is only available right now in the **rolling/edge/unstable** version
|
403 |
+
|
404 |
+
```css
|
405 |
+
.settings_container {
|
406 |
+
display: flex;
|
407 |
+
justify-content: space-around;
|
408 |
+
width: 80dvw;
|
409 |
+
}
|
410 |
+
|
411 |
+
.settings h1 {
|
412 |
+
color: var(--color-two);
|
413 |
+
font-size: 2.5rem;
|
414 |
+
}
|
415 |
+
|
416 |
+
.settings hr {
|
417 |
+
border-color: var(--color-three);
|
418 |
+
margin: 0.3rem 0 1rem 0;
|
419 |
+
}
|
420 |
+
|
421 |
+
.settings_container .sidebar {
|
422 |
+
width: 30%;
|
423 |
+
cursor: pointer;
|
424 |
+
font-size: 2rem;
|
425 |
+
display: flex;
|
426 |
+
flex-direction: column;
|
427 |
+
margin-right: 0.5rem;
|
428 |
+
margin-left: -0.7rem;
|
429 |
+
padding: 0.7rem;
|
430 |
+
border-radius: 5px;
|
431 |
+
font-weight: bold;
|
432 |
+
margin-bottom: 0.5rem;
|
433 |
+
color: var(--foreground-color);
|
434 |
+
text-transform: capitalize;
|
435 |
+
gap: 1.5rem;
|
436 |
+
}
|
437 |
+
|
438 |
+
.settings_container .sidebar .btn {
|
439 |
+
padding: 0.5rem;
|
440 |
+
border-radius: 0.5rem;
|
441 |
+
}
|
442 |
+
|
443 |
+
.settings_container .sidebar .btn.active {
|
444 |
+
background-color: var(--color-two);
|
445 |
+
}
|
446 |
+
|
447 |
+
.settings_container .main_container {
|
448 |
+
width: 70%;
|
449 |
+
border-left: 1.5px solid var(--color-three);
|
450 |
+
padding-left: 3rem;
|
451 |
+
}
|
452 |
+
|
453 |
+
.settings_container .tab {
|
454 |
+
display: none;
|
455 |
+
}
|
456 |
+
|
457 |
+
.settings_container .tab.active {
|
458 |
+
display: flex;
|
459 |
+
flex-direction: column;
|
460 |
+
justify-content: space-around;
|
461 |
+
}
|
462 |
+
|
463 |
+
.settings_container button {
|
464 |
+
margin-top: 1rem;
|
465 |
+
padding: 1rem 2rem;
|
466 |
+
font-size: 1.5rem;
|
467 |
+
background: var(--color-three);
|
468 |
+
color: var(--background-color);
|
469 |
+
border-radius: 0.5rem;
|
470 |
+
border: 2px solid transparent;
|
471 |
+
font-weight: bold;
|
472 |
+
transition: all 0.1s ease-out;
|
473 |
+
cursor: pointer;
|
474 |
+
box-shadow: 5px 5px;
|
475 |
+
outline: none;
|
476 |
+
}
|
477 |
+
|
478 |
+
.settings_container button:active {
|
479 |
+
box-shadow: none;
|
480 |
+
translate: 5px 5px;
|
481 |
+
}
|
482 |
+
|
483 |
+
.settings_container .main_container .message {
|
484 |
+
font-size: 1.5rem;
|
485 |
+
color: var(--foreground-color);
|
486 |
+
}
|
487 |
+
|
488 |
+
.settings_container .tab h3 {
|
489 |
+
font-size: 2rem;
|
490 |
+
font-weight: bold;
|
491 |
+
color: var(--color-four);
|
492 |
+
margin-top: 1.5rem;
|
493 |
+
text-transform: capitalize;
|
494 |
+
}
|
495 |
+
|
496 |
+
.settings_container .tab .description {
|
497 |
+
font-size: 1.5rem;
|
498 |
+
margin-bottom: 0.5rem;
|
499 |
+
color: var(--foreground-color);
|
500 |
+
}
|
501 |
+
|
502 |
+
.settings_container .user_interface select {
|
503 |
+
margin: 0.7rem 0;
|
504 |
+
width: 20rem;
|
505 |
+
background-color: var(--background-color);
|
506 |
+
color: var(--foreground-color);
|
507 |
+
padding: 1rem 2rem;
|
508 |
+
border-radius: 0.5rem;
|
509 |
+
outline: none;
|
510 |
+
border: none;
|
511 |
+
text-transform: capitalize;
|
512 |
+
}
|
513 |
+
|
514 |
+
.settings_container .user_interface option:hover {
|
515 |
+
background-color: var(--color-one);
|
516 |
+
}
|
517 |
+
|
518 |
+
.settings_container .engines .engine_selection {
|
519 |
+
display: flex;
|
520 |
+
flex-direction: column;
|
521 |
+
justify-content: center;
|
522 |
+
gap: 1rem;
|
523 |
+
padding: 1rem 0;
|
524 |
+
}
|
525 |
+
|
526 |
+
.settings_container .engines .toggle_btn {
|
527 |
+
color: var(--foreground-color);
|
528 |
+
font-size: 1.5rem;
|
529 |
+
display: flex;
|
530 |
+
gap: 0.5rem;
|
531 |
+
align-items: center;
|
532 |
+
}
|
533 |
+
|
534 |
+
.settings_container .engines hr {
|
535 |
+
margin: 0;
|
536 |
+
}
|
537 |
+
|
538 |
+
.settings_container .cookies input {
|
539 |
+
margin: 1rem 0rem;
|
540 |
+
}
|
541 |
+
```
|
542 |
+
|
543 |
+
### Styles for the Toggle Button
|
544 |
+
|
545 |
+
This part is only available right now in the **rolling/edge/unstable** version
|
546 |
+
|
547 |
+
```css
|
548 |
+
/* The switch - the box around the slider */
|
549 |
+
.switch {
|
550 |
+
position: relative;
|
551 |
+
display: inline-block;
|
552 |
+
width: 6rem;
|
553 |
+
height: 3.4rem;
|
554 |
+
}
|
555 |
+
|
556 |
+
/* Hide default HTML checkbox */
|
557 |
+
.switch input {
|
558 |
+
opacity: 0;
|
559 |
+
width: 0;
|
560 |
+
height: 0;
|
561 |
+
}
|
562 |
+
|
563 |
+
/* The slider */
|
564 |
+
.slider {
|
565 |
+
position: absolute;
|
566 |
+
cursor: pointer;
|
567 |
+
top: 0;
|
568 |
+
left: 0;
|
569 |
+
right: 0;
|
570 |
+
bottom: 0;
|
571 |
+
background-color: var(--background-color);
|
572 |
+
-webkit-transition: 0.4s;
|
573 |
+
transition: 0.4s;
|
574 |
+
}
|
575 |
+
|
576 |
+
.slider:before {
|
577 |
+
position: absolute;
|
578 |
+
content: '';
|
579 |
+
height: 2.6rem;
|
580 |
+
width: 2.6rem;
|
581 |
+
left: 0.4rem;
|
582 |
+
bottom: 0.4rem;
|
583 |
+
background-color: var(--foreground-color);
|
584 |
+
-webkit-transition: 0.4s;
|
585 |
+
transition: 0.4s;
|
586 |
+
}
|
587 |
+
|
588 |
+
input:checked + .slider {
|
589 |
+
background-color: var(--color-three);
|
590 |
+
}
|
591 |
+
|
592 |
+
input:focus + .slider {
|
593 |
+
box-shadow: 0 0 1px var(--color-three);
|
594 |
+
}
|
595 |
+
|
596 |
+
input:checked + .slider:before {
|
597 |
+
-webkit-transform: translateX(2.6rem);
|
598 |
+
-ms-transform: translateX(2.6rem);
|
599 |
+
transform: translateX(2.6rem);
|
600 |
+
}
|
601 |
+
|
602 |
+
/* Rounded sliders */
|
603 |
+
.slider.round {
|
604 |
+
border-radius: 3.4rem;
|
605 |
+
}
|
606 |
+
|
607 |
+
.slider.round:before {
|
608 |
+
border-radius: 50%;
|
609 |
+
}
|
610 |
```
|
611 |
|
612 |
+
[β¬
οΈ Go back to Home](./README.md)
|