change styling for tabs

[felix920506]

Add css to mark the area of tabs, to make it clear where the tabs area ends
credit goes to @BotBlake for the CSS: #1495 (review)

Before:

After:

[felix920506]

glow removed

[BotBlake]

Works. Looks reasonable.
Also very nice css work 🗿

@nielsvanvelzen you do da merge 🗿

[felix920506]

Whoever is merging please squash

[BotBlake]

3 commits is two to many for felix 🗿

[felix920506]

Made quite a bit of changes to get to what @erikbucik asked for

@erikbucik @nielsvanvelzen please review

[erikbucik]

Pretty good 👍

Hear me out:

[BotBlake]

@erikbucik THIS IS AWESOME 🔥

[BotBlake]

@erikbucik HOW TF did you do that 😆
Best I was abled to do through docusaurus was THIS

@felix920506 In case you care, to do that I added a new class ActiveItem for that.
(I also added the source to my Branch)

Properties are:

.tabItem {
  margin-top: 0 !important;
  border: 1px solid transparent;
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tabItem:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.04);
}

.activeItem {
  color: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid transparent;
  position: relative;
  z-index: 2;
}

I added the ActiveItem by adding

,[styles.activeItem]: selectedValue === value

to line 81 in your index.tsx 👍

I dont realy know how to get rid of the border between the tab item and the tab content though 😅

[erikbucik]

@erikbucik HOW TF did you do that 😆

margin-top: -2px

[felix920506]

I hope it doesn't break 🗿

[felix920506]

@erikbucik What styles on what element did you change to get the effect in your screenshot?
I tried margin-top: -2px and wasn't able to get that effect

[erikbucik]

@felix920506 consider the tab list a 'static' element on the page and the tab area a 'changeable'/'disappearing' element.

I made the active tab's bottom border the same color as the background, set z-index above the tab area and used that negative margin on the tab area. ;)
That then masks the area's outline making it look like the tab is a part of it.

[erikbucik]

and I now think adding a background to the tabList would look even better as it makes the whole set look more like a single unit.

[erikbucik]

tabList:

• remove margin-bottom
• add background-color: #fff2
• add border-radius: 8px 8px 0 0

tabItem

• make border: 2px solid #0000
• make font-weight: 400
• make hover indicator not go below the border!

tabItem-active

• background-color: var(--ifm-background-color)
• border-color: #fff2
• border-bottom-color: var(--ifm-background-color)
• font-weight: 700

tabContainer = content area

• margin-top: -2px
• border: 2px solid #fff2
• border-top-color: #0000
• border-radius: 0 0 8px 8px

That should do it.

[felix920506]

how many design changes have we gone through now 🗿

[felix920506]

This is what I was able to get to

the code to get here is a bit ugly though 🗿

[erikbucik]

Looks good to me.

[felix920506]

@nielsvanvelzen please review

[nielsvanvelzen]

The width of the tab title changes when it is active, this causes all tabs to change position when you change the active one. Additionally the corners of the content box are really weird:

[felix920506]

The width of the tab title changes when it is active

This one is @erikbucik 's fault, caused by the font-weight entries in the CSS

[felix920506]

Additionally the corners of the content box are really weird

Fixed

[felix920506]

🗿 I give up, yeeting the bold
@nielsvanvelzen the tabs should now not change in width

[jellyfin-bot]

Cloudflare Pages deployment

Latest commit	05a14ef862ad6d9b99d536119bf9309d6a155a0d
Status	✅ Deployed!
Preview URL	https://8f677927.jellyfin-org.pages.dev
Type	🔀 Preview

[erikbucik]

Additionally the corners of the content box are really weird:

I didn't even notice that 'till now 💀

[BotBlake]

Preview where :(
Found it, mobile app didn't show it 🗿

[BotBlake]

I would not squash merge this one btw 😅