/** * plg_system_kebolehcapaian — accessibility settings panel. * * Two independent halves: * * 1. The panel itself (.jkbc-*), styled from scratch so it looks and behaves * the same on any template, and deliberately excluded from every effect * below so it stays legible and reachable whatever the visitor turns on. * * 2. The effects, applied from classes on . * * The colour filters target `body > *:not(.jkbc-root)` rather than or * . A CSS filter makes an element the containing block for its * position:fixed descendants, so filtering a common ancestor of the panel * would peel the panel off the viewport and scroll it away — leaving a visitor * who turned on invert with no way to turn it off. Filtering body's children * individually looks identical, keeps the panel outside the filtered subtree, * and leaves position:sticky headers alone (sticky is unaffected by filters). * * @copyright Copyright (C) 2026 Institut Koperasi Malaysia. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */ /* ========================================================================== 1. Panel ========================================================================== */ .jkbc-root, .jkbc-root *, .jkbc-root *::before, .jkbc-root *::after { box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: normal; word-spacing: normal; } .jkbc-root { position: fixed; z-index: 2147483000; font-size: 16px; line-height: 1.4; color: #16202c; } .jkbc-root[hidden] { display: none; } .jkbc-bottom-right { right: 16px; bottom: 16px; } .jkbc-bottom-left { left: 16px; bottom: 16px; } .jkbc-top-right { right: 16px; top: 16px; } .jkbc-top-left { left: 16px; top: 16px; } /* Mounted into a template's own markup instead of floating. */ .jkbc-inline { position: relative; z-index: 2147483000; display: inline-block; } .jkbc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Trigger -------------------------------------------------------------- */ .jkbc-root .jkbc-fab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 10px 16px; border: 2px solid #ffffff; border-radius: 999px; background: #0b3d75; color: #ffffff; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); text-transform: none; } .jkbc-inline .jkbc-fab { min-height: 44px; padding: 6px 12px; font-size: 14px; box-shadow: none; } .jkbc-root .jkbc-fab:hover { background: #09315e; } .jkbc-root .jkbc-icon { flex: none; width: 24px; height: 24px; } /* --- Panel surface -------------------------------------------------------- */ .jkbc-root .jkbc-panel { position: absolute; width: min(340px, calc(100vw - 32px)); /* Tall enough that the full tool list fits without scrolling on a laptop viewport; still clamped to the viewport on short screens. */ max-height: min(84vh, 760px); display: flex; flex-direction: column; background: #ffffff; border: 2px solid #0b3d75; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); overflow: hidden; } .jkbc-root .jkbc-panel[hidden] { display: none; } .jkbc-bottom-right .jkbc-panel { right: 0; bottom: calc(100% + 12px); } .jkbc-bottom-left .jkbc-panel { left: 0; bottom: calc(100% + 12px); } .jkbc-top-right .jkbc-panel { right: 0; top: calc(100% + 12px); } .jkbc-top-left .jkbc-panel { left: 0; top: calc(100% + 12px); } .jkbc-inline .jkbc-panel { left: 0; top: calc(100% + 8px); } /* Keep the panel on screen when the trigger sits near a viewport edge. */ @media (max-width: 420px) { .jkbc-root .jkbc-panel { position: fixed; left: 16px; right: 16px; bottom: 80px; top: auto; width: auto; } .jkbc-top-right .jkbc-panel, .jkbc-top-left .jkbc-panel { top: 80px; bottom: auto; } } .jkbc-root .jkbc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 12px 16px; background: #0b3d75; color: #ffffff; } .jkbc-root .jkbc-heading { margin: 0; font-size: 16px; font-weight: 700; color: #ffffff; text-transform: none; } .jkbc-root .jkbc-close { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #ffffff; font-size: 26px; line-height: 1; cursor: pointer; } .jkbc-root .jkbc-close:hover { background: rgba(255, 255, 255, .18); } .jkbc-root .jkbc-body { padding: 4px 16px 12px; overflow-y: auto; background: #ffffff; } .jkbc-root .jkbc-group { margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid #d5dde6; } .jkbc-root .jkbc-body > .jkbc-group:first-child { border-top: 0; } /* Deliberately NOT text-transform: uppercase. Chrome applies text-transform when computing the accessible name, so an uppercased reaches assistive technology as "WARNA DAN KONTRAS" — and some screen readers spell short all-caps strings out letter by letter. These legends name the radio group and the checkbox group, so they are announced on entry; the label has to be the words, not shouting. Weight and letter-spacing carry the styling instead. */ .jkbc-root .jkbc-legend { display: block; width: 100%; margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .03em; color: #4a5766; } .jkbc-root .jkbc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .jkbc-root .jkbc-opt { display: flex; align-items: center; gap: 8px; min-height: 44px; } .jkbc-root .jkbc-opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #0b3d75; cursor: pointer; } .jkbc-root .jkbc-opt label { margin: 0; font-size: 14px; font-weight: 400; color: #16202c; cursor: pointer; text-transform: none; } /* --- Text size ------------------------------------------------------------ */ .jkbc-root .jkbc-steps { display: flex; align-items: center; gap: 8px; } .jkbc-root .jkbc-step { width: 48px; height: 44px; padding: 0; border: 2px solid #0b3d75; border-radius: 8px; background: #ffffff; color: #0b3d75; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; } .jkbc-root .jkbc-step:hover { background: #e8f0f9; } .jkbc-root .jkbc-step[disabled] { opacity: .45; cursor: not-allowed; } .jkbc-root .jkbc-value { min-width: 62px; text-align: center; font-size: 15px; font-weight: 700; color: #16202c; } /* --- Footer --------------------------------------------------------------- */ .jkbc-root .jkbc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #d5dde6; background: #f2f5f9; } .jkbc-root .jkbc-reset { min-height: 44px; padding: 8px 16px; border: 2px solid #0b3d75; border-radius: 8px; background: #ffffff; color: #0b3d75; font-size: 14px; font-weight: 600; cursor: pointer; } .jkbc-root .jkbc-reset:hover { background: #e8f0f9; } .jkbc-root .jkbc-link { color: #0b3d75; font-size: 13px; text-decoration: underline; } /* --- Focus ---------------------------------------------------------------- */ .jkbc-root :is(button, a, input):focus-visible { outline: 3px solid #b34700; outline-offset: 2px; } .jkbc-root .jkbc-head :is(button):focus-visible { outline-color: #ffd166; } /* ========================================================================== 2. Effects ========================================================================== */ /* --- Invert --------------------------------------------------------------- */ html.jkbc-cm-invert body > *:not(.jkbc-root) { filter: invert(1) hue-rotate(180deg); } /* body's own background is not a child, so it has to be set outright. */ html.jkbc-cm-invert body { background-color: #000000 !important; } /* Re-invert media so photographs and video stay recognisable. */ html.jkbc-cm-invert :is(img, video, picture, canvas, iframe, embed, object):not(.jkbc-root *) { filter: invert(1) hue-rotate(180deg); } /* --- Monochrome and saturation -------------------------------------------- */ html.jkbc-cm-mono body > *:not(.jkbc-root) { filter: grayscale(1); } html.jkbc-cm-lowsat body > *:not(.jkbc-root) { filter: saturate(.4); } html.jkbc-cm-highsat body > *:not(.jkbc-root) { filter: saturate(1.8); } /* --- High contrast (light) ------------------------------------------------ */ html.jkbc-cm-hc body { background: #ffffff !important; } html.jkbc-cm-hc body > *:not(.jkbc-root), html.jkbc-cm-hc body > *:not(.jkbc-root) * { background-color: #ffffff !important; background-image: none !important; color: #000000 !important; border-color: #000000 !important; box-shadow: none !important; text-shadow: none !important; } html.jkbc-cm-hc a[href]:not(.jkbc-root *), html.jkbc-cm-hc a[href]:not(.jkbc-root *) * { color: #0000b3 !important; text-decoration: underline !important; } html.jkbc-cm-hc :is(button, input, select, textarea):not(.jkbc-root *) { border: 2px solid #000000 !important; } /* --- High contrast (dark) ------------------------------------------------- */ html.jkbc-cm-dark body { background: #000000 !important; } html.jkbc-cm-dark body > *:not(.jkbc-root), html.jkbc-cm-dark body > *:not(.jkbc-root) * { background-color: #000000 !important; background-image: none !important; color: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; } html.jkbc-cm-dark a[href]:not(.jkbc-root *), html.jkbc-cm-dark a[href]:not(.jkbc-root *) * { color: #ffe066 !important; text-decoration: underline !important; } html.jkbc-cm-dark :is(button, input, select, textarea):not(.jkbc-root *) { border: 2px solid #ffffff !important; } /* --- Highlight links and headings ----------------------------------------- */ html.jkbc-links a[href]:not(.jkbc-root *) { outline: 3px solid #ffb300 !important; outline-offset: 2px !important; text-decoration: underline !important; text-underline-offset: 2px !important; } html.jkbc-headings :is(h1, h2, h3, h4, h5, h6):not(.jkbc-root *) { outline: 3px dashed #0b57d0 !important; outline-offset: 3px !important; } /* Dashed blue is invisible on a black page; switch to the link colour. */ html.jkbc-cm-dark.jkbc-headings :is(h1, h2, h3, h4, h5, h6):not(.jkbc-root *) { outline-color: #ffe066 !important; } /* --- Text spacing (SC 1.4.12 values) -------------------------------------- */ html.jkbc-spacing :is(p, li, dd, dt, td, th, blockquote, figcaption, label, a, h1, h2, h3, h4, h5, h6):not(.jkbc-root *) { line-height: 1.5 !important; letter-spacing: .12em !important; word-spacing: .16em !important; } html.jkbc-spacing p:not(.jkbc-root *) { margin-bottom: 2em !important; } /* --- Dyslexia-friendly typography ----------------------------------------- */ html.jkbc-dyslexia body > *:not(.jkbc-root), html.jkbc-dyslexia body > *:not(.jkbc-root) * { font-family: "Comic Sans MS", "Trebuchet MS", Verdana, Tahoma, sans-serif !important; letter-spacing: .05em !important; word-spacing: .12em !important; } /* Icon fonts render as letters if their family is overridden. */ html.jkbc-dyslexia :is([class*="icon-"], [class*="fa-"], .fa, .fas, .far, .fab, .material-icons):not(.jkbc-root *) { font-family: revert !important; letter-spacing: normal !important; } /* --- Large pointer -------------------------------------------------------- */ html.jkbc-cursor, html.jkbc-cursor *:not(.jkbc-root *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M5 1.5l14.5 9.2-6.6 1.5 3.7 6.9-3.3 1.8-3.7-6.9-4.6 4.6z' fill='%23ffffff' stroke='%23000000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 3 1, auto !important; } html.jkbc-cursor :is(a[href], button, [role="button"], label, select, summary, input[type="submit"]):not(.jkbc-root *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.6a1.6 1.6 0 013.2 0V10h1.2a1.5 1.5 0 011.5-1.4 1.5 1.5 0 011.5 1.5v.6a1.5 1.5 0 011.5-1.2 1.5 1.5 0 011.5 1.5v4.6c0 3-2.2 5.4-5.2 5.4h-2c-2 0-3.2-1-4.2-2.5l-3-4.6a1.5 1.5 0 012.3-1.9z' fill='%23ffffff' stroke='%23000000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 10 2, pointer !important; } /* --- Stop animation ------------------------------------------------------- */ html.jkbc-noanim *, html.jkbc-noanim *::before, html.jkbc-noanim *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* --- Reading mode --------------------------------------------------------- */ /* :has() guards against hiding a wrapper that happens to contain the content. */ html.jkbc-reading :is(header, nav, aside, footer, [role="banner"], [role="navigation"], [role="complementary"], [role="contentinfo"]):not(.jkbc-root *):not(:has(main, [role="main"])) { display: none !important; } html.jkbc-reading :is(main, [role="main"]):not(.jkbc-root *) { float: none !important; width: auto !important; max-width: 72ch !important; margin: 0 auto !important; padding: 24px 16px !important; } /* ========================================================================== 3. Print ========================================================================== */ @media print { .jkbc-root { display: none !important; } }