From a454e4239f72b0cc3bcbc1400bed2b0c41c4122a Mon Sep 17 00:00:00 2001 From: Daniel Legt Date: Mon, 8 Jun 2026 03:50:14 +0300 Subject: [PATCH] feat(archive): add retro theme support to archive browser Implement retro-themed styling and classic pixelated icons for the archive browser when the "retro" theme is active. Changes include: - Adding CSS overrides for `[data-theme="retro"]` to style the archive browser container, tree nodes, and hover states. - Updating the JS preview script to dynamically append retro image icons (e.g., classic shell32/zipfldr icons) alongside SVGs. - Toggling visibility between SVG and retro image icons using CSS based on the active theme. --- backend/static/css/30-download.css | 100 ++++++++++++++++++ .../retro/directory_open_file_mydocs-4.png | Bin 0 -> 695 bytes backend/static/js/45-preview.js | 27 ++++- 3 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 backend/static/file-icons/retro/directory_open_file_mydocs-4.png 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 0000000000000000000000000000000000000000..5852574a757435f701e5405683dba1afd4ae2efd GIT binary patch literal 695 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA3?vioaBc-sEa{HEjtmSN`?>!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)pT}UnMXwSj}Ky5HFasE6@fgVHw~P;tHhO+S-(ql>Yzz zaNxj!A3uIHG%)=CKl99)w3#y*o@M?NdG>=ji9gJH<@Ntw{?jF~{H3U2o!|P7 z4gaN;e&%;Rz4UayqL^3I*8ScU|4$WNyRVq_|68fI&er zxk80`ME=DZstPu?)o(Y|3HW6$ts}rz@c0;4*vIpqM4oc;?kG&Fl>Yz3HAID_!2gH~ z%bhO{M~)n1C}rJw@cRkVDuy>wEgVOrL>ZEwNGFOuS}xA16}Tghaf9jf58@MUZ)4~Z zH4Z5YdYLMbJwo--xB%4^}BnmMcuLX$aS5=KRbXWXiLtrs$UVxN9F{^wG+^-fvLRg11Le8~))m3C|PeEkPE z=g$m2P+)iIgZN*j$h&5V_mT{%fsvtF;u=wsl30>zm0Xkxq!^403@vmG%yf-RLX3>9 t42-Qzjdcx7tPBiJdf)X&(U6;;l9^VCTf+{q)X$*!_H^}gS?83{1OWcW3BCXT literal 0 HcmV?d00001 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");