From add3cb6d01f3992b51e51eb8ea3abe74bceda5cc Mon Sep 17 00:00:00 2001 From: Jens Kuerschner Date: Tue, 14 Nov 2023 20:58:20 +0100 Subject: [PATCH] rsvp --- assets/css/atcb-3d.css | 427 +++++++++++++++++- assets/css/atcb-3d.min.css | 2 +- assets/css/atcb-date.css | 432 +++++++++++++++++- assets/css/atcb-date.min.css | 2 +- assets/css/atcb-flat.css | 427 +++++++++++++++++- assets/css/atcb-flat.min.css | 2 +- assets/css/atcb-neumorphism.css | 439 +++++++++++++++++- assets/css/atcb-neumorphism.min.css | 2 +- assets/css/atcb-round.css | 433 +++++++++++++++++- assets/css/atcb-round.min.css | 2 +- assets/css/atcb-text.css | 427 +++++++++++++++++- assets/css/atcb-text.min.css | 2 +- assets/css/atcb.css | 327 ++++++++++---- assets/css/atcb.min.css | 2 +- demo/public/atcb.css | 328 ++++++++++---- src/atcb-decorate.js | 4 + src/atcb-generate-pro.js | 193 +++++--- src/atcb-generate.js | 33 +- src/atcb-i18n.js | 667 +++++++++++++++++++++++++++- test.html | 19 +- 20 files changed, 3812 insertions(+), 358 deletions(-) diff --git a/assets/css/atcb-3d.css b/assets/css/atcb-3d.css index fc94fc25..032ed633 100644 --- a/assets/css/atcb-3d.css +++ b/assets/css/atcb-3d.css @@ -24,7 +24,7 @@ --base-font-size-m: 16px; --base-font-size-s: 16px; --font: arial, helvetica, sans-serif; - --keyboard-focus: #1e90ff; + --accent-color: #1e90ff; --wrapper-padding: 0px; --btn-background: #f5f5f5; --btn-hover-background: #fff; @@ -62,7 +62,11 @@ --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 70%)); --modal-btn-shadow: rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px; --modal-btn-hover-shadow: rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px; - --modal-input-border-radius: 6px; + --input-border-radius: 6px; + --input-background: #fff; + --status-active-text: #fff; + --form-error: #c5372c; + --form-success: #338a36; --date-btn-text: #1d1d1e; --date-btn-text-secondary: #3a3a3f; --date-btn-cal-day-text: #fff; @@ -115,6 +119,10 @@ --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 90%)); --modal-btn-shadow: rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px; --modal-btn-hover-shadow: none; + --input-background: #434246; + --status-active-text: #000; + --form-error: #db8680; + --form-success: #99de9c; --date-btn-text: #ebebf0; --date-btn-text-secondary: #b5b5bd; --date-btn-cal-day-text: #101010; @@ -216,7 +224,7 @@ } .atcb-button:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-button:not([disabled]):focus, @@ -418,7 +426,7 @@ .atcb-list-item:focus-visible { background-color: var(--list-hover-background); - color: var(--keyboard-focus); + color: var(--accent-color); font-weight: 600; outline: none; } @@ -642,18 +650,29 @@ a.atcb-modal-btn.atcb-modal-btn-border { border: 1px solid var(--modal-btn-border); } -button.atcb-modal-btn:hover, -a.atcb-modal-btn:hover { +button.atcb-modal-btn:focus-visible, +a.atcb-modal-btn:focus-visible{ background-color: var(--modal-btn-hover-background); - box-shadow: var(--modal-btn-hover-shadow); - color: var(--modal-btn-hover-text); - text-decoration: none; + outline: 2px solid var(--accent-color); } -button.atcb-modal-btn:focus-visible, -a.atcb-modal-btn:focus-visible{ +button.atcb-button:disabled, +button.atcb-subevent-btn:disabled, +button.atcb-modal-btn:disabled, +a.atcb-modal-btn:disabled { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); + border-style: dashed; + box-shadow: none; +} + +button.atcb-modal-btn:not([disabled]):hover, +a.atcb-modal-btn:not([disabled]):hover { background-color: var(--modal-btn-hover-background); - outline: 2px solid var(--keyboard-focus); + box-shadow: var(--modal-btn-hover-shadow); + color: var(--modal-btn-hover-text); + text-decoration: none; } /****************************** @@ -690,7 +709,7 @@ a.atcb-modal-btn:focus-visible{ } .atcb-subevent-btn:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-subevent-btn + .atcb-subevent-btn { @@ -920,8 +939,8 @@ a.atcb-modal-btn:focus-visible{ * Icon specifics */ -.atcb-icon.atcb-icon-ms365, .atcb-icon.outlookcom { - padding-bottom: .5em; +.atcb-icon.atcb-icon-ms365, .atcb-icon-outlookcom { + padding-bottom: .05em; } .atcb-icon.atcb-icon-apple, .atcb-icon.atcb-icon-ical { @@ -958,3 +977,381 @@ a.atcb-modal-btn:focus-visible{ .atcb-icon.atcb-icon-outlookcom svg { filter: var(--icon-filter); } + +/****************************** + * PRO Features + */ + + .rsvp-inline-wrapper { + filter: none; + min-width: 100%; +} + +.rsvp-inline-wrapper .atcb-modal-headline, +.rsvp-inline-wrapper .atcb-modal-content { + background-color: transparent; + border-radius: 0; + box-sizing: border-box; + width: 100%; +} + +.pro { + text-align: center; +} + +.pro ol, +.pro ul { + margin: auto; + text-align: left; + width: fit-content; +} + +.pro a, +.pro a:visited, +.pro a:active { + color: var(--modal-btn-text); + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: var(--accent-color); +} + +.pro a:hover { + color: var(--accent-color); + text-decoration: none; +} + +.pro .pro-share-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.pro #rsvp-atcb { + display: flex; + flex-wrap: wrap; + gap: .4em; +} + +.pro-form { + border-top: 1px solid var(--modal-btn-border); + margin-top: 1.5em; + padding-top: 1.5em; + text-align: left; +} + +.pro-field + .pro-field { + padding-top: 1.3em; +} + +.pro-field-type-label + .pro-field-type-radio { + padding-top: 0; +} + +.pro-field-type-checkbox, +.pro-field-type-radio div { + align-items: center; + display: flex; +} + +.pro-field-type-checkbox input, +.pro-field-type-radio input { + cursor: pointer; +} + +.pro-field label { + display: block; + font-size: .9em; + opacity: .7; +} + +.pro-field-type-checkbox label, +.pro-field-type-radio label { + cursor: pointer; + opacity: .8; + padding-left: .3em; +} + +.pro-field input[type="text"], +.pro-field input[type="email"], +.pro-field input[type="number"] { + background-color: var(--input-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--input-border-radius); + box-sizing: border-box; + caret-color: var(--accent-color); + color: var(--modal-text); + font-size: .9em; + opacity: .8; + padding: .7em; + transition: all .1s ease-in-out; + width: 100%; +} + +.pro-field input[type="checkbox"], +.pro-field input[type="radio"] { + accent-color: var(--accent-color); + height: 1.2rem; + opacity: .8; + transition: all .1s ease-in-out; + width: 1.2em; +} + +.pro-field input:disabled, +.pro-field input:disabled + label { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); +} + +.pro-field input:not([disabled]):hover { + opacity: 1; +} + +.pro-field input[type="text"]:focus, +.pro-field input[type="email"]:focus, +.pro-field input[type="number"]:focus { + border-color: var(--accent-color); + outline: 1px solid var(--accent-color); +} + +.pro-field input[type="checkbox"]:focus, +.pro-field input[type="radio"]:focus { + outline-color: var(--accent-color); + outline-width: 2px; +} + +#submit-error { + color: var(--form-error); + display: none; + font-weight: bold; + padding-top: 1.5em; + text-align: center; +} + +.pro-form.form-error #submit-error { + display: block; +} + +.pro-field input.error { + accent-color: var(--form-error); + border: 2px solid var(--form-error); +} + +.pro-field input.error + label, +.pro-field:has(input.error) label { + color: var(--form-error); + opacity: 1; +} + +#rsvp-status-group { + border-bottom: 1px solid var(--modal-btn-border); + font-weight: bold; + margin-bottom: 1.5em; + padding-bottom: 2em; + text-align: center; +} + +#rsvp-status-group .pro-field { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.2em; + justify-content: center; + margin-top: 1em; +} + +@media (width <= 575px) { + #rsvp-status-group .pro-field { + flex-direction: column; + } + + #rsvp-status-group .pro-field div { + width: 80%; + } +} + +#rsvp-status-group .pro-field div { + min-width: 28%; + position: relative; +} + +#rsvp-status-group input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; +} + +#rsvp-status-group label { + align-items: center; + border: 1px solid var(--modal-btn-text); + border-radius: var(--input-border-radius); + color: var(--modal-btn-text); + display: flex; + flex-direction: column; + font-weight: bold; + text-transform: uppercase; + justify-content: center; + opacity: .6; + padding: .8em; + transition: all .1s ease-in-out; + width: 100%; +} + +#rsvp-status-group label.status-confirmed { + border-color: var(--form-success); + color: var(--form-success); +} + +#rsvp-status-group label.status-declined { + border-color: var(--form-error); + color: var(--form-error); +} + +#rsvp-status-group input:checked + label { + background-color: var(--modal-text); + color: var(--status-active-text); + opacity: 1; + transform: scale(1.1); +} + +#rsvp-status-group input:focus-visible + label { + outline: 2px solid var(--accent-color); + outline-offset: 2px; +} + +#rsvp-status-group input:not([disabled]) + label:hover, +#rsvp-status-group input:not([disabled]):hover + label { + opacity: 1; + transform: scale(1.08); +} + +#rsvp-status-group input:checked + label.status-confirmed { + background-color: var(--form-success); +} + +#rsvp-status-group input:checked + label.status-declined { + background-color: var(--form-error); +} + +#ty-success-msg, +#rsvp-success-msg, +#rsvp-success-msg-email, +#rsvp-success-msg-doi, +#rsvp-success-msg-demo { + color: var(--form-success); + display: none; + font-weight: bold; + line-height: 1.6em; + padding: 1.5em 0; + text-align: center; +} + +#pro-form-submit { + display: block; + margin: auto; + min-width: 150px; +} + +.pro-waiting { + background-color: var(--modal-btn-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--btn-border-radius); + box-sizing: border-box; + color: var(--modal-btn-text); + cursor: wait; + display: none; + line-height: .5em; + margin: auto; + min-width: 150px; + padding: .5em 1.25em 1.2em; + text-align: center; + user-select: none; + -webkit-user-select: none; + -webkit-tap-highlight-color: transparent; + width: fit-content; +} + +@media (width > 575px) { + #pro-form-submit, + .pro-waiting { + min-width: 200px; + } +} + +.pro-waiting span:not(.atcb-icon-ical) { + animation-name: blink; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-fill-mode: both; + font-size: 2.5em; +} + +.pro-field label span:not(.atcb-icon-ical) { + color: var(--form-error); + font-weight: bold; + padding-left: 2px; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(2) { + animation-delay: .15s; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(3) { + animation-delay: .3s; +} + +@keyframes blink { + 0% { + opacity: .2; + } + + 20% { + opacity: 1; + } + + 100% { + opacity: .2; + } +} + +.pro #rsvp-sent-content { + align-items: center; + display: flex; + flex-direction: column; + gap: 1.5em; +} + +/* overrides */ +#rsvp-status-group span { + color: inherit; +} + +.atcb-modal-content .pro p { + margin: 0; +} + +.atcb-modal-content .pro p.pro-pt { + margin-top: 1.5em; +} + +.atcb-modal-content .pro .pro-field p { + font-size: .9em; +} + +.pro .btn-flex { + align-items: center; + display: flex; +} + +.pro .atcb-modal-btn svg { + fill: none; + height: 1.5em; + margin-right: .5em; + stroke: currentcolor; + width: auto; +} diff --git a/assets/css/atcb-3d.min.css b/assets/css/atcb-3d.min.css index 9928fac3..336d93c8 100644 --- a/assets/css/atcb-3d.min.css +++ b/assets/css/atcb-3d.min.css @@ -1 +1 @@ -:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--keyboard-focus:#1e90ff;--wrapper-padding:0px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-border:#d2d2d2;--btn-border-radius:6px;--btn-padding-x:1em;--btn-padding-y:.65em;--btn-text:#333;--btn-hover-text:#000;--btn-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 15%) 2px 2px 10px -3px;--btn-hover-shadow:rgba(0 0 0 / 35%) 2px 5px 18px -1px,rgba(0 0 0 / 30%) 2px 2px 10px -3px;--btn-active-shadow:rgba(0 0 0 / 50%) 2px 10px 20px -2px,rgba(0 0 0 / 45%) 2px 4px 12px -3px;--btn-active-shadow-up:rgba(0 0 0 / 40%) 2px -8px 15px -2px,rgba(0 0 0 / 50%) 2px 4px 12px -3px;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#333;--list-hover-text:#000;--list-close-background:#e5e5e5;--list-close-text:#777;--list-border-radius:6px;--list-padding:.8em;--list-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 2px 2px 10px -3px;--list-modal-shadow:rgba(0 0 0 / 60%) 3px 6px 40px -5px,rgba(0 0 0 / 60%) 3px 3px 15px -4px;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#d2d2d2;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#666567;--modal-border-radius:6px;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px;--modal-btn-hover-shadow:rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px;--modal-input-border-radius:6px;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(0 0 0 / 40%) 1px 3px 15px -4px,rgba(0 0 0 / 20%) 1px 1px 8px -4px;--date-btn-hover-shadow:rgba(0 0 0 / 40%) 4px 6px 18px -1px,rgba(0 0 0 / 35%) 4px 5px 25px -2px;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:rgba(20 20 20 / 25%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#2e2e2e;--btn-hover-background:#373737;--btn-border:#4d4d4d;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--btn-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--btn-hover-shadow:rgba(255 255 255 / 6%) -12px -5px 23px -8px,rgba(255 255 255 / 7%) -7px -5px 18px -3px,rgba(0 0 0 / 60%) 2px 5px 19px -1px,rgba(0 0 0 / 50%) 3px 3px 22px -3px;--btn-active-shadow:rgba(255 255 255 / 7%) -12px -5px 23px -8px,rgba(255 255 255 / 8%) -7px -5px 18px -3px,rgba(0 0 0 / 70%) 2px 10px 20px -1px,rgba(0 0 0 / 60%) 3px 5px 25px -3px;--btn-active-shadow-up:rgba(255 255 255 / 7%) -12px 5px 23px -8px,rgba(255 255 255 / 8%) -7px 5px 18px -3px,rgba(0 0 0 / 60%) 2px -8px 15px -1px,rgba(0 0 0 / 60%) 3px 5px 25px -3px;--list-background:#2e2e2e;--list-hover-background:#373737;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#282828;--list-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--list-modal-shadow:rgba(255 255 255 / 8%) -12px -5px 30px -8px,rgba(255 255 255 / 8%) -7px -5px 15px -3px,rgba(0 0 0 / 60%) 4px 6px 50px -4px,rgba(0 0 0 / 90%) 8px 12px 40px -2px;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px;--modal-btn-hover-shadow:none;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(255 255 255 / 10%) -8px -6px 20px,rgba(0 0 0 / 50%) 1px 3px 25px -8px,rgba(0 0 0 / 50%) 1px 1px 10px -3px;--date-btn-hover-shadow:none;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:rgba(20 20 20 / 60%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{align-items:center;background-color:var(--btn-background);border:1px solid var(--btn-border);border-radius:var(--btn-border-radius);box-shadow:var(--btn-shadow);box-sizing:content-box;color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.5em;margin:0;max-width:300px;padding:var(--btn-padding-y) var(--btn-padding-x);position:relative;text-align:center;touch-action:manipulation;transform:translate3d(0,0,-12px);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;z-index:1}.atcb-button:not(.atcb-no-text,.atcb-modal-style,.atcb-dropoverlay,.atcb-single){min-width:calc(11em - 2 * var(--btn-padding-x))}.atcb-button.atcb-no-text{display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-hover-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){background-color:var(--btn-hover-background);z-index:15000000}.atcb-button.atcb-single:not([disabled]):focus,.atcb-button.atcb-single:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-active-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-no-text:focus,.atcb-button.atcb-no-text:hover{height:3.26em;width:3.26em;padding:0}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropup,.atcb-dropoverlay){box-shadow:var(--btn-active-shadow);transform:perspective(100px) rotateX(12deg) translate3d(0,0,2px);transition:transform .1s linear}.atcb-button.atcb-active.atcb-dropup:not(.atcb-modal-style,.atcb-dropoverlay){box-shadow:var(--btn-active-shadow-up);transform:perspective(100px) rotateX(348deg) translate3d(0,0,2px);transition:transform .1s linear}.atcb-button.atcb-active.atcb-dropoverlay{transform:translate3d(0,0,0);z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:6px;height:1px;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;padding:0 4px;position:absolute;transform:translate3d(0,0,0);z-index:14000090}.atcb-list{background-color:var(--list-background);border-radius:0 0 var(--list-border-radius) var(--list-border-radius);box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-wrapper.atcb-dropdown:not(.atcb-dropup,.atcb-dropoverlay){animation:atcb-list-slide-down .4s ease 50ms 1 normal both;opacity:0}.atcb-list-wrapper.atcb-dropup:not(.atcb-dropoverlay){animation:atcb-list-slide-up .4s ease 50ms 1 normal both;opacity:0}.atcb-list-wrapper.atcb-dropoverlay{transform:translate3d(0,0,2px);z-index:15000000;animation:atcb-list-slide-center .3s ease 0s 1 normal both;opacity:0}@keyframes atcb-list-slide-down{0%{opacity:0;transform:rotateX(70deg);transform-origin:top}100%{opacity:1;transform:rotateX(0);transform-origin:top}}@keyframes atcb-list-slide-up{0%{opacity:0;transform:rotateX(70deg);transform-origin:bottom}100%{opacity:1;transform:rotateX(0);transform-origin:bottom}}@keyframes atcb-list-slide-center{0%{opacity:0;transform:scaleY(1)}1%{opacity:1;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--keyboard-focus);font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 var(--list-border-radius) var(--list-border-radius)}.atcb-dropup .atcb-list-item:last-child{border-radius:0;padding-bottom:calc(var(--list-padding) + .7em)}.atcb-dropoverlay .atcb-list .atcb-list-item:first-child,.atcb-dropup .atcb-list,.atcb-dropup .atcb-list-item:first-child,.atcb-list.atcb-modal .atcb-list-item:first-child{border-radius:var(--list-border-radius) var(--list-border-radius) 0 0}.atcb-dropoverlay .atcb-list .atcb-list-item:only-child,.atcb-list.atcb-modal .atcb-list-item:only-child{border-radius:var(--list-border-radius)}.atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:calc(var(--list-padding) + .7em)}.atcb-dropoverlay .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child,.atcb-dropup .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:var(--list-padding)}.atcb-dropoverlay .atcb-list,.atcb-list.atcb-modal{border-radius:var(--list-border-radius)}.atcb-list.atcb-modal{box-shadow:var(--list-modal-shadow)}.atcb-list-item .atcb-icon{margin-right:.7em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:var(--btn-border-radius);box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn.atcb-modal-btn-border,button.atcb-modal-btn.atcb-modal-btn-border{border:1px solid var(--modal-btn-border)}a.atcb-modal-btn:hover,button.atcb-modal-btn:hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:4px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon.atcb-icon-ms365,.atcb-icon.outlookcom{padding-bottom:.5em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-trigger{padding-bottom:.2em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)} \ No newline at end of file +:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--accent-color:#1e90ff;--wrapper-padding:0px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-border:#d2d2d2;--btn-border-radius:6px;--btn-padding-x:1em;--btn-padding-y:.65em;--btn-text:#333;--btn-hover-text:#000;--btn-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 15%) 2px 2px 10px -3px;--btn-hover-shadow:rgba(0 0 0 / 35%) 2px 5px 18px -1px,rgba(0 0 0 / 30%) 2px 2px 10px -3px;--btn-active-shadow:rgba(0 0 0 / 50%) 2px 10px 20px -2px,rgba(0 0 0 / 45%) 2px 4px 12px -3px;--btn-active-shadow-up:rgba(0 0 0 / 40%) 2px -8px 15px -2px,rgba(0 0 0 / 50%) 2px 4px 12px -3px;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#333;--list-hover-text:#000;--list-close-background:#e5e5e5;--list-close-text:#777;--list-border-radius:6px;--list-padding:.8em;--list-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 2px 2px 10px -3px;--list-modal-shadow:rgba(0 0 0 / 60%) 3px 6px 40px -5px,rgba(0 0 0 / 60%) 3px 3px 15px -4px;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#d2d2d2;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#666567;--modal-border-radius:6px;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px;--modal-btn-hover-shadow:rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px;--input-border-radius:6px;--input-background:#fff;--status-active-text:#fff;--form-error:#c5372c;--form-success:#338a36;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(0 0 0 / 40%) 1px 3px 15px -4px,rgba(0 0 0 / 20%) 1px 1px 8px -4px;--date-btn-hover-shadow:rgba(0 0 0 / 40%) 4px 6px 18px -1px,rgba(0 0 0 / 35%) 4px 5px 25px -2px;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:rgba(20 20 20 / 25%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#2e2e2e;--btn-hover-background:#373737;--btn-border:#4d4d4d;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--btn-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--btn-hover-shadow:rgba(255 255 255 / 6%) -12px -5px 23px -8px,rgba(255 255 255 / 7%) -7px -5px 18px -3px,rgba(0 0 0 / 60%) 2px 5px 19px -1px,rgba(0 0 0 / 50%) 3px 3px 22px -3px;--btn-active-shadow:rgba(255 255 255 / 7%) -12px -5px 23px -8px,rgba(255 255 255 / 8%) -7px -5px 18px -3px,rgba(0 0 0 / 70%) 2px 10px 20px -1px,rgba(0 0 0 / 60%) 3px 5px 25px -3px;--btn-active-shadow-up:rgba(255 255 255 / 7%) -12px 5px 23px -8px,rgba(255 255 255 / 8%) -7px 5px 18px -3px,rgba(0 0 0 / 60%) 2px -8px 15px -1px,rgba(0 0 0 / 60%) 3px 5px 25px -3px;--list-background:#2e2e2e;--list-hover-background:#373737;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#282828;--list-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--list-modal-shadow:rgba(255 255 255 / 8%) -12px -5px 30px -8px,rgba(255 255 255 / 8%) -7px -5px 15px -3px,rgba(0 0 0 / 60%) 4px 6px 50px -4px,rgba(0 0 0 / 90%) 8px 12px 40px -2px;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px;--modal-btn-hover-shadow:none;--input-background:#434246;--status-active-text:#000;--form-error:#db8680;--form-success:#99de9c;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(255 255 255 / 10%) -8px -6px 20px,rgba(0 0 0 / 50%) 1px 3px 25px -8px,rgba(0 0 0 / 50%) 1px 1px 10px -3px;--date-btn-hover-shadow:none;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:rgba(20 20 20 / 60%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{align-items:center;background-color:var(--btn-background);border:1px solid var(--btn-border);border-radius:var(--btn-border-radius);box-shadow:var(--btn-shadow);box-sizing:content-box;color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.5em;margin:0;max-width:300px;padding:var(--btn-padding-y) var(--btn-padding-x);position:relative;text-align:center;touch-action:manipulation;transform:translate3d(0,0,-12px);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;z-index:1}.atcb-button:not(.atcb-no-text,.atcb-modal-style,.atcb-dropoverlay,.atcb-single){min-width:calc(11em - 2 * var(--btn-padding-x))}.atcb-button.atcb-no-text{display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--accent-color)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-hover-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){background-color:var(--btn-hover-background);z-index:15000000}.atcb-button.atcb-single:not([disabled]):focus,.atcb-button.atcb-single:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-active-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-no-text:focus,.atcb-button.atcb-no-text:hover{height:3.26em;width:3.26em;padding:0}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropup,.atcb-dropoverlay){box-shadow:var(--btn-active-shadow);transform:perspective(100px) rotateX(12deg) translate3d(0,0,2px);transition:transform .1s linear}.atcb-button.atcb-active.atcb-dropup:not(.atcb-modal-style,.atcb-dropoverlay){box-shadow:var(--btn-active-shadow-up);transform:perspective(100px) rotateX(348deg) translate3d(0,0,2px);transition:transform .1s linear}.atcb-button.atcb-active.atcb-dropoverlay{transform:translate3d(0,0,0);z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:6px;height:1px;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;padding:0 4px;position:absolute;transform:translate3d(0,0,0);z-index:14000090}.atcb-list{background-color:var(--list-background);border-radius:0 0 var(--list-border-radius) var(--list-border-radius);box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-wrapper.atcb-dropdown:not(.atcb-dropup,.atcb-dropoverlay){animation:atcb-list-slide-down .4s ease 50ms 1 normal both;opacity:0}.atcb-list-wrapper.atcb-dropup:not(.atcb-dropoverlay){animation:atcb-list-slide-up .4s ease 50ms 1 normal both;opacity:0}.atcb-list-wrapper.atcb-dropoverlay{transform:translate3d(0,0,2px);z-index:15000000;animation:atcb-list-slide-center .3s ease 0s 1 normal both;opacity:0}@keyframes atcb-list-slide-down{0%{opacity:0;transform:rotateX(70deg);transform-origin:top}100%{opacity:1;transform:rotateX(0);transform-origin:top}}@keyframes atcb-list-slide-up{0%{opacity:0;transform:rotateX(70deg);transform-origin:bottom}100%{opacity:1;transform:rotateX(0);transform-origin:bottom}}@keyframes atcb-list-slide-center{0%{opacity:0;transform:scaleY(1)}1%{opacity:1;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--accent-color);font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 var(--list-border-radius) var(--list-border-radius)}.atcb-dropup .atcb-list-item:last-child{border-radius:0;padding-bottom:calc(var(--list-padding) + .7em)}.atcb-dropoverlay .atcb-list .atcb-list-item:first-child,.atcb-dropup .atcb-list,.atcb-dropup .atcb-list-item:first-child,.atcb-list.atcb-modal .atcb-list-item:first-child{border-radius:var(--list-border-radius) var(--list-border-radius) 0 0}.atcb-dropoverlay .atcb-list .atcb-list-item:only-child,.atcb-list.atcb-modal .atcb-list-item:only-child{border-radius:var(--list-border-radius)}.atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:calc(var(--list-padding) + .7em)}.atcb-dropoverlay .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child,.atcb-dropup .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:var(--list-padding)}.atcb-dropoverlay .atcb-list,.atcb-list.atcb-modal{border-radius:var(--list-border-radius)}.atcb-list.atcb-modal{box-shadow:var(--list-modal-shadow)}.atcb-list-item .atcb-icon{margin-right:.7em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:var(--btn-border-radius);box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn.atcb-modal-btn-border,button.atcb-modal-btn.atcb-modal-btn-border{border:1px solid var(--modal-btn-border)}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--accent-color)}a.atcb-modal-btn:disabled,button.atcb-button:disabled,button.atcb-modal-btn:disabled,button.atcb-subevent-btn:disabled{cursor:not-allowed;opacity:.75;filter:brightness(95%);border-style:dashed;box-shadow:none}a.atcb-modal-btn:not([disabled]):hover,button.atcb-modal-btn:not([disabled]):hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:4px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--accent-color)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon-outlookcom,.atcb-icon.atcb-icon-ms365{padding-bottom:.05em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-trigger{padding-bottom:.2em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)}.rsvp-inline-wrapper{filter:none;min-width:100%}.rsvp-inline-wrapper .atcb-modal-content,.rsvp-inline-wrapper .atcb-modal-headline{background-color:transparent;border-radius:0;box-sizing:border-box;width:100%}.pro{text-align:center}.pro ol,.pro ul{margin:auto;text-align:left;width:fit-content}.pro a,.pro a:active,.pro a:visited{color:var(--modal-btn-text);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent-color)}.pro a:hover{color:var(--accent-color);text-decoration:none}.pro .pro-share-buttons{display:flex;flex-wrap:wrap;justify-content:center}.pro #rsvp-atcb{display:flex;flex-wrap:wrap;gap:.3em}.pro-form{border-top:1px solid var(--modal-btn-border);margin-top:1.5em;padding-top:1.5em;text-align:left}.pro-field+.pro-field{padding-top:1.3em}.pro-field-type-label+.pro-field-type-radio{padding-top:0}.pro-field-type-checkbox,.pro-field-type-radio div{align-items:center;display:flex}.pro-field-type-checkbox input,.pro-field-type-radio input{cursor:pointer}.pro-field label{display:block;font-size:.9em;opacity:.7}.pro-field-type-checkbox label,.pro-field-type-radio label{cursor:pointer;opacity:.8;padding-left:.3em}.pro-field input[type=email],.pro-field input[type=number],.pro-field input[type=text]{background-color:var(--input-background);border:1px solid var(--modal-btn-border);border-radius:var(--input-border-radius);box-sizing:border-box;caret-color:var(--accent-color);color:var(--modal-text);font-size:.9em;opacity:.8;padding:.7em;transition:all .1s ease-in-out;width:100%}.pro-field input[type=checkbox],.pro-field input[type=radio]{accent-color:var(--accent-color);height:1.2rem;opacity:.8;transition:all .1s ease-in-out;width:1.2em}.pro-field input:disabled,.pro-field input:disabled+label{cursor:not-allowed;opacity:.75;filter:brightness(95%)}.pro-field input:not([disabled]):hover{opacity:1}.pro-field input[type=email]:focus,.pro-field input[type=number]:focus,.pro-field input[type=text]:focus{border-color:var(--accent-color);outline:1px solid var(--accent-color)}.pro-field input[type=checkbox]:focus,.pro-field input[type=radio]:focus{outline-color:var(--accent-color);outline-width:2px}#submit-error{color:var(--form-error);display:none;font-weight:700;padding-top:1.5em;text-align:center}.pro-form.form-error #submit-error{display:block}.pro-field input.error{accent-color:var(--form-error);border:2px solid var(--form-error)}.pro-field input.error+label,.pro-field:has(input.error) label{color:var(--form-error);opacity:1}#rsvp-status-group{border-bottom:1px solid var(--modal-btn-border);font-weight:700;margin-bottom:1.5em;padding-bottom:2em;text-align:center}#rsvp-status-group .pro-field{align-items:center;display:flex;flex-wrap:wrap;gap:1.2em;justify-content:center;margin-top:1em}@media (width <= 575px){#rsvp-status-group .pro-field{flex-direction:column}#rsvp-status-group .pro-field div{width:80%}}#rsvp-status-group .pro-field div{min-width:28%;position:relative}#rsvp-status-group input{opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;cursor:pointer}#rsvp-status-group label{align-items:center;border:1px solid var(--modal-btn-text);border-radius:var(--input-border-radius);color:var(--modal-btn-text);display:flex;flex-direction:column;font-weight:700;text-transform:uppercase;justify-content:center;opacity:.6;padding:.8em;transition:all .1s ease-in-out;width:100%}#rsvp-status-group label.status-confirmed{border-color:var(--form-success);color:var(--form-success)}#rsvp-status-group label.status-declined{border-color:var(--form-error);color:var(--form-error)}#rsvp-status-group input:checked+label{background-color:var(--modal-text);color:var(--status-active-text);opacity:1;transform:scale(1.1)}#rsvp-status-group input:focus-visible+label{outline:2px solid var(--accent-color);outline-offset:2px}#rsvp-status-group input:not([disabled])+label:hover,#rsvp-status-group input:not([disabled]):hover+label{opacity:1;transform:scale(1.08)}#rsvp-status-group input:checked+label.status-confirmed{background-color:var(--form-success)}#rsvp-status-group input:checked+label.status-declined{background-color:var(--form-error)}#rsvp-success-msg,#rsvp-success-msg-demo,#rsvp-success-msg-doi,#rsvp-success-msg-email,#ty-success-msg{color:var(--form-success);display:none;font-weight:700;line-height:1.6em;padding:1.5em 0;text-align:center}#pro-form-submit{display:block;margin:auto;min-width:150px}.pro-waiting{background-color:var(--modal-btn-background);border:1px solid var(--modal-btn-border);border-radius:var(--btn-border-radius);box-sizing:border-box;color:var(--modal-btn-text);cursor:wait;display:none;line-height:.5em;margin:auto;min-width:150px;padding:.5em 1.25em 1.2em;text-align:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:fit-content}@media (width > 575px){#pro-form-submit,.pro-waiting{min-width:200px}}.pro-waiting span:not(.atcb-icon-ical){animation-name:blink;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both;font-size:2.5em}.pro-field label span:not(.atcb-icon-ical){color:var(--form-error);font-weight:700;padding-left:2px}.pro-waiting span:not(.atcb-icon-ical):nth-child(2){animation-delay:.15s}.pro-waiting span:not(.atcb-icon-ical):nth-child(3){animation-delay:.3s}@keyframes blink{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}.pro #rsvp-sent-content{align-items:center;display:flex;flex-direction:column;gap:1.5em}#rsvp-status-group span{color:inherit}.atcb-modal-content .pro p{margin:0}.atcb-modal-content .pro p.pro-pt{margin-top:1.5em}.atcb-modal-content .pro .pro-field p{font-size:.9em}.pro .btn-flex{align-items:center;display:flex}.pro .atcb-modal-btn svg{fill:none;height:1.5em;margin-right:.5em;stroke:currentcolor;width:auto} \ No newline at end of file diff --git a/assets/css/atcb-date.css b/assets/css/atcb-date.css index fdb1132e..a9016180 100644 --- a/assets/css/atcb-date.css +++ b/assets/css/atcb-date.css @@ -24,7 +24,7 @@ --base-font-size-m: 16px; --base-font-size-s: 16px; --font: arial, helvetica, sans-serif; - --keyboard-focus: #1e90ff; + --accent-color: #1e90ff; --wrapper-padding: 0px; --btn-background: #f5f5f5; --btn-hover-background: #fff; @@ -54,7 +54,11 @@ --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 70%)); --modal-btn-shadow: rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px; --modal-btn-hover-shadow: rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px; - --modal-input-border-radius: 3px; + --input-border-radius: 3px; + --input-background: #fff; + --status-active-text: #fff; + --form-error: #c5372c; + --form-success: #338a36; --date-btn-text: #1d1d1e; --date-btn-text-secondary: #3a3a3f; --date-btn-cal-day-text: #fff; @@ -104,6 +108,10 @@ --modal-btn-secondary-text: #b8b8b8; --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 90%)); --modal-btn-shadow: rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px; + --input-background: #434246; + --status-active-text: #000; + --form-error: #db8680; + --form-success: #99de9c; --date-btn-text: #ebebf0; --date-btn-text-secondary: #b5b5bd; --date-btn-cal-day-text: #101010; @@ -208,7 +216,7 @@ .atcb-button:focus-visible, .atcb-subevent-btn:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-button.atcb-active.atcb-dropoverlay { @@ -379,8 +387,15 @@ margin-left: .8em; } +.atcb-no-text .atcb-icon { + margin-right: 0; + margin-left: 0; +} + .atcb-icon svg { fill: currentcolor; + height: 100%; + width: 100%; } .atcb-text { @@ -450,7 +465,7 @@ .atcb-list-item:focus-visible { background-color: var(--list-hover-background); - color: var(--keyboard-focus); + color: var(--accent-color); font-weight: 600; outline: none; } @@ -673,18 +688,29 @@ a.atcb-modal-btn.atcb-modal-btn-border { border: 1px solid var(--modal-btn-border); } -button.atcb-modal-btn:hover, -a.atcb-modal-btn:hover { +button.atcb-modal-btn:focus-visible, +a.atcb-modal-btn:focus-visible{ background-color: var(--modal-btn-hover-background); - box-shadow: var(--modal-btn-hover-shadow); - color: var(--modal-btn-hover-text); - text-decoration: none; + outline: 2px solid var(--accent-color); } -button.atcb-modal-btn:focus-visible, -a.atcb-modal-btn:focus-visible{ +button.atcb-button:disabled, +button.atcb-subevent-btn:disabled, +button.atcb-modal-btn:disabled, +a.atcb-modal-btn:disabled { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); + border-style: dashed; + box-shadow: none; +} + +button.atcb-modal-btn:not([disabled]):hover, +a.atcb-modal-btn:not([disabled]):hover { background-color: var(--modal-btn-hover-background); - outline: 2px solid var(--keyboard-focus); + box-shadow: var(--modal-btn-hover-shadow); + color: var(--modal-btn-hover-text); + text-decoration: none; } /****************************** @@ -772,8 +798,8 @@ a.atcb-modal-btn:focus-visible{ * Icon specifics */ -.atcb-icon.atcb-icon-ms365, .atcb-icon.outlookcom { - padding-bottom: .5em; +.atcb-icon.atcb-icon-ms365, .atcb-icon-outlookcom { + padding-bottom: .05em; } .atcb-icon.atcb-icon-apple, .atcb-icon.atcb-icon-ical { @@ -801,3 +827,381 @@ a.atcb-modal-btn:focus-visible{ .atcb-icon.atcb-icon-outlookcom svg { filter: var(--icon-filter); } + +/****************************** + * PRO Features + */ + + .rsvp-inline-wrapper { + filter: none; + min-width: 100%; +} + +.rsvp-inline-wrapper .atcb-modal-headline, +.rsvp-inline-wrapper .atcb-modal-content { + background-color: transparent; + border-radius: 0; + box-sizing: border-box; + width: 100%; +} + +.pro { + text-align: center; +} + +.pro ol, +.pro ul { + margin: auto; + text-align: left; + width: fit-content; +} + +.pro a, +.pro a:visited, +.pro a:active { + color: var(--modal-btn-text); + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: var(--accent-color); +} + +.pro a:hover { + color: var(--accent-color); + text-decoration: none; +} + +.pro .pro-share-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.pro #rsvp-atcb { + display: flex; + flex-wrap: wrap; + gap: .4em; +} + +.pro-form { + border-top: 1px solid var(--modal-btn-border); + margin-top: 1.5em; + padding-top: 1.5em; + text-align: left; +} + +.pro-field + .pro-field { + padding-top: 1.3em; +} + +.pro-field-type-label + .pro-field-type-radio { + padding-top: 0; +} + +.pro-field-type-checkbox, +.pro-field-type-radio div { + align-items: center; + display: flex; +} + +.pro-field-type-checkbox input, +.pro-field-type-radio input { + cursor: pointer; +} + +.pro-field label { + display: block; + font-size: .9em; + opacity: .7; +} + +.pro-field-type-checkbox label, +.pro-field-type-radio label { + cursor: pointer; + opacity: .8; + padding-left: .3em; +} + +.pro-field input[type="text"], +.pro-field input[type="email"], +.pro-field input[type="number"] { + background-color: var(--input-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--input-border-radius); + box-sizing: border-box; + caret-color: var(--accent-color); + color: var(--modal-text); + font-size: .9em; + opacity: .8; + padding: .7em; + transition: all .1s ease-in-out; + width: 100%; +} + +.pro-field input[type="checkbox"], +.pro-field input[type="radio"] { + accent-color: var(--accent-color); + height: 1.2rem; + opacity: .8; + transition: all .1s ease-in-out; + width: 1.2em; +} + +.pro-field input:disabled, +.pro-field input:disabled + label { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); +} + +.pro-field input:not([disabled]):hover { + opacity: 1; +} + +.pro-field input[type="text"]:focus, +.pro-field input[type="email"]:focus, +.pro-field input[type="number"]:focus { + border-color: var(--accent-color); + outline: 1px solid var(--accent-color); +} + +.pro-field input[type="checkbox"]:focus, +.pro-field input[type="radio"]:focus { + outline-color: var(--accent-color); + outline-width: 2px; +} + +#submit-error { + color: var(--form-error); + display: none; + font-weight: bold; + padding-top: 1.5em; + text-align: center; +} + +.pro-form.form-error #submit-error { + display: block; +} + +.pro-field input.error { + accent-color: var(--form-error); + border: 2px solid var(--form-error); +} + +.pro-field input.error + label, +.pro-field:has(input.error) label { + color: var(--form-error); + opacity: 1; +} + +#rsvp-status-group { + border-bottom: 1px solid var(--modal-btn-border); + font-weight: bold; + margin-bottom: 1.5em; + padding-bottom: 2em; + text-align: center; +} + +#rsvp-status-group .pro-field { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.2em; + justify-content: center; + margin-top: 1em; +} + +@media (width <= 575px) { + #rsvp-status-group .pro-field { + flex-direction: column; + } + + #rsvp-status-group .pro-field div { + width: 80%; + } +} + +#rsvp-status-group .pro-field div { + min-width: 28%; + position: relative; +} + +#rsvp-status-group input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; +} + +#rsvp-status-group label { + align-items: center; + border: 1px solid var(--modal-btn-text); + border-radius: var(--input-border-radius); + color: var(--modal-btn-text); + display: flex; + flex-direction: column; + font-weight: bold; + text-transform: uppercase; + justify-content: center; + opacity: .6; + padding: .8em; + transition: all .1s ease-in-out; + width: 100%; +} + +#rsvp-status-group label.status-confirmed { + border-color: var(--form-success); + color: var(--form-success); +} + +#rsvp-status-group label.status-declined { + border-color: var(--form-error); + color: var(--form-error); +} + +#rsvp-status-group input:checked + label { + background-color: var(--modal-text); + color: var(--status-active-text); + opacity: 1; + transform: scale(1.1); +} + +#rsvp-status-group input:focus-visible + label { + outline: 2px solid var(--accent-color); + outline-offset: 2px; +} + +#rsvp-status-group input:not([disabled]) + label:hover, +#rsvp-status-group input:not([disabled]):hover + label { + opacity: 1; + transform: scale(1.08); +} + +#rsvp-status-group input:checked + label.status-confirmed { + background-color: var(--form-success); +} + +#rsvp-status-group input:checked + label.status-declined { + background-color: var(--form-error); +} + +#ty-success-msg, +#rsvp-success-msg, +#rsvp-success-msg-email, +#rsvp-success-msg-doi, +#rsvp-success-msg-demo { + color: var(--form-success); + display: none; + font-weight: bold; + line-height: 1.6em; + padding: 1.5em 0; + text-align: center; +} + +#pro-form-submit { + display: block; + margin: auto; + min-width: 150px; +} + +.pro-waiting { + background-color: var(--modal-btn-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--btn-border-radius); + box-sizing: border-box; + color: var(--modal-btn-text); + cursor: wait; + display: none; + line-height: .5em; + margin: auto; + min-width: 150px; + padding: .5em 1.25em 1.2em; + text-align: center; + user-select: none; + -webkit-user-select: none; + -webkit-tap-highlight-color: transparent; + width: fit-content; +} + +@media (width > 575px) { + #pro-form-submit, + .pro-waiting { + min-width: 200px; + } +} + +.pro-waiting span:not(.atcb-icon-ical) { + animation-name: blink; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-fill-mode: both; + font-size: 2.5em; +} + +.pro-field label span:not(.atcb-icon-ical) { + color: var(--form-error); + font-weight: bold; + padding-left: 2px; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(2) { + animation-delay: .15s; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(3) { + animation-delay: .3s; +} + +@keyframes blink { + 0% { + opacity: .2; + } + + 20% { + opacity: 1; + } + + 100% { + opacity: .2; + } +} + +.pro #rsvp-sent-content { + align-items: center; + display: flex; + flex-direction: column; + gap: 1.5em; +} + +/* overrides */ +#rsvp-status-group span { + color: inherit; +} + +.atcb-modal-content .pro p { + margin: 0; +} + +.atcb-modal-content .pro p.pro-pt { + margin-top: 1.5em; +} + +.atcb-modal-content .pro .pro-field p { + font-size: .9em; +} + +.pro .btn-flex { + align-items: center; + display: flex; +} + +.pro .atcb-modal-btn svg { + fill: none; + height: 1.5em; + margin-right: .5em; + stroke: currentcolor; + width: auto; +} diff --git a/assets/css/atcb-date.min.css b/assets/css/atcb-date.min.css index 330ed234..ecb6b5db 100644 --- a/assets/css/atcb-date.min.css +++ b/assets/css/atcb-date.min.css @@ -1 +1 @@ -:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--keyboard-focus:#1e90ff;--wrapper-padding:0px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-border:#d2d2d2;--btn-text:#333;--btn-hover-text:#000;--btn-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 15%) 2px 2px 10px -3px;--btn-hover-shadow:rgba(0 0 0 / 30%) 2px 5px 18px -1px,rgba(0 0 0 / 25%) 2px 2px 10px -3px;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#333;--list-hover-text:#000;--list-close-background:#e5e5e5;--list-close-text:#777;--list-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 2px 2px 10px -3px;--list-modal-shadow:rgba(0 0 0 / 60%) 3px 6px 40px -5px,rgba(0 0 0 / 60%) 3px 3px 15px -4px;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#d2d2d2;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#666567;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px;--modal-btn-hover-shadow:rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px;--modal-input-border-radius:3px;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(0 0 0 / 40%) 1px 3px 15px -4px,rgba(0 0 0 / 20%) 1px 1px 8px -4px;--date-btn-hover-shadow:rgba(0 0 0 / 40%) 4px 6px 18px -1px,rgba(0 0 0 / 35%) 4px 5px 25px -2px;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:rgba(20 20 20 / 25%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#2e2e2e;--btn-hover-background:#474747;--btn-border:#4d4d4d;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--btn-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--btn-hover-shadow:rgba(255 255 255 / 6%) -12px -5px 23px -8px,rgba(255 255 255 / 7%) -7px -5px 18px -3px,rgba(0 0 0 / 60%) 2px 5px 19px -1px,rgba(0 0 0 / 50%) 3px 3px 22px -3px;--list-background:#2e2e2e;--list-hover-background:#474747;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#282828;--list-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--list-modal-shadow:rgba(255 255 255 / 8%) -12px -5px 30px -8px,rgba(255 255 255 / 8%) -7px -5px 15px -3px,rgba(0 0 0 / 60%) 4px 6px 50px -4px,rgba(0 0 0 / 90%) 8px 12px 40px -2px;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(255 255 255 / 10%) -8px -6px 20px,rgba(0 0 0 / 50%) 1px 3px 25px -8px,rgba(0 0 0 / 50%) 1px 1px 10px -3px;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:rgba(20 20 20 / 60%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button,.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:6px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-button{box-shadow:var(--btn-shadow);min-width:17.5em;max-width:16em;position:relative;z-index:1}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:hover,.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-button:focus,.atcb-button:hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-hover-shadow)}.atcb-button:focus-visible,.atcb-subevent-btn:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-button:hover .atcb-date-btn-left,.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-button:hover .atcb-date-btn-details,.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-button:hover .atcb-date-btn-hover,.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:.8em}.atcb-icon svg{fill:currentcolor}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:4px;height:1px;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;padding:0 4px;position:absolute;z-index:14000090}.atcb-list-wrapper.atcb-dropoverlay{z-index:15000000}.atcb-list{border-radius:0 0 6px 6px;box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:.8em;text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--keyboard-focus);font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 6px 6px}.atcb-dropup .atcb-list-item:last-child{border-radius:0;padding-bottom:1.25em}.atcb-dropoverlay .atcb-list .atcb-list-item:first-child,.atcb-dropup .atcb-list-item:first-child,.atcb-list.atcb-modal .atcb-list-item:first-child{border-radius:6px 6px 0 0}.atcb-dropoverlay .atcb-list .atcb-list-item:only-child,.atcb-list.atcb-modal .atcb-list-item:only-child{border-radius:6px}.atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:1.25em}.atcb-dropoverlay .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child,.atcb-dropup .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:.8em}.atcb-dropoverlay .atcb-list,.atcb-list.atcb-modal{border-radius:6px}.atcb-list.atcb-modal{box-shadow:var(--list-modal-shadow)}.atcb-list-item .atcb-icon{margin-right:.7em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:6px 6px 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:6px 6px 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 6px 6px;box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:6px;box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn.atcb-modal-btn-border,button.atcb-modal-btn.atcb-modal-btn-border{border:1px solid var(--modal-btn-border)}a.atcb-modal-btn:hover,button.atcb-modal-btn:hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--keyboard-focus)}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon.atcb-icon-ms365,.atcb-icon.outlookcom{padding-bottom:.5em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)} \ No newline at end of file +:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--accent-color:#1e90ff;--wrapper-padding:0px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-border:#d2d2d2;--btn-text:#333;--btn-hover-text:#000;--btn-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 15%) 2px 2px 10px -3px;--btn-hover-shadow:rgba(0 0 0 / 30%) 2px 5px 18px -1px,rgba(0 0 0 / 25%) 2px 2px 10px -3px;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#333;--list-hover-text:#000;--list-close-background:#e5e5e5;--list-close-text:#777;--list-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 2px 2px 10px -3px;--list-modal-shadow:rgba(0 0 0 / 60%) 3px 6px 40px -5px,rgba(0 0 0 / 60%) 3px 3px 15px -4px;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#d2d2d2;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#666567;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px;--modal-btn-hover-shadow:rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px;--input-border-radius:3px;--input-background:#fff;--status-active-text:#fff;--form-error:#c5372c;--form-success:#338a36;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(0 0 0 / 40%) 1px 3px 15px -4px,rgba(0 0 0 / 20%) 1px 1px 8px -4px;--date-btn-hover-shadow:rgba(0 0 0 / 40%) 4px 6px 18px -1px,rgba(0 0 0 / 35%) 4px 5px 25px -2px;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:rgba(20 20 20 / 25%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#2e2e2e;--btn-hover-background:#474747;--btn-border:#4d4d4d;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--btn-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--btn-hover-shadow:rgba(255 255 255 / 6%) -12px -5px 23px -8px,rgba(255 255 255 / 7%) -7px -5px 18px -3px,rgba(0 0 0 / 60%) 2px 5px 19px -1px,rgba(0 0 0 / 50%) 3px 3px 22px -3px;--list-background:#2e2e2e;--list-hover-background:#474747;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#282828;--list-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--list-modal-shadow:rgba(255 255 255 / 8%) -12px -5px 30px -8px,rgba(255 255 255 / 8%) -7px -5px 15px -3px,rgba(0 0 0 / 60%) 4px 6px 50px -4px,rgba(0 0 0 / 90%) 8px 12px 40px -2px;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px;--input-background:#434246;--status-active-text:#000;--form-error:#db8680;--form-success:#99de9c;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(255 255 255 / 10%) -8px -6px 20px,rgba(0 0 0 / 50%) 1px 3px 25px -8px,rgba(0 0 0 / 50%) 1px 1px 10px -3px;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:rgba(20 20 20 / 60%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button,.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:6px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-button{box-shadow:var(--btn-shadow);min-width:17.5em;max-width:16em;position:relative;z-index:1}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:hover,.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-button:focus,.atcb-button:hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-hover-shadow)}.atcb-button:focus-visible,.atcb-subevent-btn:focus-visible{outline:2px solid var(--accent-color)}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-button:hover .atcb-date-btn-left,.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-button:hover .atcb-date-btn-details,.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-button:hover .atcb-date-btn-hover,.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:4px;height:1px;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;padding:0 4px;position:absolute;z-index:14000090}.atcb-list-wrapper.atcb-dropoverlay{z-index:15000000}.atcb-list{border-radius:0 0 6px 6px;box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:.8em;text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--accent-color);font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 6px 6px}.atcb-dropup .atcb-list-item:last-child{border-radius:0;padding-bottom:1.25em}.atcb-dropoverlay .atcb-list .atcb-list-item:first-child,.atcb-dropup .atcb-list-item:first-child,.atcb-list.atcb-modal .atcb-list-item:first-child{border-radius:6px 6px 0 0}.atcb-dropoverlay .atcb-list .atcb-list-item:only-child,.atcb-list.atcb-modal .atcb-list-item:only-child{border-radius:6px}.atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:1.25em}.atcb-dropoverlay .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child,.atcb-dropup .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:.8em}.atcb-dropoverlay .atcb-list,.atcb-list.atcb-modal{border-radius:6px}.atcb-list.atcb-modal{box-shadow:var(--list-modal-shadow)}.atcb-list-item .atcb-icon{margin-right:.7em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:6px 6px 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:6px 6px 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 6px 6px;box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:6px;box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn.atcb-modal-btn-border,button.atcb-modal-btn.atcb-modal-btn-border{border:1px solid var(--modal-btn-border)}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--accent-color)}a.atcb-modal-btn:disabled,button.atcb-button:disabled,button.atcb-modal-btn:disabled,button.atcb-subevent-btn:disabled{cursor:not-allowed;opacity:.75;filter:brightness(95%);border-style:dashed;box-shadow:none}a.atcb-modal-btn:not([disabled]):hover,button.atcb-modal-btn:not([disabled]):hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon-outlookcom,.atcb-icon.atcb-icon-ms365{padding-bottom:.05em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)}.rsvp-inline-wrapper{filter:none;min-width:100%}.rsvp-inline-wrapper .atcb-modal-content,.rsvp-inline-wrapper .atcb-modal-headline{background-color:transparent;border-radius:0;box-sizing:border-box;width:100%}.pro{text-align:center}.pro ol,.pro ul{margin:auto;text-align:left;width:fit-content}.pro a,.pro a:active,.pro a:visited{color:var(--modal-btn-text);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent-color)}.pro a:hover{color:var(--accent-color);text-decoration:none}.pro .pro-share-buttons{display:flex;flex-wrap:wrap;justify-content:center}.pro #rsvp-atcb{display:flex;flex-wrap:wrap;gap:.3em}.pro-form{border-top:1px solid var(--modal-btn-border);margin-top:1.5em;padding-top:1.5em;text-align:left}.pro-field+.pro-field{padding-top:1.3em}.pro-field-type-label+.pro-field-type-radio{padding-top:0}.pro-field-type-checkbox,.pro-field-type-radio div{align-items:center;display:flex}.pro-field-type-checkbox input,.pro-field-type-radio input{cursor:pointer}.pro-field label{display:block;font-size:.9em;opacity:.7}.pro-field-type-checkbox label,.pro-field-type-radio label{cursor:pointer;opacity:.8;padding-left:.3em}.pro-field input[type=email],.pro-field input[type=number],.pro-field input[type=text]{background-color:var(--input-background);border:1px solid var(--modal-btn-border);border-radius:var(--input-border-radius);box-sizing:border-box;caret-color:var(--accent-color);color:var(--modal-text);font-size:.9em;opacity:.8;padding:.7em;transition:all .1s ease-in-out;width:100%}.pro-field input[type=checkbox],.pro-field input[type=radio]{accent-color:var(--accent-color);height:1.2rem;opacity:.8;transition:all .1s ease-in-out;width:1.2em}.pro-field input:disabled,.pro-field input:disabled+label{cursor:not-allowed;opacity:.75;filter:brightness(95%)}.pro-field input:not([disabled]):hover{opacity:1}.pro-field input[type=email]:focus,.pro-field input[type=number]:focus,.pro-field input[type=text]:focus{border-color:var(--accent-color);outline:1px solid var(--accent-color)}.pro-field input[type=checkbox]:focus,.pro-field input[type=radio]:focus{outline-color:var(--accent-color);outline-width:2px}#submit-error{color:var(--form-error);display:none;font-weight:700;padding-top:1.5em;text-align:center}.pro-form.form-error #submit-error{display:block}.pro-field input.error{accent-color:var(--form-error);border:2px solid var(--form-error)}.pro-field input.error+label,.pro-field:has(input.error) label{color:var(--form-error);opacity:1}#rsvp-status-group{border-bottom:1px solid var(--modal-btn-border);font-weight:700;margin-bottom:1.5em;padding-bottom:2em;text-align:center}#rsvp-status-group .pro-field{align-items:center;display:flex;flex-wrap:wrap;gap:1.2em;justify-content:center;margin-top:1em}@media (width <= 575px){#rsvp-status-group .pro-field{flex-direction:column}#rsvp-status-group .pro-field div{width:80%}}#rsvp-status-group .pro-field div{min-width:28%;position:relative}#rsvp-status-group input{opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;cursor:pointer}#rsvp-status-group label{align-items:center;border:1px solid var(--modal-btn-text);border-radius:var(--input-border-radius);color:var(--modal-btn-text);display:flex;flex-direction:column;font-weight:700;text-transform:uppercase;justify-content:center;opacity:.6;padding:.8em;transition:all .1s ease-in-out;width:100%}#rsvp-status-group label.status-confirmed{border-color:var(--form-success);color:var(--form-success)}#rsvp-status-group label.status-declined{border-color:var(--form-error);color:var(--form-error)}#rsvp-status-group input:checked+label{background-color:var(--modal-text);color:var(--status-active-text);opacity:1;transform:scale(1.1)}#rsvp-status-group input:focus-visible+label{outline:2px solid var(--accent-color);outline-offset:2px}#rsvp-status-group input:not([disabled])+label:hover,#rsvp-status-group input:not([disabled]):hover+label{opacity:1;transform:scale(1.08)}#rsvp-status-group input:checked+label.status-confirmed{background-color:var(--form-success)}#rsvp-status-group input:checked+label.status-declined{background-color:var(--form-error)}#rsvp-success-msg,#rsvp-success-msg-demo,#rsvp-success-msg-doi,#rsvp-success-msg-email,#ty-success-msg{color:var(--form-success);display:none;font-weight:700;line-height:1.6em;padding:1.5em 0;text-align:center}#pro-form-submit{display:block;margin:auto;min-width:150px}.pro-waiting{background-color:var(--modal-btn-background);border:1px solid var(--modal-btn-border);border-radius:var(--btn-border-radius);box-sizing:border-box;color:var(--modal-btn-text);cursor:wait;display:none;line-height:.5em;margin:auto;min-width:150px;padding:.5em 1.25em 1.2em;text-align:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:fit-content}@media (width > 575px){#pro-form-submit,.pro-waiting{min-width:200px}}.pro-waiting span:not(.atcb-icon-ical){animation-name:blink;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both;font-size:2.5em}.pro-field label span:not(.atcb-icon-ical){color:var(--form-error);font-weight:700;padding-left:2px}.pro-waiting span:not(.atcb-icon-ical):nth-child(2){animation-delay:.15s}.pro-waiting span:not(.atcb-icon-ical):nth-child(3){animation-delay:.3s}@keyframes blink{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}.pro #rsvp-sent-content{align-items:center;display:flex;flex-direction:column;gap:1.5em}#rsvp-status-group span{color:inherit}.atcb-modal-content .pro p{margin:0}.atcb-modal-content .pro p.pro-pt{margin-top:1.5em}.atcb-modal-content .pro .pro-field p{font-size:.9em}.pro .btn-flex{align-items:center;display:flex}.pro .atcb-modal-btn svg{fill:none;height:1.5em;margin-right:.5em;stroke:currentcolor;width:auto} \ No newline at end of file diff --git a/assets/css/atcb-flat.css b/assets/css/atcb-flat.css index 6011927a..7362ad8e 100644 --- a/assets/css/atcb-flat.css +++ b/assets/css/atcb-flat.css @@ -24,7 +24,7 @@ --base-font-size-m: 16px; --base-font-size-s: 16px; --font: arial, helvetica, sans-serif; - --keyboard-focus: #1e90ff; + --accent-color: #1e90ff; --wrapper-padding: 0px; --btn-background: #f5f5f5; --btn-hover-background: #fff; @@ -53,6 +53,10 @@ --modal-btn-text: #2e2e2e; --modal-btn-hover-text: #161616; --modal-btn-secondary-text: #676767; + --input-background: #fff; + --status-active-text: #fff; + --form-error: #c5372c; + --form-success: #338a36; --date-btn-text: #1d1d1e; --date-btn-text-secondary: #414141; --date-btn-cal-day-text: #fff; @@ -97,6 +101,10 @@ --modal-btn-text: #dbdbdb; --modal-btn-hover-text: #fff; --modal-btn-secondary-text: #b8b8b8; + --input-background: #434246; + --status-active-text: #000; + --form-error: #db8680; + --form-success: #99de9c; --date-btn-text: #ebebf0; --date-btn-text-secondary: #b5b5bd; --date-btn-cal-day-text: #101010; @@ -201,7 +209,7 @@ } .atcb-button:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-button:not([disabled]):focus, @@ -368,7 +376,7 @@ .atcb-list-item:focus-visible { background-color: var(--list-hover-background); - color: var(--keyboard-focus); + color: var(--accent-color); font-weight: 600; outline: none; } @@ -560,8 +568,25 @@ a.atcb-modal-btn.atcb-modal-btn-primary { color: var(--modal-btn-text); } -button.atcb-modal-btn:hover, -a.atcb-modal-btn:hover { +button.atcb-modal-btn:focus-visible, +a.atcb-modal-btn:focus-visible{ + background-color: var(--modal-btn-hover-background); + outline: 2px solid var(--accent-color); +} + +button.atcb-button:disabled, +button.atcb-subevent-btn:disabled, +button.atcb-modal-btn:disabled, +a.atcb-modal-btn:disabled { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); + border-style: dashed; + box-shadow: none; +} + +button.atcb-modal-btn:not([disabled]):hover, +a.atcb-modal-btn:not([disabled]):hover { background-color: var(--modal-btn-hover-background); color: var(--modal-btn-hover-text); text-decoration: none; @@ -570,12 +595,6 @@ a.atcb-modal-btn:hover { box-shadow: 3px 3px 0 0 var(--btn-shadow); } -button.atcb-modal-btn:focus-visible, -a.atcb-modal-btn:focus-visible{ - background-color: var(--modal-btn-hover-background); - outline: 2px solid var(--keyboard-focus); -} - /****************************** * Date Buttons */ @@ -613,7 +632,7 @@ a.atcb-modal-btn:focus-visible{ } .atcb-subevent-btn:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-subevent-btn + .atcb-subevent-btn { @@ -837,8 +856,8 @@ a.atcb-modal-btn:focus-visible{ * Icon specifics */ -.atcb-icon.atcb-icon-ms365, .atcb-icon.outlookcom { - padding-bottom: .5em; +.atcb-icon.atcb-icon-ms365, .atcb-icon-outlookcom { + padding-bottom: .05em; } .atcb-icon.atcb-icon-apple, .atcb-icon.atcb-icon-ical { @@ -871,3 +890,383 @@ a.atcb-modal-btn:focus-visible{ .atcb-icon.atcb-icon-outlookcom svg { filter: var(--icon-filter); } + +/****************************** + * PRO Features + */ + + .rsvp-inline-wrapper { + background-color: transparent; + border: 0; + filter: none; + min-width: 100%; +} + +.rsvp-inline-wrapper .atcb-modal-headline, +.rsvp-inline-wrapper .atcb-modal-content { + background-color: transparent; + border-radius: 0; + box-sizing: border-box; + width: 100%; +} + +.pro { + text-align: center; +} + +.pro ol, +.pro ul { + margin: auto; + text-align: left; + width: fit-content; +} + +.pro a, +.pro a:visited, +.pro a:active { + color: var(--modal-btn-text); + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: var(--accent-color); +} + +.pro a:hover { + color: var(--accent-color); + text-decoration: none; +} + +.pro .pro-share-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.pro #rsvp-atcb { + display: flex; + flex-wrap: wrap; + gap: .4em; +} + +.pro-form { + border-top: 2px solid var(--modal-btn-border); + margin-top: 1.5em; + padding-top: 1.5em; + text-align: left; +} + +.pro-field + .pro-field { + padding-top: 1.3em; +} + +.pro-field-type-label + .pro-field-type-radio { + padding-top: 0; +} + +.pro-field-type-checkbox, +.pro-field-type-radio div { + align-items: center; + display: flex; +} + +.pro-field-type-checkbox input, +.pro-field-type-radio input { + cursor: pointer; +} + +.pro-field label { + display: block; + font-size: .9em; + opacity: .7; +} + +.pro-field-type-checkbox label, +.pro-field-type-radio label { + cursor: pointer; + opacity: .8; + padding-left: .3em; +} + +.pro-field input[type="text"], +.pro-field input[type="email"], +.pro-field input[type="number"] { + background-color: var(--input-background); + border: 2px solid var(--modal-btn-border); + border-radius: var(--input-border-radius); + box-sizing: border-box; + caret-color: var(--accent-color); + color: var(--modal-text); + font-size: .9em; + opacity: .8; + padding: .7em; + transition: all .1s ease-in-out; + width: 100%; +} + +.pro-field input[type="checkbox"], +.pro-field input[type="radio"] { + accent-color: var(--accent-color); + height: 1.2rem; + opacity: .8; + transition: all .1s ease-in-out; + width: 1.2em; +} + +.pro-field input:disabled, +.pro-field input:disabled + label { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); +} + +.pro-field input:not([disabled]):hover { + opacity: 1; +} + +.pro-field input[type="text"]:focus, +.pro-field input[type="email"]:focus, +.pro-field input[type="number"]:focus { + border-color: var(--accent-color); + outline: 1px solid var(--accent-color); +} + +.pro-field input[type="checkbox"]:focus, +.pro-field input[type="radio"]:focus { + outline-color: var(--accent-color); + outline-width: 2px; +} + +#submit-error { + color: var(--form-error); + display: none; + font-weight: bold; + padding-top: 1.5em; + text-align: center; +} + +.pro-form.form-error #submit-error { + display: block; +} + +.pro-field input.error { + accent-color: var(--form-error); + border: 2px solid var(--form-error); +} + +.pro-field input.error + label, +.pro-field:has(input.error) label { + color: var(--form-error); + opacity: 1; +} + +#rsvp-status-group { + border-bottom: 2px solid var(--modal-btn-border); + font-weight: bold; + margin-bottom: 1.5em; + padding-bottom: 2em; + text-align: center; +} + +#rsvp-status-group .pro-field { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.2em; + justify-content: center; + margin-top: 1em; +} + +@media (width <= 575px) { + #rsvp-status-group .pro-field { + flex-direction: column; + } + + #rsvp-status-group .pro-field div { + width: 80%; + } +} + +#rsvp-status-group .pro-field div { + min-width: 28%; + position: relative; +} + +#rsvp-status-group input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; +} + +#rsvp-status-group label { + align-items: center; + border: 2px solid var(--modal-btn-text); + border-radius: var(--input-border-radius); + color: var(--modal-btn-text); + display: flex; + flex-direction: column; + font-weight: bold; + text-transform: uppercase; + justify-content: center; + opacity: .6; + padding: .8em; + transition: all .1s ease-in-out; + width: 100%; +} + +#rsvp-status-group label.status-confirmed { + border-color: var(--form-success); + color: var(--form-success); +} + +#rsvp-status-group label.status-declined { + border-color: var(--form-error); + color: var(--form-error); +} + +#rsvp-status-group input:checked + label { + background-color: var(--modal-text); + color: var(--status-active-text); + opacity: 1; + transform: scale(1.1); +} + +#rsvp-status-group input:focus-visible + label { + outline: 2px solid var(--accent-color); + outline-offset: 2px; +} + +#rsvp-status-group input:not([disabled]) + label:hover, +#rsvp-status-group input:not([disabled]):hover + label { + opacity: 1; + transform: scale(1.08); +} + +#rsvp-status-group input:checked + label.status-confirmed { + background-color: var(--form-success); +} + +#rsvp-status-group input:checked + label.status-declined { + background-color: var(--form-error); +} + +#ty-success-msg, +#rsvp-success-msg, +#rsvp-success-msg-email, +#rsvp-success-msg-doi, +#rsvp-success-msg-demo { + color: var(--form-success); + display: none; + font-weight: bold; + line-height: 1.6em; + padding: 1.5em 0; + text-align: center; +} + +#pro-form-submit { + display: block; + margin: auto; + min-width: 150px; +} + +.pro-waiting { + background-color: var(--modal-btn-background); + border: .2em solid var(--modal-btn-border); + border-radius: var(--btn-border-radius); + box-sizing: border-box; + color: var(--modal-btn-text); + cursor: wait; + display: none; + line-height: .5em; + margin: auto; + min-width: 150px; + padding: .5em 1.25em 1.2em; + text-align: center; + user-select: none; + -webkit-user-select: none; + -webkit-tap-highlight-color: transparent; + width: fit-content; +} + +@media (width > 575px) { + #pro-form-submit, + .pro-waiting { + min-width: 200px; + } +} + +.pro-waiting span:not(.atcb-icon-ical) { + animation-name: blink; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-fill-mode: both; + font-size: 2.5em; +} + +.pro-field label span:not(.atcb-icon-ical) { + color: var(--form-error); + font-weight: bold; + padding-left: 2px; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(2) { + animation-delay: .15s; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(3) { + animation-delay: .3s; +} + +@keyframes blink { + 0% { + opacity: .2; + } + + 20% { + opacity: 1; + } + + 100% { + opacity: .2; + } +} + +.pro #rsvp-sent-content { + align-items: center; + display: flex; + flex-direction: column; + gap: 1.5em; +} + +/* overrides */ +#rsvp-status-group span { + color: inherit; +} + +.atcb-modal-content .pro p { + margin: 0; +} + +.atcb-modal-content .pro p.pro-pt { + margin-top: 1.5em; +} + +.atcb-modal-content .pro .pro-field p { + font-size: .9em; +} + +.pro .btn-flex { + align-items: center; + display: flex; +} + +.pro .atcb-modal-btn svg { + fill: none; + height: 1.5em; + margin-right: .5em; + stroke: currentcolor; + width: auto; +} diff --git a/assets/css/atcb-flat.min.css b/assets/css/atcb-flat.min.css index b6d46c2f..0fe95fee 100644 --- a/assets/css/atcb-flat.min.css +++ b/assets/css/atcb-flat.min.css @@ -1 +1 @@ -:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--keyboard-focus:#1e90ff;--wrapper-padding:0px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-border:#545454;--btn-padding-x:1.2em;--btn-padding-y:.8em;--btn-shadow:#333;--btn-text:#333;--btn-hover-text:#000;--list-background:#f5f5f5;--list-hover-background:#fff;--list-border:#545454;--list-text:#333;--list-hover-text:#000;--list-close-background:#545454;--list-close-text:#b0b0b0;--list-close-text-hover:#777;--list-padding:.8em;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#bababa;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#545454;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#676767;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#414141;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--overlay-background:rgba(20 20 20 / 40%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#222;--btn-hover-background:#373737;--btn-border:#515151;--btn-shadow:#000;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--list-background:#222;--list-hover-background:#373737;--list-border:#515151;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#111;--list-close-text:#777;--list-close-text-hover:#f1f1f1;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#313131;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#414141;--date-btn-cal-background:#c7c7cd;--date-btn-background:#2d2d2d;--date-btn-hover-background:#474747;--overlay-background:rgba(20 20 20 / 75%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(0.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{align-items:center;background-color:var(--btn-background);border:.2em solid var(--btn-border);box-sizing:content-box;color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.5em;margin:0;max-width:300px;padding:var(--btn-padding-y) var(--btn-padding-x);top:0;left:0;box-shadow:0 0 0 0 var(--btn-shadow);position:relative;text-align:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;z-index:1}.atcb-button:not(.atcb-no-text,.atcb-modal-style,.atcb-dropoverlay,.atcb-single){min-width:calc(11em - 2 * var(--btn-padding-x))}.atcb-button.atcb-no-text{display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-button.atcb-click:not([disabled]){top:-3px;left:-3px;box-shadow:3px 3px 0 0 var(--btn-shadow)}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-color:var(--btn-hover-background);top:0;left:0;box-shadow:0 0 0 0 var(--btn-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){z-index:15000000}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay),.atcb-button.atcb-single:not([disabled]):focus,.atcb-button.atcb-single:not([disabled]):hover{background-color:var(--btn-hover-background);top:-5px;left:-5px;box-shadow:5px 5px 0 0 var(--btn-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:.9em;line-height:1em;margin-right:.8em;width:.9em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:1em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-icon-trigger svg{display:none}.atcb-button .atcb-icon-trigger::after{content:"+";font-size:1.5em}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:0;height:0;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;padding:0 2px 0 6px;position:absolute;z-index:16000090}.atcb-list-wrapper:not(.atcb-dropup,.atcb-dropoverlay){animation:list-entrance-bottom .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropup{animation:list-entrance-top .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropoverlay{z-index:15000000}@keyframes list-entrance-bottom{0%{opacity:0;transform:translateY(150px)}100%{opacity:1;transform:translateY(0)}}@keyframes list-entrance-top{0%{opacity:0;transform:translateY(-150px)}100%{opacity:1;transform:translateY(0)}}.atcb-list{background:var(--list-background);box-sizing:border-box;border:.15em solid var(--list-border);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--keyboard-focus);font-weight:600;outline:0}.atcb-dropup .atcb-list-item:last-child{border-bottom-width:0}.atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{border-top-width:0}.atcb-dropoverlay .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child,.atcb-dropup .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{border-top-width:.15em}.atcb-list-item .atcb-icon{height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item.atcb-list-item-close:hover{color:var(--list-close-text-hover)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{border:.15em solid var(--btn-border);background-color:var(--modal-background);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{padding-top:0}.atcb-modal-content{font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{padding-top:0}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{border:.2em solid var(--btn-border);background-color:var(--modal-btn-secondary-background);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;top:0;left:0;box-shadow:0 0 0 0 var(--btn-shadow)}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn:hover,button.atcb-modal-btn:hover{background-color:var(--modal-btn-hover-background);color:var(--modal-btn-hover-text);text-decoration:none;top:-3px;left:-3px;box-shadow:3px 3px 0 0 var(--btn-shadow)}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn{border:.15em solid var(--btn-border);display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;background-color:var(--date-btn-background);padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;top:0;left:0;box-shadow:0 0 0 0 var(--btn-shadow)}.atcb-subevent-btn:hover{align-items:center;top:-3px;left:-3px;box-shadow:3px 3px 0 0 var(--btn-shadow)}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-2.1em;right:-2em;padding:.5em;border-radius:100%;height:1.5em}.atcb-checkmark svg{height:100%;width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon.atcb-icon-ms365,.atcb-icon.outlookcom{padding-bottom:.5em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)} \ No newline at end of file +:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--accent-color:#1e90ff;--wrapper-padding:0px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-border:#545454;--btn-padding-x:1.2em;--btn-padding-y:.8em;--btn-shadow:#333;--btn-text:#333;--btn-hover-text:#000;--list-background:#f5f5f5;--list-hover-background:#fff;--list-border:#545454;--list-text:#333;--list-hover-text:#000;--list-close-background:#545454;--list-close-text:#b0b0b0;--list-close-text-hover:#777;--list-padding:.8em;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#bababa;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#545454;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#676767;--input-background:#fff;--status-active-text:#fff;--form-error:#c5372c;--form-success:#338a36;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#414141;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--overlay-background:rgba(20 20 20 / 40%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#222;--btn-hover-background:#373737;--btn-border:#515151;--btn-shadow:#000;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--list-background:#222;--list-hover-background:#373737;--list-border:#515151;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#111;--list-close-text:#777;--list-close-text-hover:#f1f1f1;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#313131;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--input-background:#434246;--status-active-text:#000;--form-error:#db8680;--form-success:#99de9c;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#414141;--date-btn-cal-background:#c7c7cd;--date-btn-background:#2d2d2d;--date-btn-hover-background:#474747;--overlay-background:rgba(20 20 20 / 75%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(0.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{align-items:center;background-color:var(--btn-background);border:.2em solid var(--btn-border);box-sizing:content-box;color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.5em;margin:0;max-width:300px;padding:var(--btn-padding-y) var(--btn-padding-x);top:0;left:0;box-shadow:0 0 0 0 var(--btn-shadow);position:relative;text-align:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;z-index:1}.atcb-button:not(.atcb-no-text,.atcb-modal-style,.atcb-dropoverlay,.atcb-single){min-width:calc(11em - 2 * var(--btn-padding-x))}.atcb-button.atcb-no-text{display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-button.atcb-click:not([disabled]){top:-3px;left:-3px;box-shadow:3px 3px 0 0 var(--btn-shadow)}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--accent-color)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-color:var(--btn-hover-background);top:0;left:0;box-shadow:0 0 0 0 var(--btn-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){z-index:15000000}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay),.atcb-button.atcb-single:not([disabled]):focus,.atcb-button.atcb-single:not([disabled]):hover{background-color:var(--btn-hover-background);top:-5px;left:-5px;box-shadow:5px 5px 0 0 var(--btn-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:.9em;line-height:1em;margin-right:.8em;width:.9em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:1em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-icon-trigger svg{display:none}.atcb-button .atcb-icon-trigger::after{content:"+";font-size:1.5em}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:0;height:0;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;padding:0 2px 0 6px;position:absolute;z-index:16000090}.atcb-list-wrapper:not(.atcb-dropup,.atcb-dropoverlay){animation:list-entrance-bottom .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropup{animation:list-entrance-top .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropoverlay{z-index:15000000}@keyframes list-entrance-bottom{0%{opacity:0;transform:translateY(150px)}100%{opacity:1;transform:translateY(0)}}@keyframes list-entrance-top{0%{opacity:0;transform:translateY(-150px)}100%{opacity:1;transform:translateY(0)}}.atcb-list{background:var(--list-background);box-sizing:border-box;border:.15em solid var(--list-border);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--accent-color);font-weight:600;outline:0}.atcb-dropup .atcb-list-item:last-child{border-bottom-width:0}.atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{border-top-width:0}.atcb-dropoverlay .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child,.atcb-dropup .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{border-top-width:.15em}.atcb-list-item .atcb-icon{height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item.atcb-list-item-close:hover{color:var(--list-close-text-hover)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{border:.15em solid var(--btn-border);background-color:var(--modal-background);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{padding-top:0}.atcb-modal-content{font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{padding-top:0}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{border:.2em solid var(--btn-border);background-color:var(--modal-btn-secondary-background);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;top:0;left:0;box-shadow:0 0 0 0 var(--btn-shadow)}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--accent-color)}a.atcb-modal-btn:disabled,button.atcb-button:disabled,button.atcb-modal-btn:disabled,button.atcb-subevent-btn:disabled{cursor:not-allowed;opacity:.75;filter:brightness(95%);border-style:dashed;box-shadow:none}a.atcb-modal-btn:not([disabled]):hover,button.atcb-modal-btn:not([disabled]):hover{background-color:var(--modal-btn-hover-background);color:var(--modal-btn-hover-text);text-decoration:none;top:-3px;left:-3px;box-shadow:3px 3px 0 0 var(--btn-shadow)}.atcb-subevent-btn{border:.15em solid var(--btn-border);display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;background-color:var(--date-btn-background);padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;top:0;left:0;box-shadow:0 0 0 0 var(--btn-shadow)}.atcb-subevent-btn:hover{align-items:center;top:-3px;left:-3px;box-shadow:3px 3px 0 0 var(--btn-shadow)}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--accent-color)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-2.1em;right:-2em;padding:.5em;border-radius:100%;height:1.5em}.atcb-checkmark svg{height:100%;width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon-outlookcom,.atcb-icon.atcb-icon-ms365{padding-bottom:.05em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)}.rsvp-inline-wrapper{background-color:transparent;border:0;filter:none;min-width:100%}.rsvp-inline-wrapper .atcb-modal-content,.rsvp-inline-wrapper .atcb-modal-headline{background-color:transparent;border-radius:0;box-sizing:border-box;width:100%}.pro{text-align:center}.pro ol,.pro ul{margin:auto;text-align:left;width:fit-content}.pro a,.pro a:active,.pro a:visited{color:var(--modal-btn-text);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent-color)}.pro a:hover{color:var(--accent-color);text-decoration:none}.pro .pro-share-buttons{display:flex;flex-wrap:wrap;justify-content:center}.pro #rsvp-atcb{display:flex;flex-wrap:wrap;gap:.3em}.pro-form{border-top:2px solid var(--modal-btn-border);margin-top:1.5em;padding-top:1.5em;text-align:left}.pro-field+.pro-field{padding-top:1.3em}.pro-field-type-label+.pro-field-type-radio{padding-top:0}.pro-field-type-checkbox,.pro-field-type-radio div{align-items:center;display:flex}.pro-field-type-checkbox input,.pro-field-type-radio input{cursor:pointer}.pro-field label{display:block;font-size:.9em;opacity:.7}.pro-field-type-checkbox label,.pro-field-type-radio label{cursor:pointer;opacity:.8;padding-left:.3em}.pro-field input[type=email],.pro-field input[type=number],.pro-field input[type=text]{background-color:var(--input-background);border:2px solid var(--modal-btn-border);border-radius:var(--input-border-radius);box-sizing:border-box;caret-color:var(--accent-color);color:var(--modal-text);font-size:.9em;opacity:.8;padding:.7em;transition:all .1s ease-in-out;width:100%}.pro-field input[type=checkbox],.pro-field input[type=radio]{accent-color:var(--accent-color);height:1.2rem;opacity:.8;transition:all .1s ease-in-out;width:1.2em}.pro-field input:disabled,.pro-field input:disabled+label{cursor:not-allowed;opacity:.75;filter:brightness(95%)}.pro-field input:not([disabled]):hover{opacity:1}.pro-field input[type=email]:focus,.pro-field input[type=number]:focus,.pro-field input[type=text]:focus{border-color:var(--accent-color);outline:1px solid var(--accent-color)}.pro-field input[type=checkbox]:focus,.pro-field input[type=radio]:focus{outline-color:var(--accent-color);outline-width:2px}#submit-error{color:var(--form-error);display:none;font-weight:700;padding-top:1.5em;text-align:center}.pro-form.form-error #submit-error{display:block}.pro-field input.error{accent-color:var(--form-error);border:2px solid var(--form-error)}.pro-field input.error+label,.pro-field:has(input.error) label{color:var(--form-error);opacity:1}#rsvp-status-group{border-bottom:2px solid var(--modal-btn-border);font-weight:700;margin-bottom:1.5em;padding-bottom:2em;text-align:center}#rsvp-status-group .pro-field{align-items:center;display:flex;flex-wrap:wrap;gap:1.2em;justify-content:center;margin-top:1em}@media (width <= 575px){#rsvp-status-group .pro-field{flex-direction:column}#rsvp-status-group .pro-field div{width:80%}}#rsvp-status-group .pro-field div{min-width:28%;position:relative}#rsvp-status-group input{opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;cursor:pointer}#rsvp-status-group label{align-items:center;border:2px solid var(--modal-btn-text);border-radius:var(--input-border-radius);color:var(--modal-btn-text);display:flex;flex-direction:column;font-weight:700;text-transform:uppercase;justify-content:center;opacity:.6;padding:.8em;transition:all .1s ease-in-out;width:100%}#rsvp-status-group label.status-confirmed{border-color:var(--form-success);color:var(--form-success)}#rsvp-status-group label.status-declined{border-color:var(--form-error);color:var(--form-error)}#rsvp-status-group input:checked+label{background-color:var(--modal-text);color:var(--status-active-text);opacity:1;transform:scale(1.1)}#rsvp-status-group input:focus-visible+label{outline:2px solid var(--accent-color);outline-offset:2px}#rsvp-status-group input:not([disabled])+label:hover,#rsvp-status-group input:not([disabled]):hover+label{opacity:1;transform:scale(1.08)}#rsvp-status-group input:checked+label.status-confirmed{background-color:var(--form-success)}#rsvp-status-group input:checked+label.status-declined{background-color:var(--form-error)}#rsvp-success-msg,#rsvp-success-msg-demo,#rsvp-success-msg-doi,#rsvp-success-msg-email,#ty-success-msg{color:var(--form-success);display:none;font-weight:700;line-height:1.6em;padding:1.5em 0;text-align:center}#pro-form-submit{display:block;margin:auto;min-width:150px}.pro-waiting{background-color:var(--modal-btn-background);border:.2em solid var(--modal-btn-border);border-radius:var(--btn-border-radius);box-sizing:border-box;color:var(--modal-btn-text);cursor:wait;display:none;line-height:.5em;margin:auto;min-width:150px;padding:.5em 1.25em 1.2em;text-align:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:fit-content}@media (width > 575px){#pro-form-submit,.pro-waiting{min-width:200px}}.pro-waiting span:not(.atcb-icon-ical){animation-name:blink;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both;font-size:2.5em}.pro-field label span:not(.atcb-icon-ical){color:var(--form-error);font-weight:700;padding-left:2px}.pro-waiting span:not(.atcb-icon-ical):nth-child(2){animation-delay:.15s}.pro-waiting span:not(.atcb-icon-ical):nth-child(3){animation-delay:.3s}@keyframes blink{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}.pro #rsvp-sent-content{align-items:center;display:flex;flex-direction:column;gap:1.5em}#rsvp-status-group span{color:inherit}.atcb-modal-content .pro p{margin:0}.atcb-modal-content .pro p.pro-pt{margin-top:1.5em}.atcb-modal-content .pro .pro-field p{font-size:.9em}.pro .btn-flex{align-items:center;display:flex}.pro .atcb-modal-btn svg{fill:none;height:1.5em;margin-right:.5em;stroke:currentcolor;width:auto} \ No newline at end of file diff --git a/assets/css/atcb-neumorphism.css b/assets/css/atcb-neumorphism.css index 3631dce3..5016d2d4 100644 --- a/assets/css/atcb-neumorphism.css +++ b/assets/css/atcb-neumorphism.css @@ -24,7 +24,7 @@ --base-font-size-m: 16px; --base-font-size-s: 16px; --font: arial, helvetica, sans-serif; - --keyboard-focus: #1e90ff; + --accent-color: #1e90ff; --wrapper-padding: 0px; --btn-background: #f5f5f5; --btn-hover-background: #fff; @@ -58,7 +58,11 @@ --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 70%)); --modal-btn-shadow: rgba(40 40 40 / 15%) 0.2em 0.2em 0.4em, rgba(255 255 255 / 30%) -0.1em -0.1em 0.3em; --modal-btn-hover-shadow: rgba(40 40 40 / 40%) 0.4em 0.4em 0.7em, rgba(255 255 255 / 70%) -0.2em -0.2em 0.5em; - --modal-input-border-radius: 6px; + --input-border-radius: 6px; + --input-background: #fff; + --status-active-text: #fff; + --form-error: #c5372c; + --form-success: #338a36; --date-btn-text: #1d1d1e; --date-btn-text-secondary: #3a3a3f; --date-btn-cal-day-text: #fff; @@ -107,6 +111,10 @@ --modal-shadow: drop-shadow(5px 8px 35px rgba(0 0 0 / 90%)); --modal-btn-shadow: rgba(0 0 0 / 60%) 0.2em 0.2em 0.6em, rgba(230 230 230 / 15%) -0.1em -0.1em 0.4em; --modal-btn-hover-shadow: rgba(0 0 0 / 80%) 0.3em 0.3em 0.8em, rgba(230 230 230 / 15%) -0.1em -0.1em 0.6em; + --input-background: #434246; + --status-active-text: #000; + --form-error: #db8680; + --form-success: #99de9c; --date-btn-text: #ebebf0; --date-btn-text-secondary: #b5b5bd; --date-btn-cal-day-text: #101010; @@ -205,7 +213,7 @@ } .atcb-button:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-button:not([disabled]):focus, @@ -345,7 +353,7 @@ .atcb-list-item:focus-visible { box-shadow: var(--btn-shadow); background-color: var(--list-hover-background); - color: var(--keyboard-focus); + color: var(--accent-color); padding: calc(var(--list-padding) + 0.2em); margin: -0.2em; position: relative; @@ -542,18 +550,29 @@ a.atcb-modal-btn.atcb-modal-btn-primary { color: var(--modal-btn-text); } -button.atcb-modal-btn:hover, -a.atcb-modal-btn:hover { +button.atcb-modal-btn:focus-visible, +a.atcb-modal-btn:focus-visible { background-color: var(--modal-btn-hover-background); - box-shadow: var(--modal-btn-hover-shadow); - color: var(--modal-btn-hover-text); - text-decoration: none; + outline: 2px solid var(--accent-color); } -button.atcb-modal-btn:focus-visible, -a.atcb-modal-btn:focus-visible { +button.atcb-button:disabled, +button.atcb-subevent-btn:disabled, +button.atcb-modal-btn:disabled, +a.atcb-modal-btn:disabled { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); + border-style: dashed; + box-shadow: none; +} + +button.atcb-modal-btn:not([disabled]):hover, +a.atcb-modal-btn:not([disabled]):hover { background-color: var(--modal-btn-hover-background); - outline: 2px solid var(--keyboard-focus); + box-shadow: var(--modal-btn-hover-shadow); + color: var(--modal-btn-hover-text); + text-decoration: none; } /****************************** @@ -590,7 +609,7 @@ a.atcb-modal-btn:focus-visible { } .atcb-subevent-btn:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-subevent-btn + .atcb-subevent-btn { @@ -825,8 +844,8 @@ a.atcb-modal-btn:focus-visible { * Icon specifics */ -.atcb-icon.atcb-icon-ms365, .atcb-icon.outlookcom { - padding-bottom: .5em; +.atcb-icon.atcb-icon-ms365, .atcb-icon-outlookcom { + padding-bottom: .05em; } .atcb-icon.atcb-icon-apple, .atcb-icon.atcb-icon-ical { @@ -863,3 +882,393 @@ a.atcb-modal-btn:focus-visible { .atcb-icon.atcb-icon-outlookcom svg { filter: var(--icon-filter); } + +/****************************** + * PRO Features + */ + + .rsvp-inline-wrapper { + filter: none; + min-width: 100%; +} + +.rsvp-inline-wrapper .atcb-modal-headline, +.rsvp-inline-wrapper .atcb-modal-content { + background-color: transparent; + border-radius: 0; + box-sizing: border-box; + width: 100%; +} + +.pro { + text-align: center; +} + +.pro ol, +.pro ul { + margin: auto; + text-align: left; + width: fit-content; +} + +.pro a, +.pro a:visited, +.pro a:active { + color: var(--modal-btn-text); + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: var(--accent-color); +} + +.pro a:hover { + color: var(--accent-color); + text-decoration: none; +} + +.pro .pro-share-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.pro #rsvp-atcb { + display: flex; + flex-wrap: wrap; + gap: .4em; +} + +.pro-form { + border-top: 1px solid var(--modal-btn-border); + margin-top: 1.5em; + padding-top: 1.5em; + text-align: left; +} + +.pro-field + .pro-field { + padding-top: 1.3em; +} + +.pro-field-type-label + .pro-field-type-radio { + padding-top: 0; +} + +.pro-field-type-checkbox, +.pro-field-type-radio div { + align-items: center; + display: flex; +} + +.pro-field-type-checkbox input, +.pro-field-type-radio input { + cursor: pointer; +} + +.pro-field label { + display: block; + font-size: .9em; + opacity: .7; +} + +.pro-field-type-checkbox label, +.pro-field-type-radio label { + cursor: pointer; + opacity: .8; + padding-left: .3em; +} + +.pro-field input[type="text"], +.pro-field input[type="email"], +.pro-field input[type="number"] { + background-color: var(--input-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--input-border-radius); + box-sizing: border-box; + box-shadow: var(--btn-shadow); + caret-color: var(--accent-color); + color: var(--modal-text); + font-size: .9em; + opacity: .8; + padding: .7em; + transition: all .1s ease-in-out; + width: 100%; +} + +.pro-field input[type="checkbox"], +.pro-field input[type="radio"] { + accent-color: var(--accent-color); + height: 1.2rem; + opacity: .8; + transition: all .1s ease-in-out; + width: 1.2em; +} + +.pro-field input:disabled, +.pro-field input:disabled + label { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); +} + +.pro-field input:not([disabled]):hover { + opacity: 1; +} + +.pro-field input:not([disabled],[type="checkbox"],[type="radio"]):hover { + box-shadow: var(--btn-active-shadow); +} + +.pro-field input[type="text"]:focus, +.pro-field input[type="email"]:focus, +.pro-field input[type="number"]:focus { + box-shadow: var(--btn-active-shadow); +} + +.pro-field input[type="text"]:focus-visible, +.pro-field input[type="email"]:focus-visible, +.pro-field input[type="number"]:focus-visible { + border-color: var(--accent-color); + outline: 1px solid var(--accent-color); +} + +.pro-field input[type="checkbox"]:focus, +.pro-field input[type="radio"]:focus { + outline-color: var(--accent-color); + outline-width: 2px; +} + +#submit-error { + color: var(--form-error); + display: none; + font-weight: bold; + padding-top: 1.5em; + text-align: center; +} + +.pro-form.form-error #submit-error { + display: block; +} + +.pro-field input.error { + accent-color: var(--form-error); + border: 2px solid var(--form-error); +} + +.pro-field input.error + label, +.pro-field:has(input.error) label { + color: var(--form-error); + opacity: 1; +} + +#rsvp-status-group { + border-bottom: 1px solid var(--modal-btn-border); + font-weight: bold; + margin-bottom: 1.5em; + padding-bottom: 2em; + text-align: center; +} + +#rsvp-status-group .pro-field { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.2em; + justify-content: center; + margin-top: 1em; +} + +@media (width <= 575px) { + #rsvp-status-group .pro-field { + flex-direction: column; + } + + #rsvp-status-group .pro-field div { + width: 80%; + } +} + +#rsvp-status-group .pro-field div { + min-width: 28%; + position: relative; +} + +#rsvp-status-group input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; +} + +#rsvp-status-group label { + align-items: center; + background-color: var(--input-background); + border-radius: var(--input-border-radius); + box-shadow: var(--btn-shadow); + color: var(--modal-btn-text); + display: flex; + flex-direction: column; + font-weight: bold; + text-transform: uppercase; + justify-content: center; + opacity: .6; + padding: .8em; + transition: all .1s ease-in-out; + width: 100%; +} + +#rsvp-status-group label.status-confirmed { + color: var(--form-success); +} + +#rsvp-status-group label.status-declined { + color: var(--form-error); +} + +#rsvp-status-group input:checked + label { + background-color: var(--modal-text); + box-shadow: var(--btn-hover-shadow); + color: var(--status-active-text); + opacity: 1; + transform: scale(1.1); +} + +#rsvp-status-group input:focus-visible + label { + outline: 2px solid var(--accent-color); + outline-offset: 2px; +} + +#rsvp-status-group input:not([disabled]) + label:hover, +#rsvp-status-group input:not([disabled]):hover + label { + opacity: 1; + transform: scale(1.08); +} + +#rsvp-status-group input:checked + label.status-confirmed { + background-color: var(--form-success); +} + +#rsvp-status-group input:checked + label.status-declined { + background-color: var(--form-error); +} + +#ty-success-msg, +#rsvp-success-msg, +#rsvp-success-msg-email, +#rsvp-success-msg-doi, +#rsvp-success-msg-demo { + color: var(--form-success); + display: none; + font-weight: bold; + line-height: 1.6em; + padding: 1.5em 0; + text-align: center; +} + +#pro-form-submit { + background-color: var(--btn-hover-background); + display: block; + margin: auto; + min-width: 150px; +} + +.pro-waiting { + background-color: var(--modal-btn-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--btn-border-radius); + box-sizing: border-box; + color: var(--modal-btn-text); + cursor: wait; + display: none; + line-height: .5em; + margin: auto; + min-width: 150px; + padding: .5em 1.25em 1.2em; + text-align: center; + user-select: none; + -webkit-user-select: none; + -webkit-tap-highlight-color: transparent; + width: fit-content; +} + +@media (width > 575px) { + #pro-form-submit, + .pro-waiting { + min-width: 200px; + } +} + +.pro-waiting span:not(.atcb-icon-ical) { + animation-name: blink; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-fill-mode: both; + font-size: 2.5em; +} + +.pro-field label span:not(.atcb-icon-ical) { + color: var(--form-error); + font-weight: bold; + padding-left: 2px; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(2) { + animation-delay: .15s; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(3) { + animation-delay: .3s; +} + +@keyframes blink { + 0% { + opacity: .2; + } + + 20% { + opacity: 1; + } + + 100% { + opacity: .2; + } +} + +.pro #rsvp-sent-content { + align-items: center; + display: flex; + flex-direction: column; + gap: 1.5em; +} + +/* overrides */ +#rsvp-status-group span { + color: inherit; +} + +.atcb-modal-content .pro p { + margin: 0; +} + +.atcb-modal-content .pro p.pro-pt { + margin-top: 1.5em; +} + +.atcb-modal-content .pro .pro-field p { + font-size: .9em; +} + +.pro .btn-flex { + align-items: center; + display: flex; +} + +.pro .atcb-modal-btn svg { + fill: none; + height: 1.5em; + margin-right: .5em; + stroke: currentcolor; + width: auto; +} diff --git a/assets/css/atcb-neumorphism.min.css b/assets/css/atcb-neumorphism.min.css index 105d8312..fbe0914c 100644 --- a/assets/css/atcb-neumorphism.min.css +++ b/assets/css/atcb-neumorphism.min.css @@ -1 +1 @@ -:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--keyboard-focus:#1e90ff;--wrapper-padding:0px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-text:#444;--btn-hover-text:#111;--btn-border-radius:15px;--btn-padding-x:1.2em;--btn-padding-y:1em;--btn-shadow:rgba(40 40 40 / 30%) 0.3em 0.3em 0.6em,rgba(255 255 255 / 70%) -0.1em -0.1em 0.3em;--btn-hover-shadow:rgba(40 40 40 / 50%) 0.4em 0.4em 0.8em,rgba(255 255 255 / 90%) -0.2em -0.2em 0.5em;--btn-active-shadow:inset rgba(40 40 40 / 40%) 0.15em 0.15em 0.3em,inset rgba(255 255 255 / 90%) -0.2em -0.2em 0.5em;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#444;--list-hover-text:#111;--list-close-background:#e5e5e5;--list-close-text:#777;--list-border-radius:11px;--list-padding:1em;--list-shadow:rgba(40 40 40 / 30%) 0.4em 0.4em 0.8em,rgba(255 255 255 / 80%) -0.2em -0.2em 0.5em;--modal-text:#111;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#222;--modal-btn-secondary-text:#666567;--modal-border-radius:9px;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(40 40 40 / 15%) 0.2em 0.2em 0.4em,rgba(255 255 255 / 30%) -0.1em -0.1em 0.3em;--modal-btn-hover-shadow:rgba(40 40 40 / 40%) 0.4em 0.4em 0.7em,rgba(255 255 255 / 70%) -0.2em -0.2em 0.5em;--modal-input-border-radius:6px;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#e3e5ea;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(40 40 40 / 40%) 0.2em 0.2em 0.8em,rgba(255 255 255 / 80%) -0.2em -0.2em 0.4em;--date-btn-hover-shadow:rgba(40 40 40 / 50%) 0.3em 0.4em 1em,rgba(255 255 255) -0.3em -0.3em 0.7em;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:#dcdcdc;--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#2e2e2e;--btn-hover-background:#373737;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--btn-shadow:rgba(0 0 0 / 70%) 0.3em 0.3em 0.6em,rgba(230 230 230 / 30%) -0.05em -0.05em 0.4em;--btn-hover-shadow:rgba(0 0 0 / 80%) 0.4em 0.4em 0.9em,rgba(230 230 230 / 35%) -0.08em -0.08em 0.5em;--btn-active-shadow:inset rgba(0 0 0 / 80%) 0.15em 0.15em 0.25em,inset rgba(230 230 230 / 15%) -0.2em -0.2em 0.6em;--list-background:#2e2e2e;--list-hover-background:#373737;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#282828;--list-shadow:rgba(0 0 0) 0.3em 0.3em 1em,rgba(230 230 230 / 40%) -0.08em -0.08em 0.6em;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 35px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(0 0 0 / 60%) 0.2em 0.2em 0.6em,rgba(230 230 230 / 15%) -0.1em -0.1em 0.4em;--modal-btn-hover-shadow:rgba(0 0 0 / 80%) 0.3em 0.3em 0.8em,rgba(230 230 230 / 15%) -0.1em -0.1em 0.6em;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(0 0 0 / 70%) 0.2em 0.2em 0.8em,rgba(230 230 230 / 15%) -0.1em -0.1em 0.5em;--date-btn-hover-shadow:rgba(0 0 0) 0.3em 0.4em 1em,rgba(230 230 230 / 15%) -0.2em -0.2em 0.8em;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:#141414;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(0.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{align-items:center;background-color:var(--btn-background);border:0;border-radius:var(--btn-border-radius);box-shadow:var(--btn-shadow);color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.5em;margin:0;max-width:350px;padding:var(--btn-padding-y) var(--btn-padding-x);position:relative;text-align:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;transition:box-shadow .1s ease-in-out,background-color .1s ease-in-out;z-index:1}.atcb-button.atcb-no-text{min-width:0;border-radius:100%;display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-hover-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){z-index:15000000}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay),.atcb-button.atcb-single:not([disabled]):focus,.atcb-button.atcb-single:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-active-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:-30px;height:0;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;position:absolute;min-width:12.5em;width:auto;animation:list-entrance .6s ease 0s 1 normal forwards;z-index:15000000}@keyframes list-entrance{0%{opacity:0}100%{opacity:1}}.atcb-list{background-color:var(--list-background);border-radius:var(--list-border-radius);box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{box-shadow:none;align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:box-shadow .15s ease-in-out,padding .15s ease-in-out,margin .15s ease-in-out}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{box-shadow:var(--btn-shadow);background-color:var(--list-hover-background);color:var(--list-hover-text);padding:calc(var(--list-padding) + .2em);margin:-.2em;position:relative;z-index:15000010}.atcb-list-item:focus-visible{box-shadow:var(--btn-shadow);background-color:var(--list-hover-background);color:var(--keyboard-focus);padding:calc(var(--list-padding) + .2em);margin:-.2em;position:relative;z-index:15000010;font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 var(--list-border-radius) var(--list-border-radius)}.atcb-list-item:first-child{border-radius:var(--list-border-radius) var(--list-border-radius) 0 0}.atcb-list-item:only-child{border-radius:var(--list-border-radius)}.atcb-list-item .atcb-icon{margin-right:.7em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{animation:list-entrance .6s ease 0s 1 normal forwards;filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:var(--btn-border-radius);box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn:hover,button.atcb-modal-btn:hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:4px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay) .atcb-checkmark,.atcb-button.atcb-single:focus .atcb-checkmark,.atcb-button.atcb-single:hover .atcb-checkmark{top:-.77em;right:-.37em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .1s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon.atcb-icon-ms365,.atcb-icon.outlookcom{padding-bottom:.5em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-trigger{padding-bottom:.2em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)} \ No newline at end of file +:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--accent-color:#1e90ff;--wrapper-padding:0px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-text:#444;--btn-hover-text:#111;--btn-border-radius:15px;--btn-padding-x:1.2em;--btn-padding-y:1em;--btn-shadow:rgba(40 40 40 / 30%) 0.3em 0.3em 0.6em,rgba(255 255 255 / 70%) -0.1em -0.1em 0.3em;--btn-hover-shadow:rgba(40 40 40 / 50%) 0.4em 0.4em 0.8em,rgba(255 255 255 / 90%) -0.2em -0.2em 0.5em;--btn-active-shadow:inset rgba(40 40 40 / 40%) 0.15em 0.15em 0.3em,inset rgba(255 255 255 / 90%) -0.2em -0.2em 0.5em;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#444;--list-hover-text:#111;--list-close-background:#e5e5e5;--list-close-text:#777;--list-border-radius:11px;--list-padding:1em;--list-shadow:rgba(40 40 40 / 30%) 0.4em 0.4em 0.8em,rgba(255 255 255 / 80%) -0.2em -0.2em 0.5em;--modal-text:#111;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#222;--modal-btn-secondary-text:#666567;--modal-border-radius:9px;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(40 40 40 / 15%) 0.2em 0.2em 0.4em,rgba(255 255 255 / 30%) -0.1em -0.1em 0.3em;--modal-btn-hover-shadow:rgba(40 40 40 / 40%) 0.4em 0.4em 0.7em,rgba(255 255 255 / 70%) -0.2em -0.2em 0.5em;--input-border-radius:6px;--input-background:#fff;--status-active-text:#fff;--form-error:#c5372c;--form-success:#338a36;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#e3e5ea;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(40 40 40 / 40%) 0.2em 0.2em 0.8em,rgba(255 255 255 / 80%) -0.2em -0.2em 0.4em;--date-btn-hover-shadow:rgba(40 40 40 / 50%) 0.3em 0.4em 1em,rgba(255 255 255) -0.3em -0.3em 0.7em;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:#dcdcdc;--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#2e2e2e;--btn-hover-background:#373737;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--btn-shadow:rgba(0 0 0 / 70%) 0.3em 0.3em 0.6em,rgba(230 230 230 / 30%) -0.05em -0.05em 0.4em;--btn-hover-shadow:rgba(0 0 0 / 80%) 0.4em 0.4em 0.9em,rgba(230 230 230 / 35%) -0.08em -0.08em 0.5em;--btn-active-shadow:inset rgba(0 0 0 / 80%) 0.15em 0.15em 0.25em,inset rgba(230 230 230 / 15%) -0.2em -0.2em 0.6em;--list-background:#2e2e2e;--list-hover-background:#373737;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#282828;--list-shadow:rgba(0 0 0) 0.3em 0.3em 1em,rgba(230 230 230 / 40%) -0.08em -0.08em 0.6em;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 35px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(0 0 0 / 60%) 0.2em 0.2em 0.6em,rgba(230 230 230 / 15%) -0.1em -0.1em 0.4em;--modal-btn-hover-shadow:rgba(0 0 0 / 80%) 0.3em 0.3em 0.8em,rgba(230 230 230 / 15%) -0.1em -0.1em 0.6em;--input-background:#434246;--status-active-text:#000;--form-error:#db8680;--form-success:#99de9c;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(0 0 0 / 70%) 0.2em 0.2em 0.8em,rgba(230 230 230 / 15%) -0.1em -0.1em 0.5em;--date-btn-hover-shadow:rgba(0 0 0) 0.3em 0.4em 1em,rgba(230 230 230 / 15%) -0.2em -0.2em 0.8em;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:#141414;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(0.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{align-items:center;background-color:var(--btn-background);border:0;border-radius:var(--btn-border-radius);box-shadow:var(--btn-shadow);color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.5em;margin:0;max-width:350px;padding:var(--btn-padding-y) var(--btn-padding-x);position:relative;text-align:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;transition:box-shadow .1s ease-in-out,background-color .1s ease-in-out;z-index:1}.atcb-button.atcb-no-text{min-width:0;border-radius:100%;display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--accent-color)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-hover-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){z-index:15000000}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay),.atcb-button.atcb-single:not([disabled]):focus,.atcb-button.atcb-single:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-active-shadow);color:var(--btn-hover-text)}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:-30px;height:0;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;position:absolute;min-width:12.5em;width:auto;animation:list-entrance .6s ease 0s 1 normal forwards;z-index:15000000}@keyframes list-entrance{0%{opacity:0}100%{opacity:1}}.atcb-list{background-color:var(--list-background);border-radius:var(--list-border-radius);box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{box-shadow:none;align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:box-shadow .15s ease-in-out,padding .15s ease-in-out,margin .15s ease-in-out}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{box-shadow:var(--btn-shadow);background-color:var(--list-hover-background);color:var(--list-hover-text);padding:calc(var(--list-padding) + .2em);margin:-.2em;position:relative;z-index:15000010}.atcb-list-item:focus-visible{box-shadow:var(--btn-shadow);background-color:var(--list-hover-background);color:var(--accent-color);padding:calc(var(--list-padding) + .2em);margin:-.2em;position:relative;z-index:15000010;font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 var(--list-border-radius) var(--list-border-radius)}.atcb-list-item:first-child{border-radius:var(--list-border-radius) var(--list-border-radius) 0 0}.atcb-list-item:only-child{border-radius:var(--list-border-radius)}.atcb-list-item .atcb-icon{margin-right:.7em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{animation:list-entrance .6s ease 0s 1 normal forwards;filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:var(--btn-border-radius);box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--accent-color)}a.atcb-modal-btn:disabled,button.atcb-button:disabled,button.atcb-modal-btn:disabled,button.atcb-subevent-btn:disabled{cursor:not-allowed;opacity:.75;filter:brightness(95%);border-style:dashed;box-shadow:none}a.atcb-modal-btn:not([disabled]):hover,button.atcb-modal-btn:not([disabled]):hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:4px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--accent-color)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay) .atcb-checkmark,.atcb-button.atcb-single:focus .atcb-checkmark,.atcb-button.atcb-single:hover .atcb-checkmark{top:-.77em;right:-.37em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .1s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon-outlookcom,.atcb-icon.atcb-icon-ms365{padding-bottom:.05em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-trigger{padding-bottom:.2em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)}.rsvp-inline-wrapper{filter:none;min-width:100%}.rsvp-inline-wrapper .atcb-modal-content,.rsvp-inline-wrapper .atcb-modal-headline{background-color:transparent;border-radius:0;box-sizing:border-box;width:100%}.pro{text-align:center}.pro ol,.pro ul{margin:auto;text-align:left;width:fit-content}.pro a,.pro a:active,.pro a:visited{color:var(--modal-btn-text);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent-color)}.pro a:hover{color:var(--accent-color);text-decoration:none}.pro .pro-share-buttons{display:flex;flex-wrap:wrap;justify-content:center}.pro #rsvp-atcb{display:flex;flex-wrap:wrap;gap:.3em}.pro-form{border-top:1px solid var(--modal-btn-border);margin-top:1.5em;padding-top:1.5em;text-align:left}.pro-field+.pro-field{padding-top:1.3em}.pro-field-type-label+.pro-field-type-radio{padding-top:0}.pro-field-type-checkbox,.pro-field-type-radio div{align-items:center;display:flex}.pro-field-type-checkbox input,.pro-field-type-radio input{cursor:pointer}.pro-field label{display:block;font-size:.9em;opacity:.7}.pro-field-type-checkbox label,.pro-field-type-radio label{cursor:pointer;opacity:.8;padding-left:.3em}.pro-field input[type=email],.pro-field input[type=number],.pro-field input[type=text]{background-color:var(--input-background);border:1px solid var(--modal-btn-border);border-radius:var(--input-border-radius);box-sizing:border-box;box-shadow:var(--btn-shadow);caret-color:var(--accent-color);color:var(--modal-text);font-size:.9em;opacity:.8;padding:.7em;transition:all .1s ease-in-out;width:100%}.pro-field input[type=checkbox],.pro-field input[type=radio]{accent-color:var(--accent-color);height:1.2rem;opacity:.8;transition:all .1s ease-in-out;width:1.2em}.pro-field input:disabled,.pro-field input:disabled+label{cursor:not-allowed;opacity:.75;filter:brightness(95%)}.pro-field input:not([disabled]):hover{opacity:1}.pro-field input:not([disabled],[type=checkbox],[type=radio]):hover{box-shadow:var(--btn-active-shadow)}.pro-field input[type=email]:focus,.pro-field input[type=number]:focus,.pro-field input[type=text]:focus{box-shadow:var(--btn-active-shadow)}.pro-field input[type=email]:focus-visible,.pro-field input[type=number]:focus-visible,.pro-field input[type=text]:focus-visible{border-color:var(--accent-color);outline:1px solid var(--accent-color)}.pro-field input[type=checkbox]:focus,.pro-field input[type=radio]:focus{outline-color:var(--accent-color);outline-width:2px}#submit-error{color:var(--form-error);display:none;font-weight:700;padding-top:1.5em;text-align:center}.pro-form.form-error #submit-error{display:block}.pro-field input.error{accent-color:var(--form-error);border:2px solid var(--form-error)}.pro-field input.error+label,.pro-field:has(input.error) label{color:var(--form-error);opacity:1}#rsvp-status-group{border-bottom:1px solid var(--modal-btn-border);font-weight:700;margin-bottom:1.5em;padding-bottom:2em;text-align:center}#rsvp-status-group .pro-field{align-items:center;display:flex;flex-wrap:wrap;gap:1.2em;justify-content:center;margin-top:1em}@media (width <= 575px){#rsvp-status-group .pro-field{flex-direction:column}#rsvp-status-group .pro-field div{width:80%}}#rsvp-status-group .pro-field div{min-width:28%;position:relative}#rsvp-status-group input{opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;cursor:pointer}#rsvp-status-group label{align-items:center;background-color:var(--input-background);border-radius:var(--input-border-radius);box-shadow:var(--btn-shadow);color:var(--modal-btn-text);display:flex;flex-direction:column;font-weight:700;text-transform:uppercase;justify-content:center;opacity:.6;padding:.8em;transition:all .1s ease-in-out;width:100%}#rsvp-status-group label.status-confirmed{color:var(--form-success)}#rsvp-status-group label.status-declined{color:var(--form-error)}#rsvp-status-group input:checked+label{background-color:var(--modal-text);box-shadow:var(--btn-hover-shadow);color:var(--status-active-text);opacity:1;transform:scale(1.1)}#rsvp-status-group input:focus-visible+label{outline:2px solid var(--accent-color);outline-offset:2px}#rsvp-status-group input:not([disabled])+label:hover,#rsvp-status-group input:not([disabled]):hover+label{opacity:1;transform:scale(1.08)}#rsvp-status-group input:checked+label.status-confirmed{background-color:var(--form-success)}#rsvp-status-group input:checked+label.status-declined{background-color:var(--form-error)}#rsvp-success-msg,#rsvp-success-msg-demo,#rsvp-success-msg-doi,#rsvp-success-msg-email,#ty-success-msg{color:var(--form-success);display:none;font-weight:700;line-height:1.6em;padding:1.5em 0;text-align:center}#pro-form-submit{background-color:var(--btn-hover-background);display:block;margin:auto;min-width:150px}.pro-waiting{background-color:var(--modal-btn-background);border:1px solid var(--modal-btn-border);border-radius:var(--btn-border-radius);box-sizing:border-box;color:var(--modal-btn-text);cursor:wait;display:none;line-height:.5em;margin:auto;min-width:150px;padding:.5em 1.25em 1.2em;text-align:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:fit-content}@media (width > 575px){#pro-form-submit,.pro-waiting{min-width:200px}}.pro-waiting span:not(.atcb-icon-ical){animation-name:blink;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both;font-size:2.5em}.pro-field label span:not(.atcb-icon-ical){color:var(--form-error);font-weight:700;padding-left:2px}.pro-waiting span:not(.atcb-icon-ical):nth-child(2){animation-delay:.15s}.pro-waiting span:not(.atcb-icon-ical):nth-child(3){animation-delay:.3s}@keyframes blink{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}.pro #rsvp-sent-content{align-items:center;display:flex;flex-direction:column;gap:1.5em}#rsvp-status-group span{color:inherit}.atcb-modal-content .pro p{margin:0}.atcb-modal-content .pro p.pro-pt{margin-top:1.5em}.atcb-modal-content .pro .pro-field p{font-size:.9em}.pro .btn-flex{align-items:center;display:flex}.pro .atcb-modal-btn svg{fill:none;height:1.5em;margin-right:.5em;stroke:currentcolor;width:auto} \ No newline at end of file diff --git a/assets/css/atcb-round.css b/assets/css/atcb-round.css index a66d5956..75085abb 100644 --- a/assets/css/atcb-round.css +++ b/assets/css/atcb-round.css @@ -24,7 +24,7 @@ --base-font-size-m: 16px; --base-font-size-s: 16px; --font: arial, helvetica, sans-serif; - --keyboard-focus: #1e90ff; + --accent-color: #1e90ff; --wrapper-padding: 1px; --btn-background: #f5f5f5; --btn-hover-background: #fff; @@ -61,7 +61,11 @@ --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 70%)); --modal-btn-shadow: rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px; --modal-btn-hover-shadow: rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px; - --modal-input-border-radius: 6px; + --input-border-radius: 6px; + --input-background: #fff; + --status-active-text: #fff; + --form-error: #c5372c; + --form-success: #338a36; --date-btn-text: #1d1d1e; --date-btn-text-secondary: #3a3a3f; --date-btn-cal-day-text: #fff; @@ -112,6 +116,10 @@ --modal-btn-secondary-text: #b8b8b8; --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 90%)); --modal-btn-shadow: rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px; + --input-background: #434246; + --status-active-text: #000; + --form-error: #db8680; + --form-success: #99de9c; --date-btn-text: #ebebf0; --date-btn-text-secondary: #b5b5bd; --date-btn-cal-day-text: #101010; @@ -208,7 +216,7 @@ } .atcb-button:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-button:not([disabled]):focus, @@ -301,7 +309,7 @@ .atcb-rtl .atcb-icon { margin-right: 0; - margin-left: 0.8em; + margin-left: .8em; } .atcb-no-text .atcb-icon { @@ -434,7 +442,7 @@ .atcb-list-item:focus-visible { background-color: var(--list-hover-background); - color: var(--keyboard-focus); + color: var(--accent-color); font-weight: 600; outline: none; } @@ -456,12 +464,12 @@ } .atcb-list-item .atcb-icon { - margin-right: 0.7em; + margin-right: .7em; } .atcb-rtl .atcb-list-item .atcb-icon { margin-right: 0; - margin-left: 0.7em; + margin-left: .7em; } .atcb-no-text .atcb-list-item .atcb-icon { @@ -635,18 +643,29 @@ a.atcb-modal-btn.atcb-modal-btn-border { border: 1px solid var(--modal-btn-border); } -button.atcb-modal-btn:hover, -a.atcb-modal-btn:hover { +button.atcb-modal-btn:focus-visible, +a.atcb-modal-btn:focus-visible { background-color: var(--modal-btn-hover-background); - box-shadow: var(--modal-btn-hover-shadow); - color: var(--modal-btn-hover-text); - text-decoration: none; + outline: 2px solid var(--accent-color); } -button.atcb-modal-btn:focus-visible, -a.atcb-modal-btn:focus-visible { +button.atcb-button:disabled, +button.atcb-subevent-btn:disabled, +button.atcb-modal-btn:disabled, +a.atcb-modal-btn:disabled { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); + border-style: dashed; + box-shadow: none; +} + +button.atcb-modal-btn:not([disabled]):hover, +a.atcb-modal-btn:not([disabled]):hover { background-color: var(--modal-btn-hover-background); - outline: 2px solid var(--keyboard-focus); + box-shadow: var(--modal-btn-hover-shadow); + color: var(--modal-btn-hover-text); + text-decoration: none; } /****************************** @@ -683,7 +702,7 @@ a.atcb-modal-btn:focus-visible { } .atcb-subevent-btn:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-subevent-btn + .atcb-subevent-btn { @@ -920,8 +939,8 @@ a.atcb-modal-btn:focus-visible { * Icon specifics */ -.atcb-icon.atcb-icon-ms365, .atcb-icon.outlookcom { - padding-bottom: .5em; +.atcb-icon.atcb-icon-ms365, .atcb-icon-outlookcom { + padding-bottom: .05em; } .atcb-icon.atcb-icon-apple, .atcb-icon.atcb-icon-ical { @@ -958,3 +977,381 @@ a.atcb-modal-btn:focus-visible { .atcb-icon.atcb-icon-outlookcom svg { filter: var(--icon-filter); } + +/****************************** + * PRO Features + */ + + .rsvp-inline-wrapper { + filter: none; + min-width: 100%; +} + +.rsvp-inline-wrapper .atcb-modal-headline, +.rsvp-inline-wrapper .atcb-modal-content { + background-color: transparent; + border-radius: 0; + box-sizing: border-box; + width: 100%; +} + +.pro { + text-align: center; +} + +.pro ol, +.pro ul { + margin: auto; + text-align: left; + width: fit-content; +} + +.pro a, +.pro a:visited, +.pro a:active { + color: var(--modal-btn-text); + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: var(--accent-color); +} + +.pro a:hover { + color: var(--accent-color); + text-decoration: none; +} + +.pro .pro-share-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.pro #rsvp-atcb { + display: flex; + flex-wrap: wrap; + gap: .4em; +} + +.pro-form { + border-top: 1px solid var(--modal-btn-border); + margin-top: 1.5em; + padding-top: 1.5em; + text-align: left; +} + +.pro-field + .pro-field { + padding-top: 1.3em; +} + +.pro-field-type-label + .pro-field-type-radio { + padding-top: 0; +} + +.pro-field-type-checkbox, +.pro-field-type-radio div { + align-items: center; + display: flex; +} + +.pro-field-type-checkbox input, +.pro-field-type-radio input { + cursor: pointer; +} + +.pro-field label { + display: block; + font-size: .9em; + opacity: .7; +} + +.pro-field-type-checkbox label, +.pro-field-type-radio label { + cursor: pointer; + opacity: .8; + padding-left: .3em; +} + +.pro-field input[type="text"], +.pro-field input[type="email"], +.pro-field input[type="number"] { + background-color: var(--input-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--input-border-radius); + box-sizing: border-box; + caret-color: var(--accent-color); + color: var(--modal-text); + font-size: .9em; + opacity: .8; + padding: .7em; + transition: all .1s ease-in-out; + width: 100%; +} + +.pro-field input[type="checkbox"], +.pro-field input[type="radio"] { + accent-color: var(--accent-color); + height: 1.2rem; + opacity: .8; + transition: all .1s ease-in-out; + width: 1.2em; +} + +.pro-field input:disabled, +.pro-field input:disabled + label { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); +} + +.pro-field input:not([disabled]):hover { + opacity: 1; +} + +.pro-field input[type="text"]:focus, +.pro-field input[type="email"]:focus, +.pro-field input[type="number"]:focus { + border-color: var(--accent-color); + outline: 1px solid var(--accent-color); +} + +.pro-field input[type="checkbox"]:focus, +.pro-field input[type="radio"]:focus { + outline-color: var(--accent-color); + outline-width: 2px; +} + +#submit-error { + color: var(--form-error); + display: none; + font-weight: bold; + padding-top: 1.5em; + text-align: center; +} + +.pro-form.form-error #submit-error { + display: block; +} + +.pro-field input.error { + accent-color: var(--form-error); + border: 2px solid var(--form-error); +} + +.pro-field input.error + label, +.pro-field:has(input.error) label { + color: var(--form-error); + opacity: 1; +} + +#rsvp-status-group { + border-bottom: 1px solid var(--modal-btn-border); + font-weight: bold; + margin-bottom: 1.5em; + padding-bottom: 2em; + text-align: center; +} + +#rsvp-status-group .pro-field { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.2em; + justify-content: center; + margin-top: 1em; +} + +@media (width <= 575px) { + #rsvp-status-group .pro-field { + flex-direction: column; + } + + #rsvp-status-group .pro-field div { + width: 80%; + } +} + +#rsvp-status-group .pro-field div { + min-width: 28%; + position: relative; +} + +#rsvp-status-group input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; +} + +#rsvp-status-group label { + align-items: center; + border: 1px solid var(--modal-btn-text); + border-radius: var(--input-border-radius); + color: var(--modal-btn-text); + display: flex; + flex-direction: column; + font-weight: bold; + text-transform: uppercase; + justify-content: center; + opacity: .6; + padding: .8em; + transition: all .1s ease-in-out; + width: 100%; +} + +#rsvp-status-group label.status-confirmed { + border-color: var(--form-success); + color: var(--form-success); +} + +#rsvp-status-group label.status-declined { + border-color: var(--form-error); + color: var(--form-error); +} + +#rsvp-status-group input:checked + label { + background-color: var(--modal-text); + color: var(--status-active-text); + opacity: 1; + transform: scale(1.1); +} + +#rsvp-status-group input:focus-visible + label { + outline: 2px solid var(--accent-color); + outline-offset: 2px; +} + +#rsvp-status-group input:not([disabled]) + label:hover, +#rsvp-status-group input:not([disabled]):hover + label { + opacity: 1; + transform: scale(1.08); +} + +#rsvp-status-group input:checked + label.status-confirmed { + background-color: var(--form-success); +} + +#rsvp-status-group input:checked + label.status-declined { + background-color: var(--form-error); +} + +#ty-success-msg, +#rsvp-success-msg, +#rsvp-success-msg-email, +#rsvp-success-msg-doi, +#rsvp-success-msg-demo { + color: var(--form-success); + display: none; + font-weight: bold; + line-height: 1.6em; + padding: 1.5em 0; + text-align: center; +} + +#pro-form-submit { + display: block; + margin: auto; + min-width: 150px; +} + +.pro-waiting { + background-color: var(--modal-btn-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--btn-border-radius); + box-sizing: border-box; + color: var(--modal-btn-text); + cursor: wait; + display: none; + line-height: .5em; + margin: auto; + min-width: 150px; + padding: .5em 1.25em 1.2em; + text-align: center; + user-select: none; + -webkit-user-select: none; + -webkit-tap-highlight-color: transparent; + width: fit-content; +} + +@media (width > 575px) { + #pro-form-submit, + .pro-waiting { + min-width: 200px; + } +} + +.pro-waiting span:not(.atcb-icon-ical) { + animation-name: blink; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-fill-mode: both; + font-size: 2.5em; +} + +.pro-field label span:not(.atcb-icon-ical) { + color: var(--form-error); + font-weight: bold; + padding-left: 2px; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(2) { + animation-delay: .15s; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(3) { + animation-delay: .3s; +} + +@keyframes blink { + 0% { + opacity: .2; + } + + 20% { + opacity: 1; + } + + 100% { + opacity: .2; + } +} + +.pro #rsvp-sent-content { + align-items: center; + display: flex; + flex-direction: column; + gap: 1.5em; +} + +/* overrides */ +#rsvp-status-group span { + color: inherit; +} + +.atcb-modal-content .pro p { + margin: 0; +} + +.atcb-modal-content .pro p.pro-pt { + margin-top: 1.5em; +} + +.atcb-modal-content .pro .pro-field p { + font-size: .9em; +} + +.pro .btn-flex { + align-items: center; + display: flex; +} + +.pro .atcb-modal-btn svg { + fill: none; + height: 1.5em; + margin-right: .5em; + stroke: currentcolor; + width: auto; +} diff --git a/assets/css/atcb-round.min.css b/assets/css/atcb-round.min.css index c85495a9..cd977e3c 100644 --- a/assets/css/atcb-round.min.css +++ b/assets/css/atcb-round.min.css @@ -1 +1 @@ -:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--keyboard-focus:#1e90ff;--wrapper-padding:1px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-border:#d2d2d2;--btn-border-radius:500px;--btn-padding-x:1.3em;--btn-padding-y:.65em;--btn-text:#333;--btn-hover-text:#000;--btn-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 15%) 2px 2px 10px -3px;--btn-hover-shadow:rgba(0 0 0 / 35%) 2px 5px 18px -1px,rgba(0 0 0 / 30%) 2px 2px 10px -3px;--btn-active-shadow:rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 45%) 2px 2px 10px -3px;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#333;--list-hover-text:#000;--list-close-background:#e5e5e5;--list-close-text:#777;--list-border-radius:11px;--list-padding:.8em;--list-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 2px 2px 10px -3px;--list-modal-shadow:rgba(0 0 0 / 60%) 3px 6px 40px -5px,rgba(0 0 0 / 60%) 3px 3px 15px -4px;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#d2d2d2;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#666567;--modal-border-radius:9px;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px;--modal-btn-hover-shadow:rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px;--modal-input-border-radius:6px;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(0 0 0 / 40%) 1px 3px 15px -4px,rgba(0 0 0 / 20%) 1px 1px 8px -4px;--date-btn-hover-shadow:rgba(0 0 0 / 40%) 4px 6px 18px -1px,rgba(0 0 0 / 35%) 4px 5px 25px -2px;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:rgba(20 20 20 / 25%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#2e2e2e;--btn-hover-background:#373737;--btn-border:#4d4d4d;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--btn-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--btn-hover-shadow:rgba(255 255 255 / 6%) -12px -5px 23px -8px,rgba(255 255 255 / 7%) -7px -5px 18px -3px,rgba(0 0 0 / 60%) 2px 5px 19px -1px,rgba(0 0 0 / 50%) 3px 3px 22px -3px;--btn-active-shadow:rgba(255 255 255 / 7%) -12px -5px 23px -8px,rgba(255 255 255 / 8%) -7px -5px 18px -3px,rgba(0 0 0 / 70%) 2px 5px 19px -1px,rgba(0 0 0 / 60%) 3px 3px 22px -3px;--list-background:#2e2e2e;--list-hover-background:#373737;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#282828;--list-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--list-modal-shadow:rgba(255 255 255 / 8%) -12px -5px 30px -8px,rgba(255 255 255 / 8%) -7px -5px 15px -3px,rgba(0 0 0 / 60%) 4px 6px 50px -4px,rgba(0 0 0 / 90%) 8px 12px 40px -2px;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(255 255 255 / 10%) -8px -6px 20px,rgba(0 0 0 / 50%) 1px 3px 25px -8px,rgba(0 0 0 / 50%) 1px 1px 10px -3px;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:rgba(20 20 20 / 60%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{align-items:center;background-color:var(--btn-background);border:1px solid var(--btn-border);border-radius:var(--btn-border-radius);box-shadow:var(--btn-shadow);color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.5em;margin:.13em;max-width:350px;padding:var(--btn-padding-y) var(--btn-padding-x);position:relative;text-align:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;z-index:1}.atcb-button.atcb-no-text{min-width:0;border-radius:100%;display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-hover-shadow);color:var(--btn-hover-text);margin:0;padding:calc(var(--btn-padding-y) + .13em) calc(var(--btn-padding-x) + .13em)}.atcb-button.atcb-no-text:focus,.atcb-button.atcb-no-text:hover{height:3.26em;width:3.26em;padding:0}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){z-index:15000000}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-no-text),.atcb-button.atcb-single:not(.atcb-no-text,[disabled]):focus,.atcb-button.atcb-single:not(.atcb-no-text,[disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-active-shadow);color:var(--btn-hover-text);margin:0;padding:calc(var(--btn-padding-y) + .13em) calc(var(--btn-padding-x) + .13em)}.atcb-button.atcb-active.atcb-no-text:not(.atcb-modal-style,.atcb-dropoverlay),.atcb-button.atcb-single.atcb-no-text:not([disabled]):focus,.atcb-button.atcb-single.atcb-no-text:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-active-shadow);color:var(--btn-hover-text);margin:0;padding:calc(var(--btn-padding-y) + .28em) calc(var(--btn-padding-x) + .13em)}.atcb-button.atcb-dropup::after,.atcb-button:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup,.atcb-no-text)::before{content:"";width:0;height:0;position:absolute;left:0;right:0;margin:0 auto;transition:border-width .1s linear .1s}.atcb-button:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup,.atcb-no-text)::before{top:100%;border:0 solid transparent;border-bottom:none;border-top-color:var(--btn-hover-background)}.atcb-button.atcb-dropup::after{bottom:100%;border:0 solid transparent;border-top:none;border-bottom-color:var(--btn-hover-background)}.atcb-button.atcb-active.atcb-dropup::after,.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup,.atcb-no-text)::before{border-width:.35em}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:-15px;height:0;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;position:absolute;z-index:14000090;min-width:12.5em;width:auto}.atcb-list-wrapper:not(.atcb-dropup,.atcb-dropoverlay){animation:list-entrance-bottom .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropup{animation:list-entrance-top .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropoverlay{animation:list-entrance-center .2s ease 0s 1 normal forwards;z-index:15000000}@keyframes list-entrance-bottom{0%{opacity:0;transform:translateY(250px)}100%{opacity:1;transform:translateY(0)}}@keyframes list-entrance-top{0%{opacity:0;transform:translateY(-250px)}100%{opacity:1;transform:translateY(0)}}@keyframes list-entrance-center{0%{opacity:0;transform:scaleY(1)}1%{opacity:1;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}.atcb-list{background-color:var(--list-background);border-radius:var(--list-border-radius);box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--keyboard-focus);font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 var(--list-border-radius) var(--list-border-radius)}.atcb-list-item:first-child{border-radius:var(--list-border-radius) var(--list-border-radius) 0 0}.atcb-list-item:only-child{border-radius:var(--list-border-radius)}.atcb-list.atcb-modal{box-shadow:var(--list-modal-shadow)}.atcb-list-item .atcb-icon{margin-right:.7em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:var(--btn-border-radius);box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn.atcb-modal-btn-border,button.atcb-modal-btn.atcb-modal-btn-border{border:1px solid var(--modal-btn-border)}a.atcb-modal-btn:hover,button.atcb-modal-btn:hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:4px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay) .atcb-checkmark,.atcb-button:focus .atcb-checkmark,.atcb-button:hover .atcb-checkmark{top:-.77em;right:-.37em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon.atcb-icon-ms365,.atcb-icon.outlookcom{padding-bottom:.5em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-trigger{padding-bottom:.2em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)} \ No newline at end of file +:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--accent-color:#1e90ff;--wrapper-padding:1px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-border:#d2d2d2;--btn-border-radius:500px;--btn-padding-x:1.3em;--btn-padding-y:.65em;--btn-text:#333;--btn-hover-text:#000;--btn-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 15%) 2px 2px 10px -3px;--btn-hover-shadow:rgba(0 0 0 / 35%) 2px 5px 18px -1px,rgba(0 0 0 / 30%) 2px 2px 10px -3px;--btn-active-shadow:rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 45%) 2px 2px 10px -3px;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#333;--list-hover-text:#000;--list-close-background:#e5e5e5;--list-close-text:#777;--list-border-radius:11px;--list-padding:.8em;--list-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 2px 2px 10px -3px;--list-modal-shadow:rgba(0 0 0 / 60%) 3px 6px 40px -5px,rgba(0 0 0 / 60%) 3px 3px 15px -4px;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#d2d2d2;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#666567;--modal-border-radius:9px;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px;--modal-btn-hover-shadow:rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px;--input-border-radius:6px;--input-background:#fff;--status-active-text:#fff;--form-error:#c5372c;--form-success:#338a36;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(0 0 0 / 40%) 1px 3px 15px -4px,rgba(0 0 0 / 20%) 1px 1px 8px -4px;--date-btn-hover-shadow:rgba(0 0 0 / 40%) 4px 6px 18px -1px,rgba(0 0 0 / 35%) 4px 5px 25px -2px;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:rgba(20 20 20 / 25%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#2e2e2e;--btn-hover-background:#373737;--btn-border:#4d4d4d;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--btn-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--btn-hover-shadow:rgba(255 255 255 / 6%) -12px -5px 23px -8px,rgba(255 255 255 / 7%) -7px -5px 18px -3px,rgba(0 0 0 / 60%) 2px 5px 19px -1px,rgba(0 0 0 / 50%) 3px 3px 22px -3px;--btn-active-shadow:rgba(255 255 255 / 7%) -12px -5px 23px -8px,rgba(255 255 255 / 8%) -7px -5px 18px -3px,rgba(0 0 0 / 70%) 2px 5px 19px -1px,rgba(0 0 0 / 60%) 3px 3px 22px -3px;--list-background:#2e2e2e;--list-hover-background:#373737;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#282828;--list-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--list-modal-shadow:rgba(255 255 255 / 8%) -12px -5px 30px -8px,rgba(255 255 255 / 8%) -7px -5px 15px -3px,rgba(0 0 0 / 60%) 4px 6px 50px -4px,rgba(0 0 0 / 90%) 8px 12px 40px -2px;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px;--input-background:#434246;--status-active-text:#000;--form-error:#db8680;--form-success:#99de9c;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(255 255 255 / 10%) -8px -6px 20px,rgba(0 0 0 / 50%) 1px 3px 25px -8px,rgba(0 0 0 / 50%) 1px 1px 10px -3px;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:rgba(20 20 20 / 60%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{align-items:center;background-color:var(--btn-background);border:1px solid var(--btn-border);border-radius:var(--btn-border-radius);box-shadow:var(--btn-shadow);color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.5em;margin:.13em;max-width:350px;padding:var(--btn-padding-y) var(--btn-padding-x);position:relative;text-align:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;z-index:1}.atcb-button.atcb-no-text{min-width:0;border-radius:100%;display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--accent-color)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-hover-shadow);color:var(--btn-hover-text);margin:0;padding:calc(var(--btn-padding-y) + .13em) calc(var(--btn-padding-x) + .13em)}.atcb-button.atcb-no-text:focus,.atcb-button.atcb-no-text:hover{height:3.26em;width:3.26em;padding:0}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){z-index:15000000}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-no-text),.atcb-button.atcb-single:not(.atcb-no-text,[disabled]):focus,.atcb-button.atcb-single:not(.atcb-no-text,[disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-active-shadow);color:var(--btn-hover-text);margin:0;padding:calc(var(--btn-padding-y) + .13em) calc(var(--btn-padding-x) + .13em)}.atcb-button.atcb-active.atcb-no-text:not(.atcb-modal-style,.atcb-dropoverlay),.atcb-button.atcb-single.atcb-no-text:not([disabled]):focus,.atcb-button.atcb-single.atcb-no-text:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-active-shadow);color:var(--btn-hover-text);margin:0;padding:calc(var(--btn-padding-y) + .28em) calc(var(--btn-padding-x) + .13em)}.atcb-button.atcb-dropup::after,.atcb-button:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup,.atcb-no-text)::before{content:"";width:0;height:0;position:absolute;left:0;right:0;margin:0 auto;transition:border-width .1s linear .1s}.atcb-button:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup,.atcb-no-text)::before{top:100%;border:0 solid transparent;border-bottom:none;border-top-color:var(--btn-hover-background)}.atcb-button.atcb-dropup::after{bottom:100%;border:0 solid transparent;border-top:none;border-bottom-color:var(--btn-hover-background)}.atcb-button.atcb-active.atcb-dropup::after,.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup,.atcb-no-text)::before{border-width:.35em}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:-15px;height:0;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;position:absolute;z-index:14000090;min-width:12.5em;width:auto}.atcb-list-wrapper:not(.atcb-dropup,.atcb-dropoverlay){animation:list-entrance-bottom .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropup{animation:list-entrance-top .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropoverlay{animation:list-entrance-center .2s ease 0s 1 normal forwards;z-index:15000000}@keyframes list-entrance-bottom{0%{opacity:0;transform:translateY(250px)}100%{opacity:1;transform:translateY(0)}}@keyframes list-entrance-top{0%{opacity:0;transform:translateY(-250px)}100%{opacity:1;transform:translateY(0)}}@keyframes list-entrance-center{0%{opacity:0;transform:scaleY(1)}1%{opacity:1;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}.atcb-list{background-color:var(--list-background);border-radius:var(--list-border-radius);box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--accent-color);font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 var(--list-border-radius) var(--list-border-radius)}.atcb-list-item:first-child{border-radius:var(--list-border-radius) var(--list-border-radius) 0 0}.atcb-list-item:only-child{border-radius:var(--list-border-radius)}.atcb-list.atcb-modal{box-shadow:var(--list-modal-shadow)}.atcb-list-item .atcb-icon{margin-right:.7em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:var(--btn-border-radius);box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn.atcb-modal-btn-border,button.atcb-modal-btn.atcb-modal-btn-border{border:1px solid var(--modal-btn-border)}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--accent-color)}a.atcb-modal-btn:disabled,button.atcb-button:disabled,button.atcb-modal-btn:disabled,button.atcb-subevent-btn:disabled{cursor:not-allowed;opacity:.75;filter:brightness(95%);border-style:dashed;box-shadow:none}a.atcb-modal-btn:not([disabled]):hover,button.atcb-modal-btn:not([disabled]):hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:4px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--accent-color)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay) .atcb-checkmark,.atcb-button:focus .atcb-checkmark,.atcb-button:hover .atcb-checkmark{top:-.77em;right:-.37em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon-outlookcom,.atcb-icon.atcb-icon-ms365{padding-bottom:.05em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-trigger{padding-bottom:.2em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)}.rsvp-inline-wrapper{filter:none;min-width:100%}.rsvp-inline-wrapper .atcb-modal-content,.rsvp-inline-wrapper .atcb-modal-headline{background-color:transparent;border-radius:0;box-sizing:border-box;width:100%}.pro{text-align:center}.pro ol,.pro ul{margin:auto;text-align:left;width:fit-content}.pro a,.pro a:active,.pro a:visited{color:var(--modal-btn-text);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent-color)}.pro a:hover{color:var(--accent-color);text-decoration:none}.pro .pro-share-buttons{display:flex;flex-wrap:wrap;justify-content:center}.pro #rsvp-atcb{display:flex;flex-wrap:wrap;gap:.3em}.pro-form{border-top:1px solid var(--modal-btn-border);margin-top:1.5em;padding-top:1.5em;text-align:left}.pro-field+.pro-field{padding-top:1.3em}.pro-field-type-label+.pro-field-type-radio{padding-top:0}.pro-field-type-checkbox,.pro-field-type-radio div{align-items:center;display:flex}.pro-field-type-checkbox input,.pro-field-type-radio input{cursor:pointer}.pro-field label{display:block;font-size:.9em;opacity:.7}.pro-field-type-checkbox label,.pro-field-type-radio label{cursor:pointer;opacity:.8;padding-left:.3em}.pro-field input[type=email],.pro-field input[type=number],.pro-field input[type=text]{background-color:var(--input-background);border:1px solid var(--modal-btn-border);border-radius:var(--input-border-radius);box-sizing:border-box;caret-color:var(--accent-color);color:var(--modal-text);font-size:.9em;opacity:.8;padding:.7em;transition:all .1s ease-in-out;width:100%}.pro-field input[type=checkbox],.pro-field input[type=radio]{accent-color:var(--accent-color);height:1.2rem;opacity:.8;transition:all .1s ease-in-out;width:1.2em}.pro-field input:disabled,.pro-field input:disabled+label{cursor:not-allowed;opacity:.75;filter:brightness(95%)}.pro-field input:not([disabled]):hover{opacity:1}.pro-field input[type=email]:focus,.pro-field input[type=number]:focus,.pro-field input[type=text]:focus{border-color:var(--accent-color);outline:1px solid var(--accent-color)}.pro-field input[type=checkbox]:focus,.pro-field input[type=radio]:focus{outline-color:var(--accent-color);outline-width:2px}#submit-error{color:var(--form-error);display:none;font-weight:700;padding-top:1.5em;text-align:center}.pro-form.form-error #submit-error{display:block}.pro-field input.error{accent-color:var(--form-error);border:2px solid var(--form-error)}.pro-field input.error+label,.pro-field:has(input.error) label{color:var(--form-error);opacity:1}#rsvp-status-group{border-bottom:1px solid var(--modal-btn-border);font-weight:700;margin-bottom:1.5em;padding-bottom:2em;text-align:center}#rsvp-status-group .pro-field{align-items:center;display:flex;flex-wrap:wrap;gap:1.2em;justify-content:center;margin-top:1em}@media (width <= 575px){#rsvp-status-group .pro-field{flex-direction:column}#rsvp-status-group .pro-field div{width:80%}}#rsvp-status-group .pro-field div{min-width:28%;position:relative}#rsvp-status-group input{opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;cursor:pointer}#rsvp-status-group label{align-items:center;border:1px solid var(--modal-btn-text);border-radius:var(--input-border-radius);color:var(--modal-btn-text);display:flex;flex-direction:column;font-weight:700;text-transform:uppercase;justify-content:center;opacity:.6;padding:.8em;transition:all .1s ease-in-out;width:100%}#rsvp-status-group label.status-confirmed{border-color:var(--form-success);color:var(--form-success)}#rsvp-status-group label.status-declined{border-color:var(--form-error);color:var(--form-error)}#rsvp-status-group input:checked+label{background-color:var(--modal-text);color:var(--status-active-text);opacity:1;transform:scale(1.1)}#rsvp-status-group input:focus-visible+label{outline:2px solid var(--accent-color);outline-offset:2px}#rsvp-status-group input:not([disabled])+label:hover,#rsvp-status-group input:not([disabled]):hover+label{opacity:1;transform:scale(1.08)}#rsvp-status-group input:checked+label.status-confirmed{background-color:var(--form-success)}#rsvp-status-group input:checked+label.status-declined{background-color:var(--form-error)}#rsvp-success-msg,#rsvp-success-msg-demo,#rsvp-success-msg-doi,#rsvp-success-msg-email,#ty-success-msg{color:var(--form-success);display:none;font-weight:700;line-height:1.6em;padding:1.5em 0;text-align:center}#pro-form-submit{display:block;margin:auto;min-width:150px}.pro-waiting{background-color:var(--modal-btn-background);border:1px solid var(--modal-btn-border);border-radius:var(--btn-border-radius);box-sizing:border-box;color:var(--modal-btn-text);cursor:wait;display:none;line-height:.5em;margin:auto;min-width:150px;padding:.5em 1.25em 1.2em;text-align:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:fit-content}@media (width > 575px){#pro-form-submit,.pro-waiting{min-width:200px}}.pro-waiting span:not(.atcb-icon-ical){animation-name:blink;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both;font-size:2.5em}.pro-field label span:not(.atcb-icon-ical){color:var(--form-error);font-weight:700;padding-left:2px}.pro-waiting span:not(.atcb-icon-ical):nth-child(2){animation-delay:.15s}.pro-waiting span:not(.atcb-icon-ical):nth-child(3){animation-delay:.3s}@keyframes blink{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}.pro #rsvp-sent-content{align-items:center;display:flex;flex-direction:column;gap:1.5em}#rsvp-status-group span{color:inherit}.atcb-modal-content .pro p{margin:0}.atcb-modal-content .pro p.pro-pt{margin-top:1.5em}.atcb-modal-content .pro .pro-field p{font-size:.9em}.pro .btn-flex{align-items:center;display:flex}.pro .atcb-modal-btn svg{fill:none;height:1.5em;margin-right:.5em;stroke:currentcolor;width:auto} \ No newline at end of file diff --git a/assets/css/atcb-text.css b/assets/css/atcb-text.css index 14d611ff..eaacb863 100644 --- a/assets/css/atcb-text.css +++ b/assets/css/atcb-text.css @@ -24,7 +24,7 @@ --base-font-size-m: 16px; --base-font-size-s: 16px; --font: arial, helvetica, sans-serif; - --keyboard-focus: #1e90ff; + --accent-color: #1e90ff; --wrapper-padding: 0px; --btn-underline: #a9ceff; --btn-border: #a8a8a8; @@ -59,7 +59,11 @@ --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 70%)); --modal-btn-shadow: rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px; --modal-btn-hover-shadow: rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px; - --modal-input-border-radius: 6px; + --input-border-radius: 6px; + --input-background: #fff; + --status-active-text: #fff; + --form-error: #c5372c; + --form-success: #338a36; --date-btn-text: #1d1d1e; --date-btn-text-secondary: #3a3a3f; --date-btn-cal-day-text: #fff; @@ -109,6 +113,10 @@ --modal-btn-secondary-text: #b8b8b8; --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 90%)); --modal-btn-shadow: rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px; + --input-background: #434246; + --status-active-text: #000; + --form-error: #db8680; + --form-success: #99de9c; --date-btn-text: #ebebf0; --date-btn-text-secondary: #b5b5bd; --date-btn-cal-day-text: #101010; @@ -211,7 +219,7 @@ } .atcb-button:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-button:not([disabled]):focus, @@ -434,7 +442,7 @@ .atcb-list-item:focus-visible { background-color: var(--list-hover-background); - color: var(--keyboard-focus); + color: var(--accent-color); font-weight: 600; outline: none; } @@ -637,18 +645,29 @@ a.atcb-modal-btn.atcb-modal-btn-border { border: 1px solid var(--modal-btn-border); } -button.atcb-modal-btn:hover, -a.atcb-modal-btn:hover { +button.atcb-modal-btn:focus-visible, +a.atcb-modal-btn:focus-visible{ background-color: var(--modal-btn-hover-background); - box-shadow: var(--modal-btn-hover-shadow); - color: var(--modal-btn-hover-text); - text-decoration: none; + outline: 2px solid var(--accent-color); } -button.atcb-modal-btn:focus-visible, -a.atcb-modal-btn:focus-visible{ +button.atcb-button:disabled, +button.atcb-subevent-btn:disabled, +button.atcb-modal-btn:disabled, +a.atcb-modal-btn:disabled { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); + border-style: dashed; + box-shadow: none; +} + +button.atcb-modal-btn:not([disabled]):hover, +a.atcb-modal-btn:not([disabled]):hover { background-color: var(--modal-btn-hover-background); - outline: 2px solid var(--keyboard-focus); + box-shadow: var(--modal-btn-hover-shadow); + color: var(--modal-btn-hover-text); + text-decoration: none; } /****************************** @@ -685,7 +704,7 @@ a.atcb-modal-btn:focus-visible{ } .atcb-subevent-btn:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-subevent-btn + .atcb-subevent-btn { @@ -915,8 +934,8 @@ a.atcb-modal-btn:focus-visible{ * Icon specifics */ -.atcb-icon.atcb-icon-ms365, .atcb-icon.outlookcom { - padding-bottom: .5em; +.atcb-icon.atcb-icon-ms365, .atcb-icon-outlookcom { + padding-bottom: .05em; } .atcb-icon.atcb-icon-apple, .atcb-icon.atcb-icon-ical { @@ -949,3 +968,381 @@ a.atcb-modal-btn:focus-visible{ .atcb-icon.atcb-icon-outlookcom svg { filter: var(--icon-filter); } + +/****************************** + * PRO Features + */ + + .rsvp-inline-wrapper { + filter: none; + min-width: 100%; +} + +.rsvp-inline-wrapper .atcb-modal-headline, +.rsvp-inline-wrapper .atcb-modal-content { + background-color: transparent; + border-radius: 0; + box-sizing: border-box; + width: 100%; +} + +.pro { + text-align: center; +} + +.pro ol, +.pro ul { + margin: auto; + text-align: left; + width: fit-content; +} + +.pro a, +.pro a:visited, +.pro a:active { + color: var(--modal-btn-text); + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: var(--accent-color); +} + +.pro a:hover { + color: var(--accent-color); + text-decoration: none; +} + +.pro .pro-share-buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.pro #rsvp-atcb { + display: flex; + flex-wrap: wrap; + gap: .4em; +} + +.pro-form { + border-top: 1px solid var(--modal-btn-border); + margin-top: 1.5em; + padding-top: 1.5em; + text-align: left; +} + +.pro-field + .pro-field { + padding-top: 1.3em; +} + +.pro-field-type-label + .pro-field-type-radio { + padding-top: 0; +} + +.pro-field-type-checkbox, +.pro-field-type-radio div { + align-items: center; + display: flex; +} + +.pro-field-type-checkbox input, +.pro-field-type-radio input { + cursor: pointer; +} + +.pro-field label { + display: block; + font-size: .9em; + opacity: .7; +} + +.pro-field-type-checkbox label, +.pro-field-type-radio label { + cursor: pointer; + opacity: .8; + padding-left: .3em; +} + +.pro-field input[type="text"], +.pro-field input[type="email"], +.pro-field input[type="number"] { + background-color: var(--input-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--input-border-radius); + box-sizing: border-box; + caret-color: var(--accent-color); + color: var(--modal-text); + font-size: .9em; + opacity: .8; + padding: .7em; + transition: all .1s ease-in-out; + width: 100%; +} + +.pro-field input[type="checkbox"], +.pro-field input[type="radio"] { + accent-color: var(--accent-color); + height: 1.2rem; + opacity: .8; + transition: all .1s ease-in-out; + width: 1.2em; +} + +.pro-field input:disabled, +.pro-field input:disabled + label { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); +} + +.pro-field input:not([disabled]):hover { + opacity: 1; +} + +.pro-field input[type="text"]:focus, +.pro-field input[type="email"]:focus, +.pro-field input[type="number"]:focus { + border-color: var(--accent-color); + outline: 1px solid var(--accent-color); +} + +.pro-field input[type="checkbox"]:focus, +.pro-field input[type="radio"]:focus { + outline-color: var(--accent-color); + outline-width: 2px; +} + +#submit-error { + color: var(--form-error); + display: none; + font-weight: bold; + padding-top: 1.5em; + text-align: center; +} + +.pro-form.form-error #submit-error { + display: block; +} + +.pro-field input.error { + accent-color: var(--form-error); + border: 2px solid var(--form-error); +} + +.pro-field input.error + label, +.pro-field:has(input.error) label { + color: var(--form-error); + opacity: 1; +} + +#rsvp-status-group { + border-bottom: 1px solid var(--modal-btn-border); + font-weight: bold; + margin-bottom: 1.5em; + padding-bottom: 2em; + text-align: center; +} + +#rsvp-status-group .pro-field { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.2em; + justify-content: center; + margin-top: 1em; +} + +@media (width <= 575px) { + #rsvp-status-group .pro-field { + flex-direction: column; + } + + #rsvp-status-group .pro-field div { + width: 80%; + } +} + +#rsvp-status-group .pro-field div { + min-width: 28%; + position: relative; +} + +#rsvp-status-group input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; +} + +#rsvp-status-group label { + align-items: center; + border: 1px solid var(--modal-btn-text); + border-radius: var(--input-border-radius); + color: var(--modal-btn-text); + display: flex; + flex-direction: column; + font-weight: bold; + text-transform: uppercase; + justify-content: center; + opacity: .6; + padding: .8em; + transition: all .1s ease-in-out; + width: 100%; +} + +#rsvp-status-group label.status-confirmed { + border-color: var(--form-success); + color: var(--form-success); +} + +#rsvp-status-group label.status-declined { + border-color: var(--form-error); + color: var(--form-error); +} + +#rsvp-status-group input:checked + label { + background-color: var(--modal-text); + color: var(--status-active-text); + opacity: 1; + transform: scale(1.1); +} + +#rsvp-status-group input:focus-visible + label { + outline: 2px solid var(--accent-color); + outline-offset: 2px; +} + +#rsvp-status-group input:not([disabled]) + label:hover, +#rsvp-status-group input:not([disabled]):hover + label { + opacity: 1; + transform: scale(1.08); +} + +#rsvp-status-group input:checked + label.status-confirmed { + background-color: var(--form-success); +} + +#rsvp-status-group input:checked + label.status-declined { + background-color: var(--form-error); +} + +#ty-success-msg, +#rsvp-success-msg, +#rsvp-success-msg-email, +#rsvp-success-msg-doi, +#rsvp-success-msg-demo { + color: var(--form-success); + display: none; + font-weight: bold; + line-height: 1.6em; + padding: 1.5em 0; + text-align: center; +} + +#pro-form-submit { + display: block; + margin: auto; + min-width: 150px; +} + +.pro-waiting { + background-color: var(--modal-btn-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--btn-border-radius); + box-sizing: border-box; + color: var(--modal-btn-text); + cursor: wait; + display: none; + line-height: .5em; + margin: auto; + min-width: 150px; + padding: .5em 1.25em 1.2em; + text-align: center; + user-select: none; + -webkit-user-select: none; + -webkit-tap-highlight-color: transparent; + width: fit-content; +} + +@media (width > 575px) { + #pro-form-submit, + .pro-waiting { + min-width: 200px; + } +} + +.pro-waiting span:not(.atcb-icon-ical) { + animation-name: blink; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-fill-mode: both; + font-size: 2.5em; +} + +.pro-field label span:not(.atcb-icon-ical) { + color: var(--form-error); + font-weight: bold; + padding-left: 2px; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(2) { + animation-delay: .15s; +} + +.pro-waiting span:not(.atcb-icon-ical):nth-child(3) { + animation-delay: .3s; +} + +@keyframes blink { + 0% { + opacity: .2; + } + + 20% { + opacity: 1; + } + + 100% { + opacity: .2; + } +} + +.pro #rsvp-sent-content { + align-items: center; + display: flex; + flex-direction: column; + gap: 1.5em; +} + +/* overrides */ +#rsvp-status-group span { + color: inherit; +} + +.atcb-modal-content .pro p { + margin: 0; +} + +.atcb-modal-content .pro p.pro-pt { + margin-top: 1.5em; +} + +.atcb-modal-content .pro .pro-field p { + font-size: .9em; +} + +.pro .btn-flex { + align-items: center; + display: flex; +} + +.pro .atcb-modal-btn svg { + fill: none; + height: 1.5em; + margin-right: .5em; + stroke: currentcolor; + width: auto; +} diff --git a/assets/css/atcb-text.min.css b/assets/css/atcb-text.min.css index 28a7e39d..e3ebd849 100644 --- a/assets/css/atcb-text.min.css +++ b/assets/css/atcb-text.min.css @@ -1 +1 @@ -:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--keyboard-focus:#1e90ff;--wrapper-padding:0px;--btn-underline:#a9ceff;--btn-border:#a8a8a8;--btn-padding-x:.75em;--btn-padding-y:.75em;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-text:#333;--btn-hover-text:#000;--btn-text-shadow:#fff;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#333;--list-hover-text:#000;--list-close-background:#e5e5e5;--list-close-text:#777;--list-border-radius:11px;--list-padding:.9em;--list-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 2px 2px 10px -3px;--list-modal-shadow:rgba(0 0 0 / 60%) 3px 6px 40px -5px,rgba(0 0 0 / 60%) 3px 3px 15px -4px;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#a8a8a8;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#666567;--modal-border-radius:9px;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px;--modal-btn-hover-shadow:rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px;--modal-input-border-radius:6px;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(0 0 0 / 40%) 1px 3px 15px -4px,rgba(0 0 0 / 20%) 1px 1px 8px -4px;--date-btn-hover-shadow:rgba(0 0 0 / 40%) 4px 6px 18px -1px,rgba(0 0 0 / 35%) 4px 5px 25px -2px;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:rgba(200 200 200 / 25%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-underline:#336db9;--btn-border:#888;--btn-background:#2e2e2e;--btn-hover-background:#373737;--btn-text:#dedede;--btn-hover-text:#fff;--btn-text-shadow:#000;--list-background:#2e2e2e;--list-hover-background:#373737;--list-text:#dedede;--list-hover-text:#fff;--list-close-background:#282828;--list-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--list-modal-shadow:rgba(255 255 255 / 8%) -12px -5px 30px -8px,rgba(255 255 255 / 8%) -7px -5px 15px -3px,rgba(0 0 0 / 60%) 4px 6px 50px -4px,rgba(0 0 0 / 90%) 8px 12px 40px -2px;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(255 255 255 / 10%) -8px -6px 20px,rgba(0 0 0 / 50%) 1px 3px 25px -8px,rgba(0 0 0 / 50%) 1px 1px 10px -3px;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:rgba(20 20 20 / 60%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(0.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{background-image:linear-gradient(120deg,var(--btn-underline) 0,var(--btn-underline) 100%);background-repeat:no-repeat;background-size:100% 10%;background-position:0 100%;background-color:transparent;border:0;border-radius:0;transition:background-size .1s ease-in,border-radius .2s ease-in;align-items:center;color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.2em;margin:0 .2em;padding:var(--btn-padding-y) var(--btn-padding-x);position:relative;text-align:left;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;z-index:1}.atcb-button.atcb-no-text{min-width:0;display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-size:100% 100%;color:var(--btn-hover-text);text-shadow:0 0 .7em var(--btn-text-shadow);border-radius:21px}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){z-index:15000000}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay),.atcb-button.atcb-single:not([disabled]):focus,.atcb-button.atcb-single:not([disabled]):hover{background-size:100% 10%;border-radius:3px 3px 11px 11px;background-position:0 0;background-color:var(--btn-background);color:var(--btn-text);text-shadow:none}.atcb-button.atcb-active.atcb-dropup{background-position:0 100%;border-radius:11px 11px 3px 3px}.atcb-button.atcb-dropup::after,.atcb-button:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup)::before{content:"";width:0;height:0;position:absolute;left:0;right:0;margin:0 auto;transition:border-width .1s linear .1s}.atcb-button:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup)::before{top:100%;border:0 solid transparent;border-bottom:none;border-top-color:var(--btn-background)}.atcb-button.atcb-dropup::after{bottom:100%;border:0 solid transparent;border-top:none;border-bottom-color:var(--btn-background)}.atcb-button.atcb-active.atcb-dropup::after,.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup)::before{border-width:.35em}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:.9em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:1em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-icon-trigger svg{display:none}.atcb-button .atcb-icon-trigger::after{content:"+";font-size:1.5em}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:-15px;height:0;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;position:absolute;z-index:14000090;min-width:12.5em;width:auto}.atcb-list-wrapper:not(.atcb-dropup,.atcb-dropoverlay){animation:list-entrance-bottom .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropup{animation:list-entrance-top .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropoverlay{animation:list-entrance-center .2s ease 0s 1 normal forwards;z-index:15000000}@keyframes list-entrance-bottom{0%{opacity:0;transform:translateY(250px)}100%{opacity:1;transform:translateY(0)}}@keyframes list-entrance-top{0%{opacity:0;transform:translateY(-250px)}100%{opacity:1;transform:translateY(0)}}@keyframes list-entrance-center{0%{opacity:0;transform:scaleY(1)}1%{opacity:1;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}.atcb-list{background-color:var(--list-background);border-radius:var(--list-border-radius);box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--keyboard-focus);font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 var(--list-border-radius) var(--list-border-radius)}.atcb-list-item:first-child{border-radius:var(--list-border-radius) var(--list-border-radius) 0 0}.atcb-list-item:only-child{border-radius:var(--list-border-radius)}.atcb-list.atcb-modal{box-shadow:var(--list-modal-shadow)}.atcb-list-item .atcb-icon{height:1em;margin-right:.7em;width:1em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:21px;box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn.atcb-modal-btn-border,button.atcb-modal-btn.atcb-modal-btn-border{border:1px solid var(--modal-btn-border)}a.atcb-modal-btn:hover,button.atcb-modal-btn:hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:4px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon.atcb-icon-ms365,.atcb-icon.outlookcom{padding-bottom:.5em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)} \ No newline at end of file +:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--accent-color:#1e90ff;--wrapper-padding:0px;--btn-underline:#a9ceff;--btn-border:#a8a8a8;--btn-padding-x:.75em;--btn-padding-y:.75em;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-text:#333;--btn-hover-text:#000;--btn-text-shadow:#fff;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#333;--list-hover-text:#000;--list-close-background:#e5e5e5;--list-close-text:#777;--list-border-radius:11px;--list-padding:.9em;--list-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 2px 2px 10px -3px;--list-modal-shadow:rgba(0 0 0 / 60%) 3px 6px 40px -5px,rgba(0 0 0 / 60%) 3px 3px 15px -4px;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#a8a8a8;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#666567;--modal-border-radius:9px;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px;--modal-btn-hover-shadow:rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px;--input-border-radius:6px;--input-background:#fff;--status-active-text:#fff;--form-error:#c5372c;--form-success:#338a36;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(0 0 0 / 40%) 1px 3px 15px -4px,rgba(0 0 0 / 20%) 1px 1px 8px -4px;--date-btn-hover-shadow:rgba(0 0 0 / 40%) 4px 6px 18px -1px,rgba(0 0 0 / 35%) 4px 5px 25px -2px;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:rgba(200 200 200 / 25%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-underline:#336db9;--btn-border:#888;--btn-background:#2e2e2e;--btn-hover-background:#373737;--btn-text:#dedede;--btn-hover-text:#fff;--btn-text-shadow:#000;--list-background:#2e2e2e;--list-hover-background:#373737;--list-text:#dedede;--list-hover-text:#fff;--list-close-background:#282828;--list-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--list-modal-shadow:rgba(255 255 255 / 8%) -12px -5px 30px -8px,rgba(255 255 255 / 8%) -7px -5px 15px -3px,rgba(0 0 0 / 60%) 4px 6px 50px -4px,rgba(0 0 0 / 90%) 8px 12px 40px -2px;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px;--input-background:#434246;--status-active-text:#000;--form-error:#db8680;--form-success:#99de9c;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(255 255 255 / 10%) -8px -6px 20px,rgba(0 0 0 / 50%) 1px 3px 25px -8px,rgba(0 0 0 / 50%) 1px 1px 10px -3px;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:rgba(20 20 20 / 60%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(0.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{background-image:linear-gradient(120deg,var(--btn-underline) 0,var(--btn-underline) 100%);background-repeat:no-repeat;background-size:100% 10%;background-position:0 100%;background-color:transparent;border:0;border-radius:0;transition:background-size .1s ease-in,border-radius .2s ease-in;align-items:center;color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.2em;margin:0 .2em;padding:var(--btn-padding-y) var(--btn-padding-x);position:relative;text-align:left;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;z-index:1}.atcb-button.atcb-no-text{min-width:0;display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--accent-color)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-size:100% 100%;color:var(--btn-hover-text);text-shadow:0 0 .7em var(--btn-text-shadow);border-radius:21px}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){z-index:15000000}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay),.atcb-button.atcb-single:not([disabled]):focus,.atcb-button.atcb-single:not([disabled]):hover{background-size:100% 10%;border-radius:3px 3px 11px 11px;background-position:0 0;background-color:var(--btn-background);color:var(--btn-text);text-shadow:none}.atcb-button.atcb-active.atcb-dropup{background-position:0 100%;border-radius:11px 11px 3px 3px}.atcb-button.atcb-dropup::after,.atcb-button:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup)::before{content:"";width:0;height:0;position:absolute;left:0;right:0;margin:0 auto;transition:border-width .1s linear .1s}.atcb-button:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup)::before{top:100%;border:0 solid transparent;border-bottom:none;border-top-color:var(--btn-background)}.atcb-button.atcb-dropup::after{bottom:100%;border:0 solid transparent;border-top:none;border-bottom-color:var(--btn-background)}.atcb-button.atcb-active.atcb-dropup::after,.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay,.atcb-dropup)::before{border-width:.35em}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:.9em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:1em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-icon-trigger svg{display:none}.atcb-button .atcb-icon-trigger::after{content:"+";font-size:1.5em}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:-15px;height:0;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;position:absolute;z-index:14000090;min-width:12.5em;width:auto}.atcb-list-wrapper:not(.atcb-dropup,.atcb-dropoverlay){animation:list-entrance-bottom .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropup{animation:list-entrance-top .2s ease 0s 1 normal forwards}.atcb-list-wrapper.atcb-dropoverlay{animation:list-entrance-center .2s ease 0s 1 normal forwards;z-index:15000000}@keyframes list-entrance-bottom{0%{opacity:0;transform:translateY(250px)}100%{opacity:1;transform:translateY(0)}}@keyframes list-entrance-top{0%{opacity:0;transform:translateY(-250px)}100%{opacity:1;transform:translateY(0)}}@keyframes list-entrance-center{0%{opacity:0;transform:scaleY(1)}1%{opacity:1;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}.atcb-list{background-color:var(--list-background);border-radius:var(--list-border-radius);box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--accent-color);font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 var(--list-border-radius) var(--list-border-radius)}.atcb-list-item:first-child{border-radius:var(--list-border-radius) var(--list-border-radius) 0 0}.atcb-list-item:only-child{border-radius:var(--list-border-radius)}.atcb-list.atcb-modal{box-shadow:var(--list-modal-shadow)}.atcb-list-item .atcb-icon{height:1em;margin-right:.7em;width:1em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:21px;box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn.atcb-modal-btn-border,button.atcb-modal-btn.atcb-modal-btn-border{border:1px solid var(--modal-btn-border)}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--accent-color)}a.atcb-modal-btn:disabled,button.atcb-button:disabled,button.atcb-modal-btn:disabled,button.atcb-subevent-btn:disabled{cursor:not-allowed;opacity:.75;filter:brightness(95%);border-style:dashed;box-shadow:none}a.atcb-modal-btn:not([disabled]):hover,button.atcb-modal-btn:not([disabled]):hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:4px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--accent-color)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon-outlookcom,.atcb-icon.atcb-icon-ms365{padding-bottom:.05em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)}.rsvp-inline-wrapper{filter:none;min-width:100%}.rsvp-inline-wrapper .atcb-modal-content,.rsvp-inline-wrapper .atcb-modal-headline{background-color:transparent;border-radius:0;box-sizing:border-box;width:100%}.pro{text-align:center}.pro ol,.pro ul{margin:auto;text-align:left;width:fit-content}.pro a,.pro a:active,.pro a:visited{color:var(--modal-btn-text);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent-color)}.pro a:hover{color:var(--accent-color);text-decoration:none}.pro .pro-share-buttons{display:flex;flex-wrap:wrap;justify-content:center}.pro #rsvp-atcb{display:flex;flex-wrap:wrap;gap:.3em}.pro-form{border-top:1px solid var(--modal-btn-border);margin-top:1.5em;padding-top:1.5em;text-align:left}.pro-field+.pro-field{padding-top:1.3em}.pro-field-type-label+.pro-field-type-radio{padding-top:0}.pro-field-type-checkbox,.pro-field-type-radio div{align-items:center;display:flex}.pro-field-type-checkbox input,.pro-field-type-radio input{cursor:pointer}.pro-field label{display:block;font-size:.9em;opacity:.7}.pro-field-type-checkbox label,.pro-field-type-radio label{cursor:pointer;opacity:.8;padding-left:.3em}.pro-field input[type=email],.pro-field input[type=number],.pro-field input[type=text]{background-color:var(--input-background);border:1px solid var(--modal-btn-border);border-radius:var(--input-border-radius);box-sizing:border-box;caret-color:var(--accent-color);color:var(--modal-text);font-size:.9em;opacity:.8;padding:.7em;transition:all .1s ease-in-out;width:100%}.pro-field input[type=checkbox],.pro-field input[type=radio]{accent-color:var(--accent-color);height:1.2rem;opacity:.8;transition:all .1s ease-in-out;width:1.2em}.pro-field input:disabled,.pro-field input:disabled+label{cursor:not-allowed;opacity:.75;filter:brightness(95%)}.pro-field input:not([disabled]):hover{opacity:1}.pro-field input[type=email]:focus,.pro-field input[type=number]:focus,.pro-field input[type=text]:focus{border-color:var(--accent-color);outline:1px solid var(--accent-color)}.pro-field input[type=checkbox]:focus,.pro-field input[type=radio]:focus{outline-color:var(--accent-color);outline-width:2px}#submit-error{color:var(--form-error);display:none;font-weight:700;padding-top:1.5em;text-align:center}.pro-form.form-error #submit-error{display:block}.pro-field input.error{accent-color:var(--form-error);border:2px solid var(--form-error)}.pro-field input.error+label,.pro-field:has(input.error) label{color:var(--form-error);opacity:1}#rsvp-status-group{border-bottom:1px solid var(--modal-btn-border);font-weight:700;margin-bottom:1.5em;padding-bottom:2em;text-align:center}#rsvp-status-group .pro-field{align-items:center;display:flex;flex-wrap:wrap;gap:1.2em;justify-content:center;margin-top:1em}@media (width <= 575px){#rsvp-status-group .pro-field{flex-direction:column}#rsvp-status-group .pro-field div{width:80%}}#rsvp-status-group .pro-field div{min-width:28%;position:relative}#rsvp-status-group input{opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;cursor:pointer}#rsvp-status-group label{align-items:center;border:1px solid var(--modal-btn-text);border-radius:var(--input-border-radius);color:var(--modal-btn-text);display:flex;flex-direction:column;font-weight:700;text-transform:uppercase;justify-content:center;opacity:.6;padding:.8em;transition:all .1s ease-in-out;width:100%}#rsvp-status-group label.status-confirmed{border-color:var(--form-success);color:var(--form-success)}#rsvp-status-group label.status-declined{border-color:var(--form-error);color:var(--form-error)}#rsvp-status-group input:checked+label{background-color:var(--modal-text);color:var(--status-active-text);opacity:1;transform:scale(1.1)}#rsvp-status-group input:focus-visible+label{outline:2px solid var(--accent-color);outline-offset:2px}#rsvp-status-group input:not([disabled])+label:hover,#rsvp-status-group input:not([disabled]):hover+label{opacity:1;transform:scale(1.08)}#rsvp-status-group input:checked+label.status-confirmed{background-color:var(--form-success)}#rsvp-status-group input:checked+label.status-declined{background-color:var(--form-error)}#rsvp-success-msg,#rsvp-success-msg-demo,#rsvp-success-msg-doi,#rsvp-success-msg-email,#ty-success-msg{color:var(--form-success);display:none;font-weight:700;line-height:1.6em;padding:1.5em 0;text-align:center}#pro-form-submit{display:block;margin:auto;min-width:150px}.pro-waiting{background-color:var(--modal-btn-background);border:1px solid var(--modal-btn-border);border-radius:var(--btn-border-radius);box-sizing:border-box;color:var(--modal-btn-text);cursor:wait;display:none;line-height:.5em;margin:auto;min-width:150px;padding:.5em 1.25em 1.2em;text-align:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:fit-content}@media (width > 575px){#pro-form-submit,.pro-waiting{min-width:200px}}.pro-waiting span:not(.atcb-icon-ical){animation-name:blink;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both;font-size:2.5em}.pro-field label span:not(.atcb-icon-ical){color:var(--form-error);font-weight:700;padding-left:2px}.pro-waiting span:not(.atcb-icon-ical):nth-child(2){animation-delay:.15s}.pro-waiting span:not(.atcb-icon-ical):nth-child(3){animation-delay:.3s}@keyframes blink{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}.pro #rsvp-sent-content{align-items:center;display:flex;flex-direction:column;gap:1.5em}#rsvp-status-group span{color:inherit}.atcb-modal-content .pro p{margin:0}.atcb-modal-content .pro p.pro-pt{margin-top:1.5em}.atcb-modal-content .pro .pro-field p{font-size:.9em}.pro .btn-flex{align-items:center;display:flex}.pro .atcb-modal-btn svg{fill:none;height:1.5em;margin-right:.5em;stroke:currentcolor;width:auto} \ No newline at end of file diff --git a/assets/css/atcb.css b/assets/css/atcb.css index 325f993e..9e00118d 100644 --- a/assets/css/atcb.css +++ b/assets/css/atcb.css @@ -24,7 +24,7 @@ --base-font-size-m: 16px; --base-font-size-s: 16px; --font: arial, helvetica, sans-serif; - --keyboard-focus: #1e90ff; + --accent-color: #1e90ff; --wrapper-padding: 1px; --btn-background: #f5f5f5; --btn-hover-background: #fff; @@ -47,7 +47,11 @@ --list-padding: .8em; --list-shadow: rgba(0 0 0 / 20%) 2px 5px 18px -1px, rgba(0 0 0 / 40%) 2px 2px 10px -3px; --list-modal-shadow: rgba(0 0 0 / 60%) 3px 6px 40px -5px, rgba(0 0 0 / 60%) 3px 3px 15px -4px; - --modal-input-border-radius: 6px; + --input-border-radius: 6px; + --input-background: #fff; + --status-active-text: #fff; + --form-error: #c5372c; + --form-success: #338a36; --modal-text: #000; --modal-background: #f5f5f5; --modal-btn-bar: #c6c8cd; @@ -112,6 +116,10 @@ --modal-btn-secondary-text: #b8b8b8; --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 90%)); --modal-btn-shadow: rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px; + --input-background: #434246; + --status-active-text: #000; + --form-error: #db8680; + --form-success: #99de9c; --date-btn-text: #ebebf0; --date-btn-text-secondary: #b5b5bd; --date-btn-cal-day-text: #101010; @@ -211,7 +219,7 @@ } .atcb-button:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-button:not([disabled]):focus, @@ -346,7 +354,7 @@ .atcb-list-item:focus-visible { background-color: var(--list-hover-background); - color: var(--keyboard-focus); + color: var(--accent-color); font-weight: 600; outline: none; } @@ -570,18 +578,29 @@ a.atcb-modal-btn.atcb-modal-btn-border { border: 1px solid var(--modal-btn-border); } -button.atcb-modal-btn:hover, -a.atcb-modal-btn:hover { +button.atcb-modal-btn:focus-visible, +a.atcb-modal-btn:focus-visible{ background-color: var(--modal-btn-hover-background); - box-shadow: var(--modal-btn-hover-shadow); - color: var(--modal-btn-hover-text); - text-decoration: none; + outline: 2px solid var(--accent-color); } -button.atcb-modal-btn:focus-visible, -a.atcb-modal-btn:focus-visible{ +button.atcb-button:disabled, +button.atcb-subevent-btn:disabled, +button.atcb-modal-btn:disabled, +a.atcb-modal-btn:disabled { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); + border-style: dashed; + box-shadow: none; +} + +button.atcb-modal-btn:not([disabled]):hover, +a.atcb-modal-btn:not([disabled]):hover { background-color: var(--modal-btn-hover-background); - outline: 2px solid var(--keyboard-focus); + box-shadow: var(--modal-btn-hover-shadow); + color: var(--modal-btn-hover-text); + text-decoration: none; } /****************************** @@ -618,7 +637,7 @@ a.atcb-modal-btn:focus-visible{ } .atcb-subevent-btn:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-subevent-btn + .atcb-subevent-btn { @@ -855,8 +874,8 @@ a.atcb-modal-btn:focus-visible{ * Icon specifics */ -.atcb-icon.atcb-icon-ms365, .atcb-icon.outlookcom { - padding-bottom: .5em; +.atcb-icon.atcb-icon-ms365, .atcb-icon-outlookcom { + padding-bottom: .05em; } .atcb-icon.atcb-icon-apple, .atcb-icon.atcb-icon-ical { @@ -898,20 +917,60 @@ a.atcb-modal-btn:focus-visible{ * PRO Features */ +.rsvp-inline-wrapper { + filter: none; + min-width: 100%; +} + +.rsvp-inline-wrapper .atcb-modal-headline, +.rsvp-inline-wrapper .atcb-modal-content { + background-color: transparent; + border-radius: 0; + box-sizing: border-box; + width: 100%; +} + .pro { text-align: center; } +.pro ol, +.pro ul { + margin: auto; + text-align: left; + width: fit-content; +} + +.pro a, +.pro a:visited, +.pro a:active { + color: var(--modal-btn-text); + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: var(--accent-color); +} + +.pro a:hover { + color: var(--accent-color); + text-decoration: none; +} + .pro .pro-share-buttons { display: flex; + flex-wrap: wrap; justify-content: center; +} + +.pro #rsvp-atcb { + display: flex; flex-wrap: wrap; + gap: .4em; } .pro-form { + border-top: 1px solid var(--modal-btn-border); margin-top: 1.5em; padding-top: 1.5em; - border-top: 1px solid var(--modal-btn-border); text-align: left; } @@ -919,76 +978,89 @@ a.atcb-modal-btn:focus-visible{ padding-top: 1.3em; } -.pro-field-checkradio { - display: flex; +.pro-field-type-label + .pro-field-type-radio { + padding-top: 0; +} + +.pro-field-type-checkbox, +.pro-field-type-radio div { align-items: center; + display: flex; } -.pro-field-checkradio input { +.pro-field-type-checkbox input, +.pro-field-type-radio input { cursor: pointer; } .pro-field label { display: block; - opacity: .8; font-size: .9em; -} - -.pro-field .pro-checkradio-label { opacity: .7; - padding-left: .3em; - cursor: pointer; } -.pro-field label span:not(.atcb-icon-ical) { - font-weight: bold; - color: #f44336; - padding-left: 2px; +.pro-field-type-checkbox label, +.pro-field-type-radio label { + cursor: pointer; + opacity: .8; + padding-left: .3em; } .pro-field input[type="text"], .pro-field input[type="email"], .pro-field input[type="number"] { - width: 100%; + background-color: var(--input-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--input-border-radius); box-sizing: border-box; - padding: .7em; + caret-color: var(--accent-color); + color: var(--modal-text); font-size: .9em; opacity: .8; - border: 1px solid var(--modal-btn-border); - border-radius: var(--modal-input-border-radius); + padding: .7em; + transition: all .1s ease-in-out; + width: 100%; } -.pro-field input[type="text"]:hover, -.pro-field input[type="email"]:hover, -.pro-field input[type="number"]:hover { +.pro-field input[type="checkbox"], +.pro-field input[type="radio"] { + accent-color: var(--accent-color); + height: 1.2rem; + opacity: .8; + transition: all .1s ease-in-out; + width: 1.2em; +} + +.pro-field input:disabled, +.pro-field input:disabled + label { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); +} + +.pro-field input:not([disabled]):hover { opacity: 1; } .pro-field input[type="text"]:focus, .pro-field input[type="email"]:focus, .pro-field input[type="number"]:focus { - outline: none; - border-color: var(--keyboard-focus); -} - -.pro-field input[type="checkbox"], -.pro-field input[type="radio"] { - width: 1.2em; - height: 1.2rem; - accent-color: var(--keyboard-focus); + border-color: var(--accent-color); + outline: 1px solid var(--accent-color); } .pro-field input[type="checkbox"]:focus, .pro-field input[type="radio"]:focus { - outline-color: var(--keyboard-focus); + outline-color: var(--accent-color); + outline-width: 2px; } #submit-error { + color: var(--form-error); display: none; font-weight: bold; - color: #f44336; - text-align: center; padding-top: 1.5em; + text-align: center; } .pro-form.form-error #submit-error { @@ -996,25 +1068,122 @@ a.atcb-modal-btn:focus-visible{ } .pro-field input.error { - border: 2px solid #f44336; - accent-color: #f44336; + accent-color: var(--form-error); + border: 2px solid var(--form-error); } -.pro-field input.error + .pro-checkradio-label { +.pro-field input.error + label, +.pro-field:has(input.error) label { + color: var(--form-error); opacity: 1; - color: #f44336; +} + +#rsvp-status-group { + border-bottom: 1px solid var(--modal-btn-border); + font-weight: bold; + margin-bottom: 1.5em; + padding-bottom: 2em; + text-align: center; +} + +#rsvp-status-group .pro-field { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.2em; + justify-content: center; + margin-top: 1em; +} + +@media (width <= 575px) { + #rsvp-status-group .pro-field { + flex-direction: column; + } + + #rsvp-status-group .pro-field div { + width: 80%; + } +} + +#rsvp-status-group .pro-field div { + min-width: 28%; + position: relative; +} + +#rsvp-status-group input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; +} + +#rsvp-status-group label { + align-items: center; + border: 1px solid var(--modal-btn-text); + border-radius: var(--input-border-radius); + color: var(--modal-btn-text); + display: flex; + flex-direction: column; + font-weight: bold; + text-transform: uppercase; + justify-content: center; + opacity: .6; + padding: .8em; + transition: all .1s ease-in-out; + width: 100%; +} + +#rsvp-status-group label.status-confirmed { + border-color: var(--form-success); + color: var(--form-success); +} + +#rsvp-status-group label.status-declined { + border-color: var(--form-error); + color: var(--form-error); +} + +#rsvp-status-group input:checked + label { + background-color: var(--modal-text); + color: var(--status-active-text); + opacity: 1; + transform: scale(1.1); +} + +#rsvp-status-group input:focus-visible + label { + outline: 2px solid var(--accent-color); + outline-offset: 2px; +} + +#rsvp-status-group input:not([disabled]) + label:hover, +#rsvp-status-group input:not([disabled]):hover + label { + opacity: 1; + transform: scale(1.08); +} + +#rsvp-status-group input:checked + label.status-confirmed { + background-color: var(--form-success); +} + +#rsvp-status-group input:checked + label.status-declined { + background-color: var(--form-error); } #ty-success-msg, #rsvp-success-msg, +#rsvp-success-msg-email, #rsvp-success-msg-doi, #rsvp-success-msg-demo { + color: var(--form-success); display: none; font-weight: bold; - color: #4caf50; - text-align: center; - padding: 1.5em 0; line-height: 1.6em; + padding: 1.5em 0; + text-align: center; } #pro-form-submit { @@ -1024,18 +1193,18 @@ a.atcb-modal-btn:focus-visible{ } .pro-waiting { - box-sizing: border-box; - display: none; - margin: auto; - min-width: 150px; - text-align: center; - padding: .5em 1.25em 1.2em; background-color: var(--modal-btn-background); - color: var(--modal-btn-text); border: 1px solid var(--modal-btn-border); border-radius: var(--btn-border-radius); + box-sizing: border-box; + color: var(--modal-btn-text); cursor: wait; + display: none; line-height: .5em; + margin: auto; + min-width: 150px; + padding: .5em 1.25em 1.2em; + text-align: center; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; @@ -1049,19 +1218,25 @@ a.atcb-modal-btn:focus-visible{ } } -.pro-waiting span { - font-size: 2.5em; +.pro-waiting span:not(.atcb-icon-ical) { animation-name: blink; animation-duration: 1s; animation-iteration-count: infinite; animation-fill-mode: both; + font-size: 2.5em; +} + +.pro-field label span:not(.atcb-icon-ical) { + color: var(--form-error); + font-weight: bold; + padding-left: 2px; } -.pro-waiting span:nth-child(2) { +.pro-waiting span:not(.atcb-icon-ical):nth-child(2) { animation-delay: .15s; } -.pro-waiting span:nth-child(3) { +.pro-waiting span:not(.atcb-icon-ical):nth-child(3) { animation-delay: .3s; } @@ -1069,26 +1244,28 @@ a.atcb-modal-btn:focus-visible{ 0% { opacity: .2; } + 20% { opacity: 1; } + 100% { opacity: .2; } } .pro #rsvp-sent-content { + align-items: center; display: flex; flex-direction: column; - align-items: center; gap: 1.5em; } -.pro #rsvp-sent-content p { - margin-bottom: 2em; +/* overrides */ +#rsvp-status-group span { + color: inherit; } -/* overrides */ .atcb-modal-content .pro p { margin: 0; } @@ -1102,14 +1279,14 @@ a.atcb-modal-btn:focus-visible{ } .pro .btn-flex { - display: flex; align-items: center; + display: flex; } .pro .atcb-modal-btn svg { - height: 1.5em; - width: auto; fill: none; - stroke: currentcolor; + height: 1.5em; margin-right: .5em; -} \ No newline at end of file + stroke: currentcolor; + width: auto; +} diff --git a/assets/css/atcb.min.css b/assets/css/atcb.min.css index 3b409806..43961343 100644 --- a/assets/css/atcb.min.css +++ b/assets/css/atcb.min.css @@ -1 +1 @@ -:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--keyboard-focus:#1e90ff;--wrapper-padding:1px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-border:#d2d2d2;--btn-border-radius:6px;--btn-padding-x:1em;--btn-padding-y:.65em;--btn-text:#333;--btn-hover-text:#000;--btn-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 15%) 2px 2px 10px -3px;--btn-hover-shadow:rgba(0 0 0 / 35%) 2px 5px 18px -1px,rgba(0 0 0 / 30%) 2px 2px 10px -3px;--btn-active-shadow:rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 45%) 2px 2px 10px -3px;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#333;--list-hover-text:#000;--list-close-background:#e5e5e5;--list-close-text:#777;--list-border-radius:6px;--list-padding:.8em;--list-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 2px 2px 10px -3px;--list-modal-shadow:rgba(0 0 0 / 60%) 3px 6px 40px -5px,rgba(0 0 0 / 60%) 3px 3px 15px -4px;--modal-input-border-radius:6px;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#d2d2d2;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#666567;--modal-border-radius:6px;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px;--modal-btn-hover-shadow:rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(0 0 0 / 40%) 1px 3px 15px -4px,rgba(0 0 0 / 20%) 1px 1px 8px -4px;--date-btn-hover-shadow:rgba(0 0 0 / 40%) 4px 6px 18px -1px,rgba(0 0 0 / 35%) 4px 5px 25px -2px;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:rgba(20 20 20 / 25%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#2e2e2e;--btn-hover-background:#373737;--btn-border:#4d4d4d;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--btn-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--btn-hover-shadow:rgba(255 255 255 / 6%) -12px -5px 23px -8px,rgba(255 255 255 / 7%) -7px -5px 18px -3px,rgba(0 0 0 / 60%) 2px 5px 19px -1px,rgba(0 0 0 / 50%) 3px 3px 22px -3px;--btn-active-shadow:rgba(255 255 255 / 7%) -12px -5px 23px -8px,rgba(255 255 255 / 8%) -7px -5px 18px -3px,rgba(0 0 0 / 70%) 2px 5px 19px -1px,rgba(0 0 0 / 60%) 3px 3px 22px -3px;--list-background:#2e2e2e;--list-hover-background:#373737;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#282828;--list-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--list-modal-shadow:rgba(255 255 255 / 8%) -12px -5px 30px -8px,rgba(255 255 255 / 8%) -7px -5px 15px -3px,rgba(0 0 0 / 60%) 4px 6px 50px -4px,rgba(0 0 0 / 90%) 8px 12px 40px -2px;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(255 255 255 / 10%) -8px -6px 20px,rgba(0 0 0 / 50%) 1px 3px 25px -8px,rgba(0 0 0 / 50%) 1px 1px 10px -3px;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:rgba(20 20 20 / 60%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{align-items:center;background-color:var(--btn-background);border:1px solid var(--btn-border);border-radius:var(--btn-border-radius);box-shadow:var(--btn-shadow);box-sizing:content-box;color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.5em;margin:.13em;max-width:300px;padding:var(--btn-padding-y) var(--btn-padding-x);position:relative;text-align:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;z-index:1}.atcb-button:not(.atcb-no-text,.atcb-modal-style,.atcb-dropoverlay,.atcb-single){min-width:calc(11em - 2 * var(--btn-padding-x))}.atcb-button.atcb-no-text{display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-hover-shadow);color:var(--btn-hover-text);margin:0;padding:calc(var(--btn-padding-y) + .13em) calc(var(--btn-padding-x) + .13em)}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){z-index:15000000}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay),.atcb-button.atcb-single:not([disabled]):focus,.atcb-button.atcb-single:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-active-shadow);color:var(--btn-hover-text);margin:0;padding:calc(var(--btn-padding-y) + .13em) calc(var(--btn-padding-x) + .13em)}.atcb-button.atcb-no-text:focus,.atcb-button.atcb-no-text:hover{height:3.26em;width:3.26em;padding:0!important}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:4px;height:1px;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;padding:0 4px;position:absolute;z-index:14000090}.atcb-list-wrapper.atcb-dropoverlay{z-index:15000000;max-width:max-content}.atcb-list{background-color:var(--list-background);border-radius:0 0 var(--list-border-radius) var(--list-border-radius);box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--keyboard-focus);font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 var(--list-border-radius) var(--list-border-radius)}.atcb-dropup .atcb-list-item:last-child{border-radius:0;padding-bottom:calc(var(--list-padding) + .45em)}.atcb-dropoverlay .atcb-list .atcb-list-item:first-child,.atcb-dropup .atcb-list,.atcb-dropup .atcb-list-item:first-child,.atcb-list.atcb-modal .atcb-list-item:first-child{border-radius:var(--list-border-radius) var(--list-border-radius) 0 0}.atcb-dropoverlay .atcb-list .atcb-list-item:only-child,.atcb-list.atcb-modal .atcb-list-item:only-child{border-radius:var(--list-border-radius)}.atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:calc(var(--list-padding) + .45em)}.atcb-dropoverlay .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child,.atcb-dropup .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:var(--list-padding)}.atcb-dropoverlay .atcb-list,.atcb-list.atcb-modal{border-radius:var(--list-border-radius)}.atcb-list.atcb-modal{box-shadow:var(--list-modal-shadow)}.atcb-list-item .atcb-icon{margin-right:.7em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:var(--btn-border-radius);box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn.atcb-modal-btn-border,button.atcb-modal-btn.atcb-modal-btn-border{border:1px solid var(--modal-btn-border)}a.atcb-modal-btn:hover,button.atcb-modal-btn:hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:4px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--keyboard-focus)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay) .atcb-checkmark,.atcb-button.atcb-single:focus .atcb-checkmark,.atcb-button.atcb-single:hover .atcb-checkmark{top:-.77em;right:-.37em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon.atcb-icon-ms365,.atcb-icon.outlookcom{padding-bottom:.5em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-trigger{padding-bottom:.2em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)}.pro{text-align:center}.pro .pro-share-buttons{display:flex;justify-content:center;flex-wrap:wrap}.pro-form{margin-top:1.5em;padding-top:1.5em;border-top:1px solid var(--modal-btn-border);text-align:left}.pro-field+.pro-field{padding-top:1.3em}.pro-field-checkradio{display:flex;align-items:center}.pro-field-checkradio input{cursor:pointer}.pro-field label{display:block;opacity:.8;font-size:.9em}.pro-field .pro-checkradio-label{opacity:.7;padding-left:.3em;cursor:pointer}.pro-field label span:not(.atcb-icon-ical){font-weight:700;color:#f44336;padding-left:2px}.pro-field input[type=email],.pro-field input[type=number],.pro-field input[type=text]{width:100%;box-sizing:border-box;padding:.7em;font-size:.9em;opacity:.8;border:1px solid var(--modal-btn-border);border-radius:var(--modal-input-border-radius)}.pro-field input[type=email]:hover,.pro-field input[type=number]:hover,.pro-field input[type=text]:hover{opacity:1}.pro-field input[type=email]:focus,.pro-field input[type=number]:focus,.pro-field input[type=text]:focus{outline:0;border-color:var(--keyboard-focus)}.pro-field input[type=checkbox],.pro-field input[type=radio]{width:1.2em;height:1.2rem;accent-color:var(--keyboard-focus)}.pro-field input[type=checkbox]:focus,.pro-field input[type=radio]:focus{outline-color:var(--keyboard-focus)}#submit-error{display:none;font-weight:700;color:#f44336;text-align:center;padding-top:1.5em}.pro-form.form-error #submit-error{display:block}.pro-field input.error{border:2px solid #f44336;accent-color:#f44336}.pro-field input.error+.pro-checkradio-label{opacity:1;color:#f44336}#rsvp-success-msg,#rsvp-success-msg-demo,#rsvp-success-msg-doi,#ty-success-msg{display:none;font-weight:700;color:#4caf50;text-align:center;padding:1.5em 0;line-height:1.6em}#pro-form-submit{display:block;margin:auto;min-width:150px}.pro-waiting{box-sizing:border-box;display:none;margin:auto;min-width:150px;text-align:center;padding:.5em 1.25em 1.2em;background-color:var(--modal-btn-background);color:var(--modal-btn-text);border:1px solid var(--modal-btn-border);border-radius:var(--btn-border-radius);cursor:wait;line-height:.5em;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:fit-content}@media (width > 575px){#pro-form-submit,.pro-waiting{min-width:200px}}.pro-waiting span{font-size:2.5em;animation-name:blink;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}.pro-waiting span:nth-child(2){animation-delay:.15s}.pro-waiting span:nth-child(3){animation-delay:.3s}@keyframes blink{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}.pro #rsvp-sent-content{display:flex;flex-direction:column;align-items:center;gap:1.5em}.pro #rsvp-sent-content p{margin-bottom:2em}.atcb-modal-content .pro p{margin:0}.atcb-modal-content .pro p.pro-pt{margin-top:1.5em}.atcb-modal-content .pro .pro-field p{font-size:.9em}.pro .btn-flex{display:flex;align-items:center}.pro .atcb-modal-btn svg{height:1.5em;width:auto;fill:none;stroke:currentcolor;margin-right:.5em} \ No newline at end of file +:host{width:fit-content;--base-font-size-l:16px;--base-font-size-m:16px;--base-font-size-s:16px;--font:arial,helvetica,sans-serif;--accent-color:#1e90ff;--wrapper-padding:1px;--btn-background:#f5f5f5;--btn-hover-background:#fff;--btn-border:#d2d2d2;--btn-border-radius:6px;--btn-padding-x:1em;--btn-padding-y:.65em;--btn-text:#333;--btn-hover-text:#000;--btn-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 15%) 2px 2px 10px -3px;--btn-hover-shadow:rgba(0 0 0 / 35%) 2px 5px 18px -1px,rgba(0 0 0 / 30%) 2px 2px 10px -3px;--btn-active-shadow:rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 45%) 2px 2px 10px -3px;--list-background:#f5f5f5;--list-hover-background:#fff;--list-text:#333;--list-hover-text:#000;--list-close-background:#e5e5e5;--list-close-text:#777;--list-border-radius:6px;--list-padding:.8em;--list-shadow:rgba(0 0 0 / 20%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 2px 2px 10px -3px;--list-modal-shadow:rgba(0 0 0 / 60%) 3px 6px 40px -5px,rgba(0 0 0 / 60%) 3px 3px 15px -4px;--input-border-radius:6px;--input-background:#fff;--status-active-text:#fff;--form-error:#c5372c;--form-success:#338a36;--modal-text:#000;--modal-background:#f5f5f5;--modal-btn-bar:#c6c8cd;--modal-btn-background:#f5f5f5;--modal-btn-secondary-background:#e2e1e6;--modal-btn-hover-background:#fff;--modal-btn-border:#d2d2d2;--modal-btn-text:#2e2e2e;--modal-btn-hover-text:#161616;--modal-btn-secondary-text:#666567;--modal-border-radius:6px;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 70%));--modal-btn-shadow:rgba(0 0 0 / 10%) 2px 3px 10px -3px,rgba(0 0 0 / 25%) 1px 1px 8px -4px;--modal-btn-hover-shadow:rgba(0 0 0 / 35%) 3px 5px 15px -2px,rgba(0 0 0 / 20%) 2px 4px 25px -6px;--date-btn-text:#1d1d1e;--date-btn-text-secondary:#3a3a3f;--date-btn-cal-day-text:#fff;--date-btn-cal-month-text:#d3d2d7;--date-btn-cal-background:#313132;--date-btn-background:#eae9ed;--date-btn-hover-background:#fff;--date-btn-headline-line-clamp:1;--date-btn-shadow:rgba(0 0 0 / 40%) 1px 3px 15px -4px,rgba(0 0 0 / 20%) 1px 1px 8px -4px;--date-btn-hover-shadow:rgba(0 0 0 / 40%) 4px 6px 18px -1px,rgba(0 0 0 / 35%) 4px 5px 25px -2px;--checkmark-background:drop-shadow(0 0 3px #fff);--overlay-background:rgba(20 20 20 / 25%);--overlay-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' width='16' height='16' viewBox='0 0 122.878 122.88'%3E%3Cpath d='M1.426 8.313a4.87 4.87 0 0 1 0-6.886 4.87 4.87 0 0 1 6.886 0l53.127 53.127 53.127-53.127a4.87 4.87 0 0 1 6.887 0 4.87 4.87 0 0 1 0 6.886L68.324 61.439l53.128 53.128a4.87 4.87 0 0 1-6.887 6.886L61.438 68.326 8.312 121.453a4.87 4.87 0 0 1-6.886 0 4.87 4.87 0 0 1 0-6.886l53.127-53.128L1.426 8.313h0z'/%3E%3C/svg%3E") 16 16,crosshair;--icon-ms365-color:#ea3e23;--icon-yahoo-color:#5f01d1;--icon-filter:none}:host(.atcb-dark){--btn-background:#2e2e2e;--btn-hover-background:#373737;--btn-border:#4d4d4d;--btn-text:#dedede;--btn-hover-text:#f1f1f1;--btn-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--btn-hover-shadow:rgba(255 255 255 / 6%) -12px -5px 23px -8px,rgba(255 255 255 / 7%) -7px -5px 18px -3px,rgba(0 0 0 / 60%) 2px 5px 19px -1px,rgba(0 0 0 / 50%) 3px 3px 22px -3px;--btn-active-shadow:rgba(255 255 255 / 7%) -12px -5px 23px -8px,rgba(255 255 255 / 8%) -7px -5px 18px -3px,rgba(0 0 0 / 70%) 2px 5px 19px -1px,rgba(0 0 0 / 60%) 3px 3px 22px -3px;--list-background:#2e2e2e;--list-hover-background:#373737;--list-text:#dedede;--list-hover-text:#f1f1f1;--list-close-background:#282828;--list-shadow:rgba(255 255 255 / 5%) -12px -5px 20px -8px,rgba(255 255 255 / 6%) -7px -5px 15px -3px,rgba(0 0 0 / 50%) 2px 5px 18px -1px,rgba(0 0 0 / 40%) 3px 3px 20px -3px;--list-modal-shadow:rgba(255 255 255 / 8%) -12px -5px 30px -8px,rgba(255 255 255 / 8%) -7px -5px 15px -3px,rgba(0 0 0 / 60%) 4px 6px 50px -4px,rgba(0 0 0 / 90%) 8px 12px 40px -2px;--modal-text:#f1f1f1;--modal-background:#242424;--modal-btn-bar:#38383a;--modal-btn-background:#181819;--modal-btn-secondary-background:#2e2d30;--modal-btn-hover-background:#434246;--modal-btn-border:#434246;--modal-btn-text:#dbdbdb;--modal-btn-hover-text:#fff;--modal-btn-secondary-text:#b8b8b8;--modal-shadow:drop-shadow(5px 8px 30px rgba(0 0 0 / 90%));--modal-btn-shadow:rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px;--input-background:#434246;--status-active-text:#000;--form-error:#db8680;--form-success:#99de9c;--date-btn-text:#ebebf0;--date-btn-text-secondary:#b5b5bd;--date-btn-cal-day-text:#101010;--date-btn-cal-month-text:#3e3e3f;--date-btn-cal-background:#c7c7cd;--date-btn-background:#363636;--date-btn-hover-background:#474747;--date-btn-shadow:rgba(255 255 255 / 10%) -8px -6px 20px,rgba(0 0 0 / 50%) 1px 3px 25px -8px,rgba(0 0 0 / 50%) 1px 1px 10px -3px;--checkmark-background:drop-shadow(0 0 3px #0a0a0a);--overlay-background:rgba(20 20 20 / 60%);--icon-ms365-color:#ea3e23;--icon-yahoo-color:#bebebe;--icon-filter:grayscale(.2)}.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-l)}@media (width <= 991px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-m)}}@media (width <= 575px){.atcb-button-wrapper,.atcb-list,.atcb-modal-box{font-size:var(--base-font-size-s)}}.atcb-button-wrapper{display:block;padding:var(--wrapper-padding);position:relative}.atcb-button{align-items:center;background-color:var(--btn-background);border:1px solid var(--btn-border);border-radius:var(--btn-border-radius);box-shadow:var(--btn-shadow);box-sizing:content-box;color:var(--btn-text);cursor:pointer;display:flex;font-family:var(--font);font-size:1em;font-weight:600;justify-content:center;line-height:1.5em;margin:.13em;max-width:300px;padding:var(--btn-padding-y) var(--btn-padding-x);position:relative;text-align:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:auto;z-index:1}.atcb-button:not(.atcb-no-text,.atcb-modal-style,.atcb-dropoverlay,.atcb-single){min-width:calc(11em - 2 * var(--btn-padding-x))}.atcb-button.atcb-no-text{display:flex;place-content:center center;align-items:center;height:3em;width:3em;padding:0}.atcb-rtl .atcb-button{direction:rtl;text-align:right}.atcb-button:focus-visible{outline:2px solid var(--accent-color)}.atcb-button:not([disabled]):focus,.atcb-button:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-hover-shadow);color:var(--btn-hover-text);margin:0;padding:calc(var(--btn-padding-y) + .13em) calc(var(--btn-padding-x) + .13em)}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay){z-index:15000000}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay),.atcb-button.atcb-single:not([disabled]):focus,.atcb-button.atcb-single:not([disabled]):hover{background-color:var(--btn-hover-background);box-shadow:var(--btn-active-shadow);color:var(--btn-hover-text);margin:0;padding:calc(var(--btn-padding-y) + .13em) calc(var(--btn-padding-x) + .13em)}.atcb-button.atcb-no-text:focus,.atcb-button.atcb-no-text:hover{height:3.26em;width:3.26em;padding:0!important}.atcb-button.atcb-active.atcb-dropoverlay{z-index:14000090}.atcb-icon{flex-grow:0;flex-shrink:0;height:1em;line-height:1em;margin-right:.8em;width:1em}.atcb-rtl .atcb-icon{margin-right:0;margin-left:.8em}.atcb-no-text .atcb-icon{margin-right:0;margin-left:0}.atcb-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-text{overflow-wrap:anywhere}.atcb-dropdown-anchor{bottom:4px;height:1px;width:100%;opacity:0;position:absolute}.atcb-list-wrapper{box-sizing:border-box;padding:0 4px;position:absolute;z-index:14000090}.atcb-list-wrapper.atcb-dropoverlay{z-index:15000000;max-width:max-content}.atcb-list{background-color:var(--list-background);border-radius:0 0 var(--list-border-radius) var(--list-border-radius);box-sizing:border-box;box-shadow:var(--list-shadow);color:var(--list-text);display:block;font-family:var(--font);min-width:100%;position:relative;user-select:none;-webkit-user-select:none;width:fit-content}.atcb-list-item{align-items:center;background-color:var(--list-background);box-sizing:border-box;cursor:pointer;display:flex;font-size:1em;line-height:1.75em;padding:var(--list-padding);text-align:left;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.atcb-rtl .atcb-list-item{direction:rtl;text-align:right}.atcb-list-item:hover{background-color:var(--list-hover-background);color:var(--list-hover-text)}.atcb-list-item:focus-visible{background-color:var(--list-hover-background);color:var(--accent-color);font-weight:600;outline:0}.atcb-list-item:last-child{border-radius:0 0 var(--list-border-radius) var(--list-border-radius)}.atcb-dropup .atcb-list-item:last-child{border-radius:0;padding-bottom:calc(var(--list-padding) + .45em)}.atcb-dropoverlay .atcb-list .atcb-list-item:first-child,.atcb-dropup .atcb-list,.atcb-dropup .atcb-list-item:first-child,.atcb-list.atcb-modal .atcb-list-item:first-child{border-radius:var(--list-border-radius) var(--list-border-radius) 0 0}.atcb-dropoverlay .atcb-list .atcb-list-item:only-child,.atcb-list.atcb-modal .atcb-list-item:only-child{border-radius:var(--list-border-radius)}.atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:calc(var(--list-padding) + .45em)}.atcb-dropoverlay .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child,.atcb-dropup .atcb-list.atcb-generated-button:not(.atcb-modal) .atcb-list-item:first-child{padding-top:var(--list-padding)}.atcb-dropoverlay .atcb-list,.atcb-list.atcb-modal{border-radius:var(--list-border-radius)}.atcb-list.atcb-modal{box-shadow:var(--list-modal-shadow)}.atcb-list-item .atcb-icon{margin-right:.7em}.atcb-rtl .atcb-list-item .atcb-icon{margin-right:0;margin-left:.7em}.atcb-no-text .atcb-list-item .atcb-icon{margin:0 auto}.atcb-list-item-close{background-color:var(--list-close-background)}.atcb-list-item.atcb-list-item-close:not(:focus-visible){color:var(--list-close-text)}.atcb-list-item-close svg{fill:currentcolor}.atcb-modal{display:block;margin:auto;min-width:250px;width:auto;position:relative;z-index:14000090}.atcb-modal-box{filter:var(--modal-shadow);color:var(--modal-text);cursor:default;box-sizing:border-box;font-family:var(--font);line-height:1.5em;text-align:left;user-select:none;-webkit-user-select:none;touch-action:manipulation;width:100%;margin-bottom:20px;max-width:32em;-webkit-tap-highlight-color:transparent}@media (width > 575px){.atcb-modal-box{min-width:500px}}.atcb-modal-box.atcb-rtl{text-align:right;direction:rtl;padding:1.25em 1em 1.25em 2em}.atcb-modal-icon{height:2.5em;width:2.5em;border-radius:100%;background-color:var(--modal-background);padding:1.75em;margin:auto}.atcb-modal-icon svg{fill:currentcolor;height:100%;width:100%}.atcb-modal-headline{background-color:var(--modal-background);border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;font-size:1.3em;font-weight:600;line-height:1.5em;padding:1.8em 1.5em 1.3em;text-transform:uppercase;text-align:center}.atcb-modal-icon+.atcb-modal-headline{margin-top:-2.6em;padding-top:2.6em}.atcb-modal-content{background-color:var(--modal-background);font-size:1em;padding:.3em 2em 2.2em}.atcb-modal-icon+.atcb-modal-content{border-radius:var(--modal-border-radius) var(--modal-border-radius) 0 0;margin-top:-2.6em;padding-top:2.6em}@media (width <= 575px){.atcb-modal-headline{padding:1.8em 1em 1em}.atcb-modal-content{padding:.3em 1.5em 1.5em}.atcb-modal-icon+.atcb-modal-content{padding-top:1.8em}}.atcb-modal-buttons{background-color:var(--modal-btn-bar);border-radius:0 0 var(--modal-border-radius) var(--modal-border-radius);box-sizing:border-box;padding:.6em;text-align:center;width:100%;display:flex;justify-content:center;flex-flow:row-reverse wrap;align-items:center}a.atcb-modal-btn,button.atcb-modal-btn{background-color:var(--modal-btn-secondary-background);border:0;border-radius:var(--btn-border-radius);box-shadow:var(--modal-btn-shadow);color:var(--modal-btn-secondary-text);cursor:pointer;display:inline-block;font-family:var(--font);font-size:.9em;font-weight:600;line-height:1em;margin:.625em;padding:1em 1.25em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}a.atcb-modal-btn.btn-small,button.atcb-modal-btn.btn-small{padding:.6em .8em}a.atcb-modal-btn.atcb-modal-btn-primary,button.atcb-modal-btn.atcb-modal-btn-primary{background-color:var(--modal-btn-background);color:var(--modal-btn-text)}a.atcb-modal-btn.atcb-modal-btn-border,button.atcb-modal-btn.atcb-modal-btn-border{border:1px solid var(--modal-btn-border)}a.atcb-modal-btn:focus-visible,button.atcb-modal-btn:focus-visible{background-color:var(--modal-btn-hover-background);outline:2px solid var(--accent-color)}a.atcb-modal-btn:disabled,button.atcb-button:disabled,button.atcb-modal-btn:disabled,button.atcb-subevent-btn:disabled{cursor:not-allowed;opacity:.75;filter:brightness(95%);border-style:dashed;box-shadow:none}a.atcb-modal-btn:not([disabled]):hover,button.atcb-modal-btn:not([disabled]):hover{background-color:var(--modal-btn-hover-background);box-shadow:var(--modal-btn-hover-shadow);color:var(--modal-btn-hover-text);text-decoration:none}.atcb-subevent-btn{display:flex;align-items:flex-start;cursor:pointer;font-family:var(--font);font-size:1em;box-shadow:var(--date-btn-shadow);background-color:var(--date-btn-background);border:0;border-radius:4px;padding:0;margin:0;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.atcb-subevent-btn:hover{align-items:center}.atcb-subevent-btn:focus,.atcb-subevent-btn:hover{background-color:var(--date-btn-hover-background);box-shadow:var(--date-btn-hover-shadow)}.atcb-subevent-btn:focus-visible{outline:2px solid var(--accent-color)}.atcb-subevent-btn+.atcb-subevent-btn{margin-top:30px}.atcb-date-btn-left{border-radius:4px 0 0 4px;align-self:stretch;background-color:var(--date-btn-cal-background);color:var(--date-btn-hover-background);padding:.7em .8em .8em;width:2.7em;align-items:center;display:flex;flex-direction:column}.atcb-rtl .atcb-date-btn-left{border-radius:0 4px 4px 0}.atcb-subevent-btn:hover .atcb-date-btn-left{opacity:.8}.atcb-date-btn-day{color:var(--date-btn-cal-day-text);font-weight:300;font-size:2em;word-break:keep-all;padding-bottom:.1em}.atcb-initialized[lang=ja] .atcb-date-btn-day,.atcb-initialized[lang=ko] .atcb-date-btn-day,.atcb-initialized[lang=zh] .atcb-date-btn-day{font-size:1.3em}.atcb-date-btn-month{color:var(--date-btn-cal-month-text);font-weight:600;font-size:1em}.atcb-date-btn-right{position:relative;color:var(--date-btn-text);min-width:12.5em;overflow-wrap:anywhere}.atcb-date-btn-details{opacity:1;padding:.7em .8em;text-align:left}.atcb-rtl .atcb-date-btn-details{text-align:right}.atcb-date-btn-hover{position:absolute;top:0;left:0;width:100%;opacity:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1em;padding:.3em;box-sizing:border-box}.atcb-subevent-btn:hover .atcb-date-btn-details{opacity:0}.atcb-subevent-btn:hover .atcb-date-btn-hover{opacity:1}.atcb-date-btn-headline{font-weight:600;font-size:.9em;margin-bottom:.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--date-btn-headline-line-clamp);-webkit-box-orient:vertical}.atcb-date-btn-content{display:flex;align-items:flex-start;font-size:.8em;color:var(--date-btn-text-secondary)}.atcb-date-btn-content-location{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-all}.atcb-date-btn-content-icon{display:inline-block;height:.8em;width:1.3em;flex:0 0 1.3em}.atcb-rtl .atcb-date-btn-content-icon{margin-right:0;margin-left:.5em}.atcb-initialized[lang=ja] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=ko] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon,.atcb-initialized[lang=zh] .atcb-date-btn-content:not(.atcb-date-btn-content-location) .atcb-date-btn-content-icon{margin-top:.15em}.atcb-date-btn-content-icon svg{height:100%;fill:currentcolor;width:auto}.atcb-date-btn-content+.atcb-date-btn-content{margin-top:.3em}.atcb-date-btn-content-text span:not(.atcb-icon-ical){padding-right:.3em;display:inline-block}.atcb-checkmark{display:none}.atcb-saved .atcb-checkmark{box-sizing:content-box;color:var(--btn-text);display:block;position:absolute;top:-.9em;right:-.5em;padding:.5em;border-radius:100%;height:1.2em}.atcb-button.atcb-active:not(.atcb-modal-style,.atcb-dropoverlay) .atcb-checkmark,.atcb-button.atcb-single:focus .atcb-checkmark,.atcb-button.atcb-single:hover .atcb-checkmark{top:-.77em;right:-.37em}.atcb-checkmark svg{height:100%;filter:var(--checkmark-background);width:auto}#atcb-bgoverlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background-color:var(--overlay-background);border:0;box-sizing:border-box;display:flex;height:calc(100vh + 100px);inset-inline:0;left:0;right:0;top:0;min-height:100%;min-width:100%;overflow-y:auto;padding:20px 20px 130px;position:fixed;width:100vw;z-index:14000000}#atcb-bgoverlay:not(dialog){animation:atcb-bgoverlay-animate .2s ease 0s 1 normal forwards;opacity:0}#atcb-bgoverlay.atcb-no-bg{animation:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;background-color:transparent}@keyframes atcb-bgoverlay-animate{0%{opacity:0}100%{opacity:1}}#atcb-bgoverlay.atcb-click:hover{cursor:var(--overlay-cursor)}.atcb-icon-outlookcom,.atcb-icon.atcb-icon-ms365{padding-bottom:.05em}.atcb-icon.atcb-icon-apple,.atcb-icon.atcb-icon-ical{padding-bottom:.15em}.atcb-icon.atcb-icon-trigger{padding-bottom:.2em}.atcb-icon.atcb-icon-rsvp{height:1.5em;width:1.5em}.atcb-icon.atcb-icon-apple svg{fill:currentcolor}.atcb-icon.atcb-icon-ical svg{fill:currentcolor}.atcb-icon.atcb-icon-ms365 svg{fill:var(--icon-ms365-color)}.atcb-icon.atcb-icon-yahoo svg{fill:var(--icon-yahoo-color)}.atcb-icon.atcb-icon-google svg,.atcb-icon.atcb-icon-msteams svg,.atcb-icon.atcb-icon-outlookcom svg{filter:var(--icon-filter)}.rsvp-inline-wrapper{filter:none;min-width:100%}.rsvp-inline-wrapper .atcb-modal-content,.rsvp-inline-wrapper .atcb-modal-headline{background-color:transparent;border-radius:0;box-sizing:border-box;width:100%}.pro{text-align:center}.pro ol,.pro ul{margin:auto;text-align:left;width:fit-content}.pro a,.pro a:active,.pro a:visited{color:var(--modal-btn-text);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent-color)}.pro a:hover{color:var(--accent-color);text-decoration:none}.pro .pro-share-buttons{display:flex;flex-wrap:wrap;justify-content:center}.pro #rsvp-atcb{display:flex;flex-wrap:wrap;gap:.3em}.pro-form{border-top:1px solid var(--modal-btn-border);margin-top:1.5em;padding-top:1.5em;text-align:left}.pro-field+.pro-field{padding-top:1.3em}.pro-field-type-label+.pro-field-type-radio{padding-top:0}.pro-field-type-checkbox,.pro-field-type-radio div{align-items:center;display:flex}.pro-field-type-checkbox input,.pro-field-type-radio input{cursor:pointer}.pro-field label{display:block;font-size:.9em;opacity:.7}.pro-field-type-checkbox label,.pro-field-type-radio label{cursor:pointer;opacity:.8;padding-left:.3em}.pro-field input[type=email],.pro-field input[type=number],.pro-field input[type=text]{background-color:var(--input-background);border:1px solid var(--modal-btn-border);border-radius:var(--input-border-radius);box-sizing:border-box;caret-color:var(--accent-color);color:var(--modal-text);font-size:.9em;opacity:.8;padding:.7em;transition:all .1s ease-in-out;width:100%}.pro-field input[type=checkbox],.pro-field input[type=radio]{accent-color:var(--accent-color);height:1.2rem;opacity:.8;transition:all .1s ease-in-out;width:1.2em}.pro-field input:disabled,.pro-field input:disabled+label{cursor:not-allowed;opacity:.75;filter:brightness(95%)}.pro-field input:not([disabled]):hover{opacity:1}.pro-field input[type=email]:focus,.pro-field input[type=number]:focus,.pro-field input[type=text]:focus{border-color:var(--accent-color);outline:1px solid var(--accent-color)}.pro-field input[type=checkbox]:focus,.pro-field input[type=radio]:focus{outline-color:var(--accent-color);outline-width:2px}#submit-error{color:var(--form-error);display:none;font-weight:700;padding-top:1.5em;text-align:center}.pro-form.form-error #submit-error{display:block}.pro-field input.error{accent-color:var(--form-error);border:2px solid var(--form-error)}.pro-field input.error+label,.pro-field:has(input.error) label{color:var(--form-error);opacity:1}#rsvp-status-group{border-bottom:1px solid var(--modal-btn-border);font-weight:700;margin-bottom:1.5em;padding-bottom:2em;text-align:center}#rsvp-status-group .pro-field{align-items:center;display:flex;flex-wrap:wrap;gap:1.2em;justify-content:center;margin-top:1em}@media (width <= 575px){#rsvp-status-group .pro-field{flex-direction:column}#rsvp-status-group .pro-field div{width:80%}}#rsvp-status-group .pro-field div{min-width:28%;position:relative}#rsvp-status-group input{opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;cursor:pointer}#rsvp-status-group label{align-items:center;border:1px solid var(--modal-btn-text);border-radius:var(--input-border-radius);color:var(--modal-btn-text);display:flex;flex-direction:column;font-weight:700;text-transform:uppercase;justify-content:center;opacity:.6;padding:.8em;transition:all .1s ease-in-out;width:100%}#rsvp-status-group label.status-confirmed{border-color:var(--form-success);color:var(--form-success)}#rsvp-status-group label.status-declined{border-color:var(--form-error);color:var(--form-error)}#rsvp-status-group input:checked+label{background-color:var(--modal-text);color:var(--status-active-text);opacity:1;transform:scale(1.1)}#rsvp-status-group input:focus-visible+label{outline:2px solid var(--accent-color);outline-offset:2px}#rsvp-status-group input:not([disabled])+label:hover,#rsvp-status-group input:not([disabled]):hover+label{opacity:1;transform:scale(1.08)}#rsvp-status-group input:checked+label.status-confirmed{background-color:var(--form-success)}#rsvp-status-group input:checked+label.status-declined{background-color:var(--form-error)}#rsvp-success-msg,#rsvp-success-msg-demo,#rsvp-success-msg-doi,#rsvp-success-msg-email,#ty-success-msg{color:var(--form-success);display:none;font-weight:700;line-height:1.6em;padding:1.5em 0;text-align:center}#pro-form-submit{display:block;margin:auto;min-width:150px}.pro-waiting{background-color:var(--modal-btn-background);border:1px solid var(--modal-btn-border);border-radius:var(--btn-border-radius);box-sizing:border-box;color:var(--modal-btn-text);cursor:wait;display:none;line-height:.5em;margin:auto;min-width:150px;padding:.5em 1.25em 1.2em;text-align:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:fit-content}@media (width > 575px){#pro-form-submit,.pro-waiting{min-width:200px}}.pro-waiting span:not(.atcb-icon-ical){animation-name:blink;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both;font-size:2.5em}.pro-field label span:not(.atcb-icon-ical){color:var(--form-error);font-weight:700;padding-left:2px}.pro-waiting span:not(.atcb-icon-ical):nth-child(2){animation-delay:.15s}.pro-waiting span:not(.atcb-icon-ical):nth-child(3){animation-delay:.3s}@keyframes blink{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}.pro #rsvp-sent-content{align-items:center;display:flex;flex-direction:column;gap:1.5em}#rsvp-status-group span{color:inherit}.atcb-modal-content .pro p{margin:0}.atcb-modal-content .pro p.pro-pt{margin-top:1.5em}.atcb-modal-content .pro .pro-field p{font-size:.9em}.pro .btn-flex{align-items:center;display:flex}.pro .atcb-modal-btn svg{fill:none;height:1.5em;margin-right:.5em;stroke:currentcolor;width:auto} \ No newline at end of file diff --git a/demo/public/atcb.css b/demo/public/atcb.css index a170f151..62130694 100644 --- a/demo/public/atcb.css +++ b/demo/public/atcb.css @@ -24,7 +24,7 @@ --base-font-size-m: 16px; --base-font-size-s: 16px; --font: arial, helvetica, sans-serif; - --keyboard-focus: #1e90ff; + --accent-color: #1e90ff; --wrapper-padding: 1px; --btn-background: #f5f5f5; --btn-hover-background: #fff; @@ -47,7 +47,11 @@ --list-padding: .8em; --list-shadow: rgba(0 0 0 / 20%) 2px 5px 18px -1px, rgba(0 0 0 / 40%) 2px 2px 10px -3px; --list-modal-shadow: rgba(0 0 0 / 60%) 3px 6px 40px -5px, rgba(0 0 0 / 60%) 3px 3px 15px -4px; - --modal-input-border-radius: 6px; + --input-border-radius: 6px; + --input-background: #fff; + --status-active-text: #fff; + --form-error: #c5372c; + --form-success: #338a36; --modal-text: #000; --modal-background: #f5f5f5; --modal-btn-bar: #c6c8cd; @@ -112,6 +116,10 @@ --modal-btn-secondary-text: #b8b8b8; --modal-shadow: drop-shadow(5px 8px 30px rgba(0 0 0 / 90%)); --modal-btn-shadow: rgba(255 255 255 / 5%) -2px -2px 10px,rgba(0 0 0 / 30%) 1px 2px 8px -1px; + --input-background: #434246; + --status-active-text: #000; + --form-error: #db8680; + --form-success: #99de9c; --date-btn-text: #ebebf0; --date-btn-text-secondary: #b5b5bd; --date-btn-cal-day-text: #101010; @@ -211,7 +219,7 @@ } .atcb-button:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-button:not([disabled]):focus, @@ -346,7 +354,7 @@ .atcb-list-item:focus-visible { background-color: var(--list-hover-background); - color: var(--keyboard-focus); + color: var(--accent-color); font-weight: 600; outline: none; } @@ -570,18 +578,29 @@ a.atcb-modal-btn.atcb-modal-btn-border { border: 1px solid var(--modal-btn-border); } -button.atcb-modal-btn:hover, -a.atcb-modal-btn:hover { +button.atcb-modal-btn:focus-visible, +a.atcb-modal-btn:focus-visible{ background-color: var(--modal-btn-hover-background); - box-shadow: var(--modal-btn-hover-shadow); - color: var(--modal-btn-hover-text); - text-decoration: none; + outline: 2px solid var(--accent-color); } -button.atcb-modal-btn:focus-visible, -a.atcb-modal-btn:focus-visible{ +button.atcb-button:disabled, +button.atcb-subevent-btn:disabled, +button.atcb-modal-btn:disabled, +a.atcb-modal-btn:disabled { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); + border-style: dashed; + box-shadow: none; +} + +button.atcb-modal-btn:not([disabled]):hover, +a.atcb-modal-btn:not([disabled]):hover { background-color: var(--modal-btn-hover-background); - outline: 2px solid var(--keyboard-focus); + box-shadow: var(--modal-btn-hover-shadow); + color: var(--modal-btn-hover-text); + text-decoration: none; } /****************************** @@ -618,7 +637,7 @@ a.atcb-modal-btn:focus-visible{ } .atcb-subevent-btn:focus-visible { - outline: 2px solid var(--keyboard-focus); + outline: 2px solid var(--accent-color); } .atcb-subevent-btn + .atcb-subevent-btn { @@ -855,8 +874,8 @@ a.atcb-modal-btn:focus-visible{ * Icon specifics */ -.atcb-icon.atcb-icon-ms365, .atcb-icon.outlookcom { - padding-bottom: .5em; +.atcb-icon.atcb-icon-ms365, .atcb-icon-outlookcom { + padding-bottom: .05em; } .atcb-icon.atcb-icon-apple, .atcb-icon.atcb-icon-ical { @@ -898,20 +917,60 @@ a.atcb-modal-btn:focus-visible{ * PRO Features */ +.rsvp-inline-wrapper { + filter: none; + min-width: 100%; +} + +.rsvp-inline-wrapper .atcb-modal-headline, +.rsvp-inline-wrapper .atcb-modal-content { + background-color: transparent; + border-radius: 0; + box-sizing: border-box; + width: 100%; +} + .pro { text-align: center; } +.pro ol, +.pro ul { + margin: auto; + text-align: left; + width: fit-content; +} + +.pro a, +.pro a:visited, +.pro a:active { + color: var(--modal-btn-text); + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: var(--accent-color); +} + +.pro a:hover { + color: var(--accent-color); + text-decoration: none; +} + .pro .pro-share-buttons { display: flex; + flex-wrap: wrap; justify-content: center; +} + +.pro #rsvp-atcb { + display: flex; flex-wrap: wrap; + gap: .3em; } .pro-form { + border-top: 1px solid var(--modal-btn-border); margin-top: 1.5em; padding-top: 1.5em; - border-top: 1px solid var(--modal-btn-border); text-align: left; } @@ -919,76 +978,89 @@ a.atcb-modal-btn:focus-visible{ padding-top: 1.3em; } -.pro-field-checkradio { - display: flex; +.pro-field-type-label + .pro-field-type-radio { + padding-top: 0; +} + +.pro-field-type-checkbox, +.pro-field-type-radio div { align-items: center; + display: flex; } -.pro-field-checkradio input { +.pro-field-type-checkbox input, +.pro-field-type-radio input { cursor: pointer; } .pro-field label { display: block; - opacity: .8; font-size: .9em; -} - -.pro-field .pro-checkradio-label { opacity: .7; - padding-left: .3em; - cursor: pointer; } -.pro-field label span:not(.atcb-icon-ical) { - font-weight: bold; - color: #f44336; - padding-left: 2px; +.pro-field-type-checkbox label, +.pro-field-type-radio label { + cursor: pointer; + opacity: .8; + padding-left: .3em; } .pro-field input[type="text"], .pro-field input[type="email"], .pro-field input[type="number"] { - width: 100%; + background-color: var(--input-background); + border: 1px solid var(--modal-btn-border); + border-radius: var(--input-border-radius); box-sizing: border-box; - padding: .7em; + caret-color: var(--accent-color); + color: var(--modal-text); font-size: .9em; opacity: .8; - border: 1px solid var(--modal-btn-border); - border-radius: var(--modal-input-border-radius); + padding: .7em; + transition: all .1s ease-in-out; + width: 100%; } -.pro-field input[type="text"]:hover, -.pro-field input[type="email"]:hover, -.pro-field input[type="number"]:hover { +.pro-field input[type="checkbox"], +.pro-field input[type="radio"] { + accent-color: var(--accent-color); + height: 1.2rem; + opacity: .8; + transition: all .1s ease-in-out; + width: 1.2em; +} + +.pro-field input:disabled, +.pro-field input:disabled + label { + cursor: not-allowed; + opacity: .75; + filter: brightness(95%); +} + +.pro-field input:not([disabled]):hover { opacity: 1; } .pro-field input[type="text"]:focus, .pro-field input[type="email"]:focus, .pro-field input[type="number"]:focus { - outline: none; - border-color: var(--keyboard-focus); -} - -.pro-field input[type="checkbox"], -.pro-field input[type="radio"] { - width: 1.2em; - height: 1.2rem; - accent-color: var(--keyboard-focus); + border-color: var(--accent-color); + outline: 1px solid var(--accent-color); } .pro-field input[type="checkbox"]:focus, .pro-field input[type="radio"]:focus { - outline-color: var(--keyboard-focus); + outline-color: var(--accent-color); + outline-width: 2px; } #submit-error { + color: var(--form-error); display: none; font-weight: bold; - color: #f44336; - text-align: center; padding-top: 1.5em; + text-align: center; } .pro-form.form-error #submit-error { @@ -996,25 +1068,122 @@ a.atcb-modal-btn:focus-visible{ } .pro-field input.error { - border: 2px solid #f44336; - accent-color: #f44336; + accent-color: var(--form-error); + border: 2px solid var(--form-error); } -.pro-field input.error + .pro-checkradio-label { +.pro-field input.error + label, +.pro-field:has(input.error) label { + color: var(--form-error); opacity: 1; - color: #f44336; +} + +#rsvp-status-group { + border-bottom: 1px solid var(--modal-btn-border); + font-weight: bold; + margin-bottom: 1.5em; + padding-bottom: 2em; + text-align: center; +} + +#rsvp-status-group .pro-field { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.2em; + justify-content: center; + margin-top: 1em; +} + +@media (width <= 575px) { + #rsvp-status-group .pro-field { + flex-direction: column; + } + + #rsvp-status-group .pro-field div { + width: 80%; + } +} + +#rsvp-status-group .pro-field div { + min-width: 28%; + position: relative; +} + +#rsvp-status-group input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; +} + +#rsvp-status-group label { + align-items: center; + border: 1px solid var(--modal-btn-text); + border-radius: var(--input-border-radius); + color: var(--modal-btn-text); + display: flex; + flex-direction: column; + font-weight: bold; + text-transform: uppercase; + justify-content: center; + opacity: .6; + padding: .8em; + transition: all .1s ease-in-out; + width: 100%; +} + +#rsvp-status-group label.status-confirmed { + border-color: var(--form-success); + color: var(--form-success); +} + +#rsvp-status-group label.status-declined { + border-color: var(--form-error); + color: var(--form-error); +} + +#rsvp-status-group input:checked + label { + background-color: var(--modal-text); + color: var(--status-active-text); + opacity: 1; + transform: scale(1.1); +} + +#rsvp-status-group input:focus-visible + label { + outline: 2px solid var(--accent-color); + outline-offset: 2px; +} + +#rsvp-status-group input:not([disabled]) + label:hover, +#rsvp-status-group input:not([disabled]):hover + label { + opacity: 1; + transform: scale(1.08); +} + +#rsvp-status-group input:checked + label.status-confirmed { + background-color: var(--form-success); +} + +#rsvp-status-group input:checked + label.status-declined { + background-color: var(--form-error); } #ty-success-msg, #rsvp-success-msg, +#rsvp-success-msg-email, #rsvp-success-msg-doi, #rsvp-success-msg-demo { + color: var(--form-success); display: none; font-weight: bold; - color: #4caf50; - text-align: center; - padding: 1.5em 0; line-height: 1.6em; + padding: 1.5em 0; + text-align: center; } #pro-form-submit { @@ -1024,18 +1193,18 @@ a.atcb-modal-btn:focus-visible{ } .pro-waiting { - box-sizing: border-box; - display: none; - margin: auto; - min-width: 150px; - text-align: center; - padding: .5em 1.25em 1.2em; background-color: var(--modal-btn-background); - color: var(--modal-btn-text); border: 1px solid var(--modal-btn-border); border-radius: var(--btn-border-radius); + box-sizing: border-box; + color: var(--modal-btn-text); cursor: wait; + display: none; line-height: .5em; + margin: auto; + min-width: 150px; + padding: .5em 1.25em 1.2em; + text-align: center; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; @@ -1049,19 +1218,25 @@ a.atcb-modal-btn:focus-visible{ } } -.pro-waiting span { - font-size: 2.5em; +.pro-waiting span:not(.atcb-icon-ical) { animation-name: blink; animation-duration: 1s; animation-iteration-count: infinite; animation-fill-mode: both; + font-size: 2.5em; +} + +.pro-field label span:not(.atcb-icon-ical) { + color: var(--form-error); + font-weight: bold; + padding-left: 2px; } -.pro-waiting span:nth-child(2) { +.pro-waiting span:not(.atcb-icon-ical):nth-child(2) { animation-delay: .15s; } -.pro-waiting span:nth-child(3) { +.pro-waiting span:not(.atcb-icon-ical):nth-child(3) { animation-delay: .3s; } @@ -1069,26 +1244,28 @@ a.atcb-modal-btn:focus-visible{ 0% { opacity: .2; } + 20% { opacity: 1; } + 100% { opacity: .2; } } .pro #rsvp-sent-content { + align-items: center; display: flex; flex-direction: column; - align-items: center; gap: 1.5em; } -.pro #rsvp-sent-content p { - margin-bottom: 2em; +/* overrides */ +#rsvp-status-group span { + color: inherit; } -/* overrides */ .atcb-modal-content .pro p { margin: 0; } @@ -1102,14 +1279,15 @@ a.atcb-modal-btn:focus-visible{ } .pro .btn-flex { - display: flex; align-items: center; + display: flex; } .pro .atcb-modal-btn svg { - height: 1.5em; - width: auto; fill: none; - stroke: currentcolor; + height: 1.5em; margin-right: .5em; -}:host { --btn-background: #ffa255; }:host(.atcb-dark), :host-context(html.atcb-dark):host(.atcb-bodyScheme), :host-context(body.atcb-dark):host(.atcb-bodyScheme) { --btn-background: #000; } \ No newline at end of file + stroke: currentcolor; + width: auto; +} +:host { --btn-background: #ffa255; }:host(.atcb-dark), :host-context(html.atcb-dark):host(.atcb-bodyScheme), :host-context(body.atcb-dark):host(.atcb-bodyScheme) { --btn-background: #000; } \ No newline at end of file diff --git a/src/atcb-decorate.js b/src/atcb-decorate.js index 949c4cd5..b5856e3b 100644 --- a/src/atcb-decorate.js +++ b/src/atcb-decorate.js @@ -184,6 +184,10 @@ function atcb_decorate_data_options(data) { } function atcb_decorate_data_style(data) { + // set inline if inlineRSVP + if (data.inlineRSVP) { + data.inline = true; + } // set default listStyle if (data.listStyle == null || data.listStyle == '') { data.listStyle = 'dropdown'; diff --git a/src/atcb-generate-pro.js b/src/atcb-generate-pro.js index 1c5546ef..373b41e4 100644 --- a/src/atcb-generate-pro.js +++ b/src/atcb-generate-pro.js @@ -50,10 +50,10 @@ function atcb_generate_ty(host, data) { } // define default headline if (!tyData.headline || tyData.headline === '') { - tyData.headline = atcb_translate_hook('thank_you', data); // TODO: Add to i18n strings + tyData.headline = atcb_translate_hook('thankyou', data) + '!'; } // prepare content with... - let tyContent = '

' + atcb_translate_hook('sent_successfully', data) + '

'; // TODO: Add to i18n strings + let tyContent = '

' + atcb_translate_hook('form.success', data) + '

'; // intro text if (tyData.text && tyData.text !== '') { tyContent += atcb_rewrite_html_elements(tyData.text); @@ -69,7 +69,7 @@ function atcb_generate_ty(host, data) { ${copyIcon} ${atcb_translate_hook('label.share.copy', data)} -

`; // TODO: Add to i18n strings +

`; } // form, if type = form let header = {}; @@ -78,7 +78,7 @@ function atcb_generate_ty(host, data) { if (tyData.button_label && tyData.button_label !== '') { return tyData.button_label; } - return atcb_translate_hook('submit', data); // TODO: Add to i18n strings + return atcb_translate_hook('submit', data); })(); tyContent += '
'; const customForm = atcb_build_form(tyData.fields, data.identifier + '-ty'); @@ -107,7 +107,7 @@ function atcb_generate_ty(host, data) { const copyBtn = tyHost.getElementById('atcb-ty-share-copy'); copyBtn.addEventListener('click', function () { atcb_copy_to_clipboard(tyData.url); - copyBtn.innerHTML = copiedIcon + atcb_translate_hook('label.share.copied', data); // TODO: Add to i18n strings + copyBtn.innerHTML = copiedIcon + atcb_translate_hook('label.share.copied', data) + '!'; setTimeout(function () { copyBtn.innerHTML = copyIcon + atcb_translate_hook('label.share.copy', data); }, 3000); @@ -131,7 +131,7 @@ function atcb_generate_ty(host, data) { tyFormSubmit.style.display = 'none'; let valid = atcb_validate_form(tyHost, tyData.fields); if (!valid) { - errorMsg.textContent = atcb_translate_hook('label.form.error.required', data); + errorMsg.textContent = atcb_translate_hook('form.error.required', data) + '.'; } // submit data if (valid) { @@ -165,7 +165,7 @@ function atcb_generate_ty(host, data) { tyHost.getElementById('ty-content').style.display = 'none'; return; } - errorMsg.textContent = atcb_translate_hook('label.form.error.sending', data); + errorMsg.textContent = atcb_translate_hook('form.error.sending', data) + '.'; } tyForm.classList.add('form-error'); tyFormSubmitting.style.display = 'none'; @@ -214,9 +214,11 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = return false; })(); if (expired || bookedOut) { - data.disabled = true; data.blockInteraction = true; } + if (data.blockInteraction) { + data.disabled = true; + } // if we are not calling the modal directly and do not need to render it inline, we render a button first if (!directModal && !inline && triggerEl) { // generate the wrapper div @@ -232,7 +234,6 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = buttonTrigger.classList.add('atcb-button', 'atcb-click', 'atcb-single'); if (data.disabled) { buttonTrigger.setAttribute('disabled', true); - buttonTrigger.style.cssText = 'opacity: .75; cursor: not-allowed; filter: brightness(95%); border-style: dashed; box-shadow: none;'; } if (data.hideTextLabelButton) { buttonTrigger.classList.add('atcb-no-text'); @@ -246,7 +247,7 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = return atcb_translate_hook('label.rsvp.expired', data); } if (bookedOut) { - return atcb_translate_hook('label.rsvp.booked_out', data); + return atcb_translate_hook('label.rsvp.bookedout', data); } return atcb_translate_hook('label.rsvp', data); })(); @@ -264,22 +265,23 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = let rsvpContent = '
'; // define default headline if (!rsvpData.headline || rsvpData.headline === '') { - rsvpData.headline = atcb_translate_hook('rsvp', data); // TODO: Add to i18n strings + rsvpData.headline = atcb_translate_hook('label.rsvp', data); } // show success message, if already sent - const sentStatus = localStorage.getItem(data.proKey + '-rsvp-sent'); - if (sentStatus && sentStatus === 'true') { + const sentStatus = localStorage.getItem(data.proKey + '-rsvp-sent') || false; + if (sentStatus) { rsvpContent += '
'; - rsvpContent += '

' + atcb_translate_hook('already sent', data) + '

'; // TODO: Add to i18n strings + rsvpContent += '

' + atcb_translate_hook('form.success.already', data) + '

'; // button - rsvpContent += '
'; - rsvpContent += ''; + if (!data.hideButton) rsvpContent += '
'; + if (data.inlineRsvp) rsvpContent += ''; rsvpContent += '
'; } - rsvpContent += '
DOI
'; - rsvpContent += '
Thanks -> Button
'; - rsvpContent += '
Demo
'; - rsvpContent += '
'; + rsvpContent += '
' + atcb_translate_hook('form.success.sent', data) + '
'; + rsvpContent += '
' + atcb_translate_hook('form.success.email', data) + '
'; + rsvpContent += '
' + atcb_translate_hook('form.success.doi', data) + '
'; + rsvpContent += '
' + atcb_translate_hook('form.success.demo', data) + '
'; + rsvpContent += '
'; // intro text if (rsvpData.text && rsvpData.text !== '') { rsvpContent += atcb_rewrite_html_elements(rsvpData.text); @@ -288,44 +290,53 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = // add status, amount, and email fields based on situation const staticID = data.proKey || 'demo-rsvp'; if (rsvpData.initial_confirmation === false) { + rsvpContent += '
'; + rsvpContent += '

' + atcb_translate_hook('form.status', data) + '

'; rsvpContent += - '
'; + '-rsvp-status-confirmed" class="status-confirmed">' + + atcb_translate_hook('form.status.confirmed', data) + + '
'; if (rsvpData.maybe_option === true) { rsvpContent += - '
'; + '-rsvp-status-undecided" class="status-undecided">' + + atcb_translate_hook('form.status.undecided', data) + + '
'; } rsvpContent += - '
'; + '-rsvp-status-declined" class="status-declined">' + + atcb_translate_hook('form.status.declined', data) + + '
'; + rsvpContent += '
'; } else { hiddenContent += ''; } @@ -333,8 +344,8 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = if (maxAmount === 1) { hiddenContent += ''; } else { - rsvpContent += '
'; - rsvpContent += '
'; + rsvpContent += '
'; + rsvpContent += '
'; } const attendee = (function () { if (data.attendee && data.attendee !== '') { @@ -349,17 +360,21 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = if (attendee !== '') { hiddenContent += ''; } else { - rsvpContent += '
'; - rsvpContent += '
'; + rsvpContent += '
'; + rsvpContent += '
'; } // add custom fields - const customForm = atcb_build_form(rsvpData.fields, data.identifier + '-rsvp'); + const customForm = atcb_build_form(rsvpData.fields, data.identifier + '-rsvp', data.disabled); rsvpData.fields = customForm.fields; rsvpContent += customForm.html; rsvpContent += hiddenContent; rsvpContent += '

'; rsvpContent += - '

...

'; + '

...

'; rsvpContent += '
'; rsvpContent += '
'; @@ -372,26 +387,68 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = })(); if (!inline || directModal) { atcb_set_fullsize(rsvpHost.querySelector('.atcb-modal-host-initialized')); - atcb_create_modal(rsvpHost, data, undefined, rsvpData.headline, rsvpContent, [], [], keyboardTrigger, {}, false); + atcb_create_modal( + rsvpHost, + data, + undefined, + rsvpData.headline, + rsvpContent, + [ + { type: 'none', label: atcb_translate_hook('label.rsvp.restart', data), small: true, primary: true, id: 'pro-form-restart' }, + { type: 'close', label: atcb_translate_hook('close', data), small: true, id: 'modal-btn-close' }, + { type: 'close', label: atcb_translate_hook('cancel', data), small: true, id: 'modal-btn-cancel' }, + ], + [], + keyboardTrigger, + {}, + false, + ); } else { const rsvpInlineWrapper = document.createElement('div'); - rsvpInlineWrapper.classList.add('rsvp-wrapper'); + rsvpInlineWrapper.classList.add('atcb-modal-box', 'rsvp-inline-wrapper'); if (data.rtl) { rsvpInlineWrapper.classList.add('atcb-rtl'); } triggerEl.append(rsvpInlineWrapper); - rsvpInlineWrapper.innerHTML = rsvpContent; + const rsvpInlineHeadline = document.createElement('div'); + rsvpInlineHeadline.classList.add('atcb-modal-headline'); + rsvpInlineWrapper.append(rsvpInlineHeadline); + rsvpInlineHeadline.innerHTML = rsvpData.headline; + const rsvpInlineContent = document.createElement('div'); + rsvpInlineContent.classList.add('atcb-modal-content'); + rsvpInlineWrapper.append(rsvpInlineContent); + if (expired) { + rsvpInlineContent.innerHTML = '

' + atcb_translate_hook('label.rsvp.expired', data) + '

'; + return; + } else if (bookedOut) { + rsvpInlineContent.innerHTML = '

' + atcb_translate_hook('label.rsvp.bookedout', data) + '

'; + return; + } else { + rsvpInlineContent.innerHTML = rsvpContent; + } } + const closeBtn = rsvpHost.getElementById('modal-btn-close'); + const cancelBtn = rsvpHost.getElementById('modal-btn-cancel'); + const restartBtn = rsvpHost.getElementById('pro-form-restart'); atcb_log_event('openRSVP', data.identifier, data.identifier); if (data.debug) { console.log('RSVP form for "' + data.identifier + '" created'); } // if we are on the already-sent-screen, we render an atcb if not disabled - if (sentStatus && sentStatus === 'true') { + if (sentStatus) { + if (cancelBtn) cancelBtn.style.display = 'none'; const atcbHost = rsvpHost.getElementById('rsvp-atcb'); if (atcbHost && !data.hideButton) { - atcb_generate_button(host, atcbHost, data); + // make a copy of the data + const atcbData = JSON.parse(JSON.stringify(data)); + // force individual buttons without label + atcbData.hideTextLabelButton = true; + atcbData.buttonsList = true; + atcb_generate_button(host, atcbHost, atcbData); } + } else { + if (closeBtn) closeBtn.style.display = 'none'; + if (restartBtn) restartBtn.style.display = 'none'; } // validation and processing of the form // validate and submit @@ -417,7 +474,7 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = valid = false; } if (!valid) { - errorMsg.textContent = atcb_translate_hook('label.form.error.required', data); + errorMsg.textContent = atcb_translate_hook('form.error.required', data) + '.'; } // submit data if (valid) { @@ -426,6 +483,8 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = rsvpHost.getElementById('rsvp-success-msg-demo').style.display = 'block'; rsvpHost.getElementById('rsvp-content').style.display = 'none'; atcb_log_event('successRSVP', data.identifier, data.identifier); + if (cancelBtn) cancelBtn.style.display = 'none'; + if (closeBtn) closeBtn.style.display = 'block'; localStorage.setItem(data.proKey + '-rsvp-sent', true); // TODO: Remove return; } @@ -465,28 +524,31 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = } const request = await sendPostRequest('https://rsvp.add-to-calendar-pro.com/24586219-9910-41fe-9b59-df53de9db7af', bodyData, { rsvp: true }); if (request === 'doi' || request === true) { + rsvpHost.getElementById('rsvp-success-msg').style.display = 'block'; if (request === 'doi') { rsvpHost.getElementById('rsvp-success-msg-doi').style.display = 'block'; } else { - rsvpHost.getElementById('rsvp-success-msg').style.display = 'block'; + rsvpHost.getElementById('rsvp-success-msg-email').style.display = 'block'; } rsvpHost.getElementById('rsvp-content').style.display = 'none'; + if (cancelBtn) cancelBtn.style.display = 'none'; + if (closeBtn) closeBtn.style.display = 'block'; atcb_log_event('successRSVP', data.identifier, data.identifier); localStorage.setItem(data.proKey + '-rsvp-sent', true); return; } if (request.error && request.error === 2) { - errorMsg.textContent = atcb_translate_hook('label.form.error.email', data); + errorMsg.textContent = atcb_translate_hook('form.error.email', data) + '.'; } else if (request.error && request.error === 5) { - errorMsg.textContent = atcb_translate_hook('label.rsvp.expired', data); + errorMsg.textContent = atcb_translate_hook('label.rsvp.expired', data) + '.'; } else if (request.error && request.error === 6) { if (amount > 1) { - errorMsg.textContent = atcb_translate_hook('label.rsvp.booked_out_multiple', data); + errorMsg.textContent = atcb_translate_hook('form.error.bookedoutmany', data) + '.'; } else { - errorMsg.textContent = atcb_translate_hook('label.rsvp.booked_out', data); + errorMsg.textContent = atcb_translate_hook('label.rsvp.bookedout', data) + '.'; } } else { - errorMsg.textContent = atcb_translate_hook('label.form.error.sending', data); + errorMsg.textContent = atcb_translate_hook('form.error.sending', data) + '.'; } } rsvpForm.classList.add('form-error'); @@ -504,6 +566,9 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = e.preventDefault(); rsvpHost.getElementById('rsvp-sent-content').style.display = 'none'; rsvpHost.getElementById('rsvp-content').style.display = 'block'; + if (closeBtn) closeBtn.style.display = 'none'; + if (restartBtn) restartBtn.style.display = 'none'; + if (cancelBtn) cancelBtn.style.display = 'block'; }); rsvpRestart.addEventListener('keyup', function (event) { if (event.key === 'Enter') { @@ -514,7 +579,7 @@ async function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = } // SHARED FORM FUNCTIONS -function atcb_build_form(fields, identifier = '') { +function atcb_build_form(fields, identifier = '', disabled = false) { /*! * @preserve * PER LICENSE AGREEMENT, YOU ARE NOT ALLOWED TO REMOVE OR CHANGE THIS FUNCTION! @@ -541,16 +606,16 @@ function atcb_build_form(fields, identifier = '') { fieldHtml += '
'; } if (field.type !== 'hidden' && i === n) { - fieldHtml += '
'; + fieldHtml += '
'; } if (field.type === 'label') { fieldHtml += '

' + fieldLabel + '

'; } else { if (field.type === 'radio') { - fieldHtml += '
'; + fieldHtml += '
'; } // add label - if ((field.type === 'text' || field.type === 'number') && fieldLabel !== '') { + if ((field.type === 'text' || field.type === 'number') && (fieldLabel !== '' || field.required)) { fieldHtml += ''; } // add input @@ -569,15 +634,17 @@ function atcb_build_form(fields, identifier = '') { field.fieldId + '" placeholder="' + fieldPlaceholder + - '" aria-label="' + + '" ' + + (disabled && 'disabled') + + ' aria-label="' + fieldLabel + '" value="' + fieldValue + '" />'; } // add label for checkboxes and radio buttons - if ((field.type === 'checkbox' || field.type === 'radio') && fieldLabel !== '') { - fieldHtml += ''; + if ((field.type === 'checkbox' || field.type === 'radio') && (fieldLabel !== '' || field.required)) { + fieldHtml += ''; } if (field.type === 'radio') { fieldHtml += '
'; diff --git a/src/atcb-generate.js b/src/atcb-generate.js index 9e8aa5e6..e9541099 100644 --- a/src/atcb-generate.js +++ b/src/atcb-generate.js @@ -88,7 +88,7 @@ function atcb_generate_label(host, data, parent, type, icon = false, text = '', 'click', atcb_debounce_leading(() => { if (oneOption) { - host.querySelector('#' + parent.id).blur(); + host.querySelector('#' + parent.id)?.blur(); atcb_log_event('openSingletonLink', parent.id, data.identifier); } else { atcb_toggle(host, 'close'); @@ -101,7 +101,7 @@ function atcb_generate_label(host, data, parent, type, icon = false, text = '', if (event.key === 'Enter') { event.preventDefault(); if (oneOption) { - host.querySelector('#' + parent.id).blur(); + host.querySelector('#' + parent.id)?.blur(); atcb_log_event('openSingletonLink', parent.id, data.identifier); } else { atcb_toggle(host, 'close'); @@ -162,7 +162,7 @@ function atcb_generate_label_content(data, parent, type, icon, text, oneOption) } } // add icon and text label (not in the date style trigger case) - if (data.buttonStyle == 'date' && (type == 'trigger' || oneOption)) { + if (data.buttonStyle === 'date' && (type == 'trigger' || oneOption)) { return; } if (icon) { @@ -206,7 +206,6 @@ function atcb_generate_button(host, button, data) { buttonTrigger.classList.add('atcb-button'); if (data.disabled) { buttonTrigger.setAttribute('disabled', true); - buttonTrigger.style.cssText = 'opacity: .75; cursor: not-allowed; filter: brightness(95%); border-style: dashed; box-shadow: none;'; } if (data.hideTextLabelButton) { buttonTrigger.classList.add('atcb-no-text'); @@ -221,7 +220,7 @@ function atcb_generate_button(host, button, data) { buttonTrigger.setAttribute('aria-expanded', false); // aria-expanded default value on button generate buttonTriggerWrapper.append(buttonTrigger); // generate the label incl. eventListeners - if (data.buttonStyle == 'date') { + if (data.buttonStyle === 'date') { atcb_generate_date_button(data, buttonTrigger); } // if there is only 1 calendar option, we directly show this at the button, but with the trigger's label text (small exception for the date style) @@ -422,21 +421,21 @@ function atcb_create_modal(host, data, icon = '', headline, content = '', button // set overlay size just to be sure atcb_set_fullsize(bgOverlay); // add icon - if (icon != '' && !data.hideIconModal) { + if (icon !== '' && !data.hideIconModal) { const modalIcon = document.createElement('div'); modalIcon.classList.add('atcb-modal-icon'); modalIcon.innerHTML = atcbIcon[`${icon}`]; modal.append(modalIcon); } // add headline - if (headline && headline != '') { + if (headline && headline !== '') { const modalHeadline = document.createElement('div'); modalHeadline.classList.add('atcb-modal-headline'); modalHeadline.textContent = headline; modal.append(modalHeadline); } // add text content - if (content != '') { + if (content !== '') { const modalContent = document.createElement('div'); modalContent.classList.add('atcb-modal-content'); modalContent.innerHTML = content; @@ -461,8 +460,8 @@ function atcb_create_modal(host, data, icon = '', headline, content = '', button modalsubEventsContent.append(modalSubEventButton); atcb_generate_date_button(data, modalSubEventButton, i); // interaction only if not overdue and blocked - if (!data.dates[i - 1].overdue || data.pastDateHandling == 'none') { - if (i == 1 && keyboardTrigger) { + if (!data.dates[i - 1].overdue || data.pastDateHandling === 'none') { + if (i === 1 && keyboardTrigger) { modalSubEventButton.focus(); } modalSubEventButton.addEventListener( @@ -476,12 +475,11 @@ function atcb_create_modal(host, data, icon = '', headline, content = '', button } else { // if blocked, we also add styles modalSubEventButton.setAttribute('disabled', true); - modalSubEventButton.style.cssText = 'opacity: .75; cursor: not-allowed; filter: brightness(95%); border-style: dashed; box-shadow: none;'; } } } - // add buttons (array of objects; attributes: href, type, label, primary(boolean), small(boolean)) - if (buttons.length == 0) { + // add buttons (array of objects; attributes: href, type, label, primary(boolean), small(boolean), id) + if (buttons.length === 0) { buttons.push({ type: 'close', label: atcb_translate_hook('close', data), small: true }); } const modalButtons = document.createElement('div'); @@ -489,7 +487,7 @@ function atcb_create_modal(host, data, icon = '', headline, content = '', button modal.append(modalButtons); buttons.forEach((button, index) => { let modalButton; - if (button.href != null && button.href != '') { + if (button.href && button.href !== '') { modalButton = document.createElement('a'); modalButton.setAttribute('target', atcbDefaultTarget); modalButton.setAttribute('href', button.href); @@ -498,6 +496,9 @@ function atcb_create_modal(host, data, icon = '', headline, content = '', button modalButton = document.createElement('button'); modalButton.type = 'button'; } + if (button.id && button.id !== '') { + modalButton.id = button.id; + } modalButton.classList.add('atcb-modal-btn'); if (button.primary) { modalButton.classList.add('atcb-modal-btn-primary'); @@ -505,12 +506,12 @@ function atcb_create_modal(host, data, icon = '', headline, content = '', button if (button.small) { modalButton.classList.add('btn-small'); } - if (button.label == null || button.label == '') { + if (!button.label || button.label === '') { button.label = atcb_translate_hook('modal.button.default', data); } modalButton.textContent = button.label; modalButtons.append(modalButton); - if (index == 0 && subEvents.length < 2 && keyboardTrigger) { + if (index === 0 && subEvents.length < 2 && keyboardTrigger) { modalButton.focus(); } switch (button.type) { diff --git a/src/atcb-i18n.js b/src/atcb-i18n.js index 213f4f9a..4cd31b95 100644 --- a/src/atcb-i18n.js +++ b/src/atcb-i18n.js @@ -43,7 +43,6 @@ const i18nStrings = { 'label.addtocalendar': 'Add to Calendar', ical: 'iCal File', ...calendarNames, - close: 'Close', 'modal.button.default': 'Click me', 'modal.webview.ical.h': 'Open your browser', 'modal.webview.ical.text': 'Unfortunately, in-app browsers have problems with the way we generate the calendar file.', @@ -60,16 +59,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Open now the Yahoo Calendar.
  2. Click the "Actions" tab.
  3. Hit "Follow Other Calendars".
  4. Set a name and paste the clipboard content into the url field.
', 'modal.subscribe.yahoo.button': 'Open Yahoo Calendar', 'modal.crios.google.text': 'If you are using the Google Calendar app and it is not already open in the background, unfortunately, you might need to start this process twice.', + close: 'Close', continue: 'Continue', cancel: 'Cancel', expired: 'Expired', recurring: 'Recurring', + thankyou: 'Thank you', + submit: 'Submit', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Expired', + 'label.rsvp.bookedout': 'Booked out', + 'label.rsvp.restart': 'New RSVP Reply', + 'label.share.email': 'Share via Email', + 'label.share.copy': 'Copy Link', + 'label.share.copied': 'Copied', + 'label.share.email.subject': 'Save this event', + 'form.status': 'Are you joining?', + 'form.status.confirmed': 'Yes', + 'form.status.undecided': 'Maybe', + 'form.status.declined': 'No', + 'form.amount': 'Number of attendees', + 'form.max': 'max.', + 'form.email': 'Email address', + 'form.error.required': 'You did not properly fill all required fields', + 'form.error.sending': 'There was a problem sending your response. Please try again later', + 'form.error.email': 'Your email address is not valid', + 'form.error.bookedoutmany': 'Booked out - try with less attendees', + 'form.success': 'Sent successfully!', + 'form.success.sent': 'Your reply has been sent. Thank you!', + 'form.success.email': 'You should have received a confirmation email.', + 'form.success.doi': 'To make it count, you now need to open the confirmation link in the email we just sent you.', + 'form.success.demo': 'Thank you. The RSVP demo ends here.', + 'form.success.already': 'You already replied.', }, de: { 'label.addtocalendar': 'Im Kalender speichern', ical: 'iCal-Datei', ...calendarNames, - close: 'Schließen', 'modal.button.default': 'Klick mich', 'modal.webview.ical.h': 'Öffne deinen Browser', 'modal.webview.ical.text': 'Leider haben In-App-Browser Probleme mit der Art, wie wir Kalender-Dateien erzeugen.', @@ -86,16 +112,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Öffne den Yahoo-Kalender.
  2. Klicke auf den "Aktionen" Tab.
  3. Wähle "Weiteren Kalendern folgen".
  4. Wähle einen Namen und füge die URL aus deiner Zwischenablage in das URL-Feld ein.
', 'modal.subscribe.yahoo.button': 'Yahoo-Kalender öffnen', 'modal.crios.google.text': 'Wenn du die Google Calendar App verwendest und diese nicht bereits im Hintergrund geöffnet ist, musst du diesen Vorgang leider möglicherweise zweimal starten.', + close: 'Schließen', continue: 'Weiter', cancel: 'Abbrechen', expired: 'Abgelaufen', recurring: 'Wiederkehrend', + thankyou: 'Danke', + submit: 'Absenden', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Abgelaufen', + 'label.rsvp.bookedout': 'Ausgebucht', + 'label.rsvp.restart': 'Neue RSVP-Antwort', + 'label.share.email': 'Per E-Mail teilen', + 'label.share.copy': 'Link kopieren', + 'label.share.copied': 'Kopiert', + 'label.share.email.subject': 'Merke dir diesen Termin', + 'form.status': 'Nimmst du teil?', + 'form.status.confirmed': 'Ja', + 'form.status.undecided': 'Vielleicht', + 'form.status.declined': 'Nein', + 'form.amount': 'Anzahl der Teilnehmer', + 'form.max': 'max.', + 'form.email': 'E-Mail-Adresse', + 'form.error.required': 'Du hast nicht alle erforderlichen Felder korrekt ausgefüllt', + 'form.error.sending': 'Es gab ein Problem beim Senden deiner Antwort. Bitte versuche es später noch einmal', + 'form.error.email': 'Deine E-Mail-Adresse ist nicht gültig', + 'form.error.bookedoutmany': 'Ausgebucht - versuche es mit weniger Teilnehmern', + 'form.success': 'Erfolgreich gesendet!', + 'form.success.sent': 'Deine Antwort wurde gesendet. Danke!', + 'form.success.email': 'Du solltest eine Bestätigungs-E-Mail erhalten haben.', + 'form.success.doi': 'Damit deine Antwort gültig ist, musst du jetzt noch den Bestätigungslink in der E-Mail öffnen, die wir dir gerade geschickt haben.', + 'form.success.demo': 'Danke. Die RSVP-Demo endet hier.', + 'form.success.already': 'Du hast bereits eine Antwort gesendet.', }, es: { 'label.addtocalendar': 'Añadir al Calendario', ical: 'iCal Ficha', ...calendarNames, - close: 'Ciérralo', 'modal.button.default': 'Haz clic mí', 'modal.webview.ical.h': 'Abra su browser', 'modal.webview.ical.text': 'Lamentablemente, los browsers in-app tienen problemas con la forma en que generamos el archivo del calendario.', @@ -112,16 +165,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Abra el calendario de Yahoo.
  2. Haga clic en la pestaña "Acciones".
  3. Seleccione "Seguir otros calendarios".
  4. Elige un nombre y pega la URL de tu portapapeles en el campo URL.
', 'modal.subscribe.yahoo.button': 'Abrir calendario de Yahoo', 'modal.crios.google.text': 'Si estás utilizando la aplicación Google Calendar y no está abierta en segundo plano, lamentablemente, es posible que necesites iniciar este proceso dos veces.', + close: 'Ciérralo', continue: 'Continuar', cancel: 'Cancelar', expired: 'Caducada', recurring: 'Periódica', + thankyou: 'Gracias', + submit: 'Enviar', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Expirado', + 'label.rsvp.bookedout': 'Completo', + 'label.rsvp.restart': 'Nueva respuesta RSVP', + 'label.share.email': 'Compartir por E-mail', + 'label.share.copy': 'Copiar enlace', + 'label.share.copied': 'Copiado', + 'label.share.email.subject': 'Recuerda esta fecha', + 'form.status': '¿Participarás?', + 'form.status.confirmed': 'Sí', + 'form.status.undecided': 'Tal vez', + 'form.status.declined': 'No', + 'form.amount': 'Número de participantes', + 'form.max': 'máx.', + 'form.email': 'Dirección de E-mail', + 'form.error.required': 'No has completado correctamente todos los campos requeridos', + 'form.error.sending': 'Hubo un problema al enviar tu respuesta. Por favor, inténtalo de nuevo más tarde', + 'form.error.email': 'Tu dirección de E-mail no es válida', + 'form.error.bookedoutmany': 'Completo - intenta con menos participantes', + 'form.success': 'Enviado con éxito!', + 'form.success.sent': 'Tu respuesta ha sido enviada. ¡Gracias!', + 'form.success.email': 'Deberías haber recibido un E-mail de confirmación.', + 'form.success.doi': 'Para que tu respuesta sea válida, ahora debes abrir el enlace de confirmación en el E-mail que acabamos de enviarte.', + 'form.success.demo': 'Gracias. La demostración de RSVP termina aquí.', + 'form.success.already': 'Ya has enviado una respuesta.', }, pt: { 'label.addtocalendar': 'Incluir no Calendário', ical: 'Ficheiro iCal', ...calendarNames, - close: 'Fechar', 'modal.button.default': 'Clicar-me', 'modal.webview.ical.h': 'Abra o seu browser', 'modal.webview.ical.text': 'Infelizmente, os navegadores em tampas têm problemas com a forma como geramos o ficheiro de calendário.', @@ -138,16 +218,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Abrir o calendário do Yahoo.
  2. Clique no separador "Acções".
  3. Seleccione "Seguir outros calendários".
  4. Escolha um nome e cole o URL da sua área de transferência no campo URL.
', 'modal.subscribe.yahoo.button': 'Abra o Calendário do Yahoo', 'modal.crios.google.text': 'Se estiver usando o aplicativo Google Calendar e ele não estiver aberto em segundo plano, infelizmente, você pode precisar iniciar este processo duas vezes.', + close: 'Fechar', continue: 'Continuar', cancel: 'Cancelar', expired: 'Expirada', recurring: 'Recorrente', + thankyou: 'Obrigado', + submit: 'Enviar', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Expirado', + 'label.rsvp.bookedout': 'Esgotado', + 'label.rsvp.restart': 'Nova resposta RSVP', + 'label.share.email': 'Compartilhar por e-mail', + 'label.share.copy': 'Copiar link', + 'label.share.copied': 'Copiado', + 'label.share.email.subject': 'Lembre-se desta data', + 'form.status': 'Você vai participar?', + 'form.status.confirmed': 'Sim', + 'form.status.undecided': 'Talvez', + 'form.status.declined': 'Não', + 'form.amount': 'Número de participantes', + 'form.max': 'máx.', + 'form.email': 'Endereço de e-mail', + 'form.error.required': 'Você não preencheu todos os campos obrigatórios corretamente', + 'form.error.sending': 'Houve um problema ao enviar sua resposta. Por favor, tente novamente mais tarde', + 'form.error.email': 'Seu endereço de e-mail não é válido', + 'form.error.bookedoutmany': 'Esgotado - tente com menos participantes', + 'form.success': 'Enviado com sucesso!', + 'form.success.sent': 'Sua resposta foi enviada. Obrigado!', + 'form.success.email': 'Você deve ter recebido um e-mail de confirmação.', + 'form.success.doi': 'Para que sua resposta seja válida, você precisa abrir o link de confirmação no e-mail que acabamos de enviar.', + 'form.success.demo': 'Obrigado. A demonstração RSVP termina aqui.', + 'form.success.already': 'Você já enviou uma resposta.', }, fr: { 'label.addtocalendar': "Ajouter à l'Agenda", ical: 'Fichier iCal', ...calendarNames, - close: 'Fermer', 'modal.button.default': 'Cliquez-moi', 'modal.webview.ical.h': 'Ouvrez votre navigateur', 'modal.webview.ical.text': 'Malheureusement, les navigateurs intégrés aux applications ont des problèmes avec la manière dont nous créons les fichiers de calendrier.', @@ -164,16 +271,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Ouvrez l’Agenda Yahoo ;
  2. Cliquez sur l’onglet « Actions » ;
  3. Sélectionnez « Suivre d’autres agendas » ;
  4. Choisissez un nom et collez le contenu de votre presse-papier dans le champ URL.
', 'modal.subscribe.yahoo.button': 'Ouvrir le calendrier Yahoo', 'modal.crios.google.text': "Si vous utilisez l’application Google Calendar et qu’elle n'est pas déjà ouverte en arrière-plan, vous devrez malheureusement lancer ce processus deux fois.", + close: 'Fermer', continue: 'Continuer', cancel: 'Annuler', expired: 'Expiré', recurring: 'Récurrent', + thankyou: 'Merci', + submit: 'Envoyer', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Expiré', + 'label.rsvp.bookedout': 'Complet', + 'label.rsvp.restart': 'Nouvelle réponse RSVP', + 'label.share.email': 'Partager par E-mail', + 'label.share.copy': 'Copier le lien', + 'label.share.copied': 'Copié', + 'label.share.email.subject': 'Retenez cette date', + 'form.status': 'Participeras-tu ?', + 'form.status.confirmed': 'Oui', + 'form.status.undecided': 'Peut-être', + 'form.status.declined': 'Non', + 'form.amount': 'Nombre de participants', + 'form.max': 'max.', + 'form.email': 'Adresse E-mail', + 'form.error.required': "Tu n'as pas correctement rempli tous les champs requis", + 'form.error.sending': "Il y a eu un problème lors de l'envoi de ta réponse. Veuillez réessayer plus tard", + 'form.error.email': "Ton adresse E-mail n'est pas valide", + 'form.error.bookedoutmany': 'Complet - essaie avec moins de participants', + 'form.success': 'Envoyé avec succès!', + 'form.success.sent': 'Ta réponse a été envoyée. Merci!', + 'form.success.email': 'Tu devrais avoir reçu un E-mail de confirmation.', + 'form.success.doi': "Pour que ta réponse soit valide, tu dois maintenant ouvrir le lien de confirmation dans l'E-mail que nous venons de t'envoyer.", + 'form.success.demo': 'Merci. La démo RSVP se termine ici.', + 'form.success.already': 'Tu as déjà envoyé une réponse.', }, nl: { 'label.addtocalendar': 'Opslaan in Agenda', ical: 'iCal File', ...calendarNames, - close: 'Sluiten', 'modal.button.default': 'Klik me', 'modal.webview.ical.h': 'Open uw browser', 'modal.webview.ical.text': 'Helaas hebben in-app browsers problemen met de manier waarop wij kalenderbestanden maken.', @@ -190,16 +324,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Open de Yahoo calendar.
  2. Klik op de "Acties" tab.
  3. Selecteer "Volg Andere Agenda\'s".
  4. Kies een naam en plak de URL van uw klembord in het URL-veld.
', 'modal.subscribe.yahoo.button': 'Open Yahoo Agenda', 'modal.crios.google.text': 'Als je de Google Calendar-app gebruikt en deze is niet al geopend op de achtergrond, dan zul je helaas mogelijk dit proces twee keer moeten starten.', + close: 'Sluiten', continue: 'Doorgaan', cancel: 'Annuleren', expired: 'Verlopen', recurring: 'Terugkerend', + thankyou: 'Bedankt', + submit: 'Versturen', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Verlopen', + 'label.rsvp.bookedout': 'Volgeboekt', + 'label.rsvp.restart': 'Nieuwe RSVP-antwoord', + 'label.share.email': 'Delen via E-mail', + 'label.share.copy': 'Link kopiëren', + 'label.share.copied': 'Gekopieerd', + 'label.share.email.subject': 'Onthoud deze datum', + 'form.status': 'Neem je deel?', + 'form.status.confirmed': 'Ja', + 'form.status.undecided': 'Misschien', + 'form.status.declined': 'Nee', + 'form.amount': 'Aantal deelnemers', + 'form.max': 'max.', + 'form.email': 'E-mailadres', + 'form.error.required': 'Je hebt niet alle vereiste velden correct ingevuld', + 'form.error.sending': 'Er was een probleem met het versturen van je antwoord. Probeer het later opnieuw', + 'form.error.email': 'Je e-mailadres is niet geldig', + 'form.error.bookedoutmany': 'Volgeboekt - probeer het met minder deelnemers', + 'form.success': 'Succesvol verstuurd!', + 'form.success.sent': 'Je antwoord is verzonden. Bedankt!', + 'form.success.email': 'Je zou een bevestigingsmail moeten hebben ontvangen.', + 'form.success.doi': 'Om je antwoord geldig te maken, moet je nu de bevestigingslink in de e-mail openen die we je zojuist hebben gestuurd.', + 'form.success.demo': 'Bedankt. De RSVP-demo eindigt hier.', + 'form.success.already': 'Je hebt al een antwoord gestuurd.', }, tr: { 'label.addtocalendar': 'Takvime Ekle', ical: 'iCal Dosyası', ...calendarNames, - close: 'Kapat', 'modal.button.default': 'Beni tıklayın', 'modal.webview.ical.h': 'Tarayıcınızı açın', 'modal.webview.ical.text': 'Ne yazık ki, uygulama içi tarayıcılar takvim dosyalarını oluşturma şeklimizle ilgili sorunlar yaşıyor.', @@ -216,16 +377,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Yahoo takvimini açın.
  2. "Eylemler" sekmesine tıklayın.
  3. "Diğer Takvimleri Takip Et" öğesini seçin.
  4. Bir ad seçin ve URL\'yi panonuzdan URL alanına yapıştırın.
', 'modal.subscribe.yahoo.button': 'Yahoo Takvimini aç', 'modal.crios.google.text': 'Google Takvim uygulamasını kullanıyorsanız ve zaten arka planda açık değilse, ne yazık ki bu işlemi iki kez başlatmanız gerekebilir.', + close: 'Kapat', continue: 'Devam etmek', cancel: 'İptal', expired: 'Günü geçmiş', recurring: 'Yinelenen', + thankyou: 'Teşekkürler', + submit: 'Gönder', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Süresi Dolmuş', + 'label.rsvp.bookedout': 'Dolu', + 'label.rsvp.restart': 'Yeni RSVP Yanıtı', + 'label.share.email': 'E-posta ile Paylaş', + 'label.share.copy': 'Bağlantıyı Kopyala', + 'label.share.copied': 'Kopyalandı', + 'label.share.email.subject': 'Bu Tarihi Unutma', + 'form.status': 'Katılıyor musun?', + 'form.status.confirmed': 'Evet', + 'form.status.undecided': 'Belki', + 'form.status.declined': 'Hayır', + 'form.amount': 'Katılımcı Sayısı', + 'form.max': 'maks.', + 'form.email': 'E-posta Adresi', + 'form.error.required': 'Gerekli tüm alanları doğru şekilde doldurmadınız', + 'form.error.sending': 'Yanıtınızı gönderirken bir sorun oluştu. Lütfen daha sonra tekrar deneyin', + 'form.error.email': 'E-posta adresiniz geçerli değil', + 'form.error.bookedoutmany': 'Dolu - daha az katılımcıyla deneyin', + 'form.success': 'Başarıyla gönderildi!', + 'form.success.sent': 'Yanıtınız gönderildi. Teşekkürler!', + 'form.success.email': 'Bir onay e-postası almış olmalısınız.', + 'form.success.doi': 'Yanıtınızın geçerli olması için, az önce gönderdiğimiz e-postadaki onay bağlantısını açmanız gerekmektedir.', + 'form.success.demo': 'Teşekkürler. RSVP demosu burada sona eriyor.', + 'form.success.already': 'Zaten bir yanıt göndermişsiniz.', }, zh: { 'label.addtocalendar': '添加到日历', ical: 'iCal 文件', ...calendarNames, - close: '关', 'modal.button.default': '点我', 'modal.webview.ical.h': '打开浏览器', 'modal.webview.ical.text': '不幸的是，应用内浏览器在我们生成日历文件的方式上存在问题。', @@ -242,16 +430,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. 打开 Yahoo 日历。
  2. 点击“操作”标签。
  3. 选择“关注其他日历”。
  4. 选择一个名称并将剪贴板中的 URL 粘贴到 URL 字段中。
', 'modal.subscribe.yahoo.button': '打开雅虎日历', 'modal.crios.google.text': '如果您正在使用 Google 日历应用，且该应用未在后台打开，很遗憾，您可能需要启动此进程两次。', + close: '关', continue: '继续', cancel: '中止', expired: '已到期', recurring: '再次发生的', + thankyou: '谢谢', + submit: '提交', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': '已过期', + 'label.rsvp.bookedout': '已满', + 'label.rsvp.restart': '新的RSVP回复', + 'label.share.email': '通过电子邮件分享', + 'label.share.copy': '复制链接', + 'label.share.copied': '已复制', + 'label.share.email.subject': '记住这个日期', + 'form.status': '你会参加吗？', + 'form.status.confirmed': '是', + 'form.status.undecided': '可能', + 'form.status.declined': '否', + 'form.amount': '参与者数量', + 'form.max': '最大', + 'form.email': '电子邮箱地址', + 'form.error.required': '你没有正确填写所有必填字段', + 'form.error.sending': '发送你的回复时出现问题。请稍后再试', + 'form.error.email': '你的电子邮箱地址无效', + 'form.error.bookedoutmany': '已满 - 尝试减少参与者数量', + 'form.success': '成功发送！', + 'form.success.sent': '你的回复已发送。谢谢！', + 'form.success.email': '你应该已经收到一封确认电子邮件。', + 'form.success.doi': '为了使你的回复有效，你需要打开我们刚刚发送给你的电子邮件中的确认链接。', + 'form.success.demo': '谢谢。RSVP演示到此结束。', + 'form.success.already': '你已经发送了回复。', }, ar: { 'label.addtocalendar': 'إضافة إلى التقويم', ical: 'ملف iCal', ...calendarNames, - close: 'قريب', 'modal.button.default': 'انقر فوق لي', 'modal.webview.ical.h': 'افتح المستعرض الخاص بك', 'modal.webview.ical.text': 'لسوء الحظ ، تواجه المتصفحات داخل التطبيق مشاكل في طريقة إنشاء ملف التقويم.', @@ -268,16 +483,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. افتح تقويم Yahoo.
  2. انقر فوق علامة التبويب "الإجراءات".
  3. حدد "متابعة تقويمات أخرى".
  4. اختر اسمًا والصق عنوان URL من الحافظة الخاصة بك في حقل URL.
', 'modal.subscribe.yahoo.button': 'افتح تقويم ياهو', 'modal.crios.google.text': 'إذا كنت تستخدم تطبيق Google Calendar ولم يكن مفتوحًا بالفعل في الخلفية، فقد تحتاج إلى بدء هذه العملية مرتين على الأقل.', + close: 'قريب', continue: 'استمر', cancel: 'إحباط', expired: 'منتهي الصلاحية', recurring: 'يتكرر', + thankyou: 'شكرا', + submit: 'إرسال', + 'label.rsvp': 'التأكيد على الحضور', + 'label.rsvp.expired': 'منتهي الصلاحية', + 'label.rsvp.bookedout': 'محجوز بالكامل', + 'label.rsvp.restart': 'جديد RSVP', + 'label.share.email': 'مشاركة عبر البريد الإلكتروني', + 'label.share.copy': 'نسخ الرابط', + 'label.share.copied': 'تم النسخ', + 'label.share.email.subject': 'تذكر هذا الموعد', + 'form.status': 'هل ستحضر؟', + 'form.status.confirmed': 'نعم', + 'form.status.undecided': 'ربما', + 'form.status.declined': 'لا', + 'form.amount': 'عدد الحاضرين', + 'form.max': 'الحد الأقصى', + 'form.email': 'عنوان البريد الإلكتروني', + 'form.error.required': 'لم تقم بملء جميع الحقول المطلوبة بشكل صحيح', + 'form.error.sending': 'حدثت مشكلة أثناء إرسال ردك. الرجاء المحاولة لاحقاً', + 'form.error.email': 'عنوان بريدك الإلكتروني غير صالح', + 'form.error.bookedoutmany': 'محجوز بالكامل - حاول بعدد أقل من المشاركين', + 'form.success': 'تم الإرسال بنجاح!', + 'form.success.sent': 'تم إرسال ردك. شكراً لك!', + 'form.success.email': 'يجب أن تكون قد تلقيت بريداً إلكترونياً للتأكيد.', + 'form.success.doi': 'لتكون ردك صالحاً، يجب عليك الآن فتح الرابط الموجود في البريد الإلكتروني الذي أرسلناه لك.', + 'form.success.demo': 'شكراً. تنتهي هنا عرض RSVP التجريبي.', + 'form.success.already': 'لقد قمت بالفعل بإرسال رد.', }, hi: { 'label.addtocalendar': 'कैलेंडर में जोड़ें', ical: 'iCal फ़ाइल', ...calendarNames, - close: 'बंद करना', 'modal.button.default': 'मुझे क्लिक करें', 'modal.webview.ical.h': 'अपना ब्राउज़र खोलें', 'modal.webview.ical.text': 'दुर्भाग्य से, इन-ऐप ब्राउज़र में कैलेंडर फ़ाइल बनाने के तरीके में समस्याएँ हैं।', @@ -294,16 +536,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Yahoo कैलेंडर खोलें।
  2. "कृती" टैब पर क्लिक करें।
  3. "इतर कॅलेंडर्सचे अनुसरण करा" चुनें।
  4. एक नाम चुनें और अपने क्लिपबोर्ड से URL को URL फ़ील्ड में पेस्ट करें।
', 'modal.subscribe.yahoo.button': 'याहू कैलेंडर खोलें', 'modal.crios.google.text': 'अगर आप Google Calendar एप्लिकेशन का उपयोग कर रहे हैं और यह पहले से ही पृष्ठभूमि में नहीं खुला है, तो दुखद है कि आपको शायद इस प्रक्रिया को दो बार शुरू करने की आवश्यकता हो सकती है।', + close: 'बंद करना', continue: 'जारी रखें', cancel: 'रद्द करना', expired: 'खत्म हो चुका', recurring: 'पुनरावर्ती', + thankyou: 'धन्यवाद', + submit: 'जमा करें', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'समाप्त', + 'label.rsvp.bookedout': 'पूर्ण रूप से बुक', + 'label.rsvp.restart': 'नई RSVP प्रतिक्रिया', + 'label.share.email': 'ईमेल के माध्यम से साझा करें', + 'label.share.copy': 'लिंक कॉपी करें', + 'label.share.copied': 'कॉपी हो गया', + 'label.share.email.subject': 'इस तारीख को याद रखें', + 'form.status': 'क्या आप शामिल होंगे?', + 'form.status.confirmed': 'हाँ', + 'form.status.undecided': 'शायद', + 'form.status.declined': 'नहीं', + 'form.amount': 'प्रतिभागियों की संख्या', + 'form.max': 'अधिकतम', + 'form.email': 'ईमेल पता', + 'form.error.required': 'आपने सभी आवश्यक फ़ील्ड सही ढंग से नहीं भरी हैं', + 'form.error.sending': 'आपका जवाब भेजते समय एक समस्या हुई। कृपया बाद में पुनः प्रयास करें', + 'form.error.email': 'आपका ईमेल पता वैध नहीं है', + 'form.error.bookedoutmany': 'पूरी तरह से बुक - कम प्रतिभागियों के साथ कोशिश करें', + 'form.success': 'सफलतापूर्वक भेजा गया!', + 'form.success.sent': 'आपका उत्तर भेज दिया गया है। धन्यवाद!', + 'form.success.email': 'आपको पुष्टिकरण ईमेल प्राप्त होना चाहिए था।', + 'form.success.doi': 'आपका उत्तर मान्य होने के लिए, अब आपको हमारे द्वारा अभी भेजे गए ईमेल में पुष्टिकरण लिंक खोलना होगा।', + 'form.success.demo': 'धन्यवाद। RSVP डेमो यहाँ समाप्त होता है।', + 'form.success.already': 'आप पहले ही एक उत्तर भेज चुके हैं।', }, pl: { 'label.addtocalendar': 'Dodaj do kalendarza', ical: 'Plik iCal', ...calendarNames, - close: 'Zamknij', 'modal.button.default': 'Kliknij mnie', 'modal.webview.ical.h': 'Otwórz przeglądarkę', 'modal.webview.ical.text': 'Niestety, przeglądarki in-app mają problemy ze sposobem, w jaki generujemy plik kalendarza.', @@ -320,16 +589,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Otwórz kalendarz Yahoo.
  2. Kliknij na zakładkę "Czynności".
  3. Wybierz "Obserwuj inne kalendarze".
  4. Wybierz nazwę i wklej adres URL ze schowka w polu URL.
', 'modal.subscribe.yahoo.button': 'Otwórz kalendarz Yahoo', 'modal.crios.google.text': 'Jeśli używasz aplikacji Google Calendar i nie jest ona już otwarta w tle, niestety, może być konieczne dwukrotne uruchomienie tego procesu.', + close: 'Zamknij', continue: 'Kontynuować', cancel: 'Anuluj', expired: 'Wygasły', recurring: 'Powtarzający się', + thankyou: 'Dziękuję', + submit: 'Wyślij', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Wygasło', + 'label.rsvp.bookedout': 'Brak miejsc', + 'label.rsvp.restart': 'Nowa odpowiedź RSVP', + 'label.share.email': 'Udostępnij przez e-mail', + 'label.share.copy': 'Kopiuj link', + 'label.share.copied': 'Skopiowane', + 'label.share.email.subject': 'Zapamiętaj tę datę', + 'form.status': 'Czy weźmiesz udział?', + 'form.status.confirmed': 'Tak', + 'form.status.undecided': 'Może', + 'form.status.declined': 'Nie', + 'form.amount': 'Liczba uczestników', + 'form.max': 'maks.', + 'form.email': 'Adres e-mail', + 'form.error.required': 'Nie wypełniłeś wszystkich wymaganych pól poprawnie', + 'form.error.sending': 'Wystąpił problem z wysłaniem twojej odpowiedzi. Spróbuj ponownie później', + 'form.error.email': 'Twój adres e-mail jest nieprawidłowy', + 'form.error.bookedoutmany': 'Brak miejsc - spróbuj z mniejszą liczbą uczestników', + 'form.success': 'Wysłano pomyślnie!', + 'form.success.sent': 'Twoja odpowiedź została wysłana. Dziękuję!', + 'form.success.email': 'Powinieneś otrzymać e-mail z potwierdzeniem.', + 'form.success.doi': 'Aby twoja odpowiedź była ważna, musisz teraz otworzyć link potwierdzający w e-mailu, który właśnie wysłaliśmy.', + 'form.success.demo': 'Dziękuję. Demo RSVP kończy się tutaj.', + 'form.success.already': 'Już wysłałeś odpowiedź.', }, id: { 'label.addtocalendar': 'Tambahkan ke Kalender', ical: 'File iCal', ...calendarNames, - close: 'Tutup', 'modal.button.default': 'Klik saya', 'modal.webview.ical.h': 'Buka browser Anda', 'modal.webview.ical.text': 'Sayangnya, browser dalam aplikasi memiliki masalah dengan cara kami menghasilkan file kalender.', @@ -346,16 +642,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Buka kalender Yahoo.
  2. Klik pada tab "Tindakan".
  3. Pilih "Ikuti Kalender Lain".
  4. Pilih nama dan tempelkan URL dari clipboard Anda ke bidang URL.
', 'modal.subscribe.yahoo.button': 'Buka kalender Yahoo', 'modal.crios.google.text': 'Jika Anda menggunakan aplikasi Google Calendar dan aplikasi tersebut belum terbuka di latar belakang, sayangnya, Anda mungkin perlu memulai proses ini dua kali.', + close: 'Tutup', continue: 'Lanjutkan', cancel: 'Batal', expired: 'Kedaluwarsa', recurring: 'Berulang', + thankyou: 'Terima kasih', + submit: 'Kirim', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Kedaluwarsa', + 'label.rsvp.bookedout': 'Penuh', + 'label.rsvp.restart': 'RSVP Baru', + 'label.share.email': 'Bagikan via email', + 'label.share.copy': 'Salin tautan', + 'label.share.copied': 'Tersalin', + 'label.share.email.subject': 'Ingat tanggal ini', + 'form.status': 'Apakah kamu akan menghadiri?', + 'form.status.confirmed': 'Ya', + 'form.status.undecided': 'Mungkin', + 'form.status.declined': 'Tidak', + 'form.amount': 'Jumlah peserta', + 'form.max': 'maks.', + 'form.email': 'Alamat email', + 'form.error.required': 'Kamu belum mengisi semua kolom yang diperlukan dengan benar', + 'form.error.sending': 'Ada masalah saat mengirim jawabanmu. Coba lagi nanti', + 'form.error.email': 'Alamat email kamu tidak valid', + 'form.error.bookedoutmany': 'Penuh - coba dengan peserta lebih sedikit', + 'form.success': 'Berhasil terkirim!', + 'form.success.sent': 'Jawabanmu telah dikirim. Terima kasih!', + 'form.success.email': 'Kamu seharusnya menerima email konfirmasi.', + 'form.success.doi': 'Untuk validasi jawabanmu, kamu harus membuka tautan konfirmasi dalam email yang baru kami kirim.', + 'form.success.demo': 'Terima kasih. Demo RSVP berakhir di sini.', + 'form.success.already': 'Kamu sudah mengirim jawaban.', }, no: { 'label.addtocalendar': 'Legg til i kalenderen', ical: 'iCal-fil', ...calendarNames, - close: 'Lukk', 'modal.button.default': 'Klikk på meg', 'modal.webview.ical.h': 'Åpne nettleseren din', 'modal.webview.ical.text': 'Dessverre har nettlesere i appen problemer med måten vi genererer kalenderfilen på.', @@ -372,16 +695,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Åpne Yahoo-kalenderen.
  2. Klikk på «Handlinger»-fanen.
  3. Velg «Følg andre kalendere».
  4. Velg et navn og lim inn URL-en fra utklippstavlen i URL-feltet.
', 'modal.subscribe.yahoo.button': 'Åpne Yahoo-kalenderen', 'modal.crios.google.text': 'Hvis du bruker Google Calendar-appen og den ikke allerede er åpen i bakgrunnen, må du dessverre kanskje starte denne prosessen to ganger.', + close: 'Lukk', continue: 'Fortsette', cancel: 'Avbryt', expired: 'Utløpt', recurring: 'Tilbakevendende', + thankyou: 'Takk', + submit: 'Send inn', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Utløpt', + 'label.rsvp.bookedout': 'Fullt', + 'label.rsvp.restart': 'Ny RSVP-svar', + 'label.share.email': 'Del via e-post', + 'label.share.copy': 'Kopier lenke', + 'label.share.copied': 'Kopiert', + 'label.share.email.subject': 'Husk denne datoen', + 'form.status': 'Deltar du?', + 'form.status.confirmed': 'Ja', + 'form.status.undecided': 'Kanskje', + 'form.status.declined': 'Nei', + 'form.amount': 'Antall deltakere', + 'form.max': 'maks.', + 'form.email': 'E-postadresse', + 'form.error.required': 'Du har ikke fylt ut alle de nødvendige feltene riktig', + 'form.error.sending': 'Det oppsto et problem med å sende svaret ditt. Vennligst prøv igjen senere', + 'form.error.email': 'E-postadressen din er ikke gyldig', + 'form.error.bookedoutmany': 'Fullt - prøv med færre deltakere', + 'form.success': 'Sendt suksessfullt!', + 'form.success.sent': 'Svaret ditt har blitt sendt. Takk!', + 'form.success.email': 'Du burde ha mottatt en bekreftelses-e-post.', + 'form.success.doi': 'For at svaret ditt skal være gyldig, må du nå åpne bekreftelseslenken i e-posten vi nettopp sendte deg.', + 'form.success.demo': 'Takk. RSVP-demoen avsluttes her.', + 'form.success.already': 'Du har allerede sendt et svar.', }, fi: { 'label.addtocalendar': 'Lisää kalenteriin', ical: 'iCal-tiedosto', ...calendarNames, - close: 'Sulje', 'modal.button.default': 'Klikkaa minua', 'modal.webview.ical.h': 'Avaa selain', 'modal.webview.ical.text': 'Valitettavasti sovelluksen sisäisillä selaimilla on ongelmia kalenteritiedoston luomisessa.', @@ -398,16 +748,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Avaa Yahoo-kalenteri.
  2. Napsauta "Toiminnot"-välilehteä.
  3. Valitse "Seuraa muiden kalentereita".
  4. Valitse nimi ja liitä URL-osoite leikepöydältäsi URL-kenttään.
', 'modal.subscribe.yahoo.button': 'Avaa Yahoo-kalenteri', 'modal.crios.google.text': 'Jos käytät Google Kalenteri -sovellusta eikä se ole jo avoinna taustalla, valitettavasti saatat joutua aloittamaan tämän prosessin kahdesti.', + close: 'Sulje', continue: 'Jatkaa', cancel: 'Peruuta', expired: 'Vanhentunut', recurring: 'Toistuva', + thankyou: 'Kiitos', + submit: 'Lähetä', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Vanhentunut', + 'label.rsvp.bookedout': 'Varattu', + 'label.rsvp.restart': 'Uusi RSVP-vastaus', + 'label.share.email': 'Jaa sähköpostitse', + 'label.share.copy': 'Kopioi linkki', + 'label.share.copied': 'Kopioitu', + 'label.share.email.subject': 'Muista tämä päivämäärä', + 'form.status': 'Osallistutko?', + 'form.status.confirmed': 'Kyllä', + 'form.status.undecided': 'Ehkä', + 'form.status.declined': 'Ei', + 'form.amount': 'Osallistujien määrä', + 'form.max': 'maks.', + 'form.email': 'Sähköpostiosoite', + 'form.error.required': 'Et täyttänyt kaikkia vaadittuja kenttiä oikein', + 'form.error.sending': 'Vastauksen lähettämisessä ilmeni ongelma. Yritä myöhemmin uudelleen', + 'form.error.email': 'Sähköpostiosoitteesi ei kelpaa', + 'form.error.bookedoutmany': 'Varattu - yritä vähemmällä osallistujamäärällä', + 'form.success': 'Lähetetty onnistuneesti!', + 'form.success.sent': 'Vastauksesi on lähetetty. Kiitos!', + 'form.success.email': 'Sinun pitäisi saada vahvistussähköposti.', + 'form.success.doi': 'Jotta vastauksesi on voimassa, avaa nyt vahvistuslinkki juuri lähettämässämme sähköpostissa.', + 'form.success.demo': 'Kiitos. RSVP-demo päättyy tähän.', + 'form.success.already': 'Olet jo lähettänyt vastauksen.', }, sv: { 'label.addtocalendar': 'Lägg till i kalender', ical: 'iCal-fil', ...calendarNames, - close: 'Stäng', 'modal.button.default': 'Klicka på mig', 'modal.webview.ical.h': 'Öppna din webbläsare', 'modal.webview.ical.text': 'Tyvärr har webbläsare i appen problem med hur vi genererar kalenderfilen.', @@ -424,16 +801,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Öppna Yahoo-kalendern.
  2. Klicka på fliken "Åtgärder".
  3. Välj "Följ andra kalendrar".
  4. Välj ett namn och klistra in URL:en från klippbordet i URL-fältet.
', 'modal.subscribe.yahoo.button': 'Öppna Yahoo-kalendern', 'modal.crios.google.text': 'Om du använder Google Calendar-appen och den inte redan är öppen i bakgrunden, måste du tyvärr kanske starta denna process två gånger.', + close: 'Stäng', continue: 'Fortsätta', cancel: 'Avbryt', expired: 'Utgånget', recurring: 'Återkommande', + thankyou: 'Tack', + submit: 'Skicka', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Utgången', + 'label.rsvp.bookedout': 'Fullbokat', + 'label.rsvp.restart': 'Nytt RSVP-svar', + 'label.share.email': 'Dela via e-post', + 'label.share.copy': 'Kopiera länk', + 'label.share.copied': 'Kopierat', + 'label.share.email.subject': 'Kom ihåg detta datum', + 'form.status': 'Deltar du?', + 'form.status.confirmed': 'Ja', + 'form.status.undecided': 'Kanske', + 'form.status.declined': 'Nej', + 'form.amount': 'Antal deltagare', + 'form.max': 'max.', + 'form.email': 'E-postadress', + 'form.error.required': 'Du har inte fyllt i alla nödvändiga fält korrekt', + 'form.error.sending': 'Det uppstod ett problem när ditt svar skickades. Försök igen senare', + 'form.error.email': 'Din e-postadress är inte giltig', + 'form.error.bookedoutmany': 'Fullbokat - försök med färre deltagare', + 'form.success': 'Skickat framgångsrikt!', + 'form.success.sent': 'Ditt svar har skickats. Tack!', + 'form.success.email': 'Du bör ha fått ett bekräftelsemail.', + 'form.success.doi': 'För att ditt svar ska vara giltigt, öppna nu bekräftelselänken i det e-postmeddelande vi just skickat.', + 'form.success.demo': 'Tack. RSVP-demon slutar här.', + 'form.success.already': 'Du har redan skickat ett svar.', }, cs: { 'label.addtocalendar': 'Přidat do kalendáře', ical: 'Soubor iCal', ...calendarNames, - close: 'Zavřít', 'modal.button.default': 'Klikněte na mě', 'modal.webview.ical.h': 'Otevřete prohlížeč', 'modal.webview.ical.text': 'Prohlížeče v aplikacích mají bohužel problémy se způsobem generování souboru kalendáře.', @@ -450,16 +854,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Otevřete kalendář Yahoo.
  2. Klikněte na kartu "Akce".
  3. Vyberte možnost "Sledovat další kalendáře".
  4. Vyberte název a vložte adresu URL ze schránky do pole URL.
', 'modal.subscribe.yahoo.button': 'Otevřete kalendář Yahoo', 'modal.crios.google.text': 'Pokud používáte aplikaci Google Calendar a není již otevřená na pozadí, bohužel budete pravděpodobně muset tento proces spustit dvakrát.', + close: 'Zavřít', continue: 'Pokračovat', cancel: 'Storno', expired: 'Platnost vypršela', recurring: 'Opakující se', + thankyou: 'Děkuji', + submit: 'Odeslat', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Vypršelo', + 'label.rsvp.bookedout': 'Obsazeno', + 'label.rsvp.restart': 'Nová odpověď na RSVP', + 'label.share.email': 'Sdílet e-mailem', + 'label.share.copy': 'Kopírovat odkaz', + 'label.share.copied': 'Zkopírováno', + 'label.share.email.subject': 'Zapamatuj si tento termín', + 'form.status': 'Zúčastníš se?', + 'form.status.confirmed': 'Ano', + 'form.status.undecided': 'Možná', + 'form.status.declined': 'Ne', + 'form.amount': 'Počet účastníků', + 'form.max': 'max.', + 'form.email': 'E-mailová adresa', + 'form.error.required': 'Nevyplnil jsi správně všechna požadovaná pole', + 'form.error.sending': 'Při odesílání tvé odpovědi došlo k problému. Zkus to prosím později znovu', + 'form.error.email': 'Tvá e-mailová adresa není platná', + 'form.error.bookedoutmany': 'Obsazeno - zkuste to s menším počtem účastníků', + 'form.success': 'Úspěšně odesláno!', + 'form.success.sent': 'Tvá odpověď byla odeslána. Děkuji!', + 'form.success.email': 'Měl bys dostat potvrzovací e-mail.', + 'form.success.doi': 'Aby byla tvá odpověď platná, musíš nyní otevřít potvrzovací odkaz v e-mailu, který jsme ti právě poslali.', + 'form.success.demo': 'Děkuji. Demo RSVP končí zde.', + 'form.success.already': 'Již jsi odeslal odpověď.', }, ja: { 'label.addtocalendar': 'カレンダーに追加', ical: 'iCalファイル', ...calendarNames, - close: '閉じる', 'modal.button.default': 'クリックしてください', 'modal.webview.ical.h': 'ブラウザを起動する', 'modal.webview.ical.text': '残念ながら、アプリ内ブラウザは、カレンダーファイルの生成方法に問題があります。', @@ -476,16 +907,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Yahooカレンダーを開く。
  2. [実行] タブをクリックします。
  3. [その他のカレンダーのフォロー] を選択します。
  4. 名前を決めて、クリップボードにあるURLをURL欄に貼り付けます。
', 'modal.subscribe.yahoo.button': 'Yahooカレンダーを開く', 'modal.crios.google.text': 'Google カレンダーアプリを使用しており、それがバックグラウンドで既に開かれていない場合、残念ながら、このプロセスを2回開始する必要があるかもしれません。', + close: '閉じる', continue: '続ける', cancel: 'キャンセル', expired: '期限切れ', recurring: '繰り返し', + thankyou: 'ありがとう', + submit: '送信', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': '期限切れ', + 'label.rsvp.bookedout': '満席', + 'label.rsvp.restart': '新しいRSVPの回答', + 'label.share.email': 'メールで共有', + 'label.share.copy': 'リンクをコピー', + 'label.share.copied': 'コピー済み', + 'label.share.email.subject': 'この日付を覚えておいて', + 'form.status': '参加しますか？', + 'form.status.confirmed': 'はい', + 'form.status.undecided': 'たぶん', + 'form.status.declined': 'いいえ', + 'form.amount': '参加者数', + 'form.max': '最大', + 'form.email': 'メールアドレス', + 'form.error.required': '必要なフィールドをすべて正しく入力していません', + 'form.error.sending': 'あなたの回答を送信する際に問題が発生しました。後で再試行してください', + 'form.error.email': 'メールアドレスが無効です', + 'form.error.bookedoutmany': '満席 - 参加者数を減らして試してください', + 'form.success': '正常に送信されました！', + 'form.success.sent': 'あなたの回答が送信されました。ありがとう！', + 'form.success.email': '確認メールを受け取るはずです。', + 'form.success.doi': 'あなたの回答を有効にするには、今送信したメールの確認リンクを開いてください。', + 'form.success.demo': 'ありがとう。ここでRSVPデモは終了します。', + 'form.success.already': 'すでに回答を送信しています。', }, it: { 'label.addtocalendar': 'Aggiungi al calendario', ical: 'File iCal', ...calendarNames, - close: 'Chiudere', 'modal.button.default': 'Clicca su di me', 'modal.webview.ical.h': 'Aprire il browser', 'modal.webview.ical.text': 'Purtroppo i browser in-app hanno problemi con il modo in cui generiamo il file del calendario.', @@ -502,16 +960,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Aprire il calendario di Yahoo.
  2. Fare clic sulla scheda "Azioni".
  3. Selezionare "Segui altri calendari".
  4. Scegliere un nome e incollare l\'URL dagli appunti nel campo URL.
', 'modal.subscribe.yahoo.button': 'Apri il calendario di Yahoo', 'modal.crios.google.text': "Se stai utilizzando l'applicazione Google Calendar e non è già aperta in background, purtroppo potrebbe essere necessario avviare questo processo due volte.", + close: 'Chiudere', continue: 'Continuare', cancel: 'Annulla', expired: 'Scaduta', recurring: 'Ricorrente', + thankyou: 'Grazie', + submit: 'Invia', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Scaduto', + 'label.rsvp.bookedout': 'Al completo', + 'label.rsvp.restart': 'Nuova risposta RSVP', + 'label.share.email': 'Condividi via Email', + 'label.share.copy': 'Copia il link', + 'label.share.copied': 'Copiato', + 'label.share.email.subject': 'Ricorda questa data', + 'form.status': 'Parteciperai?', + 'form.status.confirmed': 'Sì', + 'form.status.undecided': 'Forse', + 'form.status.declined': 'No', + 'form.amount': 'Numero di partecipanti', + 'form.max': 'max.', + 'form.email': 'Indirizzo Email', + 'form.error.required': 'Non hai compilato correttamente tutti i campi richiesti', + 'form.error.sending': "C'è stato un problema nell'invio della tua risposta. Prova di nuovo più tardi", + 'form.error.email': 'Il tuo indirizzo email non è valido', + 'form.error.bookedoutmany': 'Al completo - prova con meno partecipanti', + 'form.success': 'Inviato con successo!', + 'form.success.sent': 'La tua risposta è stata inviata. Grazie!', + 'form.success.email': 'Dovresti ricevere una email di conferma.', + 'form.success.doi': "Per rendere valida la tua risposta, ora devi aprire il link di conferma nell'email che ti abbiamo appena inviato.", + 'form.success.demo': 'Grazie. La demo RSVP termina qui.', + 'form.success.already': 'Hai già inviato una risposta.', }, ko: { 'label.addtocalendar': '캘린더에 추가', ical: 'iCal 파일', ...calendarNames, - close: '닫다', 'modal.button.default': '클릭 해주세요', 'modal.webview.ical.h': '브라우저 열기', 'modal.webview.ical.text': '불행히도 인앱 브라우저는 캘린더 파일을 생성하는 방식에 문제가 있습니다.', @@ -528,16 +1013,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Yahoo 캘린더를 엽니다.
  2. "동작" 탭을 클릭합니다.
  3. "다른 일정관리 팔로우"를 선택합니다.
  4. 이름을 선택하고 클립보드의 URL을 URL 필드에 붙여넣습니다.
', 'modal.subscribe.yahoo.button': '야후 캘린더 열기', 'modal.crios.google.text': 'Google 캘린더 앱을 사용하고 있고 이미 백그라운드에서 열려 있지 않다면, 안타깝게도 이 프로세스를 두 번 시작해야 할 수 있습니다.', + close: '닫다', continue: '계속하다', cancel: '취소', expired: '만료됨', recurring: '되풀이', + thankyou: '감사합니다', + submit: '제출하기', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': '만료됨', + 'label.rsvp.bookedout': '예약 마감', + 'label.rsvp.restart': '새 RSVP 응답', + 'label.share.email': '이메일로 공유하기', + 'label.share.copy': '링크 복사하기', + 'label.share.copied': '복사됨', + 'label.share.email.subject': '이 날짜를 기억하세요', + 'form.status': '참석하시겠습니까?', + 'form.status.confirmed': '예', + 'form.status.undecided': '아마도', + 'form.status.declined': '아니요', + 'form.amount': '참가자 수', + 'form.max': '최대.', + 'form.email': '이메일 주소', + 'form.error.required': '필수 필드를 모두 올바르게 채우지 않았습니다', + 'form.error.sending': '응답을 보내는 데 문제가 발생했습니다. 나중에 다시 시도해주세요', + 'form.error.email': '유효하지 않은 이메일 주소입니다', + 'form.error.bookedoutmany': '예약 마감 - 참가자 수를 줄여서 시도해보세요', + 'form.success': '성공적으로 전송됨!', + 'form.success.sent': '응답이 전송되었습니다. 감사합니다!', + 'form.success.email': '확인 이메일을 받아야 합니다.', + 'form.success.doi': '응답이 유효하려면 방금 보낸 이메일에 있는 확인 링크를 열어야 합니다.', + 'form.success.demo': '감사합니다. RSVP 데모는 여기서 끝납니다.', + 'form.success.already': '이미 응답을 보냈습니다.', }, vi: { 'label.addtocalendar': 'Thêm vào Lịch', ical: 'Tệp iCal', ...calendarNames, - close: 'Đóng', 'modal.button.default': 'Nhấp vào đây', 'modal.webview.ical.h': 'Mở trình duyệt của bạn', 'modal.webview.ical.text': 'Rất tiếc, các trình duyệt trong ứng dụng gặp sự cố với cách chúng tôi tạo tệp lịch.', @@ -554,16 +1066,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Mở Lịch Yahoo.
  2. Nhấp vào tab "Hành động".
  3. Chọn "Theo dõi các Lịch khác".
  4. Chọn tên và dán URL từ khay nhớ tạm của bạn vào trường URL.
', 'modal.subscribe.yahoo.button': 'Mở lịch Yahoo', 'modal.crios.google.text': 'Nếu bạn đang sử dụng ứng dụng Google Calendar và nó chưa mở trong nền, thì rất tiếc, bạn có thể cần phải bắt đầu quy trình này hai lần.', + close: 'Đóng', continue: 'Tiếp tục', cancel: 'Hủy bỏ', expired: 'Hết hạn', recurring: 'Định kỳ', + thankyou: 'Cảm ơn', + submit: 'Gửi', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Hết hạn', + 'label.rsvp.bookedout': 'Đã đầy', + 'label.rsvp.restart': 'Trả lời RSVP mới', + 'label.share.email': 'Chia sẻ qua Email', + 'label.share.copy': 'Sao chép liên kết', + 'label.share.copied': 'Đã sao chép', + 'label.share.email.subject': 'Ghi nhớ ngày này', + 'form.status': 'Bạn có tham gia không?', + 'form.status.confirmed': 'Có', + 'form.status.undecided': 'Có thể', + 'form.status.declined': 'Không', + 'form.amount': 'Số người tham gia', + 'form.max': 'tối đa.', + 'form.email': 'Địa chỉ Email', + 'form.error.required': 'Bạn chưa điền đúng tất cả các trường bắt buộc', + 'form.error.sending': 'Có sự cố khi gửi phản hồi của bạn. Vui lòng thử lại sau', + 'form.error.email': 'Địa chỉ email của bạn không hợp lệ', + 'form.error.bookedoutmany': 'Đã đầy - thử với số lượng người tham gia ít hơn', + 'form.success': 'Gửi thành công!', + 'form.success.sent': 'Phản hồi của bạn đã được gửi. Cảm ơn!', + 'form.success.email': 'Bạn sẽ nhận được email xác nhận.', + 'form.success.doi': 'Để phản hồi của bạn có hiệu lực, bạn cần mở liên kết xác nhận trong email mà chúng tôi vừa gửi.', + 'form.success.demo': 'Cảm ơn. Bản demo RSVP kết thúc tại đây.', + 'form.success.already': 'Bạn đã gửi phản hồi.', }, ro: { 'label.addtocalendar': 'Adauga In Calendar', ical: 'Fisier iCal', ...calendarNames, - close: 'Inchide', 'modal.button.default': 'Apasa-ma', 'modal.webview.ical.h': 'Deschide browserul', 'modal.webview.ical.text': 'Din pacate, browserele din aplicatie au probleme cu generarea de fisiere pentru calendar.', @@ -580,16 +1119,43 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Deschide acum calendarul Yahoo.
  2. Apasa pe tab-ul de "Actiuni".
  3. Apasa "Urmareste alte calendare".
  4. Seteaza un nume si lipeste continutul din clipboard in casuta cu url.
', 'modal.subscribe.yahoo.button': 'Deschideți calendarul Yahoo', 'modal.crios.google.text': 'Dacă utilizați aplicația Google Calendar și aceasta nu este deja deschisă în fundal, din păcate, s-ar putea să fie necesar să începeți acest proces de două ori.', + close: 'Inchide', continue: 'Continua', cancel: 'Anuleaza', expired: 'Expirat', recurring: 'Recurente', + thankyou: 'Mulțumesc', + submit: 'Trimite', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Expirat', + 'label.rsvp.bookedout': 'Locuri epuizate', + 'label.rsvp.restart': 'Nou răspuns RSVP', + 'label.share.email': 'Distribuie prin e-mail', + 'label.share.copy': 'Copiază linkul', + 'label.share.copied': 'Copiat', + 'label.share.email.subject': 'Ține minte această dată', + 'form.status': 'Vei participa?', + 'form.status.confirmed': 'Da', + 'form.status.undecided': 'Poate', + 'form.status.declined': 'Nu', + 'form.amount': 'Numărul de participanți', + 'form.max': 'max.', + 'form.email': 'Adresa de e-mail', + 'form.error.required': 'Nu ai completat corect toate câmpurile necesare', + 'form.error.sending': 'A apărut o problemă la trimiterea răspunsului tău. Încearcă din nou mai târziu', + 'form.error.email': 'Adresa ta de e-mail nu este validă', + 'form.error.bookedoutmany': 'Locuri epuizate - încearcă cu mai puțini participanți', + 'form.success': 'Trimis cu succes!', + 'form.success.sent': 'Răspunsul tău a fost trimis. Mulțumesc!', + 'form.success.email': 'Ar trebui să fi primit un e-mail de confirmare.', + 'form.success.doi': 'Pentru ca răspunsul tău să fie valid, trebuie să deschizi acum linkul de confirmare din e-mailul pe care tocmai l-am trimis.', + 'form.success.demo': 'Mulțumesc. Demonstrația RSVP se încheie aici.', + 'form.success.already': 'Ai trimis deja un răspuns.', }, fa: { 'label.addtocalendar': 'افزودن به تقویم', ical: 'پرونده iCal', ...calendarNames, - close: 'بستن', 'modal.button.default': 'اینجا کلیک کنید', 'modal.webview.ical.h': 'مرورگر خود را باز کنید', 'modal.webview.ical.text': 'متاسفانه، مرورگرهای درون برنامه‌ای با نحوه تولید پرونده تقویم مشکل دارند.', @@ -606,15 +1172,42 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. اکنون تقویم یاهو را باز کنید.
  2. روی زبانه «Actions» کلیک کنید.
  3. روی «Follow Other Calendars» ضربه بزنید.
  4. یک نام وارد کنید و محتوای کلیپ‌بورد را در قسمت url قرار دهید.
', 'modal.subscribe.yahoo.button': 'تقویم یاهو را باز کنید', 'modal.crios.google.text': 'اگر از برنامه Google Calendar استفاده می‌کنید و آن در پس‌زمینه باز نشده است، متأسفانه احتمالاً نیاز به دو بار شروع این فرآیند دارید.', + close: 'بستن', continue: 'ادامه دادن', cancel: 'لغو', expired: 'منقضی شده', + thankyou: 'ممنون', + submit: 'ارسال', + 'label.rsvp': 'پاسخ دهید', + 'label.rsvp.expired': 'منقضی شده', + 'label.rsvp.bookedout': 'ظرفیت تکمیل', + 'label.rsvp.restart': 'پاسخ جدید RSVP', + 'label.share.email': 'اشتراک‌گذاری از طریق ایمیل', + 'label.share.copy': 'کپی لینک', + 'label.share.copied': 'کپی شد', + 'label.share.email.subject': 'این تاریخ را به یاد داشته باشید', + 'form.status': 'شرکت می‌کنید؟', + 'form.status.confirmed': 'بله', + 'form.status.undecided': 'شاید', + 'form.status.declined': 'نه', + 'form.amount': 'تعداد شرکت‌کنندگان', + 'form.max': 'حداکثر', + 'form.email': 'آدرس ایمیل', + 'form.error.required': 'شما همه فیلدهای لازم را به درستی پر نکرده‌اید', + 'form.error.sending': 'مشکلی در ارسال پاسخ شما وجود داشت. لطفا بعدا دوباره تلاش کنید', + 'form.error.email': 'آدرس ایمیل شما معتبر نیست', + 'form.error.bookedoutmany': 'ظرفیت تکمیل - سعی کنید با تعداد کمتری شرکت‌کننده تلاش کنید', + 'form.success': 'با موفقیت ارسال شد!', + 'form.success.sent': 'پاسخ شما ارسال شد. ممنون!', + 'form.success.email': 'شما باید ایمیل تاییدیه دریافت کرده باشید.', + 'form.success.doi': 'برای اعتبار بخشیدن به پاسختان، باید هم اکنون لینک تایید را در ایمیلی که به تازگی برایتان ارسال کردیم باز کنید.', + 'form.success.demo': 'ممنون. دموی RSVP در اینجا به پایان می‌رسد.', + 'form.success.already': 'شما قبلاً یک پاسخ ارسال کرده‌اید.', }, et: { 'label.addtocalendar': 'Lisa kalendrisse', ical: 'iCal fail', ...calendarNames, - close: 'Sulge', 'modal.button.default': 'Kliki siia', 'modal.webview.ical.h': 'Ava oma veebilehitseja', 'modal.webview.ical.text': 'Kahjuks on rakendusesisestel veebilehitsejatel probleeme kalendrifailide loomisega.', @@ -631,9 +1224,37 @@ const i18nStrings = { 'modal.subscribe.yahoo.text': '
  1. Ava oma Yahoo kalender.
  2. Kliki "Actions" vahelehte.
  3. Vajuta "Follow Other Calendars".
  4. Määra nimi ning lisa lõikelaua sisu URL (veebi aadressi) väljale.
', 'modal.subscribe.yahoo.button': 'Avage Yahoo kalender', 'modal.crios.google.text': 'Kui kasutate rakendust Google Calendar ja see pole taustal juba avatud, siis kahjuks võib olla vajalik selle protsessi kahe korra käivitamine.', + close: 'Sulge', continue: 'Jätkama', cancel: 'Tühista', expired: 'Aegunud', + thankyou: 'Aitäh', + submit: 'Saada', + 'label.rsvp': 'RSVP', + 'label.rsvp.expired': 'Aegunud', + 'label.rsvp.bookedout': 'Välja müüdud', + 'label.rsvp.restart': 'Uus RSVP-vastus', + 'label.share.email': 'Jaga e-posti teel', + 'label.share.copy': 'Kopeeri link', + 'label.share.copied': 'Kopeeritud', + 'label.share.email.subject': 'Pane see kuupäev kirja', + 'form.status': 'Kas sa osaled?', + 'form.status.confirmed': 'Jah', + 'form.status.undecided': 'Võib-olla', + 'form.status.declined': 'Ei', + 'form.amount': 'Osalejate arv', + 'form.max': 'max.', + 'form.email': 'E-posti aadress', + 'form.error.required': 'Sa pole kõiki nõutavaid välju korrektselt täitnud', + 'form.error.sending': 'Sinu vastuse saatmisel tekkis probleem. Palun proovi hiljem uuesti', + 'form.error.email': 'Sinu e-posti aadress ei ole kehtiv', + 'form.error.bookedoutmany': 'Välja müüdud - proovi vähemate osalejatega', + 'form.success': 'Edukalt saadetud!', + 'form.success.sent': 'Sinu vastus on saadetud. Aitäh!', + 'form.success.email': 'Sa peaksid olema saanud kinnituse e-kirja.', + 'form.success.doi': 'Sinu vastus kehtib, kui oled avanud meie poolt just saadetud e-kirja kinnituslingi.', + 'form.success.demo': 'Aitäh. RSVP-demo lõpeb siin.', + 'form.success.already': 'Oled juba vastuse saatnud.', }, }; diff --git a/test.html b/test.html index b7643089..557d162a 100644 --- a/test.html +++ b/test.html @@ -6,7 +6,7 @@ - +
@@ -18,16 +18,19 @@ timeZone="Europe/Berlin" location="Somewhere" description="This is my description for you" - options="'iCal'" - language="en" + options="'iCal','apple','google','ms365','outlookcom','yahoo'" + language="de" debug lightMode="light" organizer="Maxl|webmaster@jenskuerschner.de" attendee="jekuer@gmail.com" - rsvp='{"max":50,"maxpp":2,"maybe_option":true,"initial_confirmation":true,"expires":"2023-11-29T22:00:00","headline":"my test rsvp headline","text":"[p]Welcome![/p][p]This is my rsvp. enjoy![/p]","fields":[{"type":"checkbox","label":"Please confirm","required":true,"default":false,"name":"confirm"},{"type":"hidden","label":"","required":true,"name":"hidden_secret","default":"abz"},{"type":"label","label":"And some simple message towards the end","required":false}]}' - ty='{"type":"form","text":"Sample Text, which is a little big longer,[br]so we can see how the modal behaves here.","url":"https://webhook.site/1003b24b-d825-4152-bdbf-93f0322bf30b","button_label":"Go","fields":[{"type":"label","name":"label_only","label":"Only some random text"},{"type":"text","name":"mytext","label":"Required Text","required":true},{"type":"checkbox","name":"my_check","label":"checkbox label","required":true,"default":"true"},{"type":"radio","name":"my_radio","label":"radio 1","required":false},{"type":"radio","name":"my_radio","label":"radio 2","default":"true","required":false},{"type":"number","name":"my_number","label":"My Number","required":false,"default":"2","placeholder":"5"},{"type":"hidden","name":"my_secret","label":"and some hidden field","default":"secret information"}]}' + styleLight="--accent-color:green;" + buttonStyle="default" + rsvp='{"max":50,"maxpp":2,"maybe_option":true,"initial_confirmation":false,"expires":"2023-11-29T22:00:00","headline":"my test rsvp headline","text":"[p]Welcome![/p][p]This is my rsvp. enjoy![/p]","fields":[{"type":"checkbox","label":"Please confirm","required":true,"default":false,"name":"confirm"},{"type":"hidden","label":"","required":true,"name":"hidden_secret","default":"abz"},{"type":"label","label":"And some simple message towards the end","required":false}]}' > +
+