mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor URL bar styles for improved notification popup appearance

Browse Source
This commit is contained in:
mr. M
2024-11-23 23:26:55 +01:00
parent e56cd8f3bd
commit ecdd92f08e
1 changed files with 39 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -83,10 +83,6 @@
position: relative;
}
#urlbar:not([extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) #identity-icon-box {
margin-right: 5px;
}
#urlbar:not([extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) {
margin-inline-end: 0 !important;
}
@@ -113,7 +109,7 @@
#identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-icon-box,
#identity-box:has(#notification-popup-box:not([hidden='true'])) #identity-permission-box {
margin-right: 4px !important;
margin-right: 0px !important;
}
#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate='invalid'])
@@ -128,14 +124,44 @@
order: 2 !important;
}
#notification-popup-box {
border-radius: 999px;
margin: 0 4px 0 0 !important;
padding: 0 4px;
min-width: calc(var(--urlbar-min-height) - 4px - 4 * var(--urlbar-container-padding)) !important;
height: calc(var(--urlbar-min-height) - 4px - 4 * var(--urlbar-container-padding)) !important;
justify-content: center;
gap: 8px;
:root[zen-single-toolbar='true'] {
#notification-popup-box {
align-items: center;
justify-content: center;
height: unset !important;
background: transparent !important;
& > image {
margin-top: auto;
margin-bottom: auto;
height: 24px; /* double 12px */
width: 24px;
&:hover {
background: var(--toolbarbutton-hover-background);
border-radius: var(--toolbarbutton-border-radius);
overflow: visible;
}
}
}
}
:root:not([zen-single-toolbar='true']) {
#notification-popup-box {
border-radius: 999px;
margin: 0 4px 0 0 !important;
padding: 0 4px;
min-width: calc(var(--urlbar-min-height) - 4px - 4 * var(--urlbar-container-padding)) !important;
height: calc(var(--urlbar-min-height) - 4px - 4 * var(--urlbar-container-padding)) !important;
justify-content: center;
gap: 8px;
& > image {
padding: 0;
margin-top: auto;
margin-bottom: auto;
}
}
}
#urlbar[breakout-extend='true'] #notification-popup-box {
@@ -143,11 +169,6 @@
height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
}
#notification-popup-box > image {
margin: 0;
padding: 0;
}
button.popup-notification-dropmarker {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;