/* Basic layout for the accessibility toolbar */ :root{ --disa-accent: #57b7e5; /* match wheelchair icon */ --disa-focus: #1a73e8; --disa-panel-bg: #ffffff; --disa-card-bg: #ffffff; --disa-card-border: #dfe3f7; --disa-shadow: 0 10px 25px rgba(24,20,61,.15); } .disa-toolbar { position: fixed; bottom: 16px; left: 16px; z-index: 999999; font-family: Arial, Helvetica, sans-serif; } .disa-toggle { background:var(--disa-accent); color:#fff; border:none; width:60px; height:60px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--disa-shadow); } .disa-toggle:focus { outline: 3px solid var(--disa-focus); outline-offset:2px; } .disa-toggle-icon { line-height:1; display:block; } .disa-toggle-icon svg{ width:28px; height:28px; display:block; } .disa-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .disa-panel { position: fixed; bottom: 86px; left: 8px; width: 320px; max-width: calc(100vw - 16px); background:var(--disa-panel-bg); color:#111; border-radius:12px; border:1px solid #e8ebfb; box-shadow:var(--disa-shadow); padding:14px; overflow-y:auto; max-height: calc(100vh - 140px); } .disa-section { margin-bottom:12px; } .disa-section-title { margin:2px 6px 10px; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#495079; } .disa-grid { display:grid; grid-template-columns: repeat(2, 1fr); grid-gap:10px; } .disa-card { background:var(--disa-card-bg); border:1.5px solid var(--disa-card-border); border-radius:12px; padding:14px 10px; text-align:center; font-size:12px; line-height:1.25; cursor:pointer; transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease; } .disa-card strong { display:block; margin-top:6px; } .disa-card span{ display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; color:#3f3d56; } .disa-card:focus { outline:none; border-color:var(--disa-focus); box-shadow:0 0 0 3px rgba(76,111,255,.35); } .disa-card:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(24,20,61,.10); } .disa-card.active { border-color:var(--disa-accent); box-shadow: inset 0 0 0 2px var(--disa-accent); } .disa-fontsize { background:#fafbff; border-radius:12px; border:1px solid #e8ebfb; padding:10px; margin:0 6px 12px; } .disa-card-title{ font-weight:600; margin-bottom:6px; } .disa-fontsize-controls { display:flex; align-items:center; justify-content:space-between; } .disa-btn { background:#ffffff; border:2px solid #dee5ff; color:#111; border-radius:20px; width:36px; height:36px; font-size:18px; cursor:pointer; } .disa-fontsize-label { font-weight:700; background:none; border:none; cursor:pointer; padding:4px 8px; border-radius:8px; } .disa-fontsize-label:focus{ outline:3px solid var(--disa-focus); outline-offset:2px; } /* Reading guide bar */ .disa-reading-guide{ position: fixed; left:0; width:100vw; height:42px; background: rgba(255, 205, 0, .25); pointer-events:none; z-index: 999998; display:none; } body.disa-reading-guide-enabled .disa-reading-guide{ display:block; } /* Accessibility feature classes applied to */ /* Font size scaling */ html.disa-fontsize { /* value handled inline on html style via JS */ } /* Readable font */ body.disa-readable-font, body.disa-readable-font * { font-family: Arial, Helvetica, "Segoe UI", Tahoma, sans-serif !important; } /* Highlight titles */ body.disa-highlight-title h1, body.disa-highlight-title h2, body.disa-highlight-title h3, body.disa-highlight-title h4, body.disa-highlight-title h5, body.disa-highlight-title h6 { background: #fff7cc !important; padding: .15em .25em !important; outline: 2px solid #f2a100 !important; } /* Highlight links */ body.disa-highlight-links a { outline:3px solid #f2a100 !important; background:#fff7cc !important; text-decoration: underline !important; } /* Contrast schemes */ body.disa-dark-contrast { background:#111 !important; color:#eee !important; } body.disa-dark-contrast a { color:#ffcc00 !important; } body.disa-light-contrast { background:#fff !important; color:#111 !important; } body.disa-light-contrast a { color:#1a73e8 !important; } body.disa-high-contrast { background:#000 !important; color:#ffff00 !important; } body.disa-high-contrast a { color:#00ffff !important; } /* Saturation & monochrome via filter */ html.disa-sat-high { filter: saturate(2) !important; } html.disa-sat-low { filter: saturate(0.5) !important; } html.disa-mono { filter: grayscale(100%) !important; } /* Stop animations */ body.disa-stop-animations *, body.disa-stop-animations *::before, body.disa-stop-animations *::after { -webkit-animation: none !important; animation: none !important; -webkit-transition: none !important; transition: none !important; scroll-behavior: auto !important; } /* Big cursor with data-URI SVG (fallbacks to auto) */ body.disa-big-cursor, body.disa-big-cursor * { cursor: url("data:image/svg+xml;utf8,") 0 0, auto !important; } /* Ensure base elements keep readable on extreme modes */ body.disa-dark-contrast img, body.disa-high-contrast img { opacity:.9 } /* Responsive grid: 3 kolom pada layar lebar */ @media (min-width: 640px){ .disa-grid{ grid-template-columns: repeat(3, 1fr); } } /* Panel hidden state */ .disa-panel[hidden]{ display:none; } /* Text-to-Speech mini controller */ .disa-tts{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; background:#ffffff; border:1px solid #e8ebfb; border-radius:999px; box-shadow:var(--disa-shadow); padding:6px 10px; display:flex; align-items:center; gap:6px; } .disa-tts[hidden]{ display:none; } .disa-tts-btn{ width:34px; height:34px; border-radius:50%; border:1px solid #dde3fb; background:#fff; cursor:pointer; } .disa-tts-btn:focus{ outline:3px solid var(--disa-focus); outline-offset:2px; } .disa-tts-status{ font-size:12px; color:#4b4f68; margin-left:4px; min-width:90px; }