userContent.css

/*==============================================================================================*

  FoxOne 4.0.8 – userContent.css
  Styles for browser content pages (new tab, home).

*==============================================================================================*/


/* ==========================================================================
   CONFIG
   ========================================================================== */

:root {
  /* Scrollbar visibility in web content
   * thin = slim style, forced on all scroll containers
   * none = hidden (scroll via mousewheel/keyboard/touchpad), forced too
   * auto = hands off: pages keep full control of their own scrollbars */
  --uc-content-scrollbar: thin;

  /* Rounded corners for the in-content pages (about:preferences,
   * about:addons, about:logins, ...). Same switch as in userChrome.css;
   * userContent has no access to userChrome's variables, so set it here
   * too. 0 = FoxOne's square edges, 1 = every surface FoxOne squares on
   * those pages (cards, rows, buttons, fields, dropdowns, message bars,
   * the category nav) takes --uc-border-radius instead. */
  --uc-rounded: 0;
  --uc-border-radius: 8px;
}

/* Derived: the radius every in-content surface reads. Zero at the default
   --uc-rounded: 0, --uc-border-radius at 1. One value for everything, the
   stock page runs three (24/16/12 under Nova) and the whole point of the
   toggle is one shape language shared with the chrome. */
:root {
  --uc-radius-surface: calc(var(--uc-rounded) * var(--uc-border-radius));
}


/* ==========================================================================
   SCROLLBAR
   `thin` and `none` are enforced with !important (user-origin important
   rules beat page CSS, so they win everywhere). `auto` matches neither
   style query below, so a page's own scrollbar styling stays untouched –
   the old single `* { scrollbar-width: var(...) !important }` rule forced
   the OS default onto pages that deliberately style their scrollbars.
   ========================================================================== */

/* Root/viewport scrollbar. Style queries can't match on :root (it has no
   query container), so the root gets a direct var() rule instead. Kept at
   normal weight: a page that styles its own root scrollbar wins (author
   origin beats non-important user origin), which is the defensive default. */
:root {
  scrollbar-width: var(--uc-content-scrollbar);
}

/* Inner scroll containers – forced only for the non-default values. */
@container style(--uc-content-scrollbar: thin) {
  * {
    scrollbar-width: thin !important;
  }
}
@container style(--uc-content-scrollbar: none) {
  * {
    scrollbar-width: none !important;
  }
}


/* ==========================================================================
   NEW TAB / HOME – Gruvbox Dark (dark mode only)
   ========================================================================== */


@-moz-document url-prefix("about:newtab"), url-prefix("about:home") {
  @media (prefers-color-scheme: dark) {
    :root {
      --newtab-background-color: #282828 !important;
      --newtab-text-primary-color: #FFFFFF !important;
    }
  }
}


/* ==========================================================================
   PALETTE – Gruvbox Dark / Gruvbox Light
   userContent has no shared config with userChrome; keep in sync with the
   CONFIG block there. A retheme that only touches userChrome leaves every
   about: page and the new tab page in Gruvbox (issue #50), so change these
   values as well. Dark set first, the light scheme swaps in Gruvbox
   Light (issue #19). Top level instead of inside one @-moz-document block,
   because the pdf.js viewer can't be matched by URL and reads it too.
   ========================================================================== */

:root {
  --uc-color-base:    #282828;
  --uc-color-surface: #3c3836;
  --uc-color-accent:  #fabd2f;
  --uc-color-text:    #FFFFFF;
  --uc-color-hover:   #7c6f64;
  --uc-color-border:  #504945;   /* Gruvbox bg2, neutral control hairline */
  --uc-tab-hover-text: #ffda85;   /* tab title hover, between text and accent */
}
@media (prefers-color-scheme: light) {
  :root {
    --uc-color-base:    #fbf1c7;
    --uc-color-surface: #ebdbb2;
    --uc-color-accent:  #b57614;
    --uc-color-text:    #3c3836;
    --uc-color-hover:   #bdae93;
    --uc-color-border:  #d5c4a1;
    --uc-tab-hover-text: #855d22;
  }
}


