Skip to content

Instantly share code, notes, and snippets.

@shredthaGNAR

shredthaGNAR/tab-states.md

Created September 18, 2023 03:21
Show Gist options
  • Save shredthaGNAR/4f92ffaf95a348d051aeec688db49577 to your computer and use it in GitHub Desktop.
Save shredthaGNAR/4f92ffaf95a348d051aeec688db49577 to your computer and use it in GitHub Desktop.
Download ZIP
userchrome tab actions WIP
Raw
tab-states.md
modified title
2023-09-18 03:22:03 UTC

/_ photon-like Menu Colors (14 Jan 2022) _/

/_ Bookmarks Toolbar folders _ #PersonalToolbar menupopup, /_ Right-click context menus _ #mainPopupSet menupopup, /_ Top menu bar on Windows (not sure about others) _ #toolbar-menubar menupopup, /_ Sidebar/Library bookmark/history context menus _ #placesContext, /_ Address bar context menu (2021-10-25) _ #urlbar-input-container menupopup, /_ Various toolbar drop-down panels (Fx96) _ #back-button menupopup, #forward-button menupopup, #identity-popup, #appMenu-popup, #downloadsPanel, #BMB_bookmarksPopup { /_ Text color _ --menu-color: #000 !important; --arrowpanel-color: #000 !important; --panel-color: #000 !important; /_ Background color _ --menu-background-color: #f0f0f0 !important; --arrowpanel-background: #f0f0f0 !important; --panel-background: #f0f0f0 !important; /_ Border color (if any) _ --menu-border-color: threedshadow !important; --arrowpanel-border-color: threedshadow !important; --panel-border-color: threedshadow !important; /_ Hovered/expanded item background color _ --menuitem-hover-background-color: #e0e0e6 !important; --button-hover-bgcolor: #e0e0e6 !important; /_ Disabled items text color and hovered background _ --menu-disabled-color: rgba(21, 20, 26, 0.4) !important; --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important; }

/_ ----- My Custom Colors ----- / :root { --firefoxcss-main-bg-color: hsl(240, 2%, 13%); / ^ Main dark color, url bar, active tab etc. ^ / --firefoxcss-item-bg-color: hsl(240, 2%, 20%); / ^ Main lighter color, toolbar ^ _/ --firefoxcss-tab-bg-color: hsl(240, 2%, 26%); --firefoxcss-tab-hover-bg-color: hsl(240, 2%, 28%); --firefoxcss-tab-active-bg-color: var(--firefoxcss-main-bg-color); --firefoxcss-bookmarks-bg-color: hsl(240, 2%, 13%); --firefoxcss-url-bar-bg-color: var(--firefoxcss-main-bg-color); --firefoxcss-url-border-bottom-color: hsla(0, 0%, 100%, 0.2); --firefoxcss-url-border-top-color: hsla(0, 0%, 0%, 0.15); --firefoxcss-url-breakout-bar-bg-color: var(--firefoxcss-main-bg-color); --firefoxcss-url-breakout-border-bottom-color: hsla(0, 0%, 70%, 0.05); --firefoxcss-top-bar-border-bottom-color: hsla(0, 0%, 6%, 0.75); --firefoxcss-other-color: hsla(0, 0%, 60%, 0.35); --firefoxcss-top-bar-border-bottom-size: 1px; --firefoxcss-border-radius: 10px; }

:root { --button-hover-bgcolor: hsla(0, 0%, 60%, 0.35) !important; --button-active-bgcolor: hsla(0, 0%, 45%, 0.35) !important; --button-bgcolor: hsla(0, 0%, 45%, 0.9) !important; --arrowpanel-border-color: hsla(0, 0%, 50%, 0.25) !important; --dark-menu-background-color: #222121 !important; --dark-menu-border-color: rgb(55, 55, 55) !important; --dark-menuitem-hover-background-color: rgba(159, 159, 159, 0.35) !important; --multiselect: rgb(176, 98, 34) !important; }

/_ Avoids bright flash while loadingn/ _/ #tabbrowser-tabpanels { background-color: var(--firefoxcss-main-bg-color) !important; }

browser[type="content-primary"], browser[type="content"] { background: var(--firefoxcss-main-bg-color) !important; }

/_ Other _/ #TabsToolbar { padding-inline-start: initial !important; }

.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"], .titlebar-spacer { display: none !important; }

/_ Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. _/

#PersonalToolbar { --uc-bm-height: 20px; /_ Might need to adjust if the toolbar has other buttons / --uc-bm-padding: 4px; / Vertical padding to be applied to bookmarks / --uc-autohide-toolbar-delay: 600ms; / The toolbar is hidden after 0.6s _/

/_ 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown / --uc-autohide-toolbar-focus-rotation: 0deg; / urlbar is focused / --uc-autohide-toolbar-hover-rotation: 0deg; / cursor is over the toolbar area _/ }

:root[uidensity="touch"] #PersonalToolbar { --uc-bm-padding: 7px }

#PersonalToolbar:not([customizing]) { position: relative; margin-bottom: calc(-1px - var(--uc-bm-height) - 2 _ var(--uc-bm-padding)); transform: rotateX(90deg); transform-origin: top; transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important; z-index: 1; /_ The following properties should allow the themes with trasparent toolbars to work _/ background-color: #8638c54c !important; background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); --uc-bg-y: calc(-2 _ (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding)); background-position: top left, top left, var(--lwt-background-alignment, top left); background-position-y: top, top, var(--uc-bg-y), var(--uc-bg-y), var(--uc-bg-y); background-image: var(--toolbar-bgimage), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, var(--lwt-additional-images)) !important; -moz-appearance: -moz-mac-source-list !important; }

#PlacesToolbarItems>.bookmark-item, #OtherBookmarks, #PersonalToolbar>#import-button { padding-block: var(--uc-bm-padding) !important; }

