/* ============================================================ alltime.css — Peringkat Sepanjang Masa. Butuh: components.css (.fh-ov*, .fh-seg, .fh-lbme, .fh-clan), rank.css (.fh-rkrow dan isinya) Layar ini sengaja TIDAK punya bentuk kartu sendiri: kartunya .fh-rkrow milik papan mingguan, dan yang ditulis di sini cuma yang memang khas layar ini — kepala judulnya dan satu baris nama yang berbeda bentuk. ============================================================ */ /* ---------- KEPALA JUDUL ---------- Baris judul bawaan .fh-ov__top terlalu datar untuk layar yang isinya kebanggaan. Yang ditambahkan bukan hiasan lepas: tiga hal yang masing-masing menjawab sesuatu. 1. Piala kecil sebelum judul — menandai JENIS papan. Papan mingguan punya panggung angka hadiah untuk itu; di sini tidak ada angka yang layak jadi kepala, jadi lambangnya yang bekerja. 2. Judul emas — satu-satunya teks emas di layar ini, jadi tidak bersaing dengan apa pun. 3. Keterangan kecil di bawahnya — "sepanjang masa" adalah pembeda yang menentukan dari papan mingguan, dan dia hilang begitu judulnya cuma menyebut kategori ("Top Donatur"). ⚠ Menimpa .fh-ov__top yang aslinya satu baris rata. Kekhususan (0,2,0) lawan (0,1,0), jadi menang tanpa bergantung urutan muat berkas. */ .fh-abadi .fh-ov__top{ align-items:flex-start; padding-bottom:var(--sp-md); } .fh-abhd{ /* flex:1 MENDORONG tombol tutup ke sudut kanan. Tanpa itu blok judul cuma selebar isinya dan tombolnya menempel tepat di sebelah tulisan — terbaca sebagai bagian dari judul, bukan sebagai navigasi layar. */ flex:1;min-width:0; display:flex;align-items:center;gap:9px; } /* Piala pixel. shape-rendering:crispEdges WAJIB, alasan yang sama dengan panah kembali: tanpa itu bentuk 9x9 unit di-antialias jadi bercak abu-abu. */ .fh-abhd__ico{ flex:none; width:22px;height:22px; fill:var(--pixel-primary); shape-rendering:crispEdges; } .fh-abhd__t{min-width:0} /* Judulnya menimpa .fh-ov__top h1 — ukuran dan warnanya berbeda, dan h1-nya sendiri tetap dipakai supaya urutan heading halaman tidak berubah. */ .fh-abadi .fh-ov__top h1{ margin:0; color:var(--pixel-primary); /* ⚠ BOLEH MEMBUNGKUS, dan itu koreksi. Aslinya nowrap + text-overflow:ellipsis, dan begitu "(sepanjang masa)" menempel di sini judulnya lewat kolom 289px — diukur: Donatur butuh 308px, Celestial 330px. Yang terpotong justru keterangannya, dan judul yang berakhir "(sepanjang ma…" lebih buruk daripada judul dua baris. */ white-space:normal; } /* "(sepanjang masa)" menempel di judul sebagai keterangan, bukan bagian namanya. ⚠ KELUAR DARI FONT PIXEL, dan harus DISEBUT eksplisit. `font-family:inherit` di sini mewarisi font PIXEL dari h1-nya — kebalikan dari yang dimaksud. Sempat begitu, dan akibatnya bukan cuma soal rupa: font pixel jauh lebih lebar, judulnya jadi 308px di kolom 289px, dan "(sepanjang masa)" terpotong ellipsis. Aturan tokens.css juga menyuruhnya: teks di bawah 14px pakai --font-ui, karena font pixel di ukuran kecil kehilangan bentuk hurufnya. Judulnya tetap pixel karena dia nama layar. Diredam dan tidak emas: emas dipesan untuk yang paling penting di layar ini, dan itu nama kategorinya. */ .fh-abadi .fh-ov__top h1 small{ font-family:var(--font-ui); /* 10px, bukan 11px. Di sebelah judul pixel 11px yang hurufnya lebar-tetap, 11px teks biasa terbaca hampir sebesar judulnya dan merebut tempat yang bukan miliknya — dia keterangan, bukan nama layar. Sisa ruangnya juga diukur: judul terpanjang (Celestial) turun dari 271px jadi 262px di kolom 289px. */ font-size:10px;font-weight:400; letter-spacing:0; color:var(--pixel-muted); } /* Satu kalimat yang menjawab "papan ini isinya apa". Menggantikan "SEPANJANG MASA" yang dulu berdiri di sini — keterangan itu sudah pindah ke samping judul, dan barisnya lebih berguna dipakai menjelaskan kategorinya. Bukan huruf kapital semua seperti penggantinya: yang dulu label dua kata, yang sekarang kalimat, dan kalimat berkapital semua melambatkan bacaan tanpa menambah apa pun. */ .fh-abhd__sub{ display:block;margin-top:4px; font-size:11px;line-height:1.35; color:var(--pixel-muted); white-space:normal; } /* ---------- KAKI: SATU BARIS, DI TENGAH ---------- .fh-lbme__hd aslinya dua sisi — kiri menyebut apa ini, kanan menyebut hadiah atau selisih. Di layar ini sisi kanan tidak ada isinya: tidak ada hadiah, dan "seberapa kurang" tidak berarti apa-apa untuk papan yang tidak dibagi hadiah. Satu-satunya isi yang tersisa dibiarkan menggantung di kiri terbaca seperti sisa tata letak yang lupa dibereskan. Di tengah dia jadi judul kaki. */ .fh-abadi .fh-lbme__hd{justify-content:center} /* ---------- BARIS NAMA ---------- Satu baris, bukan dua: nominalnya sengaja tidak digambar (lihat alltime.js), jadi kolom teks tinggal nama saja. Ukurannya naik ke 15px justru karena itu. Kartu setinggi 70px berisi satu baris 13px terbaca setengah kosong — yang di papan mingguan mengisi baris kedua adalah angka poin, dan di sini tidak ada penggantinya. */ .fh-abnama{ display:flex;align-items:center;gap:7px; min-width:0; } /* Tag klan tidak boleh menyusut: kalau ruangnya sempit, yang dipotong nama pemainnya. Tag yang terpotong berhenti jadi tag. */ .fh-abnama .fh-clan{flex:none} .fh-abnama b{ min-width:0; font-size:15px;font-weight:700;letter-spacing:.2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Kategori yang MENGGAMBAR angka (Top Coin) punya dua baris, jadi namanya kembali ke ukuran papan mingguan. Nama 15px di atas angka yang juga besar membuat dua baris saling berebut, dan urutan bacanya jadi kabur — di papan yang mengurutkan berdasarkan angka, angkanya yang harus menang. */ .fh-abrow--nilai .fh-abnama b{font-size:13px;font-weight:600} /* ANGKA UANG BERWARNA EMAS, sama dengan harga ikan di papan mingguan. DESIGN_NOTES memesan emas untuk uang, dan saldo coin uang. Dikaitkan ke `uang` di KAT, BUKAN ke nama kategorinya: kategori berikutnya yang nilainya bukan uang — "Top Level", misalnya — menggambar angka juga, dan dia tidak boleh ikut emas hanya karena sama-sama berangka. Satuannya tetap diredam. */ .fh-abrow--uang .fh-rknilai{color:var(--pixel-primary)} /* ---------- SEGMEN BERIKON ---------- Enam kategori, dan enam label berteks tidak muat di bar selebar ini — "Donatur", "Celestial", dan "Termahal" mulai terpotong begitu kategori kelima ditambahkan. Namanya tidak hilang, cuma pindah: judul di atas sudah menyebut kategori aktif berikut satu kalimat keterangannya, dan itu tempat yang jauh lebih lapang daripada pil selebar 55px. ⚠ Nama tetap ADA di markup lewat aria-label dan title (lihat alltime.js) — ikon tanpa nama adalah tombol yang cuma bisa dipelajari dengan menekan satu-satu, dan tidak punya nama sama sekali untuk pembaca layar. shape-rendering:crispEdges WAJIB, alasan yang sama dengan panah kembali dan piala judul: tanpa itu bentuk 9x9 unit di-antialias jadi bercak abu-abu. */ .fh-abadi .fh-seg__b{padding:0} .fh-abadi .fh-seg__b svg{ width:15px;height:15px; fill:currentColor; shape-rendering:crispEdges; } /* ---------- LAMBANG CLAN ---------- Menempati slot foto pemain (.fh-rkav) supaya kartu clan dan kartu pemain sejajar kolomnya — tidak ada tata letak kedua. Bujur sangkar membulat, bukan lingkaran seperti foto: bedanya disengaja, karena barisnya memang bukan orang. Font pixel supaya tagnya terbaca sebagai lambang, bukan sebagai singkatan biasa. ⚠ WARNANYA DIREDAM TIRAI GELAP 40%, dan itu hasil pengukuran. Palet avatar (--av-1..6) duduk di pita terang-menengah: diuji terhadap keenamnya, ink gelap lolos 4,5:1 cuma 1 dari 6 dan ink terang 0 dari 6. Tidak ada tinta yang menang — jadi yang diubah latarnya, bukan tintanya. Tirai 40% membawa keenamnya ke 5,88-8,01:1 dengan teks terang, dan warnanya MASIH terbedakan (jarak RGB terdekat 16). Tirai yang lebih pekat menaikkan kontras tapi memeratakan warnanya, dan lambang yang semua clan-nya sewarna berhenti jadi lambang. Tirai ditulis sebagai background-image supaya `background` warna yang dipasang JS sebaris tetap terpakai sebagai lapis bawahnya. */ .fh-ablencana{ width:100%;height:100%; display:grid;place-items:center; border-radius:var(--r-md); font-family:var(--font-pixel);font-size:9px;letter-spacing:.5px; color:var(--pixel-text); background-image:linear-gradient(rgba(5,14,23,.4),rgba(5,14,23,.4)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.22); } /* ---------- BARIS TANGKAPAN (kategori Ikan) ---------- TIDAK ADA aturan di sini, dan itu disengaja. Barisnya memakai .fh-rkfish/.fh-rkmuka dari rank.css apa adanya — dua muka bergilir yang sama persis dengan kategori Terlangka, termasuk ukuran gambar kanannya (.fh-rkrow--art 124px). Sempat ditulis versi sendiri di sini: satu baris berisi label tier + nama ikan + harga sekaligus, dengan ruang gambar dipersempit jadi 96px supaya muat. Dicabut — diukur, ketiganya butuh 260px di kolom 169px dan tidak pernah muat; giliranlah jawabannya, dan papan mingguan sudah punya jawabannya. */ /* ---------- KARTU PERTAMA TIDAK BOLEH TERTUTUP ---------- ⚠ .fh-lbtop position:sticky dengan z-index:2 dan latar LEGAP, sementara keping peringkat duduk di top:-6px — menyembul ke atas tepi kartunya. Kartu pertama berada tepat di bawah bar itu, jadi kepingnya tergambar DI BAWAH latar bar dan angkanya terpotong. Yang terpotong cuma kartu PERTAMA dan cuma 6px, jadi ini jenis cacat yang lolos dari mata sampai ada yang menatapnya — dan memang begitu ketahuannya. Jaraknya ditulis di baris pertama, bukan sebagai padding-top .fh-lblist: daftar itu dipakai bersama Bestiary, yang barisnya TIDAK menyembul dan tidak butuh jarak apa pun di atas. 12px, dan angkanya DIUKUR: dia menyisakan 7px bebas antara tepi bawah bar dan puncak keping — sama persis dengan papan mingguan, yang memang tidak pernah terpotong. Menyamakan sisanya, bukan menyamakan marginnya: kedua layar punya tinggi bar yang berbeda. */ .fh-lblist > .fh-abrow:first-child{margin-top:12px} /* ============================================================ BARIS TERSEMBUNYI & PINTASAN PRIVASI Baris tersembunyi harus terbaca sebagai KEPUTUSAN, bukan sebagai data yang gagal dimuat. Bedanya tipis dan seluruhnya ada di sini: kalau cuma diredupkan, dia tampak seperti baris rusak. Yang membedakannya gembok - lambang yang berarti "sengaja ditutup" dan tidak berarti apa-apa yang lain. ============================================================ */ .fh-rkrow.is-sembunyi .fh-abnama b{ color:var(--pixel-muted); /* TIDAK dimiringkan dan TIDAK diberi kursor tangan: baris ini memang tidak bisa dibuka, dan apa pun yang mengisyaratkan sebaliknya adalah janji yang tidak ditepati. */ cursor:default; } .fh-rkav--sembunyi .fh-av--sembunyi{ display:flex;align-items:center;justify-content:center; background:var(--pixel-raised); border:1px solid var(--pixel-border); color:var(--pixel-muted); } .fh-rkav--sembunyi svg{ width:13px;height:13px; fill:currentColor; } /* ---------- PINTASAN DI KAKI ---------- Muncul HANYA di kategori donatur, jadi judul kaki yang biasanya sendirian di tengah kini punya teman di kanan. Tanpa ini keduanya berdesakan di tengah pada layar sempit. */ .fh-abadi .fh-lbme__hd.has-priv{justify-content:space-between} .fh-lbpriv{ flex:none; display:inline-flex;align-items:center;gap:5px; /* Sasaran tap 28px tingginya walau teksnya 8px - saklar yang menentukan nama seseorang terpampang atau tidak tidak boleh jadi sasaran yang meleset. */ min-height:28px; padding:0 9px; background:var(--pixel-raised); border:1px solid var(--pixel-border); border-radius:999px; font-family:var(--font-pixel);font-size:8px; text-transform:uppercase;letter-spacing:.5px; color:var(--c-hook); cursor:pointer; } .fh-lbpriv.is-sembunyi{color:var(--pixel-muted)} .fh-lbpriv:disabled{opacity:.55;cursor:default} .fh-lbpriv svg{width:11px;height:11px;fill:currentColor;flex:none} /* ============================================================ BARIS SENDIRI SAAT TERSEMBUNYI Namanya tetap ditulis - pemiliknya perlu mengenali dirinya di papan. Yang ditambahkan gembok kecil dan satu baris keterangan, dan keduanya ADA justru supaya ketukan pada saklar meninggalkan jejak yang terlihat. Sebelum ini, menekan "sembunyikan" tidak mengubah apa pun yang kelihatan di baris sendiri, dan pemain menyimpulkan tombolnya rusak lalu menekannya balik. ============================================================ */ .fh-privchip{ display:inline-flex;align-items:center;justify-content:center; width:15px;height:15px; margin-left:6px; flex:none; background:var(--pixel-raised); border:1px solid var(--pixel-border); border-radius:var(--r-xs); vertical-align:middle; } .fh-privchip svg{width:8px;height:9px;fill:var(--pixel-muted)} /* Keterangan menempati slot yang sama dengan baris nilai di kategori berangka, jadi tinggi kartunya tidak berubah dan baris sendiri tidak jadi lebih jangkung dari tetangganya. */ .fh-rkpriv{ display:block; font-style:normal; font-size:10px;line-height:1.3; color:var(--pixel-muted); margin-top:2px; }