Make a real Darkmode

1 files changed, 26 insertions, 15 deletions

diff --git a/src/css/_style.scss b/src/css/_style.scss
index cc060fa..b28ed19 100644
--- a/src/css/_style.scss
+++ b/src/css/_style.scss
@@ -13,18 +13,16 @@
 .qcm_item p {margin: 0; padding: 0; display: inline;}
 .qcm_check, .qcm_radio {padding-left: 32px;}
 
-blockquote {
-  color: #504d4d;
-  padding: 1px 2%;
-  border-left: 5px solid #ccc;
-}
+
 
 .special-box {
-  background: #eee7da;
   margin: 12.5px 12.5px;
-  padding: 10px 0 10px 95px; 
-  color: #424242;
+  padding: 10px 0 10px 95px;
   min-height: 60px;
+
+  /* Theme style */
+  background: #eee7da;
+  color: #424242;
 }
 .special-box:before{
   content: "";
@@ -35,6 +33,7 @@ blockquote {
   margin: 0 0 -48px -70px;
 }
 @mixin box($name, $bg) {
+  /* Theme style */
   .#{$name} {
     background: $bg;
     padding-right: 4%;
@@ -47,6 +46,7 @@ blockquote {
     background-repeat: no-repeat;
   }
 }
+
 @include box('information', #daeaee);
 @include box('comment', #eea);
 @include box('attention', #eee7da);
@@ -55,9 +55,11 @@ blockquote {
 @include box('bad', #eaa);
 
 .secret {
-  background: #eee;
   padding: 10px 0 10px 15px;
   min-height: 20px;
+
+  /* Theme style */
+  background: #eee;
 }
 .hiden_block_quote {
   display: none;
@@ -66,12 +68,14 @@ blockquote {
   margin-top: 5px;
 }
 kbd {
-  background-color: #f8f6ea;
   padding: 2px 6px;
   border-radius: 3px;
-  border: 1px solid #e0dab6;
   border-bottom-width: 3px;
+
+  /* Theme style */
   text-shadow: 0 1px 0 #fff;
+  background-color: #f8f6ea;
+  border: 1px solid #e0dab6;
   color: #5e551f;
 }
 .view {
@@ -89,19 +93,22 @@ kbd {
   font-family : inherit;
   font-size   : 1em;
   cursor      : pointer;
+
   > div {
     width       : 40px;
     height      : 24px;
-    background  : #c0c0c0 url('image.png') no-repeat center center;
     line-height : 24px;
-    border        : 1px solid rgba(27, 31, 35, 0.2);
     border-radius : 3px;
     font-size: 12px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
+    /* Theme style */
+    border : 1px solid rgba(27, 31, 35, 0.2);
+    background : #c0c0c0 url('image.png') no-repeat center center;
     color: #24292e;
     background-color: #eff3f6;
     background-image: linear-gradient(to top, #fafbfc 0%, #eff3f6 90%);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
   }
   > div > div {
     font-weight: bold;
@@ -112,12 +119,16 @@ kbd {
 }
 
 @mixin state($border, $border-c) {
-  border: 2px solid $border;
   border-radius: 2px;
   outline: none;
   border-color: $border-c;
+
+  /* Theme style */
   box-shadow: 0 0 5px $border-c;
+  border: 2px solid $border;
 }
+
+/* Theme style */
 .valid {
   @include state(#c0392b, #9F9);
 }