[create-theme]: Fluid URL

[wysh3]

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

Image

https://i.imgur.com/6yQTEom.png

Type

• JSON Color Theme

Theme Styles

/* 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%; }
}

Readme

# 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 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!

Preferences

[
    {
        "property": "w.urlbar.bg_color",
        "label": "URL Bar Loading Animation",
        "placeholder": "Select gradient preset",
        "type": "dropdown",
        "disabledOn": [],
        "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",
                "customInput": true
            }
        ]
    },
    {
        "property": "w.urlbar.bg_color",
        "label": "Custom Color for URL Bar Gradient",
        "placeholder": "Enter comma-separated colors (e.g., #ff000066, #00ff0066)",
        "type": "string",
        "dependsOn": {
            "property": "w.urlbar.bg_color",
            "value": "custom"
        }
    }
]

[github-actions]

Error creating theme

Sorry about that! There was an error creating the theme. Please try again or contact the maintainers for help.

Traceback (most recent call last):