#nav-bar:focus-within+#PersonalToolbar { transition-delay: 100ms !important; transform: rotateX(var(--uc-autohide-toolbar-focus-rotation, 0)); }

#navigator-toolbox:hover>#PersonalToolbar { transition-delay: 100ms !important; transform: rotateX(var(--uc-autohide-toolbar-hover-rotation, 0)); }

#navigator-toolbox:hover>#nav-bar:focus-within+#PersonalToolbar { transform: rotateX(0); }

/_ Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_close_button_always_on_hover.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. _/

/_ Always show tab close button on hover and never otherwise _/ .tabbrowser-tab .tab-close-button { display: none; }

.tabbrowser-tab:not([pinned]):hover .tab-close-button { display: flex !important; align-items: center; }

/_ Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/centered_tab_content.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. _/ .tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-label-container, #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab:not(:hover):not([pinned]) .tab-label-container { padding-inline-end: 6px !important; }

.tab-icon-stack { margin-inline-start: auto }

.tab-label-container { max-width: min-content; margin-inline-end: auto; }

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background { border-top: 1px solid rgba(130, 130, 130, 0.3) !important; border-left: 1px solid rgba(130, 130, 130, 0.3) !important; border-right: 1px solid rgba(130, 130, 130, 0.3) !important; }

.tabbrowser-tab[selected="true"] .tab-label:-moz-lwtheme-brighttext { color: white !important; }

.tabbrowser-tab .tab-label:-moz-lwtheme-brighttext { color: rgba(255, 255, 255, 0.7) !important; }

/*---------------------------------------------------------------- .tabbrowser-tab[selected="true"] .tab-background:-moz-lwtheme-brighttext { box-shadow: inset 0em -4em 0em var(--toolbar-bgcolor) !important; }

/_ non-active/non-selected tabs (container) _/

.tabbrowser-tab[usercontextid]:not([selected], [multiselected]):hover .tab-background { background-color: color-mix(in srgb, var(--identity-tab-color) 20%, transparent) !important; outline: 1px solid var(--identity-tab-color) !important; box-shadow: inset 0em -2em 0em var(--identity-tab-color) !important; }

.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) { background-image: /var(--button-hover-bgcolor)/ radial-gradient(circle at bottom center, #9400ff 15px, #9500ff7d) !important; /box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;/ }

/_container tab label color when selected _/

.tabbrowser-tab[class*="identity-color-"] .tab-label { color: var(--identity-tab-color) !important; font-weight: bold !important; font-style: underline !important; }

/_ Active tab brightness _/

.tab-content[selected="true"] { background-color: color-mix(in srgb, #5c04ae 20%, transparent) !important; text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5) !important; margin-top: 0px !important; margin-bottom: 0px !important; }

/_ Mouse Hover Background by passing by non-selected tabs _

.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) { background: linear-gradient(#202085, #2020853c) !important; box-shadow: 5px 3px 6px rgb(1 1 1 / 16%), 4px 4px 2px rgb(0 0 0 / 23%) !important; }

/_ Back button _/

#back-button>.toolbarbutton-icon { --backbutton-background: transparent !important; border: 0 !important; border: none !important; border-radius: 10px !important; box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.6) !important; }

#forward-button>.toolbarbutton-icon { --forwardbutton-background: transparent !important; border: 0 !important; border: none !important; box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.6) !important; border-radius: 10px !important; }

/tooltip dark theme/

tooltip { -moz-appearance: none !important; color: #fff !important; background-color: #1d1d3b !important; /border-color: #E55B0A !important;/ border: 1px solid transparent !important; border-image: 1 1 1 1 linear-gradient(90deg, #9400ff, #ba00e5, #df06b9, #e62da7, #f13b95, #f64d86, #f85f7a, #fc7169, #f9845b, #e8ab52) !important; border-radius: 4px !important; }

/_ Mouse Hover Background by passing by non-selected tabs _/

.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) { background: hsla(276, 91%, 79%, 1) !important; background: radial-gradient(circle, hsla(276, 91%, 79%, 1) 0%, hsla(254, 74%, 65%, 1) 100%) !important; background: -moz-radial-gradient(circle, hsla(276, 91%, 79%, 1) 0%, hsla(254, 74%, 65%, 1) 100%) !important; background: -webkit-radial-gradient(circle, hsla(276, 91%, 79%, 1) 0%, hsla(254, 74%, 65%, 1) 100%) !important; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#d397fa", endColorstr="#8364e8", GradientType=1) ! background: radial-gradient(circle, hsla(276, 91%, 79%, 1) 0%, hsla(254, 74%, 65%, 1) 100%) !important; box-shadow: 5px 3px 6px rgb(1 1 1 / 16%), 4px 4px 2px rgb(0 0 0 / 23%) !important; }

/_ History swipe animation custom color Firefox 111+ _/

#historySwipeAnimationPreviousArrow, #historySwipeAnimationNextArrow { --swipe-nav-icon-primary-color: #8c5ced !important; --swipe-nav-icon-accent-color: #FFFFFF !important; }

@media (-moz-content-prefers-color-scheme: dark) {

#historySwipeAnimationPreviousArrow, #historySwipeAnimationNextArrow { --swipe-nav-icon-primary-color: #00DDFF !important; --swipe-nav-icon-accent-color: #000000 !important; } }

/_ Remove Text on Boookmarrks-Icoons only in bookmarks bars _/ #PersonalToolbar #import-button>.toolbarbutton-text, .bookmark-item>.toolbarbutton-text { display: none !important; }

/_ center Bookmarks toolbar items_/ #PlacesToolbarItems { display: flex !important; justify-content: safe center !important; }

/* .tabbrowser-tab>.tab-stack>.tab-content>.tab-close-button { visibility: hidden; }

.tabbrowser-tab:hover>.tab-stack>.tab-content>.tab-close-button { visibility: visible !important; }

/_ ----- Non active tabs have darker text ----- _/ .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) .tab-label-container .tab-label { color: hsla(0, 0%, 100%, 0.65) !important; }

toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)>.toolbarbutton-icon, toolbar #new-tab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)>.toolbarbutton-icon { border: 0 !important; box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.6) !important; }

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])>#tabbrowser-arrowscrollbox>.tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0px !important; }

#tabbrowser-tabs { --tab-loading-fill: transparent !important; margin-left: 2px !important; }

.tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) .tab-icon-image { opacity: 0.7 !important; transition: opacity 250ms ease !important; }

/_ Selected tabs design #tabbrowser-tabs .tabbrowser-tab .tab-background[selected] { /_ border: 0 !important;/ / outline: 1px solid color-mix(in srgb, #dadada 20%, transparent) !important; box-shadow: none !important;

}*/

