├── image ├── logo.png ├── thumbnail.png ├── thumbnail-s.png └── sidebery-appearance.png ├── private.css ├── LICENSE.md ├── sidebery.css ├── README.md ├── userChrome.css ├── darkTheme.css └── legacy ├── userChrome-win10.css └── sidebery.css /image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mgastonportillo/gale-for-ff/HEAD/image/logo.png -------------------------------------------------------------------------------- /image/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mgastonportillo/gale-for-ff/HEAD/image/thumbnail.png -------------------------------------------------------------------------------- /image/thumbnail-s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mgastonportillo/gale-for-ff/HEAD/image/thumbnail-s.png -------------------------------------------------------------------------------- /image/sidebery-appearance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mgastonportillo/gale-for-ff/HEAD/image/sidebery-appearance.png -------------------------------------------------------------------------------- /private.css: -------------------------------------------------------------------------------- 1 | @import url("darkTheme.css"); 2 | 3 | :root[privatebrowsingmode="temporary"] { 4 | --focus-outline-color: var(--gg-purple) !important; 5 | --toolbar-field-focus-border-color: var(--gg-purple) !important; 6 | --lwt-selected-tab-background-color: var(--gg-purple-dark) !important; 7 | --avatar-image-url: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important; 8 | } 9 | 10 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 gale 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /sidebery.css: -------------------------------------------------------------------------------- 1 | #root.root { 2 | --gg-black: #1c1b22; 3 | --gg-grey: #2b2a33; 4 | --gg-white: #fefefe; 5 | --gg-red: #d10032; 6 | --s-frame-bg: var(--gg-black) !important; 7 | --s-toolbar-bg: var(--gg-grey) !important; 8 | /* --s-frame-fg: var(--gg-white) !important; */ 9 | /* --s-toolbar-fg: var(--gg-white) !important; */ 10 | } 11 | 12 | /* --- NAV BAR --- */ 13 | 14 | #nav_bar { 15 | margin-bottom: -2px; 16 | display: flex; 17 | align-items: center; 18 | padding: 0 6px; 19 | height: 50px; 20 | } 21 | 22 | /* --- PINNED TABS --- */ 23 | 24 | .PinnedTabsBar { 25 | padding: 2px var(--tabs-margin) var(--tabs-margin) var(--tabs-margin) !important; 26 | background: transparent; 27 | } 28 | 29 | /* --- TABS --- */ 30 | 31 | #root.root { 32 | --tabs-margin: 6px; 33 | --tabs-height: 35px; 34 | --tabs-width: 35px; 35 | --tabs-pinned-height: var(--tabs-height); 36 | --tabs-pinned-width: var(--tabs-width); 37 | --tabs-indent: 16px; 38 | } 39 | 40 | .Tab .close:hover { 41 | background: transparent !important; 42 | } 43 | 44 | .Tab .close > svg:hover { 45 | /* Styling the tab close button */ 46 | border-radius: 50px; 47 | background: #d10032; 48 | opacity: 100%; 49 | } 50 | 51 | .TabsPanel .new-tab-btn { 52 | height: var(--tabs-height); 53 | } 54 | 55 | .TabsPanel .new-tab-btns { 56 | padding: 0 6px; 57 | } 58 | 59 | /* --- IMPROVEMENTS --- */ 60 | 61 | .TabsPanel { 62 | margin: 5px 0; 63 | } 64 | 65 | .central-box { 66 | z-index: 1; 67 | background: var(--gg-black); 68 | border-top-right-radius: 6px; 69 | border-top-left-radius: 6px; 70 | } 71 | 72 | .main-box:after { 73 | position: absolute; 74 | z-index: 0; 75 | top: -5px; 76 | left: auto; 77 | right: -5px; 78 | content: ""; 79 | background: var(--gg-grey); 80 | height: 10px; 81 | width: 10px; 82 | } 83 | 84 | /* Uncomment if you place your sidebar to the right */ 85 | /* .main-box:after { 86 | right: auto; 87 | left: -5px; 88 | } */ 89 | 90 | .SearchBar { 91 | background-color: var(--gg-grey); 92 | } 93 | 94 | .SearchBar .clear-btn { 95 | background: transparent !important; 96 | opacity: 100%; 97 | } 98 | 99 | .SearchBar .clear-btn:before { 100 | background: transparent !important; 101 | opacity: 0; 102 | } 103 | 104 | .SearchBar .clear-btn svg { 105 | background: transparent !important; 106 | } 107 | 108 | .SearchBar .clear-btn svg:hover { 109 | border-radius: var(--search-border-radius); 110 | background: var(--gg-red) !important; 111 | } 112 | 113 | .popup { 114 | margin-top: 50px; 115 | max-width: 97%; 116 | } 117 | 118 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

