Outline box/shading for content tabs

[EDIflyer]

I really like the content tab functionality however if I dont then put it within an admonition or perhaps just a simple code block on each tab I find it difficult when reading to see which content is part of a tab and which is part of the main text (see examples below).

Is there some way to create a box around the tab contents to make it easier to see what is tabbed content vs main text?

Tab 1 active

Tab 2 active

[squidfunk]

You can add a border or box-shadow with some additional CSS. Material for MkDocs is very extensible and can be easily adjusted to taste. I'm short on time right now, but maybe somebody else can share some customizations!

[EDIflyer]

Thanks @squidfunk - haven't play around with CSS too much before, will try and get my head round it 👍

[rmscode]

@EDIflyer

Sorry for being late to the party, but I'm curious to know what you ended up doing. I have found myself wanting to do the same thing.

[EDIflyer]

Must confess I never got round to dealing with it! I think it would definitely look nicer with a subtle bit of shading to denote box contents but never quite found the time to look in more detail!

[rmscode]

Understandable! It's been a while since I messed around with any css, but if I'm feeling ambitious and come up with something half decent, I'll let you know.

[EDIflyer]

@rmscode you might want to look at the solution by @alexvoss below - did the trick beautifully for me and the documentation from @squidfunk on adding extra CSS that he links to is spot on. It took only a minute to add the stylesheets\extra.css files and amend mkdocs.yml 🚀

[rmscode]

Beautiful! I did see his reply, but I was away this past week and didn't have a chance to try it out. Thanks for following up with your experience though!

[alexvoss]

I am putting a box around tabbed environments for the same reason using this extra CSS:

.md-typeset .tabbed-set {
  border: 0.5px solid lightgray;
}

.md-typeset .tabbed-content {
  padding-left: 1rem;
  padding-right: 1rem;
}

Note that I am not we web designer, so this can probably be improved. The result looks like this:

[EDIflyer]

Superb work @alexvoss 🥳

Before - not clear if the 'run frequency' section is part of it or not:

After - crystal clear:

Very subtle but does what is needed I'd say 😃

[hellt]

Thanks @alexvoss for this example, works great.

I have one question, what color variable should one set to make sure that the table border uses the appropriate color when switched to the slate theme?

[hellt]

Ok, found it eventually

.md-typeset .tabbed-set {
  border: 0.5px solid var(--md-typeset-table-color);
}