| @@ -3,8 +3,14 @@ | ||
| 3 | 3 | top: 100%; |
| 4 | 4 | margin: 0; |
| 5 | 5 | } |
| 6 | 6 | |
| 7 | +/* Form Builder does not enqueue general.css, so icon-only submit | |
| 8 | + must hide this span itself. */ | |
| 9 | +.king-addons-hidden-element { | |
| 10 | + display: none !important; | |
| 11 | +} | |
| 12 | + | |
| 7 | 13 | .king-addons-field-group .king-addons-submit-error { |
| 8 | 14 | position: absolute; |
| 9 | 15 | top: 100%; |
| 10 | 16 | } |
| @@ -218,17 +224,25 @@ | ||
| 218 | 224 | font-size: 13px; |
| 219 | 225 | flex-basis: 100%; |
| 220 | 226 | margin: 0 0 5px 0; |
| 221 | 227 | padding: 5px 0; |
| 222 | - list-style-type: none; | |
| 223 | 228 | color: red; |
| 224 | 229 | } |
| 225 | 230 | |
| 226 | -.king-addons-file-type-error li { | |
| 227 | - display: inline; | |
| 231 | +.king-addons-file-type-error-list { | |
| 232 | + font-size: 13px; | |
| 233 | + flex-basis: 100%; | |
| 234 | + margin: 0 0 8px 0; | |
| 235 | + padding: 0 0 8px 1.2em; | |
| 236 | + list-style-type: disc; | |
| 228 | 237 | color: #000; |
| 229 | 238 | } |
| 230 | 239 | |
| 240 | +.king-addons-file-type-error-list li { | |
| 241 | + display: list-item; | |
| 242 | + color: #000; | |
| 243 | +} | |
| 244 | + | |
| 231 | 245 | .king-addons-form-field-type-hidden { |
| 232 | 246 | display: none; |
| 233 | 247 | } |
| 234 | 248 | |
| @@ -352,8 +366,12 @@ | ||
| 352 | 366 | .king-addons-form-field-type-recaptcha-v3 { |
| 353 | 367 | display: none; |
| 354 | 368 | } |
| 355 | 369 | |
| 370 | +.king-addons-form-field-type-recaptcha-v3:has(.king-addons-form-captcha-notice) { | |
| 371 | + display: block; | |
| 372 | +} | |
| 373 | + | |
| 356 | 374 | .king-addons-step-buttons-wrap { |
| 357 | 375 | display: flex; |
| 358 | 376 | justify-content: space-between; |
| 359 | 377 | width: 100%; |
| @@ -413,5 +431,147 @@ | ||
| 413 | 431 | } |
| 414 | 432 | 0% { |
| 415 | 433 | opacity: 1; |
| 416 | 434 | } |
| 417 | -} | |
| 435 | +} | |
| 436 | +/* --- Range slider ------------------------------------------------------- */ | |
| 437 | +.king-addons-form-range { | |
| 438 | + display: flex; | |
| 439 | + align-items: center; | |
| 440 | + gap: 12px; | |
| 441 | + width: 100%; | |
| 442 | +} | |
| 443 | + | |
| 444 | +.king-addons-form-range input[type="range"] { | |
| 445 | + flex: 1 1 auto; | |
| 446 | + min-width: 0; | |
| 447 | + margin: 0; | |
| 448 | +} | |
| 449 | + | |
| 450 | +.king-addons-form-range__value { | |
| 451 | + min-width: 3ch; | |
| 452 | + text-align: right; | |
| 453 | + font-variant-numeric: tabular-nums; | |
| 454 | +} | |
| 455 | + | |
| 456 | +/* --- Rating ------------------------------------------------------------- */ | |
| 457 | +.king-addons-form-rating { | |
| 458 | + display: flex; | |
| 459 | + gap: 4px; | |
| 460 | + align-items: center; | |
| 461 | + /* The field group is a flex row, so without this the icons sit next to the | |
| 462 | + label instead of under it, unlike every other field. */ | |
| 463 | + width: 100%; | |
| 464 | +} | |
| 465 | + | |
| 466 | +.king-addons-form-rating__item { | |
| 467 | + background: none; | |
| 468 | + border: 0; | |
| 469 | + padding: 0 2px; | |
| 470 | + margin: 0; | |
| 471 | + cursor: pointer; | |
| 472 | + font-size: 24px; | |
| 473 | + line-height: 1; | |
| 474 | + color: #c9c9c9; | |
| 475 | + transition: color .15s ease; | |
| 476 | +} | |
| 477 | + | |
| 478 | +.king-addons-form-rating__item.is-on { | |
| 479 | + color: #f5a623; | |
| 480 | +} | |
| 481 | + | |
| 482 | +.king-addons-form-rating__item:focus-visible { | |
| 483 | + outline: 2px solid currentColor; | |
| 484 | + outline-offset: 2px; | |
| 485 | +} | |
| 486 | + | |
| 487 | +/* --- Signature ---------------------------------------------------------- */ | |
| 488 | +.king-addons-form-signature { | |
| 489 | + width: 100%; | |
| 490 | +} | |
| 491 | + | |
| 492 | +.king-addons-form-signature__pad { | |
| 493 | + display: block; | |
| 494 | + width: 100%; | |
| 495 | + border: 1px solid #d5d8dc; | |
| 496 | + border-radius: 3px; | |
| 497 | + background: #fff; | |
| 498 | + touch-action: none; | |
| 499 | + cursor: crosshair; | |
| 500 | + color: #1f2124; | |
| 501 | +} | |
| 502 | + | |
| 503 | +.king-addons-form-signature__clear { | |
| 504 | + margin-top: 6px; | |
| 505 | + padding: 4px 12px; | |
| 506 | + font: inherit; | |
| 507 | + font-size: 13px; | |
| 508 | + background: transparent; | |
| 509 | + border: 1px solid currentColor; | |
| 510 | + border-radius: 3px; | |
| 511 | + cursor: pointer; | |
| 512 | +} | |
| 513 | + | |
| 514 | +/* --- Acceptance --------------------------------------------------------- */ | |
| 515 | +.king-addons-form-acceptance { | |
| 516 | + display: flex; | |
| 517 | + align-items: flex-start; | |
| 518 | + gap: 8px; | |
| 519 | + width: 100%; | |
| 520 | +} | |
| 521 | + | |
| 522 | +.king-addons-form-acceptance input[type="checkbox"] { | |
| 523 | + margin-top: .25em; | |
| 524 | + flex: 0 0 auto; | |
| 525 | +} | |
| 526 | + | |
| 527 | +.king-addons-form-acceptance__text { | |
| 528 | + margin: 0; | |
| 529 | + cursor: pointer; | |
| 530 | +} | |
| 531 | + | |
| 532 | +.king-addons-form-acceptance__text p:last-child { | |
| 533 | + margin-bottom: 0; | |
| 534 | +} | |
| 535 | + | |
| 536 | +/* --- Conditional logic -------------------------------------------------- */ | |
| 537 | +.king-addons-field-group.king-addons-cond-hidden { | |
| 538 | + display: none !important; | |
| 539 | +} | |
| 540 | + | |
| 541 | +/* --- Calculation -------------------------------------------------------- */ | |
| 542 | +.king-addons-form-calculation { | |
| 543 | + width: 100%; | |
| 544 | +} | |
| 545 | + | |
| 546 | +.king-addons-form-calculation input[readonly] { | |
| 547 | + background: #f3f4f5; | |
| 548 | + cursor: default; | |
| 549 | +} | |
| 550 | + | |
| 551 | +/* --- Spam protection ---------------------------------------------------- */ | |
| 552 | +/* Hidden from people and assistive tech, but a normal input to a bot. */ | |
| 553 | +.king-addons-form-honeypot { | |
| 554 | + position: absolute !important; | |
| 555 | + left: -9999px !important; | |
| 556 | + width: 1px; | |
| 557 | + height: 1px; | |
| 558 | + overflow: hidden; | |
| 559 | +} | |
| 560 | + | |
| 561 | +.king-addons-form-captcha { | |
| 562 | + margin-bottom: 16px; | |
| 563 | +} | |
| 564 | + | |
| 565 | +.king-addons-form-captcha-notice { | |
| 566 | + margin: 0 0 16px; | |
| 567 | + padding: 8px 12px; | |
| 568 | + border-left: 3px solid #d63638; | |
| 569 | + background: #fcf0f1; | |
| 570 | + color: #8a2424; | |
| 571 | + font-size: 13px; | |
| 572 | +} | |
| 573 | + | |
| 574 | +.king-addons-submit-warning { | |
| 575 | + margin: 8px 0 0; | |
| 576 | + color: #8a2424; | |
| 577 | +} | |
