/* ============================================================================ Directors Collection — Operator Console · Theme + Component Layer ---------------------------------------------------------------------------- Layers on TOP of Bootstrap 5.3 (which Shiny already ships) + Bootstrap Icons. Load order in the app head: 1. Bootstrap 5.3 (shipped by Shiny) 2. bootstrap-icons.css (CDN) 3. colors_and_type.css ← design tokens 4. dc-theme.css ← THIS FILE Dark mode uses Bootstrap's native . ============================================================================ */ /* ───────────────────────────────────────────────────────────────────────── 1 · Map design tokens onto Bootstrap's CSS variables. This is what makes stock Bootstrap components (.btn, .badge, .form-control, .alert…) adopt the refined palette without touching their markup. ───────────────────────────────────────────────────────────────────────── */ :root { --bs-primary: var(--dc-primary); --bs-primary-rgb: 47, 109, 240; /* #2f6df0 */ --bs-success: var(--dc-ok); --bs-warning: var(--dc-warn); --bs-danger: var(--dc-danger); --bs-body-bg: var(--dc-bg); --bs-body-color: var(--dc-ink); --bs-border-color: var(--dc-line); --bs-border-radius: var(--dc-radius); --bs-border-radius-sm: var(--dc-radius-sm); --bs-border-radius-lg: var(--dc-radius-lg); --bs-font-sans-serif: var(--dc-font-sans); --bs-body-font-size: var(--dc-fs-base); --bs-link-color: var(--dc-primary); --bs-link-hover-color: color-mix(in oklch, var(--dc-primary) 80%, black); } :root[data-bs-theme="dark"] { --bs-primary-rgb: 110, 150, 245; --bs-body-bg: var(--dc-bg); --bs-body-color: var(--dc-ink); --bs-border-color: var(--dc-line); --bs-emphasis-color: var(--dc-ink); --bs-secondary-color: var(--dc-muted); --bs-tertiary-bg: var(--dc-panel-2); } body { font-family: var(--dc-font-sans); font-size: var(--dc-fs-base); color: var(--dc-ink); background: var(--canvas); } code, kbd, samp, .font-monospace, .dc-mono { font-family: var(--dc-font-mono); } /* Buttons keep Bootstrap's structure; we just tighten the default size to the operator-dense rhythm and add a "dashed line" variant used for lazy actions. */ /* Project-wide rule (operator, 2026-08-03): a real flex gap between a button's icon and its label. Text nodes become anonymous flex items, so icon-only and text-only buttons render exactly as before (single item, no gap applied) — no per-page space characters needed. */ .btn { border-radius: var(--dc-radius); font-weight: var(--dc-fw-semi); display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* …with one exception the rule above cannot reach on its own: Shiny's `ui.input_action_button()` wraps ALL of its content in a single ``, so the button has exactly one flex item and the gap has nothing to sit between — every icon+label action button in the app rendered with the icon touching its label (found 2026-08-10 on Encoding's "Generate previews"). Giving the wrapper the same treatment restores the project-wide 6px there too. */ .btn > .action-label { display: inline-flex; align-items: center; gap: 6px; } .btn-sm { font-size: var(--dc-fs-sm); } .dc-btn-line { background: var(--dc-panel); color: var(--dc-muted); border: 1px dashed var(--dc-line-2); } .dc-btn-line:hover { color: var(--dc-ink); border-color: var(--dc-faint); } /* ═══════════════════════════════════════════════════════════════════════════ 2 · APP SHELL — fixed sidebar + scrolling main, fullscreen (no page scroll) ═══════════════════════════════════════════════════════════════════════════ */ /* `ui.page_fluid()` wraps the whole app in Bootstrap's `.container-fluid`, which carries a default 0.75rem (12px) left/right padding — invisible under the old floating-card sidebar (its own 8px margin sat on top of it regardless), but it blocks the flush-to-viewport-edge rail below from ever reaching x:0. This app has exactly one `.container-fluid` (the fullscreen shell) and no other page uses side padding from it, so zeroing it here (scoped via :has to only this shell, not any other possible container-fluid usage) is safe. */ .container-fluid:has(.dc-app) { padding-left: 0; padding-right: 0; } .dc-app { display: flex; height: 100vh; overflow: hidden; background: var(--canvas); } .dc-sidebar { --rail: 216px; width: var(--rail); flex: 0 0 var(--rail); /* height comes from flex-stretch in .dc-app (100vh); no explicit height needed. Flush rail (operator feedback, replaces the shell-Phase-1 floating card from e11b00f): no margin/border-radius/shadow — full height and width of its rail, flush against the viewport's top/left/bottom edges. The ONLY border is a single right-side seam against .dc-main, using the standard line token. */ margin: 0; background: var(--surface); border: none; border-right: 1px solid var(--dc-line); border-radius: 0; display: flex; flex-direction: column; padding: var(--dc-space-4); overflow: hidden; transition: width var(--dc-dur) var(--dc-ease), flex-basis var(--dc-dur) var(--dc-ease); z-index: 1040; } /* Compact-only rail (operator-approved 2026-07-21, "compact-only (bold)"): the icon rail IS the sidebar — there is no expanded desktop state and no collapse toggle. `overflow: visible` lets the hover-title tooltip escape the 60px rail (it was clipped before). */ .dc-sidebar.is-collapsed { --rail: 60px; overflow: visible; } .dc-main { flex: 1 1 auto; min-width: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } .dc-main__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px; } /* ── Brand header ── */ .dc-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--dc-space-4) var(--dc-space-2) var(--dc-space-3); /* no border-bottom — floating card removes internal dividers */ } .dc-brand__logo { display: block; height: 60px; width: auto; max-width: 100%; /* invert token: 0 in light (black logo on grey surface), 1 in dark (white) */ filter: invert(var(--logo-invert)); } .dc-brand__mark-img { display: none; height: 32px; width: 32px; } .dc-brand__sub { font-size: 9.5px; font-weight: var(--dc-fw-bold); letter-spacing: var(--dc-track-label); text-transform: uppercase; color: var(--dc-faint); } /* ── Nav ── */ /* sidebar padding (8px) handles the horizontal inset; nav only needs vertical */ .dc-nav { flex: 1 1 auto; overflow-y: auto; padding: 6px 0 4px; } .dc-nav__section { font-size: 9.5px; font-weight: var(--dc-fw-bold); letter-spacing: var(--dc-track-label); text-transform: uppercase; color: var(--dc-faint); padding: 9px 6px 3px; } .dc-nav__link { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 0; color: var(--dc-muted); font-weight: var(--dc-fw-medium); font-size: 13px; text-decoration: none; cursor: pointer; position: relative; white-space: nowrap; transition: background var(--dc-dur-fast), color var(--dc-dur-fast); } .dc-nav__link + .dc-nav__link { margin-top: 1px; } /* Shiny's ui.input_action_link wraps the link content in an extra , which means the icon + label aren't direct children of .dc-nav__link — so the outer flex `gap: 9px` skips them. Propagate the same flex layout to .action-label so the gap reaches the icon/label pair. */ .dc-nav__link > .action-label { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; } .dc-nav__icon { flex: none; width: 20px; text-align: center; font-size: 15px; line-height: 1; color: var(--dc-faint); transition: color var(--dc-dur-fast); } .dc-nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dc-nav__link:hover { background: color-mix(in oklch, var(--dc-ink) 5%, transparent); color: var(--dc-ink); } .dc-nav__link:hover .dc-nav__icon { color: var(--dc-muted); } .dc-nav__link.is-active { background: transparent; color: var(--dc-primary); font-weight: var(--dc-fw-semi); } .dc-nav__link.is-active .dc-nav__icon { color: var(--dc-primary); } .dc-nav__link.is-active::before { /* the state-edge motif, reused */ content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0; background: var(--dc-primary); } .dc-nav__badge { margin-left: auto; font-family: var(--dc-font-mono); font-size: 11px; color: var(--dc-faint); } /* ── Sidebar footer — single-row: avatar · username · [controls at right] ── */ .dc-sidebar__footer { /* subtle top spacing; no border-top — floating card aesthetic has no dividers */ padding-top: var(--dc-space-4); margin-top: var(--dc-space-3); display: flex; align-items: center; gap: var(--dc-space-3); } .dc-user__avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--dc-ink); color: var(--surface); display: grid; place-items: center; font-size: 10px; font-weight: var(--dc-fw-bold); } /* username — hidden in collapsed state; see collapsed rule below */ .dc-user__name { font-size: 12px; font-weight: var(--dc-fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } /* controls pushed to the far right */ .dc-sidebar__controls { display: flex; flex-direction: row; gap: 2px; margin-left: auto; } /* ── Icon-only footer buttons — minimal, no border, transparent bg ── */ .dc-iconbtn { appearance: none; flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 6px; color: var(--dc-muted); font-size: 14px; padding: 0; cursor: pointer; white-space: nowrap; transition: background var(--dc-dur-fast), color var(--dc-dur-fast); text-decoration: none; } .dc-iconbtn:hover { background: color-mix(in oklch, var(--dc-ink) 8%, transparent); color: var(--dc-ink); } .dc-iconbtn i { font-size: 14px; } /* ── Collapsed (icon rail) state ── */ /* Brand: crop the logo to the heart-mark (left portion) — no image swap */ .dc-sidebar.is-collapsed .dc-brand { align-items: center; justify-content: center; /* Sidebar padding-top + this block = strip + table header, so the brand ends on the same y as the main pane's first horizontal line and the nav bands below fall on the table rows (full-screen composite, 2026-07-20). Was a fixed 60px (8 + 60 = 34 + 34); since the strip grew to 48px (2026-09-14, operator: "the menu's logo should align with top strip and table header") it is derived from the tokens: 48 + 34 - 8 = 74px. */ height: calc(var(--dc-strip-h) + var(--dc-topbar-h) - var(--dc-space-4)); box-sizing: border-box; padding: 0; } .dc-sidebar.is-collapsed .dc-brand__logo { display: none; } /* compact uses the mark */ .dc-sidebar.is-collapsed .dc-brand__mark-img { display: block; height: 26px; width: 26px; filter: invert(var(--logo-invert)); } .dc-sidebar.is-collapsed .dc-brand__sub { display: none; } /* Hide all text labels in the nav and footer. NOTE: .dc-iconbtn span is intentionally NOT included here — Shiny's input_action_link wraps the icon in , so targeting `span` inside .dc-iconbtn would hide the logout icon itself. No .dc-iconbtn in this markup has a standalone text span. */ .dc-sidebar.is-collapsed .dc-brand__text, .dc-sidebar.is-collapsed .dc-nav__label, .dc-sidebar.is-collapsed .dc-nav__badge, .dc-sidebar.is-collapsed .dc-user__name { display: none; } /* Nav section labels: hidden via height:0 + overflow:hidden + zero margin so every icon is evenly spaced (no per-section group gap in rail mode) */ .dc-sidebar.is-collapsed .dc-nav__section { padding: 0; border: none; margin: 0; height: 0; overflow: hidden; } /* Nav: drawer-language bands — full-width edge-to-edge dividers on the 34px grid. The nav cancels the sidebar's 8px horizontal padding so the dividers run the full rail width; `overflow: visible` (not auto) so the hover-title tooltips aren't clipped. */ .dc-sidebar.is-collapsed .dc-nav { padding: 0; margin: 0 calc(-1 * var(--dc-space-4)); overflow: visible; } /* Nav items: centred icon only, one 34px band per page */ .dc-sidebar.is-collapsed .dc-nav__link { justify-content: center; padding: 0; height: var(--dc-topbar-h); /* No horizontal dividers (operator 2026-08-10: "on the sidebar lets remove the horizontal dividers, we keep everything else as is"). The bands were already legible from their own height + the active fill and edge; the rules just added chrome. Everything else about the band is unchanged. */ } .dc-sidebar.is-collapsed .dc-nav__link + .dc-nav__link { margin-top: 0; } /* Active band: panel-2 fill + primary icon + square 3px primary left edge (inset shadow, not the ::before pill — the edge must span the full band). */ .dc-sidebar.is-collapsed .dc-nav__link.is-active { background: var(--dc-panel-2); box-shadow: inset 3px 0 0 var(--dc-primary); } .dc-sidebar.is-collapsed .dc-nav__link.is-active::before { display: none; } /* Shiny's input_action_link wraps content in so .dc-nav__link's `justify-content: center` only centers the wrapper, not the icon inside it. Propagate centering down one DOM level. */ .dc-sidebar.is-collapsed .dc-nav__link > .action-label { justify-content: center; } .dc-sidebar.is-collapsed .dc-nav__icon { font-size: 17px; } /* Footer: stack vertically; controls column; avatar centred */ .dc-sidebar.is-collapsed .dc-sidebar__footer { flex-direction: column; gap: var(--dc-space-2); align-items: center; } .dc-sidebar.is-collapsed .dc-sidebar__controls { margin-left: 0; flex-direction: column; } /* Tooltip on hover when collapsed */ .dc-sidebar.is-collapsed .dc-nav__link::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--dc-ink); color: var(--canvas); font-size: 12px; font-weight: var(--dc-fw-semi); padding: 4px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dc-dur-fast); z-index: 50; } .dc-sidebar.is-collapsed .dc-nav__link:hover::after { opacity: 1; } /* ── Mobile top bar + off-canvas sidebar ── */ .dc-topbar { display: none; } .dc-backdrop { display: none; } @media (max-width: 860px) { .dc-topbar { display: flex; align-items: center; gap: 12px; flex: none; height: 54px; padding: 0 14px; background: var(--dc-panel); border-bottom: 1px solid var(--dc-line); z-index: 1030; } .dc-topbar__title { font-weight: var(--dc-fw-bold); font-size: 15px; } .dc-hamburger { appearance: none; background: none; border: none; color: var(--dc-ink); font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 6px; } .dc-hamburger:hover { background: color-mix(in oklch, var(--dc-ink) 6%, transparent); } .dc-sidebar { position: fixed; left: 0; top: 0; --rail: 280px; /* remove float margin + rounded corners for the off-canvas slide-in */ margin: 0; border-radius: 0; /* explicit height required for fixed-positioned element */ height: 100vh; padding: var(--dc-space-4) var(--dc-space-6); /* more breathing room on mobile */ transform: translateX(-100%); box-shadow: var(--dc-shadow-lg); } .dc-sidebar.is-open { transform: translateX(0); } .dc-sidebar.is-collapsed { --rail: 280px; } /* never rail-collapse on mobile */ /* restore all text labels in mobile off-canvas (collapsed class is ignored on mobile) */ .dc-sidebar.is-collapsed .dc-nav__label, .dc-sidebar.is-collapsed .dc-nav__section, .dc-sidebar.is-collapsed .dc-user__name { display: revert; } .dc-sidebar.is-collapsed .dc-brand { align-items: flex-start; padding: var(--dc-space-4) 0 var(--dc-space-3); justify-content: flex-start; height: auto; } .dc-sidebar.is-collapsed .dc-brand__logo { height: 60px; width: auto; object-fit: unset; max-width: 100%; } .dc-sidebar.is-collapsed .dc-brand__sub { display: block; } .dc-sidebar.is-collapsed .dc-nav__section { padding: 9px 6px 3px; border: none; margin: 0; height: auto; overflow: visible; } /* undo the desktop band treatment — mobile off-canvas is a labelled list */ .dc-sidebar.is-collapsed .dc-nav { margin: 0; padding: 6px 0 4px; overflow-y: auto; } .dc-sidebar.is-collapsed .dc-nav__link { justify-content: flex-start; padding: 8px 10px; height: auto; border-bottom: none; } .dc-sidebar.is-collapsed .dc-nav__link:first-of-type { border-top: none; } .dc-sidebar.is-collapsed .dc-nav__link + .dc-nav__link { margin-top: 1px; } .dc-sidebar.is-collapsed .dc-nav__link.is-active { background: transparent; box-shadow: none; } .dc-sidebar.is-collapsed .dc-nav__link.is-active::before { display: block; } .dc-sidebar.is-collapsed .dc-nav__link::after { display: none; } /* no hover tooltips on touch */ .dc-sidebar.is-collapsed .dc-sidebar__footer { flex-direction: row; gap: var(--dc-space-3); align-items: center; } .dc-sidebar.is-collapsed .dc-sidebar__controls { margin-left: auto; flex-direction: row; } .dc-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 1035; background: color-mix(in oklch, black 45%, transparent); } .dc-main__scroll { padding: 16px; } } /* ═══════════════════════════════════════════════════════════════════════════ 3 · PAGE PRIMITIVES ═══════════════════════════════════════════════════════════════════════════ */ .dc-page-header { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--dc-line); } .dc-page-header__titles { flex: 1 1 auto; min-width: 0; } .dc-page-header__title { font-size: var(--dc-fs-xl); font-weight: var(--dc-fw-bold); line-height: 1.1; letter-spacing: -0.02em; margin: 0; } .dc-page-header__sub { color: var(--dc-muted); font-size: var(--dc-fs-sm); margin-top: 3px; } .dc-page-header__actions { display: flex; gap: 8px; align-items: center; flex: none; } .dc-stat-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .dc-stat { flex: 1 1 0; min-width: 120px; background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: var(--dc-radius); padding: 12px 14px; } .dc-stat__value { font-size: 22px; font-weight: var(--dc-fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; } .dc-stat__label { font-size: 11px; color: var(--dc-faint); text-transform: uppercase; letter-spacing: var(--dc-track-label); margin-top: 4px; } .dc-card { background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: var(--dc-radius); } /* ── Login / invite card (.dc-login) ── drawer.css maps every `.dc-card` Shiny control onto the drawer's flush edit register (28px inputs, zero field margin). Right for a key/value grid inside a drawer; on the sign-in card it stacked label-input-label- input with no air (operator 2026-09-14: "the login looks squeezed"). These win on specificity and put a form's spacing back on that one card. */ .dc-card.dc-login .shiny-input-container { margin-bottom: 16px; } .dc-card.dc-login .form-label { margin-bottom: 6px; font-size: 12.5px; color: var(--dc-muted); } .dc-card.dc-login .form-control { min-height: 36px; padding: 6px 10px; font-size: 13.5px; } .dc-card.dc-login .btn { min-height: 38px; } /* ── Step strip (compressed wizard progress; reused across drawers) ── */ .dc-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dc-step { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: var(--dc-fw-semi); color: var(--dc-faint); padding: 5px 10px; border-radius: var(--dc-radius-pill); background: var(--dc-panel-2); border: 1px solid var(--dc-line); white-space: nowrap; cursor: default; } .dc-step__n { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; background: var(--dc-line-2); color: var(--dc-panel); } .dc-step.is-done { color: color-mix(in oklch, var(--dc-ok) 60%, black); background: var(--dc-ok-soft); border-color: color-mix(in oklch, var(--dc-ok) 30%, white); } .dc-step.is-done .dc-step__n { background: var(--dc-ok); } .dc-step.is-current { color: var(--dc-primary); background: var(--dc-primary-soft); border-color: var(--dc-primary-line); } .dc-step.is-current .dc-step__n { background: var(--dc-primary); } .dc-steps__sep { color: var(--dc-line-2); font-size: 11px; } :root[data-bs-theme="dark"] .dc-step.is-done { color: color-mix(in oklch, var(--dc-ok) 35%, white); } /* ── Help popover (replaces always-on helper paragraphs to save space) ── explanation… Shows on hover (desktop) and on tap via a .show toggle (mobile). */ .dc-help { position: relative; display: inline-flex; vertical-align: middle; } .dc-help__btn { appearance: none; background: none; border: none; color: var(--dc-faint); cursor: pointer; padding: 0 2px; font-size: 0.62em; line-height: 1; display: inline-flex; } .dc-help__btn:hover { color: var(--dc-primary); } .dc-help__pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: max-content; max-width: 280px; background: var(--dc-ink); color: var(--dc-bg); font-size: 12px; font-weight: var(--dc-fw-normal); line-height: 1.45; padding: 8px 11px; border-radius: 7px; box-shadow: var(--dc-shadow); opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .12s, transform .12s; } .dc-help:hover .dc-help__pop, .dc-help.show .dc-help__pop { opacity: 1; visibility: visible; transform: translateY(0); } /* ── Pills (status) ── */ .dc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--dc-fw-bold); padding: 2px 9px; border-radius: var(--dc-radius-pill); white-space: nowrap; } .dc-pill--decision { background: var(--dc-primary-soft); color: color-mix(in oklch, var(--dc-primary) 72%, black); } .dc-pill--locked { background: var(--dc-ok-soft); color: color-mix(in oklch, var(--dc-ok) 62%, black); } .dc-pill--running { background: var(--dc-warn-soft); color: color-mix(in oklch, var(--dc-warn) 55%, black); } .dc-pill--pending { background: color-mix(in oklch, var(--dc-ink) 8%, transparent); color: var(--dc-muted); } .dc-pill--danger { background: var(--dc-danger-soft); color: color-mix(in oklch, var(--dc-danger) 62%, black); } :root[data-bs-theme="dark"] .dc-pill--decision { color: color-mix(in oklch, var(--dc-primary) 30%, white); } :root[data-bs-theme="dark"] .dc-pill--locked { color: color-mix(in oklch, var(--dc-ok) 35%, white); } :root[data-bs-theme="dark"] .dc-pill--running { color: color-mix(in oklch, var(--dc-warn) 40%, white); } /* ── Chips (mono metadata / profiles) ── */ .dc-chip { font-family: var(--dc-font-mono); font-size: 12px; background: var(--dc-panel-2); border: 1px solid var(--dc-line); border-radius: var(--dc-radius-sm); padding: 1px 7px; color: var(--dc-ink); white-space: nowrap; } .dc-chip--rec { border-color: var(--dc-primary-line); background: var(--dc-primary-soft); } .dc-chip--imdb { background: #F5DE50; color: #111; border-color: #e3c200; font-weight: var(--dc-fw-semi); } /* ── State-edge list rows (the core list motif) ── */ .dc-row { position: relative; display: flex; align-items: center; gap: 12px; background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: var(--dc-radius); padding: 10px 14px 10px 16px; overflow: hidden; } .dc-row + .dc-row { margin-top: 8px; } .dc-row__edge { position: absolute; left: 0; top: 0; bottom: 0; width: var(--dc-edge-width); } .dc-row--decision .dc-row__edge { background: var(--dc-edge-decision); } .dc-row--locked .dc-row__edge { background: var(--dc-edge-locked); } .dc-row--locked { background: color-mix(in oklch, var(--dc-ok) 5%, var(--dc-panel)); } .dc-row--running .dc-row__edge { background: var(--dc-edge-running); } .dc-row--pending .dc-row__edge { background: var(--dc-edge-pending); } .dc-row__title { font-weight: var(--dc-fw-semi); } .dc-row__spec { font-family: var(--dc-font-mono); font-size: var(--dc-fs-sm); color: var(--dc-muted); } .dc-row--locked-line { padding: 7px 12px 7px 16px; } /* ── Dense table ── */ .dc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .dc-table thead th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--dc-track-label); color: var(--dc-faint); font-weight: var(--dc-fw-bold); padding: 8px 12px; border-bottom: 1px solid var(--dc-line); white-space: nowrap; position: sticky; top: 0; background: var(--dc-panel-2); z-index: 1; } .dc-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--dc-line); } .dc-table tbody tr:hover { background: var(--dc-panel-2); cursor: pointer; } .dc-table tbody tr.is-selected { background: var(--dc-primary-soft); } .dc-table .dc-mono { font-family: var(--dc-font-mono); font-size: 12px; color: var(--dc-muted); } /* ── Inputs ── */ .form-control, .form-select { border-radius: var(--dc-radius); border-color: var(--dc-line-2); background: var(--dc-panel); color: var(--dc-ink); } .form-control:focus, .form-select:focus { border-color: var(--dc-primary-line); box-shadow: var(--dc-shadow-focus); } /* ── Selectize widgets (shipped with Shiny; used by ui.input_selectize) ── Shiny's selectize.css uses fixed greys. Re-theme so multi-select chips adopt the DC palette in both modes. */ .selectize-control .selectize-input, .selectize-input.input-active { background: var(--dc-panel); color: var(--dc-ink); border: 1px solid var(--dc-line-2); border-radius: var(--dc-radius); font-family: var(--dc-font-sans); font-size: var(--dc-fs-sm); box-shadow: none; } .selectize-input.focus { border-color: var(--dc-primary-line); box-shadow: var(--dc-shadow-focus); } .selectize-input > input::placeholder { color: var(--dc-faint); } .selectize-dropdown, .selectize-dropdown-content { background: var(--dc-panel); color: var(--dc-ink); border: 1px solid var(--dc-line-2); border-radius: var(--dc-radius); font-size: var(--dc-fs-sm); } .selectize-dropdown .active, .selectize-dropdown [data-selectable]:hover { background: var(--dc-primary-soft); color: var(--dc-ink); } .selectize-input .item { background: var(--dc-primary-soft); color: color-mix(in oklch, var(--dc-primary) 72%, black); border-radius: var(--dc-radius-sm); font-size: 12px; padding: 1px 7px; border: none; } :root[data-bs-theme="dark"] .selectize-input .item { color: color-mix(in oklch, var(--dc-primary) 30%, white); } /* ── Bootstrap nav-tabs (used by the film detail drawer) ── Underline-only style; active = primary colour + 2px bottom border. */ .nav-tabs { border-bottom: 1px solid var(--dc-line); gap: 2px; } .nav-tabs .nav-link { color: var(--dc-muted); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; font-size: var(--dc-fs-sm); font-weight: var(--dc-fw-semi); border-radius: 0; transition: color var(--dc-dur-fast), border-color var(--dc-dur-fast); } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--dc-ink); /* Classic alpha-overlay hover. We tried color-mix with --dc-panel before, but in dark mode .split-detail flips to --dc-panel-2 (one step lighter than --dc-panel), so the mix-against-panel result was LOWER lightness than the surface the tab actually sits on → visually invisible. Explicit rgba in light + a dark-theme override gives a clearly-different hover overlay regardless of which panel token sits behind the drawer. */ background-color: rgba(0, 0, 0, 0.06); border-bottom-color: var(--dc-line-2); } :root[data-bs-theme="dark"] .nav-tabs .nav-link:hover, :root[data-bs-theme="dark"] .nav-tabs .nav-link:focus { background-color: rgba(255, 255, 255, 0.07); } .nav-tabs .nav-link.active { color: var(--dc-primary); background: transparent; border-bottom: 2px solid var(--dc-primary); } :root[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: color-mix(in oklch, var(--dc-primary) 35%, white); border-bottom-color: var(--dc-primary); } .tab-content { padding-top: 14px; } /* ── Bootstrap dropdown-menu (View / Columns / etc.) ── */ .dropdown-menu { background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: var(--dc-radius); box-shadow: var(--dc-shadow); color: var(--dc-ink); } .dropdown-item { color: var(--dc-ink); font-size: var(--dc-fs-sm); } .dropdown-item:hover, .dropdown-item:focus { background: var(--dc-primary-soft); color: var(--dc-ink); } /* ── Bootstrap outline-secondary buttons (More filters / View / Columns) Tighten to token greys + DC rhythm. */ .btn-outline-secondary { --bs-btn-color: var(--dc-muted); --bs-btn-border-color: var(--dc-line-2); --bs-btn-hover-color: var(--dc-ink); --bs-btn-hover-bg: color-mix(in oklch, var(--dc-ink) 5%, transparent); --bs-btn-hover-border-color: var(--dc-line-2); --bs-btn-active-color: var(--dc-ink); --bs-btn-active-bg: color-mix(in oklch, var(--dc-ink) 8%, transparent); --bs-btn-active-border-color: var(--dc-line-2); font-weight: var(--dc-fw-semi); border-radius: var(--dc-radius); } /* ── Shiny render.DataGrid theming ── render.DataGrid renders as containing `.shiny-data-grid.shiny-data-grid-grid` (or `-table` for non-grid mode). The widget injects its own CSS at runtime via JS that scopes defaults to `shiny-data-frame { … }`. Declaring our overrides on the SAME `shiny-data-frame` selector matches the widget's specificity, so source order in this file wins. The :root pattern lost the cascade race. The widget's geometry (border-collapse:separate; each cell gets border-right + border-bottom + first-child border-left) means: • horizontal lines = cell `border-bottom` • vertical lines = cell `border-right` and first-child `border-left` We keep `--gridlines-style: solid` so horizontals render, then null out `border-left-style` and `border-right-style` on cells to kill verticals. */ /* Custom-property overrides for the DataGrid. The widget appends its own `