andrew
311340bd6d
Significantly updates renderer/style.css to introduce a modern, glassy chrome look with gradients, blur, and accent colors. Adds accessible focus rings, improved button and tab styles, and enhanced visual contrast when the Home view is active. Also increases the overlay z-index in home.css to ensure popups appear above other UI elements. Updates site-history.json with recent YouTube URLs.
622 lines
16 KiB
CSS
622 lines
16 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%);
|
|
}
|
|
|
|
/* 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:
|
|
linear-gradient(180deg, rgba(16,18,26,0.65), rgba(16,18,26,0.55))
|
|
, transparent;
|
|
border-bottom: 1px solid #232634; /* hairline under tabs */
|
|
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));
|
|
}
|
|
|
|
/* NAVBAR LAYOUT */
|
|
#nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 12px;
|
|
background:
|
|
linear-gradient(180deg, rgba(20,22,30,0.7), rgba(20,22,30,0.6));
|
|
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));
|
|
}
|
|
|
|
/* 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 both the tab strip and the nav area draggable so users have a
|
|
larger region to click-and-drag the window. Keep interactive elements
|
|
marked as no-drag so buttons and tabs remain clickable. */
|
|
#tab-bar,
|
|
#nav {
|
|
-webkit-app-region: drag;
|
|
user-select: none;
|
|
/* keep the appearance consistent even if transparent window behind it */
|
|
background: rgba(20,22,30,0.72);
|
|
backdrop-filter: blur(var(--blur));
|
|
}
|
|
|
|
/* 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:
|
|
linear-gradient(180deg, rgba(28,31,44,0.8), rgba(22,25,37,0.8)) padding-box,
|
|
linear-gradient(135deg, rgba(140, 86, 255, 0.35), rgba(62, 149, 255, 0.25)) border-box;
|
|
border: 1px solid transparent;
|
|
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(--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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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;
|
|
padding: 4px 10px; /* slimmer padding */
|
|
margin: 0;
|
|
height: 28px; /* reduce overall tab height */
|
|
color: #ddd;
|
|
/* sleek glass tile */
|
|
background:
|
|
linear-gradient(180deg, rgba(36,38,45,0.9), rgba(29,31,39,0.9)) padding-box,
|
|
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)) border-box;
|
|
border: 1px solid transparent;
|
|
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:
|
|
linear-gradient(180deg, rgba(42,44,56,0.95), rgba(33,35,46,0.95)) padding-box,
|
|
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)) border-box;
|
|
}
|
|
|
|
.tab.active {
|
|
color: #fff;
|
|
background:
|
|
linear-gradient(180deg, rgba(50,53,66,0.98), rgba(40,42,56,0.98)) padding-box,
|
|
linear-gradient(180deg, rgba(140, 86, 255, 0.35), rgba(62, 149, 255, 0.25)) border-box;
|
|
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;
|
|
}
|
|
|
|
@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);
|
|
}
|