.webone-form { --wf-card-bg: transparent; --wf-card-border: none; --wf-card-radius: 0px; --wf-card-padding: 0px; /* rem, inte px - matchar temats egen konvention (webone_format_rem_value() i temats functions.php): html{font-size:62.5%} (main.css) gör att 1rem = 10px där, så 2rem = 20px, samma synliga mellanrum som tidigare. */ --wf-field-gap: 2rem; --wf-card-shadow: none; --wf-backdrop-filter: none; --wf-accent: var(--primary, #fad399); --wf-input-bg: #fff; --wf-input-border: #ccc; --wf-input-text: inherit; --wf-input-placeholder: #767676; --wf-input-radius: 6px; --wf-focus-color: var(--wf-accent); --wf-btn-radius: 6px; --wf-btn-bg: var(--wf-accent); /* Automatisk, subtil mörkläggning av knappfärgen om ingen egen hover-färg är satt - color-mix() stöds av alla moderna webbläsare. */ --wf-btn-hover-bg: color-mix(in srgb, var(--wf-btn-bg) 85%, black); --wf-btn-text: inherit; --wf-btn-text-hover: var(--wf-btn-text); --wf-text: inherit; --wf-label-text: var(--wf-text); --wf-hint-text: var(--wf-label-text); --wf-required-color: #b32d2e; --wf-error-text: #b32d2e; --wf-success-color: #16a34a; --wf-icon-color: var(--wf-input-placeholder); --wf-form-margin-top: 0px; --wf-form-margin-bottom: 0px; --wf-heading-text: var(--wf-text); --wf-heading-size: 24px; --wf-heading-align: left; /* rem, inte px - se kommentaren vid --wf-field-gap ovan. */ --wf-heading-margin-bottom: 2rem; --wf-heading-paragraph-text: var(--wf-hint-text); --wf-heading-paragraph-size: 16px; --wf-heading-paragraph-margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: var(--wf-field-gap, 2rem); box-sizing: border-box; width: 100%; /* Defensiv fallback: 1150px matchar temats egen gräns för sidbyggarens formulärblock (.box-100-webone-form .box-content, se blocks.css) - så formuläret ser rätt ut/är centrerat även om [webone_form id=x] någon gång används UTANFÖR det blocket (t.ex. i ett rått Custom HTML-block), utan att bero på temats CSS för det. Harmlöst dubbelvärde när blocket redan sätter samma gräns. */ max-width: 1150px; margin-left: auto; margin-right: auto; margin-top: var(--wf-form-margin-top); margin-bottom: var(--wf-form-margin-bottom); color: var(--wf-text); background: var(--wf-card-bg); border: var(--wf-card-border); border-radius: var(--wf-card-radius); padding: var(--wf-card-padding); /* Egen sidopadding (settings[card_padding_inline]) - tomt = samma som kortpaddingen ovan. */ padding-inline: var(--wf-card-padding-inline, var(--wf-card-padding)); box-shadow: var(--wf-card-shadow); -webkit-backdrop-filter: var(--wf-backdrop-filter); backdrop-filter: var(--wf-backdrop-filter); } /* Ett formulärs EGNA inställningar ska alltid vinna över värdhemsidans globala formulärregler. Temat loddeskakel har t.ex. "form { border-radius: 2rem !important }" och "select { border: ... !important }" (main.css) - de slår annars vilken vanlig regel som helst här, även ett hörn/en fältkant som admin uttryckligen valt för just det här formuläret. !important mot !important avgörs på specificitet, och .webone-form-klassen är mer specifik än temats bara elementselektorer. - Kortets hörn: bara när formuläret har ett eget värde (klassen .webone-form--own-radius sätts då av webone_forms_render_form_markup()), annars behåller sajten sitt eget standardhörn. - Rullistornas kant följer alltid fältkanten (--wf-input-border), precis som textfälten. */ .webone-form.webone-form--own-radius { border-radius: var(--wf-card-radius) !important; } .webone-form select { border: 1px solid var(--wf-input-border) !important; } .webone-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Renderas utanför/före .webone-form (se webone_forms_render_form_markup) - fasta färger oavsett vald mall, så den alltid är läsbar och känns igen som en systemvarning oavsett om formuläret ligger ovanpå en bild, är mörkt osv. */ .webone-form-test-banner { margin-bottom: 12px; padding: 10px 16px; background: #fff3cd; border: 1px solid #ffe69c; border-radius: 6px; color: #664d03; font-size: 14px; font-weight: 600; } /* Valfri rubrik överst i formuläret (settings[form_heading], se webone_forms_render_form_markup()) - renderas INNANFÖR .webone-form, så den ärver kortets bakgrund/glaseffekt/marginaler automatiskt istället för att vara ett separat element ovanför blocket. */ .webone-form-heading { margin: 0 0 var(--wf-heading-margin-bottom) 0; color: var(--wf-heading-text); font-size: var(--wf-heading-size); text-align: var(--wf-heading-align); font-weight: 700; line-height: 1.3; } /* Valfri brödtext under rubriken (settings[form_heading_paragraph]) - egen färg/storlek/avstånd, oberoende av rubrikens. Ärver rubrikens justering (text-align) eftersom de hör ihop visuellt som ett rubrikblock. */ .webone-form-heading-paragraph { margin: 0 0 var(--wf-heading-paragraph-margin-bottom) 0; color: var(--wf-heading-paragraph-text); font-size: var(--wf-heading-paragraph-size); text-align: var(--wf-heading-align); line-height: 1.5; } .webone-form-field { display: flex; flex-direction: column; gap: 6px; } /* Bredd i sin rad (se "Bredd"-kolumnen i admin) - .webone-form-step är flex-wrap med gap:2rem (se nedan), så varje bredd-klass måste räkna bort sin andel av det gapet för att N fält med samma bredd ska dela raden exakt, precis som motsvarande system i sidbyggaren (blocks.css). */ .webone-form-field--width-100 { flex: 0 0 100%; } /* Reduktionerna nedan är samma kvot mot standard-gapet (2rem) som innan --wf-field-gap infördes (t.ex. 75%: 1.5rem = 0.75 * 2rem) - så bredderna fortsätter dela raden exakt oavsett vilket gap admin ställer in, inte bara vid standardvärdet 2rem. */ .webone-form-field--width-75 { flex: 0 0 calc(75% - (var(--wf-field-gap, 2rem) * 0.75)); } .webone-form-field--width-66 { flex: 0 0 calc(66.666% - (var(--wf-field-gap, 2rem) * 0.3333)); } .webone-form-field--width-60 { flex: 0 0 calc(60% - (var(--wf-field-gap, 2rem) * 0.4)); } .webone-form-field--width-50 { flex: 0 0 calc(50% - (var(--wf-field-gap, 2rem) * 0.5)); } .webone-form-field--width-40 { flex: 0 0 calc(40% - (var(--wf-field-gap, 2rem) * 0.6)); } .webone-form-field--width-33 { flex: 0 0 calc(33.333% - (var(--wf-field-gap, 2rem) * 0.6666)); } .webone-form-field--width-25 { flex: 0 0 calc(25% - (var(--wf-field-gap, 2rem) * 0.75)); } /* "Auto" - fyller det som är kvar av raden bredvid fält med fast bredd (flera auto-fält på samma rad delar lika). Står det ensamt blir det helbrett. min-width:0 så långa platshållartexter inte trycker ut fältet. */ .webone-form-field--width-auto { flex: 1 1 0; min-width: 0; } /* Villkorlig fältlogik (tilläggsfunktion) sätter [hidden] via JS - annars skulle display:flex ovan vinna över webbläsarens inbyggda [hidden]-regel (samma anledning som .webone-form-step[hidden] nedan behöver detta). */ .webone-form-field[hidden] { display: none; } .webone-form-label { font-weight: var(--wf-label-weight, 600); font-size: var(--wf-label-size); color: var(--wf-label-text); } .webone-form-required { color: var(--wf-required-color); } .webone-form-input, .webone-form select { /* px, not rem: this theme sets html{font-size:62.5%}, redefining 1rem to 10px site-wide. rem values here would inherit that and render ~40% smaller than intended - px keeps this component's sizing absolute and independent of whatever root font-size a host theme happens to use. 12px/16px padding + 16px text lands the control around ~46-48px tall, the standard comfortable/touch-friendly input height. */ padding: 12px 16px; background: var(--wf-input-bg); color: var(--wf-input-text); border: 1px solid var(--wf-input-border); border-radius: var(--wf-input-radius); font-size: var(--wf-input-size, 16px); font-weight: var(--wf-input-weight, 400); width: 100%; box-sizing: border-box; } textarea.webone-form-input { min-height: 128px; resize: vertical; } /* Hela fältet öppnar nu kalendern/klockan (se showPicker() i webone-forms-frontend.js), inte bara den lilla ikonen - pekaren ska spegla det. */ input.webone-form-input[type="date"], input.webone-form-input[type="time"] { cursor: pointer; } .webone-form-input::placeholder { color: var(--wf-input-placeholder); /* Firefox dims placeholder text to ~54% opacity by default, which makes the configured color look washed out and inconsistent with Chrome. */ opacity: 1; } .webone-form-input:focus, .webone-form select:focus { outline: 2px solid var(--wf-focus-color); outline-offset: 1px; border-color: var(--wf-focus-color); } /* Fält-ikoner (valbara per fält, se "Ikon"-kolumnen i admin). Ikonen ligger ovanpå fältet (pointer-events: none - klick går rakt igenom till inputen under), och inputen får vänsterpadding så texten inte hamnar bakom den. */ .webone-form-field-icon-wrap { position: relative; } .webone-form-field-icon-wrap .webone-form-input { padding-left: 42px; } .webone-form-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--wf-icon-color); font-size: 16px; line-height: 1; pointer-events: none; } /* Textarea är hög, inte en enradig ruta - ikonen ska sitta uppe i hörnet, inte flyta mitt i en tom yta. */ .webone-form-field-icon-wrap--top .webone-form-field-icon { top: 16px; transform: none; } /* När en egen ikon valts för ett datum-/tidsfält tar den över den rollen - webbläsarens (svarta, oflyttbara) kalender-/klockikon döljs då för att undvika två ikoner samtidigt. Fältet öppnas ändå oavsett (se klicket som hanteras i JS, webone-forms-frontend.js) - så det här är rent visuellt. */ .webone-form-field-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator, .webone-form-field-icon-wrap input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0; } .webone-form-radio-group, .webone-form-checkbox-option { display: flex; flex-direction: column; gap: 5px; } .webone-form-radio-option { display: flex; align-items: center; gap: 6px; font-weight: 400; } .webone-form-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 3px; } .webone-form-rating input { position: absolute; opacity: 0; pointer-events: none; } .webone-form-rating label { font-size: 29px; line-height: 1; color: #ccc; cursor: pointer; } .webone-form-rating input:checked~label, .webone-form-rating label:hover, .webone-form-rating label:hover~label { color: var(--wf-accent); } .webone-form-field-hint { color: var(--wf-hint-text); /* opacity: 0.7; */ font-size: 12px; margin: 4px 0 0; } .webone-form-error-message { color: var(--wf-error-text); font-size: 14px; margin: 0; min-height: 1em; } .webone-form-general-error { color: var(--wf-error-text); font-weight: 600; } /* Tema-anpassad istället för en fast vit/grön ruta - annars sticker den ut mot t.ex. mallen Glas eller Mörkt kort. Matchar fältens egen yta (--wf-input-bg/-border) så den känns som en avsiktlig del av kortet, med en bock-ikon i accentfärgen för en tydlig "klart"-känsla istället för att bara vara en anonym textrad kvar där formuläret nyss var. */ .webone-form-success { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 16px; border-radius: var(--wf-card-radius, 10px); /* background: var(--wf-input-bg); */ /* border: 1px solid var(--wf-input-border); */ color: var(--wf-text); text-align: center; font-size: 16px; line-height: 1.5; } .webone-form-success::before { content: "\2713"; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; /* Alltid grön "klart"-signal (--wf-success-color) oavsett knapp-/ accentfärg - i accentfärgen (t.ex. guld med svart bock) läste den inte som en bekräftelse. */ background: var(--wf-success-color); color: #fff; font-size: 22px; font-weight: 700; } /* Tack-läget (klassen sätts av webone-forms-frontend.js efter lyckat inskick): fälten är dolda, så bara rubrik, bekräftelse och integritetsraden ska synas - centrerat, tätare och utan introduktionstexten ("Fyll i dina uppgifter…") som inte längre gäller. */ .webone-form.webone-form--sent { gap: 12px; } .webone-form--sent .webone-form-heading { margin-bottom: 0; text-align: center; } .webone-form--sent .webone-form-heading-paragraph, .webone-form--sent .webone-form-general-error { display: none; } .webone-form.webone-form--sent .webone-form-legal-notice { margin: 0; text-align: center; } .webone-form-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* Länk till integritetspolicyn (GDPR) + reCAPTCHA-upplysningen som ersätter den dolda badgen (krav från Google), se webone_forms_render_form_markup(). Medvetet liten och nedtonad. */ .webone-form .webone-form-legal-notice { margin: 12px 0 0; font-size: 12px !important; line-height: 1.5; font-weight: 400; color: var(--wf-hint-text); opacity: 0.7; } .webone-form .webone-form-legal-notice a { font-size: inherit !important; color: inherit; text-decoration: underline; } .webone-form-btn { /* px, not rem - see .webone-form-input above for why. Matches that same ~46-48px height, plus a min-width so a short label like "Skicka" doesn't render as a tiny pill (it was measuring ~64px wide before this). */ padding: 14px 32px; min-width: 160px; border: none; font-size: var(--wf-btn-size, 16px); cursor: pointer; font-weight: var(--wf-btn-weight, 600); transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; /* Temats main.css sätter "form button { border-radius: 1rem !important; }" samt en egen hover-bakgrund/textfärg med !important (se "form button:hover" / "input[type=submit]:hover") - dessa vinner annars alltid över knappens riktiga utseende oavsett CSS-specificitet, så samma vapen (!important) krävs här för att knappen faktiskt ska se ut och bete sig som konfigurerat. */ border-radius: var(--wf-btn-radius, 6px) !important; color: inherit !important; } .webone-form-btn-submit, .webone-form-btn-next { background: var(--wf-btn-bg) !important; color: var(--wf-btn-text) !important; } .webone-form-btn-submit:hover, .webone-form-btn-next:hover { background: var(--wf-btn-hover-bg) !important; color: var(--wf-btn-text-hover) !important; } .webone-form-btn-back { background: #eee !important; } .webone-form-btn-back:hover { background: #ddd !important; color: inherit !important; } /* Knapp hover-animation (valfri, settings[button_hover_animation]) - ren rörelse/skugga ovanpå färgerna ovan. Gäller alla knappar (Skicka/Nästa/ Tillbaka) lika, via en data-attribut på formulärets wrapper-element. */ .webone-form[data-btn-hover-anim="lift"] .webone-form-btn:hover { transform: translateY(-3px); } .webone-form[data-btn-hover-anim="zoom"] .webone-form-btn:hover { transform: scale(1.05); } .webone-form[data-btn-hover-anim="shadow"] .webone-form-btn:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .webone-form-btn:disabled { opacity: 0.6; cursor: default; } /* Ikon i knappen (valfri, settings[button_icon]) - samma mönster som "Ikon i knappar" i temats css/blocks/blocks.css (webone_button_inner_html()): en centrerad flex-rad så ikon och text hamnar på samma höjd med ett jämnt mellanrum. Ordningen (före/efter) styrs av markupens ordning, inte CSS. */ .webone-form-btn-has-icon { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; } .webone-form-btn-icon { flex: 0 0 auto; font-size: 1.1em; line-height: 1; color: inherit; } .webone-form-btn-text { min-width: 0; } .webone-form-progress { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; margin-bottom: 8px; } .webone-form-progress-step.active { font-weight: 700; color: var(--wf-accent); } .webone-form-step { display: flex; flex-wrap: wrap; gap: var(--wf-field-gap, 2rem); } .webone-form-step[hidden] { display: none; } .webone-form-field.webone-form-field--has-error .webone-form-input, .webone-form-field.webone-form-field--has-error select { border-color: #b32d2e; } /* Wiggle feedback on invalid fields - triggered by JS (adds/removes this class) on whichever element represents the field: the input/select, or the radio-group/rating wrapper for grouped inputs. Intensity is set per form via settings[shake_effect] as a data-shake-effect attribute on the
- "off" still gets the red border/message above, just no motion. */ @keyframes webone-form-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } @keyframes webone-form-shake-subtle { 20%, 80% { transform: translateX(-1px); } 40%, 60% { transform: translateX(1px); } } .webone-form-shake { animation: webone-form-shake 0.4s ease-in-out; } .webone-form[data-shake-effect="subtle"] .webone-form-shake { animation-name: webone-form-shake-subtle; animation-duration: 0.3s; } .webone-form[data-shake-effect="off"] .webone-form-shake { animation: none; } /* ========================================================================= Mallar ("themes"). Varje mall skriver bara över --wf-*-variablerna ovan. Nya mallar: lägg till ett .webone-form-theme-{key}-block här (eller i temats egen CSS om det registreras via 'webone_forms_templates'-filtret, se includes/webone_forms_templates.php) - inget annat behöver ändras. ========================================================================= */ /* ===== Mall: Standard ===== */ .webone-form-theme-standard { --wf-card-bg: #fff; --wf-card-border: 1px solid #e2e2e2; --wf-card-radius: 10px; --wf-card-padding: 32px; --wf-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } /* ===== Mall: Glas (för formulär ovanpå bild/video) ===== */ .webone-form-theme-glass { --wf-card-bg: rgba(255, 255, 255, 0.15); --wf-card-border: 1px solid rgba(255, 255, 255, 0.25); --wf-card-radius: 10px; --wf-card-padding: 40px; --wf-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); --wf-backdrop-filter: blur(8px); --wf-input-bg: rgba(255, 255, 255, 0.5); --wf-input-border: rgba(255, 255, 255, 0.4); --wf-text: #fff; } /* Fallback för webbläsare utan stöd för backdrop-filter/blur */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .webone-form-theme-glass { --wf-card-bg: #0000005c; } } /* ===== Mall: Frostat glas (tätare/mjölkigare variant av Glas) ===== Apple-dock-ikon-känslan från https://codepen.io/lassiterda/pen/vEOpqMa (liquidGlass-tint+liquidGlass-shine) bakad in direkt i kortets egna variabler istället för att bero på att en dekoration/dess extra DOM-lager är vald - så mallen känns "frostad" redan i sitt grundläge, med eller utan Frost/Vätska/Rörlig bakgrund-dekoration ovanpå. */ .webone-form-theme-frosted-glass { --wf-card-bg: rgba(255, 255, 255, 0.4); --wf-card-border: 1px solid rgba(255, 255, 255, 0.35); --wf-card-radius: 14px; --wf-card-padding: 40px; --wf-card-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), inset 2px 2px 1px 0 rgba(255, 255, 255, 0.6), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.25), inset 0 16px 24px -18px rgba(255, 255, 255, 0.5), inset 0 -18px 26px -20px rgba(0, 0, 0, 0.22); --wf-backdrop-filter: blur(18px) saturate(1.1) brightness(1.04); --wf-input-bg: rgba(255, 255, 255, 0.55); --wf-input-border: rgba(255, 255, 255, 0.45); --wf-text: #fff; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .webone-form-theme-frosted-glass { --wf-card-bg: #ffffffb0; } } /* ===== Glaseffekt: dekorativa extralager (webone_forms_get_glass_decorations(), se webone_forms_templates.php) - alltid rent kosmetiska, aldrig klickbara (pointer-events:none) så de aldrig kan stå i vägen för formulärets riktiga fält och knappar. Styrkan (--wf-decoration-intensity, 0-1) sätts inline per formulär från "Effektstyrka"-reglaget, se webone_forms_shortcode.php. ===== */ .webone-form-theme-glass[class*="webone-form-decoration-"], .webone-form-theme-frosted-glass[class*="webone-form-decoration-"] { position: relative; overflow: hidden; /* Egen stapel-kontext så .wf-glass-effect-layer nedan kan lägga sig BAKOM de riktiga fälten (negativt z-index) utan att räkna relativt mot något annat på sidan - se kommentaren vid .wf-glass-effect-layer. */ z-index: 0; /* backdrop-filter (nedan) är redan den dyraste delen av det här kortet att kompositera om på varje scroll-frame - contain:paint lovar webbläsaren att inget av kortets innehåll målas utanför den här rutan, så den kan begränsa om-target/repaint-arbetet till kortets egna gränser istället för att behöva räkna på sidan runt omkring. */ contain: paint; } /* Frost/Vätska/Rörlig bakgrund (webone_forms_render_glass_svg_filter(), webone_forms_templates.php) - riktig ljusbrytning/distorsion via en SVG- filter (feTurbulence -> feDisplacementMap), inte ett platt mönster. Ligger som ett EGET lager istället för direkt på .webone-form, annars skulle filtret distordera fälten/texten ovanpå också, inte bara det man ser "genom" glaset. z-index:-1 (se stapel-kontexten ovan) håller det bakom allt riktigt innehåll men ovanför kortets egen bakgrundsfärg/-gradient. backdrop-filter/filter sätts inline (webone_forms_shortcode.php) - de beror på formulärets Blurstyrka/Distorsion-inställningar. */ .wf-glass-effect-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; /* "Effektstyrka"-reglaget (glass_decoration_intensity, satt inline per formulär i webone_forms_shortcode.php) - blandar bort hela laget (blur+distorsion) mot kortets egen, otonade glasyta ju lägre den är. 0 = effekten osynlig, 1 = full styrka. Fallback 1 om variabeln av någon anledning saknas (ingen ska tystas ner utan att admin bett om det). */ opacity: var(--wf-decoration-intensity, 1); } /* Frost - dubbla, kaklade brusmasker ovanpå distorsionslagret istället för en jämn blur, samma "etsat glas"-knep som duschdörrs-/kontorsglas-navet i https://codepen.io/simeydotme/pen/qEBmggz (nav:before/nav:after med en kaklad mask-image, motsatt brightness() per lager). Skillnaden här är att masken är en helt procedurell inline SVG data-URI (webone_forms_get_noise_mask_data_uri(), webone_forms_templates.php / noiseMaskDataUri() i webone-forms-admin.js) istället för en nedladdad PNG - ingen bildfil, inget nätverksanrop. Två lager med motsatt brightness (ljust ovanpå mörkt) ger korn/djup istället för en platt, jämnt frostad yta (den "90-talskänsla" som annars uppstår av ren blur). */ .webone-form-decoration-frost .wf-glass-effect-layer::before, .webone-form-decoration-frost .wf-glass-effect-layer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; -webkit-mask-image: var(--wf-noise-mask); mask-image: var(--wf-noise-mask); mask-mode: luminance; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 90px 90px; mask-size: 90px 90px; } .webone-form-decoration-frost .wf-glass-effect-layer::before { background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: brightness(1.12) saturate(1.05); backdrop-filter: brightness(1.12) saturate(1.05); } .webone-form-decoration-frost .wf-glass-effect-layer::after { background: rgba(20, 30, 45, 0.12); -webkit-backdrop-filter: brightness(0.92); backdrop-filter: brightness(0.92); -webkit-mask-size: 65px 65px; mask-size: 65px 65px; -webkit-mask-position: 14px 7px; mask-position: 14px 7px; } /* Ljusreflex - en smal, ljus kant uppe till vänster (som riktigt glas som fångar ljus från ett håll) plus en svagare på motsatt sida för djup. Går att stänga av per formulär (glass_decoration_shine). */ .wf-glass-shine-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; overflow: hidden; /* Rikare kant-ljus än en enkel dubbel-skugga (samma princip som nav-pillens box-shadow-stapel i https://codepen.io/simeydotme/pen/qEBmggz och lassiterda/vEOpqMa) - en skarp ljuskant uppe till vänster, en svagare motsatt kant, plus två breda mjuka inset-toningar (ljus upptill, mörkare nedtill) för att ge glasytan djup istället för en platt linje. */ box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.55), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.2), inset 0 14px 20px -16px rgba(255, 255, 255, 0.45), inset 0 -16px 24px -18px rgba(0, 0, 0, 0.28); } /* Rörlig bakgrund - en diagonal glastoning ovanpå det suddiga/förvrängda lagret, samma glansiga "crystal"-yta som .glass-button-bakgrunden i https://codepen.io/Esther-k/pen/XJbxKQq (135deg, avtagande vit opacitet) - ger en blank, "polerad" glaskänsla istället för en ren blur/distorsion. */ .webone-form-decoration-motion .wf-glass-effect-layer { background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.02) 100%); } /* En mjuk, sakta driftande glansfläck ovanpå ljusreflexen, så kortet känns "levande" ovanpå en video/rörlig bild istället för att stå som en helt statisk ruta - inspirerad av floatBG-tekniken (bakgrunden bakom ett glaselement driver sakta) i samma pen. Respekterar minska-rörelse, se @media-blocket längre ner (samma block som droppar/snöflingor). */ .webone-form-decoration-motion .wf-glass-shine-layer::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), transparent 55%); animation: wf-glass-drift 18s ease-in-out infinite; } @keyframes wf-glass-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, 6%) scale(1.08); } } /* Vattendroppar/snöflingor - se webone-forms-frontend.js (spawnar riktiga .wf-droplet/.wf-snowflake-element per formulär, antal och storlek styrs av data-glass-intensity). Behållaren är gemensam för båda effekterna. */ .wf-decoration-container { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; border-radius: inherit; } /* Varje droppe: en organisk (inte perfekt rund) blob-form - samma tvålagers-uppdelning som https://codepen.io/raczo/pen/KKVbQmV: en "textur"-yta (::before) som filtreras genom den delade, ljussatta vatten-SVG:n (webone_forms_render_water_svg_filter()), och en separat "ljus"-yta (::after) med ren CSS-skuggning/gradient OVANPÅ texturen. De MÅSTE vara skilda lager - SVG-filtrets feComposite-operator "in" (se webone_forms_templates.php) ersätter HELA det filtrerade elementets färg med den ljussatta bruskartan, så en box-shadow satt på samma element som filtret skulle bara försvinna/ätas upp av texturen. --wf-droplet-filter sätts per droppe i spawnDrops() (webone-forms-frontend.js), eftersom filter-id varierar per formulär. HELT STATISK - ingen shimmer-/trickle-animation. Få, stora, subtila droppar som bara ligger stilla läses som en "blöt" struktur; många små som skimrar/rinner lästes som en daterad 90-tals-effekt. */ .wf-droplet { position: absolute; } .wf-droplet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; /* Bara vad filtret klipper texturen mot (feComposite "in") - syns knappt själv, men krävs som fallback om webbläsaren skulle strunta i SVG-filtret. */ background: rgba(255, 255, 255, 0.4); filter: var(--wf-droplet-filter, none); } /* Ljuslager - ren CSS ovanpå texturen: rikare skuggstapel än en enkel dubbel-inset (mörk kant uppe till vänster/skugga bort från ljuskällan, ljus kant nere till höger/droppens buktande yta fångar ljus, mjuk yttre kontaktskugga) plus en liten radial-gradient-glansfläck, positionerad slumpmässigt per droppe (--wf-droplet-highlight, satt i spawnDrops()) - samma princip som raczo-pennans ::after-lager, generaliserad till en enda regel istället för pennans hårdkodade nth-child-varianter. */ .wf-droplet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--wf-droplet-highlight, 30% 25%), rgba(255, 255, 255, 0.95), transparent 38%); box-shadow: inset -2px -2px 2px rgba(10, 20, 45, 0.4), inset 1.5px 1.5px 1.5px rgba(255, 255, 255, 0.75), inset 0 -3px 4px -1px rgba(255, 255, 255, 0.35), inset 0 3px 5px -2px rgba(10, 20, 45, 0.3), 0 1px 3px rgba(0, 0, 0, 0.18); } /* Snö/frost - statisk struktur, inga fallande ❄-glyfer/animation (samma anledning som droppen ovan). Mjuka, luddiga vita fläckar (radial-gradient + blur) utspridda över glaset - som frost-/snödrivor, inte enskilda flingor i rörelse. Storlek/opacitet/position sätts per instans i spawnSnow() (webone-forms-frontend.js). */ .wf-snowflake { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%); filter: blur(3px); } @media (prefers-reduced-motion: reduce) { /* Droppar/frost-fläckar är redan helt statiska (ingen animation) - bara "Rörlig bakgrund"-dekorationens glansdrift behöver stängas av här. */ .webone-form-decoration-motion .wf-glass-shine-layer::before { animation: none; } } /* ===== Mall: Minimal (ingen kortbakgrund, smälter in i sektionen) ===== */ .webone-form-theme-minimal { --wf-card-bg: transparent; --wf-card-border: none; --wf-card-padding: 0px; --wf-card-shadow: none; } /* ===== Mall: Mörkt kort ===== */ .webone-form-theme-dark-card { --wf-card-bg: #1a1a1a; --wf-card-radius: 12px; --wf-card-padding: 40px; --wf-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); --wf-input-bg: #2a2a2a; --wf-input-border: #444; --wf-input-placeholder: #999; --wf-text: #fff; } /* ========================================================================= Responsivitet (Surfplatta/Mobil) - settings[card_padding_tablet]/ [card_padding_mobile]/[disable_heavy_effects_mobile], se wf-responsive-settings i webone_forms_metabox.php. Brytpunkter (≤1024px Surfplatta, ≤767px Mobil) matchar sidbyggarens nya motsvarighet (webone_bp_suffix() i temats functions.php) för konsekvens - de två systemen är annars helt oberoende av varandra. ========================================================================= */ /* --wf-card-padding-tablet/-mobile sätts inline per formulär (webone_forms_shortcode.php) bara när admin uttryckligen angett ett eget värde - annars faller kedjan tillbaka på nästa nivå (mobil -> surfplatta -> mallens vanliga --wf-card-padding), aldrig till 0/ingenting. */ @media (max-width: 1024px) { .webone-form { padding: var(--wf-card-padding-tablet, var(--wf-card-padding)); /* Sidopadding: den mest specifika skärmstorleken vinner, och inom en skärmstorlek går sidopaddingen före den vanliga kortpaddingen. */ padding-inline: var(--wf-card-padding-inline-tablet, var(--wf-card-padding-tablet, var(--wf-card-padding-inline, var(--wf-card-padding)))); } } @media (max-width: 767px) { .webone-form { /* min() istället för ett hårdkodat värde som sista fallback - kapar bara ett STORT värde (t.ex. mallen Glas/Frostat glas 40px) till 24px på mobil, men rör aldrig ett redan litet/avsiktligt 0px (mallen Minimal) uppåt. Bara relevant om admin INTE själv satt ett eget mobilvärde ovan (settings[card_padding_mobile]/[_tablet]). */ padding: var(--wf-card-padding-mobile, var(--wf-card-padding-tablet, min(var(--wf-card-padding), 24px))); /* Samma kedja som ovan men med sidopaddingen först på varje nivå. Sista fallbacken kapar ett STORT desktopvärde till 24px precis som paddingen. */ padding-inline: var(--wf-card-padding-inline-mobile, var(--wf-card-padding-mobile, var(--wf-card-padding-inline-tablet, var(--wf-card-padding-tablet, min(var(--wf-card-padding-inline, var(--wf-card-padding)), 24px))))); } /* Fält satta till halv/tredjedels bredd (se .webone-form-field--width-* ovan) kollapsar alltid till en kolumn under mobilbrytpunkten, oavsett admins val - samma "mobil vinner alltid" princip som sidbyggarens bredd-fält. Ingen !important behövs: bredden sätts via CSS-klass, inte inline style, så en vanlig senare regel i samma stilmall vinner redan av sig själv. */ .webone-form-field { flex-basis: 100%; } } /* "Stäng av tunga effekter på mobil" - backdrop-filter (särskilt kombinerat med ett SVG-distorsionsfilter, se webone_forms_render_glass_svg_filter() i webone_forms_templates.php) är det i särklass tyngsta att rendera/repaint:a på svaga mobil-GPU:er. Kortets vanliga, halvgenomskinliga bakgrundsfärg (--wf-card-bg) består - bara själva blur/distorsions-/ brusmasklagren stängs av, inte hela glaskänslan. */ @media (max-width: 767px) { .webone-form[data-disable-heavy-fx] { --wf-backdrop-filter: none; } /* !important: backdrop-filter sätts INLINE på lagret (webone_forms_shortcode.php) - utan !important vann inline-stilen och SVG-filtret kördes ändå på mobil (verifierat 2026-10-12). */ .webone-form[data-disable-heavy-fx] .wf-glass-effect-layer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .webone-form[data-disable-heavy-fx] .wf-glass-effect-layer::before, .webone-form[data-disable-heavy-fx] .wf-glass-effect-layer::after { display: none; } /* Dekorationsklassen sitter på SAMMA element som .webone-form (inte en förälder), därav ingen mellanslag - den gamla descendant-selektorn träffade aldrig. */ .webone-form[data-disable-heavy-fx].webone-form-decoration-motion .wf-glass-shine-layer::before { animation: none; display: none; } } /* Under pågående skroll (klassen sätts av webone-forms-frontend.js, se "Glaseffekt under skroll") pausas glansdriften - annars målas den ovanpå det backdrop-filtrerade lagret på varje skroll-frame. */ .webone-form.wf-is-scrolling .wf-glass-shine-layer::before { animation-play-state: paused; } /* "Ta bort kortets skugga på mobil" (hide_shadow_mobile) nollställer redan --wf-card-shadow via en genererad