396 lines
16 KiB
CSS
396 lines
16 KiB
CSS
@import "../colors.css";
|
|
|
|
/* ========================================================================
|
|
global variables
|
|
======================================================================== */
|
|
:root {
|
|
--border-color-card: 1px solid var(--surface0) !important;
|
|
--urlbar-container-border-width: 1px !important;
|
|
--urlbar-container-border-color: var(--surface0) !important;
|
|
|
|
/* arrow panels */
|
|
--arrowpanel-background: var(--surface0) !important;
|
|
--arrowpanel-border-color: var(--surface1) !important;
|
|
--arrowpanel-color: var(--text) !important;
|
|
--arrowpanel-dimmed-even-further: var(--overlay0) !important;
|
|
--arrowpanel-dimmed-further: var(--subtext1) !important;
|
|
--arrowpanel-dimmed: var(--subtext0) !important;
|
|
--default-arrowpanel-background: var(--surface0) !important;
|
|
--default-arrowpanel-border-color: var(--surface1) !important;
|
|
--default-arrowpanel-color: var(--text) !important;
|
|
|
|
/* autocomplete & popups */
|
|
--autocomplete-popup-background: var(--mantle) !important;
|
|
--autocomplete-popup-color: var(--text) !important;
|
|
--autocomplete-popup-highlight-background: var(--surface1) !important;
|
|
--autocomplete-popup-highlight-color: var(--text) !important;
|
|
--urlbar-popup-action-color: var(--accent) !important;
|
|
--urlbar-popup-url-color: var(--blue) !important;
|
|
--urlbar-separator-color: var(--surface0) !important;
|
|
|
|
/* buttons (global) */
|
|
--backbutton-active-background: var(--surface1) !important;
|
|
--backbutton-background: transparent !important;
|
|
--backbutton-border-color: transparent !important;
|
|
--backbutton-hover-background: var(--surface0) !important;
|
|
--cfr-active-color: var(--accent) !important;
|
|
--cfr-button-addons-icon: var(--text) !important;
|
|
--cfr-button-features-icon: var(--text) !important;
|
|
|
|
/* color palette (blue) */
|
|
--blue-40-a10: color-mix(in srgb, var(--blue), transparent 90%) !important;
|
|
--blue-40: var(--blue) !important;
|
|
--blue-50-a30: color-mix(in srgb, var(--blue), transparent 70%) !important;
|
|
--blue-50: var(--blue) !important;
|
|
--blue-60: var(--sapphire) !important;
|
|
--blue-70: var(--sky) !important;
|
|
--blue-80: var(--teal) !important;
|
|
|
|
/* color palette (green) */
|
|
--green-50: var(--green) !important;
|
|
--green-60: var(--green) !important;
|
|
--green-70: var(--teal) !important;
|
|
--green-80: var(--teal) !important;
|
|
--green-90: var(--teal) !important;
|
|
|
|
/* color palette (grey/overlay) */
|
|
--grey-20: var(--subtext1) !important;
|
|
--grey-30: var(--subtext0) !important;
|
|
--grey-40: var(--overlay2) !important;
|
|
--grey-60: var(--overlay0) !important;
|
|
--grey-70: var(--overlay2) !important;
|
|
--grey-80: var(--overlay2) !important;
|
|
--grey-90-a10: color-mix(
|
|
in srgb,
|
|
var(--surface1),
|
|
transparent 90%
|
|
) !important;
|
|
--grey-90-a20: color-mix(
|
|
in srgb,
|
|
var(--surface1),
|
|
transparent 80%
|
|
) !important;
|
|
--grey-90-a30: color-mix(
|
|
in srgb,
|
|
var(--surface1),
|
|
transparent 70%
|
|
) !important;
|
|
--grey-90-a50: color-mix(
|
|
in srgb,
|
|
var(--surface1),
|
|
transparent 50%
|
|
) !important;
|
|
--grey-90-a60: color-mix(
|
|
in srgb,
|
|
var(--surface1),
|
|
transparent 40%
|
|
) !important;
|
|
--grey-90: var(--surface1) !important;
|
|
|
|
/* color palette (misc) */
|
|
--orange-50: var(--peach) !important;
|
|
--purple-70: var(--mauve) !important;
|
|
|
|
/* color palette (red) */
|
|
--red-50-a30: color-mix(in srgb, var(--red), transparent 70%) !important;
|
|
--red-50: var(--red) !important;
|
|
--red-60: var(--maroon) !important;
|
|
--red-70: var(--maroon) !important;
|
|
--red-80: var(--maroon) !important;
|
|
--red-90: var(--maroon) !important;
|
|
|
|
/* color palette (yellow) */
|
|
--yellow-10: var(--yellow) !important;
|
|
--yellow-50: var(--yellow) !important;
|
|
--yellow-60-a30: color-mix(
|
|
in srgb,
|
|
var(--yellow),
|
|
transparent 70%
|
|
) !important;
|
|
--yellow-60: var(--yellow) !important;
|
|
--yellow-70: var(--peach) !important;
|
|
--yellow-80: var(--peach) !important;
|
|
--yellow-90: var(--peach) !important;
|
|
|
|
/* context menus */
|
|
--menu-background-color: var(--base) !important;
|
|
--menu-border-color: var(--surface1) !important;
|
|
--menu-color: var(--text) !important;
|
|
--menu-disabled-color: var(--overlay0) !important;
|
|
--menu-icon-opacity: 1 !important;
|
|
--menuitem-disabled-hover-background-color: transparent !important;
|
|
--menuitem-hover-background-color: var(--surface1) !important;
|
|
--panel-disabled-color: var(--overlay0) !important;
|
|
--panel-separator-color: var(--surface0) !important;
|
|
|
|
/* in-content ui (cards & boxes) */
|
|
--card-outline-color: var(--surface1) !important;
|
|
--card-shadow-focus: 0 0 0 2px var(--accent) !important;
|
|
--card-shadow-hover: 0 4px 8px
|
|
color-mix(in srgb, var(--crust), transparent 80%) !important;
|
|
--card-shadow: 0 1px 4px color-mix(in srgb, var(--crust), transparent 90%) !important;
|
|
--in-content-box-background-active: var(--surface1) !important;
|
|
--in-content-box-background-hover: var(--surface1) !important;
|
|
--in-content-box-background-odd: var(--mantle) !important;
|
|
--in-content-box-background: var(--surface0) !important;
|
|
--in-content-box-border-color: var(--surface1) !important;
|
|
--in-content-box-info-background: var(--surface0) !important;
|
|
|
|
/* in-content ui (colors & text) */
|
|
--in-content-deemphasized-text: var(--subtext0) !important;
|
|
--in-content-link-color-active: var(--sky) !important;
|
|
--in-content-link-color-hover: var(--sapphire) !important;
|
|
--in-content-link-color-visited: var(--lavender) !important;
|
|
--in-content-link-color: var(--blue) !important;
|
|
--in-content-page-background: var(--base) !important;
|
|
--in-content-page-color: var(--text) !important;
|
|
--in-content-selected-text: var(--surface2) !important;
|
|
--in-content-text-color: var(--text) !important;
|
|
|
|
/* in-content ui (forms & buttons) */
|
|
--in-content-border-active-shadow: 0 0 0 2px var(--accent) !important;
|
|
--in-content-border-active: var(--accent) !important;
|
|
--in-content-border-color: var(--surface1) !important;
|
|
--in-content-border-focus: var(--accent) !important;
|
|
--in-content-border-highlight: var(--blue) !important;
|
|
--in-content-border-hover: var(--surface2) !important;
|
|
--in-content-border-invalid-shadow: 0 0 0 2px var(--red) !important;
|
|
--in-content-border-invalid: var(--red) !important;
|
|
--in-content-button-background-active: var(--surface1) !important;
|
|
--in-content-button-background-hover: var(--surface2) !important;
|
|
--in-content-button-background: var(--surface0) !important;
|
|
--in-content-category-background-active: var(--surface1) !important;
|
|
--in-content-category-background-hover: var(--surface0) !important;
|
|
--in-content-category-background-selected-active: var(--surface2) !important;
|
|
--in-content-category-background-selected-hover: var(--surface1) !important;
|
|
--in-content-category-outline-focus: var(--accent) !important;
|
|
--in-content-category-text-selected-active: var(--accent) !important;
|
|
--in-content-category-text-selected: var(--accent) !important;
|
|
--in-content-item-hover: var(--surface0) !important;
|
|
--in-content-item-selected: var(--surface1) !important;
|
|
--in-content-primary-button-background-active: var(--maroon) !important;
|
|
--in-content-primary-button-background-hover: var(--peach) !important;
|
|
--in-content-primary-button-background: var(--accent) !important;
|
|
|
|
/* in-content ui (misc) */
|
|
--chrome-content-separator-color: var(--surface0) !important;
|
|
--in-content-dialog-header-background: var(--mantle) !important;
|
|
--in-content-tab-color: var(--subtext0) !important;
|
|
--in-content-table-background: var(--mantle) !important;
|
|
--in-content-table-border-dark-color: var(--surface1) !important;
|
|
--in-content-table-header-background: var(--surface0) !important;
|
|
--in-content-warning-container: var(--red) !important;
|
|
--shadow-10: 0 1px 2px color-mix(in srgb, var(--crust), transparent 90%) !important;
|
|
--shadow-30: 0 4px 8px color-mix(in srgb, var(--crust), transparent 80%) !important;
|
|
|
|
/* lightweight theme (lwt) */
|
|
--lwt-accent-color: var(--accent) !important;
|
|
--lwt-sidebar-background-color: var(--mantle) !important;
|
|
--lwt-sidebar-text-color: var(--text) !important;
|
|
--lwt-text-color: var(--text) !important;
|
|
--lwt-toolbar-field-background-color: var(--crust) !important;
|
|
--lwt-toolbar-field-border-color: var(--surface0) !important;
|
|
--lwt-toolbar-field-color: var(--text) !important;
|
|
--lwt-toolbar-field-focus-color: var(--text) !important;
|
|
--lwt-toolbar-field-focus: var(--accent) !important;
|
|
--lwt-toolbarbutton-icon-fill: var(--text) !important;
|
|
|
|
/* navigator tabs */
|
|
--tab-line-color: var(--accent) !important;
|
|
--tab-loading-fill: var(--accent) !important;
|
|
--tabs-border-color: var(--surface0) !important;
|
|
|
|
/* new tab page */
|
|
--newtab-background-color: var(--base) !important;
|
|
--newtab-border-primary-color: var(--surface1) !important;
|
|
--newtab-border-secondary-color: var(--surface0) !important;
|
|
--newtab-button-primary-color: var(--accent) !important;
|
|
--newtab-button-secondary-color: var(--surface0) !important;
|
|
--newtab-card-active-outline-color: var(--accent) !important;
|
|
--newtab-card-background-color: var(--surface0) !important;
|
|
--newtab-card-hairline-color: var(--surface1) !important;
|
|
--newtab-card-placeholder-color: var(--surface1) !important;
|
|
--newtab-card-shadow: 0 1px 4px
|
|
color-mix(in srgb, var(--crust), transparent 80%) !important;
|
|
--newtab-contextmenu-background-color: var(--surface0) !important;
|
|
--newtab-contextmenu-button-color: var(--text) !important;
|
|
--newtab-element-active-color: var(--surface1) !important;
|
|
--newtab-element-hover-color: var(--surface0) !important;
|
|
--newtab-feed-button-background-faded: var(--surface1) !important;
|
|
--newtab-feed-button-background: var(--surface0) !important;
|
|
--newtab-feed-button-spinner: var(--text) !important;
|
|
--newtab-feed-button-text-faded: var(--subtext0) !important;
|
|
--newtab-feed-button-text: var(--text) !important;
|
|
--newtab-icon-primary-color: var(--text) !important;
|
|
--newtab-icon-secondary-color: var(--subtext0) !important;
|
|
--newtab-icon-tertiary-color: var(--overlay0) !important;
|
|
--newtab-inner-box-shadow-color: color-mix(
|
|
in srgb,
|
|
var(--crust),
|
|
transparent 80%
|
|
) !important;
|
|
--newtab-link-primary-color: var(--blue) !important;
|
|
--newtab-link-secondary-color: var(--sapphire) !important;
|
|
--newtab-modal-color: var(--base) !important;
|
|
--newtab-overlay-color: color-mix(
|
|
in srgb,
|
|
var(--crust),
|
|
transparent 40%
|
|
) !important;
|
|
--newtab-search-border-color: var(--surface0) !important;
|
|
--newtab-search-dropdown-color: var(--mantle) !important;
|
|
--newtab-search-dropdown-header-color: var(--subtext1) !important;
|
|
--newtab-search-header-background-color: var(--base) !important;
|
|
--newtab-search-icon-color: var(--text) !important;
|
|
--newtab-search-icon: var(--text) !important;
|
|
--newtab-search-wordmark-color: var(--text) !important;
|
|
--newtab-section-active-contextmenu-color: var(--text) !important;
|
|
--newtab-section-header-text-color: var(--text) !important;
|
|
--newtab-section-navigation-text-color: var(--subtext0) !important;
|
|
--newtab-snippets-background-color: var(--surface0) !important;
|
|
--newtab-snippets-hairline-color: var(--surface1) !important;
|
|
--newtab-text-conditional-color: var(--red) !important;
|
|
--newtab-text-primary-color: var(--text) !important;
|
|
--newtab-text-secondary-color: var(--subtext0) !important;
|
|
--newtab-textbox-background-color: var(--crust) !important;
|
|
--newtab-textbox-border: var(--surface0) !important;
|
|
--newtab-textbox-focus-boxshadow: 0 0 0 2px var(--accent) !important;
|
|
--newtab-textbox-focus-color: var(--accent) !important;
|
|
--newtab-topsites-background-color: var(--base) !important;
|
|
--newtab-topsites-icon-shadow: none !important;
|
|
--newtab-topsites-label-color: var(--text) !important;
|
|
--trailhead-card-button-background-active-color: var(--accent) !important;
|
|
--trailhead-card-button-background-color: var(--surface1) !important;
|
|
--trailhead-card-button-background-hover-color: var(--surface2) !important;
|
|
--trailhead-cards-background-color: var(--surface0) !important;
|
|
--trailhead-header-text-color: var(--text) !important;
|
|
|
|
/* notifications */
|
|
--short-notification-background: var(--surface0) !important;
|
|
--short-notification-gradient: linear-gradient(
|
|
var(--surface0),
|
|
var(--surface0)
|
|
) !important;
|
|
|
|
/* sidebar */
|
|
--sidebar-background-color: var(--mantle) !important;
|
|
--sidebar-border-color: var(--surface0) !important;
|
|
--sidebar-text-color: var(--text) !important;
|
|
|
|
/* toolbar & urlbar */
|
|
--toolbar-bgcolor: var(--mantle) !important;
|
|
--toolbar-color: var(--text) !important;
|
|
--toolbar-field-focus-border-color: var(--accent) !important;
|
|
--toolbar-non-lwt-bgcolor: var(--mantle) !important;
|
|
--toolbar-non-lwt-textcolor: var(--text) !important;
|
|
--toolbarbutton-active-background: var(--surface1) !important;
|
|
--toolbarbutton-focus-outline: var(--accent) !important;
|
|
--toolbarbutton-hover-background: var(--surface0) !important;
|
|
--toolbarbutton-icon-fill-attention: var(--blue) !important;
|
|
}
|
|
|
|
/* ========================================================================
|
|
global component styles
|
|
======================================================================== */
|
|
|
|
#sidebar-main > *[expanded] {
|
|
background-color: var(--mantle) !important;
|
|
}
|
|
|
|
*,
|
|
:root {
|
|
accent-color: var(--accent) !important;
|
|
}
|
|
|
|
#TabsToolbar {
|
|
background-color: var(--mantle) !important;
|
|
}
|
|
|
|
#sidebar-launcher-splitter:hover {
|
|
background-color: var(--accent) !important;
|
|
}
|
|
|
|
[_moz-menuactive="true"] {
|
|
background-color: var(--accent) !important;
|
|
color: var(--mantle) !important;
|
|
}
|
|
|
|
menupopup {
|
|
--panel-background: var(--base) !important;
|
|
--panel-border-color: var(--surface1) !important;
|
|
--panel-text: var(--text) !important;
|
|
}
|
|
|
|
menuseparator {
|
|
border-color: var(--surface1) !important;
|
|
}
|
|
|
|
/* ========================================================================
|
|
overrides & media queries
|
|
======================================================================== */
|
|
@media {
|
|
#PersonalToolbar,
|
|
#nav-bar {
|
|
background-color: var(--mantle) !important;
|
|
}
|
|
|
|
:root {
|
|
/* browser tabs */
|
|
.tab-background[multiselected] {
|
|
--focus-outline-color: var(--surface0);
|
|
}
|
|
|
|
.tab-background[selected]:not([multiselected]) {
|
|
outline: 1px solid var(--surface0);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
.tabbrowser-tab[selected="true"] .tab-background {
|
|
border: 1px solid var(--surface0) !important;
|
|
}
|
|
|
|
#tabbrowser-tabs {
|
|
--tab-loading-fill: var(--text) !important;
|
|
}
|
|
|
|
/* general variable overrides */
|
|
--arrowpanel-background: var(--surface0) !important;
|
|
--arrowpanel-border-color: var(--surface0) !important;
|
|
--arrowpanel-color: var(--text) !important;
|
|
--chrome-content-separator-color: var(--surface0) !important;
|
|
--input-bgcolor: var(--crust) !important;
|
|
--input-border-color: var(--mantle) !important;
|
|
--input-color: var(--text) !important;
|
|
--tab-selected-bgcolor: var(--base) !important;
|
|
--tab-selected-textcolor: var(--text) !important;
|
|
--toolbar-bgcolor: var(--mantle) !important;
|
|
--toolbar-field-background-color: var(--input-bgcolor) !important;
|
|
--toolbar-field-border-color: var(--input-border-color) !important;
|
|
--toolbar-field-color: var(--input-color) !important;
|
|
--toolbar-field-focus-background-color: var(--base) !important;
|
|
--toolbar-field-focus-border-color: var(--surface0) !important;
|
|
--toolbarseparator-color: var(--text) !important;
|
|
--toolbox-non-lwt-bgcolor: var(--crust) !important;
|
|
--toolbox-non-lwt-textcolor: var(--text) !important;
|
|
|
|
/* inputs & selection */
|
|
#urlbar-input:focus::selection,
|
|
.searchbar-textbox:focus::selection {
|
|
background-color: var(--text);
|
|
color: var(--surface0);
|
|
}
|
|
|
|
/* toolbar buttons */
|
|
--toolbarbutton-active-background: var(--overlay0) !important;
|
|
--toolbarbutton-icon-fill: var(--text) !important;
|
|
--toolbarbutton-icon-fill-attention: var(--text) !important;
|
|
|
|
/* urlbar */
|
|
--urlbarView-highlight-background: var(--overlay0) !important;
|
|
--urlbarView-highlight-color: var(--text) !important;
|
|
|
|
&:where([tabsintitlebar]) {
|
|
--toolbox-non-lwt-bgcolor-inactive: var(--crust) !important;
|
|
}
|
|
}
|
|
}
|