diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/variables.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/variables.css | 291 |
1 files changed, 291 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/variables.css b/comm/mail/themes/shared/mail/variables.css new file mode 100644 index 0000000000..f1443d1b3e --- /dev/null +++ b/comm/mail/themes/shared/mail/variables.css @@ -0,0 +1,291 @@ +/* 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 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + + @import url("chrome://messenger/skin/layout.css"); + +/* Default variables */ + +:host, +:root { + --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(--toolbar-non-lwt-bgcolor); + --toolbar-color: var(--toolbar-non-lwt-textcolor); + --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: var(--layout-background-2); + --button-active-background-color: var(--layout-background-4); + --button-border-color: var(--layout-border-1); + --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(--color-blue-60); + --button-primary-hover-background-color: color-mix(in srgb, var(--color-blue-50) 50%, var(--color-blue-60)); + --button-primary-active-background-color: var(--color-blue-70); + --button-primary-text-color: var(--color-white); + --button-primary-border-color: var(--color-blue-80); + --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: var(--color-red-80); + --button-link-text-color: var(--color-blue-60); + --button-link-active-text-color: var(--color-blue-70); + --button-pressed-shadow: inset 0 1px 3px color-mix(in srgb, var(--color-gray-90) 30%, transparent); + --button-pressed-indicator-background-color: var(--color-blue-50); + --button-pressed-indicator-border-color: var(--color-blue-60); + --button-pressed-indicator-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + --button-pressed-indicator-padding: 6px; + --checkbox-border-color: var(--toolbar-field-border-color); + --checkbox-unchecked-bgcolor: var(--toolbar-field-background-color); + --checkbox-unchecked-hover-bgcolor: color-mix(in srgb, AccentColor 4%, var(--checkbox-unchecked-bgcolor)); + --checkbox-unchecked-active-bgcolor: var(--button-active-background-color); + --checkbox-checked-border-color: transparent; + --checkbox-checked-color: var(--button-primary-color); + --checkbox-checked-bgcolor: var(--selected-item-color); + --checkbox-checked-hover-bgcolor: color-mix(in srgb, black 10%, var(--selected-item-color)); + --checkbox-checked-active-bgcolor: color-mix(in srgb, black 20%, var(--selected-item-color)); + --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: var(--color-blue-60); + --lwt-header-image: none; + --search-field-placeholder: color-mix(in srgb, currentColor 50%, transparent); + --selected-item-color: var(--color-blue-60); + --selected-item-text-color: var(--color-white); + --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: var(--lwt-toolbarbutton-hover-background, + rgba(0, 0, 0, .05)); + --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, + rgba(0, 0, 0, .25)); + --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, + rgba(0, 0, 0, .25)); + --toolbarbutton-hover-boxshadow: none; + --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, + rgba(0, 0, 0, .1)); + --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, + rgba(0, 0, 0, .3)); + --toolbarbutton-default-active-boxshadow: rgba(0, 0, 0, .1) inset, 0 0 1px rgba(0, 0, 0, .3); + --toolbarbutton-active-boxshadow: 0 1px 1px var(--lwt-toolbarbutton-active-background, + var(--toolbarbutton-default-active-boxshadow)) inset; + --toolbarbutton-checked-background: var(--lwt-toolbarbutton-hover-background, + rgba(200, 200, 200, .5)); + --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff); + --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: AccentColor; + --toolbar-field-highlight: var(--selected-item-color); + --toolbar-field-highlight-color: var(--selected-item-text-color); + --item-focus-selected-border-color: #0060df; + --default: #4f526d; + --primary: #0a84ff; + --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); +} + +/* LW-themes enabled */ + +:root:-moz-lwtheme { + color: var(--lwt-text-color); + --button-background: #d2d2d3; + --button-background-hover: #c2c2c3; + --button-background-active: #b2b2b3; + --panel-separator-color: hsla(210, 4%, 10%, 0.14); + --toolbar-color: var(--lwt-text-color, inherit); + --toolbar-bgcolor: rgba(255, 255, 255, .4); + --toolbar-field-border-color: hsla(240, 5%, 5%, 0.25); + --toolbarbutton-icon-fill-opacity: 1; + --autocomplete-popup-url-color: hsl(210, 77%, 47%); +} + +:root[lwt-tree] { + --select-focus-background-color: var(--sidebar-highlight-background-color, var(--selected-item-color)); + --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: var(--sidebar-highlight-background-color, + hsla(0, 0%, 80%, 0.6)); +} + +/* Dark themes enabled */ + +:root[lwt-tree-brighttext] { + --default: #dcdcdc; + --primary: #45b1ff; + --item-focus-selected-border-color: #bebebf; + --row-grouped-header-bg-color-selected: var(--sidebar-highlight-background-color, + rgba(249, 249, 250, 0.3)); + --button-sidebar-bottom-hover-color: var(--color-blue-40); +} + +:root[lwt-popup-brighttext] { + --autocomplete-popup-url-color: #0a84ff; + --panel-separator-color: rgba(249, 249, 250, 0.1); +} + +@media (prefers-color-scheme: dark) { + :root { + --button-background-color: var(--layout-background-3); + --button-hover-background-color: var(--layout-background-4); + --button-border-color: var(--layout-border-2); + --button-active-background-color: var(--layout-background-2); + --button-primary-border-color: var(--color-blue-50); + --button-destructive-border-color: var(--color-red-50); + --button-link-text-color: var(--color-blue-40); + --button-link-active-text-color: var(--color-blue-50); + --button-pressed-shadow: inset 0 1px 3px color-mix(in srgb, var(--color-black) 50%, transparent); + --button-pressed-indicator-background-color: var(--color-blue-30); + --button-pressed-indicator-border-color: var(--color-blue-40); + --button-pressed-indicator-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + --lwt-accent-color: rgb(24, 24, 26); + --new-folder-color: var(--color-blue-40); + --autocomplete-popup-highlight-background: #0060df; + --selected-item-color: var(--color-blue-50); + --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, + rgba(255, 255, 255, .25)); + --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, + rgba(255, 255, 255, .5)); + --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, + rgba(255, 255, 255, .25)); + --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, + rgba(255, 255, 255, .4)); + --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, + rgba(255, 255, 255, .7)); + --toolbarbutton-active-boxshadow: none; + --toolbarbutton-checked-background: rgba(0, 0, 0, .25); + --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff); + } + + :root:not([lwt-tree]):-moz-lwtheme { + --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; + --chrome-content-separator-color: #52525e; + --item-focus-selected-border-color: #bebebf; + --default: #dcdcdc; + --primary: var(--color-blue-40); + } + + /* Overwrite the toolkit default theme. */ + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--color-gray-70) !important; + --lwt-tab-line-color: var(--color-blue-50) !important; + --sidebar-background-color: var(--layout-background-1) !important; + --sidebar-highlight-background-color: var(--color-blue-50); + --sidebar-border-color: var(--layout-border-0) !important; + --toolbar-field-border-color: var(--color-gray-50) !important; + --button-link-text-color: var(--color-blue-40); + --button-link-active-text-color: var(--color-blue-50); + } +} + +/* Special High contrast setting */ + +@media (prefers-contrast) { + :root:not(:-moz-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; + --button-pressed-indicator-background-color: SelectedItem; + --button-pressed-indicator-border-color: SelectedItem; + --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; + } +} + +@media not (prefers-contrast) { + :root:not(:-moz-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; +} |