Venue Design anpassen

Der Venue Embed bringt sein eigenes Stylesheet mit (venue.css). Dieses Stylesheet ist so gebaut, dass du es von deiner Webseite aus überschreiben kannst, ohne gegen Spezifität zu kämpfen und ohne ein einziges !important.

Es gibt drei Ebenen, von der einfachsten zur detailliertesten:

Theme wählen: ein Attribut am <venue>-Element, hell oder dunkel.
CSS-Variablen setzen: Farben, Radien, Abstände, Schrift.
Klassen überschreiben: volle Kontrolle über einzelne Elemente.

Wie das Überschreiben funktioniert

Das gesamte Venue-Stylesheet liegt in einem CSS Cascade Layer namens flyo-venue:

css

@layer flyo-venue {
  .flyo-venue-input { ... }
}

Regeln in einem Layer verlieren immer gegen Regeln ohne Layer, unabhängig von der Spezifität und unabhängig davon, welches Stylesheet zuerst geladen wird. Für dich heisst das: eine ganz normale Regel in deinem CSS gewinnt.

css

/* Gewinnt gegen alles aus venue.css. Kein !important nötig. */
.flyo-venue-input {
  background: #111;
  color: #eee;
}

Du musst also nicht mehr wissen, in welcher Reihenfolge venue.css und dein eigenes Stylesheet geladen werden.

Browser-Unterstützung

Cascade Layers funktionieren in allen aktuellen Browsern (Chrome, Edge, Firefox und Safari ab 2022).

Was Venue von deiner Seite erbt

Der Embed rendert direkt in das DOM deiner Seite, nicht in einem iframe und nicht in einem Shadow DOM. Alles, was in CSS vererbbar ist, übernimmt Venue deshalb automatisch von der Stelle, an der du den Embed einbindest. Für Typografie musst du im Normalfall gar nichts konfigurieren.

Eigenschaft	Standard	Verhalten
`--flyo-venue-font-family`	`inherit`	Venue bringt keine eigene Schrift mit und lädt keine Webfonts nach. Der Embed nutzt die Schriftfamilie deiner Seite.
`--flyo-venue-font-size`	`inherit`	Die Basisgrösse kommt von deiner Seite, alle Grössen im Embed sind relativ dazu.
`--flyo-venue-color-text`	`inherit`	Fliesstext übernimmt die Textfarbe deiner Seite.
`--flyo-venue-color-heading`	`inherit`	Überschriften ebenso.
Laufweite (`letter-spacing`)	geerbt	Auch in den Formularfeldern, siehe unten.
`--flyo-venue-line-height`	`1.5`	Die einzige Ausnahme: die Zeilenhöhe ist fix, damit Felder und Buttons unabhängig von der Zeilenhöhe deines Fliesstextes gleich hoch bleiben. Willst du auch sie erben, setze `--flyo-venue-line-height: inherit`.

Farben, die Venue selbst zeichnet (Feldhintergründe, Trennlinien, Flächen), werden hingegen nicht geerbt, weil ein halb geerbtes Eingabefeld unlesbar würde. Dafür gibt es die Themes und die Variablen.

Formularfelder erben die Schrift ebenfalls

Browser rendern <input>, <select>, <textarea> und <button> standardmässig in der System-Schrift, auch wenn der Rest der Seite eine andere Schrift nutzt. Das ist der übliche Grund, weshalb eingebettete Formulare fremd wirken. Venue hebt das im Embed auf:

css

/* Teil von venue.css */
.flyo-venue :where(input, button, select, textarea, optgroup) {
  font: inherit;
  letter-spacing: inherit;
}

Felder, Auswahllisten, Datei-Uploads und Buttons stehen damit in derselben Schrift wie deine Seite. Der Rich-Text-Editor und das Kalender-Overlay folgen ebenfalls, weil sie innerhalb des Embeds gerendert werden.

Alles skaliert in `em`

Die Grössen im Embed sind relativ gesetzt: Eingabefelder 1em, Beschriftungen .875em, Hinweistexte .8125em, Titel 1.25em, Icons 1.125em. Änderst du die Basisgrösse, skaliert der ganze Embed mit. So verkleinerst du nur den Embed, ohne deine Seite anzufassen:

css

.flyo-venue {
  --flyo-venue-font-size: 15px;
}

Eigene Schrift nur im Embed

Nur wenn du im Embed bewusst eine andere Schrift willst als auf der Seite:

css

:root {
  --flyo-venue-font-family: "Inter", system-ui, sans-serif;
}

Die Schrift selbst musst du auf deiner Seite laden (@font-face oder ein <link> zu deinem Font-Provider). Venue lädt weder Schriften noch Icon-Fonts: die Icons sind Inline-SVG und erben currentColor.

Schriftschnitte

