/** * dirs21 Verfügbarkeitskalender (#page-wrapper .d21-availabilityCalendar) * Design-Anpassung an das Theme (neumeier). * * Warum überall !important und der zusätzliche #page-wrapper .d21-availabilityCalendar-Prefix? * - Das SDK hängt sein Stylesheet (v5.widgets.dirs21.de/style.css) zur Laufzeit * ans Ende des – es kommt also IMMER nach dieser Datei. Nur höhere * Spezifität + !important gewinnen zuverlässig. * - Farben und Radien setzt das SDK zusätzlich per Inline-Style direkt auf das * Container-Element (element.style.setProperty). Autoren-!important schlägt * Inline-Styles ohne !important. * * Theme-Tokens (Quelle: css/child-theme.css): * Blau/„Grün" #76A9C6 Gelb #FDC926 Grau #CFD0CA Text #000 * Buttons: .btn-green = schwarzer Text auf Blau, 2px Rand, Radius 2.5rem * (wie .btn-lg / $border-radius-lg), Hover = weiße Fläche. * Schrift: Geist Mono (--kkg-font-body) für UI/Text, Oregano BT * (--kkg-font-display) für Überschriften – siehe inc/theme-config.php. * * Erweiterung auf weitere dirs21-Widgets (z. B. .d21-quickbook): Selektor-Prefix * unten ergänzen, z. B. „ #page-wrapper .d21-availabilityCalendar, .d21-quickbook { … }". */ /* --------------------------------------------------------------------------- * 1) Design-Tokens des Widgets überschreiben * ------------------------------------------------------------------------ */ #page-wrapper .d21-availabilityCalendar { /* Farbwelt */ --d21-primary: #76A9C6 !important; --d21-secondary: #000000 !important; --d21-hover: #8ab6cf !important; /* wie .btn-green:hover-Abstufung */ --d21-hover-darker: #6197b8 !important; --d21-text: #000000 !important; --d21-description: #4d4f4b !important; --d21-description-dark: #333333 !important; --d21-description-light: #83857f !important; --d21-container: #ffffff !important; /* Seiteninhalt liegt auf Weiß */ --d21-inner-container: #f3f6f8 !important; --d21-card: #f3f6f8 !important; --d21-divider: #CFD0CA !important; /* Theme-Grau */ --d21-limited: #c9950a !important; /* abgedunkeltes Theme-Gelb – lesbar als Text */ --d21-warn: #c9950a !important; --d21-color-primary-transparent: rgba(118, 169, 198, 0.35) !important; /* Radien: Karten wie .rounded-2 der Seite, Kalendertage dezent */ --d21-border-radius-outer: 0.5rem !important; --d21-border-radius-inner: 0.5rem !important; --d21-border-radius-smallest: 0.375rem !important; /* Typo: Hausschrift der Seite */ --d21-font-default: var(--kkg-font-body, 'geist-mono', monospace) !important; --d21-font-decorative: var(--kkg-font-display, 'oregano', sans-serif) !important; --d21-font-body: var(--kkg-font-body, 'geist-mono', monospace) !important; } /* --------------------------------------------------------------------------- * 2) Grundfläche & Schrift * ------------------------------------------------------------------------ */ #page-wrapper .d21-availabilityCalendar .d21-widget { font-family: var(--kkg-font-body, 'geist-mono', monospace) !important; color: #000 !important; } #page-wrapper .d21-container-view, #page-wrapper .d21-widget .d21-trigger-popover-button, #page-wrapper .d21-container-view, #page-wrapper .d21-widget .d21-button { border-radius: 2.5rem !important; background-color: var(--d21-primary); color: var(--d21-secondary) !important; border-width: 2px !important; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } #page-wrapper .d21-container-view, #page-wrapper .d21-widget .d21-trigger-popover-button:hover, #page-wrapper .d21-container-view, #page-wrapper .d21-widget .d21-button:hover { color: #000 !important; background-color: #fff !important; border-width: 2px !important; border-color: #76A9C6 !important; } #page-wrapper .d21-container-view, #page-wrapper .d21-widget .d21-button .d21-content, #page-wrapper .d21-date-very-small p { color: #000 !important; font-weight: 400 !important; } #page-wrapper .d21-container-view, #page-wrapper .d21-widget .d21-button .d21-content:hover { color: #000 !important; } #page-wrapper .d21-widget .d21-bold-text, #page-wrapper .d21-widget .d21-date-bold-text { font-weight: 400 !important; } #page-wrapper .d21-container-view, #page-wrapper .d21-widget .d21-trigger-popover-button p { color: var(--d21-secondary) !important; text-transform: uppercase !important; font-weight: 400 !important; } @media (min-width: 1200px) { /* Einige Elemente setzen die Schrift hart (font-family: D21Default) */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day, #page-wrapper .d21-availabilityCalendar .d21-widget .d21-button .d21-content { font-family: var(--kkg-font-body, 'geist-mono', monospace) !important; } #page-wrapper .d21-availabilityCalendar .d21-widget .d21-heading { font-family: var(--kkg-font-display, 'oregano', sans-serif) !important; } /* Schriftgewicht: überall 400 – Oregano BT hat nur einen Regular-Schnitt (alles andere würde als Faux-Bold gerendert), und der Monospace-Text bleibt bewusst leicht wie im Screendesign. Die ID im Prefix erzeugt Spezifität (1,2,0) und schlägt damit jede !important-Regel des Widget-CSS (max. (0,3,1), z. B. .d21-widget .d21-button .d21-content oder .d21-date-bold-text p). */ #page-wrapper .d21-availabilityCalendar .d21-widget, #page-wrapper .d21-availabilityCalendar .d21-widget * { font-weight: 400 !important; } /* --------------------------------------------------------------------------- * 3) Kalendertage * Muster der Seite (.btn-green): schwarzer Text auf Blau – das Widget * erzwingt sonst Weiß auf allen Markierungen. * ------------------------------------------------------------------------ */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day-selected .d21-content, #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day-range .d21-content, #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day-hover:hover .d21-content, #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day-hover.d21-after-hover-day .d21-content, #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day-minlos:hover .d21-content, #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day-minlos.d21-calendar-day-range .d21-content, #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day-minlos.d21-calendar-day-selected .d21-content { color: #000 !important; } /* Auswahl ohne Pop-Effekt (Scale/Schatten) – flach und ruhig wie die Seite */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day-selected { transform: none !important; box-shadow: none !important; } #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day-selected .d21-content { transform: none !important; } /* Hover auf ausgewähltem Tag: helleres Blau statt Schwarz (Text bleibt schwarz) */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-calendar-day-selected:hover { background-color: var(--d21-hover) !important; } /* --------------------------------------------------------------------------- * 4) Buttons – wie .btn-green der Seite: * schwarzer Text auf Blau, 2px Rand, Pill-Radius; Hover: weiße Fläche. * ------------------------------------------------------------------------ */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-button { background-color: #76A9C6 !important; border: 2px solid #76A9C6 !important; border-radius: 2.5rem !important; /* wie .btn-lg der Seite ($border-radius-lg) */ } #page-wrapper .d21-availabilityCalendar .d21-widget .d21-button .d21-content { color: #000 !important; } #page-wrapper .d21-availabilityCalendar .d21-widget .d21-button:hover { border: 2px solid #76A9C6 !important; } /* Der Hover-Fill läuft über ein ::before-Overlay – auf Weiß umstellen */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-button:hover:before, #page-wrapper .d21-availabilityCalendar .d21-widget .d21-primary:hover:before { background-color: #fff !important; opacity: 1 !important; } #page-wrapper .d21-availabilityCalendar .d21-widget .d21-button:hover .d21-content { color: #000 !important; } /* Primär-Buttons: Füllung kommt ebenfalls über ::before */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-primary:before { background-color: #76A9C6 !important; } #page-wrapper .d21-widget .d21-flex-picker--row .d21-flex-picker--field { width: 3.5rem !important; } #page-wrapper .d21-availabilityCalendar .d21-widget .d21-primary .d21-content { color: #000 !important; } /* Popover-Trigger („Verfügbarkeit prüfen"-Button des Widgets): exakt wie .btn.btn-lg.btn-green der Seite (Werte aus child-theme.css). */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-trigger-popover-button { display: inline-block !important; padding: 1.1rem 1.9rem 0.95rem 1.9rem !important; font-size: 1.25rem !important; line-height: 1 !important; font-family: var(--kkg-font-display, 'oregano', sans-serif) !important; color: #000 !important; background-color: #76A9C6 !important; border: 2px solid #76A9C6 !important; border-radius: 2.5rem !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !important; } /* Innere Elemente (p / Label) erben Größe & Farbe des Buttons */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-trigger-popover-button p, #page-wrapper .d21-availabilityCalendar .d21-widget .d21-trigger-popover-label { color: #000 !important; font-size: inherit !important; line-height: inherit !important; } /* Hover wie .btn-green: weiße Fläche, blauer Rand, Schrift bleibt schwarz */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-trigger-popover-button:hover { background-color: #fff !important; border-color: #76A9C6 !important; color: #000 !important; } #page-wrapper .d21-availabilityCalendar .d21-widget .d21-trigger-popover-button:hover p { color: #000 !important; } /* --------------------------------------------------------------------------- * 5) Breite & Luft * Das Widget ist em-basiert und dadurch nur ~250px schmal * (.d21-flex-picker--field: 2.25em × 7 Spalten). Hier: Grid auf volle * Breite aufspannen (bis max-width), Zellen wachsen mit und bekommen * etwas mehr Höhe – wirkt großzügiger statt gedrungen. * ------------------------------------------------------------------------ */ /* Platzhalter selbst: liegt im Template in einem zentrierenden Flex-Wrapper (d-flex justify-content-center) und würde als Flex-Item sonst auf seine Inhaltsbreite (~428px) schrumpfen – Breite daher HIER setzen, die Zentrierung übernimmt weiterhin der Wrapper. */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-flex-container { width: 100% !important; max-width: 100% !important; } #page-wrapper .d21-widget .d21-flex-container, #page-wrapper .d21-widget .d21-flex-pages { max-width: 100% !important; } /* Monatsseite als volle Slide (flex-pages ist der Karussell-Track) */ #page-wrapper .d21-availabilityCalendar .d21-widget .d21-month-view-page { width: 100% !important; flex: 0 0 100% !important; } #page-wrapper .d21-availabilityCalendar .d21-widget .d21-flex-picker, #page-wrapper .d21-availabilityCalendar .d21-widget .d21-flex-picker--row { width: 100% !important; gap: 8px !important; } #page-wrapper .d21-availabilityCalendar .d21-month-view-page .d21-flex-picker--row { gap: 8px !important; } #page-wrapper .d21-container-view { padding: 2.5rem !important; max-width: 100% !important; } #page-wrapper .d21-v-stack { margin-top: 1rem !important; } #page-wrapper .d21-availabilityCalendar .d21-flex-picker--day--hover { padding: .25rem !important; } #page-wrapper .d21-availabilityCalendar .d21-widget .d21-flex-picker--row .d21-flex-picker--field { flex: 1 1 0 !important; width: auto !important; min-height: 2.75em !important; } /* Etwas größere Grundschrift auf Desktop – skaliert das ganze Widget mit */ #page-wrapper .d21-availabilityCalendar .d21-widget { font-size: 16px !important; } } /*# sourceMappingURL=d21-availability-calendar.css.map */