css: adapt TopBar and Lobby to smartphone

This commit is contained in:
Settel 2022-10-09 23:02:31 +02:00
parent 118dc897ce
commit 75f476c55f
2 changed files with 29 additions and 1 deletions

View File

@ -29,16 +29,24 @@ const { $t } = useI18n({
&__message {
flex-grow: 1;
margin: 60px 0 0 200px;
margin: 60px 48px 0 200px;
font-family: $font-secondary;
font-size: 24px;
text-align: center;
color: $text-primary-color;
@media (max-width: $phone-max-width) {
margin: 60px 48px;
}
}
&__players-list {
width: 200px;
margin: 16px 16px 0 0;
@media (max-width: $phone-width) {
display: none;
}
}
}
</style>

View File

@ -76,6 +76,12 @@ const actionLogout = async () => {
padding: 0 16px;
text-align: center;
color: $text-primary-color;
}
&__username {
@media (max-width: $phone-width) {
display: none;
}
}
&__actionbar {
@ -86,6 +92,12 @@ const actionLogout = async () => {
color: $text-primary-color;
font-size: 24px;
text-align: center;
@media (max-width: $phone-width) {
margin-left: 24px;
text-align: left;
font-size: 20px;
}
}
}
@ -94,6 +106,10 @@ const actionLogout = async () => {
height: calc(64px - 2 * 16px);
margin: 16px 0;
background-color: $topbar-separator-color;
@media (max-width: $phone-width) {
display: none;
}
}
&__logout-button {
@ -104,6 +120,10 @@ const actionLogout = async () => {
&:hover {
color: $text-primary-hover-color;
}
@media (max-width: $phone-width) {
padding-right: 0;
}
}
}
</style>