Bug 1606785 - Format urlbar CSS files with Prettier r=urlbar-reviewers,desktop-theme-reviewers,dao
Differential Revision: https://phabricator.services.mozilla.com/D249180
This commit is contained in:
hannajones
committed by
hjones@mozilla.com
hjones@mozilla.com
parent
41bc4d5237
commit
a7a4f31251
@@ -5,7 +5,7 @@
|
||||
--testDynamicResult0: ok0;
|
||||
}
|
||||
|
||||
.urlbarView-row[dynamicType=test] > .urlbarView-row-inner {
|
||||
.urlbarView-row[dynamicType="test"] > .urlbarView-row-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
@@ -46,5 +46,8 @@
|
||||
.urlbarView-dynamic-test-button2[selected] {
|
||||
color: white;
|
||||
background-color: var(--urlbarView-primary-button-background);
|
||||
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
|
||||
box-shadow:
|
||||
0 0 0 1px #0a84ff inset,
|
||||
0 0 0 1px #0a84ff,
|
||||
0 0 0 4px rgba(10, 132, 255, 0.3);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
--testDynamicResult1: ok1;
|
||||
}
|
||||
|
||||
.urlbarView-row[dynamicType=test] > .urlbarView-row-inner {
|
||||
.urlbarView-row[dynamicType="test"] > .urlbarView-row-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
@@ -46,5 +46,8 @@
|
||||
.urlbarView-dynamic-test-button2[selected] {
|
||||
color: white;
|
||||
background-color: var(--urlbarView-primary-button-background);
|
||||
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
|
||||
box-shadow:
|
||||
0 0 0 1px #0a84ff inset,
|
||||
0 0 0 1px #0a84ff,
|
||||
0 0 0 4px rgba(10, 132, 255, 0.3);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
* Firefox Suggest contextual opt-in
|
||||
*/
|
||||
|
||||
.urlbarView-row[dynamicType=quickSuggestContextualOptIn] {
|
||||
.urlbarView-row[dynamicType="quickSuggestContextualOptIn"] {
|
||||
background-color: color-mix(in srgb, currentColor 3%, transparent);
|
||||
|
||||
> .urlbarView-row-inner {
|
||||
@@ -20,7 +20,7 @@
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 16px;
|
||||
margin-inline: 0 .7em;
|
||||
margin-inline: 0 0.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -79,7 +79,7 @@
|
||||
* Tab To Search onboarding
|
||||
*/
|
||||
|
||||
.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner {
|
||||
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
|
||||
min-height: 64px !important; /* Overriding :root:not([uidensity=compact]) .urlbarView-row-inner { min-height } in urlbarView.inc.css */
|
||||
align-items: center;
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.urlbarView-row[dynamicType=onboardTabToSearch][selected] {
|
||||
.urlbarView-row[dynamicType="onboardTabToSearch"][selected] {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
@@ -123,6 +123,7 @@
|
||||
margin-block-start: 2px;
|
||||
}
|
||||
|
||||
/* prettier-ignore */
|
||||
.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container {
|
||||
> .urlbarView-dynamic-onboardTabToSearch-first-row-container {
|
||||
flex-wrap: wrap;
|
||||
@@ -158,7 +159,7 @@
|
||||
|
||||
&::before {
|
||||
content: "\2014";
|
||||
margin: 0 .4em;
|
||||
margin: 0 0.4em;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
@@ -167,7 +168,7 @@
|
||||
* Actions
|
||||
*/
|
||||
|
||||
.urlbarView-row[dynamicType=actions] > .urlbarView-row-inner {
|
||||
.urlbarView-row[dynamicType="actions"] > .urlbarView-row-inner {
|
||||
/* Reduce the padding to 2px so the outline does not get
|
||||
cropped and the actions + outline are aligned with the
|
||||
rest of the results */
|
||||
@@ -205,7 +206,7 @@
|
||||
* Weather
|
||||
*/
|
||||
|
||||
.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner {
|
||||
.urlbarView-row[dynamicType="weather"] > .urlbarView-row-inner {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -217,7 +218,7 @@
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
|
||||
.urlbarView-row[dynamicType=weather]:is([selected], :hover) > .urlbarView-row-inner > & {
|
||||
.urlbarView-row[dynamicType="weather"]:is([selected], :hover) > .urlbarView-row-inner > & {
|
||||
color: var(--urlbarView-result-button-selected-color);
|
||||
background-color: var(--urlbarView-result-button-selected-background-color);
|
||||
}
|
||||
@@ -263,7 +264,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner {
|
||||
.urlbarView-results[wrap] > .urlbarView-row[dynamicType="weather"] > .urlbarView-row-inner {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
> .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top {
|
||||
@@ -306,15 +307,15 @@
|
||||
}
|
||||
|
||||
.urlbarView-dynamic-weather-summaryTextSeparator::before {
|
||||
content: '\00B7';
|
||||
content: "\00B7";
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.urlbarView-dynamic-weather-bottom {
|
||||
font-size: var(--urlbarView-small-font-size);
|
||||
margin-top: 0.40em;
|
||||
margin-top: 0.4em;
|
||||
|
||||
.urlbarView-row[dynamicType=weather]:not([selected]) > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > & {
|
||||
.urlbarView-row[dynamicType="weather"]:not([selected]) > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > & {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
@@ -323,7 +324,7 @@
|
||||
* Fakespot suggestions
|
||||
*/
|
||||
|
||||
.urlbarView-results[wrap] > .urlbarView-row[dynamicType=fakespot] > .urlbarView-row-inner {
|
||||
.urlbarView-results[wrap] > .urlbarView-row[dynamicType="fakespot"] > .urlbarView-row-inner {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@@ -353,7 +354,7 @@
|
||||
.urlbarView-dynamic-fakespot-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #15141A;
|
||||
color: #15141a;
|
||||
font-size: 0.75em;
|
||||
padding-inline: 0 1em;
|
||||
padding-block: 0.27em;
|
||||
@@ -379,14 +380,14 @@
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
&[grade=A] {
|
||||
&[grade="A"] {
|
||||
background-color: rgba(231, 255, 246, 0.7);
|
||||
&::before {
|
||||
content: "A";
|
||||
background-color: rgb(179, 255, 227);
|
||||
}
|
||||
}
|
||||
&[grade=B] {
|
||||
&[grade="B"] {
|
||||
background-color: rgba(222, 250, 255, 0.7);
|
||||
&::before {
|
||||
content: "B";
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
#urlbar[searchmode][breakout-extend] > .urlbar-input-container > #urlbar-label-box,
|
||||
#urlbar:not([searchmode]) > .urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode,
|
||||
#urlbar[breakout-extend] > .urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode,
|
||||
.urlbar-input-container[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action,
|
||||
.urlbar-input-container[pageproxystate="invalid"] > #page-action-buttons > .urlbar-page-action,
|
||||
#identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action:not(#star-button-box),
|
||||
#urlbar[usertyping] > .urlbar-input-container > #page-action-buttons > #urlbar-zoom-button,
|
||||
#urlbar:not([usertyping]) > .urlbar-input-container > .urlbar-go-button,
|
||||
@@ -40,7 +40,7 @@
|
||||
padding-block: var(--urlbar-padding-block);
|
||||
margin-inline: var(--urlbar-margin-inline);
|
||||
|
||||
:root[uidensity=touch] & {
|
||||
:root[uidensity="touch"] & {
|
||||
padding-block: 5px;
|
||||
}
|
||||
}
|
||||
@@ -134,15 +134,15 @@
|
||||
/* Make sure that the location bar's alignment changes according
|
||||
to the input box direction if the user switches the text direction using
|
||||
cmd_switchTextDirection (which applies a dir attribute to the <input>). */
|
||||
&[dir=ltr]:-moz-locale-dir(rtl) {
|
||||
&[dir="ltr"]:-moz-locale-dir(rtl) {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
&[dir=rtl]:-moz-locale-dir(ltr) {
|
||||
&[dir="rtl"]:-moz-locale-dir(ltr) {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
#urlbar:not([focused])[domaindir="ltr"]> .urlbar-input-container > .urlbar-input-box > & {
|
||||
#urlbar:not([focused])[domaindir="ltr"] > .urlbar-input-container > .urlbar-input-box > & {
|
||||
direction: ltr;
|
||||
unicode-bidi: embed;
|
||||
}
|
||||
@@ -300,10 +300,10 @@
|
||||
|
||||
@keyframes urlbar-grow {
|
||||
0% {
|
||||
transform: scaleX(.99) scaleY(.98);
|
||||
transform: scaleX(0.99) scaleY(0.98);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.0);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -324,7 +324,6 @@
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
|
||||
.urlbar-input-box {
|
||||
/* Show the url scheme in a static box when overflowing to the left */
|
||||
position: relative;
|
||||
@@ -369,8 +368,8 @@
|
||||
flex: 400 0 auto;
|
||||
}
|
||||
|
||||
#nav-bar:not([keyNav=true]) #identity-box,
|
||||
#nav-bar:not([keyNav=true]) #tracking-protection-icon-container {
|
||||
#nav-bar:not([keyNav="true"]) #identity-box,
|
||||
#nav-bar:not([keyNav="true"]) #tracking-protection-icon-container {
|
||||
-moz-user-focus: normal;
|
||||
}
|
||||
|
||||
@@ -500,7 +499,7 @@
|
||||
border-radius: var(--urlbar-icon-border-radius);
|
||||
|
||||
@media (prefers-contrast) {
|
||||
fill-opacity: 1.0;
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -645,11 +644,7 @@
|
||||
}
|
||||
|
||||
#urlbar-background {
|
||||
background-image: repeating-linear-gradient(
|
||||
-45deg,
|
||||
rgba(255, 60, 60, 0.25) 0 25px,
|
||||
rgba(175, 0, 0, 0.25) 25px 50px
|
||||
);
|
||||
background-image: repeating-linear-gradient(-45deg, rgba(255, 60, 60, 0.25) 0 25px, rgba(175, 0, 0, 0.25) 25px 50px);
|
||||
|
||||
background-attachment: fixed;
|
||||
/* Override the usual breakout animation so the gradient doesn't shift around
|
||||
@@ -936,7 +931,7 @@
|
||||
|
||||
#urlbar-zoom-button {
|
||||
appearance: none;
|
||||
font-size: .8em;
|
||||
font-size: 0.8em;
|
||||
padding: 3px 7px;
|
||||
border-radius: var(--urlbar-icon-border-radius);
|
||||
background-color: var(--urlbar-box-bgcolor);
|
||||
@@ -985,7 +980,7 @@
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.0);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1060,7 +1055,7 @@
|
||||
.searchbar-search-icon-overlay {
|
||||
pointer-events: none;
|
||||
|
||||
.searchbar-search-button[addengines=true] > & {
|
||||
.searchbar-search-button[addengines="true"] > & {
|
||||
list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg);
|
||||
margin-inline: -15px 4px;
|
||||
margin-top: -10px;
|
||||
@@ -1072,7 +1067,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.searchbar-search-button:hover:not([addengines=true]) > & {
|
||||
.searchbar-search-button:hover:not([addengines="true"]) > & {
|
||||
list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
|
||||
-moz-context-properties: fill;
|
||||
margin-inline: -8px 2px;
|
||||
@@ -1132,7 +1127,7 @@
|
||||
}
|
||||
|
||||
/* No need space if page information icons such as lock and shield is shown */
|
||||
#urlbar[pageproxystate=valid] & {
|
||||
#urlbar[pageproxystate="valid"] & {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
@@ -1149,8 +1144,7 @@
|
||||
}
|
||||
|
||||
/* stylelint-disable media-query-no-invalid */
|
||||
@media (not -moz-pref("browser.urlbar.searchModeSwitcher.featureGate")) and
|
||||
(not -moz-pref("browser.urlbar.scotchBonnet.enableOverride")) {
|
||||
@media (not -moz-pref("browser.urlbar.searchModeSwitcher.featureGate")) and (not -moz-pref("browser.urlbar.scotchBonnet.enableOverride")) {
|
||||
display: none;
|
||||
}
|
||||
/* stylelint-enable media-query-no-invalid */
|
||||
@@ -1265,7 +1259,7 @@
|
||||
margin-inline-start: var(--urlbar-searchmodeswitcher-inline-padding);
|
||||
}
|
||||
|
||||
#urlbar[pageproxystate=invalid] {
|
||||
#urlbar[pageproxystate="invalid"] {
|
||||
#identity-box,
|
||||
#tracking-protection-icon-container {
|
||||
display: none;
|
||||
|
||||
@@ -45,9 +45,17 @@
|
||||
--urlbarView-result-button-size: 24px;
|
||||
--urlbarView-result-button-background-opacity: 60%;
|
||||
--urlbarView-result-button-selected-color: var(--toolbar-field-focus-color);
|
||||
--urlbarView-result-button-selected-background-color: color-mix(in srgb, var(--toolbar-field-focus-background-color) var(--urlbarView-result-button-background-opacity), transparent);
|
||||
--urlbarView-result-button-selected-background-color: color-mix(
|
||||
in srgb,
|
||||
var(--toolbar-field-focus-background-color) var(--urlbarView-result-button-background-opacity),
|
||||
transparent
|
||||
);
|
||||
--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-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);
|
||||
@@ -75,8 +83,11 @@
|
||||
/* stylelint-disable-next-line media-query-no-invalid */
|
||||
@media -moz-pref("browser.urlbar.richSuggestions.featureGate") {
|
||||
--urlbarView-favicon-margin-start: calc((var(--urlbarView-rich-suggestion-default-icon-size) - var(--urlbarView-favicon-width)) / 2);
|
||||
--urlbarView-favicon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - var(--urlbarView-favicon-width)) / 2));
|
||||
}
|
||||
--urlbarView-favicon-margin-end: calc(
|
||||
var(--urlbar-icon-padding) + var(--identity-box-margin-inline) +
|
||||
((var(--urlbarView-rich-suggestion-default-icon-size) - var(--urlbarView-favicon-width)) / 2)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.urlbarView {
|
||||
@@ -125,7 +136,9 @@
|
||||
}
|
||||
&[rich-suggestion][icon-size="24"] {
|
||||
--urlbarView-icon-margin-start: calc((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2);
|
||||
--urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2));
|
||||
--urlbarView-icon-margin-end: calc(
|
||||
var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -150,20 +163,20 @@
|
||||
color: var(--urlbarView-highlight-color);
|
||||
}
|
||||
|
||||
&:not([type=tip], [type=dynamic]) {
|
||||
:root:not([uidensity=compact]) & {
|
||||
&:not([type="tip"], [type="dynamic"]) {
|
||||
:root:not([uidensity="compact"]) & {
|
||||
min-height: 32px;
|
||||
}
|
||||
:root[uidensity=touch] & {
|
||||
:root[uidensity="touch"] & {
|
||||
padding-block: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&[rich-suggestion][type=search] {
|
||||
:root:not([uidensity=compact]) & {
|
||||
&[rich-suggestion][type="search"] {
|
||||
:root:not([uidensity="compact"]) & {
|
||||
min-height: 46px;
|
||||
}
|
||||
:root[uidensity=touch] & {
|
||||
:root[uidensity="touch"] & {
|
||||
padding-block: 4px;
|
||||
}
|
||||
}
|
||||
@@ -183,7 +196,7 @@
|
||||
padding-inline: var(--urlbarView-item-inline-padding);
|
||||
padding-block: var(--urlbarView-item-block-padding);
|
||||
|
||||
:root:not([uidensity=compact]) & {
|
||||
:root:not([uidensity="compact"]) & {
|
||||
min-height: 20px; /* row min-height 32px - (2 * padding-block 6px) */
|
||||
}
|
||||
}
|
||||
@@ -194,8 +207,8 @@
|
||||
flex-shrink: 0;
|
||||
|
||||
.urlbarView[action-override] .urlbarView-row[has-url] > .urlbarView-row-inner > &,
|
||||
.urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > &,
|
||||
.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > & {
|
||||
.urlbarView-row[has-url]:not([type$="tab"]) > .urlbarView-row-inner > &,
|
||||
.urlbarView-row[has-url]:is([type="remotetab"], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > & {
|
||||
/* We prioritize icons + title + action over the url, so they can grow freely,
|
||||
but the url should never disappear when it's visible */
|
||||
max-width: calc(70% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px)));
|
||||
@@ -231,16 +244,16 @@
|
||||
/* Note: switchtab entries show the url only in override mode,
|
||||
remotetab and sponsored ones only when selected or :hover. */
|
||||
.urlbarView[action-override] &[has-url]:not([restyled-search]),
|
||||
&[has-url]:not([type$=tab], [sponsored], [restyled-search]),
|
||||
&[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]),
|
||||
&[type=tabtosearch] {
|
||||
&[has-url]:not([type$="tab"], [sponsored], [restyled-search]),
|
||||
&[has-url]:is([type="remotetab"], [sponsored]):is(:hover, [selected]),
|
||||
&[type="tabtosearch"] {
|
||||
/* This targets both rich and non-rich results, so not using the child selector here. */
|
||||
.urlbarView-title-separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap {
|
||||
&[type="tabtosearch"] > .urlbarView-row-inner > .urlbarView-no-wrap {
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .urlbarView-action {
|
||||
@@ -308,7 +321,7 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.urlbarView-row[type=tabtosearch]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & {
|
||||
.urlbarView-row[type="tabtosearch"]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & {
|
||||
/* We use the URL color for this icon to inherit its accessibility
|
||||
properties, like adapting to high contrast modes. We also want to ensure
|
||||
contrast from the result highlight. */
|
||||
@@ -332,7 +345,7 @@
|
||||
stroke: var(--toolbar-field-focus-background-color);
|
||||
|
||||
/* Favicon badges have this priority: pinned > bookmark. */
|
||||
.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > & {
|
||||
.urlbarView-row[type="bookmark"] > .urlbarView-row-inner > .urlbarView-no-wrap > & {
|
||||
background-image: url(chrome://browser/skin/bookmark-12.svg);
|
||||
fill: var(--toolbarbutton-icon-fill-attention);
|
||||
}
|
||||
@@ -421,7 +434,7 @@
|
||||
|
||||
.urlbarView-button:not(:empty):not(.urlbarView-button-menu) {
|
||||
border-radius: var(--toolbarbutton-border-radius);
|
||||
padding: .5em 1em;
|
||||
padding: 0.5em 1em;
|
||||
margin-inline-end: 1.4em;
|
||||
font-size: 0.93em;
|
||||
font-weight: var(--font-weight-bold);
|
||||
@@ -454,7 +467,7 @@
|
||||
|
||||
/* Tip rows */
|
||||
|
||||
.urlbarView-row[type=tip] {
|
||||
.urlbarView-row[type="tip"] {
|
||||
padding-block: 18px;
|
||||
border-block: 0;
|
||||
border-radius: 0;
|
||||
@@ -510,15 +523,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:not([tip-type=dismissalAcknowledgment]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
|
||||
&:not([tip-type="dismissalAcknowledgment"]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-inline-end: 12px;
|
||||
flex-basis: 24px;
|
||||
flex-grow: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
&[tip-type=dismissalAcknowledgment] {
|
||||
&[tip-type="dismissalAcknowledgment"] {
|
||||
padding-block: 6px;
|
||||
|
||||
&:last-child {
|
||||
@@ -527,7 +540,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Row label (a.k.a. group label) */
|
||||
|
||||
.urlbarView-row[label] {
|
||||
@@ -560,7 +572,7 @@
|
||||
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 {
|
||||
&[type="tip"]::before {
|
||||
top: calc(var(--urlbarView-labeled-row-label-top) - var(--urlbarView-labeled-tip-margin-top-extra) + 1px);
|
||||
}
|
||||
|
||||
@@ -650,7 +662,7 @@
|
||||
.urlbarView-title-separator {
|
||||
&::before {
|
||||
content: "\2014";
|
||||
margin: 0 .4em;
|
||||
margin: 0 0.4em;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@@ -688,7 +700,7 @@
|
||||
}
|
||||
|
||||
.urlbarView-row[sponsored]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & {
|
||||
opacity: .6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > & {
|
||||
@@ -712,7 +724,8 @@
|
||||
composition. We set opacity: 0 at the 0% keyframe to ensure the text is not
|
||||
seen by the user until after the delay. */
|
||||
@keyframes urlbarView-action-slide-in {
|
||||
0%, 28.6% {
|
||||
0%,
|
||||
28.6% {
|
||||
translate: var(--urlbarView-action-slide-in-distance);
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -723,14 +736,14 @@
|
||||
}
|
||||
|
||||
/* Switch-to-tab and Clipboard action text is styled as a chiclet. */
|
||||
.urlbarView-row[has-action]:is([type=switchtab], [type=remotetab], [type=clipboard]) {
|
||||
.urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) {
|
||||
> .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
|
||||
border-radius: var(--toolbarbutton-border-radius);
|
||||
padding: 4px 8px;
|
||||
margin-block: -2px;
|
||||
margin-inline-start: 8px;
|
||||
|
||||
:root[uidensity=compact] & {
|
||||
:root[uidensity="compact"] & {
|
||||
padding-block: 3px;
|
||||
|
||||
&.urlbarView-userContext {
|
||||
@@ -778,9 +791,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.urlbarView:not([action-override]) .urlbarView-row[type=switchtab],
|
||||
.urlbarView-row[type=remotetab]:not([selected], :hover),
|
||||
.urlbarView-row[type=clipboard] {
|
||||
.urlbarView:not([action-override]) .urlbarView-row[type="switchtab"],
|
||||
.urlbarView-row[type="remotetab"]:not([selected], :hover),
|
||||
.urlbarView-row[type="clipboard"] {
|
||||
> .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before {
|
||||
/* We make the title separator transparent so it stays in the accessibility
|
||||
tree. We want screen readers to pause between the result title and the
|
||||
@@ -807,9 +820,9 @@
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.urlbarView-row:is([type=remotetab], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > &,
|
||||
.urlbarView-row:is([type="remotetab"], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > &,
|
||||
.urlbarView-row:is([show-action-text], [restyled-search]) > .urlbarView-row-inner > &,
|
||||
.urlbarView:not([action-override]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > & {
|
||||
.urlbarView:not([action-override]) .urlbarView-row[type="switchtab"] > .urlbarView-row-inner > & {
|
||||
/* Use visibility:collapse instead of display:none since the latter can
|
||||
confuse the overflow state of these elements when their content
|
||||
changes while they're hidden (bug 1549787). */
|
||||
@@ -830,7 +843,7 @@
|
||||
.urlbarView-tag {
|
||||
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
|
||||
padding: 0 4px;
|
||||
margin-inline-start: .4em;
|
||||
margin-inline-start: 0.4em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@@ -924,13 +937,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* prettier-ignore */
|
||||
.urlbarView-row[rich-suggestion]:not([selected]) > .urlbarView-row-inner > .urlbarView-row-body > :is(.urlbarView-row-body-description, .urlbarView-row-body-bottom) {
|
||||
color: var(--urlbarView-secondary-text-color);
|
||||
}
|
||||
|
||||
/* Sponsored Firefox Suggest rows */
|
||||
|
||||
.urlbarView-row[type$=_adm_sponsored][icon-size="16"] > .urlbarView-row-inner {
|
||||
.urlbarView-row[type$="_adm_sponsored"][icon-size="16"] > .urlbarView-row-inner {
|
||||
/* Keep the status quo before these rows were rich suggestions, where the row
|
||||
height is roughly the same as usual rows. */
|
||||
padding-block: 0;
|
||||
@@ -938,28 +952,28 @@
|
||||
|
||||
/* Other Firefox Suggest rows */
|
||||
|
||||
.urlbarView-row[type$=_pocket] > .urlbarView-row-inner > .urlbarView-favicon,
|
||||
.urlbarView-row[type$=_pocket] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
|
||||
.urlbarView-row[type$="_pocket"] > .urlbarView-row-inner > .urlbarView-favicon,
|
||||
.urlbarView-row[type$="_pocket"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
|
||||
fill: var(--pocket-icon-fill);
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
.urlbarView-row:is([type$=_amo], [type$=_pocket])[icon-size="24"] > .urlbarView-row-inner > .urlbarView-favicon {
|
||||
.urlbarView-row:is([type$="_amo"], [type$="_pocket"])[icon-size="24"] > .urlbarView-row-inner > .urlbarView-favicon {
|
||||
padding: calc((var(--urlbarView-top-pick-large-icon-box-size) - 24px) / 2);
|
||||
background-color: var(--urlbar-box-focus-bgcolor);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.urlbarView-row:is([type$=_amo], [type$=_pocket])[icon-size="24"]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-favicon {
|
||||
.urlbarView-row:is([type$="_amo"], [type$="_pocket"])[icon-size="24"]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-favicon {
|
||||
background-color: var(--urlbarView-result-button-selected-background-color);
|
||||
}
|
||||
|
||||
.urlbarView-row[type$=_vpn][icon-size="32"] > .urlbarView-row-inner > .urlbarView-favicon {
|
||||
.urlbarView-row[type$="_vpn"][icon-size="32"] > .urlbarView-row-inner > .urlbarView-favicon {
|
||||
padding: calc((var(--urlbarView-top-pick-large-icon-box-size) - 32px) / 2);
|
||||
}
|
||||
|
||||
.urlbarView-row[dynamicType=weather],
|
||||
.urlbarView-row[type=weather] {
|
||||
.urlbarView-row[dynamicType="weather"],
|
||||
.urlbarView-row[type="weather"] {
|
||||
/* Use the colors in the icon SVG files except in HCM and when the row is
|
||||
selected. Note that the SVG uses light or dark colors as appropriate. */
|
||||
&:not([selected]) > .urlbarView-row-inner > .urlbarView-favicon {
|
||||
@@ -972,6 +986,7 @@
|
||||
AccuWeather API response via Merino. These rules apply to both the older
|
||||
weather UI treatments ("simpler" and "full", which use a dynamic result)
|
||||
and the new treatment ("simplest", which is a standard rich suggestion). */
|
||||
/* prettier-ignore */
|
||||
> .urlbarView-row-inner > .urlbarView-dynamic-weather-currentConditions > .urlbarView-dynamic-weather-currentTemperature > .urlbarView-dynamic-weather-weatherIcon,
|
||||
> .urlbarView-row-inner > .urlbarView-favicon {
|
||||
/* icon-variation="1" is "Sunny", which we'll use as the default to ensure an
|
||||
@@ -1063,7 +1078,9 @@
|
||||
}
|
||||
|
||||
.urlbarView-actions-container {
|
||||
margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end));
|
||||
margin-inline-start: calc(
|
||||
var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end)
|
||||
);
|
||||
margin-block-end: var(--urlbarView-item-block-padding);
|
||||
}
|
||||
|
||||
@@ -1072,7 +1089,7 @@
|
||||
font-weight: var(--font-weight-bold);
|
||||
border-radius: var(--toolbarbutton-border-radius);
|
||||
border: 1px solid transparent;
|
||||
padding: .4em .6em;
|
||||
padding: 0.4em 0.6em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: var(--urlbarView-action-button-background-color);
|
||||
@@ -1081,7 +1098,7 @@
|
||||
> img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-inline-end: .4em;
|
||||
margin-inline-end: 0.4em;
|
||||
-moz-context-properties: fill, fill-opacity;
|
||||
}
|
||||
|
||||
@@ -1098,11 +1115,11 @@
|
||||
border-top-color: var(--identity-tab-color);
|
||||
}
|
||||
|
||||
.urlbarView[action-override] &[data-action=tabswitch] {
|
||||
.urlbarView[action-override] &[data-action="tabswitch"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[data-action^=tabgroup-] {
|
||||
&[data-action^="tabgroup-"] {
|
||||
color: light-dark(var(--tab-group-color-pale), var(--tab-group-label-text-dark));
|
||||
background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
|
||||
max-width: 30%;
|
||||
@@ -1136,7 +1153,7 @@
|
||||
border-top: 1px solid var(--urlbarView-separator-color);
|
||||
}
|
||||
|
||||
:root[uidensity=touch] #urlbar .search-one-offs:not([hidden]) {
|
||||
:root[uidensity="touch"] #urlbar .search-one-offs:not([hidden]) {
|
||||
padding-block: 15px;
|
||||
}
|
||||
|
||||
@@ -1173,7 +1190,7 @@
|
||||
|
||||
#urlbar .search-setting-button {
|
||||
/* Force empty space before the button */
|
||||
margin-inline-start: calc(32px - /* settings start padding */ 8px );
|
||||
margin-inline-start: calc(32px - /* settings start padding */ 8px);
|
||||
}
|
||||
|
||||
.urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
|
||||
@@ -1228,7 +1245,7 @@
|
||||
--panel-border-color: var(--arrowpanel-border-color);
|
||||
}
|
||||
|
||||
#PopupSearchAutoComplete::part(content) {
|
||||
#PopupSearchAutoComplete::part(content) {
|
||||
--panel-padding: var(--panel-subview-body-padding);
|
||||
/* NOTE(emilio): Once bug 1551637 is fixed we don't need to use block layout
|
||||
* for this (though it doesn't really hurt) */
|
||||
@@ -1236,9 +1253,9 @@
|
||||
}
|
||||
|
||||
@media not (prefers-contrast) {
|
||||
#PopupSearchAutoComplete::part(content) {
|
||||
#PopupSearchAutoComplete::part(content) {
|
||||
/* Remove the top border since the panel is flush with the input. */
|
||||
border-top-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user