|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| /* --- Filtered result layout --------------------------------------------- */
| |
|
| |
| .filtered { | | .filtered { |
| --sr-bg: #fcfcfa;
| |
| --sr-surface: #ffffff;
| |
| --sr-surface-soft: #f7f7f4;
| |
| --sr-border: #e4e1d8;
| |
| --sr-border-strong: #d5d0c4;
| |
| --sr-text: #24221f;
| |
| --sr-muted: #6f6a61;
| |
| --sr-accent: #8f4d2f;
| |
|
| |
| display: flex; | | display: flex; |
| align-items: flex-start;
| | flex-wrap: nowrap; /* Make sure they stay in one row */ |
| gap: 1.25rem;
| |
| flex-wrap: nowrap; | |
| margin: 1.5rem 0;
| |
| } | | } |
|
| |
| /* --- Sidebar filters ---------------------------------------------------- */
| |
|
| |
|
| .filtered-filters { | | .filtered-filters { |
| flex: 0 0 280px; | | flex: 0 0 25%; /* Don't grow or shrink, fixed at 25% width */ |
| max-width: 280px; | | max-width: 25%; |
| box-sizing: border-box; | | box-sizing: border-box; |
| | | border-radius: 5px; |
| background: var(--sr-surface);
| | padding: 1rem; /* Optional: spacing inside the filters panel */ |
| border: 1px solid var(--sr-border);
| |
| border-radius: 14px; | |
| padding: 1rem; | |
| | |
| box-shadow:
| |
| 0 1px 2px rgba(0, 0, 0, 0.04),
| |
| 0 12px 32px rgba(0, 0, 0, 0.045);
| |
| } | | } |
|
| |
|
| .motif-filter .filtered-filters { | | .motif-filter .filtered-filters { |
| top: 5rem !important;
| | top: 5rem !important; |
| }
| | } |
| | |
| @media (min-width: 1071px) {
| |
| .filtered-filters {
| |
| position: sticky !important;
| |
| }
| |
| }
| |
| | |
| /* Filter headings / labels */
| |
| | |
| .filtered-filters h3,
| |
| .filtered-filters h4,
| |
| .filtered-filters legend,
| |
| .filtered-filters label {
| |
| color: var(--sr-text);
| |
| font-weight: 600;
| |
| letter-spacing: -0.01em;
| |
| }
| |
| | |
| .filtered-filters h3,
| |
| .filtered-filters h4,
| |
| .filtered-filters legend {
| |
| font-size: 0.95rem;
| |
| margin: 0 0 0.65rem;
| |
| }
| |
| | |
| /* Individual filter blocks */
| |
| | |
| .filtered-filters > div,
| |
| .filtered-filters fieldset {
| |
| margin-bottom: 1rem;
| |
| padding-bottom: 1rem;
| |
| border-bottom: 1px solid var(--sr-border);
| |
| }
| |
| | |
| .filtered-filters > div:last-child,
| |
| .filtered-filters fieldset:last-child {
| |
| margin-bottom: 0;
| |
| padding-bottom: 0;
| |
| border-bottom: 0;
| |
| }
| |
| | |
| /* Inputs */
| |
| | |
| .filtered-filters input,
| |
| .filtered-filters select {
| |
| max-width: 100%;
| |
| border: 1px solid var(--sr-border-strong);
| |
| border-radius: 9px;
| |
| padding: 0.45rem 0.6rem;
| |
| background: var(--sr-bg);
| |
| color: var(--sr-text);
| |
| }
| |
| | |
| .filtered-filters input:focus,
| |
| .filtered-filters select:focus {
| |
| outline: none;
| |
| border-color: var(--sr-accent);
| |
| box-shadow: 0 0 0 3px rgba(143, 77, 47, 0.14);
| |
| }
| |
| | |
| /* Checkboxes / values */
| |
| | |
| .filtered-filters label {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 0.45rem;
| |
| font-size: 0.88rem;
| |
| color: var(--sr-muted);
| |
| line-height: 1.35;
| |
| } | |
|
| |
|
| .filtered-filters input[type="checkbox"],
| | @media (min-width: 1071px) { |
| .filtered-filters input[type="radio"] { | | .filtered-filters { |
| accent-color: var(--sr-accent);
| | position: sticky !important; |
| | } |
| } | | } |
|
| |
| /* --- Results panel ------------------------------------------------------ */
| |
|
| |
|
| .filtered-views { | | .filtered-views { |
| flex: 1 1 auto; | | flex: 1 1 75%; /* Grow to take remaining space */ |
| min-width: 0;
| | max-width: 75%; |
| max-width: none; | |
| box-sizing: border-box; | | box-sizing: border-box; |
| | | border-radius: 5px; |
| background: var(--sr-surface);
| | padding: 1rem; /* Optional: spacing inside the views panel */ |
| border: 1px solid var(--sr-border);
| |
| border-radius: 14px; | |
| padding: 0.75rem; | |
| | |
| box-shadow:
| |
| 0 1px 2px rgba(0, 0, 0, 0.035),
| |
| 0 16px 36px rgba(0, 0, 0, 0.04);
| |
| }
| |
| | |
| /* --- Table styling ------------------------------------------------------ */ | |
| | |
| .filtered-table {
| |
| overflow: auto;
| |
| border-radius: 11px;
| |
| }
| |
| | |
| .filtered-table table {
| |
| width: 100%;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| margin: 0;
| |
| background: var(--sr-surface);
| |
| font-size: 0.92rem;
| |
| } | | } |
|
| |
|
| .filtered-table table thead th { | | .filtered-table table thead th { |
| position: sticky !important;
| | position: sticky !important; |
| top: 0;
| |
| z-index: 2;
| |
| | |
| background: var(--sr-surface-soft);
| |
| color: var(--sr-text);
| |
| font-weight: 650;
| |
| letter-spacing: -0.01em;
| |
| | |
| border-bottom: 1px solid var(--sr-border-strong);
| |
| padding: 0.7rem 0.75rem;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .filtered-table table tbody td {
| |
| padding: 0.65rem 0.75rem;
| |
| border-bottom: 1px solid var(--sr-border);
| |
| color: var(--sr-text);
| |
| vertical-align: top;
| |
| }
| |
| | |
| .filtered-table table tbody tr:last-child td {
| |
| border-bottom: 0;
| |
| }
| |
| | |
| .filtered-table table tbody tr:hover {
| |
| background: #faf8f3;
| |
| }
| |
| | |
| /* Links */
| |
| | |
| .filtered-table a,
| |
| .filtered-views a {
| |
| color: var(--sr-accent);
| |
| text-decoration: none;
| |
| font-weight: 500;
| |
| } | | } |
|
| |
|
| .filtered-table a:hover,
| | /* Optional: make it responsive */ |
| .filtered-views a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* --- DataTables / controls, if present --------------------------------- */
| |
| | |
| .filtered-views .dataTables_wrapper {
| |
| color: var(--sr-text);
| |
| }
| |
| | |
| .filtered-views .dataTables_length,
| |
| .filtered-views .dataTables_filter,
| |
| .filtered-views .dataTables_info,
| |
| .filtered-views .dataTables_paginate {
| |
| font-size: 0.86rem;
| |
| color: var(--sr-muted);
| |
| margin: 0.35rem 0;
| |
| }
| |
| | |
| .filtered-views .dataTables_filter input,
| |
| .filtered-views .dataTables_length select {
| |
| border: 1px solid var(--sr-border-strong);
| |
| border-radius: 9px;
| |
| padding: 0.35rem 0.55rem;
| |
| background: var(--sr-bg);
| |
| }
| |
| | |
| .filtered-views .paginate_button {
| |
| border-radius: 8px !important;
| |
| border: 1px solid transparent !important;
| |
| padding: 0.35rem 0.55rem !important;
| |
| color: var(--sr-muted) !important;
| |
| }
| |
| | |
| .filtered-views .paginate_button.current {
| |
| background: var(--sr-surface-soft) !important;
| |
| border-color: var(--sr-border) !important;
| |
| color: var(--sr-text) !important;
| |
| }
| |
| | |
| /* --- Responsive --------------------------------------------------------- */
| |
| | |
| @media (max-width: 1070px) { | | @media (max-width: 1070px) { |
| .filtered { | | .filtered { |
| flex-direction: column; | | flex-direction: column; /* Stack vertically on smaller screens */ |
| } | | } |
|
| |
|
| Line 238: |
Line 43: |
| .filtered-views { | | .filtered-views { |
| max-width: 100%; | | max-width: 100%; |
| width: 100%;
| | flex: 0 0 100%; |
| flex: 0 0 auto; | |
| }
| |
| | |
| .filtered-filters {
| |
| position: static !important;
| |
| } | | } |
| } | | } |
.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;
border-radius: 5px;
padding: 1rem; /* Optional: spacing inside the filters panel */
}
.motif-filter .filtered-filters {
top: 5rem !important;
}
@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-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%;
}
}