109 lines
1.8 KiB
Sass
109 lines
1.8 KiB
Sass
@use "./base"
|
|
@use "./loading"
|
|
@use "./colors" as c
|
|
@use "./tippy"
|
|
|
|
|
|
.main
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
.center-login-container
|
|
display: flex
|
|
flex-flow: column
|
|
justify-content: center
|
|
align-items: center
|
|
width: min(100vw, 450px)
|
|
padding: max(1rem,3vw) 2rem
|
|
margin: 8px
|
|
box-shadow: 0px 2px 10px c.$darkest
|
|
background-color: c.$darker
|
|
border-radius: 5px
|
|
|
|
.login-form
|
|
align-items: center
|
|
flex: 1 1 auto
|
|
width: 100%
|
|
display: flex
|
|
justify-content: space-around
|
|
flex-flow: column
|
|
|
|
.data-input
|
|
width: 100%
|
|
|
|
.form-input-container
|
|
width: 100%
|
|
display: flex
|
|
flex-direction: column
|
|
margin: 1em 0
|
|
|
|
.form-feedback
|
|
width: 100%
|
|
margin: -0.5em 0 -0.8em
|
|
|
|
.form-error
|
|
color: red
|
|
|
|
.homeserver-question
|
|
font-size: 0.8em
|
|
|
|
.homeserver-label
|
|
display: flex
|
|
justify-content: space-between
|
|
align-items: flex-end
|
|
|
|
.homeserver-popup
|
|
p
|
|
margin: 0.2em
|
|
a
|
|
&, &:hover, &:active
|
|
color: white
|
|
text-decoration: none
|
|
&:hover
|
|
color: #f00 //Placeholder
|
|
|
|
|
|
|
|
@keyframes spin
|
|
0%
|
|
transform: rotate(0deg)
|
|
100%
|
|
transform: rotate(180deg)
|
|
|
|
.loading-icon
|
|
display: inline-block
|
|
background-color: #ccc
|
|
width: 12px
|
|
height: 12px
|
|
margin-right: 6px
|
|
animation: spin 0.7s infinite
|
|
|
|
input, button
|
|
font-family: inherit
|
|
font-size: 17px
|
|
background-color: c.$mild
|
|
color: #eee
|
|
width: 100%
|
|
border-radius: 5px
|
|
box-sizing: border-box
|
|
transition: background-color 0.15s ease-out, border-color 0.15s ease-out
|
|
padding: 4px 9px
|
|
border: 0px
|
|
|
|
input[type="text"],input[type="password"]
|
|
border: 3px solid transparent
|
|
margin: 0.4em 0px
|
|
|
|
&:hover, &:focus
|
|
border-color: c.$milder
|
|
|
|
button, input[type="submit"]
|
|
padding: 7px
|
|
|
|
&:hover
|
|
cursor: pointer
|
|
background-color: c.$milder
|
|
|
|
label
|
|
font-size: 18px
|