/* ==========================================================================
   PRIVILEGED PAGES – all of about: (Gruvbox Dark / Gruvbox Light)

   One block for every about: page instead of per-page rules: the in-content
   pages (preferences, addons, logins, support, protections, downloads/
   library views, reader, …) all share the same design-token system as the
   browser chrome (common-shared.css imports tokens-shared.css), so the same
   central lever from userChrome's NOVA VIOLET PURGE works here. Under Nova
   the semantic accent family maps to the violet palette; links, focus
   rings, toggles, primary buttons, selected borders and table headers all
   derive from it. Pages with hardcoded colours outside the token system
   get individual rules appended below as they turn up.
   about:newtab / about:home do match the about: prefix: their token-driven
   parts (customise panel, search field, selection ring) follow the palette
   (seen in issue #50); the page ground itself is set in the NEW TAB block
   above. Known unreachable: about:blank (compiled-in canvas colour).
   Both the legacy --in-content-* names and the design tokens are set, so
   older pages and token renames stay covered.
   ========================================================================== */

/* The chrome:// prefix covers the in-content SUBDIALOGS (site permissions,
   containers, … under chrome://browser/content/preferences/dialogs/): they
   are separate documents in an iframe, so the about: prefix never matches
   them, and they kept the full Nova violet. Same token system, same cure.
   The clear-data dialog lives outside that folder since its _v2 rewrite
   (chrome://browser/content/sanitize_v2.xhtml) and needs its own prefix. */
