[create-theme]: Super Url Bar

[CosmoCreeper]

Name

Super Url Bar

Description

Get simple rounded edges, centered text, a removed border for your url bar and a background blur.

Homepage

https://github.com/CosmoCreeper/Zen-Themes/tree/main/SuperUrlBar

Image

https://github.com/CosmoCreeper/Zen-Themes/blob/main/SuperUrlBar/image.png?raw=true

Type

• JSON Color Theme

Theme Styles

/* Adjust border radius of url bar and its elements */
:root:has(#theme-Super-Url-Bar[uc-urlbar-border-radius="small"]) {
  --urlbar-border-radius: 4px;
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-border-radius="medium"]) {
  --urlbar-border-radius: 8px;
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-border-radius="large"]) {
  --urlbar-border-radius: 14px;
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-border-radius="xlarge"]) {
  --urlbar-border-radius: 20px;
}

:root:has(#theme-Super-Url-Bar[uc-urlbar-border-radius="small"],
          #theme-Super-Url-Bar[uc-urlbar-border-radius="medium"],
          #theme-Super-Url-Bar[uc-urlbar-border-radius="large"],
          #theme-Super-Url-Bar[uc-urlbar-border-radius="xlarge"]) {
    #urlbar, #urlbar-background, #notification-popup-box, #urlbar .urlbar-page-action, #urlbar #tracking-protection-icon-container,
    #urlbar:not([breakout-extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box,
    #urlbar:not([breakout-extend="true"]) #identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box,
    .identity-box-button {
      border-radius: var(--urlbar-border-radius) !important;
    }
          
    /* Border radius of boxes on the left */
    #identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate="invalid"]) #identity-icon-box {
      border-top-left-radius: var(--urlbar-border-radius) !important;
      border-bottom-left-radius: var(--urlbar-border-radius) !important;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }
}

/* Centers the url text when enabled in dropdown: 1.Option: Centers the text unless url bar is focused; 2.Option: Centers the text always*/
:root:has(#theme-Super-Url-Bar[uc-urltext-center="normal"]) {
  #urlbar:not([focused]) .urlbar-input {
    text-align: center !important; 
  }
}
:root:has(#theme-Super-Url-Bar[uc-urltext-center="advanced"]) {
  #urlbar .urlbar-input {
    text-align: center !important; 
  }
}

@media (-moz-bool-pref: "uc.urlbar.move-icon-into") {
  #page-action-buttons {
    margin-right: calc(var(--urlbar-min-height) - 1px - 4 * var(--urlbar-container-padding)) !important;
  }
  
  #urlbar-container+.chromeclass-toolbar-additional {
    margin-inline-start: calc(-21px - 2 * var(--urlbar-icon-padding) - var(--urlbar-margin-inline)) !important;
    position: relative;
    --toolbarbutton-inner-padding: var(--urlbar-icon-padding);
    --toolbarbutton-hover-background: color-mix(in srgb, var(--uc-urlbar-custom-bg-color) 90%, light-dark(black, white)) !important;
  }
}

/* Blurs the background when url bar is focused when toggled */
:root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="Subtle"]) {
  --blur-intensity: 1px;
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="Normal"]) {
  --blur-intensity: 2px;
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="RatherStrong"]) {
  --blur-intensity: 3px;
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="Strong"]) {
  --blur-intensity: 4px;
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="ReallyStrong"]) {
  --blur-intensity: 6px;
}

:root:has(#theme-Super-Url-Bar[uc-urlbar-blur-intensity="Subtle"],
          #theme-Super-Url-Bar[uc-urlbar-blur-intensity="Normal"],
          #theme-Super-Url-Bar[uc-urlbar-blur-intensity="RatherStrong"],
          #theme-Super-Url-Bar[uc-urlbar-blur-intensity="Strong"],
          #theme-Super-Url-Bar[uc-urlbar-blur-intensity="ReallyStrong"]:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar'])) {
  #urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]):after {
    content: "";
    position: fixed;
    pointer-events: none;
  
    width: 200vw;
    height: 200vh;
  
    top: -100vh;
    left: -100vw;
  
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(var(--blur-intensity));
  
    z-index: -1;
  }
}

/* Custom Colors for Url Bar */
:root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="noFocus"]) {
    #urlbar:not([focused="true"]):not([breakout-extend="true"]) > #urlbar-background {
        background: var(--uc-urlbar-custom-bg-color) !important;
    }
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="Focus"]) {
    #urlbar:is([focused], [open]) > #urlbar-background {
        background: var(--uc-urlbar-custom-bg-color) !important;
    }
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="AlwaysColor"]) {
    #urlbar-background {
        background: var(--uc-urlbar-custom-bg-color) !important;
    }
}

