// ------------------------------------------------------------------------------------------------
// SETUP WIZARD
// ------------------------------------------------------------------------------------------------
@if $page-setup-wizard {
.xts-wizard {
#wpbody-content {
--xts-content-width: 100%;
// display: flex;
// align-items: center;
// flex-direction: column;
// justify-content: center;
// padding-top: 0;
// min-height: calc(100vh - 100px);
// min-height: 100vh;
// max-width: 100%;
padding-block: 20px 50px;
:is(
.xts-setup-wizard-wrap,
.xts-footer) {
// margin-right: auto;
// margin-left: auto;
// margin-inline: auto;
// max-width: 1000px;
width: 100%;
max-width: 1800px;
}
.xts-footer {
margin-top: 20px;
}
}
&:has(.xts-plugin-wrapper.xts-loading), // #PARTS-HAS
&:has(.xts-import-items.xts-loading) { // #PARTS-HAS
.xts-wizard-nav,
#wpadminbar,
#adminmenu,
.xts-footer.xts-theme-style {
pointer-events: none;
}
}
}
.xts-setup-wizard {
--xts-input-height: 50px;
display: flex;
flex-direction: column;
border-radius: var(--xts-brd-radius);
background-color: #FFF;
min-height: calc(100vh - 175px);
background-image: url(../../../../../inc/admin/modules/setup-wizard/images/background.svg);
background-position: center;
background-size: cover;
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
a {
outline: none;
box-shadow: none;
text-decoration: none;
transition: all .25s ease;
}
input[type="text"] {
&:disabled {
pointer-events: none;
}
}
.xts-box {
background-color: transparent;
box-shadow: none;
}
.xts-box-header {
display: block;
margin-bottom: 25px;
min-height: auto;
border: none;
// h3 {
// margin: 0;
// }
}
:is(
.xts-box-header,
.xts-box-content) {
padding: 0;
}
.xts-msg {
> p {
// margin-top: 0;
// margin-bottom: 30px;
margin-block: 0 30px;
}
}
.xts-notice {
font-size: 12px;
}
// .xts-note {
// // background-color: #F9F9F9;
// font-size: 12px;
// }
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
border-radius: 3px;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background-color: rgba(#000,.05);
}
::-webkit-scrollbar-thumb {
background-color: rgba(#000,.12);
}
//**** BUTTONS ****//
.xts-skip {
font-weight: 400;
&:not(.xts-skip-setup) {
position: absolute;
inset-inline-end: 30px;
// top: 140px;
top: 35px;
z-index: 10;
}
}
}
.xts-wizard-img {
margin-bottom: 20px;
}
.xts-step-actions {
// display: inline-flex;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
gap: 15px;
.xts-inline-btn {
font-weight: 400;
}
}
.xts-wizard-nav {
// border-bottom: 1px solid var(--xts-option-border-color);
padding: 25px 30px 0px 30px;
overflow: hidden;
ul {
position: relative;
display: flex;
margin: 0;
// margin-inline-end: -16%;
counter-reset: section;
&:before {
content: "";
position: absolute;
bottom: 8px;
inset-inline: 0;
// inset-inline-start: 0;
// inset-inline-end: 16%;
// width: 100%;
height: 3px;
background-color: #EBEBEB;
}
li {
position: relative;
display: flex;
transition: all .25s ease;
user-select: none;
// flex-grow: 1;
z-index: 1;
// justify-content: center;
flex: 1;
// width: 100%;
white-space: nowrap;
font-size: 14px;
margin-bottom: 0;
counter-increment: section;
.xts-wizard-nav-content {
// max-width: 27px;
color: #e2e2e2;
// transition: all .25s ease;
line-height: 1;
transition-duration: 0s;
&:before {
content: counter(section, decimal-leading-zero);
font-size: 20px;
font-weight: 600;
color: #e2e2e2;
margin-inline-start: -4px;
// transition: all .25s ease;
}
&:after {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #FFF;
border: 6px solid var(--xts-primary-color);
margin-top: 5px;
box-shadow: 0px 0px 0px 3px rgba(255,255,255,1);
// transition: all .25s ease;
}
}
&:is(
.xts-active,
.xts-disabled) {
pointer-events: none;
}
&.xts-disabled {
.xts-wizard-nav-content {
&:after {
background-color: #EBEBEB;
border-color: #EBEBEB;
}
}
}
&.xts-active {
.xts-wizard-nav-content {
color: #656565;
&:before {
color: #000;
}
}
}
&:not(:is(.xts-active, .xts-disabled)) {
.xts-wizard-nav-content {
&:after {
background-color: var(--xts-primary-color);
}
}
&:before {
content: "";
position: absolute;
top: 32px;
inset-inline-start: 21px;
background-color: var(--xts-primary-color);
height: 3px;
width: calc(100% - 18px);
}
&:after {
content: "\f15e";
position: absolute;
top: 25px;
inset-inline-start: 2px;
font-family: "dashicons";
color: #FFF;
font-size: 14px;
pointer-events: none;
// transition: all .25s ease;
}
// &:hover {
// .xts-wizard-nav-content {
// color: #656565;
// &:before {
// color: #000;
// }
// }
// }
}
&[data-slug="welcome"] {
display: none;
}
&[data-slug="done"] {
position: absolute;
inset-inline-end: 0;
bottom: 0;
.xts-wizard-nav-content:after {
margin-inline-start: auto;
}
}
}
}
}
.xts-wizard-nav-btn {
pointer-events: none;
// transition: none !important;
transition-duration: 0s !important;
}
.xts-wizard-content {
position: relative;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: space-between;
border-radius: var(--xts-brd-radius);
padding: 90px 30px 40px 30px;
text-align: center;
h3 {
font-size: 30px;
line-height: 1;
}
p {
color: #727272;
font-size: 15px;
margin-bottom: 0;
}
.xts-btn {
// display: inline-flex;
align-items: center;
padding: 0 30px;
height: 50px;
line-height: 50px;
font-size: 15px;
&.xts-shown {
display: inline-flex;
}
}
// .xts-disabled .xts-color-primary, // NOTE IF FOOTER IS DISABLED
// .xts-color-primary.xts-disabled {
// // background-color: var(--xts-grey-color) !important;
// color: #B9B9B9 !important;
// pointer-events: none;
// user-select: none;
// }
// .xts-disabled .xts-btn.xts-color-primary,
// .xts-color-primary.xts-disabled {
// background-color: var(--xts-grey-color) !important;
// }
// .xts-disabled {
// .xts-inline-btn {
// opacity: .5;
// }
// }
.xts-next {
&:after {
margin-inline: 5px -5px;
font-weight: 400;
@include font-icon($xts-icon-button-right);
.rtl & {
@include font-icon($xts-icon-button-left);
}
}
}
.xts-prev {
&:before {
margin-inline: -5px 5px;
font-weight: 400;
@include font-icon($xts-icon-button-left);
}
.rtl & {
&:before {
@include font-icon($xts-icon-button-right);
}
}
}
}
.xts-wizard-logo {
margin-bottom: 25px;
min-height: 36px;
max-width: 245px;
width: 245px;
}
.xts-wizard-content-inner {
max-width: 715px;
margin-inline: auto;
width: 100%;
}
@media (max-width: 1400px) {
.xts-wizard-content {
padding-top: 60px;
}
}
// @media (min-width: 1025px) and (max-width: 1300px) {
// .xts-wizard-nav-content {
// font-size: 0;
// }
// }
@media (max-width: 1300px) {
// .xts-wizard-nav-content {
// font-size: 0;
// }
.xts-wizard-nav {
ul {
li:not(.xts-active) {
font-size: 0;
.xts-wizard-nav-content {
&:before {
opacity: 0;
}
}
}
li[data-slug="prebuilt-websites"] {
padding-inline-end: 18px;
}
}
}
}
// ------------------------------------------
// 1. WELCOME
// ------------------------------------------
.xts-wizard-welcome-img {
margin-block: 0 15px;
}
.xts-setup-wizard {
&:has(.xts-active[data-slug="welcome"]) {
background-image: url(../../../../../inc/admin/modules/setup-wizard/images/welcome-bg.jpg);
background-size: 80%;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 30%;
h3 {
font-size: 30px;
}
.xts-wizard-nav {
display: none;
}
.xts-wizard-content {
justify-content: center;
background-image: url(../../../../../inc/admin/modules/setup-wizard/images/background.svg);
background-position: center;
background-size: cover;
text-align: center;
overflow: hidden;
}
}
}
.xts-wizard-content {
.xts-wizard-signature {
margin-top: 15px;
// min-height: 57px;
line-height: 60px;
img {
margin-inline-start: 10px;
max-width: 95px;
}
}
}
@media (min-width: 1200px) {
.xts-wizard-welcome-img {
margin-inline: -200px;
}
}
// ------------------------------------------
// 2. ACTIVATION
// ------------------------------------------
.xts-wizard-content {
.xts-license {
.xts-box-header {
// display: flex;
// flex-wrap: wrap;
margin-bottom: 20px;
h3 {
margin: 0;
}
p {
display: block;
width: 100%;
}
}
.xts-notice {
text-align: center;
}
}
.xts-licanse-dashboard-label {
display: none;
}
.xts-license-img {
display: none;
}
.xts-license-content {
flex-basis: 100%;
max-width: 100%;
}
.xts-activation-form {
// align-items: center;
input[type="text"] {
padding-inline-end: 8px !important;
}
}
.xts-activation-form-inner {
max-width: 100%;
span {
display: none;
}
}
.xts-license-btn {
align-self: center;
&:before {
inset-inline-start: 25px;
font-size: 15px;
}
input {
padding-inline-start: 45px;
}
}
.xts-activated-message {
form {
display: none;
}
}
}
// ------------------------------------------
// 3. CHILD THEME
// ------------------------------------------
.xts-theme-images {
display: flex;
align-items: center;
justify-content: center;
margin-block: 20px;
min-height: 115px;
> div {
padding: 3px;
// border: 1px solid rgba(0, 0, 0, .05);
border: 1px solid var(--xts-option-border-color);
border-radius: var(--xts-brd-radius);
background-color: #FFF;
img {
border-radius: inherit;
}
}
}
.xts-main-image {
position: relative;
z-index: 5;
transition: all .4s ease;
}
.xts-child-image {
position: relative;
margin-inline-start: 10px;
max-width: 165px;
opacity: 0;
transition: all .4s ease;
transform: translateX(-100%);
&:before {
position: absolute;
top: -7px;
inset-inline-end: -7px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--xts-primary-color);
color: #FFF;
font-size: 17px;
opacity: 0;
transition: all .4s ease .4s;
@include font-icon($xts-icon-check);
}
}
.xts-install-child-theme {
&.xts-loading {
&:after {
display: inline-block !important;
@include act-loader;
}
}
&:after {
display: none !important;
margin-inline-end: -5px;
margin-inline-start: 12px;
@include loader(14px,1px,rgba(255,255,255,.15),#FFF);
}
}
.xts-wizard-child-theme {
&.xts-installed {
.xts-child-image {
opacity: 1;
transform: none;
&:before {
opacity: 1;
}
}
.xts-install-child-theme,
.xts-skip {
display: none;
}
}
&:not(.xts-installed) {
.xts-main-image {
transform: translateX(90px);
}
.xts-next {
display: none;
}
}
}
// ------------------------------------------
// 4. PAGE BUILDER
// ------------------------------------------
.xts-wizard-builder-select {
display: flex;
// flex-direction: column;
gap: 15px;
margin-top: 20px;
> :is(
div,
span) {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
}
> div {
flex: 1 1 0%;
align-items: center;
flex-direction: column;
// justify-content: flex-start;
gap: 20px;
padding: 25px 20px 20px 20px;
// padding-top: 25px;
// border: 1px solid #EDEDED;
// border: 1px solid rgba(0, 0, 0, .05);
border-radius: var(--xts-brd-radius);
background-color: #FFF;
text-align: center;
cursor: pointer;
transition: all .25s ease;
border: 1px solid var(--xts-option-border-color);
> * {
// opacity: .5;
// filter: grayscale(100%);
transition: inherit;
}
p {
// margin-bottom: 0;
font-size: 13px;
}
// &.xts-active {
// > * {
// opacity: 1;
// filter: grayscale(0);
// }
// }
// &.xts-active,
// &:hover {
// // border-color: var(--xts-btn-primay-color);
// // box-shadow: inset 0 0 0 1px var(--xts-btn-primay-color);
// border-color: var(--xts-btn-primay-color);
// }
&:hover {
border-color: #CACACA;
}
&.xts-active {
border-color: var(--xts-btn-primay-color);
box-shadow: inset 0 0 0 1px var(--xts-btn-primay-color);
}
}
> span {
display: none;
// margin-right: 15px;
// margin-left: 15px;
// margin-inline: 15px;
font-weight: 500;
}
}
.xts-page-builder-img {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.xts-page-builder-text {
display: flex;
flex-direction: column;
gap: 10px;
}
.xts-page-builder-title {
// margin-top: 15px;
// margin-bottom: 8px;
// margin-block: 15px 8px;
color: #333;
font-weight: 700;
font-size: 16px;
}
// ------------------------------------------
// 6. IMPORT
// ------------------------------------------
.xts-wizard-content-inner {
&.xts-wizard-dummy {
display: none;
max-width: 100%;
&.xts-active {
display: block;
}
}
}
.xts-setup-wizard {
&:has(.xts-wizard-dummy.xts-active) {
background-image: none;
.xts-wizard-content {
padding-top: 30px;
}
}
}
.xts-wizard-dummy {
// margin-top: -40px;
// .xts-skip {
// top: 125px !important;
// }
.xts-note {
display: block !important;
}
:is(
.xts-btn,
.xts-bordered-btn) {
padding: 0 10px;
height: 30px;
font-size: 11px;
line-height: 30px;
}
.xts-col-remove-content,
.xts-buttons-control {
display: none !important;
}
.xts-notices-sticky {
background-color: #F7F7F7;
margin: 0;
padding: 0;
}
.xts-box-footer {
display: none;
}
.xts-import-item {
&:hover {
box-shadow: none;
}
}
.xts-import-item-title {
font-size: 13px;
line-height: 15px;
}
.xts-import-item-btn {
&:after {
inset-inline-start: 7px;
}
}
.xts-import-item-footer {
padding: 10px;
}
}
.xts-wizard-dummy {
&.imported-base {
.xts-skip {
display: none;
}
}
}
// ------------------------------------------
// 6.1 INSTALLING IMPORT
// ------------------------------------------
.xts-wizard-content-inner {
&.xts-wizard-import-template {
display: none;
&.xts-active {
display: block;
}
}
.xts-import-status {
margin-block: 0 20px;
li {
margin: 0;
font-size: 15px;
&:last-child {
font-weight: 600;
}
&:not(:last-child) {
&:after {
content: "...";
animation: dotsClip 1s steps(1) infinite;
}
}
&:not(.xts-active) {
display: none;
}
}
}
}
.xts-wizard-import-template {
.xts-import-item {
max-width: 368px;
margin-inline: auto;
margin-block: 20px;
overflow: visible;
pointer-events: none;
opacity: 1 !important;
.xts-box-labels,
.xts-import-item-preview {
display: none !important;
}
&:after {
content: "\e900";
position: absolute;
top: -8px;
inset-inline-end: -8px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--xts-primary-color);
color: #FFF;
font-family: "xts-icon-font";
font-size: 17px;
opacity: 0;
font-weight: 400;
-webkit-font-smoothing: antialiased;
transition: all .25s ease;
}
}
.xts-import-item-image {
border-radius: var(--xts-option-border-radius);
transition: all .25s ease;
}
.xts-note,
.xts-notice {
text-align: center;
padding-inline: 15px;
}
.xts-box {
margin-top: 20px;
.xts-notice {
&.xts-success {
display: none;
}
}
}
}
.xts-setup-wizard {
&.xts-loading {
.xts-import-progress-bar,
.xts-import-progress-bar-percent {
opacity: 1;
visibility: visible;
}
.xts-import-item-image:before {
background-color: rgba(0,0,0,.3);
}
.xts-btn {
pointer-events: none;
opacity: .7;
}
}
&.xts-imported {
.xts-import-item {
box-shadow: 0 0px 20px rgba(var(--xts-primary-color-darker-10--rgb),.5);
&:after {
opacity: 1;
}
}
// .xts-import-progress-bar {
// opacity: 1;
// visibility: visible;
// }
.xts-import-item-image {
box-shadow: 0px 0px 0px 2px var(--xts-primary-color);
}
.xts-wizard-nav {
pointer-events: none;
}
.xts-notice.xts-info,
.xts-note {
display: none;
}
// .xts-import-item-image:before {
// background-color: rgba(0,0,0,.1);
// }
}
}
// ------------------------------------------
// 7. DONE
// ------------------------------------------
.xts-wizard-content-inner {
&.xts-wizard-done {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
&.xts-active {
display: block;
}
}
}
// ------------------------------------------------------------------------------------------------
// RESPONSIVE
// ------------------------------------------------------------------------------------------------
@media (max-width: 1024px) {
// .xts-wizard-nav {
// max-width: 200px;
// ul {
// padding: 45px 25px;
// }
// }
// .xts-wizard-help {
// padding-inline: 20px;
// }
.xts-wizard-builder-select {
flex-direction: column;
}
.xts-setup-wizard {
.xts-wizard-content {
.xts-plugin-heading {
flex-basis: 30%;
}
}
.xts-plugin-wrapper {
> * {
flex: 1;
}
}
.xts-plugin-name {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
.xts-plugin-version {
display: none;
}
&:has(.xts-wizard-dummy.xts-active) {
.xts-wizard-content {
padding-top: 60px;
}
}
.xts-import-search {
width: 100%;
margin-top: 10px;
input[type="text"] {
width: 100%;
max-width: 100%;
}
}
}
.xts-wizard-content {
padding-inline: 20px;
}
}
// ------------------------------------------
// 6. IMPORT
// ------------------------------------------
@media (min-width: 1550px) {
.xts-wizard-dummy {
.xts-col-xl-2 {
flex: 0 0 16.66666%;
max-width: 16.66666%;
}
}
}
@media (min-width: 1400px) {
.xts-wizard-dummy {
.xts-import-item-wrap {
&.xts-col-xl-4 {
flex: 0 0 25%;
max-width: 25%;
}
}
}
}
} |