/* Warna, ukuran, dan potongan dasar dari core/ui.js. Berkas ini yang dimuat pertama; berkas style lain memakai nilai di sini. Sengaja dipecah per bagian - di arsip lama satu berkas CSS tumbuh jadi 44 KB berisi tampilan semua layar sekaligus. */ /* DUA KUMPULAN WARNA, dan tiap nilainya cuma ditulis SEKALI - di blok pertama di bawah. Yang di bawahnya bukan salinan warnanya melainkan SAKELAR: mereka cuma menunjuk kumpulan mana yang sedang dipakai. Bahaya yang dijaganya sama dengan aturan nomor satu di BACA-DULU.md. Sebelum ini kumpulan gelapnya ditulis utuh untuk kedua kalinya di dalam @media, dan begitu ada pilihan "selalu gelap" ia harus ditulis untuk ketiga kalinya - tiga tempat yang harus diubah bersamaan tiap kali satu warna digeser, dan yang terlewat berkelakuan diam-diam berbeda. */ :root { --terang-latar: #f6f6f7; --terang-kertas: #ffffff; --terang-garis: #dcdce0; --terang-tinta: #17171a; --terang-tinta-redup: #6b6b73; --terang-utama: #17171a; --terang-utama-tinta: #ffffff; --terang-netral: #e8e8ec; --terang-hijau: #1e8449; --terang-tunggu: #9c6b00; --terang-merah: #c0392b; --gelap-latar: #0f0f10; --gelap-kertas: #1a1a1d; --gelap-garis: #2e2e33; --gelap-tinta: #f2f2f4; --gelap-tinta-redup: #9a9aa3; --gelap-utama: #f2f2f4; --gelap-utama-tinta: #17171a; --gelap-netral: #2e2e33; --gelap-hijau: #6fdc9b; --gelap-tunggu: #ecc26a; --gelap-merah: #f0857a; --latar: var(--terang-latar); --kertas: var(--terang-kertas); --garis: var(--terang-garis); --tinta: var(--terang-tinta); --tinta-redup: var(--terang-tinta-redup); --utama: var(--terang-utama); --utama-tinta: var(--terang-utama-tinta); --netral: var(--terang-netral); --chip-hijau: var(--terang-hijau); --chip-tunggu: var(--terang-tunggu); --chip-merah: var(--terang-merah); --sudut: 12px; --sela: 12px; --kepala-tinggi: 56px; --kaki-tinggi: 64px; /* Pengali ukuran huruf. Dipasang core/theme.js di ; 1 kalau tak seorang pun pernah menggantinya. */ --skala: 1; } /* Sakelar pertama: HP-nya sedang gelap. Dilewati kalau orangnya memilih "selalu terang" - pilihannya sendiri menang atas setelan HP. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { --latar: var(--gelap-latar); --kertas: var(--gelap-kertas); --garis: var(--gelap-garis); --tinta: var(--gelap-tinta); --tinta-redup: var(--gelap-tinta-redup); --utama: var(--gelap-utama); --utama-tinta: var(--gelap-utama-tinta); --netral: var(--gelap-netral); --chip-hijau: var(--gelap-hijau); --chip-tunggu: var(--gelap-tunggu); --chip-merah: var(--gelap-merah); } } /* Sakelar kedua: orangnya memilih "selalu gelap", apa pun setelan HP-nya. */ :root[data-tema="gelap"] { --latar: var(--gelap-latar); --kertas: var(--gelap-kertas); --garis: var(--gelap-garis); --tinta: var(--gelap-tinta); --tinta-redup: var(--gelap-tinta-redup); --utama: var(--gelap-utama); --utama-tinta: var(--gelap-utama-tinta); --netral: var(--gelap-netral); --chip-hijau: var(--gelap-hijau); --chip-tunggu: var(--gelap-tunggu); --chip-merah: var(--gelap-merah); } * { box-sizing: border-box; } /* Rantai tinggi 100% harus utuh dari html sampai #app; kalau satu mata rantai putus, layar yang seharusnya penuh ikut mengempis ke atas. */ html, body, #app { margin: 0; height: 100%; } /* SATU-SATUNYA TEMPAT --skala DIPAKAI, dan itu yang membuat "Besar / Sangat besar" berlaku untuk SELURUH tulisan. Sebelumnya ia dipasang di body, dan tiap ukuran lain ditulis dalam px - jadi chip, keterangan, dan label kecil tetap 13px berapa pun ukuran yang dipilih, dan yang membesar cuma tubuh tulisannya. Sekarang ukuran akar yang berpindah, dan seluruh berkas style/ menyebut ukurannya dalam rem: 13px jadi 0.8125rem. Jarak, lebar, dan garis tetap px - yang diminta membesar tulisannya, bukan kotaknya. */ html { font-size: calc(16px * var(--skala, 1)); } body { background: var(--latar); color: var(--tinta); /* Huruf minimal 16px: di iOS ukuran di bawah itu memicu zoom otomatis saat kolom isian disentuh. Itu juga sebabnya --skala cuma pernah bernilai 1 atau lebih - lihat UKURAN di core/theme.js. */ font: 1rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; } /* ---------- tombol ---------- */ .tombol { min-height: 40px; border: 1px solid var(--garis); background: var(--kertas); border-radius: var(--sudut); padding: 7px 14px; font-size: 0.875rem; cursor: pointer; transition: opacity 0.12s; } .tombol:active { opacity: 0.7; } .tombol:disabled { opacity: 0.45; cursor: default; } .tombol--utama { background: var(--utama); color: var(--utama-tinta); border-color: var(--utama); font-weight: 600; } .tombol--sunyi { background: transparent; border-color: transparent; color: var(--tinta-redup); } .tombol--lebar { width: 100%; } /* ---------- tombol ikon ---------- */ .tombol-ikon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--garis); border-radius: 9px; background: var(--kertas); color: var(--tinta-redup); cursor: pointer; } .tombol-ikon:hover { color: var(--tinta); } .tombol-ikon:active { opacity: 0.7; } .ikon { display: block; flex: none; } /* ---------- chip ---------- */ .chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--netral); font-size: 0.8125rem; line-height: 1.6; white-space: nowrap; } /* Warna titik status. Namanya menyebut WARNA, bukan artinya, karena satu warna dipakai banyak keadaan: "tunggu" dipakai member yang diundang, koneksi yang belum dijawab, dan nanti task yang belum jalan. */ .chip--hijau { background: rgba(39, 174, 96, 0.18); color: var(--chip-hijau); } .chip--tunggu { background: rgba(230, 160, 20, 0.2); color: var(--chip-tunggu); } .chip--merah { background: rgba(192, 57, 43, 0.16); color: var(--chip-merah); } /* ---------- titik status ---------- Rupa kedua dari keadaan yang sama dengan chip di atas, dan warnanya dinamai sama persis supaya satu keadaan tidak pernah punya dua warna tergantung ia digambar sebagai titik atau sebagai chip. Dipakai di kartu daftar: Draft dan Active cuma dua keadaan, dan tulisan "Active" pada tiap kartu memakan baris pertama tiap kartu untuk mengabarkan hal yang sama berulang-ulang. */ .titik { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--netral); } .titik--hijau { background: #27ae60; } .titik--tunggu { background: #e6a014; } .titik--merah { background: #c0392b; } /* ---------- panel ---------- */ .panel { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--sudut); overflow: hidden; } .panel__kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--sela); padding: 12px var(--sela); border-bottom: 1px solid var(--garis); } .panel__judul { margin: 0; font-size: 1rem; font-weight: 600; } /* Tombol di kepala panel selalu tombol pendamping, bukan tindakan utama layar - ukurannya menyusut supaya judulnya tetap yang terbaca lebih dulu. */ .panel__kepala .tombol { min-height: 34px; padding: 5px 10px; font-size: 0.875rem; } .panel__aksi { display: flex; align-items: center; gap: 8px; flex: none; } /* Ikon navigasi di kepala Builder berdiri sendiri. Rel aksi tabel tetap memakai bingkai kecilnya sendiri karena ia bagian dari sebuah sel. */ .panel__aksi > .tombol-ikon { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; } .panel__aksi > .tombol-ikon:focus-visible, .panel__tutup:focus-visible { outline: 2px solid var(--utama); outline-offset: 2px; } .panel__tutup { padding: 0 2px; border: 0; background: none; color: var(--tinta-redup); font-size: 1.625rem; line-height: 1; cursor: pointer; } /* Blok, bukan grid - alasannya sama dengan .rangka__isi di shell.css: panel memakai overflow hidden, dan anak semacam itu boleh diperas di dalam grid. */ .panel__isi { padding: var(--sela); } .panel__isi > * + * { margin-top: 8px; } /* Wadah halaman daftar kerja tidak perlu menjadi kartu kedua di belakang kartu-kartu datanya. Varian ini mempertahankan susunan Panel, tetapi menyerahkan ruang dan latarnya langsung kepada layar. */ .panel--rata { overflow: visible; border: 0; border-radius: 0; background: none; } .panel--rata .panel__isi { padding: 0; } /* ---------- avatar ---------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--netral); object-fit: cover; font-size: 0.875rem; font-weight: 600; } .avatar--bulat { border-radius: 999px; } .avatar--kotak { border-radius: 9px; } /* ---------- keadaan kosong & menunggu ---------- */ .memuat, .kosong { display: grid; place-content: center; gap: 6px; min-height: 40vh; padding: 24px; text-align: center; color: var(--tinta-redup); } .kosong__judul { font-size: 1.125rem; font-weight: 600; color: var(--tinta); } .kosong__aksi { margin-top: 10px; }