mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
Merge 150fc62095
into b36258a8c7
This commit is contained in:
commit
cd9c80e19c
5 changed files with 262 additions and 0 deletions
197
themes/1ef7c171-5993-4832-afa6-4e103d949775/chrome.css
Normal file
197
themes/1ef7c171-5993-4832-afa6-4e103d949775/chrome.css
Normal file
|
@ -0,0 +1,197 @@
|
||||||
|
|
||||||
|
/* ─────────────── Zen UI Tweaks ─────────────── */
|
||||||
|
|
||||||
|
/* Define shared design tokens for consistency and reuse */
|
||||||
|
:root {
|
||||||
|
--zen-dark-bg: rgba(31, 31, 31, 1);
|
||||||
|
/* Dark background used across UI */
|
||||||
|
--zen-light-text: rgba(242, 239, 228, 1);
|
||||||
|
/* Light foreground text color */
|
||||||
|
--zen-highlight: rgba(31, 31, 31, 1);
|
||||||
|
/* Highlight color (same as dark background) */
|
||||||
|
--zen-accent: rgba(247, 111, 83, 1);
|
||||||
|
/* Accent color for emphasis (e.g. borders) */
|
||||||
|
--border-radius: 8px;
|
||||||
|
/* Rounded corner radius for UI elements */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override global Firefox variables for Zen theme */
|
||||||
|
* {
|
||||||
|
--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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apply Zen UI styles only in normal browsing mode (not customizing, full-screen, etc.) */
|
||||||
|
:root[zen-compact-mode="true"]:not([customizing]):not([inDOMFullscreen="true"]):not([zen-single-toolbar="true"]) {
|
||||||
|
|
||||||
|
/* ─── URL Bar View Tweaks ─── */
|
||||||
|
|
||||||
|
/* Hide URL path from suggestion rows */
|
||||||
|
span.urlbarView-url {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Highlight row background and text color on hover */
|
||||||
|
.urlbarView-row:hover {
|
||||||
|
background-color: var(--zen-light-text) !important;
|
||||||
|
color: var(--zen-dark-bg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove separator and action labels like “- Search with Google” */
|
||||||
|
span.urlbarView-action,
|
||||||
|
span.urlbarView-title-separator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Tab Strip and Sidebar Cleanups ─── */
|
||||||
|
|
||||||
|
/* Remove tab close buttons for a minimal tab strip */
|
||||||
|
.tab-close-button {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the “Extension” label in the URL bar */
|
||||||
|
box#identity-icon-box {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Navbar Styling and Layout ─── */
|
||||||
|
|
||||||
|
/* Prevent navbar from showing on side-hover by positioning and hiding it */
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Shift navbar further out of view to fully hide it */
|
||||||
|
#zen-appcontent-navbar-container {
|
||||||
|
--zen-element-separation: -5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the main navigation toolbar */
|
||||||
|
toolbar#nav-bar {
|
||||||
|
width: 100%;
|
||||||
|
top: 1vh !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 within the toolbar */
|
||||||
|
#urlbar {
|
||||||
|
left: 50% !important;
|
||||||
|
transform: translateX(-50%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style placeholder text for both search bar and URL bar */
|
||||||
|
.urlbar-input::placeholder,
|
||||||
|
.searchbar-textbox::placeholder {
|
||||||
|
color: var(--zen-light-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Collapse URL bar when download or extension buttons are shown */
|
||||||
|
#urlbar-container {
|
||||||
|
#nav-bar:is([downloadsbuttonshown], [unifiedextensionsbuttonshown]) & {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove transition and background for unfocused URL bar */
|
||||||
|
#urlbar:not([breakout-extend="true"]) #urlbar-background {
|
||||||
|
transition: unset !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set background when URL bar enters breakout (focused/expanded) state */
|
||||||
|
#urlbar[breakout][breakout-extend] #urlbar-background {
|
||||||
|
background: rgba(31, 31, 31, 0.9) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Center URL bar text */
|
||||||
|
#urlbar-container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set consistent text color in and outside breakout state */
|
||||||
|
#urlbar,
|
||||||
|
#urlbar[breakout][breakout-extend] {
|
||||||
|
color: var(--zen-light-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Sidebar and Titlebar Styling ─── */
|
||||||
|
|
||||||
|
/* Center the entire top toolbar horizontally */
|
||||||
|
toolbox#navigator-toolbox {
|
||||||
|
justify-content: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the titlebar background and height */
|
||||||
|
hbox#titlebar {
|
||||||
|
height: 75% !important;
|
||||||
|
background: var(--zen-dark-bg) !important;
|
||||||
|
border: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apply border radius to titlebar in compact Zen mode */
|
||||||
|
:root[zen-compact-mode="true"]:not([customizing]):not([inDOMFullscreen="true"]) #navigator-toolbox:not([animate="true"]) #titlebar {
|
||||||
|
border-radius: var(--border-radius) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transparent background and rounded corners for sidebar tabs */
|
||||||
|
vbox.tab-background {
|
||||||
|
background: transparent !important;
|
||||||
|
border-radius: var(--border-radius) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Highlight active or multi-selected tabs with Zen accent color */
|
||||||
|
.tab-content {
|
||||||
|
&:is([selected], [multiselected]) {
|
||||||
|
border-left: 2px solid var(--zen-accent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Misc Buttons and Icons ─── */
|
||||||
|
|
||||||
|
/* Fine-tune menu button alignment */
|
||||||
|
#PanelUI-menu-button {
|
||||||
|
padding-inline-end: 0px !important;
|
||||||
|
margin-left: -5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apply accent color to Zen menu button icon */
|
||||||
|
.toolbarbutton-icon[label="Zen"] {
|
||||||
|
fill: var(--zen-accent) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* De-emphasize starred bookmark icon */
|
||||||
|
#star-button[starred] {
|
||||||
|
fill-opacity: 0.4 !important;
|
||||||
|
fill: var(--toolbarbutton-icon-fill) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide UI elements to simplify the interface */
|
||||||
|
#reader-mode-button,
|
||||||
|
#translations-button,
|
||||||
|
#identity-box,
|
||||||
|
#identity-permission-box,
|
||||||
|
#star-button-box,
|
||||||
|
#picture-in-picture-button,
|
||||||
|
#PersonalToolbar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prevent collapse of customization panel */
|
||||||
|
#customization-panel-container {
|
||||||
|
width: 20% !important;
|
||||||
|
}
|
||||||
|
}
|
BIN
themes/1ef7c171-5993-4832-afa6-4e103d949775/image.png
Normal file
BIN
themes/1ef7c171-5993-4832-afa6-4e103d949775/image.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
14
themes/1ef7c171-5993-4832-afa6-4e103d949775/preferences.json
Normal file
14
themes/1ef7c171-5993-4832-afa6-4e103d949775/preferences.json
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"property": "mod.zen_custom.opacity",
|
||||||
|
"label": "Background transparency",
|
||||||
|
"type": "checkbox",
|
||||||
|
"disabledOn": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"property": "mod.zen_custom.border_radius",
|
||||||
|
"label": "Corner roundness",
|
||||||
|
"type": "checkbox",
|
||||||
|
"disabledOn": []
|
||||||
|
}
|
||||||
|
]
|
36
themes/1ef7c171-5993-4832-afa6-4e103d949775/readme.md
Normal file
36
themes/1ef7c171-5993-4832-afa6-4e103d949775/readme.md
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
|
||||||
|
# Floating Compact Layout
|
||||||
|
|
||||||
|
Minimalist UI for Compact Mode — uses Zen colors, centers URL bar, and removes visual clutter.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Requirement
|
||||||
|
|
||||||
|
This mod requires both **Compact Mode** and a **compatible browser layout** — it will not work with Zen’s default settings.
|
||||||
|
|
||||||
|
**To enable Compact Mode:**
|
||||||
|
|
||||||
|
① Left-click the navigation bar
|
||||||
|
|
||||||
|
② Click “Compact Mode”
|
||||||
|
|
||||||
|
③ Select “Enable Compact Mode”
|
||||||
|
|
||||||
|
**Browser layout requirement:**
|
||||||
|
|
||||||
|
Go to Settings → Browser Layout and select either “Multiple Toolbars” or “Collapsed Toolbar”.
|
||||||
|
The “Single Toolbar” layout is not supported and will prevent the mod from working properly.
|
||||||
|
|
||||||
|
## 🌟 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**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💻 Toolbar Customization (macOS & Windo
|
15
themes/1ef7c171-5993-4832-afa6-4e103d949775/theme.json
Normal file
15
themes/1ef7c171-5993-4832-afa6-4e103d949775/theme.json
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"id": "1ef7c171-5993-4832-afa6-4e103d949775",
|
||||||
|
"name": "Floating Compact Layout",
|
||||||
|
"description": "Minimalist UI for Compact Mode \u2014 uses Zen colors, centers URL bar, and removes visual clutter.",
|
||||||
|
"homepage": "https://github.com/pjhochman/zen-ui-compact",
|
||||||
|
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1ef7c171-5993-4832-afa6-4e103d949775/chrome.css",
|
||||||
|
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1ef7c171-5993-4832-afa6-4e103d949775/readme.md",
|
||||||
|
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1ef7c171-5993-4832-afa6-4e103d949775/image.png",
|
||||||
|
"author": "Pjhochman",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"tags": [],
|
||||||
|
"createdAt": "2025-03-25",
|
||||||
|
"updatedAt": "2025-03-25",
|
||||||
|
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/1ef7c171-5993-4832-afa6-4e103d949775/preferences.json"
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue