🏗️ First time sync the css & js files from hexo theme NexT

assets/css/_common/components/back-to-top.scss

@@ -0,0 +1,45 @@
+@if hexo-config('back2top.enable') {
+  .back-to-top {
+    font-size: $b2t-font-size;
+
+    @if not hexo-config('back2top.scrollpercent') {
+      span {
+        display: none;
+      }
+    }
+
+    @if hexo-config('back2top.sidebar') {
+      margin: 20px - $sidebar-offset -10px -20px;
+      opacity: 0;
+      transition: opacity $transition-ease;
+
+      &.back-to-top-on {
+        cursor: pointer;
+        opacity: $b2t-opacity;
+
+        &:hover {
+          opacity: $b2t-opacity-hover;
+        }
+      }
+    } @else {
+      bottom: $b2t-position-bottom;
+      box-sizing: border-box;
+      color: $b2t-color;
+      padding: 0 6px;
+      transition: bottom $transition-ease;
+      @include sidebar-toggle();
+
+      @if not hexo-config('back2top.scrollpercent') {
+        width: 24px;
+      }
+
+      &:hover {
+        color: $sidebar-highlight;
+      }
+
+      &.back-to-top-on {
+        bottom: $b2t-position-bottom-on;
+      }
+    }
+  }
+}

assets/css/_common/components/index.scss

@@ -0,0 +1,20 @@
+.noscript-warning {
+  background-color: lighten($red, 20%);
+  color: white;
+  font-family: sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  left: 0;
+  position: fixed;
+  text-align: center;
+  top: 0;
+  width: 100%;
+  z-index: $zindex-5;
+}
+
+@import 'back-to-top';
+@import 'reading-progress';
+
+@import 'post';
+@import 'pages';
+@import 'third-party';

assets/css/_common/components/pages/breadcrumb.scss

@@ -0,0 +1,21 @@
+ul.breadcrumb {
+  font-size: $font-size-smallest;
+  list-style: none;
+  margin: 1em 0;
+  padding: 0 2em;
+  text-align: center;
+
+  li {
+    display: inline;
+  }
+
+  li:not(:first-child)::before {
+    content: '/\00a0';
+    font-weight: normal;
+    padding: .5em;
+  }
+
+  li:last-child {
+    font-weight: bold;
+  }
+}

assets/css/_common/components/pages/categories.scss

@@ -0,0 +1,35 @@
+.category-all-page {
+  .category-all-title {
+    text-align: center;
+  }
+
+  .category-all {
+    margin-top: 20px;
+  }
+
+  .category-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .category-list-item {
+    margin: 5px 10px;
+  }
+
+  .category-list-count {
+    color: $grey;
+
+    &::before {
+      content: ' (';
+    }
+
+    &::after {
+      content: ') ';
+    }
+  }
+
+  .category-list-child {
+    padding-left: 10px;
+  }
+}

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

@@ -0,0 +1,5 @@
+// Page specific styles
+@import 'categories';
+@import 'schedule';
+@import 'breadcrumb';
+@import 'tag-cloud';

assets/css/_common/components/pages/schedule.scss

@@ -0,0 +1,102 @@
+@keyframes dot-flash {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(.8);
+  }
+}
+
+.event-list {
+  hr {
+    background: $black-deep;
+    margin: 20px 0 45px;
+
+    &::after {
+      background: $black-deep;
+      color: white;
+      content: 'NOW';
+      display: inline-block;
+      font-weight: bold;
+      padding: 0 5px;
+    }
+  }
+
+  .event {
+    --event-background: #{$black-deep};
+    --event-foreground: #{$grey};
+    --event-title: white;
+    background: var(--event-background);
+    padding: 15px;
+
+    .event-summary {
+      border-bottom: 0;
+      color: var(--event-title);
+      margin: 0;
+      padding: 0 0 0 35px;
+      position: relative;
+
+      &::before {
+        animation: dot-flash 1s alternate infinite ease-in-out;
+        background: var(--event-title);
+        left: 0;
+        margin-top: -6px;
+        position: absolute;
+        top: 50%;
+        @include round-icon(12px);
+      }
+    }
+
+    &:nth-of-type(odd) .event-summary::before {
+      animation-delay: .5s;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+
+    .event-relative-time {
+      color: var(--event-foreground);
+      display: inline-block;
+      font-size: 12px;
+      font-weight: normal;
+      padding-left: 12px;
+    }
+
+    .event-details {
+      color: var(--event-foreground);
+      display: block;
+      line-height: 18px;
+      padding: 6px 0 6px 35px;
+
+      &::before {
+        color: var(--event-foreground);
+        display: inline-block;
+        margin-right: 9px;
+        width: 14px;
+        @include font-family-icons();
+      }
+
+      &.event-location::before {
+        content: '\f041';
+      }
+
+      &.event-duration::before {
+        content: '\f017';
+      }
+
+      &.event-description::before {
+        content: '\f024';
+      }
+    }
+  }
+
+  .event-past {
+    --event-background: #{$whitesmoke};
+    --event-foreground: #{$grey-dark};
+    --event-title: #{$black-deep};
+  }
+}

assets/css/_common/components/pages/tag-cloud.scss

@@ -0,0 +1,28 @@
+.tag-cloud {
+  text-align: center;
+
+  a {
+    display: inline-block;
+    margin: 10px;
+  }
+}
+
+@for $tag-cloud from 0 through 10 {
+  $tag-cloud-color : mix($tag-cloud-end, $tag-cloud-start, $tag-cloud * 10);
+  .tag-cloud-#{$tag-cloud} {
+    border-bottom-color: $tag-cloud-color;
+    color: $tag-cloud-color;
+  }
+}
+
+@if hexo-config('darkmode') {
+  @media (prefers-color-scheme: dark) {
+    @for $tag-cloud from 0 through 10 {
+      $tag-cloud-color : mix($tag-cloud-end-dark, $tag-cloud-start-dark, $tag-cloud * 10);
+      .tag-cloud-#{$tag-cloud} {
+        border-bottom-color: $tag-cloud-color;
+        color: $tag-cloud-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+.rtl {
+  &.post-body {
+    p, a, h1, h2, h3, h4, h5, h6, li, ul, ol {
+      direction: rtl;
+      font-family: UKIJ Ekran;
+    }
+  }
+
+  &.post-title {
+    font-family: UKIJ Ekran;
+  }
+}
+
+.post-button {
+  margin-top: 40px;
+  text-align: center;
+}
+
+.use-motion {
+  @if hexo-config('motion.transition.post_block') {
+    .post-block, .pagination, .comments {
+      visibility: hidden;
+    }
+  }
+
+  @if hexo-config('motion.transition.post_header') {
+    .post-header {
+      visibility: hidden;
+    }
+  }
+
+  @if hexo-config('motion.transition.post_body') {
+    .post-body {
+      visibility: hidden;
+    }
+  }
+
+  @if hexo-config('motion.transition.coll_header') {
+    .collection-header {
+      visibility: hidden;
+    }
+  }
+}
+
+@import 'post-collapse';
+@import 'post-body';
+@import 'post-gallery';
+@import 'post-header';
+@import 'post-nav';
+@import 'post-footer';
+@import 'post-widgets';
+@import 'post-reward';
+@import 'post-followme';

assets/css/_common/components/post/post-body.scss

@@ -0,0 +1,79 @@
+.post-body {
+  font-family: $font-family-posts;
+  @include word-wrap();
+
+  @include desktop-large() {
+    font-size: $font-size-large;
+  }
+
+  @include desktop() {
+    text-align: unquote(hexo-config('text_align.desktop'));
+  }
+
+  @include tablet-mobile() {
+    text-align: unquote(hexo-config('text_align.mobile'));
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    // Supported plugins: hexo-renderer-markdown-it hexo-renderer-marked
+    .header-anchor, .headerlink {
+      border-bottom-style: none;
+      color: inherit;
+      float: right;
+      font-size: $font-size-small;
+      margin-left: 10px;
+      opacity: 0;
+
+      &::before {
+        @include font-family-icons('\f0c1');
+      }
+    }
+
+    &:hover {
+      .header-anchor, .headerlink {
+        opacity: .5;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .exturl .fa {
+    font-size: $font-size-small;
+    margin-left: 4px;
+  }
+
+  // For fancybox and pandoc
+  .image-caption, img + figcaption, .fancybox + figcaption {
+    color: $grey-dark;
+    font-size: $font-size-small;
+    font-weight: bold;
+    line-height: 1;
+    margin: -15px auto 15px;
+    text-align: center;
+  }
+
+  iframe, img, video, embed {
+    margin-bottom: 20px;
+  }
+
+  .video-container {
+    height: 0;
+    margin-bottom: 20px;
+    overflow: hidden;
+    padding-top: 75%;
+    position: relative;
+    width: 100%;
+
+    iframe, object, embed {
+      height: 100%;
+      left: 0;
+      margin: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+}

assets/css/_common/components/post/post-collapse.scss

@@ -0,0 +1,109 @@
+.posts-collapse .post-content {
+  margin-bottom: $posts-collapse-margin;
+  margin-left: $posts-collapse-margin;
+  position: relative;
+
+  @include mobile() {
+    margin-left: $posts-collapse-margin-mobile;
+    margin-right: $posts-collapse-margin-mobile;
+  }
+
+  .collection-title {
+    font-size: $font-size-large;
+    position: relative;
+
+    &::before {
+      background: $grey-dark;
+      border: 1px solid white;
+      margin-left: -6px;
+      margin-top: -4px;
+      position: absolute;
+      top: 50%;
+      @include round-icon(10px);
+    }
+  }
+
+  .collection-year {
+    font-size: $font-size-largest;
+    font-weight: bold;
+    margin: 60px 0;
+    position: relative;
+
+    &::before {
+      background: $grey;
+      margin-left: -4px;
+      margin-top: -4px;
+      position: absolute;
+      top: 50%;
+      @include round-icon(8px);
+    }
+  }
+
+  .collection-header {
+    display: block;
+    margin-left: 20px;
+
+    small {
+      color: $grey;
+      margin-left: 5px;
+    }
+  }
+
+  .post-header {
+    border-bottom: 1px dashed $grey-light;
+    // 2px is equal to half the width of .posts-collapse::before
+    margin: 30px 2px 0;
+    padding-left: 15px;
+    position: relative;
+    transition: border $transition-ease;
+
+    &::before {
+      background: $grey;
+      border: 1px solid white;
+      left: -6px;
+      position: absolute;
+      top: $font-size-smallest;
+      transition: background $transition-ease;
+      @include round-icon(6px);
+    }
+
+    &:hover {
+      border-bottom-color: $grey-dim;
+
+      &::before {
+        background: $black-deep;
+      }
+    }
+  }
+
+  .post-meta-container {
+    display: inline;
+    font-size: $font-size-smallest;
+    margin-right: 10px;
+  }
+
+  .post-title {
+    display: inline;
+
+    a {
+      border-bottom: 0;
+      color: var(--link-color);
+    }
+
+    .fa-external-link-alt {
+      font-size: $font-size-small;
+      margin-left: 5px;
+    }
+  }
+
+  &::before {
+    background: $whitesmoke;
+    content: ' ';
+    height: 100%;
+    margin-left: -2px;
+    position: absolute;
+    // To do: 1.25em is inaccurate when .collection-title has line breaks on mobile
+    top: 1.25em;
+    width: 4px;
+  }
+}

assets/css/_common/components/post/post-followme.scss

@@ -0,0 +1,35 @@
+@if hexo-config('follow_me') {
+  .followme {
+    color: $grey;
+    padding: 1em 1.5em;
+    text-align: center;
+    @include post-card();
+
+    .social-list {
+      @include flex-wrap();
+
+      .social-item {
+        margin: .5em 2em;
+
+        @include tablet-mobile() {
+          margin: .5em .75em;
+        }
+      }
+
+      .social-link {
+        border: 0;
+        display: inline-block;
+        text-align: center;
+
+        .icon {
+          font-size: 1.75em;
+        }
+
+        .label {
+          display: block;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}

assets/css/_common/components/post/post-footer.scss

@@ -0,0 +1,41 @@
+// Flexbox layout makes it possible to reorder the child
+// elements of .post-footer through the `order` CSS property
+// Fix issue #16
+// To do: use `gap` instead of `margin`
+// See https://caniuse.com/flexbox-gap
+.post-footer {
+  @include flex-column();
+}
+
+.post-eof {
+  background: $grey-light;
+  height: 1px;
+  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
+  width: 8%;
+
+  .post-block:last-of-type & {
+    display: none;
+  }
+}
+
+@if hexo-config('creative_commons.post') {
+  .post-copyright ul {
+    list-style: none;
+    padding: .5em 1em;
+    @include post-card();
+  }
+}
+
+.post-tags {
+  margin-top: 40px;
+  text-align: center;
+
+  a {
+    display: inline-block;
+    font-size: $font-size-smaller;
+
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}

assets/css/_common/components/post/post-gallery.scss

@@ -0,0 +1,33 @@
+.post-gallery {
+  display: flex;
+  min-height: 200px;
+
+  .post-gallery-image {
+    flex: 1;
+
+    &:not(:first-child) {
+      clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
+      margin-left: -20px;
+    }
+
+    &:not(:last-child) {
+      margin-right: -20px;
+    }
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      // Override darkmode image opacity.
+      opacity: 1;
+      width: 100%;
+    }
+  }
+}
+
+.posts-expand .post-gallery {
+  margin-bottom: 60px;
+}
+
+.posts-collapse .post-gallery {
+  margin: 15px 0;
+}

assets/css/_common/components/post/post-header.scss

@@ -0,0 +1,120 @@
+.posts-expand .post-header {
+  font-size: $font-size-large;
+  margin-bottom: 60px;
+  text-align: center;
+}
+
+.posts-expand .post-title {
+  font-size: $font-size-largest;
+  font-weight: normal;
+  margin: initial;
+  @include word-wrap();
+
+  @if hexo-config('post_edit.enable') {
+    .post-edit-link {
+      border-bottom: 0;
+      color: $grey;
+      float: right;
+      font-size: $font-size-larger;
+      margin-left: -1.2em;
+      transition: color $transition-ease-in;
+
+      @include mobile-small() {
+        margin-left: initial;
+      }
+
+      &:hover {
+        color: $sidebar-highlight;
+      }
+    }
+  }
+}
+
+.posts-expand .post-title-link {
+  border-bottom: 0;
+  color: var(--link-color);
+  display: inline-block;
+  position: relative;
+
+  &::before {
+    background: var(--link-color);
+    bottom: 0;
+    content: '';
+    height: 2px;
+    // Fix issue #75
+    left: 0;
+    position: absolute;
+    transform: scaleX(0);
+    transition: transform $transition-ease;
+    width: 100%;
+  }
+
+  &:hover::before {
+    transform: scaleX(1);
+  }
+
+  .fa-external-link-alt {
+    font-size: $font-size-small;
+    margin-left: 5px;
+  }
+}
+
+.post-sticky-flag {
+  display: inline-block;
+  // Fix issue #80 #140
+  margin-right: 8px;
+  transform: rotate(30deg);
+}
+
+.posts-expand .post-meta-container {
+  color: $grey-dark;
+  font-family: $font-family-posts;
+  font-size: $font-size-smallest;
+  margin-top: 3px;
+
+  .post-description {
+    font-size: $font-size-small;
+    margin-top: 2px;
+  }
+
+  time {
+    border-bottom: 1px dashed $grey-dark;
+  }
+}
+
+// Flexbox layout makes it possible to reorder the child
+// elements of .post-meta through the `order` CSS property
+.post-meta {
+  @include flex-wrap();
+}
+
+// .post-meta-item exists in .post-meta and footer
+:not(.post-meta-break) + .post-meta-item::before {
+  content: '|';
+  margin: 0 .5em;
+}
+
+.post-meta-item-icon {
+  margin-right: 3px;
+}
+
+.post-meta-item-text {
+  @if not hexo-config('post_meta.item_text') {
+    display: none;
+  }
+
+  @include tablet-mobile() {
+    display: none;
+  }
+}
+
+.post-meta-break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+@if hexo-config('busuanzi_count.enable') and hexo-config('busuanzi_count.post_views') {
+  #busuanzi_container_page_pv {
+    display: none;
+  }
+}

assets/css/_common/components/post/post-nav.scss

@@ -0,0 +1,41 @@
+.post-nav {
+  border-top: 1px solid $gainsboro;
+  display: flex;
+  gap: 30px;
+  justify-content: space-between;
+  margin-top: 1em;
+  padding: 10px 5px 0;
+}
+
+.post-nav-item {
+  flex: 1;
+
+  a {
+    border-bottom: 0;
+    display: block;
+    font-size: $font-size-small;
+    line-height: 1.6;
+
+    &:active {
+      top: 2px;
+    }
+  }
+
+  .fa {
+    font-size: $font-size-smallest;
+  }
+
+  &:first-child {
+    .fa {
+      margin-right: 5px;
+    }
+  }
+
+  &:last-child {
+    text-align: right;
+
+    .fa {
+      margin-left: 5px;
+    }
+  }
+}

assets/css/_common/components/post/post-reward.scss

@@ -0,0 +1,56 @@
+.reward-container {
+  margin: $post-card-margin;
+  padding: 1em 0;
+  text-align: center;
+
+  button {
+    @include button($sidebar-highlight);
+    border: 2px solid $sidebar-highlight;
+    border-radius: 2px;
+    outline: 0;
+    transition: all $transition-ease;
+    vertical-align: text-top;
+  }
+}
+
+.post-reward {
+  display: none;
+  padding-top: 20px;
+
+  &.active {
+    display: block;
+  }
+
+  div {
+    display: inline-block;
+
+    span {
+      display: block;
+    }
+
+    @if hexo-config('reward_settings.animation') {
+      &:hover span {
+        animation: next-roll .1s infinite linear;
+        // The animation may affect :hover of img in dark mode
+        pointer-events: none;
+      }
+    }
+  }
+
+  img {
+    display: inline-block;
+    margin: .8em 2em 0;
+    max-width: 100%;
+    width: 180px;
+  }
+}
+
+@keyframes next-roll {
+  from {
+    transform: rotateZ(30deg);
+  }
+
+  to {
+    transform: rotateZ(-30deg);
+  }
+}

assets/css/_common/components/post/post-widgets.scss

@@ -0,0 +1,20 @@
+.post-widgets {
+  border-top: 1px solid $gainsboro;
+  margin-top: 15px;
+  text-align: center;
+}
+
+.wpac-rating-container {
+  height: 20px;
+  line-height: 20px;
+  margin-top: 10px;
+  padding-top: 6px;
+  text-align: center;
+}
+
+.social-like {
+  display: flex;
+  font-size: $font-size-small;
+  justify-content: center;
+  text-align: center;
+}

assets/css/_common/components/reading-progress.scss

@@ -0,0 +1,27 @@
+@if hexo-config('reading_progress.enable') {
+  .reading-progress-bar {
+    --progress: 0;
+    background: convert(hexo-config('reading_progress.color'));
+    height: convert(hexo-config('reading_progress.height'));
+    position: fixed;
+    z-index: $zindex-5;
+
+    @if hexo-config('reading_progress.reversed') {
+      width: calc(100% - var(--progress));
+    } @else {
+      width: var(--progress);
+    }
+
+    @if hexo-config('reading_progress.start_at') == 'right' {
+      right: 0;
+    } @else {
+      left: 0;
+    }
+
+    @if hexo-config('reading_progress.position') == 'bottom' {
+      bottom: 0;
+    } @else {
+      top: 0;
+    }
+  }
+}

assets/css/_common/components/third-party/disqusjs.styl

@@ -0,0 +1,39 @@
+if (hexo-config('disqusjs.enable') and hexo-config('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/third-party/gitalk.scss

@@ -0,0 +1,9 @@
+@if hexo-config('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/third-party/gitter.styl

@@ -0,0 +1,7 @@
+if (hexo-config('gitter.enable')) {
+  .gitter-open-chat-button {
+    $alignment = sidebar-toggle-alignment(false);
+    {$alignment[0]}: auto !important;
+    {$alignment[1]}: 10px !important;
+  }
+}

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

@@ -0,0 +1,18 @@
+@import 'disqusjs';
+@import 'gitalk';
+@import 'utterances';
+@import 'search';
+@import 'related-posts';
+@import 'math';
+@import 'gitter';
+
+.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/third-party/math.scss

@@ -0,0 +1,9 @@
+@if hexo-config('math.mathjax.enable') {
+  mjx-container[jax='CHTML'][display='true'], .has-jax {
+    overflow: auto hidden;
+  }
+
+  mjx-container[display='true'] + br {
+    display: none;
+  }
+}

assets/css/_common/components/third-party/related-posts.scss

@@ -0,0 +1,23 @@
+@if hexo-config('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/third-party/search.scss

@@ -0,0 +1,179 @@
+@if hexo-config('local_search.enable') or hexo-config('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: 80%;
+    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: $gainsboro;
+      if (hexo-config('darkmode')) {
+        @media (prefers-color-scheme: dark) {
+          background: $grey-dim;
+        }
+      }
+      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%;
+
+      &::-webkit-search-cancel-button {
+        display: none;
+      }
+    }
+
+    .search-result-container {
+      height: calc(100% - 55px);
+      overflow: auto;
+      padding: 5px 25px;
+
+      hr {
+        margin: 5px 0 10px;
+
+        &:first-child {
+          display: 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;
+    }
+  }
+}
+
+@if hexo-config('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;
+
+    .pagination-item {
+      display: inline-block;
+    }
+
+    .current .page-number {
+      @extend %page-number-current;
+      cursor: default;
+    }
+
+    .disabled-item {
+      visibility: hidden;
+    }
+  }
+}
+
+@if hexo-config('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;
+    }
+  }
+
+  mark.search-keyword {
+    background: transparent;
+    border-bottom: 1px dashed $red;
+    color: $red;
+    font-weight: bold;
+  }
+}

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

@@ -0,0 +1,5 @@
+@if hexo-config('utterances.enable') {
+  .utterances {
+    max-width: unset;
+  }
+}