Add theme: Fluid URL

This commit is contained in:
wysh3 2024-11-20 09:04:07 +00:00 committed by GitHub
parent ee03230de5
commit 8b598fff63
5 changed files with 117 additions and 0 deletions

View file

@ -0,0 +1,35 @@
/* Firefox URL Bar Loading Animation */
:root {
--w-urlbar-bg_color: #ff6b6b66, #4ecdc466, #ff6b6b66;
}
#nav-bar {
#urlbar:not([breakout-extend="true"]) {
#urlbar-background::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--w-urlbar-bg_color));
background-size: 200% 100%;
animation: urlbar-loading-gradient 1s linear reverse infinite;
animation-play-state: paused;
opacity: 0;
transition: opacity 0.25s;
z-index: -1;
}
}
&:has(#reload-button[displaystop="true"]) {
#urlbar-background::before {
animation-play-state: running;
opacity: 1;
}
}
}
@keyframes urlbar-loading-gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 200% 50%; }
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View file

@ -0,0 +1,53 @@
[
{
"property": "w.urlbar.bg_color",
"label": "URL Bar Loading Animation",
"placeholder": "Select gradient preset",
"type": "dropdown",
"options": [
{
"label": "Default Gradient",
"value": "#ff6b6b66, #4ecdc466, #ff6b6b66",
"default": true
},
{
"label": "Blue Gradient",
"value": "#0066ff66, #00ffff66, #0066ff66"
},
{
"label": "Purple Gradient",
"value": "#9933ff66, #ff33cc66, #9933ff66"
},
{
"label": "Green Gradient",
"value": "#33cc3366, #99ff6666, #33cc3366"
},
{
"label": "Black Gradient",
"value": "#00000099, #88888899, #88888899, #00000099"
},
{
"label": "Rainbow Gradient",
"value": "#ff000066, #ffa50066, #ffff0066, #00ff0066, #0000ff66, #ff000066"
},
{
"label": "Neon Gradient",
"value": "#ff1a7566, #00ff8c66, #ff1a7566"
},
{
"label": "Sunset Gradient",
"value": "#ff471a66, #ff8c1a66, #ff471a66"
},
{
"label": "Custom",
"value": "custom"
}
]
},
{
"property": "w.urlbar.bg_color",
"label": "Custom Color for URL Bar Gradient",
"placeholder": "Enter comma-separated colors (e.g., #ff6b6b66, #4ecdc466, #ff6b6b66)",
"type": "string"
}
]

View file

@ -0,0 +1,14 @@
# Fluid URL
A minimalist mod that enhances the URL bar with a smooth, gradient-based loading animation for a refined, calming browsing experience.
![image](https://github.com/user-attachments/assets/7009dcfa-5dd0-4e02-b176-0382ffa01937)
## Preferences
- **Default Gradient Presets:** Choose from predefined gradient options (e.g., Default, Blue, Rainbow) for the URL bars loading animation.
- **Custom Gradient:** Select "Custom" to input your own gradient by entering comma-separated hex colors (e.g., #ff000066, #00ff0066).
[⭐ Star the repo](https://github.com/wysh3/Zen-Mods) if you appreciate this theme!

View file

@ -0,0 +1,15 @@
{
"id": "cfa711cf-e9f7-4c35-8289-3e7633f93565",
"name": "Fluid URL",
"description": "A minimalist mod that adds a smooth gradient animation to the URL bar for a calming effect.",
"homepage": "https://github.com/wysh3/Zen-Mods/tree/main/Fluid%20URL",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/image.png",
"author": "wysh3",
"version": "1.0.0",
"tags": [],
"createdAt": "2024-11-20",
"updatedAt": "2024-11-20",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/preferences.json"
}