/* chaserich skin for ntfy (followups#251). * Skin only: layered onto MUI selectors via !important. ntfy uses MUI with * a runtime theme palette, not CSS variables, so per-theme blocks target * MUI class names directly. Pre-paint script in index sets [data-theme] * on before first paint to avoid FOWT. * * Theme keys mirror Forgejo's theme-chaserich.css (#232) so the * `forgejo_theme` localStorage key carries the user's choice across * subdomains. */ /* ============================================================ * Per-theme palette tokens (custom props, used by selectors below). * ============================================================ */ :root, [data-theme="midnight"] { --t-accent: #5b8cb8; --t-bg: #0a1628; --t-bg2: #122036; --t-text: #d4e1f0; } [data-theme="forest"] { --t-accent: #6b9b7a; --t-bg: #0d1a14; --t-bg2: #14241c; --t-text: #d8e6dc; } [data-theme="rose"] { --t-accent: #b8897a; --t-bg: #1a1417; --t-bg2: #261d22; --t-text: #ecdcd8; } [data-theme="lavender"] { --t-accent: #9b7ab8; --t-bg: #151320; --t-bg2: #211d33; --t-text: #e0d8ec; } [data-theme="ember"] { --t-accent: #b89b5b; --t-bg: #1a1410; --t-bg2: #261e17; --t-text: #ecdfc8; } [data-theme="daylight"] { --t-accent: #2d7a4f; --t-bg: #f5f3ef; --t-bg2: #e8e5df; --t-text: #1a2620; } [data-theme="stillness"] { --t-accent: #8a8a90; --t-bg: #1a1a1e; --t-bg2: #26262c; --t-text: #d8d8de; } [data-theme="parchment"] { --t-accent: #8a6a3a; --t-bg: #f5efe4; --t-bg2: #ebe3d2; --t-text: #2a2218; } [data-theme="twilight"] { --t-accent: #6a7a8a; --t-bg: #12161e; --t-bg2: #1c2129; --t-text: #d4dae2; } [data-theme="contrast"] { --t-accent: #4fc3f7; --t-bg: #0a0a0a; --t-bg2: #161616; --t-text: #ffffff; } [data-theme="hcteal"] { --t-accent: #5eead4; --t-bg: #000000; --t-bg2: #0a0a0a; --t-text: #ffffff; } [data-theme="matrix"] { --t-accent: #00ff41; --t-bg: #000000; --t-bg2: #051005; --t-text: #00ff41; } /* color-scheme hint (dark vs light themes). */ [data-theme="forest"], [data-theme="midnight"], [data-theme="rose"], [data-theme="lavender"], [data-theme="ember"], [data-theme="stillness"], [data-theme="twilight"], [data-theme="contrast"], [data-theme="hcteal"], [data-theme="matrix"] { color-scheme: dark; } [data-theme="daylight"], [data-theme="parchment"] { color-scheme: light; } /* ============================================================ * Body + global text. * Override MUI runtime palette via element + class selectors. * ============================================================ */ html, body { background-color: var(--t-bg) !important; color: var(--t-text) !important; } a, a:visited { color: var(--t-accent) !important; } a:hover { color: color-mix(in srgb, var(--t-accent) 80%, white) !important; text-decoration: none !important; } ::selection { background: var(--t-accent) !important; color: var(--t-bg) !important; } /* MUI Paper / surface (cards, dialogs, popovers). Use the page bg so they blend into the main canvas without a heavy frame. */ .MuiPaper-root, .MuiCard-root, .MuiDialog-paper, .MuiPopover-paper, .MuiMenu-paper, .MuiAccordion-root { background-color: var(--t-bg) !important; color: var(--t-text) !important; background-image: none !important; } /* AppBar (topbar) + Drawer (sidebar) get the SECONDARY surface (--t-bg2) so they read as distinct chrome. Use `background: ... !important` (the shorthand) which beats any longhand bg the MUI emotion stylesheet sets, including linear-gradient images. Also flatten the inner Toolbar + ::before/::after pseudo elements in case the gradient lives there. Chase 2026-05-20. */ html body .MuiDrawer-paper, html body .MuiAppBar-root, html body header.MuiAppBar-root, html body .MuiAppBar-root.MuiAppBar-colorPrimary, html body .MuiAppBar-root.MuiAppBar-colorDefault, html body .MuiAppBar-root.MuiAppBar-colorInherit, html body .MuiAppBar-root.MuiAppBar-colorTransparent, html body .MuiAppBar-root .MuiToolbar-root, html body header.MuiAppBar-root .MuiToolbar-root { background: var(--t-bg2) !important; background-color: var(--t-bg2) !important; background-image: none !important; color: var(--t-text) !important; border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--t-text) 12%, var(--t-bg)) !important; box-shadow: 0 1px 6px rgba(0,0,0,.35) !important; } html body header.MuiAppBar-root::before, html body header.MuiAppBar-root::after, html body .MuiAppBar-root::before, html body .MuiAppBar-root::after { background: transparent !important; background-image: none !important; content: none !important; } html body .MuiDrawer-paper { border-right: 1px solid color-mix(in srgb, var(--t-text) 12%, var(--t-bg)) !important; border-bottom: none !important; } /* The ntfy AppBar inner text + logo: tint based on theme. The bell logo is a PNG (designed for dark teal), so for LIGHT themes we invert it; for dark themes we let it stand as-is. Sliders in the AppBar (Typography "ntfy", icon buttons) follow --t-text. */ html body .MuiAppBar-root .MuiTypography-root, html body .MuiAppBar-root .MuiIconButton-root, html body .MuiAppBar-root .MuiSvgIcon-root { color: var(--t-text) !important; } html body .MuiAppBar-root img[src*="ntfy"], html body .MuiAppBar-root img[src*="logo"], html body .MuiAppBar-root img[src*="bell"] { filter: none; transition: filter .18s ease; } /* Light themes invert the ntfy bell + the ChaseRich darkmode logo so they remain legible on cream/parchment surfaces. */ html[data-theme="daylight"] body .MuiAppBar-root img[src*="ntfy"], html[data-theme="parchment"] body .MuiAppBar-root img[src*="ntfy"], html[data-theme="daylight"] #chase-topnav .chase-topnav-logo img, html[data-theme="parchment"] #chase-topnav .chase-topnav-logo img { filter: invert(1) hue-rotate(180deg) saturate(0.85) !important; } /* Secondary surface (list rows, hover, inputs). */ .MuiListItemButton-root:hover, .MuiMenuItem-root:hover, .MuiButtonBase-root.MuiListItemButton-root.Mui-selected, .MuiButtonBase-root.MuiMenuItem-root.Mui-selected { background-color: var(--t-bg2) !important; } .MuiOutlinedInput-root, .MuiFilledInput-root, .MuiInputBase-root { color: var(--t-text) !important; } .MuiOutlinedInput-notchedOutline { border-color: color-mix(in srgb, var(--t-text) 25%, var(--t-bg)) !important; } .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: color-mix(in srgb, var(--t-text) 40%, var(--t-bg)) !important; } .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--t-accent) !important; } .MuiInputLabel-root, .MuiFormLabel-root, .MuiTypography-root, .MuiListItemText-primary, .MuiListItemText-secondary, .MuiListItemIcon-root, .MuiSvgIcon-root { color: var(--t-text) !important; } .MuiListItemText-secondary { opacity: 0.7; } /* MUI primary surfaces (AppBar, primary buttons, FAB, primary chips). */ .MuiAppBar-colorPrimary, .MuiAppBar-root.MuiAppBar-colorPrimary { background-color: var(--t-accent) !important; background-image: linear-gradient(90deg, var(--t-accent) 0%, color-mix(in srgb, var(--t-accent) 75%, black) 100%) !important; color: var(--t-bg) !important; } .MuiAppBar-root .MuiTypography-root, .MuiAppBar-root .MuiSvgIcon-root, .MuiAppBar-root .MuiIconButton-root { color: var(--t-bg) !important; } .MuiButton-containedPrimary, .MuiFab-primary, .MuiChip-colorPrimary { background-color: var(--t-accent) !important; color: var(--t-bg) !important; } .MuiButton-containedPrimary:hover, .MuiFab-primary:hover { background-color: color-mix(in srgb, var(--t-accent) 80%, white) !important; } .MuiButton-textPrimary, .MuiButton-outlinedPrimary, .MuiIconButton-colorPrimary, .MuiSvgIcon-colorPrimary, .MuiCheckbox-colorPrimary.Mui-checked, .MuiRadio-colorPrimary.Mui-checked, .MuiSwitch-colorPrimary.Mui-checked, .MuiTab-textColorPrimary.Mui-selected, .MuiCircularProgress-colorPrimary { color: var(--t-accent) !important; } .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline, .MuiInput-underline:after { border-color: var(--t-accent) !important; } /* Dividers + borders. */ .MuiDivider-root { border-color: color-mix(in srgb, var(--t-text) 15%, var(--t-bg)) !important; } /* Subtle chaserich body glow on dark themes. */ [data-theme="forest"] body, [data-theme="midnight"] body, [data-theme="rose"] body, [data-theme="lavender"] body, [data-theme="ember"] body, [data-theme="stillness"] body, [data-theme="twilight"] body, [data-theme="contrast"] body, [data-theme="hcteal"] body { background-image: radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--t-accent) 8%, transparent), transparent 25%), radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--t-accent) 6%, transparent), transparent 25%) !important; background-attachment: fixed !important; } /* Matrix: monospace body. */ [data-theme="matrix"] body, [data-theme="matrix"] .MuiTypography-root, [data-theme="matrix"] .MuiButton-root, [data-theme="matrix"] .MuiInputBase-input { font-family: "Fira Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace !important; } [data-theme="matrix"] body { background-image: repeating-linear-gradient(0deg, rgba(0,255,65,0.025) 0, rgba(0,255,65,0.025) 1px, transparent 1px, transparent 3px), radial-gradient(circle at 50% 50%, rgba(0,255,65,0.06), transparent 50%) !important; } /* High contrast teal: bright teal focus rings on pitch-black bg. */ [data-theme="hcteal"] *:focus, [data-theme="hcteal"] *:focus-visible { outline: 3px solid #5eead4 !important; outline-offset: 2px !important; } /* ============================================================ * Theme picker (12-dot row, injected by shim-theme.js). * Sits inside the MUI AppBar toolbar. * ============================================================ */ /* ============================================================ * Theme picker: hex-orb + 4-arm skill tree. * Single floating orb (current accent / bg), click to expand a * radial-cross of 12 theme options reachable in up/right/down/left * branches of 3 hexes each. Chase 2026-05-19. * ============================================================ */ #theme-picker.theme-picker-orb { position: fixed; top: 14px; right: 14px; width: 48px; height: 48px; z-index: 99999; pointer-events: none; /* children re-enable */ /* Smooth slide between corner (collapsed) and viewport center (expanded). */ transition: transform .32s cubic-bezier(.34, 1.56, .64, 1); } /* Expanded: slide orb to viewport center so all 4 arms have room. The arms expand from the orb's current position; centering the orb means up/down/left/right arms are all reachable without clipping. */ #theme-picker.theme-picker-orb.expanded { transform: translate(calc(-50vw + 38px), calc(50vh - 38px)); } /* Three-layer modal architecture when expanded: - layer 1 (::before): pitch-black opaque backdrop covers main page - layer 2 (::after): soft elevated "stage" surface centered on orb, like a card the radial menu sits on - layer 3 (orb + leaves): the picker itself, z-index above stage Chase 2026-05-20: "needs layering to look better." */ #theme-picker.theme-picker-orb::before, #theme-picker.theme-picker-orb::after { content: ''; position: fixed; pointer-events: none; opacity: 0; transition: opacity .26s ease; } #theme-picker.theme-picker-orb::before { inset: 0; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px) saturate(0.7); -webkit-backdrop-filter: blur(6px) saturate(0.7); z-index: -2; } #theme-picker.theme-picker-orb::after { left: 50%; top: 50%; width: 520px; height: 520px; max-width: 92vw; max-height: 92vh; margin: -260px 0 0 -260px; border-radius: 32px; background: radial-gradient(circle at center, color-mix(in srgb, var(--t-bg2) 96%, transparent) 0%, color-mix(in srgb, var(--t-bg) 92%, transparent) 70%, transparent 100%); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px color-mix(in srgb, var(--t-text) 12%, transparent); z-index: -1; } #theme-picker.theme-picker-orb.expanded::before { opacity: 1; pointer-events: auto; } #theme-picker.theme-picker-orb.expanded::after { opacity: 1; } /* Picker title text: a calm "Theme picker" header floats above the orb when expanded. Sensory-friendly: soft text color, no animation, ample line-height. Hidden when collapsed. */ .theme-picker-title { position: fixed; left: 50%; top: calc(50vh - 220px); transform: translateX(-50%); text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--t-text) 75%, var(--t-bg)); pointer-events: none; opacity: 0; transition: opacity .26s ease; z-index: 99999; line-height: 1.5; } .theme-picker-title small { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0.04em; text-transform: none; margin-top: 4px; opacity: 0.75; } #theme-picker.theme-picker-orb.expanded ~ .theme-picker-title, #theme-picker.theme-picker-orb.expanded .theme-picker-title { opacity: 1; } /* Leaf labels: small theme-name caption under each leaf hex. Visible only when expanded so the collapsed orb stays clean. */ #theme-picker .hex-label { display: block; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; color: color-mix(in srgb, var(--t-text) 80%, var(--t-bg)); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s ease calc(var(--leaf-step, 0) * 40ms); text-shadow: 0 1px 2px rgba(0,0,0,.6); } #theme-picker.expanded .hex-leaf .hex-label { opacity: 1; } #theme-picker .hex-orb .hex-label { display: none; } #theme-picker.theme-picker-orb .hex, #theme-picker.theme-picker-orb .branch { pointer-events: auto; } /* Hex button. Flat-top hex via clip-path. The shell shows the theme's bg+accent diagonal split; the ring is a 1px accent outline. */ #theme-picker .hex { position: absolute; display: block; padding: 0; background: transparent; border: none; cursor: pointer; width: 48px; height: 48px; transition: transform .18s cubic-bezier(.22,.61,.36,1), opacity .18s ease; } #theme-picker .hex-shell, #theme-picker .hex-ring { position: absolute; inset: 0; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); display: block; } #theme-picker .hex-shell { background: #888; } #theme-picker .hex-ring { background: transparent; box-shadow: inset 0 0 0 2px currentColor; opacity: 0.85; transition: opacity .12s ease, box-shadow .12s ease; } #theme-picker .hex:hover .hex-ring { opacity: 1; box-shadow: inset 0 0 0 2px currentColor, 0 0 12px currentColor; } #theme-picker .hex:focus-visible { outline: none; } #theme-picker .hex:focus-visible .hex-ring { box-shadow: inset 0 0 0 3px currentColor, 0 0 14px currentColor; } /* Center orb. Slightly larger; sits at picker origin (0,0). */ #theme-picker .hex-orb { top: 0; left: 0; width: 48px; height: 48px; z-index: 2; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); } #theme-picker .hex-orb:hover { transform: scale(1.06); } /* Branches: 4 cardinal arms. Each branch is positioned at the orb's center; its leaf hexes use --leaf-step (0,1,2) to spread out. Leaves start fully collapsed under the orb and animate out on .expanded. */ #theme-picker .branch { position: absolute; top: 0; left: 0; width: 48px; height: 48px; } #theme-picker .hex-leaf { width: 40px; height: 40px; top: 4px; left: 4px; opacity: 0; pointer-events: none; /* Chase 2026-05-20: bumped from 52px to 64px so leaves aren't compressed against each other on tall/narrow screens. Was 52px (12px gap between 40px hexes), now 64px (24px gap) gives clear breathing room. */ --leaf-distance: calc((var(--leaf-step) + 1) * 64px); } /* Direction-specific leaf transforms. Stays under the orb when collapsed. */ #theme-picker .branch-up .hex-leaf { transform: translate(0, 0) scale(.6); } #theme-picker .branch-right .hex-leaf { transform: translate(0, 0) scale(.6); } #theme-picker .branch-down .hex-leaf { transform: translate(0, 0) scale(.6); } #theme-picker .branch-left .hex-leaf { transform: translate(0, 0) scale(.6); } /* Expanded: leaves fly out in their direction and become tappable. */ #theme-picker.expanded .hex-leaf { opacity: 1; pointer-events: auto; } #theme-picker.expanded .branch-up .hex-leaf { transform: translate(0, calc(-1 * var(--leaf-distance))) scale(1); } #theme-picker.expanded .branch-right .hex-leaf { transform: translate(var(--leaf-distance), 0) scale(1); } #theme-picker.expanded .branch-down .hex-leaf { transform: translate(0, var(--leaf-distance)) scale(1); } #theme-picker.expanded .branch-left .hex-leaf { transform: translate(calc(-1 * var(--leaf-distance)), 0) scale(1); } /* Stagger the spread so each leaf lifts a touch after the previous. */ #theme-picker.expanded .hex-leaf { transition: transform .28s cubic-bezier(.34,1.56,.64,1) calc(var(--leaf-step) * 40ms), opacity .18s ease calc(var(--leaf-step) * 40ms); } /* Active-theme leaf carries a stronger ring + outer glow. */ #theme-picker .hex-leaf[aria-pressed="true"] .hex-ring { box-shadow: inset 0 0 0 3px currentColor, 0 0 14px currentColor; opacity: 1; } /* First-visit attention pulse on the collapsed orb. Fades after shim-theme.js timeout (FIRST_VISIT_GLOW_MS) or first interaction. */ @keyframes theme-orb-pulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 8px transparent; } } #theme-picker.first-visit .hex-orb .hex-ring { animation: theme-orb-pulse 1.6s ease-in-out infinite; } /* Mobile: shrink orb + leaves slightly, keep tap targets ≥40px. */ @media (max-width: 768px) { #theme-picker.theme-picker-orb { top: 10px; right: 10px; width: 44px; height: 44px; } #theme-picker.theme-picker-orb.expanded { /* Orb center at (100vw - 32, 32); recenter to (50vw, 50vh). */ transform: translate(calc(-50vw + 32px), calc(50vh - 32px)); } #theme-picker .hex, #theme-picker .hex-orb { width: 44px; height: 44px; } #theme-picker .hex-leaf { width: 38px; height: 38px; top: 3px; left: 3px; /* Chase 2026-05-20: bumped mobile distance for visible padding between the 12 picker hexes on tall/narrow screens. */ --leaf-distance: calc((var(--leaf-step) + 1) * 56px); } } /* Tall/narrow screens (portrait phones, side panes): give the four arms even more spread so the 3 hexes per arm have clear gaps between them. Chase 2026-05-20: "needs padding between each one." */ @media (max-width: 480px) and (orientation: portrait) { #theme-picker .hex-leaf { --leaf-distance: calc((var(--leaf-step) + 1) * 62px); } } /* ============================================================ * Collapsible sidebar (subscriptions drawer). * shim-sidebar.js toggles [data-ntfy-sidebar="collapsed"] on . * ntfy uses MUI Drawer (persistent variant) at width ~240px. * Collapsed state shrinks to a 56px tray showing icons only. * ============================================================ */ /* Wrapper for the chevron toggle injected at the top of the drawer. */ #ntfy-sidebar-toggle { display: flex; align-items: center; justify-content: flex-end; padding: 4px 8px; cursor: pointer; color: var(--t-text); background: var(--t-bg); border-bottom: 1px solid color-mix(in srgb, var(--t-text) 12%, var(--t-bg)); user-select: none; } #ntfy-sidebar-toggle:hover { background: var(--t-bg2); } #ntfy-sidebar-toggle::after { content: "‹"; /* single left-pointing angle */ font-size: 22px; line-height: 1; padding: 2px 6px; color: var(--t-accent); transition: transform .18s ease; } /* ============================================================ * Chase topnav (shim-sidebar.js v2): hide the persistent Drawer * entirely, replace it with a single-line horizontal nav at the * top of body. Logo on left, scrollable subscription links to the * right. Main content shifts down by topnav height. Chase 2026-05-20. * ============================================================ */ /* Hide the persistent Drawer entirely. The visible black band is the OUTER nav.MuiBox-root[role="navigation"] wrapper around the docked drawer; hiding only the inner .MuiDrawer-paper leaves an empty 240px black strip. We kill the whole subtree. The mobile temporary drawer (rendered with a backdrop sibling) is left alone so mobile menu interactions still work upstream. Chase 2026-05-20. */ html[data-chase-topnav="1"] nav.MuiBox-root[role="navigation"], html[data-chase-topnav="1"] .MuiDrawer-docked, html[data-chase-topnav="1"] .MuiDrawer-root.MuiDrawer-docked, html[data-chase-topnav="1"] aside.MuiDrawer-root.MuiDrawer-docked, html[data-chase-topnav="1"] .MuiDrawer-paperAnchorDockedLeft, html[data-chase-topnav="1"] .MuiDrawer-root:not(:has(> .MuiBackdrop-root)) { display: none !important; width: 0 !important; min-width: 0 !important; visibility: hidden !important; } html[data-chase-topnav="1"] .MuiDrawer-root:not(:has(> .MuiBackdrop-root)) .MuiDrawer-paper { display: none !important; } /* Shift the AppBar + main content to start at left:0 (drawer is gone). Covers both inline-style and CSS-class width: calc(100% - 240px) patterns that MUI applies based on the Drawer prop. */ html[data-chase-topnav="1"] .MuiAppBar-root, html[data-chase-topnav="1"] main, html[data-chase-topnav="1"] .MuiAppBar-root[style*="margin-left"], html[data-chase-topnav="1"] main[style*="margin-left"], html[data-chase-topnav="1"] .MuiBox-root[style*="margin-left"] { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; } /* Push the AppBar + main content down by the actual topnav height. shim-sidebar.js writes --chase-topnav-h on every render so 1-row vs 2-row topnav reserves the right space. Defaults to 56px in case the shim hasn't measured yet. */ html[data-chase-topnav="1"] { --chase-topnav-h: 56px; } html[data-chase-topnav="1"] body { padding-top: 0 !important; } html[data-chase-topnav="1"] .MuiAppBar-root { top: var(--chase-topnav-h) !important; } html[data-chase-topnav="1"] main { padding-top: var(--chase-topnav-h) !important; box-sizing: border-box !important; } #chase-topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 1300; /* above MUI AppBar (1100) but below modals (1500) */ background-color: var(--t-bg2); border-bottom: 1px solid color-mix(in srgb, var(--t-text) 12%, var(--t-bg)); display: flex; flex-direction: column; box-shadow: 0 1px 6px rgba(0,0,0,.35); } #chase-topnav .chase-topnav-row { display: flex; align-items: stretch; } #chase-topnav .chase-topnav-row1 { height: 56px; padding-right: 80px; /* clear the orb in the top-right corner */ } #chase-topnav .chase-topnav-row2 { height: 38px; align-items: center; gap: 8px; padding: 0 14px 0 14px; background-color: color-mix(in srgb, var(--t-bg2) 75%, var(--t-bg)); border-top: 1px solid color-mix(in srgb, var(--t-text) 8%, var(--t-bg)); } #chase-topnav .chase-topnav-logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 6px 14px; text-decoration: none; border-right: 1px solid color-mix(in srgb, var(--t-text) 10%, var(--t-bg)); } #chase-topnav .chase-topnav-logo img { display: block; height: 40px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } #chase-topnav .chase-topnav-scroller { flex: 1 1 auto; display: flex; align-items: stretch; gap: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--t-accent) transparent; } #chase-topnav .chase-topnav-scroller::-webkit-scrollbar { height: 6px; } #chase-topnav .chase-topnav-scroller::-webkit-scrollbar-thumb { background-color: var(--t-accent); border-radius: 3px; } #chase-topnav .chase-topnav-item { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 16px; height: 100%; color: var(--t-text) !important; text-decoration: none !important; font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; border-bottom: 2px solid transparent; transition: background-color .12s ease, color .12s ease, border-color .12s ease; } #chase-topnav .chase-topnav-item:hover { background-color: color-mix(in srgb, var(--t-accent) 12%, transparent); color: var(--t-accent) !important; } #chase-topnav .chase-topnav-item.active { color: var(--t-accent) !important; border-bottom-color: var(--t-accent); background-color: color-mix(in srgb, var(--t-accent) 8%, transparent); } /* System kebab menu (Settings / Documentation / Publish / Subscribe). */ #chase-topnav .chase-topnav-sysmenu { position: relative; flex: 0 0 auto; display: flex; align-items: center; padding-right: 12px; } #chase-topnav .chase-topnav-sysbtn { background: transparent; border: 1px solid color-mix(in srgb, var(--t-text) 18%, var(--t-bg)); color: var(--t-text); width: 36px; height: 36px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } #chase-topnav .chase-topnav-sysbtn:hover { background-color: color-mix(in srgb, var(--t-accent) 14%, transparent); color: var(--t-accent); border-color: var(--t-accent); } #chase-topnav .chase-topnav-sysdrop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background-color: var(--t-bg2); border: 1px solid color-mix(in srgb, var(--t-text) 14%, var(--t-bg)); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: 6px 0; display: none; z-index: 1310; } #chase-topnav .chase-topnav-sysmenu.open .chase-topnav-sysdrop { display: block; } #chase-topnav .chase-topnav-sysitem { display: block; padding: 8px 14px; color: var(--t-text) !important; text-decoration: none !important; font-size: 13.5px; white-space: nowrap; cursor: pointer; } #chase-topnav .chase-topnav-sysitem:hover { background-color: color-mix(in srgb, var(--t-accent) 14%, transparent); color: var(--t-accent) !important; } /* Row 2: available-topic chips. */ #chase-topnav .chase-topnav-avail-label { font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--t-text) 70%, var(--t-bg)); letter-spacing: 0.02em; text-transform: uppercase; flex: 0 0 auto; } #chase-topnav .chase-topnav-avail-chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: var(--t-accent) transparent; } #chase-topnav .chase-topnav-avail-chip { flex: 0 0 auto; background-color: transparent; border: 1px dashed color-mix(in srgb, var(--t-accent) 60%, var(--t-bg)); color: var(--t-text); padding: 4px 12px; font-size: 12.5px; border-radius: 14px; cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-style .12s ease, color .12s ease; } #chase-topnav .chase-topnav-avail-chip:hover { background-color: color-mix(in srgb, var(--t-accent) 18%, transparent); border-style: solid; color: var(--t-accent); } /* Right-click context menu on topnav topic items. */ .chase-topnav-ctxmenu { position: fixed; z-index: 99998; background-color: var(--t-bg2); border: 1px solid color-mix(in srgb, var(--t-text) 16%, var(--t-bg)); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.55); padding: 6px 0; min-width: 180px; display: flex; flex-direction: column; animation: chase-ctx-in .12s ease-out; } @keyframes chase-ctx-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .chase-ctx-item { background: transparent; border: none; text-align: left; padding: 8px 14px; font-size: 13px; color: var(--t-text); cursor: pointer; transition: background-color .1s ease, color .1s ease; } .chase-ctx-item:hover { background-color: color-mix(in srgb, var(--t-accent) 18%, transparent); color: var(--t-accent); } .chase-ctx-item.chase-ctx-danger { color: color-mix(in srgb, #ff6b6b 70%, var(--t-text)); } .chase-ctx-item.chase-ctx-danger:hover { background-color: rgba(255, 80, 80, 0.18); color: #ff6b6b; } /* Notification cards in the main view: full-width and roomier. The "chat bubbles" each message renders as. Targets MUI cards inside the main content area, not dialogs or popovers. */ html body main .MuiCard-root, html body main .MuiPaper-root.MuiCard-root, html body main .MuiPaper-elevation:not(.MuiDialog-paper):not(.MuiPopover-paper):not(.MuiMenu-paper) { width: 100% !important; max-width: 100% !important; min-height: 80px !important; padding: 16px 22px !important; margin: 10px 0 !important; box-sizing: border-box !important; border-radius: 10px !important; } @media (max-width: 768px) { #chase-topnav .chase-topnav-row1 { height: 48px; padding-right: 64px; } #chase-topnav .chase-topnav-row2 { height: 34px; padding: 0 10px; } #chase-topnav .chase-topnav-logo { padding: 4px 10px; } #chase-topnav .chase-topnav-logo img { height: 32px; } #chase-topnav .chase-topnav-item { padding: 0 12px; font-size: 12.5px; } #chase-topnav .chase-topnav-sysbtn { width: 32px; height: 32px; font-size: 18px; } #chase-topnav .chase-topnav-avail-label { font-size: 10.5px; } #chase-topnav .chase-topnav-avail-chip { font-size: 11.5px; padding: 3px 10px; } } /* Toggle expanded state visual: rotate chevron. */ html[data-ntfy-sidebar="collapsed"] #ntfy-sidebar-toggle::after { content: "›"; /* single right-pointing angle */ } /* Tooltip on hover when collapsed (shim-sidebar.js mirrors topic name into data-ntfy-tooltip on each row; CSS reveals it). */ html[data-ntfy-sidebar="collapsed"] .MuiListItemButton-root[data-ntfy-tooltip], html[data-ntfy-sidebar="collapsed"] .MuiMenuItem-root[data-ntfy-tooltip] { position: relative; } html[data-ntfy-sidebar="collapsed"] .MuiListItemButton-root[data-ntfy-tooltip]:hover::after, html[data-ntfy-sidebar="collapsed"] .MuiMenuItem-root[data-ntfy-tooltip]:hover::after { content: attr(data-ntfy-tooltip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--t-bg2); color: var(--t-text); padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 1500; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid color-mix(in srgb, var(--t-text) 20%, transparent); pointer-events: none; }