/* This file is part of Moodle - https://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see . */
/**
* Plugin version and other meta-data are defined here.
*
* @package local_accessibility
* @copyright 2023 Ponlawat Weerapanpisit
* @license https://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
/* ============================================================
Profile CSS-only effects (highcontrast, highsaturation,
lowsaturation, stopanimations, bigcursor) + reading guide/mask.
============================================================ */
/* Filter is applied to #page (Moodle's content wrapper), not body.
The FAB/panel are moved to be direct children of precisely
to escape page-level filters — putting the filter on body itself
would make body a new containing block for their position:fixed,
breaking their viewport-relative positioning. */
#page.accessibility-highcontrast {
filter: contrast(1.6) !important;
}
#page.accessibility-highsaturation {
filter: saturate(2.2) !important;
}
#page.accessibility-lowsaturation {
filter: saturate(0.35) !important;
}
/* CSS filter on #page makes #page the containing block for any
position:absolute/fixed descendant that previously had none closer
(filter behaves like transform for this purpose). Elements positioned
with top+bottom (e.g. mod_assign's grader side panel) compute their
height from their containing block's height; if #page is shorter than
the viewport, that height calculation goes wrong (often to ~0),
hiding the content. Rather than patch each affected Moodle panel
individually with hardcoded offsets (fragile — those offsets vary by
layout/breakpoint), just make #page's own height match the viewport
it would have had as a containing block without the filter. This is
pure CSS, no DOM changes, so it can't break Atto/event delegation the
way moving panels out of #page did. */
#page.accessibility-highcontrast,
#page.accessibility-highsaturation,
#page.accessibility-lowsaturation {
min-height: 100vh;
}
/* Snap animations/transitions to their end state instead of pausing
mid-frame — pausing can freeze fade-in content (e.g. SCORM/Storyline
slides) at opacity:0, making it look like nothing rendered. */
body.accessibility-stopanimations *,
body.accessibility-stopanimations *::before,
body.accessibility-stopanimations *::after {
animation-duration: 0.01ms !important;
animation-delay: -1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
body.accessibility-bigcursor,
body.accessibility-bigcursor * {
cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7.07 17.97 2.51-7.39 7.39-2.51z' fill='%23000' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 4, auto !important;
}
/* Reading guide: horizontal line that follows the cursor */
.acc-readingguide-el {
position: fixed;
left: 0;
width: 100%;
height: 2.5rem;
margin-top: -1.25rem;
background: rgba(255, 230, 0, 0.35);
border-top: 2px solid rgba(220, 170, 0, 0.8);
border-bottom: 2px solid rgba(220, 170, 0, 0.8);
pointer-events: none;
z-index: 100000;
}
/* Reading mask: dims everything except a band around the cursor */
.acc-mask {
position: fixed;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.65);
pointer-events: none;
z-index: 99999;
}
.acc-masktop {
top: 0;
}
.acc-maskbottom {
bottom: 0;
}
.local-accessibility-buttoncontainer {
position: fixed;
bottom: 130px;
right: 20px;
z-index: 1039;
}
body.dir-rtl .local-accessibility-buttoncontainer {
right: unset;
left: 2rem;
}
#page.drawers.show-drawer-right .local-accessibility-buttoncontainer {
right: calc(315px + 20px);
}
body.dir-rtl #page.drawers.show-drawer-right .local-accessibility-buttoncontainer {
right: unset;
left: calc(315px + 20px);
}
#local-accessibility-buttoncontainer button {
font-size: 16px;
width: 36px;
height: 36px;
line-height: 16px;
padding: 0;
text-align: center;
border-radius: 50%;
}
.local-accessibility-panel {
display: none;
position: fixed;
bottom: 8rem;
right: 2rem;
z-index: 1040;
box-shadow: 0 4px 24px rgba(20, 38, 145, 0.25) !important;
border: 2px solid #0046b8 !important;
border-radius: 12px !important;
overflow: hidden;
flex-direction: column;
/* Without a height cap, flex children never overflow, so .card-body's
overflow-y:auto never kicks in — the panel just grows past the
viewport instead of scrolling internally. */
max-height: calc(100vh - 10rem);
}
/* Override theme .card radius on panel */
.local-accessibility-panel.card {
border-radius: 12px !important;
}
body.dir-rtl .local-accessibility-panel {
right: unset;
left: 2rem;
}
/* Header icon — SVG has no intrinsic width/height, only viewBox. */
.local-accessibility-panel .uveg-a11y-icon-header {
width: 1.25rem;
height: 1.25rem;
flex: none;
}
/* Widget icons — source pix/icon.svg files ship hardcoded width/height
(e.g. 800px); CSS width/height on the inlined