refact css sytem
This commit is contained in:
KS Jannette
@@ -1,5 +1,43 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||
|
||||
:root {
|
||||
--color-primary: #0066cc;
|
||||
--color-primary-hover: #0077ee;
|
||||
--color-brand: #e62525;
|
||||
--color-success: #28a745;
|
||||
--color-success-text: #00ff00;
|
||||
--color-success-bg: #00ff0020;
|
||||
--color-success-border: #00ff00;
|
||||
--color-error: #ff6666;
|
||||
--color-error-bg: #ff000020;
|
||||
--color-error-border: #ff0000;
|
||||
--color-warning: #ffcc44;
|
||||
--color-warning-bg: #3a2e00;
|
||||
--color-warning-border: #aa7700;
|
||||
--color-danger: #cc6666;
|
||||
--color-danger-border: #884444;
|
||||
|
||||
--color-bg: #1a1a1a;
|
||||
--color-bg-elevated: #242424;
|
||||
--color-bg-card: #333;
|
||||
--color-bg-section: #2a2a2a;
|
||||
|
||||
--color-border: #444;
|
||||
--color-border-light: #333;
|
||||
--color-border-section: #3a3a3a;
|
||||
|
||||
--color-text: white;
|
||||
--color-text-muted: #b3b3b3;
|
||||
--color-text-dimmed: #808080;
|
||||
--color-text-subtle: #999;
|
||||
--color-text-label: #ccc;
|
||||
|
||||
--radius-sm: 3px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 6px;
|
||||
--radius-xl: 8px;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@@ -31,3 +69,256 @@ input, select, textarea, button {
|
||||
font-size: 1rem;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
/* ── Page Layouts ─────────────────────────────────────────── */
|
||||
|
||||
.page {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page--wide {
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
/* ── Cards & Sections ─────────────────────────────────────── */
|
||||
|
||||
.card {
|
||||
padding: 1rem;
|
||||
background-color: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-bg-section);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-border-section);
|
||||
}
|
||||
|
||||
/* ── Form Controls ────────────────────────────────────────── */
|
||||
|
||||
.form-field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-field--last {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-label);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
background-color: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
|
||||
}
|
||||
|
||||
.form-control--mono {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ── Buttons ──────────────────────────────────────────────── */
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn--success {
|
||||
background-color: var(--color-success);
|
||||
}
|
||||
|
||||
.btn--secondary {
|
||||
background-color: #6c757d;
|
||||
}
|
||||
|
||||
.btn--danger {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--color-danger-border);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.btn--ghost {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.btn--sm {
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.btn--lg {
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
/* ── Feedback Alerts ──────────────────────────────────────── */
|
||||
|
||||
.alert {
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.alert--error {
|
||||
background-color: var(--color-error-bg);
|
||||
border: 1px solid var(--color-error-border);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.alert--success {
|
||||
background-color: var(--color-success-bg);
|
||||
border: 1px solid var(--color-success-border);
|
||||
color: var(--color-success-text);
|
||||
}
|
||||
|
||||
.alert--warning {
|
||||
background-color: var(--color-warning-bg);
|
||||
border: 1px solid var(--color-warning-border);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
/* ── Lists ────────────────────────────────────────────────── */
|
||||
|
||||
.list-unstyled {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.list-item--card {
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--color-bg-card);
|
||||
}
|
||||
|
||||
/* ── Typography Helpers ───────────────────────────────────── */
|
||||
|
||||
.text-muted {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.text-dimmed {
|
||||
color: var(--color-text-dimmed);
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 1.035rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.978rem;
|
||||
}
|
||||
|
||||
.help-link {
|
||||
color: var(--color-primary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* ── Flex Utilities ───────────────────────────────────────── */
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex--between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex--center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex--column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex--wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.gap-xs {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-sm {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-md {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.gap-lg {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ── Spacing Helpers ──────────────────────────────────────── */
|
||||
|
||||
.mb-0 { margin-bottom: 0; }
|
||||
.mb-sm { margin-bottom: 0.5rem; }
|
||||
.mb-md { margin-bottom: 1rem; }
|
||||
.mb-lg { margin-bottom: 1.5rem; }
|
||||
.mb-xl { margin-bottom: 2rem; }
|
||||
.mt-0 { margin-top: 0; }
|
||||
.mt-md { margin-top: 1rem; }
|
||||
|
||||
.text-white { color: white; }
|
||||
.text-white-sm { color: white; font-size: 0.85rem; }
|
||||
|
||||
Reference in New Issue
Block a user