Für einzelne Elemente setzt Venue feste Schnitte: Beschriftungen und Buttons 500, Titel und Untertitel 600. Anpassbar über --flyo-venue-label-font-weight, --flyo-venue-button-font-weight, --flyo-venue-nav-link-font-weight, --flyo-venue-badge-font-weight und --flyo-venue-table-head-font-weight. Für Titel gibt es keine Variable, dort schreibst du eine gewöhnliche Regel:

css

.flyo-venue-title {
  font-weight: 700;
}

1. Theme wählen

Das Attribut theme am <venue>-Element setzt ein komplettes Farbschema:

html

<venue id="XYZ" token="XYZXYZXYZXYZ" theme="dark"></venue>

Wert	Wirkung
`light`	Standard: weisse Eingabefelder, helle Flächen, dunkler Text in den Controls.
`dark`	Dunkle Eingabefelder, dunkle Flächen, hellere Trennlinien. Für Embeds auf dunklen Seiten.
`auto`	Folgt der Systemeinstellung des Besuchers (`prefers-color-scheme`).
`inherit`	Venue zeichnet keine eigenen Farben: Hintergründe transparent, Text und Rahmen in `currentColor`. Sinnvoll, wenn deine Seite Formularfelder schon selbst gestaltet.

Ein Theme setzt nur Standardwerte. Du kannst danach jede einzelne Variable weiter anpassen (siehe unten). Auf einer dunklen Seite ist theme="dark" fast immer der richtige Startpunkt: die Fliesstexte erben weiterhin die Textfarbe deiner Seite, alle Flächen, die Venue selbst zeichnet, werden dunkel.

2. CSS-Variablen setzen

Alle Variablen heissen --flyo-venue-* und dürfen überall im Dokument gesetzt werden: auf :root, auf dem Wrapper um den Embed oder direkt auf dem Venue-Element. Venue setzt diese Namen selbst nie, deshalb gewinnt dein Wert immer.

css

:root {
  --flyo-venue-radius: 12px;
  --flyo-venue-color-primary: #b8112c;
  --flyo-venue-input-bg: #1a2e50;
  --flyo-venue-input-color: #edf2fa;
  --flyo-venue-input-border-color: rgba(180, 200, 240, 0.18);
}

Die wichtigsten Variablen

Diese acht decken erfahrungsgemäss die meisten Anpassungen ab:

Variable	Standard	Bedeutung
`--flyo-venue-radius`	`6px`	Eckenradius für Felder, Buttons, Meldungen. `0` für eckig.
`--flyo-venue-color-primary`	`#756b6b`	Akzentfarbe: Hauptbuttons, Fokusrahmen, Checkboxen, Kalender.
`--flyo-venue-color-text-muted`	`#667085`	Farbe für Hinweise, Tabellenköpfe, Platzhaltertexte.
`--flyo-venue-input-bg`	`#fff`	Hintergrund von Eingabefeldern, Textareas, Auswahllisten.
`--flyo-venue-input-color`	`#101828`	Textfarbe in Eingabefeldern.
`--flyo-venue-input-border-color`	`#d0d5dd`	Rahmenfarbe der Eingabefelder.
`--flyo-venue-border-color`	`#eaecf0`	Trennlinien, Tabellenlinien, Kartenrahmen.
`--flyo-venue-gap`	`1rem`	Vertikaler Abstand zwischen Feldern und Abschnitten.

Vollständige Referenz

Grundlagen, Farben, Abstände

Variable	Standard (`light`)
`--flyo-venue-font-family`	`inherit`
`--flyo-venue-font-size`	`inherit`
`--flyo-venue-line-height`	`1.5`
`--flyo-venue-color-scheme`	`light`
`--flyo-venue-color-text`	`inherit`
`--flyo-venue-color-heading`	`inherit`
`--flyo-venue-color-text-muted`	`#667085`
`--flyo-venue-space`	`.25rem`
`--flyo-venue-gap`	`1rem`
`--flyo-venue-radius`	`6px`
`--flyo-venue-radius-sm`	`4px`
`--flyo-venue-radius-lg`	`10px`
`--flyo-venue-transition`	`120ms ease`
`--flyo-venue-bg`	`transparent`
`--flyo-venue-border-color`	`#eaecf0`
`--flyo-venue-border-width`	`1px`
`--flyo-venue-surface-bg`	`#f9fafb`
`--flyo-venue-surface-color`	`#101828`
`--flyo-venue-shadow`	dezenter Schatten
`--flyo-venue-shadow-lg`	Schatten für Dropdowns
`--flyo-venue-focus-ring-width`	`3px`
`--flyo-venue-focus-ring-color`	Primärfarbe, 30 %
`--flyo-venue-color-primary`	`#756b6b`
`--flyo-venue-color-primary-contrast`	`#fff`
`--flyo-venue-color-secondary`	`#475467`
`--flyo-venue-color-secondary-contrast`	`#fff`
`--flyo-venue-color-success`	`#079455`
`--flyo-venue-color-success-contrast`	`#fff`
`--flyo-venue-color-danger`	`#d92d20`
`--flyo-venue-color-danger-contrast`	`#fff`
`--flyo-venue-color-link`	Primärfarbe
`--flyo-venue-color-link-hover`	wie `color-link`
`--flyo-venue-link-decoration`	`underline`

