🎨 🐛 Rename file & path & remove unused file.

assets/css/_common/components/3rd/disqusjs.scss

@@ -0,0 +1,39 @@
+@if $disqusjs_enable and $darkmode {
+  @media (prefers-color-scheme:dark) {
+    html #dsqjs a {
+      color: var(--link-color)
+    }
+
+    html #dsqjs a:focus,html #dsqjs a:hover {
+      color: var(--link-hover-color)
+    }
+
+    html #dsqjs .dsqjs-nav,html #dsqjs footer {
+      border-color: var(--card-bg-color)
+    }
+
+    html #dsqjs .dsqjs-load-more,html #dsqjs .dsqjs-load-more:hover,html #dsqjs .dsqjs-nav-tab,html #dsqjs .dsqjs-no-comment,html #dsqjs .dsqjs-post-content {
+      color: var(--text-color)
+    }
+
+    html #dsqjs .dsqjs-order-label {
+      background-color: #3e4b5e
+    }
+
+    html #dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
+      background-color: var(--content-bg-color)
+    }
+
+    html #dsqjs .dsqjs-tab-active>span:after {
+      background-color: #2e9fff!important
+    }
+
+    html #dsqjs .dsqjs-footer,html #dsqjs .dsqjs-meta {
+      color: var(--text-color)
+    }
+
+    html #dsqjs .dsqjs-post-body blockquote {
+      border-color: var(--content-bg-color)
+    }
+  }
+}

assets/css/_common/components/3rd/gitalk.scss

@@ -0,0 +1,9 @@
+@if $gitalk_enable {
+  .gt-header a, .gt-comments a, .gt-popup a {
+    border-bottom: 0;
+  }
+
+  .gt-container .gt-popup .gt-action.is--active::before {
+    top: .7em;
+  }
+}

assets/css/_common/components/3rd/gitter.scss

@@ -0,0 +1,7 @@
+@if $gitter_enable {
+  .gitter-open-chat-button {
+    $alignment: sidebar-toggle-alignment(false);
+    #{nth($alignment, 1)}: auto !important;
+    #{nth($alignment, 2)}: 10px !important;
+  }
+}

assets/css/_common/components/3rd/index.scss

@@ -0,0 +1,20 @@
+@import 'disqusjs';
+@import 'gitalk';
+@import 'utterances';
+@import 'search';
+@import 'related-posts';
+@import 'gitter';
+@import 'livere';
+@import 'waline';
+@import 'mermaid';
+
+.use-motion .animated {
+  // Fix issue #48 #55
+  animation-fill-mode: none;
+  // Fix issue #46 .animated in .sidebar
+  visibility: inherit;
+}
+
+.use-motion .sidebar .animated {
+  animation-fill-mode: both;
+}

assets/css/_common/components/3rd/livere.scss

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

assets/css/_common/components/3rd/mermaid.scss

@@ -0,0 +1,3 @@
+.post-block .post-body .mermaid {
+  background: var(--highlight-foreground);
+}

assets/css/_common/components/3rd/related-posts.scss

@@ -0,0 +1,23 @@
+@if $related_posts_enable {
+  .popular-posts-header {
+    border-bottom: 1px solid $gainsboro;
+    font-size: $font-size-large;
+    margin-bottom: 10px;
+    margin-top: $post-eof-margin-bottom;
+  }
+
+  .popular-posts {
+    padding: 0;
+
+    .popular-posts-item {
+      margin-left: 2em;
+
+      .popular-posts-title {
+        font-size: $font-size-small;
+        font-weight: normal;
+        line-height: $line-height-base * 1.2;
+        margin: 0;
+      }
+    }
+  }
+}

assets/css/_common/components/3rd/search.scss

@@ -0,0 +1,213 @@
+@if $local_search_enable or $algolia_search_enable {
+  .search-active {
+    overflow: hidden;
+  }
+
+  .search-pop-overlay {
+    background: rgba(0, 0, 0, 0);
+    display: flex;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    transition: visibility .4s, background .4s;
+    visibility: hidden;
+    width: 100%;
+    z-index: $zindex-4; 
+
+    .search-active & {
+      background: rgba(0, 0, 0, .3);
+      visibility: visible;
+    }
+  }
+
+  .search-popup {
+    background: var(--card-bg-color);
+    border-radius: 5px;
+    height: 65%;
+    margin: auto;
+    transform: scale(0);
+    transition: transform .4s;
+    width: 700px;
+
+    .search-active & {
+      transform: scale(1);
+    }
+
+    @include mobile() {
+      border-radius: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    .search-icon, .popup-btn-close {
+      color: $grey-dark;
+      font-size: 18px;
+      padding: 0 10px;
+    }
+
+    .popup-btn-close {
+      cursor: pointer;
+
+      &:hover .fa {
+        color: $black-deep;
+      }
+    }
+
+    .search-header {
+      background: var(--content-bg-color);      
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      display: flex;
+      padding: 5px;
+    }
+
+    input.search-input {
+      background: transparent;
+      border: 0;
+      outline: 0;
+      width: 100%;
+      color: var(--text-color);
+
+      &::-webkit-search-cancel-button {
+        display: none;
+      }
+    }
+
+    .search-result-container {
+      height: calc(100% - 55px);
+      overflow: auto;
+      padding: 0px 25px;
+    }
+
+    .search-footer {
+      background: var(--content-bg-color);
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      padding: 0 5px;
+      color: var(--text-color);
+
+      .search-meta-info {
+        height: 26px;
+        display: flex;
+        padding: 5px 0;
+        
+        .search-hit-stats {
+          font-size: $font-size-smaller;
+          width: 65%;
+          padding: 2px 8px;
+        }
+
+        .search-vendor {
+          width: 34%;
+          text-align: right;
+          font-size: $font-size-small;
+          font-weight: bold;
+          
+          img {
+            width: 68px;
+            margin: 5px;
+            vertical-align: middle;
+            display: inline;
+          } 
+
+          a {
+            border: none;
+          }     
+        }
+      }
+
+    }
+
+    .search-result-list {
+      margin: 0 5px;
+      padding: 0;
+    }
+
+    a.search-result-title {
+      font-weight: bold;
+    }
+
+    p.search-result {
+      border-bottom: 1px dashed $grey-light;
+      padding: 5px 0;
+    }
+  }
+
+  mark.search-keyword {
+    background: transparent;
+    border-bottom: 1px dashed $red;
+    color: $red;
+    font-weight: bold;
+  }
+}
+
+@if $algolia_search_enable {
+  .search-input-container {
+    flex-grow: 1;
+
+    form {
+      padding: 2px;
+    }
+  }
+
+  .search-stats {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+
+    img {
+      height: 1em;
+      margin: 0;
+    }
+  }
+
+  .algolia-pagination {
+    // Override default style of ul
+    //margin: 40px 0;
+    opacity: 1;
+    padding: 0;
+    font-size: $font-size-smallest;
+    margin-bottom: -16px;
+
+    .pagination {
+      visibility: visible;
+      margin: 0;
+    }
+
+    .pagination-item {
+      display: inline-block;
+    }
+
+    .current .page-number {
+      @extend %page-number-current;
+      cursor: default;
+    }
+
+    .disabled-item {
+      visibility: hidden;
+    }
+  }
+}
+
+@if $local_search_enable {
+  .search-popup {
+    .search-input-container {
+      flex-grow: 1;
+      padding: 2px;
+    }
+
+    .no-result {
+      display: flex;
+    }
+
+    .search-result-list {
+      width: 100%;
+    }
+
+    .search-result-icon {
+      color: $grey-light;
+      margin: auto;
+    }
+  }
+}

assets/css/_common/components/3rd/utterances.scss

@@ -0,0 +1,7 @@
+// TODO maybe use for next time
+// @if $utterances_enable {
+//   .utterances {
+//     max-width: unset;
+//     min-height: 300px;
+//   }
+// }

assets/css/_common/components/3rd/waline.scss

@@ -0,0 +1,18 @@
+@if $waline_enable {
+  .wl-actions>button:nth-child(3) {
+    display: none
+  }
+  
+  @include mobile() {
+    .wl-reaction-img {   
+      width: 28px;
+      height: 28px;    
+    }
+    .wl-reaction-votes {
+      padding: 0.85px;
+      font-weight: 500;
+      font-size: .65em;
+      line-height: .85;
+    }
+  }
+}