diff --git a/admin-panel/src/styles.css b/admin-panel/src/styles.css index fbf6838..2b28582 100644 --- a/admin-panel/src/styles.css +++ b/admin-panel/src/styles.css @@ -1,48 +1,76 @@ :root { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - color: #172033; - background: #f3f6fb; + color: #f3f7ff; + background: #0b1220; } -* { box-sizing: border-box; } +* { + box-sizing: border-box; +} -body { margin: 0; } +html, +body, +#root { + margin: 0; + min-height: 100%; + background: + radial-gradient(circle at top left, rgba(79,107,255,.18), transparent 28%), + radial-gradient(circle at bottom right, rgba(0,201,167,.12), transparent 24%), + #0b1220; +} + +body { + color: #f3f7ff; +} .page { min-height: 100vh; - padding: 40px; + padding: 28px; +} + +.hero, +.panel, +.stat-card { + background: rgba(16, 24, 40, 0.88); + border: 1px solid rgba(255,255,255,.06); + backdrop-filter: blur(18px); + box-shadow: 0 20px 60px rgba(0,0,0,.32); } .hero { display: flex; - align-items: center; + align-items: flex-start; justify-content: space-between; gap: 24px; padding: 32px; - border-radius: 28px; - background: white; - box-shadow: 0 20px 50px rgba(20, 40, 80, 0.08); + border-radius: 30px; } .eyebrow { margin: 0 0 8px; - color: #4f6bff; - font-weight: 700; - letter-spacing: 0.04em; + color: #7f97ff; text-transform: uppercase; - font-size: 12px; + letter-spacing: .12em; + font-size: 11px; + font-weight: 800; } h1 { margin: 0; - font-size: clamp(32px, 6vw, 56px); - line-height: 1; + font-size: clamp(36px, 6vw, 62px); + line-height: .92; +} + +h2 { + margin: 0; + font-size: 20px; } .lead { - max-width: 780px; - color: #5d6b82; - font-size: 18px; + max-width: 820px; + margin-top: 16px; + color: #9fb0cf; + line-height: 1.7; } .button { @@ -50,40 +78,235 @@ h1 { align-items: center; gap: 10px; border: 0; - padding: 14px 18px; - border-radius: 16px; - background: #172033; + border-radius: 18px; + padding: 14px 20px; + background: linear-gradient(135deg, #4f6bff, #6f86ff); color: white; - font-weight: 700; + font-size: 14px; + font-weight: 800; cursor: pointer; } -.button:disabled { opacity: 0.6; cursor: wait; } +.button:disabled { + opacity: .7; + cursor: wait; +} -.grid { +.spin { + animation: spin 1s linear infinite; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.status-row { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 18px; +} + +.status-pill { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 14px; + border-radius: 999px; + font-size: 13px; + font-weight: 700; +} + +.status-pill.ok { + background: rgba(0, 201, 167, .14); + color: #62f5cf; +} + +.status-pill.bad { + background: rgba(255, 85, 85, .12); + color: #ff8b8b; +} + +.status-pill.muted { + background: rgba(255,255,255,.06); + color: #a9b5cb; +} + +.alert { + margin-top: 18px; + padding: 16px 18px; + border-radius: 18px; + background: rgba(255, 85, 85, .12); + border: 1px solid rgba(255,85,85,.22); + color: #ff9d9d; +} + +.stats-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 20px; - margin-top: 20px; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 18px; + margin-top: 22px; } -.card { - padding: 24px; +.stat-card { + display: flex; + align-items: center; + gap: 14px; + padding: 22px; border-radius: 24px; - background: white; - box-shadow: 0 16px 40px rgba(20, 40, 80, 0.06); } -.card svg { color: #4f6bff; } +.stat-card p { + margin: 0 0 6px; + color: #95a6c7; + font-size: 13px; +} -.card h2 { margin: 14px 0 8px; } +.stat-card strong { + font-size: 30px; +} -.card p { color: #5d6b82; } +.stat-icon { + width: 48px; + height: 48px; + border-radius: 16px; + display: grid; + place-items: center; + background: linear-gradient(135deg, rgba(79,107,255,.25), rgba(0,201,167,.18)); + color: #90a5ff; +} -pre { - overflow: auto; - padding: 12px; +.content-grid { + display: grid; + grid-template-columns: minmax(0, 2fr) minmax(320px, 420px); + gap: 20px; + margin-top: 22px; +} + +.panel { + border-radius: 28px; + padding: 24px; +} + +.panel-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + margin-bottom: 20px; +} + +.counter { + display: inline-grid; + place-items: center; + min-width: 42px; + height: 42px; border-radius: 14px; - background: #f3f6fb; + background: rgba(79,107,255,.18); + color: #9db0ff; + font-weight: 800; +} + +.message-list { + display: flex; + flex-direction: column; + gap: 14px; +} + +.message-item { + padding: 18px; + border-radius: 22px; + background: rgba(255,255,255,.04); + border: 1px solid rgba(255,255,255,.05); +} + +.message-meta, +.message-item footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.message-meta span, +.message-item footer { + color: #8ea0c0; font-size: 12px; } + +.message-item p { + margin: 14px 0; + line-height: 1.6; + color: #eef4ff; +} + +.side-stack { + display: flex; + flex-direction: column; + gap: 20px; +} + +.compact-panel { + display: flex; + flex-direction: column; + gap: 14px; +} + +.compact-panel svg { + color: #88a0ff; +} + +.compact-panel p { + margin: 0; + color: #9fb0cf; + line-height: 1.7; +} + +.code-panel pre { + margin: 0; + overflow: auto; + border-radius: 18px; + background: rgba(0,0,0,.28); + padding: 16px; + color: #cde1ff; + font-size: 12px; +} + +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + gap: 12px; + padding: 60px 20px; + color: #9fb0cf; +} + +@media (max-width: 1080px) { + .content-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 720px) { + .page { + padding: 16px; + } + + .hero { + flex-direction: column; + align-items: stretch; + padding: 22px; + } + + h1 { + font-size: 42px; + } + + .panel, + .stat-card { + border-radius: 22px; + } +}