/* ========================================================================== FridayLocalAI — Holiday Skin (Bright + Festive + WCAG-friendly) Purpose: Default Workshop style that preserves layout and fixes contrast. Activation: Notes: - Overrides app.css hardcoded whites by targeting real FridayLocalAI selectors. - Designed for readability: dark text on light surfaces, strong focus rings. ========================================================================== */ /* Visual direction (frozen mockup reference): "Bright day at the North Pole" + pastel aurora remnants. This is the default Workshop shell style. A more festive seasonal stylesheet can replace or extend it before the holiday season. */ :root[data-theme="holiday"]{ /* ---- Core surfaces (light, ethereal) ---- */ --bg-0: #f6fbff; /* page background */ --bg-1: rgba(255, 255, 255, 0.88); /* primary surface */ --bg-2: rgba(255, 255, 255, 0.78); /* secondary surface */ --bg-3: rgba(255, 255, 255, 0.70); /* tertiary surface */ /* ---- Text ---- */ --text-0: #102033; /* primary text */ --text-1: #2f465a; /* secondary text */ --text-2: #566b7a; /* muted text */ /* ---- Borders / shadows ---- */ --border-0: rgba(16, 32, 51, 0.14); --border-1: rgba(16, 32, 51, 0.22); --shadow-0: 0 10px 30px rgba(16, 32, 51, 0.10); /* ---- Aurora accents (still high-contrast for controls) ---- */ --accent-evergreen: #147a55; --accent-cranberry: #c0265c; --accent-gold: #d39a2a; --accent-ice: #0b5cad; --accent-action-blue: #0b5cad; /* ---- Aurora glow palette (for backgrounds only) ---- */ --aurora-cyan: rgba(69, 198, 255, 0.38); --aurora-violet: rgba(165, 108, 255, 0.30); --aurora-mint: rgba(82, 231, 190, 0.30); --aurora-pink: rgba(255, 122, 185, 0.22); --accent-primary: var(--accent-action-blue); --accent-danger: var(--accent-cranberry); --accent-warn: var(--accent-gold); --accent-info: var(--accent-ice); /* ---- UI tokens ---- */ --radius-0: 10px; --radius-1: 14px; /* Accessible focus indicator: solid outline meets WCAG non-text contrast. */ --focus-ring-color: #0b5cad; --focus-ring: 0 0 0 5px rgba(11, 92, 173, 0.18); /* Optional subtle texture intensity (0 = off) */ --holiday-noise-opacity: 0.03; } /* ========================================================================== Base page + Bootstrap compatibility ========================================================================== */ /* User-selected bright-theme background. Content surfaces remain contrast-safe above it. */ :root[data-theme="holiday"] body{ color: var(--text-0); background: #f6fbff url("/assets/img/friday-bright-gradient.jpg") center / cover fixed no-repeat !important; } /* app sets — override that hard-coded light-gray */ :root[data-theme="holiday"] .bg-light{ background-color: transparent !important; } /* Links */ :root[data-theme="holiday"] a{ color: var(--accent-ice); text-decoration-color: rgba(11, 116, 200, 0.35); } :root[data-theme="holiday"] a:hover{ text-decoration-color: rgba(11, 116, 200, 0.70); } /* Keyboard focus */ :root[data-theme="holiday"] :focus-visible{ outline: 3px solid var(--focus-ring-color); outline-offset: 2px; box-shadow: var(--focus-ring); } /* ========================================================================== FridayLocalAI layout overrides (target real selectors from app.css) - Fixes the “light text on white cards” problem from the dark holiday skin. ========================================================================== */ /* Header / footer */ :root[data-theme="holiday"] .fw-header, :root[data-theme="holiday"] .fw-footer{ background: rgba(255, 255, 255, 0.85) !important; border-color: var(--border-0) !important; color: var(--text-0) !important; } /* Sidebar + main */ :root[data-theme="holiday"] .fw-sidebar{ background: var(--bg-1) !important; border-right-color: var(--border-0) !important; } :root[data-theme="holiday"] .fw-main{ background: var(--bg-2) !important; } /* Main content card/surfaces often use Bootstrap defaults */ :root[data-theme="holiday"] .card, :root[data-theme="holiday"] .modal-content, :root[data-theme="holiday"] .dropdown-menu{ background: var(--bg-1) !important; color: var(--text-0) !important; border-color: var(--border-0) !important; box-shadow: var(--shadow-0); } /* Sidebar items (Projects + Conversations) */ :root[data-theme="holiday"] .friday-item{ background: var(--bg-1) !important; color: var(--text-0) !important; border-color: var(--border-0) !important; } :root[data-theme="holiday"] .friday-item:hover{ background: var(--bg-3) !important; } :root[data-theme="holiday"] .friday-item .meta{ color: var(--text-2) !important; } /* Selected/active item */ :root[data-theme="holiday"] .friday-item.active{ border-color: rgba(11, 116, 200, 0.45) !important; box-shadow: 0 0 0 0.22rem rgba(11, 116, 200, 0.14) !important; } /* Pills / small badges */ :root[data-theme="holiday"] .badge.bg-primary, :root[data-theme="holiday"] .badge.text-bg-primary, :root[data-theme="holiday"] .badge.bg-success, :root[data-theme="holiday"] .badge.text-bg-success{ background: var(--accent-primary) !important; color: #ffffff !important; } :root[data-theme="holiday"] .badge.bg-danger, :root[data-theme="holiday"] .badge.text-bg-danger{ background: var(--accent-danger) !important; } /* Composer area */ :root[data-theme="holiday"] .fw-composer{ background: var(--bg-1) !important; border-top-color: var(--border-0) !important; } /* Inputs */ :root[data-theme="holiday"] input, :root[data-theme="holiday"] textarea, :root[data-theme="holiday"] select{ background: #ffffff !important; color: var(--text-0) !important; border-color: var(--border-0) !important; } /* Buttons */ :root[data-theme="holiday"] .btn-primary, :root[data-theme="holiday"] .btn-success{ background: var(--accent-primary) !important; border-color: rgba(11, 92, 173, 0.85) !important; color: #ffffff !important; } :root[data-theme="holiday"] .btn-outline-primary, :root[data-theme="holiday"] .btn-outline-success{ color: var(--accent-primary) !important; border-color: rgba(11, 92, 173, 0.70) !important; } :root[data-theme="holiday"] .btn-outline-primary:hover, :root[data-theme="holiday"] .btn-outline-success:hover{ background: rgba(11, 92, 173, 0.10) !important; } :root[data-theme="holiday"] .text-success{ color: var(--accent-primary) !important; } :root[data-theme="holiday"] .alert-success{ background: rgba(11, 92, 173, 0.12) !important; border-color: rgba(11, 92, 173, 0.28) !important; color: var(--text-0) !important; } :root[data-theme="holiday"] .custom-tooltip{ --bs-tooltip-bg: var(--accent-primary); --bs-tooltip-color: #ffffff; } /* New messages pill should be festive + readable */ :root[data-theme="holiday"] .fw-new-messages .btn{ background: #ffffff !important; border-color: rgba(181, 22, 46, 0.35) !important; color: var(--text-0) !important; } /* ========================================================================== Optional: “String Lights” header accent Enable by adding class "holiday-lights" to the header container element. ========================================================================== */ :root[data-theme="holiday"] .holiday-lights{ position: relative; overflow: hidden; } /* Optional subtle “paper/felt” texture overlay */ :root[data-theme="holiday"] .holiday-noise{ position: relative; } :root[data-theme="holiday"] .holiday-noise::after{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--holiday-noise-opacity); mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* Motion safety */ @media (prefers-reduced-motion: reduce){ :root[data-theme="holiday"] *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Forced colors / High contrast mode safety */ @media (forced-colors: active){ :root[data-theme="holiday"] .holiday-lights::before, :root[data-theme="holiday"] .holiday-noise::after{ display: none !important; } } /* Axis90-A2: reduced-motion guard for decorative holiday accents. */ @media (prefers-reduced-motion: reduce) { :root[data-theme="holiday"] *, :root[data-theme="holiday"] *::before, :root[data-theme="holiday"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Four-theme extension - holiday is the operator-facing Bright theme (legacy value retained) - dark uses the Illustrator background asset - minimal-light and minimal-dark are image-free monochrome themes ========================================================================== */ :root[data-theme="holiday"] { --fw-accent: #b35a00; --fw-brand-primary: #172033; --fw-brand-secondary: #9a650f; --fw-brand-background: #ffffff; --fw-brand-logo-color: #000000; color-scheme: light; } :root[data-theme="holiday"] .fw-body { background: rgba(255, 255, 255, .38); border-color: rgba(255, 255, 255, .84); } :root[data-theme="holiday"] .fw-sidebar, :root[data-theme="holiday"] .fw-rightpanel { background: rgba(255, 255, 255, 0.55) !important; } :root[data-theme="holiday"] .fw-dashboard-module, :root[data-theme="holiday"] .fw-organizer-module { background: rgba(255, 255, 255, .62); border-color: rgba(118, 91, 255, .24); } :root[data-theme="holiday"] .badge.text-bg-secondary { color: #ffffff !important; background-color: #5f6b74 !important; } :root[data-theme="dark"] { --fw-accent: #ff8a00; --fw-brand-primary: #ffffff; --fw-brand-secondary: #f4b942; --fw-brand-background: #03070d; --fw-brand-logo-color: #ffffff; --fw-dark-shell: rgba(3, 7, 13, .88); --fw-dark-panel: rgba(3, 7, 13, .35); --fw-dark-shell-soft: rgba(9, 13, 20, .78); --fw-dark-card: #fffed2; --fw-dark-text: #f8fafc; --fw-dark-muted: #c5cbd3; --fw-dark-border: rgba(255, 138, 0, .9); --bs-body-color: #f8fafc; --bs-body-bg: #05080e; --bs-secondary-color: #c5cbd3; color-scheme: dark; } :root[data-theme="dark"] body { color: var(--fw-dark-text); background: linear-gradient(rgba(0, 3, 8, .36), rgba(0, 3, 8, .62)), url("/assets/img/friday-dark-cosmos.webp") center / cover fixed no-repeat !important; } :root[data-theme="dark"] .fw-header, :root[data-theme="dark"] .fw-footer, :root[data-theme="dark"] .fw-sidebar, :root[data-theme="dark"] .fw-main-header, :root[data-theme="dark"] .fw-composer, :root[data-theme="dark"] .fw-rightpanel { color: var(--fw-dark-text); background: var(--fw-dark-shell) !important; border-color: var(--fw-dark-border) !important; } :root[data-theme="dark"] .fw-body, :root[data-theme="dark"] .fw-main, :root[data-theme="dark"] .fw-main-scroll { color: var(--fw-dark-text); background: rgba(0, 4, 10, .52) !important; border-color: var(--fw-dark-border) !important; } :root[data-theme="dark"] .fw-sidebar, :root[data-theme="dark"] .fw-rightpanel { background: var(--fw-dark-panel) !important; } :root[data-theme="dark"] hr { color: #f4b942; border-color: #f4b942; opacity: 1; } :root[data-theme="dark"] .fw-brand-wordmark-primary, :root[data-theme="dark"] .fw-brand-product, :root[data-theme="dark"] #fwHeaderOrganizationName, :root[data-theme="dark"] .fw-region-heading, :root[data-theme="dark"] .fw-main-header .h5, :root[data-theme="dark"] .fw-main-header .text-muted, :root[data-theme="dark"] .fw-footer .text-muted, :root[data-theme="dark"] .fw-sidebar-footer, :root[data-theme="dark"] .fw-sidebar-footer .text-muted { color: var(--fw-dark-text) !important; } :root[data-theme="dark"] .fw-brand-wordmark-secondary, :root[data-theme="dark"] a, :root[data-theme="dark"] .btn-link, :root[data-theme="dark"] .fw-sidebar-help-btn, :root[data-theme="dark"] .fw-rightpanel-help-btn, :root[data-theme="dark"] .fw-axis83-entity-help-btn { color: #ff9a1f !important; } :root[data-theme="dark"] .fw-organizer-module, :root[data-theme="dark"] .fw-dashboard-module, :root[data-theme="dark"] #fwStatusStrip { color: #111 !important; background: var(--fw-dark-card) !important; border-color: var(--fw-dark-border) !important; box-shadow: none !important; } :root[data-theme="dark"] .friday-item, :root[data-theme="dark"] .fw-dashboard-module .card, :root[data-theme="dark"] .fw-dashboard-module .fw-panel-kv, :root[data-theme="dark"] .fw-dashboard-module .list-group-item, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .dropdown-menu { color: #111 !important; background: var(--fw-dark-card) !important; border-color: rgba(255, 138, 0, .72) !important; box-shadow: none !important; } :root[data-theme="dark"] .fw-dashboard-module .text-muted, :root[data-theme="dark"] .fw-dashboard-module .small, :root[data-theme="dark"] .fw-organizer-module .text-muted, :root[data-theme="dark"] .fw-organizer-module .small, :root[data-theme="dark"] .friday-item .meta, :root[data-theme="dark"] .modal-content .text-muted { color: #4c4c42 !important; } :root[data-theme="dark"] .friday-item.active, :root[data-theme="dark"] .fw-dashboard-module:not(.fw-rightpanel-section-collapsed), :root[data-theme="dark"] .fw-dashboard-module:not(.fw-rightpanel-section-collapsed) .card, :root[data-theme="dark"] .fw-dashboard-module:not(.fw-rightpanel-section-collapsed) .fw-panel-kv, :root[data-theme="dark"] .fw-dashboard-module:not(.fw-rightpanel-section-collapsed) .list-group-item { color: #111 !important; background: #fff !important; } :root[data-theme="dark"] .badge.text-bg-secondary { color: #fff !important; background-color: #4f5961 !important; } :root[data-theme="holiday"] .fw-container-action-menu .text-warning, :root[data-theme="minimal-light"] .fw-container-action-menu .text-warning, :root[data-theme="dark"] .fw-container-action-menu .text-warning { color: #6b3b00 !important; } :root[data-theme="holiday"] .fw-container-action-menu .text-success, :root[data-theme="minimal-light"] .fw-container-action-menu .text-success, :root[data-theme="dark"] .fw-container-action-menu .text-success { color: #146c43 !important; } :root[data-theme="holiday"] .fw-container-action-menu .text-danger, :root[data-theme="minimal-light"] .fw-container-action-menu .text-danger, :root[data-theme="dark"] .fw-container-action-menu .text-danger { color: #a31d2d !important; } :root[data-theme="dark"] .fw-container-action-menu .dropdown-item:hover, :root[data-theme="dark"] .fw-container-action-menu .dropdown-item:focus, :root[data-theme="dark"] .fw-container-action-menu .dropdown-item:active { background: #fff !important; } :root[data-theme="minimal-dark"] .fw-container-action-menu .text-warning { color: #ffd166 !important; } :root[data-theme="minimal-dark"] .fw-container-action-menu .text-success { color: #75d69c !important; } :root[data-theme="minimal-dark"] .fw-container-action-menu .text-danger { color: #ff8a94 !important; } :root[data-theme="minimal-dark"] .fw-container-action-menu .dropdown-item:hover, :root[data-theme="minimal-dark"] .fw-container-action-menu .dropdown-item:focus, :root[data-theme="minimal-dark"] .fw-container-action-menu .dropdown-item:active { background: var(--fw-mono-surface-alt) !important; } :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select, :root[data-theme="dark"] .input-group-text { color: #101010 !important; background: #fff !important; border-color: #ff8a00 !important; } :root[data-theme="dark"] .friday-msg .bubble { color: #111; background: #fff !important; border-color: #ff8a00 !important; } :root[data-theme="dark"] .friday-msg.user .bubble { background: var(--fw-dark-card) !important; } :root[data-theme="dark"] .friday-msg .content, :root[data-theme="dark"] .friday-msg .meta { color: #111 !important; } :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-outline-primary:hover, :root[data-theme="dark"] .btn-outline-secondary:hover { color: #111 !important; background: #ff8a00 !important; border-color: #ff8a00 !important; } :root[data-theme="dark"] .btn-primary:disabled, :root[data-theme="dark"] .btn-primary.disabled { opacity: 1; } :root[data-theme="dark"] .btn-outline-primary, :root[data-theme="dark"] .btn-outline-secondary { color: #ff9a1f; border-color: #ff8a00; } :root[data-theme="dark"] :focus-visible { outline: 3px solid #ffb347; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255, 138, 0, .28); } :root[data-theme="minimal-light"], :root[data-theme="minimal-dark"] { --fw-accent: currentColor; --fw-mono-border: #777; --fw-mono-muted: #666; } :root[data-theme="minimal-light"] { --fw-mono-bg: #fff; --fw-mono-surface: #fff; --fw-mono-surface-alt: #f2f2f2; --fw-mono-sidebar: #f6f6f6; --fw-mono-text: #000; --fw-mono-border: #777; --fw-mono-muted: #555; --fw-brand-primary: #000000; --fw-brand-secondary: #9a650f; --fw-brand-background: #ffffff; --fw-brand-logo-color: #000000; --bs-body-color: #000; --bs-body-bg: #fff; --bs-secondary-color: #555; color-scheme: light; } :root[data-theme="minimal-dark"] { --fw-mono-bg: #000; --fw-mono-surface: #0b0b0b; --fw-mono-surface-alt: #1a1a1a; --fw-mono-sidebar: #111; --fw-mono-text: #fff; --fw-mono-border: #626262; --fw-mono-muted: #bdbdbd; --fw-mono-button-bg: #272727; --fw-mono-button-text: #fff; --fw-mono-button-border: #8a8a8a; --fw-mono-button-hover-bg: #f2f2f2; --fw-mono-button-hover-text: #000; --fw-mono-button-disabled-bg: #242424; --fw-mono-button-disabled-text: #c7c7c7; --fw-mono-button-disabled-border: #686868; --fw-mono-button-danger-text: #ffb3b3; --fw-brand-primary: #ffffff; --fw-brand-secondary: #f4b942; --fw-brand-background: #000000; --fw-brand-logo-color: #ffffff; --bs-body-color: #fff; --bs-body-bg: #000; --bs-secondary-color: #bdbdbd; color-scheme: dark; } :root[data-theme="minimal-light"] body, :root[data-theme="minimal-dark"] body { color: var(--fw-mono-text); background: var(--fw-mono-bg) !important; background-image: none !important; } :root[data-theme="minimal-light"] .fw-header, :root[data-theme="minimal-light"] .fw-footer, :root[data-theme="minimal-light"] .fw-body, :root[data-theme="minimal-light"] .fw-sidebar, :root[data-theme="minimal-light"] .fw-main, :root[data-theme="minimal-light"] .fw-main-header, :root[data-theme="minimal-light"] .fw-main-scroll, :root[data-theme="minimal-light"] .fw-composer, :root[data-theme="minimal-light"] .fw-rightpanel, :root[data-theme="minimal-dark"] .fw-header, :root[data-theme="minimal-dark"] .fw-footer, :root[data-theme="minimal-dark"] .fw-body, :root[data-theme="minimal-dark"] .fw-sidebar, :root[data-theme="minimal-dark"] .fw-main, :root[data-theme="minimal-dark"] .fw-main-header, :root[data-theme="minimal-dark"] .fw-main-scroll, :root[data-theme="minimal-dark"] .fw-composer, :root[data-theme="minimal-dark"] .fw-rightpanel { color: var(--fw-mono-text) !important; background: var(--fw-mono-bg) !important; background-image: none !important; border-color: var(--fw-mono-border) !important; box-shadow: none !important; backdrop-filter: none !important; } /* Minimal themes use spacing and headings for shell hierarchy instead of framing every passive region. Keep borders on controls, messages, tables, and dialogs. */ :root[data-theme="minimal-light"] .fw-body, :root[data-theme="minimal-dark"] .fw-body { border: 0 !important; border-radius: 0 !important; padding: 0 !important; } :root[data-theme="minimal-light"] .fw-sidebar, :root[data-theme="minimal-light"] .fw-main, :root[data-theme="minimal-light"] .fw-rightpanel, :root[data-theme="minimal-light"] .fw-organizer-module, :root[data-theme="minimal-light"] .fw-dashboard-module, :root[data-theme="minimal-dark"] .fw-sidebar, :root[data-theme="minimal-dark"] .fw-main, :root[data-theme="minimal-dark"] .fw-rightpanel, :root[data-theme="minimal-dark"] .fw-organizer-module, :root[data-theme="minimal-dark"] .fw-dashboard-module { border: 0 !important; border-radius: 0 !important; } :root[data-theme="minimal-light"] .fw-sidebar, :root[data-theme="minimal-light"] .fw-rightpanel, :root[data-theme="minimal-dark"] .fw-sidebar, :root[data-theme="minimal-dark"] .fw-rightpanel { background: var(--fw-mono-sidebar) !important; } /* Remove redundant wrapper padding without shrinking content or control targets. */ :root[data-theme="minimal-light"] .fw-organizer-module, :root[data-theme="minimal-dark"] .fw-organizer-module, :root[data-theme="minimal-light"] .fw-dashboard-module > .card-body, :root[data-theme="minimal-light"] .fw-dashboard-module > .card > .card-body, :root[data-theme="minimal-dark"] .fw-dashboard-module > .card-body, :root[data-theme="minimal-dark"] .fw-dashboard-module > .card > .card-body { padding: 0 !important; } :root[data-theme="minimal-light"] .card, :root[data-theme="minimal-light"] .friday-item, :root[data-theme="minimal-light"] .fw-edge-chip, :root[data-theme="minimal-light"] .fw-panel-kv, :root[data-theme="minimal-light"] .modal-content, :root[data-theme="minimal-light"] .dropdown-menu, :root[data-theme="minimal-light"] .list-group-item, :root[data-theme="minimal-light"] input, :root[data-theme="minimal-light"] textarea, :root[data-theme="minimal-light"] select, :root[data-theme="minimal-light"] .input-group-text, :root[data-theme="minimal-dark"] .card, :root[data-theme="minimal-dark"] .friday-item, :root[data-theme="minimal-dark"] .fw-edge-chip, :root[data-theme="minimal-dark"] .fw-panel-kv, :root[data-theme="minimal-dark"] .modal-content, :root[data-theme="minimal-dark"] .dropdown-menu, :root[data-theme="minimal-dark"] .list-group-item, :root[data-theme="minimal-dark"] input, :root[data-theme="minimal-dark"] textarea, :root[data-theme="minimal-dark"] select, :root[data-theme="minimal-dark"] .input-group-text { color: var(--fw-mono-text) !important; background: var(--fw-mono-surface) !important; background-image: none !important; border-color: var(--fw-mono-border) !important; box-shadow: none !important; } :root[data-theme="minimal-light"] .text-muted, :root[data-theme="minimal-light"] .friday-item .meta, :root[data-theme="minimal-light"] .friday-msg .meta, :root[data-theme="minimal-dark"] .text-muted, :root[data-theme="minimal-dark"] .friday-item .meta, :root[data-theme="minimal-dark"] .friday-msg .meta { color: var(--fw-mono-muted) !important; } :root[data-theme="minimal-light"] .friday-msg .bubble, :root[data-theme="minimal-dark"] .friday-msg .bubble { color: var(--fw-mono-text) !important; background: var(--fw-mono-surface) !important; border: 1px solid var(--fw-mono-border) !important; box-shadow: none !important; } :root[data-theme="minimal-light"] .friday-msg.user .bubble, :root[data-theme="minimal-light"] .friday-item.active, :root[data-theme="minimal-dark"] .friday-msg.user .bubble, :root[data-theme="minimal-dark"] .friday-item.active { background: var(--fw-mono-surface-alt) !important; } :root[data-theme="minimal-light"] .friday-msg .content, :root[data-theme="minimal-dark"] .friday-msg .content { color: var(--fw-mono-text) !important; } /* Response/document tables must not inherit white text onto app.css's white table surface. */ :root[data-theme="minimal-light"] .friday-msg .content .fw-table-wrap, :root[data-theme="minimal-light"] .friday-msg .content .fw-doc-table, :root[data-theme="minimal-light"] .friday-msg .content .fw-doc-table th, :root[data-theme="minimal-light"] .friday-msg .content .fw-doc-table td, :root[data-theme="minimal-dark"] .friday-msg .content .fw-table-wrap, :root[data-theme="minimal-dark"] .friday-msg .content .fw-doc-table, :root[data-theme="minimal-dark"] .friday-msg .content .fw-doc-table th, :root[data-theme="minimal-dark"] .friday-msg .content .fw-doc-table td { color: var(--fw-mono-text) !important; background: var(--fw-mono-surface) !important; border-color: var(--fw-mono-border) !important; } :root[data-theme="minimal-light"] .friday-msg .content .fw-doc-table thead th, :root[data-theme="minimal-dark"] .friday-msg .content .fw-doc-table thead th { color: var(--fw-mono-text) !important; background: var(--fw-mono-surface-alt) !important; } :root[data-theme="minimal-light"] .table, :root[data-theme="minimal-dark"] .table { --bs-table-color: var(--fw-mono-text); --bs-table-bg: var(--fw-mono-surface); --bs-table-border-color: var(--fw-mono-border); --bs-table-striped-color: var(--fw-mono-text); --bs-table-striped-bg: var(--fw-mono-surface-alt); --bs-table-hover-color: var(--fw-mono-text); --bs-table-hover-bg: var(--fw-mono-surface-alt); color: var(--fw-mono-text) !important; border-color: var(--fw-mono-border) !important; } :root[data-theme="minimal-light"] .fw-user-avatar, :root[data-theme="minimal-light"] .fw-axis115-avatar, :root[data-theme="minimal-dark"] .fw-user-avatar, :root[data-theme="minimal-dark"] .fw-axis115-avatar { color: var(--fw-mono-text) !important; background: var(--fw-mono-surface-alt) !important; border-color: var(--fw-mono-border) !important; } :root[data-theme="minimal-light"] .btn { color: var(--fw-mono-text) !important; background: transparent !important; border-color: var(--fw-mono-border) !important; box-shadow: none !important; } :root[data-theme="minimal-light"] .btn:hover, :root[data-theme="minimal-light"] .btn:focus-visible { color: var(--fw-mono-bg) !important; background: var(--fw-mono-text) !important; } /* Minimal-dark controls use a quiet filled surface, a clear boundary, and explicit state colors instead of relying on Bootstrap opacity. */ :root[data-theme="minimal-dark"] .btn { color: var(--fw-mono-button-text) !important; background: var(--fw-mono-button-bg) !important; border-color: var(--fw-mono-button-border) !important; box-shadow: none !important; } :root[data-theme="minimal-dark"] .btn:hover, :root[data-theme="minimal-dark"] .btn:focus-visible, :root[data-theme="minimal-dark"] .btn:active, :root[data-theme="minimal-dark"] .btn.active, :root[data-theme="minimal-dark"] .btn.show, :root[data-theme="minimal-dark"] .btn-check:checked + .btn { color: var(--fw-mono-button-hover-text) !important; background: var(--fw-mono-button-hover-bg) !important; border-color: var(--fw-mono-button-hover-bg) !important; } :root[data-theme="minimal-dark"] .btn:disabled, :root[data-theme="minimal-dark"] .btn.disabled, :root[data-theme="minimal-dark"] fieldset:disabled .btn { color: var(--fw-mono-button-disabled-text) !important; background: var(--fw-mono-button-disabled-bg) !important; border-color: var(--fw-mono-button-disabled-border) !important; opacity: 1; } :root[data-theme="minimal-dark"] .nav-tabs .nav-link { color: var(--fw-mono-button-text) !important; background: var(--fw-mono-button-bg) !important; border-color: var(--fw-mono-button-border) !important; } :root[data-theme="minimal-dark"] .nav-tabs .nav-link:hover, :root[data-theme="minimal-dark"] .nav-tabs .nav-link:focus-visible, :root[data-theme="minimal-dark"] .nav-tabs .nav-link.active { color: var(--fw-mono-button-hover-text) !important; background: var(--fw-mono-button-hover-bg) !important; border-color: var(--fw-mono-button-hover-bg) !important; } :root[data-theme="minimal-dark"] .fw-account-menu-item { color: var(--fw-mono-button-text) !important; background: var(--fw-mono-button-bg) !important; border: 1px solid var(--fw-mono-button-border) !important; } :root[data-theme="minimal-dark"] .fw-account-menu-item:hover, :root[data-theme="minimal-dark"] .fw-account-menu-item:focus-visible { color: var(--fw-mono-button-hover-text) !important; background: var(--fw-mono-button-hover-bg) !important; } :root[data-theme="minimal-dark"] .fw-account-menu-item-danger { color: var(--fw-mono-button-danger-text) !important; } :root[data-theme="minimal-dark"] .btn-close { background-color: var(--fw-mono-button-bg) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23fff' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important; border: 1px solid var(--fw-mono-button-border) !important; opacity: 1; filter: none; } :root[data-theme="minimal-dark"] .btn-close:hover, :root[data-theme="minimal-dark"] .btn-close:focus-visible { background-color: #3a3a3a !important; border-color: var(--fw-mono-button-hover-bg) !important; opacity: 1; } :root[data-theme="minimal-light"] .badge, :root[data-theme="minimal-dark"] .badge, :root[data-theme="minimal-light"] .alert, :root[data-theme="minimal-dark"] .alert { color: var(--fw-mono-text) !important; background: var(--fw-mono-surface-alt) !important; border: 1px solid var(--fw-mono-border) !important; } :root[data-theme="minimal-light"] a, :root[data-theme="minimal-light"] .btn-link, :root[data-theme="minimal-dark"] a, :root[data-theme="minimal-dark"] .btn-link, :root[data-theme="minimal-light"] .fw-brand-wordmark-secondary, :root[data-theme="minimal-dark"] .fw-brand-wordmark-secondary { color: var(--fw-mono-text) !important; text-decoration-color: currentColor !important; } /* Brand lockup contract: every theme retains the owl and title-case wordmark. */ :root[data-theme] .fw-brand-wordmark-inline { border-bottom: 2px solid var(--fw-brand-secondary); padding-bottom: 0.1rem; } :root[data-theme] .fw-brand-mark { display: block !important; opacity: 1; } :root[data-theme="holiday"] .fw-brand-mark, :root[data-theme="minimal-light"] .fw-brand-mark { filter: none; } :root[data-theme="dark"] .fw-brand-mark, :root[data-theme="minimal-dark"] .fw-brand-mark { filter: brightness(0) invert(1); } :root[data-theme] .fw-brand-wordmark-primary { color: var(--fw-brand-primary) !important; } :root[data-theme] .fw-brand-wordmark-secondary { color: var(--fw-brand-secondary) !important; } :root[data-theme="minimal-light"] :focus-visible, :root[data-theme="minimal-dark"] :focus-visible { outline: 3px solid var(--fw-mono-text); outline-offset: 2px; box-shadow: none !important; } :root[data-theme="minimal-dark"] .fw-composer .hint, :root[data-theme="minimal-dark"] .fw-panel-kv .k { color: var(--fw-mono-muted) !important; } :root[data-theme="minimal-dark"] #rightpanel-telemetry { color: var(--fw-mono-text) !important; background: var(--fw-mono-surface) !important; border-color: var(--fw-mono-border) !important; }