Last active
November 5, 2025 15:54
-
-
Save eddiesigner/a30c7190265573bbcfe5d0dc666937f3 to your computer and use it in GitHub Desktop.
Zen Browser Customizations
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Zen Background */ | |
| #zen-browser-background { | |
| @media -moz-pref("zen.theme.gradient") { | |
| @media not (-moz-system-dark-theme) { | |
| &::after { | |
| background-color: oklch(from var(--zen-main-browser-background) calc(l * 1.5) c h) !important; | |
| } | |
| } | |
| } | |
| @media -moz-pref("zen.theme.gradient") { | |
| @media (-moz-system-dark-theme) { | |
| &::after { | |
| background-color: oklch(from var(--zen-main-browser-background) calc(l / 1.25) c h) !important; | |
| } | |
| } | |
| } | |
| } | |
| /* Zen URL Bar */ | |
| #urlbar:not([breakout-extend="true"]) { | |
| :root:not([supress-primary-adjustment]) & #urlbar-background { | |
| opacity: 0.6 !important; | |
| } | |
| } | |
| /* Zen Essentials */ | |
| #zen-essentials .tab-background { | |
| opacity: 0.6 !important; | |
| } | |
| .zen-essentials-container > .tabbrowser-tab, #zen-welcome-initial-essentials-browser-sidebar-essentials .tabbrowser-tab { | |
| @media -moz-pref("zen.theme.essentials-favicon-bg") { | |
| &[visuallyselected] > .tab-stack > .tab-background { | |
| opacity: 0.8 !important; | |
| &::before { | |
| background: light-dark(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4)) !important; | |
| } | |
| } | |
| } | |
| } | |
| #tabbrowser-tabs { | |
| & .tabbrowser-tab { | |
| &[zen-essential="true"] .tabbrowser-tab { | |
| & .tab-background { | |
| opacity: 1 !important; | |
| } | |
| } | |
| } | |
| } | |
| /* Zen Folders */ | |
| zen-folder { | |
| & > .tab-group-label-container { | |
| & > label { | |
| font-weight: 500 !important; | |
| } | |
| } | |
| } | |
| /* Zen Tabs */ | |
| .tab-icon-overlay { | |
| #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]), &:not([crashed]) { | |
| &:is([soundplaying], [muted], [activemedia-blocked]) { | |
| fill: light-dark(black, white) !important; | |
| background-color: light-dark(hsl(0 0 100), hsl(0 0 30)) !important; | |
| box-shadow: var(--tab-selected-shadow); | |
| } | |
| } | |
| } | |
| #tabs-newtab-button { | |
| font-size: 14px !important; | |
| font-weight: 400 !important; | |
| opacity: 0.7 !important; | |
| & .toolbarbutton-text { | |
| font-weight: 500 !important; | |
| } | |
| } | |
| /* Zen Glance */ | |
| .browserSidebarContainer.zen-glance-overlay { | |
| & .browserContainer { | |
| & .browserStack { | |
| clip-path: none !important; | |
| border-radius: 8px !important; | |
| box-shadow: 0 0 8px 0px light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75)) !important; | |
| } | |
| } | |
| } | |
| .zen-glance-sidebar-container { | |
| & toolbarbutton { | |
| background: color-mix( in srgb, light-dark(rgb(256, 256, 256), rgb(24, 24, 24)) 96%, var(--zen-primary-color) ) !important; | |
| } | |
| } | |
| /* Zen Swipe Navigation */ | |
| .swipe-nav-icon { | |
| width: 128px !important; | |
| height: 128px !important; | |
| margin-inline-start: -34px !important; | |
| } | |
| .swipe-nav-icon-circle { | |
| fill: rgba(0, 0, 0, 0.8) !important; | |
| } | |
| .swipe-nav-icon-circle-outline { | |
| fill: none !important; | |
| } | |
| .swipe-nav-icon-arrow { | |
| fill: white !important; | |
| } | |
| /* Zen Ctrl Tab Panel */ | |
| #ctrlTab-panel { | |
| --panel-border-radius: 24px !important; | |
| --panel-background: light-dark(rgb(253, 253, 254, 1), rgb(24, 24, 24, 1)) !important; | |
| --panel-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0 0 1px hsla(0, 0%, 0%, 0.05), 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09) !important; | |
| background-color: unset !important; | |
| padding: 32px calc(12px * var(--tile-counter)) !important; | |
| margin-top: -32px !important; | |
| --tile-counter: 0; | |
| &:has(.ctrlTab-preview:nth-child(1):not([hidden])) { | |
| --tile-counter: 1; | |
| } | |
| &:has(.ctrlTab-preview:nth-child(2):not([hidden])) { | |
| --tile-counter: 2; | |
| } | |
| &:has(.ctrlTab-preview:nth-child(3):not([hidden])) { | |
| --tile-counter: 3; | |
| } | |
| &:has(.ctrlTab-preview:nth-child(4):not([hidden])) { | |
| --tile-counter: 4; | |
| } | |
| &:has(.ctrlTab-preview:nth-child(5):not([hidden])) { | |
| --tile-counter: 5; | |
| } | |
| &:has(.ctrlTab-preview:nth-child(6):not([hidden])) { | |
| --tile-counter: 6; | |
| } | |
| &:has(.ctrlTab-preview:nth-child(7):not([hidden])) { | |
| --tile-counter: 7; | |
| } | |
| } | |
| #ctrlTab-previews { | |
| zoom: 0.9 !important; | |
| } | |
| .ctrlTab-preview { | |
| &:focus { | |
| .ctrlTab-preview-inner { | |
| background: oklch(from var(--zen-colors-hover-bg) calc(l / 1.25) c h) !important; | |
| } | |
| .ctrlTab-label { | |
| color: rgb(249, 249, 250) !important; | |
| } | |
| } | |
| } | |
| .ctrlTab-preview-inner, #ctrlTab-showAll { | |
| border-radius: 8px !important; | |
| padding: 12px !important; | |
| border: none !important; | |
| } | |
| .ctrlTab-canvas { | |
| border-radius: 6px !important; | |
| overflow: hidden !important; | |
| margin-bottom: 16px !important; | |
| box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0 0 1px hsla(0, 0%, 0%, 0.05), 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09) !important; | |
| } | |
| .ctrlTab-favicon-container { | |
| justify-content: flex-start !important; | |
| } | |
| .ctrlTab-favicon-container image { | |
| margin-inline-end: 0 !important; | |
| margin-top: 0 !important; | |
| margin-bottom: 0 !important; | |
| width: 16px !important; | |
| height: 16px !important; | |
| background-color: transparent !important; | |
| padding: 0 !important; | |
| border-radius: 0 !important; | |
| box-shadow: none !important; | |
| } | |
| .ctrlTab-label { | |
| padding-inline: 20px !important; | |
| margin-top: -16px !important; | |
| justify-content: flex-start !important; | |
| text-shadow: none !important; | |
| font-size: 13px !important; | |
| color: light-dark(rgb(21, 20, 26), rgb(249, 249, 250)) !important; | |
| } | |
| /* Zen Indicators */ | |
| .zen-current-workspace-indicator { | |
| & .zen-current-workspace-indicator-name { | |
| font-weight: 600 !important; | |
| opacity: 0.5 !important; | |
| } | |
| & .zen-current-workspace-indicator-icon { | |
| fill: var(--zen-primary-color) !important; | |
| fill-opacity: 1 !important; | |
| } | |
| } | |
| #downloads-indicator-anchor { | |
| min-width: 18px !important; | |
| } | |
| #zen-create-new-button .toolbarbutton-icon { | |
| width: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important; | |
| height: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important; | |
| } | |
| #zen-create-new-button, | |
| #downloads-button .toolbarbutton-badge-stack { | |
| border-radius: 8px !important; | |
| } | |
| #zen-workspaces-button { | |
| & toolbarbutton { | |
| width: 30px !important; | |
| min-height: 28px !important; | |
| border-radius: 8px !important; | |
| fill-opacity: 1 !important; | |
| &[active="true"] { | |
| .zen-workspace-icon { | |
| color: var(--zen-primary-color) !important; | |
| } | |
| } | |
| & .zen-workspace-icon { | |
| font-size: 12px !important; | |
| } | |
| } | |
| } | |
| #navigator-toolbox { | |
| & #zen-workspaces-button { | |
| gap: 1ch !important; | |
| } | |
| } | |
| #zen-workspaces-button { | |
| & toolbarbutton { | |
| & .zen-workspace-icon { | |
| margin-block: 0 !important; | |
| } | |
| } | |
| } | |
| /* Zen Panel UI */ | |
| #PanelUI-menu-button .toolbarbutton-badge-stack { | |
| padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important; | |
| } | |
| /* Zen Toast */ | |
| #zen-toast-container { | |
| & .zen-toast { | |
| color-scheme: light dark !important; | |
| color: light-dark(rgb(253, 253, 254), rgb(51, 51, 51)) !important; | |
| background: var(--zen-primary-color) !important; | |
| & button { | |
| color-scheme: light dark !important; | |
| padding: 0 6px 0 8px !important; | |
| fill: rgb(51, 51, 51) !important; | |
| background-color: rgb(253, 253, 254) !important; | |
| } | |
| } | |
| } | |
| /* Zen Buttons */ | |
| /*#reload-button .toolbarbutton-icon { | |
| width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; | |
| height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important; | |
| }*/ | |
| #nav-bar-overflow-button .toolbarbutton-icon { | |
| width: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important; | |
| height: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important; | |
| } | |
| /* Zen Sidebar Splitter */ | |
| #zen-sidebar-splitter { | |
| top: var(--zen-element-separation) !important;; | |
| height: calc(100% - var(--zen-element-separation) * 2) !important;; | |
| } | |
| /* Zen Media COntrols */ | |
| #zen-media-controls-toolbar { | |
| &:not([hidden]) { | |
| color-scheme: light dark; | |
| } | |
| } | |
| /* Zen Sidebar Dark Mode */ | |
| zen-workspace { | |
| @media (-moz-system-dark-theme) { | |
| --toolbox-textcolor: rgba(255,255,255,0.8) !important; | |
| } | |
| } | |
| zen-folder { | |
| & > .tab-group-label-container { | |
| & > label { | |
| @media (-moz-system-dark-theme) { | |
| color: rgba(255,255,255,0.8) !important; | |
| } | |
| } | |
| } | |
| } | |
| .browser-toolbar { | |
| @media not -moz-pref("sidebar.verticalTabs") { | |
| &:not(.browser-titlebar) { | |
| @media (-moz-system-dark-theme) { | |
| color: rgba(255,255,255,0.8) !important; | |
| } | |
| } | |
| } | |
| } | |
| .urlbar { | |
| @media (-moz-system-dark-theme) { | |
| color: rgba(255,255,255,0.8) !important; | |
| } | |
| } | |
| .zen-browser-generic-background { | |
| @media -moz-pref("zen.theme.gradient") { | |
| &::after { | |
| @media (-moz-system-dark-theme) { | |
| opacity: 0.2 !important; | |
| } | |
| } | |
| } | |
| } | |
| @media (-moz-platform: macos) { | |
| @media -moz-pref("zen.widget.mac.mono-window-controls") { | |
| .titlebar-buttonbox-container { | |
| &:not([zen-has-hover="true"]) > .titlebar-buttonbox { | |
| opacity: 1 !important; | |
| } | |
| } | |
| } | |
| } | |
| .pinned-tabs-container-separator { | |
| & toolbarseparator { | |
| @media (-moz-system-dark-theme) { | |
| background: rgba(255, 255, 255, 0.1) !important; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment