How can I shrink the spacing between nested horizontal tabs?

[h0p3]

How I can shrink the spacing between nested horizontal tabs? I'm thinking about moving toward nesting trees of tabs in my sidebar because I like the top-down model. I use it to great effect in my desktop environment, and I want it in my wiki. Unfortunately, the spacing is offputting, and it's not an efficient use of space.

[Mat]

On Thursday, July 4, 2019 at 7:42:30 AM UTC+2, h0p3 wrote:

How I can shrink the spacing between nested horizontal tabs? I'm thinking about moving toward nesting trees of tabs in my sidebar because I like the top-down model. I use it to great effect in my desktop environment, and I want it in my wiki. Unfortunately, the spacing is offputting, and it's not an efficient use of space.

You can light click on a tab and selet to Inspect the element.

This will show you the styling.

I note this part:

.tc-tab-buttons button {

1. color: #666666;
2. padding: 3px 5px 3px 5px;
3. margin-right: 0.3em;

...

So I think that this should do the trick in a new stylesheet tiddler:

.tc-tab-buttons button {
  padding: 3px 0;
  margin-right: 0;
}

 <:-)

[h0p3]

 Thank you!

Unfortunately, I can't get this to work. Your code in a blank TW doesn't modify the gap between two or more different nested horizontal tabs. It does have an effect between tabs on a single line though. I don't see what needs to change from inspection either.

[Mat]

When I try it on https://tiddlywiki.com/empty it works. At least in the ctrlpanel which has nested tabs.

You must tag the tiddler with: $:/tags/Stylesheet

and set type to: text/css

<:-)

[h0p3]

 Thank you for working with a noob. I am not trying to be frustrating, and I'm grateful for your help.

I agree that your stylesheet example shrinks the vertical bar gap between individual tabs. I've done a terrible job of explaining what I'm trying to shrink, I'm sorry. This is the gap I mean:

[Mat]

Ah, that ol' gap.

.tc-tab-divider { margin-bottom:-1em; }

This works, however in e.g Ctrlpanel > Info and some other tabs there is still a gap under the initial explanatory text line. This is because that break is part of the *content text* of that tiddler. You can add this:

p:not(:first-of-type) > .tc-control-panel > .tc-tab-set { margin-top:-2em; }

But, as you can tell, this would only work in the controlpanel. 

<:-)

[Mat]

Errata - actually it doesn't have to be specifically in the ctrlpanel:

p:not(:first-of-type) .tc-tab-set { outline:1px solid red; margin-top:-2em; }

<:-)

[Mat]

Oups - my red outline for testing slipped along in the above.

<:-)

[h0p3]

Thank you so much Mat! You sent me down the right direction with instructions and examples.

I fiddled some more because I'm most interested in modifying the sidebar. This is working for me. Since I don't know what I'm doing, I assume there's something wrongheaded about what is working for me:

.tc-sidebar-lists {}
.tc-search{ margin-bottom: 1.5em; }
.tc-tab-set{ margin-top: -1.5em; }

[Mat]

One of the best things with css is that it is basically harmless... "looks good = works". 

<:-)