Formulare: Beschriftungen, Felder, Checkboxen

--flyo-venue-input-* gilt für Textfelder, Textareas, Auswahllisten und Datei-Uploads.

Variable	Standard (`light`)
`--flyo-venue-label-color`	`inherit`
`--flyo-venue-label-font-size`	`.875em`
`--flyo-venue-label-font-weight`	`500`
`--flyo-venue-label-gap`	`.375rem`
`--flyo-venue-hint-color`	wie `color-text-muted`
`--flyo-venue-hint-font-size`	`.8125em`
`--flyo-venue-input-bg`	`#fff`
`--flyo-venue-input-color`	`#101828`
`--flyo-venue-input-border-color`	`#d0d5dd`
`--flyo-venue-input-border-width`	`1px`
`--flyo-venue-input-radius`	wie `radius`
`--flyo-venue-input-padding-y`	`.5rem`
`--flyo-venue-input-padding-x`	`.75rem`
`--flyo-venue-input-font-size`	`1em`
`--flyo-venue-input-placeholder-color`	`#98a2b3`
`--flyo-venue-input-shadow`	wie `shadow`
`--flyo-venue-input-hover-border-color`	`#98a2b3`
`--flyo-venue-input-focus-bg`	wie `input-bg`
`--flyo-venue-input-focus-color`	wie `input-color`
`--flyo-venue-input-focus-border-color`	Primärfarbe
`--flyo-venue-input-disabled-bg`	`#f2f4f7`
`--flyo-venue-input-disabled-color`	`#667085`
`--flyo-venue-select-indicator`	`url(...)` mit dem Pfeil-Icon
`--flyo-venue-check-size`	`1rem`
`--flyo-venue-check-accent-color`	Primärfarbe

Buttons

Variable	Standard (`light`)
`--flyo-venue-button-radius`	wie `radius`
`--flyo-venue-button-padding-y`	`.5rem`
`--flyo-venue-button-padding-x`	`1rem`
`--flyo-venue-button-font-size`	`1em`
`--flyo-venue-button-font-weight`	`500`
`--flyo-venue-button-border-width`	`1px`
`--flyo-venue-button-gap`	`.375rem`
`--flyo-venue-button-shadow`	wie `shadow`
`--flyo-venue-button-sm-padding-y`	`.25rem`
`--flyo-venue-button-sm-padding-x`	`.625rem`
`--flyo-venue-button-sm-font-size`	`.875em`

Pro Variante (primary, secondary, success, danger) gibt es jeweils -bg, -color, -border-color und -hover-bg, zum Beispiel --flyo-venue-button-primary-bg. Setzt du nur -bg, wird der Hover-Zustand daraus automatisch abgeleitet (über color-mix).

Die Varianten outline und quiet haben zusätzlich -hover-color und -hover-border-color, die Variante link hat --flyo-venue-button-link-color und --flyo-venue-button-link-hover-color.

Variable	Standard (`light`)
`--flyo-venue-alert-radius`	wie `radius`
`--flyo-venue-alert-padding-y`	`.75rem`
`--flyo-venue-alert-padding-x`	`1rem`
`--flyo-venue-alert-border-width`	`1px`
`--flyo-venue-alert-danger-bg` / `-color` / `-border-color`	rote Töne
`--flyo-venue-alert-success-bg` / `-color` / `-border-color`	grüne Töne
`--flyo-venue-alert-warning-bg` / `-color` / `-border-color`	orange Töne
`--flyo-venue-alert-info-bg` / `-color` / `-border-color`	blaue Töne
`--flyo-venue-badge-radius`	`999px`
`--flyo-venue-badge-padding-y` / `-padding-x`	`.125rem` / `.5rem`
`--flyo-venue-badge-font-size` / `-font-weight`	`.75em` / `500`
`--flyo-venue-badge-online-bg` / `-color`	grün
`--flyo-venue-badge-offline-bg` / `-color`	grau
`--flyo-venue-notification-bg` / `-color`	rot / weiss
`--flyo-venue-panel-bg` / `-color` / `-radius` / `-padding`	Flächen wie das Benutzerkonto
`--flyo-venue-card-bg` / `-color` / `-border-color` / `-radius` / `-padding`	Karten wie die Öffnungszeiten
`--flyo-venue-nav-bg`	Hintergrund der Navigationsleiste
`--flyo-venue-nav-padding` / `-radius` / `-gap`	`.25rem` / `radius + .25rem` / `.25rem`
`--flyo-venue-nav-link-color` / `-bg` / `-radius` / `-font-weight`	Reiter im Ruhezustand
`--flyo-venue-nav-link-padding-y` / `-padding-x`	`.5rem` / `.75rem`
`--flyo-venue-nav-link-hover-color` / `-hover-bg`	Reiter bei Hover
`--flyo-venue-nav-link-active-color` / `-active-bg`	aktiver Reiter
`--flyo-venue-nav-link-active-shadow`	Schatten des aktiven Reiters
`--flyo-venue-account-menu-width`	`26rem`, Breite des Benutzerkonto-Panels
`--flyo-venue-search-width`	`18rem`, maximale Breite des Suchfelds
`--flyo-venue-table-color` / `-bg` / `-border-color`	Tabelle
`--flyo-venue-table-head-color` / `-head-bg` / `-head-font-size` / `-head-font-weight`	Tabellenkopf
`--flyo-venue-table-stripe-bg`	Zebrastreifen, standardmässig aus
`--flyo-venue-table-hover-bg`	Zeile bei Hover
`--flyo-venue-table-cell-padding-y` / `-cell-padding-x`	`.625rem` / `.75rem`

