/*******************************************************************************
/* [FIREFOX-PROFILE-FOLDER]/chrome/userChrome.css
/*------------------------------------------------------------------------------
/* File/Update  : https://raw.githubusercontent.com/icpantsparti2/browser-bits/main/firefox-style/chrome/userChrome.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 the firefox user interface
/*                (eg: tab style, tab min-size, numbered tabs, profile indicator, and more)
/* (also see: https://raw.githubusercontent.com/icpantsparti2/browser-bits/main/firefox-style/chrome/userContent.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 "userChrome.css" inside the "chrome" folder
/*    or b) save this file as "userChrome-icpantsparti.css" in "chrome" folder
/*          and create/edit your "userChrome.css" adding this line near the top:
/*          @import "./userChrome-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 "userChrome.css" file
/*------------------------------------------------------------------------------
/* Notes:
/*   * This is a collection of userChrome.css code snippets
/*   * #id and .class names are by Mozilla from Firefox CSS structure
/*   * CSS selectors can change between Firefox versions without notice/support
/*------------------------------------------------------------------------------
/* Useful links (in no particular order):
/*   https://www.reddit.com/r/FirefoxCSS/wiki/index/tutorials
/*   https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html
/*     (as above: https://developer.mozilla.org/docs/Tools/Browser_Toolbox)
/*   https://www.reddit.com/r/FirefoxCSS
/*   https://www.reddit.com/r/firefox
/*   https://www.mozilla.org
/*   https://www.userchrome.org/
/*   https://github.com/MrOtherGuy/firefox-csshacks
/*   https://github.com/Aris-t2/CustomCSSforFx  (Classic Theme Restorer)
/*   https://github.com/Timvde/UserChrome-Tweaks  (dormant/archived)
/*   https://github.com/GrosBourrin/UserChrome-Tweaks
/*   https://www.reddit.com/r/FirefoxCSS/comments/14cmitl/is_it_possible_to_edit_the_ui_of_the_browser/
/*     (how to change the UI of the browser toolbox)
/*------------------------------------------------------------------------------
/* Some Example Firefox CSS "Themes" links (in no particular order):
/*   https://firefoxcss-store.github.io/  (<- lots more CSS "Themes" here)
/*     (repo of above: https://github.com/FirefoxCSS-Store/FirefoxCSS-Store.github.io)
/*     https://github.com/black7375/Firefox-UI-Fix  (Lepton/Proton Fix)
/*     https://github.com/black7375/Firefox-UI-Fix/tree/photon-style
/*     https://github.com/muckSponge/MaterialFox
/*     https://github.com/QNetITQ/WaveFox
/*   https://github.com/wilfredwee/photon-australis
/*   https://github.com/intrnl/firefox-revert-proton  (dormant/archived)
/*   https://github.com/overdodactyl/ShadowFox  (dormant?)
/*------------------------------------------------------------------------------
/* 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 "userChrome-____.css" files
/*   main (the following are enabled - comment out any not required)
/*     tab bar : hide the space before the window control buttons
/*     tabs : minimum tab size
/*     tabs : move "Close Tab" options to the top of context menu
/*     tabs : reduce favicon padding
/*     tabs : always show a favicon
/*     tabs : numbered tabs (and "List all tabs" panel)
/*     tabs : remove tab padding, curved border, and shadow
/*     tabs : indicate: pending (unloaded), multi-selected, selected (current)
/*     tabs : show audio icon above favicon
/*     url box : rounded corners
/*     url box : bookmark panel : hide preview and show URL and keyword boxes
/*     sidebar : unrestricted sidebar width
/*     toolbar : compact buttons
/*     toolbar : force display of the full toolbar even in popup windows
/*     toolbar : replace 'extensions/overflow/menu' button icons
/*     toolbar+contextmenus : add outline to tab favicons and add-on icons
/*     toolbar : overflow button panel - compact/columns
/*     toolbar : unified extensions button panel - compact/columns
/*     findbar : remove the animation
/*     tab bar : hide "Private browsing" text label
/*     tab bar : show a profile indicator (color/text label) (see notes)
/*   other (the following are disabled - uncomment any required)
/*     toolbar : unified extensions button panel - color add-on names
/*     tabs : no text fade out (on the right edge)
/*     tabs : hide tab close buttons
/*     url box : enforce minimum width
/*     url box : hide container symbol
/*     url box : hide bookmark button
/*     tab bar : hide until nav area hovered
/*     tab bar : hide "List all tabs" button
/******************************************************************************/




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




/*******************************************************************************
/* ### main (the following are enabled - comment out any not required)
/*------------------------------------------------------------------------------
/* enable/disable by editing preceeding line(s) as either:   /**/   /*
/******************************************************************************/




