library.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. */

/* for the places organizer, e.g. "Manage Bookmarks" */

@-moz-document url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("about:downloads") {
  :root {
    --in-content-button-background-disabled: hsla(0, 20%, 80%, 0.12);
    --in-content-button-background-hover: hsla(0, 20%, 90%, 0.15) !important;
    --in-content-button-background-active: hsla(0, 20%, 90%, 0.19) !important;
    --in-content-button-background-bold: hsla(0, 20%, 90%, 0.23) !important;
    --in-content-border-color: var(--dialog-box-border-color) !important;
    --in-content-border-hover: var(--dialog-box-border-hover) !important;
    --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent) !important;
    --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 25%, transparent) !important;
    --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 30%, transparent) !important;
    --organizer-color: var(--plaintext-color) !important;
    --organizer-deemphasized-color: color-mix(in srgb, var(--plaintext-color) 75%, transparent) !important;
    --organizer-toolbar-background: var(--in-content-button-highlight-dark) !important;
    --organizer-pane-background: var(--in-content-box-bg-dark) !important;
    --organizer-content-background: var(--in-content-bg-dark) !important;
    --organizer-hover-background: var(--in-content-button-background-hover) !important;
    --organizer-selected-background: var(--in-content-button-background-active) !important;
    --organizer-selected-focus-background: var(--in-content-button-background-bold) !important;
    --organizer-outline-color: var(--purple-40) !important;
    --organizer-border-color: var(--in-content-border-color-dim) !important;
    --organizer-toolbar-field-background: var(--in-content-bg-dark) !important;
    --organizer-toolbar-field-background-focused: var(--in-content-bg-dark) !important;
    --organizer-separator-color: var(--in-content-separator-dim) !important;
    --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color) !important;
    --organizer-toolbar-field-focus-box-shadow: 0 0 0 0.5px var(--organizer-toolbar-field-focus-border-color) inset !important;
    --organizer-pane-field-border-color: var(--in-content-separator-dim) !important;
    --download-button-hover-bg: hsla(230, 8%, 80%, 0.12);
  }

  #placesToolbar > toolbarbutton,
  #placesMenu > menu,
  #searchFilter {
    border-radius: var(--general-button-border-radius) !important;
  }

  #placesToolbar > toolbarbutton:is(:hover, :focus-visible):not([disabled="true"]) {
    background-color: var(--organizer-hover-background) !important;
    color: var(--organizer-hover-color) !important;
  }

  #placesMenu > menu > .menubar-text {
    background-size: 12px !important;
    padding-inline-end: 16px !important;
  }

  #searchFilter[focused] {
    outline-color: var(--organizer-toolbar-field-focus-border-color) !important;
    outline-width: 2px !important;
    outline-style: solid !important;
    box-shadow: none !important;
    border-color: transparent !important;
    outline-offset: 0 !important;
  }

  #places input[type="text"]:focus {
    outline: 2px solid var(--organizer-outline-color) !important;
    outline-offset: -1px !important;
  }

  #contentView treecol {
    box-shadow: inset 0 -1px var(--organizer-border-color);
  }

  treecol,
  treecolpicker {
    background-color: var(--organizer-pane-background) !important;
    border-color: var(--organizer-border-color) !important;
  }

  :is(treecol, treecolpicker):where(:hover) {
    background-color: var(--organizer-hover-background) !important;
  }

  :is(treecol, treecolpicker):where(:hover:active) {
    background-color: var(--organizer-selected-background) !important;
  }

  menubar > menu[_moz-menuactive="true"]:not([disabled="true"]) {
    background-color: var(--organizer-hover-background) !important;
    color: var(--organizer-hover-color) !important;
  }

  treechildren::-moz-tree-row(selected),
  treechildren::-moz-tree-row(current, focus) {
    background-color: var(--organizer-selected-background) !important;
    outline: none !important;
  }

  treechildren::-moz-tree-row(selected, focus),
  treechildren::-moz-tree-row(current, selected, focus),
  treechildren::-moz-tree-row(current, focus, hover) {
    background-color: var(--organizer-selected-focus-background) !important;
  }
}