FileMaster

Edit File: onboarding.css

:root{
--baseColor: #141b38;
}

:root *{
box-sizing:border-box;
}

html, body {
height:100%;
padding: 0;
margin :0;
}

body{
background-color: #fff;
background-image:  radial-gradient(#5b5b5b66 0.5px, #fff 0.5px);
background-size: 20px 20px;
background-position: 0 0,10px 10px;
font-family: Verdana, sans-serif;
}

#siteseo-onboarding-root{
display:flex;
height:100%;
}

#siteseo-onboarding-root .siteseo-onboarding-nav-wrapper{
box-sizing:border-box;
width:23%;
height: 100%;
padding: 10px;
}

#siteseo-onboarding-root nav{
display:flex;
flex-direction:column;
justify-content:space-between;
background-color:var(--baseColor);
height:100%;
width:100%;
border-radius: 10px;
padding: 20px;
}

#siteseo-onboarding-root nav .header{
display:flex;
justify-content:space-between;
align-items:center;
}

#siteseo-onboarding-root nav .footer{
text-align:center;
color:#c0c0c0;
font-size:0.9rem;
}

.siteseo-onboarding-nav-wrapper nav .steps{
margin-top: 2em;
}

.siteseo-onboarding-nav-wrapper nav .step {
position:relative;
display:flex;
padding: 20px 0;
color:white;
}

.step-milestone::after{	
content: attr(data-step);
border: 2px solid rgba(220, 220, 222, 0.4);
border-radius: 100%;
width: 24px;
height: 24px;
position: relative;
background: #141b38;
line-height: 24px;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
z-index: 2;
}

.step-info{
display: flex;
flex-direction: column;
gap:2px;
align-items: flex-start;
}

.step-info .description{
color: #c0c0c0;
font-size:0.8rem;
}

.step.active:not(:last-child)::after{
background: rgb(255, 255, 255);
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(20, 27, 56, 1) 100%);
}

.step.done:not(:last-child)::after{
background: rgb(255, 255, 255);	
}

.step.done > .step-milestone::after{
content: "\f15e";
font-family: "dashicons";
color: #fff;
background: var(--baseColor);
border: 2px solid white;
}

.step:not(:last-child)::after{
content: '';
position: absolute;
height: 80px;
width: 2px;
background: #7575755e;
z-index: 0;
left: 13px;
top: 35px;
}

main{
display:flex;
width:70%;
overflow:auto;
}

main {
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: transparent transparent; /* For Firefox */
}

.siteseo-onboarding-content{
width:80%;
margin: auto;
padding: 60px;
height: 100%;
}

.siteseo-step-is-welcome{
align-items:center;
margin-top:20%;
text-align:center;
}

.siteseo-step-page{
display:none;
}

.siteseo-step-active{
display:flex;
flex-direction:column;
}

.siteseo-btn{
display: inline-flex;
padding: 0.5rem 1rem;
gap: 0.5rem;
justify-content: center;
align-items: center;
border-radius: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
white-space: nowrap;
cursor:pointer;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
border:none;
text-decoration:none;
}

.siteseo-btn:disabled{
pointer-events: none;
}

.siteseo-btn.primary{
background-color:var(--baseColor);
color:white;
}

.siteseo-btn.secondary{
border: 1px solid var(--baseColor);
color:var(--baseColor);
background-color:transparent;
}

.siteseo-radio-input{
display:flex;
gap:10px;
width:100%;
}

.siteseo-radio-input label{
padding:8px 10px;
border:2px solid #3d5afe;
border-radius:7px;
font-weight:500;
cursor:pointer;
}

.siteseo-radio-input label:hover{
box-shadow: 0 0 0 0.1rem rgba(61, 90, 254, 0.4);
}

.siteseo-radio-input input{
display:none;
}

.siteseo-radio-input input:checked + label{
box-shadow: 0 0 0 0.20rem rgba(61, 90, 254, 0.4);
}

.siteseo-onboarding-import-info{
display:none;
flex-direction:column;
gap:20px;
margin-top:10px;
align-content:flex-start;
}

.siteseo-onboarding-import-info summary{
cursor:pointer;
user-select:none;
}

.siteseo-onboarding-import-info button{
align-self:flex-start;
}

.siteseo-onboarding-msg{
display:none;
font-weight:400;
font-size:14px;
margin:0;
}

.siteseo-onboarding-msg-success{
color:green;
}

.siteseo-onboarding-msg-error{
color:red;
}

.siteseo-onboarding-content-footer{
display:flex;
justify-content:flex-end;
gap: 10px;
margin-top:2.5rem;
padding: 20px 0;
border-top:1px solid #ededed;
}

.siteseo-input-block{
display:flex;
flex-direction:column;
gap:8px;
margin-top:32px;
}

.siteseo-input-block label{
font-weight:500;
font-size: .875rem;
line-height:1;
}

.siteseo-input-block input[type="text"],
.siteseo-input-block select,
.siteseo-input-block textarea{
display: flex; 
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
border:1px solid hsl(240 5.9% 90%);
width: 100%;
font-size: 1rem;
line-height: 1.5rem;
height:2.25rem;
background-color: transparent;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.siteseo-input-block input[type="radio"]{
display:inline;
}

.siteseo-input-block textarea{
height:unset;
}

.siteseo-input-block input[type="text"]:focus-visible,
.siteseo-input-block select:focus-visible,
.siteseo-input-block textarea:focus-visible{
box-shadow: 0 0 1px 1px hsl(240 5% 64.9%);
outline: 2px transparent;
}

.siteseo-input-block p.siteseo-input-description{
margin:0;
font-size:0.8rem;
color:#71717a;
}

#siteseo-onboarding-img-holder{
background:transparent;
outline:none;
border:2px dashed #ededed;
border-radius:6px;
width: 400px;
height:12rem;
cursor:pointer;
}

#siteseo-onboarding-img-holder img{
width:100%;
height:auto;
max-height:100%;
}

.siteseo-radiogroup{
display:flex;
flex-direction:column;
gap:8px;
}

.siteseo-radiogroup label{
font-weight:400;
font-size: .875rem;
}

.siteseo-spinner{
display:none;
border-radius:50%;
animation: siteseo-spinner 1s linear infinite;
height: 0.9375rem;
width: 0.9375rem;
border: 2px solid #dddcdc80;
border-left-color: #e3e3e3;
}

.siteseo-spinner-active{
display:inline-block;
}

@keyframes siteseo-spinner{
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}	
}

Back