Add theme: Compact URL and Sidebar

This commit is contained in:
Pjhochman 2025-03-22 22:43:59 +00:00 committed by GitHub
parent 2a9820d3e9
commit 9cb3533d44
5 changed files with 251 additions and 0 deletions

View file

@ -0,0 +1,185 @@
/* Custom Zen UI Tweaks */
/* Common values to simplify repeated values */
:root {
--zen-dark-bg: rgba(31, 31, 31, var(--mod-zen_custom-opacity));
--zen-light-text: rgba(242, 239, 228, 1);
--zen-highlight: rgba(31, 31, 31, 1);
--zen-accent: rgba(247, 111, 83, 1);
--border-radius: var(--mod-zen_custom-border_radius);
}
* {
--urlbarView-highlight-background: var(--zen-light-text) !important;
--toolbar-field-focus-color: var(--zen-light-text) !important;
--urlbarView-highlight-color: var(--zen-highlight) !important;
--toolbar-field-color: var(--zen-light-text) !important;
--zen-branding-bg-reverse: transparent !important;
}
/* Hide the URL path from the URL bar view */
span.urlbarView-url {
display: none !important;
}
/* Apply text and background color when hovering over url rows */
.urlbarView-row:hover {
background-color: var(--zen-light-text) !important;
color: var(--zen-dark-bg) !important;
}
/* Hide hyphen and 'search on Google' from the URL bar view */
span.urlbarView-action,
span.urlbarView-title-separator {
display: none !important;
}
/* Remove close buttons on sidebar tab icons for a cleaner look */
.tab-close-button {
display: none !important;
}
/* Hide the "Extension" label in the URL bar to remove clutter */
box#identity-icon-box {
display: none !important;
}
/* Hide navbar container and reduce its width to prevent triggering navbar visibility on side hover */
#zen-appcontent-navbar-container {
box-shadow: unset !important;
background: transparent !important;
border: unset !important;
position: absolute !important;
width: 45% !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10 !important;
}
/* Increase negative variable value to fully hide navbar */
@-moz-document url("chrome://browser/content/browser.xhtml") {
:root[zen-compact-mode="true"]:not([customizing]):not([inDOMFullscreen="true"]):not([zen-single-toolbar="true"]) #zen-appcontent-navbar-container {
--zen-element-separation: -15px !important;
}
}
/* Customize the toolbar appearance */
toolbar#nav-bar {
width: 100%;
top: 1.8vh !important;
background: var(--zen-dark-bg) !important;
box-shadow: var(--zen-big-shadow) !important;
border: 0 solid var(--zen-dark-bg) !important;
border-radius: var(--border-radius) !important;
}
/* Center the URL bar */
#urlbar {
left: 50% !important;
transform: translateX(-50%) !important;
}
/* Placeholder text color for search bar input */
.urlbar-input::placeholder,
.searchbar-textbox::placeholder {
color: var(--zen-light-text) !important;
}
/* Improve responsiveness for the URL bar */
#urlbar-container {
#nav-bar:is([downloadsbuttonshown], [unifiedextensionsbuttonshown]) & {
width: 0 !important;
}
}
/* URL bar background before typing */
#urlbar:not([breakout-extend="true"]) #urlbar-background {
transition: unset !important;
background: transparent !important;
}
/* URL bar background after typing */
#urlbar[breakout][breakout-extend] #urlbar-background {
background: rgba(31, 31, 31, 0.95) !important;
}
/* URL Bar text styling */
#urlbar-container {
text-align: center;
}
/* URL bar text color BEFORE entering breakout state */
#urlbar {
color: var(--zen-light-text) !important;
}
/* URL bar text color DURING breakout state (when expanded or focused) */
#urlbar[breakout][breakout-extend] {
color: var(--zen-light-text) !important;
}
/* Position side bar in the middle */
toolbox#navigator-toolbox {
justify-content: center !important;
}
/* Styling of the sidebar */
hbox#titlebar {
height: 75% !important;
background: var(--zen-dark-bg) !important;
border: unset !important;
}
/* Styling of the sidebar */
:root[zen-compact-mode="true"]:not([customizing]):not([inDOMFullscreen="true"])
#navigator-toolbox:not([animate="true"]) #titlebar {
border-radius: var(--border-radius) !important;
}
/* Sidebar tab icons styling */
vbox.tab-background {
background: transparent !important;
border-radius: var(--border-radius) !important;
}
/* Apply Zen brand color to the selected sidebar tab icon */
.tab-content {
&:is([selected], [multiselected]) {
border-left: 2px solid var(--zen-accent);
}
}
/* Adjust menu button position for centered navbar alignment */
#PanelUI-menu-button {
padding-inline-end: 0px !important;
margin-left: -5px !important;
}
/* Apply Zen brand color to the three-dot menu button */
.toolbarbutton-icon[label="Zen"] {
fill: var(--zen-accent) !important;
}
/* If kept, make starred bookmarks blend in with other icons */
#star-button[starred] {
fill-opacity: 0.4 !important;
fill: var(--toolbarbutton-icon-fill) !important;
}
/* Hide buttons for a cleaner interface */
#reader-mode-button,
#translations-button,
#identity-box,
#identity-permission-box,
#star-button-box,
#picture-in-picture-button,
#PersonalToolbar {
display: none !important;
}
/* Reduce width to prevent customization palette container from collapsing */
#customization-panel-container {
width: 20% !important;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View file

