/*******************************************************************************
/* [FIREFOX-PROFILE-FOLDER]/chrome/userContent.css
/*------------------------------------------------------------------------------
/* File/Update  : https://raw.githubusercontent.com/icpantsparti2/browser-bits/main/firefox-style/chrome/userContent.css
/* Version      : 2023.12.12
/* License (MIT): https://raw.githubusercontent.com/icpantsparti2/browser-bits/main/LICENSE
/* Project      : https://github.com/icpantsparti2/browser-bits
/* Disclaimer   : Use with care at your own risk
/*------------------------------------------------------------------------------
/* Summary      : for re-styling some elements of firefox about:* pages
/*                (eg: compact layout)
/* (also see: https://raw.githubusercontent.com/icpantsparti2/browser-bits/main/firefox-style/chrome/userChrome.css)
/*------------------------------------------------------------------------------
/* 1) find your Firefox "Profile Directory" (load web page "about:support")
/*    eg: C:\Users\USERNAME\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXXX.default
/*    eg: /home/USERNAME/.mozilla/firefox/XXXXXXXX.default
/* 2) make a folder there called "chrome"
/* 3) choose:
/*       a) move/save this file as "userContent.css" inside the "chrome" folder
/*    or b) save this file as "userContent-icpantsparti.css" in "chrome" folder
/*          and create/edit your "userContent.css" adding this line near the top:
/*          @import "./userContent-icpantsparti.css";
/* 4) enable/disable sections by editing the preceeding line(s) as either: /**/ /*
/* 5) load web page 'about:config', or create/edit a file in the profile folder
/*    called "user.js" and set the following:
/*    user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
/* 6) close and reopen firefox
/* *) to "uninstall" remove or rename the "userContent.css" file
/*------------------------------------------------------------------------------
/* Notes:
/*   * This is a collection of userContent.css code snippets
/*   * #id and .class names are by Mozilla from Firefox CSS structure
/*   * CSS selectors can change between Firefox versions without notice/support
/*------------------------------------------------------------------------------
/* for 'Useful links' + 'Some Example Firefox CSS "Themes" links':
/*   see: https://raw.githubusercontent.com/icpantsparti2/browser-bits/main/firefox-style/chrome/userChrome.css
/*------------------------------------------------------------------------------
/* Other Notes:
/*   FF103: -moz-accent-color -moz-accent-color-foreground now: AccentColor AccentColorText
/*   https://www.reddit.com/r/FirefoxCSS/comments/w9t89v/tab_bar_windows_accent_color_in_firefox_103/
/*------------------------------------------------------------------------------
/* Acknowledgments: thanks to the links shown for useful info
/******************************************************************************/




/*******************************************************************************
/* The sections in the code below are:
/*     optionally import other "userContent-____.css" files
/*     highlight favorites on about:about
/*     compact about:profiles
/*     compact about:config
/*     compact about:addons
/*     about:addons - color add-on names
/*     compact about:preferences
/*     highlight certain file names under [Browser Toolbox] [Style Editor]
/******************************************************************************/




/*******************************************************************************
/* ### optionally import other "userContent-____.css" files
/*------------------------------------------------------------------------------
/* (any imports must be here at the top)
/******************************************************************************/
/**/ @import "./userContent-my-extras.css"; /**/




/*******************************************************************************
/* ### highlight favorites on about:about
/*------------------------------------------------------------------------------
/* highlight some of the links to other 'about:...' pages
/******************************************************************************/
/**/
@-moz-document url-prefix(about:about) {
  a[href="about:addons"], a[href="about:config"], a[href="about:debugging"],
  a[href="about:downloads"], a[href="about:preferences"],
  a[href="about:profiles"], a[href="about:support"] {
    font-weight: bold !important;
    border: 2px solid AccentColor !important;
    padding: 0px 2px !important;
  }
}
/**/




