/* ======================================== AURETH THEME FOR HUDU Generated by tools/omarchy-to-hudu/port_theme.py dark palette: aureth | light palette: synthesized from dark palette ======================================== */ :root { /* === palette Base Colors (Light Mode defaults) === */ /* bg = paper #F9F8F4, bg-2 = base-50 #F4F1E8 */ /* ui = base-100 #EFEADD, ui-2 = base-150 #EBE3D1, ui-3 = base-200 #E6DCC6 */ /* tx = black #2B2A27, tx-2 = base-600 #3A3833, tx-3 = base-300 #BDBCB8 */ /* === Primary / Accent (cyan) === */ --primary: #7DB5AA; --primaryl1: #5E8C83; /* === Light Mode Backgrounds === */ --background---neutral---light--1--default: #F9F8F4; --background---neutral---light--1--hover: #F4F1E8; --background---neutral---light--1--pressed: #EFEADD; --background---neutral---light--1--selected: #EFEADD; --background---neutral---light--2--default: #F4F1E8; --background---neutral---light--2--hover: #EFEADD; --background---neutral---light--2--pressed: #EBE3D1; --background---neutral---light--2--selected: #EBE3D1; --background---neutral---light--3--default: #F4F1E8; --background---neutral---light--3--hover: #EFEADD; --background---neutral---light--3--pressed: #EBE3D1; --background---neutral---light--3--selected: #EBE3D1; --background---neutral---light---disabled: #F4F1E8; /* === Dark Mode Backgrounds === */ /* bg = black #2B2A27, bg-2 = base-950 #2D2C29 */ /* ui = base-900 #2F2E2A, ui-2 = base-850 #31302C, ui-3 = base-800 #33312D */ --background---neutral---dark--1--default: #2D2C29; --background---neutral---dark--1--hover: #2F2E2A; --background---neutral---dark--1--pressed: #2B2A27; --background---neutral---dark--1--selected: #31302C; --background---neutral---dark--1--disabled: #33312D; --background---neutral---dark--2--default: #2B2A27; --background---neutral---dark--2--hover: #2D2C29; --background---neutral---dark--2--pressed: #2B2A27; --background---neutral---dark--2--selected: #2F2E2A; --background---neutral---dark--3--default: #2B2A27; /* === Light Mode Text === */ --text---neutral---light--1--default: #2B2A27; --text---neutral---light--1--hover: #2B2A27; --text---neutral---light--1--pressed: #2B2A27; --text---neutral---light--1--selected: #2B2A27; --text---neutral---light--2--default: #3A3833; --text---neutral---light--2--hover: #363530; --text---neutral---light--2--pressed: #363530; --text---neutral---light--2--selected: #363530; --text---neutral---light--3--default: #BDBCB8; --text---neutral---light--3--hover: #3A3833; --text---neutral---light--3--pressed: #3A3833; --text---neutral---light--3--selected: #3A3833; --text---neutral---light---disabled: #BDBCB8; /* === Dark Mode Text === */ /* tx = base-200 #E6DCC6, tx-2 = base-500 #F2E9D8, tx-3 = base-700 #363530 */ --text---neutral---dark--1--default: #E6DCC6; --text---neutral---dark--1--hover: #E6DCC6; --text---neutral---dark--1--pressed: #E6DCC6; --text---neutral---dark--1--selected: #E6DCC6; --text---neutral---dark---disabled: #363530; --text---neutral---dark--2--default: #F2E9D8; --text---neutral---dark--2--hover: #BDBCB8; --text---neutral---dark--2--pressed: #BDBCB8; --text---neutral---dark--2--selected: #BDBCB8; /* === Links (cyan) === */ --link-default: #5E8C83; --link-hover: #557A72; --link-pressed: #557A72; --link-visited: #5E8C83; --link---light---default: #5E8C83; --link---light---hover: #557A72; --link---light---pressed: #557A72; --link---light---visited: #5E8C83; --link-default-dark: #7DB5AA; --link-hover-dark: #96C2B8; --link-pressed-dark: #96C2B8; --link-visited-dark: #7DB5AA; --link---dark---default: #7DB5AA; --link---dark---hover: #96C2B8; --link---dark---pressed: #96C2B8; --link---dark---visited: #7DB5AA; /* === Base color overrides === */ --black: #2B2A27; --blackl1: #2D2C29; --cobalt: #2B2A27; --blackl0point5: #2B2A27; --blackl1point5: #2F2E2A; --blackl2: #31302C; --blackl3: #363530; --white: #F9F8F4; --whites1: #F4F1E8; --whites1point5: #F4F1E8; --whites2: #EFEADD; --whites3: #EBE3D1; --whites4: #E6DCC6; /* === Accent Colors - Light === */ --accent---light---blue---default: #4A5D6B; --accent---light---blue---hover: #6F8796; --accent---light---blue---pressed: #45545F; --accent---light---blue---disabled: #4A5D6B; --accent---light---orange---default: #CF783D; --accent---light---orange---hover: #EA9856; --accent---light---orange---pressed: #B16A3B; --accent---light---orange---selected: #F8E9DC; --accent---light---orange---disabled: #CF783D; --accent---light---golden---default: #D9A441; --accent---light---golden---hover: #F3C35C; --accent---light---golden---pressed: #B88D40; --accent---light---golden---selected: #F8F0DE; --accent---light---golden---disabled: #D9A441; --accent---light---teal---default: #5E8C83; --accent---light---teal---hover: #7DB5AA; --accent---light---teal---pressed: #557A72; --accent---light---teal---selected: #E6EDE8; --accent---light---teal---disabled: #5E8C83; --accent---light---purple---default: #716977; --accent---light---purple---hover: #928D9C; --accent---light---purple---pressed: #645E68; --accent---light---purple---selected: #E8E7E6; --accent---light---purple---disabled: #716977; --accent---light---green---default: #7C9A4D; --accent---light---green---hover: #9DCB5C; --accent---light---green---pressed: #6D8547; --accent---light---green---selected: #EAF1DE; --accent---light---green---disabled: #7C9A4D; --accent---selected: #E6EDE8; --accent---selected---hover: #D5E4DE; /* === Accent Colors - Dark === */ --accent---dark---blue---default: #6F8796; --accent---dark---blue---hover: #899DA8; --accent---dark---blue---pressed: #5C7180; --accent---dark---blue---selected: #3D474E; --accent---dark---blue---disabled: #6F8796; --accent---dark---orange---default: #EA9856; --accent---dark---orange---hover: #EFAC78; --accent---dark---orange---pressed: #DC8849; --accent---dark---orange---selected: #594131; --accent---dark---orange---disabled: #EA9856; --accent---dark---golden---default: #F3C35C; --accent---dark---golden---hover: #F5CE7F; --accent---dark---golden---pressed: #E6B34E; --accent---dark---golden---selected: #5B4C33; --accent---dark---golden---disabled: #F3C35C; --accent---dark---teal---default: #7DB5AA; --accent---dark---teal---hover: #96C2B8; --accent---dark---teal---pressed: #6DA096; --accent---dark---teal---selected: #3B4641; --accent---dark---teal---disabled: #7DB5AA; --accent---dark---purple---default: #928D9C; --accent---dark---purple---hover: #A6A1AD; --accent---dark---purple---pressed: #817B89; --accent---dark---purple---selected: #3F3C3E; --accent---dark---purple---disabled: #928D9C; --accent---dark---green---default: #9DCB5C; --accent---dark---green---hover: #AFD47E; --accent---dark---green---pressed: #8CB254; --accent---dark---green---selected: #424934; --accent---dark---green---disabled: #9DCB5C; /* === Alerts (mapped to palette accents) === */ --alert---error---01: #F8E5DB; --alert---error---02: #F6D4C5; --alert---error---03: #E37B52; --alert---error---04: #C65A3A; --alert---error---05: #C65A3A; --alert---error---06: #AA5338; --alert---error---07: #834835; --alert---warning---01: #F8F0DE; --alert---warning---02: #F8E9CB; --alert---warning---03: #EA9856; --alert---warning---04: #CF783D; --alert---warning---05: #B16A3B; --alert---success---01: #EAF1DE; --alert---success---02: #AFD47E; --alert---success---03: #9DCB5C; --alert---success---04: #7C9A4D; --alert---success---05: #6D8547; --alert---info---01: #E2E6E5; --alert---info---02: #AAB7BF; --alert---info---03: #6F8796; --alert---info---04: #4A5D6B; /* === Flags (mapped to palette 600 values) === */ --flag---red: #C65A3A; --flag---blue: #4A5D6B; --flag---green: #7C9A4D; --flag---purple: #716977; --flag---orange: #CF783D; --flag---yellow: #D9A441; --flag---light-pink: #E5CDD2; --flag---light-blue: #BCC6CB; --flag---light-green: #D1E6B6; --flag---light-purple: #CCC9CE; --flag---light-orange: #F5D0B3; --flag---light-yellow: #F7E2B8; --flag---white: #F9F8F4; --flag---grey: #F2E9D8; } /* === 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: #F9F8F4 !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: #F4F1E8 !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: #F4F1E8 !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: #2D2C29 !important; } .dark-portal th, .dark-portal .simple-crud th, .dark-portal .search__header, .dark-portal .search-form { background: #2F2E2A !important; } .dark-portal .nasa__item:hover, .dark-portal .vgt-table.black-rhino tr.clickable:hover, .dark-portal .box-list__item:hover { background: #2F2E2A !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: #C996A7 !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: #B07A8C !important; background: var(--background---neutral---light--2--default) !important; border: 1px solid #EBE3D1 !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 #2F2E2A !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 #EBE3D1 !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: #F2E9D8 !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: #BDBCB8 !important; } .dark-portal .rich_text_content .token.string, .dark-portal .rich_text_content .hljs-string { color: #7DB5AA !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: #6F8796 !important; } .dark-portal .rich_text_content .token.number, .dark-portal .rich_text_content .hljs-number { color: #928D9C !important; } .dark-portal .rich_text_content .token.constant, .dark-portal .rich_text_content .hljs-literal { color: #F3C35C !important; } .dark-portal .rich_text_content .token.function, .dark-portal .rich_text_content .hljs-title.function_ { color: #EA9856 !important; } .dark-portal .rich_text_content .token.keyword, .dark-portal .rich_text_content .hljs-keyword { color: #9DCB5C !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: #C996A7 !important; } .dark-portal .rich_text_content .token.deleted, .dark-portal .rich_text_content .hljs-deletion { color: #E37B52 !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 #33312D !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 #BDBCB8 !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 #2F2E2A !important; margin: 1.5em 0 !important; } body:not(.dark-portal) .rich_text_content hr { border: 0 !important; border-top: 1px solid #EFEADD !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: #2F2E2A !important; color: var(--text---neutral---dark--1--default) !important; border-bottom: 2px solid #33312D !important; text-align: left !important; padding: 0.5em 0.75em !important; } .dark-portal .rich_text_content table td { border-bottom: 1px solid #2F2E2A !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 (#E6DCC6), 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: #557A72 !important; /* cyan-700 */ color: #F9F8F4 !important; /* paper */ border-color: #557A72 !important; } /* ======================================== Scrollbars — thin, theme-matched ======================================== */ body:not(.dark-portal) * { scrollbar-width: thin; scrollbar-color: #E6DCC6 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: #E6DCC6 !important; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } body:not(.dark-portal) ::-webkit-scrollbar-thumb:hover { background: #BDBCB8 !important; } body:not(.dark-portal) ::-webkit-scrollbar-corner { background: transparent; } .dark-portal * { scrollbar-width: thin; scrollbar-color: #33312D transparent; } .dark-portal ::-webkit-scrollbar { width: 10px; height: 10px; } .dark-portal ::-webkit-scrollbar-track { background: transparent; } .dark-portal ::-webkit-scrollbar-thumb { background: #33312D !important; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } .dark-portal ::-webkit-scrollbar-thumb:hover { background: #363530 !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: #6DA096 !important; /* cyan-500 */ border-color: #6DA096 !important; } body:not(.dark-portal) input[type="checkbox"]:checked:hover::before, .dark-portal input[type="checkbox"]:checked:hover::before { background-color: #F9F8F4 !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: #E6EDE8 !important; } body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(1) .admin__subheader { color: #557A72 !important; } body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(2) { background: #E2E6E5 !important; } body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(2) .admin__subheader { color: #45545F !important; } body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(3) { background: #F8E9DC !important; } body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(3) .admin__subheader { color: #B16A3B !important; } /* Band colors — dark */ .dark-portal main:has(.admin__subheader) > header:nth-of-type(1) { background: #3B4641 !important; } .dark-portal main:has(.admin__subheader) > header:nth-of-type(1) .admin__subheader { color: #96C2B8 !important; } .dark-portal main:has(.admin__subheader) > header:nth-of-type(2) { background: #3D474E !important; } .dark-portal main:has(.admin__subheader) > header:nth-of-type(2) .admin__subheader { color: #899DA8 !important; } .dark-portal main:has(.admin__subheader) > header:nth-of-type(3) { background: #594131 !important; } .dark-portal main:has(.admin__subheader) > header:nth-of-type(3) .admin__subheader { color: #EFAC78 !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: #F4F1E8 !important; } .dark-portal a.admin__a:hover { background-color: #2F2E2A !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: #5E8C83 !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: #5E8C83 !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: #4A5D6B !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: #7C9A4D !important; } /* Yellow */ i.fas[style*="background"][style*="#f2b600" i], i.far[style*="background"][style*="#f2b600" i], i.fab[style*="background"][style*="#f2b600" i] { color: #D9A441 !important; } /* Orange */ i.fas[style*="background"][style*="#fc4200" i], i.far[style*="background"][style*="#fc4200" i], i.fab[style*="background"][style*="#fc4200" i] { color: #CF783D !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: #716977 !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: #5E8C83 !important; } /* Cyan family → palette cyan */ .asset-icon[style*="background"][style*="#00caed" i] > i, .asset-icon[style*="background"][style*="#00e2eb" i] > i { color: #5E8C83 !important; } /* Blue family → palette blue */ .asset-icon[style*="background"][style*="#0081fa" i] > i, .asset-icon[style*="background"][style*="#b2c9ec" i] > i { color: #4A5D6B !important; } /* Green family → palette green */ .asset-icon[style*="background"][style*="#5bb686" i] > i, .asset-icon[style*="background"][style*="#00d875" i] > i { color: #7C9A4D !important; } /* Yellow → palette yellow */ .asset-icon[style*="background"][style*="#f2b600" i] > i { color: #D9A441 !important; } /* Orange / red-orange → palette orange */ .asset-icon[style*="background"][style*="#fc4200" i] > i { color: #CF783D !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: #716977 !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: #5E8C83 !important; } .dark-portal .nasa .index__item:not(.index__item--task) i:not([style]) { color: #7DB5AA !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: #4A5D6B !important; } /* companies → blue */ .nasa .index__item i.fa-book-reader:not([style]), .nasa .index__item i.fa-book:not([style]) { color: #716977 !important; } /* KB articles → purple */ .nasa .index__item i.fa-globe:not([style]) { color: #7C9A4D !important; } /* websites → green */ .nasa .index__item i.fa-key:not([style]) { color: #D9A441 !important; } /* passwords → yellow */ .nasa .index__item i.fa-camera:not([style]) { color: #B07A8C !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: #6F8796 !important; } .dark-portal .nasa .index__item i.fa-book-reader:not([style]), .dark-portal .nasa .index__item i.fa-book:not([style]) { color: #928D9C !important; } .dark-portal .nasa .index__item i.fa-globe:not([style]) { color: #9DCB5C !important; } .dark-portal .nasa .index__item i.fa-key:not([style]) { color: #F3C35C !important; } .dark-portal .nasa .index__item i.fa-camera:not([style]) { color: #C996A7 !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 (#4A5D6B) range. Affects axis labels too — minor cost. */ [data-controller="chart"] canvas, .dash__graph-graph canvas { filter: hue-rotate(311deg) saturate(0.3) brightness(1.0) !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: #31302C !important; } body:not(.dark-portal) .index__list__avatar { background-color: #EFEADD !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: #33312D !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: #E6DCC6 !important; } /* Pure-white text (#fff) → palette tx (#E6DCC6). 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: #E6DCC6 !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: #34393B !important; color: #BCC6CB !important; border-color: #3D474E !important; } .dark-portal .rich_text_content .callout-danger { background: #573A2F !important; color: #F4C3AF !important; border-color: #834835 !important; } .dark-portal .rich_text_content .callout-warning { background: #594131 !important; color: #F5D0B3 !important; border-color: #885737 !important; } .dark-portal .rich_text_content .callout-success { background: #424934 !important; color: #D1E6B6 !important; border-color: #59693F !important; } body:not(.dark-portal) .rich_text_content .callout-info { background: #E2E6E5 !important; color: #45545F !important; border-color: #BCC6CB !important; } body:not(.dark-portal) .rich_text_content .callout-danger { background: #F8E5DB !important; color: #AA5338 !important; border-color: #F4C3AF !important; } body:not(.dark-portal) .rich_text_content .callout-warning { background: #F8E9DC !important; color: #B16A3B !important; border-color: #F5D0B3 !important; } body:not(.dark-portal) .rich_text_content .callout-success { background: #EAF1DE !important; color: #6D8547 !important; border-color: #D1E6B6 !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: #E6DCC6; } .dark-portal .dash__message svg [fill="#F5F5F5" i] { fill: #BDBCB8; } .dark-portal .dash__message svg [fill="#E0E0E0" i] { fill: #F2E9D8; } .dark-portal .dash__message svg [fill="#808080" i] { fill: #3A3833; } .dark-portal .dash__message svg [fill="black" i] { fill: #2D2C29; } .dark-portal .dash__message svg [fill="#263238" i] { fill: #7DB5AA; } body:not(.dark-portal) .dash__message svg [fill="white" i] { fill: #F9F8F4; } body:not(.dark-portal) .dash__message svg [fill="#F5F5F5" i] { fill: #F4F1E8; } body:not(.dark-portal) .dash__message svg [fill="#E0E0E0" i] { fill: #EBE3D1; } body:not(.dark-portal) .dash__message svg [fill="#808080" i] { fill: #F2E9D8; } body:not(.dark-portal) .dash__message svg [fill="black" i] { fill: #2B2A27; } body:not(.dark-portal) .dash__message svg [fill="#263238" i] { fill: #5E8C83; }