183 lines
2.8 KiB
Stylus
183 lines
2.8 KiB
Stylus
profileBootDuration = 2s
|
|
|
|
.profile
|
|
position relative
|
|
left contentPadding * -1
|
|
top contentPadding * -1
|
|
min-width calc(100% + 3rem)
|
|
padding contentPadding * 2
|
|
|
|
color white
|
|
text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
|
|
|
|
transition all transitionSpeed ease
|
|
animation-name appear
|
|
animation-duration transitionSpeed
|
|
|
|
overflow hidden
|
|
|
|
// &:hover
|
|
// .profile-cover
|
|
// filter brightness(28%)
|
|
|
|
@keyframes appear
|
|
0%
|
|
transform rotateX(90deg)
|
|
filter opacity(0) saturate(0) blur(10px)
|
|
100%
|
|
transform rotateX(0)
|
|
filter opacity(1) saturate(1) blur(0)
|
|
|
|
.profile-cover
|
|
position absolute
|
|
left 0
|
|
top 0
|
|
width 100%
|
|
height 100%
|
|
z-index -1
|
|
background-size cover
|
|
overflow hidden
|
|
|
|
transition all transitionSpeed ease
|
|
animation cover-animation profileBootDuration
|
|
animation-fill-mode forwards
|
|
|
|
@keyframes cover-animation
|
|
0%
|
|
filter brightness(500%) blur(5px)
|
|
100%
|
|
filter brightness(35%) blur(0)
|
|
|
|
.profile-image
|
|
border-radius 3px
|
|
width 320px !important
|
|
height 320px !important
|
|
// padding contentPadding
|
|
object-fit cover
|
|
|
|
#anime-list-container
|
|
flex 1.5
|
|
|
|
// rotate-y()
|
|
// transform-origin 0% 0%
|
|
// animation rotate-y-animation profileBootDuration
|
|
// animation-fill-mode forwards
|
|
|
|
// @keyframes rotate-y-animation
|
|
// 0%
|
|
// opacity 0
|
|
// transform rotateY(90deg)
|
|
// 100%
|
|
// opacity 1
|
|
// transform rotateY(0deg)
|
|
|
|
.image-container
|
|
float left
|
|
width auto
|
|
// padding contentPadding
|
|
|
|
.intro-container
|
|
float left
|
|
width auto
|
|
display flex
|
|
flex-flow column
|
|
align-items center
|
|
padding contentPadding
|
|
padding-top 0
|
|
padding-left contentPadding * 2
|
|
max-width 900px
|
|
// rotate-y()
|
|
|
|
.user-actions
|
|
float right
|
|
display flex
|
|
flex-flow row
|
|
justify-content center
|
|
|
|
.user-action
|
|
max-width 250px
|
|
|
|
#nick
|
|
text-align left
|
|
margin-top 0
|
|
margin-bottom 0
|
|
|
|
.profile-field
|
|
margin-bottom 0.2em
|
|
|
|
.location
|
|
// ...
|
|
|
|
.role
|
|
opacity 0.6
|
|
|
|
.list-provider-username
|
|
margin-top 0
|
|
margin-bottom 0
|
|
font-size 0.9em
|
|
|
|
.main
|
|
// ...
|
|
|
|
.alternative
|
|
opacity 0.4
|
|
|
|
.report-bug-hint
|
|
//
|
|
|
|
.loading-message
|
|
margin 0 auto
|
|
text-align center
|
|
opacity 0.4
|
|
|
|
#embedded-footer
|
|
position fixed
|
|
bottom 4em
|
|
right calc(16px + 1em)
|
|
text-align right
|
|
z-index 1
|
|
font-size 0.9em
|
|
display flex
|
|
flex-flow row
|
|
|
|
.user
|
|
display inline-block
|
|
width auto
|
|
height auto
|
|
margin-right 1em
|
|
|
|
.embedded-footer-info
|
|
display flex
|
|
flex-flow column
|
|
|
|
.embedded-footer-nick
|
|
text-align left
|
|
opacity 0.5
|
|
|
|
.embedded-footer-separator
|
|
opacity 0.2
|
|
|
|
@media only screen and (max-width: 900px)
|
|
.intro-container
|
|
margin 1em 0
|
|
padding 0
|
|
width 100%
|
|
text-align center !important
|
|
|
|
#anime-list-container
|
|
.image-container
|
|
.user-actions
|
|
width 100%
|
|
|
|
#nick
|
|
.profile-field
|
|
width 100%
|
|
text-align center
|
|
|
|
@media only screen and (min-width: 900px)
|
|
#posts
|
|
margin-left 0.5em
|
|
|
|
@media only screen and (max-width: 800px)
|
|
.airing-date-prefix
|
|
display none |