diff --git a/themes/cc678215-525f-4b6e-84f3-d9768917c746/chrome.css b/themes/cc678215-525f-4b6e-84f3-d9768917c746/chrome.css new file mode 100644 index 000000000..a66535376 --- /dev/null +++ b/themes/cc678215-525f-4b6e-84f3-d9768917c746/chrome.css @@ -0,0 +1,396 @@ + +/* ========================================================= + ZEN GRID SEARCH - CORE CSS (DEFAULT) + ========================================================= */ +@media not (-moz-pref("mod.zengridsearch.only_empty")) { + +#urlbar:not([usertyping]) .urlbarView-results { + display: flex !important; + flex-wrap: wrap !important; + justify-content: center !important; + gap: 8px 12px !important; + padding: 16px !important; +} + +#urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]) { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + padding: 12px 6px !important; + border-radius: 12px !important; + background: transparent !important; + + /* Remove height constraints to allow natural expansion */ + min-height: 125px !important; + height: auto !important; + max-height: none !important; + + /* Calculate width for 5 columns (100% / 5) */ + width: calc(20% - 10px) !important; + min-width: 90px !important; + max-width: 140px !important; + flex: 0 0 calc(20% - 10px) !important; + + box-sizing: border-box !important; + position: relative !important; + overflow: hidden !important; +} + +#urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]):hover { + background-color: var(--urlbar-box-hover-bgcolor, rgba(128, 128, 128, 0.1)) !important; +} + +#urlbar:not([usertyping]) .urlbarView-row-inner { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + width: 100% !important; + min-width: 100% !important; + max-width: 100% !important; + padding: 0 !important; + margin: 0 !important; + position: relative !important; +} + +#urlbar:not([usertyping]) .urlbarView-no-wrap, +#urlbar:not([usertyping]) .urlbarView-title-wrapper, +#urlbar:not([usertyping]) .urlbarView-title { + position: static !important; +} + +#urlbar:not([usertyping]) .urlbarView-no-wrap { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + width: 100% !important; + min-width: 100% !important; + max-width: 100% !important; + padding: 0 !important; + margin: 0 !important; +} + +#urlbar:not([usertyping]) .urlbarView-favicon { + width: 48px !important; + height: 48px !important; + min-width: 48px !important; + min-height: 48px !important; + padding: 10px !important; + margin: 0 auto 8px auto !important; + background-color: var(--urlbar-box-bgcolor, rgba(128, 128, 128, 0.1)) !important; + border-radius: 14px !important; + box-sizing: border-box !important; + object-fit: contain !important; + display: block !important; + box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; +} + +/* Pin/Star Icon alignment */ +#urlbar:not([usertyping]) .urlbarView-type-icon { + display: block !important; + position: absolute !important; + top: 32px !important; + bottom: auto !important; + left: 50% !important; + right: auto !important; + margin: 0 0 0 12px !important; + transform: none !important; + z-index: 2 !important; + pointer-events: none !important; + width: 16px !important; + height: 16px !important; + background-color: transparent !important; +} + +/* Hide unused elements */ +#urlbar:not([usertyping]) .urlbarView-title-separator, +#urlbar:not([usertyping]) .urlbarView-action, +#urlbar:not([usertyping]) .urlbarView-tags { + display: none !important; +} + +#urlbar:not([usertyping]) .urlbarView-title { + font-size: 0.85em !important; + font-weight: 500 !important; + text-align: center !important; + width: 100% !important; + min-width: 100% !important; + display: block !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + color: var(--urlbar-popup-url-color, inherit) !important; + margin: 0 !important; + padding: 0 0 2px 0 !important; + line-height: 1.4 !important; + height: auto !important; + max-height: none !important; + mask-image: none !important; + -webkit-mask-image: none !important; +} + +#urlbar:not([usertyping]) .urlbarView-url { + font-size: 0.75em !important; + font-weight: 400 !important; + text-align: center !important; + width: 100% !important; + min-width: 100% !important; + display: block !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + color: var(--urlbar-popup-url-color, inherit) !important; + opacity: 0.6 !important; + margin: 4px 0 0 0 !important; + padding: 0 0 2px 0 !important; + line-height: 1.4 !important; + height: auto !important; + max-height: none !important; + mask-image: none !important; + -webkit-mask-image: none !important; +} + +#urlbar:not([usertyping]) .urlbarView-row[type="topsites"] { + width: 100% !important; + max-width: 100% !important; +} + +} + +/* ========================================================= + ZEN GRID SEARCH - CORE CSS (ONLY NEW TAB / EMPTY URL) + ========================================================= */ +@media (-moz-pref("mod.zengridsearch.only_empty")) { + +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-results { + display: flex !important; + flex-wrap: wrap !important; + justify-content: center !important; + gap: 8px 12px !important; + padding: 16px !important; +} + +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-row:not([type="topsites"]) { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + padding: 12px 6px !important; + border-radius: 12px !important; + background: transparent !important; + + /* Remove height constraints to allow natural expansion */ + min-height: 125px !important; + height: auto !important; + max-height: none !important; + + /* Calculate width for 5 columns (100% / 5) */ + width: calc(20% - 10px) !important; + min-width: 90px !important; + max-width: 140px !important; + flex: 0 0 calc(20% - 10px) !important; + + box-sizing: border-box !important; + position: relative !important; + overflow: hidden !important; +} + +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-row:not([type="topsites"]):hover { + background-color: var(--urlbar-box-hover-bgcolor, rgba(128, 128, 128, 0.1)) !important; +} + +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-row-inner { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + width: 100% !important; + min-width: 100% !important; + max-width: 100% !important; + padding: 0 !important; + margin: 0 !important; + position: relative !important; +} + +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-no-wrap, +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-title-wrapper, +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-title { + position: static !important; +} + +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-no-wrap { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + width: 100% !important; + min-width: 100% !important; + max-width: 100% !important; + padding: 0 !important; + margin: 0 !important; +} + +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-favicon { + width: 48px !important; + height: 48px !important; + min-width: 48px !important; + min-height: 48px !important; + padding: 10px !important; + margin: 0 auto 8px auto !important; + background-color: var(--urlbar-box-bgcolor, rgba(128, 128, 128, 0.1)) !important; + border-radius: 14px !important; + box-sizing: border-box !important; + object-fit: contain !important; + display: block !important; + box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; +} + +/* Pin/Star Icon alignment */ +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-type-icon { + display: block !important; + position: absolute !important; + top: 32px !important; + bottom: auto !important; + left: 50% !important; + right: auto !important; + margin: 0 0 0 12px !important; + transform: none !important; + z-index: 2 !important; + pointer-events: none !important; + width: 16px !important; + height: 16px !important; + background-color: transparent !important; +} + +/* Hide unused elements */ +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-title-separator, +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-action, +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-tags { + display: none !important; +} + +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-title { + font-size: 0.85em !important; + font-weight: 500 !important; + text-align: center !important; + width: 100% !important; + min-width: 100% !important; + display: block !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + color: var(--urlbar-popup-url-color, inherit) !important; + margin: 0 !important; + padding: 0 0 2px 0 !important; + line-height: 1.4 !important; + height: auto !important; + max-height: none !important; + mask-image: none !important; + -webkit-mask-image: none !important; +} + +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-url { + font-size: 0.75em !important; + font-weight: 400 !important; + text-align: center !important; + width: 100% !important; + min-width: 100% !important; + display: block !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + color: var(--urlbar-popup-url-color, inherit) !important; + opacity: 0.6 !important; + margin: 4px 0 0 0 !important; + padding: 0 0 2px 0 !important; + line-height: 1.4 !important; + height: auto !important; + max-height: none !important; + mask-image: none !important; + -webkit-mask-image: none !important; +} + +#urlbar[pageproxystate="invalid"]:not([usertyping]) .urlbarView-row[type="topsites"] { + width: 100% !important; + max-width: 100% !important; +} + +} + +/* ========================================================= + ZEN GRID SEARCH - PREFERENCES + ========================================================= */ + +/* --- ROW LIMITS (max_rows) --- */ +@media not (-moz-pref("mod.zengridsearch.max_rows")) { + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]):nth-of-type(n+12) { + display: none !important; + } +} +@media (-moz-pref("mod.zengridsearch.max_rows", "2")) { + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]):nth-of-type(n+12) { + display: none !important; + } +} +@media (-moz-pref("mod.zengridsearch.max_rows", "3")) { + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]):nth-of-type(n+17) { + display: none !important; + } +} +@media (-moz-pref("mod.zengridsearch.max_rows", "unlimited")) { + #urlbar:not([usertyping]) .urlbarView-results { + max-height: 500px !important; + overflow-y: auto !important; + } +} + +/* --- HIDE URLS (hide_urls) --- */ +@media (-moz-pref("mod.zengridsearch.hide_urls")) { + #urlbar:not([usertyping]) .urlbarView-url { + display: none !important; + } +} + +/* --- ANIMATION SPEED (animations) --- */ +@media not (-moz-pref("mod.zengridsearch.animations")) { + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]) { + transition: background-color 0.15s ease !important; + } + #urlbar:not([usertyping]) .urlbarView-favicon { + transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1) !important; + } + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]):hover .urlbarView-favicon { + transform: scale(1.03) !important; + } +} + +@media (-moz-pref("mod.zengridsearch.animations", "normal")) { + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]) { + transition: background-color 0.15s ease !important; + } + #urlbar:not([usertyping]) .urlbarView-favicon { + transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1) !important; + } + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]):hover .urlbarView-favicon { + transform: scale(1.03) !important; + } +} + +@media (-moz-pref("mod.zengridsearch.animations", "fast")) { + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]) { + transition: background-color 0.05s ease !important; + } + #urlbar:not([usertyping]) .urlbarView-favicon { + transition: transform 0.05s cubic-bezier(0.2, 0, 0, 1) !important; + } + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]):hover .urlbarView-favicon { + transform: scale(1.02) !important; + } +} + +@media (-moz-pref("mod.zengridsearch.animations", "off")) { + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]), + #urlbar:not([usertyping]) .urlbarView-favicon { + transition: none !important; + transform: none !important; + } + #urlbar:not([usertyping]) .urlbarView-row:not([type="topsites"]):hover .urlbarView-favicon { + transform: none !important; + } +} diff --git a/themes/cc678215-525f-4b6e-84f3-d9768917c746/image.png b/themes/cc678215-525f-4b6e-84f3-d9768917c746/image.png new file mode 100644 index 000000000..4943a263d Binary files /dev/null and b/themes/cc678215-525f-4b6e-84f3-d9768917c746/image.png differ diff --git a/themes/cc678215-525f-4b6e-84f3-d9768917c746/preferences.json b/themes/cc678215-525f-4b6e-84f3-d9768917c746/preferences.json new file mode 100644 index 000000000..e1978f7a1 --- /dev/null +++ b/themes/cc678215-525f-4b6e-84f3-d9768917c746/preferences.json @@ -0,0 +1,54 @@ +[ + { + "property": "mod.zengridsearch.only_empty", + "label": "Only show grid on New Tab (Empty URL)", + "type": "checkbox", + "defaultValue": false + }, + { + "property": "mod.zengridsearch.hide_urls", + "label": "Hide URL links (Show only titles)", + "type": "checkbox", + "defaultValue": false + }, + { + "property": "mod.zengridsearch.max_rows", + "label": "Grid Rows", + "type": "dropdown", + "defaultValue": "2", + "options": [ + { + "label": "2 Rows (Max 10 sites)", + "value": "2" + }, + { + "label": "3 Rows (Max 15 sites)", + "value": "3" + }, + { + "label": "Unlimited (Scrollable)", + "value": "unlimited" + } + ] + }, + { + "property": "mod.zengridsearch.animations", + "label": "Animation Speed", + "type": "dropdown", + "defaultValue": "normal", + "options": [ + { + "label": "Normal", + "value": "normal" + }, + { + "label": "Fast", + "value": "fast" + }, + { + "label": "Disabled", + "value": "off" + } + ] + } +] \ No newline at end of file diff --git a/themes/cc678215-525f-4b6e-84f3-d9768917c746/readme.md b/themes/cc678215-525f-4b6e-84f3-d9768917c746/readme.md new file mode 100644 index 000000000..9e611586e --- /dev/null +++ b/themes/cc678215-525f-4b6e-84f3-d9768917c746/readme.md @@ -0,0 +1,16 @@ + +# Zen Grid Search + +Changes the default vertical URL bar suggestions into a simple, customizable grid layout. It only applies to your top sites and history, and smoothly reverts to normal when you start typing. + +**Open source** · MIT License · Contributions welcome + +--- + +## Features + +- **Grid Layout** — Displays your top sites in a neat 2x5 grid instead of a long vertical list. +- **Premium Feel** — Subtle hover animations and soft drop shadows for a high-quality look. +- **Hide URL Links** — Option to hide the raw URL text, displaying only the website's title. +- **Adjustable Rows** — Choose between a 2-row layout (10 sites), 3-row layout (15 sites), or unlimited scroll. +- **Smart New Tab Detection** — Option to only show the grid when your URL bar is completely empty. diff --git a/themes/cc678215-525f-4b6e-84f3-d9768917c746/theme.json b/themes/cc678215-525f-4b6e-84f3-d9768917c746/theme.json new file mode 100644 index 000000000..3f72f741a --- /dev/null +++ b/themes/cc678215-525f-4b6e-84f3-d9768917c746/theme.json @@ -0,0 +1,15 @@ +{ + "id": "cc678215-525f-4b6e-84f3-d9768917c746", + "name": "Grid Search", + "description": "Transforms the default vertical URL bar shortcuts into a clean, modern grid layout.", + "homepage": "https://github.com/ahseyg/Zen-Grid-Search", + "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cc678215-525f-4b6e-84f3-d9768917c746/chrome.css", + "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cc678215-525f-4b6e-84f3-d9768917c746/readme.md", + "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cc678215-525f-4b6e-84f3-d9768917c746/image.png", + "author": "ahseyg", + "version": "1.0.0", + "tags": [], + "createdAt": "2026-06-25", + "updatedAt": "2026-06-25", + "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cc678215-525f-4b6e-84f3-d9768917c746/preferences.json" +} \ No newline at end of file