hexo-theme-redefine-x 2.8.5

package/source/css/layout/_partials/page-template.styl

@@ -0,0 +1,147 @@
+$friend-link-item-height = 82px
+$friend-link-item-height-tablet = 68px
+$friend-link-item-interval = 16px
+$friend-link-item-border-radius = 9px
+
+@require '../../common/variables'
+
+.page-template-container
+  redefine-container(
+    false,
+    0,
+    0,
+    30px,
+    30px
+  )
+
+  +redefine-mobile()
+    padding 1.2rem 0.2rem
+    box-shadow none
+
+    &:hover
+      box-shadow none
+
+  .page-template-content
+    color var(--default-text-color)
+
+    h1, h2, h3, h4, h5, h6
+      &:first-child
+        margin 6px 0 36px 0
+        border-bottom none
+        line-height 1
+
+  #shuoshuo-content
+    img:hover
+      cursor zoom-in
+
+
+  #masonry-container
+    position relative
+    display none
+    opacity 0
+    transition opacity 0.1s ease-in
+
+    .masonry-item
+      position absolute
+      box-sizing border-box
+
+      &:hover
+        img
+          box-shadow var(--redefine-box-shadow)
+
+      img
+        width 100%
+        border-radius $redefine-border-radius-medium
+        box-shadow var(--redefine-box-shadow-flat)
+        cursor zoom-in
+
+  /* Loading */
+  .loading-placeholder
+    display block
+    justify-content center
+    align-items center
+    opacity 1
+    transition opacity 0.1s ease-out
+
+  .loading
+    -webkit-animation gradient-slide 1.1s ease infinite
+    animation gradient-slide 1.1s ease infinite
+    background 0 0 / 300% 300% linear-gradient(120deg, #9c9c9c20 40%, #83838325 50%, #9c9c9c20 60%)
+
+  .flex-grid
+    display grid
+    grid-template-columns repeat(auto-fill, minmax(150px, 1fr))
+    gap 10px
+
+    @media screen and (min-width: 768px)
+      grid-template-columns repeat(auto-fill, minmax(255px, 1fr))
+
+  .card
+    border 1px solid var(--border-color)
+    border-radius $redefine-border-radius-medium
+    box-sizing border-box
+    min-height 80vh
+    padding 30px
+
+  @keyframes gradient-slide
+    0%
+      background-position 100% 50%
+
+    to
+      background-position 0% 50%
+
+  /* Images */
+  .image-container
+    position relative
+
+  .image-title
+    position absolute
+    top 5px
+    left 5px
+    color var(--default-text-color)
+    background-color var(--background-color-transparent-40)
+    padding 5px 10px
+    font-size 14px
+    opacity 0
+    backdrop-filter blur(10px)
+    -webkit-backdrop-filter blur(10px)
+    border-radius $redefine-border-radius-small
+    transition opacity 0.2s ease-out
+
+  .image-description
+    position absolute
+    bottom 11px
+    right 5px
+    color var(--default-text-color)
+    background-color var(--background-color-transparent-40)
+    padding 5px 10px
+    font-size 14px
+    opacity 0
+    max-width 80%
+    backdrop-filter blur(10px)
+    -webkit-backdrop-filter blur(10px)
+    border-radius $redefine-border-radius-small
+    transition opacity 0.2s ease-out
+
+  figure.image-caption
+    img
+      margin-bottom 0
+
+    figcaption
+      margin-top 5px
+      margin-bottom 10px
+      text-align center
+      font-size 0.9rem
+      color var(--third-text-color)
+
+  .image-container:hover .image-title, .image-container:hover .image-description
+    opacity 1
+
+  .image-container img
+    width 100%
+    height auto
+    transition box-shadow 0.3s ease-in-out
+    overflow hidden
+
+  .image-container:hover img
+    box-shadow var(--redefine-box-shadow-hover)

package/source/css/layout/_partials/paginator.styl

@@ -0,0 +1,65 @@
+.paginator
+  font-size 1rem
+  margin-top 30px
+  border-radius 12px
+  display flex
+  justify-content center
+
+  a
+    margin 0 0.3rem
+
+  a.active
+    color var(--background-color)
+    background var(--primary-color)
+
+  a.prev
+    float left
+
+    +redefine-mobile()
+      display none
+
+  a.next
+    float right
+
+    +redefine-mobile()
+      display none
+
+  .space
+    padding 8px 10px
+
+    +redefine-mobile()
+      padding 8px 2px
+
+  a.page-number, span.page-number, a.prev, a.next
+    display inline-block
+    position relative
+    text-align center
+    cursor pointer
+    white-space nowrap
+    border-radius $redefine-border-radius-small
+    padding 8px 16px
+    background var(--background-color)
+    hover-style(
+      true,
+      1.06,
+      1.06
+    )
+
+    &:hover
+      color var(--background-color)
+      background var(--primary-color)
+
+    &:active
+      transform scale(0.95)
+      transition transform 0.1s ease
+
+  span.current
+    color var(--background-color)
+    background var(--primary-color)
+
+  i.fa-regular
+    color var(--default-text-color)
+
+  .extend:hover
+    i.fa-regular
+      color var(--background-color)

package/source/css/layout/_partials/post-tools.styl

@@ -0,0 +1,43 @@
+$li-border-radius = 10px
+$li-margin-bottom = 5px
+$post-tool-button-width = 42px
+
+.post-tools-container
+  .article-tools-list
+    li
+      cursor pointer
+      width $post-tool-button-width
+      height $post-tool-button-width
+      border-radius $li-border-radius
+      font-size 1.2rem
+      display flex
+      align-items center
+      justify-content center
+      margin-bottom $li-margin-bottom
+      background var(--background-color)
+      color var(--default-text-color)
+
+      i
+        color var(--default-text-color)
+
+      &:hover
+        background var(--primary-color)
+        color var(--background-color)
+
+        i
+          color var(--background-color)
+
+      &:last-child
+        margin-bottom 0
+
+      hover-style(
+        true,
+        1.06,
+        1.06
+      )
+
+      &.page-aside-toggle
+        display none
+
+        +redefine-tablet()
+          display none !important

package/source/css/layout/_partials/progress-bar.styl

@@ -0,0 +1,33 @@
+.progress-bar-container
+    position fixed
+    top 0
+    left 0
+    width 100%
+    z-index $z-index-9
+
+    if (hexo-config('global.scroll_progress.bar') == true)
+        .scroll-progress-bar
+            position absolute
+            top 0
+            left 0
+            width 0
+            height $scroll-progress-bar-height
+            visibility hidden
+            z-index $z-index-7
+            background var(--primary-color)
+            transition-t('width, opacity', '0, 0', '0.1, 0.1', 'ease, ease')
+
+            &.hide
+                display none !important
+
+html.is-animating
+    .scroll-progress-bar
+        opacity 0
+        transition opacity 0.1s ease-out
+
+
+
+.swup-progress-bar
+    background: #12c2e9;
+    height 2px
+    background linear-gradient(to right, #12c2e9, #c471ed, #f64f59);

package/source/css/layout/_partials/side-tools.styl

@@ -0,0 +1,87 @@
+$right-bottom-tools-width = 42px
+$right-bottom-tools-font-size = 1.3rem
+$right-bottom-tools-border-radius = 12px
+
+.side-tools-container
+  .right-bottom-tools
+    width $right-bottom-tools-width
+    height $right-bottom-tools-width
+    font-size $right-bottom-tools-font-size
+    margin-bottom 5px
+    cursor pointer
+    border-right none
+    border-radius $right-bottom-tools-border-radius
+    box-shadow var(--redefine-box-shadow)
+    color var(--default-text-color)
+    background var(--background-color)
+
+    i
+      color var(--default-text-color)
+
+    &:hover
+      color var(--background-color)
+      background var(--primary-color)
+      box-shadow var(--redefine-box-shadow)
+
+      i
+        color var(--background-color)
+
+    +redefine-tablet()
+      width: $right-bottom-tools-width * 0.9
+      height: $right-bottom-tools-width * 0.9
+      font-size: $right-bottom-tools-font-size * 0.9
+      margin-bottom 2px
+
+    &.rss
+      a
+        border-radius $right-bottom-tools-border-radius
+        width 100%
+        height 100%
+
+        &:hover
+          color var(--background-color)
+          background var(--primary-color)
+          box-shadow var(--redefine-box-shadow)
+
+  .hidden-tools-list
+    opacity 0
+    transform translateX(250%)
+    transition-t('transform, opacity', '0, 0', '0.2, 0.2', 'ease, ease')
+
+    .tool-expand-width
+      +redefine-tablet()
+        display none
+
+    &.show
+      opacity 1
+      transform translateX(0)
+
+  .visible-tools-list
+    if (hexo-config('global.scroll_progress.percentage') == true)
+      .tool-scroll-to-top
+        display none
+
+        &.show
+          display flex
+
+        &:hover
+          .percent
+            display none
+
+          .arrow-up
+            display flex
+
+        .arrow-up
+          display none
+
+        .percent
+          display flex
+          font-size 1rem
+
+    if (hexo-config('plugins.aplayer.enable') == true && hexo-config('plugins.aplayer.type') == 'mini')
+      .tool-aplayer
+        +redefine-tablet()
+          display none
+
+        +redefine-mobile()
+          display none

package/source/css/layout/_partials/tagcloud.styl

@@ -0,0 +1,136 @@
+if (hexo-config('page_templates.tags_style') == 'cloud')
+  +redefine-mobile()
+    padding 1.2rem 0.2rem
+    box-shadow none
+
+    &:hover
+      box-shadow none
+
+  .tagcloud-header
+    margin 6px 0 12px 0
+    font-size 3.2rem
+    padding 0
+    line-height 1
+    font-weight bold
+    color var(--second-text-color)
+
+  .tagcloud-content
+    text-align justify
+
+    a
+      display inline-block
+      box-sizing border-box
+      padding 0.7rem 0.5rem
+      line-height 0.7
+else
+  +redefine-mobile()
+    padding 1.2rem 0.2rem
+    box-shadow none
+
+    &:hover
+      box-shadow none
+
+  .tagcloud-header
+    margin 6px 0 12px 0
+    font-size 3.2rem
+    padding 0
+    line-height 1
+    font-weight bold
+    color var(--second-text-color)
+
+  .tagcloud-content
+    text-align justify
+
+    &:hover
+      .tag-list
+        a
+          filter blur(0px) !important
+          transition filter 0.3s ease
+
+    // 定义数量是否显示
+    .tag-list[data-show-value] a::after
+      content attr(data-weight)
+      font-size 1.5rem
+      background-color var(--third-background-color)
+      padding 4px 8px
+      min-width 35px
+      margin-left 10px
+      border-radius $redefine-border-radius-small
+      color var(--third-text-color)
+      transition background-color 0.2s ease
+
+    .tags-punctuation, .tag-list
+      list-style none
+      padding-left 0
+      display flex
+      flex-wrap wrap
+      align-items center
+      justify-content center
+      line-height 2.5rem
+
+      li
+        /*
+        &:nth-child(1n+1) a { --color: #0cabeb; --opacity: 1  }
+        &:nth-child(2n+1) a { --color: #181; --opacity: .9 }
+        &:nth-child(3n+1) a { --color: #33a; --opacity: .7 }
+        &:nth-child(4n+1) a { --color: #c38; --opacity: .4 }
+        &:nth-child(5n+1) a { --color: rgb(184, 174, 62); --opacity: .8 }
+          */
+        a
+          // 根据自定义data设置样式
+          &[data-weight]
+            --blur 0
+
+          &[data-weight='1']
+            --blur 3px
+
+          &[data-weight='2']
+            --blur 1.8px
+
+          &[data-weight='3']
+            --blur 0.8px
+
+          &[data-weight='4']
+            --blur 0.4px
+
+          &[data-weight='5']
+            --blur 0
+
+          font-size 1.4rem
+          opacity var(--opacity)
+          padding 0.9rem 1.4rem
+          display block
+          position relative
+          flex 1
+          border-radius $redefine-border-radius-large
+          box-shadow var(--redefine-box-shadow)
+          margin 10px
+          color var(--default-text-color)
+          filter blur(var(--blur))
+          transform scaleX(1) scaleY(1)
+          background-color var(--default-background-color)
+          transition transform 0.2s ease, filter 0.3s ease, color 0.2s ease, background-color 0.2s ease
+
+          .fa-hashtag
+            margin-right 5px
+            opacity 0.3
+
+          &:hover
+            transform scaleX(1.05) scaleY(1.05)
+            box-shadow var(--redefine-box-shadow-hover)
+            background-color var(--primary-color)
+            color var(--invert-text-color)
+            transition transform 0.3s ease, background-color 0.3s ease, color 0.3s ease
+
+            .fa-hashtag
+              margin-right 5px
+              color var(--invert-text-color)
+              opacity 0.4
+
+          &:active
+            transform translateY(2px)
+            transition transform 0.1s
+
+    @media (prefers-reduced-motion )
+      .tag-list *
+        transition none !important

package/source/css/layout/_partials/toc.styl

@@ -0,0 +1,105 @@
+.post-toc-wrap
+  width 100%
+  font-size 0.92rem
+  box-sizing border-box
+  font-family $english-font-family, $chinese-font-family, 'Noto Sans', 'Noto Sans SC', sans-serif
+
+  .post-toc
+    .toc-title
+      font-size 0.8rem
+      color var(--default-text-color)
+      font-weight 500
+      margin-bottom 0.2rem
+
+    .page-title
+      white-space normal
+      font-size 1.1rem
+      color var(--second-text-color)
+      font-weight bold
+      margin-bottom 0.6rem
+
+    ol
+      ol
+        border-left 2px dotted var(--shadow-color-1)
+
+      list-style none
+      margin 0
+      padding 0 2px 12px 10px
+      text-align left
+
+      &:last-child
+        padding-bottom 0
+
+      > ol
+        padding-left 0
+
+      a
+        transition-property all
+        transition()
+
+    .nav-item
+      line-height 2
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+      // word-wrap:break-word
+      font-size 0.9rem
+      transition all 0.3s ease
+
+      a > span
+        &:first-child::before
+          content ' '
+          width 10px
+          height 1.7rem
+          margin auto 0
+          transform translate(-12px, 0)
+          border-left 2px solid var(--primary-color)
+          position absolute
+          margin-right 4px
+          color var(--primary-color)
+          opacity 0
+          transition all 0.1s linear
+
+    .nav
+      .nav-child
+        display hexo-config('articles.toc.expand') ? block : none
+
+      .active > .nav-child
+        display block
+
+      .active-current > .nav-child
+        display block
+
+        > .nav-item
+          display block
+
+      .nav-number, .nav-text
+        color var(--third-text-color)
+        padding-left 0
+        transition all 0.3s ease
+
+      .active > a
+        .nav-number, .nav-text
+          color var(--primary-color)
+          font-weight bold
+
+      .active-current
+        .nav-number, .nav-text
+          color var(--primary-color) !important
+          font-weight bold
+          transition all 0.3s ease
+          // padding-left 12px
+
+      .active-current > span
+        &:first-child::before
+          content ' '
+          width 10px
+          height 1.7rem
+          margin auto 0
+          transform translate(-12px, 0)
+          border-left 2px solid var(--primary-color)
+          position absolute
+          margin-right 4px
+          color var(--primary-color)
+          opacity 1
+          transition all 0.1s linear

package/source/css/layout/animations.styl

@@ -0,0 +1,42 @@
+.transition-fade
+  transition 0.4s
+  opacity 1
+
+.transition-fade-up
+  transform translateY(0)
+  opacity 1
+  transition transform 0.4s ease, opacity 0.4s ease
+
+.transition-fade-down
+  transform translateY(0)
+  opacity 1
+  transition transform 0.4s ease, opacity 0.4s ease
+
+// Define transitions for both classes
+html.is-changing
+  .transition-fade
+    transition opacity 0.4s ease
+    opacity 1
+  
+  .transition-fade-up
+    transition transform 0.4s ease, opacity 0.4s ease
+    transform translateY(0)
+    opacity 1
+
+  .transition-fade-down
+    transition transform 0.4s ease, opacity 0.4s ease
+    transform translateY(0)
+    opacity 1
+
+// Define states for unloaded pages
+html.is-animating
+  .transition-fade
+    opacity 0
+  
+  .transition-fade-up
+    transform translateY(20px)
+    opacity 0
+
+  .transition-fade-down
+    transform translateY(-20px)
+    opacity 0

package/source/css/layout/archive-content.styl

@@ -0,0 +1,8 @@
+.archive-container
+  redefine-container(
+    false,
+    0,
+    0,
+    30px,
+    30px
+  )