theme design

component/approve/Login.vue

@@ -17,12 +17,12 @@ export default {
 </div>
 </template>
 <style scoped>
-.login{
+/* .login{
   width:80%;
   height:50%;
-  /* display: flex; */
+  display: flex;
   justify-content: center;
   align-items: center;
   background-color: bisque;
-}
+} */
 </style>

style/common.css

@@ -1,17 +1,17 @@
 html[data-theme="light"]{
-  --body-background-color:rgba(255, 255, 255, 0.333);
-  --font-color:rgb(2, 2, 2);
-  --a-color:rgba(71, 220, 71, 0.133);
+  --body-background-color:#DED8D4;
+  --font-color:#121929;
+  --a-color:#862930;
   --a-link-color:rgba(71, 220, 71, 0.133);
   --a-hover-color:rgba(71, 220, 71, 0.133);
-  --a-active-color:rgba(71, 220, 71, 0.133);  
-  --a-visited-color:rgba(71, 220, 71, 0.133);
+  --a-active-color:#862930; 
+  --a-visited-color:#862930;
 }
 html[data-theme="dark"]{
   --body-background-color:#121929;
   --font-color:#DED8D4;
   --a-color:#DED8D4;
-  --a-link-color:rgba(71, 220, 71, 0.133);
+  --a-link-color:#862930;
   --a-hover-color:#862930;
   --a-active-color:#DED8D4;
   --a-visited-color:#DED8D4;

style/index.css

@@ -5,18 +5,19 @@ div span{
     height:30px;
     line-height: 30px;
     margin: 0 10px;
-    padding: 3px;
+    /* padding: 3px; */
 }
 div span a{
-    color:#862930;
+    font-family: cursive;
+    color:var(--a-color);
     text-decoration: none;
 }
 div span a:hover{
-    color:#121929;
+    color:var(--a-hover-color);
+}
+div span a:active{
+    color:var(--a-active-color);
 }
-/* div span a::linked{
-    color:orange;
-} */
 
 dialog{
     width: var(--plate-size-default);
@@ -25,12 +26,12 @@ dialog{
 }
 dialog::backdrop{
     /* background-color: #121929; */
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
 }
 .approve{
-    /* color:#862930;
-    background-color:#DED8D4 ; */
+    color:var(--a-color);
+    background-color:var(--a-hover-color);
     font-size: 25px;
     line-height: 30px;
     display: inline-block;
@@ -39,8 +40,8 @@ dialog::backdrop{
     border: var(--test-border);
 }
 .approve:hover{
-    /* color:#121929;
-    background-color:#862930 ; */
+    color:var(--a-hover-color);
+    background-color:var(--a-color);
     border: var(--test-border-hover);
 }
 /* .approve router-link span a{