/* * MekaPos UI Design Tokens — Admin Theme * Version: 3.0 (2026-06) * * Digunakan oleh: admin.html, register.html, order.html, recruit.html * Font wajib di : * */ /* ═══════════════════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════════════════ */ :root { /* ── Surfaces ── */ --bg: #FFFFFF; --bg2: #FFFFFF; --bg-sub: #F8FAFC; /* tabel header, btn hover */ /* ── Brand ── */ --accent: #47A882; --accent2: #72C4A6; --accent3: #EDF7F3; /* accent bg light */ /* ── Status: Green ── */ --green: #47A882; --green-bg: #DCFCE7; --green-dk: #166534; /* ── Status: Red ── */ --red: #EF4444; --red-bg: #FEE2E2; --red-dk: #991B1B; /* ── Status: Amber ── */ --amber: #D97706; --amber-bg: #FEF3C7; --amber-dk: #78350F; /* ── Status: Blue ── */ --blue: #2563EB; --blue-bg: #EFF6FF; --blue-dk: #1E40AF; /* ── Text — semua pass 4.5:1 pada bg putih ── */ --txt: #111827; /* 16.1:1 */ --txt2: #4B5563; /* 7.2:1 */ --txt3: #6B7280; /* 4.6:1 */ /* ── Borders ── */ --brd: #E8EAED; --brd2: #D1D5DB; /* ── Radius ── */ --radius: 8px; --radius-lg:12px; /* ── Spacing (4pt grid) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; /* ── Typography ── */ --font: 'Plus Jakarta Sans', system-ui, sans-serif; } /* ═══════════════════════════════════════════════════ BASE RESET ═══════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--txt); -webkit-font-smoothing: antialiased; line-height: 1.5; } button, input, select, textarea { font-family: inherit; } img, svg { display: block; } /* ── Focus ring (a11y) ── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ═══════════════════════════════════════════════════ TYPOGRAPHY SCALE ═══════════════════════════════════════════════════ */ .text-xs { font-size: 11px; line-height: 1.4; } .text-sm { font-size: 12px; line-height: 1.4; } .text-base { font-size: 14px; line-height: 1.5; } .text-lg { font-size: 16px; line-height: 1.5; } .text-xl { font-size: 18px; line-height: 1.4; } .text-2xl { font-size: 24px; line-height: 1.3; } .text-muted { color: var(--txt2); } .text-faint { color: var(--txt3); } .font-medium { font-weight: 500; } .font-semi { font-weight: 600; } .font-bold { font-weight: 700; } .font-black { font-weight: 800; } /* ═══════════════════════════════════════════════════ FORM COMPONENTS ═══════════════════════════════════════════════════ */ .form-group { margin-bottom: var(--sp-3); } .form-lbl { display: block; font-size: 11px; font-weight: 700; color: var(--txt2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em; } .fi { width: 100%; padding: 9px var(--sp-3); border: 1.5px solid var(--brd2); border-radius: var(--radius); font-size: 14px; font-family: var(--font); color: var(--txt); background: var(--bg2); outline: none; transition: border-color .15s, box-shadow .15s; } @media (max-width: 768px) { .fi { font-size: 16px; } } .fi:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(71,168,130,.12); } .fi:disabled{ opacity: .5; cursor: not-allowed; background: var(--bg-sub); } textarea.fi { resize: vertical; min-height: 72px; } .frow { display: flex; gap: var(--sp-3); } .frow .form-group { flex: 1; } /* ═══════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); border: 1.5px solid var(--brd2); background: var(--bg2); font-size: 13px; font-family: var(--font); font-weight: 600; color: var(--txt); cursor: pointer; min-height: 36px; transition: background .15s, border-color .15s, opacity .15s; text-decoration: none; } .btn:hover { background: var(--bg-sub); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { opacity: .87; background: var(--accent); } .btn-green { background: var(--green); color: #fff; border-color: var(--green); } .btn-red { background: var(--red); color: #fff; border-color: var(--red); } .btn-sm { padding: 5px var(--sp-3); font-size: 12px; border-radius: 6px; min-height: 30px; } .btn-lg { padding: 11px var(--sp-5); font-size: 14px; min-height: 44px; } .btn:disabled { opacity: .45; cursor: not-allowed; } /* ═══════════════════════════════════════════════════ BADGES ═══════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; } .badge-green { background: var(--green-bg); color: var(--green-dk); } .badge-red { background: var(--red-bg); color: var(--red-dk); } .badge-amber { background: var(--amber-bg); color: var(--amber-dk); } .badge-blue { background: var(--blue-bg); color: var(--blue-dk); } .badge-gray { background: var(--bg-sub); color: var(--txt2); border: 1px solid var(--brd); } /* ═══════════════════════════════════════════════════ CARD ═══════════════════════════════════════════════════ */ .card { background: var(--bg2); border-radius: var(--radius-lg); padding: var(--sp-5); border: 1px solid var(--brd); transition: box-shadow .15s; } .card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); } .card-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); } .card-title { font-size: 14px; font-weight: 600; color: var(--txt); } /* ═══════════════════════════════════════════════════ TABLE ═══════════════════════════════════════════════════ */ .tbl-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--brd); } .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { text-align: left; padding: 10px 12px; background: var(--bg-sub); border-bottom: 2px solid var(--brd); font-weight: 700; font-size: 11px; color: var(--txt2); text-transform: uppercase; letter-spacing: .5px; } .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--brd); vertical-align: middle; } .tbl tr:hover td { background: #F8FAFC; } /* ═══════════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════════ */ .modal-wrap { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 500; align-items: center; justify-content: center; } .modal-wrap.open { display: flex; } .modal { background: var(--bg2); border-radius: var(--radius-lg); padding: var(--sp-6); width: 500px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 48px rgba(0,0,0,.18); } .modal h3 { font-size: 16px; font-weight: 800; margin-bottom: var(--sp-3); } /* ═══════════════════════════════════════════════════ TOAST ═══════════════════════════════════════════════════ */ .toast { position: fixed; bottom: var(--sp-6); right: var(--sp-6); background: #111827; color: #fff; padding: 10px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; z-index: 9999; opacity: 0; transform: translateY(10px); transition: all .25s; pointer-events: none; } .toast.show { opacity: 1; transform: translateY(0); } /* ═══════════════════════════════════════════════════ GRID HELPERS ═══════════════════════════════════════════════════ */ .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); } .g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); } .g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); } @media (max-width: 640px) { .g2,.g3,.g4 { grid-template-columns: 1fr; } } @media (max-width: 768px) { .g3,.g4 { grid-template-columns: 1fr 1fr; } }