Merge 150fc62095 into b36258a8c7

themes/1ef7c171-5993-4832-afa6-4e103d949775/chrome.css

@@ -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;
+	}
+}

themes/1ef7c171-5993-4832-afa6-4e103d949775/preferences.json

@@ -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": []
+    }
+]

themes/1ef7c171-5993-4832-afa6-4e103d949775/readme.md

@@ -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

themes/1ef7c171-5993-4832-afa6-4e103d949775/theme.json

@@ -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"
+}