From 6eda7c9c6a2f2713803f7398a7ac0da8d1510f9b Mon Sep 17 00:00:00 2001 From: host Date: Sun, 9 Aug 2026 18:05:15 +0300 Subject: [PATCH] =?UTF-8?q?=D0=92=D0=BE=D1=81=D1=81=D1=82=D0=B0=D0=BD?= =?UTF-8?q?=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB?= =?UTF-8?q?=D0=B8=20=D0=B8=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D0=B0=20=D1=82=D1=91=D0=BC=D0=BD=D0=B0=D1=8F=20=D1=82?= =?UTF-8?q?=D0=B5=D0=BC=D0=B0=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D1=84=D0=B5?= =?UTF-8?q?=D0=B9=D1=81=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles.css | 218 ++++++++++++++++++---------------------- 1 file changed, 99 insertions(+), 119 deletions(-) diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 9f7fc91..9ce8936 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,145 +1,125 @@ -/* ============================================================ - Тёмная тема - ============================================================ */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --bg: #101217; --surface: #181b22; --surface-2: #222631; - --surface-hover: #292e3a; - + --surface-hover: #2b3140; --text: #f1f5f9; --text-muted: #a7b0c0; --text-dim: #70798a; - - --border: rgba(255, 255, 255, 0.10); - --border-soft: rgba(255, 255, 255, 0.07); - + --border: rgba(255,255,255,.10); + --border-soft: rgba(255,255,255,.07); --accent: #3b82f6; --accent-hover: #60a5fa; - --accent-soft: rgba(59, 130, 246, 0.18); - --accent-text: #ffffff; - + --accent-soft: rgba(59,130,246,.18); + --accent-text: #fff; --success: #34d399; - --success-soft: rgba(52, 211, 153, 0.16); + --success-soft: rgba(52,211,153,.16); --warn: #fbbf24; - --warn-soft: rgba(251, 191, 36, 0.16); + --warn-soft: rgba(251,191,36,.16); --danger: #f87171; - --danger-soft: rgba(248, 113, 113, 0.16); - - --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24); - --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.30); - --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.36); + --danger-soft: rgba(248,113,113,.16); + --shadow-xs: 0 1px 2px rgba(0,0,0,.25); + --shadow-sm: 0 2px 8px rgba(0,0,0,.24); + --shadow-md: 0 6px 16px rgba(0,0,0,.30); + --radius-sm: 6px; + --radius: 8px; + --radius-lg: 12px; + --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } -body { - background: var(--bg); - color: var(--text); -} +* { box-sizing: border-box; -webkit-font-smoothing: antialiased; } +html, body, #root { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.5; } +button, input, select, textarea { font: inherit; color: inherit; } +a { color: var(--accent); text-decoration: none; } +a:hover { color: var(--accent-hover); } -.sidebar, -.main { - background: var(--bg); -} +.shell { min-height: 100vh; display: flex; } +.sidebar { width: 240px; background: var(--surface); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; flex-shrink: 0; min-height: 100vh; position: sticky; top: 0; } +.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 22px 20px; border-bottom: 1px solid var(--border-soft); } +.sidebar-brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; } +.sidebar-brand-text { color: var(--text); font-weight: 600; } +.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; flex: 1; } +.sidebar-nav .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; } +.sidebar-nav .nav-link:hover { background: var(--surface-2); color: var(--text); } +.sidebar-nav .nav-link.active { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; } +.sidebar-footer { padding: 14px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; } +.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; min-width: 0; } +.sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; } +.sidebar-user-info { min-width: 0; flex: 1; } +.sidebar-user-email { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.sidebar-user-role, .page-sub, .field label, .instance-meta, .status-row { color: var(--text-muted); } +.btn-logout { width: 100%; background: transparent; color: var(--text-muted); border: 0; } -.sidebar { - border-right-color: var(--border-soft); -} +.main { flex: 1; min-width: 0; background: var(--bg); } +.container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 40px 32px 80px; } +.page-title { margin: 0 0 6px; color: var(--text); font-size: 28px; font-weight: 600; } +.dashboard-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; } -.sidebar-brand, -.sidebar-footer { - border-color: var(--border-soft); -} +.card, .stat-card, .instance-card, .empty-state { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } +.card { padding: 24px; } +.stat-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; } +.stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 16px; margin-bottom: 28px; } +.stat-card-icon { width: 42px; height: 42px; border-radius: var(--radius); background: var(--surface-2); display: grid; place-items: center; } +.stat-card-label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; } +.stat-card-value { color: var(--text); font-size: 24px; font-weight: 600; } -.sidebar-brand-text, -.sidebar-user-email, -.page-title, -.stat-card-value, -.os-name, -.instance-name, -.instance-name a, -.empty-title { - color: var(--text); -} +.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 500; box-shadow: var(--shadow-xs); transition: .15s; } +.btn:hover { background: var(--surface-hover); } +.btn:disabled { opacity: .5; cursor: not-allowed; } +.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } +.btn-primary:hover { background: var(--accent-hover); } +.btn-danger { background: var(--danger-soft); color: var(--danger); } +.btn-danger:hover { background: var(--danger); color: #fff; } +.btn-sm { padding: 6px 12px; font-size: 13px; } -.card, -.stat-card, -.instance-card, -.empty-state, -table.data-table { - background: var(--surface); - box-shadow: var(--shadow-sm); -} +.create-form { margin-bottom: 24px; } +.form-section { margin-bottom: 22px; } +.form-label { display: block; margin-bottom: 10px; color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; } +.form-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; } +.os-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 10px; } +.os-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-align: left; cursor: pointer; } +.os-card.active { background: var(--accent-soft); border-color: var(--accent); } +.os-card.disabled { opacity: .4; cursor: not-allowed; } +.os-name, .instance-name, .empty-title { color: var(--text); font-weight: 600; } +.os-desc { color: var(--text-muted); font-size: 12px; } +.preset-row { display: flex; gap: 12px; flex-wrap: wrap; } +.preset-select, .field input, .field select, .field textarea { width: 100%; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); } +.preset-select { flex: 1; min-width: 220px; } +.preset-buttons { display: flex; gap: 8px; } +.preset-btn { min-width: 60px; padding: 8px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; } +.preset-btn.active { background: var(--accent); border-color: var(--accent); } +.submit-btn { width: 100%; } +.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } +.field label { font-weight: 500; } +.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } -.field input, -.field select, -.field textarea, -.preset-select, -.os-card, -.preset-btn, -.btn { - background: var(--surface-2); - color: var(--text); - border-color: var(--border); -} +.error-box { margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); } +.success-box { margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radius); background: var(--success-soft); color: var(--success); } +.auth-wrap { max-width: 400px; margin: 100px auto; } +.auth-wrap .card { padding: 36px; } +.auth-wrap .btn { width: 100%; } -.field input:hover, -.field select:hover, -.field textarea:hover, -.os-card:hover:not(.disabled), -.preset-btn:hover:not(.disabled), -.btn:hover { - background: var(--surface-hover); -} +.instance-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(380px,1fr)); gap: 20px; } +.instance-card { padding: 22px; display: flex; flex-direction: column; gap: 14px; } +.instance-name { font-size: 17px; } +.instance-name a { color: var(--text); } +.instance-actions { display: flex; gap: 8px; flex-wrap: wrap; } +.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); } +.dot.running { background: var(--success); }.dot.error { background: var(--danger); }.dot.creating { background: var(--warn); } +.badge { padding: 3px 10px; border-radius: 99px; background: var(--surface-2); color: var(--text-muted); font-size: 12px; } +.empty-state { padding: 80px 20px; color: var(--text-muted); text-align: center; } +.empty-icon { font-size: 48px; }.empty-sub { color: var(--text-muted); } -.field input:focus, -.field select:focus, -.field textarea:focus { - background: var(--surface); -} +.nav-tabs { display: flex; gap: 8px; margin-bottom: 28px; }.nav-tab { padding: 10px 16px; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); }.nav-tab.active { background: var(--accent); color: #fff; } -table.data-table th { - background: var(--surface-2); - color: var(--text-muted); - border-bottom-color: var(--border); -} +table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } +table.data-table th, table.data-table td { padding: 14px 18px; text-align: left; } +table.data-table th { background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 12px; text-transform: uppercase; } +table.data-table td { border-bottom: 1px solid var(--border-soft); } table.data-table tr:last-child td { border-bottom: 0; } table.data-table tr:hover td { background: var(--surface-hover); } -table.data-table td { - border-bottom-color: var(--border-soft); -} +.metric { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }.metric-bar { width: 70px; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } +.template-results { display: grid; gap: 24px; margin-top: 18px; }.template-results h4 { color: var(--text); margin: 0 0 10px; }.template-form { margin: 24px 0 32px; }.template-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.muted { color: var(--text-muted); } -table.data-table tr:hover td { - background: var(--surface-hover); -} - -.template-results { - display: grid; - gap: 24px; - margin-top: 18px; -} - -.template-results section h4 { - color: var(--text); - margin: 0 0 10px; -} - -.template-form-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 16px; -} - -.template-form { - margin: 24px 0 32px; -} - -.muted { - color: var(--text-muted); -} - -@media (max-width: 768px) { - .template-form-grid { - grid-template-columns: 1fr; - } -} +@media (max-width: 768px) { .shell { flex-direction: column; }.sidebar { width: 100%; min-height: auto; position: relative; flex-direction: row; overflow-x: auto; }.sidebar-brand { display: none; }.sidebar-nav { flex-direction: row; }.sidebar-footer { flex-direction: row; border-top: 0; }.container { padding: 24px 20px 64px; }.form-row, .template-form-grid { grid-template-columns: 1fr; }.instance-grid { grid-template-columns: 1fr; }.page-title { font-size: 22px; } }