/_ Multiselect tabs _/ #tabbrowser-tabs .tabbrowser-tab .tab-background[multiselected="true"] { border-style: solid !important; border-image: 1 1 1 1 linear-gradient(90deg, #9400ff, #ba00e5, #df06b9, #e62da7, #f13b95, #f64d86, #f85f7a, #fc7169, #f9845b, #e8ab52) !important; /outline: none !important;/ /background-color: var(--firefoxcss-other-color) !important; / box-shadow: none !important;*/ /*background-color: color-mix(in srgb, #fc7169 20%, transparent) !important;*/ }

/----------------------------------------------------------------/ #tabbrowser-tabs .tabbrowser-tab .tab-background:is([selected]):is([multiselected]) { outline: 1px solid color-mix(in srgb #e8ab52 50%, transparent) !important; outline-offset: 0px !important; outline-width: 1px !important; }

/_ ----------------------------------- / / ----- Toolbar buttons ------------- / / ----------------------------------- _/ toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover>.toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover>.toolbarbutton-text, toolbar .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover>.toolbarbutton-badge-stack { box-shadow: 0 0 4px rgba(0, 0, 0, 0.3) !important; }

toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active)>.toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active)>.toolbarbutton-text, toolbar .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active)>.toolbarbutton-badge-stack { box-shadow: 0 0 4px rgba(0, 0, 0, 0.3) !important; }

:root[privatebrowsingmode="temporary"] #PanelUI-menu-button { fill: hsl(277, 70%, 64%) !important; }

:root[privatebrowsingmode="temporary"] #PanelUI-menu-button .toolbarbutton-badge-stack .toolbarbutton-icon { filter: drop-shadow(0px 0px 1px #000000d5) !important; }

/_** Hide some buttons for hover _/

#nav-bar:not([customizing="true"])>#nav-bar-customization-target>#urlbar-container:not(:hover)>#urlbar:not([focused])>#urlbar-input-container>#page-action-buttons { opacity: 0; }

#page-action-buttons { transition: opacity 0.15s ease; }

#nav-bar:not([customizing="true"])>#nav-bar-customization-target>#urlbar-container:not(:hover)>#urlbar:not([focused])>#urlbar-input-container>#identity-box { opacity: 0; /visibility: collapse;/ }

#identity-box { transition: visibility 0.15s ease-in-out, opacity 0.15s ease-in-out; /_ transition: opacity 0.15s ease !important;_/ }

#nav-bar:not([customizing="true"])>#nav-bar-customization-target>#urlbar-container:not(:hover)>#urlbar:not([focused])>#urlbar-input-container>#tracking-protection-icon-container { opacity: 0 !important; }

#tracking-protection-icon-container { transition: opacity 0.15s ease !important; }

.tab-label-containr[textoverflow][labeldirection="ltr"]:not([pinned]), .tab-label-container[textoverflow]:not([labeldirection], [pinned]):-moz-locale-dir(ltr) { direction: ltr !important; mask-image: linear-gradient(to left, transparent, black 4em) !important; }

#urlbar[breakout][breakout-extend][open] { background-color: var(--firefoxcss-url-breakout-bar-bg-color) !important; border-bottom: 1px solid var(--firefoxcss-url-breakout-border-bottom-color) !important; border-top: 1px solid var(--firefoxcss-url-border-top-color) !important; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important; }

/_ speaker on tabs color fixes _/ .tab-icon-overlay:not([crashed])[soundplaying]:hover, .tab-icon-overlay:not([crashed])[muted]:hover, .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { color: currentColor !important; stroke: hsla(0, 0%, 80%) !important; background-color: hsla(0, 0%, 80%) !important; fill-opacity: 0.95 !important; }

.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[soundplaying]:hover, .tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[muted]:hover, .tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { color: currentColor !important; stroke: hsla(0, 0%, 80%) !important; background-color: hsla(0, 0%, 80%) !important; fill-opacity: 0.95 !important; }

#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying], #TabsToolbar .tab-icon-overlay:not([crashed])[muted], #TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked] { color: hsl(0, 0%, 100%) !important; }

#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying]:hover, #TabsToolbar .tab-icon-overlay:not([crashed])[muted]:hover, #TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { color: hsla(0, 0%, 10%) !important; }

/_ Tab labels _/ #main-window[lwthemetextcolor="dark"] tab { color: #333 !important; }

#main-window[lwthemetextcolor="dark"] tab:hover { color: #000 !important; }

#main-window[lwthemetextcolor="dark"] tab[selected] { color: #000 !important; }

/_ Tab labels _/

#main-window[lwthemetextcolor="bright"] tab { color: rgb(102, 102, 102) !important; }

#main-window[lwthemetextcolor="bright"] tab:hover { color: #fff !important; }

#main-window[lwthemetextcolor="bright"] tab[selected] { color: #fff !important; }

