/* * ATURAN PENAMAAN KELAS — BACA SEBELUM MENAMBAH KELAS BARU * =========================================================================== * SATU KELAS = SATU KOMPONEN. Modifier memakai awalan nama komponennya * (`wr-card--warn`), bukan kelas global yang ditempelkan ke mana-mana. * * Aturan ini ditulis karena pola yang sama sudah merusak tampilan LIMA KALI * di berkas ini, dan tiap kali gejalanya berbeda sehingga terlihat seperti * lima bug yang tidak berhubungan: * * .wr-warn nada peringatan SEKALIGUS kotak catatan * -> baris tabel jadi 12.5 px sementara baris lain 16 px, dan * kartu turun 22 px dari kartu di sebelahnya * .wr-sec judul bagian (flex) SEKALIGUS pembungkus bagian * -> judul berdiri di SAMPING tabelnya di 19 bagian * .wr-track bilah kemajuan 6 px SEKALIGUS tabel data * -> setiap tabel dipangkas jadi bentuk pil, huruf di sudutnya * hilang; skrip overflow TIDAK menangkapnya karena * pemangkasan oleh border-radius tidak mengubah scrollWidth * .wr-dec baris keputusan SEKALIGUS pembungkus angka * -> angka menonjol tampil 14 px dengan padding 13/16 px * .wr-kpi__* ukuran huruf menempel pada nada * * Kalau sebuah kelas dipakai pada dua jenis elemen yang tidak sekerabat * (
dan , dan ), itu tanda pertama tabrakannya. * Pisahkan namanya; JANGAN menambal dengan aturan penimpa di bawahnya — * tambalan meninggalkan tabrakannya tetap di sana untuk diinjak lagi. */ /* * MONOSPACE HANYA UNTUK KODE RECORD * =========================================================================== * Chip seperti "belum ada PIC", "0 hari di status ini", "Data hidup", dan * "definisi TF5 - belum divalidasi" sebelumnya dirender monospace. Kalimat * dengan huruf mesin ketik terbaca seperti sisa backtick markdown yang tidak * sengaja ikut ter-render, bukan seperti komponen yang memang dirancang. * * Yang tetap monospace hanya .wr-chip dan .wr-dec__n — keduanya berisi kode * record (DEMO-TSK-001, nomor keputusan), dan di sanalah lebar huruf yang * sama justru menolong: digit berbaris rapi antar-baris. */ /* |-------------------------------------------------------------------------- | Papan Eksekutif |-------------------------------------------------------------------------- | Tambahkan isi berkas ini ke bagian bawah resources/css/p100-theme.css, | atau daftarkan sebagai aset kedua di AppServiceProvider: | | FilamentAsset::register([ | Css::make('p100-theme', resource_path('css/p100-theme.css')), | Css::make('wr-papan-eksekutif', resource_path('css/wr-papan-eksekutif.css')), | ]); | | lalu jalankan: php artisan filament:assets | | CSS polos, bukan Tailwind. Project ini tidak punya rantai build front-end; | kelas Tailwind yang tidak ikut terkompilasi gagal secara diam-diam. | | DUA TEMA, MENGIKUTI PILIHAN PENGGUNA | -------------------------------------------------------------------------- | Berkas ini semula mengunci satu palet gelap, dengan alasan yang masuk akal | untuk Papan Eksekutif: papan itu dibaca dari jauh — layar rapat, proyektor, | ponsel yang diangkat ke arah orang lain — dan latar gelap membuat mata | langsung jatuh ke angka. | | Yang tidak diperhitungkan: berkas yang sama dipakai LIMA layar, termasuk | kartu domain di Dashboard, yang bukan papan baca-jauh melainkan layar kerja | biasa. Kelimanya tetap gelap walau pengguna memilih tema terang, dan | sebagian teksnya praktis hilang: --wr-muted di atas latar terang hanya | 2.46:1, --wr-paper 1.05:1. Ambang WCAG untuk teks kecil 4.5:1. | | Sekarang paletnya mengikuti tema. Nilai terang di :root, nilai gelap | ditimpa di html.dark. | | KENAPA html.dark, BUKAN prefers-color-scheme | -------------------------------------------------------------------------- | Filament menaruh class .dark di berdasarkan tombol tema yang | DIPILIH pengguna. `prefers-color-scheme` membaca setelan sistem operasi, | yang sering berbeda — dan kalau dipakai, papan akan gelap di siang hari | hanya karena laptopnya bertema gelap, mengabaikan pilihan yang baru saja | dibuat orangnya. | | KONTRAS KEDUA TEMA SUDAH DIHITUNG, BUKAN DIKIRA | -------------------------------------------------------------------------- | Seluruh pasangan warna di bawah diperiksa dengan rumus WCAG. Teks kecil | minimal 4.5:1, warna status dan aksen minimal 3:1. Yang terendah di tema | terang adalah brass 4.67:1 dan oranye 4.68:1; di tema gelap, dim 3.95:1. */ /* * TEMA TERANG — nilai bawaan. * * Ditaruh di :root, bukan di .wr-board, supaya html.dark bisa menimpanya. * Selektor .dark .wr-board juga bisa, tapi menaruh nilainya di akar membuat * satu tempat yang dibaca saat orang bertanya "warnanya apa". */ :root { --wr-ink: #F5F7FA; --wr-ink-2: #FFFFFF; --wr-ink-3: #EEF2F7; --wr-line: rgba(15, 23, 42, .10); --wr-line-2: rgba(15, 23, 42, .18); --wr-paper: #0B1722; --wr-muted: #4A6070; --wr-dim: #5C7182; --wr-brass: #8A6B12; --wr-brass-terang: #A8841C; /* * Warna status: hijau tuntas, merah macet, oranye bersyarat. * * Dulu ditulis langsung sebagai hex di sembilan tempat. Nilai yang sama * tidak bisa terbaca di kedua latar — #10B981 mencapai 7.14:1 di latar * gelap tapi hanya 2.28:1 di latar terang — jadi keduanya butuh nilai * sendiri, dan itu hanya mungkin lewat variabel. */ --wr-hijau: #047857; /* * Garis pil "live" ditulis sebagai variabel sendiri, bukan color-mix(). * * color-mix() belum didukung merata, dan kegagalannya SUNYI: properti * jadi tidak sah, bordernya diam-diam hilang, dan tidak ada yang tahu * sampai seseorang membandingkan dua layar. */ --wr-hijau-garis: rgba(4, 120, 87, .38); --wr-merah: #B91C1C; --wr-oranye: #B45309; --wr-oranye-latar: #FFF7ED; --wr-oranye-teks: #7C2D12; --wr-strip: rgba(15, 23, 42, .12); } /* * TEMA GELAP — palet asli papan. * * `html.dark` mengikuti tombol tema Filament. Nilainya sama persis dengan * yang dipakai sebelum berkas ini punya dua tema, jadi tampilan papan di * mode gelap tidak berubah sama sekali. */ html.dark { --wr-ink: #0B1722; --wr-ink-2: #11212F; --wr-ink-3: #16293A; --wr-line: rgba(255, 255, 255, .09); --wr-line-2: rgba(255, 255, 255, .16); --wr-paper: #EDF2F6; --wr-muted: #8CA2B4; /* * Dinaikkan dari #63788A. Diukur pada latar panel gelap (#11212F), * warna lama hanya 3.57:1 — di bawah 4.5:1 yang dituntut untuk teks * kecil, dan chip "belum divalidasi PMO" berukuran 10 px memakainya. * #7E93A5 memberi 5.15:1 dan tetap lebih redup daripada --wr-muted * (6.19:1), sehingga tingkatannya tidak berubah. */ --wr-dim: #7E93A5; --wr-brass: #C8A24B; --wr-brass-terang: #E2C377; --wr-hijau: #10B981; --wr-hijau-garis: rgba(16, 185, 129, .35); --wr-merah: #EF4444; --wr-oranye: #F97316; --wr-oranye-latar: #1D2A38; --wr-oranye-teks: #F8C9A6; --wr-strip: #2A3E52; } .wr-board { background: var(--wr-ink); color: var(--wr-paper); border-radius: 14px; padding: 28px; margin: -8px 0 0; font-size: 14px; line-height: 1.5; } .wr-board a { text-decoration: none; color: inherit; } .wr-board :focus-visible { outline: 2px solid var(--wr-brass); outline-offset: 2px; } /* ---------- kepala ---------- */ .wr-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .wr-eyebrow { font-family: var(--wr-font-ui, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--wr-brass); } .wr-title { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.1; font-weight: 600; letter-spacing: -.015em; margin: 10px 0 8px; color: var(--wr-paper); } .wr-sub { color: var(--wr-muted); margin: 0; max-width: 60ch; } .wr-stamp { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .wr-pill { font-family: var(--wr-font-ui, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); font-size: 11px; letter-spacing: .04em; border: 1px solid var(--wr-line-2); border-radius: 999px; padding: 4px 10px; color: var(--wr-muted); white-space: nowrap; } .wr-pill--live { color: var(--wr-hijau); border-color: var(--wr-hijau-garis); } .wr-pill--live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--wr-hijau); margin-right: 7px; vertical-align: 1px; animation: wr-pulse 2.4s ease-in-out infinite; } @keyframes wr-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } } /* * SATU KELAS, DUA PEKERJAAN — DIPISAH (yang KEEMPAT di berkas ini) * =========================================================================== * `.wr-track` dipakai untuk dua komponen yang tidak punya hubungan apa pun: * * 1. BILAH KEMAJUAN di papan eksekutif —
, tinggi 6 px, memang harus * berbentuk pil; dan * 2. TABEL DATA di papan PMO, Pekerjaan Saya, dan papan task force — *
setinggi ratusan piksel. * * Karena aturannya ditulis untuk bilah kemajuan, SETIAP tabel ikut menerima * `border-radius: 999px` dan `overflow: hidden`. Tabelnya lalu dipangkas * menjadi bentuk pil raksasa dan huruf di keempat sudutnya benar-benar * hilang — bukan elipsis, melainkan terpotong melengkung: * * /app/pmo table 758x308 px, radius 999px, overflow hidden * "TF1 — Developer Partnership & Project Qualification" * terbaca "…eveloper Partnership & Project …ication" * /app/saya table 581x48 px — radius ter-clamp jadi 24 px kiri-kanan, * "DEMO-ISU-002" kehilangan huruf D-nya * * KENAPA INI LOLOS DARI PEMERIKSAAN KEMARIN * --------------------------------------------------------------------------- * Skrip deteksi overflow membandingkan scrollWidth dengan clientWidth. * Pemangkasan oleh border-radius tidak mengubah keduanya sama sekali: isinya * muat, hanya saja sebagian piksel tidak digambar. Jadi skripnya * mengembalikan array kosong sementara hurufnya jelas hilang di layar. * * Namanya dipisah, bukan ditambal dengan `border-radius: 0` yang menimpa * belakangan — tambalan seperti itu meninggalkan tabrakannya tetap di sana * untuk diinjak lagi nanti. */ .wr-meter { height: 6px; background: var(--wr-ink-3); border-radius: 999px; overflow: hidden; margin: 22px 0 4px; } .wr-meter > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--wr-brass), var(--wr-brass-terang)); } /* * Tabel data. Sudut membulatnya sudah diurus `.wr-panel` (radius 10 px), jadi * tabelnya sendiri harus bersudut siku dan TIDAK BOLEH memangkas isinya. */ .wr-tabel { width: 100%; border-radius: 0; overflow: visible; } /* * Kolom terakhir rata kanan. * * Dengan lebar tabel 100%, sisa ruang jatuh ke kolom terakhir. Dibiarkan * rata kiri, isinya menggantung jauh dari tepi dan tabelnya terlihat * setengah jadi; rata kanan menutup barisnya dan membuat angka tenggat * sejajar antar-baris. */ .wr-tabel th:last-child, .wr-tabel td:last-child { text-align: right; } /* ---------- judul bagian ---------- */ /* * SATU KELAS, DUA PEKERJAAN — DIPISAH (yang ketiga di berkas ini) * =========================================================================== * `.wr-sec` dipakai dengan dua arti yang bertentangan: * * - di papan eksekutif sebagai JUDUL bagian:

, dengan * `display: flex` supaya judul dan keterangan kecilnya sebaris; dan * - di papan PMO, papan saya, dan papan task force sebagai PEMBUNGKUS * bagian:
yang berisi

DAN tabelnya. * * Pada pemakaian kedua, `display: flex` menjadikan seluruh isi bagian itu * anak flex dalam satu BARIS — judul berdiri di samping tabelnya, bukan di * atasnya, dan tabel yang terhimpit ikut terpotong di tepi kirinya. Persis * gejala yang terlihat pada blok "Issue saya", dan sebenarnya terjadi di * KESEMBILAN BELAS bagian yang memakai bentuk pembungkus. * * `.wr-sec` sekarang pembungkus (block), dan judulnya punya kelas sendiri. */ .wr-sec { display: block; margin: 32px 0 0; } .wr-judul-sec, .wr-sec > h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; color: var(--wr-paper); } .wr-judul-sec span, .wr-sec > h2 span { font-size: 12px; font-weight: 400; color: var(--wr-dim); } /* ---------- KPI ---------- */ .wr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* * EMPAT KARTU METRIK SAMA TINGGI * --------------------------------------------------------------------------- * Chip "definisi TF5 - belum divalidasi" membungkus jadi dua baris di * sebagian kartu dan satu baris di sebagian lain, sehingga keempat kartu * berbeda tinggi dan chip yang dua baris menabrak garis warna di dasar * kartu. Kartu yang tingginya tidak rata membuat deretannya terbaca seperti * salah render, bukan seperti empat angka setara. * * Kolomnya dibuat flex tegak dan chip-nya didorong ke dasar dengan * `margin-top: auto`, jadi berapa pun panjang keterangannya, garis chip * tetap sejajar antar-kartu. */ .wr-kpi { background: var(--wr-ink-2); border: 1px solid var(--wr-line); border-radius: 10px; padding: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%; } .wr-kpi::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w, 0%); background: var(--c, var(--wr-brass)); } .wr-kpi__lab { font-family: var(--wr-font-ui, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-muted); } .wr-kpi__num { /* * `line-height: 1` memberi kotak baris 38 px sementara glifnya butuh * 42 px, jadi angkanya menonjol keluar kotaknya sendiri. Tidak terlihat * karena tidak ada yang memotong, tapi ia membuat tinggi kartu meleset * 4 px dari yang dihitung. */ font-size: 38px; font-weight: 700; line-height: 1.1; margin: 10px 0 4px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .wr-kpi__num small { font-size: 16px; font-weight: 600; color: var(--wr-muted); } .wr-kpi__sub { font-size: 12px; color: var(--wr-muted); } .wr-kpi__flag { /* * `align-self: start` supaya chip hanya selebar teksnya, `margin-top: * auto` supaya ia menempel ke dasar kartu, dan `nowrap` supaya ia tidak * pernah lagi menjadi dua baris. Teksnya sendiri dipendekkan di blade; * kalimat panjangnya pindah ke tooltip. */ align-self: start; margin-top: auto; margin-bottom: 2px; font-family: var(--wr-font-ui, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); font-size: 10px; letter-spacing: .05em; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--wr-line-2); color: var(--wr-dim); white-space: nowrap; } /* Keterangan mengisi sisa ruang, jadi chip di bawahnya selalu sejajar. */ .wr-kpi__sub { flex: 1 1 auto; } /* ---------- panel ---------- */ /* * KARTU SEBARIS HARUS SEJAJAR DAN SAMA LEBAR * --------------------------------------------------------------------------- * Sebelumnya 1.55fr lawan 1fr — kolom kanan 35% lebih sempit tanpa alasan * yang bisa disebut — dan `align-items: start`, sehingga kartu sebaris * berhenti di tinggi masing-masing. Digabung dengan `margin-top` yang ikut * menempel pada nada peringatan, kartu dalam satu baris punya tinggi 148, * 132, dan 150 px dengan titik atas yang berbeda-beda. * * `auto-fit` dengan lebar minimum juga menghapus kebutuhan aturan khusus di * layar sempit: kolomnya berkurang sendiri saat ruangnya habis. */ .wr-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: stretch; } /* * Kolom kanan menyempit saat isinya kosong. * * "Menunggu keputusan" yang kosong tetap memakan hampir separuh lebar layar, * dan ruang itu diambil dari kolom kiri yang justru penuh. Saat kosong ia * cukup selebar judulnya. */ .wr-grid2--sepi { grid-template-columns: 1fr minmax(180px, .34fr); } /* * Panel yang berdiri sendiri selebar papan. * * Menggantikan grid dua kolom pada papan gate: kartu di kolom kanan hanya * setinggi 200 px sementara papan gate melewati 1000 px, sehingga kolom * kanan jadi pita kosong dan papan gate mengerjakan deretan segmennya di * ruang yang lebih sempit dari yang tersedia. */ .wr-lebar-penuh { display: block; } /* * KARTU DOMAIN: KOLOM, BUKAN GRID. * ------------------------------------------------------------------------- * Grid menyamakan tinggi baris: dua kartu bersebelahan menempati baris yang * setinggi kartu terpanjang, dan kartu pendek menyisakan ruang kosong di * bawahnya. `align-items: start` menghentikan peregangannya tapi tidak * menutup celahnya — barisnya tetap setinggi yang terpanjang. * * Multi-kolom mengalirkan kartu berikutnya langsung setelah yang sebelumnya * selesai, jadi kartu pendek tidak menyisakan apa pun. `break-inside: avoid` * menjaga satu kartu tidak terbelah antar kolom. */ .wr-kolom2 { columns: 2; column-gap: 16px; } .wr-kolom2 > * { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 16px; display: block; } /* * `clip`, bukan `hidden`. * * Keduanya merapikan sudut membulat, tapi `hidden` menjadikan panel ini * wadah gulir: isinya yang kelebihan diam-diam bisa digulir program lain * dan tidak pernah terlihat pengguna. `clip` tidak membuat wadah gulir, * sehingga kelebihan lebar menjadi kesalahan yang KELIHATAN saat diukur, * bukan teks yang hilang diam-diam. */ .wr-panel { background: var(--wr-ink-2); border: 1px solid var(--wr-line); border-radius: 10px; overflow: clip; } .wr-panel__h { padding: 14px 16px; border-bottom: 1px solid var(--wr-line); } .wr-panel__h h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--wr-paper); } /* * KEADAAN KOSONG YANG SERAGAM * --------------------------------------------------------------------------- * Sebelumnya keadaan kosong hanyalah paragraf abu-abu, dan tiap papan * menulisnya dengan gaya berbeda. Paragraf abu-abu tidak memberi tahu apa * yang bisa dilakukan; ia terbaca seperti halaman yang gagal memuat. * * Bentuknya sekarang satu: tanda, kalimat, dan — kalau ada — satu tindakan. */ .wr-kosong { color: var(--wr-dim); padding: 18px 16px; margin: 0; font-size: 13px; display: flex; gap: 12px; align-items: flex-start; } .wr-kosong::before { content: "—"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--wr-line-2); display: grid; place-items: center; color: var(--wr-dim); font-size: 12px; line-height: 1; } .wr-kosong__aksi { display: inline-block; margin-top: 8px; font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--wr-line-2); color: var(--wr-muted); } .wr-kosong__aksi:hover { border-color: var(--wr-brass); color: var(--wr-brass); } /* ---------- pembungkus gulir tabel ---------- */ /* * KENAPA PEMBUNGKUS, BUKAN MENGECILKAN FONT * ------------------------------------------------------------------------- * `.wr-panel` memakai `overflow: hidden` supaya sudut membulatnya rapi. Efek * sampingnya: tabel yang lebih lebar dari panelnya TERPOTONG di kanan — * kolom paling kanan hilang tanpa satu pun tanda bahwa ia ada. * * Mengecilkan font akan menyembunyikan gejalanya sambil membuat angka lebih * sulit dibaca dari jauh, yang justru satu-satunya alasan papan ini ada. * * Pembungkus ini memberi tabelnya jalur gulir sendiri di dalam panel. */ .wr-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; /* * `min-width: 0` WAJIB, jangan dihapus. * * Item grid dan flex bawaannya `min-width: auto`, artinya ia menolak * menyusut di bawah lebar isinya. Tanpa baris ini, tabel yang lebar * MENARIK seluruh rantai induknya ikut melebar — terukur 830 px ruang * halaman berisi 1727 px isi — dan pembungkus ini tidak pernah sempat * menggulir apa pun, karena ia selalu selebar tabelnya. */ min-width: 0; max-width: 100%; } /* * Alasan yang sama, di SELURUH rantai induknya. * * Rantainya: grid halaman Filament (`auto-cols-fr`) > .wr-board > .wr-sec > * .wr-panel > .wr-gulir > table. Satu saja yang tertinggal `min-width: auto` * sudah cukup membuat tabel menarik semuanya melebar, dan pembungkus gulir * tidak pernah sempat bekerja. Disebut satu per satu, bukan dengan pemilih * universal, supaya `min-width` yang memang disengaja — seperti pada * `.wr-nama` — tidak ikut tersapu. */ .wr-board, .wr-board > *, .wr-sec, .wr-panel { min-width: 0; } /* * Lebar minimum supaya kolomnya tidak saling menghimpit sebelum gulirnya * muncul. Nilainya lebih kecil dari lebar panel di layar biasa, jadi di * layar lebar tidak ada gulir sama sekali. */ .wr-gulir > table { min-width: 560px; } /* * ANGKA TIDAK PERNAH DIPOTONG. * * `nowrap` pada seluruh sel membuat angka utuh dan mendorong kelebihannya ke * jalur gulir, bukan memampatkannya menjadi dua baris yang salah dibaca. */ /* * Angka tidak boleh membungkus — tapi kolom nama justru harus boleh. * Karena itu `.wr-nama` dikecualikan; tanpa pengecualian ini aturan nowrap * di sini akan mengalahkan pembungkusan yang baru saja diizinkan. */ .wr-tabel th, .wr-tabel td { white-space: nowrap; } .wr-tabel th.wr-nama, .wr-tabel td.wr-nama { white-space: normal; } /* * Kolom teks bebas (alasan, catatan) boleh membungkus dan dibatasi lebarnya. * Tanpa ini, satu kalimat panjang menentukan lebar seluruh tabel. */ .wr-tabel th.wr-prosa, .wr-tabel td.wr-prosa { white-space: normal; min-width: 220px; max-width: 420px; } /* * KOLOM PERTAMA TETAP TERLIHAT SAAT DIGULIR * --------------------------------------------------------------------------- * Sebagian tabel tetap lebih lebar daripada papannya. Menggulir tanpa jangkar * membuat orang kehilangan tahu baris mana yang sedang dibacanya, dan tidak * ada tanda apa pun bahwa masih ada kolom di kanan. * * Kolom pertama dibekukan, dan bayangan tipis di tepinya menjadi tanda bahwa * tabelnya berlanjut. */ .wr-gulir .wr-tabel th:first-child, .wr-gulir .wr-tabel td:first-child { position: sticky; left: 0; z-index: 1; background: var(--wr-ink-2); box-shadow: 1px 0 0 var(--wr-line); } /* * Bayangan penanda gulir, digambar dengan latar yang menempel pada * pembungkusnya sendiri sehingga muncul hanya saat isinya memang lebih lebar. */ .wr-gulir { background: linear-gradient(to right, transparent, transparent) local, linear-gradient(to left, rgba(15, 23, 42, .18), transparent 24px) scroll right center / 24px 100% no-repeat; } /* * KOLOM NAMA BOLEH DUA BARIS, BUKAN DIPOTONG * --------------------------------------------------------------------------- * Sebelumnya 280 px dengan nowrap dan elipsis, sementara isinya butuh * 299-363 px. Akibatnya SEMUA nama task force terpotong: * "TF1 - Developer Partnership & Project Qual..." * "TF7 - Strategic Communication, Content & ..." * * Tooltip memang menyimpan nama utuhnya, tapi tooltip hanya menolong orang * yang tahu harus mengarahkan tetikus ke sana — dan papan ini justru dibaca * dari jauh saat layar di-share, di mana tidak ada tetikus sama sekali. * * Membungkus ke baris kedua lebih murah daripada memotong: barisnya sedikit * lebih tinggi, tapi tidak ada nama yang hilang. `title` tetap dipasang di * blade untuk pembaca layar dan untuk nama yang tetap sangat panjang. */ .wr-nama { /* 200 px, bukan 240: pada 1280 px selisih inilah yang membuat tabel tujuh task force muat tanpa perlu digulir sama sekali. */ min-width: 200px; width: auto; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; } /* ---------- papan gate ---------- */ /* * KOLOM ANGKA MENGAMBIL LEBAR YANG IA BUTUHKAN * --------------------------------------------------------------------------- * Diukur di 1150 px: kolom ketiga selebar 58 px sementara isinya butuh 80-92 * px, dan `.wr-panel` memakai `overflow: hidden`. Hasilnya "0 tertahan" * tampil sebagai "0 tertaha" dan "45 tertahan" sebagai "45 tertah" — di * KETUJUH baris, TF1 sampai TF7. * * Yang mengalah sekarang segmen gate-nya (1fr), bukan angkanya: segmen * kehilangan beberapa piksel tanpa kehilangan makna, sedangkan angka yang * terpotong berhenti menjadi angka. `max-content` memastikan lebarnya cukup * juga saat angkanya tiga digit. */ .wr-rung { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(96px, max-content); gap: 14px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--wr-line); transition: background .15s; } .wr-rung:hover { background: var(--wr-ink-3); } .wr-rung__code { font-size: 15px; font-weight: 700; letter-spacing: .02em; } .wr-rung__code i { display: block; font-style: normal; font-family: var(--wr-font-ui, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); font-size: 9.5px; color: var(--wr-dim); letter-spacing: .06em; font-weight: 400; margin-top: 2px; } .wr-segs { display: flex; gap: 3px; height: 22px; } .wr-segs i { flex: 1; border-radius: 3px; background: var(--wr-ink-3); border: 1px solid var(--wr-line); } .wr-segs i.is-done { background: var(--wr-hijau); border-color: transparent; } /* * Kotak tahap TF1 yang bisa diklik (Papan PMO) — 11 September 2026, lihat * batang-tf.blade.php. BUG YANG DIPERBAIKI: `.wr-segs i { flex: 1 }` di * atas cuma berlaku untuk yang jadi ANAK LANGSUNG flex container * `.wr-segs`. Membungkus tiap dengan (supaya kotaknya bisa diklik) * membuat -lah yang jadi anak flex-nya — di dalamnya kehilangan * flex:1, kolaps jadi garis tipis (lebar alami elemen kosong). Perbaikannya: * ikut jadi flex container sendiri (flex:1 + display:flex), dan di * dalamnya diberi flex:1 lagi supaya mengisi penuh pembungkusnya — * hasil akhirnya kotak yang sama persis ukurannya dengan sebelum dibungkus. */ .wr-segs a { flex: 1; display: flex; text-decoration: none; } .wr-segs a i { flex: 1; } /* * Aksen warna TF pada kotak tahap Papan PMO — permintaan PMO, 11 September * 2026. --tf-color disetel inline di batang-tf.blade.php (hanya saat * dipanggil dari Papan PMO, BUKAN Papan Eksekutif — di sana kotak * "hijau/garis miring" TETAP warna status, sengaja tidak disentuh, lihat * catatan di papan-eksekutif.blade.php). Border, bukan background — supaya * warna is-done (hijau = status "tercapai") tetap yang paling menonjol; * warna TF di sini murni identitas KOLOM/BARIS, bukan status. */ .wr-segs--tf i { border-color: var(--tf-color, var(--wr-line)); border-width: 2px; } .wr-segs--tf i.is-done { border-color: var(--tf-color, transparent); } /* * Satuan batang, di ujung baris. * * Aturan mengikat: satu kotak berarti apa harus bisa dibaca TANPA bertanya. * Karena satuannya berbeda per task force, menyebutnya sekali di keterangan * papan saja tidak cukup — pembaca yang menyusuri satu baris tidak sedang * melihat keterangan itu. */ .wr-satuan { display: block; font-style: normal; font-size: 9px; color: var(--wr-dim); letter-spacing: .04em; margin-top: 1px; } /* Keterangan di bawah papan; perbedaan satuan justru ditonjolkan. */ .wr-catatan-papan { margin: 12px 0 0; font-size: 11.5px; } /* * Baris tanpa gate: keadaan kosong yang berbicara, bukan ruang kosong. * * Dibuat serupa tinggi dengan deretan segmen supaya tinggi barisnya tidak * melompat, dan diredupkan supaya tidak bersaing dengan baris yang punya * data sungguhan. */ .wr-segs--nihil { align-items: center; border: 1px dashed var(--wr-line); border-radius: 4px; padding: 0 10px; } .wr-segs--nihil em { font-style: normal; font-size: 10.5px; color: var(--wr-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wr-rung--cair .wr-segs i:not(.is-done) { background: repeating-linear-gradient(135deg, var(--wr-ink-3) 0 4px, transparent 4px 8px); } .wr-rung__pct { font-size: 19px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .wr-rung__pct i { display: block; font-style: normal; font-family: var(--wr-font-ui, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); font-size: 9px; color: var(--wr-dim); font-weight: 400; } .wr-legend { padding: 12px 16px; display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--wr-font-ui, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); font-size: 10px; color: var(--wr-dim); } .wr-legend span { display: flex; align-items: center; gap: 6px; } .wr-legend b { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .wr-hatch { background: repeating-linear-gradient(135deg, var(--wr-strip) 0 3px, transparent 3px 6px); border: 1px solid var(--wr-line); } /* ---------- keputusan ---------- */ /* * SATU KELAS, DUA PEKERJAAN — DIPISAH (yang KELIMA, ditemukan saat menyisir * tabrakan lain setelah kasus .wr-track) * =========================================================================== * `.wr-dec` adalah BARIS KEPUTUSAN di papan eksekutif: flex, berjarak, dengan * garis pemisah di bawahnya. Tapi ia juga dipakai membungkus ANGKA tunggal di * kartu "Daftar tagihan" (papan PMO), kartu KPI, ringkasan Pekerjaan Saya, * dan papan task force. * * Akibatnya angka-angka itu mewarisi `display: flex`, `padding: 13px 16px`, * dan ukuran huruf bawaan 14 px — terukur di /app/pmo. Jadi angka yang * seharusnya menonjol justru tampil sebesar teks biasa, dengan jarak dalam * yang tidak diminta siapa pun. * * Angka sekarang memakai `.wr-angka`. */ .wr-dec { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--wr-line); } /* * Angka tunggal yang menonjol di dalam kartu. * * `tabular-nums` supaya digit berbaris rapi antar-kartu — dua kartu * bersebelahan dengan angka yang tidak sejajar terbaca seperti salah render. */ .wr-angka { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--wr-paper); margin-bottom: 2px; } /* * Cacah kecil di ujung baris daftar (kartu domain). Bukan angka menonjol dan * bukan baris keputusan — ia menempel di kanan judul barisnya. */ .wr-cacah { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; color: var(--wr-muted); } /* Di papan task force angka ini berupa kalimat pendek, bukan digit tunggal. */ .wr-angka--kalimat { font-size: 15px; font-weight: 600; letter-spacing: 0; } .wr-dec:last-of-type { border-bottom: 0; } .wr-dec__n { font-family: ui-monospace, monospace; font-size: 11px; color: var(--wr-brass); padding-top: 2px; } .wr-dec p { margin: 0 0 5px; font-size: 13.5px; line-height: 1.4; } .wr-dec__meta { font-family: var(--wr-font-ui, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); font-size: 10.5px; color: var(--wr-dim); } .wr-dec__meta em { font-style: normal; color: var(--wr-merah); } /* ---------- pergerakan ---------- */ .wr-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; padding: 14px 16px; } .wr-card { display: block; background: var(--wr-ink-3); border: 1px solid var(--wr-line); border-radius: 8px; padding: 12px 13px; transition: border-color .15s; } .wr-card:hover { border-color: var(--wr-line-2); } /* * Identitas warna task force — permintaan PMO, 11 September 2026. * Lihat App\Support\WarnaTaskForce untuk pemetaan kode → HEX (dipakai apa * adanya, SAMA di light/dark — cuma kontras latarnya yang menyesuaikan * tema lewat --wr-ink-3/--wr-line yang sudah ada di atas). * * --tf-color disetel inline per kartu (style="--tf-color: #2563EB"), * dibaca dua tempat di sini: garis aksen kiri, dan lencana kode TF. * * "Kotak 3D" = box-shadow tipis dua lapis (dekat + jauh), BUKAN animasi — * dipisah dari .wr-card polos supaya kartu yang tidak berafiliasi TF * (mis. kartu tanpa domain) tidak ikut berubah tampilannya. */ .wr-card--tf { border-left: 4px solid var(--tf-color, var(--wr-line)); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 8px rgba(15, 23, 42, .08); } html.dark .wr-card--tf { box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .3); } .wr-tf-badge { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px; margin-left: 6px; color: var(--tf-color); background: color-mix(in srgb, var(--tf-color) 16%, transparent); vertical-align: middle; } /* * Kartu yang MEMANG tombol harus terlihat seperti tombol. * * Dua kartu besar di Pekerjaan Saya adalah tautan, tapi bentuknya sama * persis dengan kartu yang hanya menampilkan angka — tidak ada satu pun * tanda bahwa ia bisa diklik sampai tetikus menyentuhnya. */ .wr-card--aksi { position: relative; padding-right: 38px; } .wr-card--aksi::after { content: "→"; position: absolute; right: 14px; top: 12px; color: var(--wr-dim); transition: transform .15s, color .15s; } .wr-card--aksi:hover { border-color: var(--wr-brass); background: var(--wr-ink-2); } .wr-card--aksi:hover::after { transform: translateX(3px); color: var(--wr-brass); } .wr-chips { display: flex; gap: 6px; margin-bottom: 7px; flex-wrap: wrap; } /* * Chip status: warnanya di titik, bukan di hurufnya. Lihat alasan terukur * di papan-eksekutif.blade.php. */ .wr-chip--status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--wr-titik, currentColor); margin-right: 6px; vertical-align: 1px; } .wr-chip { font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: .05em; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--wr-line-2); color: var(--wr-muted); } .wr-card h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--wr-paper); } .wr-card__who { display: block; font-family: var(--wr-font-ui, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); font-size: 10.5px; color: var(--wr-dim); } .wr-card__ev { display: block; margin-top: 8px; font-size: 11.5px; color: var(--wr-muted); } .wr-card__ev.is-no { color: var(--wr-oranye); } /* ---------- catatan ---------- */ /* * SATU KELAS, DUA PEKERJAAN — DIPISAH * =========================================================================== * `.wr-warn` dipakai di dua tempat yang berbeda sifatnya: * * 1. sebagai KOTAK CATATAN yang berdiri sendiri (satu
di papan * eksekutif), dan * 2. sebagai NADA pada baris tabel, kartu, dan item daftar di papan PMO, * papan saya, papan task force, dan kartu domain. * * Karena satu kelas membawa keduanya, `font-size: 12.5px` dan * `margin-top: 22px` ikut menempel ke mana pun nada itu dipakai. Akibatnya * terukur: * * - baris tabel bernada peringatan dirender 12.5 px sementara baris biasa * 16 px, sehingga tabel "Tujuh task force" tampak melengkung dan * kolomnya tidak sejajar; * - kartu bernada peringatan turun 22 px dari kartu di sebelahnya, jadi * kartu sebaris punya tinggi awal yang berbeda. * * Ukuran huruf dan jarak BUKAN urusan nada. `.wr-warn` sekarang hanya * warna; yang butuh kotak memakai `.wr-warn--kotak`. */ .wr-warn { border: 1px solid rgba(249, 115, 22, .35); background: rgba(249, 115, 22, .07); color: var(--wr-oranye-teks); } /* Kotak catatan yang berdiri sendiri — di sinilah jarak dan ukurannya. */ .wr-warn--kotak { margin-top: 22px; border-radius: 8px; padding: 13px; font-size: 12.5px; line-height: 1.55; } .wr-warn--kotak b { display: block; color: var(--wr-oranye); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; } /* ---------- layar sempit ---------- */ @media (max-width: 1024px) { .wr-grid2 { grid-template-columns: 1fr; } .wr-grid2--sepi { grid-template-columns: 1fr; } .wr-kolom2 { columns: 1; } .wr-kpis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .wr-board { padding: 18px 14px; border-radius: 10px; } .wr-stamp { margin-left: 0; } .wr-kpi__num { font-size: 32px; } /* * PAPAN GATE MENUMPUK TEGAK DI PONSEL * ----------------------------------------------------------------- * Tiga kolom tidak muat di 390 px: 54 + 46 px ditambah jarak * menyisakan terlalu sedikit untuk deretan segmen, dan barisnya * meluber 337 px di ruang 328 px. Aturan lama juga mengecilkan kolom * angka jadi 46 px — persis kesalahan yang baru diperbaiki di layar * besar, cuma pindah tempat. * * Ditumpuk, tidak ada yang perlu mengalah: kode di atas, segmen di * tengah selebar layar, angka di bawah dengan ukuran penuh. */ .wr-rung { grid-template-columns: 1fr; gap: 8px; padding: 12px; } .wr-rung__pct { text-align: left; font-size: 17px; } /* Ditumpuk, keterangan boleh sebaris dengan angkanya. */ .wr-rung__pct i { display: inline; margin-left: 6px; } .wr-segs { height: 18px; gap: 2px; } /* * Keterangan "belum ada gate terdaftar" tidak muat satu baris di 390 px. * Ditumpuk begini tingginya boleh bertambah, jadi ia dibiarkan membungkus * ketimbang meluber keluar panel. */ .wr-segs--nihil { height: auto; padding: 6px 10px; } .wr-segs--nihil em { white-space: normal; } .wr-feed { grid-template-columns: 1fr; padding: 12px; } } @media (prefers-reduced-motion: reduce) { .wr-board *, .wr-board *::before { animation: none !important; transition: none !important; } } /* * Tautan antar modul di dalam papan. * * SELEKTORNYA DUA KELAS, DAN ITU PERLU * ------------------------------------------------------------------------- * Di atas ada `.wr-board a { color: inherit; }` dengan spesifisitas (0,1,1). * `.wr-link` sendirian hanya (0,1,0) dan KALAH — tautannya akan tampil * sewarna teks biasa, hanya dengan garis bawah. `.wr-board .wr-link` (0,2,0) * menang karena jumlah kelasnya lebih banyak. */ .wr-board .wr-link { display: inline-block; margin-top: 4px; font-weight: 600; /* * `--wr-brass`, bukan warna biru baru: itu satu-satunya warna aksen yang * memang dimiliki tema ini. Menambah warna kedua berarti dua aksen yang * akan berbeda arah begitu temanya disetel ulang. */ color: var(--wr-brass); text-decoration: none; border-bottom: 1px solid currentColor; } .wr-board .wr-link:hover { opacity: .85; }