Quelle  smartbar.css   Sprache: unbekannt

/* 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;

  --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-secondary-text-color: 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);

  @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;
    }
  }
}