445 lines
16 KiB
CSS
445 lines
16 KiB
CSS
/* ===== ADMINER – gleicher Look wie style.css ===== */
|
||
|
||
/* ── RESET & BASE ─────────────────────────────── */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--bg: #0f0f13;
|
||
--surface: #1a1a24;
|
||
--surface-hover: #22222f;
|
||
--border: rgba(255,255,255,0.07);
|
||
--text: #e8e8f0;
|
||
--text-muted: #8888a8;
|
||
--radius: 16px;
|
||
--transition: 0.25s ease;
|
||
--accent: #6366f1;
|
||
--wrap-max: 900px;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; overflow-x: hidden; }
|
||
|
||
body {
|
||
background-color: var(--bg);
|
||
color: var(--text);
|
||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 2rem 1rem 4rem;
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* ── BACKGROUND ───────────────────────────────── */
|
||
@keyframes bgShift {
|
||
0% { opacity:1; transform:scale(1) translate(0,0); }
|
||
33% { opacity:.85; transform:scale(1.15) translate(2%,3%); }
|
||
66% { opacity:.9; transform:scale(1.08) translate(-3%,-2%); }
|
||
100% { opacity:1; transform:scale(1) translate(0,0); }
|
||
}
|
||
|
||
.background-blur {
|
||
position:fixed; inset:-25%; z-index:-1; pointer-events:none;
|
||
background:
|
||
radial-gradient(ellipse 60% 40% at 20% 10%, rgba(99,102,241,.18), transparent),
|
||
radial-gradient(ellipse 50% 40% at 80% 80%, rgba(14,165,233,.13), transparent),
|
||
radial-gradient(ellipse 40% 30% at 60% 40%, rgba(168,85,247,.08), transparent);
|
||
animation: bgShift 12s ease-in-out infinite;
|
||
}
|
||
|
||
#particle-canvas {
|
||
position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
|
||
}
|
||
|
||
/* ── ORBS ─────────────────────────────────────── */
|
||
.orb {
|
||
position:fixed; border-radius:50%; pointer-events:none; z-index:-1;
|
||
filter:blur(70px); opacity:0;
|
||
animation:orbFloat var(--dur,18s) ease-in-out infinite var(--delay,0s);
|
||
}
|
||
.orb-1 { width:320px;height:320px; background:radial-gradient(circle,rgba(99,102,241,.25),transparent 70%); top:-80px;left:-80px; --dur:20s;--delay:0s; }
|
||
.orb-2 { width:260px;height:260px; background:radial-gradient(circle,rgba(14,165,233,.2), transparent 70%); bottom:5%;right:-60px; --dur:17s;--delay:-6s; }
|
||
.orb-3 { width:200px;height:200px; background:radial-gradient(circle,rgba(168,85,247,.18),transparent 70%); top:45%;left:-40px; --dur:23s;--delay:-11s;}
|
||
.orb-4 { width:180px;height:180px; background:radial-gradient(circle,rgba(236,72,153,.15), transparent 70%); top:20%;right:-30px; --dur:19s;--delay:-4s; }
|
||
@keyframes orbFloat {
|
||
0% {opacity:0; transform:translate(0,0) scale(1); }
|
||
10% {opacity:1;}
|
||
50% {opacity:1; transform:translate(20px,25px) scale(1.08); }
|
||
90% {opacity:1;}
|
||
100%{opacity:0; transform:translate(0,0) scale(1); }
|
||
}
|
||
|
||
/* Grid lines */
|
||
body::before {
|
||
content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
|
||
background-image:
|
||
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
|
||
background-size:60px 60px;
|
||
mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
|
||
-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
|
||
}
|
||
|
||
/* ── LAYOUT ───────────────────────────────────── */
|
||
.wrap {
|
||
width: 100%;
|
||
max-width: var(--wrap-max);
|
||
}
|
||
|
||
/* Full width nur für die Tabellen-Ansicht */
|
||
.wrap.wrap--wide {
|
||
max-width: 1400px;
|
||
}
|
||
|
||
.wrap.wrap--full {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* ── ANIMATIONS ───────────────────────────────── */
|
||
@keyframes fadeDown {
|
||
from { opacity:0; transform:translateY(-20px); }
|
||
to { opacity:1; transform:translateY(0); }
|
||
}
|
||
@keyframes fadeUp {
|
||
from { opacity:0; transform:translateY(24px); }
|
||
to { opacity:1; transform:translateY(0); }
|
||
}
|
||
@keyframes shimmerText {
|
||
from { background-position:0% center; }
|
||
to { background-position:200% center; }
|
||
}
|
||
|
||
/* ── HEADER ───────────────────────────────────── */
|
||
.admin-header {
|
||
text-align:center;
|
||
margin-bottom: 2.5rem;
|
||
margin-top: 1.5rem;
|
||
animation: fadeDown .7s ease both;
|
||
}
|
||
|
||
@keyframes avatarPulse {
|
||
0%,100% { box-shadow:0 0 0 4px rgba(99,102,241,.2),0 0 20px rgba(99,102,241,.1); }
|
||
50% { box-shadow:0 0 0 8px rgba(99,102,241,.12),0 0 40px rgba(99,102,241,.2); }
|
||
}
|
||
|
||
.admin-avatar {
|
||
width:72px; height:72px; border-radius:50%;
|
||
background:linear-gradient(135deg,#6366f1,#0ea5e9);
|
||
display:flex; align-items:center; justify-content:center;
|
||
font-size:1.6rem; font-weight:700;
|
||
margin:0 auto 1rem;
|
||
animation:avatarPulse 3s ease-in-out infinite;
|
||
transition:transform .3s ease;
|
||
cursor:default; user-select:none;
|
||
}
|
||
.admin-avatar:hover { transform:scale(1.08) rotate(6deg); }
|
||
|
||
.admin-title {
|
||
font-size: clamp(1.5rem,3.5vw,2.2rem);
|
||
font-weight:700;
|
||
background:linear-gradient(90deg,#e8e8f0 0%,#6366f1 40%,#0ea5e9 60%,#e8e8f0 100%);
|
||
background-size:200% auto;
|
||
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
|
||
letter-spacing:-.5px;
|
||
animation:shimmerText 5s linear infinite;
|
||
}
|
||
|
||
.admin-subtitle {
|
||
color:var(--text-muted);
|
||
margin-top:.4rem;
|
||
font-size:.95rem;
|
||
animation: fadeDown .9s ease .3s both;
|
||
}
|
||
|
||
/* ── PILL / TAG ───────────────────────────────── */
|
||
.pill {
|
||
display:inline-block;
|
||
font-size:.72rem; font-weight:600;
|
||
text-transform:uppercase; letter-spacing:1px;
|
||
color:var(--text-muted);
|
||
background:rgba(255,255,255,.06);
|
||
border:1px solid var(--border);
|
||
padding:3px 10px; border-radius:999px;
|
||
vertical-align:middle; margin-left:8px;
|
||
}
|
||
|
||
/* ── CARD ─────────────────────────────────────── */
|
||
.card {
|
||
background:var(--surface);
|
||
border:1px solid var(--border);
|
||
border-radius:var(--radius);
|
||
padding:1.4rem 1.6rem;
|
||
position:relative;
|
||
overflow:hidden;
|
||
animation: fadeUp .5s ease both;
|
||
}
|
||
.card::before {
|
||
content:''; position:absolute; inset:0; border-radius:var(--radius);
|
||
opacity:0; transition:opacity var(--transition);
|
||
background:linear-gradient(135deg,rgba(99,102,241,.07),transparent 60%);
|
||
pointer-events:none;
|
||
}
|
||
.card:hover::before { opacity:1; }
|
||
|
||
/* ── GRID LAYOUT ──────────────────────────────── */
|
||
.admin-grid {
|
||
display:grid;
|
||
grid-template-columns:240px 1fr;
|
||
gap:16px;
|
||
align-items:start;
|
||
}
|
||
@media(max-width:700px){ .admin-grid{ grid-template-columns:1fr; } }
|
||
|
||
/* ── TYPOGRAPHY ───────────────────────────────── */
|
||
h2 {
|
||
font-size:1rem; font-weight:700;
|
||
color:var(--text-muted);
|
||
text-transform:uppercase; letter-spacing:1.2px;
|
||
margin-bottom:.75rem;
|
||
padding-bottom:.5rem;
|
||
border-bottom:1px solid var(--border);
|
||
}
|
||
h3 {
|
||
font-size:.95rem; font-weight:600; color:var(--text-muted);
|
||
text-transform:uppercase; letter-spacing:1px;
|
||
margin-bottom:.6rem;
|
||
}
|
||
a { color:#93c5fd; text-decoration:none; }
|
||
a:hover { text-decoration:underline; }
|
||
.muted { color:var(--text-muted); font-size:.88rem; }
|
||
code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85em;
|
||
background:rgba(255,255,255,.06); border:1px solid var(--border); padding:1px 5px; border-radius:5px; }
|
||
|
||
hr { border:0; border-top:1px solid var(--border); margin:1.2rem 0; }
|
||
|
||
/* ── FORM ─────────────────────────────────────── */
|
||
label {
|
||
display:block;
|
||
font-size:.82rem; font-weight:600; color:var(--text-muted);
|
||
text-transform:uppercase; letter-spacing:.8px;
|
||
margin-bottom:.35rem;
|
||
}
|
||
input, textarea, select {
|
||
width:100%; padding:10px 14px;
|
||
border-radius:12px;
|
||
background:rgba(255,255,255,.04);
|
||
border:1px solid var(--border);
|
||
color:var(--text);
|
||
font-family:inherit; font-size:.95rem;
|
||
outline:none;
|
||
transition:border-color var(--transition), box-shadow var(--transition);
|
||
}
|
||
input:focus, textarea:focus, select:focus {
|
||
border-color:rgba(99,102,241,.7);
|
||
box-shadow:0 0 0 3px rgba(99,102,241,.15);
|
||
}
|
||
textarea { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; resize:vertical; }
|
||
|
||
/* ── SELECT DROPDOWN ──────────────────────────── */
|
||
select {
|
||
appearance:none;
|
||
-webkit-appearance:none;
|
||
padding-right:2.6rem;
|
||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238888a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||
background-repeat:no-repeat;
|
||
background-position:right 12px center;
|
||
background-size:16px 16px;
|
||
cursor:pointer;
|
||
}
|
||
select:focus {
|
||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||
}
|
||
select option {
|
||
background:var(--surface);
|
||
color:var(--text);
|
||
padding:8px 12px;
|
||
}
|
||
select option:checked {
|
||
background:rgba(99,102,241,.25);
|
||
color:#a5b4fc;
|
||
}
|
||
|
||
/* ── NUMBER INPUT (Port) ──────────────────────── */
|
||
input[type=number] {
|
||
appearance:textfield;
|
||
-moz-appearance:textfield;
|
||
}
|
||
input[type=number]::-webkit-inner-spin-button,
|
||
input[type=number]::-webkit-outer-spin-button {
|
||
-webkit-appearance:none;
|
||
appearance:none;
|
||
margin:0;
|
||
}
|
||
.field-port {
|
||
position:relative;
|
||
}
|
||
.field-port input[type=number] {
|
||
padding-right:2.8rem;
|
||
}
|
||
.field-port__spinners {
|
||
position:absolute;
|
||
right:8px; top:50%; transform:translateY(-50%);
|
||
display:flex; flex-direction:column; gap:2px;
|
||
}
|
||
.field-port__spinners button {
|
||
width:22px; height:22px;
|
||
display:flex; align-items:center; justify-content:center;
|
||
background:rgba(255,255,255,.07);
|
||
border:1px solid var(--border);
|
||
border-radius:6px;
|
||
color:var(--text-muted);
|
||
cursor:pointer; font-size:.7rem; line-height:1;
|
||
padding:0;
|
||
transition:background var(--transition), color var(--transition), border-color var(--transition);
|
||
}
|
||
.field-port__spinners button:hover {
|
||
background:rgba(99,102,241,.2);
|
||
border-color:rgba(99,102,241,.4);
|
||
color:#a5b4fc;
|
||
}
|
||
|
||
.field { margin-bottom:1rem; }
|
||
|
||
/* ── BUTTONS ──────────────────────────────────── */
|
||
.btn {
|
||
display:inline-flex; align-items:center; justify-content:center; gap:6px;
|
||
padding:10px 18px; border-radius:var(--radius);
|
||
border:1px solid rgba(255,255,255,.12);
|
||
cursor:pointer; font-size:.9rem; font-weight:600; letter-spacing:.2px;
|
||
background:linear-gradient(135deg,rgba(99,102,241,.9),rgba(14,165,233,.65));
|
||
color:#fff;
|
||
text-decoration:none;
|
||
transition:transform var(--transition), filter var(--transition), box-shadow var(--transition);
|
||
box-shadow:0 4px 18px rgba(99,102,241,.25);
|
||
white-space:nowrap;
|
||
}
|
||
.btn:hover { filter:brightness(1.1); transform:translateY(-1px); text-decoration:none; }
|
||
.btn:active { transform:translateY(1px); }
|
||
|
||
.btn-sm { padding:7px 12px; font-size:.82rem; border-radius:10px; }
|
||
|
||
.btn-ghost {
|
||
background:rgba(255,255,255,.06);
|
||
border:1px solid var(--border);
|
||
box-shadow:none;
|
||
}
|
||
.btn-ghost:hover { background:rgba(255,255,255,.1); filter:none; }
|
||
|
||
/* ── TABS ─────────────────────────────────────── */
|
||
.tabs { display:flex; gap:6px; margin-bottom:1.4rem; }
|
||
.tab {
|
||
padding:8px 18px; border-radius:10px; font-size:.88rem; font-weight:600;
|
||
border:1px solid var(--border);
|
||
background:rgba(255,255,255,.04); color:var(--text-muted);
|
||
text-decoration:none; transition:background var(--transition), color var(--transition), border-color var(--transition);
|
||
cursor:pointer;
|
||
}
|
||
.tab:hover { background:rgba(255,255,255,.08); color:var(--text); text-decoration:none; }
|
||
.tab.active {
|
||
background:rgba(99,102,241,.18); border-color:rgba(99,102,241,.4);
|
||
color:#a5b4fc;
|
||
}
|
||
|
||
/* ── NOTICE / ALERTS ──────────────────────────── */
|
||
.notice {
|
||
padding:10px 14px; border-radius:12px; font-size:.88rem;
|
||
border:1px solid var(--border); margin-bottom:1rem;
|
||
}
|
||
.notice-ok { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.25); color:#86efac; }
|
||
.notice-err { background:rgba(239,68,68,.09); border-color:rgba(239,68,68,.25); color:#fca5a5; }
|
||
|
||
/* ── NAV LIST (Tabellenliste) ─────────────────── */
|
||
.nav-list { list-style:none; }
|
||
.nav-list li { margin:3px 0; }
|
||
.nav-list a {
|
||
display:block; padding:8px 12px; border-radius:12px;
|
||
color:var(--text-muted); font-size:.88rem;
|
||
border:1px solid transparent;
|
||
transition:background var(--transition), color var(--transition), border-color var(--transition);
|
||
}
|
||
.nav-list a:hover { background:var(--surface-hover); color:var(--text); text-decoration:none; }
|
||
.nav-list a.active {
|
||
background:rgba(99,102,241,.12);
|
||
border-color:rgba(99,102,241,.25);
|
||
color:#a5b4fc;
|
||
}
|
||
|
||
/* ── TABLE ────────────────────────────────────── */
|
||
.table-scroll {
|
||
width:100%;
|
||
max-width:100%;
|
||
overflow-x:auto;
|
||
overflow-y:hidden;
|
||
-webkit-overflow-scrolling:touch;
|
||
border-radius:12px;
|
||
}
|
||
|
||
/* dezente Scrollbar (Chromium/Edge) */
|
||
.table-scroll::-webkit-scrollbar { height:10px; }
|
||
.table-scroll::-webkit-scrollbar-track { background:rgba(255,255,255,.03); border-radius:999px; }
|
||
.table-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:999px; }
|
||
.table-scroll::-webkit-scrollbar-thumb:hover { background:rgba(99,102,241,.25); }
|
||
|
||
.db-table {
|
||
width:100%;
|
||
min-width:max-content;
|
||
border-collapse:collapse;
|
||
font-size:.85rem;
|
||
overflow:hidden;
|
||
}
|
||
.db-table thead th {
|
||
padding:9px 10px; text-align:left;
|
||
font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
|
||
color:var(--text-muted);
|
||
background:rgba(255,255,255,.03);
|
||
border-bottom:1px solid var(--border);
|
||
}
|
||
.db-table tbody td {
|
||
padding:9px 10px;
|
||
border-bottom:1px solid var(--border);
|
||
vertical-align:top;
|
||
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
|
||
font-size:.82rem;
|
||
color:var(--text);
|
||
word-break:break-word;
|
||
max-width:280px;
|
||
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
|
||
}
|
||
.db-table tbody tr:hover td { background:rgba(255,255,255,.025); }
|
||
.db-table tbody tr:last-child td { border-bottom:none; }
|
||
.null-val { color:var(--text-muted); font-style:italic; font-size:.8rem; }
|
||
|
||
/* ── PAGINATION ───────────────────────────────── */
|
||
.pagination { display:flex; gap:8px; margin-top:12px; align-items:center; }
|
||
|
||
/* ── TOP BAR ──────────────────────────────────── */
|
||
.top-bar {
|
||
display:flex; align-items:center; justify-content:space-between; gap:12px;
|
||
margin-bottom:1.4rem;
|
||
flex-wrap:wrap;
|
||
}
|
||
.top-bar-left { display:flex; align-items:center; gap:10px; }
|
||
.top-bar-actions { display:flex; gap:8px; flex-wrap:wrap; }
|
||
|
||
/* ── LOGIN CARD CENTERED ──────────────────────── */
|
||
.login-wrap {
|
||
width:100%; max-width:420px;
|
||
margin:0 auto;
|
||
animation: fadeUp .5s ease both;
|
||
}
|
||
|
||
/* ── BACK LINK ────────────────────────────────── */
|
||
.back-link {
|
||
display:inline-flex; align-items:center; gap:5px;
|
||
color:var(--text-muted); font-size:.85rem;
|
||
margin-bottom:1.2rem;
|
||
}
|
||
.back-link:hover { color:var(--text); text-decoration:none; }
|
||
|
||
@media(max-width:480px) {
|
||
body { padding:1.2rem .75rem 3rem; }
|
||
.admin-grid { grid-template-columns:1fr; }
|
||
}
|