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]: Simple Centred Address #779

Closed Lisiowen closed 2 hours ago

Lisiowen commented 2 hours 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 ----- */

/* Centre text */
#urlbar-input {
  text-align: center !important;
}

/* Hide icons */

#page-action-buttons,
#tracking-protection-icon-container,
#identity-box {
  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

No response

github-actions[bot] commented 2 hours ago

Error creating theme

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

Image must be a PNG.