/* 11_custom.css */
/* ============================================================================= CUSTOM CSS FOR PPE LLM DASH APP Modern & Minimalist Theme Place this file in your /assets folder ============================================================================= */ /* ============================================================================= CONFIGURATION VARIABLES Change these values to customize the entire theme ============================================================================= */ :root { /* ----- SHADOW CONFIGURATION ----- */ --shadow-color: rgba(0, 0, 0, 0.25); --shadow-color-hover: rgba(0, 0, 0, 0.35); --shadow-blur: 12px; --shadow-blur-hover: 20px; --shadow-spread: 1px; --shadow-offset-y: 4px; /* Computed shadows (uses the variables above) */ --card-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color); --card-shadow-hover: var(--shadow-offset-x) 4px var(--shadow-blur-hover) var(--shadow-spread) var(--shadow-color-hover); /* ----- TYPOGRAPHY CONFIGURATION ----- */ /* Format: clamp(MIN, PREFERRED, MAX) */ /* PREFERRED uses viewport width (vw) for fluid scaling */ /* Headings */ --font-size-h1: clamp(1.4rem, 3vw, 1.9rem); /* ~22px to ~30px */ --font-size-h2: clamp(1.2rem, 2.5vw, 1.6rem); /* ~19px to ~26px */ --font-size-h3: clamp(1.05rem, 2.2vw, 1.35rem); /* ~17px to ~22px */ --font-size-h4: clamp(0.95rem, 2vw, 1.2rem); /* ~15px to ~19px */ --font-size-h5: clamp(0.85rem, 1.7vw, 1.05rem); /* ~14px to ~17px */ --font-size-h6: clamp(0.8rem, 1.5vw, 0.95rem); /* ~13px to ~15px */ /* Body text */ --font-size-body: clamp(0.75rem, 1.3vw, 0.875rem); /* ~12px to ~14px */ --font-size-p: clamp(0.7rem, 1.2vw, 0.825rem); /* ~11px to ~13px */ --font-size-small: clamp(0.6rem, 1vw, 0.75rem); /* ~10px to ~12px */ --font-size-span: clamp(0.65rem, 1.1vw, 0.8rem); /* ~10px to ~13px */ /* UI elements */ --font-size-button: clamp(0.7rem, 1.2vw, 0.85rem); --font-size-input: clamp(0.75rem, 1.3vw, 0.875rem); --font-size-label: clamp(0.65rem, 1.1vw, 0.775rem); --font-size-badge: clamp(0.55rem, 0.9vw, 0.7rem); /* ----- SPACING & BORDER RADIUS ----- */ --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; /* ----- TRANSITION ----- */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.35s ease; } /* ============================================================================= BASE TYPOGRAPHY ============================================================================= */ html { font-size: 16px; /* Base for rem calculations */ } body { font-size: var(--font-size-body); line-height: 1.6; } h1, .h1 { font-size: var(--font-size-h1); line-height: 1.2; font-weight: 600; } h2, .h2 { font-size: var(--font-size-h2); line-height: 1.25; font-weight: 600; } h3, .h3 { font-size: var(--font-size-h3); line-height: 1.3; font-weight: 500; } h4, .h4 { font-size: var(--font-size-h4); line-height: 1.35; font-weight: 500; } h5, .h5 { font-size: var(--font-size-h5); line-height: 1.4; font-weight: 500; } h6, .h6 { font-size: var(--font-size-h6); line-height: 1.4; font-weight: 500; } /* Prevent LLM bold markers inside headings from creating weight mismatch */ h1 strong, h1 b, h2 strong, h2 b, h3 strong, h3 b, h4 strong, h4 b, h5 strong, h5 b, h6 strong, h6 b { font-weight: inherit; } p { font-size: var(--font-size-p); line-height: 1.6; } span { font-size: var(--font-size-span); } small, .small { font-size: var(--font-size-small); } label { font-size: var(--font-size-label); } /* ============================================================================= CARDS & CONTAINERS ============================================================================= */ .card { box-shadow: var(--card-shadow); border-radius: var(--border-radius-md); transition: box-shadow var(--transition-normal), transform var(--transition-normal); border: none; } .card:hover { box-shadow: var(--card-shadow-hover); } /* Response cards (your custom class) */ .response-card { box-shadow: var(--card-shadow); border-radius: var(--border-radius-md); transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .response-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-1px); } /* Card headers and bodies */ .card-header { font-size: var(--font-size-body); border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .card-body { font-size: var(--font-size-p); } .card-footer { font-size: var(--font-size-small); border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* ============================================================================= BUTTONS ============================================================================= */ .btn { font-size: var(--font-size-button); border-radius: var(--border-radius-sm); transition: all var(--transition-fast); box-shadow: var(--card-shadow); } .btn:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-1px); } .btn:active { transform: translateY(0); box-shadow: var(--card-shadow); } .btn-sm { font-size: var(--font-size-small); } .btn-lg { font-size: var(--font-size-h5); } /* ============================================================================= FORM ELEMENTS ============================================================================= */ input, textarea, select, .form-control, .form-select { font-size: var(--font-size-input); border-radius: var(--border-radius-sm); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px rgba(55, 90, 127, 0.15); } /* Chat input specific */ .chat-input { font-size: var(--font-size-input); border-radius: var(--border-radius-md); } /* ============================================================================= BADGES & PILLS ============================================================================= */ .badge, .model-badge { font-size: var(--font-size-badge); border-radius: var(--border-radius-sm); font-weight: 500; } .rank-badge { font-size: var(--font-size-badge); box-shadow: var(--card-shadow); } /* ============================================================================= NAVIGATION & NAVBAR ============================================================================= */ .navbar { box-shadow: var(--card-shadow); } .navbar-brand { font-size: var(--font-size-h5); font-weight: 600; } .nav-link { font-size: var(--font-size-body); transition: opacity var(--transition-fast); } /* ============================================================================= TABS ============================================================================= */ .nav-tabs .nav-link { font-size: var(--font-size-body); border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; transition: all var(--transition-fast); } .tab-content { font-size: var(--font-size-p); } /* ============================================================================= ACCORDION ============================================================================= */ .accordion { box-shadow: var(--card-shadow); border-radius: var(--border-radius-md); overflow: hidden; } .accordion-button { font-size: var(--font-size-body); font-weight: 500; } /* Fix collapsed state - give it a visible dark background */ .accordion-button.collapsed { background-color: #303030 !important; color: #fff !important; } /* Make the arrow visible on dark background when collapsed */ .accordion-button.collapsed::after { filter: invert(1); } .accordion-body { font-size: var(--font-size-p); } .accordion-item { border: none; } /* ============================================================================= MODALS ============================================================================= */ .modal-content { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); border-radius: var(--border-radius-lg); border: none; } .modal-header { border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; } .modal-title { font-size: var(--font-size-h4); font-weight: 600; } .modal-body { font-size: var(--font-size-p); } .modal-footer { border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); } /* ============================================================================= ALERTS & TOASTS ============================================================================= */ .alert { font-size: var(--font-size-p); border-radius: var(--border-radius-md); box-shadow: var(--card-shadow); border: none; } .toast { font-size: var(--font-size-small); border-radius: var(--border-radius-md); box-shadow: var(--card-shadow-hover); } /* ============================================================================= STAGE INDICATORS ============================================================================= */ .stage-indicator { font-size: var(--font-size-body); border-radius: var(--border-radius-md); box-shadow: var(--card-shadow); transition: all var(--transition-normal); } /* ============================================================================= MARKDOWN CONTENT ============================================================================= */ .markdown-content { font-size: var(--font-size-p); } .markdown-content h1 { font-size: var(--font-size-h2); } .markdown-content h2 { font-size: var(--font-size-h3); } .markdown-content h3 { font-size: var(--font-size-h4); } .markdown-content h4 { font-size: var(--font-size-h5); } .markdown-content h5 { font-size: var(--font-size-h6); } .markdown-content h6 { font-size: var(--font-size-body); } .markdown-content p { font-size: var(--font-size-p); } .markdown-content pre, .markdown-content code { font-size: var(--font-size-small); border-radius: var(--border-radius-sm); } /* ============================================================================= DROPDOWN ============================================================================= */ .dropdown-menu { font-size: var(--font-size-body); border-radius: var(--border-radius-md); box-shadow: var(--card-shadow-hover); border: none; } .dropdown-item { font-size: var(--font-size-body); transition: background-color var(--transition-fast); } /* ============================================================================= SLIDER / RANGE ============================================================================= */ .rc-slider-mark-text { font-size: var(--font-size-small) !important; } /* ============================================================================= LOADING INDICATOR ============================================================================= */ ._dash-loading { font-size: var(--font-size-small); } /* ============================================================================= UTILITY CLASSES ============================================================================= */ .text-responsive-sm { font-size: var(--font-size-small); } .text-responsive-md { font-size: var(--font-size-body); } .text-responsive-lg { font-size: var(--font-size-h5); } .shadow-subtle { box-shadow: var(--card-shadow); } .shadow-subtle-hover:hover { box-shadow: var(--card-shadow-hover); } /* ============================================================================= RESPONSIVE ADJUSTMENTS Extra tweaks for specific breakpoints if needed ============================================================================= */ /* Extra small devices (phones, less than 576px) */ @media (max-width: 575.98px) { :root { --shadow-blur: 6px; --shadow-blur-hover: 12px; } .card-body { padding: 0.75rem; } .modal-body { padding: 1rem; } } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) and (max-width: 767.98px) { :root { --shadow-blur: 7px; --shadow-blur-hover: 14px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { :root { --shadow-blur: 10px; --shadow-blur-hover: 20px; } } /* Make card header blend with card body */ .card-header { background-color: #383838; } .response-card .card-header { background-color: #383838; } /* ============================================================================= MODERN PILL-STYLE TABS ============================================================================= */ .nav-tabs { border-bottom: none; gap: 8px; background-color: transparent; justify-content: center; } .nav-tabs .nav-link { color: #888; border: none; border-radius: 50px; padding: 10px 20px; background-color: transparent; transition: all 0.2s ease; font-size: var(--font-size-body); font-weight: 500; } .nav-tabs .nav-link:hover { color: #fff; background-color: rgba(55, 90, 127, 0.3); } .nav-tabs .nav-link.active { color: #fff; background-color: #375a7f; border: none; font-weight: 500; } /* Tab content area - remove the connected border look */ .tab-content { border: none; border-radius: var(--border-radius-md); background-color: transparent; padding: 1rem 0; } /* ============================================================================= SCROLLBAR (DARK THEME) ============================================================================= */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #303030; } ::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #666; } /* ============================================================================= STAGE INDICATOR STATES ============================================================================= */ .stage-active { background-color: #375a7f; animation: pulse 2s infinite; } .stage-complete { background-color: #00bc8c; } .stage-pending { background-color: #444; opacity: 0.6; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } /* ============================================================================= CHAT INPUT COLORS ============================================================================= */ .chat-input { background-color: #2d2d2d !important; border: 1px solid #444 !important; color: #fff !important; } .chat-input:focus { border-color: #375a7f !important; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25) !important; } /* ============================================================================= MARKDOWN CODE BLOCKS ============================================================================= */ .markdown-content pre { background-color: #1a1a1a; padding: 1rem; overflow-x: auto; } .markdown-content code { color: #e83e8c; } .markdown-content pre code { color: #f8f9fa; } /* ============================================================================= REMOVABLE MODEL BADGE ============================================================================= */ .model-badge-container { position: relative; display: inline-block; margin-right: 0.5rem; margin-bottom: 0.5rem; } .model-badge-container .remove-btn { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background-color: #dc3545; color: white; font-size: 12px; line-height: 14px; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.2s; } .model-badge-container:hover .remove-btn { opacity: 1; } .model-badge-container .remove-btn:hover { background-color: #a71d2a; } /* ============================================================================= QUICK MODEL SELECTOR ============================================================================= */ .quick-provider-btn { font-size: 0.78rem; padding: 0.2rem 0.55rem; transition: all 0.15s ease; } .quick-tier-btn { font-size: 0.75rem; padding: 0.15rem 0.5rem; transition: all 0.15s ease; } /* ============================================================================= RANKING BADGE COLORS ============================================================================= */ .rank-badge { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; } .rank-1 { background-color: #ffc107; color: #000; } .rank-2 { background-color: #adb5bd; color: #000; } .rank-3 { background-color: #cd7f32; color: #fff; } .rank-other { background-color: #495057; color: #fff; } /* ============================================================================= CHAT BUBBLES (conversation history) ============================================================================= */ .chat-bubble-question { background-color: #2a4a6b; border: 1px solid #375a7f; } .chat-bubble-answer { background-color: #303030; border: 1px solid #444; } /* ============================================================================= LOADING SPINNER ============================================================================= */ .loading-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid #f3f3f3; border-top: 2px solid #375a7f; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ============================================================================= PRESET BUTTONS - BETTER VISIBILITY ON DARK THEME ============================================================================= */ .btn-outline-secondary { color: #adb5bd !important; /* Lighter gray text */ border-color: #6c757d !important; /* More visible border */ } .btn-outline-secondary:hover { color: #fff !important; background-color: rgba(108, 117, 125, 0.3) !important; /* Subtle fill on hover */ border-color: #adb5bd !important; } /* ============================================================================= CONVERSATION MODAL HAMBURGER BUTTON ============================================================================= */ #conversation-modal-btn { background: transparent !important; border: none !important; box-shadow: none !important; transition: opacity var(--transition-fast); } #conversation-modal-btn:hover { opacity: 0.8; transform: none; /* Disable the default button lift */ box-shadow: none !important; } #conversation-modal-btn:focus { box-shadow: none !important; outline: none; } /* Hamburger icon styling */ #conversation-modal-btn .fas.fa-bars { display: inline-block; } /* Conversation modal improvements */ #conversation-modal .modal-body { max-height: 60vh; overflow-y: auto; } /* ============================================================================= NAVBAR MOBILE COLLAPSE - RIGHT ALIGN ============================================================================= */ #navbar-collapse .navbar-nav { text-align: right; } #navbar-collapse .nav-item { text-align: right; } /* Ensure dropdown menus align right on mobile */ @media (max-width: 991.98px) { #navbar-collapse { text-align: right; } #navbar-collapse .navbar-nav { align-items: flex-end; } #navbar-collapse .nav-link { padding-right: 0; } } /* ============================================================================= CONVERSATION THREAD VIEW - LIMIT HEADING SIZES ============================================================================= */ /* Limit markdown heading sizes in conversation thread to keep them compact */ #conversation-thread-view h1, #conversation-thread-view h2, #conversation-thread-view h3, #conversation-thread-view h4 { font-size: 0.95rem !important; font-weight: 600; margin-top: 0.5rem; margin-bottom: 0.5rem; }
/* 92_combined.min.css */
/* 01_variables.css */ /* ======================== */ /* CSS VARIABLES - MUST LOAD FIRST */ /* File: 00_variables.css */ /* ======================== */ :root { /* ======================== */ /* DARK THEME COLORS */ /* ======================== */ /* Background colors */ --bg-primary: rgb(25, 25, 25); --bg-secondary: rgb(35, 35, 35); --bg-tertiary: rgb(15, 15, 15); --bg-dark: rgb(10, 10, 10); --bg-hover: rgba(255, 255, 255, 0.1); --bg-modal: #2a2a2a; --bg-modal-header: #1a1a1a; /* Border colors */ --border-primary: #444; --border-secondary: #666; --border-tertiary: #888; --border-focus: #0d6efd; --border-focus-shadow: rgba(13, 110, 253, 0.25); /* Text colors */ --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-tertiary: #d0d0d0; --text-muted: #888; --text-disabled: #666; /* Status colors */ --color-success: #00bc8c; --color-success-hover: #009670; --color-danger: #e74c3c; --color-danger-hover: #dc3545; --color-warning: #f39c12; --color-warning-hover: #ffd700; --color-info: #3498db; --color-info-hover: #66b3ff; --color-primary: #0d6efd; --color-primary-hover: #0a58ca; --color-primary-light: #66b3ff; /* Value colors for tables */ --value-positive: #28a745; --value-negative: #dc3545; /* Component specific */ --shadow-default: 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.2); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5); /* Transitions */ --transition-default: all 0.2s ease; --transition-slow: all 0.3s ease; /* Font sizes */ --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; /* Border radius */ --radius-sm: 3px; --radius-base: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* Z-index layers */ --z-sticky-1: 1; --z-sticky-2: 2; --z-sticky-3: 3; --z-dropdown: 10; --z-modal: 100; --z-tooltip: 1000; } /* 02_global_dynamic_fonts.css */ /* ======================== */ /* GLOBAL DYNAMIC FONT SIZING */ /* File: 01_global_dynamic_fonts.css */ /* ======================== */ /* * This file sets dynamic font sizing for ALL components * Load this AFTER variables.css but BEFORE all other component CSS files * This ensures all components inherit these responsive sizes */ /* ======================== */ /* OVERRIDE CSS VARIABLES BASED ON SCREEN SIZE */ /* ======================== */ /* Mobile First - Smallest sizes */ :root { --font-size-xs: 9px; --font-size-sm: 10px; --font-size-base: 10px; /* Down from 12px */ --font-size-md: 11px; /* Down from 13px */ --font-size-lg: 12px; /* Down from 14px */ --font-size-xl: 14px; /* Down from 16px */ } /* Small devices (landscape phones, 544px and up) */ @media (min-width: 544px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 11px; --font-size-md: 12px; --font-size-lg: 13px; --font-size-xl: 15px; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* ======================== */ /* UNIVERSAL FONT SIZE APPLICATION */ /* ======================== */ /* Apply to ALL text elements by default */ body, body * { font-size: var(--font-size-base) !important; }¨ /* ======================== */ /* SPECIFIC COMPONENT OVERRIDES */ /* ======================== */ /* Paragraphs - Keep your existing responsive sizing */ p { font-size: var(--font-size-base) !important; } /* Spans */ span { font-size: var(--font-size-base) !important; } /* Headers - Slightly larger but still dynamic */ h1 { font-size: calc(var(--font-size-xl) * 1.5) !important; } h2 { font-size: calc(var(--font-size-xl) * 1.25) !important; } h3 { font-size: calc(var(--font-size-lg) * 1.2) !important; } h4 { font-size: var(--font-size-lg) !important; } h5 { font-size: var(--font-size-md) !important; } h6 { font-size: var(--font-size-base) !important; } /* ======================== */ /* TABLES (DataTable & dbc.Table) */ /* ======================== */ /* Table body cells */ .table tbody td, .dash-spreadsheet-container td, div.dash-spreadsheet-container .dash-spreadsheet-inner table td { font-size: var(--font-size-base) !important; } /* Table headers - slightly larger */ .table thead th, .dash-spreadsheet-container th, div.dash-spreadsheet-container .dash-spreadsheet-inner table th { font-size: var(--font-size-md) !important; } /* ======================== */ /* FORMS & INPUTS */ /* ======================== */ /* All form controls */ .form-control, .form-select, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select { font-size: var(--font-size-base) !important; } /* Labels */ label, .form-label { font-size: var(--font-size-sm) !important; } /* ======================== */ /* DROPDOWNS & SELECT MENUS */ /* ======================== */ /* Keep dropdowns small as you like them */ .Select-control, .Select-menu-outer, .Select-value-label, .Select-option, .Select-input input, .Select-placeholder { font-size: var(--font-size-sm) !important; /* 10-11px dynamic */ } /* ======================== */ /* BUTTONS */ /* ======================== */ /* All buttons */ .btn, button, [type="button"], [type="submit"], .export { font-size: var(--font-size-base) !important; } /* Small buttons */ .btn-sm { font-size: var(--font-size-sm) !important; } /* Large buttons */ .btn-lg { font-size: var(--font-size-md) !important; } /* ======================== */ /* NAVIGATION & TABS */ /* ======================== */ .nav-link, .nav-tabs .nav-link, .navbar-nav { font-size: var(--font-size-base) !important; } /* ======================== */ /* CARDS */ /* ======================== */ .card-body, .card-title, .card-text { font-size: var(--font-size-base) !important; } .card-header, .card-footer { font-size: var(--font-size-sm) !important; } /* ======================== */ /* MODALS */ /* ======================== */ .modal-body { font-size: var(--font-size-base) !important; } .modal-title { font-size: var(--font-size-lg) !important; } /* ======================== */ /* PAGINATION */ /* ======================== */ .page-number, .current-page-container input, .pagination { font-size: var(--font-size-sm) !important; } /* ======================== */ /* TOOLTIPS & POPOVERS */ /* ======================== */ .tooltip, .popover, .dash-tooltip { font-size: var(--font-size-sm) !important; } /* ======================== */ /* DATE PICKERS */ /* ======================== */ .DateInput_input, .DateInput_input_1, .CalendarDay__default, .CalendarMonth_caption { font-size: var(--font-size-base) !important; } /* ======================== */ /* OVERRIDE FOR SPECIFIC SMALL ELEMENTS */ /* ======================== */ /* Keep these extra small */ .badge, .form-text, small, .small { font-size: var(--font-size-xs) !important; } /* ======================== */ /* ENSURE READABILITY MINIMUMS */ /* ======================== */ /* Never go below 9px for readability */ @media (max-width: 543px) { body, body * { min-font-size: 9px; } } /* ======================== */ /* PLOTLY GRAPH OVERRIDES */ /* ======================== */ /* Let Plotly control its own font sizes */ .js-plotly-plot .plotly text, .js-plotly-plot .legend text, .js-plotly-plot .legendtext, g.legend text.legendtext { font-size: var(--font-size-xs) !important; } /* Alternatively, if you want to use your CSS variable system */ .js-plotly-plot .legend text { font-size: var(--font-size-xs) !important; /* 11px by default */ } /* ======================== */ /* TERMLY BANNER SIZE FIX - SPECIFIC VERSION */ /* Based on exact class names from inspection */ /* ======================== */ /* ======================== */ /* TERMLY BANNER SIZE FIX - DYNAMIC VERSION WITH SCALE VARIABLE */ /* Adjust the --termly-scale variable to make everything bigger/smaller */ /* ======================== */ /* Define the scale variable - CHANGE THIS TO ADJUST SIZE */ :root { --termly-scale: 0.7; /* 0.5 = 50% of original size, 1.0 = 100%, 0.7 = 70%, etc. */ } /* Responsive scale adjustments */ @media (max-width: 768px) { :root { --termly-scale: 0.65; /* Slightly smaller on tablets */ } } @media (max-width: 480px) { :root { --termly-scale: 0.6; /* Even smaller on phones */ } } @media (max-width: 375px) { :root { --termly-scale: 0.55; /* Smallest for iPhone SE and similar */ } } /* Calculate all sizes based on the scale variable */ :root { /* Original sizes multiplied by scale */ --termly-font-size: calc(14px * var(--termly-scale)); --termly-message-font: calc(13px * var(--termly-scale)); --termly-button-font: calc(13px * var(--termly-scale)); /* Padding calculations */ --termly-banner-padding-y: calc(12px * var(--termly-scale)); --termly-banner-padding-x: calc(16px * var(--termly-scale)); --termly-button-padding-y: calc(8px * var(--termly-scale)); --termly-button-padding-x: calc(16px * var(--termly-scale)); /* Heights and gaps */ --termly-button-height: calc(36px * var(--termly-scale)); --termly-gap: calc(12px * var(--termly-scale)); --termly-button-gap: calc(8px * var(--termly-scale)); --termly-max-height: calc(160px * var(--termly-scale)); /* Line height scales less aggressively to maintain readability */ --termly-line-height: calc(1.4 - (0.2 * (1 - var(--termly-scale)))); } /* Main banner container */ .termly-styles-root-b8aebb.termly-styles-banner-e1cd59 { padding: var(--termly-banner-padding-y) var(--termly-banner-padding-x) !important; font-size: var(--termly-font-size) !important; } /* Content wrapper */ .termly-styles-content-fcafe4 { font-size: var(--termly-font-size) !important; gap: var(--termly-gap) !important; } /* Message container */ .termly-styles-messageContainer-d6c726 { font-size: var(--termly-font-size) !important; } /* Message text */ .termly-styles-message-d6c726, .termly-styles-root-d5f97a { font-size: var(--termly-message-font) !important; line-height: var(--termly-line-height) !important; } /* Cookie policy link text */ .termly-styles-root-d5f97a[role="button"][tabindex="0"] { font-size: var(--termly-message-font) !important; text-decoration: underline; } /* Preferences link */ .termly-styles-root-d5f97a[data-testid="preferences-link"] { font-size: var(--termly-message-font) !important; } /* Button container */ .termly-styles-buttons-bb7ed2 { gap: var(--termly-button-gap) !important; } /* Accept button */ .termly-styles-button-bb7ed2[data-tid="banner-accept"] { background: rgb(74, 74, 74) !important; font-size: var(--termly-button-font) !important; padding: var(--termly-button-padding-y) var(--termly-button-padding-x) !important; height: var(--termly-button-height) !important; min-height: unset !important; } /* Accept All Cookies button */ .termly-styles-module-root-aa0eb.termly-styles-module-primary-aa493c.termly-styles-module-solid-cd1b13.termly-styles-button-a4543c button { font-size: var(--termly-button-font) !important; padding: var(--termly-button-padding-y) var(--termly-button-padding-x) !important; height: var(--termly-button-height) !important; font-weight: normal !important; } /* Override all text inside the banner */ #termly-code-snippet-support * { font-size: inherit !important; line-height: inherit !important; } /* Ensure the banner container doesn't grow too large */ #termly-code-snippet-support { font-size: var(--termly-font-size) !important; max-height: var(--termly-max-height) !important; } /* Additional micro-adjustments for very small screens */ @media (max-width: 320px) { :root { --termly-scale: 0.45; /* Ultra-compact for very small devices */ } /* Stack buttons vertically on very small screens */ .termly-styles-buttons-bb7ed2 { flex-direction: column !important; width: 100% !important; } .termly-styles-button-bb7ed2, .termly-styles-module-root-aa0eb { width: 100% !important; } } /* 03_typography.css */ /* ======================== */ /* TYPOGRAPHY AND TEXT STYLES */ /* File: 02_typography.css */ /* ======================== */ /* Base font family inheritance */ .dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-container table, .dash-spreadsheet-container input { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } /* ======================== */ /* RESPONSIVE TYPOGRAPHY */ /* ======================== */ /* Paragraph responsive sizing */ @media (min-width: 1px) { p { font-size: var(--font-size-xs); } } @media (min-width: 544px) { p { font-size: var(--font-size-base); } } @media (min-width: 768px) { p { font-size: var(--font-size-md); } } @media (min-width: 992px) { p { font-size: var(--font-size-md); } } @media (min-width: 1200px) { p { font-size: var(--font-size-md); } } /* Span responsive sizing */ @media (min-width: 1px) { span { font-size: var(--font-size-xs); } } @media (min-width: 544px) { span { font-size: var(--font-size-base); } } @media (min-width: 768px) { span { font-size: var(--font-size-md); } } @media (min-width: 992px) { span { font-size: var(--font-size-md); } } @media (min-width: 1200px) { span { font-size: var(--font-size-md); } } /* H1 responsive sizing */ @media (min-width: 1px) { h1 { font-size: 1.8rem; } } @media (min-width: 544px) { h1 { font-size: 2rem; } } @media (min-width: 768px) { h1 { font-size: 2.2rem; } } @media (min-width: 992px) { h1 { font-size: 2.4rem; } } @media (min-width: 1200px) { h1 { font-size: 2.5rem; } } /* H2 responsive sizing */ @media (min-width: 1px) { h2 { font-size: 1.4rem; } } @media (min-width: 544px) { h2 { font-size: 1.6rem; } } @media (min-width: 768px) { h2 { font-size: 1.8rem; } } @media (min-width: 992px) { h2 { font-size: 1.9rem; } } @media (min-width: 1200px) { h2 { font-size: 2rem; } } /* H3 responsive sizing */ @media (min-width: 1px) { h3 { font-size: 1.2rem; } } @media (min-width: 544px) { h3 { font-size: 1.25rem; } } @media (min-width: 768px) { h3 { font-size: 1.35rem; } } @media (min-width: 992px) { h3 { font-size: 1.5rem; } } @media (min-width: 1200px) { h3 { font-size: 1.75rem; } } /* H4 responsive sizing */ @media (min-width: 1px) { h4 { font-size: 1rem; } } @media (min-width: 544px) { h4 { font-size: 1rem; } } @media (min-width: 768px) { h4 { font-size: 1rem; } } @media (min-width: 992px) { h4 { font-size: 1.1rem; } } @media (min-width: 1200px) { h4 { font-size: 1.1rem; } } /* H5 responsive sizing */ @media (min-width: 1px) { h5 { font-size: 1rem; } } @media (min-width: 544px) { h5 { font-size: 1rem; } } @media (min-width: 768px) { h5 { font-size: 1rem; } } @media (min-width: 992px) { h5 { font-size: 1.1rem; } } @media (min-width: 1200px) { h5 { font-size: 1.1rem; } } /* ======================== */ /* COLOR CODING FOR VALUES */ /* ======================== */ /* Positive values */ .cell-value-positive { color: var(--value-positive); font-weight: 500; } /* Negative values */ .cell-value-negative { color: var(--value-negative); font-weight: 500; } /* Primary text color in modals */ .learn-more-content .text-primary { color: var(--color-info-hover); } /* 04_forms_inputs.css */ /* ======================== */ /* FORM ELEMENTS AND INPUTS */ /* File: 03_forms-inputs.css */ /* ======================== */ /* Base form controls */ .form-control, .form-control:focus, .form-control:valid, input[type="number"], input[type="text"], input.form-control { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); } .form-control:focus { border-color: var(--border-focus); box-shadow: 0 0 0 0.25rem var(--border-focus-shadow); } /* Form control responsive sizing */ @media (min-width: 1px) { .form-control:valid { font-size: var(--font-size-xs); } } @media (min-width: 768px) { .form-control:valid { font-size: var(--font-size-sm); } } /* Disabled input styling */ input:disabled, .form-control:disabled { background-color: var(--bg-tertiary); color: var(--text-disabled); cursor: not-allowed; opacity: 0.6; } /* ======================== */ /* SELECT DROPDOWNS */ /* ======================== */ /* Select control base styling */ .Select-control { background-color: var(--bg-primary); border: 1px solid var(--border-primary); min-height: 30px; font-size: var(--font-size-base); /* font-size changed to var(--font-size-base): old design was font-size: 11px;*/ } /* Select menu styling */ .Select-menu-outer { background-color: var(--bg-primary); border: 1px solid var(--border-primary); margin-top: 2px; font-size: var(--font-size-sm); /* font-size: 11px; Changed to var(--font-size-sm) to match new design */ } /* Select value and label */ .Select-value, .Select-value-label { color: var(--text-primary); } /* Select input */ .Select-input input { color: var(--text-primary); font-size: var(--font-size-sm); /* font-size: 11px; changed to var(--font-size-base): old design was font-size: 11px;* */ } /* Select options */ .Select-option { background-color: var(--bg-primary); color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); } .Select-option:hover { background-color: var(--bg-hover); } .Select-option.is-selected { background-color: var(--color-primary); color: var(--text-primary); } /* Dropdown container */ .dash-dropdown-container { background-color: var(--bg-primary); } /* Custom form select (date dropdowns) */ .form-select-sm { background-color: #222; color: var(--text-primary); border: 1px solid var(--border-primary); transition: var(--transition-default); } .form-select-sm:focus { background-color: #2a2a2a; border-color: var(--color-success); box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25); color: var(--text-primary); } .form-select-sm option { background-color: #222; color: var(--text-primary); } .form-select-sm:hover { border-color: var(--border-secondary); } /* ======================== */ /* EXPORT BUTTONS */ /* ======================== */ .export { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); padding: 6px 12px; border-radius: var(--radius-base); font-size: var(--font-size-base); cursor: pointer; transition: var(--transition-default); margin: var(--spacing-xs); } .export:hover { background-color: var(--bg-hover); border-color: var(--border-secondary); } /* ======================== */ /* DCC.DROPDOWN FIXES */ /* ======================== */ /* Fix focus state - prevent white background */ .Select.is-focused > .Select-control { background-color: rgb(25, 25, 25) !important; border-color: var(--border-focus) !important; box-shadow: 0 0 0 0.25rem var(--border-focus-shadow) !important; } /* Fix selected value text color for single select */ .Select--single > .Select-control .Select-value { color: var(--text-primary) !important; } /* Ensure text remains white in all states */ .Select-value-label { color: var(--text-primary) !important; } /* Fix placeholder text color */ .Select-placeholder { color: var(--text-muted) !important; } /* Fix dropdown arrow color */ .Select-arrow { border-color: var(--text-muted) transparent transparent !important; } /* Fix dropdown arrow on hover */ .Select-control:hover .Select-arrow { border-color: var(--text-primary) transparent transparent !important; } /* Additional fixes for multi-select if needed */ .Select--multi .Select-value { background-color: var(--bg-secondary) !important; border-color: var(--border-primary) !important; color: var(--text-primary) !important; } .Select--multi .Select-value-icon { border-color: var(--border-primary) !important; } .Select--multi .Select-value-icon:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } /* ======================== */ /* DROPDOWN STATE FIXES - Add these to the end of 03_forms_inputs.css */ /* ======================== */ /* Fix for dropdown background turning white after callbacks */ .Select-control, .Select.is-open > .Select-control, .Select.is-focused:not(.is-open) > .Select-control { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* Ensure menu stays dark */ .Select-menu-outer, .Select.is-open .Select-menu-outer { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* Fix for multi-select specific issues */ .Select--multi .Select-control, .Select--multi.is-open > .Select-control, .Select--multi.is-focused:not(.is-open) > .Select-control { background-color: var(--bg-primary) !important; } /* Handle React-Select's dynamic classes */ .Select-control, .Select-control:hover, .Select--single > .Select-control, .Select--multi > .Select-control { background-color: rgb(25, 25, 25) !important; } /* Ensure dropdown arrow and clear button stay visible */ .Select-arrow-zone, .Select-clear-zone { background-color: transparent !important; } /* Handle the input field inside the dropdown */ .Select-input > input, .Select--multi .Select-input > input { background-color: transparent !important; color: var(--text-primary) !important; } /* Fix for when dropdown is disabled */ .Select.is-disabled > .Select-control { background-color: var(--bg-tertiary) !important; opacity: 0.6; } /* Additional specificity for problematic states */ .dash-dropdown .Select-control, .dash-dropdown .Select.is-open > .Select-control, .dash-dropdown .Select.is-focused > .Select-control { background-color: rgb(25, 25, 25) !important; color: var(--text-primary) !important; } /* Force dark background on all Select elements regardless of state */ div[class*="Select"] .Select-control { background-color: rgb(25, 25, 25) !important; } /* Handle Dash's wrapper divs */ .dash-dropdown-container .Select-control, .dash-dropdown-container .Select-menu-outer { background-color: var(--bg-primary) !important; } /* Ensure the dropdown doesn't inherit any white backgrounds from parent elements */ .Select-control * { background-color: transparent !important; } /* Fix for dropdown options */ .Select-option, .Select-option.is-focused, .Select-option.is-selected { background-color: var(--bg-primary) !important; } .Select-option.is-focused:not(.is-selected) { background-color: var(--bg-hover) !important; } .Select-option.is-selected { background-color: var(--color-primary) !important; } /* Ensure no white background bleeds through from Bootstrap or other sources */ .form-control.Select-input, .form-control .Select-control { background-color: transparent !important; } /* ======================== */ /* SAFER DASH RADIO/CHECKBOX SPACING */ /* This version ONLY affects radio buttons and checkboxes */ /* ======================== */ /* Only target labels that CONTAIN radio buttons */ label:has(input[type="radio"]) { margin-right: 8px !important; margin-bottom: 8px !important; display: inline-flex !important; align-items: center !important; } /* Only target labels that CONTAIN checkboxes */ label:has(input[type="checkbox"]) { margin-right: 8px !important; margin-bottom: 8px !important; display: inline-flex !important; align-items: center !important; } /* Spacing for the radio/checkbox inputs themselves */ input[type="radio"], input[type="checkbox"] { margin-right: 8px !important; /*margin-left: 2px !important;*/ cursor: pointer; } /* For browsers that don't support :has() - more specific targeting */ label > input[type="radio"], label > input[type="checkbox"] { margin-right: 8px !important; } /* Only affect labels with inline-block IF they contain radio/checkbox */ label[style*="inline-block"]:has(input[type="radio"]), label[style*="inline-block"]:has(input[type="checkbox"]) { margin-right: 8px !important; margin-bottom: 8px !important; } /* Remove margin from last radio/checkbox label in a group */ div.mb-3 > label:last-child:has(input[type="radio"]), div.mb-3 > label:last-child:has(input[type="checkbox"]) { margin-right: 0 !important; } /* Alternative approach using attribute selectors for Dash components */ /* This targets RadioItems and Checklist components specifically */ div[id*="-radioitems"] label, div[id*="-checklist"] label, div[id*="radio"] label:has(input[type="radio"]), div[id*="check"] label:has(input[type="checkbox"]) { margin-right: 8px !important; margin-bottom: 8px !important; } /* Fallback for older browsers without :has() support */ /* Only applies to labels that are direct children of common Dash containers */ .dash-radioitems > label, .dash-checklist > label, div[class*="radio"] > label, div[class*="check"] > label { margin-right: 8px !important; margin-bottom: 8px !important; } /* Ensure we don't affect any other inline-block elements */ /* Reset margins for non-radio/checkbox labels */ label:not(:has(input[type="radio"])):not(:has(input[type="checkbox"])) { /* These labels keep their default styling */ } /* 05_tables.css */ /* ======================== */ /* TABLE STYLES */ /* File: 04_tables.css */ /* ======================== */ /* ======================== */ /* STICKY COLUMNS - DEFAULT (First column) */ /* ======================== */ th:first-child, td:first-child { position: sticky !important; left: 0px; z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* STICKY COLUMNS - TWO COLUMNS */ /* Apply class 'two-columns-sticky' when first column has collapse button */ /* ======================== */ .two-columns-sticky th:nth-child(1), .two-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .two-columns-sticky th:nth-child(2), .two-columns-sticky td:nth-child(2) { position: sticky !important; left: 20px; /* Adjust based on first column width - it was 31 before*/ z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* STICKY COLUMNS - THREE COLUMNS */ /* Apply class 'three-columns-sticky' when both [+] and [X] buttons present */ /* ======================== */ .three-columns-sticky th:nth-child(1), .three-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-3); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(2), .three-columns-sticky td:nth-child(2) { position: sticky !important; left: 25px; /* Width of first column */ z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(3), .three-columns-sticky td:nth-child(3) { position: sticky !important; left: 50px; /* Width of first + second columns */ z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* SPECIAL COLUMN WIDTHS */ /* ======================== */ /* Fixed width "+" column */ .plus-col, .plus-col > button { width: 20px; min-width: 20px; max-width: 20px; text-align: center; padding: 0; } /* Fixed width "X" column */ .remove-col, .remove-col > button { width: 25px; min-width: 25px; max-width: 25px; text-align: center; padding: 0; } /* First sticky column: "+" */ th.plus-col, td.plus-col { position: sticky; left: 0; z-index: var(--z-sticky-2); background: var(--bg-secondary); } /* Second sticky column: "X" (if present) or ticker */ th.remove-col, td.remove-col { position: sticky; left: 25px; /* Exactly width of first column */ z-index: var(--z-sticky-1); background: var(--bg-secondary); } /* 06_datatable.css */ /* ======================== */ /* DASH DATATABLE STYLES - TRADITIONAL TABLE MATCHING */ /* File: 05_datatable.css */ /* ======================== */ /* Override inline styles with higher specificity */ .dash-table-container .dash-spreadsheet-container { --accent: #0d6efd !important; --border: #3a3a3a !important; --text-color: #ffffff !important; --background-color: #1a1a1a !important; --hover: #2a2a2a !important; } /* Main container */ .dash-table-container { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* Table wrapper */ .dash-spreadsheet-container { border: none !important; border-radius: 0 !important; overflow: hidden !important; } /* Inner container */ .dash-spreadsheet-inner { background-color: transparent !important; } /* The actual table - TRADITIONAL GRID */ .dash-spreadsheet-inner table { background-color: transparent !important; border-collapse: collapse !important; /* No gaps between cells */ border-spacing: 0 !important; } /* ============= HEADERS - DARKER LIKE LEFT TABLE ============= */ .dash-spreadsheet .dash-header { background-color: #141414 !important; /* Darker header */ font-weight: 600 !important; } .dash-spreadsheet-inner th, .dash-header th, .dash-filter th { background-color: #141414 !important; /* Very dark header */ color: #ffffff !important; font-weight: 600 !important; padding: 8px 10px !important; /* Reduced padding to match */ border: none !important; border-bottom: 1px solid #3a3a3a !important; /* Bottom border only */ border-radius: 0 !important; /* No rounded corners */ font-size: 11px !important; /* Smaller to match */ text-align: left !important; } /* Column headers specifically */ .column-header-name { color: #ffffff !important; font-weight: 600 !important; } /* ============= DATA CELLS - TRADITIONAL STYLE ============= */ .dash-spreadsheet-inner td, .dash-cell-value, .dash-select-cell { background-color: transparent !important; /* Inherit row background */ color: #e0e0e0 !important; /* Slightly softer white */ border: none !important; border-bottom: 1px solid #2a2a2a !important; /* Horizontal lines only */ border-radius: 0 !important; /* No rounded corners */ padding: 6px 10px !important; /* Tighter padding */ font-size: 11px !important; font-weight: 400 !important; /* Regular weight */ line-height: 1.4 !important; /* Tighter line height */ transition: none !important; /* Remove animations */ } /* Cell content */ .dash-cell-value { background-color: transparent !important; border: none !important; padding: 0 !important; } /* ============= ROW BACKGROUNDS - SUBTLE STRIPING ============= */ .dash-spreadsheet-inner tbody tr { background-color: #1a1a1a !important; /* Base background */ } .dash-spreadsheet-inner tbody tr:nth-child(even) { background-color: #1d1d1d !important; /* Very subtle stripe */ } /* ============= HOVER STATES - SUBTLE ============= */ .dash-spreadsheet-inner tbody tr:hover { background-color: #252525 !important; /* Subtle hover */ } .dash-spreadsheet-inner tbody tr:hover td { background-color: transparent !important; /* Cells inherit row background */ transform: none !important; /* No scaling */ box-shadow: none !important; /* No shadow */ } /* ============= SELECTED/ACTIVE CELLS ============= */ .dash-spreadsheet td.focused { background-color: rgba(13, 110, 253, 0.15) !important; box-shadow: inset 0 0 0 1px #0d6efd !important; } .dash-spreadsheet td.cell--selected { background-color: rgba(13, 110, 253, 0.08) !important; } /* ============= FILTERS ============= */ .dash-filter { background-color: #1a1a1a !important; } .dash-filter input { background-color: #1a1a1a !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; border-radius: 2px !important; /* Minimal rounding */ padding: 4px 6px !important; font-size: 11px !important; } .dash-filter input:focus { border-color: #0d6efd !important; outline: none !important; } .dash-filter--case { background-color: #1a1a1a !important; } /* ============= PAGINATION CONTAINER ============= */ .previous-next-container { background-color: #1a1a1a !important; padding: 8px !important; border-top: 1px solid #3a3a3a !important; display: flex !important; align-items: center !important; gap: 4px !important; } /* ============= PAGINATION BUTTONS - TRADITIONAL ============= */ .previous-page, .next-page, .first-page, .last-page, .page-number { border-radius: 3px !important; /* Minimal rounding */ background: #252525 !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; padding: 4px 8px !important; height: 28px !important; /* Smaller height */ box-sizing: border-box !important; font-size: 11px !important; font-weight: 400 !important; line-height: 20px !important; transition: background-color 0.15s ease !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; margin: 0 2px !important; } .page-number:hover, .previous-page:hover:not([disabled]), .next-page:hover:not([disabled]), .first-page:hover:not([disabled]), .last-page:hover:not([disabled]) { background: #2a2a2a !important; border-color: #444 !important; transform: none !important; /* No movement */ box-shadow: none !important; /* No shadow */ } /* Disabled state */ .previous-page[disabled], .next-page[disabled], .first-page[disabled], .last-page[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; } /* ============= CURRENT PAGE INPUT - TRADITIONAL ============= */ /* Remove pseudo-elements */ .current-page-container::before, .current-page-container::after, .current-page-container input::before, .current-page-container input::after, .current-page-container *::before, .current-page-container *::after { content: none !important; display: none !important; } /* Container alignment */ .current-page-container { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; background: transparent !important; height: 28px !important; line-height: 28px !important; margin: 0 2px !important; } /* Hide duplicate elements */ .current-page-container > *:not(input) { display: none !important; } /* Traditional input style */ .current-page-container input { border-radius: 3px !important; background: #0d6efd !important; border: 1px solid #0d6efd !important; color: #ffffff !important; font-weight: 500 !important; padding: 4px 8px !important; width: 50px !important; height: 28px !important; box-sizing: border-box !important; text-align: center !important; font-size: 11px !important; line-height: 20px !important; transition: background-color 0.15s ease !important; box-shadow: none !important; position: relative !important; top: 0 !important; margin: 0 !important; vertical-align: middle !important; z-index: 1 !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(0) !important; } /* Subtle hover effect */ .current-page-container input:hover, .current-page-container input:focus { background: #0a58ca !important; border-color: #0a58ca !important; box-shadow: none !important; transform: none !important; outline: none !important; } /* ============= SORT INDICATORS ============= */ .sort { color: #0d6efd !important; font-weight: 600 !important; padding-left: 4px !important; font-size: 10px !important; } .sort.descending::after { content: ' ↓' !important; } .sort.ascending::after { content: ' ↑' !important; } /* ============= SCROLLBARS ============= */ .dash-spreadsheet-inner::-webkit-scrollbar, .dash-table-viewport::-webkit-scrollbar { width: 8px !important; height: 8px !important; } .dash-spreadsheet-inner::-webkit-scrollbar-track, .dash-table-viewport::-webkit-scrollbar-track { background: #1a1a1a !important; } .dash-spreadsheet-inner::-webkit-scrollbar-thumb, .dash-table-viewport::-webkit-scrollbar-thumb { background: #3a3a3a !important; border-radius: 2px !important; } .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover, .dash-table-viewport::-webkit-scrollbar-thumb:hover { background: #4a4a4a !important; } /* ============= EDITABLE CELLS ============= */ .dash-spreadsheet-inner .cell--editing { background-color: #1a1a1a !important; box-shadow: inset 0 0 0 1px #0d6efd !important; } .dash-spreadsheet-inner .cell--editing input { background-color: transparent !important; color: #ffffff !important; font-size: 11px !important; } /* ============= DROPDOWN CELLS ============= */ .dash-dropdown { background-color: #1a1a1a !important; } .Select-control { background-color: #1a1a1a !important; border-color: #3a3a3a !important; } .Select-menu-outer { background-color: #1a1a1a !important; border-color: #3a3a3a !important; color: #ffffff !important; } /* ============= FORCE OVERRIDES ============= */ div.dash-table-container * { background-color: inherit !important; color: inherit !important; } div.dash-table-container table, div.dash-table-container tbody, div.dash-table-container thead, div.dash-table-container tr { background-color: transparent !important; } /* ============= EXPORT BUTTONS ============= */ .export { background-color: #252525 !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; border-radius: 3px !important; padding: 4px 8px !important; margin: 2px !important; cursor: pointer !important; font-size: 11px !important; } .export:hover { background-color: #2a2a2a !important; border-color: #444 !important; } /* ============= ENSURE TEXT CONSISTENCY ============= */ .dash-spreadsheet-inner td, .dash-spreadsheet-inner th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; } /* ============= HORIZONTAL SCROLLING FIX ============= */ /* Enable horizontal scrolling for all DataTables */ .dash-table-container { overflow-x: auto !important; width: 100% !important; } .dash-spreadsheet-container { overflow-x: auto !important; } /* Ensure the table can expand beyond container width */ .dash-table-container .dash-spreadsheet-inner { min-width: 100%; width: auto !important; } /* Optional: Ensure viewport scrolling works properly */ .dash-table-viewport { overflow-x: auto !important; } /* Optional: Fix for when table is inside a Bootstrap column */ .col .dash-table-container, .col-md-6 .dash-table-container, .col-lg-6 .dash-table-container, [class*="col-"] .dash-table-container { max-width: 100%; overflow-x: auto !important; } /* ============= FIX FOR STICKY COLUMNS IN DATATABLE ============= */ /* Ensure sticky columns have opaque backgrounds */ /* First sticky column */ .dash-spreadsheet-inner td:first-child, .dash-spreadsheet-inner th:first-child { background-color: #252525 !important; /* Opaque background matching your theme */ position: sticky !important; left: 0; z-index: 2; } /* For two-columns-sticky class */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(1), .two-columns-sticky .dash-spreadsheet-inner th:nth-child(1) { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 3; } .two-columns-sticky .dash-spreadsheet-inner td:nth-child(2), .two-columns-sticky .dash-spreadsheet-inner th:nth-child(2) { background-color: #252525 !important; position: sticky !important; left: 31px; z-index: 2; } /* For three-columns-sticky class */ .three-columns-sticky .dash-spreadsheet-inner td:nth-child(1), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(1) { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 4; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(2), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(2) { background-color: #252525 !important; position: sticky !important; left: 25px; z-index: 3; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(3), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(3) { background-color: #252525 !important; position: sticky !important; left: 50px; z-index: 2; } /* Ensure sticky headers also have opaque backgrounds */ .dash-spreadsheet .dash-header th:first-child, .dash-spreadsheet .dash-header th:nth-child(2), .dash-spreadsheet .dash-header th:nth-child(3) { background-color: #141414 !important; /* Match your header background */ } /* Handle hover states for sticky columns */ .dash-spreadsheet-inner tbody tr:hover td:first-child, .dash-spreadsheet-inner tbody tr:hover td:nth-child(2), .dash-spreadsheet-inner tbody tr:hover td:nth-child(3) { background-color: #2a2a2a !important; /* Slightly lighter on hover */ } /* Ensure cell content within sticky columns doesn't override */ .dash-spreadsheet-inner td:first-child .dash-cell-value, .dash-spreadsheet-inner td:nth-child(2) .dash-cell-value, .dash-spreadsheet-inner td:nth-child(3) .dash-cell-value { background-color: transparent !important; /* Keep content transparent */ } /* Add shadow to sticky columns for better visual separation */ .dash-spreadsheet-inner td:first-child::after, .dash-spreadsheet-inner th:first-child::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); pointer-events: none; } /* For multiple sticky columns, only add shadow to the last sticky column */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(2)::after, .two-columns-sticky .dash-spreadsheet-inner th:nth-child(2)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(3)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(3)::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); pointer-events: none; } /* Remove shadow from non-last sticky columns in multi-sticky setups */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(1)::after, .two-columns-sticky .dash-spreadsheet-inner th:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(2)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(2)::after { display: none; } /* 07_components.css */ /* ======================== */ /* UI COMPONENTS */ /* File: 05_components.css */ /* ======================== */ /* ======================== */ /* CARD HOVER EFFECTS */ /* ======================== */ /* Hover effect for cards with 'hover-card' class */ .hover-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-card:hover { transform: scale(1.05); box-shadow: var(--shadow-hover); } /* Custom card shadow */ .custom-card-shadow { box-shadow: var(--shadow-default); } /* ======================== */ /* LINK HOVER EFFECTS */ /* ======================== */ .hover-link:hover { cursor: pointer; } /* ======================== */ /* NAVIGATION TABS */ /* ======================== */ /* Pill-style modern tabs */ .nav-tabs { border-bottom: none; background-color: rgba(0, 0, 0, 0.2); padding: var(--spacing-sm); border-radius: var(--radius-xl); display: inline-flex; gap: var(--spacing-xs); } .nav-tabs .nav-link { border: none; border-radius: var(--radius-lg); background-color: transparent; color: rgba(255, 255, 255, 0.7); padding: 10px 18px; transition: var(--transition-slow); font-size: var(--font-size-md); font-weight: 500; } .nav-tabs .nav-link:hover { background-color: var(--bg-hover); color: var(--text-primary); } .nav-tabs .nav-link.active { background-color: var(--color-primary); color: var(--text-primary); box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3); } /* ======================== */ /* TOOLTIPS */ /* ======================== */ .dash-tooltip { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-base); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-base); box-shadow: var(--shadow-default); } /* ======================== */ /* LOADING STATE */ /* ======================== */ .dash-loading { background-color: rgba(35, 35, 35, 0.9); color: var(--text-primary); } .dash-loading-spinner { border-color: var(--border-primary); border-top-color: var(--color-primary); } /* 08_date_picker.css */ /* ======================== */ /* DATE PICKER COMPONENT */ /* File: 06_date-picker.css */ /* ======================== */ /* Date input fields */ .DateInput_input { background-color: var(--bg-primary); color: var(--text-primary); font-size: inherit; height: 25px; border: 1px solid var(--border-primary); } /* Date input variant (used by some date pickers) */ .DateInput_input_1 { background-color: var(--bg-primary); color: var(--text-primary); font-size: inherit; height: 25px; border: 1px solid var(--border-primary); } .DateInput_input__focused { border-color: var(--border-focus); background-color: #2b2b2b; } /* Date picker container and wrapper */ .SingleDatePicker_picker { background-color: #1a1a1a; border: 1px solid var(--border-primary); border-radius: var(--radius-base); box-shadow: var(--shadow-lg); } .DateRangePicker_picker { background-color: #1a1a1a; border: 1px solid var(--border-primary); border-radius: var(--radius-base); box-shadow: var(--shadow-lg); } /* Calendar base */ .DayPicker { background-color: #1a1a1a; } .DayPicker__horizontal { background-color: #1a1a1a; } /* Month container */ .CalendarMonth { background-color: #1a1a1a; padding: 0; } /* Calendar month caption - THIS IS THE YEAR/MONTH HEADER */ .CalendarMonth_caption { color: var(--text-primary); background-color: #1a1a1a; font-weight: 600; font-size: var(--font-size-xl); padding: 10px 0; margin-bottom: 5px; } /* Navigation arrows */ .DayPickerNavigation_button { background-color: transparent; border: 1px solid var(--border-primary); border-radius: var(--radius-sm); } .DayPickerNavigation_button:hover { background-color: var(--bg-hover); } .DayPickerNavigation_svg { fill: var(--text-primary); } /* Week headers (Su Mo Tu etc) - HIDDEN */ .DayPicker_weekHeader { display: none !important; } .DayPicker_weekHeader_ul { display: none !important; } .DayPicker_weekHeader_li { display: none !important; } /* Calendar table */ .CalendarMonth_table { background-color: #1a1a1a; margin: 0; margin-top: 5px; /* Add space above the date grid */ } /* Calendar week (tr elements) */ .CalendarWeek { background-color: #1a1a1a; } /* Calendar days */ .CalendarDay__default { background-color: #1a1a1a; color: var(--text-primary); border: 1px solid #2a2a2a; font-weight: 400; height: 35px; vertical-align: middle; } .CalendarDay__default:hover { background-color: #2a2a2a; color: var(--text-primary); border: 1px solid var(--border-primary); } /* Fix for the container edges */ .DayPicker_transitionContainer { background-color: #1a1a1a; padding-bottom: 10px; } .DayPickerKeyboardShortcuts_buttonReset { display: none !important; /* Hide the question mark button */ } /* Today */ .CalendarDay__today { background-color: #2a2a2a; color: var(--color-info-hover); font-weight: 600; } /* Selected day */ .CalendarDay__selected { background-color: var(--color-primary); color: var(--text-primary); border: 1px solid var(--color-primary); font-weight: 600; } .CalendarDay__selected:hover { background-color: var(--color-primary-hover); border: 1px solid var(--color-primary-hover); } /* Selected span */ .CalendarDay__selected_span { background-color: rgba(13, 110, 253, 0.2); color: var(--text-primary); border: 1px solid rgba(13, 110, 253, 0.3); } /* Hovered span */ .CalendarDay__hovered_span { background-color: rgba(13, 110, 253, 0.1); border: 1px solid rgba(13, 110, 253, 0.2); } /* Blocked/disabled days */ .CalendarDay__blocked_calendar { background-color: #1a1a1a; color: var(--border-primary); text-decoration: line-through; } /* Outside month days */ .CalendarDay__blocked_out_of_range { background-color: #1a1a1a; color: #333; } /* Additional fixes for white edges */ .DateRangePickerInput { background-color: #1a1a1a; } .DateRangePicker { background-color: #1a1a1a; } .DayPicker__withBorder { background-color: #1a1a1a; box-shadow: none; } /* Force dark background on all date picker elements */ .SingleDatePicker, .SingleDatePickerInput { background-color: transparent; } /* Override any default white backgrounds */ div[class*="DayPicker"], div[class*="CalendarMonth"], div[class*="CalendarDay"] { background-color: #1a1a1a; } /* Fix spacing to prevent first row from being hidden */ .CalendarMonthGrid { background-color: #1a1a1a; } .CalendarMonthGrid__horizontal { background-color: #1a1a1a; } /* Ensure proper spacing for the first week */ .CalendarMonth tbody { background-color: #1a1a1a; } .CalendarMonth_table tbody tr:first-child { height: auto; min-height: 35px; } /* 09_modals.css */ /* ======================== */ /* MODAL DIALOGS */ /* File: 07_modals.css */ /* ======================== */ /* Modal base styling */ .modal-content { background-color: var(--bg-modal); border: 1px solid var(--border-primary); } .modal-header { background-color: var(--bg-modal-header); border-bottom: 1px solid var(--border-primary); color: var(--text-primary); /* This will use white ?*/ } .modal-body { background-color: var(--bg-modal); color: var(--text-secondary); } .modal-footer { background-color: var(--bg-modal-header); border-top: 1px solid var(--border-primary); } /* Close button */ #close-learn-more { background-color: var(--border-primary); border-color: var(--border-primary); } #close-learn-more:hover { background-color: #555; border-color: #555; } /* ======================== */ /* LEARN MORE MODAL SPECIFIC */ /* ======================== */ /* Learn More content styling */ .learn-more-content { font-size: var(--font-size-xl); line-height: 1.6; color: var(--text-secondary); } .learn-more-content h5 { color: var(--color-primary-light); font-weight: 600; border-bottom: 2px solid var(--border-primary); padding-bottom: var(--spacing-sm); } .learn-more-content h6 { color: #ffcc66; font-size: 18px; margin-top: var(--spacing-xl); } .learn-more-content p { color: var(--text-tertiary); margin-bottom: 15px; } .learn-more-content ul { margin-left: var(--spacing-xl); margin-bottom: 15px; } .learn-more-content li { margin-bottom: var(--spacing-sm); color: var(--text-tertiary); } .learn-more-content strong { color: var(--color-warning-hover); font-weight: 600; } /* Learn More Button */ #learn-more-button { border-color: var(--color-primary-light); color: var(--color-primary-light); font-weight: 500; transition: var(--transition-slow); } #learn-more-button:hover { background-color: var(--color-primary-light); color: var(--bg-modal-header); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 179, 255, 0.4); } /* ======================== */ /* MODAL SCROLLBAR */ /* ======================== */ .modal-body::-webkit-scrollbar { width: 10px; } .modal-body::-webkit-scrollbar-track { background: var(--bg-modal-header); } .modal-body::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 5px; } .modal-body::-webkit-scrollbar-thumb:hover { background: #555; } /* 10_scrollbars.css */ /* ======================== */ /* CUSTOM SCROLLBARS */ /* File: 08_scrollbars.css */ /* ======================== */ /* Dash DataTable scrollbars */ .dash-spreadsheet-container::-webkit-scrollbar, .dash-spreadsheet-inner::-webkit-scrollbar { width: 8px; height: 8px; } .dash-spreadsheet-container::-webkit-scrollbar-track, .dash-spreadsheet-inner::-webkit-scrollbar-track { background-color: var(--bg-primary); } .dash-spreadsheet-container::-webkit-scrollbar-thumb, .dash-spreadsheet-inner::-webkit-scrollbar-thumb { background-color: var(--border-secondary); border-radius: var(--radius-base); } .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover, .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover { background-color: var(--border-tertiary); } /* 11_dbc_table.css */ /* ======================== */ /* DASH BOOTSTRAP COMPONENTS TABLE STYLES */ /* File: 10_dbc_table.css */ /* ======================== */ /* ======================== */ /* TABLE BODY STYLES */ /* ======================== */ /* Base table body cells */ .table tbody td { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-base); /* 12px by default */ color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); /* 8px 12px */ vertical-align: middle; } /* Alternative: If you want different font sizes for different screen sizes */ @media (min-width: 1px) { .table tbody td { font-size: var(--font-size-xs); /* 10px on mobile */ } } @media (min-width: 768px) { .table tbody td { font-size: var(--font-size-sm); /* 11px on tablet */ } } @media (min-width: 992px) { .table tbody td { font-size: var(--font-size-base); /* 12px on desktop */ } } /* ======================== */ /* TABLE HEADER STYLES */ /* ======================== */ /* Table header cells */ .table thead th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-md); /* 13px */ font-weight: 600; color: var(--text-primary); /*text-transform: uppercase; Optional: makes headers stand out */ letter-spacing: 0.5px; /* Optional: adds spacing between letters */ padding: var(--spacing-md) var(--spacing-md); /* 12px padding */ vertical-align: middle; border-bottom: 2px solid var(--border-primary); /* Thicker border for header */ } /* Alternative header styling (remove text-transform if not wanted) */ .table thead th { background-color: var(--bg-secondary); /* Slightly different background */ position: relative; } /* ======================== */ /* HOVER EFFECTS */ /* ======================== */ /* Row hover effect for better readability */ .table tbody tr:hover { background-color: var(--bg-hover) !important; transition: var(--transition-default); } /* Ensure text remains readable on hover */ .table tbody tr:hover td { color: var(--text-primary); } /* ======================== */ /* STRIPED TABLE VARIANT */ /* ======================== */ /* If using striped tables */ .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); } .table-striped tbody tr:hover { background-color: var(--bg-hover) !important; } /* ======================== */ /* BORDERED TABLE VARIANT */ /* ======================== */ .table-bordered { border: 1px solid var(--border-primary); } .table-bordered td, .table-bordered th { border: 1px solid var(--border-primary); } /* ======================== */ /* SMALL/COMPACT TABLE VARIANT */ /* ======================== */ .table-sm td, .table-sm th { padding: var(--spacing-xs) var(--spacing-sm); /* 4px 8px for compact */ font-size: var(--font-size-sm); /* 11px for compact */ } /* ======================== */ /* RESPONSIVE TABLE WRAPPER */ /* ======================== */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Custom scrollbar for responsive tables */ .table-responsive::-webkit-scrollbar { height: 8px; } .table-responsive::-webkit-scrollbar-track { background-color: var(--bg-primary); } .table-responsive::-webkit-scrollbar-thumb { background-color: var(--border-secondary); border-radius: var(--radius-base); } .table-responsive::-webkit-scrollbar-thumb:hover { background-color: var(--border-tertiary); } /* ======================== */ /* SPECIFIC DBC.TABLE TARGETING */ /* ======================== */ /* More specific selectors for dbc.Table if needed */ div[class*="dash-table"] .table tbody td, div[class*="dash-bootstrap"] .table tbody td { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--font-size-base); } div[class*="dash-table"] .table thead th, div[class*="dash-bootstrap"] .table thead th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--font-size-md); font-weight: 600; } /* ======================== */ /* CUSTOM FONT SIZE CLASSES */ /* ======================== */ /* Use these classes to override default sizes */ .table-font-xs tbody td { font-size: var(--font-size-xs) !important; } /* 10px */ .table-font-sm tbody td { font-size: var(--font-size-sm) !important; } /* 11px */ .table-font-md tbody td { font-size: var(--font-size-md) !important; } /* 13px */ .table-font-lg tbody td { font-size: var(--font-size-lg) !important; } /* 14px */ .table-header-xs thead th { font-size: var(--font-size-sm) !important; } /* 11px */ .table-header-sm thead th { font-size: var(--font-size-base) !important; } /* 12px */ .table-header-md thead th { font-size: var(--font-size-md) !important; } /* 13px */ .table-header-lg thead th { font-size: var(--font-size-lg) !important; } /* 14px */ .table-header-xl thead th { font-size: var(--font-size-xl) !important; } /* 16px */ /* ======================== */ /* ALIGNMENT UTILITIES */ /* ======================== */ .table .text-left { text-align: left !important; } .table .text-center { text-align: center !important; } .table .text-right { text-align: right !important; } .table .align-top { vertical-align: top !important; } .table .align-middle { vertical-align: middle !important; } .table .align-bottom { vertical-align: bottom !important; } /* ======================== */ /* COLOR CODING FOR VALUES (matching DataTable) */ /* ======================== */ .table .cell-value-positive, .table .text-success { color: var(--value-positive); font-weight: 500; } .table .cell-value-negative, .table .text-danger { color: var(--value-negative); font-weight: 500; }