/** * STRYKE Base — Grundformatierung für Elementors eigene Bausteine * * WOFÜR: Zwei Dinge kommen auf praktisch jeder Kundenseite vor, werden aber * nicht vom Kunden gebaut, sondern von Elementor ausgegeben — das Formular und * die Lightbox. Beide bringen einen Standardlook mit, der neben allem anderen * im Theme fremd wirkt: dünn umrandete Kästchen und ein Bildbetrachter mit * viel Chrom. * * WARUM HIER UND NICHT IM BLUEPRINT: Eine Vorlage erreicht nur die Kunden, die * genau sie einspielen. Formular und Lightbox erscheinen dagegen überall — auch * auf der Seite, die jemand ohne Vorlage von Hand baut, und im freien Download. * Im Kit gestaltet, müsste dieselbe Arbeit in jeder weiteren Vorlage noch einmal * gemacht werden und liefe beim ersten Nachbessern auseinander. * * ══ DREI REGELN ════════════════════════════════════════════════════════════ * * 1. NUR GRUNDFORMATIERUNG, keine Gestaltung. Gesetzt werden Fläche, Rahmen, * Radius und Zustände — also das, was aussieht wie „vom Theme". Größe, * Abstand und Anordnung bleiben unberührt: Das ist Panel-Arbeit und gehört * dem Kunden (Elementor-First). Panel-Einstellungen gewinnen deshalb gegen * alles hier — mit GENAU EINER Ausnahme, der Feldfläche. Die Begründung * steht direkt an der Regel und ist nachgemessen, nicht bequem. * * 2. AUSSCHLIESSLICH GEGEN CSS-VARIABLEN. Der Kunde ändert seine Farben im * Cockpit; ein fester Wert bräche aus dem Schema aus. Auch der Dunkelmodus * fällt damit von selbst richtig aus, weil `--stryke-bg-alt`, * `--stryke-text` und `--stryke-border` sich mit ihm drehen. * * 3. DIESE DATEI WIRD NUR GELADEN, WENN ELEMENTOR AKTIV IST. Sonst lädt die * halbe Zielgruppe ein Stylesheet für Bausteine, die es bei ihr nicht gibt. */ /* ══ Formularfelder ════════════════════════════════════════════════════════ Flächen statt Rahmen. Ein umrandetes Kästchen auf weißem Grund ist die Voreinstellung aus einer Zeit, in der Formulare wie Papierformulare aussehen sollten; eine leicht abgesetzte Fläche sagt dasselbe ruhiger und trennt die Felder besser voneinander als eine dünne Linie. Der Rahmen verschwindet nicht ganz — ohne ihn verlieren Felder auf einer farbigen Sektion ihre Kante. Er wird nur leiser. ------------------------------------------------------------------------ */ /* Das `!important` auf der Fläche ist nachgemessen und nicht bequem. Elementor Pro schreibt `#ffffff` als CONTROL-STANDARD seines Formular- Widgets in das seitenbezogene Stylesheet, mit einem Selektor der Bauart `.elementor-13 .elementor-element.elementor-element-31d3d9e .elementor-field-group .elementor-field:not(.elementor-select-wrapper)` — fünf Klassen, an eine Element-ID gebunden. Dagegen kommt keine Theme-Regel an, die man vernünftig schreiben kann, und weiße Felder auf weißem Grund sind schlicht unsichtbar. PREIS, den das kostet, und der hier ausdrücklich benannt sei: Wer im Elementor-Panel bewusst eine eigene Feldfarbe wählt, wird davon überschrieben. Deshalb hört das `!important` bei der Fläche auf — Rahmen, Radius und Innenabstand bleiben normal überschreibbar. Wer eine andere Feldfarbe braucht, setzt sie am Kit oder über eigenes CSS. Alternative wäre gewesen, gar nichts zu tun; dann sähe jedes Formular aus wie Elementors Vorgabe und nicht wie der Rest der Website. */ .elementor-field-group .elementor-field-textual { border: 1px solid transparent; border-radius: var(--stryke-radius); /* Nicht `--stryke-bg-alt`: Diese Rolle steht im Hellmodus auf `#fbfbfb` und unterscheidet sich damit um 1,6 % von `#ffffff` — auf einer weißen Seite ist das Feld schlicht nicht zu sehen. Ein Anteil der TEXTfarbe erzeugt dagegen in beiden Modi denselben spürbaren Absatz: hell wird grau, dunkel wird angehoben. */ background-color: rgb(var(--stryke-text-rgb) / 5%) !important; color: var(--stryke-text); font-family: var(--stryke-font-body); /* Elementors eigener Innenabstand ist auf die Rahmenoptik gerechnet und sitzt in einer Fläche zu eng. */ padding: 0.75rem 0.9rem; box-shadow: none; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } /* Die Textarea braucht dieselbe Behandlung und etwas mehr Luft nach unten. */ .elementor-field-group textarea.elementor-field-textual { min-height: 8rem; resize: vertical; } /* Auswahlfelder: Elementor gibt ein natives und braucht dieselbe deckende Fläche wie die Felder im Formular. */ body .flatpickr-current-month .flatpickr-monthDropdown-months, body .flatpickr-current-month input.cur-year{ background: var(--stryke-bg-alt); color: var(--stryke-text); } /* Die Monatsliste eigens, mit der Klasse der Option und als LANGFORM. flatpickr setzt `.flatpickr-monthDropdown-month{background-color:transparent}` — und `transparent` an einer Option heisst: Chrome malt die aufgeklappte Liste auf seiner weissen Systemflaeche. Im Dunkelmodus stand darauf die geerbte helle Schrift. Die Fläche muss deshalb DECKEND sein, und die Regel braucht die Klasse der Option selbst — der Weg über den Elternselektor allein hat sie nicht erreicht (nachgemessen: das