frontend: nicer
Massimo Melina committed
Feb 17, 2023 at 16:35 UTC
dd0d4a08c21adf4e642d5ac63b8c70fdcdfa4465
1 file changed
+8
-3
frontend/src/index.scss
+8
-3
@@ -24,6 +24,7 @@
24
}
25
.dialog-backdrop { background: #333b; }
26
.error-msg { color: #b88; background-color: #623; }
27
+ button.toggled { color: #eee; }
28
}
29
}
30
body {
@@ -88,7 +89,8 @@ button {
89
cursor: pointer;
90
}
91
button.toggled {
91
- filter: brightness(.8);
92
+ color: #444;
93
+ text-shadow: 0 0 2px var(--good-contrast);
94
}
95
button, .breadcrumb { /* consistent focus color */
96
&:focus-visible {
@@ -184,9 +186,10 @@ header {
186
align-items: center;
187
gap: .8em;
188
margin: 0.2em 0 0;
187
- padding-left: 11px;
189
+ padding: 2px 0 1px 11px;
190
height: 1.8em; /* necessary to animate displaying */
191
& input[type=checkbox] { margin-top: .5em; }
192
+ & span:empty { display:none } /* avoid flex-gap */
193
}
194
195
ul.dir {
@@ -304,11 +307,13 @@ button label {
307
gap: .1em;
308
background: var(--bg);
309
&,&>button {
307
- box-shadow: 0 0 .3em .3em var(--bg);
310
+ box-shadow: 0 0 .3em .3em #0003;
311
z-index: 1; /* make shadow visible also when page-first button is not selected */
312
}
313
padding: 0 0.2em 0.2em;
314
& #paging-middle {
315
+ padding: 0 0.5em;
316
+ margin: 0 -0.3em;
317
display: flex;
318
gap: .5em;
319
flex: 1;