/*******************************************************************************
/* ### compact about:profiles
/*------------------------------------------------------------------------------
/* tip: bookmark about:profiles for easy access profile switching
/*      (eg: place it on the bookmarks toolbar or home button)
/* https://www.reddit.com/r/FirefoxCSS/comments/bmy2hm/backgroundimages_in_aboutpreferences_and/
/******************************************************************************/
/**/
@-moz-document url-prefix(about:profiles) {
  hr, table tr:nth-child(1), th {
    display: none !important;
  }
  div {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    page-break-inside: avoid !important;
  }
  #profiles
  {
    column-count: 2;
    column-gap: 0;
  }
  #profiles div
  {
    width: 98% !important;
    margin: 8px 0 !important;
  }
  h1, h2 {
    margin: 0 !important;
    background-color: color-mix(in srgb, White 40%, AccentColor) !important;
    color: color-mix(in srgb, Black 40%, AccentColor) !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
  }
  h3 {
    margin: 0 !important;
    font-size: 0.7em !important;
  }
  table, tr, th, td {
    height: unset !important;
    width: unset !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-collapse: collapse !important;
    border: 0 !important;
    background-color: unset !important;
    color: unset !important;
  }
  button {
    min-height: unset !important;
    height: unset !important;
    padding: 2px 4px !important;
    margin: 1px 2px !important;
    border: 1px dotted !important;
    font-weight: normal !important;
  }
}
/**/




/*******************************************************************************
/* ### compact about:config
/*------------------------------------------------------------------------------
/* also show AccentColor mark next to modified preferences
/* https://github.com/Aris-t2/CustomCSSforFx/css/aboutconfig/aboutconfig_compact_appearance.css
/******************************************************************************/
/**/
@-moz-document url-prefix(about:config) {
  *:not(.config-background) {
    font-size: 0.95em !important;
    min-height: 1em !important;
  }
  table {
    margin-bottom: 5em !important;
    border: 0 !important;
  }
  th, td {
    vertical-align: top !important;
    border: 0 !important;
    padding-block: 0 !important;
  }
  .has-user-value {
    box-shadow: 5px 0px AccentColor inset, -2px 0px AccentColor inset;
  }
  .has-user-value .cell-value { 
    box-shadow: 2px 0px AccentColor inset;
  }

  table button {
    margin-block: 0 !important;
    height: 1.5em !important;
    vertical-align: middle !important;
  }

  span[data-l10n-args^='{"value":"0'],
  span[data-l10n-args^='{"value":"1'],
  span[data-l10n-args^='{"value":"2'],
  span[data-l10n-args^='{"value":"3'],
  span[data-l10n-args^='{"value":"4'],
  span[data-l10n-args^='{"value":"5'],
  span[data-l10n-args^='{"value":"6'],
  span[data-l10n-args^='{"value":"7'],
  span[data-l10n-args^='{"value":"8'],
  span[data-l10n-args^='{"value":"9'],
  span[data-l10n-args^='{"value":"-']
  {
    color: black;
    background-color: gold;
  }
  span[data-l10n-args^='{"value":"true"'] {
    color: black;
    background-color: limegreen;
  }
  span[data-l10n-args^='{"value":"false"'] {
    color: white;
    background-color: tomato;
  }

  tr.add {
    opacity: 0.5 !important;
  }
  tr.add > th, tr.add > td {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-top: 1em !important;
  }

}
/**/




