Bureaucrats, Moderators (CommentStreams), Interface administrators, Push subscription managers, Suppressors, Administrators
13,561
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
3rd Drilldown attempt
Tag: Undo |
(3rd Drilldown attempt) |
||
| Line 1,118: | Line 1,118: | ||
/* </source> */ | /* </source> */ | ||
/* === Custom Cargo Drilldown layout: Filters on LEFT sidebar === | |||
- Confirmed classes: .drilldown-filters-wrapper (filters), .drilldown-results (results) | |||
- Flex container: #bodyContent > .mw-parser-output (safer than plain #bodyContent) | |||
- Goal: Filters left sidebar, results main right area | |||
- Desktop: Sticky sidebar + scrollable if tall filters | |||
- Mobile: Results first, filters full-width below | |||
- Gotchas: If sticky fails, check ancestors for overflow ≠ visible → debug with overflow: visible !important on parent (last resort) | |||
- Vector 2022 sticky header? Consider top: var(--vector-sticky-header-height, 1em); | |||
*/ | |||
body.special-SpecialDrilldown #bodyContent > .mw-parser-output { | |||
display: flex !important; | |||
flex-direction: row; | |||
gap: 20px; | |||
margin: 20px 0; | |||
} | |||
/* Neutralize any unrelated direct children (e.g., notices, hidden divs) */ | |||
body.special-SpecialDrilldown #bodyContent > .mw-parser-output > *:not(.drilldown-filters-wrapper):not(.drilldown-results) { | |||
flex: none; | |||
} | |||
body.special-SpecialDrilldown .drilldown-filters-wrapper { | |||
flex: 0 0 300px !important; | |||
max-width: 360px; | |||
background: #f8f9fa; | |||
padding: 0.6em; | |||
border: 1px solid var(--mw-border-color-base, #a2a9b1); | |||
border-radius: 2px; | |||
order: 1; | |||
} | |||
body.special-SpecialDrilldown .drilldown-results { | |||
flex: 1 1 auto !important; | |||
min-width: 0; | |||
order: 2; | |||
} | |||
/* Desktop: Sticky + internal scroll for long filter lists */ | |||
@media (min-width: 48em) { | |||
body.special-SpecialDrilldown .drilldown-filters-wrapper { | |||
position: sticky !important; | |||
top: 1em; | |||
align-self: flex-start; | |||
max-height: calc(100vh - 2em); | |||
overflow-y: auto; | |||
} | |||
} | |||
/* Mobile: Stack vertically, results on top */ | |||
@media (max-width: 47.999em) { | |||
body.special-SpecialDrilldown #bodyContent > .mw-parser-output { | |||
flex-direction: column !important; | |||
} | |||
body.special-SpecialDrilldown .drilldown-results { | |||
order: 1 !important; | |||
} | |||
body.special-SpecialDrilldown .drilldown-filters-wrapper { | |||
order: 2 !important; | |||
max-width: none; | |||
flex: 1 1 auto; | |||
border: none; /* Reset to avoid double borders */ | |||
border-block-end: 1px solid var(--mw-border-color-base, #a2a9b1); | |||
} | |||
} | |||