From 2b7a638c8dfbd94a4afca92206cfcd1d2f78a678 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Fri, 29 May 2020 16:39:32 +0800
Subject: [PATCH] Simplify the style of note

---
 source/css/_common/scaffolding/tags/note.styl | 263 ++----------------
 source/css/_variables/base.styl               | 108 +++----
 2 files changed, 82 insertions(+), 289 deletions(-)

diff --git a/source/css/_common/scaffolding/tags/note.styl b/source/css/_common/scaffolding/tags/note.styl
index f583b73..1851204 100644
--- a/source/css/_common/scaffolding/tags/note.styl
+++ b/source/css/_common/scaffolding/tags/note.styl
@@ -1,6 +1,7 @@
 .post-body .note {
   $note-icons = hexo-config('note.icons');
   $note-style = hexo-config('note.style');
+  $note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger';
 
   border-radius: $note-border-radius;
   margin-bottom: 20px;
@@ -51,7 +52,7 @@
 
       &::before {
         font-size: 1.5em;
-        left: .4em;
+        left: .3em;
         position: absolute;
         top: calc(50% - 1em);
         font-family-icons();
@@ -59,255 +60,47 @@
     }
   }
 
-  &.default {
-    if ($note-style == 'flat') {
-      background: $note-default-bg;
-    }
+  for $type in $note-types {
+    &.{$type} {
+      if ($note-style == 'flat') {
+        background: lookup('$note-bg-' + $type);
+      }
 
-    if ($note-style == 'modern') {
-      background: $note-modern-default-bg;
-      border-color: $note-modern-default-border;
-      color: $note-modern-default-text;
+      if ($note-style == 'modern') {
+        background: lookup('$note-modern-bg-' + $type);
+        border-color: lookup('$note-modern-border-' + $type);
+        color: lookup('$note-modern-text-' + $type);
 
-      a, span.exturl {
-        &:not(.btn) {
-          border-bottom: 1px solid $note-modern-default-text;
-          color: $note-modern-default-text;
+        a, span.exturl {
+          &:not(.btn) {
+            border-bottom: 1px solid lookup('$note-modern-text-' + $type);
+            color: lookup('$note-modern-text-' + $type);
 
-          &:hover {
-            border-bottom: 1px solid $note-modern-default-hover;
-            color: $note-modern-default-hover;
+            &:hover {
+              border-bottom: 1px solid lookup('$note-modern-hover-' + $type);
+              color: lookup('$note-modern-hover-' + $type);
+            }
           }
         }
       }
-    }
 
-    if ($note-style != 'modern') {
-      border-left-color: $note-default-border;
+      if ($note-style != 'modern') {
+        border-left-color: lookup('$note-border-' + $type);
 
-      h2, h3, h4, h5, h6 {
-        color: $note-default-text;
-      }
-    }
-
-    if ($note-icons) {
-      &:not(.no-icon)::before {
-        content: $note-default-icon;
-
-        if ($note-style != 'modern') {
-          color: $note-default-text;
+        h2, h3, h4, h5, h6 {
+          color: lookup('$note-text-' + $type);
         }
       }
-    }
-  }
 
-  &.primary {
-    if ($note-style == 'flat') {
-      background: $note-primary-bg;
-    }
+      if ($note-icons) {
+        &:not(.no-icon)::before {
+          content: lookup('$note-icon-' + $type);
 
-    if ($note-style == 'modern') {
-      background: $note-modern-primary-bg;
-      border-color: $note-modern-primary-border;
-      color: $note-modern-primary-text;
-
-      a, span.exturl {
-        &:not(.btn) {
-          border-bottom: 1px solid $note-modern-primary-text;
-          color: $note-modern-primary-text;
-
-          &:hover {
-            border-bottom: 1px solid $note-modern-primary-hover;
-            color: $note-modern-primary-hover;
+          if ($note-style != 'modern') {
+            color: lookup('$note-text-' + $type);
           }
         }
       }
     }
-
-    if ($note-style != 'modern') {
-      border-left-color: $note-primary-border;
-
-      h2, h3, h4, h5, h6 {
-        color: $note-primary-text;
-      }
-    }
-
-    if ($note-icons) {
-      &:not(.no-icon)::before {
-        content: $note-primary-icon;
-
-        if ($note-style != 'modern') {
-          color: $note-primary-text;
-        }
-      }
-    }
-  }
-
-  &.info {
-    if ($note-style == 'flat') {
-      background: $note-info-bg;
-    }
-
-    if ($note-style == 'modern') {
-      background: $note-modern-info-bg;
-      border-color: $note-modern-info-border;
-      color: $note-modern-info-text;
-
-      a, span.exturl {
-        &:not(.btn) {
-          border-bottom: 1px solid $note-modern-info-text;
-          color: $note-modern-info-text;
-
-          &:hover {
-            border-bottom: 1px solid $note-modern-info-hover;
-            color: $note-modern-info-hover;
-          }
-        }
-      }
-    }
-
-    if ($note-style != 'modern') {
-      border-left-color: $note-info-border;
-
-      h2, h3, h4, h5, h6 {
-        color: $note-info-text;
-      }
-    }
-
-    if ($note-icons) {
-      &:not(.no-icon)::before {
-        content: $note-info-icon;
-
-        if ($note-style != 'modern') {
-          color: $note-info-text;
-        }
-      }
-    }
-  }
-
-  &.success {
-    if ($note-style == 'flat') {
-      background: $note-success-bg;
-    }
-
-    if ($note-style == 'modern') {
-      background: $note-modern-success-bg;
-      border-color: $note-modern-success-border;
-      color: $note-modern-success-text;
-
-      a, span.exturl {
-        &:not(.btn) {
-          border-bottom: 1px solid $note-modern-success-text;
-          color: $note-modern-success-text;
-
-          &:hover {
-            border-bottom: 1px solid $note-modern-success-hover;
-            color: $note-modern-success-hover;
-          }
-        }
-      }
-    }
-
-    if ($note-style != 'modern') {
-      border-left-color: $note-success-border;
-
-      h2, h3, h4, h5, h6 {
-        color: $note-success-text;
-      }
-    }
-
-    if ($note-icons) {
-      &:not(.no-icon)::before {
-        content: $note-success-icon;
-
-        if ($note-style != 'modern') {
-          color: $note-success-text;
-        }
-      }
-    }
-  }
-
-  &.warning {
-    if ($note-style == 'flat') {
-      background: $note-warning-bg;
-    }
-
-    if ($note-style == 'modern') {
-      background: $note-modern-warning-bg;
-      border-color: $note-modern-warning-border;
-      color: $note-modern-warning-text;
-
-      a, span.exturl {
-        &:not(.btn) {
-          border-bottom: 1px solid $note-modern-warning-text;
-          color: $note-modern-warning-text;
-
-          &:hover {
-            border-bottom: 1px solid $note-modern-warning-hover;
-            color: $note-modern-warning-hover;
-          }
-        }
-      }
-    }
-
-    if ($note-style != 'modern') {
-      border-left-color: $note-warning-border;
-
-      h2, h3, h4, h5, h6 {
-        color: $note-warning-text;
-      }
-    }
-
-    if ($note-icons) {
-      &:not(.no-icon)::before {
-        content: $note-warning-icon;
-
-        if ($note-style != 'modern') {
-          color: $note-warning-text;
-        }
-      }
-    }
-  }
-
-  &.danger {
-    if ($note-style == 'flat') {
-      background: $note-danger-bg;
-    }
-
-    if ($note-style == 'modern') {
-      background: $note-modern-danger-bg;
-      border-color: $note-modern-danger-border;
-      color: $note-modern-danger-text;
-
-      a, span.exturl {
-        &:not(.btn) {
-          border-bottom: 1px solid $note-modern-danger-text;
-          color: $note-modern-danger-text;
-
-          &:hover {
-            border-bottom: 1px solid $note-modern-danger-hover;
-            color: $note-modern-danger-hover;
-          }
-        }
-      }
-    }
-
-    if ($note-style != 'modern') {
-      border-left-color: $note-danger-border;
-
-      h2, h3, h4, h5, h6 {
-        color: $note-danger-text;
-      }
-    }
-
-    if ($note-icons) {
-      &:not(.no-icon)::before {
-        content: $note-danger-icon;
-
-        if ($note-style != 'modern') {
-          color: $note-danger-text;
-        }
-      }
-    }
   }
 }
diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl
index 0cedc4d..2ea8025 100644
--- a/source/css/_variables/base.styl
+++ b/source/css/_variables/base.styl
@@ -284,70 +284,70 @@ $lbg = hexo-config('note.light_bg_offset') is a 'unit' ? unit(hexo-config('note.
 // Default
 $note-border-radius         = 3px;
 
-$note-default-border        = #777;
-$note-default-bg            = lighten(spin($note-default-border, 0), 94% + $lbg);
-$note-default-text          = $note-default-border;
-$note-default-icon          = "\f0a9";
+$note-border-default        = #777;
+$note-bg-default            = lighten(spin($note-border-default, 0), 94% + $lbg);
+$note-text-default          = $note-border-default;
+$note-icon-default          = "\f0a9";
 
-$note-modern-default-border = #e1e1e1;
-$note-modern-default-bg     = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4));
-$note-modern-default-text   = $grey-dim;
-$note-modern-default-hover  = darken(spin($note-modern-default-text, -10), 32%);
+$note-modern-border-default = #e1e1e1;
+$note-modern-bg-default     = lighten(spin($note-modern-border-default, 10), 60% + ($lbg * 4));
+$note-modern-text-default   = $grey-dim;
+$note-modern-hover-default  = darken(spin($note-modern-text-default, -10), 32%);
 
 // Primary
-$note-primary-border        = #6f42c1;
-$note-primary-bg            = lighten(spin($note-primary-border, 10), 92% + $lbg);
-$note-primary-text          = $note-primary-border;
-$note-primary-icon          = "\f055";
+$note-border-primary        = #6f42c1;
+$note-bg-primary            = lighten(spin($note-border-primary, 10), 92% + $lbg);
+$note-text-primary          = $note-border-primary;
+$note-icon-primary          = "\f055";
 
-$note-modern-primary-border = #e1c2ff;
-$note-modern-primary-bg     = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4));
-$note-modern-primary-text   = #6f42c1;
-$note-modern-primary-hover  = darken(spin($note-modern-primary-text, -10), 22%);
+$note-modern-border-primary = #e1c2ff;
+$note-modern-bg-primary     = lighten(spin($note-modern-border-primary, 10), 40% + ($lbg * 4));
+$note-modern-text-primary   = #6f42c1;
+$note-modern-hover-primary  = darken(spin($note-modern-text-primary, -10), 22%);
 
 // Info
-$note-info-border           = #428bca;
-$note-info-bg               = lighten(spin($note-info-border, -10), 91% + $lbg);
-$note-info-text             = $note-info-border;
-$note-info-icon             = "\f05a";
+$note-border-info           = #428bca;
+$note-bg-info               = lighten(spin($note-border-info, -10), 91% + $lbg);
+$note-text-info             = $note-border-info;
+$note-icon-info             = "\f05a";
 
-$note-modern-info-border    = #b3e5ef;
-$note-modern-info-bg        = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4));
-$note-modern-info-text      = #31708f;
-$note-modern-info-hover     = darken(spin($note-modern-info-text, -10), 32%);
+$note-modern-border-info    = #b3e5ef;
+$note-modern-bg-info        = lighten(spin($note-modern-border-info, 10), 50% + ($lbg * 4));
+$note-modern-text-info      = #31708f;
+$note-modern-hover-info     = darken(spin($note-modern-text-info, -10), 32%);
 
 // Success
-$note-success-border        = #5cb85c;
-$note-success-bg            = lighten(spin($note-success-border, 10), 90% + $lbg);
-$note-success-text          = $note-success-border;
-$note-success-icon          = "\f058";
+$note-border-success        = #5cb85c;
+$note-bg-success            = lighten(spin($note-border-success, 10), 90% + $lbg);
+$note-text-success          = $note-border-success;
+$note-icon-success          = "\f058";
 
-$note-modern-success-border = #d0e6be;
-$note-modern-success-bg     = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4));
-$note-modern-success-text   = #3c763d;
-$note-modern-success-hover  = darken(spin($note-modern-success-text, -10), 27%);
+$note-modern-border-success = #d0e6be;
+$note-modern-bg-success     = lighten(spin($note-modern-border-success, 10), 40% + ($lbg * 4));
+$note-modern-text-success   = #3c763d;
+$note-modern-hover-success  = darken(spin($note-modern-text-success, -10), 27%);
 
 // Warning
-$note-warning-border        = #f0ad4e;
-$note-warning-bg            = lighten(spin($note-warning-border, 10), 88% + $lbg);
-$note-warning-text          = $note-warning-border;
-$note-warning-icon          = "\f06a";
+$note-border-warning        = #f0ad4e;
+$note-bg-warning            = lighten(spin($note-border-warning, 10), 88% + $lbg);
+$note-text-warning          = $note-border-warning;
+$note-icon-warning          = "\f06a";
 
-$note-modern-warning-border = #fae4cd;
-$note-modern-warning-bg     = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4));
-$note-modern-warning-text   = #8a6d3b;
-$note-modern-warning-hover  = darken(spin($note-modern-warning-text, -10), 18%);
+$note-modern-border-warning = #fae4cd;
+$note-modern-bg-warning     = lighten(spin($note-modern-border-warning, 10), 43% + ($lbg * 4));
+$note-modern-text-warning   = #8a6d3b;
+$note-modern-hover-warning  = darken(spin($note-modern-text-warning, -10), 18%);
 
 // Danger
-$note-danger-border         = #d9534f;
-$note-danger-bg             = lighten(spin($note-danger-border, -10), 92% + $lbg);
-$note-danger-text           = $note-danger-border;
-$note-danger-icon           = "\f056";
+$note-border-danger         = #d9534f;
+$note-bg-danger             = lighten(spin($note-border-danger, -10), 92% + $lbg);
+$note-text-danger           = $note-border-danger;
+$note-icon-danger           = "\f056";
 
-$note-modern-danger-border  = #ebcdd2;
-$note-modern-danger-bg      = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4));
-$note-modern-danger-text    = #a94442;
-$note-modern-danger-hover   = darken(spin($note-modern-danger-text, -10), 22%);
+$note-modern-border-danger  = #ebcdd2;
+$note-modern-bg-danger      = lighten(spin($note-modern-border-danger, 10), 35% + ($lbg * 4));
+$note-modern-text-danger    = #a94442;
+$note-modern-hover-danger   = darken(spin($note-modern-text-danger, -10), 22%);
 
 // Tabs border radius
 // --------------------------------------------------
@@ -355,9 +355,9 @@ $tbr                        = 0;
 
 // Label colors
 // --------------------------------------------------
-$label-default              = lighten(spin($note-default-border, 0), 89% + $lbg);
-$label-primary              = lighten(spin($note-primary-border, 10), 87% + $lbg);
-$label-info                 = lighten(spin($note-info-border, -10), 86% + $lbg);
-$label-success              = lighten(spin($note-success-border, 10), 85% + $lbg);
-$label-warning              = lighten(spin($note-warning-border, 10), 83% + $lbg);
-$label-danger               = lighten(spin($note-danger-border, -10), 87% + $lbg);
+$label-default              = lighten(spin($note-border-default, 0), 89% + $lbg);
+$label-primary              = lighten(spin($note-border-primary, 10), 87% + $lbg);
+$label-info                 = lighten(spin($note-border-info, -10), 86% + $lbg);
+$label-success              = lighten(spin($note-border-success, 10), 85% + $lbg);
+$label-warning              = lighten(spin($note-border-warning, 10), 83% + $lbg);
+$label-danger               = lighten(spin($note-border-danger, -10), 87% + $lbg);