diff options
Diffstat (limited to 'browser/themes/shared/urlbarView.css')
-rw-r--r-- | browser/themes/shared/urlbarView.css | 66 |
1 files changed, 47 insertions, 19 deletions
diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css index 84982637b7..ee8ee15c2a 100644 --- a/browser/themes/shared/urlbarView.css +++ b/browser/themes/shared/urlbarView.css @@ -18,10 +18,10 @@ --urlbarView-action-color: LinkText; --urlbarView-action-slide-in-distance: 200px; - --urlbarView-row-gutter: 2px; - --urlbarView-small-font-size: 0.85em; + --urlbarView-results-padding: 4px; + --urlbarView-row-gutter: 2px; --urlbarView-item-inline-padding: var(--urlbar-icon-padding); --urlbarView-item-block-padding: 6px; @@ -48,6 +48,10 @@ --urlbarView-result-button-hover-color: var(--toolbar-field-focus-background-color); --urlbarView-result-button-hover-background-color: color-mix(in srgb, var(--toolbar-field-focus-color) var(--urlbarView-result-button-background-opacity), transparent); + --urlbarView-labeled-row-margin-top: calc(1.46em + 4px); + --urlbarView-labeled-row-label-top: calc(-1.27em - 2px); + --urlbarView-labeled-tip-margin-top-extra: 8px; + &:-moz-locale-dir(rtl) { --urlbarView-action-slide-in-distance: -200px; } @@ -94,7 +98,7 @@ } .urlbarView-results { - padding-block: 4px; + padding-block: var(--urlbarView-results-padding); white-space: nowrap; /* Vertically center the one-offs when no results are present. */ @@ -142,12 +146,22 @@ color: var(--urlbarView-highlight-color); } - :root:not([uidensity=compact]) &:not([type=tip], [type=dynamic]) { - min-height: 32px; + &:not([type=tip], [type=dynamic]) { + :root:not([uidensity=compact]) & { + min-height: 32px; + } + :root[uidensity=touch] & { + padding-block: 11px; + } } - :root[uidensity=touch] &:not([type=tip], [type=dynamic]) { - padding-block: 11px; + &[rich-suggestion][type=search] { + :root:not([uidensity=compact]) & { + min-height: 46px; + } + :root[uidensity=touch] & { + padding-block: 4px; + } } } @@ -438,6 +452,7 @@ .urlbarView-row[type=tip] { padding-block: 18px; + border-block: 0; border-radius: 0; &:not(:last-child) { @@ -450,6 +465,14 @@ margin-top: 4px; } + /* For tips with row labels, move the entire row down by an additional + var(--urlbarView-labeled-tip-margin-top-extra) so there's more space + between the tip's top border and the label. They're too close otherwise. + The row label must also be adjusted; see the row label rules. */ + &[label] { + margin-top: calc(var(--urlbarView-labeled-row-margin-top) + var(--urlbarView-labeled-tip-margin-top-extra)); + } + > .urlbarView-row-inner { min-height: 32px; align-items: center; @@ -493,6 +516,10 @@ &[tip-type=dismissalAcknowledgment] { padding-block: 6px; + + &:last-child { + padding-block-end: max(0px, 6px - var(--urlbarView-results-padding)); + } } } @@ -503,7 +530,7 @@ position: relative; /* `margin-block-start` controls how far the main part of the row is from the main part of the previous row. */ - margin-block-start: calc(1.46em + 4px); + margin-block-start: var(--urlbarView-labeled-row-margin-top); &::before { content: attr(label); @@ -512,7 +539,7 @@ selection and hover states. */ position: absolute; /* `top` controls how far the label is from the main part of the row. */ - top: calc(-1.27em - 2px); + top: var(--urlbarView-labeled-row-label-top); margin-inline-start: var(--urlbarView-item-inline-padding); font-size: 0.8em; /* The color and opacity of labels is the same as the "This time, search with" @@ -523,6 +550,16 @@ pointer-events: none; } + /* For tips with row labels, the entire row is moved down by an additional + var(--urlbarView-labeled-tip-margin-top-extra) so there's more space + between the tip's top border and the label; see the tip rules. Here we + compensate so that the label remains the same distance from the previous + row as it would have had we not moved the tip row down. +1px compensates + for the tip's top 1px border. */ + &[type=tip]::before { + top: calc(var(--urlbarView-labeled-row-label-top) - var(--urlbarView-labeled-tip-margin-top-extra) + 1px); + } + :root[lwt-toolbar-field-focus="dark"] &::before { /* Same as `.search-panel-header > label` in searchbar.css */ opacity: 1; @@ -568,11 +605,8 @@ .urlbarView-userContext-icon { height: 14px; - background-image: var(--identity-icon); + width: 14px; -moz-context-properties: fill; - background-size: contain; - background-repeat: no-repeat; - background-position: center center; vertical-align: top; margin-inline-start: 0.35em; } @@ -880,12 +914,6 @@ .urlbarView-row[type$=_yelp][icon-size="38"] > .urlbarView-row-inner > .urlbarView-favicon { padding: calc((52px - 38px) / 2); - border: 1px solid var(--urlbar-box-focus-bgcolor); - border-radius: 2px; -} - -.urlbarView-row[type$=_yelp][icon-size="38"]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-favicon { - border-color: var(--urlbarView-result-button-selected-background-color); } /* Search one-offs */ |