/*******************************************************************************
/* ### tab bar : hide the space before the window control buttons
/*------------------------------------------------------------------------------
/* the spacer before Minimize/Maximize/Restore/Close buttons
/* seen when 'about:config' user_pref("browser.tabs.inTitlebar", 1);
/* https://www.reddit.com/r/FirefoxCSS/comments/x70pcs/removing_unused_space_between_new_tablist_all/
/******************************************************************************/
/**/
.titlebar-spacer[type="post-tabs"] { display: none; }
/**/




/*******************************************************************************
/* ### tabs : minimum tab size
/*------------------------------------------------------------------------------
/* prevent tab overflow for longer (as more tabs opened their size reduces)
/* tip: also enable: "hide tab close buttons" "List all tabs" and "numbered tabs"
/* https://github.com/Timvde/UserChrome-Tweaks/blob/master/tabs/prevent-tab-overflow.css
/* https://www.reddit.com/r/FirefoxCSS/comments/p3mfg8/fixing_tabs_in_the_newest_version_of_ff_first/
/* notes:
/*   clip-width: 1.5em !important;
/*   if you want minimum tab size for selected tab:
/*     https://www.reddit.com/r/FirefoxCSS/comments/xoopet/like_many_others_im_wanting_to_make_the_move_from/
/*     .tabbrowser-tab[fadein][selected]:not([pinned]){min-width: 4em !important;}
/******************************************************************************/
/**/
.tabbrowser-tab[fadein]:not([pinned]) {
  min-width: 1.5em !important;
}
/**/




/*******************************************************************************
/* ### tabs : move "Close Tab" options to the top of context menu
/*------------------------------------------------------------------------------
/* why: for easier tab closing from tab right click content menu
/*      eg: hold down right click and release on "Close Tab"
/* https://www.reddit.com/r/FirefoxCSS/comments/9la2ps/how_i_can_change_order_of_the_items_in_right/
/******************************************************************************/
/**/
#tabContextMenu #context_closeTab { -moz-box-ordinal-group:0; order:0; }
#tabContextMenu #context_closeTabsToTheEnd { -moz-box-ordinal-group:0; order:0; }
/**/