Dropdowns, Tags, Medien, Editor

Variable	Standard (`light`)
`--flyo-venue-dropdown-bg` / `-color` / `-border-color` / `-radius` / `-shadow`	Vorschlagsliste
`--flyo-venue-dropdown-max-height`	`16rem`
`--flyo-venue-dropdown-item-color` / `-item-hover-bg` / `-item-hover-color`	Einträge der Liste
`--flyo-venue-tag-bg` / `-color` / `-radius`	gewählte Verknüpfungen
`--flyo-venue-media-width`	`300px`, Breite der Bildkarte
`--flyo-venue-media-radius`	wie `radius-lg`
`--flyo-venue-editor-min-height`	`8rem`
`--flyo-venue-spinner-size`	`1em`
`--flyo-venue-icon-size`	`1.125em`
`--flyo-venue-icon-stroke-width`	`1.75`

3. Klassen überschreiben

Braucht es mehr als eine Variable, schreibst du eine normale CSS-Regel. Alle Klassen beginnen mit flyo-venue-.

Struktur

Klasse	Element
`.flyo-venue`	Wurzelelement des Embeds. Trägt zusätzlich `.flyo-venue--light`, `--dark`, `--auto` oder `--inherit`.
`.flyo-venue-login` / `.flyo-venue-login-form`	Login-Bereich und Login-Formular
`.flyo-venue-login-submit` / `.flyo-venue-login-lostpassword`	Buttons im Login
`.flyo-venue-lostpassword`	Formular «Passwort vergessen»
`.flyo-venue-dashboard`	Bereich nach dem Login
`.flyo-venue-nav` / `.flyo-venue-nav-item` / `.flyo-venue-nav-link`	Venue-Navigation. Der aktive Reiter trägt zusätzlich `.flyo-venue-nav-link--active`.
`.flyo-venue-account` / `.flyo-venue-account-toggle` / `.flyo-venue-account-menu`	Benutzer-Button in der Navigation und das darunter aufklappende Panel. Der geöffnete Button trägt zusätzlich `.flyo-venue-account-toggle--open`.
`.flyo-venue-account-actions`	oberste Zeile im Panel: Ausloggen und Aktualisieren
`.flyo-venue-account-section` / `-section-toggle` / `-section-title` / `-section-body`	die aufklappbaren Zeilen «Warten auf Freigabe» und «Pendente Änderungsvorschläge». Die geöffnete Zeile trägt `.flyo-venue-account-section-toggle--open`.
`.flyo-venue-notification`	Zähler der offenen Meldungen
`.flyo-venue-entity` / `.flyo-venue-entity-list` / `.flyo-venue-entity-update`	Listen- und Bearbeitungsansicht
`.flyo-venue-footer` / `.flyo-venue-lang-switch` / `.flyo-venue-lang-button`	Sprachumschalter

Formulare

