246 lines
4.4 KiB
Plaintext

const profile-image-size = 280px
.profile-head
vertical
cover-image-container
align-items center
// default-transition
// animation appear transition-speed
.profile-info
vertical
margin-top calc(content-padding * 1.5)
.profile-actions
horizontal-wrap
margin-top content-padding
:empty
display none
.profile-action
margin-bottom 0.5rem
text-shadow none !important
.profile-pro-status
margin-top calc(typography-margin * 2)
.icon
color pro-color
animation sk-pulse 1.5s infinite linear
.profile-columns
vertical
.profile-column
// border 1px solid red
// height 100px
padding content-padding-half
.profile-column-header
font-style bold
margin-bottom 1rem
.profile-section
margin-bottom 1rem
.no-data
text-align left
&.mounted
opacity 0.5 !important
.profile-section-friends
margin-bottom 1.2rem
.profile-section-activity
margin-bottom 0
.profile-favorite-anime-container
display grid
grid-template-columns repeat(auto-fill, anime-image-small-width)
grid-template-rows repeat(auto-fill, anime-image-small-height)
grid-gap 0.5rem
justify-content space-evenly
.profile-friends
display grid
grid-template-columns repeat(auto-fill, avatar-size)
grid-template-rows repeat(auto-fill, avatar-size)
grid-gap 0.5rem
margin 0 0.5rem
justify-content space-evenly
.profile-favorite-anime
// anime-mini-item
.profile-favorite-anime-image
anime-mini-item-image
.profile-favorite-characters-container
display grid
grid-template-columns repeat(auto-fill, character-image-small-width)
grid-template-rows repeat(auto-fill, character-image-small-height)
grid-gap 0.5rem
justify-content space-evenly
.profile-groups
display grid
grid-template-columns repeat(auto-fill, 70px)
grid-template-rows repeat(auto-fill, 70px)
grid-gap 0.5rem
justify-content space-evenly
.profile-introduction
a
color white
:hover
text-shadow 0 0 6px rgba(255, 255, 255, 0.2)
> 740px
.profile-head
horizontal
align-items stretch
.profile-info
align-items flex-start
margin-top 0
padding content-padding
padding-top 0
padding-bottom 0
padding-left calc(content-padding * 2)
// max-width 1200px
.profile-actions
position absolute
top 0
right 0
padding content-padding
margin-top 0
.profile-columns
display grid
grid-template-columns 27% 46% 27%
.profile-pro-status
position absolute
right 0
bottom 0
padding content-padding
margin-top 0
.profile-introduction
h1, h2, h3, h4, h5, h6
text-align left
// const profile-boot-duration = 2s
// animation 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
object-fit cover
// background-size cover
overflow hidden
// default-transition
// animation cover-animation profile-boot-duration
// animation-fill-mode forwards
filter brightness(30%) blur(0)
// animation cover-animation
// 0%
// filter brightness(500%) blur(5px)
// 100%
// filter brightness(35%) blur(0)
.profile-activities
horizontal-wrap
.activities-footer
margin-top 0
// Margin between activity boxes
const month-margin = 0.4rem
const box-size = 11px
const box-margin = 2px
.activities-month
display grid
grid-template-columns repeat(4, box-size)
grid-gap box-margin
// width calc(100% / 6 - month-margin)
margin 0 calc(month-margin / 2)
margin-bottom content-padding
.activities-week
display grid
grid-template-rows repeat(5, box-size) month-margin repeat(2, box-size)
grid-template-columns box-size
grid-gap box-margin
.box
width 100%
height 100%
border-radius 1px
background hsla(link-color-h, link-color-s, link-color-l, 0.75)
:hover
cursor pointer
background link-hover-color
[data-count="0"]
background reverse-light-color
:hover
cursor default
background reverse-light-color
.anime-studios
horizontal-wrap
justify-content center
margin-bottom typography-margin
.anime-studio
genre-tag
> 800px
.anime-studios
justify-content flex-start
margin-bottom 0
.profile-image
object-fit cover
width 100%
height 100%
.profile-image-container
flex-basis profile-image-size
flex-shrink 0
width profile-image-size
height profile-image-size
max-width profile-image-size
max-height profile-image-size
border-radius ui-element-border-radius
overflow hidden
#nick
margin-bottom 1rem
> a
color white
.no-data
width 100%
text-align center