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.
136 lines
2.1 KiB
SCSS
136 lines
2.1 KiB
SCSS
#accessibility-button {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
background: #6366f1;
|
||
color: white;
|
||
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, 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, 0.1);
|
||
transform: translateX(100%);
|
||
transition: transform 0.3s ease;
|
||
z-index: 9998;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
#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: white;
|
||
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;
|
||
}
|
||
|
||
/* Ukrywanie obrazów */
|
||
body.hide-images {
|
||
|
||
img,
|
||
picture,
|
||
svg,
|
||
video {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
/* Szarość */
|
||
html.grayscale {
|
||
filter: grayscale(100%);
|
||
}
|
||
|
||
/* Duży kursor – chowamy natywny kursor dopiero po pierwszym ruchu */
|
||
body.big-cursor-active {
|
||
|
||
&,
|
||
* {
|
||
cursor: none !important;
|
||
}
|
||
}
|
||
|
||
/* Overlay kursora */
|
||
#a11y-cursor {
|
||
will-change: transform;
|
||
}
|
||
|
||
/* Kontrolki rozmiaru czcionki */
|
||
.font-size-controls {
|
||
display: grid;
|
||
grid-auto-flow: column;
|
||
gap: 8px;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
|
||
button {
|
||
padding: 6px 10px;
|
||
border-radius: 8px;
|
||
border: 1px solid #dcdcdc;
|
||
background: #f7f7f7;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
|
||
&:hover {
|
||
background: #efefef;
|
||
}
|
||
|
||
&:disabled {
|
||
opacity: .55;
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Drobne różnice optyczne dla przycisków A− / A+ */
|
||
#font-inc {
|
||
font-size: 1.05em;
|
||
}
|
||
|
||
#font-dec {
|
||
font-size: 0.95em;
|
||
} |