User styles breakage at TST 3.8.5 (The last update skewed the custom styles)

[wvxwxvw]

The last update skewed the custom styles, the examples in the "Code snippets for custom style rules" do not work correctly. Specifically, the border of the tabs, the indentation of icons and text on the left, the indicator of the active tab, and so on. Photon theme, but largely self-customized.

[wvxwxvw]

I couldn't set it up quickly, I rolled back to the previous version. There is no time to spend half a day on configuration through debugging.

[afgks]

I'd also like to know how to remove the new grey border and the 2px gaps between tabs. They are very distracting.

Screenshots for comparison:
https://i.imgur.com/BHPaeJx.png
https://i.imgur.com/xWieBIs.png

[vitidev]

I'd also like to know how to remove the new grey border and the 2px gaps between tabs. They are very distracting.

I agree. I also want to remove them

upd: I'm not a css expert, but very distracting - so temp solution until a normal solution appears

tab-item-substance,
.after-tabs button,
.after-tabs [role="button"] {
  border: 0px solid var(--tab-border) !important;
}

[piroor]

If you paste your user CSS here, someone (include me) may advice where should be updated.

[DimitryAndric]

For me the appearance of the tabs changed greatly due to this update, even though I don't have any user styles, except for hiding the top bar:

#TabsToolbar, #sidebar-header {
	visibility: collapse !important;
}

Before (3.8.4):

