Jacek Pyziak
21f7e22fe2
- Introduced an accessibility button that toggles a panel with options. - Implemented high contrast mode toggle functionality. - Added CSS styles for accessibility button and panel. - Created JavaScript to manage accessibility features and local storage for user preferences. - Included necessary CSS and JS files in the theme's head template.
1 line
958 B
CSS
1 line
958 B
CSS
#accessibility-button{position:fixed;bottom:20px;right:20px;background:#6366f1;color:#fff;border-radius:50%;width:50px;height:50px;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9999;box-shadow:0 0 10px rgba(0,0,0,.2)}#accessibility-panel{position:fixed;top:0;right:0;width:280px;height:100%;background:#f9f9f9;box-shadow:-2px 0 10px rgba(0,0,0,.1);transform:translateX(100%);transition:transform .3s ease;z-index:9998;display:flex;flex-direction:column}#accessibility-panel #close-accessibility-panel{border:0;height:30px;width:30px;border-radius:6px}#accessibility-panel.open{transform:translateX(0)}.panel-header{display:flex;justify-content:space-between;align-items:center;background:#6366f1;color:#fff;padding:1rem;font-weight:bold}.panel-body{padding:1rem;display:flex;flex-direction:column;gap:10px}#toggle-contrast{padding:10px;font-size:16px;cursor:pointer}/*# sourceMappingURL=accessibility.css.map */ |