/* ================================================ Tydal Reviews Dark Mode – Komplettes Custom CSS ================================================ */ /* --- 1) Grundlegende Arial‐Schrift für alle Tydal‐Elemente und Unterelemente --- */ /* Wir zielen auf #panel-nav, auf alle untergeordneten Elemente (*) sowie auf das Widget‐Iframe und dessen Inhalte (z.B. #wizard). */ #panel-nav, #panel-nav *, .tydal-reviews-iframe-panel-wrapper.page-width.wrapper, .tydal-reviews-iframe-panel-wrapper.page-width.wrapper *, #wizard, #wizard * { font-family: Arial, sans-serif !important; /* Browser‐safe Schriftfamilie überall erzwingen */ } /* :contentReference[oaicite:5]{index=5} */ .review-reply-text-intro{ font-weight: bold !important; margin-bottom: 10px !important; } .review-reply{ margin-top: 20px !important; color: white !important; } /* --- 2) Überschreibe horizontale Linien (hr) vollständig --- */ hr { display: none !important; /* Versteckt alle

-Trennlinien im Widget */ } /* :contentReference[oaicite:6]{index=6} */ /* --- 3) Review‐Summary‐Titel korrekt einblenden --- */ .review-summary-title { display: ruby-text !important; /* Spezifische Darstellung des Titels (Tydal-Stil) */ } /* :contentReference[oaicite:7]{index=7} */ /* --- 4) Sterne-Icons in der Summenbewertung anpassen --- */ div.tydal-star-wrapper svg:not(:first-child) { margin-left: 10px !important; /* Abstand zwischen Sternen */ color: white !important; /* Weiße Sterndarstellung */ } /* :contentReference[oaicite:8]{index=8} */ /* --- 5) Rating‐Zahl (z.B. „4.5“) anpassen --- */ .summary-rating { color: white !important; font-size: 24px !important; margin-right: 10px !important; } /* :contentReference[oaicite:9]{index=9} */ /* --- 6) Gesamtanzahl der Reviews (z.B. „32 Reviews“) zentrieren --- */ .review-summary-total-reviews { color: white !important; text-align: center !important; } /* :contentReference[oaicite:10]{index=10} */ /* --- 7) „Be the first to review“‐Text anpassen (falls vorhanden) --- */ p.first-review-text, p.first-review-text a { color: white !important; } /* :contentReference[oaicite:11]{index=11} */ /* --- 8) Panel‐Container (#panel-nav) auf Schwarz setzen und zentrieren --- */ #panel-nav { align-items: center !important; /* Zentriert horizontal (flex‐Container) */ flex-direction: column !important; /* Elemente untereinander anordnen */ padding: 20px 0 !important; /* Oben/Unten 20px, Links/Rechts 0 */ background-color: #151515 !important; /* Hintergrund schwarz (Dark Mode) */ } /* :contentReference[oaicite:12]{index=12} */ /* --- 9) „Write a Review“-Button komplett stylen --- */ #panel-nav #write-review { box-sizing: content-box; /* Padding zur Box‐Größe addiert */ width: auto; /* Button‐Breite passt sich Inhalt an */ padding: 10px !important; /* Innenabstand 10px (oben/rechts/unten/links) */ background-color: #D51C29 !important; /* Rot‐Ton des Buttons */ transition: padding 0.2s ease, /* Weicher Übergang bei Hover */ background-color 0.2s ease; border-radius: 10px !important; /* Abgerundete Ecken (10px Radius) */ display: block !important; /* Zum Block‐Element machen (zentriert dann mit margin) */ margin: 20px auto !important; /* Oben/Unten 20px, Links/Rechts auto (zentriert) */ font-family: Arial, sans-serif !important; font-size: 15px !important; font-weight: bold !important; color: white !important; border: none !important; /* Falls Theme einen Rahmen setzt, entfernen */ } /* :contentReference[oaicite:13]{index=13} */ #panel-nav #write-review:hover { padding: 12px !important; /* Innenabstand um 2px vergrößern */ background-color: #B01720 !important; /* Dunklere Rot‐Variante beim Hover */ } /* :contentReference[oaicite:14]{index=14} */ /* --- 10) Review Cards: Details‐Bereich (Text) auf Schwarz setzen --- */ .review-card .review-details { background-color: #151515 !important; /* Schwarzer Hintergrund hinter dem Review‐Text */ } /* :contentReference[oaicite:15]{index=15} */ /* --- 11) Review‐Bild: Container runden & overflow verstecken --- */ .review-card .review-image-wrapper { background-color: transparent !important; /* Transparent, damit keine weiße Fläche dahinter */ border-radius: 20px !important; /* Abgerundeter Container mit 20px Radius */ overflow: hidden !important; /* Alles außerhalb der abgerundeten Ecken abschneiden */ } /* :contentReference[oaicite:16]{index=16} */ /* --- 12) Bild selbst: transparenten Hintergrund erzwingen & runden --- */ .review-card .review-image-wrapper img { display: block !important; width: 100% !important; /* Füllt den Container komplett */ height: auto !important; /* Behält das Seitenverhältnis bei */ background: transparent !important; /* Überschreibt Inline‐Shorthand „background: white“ */ border-radius: 20px !important; /* Gleicher Radius wie Container */ } /* :contentReference[oaicite:17]{index=17} */ /* --- 13) Sicherheitshalber: Falls kein Wrapper existiert, auf alle in .review-card zielen --- */ ./* Beispiel: 20px abgerundete Ecken via clip-path */ /* Ziel: Alle IMG-Tags, die explizit inline ‚background: rgb(255,255,255)‘ bekommen */ iframe .review-card img[style*="background: rgb(255, 255, 255)"] { background: transparent !important; /* überschreibt Inline-Shorthand komplett */ display: block !important; width: 100% !important; height: auto !important; border-radius: 20px !important; /* runde Ecken unabhängig von overflow */ } /* :contentReference[oaicite:18]{index=18} */ /* --- 14) Autorenname: Weiß, halb fett, unterstrichen mit weiß --- */ .author-name { color: white !important; font-weight: 500 !important; border-bottom: 1px solid white !important; margin-bottom: 4px !important; } /* SVG-Maske mit abgerundeten Ecken definieren */ @supports (mask-image: url('data:image/svg+xml;utf8,\ ')) { iframe .review-card img { display: block !important; width: 100% !important; height: auto !important; background: transparent !important; /* ersetzt Inline-Shorthand in Farbkomponente */ mask-image: url('data:image/svg+xml;utf8,\ ') !important; mask-size: 100% 100% !important; -webkit-mask-image: url('data:image/svg+xml;utf8,\ ') !important; -webkit-mask-size: 100% 100% !important; } } /* --- 15) Datum der Bewertung: Winzig & Weiß --- */ .review-card .date { font-size: 10px !important; color: white !important; } /* :contentReference[oaicite:20]{index=20} */ /* --- 16) Haupttext der Bewertung + Antworten: Weiß --- */ .review-card .review-text, .review-card .review-reply-text { color: white !important; } /* :contentReference[oaicite:21]{index=21} */ /* --- 17) Quickview-Modal: Hintergründe & Rand --- */ #quickview-modal .quickview-modal-contents { background-color: #151515 !important; border-bottom: 5px solid gray !important; } /* :contentReference[oaicite:22]{index=22} */ /* --- 18) Wizard‐Slides („Write a Review“‐Form): Dunkler Hintergrund --- */ .wizard-slide { background-color: #151515 !important; /* Falls Sie später eine weiße Linie wünschen, entkommentieren Sie: */ /* border: 1px solid white !important; */ /* border-bottom: 1px solid white !important; */ } /* :contentReference[oaicite:23]{index=23} */ /* --- 19) Iframe‐Wrapper im Widget: Hintergrund schwarz --- */ .tydal-reviews-iframe-panel-wrapper.page-width.wrapper { background-color: #151515 !important; } /* :contentReference[oaicite:24]{index=24} */ /* --- 20) Alle Wizard‐Texte auf Weiß setzen --- */ .review-title, .review-body, .wizard-body, .wizard-slide h3 { color: white !important; } /* :contentReference[oaicite:25]{index=25} */ /* --- 21) Stern‐Icons im „Write a Review“‐Form größer --- */ .review-star-container span { font-size: 20px !important; } /* :contentReference[oaicite:26]{index=26} */ /* --- 22) „Submit“-Button (rev-button) im Schreib‐Formular stylen --- */ .rev-button { box-sizing: content-box !important; width: auto !important; color: white !important; background-color: #D51C29 !important; padding: 10px 10px !important; /* 10px Oben/Unten, 10px Rechts/Links */ border: 2px solid transparent !important; transition: padding 0.2s ease, background-color 0.2s ease !important; border-radius: 10px !important; font-size: 15px !important; font-weight: bold !important; } /* :contentReference[oaicite:27]{index=27} */ .rev-button:hover { padding: 12px 12px !important; /* Hover: +2px jeder Richtung */ background-color: #B01720 !important; } /* :contentReference[oaicite:28]{index=28} */ /* --- 23) Wizard‐Footer: Hintergrund schwarz --- */ .wizard-footer { background-color: #151515 !important; } /* :contentReference[oaicite:29]{index=29} */ /* --- 24) „Skip“ & „Back“-Buttons: Schriftgröße & Farbe --- */ .skip, .back { font-size: 15px !important; color: white !important; } /* :contentReference[oaicite:30]{index=30} */ /* --- 25) Upload‐Incentive‐Text (z.B. „Earn a Badge…“): Größer & Weiß --- */ h4.upload-incentive-text { font-size: 20px !important; color: white !important; } /* :contentReference[oaicite:31]{index=31} */ /* --- 26) Textarea im Formular: Dunkler Hintergrund, weiße Schrift --- */ .rev-textarea { background-color: #151515 !important; color: #ffffff !important; } /* :contentReference[oaicite:32]{index=32} */ /* --- 27) Input‐Felder (Name, E-Mail): Dunkler Hintergrund, weiße Schrift --- */ .field-container input { background-color: #151515 !important; color: white !important; border: 1px solid #ffffff !important; /* dünner weißer Rahmen für bessere Sichtbarkeit */ } /* :contentReference[oaicite:33]{index=33} */ /* --- 28) Code‐/Promo‐Feld: weißer Hintergrund, schwarzer Text --- */ .rev-code-size { background-color: white !important; color: #151515 !important; } /* :contentReference[oaicite:34]{index=34} */ /* --- 29) Schließen‐Button (X) im Wizard: Weiß --- */ body.wizard .rev-close-modal { color: white !important; } /* :contentReference[oaicite:35]{index=35} */ /* ==================================================== Ende des Tydal Reviews Dark Mode – Custom CSS ==================================================== */

Country/region

Language

Contact

Contact form