Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/* Default variables */
:host,
:root {
--account-color: var(--selected-item-color);
--transition-duration: 120ms;
--transition-timing: ease;
--arrowpanel-background: var(--layout-background-1);
--arrowpanel-color: var(--layout-color-1);
--arrowpanel-border-color: var(--layout-border-1);
--lwt-additional-images: none;
--lwt-background-alignment: right top;
--lwt-background-tiling: no-repeat;
--toolbar-bgcolor: var(--layout-background-1);
--toolbar-color: var(--layout-color-1);
--panelui-subview-transition-duration: 150ms;
--autocomplete-popup-highlight-background: var(--selected-item-color);
--autocomplete-popup-highlight-color: var(--selected-item-text-color);
--button-background-color: var(--layout-background-3);
--button-hover-text-color: inherit;
--button-hover-background-color: light-dark(var(--layout-background-2), var(--layout-background-4));
--button-active-background-color: light-dark(var(--layout-background-4), var(--layout-background-2));
--button-border-color: light-dark(var(--layout-border-1), var(--layout-border-2));
--button-border-radius: 3px;
--button-border-size: 1px;
--button-text-color: var(--layout-color-1);
--button-margin: 6px;
--button-padding: 6px;
--button-primary-background-color: var(--selected-item-color);
--button-primary-hover-background-color: color-mix(in srgb, var(--selected-item-color) 80%, black);
--button-primary-active-background-color: color-mix(in srgb, var(--selected-item-color) 70%, black);
--button-primary-text-color: var(--selected-item-text-color);
--button-primary-border-color: color-mix(in srgb, var(--selected-item-color) 85%, black);
--button-destructive-background-color: var(--color-red-60);
--button-destructive-hover-background-color: color-mix(in srgb, var(--color-red-50) 50%, var(--color-red-60));
--button-destructive-active-background-color: var(--color-red-70);
--button-destructive-text-color: var(--color-white);
--button-destructive-border-color: light-dark(var(--color-red-80), var(--color-red-50));
--button-link-text-color: light-dark(var(--color-blue-60), var(--color-blue-40));
--button-link-active-text-color: light-dark(var(--color-blue-70), var(--color-blue-50));
--button-pressed-shadow: light-dark(inset 0 1px 3px color-mix(in srgb, var(--color-gray-90) 30%, transparent),
inset 0 1px 3px color-mix(in srgb, var(--color-black) 50%, transparent));
--button-pressed-indicator-shadow: light-dark(0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(0, 0, 0, 0.25));
--button-pressed-indicator-padding: 6px;
--chrome-content-separator-color: light-dark(var(--color-gray-30), var(--color-gray-90));
--focus-outline-color: var(--toolbar-field-focus-border-color);
--focus-outline-offset: 2px;
--focus-outline: 2px solid var(--focus-outline-color);
--input-border-color: color-mix(in srgb, currentColor 41%, transparent);
--new-folder-color: light-dark(var(--color-blue-60), var(--color-blue-40));
--lwt-header-image: none;
--search-bar-color: inherit;
--search-bar-border-color: var(--color-gray-40);
--search-bar-background: var(--layout-background-0);
--search-bar-focus-background: var(--layout-background-0);
--search-field-placeholder: color-mix(in srgb, currentColor 50%, transparent);
--search-focus-outline-color: var(--focus-outline-color);
--search-outline-offset: -1px;
--selected-item-color: var(--sidebar-highlight-background-color, AccentColor);
--selected-item-text-color: var(--sidebar-highlight-text-color, AccentColorText);
--splitter-color: var(--sidebar-border-color, var(--layout-border-0));
--sidebar-border-color: var(--layout-border-0);
--tab-min-height: 33px;
--lwt-tabs-border-color: var(--sidebar-border-color);
--tabs-tabbar-border-size: 1px;
--toolbar-button-hover-background-color: color-mix(in srgb, currentColor 10%, transparent);
--toolbar-button-hover-border-color: color-mix(in srgb, currentColor 30%, transparent);
--toolbar-button-hover-checked-color: color-mix(in srgb, currentColor 20%, transparent);
--toolbar-button-active-background-color: color-mix(in srgb, currentColor 20%, transparent);
--toolbar-button-active-border-color: color-mix(in srgb, currentColor 40%, transparent);
--toolbarbutton-icon-fill-opacity: .85;
--toolbarbutton-hover-background: light-dark(var(--lwt-toolbarbutton-hover-background,
rgba(0, 0, 0, .05)),
var(--lwt-toolbarbutton-hover-background,
rgba(255, 255, 255, .25)));
--toolbarbutton-hover-bordercolor: light-dark(var(--lwt-toolbarbutton-hover-background,
rgba(0, 0, 0, .25)),
var(--lwt-toolbarbutton-hover-background,
rgba(255, 255, 255, .5)));
--toolbarbutton-header-bordercolor: light-dark(var(--lwt-toolbarbutton-hover-background,
rgba(0, 0, 0, .25)),
var(--lwt-toolbarbutton-hover-background,
rgba(255, 255, 255, .25)));
--toolbarbutton-hover-boxshadow: none;
--toolbarbutton-active-background: light-dark(var(--lwt-toolbarbutton-active-background,
rgba(0, 0, 0, .1)),
var(--lwt-toolbarbutton-active-background,
rgba(255, 255, 255, .4)));
--toolbarbutton-active-bordercolor: light-dark(var(--lwt-toolbarbutton-active-background,
rgba(0, 0, 0, .3)),
var(--lwt-toolbarbutton-active-background,
rgba(255, 255, 255, .7)));
--toolbarbutton-default-active-boxshadow: rgba(0, 0, 0, .1) inset, 0 0 1px rgba(0, 0, 0, .3);
--toolbarbutton-active-boxshadow: light-dark(0 1px 1px var(--lwt-toolbarbutton-active-background,
var(--toolbarbutton-default-active-boxshadow)) inset,
none);
--toolbarbutton-checked-background: light-dark(var(--lwt-toolbarbutton-hover-background,
rgba(200, 200, 200, .5)),
rgba(0, 0, 0, .25));
--toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, var(--selected-item-color));
--toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent);
--toolbar-field-color: var(--layout-color-1);
--toolbar-field-background-color: var(--layout-background-1);
--toolbar-field-border-color: var(--layout-border-1);
--toolbar-field-focus-border-color: var(--selected-item-color);
--toolbar-field-highlight: var(--selected-item-color);
--toolbar-field-highlight-color: var(--selected-item-text-color);
--item-focus-selected-border-color: light-dark(#0060df, #bebebf);
--default: light-dark(#4f526d, #dcdcdc);
--primary: light-dark(#0a84ff, #45b1ff);
--select-focus-text-color: var(--selected-item-text-color);
--select-focus-background-color: var(--selected-item-color);
/* Wrapper for toolkit variables */
--button-primary-bgcolor: var(--button-primary-background-color);
--button-primary-hover-bgcolor: var(--button-primary-hover-background-color);
--button-primary-active-bgcolor: var(--button-primary-active-background-color);
--button-primary-color: var(--button-primary-text-color);
--tabline-color: var(--selected-item-color);
/* LW-themes enabled */
&[lwtheme] {
color: var(--lwt-text-color);
--autocomplete-popup-url-color: light-dark(hsl(210, 77%, 47%), #0a84ff);
--button-background: #d2d2d3;
--button-background-hover: #c2c2c3;
--button-background-active: #b2b2b3;
--panel-separator-color: light-dark(hsla(210, 4%, 10%, 0.14), rgba(249, 249, 250, 0.1));
--search-bar-color: var(--toolbar-field-focus-color);
--search-bar-background: var(--toolbar-field-background-color);
--search-bar-border-color: var(--toolbar-field-border-color);
--search-bar-focus-background: var(--toolbar-field-focus-background-color);
--toolbar-color: var(--lwt-text-color, inherit);
--toolbar-bgcolor: rgba(255, 255, 255, 0.4);
--toolbar-field-border-color: hsla(240, 5%, 5%, 0.25);
--toolbarbutton-icon-fill-opacity: 1;
--tabline-color: var(--lwt-tab-line-color, currentColor);
&:not([lwt-tree]) {
--search-bar-border-color: color-mix(in srgb, currentColor 50%, transparent);
}
}
&[lwt-tree] {
--select-focus-text-color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
--new-focused-folder-color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
--row-grouped-header-bg-color: hsla(0, 0%, 50%, 0.15);
--row-grouped-header-bg-color-selected: light-dark(var(--sidebar-highlight-background-color,
hsla(0, 0%, 80%, 0.6)),
var(--sidebar-highlight-background-color,
rgba(249, 249, 250, 0.3)));
}
}
@media (prefers-color-scheme: dark) {
:root {
--lwt-accent-color: rgb(24, 24, 26);
}
:root[lwtheme]:not([lwt-tree]) {
--button-background-color: var(--layout-background-3);
--button-hover-background-color: var(--layout-background-4);
--button-active-background-color: var(--layout-background-2);
--button-link-text-color: var(--color-blue-40);
--button-link-active-text-color: var(--color-blue-50);
--arrowpanel-border-color: #52525e;
--default: #dcdcdc;
--primary: var(--color-blue-40);
}
}
/* Special High contrast setting */
@media (prefers-contrast) {
:root:not([lwtheme]) {
--button-color: ButtonText;
--button-background-color: ButtonFace;
--button-border-color: ButtonText;
--button-hover-text-color: SelectedItemText;
--button-hover-background-color: SelectedItem;
--button-active-background-color: SelectedItem;
--button-primary-background-color: SelectedItem;
--button-primary-hover-background-color: SelectedItem;
--button-primary-active-background-color: SelectedItem;
--button-primary-text-color: SelectedItemText;
--button-primary-border-color: SelectedItem;
--button-primary-hover-border-color: -moz-DialogText;
--button-link-text-color: LinkText;
--button-link-active-text-color: ActiveText;
--button-pressed-shadow: none;
--search-field-placeholder: GrayText;
--selected-item-color: SelectedItem;
--selected-item-text-color: SelectedItemText;
--toolbar-button-hover-background-color: SelectedItem;
--toolbar-button-hover-border-color: SelectedItem;
--toolbar-button-hover-checked-color: SelectedItem;
--toolbar-button-active-background-color: SelectedItem;
--toolbar-button-active-border-color: SelectedItemText;
--toolbar-field-background-color: Field;
--toolbar-field-color: FieldText;
--toolbar-field-border-color: ThreeDShadow;
--tabline-color: SelectedItem;
}
}
@media not (prefers-contrast) {
:root:not([lwtheme]) {
--buttons-secondary-bgcolor: rgb(240, 240, 244);
--buttons-secondary-hover-bgcolor: rgb(224, 224, 230);
--buttons-secondary-active-bgcolor: rgb(207, 207, 216);
--buttons-secondary-color: rgb(21, 20, 26);
--arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent);
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent);
--arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent);
--error-text-color: #c50042;
}
}
/* DPI variations */
@media (min-resolution: 1.5dppx) {
:root {
--tabs-tabbar-border-size: 0.5px;
}
}
@media (min-resolution: 3dppx) {
:root {
--tabs-tabbar-border-size: 0.33px;
}
}
/* UI Density customization */
:root[uidensity="compact"] {
--tab-min-height: 30px;
--button-margin: 3px;
--button-padding: 3px;
--button-pressed-indicator-padding: 9px;
}
:root[uidensity="touch"] {
--tab-min-height: 39px;
--button-pressed-indicator-padding: 3px;
}