Klasse	Element
`.flyo-venue-form`	jedes `<form>`
`.flyo-venue-field`	Umschlag um ein Feld (Beschriftung, Control, Hinweis)
`.flyo-venue-field--<typ>`	zusätzlich pro Feldtyp, zum Beispiel `--text`, `--textarea`, `--dropdown`, `--checkbox`, `--checkboxlist`, `--radiolist`, `--file`, `--files`, `--address`, `--link`, `--multiple`, `--openinghours`, `--schema`, `--schemas`, `--wysiwyg`, `--datepicker`, `--datetimepicker`, `--i18n-text`, `--i18n-textarea`
`.flyo-venue-field-group`	ein Feld samt seinen Fehlermeldungen
`.flyo-venue-label`	Beschriftung. Unterbeschriftungen tragen `.flyo-venue-label--sub`.
`.flyo-venue-input`	Textfelder, auch die Eingabe von Datum und Uhrzeit
`.flyo-venue-textarea`	mehrzeilige Felder
`.flyo-venue-select`	Auswahllisten
`.flyo-venue-file`	Datei-Uploads
`.flyo-venue-checkbox` / `.flyo-venue-radio`	Checkbox und Radio (native Controls, eingefärbt über `accent-color`)
`.flyo-venue-check` / `.flyo-venue-check-label` / `.flyo-venue-check-group`	Umschlag und Beschriftung dazu
`.flyo-venue-hint` / `.flyo-venue-counter`	Hinweistext und Zeichenzähler
`.flyo-venue-field-error`	Fehlermeldung unter einem Feld
`.flyo-venue-input-group` / `.flyo-venue-input-group-text`	Feld mit vorangestelltem Text (Öffnungszeiten)
`.flyo-venue-input-wrapper` / `.flyo-venue-input-clear`	Suchfeld mit Löschen-Button
`.flyo-venue-lang-group` / `.flyo-venue-lang-label`	mehrsprachige Felder
`.flyo-venue-multiple-row` / `.flyo-venue-multiple-remove`	eine Zeile eines wiederholbaren Feldes und ihr Löschen-Icon
`.flyo-venue-remove`	dezenter Löschen-Button (Icon in Rot), bei Dateien und wiederholbaren Zeilen
`.flyo-venue-typeahead` / `-menu` / `-item`	Suchfeld mit Vorschlagsliste
`.flyo-venue-tag`	gewählte Verknüpfung
`.flyo-venue-wysiwyg`	Rich-Text-Editor
`.flyo-venue-datepicker`	Kalender-Overlay
`.flyo-venue-timepicker` / `-select`	Uhrzeit-Auswahl
`.flyo-venue-openinghours` / `-day` / `-time`	Öffnungszeiten
`.flyo-venue-media` / `-image`	Bildkarte und Bild darin. Venue lädt die 300x300-Variante vom Storage (siehe Assets Bilder) und zeigt sie in einem quadratischen Rahmen, damit die Karte ihre Höhe schon vor dem Laden einnimmt.
`.flyo-venue-media-options` / `-toolbar` / `-summary`	Bildoptionen unter dem Bild
`.flyo-venue-media-file`	Vorschau einer Datei ohne Bild

Buttons und Meldungen

Klasse	Element
`.flyo-venue-button`	jeder Button. Dazu genau eine Variante: `--primary`, `--secondary`, `--success`, `--danger`, `--outline`, `--quiet`, `--link`
`.flyo-venue-button--sm`	kleine Ausführung
`.flyo-venue-button--block`	volle Breite
`.flyo-venue-button-icon` / `.flyo-venue-button-label`	Icon und Text innerhalb eines Buttons
`.flyo-venue-submit` / `.flyo-venue-back` / `.flyo-venue-logout`	Speichern, Zurück, Abmelden. Speichern-Buttons nutzen die Variante `--success`, sind also über `--flyo-venue-color-success` beziehungsweise `--flyo-venue-button-success-bg` einfärbbar.
`.flyo-venue-button-add` / `.flyo-venue-button-delete`	Hinzufügen und Entfernen
`.flyo-venue-alert`	Meldung. Dazu `--danger`, `--success`, `--warning` oder `--info`, optional `--compact`.
`.flyo-venue-badge`	Status-Label. Dazu `--online` oder `--offline`.
`.flyo-venue-spinner`	Ladeanzeige

Icons

Venue bringt 16 kuratierte Strich-Icons mit. Jedes Icon ist ein eigenständiges <svg> direkt im Markup, ohne Sprite, ohne IDs, ohne externe Datei. Damit funktionieren sie auch auf Seiten mit <base href> und wenn mehrere Venue-Embeds auf derselben Seite stehen.

Klasse	Element
`.flyo-venue-icon`	jedes Icon
`.flyo-venue-icon--<name>`	zusätzlich pro Icon

Verfügbare Namen: search, plus, minus, edit, copy, trash, save, close, settings, arrow-left, chevron-left, chevron-right, chevron-up, chevron-down, logout, refresh.

Icons erben ihre Farbe vom umgebenden Text (currentColor), passen sich also automatisch an Buttons und Themes an. Die Grösse ist in em angegeben und skaliert damit mit der Schriftgrösse des Buttons:

css

:root {
  --flyo-venue-icon-size: 1rem;         /* feste Grösse statt em */
  --flyo-venue-icon-stroke-width: 1.5;  /* feinere Linien */
}

/* Einzelnes Icon einfärben */
.flyo-venue-icon--trash {
  color: #b8112c;
}

TIP

Ein Icon durch eine eigene Grafik zu ersetzen geht über CSS nicht direkt, weil die Form im SVG steckt. Blende es in diesem Fall aus (.flyo-venue-icon--search { display: none }) und setze deine eigene Grafik per ::before auf den Button.

Listen, Tabellen, Text

