145 lines
5.6 KiB
CSS
145 lines
5.6 KiB
CSS
/* Wallpaper-based colors substituted by stylix */
|
|
|
|
/* Override Zen's JS-applied gradient backgrounds directly on elements */
|
|
#zen-browser-background,
|
|
#zen-browser-background::after,
|
|
#zen-browser-background::before {
|
|
background: {{colors.surface.default.hex}} !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
#zen-toolbar-background::after,
|
|
#zen-toolbar-background::before {
|
|
background: {{colors.surface_container_low.default.hex}} !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Sidebar and tab strip */
|
|
#navigator-toolbox {
|
|
background-color: {{colors.surface_container_low.default.hex}} !important;
|
|
border: none !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
#TabsToolbar, #tabbrowser-tabs {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.tab-background:is([selected], [multiselected]) {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
}
|
|
|
|
/* URL bar */
|
|
#urlbar .urlbar-background,
|
|
#urlbar-background {
|
|
background-color: {{colors.surface_container.default.hex}} !important;
|
|
}
|
|
|
|
#urlbar[focused="true"] .urlbar-background {
|
|
background-color: {{colors.surface_container_high.default.hex}} !important;
|
|
}
|
|
|
|
#urlbar-input {
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Nav bar and toolbar */
|
|
#nav-bar {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Sidebar text and icons */
|
|
#sidebar-box, #sidebar {
|
|
background-color: {{colors.surface_container_low.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Popup panels (menus, extensions etc). Not the middle-click autoscroll
|
|
popup: it is a panel too, but only its round content part is drawn — a
|
|
background on the panel itself shows up as a square behind the circle. */
|
|
.panel-arrowcontent, panel:not(.autoscroller), #appMenu-popup {
|
|
background-color: {{colors.surface_container.default.hex}} !important;
|
|
color: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Said outright as well, so it also beats the old `panel` rule in a
|
|
userChrome.css parsed before this change. Gecko picks the popup's widget
|
|
transparency from this background when the popup is first shown and the
|
|
autoscroller is reused for the session, so a stale one needs a Zen restart. */
|
|
#autoscroller {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Content area containers */
|
|
#browser, #appcontent, #tabbrowser-tabbox,
|
|
#tabbrowser-tabpanels, #zen-appcontent-wrapper,
|
|
#appcontent-tabpanels, #zen-tabbox-wrapper {
|
|
background-color: {{colors.surface_container_low.default.hex}} !important;
|
|
}
|
|
|
|
/* Sidebar splitter — blend with sidebar, show accent on hover */
|
|
#zen-sidebar-splitter {
|
|
background: {{colors.surface_container_low.default.hex}} !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
#zen-sidebar-splitter:hover {
|
|
background: {{colors.primary.default.hex}} !important;
|
|
}
|
|
|
|
/* Titlebar / window controls */
|
|
#titlebar, #zen-titlebar, .titlebar-buttonbox-container,
|
|
#zen-appcontent-navbar-container, .browser-toolbar,
|
|
#PersonalToolbar {
|
|
background-color: {{colors.surface_container_low.default.hex}} !important;
|
|
}
|
|
|
|
#main-window, #main-window[tabsintitlebar] {
|
|
background-color: {{colors.surface_container_low.default.hex}} !important;
|
|
-moz-appearance: none !important;
|
|
border: none !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* CSS variables */
|
|
:root {
|
|
--zen-themed-toolbar-bg: {{colors.surface_container_low.default.hex}} !important;
|
|
--zen-main-browser-background: {{colors.surface.default.hex}} !important;
|
|
--zen-appcontent-navbar-container-bg: {{colors.surface_container_low.default.hex}} !important;
|
|
--zen-appcontent-separator-color: {{colors.surface_container_low.default.hex}} !important;
|
|
--zen-dialog-background: {{colors.surface_container.default.hex}} !important;
|
|
--newtab-background-color: {{colors.surface.default.hex}} !important;
|
|
--lwt-sidebar-background-color: {{colors.surface_container_low.default.hex}} !important;
|
|
--lwt-sidebar-text-color: {{colors.on_surface.default.hex}} !important;
|
|
--toolbar-bgcolor: {{colors.surface_container.default.hex}} !important;
|
|
--lwt-accent-color: {{colors.surface_container.default.hex}} !important;
|
|
--lwt-text-color: {{colors.on_surface.default.hex}} !important;
|
|
--arrowpanel-background: {{colors.surface_container.default.hex}} !important;
|
|
--arrowpanel-color: {{colors.on_surface.default.hex}} !important;
|
|
--zen-primary-color: {{colors.primary.default.hex}} !important;
|
|
--zen-colors-primary: {{colors.primary_container.default.hex}} !important;
|
|
--zen-colors-secondary: {{colors.secondary_container.default.hex}} !important;
|
|
--zen-colors-tertiary: {{colors.tertiary_container.default.hex}} !important;
|
|
--zen-colors-border: {{colors.outline_variant.default.hex}} !important;
|
|
--toolbox-textcolor: {{colors.on_surface.default.hex}} !important;
|
|
}
|
|
|
|
/* Zen's whole palette is built out of light-dark(), which picks its branch
|
|
from the computed `color-scheme` — not from the colours we set below. So
|
|
the vars we override here are only half the input: everything Zen derives
|
|
from them takes the LIGHT branch unless a scheme is declared. Worst case
|
|
is the menu foreground,
|
|
|
|
--zen-colors-primary-foreground: light-dark(
|
|
var(--zen-branding-bg-reverse), // near-black
|
|
color-mix(in srgb, var(--zen-primary-color) 80%, white 20%)) // light tint
|
|
|
|
whose light branch is dark text, landing on the dark backgrounds forced
|
|
above — invisible until hover swaps in a highlight background. It still
|
|
tracks the wallpaper (the derived backgrounds move with our accent), which
|
|
is why switching themes changes how readable it is without ever fixing it.
|
|
The palette generator only ever runs `dark` (settings/theming.nix), so the
|
|
scheme is not conditional. */
|
|
:root, menupopup, panel {
|
|
color-scheme: dark !important;
|
|
}
|