/* ========================================================== Crypto-Panel — Premium Tech UI (Bootstrap 5.3 overlay) File: assets/styles.css Goals: - спокойная “премиальная” палитра (muted blue/teal/violet) - единая система размеров (радиусы/тени/spacing/высоты) - формы 44px, кнопки 40–44px, без дерганий - аккуратные карточки/таблицы/навигация - мягкие статусы без кислотных цветов - mobile-friendly (читабельно + table horizontal scroll) - dark theme: глубокий графит, тот же “дорогой” характер ========================================================== */ /* -------------------------- 1) Design tokens -------------------------- */ :root{ /* Layout */ --topbar-h: 56px; /* Typography */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji","Segoe UI Emoji"; --text-base: 15px; /* desktop base (will adjust on mobile) */ --line: 1.45; /* Radii (moderate, not “pill”) */ --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 14px; /* Control sizes */ --control-h: 44px; /* inputs/selects */ --btn-h: 40px; /* buttons */ --btn-h-lg: 44px; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; /* Light palette (premium neutral) */ --bg: #f5f7fb; /* page background */ --bg-soft: #eef2f8; /* subtle blocks */ --surface: #ffffff; /* cards */ --surface-2: #f7f9fc; /* inputs/group */ --text: #0f172a; /* slate-900 */ --text-2: #334155; /* slate-700 */ --muted: #64748b; /* slate-500 */ --muted-2: #94a3b8; /* slate-400 */ --border: rgba(15, 23, 42, .10); --border-2: rgba(15, 23, 42, .07); /* Shadows (soft, premium) */ --shadow-1: 0 1px 0 rgba(15,23,42,.04); --shadow-2: 0 8px 22px rgba(15,23,42,.06); --shadow-3: 0 18px 48px rgba(15,23,42,.10); /* Accents (muted, non-neon) */ --primary: #2a5bd7; /* muted cobalt */ --primary-2: #234ab0; --primary-soft: rgba(42, 91, 215, .12); --teal: #1f7a76; /* muted teal */ --teal-soft: rgba(31, 122, 118, .12); --violet: #6a4fd6; /* muted violet */ --violet-soft: rgba(106, 79, 214, .12); /* Status (calm) */ --success: #1f6f5b; /* calm green-teal */ --danger: #8b2e3a; /* calm red-wine */ --warning: #8a6a1c; /* calm amber */ --info: #2b5f9a; /* calm blue */ /* Focus ring (visible, not neon) */ --ring: 0 0 0 4px rgba(42, 91, 215, .16); /* Table */ --table-stripe: rgba(15, 23, 42, .03); /* Sidebar */ --sidebar-bg: rgba(255,255,255,.88); --sidebar-active: rgba(42, 91, 215, .10); /* Chart */ --chart-bg: #ffffff; } /* Dark theme tokens (apply when ) */ [data-bs-theme="dark"]{ --bg: #0b1220; /* deep graphite */ --bg-soft: #0f172a; --surface: rgba(16, 26, 45, .92); --surface-2: rgba(12, 19, 34, .92); --text: #e7edf7; --text-2: #c6d2e3; --muted: #9fb0c7; --muted-2: #7f93ad; --border: rgba(255,255,255,.12); --border-2: rgba(255,255,255,.08); --shadow-1: 0 1px 0 rgba(0,0,0,.25); --shadow-2: 0 10px 26px rgba(0,0,0,.35); --shadow-3: 0 22px 56px rgba(0,0,0,.45); --primary: #6d8cff; /* muted periwinkle */ --primary-2: #5675ff; --primary-soft: rgba(109, 140, 255, .16); --teal: #3b9b92; --teal-soft: rgba(59, 155, 146, .14); --violet: #8a7dff; --violet-soft: rgba(138, 125, 255, .14); --success: #2f7a66; --danger: #a24757; --warning: #9a7a2b; --info: #3a76b3; --ring: 0 0 0 4px rgba(109, 140, 255, .18); --table-stripe: rgba(255,255,255,.03); --sidebar-bg: rgba(7, 13, 24, .90); --sidebar-active: rgba(109, 140, 255, .16); --chart-bg: rgba(16, 26, 45, .92); } /* -------------------------- 2) Base typography & page -------------------------- */ html{ font-size: var(--text-base); } body{ font-family: var(--font-sans); line-height: var(--line); color: var(--text); background: var(--bg); overflow-x: hidden; } /* subtle tech background (light) */ @media (prefers-reduced-motion: no-preference){ body{ background-image: radial-gradient(900px 420px at 20% 0%, rgba(42, 91, 215, .08), rgba(42, 91, 215, 0) 60%), radial-gradient(820px 380px at 85% 10%, rgba(106, 79, 214, .07), rgba(106, 79, 214, 0) 62%); background-attachment: fixed; } [data-bs-theme="dark"] body{ background-image: radial-gradient(900px 420px at 18% 0%, rgba(109, 140, 255, .12), rgba(109, 140, 255, 0) 60%), radial-gradient(820px 380px at 85% 10%, rgba(59, 155, 146, .10), rgba(59, 155, 146, 0) 62%); } } h1,h2,h3,h4,h5,h6{ color: var(--text); letter-spacing: .01em; } h1{ font-size: 1.35rem; font-weight: 800; } h2{ font-size: 1.20rem; font-weight: 800; } h3{ font-size: 1.05rem; font-weight: 750; } small,.small{ color: var(--muted); } /* Content spacing */ main{ padding: var(--sp-4) 0 var(--sp-6); } /* -------------------------- 3) Navbar / topbar -------------------------- */ .navbar{ border-bottom: 1px solid var(--border-2); box-shadow: none !important; } .navbar-dark.bg-dark{ background-color: #0b1220 !important; border-bottom: 1px solid rgba(255,255,255,.08); } [data-bs-theme="dark"] .navbar-dark.bg-dark{ background-color: rgba(7, 13, 24, .92) !important; backdrop-filter: blur(10px); } /* mobile navbar */ @media (max-width: 767.98px){ .navbar-light.bg-white{ position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid var(--border-2); background-color: var(--surface) !important; } [data-bs-theme="dark"] .navbar-light.bg-white{ background-color: rgba(7, 13, 24, .92) !important; backdrop-filter: blur(10px); } .navbar-light .themeToggle{ border-color: rgba(100,116,139,.35); color: var(--text-2); } .navbar-light .themeToggle:hover{ background: rgba(100,116,139,.10); color: var(--text); } [data-bs-theme="dark"] .navbar-light .themeToggle{ border-color: rgba(159,176,199,.28); color: rgba(230,237,247,.86); } } /* -------------------------- 4) Sidebar / navigation -------------------------- */ .sidebar{ background: var(--sidebar-bg); border-right: 1px solid var(--border-2); } @media (min-width: 768px){ body{ padding-top: var(--topbar-h); } .sidebar{ position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding-bottom: var(--sp-3); backdrop-filter: blur(10px); } .sidebar .position-sticky{ position: static !important; } } /* Sidebar title */ .sidebar h4{ font-size: .86rem; font-weight: 800; margin: var(--sp-3) 0 var(--sp-3); color: var(--text); letter-spacing: .10em; text-transform: uppercase; } /* Links */ .sidebar .nav-link{ color: var(--text-2); border-radius: var(--r-sm); margin: 4px 10px; padding: .56rem .74rem; display: flex; align-items: center; gap: .58rem; font-weight: 470; } .sidebar .nav-link:hover{ background: rgba(15,23,42,.05); color: var(--text); } [data-bs-theme="dark"] .sidebar .nav-link:hover{ background: rgba(255,255,255,.06); } .sidebar .nav-link.active{ background: var(--sidebar-active); color: var(--primary); font-weight: 800; } /* -------------------------- 5) Cards / sections -------------------------- */ .card{ border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); } .card .card-header{ background: transparent; border-bottom: 1px solid var(--border-2); padding: var(--sp-3) var(--sp-4); font-weight: 800; color: var(--text); } .card .card-body{ padding: var(--sp-4); } [data-bs-theme="dark"] .card{ box-shadow: var(--shadow-2); } /* Section dividers inside cards */ .card hr{ border-color: var(--border-2); opacity: 1; } /* Analytics blocks (index/ai) */ .kpi-wrap{ display: flex; flex-wrap: wrap; gap: 14px; } .kpi{ min-width: 170px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; } .kpi .lbl{ font-size: .9rem; color: var(--muted); } .section-title{ font-weight: 700; margin-bottom: 10px; } .chart-box{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; } .chart-holder{ height: 360px; } /* -------------------------- 6) Tables -------------------------- */ .table{ color: var(--text); margin-bottom: 0; } .table > :not(caption) > * > *{ border-color: var(--border-2); padding: .50rem .70rem; vertical-align: middle; } /* Header: compact + readable */ .table thead th{ font-size: .78rem; font-weight: 800; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } /* Row hover (subtle) */ .table tbody tr:hover{ background: rgba(42, 91, 215, .04); } [data-bs-theme="dark"] .table tbody tr:hover{ background: rgba(109, 140, 255, .06); } /* Stripe tone */ .table-striped > tbody > tr:nth-of-type(odd) > *{ background-color: var(--table-stripe); } /* Table responsive (Bootstrap .table-responsive wrapper) */ .table-responsive{ border: 1px solid var(--border-2); border-radius: var(--r-md); overflow: auto; background: transparent; } /* Optional sticky header (works when wrapped in .table-responsive) */ .table-responsive thead th{ position: sticky; top: 0; background: var(--surface); z-index: 2; } [data-bs-theme="dark"] .table-responsive thead th{ background: rgba(16, 26, 45, .98); } /* -------------------------- 7) Forms / inputs / labels -------------------------- */ .form-label{ font-weight: 700; color: var(--text-2); margin-bottom: .35rem; } /* unified heights */ .form-control, .form-select, .input-group-text{ border-radius: var(--r-md); } /* Inputs */ .form-control, .form-select{ min-height: var(--control-h); padding: .55rem .80rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: none; } .form-control::placeholder{ color: rgba(100,116,139,.70); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select{ background: var(--surface-2); color: var(--text); } /* Focus: visible ring (no neon) */ .form-control:focus, .form-select:focus{ border-color: rgba(42, 91, 215, .55); box-shadow: var(--ring); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus{ border-color: rgba(109, 140, 255, .55); box-shadow: var(--ring); } /* Input group */ .input-group-text{ min-height: var(--control-h); padding: .55rem .80rem; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-weight: 700; } [data-bs-theme="dark"] .input-group-text{ background: rgba(12, 19, 34, .92); } /* Disabled */ .form-control:disabled, .form-select:disabled{ background: rgba(148,163,184,.22); color: rgba(71,85,105,.70); } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled{ background: rgba(255,255,255,.06); color: rgba(159,176,199,.70); } /* Checkboxes/radios subtle (keeps Bootstrap semantics) */ .form-check-input{ border-color: var(--border); } .form-check-input:focus{ box-shadow: var(--ring); } /* -------------------------- 8) Buttons (premium, muted) -------------------------- */ .btn{ min-height: var(--btn-h); border-radius: var(--r-md); padding: .48rem .80rem; font-weight: 750; letter-spacing: .01em; box-shadow: none !important; } /* Slightly larger primary actions if using .btn-lg */ .btn-lg{ min-height: var(--btn-h-lg); padding: .58rem 1.0rem; border-radius: var(--r-lg); } /* Primary */ .btn-primary{ background: linear-gradient(180deg, rgba(42,91,215,1) 0%, rgba(35,74,176,1) 100%); border-color: rgba(35,74,176,1); } .btn-primary:hover{ filter: brightness(.98); } .btn-primary:active{ filter: brightness(.95); } /* Outline buttons: quiet */ .btn-outline-primary{ color: var(--primary); border-color: rgba(42,91,215,.35); } .btn-outline-primary:hover{ background: var(--primary-soft); border-color: rgba(42,91,215,.45); color: var(--primary); } /* Semantic buttons — приглушённые */ .btn-success{ background: linear-gradient(180deg, rgba(31,111,91,1) 0%, rgba(27,95,78,1) 100%); border-color: rgba(27,95,78,1); } .btn-danger{ background: linear-gradient(180deg, rgba(139,46,58,1) 0%, rgba(118,38,48,1) 100%); border-color: rgba(118,38,48,1); } .btn-warning{ background: linear-gradient(180deg, rgba(138,106,28,1) 0%, rgba(120,91,23,1) 100%); border-color: rgba(120,91,23,1); color: #fff; } .btn-success:hover, .btn-danger:hover, .btn-warning:hover{ filter: brightness(.98); } .btn-success:active, .btn-danger:active, .btn-warning:active{ filter: brightness(.95); } /* Secondary / light outlines to look “tool-like” */ .btn-outline-secondary{ border-color: rgba(100,116,139,.30); color: var(--text-2); } .btn-outline-secondary:hover{ background: rgba(100,116,139,.08); border-color: rgba(100,116,139,.40); color: var(--text); } /* Dark theme buttons: keep muted premium */ [data-bs-theme="dark"] .btn-outline-secondary{ border-color: rgba(159,176,199,.26); color: rgba(230,237,247,.86); } [data-bs-theme="dark"] .btn-outline-secondary:hover{ background: rgba(255,255,255,.08); border-color: rgba(159,176,199,.34); } /* Focus for buttons (accessible) */ .btn:focus-visible{ outline: none; box-shadow: var(--ring) !important; } /* -------------------------- 9) Badges / Alerts (calm) -------------------------- */ .badge{ border-radius: 999px; padding: .38em .62em; font-weight: 750; letter-spacing: .01em; } /* Alerts: premium panels */ .alert{ border-radius: var(--r-lg); border: 1px solid var(--border-2); box-shadow: var(--shadow-1); } /* Calm alert colors */ .alert-primary{ background: rgba(42, 91, 215, .10); border-color: rgba(42, 91, 215, .22); color: var(--text); } .alert-success{ background: rgba(31, 111, 91, .10); border-color: rgba(31, 111, 91, .22); color: var(--text); } .alert-danger{ background: rgba(139, 46, 58, .10); border-color: rgba(139, 46, 58, .22); color: var(--text); } .alert-warning{ background: rgba(138, 106, 28, .10); border-color: rgba(138, 106, 28, .22); color: var(--text); } .alert-info{ background: rgba(43, 95, 154, .10); border-color: rgba(43, 95, 154, .22); color: var(--text); } /* -------------------------- 10) Modals (premium) -------------------------- */ .modal-content{ border-radius: var(--r-lg); border: 1px solid var(--border-2); box-shadow: var(--shadow-3); background: var(--surface); } .modal-header{ border-bottom: 1px solid var(--border-2); } .modal-footer{ border-top: 1px solid var(--border-2); } /* Backdrop stays Bootstrap-controlled; we just ensure content readability */ [data-bs-theme="dark"] .modal-content{ background: rgba(16, 26, 45, .96); } /* -------------------------- 11) Chart containers (canvas / Chart.js) -------------------------- */ canvas{ background: var(--chart-bg); border-radius: var(--r-lg); border: 1px solid var(--border-2); box-shadow: var(--shadow-2); } /* -------------------------- 12) Utility classes (optional) -------------------------- */ .panel-section{ background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--sp-4); } .soft-shadow{ box-shadow: var(--shadow-2); } .chip{ display: inline-flex; align-items: center; gap: .45rem; padding: .30rem .60rem; border-radius: 999px; border: 1px solid var(--border-2); background: rgba(100,116,139,.08); color: var(--text-2); font-weight: 700; font-size: .85rem; } [data-bs-theme="dark"] .chip{ background: rgba(255,255,255,.08); color: rgba(230,237,247,.90); } .metric{ display: grid; gap: .25rem; } .metric .label{ font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 800; } .metric .value{ font-size: 1.15rem; font-weight: 850; color: var(--text); } /* Subtle glass card (use sparingly) */ .glass{ background: rgba(255,255,255,.70); backdrop-filter: blur(10px); } [data-bs-theme="dark"] .glass{ background: rgba(16,26,45,.75); } /* -------------------------- 13) Bootstrap utility patches (safe) -------------------------- */ .border{ border-color: var(--border-2) !important; } .bg-light{ background-color: var(--bg-soft) !important; } .bg-white{ background-color: var(--surface) !important; } .text-body-secondary{ color: var(--muted) !important; } /* -------------------------- 14) Mobile adjustments -------------------------- */ @media (max-width: 768px){ html{ font-size: 15px; } main{ padding: var(--sp-3) 0 var(--sp-5); } .card .card-header{ padding: var(--sp-3) var(--sp-3); } .card .card-body{ padding: var(--sp-3); } /* Keep controls comfortable on touch */ .form-control, .form-select, .input-group-text{ min-height: 46px; } .btn{ min-height: 44px; } /* Tables: encourage horizontal scroll in wrappers */ .table-responsive{ border-radius: var(--r-sm); } }