🎨 Add post comments widget content.

assets/css/_common/components/post/index.scss

@@ -18,7 +18,7 @@
 
 .use-motion {
   @if $motion_trans_post_block {
-    .post-block, .pagination, .comments {
+    .post-block, .pagination, .comments, .post-comments {
       visibility: hidden;
     }
   }

assets/css/_common/components/third-party/index.scss

@@ -5,6 +5,8 @@
 @import 'related-posts';
 @import 'math';
 @import 'gitter';
+@import 'livere';
+@import 'waline';
 
 .use-motion .animated {
   // Fix issue #48 #55

assets/css/_common/components/third-party/livere.scss

@@ -0,0 +1,5 @@
+ @if $livere_enable {
+  #livereAdWrapper, #taboola-livere { 
+    display: none; 
+  }
+ }

assets/css/_common/components/third-party/waline.scss

@@ -0,0 +1,5 @@
+@if $waline_enable {
+  .wl-actions>button:nth-child(3) {
+    display: none
+  }
+}

assets/css/_common/scaffolding/comments.scss

@@ -37,3 +37,71 @@
     padding-top: 0;
   }
 }
+
+.post-comments {
+  @if $scheme != 'Gemini' {
+    margin-top: 60px;
+  }
+  overflow: hidden;
+
+  .comment-head {
+    margin-bottom: 20px;
+
+    .comment-headline {
+      display: inline-block;
+      vertical-align: middle;
+      font-weight: 700;
+      font-size: 1.4em;
+    }
+
+    .comment-switch {
+      display: inline-block;
+      float: right;
+      margin: 2px auto;
+      padding: 4px 16px;
+      width: max-content;
+      border-radius: 8px;
+      background: #eee;
+
+      .switch-btn {
+        position: relative;
+        display: inline-block;
+        margin: -4px 8px 0;
+        width: 42px;
+        height: 22px;
+        border-radius: 34px;
+        vertical-align: middle;
+        cursor: pointer;
+        -webkit-transition: .4s;
+        -moz-transition: .4s;
+        -o-transition: .4s;
+        -ms-transition: .4s;
+        transition: .4s;
+
+        &:before {
+          position: absolute;
+          bottom: 4px;
+          left: 4px;
+          width: 14px;
+          height: 14px;
+          border-radius: 50%;
+          content: '';
+          background-color: #fff;
+          -webkit-transition: .4s;
+          -moz-transition: .4s;
+          -o-transition: .4s;
+          -ms-transition: .4s;
+          transition: .4s
+        }
+
+        &.move:before {
+          -webkit-transform: translateX(20px);
+          -moz-transform: translateX(20px);
+          -o-transform: translateX(20px);
+          -ms-transform: translateX(20px);
+          transform: translateX(20px);
+        }
+      }
+    }
+  }
+}

assets/css/_schemes/Gemini/index.scss

@@ -25,7 +25,7 @@
 // ==================================================
 // Post blocks.
 .main-inner > {
-  .sub-menu, .post-block, .tabs-comment, .comments, .pagination {
+  .sub-menu, .post-block, .tabs-comment, .comments, .post-comments, .pagination {
     background: var(--content-bg-color);
     border-radius: $border-radius-inner;
     box-shadow: $box-shadow-inner;
@@ -47,7 +47,7 @@
 }
 
 // Post & Comments blocks.
-.post-block, .comments {
+.post-block, .comments, .post-comments {
   padding: $content-desktop-padding;
 }
 
@@ -96,7 +96,7 @@
     padding: ($content-tablet-padding * 2);
   }
 
-  .comments {
+  .comments, .post-comments {
     padding: $content-tablet-padding ($content-tablet-padding * 2);
     // padding: initial;
     // padding-top: $content-tablet-padding;
@@ -124,7 +124,7 @@
     padding: $sidebar-offset;
   }
 
-  .comments {
+  .comments, .post-comments {
     padding: 10px $sidebar-offset;
   }
 }

assets/css/main.scss

@@ -118,7 +118,9 @@ $gitter_enable: {{ $P.gitter.enable }};
 
 // Comment
 $disqusjs_enable: {{ $P.disqusjs.enable }};
+$livere_enable: {{ $P.livere.enable }};
 $utterances_enable: {{ $P.utterances.enable }};
+$waline_enable: {{ $P.waline.enable }};
 
 // 
 // Variables Layer