/* * This file is part of the local_ecosistema_accessibility plugin for Moodle. * @package local_ecosistema_accessibility * @copyright 2026 Ecosistema Project * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later * * All selectors are encapsulated: every rule is prefixed with .ecoacc- or * scoped under html.ecoacc-* classes so the plugin never leaks styles onto * the rest of the Moodle interface. */ /* ---------------------------------------------------------- adaptive vars */ /* * The panel and launcher adapt to the colors of the active Moodle theme. * JavaScript detects the theme colors and overrides these variables on the * element. The values below are the Ecosistema palette used as a * fallback when no theme colors can be detected or when the admin disabled * the adaptive behaviour. */ :root { --ecoacc-primary: #3F63FF; --ecoacc-on-primary: #FFFFFF; --ecoacc-primary-soft: #EEF2FF; --ecoacc-header: #000C4D; --ecoacc-on-header: #FFFFFF; --ecoacc-panel-bg: #FFFFFF; --ecoacc-surface: #F5F7FC; --ecoacc-surface-alt: #FFFFFF; --ecoacc-text: #172033; --ecoacc-text-muted: #5F6B7A; --ecoacc-border: #DDE3F0; --ecoacc-border-strong: #C4CDE0; --ecoacc-accent: #FC841C; --ecoacc-on-accent: #FFFFFF; --ecoacc-focus: #FC841C; --ecoacc-border-primary: rgba(63, 99, 255, 0.55); --ecoacc-ring-color: rgba(63, 99, 255, 0.55); --ecoacc-ring-color-strong: rgba(63, 99, 255, 0.45); --ecoacc-shadow-color: rgba(0, 12, 77, 0.35); --ecoacc-shadow-color-strong: rgba(0, 12, 77, 0.4); --ecoacc-panel-shadow: rgba(0, 12, 77, 0.28); --ecoacc-backdrop: rgba(0, 12, 77, 0.35); } /* ---------------------------------------------------------------- root vars */ .ecoacc-root, .ecoacc-panel { font-family: Gotham, Montserrat, "Segoe UI", Arial, sans-serif; color-scheme: light; } /* ------------------------------------------------------------- launcher btn */ .ecoacc-launcher { position: fixed; top: 60%; right: 12px; transform: translateY(-50%); z-index: 1200; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; margin: 0; border: 1px solid var(--ecoacc-border-primary); border-radius: 16px; background-color: var(--ecoacc-header); color: var(--ecoacc-on-header); box-shadow: 0 6px 20px var(--ecoacc-shadow-color), 0 0 0 0 var(--ecoacc-ring-color); cursor: pointer; -webkit-tap-highlight-color: transparent; } .ecoacc-launcher:hover, .ecoacc-launcher:focus-visible { border-color: var(--ecoacc-primary); box-shadow: 0 6px 20px var(--ecoacc-shadow-color-strong), 0 0 0 4px var(--ecoacc-ring-color-strong); } .ecoacc-launcher:focus-visible { outline: 3px solid var(--ecoacc-focus); outline-offset: 2px; } .ecoacc-launcher-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; } /* Fallback glyph used only if the panel is built by JavaScript */ .ecoacc-launcher-glyph { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; font-size: 22px; font-weight: 700; color: var(--ecoacc-on-header); } /* Hide the read-aloud section when the browser has no Web Speech API */ html.ecoacc-tts-unsupported .ecoacc-tts-section { display: none; } /* Native title attribute used as tooltip source via attr() */ .ecoacc-launcher-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ecoacc-launcher::before { content: attr(title); position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--ecoacc-header); color: var(--ecoacc-on-header); font-size: 13px; line-height: 1.3; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: opacity 0.15s ease; pointer-events: none; } .ecoacc-launcher:hover::before, .ecoacc-launcher:focus-visible::before { opacity: 1; visibility: visible; } /* Position variants applied by JS from admin settings */ html.ecoacc-pos-left .ecoacc-launcher { right: auto; left: 12px; } html.ecoacc-pos-left .ecoacc-launcher::before { right: auto; left: calc(100% + 10px); } html.ecoacc-v-top .ecoacc-launcher { top: 12px; transform: none; } html.ecoacc-v-bottom .ecoacc-launcher { top: auto; bottom: var(--ecoacc-bottomoffset, 96px); transform: none; } /* -------------------------------------------------------------- backdrop */ .ecoacc-panel-backdrop { position: fixed; inset: 0; z-index: 1190; background: var(--ecoacc-backdrop); } /* ---------------------------------------------------------------- panel */ .ecoacc-panel { position: fixed; top: 16px; bottom: 16px; right: 16px; z-index: 1200; width: 380px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; background: var(--ecoacc-panel-bg); color: var(--ecoacc-text); border: 1px solid var(--ecoacc-border); border-radius: 18px; box-shadow: 0 18px 48px var(--ecoacc-panel-shadow); opacity: 0; transform: translateX(24px); visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; overflow: hidden; } html.ecoacc-panel-open .ecoacc-panel { opacity: 1; transform: none; visibility: visible; transition: opacity 0.18s ease, transform 0.18s ease; } html.ecoacc-pos-left .ecoacc-panel { right: auto; left: 16px; transform: translateX(-24px); } html.ecoacc-pos-left.ecoacc-panel-open .ecoacc-panel { transform: none; } .ecoacc-panel-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; } /* ---------------------------------------------------------- panel header */ .ecoacc-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: var(--ecoacc-header); color: var(--ecoacc-on-header); flex: 0 0 auto; } .ecoacc-panel-title { margin: 0; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ecoacc-on-header); letter-spacing: 0.01em; } .ecoacc-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0; border: 1px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: var(--ecoacc-on-header); cursor: pointer; } .ecoacc-close:hover { background: rgba(255, 255, 255, 0.18); } .ecoacc-close:focus-visible { outline: 3px solid var(--ecoacc-focus); outline-offset: 2px; } /* ------------------------------------------------------------ panel body */ .ecoacc-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 8px; } .ecoacc-section { margin-bottom: 22px; } .ecoacc-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ecoacc-header); border-bottom: 1px solid var(--ecoacc-border); } .ecoacc-section-title::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--ecoacc-primary); } .ecoacc-fieldset { margin: 0 0 10px; padding: 0; border: 0; min-width: 0; } .ecoacc-legend { display: block; margin: 0 0 6px; font-size: 13px; color: var(--ecoacc-text-muted); } /* --------------------------------------------------------------- controls */ .ecoacc-btn-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ecoacc-btn { min-height: 44px; padding: 10px 14px; border: 1px solid var(--ecoacc-border); border-radius: 10px; background: var(--ecoacc-surface-alt); color: var(--ecoacc-text); font-family: Gotham, Montserrat, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.2; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ecoacc-btn:hover { background: var(--ecoacc-surface); border-color: var(--ecoacc-primary); } .ecoacc-btn:focus-visible { outline: 3px solid var(--ecoacc-focus); outline-offset: 2px; } .ecoacc-btn:disabled { opacity: 0.45; cursor: not-allowed; } .ecoacc-textsize { display: grid; grid-template-columns: 1fr 1fr 1fr; } .ecoacc-textsize .ecoacc-btn { font-weight: 700; text-align: center; } /* themes */ .ecoacc-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ecoacc-theme-btn { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ecoacc-border); border-radius: 10px; background: var(--ecoacc-surface-alt); color: var(--ecoacc-text); font-family: Gotham, Montserrat, "Segoe UI", Arial, sans-serif; font-size: 13px; cursor: pointer; text-align: left; transition: background 0.15s ease, border-color 0.15s ease; } .ecoacc-theme-btn:hover { background: var(--ecoacc-surface); } .ecoacc-theme-btn:focus-visible { outline: 3px solid var(--ecoacc-focus); outline-offset: 2px; } .ecoacc-theme-btn[aria-pressed="true"] { border-color: var(--ecoacc-primary); background: var(--ecoacc-primary-soft); color: var(--ecoacc-header); font-weight: 700; box-shadow: inset 0 0 0 1px var(--ecoacc-primary); } .ecoacc-theme-swatch { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--ecoacc-border); flex: 0 0 auto; } .ecoacc-swatch-default { background: linear-gradient(135deg, #FFFFFF 50%, #F5F7FC 50%); } .ecoacc-swatch-cream { background: linear-gradient(135deg, #FCF8EC 50%, #EFE3BE 50%); } .ecoacc-swatch-softblue { background: linear-gradient(135deg, #EDF3FF 50%, #C9D8F5 50%); } .ecoacc-swatch-highcontrast { background: linear-gradient(135deg, #FFFFFF 50%, #000000 50%); } .ecoacc-swatch-dark { background: linear-gradient(135deg, #1A2138 50%, #000C4D 50%); } /* segmented spacing controls */ .ecoacc-segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ecoacc-border); border-radius: 10px; overflow: hidden; } .ecoacc-seg-btn { min-height: 40px; padding: 8px 6px; border: 0; border-right: 1px solid var(--ecoacc-border); background: var(--ecoacc-surface-alt); color: var(--ecoacc-text); font-family: Gotham, Montserrat, "Segoe UI", Arial, sans-serif; font-size: 13px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .ecoacc-seg-btn:last-child { border-right: 0; } .ecoacc-seg-btn:hover { background: var(--ecoacc-surface); } .ecoacc-seg-btn:focus-visible { outline: 3px solid var(--ecoacc-focus); outline-offset: -3px; position: relative; z-index: 1; } .ecoacc-seg-btn[aria-pressed="true"] { background: var(--ecoacc-primary); color: var(--ecoacc-on-primary); font-weight: 700; } /* toggles */ .ecoacc-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 4px; margin: 2px 0; border: 0; background: transparent; color: var(--ecoacc-text); font-family: Gotham, Montserrat, "Segoe UI", Arial, sans-serif; font-size: 14px; text-align: left; cursor: pointer; } .ecoacc-toggle:focus-visible { outline: 3px solid var(--ecoacc-focus); outline-offset: 2px; border-radius: 8px; } .ecoacc-toggle-box { position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--ecoacc-border); border: 1px solid var(--ecoacc-border-strong); flex: 0 0 auto; transition: background 0.15s ease, border-color 0.15s ease; } .ecoacc-toggle-box::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.15s ease; } .ecoacc-toggle[aria-pressed="true"] .ecoacc-toggle-box { background: var(--ecoacc-primary); border-color: var(--ecoacc-primary); } .ecoacc-toggle[aria-pressed="true"] .ecoacc-toggle-box::after { left: 20px; } .ecoacc-tools-note { margin: -4px 0 10px 4px; font-size: 12px; color: var(--ecoacc-text-muted); } /* tts */ .ecoacc-tts-actions .ecoacc-btn { flex: 1 1 auto; text-align: center; } .ecoacc-tts-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; } .ecoacc-tts-label { flex: 0 0 auto; width: 86px; font-size: 13px; color: var(--ecoacc-text-muted); } .ecoacc-tts-select { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1px solid var(--ecoacc-border); border-radius: 8px; background: var(--ecoacc-surface-alt); color: var(--ecoacc-text); font-size: 13px; } .ecoacc-tts-select:focus-visible { outline: 3px solid var(--ecoacc-focus); outline-offset: 1px; } .ecoacc-tts-range { flex: 1 1 auto; accent-color: var(--ecoacc-primary); min-height: 40px; cursor: pointer; } .ecoacc-tts-output { flex: 0 0 40px; text-align: right; font-size: 13px; font-weight: 700; color: var(--ecoacc-header); } .ecoacc-tts-note { margin: 8px 0 0; font-size: 12px; color: var(--ecoacc-text-muted); } .ecoacc-tts-status { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--ecoacc-header); } /* reset */ .ecoacc-reset { width: 100%; min-height: 46px; padding: 12px; border: 1px solid var(--ecoacc-accent); border-radius: 10px; background: var(--ecoacc-surface-alt); color: var(--ecoacc-header); font-family: Gotham, Montserrat, "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .ecoacc-reset:hover { background: var(--ecoacc-accent); color: var(--ecoacc-on-accent); } .ecoacc-reset:focus-visible { outline: 3px solid var(--ecoacc-header); outline-offset: 2px; } /* ------------------------------------------------------------ panel footer */ .ecoacc-panel-footer { flex: 0 0 auto; padding: 12px 20px; border-top: 1px solid var(--ecoacc-border); background: var(--ecoacc-surface); } .ecoacc-footer-note { font-size: 12px; color: var(--ecoacc-text-muted); } /* -------------------------------------------------------- no page scroll */ html.ecoacc-no-scroll body { overflow: hidden; } /* ======================================================================== TEXT SIZE (safe, gradual scaling) ======================================================================== */ html.ecoacc-step-neg3 { font-size: 87.5%; } html.ecoacc-step-neg2 { font-size: 93.75%; } html.ecoacc-step-neg1 { font-size: 96.875%; } html.ecoacc-step-1 { font-size: 106.25%; } html.ecoacc-step-2 { font-size: 112.5%; } html.ecoacc-step-3 { font-size: 118.75%; } html.ecoacc-step-neg3 body { font-size: 13.125px !important; } html.ecoacc-step-neg2 body { font-size: 14.0625px !important; } html.ecoacc-step-neg1 body { font-size: 14.5313px !important; } html.ecoacc-step-1 body { font-size: 15.9375px !important; } html.ecoacc-step-2 body { font-size: 16.875px !important; } html.ecoacc-step-3 body { font-size: 17.8125px !important; } /* ======================================================================== SPACING (moderate levels, never applied to code/editors) ======================================================================== */ html.ecoacc-letter-1 p, html.ecoacc-letter-1 li, html.ecoacc-letter-1 td, html.ecoacc-letter-1 th, html.ecoacc-letter-1 h1, html.ecoacc-letter-1 h2, html.ecoacc-letter-1 h3, html.ecoacc-letter-1 h4, html.ecoacc-letter-1 h5, html.ecoacc-letter-1 h6, html.ecoacc-letter-1 label, html.ecoacc-letter-1 blockquote, html.ecoacc-letter-1 dd, html.ecoacc-letter-1 dt { letter-spacing: 0.05em; } html.ecoacc-letter-2 p, html.ecoacc-letter-2 li, html.ecoacc-letter-2 td, html.ecoacc-letter-2 th, html.ecoacc-letter-2 h1, html.ecoacc-letter-2 h2, html.ecoacc-letter-2 h3, html.ecoacc-letter-2 h4, html.ecoacc-letter-2 h5, html.ecoacc-letter-2 h6, html.ecoacc-letter-2 label, html.ecoacc-letter-2 blockquote, html.ecoacc-letter-2 dd, html.ecoacc-letter-2 dt { letter-spacing: 0.12em; } html.ecoacc-word-1 p, html.ecoacc-word-1 li, html.ecoacc-word-1 td, html.ecoacc-word-1 th, html.ecoacc-word-1 label, html.ecoacc-word-1 blockquote, html.ecoacc-word-1 dd, html.ecoacc-word-1 dt { word-spacing: 0.16em; } html.ecoacc-word-2 p, html.ecoacc-word-2 li, html.ecoacc-word-2 td, html.ecoacc-word-2 th, html.ecoacc-word-2 label, html.ecoacc-word-2 blockquote, html.ecoacc-word-2 dd, html.ecoacc-word-2 dt { word-spacing: 0.35em; } html.ecoacc-line-1 body, html.ecoacc-line-1 p, html.ecoacc-line-1 li, html.ecoacc-line-1 td, html.ecoacc-line-1 th, html.ecoacc-line-1 dd, html.ecoacc-line-1 dt, html.ecoacc-line-1 blockquote, html.ecoacc-line-1 figcaption, html.ecoacc-line-1 label { line-height: 1.6 !important; } html.ecoacc-line-2 body, html.ecoacc-line-2 p, html.ecoacc-line-2 li, html.ecoacc-line-2 td, html.ecoacc-line-2 th, html.ecoacc-line-2 dd, html.ecoacc-line-2 dt, html.ecoacc-line-2 blockquote, html.ecoacc-line-2 figcaption, html.ecoacc-line-2 label { line-height: 1.8 !important; } /* ======================================================================== LINKS AND FOCUS ======================================================================== */ html.ecoacc-underline-links a { text-decoration: underline !important; } html.ecoacc-underline-links .atto_editor a, html.ecoacc-underline-links [contenteditable="true"] a, html.ecoacc-underline-links .tox a, html.ecoacc-underline-links .ecoacc-root a { text-decoration: none !important; } html.ecoacc-focus-visible a:focus, html.ecoacc-focus-visible a:focus-visible, html.ecoacc-focus-visible button:focus, html.ecoacc-focus-visible button:focus-visible, html.ecoacc-focus-visible input:focus, html.ecoacc-focus-visible input:focus-visible, html.ecoacc-focus-visible select:focus, html.ecoacc-focus-visible select:focus-visible, html.ecoacc-focus-visible textarea:focus, html.ecoacc-focus-visible textarea:focus-visible, html.ecoacc-focus-visible [tabindex]:focus, html.ecoacc-focus-visible [tabindex]:focus-visible { outline: 3px solid var(--ecoacc-focus) !important; outline-offset: 2px !important; } /* ======================================================================== READABLE FONT ======================================================================== */ html.ecoacc-readable-font body, html.ecoacc-readable-font h1, html.ecoacc-readable-font h2, html.ecoacc-readable-font h3, html.ecoacc-readable-font h4, html.ecoacc-readable-font h5, html.ecoacc-readable-font h6, html.ecoacc-readable-font p, html.ecoacc-readable-font a, html.ecoacc-readable-font li, html.ecoacc-readable-font td, html.ecoacc-readable-font th, html.ecoacc-readable-font caption, html.ecoacc-readable-font legend, html.ecoacc-readable-font label, html.ecoacc-readable-font blockquote, html.ecoacc-readable-font dd, html.ecoacc-readable-font dt, html.ecoacc-readable-font input, html.ecoacc-readable-font select, html.ecoacc-readable-font textarea, html.ecoacc-readable-font button, html.ecoacc-readable-font .btn { font-family: Arial, Verdana, Tahoma, sans-serif !important; } /* ======================================================================== GRAYSCALE - applied to content wrappers only, never to the launcher/panel ======================================================================== */ html.ecoacc-grayscale #page-wrapper, html.ecoacc-grayscale #page-content, html.ecoacc-grayscale #region-main, html.ecoacc-grayscale #page-header, html.ecoacc-grayscale #page-footer, html.ecoacc-grayscale #nav-drawer, html.ecoacc-grayscale #right-drawer, html.ecoacc-grayscale .drawer, html.ecoacc-grayscale .modal, html.ecoacc-grayscale .modal-backdrop, html.ecoacc-grayscale .popover, html.ecoacc-grayscale .tooltip { filter: grayscale(100%); } /* ======================================================================== REDUCE ANIMATIONS ======================================================================== */ html.ecoacc-reduce-motion *, html.ecoacc-reduce-motion *::before, html.ecoacc-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ======================================================================== LARGER CURSOR (self-contained data-URI SVG, no external assets) ======================================================================== */ html.ecoacc-large-cursor * { cursor: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M5.5%203.21V20.8c0%20.45.54.67.85.35l4.86-4.86a.5.5%200%200%201%20.35-.15h6.87a.5.5%200%200%200%20.35-.85L6.35%202.85a.5.5%200%200%200-.85.36z%22%20fill=%22%23fff%22%20stroke=%22%23000%22%20stroke-width=%221.6%22/%3E%3Cpath%20d=%22M5.5%203.21V20.8c0%20.45.54.67.85.35l4.86-4.86a.5.5%200%200%201%20.35-.15h6.87a.5.5%200%200%200%20.35-.85L6.35%202.85a.5.5%200%200%200-.85.36z%22%20fill=%22%23000%22/%3E%3C/svg%3E') 1 1, auto; } html.ecoacc-large-cursor a, html.ecoacc-large-cursor button, html.ecoacc-large-cursor input[type="submit"], html.ecoacc-large-cursor input[type="button"], html.ecoacc-large-cursor [role="button"] { cursor: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M5.5%203.21V20.8c0%20.45.54.67.85.35l4.86-4.86a.5.5%200%200%201%20.35-.15h6.87a.5.5%200%200%200%20.35-.85L6.35%202.85a.5.5%200%200%200-.85.36z%22%20fill=%22%23fff%22%20stroke=%22%23000%22%20stroke-width=%221.6%22/%3E%3Cpath%20d=%22M5.5%203.21V20.8c0%20.45.54.67.85.35l4.86-4.86a.5.5%200%200%201%20.35-.15h6.87a.5.5%200%200%200%20.35-.85L6.35%202.85a.5.5%200%200%200-.85.36z%22%20fill=%22%23000%22/%3E%3C/svg%3E') 1 1, pointer; } /* ======================================================================== VISUAL THEMES ======================================================================== */ /* ------------------------------- cream ------------------------------- */ html.ecoacc-theme-cream body { background-color: #FCF8EC !important; color: #3D3220 !important; } html.ecoacc-theme-cream h1, html.ecoacc-theme-cream h2, html.ecoacc-theme-cream h3, html.ecoacc-theme-cream h4, html.ecoacc-theme-cream h5, html.ecoacc-theme-cream h6 { color: #5C4420 !important; } html.ecoacc-theme-cream a { color: #1B4E7A !important; } html.ecoacc-theme-cream .text-muted { color: #6B5D3E !important; } html.ecoacc-theme-cream .card, html.ecoacc-theme-cream .block { background: #FFFDF5 !important; border-color: #E6D9BC !important; } /* ------------------------------- soft blue --------------------------- */ html.ecoacc-theme-softblue body { background-color: #EDF3FF !important; color: #0F2147 !important; } html.ecoacc-theme-softblue h1, html.ecoacc-theme-softblue h2, html.ecoacc-theme-softblue h3, html.ecoacc-theme-softblue h4, html.ecoacc-theme-softblue h5, html.ecoacc-theme-softblue h6 { color: #000C4D !important; } html.ecoacc-theme-softblue a { color: #3F63FF !important; } html.ecoacc-theme-softblue .text-muted { color: #42567D !important; } html.ecoacc-theme-softblue .card, html.ecoacc-theme-softblue .block { background: #FFFFFF !important; border-color: #C9D8F5 !important; } /* ------------------------------- high contrast ---------------------- */ html.ecoacc-theme-highcontrast body { background-color: #FFFFFF !important; color: #000000 !important; } html.ecoacc-theme-highcontrast h1, html.ecoacc-theme-highcontrast h2, html.ecoacc-theme-highcontrast h3, html.ecoacc-theme-highcontrast h4, html.ecoacc-theme-highcontrast h5, html.ecoacc-theme-highcontrast h6, html.ecoacc-theme-highcontrast p, html.ecoacc-theme-highcontrast li, html.ecoacc-theme-highcontrast td, html.ecoacc-theme-highcontrast th, html.ecoacc-theme-highcontrast label, html.ecoacc-theme-highcontrast legend, html.ecoacc-theme-highcontrast blockquote, html.ecoacc-theme-highcontrast dd, html.ecoacc-theme-highcontrast dt { color: #000000 !important; } html.ecoacc-theme-highcontrast a { color: #0000EE !important; text-decoration: underline !important; } html.ecoacc-theme-highcontrast a:visited { color: #551A8B !important; } html.ecoacc-theme-highcontrast .text-muted { color: #000000 !important; } html.ecoacc-theme-highcontrast .card, html.ecoacc-theme-highcontrast .block, html.ecoacc-theme-highcontrast .navbar, html.ecoacc-theme-highcontrast #nav-drawer, html.ecoacc-theme-highcontrast #right-drawer, html.ecoacc-theme-highcontrast .modal-content, html.ecoacc-theme-highcontrast .popover, html.ecoacc-theme-highcontrast .dropdown-menu { background: #FFFFFF !important; color: #000000 !important; border: 2px solid #000000 !important; } html.ecoacc-theme-highcontrast .btn, html.ecoacc-theme-highcontrast .form-control, html.ecoacc-theme-highcontrast input, html.ecoacc-theme-highcontrast select, html.ecoacc-theme-highcontrast textarea { background: #FFFFFF !important; color: #000000 !important; border: 2px solid #000000 !important; } html.ecoacc-theme-highcontrast .table, html.ecoacc-theme-highcontrast .table th, html.ecoacc-theme-highcontrast .table td { color: #000000 !important; border-color: #000000 !important; background: transparent !important; } /* ------------------------------- dark -------------------------------- */ html.ecoacc-theme-dark { background-color: #0F1423; } html.ecoacc-theme-dark body { background-color: #0F1423 !important; color: #E6EAF5 !important; } html.ecoacc-theme-dark h1, html.ecoacc-theme-dark h2, html.ecoacc-theme-dark h3, html.ecoacc-theme-dark h4, html.ecoacc-theme-dark h5, html.ecoacc-theme-dark h6 { color: #FFFFFF !important; } html.ecoacc-theme-dark a { color: #7FA0FF !important; } html.ecoacc-theme-dark .text-muted { color: #A8B1C7 !important; } html.ecoacc-theme-dark .navbar { background-color: #000C4D !important; } html.ecoacc-theme-dark .navbar a, html.ecoacc-theme-dark .navbar .nav-link, html.ecoacc-theme-dark .navbar .dropdown-toggle { color: #DCE4FF !important; } html.ecoacc-theme-dark #page-header { background: #1A2138 !important; border-color: #2C3550 !important; color: #E6EAF5 !important; } html.ecoacc-theme-dark #page-wrapper { background: #0F1423 !important; } html.ecoacc-theme-dark #region-main, html.ecoacc-theme-dark #region-main-settings-menu { background: transparent !important; } html.ecoacc-theme-dark .card, html.ecoacc-theme-dark .block, html.ecoacc-theme-dark .card-body, html.ecoacc-theme-dark .block .content { background: #1A2138 !important; color: #E6EAF5 !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .card-header, html.ecoacc-theme-dark .card-footer, html.ecoacc-theme-dark .block .header { background: #222B47 !important; color: #E6EAF5 !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .card-header h3, html.ecoacc-theme-dark .block .header h3, html.ecoacc-theme-dark .card-header h2, html.ecoacc-theme-dark .block .header h2 { color: #FFFFFF !important; } html.ecoacc-theme-dark .table, html.ecoacc-theme-dark .table th, html.ecoacc-theme-dark .table td { color: #E6EAF5 !important; border-color: #2C3550 !important; background: transparent !important; } html.ecoacc-theme-dark .table thead th { background: #222B47 !important; } html.ecoacc-theme-dark .form-control, html.ecoacc-theme-dark input[type="text"], html.ecoacc-theme-dark input[type="password"], html.ecoacc-theme-dark input[type="email"], html.ecoacc-theme-dark input[type="search"], html.ecoacc-theme-dark input[type="number"], html.ecoacc-theme-dark select, html.ecoacc-theme-dark textarea { background: #0C1220 !important; color: #E6EAF5 !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .form-control::placeholder { color: #A8B1C7 !important; } html.ecoacc-theme-dark .btn, html.ecoacc-theme-dark .btn-secondary { background: #222B47 !important; color: #E6EAF5 !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .btn-primary { background: #3F63FF !important; color: #FFFFFF !important; border-color: #3F63FF !important; } html.ecoacc-theme-dark .dropdown-menu, html.ecoacc-theme-dark .popover, html.ecoacc-theme-dark .popover-header, html.ecoacc-theme-dark .popover-body { background: #1A2138 !important; color: #E6EAF5 !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .dropdown-item { color: #E6EAF5 !important; } html.ecoacc-theme-dark .dropdown-item:hover, html.ecoacc-theme-dark .dropdown-item:focus { background: #222B47 !important; color: #FFFFFF !important; } html.ecoacc-theme-dark .modal-content, html.ecoacc-theme-dark .modal-header, html.ecoacc-theme-dark .modal-body, html.ecoacc-theme-dark .modal-footer { background: #1A2138 !important; color: #E6EAF5 !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .modal-header .close { color: #E6EAF5 !important; } html.ecoacc-theme-dark #nav-drawer, html.ecoacc-theme-dark #right-drawer, html.ecoacc-theme-dark .drawer { background: #1A2138 !important; color: #E6EAF5 !important; } html.ecoacc-theme-dark #nav-drawer .nav-link { color: #E6EAF5 !important; } html.ecoacc-theme-dark .breadcrumb { background: transparent !important; } html.ecoacc-theme-dark .breadcrumb-item, html.ecoacc-theme-dark .breadcrumb-item.active { color: #A8B1C7 !important; } html.ecoacc-theme-dark .nav-tabs, html.ecoacc-theme-dark .nav-tabs .nav-link { border-color: #2C3550 !important; } html.ecoacc-theme-dark .nav-tabs .nav-link { color: #E6EAF5 !important; background: transparent !important; } html.ecoacc-theme-dark .nav-tabs .nav-link.active { background: #1A2138 !important; color: #FFFFFF !important; } html.ecoacc-theme-dark .list-group, html.ecoacc-theme-dark .list-group-item { background: #1A2138 !important; color: #E6EAF5 !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .page-link { background: #1A2138 !important; color: #7FA0FF !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .page-item.active .page-link { background: #3F63FF !important; color: #FFFFFF !important; } html.ecoacc-theme-dark .alert { background: #222B47 !important; color: #E6EAF5 !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .alert-success { color: #7FE0A8 !important; } html.ecoacc-theme-dark .alert-danger { color: #FF9D9D !important; } html.ecoacc-theme-dark .alert-warning { color: #FFD479 !important; } html.ecoacc-theme-dark .alert-info { color: #9FC2FF !important; } html.ecoacc-theme-dark #page-footer { background: #0A0E1A !important; color: #A8B1C7 !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .que .formulation, html.ecoacc-theme-dark .que .qtext, html.ecoacc-theme-dark .que .answer, html.ecoacc-theme-dark .forumpost, html.ecoacc-theme-dark .forumpost .header { background: #1A2138 !important; color: #E6EAF5 !important; border-color: #2C3550 !important; } html.ecoacc-theme-dark .book .book_toc, html.ecoacc-theme-dark .book .book_chapter { background: transparent !important; color: #E6EAF5 !important; } html.ecoacc-theme-dark img, html.ecoacc-theme-dark video, html.ecoacc-theme-dark canvas, html.ecoacc-theme-dark iframe { filter: none !important; } /* ======================================================================== PANEL THEME IMMUNITY - the accessibility panel keeps its own readable appearance even when a visual theme (cream, softblue, high contrast or dark) is applied to the rest of the page. ======================================================================== */ html.ecoacc-theme-cream .ecoacc-root, html.ecoacc-theme-softblue .ecoacc-root, html.ecoacc-theme-highcontrast .ecoacc-root, html.ecoacc-theme-dark .ecoacc-root { color: #172033 !important; } html.ecoacc-theme-cream .ecoacc-root h1, html.ecoacc-theme-cream .ecoacc-root h2, html.ecoacc-theme-cream .ecoacc-root h3, html.ecoacc-theme-softblue .ecoacc-root h1, html.ecoacc-theme-softblue .ecoacc-root h2, html.ecoacc-theme-softblue .ecoacc-root h3, html.ecoacc-theme-highcontrast .ecoacc-root h1, html.ecoacc-theme-highcontrast .ecoacc-root h2, html.ecoacc-theme-highcontrast .ecoacc-root h3, html.ecoacc-theme-dark .ecoacc-root h1, html.ecoacc-theme-dark .ecoacc-root h2, html.ecoacc-theme-dark .ecoacc-root h3 { color: inherit !important; } html.ecoacc-theme-cream .ecoacc-root a, html.ecoacc-theme-softblue .ecoacc-root a, html.ecoacc-theme-highcontrast .ecoacc-root a, html.ecoacc-theme-dark .ecoacc-root a { color: #3F63FF !important; text-decoration: underline !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-panel-title, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-panel-title, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-panel-title, html.ecoacc-theme-dark .ecoacc-root .ecoacc-panel-title { color: #FFFFFF !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-section-title, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-section-title, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-section-title, html.ecoacc-theme-dark .ecoacc-root .ecoacc-section-title { color: #000C4D !important; } html.ecoacc-theme-cream .ecoacc-root select, html.ecoacc-theme-softblue .ecoacc-root select, html.ecoacc-theme-highcontrast .ecoacc-root select, html.ecoacc-theme-dark .ecoacc-root select, html.ecoacc-theme-cream .ecoacc-root input, html.ecoacc-theme-softblue .ecoacc-root input, html.ecoacc-theme-highcontrast .ecoacc-root input, html.ecoacc-theme-dark .ecoacc-root input { background: #FFFFFF !important; color: #172033 !important; border-color: #DDE3F0 !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-btn, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-btn, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-btn, html.ecoacc-theme-dark .ecoacc-root .ecoacc-btn { background: #FFFFFF !important; color: #172033 !important; border-color: #DDE3F0 !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-btn[aria-pressed="true"], html.ecoacc-theme-softblue .ecoacc-root .ecoacc-btn[aria-pressed="true"], html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-btn[aria-pressed="true"], html.ecoacc-theme-dark .ecoacc-root .ecoacc-btn[aria-pressed="true"], html.ecoacc-theme-cream .ecoacc-root .ecoacc-seg-btn[aria-pressed="true"], html.ecoacc-theme-softblue .ecoacc-root .ecoacc-seg-btn[aria-pressed="true"], html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-seg-btn[aria-pressed="true"], html.ecoacc-theme-dark .ecoacc-root .ecoacc-seg-btn[aria-pressed="true"] { background: #3F63FF !important; color: #FFFFFF !important; border-color: #3F63FF !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-theme-btn, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-theme-btn, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-theme-btn, html.ecoacc-theme-dark .ecoacc-root .ecoacc-theme-btn { background: #FFFFFF !important; color: #172033 !important; border-color: #DDE3F0 !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-theme-btn[aria-pressed="true"], html.ecoacc-theme-softblue .ecoacc-root .ecoacc-theme-btn[aria-pressed="true"], html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-theme-btn[aria-pressed="true"], html.ecoacc-theme-dark .ecoacc-root .ecoacc-theme-btn[aria-pressed="true"] { border-color: #3F63FF !important; background: #EEF2FF !important; box-shadow: inset 0 0 0 1px #3F63FF !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-toggle, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-toggle, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-toggle, html.ecoacc-theme-dark .ecoacc-root .ecoacc-toggle { color: #172033 !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-toggle-box, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-toggle-box, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-toggle-box, html.ecoacc-theme-dark .ecoacc-root .ecoacc-toggle-box { background: #DDE3F0 !important; border-color: #C4CDE0 !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-toggle[aria-pressed="true"] .ecoacc-toggle-box, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-toggle[aria-pressed="true"] .ecoacc-toggle-box, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-toggle[aria-pressed="true"] .ecoacc-toggle-box, html.ecoacc-theme-dark .ecoacc-root .ecoacc-toggle[aria-pressed="true"] .ecoacc-toggle-box { background: #3F63FF !important; border-color: #3F63FF !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-reset, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-reset, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-reset, html.ecoacc-theme-dark .ecoacc-root .ecoacc-reset { background: #FFFFFF !important; color: #000C4D !important; border-color: #FC841C !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-panel-header, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-panel-header, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-panel-header, html.ecoacc-theme-dark .ecoacc-root .ecoacc-panel-header { background: #000C4D !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-close, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-close, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-close, html.ecoacc-theme-dark .ecoacc-root .ecoacc-close { color: #FFFFFF !important; } html.ecoacc-theme-cream .ecoacc-root .ecoacc-tts-output, html.ecoacc-theme-softblue .ecoacc-root .ecoacc-tts-output, html.ecoacc-theme-highcontrast .ecoacc-root .ecoacc-tts-output, html.ecoacc-theme-dark .ecoacc-root .ecoacc-tts-output { color: #000C4D !important; } /* ======================================================================== DRAWER COMPATIBILITY ======================================================================== */ @media (min-width: 992px) { html.ecoacc-drawer-open .ecoacc-launcher { right: 262px; } html.ecoacc-pos-left.ecoacc-drawer-open .ecoacc-launcher { right: auto; left: 262px; } html.ecoacc-drawer-open .ecoacc-panel { right: 266px; } html.ecoacc-pos-left.ecoacc-drawer-open .ecoacc-panel { right: auto; left: 266px; } } /* ======================================================================== RESPONSIVE ======================================================================== */ @media (max-width: 767.98px) { .ecoacc-launcher { right: 8px; width: 52px; height: 52px; } .ecoacc-launcher-icon { width: 52px; height: 52px; } html.ecoacc-pos-left .ecoacc-launcher { right: auto; left: 8px; } .ecoacc-panel { top: 8px; bottom: 8px; left: 8px; right: 8px; width: auto; max-width: none; border-radius: 14px; } html.ecoacc-pos-left .ecoacc-panel { left: 8px; right: 8px; } .ecoacc-panel-body { padding: 16px 16px 8px; } } /* ======================================================================== PREFERS-REDUCED-MOTION (always respected for the plugin's own UI) ======================================================================== */ @media (prefers-reduced-motion: reduce) { .ecoacc-launcher, .ecoacc-panel, .ecoacc-panel-backdrop, .ecoacc-launcher::before { transition: none !important; animation: none !important; } } /* ======================================================================== WINDOWS FORCED COLORS ======================================================================== */ @media (forced-colors: active) { .ecoacc-launcher, .ecoacc-panel, .ecoacc-btn, .ecoacc-theme-btn, .ecoacc-segmented, .ecoacc-seg-btn, .ecoacc-toggle-box, .ecoacc-tts-select, .ecoacc-reset { border: 1px solid CanvasText; } .ecoacc-toggle-box::after { background: CanvasText; } }