Yan Xell
65 lines
2.8 KiB
CSS
65 lines
2.8 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; }
|
|
|
|
/* ── Date range filter — shared ── */
|
|
.filter-hr{border:none;border-top:1px solid var(--brd);margin:6px 0}
|
|
.date-label{display:flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--mut);white-space:nowrap}
|
|
.date-label input[type=date]{padding:4px 7px;border:1px solid var(--brd);border-radius:6px;font-size:.82rem;background:var(--surf);color:var(--txt);cursor:pointer}
|
|
.filter-date-btn{padding:4px 14px;border:1px solid var(--pri);border-radius:6px;font-size:.82rem;background:var(--pri);color:#fff;cursor:pointer;font-weight:600}
|
|
.filter-date-btn:hover{opacity:.85}
|
|
.filter-date-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
|
|
|
/* ── Shared pagination buttons ── */
|
|
.pg-btn{padding:5px 13px;border:1px solid #06b6d4;border-radius:6px;font-size:.85rem;text-decoration:none;color:#0e7490;background:#ecfeff;cursor:pointer;font-weight:600}
|
|
.pg-btn:hover{background:#06b6d4;color:#fff;border-color:#06b6d4}
|
|
.pg-btn.disabled{opacity:.35;pointer-events:none;cursor:default;border-color:var(--brd);background:var(--surf);color:var(--txt)}
|
|
.pg-btn:disabled{opacity:.35;pointer-events:none;cursor:default;border-color:var(--brd);background:var(--surf);color:var(--txt)}
|