Added a new notice to the readme about prefs, and added a 'scrubber' area for moving the window around with CSD on the left side

This commit is contained in:
Macleod Sawyer 2022-02-23 18:59:37 -06:00
parent c0d23fc79e
commit bfae38f9ca
12 changed files with 376 additions and 269 deletions

0
.gitignore vendored Normal file
View file

7
custom.css Normal file
View file

@ -0,0 +1,7 @@
/* OTHER CUSTOM OPTIONS */
/* hide normal horizontal tab bar */
/* Change the Avatar size for the Firefox Account to what makes sense */
[label="Firefox Account"] #fxa-avatar-image {
scale: 1.25;
}

Binary file not shown.

View file

@ -0,0 +1,19 @@
/*
Extension: Bookmark Arrow
Description: Adds an arrow next to the bookmark folder.
*/
.bookmark-item[container] {
margin-right: 10px !important;
}
/* Add down arrow to folders on the bookmark bar */
.bookmark-item[container]::after {
content: "ˇ";
opacity: 0.55;
padding-left: 3.5px;
font-size: 23px;
display: inline-block;
position: absolute;
top: 6.9px;
}

143
extensions/sidebar.css Normal file
View file

@ -0,0 +1,143 @@
/*
Extension (Core): Sidebar
Description: This is the core implenration of the sidebar, used in drannex42's FirefoxSidebar.
Repository URL: https://github.com/drannex42/FirefoxSidebar
*/
#main-window #TabsToolbar {
visibility: collapse;
}
#sidebar-box > #browser,
#webextpanels-window{ background: transparent !important }
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
/*! display: none; */
}
/*Collapse in default state and add transition*/
#sidebar-box #sidebar:hover {
/*! overflow: visible !important; */
min-width: 40px;
max-width: 40px;
border-right: none !Important /* border-right: 1px solid var(--sidebar-border-color) !important; */
z-index: 2;
}
/*All other sidebar-boxes should be larger on hover*/
#sidebar-box:hover {
min-width: 350px !important;
max-width: 350px !important;
z-index: 1;
margin-right: -300px !important;
}
/*Tree Style Tabs && Sideberry specific sidebar width and size*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
min-width: 260px !important;
max-width: 260px !important;
z-index: 1;
margin-right: -210px !important;
}
#sidebar-header {
border: none !important;
border-right: 1px solid var(--sidebar-border-color);
background: var(--custom-sidebar-bg, --sidebar-background-color) !important;
}
#sidebar-close, #sidebar-title, #sidebar-switcher-arrow {
display: none;
border: none;
}
#sidebar-switcher-target {
border: none !important;
margin-left: 4.5px !important;
padding-top: 4px !important;
padding-bottom: 6px !important;
}
#sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) {
outline: none !important;
}
/* lock sidebar to height by doing the inverse margin of the toolbar element */
#sidebar-box {
background: var(--custom-sidebar-bg) !important;
z-index: 1000 !important;
position: relative !important;
margin-top: var(--menubar-height) !important;
border-right: none;
transition: none !important;
}
/* lock sidebar to specified width */
#sidebar-box {
min-width: var(--sidebar-width) !important;
max-width: var(--sidebar-width) !important;
overflow: hidden !important;
transition-property: width;
transition-duration: .25s;
transition-delay: .25s;
transition-timing-function: ease-in;
}
#sidebar-box::after {
background: var(--sidebar-border-color) !important;
margin-left: 207px;
z-index: 9999999;
position: absolute;
content: " ";
width: 1px;
height: 100%;
z-index: 999999999;
top: 0;
right: 0px;
}
#sidebar-box:hover:after {
top: 42px;
}
.sidebar-splitter {
opacity: 0 !important;
width: 0px !important;
border: none !Important;
--avatar-image-url: none !important;
}
#sidebarMenu-popup .subviewbutton {
min-width: 0px;
padding: 0;
margin: 0 !Important;
}
toolbarseparator {
display: none;
}
#sidebar { border-right: none !important; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;}
#nav-bar-customization-target {
z-index: 99999;
position: relative;
}
.browser-toolbar {
padding-left: var(--sidebar-width) !important;
position: relative !important;
}
#PersonalToolbar {
padding: 2px 5px !important;
padding-top: 0px !important;
margin-top: 0px !important;
padding-left: calc(var(--sidebar-width) + 6px) !important;
}

