/** * MLLM prieinamumas — accessibility toolbar styles. * * Visual effects are driven by classes/data-attrs on (the * .mllm-a11y-* classes). JS only toggles these; all logic lives here. * * The toolbar (#mllm-a11y) is rendered as a direct child of , and the * grayscale / invert filters are scoped to `body > *:not(#mllm-a11y)` so the * toolbar is NEVER inverted or desaturated by its own controls. * * @package Mllm_Accessibility */ /* ------------------------------------------------------------------------- * 1. Font scaling — driven by a CSS var set inline on . * ------------------------------------------------------------------------- */ :root { --mllm-a11y-font-scale: 1; } html.mllm-a11y-font-scaled { font-size: calc(100% * var(--mllm-a11y-font-scale, 1)); } /* ------------------------------------------------------------------------- * 2. Underline all links. * ------------------------------------------------------------------------- */ html.mllm-a11y-underline a, html.mllm-a11y-underline a:link, html.mllm-a11y-underline a:visited { text-decoration: underline !important; } /* Never underline the toolbar's own controls. */ html.mllm-a11y-underline #mllm-a11y a, html.mllm-a11y-underline #mllm-a11y button { text-decoration: none !important; } /* ------------------------------------------------------------------------- * 3. Highlight / high-contrast links. * ------------------------------------------------------------------------- */ html.mllm-a11y-highlight-links a:not([class*="mllm-a11y"]) { background-color: #ffeb3b !important; color: #111111 !important; outline: 2px solid #111111 !important; outline-offset: 1px; text-decoration: underline !important; box-shadow: none !important; } html.mllm-a11y-highlight-links #mllm-a11y a, html.mllm-a11y-highlight-links #mllm-a11y button { background-color: transparent !important; outline: none !important; } /* ------------------------------------------------------------------------- * 4. Enhanced keyboard focus outlines. * ------------------------------------------------------------------------- */ html.mllm-a11y-focus a:focus, html.mllm-a11y-focus button:focus, html.mllm-a11y-focus input:focus, html.mllm-a11y-focus select:focus, html.mllm-a11y-focus textarea:focus, html.mllm-a11y-focus [tabindex]:focus, html.mllm-a11y-focus [role="button"]:focus, html.mllm-a11y-focus summary:focus { outline: 3px solid #1a73e8 !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(26, 115, 232, 0.35) !important; } /* ------------------------------------------------------------------------- * 5. Grayscale + 6. Invert — scoped to page content, NOT the toolbar. * * Applying the filter to the element would invert the toolbar too, * so we instead filter every direct child of except the toolbar. * ------------------------------------------------------------------------- */ html.mllm-a11y-grayscale body > *:not(#mllm-a11y) { -webkit-filter: grayscale(100%); filter: grayscale(100%); } html.mllm-a11y-invert body > *:not(#mllm-a11y) { -webkit-filter: invert(100%) hue-rotate(180deg); filter: invert(100%) hue-rotate(180deg); } /* Both at once: combine filters. */ html.mllm-a11y-grayscale.mllm-a11y-invert body > *:not(#mllm-a11y) { -webkit-filter: invert(100%) hue-rotate(180deg) grayscale(100%); filter: invert(100%) hue-rotate(180deg) grayscale(100%); } /* ------------------------------------------------------------------------- * Toolbar UI. * ------------------------------------------------------------------------- */ .mllm-a11y, .mllm-a11y * { box-sizing: border-box; } .mllm-a11y { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.4; } /* Launcher button. */ .mllm-a11y__launcher { position: fixed; bottom: 20px; left: 20px; z-index: 2147483000; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; margin: 0; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; background-color: var(--mllm-accent, #0a4ea3); color: #ffffff; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease, background-color 0.15s ease; } .mllm-a11y__launcher:hover { transform: scale(1.06); } .mllm-a11y__launcher:focus-visible, .mllm-a11y__launcher:focus { outline: 3px solid #ffffff; outline-offset: 3px; } .mllm-a11y__icon { display: block; } /* Panel. */ .mllm-a11y__panel { position: fixed; bottom: 86px; left: 20px; z-index: 2147483000; width: 300px; max-width: calc(100vw - 40px); max-height: calc(100vh - 110px); overflow-y: auto; padding: 0; border: 1px solid #d4d7dd; border-radius: 12px; background-color: #ffffff; color: #16181d; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); } .mllm-a11y__panel[hidden] { display: none; } .mllm-a11y__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e6e8ec; background-color: var(--mllm-accent, #0a4ea3); color: #ffffff; border-radius: 12px 12px 0 0; } .mllm-a11y__title { margin: 0; font-size: 16px; font-weight: 700; color: #ffffff; } .mllm-a11y__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #ffffff; font-size: 24px; line-height: 1; cursor: pointer; } .mllm-a11y__close:hover { background-color: rgba(255, 255, 255, 0.18); } .mllm-a11y__close:focus-visible, .mllm-a11y__close:focus { outline: 2px solid #ffffff; outline-offset: 2px; } .mllm-a11y__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; } .mllm-a11y__group { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid #e6e8ec; border-radius: 8px; } .mllm-a11y__group-title { font-size: 13px; font-weight: 600; color: #41454d; } .mllm-a11y__font-controls { display: flex; gap: 6px; } .mllm-a11y__btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #c7cbd2; border-radius: 8px; background-color: #f4f6f9; color: #16181d; font-size: 15px; font-weight: 500; text-align: center; cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease; } .mllm-a11y__btn:hover { background-color: #e7ebf1; } .mllm-a11y__btn:focus-visible, .mllm-a11y__btn:focus { outline: 3px solid var(--mllm-accent, #0a4ea3); outline-offset: 2px; } .mllm-a11y__btn--font { flex: 1 1 0; font-size: 16px; font-weight: 700; } /* Pressed (active) toggle state. */ .mllm-a11y__btn--toggle[aria-pressed="true"] { background-color: var(--mllm-accent, #0a4ea3); border-color: var(--mllm-accent, #0a4ea3); color: #ffffff; } .mllm-a11y__btn--toggle[aria-pressed="true"]::after { content: "\2713"; margin-left: 8px; font-weight: 700; } .mllm-a11y__btn--reset { margin-top: 4px; background-color: #fff; border-color: #c0392b; color: #c0392b; font-weight: 600; } .mllm-a11y__btn--reset:hover { background-color: #c0392b; color: #ffffff; } /* ------------------------------------------------------------------------- * Reduced motion. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .mllm-a11y__launcher, .mllm-a11y__btn { transition: none !important; } .mllm-a11y__launcher:hover { transform: none; } } /* ------------------------------------------------------------------------- * Small screens. * ------------------------------------------------------------------------- */ @media (max-width: 480px) { .mllm-a11y__panel { width: calc(100vw - 32px); left: 16px; bottom: 80px; } .mllm-a11y__launcher { left: 16px; bottom: 16px; } }