Template:OOOInfoBoxTabber/styles.css: Difference between revisions
No edit summary Tag: Reverted |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Template:OOOInfoBoxTabber/styles.css | /* Template:OOOInfoBoxTabber/styles.css | ||
Layout-only styles safe for TemplateStyles. */ | |||
/* Wrapper (default right) */ | /* Wrapper (default right) */ | ||
| Line 6: | Line 6: | ||
float: right; | float: right; | ||
clear: right; | clear: right; | ||
width: 300px; /* | width: 300px; /* match {{OOOInfoBox}} default if needed */ | ||
margin: 0 0 1em 1em; | margin: 0 0 1em 1em; | ||
} | } | ||
| Line 23: | Line 23: | ||
align-content: flex-start; | align-content: flex-start; | ||
align-items: flex-end; | align-items: flex-end; | ||
margin: | margin: 0; /* snug against the panel */ | ||
width: 100%; | width: 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
border: 0; | border: 0; | ||
background: none; | background: none; | ||
} | } | ||
/* Remove TabberNeue's default separator pseudo-element */ | |||
.ooo-infobox-tabwrap .tabber__tabs::after { content: none; } | .ooo-infobox-tabwrap .tabber__tabs::after { content: none; } | ||
/* Pills */ | |||
.ooo-infobox-tabwrap .tabber__tab { | .ooo-infobox-tabwrap .tabber__tab { | ||
flex: 0 0 auto; | flex: 0 0 auto; | ||
| Line 42: | Line 44: | ||
padding: .3rem .55rem; | padding: .3rem .55rem; | ||
text-decoration: none; | text-decoration: none; | ||
background: var(--background-color-neutral, #f5f5f5); | background: var(--background-color-neutral, #f5f5f5); | ||
color: var(--color-base, #202122); | color: var(--color-base, #202122); | ||
| Line 56: | Line 59: | ||
} | } | ||
/* Active tab (no inset line, no negative margin) */ | |||
.ooo-infobox-tabwrap .tabber__tab--active { | .ooo-infobox-tabwrap .tabber__tab--active { | ||
cursor: default; | cursor: default; | ||
background: var(--background-color-base, #ffffff); | background: var(--background-color-base, #ffffff); | ||
color: var(--color-base, #202122); | color: var(--color-base, #202122); | ||
box-shadow: none; /* no seam */ | |||
box-shadow: | |||
} | } | ||
/* Panels */ | |||
.ooo-infobox-tabwrap .tabber__panel { | .ooo-infobox-tabwrap .tabber__panel { | ||
padding: 0; | padding: 0; | ||
| Line 70: | Line 74: | ||
} | } | ||
/* ===== Scroll mode (opt-in) ===== */ | /* ===== Scroll mode (opt-in via .ooo-infobox-tabwrap--scroll) ===== */ | ||
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; } | .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll { position: relative; } | ||
| Line 79: | Line 83: | ||
overflow-x: auto; | overflow-x: auto; | ||
overflow-y: hidden; | overflow-y: hidden; | ||
padding: 0 .75rem; | padding: 0 .75rem; /* room for arrows/edge fades */ | ||
margin: | margin: 0; | ||
border: 0; | border: 0; | ||
background: none; | background: none; | ||
} | } | ||
/* | /* Optional edge fades (comment out if you don't want them) */ | ||
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before, | .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::before, | ||
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after { | .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll::after { | ||
| Line 91: | Line 95: | ||
position: absolute; | position: absolute; | ||
top: -2px; | top: -2px; | ||
height: 28px; | height: 28px; /* approx pill height */ | ||
width: 10px; | width: 10px; | ||
} | } | ||
| Line 103: | Line 107: | ||
} | } | ||
/* Tabs inside scroller stay fixed-size */ | |||
.ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; } | .ooo-infobox-tabwrap.ooo-infobox-tabwrap--scroll .tabber__tab { flex: 0 0 auto; } | ||