Skip to content

Instantly share code, notes, and snippets.

@aembleton
Last active June 7, 2023 21:16
Show Gist options
  • Save aembleton/e956bd86bc563a1a2489f44fed9c8d7e to your computer and use it in GitHub Desktop.
Save aembleton/e956bd86bc563a1a2489f44fed9c8d7e to your computer and use it in GitHub Desktop.
Tree Style Tabs CSS styling
/*
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
:root {
--grey-10: #f9f9fa;
--grey-40: #b1b1b3;
--grey-90: #0c0c0d;
--toolbar-non-lwt-bgcolor: var(--grey-10);
--toolbar-non-lwt-textcolor: var(--grey-90);
--toolbar-non-lwt-inverted-textcolor: white;
--toolbar-non-lwt-border-color: var(--grey-40);
--tab-like-surface: var(--browser-bg-base, var(--toolbar-non-lwt-bgcolor));
--tab-surface-regular: var(--browser-bg-for-header-image, var(--tab-like-surface));
--tab-text-regular: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
--tab-text-inverted: var(--browser-bg-lighter, var(--toolbar-non-lwt-inverted-textcolor));
--tab-active-text: var(--browser-fg-active, var(--toolbar-non-lwt-textcolor));
--tab-active-text-inverted: var(--browser-bg-more-lighter, var(--toolbar-non-lwt-inverted-textcolor));
--tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--toolbar-non-lwt-border-color)));
--tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
}
:root.right,
:root.right #background {
background-position: right;
}
tab-item,
.after-tabs button {
background: transparent;
color: var(--tab-text);
text-shadow: var(--browser-textshadow-for-header-image, none);
}
tab-item.active,
tab-item.bundled-active,
tab-item:hover {
background: var(--tab-surface);
}
tab-item * {
color: var(--tab-text);
}
tab-item:not(.active):not(.bundled-active):hover,
.after-tabs button:hover {
--tab-surface: var(--tab-surface-hover);
}
tab-item.active,
tab-item.bundled-active {
--throbber-color: var(--throbber-color-active);
--tab-text: var(--tab-active-text);
--tab-text-inverted: var(--tab-active-text-inverted);
}
tab-item.active {
--tab-surface: var(--tab-surface-active);
}
tab-item.active:hover,
tab-item.bundled-active {
--tab-surface: var(--tab-surface-active-hover);
}
tab-item.bundled-active:hover {
--tab-surface: var(--tab-surface-hover);
}
tab-item:not(.active):not(.bundled-active):not(.highlighted) {
--throbber-color: var(--browser-loading-indicator, ThreeDDarkShadow);
}
tab-item .burster {
--throbber-color: var(--tab-loading-fill);
}
@media (prefers-color-scheme: dark) {
:root:not([color-scheme="system-color"]) {
--toolbar-non-lwt-bgcolor: #252526;
--toolbar-non-lwt-textcolor: #efefef;
--toolbar-non-lwt-inverted-textcolor: black;
--toolbar-non-lwt-border-color: #4a4a4d;
--tab-highlighted-highlight: white;
--tab-dropmarker: var(--toolbar-non-lwt-textcolor);
--tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-less-lighter, #29363f /* #252526 + #041119 (switched R and B from #191104), (parseInt('252526', 16) + parseInt('041119', 16)).toString(16) */));
--tab-surface-active: var(--browser-bg-active-for-header-image, var(--browser-bg-lighter, #314c5e /* #252526 + #0c2738 (switched R and B from #38270c), (parseInt('252526', 16) + parseInt('0c2738', 16)).toString(16) */));
--tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--browser-bg-more-lighter, #293b4e /* #252526 + #041628 (switched R and B from #281600 + #00004), (parseInt('252526', 16) + parseInt('041628', 16)).toString(16) */));
}
:root:not([color-scheme="system-color"])
tab-item:not(.active):not(.bundled-active):not(.highlighted) {
--throbber-color: var(--browser-loading-indicator, #afafaf);
}
/* Firefox applies dark colors to scrollbars in its in-content UI, when a
Dark theme is applied by the platform. On the other hand, dark colors
aren't applied to scrollbars in the sidebar also by default. Thus we need
to imitate dark scrollbar manually. See also:
https://github.com/piroor/treestyletab/issues/2373 */
#tabbar {
scrollbar-color: var(--in-content-button-background-active-mixed) var(--in-content-box-background);
}
}
tab-item,
.after-tabs button {
padding: 0.4em 0.25em;
}
.after-tabs button {
padding: 0em;
}
:root.left tab-item:not(.pinned),
:root.left .after-tabs button {
padding-right: 0.35em;
}
:root.right tab-item:not(.pinned),
:root.right .after-tabs button {
padding-left: 0.35em;
}
/* macOS workaround */
:root.platform-mac #tabbar:dir(rtl).overflow tab-item:not(.pinned) {
padding-left: var(--scrollbar-placeholder-size); /* it will be enough larger than the default padding */
}
:root.platform-mac #tabbar:dir(ltr).overflow tab-item:not(.pinned) {
padding-right: var(--scrollbar-placeholder-size); /* it will be enough larger than the default padding */
}
tab-item tab-label {
margin-left: 0.25em;
padding: 0 0 0.25em 0;
}
tab-item tab-favicon {
margin-bottom: 0.25em;
margin-top: 0.25em;
}
tab-item {
--tab-closebox-offset: calc((var(--tab-size) - 1em) / 2);
--tab-closebox-negative-offset: calc((1em - var(--tab-size)) / 2);
}
/* expand closebox to fill full height of tab */
tab-item tab-closebox {
margin-bottom: var(--tab-closebox-negative-offset);
margin-top: var(--tab-closebox-negative-offset);
padding: var(--tab-closebox-offset) 0.25em;
}
tab-item tab-closebox::before {
border-radius: 10%;
content: "";
display: inline-block;
height: calc(var(--svg-small-icon-size) + 0.2em);
margin-left: -0.1em;
margin-top: -0.1em;
width: calc(var(--svg-small-icon-size) + 0.2em);
position: absolute;
}
tab-item tab-closebox:hover::before {
background: var(--tab-text);
box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.3);
opacity: 0.1;
}
tab-item.active tab-closebox:hover::before {
background: var(--tab-text);
}
tab-item tab-closebox::after {
position: relative;
}
/* multiselection of tabs */
:root {
--multiselected-color: Highlight;
}
.mutiple-highlighted > tab-item.highlighted::after {
background: var(--multiselected-color);
bottom: 0;
content: " ";
display: block;
left: 0;
opacity: var(--multiselected-color-opacity);
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
.after-tabs button {
border: 0 none;
}
.mutiple-highlighted tab-item:not(.highlighted) {
opacity: 0.5;
}
.highlighter::before {
display: none !important;
}
#tabbar {
background-color:#181818;
}
.tab:hover {
background-color: #404040 !important;
color: rgba(207,207,207,1) !important;
}
.tab.active {
background: linear-gradient(to left, rgba(143,168,118,1.0), rgba(143,168,118,0.0) 80% );
}
.contextual-identity-marker {
top: auto !important;
left: 0em !important;
right: 0em !important;
bottom: 0 !important;
width: auto !important;
max-width: none !important;
height: calc(var(--favicon-size) / 4) !important;
mask-image: radial-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.0)70% );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment