This commit is contained in:
104
backlogger/static/backlogger/style.css
Normal file
104
backlogger/static/backlogger/style.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user