View file

@ -0,0 +1,64 @@
/*
Extension: Superbox Removal (and compaction)
Description: This removes the superbox and fixes some padding around the urlbar.
Repository URL: https://github.com/drannex42/FirefoxSidebar
*/
/* --- Prevent enlargement */
#urlbar[breakout-extend] {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important;
}
#urlbar[breakout-extend] #urlbar-input-container {
height: var(--urlbar-height) !important;
/*padding: 0px !important;*/
padding-block: 0px !important;
padding-inline: 0px !important;
}
.urlbarView-row {
padding: 0px 2px 0px 2px;
}
/* END Prevent enlargement --- */
/*/* --- Reduce row paddings to make them more compact */
.urlbarView-row {
padding: 2px 0px !important;
line-height: 1.2em !imortant;
margin: -1px;
margin-bottom:0px;
}
.urlbarView-row-inner {
padding-bottom: 6px !important;
}
.urlbarView {
margin: 0px !important;
width: 100% !important;
}
/* END Reduce row paddings to make them more compact --- */
/* Disable Urlbar Animation */
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
animation-name: none !important;
animation: none !important;
}
/* --- More compact "Search with Google" rows */
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
min-height: auto !important;
width: auto !important;
}
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
margin-bottom: -1px;
}
/* END More compact "Search with Google" rows --- */
/* Remove active border on the addressbar when in focus */
#nav-bar{ --toolbar-field-focus-border-color: #ccc }
/* Remove box shadow on address bar */
#urlbar-background, #searchbar {
box-shadow: none !important;
}

View file

@ -0,0 +1,49 @@
/*
Extension: Window Controls / Client Side Decorations (CSD)
Description: This brings the window controls into the main bar (where the address bar exists). Please see the prefs.css folder for switching the sides from left to right.
Repository URL: https://github.com/drannex42/FirefoxSidebar
Contributors: Mr-nUUb, Xanaxus, Drannex42
Issue URL: https://github.com/drannex42/FirefoxSidebar/issues/14
*/
/* allow the buttons to appear */
.browser-toolbar {
position: unset !important;
}
/* reserve space for buttons */
#nav-bar {
padding-right: var(--csd-margin-right, 10px) !important; /* The addition of the "10px" is so that there will be an area where you can grab and move the window */
margin-left: var(--csd-margin-left) !important;
}
/* move buttons next to menu button */
.titlebar-buttonbox-container {
visibility: visible !important;
position: fixed !important;
display: block;
top: 5px;
right: var(--csd-right, inherit);
left: var(--csd-left, inherit);
z-index: 10;
max-width: var(--csd-width);
}
/* fix ugly background color */
#navigator-toolbox {
background-color: transparent !important;
}
/* hide buttons in fullscreen mode (video player and F11) */
#main-window[inFullscreen="true"] .titlebar-buttonbox-container,
#main-window[inDOMFullscreen="true"] .titlebar-buttonbox-container {
/* display: none !important; */
visibility: hidden !important;
}
/* remove empty space when in fullscreen mode (F11) */
#main-window[inFullscreen="true"] #nav-bar {
margin-right: var(--csd-left) !important;
margin-left: var(--csd-right) !important;
}
/* END Client Side Decorations / Window Controls */

37
prefs.css Normal file
View file

@ -0,0 +1,37 @@
:root {
--sidebar-width: 50px;
--toolbar-height: -50px;
--menubar-height: -74px;
--sidebar-padding: calc(var(--sidebar-width) + 5px);
--toolbar-start-end-padding: 5px !important;
--toolbar-start-end-padding: 5px !important;
/* Enable this (remove the comment surrounding) if you want a custom sidebar header color, this shouldn't be needed anymore but might be! */
/* --custom-sidebar-bg: #000 !important; */
/* ====== Entension Settings ====== */
/* === Window Control / Client Side Display Settings === */
--csd-width: 100px;
/* If you are putting this on the left or right side uncomment the side preferences below and comment the other*/
/* Left Side:
Default: --csd-left: 50px; --csd-margin-left: 92px;
--csd-left: 50px;
--csd-margin-left: 92px;
*/
/* Right Side:
Defaults: --csd-right: 0px; --csd-margin-right: 95px;
*/
--csd-right: 0px;
--csd-margin-right: 95px;
/* === END: Window Control / Client Side Display Settings === */
}

View file

@ -14,6 +14,7 @@ Video of the extension in action: [https://i.imgur.com/HaLvkFc.mp4](https://i.im
- Support for tab groups - Support for tab groups
- Support for Tab Containers with visual identification - Support for Tab Containers with visual identification
- Pinned tabs (right click to close) - Pinned tabs (right click to close)
- Built in CSS Extension Management
## Updates ## Updates
@ -21,45 +22,56 @@ Release notes have migrated to [here](https://github.com/drannex42/FirefoxSideba
# How to use # How to use
To use my custom styles you will need to copy the userChrome.css to your firefox profile and then follow the Sideberry section below. Both are outlined below in how to do so. To use FirefoxSidebar you will need to clone this repo into your firefox profile as the `chrome` folder and then follow the Sideberry section below. Both are outlined below in how to do so.
## 1. Sideberry ## 1. userChrome.css
Add the sideberry-data-*.json file to your Sideberry addon by using the 'import' section under 'Help'. Follow the instructions for adding this repository to your Firefox Profile.
1. Navigate to `about:profiles` in your address bar
2. Click on the 'open root folder` button for your current profile
3. Open this folder in your terminal
4. Clone this repo with the following command: `git clone https://github.com/drannex42/FirefoxSidebar.git "chrome"`
5. InFfirefox navigate to `about:config` in your address bar
6. change the characteristic `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`
7. Restart Firefox
You could skip the clone step entirely if you manually add the FirefoxSidebar files to the "chrome" folder in your Firefox Profile (you will need to make a `chrome` folder if it doesn't exist!).
Visit [userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) if you are confused or have any questions.
## 2. Sideberry
Load the `sideberry-data.json` file into your Sideberry addon by using the 'import' section under 'Help'.
If you dislike any of the theme presets for dark or light themes, or you have a particular color scheme in mind then navigate to Sideberry Settings > Style Editor (found at the end of the settings sidebar). The preference is to replace the values in the right panel, not in the theme editor to the left - this way you can easily update to newer versions in the future. If you dislike any of the theme presets for dark or light themes, or you have a particular color scheme in mind then navigate to Sideberry Settings > Style Editor (found at the end of the settings sidebar). The preference is to replace the values in the right panel, not in the theme editor to the left - this way you can easily update to newer versions in the future.
To change the color: ### Extensions
**--tabs-font** :: Changes the default font (uses system font by default) to change the font size. All extensions can be found in `/extensions`.
- I recommend changing it via Sideberry Settings > Appearance > Font Size
- default: 1rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
**--tabs-fg** :: Changes the tabs text color In version 2022.02.23 we broke up the components into extensions using css imports. This makes adding and removing features incredibly easy.
- default: #000
**--tabs-bg-hover** :: Changes the hover background color for tabs **The following extensions are added:**
- default: #dedddaff
**--tabs-activated-bg** :: This is the active tab background color - [Window Controls / Client Side Decorations (CSD)](/extensions/window_controls.css)
- default: #fff - This adds the window controls to be inline with your address bar.
- [Superbox Removal](/extensions/superbox_removal.css)
- This removes the superbox and fixes the address bar padding.
- [Bookmark Arrows](/extensions/bookmark_arrow.css)
- This adds a nice little arrow next to your bookmark folders.
**--tabs-activated-shadow** :: Changes the active tabs shadow color ## User Settings
- default: rgba(0,0,0,0.15);
## 2. userChrome.css Please backup the `prefs.css` and the `custom.css` files before updating to a new versionof FirefoxSidebar. There may be new additions to these files, so you will need to re-add your preferencess to the file accordingly. These files should be updated *far less* than the other files, but just to make sure please save them.
Follow the instructions for adding a userChrome.css file to your Firefox Profile. ### Preferences
- Navigate to `[about:profiles]` in your address bar There are a number of preferences you can enable or disable in the `prefs.css` file. There are examples and descriptions of the different preferences within that file.
- Click on the 'open root folder` button for your current profile
- Create a 'chrome' folder (all lowercase)
- Add the userChrome.css file to that folder
- In firefox navigate to `[about:config]` in your address bar
- change the characteristic `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`
- Restart Firefox
- Visit [userchrome.org](https://www.userchrome.org/how-create-userchrome-css.html) if you are confused or have any questions.
### Custom Extensions
For ease of use I suggest using the `custom.css` file to for your personal tweaks.
### If you use FF without the bookmarks bar ### If you use FF without the bookmarks bar
@ -67,7 +79,7 @@ Then the sidebar switcher will be missing, you need to add this to your userChro
``` ```
#sidebar-box { #sidebar-box {
--menubar-height: -40px !important; --menubar-height: -42px !important;
} }
``` ```

View file

@ -1,251 +1,27 @@
/* /*
Title: Drannex42's Personal userChrome.css for Firefox Title: Drannex42's FirefoxSidebar / Vertical Tabs
Description: This is my personal userChrome for Firefox, I specifically clean up the interface, change the folder icon to Vivaldi's (much better) and reduce padding in some areas, and add some in others. This overall creates a much more streamlined interface. Description: Vertical tab design for Firefox with dynamic indentation:: Sideberry and TreeStyleTabs (Legacy) themes available!
Features: Streamlines interface, folder icon replacement, works best with my custom Tree Style Tabs interface (check it out! treestyletabs.css in the /firefox/ directory), removes tab bar. Repository URL: https://github.com/drannex42/FirefoxSidebar
Version: 12022.01.11 :: Fixed sidebar header, improved borders, improved variables, increased padding for alignment. This pares with the same version sideberry update. Version: 12022.02.23 :: Implemented an extension system, and seperated different components into their own files.
*/ */
:root { /* Preferences / Settings ::
--sidebar-width: 50px; Use this file to set your preferences (left or right window controls, colors, margins, this will save them in one place for easier future updating
--toolbar-height: -50px; */
--menubar-height: -74px; @import url('./prefs.css');
--sidebar-padding: calc(var(--sidebar-width) + 5px);
--toolbar-start-end-padding: 5px !important;
--toolbar-start-end-padding: 5px !important;
/* Enable this (remove the comment surrounding) if you want a custom sidebar header color, this shouldn't be needed anymore but might be! */ /* Sidebar::
/* --custom-sidebar-bg: #000 !important; */ This file is for the sidebar implementation
} */
@import url('./extensions/sidebar.css');
/* Extensions
To enable or disable specific extensions just comment/uncomment the line below
*/
#main-window #TabsToolbar { @import url('./extensions/window_controls.css');
visibility: collapse; @import url('./extensions/bookmark_arrow.css');
} @import url('./extensions/superbox_removal.css');
#sidebar-box > #browser,
#webextpanels-window{ background: transparent !important }
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
/*! display: none; */
}
/*Collapse in default state and add transition*/
#sidebar-box #sidebar:hover {
/*! overflow: visible !important; */
min-width: 40px;
max-width: 40px;
border-right: none !Important /* border-right: 1px solid var(--sidebar-border-color) !important; */
z-index: 2;
}
/*All other sidebar-boxes should be larger on hover*/
#sidebar-box:hover {
min-width: 350px !important;
max-width: 350px !important;
z-index: 1;
margin-right: -300px !important;
}
/*Tree Style Tabs && Sideberry specific sidebar width and size*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
min-width: 260px !important;
max-width: 260px !important;
z-index: 1;
margin-right: -210px !important;
}
#sidebar-header {
border: none !important;
border-right: 1px solid var(--sidebar-border-color);
background: var(--custom-sidebar-bg, --sidebar-background-color) !important;
}
#sidebar-close, #sidebar-title, #sidebar-switcher-arrow {
display: none;
border: none;
}
#sidebar-switcher-target {
border: none !important;
margin-left: 4.5px !important;
padding-top: 4px !important;
padding-bottom: 6px !important;
}
#sidebar-switcher-target:focus-visible:not(:hover, [open]), #sidebar-close:focus-visible:not(:hover, [open]) {
outline: none !important;
}
/* lock sidebar to height by doing the inverse margin of the toolbar element */
#sidebar-box {
background: var(--custom-sidebar-bg) !important;
z-index: 1000 !important;
position: relative !important;
margin-top: var(--menubar-height) !important;
border-right: none;
transition: none !important;
}
/* lock sidebar to specified width */
#sidebar-box {
min-width: var(--sidebar-width) !important;
max-width: var(--sidebar-width) !important;
overflow: hidden !important;
transition-property: width;
transition-duration: .25s;
transition-delay: .25s;
transition-timing-function: ease-in;
}
#sidebar-box::after {
background: var(--sidebar-border-color) !important;
margin-left: 207px;
z-index: 9999999;
position: absolute;
content: " ";
width: 1px;
height: 100%;
z-index: 999999999;
top: 0;
right: 0px;
}
#sidebar-box:hover:after {
top: 42px;
}
.sidebar-splitter {
opacity: 0 !important;
width: 0px !important;
border: none !Important;
--avatar-image-url: none !important;
}
#sidebarMenu-popup .subviewbutton {
min-width: 0px;
padding: 0;
margin: 0 !Important;
}
toolbarseparator {
display: none;
}
#sidebar { border-right: none !important; overflow: hidden;width: 50px !important;min-width: 50px !important;width: 100% !important;}
#nav-bar-customization-target {
z-index: 99999;
position: relative;
}
.browser-toolbar {
padding-left: var(--sidebar-width) !important;
position: relative !important;
}
#PersonalToolbar {
padding: 2px 5px !important;
padding-top: 0px !important;
margin-top: 0px !important;
padding-left: calc(var(--sidebar-width) + 6px) !important;
}
/* OTHER CUSTOM OPTIONS */
/* hide normal horizontal tab bar */
/* --- Prevent enlargement */
#urlbar[breakout-extend] {
top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
width: 100% !important;
}
#urlbar[breakout-extend] #urlbar-input-container {
height: var(--urlbar-height) !important;
/*padding: 0px !important;*/
padding-block: 0px !important;
padding-inline: 0px !important;
}
.urlbarView-row {
padding: 0px 2px 0px 2px;
}
/* END Prevent enlargement --- */
/*/* --- Reduce row paddings to make them more compact */
.urlbarView-row {
padding: 2px 0px !important;
line-height: 1.2em !imortant;
margin: -1px;
margin-bottom:0px;
}
.urlbarView-row-inner {
padding-bottom: 6px !important;
}
.urlbarView {
margin: 0px !important;
width: 100% !important;
}
/* END Reduce row paddings to make them more compact --- */
/* Disable Urlbar Animation */
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
animation-name: none !important;
animation: none !important;
}
/* --- More compact "Search with Google" rows */
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
min-height: auto !important;
width: auto !important;
}
.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
margin-bottom: -1px;
}
/* END More compact "Search with Google" rows --- */
/* Remove active border on the addressbar when in focus */
#nav-bar{ --toolbar-field-focus-border-color: #ccc }
/* Remove box shadow on address bar */
#urlbar-background, #searchbar {
box-shadow: none !important;
}
/* Change Bookmark Folder Icon to the one Vivialdi uses */
.bookmark-item[container] {
list-style-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi4zNTcxNyAzLjM2MDc1QzIuMTMzMjMgMy41ODY5MyAyLjAwNTE1IDMuODkyMjEgMiA0LjIxMjAzVjExLjc4NzJDMS45OTQ0MSAxMS45NDc5IDIuMDIxNjMgMTIuMTA4MSAyLjA3OTk2IDEyLjI1NzdDMi4xMzgyOCAxMi40MDczIDIuMjI2NDggMTIuNTQzMSAyLjMzOTA0IDEyLjY1NjhDMi40NTE2IDEyLjc3MDUgMi41ODYxMyAxMi44NTk2IDIuNzM0MjUgMTIuOTE4NUMyLjg4MjM3IDEyLjk3NzQgMy4wNDA5MSAxMy4wMDQ5IDMuMiAxMi45OTkzSDEyLjhDMTMuMTE2NyAxMi45OTQxIDEzLjQxODkgMTIuODY0NyAxMy42NDI4IDEyLjYzODVDMTMuODY2OCAxMi40MTIzIDEzLjk5NDggMTIuMTA3MSAxNCAxMS43ODcyTDE0IDZDMTQgNS41IDEzLjUgNSAxMyA1SDhMNi44IDNIMy4yQzIuODgzMzQgMy4wMDUyIDIuNTgxMSAzLjEzNDU3IDIuMzU3MTcgMy4zNjA3NVpNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjYgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIj48L3BhdGg+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi45OTkzOSAxMS44MjJMMyAxMS44MDQ2VjQuMjIzMThDMy4wMDIyMyA0LjE2MTcxIDMuMDI3NDEgNC4xMDUxMSAzLjA2Nzc5IDQuMDY0MzJDMy4xMDc3MyA0LjAyMzk4IDMuMTU5MjkgNC4wMDIwOCAzLjIxMTYxIDRINi4yNDU4OUw3LjUgNkgxMi44QzEyLjkxMDUgNiAxMyA2LjA4Nzk2IDEzIDYuMTk4NDJDMTMgNy4xMzEwNyAxMyAxMS4wNjM2IDEzIDExLjc3NjFDMTIuOTk3OCAxMS44Mzc2IDEyLjk3MjYgMTEuODk0MiAxMi45MzIyIDExLjkzNUMxMi44OTIzIDExLjk3NTMgMTIuODQwNyAxMS45OTcyIDEyLjc4ODQgMTEuOTk5M0gzLjE4MjI3TDMuMTY0NTUgMTEuOTk5OUMzLjE0NDA2IDEyLjAwMDYgMy4xMjM0MyAxMS45OTcxIDMuMTAzODMgMTEuOTg5M0MzLjA4NDIxIDExLjk4MTUgMy4wNjU2NyAxMS45Njk0IDMuMDQ5NjcgMTEuOTUzM0MzLjAzMzY0IDExLjkzNzEgMy4wMjA1MSAxMS45MTcxIDMuMDExNjUgMTEuODk0NEMzLjAwMjc4IDExLjg3MTcgMi45OTg1MyAxMS44NDcgMi45OTkzOSAxMS44MjJaIiBmaWxsLW9wYWNpdHk9IjAuMSI+PC9wYXRoPgo8L3N2Zz4=") !important;
padding-right: 15px !important;
margin-right: -1px !important;
}
/* Add down arrow to folders on the bookmark bar */
.bookmark-item[container]::after {
content: "ˇ";
opacity: 0.55;
padding-left: 3.5px;
font-size: 23px;
display: inline-block;
position: absolute;
top: 6.9px;
}
/* Change the Avatar size for the Firefox Account to what makes sense */
[label="Firefox Account"] #fxa-avatar-image {
scale: 1.175;
}
@import url('./custom.css');