Files
Hangman-game-with-React/public/sass/control-panel/_account-preview.scss

88 lines
1.3 KiB
SCSS

.account-preview {
@include titleFont();
position: absolute;
left: 88%;
top: 1vh;
padding: 2vh 0px;
display: flex;
flex-direction: column;
align-items: center;
.initials {
height: 8vh;
width: 8vh;
color: #fff;
background-color: rgb(81, 81, 255);
font-size: 3vh;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
&.inclusive {
font-size: 11pt;
}
}
.full-name {
//height: 5vh;
width: 5vw;
margin-top: 0.5vh;
background-color: rgba(0, 0, 0, 0.658);
color: #fff;
display: flex;
justify-content: center;
opacity: 0%;
transition: 0.4s ease-in-out;
text-align: center;
padding: 0px 2vw;
padding-bottom: 1vh;
border-radius: 10px;
user-select: none;
&.show {
opacity: 100%;
transition: 0.4s ease-in-out;
}
}
}
@media (max-width: 991.98px) {
.account-preview {
left: 80%;
.full-name {
&.show {
opacity: 0%;
}
}
}
}