You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
3.1 KiB
Stylus
166 lines
3.1 KiB
Stylus
.login-transition
|
|
width 100%
|
|
height 100vh
|
|
position relative
|
|
|
|
.login-view
|
|
--login-width 330px
|
|
--resolution calc(2 * var(--zoom))
|
|
--half-width calc(100vw / var(--resolution))
|
|
--half-height calc(100vh / var(--resolution))
|
|
|
|
padding 12px
|
|
position absolute
|
|
border-radius 24px
|
|
background var(--glass-bg-active)
|
|
border 1px solid var(--glass-border)
|
|
backdrop-filter var(--glass-blur)
|
|
-webkit-backdrop-filter var(--glass-blur)
|
|
box-shadow var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08)
|
|
display flex
|
|
flex-direction column
|
|
transition .25s
|
|
width var(--login-width)
|
|
min-width var(--login-width)
|
|
height 230px
|
|
z-index 10
|
|
transform translate(calc(var(--half-width) - 50%), calc(100vh - 100% - 12px))
|
|
|
|
.slash
|
|
stroke-dasharray 29
|
|
stroke-dashoffset 29
|
|
transition stroke-dashoffset .3s
|
|
|
|
.hide
|
|
.slash
|
|
stroke-dashoffset 0
|
|
|
|
.login-empty-title
|
|
position absolute
|
|
bottom 20px
|
|
left 50%
|
|
transform translateX(-50%)
|
|
font-weight 200
|
|
font-size 2rem
|
|
opacity 0.7
|
|
|
|
.login-content-settings
|
|
.login-view
|
|
transform translate(calc(var(--half-width) - 50%), calc(var(--half-height) - 50%))
|
|
height calc(50vmin / var(--zoom))
|
|
width calc(80vmin / var(--zoom))
|
|
.user-choice
|
|
margin-bottom 8px
|
|
display flex
|
|
.user-avatar, svg
|
|
display block
|
|
width 60px
|
|
height 60px
|
|
margin 0
|
|
.user-name
|
|
margin 8px 12px
|
|
display flex
|
|
align-items center
|
|
|
|
.user-choice
|
|
width 100%
|
|
svg
|
|
width 50px
|
|
height 50px
|
|
|
|
.user-avatar, .user-choice svg
|
|
border-radius 50%
|
|
width 100px
|
|
height 100px
|
|
display block
|
|
transition .3s
|
|
margin 24px auto 0
|
|
background-repeat no-repeat
|
|
background-size cover
|
|
background-position center
|
|
|
|
.user-name
|
|
color white
|
|
width fit-content
|
|
font-size 1.2rem
|
|
margin 8px auto
|
|
transition .3s
|
|
text-align center
|
|
|
|
.user-input
|
|
display flex
|
|
align-items center
|
|
input
|
|
background none
|
|
padding 5px 12px
|
|
color white
|
|
margin 0 8px
|
|
border 1px var(--color-unfocus) solid
|
|
transition .15s border
|
|
border-radius 12px
|
|
line-height 25px
|
|
width 100%
|
|
&:focus
|
|
outline none
|
|
border-color var(--glass-border-active)
|
|
&::placeholder
|
|
color white
|
|
opacity .45
|
|
|
|
.user-input-login
|
|
border-radius 50%
|
|
flex-shrink 0
|
|
padding 0
|
|
background none
|
|
border none
|
|
transition .2s
|
|
|
|
.icon, .settings-button, .user-input-login, .system-icon
|
|
width 25px
|
|
min-width 25px
|
|
height 25px
|
|
cursor pointer
|
|
color var(--color-unfocus)
|
|
transition .15s
|
|
&:focus
|
|
outline none
|
|
&:hover
|
|
color white
|
|
svg
|
|
transition .15s
|
|
|
|
.icon-eye
|
|
padding 2px
|
|
margin-right 8px
|
|
|
|
.system-icon
|
|
padding 0
|
|
z-index 2
|
|
border 0
|
|
position absolute
|
|
background none
|
|
border-radius 5px
|
|
border 1px solid transparent
|
|
|
|
.system-icon
|
|
right 12px
|
|
top 12px
|
|
|
|
.user-input .password-input--error
|
|
border-color red
|
|
animation errorInput .3s linear 2
|
|
|
|
stepBounce = 5px
|
|
|
|
@keyframes errorInput
|
|
0%
|
|
transform translateX(0)
|
|
25%
|
|
transform translateX(-(stepBounce))
|
|
75%
|
|
transform translateX(stepBounce)
|
|
100%
|
|
transform translateX(0)
|
|
|
|
|