/* --------------------------------------------------------------------------- * SJR Coburg – Freizeit-Anpassungen * * Ersetzt die frühere Änderung an gmw-location-functions.php (Zeilen 742–771), * die das Markup der Feld-Labels umgeschrieben hat. * * Ausgangs-Markup von GEO my WP (unverändert, Original): * *
  • * E-Mail: * … *
    • * * Das li trägt den Feldnamen bereits als Klasse — wir brauchen also keinen * Eingriff ins PHP, um das passende Icon zu setzen. * * Barrierefreiheit: Der Labeltext wird nur optisch entfernt, nicht aus dem * Quelltext. Screenreader lesen weiterhin „E-Mail:" vor. Die frühere Lösung * mit sr-only erreichte dasselbe, brauchte dafür aber eine Plugin-Änderung. * * Die Icons liegen im Child-Theme unter img/. Der Pfad wird über die * CSS-Variablen unten gesetzt, damit das Theme sie überschreiben kann. * ------------------------------------------------------------------------- */ :root { --sjr-icon-mail: url('../../../themes/schaumermal/img/mail.svg'); --sjr-icon-phone: url('../../../themes/schaumermal/img/phone.svg'); --sjr-icon-web: url('../../../themes/schaumermal/img/web.svg'); } /* Abstand der Einträge — entspricht der alten Theme-Regel */ ul.gmw-location-meta li.field, ul.widget ul.gmw-location-meta li.field { margin-bottom: 12px; } /* Labeltext optisch ausblenden, für Screenreader erhalten. Die Standard-Technik: aus dem sichtbaren Bereich clippen, statt display:none oder font-size:0 zu verwenden. */ ul.gmw-location-meta li.field.email .label, ul.gmw-location-meta li.field.phone .label, ul.gmw-location-meta li.field.website .label, ul.gmw-location-meta li.field.url .label, ul.gmw-location-meta li.field.site .label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Icon an die Stelle des Labels setzen */ ul.gmw-location-meta li.field.email::before, ul.gmw-location-meta li.field.phone::before, ul.gmw-location-meta li.field.website::before, ul.gmw-location-meta li.field.url::before, ul.gmw-location-meta li.field.site::before { content: ""; display: inline-block; width: 25px; height: 22px; margin-right: 10px; vertical-align: middle; background-repeat: no-repeat; background-position: center center; } ul.gmw-location-meta li.field.email::before { background-image: var(--sjr-icon-mail); } ul.gmw-location-meta li.field.phone::before { background-image: var(--sjr-icon-phone); } ul.gmw-location-meta li.field.website::before, ul.gmw-location-meta li.field.url::before, ul.gmw-location-meta li.field.site::before { background-image: var(--sjr-icon-web); } /* Wert neben dem Icon — entspricht der alten Theme-Regel */ ul.gmw-location-meta li.field span.info { margin-left: 10px; font-size: 0.815rem; vertical-align: middle; } /* --------------------------------------------------------------------------- * Aufklappbarer Filterblock * ------------------------------------------------------------------------- */ .sjr-filter-card .card-header { padding: 0; } .sjr-filter-card .card-header .btn-link { width: 100%; text-decoration: none; padding: 0.375rem 0.75rem; /* Bootstrap-Standard; ergibt 38 px Kopfhöhe wie live */ /* * Mittig, mit dem Pfeil direkt hinter der Beschriftung — so wie bisher. * * Das Theme zentriert über den Selektor `.card-header h5`, der auf das * ELEMENT h5 zielt. Unsere Überschrift ist aus semantischen Gründen ein *

    , deshalb greift die Theme-Regel nicht und wir zentrieren * hier selbst. */ text-align: center; } .sjr-filter-card .card-header .btn-link .ico-back-to-overview { display: inline-block; vertical-align: middle; margin-left: 0.5rem; } /* Tastaturbedienung sichtbar machen — fehlte in der alten Umsetzung */ .sjr-filter-card .card-header .btn-link:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } /* Pfeil dreht sich beim Aufklappen */ .sjr-filter-card .btn-link .ico-back-to-overview { transition: transform 0.2s ease; } .sjr-filter-card .btn-link[aria-expanded="true"] .ico-back-to-overview { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .sjr-filter-card .btn-link .ico-back-to-overview { transition: none; } } /* --------------------------------------------------------------------------- * Bildergalerie der Freizeittipps * * Ersetzt die Darstellung von InPost Gallery. Die Bilder standen dort * gestapelt in der Seitenleiste (Shortcode mit show_in_popup="0"), * das bilden wir hier nach. * ------------------------------------------------------------------------- */ .sjr-galerie { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; } .sjr-galerie img.sjr-galerie-bild { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } /* --------------------------------------------------------------------------- * Seitenleiste der Detailseite: Adresse und Kontakt wie bisher * * GEO my WP 4.5.5.4 gestaltet die Ausgabe von [gmw_single_location] neu: * weiße Kästen mit Rahmen und Schatten, 15/20 px Innenabstand, ein eigenes * Pin-Symbol vor jeder Adresszeile. * * Das Theme setzt diese Kästen eigentlich zurück * (style.css: div.gmw-single-location-wrapper { border: 0; … }), verliert aber * gegen die spezifischere Plugin-Regel `body div.gmw-single-location-wrapper`. * Die Regeln hier sind bewusst spezifischer. * ------------------------------------------------------------------------- */ /* Kästen auflösen */ body #secondary div.gmw-single-location-wrapper, body .poi div.gmw-single-location-wrapper { display: block; border: 0; border-radius: 0; background: transparent; box-shadow: none; margin: 0; padding: 0; } body #secondary div.gmw-single-location-wrapper .gmw-sl-element { padding: 0; } /* Nur ein Pin: den großen orangen liefert das Theme als Hintergrund von div.poi */ body .poi div.gmw-single-location-wrapper i.gmw-location-icon { display: none; } /* Adresszeilen wie bisher: dunkler Text, übereinander mit Zeilenabstand. 4.5.5.4 verlinkt die Adresse auf Google Maps — der Link bleibt erhalten, sieht aber aus wie vorher. Das Theme färbt Links mit `#page a { … !important }`, daher hier ebenfalls !important. */ body .poi div.gmw-single-location-wrapper { line-height: 31px; /* gemessen auf der Live-Seite */ } #page .poi .gmw-sl-address .address a, body .poi .gmw-sl-address .address a { color: inherit !important; text-decoration: none; } #page .poi .gmw-sl-address .address a:hover, body .poi .gmw-sl-address .address a:hover { text-decoration: underline; } /* Kontaktzeilen: Maße der Live-Seite (Zeilenhöhe 24 px, Raster 36 px, Text 35 px hinter dem Symbolbeginn, 35 px Abstand zur Adresse) */ body #secondary div.gmw-sl-location-metas { margin-top: 5px; } body #secondary ul.gmw-location-meta li.field { margin-bottom: 12px; line-height: 24px; } body #secondary ul.gmw-location-meta li.field span.info { margin-left: 0; } /* --------------------------------------------------------------------------- * Filterblöcke auf der Startseite * * Werte per getComputedStyle auf der Live-Seite gemessen. * * Der orange Reiter („KATEGORIE(N) wählen") hing früher an einem , das * der alte Programmierer in die Label-Ausgabe geschrieben hatte. GEO my WP * 4.5.5.4 bietet für Taxonomie-Labels keinen Ausgabefilter (der Filter ist im * Plugin auskommentiert), das lässt sich also nicht mehr sauber * einsetzen. Deshalb wird hier das Label selbst zum Reiter. * ------------------------------------------------------------------------- */ /* * Selektor mit fünf Klassen: gmw.forms.min.css greift mit * `.gmw-form-wrapper .gmw-form-field-wrapper label:not(…):not(…)` (vier) und * gewann vorher bei Schriftgröße, Zeilenhöhe und Innenabstand. * * Maße der Live-Seite: Reiter 22 px hoch, ragt 10 px über den Kasten, * Symbolreihe beginnt 15 px unter der Kastenoberkante. */ body div.gmw-form-wrapper.horizontal-gray .gmw-form-field-wrapper.gmw-checkbox-taxonomy-wrapper > label.gmw-field-label { display: table !important; margin: -12px auto 3px !important; /* -12 = -10 Überstand - 2 Rahmen */ padding: 2px 5px; background-color: #FFBC62; color: #fff !important; font-size: 12px; font-weight: 400; letter-spacing: 2px; line-height: 18px; text-transform: none !important; } /* Einträge: keine Aufzählungspunkte, Schreibweise wie gepflegt */ body div.gmw-form-wrapper .gmw-checkbox-taxonomy-wrapper ul.gmw-checkbox-level-top, body div.gmw-form-wrapper .gmw-checkbox-taxonomy-wrapper ul.gmw-checkbox-level-top li { list-style: none; padding-left: 0; } body div.gmw-form-wrapper .gmw-checkbox-taxonomy-wrapper ul.gmw-checkbox-level-top li { margin: 0; text-align: center; } body div.gmw-form-wrapper .gmw-checkbox-taxonomy-wrapper ul.gmw-checkbox-level-top li label { display: inline-block; text-transform: none !important; letter-spacing: normal; line-height: 14px; word-break: normal; overflow-wrap: normal; hyphens: manual; } /* Die eigentliche Checkbox ist unsichtbar — ausgewählt wird über das Symbol. Visuell versteckt, für Tastatur und Screenreader weiter erreichbar. */ body div.gmw-form-wrapper .gmw-checkbox-taxonomy-wrapper input.gmw-taxonomy-checkbox { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Tastaturfokus am Symbol sichtbar machen */ body div.gmw-form-wrapper .gmw-checkbox-taxonomy-wrapper input.gmw-taxonomy-checkbox:focus-visible + img.category-icon { outline: 2px solid #F98D14; outline-offset: 2px; border-radius: 50%; } /* Ergebnisüberschrift „80 Freizeittipps": kein Kasten */ body div.gmw-results-wrapper div.gmw-results-message { border: 0; background: transparent; box-shadow: none; margin: 25px 0 0; padding: 7px 15px; } /* Beschriftung der Symbole: Größe aus dem Theme. gmw.forms.min.css (neu in 4.x) setzt alle Formular-Labels auf 14 px mit 5 px Innenabstand — per `label:not(…):not(…)` spezifischer als das Theme. Werte wie im Theme: 0,65 rem, ab 768 px Breite 0,75 rem. */ body div.gmw-form-wrapper.horizontal-gray .gmw-checkbox-taxonomy-wrapper ul.gmw-checkbox-level-top li label { font-size: 0.65rem; padding: 0; } @media (min-width: 768px) { body div.gmw-form-wrapper.horizontal-gray .gmw-checkbox-taxonomy-wrapper ul.gmw-checkbox-level-top li label { font-size: 0.75rem; } } /* Beschriftungsfarbe der Filtereinträge wie live (#555). gmw.forms.min.css setzt #2c3e50. */ body div.gmw-form-wrapper.horizontal-gray .gmw-checkbox-taxonomy-wrapper ul.gmw-checkbox-level-top li label { color: #555; } /* Symbolreihe ohne Außenabstand unten (Bootstrap/GMW: 16 px) — sonst sind die Kästen 14 px höher als live */ body div.gmw-form-wrapper.horizontal-gray .gmw-checkbox-taxonomy-wrapper ul.gmw-checkbox-level-top { margin: 0; } /* Beschriftung passt sich dem Text an statt die volle Breite zu nehmen */ body div.gmw-form-wrapper.horizontal-gray .gmw-checkbox-taxonomy-wrapper ul.gmw-checkbox-level-top li label { display: inline-block; /* gmw.forms.min.css setzt block — mit vier Klassen */ width: auto; max-width: 100%; }