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:
2
.vscode/ftp-kr.sync.cache.json
vendored
2
.vscode/ftp-kr.sync.cache.json
vendored
@@ -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
@@ -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));
|
||||
}
|
||||
Reference in New Issue
Block a user