/* ===================================================================== Portal Padma - gaya antarmuka Tata letak mengikuti Bitrix24: menu utama vertikal di kiri, submenu horizontal di atas. Netral kebiruan dengan aksen teal. ===================================================================== */ :root { --ground:#f6f8f8; --surface:#fff; --surface-2:#eef3f4; --surface-3:#e6edee; --ink:#142126; --ink-soft:#33474f; --muted:#5c7178; --line:#dbe4e6; --line-soft:#e9eff0; --accent:#0d6e7c; --accent-2:#0a5b67; --accent-w:#e2f0f1; /* Tulisan di atas warna peringatan - putih harfiah, dan memang TIDAK ikut tema: latarnya var(--crit) di mode terang maupun gelap. Dijadikan token supaya gaya di EKOR berkas ini bisa memakainya tanpa menulis #hex, yang dilarang dua penjaga (uji_web_push, uji_proyek_fitur_nia). 22 Okt 2026. */ --lencana-teks:#fff; --ok:#2f6f4c; --ok-w:#e4f1e8; --warn:#93610f; --warn-w:#fbf0da; --crit:#9e382b; --crit-w:#fae7e4; --radius:4px; --sidebar-lebar:240px; --sidebar-sempit:62px; --topbar-tinggi:56px; --subnav-tinggi:41px; --rel-lebar:54px; --notif-lebar:320px; /* Garis bagan dibuat terpisah dari --line. Garis pembatas tabel boleh samar, tapi garis penghubung bagan HARUS terbaca - itu satu-satunya yang menjelaskan siapa membawahi siapa. */ --og-garis:#8fb0b8; --shadow:0 1px 2px rgba(20,33,38,.06), 0 8px 24px -18px rgba(20,33,38,.4); } @media (prefers-color-scheme: dark) { :root { /* Memberi tahu peramban bahwa halaman ini gelap. Tanpa ini, semua hiasan BAWAAN peramban tetap bergaya terang di atas halaman gelap: batang gulir putih dengan tombol panah, kotak pilihan bawaan yang menyala, dan bingkai isian bawaan. Satu baris ini memperbaiki semuanya sekaligus; tidak ada yang bisa ditambal dari sisi CSS kita sendiri. */ color-scheme: dark; --ground:#0f1719; --surface:#162226; --surface-2:#1b2a2f; --surface-3:#213238; --ink:#dce7e9; --ink-soft:#b6c8cd; --muted:#8ca3aa; --line:#26383e; --line-soft:#1f3036; --accent:#4fb0be; --accent-2:#6cc4d0; --accent-w:#16333a; --ok:#6fbb8c; --ok-w:#142b1f; --warn:#d6a24a; --warn-w:#2e2413; --crit:#e0796a; --crit-w:#331714; --og-garis:#5c8590; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.9); } } * { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; display: flex; align-items: flex-start; min-height: 100vh; } h1,h2,h3,h4 { margin: 0; line-height: 1.25; font-weight: 600; } h1 { font-size: 1.25rem; } h2 { font-size: 1.12rem; } h3 { font-size: .98rem; margin-top: .4rem; } p { margin: 0 0 .45rem; } a { color: var(--accent); } hr.rule { border: none; border-top: 1px solid var(--line-soft); margin: 2px 0; width: 100%; } .mono { font-family: ui-monospace, Consolas, "Cascadia Mono", monospace; } .small { font-size: .84rem; } .muted { color: var(--muted); } .num { text-align: right; font-variant-numeric: tabular-nums; } .req { color: var(--crit); } .inline { display: inline; } /* ===================================================================== MENU UTAMA - kolom kiri ===================================================================== */ .sidebar { position: sticky; top: 0; height: 100vh; width: var(--sidebar-lebar); flex: 0 0 var(--sidebar-lebar); background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 40; transition: width .16s ease, flex-basis .16s ease; } body.sidebar-kecil .sidebar { width: var(--sidebar-sempit); flex-basis: var(--sidebar-sempit); } .brand { display: flex; align-items: center; gap: 10px; height: var(--topbar-tinggi); padding: 0 16px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; flex: 0 0 auto; } /* Logo Padmatirta. Berkasnya ada dua warna. Yang asli berwarna nyaris putih - dibuat untuk latar gelap - dan akan lenyap di tema terang, jadi versi tinta teal dipakai di sana. Keduanya dimuat (masing-masing ~3 KB) dan CSS yang memilih; ini lebih andal daripada menebak tema di sisi PHP, sebab temanya ikut pengaturan sistem pengguna. */ .brand-logo { height: 30px; width: auto; flex: 0 0 auto; display: block; } .login-logo { height: 88px; width: auto; margin: 0 auto 4px; display: block; } .utk-gelap { display: none; } @media (prefers-color-scheme: dark) { .utk-terang { display: none; } .utk-gelap { display: block; } } /* Sisa gaya lama, masih dipakai di beberapa tempat. */ .brand-mark { width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50% 50% 50% 2px; background: var(--accent); transform: rotate(45deg); } .brand-mark.big { width: 22px; height: 22px; flex-basis: 22px; } .side-nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; } /* Butir menu TIDAK BOLEH menyusut - menu yang lebih tinggi dari layar harus DIGULIR, bukan dijejalkan. .side-item/.side-sub memakai overflow:hidden, dan pada anak flex itu menghapus batas tinggi minimumnya: begitu isi menu melebihi 100vh, setiap butir dimampatkan (42px -> 18px) sampai huruf dan ikonnya berimpit. Paling terasa di halaman modul Operasional - cabangnya terbuka dengan empat anak - dilaporkan pemilik projek 30 Sep 2026; di halaman lain pun terjadi bila layarnya pendek. */ .side-nav > *, .side-anak > * { flex-shrink: 0; } .side-item { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: var(--radius); color: var(--ink-soft); text-decoration: none; font-size: .93rem; white-space: nowrap; overflow: hidden; border-left: 3px solid transparent; } .side-item:hover { background: var(--surface-2); color: var(--ink); } .side-item.aktif { background: var(--accent-w); color: var(--accent); border-left-color: var(--accent); font-weight: 600; } .side-item .ikon { width: 20px; height: 20px; flex: 0 0 20px; } .side-segera { color: var(--muted); opacity: .55; cursor: default; } .side-segera:hover { background: transparent; color: var(--muted); } .side-pemisah { margin: 14px 11px 4px; font-size: .66rem; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); white-space: nowrap; overflow: hidden; } .side-kaki { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 8px; } .side-lipat { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 11px; border: none; border-radius: var(--radius); background: transparent; color: var(--muted); font: inherit; font-size: .86rem; cursor: pointer; white-space: nowrap; overflow: hidden; } .side-lipat:hover { background: var(--surface-2); color: var(--ink); } .side-lipat svg { width: 20px; height: 20px; flex: 0 0 20px; transition: transform .16s ease; } body.sidebar-kecil .side-lipat svg { transform: rotate(180deg); } /* Saat menu diperkecil, hanya ikon yang tersisa */ body.sidebar-kecil .side-teks, body.sidebar-kecil .brand-teks, body.sidebar-kecil .side-pemisah span { display: none; } body.sidebar-kecil .side-pemisah { border-top: 1px solid var(--line); margin: 10px 6px 6px; height: 1px; } body.sidebar-kecil .side-item, body.sidebar-kecil .side-lipat { justify-content: center; padding-left: 8px; padding-right: 8px; gap: 0; } body.sidebar-kecil .brand { justify-content: center; padding: 0; } body.sidebar-kecil .brand-logo { height: 26px; } /* ===================================================================== KOLOM ISI ===================================================================== */ .utama { flex: 1 1 auto; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-tinggi); display: flex; align-items: center; gap: 14px; padding: 0 22px; background: var(--surface); border-bottom: 1px solid var(--line); } .topbar-judul { flex: 1 1 auto; min-width: 0; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tombol-menu { display: none; border: none; background: transparent; color: var(--ink-soft); padding: 6px; border-radius: var(--radius); cursor: pointer; } .tombol-menu svg { width: 22px; height: 22px; display: block; } .me { display: flex; align-items: center; gap: 10px; font-size: .85rem; flex: 0 0 auto; position: relative; } .me-nama { color: var(--ink-soft); font-weight: 500; } .me-link { color: var(--accent); text-decoration: none; } .me-link:hover { text-decoration: underline; } /* ---- pil jam berjalan ---- */ .absen-pil { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 16px; border: 1px solid transparent; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; background: var(--surface-2); color: var(--ink-soft); white-space: nowrap; } .absen-pil svg { width: 14px; height: 14px; flex: 0 0 auto; } .absen-pil .absen-teks { font-variant-numeric: tabular-nums; } .absen-jalan { background: var(--accent); color: #fff; } .absen-jalan:hover { filter: brightness(1.07); } .absen-jeda { background: var(--warn-w, #fdf3dd); color: var(--warn, #8a6100); border-color: var(--warn, #8a6100); } .absen-tutup { background: var(--ok-w, var(--surface-2)); color: var(--ok, var(--ink-soft)); } .absen-kosong:hover { background: var(--line); color: var(--ink); } .me-avatar { border: none; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; line-height: 0; } .me-avatar:hover { box-shadow: 0 0 0 3px var(--accent-w); } /* ---- panel akun ---- */ .me-panel[hidden] { display: none; } .me-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; width: 320px; max-width: calc(100vw - 24px); background: var(--ground); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 34px rgba(10, 22, 26, .22); display: flex; flex-direction: column; padding: 12px; gap: 10px; text-align: left; } .me-kepala { display: flex; align-items: center; gap: 11px; } .me-kepala-teks { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .me-kepala-teks strong { font-size: .95rem; } .me-kepala-teks .tag { align-self: flex-start; } .me-absen { border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; } .me-absen-kepala { margin: 0; font-size: .86rem; } .me-absen-kepala strong { font-variant-numeric: tabular-nums; } .me-absen p.muted { margin: 0; } .me-absen-tombol { display: flex; gap: 8px; } .me-absen-tombol form { flex: 1 1 0; } .me-absen-tombol .btn { width: 100%; justify-content: center; } .me-daftar { display: flex; flex-direction: column; } .me-baris { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px; color: var(--ink-soft); text-decoration: none; font-size: .87rem; } .me-baris small { color: var(--muted); font-size: .76rem; } .me-baris:hover { background: var(--surface-2); color: var(--ink); } .me-baris-mati { opacity: .5; cursor: default; } .me-baris-mati:hover { background: transparent; } .me-kaki { border-top: 1px solid var(--line); padding-top: 9px; text-align: center; } /* ---------------- submenu horizontal ---------------- */ .subnav { position: sticky; top: var(--topbar-tinggi); z-index: 25; display: flex; align-items: stretch; gap: 2px; padding: 0 22px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; } .sub-item { display: flex; align-items: center; padding: 11px 14px 9px; color: var(--muted); text-decoration: none; font-size: .89rem; white-space: nowrap; border-bottom: 2px solid transparent; } .sub-item:hover { color: var(--ink); } .sub-item.aktif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* Modul yang belum dibangun: tetap terlihat, tidak bisa diklik. */ .sub-segera { color: var(--muted); opacity: .55; cursor: default; } .sub-segera:hover { color: var(--muted); } /* --- item yang punya daftar turun --- */ .sub-punya-turun { display: flex; align-items: stretch; position: relative; } .sub-punya-turun .sub-induk { padding-right: 4px; } .sub-panah { display: flex; align-items: center; justify-content: center; padding: 0 8px 2px 2px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; } .sub-punya-turun:hover > .sub-item, .sub-punya-turun:hover > .sub-panah { color: var(--ink); } .sub-panah svg { width: 13px; height: 13px; transition: transform .15s ease; } .sub-panah:hover { color: var(--ink); } .sub-panah[aria-expanded="true"] svg { transform: rotate(180deg); } .sub-punya-turun .sub-induk.aktif + .sub-panah { color: var(--accent); border-bottom-color: var(--accent); } /* Daftar turunnya dipasang position:fixed oleh app.js supaya tidak terpotong oleh bilah submenu yang bisa digeser mendatar. */ /* Penting: kelas ini memasang display:flex, dan itu MENGALAHKAN aturan bawaan browser untuk atribut [hidden]. Tanpa baris di bawah, panelnya tampil terus dan menutupi menu lain. */ .sub-turun[hidden] { display: none; } .sub-turun { position: fixed; z-index: 40; min-width: 190px; background: var(--ground); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-kuat, var(--shadow)); padding: 5px; display: flex; flex-direction: column; } .sub-turun-item { display: block; padding: 8px 12px; border-radius: 4px; color: var(--ink-soft); text-decoration: none; font-size: .86rem; white-space: nowrap; } .sub-turun-item:hover { background: var(--surface-2); color: var(--ink); } .sub-turun-item.aktif { color: var(--accent); font-weight: 600; background: var(--accent-w); } .sub-turun-item.sub-segera:hover { background: transparent; } .page { flex: 1 1 auto; padding: 22px; max-width: 1400px; width: 100%; } .page-title { display: none; } /* judul sudah tampil di topbar */ .foot { padding: 16px 22px 30px; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); } /* ---------------- tirai untuk layar kecil ---------------- */ .tirai { position: fixed; inset: 0; z-index: 35; background: rgba(10, 22, 26, .45); } /* ===================================================================== KOMPONEN ===================================================================== */ .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } .card { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; } .card-lead { border-top: 3px solid var(--accent); } .card-narrow { max-width: 460px; } .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); } .bar label { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--muted); } /* ---------------- pesan ---------------- */ .alert { padding: 11px 15px; border-radius: var(--radius); margin-bottom: 13px; border: 1px solid transparent; font-size: .92rem; } .alert-ok { background: var(--ok-w); border-color: var(--ok); color: var(--ok); } .alert-error { background: var(--crit-w); border-color: var(--crit); color: var(--crit); } .alert-warn { background: var(--warn-w); border-color: var(--warn); color: var(--warn); } .alert-info { background: var(--accent-w); border-color: var(--accent); color: var(--accent); } .alert a { color: inherit; } /* ---------------- toast ---------------- Kabar sekilas yang muncul SESUDAH sebuah perbuatan selesai, lalu hilang sendiri - 12 Okt 2026. Sebelum ini satu-satunya cara memberi kabar dari JavaScript adalah window.alert(), dan itu MENGHENTIKAN halaman sampai orangnya menekan OK. Untuk kabar baik - "berhasil" - itu salah bentuknya: yang berhasil tidak menuntut jawaban siapa pun. Warnanya dari token .alert yang sudah ada, bukan pasangan baru: satu kabar berhasil harus terlihat sama di mana pun ia muncul. aria-live di markupnya, bukan di sini - pembaca layar mengumumkannya tanpa memindahkan fokus, jadi orang yang sedang mengetik tidak terlempar. */ .toast-wadah { position: fixed; left: 50%; bottom: 26px; z-index: 90; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { max-width: min(420px, 92vw); padding: 10px 16px; border-radius: 999px; border: 1px solid transparent; font-size: .9rem; box-shadow: var(--shadow); background: var(--ok-w); border-color: var(--ok); color: var(--ok); animation: toast-masuk .18s ease-out; } .toast-buruk { background: var(--crit-w); border-color: var(--crit); color: var(--crit); } @keyframes toast-masuk { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Yang menyetel "kurangi gerak" di sistemnya tetap melihat toastnya - yang dibuang hanya geraknya. */ @media (prefers-reduced-motion: reduce) { .toast { animation: none; } } .callout { padding: 12px 16px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 16px; font-size: .92rem; color: var(--ink-soft); } .callout-warn { border-left-color: var(--warn); } /* ---------------- form ---------------- */ .form, form.card { gap: 14px; } .field { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; color: var(--ink-soft); } .field > span { font-weight: 500; } .field-check { flex-direction: row; align-items: center; gap: 8px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; width: 100%; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .btn { font: inherit; font-size: .89rem; cursor: pointer; padding: 8px 15px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; display: inline-block; white-space: nowrap; } .btn:hover { background: var(--surface-2); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); } .btn-danger { background: var(--crit); border-color: var(--crit); color: #fff; } .btn-ghost { background: transparent; } .btn-mini { padding: 3px 9px; font-size: .77rem; } .btn-block { width: 100%; } .btn:disabled { opacity: .5; cursor: default; } /* ---------------- avatar & profil ---------------- */ .avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; background: var(--accent-w); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 600; } .avatar-lg { width: 58px; height: 58px; flex-basis: 58px; font-size: 1.25rem; } .avatar-sm { width: 22px; height: 22px; flex-basis: 22px; font-size: .62rem; } /* Avatar berfoto. Inisial tetap ada di bawah fotonya sebagai lapisan cadangan - kalau gambarnya gagal dimuat, yang terlihat inisial, bukan bulatan kosong. Itu sebabnya di dalamnya tidak disembunyikan dengan display:none, melainkan ditumpuk di belakang. */ .avatar-foto { position: relative; overflow: hidden; padding: 0; } .avatar-foto > b { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; } .avatar-foto > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .profil { display: flex; gap: 16px; align-items: flex-start; } .profil-teks { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .jalur { font-size: .82rem; color: var(--accent); } .detail { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 6px 16px; margin: 0; font-size: .89rem; } .detail dt { color: var(--muted); font-size: .8rem; } .detail dd { margin: 0; color: var(--ink-soft); } .orang-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .orang-list-rapat { gap: 6px; } .orang-list li { display: flex; gap: 10px; align-items: center; } .orang-teks { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .orang-teks a { text-decoration: none; font-size: .92rem; } .orang-teks a:hover { text-decoration: underline; } .orang-teks small { color: var(--muted); font-size: .78rem; } /* ---------------- angka & batang ---------------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .tile { background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } .tile .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .tile .v { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; } .tile.is-warn .v { color: var(--warn); } .bars { display: flex; flex-direction: column; gap: 6px; } .bar-row { display: grid; grid-template-columns: minmax(90px, 1.4fr) 3fr 34px; gap: 10px; align-items: center; font-size: .82rem; } .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); } .bar-track { background: var(--surface-2); border-radius: 2px; height: 9px; overflow: hidden; } .bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; } .bar-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); } /* ---------------- tabel ---------------- */ .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .tbl { width: 100%; border-collapse: collapse; font-size: .87rem; } .tbl th, .tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .tbl thead th { background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl tbody tr:last-child td { border-bottom: none; } .tbl-hover tbody tr:hover { background: var(--surface-2); } .row-off { opacity: .55; } .tbl a { text-decoration: none; font-weight: 500; } .tbl a:hover { text-decoration: underline; } .pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; flex-wrap: wrap; } .pager-info { font-size: .82rem; color: var(--muted); } /* Penavigasi DI ATAS tabel. ---------------------------------------------------------------------- Kisi jam kerja jauh lebih tinggi daripada satu layar, dan tombol yang hanya ada di bawahnya memaksa orang menggulung sampai dasar untuk pindah halaman lalu menggulung kembali ke atas untuk membacanya - setiap halaman, dua kali. Yang di atas ini jaraknya dibalik: rapat ke tabel di bawahnya, longgar dari penyaring di atasnya. */ .pager-atas { margin: 0 0 10px; justify-content: flex-end; padding: 0 2px; } /* Tombol yang tidak bisa ditekan TETAP TERGAMBAR, tidak dihilangkan. Kalau "Sebelumnya" lenyap di halaman 1, "Berikutnya" bergeser tempat setiap kali orang pindah halaman - dan yang menekan berturut-turut akan meleset. Tempatnya tetap; yang berubah cuma bisa tidaknya. */ .btn-mati { opacity: .4; cursor: default; pointer-events: none; } /* ---------------- label ---------------- */ .tag { display: inline-block; font-size: .67rem; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 2px; border: 1px solid currentColor; white-space: nowrap; color: var(--muted); } .tag-ok { color: var(--ok); } .tag-warn { color: var(--warn); } .tag-crit { color: var(--crit); } /* ---------------- kepala halaman & chip penyaring ---------------- */ .page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .page-head-judul { font-family: inherit; font-size: 1.45rem; font-weight: 600; margin: 0; } .cari-bar { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 1 1 260px; max-width: 460px; background: var(--ground); border: 1px solid var(--line); border-radius: 20px; padding: 3px 5px 3px 14px; } .cari-bar input[type=search] { border: none; background: transparent; padding: 5px 0; } .cari-bar input[type=search]:focus { outline: none; } .cari-bar .btn { border-radius: 16px; } .chip-baris { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .chip-saring { padding: 0; background: none; border: none; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 14px; background: var(--surface-2); color: var(--ink-soft); font-size: .8rem; white-space: nowrap; text-decoration: none; border: 1px solid transparent; } .chip b { font-weight: 600; color: var(--accent); } .chip-aktif { background: var(--accent-w); color: var(--accent); border-color: var(--accent); font-weight: 600; } .chip-aktif b { color: inherit; } .chip-sepi { opacity: .5; } .chip-samar { background: transparent; border-color: var(--line); color: var(--muted); } .chip-buang:hover { background: var(--crit-w); color: var(--crit); } .chip-hitung { margin-left: auto; font-size: .82rem; color: var(--muted); } .chip-select { width: auto; min-width: 130px; padding: 5px 10px; border-radius: 14px; font-size: .82rem; background: var(--surface-2); border-color: transparent; color: var(--ink-soft); } input.chip-select { min-width: 200px; } input.chip-select:focus { outline: none; border-color: var(--accent); background: var(--surface); } /* Label yang terlihat di depan .chip-select. Dibuat samar dan kecil agar tidak bersaing dengan chip di sebelahnya, tapi tetap terbaca - tanpa dia, pemilih "berapa baris" tersamar jadi penyaring ketiga. */ .chip-label { font-size: .8rem; color: var(--muted); white-space: nowrap; margin-right: -2px; } /* ---------------- struktur organisasi: bagan mendatar ---------------- */ .og-atas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .og-bingkai { position: relative; } .og-kanvas { overflow: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 22px 44px 64px; min-height: 420px; max-height: calc(100vh - var(--topbar-tinggi) - var(--subnav-tinggi) - 150px); } .og-panggung { width: max-content; margin: 0 auto; transform: scale(var(--zoom, 1)); transform-origin: top center; transition: transform .12s ease; } .og-kanvas { cursor: grab; } .og-kanvas.sedang-seret { cursor: grabbing; user-select: none; } .og-kanvas a, .og-kanvas button { cursor: pointer; } /* --- pohon: garis penghubung murni CSS, tanpa SVG --- */ ul.og { display: flex; justify-content: center; align-items: flex-start; list-style: none; margin: 0; padding: 0; position: relative; } ul.og:not(.og-akar) { padding-top: 26px; } ul.og:not(.og-akar)::before { content: ''; position: absolute; top: 0; left: 50%; height: 30px; border-left: 2px solid var(--og-garis); margin-left: -1px; } .og > li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px 9px 0; } .og > li::before, .og > li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 30px; border-top: 2px solid var(--og-garis); } .og > li::after { right: auto; left: 50%; border-left: 2px solid var(--og-garis); margin-left: -1px; } .og > li:first-child::before, .og > li:last-child::after { border: 0 none; } .og > li:last-child::before { border-right: 2px solid var(--og-garis); border-radius: 0 8px 0 0; } .og > li:first-child::after { border-radius: 8px 0 0 0; } /* Anak tunggal: cukup satu garis lurus, tanpa batang mendatar */ .og > li:only-child { padding-top: 0; } .og > li:only-child::before, .og > li:only-child::after { display: none; } /* Akar tidak punya induk, jadi tidak menggambar apa pun di atasnya */ .og-akar > li { padding-top: 0; } .og-akar > li::before, .og-akar > li::after { display: none; } .og li.og-tutup > ul.og { display: none; } /* --- kartu departemen --- */ .og-kartu { position: relative; width: 216px; background: var(--ground); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(20,33,38,.05); } .og-kartu.terpilih { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .og-kartu.milik-saya { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-w); } .og-lencana { position: absolute; top: -9px; right: 8px; background: var(--accent); color: #fff; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 9px; white-space: nowrap; } .og-judul { display: block; padding: 11px 12px 7px; font-weight: 600; font-size: .87rem; color: var(--ink); text-decoration: none; } .og-judul:hover { color: var(--accent); text-decoration: underline; } .og-isi { padding: 0 12px 11px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .og-kepala { display: flex; align-items: center; gap: 7px; width: 100%; } .og-kepala-teks { display: flex; flex-direction: column; line-height: 1.28; min-width: 0; } .og-kepala-teks b { font-size: .8rem; font-weight: 500; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .og-kepala-teks small { font-size: .71rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .og-kepala.kosong { font-size: .74rem; color: var(--muted); font-style: italic; } .og-label { font-size: .63rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); } .og-isi .chip { font-size: .73rem; padding: 2px 9px; } .og-kaki { width: 100%; border: none; border-top: 1px solid var(--line-soft); background: transparent; color: var(--accent); font: inherit; font-size: .74rem; cursor: pointer; padding: 7px 10px; border-radius: 0 0 8px 8px; display: flex; align-items: center; justify-content: center; gap: 5px; } .og-kaki:hover { background: var(--accent-w); } .og-kaki svg { width: 13px; height: 13px; transition: transform .15s ease; } li.og-buka > .og-kartu .og-kaki svg { transform: rotate(180deg); } .og-kaki-mati { color: var(--muted); cursor: default; } .og-kaki-mati:hover { background: transparent; } /* --- kartu yang cocok dengan pencarian --- */ .og-kartu.og-cocok { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-w); } .og-kartu.og-cocok .og-judul { color: var(--accent); } .og-kanvas { border-radius: 0 0 6px 6px; } /* --- alat geser & zoom --- */ .og-alat { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; background: var(--ground); border: 1px solid var(--line); border-radius: 20px; padding: 4px 6px; box-shadow: var(--shadow); } .og-tombol { border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: .8rem; cursor: pointer; padding: 4px 10px; border-radius: 14px; line-height: 1.4; } .og-tombol:hover { background: var(--surface-2); color: var(--ink); } .og-zoom { display: flex; align-items: center; gap: 2px; font-size: .77rem; color: var(--muted); font-variant-numeric: tabular-nums; } .og-zoom #og-persen { min-width: 46px; text-align: center; } /* --- panel kanan, melayang seperti di Bitrix --- */ .og-panel { position: fixed; right: 0; z-index: 28; top: calc(var(--topbar-tinggi) + var(--subnav-tinggi)); bottom: 0; width: 330px; background: var(--surface); border-left: 1px solid var(--line); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; box-shadow: -10px 0 30px -24px rgba(20,33,38,.8); } .panel-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .panel-kepala h2 { font-size: 1.05rem; } .panel-chip { display: flex; gap: 6px; flex-wrap: wrap; } .panel-bagian { display: flex; flex-direction: column; gap: 8px; } .panel-bagian h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); } .panel-bagian .orang-list li { align-items: center; } .panel-bagian .orang-list .tag { margin-left: auto; } /* ---------------- ulang tahun ---------------- */ .ultah { display: flex; align-items: center; gap: 12px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .ultah-ini { border-color: var(--accent); background: var(--accent-w); } .ultah-tgl { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--radius); background: var(--surface-2); color: var(--ink-soft); } .ultah-ini .ultah-tgl { background: var(--accent); color: #fff; } .ultah-angka { font-size: 1.05rem; font-weight: 600; line-height: 1; } .ultah-bulan { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; } .ultah-tanda { color: var(--accent); font-weight: 600; } /* ---------------- sel tabel karyawan ---------------- */ .sel-avatar { width: 42px; padding-right: 0; } .sel-nama { min-width: 190px; } .sel-nama a { font-size: .92rem; } .sel-nama small { display: block; color: var(--muted); font-size: .77rem; margin-top: 1px; } /* ---------------- login ---------------- */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: var(--ground); } .login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow); } .login-head { text-align: center; margin-bottom: 20px; } .login-head .brand-mark { display: inline-block; } .login-head h1 { font-size: 1.2rem; margin: 10px 0 4px; } .login-head p { color: var(--muted); font-size: .85rem; } .login-note { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: .79rem; } .login-note + .login-note { margin-top: 8px; } /* Keterangan di halaman Lupa kata sandi. Sengaja lebih terbaca daripada .login-note: yang ditulis di sana bukan catatan kaki, melainkan hal yang harus dibaca SEBELUM tombolnya ditekan - bahwa tautannya berumur pendek dan suratnya tidak tiba seketika. */ .login-terang { margin: 0 0 18px; font-size: .85rem; line-height: 1.6; color: var(--ink-soft); } /* ===================================================================== KOTAK - panel dengan bilah perkecil / perbesar / tutup Bilahnya dipasang oleh app.js; di sini hanya tampilannya. ===================================================================== */ .kotak { background: var(--ground); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); } .kotak-bar { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; background: var(--surface); border-bottom: 1px solid var(--line); flex: 0 0 auto; } .kotak-judul { flex: 1 1 auto; font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kotak-info { font-size: .78rem; color: var(--muted); white-space: nowrap; } .kotak-jendela { display: flex; gap: 3px; flex: 0 0 auto; } .kotak-jendela button { width: 30px; height: 28px; border: none; background: transparent; border-radius: 4px; cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; } .kotak-jendela button:hover { background: var(--surface-2); color: var(--ink); } .kotak-jendela button svg { width: 15px; height: 15px; } .kotak-jendela .kotak-btn-tutup:hover { background: var(--crit-w); color: var(--crit); } .kotak-isi { padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .card-form { display: flex; flex-direction: column; gap: 12px; } .kotak-isi > .tbl-wrap:only-child, .kotak-isi > .og-bingkai:only-child { margin: -14px -16px; border: none; border-radius: 0; } .kotak.kotak-minim .kotak-isi { display: none; } .kotak.kotak-minim .kotak-bar { border-bottom: none; } .kotak.kotak-maks { position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; border: none; box-shadow: none; } .kotak.kotak-maks .kotak-isi { flex: 1 1 auto; overflow: auto; } .kotak.kotak-maks .wt-wrap, .kotak.kotak-maks .og-kanvas { max-height: none; height: 100%; } /* Gantt di layar penuh: kotak isinya dijadikan kolom lentur supaya grafiknya mengambil SISA tinggi yang benar-benar ada - bukan 100% yang mengabaikan keterangan dan peringatan di atasnya, lalu menyembunyikan baris terbawah di luar layar. min-height:0 wajib, tanpa itu flex menolak memperkecil anak yang isinya lebih tinggi. */ .kotak.kotak-maks[data-kotak="tugas-gantt"] .kotak-isi { display: flex; flex-direction: column; } .kotak.kotak-maks[data-kotak="tugas-gantt"] .tg-gantt { flex: 1 1 auto; min-height: 0; max-height: none; } body.ada-kotak-maks { overflow: hidden; } .kotak.kotak-tutup { display: none; } .kotak-lead { border-top: 3px solid var(--accent); } .kotak-isi > .grid:only-child { margin: 0; } .kotak-pulih { display: none; margin-bottom: 16px; } .kotak-pulih.tampil { display: inline-block; } /* ===================================================================== WAKTU & LAPORAN ===================================================================== */ .periode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .periode-teks { font-weight: 600; font-size: .95rem; min-width: 160px; text-align: center; } .tiles-rapat { margin-left: auto; max-width: 420px; } .tiles-rapat .tile { padding: 8px 12px; } .tiles-rapat .tile .v { font-size: 1.15rem; } /* ---------------- kisi jam kerja ---------------- */ .wt-wrap { max-height: calc(100vh - var(--topbar-tinggi) - var(--subnav-tinggi) - 240px); overflow: auto; } .wt { border-collapse: separate; border-spacing: 0; min-width: 940px; } .wt thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); padding: 6px 8px; text-align: center; } .wt th.wt-nama { position: sticky; left: 0; z-index: 4; text-align: left; min-width: 230px; width: 230px; } .wt td { padding: 0; border-bottom: 1px solid var(--line-soft); } .wt td.wt-nama { position: sticky; left: 0; z-index: 2; background: var(--surface); padding: 7px 10px; min-width: 230px; width: 230px; display: table-cell; vertical-align: middle; text-align: left; border-right: 1px solid var(--line); } .wt td.wt-nama .avatar { float: left; margin-right: 9px; } .wt-nama-teks { display: block; overflow: hidden; } .wt-nama-teks a { font-size: .87rem; text-decoration: none; font-weight: 500; } .wt-nama-teks a:hover { text-decoration: underline; } .wt-nama-teks small { display: block; color: var(--muted); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wt th.wt-hari { font-size: .68rem; line-height: 1.25; min-width: 88px; text-align: center; vertical-align: middle; } .wt-hari-nama { display: block; text-transform: uppercase; letter-spacing: .06em; } .wt-hari-tgl { display: block; font-size: .78rem; color: var(--ink-soft); font-weight: 600; } /* Ditulis sebagai ".wt td.wt-sel", bukan ".wt-sel" saja. Aturan umum tabel ".tbl th, .tbl td" memakai rata kiri dan rata atas, dan kekhususannya (0,1,1) LEBIH TINGGI daripada satu kelas (0,1,0) - jadi ".wt-sel { text-align: center }" selama ini kalah dan tidak pernah berlaku. Baris jam masuk-pulang terlihat di tengah hanya karena ia memasang text-align pada dirinya sendiri. */ .wt td.wt-sel { text-align: center; vertical-align: middle; font-size: .8rem; padding: 6px 5px; font-variant-numeric: tabular-nums; color: var(--ink-soft); border-left: 1px solid var(--line-soft); position: relative; white-space: nowrap; } .jm-u { font-size: .68em; color: var(--muted); margin: 0 1px 0 1px; } /* Jam masuk - jam pulang, satu baris kecil di bawah lama kerja. */ .wt-io { display: block; margin-top: 2px; text-align: center; font-size: .63rem; letter-spacing: 0; color: var(--muted); } .wt-io-pisah { margin: 0 2px; opacity: .7; } .wt-janggal .wt-io, .wt-pendek .wt-io, .wt-jeda .wt-io, .wt-buka .wt-io { color: inherit; opacity: .78; } .wt-libur { background: var(--surface-2); } .wt-kini { box-shadow: inset 0 0 0 1px var(--accent); } .wt th.wt-kini { background: var(--accent-w); color: var(--accent); } .wt-janggal { background: var(--crit-w); color: var(--crit); font-weight: 600; } .wt-pendek { background: var(--warn-w); color: var(--warn); } .wt-jeda { background: var(--warn-w); color: var(--warn); } .wt-tanda-jalan { color: var(--accent); font-size: .6rem; } .wt-buka { background: var(--accent-w); color: var(--accent); } .wt-tanda { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--crit); color: #fff; font-size: .62rem; font-weight: 700; margin-left: 3px; vertical-align: middle; } .wt-tanda-info { background: var(--accent); } .wt td.wt-total, .wt th.wt-total { text-align: center; vertical-align: middle; font-weight: 600; font-variant-numeric: tabular-nums; padding: 8px 10px; background: var(--surface-2); white-space: nowrap; border-left: 1px solid var(--line); } .wt-grup td { background: var(--surface-3); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 6px 10px; position: sticky; left: 0; } .wt-kaki { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: .78rem; color: var(--muted); } .wt-kunci { display: flex; align-items: center; gap: 6px; } .wt-kunci .wt-warna { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); } /* ---------------- daftar laporan kerja ---------------- */ .lap-daftar { display: flex; flex-direction: column; gap: 12px; } .lap { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; } .lap-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lap-orang { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .lap-orang a { font-weight: 500; font-size: .92rem; text-decoration: none; } .lap-orang a:hover { text-decoration: underline; } .lap-orang small { color: var(--muted); font-size: .76rem; } .lap-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lap-isi { font-size: .9rem; color: var(--ink-soft); margin: 0; } .lap-rencana { border-left: 2px solid var(--line); padding-left: 12px; } .lap-rencana h4 { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 2px; } .lap-rencana p { font-size: .85rem; color: var(--ink-soft); margin: 0; } .lap-kaki { padding-top: 8px; border-top: 1px solid var(--line-soft); } .tag-status-0 { color: var(--muted); } .tag-status-1 { color: var(--accent); } .tag-status-2 { color: var(--ok); } .tag-status-3 { color: var(--warn); } .tag-status-4 { color: var(--crit); } /* ===================================================================== LAYAR KECIL - menu utama menjadi laci yang digeser ===================================================================== */ @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-lebar); flex-basis: var(--sidebar-lebar); transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow); } body.sidebar-buka .sidebar { transform: translateX(0); } body.sidebar-kecil .sidebar { width: var(--sidebar-lebar); flex-basis: var(--sidebar-lebar); } body.sidebar-kecil .side-teks, body.sidebar-kecil .brand-teks, body.sidebar-kecil .side-pemisah span { display: inline; } body.sidebar-kecil .side-item, body.sidebar-kecil .side-lipat { justify-content: flex-start; gap: 12px; } .tombol-menu { display: block; } .side-kaki { display: none; } .topbar, .subnav, .page, .foot { padding-left: 14px; padding-right: 14px; } .me-nama, .me .tag { display: none; } .detail { grid-template-columns: 1fr; gap: 2px 0; } .detail dt { margin-top: 8px; } /* Panel struktur pindah ke bawah bagan */ .struktur { flex-direction: column; } .struktur-panel { position: static; width: 100%; flex-basis: auto; max-height: none; } .page-head { gap: 10px; } .cari-bar { margin-left: 0; max-width: none; } .chip-hitung { margin-left: 0; } } @media (min-width: 901px) { .tirai { display: none !important; } } /* ===================================================================== LAPORAN KERJA ===================================================================== */ /* --- kisi karyawan x tanggal --- */ .lap-kisi th.lap-persen, .lap-kisi td.lap-persen { min-width: 74px; width: 74px; text-align: center; font-size: .78rem; white-space: nowrap; } .lap-kisi td.lap-persen { font-variant-numeric: tabular-nums; color: var(--ink-soft); } .lap-kisi td.lap-persen.is-warn { color: var(--warn); font-weight: 600; } .lap-kisi thead th.lap-persen { color: var(--muted); font-weight: 600; line-height: 1.25; } .wt.lap-kisi th.wt-hari { min-width: 58px; width: 58px; } /* Kolom nama sedikit lebih lebar: barisnya menjorok mengikuti garis komando, jadi nama di tingkat dalam butuh ruang tambahan. */ .wt.lap-kisi th.wt-nama, .wt.lap-kisi td.wt-nama { min-width: 264px; width: 264px; } /* Tanda cabang kecil di kiri avatar, penanda "ini bawahan baris di atas". */ .lap-kisi .og-cabang { float: left; width: 7px; height: 9px; margin: 6px 4px 0 -9px; border-left: 1px solid var(--og-garis); border-bottom: 1px solid var(--og-garis); border-bottom-left-radius: 3px; opacity: .75; } .lap-kisi .wt-hari-tgl { display: block; font-size: .84rem; font-weight: 600; } .lap-kisi .wt-hari-nama { display: block; font-size: .68rem; color: var(--muted); } .lap-kisi td.lap-sel { padding: 3px 4px; text-align: center; vertical-align: middle; } .lap-chip { display: block; padding: 4px 2px; border-radius: 4px; font-size: .72rem; font-weight: 600; text-decoration: none; color: #fff; background: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lap-chip:hover { filter: brightness(1.08); } .lap-positif { background: #55a06b; color: #fff; } .lap-negatif { background: #c4574f; color: #fff; } .lap-tanpa { background: #7f93a0; color: #fff; } .lap-kirim { background: #b9c3c9; color: #33454d; } .lap-draf { background: transparent; color: var(--muted); border: 1px dashed var(--line); } .lap-kosong { background: transparent; color: var(--muted); border: 1px dashed var(--line); font-weight: 400; } .lap-kosong:hover { border-color: var(--accent); color: var(--accent); } /* --- kepala "dari - kepada" --- */ .lap-kepala-kotak { display: flex; flex-wrap: wrap; gap: 10px; background: var(--surface-2); border-radius: 8px; padding: 11px 13px; } .lap-pihak { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; font-size: .88rem; min-width: 0; } .lap-pihak .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); flex: 0 0 auto; } .lap-pihak strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- bagian isi laporan --- */ .lap-bagian h4 { margin: 0 0 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .lap-bagian p { margin: 0; } .prewrap { white-space: pre-wrap; word-break: break-word; } .lap-nilai { border: 1px solid var(--line); border-radius: 8px; padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; } .lap-nilai h4 { margin: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .lap-nilai p { margin: 0; } .lap-nilai-form { display: flex; flex-wrap: wrap; gap: 8px; } .btn-ok { background: var(--ok-w); border-color: var(--ok); color: var(--ok); } .btn-crit { background: var(--crit-w); border-color: var(--crit); color: var(--crit); } /* --- komentar --- */ .komentar-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .komentar-list li { display: flex; gap: 9px; } .komentar-isi { min-width: 0; flex: 1 1 auto; } .komentar-kepala { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; } .komentar-kepala strong { font-size: .86rem; } .komentar-isi p { margin: 0; font-size: .88rem; } .komentar-form { display: flex; gap: 8px; align-items: flex-start; } .komentar-form textarea { flex: 1 1 auto; min-height: 42px; } /* --- pita peringatan dengan tombol --- */ .callout-aksi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .callout-aksi .btn { margin-left: auto; } /* ===================================================================== LAMPIRAN ===================================================================== */ .lampiran { display: flex; flex-direction: column; gap: 9px; } .lampiran-kepala { display: flex; flex-direction: column; gap: 2px; } .lampiran-kepala > span:first-child { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .lampiran-zona { border: 1px dashed var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; background: var(--surface-2); } .lampiran-zona.lampiran-siap { border-color: var(--accent); background: var(--accent-w); } .lampiran-zona.sibuk { opacity: .6; pointer-events: none; } .lampiran-zona input[type=file] { font-size: .84rem; } .lampiran-daftar { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .lampiran-item { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 5px; background: var(--surface); min-width: 0; } .lampiran-gambar { display: block; line-height: 0; } .lampiran-gambar img { width: 100%; height: 84px; object-fit: cover; border-radius: 5px; display: block; } .lampiran-nama { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lampiran-ukuran { font-size: .72rem; color: var(--muted); } .lampiran-buang { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(10, 22, 26, .62); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lampiran-buang:hover { background: var(--crit); } /* Ikon berkas: label pendek berwarna, supaya Excel dan Word langsung terbeda tanpa perlu membaca nama berkasnya. */ .lampiran-ikon { display: flex; align-items: center; justify-content: center; height: 84px; border-radius: 5px; text-decoration: none; font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: #7f93a0; } li .lampiran-ikon { height: 38px; width: 46px; flex: 0 0 auto; font-size: .7rem; } .golongan-excel { background: #217346; } .golongan-word { background: #2b579a; } .golongan-ppt { background: #c04a26; } .golongan-pdf { background: #b02a25; } .golongan-arsip { background: #6b5b45; } .golongan-gambar { background: #4f7f8c; } .golongan-lain { background: #7f93a0; } .lampiran-pesan { margin: 0; font-size: .82rem; color: var(--muted); } .lampiran-pesan.buruk { color: var(--crit); } /* --- tampilan lampiran pada laporan yang sudah jadi --- */ .lampiran-galeri { display: grid; gap: 8px; margin-bottom: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .lampiran-galeri a { line-height: 0; } .lampiran-galeri img { width: 100%; height: 108px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; } .berkas-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .berkas-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .berkas-teks { display: flex; flex-direction: column; min-width: 0; } .berkas-teks a { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .berkas-teks small { color: var(--muted); font-size: .75rem; } /* ===================================================================== REL KANAN + PEMBERITAHUAN Letaknya mengikuti Bitrix: satu kolom sempit menempel di tepi kanan, lonceng di paling atas. ===================================================================== */ /* Rel menempel tepat di bawah topbar dan memenuhi tepi kanan layar. Lajur selebar --rel-lebar memang sudah disisakan untuknya di .utama; sebelumnya rel mengambang di tengah lajur itu sehingga yang terlihat justru ruang kosong dengan tiga tombol menggantung di dalamnya. */ .rel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--rel-lebar); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 6px; /* Rel dimulai dari paling atas, bukan dari bawah topbar. Topbar sudah menyisakan lajur selebar ini di kanannya; kalau rel baru mulai di bawah topbar, sisa lajur setinggi topbar itu menganga kosong tanpa ada isinya. Ikon pertamanya tetap sejajar di bawah garis topbar lewat padding, jadi tampilannya tidak berubah - yang hilang hanya kotak kosong di pojok kanan atas. */ padding: calc(var(--topbar-tinggi) + 9px) 0 9px; background: var(--surface); border-left: 1px solid var(--line); } .rel-tombol { position: relative; width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .rel-tombol svg { width: 19px; height: 19px; } .rel-tombol:hover { background: var(--surface-2); color: var(--ink); } .rel-mati { opacity: .45; cursor: default; } .rel-mati:hover { background: transparent; color: var(--muted); } .rel-nyala { color: var(--accent); background: var(--accent-w); } .rel-nyala:hover { background: var(--accent-w); color: var(--accent); } .rel-angka { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--crit); color: #fff; font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center; } /* Angkanya kini SELALU tergambar dan disembunyikan saat nol, supaya lencana.js bisa mengubahnya tanpa memuat ulang halaman. JUJURNYA: hari ini baris ini tidak menanggung apa-apa - .rel-angka tidak menyetel display sama sekali, jadi [hidden] bawaan peramban sudah cukup. Ia ditulis karena .side-lencana dan .dok-lencana memikulnya juga, dan karena hari pertama seseorang menambahkan display:flex ke .rel-angka adalah hari lencana merah KOSONG menempel di lonceng setiap orang yang tidak punya satu pun kabar - tanpa satu pun galat yang menunjuk ke sini. */ .rel-angka[hidden] { display: none !important; } /* Panel melabuh di lajur kanan, bukan mengambang menutupi isi halaman. Saat dibuka, isi halaman menggeser ke kiri sebanyak lebar panel - dengan begitu laporan atau kisi yang sedang dibaca tetap utuh, dan lajur yang tadinya kosong di sebelah rel jadi ada gunanya. */ .notif-panel[hidden] { display: none; } .notif-panel { position: fixed; top: var(--topbar-tinggi); right: var(--rel-lebar); bottom: 0; z-index: 46; width: var(--notif-lebar); max-width: 100vw; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(10, 22, 26, .10); display: flex; flex-direction: column; overflow: hidden; } .notif-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); } .notif-tandai { border: none; background: transparent; color: var(--accent); font: inherit; font-size: .78rem; cursor: pointer; padding: 0; } .notif-tandai:hover { text-decoration: underline; } .notif-tutup { width: 26px; height: 26px; border: none; background: transparent; border-radius: 5px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; } .notif-tutup svg { width: 15px; height: 15px; } .notif-tutup:hover { background: var(--surface-2); color: var(--ink); } .notif-isi { display: flex; flex-direction: column; flex: 1 1 auto; overflow-y: auto; } .notif-halaman { flex: none; overflow: visible; } .notif-baris { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink-soft); } .notif-baris:last-child { border-bottom: none; } .notif-baris:hover { background: var(--surface-2); } .notif-belum { background: var(--accent-w); } .notif-belum:hover { background: var(--accent-w); } .notif-ikon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); } .notif-ikon svg { width: 16px; height: 16px; } /* Panel "Yang menunggu Anda" di bilah kanan. Warnanya mengikuti artinya, sama dengan pemberitahuan: rapat yang sedang berjalan menuntut tindakan SEKARANG, pesan bisa dibaca sesudahnya. */ .notif-rapat { background: var(--warn-w); color: var(--warn); } .notif-pesan { background: var(--accent-w); color: var(--accent); } .notif-laporan_baru { background: var(--accent-w); color: var(--accent); } .notif-laporan_dinilai { background: var(--ok-w); color: var(--ok); } .notif-komentar { background: var(--warn-w); color: var(--warn); } /* Automation. Warnanya mengikuti arti, bukan urutan: yang menuntut tindakan berwarna peringatan, yang sekadar kabar berwarna netral, selesai hijau, batal merah. Orang mengenali warna sebelum membaca tulisannya - jadi warnanya harus jujur. */ .notif-auto_baru { background: var(--warn-w); color: var(--warn); } .notif-auto_terkait { background: var(--surface-3); color: var(--muted); } .notif-auto_putus { background: var(--accent-w); color: var(--accent); } .notif-auto_selesai { background: var(--ok-w); color: var(--ok); } .notif-auto_batal { background: var(--crit-w); color: var(--crit); } .notif-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .notif-teks strong { font-size: .85rem; color: var(--ink); } .notif-teks small { font-size: .78rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif-teks em { font-size: .72rem; color: var(--muted); font-style: normal; } .notif-kosong { margin: 0; padding: 22px 14px; text-align: center; color: var(--muted); font-size: .85rem; } .notif-kaki { padding: 9px 14px; border-top: 1px solid var(--line); text-align: center; font-size: .82rem; } /* --- pencarian --- */ /* Kotak ketik di panel rel kanan. */ .cari-rel { display: flex; gap: 7px; padding: 12px 14px 4px; } .cari-rel input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: .86rem; } .cari-rel input:focus { outline: none; border-color: var(--accent); } /* Kotak ketik di halaman /cari. */ .cari-form { display: flex; gap: 9px; margin-bottom: 14px; max-width: 620px; } .cari-form input { flex: 1 1 auto; min-width: 0; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; } .cari-form input:focus { outline: none; border-color: var(--accent); } .cari-ringkas { margin: 0 0 9px; } .cari-tapis { margin-bottom: 16px; } .cari-blok { margin-bottom: 22px; } .cari-judul { display: flex; align-items: baseline; gap: 8px; font-size: .95rem; margin-bottom: 8px; } .cari-judul .muted { font-size: .8rem; font-weight: 400; } .cari-daftar { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .cari-baris { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; } .cari-baris:last-child { border-bottom: none; } .cari-baris:hover { background: var(--surface-2); } .cari-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .cari-teks strong { font-size: .88rem; color: var(--ink); } .cari-teks small { color: var(--ink-soft); font-size: .79rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cari-waktu { flex: 0 0 auto; font-size: .75rem; color: var(--muted); font-style: normal; } .cari-lagi { display: inline-block; margin-top: 7px; font-size: .82rem; } /* --- rincian absensi dari aplikasi ILP --- */ /* Sel kisi yang bisa diklik. Tanda titik kecil di pojok, bukan garis bawah: kisi ini padat, dan garis bawah pada tiap sel membuat seluruh tabel terlihat berkerut. Titiknya muncul tetap - yang hanya muncul saat disentuh mouse tidak pernah ditemukan orang yang tidak kebetulan melewatinya. */ .wt-sel-tautan { display: block; color: inherit; text-decoration: none; margin: -6px -7px; padding: 6px 7px; } .wt-sel-tautan:hover { text-decoration: none; } .wt-ilp { position: relative; } .wt-ilp::after { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .65; } .wt-ilp:hover { background: var(--accent-w); } .wt-ilp:hover::after { opacity: 1; } /* Halaman rinciannya. */ .ilp-sesi { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; } .ilp-foto { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; max-width: 220px; } .ilp-foto img { display: block; width: 220px; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); } .ilp-tanpa-foto { width: 220px; max-width: 100%; aspect-ratio: 3 / 4; border: 1px dashed var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: var(--surface-2); } .ilp-rinci { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .ilp-titik { border-left: 3px solid var(--line); padding-left: 11px; } .ilp-titik-kepala { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; } .ilp-jam { font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 600; } .ilp-alamat { font-size: .86rem; line-height: 1.5; } .ilp-koordinat { font-variant-numeric: tabular-nums; margin-top: 2px; } @media (max-width: 560px) { .ilp-foto, .ilp-foto img, .ilp-tanpa-foto { width: 100%; max-width: none; } } /* --- laporan absensi HRIS (tab HRIS di halaman Waktu) --- */ .tengah { text-align: center; } .wt-tab { margin-bottom: 14px; } /* Penyaringnya. Satu kisi yang melipat sendiri di layar sempit - bukan deretan mendatar yang memaksa orang menggulung ke samping di ponsel. */ .hris-saring { margin-bottom: 16px; } .hris-kisi { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 10px; } .hris-kisi label { display: flex; flex-direction: column; gap: 4px; } .hris-kisi label > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .hris-kisi input, .hris-kisi select { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: .86rem; min-width: 0; } .hris-kisi input:focus, .hris-kisi select:focus { outline: none; border-color: var(--accent); } .hris-tombol { display: flex; gap: 8px; flex-wrap: wrap; } .hris-meta { margin: 10px 0 12px; } .hris-kunci { line-height: 1.9; } .hris-kunci-butir { display: inline-block; margin-right: 14px; white-space: nowrap; } .hris-kunci-butir strong { color: var(--accent); } /* Sorot kolom kategori. --------------------------------------------------------------------- Sumbernya memakai warna tetap (#fff3cd dan #fde2e1) langsung di atributnya. Di sini dipakai lencana warna portal: warna tetap yang dituliskan di HTML tidak ikut berubah saat peramban orangnya dalam mode gelap - yang terjadi teks gelap di atas latar terang di tengah tabel gelap, dan itu justru tidak terbaca. */ .hris-izin { background: var(--warn-w); } .hris-telat { background: var(--crit-w); } .hris-telat-teks { color: var(--crit); font-weight: 600; } .hris-libur td { background: var(--crit-w); } .hris-minggu td { background: var(--surface-2); } /* Lencana status - dipakai tabel HRIS dan halaman rinciannya. */ .pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 500; white-space: nowrap; border: 1px solid transparent; } .pill-ok { background: var(--ok-w); color: var(--ok); border-color: var(--ok); } .pill-no { background: var(--crit-w); color: var(--crit); border-color: var(--crit); } .pill-libur { background: var(--warn-w); color: var(--warn); border-color: var(--warn); } .pill-diam { background: var(--surface-2); color: var(--muted); border-color: var(--line); } /* Tabel kunci-nilai pada satu baris absensi. */ .hris-kv th { width: 200px; color: var(--muted); font-weight: 500; } @media (max-width: 640px) { .hris-kv th { width: 130px; } } /* --- kotak laporan masuk di beranda --- */ .masuk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .masuk-list li { display: flex; align-items: flex-start; gap: 10px; } .masuk-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .masuk-teks > a { font-size: .89rem; font-weight: 600; } .masuk-cuplik { color: var(--ink-soft); font-size: .8rem; } .masuk-list .btn { flex: 0 0 auto; } /* Beri ruang di kanan supaya isi halaman tidak tertimpa rel, dan tambah ruangnya saat panel notif terbuka. */ @media (min-width: 900px) { .utama { padding-right: var(--rel-lebar); transition: padding-right .18s ease; } body.notif-buka .utama { padding-right: calc(var(--rel-lebar) + var(--notif-lebar)); } } /* Layar sempit: melabuh tidak masuk akal - panelnya menutup penuh dan isi halaman tidak digeser, sebab tidak ada ruang untuk digeser. */ @media (max-width: 899px) { .rel { top: auto; bottom: 14px; right: 12px; width: auto; height: auto; flex-direction: row-reverse; gap: 8px; padding: 6px !important; background: var(--ground); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); } .notif-panel { top: auto; bottom: 0; right: 0; width: 100%; max-height: 76vh; border-left: none; border-top: 1px solid var(--line); border-radius: 12px 12px 0 0; } } /* ===================================================================== PITA KEADAAN HARI INI DI BERANDA Tiga hal yang harus terlihat begitu portal dibuka: sudah absen belum, laporan hari ini sudah dikirim belum, dan berapa laporan orang lain yang menunggu keputusan saya. ===================================================================== */ .hari-ini { display: grid; gap: 1px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .hari-bagian { background: var(--surface); padding: 12px 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .hari-bagian .k { flex: 1 0 100%; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .hari-bagian strong { font-size: .95rem; } .hari-bagian strong .muted { font-weight: 400; font-size: .82rem; } .hari-bagian form { display: contents; } /* Sebagian ubin ringkas adalah TAUTAN ke daftar tugas yang sudah tersaring - lihat tugas_proyek_lihat.php dan grup_lihat.php. Bentuknya harus tetap sama persis dengan ubin biasa di sebelahnya. Begitu yang satu bergaris bawah dan berwarna tautan sementara yang lain tidak, orang menyimpulkan keduanya berjenis berbeda - padahal bedanya cuma ada-tidaknya halaman tujuan. Yang membedakan cukup kursor dan latar saat disentuh. */ a.hari-bagian { color: inherit; text-decoration: none; cursor: pointer; } a.hari-bagian:hover, a.hari-bagian:focus-visible { background: var(--surface-2); } a.hari-bagian:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ===================================================================== PENGATURAN PRIBADI ===================================================================== */ .sub-gir { display: flex; align-items: center; justify-content: center; margin-left: auto; padding: 0 12px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; flex: 0 0 auto; } .sub-gir svg { width: 17px; height: 17px; } .sub-gir:hover { color: var(--ink); } .pref-daftar { display: flex; flex-direction: column; } .pref-baris { display: flex; align-items: flex-start; gap: 11px; padding: 12px 2px; border-bottom: 1px solid var(--line-soft); cursor: pointer; } .pref-baris:last-child { border-bottom: none; } .pref-baris input[type=checkbox] { margin-top: 3px; flex: 0 0 auto; } .pref-teks { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; } .pref-teks strong { font-weight: 500; font-size: .9rem; } .pref-teks small { color: var(--muted); font-size: .8rem; } .pref-baris-pilihan { cursor: default; align-items: center; } .pref-baris-pilihan select { width: auto; min-width: 190px; flex: 0 0 auto; } /* Skor pada kotak beranda, menggantikan tombol Nilai. */ .masuk-skor { flex: 0 0 auto; text-decoration: none; } .masuk-skor:hover { filter: brightness(1.1); } /* Tombol ubah penilaian yang terlipat. */ .lap-ubah-nilai > summary { cursor: pointer; font-size: .82rem; color: var(--accent); list-style: none; display: inline-block; padding: 2px 0; } .lap-ubah-nilai > summary::-webkit-details-marker { display: none; } .lap-ubah-nilai > summary:hover { text-decoration: underline; } .lap-ubah-nilai[open] > summary { margin-bottom: 9px; } /* ===================================================================== PENAMPIL LAMPIRAN (ONLYOFFICE) ===================================================================== */ /* Editornya butuh tinggi yang pasti - ia memakai 100% dari induknya, dan 100% dari induk yang tingginya mengikuti isi berarti nol. */ .oo-wadah { height: calc(100vh - var(--topbar-tinggi) - var(--subnav-tinggi) - 190px); min-height: 420px; margin: -14px -16px; border: none; background: var(--surface-2); } .oo-wadah > div { width: 100%; height: 100%; } .kotak.kotak-maks .oo-wadah { height: 100%; } .oo-gagal { margin: 0; padding: 14px 16px; color: var(--crit); background: var(--crit-w); font-size: .86rem; border-radius: 6px; } .oo-gagal[hidden] { display: none; } .berkas-aksi { display: flex; gap: 6px; margin-left: auto; flex: 0 0 auto; } /* ===================================================================== AUTOMATION ===================================================================== */ .form-kisi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .form-kartu { border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px; display: flex; flex-direction: column; gap: 7px; background: var(--surface); } .form-kartu:hover { border-color: var(--accent); } .form-judul { font-size: .93rem; font-weight: 600; text-decoration: none; } .form-judul:hover { text-decoration: underline; } .form-kartu small { font-size: .79rem; line-height: 1.4; } .form-angka { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .78rem; color: var(--muted); margin-top: auto; } .form-angka .tag { text-decoration: none; } .form-kartu > .btn { align-self: flex-start; } /* --- rantai persetujuan --- */ .rantai { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .rantai-baris { display: flex; gap: 12px; padding: 11px 0; position: relative; } .rantai-baris + .rantai-baris { border-top: 1px solid var(--line-soft); } /* Garis penyambung antar langkah: yang menjelaskan bahwa ini satu rantai berurutan, bukan daftar orang yang kebetulan berdampingan. */ .rantai-baris::before { content: ''; position: absolute; left: 13px; top: 34px; bottom: -11px; width: 1px; background: var(--line); } .rantai-baris:last-child::before { display: none; } .rantai-no { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; background: var(--surface-2); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; z-index: 1; } .rantai-kini .rantai-no { background: var(--accent); color: #fff; } .rantai-isi { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; } .rantai-kepala { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .rantai-kepala strong { font-size: .89rem; } .rantai-isi small { color: var(--muted); font-size: .78rem; } .rantai-catatan { margin: 4px 0 0; padding: 8px 11px; border-radius: 6px; background: var(--surface-2); font-size: .85rem; } /* Nama langkah dan catatan penyetuju tampil berdampingan, dan dulu keduanya terlihat sama. Sebutan kecil di depan catatannya memutus kekeliruan itu: yang berlabel "Catatan Andrew:" jelas ditulis orangnya, yang tanpa label jelas nama langkah dari perancang alur. */ .rantai-catatan-cap { font-weight: 600; color: var(--muted); margin-right: 4px; font-size: .8rem; } /* ================= kolom komentar pengajuan ================= */ .pk-daftar { list-style: none; margin: 0 0 14px; padding: 0; } .pk-butir { padding: 9px 0; border-bottom: 1px solid var(--line); } .pk-butir:last-child { border-bottom: 0; } /* Alasan keputusan yang langkahnya sudah dihapus Bitrix. Diberi garis di sisi kiri supaya tidak terbaca sebagai obrolan biasa - ia bukan pendapat, ia keputusan yang pernah diambil. */ .pk-putusan { border-left: 3px solid var(--warn, #d08700); padding-left: 10px; background: var(--surface-2); border-radius: 0 6px 6px 0; } .pk-kepala { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .pk-kepala strong { font-size: .88rem; } .pk-hapus { margin-left: auto; } .pk-isi { margin: 4px 0 0; font-size: .88rem; line-height: 1.5; } .pk-berkas { list-style: none; margin: 6px 0 0; padding: 0; } .pk-berkas > li { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; padding: 2px 0; font-size: .84rem; } .pk-tulis { margin-top: 4px; } /* ================= perancang formulir Automation ================= */ /* Angka dirapatkan ke kanan. Ditulis dengan td/th di depan karena ".tbl th, .tbl td { text-align: left }" punya kekhususan (0,1,1) - ".num" sendirian akan kalah dan diam-diam tidak berlaku. */ .tbl td.num, .tbl th.num { text-align: right; } .rc-baris { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; } .field-kecil { flex: 0 0 auto; width: 120px; } /* Pembantu & Pengamat pada formulir tugas. --------------------------------------------------------------------- Sebelumnya dua di Chrome menempel pada tepinya dan bertabrakan dengan panah datalist. Disingkirkan: yang mengosongkannya cukup menghapus teksnya. */ .chat-baru-isi input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* Panel disembunyikan lebih dulu, lalu yang terpilih dimunculkan. */ .cb-panel { display: none; } #cb-orang:checked ~ .cb-panel-orang, #cb-grup:checked ~ .cb-panel-grup { display: block; } #cb-orang:checked ~ .cb-tab label[for="cb-orang"], #cb-grup:checked ~ .cb-tab label[for="cb-grup"] { color: var(--accent-2); background: var(--accent-w); border-color: var(--accent); } /* Papan ketik harus tetap bisa memilih tabnya - radio yang benar-benar tersembunyi tidak bisa difokus, jadi yang ditandai labelnya. */ .cb-radio:focus-visible ~ .cb-tab label[for="cb-orang"], .cb-radio:focus-visible ~ .cb-tab label[for="cb-grup"] { outline: 2px solid var(--accent); outline-offset: 2px; } /* ===================================================================== SARAN ORANG di atas hasil pencarian ===================================================================== "Mulai percakapan dengan ..." - baris yang membuat kotak pencarian akhirnya mengerjakan apa yang dijanjikan namanya. Sengaja dibedakan dari baris percakapan biasa: yang satu membuka yang sudah ada, yang ini MEMBUAT yang belum ada, dan keduanya tidak boleh terlihat sama. ===================================================================== */ .chat-saran-judul { padding: 8px 12px 4px; text-transform: uppercase; letter-spacing: .4px; font-size: .68rem; } .chat-saran a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-decoration: none; color: var(--ink); border-left: 3px solid transparent; } .chat-saran a:hover { background: var(--accent-w); border-left-color: var(--accent); } .chat-saran-ikon { flex: 0 0 26px; width: 26px; height: 26px; line-height: 24px; text-align: center; border-radius: 50%; border: 1px dashed var(--accent); color: var(--accent); font-size: .95rem; } .chat-saran-teks { display: flex; flex-direction: column; min-width: 0; } .chat-saran-teks strong { font-size: .86rem; font-weight: 600; } .chat-saran-teks small { font-size: .74rem; } .chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0; } .chat-list > li { border-bottom: 1px solid var(--line-soft); } .chat-list > li > a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; text-decoration: none; color: inherit; } .chat-list > li > a:hover { background: var(--surface-2); } .chat-list > li.chat-aktif > a { background: var(--accent-w); } .chat-list-teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .chat-list-atas, .chat-list-bawah { display: flex; align-items: baseline; gap: 8px; } .chat-list-atas > strong { flex: 1 1 auto; min-width: 0; font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-list-atas > small { flex: 0 0 auto; font-size: .72rem; color: var(--muted); } .chat-list-bawah > small { flex: 1 1 auto; min-width: 0; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-lencana { flex: 0 0 auto; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--crit); color: #fff; font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center; } .chat-kosong { padding: 16px 12px; } /* Avatar grup memakai angka jumlah anggota, bukan inisial - sebuah grup tidak punya nama orang, dan angka anggota justru yang paling sering ingin diketahui. */ .chat-grup { background: var(--surface-3); color: var(--ink-soft); font-size: .7rem; font-weight: 700; } /* ---------------- panel kanan ---------------- */ .chat-ruang { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .chat-hampa { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: .9rem; } .chat-kepala { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); } .chat-kepala-teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .chat-kepala-teks > strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-kepala-teks > small { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-pesan { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--ground); } /* Pintu ke riwayat lama, di puncak aliran pesan. [hidden] ditegaskan dengan !important: aturan sekelas di sekitarnya sudah cukup untuk mengalahkan bawaan peramban, dan kotak ini akan tetap terlihat setelah dinyatakan tersembunyi. */ .chat-lawas-kotak { align-self: center; margin: 4px 0 8px; } .chat-lawas-kotak[hidden] { display: none !important; } .chat-hari { align-self: center; margin: 8px 0 4px; } .chat-hari > span { padding: 2px 10px; border-radius: 10px; background: var(--surface-3); color: var(--muted); font-size: .72rem; } /* Pesan sistem obrolan tugas (TaskLog) - 29 Sep 2026. Di tengah, lebih tenang daripada gelembung: ia kabar tentang tugasnya, bukan ucapan seseorang. Nama pelaku ditebalkan seperti Bitrix24. */ .chat-sistem { align-self: center; max-width: 78%; margin: 4px 0; text-align: center; } .chat-sistem > span { display: inline-block; padding: 5px 12px; border-radius: 12px; background: var(--surface-2); color: var(--ink-soft); font-size: .8rem; line-height: 1.45; } .chat-sistem b { color: var(--accent); font-weight: 600; } .chat-sistem time { margin-left: 6px; color: var(--muted); font-size: .7rem; } /* position: relative supaya menu dan pemetik berlabuh pada BARISNYA. Keduanya dulu berlabuh pada tombolnya sendiri, dan tombol itu kini tinggal di .chat-alat yang lebarnya hanya dua ikon - kotak selebar 268px yang berlabuh di sana menjulur keluar layar. */ .chat-baris { position: relative; display: flex; align-items: flex-end; gap: 7px; max-width: 76%; } /* Gelembung dan keripiknya satu KOLOM, supaya keripik berdiri di bawah gelembung - bukan di sampingnya. Sampai 27 Sep 2026 .chat-reaksi adalah saudara langsung .chat-gelembung di dalam baris yang flex mendatar, jadi keripiknya berdiri sejajar gelembung; pada pesan sendiri (row-reverse) ia bahkan melompat ke sisi kiri. */ .chat-isi { display: flex; flex-direction: column; min-width: 0; } .chat-saya .chat-isi { align-items: flex-end; } .chat-baris.chat-saya { align-self: flex-end; flex-direction: row-reverse; } .chat-baris > .avatar { margin-bottom: 2px; } .chat-gelembung { position: relative; min-width: 0; padding: 7px 46px 7px 11px; border-radius: 10px 10px 10px 2px; background: var(--ground); border: 1px solid var(--line); font-size: .89rem; } .chat-saya .chat-gelembung { border-radius: 10px 10px 2px 10px; background: var(--accent-w); border-color: var(--accent-w); } .chat-gelembung p { margin: 0; } .chat-gelembung p + .chat-berkas { margin-top: 6px; } .chat-penulis { display: block; margin-bottom: 2px; font-size: .74rem; font-weight: 700; color: var(--accent); } /* Jamnya disandarkan ke pojok kanan bawah gelembung dan ruangnya sudah disisakan lewat padding-right, supaya tidak menimpa huruf terakhir. */ .chat-jam { position: absolute; right: 9px; bottom: 5px; font-size: .68rem; color: var(--muted); white-space: nowrap; } /* PESAN YANG SUDAH DISUNTING butuh ruang lebih di kanan. --------------------------------------------------------------------- .chat-jam berposisi ABSOLUT, jadi ia tidak mendorong apa pun: lebar yang disediakan gelembunglah yang menentukan. Padding 46px di atas dihitung untuk "12:39" saja. Begitu " - disunting" ikut menempel, kotaknya melebar ke KIRI dan menimpa teks pesannya. Diukur dengan Chrome headless pada font yang sama persis (15px "Segoe UI", .68rem): "12:39" 25,8 px "12:39 - disunting" 79,0 px 79 + 9 (jarak kanan) = 88 px yang sebenarnya dibutuhkan, sedangkan yang ada 46 - jadi teksnya tertimpa 42 piksel. Itu yang dilaporkan pemilik projek 27 September 2026: "tampilannya malah tidak bisa dibaca dengan baik saat pesan selesai disunting". 92, bukan 88: font cadangan pada mesin tanpa Segoe UI sedikit lebih lebar, dan empat piksel jauh lebih murah daripada mengukur ulang di setiap mesin. */ .chat-gelembung.disunting { padding-right: 92px; } .chat-berkas { display: flex; flex-direction: column; gap: 5px; } .chat-berkas img { max-width: 260px; max-height: 260px; border-radius: 6px; display: block; cursor: zoom-in; } .chat-berkas-tautan { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius); background: var(--surface-2); color: inherit; text-decoration: none; font-size: .82rem; } .chat-berkas-tautan:hover { background: var(--surface-3); } .chat-berkas-tautan small { display: block; color: var(--muted); font-size: .72rem; } /* Berkas warisan Bitrix yang fisiknya belum ikut dipindahkan. Namanya tetap ditampilkan - menghilangkannya membuat orang mengira lampiran itu tidak pernah ada. */ /* Kutipan balasan di dalam gelembung chat. --------------------------------------------------------------------- Nilainya mengikuti .tg-kartu dan .ci-* yang sudah ada: memakai peubah tema, bukan hex telanjang, supaya tema gelap ikut benar tanpa aturan kedua. */ /* Penanda "Diteruskan" di kepala gelembung. Kecil dan redup - ia keterangan tentang pesannya, bukan bagian isinya. */ /* Penanda "Disematkan" di kepala gelembung. Sewarna biru portal supaya terbaca sebagai penanda ruang, bukan sebagai keadaan pesannya sendiri - beda dengan "Diteruskan" yang redup. */ /* Tombol sematkan pada gelembung. Samar sampai gelembungnya disentuh tetikus - BUKAN tersembunyi, sebab layar sentuh tidak punya hover. */ .chat-pin-tombol{ border:0; background:none; cursor:pointer; padding:0 3px; font-size:11px; line-height:1; opacity:.28; transition:opacity .12s; } .chat-gelembung:hover .chat-pin-tombol{ opacity:.7; } .chat-pin-tombol.aktif{ opacity:1; } .chat-pin-tombol:hover{ opacity:1; } /* Sorot sesaat sesudah melompat ke sebuah pesan. */ .chat-sorot{ animation:chatSorot 1.6s ease-out; } @keyframes chatSorot{ 0%{ background:rgba(43,125,233,.22); } 100%{ background:transparent; } } .chat-tersemat{ font-size:11px; font-weight:700; letter-spacing:.2px; color:var(--biru,#12509b); margin-bottom:3px; } /* Pita sematan di kepala ruang. */ .chat-pin-bar{ display:flex; align-items:center; gap:8px; padding:6px 8px 6px 11px; background:var(--permukaan,#fff); border-bottom:1px solid var(--garis,#e3e9f2); border-left:3px solid var(--biru,#12509b); cursor:pointer; } .chat-pin-bar .jd{ font-size:10.5px; font-weight:800; color:var(--biru,#12509b); } .chat-pin-bar .is{ font-size:11.5px; color:var(--tinta-2,#33415c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chat-pin-bar .tk{ flex:1; min-width:0; } /* Sedang menaiki riwayat untuk menemukan pesannya. Bisa perlu beberapa putaran - sematan biasanya jauh di atas jendela 40 pesan - dan tanpa penanda ini pitanya terlihat seperti tidak menanggapi, yang persis gejala yang dilaporkan sebelum cacatnya diperbaiki. */ .chat-pin-bar[data-memuat]{ opacity:.6; cursor:progress; } .chat-pin-bar .x{ border:0; background:none; cursor:pointer; color:var(--redup,#5d6b82); font-size:15px; line-height:1; padding:2px 6px; } .chat-teruskan{ font-size:11px; font-weight:700; letter-spacing:.2px; color:var(--redup,#5d6b82); margin-bottom:3px; opacity:.9; } .chat-kutip{ border-left:3px solid var(--biru-tepi,#2b7de9); background:rgba(43,125,233,.09); border-radius:5px; padding:4px 8px; margin-bottom:5px; font-size:12px; line-height:1.4; cursor:pointer; } .chat-kutip b{ display:block; font-size:11px; color:var(--biru,#12509b); } .chat-kutip span{ color:var(--redup,#5d6b82); } .chat-kutip i{ opacity:.75; } @media (prefers-color-scheme: dark){ .chat-kutip{ background:rgba(43,125,233,.16); } } .chat-berkas-belum { display: block; padding: 5px 8px; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); font-size: .82rem; font-style: italic; } .chat-berkas-belum small { display: block; font-size: .7rem; font-style: normal; } /* ---------------- kotak tulis ---------------- */ .chat-tulis { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--surface); } .chat-tulis textarea { flex: 1 1 auto; min-width: 0; min-height: 38px; max-height: 140px; resize: none; padding: 8px 11px; border: 1px solid var(--line); border-radius: 18px; background: var(--ground); color: var(--ink); font: inherit; font-size: .89rem; line-height: 1.4; } .chat-tulis .btn { flex: 0 0 auto; } .chat-klip { flex: 0 0 auto; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-soft); font-size: 1.2rem; line-height: 1; } .chat-klip:hover { background: var(--surface-3); } .chat-klip input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); } .chat-berkas-terpilih { padding: 0 12px 8px; word-break: break-word; } /* Aturan tunggal .x { display:flex } akan MENGALAHKAN [hidden] bawaan peramban, jadi keadaan tersembunyinya harus ditulis tegas. */ .chat-berkas-terpilih[hidden] { display: none !important; } /* ---------------- lencana pesan di menu kiri ---------------- */ .side-item { position: relative; } .side-lencana { margin-left: auto; flex: 0 0 auto; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--crit); color: #fff; font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center; } .side-lencana[hidden] { display: none !important; } body.sidebar-kecil .side-lencana { position: absolute; top: 4px; right: 4px; margin-left: 0; min-width: 16px; height: 16px; line-height: 16px; padding: 0 3px; font-size: .62rem; } @media (max-width: 1000px) { .chat { grid-template-columns: 1fr; height: auto; min-height: 0; } .chat-daftar { max-height: 320px; } .chat-ruang { height: calc(100vh - var(--topbar-tinggi) - 180px); min-height: 380px; } .chat-baris { max-width: 92%; } .chat-baru-isi { width: min(288px, calc(100vw - 60px)); } } /* ===================================================================== DOK PESAN - jendela mengambang di kanan bawah Melayang di atas halaman dengan position:fixed, jadi ia tidak ikut menggulir bersama isi dan tidak menggeser tata letak apa pun di bawahnya. Lajur kanan (--rel-lebar) dihindari supaya tidak menutupi lonceng pemberitahuan. Tiga bentuk, satu jendela: biasa - 320 x 420, bertumpuk dari kanan ke kiri mini - hanya bilah judulnya (dok-mini) besar - panel lebar setinggi hampir seluruh layar (dok-maks) ===================================================================== */ .dok { position: fixed; right: calc(var(--rel-lebar) + 14px); bottom: 0; z-index: 60; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; /* halaman di belakang tetap bisa diklik */ } .dok > * { pointer-events: auto; } .dok-jendela-wadah { display: flex; align-items: flex-end; gap: 10px; } /* ---------------- tombol peluncur ---------------- */ .dok-peluncur { position: relative; margin-bottom: 16px; } .dok-tombol { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--accent-2); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); } .dok-tombol:hover { background: var(--accent-2); } .dok-tombol svg { width: 23px; height: 23px; display: block; } .dok-lencana { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--crit); color: #fff; font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center; border: 2px solid var(--surface); } .dok-lencana[hidden] { display: none !important; } .dok-panel { position: absolute; right: 0; bottom: 58px; width: 300px; max-height: 60vh; overflow: hidden; display: flex; flex-direction: column; background: var(--ground); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); } .dok-panel[hidden] { display: none !important; } .dok-panel-kepala { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); } .dok-panel-kepala a { font-size: .78rem; color: var(--accent); text-decoration: none; } .dok-panel-kepala a:hover { text-decoration: underline; } .dok-daftar { flex: 1 1 auto; overflow-y: auto; list-style: none; margin: 0; padding: 0; } .dok-daftar > li { border-bottom: 1px solid var(--line-soft); } .dok-daftar > li > button { width: 100%; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 9px; text-align: left; padding: 8px 11px; color: inherit; font: inherit; } .dok-daftar > li > button:hover { background: var(--surface-2); } .dok-daftar-teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .dok-daftar-teks > strong, .dok-daftar-teks > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dok-daftar-teks > strong { font-size: .85rem; font-weight: 600; } .dok-daftar-teks > small { font-size: .76rem; } .dok-tunggu { padding: 14px 12px; } /* ---------------- jendela ---------------- */ .dok-jendela { width: 320px; height: 420px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-bottom: none; border-radius: 6px 6px 0 0; box-shadow: var(--shadow); overflow: hidden; } .dok-kepala { flex: 0 0 auto; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; background: var(--accent); color: #fff; } .dok-kepala .avatar { background: rgba(255,255,255,.22); color: #fff; } .dok-kepala-judul { flex: 1 1 auto; min-width: 0; font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dok-kepala-lencana { flex: 0 0 auto; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--crit); color: #fff; font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center; } .dok-kepala-lencana[hidden] { display: none !important; } .dok-alat { flex: 0 0 auto; display: flex; align-items: center; gap: 1px; } .dok-alat button { width: 24px; height: 24px; padding: 0; border: none; border-radius: 4px; cursor: pointer; background: transparent; color: #fff; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .dok-alat button:hover { background: rgba(255,255,255,.22); } .dok-alat svg { width: 15px; height: 15px; display: block; } .dok-isi { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 11px; display: flex; flex-direction: column; gap: 5px; background: var(--ground); } /* Gelembung di jendela sempit dibiarkan lebih lebar daripada di halaman penuh - pada lebar 320 px, batas 76% menyisakan lajur kosong yang tidak dipakai apa pun. */ .dok-isi .chat-baris { max-width: 88%; } .dok-isi .chat-gelembung { font-size: .84rem; padding-right: 46px; } .dok-isi .chat-berkas img { max-width: 190px; max-height: 190px; } .dok-tulis { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px; padding: 7px 9px; border-top: 1px solid var(--line); background: var(--surface); } .dok-tulis textarea { flex: 1 1 auto; min-width: 0; min-height: 32px; max-height: 90px; resize: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--ground); color: var(--ink); font: inherit; font-size: .84rem; line-height: 1.35; } .dok-tulis .chat-klip { width: 28px; height: 28px; font-size: 1rem; } .dok-berkas { flex: 0 0 auto; padding: 0 10px 7px; word-break: break-word; } .dok-berkas[hidden] { display: none !important; } /* ---------------- bentuk mini ---------------- */ .dok-jendela.dok-mini { height: auto; } .dok-mini .dok-isi, .dok-mini .dok-tulis, .dok-mini .dok-berkas { display: none !important; } /* ---------------- bentuk besar ---------------- */ .dok-jendela.dok-maks { width: min(640px, calc(100vw - var(--rel-lebar) - 40px)); height: min(78vh, 720px); } .dok-maks .dok-isi .chat-baris { max-width: 76%; } .dok-maks .dok-isi .chat-gelembung { font-size: .89rem; } .dok-maks .dok-isi .chat-berkas img { max-width: 260px; max-height: 260px; } /* ---------------- arsip di halaman Pesan ---------------- */ .chat-arsip { flex: 0 0 auto; border-top: 1px solid var(--line); } .chat-arsip > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 11px; font-size: .82rem; color: var(--muted); background: var(--surface-2); } .chat-arsip > summary::-webkit-details-marker { display: none; } .chat-arsip > summary:hover { background: var(--surface-3); color: var(--ink); } .chat-arsip > summary svg { width: 15px; height: 15px; flex: 0 0 15px; } .chat-arsip > summary .chat-arsip-jml { margin-left: auto; font-variant-numeric: tabular-nums; } .chat-arsip[open] > summary { border-bottom: 1px solid var(--line-soft); } .chat-arsip .chat-list { max-height: 260px; } /* ===================================================================== TAB "OBROLAN TUGAS" (padanan Task Chats di Bitrix) Kerangkanya MEMINJAM .chat, .chat-daftar, .chat-ruang, .chat-pesan dan .chat-tulis apa adanya - dua kolom yang sama persis dengan tab Percakapan. Yang ditambahkan di sini hanya yang benar-benar berbeda: daftar kirinya tanpa avatar, dan aliran kanannya berisi komentar tugas, bukan gelembung pesan. ===================================================================== */ .ot-jml { flex: 0 0 auto; margin-left: auto; font-size: .74rem; padding: 1px 7px; border-radius: 9px; background: var(--surface-3); color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; } .ot-form-alat { display: inline; } /* .ot-aliran DIBUANG 28 September 2026. --------------------------------------------------------------------- Ia melayani markup lama panel kanan Obrolan tugas -
    - dan isinya `display: block`, yang membatalkan `display: flex` milik .chat-pesan. Sejak aliran itu memakai .chat-baris seperti tab Percakapan, aturan ini berubah dari tidak berguna menjadi merusak: baris milik sendiri kehilangan rata kanannya, tombol "muat sebelumnya" kehilangan rata tengahnya, dan menu melayang berlabuh pada baris yang geometrinya sudah lain. Dibuang, bukan disempitkan cakupannya: kelas yang tidak dipakai satu pun halaman adalah kelas yang suatu hari dipakai lagi oleh yang mengira ia masih berarti. */ .chat-kepala-alat { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } @media (max-width: 700px) { .dok { right: 10px; left: 10px; justify-content: flex-end; } .dok-jendela { width: calc(100vw - 20px); height: 60vh; } .dok-jendela.dok-maks { width: calc(100vw - 20px); height: 78vh; } /* Di layar sempit hanya jendela terakhir yang ditampilkan - dua jendela selebar layar akan saling menutupi seluruhnya. */ .dok-jendela-wadah > .dok-jendela:not(:last-child) { display: none; } } /* ---- Blok "Kotak bawaan" di perancang formulir ---- Dibingkai supaya jelas ia mengatur kotak yang DISEDIAKAN SISTEM, bukan kolom buatan sendiri yang diatur di bagian bawah halaman. Tanpa batas yang terlihat, dua hal berbeda itu terbaca sebagai satu daftar. */ .rc-set { margin: 4px 0 14px; padding: 12px 14px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); } .rc-set > legend { padding: 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .rc-set .cek { margin-top: 8px; } .rc-catatan { margin: 3px 0 10px 26px; line-height: 1.5; } /* ===================================================================== PENGATURAN GRUP Aturan tunggal berkelas seperti .chat-pesan { display: flex } MENGALAHKAN [hidden] bawaan peramban, karena keduanya sama-sama spesifisitas (0,1,0) dan yang ditulis belakangan menang. Jadi keadaan tersembunyinya harus ditulis tegas - kalau tidak, panel pengaturan dan daftar pesan tergambar bertumpuk. ===================================================================== */ .chat-pesan[hidden], .chat-tulis[hidden], .chat-atur[hidden] { display: none !important; } .chat-gear { display: inline-flex; align-items: center; gap: 5px; } .chat-gear svg { width: 15px; height: 15px; } .chat-gear.aktif { background: var(--accent-w); color: var(--accent); } .chat-atur { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; background: var(--ground); } /* Dua lajur di layar lapang, satu lajur di layar sempit. Anggota di kiri karena itulah yang paling sering dibuka - menambah orang jauh lebih sering daripada mengubah hak akses. */ .chat-atur-kolom { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } .chat-atur-kolom h3 { margin: 0 0 8px; font-size: .9rem; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .chat-anggota { list-style: none; margin: 0 0 12px; padding: 0; } .chat-anggota > li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: .85rem; } .chat-anggota-teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .chat-anggota-teks > strong, .chat-anggota-teks > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-anggota-teks > small { font-size: .74rem; } .chat-anggota-alat { flex: 0 0 auto; display: flex; gap: 4px; } .chat-atur-form { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .chat-atur-form .field { display: block; margin-bottom: 10px; } .chat-atur-form .field > span { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 3px; } .chat-atur-form input[type=text], .chat-atur-form select { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground); color: var(--ink); font: inherit; font-size: .85rem; } .chat-atur-form .cek { margin: 4px 0 10px; } .chat-atur-form .actions { margin: 0; } /* Kotak tulis yang terkunci diberi keterangan, bukan dihilangkan diam-diam. Kotak yang hilang tanpa penjelasan terbaca sebagai kerusakan; keterangan yang menyebut sebabnya tidak. */ .chat-terkunci { flex: 0 0 auto; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); text-align: center; line-height: 1.5; } /* ---- Lampiran Office di chat: buka di tempat, plus tombol unduh ---- Dua tindakan yang berbeda dipisahkan menjadi dua sasaran klik. Kalau kartu lampirannya hanya punya satu tautan, orang yang ingin menyimpan berkasnya harus membuka ONLYOFFICE dulu lalu mengunduh dari sana - dua langkah untuk sesuatu yang seharusnya satu. */ .chat-berkas-baris { display: flex; align-items: stretch; gap: 3px; } .chat-berkas-baris > .chat-berkas-tautan { flex: 1 1 auto; min-width: 0; } .chat-berkas-unduh { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); text-decoration: none; font-size: 1rem; line-height: 1; } .chat-berkas-unduh:hover { background: var(--surface-3); color: var(--ink); } /* ===================================================================== TIGA TOMBOL JENDELA DI HALAMAN PESAN ===================================================================== */ .chat-jendela { display: inline-flex; align-items: center; gap: 1px; margin-left: 2px; } .chat-win { width: 26px; height: 24px; padding: 0; border: none; border-radius: 4px; cursor: pointer; background: transparent; color: var(--muted); font-size: .95rem; line-height: 1; text-decoration: none; display: flex; align-items: center; justify-content: center; } .chat-win:hover { background: var(--surface-2); color: var(--ink); } /* Tutup diberi warna berbeda saat disentuh - ia satu-satunya dari ketiganya yang benar-benar meninggalkan percakapan. */ .chat-win-tutup:hover { background: var(--crit-w); color: var(--crit); } /* ---------------- perkecil ---------------- */ /* Ruang percakapan tidak lagi memenuhi tinggi kisi, jadi tinggal bilah judulnya. Daftar di kiri tetap penuh. */ .chat.chat-kecil .chat-ruang { align-self: start; } .chat.chat-kecil .chat-pesan, .chat.chat-kecil .chat-tulis, .chat.chat-kecil .chat-atur, .chat.chat-kecil .chat-terkunci, .chat.chat-kecil .chat-berkas-terpilih { display: none !important; } /* ---------------- perbesar ---------------- */ /* Yang dilepas hanya PEMBATAS HALAMAN: jarak tepi 22 px, batas lebar 1400 px, sisa tinggi 96 px, dan baris kaki. Menu kiri dan daftar percakapan tetap di tempatnya. Versi pertama menutupi keduanya dengan lapisan melayang. Itu keliru: daftar percakapan bukan hiasan yang mengganggu, ia alat kerja - orang membaca satu percakapan sambil melihat mana lagi yang menunggu dijawab. Menyembunyikannya memaksa keluar-masuk mode penuh setiap kali ingin berpindah, dan itu lebih merepotkan daripada ruang baca yang didapat. */ body.chat-penuh .page { padding: 0; max-width: none; } body.chat-penuh .foot { display: none; } body.chat-penuh .chat { height: calc(100vh - var(--topbar-tinggi) - var(--subnav-tinggi)); min-height: 0; gap: 0; } /* Sudut dan garis luar dihilangkan supaya kedua panel benar-benar menempel ke tepi jendela, bukan mengambang dengan celah tipis. */ body.chat-penuh .chat-daftar { border-radius: 0; border-left: none; } body.chat-penuh .chat-ruang { border-radius: 0; border-right: none; } /* Halaman di belakangnya dikunci supaya tidak ikut tergulir saat percakapan digulir sampai ujung. */ body.chat-penuh { overflow: hidden; } /* Dok pesan disembunyikan selagi mode penuh - ia melayang di kanan bawah, tepat di atas kotak tulis. */ body.chat-penuh .dok { display: none; } /* ---- Kepala percakapan kini memuat banyak tombol ---- Tiga tombol jendela, gear grup, arsip, hapus, dan hapus total. Pada layar sempit deretan itu tidak muat dalam satu baris, dan tanpa izin membungkus ia akan mendorong nama percakapan sampai tidak terbaca - nama itu satu-satunya yang memberi tahu sedang membuka percakapan siapa. */ .chat-kepala { flex-wrap: wrap; row-gap: 6px; } .chat-kepala-alat { flex-wrap: wrap; row-gap: 4px; margin-left: auto; } .chat-kepala-teks { flex: 1 1 180px; } /* Hapus total diberi warna bahaya penuh, bukan sekadar garis tepi. Ia satu-satunya tombol di halaman ini yang menghapus milik orang lain, dan itu harus terlihat sebelum diklik, bukan sesudah. */ .chat-kepala-alat .btn-danger { font-weight: 600; } /* Keterangan saat riwayat sudah dibersihkan. Kotak pesan yang kosong melompong terbaca sebagai kerusakan; satu kalimat yang menyebut sebabnya tidak. */ .chat-bersih { align-self: center; max-width: 420px; margin: auto 0; padding: 14px 16px; text-align: center; line-height: 1.6; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); } /* Syarat langkah persetujuan. Diberi warna sendiri supaya terbaca sebagai keterangan tambahan, bukan bagian dari nama langkah - kalau warnanya sama, "Persetujuan Vera hanya bila Diajukan kepada kosong" terbaca sebagai satu nama panjang yang membingungkan. */ .rantai-syarat { display: block; margin-top: 2px; font-size: .76rem; color: var(--warn); } .rantai-syarat::before { content: "\\21B3\\00A0"; opacity: .7; } /* ===================================================================== TUGAS & PROYEK ===================================================================== */ /* ---- angka ringkas di puncak setiap tampilan ---- */ .tg-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; } .tg-angka { background: var(--surface); padding: 11px 14px; text-decoration: none; display: flex; flex-direction: column; gap: 1px; color: inherit; } .tg-angka:hover { background: var(--surface-2); } .tg-angka b { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; } .tg-angka span { font-size: .78rem; color: var(--muted); } .tg-angka-bahaya b { color: var(--crit); } .tg-bar { align-items: flex-end; } .tg-bar select, .tg-bar input[type=search] { min-width: 130px; } .tg-cari input { min-width: 190px; } .tg-bar-mode { margin-top: -6px; } .tg-bulan-nav { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } /* ---- daftar ---- */ .tg-alat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .tg-urut { font-size: .8rem; color: var(--muted); } .tg-urut a { color: var(--muted); text-decoration: none; margin-left: 8px; } .tg-urut a:hover { color: var(--accent); } .tg-urut-aktif { color: var(--accent) !important; font-weight: 600; text-decoration: underline !important; } .tg-grup { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .9rem; } .tg-grup:first-child { margin-top: 0; } .tg-grup a { color: var(--ink); text-decoration: none; } .tg-grup a:hover { color: var(--accent); } .tg-tabel td { vertical-align: top; } .tg-judul { font-weight: 500; color: var(--ink); text-decoration: none; } .tg-judul:hover { color: var(--accent); text-decoration: underline; } .tg-baris-selesai .tg-judul { color: var(--muted); text-decoration: line-through; } .tg-nama { font-size: .85rem; } .tg-tgl { white-space: nowrap; } .tg-lewat { color: var(--crit); font-weight: 600; } /* Prioritas tinggi ditandai bentuk DAN warna, bukan warna saja: satu dari dua belas laki-laki tidak bisa membedakan merah dari abu-abu. */ .tg-prio { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 3px; font-weight: 700; font-size: .72rem; background: var(--crit-w); color: var(--crit); margin-right: 4px; } .tg-halaman { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .tg-selesai { color: var(--ok); } .tg-jalan { color: var(--accent); } .tg-tinjau { color: var(--warn); } .tg-tunda { color: var(--muted); } .tg-tolak { color: var(--crit); } .tg-tunggu { color: var(--ink-soft); } /* ---- papan kanban ---- */ .tg-catatan-papan { margin: -4px 0 10px; } .tg-papan { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; } .tg-kolom { flex: 0 0 265px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; max-height: 74vh; } .tg-kolom-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 3px solid var(--muted); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); font-size: .85rem; } .tg-kolom-nama { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-kolom-jml { flex: 0 0 auto; background: var(--surface-3); color: var(--muted); border-radius: 9px; padding: 0 7px; font-size: .75rem; } .tg-kolom-isi { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; } .tg-kolom-kosong { text-align: center; padding: 14px 0; } .tg-kolom-sasaran { outline: 2px dashed var(--accent); outline-offset: -3px; } .tg-kartu { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 10px; cursor: grab; display: flex; flex-direction: column; gap: 6px; } .tg-kartu:active { cursor: grabbing; } .tg-kartu-seret { opacity: .4; } .tg-kartu-judul { font-size: .87rem; color: var(--ink); text-decoration: none; line-height: 1.35; } .tg-kartu-judul:hover { color: var(--accent); } .tg-kartu-proyek { font-size: .73rem; color: var(--muted); } .tg-kartu-kaki { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--muted); } .tg-kartu-tgl { margin-left: auto; } .tg-kartu-tanda { white-space: nowrap; } /* ===================================================================== WARNA KARTU DI PAPAN ===================================================================== SELURUH kartu yang berwarna, bukan pita di tepinya. Versi pertama memakai pita 4 piksel di tepi kiri, dengan alasan yang terdengar masuk akal: pita tidak menyentuh teks, jadi keterbacaannya pasti aman. Di papan sungguhan alasan itu runtuh - pita setipis itu hilang di antara enam puluh kartu, dan warna yang harus dicari dengan mata menyipit tidak menjawab pertanyaan yang membuat orang mewarnai kartunya: "mana yang merah?" Keterbacaan tetap dijaga, hanya dengan cara lain: yang diwarnai LATARNYA dengan nada sangat muda, dan warna teks tidak disentuh sama sekali. Tiap warna punya dua nilai - muda untuk tema terang, tua untuk tema gelap - sebab satu nilai yang sama tidak bisa benar di keduanya: yang nyaman di kertas putih menyilaukan di layar gelap, dan yang pas di layar gelap tidak terlihat sama sekali di terang. Nilainya ditulis di sini, bukan di basis data. Yang disimpan cuma namanya - 'merah', 'hijau' - jadi kartu yang diwarnai hari ini ikut menyesuaikan diri kalau palet ini dirapikan tahun depan, dan ikut berganti nada sendiri saat orangnya berpindah tema. */ .tg-kartu { position: relative; } .tg-kartu.tg-warna-merah { background: #fdeaea; border-color: #f0b4b4; } .tg-kartu.tg-warna-jingga { background: #fdf0e0; border-color: #efc794; } .tg-kartu.tg-warna-kuning { background: #fbf6d8; border-color: #e3d183; } .tg-kartu.tg-warna-hijau { background: #e6f5ec; border-color: #a5d7bb; } .tg-kartu.tg-warna-biru { background: #e7f0fb; border-color: #a8c6e9; } .tg-kartu.tg-warna-ungu { background: #f0eafa; border-color: #c2addf; } @media (prefers-color-scheme: dark) { .tg-kartu.tg-warna-merah { background: #3a2222; border-color: #6d3b3b; } .tg-kartu.tg-warna-jingga { background: #3a2d1d; border-color: #6d5227; } .tg-kartu.tg-warna-kuning { background: #36331c; border-color: #665e26; } .tg-kartu.tg-warna-hijau { background: #1e3329; border-color: #2f6048; } .tg-kartu.tg-warna-biru { background: #1f2c3b; border-color: #315170; } .tg-kartu.tg-warna-ungu { background: #2b2438; border-color: #4d3f6b; } } /* Tombol titik tiga. Samar sampai kartunya disentuh - papan dengan enam puluh kartu yang masing-masing memamerkan tombolnya sendiri sudah penuh sebelum satu tugas pun dibaca. Tetap terlihat penuh saat menunya terbuka atau saat ia yang sedang difokus papan ketik, supaya tidak lenyap di bawah jari orang yang sedang memakainya. */ .tg-kartu-menu { position: absolute; right: 5px; bottom: 4px; } .tg-kartu-titik { border: none; background: none; cursor: pointer; padding: 0 4px; line-height: 1; font-size: 1rem; color: var(--muted); opacity: 0; transition: opacity .12s; } .tg-kartu:hover .tg-kartu-titik, .tg-kartu-titik:focus-visible, .tg-kartu-titik[aria-expanded="true"] { opacity: 1; } .tg-kartu-titik:hover { color: var(--ink); } /* ATURAN INI WAJIB ADA, DAN URUTANNYA SESUDAH .tg-warna-pilih. ------------------------------------------------------------------ Atribut `hidden` disembunyikan peramban lewat `display: none` di lembar gaya bawaannya - dan lembar gaya bawaan kalah oleh kelas apa pun yang menyebut display. Jadi `.tg-warna-pilih { display: flex }` sendirian membuat menunya TIDAK PERNAH tersembunyi: enam bulatan warna menempel di tiap kartu sepanjang waktu, dan JavaScript yang dengan rajin memasang `hidden` tampak seolah tidak bekerja. Persis itu yang terjadi pada versi pertama fitur ini. */ .tg-warna-pilih { position: absolute; right: 0; bottom: 20px; z-index: 30; display: flex; gap: 5px; padding: 6px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,.18); } .tg-warna-pilih[hidden] { display: none; } .tg-warna-satu { width: 17px; height: 17px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(0,0,0,.18); padding: 0; line-height: 1; font-size: .7rem; color: var(--muted); } .tg-warna-satu:hover, .tg-warna-satu:focus-visible { transform: scale(1.18); } .tg-warna-pilih .tg-warna-merah { background: #e05252; } .tg-warna-pilih .tg-warna-jingga { background: #e08a3c; } .tg-warna-pilih .tg-warna-kuning { background: #d6b429; } .tg-warna-pilih .tg-warna-hijau { background: #3fa96b; } .tg-warna-pilih .tg-warna-biru { background: #3d86d0; } .tg-warna-pilih .tg-warna-ungu { background: #8a63cc; } .tg-warna-kosong { background: var(--surface-2); } .tg-kartu-periksa { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--muted); } .tg-bilah { flex: 1 1 auto; display: block; height: 5px; min-width: 40px; background: var(--surface-3); border-radius: 3px; overflow: hidden; } .tg-bilah i { display: block; height: 100%; background: var(--accent); } /* ---- tenggat & kalender ---- */ .tg-jt-tgl { white-space: nowrap; width: 78px; } .tg-jt-orang { white-space: nowrap; } .tg-kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .tg-kal-kepala { background: var(--surface-2); padding: 6px 8px; font-size: .74rem; font-weight: 600; color: var(--muted); text-align: center; } .tg-kal-sel { background: var(--surface); min-height: 92px; padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; } .tg-kal-kosong { background: var(--surface-2); } .tg-kal-ini { box-shadow: inset 0 0 0 2px var(--accent); } .tg-kal-nomor { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; } .tg-kal-tugas { font-size: .73rem; line-height: 1.3; text-decoration: none; background: var(--accent-w); color: var(--accent); border-radius: 3px; padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-kal-lewat { background: var(--crit-w); color: var(--crit); } .tg-kal-lagi { font-size: .7rem; color: var(--muted); text-decoration: none; } /* ---- gantt ---- */ /* Gantt digulir SEBAGAI SATU WADAH - ini penting, dan dulu tidak begitu. Sebelumnya kolom nama dan kisi tanggal punya wadah gulirnya masing-masing: nama ber-overflow:hidden, kisi ber-overflow-x:auto. Yang tidak terlihat dari CSS itu, satu aturan CSS mengubah overflow-y kisi menjadi auto juga begitu overflow-x-nya bukan visible - jadi kisinya bisa digulir tegak sementara kolom nama TIDAK BISA SAMA SEKALI. Di layar penuh akibatnya terlihat jelas: batangnya bergerak, namanya diam, dan baris di bawah lipatan tidak pernah bisa dicapai. Sekarang hanya .tg-gantt yang menggulir, dua arah. Kolom nama menempel ke kiri dan kepala tabel menempel ke atas dengan position: sticky, jadi keduanya tetap terlihat tanpa pernah bisa lepas dari barisnya - kesejajaran bukan lagi sesuatu yang harus dijaga, sebab keduanya digulir oleh wadah yang sama. */ .tg-gantt { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: 70vh; /* flex-start, BUKAN stretch. Dengan stretch kedua kolom diregangkan setinggi jendela gulirnya saja, bukan setinggi isinya - dan kepala tabel yang menempel di dalamnya ikut hanyut begitu kotak induknya tergulir keluar layar. Dengan flex-start keduanya setinggi isi sebenarnya, sehingga yang menempel benar-benar menempel. */ align-items: flex-start; } .tg-gantt-nama { flex: 0 0 210px; border-right: 1px solid var(--line); background: var(--surface); /* Di ATAS kepala tanggal (z 3). Kolom nama membuat konteks tumpuknya sendiri, jadi z-index anaknya tidak bisa menembus keluar - kalau nilainya lebih rendah, kepala tanggal menutupi kata "Tugas" di sudut kiri atas. */ position: sticky; left: 0; z-index: 5; } .tg-gantt-kepala { height: 30px; display: flex; align-items: center; padding: 0 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .74rem; font-weight: 600; color: var(--muted); position: sticky; top: 0; z-index: 3; } /* Sudut kiri atas menempel dua arah sekaligus - tegak oleh aturan di atas, mendatar oleh kolom namanya. */ .tg-gantt-baris { display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line-soft); font-size: .8rem; } .tg-gantt-baris a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-gantt-baris a:hover { color: var(--accent); } /* Tanpa wadah gulir sendiri. flex-shrink 0 supaya kisi selebar rentang waktunya tidak diperas masuk ke dalam lebar layar - yang diperas itulah yang dulu memaksanya menggulir sendiri. */ .tg-gantt-kisi { flex: 1 0 auto; } .tg-gantt-dalam { position: relative; } /* Tanpa position sendiri - ia mewarisi sticky dari .tg-gantt-kepala, dan sticky sudah cukup jadi jangkar bagi label minggu yang berposisi mutlak di dalamnya. Menulis position:relative di sini dulu diam-diam membatalkan sticky-nya, sebab aturannya datang belakangan dengan kekhususan yang sama. */ .tg-gantt-waktu { padding: 0; } .tg-gantt-minggu { position: absolute; top: 0; height: 30px; line-height: 30px; padding-left: 5px; font-size: .7rem; color: var(--muted); border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; } .tg-gantt-bulan-awal { color: var(--ink-soft); font-weight: 600; } .tg-gantt-badan { position: relative; background: var(--surface); color: var(--ink-soft); } .tg-gantt-garis { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); } .tg-gantt-hariini { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--crit); opacity: .55; } .tg-gantt-tali { position: absolute; top: 0; left: 0; pointer-events: none; } .tg-gantt-batang { position: absolute; height: 20px; border-radius: 3px; background: var(--accent-w); border: 1px solid currentColor; display: flex; align-items: center; padding: 0 6px; font-size: .72rem; text-decoration: none; overflow: hidden; } .tg-gantt-batang span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-gantt-batang.tg-selesai { background: var(--ok-w); } .tg-gantt-batang.tg-tinjau { background: var(--warn-w); } .tg-gantt-lewat { background: var(--crit-w); } /* ---- detail tugas ---- */ .tg-detil { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; } @media (max-width: 820px) { .tg-detil { grid-template-columns: minmax(0, 1fr); } } .tg-detil-sisi { border-left: 1px solid var(--line); padding-left: 16px; } @media (max-width: 820px) { .tg-detil-sisi { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; } } .tg-fakta { margin: 0; display: grid; grid-template-columns: auto; gap: 2px; font-size: .85rem; } .tg-fakta dt { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 9px; } .tg-fakta dd { margin: 0; } .tg-orang { display: inline-block; margin-right: 6px; } .tg-status-form { margin-top: 14px; } .tg-tag-baris { margin-top: 10px; } .tg-daftar-ringkas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .tg-daftar-ringkas li { display: flex; align-items: center; gap: 8px; font-size: .87rem; } /* ---- daftar periksa ---- */ .tg-periksa { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; } .tg-periksa li { display: flex; align-items: center; gap: 8px; font-size: .88rem; } .tg-periksa-form { display: inline-flex; margin: 0; } .tg-periksa-kotak { width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid var(--line); background: var(--surface); border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; color: var(--ok); padding: 0; } .tg-periksa-mati { cursor: default; } .tg-periksa-selesai .tg-periksa-teks { color: var(--muted); text-decoration: line-through; } .tg-periksa-teks { flex: 1 1 auto; } .tg-periksa-buang { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 3px; } .tg-periksa-buang:hover { color: var(--crit); } .tg-periksa-tambah { display: flex; gap: 7px; } .tg-periksa-tambah input { flex: 1 1 auto; } /* ---- lampiran & komentar ---- */ .tg-berkas { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .88rem; } .tg-berkas li { display: flex; align-items: center; gap: 8px; } .tg-berkas-unduh { text-decoration: none; color: var(--muted); } .tg-unggah { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tg-komentar { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .tg-komentar > li { display: flex; gap: 9px; } .tg-komentar-isi { flex: 1 1 auto; min-width: 0; } .tg-komentar-kepala { display: flex; align-items: baseline; gap: 8px; font-size: .85rem; } .tg-komentar-isi p { margin: 3px 0 0; font-size: .89rem; } .tg-komentar-berkas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: flex-start; } .tg-komentar-berkas img { max-width: 180px; max-height: 140px; border-radius: var(--radius); display: block; } .tg-komentar-tulis { display: flex; flex-direction: column; gap: 7px; } .tg-komentar-tulis textarea { width: 100%; } .tg-komentar-alat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ---- proyek ---- */ .tg-proyek-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .tg-proyek-kartu { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; background: var(--surface); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; } .tg-proyek-kartu:hover { border-color: var(--accent); } .tg-proyek-tutup { opacity: .62; } .tg-proyek-kepala { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .tg-proyek-bilah { display: flex; align-items: center; gap: 8px; } .tg-proyek-angka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin: 0; font-size: .78rem; } .tg-proyek-angka dt { color: var(--muted); display: inline; } .tg-proyek-angka dd { margin: 0; display: inline; font-weight: 600; } .tg-proyek-angka > div { display: flex; justify-content: space-between; gap: 6px; } .tg-anggota { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; } .tg-anggota-satu { display: flex; align-items: center; gap: 7px; font-size: .85rem; } .tg-anggota-satu small { display: block; font-size: .72rem; } .tg-anggota-mati { opacity: .55; } .tg-lingkup { margin: -2px 0 10px; } .side-lencana-lewat { background: var(--crit); color: #fff; } .tg-putus { display: flex; flex-direction: column; gap: 9px; } .tg-putus-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .tg-putus-form input[type=text] { flex: 1 1 220px; } .tg-riwayat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .84rem; } .tg-riwayat li { display: grid; grid-template-columns: 118px 118px minmax(0, 1fr); gap: 10px; align-items: baseline; } @media (max-width: 640px) { .tg-riwayat li { grid-template-columns: minmax(0, 1fr); gap: 1px; } } .tg-riwayat-waktu { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .tg-riwayat-bidang { color: var(--ink-soft); font-weight: 600; } .tg-hari-pilih { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 6px 0 4px; } .tg-hari-pilih[hidden] { display: none !important; } .tg-hari-pilih .field-label { font-size: .8rem; color: var(--muted); } #brl-tanggal[hidden] { display: none !important; } .tg-form-tersembunyi { display: none; } .tg-tambah-kolom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .tg-tambah-kolom input[type=text] { flex: 1 1 200px; } .tg-tambah-anggota { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; } .tg-hapus:hover { color: var(--crit); border-color: var(--crit); } .tg-tag-baris { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; } .tg-tag-satu { display: inline-flex; align-items: center; gap: 3px; } .tg-tag-lepas { border: none; background: transparent; color: inherit; cursor: pointer; padding: 0 1px; font-size: .9em; opacity: .6; } .tg-tag-lepas:hover { opacity: 1; color: var(--crit); } .tg-tag-tambah { display: inline-flex; gap: 5px; align-items: center; margin: 0; } .tg-tag-tambah input { width: 120px; } .tg-gantung-tambah { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .tg-gantung-tambah select { flex: 1 1 260px; max-width: 100%; } .tg-daftar-ringkas form { display: inline-flex; margin: 0; } /* ===================================================================== KALENDER ===================================================================== */ .kal-bar { align-items: center; gap: 14px; flex-wrap: wrap; } .kal-tampilan { display: inline-flex; gap: 5px; } /* .kal-baru DIGANTIKAN .kal-kanan sejak tombol Google Calendar masuk ke bilah: sekarang ada DUA tombol di ujung kanan, dan yang harus didorong ke kanan adalah wadahnya, bukan salah satu tombolnya. Aturannya dibiarkan ada supaya salinan lama kal_bilah.php yang belum terunggah tidak berubah tata letaknya di tengah pemasangan. */ .kal-baru { margin-left: auto; } .kal-lapis { display: inline-flex; flex-wrap: wrap; gap: 6px; } .kal-cip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 12px; font-size: .76rem; border: 1px solid var(--line); background: var(--surface); color: var(--muted); text-decoration: none; } /* Lapis yang mati ditandai warna DAN teks pudar, bukan warna saja - satu dari dua belas laki-laki tidak bisa membedakan merah dari abu-abu. */ .kal-cip i { width: 8px; height: 8px; border-radius: 50%; opacity: .3; flex: 0 0 8px; } .kal-cip-nyala { color: var(--ink); border-color: var(--ink-soft); } .kal-cip-nyala i { opacity: 1; } .kal-nav { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } /* Kedua sisi diberi lebar yang sama - flex-basis 0 dengan grow 1 - supaya tajuk di antaranya jatuh tepat di tengah lebar kotak, bukan di tengah ruang yang tersisa sesudah tombol. */ .kal-nav-sisi { flex: 1 1 0; display: flex; gap: 7px; align-items: center; min-width: 0; } .kal-nav-kanan { justify-content: flex-end; } .kal-tajuk { flex: 0 0 auto; padding: 0 14px; font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: var(--accent); letter-spacing: .2px; white-space: nowrap; } .kal-tajuk-kanan { margin-left: auto; } /* Di layar sempit tombolnya sudah membungkus sendiri; tajuknya diberi baris penuh supaya tidak terjepit di antara dua tombol. */ @media (max-width: 720px) { .kal-nav-sisi { flex: 1 1 100%; } .kal-nav-kanan { display: none; } .kal-tajuk { flex: 1 1 100%; padding: 4px 0 0; text-align: center; } .kal-tajuk-kanan { margin-left: 0; } } /* Lambang kue di depan nama yang berulang tahun. Sejajar dengan garis dasar teks, bukan menggantung di tengah - kalau di tengah, ia terlihat melompat pada butir yang judulnya dua baris. */ .kal-ikon { vertical-align: -2px; margin-right: 3px; flex: 0 0 auto; } .kal-ultah .kal-ikon { color: #a8557a; } .kal-judul .kal-ikon { color: #a8557a; } /* ---- kisi bulan ---- */ .kal-kisi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .kal-kepala { background: var(--surface-2); padding: 6px 8px; text-align: center; font-size: .74rem; font-weight: 600; color: var(--muted); } .kal-sel { background: var(--surface); min-height: 104px; padding: 4px 5px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .kal-luar { background: var(--surface-2); } .kal-merah { background: var(--crit-w); } .kal-luar.kal-merah { background: var(--surface-2); } .kal-ini { box-shadow: inset 0 0 0 2px var(--accent); } .kal-nomor { display: flex; align-items: baseline; gap: 6px; justify-content: space-between; } .kal-nomor > a { font-size: .8rem; color: var(--ink-soft); text-decoration: none; font-variant-numeric: tabular-nums; padding: 0 2px; border-radius: 3px; } .kal-nomor > a:hover { background: var(--accent-w); color: var(--accent); } .kal-luar .kal-nomor > a { color: var(--muted); } .kal-libur-nama { font-size: .66rem; color: var(--crit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62%; } .kal-butir { display: block; font-size: .71rem; line-height: 1.35; text-decoration: none; padding: 1px 4px; border-left: 3px solid var(--accent); background: var(--surface-2); color: var(--ink-soft); border-radius: 0 2px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kal-butir:hover { background: var(--surface-3); color: var(--ink); } .kal-butir b { font-variant-numeric: tabular-nums; } .kal-lagi { font-size: .68rem; color: var(--muted); text-decoration: none; padding-left: 4px; } /* ---- minggu ---- */ .kal-minggu { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } @media (max-width: 900px) { .kal-minggu { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .kal-minggu { grid-template-columns: minmax(0, 1fr); } } .kal-hari { background: var(--surface); padding: 7px 8px; min-height: 130px; display: flex; flex-direction: column; gap: 4px; } .kal-hari > header { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; } .kal-hari-nama { font-size: .78rem; font-weight: 600; } .kal-hari-tgl { font-size: 1.05rem; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; } .kal-hari-tgl:hover { color: var(--accent); } .kal-hari .kal-butir { white-space: normal; padding: 3px 5px; } .kal-hari .kal-butir small { display: block; } .kal-kosong { text-align: center; padding: 8px 0; } /* ---- agenda ---- */ .kal-agenda { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .kal-agenda-hari { background: var(--surface); display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 12px; padding: 9px 12px; } .kal-agenda-tgl { text-align: center; display: flex; flex-direction: column; line-height: 1.15; } .kal-agenda-tgl b { font-size: 1.4rem; font-variant-numeric: tabular-nums; } .kal-agenda-tgl span { font-size: .74rem; color: var(--muted); } .kal-agenda-tgl small { font-size: .68rem; color: var(--muted); } .kal-agenda-tgl em { font-size: .64rem; color: var(--accent); font-style: normal; font-weight: 600; } .kal-agenda-isi { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .kal-baris { display: flex; align-items: baseline; gap: 8px; font-size: .87rem; text-decoration: none; color: var(--ink); padding: 2px 0; flex-wrap: wrap; } .kal-baris:hover .kal-judul { color: var(--accent); text-decoration: underline; } .kal-titik { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; } .kal-jam { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 48px; } .kal-judul { min-width: 0; } /* ---- acara & undangan ---- */ .kal-jawab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .kal-jawab-form { display: inline-flex; gap: 6px; margin: 0; margin-left: auto; } .kal-jam[hidden] { display: none !important; } .kal-ulang[hidden] { display: none !important; } /* ---- ruang rapat ---- */ .kal-ruang-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .kal-ruang { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; } .kal-ruang-mati { opacity: .55; } .kal-ruang > header { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; padding: 8px 11px; border-top: 3px solid var(--muted); border-radius: var(--radius) var(--radius) 0 0; } .kal-ruang-jadwal { list-style: none; margin: 0; padding: 6px 11px 10px; display: flex; flex-direction: column; gap: 6px; font-size: .84rem; } .kal-ruang-jadwal li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .kal-ruang-jadwal a { color: var(--ink); text-decoration: none; } .kal-ruang-jadwal a:hover { color: var(--accent); text-decoration: underline; } .kal-ruang-baris { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--line-soft); } .kal-ruang-baris input[type=text] { flex: 1 1 200px; } .kal-ruang-baru { border-bottom: none; margin-top: 8px; } .kal-libur-tambah { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } /* ===================================================================== DRIVE ===================================================================== */ .dr-angka { display: grid; gap: 10px; margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .dr-kotak { display: block; padding: 10px 14px; text-decoration: none; background: var(--ground); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: var(--radius); color: var(--ink); } .dr-kotak:hover { background: var(--surface-2); } .dr-kotak.dr-aktif { border-color: var(--accent); background: var(--surface-2); } .dr-kotak b { display: block; font-size: 1.35rem; line-height: 1.2; } .dr-kotak span { display: block; font-size: .8rem; color: var(--ink-soft); } .dr-kotak small { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; } .dr-bar .dr-cari { flex: 1 1 260px; min-width: 200px; } .dr-kanan { text-align: right; white-space: nowrap; } /* Titik warna sumber di depan nama berkas. Warna saja tidak cukup bagi yang sulit membedakan warna - karena itu label sumbernya tetap ditulis di kolom sebelahnya, dan titik ini hanya mempercepat penyapuan mata. */ .dr-titik { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; flex: 0 0 auto; } .dr-induk { display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: -4px; margin-left: 4px; font-size: .82rem; } .dr-tabel td:first-child a { word-break: break-all; } /* Baris yang berkasnya belum ada - dipudarkan, bukan disembunyikan. Yang mengurus perpindahan berkas justru perlu melihatnya. */ .dr-hilang td { opacity: .55; } .dr-hilang td:first-child span[title] { font-style: italic; } .dr-catatan { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-soft); } .dr-total { margin: 0 0 10px; font-size: .92rem; } .dr-total strong { font-variant-numeric: tabular-nums; } .dr-pisah { margin: 0 6px; color: var(--muted); } /* Angka ukuran disejajarkan supaya besar-kecilnya terbaca dari panjangnya, bukan dari membaca satu per satu. Tidak dipudarkan: ini kolom yang justru dicari orang saat membereskan penyimpanan. */ .dr-ukuran { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .84rem; } /* ---- pratinjau PDF berbingkai portal ---- */ .dv-bar { align-items: center; gap: 8px; } .dv-judul { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; } .dv-sisi { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dv-kotak .kotak-isi { display: flex; flex-direction: column; } .dv-bingkai { width: 100%; height: 74vh; min-height: 380px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); } /* Diperbesar ke layar penuh, bingkainya ikut mengambil sisa tinggi - PDF portrait di layar lebar jauh lebih terbaca begitu. min-height dilepas, kalau tidak ia menolak mengecil dan bilah bawahnya terdorong keluar layar. */ .kotak.kotak-maks[data-kotak="drive-pdf"] .dv-bingkai { flex: 1 1 auto; height: auto; min-height: 0; } .dv-catatan { margin: 8px 0 0; } /* ---- agenda di beranda ---- */ .bd-agenda { list-style: none; margin: 0; padding: 0; } .bd-agenda-hari { display: flex; gap: 12px; padding: 7px 0; } .bd-agenda-hari + .bd-agenda-hari { border-top: 1px solid var(--line-soft); } .bd-agenda-tgl { flex: 0 0 108px; font-size: .8rem; font-weight: 600; color: var(--ink-soft); padding-top: 1px; } .bd-agenda-kini .bd-agenda-tgl { color: var(--accent); } .bd-agenda-isi { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; } .bd-agenda-isi li { display: flex; align-items: baseline; gap: 6px; font-size: .86rem; padding: 1px 0; } .bd-agenda-isi li > a, .bd-agenda-isi li > span:not(.bd-agenda-titik):not(.muted) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-agenda-titik { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; align-self: center; } .bd-agenda-jam { font-variant-numeric: tabular-nums; flex: 0 0 auto; font-size: .8rem; } /* ===================================================================== WORKGROUP - grup kerja Halaman daftar memakai tabel, halaman satu grup memakai kisi kotak. Bedanya disengaja: daftar dibaca untuk MEMBANDINGKAN grup (kolom membuat angka berbaris), halaman grup dibaca untuk MENGENALI satu grup (kotak memisahkan urusan yang berbeda). ===================================================================== */ .gr-bar .bar-isi { flex: 1 1 auto; } .gr-bar .gr-jml { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; } .btn-primary .gr-jml { background: rgba(255, 255, 255, .22); color: inherit; } .gr-saring .gr-cari { flex: 1 1 260px; min-width: 200px; } .gr-centang { flex-direction: row !important; align-items: center; gap: 6px !important; } .gr-centang input { margin: 0; } .gr-tabel .gr-id { width: 56px; font-variant-numeric: tabular-nums; } .gr-tabel .gr-tengah { text-align: center; font-variant-numeric: tabular-nums; } .gr-nama { font-weight: 600; } .gr-tutup td { opacity: .6; } .gr-catatan { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-soft); } .tag-mini { font-size: .62rem; padding: 0 4px; } .gr-tag-proyek { color: var(--accent); } .gr-tag-peran { color: var(--ok); } /* ---- kepala halaman satu grup ---- */ .gr-judul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .gr-judul h2 { margin: 0; font-size: 1.2rem; } .gr-ket { margin: 10px 0 0; font-size: .9rem; } .gr-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; } .gr-meta > div { display: flex; flex-direction: column; gap: 1px; } .gr-meta dt { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .gr-meta dd { margin: 0; font-size: .86rem; } .gr-kunci { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px; } .gr-rentang { margin-top: 14px; } .gr-rentang-tgl { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; margin-bottom: 4px; } .tg-bilah-lewat i { background: var(--crit); } /* ---- kisi kotak isi grup ---- Dua kolom di layar lebar, satu di layar sempit. Kotak yang isinya panjang (tugas mendesak, anggota) tidak dipaksa setinggi tetangganya: grid baris otomatis membuat tiap baris setinggi kotak tertingginya, dan itu meninggalkan ruang kosong besar di bawah kotak yang pendek. */ .gr-kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; } .gr-lanjut { margin: 10px 0 0; font-size: .84rem; } .gr-anggota { display: flex; flex-direction: column; gap: 1px; max-height: 340px; overflow-y: auto; } .gr-anggota-satu { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 3px; color: inherit; text-decoration: none; } .gr-anggota-satu:hover { background: var(--surface-2); } .gr-anggota-mati { opacity: .55; } .gr-anggota-teks { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .gr-anggota-teks strong { font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-anggota-teks small { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-anggota-jml { flex: 0 0 auto; min-width: 20px; text-align: center; padding: 1px 5px; border-radius: 8px; background: var(--surface-2); color: var(--ink-soft); font-size: .74rem; font-variant-numeric: tabular-nums; } .gr-berkas, .gr-agenda, .gr-selesai, .gr-kegiatan { list-style: none; margin: 0; padding: 0; } .gr-berkas li, .gr-agenda li, .gr-selesai li { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; font-size: .86rem; } .gr-berkas li + li, .gr-agenda li + li, .gr-selesai li + li { border-top: 1px solid var(--line-soft); } .gr-berkas li > a, .gr-agenda li > a, .gr-selesai li > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-berkas small, .gr-agenda small, .gr-selesai small { font-size: .74rem; } .gr-kegiatan li { display: flex; gap: 8px; padding: 4px 0; font-size: .84rem; align-items: baseline; } .gr-kegiatan li + li { border-top: 1px solid var(--line-soft); } .gr-keg-waktu { flex: 0 0 84px; font-variant-numeric: tabular-nums; } /* ---- lingkup grup di halaman Drive ---- */ .dr-lingkup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 3px; background: var(--surface-2); } .dr-lingkup > .muted { flex: 1 1 240px; } /* ---- kotak grup kerja di beranda ---- */ .bd-grup { list-style: none; margin: 0; padding: 0; } .bd-grup li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; font-size: .88rem; } .bd-grup li + li { border-top: 1px solid var(--line-soft); } .bd-grup li > a { font-weight: 600; } .bd-grup-angka { margin-left: auto; display: flex; gap: 10px; align-items: baseline; } /* ---- diskusi grup ---- */ .gr-diskusi-kotak { margin-bottom: 12px; } .gr-diskusi { list-style: none; margin: 0 0 12px; padding: 0; max-height: 420px; overflow-y: auto; } .gr-diskusi li { display: flex; gap: 9px; padding: 8px 0; } .gr-diskusi li + li { border-top: 1px solid var(--line-soft); } .gr-diskusi-isi { min-width: 0; flex: 1 1 auto; } .gr-diskusi-kepala { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin-bottom: 2px; } .gr-diskusi-kepala strong { font-size: .86rem; } .gr-diskusi-teks { margin: 0; font-size: .88rem; line-height: 1.5; } .gr-diskusi-saya .gr-diskusi-isi { background: var(--surface-2); border-radius: 4px; padding: 6px 9px; } .gr-tulis { display: flex; flex-direction: column; gap: 7px; } .gr-tulis textarea { width: 100%; resize: vertical; font: inherit; font-size: .9rem; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: inherit; } .gr-tulis-kaki { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gr-tulis-berkas { flex: 1 1 auto; font-size: .8rem; color: var(--muted); } .gr-tulis-berkas input { font-size: .8rem; } .bd-grup-baru { font-size: .76rem; padding: 1px 7px; border-radius: 9px; background: var(--accent); color: #fff; text-decoration: none; white-space: nowrap; } .bd-grup-baru:hover { opacity: .88; } /* ===================================================================== DRIVE NEXTCLOUD ===================================================================== */ .aw-bar .bar-isi { flex: 1 1 auto; } .aw-remah { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0 0 12px; font-size: .9rem; } .aw-pisah { color: var(--muted); } .aw-alat { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft); } .aw-unggah, .aw-folder { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .aw-unggah input[type=file] { font-size: .8rem; max-width: 260px; } .aw-folder input[type=text] { font: inherit; font-size: .85rem; padding: 5px 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: inherit; width: 170px; } .aw-tabel .aw-kanan { text-align: right; white-space: nowrap; } .aw-ikon { margin-right: 5px; } .aw-nama { word-break: break-all; } .aw-ukuran { font-variant-numeric: tabular-nums; font-size: .84rem; } .aw-catatan { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-soft); } /* Daftar tindakan per baris - dibuka sendiri, supaya tombol Hapus tidak berjejer terus-menerus di tiap baris menunggu salah klik. */ .aw-menu { display: inline-block; position: relative; } .aw-menu > summary { list-style: none; cursor: pointer; } .aw-menu > summary::-webkit-details-marker { display: none; } .aw-menu-isi { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 220px; padding: 10px; background: var(--ground); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 9px; text-align: left; } .aw-menu-isi form { display: flex; gap: 6px; align-items: center; } .aw-menu-isi input[type=text] { font: inherit; font-size: .84rem; padding: 4px 7px; flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); color: inherit; } .btn-bahaya { color: var(--crit); border-color: var(--crit); } .btn-bahaya:hover { background: var(--crit-w); } .aw-langkah { margin: 12px 0; padding-left: 22px; font-size: .9rem; line-height: 1.7; } .aw-langkah code { background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-size: .86rem; } .aw-sambung { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 16px 0; } .aw-sambung label { display: flex; flex-direction: column; gap: 4px; } .aw-sambung label > span { font-size: .82rem; color: var(--muted); } .aw-sambung input { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: inherit; } /* ===================================================================== SURAT MASUK DI BERANDA Judul memakai lebar sisa dan dipotong dengan elipsis, bukan dibungkus ke baris berikutnya: judul surat sering panjang sekali (rantai balasan "RE: RE: FW: ..."), dan satu judul yang memakan tiga baris mendorong empat surat lain keluar dari pandangan. ===================================================================== */ /* ---- kotak "Obrolan tugas" di beranda ---- Tiga bagian per baris: judul, kalimat terakhir, lalu waktu dan jumlah. Kalimat terakhirlah yang membuat kotak ini layak dilihat tiap pagi - tanpa itu yang terbaca cuma daftar judul tugas, dan itu sudah ada di menu Tugas. */ .bd-obrolan { list-style: none; margin: 0; padding: 0; } .bd-obrolan li { display: flex; align-items: baseline; gap: 9px; padding: 6px 0; font-size: .88rem; min-width: 0; } .bd-obrolan li + li { border-top: 1px solid var(--line-soft); } .bd-obrolan-judul { flex: 0 1 auto; max-width: 46%; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-obrolan-kata { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-obrolan-angka { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } @media (max-width: 700px) { /* Di layar sempit judul dan kalimatnya bertumpuk, bukan berdesakan sampai keduanya tinggal beberapa huruf. */ .bd-obrolan li { flex-wrap: wrap; } .bd-obrolan-judul { max-width: 100%; flex: 1 1 100%; } } .bd-surat { list-style: none; margin: 0; padding: 0; } .bd-surat li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: .88rem; min-width: 0; } .bd-surat li + li { border-top: 1px solid var(--line-soft); } .bd-surat-judul { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-surat-dari { flex: 0 1 auto; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .82rem; } .bd-surat-jam { flex: 0 0 auto; white-space: nowrap; } /* Yang belum dibaca ditebalkan DAN diberi garis di tepi kiri. Tebal saja tidak terbaca oleh orang yang tidak bisa membedakan berat huruf pada layar kecil; garisnya yang menjawab "mana yang baru" dari jarak sekilas. */ .bd-surat-belum .bd-surat-judul { font-weight: 600; } .bd-surat-belum { border-left: 2px solid var(--accent); margin-left: -8px; padding-left: 6px; } .bd-surat-galat { color: var(--crit); } /* ===================================================================== PEMISAH KOLOM YANG BISA DIGESER (Pesan + Obrolan tugas) Kelas .chat-bisa-geser dipasang JS bersamaan dengan pegangannya. Tanpa JS, kelas ini tidak pernah ada dan tata letaknya tetap dua kolom seperti semula - tidak ada kolom ketiga kosong yang membuat panel kanan melompat ke tempat pegangan. ===================================================================== */ .chat.chat-bisa-geser { grid-template-columns: var(--chat-kiri, 300px) 8px minmax(0, 1fr); gap: 6px; } /* Mode layar penuh menempelkan kedua panel ke tepi jendela dengan gap 0. Aturan itu ditulis ulang di sini karena kekhususannya sama dengan aturan di atas - yang menang cuma yang belakangan. */ body.chat-penuh .chat.chat-bisa-geser { gap: 0; } .chat-pemisah { align-self: stretch; cursor: col-resize; border-radius: 4px; background: transparent; position: relative; touch-action: none; /* tanpa ini, layar sentuh menggulir halaman alih-alih menggeser pemisahnya */ } /* Garis pegangan digambar di tengah, tidak memenuhi seluruh lebar elemen: bidang tangkapnya perlu lebar supaya mudah dikenai, tetapi yang terlihat harus tipis supaya tidak menjadi garis tebal yang membelah halaman. */ .chat-pemisah::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 34px; border-radius: 3px; background: var(--line); transition: background .12s, height .12s; } .chat-pemisah:hover::before, .chat-pemisah:focus-visible::before { background: var(--accent); height: 60px; } .chat-pemisah:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Selama menggeser, seluruh halaman memakai kursor col-resize dan berhenti memilih teks. Tanpa ini, tarikan yang melewati daftar percakapan akan menyorot judul-judulnya seperti menyeret teks. */ body.sedang-geser { user-select: none; cursor: col-resize; } body.sedang-geser .chat-pemisah::before { background: var(--accent); height: 60px; } @media (max-width: 1000px) { /* Di bawah 1000px kedua panel bertumpuk atas-bawah, jadi tidak ada batas kiri-kanan untuk digeser. Pegangannya disembunyikan, dan lebar tersimpan diabaikan - bukan dihapus, supaya kembali utuh saat dibuka lagi di layar lebar. */ .chat.chat-bisa-geser { grid-template-columns: 1fr; gap: 14px; } .chat-pemisah { display: none; } } /* ===================================================================== BATANG GULUNG: SATU DI KIRI, SATU DI KANAN Sebelumnya keduanya berada di sisi kanan panelnya masing-masing - artinya batang gulung daftar kiri berdiri tepat di sebelah pemisah yang baru bisa ditarik. Dua benda tipis bersebelahan yang keduanya diseret dengan tetikus, dan keduanya mengerjakan hal yang berbeda: yang satu menggulir, yang lain melebarkan kolom. Salah pegang di situ bukan kemungkinan, melainkan kepastian. Maka batang gulung daftar kiri dipindah ke TEPI KIRI layar, dan batang gulung percakapan tetap di tepi kanan. Keduanya kini berada di ujung terluar, dan yang ada di antara kedua panel hanya satu benda: pemisahnya. Caranya lewat direction: rtl pada wadah yang menggulir - satu-satunya cara yang dikenal semua peramban untuk memindahkan batang gulung. Isinya dikembalikan ke ltr supaya teksnya tetap rata kiri seperti biasa; tanpa itu, angka dan tanda baca di ujung kalimat akan melompat ke sisi yang salah. ===================================================================== */ .chat-daftar .chat-list { direction: rtl; } .chat-daftar .chat-list > li { direction: ltr; } /* Batang gulung dibuat cukup terlihat untuk dipegang, tanpa menjadi pita tebal. Bawaan Chromium pada tema gelap nyaris tidak terlihat - dan batang gulung yang tidak terlihat membuat orang menyangka daftarnya memang hanya sepanjang itu. */ /* HANYA scrollbar-color, TANPA scrollbar-width: thin. Yang diminta adalah letaknya, bukan ketebalannya - dan batang gulung yang dikuruskan justru lebih sulit dipegang. Yang diperbaiki di sini cuma kontrasnya pada tema gelap. Peramban yang mengenal scrollbar-color akan MENGABAIKAN aturan ::-webkit-scrollbar di bawah; itu memang perilakunya, dan aturan itu sengaja tetap ada sebagai cadangan untuk peramban lama. */ .chat-daftar .chat-list, .chat-pesan { scrollbar-color: var(--line) transparent; } .chat-daftar .chat-list::-webkit-scrollbar, .chat-pesan::-webkit-scrollbar { width: 10px; } .chat-daftar .chat-list::-webkit-scrollbar-track, .chat-pesan::-webkit-scrollbar-track { background: transparent; } .chat-daftar .chat-list::-webkit-scrollbar-thumb, .chat-pesan::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } .chat-daftar .chat-list::-webkit-scrollbar-thumb:hover, .chat-pesan::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; } /* ===================================================================== FEED Satu aliran, lima jenis butir. Yang membedakan jenisnya hanya label kecil dan warna garis kiri - bukan bentuk kartu yang berbeda-beda. Aliran yang tiap barisnya berbeda rupa tidak terbaca sebagai aliran, melainkan sebagai tumpukan kotak. ===================================================================== */ .fd-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .fd-cari { display: flex; gap: 7px; align-items: center; flex: 1 1 auto; } .fd-cari input { flex: 0 1 340px; font: inherit; font-size: .88rem; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; } .fd-saring { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; } .fd-tag { font-size: .78rem; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; white-space: nowrap; } .fd-tag:hover { border-color: var(--accent); color: var(--ink); } .fd-tag-nyala { background: var(--accent-w); border-color: var(--accent); color: var(--accent-2); font-weight: 600; } /* Yang terakhir menyala tidak bisa dimatikan - dan itu harus terlihat, bukan baru terasa setelah diklik tanpa hasil. */ .fd-tag-mati { opacity: .65; cursor: default; } .fd-list { list-style: none; margin: 0; padding: 0; } .fd-butir { display: flex; gap: 11px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--radius); margin-bottom: 9px; } .fd-butir-pos { border-left-color: var(--accent); } .fd-butir-laporan { border-left-color: var(--ok); } .fd-butir-absen { border-left-color: var(--line); } .fd-butir-tugas { border-left-color: var(--warn); } .fd-butir-pengajuan { border-left-color: var(--accent-2); } .fd-isi { flex: 1 1 auto; min-width: 0; } .fd-kepala { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; } .fd-kepala > strong { font-size: .89rem; } .fd-jenis { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 9px; background: var(--surface-2); color: var(--muted); } .fd-pos { background: var(--accent-w); color: var(--accent-2); } .fd-lap { background: var(--ok-w); color: var(--ok); } .fd-tgs { background: var(--warn-w); color: var(--warn); } .fd-auto { background: var(--accent-w); color: var(--accent-2); } .fd-judul { margin: 2px 0; font-size: .93rem; font-weight: 600; line-height: 1.45; } .fd-judul a { text-decoration: none; } .fd-judul a:hover { text-decoration: underline; } .fd-teks { margin: 2px 0 0; font-size: .87rem; line-height: 1.55; color: var(--ink-soft); } .fd-kaki { margin: 6px 0 0; font-size: .82rem; } .fd-berkas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; } .fd-berkas > a, .fd-berkas > span { display: inline-flex; align-items: baseline; gap: 6px; font-size: .8rem; padding: 3px 9px; border-radius: 4px; background: var(--surface-2); color: var(--ink-soft); text-decoration: none; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fd-berkas > a:hover { background: var(--surface-3); color: var(--ink); } .fd-berkas small { color: var(--muted); } .fd-berkas-besar img { max-width: 240px; max-height: 180px; border-radius: var(--radius); display: block; } .fd-halaman { display: flex; align-items: center; gap: 9px; margin: 16px 0 4px; } /* ---- satu pos ---- */ .fd-pos-kepala { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 12px; } .fd-pos-kepala > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .fd-pos-judul { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.4; } .fd-pos-isi { font-size: .92rem; line-height: 1.65; } .fd-sub { margin: 16px 0 7px; font-size: .86rem; color: var(--muted); font-weight: 600; } .fd-sasaran { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-soft); } /* ---- tulis pos ---- */ .fd-tulis { display: flex; flex-direction: column; gap: 12px; } .fd-sasaran-pilih { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .fd-sasaran-pilih > legend { padding: 0 6px; font-size: .85rem; font-weight: 600; } .fd-kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .fd-semua { display: flex; align-items: center; gap: 8px; font-size: .89rem; margin: 8px 0; } .fd-tulis-kaki { display: flex; gap: 9px; align-items: center; } @media (max-width: 700px) { .fd-berkas > a, .fd-berkas > span { max-width: 100%; } .fd-kolom { grid-template-columns: 1fr; } } /* ================================================================== Rapat daring (Pesan -> Daring) ------------------------------------------------------------------ Seluruh warna memakai token portal (--surface, --line, --accent dan seterusnya), tidak satu pun angka warna ditulis langsung. Itu yang membuat modul ini ikut tema gelap dengan benar tanpa satu baris tambahan: yang berganti nilainya token-nya, bukan aturan di sini. ================================================================== */ /* ---------------- pemilih orang yang diketik ---------------- */ .po { display: block; position: relative; } .po-data { display: none; } .po-kotak { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 34px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: text; } .po-kotak:focus-within { border-color: var(--accent); } .po-kepingan { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; } .po-keping { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; font-size: .8rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-w); color: var(--accent-2); max-width: 100%; } .po-keping > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .po-buang { border: 0; background: none; cursor: pointer; line-height: 1; font-size: 1rem; padding: 0 2px; color: var(--accent-2); opacity: .75; } .po-buang:hover { opacity: 1; } .po-medan { flex: 1 1 120px; min-width: 90px; border: 0; outline: 0; background: none; color: inherit; font: inherit; font-size: .87rem; padding: 3px 2px; } /* Daftar saran menggantung dari .po (position:relative di atas) supaya ia tetap tepat di bawah kotaknya walau kotaknya sudah dua baris. */ .po-daftar { /* Melayang terhadap LAYAR, bukan terhadap panelnya - panel portal memakai overflow:hidden dan akan memotongnya ke arah mana pun ia digantungkan, ke bawah maupun ke atas. Letak dan tingginya dihitung arahkan() di app.js dari posisi kotak isiannya. .po-atas tidak ada lagi: membalik arah adalah jawaban untuk daftar yang TERIKAT pada panelnya, dan daftar ini tidak lagi terikat. */ position: fixed; z-index: 120; margin: 0; padding: 4px; list-style: none; max-height: 232px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .po-saran { padding: 6px 9px; font-size: .87rem; border-radius: 3px; cursor: pointer; } .po-saran:hover, .po-saran.aktif { background: var(--accent-w); color: var(--accent-2); } .po-bantu kbd { font: inherit; font-size: .78rem; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); } /* ---------------- daftar ruang ---------------- */ .rp-baru { align-items: flex-end; flex-wrap: wrap; gap: 12px; } .rp-baru label, .rp-baru .rp-orang { display: flex; flex-direction: column; gap: 4px; } .rp-baru label > span, .rp-orang > span { font-size: .82rem; color: var(--muted); } .rp-judul { flex: 1 1 220px; min-width: 180px; } .rp-judul input { width: 100%; } .rp-orang { flex: 2 1 320px; min-width: 220px; } /* Tamu dari luar di formulir buat rapat. ---------------------------------------------------------------------- flex-basis 100% supaya ia mengambil BARIS SENDIRI di bawah judul, peserta, dan tombolnya - bukan menyempil sebagai kolom keempat yang kotaknya tinggal selebar dua jari. */ .rp-tamu-baru { flex: 1 1 100%; margin-top: 2px; } .rp-tamu-baru > summary { cursor: pointer; font-size: .82rem; color: var(--muted); padding: 4px 0; user-select: none; } .rp-tamu-baru > summary:hover { color: var(--text); } .rp-tamu-isi { padding: 6px 0 2px; } .rp-tamu-isi textarea { width: 100%; min-height: 64px; resize: vertical; font-family: inherit; font-size: .9rem; } .rp-tabel .rp-nama { font-weight: 500; } .rp-tengah { text-align: center; } .rp-aksi, .rp-aksi-th { text-align: right; white-space: nowrap; } .rp-aksi > * { vertical-align: middle; } .rp-tutup-form { display: inline; } .rp-tag-jalan { border-color: var(--ok); color: var(--ok); background: var(--ok-w); } /* Kolom peserta yang bisa dibuka. Penanda bawaan
    dibuang dan diganti angka yang terlihat seperti tautan - yang dicari orang di kolom ini "berapa", dan "siapa" hanya satu klik di belakangnya. */ .rp-peserta-buka > summary { cursor: pointer; list-style: none; display: inline-block; border-bottom: 1px dotted var(--line); } .rp-peserta-buka > summary::-webkit-details-marker { display: none; } .rp-peserta-buka[open] > summary { border-bottom-color: var(--accent); } .rp-peserta-isi { margin-top: 5px; text-align: left; font-size: .82rem; line-height: 1.5; max-width: 260px; white-space: normal; } .rp-peserta-cap { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } /* ---------------- satu ruang rapat ---------------- */ .rp-kepala { flex-wrap: wrap; gap: 8px; } .rp-kepala-judul { font-size: .98rem; } .rp-catatan-hak { white-space: normal; } /* Panggung bingkai Jitsi. Tingginya dipatok pada tinggi layar, bukan pada isinya: bingkai video tanpa tinggi pasti akan runtuh menjadi nol - iframe tidak punya ukuran alami. */ .rp-panggung { position: relative; height: calc(100vh - var(--topbar-tinggi) - var(--subnav-tinggi) - 150px); min-height: 380px; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-3); } .rp-panggung iframe { display: block; width: 100%; height: 100%; border: 0; } .rp-panggung:fullscreen { height: 100%; min-height: 0; border: 0; border-radius: 0; } /* pointer-events: none - penahan, bukan kosmetik. ---------------------------------------------------------------------- Lapisan ini menutupi seluruh panggung, tepat di atas bingkai Jitsi. Selama ia ada, setiap klik mendarat di sini dan bukan di bingkainya. Di halaman karyawan hal itu tidak pernah terasa karena layar pratinjau dimatikan - rapat tersambung sendiri, peristiwanya datang, lapisannya dibuang. Di halaman tamu pratinjaunya menyala, dan akibatnya terlihat pada 15 September 2026: tombol "Join meeting" tidak bisa ditekan sama sekali, sebab lapisan yang menunggu sambungan justru menghalangi klik yang akan menyambungkannya. Baris ini ada supaya kebuntuan yang sama tidak lahir lagi di sini pada hari seseorang menyalakan pratinjau untuk karyawan juga. */ .rp-tunggu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: .9rem; color: var(--muted); pointer-events: none; } /* Isinya tetap bisa ditekan - layar galat memuat tautan dan kode yang perlu bisa disalin. */ .rp-tunggu > div { pointer-events: auto; } .rp-tunggu.rp-gagal { color: var(--ink-soft); } .rp-tunggu.rp-gagal strong { color: var(--crit); } .rp-tunggu code { background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-size: .86rem; } .rp-tunggu > div { max-width: 460px; line-height: 1.6; } .rp-tabel-peserta td:first-child { display: flex; align-items: center; gap: 8px; } /* Nama peserta jadi dua baris: namanya, lalu siapa yang mengundangnya. Sel-nya sendiri tetap baris mendatar (avatar + nama), jadi kolomnya dipasang di dalam span, bukan di sel. */ .rp-peserta-nama { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .rp-peserta-oleh { font-size: .74rem; line-height: 1.25; } .rp-undang { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); } .rp-undang > p { flex: 1 1 100%; margin: 0; } /* ---------------- kotak panggilan melayang ---------------- */ /* Di atas dok pesan, bukan di sebelahnya: keduanya di sudut yang sama, dan panggilan rapat lebih menuntut waktu daripada pesan masuk. */ .rp-panggilan { position: fixed; right: 18px; bottom: 84px; z-index: 60; display: flex; flex-direction: column-reverse; gap: 10px; max-width: 320px; } .rp-panggilan:empty { display: none; } .rp-panggil { border: 1px solid var(--accent); border-left-width: 3px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 11px 13px; font-size: .87rem; } .rp-panggil-kepala { display: flex; align-items: center; gap: 7px; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-2); margin-bottom: 4px; } .rp-panggil-judul { display: block; font-weight: 600; line-height: 1.35; } .rp-panggil-oleh { display: block; color: var(--muted); font-size: .82rem; margin-top: 1px; } .rp-panggil-aksi { display: flex; gap: 7px; margin-top: 10px; } /* Yang sudah berakhir kehilangan warna aksennya - kotak yang tidak lagi menuntut apa pun tidak pantas berteriak sekeras yang menuntut. */ .rp-panggil-selesai { border-color: var(--line); } .rp-panggil-selesai .rp-panggil-kepala { color: var(--muted); } .rp-panggil-selesai .rp-ikon-telp { animation: none; opacity: .5; } .rp-btn-masuk { display: inline-flex; align-items: center; gap: 6px; } /* Gagang telepon bergoyang. Animasinya CSS, bukan JavaScript, supaya setelan "kurangi gerakan" milik sistem operasi dihormati - lihat @media di bawah. */ .rp-ikon-telp { width: 15px; height: 15px; flex: none; transform-origin: 50% 60%; animation: rp-goyang 1.6s ease-in-out infinite; } @keyframes rp-goyang { 0%, 62%, 100% { transform: rotate(0deg); } 68% { transform: rotate(-14deg); } 74% { transform: rotate(12deg); } 80% { transform: rotate(-9deg); } 86% { transform: rotate(6deg); } 92% { transform: rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .rp-ikon-telp { animation: none; } } @media (max-width: 640px) { .rp-panggilan { right: 10px; left: 10px; bottom: 78px; max-width: none; } .rp-panggung { height: 62vh; } } /* ------------------------------------------------------------------ Kaitan Google Calendar (kal_google.php) ------------------------------------------------------------------ */ .kal-kanan { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; } .kal-g-catatan { margin-top: 12px; } .kal-g-label { display: block; margin: 18px 0 6px; font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .kal-g-alamat { display: flex; gap: 8px; align-items: stretch; } /* Alamatnya panjang dan HARUS bisa dipilih seluruhnya sekali klik, jadi ia sebuah input - bukan yang teksnya terpotong di ujung dan menyisakan setengah token saat orang menyalinnya dengan tangan. */ .kal-g-alamat input { flex: 1 1 auto; min-width: 0; font-size: .82rem; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); } .kal-g-alamat input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .kal-g-alamat .btn { flex: 0 0 auto; } .kal-g-rahasia { margin-bottom: 4px; } .kal-g-rahasia em { display: block; margin: 6px 0; font-style: normal; font-weight: 600; } .kal-g-dalam { margin-top: 14px; } .kal-g-judul { margin: 26px 0 10px; font-size: .95rem; } .kal-g-langkah { margin: 0 0 18px; padding-left: 22px; line-height: 1.75; } .kal-g-langkah li { margin-bottom: 5px; } .kal-g-langkah .muted { display: block; font-size: .84rem; } .kal-g-sabar { margin-bottom: 20px; } .kal-g-fakta { margin-bottom: 16px; } .kal-g-aksi { gap: 10px; flex-wrap: wrap; } @media (max-width: 640px) { .kal-kanan { margin-left: 0; width: 100%; } .kal-g-alamat { flex-direction: column; } .kal-g-alamat .btn { align-self: flex-start; } } /* ------------------------------------------------------------------ Data diri dari HRIS (employee_detail.php) Hanya tergambar di halaman milik orang itu sendiri - lihat penjaga di Hris::bolehLihatDiri(). Bagian ini memuat nomor identitas, alamat rumah, keluarga, dan nomor rekening, jadi ia sengaja diberi garis tepi yang berbeda: orang harus SADAR sedang melihat sesuatu yang tidak biasa, bukan mengira ini bagian profil yang umum. ------------------------------------------------------------------ */ .hris-diri { margin-top: 18px; border-left: 3px solid var(--accent); } .hris-catatan { margin: 0 0 16px; line-height: 1.65; } .hris-kaki { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); } .hris-blok { margin-bottom: 18px; } .hris-blok:last-of-type { margin-bottom: 0; } .hris-blok h3 { margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } /* Dua kolom di layar lebar, satu di ponsel. Nilai seperti alamat dan nomor rekening panjang, jadi ia boleh membungkus - tanpa ini nomor rekening mendorong seluruh kotak melebar dan halaman ikut bergeser. */ .hris-blok .detail dd { word-break: break-word; } @media (min-width: 720px) { .hris-diri .hris-blok .detail { display: grid; grid-template-columns: minmax(150px, auto) 1fr; column-gap: 18px; } } /* ------------------------------------------------------------------ Butir kalender yang diredupkan Sejauh ini hanya cuti panjang. Lima cuti melahirkan - 61 sampai 92 hari - menghasilkan 397 kotak hari, lebih banyak daripada 253 pengajuan lain digabung. Butirnya benar dan tetap digambar tiap hari; yang salah adalah ia duduk di baris teratas dan mendorong rapat pukul 14:00 ke bawah "+3 lagi". Diredupkan, BUKAN disembunyikan. Orang yang mencari "siapa tidak masuk hari ini" tetap menemukannya; orang yang mencari "rapat apa hari ini" tidak lagi harus melewatinya lebih dulu. ------------------------------------------------------------------ */ .kal-redup { opacity: .55; } .kal-redup:hover { opacity: 1; } /* Garis tepinya ikut menipis supaya deretan cuti panjang tidak membentuk pita warna yang justru menarik mata lebih dulu. */ .kal-butir.kal-redup { border-left-style: dotted; } @media (prefers-contrast: more) { .kal-redup { opacity: .8; } } /* ================================================================== Bantuan AI Kotak hasilnya sengaja TIDAK menyerupai isi halaman. Ia berbingkai putus-putus dan berlatar beda supaya tidak ada yang salah mengira kalimat buatan mesin adalah tulisannya sendiri yang sudah tersimpan - terutama sesudah menggulir ke bawah dan kembali lagi. ================================================================== */ .ai-aksi { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .35rem 0 0; } .ai-kotak { margin: .5rem 0 .25rem; padding: .6rem .7rem; background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius); } .ai-hasil { white-space: pre-wrap; line-height: 1.55; } .ai-pesan { margin: 0; color: var(--muted); font-size: .92em; } .ai-pesan.ai-warn { color: var(--warn); } .ai-pesan.ai-tunggu::after { content: ''; display: inline-block; width: .6em; text-align: left; animation: ai-titik 1.2s steps(4, end) infinite; } @keyframes ai-titik { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } .ai-bar { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .55rem; } .ai-ket { margin-left: auto; } @media (max-width: 640px) { .ai-ket { margin-left: 0; flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .ai-pesan.ai-tunggu::after { animation: none; content: '…'; } } /* ================================================================== Kotak obrolan AI Gelembung AI dan gelembung orangnya dibedakan warna DAN sisi, bukan warna saja. Satu pembeda tidak cukup: layar yang disetel kontras rendah dan mata yang tidak membedakan warna sama-sama membuat percakapan berubah jadi satu blok teks tanpa pemilik. ================================================================== */ /* Lebar kolom daftar disimpan di --aio-sisi oleh app.js, dengan 230px sebagai lebar bawaan bila belum pernah digeser. Kolom tengah 6px adalah pemisah yang bisa ditarik. */ /* align-items: start supaya kolom daftar HANYA setinggi isinya. Bawaan grid adalah stretch, dan itu meregangkan kolom kiri setinggi kotak percakapan - meninggalkan bidang kosong sepanjang setengah layar di bawah daftar yang isinya cuma sembilan baris. */ .aio { display: grid; grid-template-columns: var(--aio-sisi, 230px) 6px 1fr; gap: .5rem; margin-bottom: 1rem; align-items: start; } .aio-geser { cursor: col-resize; border-radius: 3px; align-self: stretch; background: var(--line-soft); } .aio-geser:hover, .aio-geser:focus-visible { background: var(--accent); outline: none; } .aio-geser.aio-sedang { background: var(--accent); } body.aio-menggeser { cursor: col-resize; user-select: none; } /* Dua tab bersebelahan, selalu keduanya. Yang sedang dibuka diberi latar penuh - pembeda yang terbaca tanpa warna sekalipun, sebab ketebalan huruf dan latar bekerja juga pada layar kontras rendah. */ .aio-tab { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; } .aio-tab-btn { flex: 1; text-align: center; padding: .3rem .2rem; font-size: .88em; color: var(--muted); text-decoration: none; border-radius: calc(var(--radius) - 2px); white-space: nowrap; } .aio-tab-btn:hover { color: var(--ink); background: var(--surface); } .aio-tab-kini { background: var(--surface); color: var(--ink); font-weight: 600; } .aio-petunjuk { margin-bottom: .2rem; } /* Titik-tiga yang dikutip di dalam kalimat petunjuk. Dibuat menyerupai tombolnya supaya orang mencari bentuk yang sama, bukan menebak. */ .aio-contoh { display: inline-block; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 .3rem; background: var(--surface-2); color: var(--ink); line-height: 1.4; } /* Menu titik-tiga pada setiap baris percakapan. */ .aio-alat { position: relative; flex: 0 0 auto; } .aio-titik { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1em; line-height: 1; padding: .2rem .35rem; border-radius: var(--radius); opacity: 0; } .aio-baris:hover .aio-titik, .aio-titik:focus-visible, .aio-titik[aria-expanded="true"] { opacity: 1; } .aio-titik:hover { background: var(--surface); color: var(--ink); } .aio-menu { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 172px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .25rem; } .aio-menu form { margin: 0; } .aio-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); cursor: pointer; padding: .4rem .55rem; border-radius: var(--radius); font-size: .92em; } .aio-menu button:hover { background: var(--surface-2); } .aio-menu-hapus { color: var(--crit); } .aio-menu-hapus:hover { background: var(--crit-w); } .aio-sisi { display: flex; flex-direction: column; gap: .5rem; min-width: 0; } .aio-baru { text-align: center; } /* Tingginya mengikuti layar, bukan angka tetap. 320px menyisakan ruang kosong pada layar tinggi sementara daftarnya sendiri sudah bergulir - dua kerugian sekaligus. 46vh kira-kira sepadan dengan tinggi kotak percakapan di sebelahnya, jadi kedua kolom berakhir pada garis yang mirip. */ .aio-daftar { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; } .aio-baris { display: flex; align-items: center; gap: .25rem; border-radius: var(--radius); } .aio-baris > a { flex: 1; min-width: 0; padding: .35rem .5rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aio-baris:hover { background: var(--surface-2); } .aio-aktif { background: var(--surface-3); } .aio-aktif > a { color: var(--ink); font-weight: 600; } .aio-utama { display: flex; flex-direction: column; min-width: 0; } .aio-gulung { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; height: 52vh; min-height: 280px; overflow-y: auto; } .aio-kosong h3 { margin-top: 0; } .aio-kosong ul { padding-left: 1.1rem; } .aio-giliran { margin-bottom: .7rem; display: flex; } .aio-saya { justify-content: flex-end; } .aio-ai { justify-content: flex-start; } .aio-isi { max-width: 85%; padding: .5rem .7rem; border-radius: var(--radius); white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; } .aio-saya .aio-isi { background: var(--accent); color: #fff; border-bottom-right-radius: 3px; } .aio-ai .aio-isi { background: var(--surface-2); border: 1px solid var(--line-soft); border-bottom-left-radius: 3px; } .aio-tunggu .aio-isi { color: var(--muted); font-style: italic; } .aio-galat .aio-isi { border-color: var(--warn-w); color: var(--warn); } .aio-pintas .aio-isi { border-left: 3px solid var(--accent-2); } .aio-giliran { flex-wrap: wrap; } .aio-tanda { flex-basis: 100%; margin-top: .2rem; } .aio-tulis { display: flex; gap: .5rem; align-items: flex-end; margin-top: .6rem; } .aio-tulis textarea { flex: 1; resize: none; min-height: 2.6rem; } .aio-ingat { margin-top: .4rem; } @media (max-width: 760px) { /* Satu kolom di layar sempit - pemisahnya disembunyikan, sebab tidak ada yang bisa digeser lagi. Tombol titik-tiga dibuat selalu tampak: di layar sentuh tidak ada "hover" yang memunculkannya. */ .aio { grid-template-columns: 1fr; } .aio-geser { display: none; } .aio-daftar { max-height: 150px; } .aio-gulung { height: 44vh; } .aio-isi { max-width: 92%; } .aio-titik { opacity: 1; } } /* ===================================================================== Tentang Perusahaan - company profile di dalam bingkai ===================================================================== Bingkai dipakai supaya CSS profil tidak bercampur dengan app.css ini. Keduanya memakai nama yang sama untuk hal yang berbeda - .btn, .card, .grid, .muted, --ink, --line, --radius, dan sederet pemilih polos seperti body dan p - jadi memuat keduanya di satu dokumen akan mengubah tampilan SELURUH portal. Lihat TentangController. ================================================================== */ .tentang-panel { display: flex; flex-direction: column; } .tentang-bilah { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; min-height: 30px; } .tentang-kendali { display: flex; align-items: center; gap: 2px; } .tentang-pisah { width: 1px; height: 18px; background: var(--line); margin: 0 6px; } .tentang-tbl { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .tentang-tbl svg { width: 15px; height: 15px; } .tentang-tbl:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); } .tentang-tbl:disabled { opacity: .35; cursor: default; } .tentang-tbl:disabled:hover { background: none; color: var(--muted); border-color: transparent; } /* Tutup meninggalkan halaman. Warnanya baru muncul saat disentuh - kalau merah sejak awal, ia menarik perhatian lebih besar daripada perannya, dan tombol yang paling sering ditekan orang justru tombol yang paling tidak mereka maksud. */ .tentang-tbl--tutup:hover { background: var(--crit); border-color: var(--crit); color: #fff; } .tentang-bingkai { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; /* Tinggi dihitung, bukan ditebak: satu layar penuh dikurangi topbar, bilah di atas bingkai, padding .page, dan footer portal. Kalau dibiarkan setinggi isinya, bingkai akan runtuh jadi 150px - iframe tanpa tinggi eksplisit tidak ikut tumbuh mengikuti isinya. */ height: calc(100vh - var(--topbar-tinggi) - 190px); min-height: 420px; } .tentang-bingkai iframe { display: block; width: 100%; height: 100%; border: 0; } /* Disembunyikan dengan CSS, bukan dengan [hidden] atau display:none - iframe yang di-display:none dimuat ulang oleh sebagian peramban saat ditampilkan kembali, dan halaman yang sedang dibaca orangnya hilang. */ .tentang-panel.is-kecil .tentang-bingkai { height: 0; min-height: 0; border-color: transparent; } /* Satu layar penuh: hamparan di dalam halaman, bukan fullscreen asli. z-index 210 - di atas tirai sidebar (60) dan panel kanan (200). */ .tentang-panel.is-penuh { position: fixed; inset: 0; z-index: 210; background: var(--ground); padding: 10px 12px 12px; } .tentang-panel.is-penuh .tentang-bingkai { height: calc(100vh - 52px); min-height: 0; } body.tentang-terkunci { overflow: hidden; } .tentang-gagal { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 28px; text-align: center; } .tentang-gagal p { margin: 0 0 10px; } .tentang-gagal p:last-child { margin-bottom: 0; margin-top: 18px; } @media (max-width: 700px) { /* Di ponsel, gulir bersarang adalah ongkos bingkai yang paling terasa. Bingkainya dibuat lebih tinggi supaya gulir dalamnya lebih jarang diperlukan - dan tombol "buka di tab baru" tetap ada di atasnya untuk yang memilih layar penuh. */ .tentang-bingkai { height: calc(100vh - var(--topbar-tinggi) - 150px); } .tentang-judul { display: none; } .tentang-bilah { justify-content: flex-end; } } /* ===================================================================== SIDEBAR BERCABANG ===================================================================== Dipakai item menu yang memuat beberapa fitur sekaligus - hari ini hanya Activity. Bentuknya mengikuti pola yang sudah dikenal karyawan dari ilv_web: induk berikon dengan panah di kanan, anak menjorok ke dalam dengan penanda ">>". Ditulis di atas
    /, jadi seluruh buka-tutupnya dikerjakan peramban. Tidak ada satu baris JavaScript yang terlibat, dan tidak ada keadaan yang bisa tertinggal tidak sinkron. ===================================================================== */ .side-grup { display: block; } /* Penanda bawaan dibuang di ketiga mesin peramban - bentuk segitiga kecilnya tidak bisa digayakan dan letaknya berbeda-beda. */ .side-induk { list-style: none; cursor: pointer; } .side-induk::-webkit-details-marker { display: none; } .side-induk::marker { content: ''; } /* Panah menunjuk ke kiri saat tertutup dan ke bawah saat terbuka - arah yang sama dengan gambar acuan. */ .side-panah { margin-left: auto; flex: 0 0 auto; line-height: 0; color: var(--muted); transition: transform .18s ease; } .side-panah svg { width: 15px; height: 15px; display: block; } .side-grup[open] > .side-induk .side-panah { transform: rotate(-90deg); } /* Induk yang bagiannya sedang dibuka: ditandai lembut saja. Yang disorot penuh adalah ANAKNYA - dua baris yang sama-sama menyala membuat orang tidak tahu mana yang sedang ia buka. */ .side-induk.aktif-induk { color: var(--ink); font-weight: 600; } .side-induk.aktif-induk .side-panah { color: var(--accent); } .side-anak { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; } .side-sub { display: flex; align-items: center; gap: 7px; padding: 7px 11px 7px 30px; border-radius: var(--radius); border-left: 3px solid transparent; color: var(--ink-soft); text-decoration: none; font-size: .875rem; white-space: nowrap; overflow: hidden; } .side-sub:hover { background: var(--surface-2); color: var(--ink); } .side-sub.aktif { background: var(--accent-w); color: var(--accent); border-left-color: var(--accent); font-weight: 600; } .side-sub-tanda { flex: 0 0 auto; opacity: .5; font-size: .8rem; } .side-sub.aktif .side-sub-tanda { opacity: 1; } /* ---- sidebar yang diperkecil ---- Anaknya tidak digambar sama sekali: lebarnya 62px, dan teks menjorok di dalamnya hanya menghasilkan potongan huruf. Induknya dibiarkan sebagai ikon, dan orang yang mengkliknya membuka cabangnya - yang pada lebar itu berarti dua baris ikon tanpa nama, jadi panahnya pun disembunyikan supaya tidak menjanjikan sesuatu yang tidak berguna. Cabang tetap bisa dijangkau: perkecil dimatikan satu klik, dan submenu horizontal di atas halaman tetap memuat seluruh tampilan fiturnya. */ body.sidebar-kecil .side-anak { display: none; } body.sidebar-kecil .side-panah { display: none; } body.sidebar-kecil .side-induk { justify-content: center; padding-left: 8px; padding-right: 8px; gap: 0; } @media (max-width: 1000px) { /* Di layar sempit sidebar-nya menggeser masuk dengan lebar penuh, jadi anaknya kembali digambar - aturan di atas hanya berlaku untuk perkecil yang disengaja di layar lebar. */ body.sidebar-kecil .side-anak { display: flex; } body.sidebar-kecil .side-panah { display: block; } body.sidebar-kecil .side-induk { justify-content: flex-start; padding-left: 11px; gap: 12px; } } /* ===================================================================== ATUR MENU (menu/atur) ===================================================================== Halaman itu memakai tbl-wrap/tbl/tag/btn-mini yang sudah ada. Yang tersisa cuma tiga hal yang memang tidak ada padanannya: perataan pohon, kerapatan tombol aksi, dan lebar kolom yang masuk akal. */ /* Nama menu dan penanda cabangnya dirapatkan jadi satu baris supaya label yang panjang tidak turun ke bawah penanda. */ .mn-jorok { display: inline-flex; align-items: baseline; gap: 6px; } .mn-cabang { color: var(--muted); font-size: .8rem; line-height: 1; } .mn-nama { font-weight: 500; color: var(--ink); } /* Label bahasa Inggris di daftar Atur menu. Sengaja di baris yang sama, bukan baris sendiri: tujuh puluh lima baris menu yang masing-masing setinggi dua baris membuat tabelnya tidak bisa dilihat sekali pandang. */ .mn-en { margin-left: 6px; font-style: italic; } .mn-en::before { content: "EN "; font-style: normal; opacity: .65; } /* Tombolnya berupa
    sendiri-sendiri - POST, bukan tautan GET. Tanpa flex, tiap form jadi blok dan tombolnya berjejer ke bawah. */ .mn-aksi { white-space: nowrap; } .mn-aksi form { display: inline; } .mn-aksi > * { margin-right: 4px; } .mn-aksi > *:last-child { margin-right: 0; } /* Kolom alamat memakai huruf lebar-tetap: yang dibandingkan orang di kolom itu adalah potongan jalurnya, dan itu jauh lebih mudah dilihat kalau huruf-hurufnya sejajar ke bawah. */ .mn-tabel td:nth-child(2) { font-family: var(--mono, ui-monospace, "Cascadia Mono", Consolas, monospace); font-size: .82rem; } .mn-tabel td:nth-child(4) { color: var(--muted); } .mn-tabel .tag { margin-left: 5px; vertical-align: middle; } .mn-catatan { max-width: 78ch; margin: 12px 0; } /* Baris yang disembunyikan sudah diredupkan .row-off; namanya dicoret supaya bedanya tetap terbaca orang yang sukar membedakan kepekatan. */ .tbl tr.row-off .mn-nama { text-decoration: line-through; } /* Formulir menu: satu panel .kotak berisi .grid.grid-2. Isian yang isinya panjang - Alamat dan Awalan - melintang penuh; terjepit setengah kolom, jalur seperti "waktu/laporan/tulis" terpotong di tengah dan tidak bisa dibandingkan dengan yang lain. */ .mn-form { max-width: 940px; } .mn-form .grid-2 { gap: 16px 20px; } .mn-penuh { grid-column: 1 / -1; } /* Penjelasan di bawah isian dibatasi lebarnya. Baris teks yang melintang penuh layar lebar membuat mata kehilangan barisnya saat kembali ke kiri - dan justru penjelasan inilah yang perlu terbaca. */ .mn-form .field > small { line-height: 1.55; max-width: 68ch; } .mn-form .cek { padding-bottom: 2px; } /* Kotak centang "Tetap masuk" di halaman login. Peringatannya menempel pada kotaknya, bukan di tempat lain - orang membaca yang ada di bawah jarinya, bukan yang ada di bawah tombol. */ .login-ingat { display: flex; align-items: flex-start; gap: 9px; margin: -2px 0 4px; cursor: pointer; user-select: none; } .login-ingat input { margin: 3px 0 0; flex: 0 0 auto; } .login-ingat span { font-size: .88rem; line-height: 1.45; } .login-ingat small { display: block; color: var(--muted); font-size: .78rem; margin-top: 1px; } /* ===================================================================== Perangkat saya ===================================================================== Daftar, bukan tabel. Isinya satu nama, beberapa keterangan kecil, dan satu tombol - tabel tiga kolom untuk itu lebih banyak menuntut perataan daripada menjelaskan apa pun, dan di ponsel ia harus digulir ke samping. ================================================================== */ .pr-daftar { list-style: none; margin: 0; padding: 0; } .pr-baris { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .pr-baris + .pr-baris { margin-top: 8px; } /* Perangkat yang sedang dipakai diberi garis aksen di tepi kiri - tanda yang terbaca sekilas, tanpa menambah satu kata pun ke barisnya. */ .pr-ini { border-left: 3px solid var(--accent); } .pr-teks { flex: 1 1 auto; min-width: 0; } .pr-nama { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; margin-bottom: 2px; } .pr-rinci { line-height: 1.5; } .pr-aksi { flex: 0 0 auto; margin: 0; } @media (max-width: 560px) { /* Di ponsel tombolnya turun ke bawah keterangannya, bukan berdesakan di sampingnya sampai namanya terpotong. */ .pr-baris { flex-direction: column; align-items: stretch; gap: 10px; } .pr-aksi .btn { width: 100%; } } /* =================================================================== UNDUH APLIKASI - kartu di Beranda =================================================================== Lima lencana, satu yang hidup. Yang mati dibuat BEDA SECARA BENTUK, bukan cuma lebih pucat: warnanya diredupkan DAN kursornya default DAN ia bukan . Kalau pembedanya hanya warna, orang yang layarnya terang atau matanya kurang membedakan warna akan mengklik-klik sesuatu yang tidak akan pernah menjawab, lalu mengira portalnya rusak. =================================================================== */ .unduh-kartu { background: var(--ground); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); padding: 14px 16px 12px; margin-bottom: 18px; } .unduh-kepala h2 { font-size: 1rem; font-weight: 600; margin: 0 0 2px; } .unduh-kepala p { margin: 0; } .unduh-daftar { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; /* flex-start, bukan stretch bawaannya: saat panel keterangan dibuka, butir itu menjadi tinggi - dan dengan stretch, lencana Windows di sebelahnya ikut memanjang menjadi kotak tinggi kosong. */ align-items: flex-start; } .unduh-daftar li { margin: 0; } .unduh-lencana { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-size: .86rem; font-weight: 600; transition: border-color .12s, background .12s; } a.unduh-lencana:hover, a.unduh-lencana:focus-visible { border-color: var(--accent); background: var(--accent-w); color: var(--accent-2); } .unduh-ikon { display: flex; width: 22px; height: 22px; flex: 0 0 22px; color: var(--accent); } .unduh-ikon svg { width: 100%; height: 100%; } .unduh-mati { background: transparent; color: var(--muted); border-style: dashed; cursor: default; } .unduh-mati .unduh-ikon { color: var(--muted); opacity: .7; } .unduh-rinci { margin: 10px 0 0; } /* ===================================================================== PANEL KETERANGAN - muncul saat lencananya disorot ===================================================================== Permintaan penggunanya, 16 September 2026: nama berkas, ukuran, tanggal, dan peringatan SmartScreen tidak perlu berdiri terus di bawah kartu; cukup muncul ketika lencananya disorot. YANG MEMBUATNYA AMAN: seluruh sifat "melayang dan tersembunyi" itu tinggal DI DALAM @media (hover: hover). Peranti tanpa tetikus - ponsel dan tablet - tidak pernah membaca aturan itu sama sekali, jadi di sana panelnya tetap mengalir di bawah lencananya, terlihat apa adanya. Itu bukan kehati-hatian yang berlebihan. Menyembunyikan sesuatu di balik sorotan pada peranti yang tidak punya sorotan berarti menghilangkannya - dan di antara yang akan hilang ada peringatan "Windows protected your PC", satu-satunya alinea di kartu ini yang ada semata-mata supaya orang tidak menelepon IT. Cacat yang sama pernah terjadi di lencana ponsel: dulu ia ber-title, dan di ponsel title tidak pernah muncul. */ .unduh-butir { position: relative; } /* Bawaan - dipakai peranti sentuh. Mengalir, terlihat. */ .unduh-tip { padding-top: 6px; } .unduh-tip .unduh-rinci { margin: 0 0 6px; } .unduh-tip .unduh-catat { margin: 0; } /* Yang punya tombol
    : tersembunyi sampai ditekan. Di ponsel ini yang membuat empat alinea cara memasang tidak ikut memanjangkan kartu sebelum ada yang menanyakannya. */ @media (hover: hover) and (pointer: fine) { .unduh-tip { display: block; position: absolute; top: 100%; left: 0; z-index: 40; width: 440px; max-width: calc(100vw - 48px); /* TANPA jarak ke lencananya - dan itu disengaja. Jarak beberapa piksel di antara keduanya adalah lorong mati: tetikus yang turun untuk membaca panelnya melewatinya, :hover lepas, dan panelnya menutup tepat saat orang hendak membacanya. */ margin: 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease, visibility .12s; } /* Dua keadaan, bukan satu. :focus-within untuk yang memakai papan ketik - tanpa itu, Tab sampai ke tombol Windows dan keterangannya tidak pernah muncul. */ .unduh-butir:hover > .unduh-tip, .unduh-butir:focus-within > .unduh-tip { opacity: 1; visibility: visible; transform: none; } } .unduh-catat { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--warn); border-radius: 0 4px 4px 0; background: var(--warn-w); color: var(--warn); } /* Di ponsel lima lencana menjadi dua baris yang rapi, bukan satu baris yang digulir ke samping. */ @media (max-width: 560px) { .unduh-daftar { gap: 6px; } .unduh-lencana { padding: 7px 11px 7px 9px; font-size: .8rem; } } /* =================================================================== TAMU RAPAT - kotak tautan tamu di halaman ruang =================================================================== Bentuknya daftar, bukan tabel: isinya satu nama, beberapa keterangan kecil, dan dua tombol. Tabel empat kolom untuk itu lebih banyak menuntut perataan daripada menjelaskan apa pun - dan di layar ponsel ia harus digulir ke samping. Baris yang dicabut TIDAK dihapus dari layar. Tuan rumah perlu bisa melihat bahwa ia memang sudah mencabutnya; daftar yang barisnya lenyap membuat orang bertanya-tanya apakah tombolnya bekerja. =================================================================== */ /* Tamu luar TIDAK punya daftarnya sendiri lagi. ---------------------------------------------------------------------- Barisnya kini ikut masuk ke tabel peserta - satu tabel untuk satu pertanyaan, "siapa saja yang ada di rapat ini". Gaya daftar bertumpuk yang dulu (.tm-daftar, .tm-teks, .tm-nama, .tm-rinci) sudah dibuang bersama daftarnya; menyimpannya hanya membuat orang berikutnya menyalinnya kembali karena mengira ia masih dipakai. .tm-baris juga dibuang dengan sengaja, dan ini penting: isinya display:flex, dan nama yang sama dipasang pada sebuah akan MERUNTUHKAN barisnya - sel-selnya berhenti sejajar dengan kolom tabelnya, tanpa satu pun galat. */ .tm-tamu-baris td:first-child { font-weight: 500; } /* Dicabut: diredupkan DAN namanya dicoret. Warna saja tidak cukup - pembeda yang hanya warna hilang di layar terang dan bagi yang membedakan warna dengan susah payah. */ .tm-cabut { opacity: .62; } .tm-cabut .rp-peserta-nama { text-decoration: line-through; } .tm-tambah { margin-top: 12px; } .tm-tambah textarea { width: 100%; min-height: 74px; resize: vertical; font: inherit; font-size: .9rem; } .tm-tambah .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } @media (max-width: 560px) { /* Tombol di sel aksi ditumpuk, bukan dipaksa berjajar - tiga tombol berdampingan di layar 360 piksel membuat tabelnya menggulung mendatar, dan yang menggulung tidak pernah ditemukan orang. */ .tm-tamu-baris .rp-aksi { white-space: normal; } .tm-tamu-baris .rp-aksi > * { display: block; margin: 2px 0 0 auto; } } /* =================================================================== BILAH TAHUN DI HALAMAN HARI LIBUR =================================================================== Bilah ini memuat tiga jenis kontrol yang tingginya berbeda-beda: .btn "« Kalender" padding 8px 15px, .89rem .btn-mini "2026 (25)" padding 3px 9px, .77rem input kotak tahun padding bawaan borang .bar merapatkan isinya ke DASAR (align-items: flex-end), jadi selisih itu muncul sebagai puncak yang bergerigi. Dilaporkan penggunanya 22 September 2026. Yang disamakan TINGGINYA, bukan paddingnya. Padding yang sama masih menghasilkan tinggi yang berbeda begitu ukuran hurufnya berbeda - dan ukuran huruf .btn dan .btn-mini memang berbeda. Tinggi tetap membuat ketiganya rata berapa pun isinya. Dibatasi .kl-bar, bukan diubah di .bar: bilah yang sama dipakai belasan halaman lain, dan sebagian memang sengaja menaruh tombol besar di sebelah tombol kecil. =================================================================== */ .kl-bar { align-items: center; } .kl-bar .btn, .kl-bar input[type=number] { height: 32px; padding: 0 12px; font-size: .8rem; line-height: 1; } /* inline-flex supaya tulisannya tetap di tengah sesudah paddingnya dibuang - tidak memusatkan isinya sendiri seperti