/* Optik der Bestaetigungsseite (inc/page/confirm.php) - Upload-Schritt und Bestaetigung im selben Rahmen. Diese Seite rendert ein eigenes HTML-Dokument, laedt ueber wp_head() aber das vollstaendige Theme-CSS. Zwei Vorkehrungen halten das Theme draussen: 1. Alles haengt unter #wpsap-flow. Die ID-Spezifitaet (0,1,0,1) schlaegt praktisch jede Theme-Regel, auch die :where()-Regeln der Block-Themes. 2. wp-sap.php reiht diese Datei mit Prioritaet 99 ein, damit sie im hinter dem Theme steht - bei gleicher Spezifitaet gewinnt sonst das Theme. Ohne beides rutschte etwa das zentrierte Icon der Dropzone nach links, weil viele Themes img { display: block } setzen. Die Farben kommen aus css/style.css (--wpsap-*), die Fallbacks stehen dabei, falls diese Datei einmal allein geladen wird. */ /* ========================================================================== Grundlage und Reset im eigenen Bereich ========================================================================== */ body.wpsap-flow-body { margin: 0; padding: 0; background-color: var(--wpsap-canvas, #f0f1f2); font-family: var(--wpsap-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); font-size: 16px; line-height: 1.5; color: var(--wpsap-ink-soft, #4a4a4a); -webkit-font-smoothing: antialiased; } #wpsap-flow, #wpsap-flow *, #wpsap-flow *::before, #wpsap-flow *::after { box-sizing: border-box; } /* Gezielt statt "all: unset": die Elemente, die hier vorkommen, auf einen bekannten Stand bringen, ohne Formularverhalten zu zerstoeren. */ #wpsap-flow h1, #wpsap-flow h2, #wpsap-flow h3, #wpsap-flow h4, #wpsap-flow h5, #wpsap-flow h6, #wpsap-flow p, #wpsap-flow ul, #wpsap-flow li, #wpsap-flow table, #wpsap-flow figure { margin: 0; padding: 0; border: 0; font-family: inherit; color: inherit; background: none; } #wpsap-flow ul { list-style: none; } #wpsap-flow input, #wpsap-flow button, #wpsap-flow textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin: 0; } #wpsap-flow img, #wpsap-flow svg { max-width: 100%; height: auto; } #wpsap-flow a { color: var(--wpsap-ink, #161616); text-decoration: underline; text-underline-offset: 2px; } #wpsap-flow a:hover { text-decoration: none; } /* ========================================================================== Testmodus-Hinweis ========================================================================== */ .wpsap-testbar { background: #fef3cf; border-bottom: 1px solid #e8d9a0; padding: 10px 16px; text-align: center; font-family: var(--wpsap-font, sans-serif); font-size: 14px; color: #6b5a1e; } /* ========================================================================== Rahmen: Upload einspaltig (SS3), Bestaetigung zweispaltig (SS4) ========================================================================== */ /* Traegt die Mindesthoehe, damit der Testmodus-Streifen darueber passen kann, ohne dass die Seite ueber den Schirm hinauswaechst. min-height statt height: der Inhalt darf jederzeit laenger werden. */ #wpsap-flow { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* Die Bestaetigung ist einspaltig (die frueher linke Aside mit Logo, Fakten und Copyright ist entfernt). flex:1 1 auto fuellt die Resthoehe unter dem Flex-#wpsap-flow - das tat vorher .wpsap-flow__grid. */ .purchased_area { flex: 1 1 auto; } /* Bleibt fuer den Upload-Schritt (Marken-Text als Logo-Fallback). */ #wpsap-flow .wpsap-flow__site { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--wpsap-ink, #161616); overflow-wrap: anywhere; } /* Bestaetigung: Inhalt zentriert mit fester Maximalbreite (SS4). Die Blanket-Regel gibt jedem direkten Kind dieselbe Breite, damit Badge, Titel, Tabelle und Aktionszeile buendig uebereinanderstehen. */ .wpsap-flow__main { padding: 3rem 1.75rem; display: flex; flex-direction: column; align-items: center; text-align: center; } .wpsap-flow__main > * { width: 100%; max-width: 520px; } /* Schritt 1 ist einspaltig und ohne Aside. wp-sap.js schaltet die Sichtbarkeit per .hide()/.show(); der gezeigte Zustand kommt aus dem Stylesheet, das Markup setzt inline nur display:none fuer den verborgenen Schritt - so ueberschreibt keine Inline-Regel das Grid der Bestaetigung. */ .upload_ads_area { flex: 1 1 auto; padding: 3rem 1.25rem; } .wpsap-single { width: 100%; max-width: 560px; margin: 0 auto; } /* Nur der Kopfbereich des Upload-Schritts ist zentriert; Karte und Felder darunter bleiben linksbuendig. */ .wpsap-single > .wpsap-flow__brand, .wpsap-single > .wpsap-step__title, .wpsap-single > .wpsap-step__subtitle, .wpsap-single > .wpsap-step__lead { text-align: center; } .wpsap-single > .wpsap-flow__brand { margin-bottom: 1.5rem; } .upload_ads_area .wpsap-links { justify-content: center; } /* ========================================================================== Logo, Untertitel und Erfolgs-Badge ========================================================================== */ /* Logo (get_custom_logo) oben im Upload-Schritt bzw. in der Aside. In der Aside bleibt es linksbuendig wie die uebrigen Angaben. */ #wpsap-flow .wpsap-flow__brand img, #wpsap-flow .custom-logo { display: inline-block; width: auto; height: auto; max-height: 52px; } #wpsap-flow .wpsap-step__subtitle { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--wpsap-ink-soft, #4a4a4a); margin: 0 0 1rem 0; } /* Siegel mit Haken ueber dem Titel der Bestaetigung (SS4). */ .wpsap-badge { display: flex; justify-content: center; color: var(--wpsap-ink, #161616); margin-bottom: 1rem; } #wpsap-flow .wpsap-badge svg { display: block; width: 64px; height: 64px; } /* ========================================================================== Gemeinsame Bausteine ========================================================================== */ #wpsap-flow .wpsap-step__title { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--wpsap-ink, #161616); margin-bottom: .5rem; } #wpsap-flow .wpsap-step__lead { font-size: 15px; line-height: 1.6; color: var(--wpsap-muted, #6b7280); margin-bottom: 1.5rem; } .wpsap-card { background-color: var(--wpsap-surface, #fff); border: 1px solid var(--wpsap-line, #dcdfe3); border-radius: var(--wpsap-radius, 8px); box-shadow: var(--wpsap-shadow, 0 1px 3px rgba(0, 0, 0, .08)); padding: 1.25rem; } .wpsap-note { background-color: var(--wpsap-surface, #fff); border: 1px solid var(--wpsap-line, #dcdfe3); border-left: 3px solid var(--wpsap-ink, #161616); border-radius: var(--wpsap-radius-sm, 5px); padding: .875rem 1rem; margin-bottom: 1.25rem; font-size: 14px; line-height: 1.55; color: var(--wpsap-ink-soft, #4a4a4a); white-space: pre-line; } /* Ersetzt die beiden alert()-Aufrufe aus wp-sap.js. */ .wpsap-alert { display: none; border-radius: var(--wpsap-radius-sm, 5px); padding: .75rem 1rem; margin-bottom: 1rem; font-size: 14px; line-height: 1.5; background-color: #fdecea; border: 1px solid #f3c5c0; color: #8f2d21; } .wpsap-alert.is-visible { display: block; } #wpsap-flow .wpsap-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; font-size: 14px; } #wpsap-flow .wpsap-links a { color: var(--wpsap-muted, #6b7280); } /* ========================================================================== Buttons ========================================================================== */ #wpsap-flow .wpsap-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; padding: .75rem 1.5rem; border-radius: var(--wpsap-radius-sm, 5px); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } #wpsap-flow .wpsap-btn:focus-visible { outline: none; box-shadow: var(--wpsap-focus, 0 0 0 3px rgba(22, 22, 22, .18)); } #wpsap-flow .wpsap-btn--primary { background-color: var(--wpsap-ink, #161616); border-color: var(--wpsap-ink, #161616); color: #fff; box-shadow: var(--wpsap-shadow, 0 1px 3px rgba(0, 0, 0, .08)); } #wpsap-flow .wpsap-btn--primary:hover { background-color: #2c2c2c; } #wpsap-flow .wpsap-btn--secondary { background-color: var(--wpsap-surface, #fff); border-color: var(--wpsap-line, #dcdfe3); color: var(--wpsap-ink, #161616); } #wpsap-flow .wpsap-btn--secondary:hover { border-color: var(--wpsap-ink, #161616); background-color: #f7f7f8; } #wpsap-flow .wpsap-btn--quiet { background: none; border-color: transparent; color: var(--wpsap-muted, #6b7280); } #wpsap-flow .wpsap-btn--quiet:hover { color: var(--wpsap-ink, #161616); background-color: #f0f0f1; } /* Blauer Upload-Button (SS3) - hebt das Hochladen von der schwarzen Primaeraktion "Next" ab. Fuellt die Breite der Karte. */ #wpsap-flow .wpsap-btn--upload { width: 100%; background-color: #337ab6; border-color: #337ab6; color: #fff; } #wpsap-flow .wpsap-btn--upload:hover { background-color: #2b6698; border-color: #2b6698; } #wpsap-flow .wpsap-btn[disabled] { opacity: .6; cursor: default; } /* Beide Schritte schliessen mit derselben Aktionszeile ab - im Fluss, nicht wie bisher per position:fixed am Fensterrand. */ .wpsap-actions { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; margin-top: 1.5rem; } /* ========================================================================== Schritt 1: Upload ========================================================================== */ #wp_sap_form { display: block; } .file-area { position: relative; margin-bottom: 1rem; } /* Liegt unsichtbar ueber der gesamten Flaeche: macht sie klickbar und nimmt zugleich echte Drag-and-drop-Ablagen entgegen. */ .file-area input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; } .file-dummy { display: flex; align-items: center; justify-content: center; min-height: 210px; padding: 1.5rem; text-align: center; background-color: #f4f5f6; border: 2px dashed var(--wpsap-line, #dcdfe3); border-radius: var(--wpsap-radius-sm, 5px); transition: border-color .15s ease, background-color .15s ease; } .file-area input[type="file"]:hover + .file-dummy, .file-area input[type="file"]:focus-visible + .file-dummy { border-color: var(--wpsap-ink, #161616); background-color: #eff0f1; } /* Die gemeinsame Form der beiden Zustaende - ohne display, sonst uebersteuert diese Regel die Sichtbarkeitsschaltung darunter. */ .file-dummy .default, .file-dummy .success { flex-direction: column; align-items: center; gap: .75rem; width: 100%; } /* Bestandstrick: solange keine Datei gewaehlt ist, gilt das Feld wegen required als invalid - dann steht die Aufforderung. Mit Datei kehrt sich das um und die Vorschau uebernimmt. */ .file-dummy .default { display: flex; } .file-dummy .success { display: none; } .file-area input[type="file"]:valid + .file-dummy .default { display: none; } .file-area input[type="file"]:valid + .file-dummy .success { display: flex; } .file-dummy img { max-width: 100%; max-height: 190px; width: auto; height: auto; border-radius: var(--wpsap-radius-sm, 5px); } .wpsap-drop__icon { display: block; color: #9aa0a6; } .wpsap-drop__icon svg { display: block; width: 40px; height: 40px; } #wpsap-flow .file-dummy h5, #wpsap-flow .file-dummy h6 { font-size: 15px; font-weight: 500; color: var(--wpsap-muted, #6b7280); } .wpsap-field { margin-bottom: 1rem; } #wpsap-flow .wpsap-field__label { display: block; font-size: 13px; font-weight: 600; color: var(--wpsap-ink, #161616); margin-bottom: .375rem; } /* Die Bestandsregel .file input { width: 96% } liess das Feld schmaler ausfallen als den Button darueber - beide sitzen jetzt auf 100 % und rechnen mit box-sizing. */ #wpsap-flow input[type="text"], #wpsap-flow input[type="url"] { display: block; width: 100%; padding: .7rem .875rem; background-color: var(--wpsap-surface, #fff); border: 1px solid var(--wpsap-line, #dcdfe3); border-radius: var(--wpsap-radius-sm, 5px); font-size: 15px; color: var(--wpsap-ink, #161616); } #wpsap-flow input[type="text"]:focus, #wpsap-flow input[type="url"]:focus { outline: none; border-color: var(--wpsap-ink, #161616); box-shadow: var(--wpsap-focus, 0 0 0 3px rgba(22, 22, 22, .18)); } #wpsap-flow input::placeholder { color: #9aa0a6; } #upload_image_btn { width: 100%; } /* ========================================================================== Schritt 2: Bestaetigung ========================================================================== */ #wpsap-flow .purchased_area table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 15px; } #wpsap-flow .purchased_area th, #wpsap-flow .purchased_area td { border: 1px solid var(--wpsap-line, #dcdfe3); padding: .75rem 1rem; text-align: left; vertical-align: top; /* Beide Spalten identisch: schwarze Schrift auf weissem Grund. Explizit gesetzt, damit kein Theme-CSS auf der Bestaetigungsseite durchschlaegt. */ color: #000; background-color: #fff; } #wpsap-flow .purchased_area th { width: 40%; } .link_input_desc_area { background-color: var(--wpsap-canvas-soft, #fafafa); border: 1px solid var(--wpsap-line, #dcdfe3); border-radius: var(--wpsap-radius-sm, 5px); padding: 1rem; /* Der Hauptbereich zentriert seinen Inhalt (SS4); Feld und Hinweis bleiben darin aber linksbuendig. */ text-align: left; } .input-group { display: flex; align-items: stretch; } /* Der Button steckt im Bestand in einem . Ohne diese Zeile wird nur das span auf Feldhoehe gestreckt, der Button darin bleibt kuerzer. */ .input-group-button { display: flex; } /* Der Link ist lang und wird ohnehin kopiert, nicht gelesen - er darf abgeschnitten enden, solange das Feld selbst vollstaendig sichtbar ist. */ #wpsap-flow input#foo { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: 14px; color: var(--wpsap-muted, #6b7280); } #wpsap-flow button.wpsap_ads_copy_btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 .875rem; background-color: var(--wpsap-surface, #fff); border: 1px solid var(--wpsap-line, #dcdfe3); border-left: 0; border-radius: 0 var(--wpsap-radius-sm, 5px) var(--wpsap-radius-sm, 5px) 0; color: var(--wpsap-ink, #161616); cursor: pointer; } #wpsap-flow button.wpsap_ads_copy_btn:hover { background-color: #f0f0f1; } #wpsap-flow button.wpsap_ads_copy_btn svg { display: block; width: 16px; height: 16px; } .wpsap-copy-hint { display: flex; align-items: flex-start; gap: .625rem; margin-top: .75rem; } .wpsap-copy-hint__icon { flex: 0 0 auto; color: var(--wpsap-muted, #6b7280); padding-top: 1px; } .wpsap-copy-hint__icon svg { display: block; width: 18px; height: 18px; } #wpsap-flow .wpsap-copy-hint p { font-size: 13px; line-height: 1.5; color: var(--wpsap-ink-soft, #4a4a4a); } /* ========================================================================== Schmalere Fenster ========================================================================== */ @media (max-width: 900px) { #wpsap-flow { min-height: 0; } .wpsap-flow__main { padding: 1.75rem 1.25rem 2.5rem; } } @media (max-width: 560px) { #wpsap-flow .wpsap-step__title { font-size: 23px; } .wpsap-flow__main { padding: 1.25rem 1rem 2rem; } .wpsap-card { padding: 1rem; } .file-dummy { min-height: 170px; padding: 1rem; } /* Nebeneinander bleiben hier nur Bruchteile je Spalte - gestapelt ist jede Zeile noch lesbar. */ #wpsap-flow .purchased_area table, #wpsap-flow .purchased_area tbody, #wpsap-flow .purchased_area tr, #wpsap-flow .purchased_area th, #wpsap-flow .purchased_area td { display: block; width: auto; } #wpsap-flow .purchased_area tr { border: 1px solid var(--wpsap-line, #dcdfe3); border-radius: var(--wpsap-radius-sm, 5px); margin-bottom: .625rem; overflow: hidden; } #wpsap-flow .purchased_area th, #wpsap-flow .purchased_area td { border: 0; padding: .625rem .875rem; } #wpsap-flow .purchased_area th { padding-bottom: 0; background: none; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--wpsap-muted, #6b7280); } .wpsap-actions { flex-direction: column-reverse; align-items: stretch; } #wpsap-flow .wpsap-actions .wpsap-btn { width: 100%; } }