.tabbrowser-tab[notselectedsinceload]:not([pending]), .tabbrowser-tab[notselectedsinceload][pending][busy] { font-style: italic !important; }

/_ highlight unread tabs; requires italicizeUnreadTabs.uc.js _/ :root[italic-unread-tabs] .tabbrowser-tab[notselectedsinceload]:not([pending]), :root[italic-unread-tabs] .tabbrowser-tab[notselectedsinceload][pending][busy] { font-style: italic !important; }

/_ new code / .tabbrowser-tab[pending] { / Set styles for unloaded tab _/ font-style: italic !important; }

.tabbrowser-tab[busy] { /_ Set styles for loading tab _/ font-style: italic !important; }

.tabbrowser-tab[unread] { /_ Set styles for unread tab _/ font-style: italic !important; font-weight: bolder !important; }

/_ set rounded outside corners on tabs so they look like folder labels. you can disable this by making a new pref in about:config and setting it to true: "userChrome.tabs.rounded-outer-corners.disabled" this CSS is complicated because the outside corner needs to take on the color of the tab, but it's not part of the tab background so it doesn't do so automatically. _/

/_ overflow needs to be visible since the corners need to be outside the bounding box of the tab, otherwise they won't overlap with other tabs, they'll just push tabs 10px away from each other, and from the edge of the tab bar. _/ #TabsToolbar .tabbrowser-tab, #TabsToolbar .tabbrowser-tab .tab-stack { overflow: visible; }

.tabbrowser-tab .tab-stack::before, .tabbrowser-tab .tab-stack::after { bottom: 0; content: ""; display: block; position: absolute; pointer-events: none; width: 5px; height: 5px; z-index: 2; }

