Firefox-UI-Fix/src/contents/_activity_stream.scss

@include moz-document(url "about:home", url "about:newtab") {
  /** Activity Stream - Search Focus Border: like URL *************************/
  @include Option("userContent.page.field_border") {
    /* At DarkMode, Color */
    body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
    body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
    body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"],
    body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"],
    body[style*="--newtab-background-color: rgb(43, 42, 51);"] {
      /* inner */
      --newtab-focus-border: rgba(
        0,
        221,
        255,
        0.5
      ) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
      --newtab-focus-border-selected: var(--newtab-focus-border) !important; /* Original: #B5D3FF */

      /* For Nightly */
      --newtab-primary-action-background: var(--newtab-focus-border) !important;

      @include Option("userContent.page.proton_color") {
        @include Option("userContent.page.proton_color.dark_blue_accent") {
          --newtab-focus-border: var(--in-content-focus-outline-color) !important;
        }
      }
    }
  }

  /** Activity Stream - Menu Icons ********************************************/
  @include Option("userChrome.icon.context_menu") {
    @import "../icons/layout/activity_stream";
    @import "../icons/activity_stream";
  }

  /** Activity Stream - Web Site Icon: full size ******************************/
  @include Option("userContent.newTab.full_icon") {
    .top-site-outer {
      .tile {
        overflow: hidden;
      }

      .icon-wrapper {
        width: 100% !important; /* Original: 48px */
        height: 100% !important; /* Original: 48px */
      }
      &.add-button .tile .icon-wrapper {
        width: 24px !important;
        height: 24px !important;
      }

      .context-menu-button {
        top: 0px !important; /* Original: -20px */
      }
      .context-menu {
        top: 16.75px !important; /* Original: 6.75px */
      }
    }
  }

  /** Activity Stream - Animate ***********************************************/
  @include Option("userContent.newTab.animate") {
    @include Animate {
      :root {
        --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);
      }

      /* Background */
      .top-site-outer,
      #searchSubmit,
      button.icon,
      button.close-button {
        transition: background 1.5s var(--animation-easing-function);
        &:hover {
          transition: background 0.5s var(--animation-easing-function);
        }
      }

      /* Search Bar */
      .search-wrapper .search-inner-wrapper {
        // When `browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar`
        // input(#newtab-search-text): false
        // .search-handoff-button: true
        $_activityStreamSearchbar: "> input, > .search-handoff-button";
        $_activeSearchbar: selector.nest(":active", $_activityStreamSearchbar);
        $_activeSearchbarResult: ();
        @each $searchbarSelctor in $_activeSearchbar {
          $_activeSearchbarResult: append($_activeSearchbarResult, "&" + $searchbarSelctor, $separator: comma);
        }

        #{$_activityStreamSearchbar} {
          transition: 1s var(--animation-easing-function);
          transition-property: border-color, box-shadow;
        }
        #{$_activeSearchbarResult},
        #{selector.append($_activityStreamSearchbar, ":focus")} {
          transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function);
        }
        @include Option("userContent.page.field_border") {
          &:hover {
            #{$_activityStreamSearchbar} {
              border-color: var(--newtab-primary-action-background) !important;
              transition: border-color 0.5s var(--animation-easing-function);
            }
          }
        }
      }
    }
  }

  /** Activity Stream - Pocket order to last **********************************/
  @include Option("userContent.newTab.pocket_to_last") {
    .body-wrapper.on {
      display: flex;
      flex-wrap: wrap;

      > .discovery-stream.ds-layout {
        flex-basis: 100%;
      }
    }

    .body-wrapper.on > .collapsible-section[data-section-id="topstories"],
    .home-section > #pocket-section,
    .home-section > .divider,
    .home-section > div:not(.section) {
      order: 2;
    }
  }

  /** Activity Stream - Home Search Bar looks like proton *********************/
  @include Option("userContent.newTab.searchbar") {
    /* Dropdown Colors */
    #root {
      --newtab-search-background-color: rgba(255, 255, 255, 1); /* Same as light theme's --panel-background */

      /* Set search dropdown background */
      --newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important;
      --newtab-search-dropdown-color: var(--newtab-search-background-color) !important;
      --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;

      @include Dark {
        /* Default Dark Mode */
        --newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
      }
    }

    .activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root {
      /* Light weight theme */
      --newtab-search-background-color: var(--lwt-sidebar-background-color);
    }

    /* Padding */
    #searchSuggestionTable {
      border-radius: 4px !important;
      -moz-window-shadow: cliprounded;
    }

    .contentSearchSuggestionTable .contentSearchOneOffItem {
      width: 32px !important;
      height: 32px !important;

      /* Margin */
      margin-block: 5px !important;
      margin-inline-start: 5px !important;
      margin-inline-end: 8px !important;

      /* Border */
      border-radius: 4px !important;
      border-image: none !important; /* Original: linear-gradient(transparent 18%, var(--newtab-border-secondary-color) 18%, var(--newtab-border-secondary-color) 82%, transparent 82%) 1; */
      border-inline-end: none !important; /* Original: 1px solid; */
    }

    #contentSearchSettingsButton::before {
      content: url("chrome://global/skin/icons/settings.svg") !important;
      @include InlineBox;

      /* Color */
      -moz-context-properties: fill, fill-opacity !important;
      fill: currentColor !important;

      /* Align */
      margin-inline-end: 5px;
      vertical-align: -25%;
    }

    /* Pointer */
    .contentSearchSuggestionTable .contentSearchOneOffItem,
    #contentSearchSettingsButton {
      cursor: pointer;
    }

    /*- Fix Color For Nightly ------------------------------------------------*/
    .contentSearchSuggestionTable,
    .contentSearchHeaderRow,
    .contentSearchHeader,
    .contentSearchSuggestionsContainer {
      color: var(--newtab-text-primary-color) !important;
      background: var(--newtab-search-background-color) !important;
    }

    .contentSearchSuggestionTable {
      .contentSearchSuggestionRow.selected,
      .contentSearchSettingsButton:hover {
        color: var(--newtab-text-primary-color) !important;
      }

      .contentSearchSuggestionRow.selected,
      .contentSearchSettingsButton:hover,
      .contentSearchOneOffItem.selected {
        background: var(--newtab-element-hover-color) !important;
      }

      .contentSearchSuggestionRow.selected:active,
      .contentSearchOneOffItem:active {
        background: var(--newtab-element-active-color) !important;
      }

      .contentSearchSuggestionRow.selected .historyIcon {
        fill: var(--newtab-icon-secondary-color) !important;
      }
    }
  }

  /** Activity Stream - Hide Firefox's logo ***********************************/
  @include Option("userContent.newTab.hidden_logo") {
    .logo-and-wordmark {
      display: none !important;
    }
    .outer-wrapper:not(.fixed-search) .search-wrapper {
      padding-top: 0 !important;
    }
  }

  /** Activity Stream - Custom background image *******************************/
  @include Option("userContent.newTab.background_image") {
    body::before {
      content: '';
      position: fixed;
      width: 100%;
      height: 100%;

      // https://best-wallpaper.net/Forest-trees-sunset-art-picture_wallpapers.html
      background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-sunrise.svg"));
      background-size: cover; /* or auto auto */
      background-repeat: no-repeat;
      background-position: right top;
      background-attachment: fixed;

      /** Use night sky version in dark mode **********************************/
      @include Dark {
        background-image: var(--uc-newTab-wallpaper, url("../icons/horizon-night.svg"));
      }
    }
  }
}