2020-06-04 03:03:54 +02:00
|
|
|
#profileImageContainer {
|
|
|
|
background: var(--base-bg);
|
|
|
|
backdrop-filter: blur(var(--blur-strength));
|
|
|
|
|
|
|
|
height: 138px;
|
|
|
|
width: 138px;
|
|
|
|
border-radius: 50%;
|
|
|
|
pointer-events: initial;
|
|
|
|
|
|
|
|
margin: 0 auto;
|
2020-06-06 05:13:45 +02:00
|
|
|
margin-bottom: 110px;
|
2020-06-04 03:03:54 +02:00
|
|
|
position: relative;
|
|
|
|
|
|
|
|
flex-flow: column wrap;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
#profileImage {
|
|
|
|
background-image: url('../assets/user.png') ;
|
|
|
|
height: 128px;
|
|
|
|
width: 128px;
|
|
|
|
border-radius: 50%;
|
|
|
|
background-size: cover;
|
|
|
|
|
|
|
|
flex-flow: column wrap;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
2020-06-04 03:13:56 +02:00
|
|
|
|
|
|
|
.rotateProfileAnim {
|
|
|
|
animation: rotate var(--transition-speed) 1;
|
|
|
|
animation-iteration-count: 1;
|
|
|
|
animation-play-state: paused;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotate {
|
|
|
|
from { -webkit-transform: rotate(0deg) }
|
|
|
|
to { -webkit-transform: rotate(360deg) }
|
|
|
|
}
|