Styling

Gehostete Apps sehen ohne eigenes Zutun aufgeräumt aus und passen sich dem hellen oder dunklen Thema des Hosts an. Wenn du mehr willst – Vereinsfarben, runde Knöpfe, eine eigene Tab-Leiste –, schreibst du echtes CSS in styling.css. Die Datei liegt im Bereich Code neben app.json und main.js und wird nach den eingebauten Styles geladen: Sie darf alles überschreiben.

Die Tabellen auf dieser Seite entstehen aus STYLE_REFERENCE der Runtime – derselben Quelle, aus der die eingebauten Styles und die Vorlage von styling.css gebaut sind.

Der schnelle Weg: Variablen

Alle Bausteine lesen ihre Farben, Abstände und Radien aus CSS-Variablen. Die meisten Wünsche erfüllst du, indem du ein paar davon in :root überschreibst:

:root {
  --mc-color-primary: #0b7a3b;
  --mc-color-primary-soft: #e3f4ea;
  --mc-radius: 12px;
}

Variable	Standard	Wofür
`--mc-color-primary`	`#4c6ef5`	Hauptfarbe: primäre Knöpfe, aktive Tabs, Fokusrahmen
`--mc-color-primary-contrast`	`#ffffff`	Schrift auf der Hauptfarbe
`--mc-color-primary-soft`	`#edf2ff`	Heller Ton der Hauptfarbe, z. B. Hover in Tabellen, helle Knöpfe
`--mc-color-text`	`#1a1b1e`	Textfarbe
`--mc-color-muted`	`#6b7280`	Gedämpfter Text, Beschriftungen, leere Listen
`--mc-color-background`	`#ffffff`	Hintergrund der App und der Eingabefelder
`--mc-color-surface`	`#f8f9fa`	Hintergrund von Karten und Tabellenköpfen
`--mc-color-border`	`#dee2e6`	Rahmen von Karten, Feldern, Tabellen und Listen
`--mc-color-danger`	`#fa5252`	Farbe für Löschen und Fehler
`--mc-color-danger-contrast`	`#ffffff`	Schrift auf der Fehlerfarbe
`--mc-radius`	`8px`	Eckenradius von Knöpfen, Feldern, Karten und Tabellen
`--mc-font-family`	`system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`	Schriftart der App
`--mc-font-size`	`14px`	Grundschriftgröße
`--mc-spacing`	`16px`	Innenabstand der App und von Karten
`--mc-gap`	`12px`	Abstand zwischen Elementen in Karten
`--mc-button-padding`	`8px 14px`	Innenabstand von Knöpfen
`--mc-button-font-weight`	`600`	Schriftstärke von Knöpfen
`--mc-input-height`	`36px`	Mindesthöhe von Eingabefeldern und Auswahlen
`--mc-input-padding`	`7px 10px`	Innenabstand von Eingabefeldern
`--mc-table-cell-padding`	`8px 12px`	Innenabstand von Tabellenzellen
`--mc-tabs-indicator`	`var(--mc-color-primary)`	Farbe der Linie unter dem aktiven Tab
`--mc-shadow`	`0 4px 16px rgba(0, 0, 0, 0.2)`	Schatten von Hinweisen (Toasts)

Selektoren

Jeder Baustein trägt feste Klassen, die sich nicht ändern, und das Attribut data-mc-id mit seiner id aus app.json. Eigene Klassen vergibst du im Builder unter „CSS-Klasse“ (in app.json: props.className).

