Minecraft-Modern-Theme/css/login-style.css aktualisiert
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
/* Minecraft Modern Theme Login Styles */
|
/* Minecraft Modern Theme Login & Registrierungs-Styles */
|
||||||
body.login {
|
body.login, body.login-action-register {
|
||||||
background-color: #14151a; /* Fallback-Farbe */
|
background-color: #14151a; /* Fallback-Farbe */
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
@@ -8,7 +8,7 @@ body.login {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Dunkler Overlay für bessere Lesbarkeit */
|
/* Dunkler Overlay für bessere Lesbarkeit */
|
||||||
body.login::before {
|
body.login::before, body.login-action-register::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -20,18 +20,18 @@ body.login::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Logo zentrieren */
|
/* Logo zentrieren */
|
||||||
.login h1 {
|
body.login h1, body.login-action-register h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 50px; /* ANGEPASST: Mehr Abstand für das größere Logo */
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
.login h1 a {
|
body.login h1 a, body.login-action-register h1 a {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 160px; /* ANGEPASST: Logo ist jetzt doppelt so groß */
|
height: 160px;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Haupt-Container, der alles umschließt */
|
/* Haupt-Container, der alles umschließt */
|
||||||
#login {
|
body.login #login, body.login-action-register #login {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -40,51 +40,49 @@ body.login::before {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* NEU: Der Wrapper, der vom Skript erstellt wird. Dies ist unsere "Tabelle". */
|
/* Der Wrapper, der vom Skript erstellt wird. */
|
||||||
#login-content-wrapper {
|
body.login #login-content-wrapper, body.login-action-register #login-content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch; /* Sorgt dafür, dass beide Spalten die gleiche Höhe haben */
|
align-items: stretch;
|
||||||
background-color: #252830;
|
background-color: #252830;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||||
overflow: hidden; /* Sorgt für abgerundete Ecken an den Kind-Elementen */
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Linke Spalte: Minecraft Avatar Slider (27.8%) */
|
/* Linke Spalte: Minecraft Avatar Slider (27.8%) */
|
||||||
#minecraft-avatar-slider {
|
body.login #minecraft-avatar-slider, body.login-action-register #minecraft-avatar-slider {
|
||||||
flex: 0 0 27.8%; /* Feste Breite, wächst nicht, schrumpft nicht */
|
flex: 0 0 27.8%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
padding-top: 50px; /* ANGEPASST: Erzeugt den Raum, in den die Avatare verschoben werden */
|
padding-top: 50px;
|
||||||
background-color: #1a1c23; /* Leicht anderer Hintergrund für Kontrast */
|
background-color: #1a1c23;
|
||||||
height: auto; /* Höhe anpassen, damit sie nicht fest ist */
|
height: auto;
|
||||||
position: relative; /* Wichtig für den Slider */
|
position: relative;
|
||||||
overflow: hidden; /* Verhindert, dass Bilder überstehen */
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#minecraft-avatar-slider .avatar-slide {
|
body.login #minecraft-avatar-slider .avatar-slide, body.login-action-register #minecraft-avatar-slider .avatar-slide {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto; /* Seitenverhältnis beibehalten */
|
height: auto;
|
||||||
max-height: 400px; /* Maximale Höhe des Avatars, damit er nicht zu groß wird */
|
max-height: 400px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
/* Slider-spezifische Stile */
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 25px; /* KORRIGIERT: Verschiebt alle Avatare um 50px nach unten */
|
top: 25px;
|
||||||
left: 0;
|
left: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.7s ease-in-out;
|
transition: opacity 0.7s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
#minecraft-avatar-slider .avatar-slide-active {
|
body.login #minecraft-avatar-slider .avatar-slide-active, body.login-action-register #minecraft-avatar-slider .avatar-slide-active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Rechte Spalte: Login-Formular (72.2%) */
|
/* Rechte Spalte: Login/Registrierungs-Formular (72.2%) */
|
||||||
#loginform {
|
body.login #loginform, body.login-action-register #registerform, body.login #loginform, body.login-action-register #registerform {
|
||||||
flex: 1; /* Nimmt den restlichen verfügbaren Platz ein */
|
flex: 1;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -92,19 +90,16 @@ body.login::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Formular-Felder */
|
/* Formular-Felder */
|
||||||
#loginform p {
|
body.login #loginform p, body.login-action-register #registerform p,
|
||||||
|
body.login #loginform label, body.login-action-register #registerform label {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
|
||||||
|
|
||||||
#loginform label {
|
|
||||||
color: #e4e4e4;
|
color: #e4e4e4;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loginform input[type="text"],
|
body.login #loginform input[type="text"], body.login #loginform input[type="password"], body.login-action-register #registerform input[type="text"], body.login-action-register #registerform input[type="password"], body.login #loginform input[type="email"], body.login-action-register #registerform input[type="email"] {
|
||||||
#loginform input[type="password"] {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
background-color: #1e2029;
|
background-color: #1e2029;
|
||||||
@@ -116,50 +111,102 @@ body.login::before {
|
|||||||
transition: border-color 0.3s, box-shadow 0.3s;
|
transition: border-color 0.3s, box-shadow 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loginform input[type="text"]:focus,
|
body.login #loginform input[type="text"]:focus, body.login #loginform input[type="password"]:focus, body.login-action-register #registerform input[type="text"]:focus, body.login-action-register #registerform input[type="password"]:focus, body.login-action-register #registerform input[type="email"]:focus {
|
||||||
#loginform input[type="password"]:focus {
|
|
||||||
border-color: #00d4ff;
|
border-color: #00d4ff;
|
||||||
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
|
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Container für "Angemeldet bleiben" und "Passwort vergessen" */
|
/* "Angemeldet bleiben" Checkbox (nur Login) */
|
||||||
.login-options-container {
|
body.login .forgetmenot label, body.login .forgetmenot input[type="checkbox"] {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #a0a0a0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
body.login .forgetmenot input[type="checkbox"] {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NEU: Stile für die Registrierungsseite */
|
||||||
|
.auth-title {
|
||||||
|
text-align: center;
|
||||||
|
color: #e4e4e4;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.auth-subtitle {
|
||||||
|
text-align: center;
|
||||||
|
color: #a0a0a0;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.login-form-link {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.login-form-link p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.login-form-link a {
|
||||||
|
color: #00d4ff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.login-form-link a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.logged-in-message {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
background-color: #252830;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.logged-in-message h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #00d4ff;
|
||||||
|
}
|
||||||
|
.logged-in-message .button {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10px;
|
||||||
|
padding: 12px 25px;
|
||||||
|
background-color: #00d4ff;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
.logged-in-message .button:hover {
|
||||||
|
background-color: #00a8cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container für "Angemeldet bleiben" und "Passwort vergessen" (nur Login) */
|
||||||
|
body.login .login-options-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-options-container .forgetmenot,
|
body.login .login-options-container .forgetmenot,
|
||||||
.login-options-container #nav {
|
body.login .login-options-container #nav {
|
||||||
margin: 0; /* Entfernt Standard-Abstände */
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forgetmenot label {
|
body.login .login-options-container #nav a {
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #a0a0a0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.forgetmenot input[type="checkbox"] {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-options-container #nav a {
|
|
||||||
color: #a0a0a0;
|
color: #a0a0a0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
}
|
}
|
||||||
.login-options-container #nav a:hover {
|
body.login .login-options-container #nav a:hover {
|
||||||
color: #00d4ff;
|
color: #00d4ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Submit-Button */
|
/* Submit-Button (gilt für Login & Registrierung) */
|
||||||
#loginform .submit input[type="submit"] {
|
body.login #loginform .submit input[type="submit"], body.login-action-register #registerform .submit input[type="submit"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
background-color: #00d4ff;
|
background-color: #00d4ff;
|
||||||
@@ -172,30 +219,30 @@ body.login::before {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
#loginform .submit input[type="submit"]:hover {
|
body.login #loginform .submit input[type="submit"]:hover, body.login-action-register #registerform .submit input[type="submit"]:hover {
|
||||||
background-color: #00a8cc;
|
background-color: #00a8cc;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Anpassungen für kleinere Bildschirme */
|
/* Anpassungen für kleinere Bildschirme */
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
#login-content-wrapper {
|
body.login #login-content-wrapper, body.login-action-register #login-content-wrapper {
|
||||||
flex-direction: column; /* Spalten untereinander */
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
#minecraft-avatar-slider {
|
body.login #minecraft-avatar-slider, body.login-action-register #minecraft-avatar-slider {
|
||||||
flex: none; /* Setzt Flexbox zurück */
|
flex: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 30px; /* Padding wird zurückgesetzt */
|
padding: 30px;
|
||||||
padding-top: 30px; /* Padding oben auch auf mobilen Geräten anpassen */
|
padding-top: 30px;
|
||||||
}
|
}
|
||||||
#minecraft-avatar-slider .avatar-slide {
|
body.login #minecraft-avatar-slider .avatar-slide, body.login-action-register #minecraft-avatar-slider .avatar-slide {
|
||||||
max-height: 300px; /* Auf mobilen Geräten etwas kleiner */
|
max-height: 300px;
|
||||||
max-width: 200px; /* Und auch schmaler */
|
max-width: 200px;
|
||||||
top: 30px; /* WICHTIG: Auch hier den top-Wert anpassen! */
|
top: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fehlermeldungen und Hinweise */
|
/* Fehlermeldungen und Hinweise */
|
||||||
.login .message, .login #login_error {
|
body.login .message, body.login #login_error, body.login-action-register .message, body.login-action-register #login_error {
|
||||||
background-color: rgba(0, 212, 255, 0.1);
|
background-color: rgba(0, 212, 255, 0.1);
|
||||||
border-left: 4px solid #00d4ff;
|
border-left: 4px solid #00d4ff;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
@@ -205,25 +252,25 @@ body.login::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* =========================================================================
|
/* =========================================================================
|
||||||
=== NEU: STIL FÜR DIE LINKS UNTER DEM ANMELDE-BUTTON ====================
|
=== STIL FÜR DIE LINKS UNTER DEM ANMELDE-BUTTON ====================
|
||||||
========================================================================= */
|
========================================================================= */
|
||||||
|
|
||||||
.post-login-links {
|
body.login .post-login-links, body.login-action-register .post-login-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between; /* Verteilt die Links auf die ganze Breite */
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
border-top: 1px solid #333; /* Trennlinie über den Links */
|
border-top: 1px solid #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-login-links a {
|
body.login .post-login-links a, body.login-action-register .post-login-links a {
|
||||||
color: #a0a0a0;
|
color: #a0a0a0;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
transition: color 0.2s ease;
|
transition: color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-login-links a:hover {
|
body.login .post-login-links a:hover, body.login-action-register .post-login-links a:hover {
|
||||||
color: #00d4ff;
|
color: #00d4ff;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user