Bejelentkezés

WordPress-űrlapok formázása Flow CSS-változókkal

A Flow minden űrlapot Shadow DOM belsejében jelenít meg. A kezelőfelület Mantine komponenseket használ, és felülírható CSS-változókat biztosít a márkához igazításhoz.

Háromféleképpen szabhatja testre egy űrlap témáját:

  • Elsődleges szín és egyéni paletták – az Űrlap blokk felügyelőjében kiválaszthat egy elsődleges színt a Mantine palettájáról, meghatározhat világos/sötét elsődleges árnyalatokat, sőt saját színneveket és hexadecimális értékeket is megadhat. A bővítmény tízárnyalatos palettákat hoz létre a hexadecimális értékekből.

  • Színmód – állítson be világos, sötét vagy automatikus (rendszer-) módot. Az aktuális mód a data‑mantine‑color‑scheme attribútummal kerül a Shadow DOM-ba.

  • Témafelülírások – az Űrlap blokk rendelkezik Témafelülírások szövegterülettel. Az ide beillesztett CSS az űrlap Shadow DOM-jába kerül. Itt írhatja felül a Mantine tervezési tokenjeit (--mantine‑…) vagy a Flow-specifikus tokeneket (--flow‑…).

A varázslótokenek mellett a Flow általános blokktokenréteget is biztosít a többi űrlapvezérlőhöz. Ez stabil felülírási felületet ad a beviteli mezőkhöz, választógombokhoz, jelölőnégyzetekhez, csúszkákhoz, értékelésekhez, PIN-mezőkhöz, mezőcsoportokhoz, összecsukható blokkokhoz és műveletgombokhoz.

A gazdagabb megjelenítési és tartalomblokkokhoz a Flow külön tokeneket biztosít az idézetekhez, jelölésekhez/kiemelésekhez, jelvényekhez, kódblokkokhoz, formázott számokhoz, spoilerekhez, képekhez és túlcsorduló listaelemekhez.

Light DOM modális- és galériatokenek​

A Flow Modal és Flow Gallery nem az űrlap shadow root elemében jelenik meg. Normál téma- vagy oldal-CSS-ből írja felül őket a .wps-flow-modal és .wps-flow-gallery használatával, ne az űrlapszintű Témafelülírások mezőből.

Hasznos light DOM-tokenek:

  • Modális keret: --wps-flow-modal-panel-background, --wps-flow-modal-content-background, --wps-flow-modal-panel-color, --wps-flow-modal-panel-shadow, --wps-flow-modal-backdrop-background
  • Modális kezelőelemek: --wps-flow-modal-chrome-background, --wps-flow-modal-chrome-color
  • Galéria: --wps-flow-gallery-stage-background, --wps-flow-gallery-nav-background, --wps-flow-gallery-nav-color, --wps-flow-gallery-meta-color

A modális fejléc, törzs és műveleti helyek burkolói szándékosan átlátszók. A közös görgethető felület a .wps-flow-modal__content, ezért a --wps-flow-modal-content-background a megfelelő felülírás, ha összefüggő modális hátteret szeretne, amely nem takarja el a rögzített fejléc- és láblécrétegeket vagy a bezárógombot. A jobb felső kezelőelem-burkoló átlátszó marad; a --wps-flow-modal-chrome-background és --wps-flow-modal-chrome-color az egyes bezáró- és teljesképernyő-gombokra érvényes, így azok sötét média fölött is olvashatók és külön műveletként érzékelhetők.

.wps-flow-modal {
  --wps-flow-modal-panel-background: #ffffff;
  --wps-flow-modal-content-background: #ffffff;
  --wps-flow-modal-panel-color: #0f172a;
  --wps-flow-modal-chrome-background: #ffffff;
  --wps-flow-modal-chrome-color: #0f172a;
}

