263 lines
7.4 KiB
CSS
263 lines
7.4 KiB
CSS
|
/* Edge-Frfox - urlbar.css
|
||
|
|
* https://github.com/bmFtZQ/edge-frfox */
|
||
|
|
|
||
|
|
/*
|
||
|
|
MARK: Variables
|
||
|
|
*/
|
||
|
|
:root {
|
||
|
|
--urlbar-min-height: 30px !important;
|
||
|
|
--urlbarView-item-inline-padding: calc(1px + var(--uc-urlbar-inline-padding) + var(--uc-urlbar-icon-inline-padding)) !important;
|
||
|
|
--urlbar-icon-border-radius: 99px !important;
|
||
|
|
--urlbar-icon-padding: calc(var(--toolbarbutton-inner-padding) - 2px) !important;
|
||
|
|
--urlbar-margin-inline: 6px !important;
|
||
|
|
--identity-box-margin-inline: 6px !important;
|
||
|
|
--uc-urlbar-icon-inline-padding: var(--uc-toolbarbutton-inner-inline-padding);
|
||
|
|
--uc-urlbar-inline-padding: 5px;
|
||
|
|
--uc-urlbar-shadow: 0 0 4px rgb(0 0 0 / .1);
|
||
|
|
--urlbarView-rich-suggestion-default-icon-size: 32px !important;
|
||
|
|
|
||
|
|
/* urlbar height */
|
||
|
|
& #urlbar-container {
|
||
|
|
--urlbar-container-height: calc(8px + 16px + var(--toolbarbutton-inner-padding) * 2) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
& #urlbar {
|
||
|
|
--urlbar-toolbar-height: calc(8px + 16px + var(--toolbarbutton-inner-padding) * 2) !important;
|
||
|
|
--urlbar-height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important;
|
||
|
|
--urlbar-min-height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Spacing for urlbar suggestion icons. */
|
||
|
|
.urlbarView-row {
|
||
|
|
--urlbarView-icon-margin-start: 0px !important;
|
||
|
|
--urlbarView-icon-margin-end: calc(var(--uc-urlbar-icon-inline-padding) + var(--identity-box-margin-inline)) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
MARK: URL bar
|
||
|
|
*/
|
||
|
|
#urlbar-background,
|
||
|
|
#searchbar {
|
||
|
|
border-radius: calc(var(--urlbar-icon-border-radius) + 2px) !important;
|
||
|
|
|
||
|
|
/* Shadow for URL bar, only appears in light mode. */
|
||
|
|
:root:not([lwtheme]) #nav-bar:not([brighttext]) & {
|
||
|
|
box-shadow: var(--uc-urlbar-shadow, none);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Appearance when the URL bar is expanded. */
|
||
|
|
#urlbar[open] & {
|
||
|
|
border-radius: 8px !important;
|
||
|
|
border-color: transparent !important;
|
||
|
|
box-shadow: 0 10px 16px rgb(0 0 0 / 0.18), 0 3px 5px rgb(0 0 0 / 0.33) !important;
|
||
|
|
outline: 0.5px solid var(--arrowpanel-border-color) !important;
|
||
|
|
|
||
|
|
:root:not([lwtheme]) & {
|
||
|
|
outline-color: var(--panel-separator-color) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Add padding to sides of URL bar. */
|
||
|
|
:is(#urlbar-input-container, .urlbar-input-container),
|
||
|
|
#searchbar {
|
||
|
|
padding-inline: var(--uc-urlbar-inline-padding) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* URL bar suggestions container. */
|
||
|
|
.urlbarView {
|
||
|
|
margin-inline: 0 !important;
|
||
|
|
width: 100% !important;
|
||
|
|
border-inline: 0 !important;
|
||
|
|
padding-block: 0 !important;
|
||
|
|
|
||
|
|
& .urlbarView-body-inner {
|
||
|
|
width: 100% !important;
|
||
|
|
margin-inline: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Remove padding from top of URL bar results, not needed as URL bar input already has padding. */
|
||
|
|
& .urlbarView-results {
|
||
|
|
padding-block-start: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* URL bar item. */
|
||
|
|
.urlbarView-row {
|
||
|
|
padding-block: 0 !important;
|
||
|
|
border: none !important;
|
||
|
|
border-radius: 0 !important;
|
||
|
|
|
||
|
|
& .urlbarView-row-inner {
|
||
|
|
padding-block: 8px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Vertically align search suggestion thumbnail images. */
|
||
|
|
&[rich-suggestion] > .urlbarView-row-inner > .urlbarView-favicon {
|
||
|
|
margin-inline-start: calc(var(--urlbarView-icon-margin-start) + (16px - var(--urlbarView-rich-suggestion-default-icon-size)) / 2) !important;
|
||
|
|
margin-inline-end: calc(var(--urlbarView-icon-margin-end) + (16px - var(--urlbarView-rich-suggestion-default-icon-size)) / 2) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Add highlighted marker to the left of selected URL bar items. */
|
||
|
|
.urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner,
|
||
|
|
.urlbarView-row-inner[selected] {
|
||
|
|
box-shadow: 3px 0 var(--uc-urlbarView-accent-color, var(--toolbar-field-focus-border-color)) inset !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Keep URL bar in place when expanding. */
|
||
|
|
#urlbar[breakout][breakout-extend] {
|
||
|
|
left: 0 !important;
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Search engine selector */
|
||
|
|
.search-one-offs:not([hidden]) {
|
||
|
|
padding-block: 6px !important;
|
||
|
|
|
||
|
|
& .searchbar-engine-one-off-item {
|
||
|
|
min-width: 30px !important;
|
||
|
|
height: 30px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.urlbarView:not([noresults]) > & {
|
||
|
|
border-color: var(--urlbarView-separator-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#urlbar-anon-search-settings {
|
||
|
|
margin-inline-end: 8px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Search engine indicator. */
|
||
|
|
#urlbar-search-mode-indicator {
|
||
|
|
:root:not([lwtheme]) & {
|
||
|
|
background-color: var(--urlbar-box-hover-bgcolor) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
& #urlbar-search-mode-indicator-title {
|
||
|
|
font-size: 0.9em !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Remove border between URL bar input and suggestions. */
|
||
|
|
#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner {
|
||
|
|
border-top: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
MARK: URL bar buttons
|
||
|
|
*/
|
||
|
|
.urlbar-page-action,
|
||
|
|
#urlbar-go-button,
|
||
|
|
.search-go-button,
|
||
|
|
#tracking-protection-icon-container,
|
||
|
|
#identity-icon-box {
|
||
|
|
padding-inline: var(--uc-urlbar-icon-inline-padding) !important;
|
||
|
|
width: calc(var(--uc-urlbar-icon-inline-padding) * 2 + 16px) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Site information and Permissions buttons. */
|
||
|
|
#identity-icon-box,
|
||
|
|
#identity-permission-box,
|
||
|
|
.notification-anchor-icon {
|
||
|
|
padding-inline: var(--uc-urlbar-icon-inline-padding) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Zoom level and tab container indicators. */
|
||
|
|
#userContext-icons,
|
||
|
|
#urlbar-zoom-button {
|
||
|
|
padding-inline: var(--uc-urlbar-icon-inline-padding) !important;
|
||
|
|
margin-block: 0 !important;
|
||
|
|
margin-inline: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Move tracking protection button. */
|
||
|
|
#tracking-protection-icon-container,
|
||
|
|
#page-action-buttons {
|
||
|
|
order: 2 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hide tracking protection button when not hovering over URL bar. */
|
||
|
|
#urlbar-container:not(:hover) #tracking-protection-icon-container:not([open]) {
|
||
|
|
visibility: collapse !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Focus border for URL bar. */
|
||
|
|
#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
|
||
|
|
#searchbar:focus-within {
|
||
|
|
outline-offset: calc(var(--focus-outline-width) * -1 + 1px) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Pin icon for URL bar suggested sites. */
|
||
|
|
.urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
|
||
|
|
fill: var(--toolbar-field-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#urlbar-input::placeholder,
|
||
|
|
.searchbar-textbox::placeholder {
|
||
|
|
opacity: 0.6 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Make the lock icon brighter in dark mode. */
|
||
|
|
#nav-bar[brighttext] #identity-box:not([pageproxystate="invalid"]) #identity-icon {
|
||
|
|
fill-opacity: calc(var(--urlbar-icon-fill-opacity) * 1.8) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Make the URL bar label opaque in light mode, matching the icons. */
|
||
|
|
#nav-bar:not([brighttext]) #identity-box #identity-icon-label {
|
||
|
|
opacity: var(--urlbar-icon-fill-opacity) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
MARK: URL bar label
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* Label on the left of the URL bar, shown when viewing Firefox or extension pages. */
|
||
|
|
#identity-box[pageproxystate="valid"]:is(.notSecureText, .chromeUI, .extensionPage) > .identity-box-button {
|
||
|
|
position: relative;
|
||
|
|
width: unset !important;
|
||
|
|
|
||
|
|
/* Spacing between the icon and label. */
|
||
|
|
& #identity-icon-label {
|
||
|
|
padding-inline-start: 8px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Separator to the right of the label. */
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
height: 16px;
|
||
|
|
border-right: 1px solid currentColor;
|
||
|
|
right: 0;
|
||
|
|
inset-block: 0;
|
||
|
|
margin-block: auto;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Fractional scaling adjustments (150%, 175%, etc.) */
|
||
|
|
@media (1dppx < resolution < 2dppx) {
|
||
|
|
&::after {
|
||
|
|
border-right-width: 1.5px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Remove background from urlbar box. */
|
||
|
|
&:not(:hover, [open]) {
|
||
|
|
background-color: transparent !important;
|
||
|
|
|
||
|
|
/* Separator opacity */
|
||
|
|
&::after {
|
||
|
|
opacity: 0.375;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Fade transition for separator. */
|
||
|
|
@media not (prefers-reduced-motion) {
|
||
|
|
&::after {
|
||
|
|
transition: opacity 0.2s ease;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|