From 9480009c24dfd93934c78b8ccd3845984e64bb72 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Thu, 19 Feb 2026 11:15:42 +0800 Subject: [PATCH 1/5] Refactor Frontend SCSS --- resources/frontend/css/frontend.css | 2 +- resources/frontend/scss/_broadcasts.scss | 345 ++++++------ resources/frontend/scss/_button.scss | 41 +- resources/frontend/scss/_form-builder.scss | 39 +- resources/frontend/scss/_form.scss | 18 +- .../frontend/scss/_restrict-content.scss | 508 +++++++++--------- 6 files changed, 495 insertions(+), 458 deletions(-) diff --git a/resources/frontend/css/frontend.css b/resources/frontend/css/frontend.css index f65a825e2..03c9274a7 100644 --- a/resources/frontend/css/frontend.css +++ b/resources/frontend/css/frontend.css @@ -1 +1 @@ -.convertkit-broadcasts-pagination{display:grid;grid-template-areas:"prev next";grid-template-columns:repeat(2, 1fr);grid-column-gap:20px;padding:20px 0 0 0}.convertkit-broadcasts-pagination li{list-style:none;margin:0}.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-prev{grid-area:prev;text-align:left}.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-next{grid-area:next;text-align:right}.convertkit-broadcasts-list,.editor-styles-wrapper .convertkit-broadcasts-list,.convertkit-broadcasts-pagination,.editor-styles-wrapper .convertkit-broadcasts-pagination{list-style:none;margin:0;padding:0}.convertkit-broadcasts.has-background,.convertkit-broadcasts[data-background-color],.editor-styles-wrapper .convertkit-broadcasts.has-background{padding:20px}.convertkit-broadcasts.convertkit-broadcasts-loading,.editor-styles-wrapper .convertkit-broadcasts.convertkit-broadcasts-loading{background-color:#e3e3e3 !important;background-image:url(../images/spinner.gif);background-position:center;background-repeat:no-repeat}.convertkit-broadcasts-list li{list-style:none;margin:0;padding:5px 0;display:grid;grid-template-areas:"date title" "image text";grid-template-columns:150px auto;grid-column-gap:20px}.convertkit-broadcasts-list li time{display:inline-block;grid-area:date}.convertkit-broadcasts[data-display-order=broadcast-date] .convertkit-broadcasts-list li time{text-align:right}.convertkit-broadcasts[data-display-grid="1"][data-display-order=broadcast-date] .convertkit-broadcasts-list li time{text-align:left}.convertkit-broadcasts-list li .convertkit-broadcast-title{display:inline-block;grid-area:title}.convertkit-broadcasts-list li .convertkit-broadcast-image{display:inline-block;grid-area:image}.convertkit-broadcasts-list li .convertkit-broadcast-image img{max-width:100%;height:auto}.convertkit-broadcasts-list li .convertkit-broadcast-text{display:inline-block;grid-area:text;font-size:16px}.convertkit-broadcasts-list li .convertkit-broadcast-read-more{display:block}@media screen and (max-width: 478px){.convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li{margin:0 0 20px 0}}.convertkit-broadcasts[data-display-order=broadcast-date] .convertkit-broadcasts-list li{grid-template-areas:"title date" "text image";grid-template-columns:auto 150px}@media screen and (max-width: 478px){.convertkit-broadcasts-list li{grid-template-areas:"image image" "date date" "title title" "text text";grid-row-gap:10px}}.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list{display:grid;grid-template-columns:repeat(3, 1fr);grid-column-gap:20px;grid-row-gap:20px;align-items:start}.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li{grid-template-areas:"image" "date" "title" "text";grid-template-columns:none;grid-row-gap:10px}.convertkit-broadcasts[data-display-grid="1"][data-display-order=broadcast-date] .convertkit-broadcasts-list li{grid-template-areas:"image" "title" "text" "date"}.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li .convertkit-broadcast-read-more{margin:10px 0 0 0}@media screen and (max-width: 768px){.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list{grid-template-columns:repeat(2, 1fr)}}@media screen and (max-width: 478px){.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list{grid-template-columns:repeat(1, 1fr)}}.convertkit-broadcasts{margin-bottom:20px}@media only screen and (min-width: 482px){.convertkit-broadcasts{margin-bottom:30px}}body.convertkit-broadcast.elementor-default table,body.convertkit-broadcast.elementor-default table tbody,body.convertkit-broadcast.elementor-default table tbody td{border:none}body.convertkit-broadcast.elementor-default table tbody>tr:nth-child(odd)>td,body.convertkit-broadcast.elementor-default table tbody>tr:nth-child(odd)>th{background:none}.convertkit-product a,.convertkit-product span,.convertkit-button a,.convertkit-button span{display:block;padding:calc(.667em + 2px) calc(1.333em + 2px);cursor:pointer;text-align:center;text-decoration:none;word-break:break-word;box-sizing:border-box}.convertkit-product,.convertkit-button{margin-bottom:20px}@media only screen and (min-width: 482px){.convertkit-product,.convertkit-button{margin-bottom:30px}}.wp-block-convertkit-form-builder-field input,.wp-block-convertkit-form-builder-field textarea{width:100%;margin:0 0 20px 0;padding:10px;box-sizing:border-box;font-family:inherit}.wp-block-convertkit-form-builder-field label span.convertkit-form-builder-field-required{color:red}form .convertkit-form-builder-subscribed-message{width:100%;margin:0 0 20px 0;box-sizing:border-box}form.formkit-form[data-format=inline]{margin-left:auto;margin-right:auto;margin-bottom:20px}@media only screen and (min-width: 482px){form.formkit-form[data-format=inline]{margin-bottom:30px}}.formkit-sticky-bar{z-index:999999 !important}#convertkit-restrict-content *,#convertkit-restrict-content-modal *{box-sizing:border-box}#convertkit-restrict-content h3,#convertkit-restrict-content-modal h3{margin:0 0 20px 0;padding:0;font-size:24px;line-height:40px;font-style:normal}#convertkit-restrict-content h4,#convertkit-restrict-content-modal h4{margin:0 0 5px 0;padding:0;font-size:18px;line-height:30px;font-style:normal}#convertkit-restrict-content p,#convertkit-restrict-content-modal p{margin:0 0 20px 0;padding:0;font-size:16px;line-height:28px}#convertkit-restrict-content small,#convertkit-restrict-content-modal small{display:block;font-size:13px;line-height:22px;color:#111}#convertkit-restrict-content{width:100%;background:#f9f7f4;color:#373f45;margin:30px auto;padding:40px;text-align:center;box-sizing:border-box;border-radius:8px}#convertkit-restrict-content .convertkit-product a{display:inline-block;text-decoration:none;height:42px;line-height:42px;font-size:15px;margin:0;padding:0 20px !important;border:none;border-radius:3px}.convertkit-restrict-content-notice{display:inline-block;margin:0 0 20px 0;padding:0 0 0 30px;color:#d3434a;font-size:12px;line-height:24px;font-weight:400;background-image:url(../images/error.svg);background-repeat:no-repeat;background-size:24px 24px}form.convertkit-restrict-content-form input[type=submit]{height:42px;line-height:42px;font-size:15px;margin:0;padding:0 20px !important;border:none;border-radius:3px}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field{display:grid;grid-template-areas:"email button";grid-template-columns:3fr 1fr;grid-column-gap:5px;text-align:left;max-width:500px;height:56px;margin:0 auto 20px auto;padding:6px 10px;background-image:url(../images/email.svg);background-repeat:no-repeat;background-color:#fff;background-size:15px 15px;background-position:18px 20px;border:1px solid #fff;border-radius:3px}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field.convertkit-restrict-content-error{border-color:#d3434a}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type=email]{grid-area:email;text-indent:35px;height:42px;line-height:42px;margin:0;padding:0;font-size:15px;background:none;border:none}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type=submit]{grid-area:button}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container{width:427px;height:100px;border:1px solid #dce1e5;border-radius:4px;margin:0 auto 20px auto;overflow:hidden;background:#dce1e5}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container.convertkit-restrict-content-error{border-color:#d3434a}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container input#convertkit-subscriber-code{--otp-digits: 6;--otp-height: 98px;--otp-number-width: 70px;--otp-letter-spacing: 41px;--otp-text-indent: 20px;--otp-border-color: #dce1e5;--otp-text-color: #697177;--otp-font-size: 50px;--_otp-digit: 0;all:unset;text-align:left;margin:0;padding:0;background:linear-gradient(90deg, #dce1e5 var(--otp-number-width), transparent 0),linear-gradient(90deg, #fff var(--otp-number-width), transparent 0);background-position:calc(var(--_otp-digit)*(var(--otp-number-width) + 1px)) 0,0 0;background-repeat:no-repeat,repeat-x;background-size:calc(var(--otp-number-width) + 1px) 100%;inline-size:calc(var(--otp-digits)*(var(--otp-number-width) + 1px));letter-spacing:var(--otp-letter-spacing);text-indent:var(--otp-text-indent);width:calc(var(--otp-number-width)*var(--otp-digits) + var(--otp-digits));height:var(--otp-height);color:var(--otp-text-color);font-size:var(--otp-font-size);font-family:monospace;font-weight:400}#convertkit-restrict-content-modal-background{display:none;position:fixed;width:100%;height:100%;z-index:999998;top:0;left:0;background:rgba(9,13,22,.8)}#convertkit-restrict-content-modal{box-sizing:border-box;display:none;position:fixed;z-index:999999;width:730px;height:328px;top:calc(50% - 164px);left:calc(50% - 365px);margin:0;padding:80px 115px;background:#fff;border:1px solid #fff;border-radius:8px;text-align:center}#convertkit-restrict-content-modal-loading{box-sizing:border-box;display:none;position:absolute;z-index:1000000;width:100%;height:100%;top:0;left:0;margin:0;padding:0;background:url(../images/spinner.gif) center no-repeat hsla(0,0%,100%,.8);border:none;border-radius:8px;text-align:center}#convertkit-restrict-content-modal form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field{background-color:#f4f6f8}#convertkit-restrict-content-modal-close{position:absolute;top:25px;right:25px;text-indent:-9999px;background-image:url(../images/cross.svg);background-repeat:no-repeat;background-size:12px 12px;background-color:rgba(0,0,0,0);border:none;cursor:pointer}@media screen and (max-width: 730px){#convertkit-restrict-content{padding:20px}#convertkit-restrict-content .convertkit-restrict-content-actions{padding:10px}#convertkit-restrict-content input[type=email],#convertkit-restrict-content input[type=text],#convertkit-restrict-content input#convertkit-subscriber-code{width:100%}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field{grid-template-areas:"email email" "button button";max-width:100%;height:auto}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type=submit]{margin-top:10px}#convertkit-restrict-content-modal{width:90%;height:auto;left:5%;padding:40px}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container{width:213px;height:50px}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container input#convertkit-subscriber-code{--otp-height: 49px;--otp-number-width: 35px;--otp-letter-spacing: 20px;--otp-text-indent: 10px;--otp-font-size: 25px}} +.convertkit-broadcasts-pagination{display:grid;grid-template-areas:"prev next";grid-template-columns:repeat(2, 1fr);grid-column-gap:20px;padding:20px 0 0 0}.convertkit-broadcasts-pagination li{list-style:none;margin:0}.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-prev{grid-area:prev;text-align:left}.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-next{grid-area:next;text-align:right}.convertkit-broadcasts-list,.convertkit-broadcasts-pagination{list-style:none;margin:0;padding:0}.editor-styles-wrapper .convertkit-broadcasts-list,.editor-styles-wrapper .convertkit-broadcasts-pagination{list-style:none;margin:0;padding:0}.convertkit-broadcasts-list li{list-style:none;margin:0;padding:5px 0;display:grid;grid-template-areas:"date title" "image text";grid-template-columns:150px auto;grid-column-gap:20px}.convertkit-broadcasts-list li time{display:inline-block;grid-area:date}.convertkit-broadcasts-list li .convertkit-broadcast-title{display:inline-block;grid-area:title}.convertkit-broadcasts-list li .convertkit-broadcast-image{display:inline-block;grid-area:image}.convertkit-broadcasts-list li .convertkit-broadcast-image img{max-width:100%;height:auto}.convertkit-broadcasts-list li .convertkit-broadcast-text{display:inline-block;grid-area:text;font-size:16px}.convertkit-broadcasts-list li .convertkit-broadcast-read-more{display:block;margin:10px 0 0 0}.convertkit-broadcasts{margin-bottom:20px}@media only screen and (min-width: 482px){.convertkit-broadcasts{margin-bottom:30px}}.convertkit-broadcasts.has-background,.convertkit-broadcasts[data-background-color]{padding:20px}.convertkit-broadcasts.convertkit-broadcasts-loading{background-color:#e3e3e3 !important;background-image:url(../images/spinner.gif);background-position:center;background-repeat:no-repeat}.editor-styles-wrapper .convertkit-broadcasts.has-background{padding:20px}.editor-styles-wrapper .convertkit-broadcasts.convertkit-broadcasts-loading{background-color:#e3e3e3 !important;background-image:url(../images/spinner.gif);background-position:center;background-repeat:no-repeat}.convertkit-broadcasts[data-display-order=broadcast-date] .convertkit-broadcasts-list li{grid-template-areas:"title date" "text image";grid-template-columns:auto 150px}.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list{display:grid;grid-template-columns:repeat(3, 1fr);grid-column-gap:20px;grid-row-gap:20px;align-items:start}@media screen and (max-width: 768px){.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list{grid-template-columns:repeat(2, 1fr)}}@media screen and (max-width: 478px){.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list{grid-template-columns:repeat(1, 1fr)}}.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li{grid-template-areas:"image" "date" "title" "text";grid-template-columns:none;grid-row-gap:10px}.convertkit-broadcasts[data-display-grid="1"][data-display-order=broadcast-date] .convertkit-broadcasts-list li{grid-template-areas:"image" "title" "text" "date"}.convertkit-broadcasts[data-display-order=broadcast-date] .convertkit-broadcasts-list li time{text-align:right}.convertkit-broadcasts[data-display-grid="1"][data-display-order=broadcast-date] .convertkit-broadcasts-list li time{text-align:left}@media screen and (max-width: 478px){.convertkit-broadcasts-list li{grid-template-areas:"image image" "date date" "title title" "text text";grid-row-gap:10px}.convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li{margin:0 0 20px 0}}body.convertkit-broadcast.elementor-default table,body.convertkit-broadcast.elementor-default table tbody,body.convertkit-broadcast.elementor-default table tbody td{border:none}body.convertkit-broadcast.elementor-default table tbody>tr:nth-child(odd)>td,body.convertkit-broadcast.elementor-default table tbody>tr:nth-child(odd)>th{background:none}.convertkit-product,.convertkit-button{margin-bottom:20px}@media only screen and (min-width: 482px){.convertkit-product,.convertkit-button{margin-bottom:30px}}.convertkit-product a,.convertkit-product span,.convertkit-button a,.convertkit-button span{display:block;padding:calc(.667em + 2px) calc(1.333em + 2px);cursor:pointer;text-align:center;text-decoration:none;word-break:break-word;box-sizing:border-box}.wp-block-convertkit-form-builder-field input,.wp-block-convertkit-form-builder-field textarea{width:100%;margin:0 0 20px 0;padding:10px;box-sizing:border-box;font-family:inherit}.wp-block-convertkit-form-builder-field label span.convertkit-form-builder-field-required{color:red}form .convertkit-form-builder-subscribed-message{width:100%;margin:0 0 20px 0;box-sizing:border-box}form.formkit-form[data-format=inline]{margin-left:auto;margin-right:auto;margin-bottom:20px}@media only screen and (min-width: 482px){form.formkit-form[data-format=inline]{margin-bottom:30px}}.formkit-sticky-bar{z-index:999999 !important}#convertkit-restrict-content *,#convertkit-restrict-content-modal *{box-sizing:border-box}#convertkit-restrict-content h3,#convertkit-restrict-content-modal h3{margin:0 0 20px 0;padding:0;font-size:24px;line-height:40px;font-style:normal}#convertkit-restrict-content h4,#convertkit-restrict-content-modal h4{margin:0 0 5px 0;padding:0;font-size:18px;line-height:30px;font-style:normal}#convertkit-restrict-content p,#convertkit-restrict-content-modal p{margin:0 0 20px 0;padding:0;font-size:16px;line-height:28px}#convertkit-restrict-content small,#convertkit-restrict-content-modal small{display:block;font-size:13px;line-height:22px;color:#111}#convertkit-restrict-content{width:100%;background:#f9f7f4;color:#373f45;margin:30px auto;padding:40px;text-align:center;box-sizing:border-box;border-radius:8px}#convertkit-restrict-content .convertkit-product a{display:inline-block;text-decoration:none;height:42px;line-height:42px;font-size:15px;margin:0;padding:0 20px !important;border:none;border-radius:3px}.convertkit-restrict-content-notice{display:inline-block;margin:0 0 20px 0;padding:0 0 0 30px;color:#d3434a;font-size:12px;line-height:24px;font-weight:400;background-image:url(../images/error.svg);background-repeat:no-repeat;background-size:24px 24px}form.convertkit-restrict-content-form input[type=submit]{height:42px;line-height:42px;font-size:15px;margin:0;padding:0 20px !important;border:none;border-radius:3px}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field{display:grid;grid-template-areas:"email button";grid-template-columns:3fr 1fr;grid-column-gap:5px;text-align:left;max-width:500px;height:56px;margin:0 auto 20px auto;padding:6px 10px;background-image:url(../images/email.svg);background-repeat:no-repeat;background-color:#fff;background-size:15px 15px;background-position:18px 20px;border:1px solid #fff;border-radius:3px}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field.convertkit-restrict-content-error{border-color:#d3434a}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type=email]{grid-area:email;text-indent:35px;height:42px;line-height:42px;margin:0;padding:0;font-size:15px;background:none;border:none}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type=submit]{grid-area:button}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container{width:427px;height:100px;border:1px solid #dce1e5;border-radius:4px;margin:0 auto 20px auto;overflow:hidden;background:#dce1e5}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container.convertkit-restrict-content-error{border-color:#d3434a}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container input#convertkit-subscriber-code{--otp-digits: 6;--otp-height: 98px;--otp-number-width: 70px;--otp-letter-spacing: 41px;--otp-text-indent: 20px;--otp-border-color: #dce1e5;--otp-text-color: #697177;--otp-font-size: 50px;--_otp-digit: 0;all:unset;text-align:left;margin:0;padding:0;background:linear-gradient(90deg, #dce1e5 var(--otp-number-width), transparent 0),linear-gradient(90deg, #fff var(--otp-number-width), transparent 0);background-position:calc(var(--_otp-digit)*(var(--otp-number-width) + 1px)) 0,0 0;background-repeat:no-repeat,repeat-x;background-size:calc(var(--otp-number-width) + 1px) 100%;inline-size:calc(var(--otp-digits)*(var(--otp-number-width) + 1px));letter-spacing:var(--otp-letter-spacing);text-indent:var(--otp-text-indent);width:calc(var(--otp-number-width)*var(--otp-digits) + var(--otp-digits));height:var(--otp-height);color:var(--otp-text-color);font-size:var(--otp-font-size);font-family:monospace;font-weight:400}#convertkit-restrict-content-modal-background{display:none;position:fixed;width:100%;height:100%;z-index:999998;top:0;left:0;background:rgba(9,13,22,.8)}#convertkit-restrict-content-modal{box-sizing:border-box;display:none;position:fixed;z-index:999999;width:730px;height:328px;top:calc(50% - 164px);left:calc(50% - 365px);margin:0;padding:80px 115px;background:#fff;border:1px solid #fff;border-radius:8px;text-align:center}#convertkit-restrict-content-modal form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field{background-color:#f4f6f8}#convertkit-restrict-content-modal #convertkit-restrict-content-modal-close{position:absolute;top:25px;right:25px;text-indent:-9999px;background-image:url(../images/cross.svg);background-repeat:no-repeat;background-size:12px 12px;background-color:rgba(0,0,0,0);border:none;cursor:pointer}#convertkit-restrict-content-modal-loading{box-sizing:border-box;display:none;position:absolute;z-index:1000000;width:100%;height:100%;top:0;left:0;margin:0;padding:0;background:url(../images/spinner.gif) center no-repeat hsla(0,0%,100%,.8);border:none;border-radius:8px;text-align:center}@media screen and (max-width: 730px){#convertkit-restrict-content{padding:20px}#convertkit-restrict-content .convertkit-restrict-content-actions{padding:10px}#convertkit-restrict-content input[type=email],#convertkit-restrict-content input[type=text],#convertkit-restrict-content input#convertkit-subscriber-code{width:100%}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field{grid-template-areas:"email email" "button button";max-width:100%;height:auto}form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type=submit]{margin-top:10px}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container{width:213px;height:50px}form.convertkit-restrict-content-form div#convertkit-subscriber-code-container input#convertkit-subscriber-code{--otp-height: 49px;--otp-number-width: 35px;--otp-letter-spacing: 20px;--otp-text-indent: 10px;--otp-font-size: 25px}#convertkit-restrict-content-modal{width:90%;height:auto;left:5%;padding:40px}} diff --git a/resources/frontend/scss/_broadcasts.scss b/resources/frontend/scss/_broadcasts.scss index cb98b4b9a..a22f1f298 100644 --- a/resources/frontend/scss/_broadcasts.scss +++ b/resources/frontend/scss/_broadcasts.scss @@ -7,205 +7,228 @@ grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; padding: 20px 0 0 0; + + li { + list-style: none; + margin: 0; + + &.convertkit-broadcasts-pagination-prev { + grid-area: prev; + text-align: left; + } + + &.convertkit-broadcasts-pagination-next { + grid-area: next; + text-align: right; + } + } } - -.convertkit-broadcasts-pagination li { - list-style: none; - margin: 0; -} - -.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-prev { - grid-area: prev; - text-align: left; -} - -.convertkit-broadcasts-pagination li.convertkit-broadcasts-pagination-next { - grid-area: next; - text-align: right; -} - + +/** +* Shared list reset +*/ .convertkit-broadcasts-list, -.editor-styles-wrapper .convertkit-broadcasts-list, -.convertkit-broadcasts-pagination, -.editor-styles-wrapper .convertkit-broadcasts-pagination { +.convertkit-broadcasts-pagination { list-style: none; margin: 0; padding: 0; } -/** - * Broadcasts - */ -.convertkit-broadcasts.has-background, -.convertkit-broadcasts[data-background-color], -.editor-styles-wrapper .convertkit-broadcasts.has-background { - padding: 20px; -} +.editor-styles-wrapper { -.convertkit-broadcasts.convertkit-broadcasts-loading, -.editor-styles-wrapper .convertkit-broadcasts.convertkit-broadcasts-loading { - background-color: #e3e3e3 !important; - background-image: url(../images/spinner.gif); - background-position: center; - background-repeat: no-repeat; + .convertkit-broadcasts-list, + .convertkit-broadcasts-pagination { + list-style: none; + margin: 0; + padding: 0; + } } /** - * Broadcast Item - */ - .convertkit-broadcasts-list li { - list-style: none; - margin: 0; - padding: 5px 0; - display: grid; - grid-template-areas: +* Broadcast List Items +*/ +.convertkit-broadcasts-list { + + li { + list-style: none; + margin: 0; + padding: 5px 0; + display: grid; + grid-template-areas: "date title" "image text"; - grid-template-columns: 150px auto; - grid-column-gap: 20px; -} - -.convertkit-broadcasts-list li time { - display: inline-block; - grid-area: date; -} - -.convertkit-broadcasts[data-display-order="broadcast-date"] .convertkit-broadcasts-list li time { - text-align: right; + grid-template-columns: 150px auto; + grid-column-gap: 20px; + + time { + display: inline-block; + grid-area: date; + } + + .convertkit-broadcast-title { + display: inline-block; + grid-area: title; + } + + .convertkit-broadcast-image { + display: inline-block; + grid-area: image; + + img { + max-width: 100%; + height: auto; + } + } + + .convertkit-broadcast-text { + display: inline-block; + grid-area: text; + font-size: 16px; + } + + .convertkit-broadcast-read-more { + display: block; + margin: 10px 0 0 0; + } + } } -.convertkit-broadcasts[data-display-grid="1"][data-display-order="broadcast-date"] .convertkit-broadcasts-list li time { - text-align: left; -} +/** +* Broadcasts +*/ +.convertkit-broadcasts { + margin-bottom: 20px; -.convertkit-broadcasts-list li .convertkit-broadcast-title { - display: inline-block; - grid-area: title; -} + @media only screen and (min-width: 482px) { + margin-bottom: 30px; + } -.convertkit-broadcasts-list li .convertkit-broadcast-image { - display: inline-block; - grid-area: image; -} + &.has-background, + &[data-background-color] { + padding: 20px; + } -.convertkit-broadcasts-list li .convertkit-broadcast-image img { - max-width: 100%; - height: auto; -} + &.convertkit-broadcasts-loading { + background-color: #e3e3e3 !important; + background-image: url(../images/spinner.gif); + background-position: center; + background-repeat: no-repeat; + } -.convertkit-broadcasts-list li .convertkit-broadcast-text { - display: inline-block; - grid-area: text; - font-size: 16px; -} + .editor-styles-wrapper &.has-background { + padding: 20px; + } -.convertkit-broadcasts-list li .convertkit-broadcast-read-more { - display: block; -} + .editor-styles-wrapper &.convertkit-broadcasts-loading { + background-color: #e3e3e3 !important; + background-image: url(../images/spinner.gif); + background-position: center; + background-repeat: no-repeat; + } -@media screen and (max-width: 478px) { + /** + * List View Layout Variant + */ + &[data-display-order="broadcast-date"] { + + .convertkit-broadcasts-list li { + grid-template-areas: + "title date" + "text image"; + grid-template-columns: auto 150px; + } + } - .convertkit-broadcasts[data-display-image="1"] .convertkit-broadcasts-list li { - margin: 0 0 20px 0; + /** + * Grid View + */ + &[data-display-grid="1"] { + + .convertkit-broadcasts-list { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 20px; + grid-row-gap: 20px; + align-items: start; + + @media screen and (max-width: 768px) { + grid-template-columns: repeat(2, 1fr); + } + + @media screen and (max-width: 478px) { + grid-template-columns: repeat(1, 1fr); + } + + li { + grid-template-areas: + "image" + "date" + "title" + "text"; + grid-template-columns: none; + grid-row-gap: 10px; + } + } + + &[data-display-order="broadcast-date"] { + + .convertkit-broadcasts-list li { + grid-template-areas: + "image" + "title" + "text" + "date"; + } + } } } /** - * List View - */ -.convertkit-broadcasts[data-display-order="broadcast-date"] .convertkit-broadcasts-list li { - grid-template-areas: - "title date" - "text image"; - grid-template-columns: auto 150px; +* Date alignment variants +*/ +.convertkit-broadcasts[data-display-order="broadcast-date"] +.convertkit-broadcasts-list li time { + text-align: right; } +.convertkit-broadcasts[data-display-grid="1"][data-display-order="broadcast-date"] +.convertkit-broadcasts-list li time { + text-align: left; +} + +/** +* Mobile Layout Adjustments +*/ @media screen and (max-width: 478px) { .convertkit-broadcasts-list li { grid-template-areas: - "image image" - "date date" - "title title" - "text text"; + "image image" + "date date" + "title title" + "text text"; grid-row-gap: 10px; } -} -/** - * Grid View. - */ -.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-column-gap: 20px; - grid-row-gap: 20px; - align-items: start; -} - -.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li { - grid-template-areas: - "image" - "date" - "title" - "text"; - grid-template-columns: none; - grid-row-gap: 10px; -} - -.convertkit-broadcasts[data-display-grid="1"][data-display-order="broadcast-date"] .convertkit-broadcasts-list li { - grid-template-areas: - "image" - "title" - "text" - "date"; -} - -.convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list li .convertkit-broadcast-read-more { - margin: 10px 0 0 0; -} - -@media screen and (max-width: 768px) { - - .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list { - grid-template-columns: repeat(2, 1fr); - } -} - -@media screen and (max-width: 478px) { - - .convertkit-broadcasts[data-display-grid="1"] .convertkit-broadcasts-list { - grid-template-columns: repeat(1, 1fr); + .convertkit-broadcasts[data-display-image="1"] + .convertkit-broadcasts-list li { + margin: 0 0 20px 0; } } /** - * Replicates CSS styles provided by block themes for older non-block themes - * that may not include these definitions, resulting in incorrect spacing. - */ -.convertkit-broadcasts { - margin-bottom: 20px; -} - -@media only screen and (min-width: 482px) { - - .convertkit-broadcasts { - margin-bottom: 30px; +* Imported Broadcast Overrides +*/ +body.convertkit-broadcast.elementor-default { + + table, + table tbody, + table tbody td { + border: none; } -} -/** - * Imported Broadcasts to Posts - * - Styles here are designed to override common themes that may interfere - * with an imported Kit Broadcast, such as Elementor. - */ -body.convertkit-broadcast.elementor-default table, -body.convertkit-broadcast.elementor-default table tbody, -body.convertkit-broadcast.elementor-default table tbody td { - border: none; -} - -body.convertkit-broadcast.elementor-default table tbody > tr:nth-child(odd) > td, -body.convertkit-broadcast.elementor-default table tbody > tr:nth-child(odd) > th { - background: none; -} + table tbody > tr:nth-child(odd) > td, + table tbody > tr:nth-child(odd) > th { + background: none; + } +} \ No newline at end of file diff --git a/resources/frontend/scss/_button.scss b/resources/frontend/scss/_button.scss index 36118c267..ad3385ca4 100644 --- a/resources/frontend/scss/_button.scss +++ b/resources/frontend/scss/_button.scss @@ -1,29 +1,24 @@ -.convertkit-product a, -.convertkit-product span, -.convertkit-button a, -.convertkit-button span { - display: block; - padding: calc(0.667em + 2px) calc(1.333em + 2px); - cursor: pointer; - text-align: center; - text-decoration: none; - word-break: break-word; - box-sizing: border-box; -} - -/** - * Replicates CSS styles provided by block themes for older non-block themes - * that may not include these definitions, resulting in incorrect spacing. - */ .convertkit-product, .convertkit-button { - margin-bottom: 20px; -} -@media only screen and (min-width: 482px) { + /** + * Replicates CSS styles provided by block themes for older non-block themes + * that may not include these definitions, resulting in incorrect spacing. + */ + margin-bottom: 20px; - .convertkit-product, - .convertkit-button { + @media only screen and (min-width: 482px) { margin-bottom: 30px; } -} + + a, + span { + display: block; + padding: calc(0.667em + 2px) calc(1.333em + 2px); + cursor: pointer; + text-align: center; + text-decoration: none; + word-break: break-word; + box-sizing: border-box; + } +} \ No newline at end of file diff --git a/resources/frontend/scss/_form-builder.scss b/resources/frontend/scss/_form-builder.scss index cf4cd1da9..fa7cbad55 100644 --- a/resources/frontend/scss/_form-builder.scss +++ b/resources/frontend/scss/_form-builder.scss @@ -2,21 +2,30 @@ * Define some sensible default styles for the form elements, * in case a theme doesn't define them. */ -.wp-block-convertkit-form-builder-field input, -.wp-block-convertkit-form-builder-field textarea { - width: 100%; - margin: 0 0 20px 0; - padding: 10px; - box-sizing: border-box; - font-family: inherit; -} + .wp-block-convertkit-form-builder-field { -.wp-block-convertkit-form-builder-field label span.convertkit-form-builder-field-required { - color: #f00; -} + input, + textarea { + width: 100%; + margin: 0 0 20px 0; + padding: 10px; + box-sizing: border-box; + font-family: inherit; + } + + label { -form .convertkit-form-builder-subscribed-message { - width: 100%; - margin: 0 0 20px 0; - box-sizing: border-box; + span.convertkit-form-builder-field-required { + color: #f00; + } + } } + +form { + + .convertkit-form-builder-subscribed-message { + width: 100%; + margin: 0 0 20px 0; + box-sizing: border-box; + } +} \ No newline at end of file diff --git a/resources/frontend/scss/_form.scss b/resources/frontend/scss/_form.scss index 76950d183..099a2d524 100644 --- a/resources/frontend/scss/_form.scss +++ b/resources/frontend/scss/_form.scss @@ -2,16 +2,16 @@ * Replicates CSS styles provided by block themes for older non-block themes * that may not include these definitions, resulting in incorrect spacing. */ -form.formkit-form[data-format="inline"] { - margin-left: auto; - margin-right: auto; - margin-bottom: 20px; -} + form.formkit-form { -@media only screen and (min-width: 482px) { + &[data-format="inline"] { + margin-left: auto; + margin-right: auto; + margin-bottom: 20px; - form.formkit-form[data-format="inline"] { - margin-bottom: 30px; + @media only screen and (min-width: 482px) { + margin-bottom: 30px; + } } } @@ -22,4 +22,4 @@ form.formkit-form[data-format="inline"] { */ .formkit-sticky-bar { z-index: 999999 !important; -} +} \ No newline at end of file diff --git a/resources/frontend/scss/_restrict-content.scss b/resources/frontend/scss/_restrict-content.scss index 7d1f68072..516ea8ec1 100644 --- a/resources/frontend/scss/_restrict-content.scss +++ b/resources/frontend/scss/_restrict-content.scss @@ -1,289 +1,299 @@ /* Resets and typography */ -#convertkit-restrict-content *, -#convertkit-restrict-content-modal * { - box-sizing: border-box; -} +#convertkit-restrict-content, +#convertkit-restrict-content-modal { -#convertkit-restrict-content h3, -#convertkit-restrict-content-modal h3 { - margin: 0 0 20px 0; - padding: 0; - font-size: 24px; - line-height: 40px; - font-style: normal; -} + * { + box-sizing: border-box; + } -#convertkit-restrict-content h4, -#convertkit-restrict-content-modal h4 { - margin: 0 0 5px 0; - padding: 0; - font-size: 18px; - line-height: 30px; - font-style: normal; -} + h3 { + margin: 0 0 20px 0; + padding: 0; + font-size: 24px; + line-height: 40px; + font-style: normal; + } -#convertkit-restrict-content p, -#convertkit-restrict-content-modal p { - margin: 0 0 20px 0; - padding: 0; - font-size: 16px; - line-height: 28px; -} + h4 { + margin: 0 0 5px 0; + padding: 0; + font-size: 18px; + line-height: 30px; + font-style: normal; + } + + p { + margin: 0 0 20px 0; + padding: 0; + font-size: 16px; + line-height: 28px; + } -#convertkit-restrict-content small, -#convertkit-restrict-content-modal small { - display: block; - font-size: 13px; - line-height: 22px; - color: #111; + small { + display: block; + font-size: 13px; + line-height: 22px; + color: #111; + } } /* Overlay */ #convertkit-restrict-content { - width: 100%; - background: #f9f7f4; - color: #373f45; - margin: 30px auto; - padding: 40px; - text-align: center; - box-sizing: border-box; - border-radius: 8px; -} + width: 100%; + background: #f9f7f4; + color: #373f45; + margin: 30px auto; + padding: 40px; + text-align: center; + box-sizing: border-box; + border-radius: 8px; + + /* Actions */ + .convertkit-product { -/* Actions */ -#convertkit-restrict-content .convertkit-product a { - display: inline-block; - text-decoration: none; - height: 42px; - line-height: 42px; - font-size: 15px; - margin: 0; - padding: 0 20px !important; - border: none; - border-radius: 3px; + a { + display: inline-block; + text-decoration: none; + height: 42px; + line-height: 42px; + font-size: 15px; + margin: 0; + padding: 0 20px !important; + border: none; + border-radius: 3px; + } + } } /* Notices */ .convertkit-restrict-content-notice { - display: inline-block; - margin: 0 0 20px 0; - padding: 0 0 0 30px; - color: #d3434a; - font-size: 12px; - line-height: 24px; - font-weight: 400; - background-image: url(../images/error.svg); - background-repeat: no-repeat; - background-size: 24px 24px; + display: inline-block; + margin: 0 0 20px 0; + padding: 0 0 0 30px; + color: #d3434a; + font-size: 12px; + line-height: 24px; + font-weight: 400; + background-image: url(../images/error.svg); + background-repeat: no-repeat; + background-size: 24px 24px; } - /* Buttons */ -form.convertkit-restrict-content-form input[type="submit"] { - height: 42px; - line-height: 42px; - font-size: 15px; - margin: 0; - padding: 0 20px !important; - border: none; - border-radius: 3px; -} +form.convertkit-restrict-content-form { -/* Email input with inline button */ -form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field { - display: grid; - grid-template-areas: "email button"; - grid-template-columns: 3fr 1fr; - grid-column-gap: 5px; - text-align: left; - max-width: 500px; - height: 56px; - margin: 0 auto 20px auto; - padding: 6px 10px; - background-image: url(../images/email.svg); - background-repeat: no-repeat; - background-color: #fff; - background-size: 15px 15px; - background-position: 18px 20px; - border: 1px solid #fff; - border-radius: 3px; -} + input[type="submit"] { + height: 42px; + line-height: 42px; + font-size: 15px; + margin: 0; + padding: 0 20px !important; + border: none; + border-radius: 3px; + } -form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field.convertkit-restrict-content-error { - border-color: #d3434a; -} + /* Email input with inline button */ + div#convertkit-restrict-content-email-field { + display: grid; + grid-template-areas: "email button"; + grid-template-columns: 3fr 1fr; + grid-column-gap: 5px; + text-align: left; + max-width: 500px; + height: 56px; + margin: 0 auto 20px auto; + padding: 6px 10px; + background-image: url(../images/email.svg); + background-repeat: no-repeat; + background-color: #fff; + background-size: 15px 15px; + background-position: 18px 20px; + border: 1px solid #fff; + border-radius: 3px; -form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type="email"] { - grid-area: email; - text-indent: 35px; - height: 42px; - line-height: 42px; - margin: 0; - padding: 0; - font-size: 15px; - background: none; - border: none; -} + &.convertkit-restrict-content-error { + border-color: #d3434a; + } -form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type="submit"] { - grid-area: button; -} + input[type="email"] { + grid-area: email; + text-indent: 35px; + height: 42px; + line-height: 42px; + margin: 0; + padding: 0; + font-size: 15px; + background: none; + border: none; + } -/* One time code */ -form.convertkit-restrict-content-form div#convertkit-subscriber-code-container { - width: 427px; - height: 100px; - border: 1px solid #dce1e5; - border-radius: 4px; - margin: 0 auto 20px auto; - overflow: hidden; - background: #dce1e5; -} + input[type="submit"] { + grid-area: button; + } + } -form.convertkit-restrict-content-form div#convertkit-subscriber-code-container.convertkit-restrict-content-error { - border-color: #d3434a; -} + /* One time code */ + div#convertkit-subscriber-code-container { + width: 427px; + height: 100px; + border: 1px solid #dce1e5; + border-radius: 4px; + margin: 0 auto 20px auto; + overflow: hidden; + background: #dce1e5; -form.convertkit-restrict-content-form div#convertkit-subscriber-code-container input#convertkit-subscriber-code { - --otp-digits: 6; - --otp-height: 98px; - --otp-number-width: 70px; - --otp-letter-spacing: 41px; - --otp-text-indent: 20px; - --otp-border-color: #dce1e5; - --otp-text-color: #697177; - --otp-font-size: 50px; - --_otp-digit: 0; - all: unset; - text-align: left; - margin: 0; - padding: 0; - background: - linear-gradient(90deg, #dce1e5 var(--otp-number-width), transparent 0), - linear-gradient(90deg, #fff var(--otp-number-width), transparent 0); - background-position: calc(var(--_otp-digit) * (calc(var(--otp-number-width) + 1px))) 0, 0 0; - background-repeat: no-repeat, repeat-x; - background-size: calc(var(--otp-number-width) + 1px) 100%; - inline-size: calc(var(--otp-digits) * calc(var(--otp-number-width) + 1px)); - letter-spacing: var(--otp-letter-spacing); - text-indent: var(--otp-text-indent); - width: calc((var(--otp-number-width) * var(--otp-digits)) + var(--otp-digits)); - height: var(--otp-height); - color: var(--otp-text-color); - font-size: var(--otp-font-size); - font-family: monospace; - font-weight: 400; + &.convertkit-restrict-content-error { + border-color: #d3434a; + } + + input#convertkit-subscriber-code { + --otp-digits: 6; + --otp-height: 98px; + --otp-number-width: 70px; + --otp-letter-spacing: 41px; + --otp-text-indent: 20px; + --otp-border-color: #dce1e5; + --otp-text-color: #697177; + --otp-font-size: 50px; + --_otp-digit: 0; + all: unset; + text-align: left; + margin: 0; + padding: 0; + background: + linear-gradient(90deg, #dce1e5 var(--otp-number-width), transparent 0), + linear-gradient(90deg, #fff var(--otp-number-width), transparent 0); + background-position: calc(var(--_otp-digit) * (calc(var(--otp-number-width) + 1px))) 0, 0 0; + background-repeat: no-repeat, repeat-x; + background-size: calc(var(--otp-number-width) + 1px) 100%; + inline-size: calc(var(--otp-digits) * calc(var(--otp-number-width) + 1px)); + letter-spacing: var(--otp-letter-spacing); + text-indent: var(--otp-text-indent); + width: calc((var(--otp-number-width) * var(--otp-digits)) + var(--otp-digits)); + height: var(--otp-height); + color: var(--otp-text-color); + font-size: var(--otp-font-size); + font-family: monospace; + font-weight: 400; + } + } } /* Modal */ #convertkit-restrict-content-modal-background { - display: none; - position: fixed; - width: 100%; - height: 100%; - z-index: 999998; - top: 0; - left: 0; - background: rgba(9, 13, 22, 0.8); + display: none; + position: fixed; + width: 100%; + height: 100%; + z-index: 999998; + top: 0; + left: 0; + background: rgba(9, 13, 22, 0.8); } #convertkit-restrict-content-modal { - box-sizing: border-box; - display: none; - position: fixed; - z-index: 999999; - width: 730px; - height: 328px; - top: calc(50% - 164px); - left: calc(50% - 365px); - margin: 0; - padding: 80px 115px; - background: #fff; - border: 1px solid #fff; - border-radius: 8px; - text-align: center; -} + box-sizing: border-box; + display: none; + position: fixed; + z-index: 999999; + width: 730px; + height: 328px; + top: calc(50% - 164px); + left: calc(50% - 365px); + margin: 0; + padding: 80px 115px; + background: #fff; + border: 1px solid #fff; + border-radius: 8px; + text-align: center; -#convertkit-restrict-content-modal-loading { - box-sizing: border-box; - display: none; - position: absolute; - z-index: 1000000; - width: 100%; - height: 100%; - top: 0; - left: 0; - margin: 0; - padding: 0; - background: url(../images/spinner.gif) center no-repeat rgba(255, 255, 255, 0.8); - border: none; - border-radius: 8px; - text-align: center; -} + form.convertkit-restrict-content-form { -#convertkit-restrict-content-modal form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field { - background-color: #f4f6f8; + div#convertkit-restrict-content-email-field { + background-color: #f4f6f8; + } + } + + #convertkit-restrict-content-modal-close { + position: absolute; + top: 25px; + right: 25px; + text-indent: -9999px; + background-image: url(../images/cross.svg); + background-repeat: no-repeat; + background-size: 12px 12px; + background-color: transparent; + border: none; + cursor: pointer; + } } -#convertkit-restrict-content-modal-close { - position: absolute; - top: 25px; - right: 25px; - text-indent: -9999px; - background-image: url(../images/cross.svg); - background-repeat: no-repeat; - background-size: 12px 12px; - background-color: transparent; - border: none; - cursor: pointer; +#convertkit-restrict-content-modal-loading { + box-sizing: border-box; + display: none; + position: absolute; + z-index: 1000000; + width: 100%; + height: 100%; + top: 0; + left: 0; + margin: 0; + padding: 0; + background: url(../images/spinner.gif) center no-repeat rgba(255, 255, 255, 0.8); + border: none; + border-radius: 8px; + text-align: center; } /* Responsive */ @media screen and (max-width: 730px) { - #convertkit-restrict-content { - padding: 20px; - } - - #convertkit-restrict-content .convertkit-restrict-content-actions { - padding: 10px; - } - - #convertkit-restrict-content input[type="email"], - #convertkit-restrict-content input[type="text"], - #convertkit-restrict-content input#convertkit-subscriber-code { - width: 100%; - } - - form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field { - grid-template-areas: - "email email" - "button button"; - max-width: 100%; - height: auto; - } - - form.convertkit-restrict-content-form div#convertkit-restrict-content-email-field input[type="submit"] { - margin-top: 10px; - } - - #convertkit-restrict-content-modal { - width: 90%; - height: auto; - left: 5%; - padding: 40px; - } - - form.convertkit-restrict-content-form div#convertkit-subscriber-code-container { - width: 213px; - height: 50px; - } - - form.convertkit-restrict-content-form div#convertkit-subscriber-code-container input#convertkit-subscriber-code { - --otp-height: 49px; - --otp-number-width: 35px; - --otp-letter-spacing: 20px; - --otp-text-indent: 10px; - --otp-font-size: 25px; - } -} + #convertkit-restrict-content { + padding: 20px; + + .convertkit-restrict-content-actions { + padding: 10px; + } + + input[type="email"], + input[type="text"], + input#convertkit-subscriber-code { + width: 100%; + } + } + + form.convertkit-restrict-content-form { + + div#convertkit-restrict-content-email-field { + grid-template-areas: + "email email" + "button button"; + max-width: 100%; + height: auto; + + input[type="submit"] { + margin-top: 10px; + } + } + + div#convertkit-subscriber-code-container { + width: 213px; + height: 50px; + + input#convertkit-subscriber-code { + --otp-height: 49px; + --otp-number-width: 35px; + --otp-letter-spacing: 20px; + --otp-text-indent: 10px; + --otp-font-size: 25px; + } + } + } + + #convertkit-restrict-content-modal { + width: 90%; + height: auto; + left: 5%; + padding: 40px; + } +} \ No newline at end of file From 4a9d51942d2d7c30c71b975d5c575bf022f8ef30 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Thu, 19 Feb 2026 13:05:47 +0800 Subject: [PATCH 2/5] Build and Minify Frontend JS --- DEVELOPMENT.md | 8 +++++++- SETUP.md | 3 ++- TESTING.md | 13 +++++++++++++ composer.json | 6 ++++++ .../class-convertkit-block-broadcasts.php | 8 ++++++-- ...class-convertkit-output-restrict-content.php | 7 ++++--- includes/class-convertkit-output.php | 15 ++++----------- includes/functions.php | 17 +++++++++++++++++ package.json | 7 +++++-- .../frontend/js/dist/frontend.min.asset.php | 1 + resources/frontend/js/dist/frontend.min.js | 1 + resources/frontend/js/frontend.js | 3 +++ 12 files changed, 69 insertions(+), 20 deletions(-) create mode 100644 resources/frontend/js/dist/frontend.min.asset.php create mode 100644 resources/frontend/js/dist/frontend.min.js create mode 100644 resources/frontend/js/frontend.js diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index 865fda0f0..3fd608b46 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -60,11 +60,17 @@ Typically, packages listed in this section would be internal development tools f - PHPStan - Codeception +### Build + +Run `npm run build` to compile frontend CSS and JS in one step. + ### CSS Run `npm run watch:css` to compile frontend CSS to `resources/frontend/css/frontend.css` when working on SCSS in the `resources/frontend/scss` folder. -`resources/frontend/css/frontend.css` is excluded from the repo by `.gitignore`; it is built before tests and deployment automatically using GitHub actions. +### JS + +Run `npm run watch:js` to compile frontend JS to `resources/frontend/js/dist/frontend-min.js` when working on JS in the `resources/frontend/js` folder. ## Committing Work diff --git a/SETUP.md b/SETUP.md index 459a9bea6..58507ae8c 100644 --- a/SETUP.md +++ b/SETUP.md @@ -94,7 +94,8 @@ In the Plugin's directory, at the command line, run `npm install`. This sets up: - JS linting / coding standards using WordPress recommended configurations (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#lint-js) - SCSS and CSS linting / coding standards using WordPress recommended configurations (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#lint-style) -- SASS compilation +- JS compilation and minification +- SASS compilation and minification ### Configure wp-config.php diff --git a/TESTING.md b/TESTING.md index 2c71a28aa..2da6c131f 100644 --- a/TESTING.md +++ b/TESTING.md @@ -32,10 +32,23 @@ The following Composer commands can be used: | `composer watch-css` | `composer watch-css` | Builds the frontend CSS file when changes are made to SCSS files | | `composer js-coding-standards` | `composer lint-js` | Runs WordPress JS Coding Standards on JS files | | `composer fix-js-coding-standards` | `composer fix-js` | Fixes JS files to meet WordPress JS Coding Standards | +| `composer build-js` | `composer build-js` | Builds the frontend JS file | +| `composer watch-js` | `composer watch-js` | Builds the frontend JS file when changes are made to frontend JS files | +| `composer build` | `composer build` | Builds frontend CSS and JS | | `composer static-analysis` | `composer phpstan` | Runs PHPStan static analysis with increased memory limit | | `composer test` | `composer test` | Builds and runs end-to-end tests with `fail-fast` enabled | | `composer test-integration` | `composer test-integration` | Builds and runs integration tests with `fail-fast` enabled | +The following npm commands can be used, if preferred: + +| Command | Description | +|---------|-------------| +| `npm run build:css` | Builds the frontend CSS file | +| `npm run watch:css` | Builds the frontend CSS file when changes are made to SCSS files | +| `npm run build:js` | Builds the frontend JS file | +| `npm run watch:js` | Builds the frontend JS file when changes are made to frontend JS files | +| `npm run build` | Builds frontend CSS and JS | + ## Write (or modify) a test If your work creates new functionality, write a test. diff --git a/composer.json b/composer.json index 2b309288c..792daf7df 100644 --- a/composer.json +++ b/composer.json @@ -31,8 +31,14 @@ "watch-css": "npm run watch:css", "lint-css": "npm run lint:css", "fix-css": "npm run fix:css", + "build-js": "npm run build:js", + "watch-js": "npm run watch:js", "lint-js": "npm run lint:js", "fix-js": "npm run fix:js", + "build": [ + "npm run build:css", + "npm run build:js" + ], "phpstan": "vendor/bin/phpstan analyse --memory-limit=1250M", "php-coding-standards": "vendor/bin/phpcs ./ -s -v", "fix-php-coding-standards": "vendor/bin/phpcbf ./ -s -v", diff --git a/includes/blocks/class-convertkit-block-broadcasts.php b/includes/blocks/class-convertkit-block-broadcasts.php index 2f47d1912..d41ba18fb 100644 --- a/includes/blocks/class-convertkit-block-broadcasts.php +++ b/includes/blocks/class-convertkit-block-broadcasts.php @@ -115,9 +115,12 @@ public function enqueue_scripts() { // Get ConvertKit Settings. $settings = new ConvertKit_Settings(); - wp_enqueue_script( 'convertkit-' . $this->get_name(), CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/broadcasts.js', array(), CONVERTKIT_PLUGIN_VERSION, true ); + // Enqueue frontend JS. + convertkit_enqueue_frontend_js(); + + // Define variables. wp_localize_script( - 'convertkit-' . $this->get_name(), + 'convertkit-js', 'convertkit_broadcasts', array( // REST API URL endpoint. @@ -127,6 +130,7 @@ public function enqueue_scripts() { 'debug' => $settings->debug_enabled(), ) ); + } /** diff --git a/includes/class-convertkit-output-restrict-content.php b/includes/class-convertkit-output-restrict-content.php index 02ebdf2ec..93b6930e8 100644 --- a/includes/class-convertkit-output-restrict-content.php +++ b/includes/class-convertkit-output-restrict-content.php @@ -1431,9 +1431,11 @@ private function get_call_to_action( $post_id ) { // phpcs:ignore Generic.CodeAn // Only load scripts if the Disable Scripts option is off. if ( ! $this->settings->scripts_disabled() ) { // Enqueue scripts. - wp_enqueue_script( 'convertkit-restrict-content', CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/restrict-content.js', array(), CONVERTKIT_PLUGIN_VERSION, true ); + convertkit_enqueue_frontend_js(); + + // Define variables. wp_localize_script( - 'convertkit-restrict-content', + 'convertkit-js', 'convertkit_restrict_content', array( 'nonce' => wp_create_nonce( 'wp_rest' ), @@ -1442,7 +1444,6 @@ private function get_call_to_action( $post_id ) { // phpcs:ignore Generic.CodeAn 'debug' => $this->settings->debug_enabled(), ) ); - } // Output code form if this request is after the user entered their email address, diff --git a/includes/class-convertkit-output.php b/includes/class-convertkit-output.php index 5078a58ff..be427fcf4 100644 --- a/includes/class-convertkit-output.php +++ b/includes/class-convertkit-output.php @@ -801,14 +801,10 @@ public function enqueue_scripts() { return; } - // Register scripts that we might use. - wp_register_script( - 'convertkit-js', - CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/convertkit.js', - array(), - CONVERTKIT_PLUGIN_VERSION, - true - ); + // Enqueue frontend JS. + convertkit_enqueue_frontend_js(); + + // Define variables. wp_localize_script( 'convertkit-js', 'convertkit', @@ -820,9 +816,6 @@ public function enqueue_scripts() { ) ); - // Enqueue. - wp_enqueue_script( 'convertkit-js' ); - } /** diff --git a/includes/functions.php b/includes/functions.php index 0871a1360..f4f214ec1 100644 --- a/includes/functions.php +++ b/includes/functions.php @@ -540,6 +540,23 @@ function convertkit_enqueue_frontend_css() { } +/** + * Helper method to enqueue the frontend JS file. + * + * @since 3.2.0 + */ +function convertkit_enqueue_frontend_js() { + + wp_enqueue_script( + 'convertkit-js', + CONVERTKIT_PLUGIN_URL . 'resources/frontend/js/dist/frontend.min.js', + array(), + CONVERTKIT_PLUGIN_VERSION, + true + ); + +} + /** * Helper method to enqueue Select2 scripts for use within the ConvertKit Plugin. * diff --git a/package.json b/package.json index 579f2a262..0e2ef5531 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,11 @@ "watch:css": "sass resources/frontend/scss/frontend.scss resources/frontend/css/frontend.css --watch --style=compressed", "lint:css": "wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --max-warnings=0", "fix:css": "wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --fix", - "lint:js": "wp-scripts lint-js --max-warnings=0", - "fix:js": "wp-scripts lint-js --fix" + "build:js": "wp-scripts build resources/frontend/js/frontend.js --output-path=resources/frontend/js/dist --output-filename=frontend.min.js", + "watch:js": "wp-scripts start resources/frontend/js/frontend.js --output-path=resources/frontend/js/dist --output-filename=frontend.min.js", + "lint:js": "wp-scripts lint-js 'resources/frontend/js/*.js' --max-warnings=0", + "fix:js": "wp-scripts lint-js 'resources/frontend/js/*.js' --fix", + "build": "npm run build:css && npm run build:js" }, "prettier": "@wordpress/prettier-config", "devDependencies": { diff --git a/resources/frontend/js/dist/frontend.min.asset.php b/resources/frontend/js/dist/frontend.min.asset.php new file mode 100644 index 000000000..e4909a857 --- /dev/null +++ b/resources/frontend/js/dist/frontend.min.asset.php @@ -0,0 +1 @@ + array(), 'version' => '25c6a43d00a0d532ec2b'); diff --git a/resources/frontend/js/dist/frontend.min.js b/resources/frontend/js/dist/frontend.min.js new file mode 100644 index 000000000..82b87d518 --- /dev/null +++ b/resources/frontend/js/dist/frontend.min.js @@ -0,0 +1 @@ +(()=>{var e={184:()=>{document.addEventListener("DOMContentLoaded",function(){document.addEventListener("click",function(e){if(e.target.matches("ul.convertkit-broadcasts-pagination a")){e.preventDefault();const t=e.target.closest("div.convertkit-broadcasts");!function(e,t){convertkit_broadcasts.debug&&(console.log("convertKitBroadcastsRender()"),console.log(t)),e.classList.add("convertkit-broadcasts-loading");const n=new URLSearchParams(t),o=`${convertkit_broadcasts.ajax_url}?${n.toString()}`;fetch(o).then(function(e){return convertkit_broadcasts.debug&&console.log(e),e.json()}).then(function(t){convertkit_broadcasts.debug&&console.log(t),e.classList.remove("convertkit-broadcasts-loading"),e.innerHTML=t}).catch(function(t){convertkit.debug&&console.error(t),e.classList.remove("convertkit-broadcasts-loading")})}(t,{display_date:t.dataset.displayDate,date_format:t.dataset.dateFormat,display_image:t.dataset.displayImage,display_description:t.dataset.displayDescription,display_read_more:t.dataset.displayReadMore,read_more_label:t.dataset.readMoreLabel,limit:t.dataset.limit,paginate:t.dataset.paginate,paginate_label_prev:t.dataset.paginateLabelPrev,paginate_label_next:t.dataset.paginateLabelNext,link_color:t.dataset.linkColor,page:e.target.dataset.page})}})})},509:()=>{function e(e,t){const n=new CustomEvent(e,{detail:t});document.dispatchEvent(n)}document.addEventListener("DOMContentLoaded",function(){!function(t){const n=new URL(t),o=n.searchParams.get("ck_subscriber_id");if(null===o)return;n.searchParams.delete("ck_subscriber_id");const r=document.getElementsByTagName("title")[0].innerHTML;let c=n.searchParams.toString();c.length>0&&(c="?"+c),window.history.replaceState(null,r,n.pathname+c+n.hash),e("kit_subscriber_id_removed_from_url",{id:o})}(window.location.href),document.addEventListener("click",function(t){if(!(t.target.matches(".formkit-submit")||t.target.parentElement&&t.target.parentElement.matches(".formkit-submit")))return void(convertkit.debug&&console.log("not a ck form"));const n=document.querySelector('input[name="email_address"]').value;n.length?/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(n.toLowerCase())?(function(){const e=(new Date).getTime();for(let t=0;t<1e7&&!((new Date).getTime()-e>2e3);t++);}(),function(t){convertkit.debug&&(console.log("convertStoreSubscriberEmailAsIDInCookie"),console.log(t)),fetch(convertkit.ajaxurl,{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded","X-WP-Nonce":convertkit.nonce},body:new URLSearchParams({email:t})}).then(function(e){return convertkit.debug&&console.log(e),e.json()}).then(function(n){convertkit.debug&&console.log(n),e("convertkit_user_subscribed",{id:n.id,email:t})}).catch(function(e){convertkit.debug&&console.error(e)})}(n)):convertkit.debug&&console.log("email not an email address"):convertkit.debug&&console.log("email empty")}),document.querySelectorAll('script[data-kit-limit-per-session="1"]').length>0&&(document.cookie="ck_non_inline_form_displayed=1; path=/",convertkit.debug&&console.log("Set `ck_non_inline_form_displayed` cookie for non-inline form limit"))})},688:()=>{function e(){const e=document.querySelector("#convertkit-subscriber-code");null!==e&&e.addEventListener("input",function(){e.style.setProperty("--_otp-digit",e.value.length),6===e.value.length&&(e.setSelectionRange(0,0),e.blur(),document.querySelector("#convertkit-restrict-content-form").requestSubmit())})}document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".convertkit-restrict-content-modal-open").forEach(function(e){e.addEventListener("click",function(e){e.preventDefault(),document.querySelector("#convertkit-restrict-content-modal-background").style.display="block",document.querySelector("#convertkit-restrict-content-modal").style.display="block"})}),document.addEventListener("submit",function(t){t.target.matches("form#convertkit-restrict-content-form")&&(t.preventDefault(),function(t){if(document.querySelectorAll('input[type="text"], input[type="email"], input[type="submit"]').forEach(function(e){e.setAttribute("disabled","disabled")}),document.querySelector("#convertkit-restrict-content-modal-loading").style.display="block",null!==document.querySelector("input#convertkit-subscriber-code"))return n=convertkit_restrict_content.nonce,o=t.target.querySelector('input[name="subscriber_code"]').value,r=t.target.querySelector('input[name="token"]').value,c=t.target.querySelector('input[name="convertkit_post_id"]').value,fetch(convertkit_restrict_content.subscriber_verification_url,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":n},body:JSON.stringify({subscriber_code:o,token:r,convertkit_post_id:c})}).then(function(e){return convertkit_restrict_content.debug&&console.log(e),e.json()}).then(function(t){if(convertkit_restrict_content.debug&&console.log(t),!t.success)return document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=t.data,document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",void e();window.location=t.url}).catch(function(e){convertkit_restrict_content.debug&&console.error(e)}),!1;var n,o,r,c;!function(t,n,o,r,c){fetch(convertkit_restrict_content.subscriber_authentication_url,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":t},body:JSON.stringify({convertkit_email:n,convertkit_resource_type:o,convertkit_resource_id:r,convertkit_post_id:c})}).then(function(e){return convertkit_restrict_content.debug&&console.log(e),e.json()}).then(function(t){convertkit_restrict_content.debug&&console.log(t),void 0!==t.code?document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=t.message:document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=t.data,document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",e()}).catch(function(e){convertkit_restrict_content.debug&&console.error(e)})}(convertkit_restrict_content.nonce,t.target.querySelector('input[name="convertkit_email"]').value,t.target.querySelector('input[name="convertkit_resource_type"]').value,t.target.querySelector('input[name="convertkit_resource_id"]').value,t.target.querySelector('input[name="convertkit_post_id"]').value)}(t))});const t=document.querySelector("#convertkit-restrict-content-modal-close");null!==t&&t.addEventListener("click",function(e){e.preventDefault(),document.querySelector("#convertkit-restrict-content-modal-background").style.display="none",document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",document.querySelector("#convertkit-restrict-content-modal").style.display="none"})})}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var c=t[o]={exports:{}};return e[o](c,c.exports,n),c.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";n(184),n(509),n(688)})()})(); \ No newline at end of file diff --git a/resources/frontend/js/frontend.js b/resources/frontend/js/frontend.js new file mode 100644 index 000000000..e4a6a2d15 --- /dev/null +++ b/resources/frontend/js/frontend.js @@ -0,0 +1,3 @@ +import './broadcasts.js'; +import './convertkit.js'; +import './restrict-content.js'; From 7863a638a2ebfedfa2c6385647e443ad54e5372c Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Thu, 19 Feb 2026 16:56:00 +0800 Subject: [PATCH 3/5] reCAPTCHA: Scope function to window --- resources/frontend/js/convertkit.js | 1 + resources/frontend/js/dist/frontend.min.asset.php | 2 +- resources/frontend/js/dist/frontend.min.js | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/resources/frontend/js/convertkit.js b/resources/frontend/js/convertkit.js index 598916fe6..533d4a181 100644 --- a/resources/frontend/js/convertkit.js +++ b/resources/frontend/js/convertkit.js @@ -155,6 +155,7 @@ function convertKitRecaptchaFormSubmit(token) { // Submit the form. form.submit(); } +window.convertKitRecaptchaFormSubmit = convertKitRecaptchaFormSubmit; /* eslint-enable no-unused-vars */ /** diff --git a/resources/frontend/js/dist/frontend.min.asset.php b/resources/frontend/js/dist/frontend.min.asset.php index e4909a857..4ae57eb6f 100644 --- a/resources/frontend/js/dist/frontend.min.asset.php +++ b/resources/frontend/js/dist/frontend.min.asset.php @@ -1 +1 @@ - array(), 'version' => '25c6a43d00a0d532ec2b'); + array(), 'version' => '27c29088bdf910a921c1'); diff --git a/resources/frontend/js/dist/frontend.min.js b/resources/frontend/js/dist/frontend.min.js index 82b87d518..afeeda6b8 100644 --- a/resources/frontend/js/dist/frontend.min.js +++ b/resources/frontend/js/dist/frontend.min.js @@ -1 +1 @@ -(()=>{var e={184:()=>{document.addEventListener("DOMContentLoaded",function(){document.addEventListener("click",function(e){if(e.target.matches("ul.convertkit-broadcasts-pagination a")){e.preventDefault();const t=e.target.closest("div.convertkit-broadcasts");!function(e,t){convertkit_broadcasts.debug&&(console.log("convertKitBroadcastsRender()"),console.log(t)),e.classList.add("convertkit-broadcasts-loading");const n=new URLSearchParams(t),o=`${convertkit_broadcasts.ajax_url}?${n.toString()}`;fetch(o).then(function(e){return convertkit_broadcasts.debug&&console.log(e),e.json()}).then(function(t){convertkit_broadcasts.debug&&console.log(t),e.classList.remove("convertkit-broadcasts-loading"),e.innerHTML=t}).catch(function(t){convertkit.debug&&console.error(t),e.classList.remove("convertkit-broadcasts-loading")})}(t,{display_date:t.dataset.displayDate,date_format:t.dataset.dateFormat,display_image:t.dataset.displayImage,display_description:t.dataset.displayDescription,display_read_more:t.dataset.displayReadMore,read_more_label:t.dataset.readMoreLabel,limit:t.dataset.limit,paginate:t.dataset.paginate,paginate_label_prev:t.dataset.paginateLabelPrev,paginate_label_next:t.dataset.paginateLabelNext,link_color:t.dataset.linkColor,page:e.target.dataset.page})}})})},509:()=>{function e(e,t){const n=new CustomEvent(e,{detail:t});document.dispatchEvent(n)}document.addEventListener("DOMContentLoaded",function(){!function(t){const n=new URL(t),o=n.searchParams.get("ck_subscriber_id");if(null===o)return;n.searchParams.delete("ck_subscriber_id");const r=document.getElementsByTagName("title")[0].innerHTML;let c=n.searchParams.toString();c.length>0&&(c="?"+c),window.history.replaceState(null,r,n.pathname+c+n.hash),e("kit_subscriber_id_removed_from_url",{id:o})}(window.location.href),document.addEventListener("click",function(t){if(!(t.target.matches(".formkit-submit")||t.target.parentElement&&t.target.parentElement.matches(".formkit-submit")))return void(convertkit.debug&&console.log("not a ck form"));const n=document.querySelector('input[name="email_address"]').value;n.length?/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(n.toLowerCase())?(function(){const e=(new Date).getTime();for(let t=0;t<1e7&&!((new Date).getTime()-e>2e3);t++);}(),function(t){convertkit.debug&&(console.log("convertStoreSubscriberEmailAsIDInCookie"),console.log(t)),fetch(convertkit.ajaxurl,{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded","X-WP-Nonce":convertkit.nonce},body:new URLSearchParams({email:t})}).then(function(e){return convertkit.debug&&console.log(e),e.json()}).then(function(n){convertkit.debug&&console.log(n),e("convertkit_user_subscribed",{id:n.id,email:t})}).catch(function(e){convertkit.debug&&console.error(e)})}(n)):convertkit.debug&&console.log("email not an email address"):convertkit.debug&&console.log("email empty")}),document.querySelectorAll('script[data-kit-limit-per-session="1"]').length>0&&(document.cookie="ck_non_inline_form_displayed=1; path=/",convertkit.debug&&console.log("Set `ck_non_inline_form_displayed` cookie for non-inline form limit"))})},688:()=>{function e(){const e=document.querySelector("#convertkit-subscriber-code");null!==e&&e.addEventListener("input",function(){e.style.setProperty("--_otp-digit",e.value.length),6===e.value.length&&(e.setSelectionRange(0,0),e.blur(),document.querySelector("#convertkit-restrict-content-form").requestSubmit())})}document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".convertkit-restrict-content-modal-open").forEach(function(e){e.addEventListener("click",function(e){e.preventDefault(),document.querySelector("#convertkit-restrict-content-modal-background").style.display="block",document.querySelector("#convertkit-restrict-content-modal").style.display="block"})}),document.addEventListener("submit",function(t){t.target.matches("form#convertkit-restrict-content-form")&&(t.preventDefault(),function(t){if(document.querySelectorAll('input[type="text"], input[type="email"], input[type="submit"]').forEach(function(e){e.setAttribute("disabled","disabled")}),document.querySelector("#convertkit-restrict-content-modal-loading").style.display="block",null!==document.querySelector("input#convertkit-subscriber-code"))return n=convertkit_restrict_content.nonce,o=t.target.querySelector('input[name="subscriber_code"]').value,r=t.target.querySelector('input[name="token"]').value,c=t.target.querySelector('input[name="convertkit_post_id"]').value,fetch(convertkit_restrict_content.subscriber_verification_url,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":n},body:JSON.stringify({subscriber_code:o,token:r,convertkit_post_id:c})}).then(function(e){return convertkit_restrict_content.debug&&console.log(e),e.json()}).then(function(t){if(convertkit_restrict_content.debug&&console.log(t),!t.success)return document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=t.data,document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",void e();window.location=t.url}).catch(function(e){convertkit_restrict_content.debug&&console.error(e)}),!1;var n,o,r,c;!function(t,n,o,r,c){fetch(convertkit_restrict_content.subscriber_authentication_url,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":t},body:JSON.stringify({convertkit_email:n,convertkit_resource_type:o,convertkit_resource_id:r,convertkit_post_id:c})}).then(function(e){return convertkit_restrict_content.debug&&console.log(e),e.json()}).then(function(t){convertkit_restrict_content.debug&&console.log(t),void 0!==t.code?document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=t.message:document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=t.data,document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",e()}).catch(function(e){convertkit_restrict_content.debug&&console.error(e)})}(convertkit_restrict_content.nonce,t.target.querySelector('input[name="convertkit_email"]').value,t.target.querySelector('input[name="convertkit_resource_type"]').value,t.target.querySelector('input[name="convertkit_resource_id"]').value,t.target.querySelector('input[name="convertkit_post_id"]').value)}(t))});const t=document.querySelector("#convertkit-restrict-content-modal-close");null!==t&&t.addEventListener("click",function(e){e.preventDefault(),document.querySelector("#convertkit-restrict-content-modal-background").style.display="none",document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",document.querySelector("#convertkit-restrict-content-modal").style.display="none"})})}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var c=t[o]={exports:{}};return e[o](c,c.exports,n),c.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";n(184),n(509),n(688)})()})(); \ No newline at end of file +(()=>{var t={184:()=>{document.addEventListener("DOMContentLoaded",function(){document.addEventListener("click",function(t){if(t.target.matches("ul.convertkit-broadcasts-pagination a")){t.preventDefault();const e=t.target.closest("div.convertkit-broadcasts");!function(t,e){convertkit_broadcasts.debug&&(console.log("convertKitBroadcastsRender()"),console.log(e)),t.classList.add("convertkit-broadcasts-loading");const n=new URLSearchParams(e),o=`${convertkit_broadcasts.ajax_url}?${n.toString()}`;fetch(o).then(function(t){return convertkit_broadcasts.debug&&console.log(t),t.json()}).then(function(e){convertkit_broadcasts.debug&&console.log(e),t.classList.remove("convertkit-broadcasts-loading"),t.innerHTML=e}).catch(function(e){convertkit.debug&&console.error(e),t.classList.remove("convertkit-broadcasts-loading")})}(e,{display_date:e.dataset.displayDate,date_format:e.dataset.dateFormat,display_image:e.dataset.displayImage,display_description:e.dataset.displayDescription,display_read_more:e.dataset.displayReadMore,read_more_label:e.dataset.readMoreLabel,limit:e.dataset.limit,paginate:e.dataset.paginate,paginate_label_prev:e.dataset.paginateLabelPrev,paginate_label_next:e.dataset.paginateLabelNext,link_color:e.dataset.linkColor,page:t.target.dataset.page})}})})},509:()=>{function t(t,e){const n=new CustomEvent(t,{detail:e});document.dispatchEvent(n)}window.convertKitRecaptchaFormSubmit=function(t){document.querySelector('[type="submit"][data-callback="convertKitRecaptchaFormSubmit"]').closest("form").submit()},document.addEventListener("DOMContentLoaded",function(){!function(e){const n=new URL(e),o=n.searchParams.get("ck_subscriber_id");if(null===o)return;n.searchParams.delete("ck_subscriber_id");const r=document.getElementsByTagName("title")[0].innerHTML;let c=n.searchParams.toString();c.length>0&&(c="?"+c),window.history.replaceState(null,r,n.pathname+c+n.hash),t("kit_subscriber_id_removed_from_url",{id:o})}(window.location.href),document.addEventListener("click",function(e){if(!(e.target.matches(".formkit-submit")||e.target.parentElement&&e.target.parentElement.matches(".formkit-submit")))return void(convertkit.debug&&console.log("not a ck form"));const n=document.querySelector('input[name="email_address"]').value;n.length?/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(n.toLowerCase())?(function(){const t=(new Date).getTime();for(let e=0;e<1e7&&!((new Date).getTime()-t>2e3);e++);}(),function(e){convertkit.debug&&(console.log("convertStoreSubscriberEmailAsIDInCookie"),console.log(e)),fetch(convertkit.ajaxurl,{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded","X-WP-Nonce":convertkit.nonce},body:new URLSearchParams({email:e})}).then(function(t){return convertkit.debug&&console.log(t),t.json()}).then(function(n){convertkit.debug&&console.log(n),t("convertkit_user_subscribed",{id:n.id,email:e})}).catch(function(t){convertkit.debug&&console.error(t)})}(n)):convertkit.debug&&console.log("email not an email address"):convertkit.debug&&console.log("email empty")}),document.querySelectorAll('script[data-kit-limit-per-session="1"]').length>0&&(document.cookie="ck_non_inline_form_displayed=1; path=/",convertkit.debug&&console.log("Set `ck_non_inline_form_displayed` cookie for non-inline form limit"))})},688:()=>{function t(){const t=document.querySelector("#convertkit-subscriber-code");null!==t&&t.addEventListener("input",function(){t.style.setProperty("--_otp-digit",t.value.length),6===t.value.length&&(t.setSelectionRange(0,0),t.blur(),document.querySelector("#convertkit-restrict-content-form").requestSubmit())})}document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".convertkit-restrict-content-modal-open").forEach(function(t){t.addEventListener("click",function(t){t.preventDefault(),document.querySelector("#convertkit-restrict-content-modal-background").style.display="block",document.querySelector("#convertkit-restrict-content-modal").style.display="block"})}),document.addEventListener("submit",function(e){e.target.matches("form#convertkit-restrict-content-form")&&(e.preventDefault(),function(e){if(document.querySelectorAll('input[type="text"], input[type="email"], input[type="submit"]').forEach(function(t){t.setAttribute("disabled","disabled")}),document.querySelector("#convertkit-restrict-content-modal-loading").style.display="block",null!==document.querySelector("input#convertkit-subscriber-code"))return n=convertkit_restrict_content.nonce,o=e.target.querySelector('input[name="subscriber_code"]').value,r=e.target.querySelector('input[name="token"]').value,c=e.target.querySelector('input[name="convertkit_post_id"]').value,fetch(convertkit_restrict_content.subscriber_verification_url,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":n},body:JSON.stringify({subscriber_code:o,token:r,convertkit_post_id:c})}).then(function(t){return convertkit_restrict_content.debug&&console.log(t),t.json()}).then(function(e){if(convertkit_restrict_content.debug&&console.log(e),!e.success)return document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=e.data,document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",void t();window.location=e.url}).catch(function(t){convertkit_restrict_content.debug&&console.error(t)}),!1;var n,o,r,c;!function(e,n,o,r,c){fetch(convertkit_restrict_content.subscriber_authentication_url,{method:"POST",headers:{"Content-Type":"application/json","X-WP-Nonce":e},body:JSON.stringify({convertkit_email:n,convertkit_resource_type:o,convertkit_resource_id:r,convertkit_post_id:c})}).then(function(t){return convertkit_restrict_content.debug&&console.log(t),t.json()}).then(function(e){convertkit_restrict_content.debug&&console.log(e),void 0!==e.code?document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=e.message:document.querySelector("#convertkit-restrict-content-modal-content").innerHTML=e.data,document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",t()}).catch(function(t){convertkit_restrict_content.debug&&console.error(t)})}(convertkit_restrict_content.nonce,e.target.querySelector('input[name="convertkit_email"]').value,e.target.querySelector('input[name="convertkit_resource_type"]').value,e.target.querySelector('input[name="convertkit_resource_id"]').value,e.target.querySelector('input[name="convertkit_post_id"]').value)}(e))});const e=document.querySelector("#convertkit-restrict-content-modal-close");null!==e&&e.addEventListener("click",function(t){t.preventDefault(),document.querySelector("#convertkit-restrict-content-modal-background").style.display="none",document.querySelector("#convertkit-restrict-content-modal-loading").style.display="none",document.querySelector("#convertkit-restrict-content-modal").style.display="none"})})}},e={};function n(o){var r=e[o];if(void 0!==r)return r.exports;var c=e[o]={exports:{}};return t[o](c,c.exports,n),c.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{"use strict";n(184),n(509),n(688)})()})(); \ No newline at end of file From 829f51d447c00eebc60b122b6c1ab1da5f46433b Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Thu, 19 Feb 2026 17:17:35 +0800 Subject: [PATCH 4/5] Explain why `convertKitRecaptchaFormSubmit` is scoped --- resources/frontend/js/convertkit.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/resources/frontend/js/convertkit.js b/resources/frontend/js/convertkit.js index 533d4a181..7d1eb2a3f 100644 --- a/resources/frontend/js/convertkit.js +++ b/resources/frontend/js/convertkit.js @@ -155,6 +155,9 @@ function convertKitRecaptchaFormSubmit(token) { // Submit the form. form.submit(); } + +// Scope the function to the window object as webpack will wrap everything in a closure, +// resulting in the function not being available globally. window.convertKitRecaptchaFormSubmit = convertKitRecaptchaFormSubmit; /* eslint-enable no-unused-vars */ From 019ee281ed4b1ef54771ffb5d678e9380fc1e709 Mon Sep 17 00:00:00 2001 From: Tim Carr Date: Fri, 20 Feb 2026 10:56:43 +0800 Subject: [PATCH 5/5] Run `prettier` on CSS This uses @wordpress/prettier-config, enforcing the requirement that tabs, not spaces, be used: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/. wp-scripts lint-style applies CSS coding standards, but misses the requirement of tabs, so prettier must also be used. --- package.json | 2 +- resources/frontend/scss/_broadcasts.scss | 55 +- resources/frontend/scss/_button.scss | 2 +- resources/frontend/scss/_form-builder.scss | 4 +- resources/frontend/scss/_form.scss | 4 +- .../frontend/scss/_restrict-content.scss | 551 +++++++++--------- resources/frontend/scss/frontend.scss | 2 +- 7 files changed, 321 insertions(+), 299 deletions(-) diff --git a/package.json b/package.json index 579f2a262..19ed20e44 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "build:css": "sass resources/frontend/scss/frontend.scss resources/frontend/css/frontend.css --no-source-map --style=compressed", "watch:css": "sass resources/frontend/scss/frontend.scss resources/frontend/css/frontend.css --watch --style=compressed", "lint:css": "wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --max-warnings=0", - "fix:css": "wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --fix", + "fix:css": "prettier --write 'resources/frontend/scss/**/*.scss' && wp-scripts lint-style 'resources/frontend/scss/**/*.scss' 'resources/backend/css/**/*.css' --fix", "lint:js": "wp-scripts lint-js --max-warnings=0", "fix:js": "wp-scripts lint-js --fix" }, diff --git a/resources/frontend/scss/_broadcasts.scss b/resources/frontend/scss/_broadcasts.scss index a22f1f298..a39007b7a 100644 --- a/resources/frontend/scss/_broadcasts.scss +++ b/resources/frontend/scss/_broadcasts.scss @@ -1,29 +1,29 @@ /** * Pagination */ - .convertkit-broadcasts-pagination { +.convertkit-broadcasts-pagination { display: grid; grid-template-areas: "prev next"; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; padding: 20px 0 0 0; - + li { - list-style: none; - margin: 0; - + list-style: none; + margin: 0; + &.convertkit-broadcasts-pagination-prev { grid-area: prev; text-align: left; } - + &.convertkit-broadcasts-pagination-next { grid-area: next; text-align: right; } } } - + /** * Shared list reset */ @@ -55,8 +55,8 @@ padding: 5px 0; display: grid; grid-template-areas: - "date title" - "image text"; + "date title" + "image text"; grid-template-columns: 150px auto; grid-column-gap: 20px; @@ -161,10 +161,10 @@ li { grid-template-areas: - "image" - "date" - "title" - "text"; + "image" + "date" + "title" + "text"; grid-template-columns: none; grid-row-gap: 10px; } @@ -174,10 +174,10 @@ .convertkit-broadcasts-list li { grid-template-areas: - "image" - "title" - "text" - "date"; + "image" + "title" + "text" + "date"; } } } @@ -187,12 +187,16 @@ * Date alignment variants */ .convertkit-broadcasts[data-display-order="broadcast-date"] -.convertkit-broadcasts-list li time { + .convertkit-broadcasts-list + li + time { text-align: right; } .convertkit-broadcasts[data-display-grid="1"][data-display-order="broadcast-date"] -.convertkit-broadcasts-list li time { + .convertkit-broadcasts-list + li + time { text-align: left; } @@ -203,15 +207,16 @@ .convertkit-broadcasts-list li { grid-template-areas: - "image image" - "date date" - "title title" - "text text"; + "image image" + "date date" + "title title" + "text text"; grid-row-gap: 10px; } .convertkit-broadcasts[data-display-image="1"] - .convertkit-broadcasts-list li { + .convertkit-broadcasts-list + li { margin: 0 0 20px 0; } } @@ -231,4 +236,4 @@ body.convertkit-broadcast.elementor-default { table tbody > tr:nth-child(odd) > th { background: none; } -} \ No newline at end of file +} diff --git a/resources/frontend/scss/_button.scss b/resources/frontend/scss/_button.scss index ad3385ca4..289054eab 100644 --- a/resources/frontend/scss/_button.scss +++ b/resources/frontend/scss/_button.scss @@ -21,4 +21,4 @@ word-break: break-word; box-sizing: border-box; } -} \ No newline at end of file +} diff --git a/resources/frontend/scss/_form-builder.scss b/resources/frontend/scss/_form-builder.scss index fa7cbad55..870b31e69 100644 --- a/resources/frontend/scss/_form-builder.scss +++ b/resources/frontend/scss/_form-builder.scss @@ -2,7 +2,7 @@ * Define some sensible default styles for the form elements, * in case a theme doesn't define them. */ - .wp-block-convertkit-form-builder-field { +.wp-block-convertkit-form-builder-field { input, textarea { @@ -28,4 +28,4 @@ form { margin: 0 0 20px 0; box-sizing: border-box; } -} \ No newline at end of file +} diff --git a/resources/frontend/scss/_form.scss b/resources/frontend/scss/_form.scss index 099a2d524..715fe6579 100644 --- a/resources/frontend/scss/_form.scss +++ b/resources/frontend/scss/_form.scss @@ -2,7 +2,7 @@ * Replicates CSS styles provided by block themes for older non-block themes * that may not include these definitions, resulting in incorrect spacing. */ - form.formkit-form { +form.formkit-form { &[data-format="inline"] { margin-left: auto; @@ -22,4 +22,4 @@ */ .formkit-sticky-bar { z-index: 999999 !important; -} \ No newline at end of file +} diff --git a/resources/frontend/scss/_restrict-content.scss b/resources/frontend/scss/_restrict-content.scss index 516ea8ec1..a5533253e 100644 --- a/resources/frontend/scss/_restrict-content.scss +++ b/resources/frontend/scss/_restrict-content.scss @@ -2,298 +2,315 @@ #convertkit-restrict-content, #convertkit-restrict-content-modal { - * { - box-sizing: border-box; - } - - h3 { - margin: 0 0 20px 0; - padding: 0; - font-size: 24px; - line-height: 40px; - font-style: normal; - } - - h4 { - margin: 0 0 5px 0; - padding: 0; - font-size: 18px; - line-height: 30px; - font-style: normal; - } - - p { - margin: 0 0 20px 0; - padding: 0; - font-size: 16px; - line-height: 28px; - } - - small { - display: block; - font-size: 13px; - line-height: 22px; - color: #111; - } + * { + box-sizing: border-box; + } + + h3 { + margin: 0 0 20px 0; + padding: 0; + font-size: 24px; + line-height: 40px; + font-style: normal; + } + + h4 { + margin: 0 0 5px 0; + padding: 0; + font-size: 18px; + line-height: 30px; + font-style: normal; + } + + p { + margin: 0 0 20px 0; + padding: 0; + font-size: 16px; + line-height: 28px; + } + + small { + display: block; + font-size: 13px; + line-height: 22px; + color: #111; + } } /* Overlay */ #convertkit-restrict-content { - width: 100%; - background: #f9f7f4; - color: #373f45; - margin: 30px auto; - padding: 40px; - text-align: center; - box-sizing: border-box; - border-radius: 8px; - - /* Actions */ - .convertkit-product { - - a { - display: inline-block; - text-decoration: none; - height: 42px; - line-height: 42px; - font-size: 15px; - margin: 0; - padding: 0 20px !important; - border: none; - border-radius: 3px; - } - } + width: 100%; + background: #f9f7f4; + color: #373f45; + margin: 30px auto; + padding: 40px; + text-align: center; + box-sizing: border-box; + border-radius: 8px; + + /* Actions */ + .convertkit-product { + + a { + display: inline-block; + text-decoration: none; + height: 42px; + line-height: 42px; + font-size: 15px; + margin: 0; + padding: 0 20px !important; + border: none; + border-radius: 3px; + } + } } /* Notices */ .convertkit-restrict-content-notice { - display: inline-block; - margin: 0 0 20px 0; - padding: 0 0 0 30px; - color: #d3434a; - font-size: 12px; - line-height: 24px; - font-weight: 400; - background-image: url(../images/error.svg); - background-repeat: no-repeat; - background-size: 24px 24px; + display: inline-block; + margin: 0 0 20px 0; + padding: 0 0 0 30px; + color: #d3434a; + font-size: 12px; + line-height: 24px; + font-weight: 400; + background-image: url(../images/error.svg); + background-repeat: no-repeat; + background-size: 24px 24px; } /* Buttons */ form.convertkit-restrict-content-form { - input[type="submit"] { - height: 42px; - line-height: 42px; - font-size: 15px; - margin: 0; - padding: 0 20px !important; - border: none; - border-radius: 3px; - } - - /* Email input with inline button */ - div#convertkit-restrict-content-email-field { - display: grid; - grid-template-areas: "email button"; - grid-template-columns: 3fr 1fr; - grid-column-gap: 5px; - text-align: left; - max-width: 500px; - height: 56px; - margin: 0 auto 20px auto; - padding: 6px 10px; - background-image: url(../images/email.svg); - background-repeat: no-repeat; - background-color: #fff; - background-size: 15px 15px; - background-position: 18px 20px; - border: 1px solid #fff; - border-radius: 3px; - - &.convertkit-restrict-content-error { - border-color: #d3434a; - } - - input[type="email"] { - grid-area: email; - text-indent: 35px; - height: 42px; - line-height: 42px; - margin: 0; - padding: 0; - font-size: 15px; - background: none; - border: none; - } - - input[type="submit"] { - grid-area: button; - } - } - - /* One time code */ - div#convertkit-subscriber-code-container { - width: 427px; - height: 100px; - border: 1px solid #dce1e5; - border-radius: 4px; - margin: 0 auto 20px auto; - overflow: hidden; - background: #dce1e5; - - &.convertkit-restrict-content-error { - border-color: #d3434a; - } - - input#convertkit-subscriber-code { - --otp-digits: 6; - --otp-height: 98px; - --otp-number-width: 70px; - --otp-letter-spacing: 41px; - --otp-text-indent: 20px; - --otp-border-color: #dce1e5; - --otp-text-color: #697177; - --otp-font-size: 50px; - --_otp-digit: 0; - all: unset; - text-align: left; - margin: 0; - padding: 0; - background: - linear-gradient(90deg, #dce1e5 var(--otp-number-width), transparent 0), - linear-gradient(90deg, #fff var(--otp-number-width), transparent 0); - background-position: calc(var(--_otp-digit) * (calc(var(--otp-number-width) + 1px))) 0, 0 0; - background-repeat: no-repeat, repeat-x; - background-size: calc(var(--otp-number-width) + 1px) 100%; - inline-size: calc(var(--otp-digits) * calc(var(--otp-number-width) + 1px)); - letter-spacing: var(--otp-letter-spacing); - text-indent: var(--otp-text-indent); - width: calc((var(--otp-number-width) * var(--otp-digits)) + var(--otp-digits)); - height: var(--otp-height); - color: var(--otp-text-color); - font-size: var(--otp-font-size); - font-family: monospace; - font-weight: 400; - } - } + input[type="submit"] { + height: 42px; + line-height: 42px; + font-size: 15px; + margin: 0; + padding: 0 20px !important; + border: none; + border-radius: 3px; + } + + /* Email input with inline button */ + div#convertkit-restrict-content-email-field { + display: grid; + grid-template-areas: "email button"; + grid-template-columns: 3fr 1fr; + grid-column-gap: 5px; + text-align: left; + max-width: 500px; + height: 56px; + margin: 0 auto 20px auto; + padding: 6px 10px; + background-image: url(../images/email.svg); + background-repeat: no-repeat; + background-color: #fff; + background-size: 15px 15px; + background-position: 18px 20px; + border: 1px solid #fff; + border-radius: 3px; + + &.convertkit-restrict-content-error { + border-color: #d3434a; + } + + input[type="email"] { + grid-area: email; + text-indent: 35px; + height: 42px; + line-height: 42px; + margin: 0; + padding: 0; + font-size: 15px; + background: none; + border: none; + } + + input[type="submit"] { + grid-area: button; + } + } + + /* One time code */ + div#convertkit-subscriber-code-container { + width: 427px; + height: 100px; + border: 1px solid #dce1e5; + border-radius: 4px; + margin: 0 auto 20px auto; + overflow: hidden; + background: #dce1e5; + + &.convertkit-restrict-content-error { + border-color: #d3434a; + } + + input#convertkit-subscriber-code { + --otp-digits: 6; + --otp-height: 98px; + --otp-number-width: 70px; + --otp-letter-spacing: 41px; + --otp-text-indent: 20px; + --otp-border-color: #dce1e5; + --otp-text-color: #697177; + --otp-font-size: 50px; + --_otp-digit: 0; + all: unset; + text-align: left; + margin: 0; + padding: 0; + background: + linear-gradient( + 90deg, + #dce1e5 var(--otp-number-width), + transparent 0 + ), + linear-gradient( + 90deg, + #fff var(--otp-number-width), + transparent 0 + ); + background-position: + calc(var(--_otp-digit) * (calc(var(--otp-number-width) + 1px))) + 0, + 0 0; + background-repeat: no-repeat, repeat-x; + background-size: calc(var(--otp-number-width) + 1px) 100%; + inline-size: calc( + var(--otp-digits) * calc(var(--otp-number-width) + 1px) + ); + letter-spacing: var(--otp-letter-spacing); + text-indent: var(--otp-text-indent); + width: calc( + (var(--otp-number-width) * var(--otp-digits)) + + var(--otp-digits) + ); + height: var(--otp-height); + color: var(--otp-text-color); + font-size: var(--otp-font-size); + font-family: monospace; + font-weight: 400; + } + } } /* Modal */ #convertkit-restrict-content-modal-background { - display: none; - position: fixed; - width: 100%; - height: 100%; - z-index: 999998; - top: 0; - left: 0; - background: rgba(9, 13, 22, 0.8); + display: none; + position: fixed; + width: 100%; + height: 100%; + z-index: 999998; + top: 0; + left: 0; + background: rgba(9, 13, 22, 0.8); } #convertkit-restrict-content-modal { - box-sizing: border-box; - display: none; - position: fixed; - z-index: 999999; - width: 730px; - height: 328px; - top: calc(50% - 164px); - left: calc(50% - 365px); - margin: 0; - padding: 80px 115px; - background: #fff; - border: 1px solid #fff; - border-radius: 8px; - text-align: center; - - form.convertkit-restrict-content-form { - - div#convertkit-restrict-content-email-field { - background-color: #f4f6f8; - } - } - - #convertkit-restrict-content-modal-close { - position: absolute; - top: 25px; - right: 25px; - text-indent: -9999px; - background-image: url(../images/cross.svg); - background-repeat: no-repeat; - background-size: 12px 12px; - background-color: transparent; - border: none; - cursor: pointer; - } + box-sizing: border-box; + display: none; + position: fixed; + z-index: 999999; + width: 730px; + height: 328px; + top: calc(50% - 164px); + left: calc(50% - 365px); + margin: 0; + padding: 80px 115px; + background: #fff; + border: 1px solid #fff; + border-radius: 8px; + text-align: center; + + form.convertkit-restrict-content-form { + + div#convertkit-restrict-content-email-field { + background-color: #f4f6f8; + } + } + + #convertkit-restrict-content-modal-close { + position: absolute; + top: 25px; + right: 25px; + text-indent: -9999px; + background-image: url(../images/cross.svg); + background-repeat: no-repeat; + background-size: 12px 12px; + background-color: transparent; + border: none; + cursor: pointer; + } } #convertkit-restrict-content-modal-loading { - box-sizing: border-box; - display: none; - position: absolute; - z-index: 1000000; - width: 100%; - height: 100%; - top: 0; - left: 0; - margin: 0; - padding: 0; - background: url(../images/spinner.gif) center no-repeat rgba(255, 255, 255, 0.8); - border: none; - border-radius: 8px; - text-align: center; + box-sizing: border-box; + display: none; + position: absolute; + z-index: 1000000; + width: 100%; + height: 100%; + top: 0; + left: 0; + margin: 0; + padding: 0; + background: url(../images/spinner.gif) center no-repeat + rgba(255, 255, 255, 0.8); + border: none; + border-radius: 8px; + text-align: center; } /* Responsive */ @media screen and (max-width: 730px) { - #convertkit-restrict-content { - padding: 20px; - - .convertkit-restrict-content-actions { - padding: 10px; - } - - input[type="email"], - input[type="text"], - input#convertkit-subscriber-code { - width: 100%; - } - } - - form.convertkit-restrict-content-form { - - div#convertkit-restrict-content-email-field { - grid-template-areas: - "email email" - "button button"; - max-width: 100%; - height: auto; - - input[type="submit"] { - margin-top: 10px; - } - } - - div#convertkit-subscriber-code-container { - width: 213px; - height: 50px; - - input#convertkit-subscriber-code { - --otp-height: 49px; - --otp-number-width: 35px; - --otp-letter-spacing: 20px; - --otp-text-indent: 10px; - --otp-font-size: 25px; - } - } - } - - #convertkit-restrict-content-modal { - width: 90%; - height: auto; - left: 5%; - padding: 40px; - } -} \ No newline at end of file + #convertkit-restrict-content { + padding: 20px; + + .convertkit-restrict-content-actions { + padding: 10px; + } + + input[type="email"], + input[type="text"], + input#convertkit-subscriber-code { + width: 100%; + } + } + + form.convertkit-restrict-content-form { + + div#convertkit-restrict-content-email-field { + grid-template-areas: + "email email" + "button button"; + max-width: 100%; + height: auto; + + input[type="submit"] { + margin-top: 10px; + } + } + + div#convertkit-subscriber-code-container { + width: 213px; + height: 50px; + + input#convertkit-subscriber-code { + --otp-height: 49px; + --otp-number-width: 35px; + --otp-letter-spacing: 20px; + --otp-text-indent: 10px; + --otp-font-size: 25px; + } + } + } + + #convertkit-restrict-content-modal { + width: 90%; + height: auto; + left: 5%; + padding: 40px; + } +} diff --git a/resources/frontend/scss/frontend.scss b/resources/frontend/scss/frontend.scss index bbbb912b4..38e1c4f49 100644 --- a/resources/frontend/scss/frontend.scss +++ b/resources/frontend/scss/frontend.scss @@ -2,4 +2,4 @@ @use "button"; @use "form-builder"; @use "form"; -@use "restrict-content"; \ No newline at end of file +@use "restrict-content";