NebulaBrowser/renderer/style.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: block;
}
/* 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;
  position: relative;
  z-index: 0;
}
/* Show home webview when container is active */
#home-container.active > #home-webview {
  display: block;
}

/* 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);
}