/* Color Palette -------------------------------------------- */ :root { /* Brand Color */ --brand-primary: rgb(0, 20, 51); --brand-primary-light: rgb(7, 66, 171); --brand-secondary: hsl(212, 67%, 19%); --brand-secondary-light: hsl(212, 72%, 23%); /* Accent Color */ --accent-200: rgb(0, 102, 255); --accent-300: rgb(0, 102, 255); --accent-400: rgb(0, 102, 255); --accent-500: rgb(0, 102, 255); --accent-600: rgb(0, 102, 255); --accent-700: rgb(0, 102, 255); --accent-800: rgb(0, 102, 255); /* Gray Scale Color */ --white: hsl( 0, 0%, 100%); --gray-050: hsl( 0, 0%, 96%); --gray-100: rgb(239, 239, 239); --gray-150: hsl( 0, 0%, 88%); --gray-200: rgb(216, 216, 216); --gray-250: hsl( 0, 0%, 78%); --gray-300: hsl( 0, 0%, 71%); --gray-350: hsl( 0, 0%, 66%); --gray-400: hsl( 0, 0%, 60%); --gray-450: hsl( 0, 0%, 55%); --gray-500: hsl( 0, 0%, 48%); --gray-550: rgb(102, 102, 102); --gray-600: rgb(92, 92, 92); --gray-650: hsl( 0, 0%, 32%); --gray-700: hsl( 0, 0%, 28%); --gray-750: rgb(51 51 51); --gray-800: hsl( 0, 0%, 18%); --gray-850: hsl( 0, 0%, 15%); --gray-900: hsl( 0, 0%, 10%); --gray-950: hsl( 0, 0%, 5%); --black: hsl( 0, 0%, 0%); --interactive-primary: rgb(0, 120, 212); --interactive-primary--hover: rgb(0, 120, 212); --interactive-primary--active: rgb(0, 120, 212); --interactive-primary--selected: rgb(0, 120, 212); --interactive-secondary: rgb(16, 110, 190); --interactive-secondary--hover: rgb(16, 110, 190); --interactive-secondary--active: rgb(16, 110, 190); --interactive-secondary--selected: rgb(16, 110, 190); --interactive-tertiary: rgb(59, 121, 183); --interactive-tertiary--hover: rgb(59, 121, 183); --interactive-tertiary--active: rgb(59, 121, 183); --interactive-tertiary--selected: rgb(59, 121, 183); --color-series: hsl(220, 100%, 40%); --color-model: hsl(208, 100%, 30%); --color-category: hsl(334, 74%, 36%); --color-option: hsl(180, 100%, 18%); --color-property: hsl(138, 74%, 22%); /* Supporting Colors */ --support-information-lighter: hsl(220, 100%, 64%); --support-information-light: hsl(220, 100%, 53%); --support-information-normal: hsl(220, 100%, 40%); --support-information-dark: hsl(220, 100%, 31%); --support-information-darker: hsl(220, 100%, 21%); --support-information-background-light: hsl(220, 100%, 96%); --support-information-background-normal: hsl(220, 100%, 91%); --support-information-background-dark: hsl(220, 100% , 83%); --support-success-lighter: hsl(137, 49%, 50%); --support-success-light: hsl(137, 63%, 39%); --support-success-normal: hsl(137, 67%, 30%); --support-success-dark: hsl(137, 74%, 22%); --support-success-darker: hsl(137, 89%, 14%); --support-success-background-light: hsl(137, 61%, 65%); --support-success-background-normal: hsl(137, 71%, 80%); --support-success-background-dark: hsl(137, 61%, 65%); --support-mandatory-lighter: hsl(357, 100%, 76%); --support-mandatory-light: hsl(357, 94%, 64%); --support-mandatory-normal: hsl(357, 76%, 49%); --support-mandatory-dark: hsl(357, 73%, 37%); --support-mandatory-darker: hsl(357, 79%, 26%); --support-mandatory-background-light: hsl(357, 100%, 97%); --support-mandatory-background-normal: hsl(357, 100%, 92%); --support-mandatory-background-dark: hsl(357, 100%, 85%); --support-error-lighter: hsl(357, 100%, 76%); --support-error-light: hsl(357, 94%, 64%); --support-error-normal: hsl(357, 76%, 49%); --support-error-dark: hsl(357, 73%, 37%); --support-error-darker: hsl(357, 79%, 26%); --support-error-background-light: hsl(357, 100%, 97%); --support-error-background-normal: hsl(357, 100%, 92%); --support-error-background-dark: hsl(357, 100%, 85%); --support-warning-lighter: hsl( 47, 97%, 57%); --support-warning-light: hsl( 47, 88%, 53%); --support-warning-normal: hsl( 47, 88%, 46%); --support-warning-dark: hsl( 47, 94%, 42%); --support-warning-darker: hsl( 47, 94%, 38%); --support-warning-background-light: hsl( 47, 86%, 91%); --support-warning-background-normal: hsl( 47, 86%, 80%); --support-warning-background-dark: hsl( 47, 97%, 70%); --support-helper-lighter: hsl(263, 100%, 87%); --support-helper-light: hsl(263, 100%, 79%); --support-helper-normal: hsl(263, 100%, 72%); --support-helper-dark: hsl(263, 97%, 62%); --support-helper-darker: hsl(263, 65%, 47%); --support-helper-background-light: hsl(263, 100%, 97%); --support-helper-background-normal: hsl(263, 100%, 95%); --support-helper-background-dark: hsl(263, 100%, 93%); } /* Color Variables -------------------------------------------- */ :root { --accent: var(--accent-500); --text-primary: var(--gray-950); --text-secondary: var(--gray-750); --text-on-brand-primary-color: var(--white); --text-on-brand-secondary-color: var(--white); --text-on-color: var(--white); --text-placeholder: var(--gray-400); --text-inverse: var(--white); --text-input: var(--text-secondary); --text-input--hover: var(--text-primary); --text-input--focus: var(--text-primary); --border-light: var(--gray-100); --border-normal: var(--gray-200); --border-dark: var(--gray-600); --border-interactive: var(--gray-200); --border-interactive--hover: var(--gray-300); --border-interactive--active: var(--gray-250); --border-interactive--selected: var(--gray-100); --border-interactive--selected--hover: var(--gray-100); --background: var(--white); --background-tone-100: var(--gray-050); --background-tone-200: var(--gray-100); --background-tone-300: var(--gray-150); --background-tone-400: var(--gray-200); --background-tone-500: var(--gray-250); --background-tone-600: var(--gray-300); --background-tone-700: var(--gray-350); --background-tone-800: var(--gray-400); --background-inverse: var(--gray-800); --button-color: var(--white); --button-color-tone-100: var(--gray-050); --button-color-tone-200: var(--gray-100); --button-color-tone-300: var(--gray-150); --button-primary-color: var(--accent); --button-primary-color-tone-100: var(--accent-600); --button-primary-color-tone-200: var(--accent-700); --button-primary-color-tone-300: var(--accent-800); --button-secondary-color: var(--gray-500); --button-secondary-color-tone-100: var(--gray-550); --button-secondary-color-tone-200: var(--gray-600); --button-secondary-color-tone-300: var(--gray-650); --backdrop: hsla( 0, 0%, 0%, .5); --disabled-primary: var(--gray-100); --disabled-secondary: var(--gray-300); --disabled-tertiary: var(--gray-500); } /* Color Variables | Old -------------------------------------------- */ :root { --layer: var(--gray-050); --layer--hover: var(--gray-100); --layer--active: var(--gray-150); --layer--selected: var(--gray-200); --layer--hover--selected: var(--gray-250); --layer-inverse: var(--gray-905); --layer-inverse--hover: var(--gray-900); --layer-inverse--active: var(--gray-800); --layer-inverse--selected: var(--gray-850); --layer-inverse--hover--selected: var(--gray-900); --layer-accent: var(--gray-200); --layer-accent--hover: var(--gray-250); --layer-accent--active: var(--gray-300); --layer-accent--selected: var(--gray-350); --layer-accent--hover--selected: var(--gray-400); --layer-accent-inverse: var(--gray-900); } /*-------------------------------------------- */ /*-------------------------------------------- */ /*-------------------------------------------- */ /* Components -------------------------------------------- */ /* Action Panel */ .action-panels { --actionpanel-background-color: var(--background); --actionpanel-tab-strip-background-color: var(--background-tone-100); /* Action Panel Button */ --actionpanel-tab-item-border-color: var(--support-information-normal); --actionpanel-tab-item-border-color--hover: var(--support-information-dark); --actionpanel-tab-item-border-color--active: var(--support-information-light); --actionpanel-tab-item-border-color--selected: var(--support-information-light); --actionpanel-tab-item-background-color: var(--support-information-background-normal); --actionpanel-tab-item-background-color--hover: var(--support-information-background-dark); --actionpanel-tab-item-background-color--active: var(--support-information-background-light); --actionpanel-tab-item-background-color--selected: var(--support-information-background-light); --actionpanel-tab-item-icon-color: var(--support-information-normal); --actionpanel-tab-item-icon-color--hover: var(--support-information-dark); --actionpanel-tab-item-icon-color--active: var(--support-information-light); --actionpanel-tab-item-icon-color--selected: var(--support-information-light); --actionpanel-titlebar-background-color: var(--brand-secondary); --actionpanel-titlebar-text-color: var(--text-on-brand-secondary-color); --actionpanel-content-background-color: var(--background); --actionpanel-message-count-background-color: var(--support-error-normal); --actionpanel-message-count-text-color: var(--text-on-color); } /* Body */ .xBody { --body-background-color: rgb(250, 249, 248); } /* Button */ :is(.btn, .flat-button, .xIBLink, .xDialogButton) { --button-border-color: rgb(138, 136, 134); --button-border-color--hover: rgb(138, 136, 134); --button-border-color--active: rgb(138, 136, 134); --button-border-color--selected: rgb(138, 136, 134); --button-border-color--selected--hover: rgb(138, 136, 134); --button-border-color--disabeled: var(--button-secondary-color); --button-background-color: rgb(255, 255, 255); --button-background-color--hover: rgb(243, 242, 241); --button-background-color--active: rgb(237, 235, 233); --button-background-color--selected: rgb(237, 235, 233); --button-background-color--selected--hover: rgb(243, 242, 241); --button-background-color--disabled: var(--button-secondary-color); --button-text-color: rgb(50, 49, 48); --button-text-color--hover: rgb(32, 31, 30); --button-text-color--active: rgb(32, 31, 30); --button-text-color--selected: rgb(32, 31, 30); --button-text-color--selected--hover: rgb(32, 31, 30); --button-text-color--disabled: var(--text-primary); --button-primary-border-color: transparent; --button-primary-border-color--hover: transparent; --button-primary-border-color--active: transparent; --button-primary-border-color--selected: transparent; --button-primary-border-color--selected--hover: transparent; --button-primary-border-color--disabeled: transparent; --button-primary-background-color: rgb(73, 121, 178); --button-primary-background-color--hover: rgb(16, 110, 190); --button-primary-background-color--active: rgb(0, 90, 158); --button-primary-background-color--selected: rgb(0, 90, 158); --button-primary-background-color--selected--hover: rgb(16, 110, 190); --button-primary-background-color--disabled: var(--button-secondary-color); --button-primary-text-color: var(--white); --button-primary-text-color--hover: var(--white); --button-primary-text-color--active: var(--white); --button-primary-text-color--selected: var(--white); --button-primary-text-color--selected--hover: var(--white); --button-primary-text-color--disabled: var(--white); --button-secondary-border-color: rgb(59, 121, 183); --button-secondary-border-color--hover: rgb(59, 121, 183); --button-secondary-border-color--active: rgb(59, 121, 183); --button-secondary-border-color--selected: rgb(59, 121, 183); --button-secondary-border-color--selected--hover: rgb(59, 121, 183); --button-secondary-border-color--disabeled: var(--button-secondary-color); --button-secondary-background-color: var(--white); --button-secondary-background-color--hover: rgb(47, 95, 144); --button-secondary-background-color--active: rgb(47, 95, 144); --button-secondary-background-color--selected: rgb(47, 95, 144); --button-secondary-background-color--selected--hover: rgb(47, 95, 144); --button-secondary-background-color--disabled: var(--button-secondary-color); --button-secondary-text-color: rgb(59, 121, 183); --button-secondary-text-color--hover: var(--white); --button-secondary-text-color--active: var(--white); --button-secondary-text-color--selected: var(--white); --button-secondary-text-color--selected--hover: var(--white); --button-secondary-text-color--disabled: var(--white); --button-close-background-color: transparent; --button-close-background-color--hover: transparent; --button-close-border-color: transparent; --button-close-border-color--hover: transparent; --button-close-text-color: var(--text-on-color); --button-close-text-color--hover: var(--text-on-color); } /* Calendar */ .xCal, .xCalendar { --calendar-background-color: var(--background); --calendar-day-header-background-color: var(--layer-accent); --calendar-nav-background-color: var(--interactive-secondary); --calendar-nav-text-color: var(--text-on-color); --calendar-border-color: var(--border-normal); --calendar-date-current-background-color: transparent; --calendar-date-current-text-color: inherit; --calendar-date-today-outline-color: var(--accent); --calendar-date-today-background-color: transparent; --calendar-date-today-text-color: var(--text-primary); --calendar-date-focus-background-color: var(--brand-primary--selected); --calendar-date-focus-text-color: var(--text-on-color); --calendar-date-other-background-color: var(--disabled-primary); --calendar-date-other-text-color: var(--disabled-tertiary); } /* Category Bar */ .xCb { --categorybar-background-color: var(--background-tone-200); --categorybar-border-color: var(--border-normal); } .xCbGrpHdr { --categorybar-groupheader-text-color--closed: var(--text-secondary); --categorybar-groupheader-text-color--closed--hover: var(--text-secondary); --categorybar-groupheader-text-color--open: var(--text-secondary); --categorybar-groupheader-text-color--open--hover: var(--text-secondary); --categorybar-groupheader-background-color--closed: transparent; --categorybar-groupheader-background-color--closed--hover: transparent; --categorybar-groupheader-background-color--open: transparent; --categorybar-groupheader-background-color--open--hover: transparent; --categorybar-groupheader-border-color--closed: var(--border-normal); --categorybar-groupheader-border-color--closed--hover: var(--border-dark); --categorybar-groupheader-border-color--open: var(--brand-secondary); --categorybar-groupheader-border-color--open--hover: var(--border-dark); } .xCbGrpHdr ~ .xCbBtns { --categorybar-groupheader-button-border-color: var(--border-light); --categorybar-groupheader-button-background-color: transparent; } .xCbBtns { --categorybar-button-border-color: var(--border-light); --categorybar-button-background-color: transparent; --categorybar-button-text-color: var(--text-secondary); --categorybar-button-text-color--hover: var(--text-primary); --categorybar-button-text-color--active: var(--text-primary); --categorybar-button-text-color--emphasis: var(--accent); --categorybar-button-background-color--hover: var(--background); --categorybar-button-background-color--active: var(--background); } .xCbFilter { --categorybar-filter-border-color: var(--border-normal); --categorybar-filter-background-color: var(--background-tone-200); --categorybar-filter-input-border-color: var(--border-dark); --categorybar-filter-input-border-color--hover: var(--border-dark); --categorybar-filter-input-border-color--focus: var(--border-dark); --categorybar-filter-input-background-color: rgba(255, 255, 255, 0.78); --categorybar-filter-input-background-color--hover: var(--background); --categorybar-filter-input-background-color--focus: var(--background); --categorybar-filter-input-text-color: rgb(50, 49, 48); --categorybar-filter-input-text-color--hover: rgb(50, 49, 48); --categorybar-filter-input-text-color--focus: rgb(50, 49, 48); } .xCbFilterResults { --categorybar-filter-results-background-color: var(--background); --categorybar-filter-results-border-color: var(--border-dark); --categorybar-filter-results-text-color: var(--accent); } /* Checkbox */ input[type="checkbox"], .xSelBox, .xFilterHdr { --checkbox-icon-color: var(--text-secondary); --checkbox-icon-color--hover: var(--text-primary); --checkbox-icon-color--focus: var(--checkbox-icon-color); --checkbox-icon-color--checked: var(--interactive-primary); --checkbox-icon-color--checked--hover: var(--interactive-primary--hover); --checkbox-icon-color--checked--focus: var(--checkbox-icon-color--checked); --checkbox-background-color: var(--layer); --checkbox-background-color--hover: var(--layer--hover); --checkbox-background-color--focus: var(--checkbox-background-color); --checkbox-background-color--checked: var(--layer); --checkbox-background-color--checked--hover: var(--layer--hover); --checkbox-background-color--checked--focus: var(--checkbox-background-color--checked); } input[type="checkbox"], .xSelBox, .xFilterHdr { --checkbox-toggle-border-color: var(--text-secondary); --checkbox-toggle-border-color--hover: var(--text-primary); --checkbox-toggle-border-color--focus: var(--checkbox-toggle-border-color); --checkbox-toggle-border-color--checked: var(--interactive-primary); --checkbox-toggle-border-color--checked--hover: var(--interactive-primary--hover); --checkbox-toggle-border-color--checked--focus: var(--checkbox-toggle-border-color--checked); --checkbox-toggle-background-color: var(--checkbox-background-color); --checkbox-toggle-background-color--hover: var(--checkbox-background-color--hover); --checkbox-toggle-background-color--focus: var(--checkbox-toggle-background-color); --checkbox-toggle-background-color--checked: var(--layer--selected); --checkbox-toggle-background-color--checked--hover: var(--layer--hover--selected); --checkbox-toggle-background-color--checked--focus: var(--checkbox-toggle-background-color--checked); --checkbox-toggle-checkmark-background-color: var(--text-secondary); --checkbox-toggle-checkmark-background-color--hover: var(--text-primary); --checkbox-toggle-checkmark-background-color--focus: var(--checkbox-toggle-checkmark-background-color); --checkbox-toggle-checkmark-background-color--checked: var(--interactive-primary); --checkbox-toggle-checkmark-background-color--checked--hover: var(--interactive-primary--hover); --checkbox-toggle-checkmark-background-color--checked--focus: var(--checkbox-toggle-checkmark-background-color--checked); } /* Combobox */ .xComboBox { --combobox-border-color: transparent; --combobox-border-color--hover: var(--black); --combobox-border-color--focus: transparent; --combobox-border-color--disabled: var(--border-light); --combobox-background-color: var(--background); --combobox-background-color--hover: var(--background); --combobox-background-color--focus: var(--background); --combobox-background-color--disabled: var(--background-tone-200); --combobox-text-color: var(--text-input); --combobox-text-color--hover: var(--text-input--hover); --combobox-text-color--focus: var(--text-input--focus); --combobox-text-color--disabled: var(--text-placeholder); } .xCombo { --combobox-dropdown-border-color: var(--black); --combobox-dropdown-background-color: var(--background); } /* Config */ .xConfigLink { --config-link-background-color: var(--interactive-secondary); --config-link-background-color--hover: var(--interactive-secondary--hover); --config-link-text-color: var(--text-on-color); --config-link-text-color--hover: var(--text-on-color); } /* Dialog */ .xDialogBackDrop { --dialog-backdrop-background-color: var(--backdrop); } .xDialogPopup { --dialog-popup-border-color: var(--border-color); --dialog-popup-background-color: var(--background); } .xDialogPopup .xMsgContainer { --dialog-popup-message-text-color: var(--text-primary); } .xDialogIFrame { --dialog-iframe-border-color: var(--border-normal); --dialog-iframe-background-color: var(--background); } .xDialogTitlebar { --dialog-titlebar-border-color: var(--border-normal); --dialog-titlebar-background-color: var(--interactive-secondary); --dialog-titlebar-text-color: var(--text-on-color); } .xTransition { --dialog-transition-title-text-color: var(--text-primary); } /* Infobar */ .xIB, .infoBar { --infobar-snapshot-background-color: var(--support-information-background); --infobar-snapshot-icon-color: var(--support-information); --infobar-snapshot-border-color: var(--support-information); --infobar-warning-background-color: var(--support-warning-background); --infobar-warning-icon-color: unset; --infobar-warning-border-color: var(--support-warning); } /* Label */ .xL { --label-text-color: inherit; } /* Lookup */ .xLookupBody { --lookup-table-header-border-color: var(--border-normal); --lookup-table-header-background-color: var(--background); --lookup-table-header-text-color: var(--text-primary); --lookup-table-text-color: var(--text-primary); --lookup-table-row-border-color: var(--border-normal); --lookup-table-row-background-color--hover: var(--layer--hover); --lookup-table-row-background-color--selected: var(--layer--selected); --lookup-table-row-background-color--hover--selected: var(--layer--hover--selected); --lookup-table-row-error-text-color: var(--support-error); } .xLookupPreview { --lookup-preview-border-color: var(--border-normal); --lookup-preview-background-color: var(--background); --lookup-preview-header-text-color: var(--text-primary); --lookup-preview-item-text-color: var(--text-primary); } .xLookupTb { --lookup-toolbar-border-color: var(--border-normal); --lookup-toolbar-background-color: var(--background); --lookup-toolbar-text-color: var(--text-primary); } .xLookupQuickBar { --lookup-quickbar-border-color: var(--border-normal); --lookup-quickbar-background-color: var(--background); --lookup-quickbar-background-color--hover: var(--layer); --lookup-quickbar-background-color--active: var(--layer--active); } /* Notice */ .xPageNotice { --notice-border-color: var(--border-normal); --notice-background-color: var(--layer); } /* Option Block */ .xOB, .xOBDis, .xOBErr { --optionblock-border-color: var(--border-normal); --optionblock-background-color: inherit; --optionblock-text-color: inherit; --optionblock-disabled-text-color: var(--disabled-tertiary); --optionblock-disabled-border-color: var(--disabled-tertiary); --optionblock-disabled-background-color: var(--disabled-primary); --optionblock-error-text-color: var(--support-error); --optionblock-error-border-color: var(--support-error); --optionblock-error-background-color: var(--support-error-background); } /* Property */ .xP { --property-border-color: var(--border-normal); --property-background-color: var(--background); } .xP td[ct="c"] { --property-label-text-color: var(--text-primary); } /* Property Grid */ .xPG { --propertygrid-border-color: var(--border-normal); --propertygrid-background-color: var(--background); } /* Quick Action */ .xQAB, .xQABBtns .xQABButton, .xQABButtonWithImage, .xQABButtonWithImageDisabled { --quick-actionbar-background-color: transparent; --quick-actionbar-button-background-color: var(--interactive-secondary); --quick-actionbar-button-text-color: var(--text-on-color); --quick-actionbar-button-background-color--hover: var(--interactive-secondary--hover); --quick-actionbar-button-text-color--hover: var(--text-on-color); --quick-actionbar-button-background-color--disabled: var(--disabled-secondary); --quick-actionbar-button-text-color--disabled: var(--disabled-tertiary); } .xQV .modelHeader { --quickview-header-text-color: var(--text-primary); } .xQV .cat { --quickview-category-text-color: var(--text-primary); } .xQV .opt { --quickview-option-text-color: var(--text-primary); --quickview-option-background-color--hover: var(--layer); } .xQV .props-section { --quickview-properties-border-color: var(--border-normal); --quickview-properties-background-color: var(--layer); --quickview-properties-background-color--hover: var(--layer--hover); --quickview-properties-text-color: var(--text-primary); } .xQV .total { --quickview-properties-total-border-color: var(--border-normal); --quickview-properties-total-background-color: var(--background); --quickview-properties-total-text-color: var(--text-primary); } /* Radio */ input[type="radio"] { --radio-icon-color: var(--text-secondary); --radio-icon-color--hover: var(--text-primary); --radio-icon-color--focus: var(--radio-icon-color); --radio-icon-color--checked: var(--interactive-primary); --radio-icon-color--checked--hover: var(--interactive-primary--hover); --radio-icon-color--checked--focus: var(--radio-icon-color--checked); --radio-background-color: var(--layer); --radio-background-color--hover: var(--layer--hover); --radio-background-color--focus: var(--radio-background-color); --radio-background-color--checked: var(--layer); --radio-background-color--checked--hover: var(--layer--hover); --radio-background-color--checked--focus: var(--radio-background-color--checked); } /* Region */ .xRgn { --region-border-color: var(--border-normal); --region-background-color: var(--background); } .xRgnHdr, .xSubHdr { --region-header-background-color: var(--background); --region-header-background-color--hover: var(--background); --region-header-text-color: var(--text-primary); --region-header-text-color--hover: var(--text-primary); } .xRgnHdrBtns a#help { --region-header-button-help-border-color: var(--border-normal); --region-header-button-help-border-color--hover: var(--border-normal); --region-header-button-help-border-color--active: var(--border-normal); --region-header-button-help-background-color: transparent; --region-header-button-help-background-color--hover: #efefef; --region-header-button-help-background-color--active: #efefef; --region-header-button-help-icon-color: rgb(0, 120, 212); --region-header-button-help-icon-color--hover: rgb(0, 120, 212); --region-header-button-help-icon-color--active: rgb(0, 120, 212); } .xRgnHdrBtns a#hs { --region-header-button-hs-border-color: var(--border-normal); --region-header-button-hs-border-color--hover: var(--border-normal); --region-header-button-hs-border-color--active: var(--border-normal); --region-header-button-hs-background-color: transparent; --region-header-button-hs-background-color--hover: #efefef; --region-header-button-hs-background-color--active: #efefef; --region-header-button-hs-icon-color: rgb(0, 120, 212); --region-header-button-hs-icon-color--hover: rgb(0, 120, 212); --region-header-button-hs-icon-color--active: rgb(0, 120, 212); } .xRgnTb { --region-toolbar-background-color: var(--background); --region-toolbar-border-color: var(--border-normal); } /* Search Box */ .search-box, .xSearchBox, .xSearchBoxDropDown { --searchbox-input-border-color: var(--border-normal); --searchbox-input-border-color--hover: var(--border-normal); --searchbox-input-border-color--focus: var(--border-normal); --searchbox-input-border-color--active: var(--border-normal); --searchbox-input-background-color: var(--background); --searchbox-input-background-color--hover: var(--background); --searchbox-input-background-color--focus: var(--background); --searchbox-input-background-color--active: var(--background); --searchbox-icon-color: var(--text-secondary); --searchbox-input-placeholder-color--hover: var(--text-primary); --searchbox-item-text-color--emphasis: var(--accent); --searchbox-dropdown-background-color: var(--background); --searchbox-dropdown-border-color: var(--border-normal); } /* Settings */ .xStg { --setting-background-color: var(--background); --setting-border-color: transparent; } /* Spinner */ .spinner { --spinner-background-color: var(--background); --spinner-color: var(--interactive-primary); } /* Splitter */ .xHSplit, .xVSplit, .xVSplit::before, .xHSplit::before { --splitter-border-color: var(--border-light); --splitter-icon-background-color: var(--background-tone-100); --splitter-icon-background-color--hover: var(--background-tone-200); --splitter-background-color: var(--background-tone-100); --splitter-background-color--hover: var(--background-tone-200); } /* Status Bar */ .xSb { --statusbar-background-color: var(--background); --statusbar-border-color: var(--border-light); } .xSbText { --statusbar-text-text-color: var(--text-primary); } .xSbVer { --statusbar-version-text-color: var(--text-placeholder); } /* Table Category Grid */ .xCatGrid { --table-categorygrid-background-color: var(--background); --table-categorygrid-row-background-color: var(--background); } /* Text */ input[type="text"] { --input-text-border-color: transparent; --input-text-border-color--hover: rgb(102, 102, 102); --input-text-border-color--focus: rgb(102, 102, 102); --input-text-background-color: var(--background); --input-text-background-color--hover: var(--background); --input-text-background-color--focus: var(--background); --input-text-text-color: var(--text-input); --input-text-text-color--hover: var(--black); --input-text-text-color--focus: var(--black); --input-text-text-color--placeholder: var(--black); } /* Textarea */ textarea { --textarea-border-color: var(--border-interactive); --textarea-border-color--hover: var(--border-interactive--hover); --textarea-border-color--focus: var(--border-interactive); --textarea-background-color: var(--background); --textarea-background-color--hover: var(--background); --textarea-background-color--focus: var(--background); --textarea-text-color: var(--text-input); --textarea-text-color--hover: var(--text-input--hover); --textarea-text-color--focus: var(--text-input--focus); } /* Tool Bar */ .xTb, .xTbMask { --toolbar-border-color: var(--border-light); --toolbar-top-background-color: var(--brand-primary); --toolbar-background-color: var(--background); --toolbar-branding-logo-background-color: transparent; --toolbar-branding-logo-background-color--hover: transparent; --toolbar-text-color: var(--text-on-brand-primary-color); --toolbar-text-label-color: var(--text-on-brand-primary-color); } .xTbBtns { --toolbar-button-background-color: var(--background); --toolbar-button-background-color--hover: rgb(216, 216, 216); --toolbar-button-background-color--selected: rgb(216, 216, 216); --toolbar-button-background-color--selected--hover: rgb(216, 216, 216); --toolbar-button-text-color: rgb(51, 51, 51); --toolbar-button-text-color--hover: rgb(51, 51, 51); --toolbar-button-text-color--selected: rgb(51, 51, 51); --toolbar-button-text-color--selected--hover: rgb(51, 51, 51); --toolbar-button-border-color: var(--border-light); --toolbar-button-border-color--hover: var(--border-dark); --toolbar-button-border-color--selected: var(--border-interactive); --toolbar-button-border-color--selected--hover: var(--border-dark); --toolbar-mask-background-color: hsla(0, 0%, 0%, 0.3); } /* Tool Tip */ .xTooltip { --tooltip-background-color: var(--background-inverse); }