/** * Theme System * * Three themes available: * - salesforce (default): Classic Salesforce blue/gray/white * - retro: Authentic Borland/MS-DOS style * - sacred: Terminal aesthetics inspired by sacred.computer * * To apply a theme, add the data-theme attribute to the body: * */ /* ============================================ CSS CUSTOM PROPERTIES FOR THEMING ============================================ */ :root, body[data-theme="salesforce"] { /* Primary brand colors */ --oi-color-brand-primary: #0176d3; --oi-color-brand-primary-hover: #014486; --oi-color-brand-primary-light: #eef4ff; --oi-color-brand-secondary: #16325c; /* Text colors */ --oi-color-text-default: #181818; --oi-color-text-secondary: #3e3e3c; --oi-color-text-muted: #706e6b; --oi-color-text-placeholder: #939393; --oi-color-text-inverse: #ffffff; --oi-color-text-link: #0176d3; --oi-color-text-link-hover: #014486; /* Background colors */ --oi-color-background-default: lightsteelblue; --oi-color-background-alt: #b8c8dc; --oi-color-background-alt-2: #c8d4e4; --oi-color-background-input: #ffffff; --oi-color-background-highlight: #f0f7ff; --oi-color-background-selected: #eef4ff; --oi-color-background-card: #ffffff; /* Border colors */ --oi-color-border-default: #dddbda; --oi-color-border-input: #d0d7de; --oi-color-border-focus: #0176d3; --oi-color-border-separator: #d8dde6; /* Status colors */ --oi-color-success: #2e844a; --oi-color-success-light: #d4edda; --oi-color-warning: #fe9339; --oi-color-warning-light: #fff3cd; --oi-color-error: #ea001e; --oi-color-error-light: #fef1ee; --oi-color-error-dark: #c23934; /* Org type badges */ --oi-color-badge-prod: #c23934; --oi-color-badge-sandbox: #fe9339; --oi-color-badge-test: #2e844a; /* Syntax highlighting */ --oi-syntax-keyword: #8250df; --oi-syntax-function: #0550ae; --oi-syntax-operator: #cf222e; --oi-syntax-string: #0a3069; --oi-syntax-number: #0550ae; --oi-syntax-field: #116329; --oi-syntax-object: #953800; --oi-syntax-comment: #6e7781; --oi-syntax-caret: #24292e; /* Header/Navigation */ --oi-color-header-bg: #16325c; --oi-color-header-text: #ffffff; --oi-color-tooltip-bg: #16325c; /* Shadows */ --oi-shadow-focus: rgba(9, 105, 218, 0.15); --oi-shadow-dropdown: rgba(0, 0, 0, 0.1); /* Tab colors */ --oi-color-tab-background: rgb(229, 229, 229); --oi-color-tab-active: #0176d3; } /* ============================================ RETRO THEME - Authentic Borland/MS-DOS style Inspired by Turbo C, Turbo Pascal, Borland C++ ============================================ */ body[data-theme="retro"] { /* Primary brand colors - Borland green for buttons */ --oi-color-brand-primary: #35f035; --oi-color-brand-primary-hover: #00ff00; --oi-color-brand-primary-light: #005500; --oi-color-brand-secondary: #00aaaa; /* Text colors - Classic DOS white/yellow on blue */ --oi-color-text-default: #ffffff; --oi-color-text-secondary: #ffff55; --oi-color-text-muted: #aaaaaa; --oi-color-text-placeholder: #555555; --oi-color-text-inverse: #000000; --oi-color-text-link: #ffff55; --oi-color-text-link-hover: #ffffff; /* Background colors - DOS blue with gray dialogs */ --oi-color-background-default: #0000aa; --oi-color-background-alt: #000080; --oi-color-background-alt-2: #0000aa; --oi-color-background-input: #000080; --oi-color-background-highlight: #000080; --oi-color-background-selected: #00aaaa; --oi-color-background-card: #aaaaaa; /* Border colors - gray/black for 3D effect */ --oi-color-border-default: #000000; --oi-color-border-input: #555555; --oi-color-border-focus: #ffffff; --oi-color-border-separator: #555555; /* Status colors - DOS palette */ --oi-color-success: #00aa00; --oi-color-success-light: #005500; --oi-color-warning: #ffff55; --oi-color-warning-light: #555500; --oi-color-error: #ff5555; --oi-color-error-light: #550000; --oi-color-error-dark: #aa0000; /* Org type badges */ --oi-color-badge-prod: #ff5555; --oi-color-badge-sandbox: #ffff55; --oi-color-badge-test: #00aa00; /* Syntax highlighting - DOS colors */ --oi-syntax-keyword: #ffffff; --oi-syntax-function: #ffff55; --oi-syntax-operator: #ff55ff; --oi-syntax-string: #55ff55; --oi-syntax-number: #55ffff; --oi-syntax-field: #ffff55; --oi-syntax-object: #ff5555; --oi-syntax-comment: #aaaaaa; --oi-syntax-caret: #ffffff; /* Header/Navigation - cyan menu bar like Turbo C */ --oi-color-header-bg: #00aaaa; --oi-color-header-text: #000000; --oi-color-tooltip-bg: #aaaaaa; /* Shadows - none, we use offset box-shadow for 3D */ --oi-shadow-focus: transparent; --oi-shadow-dropdown: transparent; /* Tab colors - cyan header bar */ --oi-color-tab-background: #00aaaa; --oi-color-tab-active: #000000; } /* ============================================ SACRED THEME - Terminal aesthetics Inspired by sacred.computer - Light theme ============================================ */ body[data-theme="sacred"] { /* Primary brand colors - black/green for terminal look */ --oi-color-brand-primary: #000000; --oi-color-brand-primary-hover: #333333; --oi-color-brand-primary-light: #d4f5d4; --oi-color-brand-secondary: #2e7d32; /* Text colors - Black on white for readability */ --oi-color-text-default: #000000; --oi-color-text-secondary: #333333; --oi-color-text-muted: #666666; --oi-color-text-placeholder: #999999; --oi-color-text-inverse: #ffffff; --oi-color-text-link: #000000; --oi-color-text-link-hover: #2e7d32; /* Background colors - White with light green accents */ --oi-color-background-default: #ffffff; --oi-color-background-alt: #e8f5e9; --oi-color-background-alt-2: #f1f8e9; --oi-color-background-input: #ffffff; --oi-color-background-highlight: #c8e6c9; --oi-color-background-selected: #a5d6a7; --oi-color-background-card: #e8e8e8; /* Border colors - Black for clean lines */ --oi-color-border-default: #000000; --oi-color-border-input: #000000; --oi-color-border-focus: #000000; --oi-color-border-separator: #cccccc; /* Status colors - Green-focused palette */ --oi-color-success: #2e7d32; --oi-color-success-light: #c8e6c9; --oi-color-warning: #8a7a40; --oi-color-warning-light: #f0e8c8; --oi-color-error: #8a4a4a; --oi-color-error-light: #f0d4d4; --oi-color-error-dark: #6a3a3a; /* Org type badges */ --oi-color-badge-prod: #6a3a3a; --oi-color-badge-sandbox: #8a7a40; --oi-color-badge-test: #2e7d32; /* Syntax highlighting - Monochrome inspired */ --oi-syntax-keyword: #000000; --oi-syntax-function: #333333; --oi-syntax-operator: #000000; --oi-syntax-string: #555555; --oi-syntax-number: #444444; --oi-syntax-field: #333333; --oi-syntax-object: #222222; --oi-syntax-comment: #888888; --oi-syntax-caret: #000000; /* Header/Navigation - Black bar like sacred.computer dialogs */ --oi-color-header-bg: #000000; --oi-color-header-text: #ffffff; --oi-color-tooltip-bg: #000000; /* Shadows - Subtle depth */ --oi-shadow-focus: rgba(0, 0, 0, 0.15); --oi-shadow-dropdown: rgba(0, 0, 0, 0.2); /* Tab colors - green accent */ --oi-color-tab-background: #c8e6c9; --oi-color-tab-active: #000000; } /* ============================================ GLOBAL OVERRIDES FOR SLDS COMPONENTS ============================================ */ /* Override SLDS brand colors */ body[data-theme="retro"], body[data-theme="sacred"] { /* Override SLDS default backgrounds */ --slds-g-color-neutral-base-100: var(--oi-color-background-default); --slds-g-color-neutral-base-95: var(--oi-color-background-alt); --slds-g-color-brand-base-50: var(--oi-color-brand-primary); --slds-g-color-brand-base-30: var(--oi-color-brand-primary-hover); } /* Apply theme to body background */ body { background-color: var(--oi-color-background-default, #ffffff); color: var(--oi-color-text-default, #181818); } /* Override common SLDS classes for theming */ .slds-theme_default { background-color: var(--oi-color-background-default) !important; color: var(--oi-color-text-default) !important; } .slds-theme_shade { background-color: var(--oi-color-background-alt) !important; } /* Links */ body a { color: var(--oi-color-text-link); } body a:hover { color: var(--oi-color-text-link-hover); } /* SLDS Box component */ .slds-box { background-color: var(--oi-color-background-default); border-color: var(--oi-color-border-default); } /* SLDS Card component */ .slds-card { background-color: var(--oi-color-background-default); } /* SLDS Input fields */ .slds-input, .slds-textarea, .slds-select, .slds-combobox__input { background-color: var(--oi-color-background-input); border-color: var(--oi-color-border-input); color: var(--oi-color-text-default); } .slds-input:focus, .slds-textarea:focus, .slds-select:focus { border-color: var(--oi-color-border-focus); box-shadow: 0 0 0 3px var(--oi-shadow-focus); } /* SLDS Text colors */ .slds-text-color_weak, .slds-text-color_inverse-weak { color: var(--oi-color-text-muted) !important; } /* SLDS Button */ .slds-button_brand { background-color: var(--oi-color-brand-primary); border-color: var(--oi-color-brand-primary); } .slds-button_brand:hover { background-color: var(--oi-color-brand-primary-hover); border-color: var(--oi-color-brand-primary-hover); } /* SLDS Table */ .slds-table thead th { background-color: var(--oi-color-background-alt); } .slds-table tbody tr:hover td { background-color: var(--oi-color-background-highlight); } /* Tabs */ .slds-tabs_default__link { color: var(--oi-color-text-secondary); } .slds-tabs_default__item.slds-is-active .slds-tabs_default__link { color: var(--oi-color-brand-primary); border-bottom-color: var(--oi-color-brand-primary); } /* Navigation bar overrides for retro theme */ body[data-theme="retro"] .slds-global-header, body[data-theme="retro"] .slds-context-bar { background-color: var(--oi-color-header-bg); } body[data-theme="retro"] .slds-context-bar__item .slds-context-bar__label-action { color: var(--oi-color-header-text); } /* ============================================ RETRO THEME - Authentic Borland/MS-DOS style ============================================ */ /* Monospace font for authentic DOS look */ body[data-theme="retro"] { font-family: 'Perfect DOS VGA 437', 'Fixedsys', 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 14px; letter-spacing: 0; } /* DOS-style header bar - cyan background with black text like Turbo C menu */ body[data-theme="retro"] .slds-context-bar { background-color: #00aaaa !important; border: none; border-bottom: 2px solid #005555; } body[data-theme="retro"] .slds-context-bar__item:not(.slds-is-active) .slds-context-bar__label-action { color: #000000 !important; font-weight: normal; } /* Active menu item - red highlight like Turbo C */ body[data-theme="retro"] .slds-context-bar__item.slds-is-active { background-color: #aa0000 !important; border: none; } body[data-theme="retro"] .slds-context-bar__item.slds-is-active .slds-context-bar__label-action { color: #ffffff !important; font-weight: normal; } /* Borland-style dialog boxes with gray background and 3D shadow */ body[data-theme="retro"] .slds-box, body[data-theme="retro"] .slds-card { background-color: #aaaaaa; border: 2px solid #ffffff; border-right-color: #555555; border-bottom-color: #555555; box-shadow: 3px 3px 0 #000000; color: #000000; } /* Card body text should be dark on gray */ body[data-theme="retro"] .slds-box *, body[data-theme="retro"] .slds-card * { color: #000000; } /* But keep links yellow/highlighted */ body[data-theme="retro"] .slds-box a, body[data-theme="retro"] .slds-card a { color: #0000aa; } body[data-theme="retro"] .slds-box a:hover, body[data-theme="retro"] .slds-card a:hover { color: #000080; text-decoration: underline; } /* DOS-style buttons - 3D raised effect */ body[data-theme="retro"] .slds-button { text-transform: uppercase; letter-spacing: 1px; font-weight: normal; } /* Primary button - Green like Turbo Pascal OK button */ body[data-theme="retro"] .slds-button_brand { background-color: #00aa00; border: 2px solid #55ff55; border-right-color: #005500; border-bottom-color: #005500; color: #ffffff; box-shadow: 2px 2px 0 #000000; } body[data-theme="retro"] .slds-button_brand:hover { background-color: #00cc00; border-color: #55ff55; border-right-color: #005500; border-bottom-color: #005500; color: #ffffff; } body[data-theme="retro"] .slds-button_brand:active { background-color: #008800; border: 2px solid #005500; border-right-color: #55ff55; border-bottom-color: #55ff55; box-shadow: none; transform: translate(2px, 2px); } /* Neutral button - Gray 3D style */ body[data-theme="retro"] .slds-button_neutral { background-color: #aaaaaa; border: 2px solid #ffffff; border-right-color: #555555; border-bottom-color: #555555; color: #000000; box-shadow: 2px 2px 0 #000000; } body[data-theme="retro"] .slds-button_neutral:hover { background-color: #cccccc; color: #000000; } body[data-theme="retro"] .slds-button_neutral:active { background-color: #888888; border: 2px solid #555555; border-right-color: #ffffff; border-bottom-color: #ffffff; box-shadow: none; transform: translate(2px, 2px); } /* DOS-style inputs - dark blue with bright text */ body[data-theme="retro"] .slds-input, body[data-theme="retro"] .slds-textarea, body[data-theme="retro"] .slds-select { border: 2px solid #555555; border-right-color: #ffffff; border-bottom-color: #ffffff; background-color: #000080; color: #ffff55; } body[data-theme="retro"] .slds-input:focus, body[data-theme="retro"] .slds-textarea:focus, body[data-theme="retro"] .slds-select:focus { border-color: #ffff55; box-shadow: none; outline: none; } body[data-theme="retro"] .slds-input::placeholder, body[data-theme="retro"] .slds-textarea::placeholder { color: #5555aa; } /* DOS-style select dropdown */ body[data-theme="retro"] .slds-select { background-image: none; } /* DOS-style tables */ body[data-theme="retro"] .slds-table { border: 2px solid #555555; background-color: #000080; } body[data-theme="retro"] .slds-table thead th { background-color: #00aaaa; color: #000000 !important; border: none; font-weight: normal; border-bottom: 2px solid #005555; } /* Ensure ALL text in table headers is black */ body[data-theme="retro"] .slds-table thead th *, body[data-theme="retro"] .slds-table thead th span, body[data-theme="retro"] .slds-table thead th div, body[data-theme="retro"] .slds-table thead th a { color: #000000 !important; } body[data-theme="retro"] .slds-table tbody td { border-color: #005555; color: #55ffff !important; background-color: #000080; } /* Ensure ALL text in table cells is bright cyan for readability */ body[data-theme="retro"] .slds-table tbody td *, body[data-theme="retro"] .slds-table tbody td span, body[data-theme="retro"] .slds-table tbody td div { color: #55ffff !important; } /* Links in table cells - bright yellow */ body[data-theme="retro"] .slds-table tbody td a { color: #ffff55 !important; } body[data-theme="retro"] .slds-table tbody td a:hover { color: #ffffff !important; } body[data-theme="retro"] .slds-table tbody tr:hover td { background-color: #0000aa; color: #ffffff !important; } body[data-theme="retro"] .slds-table tbody tr:hover td *, body[data-theme="retro"] .slds-table tbody tr:hover td span, body[data-theme="retro"] .slds-table tbody tr:hover td div { color: #ffffff !important; } body[data-theme="retro"] .slds-table tbody tr:hover td a { color: #ffff55 !important; } /* DOS-style tabs - cyan bar with active highlight */ body[data-theme="retro"] .slds-tabs_default__nav { background-color: #00aaaa; border: none; border-bottom: 2px solid #005555; } body[data-theme="retro"] .slds-tabs_default__item .slds-tabs_default__link { color: #000000; border: none; font-weight: normal; padding: 8px 16px; } body[data-theme="retro"] .slds-tabs_default__item:hover .slds-tabs_default__link { background-color: #55ffff; } body[data-theme="retro"] .slds-tabs_default__item.slds-is-active .slds-tabs_default__link { background-color: #aa0000; color: #ffffff; border: none; } /* Remove all rounded corners for authentic blocky look */ body[data-theme="retro"] * { border-radius: 0 !important; } /* 3D shadow for modals and dialogs */ body[data-theme="retro"] .slds-modal__container { background-color: #aaaaaa; border: 2px solid #ffffff; border-right-color: #555555; border-bottom-color: #555555; box-shadow: 4px 4px 0 #000000; color: #000000; } /* Checkbox styling for DOS look */ body[data-theme="retro"] .slds-checkbox_faux { background-color: #000080; border: 2px solid #555555; border-right-color: #ffffff; border-bottom-color: #ffffff; } body[data-theme="retro"] .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux { background-color: #00aa00; border-color: #00ff00; } /* Form labels on gray background */ body[data-theme="retro"] .slds-form-element__label { color: #000000; } body[data-theme="retro"] .slds-form-element__help { color: #333333; } /* Combobox/Picklist styling */ body[data-theme="retro"] .slds-combobox__input { background-color: #000080; color: #ffff55; border: 2px solid #555555; border-right-color: #ffffff; border-bottom-color: #ffffff; } body[data-theme="retro"] .slds-listbox { background-color: #000080; border: 2px solid #00aaaa; } body[data-theme="retro"] .slds-listbox__option { color: #ffffff; } body[data-theme="retro"] .slds-listbox__option:hover, body[data-theme="retro"] .slds-listbox__option[aria-selected="true"] { background-color: #00aaaa; color: #000000; } /* ============================================ SACRED THEME - Terminal aesthetics Inspired by sacred.computer - Light theme ============================================ */ /* Monospace font for authentic terminal look */ body[data-theme="sacred"] { font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace; font-size: 13px; letter-spacing: 0; line-height: 1.5; } /* Clean header bar - black like sacred.computer dialog headers */ body[data-theme="sacred"] .slds-context-bar { background-color: #000000 !important; border: none; border-bottom: 2px solid #000000; } body[data-theme="sacred"] .slds-context-bar__item:not(.slds-is-active) .slds-context-bar__label-action { color: #ffffff !important; font-weight: 400; } /* Active menu item - inverted */ body[data-theme="sacred"] .slds-context-bar__item.slds-is-active { background-color: #ffffff !important; } body[data-theme="sacred"] .slds-context-bar__item.slds-is-active .slds-context-bar__label-action { color: #000000 !important; font-weight: 500; } body[data-theme="sacred"] .slds-context-bar__item:hover:not(.slds-is-active) { background-color: #333333 !important; } /* Card and box styling - light gray like sacred.computer */ body[data-theme="sacred"] .slds-box, body[data-theme="sacred"] .slds-card { background-color: #e8e8e8; border: 2px solid #000000; box-shadow: 4px 4px 0 #888888; color: #000000; } /* Card body text */ body[data-theme="sacred"] .slds-box *, body[data-theme="sacred"] .slds-card * { color: #000000; } /* Links - black, underline on hover */ body[data-theme="sacred"] .slds-box a, body[data-theme="sacred"] .slds-card a { color: #000000; text-decoration: underline; } body[data-theme="sacred"] .slds-box a:hover, body[data-theme="sacred"] .slds-card a:hover { color: #555555; } /* Buttons - clean blocky design like sacred.computer */ body[data-theme="sacred"] .slds-button { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } /* Primary button - Black */ body[data-theme="sacred"] .slds-button_brand { background-color: #000000; border: 2px solid #000000; color: #ffffff; box-shadow: none; } body[data-theme="sacred"] .slds-button_brand:hover { background-color: #333333; border-color: #333333; color: #ffffff; } body[data-theme="sacred"] .slds-button_brand:active { background-color: #555555; } /* Neutral button - White with black border */ body[data-theme="sacred"] .slds-button_neutral { background-color: #ffffff; border: 2px solid #000000; color: #000000; box-shadow: none; } body[data-theme="sacred"] .slds-button_neutral:hover { background-color: #e8e8e8; color: #000000; border-color: #000000; } body[data-theme="sacred"] .slds-button_neutral:active { background-color: #d0d0d0; } /* Inputs - white with black border */ body[data-theme="sacred"] .slds-input, body[data-theme="sacred"] .slds-textarea, body[data-theme="sacred"] .slds-select { border: 2px solid #000000; background-color: #ffffff; color: #000000; } body[data-theme="sacred"] .slds-input:focus, body[data-theme="sacred"] .slds-textarea:focus, body[data-theme="sacred"] .slds-select:focus { border-color: #000000; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); outline: none; } body[data-theme="sacred"] .slds-input::placeholder, body[data-theme="sacred"] .slds-textarea::placeholder { color: #888888; } /* Tables - clean with black borders */ body[data-theme="sacred"] .slds-table { border: 2px solid #000000; background-color: #ffffff; } body[data-theme="sacred"] .slds-table thead th { background-color: #a5d6a7; color: #000000 !important; border: none; font-weight: 600; border-bottom: 2px solid #000000; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } /* Table headers text */ body[data-theme="sacred"] .slds-table thead th *, body[data-theme="sacred"] .slds-table thead th span, body[data-theme="sacred"] .slds-table thead th div, body[data-theme="sacred"] .slds-table thead th a { color: #000000 !important; } body[data-theme="sacred"] .slds-table tbody td { border-color: #cccccc; color: #000000 !important; background-color: #ffffff; } /* Table cells text */ body[data-theme="sacred"] .slds-table tbody td *, body[data-theme="sacred"] .slds-table tbody td span, body[data-theme="sacred"] .slds-table tbody td div { color: #000000 !important; } /* Links in table cells */ body[data-theme="sacred"] .slds-table tbody td a { color: #000000 !important; text-decoration: underline; } body[data-theme="sacred"] .slds-table tbody td a:hover { color: #555555 !important; } body[data-theme="sacred"] .slds-table tbody tr:hover td { background-color: #a5d6a7; } body[data-theme="sacred"] .slds-table tbody tr:hover td *, body[data-theme="sacred"] .slds-table tbody tr:hover td span, body[data-theme="sacred"] .slds-table tbody tr:hover td div { color: #000000 !important; } /* Alternating row colors like sacred.computer tables - green accent */ body[data-theme="sacred"] .slds-table tbody tr:nth-child(odd) td { background-color: #f5f5f5; } body[data-theme="sacred"] .slds-table tbody tr:nth-child(even) td { background-color: #ffffff; } /* Tabs - underline style with green accents */ body[data-theme="sacred"] .slds-tabs_default__nav { background-color: #e8f5e9; border: none; border-bottom: 2px solid #000000; } body[data-theme="sacred"] .slds-tabs_default__item .slds-tabs_default__link { color: #555555; border: none; font-weight: 500; padding: 10px 20px; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; } body[data-theme="sacred"] .slds-tabs_default__item:hover .slds-tabs_default__link { color: #000000; background-color: #c8e6c9; } body[data-theme="sacred"] .slds-tabs_default__item.slds-is-active .slds-tabs_default__link { color: #ffffff; background-color: #000000; border: none; } /* No rounded corners for blocky terminal look */ body[data-theme="sacred"] * { border-radius: 0 !important; } /* Modal styling - like sacred.computer dialogs */ body[data-theme="sacred"] .slds-modal__container { background-color: #e8e8e8; border: 2px solid #000000; box-shadow: 6px 6px 0 #888888; color: #000000; } body[data-theme="sacred"] .slds-modal__header { background-color: #000000; color: #ffffff; border: none; } body[data-theme="sacred"] .slds-modal__header * { color: #ffffff !important; } /* Checkbox styling */ body[data-theme="sacred"] .slds-checkbox_faux { background-color: #ffffff; border: 2px solid #000000; } body[data-theme="sacred"] .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux { background-color: #000000; border-color: #000000; } /* Form labels */ body[data-theme="sacred"] .slds-form-element__label { color: #000000; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } body[data-theme="sacred"] .slds-form-element__help { color: #555555; } /* Combobox/Picklist styling */ body[data-theme="sacred"] .slds-combobox__input { background-color: #ffffff; color: #000000; border: 2px solid #000000; } body[data-theme="sacred"] .slds-listbox { background-color: #ffffff; border: 2px solid #000000; box-shadow: 4px 4px 0 #888888; } body[data-theme="sacred"] .slds-listbox__option { color: #000000; } body[data-theme="sacred"] .slds-listbox__option:hover, body[data-theme="sacred"] .slds-listbox__option[aria-selected="true"] { background-color: #000000; color: #ffffff; } /* ============================================ THEME SWITCHER COMPONENT STYLES ============================================ */ .theme-switcher { position: fixed; top: 0.5rem; right: 0.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.5rem; } .theme-switcher select { padding: 0.25rem 0.5rem; font-size: 0.875rem; border: 1px solid var(--oi-color-border-default); background-color: var(--oi-color-background-input); color: var(--oi-color-text-default); cursor: pointer; } /* Theme switcher component overrides */ body[data-theme="retro"] my-theme-switcher select { background-color: #000080; color: #ffff55; border: 2px solid #555555; border-right-color: #ffffff; border-bottom-color: #ffffff; border-radius: 0; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; } body[data-theme="retro"] my-theme-switcher select:hover, body[data-theme="retro"] my-theme-switcher select:focus { border-color: #ffff55; box-shadow: none; } body[data-theme="sacred"] my-theme-switcher select { background-color: #ffffff; color: #000000; border: 2px solid #000000; border-radius: 0; font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace; } body[data-theme="sacred"] my-theme-switcher select:hover, body[data-theme="sacred"] my-theme-switcher select:focus { border-color: #000000; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); } /* ============================================ SALESFORCE THEME - Events fixes ============================================ */ body[data-theme="salesforce"] my-events .entry { line-height: 22px; } /* ============================================ RETRO THEME - Events/Birthday list fixes ============================================ */ body[data-theme="retro"] my-events .entry { color: #ffffff !important; } body[data-theme="retro"] my-events .entry div, body[data-theme="retro"] my-events .entry .item { color: #ffffff !important; } body[data-theme="retro"] my-events .entry.past div { color: #aaaaaa !important; } body[data-theme="retro"] my-events .entry.now { background-color: #aa0000 !important; color: #ffffff !important; } body[data-theme="retro"] my-events .entry.now div { color: #ffffff !important; } body[data-theme="retro"] my-events .entry.next { background-color: #00aaaa !important; color: #000000 !important; } body[data-theme="retro"] my-events .entry.next div { color: #000000 !important; } /* ============================================ RETRO THEME - Subscriptions table fixes ============================================ */ /* Current year columns - use dark blue instead of yellow */ body[data-theme="retro"] my-subscriptions .month-header.current-year { background-color: #0000aa !important; color: #55ffff !important; } body[data-theme="retro"] my-subscriptions .month-header.current-month { background-color: #aa0000 !important; color: #ffffff !important; } body[data-theme="retro"] my-subscriptions .month-cell.current-year { background-color: #000080 !important; color: #55ffff !important; } body[data-theme="retro"] my-subscriptions .totals-row .totals-cell.current-year { background-color: #0000aa !important; color: #55ffff !important; } /* Summary cards */ body[data-theme="retro"] my-subscriptions .summary-card { background: #aaaaaa !important; color: #000000 !important; border: 2px solid #ffffff; border-right-color: #555555; border-bottom-color: #555555; } body[data-theme="retro"] my-subscriptions .summary-card.highlight { background: #aa0000 !important; color: #ffffff !important; } body[data-theme="retro"] my-subscriptions .summary-card .summary-label, body[data-theme="retro"] my-subscriptions .summary-card .summary-value { color: inherit !important; } /* Table wrapper */ body[data-theme="retro"] my-subscriptions .table-wrapper { border: 2px solid #00aaaa; } /* Sticky columns background */ body[data-theme="retro"] my-subscriptions .sticky-col { background-color: #000080 !important; } body[data-theme="retro"] my-subscriptions thead .sticky-col { background-color: #00aaaa !important; color: #000000 !important; } body[data-theme="retro"] my-subscriptions .totals-row { background-color: #005555 !important; } body[data-theme="retro"] my-subscriptions .totals-row td { background-color: #005555 !important; color: #55ffff !important; } body[data-theme="retro"] my-subscriptions .totals-row .sticky-col { background-color: #005555 !important; } /* Provider links */ body[data-theme="retro"] my-subscriptions .provider-link, body[data-theme="retro"] my-subscriptions .provider-name { color: #ffff55 !important; } body[data-theme="retro"] my-subscriptions .provider-link:hover, body[data-theme="retro"] my-subscriptions .provider-name:hover { color: #ffffff !important; } /* YTD column */ body[data-theme="retro"] my-subscriptions .col-ytd { color: #55ff55 !important; } /* Category badges */ body[data-theme="retro"] my-subscriptions .category-badge { background: #555555 !important; color: #ffffff !important; } /* Add row */ body[data-theme="retro"] my-subscriptions .add-row td { background-color: #000080 !important; } body[data-theme="retro"] my-subscriptions .add-button { background: #000080 !important; border: 2px dashed #00aaaa !important; color: #55ffff !important; } body[data-theme="retro"] my-subscriptions .add-button:hover { background: #0000aa !important; border-color: #55ffff !important; color: #ffffff !important; } body[data-theme="retro"] my-subscriptions .action-link { color: #aaaaaa !important; } body[data-theme="retro"] my-subscriptions .action-link:hover { color: #ffff55 !important; }