/*******************************************************************************
/* ### tabs : reduce favicon padding
/*------------------------------------------------------------------------------
/* https://www.reddit.com/r/FirefoxCSS/comments/7dfnhv/how_to_remove_empty_space_around_favicon_so_more/
/* https://www.reddit.com/r/FirefoxCSS/comments/7orkrw/tabs_change_favicon_into_close_button_on_hover/
/* notes:
/*   transform: scale(0.8, 0.8) !important;
/******************************************************************************/
/**/
.tabbrowser-tab .tab-icon-image,
  .tabbrowser-tab .tab-throbber,
  .tabbrowser-tab .tab-sharing-icon-overlay,
  .tabbrowser-tab .tab-icon-overlay
{
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-inline-end: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
/**/




/*******************************************************************************
/* ### tabs : always show a favicon
/*------------------------------------------------------------------------------
/* eg default icon when none/loading
/******************************************************************************/
/**/
.tab-icon-image { display: block !important; }
/**/




/*******************************************************************************
/* ### tabs : numbered tabs (and "List all tabs" panel)
/*------------------------------------------------------------------------------
/* White on Black, OrangeRed (active tab), Gray (pending/unloaded)
/* https://www.reddit.com/r/FirefoxCSS/comments/8ruy2d/numbered_tabs_revisited/
/* NOTE: pinned tabs are numbered (matches tab switching with Alt+1 ... Alt+8)
/*       however the panel for "List all tabs" button does not list pinned tabs
/*       unless 'about:config' "browser.tabs.tabmanager.enabled" is set to true
/*       so if that pref is false we show wavy line-through on those numberings
/* notes:
/*   FF107+ #allTabsMenu-allTabsViewTabs becomes #allTabsMenu-allTabsView-tabs
/*   FF116+ now uses .all-tabs-button.subviewbutton::before for container color
/*   not using as we want pinned tabs numbered too:
/*     #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-content::before
/*------------------------------------------------------------------------------
/* notes:
/*   if you wanted tab count on "List all tabs" button see:
/*   https://www.reddit.com/r/FirefoxCSS/comments/s4wsww/show_the_number_of_open_tabs_on_the_list_all_tabs/
/******************************************************************************/
/**/
#tabbrowser-tabs, #allTabsMenu-allTabsViewTabs, #allTabsMenu-allTabsView-tabs
{ counter-reset: n_tabs 0; }

.tabbrowser-tab .tab-content::before,
  #allTabsMenu-allTabsViewTabs .all-tabs-button.subviewbutton::before,
  #allTabsMenu-allTabsView-tabs .all-tabs-button.subviewbutton::after
{
  display: inline-block;
  font-weight: bold !important;
  margin-right: 0px !important;
  background-color: Black !important;
  color: White !important;
}

#allTabsMenu-allTabsViewTabs .all-tabs-button.subviewbutton::before,
#allTabsMenu-allTabsView-tabs .all-tabs-button.subviewbutton::after
{
  margin-right: 4px !important;
  text-decoration: line-through wavy !important;
}

.tabbrowser-tab[pending] .tab-content::before,
  #allTabsMenu-allTabsViewTabs .all-tabs-item[pending] .all-tabs-button.subviewbutton::before,
  #allTabsMenu-allTabsView-tabs .all-tabs-item[pending] .all-tabs-button.subviewbutton::after
{
  background-color: DarkGray !important;
  color: Black !important;
}

.tabbrowser-tab[selected=true] .tab-content::before,
  #allTabsMenu-allTabsViewTabs .all-tabs-item[selected=true] .all-tabs-button.subviewbutton::before,
  #allTabsMenu-allTabsView-tabs .all-tabs-item[selected=true] .all-tabs-button.subviewbutton::after
{
  background-color: OrangeRed !important;
}

.tabbrowser-tab .tab-content::before
{
  margin-left: 1px !important;
  font-size: 80% !important;
  line-height: 85%;
  max-width: 0.6em !important;
  word-break: break-all;
}

#tabbrowser-tabs .tabbrowser-tab .tab-content::before
{
  counter-increment: n_tabs;
  content:counter(n_tabs);
}

#allTabsMenu-allTabsViewTabs .all-tabs-button.subviewbutton::before,
#allTabsMenu-allTabsView-tabs .all-tabs-button.subviewbutton::after
{
  counter-increment: n_tabs;
  content:"\00A0" counter(n_tabs) "\00A0";
}

@supports -moz-bool-pref("browser.tabs.tabmanager.enabled") {
  #allTabsMenu-allTabsViewTabs .all-tabs-button.subviewbutton::before,
  #allTabsMenu-allTabsView-tabs .all-tabs-button.subviewbutton::after
  {
    text-decoration: unset !important;
  }
}

@media (-moz-bool-pref:"browser.tabs.tabmanager.enabled") {
  #allTabsMenu-allTabsViewTabs .all-tabs-button.subviewbutton::before,
  #allTabsMenu-allTabsView-tabs .all-tabs-button.subviewbutton::after
  {
    text-decoration: unset !important;
  }
}
/**/




/*******************************************************************************
/* ### tabs : remove tab padding, curved border, and shadow
/*------------------------------------------------------------------------------
/* https://www.reddit.com/r/firefox/comments/mxgba3/dont_like_proton_designs_tab_style_add_this_to/
/* https://gist.github.com/Speedy37/63d37931601123178ac2221533292cdd
/* https://www.reddit.com/r/FirefoxCSS/comments/mviznn/so_i_just_got_inflincted_the_new_ui_can_anyone/
/* https://github.com/intrnl/firefox-revert-proton
/* https://github.com/ShatteredIcicle/firefox-ui-regression-mending/blob/master/chrome/photon-tabs.css
/******************************************************************************/
/**/
#TabsToolbar {
  --lwt-tab-line-color: reset !important;
}
.tabbrowser-tab .tab-content {
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
#TabsToolbar .tabbrowser-tab {
  padding-inline: unset !important;
}
#TabsToolbar .tabbrowser-tab .tab-background {
  border-radius: unset !important;
  box-shadow: none !important;
}
/**/




/*******************************************************************************
/* ### tabs : indicate: pending (unloaded), multi-selected, selected (current)
/*------------------------------------------------------------------------------
/* notes:
/*   @-moz-document url(chrome://browser/content/browser.xhtml) { }
/*   AccentColor eg #0078D7 AccentColorText --toolbar-bgcolor --tabpanel-background-color --tab-selected-bgcolor
/*   background-image: radial-gradient(transparent,#D3D3D3) !important;
/*   box-shadow: 0px 0px 5px var(--identity-icon-color) inset !important;
/*   background-image: radial-gradient(transparent,transparent,var(--identity-icon-color,#fff)) !important;
/*   font-weight: bold !important;
/*   FF119 broken on dark/light theme: --focus-outline-color
/******************************************************************************/
/**/
#TabsToolbar .tabbrowser-tab[pending] .tab-text {
  text-decoration: line-through !important;
}
#TabsToolbar .tabbrowser-tab[multiselected="true"] .tab-background {
  border-bottom: 3px dotted var(--color-accent-primary) !important;
}
#TabsToolbar .tab-background[multiselected="true"] {
  outline: unset !important;
}
#TabsToolbar .tabbrowser-tab[selected=true] .tab-background {
  box-shadow: none !important;
  border-bottom: 3px solid var(--color-accent-primary) !important;
}
/**/

