Hykilpikonna
100 lines
1.5 KiB
SCSS
100 lines
1.5 KiB
SCSS
|
|
// Parent div for login
|
|
#login
|
|
{
|
|
|
|
}
|
|
|
|
// Parent overlay
|
|
.login-overlay
|
|
{
|
|
// Credit to w3schools.com:
|
|
// https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
|
|
|
|
// Fill entire screen
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
// Stay in place
|
|
position: fixed;
|
|
|
|
// Sit on top layer
|
|
z-index: 1;
|
|
|
|
// Overlay color
|
|
background-color: rgba(0,0,0, 0.65);
|
|
|
|
// Disable horizontal scroll
|
|
overflow-x: hidden;
|
|
|
|
// Make it a table for vertical centering
|
|
display: table;
|
|
}
|
|
|
|
.login-vertical-center
|
|
{
|
|
// Vertically center
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
// The user interacting panel
|
|
.login-panel
|
|
{
|
|
// Make it smaller
|
|
width: 256px;
|
|
|
|
// Center
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
// Borders
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
// box-shadow: 0 0 20px 0 white;
|
|
border: 1px solid #DCDFE6;
|
|
|
|
// Make it white
|
|
background-color: white;
|
|
|
|
// Input bars
|
|
.el-input
|
|
{
|
|
margin: 5px 0;
|
|
}
|
|
|
|
// Button
|
|
.el-button
|
|
{
|
|
margin: 5px 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// Error
|
|
.input-error
|
|
{
|
|
.el-input__inner
|
|
{
|
|
color: #ff3a3a6b !important;
|
|
border-color: #ff3a3a6b !important;
|
|
background-color: #ffdddd3b !important;
|
|
}
|
|
|
|
.el-input__inner:focus
|
|
{
|
|
background-color: white !important;
|
|
}
|
|
}
|
|
|
|
// Fix error message
|
|
.el-form-item__error.custom
|
|
{
|
|
padding-top: 0;
|
|
position: relative;
|
|
top: auto;
|
|
float: left;
|
|
}
|