You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

91 lines
1.5 KiB
Sass

@import '../../../styles/mixins.sass'
@import '../../../styles/vars.sass'
#profile-page
position: fixed
width: 100%
height: calc(100% - 56px)
overflow: scroll
overflow-x: hidden
#profile
padding: 2em
max-width: 1200px
margin: 0 auto
#profile-card-container
margin: 0 auto
width: 100%
max-width: 690px
.icon-box
text-align: right
width: 100%
.request-button
margin-top: 0.5em
margin-bottom: 0.5em
margin-left: auto
#toolbar
margin-top: 32px
.mat-toolbar-row
max-height: 40px
.info-box
font-size: 14px
margin-left: calc(100px + 0.5em)
.info
margin-right: 1em
font-size: 14px
#username
margin: 0 0.5em
#handle
font-size: 14px
#icon
display: none
position: absolute
z-index: 11
color: white
$mat-card-header-size: 100px !default
.user-profile-picture
cursor: pointer
z-index: 11
.hover-box
text-align: center
display: flex
justify-content: center
align-items: center
&:hover
.profile-picture
filter: brightness(70%)
#icon
display: block
filter: none
// Makes `<img>` tags behave like `background-size: cover`. Not supported
// in IE, but we're using it as a progressive enhancement.
.profile-picture
height: $mat-card-header-size
width: $mat-card-header-size
border-radius: 50%
flex-shrink: 0
background-size: cover
transition-duration: 0.5s
z-index: 10
object-fit: cover
#postlist
margin: 0.5em auto
padding: 0
max-width: 690px