/* ============================================================================ keselesaan.css — Penambahbaikan UI/UX & Kesihatan Mata Sistem Helpdesk & Audit Aset Sewaan ICT PSMZA ---------------------------------------------------------------------------- Modul ini menambah: 1. Tema "Hangat" (kurang cahaya biru) selain Terang/Gelap sedia ada 2. Penskalaan saiz teks (A- / A / A+) melalui font-size akar 3. Hormati tetapan sistem pengguna (prefers-reduced-motion) 4. Pengukuhan kontras badge & fokus papan kekunci (WCAG AA) Bergantung pada Bootstrap 5.3 (data-bs-theme). Modul ini menetapkan atribut dan melalui keselesaan.js. Ubah nilai di :root sahaja jika mahu kalibrasi semula. ============================================================================ */ /* --------------------------------------------------------------------------- 1. PENSKALAAN SAIZ TEKS Bootstrap guna unit rem, jadi menukar font-size pada menskala keseluruhan antara muka secara berkadar tanpa merosakkan susun atur. --------------------------------------------------------------------------- */ :root { --saiz-kecil: 93.75%; /* ~15px */ --saiz-biasa: 100%; /* ~16px (lalai) */ --saiz-besar: 112.5%; /* ~18px */ } html[data-saiz="kecil"] { font-size: var(--saiz-kecil); } html[data-saiz="biasa"] { font-size: var(--saiz-biasa); } html[data-saiz="besar"] { font-size: var(--saiz-besar); } /* Kebolehbacaan: jarak baris lebih selesa untuk sesi panjang. Nilai sederhana supaya jadual padat (aduan, audit) tidak pecah. */ body { line-height: 1.55; } /* --------------------------------------------------------------------------- 2. TEMA HANGAT (kurang cahaya biru) Latar krim seperti kertas + teks perang hangat. Warna status (success/danger/warning) sengaja DIKEKALKAN supaya badge kekal jelas. Kita hanya "menghangatkan" latar, permukaan, teks & sempadan. --------------------------------------------------------------------------- */ html[data-tema="hangat"] { --bs-body-bg: #f4ecd8; /* krim */ --bs-body-bg-rgb: 244, 236, 216; --bs-body-color: #40352b; /* perang gelap */ --bs-body-color-rgb: 64, 53, 43; --bs-emphasis-color: #2c231b; --bs-secondary-color: #5b4f42; /* teks lembut, kontras AA */ --bs-secondary-bg: #ece2c9; --bs-tertiary-bg: #efe6d0; --bs-border-color: #dccdae; --bs-border-color-translucent: rgba(64, 53, 43, 0.14); --bs-link-color: #8a4a20; /* pautan perang-rust, rendah biru */ --bs-link-color-rgb: 138, 74, 32; --bs-link-hover-color: #6f3a17; --bs-heading-color: #2c231b; } /* Permukaan (kad, jadual, navbar, senarai) dalam tema hangat */ html[data-tema="hangat"] .card, html[data-tema="hangat"] .list-group-item, html[data-tema="hangat"] .dropdown-menu, html[data-tema="hangat"] .modal-content, html[data-tema="hangat"] .accordion-item { background-color: #fbf6ea; border-color: var(--bs-border-color); } html[data-tema="hangat"] .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); } html[data-tema="hangat"] .navbar { background-color: #efe4cb !important; border-bottom: 1px solid var(--bs-border-color); } html[data-tema="hangat"] .form-control, html[data-tema="hangat"] .form-select { background-color: #fffaf0; border-color: var(--bs-border-color); color: var(--bs-body-color); } html[data-tema="hangat"] .form-control::placeholder { color: #9a8b76; } /* --------------------------------------------------------------------------- 3. HORMATI TETAPAN SISTEM: kurangkan gerakan Untuk pengguna yang sensitif kepada animasi/peralihan. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Peralihan tema yang lembut (dilangkau bila reduced-motion aktif di atas) */ body, .card, .navbar, .table, .form-control, .form-select, .list-group-item { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* --------------------------------------------------------------------------- 4. PENGUKUHAN KONTRAS BADGE (WCAG AA) & KEBOLEHBACAAN Badge sistem sudah membawa label teks (cth "Selesai", "Lewat") jadi ia TIDAK bergantung pada warna semata. Di sini kita hanya pastikan kontras teks-atas-warna mencukupi dan saiz cukup untuk dibaca. --------------------------------------------------------------------------- */ .badge { font-weight: 600; letter-spacing: 0.01em; padding: 0.4em 0.65em; } /* Warna terang perlukan teks gelap agar kontras cukup */ .badge.bg-warning, .badge.bg-info, .badge.bg-light, .badge.text-bg-warning, .badge.text-bg-info, .badge.text-bg-light { color: #212529 !important; } /* Warna gelap/tepu perlukan teks putih */ .badge.bg-success, .badge.bg-danger, .badge.bg-primary, .badge.bg-secondary, .badge.bg-dark, .badge.text-bg-success, .badge.text-bg-danger, .badge.text-bg-primary, .badge.text-bg-secondary, .badge.text-bg-dark { color: #fff !important; } /* --------------------------------------------------------------------------- 5. FOKUS PAPAN KEKUNCI YANG JELAS (aksesibiliti asas) --------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; box-shadow: none; } html[data-tema="hangat"] a:focus-visible, html[data-tema="hangat"] button:focus-visible, html[data-tema="hangat"] .btn:focus-visible { outline-color: #8a4a20; } /* --------------------------------------------------------------------------- 6. KAWALAN KESELESAAN DALAM NAVBAR Gaya minimum, tanpa kekemasan berlebihan. --------------------------------------------------------------------------- */ .kawalan-keselesaan { display: inline-flex; align-items: center; gap: 0.35rem; } .kawalan-keselesaan .btn { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; line-height: 1; } .kawalan-keselesaan .ikon-tema { width: 1.1em; height: 1.1em; } /* Papar hanya ikon tema yang sepadan dengan tema semasa */ .ikon-tema { display: none; } html[data-tema="terang"] .ikon-tema.terang { display: inline-block; } html[data-tema="gelap"] .ikon-tema.gelap { display: inline-block; } html[data-tema="hangat"] .ikon-tema.hangat { display: inline-block; } /* Label mod: papar mengikut tema semasa; sembunyi pada skrin kecil */ .label-tema { display: none; } @media (min-width: 768px) { html[data-tema="terang"] .label-tema.terang, html[data-tema="gelap"] .label-tema.gelap, html[data-tema="hangat"] .label-tema.hangat { display: inline; } } .kawalan-saiz .btn { font-weight: 700; min-width: 2rem; } .kawalan-saiz .btn:disabled { opacity: 0.4; } /* --------------------------------------------------------------------------- 6a. KONTRAS DALAM NAVBAR BERWARNA Navbar sistem menggunakan .bg-primary (biru tua). Gaya asal .btn-outline-secondary memberi sempadan kelabu di atas biru — kontras terlalu rendah untuk dibaca dengan selesa. Selaraskan dengan butang navbar yang lain (.btn-outline-light). --------------------------------------------------------------------------- */ .navbar .kawalan-keselesaan .btn { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.65); --bs-btn-hover-color: #000; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-color: #000; --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #fff; --bs-btn-disabled-color: rgba(255, 255, 255, 0.5); --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.3); } /* Sasaran sentuh minimum pada telefon (WCAG 2.5.8) */ @media (max-width: 767.98px) { .kawalan-keselesaan .btn { min-height: 2.25rem; min-width: 2.25rem; } } /* Kawalan ini tiada makna pada cetakan */ @media print { .kawalan-keselesaan { display: none !important; } } /* --------------------------------------------------------------------------- 7. NAVIGASI: SATU BARIS YANG KEMAS PADA SEMUA PENSKALAAN PAPARAN Punca isu asal: menu pentadbir mempunyai 12 item peringkat atas. Pada skrin dengan penskalaan paparan Windows 125%/150%, lebar viewport CSS jauh lebih kecil daripada lebar skrin fizikal — jadi label seperti "Dashboard KPI" dan "Analitik Kerosakan" pecah kepada dua baris dan navbar kelihatan berterabur serta tinggi tidak sekata. Penyelesaian sebenar dibuat pada struktur menu (includes/header.php): 12 item dikumpulkan menjadi 6, dan ambang navbar dinaikkan kepada 'xl' supaya skrin sempit menggunakan menu hamburger, bukan menu mendatar yang dipaksa muat. CSS di bawah hanya menyokong keputusan itu: label tidak boleh sekali-kali pecah kepada dua baris, dan item tidak boleh dimampatkan sehingga bertindih. --------------------------------------------------------------------------- */ .navbar .navbar-nav .nav-link { white-space: nowrap; } /* Halang flexbox memampatkan item menu sehingga teksnya pecah/terpotong. Jika ruang tidak mencukupi, biar navbar runtuh kepada hamburger — itu lebih kemas daripada menu mendatar yang berhimpit. */ .navbar-expand-xl .navbar-nav > .nav-item { flex-shrink: 0; } /* Tinggi navbar sekata: semua pautan sebaris, ikon dan teks berpusat. */ .navbar-expand-xl .navbar-nav .nav-link { display: inline-flex; align-items: center; gap: 0.35rem; } /* Petunjuk halaman semasa — pengguna perlu tahu kedudukan mereka. Garis bawah, bukan warna semata-mata (aksesibiliti: tidak bergantung pada persepsi warna). */ .navbar-dark .navbar-nav .nav-link.active { color: #fff; font-weight: 600; box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.9); } /* Nama pengguna boleh sangat panjang ("Ketua Juruteknik Komputer"). Hadkan lebarnya supaya ia tidak menolak menu — nama penuh tetap boleh dilihat dalam dropdown akaun dan atribut title. */ .navbar .nama-pengguna { display: inline-block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* Menu hamburger (skrin sempit / paparan berskala tinggi): beri ruang nafas dan had tinggi supaya senarai panjang boleh diskrol menegak tanpa menolak kandungan halaman. */ @media (max-width: 1199.98px) { .navbar-expand-xl .navbar-collapse { max-height: 80vh; overflow-y: auto; padding-top: 0.5rem; } .navbar-expand-xl .navbar-nav .nav-link { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* Dalam mod runtuh, dropdown dipapar sebagai senarai terbenam — bukan lapisan terapung yang mudah tersasar di luar skrin. */ .navbar-expand-xl .navbar-collapse .dropdown-menu { border: 0; background: rgba(0, 0, 0, 0.15); margin-left: 1rem; } .navbar-expand-xl .navbar-collapse .dropdown-item { color: #fff; } .navbar-expand-xl .navbar-collapse .dropdown-item:hover, .navbar-expand-xl .navbar-collapse .dropdown-item:focus { background: rgba(255, 255, 255, 0.15); color: #fff; } .navbar-expand-xl .navbar-collapse .dropdown-header { color: rgba(255, 255, 255, 0.75); } }