165 lines
2.3 KiB
Stylus

.profile
position relative
left contentPadding * -1
top contentPadding * -1
min-width 100%
padding contentPadding
box-sizing content-box
color white
text-shadow 0px 0px 1px rgba(0, 0, 0, 0.1)
transition all transitionSpeed ease
animation-name appear
animation-duration transitionSpeed
&:hover
.profile-cover
filter brightness(28%)
.profile-cover
position absolute
left 0
top 0
width 100%
height 100%
z-index -1
background-size cover
filter brightness(35%)
transition filter transitionSpeed ease
@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-image
border-radius 3px
width 320px
height 320px !important
margin contentPadding
object-fit cover
#anime-list-container
flex 1.5
.image-container
float left
width auto
.intro-container
float left
width auto
display flex
flex-flow column
align-items center
padding 1.5em
max-width 900px
.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
.appear
animation-name appear-animation
animation-duration 1s
@keyframes appear-animation
0%
opacity 0
100%
opacity 1
@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