Last active
March 25, 2025 20:25
-
-
Save the-codinator/23ae4e1e0dce18a273acc86e4f284f08 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* TST v3.8.19 | |
* | |
* Components: https://github.com/piroor/treestyletab/tree/trunk/webextensions/sidebar/components | |
* Base CSS: https://github.com/piroor/treestyletab/blob/trunk/webextensions/sidebar/styles/base.css | |
*/ | |
/* Note: select "No Decoration" under themes to apply these */ | |
/* Root variables */ | |
:root { | |
/* Some of these are declared by TST and correspondingly overridden here */ | |
--tab-size: 32px; | |
--tab-highlighter: red; /* Highlighter on the left of active tab */ | |
--tab-highlighter-size: 2px; | |
--tab-bar-bg-color: #424242; | |
--tab-active-bg-color: #242424; | |
--tab-hover-bg-color: #444444; | |
--tab-new-bg-color-inverted: #dadada; | |
--tab-text-unread-color: #ff4444; | |
--tab-text-default-color: white; | |
} | |
@media (prefers-color-scheme: light) { | |
:root { --tab-button-light-mode-inversion: 1; } | |
} | |
@media (prefers-color-scheme: dark) { | |
:root { --tab-button-light-mode-inversion: 0; } | |
} | |
/* Tab sidebar */ | |
#tabbar { | |
scrollbar-width: 0; /* Hide scrollbar */ | |
background: var(--tab-bar-bg-color); | |
border-right: groove 1px var(--tab-active-bg-color); | |
} | |
/* Tab design */ | |
tab-item tab-item-substance { | |
/* Overall tab box */ | |
background: black !important; | |
opacity: 1; | |
border: solid 1px #222222; | |
border-bottom: none; | |
height: var(--tab-size); | |
padding-right: 7% !important; | |
} | |
tab-item tab-item-substance tab-label { | |
/* Tab text */ | |
color: var(--tab-text-default-color); | |
margin-bottom: 4px; | |
} | |
tab-item.active tab-item-substance { | |
/* Active tab */ | |
background: var(--tab-active-bg-color) !important; | |
} | |
tab-item tab-item-substance:hover { | |
/* Tab hover */ | |
background: var(--tab-hover-bg-color) !important; | |
} | |
tab-item.unread tab-item-substance tab-label { | |
/* Unread tabs */ | |
color: var(--tab-text-unread-color) !important; | |
font-style: italic; | |
} | |
tab-item tab-item-substance tab-twisty { | |
/* Expand / collapse button */ | |
filter: invert(var(--tab-button-light-mode-inversion)); | |
margin-left: 1px; | |
} | |
tab-item tab-item-substance tab-favicon { | |
/* Tab icon */ | |
margin-left: 1px; | |
margin-right: 4px; | |
} | |
tab-item tab-item-substance tab-counter { | |
/* Tab sub-tree counter */ | |
color: var(--tab-text-default-color); | |
margin-bottom: 1%; | |
margin-right: -3%; | |
} | |
tab-item tab-item-substance tab-closebox { | |
/* Tab close button */ | |
filter: invert(var(--tab-button-light-mode-inversion)); | |
margin-left: 3%; | |
margin-right: -3%; | |
} | |
tab-item:not(:hover) tab-item-substance tab-closebox { | |
/* Only show close box on hover */ | |
display: none; | |
} | |
tab-item tab-item-substance tab-sound-button { | |
/* Sound button */ | |
filter: invert(var(--tab-button-light-mode-inversion)); | |
margin-left: 4%; | |
margin-right: -3%; | |
} | |
/* New tab section */ | |
.newtab-button { | |
/* New tab button */ | |
background: var(--tab-new-bg-color-inverted); | |
border: none; | |
border-top: 1px solid white; | |
filter: invert(1); | |
--svg-small-icon-size: 12px; /* override PLUS icon size for new tab */ | |
} | |
.newtab-action-selector-anchor { | |
/* New tab dropdown */ | |
border: none; | |
margin-top: -2px; | |
filter: invert(var(--tab-button-light-mode-inversion)); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Update for v4.1.3 - Almost everything works.
Known bugs:
Edit: This seems to be fixed in v4.1.4