These are my various configs for Firefox.
- Sideberrry custom style
- TreeStyleTabs custom style
- userChrome style
/* Styles */ | |
#root { | |
--bg: #0a1e20ff; | |
--tabs-bg-hover: #23545eff; | |
--tabs-activated-bg: #760392aa; | |
} | |
/* Change styling of pending (unloaded) tabs */ | |
.Tab[data-discarded] { | |
opacity: 0.75; | |
} | |
.Tab[data-discarded] .title { | |
font-style: italic; | |
} | |
/* Change styling of unread tabs */ | |
.Tab[data-unread] { | |
background-color: #e64b82aa; | |
} | |
.Tab[data-unread] .title { | |
font-weight: bold; | |
color: #5c1e34; | |
} |
/* Change styling of pending (unloaded) tabs */ | |
tab-item.discarded tab-item-substance { | |
opacity: 0.75; | |
} | |
tab-item.discarded tab-item-substance .label-content { | |
font-style: italic; | |
} | |
/* Change styling of unread tabs */ | |
tab-item.unread tab-item-substance { | |
background-color: #e64b82; | |
} | |
tab-item.unread tab-item-substance .label-content { | |
font-weight: bold; | |
color: #5c1e34; | |
} | |
/* Shorter tab height */ | |
tab-item { | |
--tab-size: 30px !important; | |
height: var(--tab-size); | |
} | |
/* Move scrollbar to the right */ | |
:root.left #tabbar { | |
direction: ltr; | |
overflow-x: hidden; | |
} |
/* Remove min and max width limitations from sidebars */ | |
#sidebar { | |
max-width: none !important; | |
min-width: 0px !important; | |
} | |
/* You can modify the sidebar-box selector to only target a specific sidebar as below: | |
* #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] | |
* | |
* Some sidebar ids are: | |
* Sidebery: _3c078156-979c-498b-8990-85f7987dd929_-sidebar-action | |
* Tree Style Tab: treestyletab_piro_sakura_ne_jp-sidebar-action | |
*/ | |
/* Hide splitter which is the part separating sidebar from rest of the content */ | |
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter { | |
display: none !important; | |
} | |
/* Hide sidebar header. */ | |
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { | |
visibility: collapse; | |
} | |
/* Shrink sidebar until hovered */ | |
:root { | |
--sidebar-collapsed-width: 40px; | |
--sidebar-expanded-width: 300px; | |
} | |
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) { | |
min-width: var(--sidebar-expanded-width) !important; | |
max-width: none !important; | |
} | |
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar { | |
min-width: var(--sidebar-expanded-width) !important; | |
max-width: var(--sidebar-expanded-width) !important; | |
z-index: 1; | |
} | |
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] { | |
overflow: hidden !important; | |
position: relative !important; | |
transition: all 100ms !important; | |
min-width: var(--sidebar-collapsed-width) !important; | |
max-width: var(--sidebar-collapsed-width) !important; | |
} | |
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover { | |
overflow: hidden !important; | |
transition: all 200ms !important; | |
min-width: var(--sidebar-expanded-width) !important; | |
max-width: var(--sidebar-expanded-width) !important; | |
margin-right: calc((var(--sidebar-expanded-width) - var(--sidebar-collapsed-width)) * -1) !important; | |
z-index: 1; | |
} | |
/* | |
* Hide entire title bar when Sidebery is active (also hides the window control buttons) | |
* Set Sidebery settings > Help > Preface value to the same value as used for titlepreface. | |
*/ | |
#main-window[titlepreface*="[Sidebery] "] #TabsToolbar { | |
visibility: collapse !important; | |
} |