Last active
April 15, 2024 21:16
-
-
Save destinmoulton/d4ad2c52d6f5f7d492a38ce0c261d966 to your computer and use it in GitHub Desktop.
Custom Firefox userChrome.css File
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*** Proton Tabs Tweaks ***/ | |
| /* Adjust tab corner shape, optionally remove space below tabs */ | |
| #tabbrowser-tabs { | |
| --user-tab-rounding: 0px; | |
| } | |
| .tab-background { | |
| border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; | |
| margin-block: 1px 0 !important; | |
| } | |
| #scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */ | |
| border-top-width: 1px !important; | |
| border-bottom-width: 0 !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; | |
| } | |
| /* Inactive tabs: Separator line style */ | |
| .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background { | |
| border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important; | |
| } | |
| /* For dark backgrounds */ | |
| [brighttext="true"] .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background { | |
| border-right: 1px solid var(--lwt-background-tab-separator-color, var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20))) !important; | |
| } | |
| .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background { | |
| border-radius: 0 !important; | |
| } | |
| /* Remove padding between tabs */ | |
| .tabbrowser-tab { | |
| padding-left: 0 !important; | |
| padding-right: 0 !important; | |
| font-size: 14px !important; | |
| } | |
| /* Tweak Options as of 8/11/2021; Generated Wed Aug 11 2021 14:16:12 GMT-0600 (Mountain Daylight Time) */ | |
| /*** Tighten up drop-down/context/popup menu spacing ***/ | |
| menupopup > menuitem, menupopup > menu { | |
| padding-block: 4px !important; | |
| } | |
| :root { | |
| --arrowpanel-menuitem-padding: 4px 8px !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 */ | |
| } | |
| /* 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 */ | |
| /* 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 */ | |
| } | |
| /* Color the icon on hover for confirmation or avoidance */ | |
| .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]):hover { | |
| fill: green !important; | |
| } | |
| [lwthemetextcolor="bright"] .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]):hover { | |
| fill: lightgreen !important; /* for dark themes */ | |
| } | |
| /* 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-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 */ | |
| } | |
| .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]):hover { | |
| fill: green !important; | |
| } | |
| [lwthemetextcolor="bright"] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]):hover { | |
| fill: lightgreen !important; /* for dark themes */ | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment