mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 21:58:41 +02:00
9aece3ca7b
Moves the mask to the url and title elements, uses a flex layout to ensure elements properly overflow, and fixes alignments and paddings because the new layout would be more compact. rows are slightly taller than before, but they were smaller than the legacy bar, so in the end we should be good. Differential Revision: https://phabricator.services.mozilla.com/D27868 --HG-- extra : moz-landing-system : lando
290 lines
7.9 KiB
CSS
290 lines
7.9 KiB
CSS
%if 0
|
|
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
%endif
|
|
|
|
%filter substitution
|
|
%define urlbarViewPadding 4px
|
|
%define urlbarViewIconMarginEnd 8px
|
|
%define urlbarViewFaviconOffset (@urlbarViewPadding@ + 16px /* type icon width */ + @urlbarViewIconMarginEnd@)
|
|
|
|
:root {
|
|
--autocomplete-popup-background: var(--arrowpanel-background);
|
|
--autocomplete-popup-color: var(--arrowpanel-color);
|
|
--autocomplete-popup-highlight-background: Highlight;
|
|
--autocomplete-popup-highlight-color: HighlightText;
|
|
}
|
|
|
|
:root[lwt-popup-darktext] {
|
|
--urlbar-popup-url-color: hsl(210, 77%, 47%);
|
|
--urlbar-popup-action-color: hsl(178, 100%, 28%);
|
|
}
|
|
|
|
:root[lwt-popup-brighttext] {
|
|
--urlbar-popup-url-color: @lwtPopupBrighttextLinkColor@;
|
|
--urlbar-popup-action-color: #30e60b;
|
|
}
|
|
|
|
#urlbar-results {
|
|
-moz-appearance: none;
|
|
background: var(--autocomplete-popup-background);
|
|
color: var(--autocomplete-popup-color);
|
|
border: 1px solid var(--chrome-content-separator-color);
|
|
border-left-style: none;
|
|
border-right-style: none;
|
|
}
|
|
|
|
.urlbarView-body-inner {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#urlbarView-results {
|
|
box-sizing: border-box;
|
|
padding: @urlbarViewPadding@;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.urlbarView-row {
|
|
border-radius: 2px;
|
|
fill: currentColor;
|
|
fill-opacity: .6;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
padding-inline-start: calc(var(--item-padding-start, calc(5px + @urlbarViewFaviconOffset@)) - @urlbarViewFaviconOffset@);
|
|
padding-inline-end: var(--item-padding-end, 5px);
|
|
}
|
|
|
|
:root[uidensity=touch] .urlbarView-row {
|
|
padding-top: 11px;
|
|
padding-bottom: 11px;
|
|
}
|
|
|
|
.urlbarView-row-inner {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: end;
|
|
justify-content: start;
|
|
}
|
|
|
|
.urlbarView-title[overflow],
|
|
.urlbarView-url[overflow] {
|
|
mask-image: linear-gradient(to left, transparent, black 2em);
|
|
}
|
|
|
|
.urlbarView-title[overflow]:-moz-locale-dir(rtl) {
|
|
mask-image: linear-gradient(to right, transparent, black 2em);
|
|
}
|
|
|
|
.urlbarView-row:hover {
|
|
background: var(--arrowpanel-dimmed);
|
|
}
|
|
|
|
.urlbarView-row[selected] {
|
|
background: var(--autocomplete-popup-highlight-background);
|
|
color: var(--autocomplete-popup-highlight-color);
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
.urlbarView-type-icon,
|
|
.urlbarView-favicon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
margin-inline-end: @urlbarViewIconMarginEnd@;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
}
|
|
|
|
@media (min-resolution: 2dppx) {
|
|
.urlbarView-type-icon,
|
|
.urlbarView-favicon {
|
|
transform: translateY(-1.5px);
|
|
}
|
|
}
|
|
|
|
.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-type-icon {
|
|
background-image: url(chrome://browser/skin/bookmark.svg);
|
|
}
|
|
|
|
.urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-type-icon,
|
|
#urlbar-results:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {
|
|
background-image: url(chrome://browser/skin/tab.svg);
|
|
}
|
|
|
|
.urlbarView-title {
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
/* We prioritize the title over the url, so it can grow freely, but it should
|
|
never crop the url completely */
|
|
flex-shrink: 0;
|
|
max-width: calc(70% - 2 * (16px + @urlbarViewIconMarginEnd@));
|
|
}
|
|
|
|
.urlbarView-title-separator::before {
|
|
content: "\2014";
|
|
color: var(--panel-disabled-color);
|
|
margin: 0 .4em;
|
|
}
|
|
|
|
.urlbarView-title:empty + .urlbarView-tags:empty + .urlbarView-title-separator {
|
|
display: none;
|
|
}
|
|
|
|
.urlbarView-tags,
|
|
.urlbarView-secondary {
|
|
font-size: .85em;
|
|
}
|
|
|
|
.urlbarView-title > strong,
|
|
.urlbarView-url > strong,
|
|
.urlbarView-tag > strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.urlbarView-secondary {
|
|
display: inline-block;
|
|
color: var(--urlbar-popup-action-color);
|
|
}
|
|
|
|
.urlbarView-url {
|
|
overflow: hidden;
|
|
color: var(--urlbar-popup-url-color);
|
|
}
|
|
|
|
.urlbarView-url:-moz-locale-dir(rtl) {
|
|
direction: ltr !important;
|
|
}
|
|
|
|
.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-title-separator::before,
|
|
.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-secondary {
|
|
color: inherit;
|
|
}
|
|
|
|
.urlbarView-row[type=remotetab][selected] > .urlbarView-row-inner > .urlbarView-action,
|
|
.urlbarView-row[type=remotetab]:hover > .urlbarView-row-inner > .urlbarView-action,
|
|
.urlbarView-row[type=remotetab]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-url,
|
|
.urlbarView-row[type=search]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-action,
|
|
.urlbarView-row[type=search]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-title-separator,
|
|
#urlbar-results[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-action,
|
|
#urlbar-results:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url {
|
|
display: none;
|
|
}
|
|
|
|
.urlbarView-tags {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.urlbarView-tag {
|
|
background-color: var(--arrowpanel-dimmed);
|
|
border-radius: 2px;
|
|
border: 1px solid var(--panel-separator-color);
|
|
padding: 0 1px;
|
|
margin-inline-start: .4em;
|
|
}
|
|
|
|
.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-tags > .urlbarView-tag {
|
|
background-color: var(--autocomplete-popup-highlight-color);
|
|
color: var(--autocomplete-popup-highlight-background);
|
|
}
|
|
|
|
/* legacy URL bar styles below */
|
|
|
|
#PopupAutoCompleteRichResult,
|
|
#PopupSearchAutoComplete {
|
|
background: var(--autocomplete-popup-background);
|
|
color: var(--autocomplete-popup-color);
|
|
border-color: var(--arrowpanel-border-color);
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
|
|
padding: 4px 3px;
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult .autocomplete-richlistitem {
|
|
min-height: 30px;
|
|
font: message-box;
|
|
border-radius: 2px;
|
|
padding-inline-start: var(--item-padding-start);
|
|
/* For the space after the autocomplete text we have to use a transparent
|
|
border instead of padding, because the latter would considered part of the
|
|
scrollable area when generating the overflow events that we use to
|
|
constrain the autocomplete result item size. */
|
|
border-inline-end: var(--item-padding-end) solid transparent;
|
|
}
|
|
|
|
#PopupAutoCompleteRichResult .autocomplete-richlistitem[selected],
|
|
#PopupSearchAutoComplete .autocomplete-richlistitem[selected] {
|
|
background: var(--autocomplete-popup-highlight-background);
|
|
color: var(--autocomplete-popup-highlight-color);
|
|
}
|
|
|
|
:root[uidensity=touch] #PopupAutoCompleteRichResult .autocomplete-richlistitem {
|
|
min-height: 40px;
|
|
}
|
|
|
|
/* Awesomebar popup items */
|
|
|
|
.ac-separator:not([selected=true]) {
|
|
color: var(--panel-disabled-color);
|
|
}
|
|
|
|
.ac-url:not([selected=true]),
|
|
.autocomplete-richlistitem.aliasOffer > .ac-action:not([selected=true]) {
|
|
color: var(--urlbar-popup-url-color);
|
|
}
|
|
|
|
.ac-action:not([selected=true]) {
|
|
color: var(--urlbar-popup-action-color);
|
|
}
|
|
|
|
html|span.ac-tag {
|
|
background-color: var(--arrowpanel-dimmed);
|
|
border-radius: 2px;
|
|
border: 1px solid var(--panel-separator-color);
|
|
padding: 0 1px;
|
|
}
|
|
|
|
.ac-tags-text[selected] > html|span.ac-tag {
|
|
background-color: var(--autocomplete-popup-highlight-color);
|
|
color: var(--autocomplete-popup-highlight-background);
|
|
}
|
|
|
|
html|span.ac-emphasize-text-title,
|
|
html|span.ac-emphasize-text-tag,
|
|
html|span.ac-emphasize-text-url {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ac-site-icon,
|
|
.ac-type-icon {
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: currentColor;
|
|
fill-opacity: 0.6;
|
|
}
|
|
|
|
.ac-site-icon[selected],
|
|
.ac-type-icon[selected] {
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
.ac-type-icon[type=bookmark] {
|
|
list-style-image: url("chrome://browser/skin/bookmark.svg");
|
|
}
|
|
|
|
.ac-type-icon[type=keyword],
|
|
.ac-site-icon[type=searchengine] {
|
|
list-style-image: url(chrome://browser/skin/search-glass.svg);
|
|
}
|
|
|
|
.ac-type-icon[type=switchtab],
|
|
.ac-type-icon[type=remotetab] {
|
|
list-style-image: url("chrome://browser/skin/tab.svg");
|
|
}
|