Revamp UI styles with modern glassy chrome and focus rings
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.
This commit is contained in:
+2
-1
@@ -466,7 +466,8 @@ body[data-theme="dark"] .bookmark .material-symbols-outlined,
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 99;
|
||||
/* Ensure popup overlays search bar and other UI (search-container has z-index:300) */
|
||||
z-index: 1005;
|
||||
backdrop-filter: blur(4px); /* add subtle blur behind the overlay */
|
||||
}
|
||||
|
||||
|
||||
+263
-63
@@ -2,9 +2,13 @@ html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #111;
|
||||
/* 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', sans-serif;
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, Ubuntu, Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* Global variables */
|
||||
@@ -12,6 +16,28 @@ html, body {
|
||||
/* 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 */
|
||||
@@ -20,12 +46,16 @@ html, body {
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
/* Increase left padding to avoid overlap with OS window controls area */
|
||||
padding: 2px 6px 0 var(--window-controls-offset);
|
||||
background: #1b1c20; /* strip background like modern browsers */
|
||||
border-bottom: 1px solid #2a2c33; /* hairline under tabs */
|
||||
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 */
|
||||
@@ -33,14 +63,17 @@ html, body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 10px;
|
||||
background: #1e1e2e;
|
||||
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.
|
||||
@@ -54,8 +87,8 @@ html, body {
|
||||
-webkit-app-region: drag;
|
||||
user-select: none;
|
||||
/* keep the appearance consistent even if transparent window behind it */
|
||||
background: rgba(30,30,46,0.9);
|
||||
backdrop-filter: blur(6px);
|
||||
background: rgba(20,22,30,0.72);
|
||||
backdrop-filter: blur(var(--blur));
|
||||
}
|
||||
|
||||
/* Interactive controls must explicitly opt-out of dragging. This keeps
|
||||
@@ -87,9 +120,14 @@ html, body {
|
||||
|
||||
.nav-center {
|
||||
flex: 1;
|
||||
background: #2a2a3c;
|
||||
padding: 4px 6px;
|
||||
border-radius: 6px;
|
||||
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 {
|
||||
@@ -102,29 +140,70 @@ html, body {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#url::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
#nav button {
|
||||
background: #333;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 10px;
|
||||
border-radius: 5px;
|
||||
/* 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;
|
||||
transition: background 120ms ease;
|
||||
/* 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 button:hover {
|
||||
background: #555;
|
||||
.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;
|
||||
@@ -136,39 +215,56 @@ html, body {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
background: #2a2a3c;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
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: 0 2px 6px rgba(0,0,0,0.4);
|
||||
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: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
color: var(--text);
|
||||
text-align: left;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
transition: background 120ms ease, filter 120ms ease;
|
||||
}
|
||||
|
||||
#menu-popup button:hover {
|
||||
background: #444;
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Animate menu dropdown instead of removing from flow */
|
||||
#menu-popup.hidden {
|
||||
display: none;
|
||||
display: block; /* override global .hidden */
|
||||
opacity: 0;
|
||||
transform: translateY(-8px) scale(0.98);
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* WEBVIEWS */
|
||||
@@ -232,31 +328,48 @@ html, body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px; /* slimmer padding */
|
||||
padding: 4px 10px; /* slimmer padding */
|
||||
margin: 0;
|
||||
height: 28px; /* reduce overall tab height */
|
||||
color: #ddd;
|
||||
/* use flat background to avoid gradient paints */
|
||||
background: #24262b;
|
||||
border: 1px solid #2b2d34;
|
||||
/* 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: 6px 6px 0 0; /* slightly tighter radius */
|
||||
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;
|
||||
transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.tab:hover { background: #2a2c33; }
|
||||
.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: #2f323a;
|
||||
/* remove expensive inner shadows */
|
||||
box-shadow: none;
|
||||
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 {
|
||||
@@ -297,47 +410,57 @@ html, body {
|
||||
.new-tab-button {
|
||||
margin-left: 6px;
|
||||
flex: 0 0 auto;
|
||||
width: 24px; /* tighter button */
|
||||
height: 24px;
|
||||
width: 26px; /* tighter button */
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #2b2d34;
|
||||
background: #23252b;
|
||||
color: #d5d5d5;
|
||||
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: background 120ms ease, color 120ms ease, border-color 120ms ease;
|
||||
transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
.new-tab-button:hover { background: #2b2d34; color: #fff; border-color: #3a3d46; }
|
||||
.new-tab-button:active { background: #262830; }
|
||||
.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: 8px;
|
||||
padding: 6px 10px;
|
||||
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: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: white;
|
||||
color: var(--text);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
transition: background 120ms ease;
|
||||
}
|
||||
.zoom-controls button:hover {
|
||||
background: #444;
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
#zoom-percent {
|
||||
min-width: 36px;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* window controls (Windows only) */
|
||||
@@ -375,11 +498,11 @@ html, body {
|
||||
border-radius: 4px;
|
||||
}
|
||||
#tab-bar::-webkit-scrollbar-thumb {
|
||||
background: #444;
|
||||
background: #3f4152;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#tab-bar::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
background: #56586a;
|
||||
}
|
||||
|
||||
/* Tab animations */
|
||||
@@ -419,3 +542,80 @@ html, body {
|
||||
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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user