Submit
Path:
~
/
home
/
getwphos
/
www
/
shellfish
/
wp-content
/
plugins
/
templaza-framework
/
framework
/
fields
/
tz_preloader
/
File Content:
field_tz_preloader.css
/* Wave */ /* wandering-cubes */ /* chase */ /* chasing-dots */ /* sk-three-bounce */ /* sk-circle */ /* sk-cube-grid */ /* sk-fading-circle */ /* sk-folding-cube */ .sk-rotating-plane { width: 40px; height: 40px; margin: auto; background-color: #727cf5; animation: sk-rotating-plane 1.2s infinite ease-in-out; } @keyframes sk-rotating-plane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } .sk-double-bounce { width: 40px; height: 40px; position: relative; margin: auto; } .sk-double-bounce .sk-child { width: 100%; height: 100%; border-radius: 50%; background-color: #727cf5; opacity: 0.6; position: absolute; top: 0; left: 0; animation: sk-double-bounce 2s infinite ease-in-out; } .sk-double-bounce .sk-double-bounce2 { animation-delay: -1s; } @keyframes sk-double-bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .sk-wave { width: 60px; height: 40px; margin: auto; text-align: center; font-size: 1em; } .sk-wave .sk-rect { background-color: #727cf5; height: 100%; width: 0.5em; display: inline-block; animation: sk-wave-stretch-delay 1.2s infinite ease-in-out; } .sk-wave .sk-rect1 { animation-delay: -1.2s; } .sk-wave .sk-rect2 { animation-delay: -1.1s; } .sk-wave .sk-rect3 { animation-delay: -1s; } .sk-wave .sk-rect4 { animation-delay: -0.9s; } .sk-wave .sk-rect5 { animation-delay: -0.8s; } @keyframes sk-wave-stretch-delay { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } } .sk-wandering-cubes { width: 40px; height: 40px; position: relative; margin: auto; } .sk-wandering-cubes .sk-cube { background-color: #727cf5; width: 20%; height: 20%; position: absolute; top: 0; left: 0; animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both; } .sk-wandering-cubes .sk-cube2 { animation-delay: -0.9s; } @keyframes sk-wandering-cubes { 0% { transform: rotate(0deg); } 25% { transform: translateX(calc(var(--tztheme-preloader-size, 4em) * 0.55)) rotate(-90deg) scale(0.5); } 50% { /* Hack to make FF rotate in the right direction */ transform: translateX(calc(var(--tztheme-preloader-size, 4em) * 0.55)) translateY(calc(var(--tztheme-preloader-size, 4em) * 0.55)) rotate(-179deg); } 50.1% { transform: translateX(calc(var(--tztheme-preloader-size, 4em) * 0.55)) translateY(calc(var(--tztheme-preloader-size, 4em) * 0.55)) rotate(-180deg); } 75% { transform: translateX(0) translateY(calc(var(--tztheme-preloader-size, 4em) * 0.55)) rotate(-270deg) scale(0.5); } 100% { transform: rotate(-360deg); } } .sk-spinner-pulse { width: 40px; height: 40px; margin: auto; background-color: #727cf5; border-radius: 100%; animation: sk-spinner-pulse 1s infinite ease-in-out; } @keyframes sk-spinner-pulse { 0% { transform: scale(0); } 100% { transform: scale(1); opacity: 0; } } .sk-chase { width: 40px; height: 40px; margin: auto; position: relative; animation: sk-chase 2.5s infinite linear both; } .sk-chase .sk-chase-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; animation: sk-chase-dot 2s infinite ease-in-out both; } .sk-chase .sk-chase-dot:before { content: ""; display: block; width: 25%; height: 25%; background-color: #727cf5; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; animation: sk-chase-dot-before 2s infinite ease-in-out both; } .sk-chase .sk-chase-dot:nth-child(1), .sk-chase .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; } .sk-chase .sk-chase-dot:nth-child(2), .sk-chase .sk-chase-dot:nth-child(2):before { animation-delay: -1s; } .sk-chase .sk-chase-dot:nth-child(3), .sk-chase .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; } .sk-chase .sk-chase-dot:nth-child(4), .sk-chase .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; } .sk-chase .sk-chase-dot:nth-child(5), .sk-chase .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; } .sk-chase .sk-chase-dot:nth-child(6), .sk-chase .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; } @keyframes sk-chase { 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot { 80%, 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot-before { 50% { transform: scale(0.4); } 100%, 0% { transform: scale(1); } } .sk-chasing-dots { width: 40px; height: 40px; position: relative; margin: auto; text-align: center; animation: sk-chasing-dots-rotate 2s infinite linear; } .sk-chasing-dots .sk-child { width: calc(40px / 2); height: calc(40px / 2); display: inline-block; position: absolute; top: 0; background-color: #727cf5; border-radius: 100%; animation: sk-chasing-dots-bounce 2s infinite ease-in-out; } .sk-chasing-dots .sk-dot2 { top: auto; bottom: 0; animation-delay: -1s; } @keyframes sk-chasing-dots-rotate { 100% { transform: rotate(360deg); } } @keyframes sk-chasing-dots-bounce { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } .sk-three-bounce { width: 80px; margin: auto; text-align: center; } .sk-three-bounce .sk-child { width: calc(40px / 2); height: calc(40px / 2); background-color: #727cf5; border-radius: 100%; display: inline-block; animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } .sk-three-bounce .sk-bounce1 { animation-delay: -0.32s; } .sk-three-bounce .sk-bounce2 { animation-delay: -0.16s; } @keyframes sk-three-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .sk-circle { width: 40px; height: 40px; position: relative; margin: auto; } .sk-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-circle .sk-child:before { content: ""; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #727cf5; border-radius: 100%; animation: sk-circle-delay 1.2s infinite ease-in-out both; } .sk-circle .sk-circle2 { transform: rotate(30deg); } .sk-circle .sk-circle3 { transform: rotate(60deg); } .sk-circle .sk-circle4 { transform: rotate(90deg); } .sk-circle .sk-circle5 { transform: rotate(120deg); } .sk-circle .sk-circle6 { transform: rotate(150deg); } .sk-circle .sk-circle7 { transform: rotate(180deg); } .sk-circle .sk-circle8 { transform: rotate(210deg); } .sk-circle .sk-circle9 { transform: rotate(240deg); } .sk-circle .sk-circle10 { transform: rotate(270deg); } .sk-circle .sk-circle11 { transform: rotate(300deg); } .sk-circle .sk-circle12 { transform: rotate(330deg); } .sk-circle .sk-circle2:before { animation-delay: -1.1s; } .sk-circle .sk-circle3:before { animation-delay: -1s; } .sk-circle .sk-circle4:before { animation-delay: -0.9s; } .sk-circle .sk-circle5:before { animation-delay: -0.8s; } .sk-circle .sk-circle6:before { animation-delay: -0.7s; } .sk-circle .sk-circle7:before { animation-delay: -0.6s; } .sk-circle .sk-circle8:before { animation-delay: -0.5s; } .sk-circle .sk-circle9:before { animation-delay: -0.4s; } .sk-circle .sk-circle10:before { animation-delay: -0.3s; } .sk-circle .sk-circle11:before { animation-delay: -0.2s; } .sk-circle .sk-circle12:before { animation-delay: -0.1s; } @keyframes sk-circle-delay { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .sk-cube-grid { width: 40px; height: 40px; margin: auto; /* * Spinner positions * 1 2 3 * 4 5 6 * 7 8 9 */ } .sk-cube-grid .sk-cube { width: 33%; height: 33%; background-color: #727cf5; float: left; animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out; } .sk-cube-grid .sk-cube1 { animation-delay: 0.2s; } .sk-cube-grid .sk-cube2 { animation-delay: 0.3s; } .sk-cube-grid .sk-cube3 { animation-delay: 0.4s; } .sk-cube-grid .sk-cube4 { animation-delay: 0.1s; } .sk-cube-grid .sk-cube5 { animation-delay: 0.2s; } .sk-cube-grid .sk-cube6 { animation-delay: 0.3s; } .sk-cube-grid .sk-cube7 { animation-delay: 0s; } .sk-cube-grid .sk-cube8 { animation-delay: 0.1s; } .sk-cube-grid .sk-cube9 { animation-delay: 0.2s; } @keyframes sk-cube-grid-scale-delay { 0%, 70%, 100% { transform: scale3D(1, 1, 1); } 35% { transform: scale3D(0, 0, 1); } } .sk-fading-circle { width: 40px; height: 40px; position: relative; margin: auto; } .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-fading-circle .sk-circle:before { content: ""; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #727cf5; border-radius: 100%; animation: sk-fading-circle-delay 1.2s infinite ease-in-out both; } .sk-fading-circle .sk-circle2 { transform: rotate(30deg); } .sk-fading-circle .sk-circle3 { transform: rotate(60deg); } .sk-fading-circle .sk-circle4 { transform: rotate(90deg); } .sk-fading-circle .sk-circle5 { transform: rotate(120deg); } .sk-fading-circle .sk-circle6 { transform: rotate(150deg); } .sk-fading-circle .sk-circle7 { transform: rotate(180deg); } .sk-fading-circle .sk-circle8 { transform: rotate(210deg); } .sk-fading-circle .sk-circle9 { transform: rotate(240deg); } .sk-fading-circle .sk-circle10 { transform: rotate(270deg); } .sk-fading-circle .sk-circle11 { transform: rotate(300deg); } .sk-fading-circle .sk-circle12 { transform: rotate(330deg); } .sk-fading-circle .sk-circle2:before { animation-delay: -1.1s; } .sk-fading-circle .sk-circle3:before { animation-delay: -1s; } .sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; } .sk-fading-circle .sk-circle5:before { animation-delay: -0.8s; } .sk-fading-circle .sk-circle6:before { animation-delay: -0.7s; } .sk-fading-circle .sk-circle7:before { animation-delay: -0.6s; } .sk-fading-circle .sk-circle8:before { animation-delay: -0.5s; } .sk-fading-circle .sk-circle9:before { animation-delay: -0.4s; } .sk-fading-circle .sk-circle10:before { animation-delay: -0.3s; } .sk-fading-circle .sk-circle11:before { animation-delay: -0.2s; } .sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; } @keyframes sk-fading-circle-delay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } .sk-folding-cube { width: 40px; height: 40px; position: relative; margin: auto; transform: rotateZ(45deg); } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; transform: scale(1.1); } .sk-folding-cube .sk-cube:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #727cf5; animation: sk-folding-cube-angle 2.4s infinite linear both; transform-origin: 100% 100%; } .sk-folding-cube .sk-cube2 { transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 { transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 { transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before { animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before { animation-delay: 0.6s; } .sk-folding-cube .sk-cube4:before { animation-delay: 0.9s; } @keyframes sk-folding-cube-angle { 0%, 10% { transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { transform: perspective(140px) rotateY(180deg); opacity: 0; } } .bouncing-loader { display: flex; justify-content: center; margin: 0 auto; } .bouncing-loader > div { width: calc(40px / 2); height: calc(40px / 2); margin: 1rem 0.2rem 0; background: #727cf5; border-radius: 50%; -webkit-animation: bouncing-loader 0.6s infinite alternate; -o-animation: bouncing-loader 0.6s infinite alternate; animation: bouncing-loader 0.6s infinite alternate; } .bouncing-loader > div:nth-child(2) { animation-delay: 0.2s; } .bouncing-loader > div:nth-child(3) { animation-delay: 0.4s; } @keyframes bouncing-loader { to { opacity: 0.1; transform: translate3d(0, -1rem, 0); } } .donut { display: inline-block; border: 4px solid #e8ebf1; border-left-color: #727cf5; border-radius: 50%; margin: 0 auto; width: 40px; height: 40px; animation: donut-spin 1.2s linear infinite; } @keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .triple-spinner { display: block; position: relative; width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; border-top: 2px solid #727cf5; border-left: 2px solid #727cf5; -webkit-animation: preload-spin 2s linear infinite; animation: preload-spin 2s linear infinite; } .triple-spinner::before, .triple-spinner::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid transparent; } .triple-spinner::before { opacity: 0.85; top: 8%; left: 8%; right: 8%; bottom: 8%; border-top-color: #727cf5; border-left-color: #727cf5; -webkit-animation: preload-spin 3s linear infinite; animation: preload-spin 3.5s linear infinite; } .triple-spinner::after { opacity: 0.7; top: 18%; left: 18%; right: 18%; bottom: 18%; border-top-color: #727cf5; border-left-color: #727cf5; -webkit-animation: preload-spin 1.5s linear infinite; animation: preload-spin 1.75s linear infinite; } .cm-spinner { width: 40px; height: 40px; border: 2px solid transparent; border-radius: 50%; border-top: 2px solid #727cf5; -webkit-animation: preload-spin 4s linear infinite; animation: preload-spin 4s linear infinite; position: relative; } .cm-spinner::before, .cm-spinner::after { content: ""; position: absolute; top: 10%; bottom: 10%; left: 10%; right: 10%; border-radius: 50%; border: 2px solid transparent; } .cm-spinner::before { opacity: 0.8; border-top-color: #727cf5; -webkit-animation: 3s preload-spin linear infinite; animation: 3s preload-spin linear infinite; } .cm-spinner::after { opacity: 0.9; border-top-color: #727cf5; -webkit-animation: preload-spin 1.5s linear infinite; animation: preload-spin 1.5s linear infinite; } .hm-spinner { width: 40px; height: 40px; border: 2px solid transparent; border-top-color: #727cf5; border-bottom-color: #727cf5; border-radius: 50%; position: relative; -webkit-animation: preload-spin 3s linear infinite; animation: preload-spin 3s linear infinite; } .hm-spinner::before { opacity: 0.7; content: ""; position: absolute; top: 15%; right: 15%; bottom: 15%; left: 15%; border: 2px solid transparent; border-top-color: #727cf5; border-bottom-color: #727cf5; border-radius: 50%; -webkit-animation: preload-spin 1.5s linear infinite; animation: preload-spin 1.5s linear infinite; } .reverse-spinner { position: relative; width: 40px; height: 40px; border: 2px solid transparent; border-top-color: #727cf5; border-left-color: #727cf5; border-radius: 50%; -webkit-animation: preload-spin 1.5s linear infinite; animation: preload-spin 1.5s linear infinite; } .reverse-spinner::before { position: absolute; top: 15%; left: 15%; right: 15%; bottom: 15%; content: ""; border: 2px solid transparent; border-top-color: #727cf5; border-left-color: #727cf5; border-radius: 50%; -webkit-animation: preload-spin-back 1s linear infinite; animation: preload-spin-back 1s linear infinite; } @-webkit-keyframes preload-spin-back { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-720deg); transform: rotate(-720deg); } } @keyframes preload-spin-back { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-720deg); transform: rotate(-720deg); } } @-webkit-keyframes preload-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes preload-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .field-tz-preloader-dialog { box-sizing: border-box; position: fixed !important; background-color: transparent; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; z-index: 100102; } .field-tz-preloader-dialog .ui-dialog-titlebar { position: absolute; width: 100%; height: 37px; max-width: 80vw; top: 10vh; left: 10vw; box-sizing: border-box; z-index: 2; background: #fcfcfc; border-bottom: 1px solid #dfdfdf; font-size: 18px; font-weight: 600; line-height: 2; padding: 0 36px 0 16px; } .field-tz-preloader-dialog .ui-dialog-content { height: 100% !important; max-height: 80vh !important; position: absolute; top: 10vh; left: 10vw; background: #fff; box-sizing: border-box; width: 100% !important; max-width: 80vw; z-index: 1; padding: 50px 16px 16px; overflow: auto; } .field-tz-preloader-dialog.ui-dialog-buttons .ui-dialog-content { padding-bottom: 70px; } .field-tz-preloader-dialog .ui-dialog-buttonpane { position: absolute; bottom: 10vh; left: 10vw; z-index: 2; width: 100%; box-sizing: border-box; max-width: 80vw; background: #fcfcfc; border-top: 1px solid #dfdfdf; padding: 16px; } .field-tz-preloader-dialog .ui-button.ui-dialog-titlebar-close { background: 0 0; border: none; box-shadow: none; color: #666; cursor: pointer; display: block; padding: 0; position: absolute; top: 0; right: 0; width: 36px; height: 36px; text-align: center; border-radius: 0; } .field-tz-preloader-dialog .ui-button.ui-dialog-titlebar-close:before { content: "\f158"; font: normal 20px/1 dashicons; vertical-align: top; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.8; width: 36px; height: 36px; } .field-tz-preloader-dialog .ui-button.ui-dialog-titlebar-close:focus { box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8); outline: 2px solid transparent; outline-offset: -2px; } .field-tz-preloader-dialog .ui-dialog-titlebar-close .ui-button-text { display: none; } .field-tz-preloader-dialog .ui-button { display: inline-block; text-decoration: none; font-size: 13px; line-height: 2; height: 28px; margin: 0; padding: 0 10px 1px; cursor: pointer; border-width: 1px; border-style: solid; -webkit-appearance: none; border-radius: 3px; white-space: nowrap; box-sizing: border-box; color: #555; border-color: #ccc; background: #f7f7f7; box-shadow: 0 1px 0 #ccc; vertical-align: top; } .field-tz-preloader-dialog .ui-button:active, .field-tz-preloader-dialog .ui-button:focus { outline: 0; } .field-tz-preloader-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-widget-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; min-height: 360px; background: #000; opacity: 0.7; filter: alpha(opacity=70); z-index: 100101; } .tz-field-preloaders-selector *, .tz-field-preloaders-selector *::before, .tz-field-preloaders-selector *::after { box-sizing: border-box; } .tz-field-preloaders-selector .tz-preloader-select { cursor: pointer; border: 1px solid #e8ebf1; border-radius: 5px; height: 100px; width: 100px; padding: 0px; text-align: center; margin: 10px; display: inline-block; float: left; } .tz-field-preloaders-selector .tz-preloader-select .tz-preloader-select-inner { display: flex; height: 100%; align-items: center; justify-content: center; } .redux-container-tz_preloader .field-tz-preloader { cursor: pointer; padding: 10px; border: 1px solid #e8ebf1; border-radius: 5px; position: relative; overflow: hidden; display: inline-block; min-width: 40px; min-height: 40px; } .redux-container-tz_preloader .tz-preloader-field-select { display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; } /*# sourceMappingURL=field_tz_preloader.css.map */
Submit
FILE
FOLDER
Name
Size
Permission
Action
field_tz_preloader.css
20490 bytes
0644
field_tz_preloader.css.map
4825 bytes
0644
field_tz_preloader.js
2389 bytes
0644
field_tz_preloader.php
11571 bytes
0644
field_tz_preloader.scss
4276 bytes
0644
N4ST4R_ID | Naxtarrr