@-moz-document url-prefix("about:"), url-prefix("chrome://browser/content/preferences/"), url-prefix("chrome://browser/content/sanitize") {
  /* Every rule below reads --uc-color-* from the PALETTE block and follows
     the light scheme with it. */
  :root {
    /* Page backgrounds */
    --in-content-page-background: var(--uc-color-base) !important;
    --background-color-canvas: var(--uc-color-base) !important;
    /* Cards, message bars and info boxes sit flat on the canvas, same
       tone as the page; borders do the grouping. Under Nova the message
       bar host maps its background to --background-color-box, the
       sponsor / sync info boxes read --background-color-box-info. */
    --background-color-box: var(--uc-color-base) !important;
    --background-color-box-info: var(--uc-color-base) !important;
    --background-color-information: var(--uc-color-base) !important;

    /* The central lever: everything accent-coloured (links, focus rings,
       toggles, primary buttons, selected borders, table headers) derives
       from the semantic accent family. */
    --color-accent-primary: var(--uc-color-accent) !important;
    --color-accent-primary-hover: var(--uc-color-accent) !important;
    --color-accent-primary-active: var(--uc-color-accent) !important;
    --color-accent-primary-selected: var(--uc-color-accent) !important;

    /* Tables (about:support, about:unloads, about:profiles, …): the body
       colour is hardcoded in the token layer (light-dark(#f8f8fa,
       rgb(35,34,43))), not derived from anything we already override.
       Base for the cells, surface for the zebra rows. */
    --table-background-color: var(--uc-color-base) !important;
    --table-row-background-color-alternate: var(--uc-color-surface) !important;

    /* Text/search inputs: tokens-platform.css maps them to the Field
       SYSTEM colour (dark standin: compiled-in #2b2a33). The consuming
       input lives in the shadow DOM of moz-input-search/moz-input-text,
       out of selector reach, but the custom property inherits across the
       shadow boundary, so overriding it at :root lands inside. */
    --input-text-background-color: var(--uc-color-base) !important;
    --input-text-color: var(--uc-color-text) !important;

    /* Direct violet references (same satellites as in userChrome) */
    --icon-color-information: var(--uc-color-accent) !important;
    --icon-color-accent-primary-desaturated: var(--uc-color-accent) !important;
    /* Button hover like the hamburger menu rows: no background block,
       accent text. Ghost and menu variants alias these at :root, so the
       one pair covers plain, ghost and menu buttons; primary buttons keep
       their accent fill via the separate -primary-hover token. The :active
       pair too, so a click doesn't flash a block back in. */
    --button-background-color-hover: transparent !important;
    --button-background-color-active: transparent !important;
    --button-text-color-hover: var(--uc-color-accent) !important;
    --button-text-color-active: var(--uc-color-accent) !important;
    --button-background-color-primary-disabled: color-mix(in srgb, var(--uc-color-accent) 40%, var(--uc-color-base)) !important;
    --text-color: var(--uc-color-text) !important;

    /* Legacy in-content names (pre-token pages) */
    --in-content-accent-color: var(--uc-color-accent) !important;
    --in-content-accent-color-active: var(--uc-color-accent) !important;
    --in-content-item-selected: var(--uc-color-accent) !important;
    --in-content-item-selected-text: var(--uc-color-base) !important;
  }

  /* Highlighted text */
  ::selection {
    background-color: var(--uc-color-accent) !important;
    color: var(--uc-color-base) !important;
  }

  /* Search/text boxes (about:preferences, about:addons, subdialogs): the
     visible input lives in the SHADOW root of moz-input-search and reads
     --input-text-background-color, which resolves to the Field system
     colour (compiled-in dark standin #2b2a33) in there; the :root token
     override above never arrives. Escape hatch: user sheets, unlike page
     CSS, also match inside shadow trees (confirmed via toolbox: FoxOne's
     ::selection rule lists on the shadow input), so style the input
     element directly and skip the token plumbing. */
  input:where([type="search"], [type="text"], [type="password"], [type="email"], [type="url"], [type="number"], [type="tel"]) {
    /* Base in every state: with the cards flat on the canvas, any lighter
       field (at rest or focused) was the one raised surface left on the
       page. The accent border carries the focus cue. */
    background-color: var(--uc-color-base, #282828) !important;
    color: var(--uc-color-text, #FFFFFF) !important;
  }

  /* Corner radius, driven by --uc-radius-surface (the --uc-rounded toggle
     in the CONFIG block). Cards (setting-group / moz-card), the moz-box rows
     inside them and the moz-page-nav pills all read their radius from a
     token; the box and page-nav families are re-declared on the component
     HOST (`:root, :host` in the shadow token sheets), so a :root override
     never reaches them. Setting the tokens on the host elements themselves
     in the light DOM does: user-origin !important beats the author :host
     rule on the same element. */
  :root {
    --card-border-radius: var(--uc-radius-surface) !important;
    --card-border-radius-compact: var(--uc-radius-surface) !important;
    /* Cards sit flat on the canvas: no raised surface, no shadow, a 1px
       surface-tone border keeps the grouping legible. */
    --card-background-color: var(--uc-color-base) !important;
    --card-box-shadow: none !important;
    --card-box-shadow-hover: none !important;
    --card-border-color: var(--uc-color-surface) !important;
    /* Buttons (moz-button, plain in-content button) and text/search
       fields (moz-input-text, moz-input-search) read their radius from
       these global tokens without a :host re-declaration, so :root is
       enough. --toolbarbutton-border-radius aliases the button radius at
       :root and inherits pre-resolved, hence the explicit line. */
    --button-border-radius: var(--uc-radius-surface) !important;
    --toolbarbutton-border-radius: var(--uc-radius-surface) !important;
    --input-text-border-radius: var(--uc-radius-surface) !important;
    --input-search-border-radius: var(--uc-radius-surface) !important;
  }
  /* Dropdowns re-declare their radius on the host (moz-select.tokens.css),
     same host-level treatment as the box family below. */
  moz-select,
  menulist {
    --select-border-radius: var(--uc-radius-surface) !important;
  }
  /* Message bars re-declare their tokens on the host (moz-message-bar
     .tokens.css); the background follows --background-color-box from
     :root, the radius needs the host. */
  moz-message-bar {
    --message-bar-border-radius: var(--uc-radius-surface) !important;
  }
  /* Segmented control (about:addons light/dark/system picker, 157+):
     re-declared on the host, and the outer radius adds focus-ring width,
     ring offset and border on top of the button radius, so a zero button
     radius still left a 5px rounded frame. Multiplied by --uc-rounded:
     square at 0, concentric with the inner buttons at 1. */
  moz-segmented-control {
    --segmented-control-border-radius: calc(var(--uc-rounded) * (var(--uc-radius-surface) + var(--focus-outline-width) + var(--focus-outline-offset) + var(--border-width))) !important;
  }
  /* Info boxes in preferences.css (sponsor note, sync info, QR box) and the
     clear-data warning box (sanitizeDialog_v2.css, --border-radius-small)
     get their radius and border straight on the element. */
  .info-box-container,
  .sync-info-box,
  .qr-code-box,
  #sanitizeEverythingWarningBox {
    border-radius: var(--uc-radius-surface) !important;
    border-color: var(--uc-color-surface) !important;
  }
  moz-box-item,
  moz-box-group,
  moz-box-button,
  moz-box-link {
    --box-border-radius: var(--uc-radius-surface) !important;
    --box-border-color: var(--uc-color-surface) !important;
    /* Row hover like the hamburger menu: no background block, accent
       text. The :active pair too, so a click doesn't flash the grey back. */
    --box-button-background-color-hover: transparent !important;
    --box-button-background-color-active: transparent !important;
    --box-button-text-color-hover: var(--uc-color-accent) !important;
    --box-button-text-color-active: var(--uc-color-accent) !important;
  }

  /* Category nav (moz-page-nav): FoxOne's radius, no pill fill. Under Nova the
     selected entry is an accent-filled circle with dark text; here the
     selected and hovered entries mark with accent text on a transparent
     background, the same cue as toolbar icons and panel rows. */
  moz-page-nav {
    --page-nav-button-border-radius: var(--uc-radius-surface) !important;
    --page-nav-button-border-radius-focused: var(--uc-radius-surface) !important;
    --page-nav-button-background-color-hover: transparent !important;
    --page-nav-button-background-color-active: transparent !important;
    --page-nav-button-background-color-selected: transparent !important;
    --page-nav-button-text-color-hover: var(--uc-color-accent) !important;
    --page-nav-button-text-color-active: var(--uc-color-accent) !important;
    --page-nav-button-text-color-selected: var(--uc-color-accent) !important;
    --page-nav-hr-background-color: var(--uc-color-surface) !important;
  }

  /* Two element-level canvas overrides in preferences.css that a :root
     token can't reach: the in-content subdialog frame is hardcoded to
     #42414d in dark mode, and the AI-controls card paints itself violet. */
  dialog,
  .dialogBox,
  .ai-controls-description {
    --background-color-canvas: var(--uc-color-base) !important;
    --card-background-color: var(--uc-color-base) !important;
    --ai-controls-description-background-color: var(--uc-color-base) !important;
  }
}


/* ==========================================================================
   PER-PAGE STRAGGLERS – pages with colours outside the token system.
   Collected while walking about:about; one block per page.
   ========================================================================== */

/* about:downloads – the SELECTED row is amber only while the window is
   inactive. With focus, browser/themes/windows/downloads/allDownloadsView.css
   paints hardcoded Windows-blue bevel gradients plus a blue outline over it.
   Flatten the focused state back to the selection tokens. */
@-moz-document url-prefix("about:downloads") {
  #downloadsListBox:focus > richlistitem[selected] {
    background-image: none !important;
    background-color: var(--in-content-item-selected, #fabd2f) !important;
    color: var(--in-content-item-selected-text, #282828) !important;
    outline: none !important;
  }
}

/* about:debugging – a devtools page with its own Photon palette on top of
   the design tokens. Two stragglers: the text-input focus ring
   (--theme-focus-textinput-outline-color ← --blue-50, variables.css) and
   the primary button ("Hinzufügen"), which resolves outside the amber
   override. Repoint the local blues and cover the primary-button classes
   directly. Scoped to the page, so DevTools proper keeps its blues. Reads
   the PALETTE block, so both schemes are covered. */
@-moz-document url-prefix("about:debugging") {
  :root {
    --blue-50: var(--uc-color-accent) !important;
    --blue-55: var(--uc-color-accent) !important;
    --blue-60: var(--uc-color-accent) !important;
    --theme-focus-outline-color: var(--uc-color-accent) !important;
    --theme-focus-textinput-outline-color: var(--uc-color-accent) !important;
    --theme-link-color: var(--uc-color-accent) !important;
  }
  button.primary,
  .primary-button,
  .default-button.primary-button {
    background-color: var(--uc-color-accent) !important;
    color: var(--uc-color-base) !important;
  }
  button.primary:enabled:hover,
  .primary-button:enabled:hover {
    background-color: color-mix(in srgb, var(--uc-color-accent) 85%, var(--uc-color-base)) !important;
  }
}

/* about:firefoxview – the page keeps its own new-tab colour set
   (firefoxview.css): it pins --newtab-background-color to #2b2a33, which
   wins over the canvas token from the central block, cards read
   --newtab-background-color-secondary (#42414d), and action links and the
   bookmark badge read --newtab-primary-action-background (Nova cyan).
   Repoint the three sources, the --fxview-* names derive from them. Cards
   follow the central block's model: flat on the canvas with a surface
   border instead of the raised #42414d and its shadow, which only gets a
   border under prefers-contrast. Hovers drop the grey block for accent
   text, like the moz-box rows. (issue #53) */
@-moz-document url-prefix("about:firefoxview") {
  :root {
    --newtab-background-color: var(--uc-color-base) !important;
    --newtab-background-color-secondary: var(--uc-color-base) !important;
    --newtab-primary-action-background: var(--uc-color-accent) !important;
    --fxview-border: var(--uc-color-surface) !important;
    --fxview-element-background-hover: transparent !important;
    --fxview-element-background-active: transparent !important;
    --fxview-text-color-hover: var(--uc-color-accent) !important;
    --fxviewtabrow-text-color-hover: var(--uc-color-accent) !important;
    /* the badge ring on a favicon cuts it out of the card; it switched to
       the grey hover tone, which is gone now */
    --fxview-indicator-stroke-color-hover: var(--uc-color-base) !important;
  }
  /* Pinned tabs show as a grid of bare favicons: no text for the accent
     hover to colour, and a favicon can't be recoloured, so with the ghost
     hover gone they gave no feedback at all. They keep a quiet surface
     block. The token sits on the row's :host, set from the light DOM. */
  opentabs-tab-row.pinned {
    --fxviewtabrow-element-background-hover: var(--uc-color-surface) !important;
    --fxviewtabrow-element-background-active: var(--uc-color-surface) !important;
  }
  .card-container:not(.inner) {
    box-shadow: none !important;
    border: 1px solid var(--uc-color-surface) !important;
  }
  .card-container,
  details.empty-state,
  .blackbox {
    border-radius: var(--uc-radius-surface) !important;
  }
}

/* about:mozilla – the Book of Mozilla easter egg ships its own maroon
   radial gradient and white serif text (toolkit aboutMozilla.css). Rebind
   the scripture to the palette: base background, amber verse. Typography
   stays untouched; only the colours convert. */
@-moz-document url("about:mozilla") {
  html {
    background: var(--uc-color-base) !important;
    color: var(--uc-color-accent) !important;
  }
  a {
    color: var(--uc-color-accent) !important;
  }
}


/* ==========================================================================
   PDF VIEWER – Firefox's built-in pdf.js (Gruvbox Dark / Gruvbox Light)

   The viewer document carries the PDF's own URL (https://…/file.pdf, or
   no .pdf at all behind a download script), so no @-moz-document rule can
   catch it. Its root does carry a fixed attribute from viewer.html,
   `mozdisallowselectionprint`, which viewer.mjs never touches: scope on
   that. Under Nova the viewer imports the same tokens-brand.css as the
   about: pages, and its own variables (thumbnail frame, page badge,
   checkboxes, progress bar, focus rings, primary buttons) all derive from
   --color-accent-primary, so the central lever works here too.
   ::selection stays untouched on purpose: the text layer is transparent
   text over the rendered canvas, an opaque amber fill would cover exactly
   the glyphs it selects.
   ========================================================================== */

html[mozdisallowselectionprint] {
  --color-accent-primary: var(--uc-color-accent) !important;
  --color-accent-primary-hover: var(--uc-color-accent) !important;
  --color-accent-primary-active: var(--uc-color-accent) !important;
  --color-accent-primary-selected: var(--uc-color-accent) !important;

  /* Nova tints the text colour violet (violet-desaturated-0 in dark). */
  --text-color: var(--uc-color-text) !important;

  /* Surfaces: toolbar, sidebar, menus, fields and the canvas behind the
     pages. Flat base like the about: pages, borders do the grouping. The
     page badges on the thumbnails read box-info and sit on the white page
     image, so base keeps them legible. */
  --background-color-canvas: var(--uc-color-base) !important;
  --background-color-box: var(--uc-color-base) !important;
  --background-color-box-info: var(--uc-color-base) !important;
  --toolbar-background-color: var(--uc-color-base) !important;
  --body-bg-color: var(--uc-color-base) !important;

  /* Toolbar icons: Nova maps them to --toolbarbutton-icon-fill, a dimmed
     grey. Full text colour at rest. Hover drops the grey fill
     (--button-hover-color, read only by toolbar buttons, menu rows and the
     zoom selector) and tints the icon in the tab title hover colour, so a
     toggled button (full accent) still reads as the stronger state. */
  --toolbar-icon-bg-color: var(--uc-color-text) !important;
  --toolbar-icon-hover-bg-color: var(--uc-tab-hover-text) !important;
  --button-hover-color: transparent !important;
  /* Toggled buttons (sidebar open, an editor tool active): Nova sets them
     in a grey filled circle. Like the chrome's active states, no block,
     just the accent on the icon. */
  --toggled-btn-color: var(--uc-color-accent) !important;
  --toggled-btn-bg-color: transparent !important;
  --toggled-hover-active-btn-color: transparent !important;

  /* Popup menu rows ("Verwalten" menu, view selector): Nova fills the
     hovered/pressed row with violet-desaturated. No fill, like the
     toolbar and the doorhanger rows: the label takes the tab title hover
     colour. */
  --button-background-color-menu-hover: transparent !important;
  --button-background-color-menu-active: transparent !important;
  --button-text-color-menu-hover: var(--uc-tab-hover-text) !important;
  --button-text-color-menu-active: var(--uc-tab-hover-text) !important;

  /* Button outlines: Nova draws every secondary button's border in
     --color-accent-primary, so the accent lever above rings the sidebar
     controls and the zoom selector in amber and they compete with the
     selected thumbnail. Neutral hairline instead, amber stays a state. */
  --button-border-color: var(--uc-color-border) !important;
  --button-border-color-hover: var(--uc-color-hover) !important;
  --button-border-color-active: var(--uc-color-hover) !important;
}

/* Thumbnail hover frame: Nova draws it in --border-color-interactive, a
   white-grey. Same lighter amber as the tab title hover, so the current
   page (full accent) stays the stronger mark; the keyboard-focus frame
   reads the same token. Unlike the tokens above, pdf.js declares this one
   on #viewsManager itself (and resolves --image-hover-shadow there), so a
   value inherited from the root loses to it: override on the element. */
html[mozdisallowselectionprint] #viewsManager {
  --image-hover-border-color: var(--uc-tab-hover-text) !important;
  /* Sidebar buttons ("Verwalten", view selector, +, close): hover and
     press fill violet-desaturated under Nova. No fill, like the toolbar:
     label and mask icons (painted in the -fg colour) take the tab title
     hover colour, the hairline steps up to the hover grey. */
  --button-hover-bg: transparent !important;
  --button-hover-fg: var(--uc-tab-hover-text) !important;
  --button-hover-border-color: var(--uc-color-hover) !important;
  --button-active-bg: transparent !important;
  --button-active-fg: var(--uc-tab-hover-text) !important;
  --button-active-border-color: var(--uc-color-hover) !important;
}

/* Zoom selector ("Automatischer Zoom"): Nova fills it violet on hover
   (--button-background-color-hover, also laid over the <select> as a
   gradient). No fill, the label and its arrow (currentColor) take the
   tab title hover colour instead. Scoped to the element: the same tokens
   drive the dialog buttons. */
html[mozdisallowselectionprint] .dropdownToolbarButton {
  --button-background-color-hover: var(--uc-color-base) !important;
  --button-text-color-hover: var(--uc-tab-hover-text) !important;
}

/* Editor toolbars: the floating comment/highlight pair under a text
   selection and the toolbar on a selected annotation. Nova hovers them
   with a violet wash (--toolbarbutton-background-color-hover) and paints
   the icons dimmed grey. Text colour at rest, no fill, tab title hover
   colour on the icon. Declared on .editToolbar itself, so override there. */
html[mozdisallowselectionprint] .editToolbar {
  --editor-toolbar-fg-color: var(--uc-color-text) !important;
  --editor-toolbar-hover-bg-color: transparent !important;
  --editor-toolbar-hover-fg-color: var(--uc-tab-hover-text) !important;
}

/* Doorhanger menu rows (the » menu, editor menus): the fill is gone with
   --button-hover-color above, the label follows the icon into the tab
   title hover colour. */
html[mozdisallowselectionprint] .toolbarButton.labeled {
  --doorhanger-hover-color: var(--uc-tab-hover-text) !important;
}