mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
654c884fed
The sticky chip bar added noise: users already see their active filters highlighted in the accordion columns (with rep-entry--selected styling and the active-count badge on each toggle). Removing chips shifts focus back to the accordions, consistent with the expectation that users return to the dropdowns to adjust filters.
666 lines
15 KiB
CSS
666 lines
15 KiB
CSS
/* ============================================================
|
|
RÉPERTOIRE / SEARCH PAGE (repertoire.php)
|
|
Root class: .search-main
|
|
============================================================ */
|
|
|
|
.search-main {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ---- 6-column index layout ---- */
|
|
/* Equal-width columns except Années (years) = narrower */
|
|
.repertoire-index {
|
|
display: grid;
|
|
grid-template-columns:
|
|
minmax(3rem, 0.45fr)
|
|
minmax(16rem, 1.2fr)
|
|
minmax(9rem, 1fr)
|
|
minmax(7rem, 1fr)
|
|
minmax(8rem, 1fr)
|
|
minmax(min-content, 1fr);
|
|
grid-template-rows: auto 1fr;
|
|
gap: var(--space-s);
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
margin: 0 var(--space-s);
|
|
height: 100%;
|
|
}
|
|
|
|
/* ---- Accordion: visible only on mobile (≤ 640px) ---- */
|
|
|
|
/* Desktop: heading-text visible, toggle hidden */
|
|
.rep-accordion__heading-text {
|
|
/* visible — inherits the h2 styling above */
|
|
}
|
|
|
|
.rep-accordion__toggle,
|
|
.rep-accordion__chevron,
|
|
.rep-accordion__badge {
|
|
display: none;
|
|
}
|
|
|
|
.rep-accordion__panel {
|
|
display: contents;
|
|
}
|
|
|
|
/* Each section becomes transparent to the grid so h2+ul sit in the 2-row layout */
|
|
.repertoire-col {
|
|
display: contents;
|
|
}
|
|
|
|
.repertoire-col > h2 {
|
|
grid-row: 1;
|
|
font-family: var(--font-display);
|
|
font-size: var(--step--1);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-primary);
|
|
font-weight: 398;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
padding: var(--space-xs) 0 var(--space-3xs) 0;
|
|
border-bottom: 1px solid var(--text-primary);
|
|
align-self: end;
|
|
hyphens: auto;
|
|
word-break: normal;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.repertoire-col > ul {
|
|
grid-row: 2;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding-top: var(--space-2xs);
|
|
padding-bottom: var(--space-l);
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* Strip list chrome inside repertoire columns */
|
|
.repertoire-col ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ---- Responsive (≤ 1025px): accordion mode, students as results ---- */
|
|
@media (max-width: 1025px) {
|
|
.repertoire-index {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
height: 100%;
|
|
overflow-y: hidden;
|
|
gap: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Each column becomes a block-level accordion section */
|
|
.repertoire-col {
|
|
display: block;
|
|
border-bottom: 1px solid var(--text-primary);
|
|
}
|
|
|
|
.repertoire-col[data-col="students"] {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Flex order: years/ap/or/fi first, then keywords, students last */
|
|
.repertoire-col[data-col="years"] { order: 0; }
|
|
.repertoire-col[data-col="ap"] { order: 1; }
|
|
.repertoire-col[data-col="or"] { order: 2; }
|
|
.repertoire-col[data-col="fi"] { order: 3; }
|
|
.repertoire-col[data-col="kw"] { order: 4; }
|
|
.repertoire-col[data-col="students"] { order: 5; }
|
|
|
|
/* Students column: not an accordion — open results list below filters */
|
|
.repertoire-col[data-col="students"] {
|
|
border-bottom: none;
|
|
border-top: none;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.repertoire-col[data-col="students"] .rep-accordion__toggle {
|
|
display: none;
|
|
}
|
|
|
|
.repertoire-col[data-col="students"] .rep-accordion__heading-text {
|
|
display: none;
|
|
}
|
|
|
|
.repertoire-col[data-col="students"] .rep-accordion__panel {
|
|
display: block;
|
|
max-height: none;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Hide the plain h2 — the toggle button replaces it */
|
|
.repertoire-col > h2 {
|
|
display: block;
|
|
grid-row: unset;
|
|
align-self: unset;
|
|
border-bottom: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
/* Hide heading text on mobile (toggle button replaces it) */
|
|
.rep-accordion__heading-text {
|
|
display: none;
|
|
}
|
|
|
|
/* Accordion toggle: full-width touch target */
|
|
.rep-accordion__toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
min-height: 48px;
|
|
padding: var(--space-xs) var(--space-s);
|
|
background: none;
|
|
border: none;
|
|
font-family: var(--font-display);
|
|
font-size: var(--step--2);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-primary);
|
|
font-weight: 398;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rep-accordion__toggle:active {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* Badge: active filter count */
|
|
.rep-accordion__badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 1.4em;
|
|
height: 1.4em;
|
|
padding: 0 0.35em;
|
|
margin-left: var(--space-2xs);
|
|
background: var(--accent-primary);
|
|
color: var(--accent-foreground);
|
|
border-radius: 99px;
|
|
font-family: var(--font-body);
|
|
font-size: var(--step--2);
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
}
|
|
|
|
/* Chevron: CSS triangle */
|
|
.rep-accordion__chevron {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
flex-shrink: 0;
|
|
margin-left: var(--space-2xs);
|
|
border-right: 2px solid var(--text-secondary);
|
|
border-bottom: 2px solid var(--text-secondary);
|
|
transform: rotate(45deg);
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.rep-accordion__toggle[aria-expanded="true"] .rep-accordion__chevron {
|
|
transform: rotate(-135deg);
|
|
}
|
|
|
|
/* Panel: collapsed by default */
|
|
.rep-accordion__panel {
|
|
display: block;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.rep-accordion__panel.is-open {
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Reposition the <ul> inside the panel */
|
|
.repertoire-col ul {
|
|
grid-row: unset;
|
|
overflow-y: visible;
|
|
padding: 0;
|
|
padding-left: 1ch;
|
|
}
|
|
|
|
/* Larger touch targets for filter entries */
|
|
.rep-entry {
|
|
padding: var(--space-2xs) 0;
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Years column: keep big numbers but smaller on mobile */
|
|
.repertoire-col[data-col="years"] .rep-entry {
|
|
font-size: var(--step-2);
|
|
min-height: 48px;
|
|
}
|
|
|
|
/* Column heading font-size is handled by the toggle button */
|
|
.repertoire-col > h2 {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ---- rep-entry: shared base (button + link variants) ---- */
|
|
.rep-entry {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
background: none;
|
|
border: none;
|
|
padding: var(--space-3xs) 0;
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
font-size: var(--step-0);
|
|
font-weight: 398;
|
|
color: var(--text-primary);
|
|
line-height: 1.4;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition:
|
|
color 0.15s,
|
|
opacity 0.15s;
|
|
}
|
|
|
|
.rep-entry:hover {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
/* Link variant (students col) — no underline by default */
|
|
.rep-entry--link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Selected: accent color */
|
|
.rep-entry--selected {
|
|
color: var(--accent-primary) !important;
|
|
}
|
|
|
|
/* Faded/disabled: muted, not interactive */
|
|
.rep-entry--faded {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Years column — big numbers, semi-bold (BBBDMSans Medium weight) */
|
|
.repertoire-col[data-col="years"] .rep-entry {
|
|
font-size: var(--step-3);
|
|
font-weight: 300;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
padding: var(--space-3xs) 0;
|
|
}
|
|
|
|
/* Empty state in students column */
|
|
.rep-empty {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--step--1);
|
|
padding: var(--space-3xs) 0;
|
|
}
|
|
|
|
/* ---- HTMX loading indicator ---- */
|
|
.rep-indicator {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--accent-primary);
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rep-indicator.htmx-request {
|
|
opacity: 1;
|
|
animation: rep-progress 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes rep-progress {
|
|
0% {
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
}
|
|
50% {
|
|
transform: scaleX(0.7);
|
|
transform-origin: left;
|
|
}
|
|
100% {
|
|
transform: scaleX(1);
|
|
transform-origin: left;
|
|
}
|
|
}
|
|
|
|
/* ---- Search results view (grid) ---- */
|
|
.search-results-header {
|
|
display: block;
|
|
font-size: var(--step--1);
|
|
color: var(--text-secondary);
|
|
margin: var(--space-s) var(--space-m) var(--space-2xs);
|
|
}
|
|
|
|
.results-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: var(--space-m);
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: var(--space-2xs) var(--space-m) var(--space-m);
|
|
}
|
|
|
|
.result-card {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3xs);
|
|
}
|
|
|
|
.result-card__cover {
|
|
margin: 0;
|
|
}
|
|
|
|
.result-card__cover img {
|
|
width: 100%;
|
|
aspect-ratio: 4/3;
|
|
object-fit: cover;
|
|
display: block;
|
|
border-radius: 7px 7px 0 0;
|
|
}
|
|
|
|
.result-card__gradient {
|
|
width: 100%;
|
|
aspect-ratio: 4/3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-s);
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
border-radius: 7px 7px 0 0;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(60, 133, 108, 1) 0%,
|
|
rgba(51, 191, 135, 1) 25%,
|
|
rgba(192, 93, 225, 1) 75%,
|
|
rgba(149, 87, 181, 1) 100%
|
|
);
|
|
}
|
|
|
|
.result-card__gradient-author {
|
|
color: var(--accent-foreground);
|
|
font-size: var(--step--2);
|
|
opacity: 0.85;
|
|
margin-bottom: 0.25rem;
|
|
display: block;
|
|
}
|
|
|
|
.result-card__gradient-title {
|
|
color: var(--accent-foreground);
|
|
font-size: var(--step--1);
|
|
font-weight: 600;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.result-card__authors {
|
|
font-size: var(--step--1);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.result-card__title {
|
|
font-size: var(--step--1);
|
|
color: var(--text-secondary);
|
|
line-height: 1.35;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.result-card__meta {
|
|
font-size: var(--step--2);
|
|
color: var(--accent-primary);
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Search controls bar */
|
|
.search-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-s);
|
|
padding: var(--space-xs) var(--space-m);
|
|
border-bottom: 1px solid var(--border-secondary);
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.search-filter-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3xs);
|
|
font-size: var(--step--2);
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
}
|
|
|
|
.search-filter-select {
|
|
font-size: var(--step--1);
|
|
padding: var(--space-3xs) var(--space-2xs);
|
|
padding-right: 1.75rem;
|
|
}
|
|
|
|
.search-filter-select:focus {
|
|
border: 2px solid var(--accent-primary);
|
|
}
|
|
|
|
.search-apply-btn,
|
|
.search-reset-link {
|
|
/* btn--sm classes handle styling; space kept for potential overrides */
|
|
}
|
|
|
|
/* Search results pagination */
|
|
.pagination-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--space-2xs);
|
|
padding: var(--space-m) 0;
|
|
}
|
|
|
|
.pagination-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 2.75rem;
|
|
min-height: 2.75rem;
|
|
padding: 0 var(--space-2xs);
|
|
border: 1px solid var(--border-secondary);
|
|
border-radius: var(--radius);
|
|
color: var(--text-primary);
|
|
font-size: var(--step--1);
|
|
text-decoration: none;
|
|
font-weight: 400;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.pagination-btn:hover:not(.disabled) {
|
|
border-color: var(--accent-primary);
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.pagination-btn.disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-size: var(--step--1);
|
|
color: var(--text-secondary);
|
|
padding: 0 var(--space-2xs);
|
|
}
|
|
|
|
.search-empty {
|
|
padding: var(--space-xl) var(--space-m);
|
|
color: var(--text-secondary);
|
|
font-size: var(--step-0);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Error message */
|
|
.search-error {
|
|
background: var(--search-error-bg);
|
|
border-left: 3px solid var(--search-error-border);
|
|
color: var(--search-error-color);
|
|
padding: var(--space-2xs) var(--space-s);
|
|
font-size: var(--step--1);
|
|
margin: var(--space-2xs) var(--space-m);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ---- Student popover ---- */
|
|
.student-popover {
|
|
position: absolute;
|
|
z-index: 200;
|
|
width: 300px;
|
|
background: var(--bg-primary, #fff);
|
|
border: 1px solid var(--border-primary, #ddd);
|
|
box-shadow: 0 4px 20px rgba(0,0,0,.13);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
pointer-events: auto;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.student-popover[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* ---- Student card (inside popover) ---- */
|
|
.student-card {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: background 0.12s;
|
|
border-bottom: 1px solid var(--border-primary, #eee);
|
|
}
|
|
|
|
.student-card:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.student-card:hover {
|
|
background: var(--bg-secondary, #f5f5f5);
|
|
}
|
|
|
|
.student-card__banner {
|
|
width: 100%;
|
|
height: 120px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.student-card__banner--gradient {
|
|
background-image: none;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(60, 133, 108, 1) 0%,
|
|
rgba(51, 191, 135, 1) 25%,
|
|
rgba(192, 93, 225, 1) 75%,
|
|
rgba(149, 87, 181, 1) 100%
|
|
);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-s);
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.student-card__gradient-author {
|
|
color: var(--accent-foreground);
|
|
font-size: var(--step--2);
|
|
opacity: 0.85;
|
|
margin-bottom: 0.25rem;
|
|
display: block;
|
|
}
|
|
|
|
.student-card__gradient-title {
|
|
color: var(--accent-foreground);
|
|
font-size: var(--step--1);
|
|
font-weight: 600;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.student-card__body {
|
|
padding: var(--space-xs) var(--space-s) var(--space-s);
|
|
}
|
|
|
|
.student-card__meta {
|
|
margin: 0 0 var(--space-3xs);
|
|
font-size: var(--step--2);
|
|
color: var(--text-secondary, #888);
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.student-card__title {
|
|
margin: 0 0 var(--space-3xs);
|
|
font-size: var(--step--1);
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.student-card__subtitle {
|
|
margin: 0 0 var(--space-3xs);
|
|
font-size: var(--step--2);
|
|
color: var(--text-secondary, #888);
|
|
font-style: italic;
|
|
}
|
|
|
|
.student-card__synopsis {
|
|
margin: var(--space-3xs) 0 0;
|
|
font-size: var(--step--2);
|
|
color: var(--text-secondary, #888);
|
|
line-height: 1.5;
|
|
}
|