Enhance accessibility and styling for high-contrast mode

- Updated breadcrumb links to have white text and underline for better visibility.
- Adjusted product pricing styles to ensure discounts are clearly visible with contrasting colors.
- Improved visibility of product information and actions by setting text colors to white.
- Styled modal components to maintain high contrast with dark backgrounds and white text.
- Added styles for large cursor accessibility, ensuring visibility in both normal and high-contrast modes.
- Included optional drop-shadow for better visibility of the large cursor.
This commit is contained in:
2025-09-10 23:52:55 +02:00
parent d7fe875eb9
commit fa0f4b590b
4 changed files with 128 additions and 3 deletions

View File

@@ -98,7 +98,7 @@
},
"google-merchant_id-1.xml": {
"type": "-",
"size": 18784618,
"size": 18748057,
"lmtime": 0,
"modified": true
},

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1607,6 +1607,114 @@ body.high-contrast {
}
}
}
.breadcrumb {
li {
a {
color: #FFF !important;
text-decoration: underline;
}
}
}
.product-prices {
.product-discount {
color: #FFF !important;
margin-bottom: 10px;
}
}
.has-discount .discount {
background: #FFF !important;
color: #000 !important;
}
.gm_omniprice {
background: #000 !important;
color: #FFF !important;
span {
color: #FFF !important;
}
}
.product-information {
color: #FFF !important;
p {
color: #FFF !important;
}
}
.product-actions .control-label {
color: #FFF !important;
}
.scroll-box-arrows {
i {
color: #FFF !important;
}
}
#product-details .label {
color: #FFF !important
}
.thumbnail.product-thumbnail {
background: #FFF !important;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
color: #FFF !important;
}
#blockcart-modal {
.modal-header {
background: #000 !important;
button,
h4 {
color: #FFF !important;
span {
color: #FFF !important
}
}
}
.modal-body {
h6 {
color: #000 !important;
}
.btn-primary {
background: $cYellow !important;
color: #000 !important;
border: 0 !important;
}
.btn-secondary {
background: #000 !important;
color: #FFF !important;
border: 1px solid #FFF !important;
}
}
}
.product-cover img {
border-radius: 6px;
}
}
body.blue-filter {
@@ -1615,4 +1723,21 @@ body.blue-filter {
html.grayscale {
filter: grayscale(100%);
}
/* Domyślny wygląd dużego kursora */
#a11y-cursor svg * {
fill: #000;
/* czarny */
}
/* Gdy aktywny DUŻY KURSOR + high-contrast zmień kolor na żółty */
body.big-cursor.big-cursor-active.high-contrast #a11y-cursor svg * {
fill: #FFD400 !important;
/* żółty */
}
/* Opcjonalnie lekki cień dla lepszej widoczności */
body.big-cursor.big-cursor-active #a11y-cursor {
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
}