trAvis - MANAGER
Edit File: onboarding-wizard.scss
@import 'vars'; .envira-onboarding-wizard { background: #f1f1f1; min-height: 100vh; width: 100%; box-sizing: border-box; position: relative; } .envira-onboarding-wizard-wrapper{ padding: 25px; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-direction: column; } .envira-onboarding-wizard-step-welcome{ margin: 25px; } .envira-onboarding-welcome-content{ position: relative; width: 100%; max-width: 500px; background-color: #fff; border: 1px solid #E8E8EB; box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1); padding: 50px; display: flex; justify-content: center; flex-direction: column; text-align: center; @media screen and (max-width: 768px) { padding: 30px; max-width: 100%; width: fit-content; } } .envira-onboarding-welcome-content h1{ font-size: 20px; margin: 0 0 16px 0; padding: 0; line-height: 24px; @media screen and (max-width: 768px) { font-size: 18px; line-height: 22px; } } .envira-onboarding-welcome-content p{ font-size: 16px; line-height: 1.5; margin-bottom: 20px; } a.envira-onboarding-wizard-back-btn{ text-decoration: none; color: #666; :active{ outline: none; } } a.envira-onboarding-wizard-back-btn:hover{ color: #666; } .envira-onboarding-wizard-primary-btn{ background-color: #37993B; color: #fff; border: 0; border-radius: 4px; font-size: 14px; flex-shrink: 0; line-height: 1; cursor: pointer; text-decoration: none; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; height: 40px; transition: background-color .2s ease; position: relative; overflow: hidden; min-width: 140px; :active{ outline: none; } } .envira-onboarding-wizard-primary-btn:hover{ text-decoration: none; color: #fff; } /** Styles for disabled Button **/ .envira-onboarding-wizard-primary-btn.envira-disabled, .envira-onboarding-wizard-primary-btn.envira-disabled:hover{ background-color: #CCCCCC; color: #666; cursor: not-allowed; } .envira-email-error{ color: #ff0000; font-size: 13px; height: 25px; } .envira-onboarding-wizard-primary-btn.btn-large{ margin-top: 20px; padding: 0 30px; font-size: 16px; height: 48px; } /* Styles for Progress Bar */ .envira-onboarding-progressbar { position: relative; display: flex; align-items: center; justify-content: center; counter-reset: step; margin: 30px 0 0 0; .envira-onboarding-spacer{ width: 59px; border: 1px solid #DCDDE1; margin: 0 12px; } @media screen and (max-width: 768px) { .envira-onboarding-spacer{ width: 30px; margin: 0 6px; } max-width: 100%; } } .envira-onboarding-progressbar::before, .envira-onboarding-progress { content: ""; position: absolute; top: 50%; transform: translateY(-50%); height: 4px; width: 100%; background-color: #dcdcdc; z-index: -1; } .envira-onboarding-progress { background-color: #37993B; width: 0; transition: 0.3s; z-index: -1; } .envira-onboarding-progress-step { width: 16px; height: 16px; background-color: #dcdcdc; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .envira-onboarding-progress-step::before { counter-increment: step; } .envira-onboarding-progress-step::after { position: absolute; top: calc(100% + 0.5rem); font-size: 0.85rem; color: #666; } .envira-onboarding-progress-step-active { background-color: #37993B; color: #f3f3f3; } .envira-onboarding-form-step { display: none; transform-origin: top; animation: animate 0.5s; background-color: #fff; box-shadow: 0 2px 5px #0000000d; margin: 30px auto; max-width: 850px; } .envira-onboarding-form-step-active { display: block; } .envira-onboarding-wizard-intro { display: flex; flex-direction: column; align-items: center; } .envira-onboarding-wizard-logo { max-width: 339px; } .envira-onboarding-wizard-body{ padding: 30px 60px; .steps{ color: #8c8f9a; font-size: 16px; font-weight: 600; line-height: 24px; margin-bottom: 16px; } h2{ font-size: 20px; line-height: 22px; color: #333; font-weight: 600; } @media screen and (max-width: 768px) { padding: 30px 10px; } } .envira-onboarding-wizard-footer{ border-top: 1px solid #E8E8EB; padding: 20px 40px; display: flex; align-items: center; @media screen and (max-width: 768px) { padding: 10px 20px; } } .envira-onboarding-wizard-footer>* { margin-right: 16px; } .envira-onboarding-wizard-footer>*:last-child { margin-right: 0; } .envira-onboarding-wizard-footer .spacer { flex: 1 0 auto; } .envira-onboarding-close-and-exit a{ text-decoration: none; color: #666; } .envira-onboarding-close-and-exit a:hover { color: #666; } .envira-onboarding-wizard-pages { display: flex; flex-direction: column; align-items: center; } /** Fields **/ .envira-onboarding-settings-row.no-border { border: none; margin-bottom: 0; } .envira-onboarding-settings-row.no-margin { margin-bottom: 0; } .envira-onboarding-settings-row.no-padding{ padding-bottom: 0; } .envira-onboarding-settings-row .settings-name .name.small-margin { margin-bottom: 5px; } .envira-onboarding-input-container { position: relative; width: 100%; clear:both; margin: 10px 0; } .envira-onboarding-input-container .envira-onboarding-input { width: 100%; } .envira-onboarding-settings-row { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #E8E8EB; .settings-name{ .name { font-weight: 600; font-size: 14px; line-height: 22px; display: flex; align-items: center; } } } .envira-onboarding-settings-row .settings-name .name { font-weight: 600; font-size: 14px; line-height: 22px; display: flex; align-items: center; } .envira-onboarding-description{ font-size: 14px; line-height: 22px; margin: 0; } .envira-onboarding-input .envira-options { display: flex; flex-direction: row; flex-wrap: wrap; margin: 20px 0; } .envira-onboarding-input .envira-option{ display: flex; align-items: center; margin-bottom: 10px; width: 50%; } .envira-onboarding-input .envira-option input[type="radio"], .envira-onboarding-input .envira-option input[type="checkbox"] { margin-right: 10px; } .envira-onboarding-input .envira-option input[type="radio"] + label, .envira-onboarding-input .envira-option input[type="checkbox"] + label { font-size: 14px; line-height: 22px; } .envira-onboarding-input .envira-option input[type="radio"]:checked + label, .envira-onboarding-input .envira-option input[type="checkbox"]:checked + label { font-weight: 600; } .envira-onboarding-input input[type="text"], .envira-onboarding-input input[type="email"], .envira-onboarding-input input[type="password"], .envira-onboarding-input select { width: 100%; background-color: #fff; border: 1px solid #D0D1D7; border-radius: 3px; position: relative; overflow: hidden; margin: 0; padding: 9px 12px; font-size: 14px; line-height: 22px; } .envira-onboarding-form-step .width-20 { width: 13%; flex-direction: column; align-items: self-start; padding-top: 13px; margin-bottom: 0; @media screen and (max-width: 768px) { width: 100%; margin-bottom: 10px; } } .envira-onboarding-form-step .width-80 { width: 86%; flex-direction: column; align-items: flex-start; margin-bottom: 0; @media screen and (max-width: 768px) { width: 100%; padding-top: 0; input[type="email"]{ max-width: 90%; } } } .envira-options.email_opt_in{ @media screen and (max-width: 768px) { display: block; } } .envira-toggle { cursor: pointer; display: inline-block; } .envira-switch { display: inline-block; background: #ccc; border-radius: 18px; width: 32px; height: 18px; position: relative; vertical-align: middle; transition: background 0.25s; &:before, &:after { content: ""; } &:before { display: block; background: linear-gradient(to bottom, #fff 0%,#eee 100%); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); width: 16px; height: 16px; position: absolute; top: 1px; left: 1px; transition: left 0.25s; } .envira-toggle:hover &:before { background: linear-gradient(to bottom, #fff 0%,#fff 100%); box-shadow: 0 0 0 1px rgba(0,0,0,0.5); } } input[type='checkbox']:checked + .envira-switch { background: #37993B; &:before { left: 15px; } } input#envira-tracking { position: absolute; visibility: hidden; } input[type='checkbox'] + .envira-checkbox { visibility: visible; } #general .envira-options.envira-checkbox{ @media screen and (max-width: 768px) { flex-wrap: nowrap; } } .envira-wizard-features .feature-grid{ border-bottom:1px solid #E8E8EB; padding-bottom:16px; margin-bottom:16px } .envira-wizard-features .feature-grid:last-child{ border-bottom:none; padding-bottom:0; margin-bottom:0 } .envira-wizard-features .feature-grid .settings-name{ color:#3c4043; } .envira-wizard-features .feature-grid .settings-name .name{ display:flex; align-items:center; font-weight:600 } [dir=ltr] .envira-wizard-features .feature-grid .settings-name .name .envira-pro-badge{ margin-left:12px } [dir=rtl] .envira-wizard-features .feature-grid .settings-name .name .envira-pro-badge{ margin-right:12px } .envira-wizard-features .feature-grid .settings-name .name+.envira-description-text{ margin-top:8px } .envira-wizard-features .feature-grid .settings-name .envira-description-text{ max-width:650px; color:#434960 } .envira-wizard-features .feature-grid .settings-name .envira-installs-text{ font-style:italic; margin-top:5px; font-size:12px; color:#434960 } .envira-wizard-features .plugins{ font-style:italic; max-width:650px; margin:16px auto 0; font-size:12px; text-align:center; color:#8c8f9a; line-height:1.5 } .envira-wizard-features .go-back a{ color:#434960; font-size:14px } .envira-checkbox{ display:inline-flex; align-items:center } .envira-checkbox.disabled,.envira-checkbox.no-clicks,.envira-checkbox.disabled .form-checkbox .fancy-checkbox,.envira-checkbox.no-clicks .form-checkbox .fancy-checkbox{ cursor:default } .envira-checkbox .form-checkbox-wrapper{ display:flex } [dir=ltr] .envira-checkbox .form-checkbox-wrapper{ margin-right:8px } [dir=rtl] .envira-checkbox .form-checkbox-wrapper{ margin-left:8px } .envira-checkbox.round .form-checkbox span{ border-radius:50% } .envira-checkbox.round .form-checkbox span:before{ border-radius:50% } .envira-checkbox.round:not(.medium) .form-checkbox{ width:24px; height:24px } .envira-checkbox.round:not(.medium) .form-checkbox .fancy-checkbox svg{ width:12px; height:12px } .envira-checkbox.round:not(.medium) .form-checkbox span:before{ height:22px; width:22px; line-height:24px } .envira-checkbox .form-checkbox{ position:relative; display:inline-block; width:16px; height:16px; color:#fff; vertical-align:bottom; text-align:center } .envira-checkbox .form-checkbox input{ display:none } .envira-checkbox.no-clicks input:checked+.fancy-checkbox.blue{ background:#005ae0; opacity: 0.4; } .envira-checkbox .form-checkbox input:checked+.fancy-checkbox.blue{ background:#005ae0 } .envira-checkbox .form-checkbox input:checked+.fancy-checkbox.green{ background:#00aa63 } .envira-checkbox .form-checkbox input:checked+.fancy-checkbox:before{ background:transparent } .envira-checkbox .form-checkbox input:disabled+.fancy-checkbox{ background:#e8e8eb!important; border:1px solid #D0D1D7; cursor:default } .envira-checkbox .form-checkbox input:disabled+.fancy-checkbox svg{ color:#8c8f9a } .envira-checkbox .form-checkbox input:not(:checked):disabled+.fancy-checkbox:before{ bottom:0; background:#e8e8eb } [dir=ltr] .envira-checkbox .form-checkbox input:not(:checked):disabled+.fancy-checkbox:before{ left:0 } [dir=rtl] .envira-checkbox .form-checkbox input:not(:checked):disabled+.fancy-checkbox:before{ right:0 } .envira-checkbox .form-checkbox .fancy-checkbox svg{ color:#fff; width:10px; height:10px } .envira-checkbox .form-checkbox span{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#d0d1d7; transition:.2s; border-radius:3px; display:flex; align-items:center; justify-content:center } .envira-checkbox .form-checkbox span:before{ position:absolute; content:""; height:14px; width:14px; bottom:1px; background-color:#fff; transition:.2s; font-size:14px; line-height:16px; border-radius:2px } [dir=ltr] .envira-checkbox .form-checkbox span:before{ left:1px } [dir=rtl] .envira-checkbox .form-checkbox span:before{ right:1px } .envira-row { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; } .envira-col.col-xs-11 { max-width: calc(91.6666666667% - 20px * .0833333333); flex-basis: calc(91.6666666667% - 20px * .0833333333) } .envira-col.col-xs-1 { max-width: calc(8.33% - 20px * .0833333333); flex-basis: calc(8.33% - 20px * .0833333333) } .envira-col.text-xs-left { text-align: left; } .envira-col.text-xs-right { text-align: right; } /* Step 4 */ .envira-wizard-license-key .license-cta-box { font-size: 14px; line-height: 22px; border-radius: 3px; background-color: rgb(55 153 59 / 12%); padding: 20px; margin: 20px 0; } .envira-wizard-license-key .license-cta-box>div:first-child { font-weight: 600; line-height: 1.4; } .envira-wizard-license-key .license-cta-box .envira-row { margin-top: 12px; } .envira-wizard-license-key .license-cta-box .envira-row .envira-col { display: flex; align-items: center; } .envira-col.col-sm-6 { max-width: calc(50% - 20px * .5); flex-basis: calc(50% - 20px * .5); @media screen and (max-width: 768px) { max-width: calc(100% - 20px * 1); flex-basis: calc(100% - 20px * 1); } } .envira-col.col-sm-8 { max-width: calc(66.6666666667% - 20px * .3333333333); flex-basis: calc(66.6666666667% - 20px * .3333333333); @media screen and (max-width: 768px) { max-width: calc(100% - 20px * 1); flex-basis: calc(100% - 20px * 1); } } .envira-col.col-sm-4 { max-width: calc(33.3333333333% - 20px * .3333333333); flex-basis: calc(33.3333333333% - 20px * .3333333333) } .envira-col.col-sm-2{ max-width: calc(16.6666666667% - 20px * .1666666667); flex-basis: calc(16.6666666667% - 20px * .1666666667); @media screen and (max-width: 768px) { max-width: calc(40% - 20px * 1); flex-basis: calc(40% - 20px * 1); float: left; margin: 10px 20px 0 0; } } .envira-col.col-sm-1{ max-width: calc(3.3333333333% - 20px * .0833333333); flex-basis: calc(3.3333333333% - 20px * .0833333333); } .envira-wizard-license-key .license-cta-box .envira-row .envira-col svg { margin-right: 10px; } .envira-wizard-license-key .license-cta-box .envira-row .envira-col svg { width: 16px; height: 16px; color: #37993B; } .envira-wizard-license-key{ min-width: 850px; @media screen and (max-width: 768px) { min-width: 100%; } } .envira-onboarding-step-5{ @media screen and (max-width: 768px) { padding: 0 20px; max-width: 90%; .envira-onboarding-wizard-footer{ flex-direction: column-reverse; align-items: center; gap: 10px; } } } .btn-transparent{ background: transparent; color: #3C434ACC; border: 1px solid #3C434ACC; border-radius: 4px; font-size: 14px; flex-shrink: 0; line-height: 1; cursor: pointer; text-decoration: none; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; height: 40px; transition: background-color .2s ease; position: relative; overflow: hidden; outline: none; :hover{ outline: none; } } .envira-wizard-success { color: #141b38; padding-bottom: 40px; } .envira-wizard-success .actions > div { display: flex; align-items: center; } .envira-wizard-success .actions > div:not(.no-border) { border-bottom: 1px solid #e8e8eb; padding-bottom: 24px; margin-bottom: 24px; } .envira-wizard-success .actions > div .icon { min-width: 24px; } [dir="ltr"] .envira-wizard-success .actions > div .icon { margin-right: 16px; } [dir="rtl"] .envira-wizard-success .actions > div .icon { margin-left: 16px; } .envira-wizard-success .actions > div .icon svg { width: 24px; height: 24px; } .envira-wizard-success .actions > div .content { font-weight: 700; font-size: 14px; color: #141b38; flex: 1; } .envira-wizard-success .actions > div .content .social-button { color: #fff; } [dir="ltr"] .envira-wizard-success .actions > div .content .social-button { margin: 10px 10px 0 0; } [dir="rtl"] .envira-wizard-success .actions > div .content .social-button { margin: 10px 0 0 10px; } .envira-wizard-success .actions > div .content .social-button svg { width: 14px; height: 14px; } [dir="ltr"] .envira-wizard-success .actions > div .content .social-button svg { margin-right: 10px; } [dir="rtl"] .envira-wizard-success .actions > div .content .social-button svg { margin-left: 10px; } .envira-wizard-success .actions > div .content .social-button.facebook { background-color: #4064ac; } .envira-wizard-success .actions > div .content .social-button.twitter { background-color: #1da1f2; } .envira-wizard-success .actions > div .content .social-button.youtube { background-color: #d63e22; } .envira-wizard-success .actions > div:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .envira-wizard-success .envira-settings-row:last-child { border-bottom: none; margin-bottom: 0; } .envira-wizard-success .envira-settings-row.feature-grid .settings-name .name { font-size: 18px; } .envira-wizard-success .envira-settings-row.feature-grid .envira-col { display: flex; align-items: center; } .envira-wizard-success .go-back a { color: #434960; font-size: 14px; } .envira-wizard-success .cta { margin: 0 20px 40px; padding: 20px; border: 1px solid #e8e8eb; text-align: center; } .envira-wizard-success .cta .content { flex-direction: column; display: flex; align-items: center; justify-content: center; } .envira-wizard-success .cta .content .cta-header { font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 24px; margin-top: 20px; } .envira-wizard-success .cta .content .cta-description { line-height: 1.4; max-width: 630px; margin-bottom: 55px; } .envira-wizard-success .cta .content .envira-alert { width: 100%; } .envira-wizard-success .cta .content .feature-list { color: #141b38; font-size: 16px; width: 100%; max-width: 600px; margin-bottom: 50px; } .envira-wizard-success .cta .content .feature-list .envira-col { display: flex; align-items: flex-start; margin: 2px 0; } .envira-wizard-success .cta .content .feature-list .envira-col svg.envira-circle-check { color: #00aa63; width: 18px; min-width: 18px; min-height: 18px; } [dir="ltr"] .envira-wizard-success .cta .content .feature-list .envira-col svg.envira-circle-check { margin-right: 10px; } [dir="rtl"] .envira-wizard-success .cta .content .feature-list .envira-col svg.envira-circle-check { margin-left: 10px; } .envira-wizard-success .cta .bonus-alert { margin: 24px auto; max-width: 650px; } #selected-add-ons .envira-col{ margin: 5px 0; } .envira-onboarding-input input[type="password"]#envira-settings-key { width: 92%; } .envira-pro-badge { height: 22px; border-radius: 3px; background: #e8e8eb; color: #666; font-size: 12px; line-height: 18px; font-weight: 600; display: inline-flex; padding: 0 4px; align-items: center; margin-left: 12px; } .tooltip-container svg.envira-circle-question-mark { width: 17px; height: 17px; color: #8c8f9a; cursor: pointer; } .tooltip-container { position: relative; display: inline-block; cursor: pointer; } .tooltip-text { visibility: hidden; width: 650px; background-color: #555; color: #fff; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -325px; /* Half of the width to keep the tooltip centered */ opacity: 0; transition: opacity 0.3s; @media screen and (max-width: 768px) { width: 250px; margin-left: -250px; } } .tooltip-container:hover .tooltip-text { visibility: visible; opacity: 1; } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; @media screen and (max-width: 768px) { margin-left: 116px; } } #license-key-message{ padding: 10px; margin: 10px 0; } .envira-error{ color: #333; background-color: #ffd2d2; border: 1px solid #e599a1; padding: 10px; margin: 10px 0; border-radius: 4px; } .envira-success{ color: #333; background-color: #d2ffd2; border: 1px solid #a1e599; padding: 10px; margin: 10px 0; border-radius: 4px; } .envira-onboarding-wizard .envira-button-dark:focus, .envira-onboarding-wizard .envira-button-dark:hover, .envira-onboarding-wizard-primary-btn:focus, .envira-onboarding-wizard-primary-btn:hover { background: #7CC048; border-color: #7CC048; color: #fff; box-shadow: none; } .spinner.envira-onboarding-spinner{ margin: 9px 10px 0; position: absolute; } .selected-plugins-names{ font-style: italic; max-width: fit-content; margin: 16px auto 0; font-size: 12px; text-align: center; color: #8c8f9a; line-height: 1.5; } .envira-onboarding-wizard-body .envira-desc{ font-style: italic; margin-top: 5px; font-size: 12px; color: #8c8f9a; }