.tabbrowser-tab .tab-stack::before { mask: url(chrome://userchrome/content/skin/tab-corner-mask-left.svg) 0/100% 100%, linear-gradient(#fff, #fff); mask-composite: exclude; left: -5px; }

.tabbrowser-tab .tab-stack::after { mask: url(chrome://userchrome/content/skin/tab-corner-mask-right.svg) 0/100% 100%, linear-gradient(#fff, #fff); mask-composite: exclude; right: -5px; }

.tabbrowser-tab[usercontextid]:not([multiselected]) .tab-stack::before { left: -4.6px; }

.tabbrowser-tab[usercontextid]:not([multiselected]) .tab-stack::after { right: -4.6px; }

/_ z-index of these corners is very complicated because the z-index of other elements needs to be set directly, to create the impression that tabs are layering on top of each other, with rightmost tabs on top and leftmost tabs on bottom. this is the normal state but hovering, selecting, pinning, etc. needs to change the z-index so tabs can "pop out" of the stack. so because z-index is being modulated so heavily we need to do the same with our outside corners, or else they'll end up being covered up or showing through things they shouldn't. _/ .tabbrowser-tab .tab-context-line { z-index: 3; position: relative !important; }

.tabbrowser-tab { z-index: 0; }

.tabbrowser-tab .tab-content { z-index: 1; }

.tabbrowser-tab[pinned] .tab-stack::before, .tabbrowser-tab[pinned] .tab-stack::after { z-index: 6; }

.tab-icon-stack { z-index: -1; }

/_ hide the corners on first/last visible tabs, just like we unround the top corners _/ #tabbrowser-tabs:not([movingtab], [using-closing-tabs-spacer]) .tabbrowser-tab:first-of-type:not([justmoved], [style*="transform"]) .tab-stack::before, #tabbrowser-tabs:not([movingtab], [using-closing-tabs-spacer]) .tabbrowser-tab:last-of-type:not([justmoved], [style*="transform"]) .tab-stack::after { display: none; }

#TabsToolbar #tabbrowser-tabs #tabbrowser-arrowscrollbox:not([overflowing="true"]) .tabbrowser-tab:last-of-type[pinned] .tab-stack::after { display: block; }

/_ default position is for tabs to be stacked on top of the tab to their left. so shadows are cast to the left but not to the right. _/ .tabbrowser-tab { position: relative; }

/_ hovered tabs stack on top of normal tabs in either direction. so shadows are cast in both directions, unless the neighboring tab is selected or something. _/ .tabbrowser-tab:not([visuallyselected="true"], [pinned], [multiselected]):is(:hover, .keyboard-focused-tab, [open]) { z-index: 3 !important; }

/_ selected tabs stack over hovered tabs _/ .tabbrowser-tab[visuallyselected="true"] { z-index: 6 !important; }

/_ multiselected tabs do too, but lower than selected tabs _/ .tabbrowser-tab[multiselected] { z-index: 4 !important; }

/_ multiselected gets 1 extra point for being hovered _/ .tabbrowser-tab[multiselected]:not([visuallyselected="true"], [pinned]):is(:hover, .keyboard-focused-tab, [open]) { z-index: 5 !important; }

.tabbrowser-tab[multiselected][visuallyselected="true"] { z-index: 6 !important; }

/_ pinned tabs stack over everything except selected tabs _/ .tabbrowser-tab[pinned] { z-index: 7 !important; }

/_ and the same formula applies to them too _/ .tabbrowser-tab[pinned]:not([visuallyselected="true"], [multiselected]):is(:hover, .keyboard-focused-tab, [open]) { z-index: 8 !important; }

.tabbrowser-tab[pinned][multiselected] { z-index: 9 !important; }

.tabbrowser-tab[pinned][multiselected]:not([visuallyselected="true"]):is(:hover, .keyboard-focused-tab, [open]) { z-index: 10 !important; }

.tabbrowser-tab[pinned][visuallyselected="true"], .tabbrowser-tab[pinned][multiselected][visuallyselected="true"] { z-index: 11 !important; }

/_ when tab is being dragged/dropped, style it like it's hovered _/ #tabbrowser-tabs[movingtab] .tabbrowser-tab[selected]:not([pinned]) .tab-icon-image { opacity: 0 !important; }

#tabbrowser-tabs[movingtab] .tabbrowser-tab[selected]:not([pinned]) .tab-close-button { order: 0 !important; display: flex !important; position: relative !important; margin-right: -16px !important; z-index: 1 !important; visibility: visible !important; opacity: 1 !important; }

/_ tab buttons are animated with opacity and transformation _/ .tabbrowser-tab:not(:hover, .keyboard-focused-tab, [tabdrop-samewindow], [open]) .tab-close-button { transform: translateX(-15px) scale(0.5) !important; }

#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([tabdrop-samewindow], [justmoved]) :is(.tab-close-button, .tab-icon-image, .tab-sharing-icon-overlay, .tab-throbber) { transition: 0.12s transform ease-in-out, 0.12s opacity ease-in-out !important; }

@media (prefers-reduced-motion: no-preference) {

/_ tabLoadingSpinner.uc.js enables a special loading throbber animation that spins instead of bouncing horizontally _/ @keyframes uc-tab-throbber-spinner-css { to { rotate: 360deg; } }

@keyframes uc-tab-throbber-spinner-sprite { 0% { transform: translateX(0); }

100% {
  transform: translateX(-100%);
}

}

@keyframes uc-tab-throbber-spinner-sprite-rtl { 0% { transform: translateX(0); }

100% {
  transform: translateX(100%);
}

}

/_ I made different versions of this animation to circumvent an SVG issue. if you update Firefox and the throbber animation stops working, uncomment one of the 2 alternate rules below. one of the 3 should work. you can do the same thing with the all-tabs-menu loading icons in the next ruleset below. _/ :root[sessionrestored] .tab-throbber[throbber-loaded]::before { content: "" !important; display: flex !important; -moz-context-properties: fill, fill-opacity !important; width: 16px !important; height: 16px !important; animation: none !important; background-position: center !important; background-repeat: no-repeat !important; fill: inherit !important;

/* ANIMATION METHOD #1: this version of the animation is implemented by an
 <animateTransform> tag. it's the most efficient method but it has broken
 once for a couple days due to an erroneous nightly patch. */

/* background-image: url(chrome://userchrome/content/loading-spinner.svg) !important; */

/* ---------------------------------- */

/* ANIMATION METHOD #2: the animation is written in a <style> tag
 embedded inside the SVG code. it's visually identical to method #1, but
 in terms of performance it is slightly less efficient. the animation is
 applied to the compound vector path via the inline style attribute,
 giving the element a CSS property "animation" that references the
 animation in the style tag. use this if method #1 randomly breaks,
 *temporarily*. mozilla should patch such a bug quickly. */

/* background-image: url(chrome://userchrome/content/loading-spinner-css.svg) !important; */

/* ---------------------------------- */

/* ANIMATION METHOD #3: use this if neither method #1 nor #2 works; or if
 you want to adjust the speed or other properties of the animation. in
 this version, the SVG image itself is not animated at all. it's
 completely static. instead, the entire animation is added post hoc via
 CSS in this user stylesheet. therefore, it should never break. I believe
 this method is significantly less efficient than the two aforementioned
 methods, because you don't get to use optimizations that stop SVG
 animations playing when they're not active. my understanding is the
 animation is basically running 24/7 even when the spinner isn't visible,
 because the spinner technically is always visible in order to support the
 sliding tab-hover transitions. you can't see it but it's not hidden in
 the DOM sense. so I think that makes this method a last resort. */

/* background-image: url(chrome://userchrome/content/loading-spinner-static.svg) !important;

animation: 0.85s steps(12, end) uc-tab-throbber-spinner-css infinite !important; */

/* ANIMATION METHOD #4: this version of the animation is implemented in CSS on
 a sprite sheet. it's like method #3 except it eliminates an issue with the
 vector illustration that makes the icon look like it wobbles. */
background-image: url(chrome://userchrome/content/loading-spinner-sprite.svg) !important;
background-position: left center !important;
width: 192px !important;
height: 100% !important;
animation: uc-tab-throbber-spinner-sprite 0.85s steps(12) infinite !important;

}

/_ ANIMATION METHOD #4: _/ :root[sessionrestored] .tab-throbber[throbber-loaded]:-moz-locale-dir(rtl)::before { animation-name: uc-tab-throbber-spinner-sprite-rtl !important; }

/_ all tabs menu & vertical tabs pane (script) / :root[uc-loading-spinner] .tab-throbber-tabslist:is([busy], [progress]) { / ANIMATION METHOD #1: _/ list-style-image: url(chrome://userchrome/content/loading-spinner.svg) !important;

/* ANIMATION METHOD #2: */
/* list-style-image: url(chrome://userchrome/content/loading-spinner-css.svg) !important; */

/* ANIMATION METHOD #3: */
/* animation: 0.85s steps(12, end) uc-tab-throbber-spinner-css infinite !important;

list-style-image: url(chrome://userchrome/content/loading-spinner-static.svg) !important; */ }

:root[uc-loading-spinner] .tab-throbber-tabslist[busy] { opacity: 0.8 !important; fill: var(--busy-throbber-fill) !important; }

:root[uc-loading-spinner] .tab-throbber-tabslist[progress] { opacity: 1 !important; fill: var(--loading-throbber-fill) !important; } }

.tabbrowser-tab { --tab-label-mask-size: 2em !important; }

/_ Small fix for Firefox complete themes _/

.private-browsing-indicator, #private-browsing-indicator-titlebar, #private-browsing-indicator, .private-browsing-indicator { visibility: collapse !important; }

.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background { background-color: color-mix(in srgb, #0d0d0df7 25%, transparent) !important; }

/_ Adjust tab corner shape, optionally remove space below tabs _/

#tabbrowser-tabs { --user-tab-rounding: 6px; }

.tab-background { border-radius: var(--user-tab-rounding) !important; }

/_ private browsing indicator next to window controls _/ .accessibility-indicator, .private-browsing-indicator { height: auto !important; width: auto !important; box-sizing: border-box !important; padding: 0 var(--toolbarbutton-outer-padding) !important; margin: 0 !important; background: none !important; border: 0 !important; outline: 0; fill: currentColor !important; -moz-context-properties: fill, fill-opacity !important; align-items: center !important; }

.private-browsing-indicator { background: none !important; }

#private-browsing-indicator-with-label { -moz-context-properties: fill, fill-opacity !important; fill: currentColor !important; }

.private-browsing-indicator::before { content: ""; box-sizing: border-box !important; width: calc(2 _ var(--toolbarbutton-inner-padding) + 16px) !important; height: calc(2 _ var(--toolbarbutton-inner-padding) + 16px) !important; background-image: url(chrome://userchrome/content/skin/privateBrowsing.svg) !important; background-size: 16px !important; background-position: center !important; background-repeat: no-repeat !important; padding: var(--toolbarbutton-inner-padding) !important; border-radius: var(--toolbarbutton-border-radius) !important; }

.tab-label-container { height: revert !important; pointer-events: none !important; }

/_ highlight unread tabs; requires italicizeUnreadTabs.uc.js _/ :root[italic-unread-tabs] .tabbrowser-tab[notselectedsinceload]:not([pending]), :root[italic-unread-tabs] .tabbrowser-tab[notselectedsinceload][pending][busy] { font-style: italic !important; }

.tab-content:not([selected="true"]) { text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.3), 1px 1px 1px rgba(0, 0, 0, 0.5) !important; }

/**inactive

.tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) .tab-icon-image { opacity: 0.7 !important; filter: grayscale(0.8), brightness(0.8), contrast(20%) !important; }

/*Rule to visualize better selecting several tabs**/

.tabbrowser-tab>.tab-stack>.tab-background:is([multiselected]) { background: color-mix(in srgb, #9e5ddad3 50%, transparent) !important; outline: 2px solid var(--multiselect) !important; }

:root { --toolbarbutton-border-radius: 6px !important; }

.sidebar-splitter { display: none !important; }

/_container tab label color when selected _/

.tabbrowser-tab[selected="true"][class*="identity-color-"] .tab-label { color: var(--identity-tab-color) !important; font-weight: bold !important; }

/_ fancy line for container tabs _/

#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[class*="identity-color"] .tab-label { text-decoration: underline !important; text-decoration-color: var(--identity-icon-color) !important; font-weight: bold !important; text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5) !important; }

/_ Shadow above content _/

#navigator-toolbox { box-shadow: 5px 3px 6px rgb(1 1 1 / 16%), 4px 4px 2px rgb(0 0 0 / 23%) !important; }

#urlbar-background, #searchbar { text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5) !important; }

/_ Container tabs _/ .tabbrowser-tab[usercontextid] .tab-background { background: var(--identity-tab-color) !important; box-shadow: 0px 0px 18px 2px var(--identity-icon-color) !important; }

/_ Favicon icon when mouse over over inactive tab grayscale(15%) _/ .tabbrowser-tab:hover .tab-icon-image:not([selected="true"]):not([pinned]) { filter: grayscale(0%) !important; }

/_ Gray out the favicon icon on the inactive tab _ .tabbrowser-tab .tab-icon-image:not([selected="true"]):not([pinned]) { filter: grayscale(100%) !important; }

/*_ inactive Favicons _/ .tabbrowser-tab:not([visuallyselected="true"], [multiselected]) .tab-icon-image { filter: brightness(60%) grayscale(70%) contrast(120%) blur(0.5px) opacity(100%) !important; }

.tabbrowser-tab:not([visuallyselected="true"], [multiselected]):hover .tab-icon-image { filter: drop-shadow(1px 1px 2px rgba(43, 43, 43, 0.658)) drop-shadow(1px 1px 1px rgba(2, 2, 2, 0.74)) contrast(175%) brightness(113%) !important; }

/_** TAB TEXT & BACKBOARD STYLING UNREAD, UNLOADED, VISTITED / / Loaded but unread (not selected) _/ .tabbrowser-tab:not([selected="true"])[unread] .tab-label { color: rgb(133, 133, 133) !important; font-style: italic !important; font-weight: thin !important; }

/* .tabbrowser-tab:not([selected="true"])[unread] .tab-background { background-color: transparent !important; }

/_ Not loaded yet (also visited) _/

.tabbrowser-tab:not([selected="true"])[pending] .tab-label, .tabbrowser-tab:not([selected="true"])[visited] .tab-label { color: rgb(173, 148, 231) !important; font-style: italic !important; font-weight: thin !important; }

/_ GLOW EFFECT ON TAB ICON _

toolbarbutton.bookmark-item:not([container="true"]) .toolbarbutton-icon for icons on the bookmarks bar under the url bar * .tab-icon-image, .bookmark-item:not([container="true"]) .menu-iconic-icon { filter: drop-shadow(0 0 3px #fff) !important; }

/* favicon gray on inactive Tab

.tab-icon:not([selected="true"]), .tab-icon-image:not([selected="true"]) { filter: grayscale(1) brightness(1) blur(20px) opacity(0.7) !important; } // / Hides all the tabs if there is only one tab**/ #tabbrowser-tabs tab:only-of-type, #tabbrowser-tabs tab:only-of-type+#tabs-newtab-button { display: none !important; }

:root[lwthemetextcolor="bright"]:-moz-window-inactive { --lwt-accent-color-inactive: rgba(40, 40, 40, 0.662) !important; }

/*improve border visiblity for selected tabs / :root:not(:-moz-window-inactive)[lwthemetextcolor="bright"] .tabbrowser-tab[selected="true"] .tab-background { box-shadow: none !important; outline: none !important; border: none !important; }

/_ --lwt-additional-images: url("images/derecha-copy.png"), url("images/izquierda-copy.png"), url("images/6.svg") !important; --lwt-background-alignment: right top, left top, right top !important; --lwt-background-tiling: no-repeat, no-repeat, repeat-x !important; --uc-tab-line-color: transparent !important;_/

/* .tabbrowser-tab[pending] { color: red !important; }

.tabbrowser-tab[busy] { color: dimgray !important; }

.tabbrowser-tab[titlechanged] { color: blue !important; }/ / multi tab selection */ #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([multiselected])>.tab-stack>.tab-background:-moz-lwtheme { outline-color: var(--toolbarseparator-color) !important; }

/* :root {

--lwt-frame: var(--uc-base-colour) !important; --lwt-accent-color: var(--lwt-frame) !important; --lwt-text-color: var(--uc-inverted-colour) !important;

--toolbar-field-color: var(--uc-inverted-colour) !important;

--toolbar-field-focus-color: var(--uc-inverted-colour) !important; --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important; --toolbar-field-focus-border-color: transparent !important;

--toolbar-field-background-color: var(--lwt-frame) !important; --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important; --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important; --urlbar-popup-url-color: var(--uc-accent-colour) !important;

--lwt-tab-text: var(--lwt-text-colour) !important;

--lwt-selected-tab-background-color: var(--uc-highlight-colour) !important;

--toolbar-bgcolor: var(--lwt-frame) !important; --toolbar-color: var(--lwt-text-color) !important; --toolbarseparator-color: var(--uc-accent-colour) !important; --toolbarbutton-hover-background: var(--uc-highlight-colour) !important; --toolbarbutton-active-background: var(--toolbarbutton-hover-background) !important;

--lwt-sidebar-background-color: var(--lwt-frame) !important; --sidebar-background-color: var(--lwt-sidebar-background-color) !important;

--urlbar-box-bgcolor: var(--uc-highlight-colour) !important; --urlbar-box-text-color: var(--uc-muted-colour) !important; --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important; --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important; --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important;

} /_ .tab-background[multiselected="true"]:not([selected="true"])>.tab-background-inner { background: none !important; }/ / 1/16/2022 Tone down the Fx96 tab border with add-on themes in certain fallback situations _/ .tab-background:is([selected], [multiselected]):-moz-lwtheme { --lwt-tabs-border-color: rgba(0, 0, 0, 0.5) !important; border-bottom-color: transparent !important; background-image: radial-gradient(circle at bottom center, #b98ff3, #19002f) !important; }

[brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme { --lwt-tabs-border-color: rgba(255, 255, 255, 0.5) !important; border-bottom-color: transparent !important; }

/_ Container color bar visibility _/ .tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line { margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important; }

/_ Make sure tab attention dot isn't too high - 10 Dec 2022 _/ .tabbrowser-tab:is([image], [pinned])>.tab-stack>.tab-content[attention]:not([selected="true"]), .tabbrowser-tab>.tab-stack>.tab-content[pinned][titlechanged]:not([selected="true"]), #firefox-view-button[attention], .webextension-browser-action[attention="true"] { background-position-y: bottom 5px !important; }

/_ Move container color bar to bottom of tab - updated 1/16/2022 _/

.tab-background { --context-line-margin-adjust: 3px; /_ 1/16/2022 / --context-line-active-adjust: 1px; / 1/16/2022 _/ }

.tabbrowser-tab[usercontextid]:is([selected=true], [visuallyselected="true"], [multiselected]) .tab-background { border-top: 1px solid transparent; /_ 1/16/2022 Default border for consistency _/ }

.tabbrowser-tab[usercontextid]>.tab-stack>.tab-background>.tab-context-line { margin-top: calc(var(--tab-min-height) - var(--context-line-margin-adjust)) !important; }

.tabbrowser-tab[usercontextid]:is([selected=true], [visuallyselected="true"], [multiselected])>.tab-stack>.tab-background>.tab-context-line { margin-top: calc(var(--tab-min-height) - var(--context-line-margin-adjust) - var(--context-line-active-adjust)) !important; }

/* .tab-background { border: none !important; outline: none !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; z-index: 1; }

/**inactive/

.tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) .tab-icon-image { opacity: 0.6 !important; filter: grayscale(0.9), brightness(0.7), contrast(20%) !important; }

#nav-bar { box-shadow: inset 0 0 20px 5px hsla(0, 0%, 0%, 0.5) !important; }

/_ Selected Tab - Box Shadow _

#TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background:-moz-lwtheme { box-shadow: 0 0 1px rgba(91, 91, 122, 0.486), 5px 3px 6px rgba(91, 91, 122, 0.486), 4px 4px 2px rgba(91, 91, 122, 0.486) !important; }*/ #urlbar .urlbar-input-box { text-align: center !important; }

/_ Fix white blink background on new tabs _/ #browser .browserStack { background-color: rgb(45, 45, 45) !important; }

/_ Remove selected tab shadow, darken the border to account for lighter background color _/ #TabsToolbar #firefox-view-button[open]>.toolbarbutton-icon, #tabbrowser-tabs .tab-background:is([selected], [multiselected]) { border: 1px solid color-mix(in srgb, currentColor 35%, transparent) !important; /border-color: color-mix(in srgb, currentColor 35%, transparent) !important;/ background: radial-gradient(circle at bottom center, #540091a7 25px, #170027c3) !important; /outline: 1px solid color-mix(in srgb, #f9845b 35%, transparent) !important;/ }

/_ Remove firefox view separator spacing _/ :root:not([privatebrowsingmode="temporary"]):not([firefoxviewhidden]) :is(#firefox-view-button, #wrapper-firefox-view-button)+#tabbrowser-tabs { border: unset !important; padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important; margin-inline-start: 0px !important; }

/_ Set min height on absolute pinned tabs to overlay bottom border _/ #tabbrowser-tabs[haspinnedtabs][positionpinnedtabs] .tabbrowser-tab[selected] .tab-content { min-height: var(--tab-min-height) !important; }

/_ Make drag space after add tab when tabs are overflowing _/ #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"]~#new-tab-button { margin-inline-end: var(--window-drag-spacing) !important; }

/_ Make drag space after add tab, when tabs are not overflowing _/ #tabbrowser-tabs:not([overflow="true"])>#tabbrowser-arrowscrollbox>#tabbrowser-arrowscrollbox-periphery>spacer.closing-tabs-spacer { min-width: var(--window-drag-spacing) !important; }

/_ Offset pinned tabs to accommodate for the removed padding _/ #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned="true"] { transform: var(--tab-shadow-max-size) !important; }

/* #tabbrowser-tabs[positionpinnedtabs] .tab-content[pinned="true"] { transform: translateY(1px) !important; }

/_ Less spacing around tab bar buttons (new tab, list tabs) _ #TabsToolbar toolbarbutton:not([role="tab"]) { --toolbarbutton-inner-padding: 4px !important; --tab-border-radius: var(--toolbarbutton-border-radius) !important; border: 4px solid transparent !important; }

/_ Move audio playing/muted indicator _/ .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { padding: 0 !important; margin-left: 20px !important; scale: 1.1; }

/_ Do not hide favicon if audio indicator is shown _/ .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])> :not(.tab-icon-overlay) { opacity: unset !important; }

:root { /_ Compact toolbar icons _/ --toolbar-start-end-padding: 4px !important; --toolbarbutton-outer-padding: 0px !important;

/_ Nicer menu spacing _/ --arrowpanel-menuitem-padding-block: 4px !important; }

/* Make tabs easier to see against theme backgrounds

:root[lwtheme-image][lwtheme-brighttext] .tabbrowser-tab { --tab-contrast-bgcolor: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.5) !important; }

:root[lwtheme-image][lwtheme-darktext] .tabbrowser-tab { --tab-contrast-bgcolor: rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.5) !important; }

#TabsToolbar #firefox-view-button[open]>.toolbarbutton-icon:-moz-lwtheme, #tabbrowser-tabs:not([movingtab])>#tabbrowser-arrowscrollbox>.tabbrowser-tab>.tab-stack>.tab-background[multiselected=true]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab])>#tabbrowser-arrowscrollbox>.tabbrowser-tab>.tab-stack>.tab-background[selected=true]:-moz-lwtheme { background-attachment: scroll, scroll, scroll, fixed !important; background-color: transparent !important; background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), linear-gradient(var(--tab-contrast-bgcolor), var(--tab-contrast-bgcolor)), var(--lwt-header-image, none) !important; background-position: 0 0, 0 0, 0 0, right top !important; background-repeat: repeat-x, repeat-x, repeat, no-repeat !important; background-size: auto 100%, auto 100%, auto auto, auto auto !important; }

/_ Hide "Print selection" on right button menu _/ #context-print-selection { display: none !important; }

#downloadsListBox>richlistitem>.downloadMainArea { height: inherit !important; }

/_ Remove margins around download item button (Download progress popup) - prepare for Firefox 93 (experiments on nightly) _/

#downloadsListBox>richlistitem { padding: 0 !important; margin: 0 !important; border-radius: 6px !important; }

/_ Make open containing folder great again - fill whole height of the tile (Download progress popup). Works with Firefox 90 _/ #downloadsListBox>richlistitem>.downloadButton { height: inherit !important; }

/_ Make search panel white again (disable transparency). Works with Firefox 93 _ #PopupSearchAutoComplete { --panel-background: rgba(255, 255, 255, 1) !important; }

/_ Disable unmovable extension button. Annoying since Firefox 111 #unified-extensions-button, #unified-extensions-button>.toolbarbutton-icon { width: 0px !important; padding: 0px !important; }_/

#navigator-toolbox-background:-moz-window-inactive { filter: contrast(90%); }

.private-browsing-indicator, #private-browsing-indicator-with-label { display: none !important; }

.tabbrowser-tab[notselectedsinceload]:not([pending]), .tabbrowser-tab[notselectedsinceload][pending][busy] { font-style: italic !important; }

/_ different tab shadows in various states. to produce the illusion of modulated depth _/ .tabbrowser-tab .tab-content { box-shadow: 0px 0px 15px 0px hsla(0, 0%, 0%, 0.2), 0px 0px 5px 0px hsla(0, 0%, 0%, 0.1) !important; }

.tabbrowser-tab:not([selected], [multiselected]):is(:hover, .keyboard-focused-tab, [open]) .tab-content, .tabbrowser-tab:is([multiselected], [pinned]) .tab-content { box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.25) !important; }

.tabbrowser-tab[selected] .tab-content, .tabbrowser-tab:is([multiselected], [pinned])[selected] .tab-content { box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.35) !important; }

.tabbrowser-tab:focus:not([aria-activedescendant]) .tab-content { box-shadow: 0px 0px 25px 3px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.35) !important; }

.tab-icon-image { filter: drop-shadow(0px 0px 2px white) !important; }

.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background { border-top: 1px solid rgba(130, 130, 130, 0.3) !important; border-left: 1px solid rgba(130, 130, 130, 0.3) !important; border-right: 1px solid rgba(130, 130, 130, 0.3) !important; }

/_ .tab-background:not(selected) { background-image: radial-gradient(circle at bottom center, #b98ff3, #19002f) !important} _/ :root .tab-background:not([selected]) {

background-color: #d5d0d9;

border: 1px solid white !important;

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment