diff options
Diffstat (limited to 'browser/themes/shared/urlbar-dynamic-results.css')
| -rw-r--r-- | browser/themes/shared/urlbar-dynamic-results.css | 460 |
1 files changed, 460 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..6f14177ace --- /dev/null +++ b/browser/themes/shared/urlbar-dynamic-results.css @@ -0,0 +1,460 @@ +/* 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/. */ + +/** + * Firefox Suggest contextual opt-in + */ + +.urlbarView-row[dynamicType=quickSuggestContextualOptIn] { + background-color: color-mix(in srgb, currentColor 3%, transparent); + + > .urlbarView-row-inner { + align-items: center; + + > .urlbarView-no-wrap { + align-items: center; + + > .urlbarView-favicon { + background-color: color-mix(in srgb, currentColor 3%, transparent); + min-width: 32px; + height: 32px; + padding: 16px; + margin-inline: 0 .7em; + } + } + } + + .urlbarView-results[wrap] > &, + .search-one-offs[wrap] > .urlbarView-quickSuggestContextualOptIn-one-off-container > & { + display: block; + text-align: end; + white-space: normal; + + > .urlbarView-row-inner { + display: block; + text-align: start; + } + + > .urlbarView-button { + margin-bottom: var(--urlbarView-item-block-padding); + } + } +} + +.urlbarView-dynamic-quickSuggestContextualOptIn-text-container { + display: flex; + flex-direction: column; + white-space: normal; +} + +.urlbarView-dynamic-quickSuggestContextualOptIn-title { + font-weight: var(--font-weight-bold); +} + +.urlbarView-dynamic-quickSuggestContextualOptIn-description { + margin-block-start: 2px; + color: var(--urlbarView-secondary-text-color); + font-size: var(--urlbarView-small-font-size); +} + +.urlbarView-dynamic-quickSuggestContextualOptIn-learn_more { + white-space: nowrap; + + &[selected] { + border-radius: var(--focus-outline-offset); + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + } +} + +.urlbarView-quickSuggestContextualOptIn-one-off-container { + border-top: 1px solid var(--urlbarView-separator-color); + margin-top: 10px; + padding-top: 5px; + width: 100%; +} + +/** + * Tab To Search onboarding + */ + +.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-no-wrap { + align-items: center; + + > .urlbarView-favicon { + min-width: 32px; + height: 32px; + -moz-context-properties: fill; + } + } + + &:not([selected]) > .urlbarView-no-wrap { + > .urlbarView-favicon { + color: var(--link-color); + } + + > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description { + color: var(--urlbarView-secondary-text-color); + } + } +} + +.urlbarView-row[dynamicType=onboardTabToSearch][selected] { + fill-opacity: 1; +} + +.urlbarView-dynamic-onboardTabToSearch-text-container { + display: flex; + flex-direction: column; +} + +/* First row of text. */ +.urlbarView-dynamic-onboardTabToSearch-first-row-container { + display: flex; + align-items: baseline; +} + +.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-first-row-container { + flex-wrap: wrap; + + > .urlbarView-action { + max-width: 100%; + flex-basis: 100%; + } + + > .urlbarView-title-separator { + visibility: collapse; + } + } + + > .urlbarView-dynamic-onboardTabToSearch-description { + max-width: 100%; + flex-basis: 100%; + } +} + +/** + * Calculator & Unit Conversion + */ + +.urlbarView-dynamic-calculator-action, +.urlbarView-dynamic-unitConversion-action { + font-size: var(--urlbarView-small-font-size); + font-weight: normal; + + .urlbarView-row:not(:hover, [selected]) & { + visibility: collapse; + } + + &::before { + content: "\2014"; + margin: 0 .4em; + opacity: 0.6; + } +} + +/** + * Quick actions + */ + +.urlbarView-dynamic-quickactions-buttons { + display: flex; + flex-grow: 1; + gap: 0.9em 1.8em; + max-width: 100%; + + &[data-is-quickactions-searchmode] { + flex-wrap: wrap; + } +} + +.urlbarView-quickaction-button { + font-size: var(--urlbarView-small-font-size); + font-weight: var(--font-weight-bold); + box-shadow: 0 0 1px rgba(128, 128, 142, 0.9), 0 0 4px rgba(128, 128, 142, 0.5); + border-radius: 4px; + display: flex; + padding: .5em; + margin-top: 2px; + position: relative; + overflow: hidden; + min-width: 16px; + + &[disabled] { + opacity: var(--toolbarbutton-disabled-opacity); + } + + &:hover:not([disabled]):not([selected]) { + background-color: var(--urlbarView-hover-background); + } + + &[selected] { + background-color: var(--urlbarView-highlight-background); + color: var(--urlbarView-highlight-color); + } + + > .urlbarView-label { + overflow: hidden; + text-overflow: ellipsis; + } + + > .urlbarView-favicon { + display: flex; + align-items: center; + justify-content: center; + margin-inline: 0 .5em; + + > .urlbarView-favicon-img { + width: 16px; + height: 16px; + } + } +} + +.urlbarView-row[dynamicType=quickactions][label]::before { + top: -1em; + margin-inline-start: 6px; +} + +/** + * Site-specific search + */ + +.urlbarView-title-separator.urlbarView-dynamic-contextualSearch-separator { + display: block !important /* override .urlbarView-title-separator rules */; +} + +.urlbarView-dynamic-contextualSearch-description { + font-size: var(--urlbarView-small-font-size); + + .urlbarView-row:not([selected]) & { + color: var(--urlbarView-action-color); + } +} + + +/** + * Weather + */ +.urlbarView-dynamic-weather-currentConditions { + color: var(--urlbar-box-text-color); + background-color: var(--urlbar-box-focus-bgcolor); + padding: 0.61em 0.61em 0.84em; + margin-inline-end: 0.92em; + border-radius: 2px; + text-align: center; + + .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); + } +} + +.urlbarView-dynamic-weather-currently { + font-size: var(--urlbarView-small-font-size); + margin-bottom: 0.53em; +} + +.urlbarView-dynamic-weather-temperature { + margin-inline-end: 0.3em; + font-weight: 600; + font-size: 1.385em; + vertical-align: middle; +} + +.urlbarView-dynamic-weather-weatherIcon { + width: 22px; + height: 23px; + vertical-align: middle; + + @media (prefers-contrast) { + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; + } + + &[iconId="1"] { + content: url("chrome://browser/skin/weather/sunny.svg"); + height: 22px; + } + + &[iconId="2"] { + content: url("chrome://browser/skin/weather/mostly-sunny.svg"); + height: 22px; + } + + &:is([iconId="3"], [iconId="4"], [iconId="6"]) { + content: url("chrome://browser/skin/weather/partly-sunny.svg"); + height: 22px; + } + + &[iconId="5"] { + content: url("chrome://browser/skin/weather/hazy-sunshine.svg"); + height: 22px; + } + + &:is([iconId="7"], [iconId="8"]) { + content: url("chrome://browser/skin/weather/cloudy.svg"); + } + + &[iconId="11"] { + content: url("chrome://browser/skin/weather/fog.svg"); + } + + &[iconId="12"] { + content: url("chrome://browser/skin/weather/showers.svg"); + } + + &:is([iconId="13"], [iconId="14"]) { + content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg"); + height: 22px; + } + + &[iconId="15"] { + content: url("chrome://browser/skin/weather/thunderstorms.svg"); + } + + &:is([iconId="16"], [iconId="17"]) { + content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg"); + } + + &[iconId="18"] { + content: url("chrome://browser/skin/weather/rain.svg"); + } + + &:is([iconId="19"], [iconId="20"], [iconId="25"]) { + content: url("chrome://browser/skin/weather/flurries.svg"); + } + + &[iconId="21"] { + content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg"); + } + + &:is([iconId="22"], [iconId="23"]) { + content: url("chrome://browser/skin/weather/snow.svg"); + } + + &:is([iconId="24"], [iconId="31"]) { + content: url("chrome://browser/skin/weather/ice.svg"); + } + + &:is([iconId="26"], [iconId="29"]) { + content: url("chrome://browser/skin/weather/freezing-rain.svg"); + } + + &[iconId="30"] { + content: url("chrome://browser/skin/weather/hot.svg"); + } + + &[iconId="32"] { + content: url("chrome://browser/skin/weather/windy.svg"); + } + + &[iconId="33"] { + content: url("chrome://browser/skin/weather/night-clear.svg"); + } + + &:is([iconId="34"], [iconId="35"], [iconId="36"], [iconId="38"]) { + content: url("chrome://browser/skin/weather/night-mostly-clear.svg"); + } + + &[iconId="37"] { + content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg"); + } + + &:is([iconId="39"], [iconId="40"]) { + content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg"); + height: 22px; + } + + &:is([iconId="41"], [iconId="42"]) { + content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg"); + } + + &:is([iconId="43"], [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-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner { + align-items: center; + flex-wrap: nowrap; + + > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top { + flex-wrap: wrap; + + > .urlbarView-dynamic-weather-topNoWrap > .urlbarView-dynamic-weather-titleSeparator { + display: none; + } + } +} + +.urlbarView-dynamic-weather-middle { + font-size: var(--urlbarView-small-font-size); + display: flex; + align-items: center; + flex-wrap: wrap; +} + +.urlbarView-dynamic-weather-middleNoWrap { + display: inline-flex; + align-items: center; + + /* When middleNoWrap has overflowed, we want to hide the summaryTextSeparator. + We also want to keep the overflow state stable without it going back to + an underflow state. This is why we are using `visibility: hidden` so the + space is allocated for the summaryTextSeparator and highLow but they are + not visible on the page. Thus, keeping the middleNoWrap in an overflow + state while hiding the summaryTextSeparator. + */ + &[overflow] > :is(.urlbarView-dynamic-weather-summaryTextSeparator, .urlbarView-dynamic-weather-highLow) { + visibility: hidden; + } + + /* The highLowWrap remains hidden when middleNoWrap is not overflowed. Once it + has overflowed, we display the highLowWrap element. + */ + &:not([overflow]) + .urlbarView-dynamic-weather-highLowWrap { + display: none; + } +} + +.urlbarView-dynamic-weather-summaryTextSeparator::before { + content: '\00B7'; + margin: 0.25em; +} + +.urlbarView-dynamic-weather-bottom { + font-size: var(--urlbarView-small-font-size); + margin-top: 0.40em; + + .urlbarView-row[dynamicType=weather]:not([selected]) > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > & { + opacity: 0.6; + } +} |