Jacek Pyziak
602e6a92fe
- Implemented high contrast mode toggle with state persistence. - Added blue filter toggle with visual effect and state persistence. - Introduced grayscale mode toggle with state persistence. - Included option to hide/show images with state persistence. - Added functionality to increase/decrease cursor size with visual feedback. - Enhanced font size controls with increment, decrement, and reset options. - Updated accessibility panel UI and button labels for clarity. - Ensured all new features are accessible and maintain user preferences across sessions.
1 line
1.7 KiB
CSS
1 line
1.7 KiB
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,#toggle-blue-filter,#toggle-grayscale,#toggle-images,#toggle-cursor{padding:10px;font-size:16px;cursor:pointer}body.hide-images img,body.hide-images picture,body.hide-images svg,body.hide-images video{display:none !important}html.grayscale{filter:grayscale(100%)}body.big-cursor-active,body.big-cursor-active *{cursor:none !important}#a11y-cursor{will-change:transform}.font-size-controls{display:grid;grid-auto-flow:column;gap:8px;align-items:center;margin-top:10px}.font-size-controls button{padding:6px 10px;border-radius:8px;border:1px solid #dcdcdc;background:#f7f7f7;cursor:pointer;font-weight:600}.font-size-controls button:hover{background:#efefef}.font-size-controls button:disabled{opacity:.55;cursor:not-allowed}#font-inc{font-size:1.05em}#font-dec{font-size:.95em}/*# sourceMappingURL=accessibility.css.map */ |