97 lines
3.8 KiB
CSS
97 lines
3.8 KiB
CSS
/* Photon Colors CSS Variables v1.4.0
|
|
* Colors are taken from: https://github.com/FirefoxUX/design-tokens */
|
|
:root {
|
|
--blue-40: #45a1ff;
|
|
--blue-50: #0a84ff;
|
|
--blue-60: #0060df;
|
|
--blue-70: #003eaa;
|
|
--blue-80: #002275;
|
|
--blue-90: #000f40;
|
|
|
|
--grey-10: #f9f9fa;
|
|
--grey-20: #ededf0;
|
|
--grey-30: #d7d7db;
|
|
--grey-40: #b1b1b3;
|
|
--grey-50: #737373;
|
|
--grey-60: #4a4a4f;
|
|
--grey-70: #38383d;
|
|
--grey-80: #2a2a2e;
|
|
--grey-90: #0c0c0d;
|
|
|
|
--tone-1: var(--grey-10);
|
|
--tone-2: var(--grey-20);
|
|
--tone-3: var(--grey-30);
|
|
--tone-4: var(--grey-40);
|
|
--tone-5: var(--grey-50);
|
|
--tone-6: var(--grey-60);
|
|
--tone-7: var(--grey-70);
|
|
--tone-8: var(--grey-80);
|
|
--tone-9: var(--grey-90);
|
|
|
|
--accent-1: var(--blue-40);
|
|
--accent-2: var(--blue-50);
|
|
--accent-3: var(--blue-60);
|
|
|
|
/*
|
|
--primary-light-color: var(--grey-40);
|
|
--light-accent-color: var(--grey-50);
|
|
--mid-way-color: var(--grey-60);
|
|
--primary-dark-color: var(--grey-70);
|
|
--dark-accent: var(--grey-80);
|
|
--darksest: var(--grey-90);
|
|
--primary-accent-color: var(--blue-40);
|
|
--primary-accent-color-dark: var(--blue-50);
|
|
--primary-accent-color-darkest: var(--blue-60);
|
|
*/
|
|
--in-content-page-color: var(--tone-4) !important; /* Main Background Color */
|
|
--in-content-page-background: var(--tone-7) !important; /* Main Text Color */
|
|
--in-content-text-color: var(--tone-3) !important; /* Text in Search Boxes */
|
|
--in-content-selected-text: var(--tone-1) !important;
|
|
--in-content-box-background: var(--tone-6) !important; /* Text Boxes */
|
|
--in-content-box-background-odd: #f3f6fa;
|
|
--in-content-box-background-hover: var(--tone-6) !important; /* Box Hover */
|
|
--in-content-box-background-active: var(--tone-6) !important; /* Selected, but not hovered */
|
|
--in-content-box-border-color: var(--tone-5) !important; /* Text Box Border */
|
|
--in-content-item-hover: rgba(0,149,221,0.25);
|
|
--in-content-item-selected: var(--tone-8) !important;
|
|
--in-content-border-highlight: var(--accent-1) !important;
|
|
--in-content-border-focus: var(--accent-1) !important; /* Border on Focus */
|
|
--in-content-border-color: var(--tone-6) !important;
|
|
--in-content-category-outline-focus: 1px dotted #0a84ff;
|
|
--in-content-category-text: var(--tone-4) !important; /* Non-selected Menu Items */
|
|
--in-content-category-text-active: #0c0c0d;
|
|
--in-content-category-text-selected: var(--accent-1) !important; /* Selected Menu Itemes */
|
|
--in-content-category-text-selected-active: #0060df;
|
|
--in-content-category-background-hover: rgba(12,12,13,0.1);
|
|
--in-content-category-background-active: rgba(12,12,13,0.15);
|
|
--in-content-category-background-selected-hover: rgba(12,12,13,0.15);
|
|
--in-content-category-background-selected-active: rgba(12,12,13,0.2);
|
|
--in-content-tab-color: #424f5a;
|
|
--in-content-link-color: var(--accent-1) !important;
|
|
--in-content-link-color-hover: var(--accent-2) !important;
|
|
--in-content-link-color-active: #003eaa;
|
|
--in-content-link-color-visited: #0a8dff;
|
|
--in-content-primary-button-background: var(--accent-2) !important;
|
|
--in-content-primary-button-background-hover: var(--accent-3) !important;
|
|
--in-content-primary-button-background-active: var(--accent-3) !important;
|
|
--in-content-table-border-dark-color: var(--tone-7) !important;
|
|
--in-content-table-header-background: var(--accent-2) !important;
|
|
|
|
--theme-selection-background: var(--accent-2) !important;
|
|
--theme-selection-background-hover: var(--accent-1) !important;
|
|
|
|
--in-content-category-header-background: var(--tone-8) !important;
|
|
--selected-icon-fill-color: var(--tone-2) !important;
|
|
|
|
--in-content-dark-header-background: var(--tone-9) !important;
|
|
|
|
--code-green: #86de74 !important;
|
|
|
|
--warning-color: #FCE19F;
|
|
--warning-background-color: #44391F;
|
|
|
|
}
|
|
|
|
/*! Begin color overrides */
|
|
/*! End color overrides */
|