firefox-user-chrome-css/chrome/userChrome.css

/*** Exceptions for stylelint CSS linter ***/

/* stylelint-disable selector-id-pattern */
/* stylelint-disable selector-type-no-unknown */
/* stylelint-disable declaration-block-single-line-max-declarations */

/* OPTIONAL: Remove items from image context menu; see also view-source:chrome://browser/content/browser.xhtml */

/*
#context-sendimage, #context-sep-setbackground, #context-setDesktopBackground, #context-sep-sharing, #context-inspect-a11y, #context-take-screenshot, #context-translate-selection, #context-savelinktopocket, #context-pocket, #translations-button, #reader-mode-button { display: none !important; }
*/

/* OPTIONAL: Tighten up drop-down/context/popup menu spacing */

/*
menupopup:not(.in-menulist) > menuitem, menupopup:not(.in-menulist) > menu { padding-block: 4px !important; min-height: unset !important; }
:root { --arrowpanel-menuitem-padding: 4px 8px !important; }
*/

/*** Proton Tabs Tweaks ***/

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

#tabbrowser-tabs { --user-tab-rounding: .4em; }
.tab-background { border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0 0 !important; /* Connected */ margin-block: 0 !important; /* Connected */ }
#scrollbutton-up, #scrollbutton-down { border-top-width: 1px !important; border-bottom-width: 0 !important; }

/* remove toolbar decoration */
#nav-bar { border-top: none !important; }

/* change active tab */
.tab-background:is([selected], [multiselected]) { border: 1px solid grey; border-bottom: none !important; background-image: none !important; }

/* analogous to the above, change inactive tab to a grey-to-white gradient */
.tab-background:not([selected], [multiselected]) { background-color: #eee; }

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

/* Override Normal Density height to Compact Density height only for tabs */

#TabsToolbar, #tabbrowser-tabs { --tab-min-height: 29px !important; }

/* [Connected Tabs] Set a max height based on min-height plus margin-block: 1px 0 */
#TabsToolbar, #TabsToolbar > hbox, #TabsToolbar-customization-target, #tabbrowser-arrowscrollbox { max-height: calc(var(--tab-min-height) + 1px) !important; }

/* Audio Playing / Mute Button side-by-side when sound is playing */
#TabsToolbar { --user-mute-button-height: 20px;  /* default size is 12px, site icon is 16px */ }

/* Tweak for covering a line at the bottom of the active tab on some themes 8/11/2021 */
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar, #main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar #tabbrowser-tabs { --tab-min-height: 30px !important; }

/* [Connected Tabs] Adjust padding around icons on buttons to avoid crushed images */
#TabsToolbar-customization-target toolbarbutton > .toolbarbutton-icon, #TabsToolbar-customization-target .toolbarbutton-text, #TabsToolbar-customization-target .toolbarbutton-badge-stack, #scrollbutton-up,#scrollbutton-down { padding-top: 7px !important; padding-bottom: 6px !important; }

/* [Connected Tabs] 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 2px !important; }

.tabbrowser-tab:not([selected="true"], [multiselected="true"]) .tab-background { border-radius: 0 !important; }

/* Inactive tabs: Separator line style */
.tabbrowser-tab:not([selected="true"], [multiselected="true"], [beforeselected-visible="true"]) .tab-background { border-right: 1px solid var(--lwt-background-tab-separator-color, rgb(0 0 0 / 20%)) !important; }

[brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme { --lwt-tabs-border-color: rgb(255 255 255 / 50%) !important; border-bottom: none !important; }

/* For dark backgrounds */
[brighttext="true"] .tabbrowser-tab:not([selected="true"], [multiselected="true"], [beforeselected-visible="true"]) .tab-background { border-right: 1px solid var(--lwt-background-tab-separator-color, var(--lwt-selected-tab-background-color, rgb(255 255 255 / 20%))) !important; }

/* Remove padding between tabs, override font-size and -weight */
.tabbrowser-tab { padding: 0 !important; font-size: 12px !important; font-weight: 400 !important; }

/* Move the mute/unmute button to the right and enlarge it */
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) { width: var(--user-mute-button-height) !important; height: var(--user-mute-button-height) !important; margin-left: calc(var(--user-mute-button-height) / 2 + 2px) !important; /* pushes icon to the right */ margin-right: 2px !important; /* closes up some space before the text */ padding: 0 !important; /* allows icon to expand to full size */ }

/* Move the site icon to the left a bit and adjust position */
.tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) { margin-left: -4px !important; /* pushes icon to the left */ margin-top: calc((var(--user-mute-button-height) - 16px) / 2) !important;  /* keep site icon reasonably positioned */ }

/* Override the rules for hover/not hover visibility */

/* Color the icon on hover for confirmation or avoidance */
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]):hover { fill: green !important; }

/* Tweaked Audio playing/Mute button rules for pinned tabs */
.tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]) { width: var(--user-mute-button-height) !important; height: var(--user-mute-button-height) !important; margin-left: 2px !important; /* allow some overlap to reduce expanded width */ margin-right: -2px !important; /* reduce empty space on the right */ padding: 0 !important; /* allows icon to expand to full size */ top: 0 !important; /* align button with site icon */ }

.tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]):hover { fill: green !important; }

/* for mute button */ .tabbrowser-tab:not(:hover) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]), /* for site icon */ .tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay), /* for site icon with Compact density */ :root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) { opacity: 1 !important; /* overrides full transparency with full opacity */ }

[lwthemetextcolor="bright"] .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]):hover { fill: lightgreen !important; /* for dark themes */ }

.tab-icon-stack:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) { margin-left: -6px !important; /* reduce empty space on the left */ margin-top: calc((var(--user-mute-button-height) - 16px) / 2) !important;  /* keep site icon reasonably positioned */ }

.tabbrowser-tab:not(:hover) .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]), /* for site icon */ .tabbrowser-tab:hover .tab-icon-stack:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]) > :not(.tab-icon-overlay), /* for site icon with Compact density */ :root[uidensity="compact"] .tab-icon-stack:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) { opacity: 1 !important; /* overrides full transparency with full opacity */ }

[lwthemetextcolor="bright"] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]):hover { fill: lightgreen !important; /* for dark themes */ }