glass effect for dialogs
Massimo Melina committed
Apr 21, 2023 at 16:45 UTC
a3c0a1185921f0d32328d45fc96229eda283499d
3 files changed
+14
-6
frontend/src/dialog.css
+2
-1
@@ -4,7 +4,8 @@
4
bottom: 0;
5
left: 0;
6
right: 0;
7
- background: #888a;
7
+ background: #8886;
8
+ backdrop-filter: blur(2px);
9
display: flex;
10
justify-content: center;
11
align-items: center;
frontend/src/index.scss
+9
-2
@@ -135,11 +135,13 @@ input, select, ul a {
135
color: #833;
136
padding: .5em 1em;
137
}
138
-
138
+.hide-back {
139
+ background-color: var(--bg);
140
+}
141
header {
142
+ @extend .hide-back;
143
position: sticky;
144
top: 0;
142
- background-color: var(--bg);
145
padding: .2em;
146
z-index: 1; /* necessary to not be covered by checkboxes */
147
}
@@ -358,6 +360,11 @@ button label {
360
}
361
}
362
363
+.upload-toolbar {
364
+ @extend .hide-back;
365
+ position: sticky;
366
+ top: -4px;
367
+}
368
.upload-progress::before { content: var(--separator); }
369
.entry-size::after { content: var(--separator) }
370
frontend/src/upload.ts
+3
-3
@@ -89,10 +89,10 @@ export function showUpload() {
89
const etaStr = useMemo(() => !eta ? '' : formatTime(eta*1000, 0, 2), [eta])
90
const size = formatBytes(files.reduce((a, f) => a + f.size, 0))
91
92
- return h(FlexV, { props: acceptDropFiles(x => setFiles([ ...files, ...x ])) },
93
- h(FlexV, { position: 'sticky', top: -4, background: 'var(--bg)' },
92
+ return h(FlexV, { gap: 0, props: acceptDropFiles(x => setFiles([ ...files, ...x ])) },
93
+ h(FlexV, { props: { className: 'upload-toolbar' } },
94
!can_upload ? t('no_upload_here', "No upload permission for the current folder")
95
- : h(Flex, { justifyContent: 'center', flexWrap: 'wrap', marginTop: '1em' },
95
+ : h(Flex, { justifyContent: 'center', flexWrap: 'wrap', margin: '1em 0' },
96
h('button', {
97
className: 'upload-files',
98
onClick: () => pickFiles({ accept: normalizeAccept(accept) })