mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
Add theme: Zen URL Bar Tweaks
This commit is contained in:
parent
48f6105fd9
commit
0a01897ee9
5 changed files with 169 additions and 0 deletions
85
themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/chrome.css
Normal file
85
themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/chrome.css
Normal file
|
@ -0,0 +1,85 @@
|
||||||
|
|
||||||
|
/* Base styles always applied */
|
||||||
|
#urlbar-background {
|
||||||
|
border: 2px solid transparent !important;
|
||||||
|
border-radius: var(--mod-urlbar-border_radius) !important;
|
||||||
|
transition: box-shadow 0.3s ease-in-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide container icons when enabled */
|
||||||
|
@media (-moz-bool-pref: "mod.urlbar.hide_elements") {
|
||||||
|
#userContext-identity-icon,
|
||||||
|
#userContext-indicator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide permission icons by default */
|
||||||
|
#identity-permission-box {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide or reduce some elements to improve appearance */
|
||||||
|
#identity-box {
|
||||||
|
margin-inline-end: 0 !important;
|
||||||
|
max-width: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-action-buttons {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show elements on hover when enabled */
|
||||||
|
@media (-moz-bool-pref: "mod.urlbar.show_on_hover") {
|
||||||
|
/* Show permission icons when hovering over the URL bar */
|
||||||
|
#urlbar:hover #identity-permission-box {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show these elements on hover if needed */
|
||||||
|
#urlbar:hover #identity-box,
|
||||||
|
#urlbar:focus-within #identity-box {
|
||||||
|
max-width: unset !important;
|
||||||
|
margin-inline-end: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#urlbar:hover #page-action-buttons,
|
||||||
|
#urlbar:focus-within #page-action-buttons {
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Center the URL in the address bar when enabled */
|
||||||
|
@media (-moz-bool-pref: "mod.urlbar.center_url") {
|
||||||
|
#urlbar-input-container {
|
||||||
|
justify-content: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#urlbar-input {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apply colorful border when enabled */
|
||||||
|
@media (-moz-bool-pref: "mod.urlbar.colorful_border") {
|
||||||
|
#urlbar-background {
|
||||||
|
background-origin: border-box !important;
|
||||||
|
background-clip: padding-box, border-box !important;
|
||||||
|
background-image: linear-gradient(rgba(59, 59, 61, 0.8), rgba(59, 59, 61, 0.8)),
|
||||||
|
linear-gradient(90deg, #ff7e5f, #feb47b, #7bc6cc, #8583ed) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apply glow effect on focus when enabled */
|
||||||
|
@media (-moz-bool-pref: "mod.urlbar.glow_effect") {
|
||||||
|
#urlbar-background {
|
||||||
|
box-shadow: 0 0 8px rgba(137, 137, 186, 0.3) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#urlbar[focused="true"] #urlbar-background {
|
||||||
|
box-shadow: 0 0 12px rgba(99, 185, 255, 0.5) !important;
|
||||||
|
}
|
||||||
|
}
|
BIN
themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/image.png
Normal file
BIN
themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/image.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 122 KiB |
39
themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/preferences.json
Normal file
39
themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/preferences.json
Normal file
|
@ -0,0 +1,39 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"property": "mod.urlbar.hide_elements",
|
||||||
|
"label": "Hide container and permission icons",
|
||||||
|
"type": "checkbox",
|
||||||
|
"defaultValue": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"property": "mod.urlbar.show_on_hover",
|
||||||
|
"label": "Show hidden elements on hover",
|
||||||
|
"type": "checkbox",
|
||||||
|
"defaultValue": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"property": "mod.urlbar.center_url",
|
||||||
|
"label": "Center the URL in address bar",
|
||||||
|
"type": "checkbox",
|
||||||
|
"defaultValue": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"property": "mod.urlbar.colorful_border",
|
||||||
|
"label": "Use colorful gradient border",
|
||||||
|
"type": "checkbox",
|
||||||
|
"defaultValue": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"property": "mod.urlbar.glow_effect",
|
||||||
|
"label": "Enable glow effect on focus",
|
||||||
|
"type": "checkbox",
|
||||||
|
"defaultValue": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"property": "mod.urlbar.border_radius",
|
||||||
|
"label": "Border radius",
|
||||||
|
"type": "string",
|
||||||
|
"defaultValue": "8px",
|
||||||
|
"placeholder": "e.g: 8px"
|
||||||
|
}
|
||||||
|
]
|
30
themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/readme.md
Normal file
30
themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/readme.md
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
|
||||||
|
# Zen URL Bar Tweaks
|
||||||
|
|
||||||
|
A collection of tweaks for the Zen browser URL bar.
|
||||||
|
|
||||||
|
To use the mod, just install it and go to the Zen Mods page on your Zen browser. You will see the mod listed there. Click on the settings icon to turn on/off the tweaks.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
Here's a list of the tweak options included in this Zen browser mod:
|
||||||
|
|
||||||
|
- ✅ **Hide container and permission icons**
|
||||||
|
Clean up the URL bar by hiding container indicators and site permission icons.
|
||||||
|
|
||||||
|
- ✅ **Show hidden elements on hover**
|
||||||
|
Reveal icons and actions when hovering over the URL bar, keeping the look minimal when idle.
|
||||||
|
|
||||||
|
- ✅ **Center the URL in the address bar**
|
||||||
|
Align the URL to the center of the bar for a balanced aesthetic.
|
||||||
|
|
||||||
|
- ✅ **Use colorful gradient border**
|
||||||
|
Add a stylish colorful border around the URL bar (toggle only).
|
||||||
|
|
||||||
|
- ✅ **Enable glow effect on focus**
|
||||||
|
Make the URL bar glow subtly when focused, improving visual feedback.
|
||||||
|
|
||||||
|
- ✅ **Adjustable border radius**
|
||||||
|
Customize how rounded the corners of the URL bar look (e.g., 4px, 8px, 16px, etc.).
|
||||||
|
|
||||||
|
> You can turn on/off each of these tweaks individually in the Zen Mods page in `about:settings`.
|
15
themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/theme.json
Normal file
15
themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/theme.json
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"id": "fd79066d-ba22-4cd1-8ad0-cfd82c12026a",
|
||||||
|
"name": "Zen URL Bar Tweaks",
|
||||||
|
"description": "A collection of tweaks for the Zen browser URL bar with options to toggle each tweak.",
|
||||||
|
"homepage": "https://github.com/litegral/zen-url-bar-tweaks",
|
||||||
|
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/chrome.css",
|
||||||
|
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/readme.md",
|
||||||
|
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/image.png",
|
||||||
|
"author": "litegral",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"tags": [],
|
||||||
|
"createdAt": "2025-04-05",
|
||||||
|
"updatedAt": "2025-04-05",
|
||||||
|
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/preferences.json"
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue