/* ============================================================================ DASHBOARD PAD — DESIGN SYSTEM Bahasa visual enterprise (terinspirasi Fluent / Carbon / Linear). Dipakai oleh halaman PHP maupun komponen React (island). Import di : ============================================================================ */ :root { /* ---------- Warna: Brand / Primary (Emerald khas logo Lombok Utara) ---------- */ --ds-primary-50: #eafaf1; --ds-primary-100: #d0f2df; --ds-primary-200: #a3e5c1; --ds-primary-300: #6dd3a0; --ds-primary-400: #38bd7e; --ds-primary-500: #16a563; --ds-primary-600: #0f8b52; /* aksi utama — hijau shield logo */ --ds-primary-700: #0c7043; --ds-primary-800: #0b5a37; --ds-primary-900: #094a2e; /* Aksen brand tambahan (dari logo) */ --ds-gold: #f5b301; --ds-gold-bg: #fff4d1; --ds-gold-fg: #8a6100; /* padi & bintang */ --ds-brand-red: #d81f26; /* atap & panji */ /* ---------- Warna semantik ---------- */ --ds-success: #16a34a; --ds-success-bg: #dcfce7; --ds-success-fg: #166534; --ds-warning: #d97706; --ds-warning-bg: #fef3c7; --ds-warning-fg: #92400e; --ds-danger: #dc2626; --ds-danger-bg: #fee2e2; --ds-danger-fg: #991b1b; --ds-info: #0891b2; --ds-info-bg: #cffafe; --ds-info-fg: #155e75; /* ---------- Netral (abu-abu) ---------- */ --ds-gray-50: #f8fafc; --ds-gray-100: #f1f5f9; --ds-gray-200: #e2e8f0; --ds-gray-300: #cbd5e1; --ds-gray-400: #94a3b8; --ds-gray-500: #64748b; --ds-gray-600: #475569; --ds-gray-700: #334155; --ds-gray-800: #1e293b; --ds-gray-900: #0f172a; /* ---------- Alias permukaan ---------- */ --ds-bg: #f6f8fb; /* latar aplikasi */ --ds-surface: #ffffff; /* kartu / panel */ --ds-surface-muted: var(--ds-gray-50); --ds-border: var(--ds-gray-200); --ds-text: var(--ds-gray-800); --ds-text-muted: var(--ds-gray-500); --ds-text-invert: #ffffff; /* ---------- Tipografi ---------- */ --ds-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --ds-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --ds-fs-xs: 0.75rem; --ds-fs-sm: 0.8125rem; --ds-fs-base: 0.875rem; --ds-fs-md: 1rem; --ds-fs-lg: 1.125rem; --ds-fs-xl: 1.375rem; --ds-fs-2xl: 1.75rem; --ds-fs-3xl: 2.25rem; --ds-fw-normal: 450; --ds-fw-medium: 550; --ds-fw-semibold: 650; --ds-fw-bold: 750; /* ---------- Spacing (grid 4px) ---------- */ --ds-1: 4px; --ds-2: 8px; --ds-3: 12px; --ds-4: 16px; --ds-5: 20px; --ds-6: 24px; --ds-8: 32px; --ds-10: 40px; --ds-12: 48px; /* ---------- Radius ---------- */ --ds-radius-sm: 6px; --ds-radius: 10px; --ds-radius-lg: 14px; --ds-radius-full: 999px; /* ---------- Shadow (halus, berlapis) ---------- */ --ds-shadow-xs: 0 1px 2px rgba(15,23,42,.06); --ds-shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --ds-shadow: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); --ds-shadow-lg: 0 12px 28px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06); /* ---------- Transisi ---------- */ --ds-ease: cubic-bezier(.4, 0, .2, 1); --ds-t-fast: 120ms var(--ds-ease); --ds-t: 200ms var(--ds-ease); } /* ============================================================================ TEMA GELAP — override permukaan/teks/border. Warna brand tetap. Diaktifkan lewat . ============================================================================ */ html[data-theme="dark"] { --ds-gray-50: #131c28; --ds-gray-100: #1a2536; --ds-gray-200: #24303f; --ds-gray-300: #33445a; --ds-gray-400: #6b83a0; --ds-gray-500: #8ea3bd; --ds-gray-600: #a9bcd3; --ds-gray-700: #c7d5e6; --ds-gray-800: #e7edf5; --ds-gray-900: #f3f7fc; --ds-bg: #0a1017; --ds-surface: #131c28; --ds-surface-muted: #0f1722; --ds-border: #24303f; --ds-text: #e7edf5; --ds-text-muted: #93a4bb; --ds-shadow-xs: 0 1px 2px rgba(0,0,0,.5); --ds-shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --ds-shadow: 0 6px 20px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4); --ds-shadow-lg: 0 16px 36px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.5); --ds-success-bg: rgba(52,211,153,.15); --ds-success-fg:#6ee7b7; --ds-warning-bg: rgba(251,191,36,.15); --ds-warning-fg:#fcd34d; --ds-danger-bg: rgba(248,113,113,.15); --ds-danger-fg:#fca5a5; --ds-info-bg: rgba(34,211,238,.15); --ds-info-fg:#67e8f9; --ds-gold-bg: rgba(245,179,1,.15); --ds-gold-fg:#fcd34d; } /* ============================================================================ BASE ============================================================================ */ .ds-scope, [data-island] { font-family: var(--ds-font); color: var(--ds-text); font-size: var(--ds-fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; } .ds-scope *, [data-island] * { box-sizing: border-box; } /* Utility ringkas */ .ds-muted { color: var(--ds-text-muted); } .ds-mono { font-family: var(--ds-font-mono); } .ds-grid { display: grid; gap: var(--ds-4); } .ds-flex { display: flex; gap: var(--ds-3); align-items: center; } /* ============================================================================ BUTTON ============================================================================ */ .ds-btn { --_bg: linear-gradient(180deg, var(--ds-primary-500), var(--ds-primary-700)); --_fg: #fff; --_bd: transparent; --_glow: rgba(15,139,82,.4); display: inline-flex; align-items: center; gap: var(--ds-2); padding: 10px 18px; border: 1px solid var(--_bd); border-radius: var(--ds-radius); background: var(--_bg); color: var(--_fg); font: inherit; font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-base); cursor: pointer; white-space: nowrap; user-select: none; position: relative; overflow: hidden; box-shadow: 0 6px 16px var(--_glow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.14); transition: transform var(--ds-t-fast), box-shadow var(--ds-t), filter var(--ds-t-fast); } .ds-btn::after { /* kilau melintas */ content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); transition: left .6s var(--ds-ease); } .ds-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 24px var(--_glow), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.14); } .ds-btn:hover::after { left: 130%; } .ds-btn:active { transform: translateY(1px); box-shadow: 0 4px 10px var(--_glow), inset 0 -2px 0 rgba(0,0,0,.14); } .ds-btn:focus-visible { outline: 2px solid var(--ds-primary-400); outline-offset: 2px; } .ds-btn:disabled { opacity: .55; cursor: not-allowed; } .ds-btn--secondary { --_bg: var(--ds-surface); --_fg: var(--ds-gray-700); --_bd: var(--ds-border); --_glow: rgba(15,23,42,.10); box-shadow: var(--ds-shadow-sm); } .ds-btn--ghost { --_bg: transparent; --_fg: var(--ds-gray-700); --_bd: transparent; --_glow: transparent; box-shadow: none; } .ds-btn--danger { --_bg: linear-gradient(180deg,#ef4444,#b91c1c); --_glow: rgba(220,38,38,.4); } .ds-btn--success { --_bg: linear-gradient(180deg,#22c55e,#15803d); --_glow: rgba(22,163,74,.4); } .ds-btn--gold { --_bg: linear-gradient(180deg,#fbbf24,#d97706); --_fg:#3a2a00; --_glow: rgba(245,179,1,.4); } .ds-btn--sm { padding: 7px 13px; font-size: var(--ds-fs-sm); } .ds-btn--lg { padding: 13px 24px; font-size: var(--ds-fs-md); } /* ============================================================================ CARD ============================================================================ */ .ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); transition: box-shadow var(--ds-t), transform var(--ds-t); } .ds-card:hover { box-shadow: var(--ds-shadow); } .ds-card__body { padding: var(--ds-6); } .ds-card__head { padding: var(--ds-4) var(--ds-6); border-bottom: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: space-between; } .ds-card__title { font-size: var(--ds-fs-md); font-weight: var(--ds-fw-semibold); } /* ============================================================================ BADGE ============================================================================ */ .ds-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--ds-radius-full); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); line-height: 1.6; background: var(--ds-gray-100); color: var(--ds-gray-700); } .ds-badge--success { background: var(--ds-success-bg); color: var(--ds-success-fg); } .ds-badge--warning { background: var(--ds-warning-bg); color: var(--ds-warning-fg); } .ds-badge--danger { background: var(--ds-danger-bg); color: var(--ds-danger-fg); } .ds-badge--info { background: var(--ds-info-bg); color: var(--ds-info-fg); } .ds-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ============================================================================ TABLE (enterprise: sticky header, zebra, hover) ============================================================================ */ .ds-table-wrap { overflow: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); } .ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-base); } .ds-table thead th { position: sticky; top: 0; z-index: 1; background: var(--ds-gray-50); color: var(--ds-gray-600); font-weight: var(--ds-fw-semibold); text-align: left; font-size: var(--ds-fs-xs); letter-spacing: .03em; text-transform: uppercase; padding: var(--ds-3) var(--ds-4); border-bottom: 1px solid var(--ds-border); white-space: nowrap; } .ds-table tbody td { padding: var(--ds-3) var(--ds-4); border-bottom: 1px solid var(--ds-gray-100); } .ds-table tbody tr:nth-child(even) { background: var(--ds-gray-50); } .ds-table tbody tr:hover { background: var(--ds-primary-50); } .ds-table--num td, .ds-table--num th { text-align: right; font-variant-numeric: tabular-nums; } /* ============================================================================ PROGRESS BAR ============================================================================ */ .ds-progress { height: 8px; border-radius: var(--ds-radius-full); background: var(--ds-gray-200); overflow: hidden; } .ds-progress__fill { height: 100%; border-radius: inherit; background: var(--ds-primary-600); transition: width var(--ds-t); } /* ============================================================================ FORM ============================================================================ */ .ds-label { display: block; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); color: var(--ds-gray-700); margin-bottom: 6px; } .ds-input, .ds-select, .ds-textarea { width: 100%; padding: 9px 12px; font: inherit; font-size: var(--ds-fs-base); color: var(--ds-text); background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-t-fast), box-shadow var(--ds-t-fast); } .ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; border-color: var(--ds-primary-500); box-shadow: 0 0 0 3px var(--ds-primary-100); } .ds-help { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); margin-top: 5px; } /* ============================================================================ SKELETON (loading state) ============================================================================ */ .ds-skeleton { background: linear-gradient(90deg, var(--ds-gray-100) 25%, var(--ds-gray-200) 37%, var(--ds-gray-100) 63%); background-size: 400% 100%; border-radius: var(--ds-radius-sm); animation: ds-shimmer 1.4s ease infinite; } @keyframes ds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }