userContent.css

/*================ IMPORT COLORS ================*/
@import "userColors.css";

/*================== FIREFOX BG COLOR ==================*/
@-moz-document url("about:newtab"), url("about:home"), url("about:blank"), url("about:support"), url("about:config") {
  /*Dark*/
  html:not(#ublock0-epicker)[lwt-newtab-brighttext],
  html:not(#ublock0-epicker) body[lwt-newtab-brighttext],
  #newtab-customize-overlay[lwt-newtab-brighttext] {
    background-color: var(--dark_color1) !important;
  }
  html[lwt-newtab-brighttext] {
    --in-content-page-background: var(--dark_color1) !important;
  }
  [lwt-newtab-brighttext] .wordmark {
    fill: #fefafe !important;
  }
  [lwt-newtab-brighttext] .SnippetBaseContainer {
    background-color: var(--dark_color2) !important;
    color: var(--word_color3) !important;
  }
  [lwt-newtab-brighttext] .ASRouterButton {
    border-radius: 3px !important;
  }
}

/*================== SEARCH BAR ==================*/
/*Dark*/
[lwt-newtab-brighttext] .search-wrapper input {
  transition: all 0.3s ease !important;
  background: var(--dark_color2) var(--newtab-search-icon) 12px center no-repeat !important;
  background-size: 20px !important;
  border: 1px solid !important;
  border-color: var(--dark_color3) !important;
  box-shadow: none !important;
  color: var(--word_color3) !important;
}
/*Private*/
html.private .search-wrapper input {
  transition: all 0.3s ease !important;
  background: var(--dark_color2) var(--newtab-search-icon) 12px center no-repeat !important;
  background-size: 20px !important;
  border: 1px solid !important;
  border-color: #4f499d !important;
  box-shadow: none !important;
  color: #fff5ff !important;
}
/*Dark*/
[lwt-newtab-brighttext] .search-wrapper .search-inner-wrapper:hover input,
[lwt-newtab-brighttext] .search-wrapper .search-inner-wrapper:active input,
[lwt-newtab-brighttext] .search-wrapper input:focus {
  border-color: var(--dark_color4) !important;
}
/*Private*/
[private] .search-wrapper .search-inner-wrapper:hover input,
[private] .search-wrapper .search-inner-wrapper:active input,
[private] .search-wrapper input:focus {
  border-color: #625fc4 !important;
}
/*Dark*/
[lwt-newtab-brighttext] .search-wrapper .search-button,
[lwt-newtab-brighttext] .search-wrapper .search-button {
  transition: all 0.3s ease !important;
  fill: var(--word_color3) !important;
}
/*Private*/
[private] .search-wrapper .search-button,
[private] .search-wrapper .search-button {
  transition: all 0.3s ease !important;
  fill: #fff5ff !important;
}
/*Dark*/
[lwt-newtab-brighttext] .search-wrapper .search-button:focus,
[lwt-newtab-brighttext] .search-wrapper .search-button:hover {
  background-color: var(--dark_color4) !important;
}
/*Private*/
[private] .search-wrapper .search-button:focus,
[private] .search-wrapper .search-button:hover {
  background-color: #625fc4 !important;
}

/*================== READER VIEW ==================*/
@-moz-document url-prefix("about:reader") {
  html {
    background: var(--base_color1);
  }
  toolbar > reader-toolbar {
    border-radius: 3px !important;
  }

  /*Dark*/
  body.loaded.dark {
    --toolbar-bgcolor: var(--dark_color2) !important;
    --toolbar-border: var(--dark_color1) !important;
    --toolbar-hover: var(--dark_color3) !important;
    --popup-bgcolor: var(--dark_color2) !important;
    --popup-border: var(--dark_color3) !important;
    --font-color: var(--word_color3) !important;
    --icon-fill: var(--word_color3) !important;
    background: var(--dark_color1) !important;
    --blue-40: var(--word_color1) !important;
    --blue-40-a30: rgba(144, 89, 255, 0.3) !important;
    --selected-background: rgba(144, 89, 255, 0.3) !important;
    --active-color: var(--word_color1) !important;
  }
}