diff options
Diffstat (limited to 'browser/themes/shared/urlbar-dynamic-results.css')
| -rw-r--r-- | browser/themes/shared/urlbar-dynamic-results.css | 478 |
1 files changed, 478 insertions, 0 deletions
diff --git a/browser/themes/shared/urlbar-dynamic-results.css b/browser/themes/shared/urlbar-dynamic-results.css new file mode 100644 index 0000000000..c22b6ca9f1 --- /dev/null +++ b/browser/themes/shared/urlbar-dynamic-results.css @@ -0,0 +1,478 @@ +/* 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/. */ + +/** + * UrlbarProviderTabToSearch + */ + +.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; +} + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap { + align-items: center; +} + +.urlbarView-row[dynamicType=onboardTabToSearch]:hover > .urlbarView-row-inner { + background-color: var(--arrowpanel-dimmed); +} + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] { + background: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); + fill-opacity: 1; +} + +/* Icon */ +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + min-width: 32px; + height: 32px; + color: var(--urlbar-popup-url-color); + -moz-context-properties: fill; +} + +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-favicon { + color: inherit; +} + +.urlbarView-dynamic-onboardTabToSearch-text-container { + display: flex; + flex-direction: column; +} + +/* First row of text. */ +.urlbarView-dynamic-onboardTabToSearch-first-row-container { + display: flex; + align-items: end; +} +.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; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > * { + max-width: 100%; + flex-basis: 100%; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-title-separator { + visibility: collapse; +} +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action { + color: var(--autocomplete-popup-highlight-color); +} +@media (prefers-reduced-motion: no-preference) { + .urlbarView-results:not([wrap]) > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-first-row-container > .urlbarView-action[slide-in] { + animation-name: urlbarView-action-slide-in; + animation-duration: 350ms; + animation-timing-function: var(--animation-easing-function); + } +} + +/* Description text. */ +.urlbarView-dynamic-onboardTabToSearch-description { + margin-block-start: 2px; +} +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description { + max-width: 100%; + flex-basis: 100%; +} +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner:not([selected]) > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description { + opacity: 0.6; +} + +/* CSS for Calculator */ +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner[selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner:hover { + background: var(--arrowpanel-dimmed); +} + +.urlbarView-dynamic-calculator-action { + font-size: .85em; + font-weight: normal; + visibility: collapse; +} + +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner:hover .urlbarView-dynamic-calculator-action, +.urlbarView-row[dynamicType=calculator] > .urlbarView-row-inner[selected] .urlbarView-dynamic-calculator-action { + visibility: visible; +} + +.urlbarView-dynamic-calculator-action::before { + content: "\2014"; + margin: 0 .4em; + opacity: 0.6; +} + +/** UrlbarProviderUnitConversion **/ +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover { + background: var(--autocomplete-popup-hover-background); +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] { + background: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); + fill-opacity: 1; +} + +.urlbarView-dynamic-unitConversion-action { + font-size: .85em; + font-weight: normal; + visibility: collapse; +} + +.urlbarView-dynamic-unitConversion-action::before { + content: "\2014"; + margin: 0 .4em; + opacity: 0.6; +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover .urlbarView-dynamic-unitConversion-action, +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] .urlbarView-dynamic-unitConversion-action { + visibility: visible; +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner:hover .urlbarView-dynamic-unitConversion-action { + color: var(--urlbar-popup-action-color); +} + +.urlbarView-row[dynamicType=unitConversion] > .urlbarView-row-inner[selected] .urlbarView-dynamic-unitConversion-action { + color: var(--autocomplete-popup-highlight-color); +} + +.urlbarView-row[dynamicType=quickactions] > .urlbarView-row-inner { + align-items: start; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-dynamic-quickactions-buttons { + display: flex; + flex-grow: 1; + gap: 0.9em 1.8em; + max-width: 100%; +} + +#urlbar[searchmodesource=actions] .urlbarView-row[dynamicType=quickactions] .urlbarView-dynamic-quickactions-buttons { + flex-wrap: wrap; +} + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=quickactions] > .urlbarView-row-inner { + flex-wrap: unset; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row { + box-shadow: 0px 0px 1px rgba(128, 128, 142, 0.9), 0px 0px 4px rgba(128, 128, 142, 0.5); + border-radius: 4px; + display: flex; + align-items: center; + padding: .5em; + margin-top: 2px; + position: relative; + overflow: hidden; + min-width: 16px; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row[disabled] { + opacity: .4; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-label { + overflow: hidden; + text-overflow: ellipsis; + font-size: 11px; + font-weight: 500; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-favicon { + display: flex; + align-items: center; + justify-content: center; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-favicon-img { + width: 16px; + height: 16px; +} + +.urlbarView-row[dynamicType=quickactions][label]::before { + top: -1em; + margin-inline-start: 6px; +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row:hover:not([disabled]):not([selected]) { + background-color: var(--autocomplete-popup-hover-background); +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-quickaction-row[selected] { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); +} + +.urlbarView-row[dynamicType=quickactions] .urlbarView-title { + display: flex; +} + +/** + * UrlbarProviderContextualSearch + */ + +.urlbarView-row[dynamicType=contextualSearch] .urlbarView-title[overflow] { + mask-image: linear-gradient(to left, transparent, black 2em); +} + +.urlbarView-row[dynamicType=contextualSearch] .urlbarView-title[overflow]:-moz-locale-dir(rtl) { + mask-image: linear-gradient(to right, transparent, black 2em); +} + +.urlbarView-row[dynamicType=contextualSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator.urlbarView-dynamic-contextualSearch-separator { + visibility: visible; +} + +.urlbarView-row[dynamicType=contextualSearch] .urlbarView-dynamic-contextualSearch-description { + font-size: 0.85em; +} + +.urlbarView-row[dynamicType=contextualSearch]:hover > .urlbarView-row-inner { + background-color: var(--autocomplete-popup-hover-background); +} + + +/** + * Weather + * + * All em units used below are based on the spec where 1em is 13px. + * Thus using 13px as a base to calculate the other relative em sizes, either + * a bigger or smaller ratio to 13px. + */ + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner { + flex-wrap: nowrap; +} + +.urlbarView-dynamic-weather-currentConditions { + background-color: var(--autocomplete-popup-hover-background); + padding: 0.61em 0.61em 0.84em; + margin-inline-end: 0.92em; + border-radius: 2px; + text-align: center; +} + +@media (prefers-color-scheme: dark) { + .urlbarView-dynamic-weather-currentConditions { + background-color: var(--autocomplete-popup-highlight-background); + color: var(--autocomplete-popup-highlight-color); + } +} + +.urlbarView-dynamic-weather-currently { + font-size: 0.85em; + margin-bottom: 0.53em; +} + +.urlbarView-dynamic-weather-temperature { + margin-inline-end: 0.3em; + font-weight: 600; + /* The units from the spec: + - 1em is 13px + - temperature is 18px + - We need to figure out the temperature in units of em. + - 18px / 13px = 1.385em + Therefore, the temperature is 1.385em units. + */ + font-size: 1.385em; + vertical-align: middle; +} + +.urlbarView-dynamic-weather-weatherIcon { + vertical-align: middle; +} + +/* Weather Icon color for high contrast mode */ +@media (prefers-contrast) { + .urlbarView-dynamic-weather-weatherIcon { + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; + } +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="1"] { + content: url("chrome://browser/skin/weather/sunny.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="2"] { + content: url("chrome://browser/skin/weather/mostly-sunny.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="3"], +.urlbarView-dynamic-weather-weatherIcon[iconId="4"], +.urlbarView-dynamic-weather-weatherIcon[iconId="6"] { + content: url("chrome://browser/skin/weather/partly-sunny.svg"); +} + + +.urlbarView-dynamic-weather-weatherIcon[iconId="5"] { + content: url("chrome://browser/skin/weather/hazy-sunshine.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="7"], +.urlbarView-dynamic-weather-weatherIcon[iconId="8"] { + content: url("chrome://browser/skin/weather/cloudy.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="11"] { + content: url("chrome://browser/skin/weather/fog.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="12"] { + content: url("chrome://browser/skin/weather/showers.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="13"], +.urlbarView-dynamic-weather-weatherIcon[iconId="14"] { + content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="15"] { + content: url("chrome://browser/skin/weather/thunderstorms.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="16"], +.urlbarView-dynamic-weather-weatherIcon[iconId="17"] { + content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="18"] { + content: url("chrome://browser/skin/weather/rain.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="19"], +.urlbarView-dynamic-weather-weatherIcon[iconId="20"], +.urlbarView-dynamic-weather-weatherIcon[iconId="25"] { + content: url("chrome://browser/skin/weather/flurries.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="21"] { + content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="22"], +.urlbarView-dynamic-weather-weatherIcon[iconId="23"] { + content: url("chrome://browser/skin/weather/snow.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="24"], +.urlbarView-dynamic-weather-weatherIcon[iconId="31"] { + content: url("chrome://browser/skin/weather/ice.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="26"], +.urlbarView-dynamic-weather-weatherIcon[iconId="29"] { + content: url("chrome://browser/skin/weather/freezing-rain.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="30"] { + content: url("chrome://browser/skin/weather/hot.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="32"] { + content: url("chrome://browser/skin/weather/windy.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="33"] { + content: url("chrome://browser/skin/weather/night-clear.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="34"], +.urlbarView-dynamic-weather-weatherIcon[iconId="35"], +.urlbarView-dynamic-weather-weatherIcon[iconId="36"], +.urlbarView-dynamic-weather-weatherIcon[iconId="38"] { + content: url("chrome://browser/skin/weather/night-mostly-clear.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="37"] { + content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="39"], +.urlbarView-dynamic-weather-weatherIcon[iconId="40"] { + content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="41"], +.urlbarView-dynamic-weather-weatherIcon[iconId="42"] { + content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg"); +} + +.urlbarView-dynamic-weather-weatherIcon[iconId="43"], +.urlbarView-dynamic-weather-weatherIcon[iconId="44"] { + content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg"); +} + +.urlbarView-dynamic-weather-summary { + flex-grow: 1; + flex-shrink: 1; + min-width: 0; +} + +.urlbarView-dynamic-weather-top { + display: flex; + align-items: center; +} + +.urlbarView-dynamic-weather-topNoWrap { + display: inline-flex; + align-items: center; +} + +.urlbarView-dynamic-weather-middle { + font-size: 0.85em; + display: flex; + align-items: center; +} + +.urlbarView-dynamic-weather-middleNoWrap { + display: inline-flex; + align-items: center; +} + +.urlbarView-dynamic-weather-summaryTextSeparator::before { + content: '\00B7'; + margin: 0.25em; +} + +.urlbarView-dynamic-weather-highLow { + /* The 100% width is needed so the highLow wraps at the same time as the URL + when the URL has overflowed. + TODO - In a follow-up patch I will fix it so the highLow will wrap when the + highLow has overflowed, it will wrap separte from the URL.*/ + width: 100%; +} + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner .urlbarView-dynamic-weather-top, +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner .urlbarView-dynamic-weather-middle { + flex-wrap: wrap; +} + +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > +.urlbarView-dynamic-weather-top > .urlbarView-dynamic-weather-topNoWrap > .urlbarView-dynamic-weather-titleSeparator, +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > +.urlbarView-dynamic-weather-middle > .urlbarView-dynamic-weather-middleNoWrap > .urlbarView-dynamic-weather-summaryTextSeparator { + display: none; +} + +.urlbarView-dynamic-weather-bottom { + font-size: 0.85em; + margin-top: 0.40em; + opacity: 0.6; +} + +.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner[selected] > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top > .urlbarView-url { + color: inherit; +} + +.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner[selected] > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-bottom { + opacity: 1; +} |