/*******************************************************************************
/* ### compact about:addons
/*------------------------------------------------------------------------------
/* also show add-ons in a column layout (set your "column-count:" in code below)
/* https://github.com/Aris-t2/CustomCSSforFx/css/aboutaddons/addonlists_compact_fx68.css
/* https://github.com/Aris-t2/CustomCSSforFx/css/aboutaddons/addonlists_compact_more_compact_fx72.css
/* https://www.reddit.com/r/FirefoxCSS/comments/g9imrc/enlarge_width_of_addons_manager_aboutaddons/
/* notes:
/*   or:  url-prefix(chrome://mozapps/content/extensions/aboutaddons.html)
/*   old: url-prefix(chrome://mozapps/content/extensions/aboutaddons.xhtml)
/*   old: url-prefix(chrome://mozapps/content/extensions/extensions.xul)
/*   box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
/*   :root{ --section-width: initial !important }
/*   opacity: 1 !important;
/*   color: color-mix(in srgb, Black 40%, AccentColor) !important;
/*------------------------------------------------------------------------------
/* notes (to show all builtin (and expired) themes):
/*   https://www.reddit.com/r/firefox/comments/uq26ao/bringing_back_your_preferred_colorways/
/*   resource://builtin-themes/colorways/
/*   in user.js (about:config) set:
/*   user_pref("browser.theme.colorway-closet", false);
/*   user_pref("browser.theme.retainedExpiredThemes", "[\"abstract-balanced-colorway@mozilla.org\",\"abstract-bold-colorway@mozilla.org\",\"abstract-soft-colorway@mozilla.org\",\"cheers-balanced-colorway@mozilla.org\",\"cheers-bold-colorway@mozilla.org\",\"cheers-soft-colorway@mozilla.org\",\"elemental-balanced-colorway@mozilla.org\",\"elemental-bold-colorway@mozilla.org\",\"elemental-soft-colorway@mozilla.org\",\"foto-balanced-colorway@mozilla.org\",\"foto-bold-colorway@mozilla.org\",\"foto-soft-colorway@mozilla.org\",\"graffiti-balanced-colorway@mozilla.org\",\"graffiti-bold-colorway@mozilla.org\",\"graffiti-soft-colorway@mozilla.org\",\"lush-balanced-colorway@mozilla.org\",\"lush-bold-colorway@mozilla.org\",\"lush-soft-colorway@mozilla.org\",\"activist-balanced-colorway@mozilla.org\",\"activist-bold-colorway@mozilla.org\",\"activist-soft-colorway@mozilla.org\",\"2022blue-colorway@mozilla.org\",\"dreamer-balanced-colorway@mozilla.org\",\"dreamer-bold-colorway@mozilla.org\",\"dreamer-soft-colorway@mozilla.org\",\"expressionist-balanced-colorway@mozilla.org\",\"expressionist-bold-colorway@mozilla.org\",\"expressionist-soft-colorway@mozilla.org\",\"2022green-colorway@mozilla.org\",\"innovator-balanced-colorway@mozilla.org\",\"innovator-bold-colorway@mozilla.org\",\"innovator-soft-colorway@mozilla.org\",\"2022orange-colorway@mozilla.org\",\"playmaker-balanced-colorway@mozilla.org\",\"playmaker-bold-colorway@mozilla.org\",\"playmaker-soft-colorway@mozilla.org\",\"2022purple-colorway@mozilla.org\",\"2022red-colorway@mozilla.org\",\"visionary-balanced-colorway@mozilla.org\",\"visionary-bold-colorway@mozilla.org\",\"visionary-soft-colorway@mozilla.org\",\"2022yellow-colorway@mozilla.org\"]");
/******************************************************************************/
/**/
@-moz-document url-prefix(about:addons) {

  :root addon-card:not([expanded="true"]) {
    --addon-icon-size: 18px !important;
  }

  #main { max-width: 95% !important; }

  addon-list[type="extension"] .extension-enabled-section,
  addon-list[type="extension"] .extension-disabled-section
  {
    margin-bottom: 4px !important;
    column-count: 3;
    column-gap: 0;
  }

  addon-list[type="extension"] .list-section-heading {
    margin: 0 !important;
    column-span: all;
  }



  addon-card:not([expanded="true"]) .addon.card .addon-card-collapsed {
    overflow:hidden !important;
  }

  addon-card:not([expanded="true"]) .addon.card .addon-description,
  addon-list[type="extension"] addon-card:not([expanded="true"]) .update-postponed-bar,
  addon-list[type="extension"] addon-card:not([expanded="true"]) .addon-card-message,
  addon-list[type="extension"] .pending-uninstall
  {
    display: none !important;
  }

  addon-list:not([type="theme"]) addon-card:not([expanded="true"]) .addon.card,
  addon-list[type="theme"] addon-card:not([expanded="true"]) .addon.card
  {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    transition: unset !important;
    opacity: 1 !important;
  }

  addon-list[type="extension"] addon-card:not([expanded="true"]) .addon.card {
    height: 20px !important;
    padding: 0 6px !important;
    page-break-inside: avoid !important;
  }

  addon-card:not([expanded="true"]) .addon.card:hover {
    background: color-mix(in srgb, White 40%, AccentColor) !important;
    font-weight: bold;
  }



  .addon-icon {
    filter:
      drop-shadow(1px 0 0 DarkGray)
      drop-shadow(-1px 0 0 DarkGray)
      drop-shadow(0 1px 0 DarkGray)
      drop-shadow(0 -1px 0 DarkGray)
      !important;
    border-radius: 15%;
    margin-right: 2px !important;
  }

  addon-list[type="extension"] addon-card:not([expanded="true"]) .addon-name-container
  {
    margin-top: -1px !important;
  }

  addon-list[type="extension"] .addon-name {
    font-size: unset !important;
    font-weight: unset !important;
    line-height: unset !important;
    text-overflow: unset !important;
    width: 100% !important;
    margin-inline: 2px !important;
    opacity: 0.9 !important;
  }

  addon-card:not([expanded="true"]) .addon-badge {
    height: 12px !important;
    width: 12px !important;
    margin: 0 !important;
  }

  .toggle-button { border: 1px dotted !important; }

  addon-card:not([expanded="true"]) .more-options-button {
    height: 20px !important;
    min-width: 16px !important;
    margin-left: 0 !important;
    border: 1px dotted !important;
  }

  addon-card:not([expanded="true"]) .theme-enable-button {
    border: 1px dotted !important;
  }



  addon-list[type="extension"] {
    counter-reset: ec 0 dc 0 tc 0;
  }

  addon-list[type="extension"] .extension-enabled-section .addon.card {
    counter-increment: ec tc;
  }

  addon-list[type="extension"] .extension-disabled-section .addon.card {
    counter-increment: dc tc;
  }

  addon-list[type="extension"]::after {
    content: "Total: " counter(ec) " + " counter(dc) " = " counter(tc);
    font-weight: bold;
    font-size: 1.1em;
  }



  addon-list[type="theme"] addon-card:not([expanded="true"]) .card-heading-image,
  addon-list[type="all"] addon-card:not([expanded="true"]) .card-heading-image
  {
    width: 150px !important;
    height: auto !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 auto 0 auto !important;
    padding: 0 !important;
    border: 1px dotted !important;
  }

  addon-list[type="theme"] addon-card:not([expanded="true"]) .addon.card,
  addon-list[type="all"] addon-card:not([expanded="true"]) .addon.card
  {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    page-break-inside: avoid !important;
  }

  addon-list[type="theme"] addon-card:not([expanded="true"]) .theme-enable-button
  {
    height: 20px !important;
    border: 1px dotted !important;
  }

  .monochromatic-addon-list[type="theme"] section {
    margin-top: 1em;
  }

  .monochromatic-addon-list[type="theme"] section .card.addon {
    height: auto !important;
  }

  .monochromatic-addon-list[type="theme"] section .addon-card-collapsed .addon-name-container
  {
    row-gap: unset !important;
  }

  addon-list[type="theme"] .theme-disabled-section h2 {
    column-span: all;
  }

  addon-list[type="theme"] .theme-disabled-section
  {
    column-count: 3;
    column-gap: 0.5em;
  }

  addon-list[type="theme"] addon-card:not([expanded="true"]) .addon-name-link
  {
    font-size: 80% !important;
  }

}
/**/




