diff --git a/internal/server/web/templates/files.html b/internal/server/web/templates/files.html index 516fdf0..ce3edc8 100644 --- a/internal/server/web/templates/files.html +++ b/internal/server/web/templates/files.html @@ -19,6 +19,23 @@ .spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; display:none; } @keyframes spin { to { transform:rotate(360deg); } } + /* Busy indicator; while files upload it also shows how far they got, and a + click on it lists them. */ + .busy { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0 4px; + height:34px; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; cursor:default; } + .busy:hover { background:none; } + .busy.up { cursor:pointer; color:var(--text); } + .busy.up:hover { color:var(--accent); } + #updlg { max-width:480px; } + .upl-item { padding:8px 0; border-bottom:1px solid var(--border); } + .upl-item:last-child { border-bottom:0; } + .upl-row { display:flex; gap:12px; justify-content:space-between; font-size:14px; } + .upl-row .n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } + .upl-row .st { flex:none; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; } + .upl-row .st.ok { color:var(--ok); } + .upl-row .st.bad { color:var(--danger); } + .upl-bar { height:4px; margin-top:6px; border-radius:2px; background:#0c0f13; overflow:hidden; } + .upl-bar i { display:block; height:100%; background:var(--accent); transform-origin:left; transition:transform .2s; } #drop { border:1px dashed var(--border); border-radius:10px; } #drop.drag { border-color:var(--accent); background:#12202f; } table.fm td, table.fm th { padding:7px 8px; } @@ -29,7 +46,7 @@ .act { display:flex; gap:6px; justify-content:flex-end; } table.fm .c-sz { width:120px; } table.fm .c-mt { width:160px; } - table.fm .c-act { width:200px; } + table.fm .c-act { width:160px; } .fm .nm { overflow-wrap:anywhere; } /* Phones: no date column, and the row buttons only as wide as they are. */ @media (max-width: 640px) { @@ -71,7 +88,7 @@
- +
@@ -109,6 +126,14 @@
+ +
+ Загрузка файлов + +
+
+
+