Privat/Website-fabianschieder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add custom CSS styles for Adminer UI and update HTML structure for improved design

Browse Source
This commit is contained in:
Fabian Schieder 2026-02-28 20:12:16 +01:00
parent d8814a1dfc
commit b74752b2fd
3 changed files with 124 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
adminer/adminer.css Normal file
View File

@ -0,0 +1,113 @@
/* Adminer Mini-Admin UI – angelehnt an style.css (Glassmorphism + Accent) */
:root{
--bg:#0b1020;
--text:#e5e7eb;
--muted:#94a3b8;
--card:rgba(255,255,255,.06);
--cardBorder:rgba(255,255,255,.10);
--accent:#6366f1;
--accent2:#22d3ee;
--danger:#ef4444;
--success:#22c55e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
background:radial-gradient(1200px 600px at 20% 10%, rgba(99,102,241,.25), transparent 60%),
radial-gradient(900px 600px at 80% 30%, rgba(34,211,238,.18), transparent 60%),
radial-gradient(900px 700px at 40% 90%, rgba(168,85,247,.14), transparent 60%),
var(--bg);
color:var(--text);
}
.wrap{max-width:1100px;margin:34px auto;padding:0 16px}
.top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:16px;
}
h1{font-size:28px;letter-spacing:.2px;margin:0}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}
.pill{
font-size:12px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
padding:5px 10px;
border-radius:999px;
}
.card{
background:var(--card);
border:1px solid var(--cardBorder);
border-radius:16px;
padding:16px;
backdrop-filter: blur(14px);
box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.grid{display:grid;grid-template-columns:320px 1fr;gap:16px}
@media (max-width: 900px){.grid{grid-template-columns:1fr}}
.muted{color:var(--muted)}
label{display:block;color:#cbd5e1;font-weight:600}
input,textarea,select{
width:100%;
padding:10px 12px;
margin-top:6px;
border-radius:12px;
background:rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.14);
color:var(--text);
outline:none;
}
input:focus,textarea:focus,select:focus{border-color:rgba(99,102,241,.75);box-shadow:0 0 0 3px rgba(99,102,241,.20)}
hr{border:0;border-top:1px solid rgba(255,255,255,.10);margin:16px 0}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.16);
cursor:pointer;
background:linear-gradient(135deg, rgba(99,102,241,.95), rgba(34,211,238,.55));
color:white;
text-decoration:none;
transition:transform .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn.secondary{
background:rgba(255,255,255,.08);
}
.notice{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14)}
.notice.ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25);color:#bbf7d0}
.notice.err{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.25);color:#fecaca}
.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px}
.table th,.table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.10);vertical-align:top}
.table th{color:#cbd5e1;text-align:left;font-weight:700;background:rgba(255,255,255,.04)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}
.list{list-style:none;margin:0;padding:0}
.list li{margin:6px 0}
.list a{display:block;padding:8px 10px;border-radius:12px}
.list a:hover{background:rgba(255,255,255,.06)}
.list a.active{background:rgba(99,102,241,.16);border:1px solid rgba(99,102,241,.25)}

20
adminer/index.php
View File

@ -73,14 +73,14 @@ if (!adminer_app_is_logged_in()) {
. '</div>'; . '</div>';
if ($appRegOk) { if ($appRegOk) {
$body .= '<div class="ok">' . h($appRegOk) . '</div><br>'; $body .= '<div class="notice ok">' . h($appRegOk) . '</div><br>';
} }
if ($appPage === 'register') { if ($appPage === 'register') {
if (!$canRegister) { if (!$canRegister) {
$body .= '<div class="err">Registrierung ist deaktiviert.</div>'; $body .= '<div class="notice err">Registrierung ist deaktiviert.</div>';
} else { } else {
if ($appRegError) $body .= '<div class="err">' . h($appRegError) . '</div><br>'; if ($appRegError) $body .= '<div class="notice err">' . h($appRegError) . '</div><br>';
$body .= '<h3>Registrieren</h3>'; $body .= '<h3>Registrieren</h3>';
$body .= '<form method="post">' $body .= '<form method="post">'
@ -91,10 +91,10 @@ if (!adminer_app_is_logged_in()) {
. '<button class="btn" type="submit">Account erstellen</button>' . '<button class="btn" type="submit">Account erstellen</button>'
. '</form>'; . '</form>';
$body .= '<div class="muted" style="margin-top:12px">Dein Account wird in <code>FabianWebsite.adminer_users</code> gespeichert.</div>'; $body .= '<div class="muted" style="margin-top:12px">Dein Account wird in <code class="code">FabianWebsite.adminer_users</code> gespeichert.</div>';
} }
} else { } else {
if ($appError) $body .= '<div class="err">' . h($appError) . '</div><br>'; if ($appError) $body .= '<div class="notice err">' . h($appError) . '</div><br>';
$body .= '<h3>Login</h3>'; $body .= '<h3>Login</h3>';
$body .= '<form method="post">' $body .= '<form method="post">'
@ -320,11 +320,11 @@ try {
if (empty($tables)) { if (empty($tables)) {
$body .= '<div class="muted">Keine Tabellen gefunden.</div>'; $body .= '<div class="muted">Keine Tabellen gefunden.</div>';
} else { } else {
$body .= '<ul style="list-style:none;padding-left:0;margin:0">'; $body .= '<ul class="list">';
foreach ($tables as $row) { foreach ($tables as $row) {
$tname = (string)$row[0]; $tname = (string)$row[0];
$active = ($tname === $table) ? ' style="font-weight:700"' : ''; $active = ($tname === $table) ? 'active' : '';
$body .= '<li><a' . $active . ' href="/adminer?t=' . rawurlencode($tname) . '">' . h($tname) . '</a></li>'; $body .= '<li><a class="' . $active . '" href="/adminer?t=' . rawurlencode($tname) . '">' . h($tname) . '</a></li>';
} }
$body .= '</ul>'; $body .= '</ul>';
} }
@ -333,7 +333,7 @@ try {
$body .= '<div class="card">'; $body .= '<div class="card">';
if ($msg) { if ($msg) {
$cls = $msg['type'] === 'ok' ? 'ok' : 'err'; $cls = $msg['type'] === 'ok' ? 'notice ok' : 'notice err';
$body .= '<div class="' . $cls . '">' . h($msg['text']) . '</div><br>'; $body .= '<div class="' . $cls . '">' . h($msg['text']) . '</div><br>';
} }
@ -386,7 +386,7 @@ function admin_render_table(array $rows): string
} }
$cols = array_keys((array)$rows[0]); $cols = array_keys((array)$rows[0]);
$html = '<table><thead><tr>'; $html = '<table class="table"><thead><tr>';
foreach ($cols as $c) { foreach ($cols as $c) {
$html .= '<th>' . h((string)$c) . '</th>'; $html .= '<th>' . h((string)$c) . '</th>';
} }

22
adminer/views.php
View File

@ -13,27 +13,7 @@ function admin_layout($title, $bodyHtml)
echo "<meta charset=\"utf-8\">\n"; echo "<meta charset=\"utf-8\">\n";
echo "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n"; echo "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n";
echo '<title>' . h($title) . "</title>\n"; echo '<title>' . h($title) . "</title>\n";
echo "<style> echo "<link rel=\"stylesheet\" href=\"/adminer/adminer.css\">\n";
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:#0b1020;color:#e5e7eb;margin:0}
.wrap{max-width:1100px;margin:32px auto;padding:0 16px}
a{color:#60a5fa;text-decoration:none}
a:hover{text-decoration:underline}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:16px;backdrop-filter: blur(12px)}
.grid{display:grid;grid-template-columns:320px 1fr;gap:16px}
@media (max-width: 900px){.grid{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.10);vertical-align:top}
th{color:#cbd5e1;text-align:left;font-weight:600}
code,pre,textarea,input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}
textarea,input{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);color:#e5e7eb;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px}
.btn{display:inline-block;background:#2563eb;color:white;border:0;border-radius:10px;padding:10px 12px;cursor:pointer}
.btn.secondary{background:rgba(255,255,255,.10)}
.muted{color:#94a3b8}
.err{color:#fecaca;background:rgba(220,38,38,.12);border:1px solid rgba(220,38,38,.25);padding:10px 12px;border-radius:10px}
.ok{color:#bbf7d0;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);padding:10px 12px;border-radius:10px}
.pill{font-size:12px;background:rgba(255,255,255,.10);padding:4px 8px;border-radius:999px}
</style>\n";
echo "</head>\n<body>\n"; echo "</head>\n<body>\n";
echo "<div class=\"wrap\">\n"; echo "<div class=\"wrap\">\n";
echo $bodyHtml; echo $bodyHtml;