@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap'); html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* dash-email previews (docs examples) are light-themed artifacts — emails always render on light backgrounds in mail clients. Give the whole preview tree a dark base text color and light UA color-scheme so unstyled elements never inherit the site's dark-mode text color. (Explicit inline colors in the examples still take precedence.) */ [data-email-component="html"] { color: #1a1b1e; color-scheme: light; } /* React Flow MiniMap: theme-aware background */ :root[data-mantine-color-scheme="dark"] .react-flow__minimap { background-color: rgba(16, 15, 15, 0.9) !important; } :root[data-mantine-color-scheme="light"] .react-flow__minimap { background-color: rgba(255, 255, 255, 0.9) !important; } /* Discord WidgetBot Crate - ensure visibility above AppShell */ widgetbot-crate { z-index: 99999 !important; } /* MUI Charts: theme-aware — dark mode */ :root[data-mantine-color-scheme="dark"] .MuiChartsAxis-tickLabel, :root[data-mantine-color-scheme="dark"] .MuiChartsAxis-label, :root[data-mantine-color-scheme="dark"] .MuiChartsReferenceLine-label { fill: #c1c2c5 !important; } /* Legend labels are elements using color, not SVG fill */ :root[data-mantine-color-scheme="dark"] .MuiChartsLegend-label, :root[data-mantine-color-scheme="dark"] .MuiChartsLabel-root { fill: #c1c2c5 !important; color: #c1c2c5 !important; } /* MUI Charts: theme-aware — light mode */ :root[data-mantine-color-scheme="light"] .MuiChartsAxis-tickLabel, :root[data-mantine-color-scheme="light"] .MuiChartsAxis-label, :root[data-mantine-color-scheme="light"] .MuiChartsReferenceLine-label { fill: #1a1b1e !important; } :root[data-mantine-color-scheme="light"] .MuiChartsLegend-label, :root[data-mantine-color-scheme="light"] .MuiChartsLabel-root { fill: #1a1b1e !important; color: #1a1b1e !important; } /* MUI Charts: theme-aware tooltips — dark mode Targets all MUI tooltip containers including those rendered in portals */ :root[data-mantine-color-scheme="dark"] .MuiChartsTooltip-paper, :root[data-mantine-color-scheme="dark"] .MuiChartsTooltip-root .MuiPaper-root, :root[data-mantine-color-scheme="dark"] .MuiChartsTooltip-root > div, :root[data-mantine-color-scheme="dark"] [class*="MuiChartsTooltip"] .MuiPaper-root { background: rgba(30, 30, 30, 0.92) !important; color: #e0e0e0 !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; } :root[data-mantine-color-scheme="dark"] .MuiChartsTooltip-paper *, :root[data-mantine-color-scheme="dark"] .MuiChartsTooltip-root *, :root[data-mantine-color-scheme="dark"] [class*="MuiChartsTooltip"] * { color: #e0e0e0 !important; } /* MUI Charts: theme-aware toolbar icons */ :root[data-mantine-color-scheme="dark"] .MuiChartsToolbar-root .MuiSvgIcon-root { fill: #c1c2c5 !important; color: #c1c2c5 !important; } :root[data-mantine-color-scheme="dark"] .MuiChartsToolbar-root .MuiIconButton-root { color: #c1c2c5 !important; } :root[data-mantine-color-scheme="dark"] .MuiChartsToolbar-root .MuiDivider-root { border-color: rgba(255, 255, 255, 0.15) !important; } /* MUI Charts: theme-aware tooltips — light mode */ :root[data-mantine-color-scheme="light"] .MuiChartsTooltip-paper, :root[data-mantine-color-scheme="light"] .MuiChartsTooltip-root .MuiPaper-root, :root[data-mantine-color-scheme="light"] .MuiChartsTooltip-root > div, :root[data-mantine-color-scheme="light"] [class*="MuiChartsTooltip"] .MuiPaper-root { background: rgba(255, 255, 255, 0.92) !important; color: #1a1b1e !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; } :root[data-mantine-color-scheme="light"] .MuiChartsTooltip-paper *, :root[data-mantine-color-scheme="light"] .MuiChartsTooltip-root *, :root[data-mantine-color-scheme="light"] [class*="MuiChartsTooltip"] * { color: #1a1b1e !important; } /* Improved text readability */ p { line-height: 1.6; margin-bottom: 1rem; } /* Better heading spacing */ h1, h2, h3, h4, h5, h6 { margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.3; } h1:first-child, h2:first-child, h3:first-child { margin-top: 0; } /* Link styling */ a { transition: all 0.2s ease; } /* Better list spacing */ ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; } li { margin-bottom: 0.5rem; } /* Blockquote styling */ blockquote { border-left: 4px solid #03c7e5; padding-left: 1rem; margin-left: 0; margin-right: 0; font-style: italic; color: var(--mantine-color-dimmed); } input:invalid { outline: none !important; } #wrapper { padding: 10px; margin-left: 320px; margin-right: 320px; } :root[data-mantine-color-scheme="dark"] #dark-theme-icon { display: none; } :root[data-mantine-color-scheme="light"] #light-theme-icon { display: none; } .demo-container { display: flex; max-width: 100%; overflow: hidden; } .demo-preview { flex: 1; display: flex; flex-direction: column; padding: 20px; justify-content: center; } .demo-controls { width: 250px; padding: 20px; gap: 10px; } .demo-control { margin: 10px; } @media only screen and (max-width: 750px) { .demo-container { flex-direction: column; } .demo-controls { width: 100%; } } .dmc-bar { background-image: linear-gradient(to right, yellow, orange); } .dmc-thumb { border-color: orange; height: 20px; width: 20px; background-color: white; } .mantine-Table-th { font-size: 15px; font-weight: 500; } .dmc-indicator { width: 12px; height: 4px; transition: width 250ms ease; &[data-active] { width: 40px; } } .dmc-control { &[data-inactive] { opacity: 0; cursor: default; } } .dmc-controls { transition: opacity 150ms ease; opacity: 0; } .dmc-root { &:hover { .dmc-controls { opacity: 1; } } } .dmc-slider-track { &::before { background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3)); } } .dmc-slider-mark { width: 6px; height: 6px; border-radius: 6px; transform: translateX(-3px) translateY(-2px); border-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3)); &[data-filled] { border-color: var(--mantine-color-blue-6); } } .dmc-slider-markLabel { font-size: var(--mantine-font-size-sm); color: var(--mantine-color-green-5); margin-bottom: 5px; margin-top: 0; } .dmc-slider-thumb { height: 16px; width: 16px; background-color: var(--mantine-color-green-5); border-width: 1px; box-shadow: var(--mantine-shadow-lg); } .navbar-link { padding: 0.5rem 1rem; border-radius: 0.25rem; transition: background 0.1s; color: inherit; display: inline-flex; gap: 0.5rem; &:hover { text-decoration: none; background: color-mix(in srgb, var(--mantine-color-gray-5), transparent 90%); } } /* Removed 2026-08-21: `.m_b8a05bbd { margin-top: 80px !important; height: 63vh !important }`. A Mantine generated class hash, hardcoded here in the 2024-11-30 initial commit and carried through the Mantine 7 -> 8 upgrade. Those hashes are build artifacts, not an API: the selector either matches nothing or matches something its author never saw. By DMC 2.8 it had landed on the Drawer, so the two !important declarations overrode the docking set in components/navbar.py (`inner.top` / `inner.height`) and pinned the mobile drawer to 63vh with an 80px gap under the header. Do not add rules keyed on `.m_` — target a component's `styles={...}` or give the element a className of your own. tests/test_css_selectors.py fails on new ones. */ div .m_46b77525 { margin-top: calc(0.5rem* var(--mantine-scale)) !important; } .m_5caae85b { position: absolute !important; top: calc(0.3125rem* var(--mantine-scale)); inset-inline-end: calc(0.3125rem* var(--mantine-scale)); z-index: 1; } .m_9cdde9a { inset-inline-end: 0; width: var(--app-shell-aside-width); transform: var(--app-shell-aside-transform); z-index: var(--app-shell-aside-z-index); margin-top: 15px; } :root[data-mantine-color-scheme="dark"] { --mantine-color-anchor: #74c0fc !important; --mantine-color-dark-light: rgba(63, 63, 70, 0.15); --mantine-color-dark-light-hover: rgba(63, 63, 70, 0.2); --mantine-color-dark-outline-hover: rgba(113, 113, 122, 0.05); } /* AppShell Background Colors */ :root[data-mantine-color-scheme="light"] .mantine-AppShell-root { background-color: #dedede; } :root[data-mantine-color-scheme="light"] .mantine-AppShellMain-main { background-color: #dedede; } :root[data-mantine-color-scheme="light"] .mantine-AppShell-navbar { background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #dedede 100%); } :root[data-mantine-color-scheme="dark"] .mantine-AppShell-root { background-color: #1d1c1c; } :root[data-mantine-color-scheme="dark"] .mantine-AppShellMain-main { background-color: #1d1c1c; } :root[data-mantine-color-scheme="dark"] .mantine-AppShell-navbar { background: linear-gradient(180deg, #1a1919 0%, #161515 50%, #111010 100%); } img[alt=logo] { width: 100%; } /* Theme-aware code blocks */ :root[data-mantine-color-scheme="light"] pre, :root[data-mantine-color-scheme="light"] code { background-color: #f8f9fa; color: #1a1b1e; } :root[data-mantine-color-scheme="dark"] pre, :root[data-mantine-color-scheme="dark"] code { background-color: #1a1b1e; color: #c1c2c5; } /* Inline code */ :root[data-mantine-color-scheme="light"] code { background-color: #f1f3f5; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; } :root[data-mantine-color-scheme="dark"] code { background-color: #25262b; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; } /* Code blocks */ :root[data-mantine-color-scheme="light"] pre { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 16px; overflow-x: auto; } :root[data-mantine-color-scheme="dark"] pre { background-color: #1a1b1e; border: 1px solid #373a40; border-radius: 8px; padding: 16px; overflow-x: auto; } /* Code inside pre blocks */ :root[data-mantine-color-scheme="light"] pre code { background-color: transparent; padding: 0; color: #1a1b1e; } :root[data-mantine-color-scheme="dark"] pre code { background-color: transparent; padding: 0; color: #c1c2c5; } /* Sun icon rotation animations - direction based on scroll */ @keyframes rotate-sun-clockwise { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotate-sun-counter-clockwise { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* Clockwise rotation (scroll down) */ #light-theme-icon.rotating-down, #light-theme-icon.rotating-down svg, #light-theme-icon.rotating-down iconify-icon { animation: rotate-sun-clockwise 1.2s ease-out infinite; display: inline-block; } /* Counter-clockwise rotation (scroll up) */ #light-theme-icon.rotating-up, #light-theme-icon.rotating-up svg, #light-theme-icon.rotating-up iconify-icon { animation: rotate-sun-counter-clockwise 1.2s ease-out infinite; display: inline-block; } /* Smooth transition when stopping */ #light-theme-icon, #light-theme-icon svg, #light-theme-icon iconify-icon { transition: transform 0.3s ease-out; display: inline-block; } /* Typewriter cursor animation for Dash Docs title */ @keyframes blink-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* Add blinking cursor while typing */ #dash-docs-title.typing::after { content: '▋'; animation: blink-cursor 1s step-end infinite; margin-left: 2px; color: #03c7e5; } /* AG Grid Dark Mode Support */ /* Override AG Grid theme colors for dark mode */ :root[data-mantine-color-scheme="dark"] .ag-theme-alpine { /* Core background colors */ --ag-background-color: #1a1b1e; --ag-foreground-color: #c1c2c5; --ag-border-color: #373a40; --ag-secondary-border-color: #2c2e33; /* Header colors */ --ag-header-background-color: #25262b; --ag-header-foreground-color: #c1c2c5; /* Row colors */ --ag-odd-row-background-color: #1a1b1e; --ag-row-hover-color: #25262b; --ag-selected-row-background-color: #373a40; /* Control panel (filters, pagination) */ --ag-control-panel-background-color: #25262b; /* Input colors */ --ag-input-border-color: #373a40; --ag-input-disabled-border-color: #2c2e33; --ag-input-disabled-background-color: #25262b; /* Pagination and widgets */ --ag-disabled-foreground-color: #5c5f66; --ag-chip-background-color: #373a40; /* Hover and focus states */ --ag-row-border-color: #2c2e33; --ag-cell-horizontal-border: solid #2c2e33; /* Filter colors */ --ag-input-focus-border-color: #5c5f66; /* Icons */ color-scheme: dark; } /* Light mode adjustments (ensure proper contrast) */ :root[data-mantine-color-scheme="light"] .ag-theme-alpine { --ag-background-color: #ffffff; --ag-foreground-color: #1a1b1e; --ag-border-color: #dee2e6; --ag-header-background-color: #f8f9fa; --ag-row-hover-color: #f1f3f5; } /* Custom AG Grid Cell Styling - Light Mode */ :root[data-mantine-color-scheme="light"] .ag-theme-alpine .timestamp-cell { font-family: monospace; font-size: 14px; } :root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-type-cell { font-weight: 500; padding: 4px 8px; border-radius: 4px; } :root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-training { background-color: #ffe0e0; color: #c92a2a; } :root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-search { background-color: #d0ebff; color: #1971c2; } :root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-traditional { background-color: #d3f9d8; color: #2f9e44; } :root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-unknown { background-color: #f1f3f5; color: #868e96; font-weight: 400; } :root[data-mantine-color-scheme="light"] .ag-theme-alpine .page-cell { font-family: monospace; font-size: 12px; background-color: #f8f9fa; padding: 4px 6px; border-radius: 4px; } :root[data-mantine-color-scheme="light"] .ag-theme-alpine .user-agent-cell { font-size: 12px; color: #868e96; } /* Custom AG Grid Cell Styling - Dark Mode */ :root[data-mantine-color-scheme="dark"] .ag-theme-alpine .timestamp-cell { font-family: monospace; font-size: 14px; } :root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-type-cell { font-weight: 500; padding: 4px 8px; border-radius: 4px; } :root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-training { background-color: #5c1414; color: #ffa8a8; } :root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-search { background-color: #1c3d5a; color: #74c0fc; } :root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-traditional { background-color: #1b4332; color: #8ce99a; } :root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-unknown { background-color: #373a40; color: #909296; font-weight: 400; } :root[data-mantine-color-scheme="dark"] .ag-theme-alpine .page-cell { font-family: monospace; font-size: 12px; background-color: #25262b; padding: 4px 6px; border-radius: 4px; } :root[data-mantine-color-scheme="dark"] .ag-theme-alpine .user-agent-cell { font-size: 12px; color: #909296; } .m_3b16f56b:where([data-with-border]) { border-bottom: 1px solid #03c7e5; } .m_8983817 { padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding)); /* padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding)); */ padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding)); padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding)); min-height: 100dvh; transition-property: padding; } /* Mobile-specific: Remove padding from AppShellMain to make page_container full width */ @media (max-width: 768px) { .m_8983817 { padding-inline-start: var(--app-shell-navbar-offset, 0rem) !important; padding-inline-end: 0 !important; padding-top: var(--app-shell-header-offset, 0rem) !important; padding-bottom: var(--app-shell-footer-offset, 0rem) !important; } /* Also remove default AppShell padding on mobile */ .mantine-AppShellMain-main { padding: 0 !important; } } /* FlexLayout Popup Menu - Light/Dark Mode */ :root[data-mantine-color-scheme="light"] .flexlayout__popup_menu_container { background-color: #dedede; } :root[data-mantine-color-scheme="dark"] .flexlayout__popup_menu_container { background-color: #242424; } /* Chat Messages Panel - Light/Dark Mode Gradients */ :root[data-mantine-color-scheme="light"] [data-panel-id^="chat-messages-panel-"] { background: linear-gradient(180deg, rgb(245, 245, 245) 0%, rgb(233, 233, 233) 50%, rgb(224, 224, 224) 100%) !important; } :root[data-mantine-color-scheme="dark"] [data-panel-id^="chat-messages-panel-"] { background: linear-gradient(180deg, #1a1919 0%, #161515 50%, #111010 100%) !important; } /* Table of Contents (FlexLayout Tab) - Light/Dark Mode Gradients */ :root[data-mantine-color-scheme="light"] .flexlayout__tab_moveable > div { background: linear-gradient(180deg, rgb(245, 245, 245) 0%, rgb(233, 233, 233) 50%, rgb(224, 224, 224) 100%); } :root[data-mantine-color-scheme="dark"] .flexlayout__tab_moveable > div { background: linear-gradient(180deg, #1a1919 0%, #161515 50%, #111010 100%); } /* ============================================================================ Chat Message Styling ============================================================================ */ /* Chat message containers */ .chat-message-wrapper { margin-bottom: 1rem; animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* User messages - Apple Liquid Glass Style */ .user-message { background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(59, 130, 246, 0.15) !important; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.02) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .user-message:hover { background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%) !important; border-color: rgba(59, 130, 246, 0.25) !important; box-shadow: 0 12px 40px rgba(59, 130, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.03) !important; transform: translateY(-1px) !important; } :root[data-mantine-color-scheme="dark"] .user-message { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.10) 100%) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(59, 130, 246, 0.25) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; } :root[data-mantine-color-scheme="dark"] .user-message:hover { background: linear-gradient(135deg, rgba(59, 130, 246, 0.20) 0%, rgba(99, 102, 241, 0.15) 100%) !important; border-color: rgba(59, 130, 246, 0.35) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important; transform: translateY(-1px) !important; } /* AI messages - Apple Liquid Glass Style */ .ai-message { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.05) 100%) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(16, 185, 129, 0.15) !important; box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.02) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .ai-message:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%) !important; border-color: rgba(16, 185, 129, 0.25) !important; box-shadow: 0 12px 40px rgba(16, 185, 129, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.03) !important; transform: translateY(-1px) !important; } :root[data-mantine-color-scheme="dark"] .ai-message { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.10) 100%) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important; } :root[data-mantine-color-scheme="dark"] .ai-message:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.20) 0%, rgba(5, 150, 105, 0.15) 100%) !important; border-color: rgba(16, 185, 129, 0.35) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important; transform: translateY(-1px) !important; } /* Message content area - for rendered markdown */ .message-content { margin-top: 0.5rem; line-height: 1.6; } .message-content h1, .message-content h2, .message-content h3 { margin-top: 1rem; margin-bottom: 0.5rem; } .message-content code { background: var(--mantine-color-gray-1); padding: 0.2em 0.4em; border-radius: 3px; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; } :root[data-mantine-color-scheme="dark"] .message-content code { background: var(--mantine-color-dark-6); } .message-content pre { background: var(--mantine-color-gray-1); padding: 1rem; border-radius: 6px; overflow-x: auto; margin: 0.5rem 0; } :root[data-mantine-color-scheme="dark"] .message-content pre { background: var(--mantine-color-dark-6); } .message-content pre code { background: none; padding: 0; } .message-content ul, .message-content ol { margin-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; } .message-content p { margin-top: 0.5rem; margin-bottom: 0.5rem; } /* Section suggestions */ .section-suggestions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--mantine-color-gray-3); } :root[data-mantine-color-scheme="dark"] .section-suggestions { border-top-color: var(--mantine-color-dark-4); } .suggestions-title { font-size: 0.875rem; font-weight: 600; color: var(--mantine-color-gray-7); margin-bottom: 0.5rem; } :root[data-mantine-color-scheme="dark"] .suggestions-title { color: var(--mantine-color-gray-4); } .suggestion-btn { display: inline-block; margin-right: 0.5rem; margin-bottom: 0.5rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--mantine-color-blue-6); background: var(--mantine-color-blue-0); border: 1px solid var(--mantine-color-blue-2); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .suggestion-btn:hover { background: var(--mantine-color-blue-1); border-color: var(--mantine-color-blue-4); transform: translateY(-1px); } :root[data-mantine-color-scheme="dark"] .suggestion-btn { color: var(--mantine-color-blue-4); background: var(--mantine-color-dark-6); border-color: var(--mantine-color-blue-9); } :root[data-mantine-color-scheme="dark"] .suggestion-btn:hover { background: var(--mantine-color-dark-5); border-color: var(--mantine-color-blue-7); } /* Error messages */ .error-message { color: var(--mantine-color-red-6); font-style: italic; } :root[data-mantine-color-scheme="dark"] .error-message { color: var(--mantine-color-red-4); } /* ==================================================================== MARKDOWN TABLE RESPONSIVENESS Enables horizontal scrolling for tables on mobile devices SCOPED ON PURPOSE — do not loosen these back to a bare `table` selector. Plenty of DMC components render a real : every calendar (DatePickerInput, DateInput, MUI Scheduler) draws its month grid as one, and dmc.Table is used on the admin boards. An unscoped `table { width: 100% }` stretched the DatePickerInput's popover to the full page width and collapsed its month grid to a single column of dates, which looks exactly like a broken component and isn't one. Three scopes, covering every place markdown reaches the DOM: .m2d-table docs pages (markdown2dash emits the class) .markdown-content the home page's dcc.Markdown (plain
, no class of its own — see pages/home.py) .chat-messages-container AI answers, rendered client-side by marked.js into innerHTML (assets/chat.js) Add a scope here rather than removing one if markdown appears somewhere new. ==================================================================== */ /* Base table styling */ .m2d-table, .markdown-content table, .chat-messages-container table { width: 100%; border-collapse: collapse; } /* Mobile-specific: Enable horizontal scrolling for wide tables */ @media (max-width: 768px) { /* Make tables scrollable by displaying as block */ .m2d-table, .markdown-content table, .chat-messages-container table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */ white-space: nowrap; /* Prevent cell content from wrapping */ max-width: 100%; } /* Ensure table body and rows behave correctly in block display mode */ .m2d-table tbody, .markdown-content table tbody, .chat-messages-container table tbody { display: table; width: 100%; } /* Prevent cell text from wrapping on small screens */ .m2d-table th, .m2d-table td, .markdown-content table th, .chat-messages-container table th, .markdown-content table td, .chat-messages-container table td { white-space: nowrap; padding: 8px 12px; } /* Custom scrollbar styling for better UX */ .m2d-table::-webkit-scrollbar, .markdown-content table::-webkit-scrollbar, .chat-messages-container table::-webkit-scrollbar { height: 8px; } /* Light mode scrollbar track */ .m2d-table::-webkit-scrollbar-track, .markdown-content table::-webkit-scrollbar-track, .chat-messages-container table::-webkit-scrollbar-track { background: var(--mantine-color-gray-1); border-radius: 4px; } /* Dark mode scrollbar track */ :root[data-mantine-color-scheme="dark"] .m2d-table::-webkit-scrollbar-track, :root[data-mantine-color-scheme="dark"] .markdown-content table::-webkit-scrollbar-track, :root[data-mantine-color-scheme="dark"] .chat-messages-container table::-webkit-scrollbar-track { background: var(--mantine-color-dark-6); } /* Light mode scrollbar thumb */ .m2d-table::-webkit-scrollbar-thumb, .markdown-content table::-webkit-scrollbar-thumb, .chat-messages-container table::-webkit-scrollbar-thumb { background: var(--mantine-color-gray-4); border-radius: 4px; } /* Dark mode scrollbar thumb */ :root[data-mantine-color-scheme="dark"] .m2d-table::-webkit-scrollbar-thumb, :root[data-mantine-color-scheme="dark"] .markdown-content table::-webkit-scrollbar-thumb, :root[data-mantine-color-scheme="dark"] .chat-messages-container table::-webkit-scrollbar-thumb { background: var(--mantine-color-dark-4); } /* Scrollbar thumb hover state - light mode */ .m2d-table::-webkit-scrollbar-thumb:hover, .markdown-content table::-webkit-scrollbar-thumb:hover, .chat-messages-container table::-webkit-scrollbar-thumb:hover { background: var(--mantine-color-gray-5); } /* Scrollbar thumb hover state - dark mode */ :root[data-mantine-color-scheme="dark"] .m2d-table::-webkit-scrollbar-thumb:hover, :root[data-mantine-color-scheme="dark"] .markdown-content table::-webkit-scrollbar-thumb:hover, :root[data-mantine-color-scheme="dark"] .chat-messages-container table::-webkit-scrollbar-thumb:hover { background: var(--mantine-color-dark-3); } } /* ==================================================================== ADVERTISEMENT STYLING Styling for advertisement banners in TOC section ==================================================================== */ /* Advertisement paper container */ .ad-paper { transition: all 0.3s ease; } .ad-paper:hover { transform: translateY(-2px); box-shadow: var(--mantine-shadow-lg) !important; } /* Advertisement image */ .ad-image { transition: all 0.3s ease; } .ad-image:hover { transform: scale(1.02); } /* Light mode ad container */ :root[data-mantine-color-scheme="light"] .ad-paper { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%); backdrop-filter: blur(10px); } /* Dark mode ad container */ :root[data-mantine-color-scheme="dark"] .ad-paper { background: linear-gradient(135deg, rgba(37, 38, 43, 0.95) 0%, rgba(26, 27, 30, 0.95) 100%); backdrop-filter: blur(10px); } /* ============================================================================ APPLE-STYLE LIQUID GLASS SCROLLBARS Modern scrollbars with glass morphism for all scrollable elements ============================================================================ */ /* General Webkit Scrollbars (for all scrollable elements) */ ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { /* Glass morphism background */ background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); margin: 2px; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { /* Gradient background */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 100% ); /* Glass effect */ backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.18) 100% ); border-color: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2); transform: scale(1.05); } ::-webkit-scrollbar-thumb:active { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.22) 100% ); border-color: rgba(255, 255, 255, 0.35); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.25); transform: scale(0.98); } ::-webkit-scrollbar-corner { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border-radius: 0 0 10px 0; border: 1px solid rgba(255, 255, 255, 0.08); } /* Dark Mode Webkit Scrollbars */ :root[data-mantine-color-scheme="dark"] ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.3); } :root[data-mantine-color-scheme="dark"] ::-webkit-scrollbar-thumb { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 100% ); border-color: rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.4); } :root[data-mantine-color-scheme="dark"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.12) 100% ); border-color: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.5); } :root[data-mantine-color-scheme="dark"] ::-webkit-scrollbar-thumb:active { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.15) 100% ); border-color: rgba(255, 255, 255, 0.25); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.6); } :root[data-mantine-color-scheme="dark"] ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.05); } /* Light Mode Webkit Scrollbars - Darker for better visibility */ :root[data-mantine-color-scheme="light"] ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08); } :root[data-mantine-color-scheme="light"] ::-webkit-scrollbar-thumb { background: linear-gradient( 135deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.15) 100% ); border-color: rgba(0, 0, 0, 0.18); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.12); } :root[data-mantine-color-scheme="light"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient( 135deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.26) 50%, rgba(0, 0, 0, 0.22) 100% ); border-color: rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.15); } :root[data-mantine-color-scheme="light"] ::-webkit-scrollbar-thumb:active { background: linear-gradient( 135deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.32) 50%, rgba(0, 0, 0, 0.28) 100% ); border-color: rgba(0, 0, 0, 0.3); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.18); } :root[data-mantine-color-scheme="light"] ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); } /* ============================================================================ DMC SCROLLAREA COMPONENT - APPLE-STYLE GLASS DESIGN Enhanced scrollbars specifically for Mantine ScrollArea components ============================================================================ */ /* ScrollArea Container - Enhanced spacing for larger scrollbars */ .mantine-ScrollArea-root { --scrollarea-scrollbar-size: 14px; } /* Scrollbar Track - Glass background */ .mantine-ScrollArea-scrollbar { /* Glass morphism background */ background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); /* Rounded corners */ border-radius: 10px; /* Subtle border */ border: 1px solid rgba(255, 255, 255, 0.1); /* Padding for thumb */ padding: 2px; /* Size */ width: var(--scrollarea-scrollbar-size) !important; /* Smooth transitions */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Subtle shadow */ box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1); } /* Vertical scrollbar positioning */ .mantine-ScrollArea-scrollbar[data-orientation="vertical"] { width: var(--scrollarea-scrollbar-size) !important; right: 2px; top: 2px; bottom: 2px; } /* Horizontal scrollbar positioning */ .mantine-ScrollArea-scrollbar[data-orientation="horizontal"] { height: var(--scrollarea-scrollbar-size) !important; left: 2px; right: 2px; bottom: 2px; } /* Scrollbar Thumb - Apple-style design */ .mantine-ScrollArea-thumb { /* Gradient background */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 100% ); /* Glass effect */ backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); /* Rounded */ border-radius: 8px !important; /* Subtle border */ border: 1px solid rgba(255, 255, 255, 0.2); /* Inner highlight */ box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15); /* Smooth transitions */ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Minimum size */ min-height: 40px !important; min-width: 40px !important; } /* Thumb hover state */ .mantine-ScrollArea-thumb:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.18) 100% ); border-color: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2); transform: scale(1.05); } /* Thumb active/dragging state */ .mantine-ScrollArea-thumb:active { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.22) 100% ); border-color: rgba(255, 255, 255, 0.35); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.25); transform: scale(0.98); } /* Scrollbar Corner (where horizontal and vertical meet) */ .mantine-ScrollArea-corner { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border-radius: 0 0 10px 0; border: 1px solid rgba(255, 255, 255, 0.08); } /* ============================================================================ DARK MODE SCROLLAREA ADJUSTMENTS ============================================================================ */ [data-mantine-color-scheme="dark"] .mantine-ScrollArea-scrollbar { background: rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.3); } [data-mantine-color-scheme="dark"] .mantine-ScrollArea-thumb { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 100% ); border-color: rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.4); } [data-mantine-color-scheme="dark"] .mantine-ScrollArea-thumb:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.12) 100% ); border-color: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.5); } [data-mantine-color-scheme="dark"] .mantine-ScrollArea-thumb:active { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.15) 100% ); border-color: rgba(255, 255, 255, 0.25); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.6); } [data-mantine-color-scheme="dark"] .mantine-ScrollArea-corner { background: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.05); } /* ============================================================================ LIGHT MODE SCROLLAREA ADJUSTMENTS - Darker for better visibility ============================================================================ */ [data-mantine-color-scheme="light"] .mantine-ScrollArea-scrollbar { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08); } [data-mantine-color-scheme="light"] .mantine-ScrollArea-thumb { background: linear-gradient( 135deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.15) 100% ); border-color: rgba(0, 0, 0, 0.18); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.12); } [data-mantine-color-scheme="light"] .mantine-ScrollArea-thumb:hover { background: linear-gradient( 135deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.26) 50%, rgba(0, 0, 0, 0.22) 100% ); border-color: rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.15); } [data-mantine-color-scheme="light"] .mantine-ScrollArea-thumb:active { background: linear-gradient( 135deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.32) 50%, rgba(0, 0, 0, 0.28) 100% ); border-color: rgba(0, 0, 0, 0.3); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.18); } [data-mantine-color-scheme="light"] .mantine-ScrollArea-corner { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); } /* ============================================================================ ENHANCED SCROLLBAR VARIANTS Add className to ScrollArea component to use these variants ============================================================================ */ /* Accent variant - Blue tinted for primary areas Usage: dmc.ScrollArea(className="scrollarea-accent", ...) */ .scrollarea-accent .mantine-ScrollArea-thumb { background: linear-gradient( 135deg, rgba(34, 139, 230, 0.35) 0%, rgba(34, 139, 230, 0.25) 50%, rgba(34, 139, 230, 0.18) 100% ); border-color: rgba(34, 139, 230, 0.3); } .scrollarea-accent .mantine-ScrollArea-thumb:hover { background: linear-gradient( 135deg, rgba(34, 139, 230, 0.45) 0%, rgba(34, 139, 230, 0.35) 50%, rgba(34, 139, 230, 0.25) 100% ); border-color: rgba(34, 139, 230, 0.4); } /* Minimal variant - Ultra-subtle for clean interfaces Usage: dmc.ScrollArea(className="scrollarea-minimal", ...) */ .scrollarea-minimal .mantine-ScrollArea-scrollbar { background: transparent; border: none; padding: 0; box-shadow: none; } .scrollarea-minimal .mantine-ScrollArea-thumb { background: rgba(0, 0, 0, 0.15); border: none; box-shadow: none; } .scrollarea-minimal .mantine-ScrollArea-thumb:hover { background: rgba(0, 0, 0, 0.25); } [data-mantine-color-scheme="dark"] .scrollarea-minimal .mantine-ScrollArea-thumb { background: rgba(255, 255, 255, 0.15); } [data-mantine-color-scheme="dark"] .scrollarea-minimal .mantine-ScrollArea-thumb:hover { background: rgba(255, 255, 255, 0.25); } /* Vibrant variant - More visible, colored scrollbars Usage: dmc.ScrollArea(className="scrollarea-vibrant", ...) */ .scrollarea-vibrant .mantine-ScrollArea-thumb { background: linear-gradient( 135deg, rgba(124, 58, 237, 0.4) 0%, rgba(139, 92, 246, 0.3) 50%, rgba(167, 139, 250, 0.2) 100% ); border-color: rgba(124, 58, 237, 0.35); } .scrollarea-vibrant .mantine-ScrollArea-thumb:hover { background: linear-gradient( 135deg, rgba(124, 58, 237, 0.5) 0%, rgba(139, 92, 246, 0.4) 50%, rgba(167, 139, 250, 0.3) 100% ); border-color: rgba(124, 58, 237, 0.45); } /* ============================================================================ RESPONSIVE ADJUSTMENTS ============================================================================ */ /* Slightly smaller on mobile for more screen space */ @media (max-width: 48em) { .mantine-ScrollArea-root { --scrollarea-scrollbar-size: 12px; } .mantine-ScrollArea-thumb { min-height: 30px !important; min-width: 30px !important; } ::-webkit-scrollbar { width: 12px; height: 12px; } } /* ============================================================================ ACCESSIBILITY ENHANCEMENTS ============================================================================ */ /* High contrast mode */ @media (prefers-contrast: high) { ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-width: 2px; border-color: rgba(0, 0, 0, 0.4); } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5) !important; border-width: 2px; border-color: rgba(0, 0, 0, 0.7); } .mantine-ScrollArea-scrollbar { background: rgba(0, 0, 0, 0.2); border-width: 2px; border-color: rgba(0, 0, 0, 0.4); } .mantine-ScrollArea-thumb { background: rgba(0, 0, 0, 0.5) !important; border-width: 2px; border-color: rgba(0, 0, 0, 0.7); } [data-mantine-color-scheme="dark"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); } [data-mantine-color-scheme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.5) !important; border-color: rgba(255, 255, 255, 0.7); } [data-mantine-color-scheme="dark"] .mantine-ScrollArea-scrollbar { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); } [data-mantine-color-scheme="dark"] .mantine-ScrollArea-thumb { background: rgba(255, 255, 255, 0.5) !important; border-color: rgba(255, 255, 255, 0.7); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { ::-webkit-scrollbar-thumb { transition: none !important; } .mantine-ScrollArea-scrollbar, .mantine-ScrollArea-thumb { transition: none !important; } } /* ============================================================================ FOCUS STATES FOR KEYBOARD NAVIGATION ============================================================================ */ .mantine-ScrollArea-viewport:focus-within .mantine-ScrollArea-scrollbar { background: rgba(34, 139, 230, 0.08); border-color: rgba(34, 139, 230, 0.15); } .mantine-ScrollArea-viewport:focus-within .mantine-ScrollArea-thumb { box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 0 0 2px rgba(34, 139, 230, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15); } /* ============================================================================ END APPLE-STYLE GLASS SCROLLBAR DESIGN ============================================================================ */ /* ============================================================================ HOME HERO BANNER Two variants ship in the layout (pages/home.py); the color scheme decides which one is displayed, so the correct banner is on screen at first paint. Light is the default rather than both starting hidden — if the color-scheme attribute is ever missing, one banner still shows instead of neither. ============================================================================ */ .home-hero { margin-bottom: 2rem; } .home-hero-banner { width: 30%; height: auto; border-radius: 12px; } .home-hero-banner--dark { display: none; } :root[data-mantine-color-scheme="dark"] .home-hero-banner--light { display: none; } :root[data-mantine-color-scheme="dark"] .home-hero-banner--dark { display: block; } /* --------------------------------------------------------------------------- Navbar brand mark — theme-paired --------------------------------------------------------------------------- Two files, one element. dev.png is pale pills on transparent (legible on a DARK background); dev-light.png is the same mark in black (legible on a LIGHT one). Swapping a custom property means the browser fetches only the variant actually in use, and the mark is correct in the first paint rather than after a callback resolves — which is what made the old single-src wrong in one theme even before its file went missing. Light is the default here (bare :root), so a document that has not yet had data-mantine-color-scheme stamped on it still renders a visible mark. -------------------------------------------------------------------------*/ :root { --nav-logo: url("/assets/dev-light.png"); } :root[data-mantine-color-scheme="dark"] { --nav-logo: url("/assets/dev.png"); } .nav-logo { width: 36px; height: 36px; flex: none; background-image: var(--nav-logo); background-size: contain; background-position: center; background-repeat: no-repeat; }