1 files changed, 46 insertions, 20 deletions

diff --git a/src/css/_style.scss b/src/css/_style.scss
index ac47ea6..060fe8f 100644
--- a/src/css/_style.scss
+++ b/src/css/_style.scss
@@ -13,18 +13,19 @@
 .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;
-}
 
+
+details {
+  color: #424242;
+}
 .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,28 +36,44 @@ blockquote {
   margin: 0 0 -48px -70px;
 }
 @mixin box($name, $bg) {
+  /* Theme style */
   .#{$name} {
     background: $bg;
     padding-right: 4%;
     padding-top: 2%;
     font-family: monospace, serif;
-    font-size: 14px;
-    &:before {
-      background-image: url("/s/imgM/ic_" + $name + "_black_48px.svg");
-    }
+    font-size: 1rem;
+
+    background-image: url("/s/imgM/ic_" + $name + "_black_48px.svg");
+    background-position: 25px center;
+    background-repeat: no-repeat;
   }
 }
+
 @include box('information', #daeaee);
-@include box('comment', #eea);
+@include box('note', #bed2ff);
 @include box('attention', #eee7da);
 @include box('question', #e2daee);
 @include box('good', #aea);
 @include box('bad', #eaa);
 
+details {
+  background-color: lightyellow;
+  border-radius: 20px;
+  margin: 40px;
+  padding: 25px;
+
+  summary {
+    cursor: pointer;
+  }
+}
+
 .secret {
-  background: #eee;
   padding: 10px 0 10px 15px;
   min-height: 20px;
+
+  /* Theme style */
+  background: #eee;
 }
 .hiden_block_quote {
   display: none;
@@ -65,12 +82,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 {
@@ -88,19 +107,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;
@@ -111,12 +133,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);
 }