MediaWiki:CustomFiltered.css: Difference between revisions
From The Seven Sages of Rome
No edit summary |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 6: | Line 6: | ||
.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 */ | ||
border: 1px solid #c3c2c2 !important; | |||
max-width: 25%; | max-width: 25%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| Line 11: | Line 12: | ||
padding: 1rem; /* Optional: spacing inside the filters panel */ | padding: 1rem; /* Optional: spacing inside the filters panel */ | ||
} | } | ||
@media (min-width: 1071px) { | @media (min-width: 1071px) { | ||
| Line 26: | Line 23: | ||
max-width: 75%; | max-width: 75%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
border: 1px solid #c3c2c2 !important; | |||
border-radius: 5px; | border-radius: 5px; | ||
padding: 1rem; /* Optional: spacing inside the views panel */ | padding: 1rem; /* Optional: spacing inside the views panel */ | ||
Latest revision as of 13:21, 21 May 2026
.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 */
border: 1px solid #c3c2c2 !important;
max-width: 25%;
box-sizing: border-box;
border-radius: 5px;
padding: 1rem; /* Optional: spacing inside the filters panel */
}
@media (min-width: 1071px) {
.filtered-filters {
position: sticky !important;
}
}
.filtered-views {
flex: 1 1 75%; /* Grow to take remaining space */
max-width: 75%;
box-sizing: border-box;
border: 1px solid #c3c2c2 !important;
border-radius: 5px;
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%;
}
}
.filtered-filters .filtered-value .filtered-value-option {
width: unset !important;
}