Przeglądaj źródła

layout右侧两个图标根据无障碍颜色而变;设置各种无障碍颜色下placeholder颜色。

任一存 3 lat temu
rodzic
commit
07c479cc0b

+ 16 - 4
web/src/assets/css/ariaGlobalStyle.less

@@ -24,8 +24,11 @@
       &:focus {
         outline: 3px solid black;
       }
+      &::placeholder {
+        color: black !important;
+      }
     }
-    a {
+    a:not(.aria-theme-independent) {
       color: blue !important;
     }
     &.aria-inverse-theme {
@@ -50,8 +53,11 @@
       &:focus {
         outline: 3px solid yellow;
       }
+      &::placeholder {
+        color: yellow !important;
+      }
     }
-    a {
+    a:not(.aria-theme-independent) {
       color: white !important;
     }
     &.aria-inverse-theme {
@@ -76,8 +82,11 @@
       &:focus {
         outline: 3px solid black;
       }
+      &::placeholder {
+        color: black !important;
+      }
     }
-    a {
+    a:not(.aria-theme-independent) {
       color: blue !important;
     }
     &.aria-inverse-theme {
@@ -102,8 +111,11 @@
       &:focus {
         outline: 3px solid yellow;
       }
+      &::placeholder {
+        color: yellow !important;
+      }
     }
-    a {
+    a:not(.aria-theme-independent) {
       color: white !important;
     }
     &.aria-inverse-theme {

Plik diff jest za duży
+ 1 - 0
web/src/assets/images/code-black.svg


Plik diff jest za duży
+ 1 - 0
web/src/assets/images/code-default-color.svg


Plik diff jest za duży
+ 1 - 0
web/src/assets/images/code-yellow.svg


Plik diff jest za duży
+ 1 - 0
web/src/assets/images/game-black.svg


Plik diff jest za duży
+ 1 - 0
web/src/assets/images/game-default-color.svg


Plik diff jest za duży
+ 1 - 0
web/src/assets/images/game-yellow.svg


+ 9 - 5
web/src/views/layout/index.vue

@@ -146,11 +146,15 @@
               tabindex="0"
               aria-description="shadow art game"
             >
-              <img src="@/assets/images/game.png" alt="" />
+              <img v-if="themeIdx === 0" src="@/assets/images/game-default-color.svg" alt="" />
+              <img v-if="[1, 3].includes(themeIdx)" src="@/assets/images/game-black.svg" alt="" />
+              <img v-if="[2, 4].includes(themeIdx)" src="@/assets/images/game-yellow.svg" alt="" />
             </a>
           </li>
           <li>
-            <img src="@/assets/images/code.png" alt="" tabindex="0"/>
+            <img v-if="themeIdx === 0" src="@/assets/images/code-default-color.svg" alt="" tabindex="0"/>
+            <img v-if="[1, 3].includes(themeIdx)" src="@/assets/images/code-black.svg" alt="" tabindex="0"/>
+            <img v-if="[2, 4].includes(themeIdx)" src="@/assets/images/code-yellow.svg" alt="" tabindex="0"/>
             <div>
               <img src="@/assets/images/index_ewm1.png" alt="" 
               />
@@ -377,9 +381,6 @@ export default {
     top: 50%;
     right: 40px;
     transform: translateY(-50%);
-    ::-webkit-input-placeholder {
-      color: #000000;
-    }
     .input-wrapper {
       box-sizing: border-box;
       position: relative;
@@ -404,6 +405,9 @@ export default {
         &:focus {
           border-color: #ca000a;
         }
+        &::placeholder {
+          color: black;
+        } 
       }
       img {
         width: 14px;