.wps-flow-gallery {
  --wps-flow-gallery-stage-background: #0f172a;
  --wps-flow-gallery-nav-background: rgba(15, 23, 42, 0.82);
  --wps-flow-gallery-nav-color: #ffffff;
  --wps-flow-gallery-meta-color: #e2e8f0;
}

Gyors kezdés​

A webhely összes Flow-űrlapjának betűkészletét, lekerekítését és kiemelőszínét az alábbiak Űrlap Témafelülírások mezőjébe illesztésével módosíthatja. Ezeket a szabályokat globálisan is meghatározhatja témája CSS-ében a .smartcloud-flow-shadow-root kijelölővel.

/* Target the flow shadow root */
.smartcloud-flow-shadow-root {
  /* Default text styling */
  --mantine-font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mantine-font-size-md: 16px;
  --mantine-line-height-md: 1.6;

  /* Radius and spacing */
  --mantine-radius-md: 6px;
  --mantine-spacing-md: 1rem;

  /* Primary colour */
  --mantine-color-blue-6: #0ea5e9;
  --mantine-primary-color-filled: var(--mantine-color-blue-filled);

  /* Generic Flow fields */
  --flow-control-radius: 999px;
  --flow-control-border-color: var(--mantine-color-blue-3);
  --flow-submit-bg: var(--mantine-color-blue-filled);
  --flow-submit-color: white;
  --flow-fieldset-border: 1px solid var(--mantine-color-blue-2);
}

/* Wizard specific tweaks */
.flow-wizard-container {
  --flow-wizard-gap: 1.5rem;
  --flow-wizard-border-radius: var(--mantine-radius-md);
}

.flow-wizard-title {
  --flow-wizard-title-size: 1.5rem;
  --flow-wizard-title-weight: 700;
}

.flow-wizard-next-button {
  --flow-wizard-next-bg: var(--mantine-color-blue-filled);
  --flow-wizard-next-color: white;
}

.flow-block__pin {
  --flow-pin-input-size: 3rem;
}

.flow-block__collapse {
  --flow-collapse-toggle-radius: 999px;
}

.flow-block__display-blockquote {
  --flow-blockquote-accent: var(--mantine-color-blue-6);
  --flow-blockquote-bg: color-mix(
    in srgb,
    var(--mantine-color-blue-6) 10%,
    white
  );
}

.flow-block__display-badge {
  --flow-badge-padding: 0.4rem 0.85rem;
}