@ -0,0 +1,14 @@
[
{
"property": "mod.zen_custom.opacity",
"label": "1",
"type": "checkbox",
"disabledOn": []
},
{
"property": "mod.zen_custom.border_radius",
"label": "8px",
"type": "checkbox",
"disabledOn": []
}
]

View file

@ -0,0 +1,37 @@
# Zen UI: Compact URL + Sidebar
A minimalist UI mod that applies the official Zen color palette, shrinks and centers the URL bar, vertically compresses the sidebar, and removes visual clutter for a cleaner, more focused browsing experience.
---
## 🌟 Features
- 🔳 **Floating, compact URL bar**
- 🧱 **Vertically centered, compact sidebar**
- 🎨 **Applies the official Zen color palette**
- ✂️ **Removes unnecessary labels and buttons for a cleaner interface**
- 🖱️ **Sidebar and toolbar appear on hover for quick access**
- 🚀 **Fully compatible with Zen Browser's Compact Mode**
---
## 🛠 Preferences Setup
This mod **automatically applies** the recommended settings via JSON preferences, so you **dont need to manually configure anything**.
{
"zen.urlbar.behavior": "float",
"zen.view.compact": true,
"zen.view.compact.show-sidebar-and-toolbar-on-hover": true,
"zen.view.compact.hide-toolbar": true,
"zen.view.compact.hide-tabbar": true,
"zen.view.compact.animate-sidebar": true,
"zen.view.compact.toolbar-flash-popup": true
}
If certain features dont work as expected, check your Zen Browser settings under **"Compact Mode" and "Zen URL Bar"** to ensure they align with your preferences.
---
## 💻 Toolbar Customization (macOS & Windo

View file

@ -0,0 +1,15 @@
{
"id": "d866705e-5c5b-4f5b-8637-9d728109bca3",
"name": "Compact URL and Sidebar",
"description": "A compact UI mod with a smaller, centered URL bar, a vertically centered sidebar, and Zen palette.",
"homepage": "https://github.com/pjhochman/zen-ui-compact",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d866705e-5c5b-4f5b-8637-9d728109bca3/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d866705e-5c5b-4f5b-8637-9d728109bca3/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d866705e-5c5b-4f5b-8637-9d728109bca3/image.png",
"author": "Pjhochman",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-22",
"updatedAt": "2025-03-22",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d866705e-5c5b-4f5b-8637-9d728109bca3/preferences.json"
}