:root { /* light theme vars here (same as your :root now) */ /* Light theme */ /* Base surfaces */ --color-bg: #FFFFFF; --color-bg-semi: rgba(255, 255, 255, 0.6); --color-entity-actions-bg: #FCFCFC; --color-calendar-no-business: #FBFBFC; --color-action-link: rgb(81, 81, 84); --color-divider: rgb(200,200,200); --color-panel-bg: rgba(0,0,0, 0.03); /* Layout / sidebar */ --color-sidebar-bg: rgb(246, 246, 246); --color-sidebar-bga: rgba(246, 246, 246, 0.7); --color-sidebar-border: rgb(237, 237, 237); /* Text */ --color-text-primary: rgb(29, 29, 31); --color-text-muted: rgb(110, 110, 115); --color-text-subtle: rgb(135, 135, 140); --color-text-event: rgba(0, 0, 0, 0.88); /* Borders */ --color-border-subtle: rgb(237, 237, 237); --color-border-strong: #e0e0e0; --color-border-input: #ccc; --color-border-tab: #E8E8EC; /* Dropdowns / inputs */ --color-dropdown-bg: #FFFFFF; --color-dropdown-hover-bg: #f5f5f5; /* Accents (purple) */ --color-accent: rgb(0, 102, 204); /* rgb(99, 3, 253);*/ --color-accent-link-border-subtle: color-mix(in srgb, var(--color-accent) 20%, transparent); --color-accent-soft: #f3ebff; --color-accent-calendar-bg: rgba(99, 3, 253, 0.06); --color-accent-calendar-hover-bg: rgba(99, 3, 253, 0.2); --color-accent-calendar-dot: rgba(99, 3, 253, 1); /* Buttons */ --color-btn-bg: rgb(226, 226, 228); --color-btn-bg-neutral: rgb(226, 226, 228); /* always gray — never colorized by data-color-theme */ --color-btn-hover-bg: rgb(230, 240, 250); /* Primary buttons (Save / submit) follow the accent. color-mix darkens * 15% for the hover state. Both light and dark themes use the same * formula since accent is already lightness-tuned per scheme. */ --color-btn-primary-bg: var(--color-accent); --color-btn-primary-hover-bg: color-mix(in srgb, var(--color-accent) 85%, black); --color-btn-primary-text: #FFFFFF; --color-btn-hover-text: rgb(0, 102, 204); --color-btn-primary-shadow: var(--color-accent); --color-btn-primary-shadow-ring: rgb(230, 240, 250); /* Neutral copies of borders that should stay gray under any color theme */ --color-sidebar-border-neutral: rgb(237, 237, 237); --color-border-subtle-neutral: rgb(237, 237, 237); /* Calendar / special states */ --color-today-bg: rgb(227, 0, 0); --color-today-text: #FFFFFF; --color-calendar-monthweek-bg: rgba(118, 118, 128, 0.12); --color-calendar-orange-bg: rgba(255, 204, 0, 0.2); --color-calendar-orange-hover-bg: rgb(255, 204, 0); --color-calendar-orange-dot: #F19A37; /* Misc */ --color-entry-hover: rgb(245, 245, 247); /* Shadows */ --shadow-soft: rgba(0, 0, 0, 0.04); --shadow-medium: rgba(0, 0, 0, 0.06); /* Legacy / only in comments or assets */ --color-svg-icon: #333; --color-comment-muted: #999; --color-comment-border: #eee; /* Layout */ --main-area-sideways-padding: 48px; /* horizontal gutter for entity-actions, detail-header(-row), tabs-container */ } /* Theme switching: * - System default (Auto): apply dark vars when prefers-color-scheme: dark * AND the user has not explicitly chosen "light". * - Explicit "light": suppresses both the @media block and the * data-theme="dark" block (light :root remains). * - Explicit "dark": html[data-theme="dark"] applies dark vars * regardless of system preference. * * The :not() chain on the @media rule excludes both explicit choices so * the user's preference is honored over the OS one. The same dark vars * are duplicated under html[data-theme="dark"] for explicit dark mode. */ @media (prefers-color-scheme: dark) { /* :where() neutralizes the specificity of the :not() filters so this * rule stays at (0,1,0) — same as the light :root above and lower * than the html[data-color-theme="..."] color-theme rules below. * That's what lets a color-theme's --color-accent override survive in * dark mode (it does in light too — same cascade ordering). */ :root:where(:not([data-theme="light"])):where(:not([data-theme="dark"])) { /* Base surfaces */ --color-bg: #1C1C1E; --color-bg-semi: rgba(28, 28, 30, 0.6); --color-entity-actions-bg: rgb(38, 38, 40); --color-calendar-no-business: #202023; --color-action-link: rgb(171, 171, 174); --color-divider: rgb(70,70,70); --color-panel-bg: rgba(255,255,255, 0.03); /* Layout / sidebar */ --color-sidebar-bg: rgb(32, 32, 35); --color-sidebar-bga: rgb(32, 32, 35, 0.5); --color-sidebar-border: rgb(50, 50, 54); /* Text */ --color-text-primary: #f5f5f7; --color-text-muted: #a1a1a6; --color-text-subtle: #8e8e93; --color-text-event: #f5f5f7; /* Borders */ --color-border-subtle: #27272A; --color-border-strong: #3a3a3c; --color-border-input: #3a3a3c; --color-border-tab: #2c2c2e; /* Dropdowns / inputs */ --color-dropdown-bg: #1c1c1e; --color-dropdown-hover-bg: #2c2c2e; /* Accents (purple-ish) */ --color-accent: rgb(59, 130, 247); /*#b58cff;*/ --color-accent-soft: rgba(181, 140, 255, 0.16); --color-accent-link-border-subtle: color-mix(in srgb, var(--color-accent) 35%, transparent); --color-accent-calendar-bg: rgba(181, 140, 255, 0.2); --color-accent-calendar-hover-bg: rgba(181, 140, 255, 0.35); --color-accent-calendar-dot: rgba(181, 140, 255, 1); /* Buttons */ --color-btn-bg: #2c2c2e; --color-btn-bg-neutral: #2c2c2e; /* always gray — never colorized */ --color-btn-hover-bg: #3a3a3c; --color-btn-primary-bg: var(--color-accent); --color-btn-primary-hover-bg: color-mix(in srgb, var(--color-accent) 85%, black); --color-btn-primary-text: #ffffff; --color-btn-hover-text: #4da3ff; --color-btn-primary-shadow: var(--color-accent); --color-btn-primary-shadow-ring: rgba(10, 132, 255, 0.25); --color-sidebar-border-neutral: rgb(50, 50, 54); --color-border-subtle-neutral: #27272A; /* Calendar / special states */ --color-today-bg: #ff3b30; --color-today-text: #ffffff; --color-calendar-monthweek-bg: rgba(120, 120, 128, 0.32); --color-calendar-orange-bg: rgba(255, 214, 10, 0.18); --color-calendar-orange-hover-bg: rgba(255, 214, 10, 0.7); --color-calendar-orange-dot: #ffd60a; /* Misc */ --color-entry-hover: rgb(36, 36, 38); /* Shadows */ --shadow-soft: rgba(0, 0, 0, 0.2); --shadow-medium: rgba(0, 0, 0, 0.3); } } /* Explicit user choice: dark mode regardless of system preference. * Placed BEFORE the color-theme blocks so a color theme's --color-accent * (and any other explicit override) wins by source order in dark mode. */ html[data-theme="dark"] { /* Base surfaces */ --color-bg: #1C1C1E; --color-bg-semi: rgba(28, 28, 30, 0.6); --color-entity-actions-bg: rgb(38, 38, 40); --color-calendar-no-business: #202023; --color-action-link: rgb(171, 171, 174); --color-divider: rgb(70,70,70); --color-panel-bg: rgba(255,255,255, 0.03); /* Layout / sidebar */ --color-sidebar-bg: rgb(32, 32, 35); --color-sidebar-bga: rgb(32, 32, 35, 0.5); --color-sidebar-border: rgb(50, 50, 54); --color-sidebar-border-neutral: rgb(50, 50, 54); /* Text */ --color-text-primary: #f5f5f7; --color-text-muted: #a1a1a6; --color-text-subtle: #8e8e93; --color-text-event: #f5f5f7; /* Borders */ --color-border-subtle: #27272A; --color-border-subtle-neutral: #27272A; --color-border-strong: #3a3a3c; --color-border-input: #3a3a3c; --color-border-tab: #2c2c2e; /* Dropdowns / inputs */ --color-dropdown-bg: #1c1c1e; --color-dropdown-hover-bg: #2c2c2e; /* Accents (purple-ish) */ --color-accent: rgb(59, 130, 247); --color-accent-soft: rgba(181, 140, 255, 0.16); --color-accent-link-border-subtle: color-mix(in srgb, var(--color-accent) 35%, transparent); --color-accent-calendar-bg: rgba(181, 140, 255, 0.2); --color-accent-calendar-hover-bg: rgba(181, 140, 255, 0.35); --color-accent-calendar-dot: rgba(181, 140, 255, 1); /* Buttons */ --color-btn-bg: #2c2c2e; --color-btn-bg-neutral: #2c2c2e; --color-btn-hover-bg: #3a3a3c; --color-btn-primary-bg: var(--color-accent); --color-btn-primary-hover-bg: color-mix(in srgb, var(--color-accent) 85%, black); --color-btn-primary-text: #ffffff; --color-btn-hover-text: #4da3ff; --color-btn-primary-shadow: var(--color-accent); --color-btn-primary-shadow-ring: rgba(10, 132, 255, 0.25); /* Calendar / special states */ --color-today-bg: #ff3b30; --color-today-text: #ffffff; --color-calendar-monthweek-bg: rgba(120, 120, 128, 0.32); --color-calendar-orange-bg: rgba(255, 214, 10, 0.18); --color-calendar-orange-hover-bg: rgba(255, 214, 10, 0.7); --color-calendar-orange-dot: #ffd60a; /* Misc */ --color-entry-hover: rgb(36, 36, 38); /* Shadows */ --shadow-soft: rgba(0, 0, 0, 0.2); --shadow-medium: rgba(0, 0, 0, 0.3); } /* ─── Color themes ─────────────────────────────────────────────────────── * Each theme overrides --color-accent and tints --color-sidebar-bg / * --color-btn-bg with the same hue and saturation as the accent (via * --th-h / --th-s) and the existing neutral-gray luminance: * light: sidebar 96% btn 89% * dark: sidebar 13% btn 18% * * data-color-theme="default" → no override (tenant / app default applies) * data-color-theme="neutral" → existing gray look (hue 0, sat 0%) * data-color-theme=... → tinted accent + bgs * * Selectable from the user dropdown via data-color-theme on . * ──────────────────────────────────────────────────────────────────────── */ html[data-color-theme="neutral"] { --th-h: 0; --th-s: 0%; } html[data-color-theme="blue"] { --th-h: 206; --th-s: 100%; --color-accent: #008EFC; } html[data-color-theme="green"] { --th-h: 130; --th-s: 75%; --color-accent: #18A42F; } html[data-color-theme="yellow"] { --th-h: 47; --th-s: 100%; --color-accent: #EEBC00; } html[data-color-theme="orange"] { --th-h: 33; --th-s: 100%; --color-accent: #F98800; } html[data-color-theme="red"] { --th-h: 1; --th-s: 97%; --color-accent: #FC2B27; } html[data-color-theme="purple"] { --th-h: 289; --th-s: 57%; --color-accent: #B245CC; } /* Light luminance — applies whenever an explicit theme is active. * * Background luminances: * sidebar-bg 96% (was rgb(246,246,246)) * btn-bg 89% (was rgb(226,226,228)) * Border luminances (slightly darker than the surfaces they sit on): * border-subtle 93% (was rgb(237,237,237)) * sidebar-border 88% (matches sidebar-bg → btn-bg transition) */ /* Neutral excluded — its --th-s is 0% and the original light :root values * are already pure gray; running them through the formula adds nothing * and would also bleed into dark mode (this block is unconditional). */ html[data-color-theme="blue"], html[data-color-theme="green"], html[data-color-theme="yellow"], html[data-color-theme="orange"], html[data-color-theme="red"], html[data-color-theme="purple"] { --color-sidebar-bg: hsl(var(--th-h) var(--th-s) 96%); --color-btn-bg: hsl(var(--th-h) var(--th-s) 89%); --color-border-subtle: hsl(var(--th-h) var(--th-s) 93%); --color-sidebar-border: hsl(var(--th-h) var(--th-s) 88%); /* Hover states colorize too — bg = light tint, text = the accent. */ --color-btn-hover-bg: hsl(var(--th-h) var(--th-s) 92%); --color-btn-hover-text: var(--color-accent); --color-entry-hover: hsl(var(--th-h) var(--th-s) 95%); /* Soft accent backing (icon hover bgs) */ --color-accent-soft: hsl(var(--th-h) var(--th-s) 92%); } /* Dark luminance: when system prefers dark AND user is in auto, OR when * user explicitly chose dark. Two matching blocks below. * * Background luminances: * sidebar-bg 13% (was rgb(32,32,35)) * btn-bg 18% (was #2c2c2e) * Border luminances: * border-subtle 16% (was #27272A) * sidebar-border 20% (was rgb(50,50,54)) */ /* Dark surfaces are originally near-gray (rgb(32,32,35) ≈ 4.5% saturation). * To stay faithful to that low-saturation character while picking up the * theme hue, derive the dark surface vars at low saturation and the * original luminance — so blue/red/etc. become subtle tints rather than * deep, vivid backdrops. * * --color-accent itself is NOT tweaked in dark mode — the theme's hex * (e.g. #008EFC) is kept as-is so the Save button, swatches, and * accent-soft alpha-blends all read consistently across themes. */ /* Neutral is excluded from dark-mode overrides — its --th-h is 0 and * --th-s is 0%, which would render every dark surface as pure-gray * (e.g. rgb(33, 33, 33)) and drop the original very-slight blue tint * of rgb(32, 32, 35). Instead we let the dark :root defaults flow * through unchanged for the neutral theme. */ @media (prefers-color-scheme: dark) { html[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="neutral"]):not([data-theme="light"]) { /* Surfaces: theme hue + ~original (low) saturation + original luminance */ --color-sidebar-bg: hsl(var(--th-h) 5% 13%); --color-btn-bg: hsl(var(--th-h) 3% 18%); --color-border-subtle: hsl(var(--th-h) 5% 16%); --color-btn-hover-bg: hsl(var(--th-h) 5% 22%); --color-entry-hover: hsl(var(--th-h) 3% 14%); /* Accents */ --color-sidebar-border: hsl(var(--th-h) 8% 20%); /* original was hsl(240, 4%, 20%); 8% keeps the colored hint subtle (yellow/green were too bright at full sat) */ --color-btn-hover-text: var(--color-accent); --color-accent-soft: color-mix(in srgb, var(--color-accent) 16%, transparent); /* Sidebar nav hover/active — needs visible theme tint, not the * near-gray --color-btn-bg. Higher saturation, hover-level luminance. */ --color-sidebar-nav-hover: hsl(var(--th-h) 15% 22%); /* low sat to stay close to neutral's subtle #2c2c2e hover */ } } html[data-theme="dark"][data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="neutral"]) { --color-sidebar-bg: hsl(var(--th-h) 5% 13%); --color-btn-bg: hsl(var(--th-h) 3% 18%); --color-border-subtle: hsl(var(--th-h) 5% 16%); --color-btn-hover-bg: hsl(var(--th-h) 5% 22%); --color-entry-hover: hsl(var(--th-h) 3% 14%); --color-sidebar-border: hsl(var(--th-h) 8% 20%); --color-btn-hover-text: var(--color-accent); --color-accent-soft: color-mix(in srgb, var(--color-accent) 16%, transparent); --color-sidebar-nav-hover: hsl(var(--th-h) 15% 22%); /* low sat to stay close to neutral's subtle #2c2c2e hover */ } /* ─── User-dropdown color swatch row ─────────────────────────────────── */ .color-swatch-row { display: flex; gap: 6px; padding: 8px 12px; justify-content: space-between; align-items: center; } .color-swatch { width: 22px; height: 22px; border-radius: 50%; background: var(--swatch, #888); flex: 0 0 22px; cursor: pointer; text-decoration: none; transition: transform 0.12s ease; box-sizing: content-box; } .color-swatch:hover { transform: scale(1.1); } .color-swatch.selected { outline: 2px solid var(--color-text-primary); outline-offset: 2px; } /* (The html[data-theme="dark"] block was moved earlier in the file — * before the color-theme blocks — so a color-theme's --color-accent * override wins by source order. See above, immediately after the * dark @media :root block.) */ /* ORIGINAL CSS BELOW, WITH COLORS USING VARIABLES */ html, body { margin:0; padding:0; background-color:var(--color-bg); color:var(--color-text-primary); } /* ICONS */ /* APPLE SF SYMBOLS */ @font-face { font-family: "SF Light"; src: url('/ui/SF-Pro-Display-Light.woff2') format('woff2'), url('/ui/SF-Pro-Display-Light.otf') format('opentype'); font-display: block; } @font-face { font-family: "SF Thin"; src: url('/ui/SF-Pro-Display-Thin.woff2') format('woff2'), url('/ui/SF-Pro-Display-Thin.otf') format('opentype'); font-display: block; } @font-face { font-family: "SF Medium"; src: url('/ui/SF-Pro-Display-Medium.woff2') format('woff2'), url('/ui/SF-Pro-Display-Medium.otf') format('opentype'); font-display: block; } * { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Text Remote", ui-sans-serif, sans-serif; font-size:16px; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; } label, h1, h2, h3, h4, h5, .tab-button, .small-pill, .sf-icon, .related-table th, .sort-asc, .sort-desc, .sidebar * { -webkit-user-select: none; user-select: none; cursor: default; } label, .tab-button, .small-pill, .related-table th, .sort-asc, .sort-desc { cursor: pointer; } p { margin:0; } .sf-icon, .sf-icon-and-label > span:first-child, .search-input-container:before { font-family: "SF Light"; font-size:16px; display:inline-block; width:32px; text-align:center; color:var(--color-accent); text-decoration:none; } div.sf-icon { font-family: "SF Light"; width:38px; height:32px; font-size:24px; line-height:32px; } button.sf-icon { appearance: none; background-color:transparent; border:none; } .menu-item .sf-icon { margin-left:-4px; margin-right:4px; } .sf-icon-and-label { display:flex; flex-direction:column; text-decoration:none; align-items:center; } .sf-icon-and-label > span:last-child { font-size:12px; } .sf-icon-and-label > * { color: var(--color-action-link) !important; } .sf-icon-and-label.disabled { opacity: 0.3; pointer-events: none; cursor: default; } /* render_icon() emits a masked
for named SVG icons. Make it behave like a glyph sibling: inherit the surrounding text color (not the accent), scale with the element's font-size (1em), and stay centered — so it matches in the menu, list rows (24px / text color) and the 80px detail-header badge (36px / muted). */ .sf-icon > div { width: 1em; height: 1em; background-color: currentColor; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Center the masked icon within its .sf-icon box (only when it holds one). */ .sf-icon:has(> div) { display: flex; align-items: center; justify-content: center; } /* SF-Symbol glyphs render visually larger than their nominal font-size, so a 1em-contained SVG looks small next to them — most noticeable in the big detail-header badge (80px / font 36). Scale the masked icon up there. */ .detail-header .icon > div { width: 1.6em; height: 1.6em; } /* Desktop Layout - Your existing styles */ .stage { display: flex; flex-direction: row; block-size: 100vh; } .column, .pseudocolumn { /* padding-left: 16px; padding-right: 16px; */ width: calc(min(max(378px, 100vw * 0.2), 450px)); box-sizing:border-box; } .column.main, .pseudocolumn.main { /*width: 100%;*/ flex:1; } .back-mobile {display:none;} /* Mobile Responsive Layout */ @media (max-width: 768px) { .back-mobile {display:inline-block;} .stage { overflow: hidden; position: relative; } .sidebar, .column, .column.main, .pseudocolumn, .pseudocolumn.main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.3s ease-in-out; } /* Default: show sidebar */ .sidebar { transform: translateX(0); z-index: 3; } .column, .pseudocolumn { transform: translateX(100%); z-index: 2; } .column.main, .pseudocolumn.main { transform: translateX(100%); z-index: 1; } /* State: show-list */ .stage.show-list .sidebar { transform: translateX(-100%); } .stage.show-list .column { transform: translateX(0); } .stage.show-list .column.main { transform: translateX(100%); } /* State: show-main */ .stage.show-main .sidebar { transform: translateX(-100%); } .stage.show-main .column { transform: translateX(-100%); } .stage.show-main .column.main { transform: translateX(0); } } .sidebar { background-color:var(--color-sidebar-bg); border-right: 1px solid var(--color-sidebar-border); /* --current-details-width: calc(100vw - calc(min(max(256px, 100vw * 0.12), 272px)) - calc(min(max(378px, 100vw * 0.2), 450px))); --current-list-width: calc(min(max(378px, 100vw * 0.2), 450px)); --current-nav-width: calc(min(max(256px, 100vw * 0.12), 272px)); */ width: calc(min(max(256px, 100vw * 0.12), 272px)); } .sidebar > div { display:flex; flex-direction:column; } .sidebar-main-part { flex:1; display:flex; flex-direction:column; /*inline-size:min(max(256px, 12vw), 272px);*/ gap:36px; padding:24px 16px 18px 16px; overflow-y:auto; position:relative; } .sidebar a, .dropdown-item { display:flex; flex-direction:row; font-size: 16px; letter-spacing: unset; line-height: 1.375; font-weight: 400; color: var(--color-text-primary) !important; border-radius:8px; margin-block-end: 2px; margin-inline: 4px; padding: 8px; padding-inline-start: 12px; text-decoration:none; } .sidebar .sidebar-main-part a:hover, .sidebar .sidebar-main-part a.active { /* Dark + colorized themes set --color-sidebar-nav-hover to a more * saturated tint (the surface btn-bg is intentionally near-gray); * everywhere else this falls back to --color-btn-bg, preserving the * existing light-mode and default/neutral look. */ background-color: var(--color-sidebar-nav-hover, var(--color-btn-bg)); } /* Second-level (child) menu items indent further than top-level ones. The base `.sidebar a` rule sets padding-inline-start:12px regardless of level; this higher-specificity rule bumps children to 40px. */ .sidebar a.menu-item-child { padding-inline-start: 40px; } .sidebar .tenant-logo { width:100px; padding-left:16px; } .column { /* padding-left:16px; padding-right:16px; */ /*width: min(max(378px, min(max(378px, 28vw), 450px)), 450px);*/ display:flex; flex-direction:column; overflow-y:auto; row-gap:16px; /* Neutral var: only the .sidebar's border-right gets colorized per * theme — list/main column dividers stay gray. */ border-right:1px solid var(--color-sidebar-border-neutral); } .column.list { /* overflow-y:hidden; */ } .column.list > *, .pseudocolumn.list > * { padding-left:16px; padding-right:16px; } .column.list > :last-child { margin-bottom:32px; } .column.main { /*width:100%;*/ padding:0; position:relative; display:flex; flex-direction:column; } .notification { display: flex; flex-direction: row; gap: 6px; position:fixed; z-index:10; bottom:20px; right:20px; line-height:58px; background-color:var(--color-text-primary); color:var(--color-bg); padding-left:17px; padding-right:20px; border-radius:18px; box-shadow: var(--shadow-medium) 0px 8px 32px 0px, var(--shadow-soft) 0px 2px 4px 0px, var(--shadow-medium) 0px 4px 16px 0px; } .notification .sf-icon { font-size:24px; line-height:60px; } .notification.success .sf-icon { color:#489F30; } /* ── Pending-downloads dev indicator ─────────────────────────────────────── Fixed top-right pill, dev-mode only. The PHP-side gate (`$GLOBALS['dev_mode']`) decides whether to emit the markup at all; the JS poller toggles visibility by remaining-count and updates the number inline. */ #tv-pending-indicator { position: fixed; top: 14px; right: 16px; z-index: 100; display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 12px; background-color: var(--color-text-primary); color: var(--color-bg); font-size: 13px; line-height: 18px; box-shadow: var(--shadow-medium) 0px 4px 12px 0px; font-variant-numeric: tabular-nums; } #tv-pending-indicator .tv-pending-count { font-weight: 700; font-size: 14px; } #tv-pending-indicator .tv-pending-label { opacity: 0.7; font-size: 12px; } .notification .notification-action { margin-left: 6px; padding: 4px 12px; border-radius: 10px; background-color: var(--color-bg); color: var(--color-text-primary); line-height: 28px; align-self: center; text-decoration: none; font-weight: 600; } .notification .notification-action:hover { opacity: 0.85; } .column-header { padding-top:15px; padding-bottom:12px; /* margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; */ box-sizing:border-box; position:sticky; top:0; display:flex; flex-direction:column; gap:18px; background-color:transparent; /*var(--color-bg-semi);*/ /*backdrop-filter: blur(16px);*/ background: linear-gradient( to bottom, var(--color-bg) 0, var(--color-bg) calc(100% - 12px), rgba(255, 255, 255, 0) 100% ); z-index:3; } .flex-row { display:flex; flex-direction: row; align-items:center; gap:12px; } .flex-row > .sf-icon:last-child { margin-right:-6px; } .column-header h5 { float:left; margin-bottom:4px; } h5 { margin-top:0; margin-bottom:0; font-size: 17px; letter-spacing: unset; line-height: 1.235294; color: var(--color-text-primary); flex:1; } h5 > a { color: inherit; text-decoration: none; } a.sf-icon, button.sf-icon { /*padding:4px; margin-top:-4px; border-radius:8px; */ /*margin-top: -7px;*/ border-radius: 8px; min-width: 30px; line-height: 30px; } a.sf-icon:hover, button.sf-icon:hover { background-color:var(--color-accent-soft); } a.sf-icon.dev, button.sf-icon.dev { padding:2px; justify-content: center; position:absolute; right:0; font-weight:normal; z-index:1; background: none; /* reset button default */ border: none; cursor: pointer; background: linear-gradient( 90deg, #1191f8, #6a80fc, #b05af8, #d84bb5, #f0437a, #f45a1a ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .dev-name { background: linear-gradient( 90deg, #1191f8, #6a80fc, #b05af8, #d84bb5, #f0437a, #f45a1a ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } h5 > a.sf-icon.dev, h5 > button.sf-icon.dev { position:static; } /* Dev dropdown button inside a dropdown wrapper */ .dev-dropdown {position:relative;} .dev-dropdown > button.sf-icon.dev { position: absolute; left:0; top:-6px; } /* Sidebar nav: dev toolbar pinned top-right of .sidebar-main-part */ .dev-nav-toolbar { position: absolute; top: 4px; right: 44px; z-index: 5; } /* Detail/form: dev toolbar aligned to the right, after actions strip */ /* Detail: dev icon pinned top-right of .column.main */ .column.main > .dropdown.dev-dropdown { position: absolute; top: 64px; right: 44px; z-index: 5; } /* List header: dev icon flows inline with the title */ .column-header h5 .dropdown.dev-dropdown { display: inline; } /* Style switcher inside a dropdown item */ .dropdown-item-switcher { padding: 0; } .entries-container { /* not used */ position:relative; flex:1; overflow-y:auto; --fade: 24px; -webkit-mask-image: linear-gradient( to bottom, transparent 0, black var(--fade), black 100% ); mask-image: linear-gradient( to bottom, transparent 0, black var(--fade), black 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .entries { display:flex; flex-direction:column; gap:2px; margin-top:-10px; } .entries > a, .entry { display:flex; flex-direction:row; align-items:center; column-gap: 12px; padding:4px 12px 4px 12px; min-height:48px; border-radius:12px; text-decoration:none; } .entries > a *, .entry * { color: var(--color-text-primary); } .entries > a:hover, .entry:hover { background-color: var(--color-entry-hover); } .entries > a.group, .entry.group { margin-bottom:12px; } .entries > a .flex-vertical .entry .flex-vertical { display:flex; flex-direction:column; gap:2px; } .entries > a .title, .entry .title { font-weight: 400; /*height: 20px;*/ letter-spacing: normal; line-height: 20px; } .entries > a .subtitle, .entry .subtitle { color: var(--color-text-muted); font-size:12px; line-height:16px; } .entries > a.active, .entry.active { background-color: var(--color-accent); /*color: var(--color-bg);*/ color:#FFFFFF; } .entries > a.active *, .entries > a.active .subtitle, .entry.active * { /*color: var(--color-bg) !important;*/ color:#FFFFFF; } .boxed-entry a:first-child { flex:1; } .boxed-entry a { border-bottom:none; text-decoration:none; } .grouping { display:grid; grid-template-columns: repeat(auto-fit, calc(33% - 16px)); gap: 24px; } .grouping > .field { display: flex; flex-direction: column; } /* type='image_url' fields render an directly inside .field-value (no class on the img per the design choice). Cap so a 4000px source doesn't blow out the layout — fits within the column and never exceeds 40% of viewport height. */ .field img { max-width: 100%; max-height: 40vh; height: auto; width: auto; } .entity-actions { padding: 19px var(--main-area-sideways-padding) 12px var(--main-area-sideways-padding); background-color:var(--color-entity-actions-bg); } .detail-header { margin-top:16px; margin-bottom:16px; padding-left: var(--main-area-sideways-padding); padding-right: var(--main-area-sideways-padding); display:flex; flex-direction:row; column-gap:16px; align-items: center; } .detail-header h4, .detail-header h4 *, .group-header-row h4, .group-header-row h4 * { font-size:24px; padding:0; margin:0; } .detail-header .icon { width:80px; height:80px; font-size:36px; line-height:80px; border-radius:80px; color: var(--color-text-muted); background-color:var(--color-sidebar-border-neutral); /* stays gray under any color theme */ } .detail-header .thumbnail-container, .entry .thumbnail-container { background-color:var(--color-sidebar-border); width:280px; height:280px; display:flex; justify-content:center; align-items:center; border-radius:10px; padding: 12px; } .detail-header .thumbnail-container > img, .entry .thumbnail-container > img { max-width:100%; max-height:100%; } .entry .thumbnail-container { /*margin: -12px; margin-right: 12px; */ margin:-8px; width:44px; height:44px; border-top-right-radius: 0; border-bottom-right-radius: 0; padding: 6px; background-color:transparent; } .avatar { border-radius:50%; max-width:40px; max-height:40px; margin-top:-6px; margin-bottom:-6px; } .initials-avatar { width:40px; height:40px; border-radius:50%; display:flex; justify-content:center; align-items:center; margin-top:-6px; margin-bottom:-6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* role-icon (sf-icon, initials-avatar, anything flagged as role-icon): keep contents on a single line and ellipsize if they overflow. */ .role-icon { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-properties { display:flex; flex-direction: column; gap:8px;; } .field-name, .record-count { color: var(--color-text-muted); font-size:12px; line-height:16px; } /* Header row */ .detail-header-row, .group-header-row { display: flex; justify-content: space-between; align-items: center; padding-right: var(--main-area-sideways-padding); } .detail-header { display: flex; align-items: center; gap: 1rem; } /* Keep icon/hero column fixed-width and let the title wrap instead of squeezing the icon to zero when the title is wide (e.g. many mfk chips). Mirror of the .entries.none / .entries.ab-rows fix in view-styles-v2.css. */ .detail-header > .icon, .detail-header > .sf-icon, .detail-header > .thumbnail-container, .detail-header > .avatar-stack, .detail-header > .initials-avatar, .detail-header > img.avatar { flex-shrink: 0; } .detail-header > h4 { flex: 1 1 0; min-width: 0; } .entity-actions { display: flex; align-items: flex-start; gap: 40px; } /* Dropdown */ .dropdown { position: relative; } .dropdown-toggle, .big-dropdown-toggle { cursor: pointer; } .big-dropdown-toggle { padding-left:0; } .dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background: var(--color-dropdown-bg); border-radius: 12px; padding:8px; box-shadow: var(--shadow-medium) 0px 8px 32px 0px, var(--shadow-soft) 0px 2px 4px 0px, var(--shadow-medium) 0px 4px 16px 0px; min-width: 100%; z-index: 1000; margin-top: 0.5rem; } .sidebar .dropdown-menu { top:unset; right:0; left:0; bottom:100%; margin-bottom:6px; width:100%; box-sizing:border-box; } .dropdown.open .dropdown-menu { display: block; } /* Add-new dropdown (detail header). The container layout (viewport height cap + flex column-wrap on wide screens / scroll on narrow) is applied INLINE by toggleDropdown() in v2/index.php: the open menu is detached to (so `.dropdown.open` selectors can't reach it) and its inline display:block would beat a stylesheet rule anyway. Here we only set the per-item width so wrapped columns line up — this matches wherever the menu is in the DOM. */ .dropdown-menu.add-new-menu .dropdown-item { width: 230px; box-sizing: border-box; } @media (max-width: 600px) { .dropdown-menu.add-new-menu .dropdown-item { width: auto; } } /* Menu search component — the "(search: …)" sidebar box + its floating results overlay. The panel is position:fixed (anchored under the box by JS) so it never disturbs the menu/list column; hiding it restores the UI as-is. */ .menu-search { padding: 4px 8px 8px; } .menu-search-results { position: fixed; z-index: 1200; background: var(--color-dropdown-bg, var(--color-bg)); border-radius: 12px; box-shadow: var(--shadow-medium) 0px 8px 32px 0px, var(--shadow-soft) 0px 2px 4px 0px; padding: 8px; overflow-y: auto; } .menu-search-results[hidden] { display: none; } /* the base .entries has margin-top:-10px (tucks under the list-column header) — undo it here so results don't ride up under their group title. */ .menu-search-results .entries { margin-top: 0; } .menu-search-group { margin-bottom: 12px; } .menu-search-group-title { font-size: 12px; font-weight: 600; color: var(--color-text-muted); padding: 4px 8px 0; margin-bottom: 6px; /* clear the first entry below */ } /* keyboard-highlighted result */ .menu-search-results .entry.ms-active { background-color: var(--color-entry-hover, var(--color-btn-bg)); border-radius: 10px; } .menu-search-empty, .menu-search-loading { padding: 12px; font-size: 13px; color: var(--color-text-muted); } .dropdown-item { white-space:nowrap; /* display: block; padding: 0.75rem 1rem; color: #333; text-decoration: none; border-bottom: 1px solid #eee; */ } .dropdown-item:last-child { border-bottom: none; } .dropdown-item:hover { background: var(--color-dropdown-hover-bg); } /* Dropdown section labels & dividers */ .dropdown-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); padding: 6px 12px 2px; } .dropdown-divider { height: 1px; background: var(--color-border-subtle); margin: 4px 8px; } /* Checkmark uses sf-icon sizing so it aligns with Dev Tools / Log out icons */ .dropdown-item .item-check { opacity: 0; } .dropdown-item.selected .item-check { opacity: 1; } /* Gradient icon for Developer Tools when dev mode is active (not checkmarks) */ .dropdown-item.selected .sf-icon:not(.item-check) { background: linear-gradient(90deg, #1191f8, #6a80fc, #b05af8, #d84bb5, #f0437a, #f45a1a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Dimmed state for sort-order items when no sort field is selected */ .dropdown-item.disabled { opacity: 0.35; pointer-events: none; } /* Tabs */ .tabs-container { padding-left: var(--main-area-sideways-padding); padding-right: var(--main-area-sideways-padding); position: relative; } .tabs-nav { display: flex; gap: 16px; border-bottom: 1px solid var(--color-border-tab); margin-bottom: 0; overflow-x: auto; scrollbar-width: none; } .tabs-nav::-webkit-scrollbar { display: none; } /* Grouped tab nav */ .tabs-nav-grouped { display: flex; flex-direction: column; gap: 0; border-bottom: none; /* rows handle their own borders */ } .tabs-nav-primary { display: flex; gap: 16px; border-bottom: 1px solid var(--color-border-tab); overflow-x: auto; scrollbar-width: none; } .tabs-nav-primary::-webkit-scrollbar { display: none; } .tabs-nav-secondary { display: none; gap: 12px; padding: 2px 0 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--color-border-tab); } .tabs-nav-secondary::-webkit-scrollbar { display: none; } .tab-group-pane.active { display: flex; } .tab-group-btn::after { content: ' ›'; font-size: 11px; opacity: 0.5; vertical-align: middle; } .tab-group-btn.active::after { content: ' ‹'; opacity: 0.8; } .tab-group-btn.active { color: var(--color-text-primary); border-bottom-color: var(--color-text-primary); } .tabs-nav-secondary .tab-button { font-size: 13px; padding: 5px 4px; color: var(--color-text-muted); } /* Restore spacing for the Details tab (properties view) */ .detail-properties { padding-top: 1.5rem; } .tab-button { padding: 8px 4px; border: none; background: transparent; color: var(--color-text-muted); border-bottom: 1px solid transparent; cursor: pointer; font-size: 16px; } .tab-button:hover { color: var(--color-text-primary); } .tab-button.active { color: var(--color-text-primary); border-bottom-color: var(--color-text-primary); } .tabs-content { position: relative; } .tab-pane { display: none; /* Horizontal scrolling is handled by descendants that need it: - tab-body (for ab-table / none — wide tables) - .rt-body (for shelf mode) Setting overflow-x:auto here would also promote overflow-y to auto (per CSS spec), causing a spurious vertical scrollbar inside the tab. */ overflow: visible; } .tab-pane.active { display: block; } .tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .tab-header h3 { margin: 0; } .common-table, .related-table { width:100%; } .common-table th, .related-table th, .bulk-edit-table th { text-align: left; font-size:12px; font-weight:normal; white-space: nowrap; padding-right:16px; position:relative; } .common-table td, .related-table td { height:56px; width:10%; white-space: nowrap; } .common-table td:empty::before, .related-table td:empty::before { content: "\00a0—"; /* a dash for empty cells */ } /* ── Div-based table (.rt) — default look mirrors .related-table ── */ .rt { display: table; width: 100%; border-collapse: collapse; } .rt-head { display: table-header-group; } .rt-body { display: table-row-group; } .rt-row { display: table-row; } .rt-th, .rt-td { display: table-cell; vertical-align: middle; } .rt-th { text-align: left; font-size: 12px; font-weight: normal; white-space: nowrap; padding-top: 1.5rem; padding-right: 16px; padding-bottom: 8px; position: relative; cursor: pointer; user-select: none; } .rt-th:first-child, .rt-td:first-child { padding-left: 16px; } .rt-td { height: 56px; white-space: nowrap; padding-right: 16px; border-bottom: none; } .rt-body .rt-row .rt-td:first-child { border-radius: 8px 0 0 8px; } .rt-body .rt-row .rt-td:last-child { border-radius: 0 8px 8px 0; } .rt-body .rt-row:hover .rt-td { background: var(--color-entry-hover); } .rt-td:empty::before { content: "\00a0—"; } /* gen_* /synthetic field referenced in a view but processor produced no value — surfaces missing-dependency / processor-bug situations loudly instead of rendering an empty cell. */ .rt-td.cell-error { color: var(--color-warning, #c00); background: var(--color-warning-bg, rgba(204, 0, 0, .08)); text-align: center; font-weight: 600; cursor: help; } .rt-actions-col { width: 1%; white-space: nowrap; text-align: right; } .rt .rt-head .rt-row .rt-th:hover { color: var(--color-accent); } .rt a.fk { text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid var(--color-accent-link-border-subtle); } .sort-asc:after, .sort-desc:after { font-family: "SF Light"; font-size:12px; display:inline-block; margin-left:4px; position:absolute; } .sort-asc:after { content:"􀄩" } .sort-desc:after { content:"􀄨"; } a.fk { color:unset; text-decoration:none; } /* Extra content emitted by process_{entity} via $record['gen_extra_content']. Default (no modifier, or .top) = stacked above the detail-content wrapper, flush against it (cancels .column's 16px row-gap). Other positions are utility classes opted into via $record['gen_extra_content_class']. */ .entity-extra-content { margin-bottom: -16px; } /* .top-sticky — stacked, but pinned to the top while scrolling the column */ .entity-extra-content.top-sticky { position: sticky; top: 0; z-index: 1; } /* Width of the side column for .left / .right / .left-sticky / .right-sticky. Override per-tenant/per-page by setting this custom property on a parent. */ :root { --entity-extra-content-side-width: 50%; } /* Side variants turn .column.main into a 2-column grid. The wrapper around the rest of the detail content (.detail-content) takes the other column, so the two siblings sit beside each other cleanly — no row-spanning tricks needed. grid-auto-flow:dense is required so that .detail-content with grid-column:1 doesn't wrap to row 2 when the side panel (placed at col 2) has already advanced the auto-flow cursor past column 1 in row 1. */ .column.main:has(> .entity-extra-content.left), .column.main:has(> .entity-extra-content.right), .column.main:has(> .entity-extra-content.left-sticky), .column.main:has(> .entity-extra-content.right-sticky) { display: grid; grid-auto-flow: dense; row-gap: 0; column-gap: 0; align-items: start; } .column.main:has(> .entity-extra-content.left), .column.main:has(> .entity-extra-content.left-sticky) { grid-template-columns: var(--entity-extra-content-side-width, 50%) 1fr; } .column.main:has(> .entity-extra-content.right), .column.main:has(> .entity-extra-content.right-sticky) { grid-template-columns: 1fr var(--entity-extra-content-side-width, 50%); } /* Side placement + reset stacking margin */ .entity-extra-content.left, .entity-extra-content.right, .entity-extra-content.left-sticky, .entity-extra-content.right-sticky { margin-bottom: 0; height: 100vh; } .entity-extra-content.left, .entity-extra-content.left-sticky { grid-column: 1; } .entity-extra-content.right, .entity-extra-content.right-sticky { grid-column: 2; } /* Sticky variants pin to the top of the scroll container */ .entity-extra-content.left-sticky, .entity-extra-content.right-sticky { position: sticky; top: 0; align-self: start; } /* The detail-content wrapper takes the other grid column. min-width:0 lets it shrink inside the grid without being held open by wide children (tables, long labels, etc.); its own scroll/overflow is handled by .column.main. */ .detail-content { min-width: 0; display: flex; flex-direction: column; row-gap: 16px; padding-bottom:120px; } .column.main:has(> .entity-extra-content.left) > .detail-content, .column.main:has(> .entity-extra-content.left-sticky) > .detail-content { grid-column: 2; } .column.main:has(> .entity-extra-content.right) > .detail-content, .column.main:has(> .entity-extra-content.right-sticky) > .detail-content { grid-column: 1; } /* Any direct
child of the side panel (the actual visible content —