Klasse	Element
`.flyo-venue-list-view`	Umschlag der Listenansicht, zugleich der Container für die Breakpoints (siehe unten)
`.flyo-venue-table` / `-head` / `-row` / `-sort` / `-scroll`	Eintragsliste
`.flyo-venue-avatar` / `.flyo-venue-table-cell--image`	Vorschaubild eines Eintrags (`2.5rem`, in der ersten Spalte) und seine Zelle. Die Spalte erscheint nur, wenn mindestens ein Eintrag ein Bild hat.
`.flyo-venue-pagination` / `-prev` / `-next` / `-status`	Blättern
`.flyo-venue-toolbar`	Zeile über der Liste: «Neu erfassen» links, Suche rechts
`.flyo-venue-search` / `-input` / `-toggle`	Suche in der Liste. Geöffnet trägt der Umschlag `.flyo-venue-search--open`.
`.flyo-venue-list` / `-item` / `-line` / `-date` / `-title` / `-meta` / `-change`	zweizeilige Liste, zum Beispiel im Benutzerkonto
`.flyo-venue-title` / `.flyo-venue-subtitle`	Überschriften
`.flyo-venue-text`	Absatz. Redaktionell erfasste Texte tragen zusätzlich `.flyo-venue-text--pre` und behalten ihre Zeilenumbrüche.
`.flyo-venue-empty`	Hinweis «keine Einträge»
`.flyo-venue-error`	Fehlertext
`.flyo-venue-panel` / `.flyo-venue-card` / `.flyo-venue-divider`	Flächen und Trennlinien

Breakpoints in der Eintragsliste

Die Liste richtet sich nach ihrer eigenen Breite, nicht nach der Fenstergrösse, weil ein Embed in einer schmalen Spalte stehen kann. Technisch ist .flyo-venue-list-view ein CSS-Container mit dem Namen flyo-venue-list.

Breite der Liste	Verhalten
unter `48rem`	«Bearbeiten» und «Kopieren» zeigen nur noch ihr Icon, die Zellen werden schmaler. Beide Buttons behalten `title` und `aria-label`.
unter `32rem`	«Vorherige Seite» und «Nächste Seite» zeigen nur noch ihr Icon.

Willst du die Beschriftungen behalten, blendest du sie wieder ein:

css

.flyo-venue-table-cell--actions .flyo-venue-button-label {
  display: inline;
}

Layout-Hilfsklassen

Diese Klassen tragen nur Struktur, keine Farben: .flyo-venue-stack (vertikal, mit Abstand), .flyo-venue-row (horizontal, umbrechend), .flyo-venue-actions (Buttongruppe), .flyo-venue-grow, .flyo-venue-push, .flyo-venue-section.

Beispiel: Embed auf einer dunklen Seite

Vorher braucht es nur das Theme, danach zwei Variablen für die Markenfarbe:

html

<venue id="XYZ" token="XYZXYZXYZXYZ" theme="dark"></venue>

css

:root {
  --flyo-venue-radius: 12px;
  --flyo-venue-color-primary: #c8a96e;
  --flyo-venue-color-primary-contrast: #112238;
  --flyo-venue-input-bg: rgba(17, 34, 56, 0.6);
  --flyo-venue-input-border-color: rgba(180, 200, 240, 0.18);
  --flyo-venue-surface-bg: rgba(30, 52, 96, 0.88);
}

Braucht ein einzelnes Element mehr, kommt eine gewöhnliche Regel dazu:

css

.flyo-venue-nav-link--active {
  background-color: rgba(200, 169, 110, 0.16);
  color: #c8a96e;
  font-weight: 600;
}

Beispiel: Tailwind CSS

Tailwind 4

Die Variablen gehören in einen @theme-Block oder in eine gewöhnliche :root-Regel. Beides funktioniert, weil Venue die Namen nie selbst setzt.

css

@import "tailwindcss";

:root {
  --flyo-venue-radius: 12px;
  --flyo-venue-color-primary: #b8112c;
  --flyo-venue-input-bg: #1a2e50;
  --flyo-venue-input-color: #edf2fa;
  --flyo-venue-input-border-color: rgba(180, 200, 240, 0.18);
}

Willst du Venue-Elemente mit Tailwind-Utilities gestalten, nutzt du @apply auf der Venue-Klasse. Wichtig: nicht in @layer components schreiben, sondern ungelayert, damit die Regel gegen venue.css gewinnt.

css

/* Ungelayert: gewinnt gegen den flyo-venue Layer. */
.flyo-venue-input {
  @apply bg-slate-900 text-slate-100 border-slate-700 rounded-xl;
}

.flyo-venue-button--primary {
  @apply bg-amber-500 text-slate-900 hover:bg-amber-400 border-transparent;
}

WARNING

Tailwinds eigene Basis-Styles (@import "tailwindcss") liegen in Tailwinds Layern und beeinflussen den Venue-Embed nicht, weil Venue seine Controls selbst vollständig gestaltet. Umgekehrt greift Venue nie auf Elemente ausserhalb von .flyo-venue zu.

Tailwind 3

Gleiches Prinzip, nur die Datei-Struktur unterscheidet sich:

css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --flyo-venue-radius: 12px;
  --flyo-venue-color-primary: #b8112c;
}

