frontend.css
569 lines
| 1 | /** |
| 2 | * Style Customizer v2 — static frontend rule template. |
| 3 | * |
| 4 | * The shared half of the "one stylesheet per form" model: these rules READ the |
| 5 | * `var(--evf-*)` custom properties; the Compiler emits the per-form VALUES as an inline |
| 6 | * block on `#evf-{id}` (plus tablet/mobile media queries for spacing). |
| 7 | * |
| 8 | * SPECIFICITY: every selector is scoped `.everest-forms .evf-style-v2 …` — matching the |
| 9 | * legacy compiler (`views/scss.php` scopes under `.everest-forms #evf-{id}`) so these |
| 10 | * token-driven rules reliably beat Everest Forms' generic base frontend CSS (`.everest-forms |
| 11 | * …`). A user's Custom CSS (injected later, or with its own specificity) can still override. |
| 12 | * |
| 13 | * Selectors mirror the legacy `views/scss.php` exactly, so a v2 form styles the same real |
| 14 | * markup the v1 engine did. Only TOKEN-DRIVEN properties live here; structural CSS stays in |
| 15 | * the base frontend stylesheet. |
| 16 | * |
| 17 | * @package EverestForms\Addons\StyleCustomizer\V2 |
| 18 | */ |
| 19 | |
| 20 | /* ===== FORM — container + font ===== */ |
| 21 | .everest-forms .evf-style-v2.evf-container { |
| 22 | position: relative; |
| 23 | isolation: isolate; |
| 24 | box-sizing: border-box; |
| 25 | max-width: var( --evf-wrap-width ); |
| 26 | margin: var( --evf-wrap-margin ); |
| 27 | padding: var( --evf-wrap-pad ); |
| 28 | font-family: var( --evf-font ); |
| 29 | background: var( --evf-wrap-bg ); |
| 30 | border-style: var( --evf-wrap-border-style, solid ); |
| 31 | border-width: var( --evf-wrap-bw ); |
| 32 | border-color: var( --evf-wrap-border-c ); |
| 33 | border-radius: var( --evf-wrap-radius ); |
| 34 | } |
| 35 | |
| 36 | /* ===== FORM — background image layer (own layer so opacity fades the image, not the content) ===== */ |
| 37 | .everest-forms .evf-style-v2.evf-container::before { |
| 38 | content: ""; |
| 39 | position: absolute; |
| 40 | inset: 0; |
| 41 | z-index: -1; |
| 42 | pointer-events: none; |
| 43 | border-radius: inherit; |
| 44 | background-image: var( --evf-wrap-image, none ); |
| 45 | background-size: var( --evf-wrap-bg-size, cover ); |
| 46 | background-position: var( --evf-wrap-bg-position, center ); |
| 47 | background-repeat: var( --evf-wrap-bg-repeat, no-repeat ); |
| 48 | background-attachment: var( --evf-wrap-bg-attachment, scroll ); |
| 49 | opacity: var( --evf-wrap-bg-opacity, 1 ); |
| 50 | } |
| 51 | |
| 52 | /* ===== TEXT — label ===== */ |
| 53 | /* The required-field <abbr> and any tooltip icon render as SIBLINGS of .evf-label inside the |
| 54 | same <label> (class-evf-shortcode-form.php: `<label>…<span class="evf-label">Text</span> |
| 55 | <abbr class="required">*</abbr>…</label>`). Font-style props (weight/style/decoration/ |
| 56 | transform) must stay scoped to the .evf-label span — same split legacy scss.php uses — or an |
| 57 | underline/bold/etc. set on the whole <label> paints across the required mark and tooltip too |
| 58 | (EVF-2671). Colour/size/spacing are fine on the outer <label> since nothing else there needs |
| 59 | to look different from the label text. */ |
| 60 | .everest-forms .evf-style-v2 label.evf-field-label { |
| 61 | color: var( --evf-label-color ); |
| 62 | font-size: var( --evf-label-size ); |
| 63 | line-height: var( --evf-label-lh ); |
| 64 | text-align: var( --evf-label-align ); |
| 65 | margin: var( --evf-label-margin ); |
| 66 | padding: var( --evf-label-pad ); |
| 67 | } |
| 68 | .everest-forms .evf-style-v2 label.evf-field-label .evf-label { |
| 69 | font-weight: var( --evf-label-weight ); |
| 70 | font-style: var( --evf-label-fs ); |
| 71 | text-decoration: var( --evf-label-td ); |
| 72 | text-transform: var( --evf-label-tt ); |
| 73 | letter-spacing: var( --evf-label-ls ); |
| 74 | } |
| 75 | |
| 76 | /* Sublabel */ |
| 77 | .everest-forms .evf-style-v2 label.everest-forms-field-sublabel { |
| 78 | color: var( --evf-sub-color ); |
| 79 | font-size: var( --evf-sub-size ); |
| 80 | line-height: var( --evf-sub-lh ); |
| 81 | text-align: var( --evf-sub-align ); |
| 82 | margin: var( --evf-sub-margin ); |
| 83 | padding: var( --evf-sub-pad ); |
| 84 | font-weight: var( --evf-sub-weight ); |
| 85 | font-style: var( --evf-sub-fs ); |
| 86 | text-decoration: var( --evf-sub-td ); |
| 87 | text-transform: var( --evf-sub-tt ); |
| 88 | letter-spacing: var( --evf-sub-ls ); |
| 89 | } |
| 90 | |
| 91 | /* Description */ |
| 92 | .everest-forms .evf-style-v2 .evf-field-description { |
| 93 | color: var( --evf-desc-color ); |
| 94 | font-size: var( --evf-desc-size ); |
| 95 | line-height: var( --evf-desc-lh ); |
| 96 | text-align: var( --evf-desc-align ); |
| 97 | margin: var( --evf-desc-margin ); |
| 98 | padding: var( --evf-desc-pad ); |
| 99 | font-weight: var( --evf-desc-weight ); |
| 100 | font-style: var( --evf-desc-fs ); |
| 101 | text-decoration: var( --evf-desc-td ); |
| 102 | text-transform: var( --evf-desc-tt ); |
| 103 | letter-spacing: var( --evf-desc-ls ); |
| 104 | } |
| 105 | |
| 106 | /* Section title */ |
| 107 | .everest-forms .evf-style-v2 .evf-field-title h3 { |
| 108 | color: var( --evf-title-color ); |
| 109 | font-size: var( --evf-title-size ); |
| 110 | line-height: var( --evf-title-lh ); |
| 111 | text-align: var( --evf-title-align ); |
| 112 | margin: var( --evf-title-margin ); |
| 113 | padding: var( --evf-title-pad ); |
| 114 | font-weight: var( --evf-title-weight ); |
| 115 | font-style: var( --evf-title-fs ); |
| 116 | text-decoration: var( --evf-title-td ); |
| 117 | text-transform: var( --evf-title-tt ); |
| 118 | letter-spacing: var( --evf-title-ls ); |
| 119 | } |
| 120 | |
| 121 | /* Gradient text (label/sublabel/description/title) — `background-clip: text` paints the |
| 122 | element's own `background` (solid or gradient, either works identically) through its glyphs |
| 123 | instead of through the box. Gated on @supports so a browser without it silently keeps the |
| 124 | plain `color:` declaration above instead of going invisible. Known trade-off: if a |
| 125 | text-decoration (underline etc.) is ALSO set on one of these tokens, its line uses `color` |
| 126 | too, so it visually disappears once `color` is forced transparent here — narrow enough |
| 127 | (underline + gradient text at once) that it isn't worth a dedicated decoration-colour token. */ |
| 128 | @supports (background-clip: text) or (-webkit-background-clip: text) { |
| 129 | .everest-forms .evf-style-v2 label.evf-field-label { |
| 130 | background: var( --evf-label-color ); |
| 131 | -webkit-background-clip: text; |
| 132 | background-clip: text; |
| 133 | -webkit-text-fill-color: transparent; |
| 134 | color: transparent; |
| 135 | } |
| 136 | .everest-forms .evf-style-v2 label.everest-forms-field-sublabel { |
| 137 | background: var( --evf-sub-color ); |
| 138 | -webkit-background-clip: text; |
| 139 | background-clip: text; |
| 140 | -webkit-text-fill-color: transparent; |
| 141 | color: transparent; |
| 142 | } |
| 143 | .everest-forms .evf-style-v2 .evf-field-description { |
| 144 | background: var( --evf-desc-color ); |
| 145 | -webkit-background-clip: text; |
| 146 | background-clip: text; |
| 147 | -webkit-text-fill-color: transparent; |
| 148 | color: transparent; |
| 149 | } |
| 150 | .everest-forms .evf-style-v2 .evf-field-title h3 { |
| 151 | background: var( --evf-title-color ); |
| 152 | -webkit-background-clip: text; |
| 153 | background-clip: text; |
| 154 | -webkit-text-fill-color: transparent; |
| 155 | color: transparent; |
| 156 | } |
| 157 | } |
| 158 | |
| 159 | /* ===== INPUTS — text boxes, dropdowns, textareas ===== */ |
| 160 | .everest-forms .evf-style-v2 input[type='text'], |
| 161 | .everest-forms .evf-style-v2 input[type='email'], |
| 162 | .everest-forms .evf-style-v2 input[type='number'], |
| 163 | .everest-forms .evf-style-v2 input[type='password'], |
| 164 | .everest-forms .evf-style-v2 input[type='datetime'], |
| 165 | .everest-forms .evf-style-v2 input[type='datetime-local'], |
| 166 | .everest-forms .evf-style-v2 input[type='date'], |
| 167 | .everest-forms .evf-style-v2 input[type='time'], |
| 168 | .everest-forms .evf-style-v2 input[type='week'], |
| 169 | .everest-forms .evf-style-v2 input[type='url'], |
| 170 | .everest-forms .evf-style-v2 input[type='tel'], |
| 171 | .everest-forms .evf-style-v2 input[type='file'], |
| 172 | .everest-forms .evf-style-v2 textarea, |
| 173 | .everest-forms .evf-style-v2 select, |
| 174 | .everest-forms .evf-style-v2 canvas.evf-signature-canvas { |
| 175 | color: var( --evf-input-color ); |
| 176 | font-size: var( --evf-input-size ); |
| 177 | text-align: var( --evf-input-align ); |
| 178 | background: var( --evf-input-bg ); |
| 179 | border-style: var( --evf-input-border-style, solid ); |
| 180 | border-width: var( --evf-input-bw ); |
| 181 | border-color: var( --evf-input-border-c ); |
| 182 | border-radius: var( --evf-input-radius ); |
| 183 | margin: var( --evf-field-margin ); |
| 184 | padding: var( --evf-input-pad ); |
| 185 | font-weight: var( --evf-input-weight ); |
| 186 | font-style: var( --evf-input-fs ); |
| 187 | text-decoration: var( --evf-input-td, none ); |
| 188 | text-transform: var( --evf-input-tt ); |
| 189 | letter-spacing: var( --evf-input-ls ); |
| 190 | } |
| 191 | |
| 192 | .everest-forms .evf-style-v2 input::placeholder, |
| 193 | .everest-forms .evf-style-v2 textarea::placeholder { |
| 194 | color: var( --evf-input-ph ); |
| 195 | } |
| 196 | |
| 197 | .everest-forms .evf-style-v2 input:focus, |
| 198 | .everest-forms .evf-style-v2 textarea:focus, |
| 199 | .everest-forms .evf-style-v2 select:focus { |
| 200 | border-color: var( --evf-input-focus-border ); |
| 201 | } |
| 202 | |
| 203 | /* Payment/price readouts follow the input text style */ |
| 204 | .everest-forms .evf-style-v2 .evf-payment-total, |
| 205 | .everest-forms .evf-style-v2 .evf-single-item-price { |
| 206 | color: var( --evf-input-color ); |
| 207 | font-size: var( --evf-input-size ); |
| 208 | text-align: var( --evf-input-align ); |
| 209 | } |
| 210 | |
| 211 | /* ===== INPUTS — upload area ===== */ |
| 212 | .everest-forms .evf-style-v2 .everest-forms-uploader { |
| 213 | background: var( --evf-file-bg ); |
| 214 | border-style: var( --evf-file-border-style, dashed ); |
| 215 | border-width: var( --evf-file-bw ); |
| 216 | border-color: var( --evf-file-border ); |
| 217 | border-radius: var( --evf-file-radius ); |
| 218 | margin: var( --evf-file-margin ); |
| 219 | padding: var( --evf-file-pad ); |
| 220 | } |
| 221 | |
| 222 | .everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-title, |
| 223 | .everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-hint, |
| 224 | .everest-forms .evf-style-v2 .everest-forms-uploader .dz-details, |
| 225 | .everest-forms .evf-style-v2 .everest-forms-uploader .dz-error-message { |
| 226 | font-size: var( --evf-file-size ); |
| 227 | } |
| 228 | |
| 229 | .everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-title, |
| 230 | .everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-hint, |
| 231 | .everest-forms .evf-style-v2 .everest-forms-uploader .dz-details span { |
| 232 | color: var( --evf-file-color ); |
| 233 | } |
| 234 | @supports (background-clip: text) or (-webkit-background-clip: text) { |
| 235 | .everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-title, |
| 236 | .everest-forms .evf-style-v2 .everest-forms-uploader .everest-forms-upload-hint, |
| 237 | .everest-forms .evf-style-v2 .everest-forms-uploader .dz-details span { |
| 238 | background: var( --evf-file-color ); |
| 239 | -webkit-background-clip: text; |
| 240 | background-clip: text; |
| 241 | -webkit-text-fill-color: transparent; |
| 242 | color: transparent; |
| 243 | } |
| 244 | } |
| 245 | |
| 246 | .everest-forms .evf-style-v2 .everest-forms-uploader .dz-message > svg { |
| 247 | background: var( --evf-file-iconbg ); |
| 248 | fill: var( --evf-file-icon ); |
| 249 | } |
| 250 | |
| 251 | /* ===== INPUTS — character limit hint ===== */ |
| 252 | .everest-forms .evf-style-v2 .everest-forms-field-limit-text { |
| 253 | color: var( --evf-limit-color ); |
| 254 | } |
| 255 | |
| 256 | /* ===== CHOICES — radio, checkbox, and everything that follows them ===== */ |
| 257 | .everest-forms .evf-style-v2 .evf-field-radio ul li, |
| 258 | .everest-forms .evf-style-v2 .evf-field-checkbox ul li, |
| 259 | .everest-forms .evf-style-v2 .evf-field-payment-multiple ul li, |
| 260 | .everest-forms .evf-style-v2 .evf-field-payment-checkbox ul li, |
| 261 | .everest-forms .evf-style-v2 .evf-field-privacy-policy, |
| 262 | .everest-forms .evf-style-v2 .evf-field-payment-subscription-plan ul li { |
| 263 | text-align: var( --evf-choice-align ); |
| 264 | margin: var( --evf-choice-margin ); |
| 265 | } |
| 266 | |
| 267 | .everest-forms .evf-style-v2 .evf-field-radio ul li input[type='radio'], |
| 268 | .everest-forms .evf-style-v2 .evf-field-radio ul li input[type='checkbox'], |
| 269 | .everest-forms .evf-style-v2 .evf-field-checkbox ul li input[type='radio'], |
| 270 | .everest-forms .evf-style-v2 .evf-field-checkbox ul li input[type='checkbox'], |
| 271 | .everest-forms .evf-style-v2 .evf-field-payment-multiple ul li input[type='radio'], |
| 272 | .everest-forms .evf-style-v2 .evf-field-payment-checkbox ul li input[type='checkbox'], |
| 273 | .everest-forms .evf-style-v2 .evf-field-privacy-policy input[type='checkbox'], |
| 274 | .everest-forms .evf-style-v2 .evf-field-payment-subscription-plan ul li input[type='radio'] { |
| 275 | width: var( --evf-choice-size ); |
| 276 | height: var( --evf-choice-size ); |
| 277 | } |
| 278 | |
| 279 | /* ===== CHOICES — outline/filled custom appearance (EVF-2675) ===== |
| 280 | Legacy (scss.php) only ever overrode the native radio/checkbox's appearance — and so only |
| 281 | ever showed a "Selected color"/"Unselected border" effect — for these two style variations; |
| 282 | `default` renders the plain OS/browser-native control, which ignores border-color/ |
| 283 | background-color entirely unless it opts out of native rendering via appearance:none. Ported |
| 284 | 1:1 from legacy's outline/filled branches, including the flex-centred ::before dot/checkmark |
| 285 | (no absolute positioning needed — the input is the flex container via display:inline-flex, so |
| 286 | ::before is simply a centred flex child sized as a fraction of it). `.evf-choice-{variation}` |
| 287 | is added to the wrapper by FrontendEnqueue::container_class() (real frontend) and |
| 288 | PreviewBridge's applyToken() (live preview) from the choice.variation token, which has no CSS |
| 289 | var of its own (a "meta" token — see Compiler::declarations()). */ |
| 290 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio'], |
| 291 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-checkbox ul li input[type='checkbox'], |
| 292 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio'], |
| 293 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-checkbox ul li input[type='checkbox'], |
| 294 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-privacy-policy input[type='checkbox'], |
| 295 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio'], |
| 296 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio'], |
| 297 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-checkbox ul li input[type='checkbox'], |
| 298 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio'], |
| 299 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-checkbox ul li input[type='checkbox'], |
| 300 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-privacy-policy input[type='checkbox'], |
| 301 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio'] { |
| 302 | -webkit-appearance: none; |
| 303 | appearance: none; |
| 304 | display: inline-flex; |
| 305 | align-items: center; |
| 306 | justify-content: center; |
| 307 | } |
| 308 | |
| 309 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio'], |
| 310 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio'], |
| 311 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio'], |
| 312 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio'], |
| 313 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio'], |
| 314 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio'] { |
| 315 | border-radius: 50%; |
| 316 | } |
| 317 | |
| 318 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio'], |
| 319 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-checkbox ul li input[type='checkbox'], |
| 320 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio'], |
| 321 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-checkbox ul li input[type='checkbox'], |
| 322 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-privacy-policy input[type='checkbox'], |
| 323 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio'] { |
| 324 | border: 1px solid var( --evf-choice-border ); |
| 325 | } |
| 326 | |
| 327 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio'], |
| 328 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-checkbox ul li input[type='checkbox'], |
| 329 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio'], |
| 330 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-checkbox ul li input[type='checkbox'], |
| 331 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-privacy-policy input[type='checkbox'], |
| 332 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio'] { |
| 333 | background-color: var( --evf-choice-border ); |
| 334 | } |
| 335 | |
| 336 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio']:checked, |
| 337 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-checkbox ul li input[type='checkbox']:checked, |
| 338 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio']:checked, |
| 339 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-checkbox ul li input[type='checkbox']:checked, |
| 340 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-privacy-policy input[type='checkbox']:checked, |
| 341 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio']:checked { |
| 342 | border-color: var( --evf-choice-checked ); |
| 343 | } |
| 344 | |
| 345 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio']:checked, |
| 346 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-checkbox ul li input[type='checkbox']:checked, |
| 347 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio']:checked, |
| 348 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-checkbox ul li input[type='checkbox']:checked, |
| 349 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-privacy-policy input[type='checkbox']:checked, |
| 350 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio']:checked { |
| 351 | background-color: var( --evf-choice-checked ); |
| 352 | } |
| 353 | |
| 354 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio']:checked::before, |
| 355 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-checkbox ul li input[type='checkbox']:checked::before, |
| 356 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio']:checked::before, |
| 357 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-checkbox ul li input[type='checkbox']:checked::before, |
| 358 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-privacy-policy input[type='checkbox']:checked::before, |
| 359 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio']:checked::before, |
| 360 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio']:checked::before, |
| 361 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-checkbox ul li input[type='checkbox']:checked::before, |
| 362 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio']:checked::before, |
| 363 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-checkbox ul li input[type='checkbox']:checked::before, |
| 364 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-privacy-policy input[type='checkbox']:checked::before, |
| 365 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio']:checked::before { |
| 366 | content: ''; |
| 367 | height: 50%; |
| 368 | } |
| 369 | |
| 370 | /* radio dot */ |
| 371 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-radio ul li input[type='radio']:checked::before, |
| 372 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-multiple ul li input[type='radio']:checked::before, |
| 373 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-subscription-plan ul li input[type='radio']:checked::before { |
| 374 | width: 50%; |
| 375 | border-radius: 50%; |
| 376 | background: var( --evf-choice-checked ); |
| 377 | } |
| 378 | |
| 379 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-radio ul li input[type='radio']:checked::before, |
| 380 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-multiple ul li input[type='radio']:checked::before, |
| 381 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-subscription-plan ul li input[type='radio']:checked::before { |
| 382 | width: 50%; |
| 383 | border-radius: 50%; |
| 384 | background: #fff; |
| 385 | } |
| 386 | |
| 387 | /* checkbox tick */ |
| 388 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-checkbox ul li input[type='checkbox']:checked::before, |
| 389 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-payment-checkbox ul li input[type='checkbox']:checked::before, |
| 390 | .everest-forms .evf-style-v2.evf-choice-outline .evf-field-privacy-policy input[type='checkbox']:checked::before { |
| 391 | width: 25%; |
| 392 | border: solid var( --evf-choice-checked ); |
| 393 | border-width: 0 2px 2px 0; |
| 394 | transform: rotate(45deg); |
| 395 | margin-top: -12%; |
| 396 | } |
| 397 | |
| 398 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-checkbox ul li input[type='checkbox']:checked::before, |
| 399 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-payment-checkbox ul li input[type='checkbox']:checked::before, |
| 400 | .everest-forms .evf-style-v2.evf-choice-filled .evf-field-privacy-policy input[type='checkbox']:checked::before { |
| 401 | width: 25%; |
| 402 | border: solid #fff; |
| 403 | border-width: 0 2px 2px 0; |
| 404 | transform: rotate(45deg); |
| 405 | margin-top: -12%; |
| 406 | } |
| 407 | |
| 408 | /* GDPR/Privacy-Policy checkbox — v1 (scss.php) styled this identically to any other checkbox; |
| 409 | v2 originally only wired up alignment/margin (above), silently dropping size, the outline/ |
| 410 | filled appearance, checked-state, and this label typography. Restored 1:1 to v1 parity. */ |
| 411 | .everest-forms .evf-style-v2 .evf-field-radio ul li input + label, |
| 412 | .everest-forms .evf-style-v2 .evf-field-checkbox ul li input + label, |
| 413 | .everest-forms .evf-style-v2 .evf-field-payment-multiple ul li input + label, |
| 414 | .everest-forms .evf-style-v2 .evf-field-payment-checkbox ul li input + label, |
| 415 | .everest-forms .evf-style-v2 .evf-field-privacy-policy input + label, |
| 416 | .everest-forms .evf-style-v2 .evf-field-payment-subscription-plan ul li input + label { |
| 417 | font-size: var( --evf-choice-fsize ); |
| 418 | color: var( --evf-choice-color ); |
| 419 | font-weight: var( --evf-choice-weight ); |
| 420 | font-style: var( --evf-choice-fs ); |
| 421 | text-decoration: var( --evf-choice-td ); |
| 422 | text-transform: var( --evf-choice-tt ); |
| 423 | letter-spacing: var( --evf-choice-ls ); |
| 424 | } |
| 425 | @supports (background-clip: text) or (-webkit-background-clip: text) { |
| 426 | .everest-forms .evf-style-v2 .evf-field-radio ul li input + label, |
| 427 | .everest-forms .evf-style-v2 .evf-field-checkbox ul li input + label, |
| 428 | .everest-forms .evf-style-v2 .evf-field-payment-multiple ul li input + label, |
| 429 | .everest-forms .evf-style-v2 .evf-field-payment-checkbox ul li input + label, |
| 430 | .everest-forms .evf-style-v2 .evf-field-privacy-policy input + label, |
| 431 | .everest-forms .evf-style-v2 .evf-field-payment-subscription-plan ul li input + label { |
| 432 | background: var( --evf-choice-color ); |
| 433 | -webkit-background-clip: text; |
| 434 | background-clip: text; |
| 435 | -webkit-text-fill-color: transparent; |
| 436 | color: transparent; |
| 437 | } |
| 438 | } |
| 439 | |
| 440 | /* The Subscription Plan addon's own stylesheet (evf-payment-subscription-plan-frontend.scss) |
| 441 | hardcodes font-size on these two inner classes, which otherwise silently overrides the |
| 442 | choice.fsize token the label above already inherits — override it back explicitly here. */ |
| 443 | .everest-forms .evf-style-v2 .evf-field-payment-subscription-plan .evf-plan-name, |
| 444 | .everest-forms .evf-style-v2 .evf-field-payment-subscription-plan .evf-plan-price { |
| 445 | font-size: var( --evf-choice-fsize ); |
| 446 | } |
| 447 | |
| 448 | /* The name/price row (.evf-plan-main) is a flex row hardcoded to `justify-content: space-between` |
| 449 | in the same addon stylesheet — `--evf-choice-align`'s inherited `text-align` can never reach it |
| 450 | (text-align doesn't reposition flex items). `left` (the default) keeps today's name-left/ |
| 451 | price-right look untouched; `center`/`right` bring the pair together as a unit instead — see |
| 452 | FrontendEnqueue::container_class()/PreviewBridge's `evf-choice-align-{center|right}` classes. */ |
| 453 | .everest-forms .evf-style-v2.evf-choice-align-center .evf-field-payment-subscription-plan .evf-plan-main { |
| 454 | justify-content: center; |
| 455 | } |
| 456 | .everest-forms .evf-style-v2.evf-choice-align-right .evf-field-payment-subscription-plan .evf-plan-main { |
| 457 | justify-content: flex-end; |
| 458 | } |
| 459 | |
| 460 | /* ===== BUTTON — submit / multi-part nav / upload button ===== */ |
| 461 | .everest-forms .evf-style-v2 .evf-submit-container input[type='submit'], |
| 462 | .everest-forms .evf-style-v2 .evf-submit-container button[type='submit'], |
| 463 | .everest-forms .evf-style-v2 .evf-submit-container .everest-forms-part-button, |
| 464 | .everest-forms .evf-style-v2 .everest-forms-multi-part-actions input[type='submit'], |
| 465 | .everest-forms .evf-style-v2 .everest-forms-multi-part-actions button[type='submit'], |
| 466 | .everest-forms .evf-style-v2 .everest-forms-multi-part-actions .everest-forms-part-button { |
| 467 | color: var( --evf-btn-color ); |
| 468 | font-size: var( --evf-btn-size ); |
| 469 | line-height: var( --evf-btn-lh ); |
| 470 | background: var( --evf-btn-bg ); |
| 471 | border-style: var( --evf-btn-border-style, solid ); |
| 472 | border-width: var( --evf-btn-bw ); |
| 473 | border-color: var( --evf-btn-border-c ); |
| 474 | border-radius: var( --evf-btn-radius ); |
| 475 | margin: var( --evf-btn-margin ); |
| 476 | padding: var( --evf-btn-pad ); |
| 477 | font-weight: var( --evf-btn-weight ); |
| 478 | font-style: var( --evf-btn-fs ); |
| 479 | text-decoration: var( --evf-btn-td, none ); |
| 480 | text-transform: var( --evf-btn-tt ); |
| 481 | letter-spacing: var( --evf-btn-ls ); |
| 482 | } |
| 483 | |
| 484 | .everest-forms .evf-style-v2 .evf-submit-container input[type='submit']:hover, |
| 485 | .everest-forms .evf-style-v2 .evf-submit-container input[type='submit']:active, |
| 486 | .everest-forms .evf-style-v2 .evf-submit-container button[type='submit']:hover, |
| 487 | .everest-forms .evf-style-v2 .evf-submit-container button[type='submit']:active, |
| 488 | .everest-forms .evf-style-v2 .evf-submit-container .everest-forms-part-button:hover, |
| 489 | .everest-forms .evf-style-v2 .evf-submit-container .everest-forms-part-button:active, |
| 490 | .everest-forms .evf-style-v2 .everest-forms-multi-part-actions input[type='submit']:hover, |
| 491 | .everest-forms .evf-style-v2 .everest-forms-multi-part-actions button[type='submit']:hover, |
| 492 | .everest-forms .evf-style-v2 .everest-forms-multi-part-actions .everest-forms-part-button:hover { |
| 493 | color: var( --evf-btn-color-hover ); |
| 494 | background: var( --evf-btn-bg-hover ); |
| 495 | border-color: var( --evf-btn-border-c-hover ); |
| 496 | } |
| 497 | |
| 498 | .everest-forms .evf-style-v2 .evf-submit-container:not( .everest-forms-multi-part-actions ) { |
| 499 | text-align: var( --evf-btn-align ); |
| 500 | } |
| 501 | |
| 502 | .everest-forms .evf-style-v2.evf-btn-width-fill .evf-submit-container input[type='submit'], |
| 503 | .everest-forms .evf-style-v2.evf-btn-width-fill .evf-submit-container button[type='submit'], |
| 504 | .everest-forms .evf-style-v2.evf-btn-width-fill .evf-submit-container .everest-forms-part-button, |
| 505 | .everest-forms .evf-style-v2.evf-btn-width-fill .everest-forms-multi-part-actions input[type='submit'], |
| 506 | .everest-forms .evf-style-v2.evf-btn-width-fill .everest-forms-multi-part-actions button[type='submit'], |
| 507 | .everest-forms .evf-style-v2.evf-btn-width-fill .everest-forms-multi-part-actions .everest-forms-part-button { |
| 508 | display: block; |
| 509 | width: 100%; |
| 510 | } |
| 511 | |
| 512 | .everest-forms .evf-style-v2 .everest-forms-multi-part-actions .everest-forms-part-button.everest-forms-part-prev, |
| 513 | .everest-forms .evf-style-v2 .everest-forms-multi-part-actions .everest-forms-part-button.everest-forms-part-next { |
| 514 | margin-right: 10px; |
| 515 | } |
| 516 | |
| 517 | /* |
| 518 | * ===== MESSAGES — success / error / validation ===== |
| 519 | * The message tokens are Pro-only (defined in the Pro plugin), so on a free site their |
| 520 | * `--evf-msg-*` variables are never emitted. Each declaration therefore carries a FALLBACK equal |
| 521 | * to the token's default, so the submission banners always render correctly (free) and are |
| 522 | * overridden by the emitted variables when Pro is active. |
| 523 | */ |
| 524 | .everest-forms .evf-style-v2 .everest-forms-notice--success, |
| 525 | .everest-forms.everest-forms-notice--success.evf-style-v2 { |
| 526 | background-color: var( --evf-msg-success-bg, #5cb85c ); |
| 527 | color: var( --evf-msg-success-color, #ffffff ); |
| 528 | font-size: var( --evf-msg-success-size, 14px ); |
| 529 | text-align: var( --evf-msg-success-align, left ); |
| 530 | border-style: var( --evf-msg-success-border-style, none ); |
| 531 | border-width: var( --evf-msg-success-bw, 0 ); |
| 532 | border-color: var( --evf-msg-success-border-c, #cccccc ); |
| 533 | border-radius: var( --evf-msg-success-radius, 5px ); |
| 534 | font-weight: var( --evf-msg-success-weight, 400 ); |
| 535 | font-style: var( --evf-msg-success-fs, normal ); |
| 536 | text-decoration: var( --evf-msg-success-td, none ); |
| 537 | text-transform: var( --evf-msg-success-tt, none ); |
| 538 | } |
| 539 | |
| 540 | .everest-forms .evf-style-v2 .everest-forms-notice--error { |
| 541 | background-color: var( --evf-msg-error-bg, #d9534f ); |
| 542 | color: var( --evf-msg-error-color, #ffffff ); |
| 543 | font-size: var( --evf-msg-error-size, 14px ); |
| 544 | text-align: var( --evf-msg-error-align, left ); |
| 545 | border-style: var( --evf-msg-error-border-style, none ); |
| 546 | border-width: var( --evf-msg-error-bw, 0 ); |
| 547 | border-color: var( --evf-msg-error-border-c, #cccccc ); |
| 548 | border-radius: var( --evf-msg-error-radius, 5px ); |
| 549 | font-weight: var( --evf-msg-error-weight, 400 ); |
| 550 | font-style: var( --evf-msg-error-fs, normal ); |
| 551 | text-decoration: var( --evf-msg-error-td, none ); |
| 552 | text-transform: var( --evf-msg-error-tt, none ); |
| 553 | } |
| 554 | |
| 555 | .everest-forms .evf-style-v2 .evf-error { |
| 556 | background-color: var( --evf-msg-validation-bg, #ffffff ); |
| 557 | color: var( --evf-msg-validation-color, #fa5252 ); |
| 558 | font-size: var( --evf-msg-validation-size, 14px ); |
| 559 | text-align: var( --evf-msg-validation-align, left ); |
| 560 | border-style: var( --evf-msg-validation-border-style, none ); |
| 561 | border-width: var( --evf-msg-validation-bw, 0 ); |
| 562 | border-color: var( --evf-msg-validation-border-c, #cccccc ); |
| 563 | border-radius: var( --evf-msg-validation-radius, 5px ); |
| 564 | font-weight: var( --evf-msg-validation-weight, 400 ); |
| 565 | font-style: var( --evf-msg-validation-fs, normal ); |
| 566 | text-decoration: var( --evf-msg-validation-td, none ); |
| 567 | text-transform: var( --evf-msg-validation-tt, none ); |
| 568 | } |
| 569 |