After (3.8.5 or 3.8.6, didn't see any difference between them):

E.g. the virtual spacing is much wider now.

[afgks]

I think it is this that caused the problem:

/* Less visible tab dividers. 
   A black border with a very low alpha slightly darkens any color. */
tab-item {
  border: solid 1px #11111150;
}

After removing this part of the code, the gaps disappeared, but the tab dividers are still grey. How to change them to black?

[DimitryAndric]

E.g. the virtual spacing is much wider now.

Oops, apologies for that, I did have user styles but totally forgot about them (as they're quite deep in the TST settings). These were copied from TST snippets a very long time ago, and seem to have always kept working:

/* Show title of unread tabs with italic font */
.tab.unread .label {
  font-style: italic;
}

/* Add private browsing indicator per tab */
.tab.private-browsing .label:before {
  content: "🕶";
}

/* Make tabs smaller */
.tab {
  padding-top: 0px;
  padding-bottom: 0px;
}


/* regular width scrollbar */
#tabbar { scrollbar-width: auto; }

/* put scrollbar rightside */
:root.left #tabbar { direction: ltr; }

Are you now supposed to change .tab to something like tab-item.tab-item-substance ?

[DimitryAndric]

Okay, for me the following worked to get the narrower tab spacing:

/* Make tabs smaller */
tab-item-substance {
  padding-top: 0px;
  padding-bottom: 0px;
}

This made the end result look identical to my 3.8.4 screenshot. It seems the "Show title of unread tabs with italic font" item still works as-is.

[dotmacro]

Seemed like the "less visible tab dividers" code snippet was seemingly the main cause of the issue for me too. I fixed it by removing solid 1px from that snippet and adding a new snippet to specify tab height.

/* Less visible tab dividers. 
   A black border with a very low alpha slightly darkens any color. */
/* removed `solid 1px` 
	because it made the boarders too thick at 3.8.6 update */
.tab {
  border: #00000012; 
} 

/* tab height */
tab-item {
 --tab-size: 25px !important;
 height: var(--tab-size);
}

[piroor]

@DimitryAndric Yes it is the answer!

DOM structure on TST 3.8.4 and olders is:

<tab-item id="tab-17"
          data-level="0"
          class="tab discarded private-browsing unread"
          ...>
  <span class="background"></span>
  <tab-twisty class="twisty" role="button"></tab-twisty>
  <tab-favicon class="favicon" src="...">...</tab-favicon>
  <tab-label role="button" class="label" value="New Tab">...</tab-label>
  <tab-counter class="counter">0</tab-counter>
  <tab-sound-button class="sound-button" role="button"></tab-sound-button>
  <tab-closebox class="closebox" role="button" draggable="true"></tab-closebox>
  ...
</tab-item>

• Properties border, padding, and other basic appearances are applied to the tab-item.
• Tab states are stored as classes of tab-item, so you need to use tab-item.class1.class2.class3 (equivalent to .tab.class1.class2.class3) to specity tabs with states.
• tab-item > (element type)`` is effective for tab-twisty, tab-label`, and others.

On the other hand, DOM structure on TST 3.8.5 and later is:

<tab-item id="tab-17"
          data-level="0"
          class="tab discarded private-browsing unread"
          ...>
  <span class="extra-items-container indent"></span>
  <tab-item-substance draggable="true">
    <span class="background"></span>
    <tab-twisty class="twisty" role="button"></tab-twisty>
    <tab-favicon class="favicon" src="...">...</tab-favicon>
    <tab-label role="button" class="label" value="New Tab">...</tab-label>
    <tab-counter class="counter">0</tab-counter>
    <tab-sound-button class="sound-button" role="button"></tab-sound-button>
    <tab-closebox class="closebox" role="button" draggable="true"></tab-closebox>
    ...
  </tab-item-substance>
</tab-item>

• Properties border, padding, and other basic appearances are now applied to the tab-item-substance instead of tab-item.
• But tab-item-substance does not inherit classes of tab-item, so you still need to use tab-item.class1.class2.class3 (equivalent to .tab.class1.class2.class3) to specify tabs with states.
  • For example: tab-item.class1.class2.class3 tab-item-substance { (border, background, etc.) }
• tab-item > (element type) is now un-effective for tab-twisty, tab-label, and others.
  • Instead tab-item (element type) or tab-item > * > (element type) are effective.

[piroor]

For example, tab-item.unread { (border, color, etc.) } (equivalent to .tab.unread { (border, color, etc.) }) should be updated like tab-item.unread tab-item-substance { (border, color, etc.) } (equivalent to .tab.unread tab-item-substance { (border, color, etc.) }).

[piroor]

I've updated code snippets for TST 3.8.5 and later.
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules

[simobiggs]

It might be good to link to the DOM structure on the preferences page as is done with the snippets. Or perhaps even just put it on the snippets page. It's likely I just didn't look properly, but I had no idea what the DOM structure was apart from what I could infer from the code snippets.

[piroor]

OK, I've added a note.
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#for-version-20-and-later
For further inspection I recommend using the remote debugger.
https://github.com/piroor/treestyletab/wiki/How-to-inspect-tree-of-tabs#how-to-inspect-the-sidebar

[afgks]

Seemed like the "less visible tab dividers" code snippet was seemingly the main cause of the issue for me too. I fixed it by removing solid 1px from that snippet and adding a new snippet to specify tab height.

/* Less visible tab dividers. 
   A black border with a very low alpha slightly darkens any color. */
/* removed `solid 1px` 
	because it made the boarders too thick at 3.8.6 update */
.tab {
  border: #00000012; 
} 

I can't change the border colour for some reason.

[piroor]

This should be updated like following:

tab-item-substance {
  border: solid 1px #00000012;
}

(Please remind that border property requires border-style and border-width also.)

[afgks]

@afgks tab-item-substance { border: #00000012; } should work for you.

Hmm, it didn't work. All it did was remove the borders.

[Veyka]

I've been fiddling with my cobbled together CSS and have hit a wall, some guidence would be appreciated!
The background colour doesnt seem to be working as expected, and there are odd black borders between tabs.

:root {
  --colorA: #ecff6b;
  --colorB: #6affda;
  --colorC: #b4b4b4;
  --colorD: #5ceaff;
  --colorE: #514350;
  --colorF: #281f1a;
  --colorG: green;
  --tab-height: 30px;
  --font-size: 12px;
  background-color: var(--colorF);
}

:root.simulate-svg-context-fill .closebox::after {
  background: white;
}

:root.simulate-svg-context-fill .tab.active .closebox::after {
  background: black;
}

:root.simulate-svg-context-fill .tab:hover .closebox::after {
  background: black;
}

:root.simulate-svg-context-fill .tab.active .sound-button::after {
  background: black;
}

:root.simulate-svg-context-fill .tab:hover .sound-button::after {
  background: black;
}

.tab {
  background-color: var(--colorE);
  height: var(--tab-height);
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 2px solid var(--colorF);
}

.label {
  font-size: var(--font-size);
}

.tab .label {
  color: white;
}

.tab.active .label {
  color: black;
}

.tab .counter {
  color: var(--colorD);
}

.tab.active .twisty
{
  color: var(--colorG);
}

.tab.active {
  color: black;
  background-color: var(--colorA);
}

.tab.active:hover {
  background-color: var(--colorA);
}

.tab:hover .label {
  color: black;
}

.tab:hover, .tab:not(.active):hover {
  color: black;
  background-color: var(--colorB);
}

.tab.unread .label {
  font-style: italic;
}

.tab.discarded {
  color: var(--colorC);
  background-color: black;
  border-top: none;
  border-bottom: 1px solid black;
}

/* Change styling of the favicon of pending (unloaded) tabs */
.tab.discarded .favicon {
  opacity: 0.5 !important;
}

.tab.private-browsing .label:before {
  content: "🕶";
}
/*colour scrollbar */
:root.left #tabbar { scrollbar-color: dimgrey black; }

/* Tab Counter on New Tab button */
/* https://github.com/piroor/treestyletab/issues/1661 */

#tabbar {
  counter-reset: tabs;
}
.tab {
  counter-increment: tabs;
}

.newtab-button::before {
  content: counter(tabs) " tabs";
  pointer-events: none;
    
  position: absolute;
  left: 0.2em;

  /* TST 2.4.0 - Fix for Issue #1664 */
  background: transparent !important;
  mask: none !important;
}
/* Slide tab count away from selector */
:root.newtab-action-selectable.contextual-identity-selectable .newtab-button::after {
  transition: margin-left 0.1s;
}
:root.newtab-action-selectable.contextual-identity-selectable .newtab-action-selector-anchor.open ~ .newtab-button::after,
:root.newtab-action-selectable.contextual-identity-selectable .newtab-button-box:hover .newtab-button::after {
  margin-left: 20px;
}
.newtab-button::after {
  opacity: var(--button-opacity);
}
.newtab-button-box:hover .newtab-button::after {
  opacity: .989;
}

[piroor]

(Sorry intentional duplication for editing.)

I've tried to update your user styles. Please look at updated selectors around tab-item and tab-item-substance for the DOM structure on TST 3.8.5 and later.

:root {
  --colorA: #ecff6b;
  --colorB: #6affda;
  --colorC: #b4b4b4;
  --colorD: #5ceaff;
  --colorE: #514350;
  --colorF: #281f1a;
  --colorG: green;
  --tab-height: 30px;
  --font-size: 12px;
  background-color: var(--colorF);
}

:root.simulate-svg-context-fill tab-closebox::after {
  background: white;
}

:root.simulate-svg-context-fill tab-item.active tab-closebox::after {
  background: black;
}

:root.simulate-svg-context-fill tab-item tab-item-substance:hover tab-closebox::after {
  background: black;
}

:root.simulate-svg-context-fill tab-item.active tab-sound-button::after {
  background: black;
}

:root.simulate-svg-context-fill tab-item tab-item-substance:hover tab-sound-button::after {
  background: black;
}

tab-item {
  height: var(--tab-height);
}

tab-item-substance {
  background-color: var(--colorE);
  height: var(--tab-height);
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 2px solid var(--colorF);
}

tab-label {
  font-size: var(--font-size);
}

tab-item tab-label {
  color: white;
}

tab-item.active tab-label {
  color: black;
}

tab-item tab-counter {
  color: var(--colorD);
}

tab-item.active tab-twisty
{
  color: var(--colorG);
}

tab-item.active tab-item-substance {
  color: black;
  background-color: var(--colorA);
}

tab-item.active tab-item-substance:hover {
  background-color: var(--colorA);
}

tab-item tab-item-substance:hover tab-label {
  color: black;
}

tab-item tab-item-substance:hover,
tab-item:not(.active) tab-item-substance:hover {
  color: black;
  background-color: var(--colorB);
}

tab-item.unread tab-label {
  font-style: italic;
}

tab-item.discarded tab-item-substance {
  color: var(--colorC);
  background-color: black;
  border-top: none;
  border-bottom: 1px solid black;
}

/* Change styling of the favicon of pending (unloaded) tabs */
tab-item.discarded tab-favicon {
  opacity: 0.5 !important;
}

tab-item.private-browsing tab-label:before {
  content: "🕶";
}
/*colour scrollbar */
:root.left #tabbar { scrollbar-color: dimgrey black; }

/* Tab Counter on New Tab button */
/* https://github.com/piroor/treestyletab/issues/1661 */

#tabbar {
  counter-reset: tabs;
}
tab-item {
  counter-increment: tabs;
}

.newtab-button::before {
  content: counter(tabs) " tabs";
  pointer-events: none;
    
  position: absolute;
  left: 0.2em;

  /* TST 2.4.0 - Fix for Issue #1664 */
  background: transparent !important;
  mask: none !important;
}
/* Slide tab count away from selector */
:root.newtab-action-selectable.contextual-identity-selectable .newtab-button::after {
  transition: margin-left 0.1s;
}
:root.newtab-action-selectable.contextual-identity-selectable .newtab-action-selector-anchor.open ~ .newtab-button::after,
:root.newtab-action-selectable.contextual-identity-selectable .newtab-button-box:hover .newtab-button::after {
  margin-left: 20px;
}
.newtab-button::after {
  opacity: var(--button-opacity);
}
.newtab-button-box:hover .newtab-button::after {
  opacity: .989;
}

[Veyka]

I added a snippet from above and it now looks identical to how it did before.

tab-item-substance {
  border: solid 1px #00000012;
}

Thank you for the help, I really appreciate it.

[snw-0]

I use the "Full Auto-show/hide Theme" from the code snippets, with --thin-tab-width: 2px; and the following:
tab-highlighter { width: 4px; } tab-item.active { height: 52px !important; }

However, a couple of problems have cropped up since the update:

• My tabs used to be a solid color, but now there's this grey bar on active/hovered tabs, and it does not respect the height: 52px !important; on the active tab.
• The tab-highlighter does not appear at all.
• There's a weird delay on the animations, where the sidebar slides out and then the labels on indented tabs slide further out (this may have been the case before the update and I just didn't notice, but the other two are new)

Here is a gif showing these problems:

Thanks for any help you can offer!

[piroor]

(Sorry intentional duplication for editing.)

The highlighter is no longer visible with the "Proton" theme. I think you should use the "Photon" theme. And here is the updated version of your user styles:

.highlighter {
  --tab-highlighter-size: 4px;
}
tab-item.active tab-item-substance {
  height: 52px;
}

There's a weird delay on the animations, where the sidebar slides out and then the labels on indented tabs slide further out (this may have been the case before the update and I just didn't notice, but the other two are new)

Sorry it is uncontrollable via user styles. The delay depends on a hidden option collapseDuration (150 msec by default), it is changed via TST options => Development => All Configs => collapseDuration.

[snw-0]

Okay, with your information and some tinkering I managed to fix everything. Here is the result, in case it can help anyone else.

#tabbar {
    border: 0;
    overflow-y: scroll !important;
    margin-left: -17px !important;
    margin-top: -1px !important;
    scrollbar-width: auto; }

/* Hide .twisty and adjust margins so favicons have 7px on left. */
tab-item .twisty {
    visibility: hidden;
    margin-left: -13px;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
tab-item .label {
    margin-left: 7px;
}

/* Hide close buttons on tabs. */
tab-item .closebox {
    visibility: collapse;
}

tab-item:hover .closebox {
    visibility: initial;
}

/* Hide sound playing/muted button. */
.sound-button::before {
    display: none !important;
}

:root {
    background-color: #101010;
}

#tabbar {
    background: #101010;
    box-shadow: none !important;
}

tab-item tab-item-substance {
    box-shadow: none !important;
}

/* Adjust style for tab that has sound playing. */
tab-item.sound-playing tab-item-substance .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;
}

/* Indent subordinate tabs. We apply this to tab-item rather than tab-item-substance
because we want the whole background to be shifted.
This is a percentage of the sidebar width, so if you set them too high it will still be visible
in thin mode */
tab-item[data-level][data-level="0"] {
    margin-left: 0% !important;
}
tab-item[data-level][data-level="1"] {
    margin-left: 2% !important;
}
tab-item[data-level][data-level="2"] {
    margin-left: 4% !important;
}
tab-item[data-level][data-level="3"] {
    margin-left: 6% !important;
}
tab-item[data-level][data-level="4"] {
    margin-left: 8% !important;
}
tab-item[data-level][data-level="5"] {
    margin-left: 10% !important;
}
tab-item[data-level][data-level="6"] {
    margin-left: 12% !important;
}

tab-item {
    margin-top: 1px; /* 1px line between tabs. */
}

tab-item tab-item-substance {
    margin-left: 0% !important; /* This makes the substance part NOT inherit the above, so it isn't double-shifted */
    border: 0;
    --tab-size: 26px !important;
    height: var(--tab-size);
    background: none transparent; /* Hides the blue color on active tabs */
}

.highlighter {
    --tab-highlighter: #FF5500; /* It seems to default to being invisible */
    --tab-highlighter-size: 4px;
}

tab-item.active tab-item-substance {
    --tab-size: 52px !important;
}

[sdfg2]

There's a weird delay on the animations, where the sidebar slides out and then the labels on indented tabs slide further out (this may have been the case before the update and I just didn't notice, but the other two are new)

Sorry it is uncontrollable via user styles. The delay depends on a hidden option collapseDuration (150 msec by default), it is changed via TST options => Development => All Configs => collapseDuration.

I've set collapseDuration to 0 but I still get this delay. Has something else been introduced since this reply?

EDIT: It looks like the delay when unhovering is set to 0, but there's still a delay on hover.

[zekeblue]

I have managed to restore all of the appearance settings except for the sidebar background color. I had it gray and it is now white. I would also appreciate the code snippet for this if it is possible to restore. Thanks.

[piroor]

Please paste you user styles here for further advice.

[piroor]

@afgks Could you check my updated comment?

[afgks]

@afgks Could you check my updated comment?

It's working now, thank you! :D

[simobiggs]

Since updating, I've been finding the indentation per level is a bit more than I would like. Is there a way to adjust that with CSS? Previously I had some CSS copied like this:

/* Better alignment of Favicons when collapsed */
tab-item[data-level][data-level="0"] {
  margin-left: 2% !important;
}
tab-item[data-level][data-level="1"] {
  margin-left: 4% !important;
}
tab-item[data-level][data-level="2"] {
  margin-left: 6% !important;
}
tab-item[data-level][data-level="3"] {
  margin-left: 8% !important;
}
tab-item[data-level][data-level="4"] {
  margin-left: 10% !important;
}
tab-item[data-level][data-level="5"] {
  margin-left: 12% !important;
}
tab-item[data-level][data-level="6"] {
  margin-left: 14% !important;
}
tab-item[data-level][data-level="6"] {
  margin-left: 16% !important;
}

Putting a negative value (i.e. 4px) moves the indent level across, but the icon itself is a bit cut off. This could be related to other CSS either in userChrome or the extension. I'm basically using this

[irvinm]

@simobiggs you can probably just modify the margin-left calculation to fit your needs:

:root.left tab-item-substance {
	margin-left: calc(var(--tab-margin-left) + var(--tab-indent));
}

[simobiggs]

Thanks, didn't think I would need to play with the tab substance given the tab itself had margin applied.

For anyone else, here's what I ended up with:

/* Better alignment of Favicons when collapsed */
tab-item[data-level][data-level="0"] tab-item-substance {
  margin-left: 0px !important;
}
tab-item[data-level][data-level="1"] tab-item-substance {
  margin-left: 10% !important;
}
...

[irvinm]

@piroor using the Photon theme, it looks like the bottom tab border is covered by the extra-items-container due to the margin-bottom: -1px; which is needed to show a single line between tabs.

tab-item-substance, .after-tabs button, .after-tabs [role="button"] {
	border: 1px solid var(--tab-border);
	border-width: 1px 0;
	margin-bottom: -1px;
}

Original, no change:

Removing margin-bottom, can see bottom border but now not a single line between tabs:

Can you think of a way to maintain a visible border around the tab while maintaining a single line between tabs?

[irvinm]

I thought that maybe lowering the z-index of extra-items-container might solve this problem, but I think it is already lower than tab-item-substance.

[irvinm]

Separate but maybe related to borders and\or z-index ...

Using the updated CSS snippet for active tabs and adding the last statement to change the border, the bottom border is not shown even with making the z-index = 999.

/* Highlight active tab */
tab-item.active .background {
  background-color: var(--active-tab-background);
}
tab-item.active .label-content {
  font-weight: bold;
  font-size: 14px;
}
tab-item.active tab-twisty,
tab-item.active .label-content,
tab-item.active tab-counter {
  color: #fff;
}
tab-item.active tab-item-substance {
  border: solid 1px white;
  z-index: 999;
}

[piroor]

Thanks, the bottom border problem should be fixed with this commit: 5ef0e87

[wvxwxvw]

@irvinm
I figured out the rest. The only thing left is - I have the last tab without bottom a border, how can I draw it?
More precisely, not so. I, like you in the screenshot, do not have a bottom border, which makes the last tab look bad. How do I draw the bottom border?

[wvxwxvw]

Okay, I figured it out myself too.

tab-item tab-item-substance {
  border: solid 1px #4F4B4B;
  z-index: 999;
  margin-bottom: 0.1px;
}

[irvinm]

@wvxwxvw piroor just made a check-in to fix this issue. (Sorry about the link, Github auto-formatted it to be the base of the thread vs. my comment. I updated the link if you want to see what I reported)

[wvxwxvw]

@irvinm
I got it. I'm keeping it that way for now.

tab-item {
  margin-bottom: -1px;
}
tab-item tab-item-substance {
  border: none;
    outline: 1px solid rgba(200,200,200,0.15);
    margin: 1px 0 1px 0;
}

[piroor]

The commit 5ef0e87 applies a negative margin-bottom, it will conflict to the negative margin-top of your user style. I think it is better that using a negative margin-bottom until a new version of TST containing the change is released.

[wvxwxvw]

@piroor
Clear. Corrected the code above.

[Thirkit]

I wanted some help on fixing indentation for child tabs when the sidebar is in a collapsed state. Could someone help with the code that makes it so that it remains aligned to the sidebar strip with zero margin but appears branched, as it should, when hovered over?

Screenshot for reference

Thanks!

[piroor]

It also need to be updated as:

#tabbar:not(:hover) tab-item-substance {
  margin-left: 0;
}

or

/* for a case when the previous exampled does not work */
#tabbar:not(:hover) tab-item tab-item-substance {
  margin-left: 0;
}

[zekeblue]

Is there a snippet possible to add a px or two between fav icon and label on all tabs?

[Thirkit]

Working now, thanks so much. I had tried updating with tab-item-substance as well as tab-tem tab-item-substance earlier but it didn't work. I set the indent to -1 as opposed to 0 as it had been set before and all operational now.
Thanks for your patience and help. Cheers!

[wvxwxvw]

@zekeblue

Is there a snippet possible to add a px or two between fav icon and label on all tabs?

tab-item tab-item-substance:not(.pinned) .label-content {
  padding-left: 4px;
}

or better

tab-item tab-item-substance:not(.pinned) .label {
  padding-left: 4px;
}

[zekeblue]

@zekeblue

Is there a snippet possible to add a px or two between fav icon and label on all tabs?

tab-item tab-item-substance:not(.pinned) .label-content {
  padding-left: 4px;
}

or better

tab-item tab-item-substance:not(.pinned) .label {
  padding-left: 4px;
}

Works beautifully, thank you!

[irvinm]

@piroor it looks like the first tab needs a little tweak to properly support a full border around that tab.

In the original state, it looks like the top margin of the first tab is set to none and hence any border is not properly drawn around the entire tab.

Changing the border-top to 1px for :first-of-type seems to resolve the issue. Not sure if this was by design or not.

[irvinm]

Sorry, my solution was incomplete. I ran into a bunch of issues between leaving the white top line drawn when changing to another tab and the size of the first tab changing height by 1 pixel whether it was active or not with the white border.

I basically redid the logic to always have a 1px full border of color --tab-border when not active and a 1px full white border when active. This kept the tabs the same height whether active or not, allowed proper borders of the first tab (whether there were pinned tabs or not), and also maintained left and right tab borders.

#tabbar tab-item.pinned + tab-item.active:not(.pinned) tab-item-substance,
#tabbar tab-item.active:not(.pinned):first-of-type tab-item-substance,
#tabbar tab-item.active:not(.pinned) tab-item-substance {
	border: 1px solid white;
}

#tabbar tab-item.pinned + tab-item:not(.pinned) tab-item-substance,
#tabbar tab-item:not(.pinned):first-of-type tab-item-substance,
#tabbar tab-item:not(.pinned) tab-item-substance {
  	border: 1px solid var(--tab-border);
}

After all of this, I'm not sure if you need to change anything with the default CSS. I think there still might be an issue with the first tab and the border thickness which causes issues if you want to change the border color for a use case, but I'm guessing it is an edge case and obviously can be addressed with custom CSS like this.

[piroor]

The omission of the top border of the first regular tab is intentional, to avoid duplication of the top border of the sidebar contents due to the bottom border of the sidebar header. I think it is enough natural especially for the bright color scheme. Here are screenshots with default color scheme on my environment:

The default theme:

The Dark theme:

On the other hand border-top: 1px solid var(--tab-border) on the topmost tab looks double-width border for me (especially with Photon theme of Firefox itself). Screenshot:

I think that reverting the top-border omission should be done based on a will of the user via custom user styles.

[irvinm]

Yes, I agree ... and I see the same. I agree it should be handled vis CSS depending on what people want. Thanks.

[silverwings15]

hi, i've been using the following CSS snippet

/* Style for hovered unloaded tabs */

.tab.discarded:hover {
    opacity: .85 !important;
    background: rgb(238,156,167) linear-gradient(90deg, rgba(238,156,167,1) 0%, rgba(251,193,200,1) 100%);

which is no longer working on the current latest version of TST. instead of applying the style to the tab, it is only applied to the background/indent space, like so

would really appreciate a fix if possible!!

[silverwings15]

never mind i got it to work simply by adding tab-item-substance. that was easy!

i do notice a quirk though: for some reason, after adding tab-item-substance, that particular snippet breaks all the other CSS that follows it. i had to move it to the very end so it doesn't affect the rest of the code

[irvinm]

You need to make sure there is a closing bracket for the snippet ... "}". Not sure if you just didn't paste it in the example.

.tab.discarded:hover tab-item-substance {
    opacity: .85 !important;
    background: rgb(238,156,167) linear-gradient(90deg, rgba(238,156,167,1) 0%, rgba(251,193,200,1) 100%);
}

[silverwings15]

damn it i missed it again... thank you for catching it!!

[zekeblue]

Anything that can be done about this? Note the coloring of tabs overflows to sidebar background. ....Thanks

[piroor]

This thread #2960 (comment) may give the answer for you.

[zekeblue]

This thread #2960 (comment) may give the answer for you.

Bingo! Thanks piroor. Here's the result:

However, this made label attributes for group tabs not respect the bold and italic elements. I've moved the order and some other things to no avail. Can anyone see what I'm missing?

`
/* --Change attributes of group tabs */
.tab.group-tab tab-item-substance {
background: rgb(170,184,220) !important;
}
.tab.group .label {
color: rgb(0,0,0);
font-style: italic;
font-weight: bold;
}

/* --Change attributes of normal tabs */
.tab tab-item-substance {
background: white !important;
}
.tab .label {
color: rgb(0,0,0);
}

/* --Change attributes of discarded tabs */
.tab.discarded tab-item-substance {
background: rgb(233,231,231) !important;
}
.tab.discarded .label {
color: rgb(42,42,42);
}

/* --Change attributes of active tabs */
.tab.active tab-item-substance {
background: #F5B7B1 !important;
}
.tab.active .label {
color: rgb(0,0,0);
font-weight: bold;
}

/* --Change attributes of unread tabs */
.tab.unread tab-item-substance {
background: rgb(255,255,255) !important;
}
.tab.unread .label {
font-style: italic;
color: rgb(3,3,129);
}

`

Edit: I found it! Changed ".tab.group .label" to ".tab-item.group .label"

[piroor]

Edit: I found it! Changed ".tab.group .label" to ".tab-item.group .label"

tab-item.group .label ? (without dot before tab-item)

[zekeblue]

Hi piroor,

I ended up with this, which is working well:

/* --Change attributes of group tabs */
.tab.group-tab tab-item-substance {
background: rgb(170,184,220) !important;
padding-top: 2px;
padding-bottom: 0px;
}
.tab.group-tab .label-content {
font: 12px Trebuchet MS, sans-serif;
color: rgb(0,0,0);
font-style: italic;
font-weight: bold;
}

Here's my entire bit for anyone that might like to adopt any of it and/or if you have any corrections. Though it is looking good despite likely code sloppiness. Better than before the changes actually.

/* Tab Height */ 
tab-item {
  --tab-size: 23px !important;
  height: var(--tab-size);
}


/* Tab Padding */
tab-item-substance {
  padding-top: 3px;
  padding-bottom: 4px;
}


/* --Change close button style #1564 */
.closebox::after {
  /*
    There are some possible characters for this purpose:
    https://en.wikipedia.org/wiki/X_mark    */
  content: "❌";
  background: none;
  line-height: 1.5;
  mask: none;
  text-align: center;
  width: 1.3em;
}


/* --Add private browsing indicator per tab */
.tab.private-browsing .label:before {
  content: "🕶";
  }


/* regular width scrollbar */
#tabbar { scrollbar-width: auto; }


/* put scrollbar rightside */
:root.left #tabbar { direction: ltr; }
:root {
    background-color: #9E9E9E;
}


/* Less visible tab dividers. 
   A black border with a very low alpha slightly darkens any color. */
tab-item-substance {
  border-top: solid 1px #00000042; 
}


/* As little space before the tab name as possible.
   The fold/unfold icon is not affected. */
tab-item:not(.pinned) tab-item-substance {
  padding-left: 1px !important; /* !important is required when there are enough tabs to cause a scrollbar */
}


/* Only show tab close button on hover */
#tabbar tab-item tab-item-substance:not(:hover) tab-closebox {
  display: none;
}


/* Padding between favicon and label */
tab-item tab-item-substance:not(.pinned) .label {
  padding-left: 4px;
}


/*---------------------------------------------*/



/* --Change attributes of normal tabs */
.tab tab-item-substance { 
   background: rgb(255,255,255) !important; 
   }
.tab .label-content {
   color: rgb(0,0,0);
   }



/* --Change attributes of unread tabs */
.tab.unread tab-item-substance { 
   background: rgb(255,255,255) !important; 
   }
.tab.unread .label-content {
   font-style: italic;
   color: rgb(3,3,129);
   }


/* --Change attributes of discarded tabs */
.tab.discarded tab-item-substance {
    background: rgb(233,231,231) !important;
   }


/* --Change attributes of group tabs */
.tab.group-tab tab-item-substance {
   background: rgb(170,184,220) !important;
   padding-top: 2px;
   padding-bottom: 0px;
   }
.tab.group-tab .label-content {
   font: 12px Trebuchet MS, sans-serif;
   color: rgb(0,0,0);
   font-style: italic;
   font-weight: bold;
   }


/* --Change attributes of active tabs */
.tab.active tab-item-substance {
   background: rgb(245,183,177) !important;
   color: rgb(233,177,177);
   font-weight: bold;
   }


/* Color tabs on hover */
.tab:hover tab-item-substance {
    background: #FFD6D2 !important;
}


/*---------------------------------------------*/