£Á°èZ¨Ä…–K§‚«“ô4“ÒÙ´dîfUÙÃÅ WKbyʦ•êŽ…È®FÒ¿ÊÎóCozá¬S@6{Í:›œêZÌ:Š•_%:¢¾¾~;‘Ã~芩ÊǍí`ÔÑ©ú뙵'5I¿fš×WO%ø9¾«¾DK|€ùÍD”Ýs]nHÕ¶êםӼ㞪éUWŸÈË%DÒÕ¬ï‘]/Åcx ‰ï2ß]ä6G[]S£Ôϯrs{úëóµmÒï#UQxo·õÞCe]"±/aÙ&Eã4ú9Jé_ÞåëdãöKë)AÞ ¯¹ægƒÛowЍø^d™ý½ßB7áyMä9ÜÖUã !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! //--------------------------------- // Editor styles! ✍️ //--------------------------------- $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; $color-container-bg: #F6F8FA; $color-container-border: #EAEDF0; .dfb-media-uploader { width: 200px; } .dfb-replace-image-btn { margin-right: 10px; } .dfb-background-btns { margin-top: 10px; margin-bottom: 10px; } .dfb-label { font-size: 11px; font-weight: 500; line-height: 1.4; text-transform: uppercase; display: inline-block; margin-bottom: calc(8px); padding: 0; } .dfb-help-text { font-size: 12px; font-style: normal; color: rgb(117, 117, 117); margin: 0 0 calc(8px); padding: 0; } .dfb-input { margin: 0 0 10px; width: 100%; } .dfb-color-picker { margin: 0 0 10px; .components-circular-option-picker .components-circular-option-picker__swatches { gap: 8px; } } .dfb-stripe-live-mode-toggle, .dfb-stripe-link-toggle { .components-external-link { display: block; width: max-content; margin: 10px 0 20px; } } // -------------------------------- // Stripe Connect Wrap // -------------------------------- #dfb-stripe-connect-wrap { font-family: $font-family; background: $color-container-bg; border: 1px solid $color-container-border; display: flex; align-items: center; padding: 30px; border-radius: 6px; text-align: center; width: 100%; margin: 0; .dfb-stripe-connect-wrap-inner { margin: 0 auto 2rem; } .dfb-welcome-wave { font-size: 40px; margin: 0 0 10px; display: block; line-height: 1; } h2 { font-weight: 500; margin: 0 0 0.4rem; } p { } } // -------------------------------- // Disconnect Button & Modal // -------------------------------- .dfb-stripe-disconnect { flex-direction: column; align-items: flex-start; row-gap: 0.5rem; &__link { display: flex; column-gap: 0.3rem; font-size: 13px; color: #AAA9A9; align-items: center; &:hover { color: red; } .dashicon { height: 13px; font-size: 13px; } button.components-button.is-link { color: #AAA9A9; text-decoration: none; &:hover { color: red; text-decoration: underline; } } } } .dfb-stripe-disconnect-modal { max-width: 34rem; .components-modal__icon-container { line-height: 0; } .components-modal__header-heading-container { column-gap: 0.5rem; } p { margin: 0; } &__form { display: flex; flex-direction: column; row-gap: 2rem; } &__error { color: #D0021B; } &__buttons { display: flex; column-gap: 1rem; padding-top: 1rem; border-top: 1px solid #eaeaea; } } // -------------------------------- // Connect Button // -------------------------------- .dfb-stripe-connect { display: flex; align-items: center; justify-content: center; background: #6772e5; color: #fff; padding: 10px 15px; border-radius: 5px; font-size: 15px; text-decoration: none; letter-spacing: 0.6px; transition: 0.3s ease all; width: 200px; .stripe-logo { padding: 2px 10px 0 0; } &:hover, &:focus, &:active { background: #3f4ddf; color: #fff; } } // -------------------------------- // reCAPTCHA // -------------------------------- .dfb-recaptcha-options { display: block; padding: 10px; border: 1px solid $color-container-border; background: $color-container-bg; border-radius: 5px; .components-button, .dfb-label-secret-key { margin-top: 10px; } } .dfb-recaptcha-link-toggle.components-toggle-control > .components-base-control__field { margin-bottom: 0; } // -------------------------------- // Help // -------------------------------- .dfb-docs-support-panel-row { background: $color-container-bg; border: 1px solid $color-container-border; display: flex; padding: 8px 10px; align-items: center; border-radius: 6px; width: 100%; p { margin: 0; padding: 0; line-height: 18px; } span { text-transform: uppercase; } &__icon { margin-right: 10px; } } // -------------------------------- // Connected Element // -------------------------------- .dfb-connected-wrap { position: relative; font-family: $font-family; background: $color-container-bg; border: 1px solid $color-container-border; height: 50px; margin: 10px 0 15px; padding: 0 25px; display: flex; align-items: center; border-radius: 6px; } .dfb-connected-circle-wrap { width: 16px; height: 16px; margin: 0 10px 0 0; } .dfb-connected-circle { position: absolute; width: 16px; height: 16px; &:before { content: ''; position: relative; display: block; width: 200%; height: 200%; box-sizing: border-box; margin-left: -50%; margin-top: -50%; border-radius: 45px; background-color: #28A745; animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } &:after { content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: #28A745; border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, .3); animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite; } } .dfb-stripe-message { text-align: center; margin: 30px 0 0; width: 100%; p { margin: 20px 0; font-style: italic; color: #656D76; } } @keyframes pulse-ring { 0% { transform: scale(.33); } 80%, 100% { opacity: 0; } } @keyframes pulse-dot { 0% { transform: scale(.8); } 50% { transform: scale(1); } 100% { transform: scale(.8); } } // -------------------------------- // Lottie Connected Animation // -------------------------------- #dfb-connected-lottie { position: absolute; top: -50%; left: 0; right: 0; } .dfb-lottie-connected-text { max-width: 650px; margin: 0 auto 30px; background: #FFF; border-radius: 8px; padding: 15px; text-align: center; font-size: 40px; z-index: 9999; box-shadow: 0 0 3px #00000045; position: relative; }