⚠️ Archive Notice ⚠️

2 | 3 | **gale for Firefox** is now archived and will no longer receive updates. Please 4 | check [this issue](https://github.com/mgastonportillo/gale-for-ff/issues/10) for 5 | extra details. 6 | 7 | --- 8 | 9 |
10 |

gale for Firefox

11 |

My CSS files to use with Firefox and Sidebery

12 | 13 | --- 14 | 15 | My goal with these settings was to create a minimalistic yet functional setup 16 | with Sidebery tuned to match Firefox Default Dark Theme and optimise the 17 | workspace. If you find any odd behaviour feel free to send a pull request. 18 | 19 | --- 20 | 21 |
22 | 23 | --- 24 | 25 | ### How to install? 26 | 27 | 1. In Firefox, go to `about:config` and set 28 | `toolkit.legacyUserProfileCustomizations.stylesheets` to `True`. Make sure 29 | you have the 30 | chrome 31 | folder within your Firefox profile 32 | 2. Get Sidebery v5 (beta) if 33 | you don't have it already installed 34 | 3. Copy `userChrome.css`, `darkTheme.css` and `private.css` to the chrome folder 35 | 4. Go to Sidebery settings and paste the content of my `sidebery.css` file into 36 | _Styles editor > Sidebar_ 37 | 5. Enjoy your new setup!
38 | 39 | Set these settings under appearance in Sidebery (optional but recommended): 40 | 41 |
42 | 43 | --- 44 | 45 | ### Known bugs 46 | 47 | - Due to a bug that has been present in Firefox for quite some time already, the 48 | autoshrink functionality isn't working as intended in Sidebery beta, so I 49 | decided to disable such characteristic until I find a workaround. Related 50 | issue 51 | (thanks @emiham for the heads-up) 52 | - ~~When moving a tab, the tab position indicator doesn't follow the 53 | `margin-top` CSS rule for tabs~~ **_Fixed!_** 54 | 55 | --- 56 | 57 | ### Credits 58 | 59 | - to @MrOtherGuy for his 60 | Firefox CSS Hacks 61 | - to u/captainkaba for 62 | his 63 | Denkfabrik 64 | theme (which I used as a base for legacy) 65 | - to Reddit user 66 | u/It_Was_The_Other_Guy 67 | for his 68 | tip 69 | which was very useful in legacy 70 | - to Reddit user 71 | u/GainghisKhan for 72 | finding 73 | a bug and providing a solution idea for it in legacy 74 | -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | @import url("darkTheme.css"); 2 | @import url("private.css"); 3 | 4 | /* --- TAB AND TITLE BAR --- */ 5 | 6 | #TabsToolbar { 7 | display: none !important; 8 | height: 0 !important; 9 | } 10 | 11 | .content-header { 12 | background: var(--gg-bg) !important; 13 | } 14 | 15 | .content-scrollable { 16 | background: var(--gg-black) !important; 17 | } 18 | 19 | /* --- SIDEBAR --- */ 20 | 21 | #sidebar-header { 22 | display: none !important; 23 | border-bottom: none !important; 24 | border: none !important; 25 | background-color: var(--gg-bg) !important; 26 | border-inline-color: var(--gg-bg); 27 | } 28 | 29 | #sidebar-box { 30 | margin-top: -1px; 31 | position: relative; 32 | } 33 | 34 | /* Support for languages that are read from right to left */ 35 | #sidebar-box[positionend] { 36 | direction: rtl; 37 | } 38 | 39 | #sidebar-box[positionend] > * { 40 | direction: ltr; 41 | } 42 | 43 | #sidebar-box[positionend]:-moz-locale-dir(rtl) { 44 | direction: ltr; 45 | } 46 | 47 | #sidebar-box[positionend]:-moz-locale-dir(rtl) > * { 48 | direction: rtl; 49 | } 50 | 51 | .sidebar-panel { 52 | background: var(--gg-bg) !important; 53 | } 54 | 55 | .sidebar-panel[lwt-sidebar] { 56 | background: var(--gg-bg); 57 | } 58 | 59 | #sidebar-icon { 60 | filter: contrast(150%); 61 | opacity: 1; 62 | } 63 | 64 | .sidebar-placesTree { 65 | position: relative; 66 | border-top-right-radius: 6px; 67 | background: var(--gg-black) !important; 68 | color: var(--gg-fg-alt) !important; 69 | } 70 | 71 | /* Uncomment if you place your sidebar to the right */ 72 | /* .sidebar-placesTree { 73 | border-top-right-radius: 0; 74 | border-top-left-radius: 6px; 75 | } */ 76 | 77 | .sidebar-placesTree:before { 78 | right: auto; 79 | left: 0; 80 | } 81 | 82 | #sidebar-title { 83 | font-size: 1.1rem; 84 | } 85 | 86 | #sidebar-close { 87 | opacity: 0; 88 | } 89 | 90 | #sidebar-close:hover { 91 | opacity: 1; 92 | } 93 | 94 | #historyTree .sidebar-placesTreechildren { 95 | margin-left: -8px; 96 | } 97 | 98 | #sidebar-splitter { 99 | margin-top: -1px; 100 | width: 0px !important; 101 | border: 2px solid var(--gg-bg) !important; 102 | } 103 | 104 | #sidebar, 105 | #sidebar-header { 106 | border-inline-width: 0px 4px; 107 | } 108 | 109 | #sidebar-box:not([positionend]) > :-moz-locale-dir(rtl), 110 | #sidebar-box[positionend] > * { 111 | border-inline-width: 4px 0px; 112 | } 113 | 114 | /* --- IMPROVEMENTS & FEATS --- */ 115 | 116 | #appcontent { 117 | margin-top: -1px; 118 | } 119 | 120 | /* Hide on fullscreen */ 121 | #main-window[sizemode="fullscreen"] #sidebar-box, 122 | #main-window[sizemode="fullscreen"] #sidebar-splitter { 123 | /* --- Match the transition from the toolbar; swap to margin-right if you use the sidebar to the right --- */ 124 | /* transition: .8s margin-left ease-out !important; */ 125 | display: none !important; 126 | } 127 | 128 | #search-box { 129 | appearance: none !important; 130 | border-radius: 5px !important; 131 | line-height: 1.8rem !important; 132 | background: var(--gg-black) !important; 133 | color: var() !important; 134 | } 135 | 136 | -------------------------------------------------------------------------------- /darkTheme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* --- Colour variables --- */ 3 | --gg-bg: #2a2932; 4 | --gg-fg: #fbfbfe; 5 | --gg-fg-alt: #d4d4d4; 6 | --gg-fg-faded: #8f8f9d; 7 | --gg-grey-alt: #5b5b67; 8 | --gg-grey: #53535f; 9 | --gg-darkgrey: #43424d; 10 | --gg-black: #1c1b22; 11 | --gg-black-bold: #0c0c0d; 12 | --gg-pseudotransparent: rgba(0, 0, 0, 0); 13 | --gg-cyan: #80ecff; 14 | --gg-lightblue: #00ddff; 15 | --gg-skyblue: #a8f2ff; 16 | --gg-turquoise: #52ffbd; 17 | --gg-purple-dark: #3c1f7a; 18 | --gg-purple-mid: #ac70ff; 19 | --gg-purple: #9059ff; 20 | --gg-pink: #ff4aa2; 21 | --gg-yellow: #ffbd4f; 22 | /* Attributes */ 23 | --button-bgcolor: var(--gg-bg) !important; 24 | --button-hover-bgcolor: var(--gg-grey) !important; 25 | --button-active-bgcolor: var(--gg-grey-alt) !important; 26 | --button-primary-bgcolor: var(--gg-lightblue) !important; 27 | --button-primary-hover-bgcolor: var(--gg-cyan) !important; 28 | --button-primary-active-bgcolor: var(--gg-skyblue) !important; 29 | --button-primary-color: var(--gg-bg) !important; 30 | --input-bgcolor: var(--gg-darkgrey) !important; 31 | --input-color: var(--gg-fg) !important; 32 | --input-border-color: var(--gg-fg-faded) !important; 33 | --autocomplete-popup-separator-color: var(--gg-grey) !important; 34 | --panel-banner-item-update-supported-bgcolor: var(--gg-turquoise) !important; 35 | --panel-banner-item-info-icon-bgcolor: var(--gg-cyan) !important; 36 | --tab-icon-overlay-stroke: var(--gg-darkgrey) !important; 37 | --tab-icon-overlay-fill: var(--gg-fg) !important; 38 | --panel-item-hover-bgcolor: color-mix( 39 | in srgb, 40 | currentColor 9%, 41 | transparent 42 | ) !important; 43 | --arrowpanel-dimmed-further: color-mix( 44 | in srgb, 45 | currentColor 14%, 46 | transparent 47 | ) !important; 48 | --panel-item-active-bgcolor: color-mix( 49 | in srgb, 50 | currentColor 25%, 51 | transparent 52 | ) !important; 53 | --urlbar-icon-fill-opacity: 1 !important; 54 | --panel-separator-zap-gradient: linear-gradient( 55 | 90deg, 56 | var(--gg-purple) 0%, 57 | var(--gg-pink) 52.08%, 58 | var(--gg-yellow) 100% 59 | ) !important; 60 | --lwt-accent-color: var(--gg-black) !important; 61 | --lwt-text-color: var(--gg-fg) !important; 62 | --arrowpanel-background: var(--gg-darkgrey) !important; 63 | --arrowpanel-color: var(--gg-fg) !important; 64 | --arrowpanel-border-color: var(--gg-grey) !important; 65 | --toolbar-field-background-color: var(--gg-black) !important; 66 | --toolbar-field-color: var(--gg-fg) !important; 67 | --toolbar-field-border-color: var(--gg-pseudotransparent) !important; 68 | --toolbar-field-focus-background-color: var(--gg-darkgrey) !important; 69 | --toolbar-field-focus-color: var(--gg-fg) !important; 70 | --lwt-tab-text: var(--gg-fg) !important; 71 | --toolbar-bgcolor: var(--gg-bg) !important; 72 | --toolbar-color: var(--gg-fg) !important; 73 | --chrome-content-separator-color: var(--gg-black-bold) !important; 74 | --toolbarbutton-icon-fill: var(--gg-fg) !important; 75 | --lwt-selected-tab-background-color: var(--gg-darkgrey) !important; 76 | --autocomplete-popup-highlight-background: var(--gg-bg) !important; 77 | --tabpanel-background-color: var(--gg-bg) !important; 78 | --sidebar-background-color: var(--gg-bg) !important; 79 | --sidebar-text-color: var(--gg-fg) !important; 80 | } 81 | -------------------------------------------------------------------------------- /legacy/userChrome-win10.css: -------------------------------------------------------------------------------- 1 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 2 | 3 | /* leaves space for the window buttons */ 4 | #nav-bar { 5 | margin-top: -38px !important; 6 | margin-right: 138px !important; 7 | margin-bottom: -4px !important; 8 | } 9 | 10 | /* hides the sidebar header */ 11 | #sidebar-header { 12 | display: none !important; 13 | } 14 | 15 | .tab[selected="true"] { 16 | visibility: collapse; 17 | height: 0px; 18 | } 19 | 20 | .tabbrowser-tab { 21 | visibility: collapse; 22 | height: 0px; 23 | } 24 | 25 | .tabbrowser-tab[visuallyselected="true"] { 26 | visibility: collapse; 27 | height: 0px; 28 | } 29 | 30 | /* Credits to https://github.com/MrOtherGuy for the following snippet*/ 31 | 32 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 33 | See the above repository for updates as well as full license text. */ 34 | 35 | /* Show sidebar only when the cursor is over it */ 36 | /* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ 37 | 38 | #sidebar-box { 39 | --uc-sidebar-width: 40px; 40 | --uc-sidebar-hover-width: 210px; 41 | --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ 42 | position: relative; 43 | min-width: var(--uc-sidebar-width) !important; 44 | width: var(--uc-sidebar-width) !important; 45 | max-width: var(--uc-sidebar-width) !important; 46 | z-index: 1; 47 | } 48 | 49 | #sidebar-box[positionend] { 50 | direction: rtl; 51 | } 52 | #sidebar-box[positionend] > * { 53 | direction: ltr; 54 | } 55 | 56 | #sidebar-box[positionend]:-moz-locale-dir(rtl) { 57 | direction: ltr; 58 | } 59 | #sidebar-box[positionend]:-moz-locale-dir(rtl) > * { 60 | direction: rtl; 61 | } 62 | 63 | #main-window[sizemode="fullscreen"] #sidebar-box { 64 | --uc-sidebar-width: 1px; 65 | } 66 | 67 | #sidebar-splitter { 68 | display: none; 69 | } 70 | 71 | #sidebar-header { 72 | overflow: hidden; 73 | color: var(--chrome-color, inherit) !important; 74 | } 75 | 76 | #sidebar { 77 | transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important; 78 | min-width: var(--uc-sidebar-width) !important; 79 | will-change: min-width; 80 | } 81 | 82 | #sidebar-box:hover > #sidebar { 83 | min-width: var(--uc-sidebar-hover-width) !important; 84 | transition-delay: 0ms !important; 85 | } 86 | 87 | .sidebar-panel { 88 | background-color: transparent !important; 89 | color: var(--newtab-text-primary-color) !important; 90 | } 91 | 92 | .sidebar-panel #search-box { 93 | -moz-appearance: none !important; 94 | background-color: rgba(249, 249, 250, 0.1) !important; 95 | color: inherit !important; 96 | } 97 | 98 | /* Add sidebar divider and give it background */ 99 | 100 | #sidebar, 101 | #sidebar-header { 102 | background-color: inherit !important; 103 | border-inline: 1px solid rgb(80, 80, 80); 104 | border-inline-width: 0px 1px; 105 | } 106 | 107 | #sidebar-box:not([positionend]) > :-moz-locale-dir(rtl), 108 | #sidebar-box[positionend] > * { 109 | border-inline-width: 1px 0px; 110 | } 111 | 112 | /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ 113 | 114 | #sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel { 115 | inset-inline: auto 0px !important; 116 | } 117 | #sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label { 118 | margin-inline: 0px !important; 119 | border-left-style: solid !important; 120 | } 121 | -------------------------------------------------------------------------------- /legacy/sidebery.css: -------------------------------------------------------------------------------- 1 | /* ROOT */ 2 | 3 | #root { 4 | /* Tab and PinnedTab height adjustment */ 5 | --tabs-height: 33px; 6 | --tabs-pinned-height: var(--tabs-height); 7 | /* Dark Theme base settings */ 8 | --bg: #1c1b22 !important; 9 | --tabs-fg: #d4d4d4 !important; 10 | --tabs-bg-hover: #3b3948 !important; 11 | --tabs-activated-bg: #5b5b66 !important; 12 | --nav-btn-activated-bg: #1f222f !important; 13 | } 14 | 15 | #root .Tab { 16 | --tabs-indent: 7px; 17 | } 18 | 19 | /* TABS */ 20 | 21 | .Tab .lvl-wrapper:after { 22 | display: none; 23 | } 24 | 25 | .Tab { 26 | margin: auto; 27 | width: 94%; 28 | border-radius: 3px; 29 | } 30 | 31 | .Tab .close > svg:hover { 32 | /* Styling the tab close button */ 33 | border-radius: 3px; 34 | background: #492121 !important; 35 | opacity: 100%; 36 | } 37 | 38 | .Tab .title { 39 | overflow: hidden !important; 40 | } 41 | 42 | /* PINNED TABS */ 43 | 44 | .PinnedDock { 45 | background-color: var(--bg) !important; 46 | } 47 | 48 | .PinnedTab { 49 | margin: 5px 0px 4px 6px; 50 | border-radius: 3px; 51 | } 52 | 53 | /* NAV BAR */ 54 | 55 | .NavigationBar { 56 | height: 41px !important; 57 | padding: 4.5px 0px 0px 4.5px !important; 58 | background-color: #2b2a33 !important; 59 | margin-bottom: 5px; 60 | } 61 | 62 | .NavigationBar .panel-btn:hover { 63 | border-radius: 3px !important; 64 | background-color: var(--tabs-bg-hover) !important; 65 | } 66 | 67 | .NavigationBar .panel-btn[data-active="true"] { 68 | border-radius: 3px !important; 69 | background-color: var(--bg) !important; 70 | } 71 | 72 | .NavigationBar .panel-btn[data-active="true"]:hover { 73 | border-radius: 3px !important; 74 | background-color: var(--tabs-bg-hover) !important; 75 | } 76 | 77 | .NavigationBar .panel-btn > svg, 78 | .NavigationBar .panel-btn > img { 79 | fill: #f2f2f2 !important; 80 | } 81 | 82 | /* SIDEBAR HACK PATCHES */ 83 | 84 | @media (max-width: 50px) { 85 | /* Fix to tab tree identation when minimised */ 86 | #root:not(:hover) .Tab { 87 | --tabs-indent: 0px; 88 | } 89 | 90 | .Tab[data-lvl] > div.lvl-wrapper { 91 | right: -2px; 92 | } 93 | 94 | .Tab { 95 | max-width: 34px; 96 | } 97 | 98 | .Tab .fav { 99 | z-index: 1; 100 | } 101 | 102 | .Tab .audio { 103 | z-index: 1; 104 | margin-left: -12px; 105 | height: 26px; 106 | } 107 | 108 | .Tab .title { 109 | display: none; 110 | } 111 | 112 | .PinnedTab { 113 | margin-left: 5px; 114 | } 115 | 116 | .NavigationBar .settings-btn { 117 | display: none; 118 | } 119 | } 120 | 121 | /* OPTIONAL */ 122 | 123 | /* Disable these two snippets below to make pinned tabs wrap when minimised */ 124 | .PinnedDock { 125 | flex-wrap: nowrap !important; 126 | } 127 | 128 | .PinnedTab { 129 | overflow: hidden !important; 130 | min-width: var(--tabs-pinned-width) !important; 131 | } 132 | 133 | /* Optional patch for better tab notifications on pinned tabs */ 134 | /* 135 | .PinnedTab[data-audible] .fav > img, 136 | .PinnedTab[data-muted] .fav > img, 137 | .PinnedTab[data-loading] .fav > img { 138 | mask: none; 139 | } 140 | 141 | .PinnedTab .fav > img { 142 | mask: none; 143 | } 144 | 145 | .PinnedTab[data-updated="true"] .fav > img { 146 | mask: radial-gradient(circle at calc(100% - 2px) calc(100% - 2px),rgba(0,0,0,0.141),rgba(0,0,0,0.141) 4px,#000 5px,#000); 147 | } 148 | 149 | .PinnedTab .audio-badge { 150 | top: 5px; 151 | } 152 | 153 | .PinnedTab .update-badge { 154 | opacity: 0; 155 | } 156 | 157 | .PinnedTab[data-updated="true"] .update-badge { 158 | opacity: 100; 159 | } 160 | */ 161 | --------------------------------------------------------------------------------