diff --git a/core/themes/olivero/css/components/comments.css b/core/themes/olivero/css/components/comments.css
index 5c02d575a890343d0f4a2130b47e0bc6ba879062..0c11dd371ede45c88c7ec9dd56d0ea91ca2800e4 100644
--- a/core/themes/olivero/css/components/comments.css
+++ b/core/themes/olivero/css/components/comments.css
@@ -142,7 +142,7 @@
/* @TODO: create image-style for profile's avatar to have image squared by default. */
}
-@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+@media all and (forced-colors: active), (forced-colors: active) {
.add-comment__picture img,
.comment__picture img {
position: absolute;
diff --git a/core/themes/olivero/css/components/comments.pcss.css b/core/themes/olivero/css/components/comments.pcss.css
index 042554affb184eba778ea6a6da82e626009dee5d..f35e5ae56ae02669581eb603edc10125311c8aff 100644
--- a/core/themes/olivero/css/components/comments.pcss.css
+++ b/core/themes/olivero/css/components/comments.pcss.css
@@ -127,7 +127,7 @@
object-fit: cover;
/* @TODO: create image-style for profile's avatar to have image squared by default. */
- @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ @media all and (forced-colors: active) , (forced-colors: active) {
position: absolute;
/* stylelint-disable csstools/use-logical */
top: 50%;
diff --git a/core/themes/olivero/css/components/fieldset.css b/core/themes/olivero/css/components/fieldset.css
index b51103c64f37b329e18ed5286b5c0b81b513d5e3..1efa3d86b21ba1105f0e6d035bf9cefd06b8d2f6 100644
--- a/core/themes/olivero/css/components/fieldset.css
+++ b/core/themes/olivero/css/components/fieldset.css
@@ -101,7 +101,7 @@
line-height: var(--line-height-s);
}
-@media screen and (-ms-high-contrast: active) {
+@media screen and (forced-colors: active) {
.fieldset__error-message {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
}
diff --git a/core/themes/olivero/css/components/fieldset.pcss.css b/core/themes/olivero/css/components/fieldset.pcss.css
index 6566f02bdfcb457ea02e1c46c5f6d9bb51c65a99..c653d7343febfbc8830ba81931b1484505544b06 100644
--- a/core/themes/olivero/css/components/fieldset.pcss.css
+++ b/core/themes/olivero/css/components/fieldset.pcss.css
@@ -99,7 +99,7 @@
font-size: var(--font-size-s);
line-height: var(--line-height-s);
- @media screen and (-ms-high-contrast: active) {
+ @media screen and (forced-colors: active) {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
}
}
diff --git a/core/themes/olivero/css/components/form.css b/core/themes/olivero/css/components/form.css
index 5f8675898806e93dad078188a9378a27e38ab80d..3b19c6e5333b8c7cdb257d19aab7932b3ef91364 100644
--- a/core/themes/olivero/css/components/form.css
+++ b/core/themes/olivero/css/components/form.css
@@ -96,7 +96,7 @@ tr .form-item,
background-size: 0.5rem 0.5rem;
}
-@media screen and (-ms-high-contrast: active) {
+@media screen and (forced-colors: active) {
.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.required-mark::after {
@@ -135,7 +135,7 @@ tr .form-item,
line-height: var(--line-height-s);
}
-@media screen and (-ms-high-contrast: active) {
+@media screen and (forced-colors: active) {
.form-item--error-message {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
}
diff --git a/core/themes/olivero/css/components/form.pcss.css b/core/themes/olivero/css/components/form.pcss.css
index 09628fbfd89aabddd2b492b3b6ff4850ddff9627..525e500dbc827be60491ccbaea691254482cad3e 100644
--- a/core/themes/olivero/css/components/form.pcss.css
+++ b/core/themes/olivero/css/components/form.pcss.css
@@ -85,7 +85,7 @@ tr .form-item,
background-repeat: no-repeat;
background-size: 0.5rem 0.5rem;
- @media screen and (-ms-high-contrast: active) {
+ @media screen and (forced-colors: active) {
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}
}
@@ -118,7 +118,7 @@ tr .form-item,
font-size: var(--font-size-s);
line-height: var(--line-height-s);
- @media screen and (-ms-high-contrast: active) {
+ @media screen and (forced-colors: active) {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
}
}
diff --git a/core/themes/olivero/css/components/header-search-narrow.css b/core/themes/olivero/css/components/header-search-narrow.css
index d69e3115dc2a4e1e98da770aa02409070f85600c..5c36bc17901779caacce68d6e8e5277ded6a7ab9 100644
--- a/core/themes/olivero/css/components/header-search-narrow.css
+++ b/core/themes/olivero/css/components/header-search-narrow.css
@@ -131,7 +131,7 @@
transform: scaleX(1);
}
-@media screen and (-ms-high-contrast: active) {
+@media screen and (forced-colors: active) {
.block-search-narrow .search-form__submit:focus {
border-bottom-width: var(--sp0-5);
}
@@ -147,7 +147,7 @@
}
}
-@media screen and (-ms-high-contrast: active) {
+@media screen and (forced-colors: active) {
/* IE11's high contrast show will not show the background image, so we show the text. */
.block-search-narrow .search-form__submit .visually-hidden {
position: static;
diff --git a/core/themes/olivero/css/components/header-search-narrow.pcss.css b/core/themes/olivero/css/components/header-search-narrow.pcss.css
index 5e2ad80e34ea4ae945570f0907f8f3a7c3a1512d..833016fde678e1d87588df0af74153fa01be6b00 100644
--- a/core/themes/olivero/css/components/header-search-narrow.pcss.css
+++ b/core/themes/olivero/css/components/header-search-narrow.pcss.css
@@ -118,7 +118,7 @@
transform: scaleX(1);
}
- @media screen and (-ms-high-contrast: active) {
+ @media screen and (forced-colors: active) {
border-bottom-width: var(--sp0-5);
& span::after {
@@ -131,7 +131,7 @@
width: 80px;
}
- @media screen and (-ms-high-contrast: active) {
+ @media screen and (forced-colors: active) {
/* IE11's high contrast show will not show the background image, so we show the text. */
& .visually-hidden {
position: static;
diff --git a/core/themes/olivero/css/components/header-search-wide.css b/core/themes/olivero/css/components/header-search-wide.css
index 60700bad44dda2e869c3ff3503758e1d33a08a0b..98d60e135331f5d89e9644deab0729840a47b4d2 100644
--- a/core/themes/olivero/css/components/header-search-wide.css
+++ b/core/themes/olivero/css/components/header-search-wide.css
@@ -138,7 +138,7 @@
transform: scaleX(1);
}
-@media screen and (-ms-high-contrast: active) {
+@media screen and(forced-colors: active) {
.block-search-wide__wrapper .search-form__submit:focus {
border-bottom-width: var(--sp0-5);
}
@@ -148,7 +148,7 @@
}
}
-@media screen and (-ms-high-contrast: active) {
+@media screen and (forced-colors: active) {
/* Edge's high contrast does show the background image, so we hide it. */
.block-search-wide__wrapper .search-form__submit .icon--search {
display: none;
diff --git a/core/themes/olivero/css/components/header-search-wide.pcss.css b/core/themes/olivero/css/components/header-search-wide.pcss.css
index 6c60f28d708dedac798ac2f9f86c1639c8b2a27c..fda792604f5d02b75a02d61aa4c07085154937a0 100644
--- a/core/themes/olivero/css/components/header-search-wide.pcss.css
+++ b/core/themes/olivero/css/components/header-search-wide.pcss.css
@@ -128,7 +128,7 @@
transform: scaleX(1);
}
- @media screen and (-ms-high-contrast: active) {
+ @media screen and(forced-colors: active) {
border-bottom-width: var(--sp0-5);
& span::after {
@@ -137,7 +137,7 @@
}
}
- @media screen and (-ms-high-contrast: active) {
+ @media screen and (forced-colors: active) {
/* Edge's high contrast does show the background image, so we hide it. */
& .icon--search {
display: none;