/* ======================================== AETHERIA THEME FOR HUDU Generated by tools/omarchy-to-hudu/port_theme.py dark palette: aetheria | light palette: synthesized from dark palette ======================================== */ :root { /* === palette Base Colors (Light Mode defaults) === */ /* bg = paper #F8F6FF, bg-2 = base-50 #CCE7EC */ /* ui = base-100 #9ED8D9, ui-2 = base-150 #6AC8C6, ui-3 = base-200 #14B9B5 */ /* tx = black #0e091d, tx-2 = base-600 #c53253, tx-3 = base-300 #7B8E8A */ /* === Primary / Accent (cyan) === */ --primary: #ffbe74; --primaryl1: #FF7F41; /* === Light Mode Backgrounds === */ --background---neutral---light--1--default: #F8F6FF; --background---neutral---light--1--hover: #CCE7EC; --background---neutral---light--1--pressed: #9ED8D9; --background---neutral---light--1--selected: #9ED8D9; --background---neutral---light--2--default: #CCE7EC; --background---neutral---light--2--hover: #9ED8D9; --background---neutral---light--2--pressed: #6AC8C6; --background---neutral---light--2--selected: #6AC8C6; --background---neutral---light--3--default: #CCE7EC; --background---neutral---light--3--hover: #9ED8D9; --background---neutral---light--3--pressed: #6AC8C6; --background---neutral---light--3--selected: #6AC8C6; --background---neutral---light---disabled: #CCE7EC; /* === Dark Mode Backgrounds === */ /* bg = black #0e091d, bg-2 = base-950 #251125 */ /* ui = base-900 #3C182D, ui-2 = base-850 #531E34, ui-3 = base-800 #68233B */ --background---neutral---dark--1--default: #251125; --background---neutral---dark--1--hover: #3C182D; --background---neutral---dark--1--pressed: #0e091d; --background---neutral---dark--1--selected: #531E34; --background---neutral---dark--1--disabled: #68233B; --background---neutral---dark--2--default: #0e091d; --background---neutral---dark--2--hover: #251125; --background---neutral---dark--2--pressed: #0e091d; --background---neutral---dark--2--selected: #3C182D; --background---neutral---dark--3--default: #0e091d; /* === Light Mode Text === */ --text---neutral---light--1--default: #0e091d; --text---neutral---light--1--hover: #0e091d; --text---neutral---light--1--pressed: #0e091d; --text---neutral---light--1--selected: #0e091d; --text---neutral---light--2--default: #c53253; --text---neutral---light--2--hover: #962B47; --text---neutral---light--2--pressed: #962B47; --text---neutral---light--2--selected: #962B47; --text---neutral---light--3--default: #7B8E8A; --text---neutral---light--3--hover: #c53253; --text---neutral---light--3--pressed: #c53253; --text---neutral---light--3--selected: #c53253; --text---neutral---light---disabled: #7B8E8A; /* === Dark Mode Text === */ /* tx = base-200 #14B9B5, tx-2 = base-500 #827F90, tx-3 = base-700 #962B47 */ --text---neutral---dark--1--default: #14B9B5; --text---neutral---dark--1--hover: #14B9B5; --text---neutral---dark--1--pressed: #14B9B5; --text---neutral---dark--1--selected: #14B9B5; --text---neutral---dark---disabled: #962B47; --text---neutral---dark--2--default: #827F90; --text---neutral---dark--2--hover: #7B8E8A; --text---neutral---dark--2--pressed: #7B8E8A; --text---neutral---dark--2--selected: #7B8E8A; /* === Links (cyan) === */ --link-default: #FF7F41; --link-hover: #D06940; --link-pressed: #D06940; --link-visited: #FF7F41; --link---light---default: #FF7F41; --link---light---hover: #D06940; --link---light---pressed: #D06940; --link---light---visited: #FF7F41; --link-default-dark: #ffbe74; --link-hover-dark: #FECA92; --link-pressed-dark: #FECA92; --link-visited-dark: #ffbe74; --link---dark---default: #ffbe74; --link---dark---hover: #FECA92; --link---dark---pressed: #FECA92; --link---dark---visited: #ffbe74; /* === Base color overrides === */ --black: #0e091d; --blackl1: #251125; --cobalt: #0e091d; --blackl0point5: #0e091d; --blackl1point5: #3C182D; --blackl2: #531E34; --blackl3: #962B47; --white: #F8F6FF; --whites1: #CCE7EC; --whites1point5: #CCE7EC; --whites2: #9ED8D9; --whites3: #6AC8C6; --whites4: #14B9B5; /* === Accent Colors - Light === */ --accent---light---blue---default: #BE3F50; --accent---light---blue---hover: #04C5F0; --accent---light---blue---pressed: #9C3748; --accent---light---blue---disabled: #BE3F50; --accent---light---orange---default: #ACE27E; --accent---light---orange---hover: #E14A56; --accent---light---orange---pressed: #8DB86F; --accent---light---orange---selected: #F9DDE4; --accent---light---orange---disabled: #ACE27E; --accent---light---golden---default: #7cd699; --accent---light---golden---hover: #FD3E6A; --accent---light---golden---pressed: #67AE83; --accent---light---golden---selected: #FEDDE7; --accent---light---golden---disabled: #7cd699; --accent---light---teal---default: #FF7F41; --accent---light---teal---hover: #ffbe74; --accent---light---teal---pressed: #D06940; --accent---light---teal---selected: #FAEEEA; --accent---light---teal---disabled: #FF7F41; --accent---light---purple---default: #AD4674; --accent---light---purple---hover: #6B84A1; --accent---light---purple---pressed: #8E3B64; --accent---light---purple---selected: #E1E4F0; --accent---light---purple---disabled: #AD4674; --accent---light---green---default: #E20342; --accent---light---green---hover: #f93d3b; --accent---light---green---pressed: #B9163E; --accent---light---green---selected: #FEDDE1; --accent---light---green---disabled: #E20342; --accent---selected: #FAEEEA; --accent---selected---hover: #FBE6D8; /* === Accent Colors - Dark === */ --accent---dark---blue---default: #04C5F0; --accent---dark---blue---hover: #61D0F4; --accent---dark---blue---pressed: #9B8A9E; --accent---dark---blue---selected: #6F2A3C; --accent---dark---blue---disabled: #04C5F0; --accent---dark---orange---default: #E14A56; --accent---dark---orange---hover: #EA7177; --accent---dark---orange---pressed: #D39F6A; --accent---dark---orange---selected: #37423D; --accent---dark---orange---disabled: #E14A56; --accent---dark---golden---default: #FD3E6A; --accent---dark---golden---hover: #FF6D87; --accent---dark---golden---pressed: #D19A81; --accent---dark---golden---selected: #2D3F41; --accent---dark---golden---disabled: #FD3E6A; --accent---dark---teal---default: #ffbe74; --accent---dark---teal---hover: #FECA92; --accent---dark---teal---pressed: #FF9F5B; --accent---dark---teal---selected: #4C2B2F; --accent---dark---teal---disabled: #ffbe74; --accent---dark---purple---default: #6B84A1; --accent---dark---purple---hover: #869AB3; --accent---dark---purple---pressed: #93698A; --accent---dark---purple---selected: #391B36; --accent---dark---purple---disabled: #6B84A1; --accent---dark---green---default: #f93d3b; --accent---dark---green---hover: #FF6D65; --accent---dark---green---pressed: #ED283F; --accent---dark---green---selected: #47172B; --accent---dark---green---disabled: #f93d3b; /* === Alerts (mapped to palette accents) === */ --alert---error---01: #F5DDE1; --alert---error---02: #F1C6C8; --alert---error---03: #CE4F48; --alert---error---04: #c8e967; --alert---error---05: #c8e967; --alert---error---06: #A3BE5E; --alert---error---07: #73844F; --alert---warning---01: #FEDDE7; --alert---warning---02: #FFC7D2; --alert---warning---03: #E14A56; --alert---warning---04: #ACE27E; --alert---warning---05: #8DB86F; --alert---success---01: #FEDDE1; --alert---success---02: #FF6D65; --alert---success---03: #f93d3b; --alert---success---04: #E20342; --alert---success---05: #B9163E; --alert---info---01: #DEEFFD; --alert---info---02: #96DCF7; --alert---info---03: #04C5F0; --alert---info---04: #BE3F50; /* === Flags (mapped to palette 600 values) === */ --flag---red: #c8e967; --flag---blue: #BE3F50; --flag---green: #E20342; --flag---purple: #AD4674; --flag---orange: #ACE27E; --flag---yellow: #7cd699; --flag---light-pink: #C1919E; --flag---light-blue: #AFE2F9; --flag---light-green: #FFB1AD; --flag---light-purple: #BAC4D6; --flag---light-orange: #F6B1B5; --flag---light-yellow: #FFB1BE; --flag---white: #F8F6FF; --flag---grey: #827F90; } /* === Light: fix hardcoded white bgs === */ body:not(.dark-portal) table.vgt-table, body:not(.dark-portal) .vgt-table.polar-bear, body:not(.dark-portal) .vgt-table.polar-bear.bordered td, body:not(.dark-portal) .table-scroll, body:not(.dark-portal) .table-scroll--fixed-column, body:not(.dark-portal) #datatable, body:not(.dark-portal) td, body:not(.dark-portal) .company-summary, body:not(.dark-portal) .box, body:not(.dark-portal) .box--form, body:not(.dark-portal) .card, body:not(.dark-portal) .card__info, body:not(.dark-portal) .nasa__block, body:not(.dark-portal) .grid-item, body:not(.dark-portal) .widget, body:not(.dark-portal) .info-panel, body:not(.dark-portal) .asset-sidebar__box, body:not(.dark-portal) .asset-sidebar__condensed, body:not(.dark-portal) .asset-folder-card, body:not(.dark-portal) .asset-columns__box, body:not(.dark-portal) .historical__box, body:not(.dark-portal) .box-list__item, body:not(.dark-portal) .box-list__entity-item, body:not(.dark-portal) .box-list--options, body:not(.dark-portal) .box-list--historical, body:not(.dark-portal) .header__search, body:not(.dark-portal) input:not([type="submit"]):not([type="checkbox"]), body:not(.dark-portal) select, body:not(.dark-portal) textarea, body:not(.dark-portal) .ts-control, body:not(.dark-portal) .ts-dropdown, body:not(.dark-portal) .ts-dropdown .optgroup-header, body:not(.dark-portal) .multiselect__tags, body:not(.dark-portal) .multiselect__input, body:not(.dark-portal) .multiselect__single, body:not(.dark-portal) .multiselect__content-wrapper, body:not(.dark-portal) .multiselect__spinner, body:not(.dark-portal) .inputer, body:not(.dark-portal) .form__nested, body:not(.dark-portal) .form-section, body:not(.dark-portal) .form-split .form-tip.form-tip--sidebar, body:not(.dark-portal) .password-editor, body:not(.dark-portal) .ql-editor, body:not(.dark-portal) .ql-snow .ql-picker-options, body:not(.dark-portal) .ql-snow .ql-tooltip, body:not(.dark-portal) .menubar__form input, body:not(.dark-portal) .writer__content, body:not(.dark-portal) .otp-inputer, body:not(.dark-portal) .button--secondary, body:not(.dark-portal) .button--danger-secondary, body:not(.dark-portal) .dropdown__content, body:not(.dark-portal) .drop__content, body:not(.dark-portal) .table__dropdown__content, body:not(.dark-portal) .floating-menu__content, body:not(.dark-portal) .company-jump, body:not(.dark-portal) .company-jump__item a.company-jump__link, body:not(.dark-portal) .company-switcher__dropdown, body:not(.dark-portal) .contact-dashboard, body:not(.dark-portal) .cpanel__aside, body:not(.dark-portal) .mkb .cpanel, body:not(.dark-portal) .mkb__content, body:not(.dark-portal) .photos__container, body:not(.dark-portal) .explainer, body:not(.dark-portal) .welcome, body:not(.dark-portal) .user-page__block, body:not(.dark-portal) .process-runs-welcome, body:not(.dark-portal) .process-runs-welcome__sidebar, body:not(.dark-portal) .drafter__finish, body:not(.dark-portal) .drafter__titlebar, body:not(.dark-portal) .duplicator, body:not(.dark-portal) .template, body:not(.dark-portal) a.admin__a, body:not(.dark-portal) .api-keys__create, body:not(.dark-portal) .api-keys__key, body:not(.dark-portal) a.index__folder, body:not(.dark-portal) .doorkeeper-container, body:not(.dark-portal) .doorkeeper__authorize-grants, body:not(.dark-portal) .roler__table, body:not(.dark-portal) .sort-rules section, body:not(.dark-portal) .task-sorter__task, body:not(.dark-portal) .external_app, body:not(.dark-portal) .fast-facts__header .explainer, body:not(.dark-portal) .updater, body:not(.dark-portal) .billing, body:not(.dark-portal) .custom-fast-fact, body:not(.dark-portal) .custom-fast-fact__opened, body:not(.dark-portal) .color-section, body:not(.dark-portal) .article__public, body:not(.dark-portal) .asset_layout_field, body:not(.dark-portal) .connector, body:not(.dark-portal) .company-portal, body:not(.dark-portal) .company-portal__option, body:not(.dark-portal) .company-portal__warning, body:not(.dark-portal) .dash__top__logo, body:not(.dark-portal) .dropzone, body:not(.dark-portal) .onboarder__modal, body:not(.dark-portal) .company-logo, body:not(.dark-portal) .color-grid, body:not(.dark-portal) .alert { background: #F8F6FF !important; } body:not(.dark-portal) th, body:not(.dark-portal) .simple-crud th, body:not(.dark-portal) .vgt-table thead th, body:not(.dark-portal) .search__header, body:not(.dark-portal) .search-form, body:not(.dark-portal) .layout-sorter-v2 .sort-rules section, body:not(.dark-portal) .column-form__rules, body:not(.dark-portal) .disabled .ts-control { background: #CCE7EC !important; } body:not(.dark-portal) .nasa__item:hover, body:not(.dark-portal) .vgt-table.black-rhino tr.clickable:hover, body:not(.dark-portal) .box-list__item:hover, body:not(.dark-portal) .box-list__entity-item:hover { background: #CCE7EC !important; } /* === Dark: fix hardcoded white bgs === */ .dark-portal table.vgt-table, .dark-portal .vgt-table.polar-bear, .dark-portal .vgt-table.polar-bear.bordered td, .dark-portal .table-scroll, .dark-portal .table-scroll--fixed-column, .dark-portal #datatable, .dark-portal td, .dark-portal .company-summary, .dark-portal .box, .dark-portal .box--form, .dark-portal .card, .dark-portal .card__info, .dark-portal .nasa__block, .dark-portal .grid-item, .dark-portal .widget, .dark-portal .info-panel, .dark-portal .asset-sidebar__box, .dark-portal .asset-sidebar__condensed, .dark-portal .asset-folder-card, .dark-portal .asset-columns__box, .dark-portal .historical__box, .dark-portal .box-list__item, .dark-portal .box-list__entity-item, .dark-portal .header__search, .dark-portal input:not([type="submit"]):not([type="checkbox"]), .dark-portal select, .dark-portal textarea, .dark-portal .ts-control, .dark-portal .ts-dropdown, .dark-portal .multiselect__tags, .dark-portal .multiselect__input, .dark-portal .multiselect__single, .dark-portal .multiselect__content-wrapper, .dark-portal .inputer, .dark-portal .form__nested, .dark-portal .form-section, .dark-portal .password-editor, .dark-portal .writer__content, .dark-portal .button--secondary, .dark-portal .button--danger-secondary, .dark-portal .dropdown__content, .dark-portal .drop__content, .dark-portal .table__dropdown__content, .dark-portal .floating-menu__content, .dark-portal .company-jump, .dark-portal .contact-dashboard, .dark-portal .cpanel__aside, .dark-portal .mkb .cpanel, .dark-portal .mkb__content, .dark-portal .explainer, .dark-portal .welcome, .dark-portal .user-page__block, .dark-portal .process-runs-welcome, .dark-portal .drafter__finish, .dark-portal .doorkeeper-container, .dark-portal .api-keys__create, .dark-portal .api-keys__key, .dark-portal .sort-rules section, .dark-portal .task-sorter__task, .dark-portal .external_app, .dark-portal .updater, .dark-portal .billing, .dark-portal .roler__table, .dark-portal .article__public, .dark-portal .asset_layout_field, .dark-portal .connector, .dark-portal .company-portal, .dark-portal .company-portal__option, .dark-portal .dropzone, .dark-portal .onboarder__modal, .dark-portal .company-logo, .dark-portal .alert { background: #251125 !important; } .dark-portal th, .dark-portal .simple-crud th, .dark-portal .search__header, .dark-portal .search-form { background: #3C182D !important; } .dark-portal .nasa__item:hover, .dark-portal .vgt-table.black-rhino tr.clickable:hover, .dark-portal .box-list__item:hover { background: #3C182D !important; } /* ============================================================ Color-coded admin tile sections (palette) Basic Setup = teal, Core = blue, Account Admin = orange ============================================================ */ .dark-portal a.admin__a i, body:not(.dark-portal) a.admin__a i { background: transparent !important; border: none !important; } .dark-portal .admin__section:nth-of-type(1) a.admin__a i { color: var(--accent---dark---teal---default) !important; } body:not(.dark-portal) .admin__section:nth-of-type(1) a.admin__a i { color: var(--accent---light---teal---default) !important; } .dark-portal .admin__section:nth-of-type(2) a.admin__a i { color: var(--accent---dark---blue---default) !important; } body:not(.dark-portal) .admin__section:nth-of-type(2) a.admin__a i { color: var(--accent---light---blue---default) !important; } .dark-portal .admin__section:nth-of-type(3) a.admin__a i { color: var(--accent---dark---orange---default) !important; } body:not(.dark-portal) .admin__section:nth-of-type(3) a.admin__a i { color: var(--accent---light---orange---default) !important; } /* ============================================================ PALETTE MAPPINGS — KB article prose (.rich_text_content) ============================================================ */ /* Headings → palette tx (not pure white) */ .dark-portal .rich_text_content h1, .dark-portal .rich_text_content h2, .dark-portal .rich_text_content h3, .dark-portal .rich_text_content h4, .dark-portal .rich_text_content h5, .dark-portal .rich_text_content h6 { color: var(--text---neutral---dark--1--default) !important; } body:not(.dark-portal) .rich_text_content h1, body:not(.dark-portal) .rich_text_content h2, body:not(.dark-portal) .rich_text_content h3, body:not(.dark-portal) .rich_text_content h4, body:not(.dark-portal) .rich_text_content h5, body:not(.dark-portal) .rich_text_content h6 { color: var(--text---neutral---light--1--default) !important; } /* Strong / bold → tx */ .dark-portal .rich_text_content strong, .dark-portal .rich_text_content b { color: var(--text---neutral---dark--1--default) !important; } body:not(.dark-portal) .rich_text_content strong, body:not(.dark-portal) .rich_text_content b { color: var(--text---neutral---light--1--default) !important; } /* Em / italic → tx (not forced; inherits italic from browser) */ .dark-portal .rich_text_content em, .dark-portal .rich_text_content i:not([class*="fa-"]) {font-style: italic !important; } body:not(.dark-portal) .rich_text_content em, body:not(.dark-portal) .rich_text_content i:not([class*="fa-"]) {font-style: italic !important; } /* Inline code → magenta on bg-2 */ .dark-portal .rich_text_content code, .dark-portal .rich_text_content :not(pre) > code { color: #6C032C !important; background: var(--background---neutral---dark--2--default) !important; border: 1px solid var(--accent---dark---teal---selected) !important; border-radius: 3px !important; padding: 0.1em 0.35em !important; font-size: 0.9em !important; } body:not(.dark-portal) .rich_text_content code, body:not(.dark-portal) .rich_text_content :not(pre) > code { color: #9147a8 !important; background: var(--background---neutral---light--2--default) !important; border: 1px solid #6AC8C6 !important; border-radius: 3px !important; padding: 0.1em 0.35em !important; font-size: 0.9em !important; } /* Code blocks (pre) */ .dark-portal .rich_text_content pre { background: var(--background---neutral---dark--2--default) !important; border: 1px solid #3C182D !important; color: var(--text---neutral---dark--1--default) !important; border-radius: 4px !important; padding: 1em !important; } body:not(.dark-portal) .rich_text_content pre { background: var(--background---neutral---light--2--default) !important; border: 1px solid #6AC8C6 !important; color: var(--text---neutral---light--1--default) !important; border-radius: 4px !important; padding: 1em !important; } .dark-portal .rich_text_content pre code, body:not(.dark-portal) .rich_text_content pre code { background: transparent !important; border: 0 !important; padding: 0 !important; font-size: 1em !important; color: inherit !important; } /* Syntax highlighting (Prism + highlight.js) — palette palette */ .dark-portal .rich_text_content .token.comment, .dark-portal .rich_text_content .hljs-comment { color: #827F90 !important; } .dark-portal .rich_text_content .token.punctuation, .dark-portal .rich_text_content .token.operator, .dark-portal .rich_text_content .hljs-punctuation, .dark-portal .rich_text_content .hljs-operator { color: #7B8E8A !important; } .dark-portal .rich_text_content .token.string, .dark-portal .rich_text_content .hljs-string { color: #ffbe74 !important; } .dark-portal .rich_text_content .token.variable, .dark-portal .rich_text_content .token.attr-name, .dark-portal .rich_text_content .hljs-variable, .dark-portal .rich_text_content .hljs-attr { color: #04C5F0 !important; } .dark-portal .rich_text_content .token.number, .dark-portal .rich_text_content .hljs-number { color: #6B84A1 !important; } .dark-portal .rich_text_content .token.constant, .dark-portal .rich_text_content .hljs-literal { color: #FD3E6A !important; } .dark-portal .rich_text_content .token.function, .dark-portal .rich_text_content .hljs-title.function_ { color: #E14A56 !important; } .dark-portal .rich_text_content .token.keyword, .dark-portal .rich_text_content .hljs-keyword { color: #f93d3b !important; } .dark-portal .rich_text_content .token.important, .dark-portal .rich_text_content .token.tag, .dark-portal .rich_text_content .hljs-section, .dark-portal .rich_text_content .hljs-name { color: #6C032C !important; } .dark-portal .rich_text_content .token.deleted, .dark-portal .rich_text_content .hljs-deletion { color: #CE4F48 !important; } /* Blockquote */ .dark-portal .rich_text_content blockquote { background: var(--background---neutral---dark--2--default) !important; border-left: 3px solid var(--accent---dark---teal---default) !important; color: var(--text---neutral---dark--2--default) !important; padding: 0.75em 1em !important; margin: 1em 0 !important; border-radius: 0 4px 4px 0 !important; } body:not(.dark-portal) .rich_text_content blockquote { background: var(--background---neutral---light--2--default) !important; border-left: 3px solid var(--accent---light---teal---default) !important; color: var(--text---neutral---light--2--default) !important; padding: 0.75em 1em !important; margin: 1em 0 !important; border-radius: 0 4px 4px 0 !important; } /* kbd */ .dark-portal .rich_text_content kbd { background: var(--background---neutral---dark--2--default) !important; border: 1px solid #68233B !important; border-bottom-width: 2px !important; color: var(--text---neutral---dark--1--default) !important; padding: 0.1em 0.4em !important; border-radius: 3px !important; font-size: 0.85em !important; font-family: RobotoMono, ui-monospace, monospace !important; } body:not(.dark-portal) .rich_text_content kbd { background: var(--background---neutral---light--2--default) !important; border: 1px solid #7B8E8A !important; border-bottom-width: 2px !important; color: var(--text---neutral---light--1--default) !important; padding: 0.1em 0.4em !important; border-radius: 3px !important; font-size: 0.85em !important; font-family: RobotoMono, ui-monospace, monospace !important; } /* hr */ .dark-portal .rich_text_content hr { border: 0 !important; border-top: 1px solid #3C182D !important; margin: 1.5em 0 !important; } body:not(.dark-portal) .rich_text_content hr { border: 0 !important; border-top: 1px solid #9ED8D9 !important; margin: 1.5em 0 !important; } /* Tables */ .dark-portal .rich_text_content table { border-collapse: collapse !important; width: 100% !important; } .dark-portal .rich_text_content table th { background: #3C182D !important; color: var(--text---neutral---dark--1--default) !important; border-bottom: 2px solid #68233B !important; text-align: left !important; padding: 0.5em 0.75em !important; } .dark-portal .rich_text_content table td { border-bottom: 1px solid #3C182D !important; padding: 0.5em 0.75em !important; } .dark-portal .rich_text_content table tr:nth-child(even) td { background: var(--background---neutral---dark--2--default) !important; } /* Link hover underline */ .dark-portal .rich_text_content a:hover, body:not(.dark-portal) .rich_text_content a:hover { text-decoration: underline !important; } /* ======================================== MISSED OVERRIDES — 2026-05-18 ======================================== */ /* Callouts keep light backgrounds in dark mode, but the global .rich_text_content strong/b rule repainted bold text to tx (#14B9B5), making bold words inside callouts unreadable (~1.1 contrast). Restore each callout's own dark text color. */ .rich_text_content .callout strong, .rich_text_content .callout b { color: inherit !important; } /* The blanket `input` background rules (both modes) also caught input[type="submit"], repainting primary buttons (e.g. "Update Profile") to the surface color — dark-on-dark / white-on-cream, invisible. Restore the accent fill. Each selector carries an extra attribute over the blanket rules so specificity wins regardless of source order. Fill is cyan-700 — dark enough that paper text clears WCAG AA (6:1) in both modes. The 600/400 ramp split is for syntax text, not UI fills; cyan-600 is the murky dead-zone (white 4.4 / dark 4.2). */ .dark-portal input[type="submit"], body:not(.dark-portal) input[type="submit"] { background-color: #D06940 !important; /* cyan-700 */ color: #F8F6FF !important; /* paper */ border-color: #D06940 !important; } /* ======================================== Scrollbars — thin, theme-matched ======================================== */ body:not(.dark-portal) * { scrollbar-width: thin; scrollbar-color: #14B9B5 transparent; } body:not(.dark-portal) ::-webkit-scrollbar { width: 10px; height: 10px; } body:not(.dark-portal) ::-webkit-scrollbar-track { background: transparent; } body:not(.dark-portal) ::-webkit-scrollbar-thumb { background: #14B9B5 !important; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } body:not(.dark-portal) ::-webkit-scrollbar-thumb:hover { background: #7B8E8A !important; } body:not(.dark-portal) ::-webkit-scrollbar-corner { background: transparent; } .dark-portal * { scrollbar-width: thin; scrollbar-color: #68233B transparent; } .dark-portal ::-webkit-scrollbar { width: 10px; height: 10px; } .dark-portal ::-webkit-scrollbar-track { background: transparent; } .dark-portal ::-webkit-scrollbar-thumb { background: #68233B !important; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } .dark-portal ::-webkit-scrollbar-thumb:hover { background: #962B47 !important; } .dark-portal ::-webkit-scrollbar-corner { background: transparent; } /* ======================================== Checkbox hover — keep teal when checked Hudu's default :checked:hover flips the box to neutral bg + black check, so a checked box looks like it un-checked on hover. Hold the teal identity, just shift one ramp step. ======================================== */ body:not(.dark-portal) input[type="checkbox"]:checked:hover, .dark-portal input[type="checkbox"]:checked:hover { background-color: #FF9F5B !important; /* cyan-500 */ border-color: #FF9F5B !important; } body:not(.dark-portal) input[type="checkbox"]:checked:hover::before, .dark-portal input[type="checkbox"]:checked:hover::before { background-color: #F8F6FF !important; } /* ======================================== /admin page — banded sections Color-coded header bands (teal / blue / orange) + accent-bordered tiles so the three groups read at a glance and scan fast. ======================================== */ /* Section label → band */ main:has(.admin__subheader) > header { margin: 2rem 0 0.85rem !important; padding: 0.6rem 0.95rem !important; border-radius: 6px !important; } main:has(.admin__subheader) > header:first-of-type { margin-top: 0.5rem !important; } .admin__subheader { text-transform: uppercase !important; letter-spacing: 0.09em !important; font-weight: 700 !important; font-size: 0.95rem !important; margin: 0 !important; } /* Band colors — light */ body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(1) { background: #FAEEEA !important; } body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(1) .admin__subheader { color: #D06940 !important; } body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(2) { background: #DEEFFD !important; } body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(2) .admin__subheader { color: #9C3748 !important; } body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(3) { background: #F9DDE4 !important; } body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(3) .admin__subheader { color: #8DB86F !important; } /* Band colors — dark */ .dark-portal main:has(.admin__subheader) > header:nth-of-type(1) { background: #4C2B2F !important; } .dark-portal main:has(.admin__subheader) > header:nth-of-type(1) .admin__subheader { color: #FECA92 !important; } .dark-portal main:has(.admin__subheader) > header:nth-of-type(2) { background: #6F2A3C !important; } .dark-portal main:has(.admin__subheader) > header:nth-of-type(2) .admin__subheader { color: #61D0F4 !important; } .dark-portal main:has(.admin__subheader) > header:nth-of-type(3) { background: #37423D !important; } .dark-portal main:has(.admin__subheader) > header:nth-of-type(3) .admin__subheader { color: #EA7177 !important; } /* Tiles → compact list rows: icon + name only, no descriptions. Flat background-tint hover — no transform, so nothing jitters. */ .admin__section { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 3px 14px !important; } a.admin__a { display: flex !important; align-items: center !important; gap: 0.55rem !important; padding: 0.4rem 0.7rem !important; min-height: 0 !important; height: auto !important; border-radius: 4px !important; transition: background-color 0.1s ease !important; } a.admin__a i { font-size: 1rem !important; width: 1.3rem !important; text-align: center !important; flex-shrink: 0 !important; } a.admin__a article h2 { font-size: 0.92rem !important; font-weight: 600 !important; margin: 0 !important; } a.admin__a article p { display: none !important; } body:not(.dark-portal) a.admin__a:hover { background-color: #CCE7EC !important; } .dark-portal a.admin__a:hover { background-color: #3C182D !important; } /* ======================================== palette spec cleanup — off-palette remnants ======================================== */ /* Widget / feed icon badges — bare with inline bg+color, no .asset-icon wrapper (e.g. My Recents, Activity Feed, My Most Visited on dashboard). Markup: Strip the circle, color the glyph itself with the matching palette accent. Mirrors the .asset-icon family map below. */ i.fas[style*="background"][style*="#"], i.far[style*="background"][style*="#"], i.fab[style*="background"][style*="#"] { background: transparent !important; border-radius: 0 !important; } /* Fallback */ i.fas[style*="background"][style*="#"], i.far[style*="background"][style*="#"], i.fab[style*="background"][style*="#"] { color: #FF7F41 !important; } /* Cyan */ i.fas[style*="background"][style*="#00caed" i], i.far[style*="background"][style*="#00caed" i], i.fab[style*="background"][style*="#00caed" i], i.fas[style*="background"][style*="#00e2eb" i], i.far[style*="background"][style*="#00e2eb" i], i.fab[style*="background"][style*="#00e2eb" i] { color: #FF7F41 !important; } /* Blue */ i.fas[style*="background"][style*="#0081fa" i], i.far[style*="background"][style*="#0081fa" i], i.fab[style*="background"][style*="#0081fa" i], i.fas[style*="background"][style*="#b2c9ec" i], i.far[style*="background"][style*="#b2c9ec" i], i.fab[style*="background"][style*="#b2c9ec" i] { color: #BE3F50 !important; } /* Green */ i.fas[style*="background"][style*="#5bb686" i], i.far[style*="background"][style*="#5bb686" i], i.fab[style*="background"][style*="#5bb686" i], i.fas[style*="background"][style*="#00d875" i], i.far[style*="background"][style*="#00d875" i], i.fab[style*="background"][style*="#00d875" i] { color: #E20342 !important; } /* Yellow */ i.fas[style*="background"][style*="#f2b600" i], i.far[style*="background"][style*="#f2b600" i], i.fab[style*="background"][style*="#f2b600" i] { color: #7cd699 !important; } /* Orange */ i.fas[style*="background"][style*="#fc4200" i], i.far[style*="background"][style*="#fc4200" i], i.fab[style*="background"][style*="#fc4200" i] { color: #ACE27E !important; } /* Purple */ i.fas[style*="background"][style*="#a74af1" i], i.far[style*="background"][style*="#a74af1" i], i.fab[style*="background"][style*="#a74af1" i], i.fas[style*="background"][style*="#9b0af2" i], i.far[style*="background"][style*="#9b0af2" i], i.fab[style*="background"][style*="#9b0af2" i], i.fas[style*="background"][style*="#5b17f2" i], i.far[style*="background"][style*="#5b17f2" i], i.fab[style*="background"][style*="#5b17f2" i], i.fas[style*="background"][style*="#300c83" i], i.far[style*="background"][style*="#300c83" i], i.fab[style*="background"][style*="#300c83" i] { color: #AD4674 !important; } /* Asset-layout icons — sidebar OTHER section + page-header badges. Markup:
Strip the bright circle, color the glyph itself with the nearest palette accent. Each Hudu picker hex maps to a palette family so layouts stay visually distinct against the paper background. */ /* Kill the wrapper circle entirely. */ .asset-icon[style*="background"][style*="#"] { background: transparent !important; border-radius: 0 !important; } /* Fallback glyph color for any Hudu hex not enumerated below. */ .asset-icon[style*="background"][style*="#"] > i { color: #FF7F41 !important; } /* Cyan family → palette cyan */ .asset-icon[style*="background"][style*="#00caed" i] > i, .asset-icon[style*="background"][style*="#00e2eb" i] > i { color: #FF7F41 !important; } /* Blue family → palette blue */ .asset-icon[style*="background"][style*="#0081fa" i] > i, .asset-icon[style*="background"][style*="#b2c9ec" i] > i { color: #BE3F50 !important; } /* Green family → palette green */ .asset-icon[style*="background"][style*="#5bb686" i] > i, .asset-icon[style*="background"][style*="#00d875" i] > i { color: #E20342 !important; } /* Yellow → palette yellow */ .asset-icon[style*="background"][style*="#f2b600" i] > i { color: #7cd699 !important; } /* Orange / red-orange → palette orange */ .asset-icon[style*="background"][style*="#fc4200" i] > i { color: #ACE27E !important; } /* Purple / indigo family → palette purple */ .asset-icon[style*="background"][style*="#a74af1" i] > i, .asset-icon[style*="background"][style*="#9b0af2" i] > i, .asset-icon[style*="background"][style*="#5b17f2" i] > i, .asset-icon[style*="background"][style*="#300c83" i] > i { color: #AD4674 !important; } /* Dashboard widget items without inline color — Hudu's base CSS paints them .nasa .index__item:not(.index__item--task) i { background: var(--primary); color: white; border-radius: 100% } That hits company / KB / site / etc. icons in My Recents, Expiring Soon, Activity Feed. Strip the circle, color the glyph teal to match the rest. */ .nasa .index__item:not(.index__item--task) i:not([style]) { background: transparent !important; border-radius: 0 !important; width: auto !important; height: auto !important; color: #FF7F41 !important; } .dark-portal .nasa .index__item:not(.index__item--task) i:not([style]) { color: #ffbe74 !important; } /* Per-entity glyph color — non-asset-layout entities (companies, KB, websites) that Hudu renders without inline color. Maps each glyph to a palette accent matching its semantic role, so the dashboard widgets read at a glance. */ .nasa .index__item i.fa-store-alt:not([style]), .nasa .index__item i.fa-building:not([style]) { color: #BE3F50 !important; } /* companies → blue */ .nasa .index__item i.fa-book-reader:not([style]), .nasa .index__item i.fa-book:not([style]) { color: #AD4674 !important; } /* KB articles → purple */ .nasa .index__item i.fa-globe:not([style]) { color: #E20342 !important; } /* websites → green */ .nasa .index__item i.fa-key:not([style]) { color: #7cd699 !important; } /* passwords → yellow */ .nasa .index__item i.fa-camera:not([style]) { color: #9147a8 !important; } /* photos → magenta */ .dark-portal .nasa .index__item i.fa-store-alt:not([style]), .dark-portal .nasa .index__item i.fa-building:not([style]) { color: #04C5F0 !important; } .dark-portal .nasa .index__item i.fa-book-reader:not([style]), .dark-portal .nasa .index__item i.fa-book:not([style]) { color: #6B84A1 !important; } .dark-portal .nasa .index__item i.fa-globe:not([style]) { color: #f93d3b !important; } .dark-portal .nasa .index__item i.fa-key:not([style]) { color: #FD3E6A !important; } .dark-portal .nasa .index__item i.fa-camera:not([style]) { color: #6C032C !important; } /* Inline-styled icons get the circle stripped via the bare-i rule above; family color comes from the family selectors. */ .nasa .index__item:not(.index__item--task) i[style] { background: transparent !important; border-radius: 0 !important; width: auto !important; height: auto !important; } /* Dashboard chart — canvas bars are pixel-painted from a server-baked Tailwind blue (#3B82F6). Pure CSS can't recolor canvas content, so apply a filter chain that desaturates + darkens the bars toward the muted palette blue (#BE3F50) range. Affects axis labels too — minor cost. */ [data-controller="chart"] canvas, .dash__graph-graph canvas { filter: hue-rotate(175deg) saturate(1.1) brightness(1.22) !important; } /* Avatars. Hudu paints a pure-black (#000) background on both photo imgs and empty placeholder divs. On photos the bg bleeds through the rounded edge's antialiasing as a halo ring — transparent kills it; the photo blends with whatever is actually behind it. Empty placeholder circles (no photo/initials) keep a mode-scoped tone or they'd vanish entirely. */ img.profile-image { background-color: transparent !important; } .dark-portal .index__list__avatar { background-color: #531E34 !important; } body:not(.dark-portal) .index__list__avatar { background-color: #9ED8D9 !important; } /* Greeting-header photo ring — Hudu hardcodes border: 2px solid #fff on the .nasa__title img (dashboard "Hi, " avatar). Transparent keeps the 2px box so layout doesn't shift, but draws nothing. */ .nasa__title.for-bg img { border-color: transparent !important; } /* Gray borders (#757575 / #666666) → palette base tones */ .dark-portal .index__item, .dark-portal .nasa__block-header, .dark-portal .dropdown__content, .dark-portal .keyboard-shortcuts__shortcut { border-color: #68233B !important; } body:not(.dark-portal) .index__item, body:not(.dark-portal) .nasa__block-header, body:not(.dark-portal) .dropdown__content, body:not(.dark-portal) .keyboard-shortcuts__shortcut { border-color: #14B9B5 !important; } /* Pure-white text (#fff) → palette tx (#14B9B5). Dashboard chrome only — deliberately NOT .rich_text_content: callouts have light backgrounds, a blanket color override there renders unreadable (the callout trap). */ .dark-portal .index__item, .dark-portal .nasa__block, .dark-portal turbo-frame { color: #14B9B5 !important; } /* Callouts — Hudu hardcodes pastel backgrounds with dark ink text (#01466C info, #4D0706 danger, #6A2802 warning) in both modes. Stock pastels read alien on dark pages and aren't palette-derived on light ones. Re-tint per type, always setting bg + text + border together (recoloring text alone is the callout trap). */ .dark-portal .rich_text_content .callout-info { background: #3D1B2E !important; color: #AFE2F9 !important; border-color: #6F2A3C !important; } .dark-portal .rich_text_content .callout-danger { background: #3D4439 !important; color: #ECB1AF !important; border-color: #73844F !important; } .dark-portal .rich_text_content .callout-warning { background: #37423D !important; color: #F6B1B5 !important; border-color: #648058 !important; } .dark-portal .rich_text_content .callout-success { background: #47172B !important; color: #FFB1AD !important; border-color: #831B36 !important; } body:not(.dark-portal) .rich_text_content .callout-info { background: #DEEFFD !important; color: #9C3748 !important; border-color: #AFE2F9 !important; } body:not(.dark-portal) .rich_text_content .callout-danger { background: #F5DDE1 !important; color: #A3BE5E !important; border-color: #ECB1AF !important; } body:not(.dark-portal) .rich_text_content .callout-warning { background: #F9DDE4 !important; color: #8DB86F !important; border-color: #F6B1B5 !important; } body:not(.dark-portal) .rich_text_content .callout-success { background: #FEDDE1 !important; color: #B9163E !important; border-color: #FFB1AD !important; } /* "My Tasks" empty-state illustration — inline SVG with stock grayscale and navy fills. Recolor structure to base tones and clothing to the primary accent; skin tones (#FFB573/#ED893E) stay untouched. CSS fill beats the SVG presentation attributes. */ .dark-portal .dash__message svg [fill="white" i] { fill: #14B9B5; } .dark-portal .dash__message svg [fill="#F5F5F5" i] { fill: #7B8E8A; } .dark-portal .dash__message svg [fill="#E0E0E0" i] { fill: #827F90; } .dark-portal .dash__message svg [fill="#808080" i] { fill: #c53253; } .dark-portal .dash__message svg [fill="black" i] { fill: #251125; } .dark-portal .dash__message svg [fill="#263238" i] { fill: #ffbe74; } body:not(.dark-portal) .dash__message svg [fill="white" i] { fill: #F8F6FF; } body:not(.dark-portal) .dash__message svg [fill="#F5F5F5" i] { fill: #CCE7EC; } body:not(.dark-portal) .dash__message svg [fill="#E0E0E0" i] { fill: #6AC8C6; } body:not(.dark-portal) .dash__message svg [fill="#808080" i] { fill: #827F90; } body:not(.dark-portal) .dash__message svg [fill="black" i] { fill: #0e091d; } body:not(.dark-portal) .dash__message svg [fill="#263238" i] { fill: #FF7F41; }