:root:has(#theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="AlwaysColor"],
          #theme-Super-Url-Bar[uc-urlbar-custom-bg-color-mode="noFocus"]) {
  #identity-icon-box, #identity-permission-box {
    background-color: color-mix(in srgb, var(--uc-urlbar-custom-bg-color) 90%, light-dark(black, white)) !important;
  }
  #tracking-protection-icon-container, .urlbar-page-action, #picture-in-picture-button, #reader-mode-button, #zen-split-views-box {
    &:hover:not([open="true"]) {
      background-color: color-mix(in srgb, var(--uc-urlbar-custom-bg-color) 90%, light-dark(black, white)) !important;
    }
  }
}

/* Adds a border to the url bar when toggled */
@media (-moz-bool-pref: "uc.urlbar.border") {
  #urlbar-background {
    border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black),
                    color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
  }
}

/* Hides the container info in url-bar */
:root:has(#theme-Super-Url-Bar[uc-urlbar-hide-container-info="hideLabel"]) {
  #userContext-label {
    display: none;
  }
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-hide-container-info="hideIcon"]) {
  #userContext-indicator {
    display: none;
  }
}
:root:has(#theme-Super-Url-Bar[uc-urlbar-hide-container-info="hideIconLabel"]) {
  #userContext-icons {
    display: none;
  }
}

/* Makes all the hidden icons appear on hover */
@media not (-moz-bool-pref: "uc.urlbar.icon.show-on-hover") {
  :root {
    --position-var: absolute;
    --pointer-events: none;
  }
}
@media (-moz-bool-pref: "uc.urlbar.icon.show-on-hover") {

  :root {
    --position-var: relative;
    --pointer-events: all;
  }

  @media (-moz-bool-pref: "uc.urlbar.icon.zoom.removed") {
    #urlbar:hover #urlbar-zoom-button {
      display: block !important;
    } 
  }
  @media (-moz-bool-pref: "uc.urlbar.icon.shield.removed") {
    #urlbar:hover #tracking-protection-icon-container, #tracking-protection-icon-container[open="true"] {
      display: block !important;
    } 
  }
  @media (-moz-bool-pref: "uc.urlbar.icon.bookmark.removed") {
    #urlbar:hover #star-button-box, #star-button-box[open="true"] {
      display: block !important;
    } 
  }
  @media (-moz-bool-pref: "uc.urlbar.icon.reader-mode.removed") {
    #urlbar:hover #reader-mode-button {
      display: block !important;
    } 
  }
  @media (-moz-bool-pref: "uc.urlbar.icon.pip.removed") {
    #urlbar:hover #picture-in-picture-button {
      display: block !important;
    } 
  }
  @media (-moz-bool-pref: "uc.urlbar.icon.split-view.removed") {
    #urlbar:hover #zen-split-views-box {
      display: block !important;
    }
  }
  @media (-moz-bool-pref: "uc.urlbar.icon.left-side.removed") {
    #urlbar:hover #identity-box {
      display: block !important;
    } 
  }
}

/* Brings back the tracking protection icon */
#urlbar[open] #tracking-protection-icon-container {
  display: block !important;
}

/* Removes certain buttons from the url bar (when toggled) */
@media (-moz-bool-pref: "uc.urlbar.icon.zoom.removed") {
  #urlbar-zoom-button {
    display: none !important;
  }
}
@media (-moz-bool-pref: "uc.urlbar.icon.shield.removed") {
  #tracking-protection-icon-container {
    display: none !important;
  }
}
@media (-moz-bool-pref: "uc.urlbar.icon.bookmark.removed") {
  #star-button-box {
    display: none !important;
  }
}
@media (-moz-bool-pref: "uc.urlbar.icon.reader-mode.removed") {
  #reader-mode-button {
    display: none !important;
  }
}
@media (-moz-bool-pref: "uc.urlbar.icon.pip.removed") {
  #picture-in-picture-button {
    display: none !important;
  }
}
@media (-moz-bool-pref: "uc.urlbar.icon.split-view.removed") {
  #zen-split-views-box {
    display: none !important;
  }
}
@media (-moz-bool-pref: "uc.urlbar.icon.left-side.removed") {
  #identity-box {
    display: none !important;
  }
}

Readme

# Super Url Bar

![image](https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperUrlBar/image.png)

**Latest Version:** 1.4.2
## Settings:
  - Adjust border radius of the url bar (4 Levels of Intensity)
  - Center url text
  - Add border to the url bar.
  - Move 1 button that's directly next to the url bar (you can do that by using 'Customize Toolbar') into the url bar (Credit: [YouCanTouCan](https://github.com/YouCanTouCan))
  - Blur the background when the url bar is in focus (5 Levels of Intensity)
  - Always open Websites in a New Tab from Url Bar
  - Custom Colors for your url bar (option to color when in focus/not in focus or both)
  - Hide icons inside the url bar:
    - Zoom icon
    - Shield icon
    - Bookmark (Star) icon
    - Reader-Mode icon
    - PiP icon
    - Container Tab icon and/or text
    - Split-View icon
    - Left side icons
  - Show hidden icons when hovering the url bar

