159 lines
3.4 KiB
CSS
159 lines
3.4 KiB
CSS
/* ===== БАЗОВЫЕ СТИЛИ ===== */
|
||
:root {
|
||
/* Основные шрифты */
|
||
--font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
|
||
--font-display: 'Orbitron', 'Share Tech Mono', 'Segoe UI', sans-serif;
|
||
--font-tech: 'Share Tech Mono', 'Courier New', monospace;
|
||
|
||
/* Размеры */
|
||
--font-size-xs: 11px;
|
||
--font-size-sm: 13px;
|
||
--font-size-base: 15px;
|
||
--font-size-lg: 17px;
|
||
--font-size-xl: 20px;
|
||
--font-size-2xl: 24px;
|
||
--font-size-3xl: 30px;
|
||
|
||
/* Веса */
|
||
--font-weight-normal: 400;
|
||
--font-weight-semibold: 600;
|
||
--font-weight-bold: 700;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font-mono);
|
||
background: #0a0f0a; /* Чуть светлее для лучшего контраста */
|
||
color: #00ff88;
|
||
padding: 12px;
|
||
font-size: var(--font-size-base);
|
||
line-height: 1.7;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* ===== ЗАГОЛОВКИ ===== */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: var(--font-display);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
font-weight: var(--font-weight-bold);
|
||
margin: 0;
|
||
color: #00ff88;
|
||
}
|
||
|
||
h1 {
|
||
font-size: var(--font-size-2xl);
|
||
text-shadow: 0 0 30px rgba(0, 255, 136, 0.2);
|
||
}
|
||
|
||
h2 {
|
||
font-size: var(--font-size-xl);
|
||
}
|
||
|
||
h3 {
|
||
font-size: var(--font-size-lg);
|
||
}
|
||
|
||
/* ===== МОНОШИРИННЫЙ ТЕКСТ ===== */
|
||
code, pre, .mono {
|
||
font-family: var(--font-mono);
|
||
font-weight: var(--font-weight-normal);
|
||
}
|
||
|
||
/* ===== ТЕХНИЧЕСКИЙ ТЕКСТ ===== */
|
||
.status-text,
|
||
.value-text,
|
||
.signal-text,
|
||
.tech-text {
|
||
font-family: var(--font-tech);
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
/* ===== УЛУЧШЕНИЯ ЧИТАЕМОСТИ ===== */
|
||
.text-muted {
|
||
opacity: 0.6;
|
||
color: #88ffbb;
|
||
}
|
||
|
||
.text-bold {
|
||
font-weight: var(--font-weight-bold);
|
||
}
|
||
|
||
.text-semibold {
|
||
font-weight: var(--font-weight-semibold);
|
||
}
|
||
|
||
/* ===== ССЫЛКИ ===== */
|
||
a {
|
||
color: #00ff88;
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
font-weight: var(--font-weight-semibold);
|
||
}
|
||
|
||
a:hover {
|
||
color: #66ffbb;
|
||
text-shadow: 0 0 25px rgba(0, 255, 136, 0.2);
|
||
}
|
||
/* ===== УЛУЧШЕННЫЙ СКРОЛЛ НА МОБИЛЬНЫХ ===== */
|
||
* {
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
/* Плавный скролл */
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
/* Улучшенный скролл на мобильных */
|
||
.panel,
|
||
.logs-content,
|
||
.logs-sidebar,
|
||
#history,
|
||
#dataTableContainer {
|
||
-webkit-overflow-scrolling: touch;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
/* ===== ГЛОБАЛЬНЫЕ СТИЛИ СКРОЛЛБАРОВ ===== */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: rgba(0, 255, 136, 0.05);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 255, 136, 0.3);
|
||
border-radius: 4px;
|
||
transition: background 0.3s ease;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(0, 255, 136, 0.5);
|
||
}
|
||
|
||
/* Firefox */
|
||
* {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(0, 255, 136, 0.3) rgba(0, 255, 136, 0.05);
|
||
}
|
||
|
||
/* Убираем скролл-бары на мобильных где не нужно */
|
||
@media (max-width: 768px) {
|
||
.panel::-webkit-scrollbar,
|
||
.logs-content::-webkit-scrollbar,
|
||
.logs-sidebar::-webkit-scrollbar {
|
||
width: 3px;
|
||
}
|
||
}
|
||
|