|
|
| Line 1: |
Line 1: |
| /* =========================================
| |
| CustomFiltered.css
| |
| Semantic ResultFormats: filtered
| |
| Matches site style: Inter, #FCFCFA, white cards, soft shadows
| |
| ========================================= */
| |
|
| |
| /* --- Main layout -------------------------------------------------------- */
| |
|
| |
| .filtered { | | .filtered { |
| --sr-bg: #FCFCFA;
| |
| --sr-surface: #fff;
| |
| --sr-surface-soft: #f8f8f5;
| |
| --sr-border: #e7e5df;
| |
| --sr-border-strong: #d6d3ca;
| |
| --sr-text: #111;
| |
| --sr-muted: #5f5f58;
| |
| --sr-focus: rgb(0 0 0 / 0.08);
| |
|
| |
| display: flex; | | display: flex; |
| align-items: flex-start;
| | flex-wrap: nowrap; /* Make sure they stay in one row */ |
| gap: 1rem;
| |
| flex-wrap: nowrap; | |
| margin: 1rem 0 2rem;
| |
| font-family: 'Inter', sans-serif;
| |
| } | | } |
|
| |
| /* --- Filter sidebar ----------------------------------------------------- */
| |
|
| |
|
| .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: 0.75rem; | |
| padding: 1rem; | |
| | |
| box-shadow:
| |
| 0 1px 3px 0 rgb(0 0 0 / 0.1),
| |
| 0 1px 2px -1px rgb(0 0 0 / 0.1);
| |
| } | | } |
|
| |
|
| .motif-filter .filtered-filters { | | .motif-filter .filtered-filters { |
| top: 5rem !important;
| | top: 5rem !important; |
| }
| | } |
| | |
| @media (min-width: 1071px) {
| |
| .filtered-filters {
| |
| position: sticky !important;
| |
| }
| |
| }
| |
| | |
| /* --- Filter typography -------------------------------------------------- */
| |
| | |
| .filtered-filters h3,
| |
| .filtered-filters h4,
| |
| .filtered-filters legend {
| |
| font-family: 'Prata', serif;
| |
| font-size: 1rem;
| |
| font-weight: 400;
| |
| color: var(--sr-text);
| |
| margin: 0 0 0.75rem;
| |
| }
| |
| | |
| .filtered-filters label {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 0.45rem;
| |
| | |
| font-size: 0.875rem;
| |
| font-weight: 500;
| |
| color: var(--sr-muted);
| |
| line-height: 1.35;
| |
| }
| |
| | |
| /* --- Filter groups ------------------------------------------------------ */
| |
| | |
| .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;
| |
| }
| |
| | |
| .filtered-filters fieldset {
| |
| min-width: 0;
| |
| border-left: 0;
| |
| border-right: 0;
| |
| border-top: 0;
| |
| }
| |
| | |
| /* --- Filter inputs ------------------------------------------------------ */
| |
| | |
| .filtered-filters input,
| |
| .filtered-filters select {
| |
| max-width: 100%;
| |
| box-sizing: border-box;
| |
| border: 1px solid var(--sr-border-strong);
| |
| border-radius: 0.5rem;
| |
| padding: 0.4rem 0.55rem;
| |
| background: #fff;
| |
| color: var(--sr-text);
| |
| font-family: 'Inter', sans-serif;
| |
| font-size: 0.875rem;
| |
| } | |
|
| |
|
| .filtered-filters input:focus,
| | @media (min-width: 1071px) { |
| .filtered-filters select:focus { | | .filtered-filters { |
| outline: none;
| | position: sticky !important; |
| border-color: #111;
| | } |
| box-shadow: 0 0 0 3px var(--sr-focus);
| |
| } | | } |
|
| |
| .filtered-filters input[type="checkbox"],
| |
| .filtered-filters input[type="radio"] {
| |
| width: auto;
| |
| margin: 0;
| |
| accent-color: #111;
| |
| }
| |
|
| |
| /* Range / number filters often generated by SRF */
| |
|
| |
| .filtered-filters input[type="number"],
| |
| .filtered-filters input[type="text"] {
| |
| width: 100%;
| |
| }
| |
|
| |
| .filtered-filters .ui-slider,
| |
| .filtered-filters .slider,
| |
| .filtered-filters .range-slider {
| |
| margin: 0.75rem 0.25rem;
| |
| }
| |
|
| |
| /* --- 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: 0.75rem; | |
| padding: 0.75rem; | |
| | |
| box-shadow:
| |
| 0 1px 3px 0 rgb(0 0 0 / 0.1),
| |
| 0 1px 2px -1px rgb(0 0 0 / 0.1);
| |
| }
| |
| | |
| /* --- Filtered table wrapper ------------------------------------------- */ | |
| | |
| .filtered-table {
| |
| overflow: auto;
| |
| border-radius: 0.5rem;
| |
| }
| |
| | |
| .filtered-table table {
| |
| width: 100%;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| margin: 0;
| |
| background: #fff;
| |
| font-family: 'Inter', sans-serif;
| |
| font-size: 0.925rem;
| |
| } | | } |
|
| |
|
| .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: 600;
| |
| | |
| border-bottom: 1px solid var(--sr-border-strong);
| |
| padding: 0.65rem 0.75rem;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .filtered-table table thead th:first-child {
| |
| border-top-left-radius: 0.5rem;
| |
| }
| |
| | |
| .filtered-table table thead th:last-child {
| |
| border-top-right-radius: 0.5rem;
| |
| } | | } |
|
| |
|
| .filtered-table table thead th a {
| | /* Optional: make it responsive */ |
| color: var(--sr-text);
| |
| text-decoration: none;
| |
| }
| |
| | |
| .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:hover {
| |
| background: var(--sr-bg);
| |
| }
| |
| | |
| .filtered-table table tbody tr:last-child td {
| |
| border-bottom: 0;
| |
| }
| |
| | |
| /* --- Links -------------------------------------------------------------- */
| |
| | |
| .filtered-table a,
| |
| .filtered-views a {
| |
| color: var(--sr-text);
| |
| font-weight: 500;
| |
| text-decoration: underline;
| |
| text-decoration-thickness: 1px;
| |
| text-underline-offset: 2px;
| |
| }
| |
| | |
| .filtered-table a:hover,
| |
| .filtered-views a:hover {
| |
| color: #000;
| |
| text-decoration-thickness: 1.5px;
| |
| }
| |
| | |
| /* --- DataTables controls, if the table view uses them ------------------ */
| |
| | |
| .filtered-views .dataTables_wrapper {
| |
| color: var(--sr-text);
| |
| font-family: 'Inter', sans-serif;
| |
| }
| |
| | |
| .filtered-views .dataTables_length,
| |
| .filtered-views .dataTables_filter,
| |
| .filtered-views .dataTables_info,
| |
| .filtered-views .dataTables_paginate {
| |
| font-size: 0.875rem;
| |
| color: var(--sr-muted);
| |
| margin: 0.35rem 0;
| |
| }
| |
| | |
| .filtered-views .dataTables_length select,
| |
| .filtered-views .dataTables_filter input {
| |
| border: 1px solid var(--sr-border-strong);
| |
| border-radius: 0.5rem;
| |
| padding: 0.35rem 0.55rem;
| |
| background: #fff;
| |
| color: var(--sr-text);
| |
| font-family: 'Inter', sans-serif;
| |
| }
| |
| | |
| .filtered-views .dataTables_filter input:focus,
| |
| .filtered-views .dataTables_length select:focus {
| |
| outline: none;
| |
| border-color: #111;
| |
| box-shadow: 0 0 0 3px var(--sr-focus);
| |
| }
| |
| | |
| .filtered-views .paginate_button {
| |
| border-radius: 0.5rem !important;
| |
| border: 1px solid transparent !important;
| |
| padding: 0.35rem 0.55rem !important;
| |
| color: var(--sr-muted) !important;
| |
| background: transparent !important;
| |
| }
| |
| | |
| .filtered-views .paginate_button:hover {
| |
| border-color: var(--sr-border) !important;
| |
| background: var(--sr-bg) !important;
| |
| color: var(--sr-text) !important;
| |
| }
| |
| | |
| .filtered-views .paginate_button.current,
| |
| .filtered-views .paginate_button.current:hover {
| |
| background: var(--sr-surface-soft) !important;
| |
| border-color: var(--sr-border) !important;
| |
| color: var(--sr-text) !important;
| |
| }
| |
| | |
| /* --- Bootstrap table compatibility ------------------------------------- */ | |
| | |
| .filtered-views .table,
| |
| .filtered-table .table {
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| .filtered-views .table-condensed > thead > tr > th,
| |
| .filtered-views .table-condensed > tbody > tr > td,
| |
| .filtered-table .table-condensed > thead > tr > th,
| |
| .filtered-table .table-condensed > tbody > tr > td {
| |
| padding: 0.65rem 0.75rem;
| |
| }
| |
| | |
| .filtered-views .table-hover > tbody > tr:hover,
| |
| .filtered-table .table-hover > tbody > tr:hover {
| |
| background-color: var(--sr-bg);
| |
| }
| |
| | |
| /* --- Responsive layout -------------------------------------------------- */
| |
| | |
| @media (max-width: 1070px) { | | @media (max-width: 1070px) { |
| .filtered { | | .filtered { |
| flex-direction: column; | | flex-direction: column; /* Stack vertically on smaller screens */ |
| } | | } |
|
| |
|
| Line 317: |
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;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 640px) {
| |
| .filtered {
| |
| gap: 0.75rem;
| |
| margin: 0.75rem 0 1.5rem;
| |
| }
| |
| | |
| .filtered-filters,
| |
| .filtered-views {
| |
| border-radius: 0.65rem;
| |
| padding: 0.75rem;
| |
| }
| |
| | |
| .filtered-table table {
| |
| font-size: 0.875rem;
| |
| }
| |
| | |
| .filtered-table table thead th,
| |
| .filtered-table table tbody td {
| |
| padding: 0.55rem 0.6rem;
| |
| } | | } |
| } | | } |