Selektor	Was
`.mc-app`	Die ganze App
`[data-mc-id="<id>"]`	Genau ein Element, die ID steht im Builder unter dem Namen des Elements
`.mc-stack`	Stapel (Layout)
`.mc-grid`	Raster (Layout)
`.mc-card`	Karte
`.mc-card__title`	Titel einer Karte
`.mc-heading`	Überschrift
`.mc-heading--h1 … .mc-heading--h4`	Überschrift je Ebene
`.mc-text`	Text
`.mc-button`	Knopf
`.mc-button--primary`	Gefüllter Knopf (Standard)
`.mc-button--secondary`	Heller, umrandeter oder dezenter Knopf
`.mc-button--danger`	Roter Knopf
`.mc-field`	Beschriftung und Eingabe eines Formularfelds
`.mc-input`	Textfeld
`.mc-select`	Auswahl
`.mc-checkbox`	Checkbox mit Beschriftung
`.mc-date`	Datumsfeld
`.mc-table`	Tabelle
`.mc-table__head`	Kopf der Tabelle
`.mc-table__row`	Zeile der Tabelle
`.mc-table__cell`	Zelle der Tabelle (auch im Kopf)
`.mc-list`	Liste
`.mc-list__item`	Eintrag der Liste
`.mc-tabs`	Tabs
`.mc-tabs__list`	Leiste mit den Tab-Knöpfen
`.mc-tabs__tab`	Ein Tab-Knopf
`.mc-tabs__tab--active`	Der aktive Tab-Knopf
`.mc-tabs__panel`	Inhalt des aktiven Tabs
`.mc-image`	Bild
`.mc-chart`	Diagramm
`.mc-empty`	Text ohne Einträge in Tabellen und Listen
`.mc-toast`	Hinweis außerhalb eines Hosts

Die Klassen folgen einem festen Muster: .mc-<baustein> für den Baustein, .mc-<baustein>__<teil> für seine Teile, .mc-<baustein>--<variante> für Varianten. Andere Klassen und die HTML-Struktur darunter sind nicht zugesichert – verlass dich nur auf die Tabelle oben.

Ein Button mit der id speichern und der CSS-Klasse gross erscheint so im HTML:

<button type="button" class="mc-button mc-button--primary gross" data-mc-id="speichern">Speichern</button>

Beispiele

Vereinsfarben

:root {
  --mc-color-primary: #b3121b;
  --mc-color-primary-contrast: #ffffff;
  --mc-color-primary-soft: #fbe9ea;
  --mc-tabs-indicator: #b3121b;
}

/* Im dunklen Thema setzt die Runtime eigene Farben – dort ebenfalls überschreiben. */
:root[data-mc-theme="dark"] {
  --mc-color-primary: #ff6b72;
  --mc-color-primary-contrast: #1a0507;
  --mc-color-primary-soft: #3a1416;
}

Knöpfe als Pillen

.mc-button {
  border-radius: 999px;
  --mc-button-padding: 10px 20px;
}

