From a255944b497cad252636d006429329c5ccc75eaa Mon Sep 17 00:00:00 2001
From: Aleksandr Meshchriakov <avm@sh-inc.ru>
Date: Fri, 20 Mar 2026 14:00:13 +0100
Subject: [PATCH] style(admin): align dark theme with teal reference

---
 src/static/admin/css/mostovik-admin-theme.css | 123 +++++++++---------
 1 file changed, 63 insertions(+), 60 deletions(-)

diff --git a/src/static/admin/css/mostovik-admin-theme.css b/src/static/admin/css/mostovik-admin-theme.css
index d551156..b935fd3 100644
--- a/src/static/admin/css/mostovik-admin-theme.css
+++ b/src/static/admin/css/mostovik-admin-theme.css
@@ -1,23 +1,23 @@
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap");
 
 :root {
-  --mx-bg: #07101f;
-  --mx-bg-elevated: #0b1730;
-  --mx-bg-soft: #102245;
-  --mx-surface: rgba(13, 28, 58, 0.88);
-  --mx-surface-strong: rgba(16, 34, 69, 0.96);
-  --mx-border: rgba(91, 132, 255, 0.22);
-  --mx-border-strong: rgba(123, 93, 255, 0.42);
-  --mx-text: #e8f1ff;
-  --mx-text-muted: #9fb3d9;
-  --mx-text-dim: #7890bf;
-  --mx-azure: #39b8ff;
-  --mx-violet: #8e63ff;
-  --mx-violet-soft: #6d54f7;
+  --mx-bg: #031015;
+  --mx-bg-elevated: #071a20;
+  --mx-bg-soft: #0c2830;
+  --mx-surface: rgba(7, 22, 29, 0.9);
+  --mx-surface-strong: rgba(10, 30, 36, 0.97);
+  --mx-border: rgba(71, 170, 171, 0.2);
+  --mx-border-strong: rgba(98, 119, 211, 0.28);
+  --mx-text: #e1f5f3;
+  --mx-text-muted: #9ec8c6;
+  --mx-text-dim: #668c8b;
+  --mx-azure: #49d0c8;
+  --mx-violet: #5664c9;
+  --mx-violet-soft: #4352aa;
   --mx-success: #2dd4bf;
   --mx-warning: #ffc857;
   --mx-danger: #ff6b9f;
-  --mx-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
+  --mx-shadow: 0 24px 60px rgba(1, 8, 11, 0.44);
 }
 
 html,
