SashegDev
241 lines
8.3 KiB
CSS
241 lines
8.3 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
:root {
|
|
--bg: #080c18;
|
|
--surface: rgba(255,255,255,0.03);
|
|
--surface-hover: rgba(255,255,255,0.06);
|
|
--border: rgba(255,255,255,0.06);
|
|
--border-hover: rgba(255,255,255,0.12);
|
|
--text: #fff;
|
|
--text-sec: rgba(255,255,255,0.5);
|
|
--text-ter: rgba(255,255,255,0.3);
|
|
--accent: #6C63FF;
|
|
--green: #10b981;
|
|
--amber: #f59e0b;
|
|
--rose: #f43f5e;
|
|
--card-rad: 16px;
|
|
}
|
|
|
|
* { margin:0; padding:0; box-sizing:border-box }
|
|
body {
|
|
font-family:'Plus Jakarta Sans',sans-serif;
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
min-height:100vh;
|
|
overflow-x:hidden;
|
|
}
|
|
a { color:var(--accent); text-decoration:none }
|
|
a:hover { opacity:.85 }
|
|
|
|
.admin-bg {
|
|
position:fixed;inset:0;
|
|
background:
|
|
radial-gradient(ellipse 70% 50% at 0% 30%, rgba(108,99,255,0.07) 0%, transparent 70%),
|
|
radial-gradient(ellipse 50% 40% at 100% 70%, rgba(16,185,129,0.05) 0%, transparent 70%);
|
|
pointer-events:none;
|
|
z-index:0;
|
|
}
|
|
|
|
.admin-wrap {
|
|
position:relative;z-index:1;
|
|
max-width:1100px;margin:0 auto;padding:40px 24px;
|
|
animation:fadeUp .5s ease-out both;
|
|
}
|
|
|
|
/* Header */
|
|
.admin-header {
|
|
display:flex;justify-content:space-between;align-items:center;
|
|
margin-bottom:28px;gap:12px;flex-wrap:wrap;
|
|
}
|
|
.header-left { display:flex;align-items:center;gap:10px }
|
|
.admin-header h1 { font-size:22px; font-weight:700; letter-spacing:-.02em }
|
|
.header-count {
|
|
font-size:13px; font-weight:600; font-family:'JetBrains Mono',monospace;
|
|
padding:3px 10px; border-radius:20px;
|
|
background:rgba(108,99,255,0.12); color:var(--accent);
|
|
}
|
|
.header-right { display:flex;align-items:center;gap:10px }
|
|
.nav-link {
|
|
font-size:13px; font-weight:600; padding:8px 14px;
|
|
border-radius:10px; transition:background .2s;
|
|
}
|
|
.nav-link:hover { background:var(--surface) }
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display:inline-flex;align-items:center;gap:6px;
|
|
padding:10px 20px; border:none; border-radius:10px;
|
|
font-size:13px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif;
|
|
cursor:pointer; transition:transform .25s, box-shadow .25s;
|
|
text-decoration:none; line-height:1;
|
|
}
|
|
.btn:hover { transform:translateY(-2px) }
|
|
.btn-primary { background:var(--accent); color:#fff }
|
|
.btn-primary:hover { box-shadow:0 6px 24px rgba(108,99,255,0.25) }
|
|
.btn-danger { background:var(--rose); color:#fff }
|
|
.btn-danger:hover { box-shadow:0 6px 24px rgba(244,63,94,0.25) }
|
|
.btn-sm {
|
|
padding:6px 10px; border:none; border-radius:8px;
|
|
font-size:12px; cursor:pointer; background:var(--surface);
|
|
color:var(--text-sec); transition:background .2s, color .2s;
|
|
}
|
|
.btn-sm:hover { background:var(--surface-hover); color:var(--text) }
|
|
.btn-sm.danger { color:var(--rose) }
|
|
.btn-sm.danger:hover { background:rgba(244,63,94,0.12) }
|
|
.btn-full { width:100%; justify-content:center; padding:12px }
|
|
|
|
/* Table */
|
|
.table-wrap {
|
|
background:var(--surface); border:1px solid var(--border);
|
|
border-radius:var(--card-rad);
|
|
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
|
|
overflow-x:auto;
|
|
animation:fadeUp .5s .1s ease-out both;
|
|
}
|
|
.tbl { width:100%; border-collapse:collapse; font-size:13px }
|
|
.tbl th {
|
|
text-align:left; padding:14px 16px;
|
|
color:var(--text-ter); font-weight:600; font-size:11px;
|
|
text-transform:uppercase; letter-spacing:.04em;
|
|
border-bottom:1px solid var(--border);
|
|
white-space:nowrap;
|
|
}
|
|
.tbl td {
|
|
padding:12px 16px;
|
|
border-bottom:1px solid var(--border);
|
|
color:var(--text-sec);
|
|
white-space:nowrap;
|
|
}
|
|
.tbl tr:last-child td { border-bottom:none }
|
|
.tbl tr:hover td { background:rgba(255,255,255,0.02) }
|
|
.tbl code { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-ter) }
|
|
.tbl .actions { display:flex; gap:4px }
|
|
|
|
/* Badge */
|
|
.badge {
|
|
display:inline-block; padding:3px 10px; border-radius:20px;
|
|
font-size:11px; font-weight:600; letter-spacing:.02em;
|
|
}
|
|
.badge-free { background:rgba(16,185,129,0.12); color:var(--green) }
|
|
.badge-paid { background:rgba(245,158,11,0.12); color:var(--amber) }
|
|
.badge-test { background:rgba(108,99,255,0.12); color:var(--accent) }
|
|
|
|
/* Stat grid */
|
|
.stat-grid {
|
|
display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
|
|
gap:10px; margin-bottom:28px;
|
|
animation:fadeUp .5s .05s ease-out both;
|
|
}
|
|
.stat-card {
|
|
background:var(--surface); border:1px solid var(--border);
|
|
border-radius:var(--card-rad); padding:18px 20px;
|
|
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
|
|
transition:border-color .3s;
|
|
}
|
|
.stat-card:hover { border-color:var(--border-hover) }
|
|
.stat-lbl { font-size:12px; color:var(--text-ter); font-weight:500; margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em }
|
|
.stat-val { font-size:30px; font-weight:800; letter-spacing:-.03em }
|
|
.stat-sub { font-size:11px; color:var(--text-ter); margin-top:4px }
|
|
|
|
/* Server section */
|
|
.srv-section { animation:fadeUp .5s .15s ease-out both }
|
|
.srv-section h2 { font-size:16px; font-weight:600; margin-bottom:14px }
|
|
.srv-row {
|
|
display:flex; justify-content:space-between; align-items:center;
|
|
background:var(--surface); border:1px solid var(--border);
|
|
border-radius:12px; padding:14px 18px; margin-bottom:8px;
|
|
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
|
|
transition:border-color .3s;
|
|
}
|
|
.srv-row:hover { border-color:var(--border-hover) }
|
|
.srv-row .srv-name { font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px }
|
|
.srv-row .srv-ibs { font-size:12px; color:var(--text-ter); font-family:'JetBrains Mono',monospace }
|
|
|
|
/* Login */
|
|
.login-wrap {
|
|
position:fixed;inset:0;display:flex;
|
|
align-items:center;justify-content:center;
|
|
padding:20px;
|
|
}
|
|
.login-card {
|
|
background:var(--surface); border:1px solid var(--border);
|
|
border-radius:var(--card-rad); padding:40px 36px;
|
|
max-width:380px; width:100%;
|
|
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
|
|
text-align:center;
|
|
animation:fadeUp .5s ease-out both;
|
|
}
|
|
.login-icon { font-size:36px; margin-bottom:8px }
|
|
.login-card h1 { font-size:20px; font-weight:700; margin-bottom:24px; letter-spacing:-.02em }
|
|
.login-err {
|
|
margin-top:16px; padding:10px 14px;
|
|
background:rgba(244,63,94,0.08);
|
|
border:1px solid rgba(244,63,94,0.2);
|
|
border-radius:10px; font-size:13px; color:var(--rose);
|
|
}
|
|
|
|
/* Forms */
|
|
.fg { margin-bottom:16px; text-align:left }
|
|
.fg label { display:block; margin-bottom:6px; font-size:12px; font-weight:600; color:var(--text-sec) }
|
|
.fg input, .fg select {
|
|
width:100%; padding:12px 14px;
|
|
background:rgba(255,255,255,0.04);
|
|
border:1px solid var(--border);
|
|
border-radius:10px; color:var(--text);
|
|
font-size:14px; font-family:'Plus Jakarta Sans',sans-serif;
|
|
outline:none; transition:border-color .2s;
|
|
}
|
|
.fg input:focus, .fg select:focus { border-color:var(--accent) }
|
|
.fg input::placeholder { color:var(--text-ter) }
|
|
.fg select option { background:var(--bg) }
|
|
.fg-check { margin-bottom:16px }
|
|
.fg-check label { font-size:13px; color:var(--text-sec); display:flex; align-items:center; gap:8px; cursor:pointer }
|
|
.fg-check input[type="checkbox"] { width:16px; height:16px; accent-color:var(--accent) }
|
|
|
|
/* Modal */
|
|
.modal {
|
|
display:none; position:fixed; inset:0;
|
|
z-index:1000; align-items:center; justify-content:center;
|
|
padding:20px;
|
|
}
|
|
.modal.active { display:flex }
|
|
.modal-overlay {
|
|
position:absolute;inset:0;
|
|
background:rgba(0,0,0,0.6);
|
|
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
|
|
}
|
|
.modal-card {
|
|
position:relative;
|
|
background:var(--bg); border:1px solid var(--border);
|
|
border-radius:var(--card-rad); padding:28px;
|
|
max-width:460px; width:100%;
|
|
animation:fadeUp .3s ease-out both;
|
|
}
|
|
.modal-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px }
|
|
.modal-h h2 { font-size:18px; font-weight:700 }
|
|
.modal-x {
|
|
background:none; border:none; color:var(--text-ter);
|
|
font-size:24px; cursor:pointer; padding:4px; line-height:1;
|
|
transition:color .2s;
|
|
}
|
|
.modal-x:hover { color:var(--text) }
|
|
|
|
@keyframes fadeUp {
|
|
from { opacity:0; transform:translateY(16px) }
|
|
to { opacity:1; transform:translateY(0) }
|
|
}
|
|
|
|
@media(max-width:700px) {
|
|
.admin-wrap { padding:20px 12px }
|
|
.admin-header { flex-direction:column; align-items:stretch }
|
|
.header-right { justify-content:space-between }
|
|
.tbl { font-size:12px }
|
|
.tbl th, .tbl td { padding:10px 12px }
|
|
.stat-card { padding:14px 14px }
|
|
.stat-val { font-size:22px }
|
|
}
|
|
@media(max-width:480px) {
|
|
.login-card { padding:28px 20px }
|
|
.modal-card { padding:20px }
|
|
}
|