346 lines
12 KiB
CSS
346 lines
12 KiB
CSS
/* 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/. */
|
|
|
|
/* TODO (Bug 2008938): Make in-page Smartbar styling not dependent on chrome styles */
|
|
@import url("chrome://browser/skin/urlbar-searchbar.css");
|
|
@import url("chrome://browser/skin/urlbar/view.css");
|
|
|
|
:host,
|
|
:root {
|
|
--smartbar-background-color: light-dark(white, var(--color-violet-110));
|
|
--smartbar-inactive-background-color: color-mix(in srgb, var(--smartbar-background-color) 95%, var(--color-white));
|
|
/* If this changes, you must also update the tokens referenced in the render in smartbar-glow.mjs */
|
|
--smartbar-border-color-gradient: linear-gradient(95deg, var(--color-violet-50) 1.22%, var(--color-pink-40) 49.98%, var(--color-yellow-30) 99.68%);
|
|
--smartbar-border-style-gradient: var(--border-width) solid;
|
|
--smartbar-box-shadow: var(--smartwindow-shadow, var(--box-shadow-level-2));
|
|
--smartbar-glow-color: color-mix(in srgb, var(--color-violet-40) 50%, transparent);
|
|
--smartbar-max-height: 50vh;
|
|
--smartbar-max-visible-rows: 7;
|
|
--smartbar-max-width: calc(var(--size-item-xlarge) * 12);
|
|
--smartbar-outline: var(--focus-outline-width) solid var(--smartbar-outline-color);
|
|
--smartbar-outline-color: light-dark(var(--color-violet-30), var(--color-violet-50));
|
|
--smartbar-cta-icon-fill: var(--icon-color);
|
|
--smartbar-scroll-mask-height: calc(var(--urlbarview-row-min-height) * 1.5);
|
|
--text-color-deemphasized: light-dark(color-mix(in srgb, var(--color-gray-100) 69%, transparent), color-mix(in srgb, var(--color-gray-0) 69%, transparent));
|
|
|
|
--toolbar-field-border-color: transparent;
|
|
}
|
|
|
|
.smartbar {
|
|
--urlbarView-favicon-margin-start: 0;
|
|
--urlbarView-favicon-margin-end: var(--space-small);
|
|
--urlbarView-row-padding-inline: var(--space-small);
|
|
--urlbarview-row-padding-block: var(--space-small);
|
|
--urlbarView-labeled-row-margin-top: 0;
|
|
--urlbar-background-border: var(--border-width) solid var(--border-color-transparent);
|
|
|
|
--urlbarView-small-font-size: var(--font-size-small);
|
|
|
|
@media not (forced-colors) {
|
|
--urlbarview-background-color-hover: light-dark(var(--color-violet-0), var(--button-background-color-hover));
|
|
--urlbarview-background-color-selected: light-dark(var(--color-violet-10), var(--button-background-color-active));
|
|
--urlbarview-text-color-selected: var(--toolbar-field-focus-color);
|
|
--urlbarview-text-color-secondary: light-dark(color-mix(in srgb, var(--color-gray-100) 69%, transparent), var(--color-violet-desaturated-20));
|
|
--link-color: light-dark(var(--color-violet-70), var(--color-violet-30));
|
|
|
|
&:is(:hover, :focus-within, [focused], [open]) > .urlbar-background {
|
|
outline: none;
|
|
background-color: var(--smartbar-background-color);
|
|
transition: background-color 0.2s ease-out;
|
|
}
|
|
|
|
&[open] > .urlbar-background {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
box-shadow: var(--smartbar-box-shadow);
|
|
}
|
|
|
|
/* Show outline on keyboard focus */
|
|
&:focus-within:not([usertyping]):not([suppress-focus-border]) > .urlbar-background {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
outline: var(--smartbar-outline);
|
|
outline-offset: var(--focus-outline-offset);
|
|
}
|
|
}
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: var(--smartbar-max-height);
|
|
max-width: var(--smartbar-max-width);
|
|
width: 100%;
|
|
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
&[open] > .urlbarView {
|
|
display: block;
|
|
}
|
|
|
|
&[open] > .urlbar-background::before {
|
|
background-color: transparent;
|
|
background-image: var(--smartbar-border-color-gradient);
|
|
}
|
|
|
|
&[open] > .smartbar-glow {
|
|
display: none;
|
|
}
|
|
|
|
/* Sidebar mode styles */
|
|
&[suggestions-position="top"] > .urlbarView {
|
|
order: -1;
|
|
z-index: 1;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-bottom: var(--border-width) solid var(--urlbarview-separator-color);
|
|
/* Match the frame's rounded corners so the scrollbar is clipped inside it. */
|
|
border-start-start-radius: var(--border-radius-large);
|
|
border-start-end-radius: var(--border-radius-large);
|
|
}
|
|
|
|
&[suggestions-position="bottom"] > .urlbarView {
|
|
/* Match the frame's rounded corners so the scrollbar is clipped inside it. */
|
|
border-end-start-radius: var(--border-radius-large);
|
|
border-end-end-radius: var(--border-radius-large);
|
|
}
|
|
|
|
> .urlbarView {
|
|
overflow-y: auto;
|
|
margin: 0;
|
|
width: 100%;
|
|
/*
|
|
* Limit to `--smartbar-max-visible-rows` non-rich results. Fewer results
|
|
* are visible if rich results are present.
|
|
*/
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
max-height: calc(
|
|
(var(--urlbarView-row-inner-min-height) + var(--urlbarview-row-padding-block) * 2 + var(--urlbarView-row-gutter) * 2) * var(--smartbar-max-visible-rows) +
|
|
var(--space-medium) * 2 - var(--urlbarView-row-gutter) * 2
|
|
);
|
|
/*
|
|
* Scroll fade using an animated mask:
|
|
* --smartbar-view-scroll-progress is set by JS as a fallback when
|
|
* `animation-timeline: scroll()` is not supported.
|
|
*/
|
|
--smartbar-view-scroll-progress: 0;
|
|
--smartbar-view-fade-threshold: 0.1;
|
|
--smartbar-view-scroll-at-top-ratio: clamp(0, var(--smartbar-view-scroll-progress) / var(--smartbar-view-fade-threshold), 1);
|
|
--smartbar-view-scroll-at-bottom-ratio: clamp(
|
|
0,
|
|
(var(--smartbar-view-scroll-progress) - (1 - var(--smartbar-view-fade-threshold))) / var(--smartbar-view-fade-threshold),
|
|
1
|
|
);
|
|
|
|
@media not (prefers-contrast) {
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent,
|
|
black var(--smartbar-scroll-mask-height),
|
|
black calc(100% - var(--smartbar-scroll-mask-height)),
|
|
transparent
|
|
);
|
|
mask-position: 0 calc((var(--smartbar-view-scroll-at-top-ratio) - 1) * var(--smartbar-scroll-mask-height));
|
|
mask-repeat: no-repeat;
|
|
mask-size: 100%
|
|
calc(100% + (1 - var(--smartbar-view-scroll-at-top-ratio) + var(--smartbar-view-scroll-at-bottom-ratio)) * var(--smartbar-scroll-mask-height));
|
|
|
|
&:not([has-overflow]) {
|
|
mask-image: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.urlbarView-row[label] {
|
|
--urlbarView-labeled-row-margin-top: calc(var(--urlbarView-labeled-row-label-top) + 3.25em);
|
|
}
|
|
|
|
.urlbarView-row:not([type="tip"], [type="dynamic"]) {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-height: var(--urlbarview-row-min-height);
|
|
}
|
|
|
|
.urlbarView-row-inner {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-height: var(--urlbarView-row-inner-min-height);
|
|
}
|
|
}
|
|
|
|
@media not (prefers-contrast) {
|
|
@supports (animation-timeline: scroll()) {
|
|
.smartbar > .urlbarView {
|
|
animation: smartbar-view-scroll-mask-fade linear both;
|
|
animation-timeline: scroll(self);
|
|
}
|
|
|
|
@keyframes smartbar-view-scroll-mask-fade {
|
|
/* Scrolled to top: Top fade hidden, bottom fade visible. */
|
|
0% {
|
|
mask-position: 0 calc(-1 * var(--smartbar-scroll-mask-height));
|
|
mask-size: 100% calc(100% + var(--smartbar-scroll-mask-height));
|
|
}
|
|
/* Scrolling: Top and bottom fades visible. */
|
|
10%,
|
|
90% {
|
|
mask-position: 0 0;
|
|
mask-size: 100% 100%;
|
|
}
|
|
/* Scrolled to bottom: Top fade visible, bottom fade hidden. */
|
|
100% {
|
|
mask-position: 0 0;
|
|
mask-size: 100% calc(100% + var(--smartbar-scroll-mask-height));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Background: border, glow */
|
|
.smartbar > .urlbar-background {
|
|
border-radius: var(--border-radius-large);
|
|
|
|
/* TODO: Bug 2033070 - Nova tokens were implemented as the default value for the custom properties, and the fallbacks (and lint exceptions) will need to be removed after launch */
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-radius: 24px;
|
|
}
|
|
|
|
@media not (forced-colors) {
|
|
background-color: var(--smartbar-inactive-background-color);
|
|
border: var(--smartbar-border-style-gradient) transparent;
|
|
outline: none;
|
|
transition: background-color 0.2s ease-in;
|
|
/* TODO Bug 1880365: Upgrade to use background-clip instead of mask */
|
|
/* Gradient border via mask to keep fill semi-transparent */
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
inset: calc(-1 * var(--border-width));
|
|
border-radius: inherit;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
background: var(--smartbar-border-color-gradient);
|
|
mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
padding: var(--border-width);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Pseudo-element for glow effect on hover/focus */
|
|
&::before {
|
|
border-radius: inherit;
|
|
content: "";
|
|
inset: 0;
|
|
position: absolute;
|
|
filter: blur(10px);
|
|
background-color: var(--smartbar-glow-color);
|
|
opacity: 1;
|
|
transition:
|
|
background-color 0.25s ease,
|
|
opacity 0.2s ease-out;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Input container */
|
|
.smartbar > .urlbar-input-container {
|
|
/**
|
|
* Setting overflow `auto` or `hidden` causes layout shifts when suggestions
|
|
* show. Text wrapping is handled by the multiline editor's overflow,
|
|
* explicitly setting to the default oveflow value.
|
|
*/
|
|
overflow: visible;
|
|
|
|
/**
|
|
* The search mode switcher won't be used for the Smartbar. Instead, it is
|
|
* part of the CTA action panel.
|
|
*/
|
|
> .searchmode-switcher {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.smartbar .urlbar-input-box {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.smartbar .urlbar-input {
|
|
box-sizing: border-box;
|
|
height: auto;
|
|
white-space: pre-wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.smartbar moz-multiline-editor {
|
|
--multiline-editor-max-height: 8lh;
|
|
--multiline-editor-scrollbar-width: thin;
|
|
--multiline-editor-border: none;
|
|
--multiline-editor-focus-outline: none;
|
|
font-size: var(--font-size-large);
|
|
padding: var(--space-xsmall);
|
|
|
|
@media not (forced-colors) {
|
|
--multiline-editor-selection-color: light-dark(var(--color-violet-0), var(--color-violet-60));
|
|
}
|
|
}
|
|
|
|
.smartbar .urlbar-go-button,
|
|
.smartbar .search-one-offs {
|
|
display: none;
|
|
}
|
|
|
|
/* Results */
|
|
.smartbar .urlbarView-results {
|
|
padding-block: var(--space-medium);
|
|
padding-inline: var(--space-large);
|
|
}
|
|
|
|
/* Button container */
|
|
.smartbar-button-container {
|
|
padding: var(--space-xsmall) var(--space-large) var(--space-medium);
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.smartbar-button-container input-model-select {
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
.smartbar-button-container input-cta {
|
|
margin-inline-start: var(--space-xsmall);
|
|
}
|
|
|
|
/* Context chips */
|
|
.smartbar-context-chips-header {
|
|
position: relative;
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
.smartbar {
|
|
@media not (forced-colors) {
|
|
--urlbarview-background-color-hover: light-dark(
|
|
color-mix(in srgb, var(--color-violet-desaturated-40) 25%, transparent),
|
|
color-mix(in srgb, var(--color-violet-30) 20%, transparent)
|
|
);
|
|
--urlbarview-background-color-selected: light-dark(
|
|
color-mix(in srgb, var(--color-violet-desaturated-40) 38%, transparent),
|
|
color-mix(in srgb, var(--color-violet-30) 40%, transparent)
|
|
);
|
|
--link-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
.smartbar .urlbarView-results {
|
|
padding-block: calc(var(--space-medium) - var(--urlbarView-row-gutter));
|
|
}
|
|
|
|
.urlbarView-row {
|
|
cursor: pointer;
|
|
|
|
&:before {
|
|
cursor: none;
|
|
}
|
|
}
|
|
}
|