refactor(download): migrate inline SVGs to CSS mask-based icons

Replaces inline SVG elements in the download template with a reusable
CSS mask-based icon system. This reduces HTML bloat and centralizes
icon management.

- Added a generic `.svg-icon` utility class using CSS masks.
- Defined specific icon classes mapping to static SVG assets.
- Updated `download.html` to use `<span>` tags with the new icon classes.
- Adjusted CSS selectors in retro and download stylesheets to target `.svg-icon`.
This commit is contained in:
2026-06-08 12:08:51 +03:00
parent af1fae1a98
commit ead4cd7492
3 changed files with 65 additions and 23 deletions

View File

@@ -655,7 +655,7 @@
padding: 0;
}
:root[data-theme="retro"] .view-toolbar .icon-button svg {
:root[data-theme="retro"] .view-toolbar .icon-button .svg-icon {
margin: 0;
display: block;
}

View File

@@ -678,7 +678,54 @@
color: var(--muted-foreground);
}
.file-emblem svg {
.svg-icon {
width: 1rem;
height: 1rem;
display: inline-block;
flex: 0 0 auto;
background-color: currentColor;
vertical-align: -0.125em;
mask: var(--svg-icon-url) center / contain no-repeat;
-webkit-mask: var(--svg-icon-url) center / contain no-repeat;
}
.svg-icon-document {
--svg-icon-url: url("/static/icons/regular/submit-document.svg");
}
.svg-icon-share {
--svg-icon-url: url("/static/icons/regular/share-android.svg");
}
.svg-icon-download {
--svg-icon-url: url("/static/icons/regular/download.svg");
}
.svg-icon-list {
--svg-icon-url: url("/static/icons/regular/list.svg");
}
.svg-icon-grid {
--svg-icon-url: url("/static/icons/regular/view-grid.svg");
}
.svg-icon-emoji {
--svg-icon-url: url("/static/icons/regular/emoji.svg");
}
.svg-icon-open {
--svg-icon-url: url("/static/icons/regular/open-in-browser.svg");
}
.svg-icon-copy {
--svg-icon-url: url("/static/icons/regular/copy.svg");
}
.svg-icon-eye {
--svg-icon-url: url("/static/icons/regular/eye.svg");
}
.file-emblem .svg-icon {
width: 1.75rem;
height: 1.75rem;
}
@@ -828,7 +875,7 @@
justify-content: center;
}
.view-toolbar svg {
.view-toolbar .svg-icon {
width: 0.95rem;
height: 0.95rem;
}
@@ -997,14 +1044,9 @@
pointer-events: auto;
}
.reaction-button svg {
.reaction-button .svg-icon {
width: 1.15rem;
height: 1.15rem;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.file-card:hover .reaction-button,