Шрифты

cmd/server/web/css/cards.css

@@ -1,3 +1,4 @@
+/* Стили карточек (card, accordion, статусы) */
 /* ===== CARD ===== */
 .card {
     border: 1px solid #00ff88;
@@ -8,31 +9,44 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    box-shadow: 0 0 30px rgba(0, 255, 136, 0.05);
 }
 
 .card h3 {
     margin: 0 0 10px;
-    font-size: 18px;
+    font-size: var(--font-size-lg);
+    font-family: var(--font-display);
+    letter-spacing: 0.1em;
+    font-weight: var(--font-weight-bold);
 }
 
 /* ===== STATUS ===== */
 #status {
-    font-size: 28px;
-    font-weight: bold;
+    font-family: var(--font-tech);
+    font-size: var(--font-size-3xl);
+    font-weight: var(--font-weight-bold);
     margin-bottom: 8px;
+    letter-spacing: 0.05em;
 }
 
 .status-ok {
     color: #00ff88 !important;
+    text-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
 }
 
 .status-lost {
     color: #ffffff !important;
     animation: blink 1.5s infinite;
+    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
 }
 
 .status-error {
     color: #ff4444 !important;
+    text-shadow: 0 0 30px rgba(255, 68, 68, 0.3);
 }
 
 @keyframes blink {
@@ -42,9 +56,10 @@
 
 /* ===== META ===== */
 #meta {
-    font-size: 14px;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-base);
     opacity: 0.8;
-    word-break: break-word;
+    letter-spacing: 0.02em;
 }
 
 /* ===== ACCORDION ===== */
@@ -53,10 +68,15 @@
     user-select: none;
     padding: 10px 0;
     margin: 0;
+    font-family: var(--font-display);
+    font-weight: var(--font-weight-bold);
+    letter-spacing: 0.05em;
+    transition: all 0.3s ease;
 }
 
 .accordion-header:hover {
     opacity: 0.7;
+    text-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
 }
 
 .accordion-body {
@@ -72,18 +92,35 @@
 
 /* ===== LAST BYTE ===== */
 #last-byte {
-    font-size: 18px;
-    font-weight: bold;
+    font-family: var(--font-tech);
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-bold);
     color: #00ff88;
+    text-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
 }
 
 /* ===== HISTORY ===== */
 #history {
-    font-size: 13px;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
     line-height: 1.35;
     max-height: 420px;
     overflow-y: auto;
     white-space: nowrap;
     padding-right: 4px;
     margin: 0;
+    letter-spacing: 0.02em;
+}
+
+#history::-webkit-scrollbar {
+    width: 6px;
+}
+
+#history::-webkit-scrollbar-track {
+    background: rgba(0, 255, 136, 0.05);
+}
+
+#history::-webkit-scrollbar-thumb {
+    background: #00ff88;
+    border-radius: 3px;
 }