/* underline name (title) on selected/active tabs */
/*
#TabsToolbar .tabbrowser-tab[multiselected="true"] .tab-text {
  text-decoration: underline 2px !important;
}
#TabsToolbar .tabbrowser-tab[selected=true] .tab-text {
  text-decoration: underline wavy !important;
}
/**/




/*******************************************************************************
/* ### tabs : show audio icon above favicon
/*------------------------------------------------------------------------------
/* (speaker icon/mute for tabs with audio)
/* https://www.reddit.com/r/FirefoxCSS/comments/msg30g/how_to_show_speaker_icon_next_to_the_favicon/
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/inline_tab_audio_icons.css
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/overlay_tab_audio_icons.css
/* https://www.reddit.com/r/FirefoxCSS/comments/nsx39v/audio_icon/
/* notes:
/*   previously (tabs : show audio icon next to favicon):
/*   .tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]) { grid-template-areas: "a s";}
/*   .tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]) { grid-area: s; }
/*   .tab-icon-overlay, .tab-icon-image { opacity: 1 !important; }
/* notes:
/*   .tab-secondary-label { display: none }
/*   .tab-secondary-label:is([soundplaying], [muted],
/*     [activemedia-blocked], [pictureinpicture], [sharing])
/*   { display: none !important; }
/******************************************************************************/
/**/
.tab-icon-overlay:is([soundplaying], [muted],
[activemedia-blocked], [pictureinpicture], [sharing], :not([pinned])) {
  opacity: 1 !important;
  bottom: 12px !important;
  padding: 0px !important;
  fill-opacity: 1 !important;
}

.tab-icon-overlay[soundplaying] { fill: Lime !important; }

.tab-icon-overlay[muted] { fill: Pink !important; }

.tab-icon-overlay:is([pinned], [sharing]):not([crashed]) {
  opacity: 1 !important;
  margin-top: -7px !important;
  padding: 0px !important;
  stroke: none !important;
  fill-opacity: 1 !important;
}

#TabsToolbar .tab-icon-image { opacity: 1 !important; }
/**/




/*******************************************************************************
/* ### url box : rounded corners
/*------------------------------------------------------------------------------
/* https://www.reddit.com/r/FirefoxCSS/comments/hzm32k/does_anyone_know_how_to_get_rounded_corners_on/
/******************************************************************************/
/**/
#urlbar-background {
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent) !important;
}
#identity-icon-box {
  border-radius: 12px 0 0 12px !important;
}
/**/




/*******************************************************************************
/* ### url box : bookmark panel : hide preview and show URL and keyword boxes
/*------------------------------------------------------------------------------
/* https://www.reddit.com/r/FirefoxCSS/comments/104xehv/no_longer_displaying_url_field_in_the_edit_this/
/******************************************************************************/
/**/
#editBookmarkPanel #editBMPanel_locationRow,
#editBookmarkPanel .editBMPanel_locationRow,
#editBookmarkPanel .editBMPanel_keywordRow
{
  visibility: visible !important;
  display: block !important;
}
#editBookmarkPanel #editBMPanel_locationField {
  min-width: 80% !important;
}
#editBookmarkPanel #editBookmarkPanelImage,
#editBookmarkPanel #editBookmarkSeparator {
  display: none !important;
}
/**/




/*******************************************************************************
/* ### sidebar : unrestricted sidebar width
/*------------------------------------------------------------------------------
/* https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/sidebar_width_unrestricted.css
/******************************************************************************/
/**/
#sidebar, #sidebar-header, #sidebar-box {
  overflow: hidden !important;
  min-width: 0px !important;
  max-width: 100vw !important;
}
/**/




/*******************************************************************************
/* ### toolbar : compact buttons
/******************************************************************************/
/**/
#PanelUI-menu-button,
#nav-bar-overflow-button,
#unified-extensions-button,
#navigator-toolbox .chromeclass-toolbar-additional
{
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin-left: -2px !important;
  margin-right: -2px !important;
}
/**/




/*******************************************************************************
/* ### toolbar : force display of the full toolbar even in popup windows
/*------------------------------------------------------------------------------
/* Override Hiding of Toolbar Buttons in Limited Feature Windows
/* https://www.reddit.com/r/firefox/comments/z9f804/is_there_a_way_to_show_addons_in_popup_windows/
/* https://www.userchrome.org/how-create-userchrome-css.html
/* https://www.jeffersonscher.com/res/popit.html
/* notes:
/*   default is display: none
/******************************************************************************/
/**/
*|*:root[chromehidden~="toolbar"] .chromeclass-toolbar-additional {
  display: flex !important;
}
/**/




