166 lines
4.0 KiB
CSS
166 lines
4.0 KiB
CSS
/* ================================================
|
||
login.css – Login-Seite & Register-Seite
|
||
Dynasty of Knights
|
||
================================================ */
|
||
|
||
/* ── Base ──────────────────────────────────────── */
|
||
* {
|
||
box-sizing: border-box;
|
||
font-family: "Tangerine", serif;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
background: url("/images/background_login.png") center / cover no-repeat fixed;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* ── Nebel ─────────────────────────────────────── */
|
||
.fog {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 40%;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes fogmove {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
|
||
/* ── Login Panel ───────────────────────────────── */
|
||
.launcher {
|
||
width: 380px;
|
||
padding: 30px;
|
||
position: relative;
|
||
z-index: 2;
|
||
font-family: "Tangerine", serif;
|
||
font-size: 16px;
|
||
background: rgba(10, 15, 20, 0.75);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 10px;
|
||
border: 1px solid rgba(100, 170, 255, 0.4);
|
||
box-shadow:
|
||
0 0 40px rgba(0, 0, 0, 0.8),
|
||
0 0 20px rgba(70, 120, 255, 0.5);
|
||
}
|
||
|
||
/* ── Register Box ──────────────────────────────── */
|
||
.register-box {
|
||
width: 380px;
|
||
padding: 30px;
|
||
background: rgba(10, 15, 20, 0.8);
|
||
border-radius: 10px;
|
||
border: 1px solid rgba(100, 170, 255, 0.4);
|
||
box-shadow:
|
||
0 0 40px rgba(0, 0, 0, 0.8),
|
||
0 0 20px rgba(70, 120, 255, 0.5);
|
||
}
|
||
|
||
/* ── Charakter Box ─────────────────────────────── */
|
||
.box {
|
||
background: rgba(0, 0, 0, 0.7);
|
||
padding: 40px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
width: 400px;
|
||
}
|
||
|
||
/* ── Inputs / Selects / Buttons ────────────────── */
|
||
input,
|
||
select,
|
||
button,
|
||
.register,
|
||
.server-status {
|
||
width: 100%;
|
||
padding: 13px;
|
||
font-size: 24px;
|
||
margin-bottom: 15px;
|
||
font-family: "Tangerine", serif;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
border-radius: 6px;
|
||
color: white;
|
||
}
|
||
|
||
/* ── Login Button ──────────────────────────────── */
|
||
.login {
|
||
width: 100%;
|
||
padding: 14px;
|
||
font-size: 32px;
|
||
background: linear-gradient(45deg, #3da2ff, #7dd3ff);
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: 0.25s;
|
||
}
|
||
|
||
.login:hover {
|
||
transform: scale(1.05);
|
||
box-shadow:
|
||
0 0 20px #4aa3ff,
|
||
0 0 40px #4aa3ff;
|
||
}
|
||
|
||
/* ── Register Link ─────────────────────────────── */
|
||
.register {
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
color: #ccc;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.register:hover {
|
||
color: white;
|
||
}
|
||
|
||
/* ── Zurück Link ───────────────────────────────── */
|
||
.back {
|
||
display: block;
|
||
text-align: center;
|
||
color: #ccc;
|
||
margin-top: 10px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.back:hover {
|
||
color: white;
|
||
}
|
||
|
||
/* ── Server Status Box ─────────────────────────── */
|
||
.server-status {
|
||
margin-top: 18px;
|
||
font-size: 24px;
|
||
padding: 10px;
|
||
background: rgba(0, 0, 0, 0.45);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.online { color: #3cff5a; }
|
||
.offline { color: #ff4b4b; }
|
||
|
||
/* ── Fehler-Meldung ────────────────────────────── */
|
||
.error {
|
||
color: red;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
/* ── Charakter-Seite: Input/Button ─────────────── */
|
||
.box input,
|
||
.box button {
|
||
width: 100%;
|
||
padding: 14px;
|
||
margin-top: 10px;
|
||
border-radius: 6px;
|
||
border: none;
|
||
box-sizing: border-box;
|
||
}
|