frontend: stripes
Massimo Melina committed
Feb 10, 2023 at 15:52 UTC
5d8437d27859418961f85b7c501601cfb9245ad4
1 file changed
+17
-14
frontend/src/index.scss
+17
-14
@@ -3,8 +3,9 @@
3
4
--bg: #fff;
5
--text: #555;
6
- --faint-contrast: #0002;
7
- --mild-contrast: #0005;
6
+ --ghost-contrast: #8882;
7
+ --faint-contrast: #8884;
8
+ --mild-contrast: #8886;
9
--good-contrast: #000a;
10
--button-bg: #68a;
11
--button-text: #fff;
@@ -12,8 +13,6 @@
13
.theme-dark {
14
--bg: #000;
15
--text: #999;
15
- --faint-contrast: #fff2;
16
- --mild-contrast: #fff5;
16
--good-contrast: #fffa;
17
--button-bg: #345;
18
--button-text: #999;
@@ -178,9 +177,9 @@ ul.dir {
177
& li {
178
display: block;
179
list-style-type: none;
181
- margin-bottom: 0.1em;
182
- padding: 0.3em;
183
- border-top: 1px solid var(--button-bg);
180
+ padding: 0.3em 0.3em 0.4em;
181
+ border-bottom: 1px solid var(--faint-contrast);
182
+ &:nth-of-type(odd) { background-color: var(--ghost-contrast); }
183
184
& input[type=checkbox] {
185
margin: 0 .8em;
@@ -210,17 +209,20 @@ ul.dir {
209
}
210
}
211
&.page-separator {
213
- border-top: 4px dashed var(--button-bg);
212
margin-top: 1em;
215
- padding-top: 1em;
213
position: relative;
214
&::before {
215
content: attr(label);
216
position: absolute;
220
- top: -.8em;
217
+ top: -1.5em;
218
+ width: 50%;
219
+ padding-left: 50%;
220
background: var(--bg);
222
- padding: 0 .5em;
221
+ background: linear-gradient(0deg, var(--bg) 40%, var(--button-bg) 50%, var(--bg) 60%);
222
font-size: smaller;
223
+ margin-left: -0.3em;
224
+ filter: brightness(.7);
225
+ text-shadow: 0 0 6px var(--bg);
226
}
227
}
228
}
@@ -335,7 +337,7 @@ button label {
337
/* Works on Firefox */
338
* {
339
scrollbar-width: thin;
338
- scrollbar-color: var(--button-bg) var(--faint-contrast);
340
+ scrollbar-color: var(--button-bg) var(--ghost-contrast);
341
}
342
343
/* Works on Chrome, Edge, and Safari */
@@ -343,15 +345,16 @@ button label {
345
width: 12px;
346
}
347
*::-webkit-scrollbar-track {
346
- background: var(--faint-contrast);
348
+ background: var(--ghost-contrast);
349
}
350
*::-webkit-scrollbar-thumb {
351
background-color: var(--button-bg);
352
border-radius: 20px;
351
- border: 1px solid var(--faint-contrast)
353
+ border: 1px solid var(--ghost-contrast)
354
}
355
356
@media (max-width: 42em) {
357
+ :root { --ghost-contrast: #8883; } /* phones have different curve */
358
body, button, select { font-size: 14pt; }
359
#menu-bar, #filter-bar {
360
& button label { display: none } /* icons only */