mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-14 00:03:56 +02:00
145 lines
6.7 KiB
CSS
145 lines
6.7 KiB
CSS
|
|
/* Here, we contain all the theme related variables, for example theme
|
|
* colors, border radius, etc.
|
|
* We have `--zen-border-radius` and `--zen-primary-color` as variables.
|
|
*/
|
|
|
|
:host(:is(.anonymous-content-host, notification-message)),
|
|
:root,
|
|
.zenLooksAndFeelColorOption {
|
|
|
|
/** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
|
|
* in the preferences page.
|
|
*/
|
|
|
|
/* Default values */
|
|
--zen-border-radius: 7px;
|
|
--zen-primary-color: #4a90e2;
|
|
|
|
/** Zen colors are generated automatically from the primary color */
|
|
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
|
|
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, white 60%);
|
|
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 7%, white 93%);
|
|
|
|
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
|
|
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
|
|
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 90%, black 10%);
|
|
|
|
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, white 80%);
|
|
|
|
--zen-dialog-background: var(--zen-colors-tertiary);
|
|
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, #f1f1f1 92%);
|
|
|
|
--zen-secondary-btn-color: var(--zen-colors-primary-foreground);
|
|
|
|
--in-content-primary-button-background: light-dark(
|
|
color-mix(in srgb, var(--zen-primary-color) 35%, black 65%),
|
|
color-mix(in srgb, var(--zen-primary-color) 35%, white 65%)
|
|
) !important;
|
|
--in-content-primary-button-background-hover: light-dark(
|
|
color-mix(in srgb, var(--zen-primary-color) 40%, black 60%),
|
|
color-mix(in srgb, var(--zen-primary-color) 40%, white 60%)
|
|
) !important;
|
|
--in-content-primary-button-background-active: var(--zen-colors-hover-bg) !important;
|
|
--in-content-primary-button-text-color: light-dark(white, black) !important;
|
|
--in-content-primary-button-border-color: transparent !important;
|
|
--in-content-primary-button-border-hover: transparent !important;
|
|
--in-content-primary-button-border-active: var(--zen-colors-border) !important;
|
|
|
|
--in-content-accent-color: var(--zen-colors-primary) !important;
|
|
|
|
/* This is like the secondary button */
|
|
--in-content-button-background: light-dark(
|
|
color-mix(in srgb, var(--zen-primary-color) 20%, transparent 80%),
|
|
color-mix(in srgb, var(--zen-primary-color) 10%, transparent 90%)
|
|
) !important;
|
|
--in-content-button-background-hover: light-dark(
|
|
color-mix(in srgb, var(--zen-primary-color) 25%, transparent 75%),
|
|
color-mix(in srgb, var(--zen-primary-color) 15%, transparent 85%)
|
|
) !important;
|
|
--button-bgcolor: var(--in-content-button-background) !important;
|
|
--button-hover-bgcolor: var(--in-content-button-background-hover) !important;
|
|
--focus-outline-color: var(--button-bgcolor) !important;
|
|
--in-content-button-text-color: var(--zen-secondary-btn-color) !important;
|
|
|
|
--toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
|
|
|
|
--button-primary-bgcolor: var(--in-content-primary-button-background) !important;
|
|
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
|
|
--button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important;
|
|
--button-primary-color: var(--in-content-primary-button-text-color) !important;
|
|
|
|
--in-content-page-background: var(--zen-colors-tertiary) !important;
|
|
--zen-in-content-dialog-background: var(--zen-colors-tertiary);
|
|
|
|
--zen-button-border-radius: 7px;
|
|
--zen-button-padding: .6rem 1.2rem;
|
|
|
|
/* Other colors */
|
|
--urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
|
|
--toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
|
|
--zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
|
|
|
|
/* Constants */
|
|
--zen-element-separation: .5rem;
|
|
|
|
/* XUL */
|
|
--zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
|
|
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
|
|
|
|
--zen-appcontent-border: 1px solid var(--zen-colors-border);
|
|
--zen-panel-radius: var(--zen-border-radius);
|
|
|
|
--toolbarbutton-border-radius: 6px;
|
|
|
|
--fp-contextmenu-border-radius: 8px;
|
|
--fp-contextmenu-padding: calc(4px - var(--fp-contextmenu-menuitem-border-width)) 0;
|
|
--fp-contextmenu-menuitem-border-radius: calc(4px + var(--fp-contextmenu-menuitem-border-width));
|
|
--fp-contextmenu-menuitem-padding-block: 6px;
|
|
--fp-contextmenu-menuitem-padding-inline: 10px;
|
|
--fp-contextmenu-menuitem-border-width: 2px;
|
|
--fp-contextmenu-menuicon-margin-inline: 12px;
|
|
--fp-contextmenu-menuitem-margin-inline: calc(4px - var(--fp-contextmenu-menuitem-border-width));
|
|
--fp-contextmenu-menuitem-margin-block: 0px;
|
|
--fp-contextmenu-menuitem-margin: var(--fp-contextmenu-menuitem-margin-block) var(--fp-contextmenu-menuitem-margin-inline);
|
|
--fp-contextmenu-separator-vertical: calc(4px - var(--fp-contextmenu-menuitem-border-width));
|
|
--fp-contextmenu-separator-horizontal: 0;
|
|
--fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
|
|
--toolbar-bgcolor: transparent;
|
|
|
|
--input-bgcolor: var(--zen-colors-tertiary) !important;
|
|
--input-border-color: var(--zen-input-border-color) !important;
|
|
--zen-themed-toolbar-bg: var(--zen-colors-tertiary);
|
|
|
|
--toolbar-field-background-color: var(--zen-colors-input-bg) !important;
|
|
--arrowpanel-background: var(--zen-dialog-background) !important;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:host(:is(.anonymous-content-host, notification-message)),
|
|
:root {
|
|
--zen-in-content-dialog-background: rgb(28, 28, 32);
|
|
|
|
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
|
|
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, black 60%);
|
|
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 15%, black 85%);
|
|
|
|
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, black 10%);
|
|
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
|
|
|
|
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, black 80%);
|
|
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%);
|
|
|
|
--zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%);
|
|
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, black 92%);
|
|
|
|
--zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%);
|
|
}
|
|
}
|
|
|
|
@media not (-moz-bool-pref: "zen.theme.toolbar-themed") {
|
|
:root {
|
|
--toolbar-bgcolor: light-dark(white, #1b1b1b) !important;
|
|
--zen-themed-toolbar-bg: var(--toolbar-bgcolor);
|
|
}
|
|
}
|