/* Ausserhalb von @layer, damit es gegen venue.css gewinnt. */
.flyo-venue-input {
  @apply bg-slate-900 text-slate-100 border-slate-700;
}

Beispiel: Next.js oder React

Der Embed ist eine Vue-App. In React lädst du Vue und das Venue-Bundle im Client und mountest die App in einen Container.

tsx

'use client';

import { useEffect, useRef } from 'react';

const VENUE_ID = 'XYZ';
const VENUE_TOKEN = 'XYZXYZXYZXYZ';

export function VenueEmbed() {
  const ref = useRef<HTMLDivElement>(null);
  const mounted = useRef(false);

  useEffect(() => {
    if (mounted.current) return;
    mounted.current = true;

    const css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = 'https://venue.flyo.cloud/venue.css';
    document.head.appendChild(css);

    const load = (src: string) =>
      new Promise<void>((resolve, reject) => {
        const s = document.createElement('script');
        s.src = src;
        s.async = false;
        s.onload = () => resolve();
        s.onerror = () => reject(new Error(src));
        document.body.appendChild(s);
      });

    (async () => {
      await load('https://unpkg.com/vue@3/dist/vue.global.prod.js');
      await load('https://venue.flyo.cloud/venue.umd.js');
      const { Vue, venue } = window as any;
      if (ref.current && Vue && venue) {
        Vue.createApp({ components: { venue } }).mount(ref.current);
      }
    })();
  }, []);

  return (
    <div
      ref={ref}
      dangerouslySetInnerHTML={{
        __html: `<venue id="${VENUE_ID}" token="${VENUE_TOKEN}" theme="dark"></venue>`,
      }}
    />
  );
}

Das Styling machst du danach ausschliesslich über --flyo-venue-* und die flyo-venue--Klassen in deinem globalen Stylesheet. Ein zusätzlicher Wrapper mit eigenen Farbregeln ist nicht nötig.

Häufige Fälle

Alles eckig statt abgerundet

css

:root { --flyo-venue-radius: 0; }

Eigene Schrift im Embed

Standardmässig erbt Venue die Schrift deiner Seite, inklusive der Formularfelder (siehe Was Venue von deiner Seite erbt). Nur wenn du im Embed eine andere Schrift willst:

css

:root { --flyo-venue-font-family: "Inter", system-ui, sans-serif; }

Auswahllisten und Datumsfelder erscheinen hell, obwohl der Embed dunkel ist

Diese Popups zeichnet das Betriebssystem, nicht CSS. Sie folgen color-scheme. Setze das Theme auf dark oder direkt:

css

:root { --flyo-venue-color-scheme: dark; }

Zebrastreifen in der Eintragsliste

css

