├── images ├── dropdown-menu.png ├── windows-version.png ├── screenshot-firefox1.png └── screenshot-firefox2.png ├── README.md ├── chrome ├── userChrome.css └── userChrome - WindowsTempFix.css └── sidebery ├── sidebery.css └── sidebery-data.json /images/dropdown-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janLalawa/MauveWolf/HEAD/images/dropdown-menu.png -------------------------------------------------------------------------------- /images/windows-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janLalawa/MauveWolf/HEAD/images/windows-version.png -------------------------------------------------------------------------------- /images/screenshot-firefox1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janLalawa/MauveWolf/HEAD/images/screenshot-firefox1.png -------------------------------------------------------------------------------- /images/screenshot-firefox2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/janLalawa/MauveWolf/HEAD/images/screenshot-firefox2.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## MauveWolf, a Firefox Sidebery Theme (AKA CSS Hell) 2 | 3 | This is my personal Firefox theme that I'm quite happy with. I built it from several different themes mixed with my own preferences. 4 | I've had more interest than expected in my theme. I'll try and make some time soon to clean it up and publish an actual release. 5 | 6 | 7 | ![image](images/screenshot-firefox1.png) 8 | 9 | ![image](images/dropdown-menu.png) 10 | 11 | ### Main Changes 12 | - Bookmark bar and tab bar hidden 13 | - [Catpuccin](https://github.com/catppuccin/firefox) style Mauve Mocha theme with some changes 14 | - Nav bar as part of header bar 15 | - FireFox tab dropdown box added to the left 16 | - Sidebery as vertical tabs without hiding (I like to see my tabs!) 17 | - Dimmed gray unloaded tabs 18 | - Light blue loaded tabs 19 | - Pink bold current tab 20 | - Custom border box for current tab 21 | - New unread tabs in italics 22 | - Updated and pretty Sidebery context menu 23 | - A bunch of changes to Sidebery sizing and behaviour (double click to rename tab, unload collapsed folders, save snapshot of tabs each day and so on..) 24 | 25 | 26 | ### Windows Users 27 | 28 | Follow the steps below, but instead of `userChrome.css`, use `userChrome - WindowsTempFix.css` and rename it to just `userChrome.css` once you've copied it into the `chrome` folder. This is to make space for the buttonbar in the top right and to stop it overlapping. 29 | I have now resolved the bug with missing icons on the buttonbar. Please grab the latest windows userChrome until I clean this up and release a proper version. 30 | 31 | ### Updating Accent Colours 32 | 33 | I've had two requests now around updating specific accent colours. The three places you can make such changes are: 34 | - Your **userChrome.css** file (to directly theme the browser manually if you know what to target). [See this guide for help with that](https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/) 35 | - The **sidebery CSS** where you can also use a GUI to edit (For changing tab highlights etc.) 36 | - In [Firefox Color](https://color.firefox.com/) 37 | 38 | 39 | ### Installation 40 | 1. Go to `about:config` and set `toolkit.legacyUserProfileCustomizations.stylesheets` to "True" to enable CSS customisation. 41 | 2. Set `svg.context-properties.content.enabled` to true to allow Sidebery to use FireFox themes. 42 | 3. Install [Sidebery](https://addons.mozilla.org/en-GB/firefox/addon/sidebery/) 43 | 4. Install [Firefox Color](https://color.firefox.com/) 44 | 5. [Click to install my FireFox Color theme](https://color.firefox.com/?theme=XQAAAAJqBAAAAAAAAABBqYhm849SCicxcUd1M38oKRicm6da8pDHi8ajvXVSk7how0XG5K6BSwejFQMVPBLwKXE-jNNeM2ACdvS7L-Wxr3cCoBlZ6agKWbmlfjAucoLmnm6KCC6C4nASML-68VTMPZ7V-Tr3910_P25TunJ74NbtznlDtthN80lAknQFJjRI21Fn3xC6Pq442NWeyPyYpsp2l7LmJi4l7igH5BrTgD8y-Npju0TEjHgtrGYqQXbg7h59xvP9m2wMW2tJdpkOGysJ7-_fOmo55XJR0IQDem_LJXvsQecATkI4WVyOgG5B-2QY94OSGZXZxfhZTjDUb8qKHxVmFZYRK67Ge_qU6a6nIQ9C51xmRPrWEP4CZrE4VGGYcIMiqAT877JkeERgvZrSECkXGSR9Ov5v7Z0xIjqd6PR-pEJoX3NQbOWGJCfbpV8oqPGoPrFN4cvumDMWe_DJ6ajydJiBYCJJXyvM1uunW_AJvly4sPVjsEbTCJZ8qLA8N2YENK-xf8CS5KJmMW8cmnETw6qPb2H9C0XCMOF3m85MKybhatYaJ6dY6WnM7DgNLYqgM2fpM5q2gWPKkDhWOgT7K8HmQ4xB-7BpwFJHYmHDW0Yy_-0Ul4A) 45 | 6. Navigate to `about:support` and look for the **Profile Folder** option. 46 | 7. Inside the profile folder (Mine is called `8wu74wqf.dev-edition-default` but yours may be different) create a folder simply called `chrome` 47 | 8. Enter the `chrome` folder. 48 | 9. Drop the `userChrome.css` file in there or alternatively create your own file and paste the contents. 49 | 10. Restart Firefox and open Sidebery config/ 50 | 11. In the *Help* section, click the **Import addon data** button and import `sidebery-data.json` *(NOTE: This will update your Sidebery tab panels to my list and will take your tabs out of their current panels)* 51 | 12. If you just want the styles instead and don't care about the dropdown and other config, head to the *Styles Editor* section 52 | 13. Paste my `sidebery.css` into the window on the right. 53 | 14. Done! 54 | - *You may need to **Customise Toolbar** with a right click in Firefox to adjust positions of icons. Use the flexible spacers* :) 55 | 56 | - Small recommendation until I can update this: Change the "Create sub-tree on opening link in new tab" to **off**. In practice this makes things much easier to manage by only creating sub-trees when you actually want them (by dragging things around). 57 | 58 | Let me know if this breaks but I should be aware since I use this regularly. Tested on **macOS** and **Windows**. None of this CSS is clean and is full of hacks to get it working. 59 | 60 | New tab page is [Tabliss](https://tabliss.io/) 61 | 62 | 63 | ![image](images/screenshot-firefox2.png) 64 | 65 | #### Windows Version 66 | ![image](images/windows-version.png) 67 | 68 | -------------------------------------------------------------------------------- /chrome/userChrome.css: -------------------------------------------------------------------------------- 1 | /* 2 | An edit of someone elses edit of someone elses edit.... 3 | Hopefully this theme is robust. I am happy with it at least 4 | */ 5 | 6 | #TabsToolbar > .titlebar-buttonbox-container { 7 | -moz-box-ordinal-group: 0; 8 | padding-right: 5px; 9 | } 10 | 11 | #TabsToolbar-customization-target { 12 | display: flex; 13 | flex-direction: row; 14 | } 15 | #TabsToolbar-customization-target > #alltabs-button { 16 | order: -1; 17 | margin-bottom: 0px; 18 | } 19 | 20 | #tabs-newtab-button { 21 | display: none; 22 | } 23 | 24 | .titlebar-spacer[type="pre-tabs"] { 25 | width: 1px !important; 26 | } 27 | 28 | 29 | /* Sidebery */ 30 | #main-window[titlepreface*="🦊 "] .tabbrowser-tab { 31 | visibility: collapse; 32 | } 33 | 34 | #main-window[titlepreface*="🦊 "] .titlebar-button { 35 | height: 40px; 36 | } 37 | 38 | #main-window[titlepreface*="🦊 "] #nav-bar { 39 | margin-top: -40px; 40 | } 41 | #main-window[titlepreface*="🦊 "][tabsintitlebar="true"] #nav-bar { 42 | margin-right: 90px; 43 | } 44 | #main-window[titlepreface*="🦊 "] #titlebar-spacer { 45 | background-color: var(--chrome-secondary-background-color); 46 | } 47 | 48 | #main-window[titlepreface*="🦊 "] #titlebar-buttonbox-container { 49 | background-color: var(--chrome-secondary-background-color); 50 | } 51 | 52 | #main-window[titlepreface*="🦊 "] .titlebar-color { 53 | background-color: var(--toolbar-bgcolor); 54 | } 55 | 56 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header { 57 | visibility: collapse; 58 | } 59 | 60 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 61 | See the above repository for updates as well as full license text. */ 62 | 63 | /* Show sidebar only when the cursor is over it */ 64 | /* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ 65 | 66 | /* #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] { 67 | --uc-sidebar-width: 48px !important; 68 | --uc-sidebar-hover-width: 250px; 69 | --uc-autohide-sidebar-delay: 100ms; 70 | position: relative; 71 | min-width: var(--uc-sidebar-width) !important; 72 | width: var(--uc-sidebar-width) !important; 73 | max-width: var(--uc-sidebar-width) !important; 74 | z-index:1; 75 | } 76 | 77 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] { 78 | direction: rtl; 79 | } 80 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > *{ 81 | direction: ltr; 82 | } 83 | 84 | #sidebar-box[positionend]:-moz-locale-dir(rtl){ 85 | direction: ltr; 86 | } 87 | #sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ 88 | direction: rtl; 89 | } 90 | 91 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar { 92 | transition: min-width 115ms linear !important; 93 | min-width: var(--uc-sidebar-width) !important; 94 | will-change: min-width; 95 | } 96 | 97 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar { 98 | min-width: var(--uc-sidebar-hover-width) !important; 99 | transition: min-width 100ms linear var(--uc-autohide-sidebar-delay), box-shadow 500ms linear !important; 100 | box-shadow: 0 0 4px rgba(10,10,10, .5); 101 | clip-path: inset(0px -15px 0px -15px); 102 | } */ 103 | 104 | /* Add sidebar divider and give it background */ 105 | 106 | #sidebar, 107 | #sidebar-header { 108 | background-color: var(--toolbar-bgcolor) !important; 109 | border-inline: 1px solid var(--chrome-content-separator-color); 110 | border-inline-width: 0px 1px; 111 | } 112 | 113 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]) > :-moz-locale-dir(rtl), 114 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > * { 115 | border-inline-width: 1px 0px; 116 | } 117 | 118 | /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ 119 | 120 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel { 121 | inset-inline: auto 0px !important; 122 | } 123 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel-label { 124 | margin-inline: 0px !important; 125 | border-left-style: solid !important; 126 | } 127 | 128 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0 129 | See the above repository for updates as well as full license text. */ 130 | 131 | #PersonalToolbar{ 132 | --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */ 133 | --uc-bm-padding: 7px; /* Vertical padding to be applied to bookmarks */ 134 | --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */ 135 | 136 | /* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */ 137 | --uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */ 138 | --uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */ 139 | } 140 | 141 | :root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px; } 142 | :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px } 143 | 144 | #PersonalToolbar:not([customizing]){ 145 | position: relative; 146 | margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding)); 147 | transform: rotateX(90deg); 148 | transform-origin: top; 149 | transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important; 150 | z-index: 1; 151 | /* The following properties should allow the themes with trasparent toolbars to work */ 152 | background-color: transparent !important; 153 | background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling); 154 | --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)); 155 | background-position: top left,top left,var(--lwt-background-alignment,top left); 156 | background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y); 157 | background-image: var(--toolbar-bgimage), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important; 158 | } 159 | 160 | #PlacesToolbarItems > .bookmark-item, 161 | #OtherBookmarks, 162 | #PersonalToolbar > #import-button{ 163 | padding-block: var(--uc-bm-padding) !important; 164 | } 165 | 166 | #nav-bar:focus-within + #PersonalToolbar{ 167 | transition-delay: 100ms !important; 168 | transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0)); 169 | } 170 | 171 | #navigator-toolbox:hover > #PersonalToolbar{ 172 | transition-delay: 100ms !important; 173 | transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0)); 174 | } 175 | 176 | #navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar { 177 | transform: rotateX(0); 178 | } 179 | 180 | .tabbrowser-tab { 181 | visibility: collapse; 182 | } 183 | #nav-bar { 184 | margin-top: -40px; 185 | margin-right: 0px; 186 | margin-left: 110px; 187 | } 188 | .titlebar-button { 189 | height: 40px; 190 | } 191 | 192 | 193 | /* Uncomment to enable compatibility for multi-row_bookmarks.css */ 194 | /* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup */ 195 | /* 196 | #PersonalToolbar:not([customizing]){ 197 | position: fixed; 198 | display: block; 199 | margin-bottom: 0px !important; 200 | } 201 | */ -------------------------------------------------------------------------------- /chrome/userChrome - WindowsTempFix.css: -------------------------------------------------------------------------------- 1 | /* 2 | An edit of someone elses edit of someone elses edit.... 3 | Hopefully this theme is robust. I am happy with it at least 4 | */ 5 | /* 6 | #TabsToolbar > .titlebar-buttonbox-container { 7 | -moz-box-ordinal-group: 0; 8 | padding-right: 5px; 9 | } */ 10 | 11 | #TabsToolbar-customization-target { 12 | display: flex; 13 | flex-direction: row; 14 | margin-right: 160px; 15 | } 16 | 17 | /* #titlebar-buttonbox, #titlebar-buttonbox:-moz-window-inactive { 18 | display: block !important; 19 | opacity: 1 !important; 20 | } */ 21 | 22 | #nav-bar { 23 | max-width: 80% !important; 24 | padding-right: 160px !important; 25 | } 26 | 27 | #TabsToolbar-customization-target > #alltabs-button { 28 | order: -1; 29 | margin-bottom: 0px; 30 | } 31 | 32 | #tabs-newtab-button { 33 | display: none; 34 | } 35 | 36 | .titlebar-spacer[type="pre-tabs"] { 37 | width: 1px !important; 38 | } 39 | 40 | 41 | /* Sidebery */ 42 | #main-window[titlepreface*="🦊 "] .tabbrowser-tab { 43 | visibility: collapse; 44 | } 45 | 46 | #main-window[titlepreface*="🦊 "] .titlebar-button { 47 | height: 40px; 48 | } 49 | 50 | #main-window[titlepreface*="🦊 "] #nav-bar { 51 | margin-top: -40px; 52 | } 53 | #main-window[titlepreface*="🦊 "][tabsintitlebar="true"] #nav-bar { 54 | margin-right: 90px; 55 | } 56 | #main-window[titlepreface*="🦊 "] #titlebar-spacer { 57 | background-color: var(--chrome-secondary-background-color); 58 | } 59 | 60 | #main-window[titlepreface*="🦊 "] #titlebar-buttonbox-container { 61 | background-color: var(--chrome-secondary-background-color); 62 | } 63 | 64 | #main-window[titlepreface*="🦊 "] .titlebar-color { 65 | background-color: var(--toolbar-bgcolor); 66 | } 67 | 68 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header { 69 | visibility: collapse; 70 | } 71 | 72 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 73 | See the above repository for updates as well as full license text. */ 74 | 75 | /* Show sidebar only when the cursor is over it */ 76 | /* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ 77 | 78 | /* #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] { 79 | --uc-sidebar-width: 48px !important; 80 | --uc-sidebar-hover-width: 250px; 81 | --uc-autohide-sidebar-delay: 100ms; 82 | position: relative; 83 | min-width: var(--uc-sidebar-width) !important; 84 | width: var(--uc-sidebar-width) !important; 85 | max-width: var(--uc-sidebar-width) !important; 86 | z-index:1; 87 | } 88 | 89 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] { 90 | direction: rtl; 91 | } 92 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > *{ 93 | direction: ltr; 94 | } 95 | 96 | #sidebar-box[positionend]:-moz-locale-dir(rtl){ 97 | direction: ltr; 98 | } 99 | #sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ 100 | direction: rtl; 101 | } 102 | 103 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar { 104 | transition: min-width 115ms linear !important; 105 | min-width: var(--uc-sidebar-width) !important; 106 | will-change: min-width; 107 | } 108 | 109 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar { 110 | min-width: var(--uc-sidebar-hover-width) !important; 111 | transition: min-width 100ms linear var(--uc-autohide-sidebar-delay), box-shadow 500ms linear !important; 112 | box-shadow: 0 0 4px rgba(10,10,10, .5); 113 | clip-path: inset(0px -15px 0px -15px); 114 | } */ 115 | 116 | /* Add sidebar divider and give it background */ 117 | 118 | #sidebar, 119 | #sidebar-header { 120 | background-color: var(--toolbar-bgcolor) !important; 121 | border-inline: 1px solid var(--chrome-content-separator-color); 122 | border-inline-width: 0px 1px; 123 | } 124 | 125 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]) > :-moz-locale-dir(rtl), 126 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][positionend] > * { 127 | border-inline-width: 1px 0px; 128 | } 129 | 130 | /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ 131 | 132 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel { 133 | inset-inline: auto 0px !important; 134 | } 135 | #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([positionend]):hover ~ #appcontent #statuspanel-label { 136 | margin-inline: 0px !important; 137 | border-left-style: solid !important; 138 | } 139 | 140 | /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0 141 | See the above repository for updates as well as full license text. */ 142 | 143 | /* #PersonalToolbar{ */ 144 | /* --uc-bm-height: 20px; Might need to adjust if the toolbar has other buttons */ 145 | /* --uc-bm-padding: 7px; Vertical padding to be applied to bookmarks */ 146 | /* --uc-autohide-toolbar-delay: 600ms; The toolbar is hidden after 0.6s */ 147 | 148 | /* 0deg = "show" ; 90deg = "hide" ; Set the following to control when bookmarks are shown */ 149 | /* --uc-autohide-toolbar-focus-rotation: 0deg; urlbar is focused */ 150 | /* --uc-autohide-toolbar-hover-rotation: 0deg; cursor is over the toolbar area */ 151 | /* } */ 152 | 153 | :root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px; } 154 | :root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px } 155 | 156 | /* #PersonalToolbar:not([customizing]){ 157 | position: relative; 158 | margin-bottom: calc(0px - var(--uc-bm-height) - 2 * var(--uc-bm-padding)); 159 | transform: rotateX(90deg); 160 | transform-origin: top; 161 | transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important; 162 | z-index: 1; 163 | The following properties should allow the themes with trasparent toolbars to work 164 | background-color: transparent !important; 165 | background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling); 166 | --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)); 167 | background-position: top left,top left,var(--lwt-background-alignment,top left); 168 | background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y); 169 | background-image: var(--toolbar-bgimage), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important; 170 | } */ 171 | 172 | #PlacesToolbarItems > .bookmark-item, 173 | #OtherBookmarks, 174 | #PersonalToolbar > #import-button{ 175 | padding-block: var(--uc-bm-padding) !important; 176 | } 177 | 178 | #PlacesToolbarItems { 179 | display: flex !important; 180 | justify-content: center !important; 181 | } 182 | 183 | #PersonalToolbar > * { 184 | width: fit-content; 185 | } 186 | 187 | #nav-bar:focus-within + #PersonalToolbar{ 188 | transition-delay: 100ms !important; 189 | transform: rotateX(var(--uc-autohide-toolbar-focus-rotation,0)); 190 | } 191 | 192 | #navigator-toolbox:hover > #PersonalToolbar{ 193 | transition-delay: 100ms !important; 194 | transform: rotateX(var(--uc-autohide-toolbar-hover-rotation,0)); 195 | } 196 | 197 | #navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar { 198 | transform: rotateX(0); 199 | } 200 | 201 | .tabbrowser-tab { 202 | visibility: collapse; 203 | } 204 | #nav-bar { 205 | margin-top: -40px; 206 | margin-right: 150px; 207 | margin-left: 110px; 208 | } 209 | .titlebar-button { 210 | height: 40px; 211 | } 212 | 213 | 214 | /* Uncomment to enable compatibility for multi-row_bookmarks.css */ 215 | /* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup */ 216 | /* 217 | #PersonalToolbar:not([customizing]){ 218 | position: fixed; 219 | display: block; 220 | margin-bottom: 0px !important; 221 | } 222 | */ 223 | -------------------------------------------------------------------------------- /sidebery/sidebery.css: -------------------------------------------------------------------------------- 1 | /*Just the Sidebery themes on their own if you don't want to import all the options from it */ 2 | #root.root {--tabs-activated-shadow: 0 1px 4px -1px rgba(0,0,0,0.282), inset 0 0 0 1px rgb(165, 92, 251), inset 4px 0 0 0 #f388ffff;} 3 | #root.root {--tabs-border-radius: 5px;} 4 | #root.root {--tabs-activated-fg: #f388ffff;} 5 | #root.root {--tabs-activated-bg: #2a2a41ff;} 6 | 7 | #root.root {--tabs-height: 28px;} 8 | 9 | 10 | 11 | 12 | .Tab .title { 13 | font-size: 14px; 14 | } 15 | 16 | 17 | /*--Bolds the active tab text--*/ 18 | .Tab[data-active="true"] .title { 19 | font-weight: bold; 20 | font-size: 14px;} 21 | 22 | @media (prefers-color-scheme: light) { 23 | #root { 24 | /* Tab and PinnedTab height adjustment */ 25 | --tabs-height: 33px; 26 | --tabs-pinned-height: var(--tabs-height); 27 | /* Light Theme base settings */ 28 | } 29 | 30 | #root .Tab { 31 | --tabs-indent: 7px; 32 | } 33 | 34 | /* TABS */ 35 | 36 | .Tab .lvl-wrapper:after { 37 | display: none; 38 | } 39 | 40 | .Tab { 41 | margin: auto; 42 | width: 94%; 43 | border-radius: 3px; 44 | } 45 | 46 | .Tab .close>svg:hover { 47 | /* Styling the tab close button */ 48 | border-radius: 3px; 49 | background: var(--warn) !important; 50 | opacity: 80%; 51 | } 52 | 53 | .Tab .title { 54 | overflow: hidden !important; 55 | } 56 | 57 | /* PINNED TABS */ 58 | 59 | .PinnedDock { 60 | background-color: var(--bg) !important; 61 | } 62 | 63 | .PinnedTab { 64 | margin: 5px 0px 4px 6px; 65 | border-radius: 3px; 66 | } 67 | 68 | /* NAV BAR */ 69 | 70 | .NavigationBar { 71 | height: 41px !important; 72 | padding: 4.5px 0px 0px 4.5px !important; 73 | /*background-color: # !important;*/ 74 | margin-bottom: 5px; 75 | } 76 | 77 | .NavigationBar .panel-btn:hover { 78 | border-radius: 3px !important; 79 | background-color: var(--tabs-bg-hover) !important; 80 | } 81 | 82 | .NavigationBar .panel-btn[data-active="true"] { 83 | border-radius: 3px !important; 84 | background-color: var(--bg) !important; 85 | } 86 | 87 | .NavigationBar .panel-btn[data-active="true"]:hover { 88 | border-radius: 3px !important; 89 | background-color: var(--tabs-bg-hover) !important; 90 | } 91 | 92 | .NavigationBar .panel-btn>svg, 93 | .NavigationBar .panel-btn>img { 94 | fill: var(--panel-btn) !important; 95 | } 96 | 97 | /* SIDEBAR HACK PATCHES */ 98 | 99 | @media (max-width: 50px) { 100 | 101 | /* Fix to tab tree identation when minimised */ 102 | #root:not(:hover) .Tab { 103 | --tabs-indent: 0px; 104 | } 105 | 106 | .Tab[data-lvl]>div.lvl-wrapper { 107 | right: -2px; 108 | } 109 | 110 | .Tab { 111 | max-width: 34px; 112 | } 113 | 114 | .Tab .fav { 115 | z-index: 1; 116 | } 117 | 118 | .Tab .audio { 119 | z-index: 1; 120 | margin-left: -12px; 121 | height: 26px; 122 | } 123 | 124 | .Tab .title { 125 | display: none; 126 | } 127 | 128 | .PinnedTab { 129 | margin-left: 5px; 130 | } 131 | 132 | .NavigationBar .settings-btn { 133 | display: none; 134 | } 135 | } 136 | 137 | /* OPTIONAL */ 138 | 139 | /* Disable these two snippets below to make pinned tabs wrap when minimised */ 140 | /*.PinnedDock { 141 | flex-wrap: nowrap !important; 142 | } 143 | 144 | .PinnedTab { 145 | overflow: hidden !important; 146 | min-width: var(--tabs-pinned-width) !important; 147 | }*/ 148 | 149 | /* Optional patch for better tab notifications on pinned tabs */ 150 | 151 | .PinnedTab[data-audible] .fav>img, 152 | .PinnedTab[data-muted] .fav>img, 153 | .PinnedTab[data-loading] .fav>img { 154 | mask: none; 155 | } 156 | 157 | .PinnedTab .fav>img { 158 | mask: none; 159 | } 160 | 161 | .PinnedTab[data-updated="true"] .fav>img { 162 | 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); 163 | } 164 | 165 | .PinnedTab .audio-badge { 166 | top: 5px; 167 | } 168 | 169 | .PinnedTab .update-badge { 170 | opacity: 0; 171 | } 172 | 173 | .PinnedTab[data-updated="true"] .update-badge { 174 | opacity: 100; 175 | } 176 | 177 | } 178 | 179 | @media (prefers-color-scheme: dark) { 180 | #root { 181 | /* Tab and PinnedTab height adjustment */ 182 | --tabs-height: 33px; 183 | --tabs-pinned-height: var(--tabs-height); 184 | 185 | /* Dark Theme base settings */ 186 | 187 | } 188 | 189 | #root .Tab { 190 | --tabs-indent: 25px; 191 | } 192 | 193 | /* TABS */ 194 | 195 | .Tab .lvl-wrapper:after { 196 | display: none; 197 | } 198 | 199 | .Tab { 200 | margin: auto; 201 | width: 94%; 202 | border-radius: 3px; 203 | } 204 | 205 | .Tab .close>svg:hover { 206 | /* Styling the tab close button */ 207 | border-radius: 3px; 208 | background: var(--warn) !important; 209 | opacity: 80%; 210 | } 211 | 212 | .Tab .title { 213 | overflow: hidden !important; 214 | } 215 | 216 | /* PINNED TABS */ 217 | 218 | .PinnedDock { 219 | background-color: var(--bg) !important; 220 | } 221 | 222 | .PinnedTab { 223 | margin: 5px 0px 4px 6px; 224 | border-radius: 3px; 225 | } 226 | 227 | /* NAV BAR */ 228 | 229 | .NavigationBar { 230 | height: 41px !important; 231 | padding: 4.5px 0px 0px 4.5px !important; 232 | /*background-color: # !important;*/ 233 | margin-bottom: 5px; 234 | } 235 | 236 | .NavigationBar .panel-btn:hover { 237 | border-radius: 3px !important; 238 | 239 | } 240 | 241 | .NavigationBar .panel-btn[data-active="true"] { 242 | border-radius: 3px !important; 243 | 244 | } 245 | 246 | .NavigationBar .panel-btn[data-active="true"]:hover { 247 | border-radius: 3px !important; 248 | 249 | } 250 | 251 | .NavigationBar .panel-btn>svg, 252 | .NavigationBar .panel-btn>img { 253 | fill: var(--panel-btn) !important; 254 | } 255 | 256 | /* SIDEBAR HACK PATCHES */ 257 | 258 | @media (max-width: 50px) { 259 | 260 | /* Fix to tab tree identation when minimised */ 261 | #root:not(:hover) .Tab { 262 | --tabs-indent: 0px; 263 | } 264 | 265 | .Tab[data-lvl]>div.lvl-wrapper { 266 | right: -2px; 267 | } 268 | 269 | .Tab { 270 | max-width: 34px; 271 | } 272 | 273 | .Tab .fav { 274 | z-index: 1; 275 | } 276 | 277 | .Tab .audio { 278 | z-index: 1; 279 | margin-left: -12px; 280 | height: 26px; 281 | } 282 | 283 | .Tab .title { 284 | display: none; 285 | } 286 | 287 | .PinnedTab { 288 | margin-left: 5px; 289 | } 290 | 291 | .NavigationBar .settings-btn { 292 | display: none; 293 | } 294 | } 295 | 296 | /* OPTIONAL */ 297 | 298 | /* Disable these two snippets below to make pinned tabs wrap when minimised */ 299 | /*.PinnedDock { 300 | flex-wrap: nowrap !important; 301 | } 302 | 303 | .PinnedTab { 304 | overflow: hidden !important; 305 | min-width: var(--tabs-pinned-width) !important; 306 | }*/ 307 | 308 | /* Optional patch for better tab notifications on pinned tabs */ 309 | 310 | .PinnedTab[data-audible] .fav>img, 311 | .PinnedTab[data-muted] .fav>img, 312 | .PinnedTab[data-loading] .fav>img { 313 | mask: none; 314 | } 315 | 316 | .PinnedTab .fav>img { 317 | mask: none; 318 | } 319 | 320 | .PinnedTab[data-updated="true"] .fav>img { 321 | 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); 322 | } 323 | 324 | .PinnedTab .audio-badge { 325 | top: 5px; 326 | } 327 | 328 | .PinnedTab .update-badge { 329 | opacity: 0; 330 | } 331 | 332 | .PinnedTab[data-updated="true"] .update-badge { 333 | opacity: 100; 334 | } 335 | } 336 | 337 | .Tab .fav { 338 | order: 0; 339 | } 340 | 341 | 342 | .Tab .title { 343 | padding-left: 5px; 344 | } 345 | 346 | .Tab .close { 347 | right: px; 348 | } 349 | 350 | .Tab[data-discarded="true"] .body { 351 | opacity: 0.37; 352 | } 353 | .Tab[data-discarded="true"] > .body > .fav, 354 | .Tab[data-discarded="true"] > .body > .t-box { 355 | opacity: 1; 356 | } 357 | 358 | .Tab[data-discarded="true"] .title { 359 | color: rgba(255, 255, 255, 0.55);} 360 | 361 | .Tab[data-unread="true"] .title { 362 | font-style: italic;} -------------------------------------------------------------------------------- /sidebery/sidebery-data.json: -------------------------------------------------------------------------------- 1 | {"containers":{"firefox-container-1":{"id":"firefox-container-1","cookieStoreId":"firefox-container-1","name":"Personal","icon":"fingerprint","color":"blue","colorCode":"#37adff","proxified":false,"proxy":null,"reopenRulesActive":false,"reopenRules":[],"userAgentActive":false,"userAgent":""},"firefox-container-2":{"id":"firefox-container-2","cookieStoreId":"firefox-container-2","name":"Work","icon":"briefcase","color":"orange","colorCode":"#37adff","proxified":false,"proxy":null,"reopenRulesActive":false,"reopenRules":[],"userAgentActive":false,"userAgent":""},"firefox-container-3":{"id":"firefox-container-3","cookieStoreId":"firefox-container-3","name":"Banking","icon":"dollar","color":"green","colorCode":"#37adff","proxified":false,"proxy":null,"reopenRulesActive":false,"reopenRules":[],"userAgentActive":false,"userAgent":""},"firefox-container-4":{"id":"firefox-container-4","cookieStoreId":"firefox-container-4","name":"Shopping","icon":"cart","color":"pink","colorCode":"#37adff","proxified":false,"proxy":null,"reopenRulesActive":false,"reopenRules":[],"userAgentActive":false,"userAgent":""}},"settings":{"nativeScrollbars":false,"nativeScrollbarsThin":false,"nativeScrollbarsLeft":false,"selWinScreenshots":true,"updateSidebarTitle":true,"markWindow":true,"markWindowPreface":"🦊 ","ctxMenuNative":false,"ctxMenuRenderInact":true,"ctxMenuRenderIcons":true,"ctxMenuIgnoreContainers":"","navBarLayout":"horizontal","navBarInline":true,"navBarSide":"left","hideAddBtn":false,"hideSettingsBtn":false,"navBtnCount":true,"hideEmptyPanels":true,"hideDiscardedTabPanels":false,"navActTabsPanelLeftClickAction":"none","navActBookmarksPanelLeftClickAction":"none","navTabsPanelMidClickAction":"discard","navBookmarksPanelMidClickAction":"none","navSwitchPanelsWheel":true,"subPanelRecentlyClosedBar":true,"subPanelBookmarks":true,"subPanelHistory":true,"groupLayout":"grid","containersSortByName":false,"skipEmptyPanels":false,"dndTabAct":true,"dndTabActDelay":750,"dndTabActMod":"none","dndExp":"pointer","dndExpDelay":750,"dndExpMod":"none","dndOutside":"win","dndActTabFromLink":true,"dndActSearchTab":true,"dndMoveTabs":true,"dndMoveBookmarks":true,"searchBarMode":"dynamic","searchPanelSwitch":"any","searchBookmarksShortcut":"","searchHistoryShortcut":"","warnOnMultiTabClose":"collapsed","activateLastTabOnPanelSwitching":true,"activateLastTabOnPanelSwitchingLoadedOnly":true,"switchPanelAfterSwitchingTab":"always","tabRmBtn":"hover","activateAfterClosing":"next","activateAfterClosingStayInPanel":false,"activateAfterClosingGlobal":false,"activateAfterClosingNoFolded":true,"activateAfterClosingNoDiscarded":true,"askNewBookmarkPlace":true,"tabsRmUndoNote":true,"tabsUnreadMark":true,"tabsUpdateMark":"all","tabsUpdateMarkFirst":true,"tabsReloadLimit":5,"tabsReloadLimitNotif":true,"showNewTabBtns":true,"newTabBarPosition":"after_tabs","tabsPanelSwitchActMove":true,"tabsPanelSwitchActMoveAuto":true,"tabsUrlInTooltip":"stripped","newTabCtxReopen":false,"tabWarmupOnHover":true,"tabSwitchDelay":0,"moveNewTabPin":"start","moveNewTabParent":"last_child","moveNewTabParentActPanel":false,"moveNewTab":"end","moveNewTabActivePin":"start","pinnedTabsPosition":"panel","pinnedTabsList":false,"pinnedAutoGroup":false,"pinnedNoUnload":false,"tabsTree":true,"groupOnOpen":true,"tabsTreeLimit":"none","autoFoldTabs":false,"autoFoldTabsExcept":"none","autoExpandTabs":false,"autoExpandTabsOnNew":false,"rmChildTabs":"folded","tabsLvlDots":true,"discardFolded":true,"discardFoldedDelay":30,"discardFoldedDelayUnit":"min","tabsTreeBookmarks":true,"treeRmOutdent":"branch","ignoreFoldedParent":false,"colorizeTabs":false,"colorizeTabsSrc":"domain","colorizeTabsBranches":false,"colorizeTabsBranchesSrc":"domain","inheritCustomColor":true,"hideInact":false,"hideFoldedTabs":false,"hideFoldedParent":"none","nativeHighlight":false,"warnOnMultiBookmarkDelete":"collapsed","autoCloseBookmarks":false,"autoRemoveOther":false,"highlightOpenBookmarks":false,"activateOpenBookmarkTab":false,"showBookmarkLen":true,"bookmarksRmUndoNote":true,"loadBookmarksOnDemand":true,"pinOpenedBookmarksFolder":true,"oldBookmarksAfterSave":"ask","loadHistoryOnDemand":true,"fontSize":"m","animations":true,"animationSpeed":"fast","theme":"proton","density":"compact","colorScheme":"ff","sidebarCSS":true,"groupCSS":false,"snapNotify":true,"snapExcludePrivate":false,"snapInterval":1,"snapIntervalUnit":"day","snapLimit":365,"snapLimitUnit":"snap","snapAutoExport":true,"snapAutoExportType":"json","snapAutoExportPath":"Sidebery/snapshot-%Y.%M.%D-%h.%m.%s","snapMdFullTree":false,"hScrollAction":"none","navSwitchPanelsDelay":128,"scrollThroughTabs":"none","scrollThroughVisibleTabs":true,"scrollThroughTabsSkipDiscarded":true,"scrollThroughTabsExceptOverflow":true,"scrollThroughTabsCyclic":false,"scrollThroughTabsScrollArea":0,"autoMenuMultiSel":true,"multipleMiddleClose":false,"longClickDelay":500,"wheelThreshold":false,"wheelThresholdX":10,"wheelThresholdY":60,"tabDoubleClick":"edit_title","tabsSecondClickActPrev":false,"tabsSecondClickActPrevPanelOnly":false,"shiftSelAct":true,"activateOnMouseUp":false,"tabLongLeftClick":"none","tabLongRightClick":"none","tabMiddleClick":"close","tabMiddleClickCtrl":"discard","tabMiddleClickShift":"duplicate","tabCloseMiddleClick":"close","tabsPanelLeftClickAction":"none","tabsPanelDoubleClickAction":"tab","tabsPanelRightClickAction":"menu","tabsPanelMiddleClickAction":"tab","newTabMiddleClickAction":"new_child","bookmarksLeftClickAction":"open_in_act","bookmarksLeftClickActivate":false,"bookmarksLeftClickPos":"default","bookmarksMidClickAction":"open_in_new","bookmarksMidClickActivate":false,"bookmarksMidClickRemove":false,"bookmarksMidClickPos":"default","historyLeftClickAction":"open_in_act","historyLeftClickActivate":true,"historyLeftClickPos":"after","historyMidClickAction":"open_in_new","historyMidClickActivate":false,"historyMidClickPos":"default","syncName":"Vargur","syncSaveSettings":true,"syncSaveCtxMenu":true,"syncSaveStyles":true,"syncSaveKeybindings":true,"selectActiveTabFirst":true},"sidebar":{"panels":{"4KKGQiaPVaQo":{"type":2,"id":"4KKGQiaPVaQo","name":"Tabs","color":"yellow","iconSVG":"icon_flask","iconIMGSrc":"","iconIMG":"","lockedPanel":false,"skipOnSwitching":false,"noEmpty":false,"newTabCtx":"none","dropTabCtx":"none","moveRules":[],"moveExcludedTo":-1,"bookmarksFolderId":-1,"newTabBtns":[],"srcPanelConfig":null},"_9ynligCVDuc":{"type":2,"id":"_9ynligCVDuc","name":"Dev","color":"green","iconSVG":"icon_code","iconIMGSrc":"","iconIMG":"","lockedPanel":false,"skipOnSwitching":false,"noEmpty":false,"newTabCtx":"none","dropTabCtx":"none","moveRules":[],"moveExcludedTo":-1,"bookmarksFolderId":-1,"newTabBtns":[],"srcPanelConfig":null},"uj6AQ-uQhGUD":{"type":2,"id":"uj6AQ-uQhGUD","name":"D&D","color":"red","iconSVG":"icon_coffee","iconIMGSrc":"","iconIMG":"","lockedPanel":false,"skipOnSwitching":false,"noEmpty":false,"newTabCtx":"none","dropTabCtx":"none","moveRules":[],"moveExcludedTo":-1,"bookmarksFolderId":-1,"newTabBtns":[],"srcPanelConfig":null},"_xPe0oAxiNad":{"type":2,"id":"_xPe0oAxiNad","name":"Watch Later","color":"blue","iconSVG":"icon_play","iconIMGSrc":"","iconIMG":"","lockedPanel":false,"skipOnSwitching":false,"noEmpty":false,"newTabCtx":"none","dropTabCtx":"none","moveRules":[],"moveExcludedTo":-1,"bookmarksFolderId":-1,"newTabBtns":[],"srcPanelConfig":null},"NQWPQKr061ad":{"type":2,"id":"NQWPQKr061ad","name":"Writing","color":"orange","iconSVG":"icon_book","iconIMGSrc":"","iconIMG":"","lockedPanel":false,"skipOnSwitching":false,"noEmpty":false,"newTabCtx":"none","dropTabCtx":"none","moveRules":[],"moveExcludedTo":-1,"bookmarksFolderId":-1,"newTabBtns":[],"srcPanelConfig":null},"57Nn66zRKKAw":{"type":2,"id":"57Nn66zRKKAw","name":"Larp","color":"purple","iconSVG":"tree","iconIMGSrc":"","iconIMG":"","lockedPanel":false,"skipOnSwitching":false,"noEmpty":false,"newTabCtx":"none","dropTabCtx":"none","moveRules":[],"moveExcludedTo":-1,"bookmarksFolderId":-1,"newTabBtns":[],"srcPanelConfig":null}},"nav":["4KKGQiaPVaQo","_9ynligCVDuc","uj6AQ-uQhGUD","_xPe0oAxiNad","NQWPQKr061ad","57Nn66zRKKAw","add_tp","sp-0","create_snapshot","settings"]},"contextMenu":{"tabs":[{"opts":["undoRmTab","mute","discard","reload","bookmark"]},"separator-1","separator-5",{"name":"","opts":["pin","duplicate","colorizeTab"]},"moveToPanel","moveToNewPanel",{"name":"","opts":["group","flatten","moveToNewWin","moveToWin"]},"separator-2","copyTabsUrls","copyTabsTitles","editTabTitle","separator-6057607171256321","separator-4","urlConf","clearCookies"],"tabsPanel":[{"opts":["undoRmTab","muteAllAudibleTabs","reloadTabs","discardTabs"]},"separator-7","selectAllTabs","collapseInactiveBranches","closeTabsDuplicates","closeTabs","separator-8","bookmarkTabsPanel","restoreFromBookmarks","convertToBookmarksPanel","separator-9","openPanelConfig","hidePanel","removePanel"],"bookmarks":[{"name":"%menu.bookmark.open_in_sub_menu_name","opts":["openInNewWin","openInNewPrivWin","separator-9","openInPanel","openInNewPanel","separator-10","openInCtr"]},{"name":"%menu.bookmark.sort_sub_menu_name","opts":["sortByNameAscending","sortByNameDescending","sortByLinkAscending","sortByLinkDescending","sortByTimeAscending","sortByTimeDescending"]},"separator-5","createBookmark","createFolder","createSeparator","separator-8","openAsBookmarksPanel","openAsTabsPanel","separator-7","copyBookmarksUrls","copyBookmarksTitles","moveBookmarksTo","edit","delete"],"bookmarksPanel":["collapseAllFolders","switchViewMode","convertToTabsPanel","separator-9","unloadPanelType","openPanelConfig","hidePanel","removePanel"]},"sidebarCSS":"#root.root {--tabs-activated-shadow: 0 1px 4px -1px rgba(0,0,0,0.282), inset 0 0 0 1px rgb(165, 92, 251), inset 4px 0 0 0 #f388ffff;}\n#root.root {--tabs-border-radius: 5px;}\n#root.root {--tabs-activated-fg: #f388ffff;}\n#root.root {--tabs-activated-bg: #2a2a41ff;}\n\n#root.root {--tabs-height: 28px;}\n\n\n\n\n.Tab .title {\nfont-size: 14px;\n}\n\n\n/*--Bolds the active tab text--*/\n.Tab[data-active=\"true\"] .title {\n font-weight: bold;\n font-size: 14px;}\n\n@media (prefers-color-scheme: light) {\n #root {\n /* Tab and PinnedTab height adjustment */\n --tabs-height: 33px;\n --tabs-pinned-height: var(--tabs-height);\n /* Light Theme base settings */\n }\n\n #root .Tab {\n --tabs-indent: 7px;\n }\n\n /* TABS */\n\n .Tab .lvl-wrapper:after {\n display: none;\n }\n\n .Tab {\n margin: auto;\n width: 94%;\n border-radius: 3px;\n }\n\n .Tab .close>svg:hover {\n /* Styling the tab close button */\n border-radius: 3px;\n background: var(--warn) !important;\n opacity: 80%;\n }\n\n .Tab .title {\n overflow: hidden !important;\n }\n\n /* PINNED TABS */\n\n .PinnedDock {\n background-color: var(--bg) !important;\n }\n\n .PinnedTab {\n margin: 5px 0px 4px 6px;\n border-radius: 3px;\n }\n\n /* NAV BAR */\n\n .NavigationBar {\n height: 41px !important;\n padding: 4.5px 0px 0px 4.5px !important;\n /*background-color: # !important;*/\n margin-bottom: 5px;\n }\n\n .NavigationBar .panel-btn:hover {\n border-radius: 3px !important;\n background-color: var(--tabs-bg-hover) !important;\n }\n\n .NavigationBar .panel-btn[data-active=\"true\"] {\n border-radius: 3px !important;\n background-color: var(--bg) !important;\n }\n\n .NavigationBar .panel-btn[data-active=\"true\"]:hover {\n border-radius: 3px !important;\n background-color: var(--tabs-bg-hover) !important;\n }\n\n .NavigationBar .panel-btn>svg,\n .NavigationBar .panel-btn>img {\n fill: var(--panel-btn) !important;\n }\n\n /* SIDEBAR HACK PATCHES */\n\n @media (max-width: 50px) {\n\n /* Fix to tab tree identation when minimised */\n #root:not(:hover) .Tab {\n --tabs-indent: 0px;\n }\n\n .Tab[data-lvl]>div.lvl-wrapper {\n right: -2px;\n }\n\n .Tab {\n max-width: 34px;\n }\n\n .Tab .fav {\n z-index: 1;\n }\n\n .Tab .audio {\n z-index: 1;\n margin-left: -12px;\n height: 26px;\n }\n\n .Tab .title {\n display: none;\n }\n\n .PinnedTab {\n margin-left: 5px;\n }\n\n .NavigationBar .settings-btn {\n display: none;\n }\n }\n\n /* OPTIONAL */\n\n /* Disable these two snippets below to make pinned tabs wrap when minimised */\n /*.PinnedDock {\n\tflex-wrap: nowrap !important;\n}\n\n.PinnedTab {\n\toverflow: hidden !important;\n\tmin-width: var(--tabs-pinned-width) !important;\n}*/\n\n /* Optional patch for better tab notifications on pinned tabs */\n\n .PinnedTab[data-audible] .fav>img,\n .PinnedTab[data-muted] .fav>img,\n .PinnedTab[data-loading] .fav>img {\n mask: none;\n }\n\n .PinnedTab .fav>img {\n mask: none;\n }\n\n .PinnedTab[data-updated=\"true\"] .fav>img {\n 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);\n }\n\n .PinnedTab .audio-badge {\n top: 5px;\n }\n\n .PinnedTab .update-badge {\n opacity: 0;\n }\n\n .PinnedTab[data-updated=\"true\"] .update-badge {\n opacity: 100;\n }\n\n}\n\n@media (prefers-color-scheme: dark) {\n #root {\n /* Tab and PinnedTab height adjustment */\n --tabs-height: 33px;\n --tabs-pinned-height: var(--tabs-height);\n\n /* Dark Theme base settings */\n\n }\n\n #root .Tab {\n --tabs-indent: 25px;\n }\n\n /* TABS */\n\n .Tab .lvl-wrapper:after {\n display: none;\n }\n\n .Tab {\n margin: auto;\n width: 94%;\n border-radius: 3px;\n }\n\n .Tab .close>svg:hover {\n /* Styling the tab close button */\n border-radius: 3px;\n background: var(--warn) !important;\n opacity: 80%;\n }\n\n .Tab .title {\n overflow: hidden !important;\n }\n\n /* PINNED TABS */\n\n .PinnedDock {\n background-color: var(--bg) !important;\n }\n\n .PinnedTab {\n margin: 5px 0px 4px 6px;\n border-radius: 3px;\n }\n\n /* NAV BAR */\n\n .NavigationBar {\n height: 41px !important;\n padding: 4.5px 0px 0px 4.5px !important;\n /*background-color: # !important;*/\n margin-bottom: 5px;\n }\n\n .NavigationBar .panel-btn:hover {\n border-radius: 3px !important;\n\n }\n\n .NavigationBar .panel-btn[data-active=\"true\"] {\n border-radius: 3px !important;\n\n }\n\n .NavigationBar .panel-btn[data-active=\"true\"]:hover {\n border-radius: 3px !important;\n\n }\n\n .NavigationBar .panel-btn>svg,\n .NavigationBar .panel-btn>img {\n fill: var(--panel-btn) !important;\n }\n\n /* SIDEBAR HACK PATCHES */\n\n @media (max-width: 50px) {\n\n /* Fix to tab tree identation when minimised */\n #root:not(:hover) .Tab {\n --tabs-indent: 0px;\n }\n\n .Tab[data-lvl]>div.lvl-wrapper {\n right: -2px;\n }\n\n .Tab {\n max-width: 34px;\n }\n\n .Tab .fav {\n z-index: 1;\n }\n\n .Tab .audio {\n z-index: 1;\n margin-left: -12px;\n height: 26px;\n }\n\n .Tab .title {\n display: none;\n }\n\n .PinnedTab {\n margin-left: 5px;\n }\n\n .NavigationBar .settings-btn {\n display: none;\n }\n }\n\n /* OPTIONAL */\n\n /* Disable these two snippets below to make pinned tabs wrap when minimised */\n /*.PinnedDock {\n flex-wrap: nowrap !important;\n }\n \n .PinnedTab {\n overflow: hidden !important;\n min-width: var(--tabs-pinned-width) !important;\n }*/\n\n /* Optional patch for better tab notifications on pinned tabs */\n\n .PinnedTab[data-audible] .fav>img,\n .PinnedTab[data-muted] .fav>img,\n .PinnedTab[data-loading] .fav>img {\n mask: none;\n }\n\n .PinnedTab .fav>img {\n mask: none;\n }\n\n .PinnedTab[data-updated=\"true\"] .fav>img {\n 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);\n }\n\n .PinnedTab .audio-badge {\n top: 5px;\n }\n\n .PinnedTab .update-badge {\n opacity: 0;\n }\n\n .PinnedTab[data-updated=\"true\"] .update-badge {\n opacity: 100;\n }\n}\n\n.Tab .fav {\n order: 0;\n}\n\n\n.Tab .title {\n padding-left: 5px;\n}\n\n.Tab .close {\n right: px;\n}\n\n.Tab[data-discarded=\"true\"] .body {\n opacity: 0.37;\n}\n.Tab[data-discarded=\"true\"] > .body > .fav,\n.Tab[data-discarded=\"true\"] > .body > .t-box {\n opacity: 1;\n}\n\n.Tab[data-discarded=\"true\"] .title {\n color: rgba(255, 255, 255, 0.55);}\n\n.Tab[data-unread=\"true\"] .title {\n font-style: italic;}","ver":"5.0.0"} --------------------------------------------------------------------------------