Template:OOOInfoBoxTabber/styles.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 27: | Line 27: | ||
border: 0; | border: 0; | ||
background: none; | background: none; | ||
align-items: flex-end; | |||
} | } | ||
| Line 35: | Line 36: | ||
.ooo-infobox-tabwrap .tabber__tab { | .ooo-infobox-tabwrap .tabber__tab { | ||
flex: 0 0 auto; /* natural width; don't shrink */ | flex: 0 0 auto; /* natural width; don't shrink */ | ||
min-width: | min-width: 3.5ch; /* small floor so tiny labels don't collapse */ | ||
white-space: nowrap; /* keep short labels on one line */ | white-space: nowrap; /* keep short labels on one line */ | ||
text-align: center; | text-align: center; | ||
| Line 42: | Line 43: | ||
font-weight: 700; | font-weight: 700; | ||
font-size: 90%; | font-size: 90%; | ||
padding: . | padding: .3rem .55rem; /* TemplateStyles-safe padding */ | ||
text-decoration: none; | text-decoration: none; | ||
| Line 52: | Line 53: | ||
} | } | ||
/* Active | /* Hover + focus: accessible but subtle */ | ||
.ooo-infobox-tabwrap .tabber__tab:hover { | |||
background: rgba(255,255,255,.06); /* subtle lift on dark theme */ | |||
} | |||
.ooo-infobox-tabwrap .tabber__tab:focus { | |||
outline: 2px solid #cea141; /* brand gold */ | |||
outline-offset: 2px; | |||
border-radius: 12px; /* full pill outline, not just top */ | |||
} | |||
/* Active tab feels attached & not clickable */ | |||
.ooo-infobox-tabwrap .tabber__tab--active { | .ooo-infobox-tabwrap .tabber__tab--active { | ||
cursor: default; | |||
background: var(--background-color-base, #ffffff); | background: var(--background-color-base, #ffffff); | ||
color: var(--color-base, #202122); | color: var(--color-base, #202122); | ||
margin-bottom: -1px; | margin-bottom: -1px; /* keep panel seam flush */ | ||
box-shadow: inset 0 -1px 0 var(--background-color-base, #ffffff); | |||
} | } | ||