.flow-block__table {
  --flow-table-header-bg: color-mix(in srgb, #0f172a 6%, white);
  --flow-table-border-color: color-mix(in srgb, #0f172a 14%, white);
}

.flow-block__timeline {
  --flow-timeline-accent: var(--mantine-color-blue-6);
}

.flow-block__overflow-list {
  --flow-overflow-item-bg: var(--mantine-color-blue-0);
}

Illessze ezt a CSS-t a Témafelülírások mezőbe a változások azonnali megtekintéséhez. Saját színneveivel és -értékeivel igazítsa az űrlapot márkájához.

Mantine tervezési tokenek​

A Mantine számos CSS-változót biztosít térközökhöz, lekerekítéshez, tipográfiához, színekhez, árnyékokhoz és z-indexekhez. A Flow örökli ezeket Shadow DOM-jában. Néhány hasznos token:

  • Térköz: --mantine-spacing-xs, --mantine-spacing-sm, --mantine-spacing-md, --mantine-spacing-lg, --mantine-spacing-xl.
  • Lekerekítés: --mantine-radius-xs, --mantine-radius-sm, --mantine-radius-md, --mantine-radius-lg, --mantine-radius-xl.
  • Betűkészletek és sormagasságok: --mantine-font-family, --mantine-font-size-sm, --mantine-font-size-md, --mantine-line-height-sm, --mantine-line-height-md.
  • Árnyékok: --mantine-shadow-xs, --mantine-shadow-sm, --mantine-shadow-md stb.
  • Színek: --mantine-color-gray-0 … --mantine-color-gray-9, --mantine-color-blue-0 … --mantine-color-blue-9, valamint további névvel ellátott színek. Elsődleges szín választásakor a --mantine-primary-color-* változók automatikusan frissülnek.

A teljes referenciát a Mantine CSS-változóinak listájában találja.

Flow varázslótokenek​

A Flow többlépéses űrlapjai varázslókomponenst használnak. Elrendezését és színeit az érintett elemre korlátozott --flow‑wizard‑… tokenekkel szabhatja testre. Fontos tokenek:

  • Tároló: --flow-wizard-gap (szakaszok közötti térköz), --flow-wizard-border-radius, --flow-wizard-padding.
  • Fejléc: --flow-wizard-header-spacing, --flow-wizard-title-color, --flow-wizard-title-size, --flow-wizard-title-weight.
  • Folyamatjelző: --flow-wizard-progress-margin, --flow-wizard-bar-height, --flow-wizard-bar-color, --flow-wizard-bar-bg.
  • Lépésjelző: --flow-wizard-stepper-gap, --flow-wizard-numbers-gap, --flow-wizard-number-size, --flow-wizard-number-active-bg, --flow-wizard-number-inactive-bg, --flow-wizard-number-active-color, --flow-wizard-number-inactive-color.
  • Lépéstartalom: --flow-wizard-step-gap, --flow-wizard-step-padding, --flow-wizard-step-title-color, --flow-wizard-step-title-size, --flow-wizard-step-title-weight, --flow-wizard-step-desc-color, --flow-wizard-step-desc-size, --flow-wizard-fields-gap.
  • Vezérlők: --flow-wizard-controls-gap, --flow-wizard-controls-margin, --flow-wizard-controls-padding, --flow-wizard-controls-border-top.
  • Gombok: --flow-wizard-prev-color, --flow-wizard-prev-bg, --flow-wizard-prev-border, --flow-wizard-next-color, --flow-wizard-next-bg.

A varázsló megjelenésének módosításához határozza meg ezeket a változókat a Témafelülírások CSS-ében. Például a lépésszámok nagyításához és az aktív szín módosításához:

.flow-wizard-step-number {
  --flow-wizard-number-size: 40px;
  --flow-wizard-number-active-bg: var(--mantine-color-green-6);
  --flow-wizard-number-active-color: white;
}

Flow mezőtokenek​

A szokásos Flow-blokkok is biztosítanak CSS-változókat, így az űrlap varázslón kívüli részeit ugyanazzal a tokenalapú módszerrel formázhatja.

  • Általános mezők: --flow-field-gap, --flow-field-padding, --flow-field-radius, --flow-field-bg, --flow-field-border, --flow-field-shadow.
  • Feliratok és üzenetek: --flow-field-label-color, --flow-field-label-size, --flow-field-label-weight, --flow-field-description-color, --flow-field-description-size, --flow-field-error-color, --flow-field-error-size, --flow-field-caption-color, --flow-field-caption-size.
  • Beviteli jellegű vezérlők: --flow-control-min-height, --flow-control-radius, --flow-control-bg, --flow-control-border-width, --flow-control-border-color, --flow-control-color, --flow-control-placeholder-color, --flow-control-padding-inline, --flow-control-padding-block, --flow-control-focus-border-color, --flow-control-focus-shadow, --flow-control-disabled-opacity.
  • Választóvezérlők: --flow-choice-size, --flow-choice-color, --flow-choice-label-color.
  • Csúszkák: --flow-slider-track-size, --flow-slider-track-bg, --flow-slider-bar-color, --flow-slider-thumb-size, --flow-slider-thumb-bg, --flow-slider-thumb-border.
  • PIN és értékelés: --flow-pin-gap, --flow-pin-input-size, --flow-rating-size, --flow-rating-active-color, --flow-rating-inactive-color.
  • Mezőcsoportok és összecsukás: --flow-fieldset-border, --flow-fieldset-radius, --flow-fieldset-padding, --flow-fieldset-legend-color, --flow-collapse-toggle-bg, --flow-collapse-toggle-border, --flow-collapse-toggle-radius, --flow-collapse-toggle-padding, --flow-collapse-toggle-color.
  • Műveletgombok: --flow-action-button-radius, --flow-action-button-padding, --flow-submit-bg, --flow-submit-color, --flow-submit-border, --flow-save-draft-bg, --flow-save-draft-color, --flow-save-draft-border.
  • Megjelenítési és tartalomblokkok: --flow-display-text-color, --flow-display-text-weight, --flow-display-text-line-height, --flow-display-title-color, --flow-display-title-weight, --flow-display-title-line-height, --flow-display-title-letter-spacing, --flow-blockquote-bg, --flow-blockquote-accent, --flow-blockquote-color, --flow-blockquote-radius, --flow-blockquote-padding, --flow-blockquote-gap, --flow-blockquote-border-width, --flow-blockquote-icon-size, --flow-blockquote-text-style, --flow-blockquote-cite-color, --flow-blockquote-cite-size, --flow-mark-bg, --flow-mark-color, --flow-mark-radius, --flow-mark-padding, --flow-highlight-bg, --flow-highlight-color, --flow-highlight-radius, --flow-highlight-padding, --flow-badge-padding, --flow-badge-circle-padding, --flow-badge-font-size, --flow-badge-font-weight, --flow-badge-letter-spacing, --flow-badge-text-transform, --flow-code-inline-bg, --flow-code-inline-color, --flow-code-block-bg, --flow-code-block-color, --flow-code-radius, --flow-code-padding, --flow-code-block-padding, --flow-number-color, --flow-number-weight, --flow-number-font-variant, --flow-spoiler-toggle-color, --flow-spoiler-content-color, --flow-image-radius, --flow-image-caption-color, --flow-image-caption-size, --flow-list-color, --flow-list-marker-color, --flow-list-padding-start, --flow-list-item-gap, --flow-table-color, --flow-table-border-color, --flow-table-cell-border-color, --flow-table-striped-bg, --flow-table-header-bg, --flow-table-header-color, --flow-table-header-weight, --flow-table-cell-color, --flow-table-caption-color, --flow-table-caption-padding-bottom, --flow-table-cell-padding-inline, --flow-table-cell-padding-block, --flow-timeline-color, --flow-timeline-gap, --flow-timeline-item-gap, --flow-timeline-content-gap, --flow-timeline-accent, --flow-timeline-line-opacity, --flow-timeline-bullet-color, --flow-timeline-bullet-weight, --flow-timeline-title-color, --flow-timeline-title-weight, --flow-overflow-item-bg, --flow-overflow-item-border, --flow-overflow-item-color, --flow-overflow-item-gap, --flow-overflow-item-radius, --flow-overflow-item-padding, --flow-overflow-item-shadow, --flow-overflow-summary-cursor, --flow-overflow-summary-font-weight, --flow-overflow-summary-letter-spacing.
  • AI-javaslatok: --flow-ai-suggestions-border-thickness, --flow-ai-suggestions-border-stops, --flow-ai-suggestions-border-speed.
  • Beküldési metaadatok és sikerállapot-segédek: --flow-submission-meta-bg, --flow-submission-meta-border, --flow-submission-meta-radius, --flow-submission-meta-padding, --flow-submission-meta-gap, --flow-submission-meta-label-color, --flow-submission-meta-value-color, --flow-submission-meta-value-font, --flow-submission-meta-copy-bg, --flow-submission-meta-copy-border, --flow-submission-meta-copy-color, --flow-submission-meta-shadow.

Ezek a tokenek témaalapértékként működnek. Ha egy blokk a szerkesztőben kifejezetten beállítja a színt, lekerekítést vagy hasonló tulajdonságot, a blokkonkénti beállítás elsőbbséget élvezhet a tokennel szemben.

Ha a felülírásokat egy adott blokktípusra szeretné korlátozni, a Flow stabil osztályokat helyez minden futásidejű blokk köré:

  • Beviteli jellegű blokkok: .flow-block__text, .flow-block__textarea, .flow-block__select, .flow-block__number, .flow-block__password, .flow-block__date
  • Választóblokkok: .flow-block__checkbox, .flow-block__radio, .flow-block__switch
  • Egyéb mezők: .flow-block__pin, .flow-block__slider, .flow-block__rangeslider, .flow-block__rating, .flow-block__file, .flow-block__tags
  • Tárolók és műveletek: .flow-block__fieldset, .flow-block__collapse, .flow-block__submit, .flow-block__save-draft
  • Megjelenítési/tartalomblokkok: .flow-block__display-text, .flow-block__display-title, .flow-block__display-blockquote, .flow-block__display-mark, .flow-block__display-highlight, .flow-block__display-badge, .flow-block__display-code, .flow-block__display-number-formatter, .flow-block__display-spoiler, .flow-block__display-image, .flow-block__list, .flow-block__list-item, .flow-block__table, .flow-block__table-row, .flow-block__table-th, .flow-block__table-td, .flow-block__timeline, .flow-block__timeline-item, .flow-block__overflow-list, .flow-block__overflow-list-item
  • AI- és válaszfelületek: .flow-ai-suggestions, .flow-ai-suggestions-border, .flow-submission-meta

Ezek a .flow-block__* burkolók alkotják a stabil témázási felületet. Az interaktív Mantine-vezérlő vagy -gomb gyakran egy szinttel mélyebben található, és ott használja a --flow-* tokent, ezért a belső segédosztályok célzása helyett a burkolón állítsa be a tokeneket.

A sikerállapot-elrendezések újrafelhasználják a műveletgomb és a beküldési metaadatok formázási felületeit, ezért a megerősítő képernyők témázásának nagy része a műveletgomb tokenjeivel és .flow-submission-meta felülírásokkal kezelhető.

Például csak a beküldés gomb és a PIN-mezők erőteljesebb márkastílusához:

.flow-block__submit {
  --flow-submit-bg: var(--mantine-color-green-6);
  --flow-submit-color: white;
}

.flow-block__pin {
  --flow-pin-input-size: 3rem;
  --flow-control-radius: 12px;
}

Másolható témareceptek​

Ezek az előbeállítások ügyfélprojektek kiindulópontjai. Illessze bármelyiket a Témafelülírások mezőbe, majd szükség szerint módosítsa a szín- és térköztokeneket.

Lekerekített SaaS​

Használja puha, modern, alkalmazásszerű megjelenéshez lekerekített vezérlőkkel és hangsúlyosabb elsődleges művelettel.

.smartcloud-flow-shadow-root {
  --mantine-font-family: Inter, system-ui, sans-serif;
  --mantine-radius-md: 14px;
  --mantine-spacing-md: 1rem;
  --mantine-color-blue-6: #2563eb;
  --mantine-primary-color-filled: var(--mantine-color-blue-filled);

  --flow-control-radius: 14px;
  --flow-control-border-color: var(--mantine-color-blue-2);
  --flow-control-focus-border-color: var(--mantine-color-blue-5);
  --flow-control-focus-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);

  --flow-submit-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
  --flow-submit-color: white;
  --flow-action-button-radius: 14px;

  --flow-wizard-number-active-bg: #2563eb;
  --flow-wizard-next-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
}

Klinikai minimalizmus​

Használja egészségügyi, jogi vagy adminisztratív űrlapokhoz, ahol az egyértelműség fontosabb a márka kifejezésénél.

.smartcloud-flow-shadow-root {
  --mantine-font-family: system-ui, sans-serif;
  --mantine-radius-md: 6px;
  --mantine-spacing-md: 0.875rem;

  --flow-field-gap: 0.375rem;
  --flow-control-radius: 6px;
  --flow-control-bg: #ffffff;
  --flow-control-border-color: #cbd5e1;
  --flow-control-focus-border-color: #0f172a;
  --flow-control-focus-shadow: 0 0 0 1px #0f172a;

  --flow-field-description-color: #475569;
  --flow-field-error-color: #b91c1c;

  --flow-fieldset-border: 1px solid #cbd5e1;
  --flow-collapse-toggle-border: 1px solid #cbd5e1;

  --flow-submit-bg: #0f172a;
  --flow-submit-color: #ffffff;
  --flow-save-draft-border: 1px solid #cbd5e1;
}

Határozott márka​

Használja, ha az űrlapnak láthatóan az ügyfél márkáját kell hordoznia az oldal kezelőelemeibe olvadás helyett.

.smartcloud-flow-shadow-root {
  --mantine-font-family: "Space Grotesk", system-ui, sans-serif;
  --mantine-radius-md: 10px;
  --mantine-color-pink-6: #e11d48;
  --mantine-primary-color-filled: var(--mantine-color-pink-filled);

  --flow-control-radius: 10px;
  --flow-control-border-width: 2px;
  --flow-control-border-color: #fecdd3;
  --flow-control-focus-border-color: #e11d48;
  --flow-control-focus-shadow: 0 0 0 3px rgb(225 29 72 / 0.18);

  --flow-choice-color: #e11d48;
  --flow-slider-bar-color: #e11d48;
  --flow-slider-thumb-border: 2px solid #e11d48;
  --flow-rating-active-color: #e11d48;

  --flow-submit-bg: #e11d48;
  --flow-submit-color: #ffffff;

  --flow-wizard-number-active-bg: #e11d48;
  --flow-wizard-next-bg: #e11d48;
}

Sötét kontraszt​

Használja, ha az űrlap sötét elrendezésben helyezkedik el, és erősebb kontrasztra van szüksége az egyes komponensek kézi átalakítása nélkül.

.smartcloud-flow-shadow-root[data-mantine-color-scheme="dark"] {
  --mantine-color-body: #0f172a;
  --mantine-color-text: #e5e7eb;

  --flow-field-description-color: #94a3b8;
  --flow-control-bg: #111827;
  --flow-control-color: #f8fafc;
  --flow-control-border-color: #334155;
  --flow-control-placeholder-color: #64748b;
  --flow-control-focus-border-color: #38bdf8;
  --flow-control-focus-shadow: 0 0 0 3px rgb(56 189 248 / 0.18);

  --flow-fieldset-border: 1px solid #334155;
  --flow-collapse-toggle-bg: #111827;
  --flow-collapse-toggle-border: 1px solid #334155;

  --flow-submit-bg: #38bdf8;
  --flow-submit-color: #0f172a;
  --flow-save-draft-color: #e5e7eb;
  --flow-save-draft-border: 1px solid #475569;

  --flow-wizard-bar-bg: #334155;
  --flow-wizard-number-inactive-bg: #1e293b;
  --flow-wizard-number-inactive-color: #cbd5e1;
  --flow-wizard-next-bg: #38bdf8;
  --flow-wizard-next-color: #0f172a;
}

Bevált gyakorlatok​

  • Korlátozza a Témafelülírásokat a .smartcloud-flow-shadow-root elemre, hogy csak a Flow felületeire legyenek hatással.
  • Mantine-változókkal tartsa egységesen a színeket és térközöket világos és sötét módban.
  • Amikor az Űrlap blokk Színek mezőjével egyéni színeket határoz meg, válasszon egyedi neveket, például brand, és ezeket használja a felülírásokban (--mantine-color-brand-6).
  • Tesztelje a felülírásokat világos és sötét módban is. A mód beállításához vagy felismeréséhez használja a data-mantine-color-scheme attribútumot a .smartcloud-flow-shadow-root elemen.