/*******************************************************************************
/* ### toolbar : replace 'extensions/overflow/menu' button icons
/*------------------------------------------------------------------------------
/* swap the icons to look like: [v] [>] [...]
/* https://www.reddit.com/r/FirefoxCSS/comments/7er388/change_icon_of_the_hamburger_menu/
/* https://www.reddit.com/r/FirefoxCSS/comments/11raf60/text_in_unified_extensions_menu_is_not_aligned/
/* notes:
/*   chrome://branding/content/icon32.png
/*   chrome://global/skin/icons/chevron.svg
/******************************************************************************/
#unified-extensions-button .toolbarbutton-icon {
  list-style-image: url("chrome://global/skin/icons/sort-arrow.svg") !important;
}
#nav-bar-overflow-button .toolbarbutton-icon {
  list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg") !important;
}
#PanelUI-menu-button .toolbarbutton-icon {
  list-style-image: url("chrome://global/skin/icons/more.svg") !important;
}




/*******************************************************************************
/* ### toolbar+contextmenus : add outline to tab favicons and add-on icons
/*------------------------------------------------------------------------------
/* if you are using a dark theme helps some favicons to show (eg github.com)
/* https://www.reddit.com/r/FirefoxCSS/comments/sda1sx/favicon_background_for_dark_themes/
/* https://www.reddit.com/r/FirefoxCSS/comments/f7jr79/background_tabs_greyscale_icon_foreground_hovered/
/* https://www.reddit.com/r/FirefoxCSS/comments/yx9fly/any_way_to_change_the_extension_icon_colour_would/
/* /*border-radius: 15%;*/
/******************************************************************************/
/**/
.tab-icon-image,
.webextension-browser-action .toolbarbutton-icon,
.unified-extensions-item-icon,
#contentAreaContextMenu :where([image^="moz-extension:"]) .menu-iconic-icon,
#tabContextMenu :where([image^="moz-extension:"]) .menu-iconic-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;
}
/**/




/*******************************************************************************
/* ### toolbar : overflow button panel - compact/columns
/*------------------------------------------------------------------------------
/* and icon only for cut/copy/paste buttons
/* https://www.reddit.com/r/FirefoxCSS/comments/y1p88c/how_can_i_only_show_extension_icons_in_a_grid/
/* notes:
/*   display: grid; grid-template-columns: repeat(3, 1fr);
/******************************************************************************/
/**/
#widget-overflow-list,
#widget-overflow-fixed-list
{
  display: block;
  column-gap: 0;
  column-count: 2;
}
#widget-overflow #edit-controls .toolbarbutton-text {
  display: none !important;
}
/**/




/*******************************************************************************
/* ### toolbar : unified extensions button panel - compact/columns
/*------------------------------------------------------------------------------
/* the "jigsaw puzzle piece" Extensions button (FF109 onwards)
/* the panel is for notifying/controlling manifest v3 extension permissions
/* https://blog.mozilla.org/addons/2022/11/17/unified-extensions-button-and-how-to-handle-permissions-in-manifest-v3/
/* https://addons.mozilla.org/firefox/addon/a-test-extension/
/* https://www.reddit.com/r/FirefoxCSS/comments/10exwv7/anyone_know_how_to_change_the_scale_of_the/
/* https://www.reddit.com/r/FirefoxCSS/comments/10exwv7/anyone_know_how_to_change_the_scale_of_the/j4v67wj/
/* https://www.reddit.com/r/FirefoxCSS/comments/10fl39n/made_these_two_different_styles_for_people_who/
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/compact_extensions_panel.css
/* https://www.reddit.com/r/FirefoxCSS/comments/150kcjg/move_extensions_button_right_of_pinned_extensions/
/*------------------------------------------------------------------------------
/* notes:
/*   - when Mozilla further develops the unified extensions panel, this code
/*     will need reviewing to ensure it does not inhibit the ui/function
/*   - also see section below for coloring add-on names
/*   - to change icon order (until Firefox UI develops), see/use:
/*     https://github.com/icpantsparti2/browser-bits/blob/main/javascript/firefox-v109-change-order-under-extensions-button.js
/*------------------------------------------------------------------------------
/* --menu-panel-width: 22.35em;
/* --menu-panel-width-wide: 29em;
/******************************************************************************/
/**/
#unified-extensions-view {
  width: unset !important;
}

#overflowed-extensions-list,
#unified-extensions-area,
.unified-extensions-list
{
  margin-inline: var(--panel-separator-margin) !important;
  display: block !important;
  column-gap: 0 !important;
  column-count: 2 !important;
}


#unified-extensions-view .panel-header,
#unified-extensions-view toolbarseparator
{
  display: none !important;
}

#unified-extensions-panel #unified-extensions-view,
#unified-extensions-manage-extensions
{
  margin-top: 4px !important;
}

