/* * Webgig Accessibility Toolkit — front-end styles. * Hand-written, no build step. Self-contained: does not depend on the * active theme's CSS variables so it survives a theme switch. */ /* ------------------------------------------------------------------ */ /* Widget button + panel */ /* ------------------------------------------------------------------ */ .webgig-a11y { position: fixed; bottom: 20px; z-index: 999998; font-family: Arial, Helvetica, sans-serif; } .webgig-a11y--bottom-right { right: 20px; } .webgig-a11y--bottom-left { left: 20px; } .webgig-a11y__trigger { width: 52px; height: 52px; border-radius: 50%; background: var(--webgig-a11y-btn-bg, #0043D4); color: var(--webgig-a11y-btn-icon, #FFFFFF); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .webgig-a11y__trigger:focus-visible { outline: 3px solid var(--webgig-a11y-btn-icon, #FFFFFF); outline-offset: 2px; } .webgig-a11y__panel { position: absolute; bottom: 64px; width: 280px; max-width: calc(100vw - 40px); background: #0A0F24; color: #FFFFFF; border: 1px solid #2F4288; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); padding: 16px; } .webgig-a11y--bottom-right .webgig-a11y__panel { right: 0; } .webgig-a11y--bottom-left .webgig-a11y__panel { left: 0; } .webgig-a11y__panel[hidden] { display: none; } .webgig-a11y__panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .webgig-a11y__panel-title { font-size: 16px; margin: 0; } .webgig-a11y__close { background: none; border: none; color: #FFFFFF; cursor: pointer; padding: 4px; } .webgig-a11y__control { margin-bottom: 14px; } .webgig-a11y__control-label { display: block; font-size: 13px; margin-bottom: 6px; } .webgig-a11y__button-row { display: flex; flex-wrap: wrap; gap: 6px; } .webgig-a11y__button-row button { background: #1B2E66; color: #FFFFFF; border: 1px solid #2F4288; border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; } .webgig-a11y__button-row button[aria-pressed="true"] { background: var(--webgig-a11y-btn-bg, #0043D4); border-color: var(--webgig-a11y-btn-bg, #0043D4); } .webgig-a11y__toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .webgig-a11y__reset { width: 100%; background: transparent; color: #C4C6CC; border: 1px solid #2F4288; border-radius: 8px; padding: 8px; font-size: 13px; cursor: pointer; margin-top: 4px; } /* Keep the widget itself readable no matter which contrast mode is active. */ html.webgig-a11y-contrast-active .webgig-a11y, html.webgig-a11y-contrast-active .webgig-a11y * { background-color: revert !important; color: revert !important; border-color: revert !important; } /* ------------------------------------------------------------------ */ /* Contrast modes (High Contrast / Monochrome / Dark) */ /* JS sets --webgig-a11y-contrast-bg/text/link on from the */ /* chosen mode's saved settings before adding this class. */ /* ------------------------------------------------------------------ */ html.webgig-a11y-contrast-active body, html.webgig-a11y-contrast-active body * { background-color: var(--webgig-a11y-contrast-bg) !important; color: var(--webgig-a11y-contrast-text) !important; border-color: var(--webgig-a11y-contrast-text) !important; } html.webgig-a11y-contrast-active body a, html.webgig-a11y-contrast-active body a * { color: var(--webgig-a11y-contrast-link) !important; } html.webgig-a11y-contrast-active body img, html.webgig-a11y-contrast-active body svg, html.webgig-a11y-contrast-active body video, html.webgig-a11y-contrast-active body iframe { filter: none !important; } /* ------------------------------------------------------------------ */ /* Underline links */ /* ------------------------------------------------------------------ */ html.webgig-a11y-underline-links body a { text-decoration: underline !important; } /* ------------------------------------------------------------------ */ /* Reduce motion */ /* ------------------------------------------------------------------ */ html.webgig-a11y-reduce-motion, html.webgig-a11y-reduce-motion * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ------------------------------------------------------------------ */ /* Readable font */ /* ------------------------------------------------------------------ */ html.webgig-a11y-readable-font body, html.webgig-a11y-readable-font body * { font-family: Arial, Helvetica, "Segoe UI", sans-serif !important; }