Add theme: Better URL Bar

This commit is contained in:
Anoms12 2025-01-13 12:10:23 +00:00 committed by GitHub
parent ffe0a3d9ef
commit ee9efd5e9b
4 changed files with 216 additions and 0 deletions

View file

@ -0,0 +1,199 @@
/* Center url text */
#urlbar not[breakout-extend] {
#urlbar-input {
font-size: 12.5px !important;
color: white !important;
text-align: center !important;
}
}
/* Personal URL bar */
* {
--urlbarView-item-block-padding: 4px !important;
--urlbarView-item-inline-padding: 4px !important;
}
.search-one-offs {
display: none !important;
}
#urlbar #urlbar-background {
backdrop-filter: none;
background: color-mix(in srgb, var(--zen-branding-) 45%, transparent);
transition: backdrop-filter 0.3s ease, background 0.3s ease;
}
#urlbar[breakout-extend] {
margin: 0 !important;
min-width: 75vw !important;
width: 75vw !important;
top: 25% !important;
left: 12.5vw !important;
border-radius: 30px !important;
#urlbar-input {
margin-left: 2px !important;
margin-right: 0 !important;
}
#identity-permission-box,
#tracking-protection-icon-container,
#page-action-buttons {
display: none !important;
}
#identity-icon-box {
margin-left: 1px !important;
padding-left: 6px !important;
padding-right: 6px !important;
border-radius: var(--urlbar-icon-border-radius) !important;
}
.verifiedDomain {
image {
list-style-image: url("chrome://browser/skin/zen-icons/link.svg") !important;
scale: 1;
}
}
#identity-box:is([pageproxystate="invalid"]).verifiedDomain {
image {
list-style-image: url("chrome://global/skin/icons/search-glass.svg") !important;
scale: 1;
}
}
#urlbar-input {
font-size: 18px !important;
}
#urlbar-background {
backdrop-filter: blur(2.5px);
background: light-dark(
rgba(255, 255, 255, 0.9),
rgba(00, 00, 00, 0.9)
) !important; /* bg color */
border-radius: 17px !important;
}
}
.urlbarView-row {
background: transparent !important;
transition: transform 0.2s ease;
padding: 5px 0px 5px 0px !important;
.urlbarView-row-inner {
border-radius: 8px !important;
transition: background 0.2s ease;
}
/* Hide the Icon in the switch tab prompt */
.urlbarView-userContext-icon {
display: none !important;
}
.urlbarView-title,
.urlbarView-url {
font-weight: 400 !important;
margin-top: auto !important;
margin-bottom: auto !important;
}
.urlbarView-title-separator {
margin-top: auto !important;
margin-bottom: auto !important;
}
.urlbarView-button {
display: inline-block !important;
min-width: 0 !important;
min-height: 0 !important;
width: 0 !important;
height: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
opacity: 0;
transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease,
margin 0.2s ease, background-color 0.2s ease !important;
}
.urlbarView-favicon {
transition: background-color 0.2s ease !important;
}
&:active {
transform: scale(0.95, 0.95);
}
&:hover {
.urlbarView-row-inner {
background: var(--urlbarView-hover-background) !important;
}
.urlbarView-button {
max-width: 24px !important;
max-height: 24px !important;
width: 24px !important;
height: 24px !important;
opacity: 1;
margin-left: 2px !important;
margin-right: 2px !important;
}
}
.urlbarView-row-inner[selected] {
background: var(--zen-colors-primary) !important;
}
}
.urlbarView-row[has-action]:is(
[type="switchtab"],
[type="remotetab"],
[type="clipboard"]
)
.urlbarView-action {
margin-left: 8px !important;
}
.urlbarView-row-inner .urlbarView-url {
color: light-dark(
var(--zen-colors-primary),
var(--zen-colors-primary-foreground)
) !important;
}
.urlbarView-row:hover .urlbarView-row-inner,
.urlbarView-row-inner[selected] {
.urlbarView-no-wrap .urlbarView-favicon {
background-color: color-mix(
in srgb,
light-dark(var(--zen-primary-color), var(--zen-colors-primary-foreground))
50%,
transparent
) !important;
}
.urlbarView-url {
color: light-dark(
var(--zen-colors-primary),
var(--zen-colors-primary-foreground)
) !important;
}
}
.urlbarView-action,
.urlbarView-button,
.searchbar-engine-one-off-item {
transition: background-color 0.2s ease !important;
}
.urlbarView-url {
color: var(--zen-colors-primary-foreground) !important;
}
@media (prefers-color-scheme: dark) {
.urlbarView-body-inner,
.search-one-offs {
border-top: 1px solid
light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View file

@ -0,0 +1,3 @@
# Better-URL-Bar
Cleans up and centers Zen's URL bar giving it a more "Arc" feeling

View file

@ -0,0 +1,14 @@
{
"id": "165a466f-cc10-4bce-a5fa-0af9748b9745",
"name": "Better URL Bar",
"description": "Cleans up and centers Zen's URL bar giving it a more Arc feeling",
"homepage": "https://github.com/Anoms12/Better-URL-Bar/tree/main",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/165a466f-cc10-4bce-a5fa-0af9748b9745/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/165a466f-cc10-4bce-a5fa-0af9748b9745/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/165a466f-cc10-4bce-a5fa-0af9748b9745/image.png",
"author": "Anoms12",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-01-13",
"updatedAt": "2025-01-13"
}