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
add Custom Cargo Drilldown layout
Tag: Undo |
(add Custom Cargo Drilldown layout) Tag: Reverted |
||
| Line 1,118: | Line 1,118: | ||
/* </source> */ | /* </source> */ | ||
/* === Custom Cargo Drilldown layout: Filters on LEFT sidebar === | |||
- Added [your date/username] for persistent left filters + better mobile stacking | |||
- Goal: See full results first, filters always accessible on side | |||
- Desktop: Sticky sidebar + scrollable if tall | |||
- Mobile: Results on top, filters full-width below | |||
- Gotchas: Sticky may fail if parent has overflow:hidden/auto/scroll → override to visible | |||
- Vector 2022 sticky header? Consider top: var(--vector-sticky-header-height, 1em); | |||
*/ | |||
.cargoDrilldown { | |||
display: flex; | |||
gap: 20px; | |||
margin: 20px 0; | |||
} | |||
.cargoDrilldownFilters { | |||
flex: 0 0 300px; | |||
max-width: 360px; | |||
background: #f8f9fa; | |||
padding: 15px; | |||
border-inline-end: 1px solid var(--mw-border-color-base, #a2a9b1); | |||
border-radius: 4px; | |||
} | |||
.cargoDrilldownResults { | |||
flex: 1 1 auto; | |||
min-width: 0; | |||
} | |||
/* Desktop: Sticky + scrollable if filters are very long */ | |||
@media (min-width: 48em) { | |||
.cargoDrilldownFilters { | |||
position: sticky; | |||
top: 1em; | |||
align-self: flex-start; | |||
max-height: calc(100vh - 2em); | |||
overflow-y: auto; | |||
} | |||
} | |||
/* Mobile: Stack vertically — results first, filters full-width below */ | |||
@media (max-width: 47.999em) { | |||
.cargoDrilldown { | |||
flex-direction: column; | |||
} | |||
.cargoDrilldownResults { | |||
order: 1; | |||
} | |||
.cargoDrilldownFilters { | |||
order: 2; | |||
max-width: none; | |||
flex: 1 1 auto; | |||
border-inline-end: 0; | |||
border-block-end: 1px solid var(--mw-border-color-base, #a2a9b1); | |||
} | |||
} | |||