uc-search-one-offs.css

/* This Source Code Form is subject to the terms of the Creative Commons
 * Attribution-NonCommercial-ShareAlike International License, v. 4.0.
 * If a copy of the CC BY-NC-SA 4.0 was not distributed with this
 * file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/
 * or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */

/* this is how we get the scrolling search one-offs in the urlbar.
it also changes the appearance of the one-offs in the searchbar. */

#PopupSearchAutoComplete {
  .search-one-offs {
    flex-flow: row nowrap !important;
    display: flex !important;
    align-items: center !important;

    .button-icon {
      fill-opacity: 1 !important;
    }
  }

  .search-panel-one-offs-container {
    padding-inline: 4px;
    clip-path: inset(0 4px 0 4px);
    display: flex !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
  }

  .search-panel-one-offs {
    display: flex !important;
    background: none !important;
    -moz-context-properties: fill, fill-opacity !important;
    fill: currentColor !important;
    height: unset !important;
    flex-wrap: nowrap !important;
    scroll-behavior: smooth;
    scrollbar-width: none !important;
    min-width: min-content !important;
    max-width: unset !important;
  }

  .search-panel-one-offs-header {
    margin-inline: var(--arrowpanel-menuitem-margin-inline) 0 !important;
    min-width: -moz-fit-content !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;

    &::before {
      content: "Search with:";
      display: inline-block;
      margin-block: 2px 3px;
      margin-inline: 10px 4px;
      color: var(--panel-shortcut-color);
    }
  }

  .searchbar-engine-one-off-item {
    margin: 0 !important;
    padding: 2px !important;
    background: none !important;
  }

  .searchbar-engine-one-off-item, .addengine-item {
    > :is(stack, .button-box) {
      border-radius: var(--toolbarbutton-border-radius);
    }

    &:hover:not([selected]) > :is(stack, .button-box) {
      background-color: var(--autocomplete-popup-hover-background) !important;
    }

    &[selected] > :is(stack, .button-box) {
      background-color: var(--autocomplete-popup-highlight-background) !important;
    }
  }

  #searchbar-one-offs-header-label,
  .search-one-offs > .searchbar-separator {
    display: none !important;
  }

  .search-setting-button,
  .search-add-engines {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;

    label {
      display: none;
    }
  }

  .search-add-engines {
    gap: 4px;
    display: flex;

    &:not(:empty) ~ .search-setting-button {
      margin-left: 4px !important;
    }
  }

  .addengine-item {
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    background: none !important;
    margin: 0 !important;

    .toolbarbutton-badge-stack {
      width: 28px !important;
      height: 28px !important;
      margin: unset !important;
      display: flex !important;
      align-content: center !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .toolbarbutton-badge {
      justify-self: start !important;
      margin: 0px -5.5px !important;
    }
  }

  .search-setting-button {
    width: 28px !important;
    min-height: 28px !important;
    margin-inline: 0 !important;

    > .button-box {
      padding: 0 !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
    }

    .button-icon {
      width: 16px !important;
      height: 16px !important;
      list-style-image: url(chrome://global/skin/icons/settings.svg);
      -moz-context-properties: fill, fill-opacity;
      fill: currentColor;
      fill-opacity: var(--urlbar-icon-fill-opacity);
    }
  }

  .search-one-offs-spacer {
    display: none !important;
  }
}

.searchbar-separator {
  margin: calc(var(--arrowpanel-menuitem-margin-inline) - 1px) var(--arrowpanel-menuitem-margin-inline) !important;
}

.urlbarView {
  .search-one-offs {
    min-height: var(--urlbar-height) !important;
    padding: 2px !important;
    scroll-behavior: smooth !important;
    box-sizing: border-box !important;
    border: none !important;
    flex-flow: row nowrap !important;
  }

  .search-panel-one-offs {
    flex-wrap: nowrap !important;
    min-height: var(--urlbar-height);
    align-items: center;
  }

  .search-panel-one-offs-container {
    min-width: unset !important;
    margin-inline-end: -4px !important;
  }

  .search-panel-one-offs-header {
    min-width: -moz-fit-content !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    min-height: var(--urlbar-height) !important;
    align-items: center;

    &::before {
      content: "Search with:";
      display: inline-block;
      margin-block: 2px 3px;
      margin-inline: 8px 4px;
      color: var(--panel-shortcut-color);
    }
  }

  .search-panel-one-offs-header-label {
    padding-inline: 8px !important;
    display: none !important;
  }

  .searchbar-engine-one-off-item,
  .addengine-item {
    min-width: var(--urlbar-one-offs-engine-width) !important;
    height: var(--urlbar-one-offs-engine-width) !important;
    padding: 0 !important;
    margin-inline: 0 !important;
    background: none !important;
    border: none !important;
    position: relative !important;
    background-color: transparent !important;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
    fill-opacity: 1 !important;

    > .button-box {
      min-width: var(--urlbar-one-offs-engine-width) !important;
      height: var(--urlbar-one-offs-engine-width) !important;
      padding: 0 !important;
      border-radius: var(--toolbarbutton-border-radius) !important;
    }

    &:is([selected], :hover) > .button-box {
      fill-opacity: 1 !important;
    }
  }
}

.urlbarView,
#PopupSearchAutoComplete {
  .searchbar-engine-one-off-item,
  .addengine-item {
    min-width: 32px !important;
    height: 32px !important;
    padding: 2px !important;
    color: var(--panel-description-color) !important;
  }
}

.search-setting-button > .button-box > .button-icon {
  fill: currentColor !important;
  fill-opacity: inherit !important;
}

.searchbar-engine-one-off-add-engine {
  &[image] {
    .button-icon {
      opacity: 1 !important;
    }

    &:not(:hover, [selected]) > .button-box {
      opacity: 0.6 !important;
    }
  }

  > .button-box::after {
    background: url(chrome://userchrome/content/skin/search-indicator-badge-add.svg) no-repeat center/contain !important;
    -moz-context-properties: fill, fill-opacity, stroke !important;
    fill: var(--update-badge-bg) !important;
    stroke: var(--update-badge-color) !important;
    height: 12px !important;
    width: 12px !important;
    margin-inline: -6px -6px !important;
    margin-top: -16px !important;
  }
}

#urlbar-engine-one-off-item-bookmarks:not([selected]) {
  fill: currentColor !important;
}

.searchbar-engine-one-off-item {
  /* replace google search icon with CSS since you can't replace the built-in
  google engine without changing the engine's name */
  &[engine="Google"] {
    .button-icon {
      display: none;
    }

    .button-box::before {
      content: url(chrome://userchrome/content/engines/google.svg);
      display: block;
      width: 16px;
      height: 16px;
    }
  }

  &[engine="DuckDuckGo"] {
    .button-icon {
      display: none;
    }

    .button-box::before {
      content: url(chrome://userchrome/content/engines/duckduckgo.svg);
      display: block;
      width: 16px;
      height: 16px;
    }
  }
}

.searchbar-engine-one-off-item,
.addengine-item {
  &:hover > .button-box {
    background-color: var(--toolbarbutton-hover-background) !important;
  }

  &[selected] > .button-box {
    background-color: var(--toolbarbutton-active-background) !important;
    color: var(--lwt-text-color) !important;
  }
}