/** * NILU override: archive filter island. * * Loaded after the plugin stylesheet `nva-archive-filters`. * Base: plugins/nva/assets/css/nva-frontend/stubs/_archive-filters.css * Markup: templates/loop/filters.php + assets/js/src/templates/archive-filters/ * * Related: _archive.css (header + #nva-archive-results), _pagination.css, * _publication-card.css. * * Native controls only (no wp-components on the public archive). * * Structure — NVA filters on * -------------------------- * * #nva-archive-filters.nva-archive-filters PHP mount; React owns children * .nva-archive-filters__controls * .nva-archive-filters__toolbar * .nva-archive-filters__search-wrap max-width 800px * form.nva-archive-filters__search * .nva-archive-filters__search-input * .nva-archive-filters__search-btn submit * .nva-archive-filters__toolbar-row * .nva-archive-filters__toolbar-start Filters + Sort (left) * .nva-archive-filters__filter-btn-wrap * .nva-archive-filters__filter-btn icon + Filters label * .nva-archive-filters__filter-badge count when > 0 * .nva-archive-filters__sort * .nva-archive-filters__sort-btn icon + Sort by * .nva-archive-filters__sort-panel omitted when closed * .nva-archive-filters__sort-list[role=listbox] * .nva-archive-filters__sort-option[aria-selected] * .nva-archive-filters__toolbar-view optional grid/list (right) * .nva-archive-filters__view-toggles * .nva-archive-filters__toolbar-btn[aria-pressed] grid / list * .nva-archive-filters__chips omitted when empty * .nva-archive-filters__chip--primary | --secondary * .nva-archive-filters__chip-label * .nva-archive-filters__chip-remove * .nva-archive-filters__reset-btn Clear filters * dialog.nva-archive-filters__modal not in DOM when closed * .nva-archive-filters__modal-header * .nva-archive-filters__modal-title Filters * .nva-archive-filters__modal-close * .nva-archive-filters__modal-body * .nva-archive-filters__status loading / error * .nva-archive-filters__form * .nva-archive-filters__row--2 category + author * .nva-archive-filters__combo * .nva-archive-filters__label * .nva-archive-filters__combo-trigger * .nva-archive-filters__combo-trigger-label * .nva-archive-filters__combo-trigger-icon * .nva-archive-filters__combo-panel * .nva-archive-filters__combo-search * .nva-archive-filters__combo-list * .nva-archive-filters__combo-option * .nva-archive-filters__combo-empty * .nva-archive-filters__field-warning empty-draft field * .nva-archive-filters__year-range * .nva-archive-filters__year-range-inputs * .nva-archive-filters__year-range-control * .nva-archive-filters__year-range-sublabel * .nva-archive-filters__number * .nva-archive-filters__dual-slider optional (nva_archive_year_slider) * .nva-archive-filters__dual-slider-track * .nva-archive-filters__dual-slider-range --range-from / --range-to * .nva-archive-filters__slider--from * .nva-archive-filters__slider--to * .nva-archive-filters__form-warning predicted 0 results * .nva-archive-filters__modal-footer * .nva-archive-filters__edit-btn Apply filters * .nva-archive-filters__clear-btn Clear filters (stays open; does not reset sort/per page) * .nva-archive-filters__error publications REST failure * * html.nva-archive-filters-modal-open document scroll lock * * #nva-archive-results.nva-archive-results PHP island (not React) * [.nva-archive-results--busy] fetching spinner * * Compatible / noscript: .nva-archive-search inside .nva-archive-filters * (templates/loop/search-form.php). */ #site #content .nva-archive-filters { --nva-filter-accent: #053F53; --nva-filter-on-accent: #E9FEFF; --nva-filter-accent-hover: #086483; --nva-filter-border: #ABB8C3; --nva-filter-surface: #fff; --nva-filter-focus-ring: 0 0 0 5px var(--nva-filter-accent); --nva-filter-columns: repeat(2, minmax(0, 1fr)); --nva-filter-column-gap: 0.5em; } #site #content .nva-archive-filters__row--2, #site #content .nva-archive-filters__year-range-inputs, #site #content .nva-archive-filters__modal .nva-archive-filters__sort-row { display: grid; grid-template-columns: var(--nva-filter-columns); gap: var(--nva-filter-column-gap); } /* Mount + controls ------------------------------------------------------- */ /* #nva-archive-filters.nva-archive-filters { } */ /* .nva-archive-filters__controls { } */ /* Toolbar (search + Filters/Sort left + view toggles right) -------------- */ /* .nva-archive-filters__toolbar { } */ #site #content .nva-archive-filters__search-wrap { max-width: 560px; margin-top: 5rem; } /* .nva-archive-filters__search { } */ #site #content .nva-archive-filters__search-input { padding-left: 3.5rem; color: var(--nva-publication-text, #1e1e1e); background-color: var(--nva-filter-surface); background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5C14.3 5 17 7.7 17 11C17 12.4 16.5 13.7 15.7 14.7L19.5 18.5L18.4 19.6L14.6 15.8C13.6 16.6 12.3 17.1 10.9 17.1C7.6 17.1 4.9 14.4 4.9 11.1C4.9 7.8 7.7 5 11 5ZM11 15.5C13.5 15.5 15.5 13.5 15.5 11C15.5 8.5 13.5 6.5 11 6.5C8.5 6.5 6.5 8.5 6.5 11C6.5 13.5 8.5 15.5 11 15.5Z' fill='%231E1E1E'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.65rem center; background-size: 24px 24px; padding: 0.6em 0.6em 0.6em 3.5rem; border: solid 1px var(--nva-filter-border); } /* .nva-archive-filters__search-input:focus { } */ /* .nva-archive-filters__search-btn { } */ /* .nva-archive-filters__toolbar-row { } */ /* .nva-archive-filters__toolbar-start { } */ /* .nva-archive-filters__toolbar-view { } */ #site #content .nva-archive-filters__toolbar .nva-archive-filters__sort { display: none; } #site #content .nva-archive-filters__modal .nva-archive-filters__sort-row { margin: 1.5rem 0 0; } #site #content .nva-archive-filters__modal .nva-archive-filters__sort { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; min-width: 0; width: 100%; margin: 0; } #site #content .nva-result-count-bar .nva-archive-per-page { display: none; } #site #content .nva-archive-filters__modal .nva-archive-per-page { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; min-width: 0; width: 100%; margin: 0; select { width: 100%; box-sizing: border-box; padding: 5.5px; } } #site #content .nva-archive-filters__modal .nva-archive-filters__sort-btn { width: 100%; box-sizing: border-box; } #site #content .nva-archive-filters__sort-btn { &:hover { color: var(--nva-filter-accent); } } /* .nva-archive-filters__sort-panel { } */ /* .nva-archive-filters__sort-list { } */ /* .nva-archive-filters__sort-option { } */ /* .nva-archive-filters__view-toggles { } */ /* .nva-archive-filters__toolbar-actions { } */ /* .nva-archive-filters__toolbar-btn { } */ /* .nva-archive-filters__toolbar-btn:hover { } */ /* .nva-archive-filters__toolbar-btn:focus-visible { } */ /* .nva-archive-filters__toolbar-btn[aria-pressed="true"] { } */ #site #content .nva-archive-filters__filter-btn { border-radius: 8px; border: solid 1px var(--nva-filter-accent); color: var(--nva-filter-accent); transition: all ease 0.3s; svg { fill: var(--nva-filter-accent); } } /* .nva-archive-filters__filter-btn-wrap { } */ #site #content .nva-archive-filters__filter-badge { background: var(--nva-filter-accent); } /* Chips ------------------------------------------------------------------ */ /* .nva-archive-filters__chips { } */ #site #content .nva-archive-filters__chip { padding: 0.8em 0.25em 0.8em 1em; } #site #content .nva-archive-filters__chip--primary { color: var(--nva-filter-accent); } /* .nva-archive-filters__chip--secondary { } */ /* .nva-archive-filters__chip-label { } */ #site #content .nva-archive-filters__chip-remove { padding: 0 0 0.1em 0; font-size: 20px; line-height: 0; color: var(--nva-filter-accent); } /* .nva-archive-filters__chip-remove:hover { } */ #site #content .nva-archive-filters__edit-btn, #site #content .nva-archive-filters__search-btn { background: var(--nva-filter-accent); color: var(--nva-filter-on-accent); border-radius: 8px; padding: 8px 16px; transition: all ease 0.3s; font-weight: 500; } #site #content .nva-archive-filters__edit-btn:hover, #site #content .nva-archive-filters__edit-btn:focus, #site #content .nva-archive-filters__search-btn:hover, #site #content .nva-archive-filters__search-btn:focus, #site #content .nva-archive-filters__search-btn:focus-visible, #site #content .nva-archive-filters__filter-btn:focus, #site #content .nva-archive-filters__filter-btn:hover { background: var(--nva-filter-accent-hover); color: var(--nva-filter-on-accent); svg { fill: var(--nva-filter-on-accent); } } #site #content .nva-archive-filters__reset-btn, #site #content .nva-archive-filters__clear-btn { display: inline-flex; align-items: flex-end; gap: 0; color: var(--nva-filter-accent); font-size: 15px; border-radius: 8px; padding: 8px 16px; } #site #content .nva-archive-filters__reset-btn::before, #site #content .nva-archive-filters__clear-btn::before { content: ""; display: block; width: 24px; height: 24px; flex-shrink: 0; background-color: color-mix(in srgb, var(--nva-filter-accent) 60%, transparent); mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5.5C11.5346 5.49986 11.0806 5.64404 10.7006 5.91269C10.3205 6.18133 10.0331 6.56121 9.878 7H14.122C13.9667 6.56129 13.6793 6.18149 13.2993 5.91287C12.9193 5.64425 12.4654 5.50001 12 5.5ZM12 4C11.1356 4.00001 10.2977 4.29859 9.62801 4.84525C8.95836 5.3919 8.49807 6.15306 8.325 7H5V8.5H6.27L7.088 17.497C7.15014 18.1805 7.46559 18.816 7.97239 19.2788C8.47919 19.7415 9.14071 19.9981 9.827 19.998H14.174C14.86 19.9978 15.5211 19.7413 16.0277 19.2788C16.5342 18.8163 16.8496 18.1811 16.912 17.498L17.73 8.5H19V7H15.675C15.5019 6.15306 15.0416 5.3919 14.372 4.84525C13.7023 4.29859 12.8644 4.00001 12 4ZM16.224 8.5H7.776L8.582 17.361C8.6102 17.6717 8.75357 17.9606 8.98394 18.171C9.21431 18.3814 9.51502 18.498 9.827 18.498H14.174C14.486 18.498 14.7867 18.3814 15.0171 18.171C15.2474 17.9606 15.3908 17.6717 15.419 17.361L16.224 8.5Z' fill='%23000'/%3E%3C/svg%3E") center / 24px 24px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5.5C11.5346 5.49986 11.0806 5.64404 10.7006 5.91269C10.3205 6.18133 10.0331 6.56121 9.878 7H14.122C13.9667 6.56129 13.6793 6.18149 13.2993 5.91287C12.9193 5.64425 12.4654 5.50001 12 5.5ZM12 4C11.1356 4.00001 10.2977 4.29859 9.62801 4.84525C8.95836 5.3919 8.49807 6.15306 8.325 7H5V8.5H6.27L7.088 17.497C7.15014 18.1805 7.46559 18.816 7.97239 19.2788C8.47919 19.7415 9.14071 19.9981 9.827 19.998H14.174C14.86 19.9978 15.5211 19.7413 16.0277 19.2788C16.5342 18.8163 16.8496 18.1811 16.912 17.498L17.73 8.5H19V7H15.675C15.5019 6.15306 15.0416 5.3919 14.372 4.84525C13.7023 4.29859 12.8644 4.00001 12 4ZM16.224 8.5H7.776L8.582 17.361C8.6102 17.6717 8.75357 17.9606 8.98394 18.171C9.21431 18.3814 9.51502 18.498 9.827 18.498H14.174C14.486 18.498 14.7867 18.3814 15.0171 18.171C15.2474 17.9606 15.3908 17.6717 15.419 17.361L16.224 8.5Z' fill='%23000'/%3E%3C/svg%3E") center / 24px 24px no-repeat; } /* Modal (native ) ------------------------------------------------ */ /* html.nva-archive-filters-modal-open { } */ /* .nva-archive-filters__modal { } */ /* .nva-archive-filters__modal::backdrop { } */ /* .nva-archive-filters__modal-header { } */ /* .nva-archive-filters__modal-title { } */ /* .nva-archive-filters__modal-close { } */ /* .nva-archive-filters__modal-body { } */ /* .nva-archive-filters__modal-footer { } */ /* .nva-archive-filters__clear-btn { } */ /* .nva-archive-filters__field-warning { } */ /* .nva-archive-filters__form-warning { } */ /* Form fields ------------------------------------------------------------ */ /* .nva-archive-filters__status { } */ /* .nva-archive-filters__form { } */ /* .nva-archive-filters__row { } */ /* .nva-archive-filters__row--2 { } */ /* .nva-archive-filters__field { } */ /* .nva-archive-filters__label { } */ /* .nva-archive-filters__select { } */ /* .nva-archive-filters__number { } */ /* Combobox (category / author) ------------------------------------------- */ /* .nva-archive-filters__combo { } */ /* .nva-archive-filters__combo-trigger { } */ /* .nva-archive-filters__combo-trigger-label { } */ /* .nva-archive-filters__combo-trigger-label--placeholder { } */ /* .nva-archive-filters__combo-trigger-icon { } */ /* .nva-archive-filters__combo-panel { } */ /* .nva-archive-filters__combo-search { } */ /* .nva-archive-filters__combo-list { } */ /* .nva-archive-filters__combo-option { } */ /* .nva-archive-filters__combo-option--split { } */ /* .nva-archive-filters__combo-empty { } */ /* Year range ------------------------------------------------------------- */ /* .nva-archive-filters__year-range { } */ /* .nva-archive-filters__year-range-inputs { } */ /* .nva-archive-filters__year-range-control { } */ /* .nva-archive-filters__year-range-sublabel { } */ /* .nva-archive-filters__dual-slider { } */ /* .nva-archive-filters__dual-slider-track { } */ /* .nva-archive-filters__dual-slider-range { } */ /* .nva-archive-filters__slider { } */ /* .nva-archive-filters__slider--from { } */ /* .nva-archive-filters__slider--to { } */ /* Results island busy state (PHP markup, CSS spinner) -------------------- */ /* .nva-archive-results--busy { } */ /* .nva-archive-results--busy .nva-publication-card-list { } */ /* Error (publications REST) ---------------------------------------------- */ /* .nva-archive-filters__error { } */ /* Compatible / noscript GET search (loop/search-form.php) ---------------- */ /* .nva-archive-search { } */ /* .nva-archive-search__form { } */ /* .nva-archive-search__input { } */ /* Focus rings ------------------------------------------------------------- */ #site #content .nva-archive-filters__select:hover, #site #content .nva-archive-filters__number:hover, #site #content .nva-archive-filters__combo-trigger[aria-expanded="true"] { border-color: var(--nva-filter-accent); } #site #content .nva-archive-filters__search-input:focus, #site #content .nva-archive-filters__select:focus, #site #content .nva-archive-filters__number:focus, #site #content .nva-archive-filters__combo-search:focus, #site #content .nva-archive-filters__combo-trigger:focus-visible { border-color: var(--nva-filter-accent); box-shadow: var(--nva-filter-focus-ring); outline: none; } #site #content .nva-archive-filters__search-btn:focus-visible, #site #content .nva-archive-filters__edit-btn:focus-visible, #site #content .nva-archive-filters__sort-option:focus-visible, #site #content .nva-archive-filters__toolbar-btn:focus-visible, #site #content .nva-archive-filters__filter-btn:focus-visible, #site #content .nva-archive-filters__sort-btn:focus-visible, #site #content .nva-archive-filters__clear-btn:focus-visible, #site #content .nva-archive-filters__reset-btn:focus-visible, #site #content .nva-archive-filters__modal-close:focus-visible { box-shadow: var(--nva-filter-focus-ring); outline: none; } /* .nva-archive-search__button { } */