@reaktly-js/tone-accessibility/dist/tone.css

A vanilla JS Accessability Widget compliant with ADA and WCAG 2.2.

:root{--tone-primary-color: #007bff;--tone-primary-color-dark: #0056b3;--tone-accent-color: #0056b3;--tone-accent-light-bg: #e6f2ff;--tone-page-bg: #ffffff;--tone-menu-bg: #ffffff;--tone-bg-hover: #f8f9fa;--tone-bg-alt: #f5f5f5;--tone-text-primary: #212529;--tone-text-secondary: #6c757d;--tone-button-bg: #fff;--tone-button-text: #333;--tone-icon-color: #6c757d;--tone-border-color: #dee2e6;--tone-border-radius-sm: 6px;--tone-border-radius-md: 8px;--tone-border-radius-lg: 12px;--tone-shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--tone-shadow-md: rgba(0, 0, 0, .1) 0px 4px 6px -1px;--tone-shadow-sm: rgba(0, 0, 0, .05) 0px 1px 2px 0px;--tone-fab-size: 64px;--tone-fab-bottom-offset: 24px;--tone-fab-right-offset: 24px;--tone-fab-icon-size-multiplier: .85;--tone-fab-bg: var(--tone-primary-color);--tone-fab-hover-bg: var(--tone-primary-color-dark);--tone-fab-active-bg: var(--tone-primary-color-dark);--tone-fab-text-color: white;--tone-fab-padding: 0;--tone-fab-border-radius: 50%;--tone-fab-font-size: 24px;--tone-fab-shadow: 0 4px 12px rgba(0, 0, 0, .15);--tone-fab-hover-shadow: 0 6px 16px rgba(0, 0, 0, .2);--tone-fab-icon-size: 60%;--tone-fab-icon-transition: transform .6s ease-in-out;--tone-fab-active-icon-transform: rotate(360deg);--tone-transition-duration-base: .6s;--tone-transition-timing-function-base: ease-in-out;--tone-font-scale: 1;--tone-highlight-underline-color: blue;--tone-highlight-bold-color: #c0392b;--tone-highlight-background-color: #ffe0b2;--tone-highlight-background-border-color: #ffa000}#tone-widget-container{all:initial!important;box-sizing:border-box!important;position:fixed!important;z-index:9998!important;font-family:sans-serif!important;font-size:16px!important;line-height:1.5!important;letter-spacing:normal!important;word-spacing:normal!important;overflow:visible!important;transform:none!important;filter:none!important;color-scheme:light!important;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}#tone-widget-container *{font-size:initial!important;line-height:initial!important;letter-spacing:initial!important;word-spacing:initial!important}html:not(#tone-widget-container){font-size:calc(16px * var(--tone-font-scale, 1))!important}html[data-tone-appearance=high-contrast]{--tone-menu-bg: #000000 !important;--tone-border-color: #ffffff !important;--tone-shadow-lg: none !important;--tone-text-primary: #ffffff !important;--tone-text-secondary: #cccccc !important;--tone-bg-hover: #333333 !important;--tone-icon-color: #ffffff !important;--tone-accent-color: #ffff00 !important;--tone-accent-light-bg: #333333 !important}html[data-tone-appearance=high-contrast] .tone-reading-mask{background-color:#fff3!important}html[data-tone-appearance=high-contrast] .tone-reading-guide{background-color:#ff0!important}html[data-tone-appearance=high-contrast] body,html[data-tone-appearance=high-contrast] h1,html[data-tone-appearance=high-contrast] h2,html[data-tone-appearance=high-contrast] h3,html[data-tone-appearance=high-contrast] h4,html[data-tone-appearance=high-contrast] h5,html[data-tone-appearance=high-contrast] h6,html[data-tone-appearance=high-contrast] p,html[data-tone-appearance=high-contrast] span,html[data-tone-appearance=high-contrast] div,html[data-tone-appearance=high-contrast] li,html[data-tone-appearance=high-contrast] td,html[data-tone-appearance=high-contrast] th{background-color:#000!important;color:#fff!important}html[data-tone-appearance=high-contrast] a{color:#ff0!important;text-decoration:underline!important}html[data-tone-appearance=high-contrast] button{background-color:transparent!important;color:#fff!important;border:2px solid #ffffff!important}html[data-tone-appearance=high-contrast] input,html[data-tone-appearance=high-contrast] textarea,html[data-tone-appearance=high-contrast] select{background-color:#000!important;color:#fff!important;border:1px solid #ffffff!important}html[data-tone-images-hidden=true] img,html[data-tone-images-hidden=true] video,html[data-tone-images-hidden=true] svg{display:none!important}html[data-tone-line-height="1.5"] body:not(#tone-widget-container),html[data-tone-line-height="1.5"] body:not(#tone-widget-container *){line-height:1.5!important}html[data-tone-line-height="1.75"] body:not(#tone-widget-container),html[data-tone-line-height="1.75"] body:not(#tone-widget-container *){line-height:1.75!important}html[data-tone-line-height="2.0"] body:not(#tone-widget-container),html[data-tone-line-height="2.0"] body:not(#tone-widget-container *){line-height:2!important}html[data-tone-text-spacing=medium] body:not(#tone-widget-container),html[data-tone-text-spacing=medium] body:not(#tone-widget-container *){letter-spacing:.05em!important;word-spacing:.1em!important}html[data-tone-text-spacing=large] body:not(#tone-widget-container),html[data-tone-text-spacing=large] body:not(#tone-widget-container *){letter-spacing:.1em!important;word-spacing:.2em!important}html[data-tone-highlight-links] a:not(#tone-widget-container),html[data-tone-highlight-links] a:not(#tone-widget-container *){text-decoration:initial;color:initial;background-color:initial;padding:initial;border-radius:initial;box-shadow:initial;font-weight:initial}html[data-tone-highlight-links=underline] a:not(#tone-widget-container),html[data-tone-highlight-links=underline] a:not(#tone-widget-container *){text-decoration:underline!important;text-decoration-color:var(--tone-highlight-underline-color)!important;text-decoration-thickness:2px!important;text-underline-offset:3px!important}html[data-tone-highlight-links=bold] a:not(#tone-widget-container),html[data-tone-highlight-links=bold] a:not(#tone-widget-container *){font-weight:700!important;color:var(--tone-highlight-bold-color)!important}html[data-tone-highlight-links=background] a:not(#tone-widget-container),html[data-tone-highlight-links=background] a:not(#tone-widget-container *){background-color:var(--tone-highlight-background-color)!important;padding:0 2px!important;border-radius:3px!important;box-shadow:0 0 0 1px var(--tone-highlight-background-border-color)!important}.tone-reading-mask{position:fixed;left:0;width:100%;background-color:#0009;pointer-events:none;z-index:9999;display:none;transition:height .1s ease-out}.tone-reading-mask.top{top:0}.tone-reading-mask.bottom{bottom:0}.tone-reading-guide{position:fixed;left:0;width:100%;height:4px;background-color:var(--tone-primary-color);pointer-events:none;z-index:9998;display:none;transform:translateY(-50%);transition:top .1s ease-out}:root{--cursor-svg-light: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="white" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l16 6.5-6.1 1.6a2 2 0 0 0-1.4 1.4L10.5 20z"/></svg>')}html[data-tone-accessibility-cursor=big-cursor] *{cursor:var(--cursor-svg-light) 4 2,auto!important}@media (prefers-color-scheme: dark){html[data-tone-accessibility-cursor=big-cursor] *{cursor:var(--cursor-svg-light) 4 2,auto!important}}@media (prefers-contrast: high){html[data-tone-accessibility-cursor=big-cursor] *{cursor:var(--cursor-svg-light) 4 2,auto!important}}@keyframes tone-flash-animation{0%{background-color:transparent}50%{background-color:#ff06;box-shadow:0 0 8px #ff06}to{background-color:transparent}}.tone-is-translating{animation:tone-flash-animation .8s ease-in-out;background-clip:padding-box;border-radius:3px}