/* ======================================================================== SYNCFUSION MATERIAL 3 — LEMONADE PINK COLOR OVERRIDE Modern, Bold, Professional Color System: Hot Pink primary + Warm Neutral backgrounds - #ff0083 primary — bold, distinctive, high-contrast - Neutral greys for text and borders - Turquoise success, Red error, Orange warning, Blue info ======================================================================== */ /* ---------------------------------------- LIGHT MODE (default) ---------------------------------------- */ :root { /* Primary — Hot Pink */ --color-sf-primary: 255, 0, 131; /* #ff0083 Lemonade Pink */ --color-sf-primary-container: 255, 228, 242; /* #ffe4f2 Light Pink */ --color-sf-on-primary: 255, 255, 255; --color-sf-on-primary-container: 180, 0, 96; /* #b40060 Darker Pink */ /* Secondary — Warm Grey */ --color-sf-secondary: 82, 82, 82; /* #525252 Matterhorn */ --color-sf-secondary-container: 243, 243, 243;/* #f3f3f3 Concrete */ --color-sf-on-secondary: 255, 255, 255; --color-sf-on-secondary-container: 38, 38, 38;/* #262626 Void */ /* Tertiary — Blue accent */ --color-sf-tertiary: 42, 118, 228; /* #2A76E4 Blue */ --color-sf-tertiary-container: 235, 245, 255; /* #EBF5FF Angel drop */ --color-sf-on-tertiary: 255, 255, 255; --color-sf-on-tertiary-containe: 34, 90, 175; /* #225AAF Dark blue */ /* Surfaces — Clean whites with warm undertones */ --color-sf-surface: 255, 255, 255; --color-sf-surface-variant: 247, 247, 247; /* #f7f7f7 Cloud */ --color-sf-on-surface: 38, 38, 38; /* #262626 Void */ --color-sf-on-surface-variant: 82, 82, 82; /* #525252 Matterhorn */ --color-sf-background: var(--color-sf-surface); --color-sf-on-background: 38, 38, 38; /* Borders — Soft greys */ --color-sf-outline: 155, 155, 155; /* #9b9b9b Dark */ --color-sf-outline-variant: 236, 236, 236; /* #ececec Glass */ /* Surface tint & inverse */ --color-sf-surface-tint-color: 255, 0, 131; --color-sf-inverse-surface: 38, 38, 38; /* #262626 Void */ --color-sf-inverse-on-surface: 243, 243, 243; /* #f3f3f3 */ --color-sf-inverse-primary: 255, 180, 218; /* #FFB4DA Cupid */ /* ---- STATUS COLORS ---- */ /* Success — Turquoise */ --color-sf-success: 42, 213, 189; /* #2AD5BD Turquoise */ --color-sf-success-container: 219, 255, 236; /* #DBFFEC Frosted mint */ --color-sf-on-success: 255, 255, 255; --color-sf-on-success-container: 29, 159, 88; /* #1D9F58 Eucalyptus */ /* Error — Red */ --color-sf-error: 247, 39, 74; /* #F7274A Red */ --color-sf-error-container: 255, 227, 227; /* #ffe3e3 Pippin */ --color-sf-on-error: 255, 255, 255; --color-sf-on-error-container: 130, 64, 64; /* #824040 Lotus */ /* Warning — Orange */ --color-sf-warning: 255, 176, 28; /* #FFB01C Orange */ --color-sf-warning-container: 255, 243, 199; /* #fff3c7 Barley white */ --color-sf-on-warning: 255, 255, 255; --color-sf-on-warning-container: 209, 131, 19;/* #D18313 Meteor */ /* Info — Blue */ --color-sf-info: 42, 118, 228; /* #2A76E4 Blue */ --color-sf-info-container: 235, 245, 255; /* #EBF5FF Angel drop */ --color-sf-on-info: 255, 255, 255; --color-sf-on-info-container: 34, 90, 175; /* #225AAF Dark blue */ /* Status button text */ --color-sf-success-text: 255, 255, 255; --color-sf-warning-text: 255, 255, 255; --color-sf-danger-text: 255, 255, 255; --color-sf-info-text: 255, 255, 255; } /* ---------------------------------------- DARK MODE Triggered by .e-dark-mode on ---------------------------------------- */ .e-dark-mode { /* Primary — Hot Pink (stays vibrant in dark mode) */ --color-sf-primary: 255, 0, 131; /* #ff0083 Same pink */ --color-sf-primary-container: 100, 0, 59; /* deep pink container */ --color-sf-on-primary: 255, 255, 255; --color-sf-on-primary-container: 255, 180, 218;/* #FFB4DA Cupid */ /* Secondary — Light Grey */ --color-sf-secondary: 224, 224, 224; /* #e0e0e0 Brighter for readability */ --color-sf-secondary-container: 42, 42, 42; /* #2a2a2a Border primary */ --color-sf-on-secondary: 14, 14, 14; --color-sf-on-secondary-container: 240, 240, 240; /* Tertiary — Light Blue */ --color-sf-tertiary: 74, 144, 226; /* #4a90e2 Havelock blue */ --color-sf-tertiary-container: 34, 90, 175; /* #225AAF Dark blue */ --color-sf-on-tertiary: 14, 14, 14; --color-sf-on-tertiary-containe: 179, 217, 255; /* Surfaces — Layered deep black (matches theme.css) */ --color-sf-surface: 26, 26, 26; /* #1a1a1a Surface */ --color-sf-surface-variant: 30, 30, 30; /* #1e1e1e Tertiary */ --color-sf-on-surface: 245, 245, 245; /* #f5f5f5 */ --color-sf-on-surface-variant: 224, 224, 224; /* #e0e0e0 */ --color-sf-on-background: 245, 245, 245; /* Borders — matches theme.css border values */ --color-sf-outline: 61, 61, 61; /* #3d3d3d border-secondary */ --color-sf-outline-variant: 42, 42, 42; /* #2a2a2a border-primary */ /* Surface tint & inverse */ --color-sf-surface-tint-color: 255, 0, 131; --color-sf-inverse-surface: 236, 236, 236; --color-sf-inverse-on-surface: 38, 38, 38; --color-sf-inverse-primary: 220, 0, 115; /* #dc0073 */ /* ---- DARK STATUS COLORS ---- */ /* Success — Turquoise */ --color-sf-success: 42, 213, 189; /* #2AD5BD Stays same */ --color-sf-success-container: 29, 159, 88; --color-sf-on-success: 14, 14, 14; --color-sf-on-success-container: 154, 223, 198; /* Error — Scarlet */ --color-sf-error: 248, 49, 87; /* #F83157 Scarlet */ --color-sf-error-container: 130, 64, 64; --color-sf-on-error: 14, 14, 14; --color-sf-on-error-container: 255, 126, 126; /* Warning — Yellow */ --color-sf-warning: 255, 224, 113; /* #FFE071 Yellow */ --color-sf-warning-container: 209, 131, 19; --color-sf-on-warning: 14, 14, 14; --color-sf-on-warning-container: 255, 219, 149; /* Info — Havelock Blue */ --color-sf-info: 74, 144, 226; /* #4a90e2 Havelock blue */ --color-sf-info-container: 34, 90, 175; --color-sf-on-info: 14, 14, 14; --color-sf-on-info-container: 179, 217, 255; /* Status button text (dark) */ --color-sf-success-text: 0, 0, 0; --color-sf-warning-text: 0, 0, 0; --color-sf-info-text: 0, 0, 0; --color-sf-danger-text: 255, 255, 255; } /* ---------------------------------------- FONT OVERRIDE — Use Lato ---------------------------------------- */ :root, .e-dark-mode { --e-font-name: 'Lato', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --e-serif-font-name: 'Lato'; } /* ---------------------------------------- COMPONENT REFINEMENTS Subtle polish for a premium feel ---------------------------------------- */ /* Grid — cleaner header */ .e-grid .e-headercell { font-weight: 600 !important; letter-spacing: 0.01em; } /* Grid — subtle row hover */ .e-grid .e-row:hover .e-rowcell:not(.e-editedbatchcell) { background: rgba(255, 0, 131, 0.04) !important; } .e-dark-mode .e-grid .e-row:hover .e-rowcell:not(.e-editedbatchcell) { background: rgba(255, 0, 131, 0.08) !important; } /* Grid — selected row */ .e-grid .e-selectionbackground { background: rgba(255, 0, 131, 0.08) !important; } .e-dark-mode .e-grid .e-selectionbackground { background: rgba(255, 0, 131, 0.14) !important; } /* Buttons — Lemonade style with bold pink, rounded, uppercase */ .e-btn { border-radius: 5px !important; font-weight: 700 !important; letter-spacing: 0.02em; text-transform: uppercase; transition: all 0.3s, transform 0.5s !important; } .e-btn.e-primary, .e-btn.e-flat.e-primary { background-color: rgb(255, 0, 131) !important; border-color: transparent !important; color: #ffffff !important; box-shadow: rgba(255, 0, 131, 0.5) 0px 10px 40px -10px; } .e-btn.e-primary:hover, .e-btn.e-flat.e-primary:hover { background-color: #dc0073 !important; transform: translateY(-1px); box-shadow: rgba(255, 0, 131, 0.6) 0px 12px 40px -8px !important; } .e-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(255, 0, 131, 0.15) !important; } .e-dark-mode .e-btn:hover { box-shadow: 0 2px 8px rgba(255, 0, 131, 0.2) !important; } /* Dialog — modern elevation */ .e-dialog { border-radius: 16px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important; border: 1px solid rgba(236, 236, 236, 0.6) !important; } .e-dark-mode .e-dialog { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(49, 49, 49, 0.8) !important; } .e-dialog .e-dlg-header-content { border-bottom: 1px solid rgba(236, 236, 236, 0.8) !important; padding: 16px 20px !important; } .e-dark-mode .e-dialog .e-dlg-header-content { border-bottom: 1px solid rgba(49, 49, 49, 0.8) !important; } /* Toast — rounded and crisp */ .e-toast-container .e-toast { border-radius: 12px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; } /* Input — clean focus ring */ .e-input-group:not(.e-disabled):not(.e-float-icon-left).e-input-focus, .e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left).e-input-focus { border-color: rgb(255, 0, 131) !important; box-shadow: 0 0 0 2px rgba(255, 0, 131, 0.15) !important; } .e-dark-mode .e-input-group:not(.e-disabled):not(.e-float-icon-left).e-input-focus, .e-dark-mode .e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left).e-input-focus { border-color: rgb(255, 0, 131) !important; box-shadow: 0 0 0 2px rgba(255, 0, 131, 0.25) !important; } /* Tabs — modern underline */ .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text { font-weight: 600 !important; } /* Sidebar — clean divider */ .e-sidebar { border-right: 1px solid rgba(236, 236, 236, 0.8) !important; } .e-dark-mode .e-sidebar { border-right: 1px solid rgba(49, 49, 49, 0.8) !important; } /* Tooltip — modern */ .e-tooltip-wrap { border-radius: 8px !important; } /* Dropdown — modern popup */ .e-popup.e-popup-open { border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04) !important; border: 1px solid rgba(236, 236, 236, 0.8) !important; } .e-dark-mode .e-popup.e-popup-open { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(49, 49, 49, 0.8) !important; } /* Card — clean elevation */ .e-card { border-radius: 12px !important; border: 1px solid rgba(236, 236, 236, 0.8) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important; transition: box-shadow 200ms ease, transform 200ms ease !important; } .e-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important; } .e-dark-mode .e-card { border: 1px solid rgba(49, 49, 49, 0.8) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1) !important; } /* Checkbox / Radio — smooth transitions */ .e-checkbox-wrapper .e-frame, .e-radio + label .e-label::before { transition: all 150ms ease !important; } /* Badge — pill-shaped */ .e-badge { border-radius: 9999px !important; font-weight: 600 !important; letter-spacing: 0.02em; }