%PDF-
%PDF-
Mini Shell
Mini Shell
@import "all_mixing/media/screen";
@import "all_mixing/font/font_family";
@import "all_mixing/color/colors";
$base: #263238;
$lite: #FFF;
$brand: #FF3D00;
$size: 48px;
body{
padding:0;
margin:0;
@include Reddit;
min-height: 100%;
margin: 0;
padding: 0;
background: url("../image/back.svg") #f0f0f0 no-repeat fixed bottom right;
}
.navbar{
background-color: #ffffff;
padding: 0 5.125em;
height: 4.25em;
border-bottom: solid 1px #d9d9d9;
vertical-align: middle;
.container-fluid{
&{
@include breakpoints(mobile) {
justify-content: center;
}
}
}
.num{
&{
@include breakpoints(mobile) {
display: none;
}
}
}
}
.home{
padding-top: 40px;
padding-bottom: 40px;
.login{
max-width:450px;
border-radius: 8px;
position: relative;
background-color: #ffffff;
height: 100%;
overflow: hidden;
padding: 48px 48px var(--o-wrapper-padding-bottom);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.14);
z-index: 99999;
padding:40px;
margin:0 auto;
position: relative;
.loading{
position: absolute;
width: 100%;
height: 100%;
left:0;
top:0;
right:0;
bottom:0;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
.loader-1 {
width : $size;
height: $size;
border: 5px solid $lite;
border-bottom-color: $brand;
border-radius: 50%;
display: inline-block;
animation: rotation 1s linear infinite;
}
}
h4{
font-weight: 400;
margin-bottom:30px;
}
p{
margin-bottom:20px;
}
.cliclack{
a{
display: flex;
align-items: center;
text-decoration:none;
color: #333;
font-weight:400;
font-size: 14px;
.span{
height: 8px;
width: 8px;
border-radius: 100%;
margin: auto;
box-sizing: border-box;
background-color: $orange;
display: flex;
}
.circle{
width:20px;
height:20px;
border-radius:100%;
border: 1px solid #a8a8a8;
border-radius: 100%;
box-shadow: 0 0.125em 0.125em 0 #d9d9d9;
margin-right:7px;
line-height: 20px;
display: flex;
}
}
}
form{
.err{
display: none;
}
label{
font-weight: 300;
margin-bottom: 3px;
color: #000;
}
input{
border-radius: 0.25em;
padding: 0.5em 0.75em;
width: 100%;
height: 2.5em;
box-shadow: 0 0.125em 0.125em 0 #d9d9d9 inset;
box-sizing: border-box;
position: relative;
font-size: 1em;
line-height: 1.375em;
background-color: #fff;
border: 0.0625em solid #a8a8a8;
color: #333;
&:focus{
box-shadow: 0 0 0.125em 0.125em #9fcaea, 0 0.125em 0.125em 0 #d9d9d9 inset;
border-color: #559bd1;
z-index: 1;
outline: 1px solid transparent;
}
}
.all{
border-radius: 0.25em;
width: 100%;
height: 2.5em;
box-shadow: 0 0.125em 0.125em 0 #d9d9d9 inset;
box-sizing: border-box;
position: relative;
font-size: 1em;
line-height: 1.375em;
background-color: #fff;
border: 0.0625em solid #a8a8a8;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
input{
width: 33.33%;
border: none;
box-shadow: none;
height: 1.5rem;
&.bb{
border-left: 1px solid #A8A8A8;
}
&.one{
border-radius: 0.25em 0px 0px 0.25em;
}
&.two{
border-radius: 0em 0.25px 0.25px 0em;
}
&:focus{
box-shadow: 0 0 0.125em 0.125em #9fcaea, 0 0.125em 0.125em 0 #d9d9d9 inset;
border-color: #559bd1;
z-index: 1;
outline: 1px solid transparent;
height: 2.4rem;
border: 1px solid #559bd1;
transition: 0s;
}
}
}
.btn{
font-size: 1.1875em;
line-height: 1.474em;
border-radius: 0.5em;
transition: 0.1s ;
background-color: $orange;
color: white;
width: 100%;
margin-top: 30px;
font-weight: 600;
border:2px solid $orange;
&:hover{
background-color: white;
color: $orange;
}
}
.malal{
margin-top: 20px;
a{
color: black;
font-weight: 300;
font-size: 16px;
text-decoration: none;
display: flex;
align-items: center;
&:hover{
text-decoration: underline;
}
img{
margin-right: 2px;
}
}
}
}
}
}
Zerion Mini Shell 1.0