mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 14:20:14 +02:00
dbefcef892
Differential Revision: https://phabricator.services.mozilla.com/D19660 --HG-- extra : moz-landing-system : lando
273 lines
7.3 KiB
CSS
273 lines
7.3 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: -moz-field;
|
|
--autocomplete-popup-color: -moz-fieldtext;
|
|
--autocomplete-popup-border-color: ThreeDShadow;
|
|
--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(--autocomplete-popup-border-color);
|
|
}
|
|
|
|
.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: 5px;
|
|
padding-bottom: 5px;
|
|
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: 15px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.urlbarView-row-inner {
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|
|
|
|
.urlbarView-row-inner[overflow] {
|
|
mask-image: linear-gradient(to left, 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;
|
|
transform: translateY(-2px);
|
|
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;
|
|
text-overflow: ellipsis;
|
|
max-width: calc(var(--item-content-width) * .7 - 2 * (16px + @urlbarViewIconMarginEnd@));
|
|
}
|
|
|
|
.urlbarView-secondary::before {
|
|
content: "\2014";
|
|
color: var(--panel-disabled-color);
|
|
margin: 0 .4em;
|
|
}
|
|
|
|
.urlbarView-title:empty + .urlbarView-secondary::before {
|
|
display: none;
|
|
}
|
|
|
|
.urlbarView-tags,
|
|
.urlbarView-secondary {
|
|
font-size: .85em;
|
|
}
|
|
|
|
.urlbarView-title > strong,
|
|
.urlbarView-url > strong,
|
|
.urlbarView-tag > strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.urlbarView-secondary {
|
|
color: var(--urlbar-popup-action-color);
|
|
}
|
|
|
|
.urlbarView-url {
|
|
color: var(--urlbar-popup-url-color);
|
|
}
|
|
|
|
.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-secondary::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,
|
|
#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;
|
|
}
|
|
|
|
.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(--autocomplete-popup-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");
|
|
}
|