theme design

style/common.css

@@ -1,83 +1,95 @@
+:root{
+    --festive-color:#f00;
+    --funeral-color:#1212;
+    --red:#122;
+    --green:#122;
+    --blue:#122;
+    --black:#122;
+    --white:#122;
+    --gray:#122;
+    --yellow:#122;
+    --purple:#122;
+    --pink:#122;
+    --orange:#122;
+    --brown:#122;
+    --cyan:#122;
+    --magenta:#122;
+    --C:#122;
+    --M:#122;
+    --Y:#122;
+    --K:#122;
+    --body-background-color:rgba(53, 139, 225, 0.333);
+    --background-color:rgba(53, 139, 225, 0.333);
+    --backdrop-color:rgba(94, 164, 235, 0.3);
+    --font-color:rgb(91, 158, 91);
+    --font-shadow-color:rgb(91, 158, 91);
+    --filter-color:rgb(91, 158, 91);
+    --filter-shadow-color:rgb(91, 158, 91);
+    --hover-color:rgba(71, 220, 71, 0.133);
+    --a-color:rgba(71, 220, 71, 0.133);
+    --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);
+    --normal-color:rgba(190, 243, 238, 0.133);
+    --notice-color:rgba(88, 144, 235, 0.133);
+    --warming-color:rgba(240, 218, 75, 0.133);
+    --wrong-color:rgba(243, 31, 31, 0.133);
+    --plate-size-default:98%;
+    --font-size:12px;
+    --font-default-size:12px;
+    --font-family: cursive;
+    --line-height: 30px;
+    --default-font-family: cursive;
+    --font-scale-font-size:24px;
+    --font-scale-default-font-size:24px;
+    --title-font-size:18px;
+    --title-default-font-size:18px;
+    --title-font-family: cursive;
+    --title-default-font-family: cursive;
+    --subhead-font-size:16px;
+    --subhead-default-font-size:16px;
+    --subhead-font-family: cursive;
+    --subhead-default-font-family: cursive;
+    --content-font-size:12px;
+    --content-default-font-size:12px;
+    --content-font-family: cursive;
+    --content-default-font-family: cursive;
+    --button-text-font-size:15px;
+    --button-text-default-font-size:15px;
+    --test-border:2px solid black;
+    --test-border-hover:2px solid rgb(228, 20, 20);
+    --production-border:2px solid black;
+}
 html[data-theme="light"]{
-  --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:#862930; 
-  --a-visited-color:#862930;
+    --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:#862930; 
+    --a-visited-color:#862930;
 }
 html[data-theme="dark"]{
-  --body-background-color:#121929;
-  --font-color:#DED8D4;
-  --a-color:#DED8D4;
-  --a-link-color:#862930;
-  --a-hover-color:#862930;
-  --a-active-color:#DED8D4;
-  --a-visited-color:#DED8D4;
-
-}
-:root{
-  --body-background-color:rgba(53, 139, 225, 0.333);
-  --background-color:rgba(53, 139, 225, 0.333);
-  --backdrop-color:rgba(94, 164, 235, 0.3);
-  --font-color:rgb(91, 158, 91);
-  --font-shadow-color:rgb(91, 158, 91);
-  --filter-color:rgb(91, 158, 91);
-  --filter-shadow-color:rgb(91, 158, 91);
-  --hover-color:rgba(71, 220, 71, 0.133);
-  --a-color:rgba(71, 220, 71, 0.133);
-  --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);
-  --normal-color:rgba(190, 243, 238, 0.133);
-  --notice-color:rgba(88, 144, 235, 0.133);
-  --warming-color:rgba(240, 218, 75, 0.133);
-  --wrong-color:rgba(243, 31, 31, 0.133);
-  --red:#122;
-  --green:#122;
-  --blue:#122;
-  --black:#122;
-  --white:#122;
-  --gray:#122;
-  --yellow:#122;
-  --purple:#122;
-  --pink:#122;
-  --orange:#122;
-  --brown:#122;
-  --cyan:#122;
-  --magenta:#122;
-  --C:#122;
-  --M:#122;
-  --Y:#122;
-  --K:#122;
-  --plate-size-default:98%;
-  --font-size:12px;
-  --font-default-size:12px;
-  --font-scale-size:24px;
-  --font-scale-default-size:24px;
-  --title-size:18px;
-  --title-default-size:18px;
-  --content-size:12px;
-  --content-default-size:12px;
-  --button-text-size:15px;
-  --button-text-default-size:15px;
-  --test-border:2px solid black;
-  --test-border-hover:2px solid rgb(228, 20, 20);
-  --production-border:2px solid black;
+    --body-background-color:#121929;
+    --font-color:#DED8D4;
+    --a-color:#DED8D4;
+    --a-link-color:#862930;
+    --a-hover-color:#862930;
+    --a-active-color:#DED8D4;
+    --a-visited-color:#DED8D4;
 }
 body{
-  background-color: var(--body-background-color);
-  color: var(--font-color);
+    background-color: var(--body-background-color);
+    color: var(--font-color);
 }
 body a{
-  color:var(--a-color);
-  text-decoration: none;
+    color:var(--a-color);
+    text-decoration: none;
 }
 body a:hover{
-  color:var(--a-hover-color);
+    color:var(--a-hover-color);
 }
 body a:visited{
-  color:var(--a-visited-color);
+    color:var(--a-visited-color);
 }

style/index.css

@@ -32,8 +32,8 @@ dialog::backdrop{
 .approve{
     color:var(--a-color);
     background-color:var(--a-hover-color);
-    font-size: 25px;
-    line-height: 30px;
+    font-size: var(--font-size);
+    line-height: var(--font-size);
     display: inline-block;
     padding: 2px;
     border-radius: 5px;
@@ -41,7 +41,6 @@ dialog::backdrop{
 }
 .approve:hover{
     color:var(--a-hover-color);
-    background-color:var(--a-color);
     border: var(--test-border-hover);
 }
 /* .approve router-link span a{