104 lines
2.6 KiB
CSS
104 lines
2.6 KiB
CSS
@import url('./src/css/variables.css');
|
|
@import url('./src/css/layout.css');
|
|
@import url('./src/css/auth.css');
|
|
@import url('./src/css/lobby.css');
|
|
@import url('./src/css/onboarding.css');
|
|
|
|
@media (max-width: 600px) {
|
|
/* --- 1. Login/Registrierungs-Formular skalieren --- */
|
|
#register-form {
|
|
transform: translate(-50%, -50%) scale(0.7);
|
|
}
|
|
|
|
/* --- 2. Top-Bar in der Lobby optimieren --- */
|
|
#top-bar {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.top-bar-left .lobby-logo {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#user-info {
|
|
gap: 10px;
|
|
}
|
|
|
|
#lobby-username {
|
|
font-size: 14px;
|
|
max-width: 80px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#btn-logout {
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* --- 3. Footer aufräumen --- */
|
|
#game-footer {
|
|
flex-direction: column;
|
|
height: auto;
|
|
padding: 10px 0;
|
|
gap: 8px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.footer-left, .footer-center, .footer-right {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
#discord-link {
|
|
left: 125px;
|
|
top: 520px;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 1050px) and (min-width: 601px) {
|
|
#register-form {
|
|
/* Wir schieben das HTML-Formular aus der exakten Mitte um 80px nach unten.
|
|
So hat das Logo (das in PixiJS darüber liegt) genug Luft zum Atmen. */
|
|
top: calc(50% + 80px);
|
|
}
|
|
}
|
|
|
|
@media (max-height: 500px) {
|
|
/* --- Formular noch kleiner machen, damit es vertikal passt --- */
|
|
#register-form {
|
|
/* scale(0.5) macht das Formular klein genug für Handys im Querformat */
|
|
transform: translate(-50%, -50%) scale(0.4);
|
|
top: 50%;
|
|
}
|
|
|
|
/* --- Discord-Button wie im normalen Handy-Modus nach unten klappen --- */
|
|
#discord-link {
|
|
left: -420px;
|
|
top: 350px;
|
|
}
|
|
|
|
/* --- Footer extrem flach machen --- */
|
|
/* Im Querformat haben wir in der Breite Platz, aber in der Höhe nicht.
|
|
Daher ordnen wir den Text wieder als Reihe (row) an. */
|
|
#game-footer {
|
|
flex-direction: row;
|
|
height: 30px;
|
|
padding: 0 20px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.footer-left, .footer-center, .footer-right {
|
|
text-align: center;
|
|
width: 33%;
|
|
font-size: 10px; /* Schrift minimal verkleinern */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px) and (orientation: portrait) {
|
|
#sector-list-container {
|
|
/* Erzwingt 2 Spalten auf dem Handy */
|
|
grid-template-columns: repeat(2, 270px) !important;
|
|
justify-content: center !important;
|
|
}
|
|
} |