nebula-project/NebulaBrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Refactor SVGs to use CSS masks

Browse Source 
Replace inline SVG markup with external icon files using CSS mask-based rendering. This approach reduces HTML duplication, enables dynamic color tinting via currentColor, and improves maintainability by centralizing icon definitions. Updates favicon rendering in chrome.js, icon styling in CSS files, and converts icon elements across 404, insecure, and settings pages. Also updates settings page favicon and GitHub link URL.
This commit is contained in:
Andrew Zambazos
2026-07-13 19:16:51 +12:00
parent 96cf0d9763
commit fbd8a555ec
16 changed files with 151 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/pages/404.html
+4 -3
View File
@@ -13,12 +13,13 @@
.card { max-width:780px; width:100%; background:linear-gradient(145deg,#1c1c1c,#242424); border:1px solid #2c2c2c; border-radius:20px; padding:40px 46px 48px; box-shadow:0 8px 28px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,0.04); position:relative; overflow:hidden; }
.card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 15%,rgba(255,255,255,.08),transparent 55%), radial-gradient(circle at 82% 78%,rgba(255,255,255,.05),transparent 60%); pointer-events:none; }
h1 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); margin:0 0 12px; letter-spacing:-.5px; display:flex; align-items:center; gap:.6rem; }
h1 svg { width:28px; height:28px; flex-shrink:0; }
h1 img.page-icon,
h1 .page-icon { width:28px; height:28px; flex-shrink:0; display:inline-block; background-color:currentColor; -webkit-mask:url("../assets/icons/alert-circle.svg") center / contain no-repeat; mask:url("../assets/icons/alert-circle.svg") center / contain no-repeat; }
h1 span.badge { font-size:12px; letter-spacing:1px; padding:4px 8px; border:1px solid var(--danger); color:var(--danger); border-radius:999px; text-transform:uppercase; background:rgba(220,38,38,0.1); }
p.lede { font-size:1.05rem; line-height:1.55; margin:0 0 22px; color:var(--muted); }
code { background:#252525; padding:3px 6px; border-radius:6px; font-size:.9rem; color:#e0e0e0; }
.url-box { font-family:monospace; font-size:.92rem; padding:10px 12px; background:#181818; border:1px solid #2a2a2a; border-radius:10px; word-break:break-all; margin:0 0 22px; display:flex; align-items:center; gap:.75rem; }
.url-box svg { flex:0 0 auto; width:22px; height:22px; stroke:var(--danger); }
.url-box img { flex:0 0 auto; width:22px; height:22px; }
ul { margin:0 0 26px 1.1rem; padding:0; line-height:1.5; color:var(--muted); }
ul li { margin-bottom:6px; }
.actions { display:flex; flex-wrap:wrap; gap:14px; }
@@ -37,7 +38,7 @@
<body>
<div class="card fade-in">
<h1>
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
<span class="page-icon" aria-hidden="true"></span>
Page Not Found <span class="badge">404</span>
</h1>
<p class="lede">The page you're looking for doesn't exist or has been moved. You've warped into an unknown sector of the web.</p>