#unified-extensions-panel vbox#overflowed-extensions-list:not(:empty),
#unified-extensions-panel vbox#unified-extensions-area:not(:empty),
#unified-extensions-panel vbox.unified-extensions-list:not(:empty)
{
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}


#overflowed-extensions-list .toolbarbutton-icon,
#unified-extensions-panel .toolbarbutton-icon,
.unified-extensions-item-icon
{
  --uei-icon-size: 16px;
}

#unified-extensions-panel .subviewbutton {
  padding: 2px !important;
}

#unified-extensions-view > vbox > vbox > .unified-extensions-item {
  padding-block: 0px !important;
  margin-block: 0px !important;
}

#unified-extensions-view .unified-extensions-item-menu-button {
  margin-inline-end: 0 !important;
}

#unified-extensions-view .toolbarbutton-icon {
  padding: 0 !important;
}

.unified-extensions-list .unified-extensions-item-menu-button {
  margin-inline-end: 8px !important;
}

.unified-extensions-item-contents {
  line-height: 1 !important;
  white-space: nowrap !important;
}


.unified-extensions-item-name {
  font-size: 80% !important; }

.unified-extensions-item-message {
  font-size: 75% !important; }

#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton:not(:hover)
{
  opacity: 0.2 !important;
}

#unified-extensions-panel
  :where(toolbaritem,unified-extensions-item)[attention]
  .unified-extensions-item-action-button
{
  box-shadow:
    1px 1px var(--uei-button-attention-dot-color) inset,
    -1px -1px var(--uei-button-attention-dot-color) inset !important;
}
/**/

/* keep button to the right of pinned extension buttons */
/**/
#unified-extensions-button { order: 1 !important; }
/**/

/* to style disabled extension buttons */
/*
#unified-extensions-panel
  :where(toolbaritem,unified-extensions-item)
  .unified-extensions-item-action-button[disabled]
{ }
/**/

/* to hide the gear icons */
/*
#unified-extensions-view .unified-extensions-item-menu-button.subviewbutton
  { display: none !important; }
/**/

/* to hide the button text (not advised) */
/*
#unified-extensions-view .unified-extensions-item-action-button .unified-extensions-item-contents
  { width: 0 !important; visibility: hidden !important; }
/**/




/*******************************************************************************
/* ### findbar : remove the animation
/*------------------------------------------------------------------------------
/* https://www.reddit.com/r/firefox/comments/11m8eyt/ctrlf_search_bar_appearing_animation_can_i_turn/
/******************************************************************************/
/**/
findbar {
  transition-property: unset !important;
  transition-duration: unset !important;
  transition-timing-function: unset !important;
}
/**/




/*******************************************************************************
/* ### tab bar : hide "Private browsing" text label
/*------------------------------------------------------------------------------
/* https://www.reddit.com/r/firefox/comments/16sri14/1190b1_how_to_remove_this_private_browsing/k2b7nrf/
/* FF119 instead of: "browser.privatebrowsing.enable-new-indicator", false
/******************************************************************************/
/**/
#private-browsing-indicator-with-label > label {
  display: none;
}
/**/




