747 lines
20 KiB
CSS
747 lines
20 KiB
CSS
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
/* Subtle aurora background that peeks through glassy chrome */
|
|
background:
|
|
radial-gradient(1200px 600px at 10% -10%, rgba(62, 33, 110, 0.18), transparent 45%),
|
|
radial-gradient(1000px 500px at 90% -20%, rgba(18, 124, 201, 0.16), transparent 40%),
|
|
#0b0d10;
|
|
color: white;
|
|
font-family: 'Segoe UI', system-ui, -apple-system, Ubuntu, Roboto, sans-serif;
|
|
}
|
|
|
|
/* Global variables */
|
|
:root {
|
|
/* Space reserved on the left for system window controls (traffic lights on macOS).
|
|
Applied cross-platform per request to keep a consistent layout. */
|
|
--window-controls-offset: 80px; /* adjust if needed */
|
|
|
|
/* Design tokens */
|
|
--bg: #0b0d10;
|
|
--surface-1: #11131a;
|
|
--surface-2: #161925;
|
|
--surface-3: #1c2030;
|
|
--text: #e8e8f0;
|
|
--muted: #a4a7b3;
|
|
--outline: #2b3040;
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--shadow-1: 0 6px 20px rgba(0,0,0,.35);
|
|
--shadow-2: 0 12px 36px rgba(0,0,0,.45);
|
|
--blur: 12px;
|
|
/* Accent palette */
|
|
--accent-h: 265;
|
|
--accent-s: 86%;
|
|
--accent-l: 62%;
|
|
--accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
|
|
--accent-600: hsl(var(--accent-h) var(--accent-s) 52%);
|
|
--accent-700: hsl(var(--accent-h) var(--accent-s) 46%);
|
|
|
|
/* URL bar and tab theme colors (defaults) */
|
|
--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;
|
|
}
|
|
|
|
/* TAB STRIP */
|
|
#tab-bar {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
/* Increase left padding to avoid overlap with OS window controls area */
|
|
padding: 6px 10px 0 var(--window-controls-offset);
|
|
background: var(--tab-bg);
|
|
border-bottom: 1px solid var(--tab-border);
|
|
overflow-x: auto; /* scroll when many tabs */
|
|
scrollbar-color: #444 #2a2a3c; /* thumb and track for Firefox */
|
|
scrollbar-width: thin; /* slimmer track */
|
|
-webkit-backdrop-filter: blur(var(--blur));
|
|
backdrop-filter: blur(var(--blur));
|
|
/* Only the background areas are draggable. Individual tabs opt-out via no-drag. */
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
/* NAVBAR LAYOUT */
|
|
#nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
background: var(--url-bar-bg);
|
|
gap: 12px;
|
|
/* flatter header to reduce paint cost */
|
|
box-shadow: none;
|
|
/* Ensure the nav sits above embedded <webview> surfaces */
|
|
position: relative;
|
|
z-index: 10000;
|
|
-webkit-backdrop-filter: blur(var(--blur));
|
|
backdrop-filter: blur(var(--blur));
|
|
border-bottom: 1px solid var(--url-bar-border);
|
|
}
|
|
|
|
/* Make the top nav a draggable region on macOS when we use a hidden titlebar.
|
|
Interactive controls inside must opt-out with -webkit-app-region: no-drag. */
|
|
@supports (-webkit-app-region: drag) {
|
|
/* Make the top nav a draggable region, but only in its background/gaps. */
|
|
#nav { -webkit-app-region: drag; user-select: none; }
|
|
|
|
/* Interactive controls must explicitly opt-out of dragging. This keeps
|
|
the larger draggable area while preserving normal click behavior. */
|
|
#nav button,
|
|
#nav input,
|
|
#menu-popup,
|
|
.tab,
|
|
.tab *,
|
|
.new-tab-button,
|
|
.tab .tab-close,
|
|
#window-controls {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* Ensure the new-tab button (which sits on the tab strip) is not draggable */
|
|
#tab-bar .new-tab-button {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
}
|
|
|
|
.nav-left,
|
|
.nav-center,
|
|
.nav-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nav-center {
|
|
flex: 1;
|
|
padding: 6px 10px;
|
|
border-radius: 999px; /* pill */
|
|
/* glassy, accented border */
|
|
background: var(--url-bar-bg);
|
|
border: 1px solid var(--url-bar-border);
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
|
|
}
|
|
|
|
#favicon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
#url {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--url-bar-text);
|
|
font-size: 14px;
|
|
outline: none;
|
|
}
|
|
|
|
#url::placeholder {
|
|
color: rgba(255, 255, 255, 0.45);
|
|
}
|
|
|
|
/* Iconic circular chrome buttons */
|
|
.nav-left button,
|
|
.nav-right > button,
|
|
#reload-btn,
|
|
#menu-btn {
|
|
background:
|
|
/* brighter, more opaque fill for contrast */
|
|
linear-gradient(180deg, rgba(50,54,74,0.96), rgba(38,42,60,0.96)) padding-box,
|
|
/* stronger border highlight */
|
|
linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.45)) border-box;
|
|
color: var(--text);
|
|
border: 1px solid transparent;
|
|
width: 34px;
|
|
height: 34px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
/* subtle inner highlight adds edge definition */
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
|
|
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
|
|
line-height: 0; /* avoid vertical misalignment for glyphs */
|
|
padding: 0;
|
|
}
|
|
|
|
#downloads-btn svg { display:block; width: 18px; height: 18px; }
|
|
|
|
/* Downloads button chrome to match other nav buttons */
|
|
#downloads-btn {
|
|
background:
|
|
linear-gradient(180deg, rgba(50,54,74,0.96), rgba(38,42,60,0.96)) padding-box,
|
|
linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.45)) border-box;
|
|
color: var(--muted);
|
|
border: 1px solid transparent;
|
|
width: 34px;
|
|
height: 34px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
|
|
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease, color 120ms ease;
|
|
line-height: 0;
|
|
padding: 0;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background-color: transparent;
|
|
}
|
|
#downloads-btn:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(0,0,0,0.35); color: var(--text); }
|
|
#downloads-btn:active { transform: translateY(1px) scale(0.98); }
|
|
#downloads-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(123, 97, 255, 0.55); }
|
|
#downloads-btn:focus { outline: none; box-shadow: none; }
|
|
|
|
/* Match home-active chrome variant */
|
|
body:has(#home-container.active) #downloads-btn {
|
|
background:
|
|
linear-gradient(180deg, rgba(60,66,90,0.98), rgba(44,48,68,0.98)) padding-box,
|
|
linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.5)) border-box;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
|
|
}
|
|
|
|
.nav-left button:hover,
|
|
.nav-right > button:hover,
|
|
#reload-btn:hover,
|
|
#menu-btn:hover {
|
|
filter: brightness(1.05);
|
|
box-shadow: 0 4px 14px rgba(0,0,0,0.35);
|
|
}
|
|
|
|
.nav-left button:active,
|
|
.nav-right > button:active,
|
|
#reload-btn:active,
|
|
#menu-btn:active {
|
|
transform: translateY(1px) scale(0.98);
|
|
}
|
|
|
|
/* Primary action (Go button) keeps rectangular look but modernized */
|
|
.nav-center + button,
|
|
.nav-center button {
|
|
background:
|
|
linear-gradient(180deg, var(--accent), var(--accent-700));
|
|
color: white !important;
|
|
border: 1px solid transparent;
|
|
padding: 8px 14px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
|
|
}
|
|
.nav-center + button:hover,
|
|
.nav-center button:hover { box-shadow: 0 8px 20px rgba(111, 76, 255, 0.35); }
|
|
.nav-center + button:active,
|
|
.nav-center button:active { transform: translateY(1px) scale(0.98); }
|
|
|
|
/* MENU DROPDOWN */
|
|
.menu-wrapper {
|
|
position: relative;
|
|
/* keep wrapper on a higher layer so absolute popup can composit above webviews */
|
|
z-index: 10001;
|
|
}
|
|
|
|
#menu-popup {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 0;
|
|
background:
|
|
linear-gradient(180deg, rgba(30,34,50,0.92), rgba(25,28,42,0.92)) padding-box,
|
|
linear-gradient(135deg, rgba(140, 86, 255, 0.25), rgba(62, 149, 255, 0.18)) border-box;
|
|
border-radius: 14px;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 200px; /* wider dropdown */
|
|
box-shadow: var(--shadow-1);
|
|
/* Much higher z-index and force its own compositing layer so it renders above <webview> guests */
|
|
z-index: 20000;
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
will-change: transform, opacity;
|
|
/* animated open/close */
|
|
opacity: 1;
|
|
transform-origin: top right;
|
|
transition: opacity 160ms ease, transform 160ms ease;
|
|
/* ensure interactions only when visible */
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
-webkit-backdrop-filter: blur(var(--blur));
|
|
backdrop-filter: blur(var(--blur));
|
|
}
|
|
|
|
#menu-popup button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text);
|
|
text-align: left;
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
transition: background 120ms ease, filter 120ms ease;
|
|
}
|
|
|
|
#menu-popup button:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
|
|
/* Big Picture Mode button special style */
|
|
#bigpicture-btn {
|
|
background: linear-gradient(135deg, rgba(123, 46, 255, 0.15) 0%, rgba(0, 198, 255, 0.1) 100%) !important;
|
|
border: 1px solid rgba(123, 46, 255, 0.3) !important;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
#bigpicture-btn:hover {
|
|
background: linear-gradient(135deg, rgba(123, 46, 255, 0.25) 0%, rgba(0, 198, 255, 0.15) 100%) !important;
|
|
border-color: rgba(123, 46, 255, 0.5) !important;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Animate menu dropdown instead of removing from flow */
|
|
#menu-popup.hidden {
|
|
display: block; /* override global .hidden */
|
|
opacity: 0;
|
|
transform: translateY(-8px) scale(0.98);
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Downloads mini popup anchored to the downloads button */
|
|
.downloads-wrapper { position: relative; z-index: 10002; }
|
|
#downloads-popup {
|
|
position: absolute;
|
|
top: 34px;
|
|
right: 0;
|
|
background:
|
|
linear-gradient(180deg, rgba(30,34,50,0.95), rgba(25,28,42,0.95)) padding-box,
|
|
linear-gradient(135deg, rgba(140, 86, 255, 0.18), rgba(62, 149, 255, 0.14)) border-box;
|
|
border: 1px solid transparent;
|
|
border-radius: 12px;
|
|
min-width: 280px;
|
|
box-shadow: var(--shadow-1);
|
|
padding: 8px;
|
|
-webkit-backdrop-filter: blur(var(--blur));
|
|
backdrop-filter: blur(var(--blur));
|
|
transition: opacity 160ms ease, transform 160ms ease;
|
|
}
|
|
#downloads-popup.hidden { opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; }
|
|
.downloads-pop-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 2px 8px; }
|
|
.downloads-pop-header > span { font-weight: 600; color: var(--text); }
|
|
.downloads-pop-header > button { background: transparent; border: none; color: var(--accent); cursor: pointer; }
|
|
.downloads-pop-list { display:flex; flex-direction: column; gap: 8px; max-height: 280px; overflow: auto; }
|
|
.downloads-empty { color: #aaa; font-size: 12px; text-align: center; padding: 16px 8px; }
|
|
.dl-item { display:grid; grid-template-columns: 1fr auto; gap: 6px 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 8px; }
|
|
.dl-file { font-size: 12px; color: #eee; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
|
|
.dl-meta { font-size: 11px; color: #bbb; }
|
|
.dl-actions { display:flex; gap:6px; }
|
|
.dl-actions button { background: transparent; color: #ddd; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 4px 8px; cursor: pointer; }
|
|
.dl-progress { height: 4px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; grid-column: 1 / -1; }
|
|
.dl-bar { height: 100%; background: #3b82f6; width: 0%; transition: width .12s linear; }
|
|
|
|
/* Circular progress ring around downloads button */
|
|
#downloads-btn { position: relative; }
|
|
#downloads-btn .ring {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 40px; /* slightly larger than 34px button for halo */
|
|
height: 40px;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
#downloads-btn .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
|
|
#downloads-btn .ring circle.bg { stroke: rgba(255,255,255,0.15); stroke-width: 3; fill: none; }
|
|
#downloads-btn .ring circle.fg { stroke: #3b82f6; stroke-width: 3; fill: none; stroke-linecap: round; transition: stroke-dashoffset .12s linear, opacity .12s ease; }
|
|
|
|
/* WEBVIEWS */
|
|
#webviews {
|
|
flex: 1;
|
|
display: flex;
|
|
width: 100%;
|
|
position: relative;
|
|
/* make sure webviews render on a separate base layer behind nav */
|
|
z-index: 0;
|
|
}
|
|
#webviews.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#webviews webview {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
display: none;
|
|
}
|
|
#webviews webview.active {
|
|
display: flex;
|
|
}
|
|
/* When webviews is hidden, collapse its flex size */
|
|
#webviews.hidden {
|
|
flex: 0;
|
|
}
|
|
|
|
/* HOME CONTAINER */
|
|
#home-container {
|
|
flex: 1;
|
|
display: none;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
#home-container.active {
|
|
display: flex;
|
|
}
|
|
|
|
#home-webview {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
display: none;
|
|
flex: 1;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
/* Show home webview when container is active */
|
|
#home-container.active > #home-webview {
|
|
display: flex;
|
|
}
|
|
|
|
/* TABS */
|
|
.tab {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
-webkit-app-region: no-drag; /* allow HTML5 DnD to work */
|
|
padding: 4px 10px; /* slimmer padding */
|
|
margin: 0;
|
|
height: 28px; /* reduce overall tab height */
|
|
color: var(--tab-text);
|
|
/* sleek glass tile */
|
|
background: var(--tab-bg);
|
|
border: 1px solid var(--tab-border);
|
|
border-bottom: none; /* let it visually merge with the strip line */
|
|
border-radius: 10px 10px 0 0; /* slightly tighter radius */
|
|
cursor: pointer;
|
|
user-select: none;
|
|
max-width: 260px;
|
|
min-width: 120px;
|
|
flex: 0 1 180px; /* like Chrome: shrink when crowded */
|
|
overflow: hidden;
|
|
transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
|
|
}
|
|
|
|
.tab:hover {
|
|
background: var(--tab-bg);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.tab.active {
|
|
color: var(--tab-active-text);
|
|
background: var(--tab-active);
|
|
box-shadow: 0 8px 22px rgba(0,0,0,0.35);
|
|
}
|
|
|
|
.tab.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--accent), var(--accent-600));
|
|
}
|
|
|
|
.tab .tab-favicon {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 2px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.tab .tab-title {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tab .tab-close {
|
|
flex: 0 0 auto;
|
|
width: 22px;
|
|
height: 22px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: none;
|
|
border-radius: 11px;
|
|
background: transparent;
|
|
color: #b5b5b5;
|
|
opacity: 0; /* hidden by default */
|
|
transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
|
|
}
|
|
|
|
.tab:hover .tab-close,
|
|
.tab.active .tab-close { opacity: 1; }
|
|
.tab .tab-close:hover { background: #3b3e47; color: #fff; }
|
|
.tab .tab-close:active { background: #2e3139; }
|
|
|
|
/* New tab (+) button aligned to the right end of the strip */
|
|
.new-tab-button {
|
|
margin-left: 6px;
|
|
flex: 0 0 auto;
|
|
width: 26px; /* tighter button */
|
|
height: 26px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 13px;
|
|
border: 1px solid transparent;
|
|
background:
|
|
linear-gradient(180deg, rgba(50,54,74,0.98), rgba(38,42,60,0.98)) padding-box,
|
|
linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.45)) border-box;
|
|
color: #f0f0f6;
|
|
cursor: pointer;
|
|
transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
|
|
}
|
|
.new-tab-button:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
|
|
.new-tab-button:active { transform: translateY(1px) scale(0.98); }
|
|
|
|
/* ZOOM CONTROLS */
|
|
.zoom-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 8px;
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.07);
|
|
border-radius: 10px;
|
|
}
|
|
.zoom-controls .zoom-label {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
}
|
|
.zoom-controls button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 8px;
|
|
transition: background 120ms ease;
|
|
}
|
|
.zoom-controls button:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
#zoom-percent {
|
|
min-width: 38px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* window controls (Windows only) */
|
|
#window-controls {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
gap: 2px;
|
|
padding: 4px;
|
|
z-index: 200;
|
|
}
|
|
#window-controls button {
|
|
width: 46px;
|
|
height: 28px;
|
|
background: transparent;
|
|
border: none;
|
|
color: white;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 120ms ease;
|
|
}
|
|
#window-controls button:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
}
|
|
#window-controls #close-btn:hover {
|
|
background: #e81123;
|
|
}
|
|
|
|
#tab-bar::-webkit-scrollbar {
|
|
height: 8px; /* horizontal scrollbar height */
|
|
}
|
|
#tab-bar::-webkit-scrollbar-track {
|
|
background: #2a2a3c;
|
|
border-radius: 4px;
|
|
}
|
|
#tab-bar::-webkit-scrollbar-thumb {
|
|
background: #3f4152;
|
|
border-radius: 4px;
|
|
}
|
|
#tab-bar::-webkit-scrollbar-thumb:hover {
|
|
background: #56586a;
|
|
}
|
|
|
|
/* Tab animations */
|
|
.tab--flip {
|
|
transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
.tab--enter {
|
|
animation: tab-enter 160ms ease-out both;
|
|
}
|
|
.tab--closing {
|
|
animation: tab-exit 140ms ease-in both;
|
|
}
|
|
|
|
/* While dragging a tab, lift it slightly for feedback */
|
|
.tab--dragging {
|
|
transform: translateY(-2px) scale(1.04);
|
|
box-shadow: 0 10px 26px rgba(0,0,0,0.45);
|
|
z-index: 5;
|
|
transition: none !important; /* follow cursor without lag */
|
|
will-change: transform;
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* Show an insertion hint on hovered tab and nudge it */
|
|
.tab--drop-before,
|
|
.tab--drop-after {
|
|
position: relative;
|
|
}
|
|
.tab--drop-before { transform: translateX(-10px); }
|
|
.tab--drop-after { transform: translateX(10px); }
|
|
|
|
.tab--drop-before::before,
|
|
.tab--drop-after::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 4px;
|
|
bottom: 0;
|
|
width: 2px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(180deg, var(--accent), var(--accent-600));
|
|
opacity: 0.9;
|
|
}
|
|
.tab--drop-before::before { left: 0; }
|
|
.tab--drop-after::after { right: 0; }
|
|
|
|
@keyframes tab-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(6px) scale(0.98);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes tab-exit {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-6px) scale(0.95);
|
|
}
|
|
}
|
|
|
|
/* Respect reduced motion preferences */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Focus rings for accessibility */
|
|
.nav-left button:focus-visible,
|
|
.nav-right > button:focus-visible,
|
|
#reload-btn:focus-visible,
|
|
.menu-wrapper #menu-btn:focus-visible,
|
|
.new-tab-button:focus-visible,
|
|
#menu-popup button:focus-visible,
|
|
.zoom-controls button:focus-visible,
|
|
.tab .tab-close:focus-visible,
|
|
#window-controls button:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(123, 97, 255, 0.55);
|
|
}
|
|
|
|
/* Keyboard-only ring around the entire address bar (input + Go) */
|
|
.nav-center:has(:focus-visible) {
|
|
box-shadow: 0 0 0 2px rgba(123, 97, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.05);
|
|
}
|
|
/* Fallback for engines without :has support */
|
|
@supports not selector(.nav-center:has(:focus-visible)) {
|
|
.nav-center:focus-within {
|
|
box-shadow: 0 0 0 2px rgba(123, 97, 255, 0.45), inset 0 1px 0 rgba(255,255,255,0.05);
|
|
}
|
|
}
|
|
|
|
/* Remove default click outline but keep keyboard focus via :focus-visible */
|
|
.nav-left button:focus,
|
|
.nav-right > button:focus,
|
|
#reload-btn:focus,
|
|
#menu-btn:focus,
|
|
#url:focus,
|
|
.nav-center button:focus,
|
|
.new-tab-button:focus,
|
|
#menu-popup button:focus,
|
|
.zoom-controls button:focus,
|
|
.tab .tab-close:focus,
|
|
#window-controls button:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Stronger chrome contrast when Home is visible */
|
|
body:has(#home-container.active) #tab-bar {
|
|
background: linear-gradient(180deg, rgba(12,14,20,0.88), rgba(12,14,20,0.82));
|
|
border-bottom-color: rgba(255,255,255,0.08);
|
|
box-shadow: 0 10px 24px -12px rgba(0,0,0,0.6);
|
|
}
|
|
|
|
body:has(#home-container.active) #nav {
|
|
background: linear-gradient(180deg, rgba(14,16,22,0.9), rgba(14,16,22,0.84));
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
box-shadow: 0 14px 36px -16px rgba(0,0,0,0.7);
|
|
}
|
|
|
|
body:has(#home-container.active) .nav-center {
|
|
background:
|
|
linear-gradient(180deg, rgba(24,26,36,0.96), rgba(20,22,32,0.96)) padding-box,
|
|
linear-gradient(135deg, rgba(140, 86, 255, 0.45), rgba(62, 149, 255, 0.32)) border-box;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
body:has(#home-container.active) .nav-left button,
|
|
body:has(#home-container.active) .nav-right > button,
|
|
body:has(#home-container.active) #reload-btn,
|
|
body:has(#home-container.active) #menu-btn {
|
|
/* slightly lighter than nav to pop over Home */
|
|
background:
|
|
linear-gradient(180deg, rgba(60,66,90,0.98), rgba(44,48,68,0.98)) padding-box,
|
|
linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.5)) border-box;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
|
|
}
|
|
|
|
/* Elevate active tab a touch more over home */
|
|
body:has(#home-container.active) .tab.active {
|
|
box-shadow: 0 10px 26px -8px rgba(0,0,0,0.6);
|
|
}
|