.mc-button--primary {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mc-button--danger {
  background: transparent;
  color: var(--mc-color-danger);
}

Dunkle Tab-Leiste

.mc-tabs__list {
  background: #1a1b1e;
  border: none;
  border-radius: var(--mc-radius);
  padding: 4px;
}

.mc-tabs__tab {
  color: #adb5bd;
  border: none;
  border-radius: calc(var(--mc-radius) - 2px);
}

.mc-tabs__tab--active {
  background: #373a40;
  color: #ffffff;
}

Zebra-Tabelle und hervorgehobene Spalte

.mc-table__row:nth-child(even) .mc-table__cell {
  background: var(--mc-color-surface);
}

[data-mc-id="termine"] .mc-table__cell:first-child {
  font-weight: 600;
}

Ein einzelnes Element

[data-mc-id="heading-1"] {
  color: var(--mc-color-primary);
  font-size: 28px;
}

/* eigene Klasse aus dem Builder */
.hinweis {
  border-left: 3px solid var(--mc-color-primary);
  padding-left: 12px;
}

Hintergrundbild

.mc-app {
  background: url("https://cdn.example.de/verein/wappen.png") no-repeat right 16px top 16px / 64px;
}

Was die Sicherheitsrichtlinie erlaubt

Gehostete Apps laufen unter einer strengen Content Security Policy. Für CSS heißt das:

Was	Erlaubt?
`styling.css` und weitere `.css`-Dateien des Entwurfs	ja
Inline-Styles	ja
`@import` von fremden Adressen	nein
Bilder in `url(…)` über `https:` oder als `data:`	ja
Bilder über `http:`	nein
Webfonts (`@font-face`, Google Fonts, auch als `data:`)	nein – nimm Systemschriften über `--mc-font-family`

Die ganze Richtlinie der Run-Shell:

default-src 'none'; script-src 'self' <runtime-cdn>; style-src 'self' 'unsafe-inline' <runtime-cdn>;
img-src https: data:; connect-src 'self' https://*.api.methacore.de <devhub-api>;
frame-ancestors <dashboard> <studio>; base-uri 'none'; form-action 'none'

Helles und dunkles Thema

Der Host sagt der App beim Start, ob er hell oder dunkel ist, und meldet jeden Wechsel. Die Runtime setzt dann data-mc-theme="light" oder "dark" auf das <html>-Element. Außerhalb eines Hosts folgt sie prefers-color-scheme.

Im dunklen Thema überschreibt die Runtime diese Variablen: Hintergrund, Fläche, Text, gedämpfter Text, Rahmen und die drei Primärfarben. Weil :root[data-mc-theme="dark"] spezifischer ist als :root, gewinnt dort die Runtime gegen deine Werte in :root. Willst du deine Farben auch im Dunkeln, setz sie zusätzlich unter :root[data-mc-theme="dark"] (siehe Vereinsfarben). Soll deine App immer gleich aussehen, schreib beide Regeln mit denselben Werten.

Prüf dein Styling in beiden Themen, bevor du eine Version einreichst.

Die Vorlage

Jede neue App startet mit dieser styling.css. Sie führt alle Variablen mit ihren Standardwerten auf; lösch, was du nicht brauchst.

/*
 * styling.css – eigenes Aussehen der App mit echtem CSS.
 *
 * Die Datei wird nach den eingebauten Styles geladen und darf alles überschreiben.
 * Am einfachsten passt du die Variablen unten an. Jeder Baustein hat außerdem feste
 * Klassen (z. B. .mc-button, .mc-table__cell) und das Attribut data-mc-id mit seiner ID,
 * damit du einzelne Elemente ansprechen kannst: [data-mc-id="button-1"] { … }
 * Eigene Klassen vergibst du im Builder unter „CSS-Klasse“.
 *
 * Externe Dateien (@import, url() auf fremde Adressen) blockiert die Sicherheitsrichtlinie der App.
 */

:root {
  /* Hauptfarbe: primäre Knöpfe, aktive Tabs, Fokusrahmen */
  --mc-color-primary: #4c6ef5;
  /* Schrift auf der Hauptfarbe */
  --mc-color-primary-contrast: #ffffff;
  /* Heller Ton der Hauptfarbe, z. B. Hover in Tabellen, helle Knöpfe */
  --mc-color-primary-soft: #edf2ff;
  /* Textfarbe */
  --mc-color-text: #1a1b1e;
  /* Gedämpfter Text, Beschriftungen, leere Listen */
  --mc-color-muted: #6b7280;
  /* Hintergrund der App und der Eingabefelder */
  --mc-color-background: #ffffff;
  /* Hintergrund von Karten und Tabellenköpfen */
  --mc-color-surface: #f8f9fa;
  /* Rahmen von Karten, Feldern, Tabellen und Listen */
  --mc-color-border: #dee2e6;
  /* Farbe für Löschen und Fehler */
  --mc-color-danger: #fa5252;
  /* Schrift auf der Fehlerfarbe */
  --mc-color-danger-contrast: #ffffff;
  /* Eckenradius von Knöpfen, Feldern, Karten und Tabellen */
  --mc-radius: 8px;
  /* Schriftart der App */
  --mc-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Grundschriftgröße */
  --mc-font-size: 14px;
  /* Innenabstand der App und von Karten */
  --mc-spacing: 16px;
  /* Abstand zwischen Elementen in Karten */
  --mc-gap: 12px;
  /* Innenabstand von Knöpfen */
  --mc-button-padding: 8px 14px;
  /* Schriftstärke von Knöpfen */
  --mc-button-font-weight: 600;
  /* Mindesthöhe von Eingabefeldern und Auswahlen */
  --mc-input-height: 36px;
  /* Innenabstand von Eingabefeldern */
  --mc-input-padding: 7px 10px;
  /* Innenabstand von Tabellenzellen */
  --mc-table-cell-padding: 8px 12px;
  /* Farbe der Linie unter dem aktiven Tab */
  --mc-tabs-indicator: var(--mc-color-primary);
  /* Schatten von Hinweisen (Toasts) */
  --mc-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Beispiele – entferne die Kommentarzeichen, um sie zu nutzen:

.mc-button--primary {
  border-radius: 999px;
  text-transform: uppercase;
}

.mc-table__row:nth-child(even) .mc-table__cell {
  background: var(--mc-color-surface);
}

[data-mc-id="heading-1"] {
  color: var(--mc-color-primary);
}
*/