better code
Massimo Melina committed
Jul 29, 2023 at 17:23 UTC
7f7fba1b4423c1c26d61d970712209603d59814e
1 file changed
+28
-30
frontend/src/index.scss
+28
-30
@@ -203,7 +203,7 @@ header {
203
#folder-stats {
204
margin: 0.5em 0 0 0.5em;
205
float: right;
206
- & .icon {
206
+ .icon {
207
margin-right: .3em;
208
}
209
}
@@ -218,8 +218,8 @@ header {
218
margin: 0.2em 0 0;
219
padding: 2px 0 1px 3px;
220
height: 1.8em; /* necessary to animate displaying */
221
- & input[type=checkbox] { margin-top: .3em; }
222
- & span:empty { display:none } /* avoid flex-gap */
221
+ input[type=checkbox] { margin-top: .3em; }
222
+ span:empty { display:none } /* avoid flex-gap */
223
}
224
225
ul.dir {
@@ -228,25 +228,25 @@ ul.dir {
228
margin: 0;
229
clear: both;
230
&>p { text-align: center; }
231
- & li {
231
+ li {
232
display: block;
233
list-style-type: none;
234
padding: 0.3em 0.3em 0.4em;
235
border-bottom: 1px solid var(--faint-contrast);
236
&:nth-of-type(odd) { background-color: var(--ghost-contrast); }
237
238
- & input[type=checkbox] {
238
+ input[type=checkbox] {
239
margin-right: 1em;
240
}
241
- & .link-wrapper {
241
+ .link-wrapper {
242
&:not(:hover) .popup-menu-button { display: none; }
243
&:hover { padding: 1em; margin: -1em; } // add margin to avoid leaving the hover unintentionally
244
- & a {
244
+ a {
245
&:last-of-type {
246
word-break: break-word;
247
padding-right: 0.3em;
248
}
249
- & .icon {
249
+ .icon {
250
margin-right: .5em;
251
// give similar aligning to <img> icons
252
vertical-align: text-bottom;
@@ -258,21 +258,21 @@ ul.dir {
258
}
259
}
260
}
261
- & .entry-panel {
261
+ .entry-panel {
262
float: right;
263
padding-top: 0.3em;
264
display: flex;
265
align-items: center;
266
- & .file-menu-button {
266
+ .file-menu-button {
267
@extend .icon-button;
268
margin: -3px 0 -3px 0.4em;
269
}
270
- & .entry-details {
270
+ .entry-details {
271
font-size: 90%;
272
margin-left: 4px;
273
font-variant-numeric: tabular-nums; /* trick to get stuff aligned */
274
275
- & .entry-size-unit {
275
+ .entry-size-unit {
276
margin-left: .3em;
277
}
278
}
@@ -304,7 +304,7 @@ ul.dir {
304
&:first-child { margin-left: 0 }
305
&:last-child { margin-right: 0 }
306
}
307
- & button {
307
+ button {
308
padding: min(1vh, 0.5em) 0; // avoid wasting too much vertical space, and no need for horizontal padding as we are using flex to grow
309
}
310
}
@@ -315,7 +315,7 @@ ul.dir {
315
display:flex;
316
flex-direction: column;
317
gap: 1em;
318
- & a>button {
318
+ a>button {
319
width: 100%;
320
}
321
}
@@ -334,7 +334,7 @@ button label {
334
}
335
.dialog-alert .dialog-content {
336
text-align: center;
337
- & p { text-align: left; display: inline-block; }
337
+ p { text-align: left; display: inline-block; }
338
}
339
340
.dialog {
@@ -355,8 +355,8 @@ button label {
355
background-color: var(--bg);
356
padding: 0 0.2em 0.2em;
357
&>button { z-index: 1; }
358
- & button { box-shadow: 0 0 .3em .3em #0003; }
359
- & #paging-middle {
358
+ button { box-shadow: 0 0 .3em .3em #0003; }
359
+ #paging-middle {
360
padding: 0 0.5em;
361
margin: 0 -0.3em;
362
display: flex;
@@ -364,11 +364,11 @@ button label {
364
flex: 1;
365
overflow-x: auto;
366
}
367
- & #paging-middle>button {
367
+ #paging-middle>button {
368
flex: 1;
369
padding-top: 0; padding-bottom: 0; /* reduce vertically in case a horizontal scrolling bar is needed */
370
}
371
- & button {
371
+ button {
372
background: var(--button-bg);
373
text-align: center;
374
white-space: nowrap;
@@ -390,9 +390,9 @@ button label {
390
margin-left: 0.5em;
391
}
392
.upload-list {
393
- & td:nth-child(1) { width: 0; }
394
- & td:nth-child(2) { text-align: right; width: 0; white-space: nowrap; padding-left: 0.5em; }
395
- & td:nth-child(3) { padding: .2em .5em; word-break: break-word; }
393
+ td:nth-child(1) { width: 0; }
394
+ td:nth-child(2) { text-align: right; width: 0; white-space: nowrap; padding-left: 0.5em; }
395
+ td:nth-child(3) { padding: .2em .5em; word-break: break-word; }
396
}
397
398
.dialog-login {
@@ -420,8 +420,8 @@ button label {
420
word-break: break-word;
421
line-height: 1.5em;
422
margin: 0;
423
- & dt { font-weight: bold; }
424
- & dd { margin-left: 1.5em; }
423
+ dt { font-weight: bold; }
424
+ dd { margin-left: 1.5em; }
425
}
426
.file-menu {
427
margin-top: 1em;
@@ -431,7 +431,7 @@ button label {
431
display: flex;
432
flex-direction: column;
433
gap: 1em;
434
- & a {
434
+ a {
435
display: flex;
436
align-items: flex-start;
437
label {
@@ -607,10 +607,8 @@ button label {
607
@media (min-width: 42em) {
608
body {
609
/* Works on Firefox */
610
- & {
611
- scrollbar-width: thin;
612
- scrollbar-color: var(--button-bg) var(--ghost-contrast);
613
- }
610
+ scrollbar-width: thin;
611
+ scrollbar-color: var(--button-bg) var(--ghost-contrast);
612
613
/* Works on Chrome, Edge, and Safari */
614
&::-webkit-scrollbar {
@@ -630,7 +628,7 @@ button label {
628
:root { --ghost-contrast: #8883; } /* phones have different curve */
629
body, button, select { font-size: 14pt; }
630
#menu-bar, #filter-bar {
633
- & button label { display: none } /* icons only */
631
+ button label { display: none } /* icons only */
632
}
633
#filter-bar {
634
margin-top: 0.4em;