/* === Remedica panel polish === */ /* Additive visual refinements only: radius, shadow, motion, focus states. */ /* Does not change colors owned by grey-panel-theme.css / sidebar-vscode-safe.css. */ /* Scrollbars. These rules were written when this sheet was believed to be loading and were never seen against a light page: the middleware guard that should have added the was matching a mention of this filename in a CSS comment, so the whole sheet was dead panel-wide until 2026-07-27. With it restored, a single unqualified `scrollbar-color: #45454d #1a1a1d` puts a near-black gutter down the side of every light-appearance page - measured on Users at body #f5f5f7 with the scrollbar still reporting rgb(26,26,29). So they follow data-appearance. Both the sidebar and the main column track that attribute together under all three panel themes (checked against remedica / graphite / blue), so no separate sidebar case is needed. Both syntaxes have to be stated, and the -webkit- one is the one that counts: Chrome ignores `scrollbar-color` outright as soon as any ::-webkit-scrollbar pseudo-element is styled anywhere, and this sheet styles several. Firefox uses `scrollbar-color`. */ * { scrollbar-color: #45454d #1a1a1d; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #1a1a1d; } ::-webkit-scrollbar-thumb { background: #45454d; border-radius: 999px; border: 2px solid #1a1a1d; } ::-webkit-scrollbar-thumb:hover { background: #58585f; } /* Each of these needs BOTH forms. `html[...] *` and `html[...] ::-webkit-...` are descendant selectors, so neither matches the element itself - and is the element that owns the page scrollbar, the most visible one on the panel. The no-space form is that element's own scrollbar. */ html[data-appearance="light"], html[data-appearance="light"] * { scrollbar-color: #c3c3cb #ededf1; } html[data-appearance="light"]::-webkit-scrollbar-track, html[data-appearance="light"] ::-webkit-scrollbar-track { background: #ededf1; } html[data-appearance="light"]::-webkit-scrollbar-thumb, html[data-appearance="light"] ::-webkit-scrollbar-thumb { background: #c3c3cb; border-color: #ededf1; } html[data-appearance="light"]::-webkit-scrollbar-thumb:hover, html[data-appearance="light"] ::-webkit-scrollbar-thumb:hover { background: #a9a9b4; } /* Cards / panels: consistent radius + softer, layered shadow + gentle hover lift */ main .card, main .panel, main .box, main .table-card, main .stat, main .log-stat, main .filters, main section, main article { border-radius: 14px !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important; } main .card:hover, main .panel:hover, main .box:hover, main .stat:hover { transform: translateY(-1px) !important; box-shadow: 0 22px 50px rgba(0,0,0,.32) !important; } /* Buttons: consistent radius, motion, press feedback */ main .btn, main a.btn, main button.btn, main button { border-radius: 10px !important; transition: transform .1s ease, filter .15s ease, box-shadow .15s ease !important; } main .btn:hover, main a.btn:hover, main button.btn:hover { filter: brightness(1.08) !important; transform: translateY(-1px) !important; } main .btn:active, main a.btn:active, main button.btn:active { transform: translateY(0) !important; filter: brightness(.96) !important; } /* Badges: slightly tighter, consistent radius already pill-shaped, just smooth entry */ main .badge, main table span[class*="badge"], main table span[class*="status"], main table span[class*="pill"] { transition: filter .15s ease !important; } /* Table rows: smoother hover */ main table tr { transition: background-color .12s ease !important; } /* Inputs / selects / textareas: rounder, visible focus ring for accessibility */ main input, main select, main textarea { border-radius: 10px !important; transition: border-color .15s ease, box-shadow .15s ease !important; } main input:focus, main select:focus, main textarea:focus { outline: none !important; border-color: #6b6bff !important; box-shadow: 0 0 0 3px rgba(107,107,255,.25) !important; } /* Sidebar nav: rounded hit-targets, hover/active feedback, smooth chevron */ aside [data-nav-key] { border-radius: 10px !important; transition: background-color .12s ease, color .12s ease, padding-left .12s ease !important; } aside [data-nav-key]:hover { background: #232326 !important; padding-left: 22px !important; } aside [data-nav-key].active, aside [data-nav-key][aria-current="page"] { background: #26262b !important; border-left: 2px solid #6b6bff !important; } aside .nav-section-chevron { transition: transform .15s ease !important; } aside details[open] > summary .nav-section-chevron { transform: rotate(90deg) !important; } aside summary { border-radius: 10px !important; transition: background-color .12s ease !important; } aside summary:hover { background: #202023 !important; } /* The three fills above are the same trap as the scrollbar: near-black, with no appearance qualifier, written when this sheet was not actually loading. The sidebar is #f7f7f9 in light appearance under every panel theme, so hovering a nav item there would have turned it into a black bar. */ html[data-appearance="light"] aside [data-nav-key]:hover { background: #e8e8ee !important; } html[data-appearance="light"] aside [data-nav-key].active, html[data-appearance="light"] aside [data-nav-key][aria-current="page"] { background: #e2e2ea !important; } html[data-appearance="light"] aside summary:hover { background: #ececf1 !important; } /* Home sticky notes: subtle depth + lift on hover */ main .home-sticky-note { border-radius: 10px !important; transition: transform .15s ease, box-shadow .15s ease !important; } main .home-sticky-note:hover { transform: translateY(-2px) rotate(-.3deg) !important; box-shadow: 0 16px 32px rgba(0,0,0,.28) !important; } /* === End panel polish === */