/*******************************************************************************
/* ### tab bar : show a profile indicator (color/text label) (see notes)
/*------------------------------------------------------------------------------
/* shows on the right edge of the tab bar (useful for multiple profiles)
/* notes: this does not show unless configured, set your own names/colors
/*        set a preference in 'about:config' to trigger which id is shown eg
/*          user_pref("_profile_0", true);  in first profile
/*          user_pref("_profile_1", true);  in next profile  etc
/*        also see: "optional: for compact profile indicator (sideways text)"
/* for multiple spaces in --id-txt use multiple \00A0 (non breaking spaces)
/* FF120? @supports -moz-bool-pref("...") becomes @media (-moz-bool-pref:"...")
/******************************************************************************/
/**/
@supports -moz-bool-pref("_profile_0") {
  #navigator-toolbox { --id-txt:"0"; --id-fg:Black; --id-bg:DarkOrange; } }
@media (-moz-bool-pref:"_profile_0") {
  #navigator-toolbox { --id-txt:"0"; --id-fg:Black; --id-bg:DarkOrange; } }

@supports -moz-bool-pref("_profile_1") {
  #navigator-toolbox { --id-txt:"1"; --id-fg:Black; --id-bg:LightSeaGreen; } }
@media (-moz-bool-pref:"_profile_1") {
  #navigator-toolbox { --id-txt:"1"; --id-fg:Black; --id-bg:LightSeaGreen; } }

@supports -moz-bool-pref("_profile_2") {
  #navigator-toolbox { --id-txt:"2"; --id-fg:Black; --id-bg:BurlyWood; } }
@media (-moz-bool-pref:"_profile_2") {
  #navigator-toolbox { --id-txt:"2"; --id-fg:Black; --id-bg:BurlyWood; } }

@supports -moz-bool-pref("_profile_3") {
  #navigator-toolbox { --id-txt:"3"; --id-fg:Black; --id-bg:Yellow; } }
@media (-moz-bool-pref:"_profile_3") {
  #navigator-toolbox { --id-txt:"3"; --id-fg:Black; --id-bg:Yellow; } }

@supports -moz-bool-pref("_profile_4") {
  #navigator-toolbox { --id-txt:"4"; --id-fg:Black; --id-bg:HotPink; } }
@media (-moz-bool-pref:"_profile_4") {
  #navigator-toolbox { --id-txt:"4"; --id-fg:Black; --id-bg:HotPink; } }

@supports -moz-bool-pref("_profile_5") {
  #navigator-toolbox { --id-txt:"5"; --id-fg:White; --id-bg:Red; } }
@media (-moz-bool-pref:"_profile_5") {
  #navigator-toolbox { --id-txt:"5"; --id-fg:White; --id-bg:Red; } }

@supports -moz-bool-pref("_profile_6") {
  #navigator-toolbox { --id-txt:"6"; --id-fg:White; --id-bg:Black; } }
@media (-moz-bool-pref:"_profile_6") {
  #navigator-toolbox { --id-txt:"6"; --id-fg:White; --id-bg:Black; } }

@supports -moz-bool-pref("_profile_e") {
  #navigator-toolbox { --id-txt:"ESR"; --id-fg:Black; --id-bg:DarkOrange; } }
@media (-moz-bool-pref:"_profile_e") {
  #navigator-toolbox { --id-txt:"ESR"; --id-fg:Black; --id-bg:DarkOrange; } }

@supports -moz-bool-pref("_profile_b") {
  #navigator-toolbox { --id-txt:"Beta"; --id-fg:Black; --id-bg:SkyBlue; } }
@media (-moz-bool-pref:"_profile_b") {
  #navigator-toolbox { --id-txt:"Beta"; --id-fg:Black; --id-bg:SkyBlue; } }

@supports -moz-bool-pref("_profile_d") {
  #navigator-toolbox { --id-txt:"Dev"; --id-fg:White; --id-bg:DodgerBlue; } }
@media (-moz-bool-pref:"_profile_d") {
  #navigator-toolbox { --id-txt:"Dev"; --id-fg:White; --id-bg:DodgerBlue; } }

@supports -moz-bool-pref("_profile_a") {
  #navigator-toolbox { --id-txt:"Alpha"; --id-fg:White; --id-bg:MediumPurple; } }
@media (-moz-bool-pref:"_profile_a") {
  #navigator-toolbox { --id-txt:"Alpha"; --id-fg:White; --id-bg:MediumPurple; } }

#TabsToolbar::after {
  display:flex;
  flex-grow:0 !important;
  height:var(--tab-min-height,3.5em);
  padding:2px !important;
  justify-content:center;
  align-items:center;
  word-break:break-all;
  overflow:hidden;
  font-weight:bold;
  text-shadow:none;
  color:var(--id-fg,Black);
  background-color:var(--id-bg,LightGray);
  content:var(--id-txt);
}
/**/

/* optional: for compact profile indicator (sideways text) */
/*
#TabsToolbar::after {
  width:1.2em !important;
  writing-mode:sideways-lr !important;
  align-items:unset !important;
  font-size:0.85em !important;
}
/**/




/*******************************************************************************
/* ### other (the following are disabled - uncomment any required)
/*------------------------------------------------------------------------------
/* enable/disable by editing preceeding line(s) as either:   /**/   /*
/******************************************************************************/




/*******************************************************************************
/* ### toolbar : unified extensions button panel - color add-on names
/*------------------------------------------------------------------------------
/* the "jigsaw puzzle piece" Extensions button (FF109+)
/* (also see section above for compact/columns)
/* if you want to highlight any add-on names in the list...
/*   - you might be able to select using start of name with '[label^="..."]'
/*   - or use '[data-extensionid="..."]' with ID from 'about:support#addons' page
/*   - or for add-ons with no toolbar icon select with '[extension-id="..."]'
/*   - perhaps uncomment '@import "./userChrome-my-extras.css";' near the top
/*     and put your selectors and colors in a file with that name
/*------------------------------------------------------------------------------
/* example selectors:
/*   [label^="..."], [data-extensionid="..."], [extension-id="..."],
/*   [label^="uBlock Origin"], [data-extensionid="uBlock0@raymondhill.net"],
/*   [label^="Name"], [data-extensionid="{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); });
/******************************************************************************/
/*
#unified-extensions-panel vbox > :where(
    [label^="..."], [data-extensionid="..."], [extension-id="..."]
) .unified-extensions-item-name
{
  background: LimeGreen !important;
  color: Black !important;
}

#unified-extensions-panel vbox > :where(
    [label^="..."], [data-extensionid="..."], [extension-id="..."]
) .unified-extensions-item-name
{
  background: DeepSkyBlue !important;
  color: Black !important;
}

#unified-extensions-panel vbox > :where(
    [label^="..."], [data-extensionid="..."], [extension-id="..."]
) .unified-extensions-item-name
{
  background: Gold !important;
  color: Black !important;
}

#unified-extensions-panel vbox > :where(
    [label^="..."], [data-extensionid="..."], [extension-id="..."]
) .unified-extensions-item-name
{
  background: DarkOrange !important;
  color: Black !important;
}

#unified-extensions-panel vbox > :where(
    [label^="..."], [data-extensionid="..."], [extension-id="..."]
) .unified-extensions-item-name
{
  background: PaleVioletRed !important;
  color: Black !important;
}

#unified-extensions-panel vbox > :where(
    [label^="..."], [data-extensionid="..."], [extension-id="..."]
) .unified-extensions-item-name
{
  background: Crimson !important;
  color: LightGray !important;
}

#unified-extensions-panel vbox > :where(
    [label^="..."], [data-extensionid="..."], [extension-id="..."]
) .unified-extensions-item-name
{
  background: DarkGray !important;
  color: Black !important;
}
/**/




/*******************************************************************************
/* ### tabs : no text fade out (on the right edge)
/*------------------------------------------------------------------------------
/* https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tab_titles_remove_blur.css
/******************************************************************************/
/*
.tab-label-container[textoverflow]:not([pinned]) {
  mask-image: unset !important;
}
/**/




/*******************************************************************************
/* ### tabs : hide tab close buttons
/*------------------------------------------------------------------------------
/* tip: quick close tab by holding down right click and release on "Close Tab"
/*   or use middle mouse click, or 'about:config' "browser.tabs.closeTabByDblclick"
/* https://support.mozilla.org/en-US/questions/1177825
/* https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tab_close_hidden.css
/* notes:
/*   #tabbrowser-tabs .tabbrowser-tab .tab-close-button { display: none !important; }
/*   if you want hide close buttons but excluding selected tab:
/*     https://www.reddit.com/r/FirefoxCSS/comments/xoopet/like_many_others_im_wanting_to_make_the_move_from/
/*     #tabbrowser-tabs[closebuttons="activetab"] .tab-close-button:not([selected])
/******************************************************************************/
/*
.tabbrowser-tab .tab-close-button { visibility: collapse !important; }
/**/




/*******************************************************************************
/* ### url box : enforce minimum width
/*------------------------------------------------------------------------------
/* vw = % of viewport width
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/navbar_tabs_oneliner.css
/* notes:
/*   #urlbar[open]:focus-within { min-width: 60vw !important; }
/*   #urlbar-container:focus-within { min-width: 60vw !important; }
/******************************************************************************/
/*
#urlbar-container {
  min-width: 55vw !important;
  max-width: 100% !important;
}
/**/




/*******************************************************************************
/* ### url box : hide container symbol
/******************************************************************************/
/*
#userContext-indicator { display: none; }
/**/




/*******************************************************************************
/* ### url box : hide bookmark button
/*------------------------------------------------------------------------------
/* if you do not use bookmarks (eg you use a note taking app instead)
/* you can still bookmark from: Ctrl-D / right click tab / menu>Bookmarks
/******************************************************************************/
/*
#star-button-box { display: none; }
/**/




/*******************************************************************************
/* ### tab bar : hide until nav area hovered
/*------------------------------------------------------------------------------
/* https://www.reddit.com/r/FirefoxCSS/comments/xy6m5z/how_to_hide_tabs_toolbar_unless_hovering_over_top/
/******************************************************************************/
/*
#TabsToolbar{
  -moz-window-dragging: no-drag;
  visibility: collapse;
}
#navigator-toolbox:hover #TabsToolbar{ visibility: visible }
/**/




/*******************************************************************************
/* ### tab bar : hide "List all tabs" button
/*------------------------------------------------------------------------------
/* show on tab overflow: 'about:config' "browser.tabs.tabmanager.enabled" false
/* always hide: use css
/* https://www.reddit.com/r/FirefoxCSS/comments/8uz9d1/show_list_all_tabs_button_always/
/* https://www.reddit.com/r/FirefoxCSS/comments/f2bru9/list_all_tabs_button_not_showing_in_73/
/*   visibility: visible !important;  display: initial !important;
/* https://www.reddit.com/r/FirefoxCSS/comments/ybntlw/how_to_hide_or_remove_the_new_tab_menu/
/*   #tabbrowser-tabs:not([overflow="true"]) ~ #alltabs-button{ display: none }
/******************************************************************************/
/*
#alltabs-button { display: none !important; }
/**/




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