@@ -28,9 +28,10 @@ body,
 .login-page,
 .register-page {
   background:
-    radial-gradient(circle at top left, rgba(57, 184, 255, 0.16), transparent 28%),
-    radial-gradient(circle at top right, rgba(142, 99, 255, 0.18), transparent 24%),
-    linear-gradient(180deg, #050b16 0%, var(--mx-bg) 38%, #060d1a 100%);
+    radial-gradient(circle at 50% 12%, rgba(58, 208, 198, 0.24), transparent 26%),
+    radial-gradient(circle at 20% 30%, rgba(26, 133, 136, 0.18), transparent 24%),
+    radial-gradient(circle at 85% 18%, rgba(86, 100, 201, 0.12), transparent 18%),
+    linear-gradient(180deg, #020a0d 0%, #041218 22%, var(--mx-bg) 58%, #02080b 100%);
   color: var(--mx-text);
   font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
 }
@@ -64,9 +65,9 @@ body,
 }
 
 .main-header.navbar {
-  background: linear-gradient(90deg, rgba(8, 18, 38, 0.95), rgba(19, 35, 74, 0.95));
-  border-bottom: 1px solid rgba(57, 184, 255, 0.18);
-  box-shadow: 0 10px 35px rgba(3, 7, 18, 0.28);
+  background: linear-gradient(90deg, rgba(4, 14, 18, 0.95), rgba(8, 28, 33, 0.96));
+  border-bottom: 1px solid rgba(73, 208, 200, 0.14);
+  box-shadow: 0 10px 35px rgba(1, 7, 10, 0.32);
   backdrop-filter: blur(14px);
 }
 
@@ -82,15 +83,15 @@ body,
 
 .main-sidebar {
   background:
-    linear-gradient(180deg, rgba(8, 18, 38, 0.98) 0%, rgba(9, 22, 48, 0.98) 100%),
-    radial-gradient(circle at top, rgba(142, 99, 255, 0.12), transparent 30%);
-  border-right: 1px solid rgba(142, 99, 255, 0.16);
+    linear-gradient(180deg, rgba(3, 13, 17, 0.985) 0%, rgba(5, 19, 24, 0.985) 100%),
+    radial-gradient(circle at top, rgba(73, 208, 200, 0.1), transparent 34%);
+  border-right: 1px solid rgba(73, 208, 200, 0.1);
   box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
 }
 
 .brand-link {
-  border-bottom: 1px solid rgba(57, 184, 255, 0.18);
-  background: linear-gradient(90deg, rgba(11, 23, 48, 0.96), rgba(20, 33, 67, 0.96));
+  border-bottom: 1px solid rgba(73, 208, 200, 0.14);
+  background: linear-gradient(90deg, rgba(6, 18, 22, 0.97), rgba(10, 32, 37, 0.96));
 }
 
 .brand-link .brand-text {
@@ -109,17 +110,19 @@ body,
 .nav-sidebar > .nav-item > .nav-link:hover,
 .nav-sidebar > .nav-item.menu-open > .nav-link,
 .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
-  background: rgba(57, 184, 255, 0.11);
+  background: rgba(73, 208, 200, 0.1);
   color: var(--mx-text);
   transform: translateX(2px);
 }
 
 .nav-sidebar > .nav-item > .nav-link.active,
 .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
-  background: linear-gradient(90deg, rgba(57, 184, 255, 0.18), rgba(142, 99, 255, 0.28));
-  border: 1px solid rgba(142, 99, 255, 0.2);
+  background: linear-gradient(90deg, rgba(73, 208, 200, 0.18), rgba(86, 100, 201, 0.18));
+  border: 1px solid rgba(73, 208, 200, 0.16);
   color: #ffffff;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 8px 18px rgba(6, 18, 22, 0.28);
 }
 
 .nav-sidebar .nav-header {
@@ -197,8 +200,8 @@ fieldset.module,
 .inline-group h2,
 .selector-available h2,
 .selector-chosen h2 {
-  background: linear-gradient(90deg, rgba(17, 40, 84, 0.94), rgba(33, 31, 90, 0.92));
-  border-bottom: 1px solid rgba(57, 184, 255, 0.18);
+  background: linear-gradient(90deg, rgba(10, 34, 40, 0.96), rgba(12, 40, 47, 0.94));
+  border-bottom: 1px solid rgba(73, 208, 200, 0.12);
   color: #f6f9ff;
   font-weight: 700;
   letter-spacing: 0.04em;
@@ -242,9 +245,9 @@ table,
 
 .results thead th,
 .table thead th {
-  background: rgba(18, 40, 84, 0.96);
-  border-bottom: 1px solid rgba(57, 184, 255, 0.14);
-  color: #dff2ff;
+  background: rgba(10, 34, 40, 0.96);
+  border-bottom: 1px solid rgba(73, 208, 200, 0.12);
+  color: #d5f6f2;
   font-size: 0.76rem;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -253,24 +256,24 @@ table,
 
 .results tbody tr,
 .table tbody tr {
-  background: rgba(8, 19, 42, 0.62);
+  background: rgba(5, 18, 23, 0.68);
 }
 
 .results tbody tr:nth-child(even),
 .table tbody tr:nth-child(even) {
-  background: rgba(13, 26, 55, 0.74);
+  background: rgba(8, 25, 31, 0.8);
 }
 
 .results tbody tr:hover,
 .table tbody tr:hover {
-  background: rgba(30, 53, 104, 0.84);
+  background: rgba(13, 40, 48, 0.9);
 }
 
 .results td,
 .results th,
 .table td,
 .table th {
-  border-color: rgba(57, 184, 255, 0.08);
+  border-color: rgba(73, 208, 200, 0.08);
   padding-top: 0.78rem;
   padding-bottom: 0.78rem;
   vertical-align: middle;
@@ -293,8 +296,8 @@ textarea,
 .vIntegerField,
 .select2-container--default .select2-selection--single,
 .select2-container--default .select2-selection--multiple {
-  background: rgba(6, 16, 35, 0.9);
-  border: 1px solid rgba(57, 184, 255, 0.16);
+  background: rgba(4, 14, 18, 0.92);
+  border: 1px solid rgba(73, 208, 200, 0.14);
   border-radius: 14px;
   color: var(--mx-text);
   min-height: 2.7rem;
@@ -311,9 +314,9 @@ textarea:focus,
 .form-control:focus,
 .select2-container--default.select2-container--focus .select2-selection--multiple,
 .select2-container--default.select2-container--open .select2-selection--single {
-  background: rgba(10, 24, 49, 0.98);
-  border-color: rgba(142, 99, 255, 0.58);
-  box-shadow: 0 0 0 0.22rem rgba(142, 99, 255, 0.14);
+  background: rgba(7, 22, 27, 0.99);
+  border-color: rgba(73, 208, 200, 0.44);
+  box-shadow: 0 0 0 0.22rem rgba(73, 208, 200, 0.13);
 }
 
 label,
@@ -348,22 +351,22 @@ input[type="button"],
 .object-tools a,
 .btn,
 a.button {
-  background: linear-gradient(135deg, rgba(57, 184, 255, 0.18), rgba(142, 99, 255, 0.36));
-  border: 1px solid rgba(142, 99, 255, 0.34);
+  background: linear-gradient(135deg, rgba(23, 97, 100, 0.62), rgba(42, 72, 133, 0.46));
+  border: 1px solid rgba(73, 208, 200, 0.18);
   border-radius: 14px;
   color: #f5fbff;
   font-weight: 700;
   letter-spacing: 0.02em;
   text-shadow: none;
-  box-shadow: 0 12px 30px rgba(4, 10, 24, 0.25);
+  box-shadow: 0 12px 30px rgba(2, 10, 13, 0.25);
 }
 
 .button.default,
 input[type="submit"].default,
 .btn-primary,
 .object-tools a.addlink {
-  background: linear-gradient(135deg, rgba(41, 183, 255, 0.86), rgba(122, 95, 255, 0.88));
-  border-color: rgba(139, 115, 255, 0.78);
+  background: linear-gradient(135deg, rgba(51, 179, 168, 0.9), rgba(65, 112, 196, 0.82));
+  border-color: rgba(98, 119, 211, 0.48);
   color: #ffffff;
 }
 
@@ -419,10 +422,10 @@ tt,
 
 pre,
 code {
-  background: rgba(7, 17, 35, 0.9);
-  border: 1px solid rgba(57, 184, 255, 0.14);
+  background: rgba(4, 15, 19, 0.94);
+  border: 1px solid rgba(73, 208, 200, 0.12);
   border-radius: 12px;
-  color: #c8f2ff;
+  color: #b6f4eb;
 }
 
 #changelist-filter h2,
@@ -452,22 +455,22 @@ code {
 
 .login-page .card {
   background:
-    linear-gradient(180deg, rgba(11, 23, 48, 0.96), rgba(16, 34, 69, 0.96)),
-    radial-gradient(circle at top, rgba(142, 99, 255, 0.14), transparent 26%);
+    linear-gradient(180deg, rgba(6, 18, 22, 0.97), rgba(8, 28, 33, 0.97)),
+    radial-gradient(circle at top, rgba(73, 208, 200, 0.12), transparent 28%);
 }
 
 .pagination .page-link,
 .paginator a,
 .paginator .this-page {
-  background: rgba(7, 17, 35, 0.82);
-  border: 1px solid rgba(57, 184, 255, 0.14);
+  background: rgba(4, 15, 19, 0.86);
+  border: 1px solid rgba(73, 208, 200, 0.12);
   color: var(--mx-text);
 }
 
 .pagination .active .page-link,
 .paginator .this-page {
-  background: linear-gradient(135deg, rgba(57, 184, 255, 0.78), rgba(142, 99, 255, 0.8));
-  border-color: rgba(142, 99, 255, 0.5);
+  background: linear-gradient(135deg, rgba(51, 179, 168, 0.82), rgba(65, 112, 196, 0.76));
+  border-color: rgba(73, 208, 200, 0.28);
   color: #ffffff;
 }
 
@@ -477,11 +480,11 @@ code {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(7, 16, 34, 0.9);
+  background: rgba(3, 12, 15, 0.92);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, rgba(57, 184, 255, 0.7), rgba(142, 99, 255, 0.74));
-  border: 2px solid rgba(7, 16, 34, 0.9);
+  background: linear-gradient(180deg, rgba(73, 208, 200, 0.7), rgba(65, 112, 196, 0.66));
+  border: 2px solid rgba(3, 12, 15, 0.92);
   border-radius: 999px;
 }