Обновление файла

frontend/src/styles.css

@@ -1,3 +1,8 @@
+/* ============================================================
+   Proxmox VPS Panel — UI-стили
+   Одна согласованная тёмная тема. Без дублей и !important.
+   ============================================================ */
+
 :root {
   --bg: #0b1120;
   --surface: #131b2e;
@@ -30,6 +35,7 @@ button, input, select {
 
 a { color: var(--accent); text-decoration: none; }
 
+/* --- Layout shell --- */
 .shell {
   min-height: 100vh;
   display: flex;
@@ -84,6 +90,7 @@ a { color: var(--accent); text-decoration: none; }
   font-size: 14px;
 }
 
+/* --- Buttons --- */
 .btn {
   display: inline-flex;
   align-items: center;
@@ -115,6 +122,12 @@ a { color: var(--accent); text-decoration: none; }
 }
 .btn-danger:hover { border-color: var(--danger); }
 
+.btn-sm {
+  padding: 6px 10px;
+  font-size: 12px;
+}
+
+/* --- Cards / fields --- */
 .card {
   background: var(--surface);
   border: 1px solid var(--border);
@@ -155,15 +168,17 @@ a { color: var(--accent); text-decoration: none; }
   margin-bottom: 16px;
 }
 
+/* --- Auth --- */
 .auth-wrap {
   max-width: 380px;
   margin: 90px auto;
 }
 
+/* --- Instance grid (одно правило, без дублей) --- */
 .instance-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 20px;
 }
 
 .instance-card {
@@ -222,17 +237,14 @@ a { color: var(--accent); text-decoration: none; }
   margin-top: 4px;
 }
 
-.btn-sm {
-  padding: 6px 10px;
-  font-size: 12px;
-}
-
+/* --- Empty state --- */
 .empty-state {
   text-align: center;
   padding: 60px 20px;
   color: var(--text-muted);
 }
 
+/* --- Tabs / tables --- */
 .nav-tabs {
   display: flex;
   gap: 4px;
@@ -269,6 +281,7 @@ table.data-table th {
   letter-spacing: 0.04em;
 }
 
+/* --- Console --- */
 .console-frame {
   background: #000;
   border-radius: 8px;
@@ -276,6 +289,30 @@ table.data-table th {
   border: 1px solid var(--border);
 }
 
+/* --- Inline stat bars (используются в InstanceCard) --- */
+.metric {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.metric-bar {
+  width: 50px;
+  height: 8px;
+  background: #333;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.metric-bar > span {
+  display: block;
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s;
+}
+.metric-bar > span.good { background: #4caf50; }
+.metric-bar > span.warn { background: #ff9800; }
+.metric-bar > span.bad  { background: #f44336; }
+
+/* --- Badges --- */
 .badge {
   font-family: var(--font-mono);
   font-size: 11px;
@@ -284,63 +321,3 @@ table.data-table th {
   border: 1px solid var(--border);
   color: var(--text-muted);
 }
-
-/* === Компактный размер карточек VPS === */
-.instance-grid {
-  grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
-  gap: 16px;
-  justify-content: start;
-}
-.instance-card {
-  max-width: 340px;
-  padding: 14px 16px;
-}
-.instance-name {
-  font-size: 16px;
-}
-.instance-meta {
-  font-size: 12px;
-}
-.instance-actions .btn {
-  padding: 5px 10px;
-  font-size: 12px;
-}
-
-/* === Карточки VPS на всю ширину === */
-.instance-grid {
-  grid-template-columns: 1fr;
-  gap: 16px;
-}
-.instance-card {
-  max-width: none;
-  width: 100%;
-}
-
-/* === Сетка карточек: несколько в ряд === */
-.instance-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-  gap: 20px;
-}
-.instance-card {
-  max-width: none;
-  width: auto;
-}
-
-/* === Более светлый фон страницы === */
-body {
-  background: #2b3448 !important;
-}
-.container,
-.page-title,
-.page-sub {
-  color: #f0f2f7;
-}
-.instance-card,
-.card {
-  background: #39435c !important;
-  border: 1px solid #4d5878 !important;
-}
-.instance-meta {
-  color: #c3cadb;
-}