mirror of
https://github.com/FranP-code/Hangman-game-with-React.git
synced 2025-10-13 00:42:32 +00:00
170 lines
2.9 KiB
SCSS
170 lines
2.9 KiB
SCSS
.info-account {
|
|
|
|
@include bodyFont();
|
|
|
|
.loading {
|
|
|
|
position: initial;
|
|
|
|
height: max-content;
|
|
|
|
height: 50vh;
|
|
}
|
|
|
|
.person {
|
|
|
|
width: 50vw;
|
|
|
|
margin-left: 15vw;
|
|
|
|
border-bottom: 1px solid rgb(202, 191, 158);
|
|
|
|
h3 {
|
|
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
.functions {
|
|
|
|
width: 50vw;
|
|
|
|
margin-left: 15vw;
|
|
margin-top: 2vh;
|
|
|
|
display: flex;
|
|
|
|
.close-session {
|
|
|
|
width: 20vw;
|
|
height: 10vh;
|
|
|
|
font-size: 15pt;
|
|
|
|
background: rgb(185, 185, 185);
|
|
|
|
transition: ease-in-out 0.4s;
|
|
|
|
border: 0;
|
|
|
|
//border: 1px solid rgb(92, 92, 92);
|
|
border-radius: 10px;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
background: rgb(255, 165, 165);
|
|
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
}
|
|
|
|
.reffer-code-container {
|
|
|
|
margin-left: 5vh;
|
|
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
|
|
}
|
|
|
|
button {
|
|
|
|
$background-color: rgb(255, 255, 255);
|
|
|
|
width: 3vw;
|
|
height: 3vw;
|
|
|
|
background-color: $background-color;
|
|
|
|
border: 0;
|
|
border: 1px solid rgb(83, 83, 83);
|
|
|
|
border-radius: 100%;
|
|
|
|
&:hover {
|
|
|
|
background-color: adjust-color($color: $background-color, $lightness: 10%, $alpha: 1.0);
|
|
border: 3px solid rgb(83, 83, 83);
|
|
background-color: rgba(0, 0, 0, 0.035);
|
|
}
|
|
|
|
&:active {
|
|
|
|
border: 4px solid rgb(83, 83, 83);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@media (max-width: 991.98px) {
|
|
|
|
.info-account {
|
|
|
|
.functions {
|
|
|
|
flex-direction: column;
|
|
|
|
.close-session {
|
|
|
|
width: 100%;
|
|
|
|
margin-bottom: 1vh;
|
|
}
|
|
|
|
.reffer-code-container {
|
|
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
|
|
.info-account {
|
|
|
|
.person {
|
|
width: auto;
|
|
margin: 0px 10vw;
|
|
margin-top: 2vh;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
align-items: flex-start;
|
|
|
|
h2, h3 {
|
|
margin: 0;
|
|
margin-bottom: 1vh;
|
|
}
|
|
}
|
|
|
|
.functions {
|
|
|
|
.reffer-code-container {
|
|
|
|
flex-direction: column;
|
|
|
|
button {
|
|
|
|
border-radius: 10px;
|
|
|
|
width: 20vw;
|
|
height: 7vw;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |