Skip to content

Instantly share code, notes, and snippets.

@mochaaP

mochaaP/tree-style-tabs.css

Last active September 13, 2022 16:18
Show Gist options
  • Save mochaaP/06b607aa5c4197db4b2786e5a0db28a3 to your computer and use it in GitHub Desktop.
Save mochaaP/06b607aa5c4197db4b2786e5a0db28a3 to your computer and use it in GitHub Desktop.
Download ZIP
Firefox Snippets
Raw
tree-style-tabs.css
/* Less visible tab dividers.
A black border with a very low alpha slightly darkens any color. */
tab-item-substance {
border: solid 1px #00000012;
}
/* Change styling of pending (unloaded) tabs */
tab-item.discarded tab-item-substance {
opacity: 0.75;
}
tab-item.discarded .label-content {
text-decoration: line-through;
}
tab-item tab-twisty {
margin-right: -1em;
opacity: 0 !important;
position: relative;
z-index: 10000;
}
#tabbar tab-item tab-item-substance:not(:hover) tab-closebox {
display: none;
}
/* Center the new tab sign in collapsed state. */
.newtab-button{
padding-left: 0.48em !important;
}
/* Hide sound playing/muted button. */
.sound-button::before {
display: none !important;
}
/* Adjust style for tab that has sound playing. */
tab-item.sound-playing .favicon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
background: #FFFFFF;
animation: pulse 2s ease-out 0s infinite;
z-index: -1;
opacity: 0;
}
/* Adjust style for tab that is muted. */
tab-item.muted {
opacity: 0.5;
}
/* Better alignment of Favicons when collapsed */
tab-item[data-level][data-level="0"] tab-item-substance {
margin-left: 2% !important;
}
tab-item[data-level][data-level="1"] tab-item-substance {
margin-left: 4% !important;
}
tab-item[data-level][data-level="2"] tab-item-substance {
margin-left: 6% !important;
}
tab-item[data-level][data-level="3"] tab-item-substance {
margin-left: 8% !important;
}
tab-item[data-level][data-level="4"] tab-item-substance {
margin-left: 10% !important;
}
tab-item[data-level][data-level="5"] tab-item-substance {
margin-left: 12% !important;
}
tab-item[data-level][data-level="6"] tab-item-substance {
margin-left: 14% !important;
}
tab-item[data-level][data-level="7"] tab-item-substance {
margin-left: 16% !important;
}
#tabbar {
counter-reset: vtabs atabs tabs;
/* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
tab-item:not(.collapsed):not(.discarded) {
counter-increment: vtabs atabs tabs;
}
tab-item:not(.collapsed) {
counter-increment: vtabs tabs;
}
tab-item:not(.discarded) {
counter-increment: atabs tabs;
}
tab-item {
counter-increment: tabs;
}
tab-item .extra-items-container.behind {
z-index: unset !important;
}
tab-item .extra-items-container.behind::after {
background: var(--theme-colors-popup_highlight);
color: var(--theme-colors-popup_highlight_text);
content: counter(vtabs);
font-size: small;
left: 0.2em;
padding: 0.2em;
pointer-events: none;
position: absolute;
bottom: 0.2em;
font-family: monospace;
z-index: 1000;
}
tab-item .extra-items-container.behind::after {
opacity: 0.4;
transition: 0.2s;
}
tab-item tab-item-substance:hover .extra-items-container.behind::after {
opacity: 1;
}
tab-item.unread .extra-items-container.behind::after {
background-color: #bf616a;
opacity: 1;
animation: pulse .4s alternate ease-out 0s infinite;
}
@keyframes pulse {
from {
transform: scale(1);
}
to{
transform: scale(1.25);
}
}
:root.simulate-svg-context-fill .newtab-button::after {
content: var(--tab-count-text);
pointer-events: none;
width: 100%;
/* TST 2.4.0 - Fix for Issue #1664 */
background: transparent !important;
mask: none !important;
}
.newtab-button {
--tab-count-text: counter(atabs) "/" counter(tabs) " tabs";
}
Raw
userChrome.css
/* Tree Style Tabs */
tab-item tab-closebox::before {
border-radius: 10px; /* vary between 0 and 10 to make the background rounder */
}
/* I find these work well on my monitor (slightly darker than the normal tab color) but YMMV */
tab-item tab-closebox:hover::before {
background: #c8c8c8;
opacity: 1; /* defaults to 0.1 */
}
tab-item.active tab-closebox:hover::before {
background: #96afc8;
}
/* Hide main tabs toolbar */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
opacity: 0;
pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
visibility: collapse !important;
}
/* Sidebar min and max width removal */
#sidebar {
max-width: none !important;
min-width: 0px !important;
}
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
visibility: collapse;
}
#main-window[inFullscreen] #sidebar-box,
#main-window[inFullscreen] #sidebar-splitter {
display: none !important;
width: 0px !important;
}
/*Collapse in default state and add transition*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
overflow: hidden;
min-width: 40px;
max-width: 40px;
transition: all 0.2s ease;
/*border-right: 1px solid #0c0c0d;*/
z-index: 2;
}
/*Expand to 260px on hover*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
min-width: 260px !important;
max-width: 260px !important;
z-index: 1;
}
/*==============================================================================================*
+-----+-----+-----+-----+-----+-----+-----+
| █▀▀ | ▄▀█ | █▀▀ | █▀▀ | ▄▀█ | █▀▄ | █▀▀ |
| █▄▄ | █▀█ | ▄▄█ | █▄▄ | █▀█ | █▄▀ | ██▄ |
+-----+-----+-----+-----+-----+-----+-----+
Description: Minimalist, Simple, Keyboard Centered and based on SimpleFox. 🦊
What you get is a really simple responsive one-line layout using the new Proton UI.
> SimpleFox: https://github.com/migueravila/SimpleFox
Author: Andreas Grafen
(https://andreas.grafen.info)
Repository: https://github.com/andreasgrafen/ag.proton
Thank you Nick, Abdallah and Benyamin for all the great suggestions for improvements! ♡
Nick: https://github.com/nicksundermeyer)
Abdallah: https://github.com/HeiWiper)
Benyamin: https://github.com/benyaminl)
If you're looking for a **mouse-friendly** clone please check out Waterfall.
https://github.com/crambaud/waterfall
*==============================================================================================*/
/*---+---+---+---+---+---+
| C | O | N | F | I | G |
+---+---+---+---+---+---*/
/* Feel free to tweak the following
* config settingsto your own liking. */
/*---+---+---+---+---+---+---+
| C | O | L | O | U | R | S |
+---+---+---+---+---+---+---*/
:root {
--window-colour: #3B4252;
--secondary-colour: #5E81AC40;
--inverted-colour: #ECEFF4;
/* Containter Tab Colours */
--uc-identity-colour-blue: #5E81AC;
--uc-identity-colour-turquoise: #8FBCBB;
--uc-identity-colour-green: #A3BE8C;
--uc-identity-colour-yellow: #EBCB8B;
--uc-identity-colour-orange: #D08770;
--uc-identity-colour-red: #BF616A;
--uc-identity-colour-pink: #F78FB3;
--uc-identity-colour-purple: #B48EAD;
--uc-identity-colour-blue-muted: #5E81AC80;
--uc-identity-colour-turquoise-muted: #8FBCBB80;
--uc-identity-colour-green-muted: #A3BE8C80;
--uc-identity-colour-yellow-muted: #EBCB8B80;
--uc-identity-colour-orange-muted: #D0877080;
--uc-identity-colour-red-muted: #BF616A80;
--uc-identity-colour-pink-muted: #F78FB380;
--uc-identity-colour-purple-muted: #B48EAD80;
}
:root {
/* URL colour in URL bar suggestions */
--urlbar-popup-url-color: var(--uc-identity-color-blue) !important;
/*---+---+---+---+---+---+---+
| V | I | S | U | A | L | S |
+---+---+---+---+---+---+---*/
/* global border radius */
--uc-border-radius: 4px;
/* dynamic url bar width settings */
--uc-urlbar-width: clamp(200px, 100vw, 100vw);
/* dynamic tab width settings */
--uc-active-tab-width: clamp(100px, 20vw, 300px);
--uc-inactive-tab-width: clamp( 50px, 15vw, 200px);
/* if active always shows the tab close button */
--show-tab-close-button: none; /* DEFAULT: -moz-inline-box; */
/* if active only shows the tab close button on hover*/
--show-tab-close-button-hover: -moz-inline-box; /* DEFAULT: -moz-inline-box; */
/* adds left and right margin to the container-tabs indicator */
--container-tabs-indicator-margin: 10px;
}
/*---+---+---+---+---+---+---+
| B | U | T | T | O | N | S |
+---+---+---+---+---+---+---*/
#reload-button,
#back-button,
#forward-button { display: none !important; }
/* bookmark icon */
#star-button{ display: none !important; }
/* zoom indicator */
#urlbar-zoom-button { display: none !important; }
/* Make button small as Possible, hidden out of sight */
#PanelUI-button { margin-top: -5px; margin-bottom: 44px; }
#PanelUI-menu-button {
padding: 0px !important;
max-height: 1px;
list-style-image: none !important;
}
#PanelUI-menu-button .toolbarbutton-icon { width: 1px !important; }
#PanelUI-menu-button .toolbarbutton-badge-stack { padding: 0px !important; }
#reader-mode-button{ display: none !important; }
/* tracking protection shield icon */
/* #tracking-protection-icon-container { display: none !important; } */
/* #identity-box { display: none !important } /* hides encryption AND permission items */
/* #identity-permission-box { display: none !important; } /* only hides permission items */
/* e.g. playing indicator (secondary - not icon) */
.tab-secondary-label { display: none !important; }
#pageActionButton { display: none !important; }
#page-action-buttons { display: none !important; }
#urlbar-go-button { display: none !important; }
/*=============================================================================================*/
/*---+---+---+---+---+---+
| L | A | Y | O | U | T |
+---+---+---+---+---+---*/
/* No need to change anything below this comment.
* Just tweak it if you want to tweak the overall layout. c: */
:root {
--uc-theme-colour: var(--window-colour, var(--toolbar-bgcolor));
--uc-hover-colour: #434C5E;
--uc-inverted-colour: var(--inverted-colour, var(--toolbar-color));
--button-bgcolor: var(--uc-theme-colour) !important;
--button-hover-bgcolor: var(--uc-hover-colour) !important;
--button-active-bgcolor: var(--uc-hover-colour) !important;
--toolbarbutton-border-radius: var(--uc-border-radius) !important;
--tab-border-radius: var(--uc-border-radius) !important;
--lwt-text-color: var(--uc-inverted-colour) !important;
--lwt-tab-text: var(--uc-inverted-colour) !important;
--arrowpanel-border-radius: var(--uc-border-radius) !important;
--tab-block-margin: 2px !important;
}
window,
#main-window,
#toolbar-menubar,
#TabsToolbar,
#PersonalToolbar,
#navigator-toolbox,
#sidebar-box,
#nav-bar {
-moz-appearance: none !important;
border: none !important;
box-shadow: none !important;
background: var(--uc-theme-colour) !important;
}
/* grey out ccons inside the toolbar to make it
* more aligned with the Black & White colour look */
#PersonalToolbar toolbarbutton:not(:hover),
#bookmarks-toolbar-button:not(:hover) { filter: grayscale(1) !important; }
/* remove window control buttons */
.titlebar-buttonbox-container { display: none !important; }
/* remove "padding" left and right from tabs */
.titlebar-spacer { display: none !important; }
/* remove gap after pinned tabs */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0 !important; }
/* remove tab shadow */
.tabbrowser-tab
>.tab-stack
> .tab-background { box-shadow: none !important; }
/* tab background */
.tabbrowser-tab
> .tab-stack
> .tab-background { background: var(--uc-theme-colour) !important; }
/* active tab background */
.tabbrowser-tab[selected]
> .tab-stack
> .tab-background { background: var(--uc-hover-colour) !important; }
/* multi tab selection */
#tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { background: var(--uc-hover-colour) !important; }
/* tab close button options */
.tabbrowser-tab:not([pinned]) .tab-close-button { display: var(--show-tab-close-button) !important; }
.tabbrowser-tab:not([pinned]):hover .tab-close-button { display: var(--show-tab-close-button-hover) !important }
/* adaptive tab width */
.tabbrowser-tab[selected][fadein]:not([pinned]) { max-width: var(--uc-active-tab-width) !important; }
.tabbrowser-tab[fadein]:not([selected]):not([pinned]) { max-width: var(--uc-inactive-tab-width) !important; }
/* container tabs indicator */
.tabbrowser-tab[usercontextid]
> .tab-stack
> .tab-background
> .tab-context-line {
margin: -1px var(--container-tabs-indicator-margin) 0 var(--container-tabs-indicator-margin) !important;
height: 1px !important;
border-radius: var(--tab-border-radius) !important;
box-shadow: 0 1px 10px 1px var(--uc-identity-gradient-color) !important;
}
/* show favicon when media is playing but tab is hovered */
.tab-icon-image:not([pinned]) { opacity: 1 !important; }
/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tab-icon-overlay:not([crashed]),
.tab-icon-overlay[pinned][crashed][selected] {
top: 5px !important;
z-index: 1 !important;
padding: 1.5px !important;
inset-inline-end: -8px !important;
width: 16px !important; height: 16px !important;
border-radius: 10px !important;
}
/* style and position speaker icon */
.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
stroke: transparent !important;
background: transparent !important;
opacity: 1 !important; fill-opacity: 0.8 !important;
color: currentColor !important;
stroke: var(--uc-theme-colour) !important;
background-color: var(--uc-theme-colour) !important;
}
/* change the colours of the speaker icon on active tab to match tab colours */
.tabbrowser-tab[selected] .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
stroke: var(--uc-hover-colour) !important;
background-color: var(--uc-hover-colour) !important;
}
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { margin-inline-end: 9.5px !important; }
.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
top: 0 !important;
padding: 0 !important;
margin-inline-end: 5.5px !important;
inset-inline-end: 0 !important;
}
.tab-icon-overlay:not([crashed])[soundplaying]:hover,
.tab-icon-overlay:not([crashed])[muted]:hover,
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
color: currentColor !important;
stroke: var(--uc-inverted-colour) !important;
background-color: var(--uc-inverted-colour) !important;
fill-opacity: 0.95 !important;
}
.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[muted]:hover,
.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
color: currentColor !important;
stroke: var(--uc-inverted-colour) !important;
background-color: var(--uc-inverted-colour) !important;
fill-opacity: 0.95 !important;
}
/* speaker icon colour fix */
#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying],
#TabsToolbar .tab-icon-overlay:not([crashed])[muted],
#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked] { color: var(--uc-inverted-colour) !important; }
/* speaker icon colour fix on hover */
#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying]:hover,
#TabsToolbar .tab-icon-overlay:not([crashed])[muted]:hover,
#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { color: var(--uc-theme-colour) !important; }
#nav-bar {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* remove border below whole nav */
#navigator-toolbox { border-bottom: none !important; }
#urlbar,
#urlbar * {
outline: none !important;
box-shadow: none !important;
}
#urlbar-background { border: var(--uc-hover-colour) !important; }
#urlbar[focused="true"]
> #urlbar-background,
#urlbar:not([open])
> #urlbar-background { background: transparent !important; }
#urlbar[open]
> #urlbar-background { background: var(--uc-theme-colour) !important; }
.urlbarView-row:hover
> .urlbarView-row-inner,
.urlbarView-row[selected]
> .urlbarView-row-inner { background: var(--uc-hover-colour) !important; }
/* transition to oneline */
/*@media (min-width: 1000px) {*/
/* move tabs bar over */
#TabsToolbar { margin-left: var(--uc-urlbar-width) !important; }
/* move entire nav bar */
#nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 8px) calc(100vw - var(--uc-urlbar-width)) 0 0 !important; }
} /* end media query */
/* Container Tabs */
.identity-color-blue { --identity-tab-color: var(--uc-identity-color-blue) !important; --identity-icon-color: var(--uc-identity-color-blue) !important; --uc-identity-gradient-color: var(--uc-identity-color-blue-muted) !important; }
.identity-color-turquoise { --identity-tab-color: var(--uc-identity-color-turquoise) !important; --identity-icon-color: var(--uc-identity-color-turquoise) !important; --uc-identity-gradient-color: var(--uc-identity-color-turquoise-muted) !important; }
.identity-color-green { --identity-tab-color: var(--uc-identity-color-green) !important; --identity-icon-color: var(--uc-identity-color-green) !important; --uc-identity-gradient-color: var(--uc-identity-color-green-muted) !important; }
.identity-color-yellow { --identity-tab-color: var(--uc-identity-color-yellow) !important; --identity-icon-color: var(--uc-identity-color-yellow) !important; --uc-identity-gradient-color: var(--uc-identity-color-yellow-muted) !important; }
.identity-color-orange { --identity-tab-color: var(--uc-identity-color-orange) !important; --identity-icon-color: var(--uc-identity-color-orange) !important; --uc-identity-gradient-color: var(--uc-identity-color-orange-muted) !important; }
.identity-color-red { --identity-tab-color: var(--uc-identity-color-red) !important; --identity-icon-color: var(--uc-identity-color-red) !important; --uc-identity-gradient-color: var(--uc-identity-color-red-muted) !important; }
.identity-color-pink { --identity-tab-color: var(--uc-identity-color-pink) !important; --identity-icon-color: var(--uc-identity-color-pink) !important; --uc-identity-gradient-color: var(--uc-identity-color-pink-muted) !important; }
.identity-color-purple { --identity-tab-color: var(--uc-identity-color-purple) !important; --identity-icon-color: var(--uc-identity-color-purple) !important; --uc-identity-gradient-color: var(--uc-identity-color-purple-muted) !important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment