Andrew Zambazos
fbd8a555ec
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.
394 lines
8.3 KiB
CSS
394 lines
8.3 KiB
CSS
:root {
|
|
--bg: #080a0f;
|
|
--surface: #0e1119;
|
|
--surface-raised: #141824;
|
|
--surface-hover: rgba(255, 255, 255, 0.06);
|
|
--text: #e8e8f0;
|
|
--muted: #7a7e90;
|
|
--accent: #7b2eff;
|
|
--primary: #7b2eff;
|
|
--accent-2: #00c6ff;
|
|
--outline: #1f2533;
|
|
--outline-soft: rgba(255, 255, 255, 0.06);
|
|
--danger: #e0445c;
|
|
--url-bar-bg: #1c2030;
|
|
--url-bar-text: #e0e0e0;
|
|
--url-bar-border: #3e4652;
|
|
--tab-bg: #161925;
|
|
--tab-text: #a4a7b3;
|
|
--tab-active: #1c2030;
|
|
--tab-active-text: #e0e0e0;
|
|
--tab-border: #2b3040;
|
|
--chrome-hover: color-mix(in srgb, var(--text) 10%, transparent);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "InterVariable";
|
|
src: url("../assets/fonts/InterVariable.ttf") format("truetype");
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: "InterVariable", "Segoe UI", system-ui, sans-serif;
|
|
user-select: none;
|
|
}
|
|
|
|
button,
|
|
input {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: default;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* ── Chrome shell ───────────────────────────────────────────── */
|
|
|
|
.nebula-chrome {
|
|
display: grid;
|
|
grid-template-rows: 42px 52px 1fr;
|
|
height: 100%;
|
|
border-bottom: 1px solid var(--outline);
|
|
overflow: visible;
|
|
}
|
|
|
|
/* ── Title row ──────────────────────────────────────────────── */
|
|
|
|
.title-row,
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.title-row {
|
|
gap: 10px;
|
|
padding: 0 0 0 12px;
|
|
background: var(--bg);
|
|
}
|
|
|
|
.platform-macos .title-row {
|
|
padding: 0 12px 0 78px;
|
|
}
|
|
|
|
/* ── Tabs ───────────────────────────────────────────────────── */
|
|
|
|
.tabs {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
min-width: 0;
|
|
width: min(260px, 38vw);
|
|
height: 33px;
|
|
padding: 0 14px;
|
|
border-radius: 10px 10px 0 0;
|
|
border: 1px solid transparent;
|
|
border-bottom: none;
|
|
background: transparent;
|
|
color: var(--tab-text);
|
|
cursor: pointer;
|
|
font-size: 0.82rem;
|
|
transition: background 120ms, color 120ms;
|
|
}
|
|
|
|
.tab:hover:not(.active) {
|
|
background: var(--tab-bg);
|
|
color: var(--tab-active-text);
|
|
}
|
|
|
|
.tab.active {
|
|
background: var(--tab-active);
|
|
border-color: var(--tab-border);
|
|
color: var(--tab-active-text);
|
|
}
|
|
|
|
.tab-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tab-favicon,
|
|
.tab-loading {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 auto;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tab-favicon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--primary);
|
|
opacity: 0.85;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-favicon.has-favicon {
|
|
background: transparent;
|
|
border-radius: 3px;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Local Lucide/Octicons SVGs: paint with tab text color */
|
|
.tab-favicon.has-favicon.tinted-icon {
|
|
background: currentColor;
|
|
border-radius: 3px;
|
|
opacity: 1;
|
|
-webkit-mask: var(--tab-icon-mask) center / contain no-repeat;
|
|
mask: var(--tab-icon-mask) center / contain no-repeat;
|
|
}
|
|
|
|
.tab-favicon.empty {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.tab-favicon img {
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.tab-loading {
|
|
width: 13px;
|
|
height: 13px;
|
|
border: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
|
|
border-top-color: var(--accent);
|
|
border-radius: 999px;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
.tab-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--tab-text);
|
|
opacity: 0;
|
|
transition: background 120ms, color 120ms, opacity 120ms;
|
|
}
|
|
|
|
.tab:hover .tab-close,
|
|
.tab.active .tab-close,
|
|
.tab-close:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tab-close:hover {
|
|
background: var(--chrome-hover);
|
|
color: var(--tab-active-text);
|
|
}
|
|
|
|
.tab-add {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-bottom: 2px;
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
color: var(--tab-text);
|
|
transition: background 120ms, color 120ms, border-color 120ms;
|
|
}
|
|
|
|
.tab-add:hover {
|
|
background: var(--chrome-hover);
|
|
border-color: var(--tab-border);
|
|
color: var(--tab-active-text);
|
|
}
|
|
|
|
/* ── Window controls ────────────────────────────────────────── */
|
|
|
|
.window-controls {
|
|
display: flex;
|
|
align-self: stretch;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.window-controls button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 46px;
|
|
background: transparent;
|
|
color: var(--tab-text);
|
|
transition: background 100ms, color 100ms;
|
|
}
|
|
|
|
.window-controls button:hover {
|
|
background: var(--chrome-hover);
|
|
color: var(--tab-active-text);
|
|
}
|
|
|
|
.window-controls .close:hover {
|
|
background: var(--danger);
|
|
color: white;
|
|
}
|
|
|
|
.platform-macos .window-controls {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Toolbar ────────────────────────────────────────────────── */
|
|
|
|
.toolbar {
|
|
gap: 4px;
|
|
padding: 0 12px;
|
|
background: var(--tab-active);
|
|
border-top: 1px solid var(--tab-border);
|
|
overflow: visible;
|
|
}
|
|
|
|
/* ── Lucide icon sizing ─────────────────────────────────────── */
|
|
|
|
/* Lucide replaces <i data-lucide> with <svg>; enforce consistent size */
|
|
.icon-button svg,
|
|
.tab-close svg,
|
|
.tab-add svg,
|
|
.window-controls svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
display: block;
|
|
stroke-width: 1.75;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── Icon buttons ───────────────────────────────────────────── */
|
|
|
|
.icon-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
padding: 0;
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
color: var(--tab-text);
|
|
flex-shrink: 0;
|
|
transition: background 120ms, color 120ms, border-color 120ms;
|
|
}
|
|
|
|
.icon-button:hover:not(:disabled) {
|
|
background: var(--chrome-hover);
|
|
border-color: var(--tab-border);
|
|
color: var(--tab-active-text);
|
|
}
|
|
|
|
/* ── Address bar ────────────────────────────────────────────── */
|
|
|
|
.address-shell {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 160px;
|
|
height: 36px;
|
|
flex: 1;
|
|
margin: 0 4px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--url-bar-border);
|
|
border-radius: 10px;
|
|
background: var(--url-bar-bg);
|
|
transition: border-color 140ms, box-shadow 140ms;
|
|
}
|
|
|
|
.address-shell:focus-within {
|
|
border-color: color-mix(in srgb, var(--primary) 70%, var(--url-bar-border));
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
|
|
}
|
|
|
|
.address-shell input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
outline: 0;
|
|
padding: 0 16px;
|
|
background: transparent;
|
|
color: var(--url-bar-text);
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.address-shell input::placeholder {
|
|
color: color-mix(in srgb, var(--url-bar-text) 55%, transparent);
|
|
}
|
|
|
|
.progress-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 2px;
|
|
width: 0%;
|
|
pointer-events: none;
|
|
background: var(--accent);
|
|
border-radius: 0 2px 2px 0;
|
|
opacity: 0.7;
|
|
transition: width 120ms ease, opacity 160ms ease;
|
|
}
|
|
|
|
/* ── Utilities ──────────────────────────────────────────────── */
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|