Preferences

[
    {
        "property": "uc.urlbar.border-radius",
        "label": "Adjusts the border radius of the url bar and its items to a certain degree",
        "type": "dropdown",
        "disabledOn": [],
        "options": [
            {
                "label": "Small",
                "value": "small"
            },
            {
                "label": "Medium",
                "value": "medium"
            },
            {
                "label": "Large",
                "value": "large"
            },
            {
                "label": "Extra Large",
                "value": "xlarge"
            }
        ]
    },
    {
        "property": "uc.urltext.center",
        "label": "Centers the text inside the url bar",
        "type": "dropdown",
        "defaultValue": "normal",
        "disabledOn": [],
        "options": [
            {
                "label": "Centered unless focused",
                "value": "normal"
            },
            {
                "label": "Always Centered",
                "value": "advanced"
            }
        ]
    },
    {
        "property": "uc.urlbar.border",
        "label": "Adds a border to the url bar",
        "type": "checkbox",
        "disabledOn": []
    },
    {
        "property": "uc.urlbar.move-icon-into",
        "label": "Move 1 button that's directly next to the url bar (you can do that by using 'Customize Toolbar') into the url bar",
        "type": "checkbox",
        "disabledOn": []
    },
    {
        "property": "uc.urlbar.blur-intensity",
        "label": "Enable a Background Blur when the Url Bar is focused & select its Intensity",
        "type": "dropdown",
        "disabledOn": [],
        "options": [
            {
                "label": "Subtle",
                "value": "Subtle"
            },
            {
                "label": "Normal",
                "value": "Normal"
            },
            {
                "label": "Rather Strong",
                "value": "RatherStrong"
            },
            {
                "label": "Strong",
                "value": "Strong"
            },
            {
                "label": "Really Strong",
                "value": "ReallyStrong"
            }
        ]
    },
    {
        "property": "uc.urlbar.custom-bg-color.mode",
        "label": "Enables Custom Colors for the Url Bar",
        "placeholder": "Disabled",
        "type": "dropdown",
        "disabledOn": [],
        "options": [
            {
                "label": "Coloring when url bar is in focus",
                "value": "Focus"
            },
            {
                "label": "Coloring when url bar is NOT in focus",
                "value": "noFocus"
            },
            {
                "label": "Always color url bar",
                "value": "AlwaysColor"
            }
        ]
    },
    {
        "property": "uc.urlbar.custom-bg-color",
        "label": "Custom Color for the Url Bar (Dropdown above needs to be enabled)",
        "placeholder": "Enter Color Code",
        "type": "string"
    },
    {
        "property": "browser.urlbar.openintab",
        "label": "Always open websites in a new tab when using url bar",
        "type": "checkbox"
    },
    {
        "property": "uc.urlbar.hide.container-info",
        "label": "Hides the container info",
        "type": "dropdown",
        "placeholder": "Disabled",
        "disabledOn": [],
        "options": [
            {
                "label": "Only hide the label",
                "value": "hideLabel"
            },
            {
                "label": "Only hide the icon",
                "value": "hideIcon"
            },
            {
                "label": "Hide both, icon and label",
                "value": "hideIconLabel"
            }
        ]
    },
    {
        "property": "uc.urlbar.icon.zoom.removed",
        "label": "Hides the Zoom icon",
        "type": "checkbox",
        "disabledOn": []
    },
    {
        "property": "uc.urlbar.icon.shield.removed",
        "label": "Hides the Shield icon",
        "type": "checkbox",
        "disabledOn": []
    },
    {
        "property": "uc.urlbar.icon.bookmark.removed",
        "label": "Hides the Bookmark (Star) icon",
        "type": "checkbox",
        "disabledOn": []
    },
    {
        "property": "uc.urlbar.icon.reader-mode.removed",
        "label": "Hides the Reader-Mode icon",
        "type": "checkbox",
        "disabledOn": []
    },
    {
        "property": "uc.urlbar.icon.pip.removed",
        "label": "Hides the Picture-in-Picture icon",
        "type": "checkbox",
        "disabledOn": []
    },
    {
        "property": "uc.urlbar.icon.split-view.removed",
        "label": "Hides the Split View icon",
        "type": "checkbox",
        "disabledOn": []
    },
    {
        "property": "uc.urlbar.icon.left-side.removed",
        "label": "Hides all the icons/buttons on the left side",
        "type": "checkbox",
        "disabledOn": []
    },
    {
        "property": "uc.urlbar.icon.show-on-hover",
        "label": "Make all the hidden icons show when hovering the url bar",
        "type": "checkbox"
    }
]

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-1455 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.