andrew
10180b7109
Introduce support for an internal nebula:// URL scheme and internal page routing (ResolveInternalUrl / ToInternalUrl), including dedicated slugs for home, settings, downloads, big-picture, gpu-diagnostics, insecure and a 404 fallback. Wire internal resolution into browser creation and tab navigation so internal pages load from local UI files. Add an insecure-warning interstitial flow with a navigate-insecure command and a one-shot bypass set (ShouldBypassInsecureWarning) so content can request navigating to an HTTP target after user confirmation. Harden BrowserClient handling to resolve Chromium new-tab and nebula internal URLs, redirect HTTP to the insecure warning when appropriate, and handle 404 responses by loading the internal 404 page. Update chrome UI behavior to hide internal home URLs, accept nebula:// in navigation input checks, and add a GPU Diagnostics page (revamped UI + diagnostic scripts) plus menu entry. Misc: improve URL utilities (scheme checks, percent-encoding, decorations), fix 404 display text, adjust menu popup size, tweak window frame styling (DWM attributes) and remove branding block from chrome UI CSS.
364 lines
7.3 KiB
CSS
364 lines
7.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;
|
|
--accent-2: #00c6ff;
|
|
--outline: #1f2533;
|
|
--outline-soft: rgba(255, 255, 255, 0.06);
|
|
--danger: #e0445c;
|
|
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;
|
|
height: 100%;
|
|
border-bottom: 1px solid var(--outline);
|
|
}
|
|
|
|
/* ── Title row ──────────────────────────────────────────────── */
|
|
|
|
.title-row,
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.title-row {
|
|
gap: 10px;
|
|
padding: 0 0 0 12px;
|
|
background: var(--bg);
|
|
}
|
|
|
|
/* ── 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(--muted);
|
|
cursor: pointer;
|
|
font-size: 0.82rem;
|
|
transition: background 120ms, color 120ms;
|
|
}
|
|
|
|
.tab:hover:not(.active) {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
|
|
.tab.active {
|
|
background: var(--surface-raised);
|
|
border-color: var(--outline);
|
|
color: var(--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(--accent);
|
|
opacity: 0.85;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-favicon.has-favicon {
|
|
background: transparent;
|
|
border-radius: 3px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.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 rgba(0, 198, 255, 0.2);
|
|
border-top-color: var(--accent-2);
|
|
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(--muted);
|
|
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(--surface-hover);
|
|
color: var(--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(--muted);
|
|
transition: background 120ms, color 120ms, border-color 120ms;
|
|
}
|
|
|
|
.tab-add:hover {
|
|
background: var(--surface-hover);
|
|
border-color: var(--outline);
|
|
color: var(--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(--muted);
|
|
transition: background 100ms, color 100ms;
|
|
}
|
|
|
|
.window-controls button:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--text);
|
|
}
|
|
|
|
.window-controls .close:hover {
|
|
background: var(--danger);
|
|
color: white;
|
|
}
|
|
|
|
/* ── Toolbar ────────────────────────────────────────────────── */
|
|
|
|
.toolbar {
|
|
gap: 4px;
|
|
padding: 0 12px;
|
|
background: var(--surface-raised);
|
|
border-top: 1px solid var(--outline);
|
|
}
|
|
|
|
/* ── 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(--muted);
|
|
flex-shrink: 0;
|
|
transition: background 120ms, color 120ms, border-color 120ms;
|
|
}
|
|
|
|
.icon-button:hover:not(:disabled) {
|
|
background: var(--surface-hover);
|
|
border-color: var(--outline);
|
|
color: var(--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(--outline);
|
|
border-radius: 10px;
|
|
background: var(--surface);
|
|
transition: border-color 140ms, box-shadow 140ms;
|
|
}
|
|
|
|
.address-shell:focus-within {
|
|
border-color: rgba(123, 46, 255, 0.55);
|
|
box-shadow: 0 0 0 3px rgba(123, 46, 255, 0.12);
|
|
}
|
|
|
|
.address-shell input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
outline: 0;
|
|
padding: 0 16px;
|
|
background: transparent;
|
|
color: var(--text);
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.address-shell input::placeholder {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|