diff --git a/backend/static/css/30-download.css b/backend/static/css/30-download.css index 76c9339..8faa19a 100644 --- a/backend/static/css/30-download.css +++ b/backend/static/css/30-download.css @@ -367,6 +367,20 @@ color: var(--muted-foreground); } +.archive-svg-icon, +.archive-retro-icon { + display: inline-grid; + place-items: center; + width: 100%; + height: 100%; +} + +.archive-retro-icon { + display: none; + object-fit: contain; + image-rendering: pixelated; +} + .archive-file-icon svg, .archive-chevron svg { fill: none; @@ -408,6 +422,92 @@ color: #f8fafc; } +[data-theme="retro"] .archive-browser-preview { + border: 1px solid #000000; + background: #ffffff; + color: #000000; + box-shadow: + inset -1px -1px 0 #808080, + inset 1px 1px 0 #ffffff; +} + +[data-theme="retro"] .archive-browser-header { + border-bottom: 1px solid #808080; + background: #c0c0c0; + color: #000000; + box-shadow: + inset -1px -1px 0 #808080, + inset 1px 1px 0 #ffffff; +} + +[data-theme="retro"] .archive-browser-header span { + color: #404040; +} + +[data-theme="retro"] .archive-tree { + background: #ffffff; + font-family: "PixelOperatorMono", "Courier New", monospace; +} + +[data-theme="retro"] .archive-node-row { + min-height: 1.8rem; + border-radius: 0; + color: #000000; +} + +[data-theme="retro"] .archive-node-row:hover { + background: #000078; + color: #ffffff; +} + +[data-theme="retro"] .archive-node-size { + color: #404040; +} + +[data-theme="retro"] .archive-node-row:hover .archive-node-size { + color: #ffffff; +} + +[data-theme="retro"] .archive-chevron { + color: #000000; +} + +[data-theme="retro"] .archive-folder[open] > summary .archive-chevron { + color: #000078; +} + +[data-theme="retro"] .archive-node-row:hover .archive-chevron, +[data-theme="retro"] .archive-node-row:hover .archive-file-icon { + color: #ffffff; +} + +[data-theme="retro"] .archive-chevron svg { + width: 1.35rem; + height: 1.35rem; + stroke-width: 2.4; +} + +[data-theme="retro"] .archive-file-icon { + width: 1.45rem; + height: 1.45rem; + color: #000000; +} + +[data-theme="retro"] .archive-svg-icon { + display: none; +} + +[data-theme="retro"] .archive-retro-icon { + display: block; +} + +[data-theme="retro"] .archive-browser-empty, +[data-theme="retro"] .archive-browser-legacy { + color: #000000; + background: #ffffff; + font-family: "PixelOperatorMono", "Courier New", monospace; +} + .archive-node-name { min-width: 0; overflow-wrap: anywhere; diff --git a/backend/static/file-icons/retro/directory_open_file_mydocs-4.png b/backend/static/file-icons/retro/directory_open_file_mydocs-4.png new file mode 100644 index 0000000..5852574 Binary files /dev/null and b/backend/static/file-icons/retro/directory_open_file_mydocs-4.png differ diff --git a/backend/static/js/45-preview.js b/backend/static/js/45-preview.js index d6aa1bd..b893b26 100644 --- a/backend/static/js/45-preview.js +++ b/backend/static/js/45-preview.js @@ -707,7 +707,17 @@ var element = document.createElement("span"); element.className = "archive-file-icon archive-file-icon-" + icon; element.setAttribute("aria-hidden", "true"); - element.innerHTML = archiveIconSVG(icon); + element.innerHTML = '' + archiveIconSVG(icon) + ''; + var retroURL = archiveRetroIconURL(icon); + if (retroURL) { + var retro = document.createElement("img"); + retro.className = "archive-retro-icon"; + retro.src = retroURL; + retro.alt = ""; + retro.decoding = "async"; + retro.loading = "lazy"; + element.appendChild(retro); + } return element; } @@ -758,6 +768,21 @@ return icons[icon] || icons.file; } + function archiveRetroIconURL(icon) { + var base = "/static/file-icons/retro/"; + var icons = { + folder: "directory_open_file_mydocs-4.png", + img: "shimgvw.dll_14_1-2.png", + vid: "wmploc.dll_14_504-2.png", + aud: "wmploc.dll_14_610-2.png", + txt: "shell32.dll_14_151-2.png", + code: "mshtml.dll_14_2660-2.png", + arc: "zipfldr.dll_14_101-2.png", + file: "shell32.dll_14_152-2.png" + }; + return base + (icons[icon] || icons.file); + } + function formatArchiveCount(value, label) { value = Number(value || 0); return value + " " + label + (value === 1 ? "" : "s");