/*******************************************************************************
/* ### about:addons - color add-on names
/*------------------------------------------------------------------------------
/* if you want to highlight any add-on names in the list...
/*   - use '[addon-id="..."]' with ID from 'about:support#addons' page
/*   - note: prefix with '[label^="..."]' only so we know add-on name for that id
/*   - perhaps uncomment '@import "./userContent-my-extras.css";' near the top
/*     and put your selectors and colors in a file with that name
/*------------------------------------------------------------------------------
/* example selectors:
/*   [label^="..."], [addon-id="..."],
/*   [label^="uBlock Origin"], [addon-id="uBlock0@raymondhill.net"],
/*   [label^="Name"], [addon-id="{aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa}"],
/*------------------------------------------------------------------------------
/* list the selectors/addons, open about:addons, run in console (Ctrl+Shift+K):
/* AddonManager.getAddonsByTypes(["extension"]).then(addons => { var list=``; addons.sort((a,b)=>{return a.name.localeCompare(b.name);}).forEach(addon => { if(!(addon.isBuiltin||addon.isSystem)){ list+=`    [label^="${addon.name}"],[addon-id="${addon.id}"],[data-extensionid="${addon.id}"],[extension-id="${addon.id}"],\n`; } }); console.log(list); });
/******************************************************************************/
/**/
@-moz-document url-prefix(about:addons) {

  addon-list[type="extension"] addon-card:not([expanded="true"]):where(
    [label^="..."], [addon-id="..."]
  ) .addon-name-link
  {
    background: LimeGreen !important;
    color: Black !important;
  }

  addon-list[type="extension"] addon-card:not([expanded="true"]):where(
    [label^="..."], [addon-id="..."]
  ) .addon-name-link
  {
    background: DeepSkyBlue !important;
    color: Black !important;
  }

  addon-list[type="extension"] addon-card:not([expanded="true"]):where(
    [label^="..."], [addon-id="..."]
  ) .addon-name-link
  {
    background: Gold !important;
    color: Black !important;
  }

  addon-list[type="extension"] addon-card:not([expanded="true"]):where(
    [label^="..."], [addon-id="..."]
  ) .addon-name-link
  {
    background: DarkOrange !important;
    color: Black !important;
  }

  addon-list[type="extension"] addon-card:not([expanded="true"]):where(
    [label^="..."], [addon-id="..."]
  ) .addon-name-link
  {
    background: PaleVioletRed !important;
    color: Black !important;
  }

  addon-list[type="extension"] addon-card:not([expanded="true"]):where(
    [label^="..."], [addon-id="..."]
  ) .addon-name-link
  {
    background: Crimson !important;
    color: LightGray !important;
  }

  addon-list[type="extension"] addon-card:not([expanded="true"]):where(
    [label^="..."], [addon-id="..."]
  ) .addon-name-link
  {
    background: DarkGray !important;
    color: Black !important;
  }

}
/**/




