forked from ZenBrowserMirrors/zen-desktop
184 lines
5.5 KiB
CSS
184 lines
5.5 KiB
CSS
/* URL and tool bars */
|
|
|
|
#urlbar {
|
|
--toolbarbutton-border-radius: 6px;
|
|
--urlbarView-separator-color: var(--zen-colors-border);
|
|
--urlbarView-hover-background: var(--toolbarbutton-hover-background);
|
|
--urlbarView-highlight-background: var(--toolbarbutton-hover-background);
|
|
border: 1px solid var(--zen-colors-border);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
}
|
|
|
|
#urlbar[focused="true"][breakout-extend="true"] {
|
|
overflow: visible;
|
|
}
|
|
|
|
#searchbar:focus-within {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
#urlbar[focused="true"] {
|
|
box-shadow: var(--panel-shadow) !important;
|
|
}
|
|
|
|
#urlbar[focused="true"] > #urlbar-background {
|
|
background: var(--zen-dialog-background) !important;
|
|
}
|
|
|
|
#urlbar-background { border: transparent !important; }
|
|
|
|
#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
|
|
#searchbar:focus-within {
|
|
outline: none !important;
|
|
outline-offset: none !important;
|
|
outline-color: none !important;
|
|
}
|
|
|
|
#urlbar .urlbar-page-action,
|
|
#urlbar #tracking-protection-icon-container,
|
|
#urlbar:not([breakout-extend="true"]) #identity-box:is(:not(.chromeUI), [pageproxystate="invalid"]) #identity-icon-box {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
#urlbar[breakout-extend="true"] .urlbar-page-action,
|
|
#urlbar[breakout-extend="true"] #tracking-protection-icon-container,
|
|
#urlbar[breakout-extend="true"] #identity-box #identity-icon-box,
|
|
.searchbar-engine-one-off-item {
|
|
border-radius: var(--toolbarbutton-border-radius) !important;
|
|
}
|
|
|
|
#urlbar[breakout-extend="true"] {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
#identity-icon-box,
|
|
#identity-permission-box {
|
|
background: var(--zen-colors-secondary) !important;
|
|
margin: 0 8px 0 0 !important;
|
|
}
|
|
|
|
#identity-permission-box {
|
|
background: var(--zen-colors-border) !important;
|
|
}
|
|
|
|
#urlbar:is([focused], [open]) > #urlbar-background, #searchbar:focus-within {
|
|
background: var(--urlbar-box-bgcolor);
|
|
}
|
|
|
|
#identity-icon-label {
|
|
padding-inline-start: 8px !important;
|
|
}
|
|
|
|
#identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
#urlbar:not([breakout-extend="true"]) #identity-box.chromeUI:not([pageproxystate="invalid"]) #identity-icon-box {
|
|
border-radius: 20px 10px 10px 20px !important;
|
|
}
|
|
|
|
#urlbar:not([extend="true"]) #identity-box #identity-icon-box { 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;
|
|
}
|
|
|
|
.urlbar-page-action,
|
|
#tracking-protection-icon-container {
|
|
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;
|
|
padding: 0 !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
margin: 0 0 0 2px !important;
|
|
}
|
|
|
|
#urlbar[breakout-extend="true"] .urlbar-page-action,
|
|
#urlbar[breakout-extend="true"] #tracking-protection-icon-container {
|
|
width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
|
|
height: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
|
|
}
|
|
|
|
toolbar .toolbarbutton-1:not(.unified-extensions-item-action-button) {
|
|
& > .toolbarbutton-icon,
|
|
& > .toolbarbutton-badge-stack {
|
|
width: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important;
|
|
height: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important;
|
|
}
|
|
}
|
|
|
|
toolbar .zen-sidebar-panel-button {
|
|
& > .toolbarbutton-icon,
|
|
& > .toolbarbutton-badge-stack {
|
|
width: calc(2 * var(--toolbarbutton-inner-padding) + 20px) !important;
|
|
height: calc(2 * var(--toolbarbutton-inner-padding) + 20px) !important;
|
|
}
|
|
}
|
|
|
|
#identity-permission-box {
|
|
border-top-left-radius: 0 !important;
|
|
border-bottom-left-radius: 0 !important;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
#identity-box:has(#identity-permission-box:is([hasPermissions], [hasSharingIcon])):not([pageproxystate="invalid"]) #identity-icon-box {
|
|
border-top-right-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
#tracking-protection-icon-container,
|
|
#page-action-buttons {
|
|
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;
|
|
}
|
|
|
|
#urlbar[breakout-extend="true"] #notification-popup-box {
|
|
min-width: calc(var(--urlbar-min-height) - 4 * var(--urlbar-container-padding)) !important;
|
|
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;
|
|
}
|
|
|
|
.panel-footer:has(button.popup-notification-dropmarker:not([hidden="true"])) button.popup-notification-secondary-button {
|
|
border-top-right-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
}
|
|
|
|
.searchbar-engine-one-off-item {
|
|
max-width: 28px;
|
|
min-width: 28px !important;
|
|
transition: background 0s;
|
|
justify-content: center;
|
|
}
|
|
|
|
#downloadsHistory {
|
|
margin-top: 5px
|
|
}
|