assets/css/style.css - master - HookDev-Arch/ServerMonitor

assets/css/style.css
153 строки5 KB
HookDev-Arch
upload files
08 окт 2025, 14:53
08 окт 2025, 14:53f2498cb
:root {
  /* — базовая «ламповая» палитра — */
  --bg: radial-gradient(circle at 20% 20%, #1a0d1f, #12091a 70%);
  --panel: rgba(32, 18, 43, 0.65);
  --panel-solid: #1e1024;
  --text: #f5edf9;
  --muted: #c3b8d2;
  --accent: #f8a4ff;
  --accent2: #86c8ff;
  --danger: #ff6e8a;
  --warn: #ffd27f;
  --ok: #7ee7c5;
  --shadow: 0 10px 30px rgba(10, 4, 20, 0.6);
  --ring: 0 0 0 1px rgba(255,200,255,0.2),
           0 0 60px rgba(255,140,255,0.15) inset;
}

[data-theme="light"] {
  --bg: linear-gradient(180deg, #fdf4ff, #faefff);
  --panel: rgba(255,255,255,.8);
  --text: #2b1933;
  --muted: #5b4b63;
  --accent: #b026ff;
  --accent2: #06b6d4;
  --danger: #dc2626;
  --warn: #f59e0b;
  --ok: #059669;
  --shadow: 0 10px 24px rgba(2,6,23,.15);
  --ring: 0 0 0 1px rgba(176,38,255,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition:background .6s ease,color .4s ease;
}

/* === фоновая «ламповая» анимация === */
.bg-wrap{position:fixed;inset:0;z-index:-1;overflow:hidden}
.blob{
  position:absolute;width:70vmax;height:70vmax;border-radius:50%;
  filter:blur(90px);opacity:.35;
}
.blob.b1{top:-10%;left:-10%;
  background:radial-gradient(circle at 30% 30%, #ff92ff 0%, transparent 70%);
  animation:floatA 22s ease-in-out infinite alternate;}
.blob.b2{bottom:-20%;left:40%;
  background:radial-gradient(circle at 70% 60%, #7b6aff 0%, transparent 65%);
  animation:floatB 26s ease-in-out infinite alternate;}
.blob.b3{top:40%;right:-10%;
  background:radial-gradient(circle at 50% 50%, #ffb4b4 0%, transparent 70%);
  animation:floatC 28s ease-in-out infinite alternate;}
@keyframes floatA{from{transform:translate(-8%,-6%) scale(1)}to{transform:translate(6%,8%) scale(1.2)}}
@keyframes floatB{from{transform:translate(5%,5%) scale(1)}to{transform:translate(-5%,-4%) scale(1.1)}}
@keyframes floatC{from{transform:translate(2%,4%) scale(1)}to{transform:translate(-3%,-3%) scale(1.15)}}

/* === контейнер и шапка === */
.container{max-width:1500px;margin:0 auto;padding:20px}
.header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:16px;
  background:var(--panel);
  box-shadow:var(--shadow);backdrop-filter:blur(10px);
}
.brand h1{font-size:18px;margin:0}
.badge{
  font-size:12px;font-weight:600;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#2b1933;padding:4px 8px;border-radius:999px;
}
.header-tools{margin-left:auto;display:flex;gap:10px;align-items:center}
.tool-btn,.select{
  background:var(--panel);border:1px solid rgba(255,255,255,.1);
  color:var(--text);padding:8px 12px;border-radius:10px;
  box-shadow:var(--shadow);cursor:pointer;
  transition:all .25s ease;
}
.tool-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.05)}
.select{appearance:none}

/* === баннер === */
.info-banner{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  padding:12px 16px;border-radius:14px;
  margin-bottom:18px;
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow);
}

/* === карточки === */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:18px}
.card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px 16px;
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(255,160,255,.15)}
.card h2{margin-bottom:8px;font-size:16px;color:var(--accent)}

.stat{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}
.stat .label{color:var(--muted)}
.stat .value{font-weight:600}

.progress{
  height:14px;background:rgba(255,255,255,.06);
  border-radius:999px;overflow:hidden;margin:4px 0 8px;
}
.bar{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .4s ease;
}
.bar.warn{background:linear-gradient(90deg,var(--warn),#ffe8b0)}
.bar.danger{background:linear-gradient(90deg,var(--danger),#ffb1c0)}

/* === таблица процессов === */
.table-wrap{height:420px;overflow:auto;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:var(--panel);
  backdrop-filter:blur(8px);
}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  position:sticky;top:0;
  background:rgba(255,255,255,.05);
  color:var(--accent);
  text-align:left;padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  cursor:pointer;user-select:none;
}
tbody td{padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
tr:hover{background:rgba(255,255,255,.05)}
th.sort-asc::after{content:" ▲";font-size:10px}
th.sort-desc::after{content:" ▼";font-size:10px}

/* === добавление сервера и футер === */
.add-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.footer{
  margin-top:20px;font-size:13px;color:var(--muted);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.footer .divider{width:1px;height:12px;background:rgba(255,255,255,.15)}
.footer a{color:var(--accent);text-decoration:none}