MediaWiki:CustomFiltered.css: Difference between revisions
From The Seven Sages of Rome
(Created page with ".filtered .filtered-filters { border-radius: 0.75rem; } .filtered .filtered-filters .filtered-filter { border-radius: 0.75rem; }") |
No edit summary |
||
(18 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.filtered | .filtered { | ||
display: flex; | |||
flex-wrap: nowrap; /* Make sure they stay in one row */ | |||
} | } | ||
.filtered .filtered-filters .filtered- | .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%; | |||
} | |||
} | } |
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%;
}
}