/*******************************************************************************
/* ### compact about:preferences
/******************************************************************************/
/**/
@-moz-document url-prefix(about:preferences) {
  groupbox, checkbox, hbox, radio, label, h1, h2, button, menulist, input {
    padding-block: 0 !important;
  }
  groupbox, checkbox, hbox, radio, label, h1, h2,
    #updateBox, #doNotTrackLearnMoreBox
  {
    margin-block: 0 !important;
  }
  button, menulist {
    margin-top: 0 !important;
    min-height: 1.5em !important;
    height: unset !important;
  }
  h1 {
    flex: 1;
    background-color: color-mix(in srgb, White 70%, AccentColor) !important;
    color: color-mix(in srgb, Black 70%, AccentColor) !important;
    font-weight: bold !important;
  }
  h2 {
    flex: 1;
    background-color: color-mix(in srgb, White 40%, AccentColor) !important;
    color: color-mix(in srgb, Black 40%, AccentColor) !important;
    font-weight: bold !important;
  }
}
/**/




/*******************************************************************************
/* ### highlight certain file names under [Browser Toolbox] [Style Editor]
/*------------------------------------------------------------------------------
/* highlight file names "userChrome.css" and "userContent.css" when using:
/*   [Browser Toolbox] (Ctrl+Shift+Alt+I) [Developer Tools] [Style Editor]
/* NOTE: this CSS rule must be set in the folder/file below:
/*   [FIREFOX-PROFILE-FOLDER]/chrome_debugger_profile/chrome/userContent.css
/* NOTE: you must also create the file below (containing the user_pref):
/*   [FIREFOX-PROFILE-FOLDER]/chrome_debugger_profile/user.js
/*   user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
/* https://twitter.com/myfonj/status/1387584962354982912
/* https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/
/* https://www.reddit.com/r/FirefoxCSS/comments/n91i3w/quick_way_to_find_userchromecss_in_developer_tools/
/******************************************************************************/
/**/
@-moz-document url-prefix("chrome://devtools/content/styleeditor/index.xhtml") {
  .splitview-nav label[value*="userChrome"],
    .splitview-nav label[value*="userContent"]
  {
    background-color: color-mix(in srgb, White 40%, AccentColor) !important;
    color: color-mix(in srgb, Black 40%, AccentColor) !important;
    font-weight: bold !important;
  }
}
/**/




/******************************************************************************/