zen-browser / theme-store

🎨 Theme repository for @zen-browser!
https://zen-browser.github.io/theme-store/themes.json
MIT License
130 stars 38 forks source link

[create-theme]: #777

Closed Lisiowen closed 1 hour ago

Lisiowen commented 1 hour ago

Name

Simple Centred Address

Description

Centres the URL bar text and hides buttons when unfocused.

Homepage

No response

Image

https://imgur.com/a/BRvNxWD

Type

Theme Styles

/* ----- Search Bar Idle ----- */

@media (-moz-bool-pref: "theme.sca.enable_centered_text") {
/* Centre text */
#urlbar-input {
  text-align: center !important;
}
}

/* Hide icons */
#page-action-buttons:has(#theme-sca[theme-sca-icon_visibility="quick"]),
#tracking-protection-icon-container:has(#theme-sca[theme-sca-icon_visibility="quick"]),
#identity-box:has(#theme-sca[theme-sca-icon_visibility="quick"]) {
  opacity: 0;
}

#page-action-buttons:has(#theme-sca[theme-sca-icon_visibility="smooth"]),
#tracking-protection-icon-container:has(#theme-sca[theme-sca-icon_visibility="smooth"]),
#identity-box:has(#theme-sca[theme-sca-icon_visibility="smooth"]) {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ----- Search Bar Hover ----- */

/* Reveal icons*/
#urlbar:hover #page-action-buttons,
#urlbar:hover #tracking-protection-icon-container,
#urlbar:hover #identity-box {
  opacity: 1;
}

/* ----- Search Bar Focus ----- */

/* Revert text */
#urlbar[focused=""] #urlbar-input {
  text-align: left !important;
}

/* ----- Button Menu Opened ----- */

/* Keep buttons/menu visible */
#page-action-buttons:has(#star-button-box[open="true"])
#tracking-protection-icon-container[open="true"],
#identity-box:has(#identity-icon-box[open="true"]) {
  opacity: 1;
}

Readme

chrome.css notates what each block does. The text-align: center is only applied when the urlbar is unfocused to keep the modification simple.

Preferences

{
    "property": "theme.sca.enable_centred_text",
    "label": "Centred Text",
    "type": "checkbox",
    "defaultValue": true
}

{
    "property": "theme.sca.icon_visibility",
    "label": "Icon Visibility",
    "type": "dropdown",
    "placeholder": "Fade In On Hover",
    "defaultValue": "smooth",
    "options": [
      {
        "label": "Always Visible",
        "value": "always"
      },
      {
        "label": "Visible On Hover",
        "value": "quick"
      },
      {
        "label": "Fade In On Hover",
        "value": "smooth"
      }
    ]
}
github-actions[bot] commented 1 hour ago

Error creating theme

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

Preferences file is invalid.