/* ========================================================================== TEMA "RETRO SKETCH" — grayscale, gaya mockup gambar tangan. Aktif bila (diatur dari Identitas Perusahaan). Dua alat utamanya: 1. border-radius asimetris -> garis tepi tampak digambar tangan, bukan lurus 2. box-shadow offset tegas -> kesan coretan pena/bayangan kertas Warna dibuang seluruhnya: semua token diganti abu, gambar & grafik di-grayscale lewat filter sehingga logo dan Chart.js ikut senada tanpa perlu mengubah kodenya. Filter sengaja dipasang pada elemennya sendiri (img/canvas), BUKAN pada pembungkus, sebab filter pada leluhur membuat elemen position:fixed (modal Bootstrap) berpindah acuan dan tampil melenceng. ========================================================================== */ .theme-sketch { --brand: #3d3d3d; --brand-dark: #1f1f1f; --brand-light: #6b6b6b; --brand-soft: rgba(0, 0, 0, .06); --app-bg: #f4f2ee; /* kertas sedikit hangat */ --surface: #fffdf9; --surface-2: #f0ede7; --border: #2b2b2b; /* garis pensil tebal */ --ink: #1c1c1c; --muted: #6f6f6f; --sidebar-bg: #ffffff; /* sidebar ikut kertas, bukan blok gelap */ --sidebar-ink: #2b2b2b; --topbar-bg: #fffdf9; --shadow: 2px 2px 0 #2b2b2b; --shadow-lg: 4px 4px 0 #2b2b2b; --sk-on-ink: #fffdf9; /* teks di atas isian tinta */ --sk-wobble: 255px 15px 225px 15px / 15px 225px 15px 255px; --sk-wobble-2: 15px 225px 15px 255px / 255px 15px 225px 15px; font-family: "Architects Daughter", "Comic Sans MS", cursive; /* Kertas bergaris kotak samar — penanda bahwa ini mockup, bukan produk jadi */ background-color: var(--app-bg); background-image: linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 24px 24px; } /* Mode gelap = papan tulis: kapur di atas blackboard. Tetap grayscale, tetap sketsa — bukan sekadar tema terang yang digelapkan. Peran warna dibalik: garis & teks jadi kapur terang, bidang jadi papan gelap. */ [data-bs-theme="dark"] .theme-sketch { --app-bg: #1b1b1b; --surface: #242424; --surface-2: #2e2e2e; --border: #d9d6cf; /* goresan kapur */ --ink: #f1efe8; --muted: #a8a49c; --sk-on-ink: #1b1b1b; /* teks di atas isian kapur */ --sidebar-bg: #161616; --sidebar-ink: #ece9e2; --topbar-bg: #1f1f1f; --shadow: 2px 2px 0 #d9d6cf; --shadow-lg: 4px 4px 0 #d9d6cf; --brand: #d9d6cf; /* Tautan, tag aset, dan nomor halaman memakai --brand-dark; di papan tulis nilainya harus kapur, bukan tinta — kalau tidak, gelap di atas gelap. */ --brand-dark: #ece9e2; --brand-light: #cfccc4; --brand-soft: rgba(255, 255, 255, .08); --brand-solid: #f1efe8; --brand-solid-hover: #ffffff; --brand-solid-ink: #1b1b1b; --accent-warn: #f1efe8; background-color: #1b1b1b; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 24px 24px; } /* Bidang gelap Bootstrap ikut papan, bukan biru tua bawaan tema gelap. */ [data-bs-theme="dark"] .theme-sketch .card, [data-bs-theme="dark"] .theme-sketch .modal-content, [data-bs-theme="dark"] .theme-sketch .login-card { background: var(--surface); } [data-bs-theme="dark"] .theme-sketch .form-control, [data-bs-theme="dark"] .theme-sketch .form-select { background: var(--surface-2); color: var(--ink); } [data-bs-theme="dark"] .theme-sketch .input-group-text { background: var(--surface-2); color: var(--ink); } /* Gambar dibalik terang-gelapnya agar guratan hitam tetap terbaca di papan. */ [data-bs-theme="dark"] .theme-sketch img, [data-bs-theme="dark"] .theme-sketch canvas { filter: grayscale(1) invert(1) contrast(1.05); } [data-bs-theme="dark"] .theme-sketch .login-wrap { background-color: #1b1b1b; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); } .theme-sketch, .theme-sketch .sidebar, .theme-sketch .topbar, .theme-sketch .card, .theme-sketch .btn, .theme-sketch .badge, .theme-sketch h1, .theme-sketch h2, .theme-sketch h3, .theme-sketch h4, .theme-sketch h5, .theme-sketch h6 { font-family: "Architects Daughter", "Comic Sans MS", cursive; } /* Isian yang diketik tetap huruf biasa — mengetik di atas huruf tangan menyulitkan membaca angka rupiah dan nomor seri. */ .theme-sketch input, .theme-sketch textarea, .theme-sketch select, .theme-sketch .form-control, .theme-sketch .form-select, .theme-sketch code, .theme-sketch pre, .theme-sketch .asset-tag { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; } /* Semua gambar & grafik jadi abu — logo, foto aset, kanvas Chart.js. */ .theme-sketch img, .theme-sketch canvas, .theme-sketch svg { filter: grayscale(1) contrast(1.05); } /* ------------------------------------------------------------- KERANGKA */ .theme-sketch .sidebar { border-right: 2px solid var(--border); box-shadow: none; } .theme-sketch .sidebar-brand { border-bottom: 2px dashed var(--border); } .theme-sketch .brand-fallback { color: var(--ink); } .theme-sketch .sidebar-nav a { color: var(--ink); border: 2px solid transparent; border-radius: var(--sk-wobble); } .theme-sketch .sidebar-nav a:hover { border-color: var(--border); background: var(--brand-soft); } .theme-sketch .sidebar-nav a.active { background: var(--ink); color: var(--sk-on-ink); border-color: var(--border); box-shadow: var(--shadow); } .theme-sketch .nav-section { color: var(--muted); border-bottom: 1px dashed var(--border); } .theme-sketch .sidebar-nav a .nav-count { background: var(--ink); color: var(--sk-on-ink); border-radius: 999px; } .theme-sketch .sidebar-footer { border-top: 2px dashed var(--border); } .theme-sketch .topbar { border-bottom: 2px solid var(--border); box-shadow: none; } /* --------------------------------------------------------------- KARTU */ .theme-sketch .card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--sk-wobble); box-shadow: var(--shadow); } .theme-sketch .card:nth-of-type(even) { border-radius: var(--sk-wobble-2); } .theme-sketch .card-header { background: transparent; border-bottom: 2px dashed var(--border); font-weight: 700; } .theme-sketch .card-footer { background: transparent; border-top: 2px dashed var(--border); } .theme-sketch .stat-card { border-radius: var(--sk-wobble); } .theme-sketch .stat-card .stat-icon { background: var(--surface-2) !important; color: var(--ink) !important; border: 2px solid var(--border); border-radius: var(--sk-wobble-2); } /* -------------------------------------------------------------- TOMBOL */ .theme-sketch .btn { border: 2px solid var(--border); border-radius: var(--sk-wobble); box-shadow: var(--shadow); font-weight: 700; transition: transform .06s ease, box-shadow .06s ease; } .theme-sketch .btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--border); } .theme-sketch .btn:active { transform: translate(2px, 2px); box-shadow: none; } .theme-sketch .btn-primary, .theme-sketch .btn-success, .theme-sketch .btn-warning, .theme-sketch .btn-info, .theme-sketch .btn-danger, .theme-sketch .btn-secondary, .theme-sketch .btn-dark { background: var(--ink); border-color: var(--border); color: var(--sk-on-ink); } .theme-sketch .btn-light, .theme-sketch .btn-outline-secondary, .theme-sketch .btn-outline-primary, .theme-sketch .btn-outline-danger, .theme-sketch .btn-outline-warning, .theme-sketch .btn-outline-info, .theme-sketch .btn-outline-success { background: var(--surface); border-color: var(--border); color: var(--ink); } /* Tombol merusak tetap dibedakan — lewat garis putus-putus, bukan warna. */ .theme-sketch .btn-outline-danger, .theme-sketch .btn-danger { border-style: dashed; } /* --------------------------------------------------------------- BADGE */ .theme-sketch .badge { border: 2px solid var(--border); border-radius: var(--sk-wobble-2); background: var(--surface) !important; color: var(--ink) !important; font-weight: 700; box-shadow: 1px 1px 0 var(--border); } /* Status dibedakan lewat isian, bukan warna: gelap = perlu perhatian. */ .theme-sketch .badge.text-bg-success, .theme-sketch .badge.text-bg-dark, .theme-sketch .badge.text-bg-primary { background: var(--ink) !important; color: var(--sk-on-ink) !important; } .theme-sketch .badge.text-bg-warning, .theme-sketch .badge.text-bg-info { background: repeating-linear-gradient( 45deg, #e6e2da, #e6e2da 4px, #fffdf9 4px, #fffdf9 8px) !important; } .theme-sketch .badge.text-bg-danger { border-style: dashed; border-width: 2px; } /* --------------------------------------------------------------- TABEL */ .theme-sketch .table { --bs-table-bg: transparent; } .theme-sketch .table > thead th { border-bottom: 2px solid var(--border); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); } .theme-sketch .table > tbody td { border-bottom: 1px dashed rgba(43, 43, 43, .35); } .theme-sketch .table-hover > tbody > tr:hover > * { background: var(--brand-soft); } .theme-sketch .table > tfoot td { border-top: 2px solid var(--border); } /* ------------------------------------------------------- FORM & LAINNYA */ .theme-sketch .form-control, .theme-sketch .form-select { background: var(--surface); border: 2px solid var(--border); border-radius: 6px; color: var(--ink); } .theme-sketch .form-control:focus, .theme-sketch .form-select:focus { box-shadow: var(--shadow); border-color: var(--ink); } .theme-sketch .form-check-input { border: 2px solid var(--border); border-radius: 4px; } .theme-sketch .form-check-input:checked { background-color: var(--ink); border-color: var(--border); } .theme-sketch .input-group-text { background: var(--surface-2); border: 2px solid var(--border); color: var(--ink); } .theme-sketch .alert { border: 2px solid var(--border); border-radius: var(--sk-wobble); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .theme-sketch .alert-danger { border-style: dashed; } .theme-sketch .modal-content { border: 2px solid var(--border); border-radius: var(--sk-wobble); box-shadow: var(--shadow-lg); background: var(--surface); } .theme-sketch .page-link { border: 2px solid var(--border); color: var(--ink); background: var(--surface); } .theme-sketch .page-item.active .page-link { background: var(--ink); color: var(--sk-on-ink); } .theme-sketch .empty-state { border: 2px dashed var(--border); border-radius: var(--sk-wobble); } .theme-sketch .empty-state > i { color: var(--ink); opacity: .5; } /* Stepper alur pengadaan */ .theme-sketch .flow-dot { border: 2px solid var(--border) !important; background: var(--surface) !important; color: var(--ink) !important; box-shadow: 1px 1px 0 var(--border); } .theme-sketch .flow-step.done .flow-dot, .theme-sketch .flow-step.current .flow-dot { background: var(--ink) !important; color: var(--sk-on-ink) !important; } .theme-sketch .flow-step.danger .flow-dot { background: var(--surface) !important; color: var(--ink) !important; border-style: dashed !important; } .theme-sketch .flow-step.danger .flow-note { color: var(--ink) !important; } .theme-sketch .flow-line { background: var(--border) !important; } /* Chip filter status */ .theme-sketch .status-chips .chip { border: 2px solid var(--border); border-radius: var(--sk-wobble-2); color: var(--ink); background: var(--surface); } .theme-sketch .status-chips .chip.active { background: var(--ink); color: var(--sk-on-ink); } /* Timeline riwayat */ .theme-sketch .timeline-item::before { border: 2px solid var(--border) !important; background: var(--surface) !important; } /* Label & QR tetap hitam-putih murni — memang untuk dicetak. */ .theme-sketch .label-card { border: 2px solid var(--border); } /* Halaman masuk */ .theme-sketch .login-wrap { background: var(--app-bg); background-image: linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 24px 24px; } .theme-sketch .login-card { border: 2px solid var(--border); border-radius: var(--sk-wobble); box-shadow: var(--shadow-lg); background: var(--surface); } /* Penanda kecil bahwa tampilan ini memang gaya mockup */ .theme-sketch .page-head h1::after { content: ""; display: block; height: 3px; margin-top: .15rem; width: 4.5rem; background: var(--ink); border-radius: var(--sk-wobble); opacity: .8; } /* Garis penghubung stepper & penanda selesai — ikut abu, bukan hijau. */ .theme-sketch .flow-line { background: var(--border) !important; } .theme-sketch .flow-line.done { background: var(--ink) !important; } /* Kaki sidebar: di tema terang, abu muda bawaan terlalu pudar di atas kertas. */ .theme-sketch .sidebar-footer { color: var(--muted); } .theme-sketch .sidebar-footer strong { color: var(--ink); } .theme-sketch .sidebar-footer .copyright { opacity: 1; color: var(--muted); } /* Kolom centang persetujuan jangan melebar; teks tabel tetap lega. */ .theme-sketch .pr-approve-check { width: 1.15rem; height: 1.15rem; } /* ------------------------------------------------- WARNA SEMANTIK BOOTSTRAP Hijau/merah/kuning bawaan Bootstrap masih lolos ke teks dan gradien. Semua dipetakan ke abu; makna tetap terbaca dari label, tanda minus, ikon, coretan, dan garis putus-putus — bukan dari warna. */ .theme-sketch .text-success, .theme-sketch .text-primary, .theme-sketch .text-info, .theme-sketch .text-warning, .theme-sketch .text-dark { color: var(--ink) !important; } .theme-sketch .text-danger { color: #5a5a5a !important; } .theme-sketch .text-muted { color: var(--muted) !important; } /* Kartu statistik dasbor memakai gradien warna sebagai ikon latar. */ .theme-sketch .bg-grad-blue, .theme-sketch .bg-grad-green, .theme-sketch .bg-grad-amber, .theme-sketch .bg-grad-rose, .theme-sketch .bg-grad-violet, .theme-sketch [class^="bg-grad-"], .theme-sketch [class*=" bg-grad-"] { background: var(--surface-2) !important; color: var(--ink) !important; border: 2px solid var(--border); } /* Validasi form: garis putus-putus, bukan merah. */ .theme-sketch .form-control.is-invalid, .theme-sketch .form-select.is-invalid { border-color: var(--border) !important; border-style: dashed !important; } .theme-sketch .errorlist { color: #5a5a5a; font-style: italic; } /* Batas kartu berwarna (mis. kartu Keputusan) ikut garis pensil. */ .theme-sketch [class*="border-"] { border-color: var(--border) !important; } /* Tema sketsa: isian pekat ikut tinta hitam, bukan biru. */ .theme-sketch { --brand-solid: var(--ink); --brand-solid-hover: #000000; --brand-solid-ink: var(--sk-on-ink); --accent-warn: var(--ink); }