diff --git a/includes/assets/ctb.css b/includes/assets/ctb.css index 07b069c..d51200d 100644 --- a/includes/assets/ctb.css +++ b/includes/assets/ctb.css @@ -33,16 +33,14 @@ body.noscroll { .global-ctb-modal-content { align-items: center; background-color: white; - background: white; + background: transparent; color: black; display: flex; - height: 80vh; justify-content: center; margin: auto; max-height: 80vh; + min-width: 960px; max-width: 80vw; - min-height: 80vh; - min-width: 80vw; padding: 0; position: relative; z-index: 2; @@ -58,12 +56,13 @@ body.noscroll { } .global-ctb-modal iframe { + background-color: white; + min-height: 550px; height: 100%; max-height: 100%; - max-width: 100%; - min-height: 100%; - min-width:100%; width: 100%; + max-width: 100%; + border-radius: 5px; z-index: 1; } @@ -73,51 +72,41 @@ body.noscroll { } .global-ctb-loader { - -webkit-animation: globalctbloader .9s infinite linear; - animation: globalctbloader .9s infinite linear; - background: #3575d3; - background: linear-gradient(to right, #3575d3 5%, rgba(0, 0, 0, 0) 32%); - border-radius: 50%; - height: 5rem; + width: 8px; + height: 40px; + border-radius: 4px; + display: block; + margin: 20px auto; position: relative; - transform: translateZ(0); - width: 5rem; - will-change: transform; + background: currentColor; + color: #FFF; + box-sizing: border-box; + animation: globalctbloader 0.3s 0.3s linear infinite alternate; } -.global-ctb-loader:before { - background: #3575d3; - border-radius: 100% 0 0 0; - content: ""; - height: 50%; - left: 0; +.global-ctb-loader::after, +.global-ctb-loader::before { + content: ''; + width: 8px; + height: 40px; + border-radius: 4px; + background: currentColor; position: absolute; - top: 0; - width: 50%; + top: 50%; + transform: translateY(-50%); + left: 20px; + box-sizing: border-box; + animation: globalctbloader 0.3s 0.45s linear infinite alternate; } -.global-ctb-loader:after { - background: #fff; - border-radius: 50%; - bottom: 0; - content: ""; - height: 88%; - left: 0; - margin: auto; - position: absolute; - right: 0; - top: 0; - width: 88%; +.global-ctb-loader:before { + left: -20px; + animation-delay: 0s; } @keyframes globalctbloader { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } + 0% { height: 48px} + 100% { height: 4px} } .global-ctb-modal-close { diff --git a/includes/assets/ctb.js b/includes/assets/ctb.js index eed2c74..bbd6a72 100644 --- a/includes/assets/ctb.js +++ b/includes/assets/ctb.js @@ -31,6 +31,8 @@ } }) .then(data => { + // enable close button + modalWindow.querySelector('.global-ctb-modal-close').style.display = 'flex'; // set the content to an iframe of specified url let iframe = document.createElement('iframe'); iframe.src = data.url; @@ -112,7 +114,7 @@