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 { &__message {
flex-grow: 1; flex-grow: 1;
margin: 60px 0 0 200px; margin: 60px 48px 0 200px;
font-family: $font-secondary; font-family: $font-secondary;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
color: $text-primary-color; color: $text-primary-color;
@media (max-width: $phone-max-width) {
margin: 60px 48px;
}
} }
&__players-list { &__players-list {
width: 200px; width: 200px;
margin: 16px 16px 0 0; margin: 16px 16px 0 0;
@media (max-width: $phone-width) {
display: none;
}
} }
} }
</style> </style>

View File

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