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>
ui/pages/insecure.html
+4 -2
View File
@@ -13,11 +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 img.page-icon,
h1 .page-icon { width:28px; height:28px; flex-shrink:0; display:inline-block; background-color:currentColor; -webkit-mask:url("../assets/icons/shield-alert.svg") center / contain no-repeat; mask:url("../assets/icons/shield-alert.svg") center / contain no-repeat; }
h1 span.badge { font-size:12px; letter-spacing:1px; padding:4px 8px; border:1px solid var(--warn); color:var(--warn); border-radius:999px; text-transform:uppercase; background:rgba(217,119,6,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(--warn); }
.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 +39,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"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M12 2 2 7l10 5 10-5-10-5Z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
<span class="page-icon" aria-hidden="true"></span>
Connection Not Secure <span class="badge">http</span>
</h1>
<p class="lede">You’re about to visit a page using <strong>HTTP (unencrypted)</strong>. Information you send or view can potentially be intercepted or modified. If this is a site you trust and you understand the risks, you can continue anyway.</p>
ui/pages/settings.html
+5 -11
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>Settings</title>
<link rel="stylesheet" href="../css/settings.css" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚙️</text></svg>">
<link rel="icon" href="../assets/icons/settings.svg" type="image/svg+xml">
<!-- Inline styles removed; styles now live in settings.css for a cleaner, modern look. -->
</head>
<body>
@@ -306,18 +306,12 @@
<div class="customization-group about-actions">
<button id="copy-about-btn">Copy diagnostics</button>
<a id="github-link" href="https://gitpub.zambazosmedia.group/#repo/nebula-project/NebulaBrowser" class="github-btn" rel="noopener noreferrer">
<!-- GitHub mark (Octicons) MIT License -->
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" role="img">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.01.08-2.11 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.91.08 2.11.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<span>Gitpub</span>
<a id="github-link" href="https://git.zambazosmedia.group/nebula-project/NebulaBrowser" class="github-btn" rel="noopener noreferrer">
<span class="btn-icon btn-icon-github" aria-hidden="true"></span>
<span>Repo</span>
</a>
<a id="help-link" href="https://nebula.zambazosmedia.group" class="help-btn" rel="noopener noreferrer">
<!-- Help icon -->
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="img">
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 15a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 12 17zm-.02-1.9c-.6 0-1.02-.42-1.02-.98 0-1.97 2.76-1.95 2.76-3.62 0-.77-.66-1.4-1.72-1.4-1 0-1.67.5-2.06 1.22-.3.54-.95.73-1.45.44-.54-.31-.72-1-.42-1.53C7.7 7.7 9.06 6.5 12 6.5c2.26 0 3.98 1.3 3.98 3.35 0 2.74-2.96 2.77-3 3.83-.03.6-.43 1.02-1 1.02z"/>
</svg>
<span class="btn-icon btn-icon-help" aria-hidden="true"></span>
<span>Help</span>
</a>
</div>