rope/nixos
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Zen sidebar splitter and content area background colors

Browse source 
Color the #zen-sidebar-splitter to match the sidebar instead of
showing a grey strip. Also theme content area containers and
window frame elements. Clean up redundant CSS rules.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ediblerope 2026-04-14 11:00:27 +01:00
parent a706438b08
commit 73955a158d
1 changed files with 42 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

45
templates/zen-userChrome.css
View file

@ -1,6 +1,7 @@
/* Wallpaper-based colors generated by matugen */ /* Wallpaper-based colors generated by matugen */
/* Override Zen's JS-applied gradient backgrounds directly on elements */ /* Override Zen's JS-applied gradient backgrounds directly on elements */
#zen-browser-background,
#zen-browser-background::after, #zen-browser-background::after,
#zen-browser-background::before { #zen-browser-background::before {
background: {{colors.surface.default.hex}} !important; background: {{colors.surface.default.hex}} !important;
@ -16,6 +17,8 @@
/* Sidebar and tab strip */ /* Sidebar and tab strip */
#navigator-toolbox { #navigator-toolbox {
background-color: {{colors.surface_container_low.default.hex}} !important; background-color: {{colors.surface_container_low.default.hex}} !important;
border: none !important;
outline: none !important;
} }
#TabsToolbar, #tabbrowser-tabs { #TabsToolbar, #tabbrowser-tabs {
@ -26,7 +29,7 @@
background-color: {{colors.surface_container_high.default.hex}} !important; background-color: {{colors.surface_container_high.default.hex}} !important;
} }
/* URL bar — override Zen's color-mix background */ /* URL bar */
#urlbar .urlbar-background, #urlbar .urlbar-background,
#urlbar-background { #urlbar-background {
background-color: {{colors.surface_container.default.hex}} !important; background-color: {{colors.surface_container.default.hex}} !important;
@ -40,7 +43,7 @@
color: {{colors.on_surface.default.hex}} !important; color: {{colors.on_surface.default.hex}} !important;
} }
/* Nav bar and toolbar — match the toolbar background */ /* Nav bar and toolbar */
#nav-bar { #nav-bar {
background-color: transparent !important; background-color: transparent !important;
} }
@ -57,8 +60,44 @@
color: {{colors.on_surface.default.hex}} !important; color: {{colors.on_surface.default.hex}} !important;
} }
/* New tab page background */ /* 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 { :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; --newtab-background-color: {{colors.surface.default.hex}} !important;
--lwt-sidebar-background-color: {{colors.surface_container_low.default.hex}} !important; --lwt-sidebar-background-color: {{colors.surface_container_low.default.hex}} !important;
--lwt-sidebar-text-color: {{colors.on_surface.default.hex}} !important; --lwt-sidebar-text-color: {{colors.on_surface.default.hex}} !important;