MediaWiki:CustomFiltered.css: Difference between revisions
From The Seven Sages of Rome
No edit summary |
No edit summary |
||
(6 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
.filtered-filters { | .filtered-filters { | ||
flex: 0 0 25%; /* Don't grow or shrink, fixed at 25% width */ | flex: 0 0 25%; /* Don't grow or shrink, fixed at 25% width */ | ||
max-width: 25%; | max-width: 25%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
padding: 1rem; /* Optional: spacing inside the filters panel */ | padding: 1rem; /* Optional: spacing inside the filters panel */ | ||
} | |||
@media (min-width: 1071px) { | |||
.filtered-filters { | |||
position: sticky !important; | |||
top: 5rem !important; | |||
} | |||
} | } | ||
Line 22: | Line 27: | ||
.filtered-table table thead th { | .filtered-table table thead th { | ||
position: sticky !important; | position: sticky !important; | ||
} | } | ||
/* Optional: make it responsive */ | /* Optional: make it responsive */ | ||
@media (max-width: | @media (max-width: 1070px) { | ||
.filtered { | .filtered { | ||
flex-direction: column; /* Stack vertically on smaller screens */ | flex-direction: column; /* Stack vertically on smaller screens */ |
Latest revision as of 17:12, 1 May 2025
.filtered {
display: flex;
flex-wrap: nowrap; /* Make sure they stay in one row */
}
.filtered-filters {
flex: 0 0 25%; /* Don't grow or shrink, fixed at 25% width */
max-width: 25%;
box-sizing: border-box;
padding: 1rem; /* Optional: spacing inside the filters panel */
}
@media (min-width: 1071px) {
.filtered-filters {
position: sticky !important;
top: 5rem !important;
}
}
.filtered-views {
flex: 1 1 75%; /* Grow to take remaining space */
max-width: 75%;
box-sizing: border-box;
padding: 1rem; /* Optional: spacing inside the views panel */
}
.filtered-table table thead th {
position: sticky !important;
}
/* Optional: make it responsive */
@media (max-width: 1070px) {
.filtered {
flex-direction: column; /* Stack vertically on smaller screens */
}
.filtered-filters,
.filtered-views {
max-width: 100%;
flex: 0 0 100%;
}
}