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
1.9 KiB
Plaintext
1 line
1.9 KiB
Plaintext
{"version":3,"sources":["accessibility.scss"],"names":[],"mappings":"AAAA,sBACE,cAAA,CACA,WAAA,CACA,UAAA,CACA,kBAAA,CACA,UAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,cAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,cAAA,CACA,YAAA,CACA,kCAAA,CAGF,qBACE,cAAA,CACA,KAAA,CACA,OAAA,CACA,WAAA,CACA,WAAA,CACA,kBAAA,CACA,qCAAA,CACA,0BAAA,CACA,6BAAA,CACA,YAAA,CACA,YAAA,CACA,qBAAA,CAEA,gDACE,QAAA,CACA,WAAA,CACA,UAAA,CACA,iBAAA,CAIJ,0BACE,uBAAA,CAGF,cACE,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,kBAAA,CACA,UAAA,CACA,YAAA,CACA,gBAAA,CAGF,YACE,YAAA,CACA,YAAA,CACA,qBAAA,CACA,QAAA,CAGF,iBACE,YAAA,CACA,cAAA,CACA,cAAA","file":"accessibility.css","sourcesContent":["#accessibility-button {\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n background: #6366f1;\r\n color: white;\r\n border-radius: 50%;\r\n width: 50px;\r\n height: 50px;\r\n font-size: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: 9999;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n#accessibility-panel {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n width: 280px;\r\n height: 100%;\r\n background: #f9f9f9;\r\n box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);\r\n transform: translateX(100%);\r\n transition: transform 0.3s ease;\r\n z-index: 9998;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n #close-accessibility-panel {\r\n border: 0;\r\n height: 30px;\r\n width: 30px;\r\n border-radius: 6px;\r\n }\r\n}\r\n\r\n#accessibility-panel.open {\r\n transform: translateX(0);\r\n}\r\n\r\n.panel-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #6366f1;\r\n color: white;\r\n padding: 1rem;\r\n font-weight: bold;\r\n}\r\n\r\n.panel-body {\r\n padding: 1rem;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n}\r\n\r\n#toggle-contrast {\r\n padding: 10px;\r\n font-size: 16px;\r\n cursor: pointer;\r\n}"]} |