2018-04-02 16:07:52 +02:00
|
|
|
const profile-image-size = 280px
|
|
|
|
|
|
2016-11-29 01:06:00 +09:00
|
|
|
.profile
|
2017-07-21 08:09:22 +02:00
|
|
|
vertical
|
|
|
|
|
align-items center
|
2016-11-29 01:06:00 +09:00
|
|
|
|
|
|
|
|
position relative
|
|
|
|
|
left calc(content-padding * -1)
|
2016-12-03 00:23:05 +09:00
|
|
|
top calc(content-padding-top * -1)
|
2016-11-29 01:06:00 +09:00
|
|
|
min-width calc(100% + content-padding * 2)
|
|
|
|
|
padding calc(content-padding * 2)
|
|
|
|
|
|
|
|
|
|
color white
|
|
|
|
|
text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
|
|
|
|
|
|
2017-06-20 20:30:55 +02:00
|
|
|
// default-transition
|
|
|
|
|
// animation appear transition-speed
|
2016-11-29 01:06:00 +09:00
|
|
|
|
|
|
|
|
overflow hidden
|
|
|
|
|
|
2017-06-08 14:46:38 +02:00
|
|
|
.profile-field
|
2017-07-21 08:09:22 +02:00
|
|
|
text-align center
|
2017-06-08 14:46:38 +02:00
|
|
|
|
2017-07-02 16:24:26 +02:00
|
|
|
a
|
|
|
|
|
color white
|
|
|
|
|
|
2017-07-21 08:09:22 +02:00
|
|
|
.intro-container
|
|
|
|
|
vertical
|
|
|
|
|
align-items center
|
|
|
|
|
margin-top calc(content-padding * 1.5)
|
|
|
|
|
|
|
|
|
|
.profile-actions
|
2017-07-21 10:10:48 +02:00
|
|
|
vertical
|
|
|
|
|
margin-top content-padding
|
|
|
|
|
|
|
|
|
|
:empty
|
|
|
|
|
display none
|
|
|
|
|
|
|
|
|
|
.profile-action
|
|
|
|
|
margin-bottom 0.5rem
|
|
|
|
|
text-shadow none !important
|
2017-07-21 08:09:22 +02:00
|
|
|
|
2017-10-07 10:01:55 +02:00
|
|
|
.profile-pro-status
|
|
|
|
|
margin-top calc(typography-margin * 2)
|
|
|
|
|
|
|
|
|
|
.icon
|
|
|
|
|
color pro-color
|
|
|
|
|
animation sk-pulse 1.5s infinite linear
|
|
|
|
|
|
2017-07-21 08:09:22 +02:00
|
|
|
> 740px
|
2017-06-08 14:46:38 +02:00
|
|
|
.profile
|
2017-07-21 08:09:22 +02:00
|
|
|
horizontal
|
|
|
|
|
align-items flex-start
|
2017-11-21 18:16:13 +01:00
|
|
|
|
2017-07-19 17:16:53 +02:00
|
|
|
.profile-field
|
2017-07-21 08:09:22 +02:00
|
|
|
text-align left
|
2017-06-08 14:46:38 +02:00
|
|
|
|
|
|
|
|
.intro-container
|
2017-07-21 08:09:22 +02:00
|
|
|
align-items flex-start
|
|
|
|
|
margin-top 0
|
|
|
|
|
padding content-padding
|
|
|
|
|
padding-top 0
|
2017-11-21 18:16:13 +01:00
|
|
|
padding-bottom 0
|
2017-07-21 08:09:22 +02:00
|
|
|
padding-left calc(content-padding * 2)
|
|
|
|
|
max-width 900px
|
|
|
|
|
|
|
|
|
|
.profile-actions
|
|
|
|
|
position absolute
|
|
|
|
|
top 0
|
|
|
|
|
right 0
|
|
|
|
|
padding content-padding
|
2017-07-21 10:10:48 +02:00
|
|
|
margin-top 0
|
2017-11-21 18:16:13 +01:00
|
|
|
|
2017-10-07 10:01:55 +02:00
|
|
|
.profile-pro-status
|
|
|
|
|
position absolute
|
|
|
|
|
right 0
|
|
|
|
|
bottom 0
|
|
|
|
|
padding content-padding
|
|
|
|
|
margin-top 0
|
2017-11-21 18:16:13 +01:00
|
|
|
|
2018-03-18 19:09:58 +01:00
|
|
|
// const profile-boot-duration = 2s
|
2017-06-20 20:30:55 +02: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-29 01:06:00 +09:00
|
|
|
|
|
|
|
|
.profile-cover
|
|
|
|
|
position absolute
|
|
|
|
|
left 0
|
|
|
|
|
top 0
|
|
|
|
|
width 100%
|
|
|
|
|
height 100%
|
|
|
|
|
z-index -1
|
2017-06-06 16:59:04 +02:00
|
|
|
object-fit cover
|
|
|
|
|
// background-size cover
|
2016-11-29 01:06:00 +09:00
|
|
|
overflow hidden
|
2017-11-21 18:16:13 +01:00
|
|
|
|
2017-06-20 20:30:55 +02:00
|
|
|
// default-transition
|
|
|
|
|
// animation cover-animation profile-boot-duration
|
|
|
|
|
// animation-fill-mode forwards
|
2017-06-26 20:58:51 +02:00
|
|
|
filter brightness(30%) blur(0)
|
2017-06-20 20:30:55 +02:00
|
|
|
|
|
|
|
|
// animation cover-animation
|
|
|
|
|
// 0%
|
|
|
|
|
// filter brightness(500%) blur(5px)
|
|
|
|
|
// 100%
|
|
|
|
|
// filter brightness(35%) blur(0)
|
2016-11-29 01:06:00 +09:00
|
|
|
|
|
|
|
|
.profile-image
|
|
|
|
|
object-fit cover
|
2017-06-08 14:46:38 +02:00
|
|
|
width 100%
|
2018-03-10 16:42:39 +01:00
|
|
|
height 100%
|
2016-11-29 01:06:00 +09:00
|
|
|
|
2017-07-17 19:49:52 +02:00
|
|
|
.profile-image-container
|
2017-06-08 14:46:38 +02:00
|
|
|
flex 1
|
2018-04-02 16:07:52 +02:00
|
|
|
width profile-image-size
|
|
|
|
|
height profile-image-size
|
|
|
|
|
max-width profile-image-size
|
|
|
|
|
max-height profile-image-size
|
2018-03-27 21:08:26 +02:00
|
|
|
border-radius ui-element-border-radius
|
2017-06-11 11:13:59 +02:00
|
|
|
overflow hidden
|
2016-11-29 01:06:00 +09:00
|
|
|
|
2017-06-10 02:35:07 +02:00
|
|
|
#nick
|
|
|
|
|
margin-bottom 1rem
|
|
|
|
|
|
2017-07-03 17:33:57 +02:00
|
|
|
.no-data
|
2017-07-09 04:22:14 +02:00
|
|
|
width 100%
|
2017-10-07 10:01:55 +02:00
|
|
|
text-align center
|
