diff --git a/content/search-results.php b/content/search-results.php index dfdd93f..eb3ae7e 100644 --- a/content/search-results.php +++ b/content/search-results.php @@ -88,6 +88,27 @@ +
\ No newline at end of file diff --git a/css/search-results.css b/css/search-results.css index 6cea2a1..96c6795 100644 --- a/css/search-results.css +++ b/css/search-results.css @@ -163,6 +163,89 @@ CSS für die Suchergebnis-Seite transform: translateX(3px); } +/* --- ERGEBNISSE PRO SEITE & PAGINIERUNG --- */ +.s-res-pagination-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; + padding-top: 1.5rem; + border-top: 1px solid #e2e8f0; +} + +/* Dropdown-Auswahl */ +.s-res-limit-selector { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.s-res-limit-label { + font-size: 0.9rem; + color: #4a5568; +} + +.s-res-limit-select { + padding: 0.35rem 1.5rem 0.35rem 0.5rem; + font-size: 0.9rem; + color: #2d3748; + background-color: #ffffff; + border: 1px solid #cbd5e1; + border-radius: 4px; + cursor: pointer; + outline: none; + transition: border-color 0.2s; + + /* Diskreter nativer Pfeil-Style */ + appearance: none; + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://w3.org' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.4rem center; + background-size: 1em; +} + +.s-res-limit-select:focus { + border-color: #3182ce; +} + +/* Seitennummern Navigation */ +.s-res-page-navigation { + display: flex; + gap: 0.25rem; +} + +.s-res-page-btn { + background-color: #ffffff; + border: 1px solid #cbd5e1; + color: #4a5568; + padding: 0.35rem 0.75rem; + font-size: 0.9rem; + font-weight: 500; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; +} + +.s-res-page-btn:hover:not(:disabled) { + background-color: #f8f9fa; + border-color: #cbd5e1; + color: #2d3748; +} + +.s-res-page-btn-active { + background-color: #3182ce; + border-color: #3182ce; + color: #ffffff; + cursor: default; +} + +.s-res-page-btn:disabled { + background-color: #f1f5f9; + border-color: #e2e8f0; + color: #94a3b8; + cursor: not-allowed; +} + /* --- RESPONSIVE DESIGN (MOBILGERÄTE) --- */ @media (max-width: 768px) { .s-res-layout-grid { @@ -170,4 +253,10 @@ CSS für die Suchergebnis-Seite gap: 1.5rem; margin: 1rem auto; } + .s-res-pagination-footer { + flex-direction: column; + gap: 1rem; + align-items: flex-start; + } } +