:root { --flyo-venue-table-stripe-bg: #f9fafb; }

Schatten und Fokusrahmen abschalten

css

:root {
  --flyo-venue-shadow: none;
  --flyo-venue-focus-ring-width: 0;
}

Bildvorschau in einem anderen Format

Venue lädt die quadratische 300x300-Variante, deshalb ist auch der Rahmen quadratisch. Ein anderes Format zeigt denselben Ausschnitt in einem anderen Rahmen:

css

.flyo-venue-media-image {
  aspect-ratio: 4 / 3;
  object-fit: contain;  /* oder cover, wenn der Rand nicht stören soll */
}

Runde Vorschaubilder in der Liste

css

.flyo-venue-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

Navigation ohne Leiste, stattdessen mit Unterstrich

Standardmässig ist die Navigation eine Leiste, auf welcher der aktive Reiter als erhöhtes Feld sitzt. Flach wird sie so:

css

.flyo-venue-nav {
  padding: 0;
  border-bottom: 1px solid #eaecf0;
  border-radius: 0;
  background: none;
}

.flyo-venue-nav-link--active {
  background: none;
  box-shadow: inset 0 -2px 0 0 currentColor;
}

Umstieg von der Bootstrap-Version

Frühere Versionen des Venue Embeds basierten auf Bootstrap 5. Diese Abhängigkeit ist entfallen: der Embed bringt jetzt ein eigenes, deutlich kleineres Stylesheet mit (81 KB statt 219 KB) und lädt weder Bootstrap noch Popper.

Wenn du bisher Bootstrap-Klassen aus dem Embed überschrieben hast, greifen diese Regeln nicht mehr. Die Zuordnung:

Alt (Bootstrap)	Neu
`.bootstrap-scope`, `.main-wrapper`, `.containerblock`	`.flyo-venue`
`.form-control` (Text, Textarea, Datei)	`.flyo-venue-input`, `.flyo-venue-textarea`, `.flyo-venue-file`
`.form-select`	`.flyo-venue-select`
`.form-label`	`.flyo-venue-label`
`.form-text`	`.flyo-venue-hint`
`.form-check-input`	`.flyo-venue-checkbox`, `.flyo-venue-radio`
`.form-check-label`	`.flyo-venue-check-label`
`.btn`	`.flyo-venue-button`
`.btn-primary`, `.btn-secondary`, `.btn-success`, `.btn-danger`	`.flyo-venue-button--primary`, `--secondary`, `--success`, `--danger`
`.btn-outline-secondary`, `.btn-light`	`.flyo-venue-button--outline`
`.btn-link`	`.flyo-venue-button--link`
`.btn-sm`	`.flyo-venue-button--sm`
`.alert`, `.alert-danger` …	`.flyo-venue-alert`, `.flyo-venue-alert--danger` …
`.badge`, `.text-bg-success`	`.flyo-venue-badge`, `.flyo-venue-badge--online`
`.nav-tabs`, `.nav-link`	`.flyo-venue-nav`, `.flyo-venue-nav-link`
`.nav-link.active`	`.flyo-venue-nav-link--active`
`.table`, `.table-striped`	`.flyo-venue-table`
`.text-bg-light`	`.flyo-venue-panel`
`.card`	`.flyo-venue-card`
`.dropdown-menu`, `.dropdown-item`	`.flyo-venue-typeahead-menu`, `.flyo-venue-typeahead-item`
`.nl2br`	`.flyo-venue-text--pre`
Bootstrap-Abstände (`.mb-3`, `.row`, `.col-*`)	entfallen, Abstände kommen aus `--flyo-venue-gap`

In der Regel wird die Migration deutlich kürzer als vorher: das gesamte !important-Gefecht gegen .main-wrapper[data-v-…] .bootstrap-scope entfällt, und für die meisten Seiten genügen theme plus eine Handvoll Variablen.

Weiterführend

Venue Integration: Einrichtung, Embed Code, API
Venue Oberfläche: wie Content-Administratoren arbeiten

Felder

Nitro CMS

Venue

Signage OS

Berechtigungslogik

Nitro CMS Editor

Einstellungen

Wie das Überschreiben funktioniert

Was Venue von deiner Seite erbt

Formularfelder erben die Schrift ebenfalls

Alles skaliert in `em`

Eigene Schrift nur im Embed

Schriftschnitte

1. Theme wählen

2. CSS-Variablen setzen

Die wichtigsten Variablen

Vollständige Referenz

Grundlagen, Farben, Abstände

Formulare: Beschriftungen, Felder, Checkboxen

Buttons

Meldungen, Badges, Flächen, Navigation, Tabellen

Dropdowns, Tags, Medien, Editor

3. Klassen überschreiben

Struktur

Formulare

Buttons und Meldungen

Icons

Listen, Tabellen, Text

Breakpoints in der Eintragsliste

Layout-Hilfsklassen

Beispiel: Embed auf einer dunklen Seite

Beispiel: Tailwind CSS

Tailwind 4

Tailwind 3

Beispiel: Next.js oder React

Häufige Fälle

Umstieg von der Bootstrap-Version

Weiterführend

Wie das Überschreiben funktioniert ​

Was Venue von deiner Seite erbt ​

Formularfelder erben die Schrift ebenfalls ​

Alles skaliert in em ​

Eigene Schrift nur im Embed ​

Schriftschnitte ​

1. Theme wählen ​

2. CSS-Variablen setzen ​

Die wichtigsten Variablen ​

Vollständige Referenz ​

Grundlagen, Farben, Abstände ​

Formulare: Beschriftungen, Felder, Checkboxen ​

Buttons ​

Meldungen, Badges, Flächen, Navigation, Tabellen ​

Dropdowns, Tags, Medien, Editor ​

3. Klassen überschreiben ​

Struktur ​

Formulare ​

Buttons und Meldungen ​

Icons ​

Listen, Tabellen, Text ​

Breakpoints in der Eintragsliste ​

Layout-Hilfsklassen ​

Beispiel: Embed auf einer dunklen Seite ​

Beispiel: Tailwind CSS ​

Tailwind 4 ​

Tailwind 3 ​

Beispiel: Next.js oder React ​

Häufige Fälle ​

Umstieg von der Bootstrap-Version ​

Weiterführend ​

Wie das Überschreiben funktioniert

Was Venue von deiner Seite erbt

Formularfelder erben die Schrift ebenfalls

Alles skaliert in `em`

Eigene Schrift nur im Embed

Schriftschnitte

1. Theme wählen

2. CSS-Variablen setzen

Die wichtigsten Variablen

Vollständige Referenz

Grundlagen, Farben, Abstände

Formulare: Beschriftungen, Felder, Checkboxen

Buttons

Meldungen, Badges, Flächen, Navigation, Tabellen

Dropdowns, Tags, Medien, Editor

3. Klassen überschreiben

Struktur

Formulare

Buttons und Meldungen

Icons

Listen, Tabellen, Text

Breakpoints in der Eintragsliste

Layout-Hilfsklassen

Beispiel: Embed auf einer dunklen Seite

Beispiel: Tailwind CSS

Tailwind 4

Tailwind 3

Beispiel: Next.js oder React

Häufige Fälle

Umstieg von der Bootstrap-Version

Weiterführend