diff --git a/core/themes/claro/css/components/tablesort-indicator.css b/core/themes/claro/css/components/tablesort-indicator.css
index aab5fdbfd53274d34f137f60700c38081f2b21c8..ff743c3091f3856e99080def6bf24658c34419b0 100644
--- a/core/themes/claro/css/components/tablesort-indicator.css
+++ b/core/themes/claro/css/components/tablesort-indicator.css
@@ -24,44 +24,44 @@
background-size: auto;
}
+@media (forced-colors: active) {
+ .tablesort {
+ background-color: linktext;
+ -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
+ mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: 0 50%;
+ mask-position: 0 50%;
+ }
+}
+
[dir="rtl"] .tablesort {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
}
-.tablesort.tablesort--asc {
+.tablesort--asc {
opacity: 1;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
- .tablesort.tablesort--asc {
+ .tablesort--asc {
background: linktext;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M5 .44L.719 4.718 1.78 5.78 4.25 3.313v7.937h1.5V3.312l2.469 2.47L9.28 4.718 5 .439z' fill='%23003ecc'/%3e%3c/svg%3e");
}
}
-.tablesort.tablesort--desc {
+.tablesort--desc {
opacity: 1;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
- .tablesort.tablesort--desc {
+ .tablesort--desc {
background: linktext;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 10 12'%3e%3cpath d='M4.25.75v7.938l-2.469-2.47L.72 7.282 5 11.561l4.281-4.28L8.22 6.22 5.75 8.687V.75h-1.5z' fill='%23003ecc'/%3e%3c/svg%3e");
}
}
-
-@media (forced-colors: active) {
- .tablesort {
- background-color: linktext;
- -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
- mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
- -webkit-mask-repeat: no-repeat;
- mask-repeat: no-repeat;
- -webkit-mask-position: 0 50%;
- mask-position: 0 50%;
- }
-}
diff --git a/core/themes/claro/css/components/tablesort-indicator.pcss.css b/core/themes/claro/css/components/tablesort-indicator.pcss.css
index a818d076f8bd6d3dad789ea903a1b94a6b0cf90e..ac33aa43140c1981331a90213bffc3a2ed9c8af2 100644
--- a/core/themes/claro/css/components/tablesort-indicator.pcss.css
+++ b/core/themes/claro/css/components/tablesort-indicator.pcss.css
@@ -16,34 +16,34 @@
background-position: 0 50%;
background-size: auto;
- [dir="rtl"] & {
- background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
+ @media (forced-colors: active) {
+ background-color: linktext;
+ mask-image: url(../../images/icons/000f33/sort--inactive--ltr.svg);
+ mask-repeat: no-repeat;
+ mask-position: 0 50%;
}
- &.tablesort--asc {
- opacity: 1;
- background-image: url(../../images/icons/003ecc/sort--asc.svg);
-
- @media (forced-colors: active) {
- background: linktext;
- mask-image: url(../../images/icons/003ecc/sort--asc.svg);
- }
+ @nest [dir="rtl"] & {
+ background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
}
+}
- &.tablesort--desc {
- opacity: 1;
- background-image: url(../../images/icons/003ecc/sort--desc.svg);
+.tablesort--asc {
+ opacity: 1;
+ background-image: url(../../images/icons/003ecc/sort--asc.svg);
- @media (forced-colors: active) {
- background: linktext;
- mask-image: url(../../images/icons/003ecc/sort--desc.svg);
- }
+ @media (forced-colors: active) {
+ background: linktext;
+ mask-image: url(../../images/icons/003ecc/sort--asc.svg);
}
+}
+
+.tablesort--desc {
+ opacity: 1;
+ background-image: url(../../images/icons/003ecc/sort--desc.svg);
@media (forced-colors: active) {
- background-color: linktext;
- mask-image: url(../../images/icons/000f33/sort--inactive--ltr.svg);
- mask-repeat: no-repeat;
- mask-position: 0 50%;
+ background: linktext;
+ mask-image: url(../../images/icons/003ecc/sort--desc.svg);
}
}