mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-08 01:10:01 +02:00
Add theme: Fluid URL
This commit is contained in:
parent
ee03230de5
commit
8b598fff63
5 changed files with 117 additions and 0 deletions
35
themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/chrome.css
Normal file
35
themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/chrome.css
Normal 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%; }
|
||||||
|
}
|
BIN
themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/image.png
Normal file
BIN
themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/image.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 48 KiB |
53
themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/preferences.json
Normal file
53
themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/preferences.json
Normal 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"
|
||||||
|
}
|
||||||
|
]
|
14
themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/readme.md
Normal file
14
themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/readme.md
Normal 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.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## Preferences
|
||||||
|
|
||||||
|
- **Default Gradient Presets:** Choose from predefined gradient options (e.g., Default, Blue, Rainbow) for the URL bar’s 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!
|
15
themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/theme.json
Normal file
15
themes/cfa711cf-e9f7-4c35-8289-3e7633f93565/theme.json
Normal 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"
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue