2018-04-02 14:07:52 +00:00
|
|
|
const profile-image-size = 280px
|
|
|
|
|
2018-11-15 11:19:40 +00:00
|
|
|
.profile-head
|
2017-07-21 06:09:22 +00:00
|
|
|
vertical
|
2018-11-22 07:52:29 +00:00
|
|
|
cover-image-container
|
2017-07-21 06:09:22 +00:00
|
|
|
align-items center
|
2017-06-20 18:30:55 +00:00
|
|
|
// default-transition
|
|
|
|
// animation appear transition-speed
|
2016-11-28 16:06:00 +00:00
|
|
|
|
2018-10-31 00:33:56 +00:00
|
|
|
.profile-info
|
2017-07-21 06:09:22 +00:00
|
|
|
vertical
|
|
|
|
margin-top calc(content-padding * 1.5)
|
|
|
|
|
|
|
|
.profile-actions
|
2018-10-31 00:33:56 +00:00
|
|
|
horizontal-wrap
|
2017-07-21 08:10:48 +00:00
|
|
|
margin-top content-padding
|
|
|
|
|
|
|
|
:empty
|
|
|
|
display none
|
|
|
|
|
|
|
|
.profile-action
|
|
|
|
margin-bottom 0.5rem
|
|
|
|
text-shadow none !important
|
2017-07-21 06:09:22 +00:00
|
|
|
|
2018-11-15 11:19:40 +00:00
|
|
|
.profile-columns
|
|
|
|
vertical
|
|
|
|
|
|
|
|
.profile-column
|
|
|
|
// border 1px solid red
|
|
|
|
// height 100px
|
2018-11-21 07:43:41 +00:00
|
|
|
padding content-padding-half
|
2018-11-15 11:19:40 +00:00
|
|
|
|
|
|
|
.profile-column-header
|
|
|
|
font-style bold
|
|
|
|
margin-bottom 1rem
|
|
|
|
|
|
|
|
.profile-section
|
|
|
|
margin-bottom 1rem
|
|
|
|
|
2018-11-15 11:53:24 +00:00
|
|
|
.no-data
|
|
|
|
text-align left
|
|
|
|
|
|
|
|
&.mounted
|
|
|
|
opacity 0.5 !important
|
|
|
|
|
2018-11-16 19:57:58 +00:00
|
|
|
.profile-section-friends
|
|
|
|
margin-bottom 1.2rem
|
|
|
|
|
|
|
|
.profile-section-activity
|
|
|
|
margin-bottom 0
|
|
|
|
|
2018-11-15 11:19:40 +00:00
|
|
|
.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
|
2018-11-15 11:53:24 +00:00
|
|
|
anime-mini-item-image
|
2018-11-15 11:19:40 +00:00
|
|
|
|
|
|
|
.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
|
|
|
|
|
2019-06-19 09:57:22 +00:00
|
|
|
.profile-groups
|
|
|
|
display grid
|
2019-06-23 22:52:06 +00:00
|
|
|
grid-template-columns repeat(auto-fill, character-image-small-width)
|
|
|
|
grid-template-rows repeat(auto-fill, character-image-small-height)
|
2019-06-19 09:57:22 +00:00
|
|
|
grid-gap 0.5rem
|
|
|
|
justify-content space-evenly
|
|
|
|
|
2019-06-23 22:52:06 +00:00
|
|
|
.profile-group
|
|
|
|
.group-image
|
|
|
|
width character-image-small-width
|
|
|
|
height character-image-small-height
|
|
|
|
|
2018-11-22 01:48:48 +00:00
|
|
|
.profile-introduction
|
|
|
|
a
|
|
|
|
color white
|
|
|
|
|
|
|
|
:hover
|
|
|
|
text-shadow 0 0 6px rgba(255, 255, 255, 0.2)
|
|
|
|
|
2017-07-21 06:09:22 +00:00
|
|
|
> 740px
|
2018-11-15 11:19:40 +00:00
|
|
|
.profile-head
|
2017-07-21 06:09:22 +00:00
|
|
|
horizontal
|
2018-10-31 00:33:56 +00:00
|
|
|
align-items stretch
|
2017-11-21 17:16:13 +00:00
|
|
|
|
2018-10-31 00:33:56 +00:00
|
|
|
.profile-info
|
2017-07-21 06:09:22 +00:00
|
|
|
align-items flex-start
|
|
|
|
margin-top 0
|
|
|
|
padding content-padding
|
|
|
|
padding-top 0
|
2017-11-21 17:16:13 +00:00
|
|
|
padding-bottom 0
|
2017-07-21 06:09:22 +00:00
|
|
|
padding-left calc(content-padding * 2)
|
2018-11-14 12:16:29 +00:00
|
|
|
// max-width 1200px
|
2017-07-21 06:09:22 +00:00
|
|
|
|
|
|
|
.profile-actions
|
|
|
|
position absolute
|
|
|
|
top 0
|
|
|
|
right 0
|
|
|
|
padding content-padding
|
2017-07-21 08:10:48 +00:00
|
|
|
margin-top 0
|
2017-11-21 17:16:13 +00:00
|
|
|
|
2018-11-15 11:19:40 +00:00
|
|
|
.profile-columns
|
|
|
|
display grid
|
|
|
|
grid-template-columns 27% 46% 27%
|
|
|
|
|
2019-05-12 04:03:16 +00:00
|
|
|
.profile-introduction
|
|
|
|
h1, h2, h3, h4, h5, h6
|
|
|
|
text-align left
|
|
|
|
|
2018-03-18 18:09:58 +00:00
|
|
|
// const profile-boot-duration = 2s
|
2017-06-20 18:30:55 +00:00
|
|
|
// animation appear
|
|
|
|
// 0%
|
|
|
|
// transform rotateX(90deg)
|
|
|
|
// filter opacity(0) saturate(0) blur(10px)
|
|
|
|
// 100%
|
|
|
|
// transform rotateX(0)
|
|
|
|
// filter opacity(1) saturate(1) blur(0)
|
2016-11-28 16:06:00 +00:00
|
|
|
|
|
|
|
.profile-cover
|
|
|
|
position absolute
|
|
|
|
left 0
|
|
|
|
top 0
|
|
|
|
width 100%
|
|
|
|
height 100%
|
|
|
|
z-index -1
|
2017-06-06 14:59:04 +00:00
|
|
|
object-fit cover
|
|
|
|
// background-size cover
|
2016-11-28 16:06:00 +00:00
|
|
|
overflow hidden
|
2017-11-21 17:16:13 +00:00
|
|
|
|
2017-06-20 18:30:55 +00:00
|
|
|
// default-transition
|
|
|
|
// animation cover-animation profile-boot-duration
|
|
|
|
// animation-fill-mode forwards
|
2017-06-26 18:58:51 +00:00
|
|
|
filter brightness(30%) blur(0)
|
2017-06-20 18:30:55 +00:00
|
|
|
|
|
|
|
// animation cover-animation
|
|
|
|
// 0%
|
|
|
|
// filter brightness(500%) blur(5px)
|
|
|
|
// 100%
|
|
|
|
// filter brightness(35%) blur(0)
|
2016-11-28 16:06:00 +00:00
|
|
|
|
2018-11-16 16:54:53 +00:00
|
|
|
.profile-activities
|
2018-11-16 17:36:34 +00:00
|
|
|
horizontal-wrap
|
2018-11-16 16:54:53 +00:00
|
|
|
|
2018-11-25 06:53:52 +00:00
|
|
|
.activities-footer
|
|
|
|
margin-top 0
|
|
|
|
|
2018-11-16 17:36:34 +00:00
|
|
|
// Margin between activity boxes
|
2018-11-16 16:54:53 +00:00
|
|
|
const month-margin = 0.4rem
|
2018-11-25 06:53:52 +00:00
|
|
|
const box-size = 11px
|
|
|
|
const box-margin = 2px
|
2018-11-16 16:54:53 +00:00
|
|
|
|
|
|
|
.activities-month
|
2018-11-25 06:53:52 +00:00
|
|
|
display grid
|
|
|
|
grid-template-columns repeat(4, box-size)
|
|
|
|
grid-gap box-margin
|
|
|
|
// width calc(100% / 6 - month-margin)
|
2018-11-16 16:54:53 +00:00
|
|
|
margin 0 calc(month-margin / 2)
|
2018-11-16 17:36:34 +00:00
|
|
|
margin-bottom content-padding
|
2018-11-16 16:54:53 +00:00
|
|
|
|
|
|
|
.activities-week
|
2018-11-25 06:53:52 +00:00
|
|
|
display grid
|
|
|
|
grid-template-rows repeat(5, box-size) month-margin repeat(2, box-size)
|
|
|
|
grid-template-columns box-size
|
|
|
|
grid-gap box-margin
|
2018-11-16 16:54:53 +00:00
|
|
|
|
|
|
|
.box
|
2018-11-25 06:53:52 +00:00
|
|
|
width 100%
|
|
|
|
height 100%
|
2018-11-16 16:54:53 +00:00
|
|
|
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
|
|
|
|
|
2018-11-25 06:53:52 +00:00
|
|
|
.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
|
2018-11-16 16:54:53 +00:00
|
|
|
|
2016-11-28 16:06:00 +00:00
|
|
|
.profile-image
|
|
|
|
object-fit cover
|
2017-06-08 12:46:38 +00:00
|
|
|
width 100%
|
2018-03-10 15:42:39 +00:00
|
|
|
height 100%
|
2016-11-28 16:06:00 +00:00
|
|
|
|
2017-07-17 17:49:52 +00:00
|
|
|
.profile-image-container
|
2018-11-14 12:16:29 +00:00
|
|
|
flex-basis profile-image-size
|
|
|
|
flex-shrink 0
|
2018-04-02 14:07:52 +00:00
|
|
|
width profile-image-size
|
|
|
|
height profile-image-size
|
|
|
|
max-width profile-image-size
|
|
|
|
max-height profile-image-size
|
2018-03-27 19:08:26 +00:00
|
|
|
border-radius ui-element-border-radius
|
2017-06-11 09:13:59 +00:00
|
|
|
overflow hidden
|
2016-11-28 16:06:00 +00:00
|
|
|
|
2017-06-10 00:35:07 +00:00
|
|
|
#nick
|
|
|
|
margin-bottom 1rem
|
|
|
|
|
2019-03-11 00:37:05 +00:00
|
|
|
> a
|
|
|
|
color white
|
|
|
|
|
2017-07-03 15:33:57 +00:00
|
|
|
.no-data
|
2017-07-09 02:22:14 +00:00
|
|
|
width 100%
|
2019-11-19 07:12:52 +00:00
|
|
|
text-align center
|