separate css into separate file
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed

This commit is contained in:
2026-04-02 23:20:44 +03:00
parent 13ace49e71
commit 65e029a417
10 changed files with 428 additions and 854 deletions

View File

@@ -0,0 +1,104 @@
/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Base ──────────────────────────────────────────────────────── */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #0f172a;
color: #e2e8f0;
min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
/* ── Site header ───────────────────────────────────────────────── */
.site-header {
background: #0a0f1e;
border-bottom: 1px solid #1e293b;
padding: 0.75rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
.site-header nav { display: flex; gap: 1.5rem; align-items: center; }
.site-header nav a { color: #64748b; font-size: 0.85rem; }
.site-header nav a:hover { color: #e2e8f0; }
/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
display: inline-block;
padding: 0.45rem 1rem;
border-radius: 6px;
font-size: 0.85rem;
cursor: pointer;
border: none;
transition: opacity 0.15s;
font-family: inherit;
}
.btn:hover { opacity: 0.85; }
.btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
.btn-danger { background: transparent; color: #f87171; border: 1px solid #f87171; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-danger:hover { background: #f87171; color: #0f172a; opacity: 1; }
.btn-done { background: transparent; color: #34d399; border: 1px solid #34d399; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-done:hover { background: #34d399; color: #0f172a; opacity: 1; }
.btn-abandon { background: transparent; color: #fb923c; border: 1px solid #fb923c; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-abandon:hover { background: #fb923c; color: #0f172a; opacity: 1; }
.btn-ghost { background: transparent; color: #64748b; border: 1px solid #334155; }
.btn-ghost:hover { color: #e2e8f0; opacity: 1; }
.btn-text { background: none; border: none; color: #64748b; font-size: 0.8rem; cursor: pointer; font-family: inherit; padding: 0; }
.btn-text:hover { color: #e2e8f0; }
/* ── Form fields ───────────────────────────────────────────────── */
.field { margin-bottom: 1.1rem; }
.field label {
display: block;
font-size: 0.78rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.4rem;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field select {
width: 100%;
background: #1e293b;
border: 1px solid #334155;
border-radius: 6px;
color: #e2e8f0;
padding: 0.6rem 0.75rem;
font-size: 0.9rem;
font-family: inherit;
}
.field input:focus,
.field select:focus { outline: none; border-color: #38bdf8; }
/* ── Errors ────────────────────────────────────────────────────── */
.errorlist { list-style: none; color: #f87171; font-size: 0.8rem; margin-top: 0.3rem; }
.error-banner {
background: #450a0a;
border: 1px solid #f87171;
border-radius: 8px;
color: #fca5a5;
padding: 0.85rem 1.1rem;
margin-bottom: 1.5rem;
}
/* ── Light theme ───────────────────────────────────────────────── */
body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
body[data-theme="light"] .site-header { background: #ffffff; border-color: #e2e8f0; }
body[data-theme="light"] .site-header .brand { color: #0284c7; }
body[data-theme="light"] .site-header nav a { color: #64748b; }
body[data-theme="light"] .btn-primary { background: #0284c7; }
body[data-theme="light"] .btn-outline { color: #64748b; border-color: #cbd5e1; }
body[data-theme="light"] .field input[type="text"],
body[data-theme="light"] .field input[type="number"],
body[data-theme="light"] .field input[type="password"],
body[data-theme="light"] .field select {
background: #f1f5f9;
color: #0f172a;
border-color: #cbd5e1;
}