/* ============================================================================ Tampilan v2 — kerangka sistem internal Octopus Printshop ---------------------------------------------------------------------------- Berdiri SENDIRI, tidak memuat CSS tema cork sama sekali. Itu disengaja: cork memuat 22 berkas CSS (±1 MB) dengan 400+ aturan untuk .card/.table/ .badge/.btn dan warnanya dipatok langsung, bukan lewat variabel. Menimpanya berarti perang spesifisitas yang kalah pelan-pelan; lebih murah berdiri sendiri dan memindahkan halaman satu per satu. Halaman yang belum dipindah tetap memakai layout lama + cork, tidak tersentuh berkas ini. ========================================================================== */ :root { /* Dasar sengaja lebih tua dari kartunya. Versi pertama memakai #f4f6fb yang cuma berbeda 3,1 satuan L* dari putih — di bawah ~4 praktis tak terlihat di layar terang, jadi kartunya tidak terbaca sebagai kartu dan seluruh halaman tampak satu bidang putih. Sekarang 6,3: masih tenang, tapi kartunya benar-benar mengambang. */ --ground: #e9edf6; --surface: #ffffff; --surface-2: #f4f7fc; --ink: #141a2e; --ink-2: #3d4560; --muted: #5f6886; --line: #dde2ee; --line-2: #e9edf5; --accent: #4c58e6; --accent-soft: #eef0ff; --accent-ink: #3843c4; /* Semantik terpisah dari aksen: "perlu perhatian" tidak boleh tertukar dengan "ini tombol". */ --ok: #15803d; --ok-soft: #e8f6ed; --warn: #b45309; --warn-soft: #fdf2e3; --danger: #be123c; --danger-soft: #fdeaef; --info: #1d4ed8; --info-soft: #e9eefe; --gold: #c98a1b; /* Warna teks DI ATAS bidang penuh warna (tombol solid, pil aktif, lencana hitung). Tidak boleh dipatok #fff: di mode gelap token semantik justru berbalik jadi warna muda (--ok #5fd08a, --danger #f4738f), dan putih di atasnya cuma 2,6:1 — tidak terbaca. Di sana teksnya harus gelap. */ --on-solid: #ffffff; --radius: 12px; --radius-sm: 8px; /* Bayangan dirapatkan. Yang lama melebar 24px dengan offset -12px sehingga menyebar terlalu tipis untuk terbaca pada zoom 100% — tepi kartu jadi bergantung sepenuhnya pada garis. */ --shadow: 0 1px 2px rgba(20,26,46,.06), 0 4px 12px -6px rgba(20,26,46,.13); --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; --sidebar-w: 232px; } /* Mode gelap: hanya token yang ditulis ulang, komponennya tidak pernah disentuh di dalam media query. Sakelar pengguna harus menang atas preferensi sistem, dua-duanya. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0a0d1b; --surface: #151a2d; --surface-2: #1a2036; --ink: #e9ecf6; --ink-2: #b9c0d6; --muted: #8d96b3; --line: #262d45; --line-2: #202741; --accent: #7b85f5; --accent-soft: #232a51; --accent-ink: #a4abfb; --ok: #5fd08a; --ok-soft: #16301f; --warn: #e6a94c; --warn-soft: #33260f; --danger: #f4738f; --danger-soft: #351421; --info: #7ea1ff; --info-soft: #16224a; --gold: #e0ab4a; --on-solid: #111729; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6); } } :root[data-theme="dark"] { --ground: #0a0d1b; --surface: #151a2d; --surface-2: #1a2036; --ink: #e9ecf6; --ink-2: #b9c0d6; --muted: #8d96b3; --line: #262d45; --line-2: #202741; --accent: #7b85f5; --accent-soft: #232a51; --accent-ink: #a4abfb; --ok: #5fd08a; --ok-soft: #16301f; --warn: #e6a94c; --warn-soft: #33260f; --danger: #f4738f; --danger-soft: #351421; --info: #7ea1ff; --info-soft: #16224a; --gold: #e0ab4a; --on-solid: #111729; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } .v2-mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; } .v2-num { font-variant-numeric: tabular-nums; } .v2-muted { color: var(--muted); } /* ── Kerangka ─────────────────────────────────────────────────────────── */ .v2-app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .v2-app.is-collapsed { grid-template-columns: 0 1fr; } /* Tirai laci: tidak ada sama sekali di layar lebar. */ .v2-tirai { display: none; } /* Layar sempit: sidebar tidak punya kolom, jadi ia keluar dari aliran grid dan berubah jadi LACI yang menutupi isi halaman. Sebelumnya di sini cuma ada `grid-template-columns: 0 1fr`, sementara tombol ☰ hanya memasang .is-collapsed — yang di lebar ini tidak mengubah apa pun. Akibatnya menu tidak pernah bisa dibuka di ponsel: tombolnya ada, ditekan, tidak terjadi apa-apa. */ @media (max-width: 900px) { .v2-app { grid-template-columns: 0 1fr; } .v2-side { position: fixed; top: 0; left: 0; height: 100vh; z-index: 1100; width: min(var(--sidebar-w), 84vw); transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow); } .v2-app.is-laci .v2-side { transform: none; } .v2-app.is-laci .v2-tirai { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(8, 11, 26, .5); } /* Isi halaman diberi napas: 20px kiri-kanan terlalu boros di layar 390px. */ .v2-page { padding: 14px 12px 32px; } .v2-top { padding: 10px 12px; gap: 10px; } } .v2-side { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; position: sticky; top: 0; height: 100vh; } .v2-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; } .v2-brand-mark { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px; background: linear-gradient(145deg, var(--accent), #7d3fd4); display: grid; place-items: center; color: #fff; } .v2-brand-name { font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); } .v2-brand-sub { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .v2-nav { padding: 6px 10px 16px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; } .v2-nav-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 8px 6px; font-weight: 700; } .v2-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 500; transition: background .12s, color .12s; } .v2-nav a:hover { background: var(--surface-2); color: var(--ink); } .v2-nav a.is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } /* Lencana "ada yang belum dibaca". margin-left:auto mendorongnya ke tepi kanan item — bukan lebar tetap, supaya nama menu sepanjang apa pun tetap muat. */ .v2-nav .v2-nav-badge { margin-left: auto; background: var(--danger); color: #fff; border-radius: 10px; min-width: 18px; padding: 0 5px; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; } .v2-nav i { width: 18px; text-align: center; font-size: 15px; color: var(--muted); flex: 0 0 18px; } .v2-nav a.is-active i { color: var(--accent); } .v2-nav .v2-tally { margin-left: auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--line-2); color: var(--muted); padding: 1px 7px; border-radius: 999px; } .v2-nav a.is-active .v2-tally { background: var(--surface); color: var(--accent-ink); } .v2-nav .v2-tally.is-hot { background: var(--danger-soft); color: var(--danger); } /* ── Topbar ───────────────────────────────────────────────────────────── */ .v2-main { min-width: 0; display: flex; flex-direction: column; } .v2-top { position: sticky; top: 0; z-index: 1020; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 11px 20px; } .v2-title { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); } .v2-sub { font-size: 12.5px; color: var(--muted); } .v2-grow { flex: 1; } .v2-iconbtn { width: 34px; height: 34px; border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); display: grid; place-items: center; cursor: pointer; color: var(--muted); font-size: 15px; } .v2-iconbtn:hover { background: var(--surface-2); color: var(--ink); } .v2-who { display: flex; align-items: center; gap: 9px; } .v2-who .nm { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); } .v2-who .rl { font-size: 11.5px; color: var(--muted); } .v2-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex: 0 0 32px; } .v2-avatar.sm { width: 24px; height: 24px; flex: 0 0 24px; font-size: 10px; } /* ── Isi halaman ────────────────────────────────────────────────────────── Wadah ini SENGAJA bukan flex-column, dan itu bukan selera. 30 view lama menaruh `.col-lg-12` sebagai anak langsung isi halaman (tanpa `.row`, memang begitu dari dulu). Kelas kolom Bootstrap membawa `flex: 0 0 100%` — di dalam flex-column, angka 100% itu dibaca sebagai TINGGI, bukan lebar. Akibatnya blok pertama memakan setinggi layar dan tabel terlempar jauh ke bawah. Jarak antar blok dipakai margin, bukan gap, supaya markup Bootstrap lama tetap berperilaku wajar. */ .v2-page { padding: 18px 20px 40px; } .v2-page > * + * { margin-top: 14px; } /* Kolom Bootstrap yang terlanjur jadi anak langsung: lebarnya sudah penuh, dan padding 15px bawaannya bikin tepinya tidak sejajar blok lain. */ .v2-page > [class*="col-"] { flex: none; max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; } .v2-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .v2-card-head { padding: 13px 15px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .v2-card-head h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em; } .v2-card-head p { margin: 1px 0 0; font-size: 12px; color: var(--muted); } .v2-card-body { padding: 15px; } .v2-grid { display: grid; gap: 12px; } /* Kartu tab/tahap — FLEX, bukan grid berkolom tetap. Grid membagi lebar jadi jalur berukuran sama: begitu satu jalur tidak muat, kartu terakhir turun SENDIRIAN ke baris baru sementara baris atasnya masih longgar. Dengan flex, kartu melar mengisi sisa ruang dan pembungkusannya mengikuti isi, bukan hitungan jalur. */ .v2-steps { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .v2-step { flex: 1 1 150px; min-width: 0; max-width: 300px; } /* min-width:0 pada pembungkus teks WAJIB — tanpa itu isi flex menolak menyusut dan label panjang ("Pengembalian/Pembatalan") meluber keluar kartunya alih-alih terpotong. */ .v2-step > span:last-child { min-width: 0; } .v2-step .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } @media (max-width: 760px) { .v2-step { flex-basis: 130px; } } /* Versi ringkas — supaya DELAPAN kartu muat sebaris tanpa yang terakhir turun sendirian. Kartu ukuran penuh butuh ±205px karena labelnya menolak menyusut; yang ini ±120px: ikon dikecilkan, angka & label diturunkan ukurannya, dan labelnya boleh terpotong (teks penuhnya tetap ada di title). */ .v2-steps.is-mini { gap: 8px; } .v2-steps.is-rapat { padding: 0; } /* Deretan kartu di dalam toolbar mengambil satu baris penuh — tanpa ini lebarnya cuma selebar isinya dan deretannya berhenti di tengah jalan. */ .v2-toolbar > .v2-steps { flex: 1 1 100%; min-width: 0; } /* Basis 0 dengan min-width, bukan basis 108px: dengan basis tetap, tujuh kartu menuntut 7×108+jarak sebelum mau menyusut, dan kartu terakhir ("Selesai") turun sendirian ke baris kedua. Sekarang lebarnya dibagi rata sisa ruang, dan baru pindah baris kalau layarnya benar-benar di bawah ±760px. */ .v2-step.is-mini { flex: 1 1 0; min-width: 96px; padding: 7px 9px; gap: 8px; } .v2-step.is-mini .ic { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; font-size: 12px; } .v2-step.is-mini .v { font-size: 15px; letter-spacing: -.02em; } .v2-step.is-mini .l { font-size: 10.5px; } /* Tombol aksi (mis. "Tambah Order") ikut berbaris bersama kartunya, bukan turun sendiri ke baris kosong di bawahnya. */ .v2-steps .v2-aksi-kanan, .v2-pils .v2-aksi-kanan { margin-left: auto; display: flex; align-items: center; } /* Tab gaya pil — untuk halaman yang tabnya sekadar penyaring (Order, QC). Angkanya keterangan, bukan tujuan, jadi tidak perlu setinggi kartu. */ .v2-pils { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 11px 13px; border-bottom: 1px solid var(--line-2); } .v2-pil { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; } .v2-pil:hover { background: var(--surface-2); color: var(--ink); } .v2-pil b { font-weight: 700; color: var(--muted); font-size: 12.5px; } .v2-pil.is-on { background: var(--accent); color: var(--on-solid); } .v2-pil.is-on b { color: var(--on-solid); opacity: .82; } /* Dipakai sebaris dengan isi lain (mis. kotak cari) — bingkainya sendiri dimatikan supaya tidak bertumpuk dengan pembungkusnya. */ .v2-pils.is-rapat { padding: 0; border-bottom: 0; gap: 3px; } /* Kartu tahap dipakai sebagai penyaring — harus terlihat bisa diklik. */ .v2-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; transition: border-color .12s, transform .12s; color: inherit; } .v2-step:hover { border-color: var(--accent); transform: translateY(-1px); color: inherit; } .v2-step.is-on { border-color: var(--accent); background: var(--accent-soft); } .v2-step .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 32px; font-size: 14px; } .v2-step .v { font-size: 17px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); } .v2-step .l { font-size: 11.5px; color: var(--muted); display: block; } /* ── Tombol & kolom isian ─────────────────────────────────────────────── */ .v2-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.4; } .v2-btn:hover { background: var(--surface-2); color: var(--ink); } .v2-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-solid); } .v2-btn.is-primary:hover { background: var(--accent-ink); color: var(--on-solid); } .v2-btn.is-ghost { border-color: transparent; background: transparent; color: var(--muted); } .v2-btn.is-sm { padding: 4px 10px; font-size: 12px; } /* Tindakan yang MENYELESAIKAN sesuatu (mis. "Selesai Print" di daftar task). Sengaja beda warna dari is-primary: di sel yang sama ia berdampingan dengan tombol Assign, dan dua tombol sewarna membuat operator harus membaca dulu sebelum tahu mana yang memajukan pekerjaan dan mana yang menugaskannya. */ .v2-btn.is-ok { background: var(--ok); border-color: var(--ok); color: var(--on-solid); } .v2-btn.is-ok:hover { background: var(--ok); border-color: var(--ok); color: var(--on-solid); filter: brightness(.92); } .v2-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 11px 13px; } .v2-field { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--muted); } .v2-field input, .v2-field select { border: 0; background: transparent; outline: 0; color: var(--ink); font-size: 13px; min-width: 90px; } /* Sel bertumpuk: judul di atas, keterangan kecil di bawahnya. Dipakai di kolom Invoice, Item, dan Masuk supaya isinya tidak melebar ke samping. */ .v2-cell { display: flex; flex-direction: column; gap: 1px; } .v2-cell small { color: var(--muted); font-size: 11.5px; line-height: 1.35; } .v2-who-cell { display: flex; align-items: center; gap: 7px; } /* ── Pill ─────────────────────────────────────────────────────────────── */ .v2-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .v2-pill.ok { background: var(--ok-soft); color: var(--ok); } .v2-pill.warn { background: var(--warn-soft); color: var(--warn); } .v2-pill.dgr { background: var(--danger-soft); color: var(--danger); } .v2-pill.info { background: var(--info-soft); color: var(--info); } .v2-pill.mute { background: var(--line-2); color: var(--muted); } .v2-pill.acc { background: var(--accent-soft); color: var(--accent-ink); } .v2-qty { display: inline-grid; place-items: center; min-width: 34px; padding: 2px 7px; background: var(--info-soft); color: var(--info); border-radius: 7px; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; } /* ── GridView Kartik ────────────────────────────────────────────────────── Widget-nya TIDAK diganti — cuma dibajukan ulang. Kelas .table & .grid-view memang milik Kartik/Bootstrap; di sini kita yang menatanya karena CSS cork sudah tidak ikut dimuat, jadi tidak ada yang perlu ditimpa paksa. */ .v2-page .grid-view { margin: 0; } .v2-page .table-responsive { border: 0; } .v2-page table.table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; color: var(--ink); } .v2-page table.table > thead > tr > th { text-align: left; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 9px 13px; white-space: nowrap; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); vertical-align: middle; } .v2-page table.table > tbody > tr > td { padding: 10px 13px; border: 0; border-bottom: 1px solid var(--line-2); vertical-align: middle; } .v2-page table.table > tbody > tr:last-child > td { border-bottom: 0; } /* Zebra dimatikan. Kartik memasang kelas .table-striped secara bawaan, dan Bootstrap mewarnai tiap baris ganjil. Tiga penanda warna baris jadi saling bertabrakan: zebra, baris urgent (merah), dan baris terpilih. Pemisah antar baris sudah dikerjakan garis tipis — itu cukup, dan lebih tenang dibaca berjam-jam. */ .v2-page table.table.table-striped > tbody > tr:nth-of-type(odd), .v2-page table.table.table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent; } /* Ditulis SESUDAH aturan zebra supaya sorot kursor tetap menang. */ .v2-page table.table > tbody > tr:hover, .v2-page table.table.table-striped > tbody > tr:hover > td { background: var(--surface-2); } /* Baris filter Kartik hidup DI DALAM tabel (satu baris berisi input). Dibiarkan di tempatnya — memindahkannya ke toolbar berarti menulis ulang pemakaian Search model tiap halaman, bukan sekadar CSS. */ /* Baris penyaring menyatu dengan kepala tabel, bukan bidang tersendiri — dengan --surface ia tampil sebagai pita yang warnanya beda tipis dari kepala di atasnya maupun isi di bawahnya. */ .v2-page table.table > thead > tr.filters > td { padding: 8px 13px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .v2-page table.table > thead > tr.filters .form-control { width: 100%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: var(--radius-sm); padding: 5px 9px; font-size: 12.5px; outline: 0; } .v2-page table.table > thead > tr.filters .form-control:focus { border-color: var(--accent); } /* Baris grup invoice — kepala kelompok, bukan baris data. */ .v2-page table.table > tbody > tr.kv-group-header > td { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; border-bottom: 1px solid var(--line); padding: 8px 13px; } .v2-page table.table > tbody > tr.kv-group-header:hover > td { background: var(--accent-soft); } /* Penanda baris: SELURUH baris diwarnai, bukan cuma rusuk tepinya — order urgent memang harus tertangkap mata dari jauh. Warnanya token, jadi di mode gelap ia jadi merah tua yang tetap bisa dibaca, bukan merah muda menyilaukan. Rusuk tepi tetap dipasang sebagai penegas kedua. Latar dipasang di , bukan di : latar pada kalah oleh latar sel milik aturan lain. */ .v2-page table.table > tbody > tr.bg-danger-light > td { background: var(--danger-soft); } .v2-page table.table > tbody > tr.bg-danger-light { box-shadow: inset 3px 0 0 var(--danger); } .v2-page table.table > tbody > tr.bg-danger-light:hover > td { background: var(--danger-soft); filter: brightness(.98); } .v2-page table.table > tbody > tr.bg-success-light > td { background: var(--ok-soft); } .v2-page table.table > tbody > tr.bg-success-light { box-shadow: inset 3px 0 0 var(--ok); } /* Baris terpilih (isi panel kanan mengikutinya). Rusuk kiri dipakai lagi di sini, jadi baris urgent yang sedang dipilih menunjukkan keduanya lewat warna latar, bukan dua rusuk yang bertumpuk. */ .v2-page table.table > tbody > tr[data-key] { cursor: pointer; } .v2-page table.table > tbody > tr.is-picked { background: var(--accent-soft); } .v2-page table.table > tbody > tr.is-picked:hover { background: var(--accent-soft); } .v2-page table.table > tbody > tr.is-picked > td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* ── Baris ringkas ──────────────────────────────────────────────────────── Satu baris data = satu baris tinggi. Yang dulu meninggikannya ada tiga: tombol aksi menumpuk vertikal, teks panjang membungkus, dan tombol berukuran penuh di dalam sel. */ /* Kolom aksi: tombolnya berderet, jangan menumpuk ke bawah. Dua penunjuk dipakai sekaligus — kolom terakhir, dan kolom mana pun yang isinya tombol bulat (beberapa grid menaruh aksi bukan di ujung). */ .v2-page table.table > tbody > tr > td:last-child { white-space: nowrap; } /* Kolom aksi MENEMPEL di tepi kanan. Pada tabel lebar — apalagi saat panel detail ikut memakan ruang — kolom terakhir terdorong ke luar layar dan tombolnya seolah hilang; yang ada cuma bilah gulir mendatar yang tidak disadari orang. Ditulis SEBELUM aturan warna baris supaya latar baris urgent/terpilih tetap menang di sel ini. */ .v2-page table.table > thead > tr > th:last-child, .v2-page table.table > tbody > tr > td:last-child { position: sticky; right: 0; z-index: 2; background: var(--surface); /* Garis pemisah, bukan bayangan lebar. Bayangan menutupi isi kolom di sebelahnya sehingga tombol di sana terlihat seperti terpotong. */ border-left: 1px solid var(--line); } .v2-page table.table > thead > tr > th:last-child { background: var(--surface-2); z-index: 3; } /* Sel yang menunya sedang terbuka dinaikkan di atas sel-sel lain (lihat catatan di main_v2.php) — kalau tidak, menu tertimpa baris di bawahnya. */ .v2-page table.table > tbody > tr > td.v2-menu-atas { z-index: 12; } .v2-page table.table > tbody > tr:hover > td:last-child { background: var(--surface-2); } /* Sel menempel ini ditulis SESUDAH aturan warna baris, jadi latarnya harus ditegaskan ulang di sini — kalau tidak, sel terakhir baris urgent tampil putih sendirian di ujung baris yang merah. */ .v2-page table.table > tbody > tr.bg-danger-light > td:last-child { background: var(--danger-soft); } .v2-page table.table > tbody > tr.bg-success-light > td:last-child { background: var(--ok-soft); } .v2-page table.table > tbody > tr.is-picked > td:last-child { background: var(--accent-soft); } .v2-page table.table > tbody > tr.kv-group-header > td:last-child { background: var(--accent-soft); } /* ── Kolom menempel JANGAN kena baris rincian ──────────────────────────── Saat sebuah baris dibentangkan, Kartik menyisipkan . Sel itu satu-satunya di barisnya, jadi ia juga :last-child — dan ikut dipatok lengket ke kanan. Akibatnya seluruh isi rincian menempel di tepi kanan, menutupi kolom di bawahnya dan menimpa menu aksi. Hal yang sama terjadi pada tabel BERSARANG di dalam rincian: ia juga .table di dalam .v2-page, jadi kolom terakhirnya (Progress) ikut lengket dan mengambang di atas isi tabel induknya. */ .v2-page table.table > tbody > tr.kv-expand-detail-row > td, .v2-page table.table > tbody > tr > td.kv-expanded-row, .v2-page .kv-expanded-row table.table > thead > tr > th:last-child, .v2-page .kv-expanded-row table.table > tbody > tr > td:last-child { position: static; z-index: auto; border-left: 0; background: transparent; } /* Rincian bentangan: beri ruang, dan biarkan tabel di dalamnya menggulir sendiri kalau kolomnya banyak. */ .v2-page table.table > tbody > tr > td.kv-expanded-row { padding: 12px 14px; background: var(--surface-2); } .v2-page .kv-expanded-row .table-responsive, .v2-page .kv-expanded-row .grid-view { overflow-x: auto; } .v2-page .kv-expanded-row table.table { background: var(--surface); border-radius: var(--radius-sm); } .v2-page .kv-expanded-row table.table > tbody > tr:hover > td { background: var(--surface-2); } .v2-page table.table td .btn { margin: 0 3px 0 0; vertical-align: middle; } .v2-page table.table td .btn:last-child { margin-right: 0; } /* Tombol di dalam tabel dikecilkan supaya deretannya muat sebaris. */ .v2-page table.table td .btn { padding: 4px 8px; font-size: 12px; line-height: 1.3; } .v2-page table.table td .btn-rounded { padding: 4px 9px; } .v2-page table.table td .btn i { font-size: 12px; } /* Kolom ⊞ buka-tutup baris disembunyikan — barisnya sendiri yang jadi pemicu (Kartik: enableRowClick). Kolomnya tetap ADA di markup karena di situlah Kartik menyimpan penanda buka-tutupnya; yang dihapus cuma tampilannya. colspan baris rincian jadi satu lebih banyak dari kolom terlihat — tidak masalah, peramban memangkasnya sendiri. */ .v2-page table.table .v2-kolom-sembunyi { display: none; } /* Barisnya bisa diklik, jadi harus terlihat begitu. */ .v2-page table.table > tbody > tr.kv-expand-row { cursor: pointer; } /* ── Menu aksi baris ("⋯") ──────────────────────────────────────────────── Isinya dipasang `position: fixed` dan letaknya dihitung JS saat dibuka. Kalau memakai `absolute`, menunya terpotong oleh .table-responsive yang ber-overflow — itu jebakan klasik dropdown di dalam tabel bergulir. */ .v2-menu { position: relative; display: inline-block; } .v2-menu-isi { display: none; position: fixed; z-index: 1050; min-width: 232px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 5px; } .v2-menu.is-open .v2-menu-isi { display: block; } .v2-menu-isi > a, .v2-menu-isi > button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 10px; margin: 0; border: 0; background: none; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; } .v2-menu-isi > a:hover, .v2-menu-isi > button:hover { background: var(--surface-2); color: var(--ink); } .v2-menu-isi > .is-danger { color: var(--danger); } .v2-menu-isi > .is-danger:hover { background: var(--danger-soft); color: var(--danger); } .v2-menu-isi > .is-ok { color: var(--ok); } .v2-menu-isi > .is-ok:hover { background: var(--ok-soft); color: var(--ok); } .v2-menu-isi i { width: 15px; text-align: center; font-size: 13px; } .v2-menu-isi .v2-muted { margin-left: auto; font-size: 11.5px; } /* Sel yang isinya teks bebas: dipotong satu baris, isi penuhnya lewat title. */ .v2-page table.table td.v2-clip { max-width: 200px; } .v2-page table.table td.v2-clip > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Padding baris dirapatkan — 10px atas-bawah pada 15 baris membuat tabel panjang tanpa isi tambahan. */ .v2-page table.table > tbody > tr > td { padding: 7px 12px; } .v2-page table.table > thead > tr > th { padding: 8px 12px; } /*
di dalam sel warisan markup lama tidak lagi menambah tinggi ganda. */ .v2-page table.table td br + br { display: none; } /* Bilah progres (halaman Order). */ .v2-page .progress { height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; } .v2-page .progress-bar { background: var(--accent); font-size: 0; } /* Kolom catatan dibatasi lebarnya. Teks panjang seperti "Disusun otomatis dari chat WhatsApp" tanpa batas ini membungkus jadi empat baris sempit dan meninggikan seluruh barisnya. */ .v2-page table.table > tbody > tr > td { max-width: 320px; } .v2-page .summary { color: var(--muted); font-size: 12.5px; padding: 10px 13px; } .v2-page .pagination { display: flex; gap: 4px; list-style: none; margin: 0; padding: 10px 13px; } .v2-page .pagination > li > a, .v2-page .pagination > li > span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-size: 12.5px; } .v2-page .pagination > li.active > a, .v2-page .pagination > li.active > span { background: var(--accent); border-color: var(--accent); color: var(--on-solid); font-weight: 700; } .v2-page .pagination > li.disabled > span { color: var(--muted); opacity: .55; } /* Tombol bulat di dalam grid (aksi per baris) dibuat sepadan tanpa cork. */ .v2-page .btn-rounded { border-radius: 999px; } .v2-page .btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12.5px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; line-height: 1.4; cursor: pointer; } .v2-page .btn:hover { background: var(--surface-2); } .v2-page .btn-sm { padding: 3px 8px; font-size: 11.5px; } .v2-page .badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; } .v2-page .badge-primary { background: var(--accent-soft); color: var(--accent-ink); } .v2-page .badge-success { background: var(--ok-soft); color: var(--ok); } .v2-page .badge-info { background: var(--info-soft); color: var(--info); } .v2-page .badge-warning { background: var(--warn-soft); color: var(--warn); } .v2-page .badge-danger { background: var(--danger-soft); color: var(--danger); } .v2-page .badge-secondary, .v2-page .badge-light { background: var(--line-2); color: var(--muted); } .v2-page .counter { position: relative; top: -6px; margin-left: 2px; background: var(--danger); color: var(--on-solid); padding: 0 5px; font-size: 10px; } /* ── Panel detail ─────────────────────────────────────────────────────── */ .v2-with-panel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; } @media (max-width: 1200px) { .v2-with-panel { grid-template-columns: minmax(0, 1fr); } } .v2-panel { position: sticky; top: 72px; } .v2-kv { display: grid; grid-template-columns: 96px 1fr; gap: 7px 10px; font-size: 13px; margin: 0; } .v2-kv dt { color: var(--muted); font-weight: 400; } .v2-kv dd { margin: 0; font-weight: 500; } .v2-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 8px; } .v2-flow { display: flex; flex-direction: column; gap: 7px; } .v2-flow-row { display: flex; align-items: center; gap: 9px; font-size: 13px; } .v2-flow-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--line); } .v2-flow-row.done .v2-flow-dot { background: var(--ok); } .v2-flow-row.now .v2-flow-dot { background: var(--accent); } .v2-flow-row.wait span:nth-child(2) { color: var(--muted); } .v2-flow-row .st { margin-left: auto; font-size: 11.5px; color: var(--muted); } /* ── Modal (Bootstrap 4 tanpa CSS cork) ───────────────────────────────── */ .modal-content { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); } .modal-header { border-bottom: 1px solid var(--line-2); } .modal-footer { border-top: 1px solid var(--line-2); } .modal-header .close { color: var(--muted); text-shadow: none; opacity: 1; background: none; border: 0; font-size: 22px; } /* .text-muted milik Bootstrap dipatok #6c757d dan TIDAK ikut tema. Di mode terang warnanya kebetulan mirip --muted, tapi di mode gelap ia jatuh ke abu-abu tua di atas latar #151a2d — keterangan kecil (peran karyawan, ukuran berkas, jam) praktis hilang. Diikutkan ke token tema supaya keterbacaannya sama di kedua mode. !important dibutuhkan karena Bootstrap sendiri memakainya. */ .text-muted { color: var(--muted) !important; } /* Isi modal masih memakai markup form lama (Bootstrap 4). Ditata seperlunya supaya tidak tampil telanjang saat halaman induknya sudah v2. */ .modal-content .form-control, .modal-content .custom-select { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; outline: 0; } .modal-content .form-control:focus { border-color: var(--accent); } /* JANGAN pasang width:100% pada .form-control di sini. Bootstrap sudah memberinya width:100% sendiri, dan yang penting: di dalam .input-group ia justru memakai `flex:1 1 auto; width:1%` supaya isian dan tombol di sebelahnya berbagi satu baris. Aturan width:100% dari sini menimpanya, dan isian jadi selebar baris — tombolnya terlempar ke bawah, satu per satu. Itulah yang membuat penyunting atribut di Form Product berubah jadi tumpukan kotak dan tombol sampah raksasa. Ditulis ulang di sini dengan spesifisitas lebih tinggi supaya tidak bergantung pada urutan muat — berkas CSS milik modal disuntik belakangan. */ .modal-content .input-group > .form-control, .modal-content .input-group > .custom-select { flex: 1 1 auto; width: 1%; min-width: 0; } /* Sudut dalam dirapatkan supaya isian dan tombolnya terbaca sebagai satu kesatuan, bukan dua benda yang kebetulan bersebelahan. */ .modal-content .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .modal-content .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .modal-content .input-group-append > .btn, .modal-content .input-group-prepend > .btn { border-radius: 0; } .modal-content .input-group-append > .btn:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); } .modal-content .input-group-prepend > .btn:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); } /* Tombol dalam input-group menyamai tinggi isiannya, bukan lebih tinggi. */ .modal-content .input-group .btn { padding: 7px 11px; } .modal-content label { font-size: 12.5px; color: var(--ink-2); font-weight: 600; } .modal-content .btn { border-radius: var(--radius-sm); padding: 7px 13px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink); } /* ── Ragam tombol Bootstrap ─────────────────────────────────────────────── Ditulis sekali untuk halaman DAN modal. Sebelumnya cuma primary, success, dark, dan default yang punya warna; sisanya kena aturan .btn dasar yang melatarinya putih — sementara warna TEKS-nya masih dari Bootstrap, yaitu putih. Hasilnya tombol "Reply" (btn-secondary) dan "Unsend" (btn-danger) di modal catatan Task tampil sebagai kotak putih kosong: ada, bisa diklik, tapi tak terlihat. Tombol berwarna penuh memakai --on-solid, bukan #fff — lihat catatan token. */ .v2-page .btn-primary, .modal-content .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-solid); } .v2-page .btn-success, .modal-content .btn-success { background: var(--ok); border-color: var(--ok); color: var(--on-solid); } .v2-page .btn-danger, .modal-content .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-solid); } .v2-page .btn-warning, .modal-content .btn-warning { background: var(--warn); border-color: var(--warn); color: var(--on-solid); } .v2-page .btn-info, .modal-content .btn-info { background: var(--info); border-color: var(--info); color: var(--on-solid); } .v2-page .btn-dark, .modal-content .btn-dark { background: var(--ink); border-color: var(--ink); color: var(--surface); } .v2-page .btn-dark:hover, .modal-content .btn-dark:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--surface); } /* Secondary/light/default = tombol pendamping: tenang, bukan berwarna. */ .v2-page .btn-secondary, .modal-content .btn-secondary, .v2-page .btn-light, .modal-content .btn-light, .v2-page .btn-default, .modal-content .btn-default { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); } .v2-page .btn-secondary:hover, .modal-content .btn-secondary:hover, .v2-page .btn-light:hover, .modal-content .btn-light:hover { background: var(--line-2); color: var(--ink); } /* Garis luar: latarnya bening, warnanya dibawa garis dan teks. */ .v2-page .btn-outline-primary, .modal-content .btn-outline-primary { background: transparent; border-color: var(--accent); color: var(--accent-ink); } .v2-page .btn-outline-success, .modal-content .btn-outline-success { background: transparent; border-color: var(--ok); color: var(--ok); } .v2-page .btn-outline-danger, .modal-content .btn-outline-danger { background: transparent; border-color: var(--danger); color: var(--danger); } .v2-page .btn-outline-warning, .modal-content .btn-outline-warning { background: transparent; border-color: var(--warn); color: var(--warn); } .v2-page .btn-outline-info, .modal-content .btn-outline-info { background: transparent; border-color: var(--info); color: var(--info); } .v2-page .btn-outline-dark, .modal-content .btn-outline-dark { background: transparent; border-color: var(--ink-2); color: var(--ink); } .v2-page .btn-outline-secondary, .modal-content .btn-outline-secondary { background: transparent; border-color: var(--line); color: var(--muted); } .v2-page [class*="btn-outline-"]:hover, .modal-content [class*="btn-outline-"]:hover { background: var(--surface-2); } /* Bootstrap memberi .btn-link warna tautannya sendiri; cukup dilucuti kotaknya. */ .v2-page .btn-link, .modal-content .btn-link { background: transparent; border-color: transparent; color: var(--accent-ink); } .v2-empty { text-align: center; color: var(--muted); padding: 34px 16px; font-size: 13px; } /* ── Warna yang datang dari luar ────────────────────────────────────────── CSS tema cork memang tidak dimuat, tapi dua sumber lain tetap ikut dan keduanya memakai warna terang yang dipatok: 1. kv-grid.css milik Kartik — ia aset widget, jadi selalu ikut termuat selama GridView-nya Kartik dipakai. Isinya #fff, #f0f1ff, #FFF0F5, dan semuanya ber-!important sehingga hanya bisa dilawan dengan !important. 2. Kelas berlatar milik Bootstrap (.table-info dan kawan-kawan) yang dipasang Kartik sendiri pada baris rincian bentangan. Di mode gelap semuanya muncul sebagai baris putih menyala di tengah tabel yang gelap. Ditulis lewat token, jadi satu aturan melayani dua tema. */ .v2-page td.kv-group-even, .v2-page .table-hover td.kv-group-even:hover { background-color: var(--accent-soft) !important; } .v2-page td.kv-group-odd, .v2-page .table-hover td.kv-group-odd:hover { background-color: var(--surface-2) !important; } .v2-page .kv-grouped-row, .v2-page .table-hover .kv-grouped-row:hover { background-color: var(--surface-2) !important; font-size: 1em; } .v2-page .kv-table-header, .v2-page .kv-table-footer, .v2-page .kv-table-float { background: var(--surface-2) !important; } .v2-page .kv-grid-table > tbody > tr > td { background-image: none; } /* Kelas berlatar Bootstrap di dalam tabel — dipakai Kartik untuk baris rincian (table-info), dan tersebar di beberapa view lama. */ .v2-page .table-info, .v2-page .table-info > td, .v2-page .table-light, .v2-page .table-light > td, .v2-page .table-active, .v2-page .table-active > td { background-color: var(--surface-2) !important; color: var(--ink); } .v2-page .bg-light, .v2-page .bg-white { background-color: var(--surface-2) !important; color: var(--ink); } .v2-page .text-dark { color: var(--ink) !important; } /* ── Bilah gulir ────────────────────────────────────────────────────────── Bilah gulir bawaan Windows/Chrome tetap PUTIH walau halamannya gelap — paling terlihat pada sidebar yang punya gulirannya sendiri, sebagai satu pita terang di antara menu dan isi halaman. */ * { scrollbar-color: var(--line) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Tombol "Choose Files" bawaan peramban: kotak abu terang yang digambar OS, tidak tersentuh gaya .form-control. */ ::file-selector-button { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); border-radius: var(--radius-sm); padding: 5px 11px; margin-right: 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } ::file-selector-button:hover { background: var(--line-2); color: var(--ink); } input[type="file"] { color: var(--muted); font-size: 12.5px; } /* ── Bintang prioritas ──────────────────────────────────────────────────── Menandai order urgent langsung dari daftarnya. Sengaja tidak memakai .v2-btn: sebuah kotak bergaris di setiap baris membuat kolom pertama terlihat penuh tombol, padahal yang dilihat orang saat menyapu daftar adalah bintangnya menyala atau tidak. */ .v2-bintang { border: 0; background: none; padding: 3px; line-height: 1; cursor: pointer; color: var(--line); font-size: 14px; border-radius: 6px; transition: color .12s, transform .12s; } .v2-bintang:hover { color: var(--gold); transform: scale(1.15); } .v2-bintang.is-on { color: var(--gold); } .v2-bintang.is-sibuk { opacity: .45; pointer-events: none; } /* Di baris yang sudah merah, emas di atas merah muda kurang terbaca. */ .v2-page table.table > tbody > tr.bg-danger-light .v2-bintang.is-on { color: var(--danger); } /* ── Detail Task di dalam modal ─────────────────────────────────────────── Isinya dirapatkan, bukan dikecilkan begitu saja: yang memakan tinggi bukan ukuran hurufnya melainkan susunannya — empat kolom Bootstrap dengan label tebal seukuran isinya, gambar produk 120px, jumlah berukuran 19pt, dan area chat setinggi 600px yang bikin modal punya dua bilah gulir bersarang. */ .v2-detil { font-size: 13px; } .v2-detil .card { border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none; } .v2-detil .card-body { padding: 12px 14px; } .v2-detil hr { margin: 10px 0; border-color: var(--line-2); } .v2-detil-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; } .v2-detil-info > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .v2-detil-info span { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .v2-detil-info b { font-size: 13px; font-weight: 600; color: var(--ink); } .v2-detil-info b small { font-weight: 500; color: var(--muted); } .v2-detil-item { display: flex; align-items: flex-start; gap: 13px; } .v2-detil-gambar { width: 64px; height: 64px; flex: 0 0 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); } .v2-detil-nama { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .v2-detil-nama b { font-size: 13.5px; font-weight: 700; line-height: 1.35; } .v2-detil-nama small { font-size: 11.5px; color: var(--muted); line-height: 1.4; } .v2-detil-item .v2-qty { flex: 0 0 auto; font-size: 14px; } .v2-detil-pic { flex: 0 0 auto; max-width: 260px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .v2-detil-pic b { font-size: 12.5px; } .v2-detil-pic b span { font-weight: 500; color: var(--muted); } .v2-detil-pic small { font-size: 11px; color: var(--muted); } /* Tombol aksi order (.v2-detil-aksi) duduk sebaris di ujung baris kepala. Tombol "selesaikan proses" dulu ada di bawah nama PIC memuat kalimat penuhnya — balok gelap tiga baris selebar 260px, lebih menyolok dari judul modalnya sendiri. Tata letaknya sengaja DITARUH SEBARIS di view, bukan di sini: .v2-detil-info > div memaksa flex-direction:column, jadi selama berkas ini masih tertahan cache browser tombolnya menumpuk vertikal. */ /* Modal Detail Task SETINGGI LAYAR, dan kolom catatannya mengisi sisa ruang. Dulu chatnya dipatok 340px sehingga modal berhenti di tengah layar: di monitor 1080p ada ratusan piksel kosong di bawahnya, sementara catatan produksi — bagian yang paling sering dibaca di modal ini — cuma kebagian jendela sempit yang harus digulir terus. 150px = margin modal (2x28) + kepala (~50) + padding badan (~32). Diukur, bukan ditaksir: pada 170px sisa ruang bawahnya 48px sementara atasnya 28px, jadi ada 20px yang terbuang percuma di bawah. min-height menjaga di layar pendek/laptop kecil modalnya tidak ikut mengerut sampai chatnya tidak terbaca; kalau layarnya memang lebih pendek dari itu, badan modalnya yang bergulir. Rantai flex di bawahnya WAJIB utuh sampai .v2-detil-chat — satu tingkat saja terlewat, tingginya kembali mengikuti isi dan aturan ini tidak berpengaruh sama sekali. */ .v2-detil { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 420px; } .v2-detil > .card { flex: 0 0 auto; } .v2-detil .tab-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .v2-detil .tab-content > .tab-pane.active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .v2-detil .tab-content > .tab-pane > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .v2-detil .tab-content > .tab-pane > .card > .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* Tab "Other Orders" & "PIC History" isinya tabel, bukan kolom chat — tidak ada bagian yang pantas dipanjangkan, jadi tabnya sendiri yang bergulir. Tanpa ini isinya terpotong diam-diam begitu tingginya dipatok setinggi layar: daftar order lain yang panjang tidak bisa dijangkau sama sekali. */ .v2-detil .tab-content > #otherOrder.active, .v2-detil .tab-content > #picHistory.active { display: block; overflow: auto; } /* Baris produk & kotak ketik tetap setinggi isinya; yang memanjang cuma chat. */ .v2-detil-item { flex: 0 0 auto; } .v2-detil-chat { flex: 1 1 auto; min-height: 160px; overflow: auto; margin: 10px 0; } /* Gambar lampiran dulu selebar gelembungnya — satu foto memenuhi seluruh modal dan catatan sesudahnya terdorong keluar layar. Diberi batas; ukuran penuhnya tetap satu klik jauhnya lewat fancybox. */ .v2-detil .chat img.img-thumbnail { max-height: 150px; width: auto; max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); padding: 0; cursor: zoom-in; } .v2-detil .chat-system .chat-box .bubble { padding: 8px 12px; margin-bottom: 6px; } .v2-detil .chat-system .chat-box .bubble hr { margin: 6px 0; } .v2-detil .chat-system .chat-box .bubble small { font-size: 10.5px; color: var(--muted); } .v2-detil .chat-system .chat-box .bubble .btn { padding: 3px 8px; font-size: 11px; } /* Kutipan pesan yang dibalas, di dalam gelembung. */ .v2-detil .component-card_5 { border: 0; background: rgba(127,127,127,.12); border-radius: var(--radius-sm); } .v2-detil .component-card_5 .card-body { padding: 6px 9px !important; font-size: 11.5px; } .v2-detil .component-card_5 .card-body img { max-height: 54px !important; width: auto !important; height: auto !important; } /* Tab di dalam modal: garis bawah tipis, bukan kotak-kotak Bootstrap. */ .v2-detil .nav-tabs { border-bottom: 1px solid var(--line); gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; display: flex; } .v2-detil .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .v2-detil .nav-tabs .nav-link:hover { color: var(--ink); } .v2-detil .nav-tabs .nav-link.active { color: var(--accent-ink); border-bottom-color: var(--accent); background: transparent; } .v2-detil .tab-content > .tab-pane { padding-top: 10px; } /* ── Layar masuk ────────────────────────────────────────────────────────── Dua bidang: kiri panel merek di atas foto latar yang sudah dipakai selama ini, kanan formulirnya di atas dasar v2. Versi lama menumpuk kartu putih di tengah foto dengan margin-top 20% — di layar pendek kartunya terdorong sampai tombol Login keluar layar, dan logonya dipasang 400px sehingga jauh lebih besar dari seluruh formulir di bawahnya. Di bawah 900px panel merek dilepas: di ponsel ia cuma mendorong formulir turun tanpa memberi keterangan apa pun. */ .v2-masuk { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; } @media (max-width: 900px) { .v2-masuk { grid-template-columns: 1fr; } .v2-masuk-sisi { display: none; } } .v2-masuk-sisi { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 42px 44px; color: #fff; background: #0b1030 center / cover no-repeat; overflow: hidden; } /* Foto latarnya ramai (partikel, garis diagonal). Tanpa selubung ini teks putih di atasnya hilang timbul mengikuti motifnya. */ .v2-masuk-sisi::before { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(9,13,40,.9) 0%, rgba(60,70,200,.5) 55%, rgba(9,13,40,.94) 100%); } .v2-masuk-sisi > * { position: relative; z-index: 1; } .v2-masuk-tanda { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.14); backdrop-filter: blur(2px); font-size: 17px; } .v2-masuk-judul { font-size: 27px; font-weight: 700; letter-spacing: -.025em; line-height: 1.22; max-width: 16ch; margin: 0; } .v2-masuk-teks { font-size: 13.5px; line-height: 1.6; opacity: .78; max-width: 42ch; margin: 11px 0 0; } .v2-masuk-poin { display: flex; flex-direction: column; gap: 11px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 13px; } .v2-masuk-poin li { display: flex; align-items: center; gap: 11px; opacity: .9; } .v2-masuk-poin i { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.13); font-size: 12px; } .v2-masuk-kaki { font-size: 11.5px; opacity: .55; } .v2-masuk-isi { display: grid; place-items: center; padding: 34px 22px; background: var(--ground); } .v2-masuk-kartu { width: 100%; max-width: 372px; } .v2-masuk-logo { display: block; width: 100%; max-width: 186px; height: auto; margin: 0 auto 24px; } /* Logonya bertulisan hitam di atas latar tembus pandang — di kartu yang ikut gelap ia lenyap. Dijadikan siluet putih, warna birunya memang hilang tapi terbaca; ini satu-satunya tempat logo tampil di atas bidang gelap. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v2-masuk-logo { filter: brightness(0) invert(1); opacity: .9; } } :root[data-theme="dark"] .v2-masuk-logo { filter: brightness(0) invert(1); opacity: .9; } :root[data-theme="light"] .v2-masuk-logo { filter: none; opacity: 1; } /* Isian bertingkat: label di atas, kotaknya selebar kartu. */ .v2-isian { display: block; margin: 0 0 14px; } .v2-isian > label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; } .v2-isian input { width: 100%; padding: 11px 12px; font-size: 14px; font-family: inherit; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); outline: 0; } .v2-isian input:focus { border-color: var(--accent); background: var(--surface); } .v2-isian.has-error input, .v2-isian input.has-error { border-color: var(--danger); } .v2-galat { display: block; margin-top: 6px; font-size: 12px; color: var(--danger); } .v2-galat:empty { display: none; } .v2-cek { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 2px 0 18px; cursor: pointer; } .v2-cek input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; } .v2-btn.is-blok { width: 100%; justify-content: center; padding: 11px 14px; font-size: 14px; } /* ── Kotak tulis catatan ────────────────────────────────────────────────── Dulu sebuah .input-group berisi textarea setinggi 27px (satu baris, dengan gagang tarik dan bilah gulir sendiri) diikuti tiga tombol setinggi 25px berlabel "Browse", "Browse Excel/PDF", dan "Notes" — labelnya lebih tinggi dari kotaknya sendiri sehingga tulisannya terpotong, dan tombol kirimnya tidak terbaca sebagai tombol kirim. Sekarang satu bidang: teks tumbuh sendiri sampai lima baris, dua tombol lampiran jadi ikon, dan Kirim satu-satunya tombol berwarna. */ .v2-komposer { display: flex; align-items: flex-end; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .v2-komposer:focus-within { border-color: var(--accent); } .v2-komposer textarea { flex: 1; min-width: 0; min-height: 36px; max-height: 132px; resize: none; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.5; padding: 8px 6px; outline: 0; } .v2-komposer-alat { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; } .v2-lampir { width: 34px; height: 34px; margin: 0; flex: 0 0 34px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; font-size: 14px; } .v2-lampir:hover { background: var(--line-2); color: var(--ink); } .v2-lampir.is-isi { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .v2-komposer .v2-btn { height: 34px; } /* Berkas yang sudah dipilih tapi belum terkirim. */ .v2-lampiran { display: flex; flex-wrap: wrap; gap: 8px; } .v2-lampiran:empty { display: none; } .v2-lampiran img { max-height: 66px; border-radius: var(--radius-sm); border: 1px solid var(--line); } .v2-lampiran p { margin: 0; font-size: 12px; padding: 5px 11px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; } /* Kutipan pesan yang sedang dibalas. Judulnya dulu

biru sebesar judul halaman ("Replay"), lebih besar dari pesan yang dikutipnya sendiri. */ .v2-balas { display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px; margin-bottom: 8px; background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); font-size: 12.5px; } .v2-balas .isi { flex: 1; min-width: 0; color: var(--muted); } .v2-balas .isi b { display: block; color: var(--accent-ink); font-size: 11.5px; margin-bottom: 2px; } .v2-balas .isi img { max-height: 34px; width: auto; border-radius: 5px; } .v2-balas .isi br + br { display: none; } .v2-balas .tutup { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 17px; line-height: 1; padding: 0 3px; flex: 0 0 auto; } .v2-balas .tutup:hover { color: var(--ink); } /* ── Catatan penjelas ───────────────────────────────────────────────────── Keterangan yang menerangkan sebuah layar ("pengaturan ini dipakai storefront", "kalau dikosongkan web memakai konten bawaan"). Dulu ditulis sebagai

saja: tanpa CSS cork ia jadi baris teks telanjang yang menggantung di antara kepala kartu dan tabelnya — tidak terbaca sebagai catatan, dan tidak terbaca sebagai isi. Sekarang berlatar dan berusuk kiri: jelas ia keterangan, bukan data. */ .v2-nota { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 14px; background: var(--info-soft); color: var(--info); border-left: 3px solid var(--info); font-size: 12.5px; line-height: 1.5; } .v2-nota i { margin-top: 2px; } .v2-nota b { font-weight: 700; } /* Menempel rapat di bawah kepala kartu — bukan blok yang mengapung sendiri. */ .v2-card-head + .v2-nota, .v2-nota:first-child { border-top: 0; } .v2-nota + .table-responsive, .v2-nota + .grid-view { border-top: 1px solid var(--line-2); } /* Catatan yang isinya "ada yang belum beres" — dibedakan warnanya supaya tidak tertukar dengan catatan penjelas biasa yang boleh dilewati. */ .v2-nota.is-warn { background: var(--warn-soft); color: var(--warn); border-left-color: var(--warn); } .v2-nota.is-mute { background: var(--surface-2); color: var(--muted); border-left-color: var(--line); } /* Nama placeholder / kode singkat di dalam catatan. */ .v2-nota code { font-family: var(--mono); font-size: 11.5px; padding: 1px 5px; border-radius: 5px; background: var(--surface); color: inherit; border: 1px solid currentColor; opacity: .95; } .v2-nota .v2-tautan { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; } /* Teks panjang di dalam sel: dipotong halus di baris ke-N, bukan dibiarkan membuat satu baris tabel setinggi layar. Jumlah barisnya lewat --baris. */ .v2-klamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--baris, 2); line-clamp: var(--baris, 2); overflow: hidden; } /* ── Markup lama yang ikut kebagian ─────────────────────────────────────── Halaman yang belum disentuh view-nya tetap memakai markup Bootstrap apa adanya (.card, .grid-view telanjang, form, tab). Ditata di sini supaya pindah layout saja sudah membuatnya rapi — 129 berkas view tidak perlu disunting satu per satu. */ /* GridView tanpa pembungkus apa pun jadi berbentuk kartu dengan sendirinya. Kalau memang sudah di dalam .v2-card / .card, kartunya dilucuti supaya tidak jadi kotak di dalam kotak. */ .v2-page > .grid-view, .v2-page > .table-responsive > .grid-view, .v2-page > div > .grid-view { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .v2-card .grid-view, .v2-page .card .grid-view { background: transparent; border: 0; box-shadow: none; border-radius: 0; } /* Pembungkus grid warisan Gii: setiap halaman CRUD punya

sebagai pembungkus tabelnya — customer-index, product-index, unit-index, dan seterusnya. Dijadikan kartu lewat satu aturan di sini, jadi tidak ada berkas view yang perlu dibongkar tag pembukanya (dan tidak ada risiko tag penutup meleset). */ .v2-page > [class$="-index"], .v2-page > [class*="-index "] { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; padding: 0; } /* Padding NOL hanya sah kalau isinya tabel — tepi tabel memang harus rata dengan tepi kartu. Halaman yang isinya bukan tabel (mis. daftar menu yang bisa diseret) jadi menempel mepet ke bingkai dan terlihat meluber. :not(:has(table)) belum aman dipakai di semua peramban, jadi ditandai lewat kelas pembungkusnya. */ .v2-page > [class$="-index"] > .dd, .v2-page > [class*="-index "] > .dd, .v2-page > [class$="-index"] > .v2-isi, .v2-page > [class*="-index "] > .v2-isi { padding: 14px; } /* Kartu Bootstrap disamakan dengan kartu v2. .modal-content ikut disebut karena modal digambar di luar .v2-page — ia menempel ke . Tanpa itu panel "SKU Information" di Form Product tetap putih dengan pita kepala abu, di tengah modal yang sudah gelap. */ .v2-page .card, .modal-content .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .v2-page .card-header, .modal-content .card-header { background: var(--surface-2); border-bottom: 1px solid var(--line-2); padding: 13px 15px; font-weight: 700; font-size: 14px; color: var(--ink); border-radius: var(--radius) var(--radius) 0 0; } .v2-page .card-body, .modal-content .card-body { padding: 15px; } /* Kartu di dalam modal sudah berada di atas bidang kartu; bayangannya cuma menambah kotor, garisnya sudah cukup memisahkan. */ .modal-content .card { box-shadow: none; background: var(--surface-2); } .modal-content .card-header { background: var(--surface); } .modal-content .card .card { background: var(--surface); } .v2-page .card-footer { background: var(--surface); border-top: 1px solid var(--line-2); } /* Formulir. Kartik ActiveForm & form biasa sama-sama memakai kelas ini. */ .v2-page .form-control, .v2-page .custom-select, .v2-page textarea.form-control { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; width: 100%; outline: 0; box-shadow: none; } .v2-page .form-control:focus, .v2-page .custom-select:focus { border-color: var(--accent); box-shadow: none; } .v2-page .form-control:disabled, .v2-page .form-control[readonly] { background: var(--line-2); color: var(--muted); } .v2-page label, .v2-page .control-label { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; } .v2-page .form-group { margin-bottom: 13px; } .v2-page .help-block, .v2-page .invalid-feedback { font-size: 11.5px; color: var(--danger); } .v2-page .input-group-text { border: 1px solid var(--line); background: var(--line-2); color: var(--ink-2); border-radius: var(--radius-sm); font-size: 12.5px; } .v2-page hr { border: 0; border-top: 1px solid var(--line-2); margin: 14px 0; } .v2-page h1, .v2-page h2, .v2-page h3, .v2-page h4, .v2-page h5 { letter-spacing: -.02em; color: var(--ink); } /* ── Select2 (Kartik krajee) ────────────────────────────────────────────── WAJIB !important, dan ini sudah dibuktikan bukan sekadar jaga-jaga. Dua sebab yang menumpuk: 1. Urutan muat. Isi modal diambil lewat renderAjax, dan berkas CSS-nya (select2-krajee-bs4.css) ikut disuntik ke halaman SAAT modal dibuka — artinya SESUDAH app.css yang sudah lama terpasang. Pada spesifisitas yang sama, lembar yang belakangan menang. 2. Spesifisitas. Sebagian aturan krajee memakai pemilih atribut, mis. `.select2-results__option[aria-selected]` (0,3,0), yang mengalahkan pemilih dua-kelas mana pun yang bisa ditulis di sini. Versi sebelumnya dicakup .v2-page sehingga kebetulan menang di halaman biasa (0,3,0) — tapi modal digambar di luar .v2-page, jadi di sanalah ia kalah dan kotak Category/Unit tetap putih. */ .select2-container--krajee-bs4 .select2-selection { border: 1px solid var(--line) !important; background-color: var(--surface-2) !important; color: var(--ink) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; min-height: 36px; } .select2-container--krajee-bs4 .select2-selection__rendered { color: var(--ink) !important; line-height: 24px; } .select2-container--krajee-bs4 .select2-selection--single { padding: 4px 8px; } .select2-container--krajee-bs4 .select2-selection__placeholder { color: var(--muted) !important; } .select2-container--krajee-bs4 .select2-selection__clear { color: var(--muted) !important; background: transparent !important; } /* Panah bawaannya segitiga dari border, bukan huruf — warnanya di border-top. */ .select2-container--krajee-bs4 .select2-selection--single .select2-selection__arrow b { border-top-color: var(--muted) !important; } .select2-container--krajee-bs4.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--muted) !important; } .select2-container--krajee-bs4.select2-container--focus .select2-selection, .select2-container--krajee-bs4.select2-container--open .select2-selection { border-color: var(--accent) !important; } /* Pilihan ganda: tiap tag punya latar sendiri. */ .select2-container--krajee-bs4 .select2-selection--multiple .select2-selection__choice { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border: 1px solid var(--line) !important; } .select2-container--krajee-bs4.select2-container--disabled .select2-selection, .select2-container--krajee-bs4.select2-container--disabled .select2-selection--multiple .select2-selection__choice { background-color: var(--line-2) !important; color: var(--muted) !important; } /* Tab bawaan Bootstrap (dipakai beberapa halaman lama). */ .v2-page .nav-tabs { border-bottom: 1px solid var(--line); gap: 2px; } .v2-page .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 9px 12px; background: transparent; } .v2-page .nav-tabs .nav-link.active { color: var(--accent-ink); border-bottom-color: var(--accent); background: transparent; } /* Pesan flash (widgets\Alert). */ .v2-page .alert { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13px; margin: 0; } .v2-page .alert-success { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .v2-page .alert-danger, .v2-page .alert-error { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .v2-page .alert-warning { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .v2-page .alert-info { background: var(--info-soft); color: var(--info); border-color: transparent; } /* Sisa kelas pembungkus milik tema lama: tanpa CSS cork ia tidak berarti apa-apa, tapi padding bawaannya bisa menyisakan celah aneh. Dinolkan. */ .v2-page .statbox, .v2-page .widget, .v2-page .box, .v2-page .layout-px-spacing, .v2-page .layout-top-spacing { padding: 0; margin: 0; background: transparent; box-shadow: none; border: 0; } /* Panel ExpandRow (rincian item di dalam baris) — latar dibedakan tipis supaya jelas ia milik baris di atasnya, bukan baris baru. */ .v2-page .kv-expand-detail, .v2-page .kv-expanded-row > td { background: var(--surface-2); } /* Judul tabel bawaan Kartik (panel heading) tidak dipakai lagi. */ .v2-page .kv-panel-before, .v2-page .kv-panel-after { border: 0; background: transparent; padding: 10px 13px; } /* ── Komponen bawaan yang memaksa putih ─────────────────────────────────── Bootstrap dan Kartik menulis `background-color: #fff` langsung di CSS-nya (27 tempat di bootstrap.css saja) — angka patok, bukan variabel. Selama halaman terang itu tidak kelihatan; begitu mode gelap menyala, elemen- elemen ini tetap putih dan layar jadi belang. Semuanya ditulis pakai token, jadi satu aturan melayani kedua tema. Diletakkan DI LUAR .v2-page karena sebagian (modal, dropdown, popup) ditempelkan ke , bukan ke dalam isi halaman. */ .dropdown-menu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); color: var(--ink); } .dropdown-item { color: var(--ink-2); } .dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--ink); } .dropdown-divider { border-top-color: var(--line-2); } .modal-content { background: var(--surface); color: var(--ink); } .modal-header, .modal-footer { border-color: var(--line-2); } .modal-backdrop.show { opacity: .55; } .close, .modal-header .close { color: var(--muted); text-shadow: none; opacity: 1; } .close:hover { color: var(--ink); } .list-group-item { background: var(--surface); border-color: var(--line); color: var(--ink); } .page-link { background: var(--surface); border-color: var(--line); color: var(--ink-2); } .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: var(--on-solid); } .page-item.disabled .page-link { background: var(--surface); border-color: var(--line); color: var(--muted); } .popover { background: var(--surface); border-color: var(--line); color: var(--ink); } .popover-header { background: var(--surface-2); border-bottom-color: var(--line-2); color: var(--ink); } .tooltip-inner { background: var(--ink); color: var(--surface); } /* Panel & tabel sisa Bootstrap 3 yang masih terbawa beberapa view lama. */ .panel { background: var(--surface); border-color: var(--line); } .panel-heading { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } table.table { color: var(--ink); } /* Garis kotak antar sel dihapus. Kartik memasang .table-bordered bawaan, dan garis tegak di setiap sel membuat tabel terlihat seperti lembar kerja spreadsheet. Pemisah baris (garis tipis mendatar) sudah cukup memandu mata; kolomnya sendiri sudah terpisah oleh jarak. */ .v2-page table.table.table-bordered, .v2-page table.table.table-bordered > tbody > tr > td, .v2-page table.table.table-bordered > thead > tr > th { border-left: 0; border-right: 0; } .v2-page table.table.table-bordered { border-top: 0; } /* Kartik: ikon buka-tutup baris & baris ringkasan. */ .kv-expand-icon, .kv-collapse-icon { color: var(--muted); } .kv-expand-detail-row > td, .kv-expanded-row > td { background: var(--surface-2); } .kv-page-summary { background: var(--surface-2); color: var(--ink); font-weight: 600; } .kv-grid-loading { background: var(--surface); opacity: .75; } /* Daftar pilihan Select2 — melayang di atas . Sama seperti kotaknya: krajee memakai pemilih atribut ([aria-selected]) yang tidak bisa dikalahkan dari sini tanpa !important. */ .select2-dropdown, .select2-container--krajee-bs4 .select2-dropdown { background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink) !important; } .select2-container--krajee-bs4 li.select2-results__option, .select2-container--krajee-bs4 .select2-results__option[aria-selected] { background-color: transparent !important; color: var(--ink-2) !important; } .select2-container--krajee-bs4 .select2-results__option.select2-results__option--selected, .select2-container--krajee-bs4 .select2-results__option[aria-selected=true] { background-color: var(--accent-soft) !important; color: var(--accent-ink) !important; } .select2-container--krajee-bs4 .select2-results__option--highlighted, .select2-container--krajee-bs4 .select2-results__option--highlighted[aria-selected] { background-color: var(--accent) !important; color: var(--on-solid) !important; } .select2-container--krajee-bs4 .select2-results__group { background-color: var(--surface-2) !important; color: var(--muted) !important; text-shadow: none !important; border-color: var(--line-2) !important; } /* Kotak cari di dalam daftar. Latarnya bergambar (search.png) — gambarnya dibiarkan, yang diganti hanya warnanya. */ .select2-container--krajee-bs4 .select2-search__field, .select2-container--krajee-bs4 .select2-search--dropdown .select2-search__field { background-color: var(--surface-2) !important; border-color: var(--line) !important; color: var(--ink) !important; } .select2-container--krajee-bs4 .select2-results__option[aria-disabled=true] { background: transparent !important; color: var(--muted) !important; } .select2-container--krajee-bs4 .select2-search__field::placeholder { color: var(--muted) !important; } /* Baris "memuat…" dan hasil pada tata letak kanan-ke-kiri: keduanya berlatar putih dengan gambar. Gambarnya dibiarkan, warnanya saja yang diganti. */ .select2-container--krajee-bs4 .select2-results__option.loading-results, .select2-container--krajee-bs4 .load-more, .select2-container--krajee-bs4 .select2-dropdown[dir="rtl"] .select2-results__option.loading-results { background-color: transparent !important; color: var(--muted) !important; } /* Tombol silang pada tag pilihan-ganda. */ .select2-container--krajee-bs4 .select2-selection--multiple .select2-selection__choice__remove { color: var(--muted) !important; background: transparent !important; } .select2-container--krajee-bs4 .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--danger) !important; } /* SweetAlert2 — popup konfirmasi yang muncul di hampir tiap form. */ .swal2-popup { background: var(--surface); color: var(--ink); border-radius: var(--radius); } .swal2-title, .swal2-html-container { color: var(--ink); } .swal2-input, .swal2-textarea { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); } /* Snackbar "Copied to clipboard" — biarkan gelap di kedua tema, memang dimaksudkan tampil sebagai lapisan di atas halaman. */ /* ============================================================================ Lampu sorot gambar (lightbox) ---------------------------------------------------------------------------- Lampiran gambar di chat ditandai `data-fancybox` dan dulu dinyalakan lewat `Fancybox.bind()` — API Fancybox v5, pustaka yang TIDAK PERNAH dimuat di aplikasi ini: tema cork cuma membawa fancybox 1.3.4 gaya jQuery (API-nya `$(...).fancybox()`, pengelompokan lewat atribut `rel`), dan layout v2 bahkan tidak memuat cork sama sekali. Jadi barisnya melempar ReferenceError dan gambar tidak pernah bisa dibuka. Penggantinya ditulis sendiri di main_v2.php: kecil, tanpa ketergantungan, dan sengaja ber-z-index di atas modal Bootstrap (modal = 1050) karena pemakainya justru chat di dalam modal Detail Task. ========================================================================== */ .v2-sorot { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 56px; background: rgba(8, 11, 22, .84); opacity: 0; transition: opacity .16s ease; } .v2-sorot.is-open { opacity: 1; } .v2-sorot img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .65); } /* Tombol memakai warna sendiri, bukan token tema: latarnya selalu gelap pekat di kedua mode, jadi ikut --ink justru bikin tombolnya lenyap di mode gelap. */ .v2-sorot button { position: absolute; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } .v2-sorot button:hover { background: rgba(255, 255, 255, .24); } .v2-sorot .tutup { top: 16px; right: 18px; } .v2-sorot .mundur { top: 50%; left: 16px; margin-top: -20px; } .v2-sorot .maju { top: 50%; right: 16px; margin-top: -20px; } .v2-sorot .hitung { position: absolute; top: 24px; left: 22px; color: rgba(255, 255, 255, .72); font-size: 12px; letter-spacing: .04em; } /* Satu gambar tidak perlu panah maupun penghitung "1 / 1". */ .v2-sorot.is-tunggal .mundur, .v2-sorot.is-tunggal .maju, .v2-sorot.is-tunggal .hitung { display: none; } @media (max-width: 640px) { .v2-sorot { padding: 64px 12px; } .v2-sorot .mundur { left: 8px; } .v2-sorot .maju { right: 8px; } } /* ── Latar kolom chat (wallpaper) ────────────────────────────────────────── Tiga layar memakai kolom chat: Inbox WA (.wa-msgs), Chat Internal (.im-msgs), dan catatan produksi di modal Task (.v2-detil-chat). Ketiganya diatur di satu tempat supaya pilihan orang berlaku di semuanya — beda latar antar layar justru terbaca seperti tiga aplikasi berbeda. Pilihannya disimpan di localStorage (kunci v2-doodle) dan dipasang sebagai atribut pada SEBELUM halaman digambar, sama seperti mode gelap — kalau menunggu skrip di akhir body, latar polos sempat berkedip dulu. Doodle-nya SVG yang digambar sendiri, bukan berkas gambar dari luar: latar chat tidak pantas menambah permintaan jaringan, dan bitmap akan pecah di layar beresolusi tinggi. Warnanya dua versi — coretan hitam samar untuk mode terang, putih samar untuk mode gelap; satu warna saja pasti hilang di salah satunya. */ [data-doodle="doodle"] .wa-msgs, [data-doodle="doodle"] .im-msgs, [data-doodle="doodle"] .v2-detil-chat { background-color: var(--ground); background-image: url("data:image/svg+xml,"); background-repeat: repeat; background-size: 400px 400px; } [data-theme="dark"][data-doodle="doodle"] .wa-msgs, [data-theme="dark"][data-doodle="doodle"] .im-msgs, [data-theme="dark"][data-doodle="doodle"] .v2-detil-chat { background-image: url("data:image/svg+xml,"); } /* Titik: cukup radial-gradient, tidak perlu gambar sama sekali. Warna titiknya ditulis LANGSUNG di gradiennya, bukan lewat currentColor + `color` pada kotaknya. Bentuk yang kedua itu pernah dipakai di sini dan akibatnya seluruh isi percakapan ikut pudar: `color` diwariskan, jadi tiap keturunan yang tidak menyebut warnanya sendiri — teks gelembung, nama berkas, keterangan lampiran — ikut mewarisi hitam 10% dan praktis tidak terbaca. Yang selamat cuma yang kebetulan punya warna sendiri (jam, pemisah tanggal), sehingga gejalanya terlihat seperti "teksnya tidak terkirim" alih-alih seperti latar yang salah pasang. */ [data-doodle="titik"] .wa-msgs, [data-doodle="titik"] .im-msgs, [data-doodle="titik"] .v2-detil-chat { background-color: var(--ground); background-image: radial-gradient(rgba(17, 17, 17, .10) 1px, transparent 1px); background-size: 18px 18px; } [data-theme="dark"][data-doodle="titik"] .wa-msgs, [data-theme="dark"][data-doodle="titik"] .im-msgs, [data-theme="dark"][data-doodle="titik"] .v2-detil-chat { background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); } /* Kolom catatan di modal Task tidak punya latar sendiri saat polos; begitu wallpaper dipilih ia butuh dasar supaya polanya tidak menempel di kartu. */ [data-doodle="doodle"] .v2-detil-chat, [data-doodle="titik"] .v2-detil-chat { border-radius: var(--radius-sm); padding: 8px; } /* Pemilih latar chat di bar atas. */ .v2-doodle-wrap { position: relative; } .v2-doodle-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 214px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.18); display: none; } .v2-doodle-menu.on { display: block; } .v2-doodle-menu h6 { font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin: 2px 4px 6px; } .v2-doodle-menu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1px solid transparent; background: none; color: var(--ink); padding: 6px 7px; font-size: 12.5px; border-radius: 7px; cursor: pointer; } .v2-doodle-menu button:hover { background: var(--surface-2); } .v2-doodle-menu button.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; } .v2-doodle-menu small { display: block; color: var(--muted); font-size: 10.5px; margin: 6px 5px 2px; line-height: 1.45; } /* Contoh kecil tiap pilihan — memilih latar tanpa melihat rupanya itu menebak. */ .v2-doodle-menu .cth { width: 30px; height: 22px; border-radius: 5px; flex: 0 0 auto; border: 1px solid var(--line); background-color: var(--ground); } .v2-doodle-menu .cth.doodle { background-image: url("data:image/svg+xml,"); background-size: 40px 40px; } .v2-doodle-menu .cth.titik { background-image: radial-gradient(rgba(17,17,17,.28) 1px, transparent 1px); background-size: 6px 6px; } [data-theme="dark"] .v2-doodle-menu .cth.titik { background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); }