create a mixin for forced-color-mode / adjust cta colors with

okTurtles · Dec 1, 2024 · a0e3128 · a0e3128
1 parent ec27bbe
commit a0e3128
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/frontend/assets/style/_mixins.scss b/frontend/assets/style/_mixins.scss
@@ -55,6 +55,12 @@ $payment-table-desktop-bp: 1290px;
   }
 }
 
+@mixin forced-color-mode {
+  @media (forced-colors: active) {
+    @content;
+  }
+}
+
 %unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;

diff --git a/frontend/views/components/modal/ModalClose.vue b/frontend/views/components/modal/ModalClose.vue
@@ -37,6 +37,10 @@ export default ({
   cursor: pointer;
   background-color: $general_1;
 
+  @include forced-color-mode {
+    border: 1px solid $white;
+  }
+
   @include tablet {
     top: 1.5rem;
     right: 1.5rem;
@@ -87,6 +91,11 @@ export default ({
     transition: transform 0.15s ease-in;
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
     transform-origin: center center;
+    forced-color-adjust: none;
+
+    @include forced-color-mode {
+      background-color: $white;
+    }
   }
 
   &::after {

diff --git a/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue b/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
@@ -489,8 +489,8 @@ img.c-preview-image {
     border-radius: 0.5rem;
     opacity: 0.675;
 
-    @media (forced-colors: active) {
-      border: 1px solid;
+    @include forced-color-mode {
+      border: 1px solid $white;
       opacity: 1;
     }
   }
@@ -522,6 +522,12 @@ img.c-preview-image {
 
   ::v-deep input.sInput {
     forced-color-adjust: none;
+
+    @include forced-color-mode {
+      background: none;
+      border: 1px solid $white;
+      color: $white;
+    }
   }
 }