Luca Banfi
51 lines
1.6 KiB
CSS
51 lines
1.6 KiB
CSS
/* ── filters.css — shared filter toggle (all pages) ── */
|
|
|
|
/* ── Sticky page header (filter bar) — shared across all pages ── */
|
|
.page-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
background: var(--surf, #fff);
|
|
border-bottom: 1px solid var(--brd, #e2e8f0);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.06);
|
|
padding-bottom: .6rem;
|
|
margin-bottom: 0;
|
|
}
|
|
.page-header + section { padding-top: 1rem; }
|
|
|
|
/* Wrapper that keeps the header row and collapsible in the same container */
|
|
.page-filter-wrap { display: flex; flex-direction: column; }
|
|
|
|
.page-filter-header { display: flex; align-items: center; margin-bottom: .5rem; }
|
|
|
|
.btn-toggle-filters {
|
|
display: flex; flex-direction: column; align-items: center; gap: .15rem;
|
|
background: #2563eb; border: 1px solid #1d4ed8; border-radius: 6px;
|
|
padding: .4rem .35rem; cursor: pointer; color: #fff;
|
|
flex-shrink: 0; margin-left: auto;
|
|
transition: background .12s, border-color .12s;
|
|
}
|
|
.btn-toggle-filters:hover { background: #1d4ed8; border-color: #1e40af; }
|
|
|
|
.filters-btn-text {
|
|
writing-mode: vertical-rl; transform: rotate(180deg);
|
|
font-size: .72rem; font-weight: 600; letter-spacing: .04em; user-select: none;
|
|
}
|
|
|
|
.filters-arrow {
|
|
width: .9em; height: .9em; flex-shrink: 0;
|
|
transition: transform .22s ease; transform: rotate(180deg);
|
|
}
|
|
.filters-arrow.collapsed { transform: rotate(0deg); }
|
|
|
|
.filters-collapsible {
|
|
display: grid; grid-template-rows: 1fr;
|
|
clip-path: inset(0 0 0 0);
|
|
transition: grid-template-rows .32s ease, clip-path .28s ease;
|
|
}
|
|
.filters-collapsible.hidden {
|
|
grid-template-rows: 0fr;
|
|
clip-path: inset(0 0 0 100%);
|
|
}
|
|
.filters-collapsible-inner { overflow: hidden; }
|