about_pages.css

@-moz-document regexp("^about:(?!reader).*"),
url(https://www.mozilla.org/credits/),
url-prefix(https://discovery.addons.mozilla.org) {
  :root {
    --aboutProfiles-table-background: var(--in-content-box-background)!important
  }
  menupopup,
  menupopup > menu > menupopup,
  popup,
  popup > menu > menupopup {
    -moz-appearance: none!important;
    background: var(--in-content-box-background)!important;
    border: none!important;
    padding: 0!important
  }
  menuitem,
  menupopup menu {
    -moz-appearance: none!important;
    color: var(--in-content-selected-text)!important
  }
  menuitem:hover,
  menupopup menu:hover {
    color: var(--in-content-text-color)!important;
    background-color: var(--in-content-primary-button-background-hover)!important
  }
  menupopup menuseparator {
    padding: 0!important;
    margin: 2px 6px!important;
    -moz-appearance: none!important;
    background: rgba(0,0,0,0)!important;
    border: 0!important
  }
  @media screen and (-moz-windows-theme) {
    menuitem,
    menupopup menu {
      margin: 1px 6px!important
    }
    menupopup,
    menupopup > menu > menupopup,
    popup,
    popup > menu > menupopup {
      border: 1px solid!important;
      border-color: var(--in-content-box-background)!important
    }
  }
  .prefs-pane [type=checkbox]:checked + label::after,
  .prefs-pane [type=checkbox]:not(:checked) + label::after,
  input[type=checkbox]:checked {
    background-image: url(chrome://global/skin/in-content/check.svg)!important
  }
  .contentSearchSuggestionsList {
    background-color: var(--in-content-box-background)!important;
    border: none!important
  }
  .contentSearchHeader,
  .contentSearchOneOffsTable {
    background-color: var(--in-content-category-header-background)!important;
    border: none!important;
    color: var(--in-content-text-color)!important
  }
  #newtab-customize-overlay,
  .exceptionDialogButtonContainer,
  .snippet .button-link,
  html[dir=ltr][lang],
  html[dir=ltr][lang] body,
  html[dir=rtl][lang],
  html[dir=rtl][lang] body {
    background: var(--in-content-page-background)!important;
    color: var(--in-content-page-color)!important
  }
  #SanitizeDialogPane > groupbox,
  #mainDiv.non-verbose div.section h2,
  #onboarding-overlay,
  .dialogBox,
  .dialogBox > .groupbox-body,
  .modal,
  .modal-overlay,
  .warningBackground {
    background: var(--in-content-page-background)!important
  }
  #homeContentsGroup checkbox[src] .checkbox-icon,
  .checkbox-icon,
  .content-container .icon-container .icon[src=""],
  .extension-controlled-icon,
  .snippet .block-snippet-button,
  .textbox-search-sign {
    filter: invert(65%)!important
  }
  .searchBarHiddenImage,
  .searchBarShownImage {
    filter: invert(80%)!important
  }
  .collapsible-section .section-top-bar .info-option-manage button,
  .topic .topic-read-more,
  a:link {
    color: var(--in-content-link-color)!important
  }
  .topic .topic-read-more:hover,
  a:link:hover {
    color: var(--in-content-link-color-hover)!important
  }
  menulist[disabled=true] {
    color: var(--in-content-box-border-color)!important
  }
  #action-box,
  #badCertAdvancedPanel,
  #content div.log span.section-heading button.no-print:hover,
  #content div.stats span.section-heading button.no-print:hover,
  #contents table tbody tr td,
  #contents table tr.no-copy td,
  #controls.no-print div.controls div.control button:hover,
  #errorPageContainer button#errorTryAgain:hover,
  #header-utils-btn[open=true],
  #profiles table,
  #provider table#provider-table tbody#provider-table-body tr td,
  #subprocess-reports tr td,
  .aboutPageWideContainer div#debug table#debug-table tbody tr td,
  .aboutPageWideContainer label input#submit:hover,
  .alert,
  .opsRow button:hover,
  .top-sites-list .top-site-outer .top-site-icon {
    background-color: var(--in-content-box-background)!important
  }
  #snippetContainer #snippets,
  .addon .editorial-description,
  .addon .heading,
  .disco-content,
  .top-sites-list .top-site-outer .title span,
  header h1,
  xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent):not(.learnMore):not(.tail-with-learn-more) {
    color: var(--in-content-page-color)!important
  }
  #onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog,
  #searchWrapper input#searchText,
  .addon .content,
  .addon .logo,
  .card-outer,
  .card-outer .card-context,
  .card-outer .card-details,
  .search-wrapper input,
  .topsite-form .form-wrapper input[type=text],
  card-outer.active span.context-menu ul.context-menu-list {
    background: var(--in-content-box-background)!important
  }
  #snippets-container,
  .sorter[checkState="1"],
  .sorter[checkState="2"] {
    background-color: var(--in-content-category-header-background)!important
  }
  .contentSearchSettingsButton {
    display: none!important
  }
  #onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog,
  #scene1 h1,
  .addon,
  .card-outer .card-context,
  .card-outer .card-host-name,
  .detail-view-container,
  .section-title span,
  .snippet section,
  .tail-with-learn-more,
  .top-sites-list .top-site-outer .top-site-icon,
  .topsite-form .form-wrapper input[type=text] {
    color: var(--in-content-page-color)!important
  }
  #searchWrapper #searchIcon,
  #searchWrapper #searchSubmit,
  .card-outer .card-context-icon,
  .category:not([selected]) > .category-icon,
  .collapsible-section .section-top-bar .info-option-icon,
  .context-menu ul.context-menu-list li.context-menu-item a span.icon,
  .prefs-pane-button button,
  .search-wrapper .search-button,
  .search-wrapper .search-label,
  .section-title span {
    fill: var(--in-content-page-color)!important
  }
  .sorter {
    color: var(--accent-1)!important
  }
  .download-progress {
    background-color: var(--in-content-box-color)!important
  }
  .list > scrollbox > .scrollbox-innerbox {
    border: none!important
  }
  #header-utils-btn:hover,
  .header-button:hover {
    background-color: var(--in-content-box-background-hover)!important
  }
  #header-utils-btn {
    fill: var(--in-content-category-text)!important
  }
  .collapsible-section .section-top-bar .info-option-manage button:after,
  .topic .topic-read-more::after {
    fill: var(--in-content-link-color)!important
  }
  .addon-view[notification=warning] {
    --view-highlight-color: transparent!important
  }
  .addon-view[notification],
  .addon-view[pending] {
    --view-highlight-color: transparent;
    background-image: none!important
  }
  .addon[active=false] {
    opacity: .4!important
  }
  .detail-row,
  .detail-row-complex,
  setting {
    text-shadow: none!important
  }
  #warningTitle {
    color: var(--in-content-page-color)!important
  }
  #configTree {
    border: none!important
  }
  .addon-target-container {
    background: var(--in-content-box-background)!important;
    box-shadow: none!important
  }
  .service-worker-multi-process {
    background-color: #44391f!important
  }
  #onboarding-notification-bar {
    background: var(--in-content-category-header-background)!important;
    border-top: 2px solid!important
  }
  .prefs-pane .actions,
  .prefs-pane .sidebar {
    background: var(--in-content-category-header-background)!important;
    border-color: var(--in-content-box-border-color)!important
  }
  .collapsible-section .section-top-bar .info-option,
  .extension-controlled,
  .prefs-pane .prefs-modal-inner-wrapper .options,
  .sections-list .section-empty-state {
    background: var(--in-content-box-background)!important;
    border-color: var(--in-content-box-border-color)!important
  }
  .actions button:hover:not(.dismiss),
  .card-outer:-moz-any(:hover,:focus,.active):not(.placeholder),
  .collapsible-section .section-disclaimer button:hover:not(.dismiss),
  .top-sites-list .top-site-outer.active .tile,
  .top-sites-list .top-site-outer:focus .tile,
  .top-sites-list .top-site-outer:hover .tile {
    box-shadow: 0 0 0 5px var(--in-content-box-background)!important
  }
  .card-outer .context-menu-button,
  .top-sites-list .top-site-outer .context-menu-button {
    background-color: var(--in-content-box-background)!important;
    border-color: var(--in-content-box-border-color)!important
  }
  #onboarding-notification-body *,
  #onboarding-notification-tour-title,
  .collapsible-section .section-disclaimer,
  .manual-migration-container,
  .onboarding-close-btn,
  .prefs-pane .prefs-modal-inner-wrapper {
    color: var(--in-content-page-color)!important
  }
  .collapsible-section .section-disclaimer button,
  .onboarding-action-button {
    background-color: var(--in-content-page-background)!important;
    border-color: var(--in-content-box-border-color)!important;
    color: var(--in-content-page-color)!important
  }
  .actions button,
  .actions button.dismiss,
  .onboarding-action-button:hover,
  .prefs-pane-button button:hover {
    background-color: var(--in-content-box-background-hover)!important
  }
  .actions button.done,
  .onboarding-tour-action-button {
    background-color: var(--in-content-primary-button-background)!important
  }
  .onboarding-tour-action-button:hover {
    background-color: var(--in-content-primary-button-background-hover)!important
  }
  .icon.icon-dismiss {
    fill: var(--in-content-page-color)!important
  }
  .context-menu ul.context-menu-list li.context-menu-item a:hover span.icon {
    fill: var(--in-content-text-color)!important
  }
  .dialogBox > .groupbox-title,
  .dialogTitleBar {
    background-color: var(--in-content-category-header-background)!important;
    color: var(--in-content-page-color)!important;
    border-color: var(--in-content-box-border-color)!important
  }
  .warningMessage {
    background: var(--in-content-box-background)!important;
    border-color: var(--in-content-box-border-color)!important;
    color: var(--in-content-page-color)!important
  }
  #badCertAdvancedPanel.advanced-panel,
  #content > div,
  .info-box-content,
  .notice,
  div.opsRow,
  div.section {
    background-color: var(--in-content-box-background)!important;
    border-color: var(--in-content-box-border-color)!important
  }
  .bar-inner {
    background-color: var(--accent-1)!important;
    border: 1px solid!important;
    border-color: var(--accent-2)!important
  }
  #content div.log span.section-heading button.no-print,
  #content div.stats span.section-heading button.no-print,
  #controls.no-print div.controls div.control button,
  #controls.no-print div.controls div.control button input#appid,
  #errorPageContainer button#errorTryAgain,
  .aboutPageWideContainer label input#submit,
  .opsRow button {
    -moz-appearance: none!important;
    background-color: var(--in-content-page-background)!important;
    border: 1px solid!important;
    border-radius: 3px!important;
    color: var(--in-content-page-color)!important;
    border-color: var(--in-content-box-border-color)!important
  }
  .opsRow button {
    margin-right: 2px!important
  }
  input#appid {
    background-color: var(--in-content-box-background)!important
  }
  #profiles.tab div table tbody tr td {
    border-color: var(--in-content-table-border-dark-color)!important
  }
  .actions,
  .context-menu-list li.separator,
  .edit-topsites-wrapper .edit-topsites-button,
  .modal,
  .prefs-pane hr,
  .topsite-form .form-wrapper input[type=text] {
    border-color: var(--in-content-box-border-color)!important
  }
  #outside table.contenttable thead tr th {
    background-color: var(--in-content-table-header-background)!important
  }
  #outside table.contenttable {
    border-color: var(--in-content-table-border-dark-color)!important;
    background-color: var(--in-content-box-background)!important
  }
  #outside table.contenttable tbody tr td,
  #outside table.contenttable tbody tr td + #outside table.contenttable tbody tr td,
  #outside table.contenttable thead tr th + th {
    border-color: var(--in-content-table-border-dark-color)!important
  }
  #outside table.contenttable tbody tr td {
    color: var(--in-content-page-color)!important
  }
  .card-outer .card-context {
    padding: 2px 16px 12px 14px!important
  }
  .card-outer.placeholder .card {
    display: none!important
  }
  .context-menu {
    background-color: var(--in-content-box-background)!important;
    box-shadow: none!important;
    border: 1px!important
  }
  .context-menu > ul > li > a:focus,
  .context-menu > ul > li > a:hover {
    background-color: var(--theme-selection-background-hover)!important
  }
  #searchText:active,
  #searchText:focus,
  .search-wrapper input:focus,
  .search-wrapper:active input {
    box-shadow: 0 0 0 3px var(--in-content-border-focus)!important
  }
  .prefs-pane .actions {
    border-top: none!important
  }
}
@-moz-document url-prefix(about:reader) {
  body.dark a:link {
    color: var(--in-content-link-color)!important
  }
  .font-type-buttons > .sans-serif-button > .name,
  .font-type-buttons > .serif-button > .name,
  body.dark {
    color: var(--in-content-page-color)!important
  }
  .toolbar {
    background-color: var(--in-content-category-header-background)!important;
    border-right: 1px solid!important;
    border-color: var(--in-content-box-border-color)!important
  }
  .toolbar .button {
    background-color: var(--in-content-category-header-background)!important;
    border-color: var(--in-content-box-border-color)!important
  }
  .button:hover,
  .content-width-buttons > button:hover,
  .font-size-buttons > button:hover,
  .font-type-buttons > button:hover,
  .line-height-buttons > button:hover {
    background-color: var(--in-content-primary-button-background-hover)!important
  }
  .dropdown-popup {
    background-color: var(--in-content-category-header-background)!important;
    box-shadow: 0 1px 3px var(--in-content-category-header-background)!important;
    border-color: var(--in-content-box-border-color)!important
  }
  .content-width-buttons > button,
  .font-size-buttons > button,
  .font-type-buttons > button,
  .font-type-buttons > button.selected,
  .font-type-buttons > button:active:hover,
  .line-height-buttons > button {
    border-color: var(--in-content-box-border-color)!important
  }
  .color-scheme-buttons > button.selected,
  .color-scheme-buttons > button:active:hover,
  .font-type-buttons > button.selected,
  .font-type-buttons > button:active:hover {
    box-shadow: inset 0 -3px 0 0 var(--in-content-primary-button-background-hover)!important
  }
}
@-moz-document url-prefix(about:blank) {
  html > body:empty {
    background-color: var(--in-content-page-background)!important;
    margin: 0!important
  }
}
@-moz-document url-prefix(about:memory) {
  html {
    background: var(--in-content-page-background)!important
  }
  .legend,
  .opsRowLabel,
  .section,
  .treeline {
    color: var(--in-content-page-color)!important
  }
}
@-moz-document url-prefix(chrome://) {
  #ColorsDialogPane,
  #ConnectionsDialogPane,
  #FontsDialogPane,
  #LanguagesDialogPane,
  .windowDialog,
  dialog,
  prefpane,
  prefpane > .content-box,
  prefwindow,
  window {
    background-color: var(--in-content-page-background)!important;
    color: var(--in-content-page-color)!important
  }
  #cookieInfoGrid .textbox-input {
    background-color: var(--in-content-page-background)!important
  }
  #historyItems {
    -moz-appearance: none!important
  }
}
/*! Colors hard coded due to variables not being recognized from
 color_variables.css ... Firefox bug? */
@-moz-document url-prefix(https://discovery.addons.mozilla.org) {
  .addon .ThemeImage,
  header {
    border-color: #4a4a4f!important
  }
  .addon .editorial-description,
  .addon .heading span,
  .disco-content {
    color: #b1b1b3!important
  }
  .Button--action,
  .Button--action:link,
  .Button--action:not(.Button--disabled):hover,
  .addon .heading,
  header h1 {
    color: #f9f9fa!important
  }
}