hexo-theme-solitude 1.2.6 → 1.3.0

package/source/css/_page/tag.styl

@@ -1,9 +1,15 @@
 #tag
+  +minWidth1300()
+    padding: 4rem 2rem 1rem 2rem
+
+  +maxWidth768()
+    padding 0 1rem
+
   #tag-page-tags
     display flex
     flex-direction row
     flex-wrap wrap
-    margin 0 -0.25rem
+    margin 0
     margin-bottom 0.5rem
     position absolute
     z-index 1
@@ -17,6 +23,11 @@
     backdrop-filter saturate(180%) blur(20px)
     transition .1s ease-out
 
+    &:hover
+      max-height 1000px
+      transition .3s ease-out
+      background var(--sco-maskbgdeep)
+
     a
       padding .1rem .5rem
       margin .25rem .25rem
@@ -26,6 +37,8 @@
       border var(--style-border-always)
       display flex
       align-items center
+      background var(--sco-card-bg)
+      transition all .3s ease-out 0s
 
       &.select
         order -1
@@ -42,15 +55,4 @@
         background var(--sco-card-bg)
         color var(--sco-lighttext)
     +maxWidth768()
-      display none
-span.tags-punctuation
-  margin-right 2px
-  font-size .7rem
-  font-weight 700
-  display flex;
-  align-items center
-  transition .3s
-
-+minWidth1300()
-  #tag
-    padding: 4rem 2rem 1rem 2rem
+      display none

package/source/css/_widgets/{aside → _aside}/flip.styl

@@ -31,6 +31,10 @@ faceback = hexo-config('aside.flip.backface')
       opacity 0
       transition .3s ease-out
 
+    &:hover
+      #flip-content
+        transform rotateY(180deg)
+
     #flip-wrapper
       perspective 1000
       position relative
@@ -38,9 +42,6 @@ faceback = hexo-config('aside.flip.backface')
       height 110px
       z-index 1
 
-    #flip-wrapper:hover #flip-content
-      transform rotateY(180deg)
-
     #flip-wrapper #flip-content
       width 100%
       height 100%
@@ -64,5 +65,6 @@ faceback = hexo-config('aside.flip.backface')
       background url(faceback) center center no-repeat
       background-size 100%
 
-    [data-theme='dark'] #aside-content .card-widget.card-platform
-      background var(--sco-card-bg)
+if !hexo-config('aside.flip.darkcolor')
+  [data-theme='dark'] #aside-content .card-widget.card-platform
+    background var(--sco-card-bg)

package/source/css/_widgets/{aside → _aside}/history.styl

@@ -9,8 +9,15 @@
       flex-direction column
       align-items flex-start
 
-    #history-baidu > .blog-slider__pagination
-      display none
+    #history-baidu
+      height 100px
+      overflow hidden
+      > .blog-slider__pagination
+        display none
+
+      .history_swiper-containe
+        .swiper-wrapper
+          height 20px
 
     .history_slide_time
       color var(--sco-secondtext)

package/source/css/_widgets/_aside/index.styl

@@ -0,0 +1,96 @@
+#aside-content
+  width 300px
+
+  > .card-widget:first-child
+    transition: .3s
+    border: none
+    box-shadow: none
+    background: var(--sco-main)
+    margin-top: 0
+
+  +minWidth900()
+    padding-left 15px
+
+  +maxWidth1200()
+    display none
+
+  +minWidth1300()
+    padding-left 1rem
+    animation slide-in .6s .3s backwards
+
+  .card-widget.card-power, .card-widget.card-history, .card-widget.card-welcome
+    padding: .4rem .6rem !important
+
+  .item-headline
+    padding-bottom
+    margin-left 8px
+    font-size 1em
+    font-weight 700
+    display flex
+    align-items center
+
+    i
+      font-size 16px
+      max-width 20px
+
+    span
+      margin-left 4px
+
+    + div, + ul
+      padding 0
+      -webkit-user-select none
+
+  .card-widget
+    box-shadow var(--sco-shadow-border)
+    background var(--sco-card-bg)
+    border var(--style-border)
+    transition 0.3s
+    border-radius 12px
+    position relative
+    overflow hidden
+    margin-top 1rem
+    padding 1rem 1.2rem
+
+    &:hover
+      box-shadow var(--sco-shadow-border)
+
+    > .card-widget
+      &:first-child
+        transition 0.3s
+        border none
+        margin-top 0
+
+  .sticky_layout
+    top calc(60px + 1rem)
+    position sticky
+    transition: top .3s ease 0s
+
++minWidth900()
+  html.hide-aside .layout
+    -webkit-box-pack: center
+    justify-content: center
+    >div:first-child
+      width 100%
+
+  html.hide-aside .layout > .aside-content
+    display: none
+
+@import "toc.styl"
+
+if "about" in aside
+  @import "info.styl"
+
+if "allInfo" in aside
+  @import "allinfo.styl"
+
+if "wlcome" in aside
+  @import "welcome.styl"
+
+if "history" in aside
+  @import "history.styl"
+
+if "newestPost" in aside
+  @import "newPost.styl"
+
+if "flip" in aside
+  @import "flip.styl"

package/source/css/_widgets/{aside → _aside}/info.styl

@@ -2,11 +2,11 @@
   .card-widget
     &:hover
       .avatar-sticker
-        opacity: 0
-        transform: scale(0)
+        opacity 0
+        transform scale(0)
 
     &.card-recent-post
-      padding: .4rem .6rem !important
+      padding .4rem .6rem !important
 
     &.card-info
       padding 0 !important
@@ -43,13 +43,13 @@
       box-shadow var(--sco-shadow-yellow)
 
       &:hover img
-        transform: scale(1.03)
+        transform scale(1.03)
 
   .card-info
     .avatar-sticker
       position absolute
-      bottom 2px
-      right 2px
+      bottom -2px
+      right -2px
       width 33px
       height 33px
       line-height 34px
@@ -59,14 +59,14 @@
       justify-content center
       transition .3s .2s
       transform scale(1)
-      background var(--sco-white)
+      background var(--sco-card-bg)
       border-radius 50%
 
-      svg
+      img
         width 26px
         height 26px
 
-      ../:hover .avatar-sticker
+      ../ :hover .avatar-sticker
         opacity 0
         transform scale(0)
 
@@ -74,11 +74,7 @@
       font-size 12px
       color var(--sco-card-bg)
       opacity .6
-      line-height 1.5
-      -webkit-line-clamp 2
-      display -webkit-box
-      overflow hidden
-      -webkit-box-orient vertical
+      line-height 1
 
     #author-info__sayhi
       text-align center
@@ -94,9 +90,16 @@
       margin auto
       min-width 100px
 
+      / [data-theme=dark] &
+        background #00000015
+        color var(--sco-black)
+
+        &:hover
+          color var(--sco-white)
+
       &:hover
         background var(--sco-card-bg)
-        color var(--sco-fontcolor) !important
+        color var(--sco-main)
         transform scale(1.1)
 
     .card-info-avatar.is-center
@@ -105,19 +108,19 @@
       align-items flex-start
 
     .avatar-img-group
-      width: 118px
-      height: 118px
-      right: calc(50% - 59px)
-      top: 90px
-      border-radius: 500px
-      position: absolute
-      transition: cubic-bezier(.69, .39, 0, 1.21) .3s
-      transform-origin: bottom
-      border: 5px solid var(--sco-card-bg)
-
-      ../:hover .avatar-img-group
-        opacity: 0
-        transform: scale(0)
+      width 118px
+      height 118px
+      right calc(50% - 59px)
+      top 90px
+      border-radius 500px
+      position absolute
+      transition cubic-bezier(.69, .39, 0, 1.21) .3s
+      transform-origin bottom
+      border 5px solid var(--sco-card-bg)
+
+      ../ :hover .avatar-img-group
+        opacity 0
+        transform scale(0)
 
     .author-info__name
       text-align left
@@ -133,46 +136,46 @@
       width 100%
 
     .author-info__description_group
-      position: absolute
-      top: 50px
-      width: 100%
-      left: 0
-      padding: 1.2rem
-      opacity: 0
-      transition: .3s
+      position absolute
+      top 50px
+      width 100%
+      left 0
+      padding 1.2rem
+      opacity 0
+      transition .3s
 
-      ../:hover .author-info__description_group
-        opacity: 1
+      ../ :hover .author-info__description_group
+        opacity 1
 
       .author-info__description
-        line-height: 1.38
-        margin: .3rem 0
-        text-align: justify
-        color: rgba(255, 255, 255, .8)
+        line-height 1.38
+        margin .3rem 0
+        text-align justify
+        color var(--sco-card-bg)
 
         b
-          color: var(--sco-white)
+          color var(--sco-card-bg)
 
       .author-info__description2
-        line-height: 1.38
-        margin: .3rem 0
-        text-align: justify
-        width: 100%
-        z-index: 2
-        color: rgba(255, 255, 255, .8)
+        line-height 1.38
+        margin .3rem 0
+        text-align justify
+        width 100%
+        z-index 2
+        color var(--sco-card-bg)
 
         b
-          color: var(--sco-white)
+          color var(--sco-card-bg)
 
     .author-info__bottom-group
-      display: flex
-      justify-content: space-between
-      position: absolute
-      padding: 1.2rem
-      width: 100%
-      left: 0
-      bottom: 0
-      align-items: center
+      display flex
+      justify-content space-between
+      position absolute
+      padding 1.2rem
+      width 100%
+      left 0
+      bottom 0
+      align-items center
 
     .card-info-data
       display table
@@ -181,11 +184,11 @@
       table-layout fixed
 
       > div:nth-child(0) > a > div.headline
-        font-weight: 700
+        font-weight 700
 
       > .card-info-data-item
         display table-cell
-        transition: .3s
+        transition .3s
 
         a
           .headline
@@ -202,15 +205,16 @@
           border-radius 5px
 
     .card-info-social-icons
-      margin .3rem 0 -.3rem
-      display: flex
-      justify-content: flex-start
-      flex-direction: row
-      flex-wrap: nowrap
-      cursor: pointer
+      margin 0
+      display flex
+      justify-content flex-start
+      flex-direction row
+      flex-wrap nowrap
+      cursor pointer
 
       .social-icon
-        margin 0 .5rem
+        margin 0
+        margin-left 8px
         color var(--sco-fontcolor)
         font-size 1.4em
         cursor pointer
@@ -220,19 +224,14 @@
         transition all .3s ease 0s
         padding 8px
         border-radius 32px
-        cursor: pointer
-        background: var(--sco-white-op)
-        color: var(--sco-white)
-        font-size: 1rem
-        width: 40px
-        height: 40px
-        display: flex
-        align-items: center
-        justify-content: center
-
-        +minWidth1300()
-          color var(--sco-white)
-          background var(--sco-black-op)
+        cursor pointer
+        background var(--sco-white-op)
+        color var(--sco-card-bg)
+        width 40px
+        height 40px
+        display flex
+        align-items center
+        justify-content center
 
         &:hover
           background var(--sco-white)
@@ -240,6 +239,13 @@
           color var(--sco-main)
           box-shadow none
 
+        / [data-theme=dark] &
+          background var(--sco-black-op)
+
+          &:hover
+            background-color var(--sco-black)
+            color var(--sco-white)
+
     img.avatar-img
       width 118px
       right 0
@@ -251,13 +257,4 @@
 
 [data-theme=dark] #aside-content
   > .card-widget.card-info
-    border: var(--style-border-always)
-
-  .card-info
-    .card-info-social-icons
-      i
-        color: var(--sco-card-bg)
-
-        &:hover
-          background var(--sco-card-bg)
-          color var(--sco-fontcolor)
+    border var(--style-border-always)

package/source/css/_widgets/{aside → _aside}/newPost.styl

@@ -52,4 +52,10 @@
             font-size 95%
             line-height 1.3
             -webkit-line-clamp 2
-            overflow hidden
+            overflow hidden
+
+          .article-recent_post_categories
+            font-size 12px
+            font-weight 700
+            opacity .6
+            line-height 1

package/source/css/_widgets/{aside → _aside}/toc.styl

@@ -1,6 +1,6 @@
 #aside-content
   .card-toc
-    padding .5rem .5rem !important
+    padding .5rem .5rem
 
     &:hover
       box-shadow var(--sco-shadow-border)
@@ -28,22 +28,44 @@
 
   #card-toc
     +minWidth901()
-      right 0 !important
+      right 0
 
     .toc-content
       overflow-y: auto
       max-height: calc(100vh - 300px)
+
+      * > .toc-item > .toc-child
+        margin-left 10px
+        transition display .3s ease-in-out 0s
+        padding-left 10px
+
       ol
         margin 0
-        padding 0
+        padding-left .4rem
 
         &ul
           list-style: none
 
+      > ol
+        padding-left 0
+
+      .toc-child
+        display none
+
+      .toc-child .toc-child
+        display none
+
+        &.active
+          display block
+
+      .toc-item.active > .toc-child
+            display block
+
       &:hover
       .toc-content
         .toc-link:not(.active) span
-          filter: blur(0)
+          if hexo-config('aside.toc.vague')
+            filter: blur(0)
           opacity: 1
 
       .toc-item.active .toc-link
@@ -73,7 +95,8 @@
         &:not(.active) span
           opacity .6
           cursor pointer
-          filter blur(1px)
+          if hexo-config('aside.toc.vague')
+            filter blur(1px)
           transition .3s
 
           &:hover

package/source/css/_widgets/{comment → _comment}/index.styl

@@ -73,23 +73,15 @@ div#post-comment
         color var(--sco-main)
 
   .comment-tips
-    background-color rgba(103, 194, 58, .9)
+    background-color rgba(103, 194, 58, 0.13)
     border var(--style-border-always)
     border-color var(--sco-green)
-    color var(--sco-white)
-    border-radius 8px 8px 0 0
+    color var(--sco-green)
+    border-radius 8px
     padding 8px 12px
-    margin-top .5rem
+    margin-top 0.5rem
     display none
     width 100%
-    position absolute
-    top 50px
-    z-index 1000
-    opacity 1
-    transition .3s
-
-    &:hover
-      opacity 0
 
     &.show
       display flex

package/source/css/_widgets/{comment → _comment}/twikoo.styl

@@ -285,6 +285,7 @@
 .tk-meta-input
   .el-input
     .el-input-group__prepend
+      border-radius 12px 0 0 12px
       -webkit-user-select none
 
 @media screen and (max-width: 768px)
@@ -317,11 +318,12 @@ img.tk-avatar-img
 .el-input--small
   .el-input__inner
     padding 8px
+  .el-input__inner, .el-textarea__inner
+   border-radius 12px
 
 .el-input.el-input--small.el-input-group.el-input-group--prepend
   border-radius 12px
   background var(--sco-secondbg)
-  border var(--style-border-always)
 
 .el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before
   content '输入QQ号会自动获取昵称和头像'
@@ -374,13 +376,14 @@ img.tk-avatar-img
   border 1px solid var(--sco-card-border) !important
   color var(--sco-fontcolor) !important
   padding-left 8px
+  border-radius 12px
 
 .page
   .el-input__inner
     background var(--sco-card-bg) !important
 
 .el-input__inner:focus
-  border 1px solid var(--sco-main) !important
+  border none
 
 .el-textarea__inner
   background var(--sco-secondbg) !important

package/source/css/_widgets/{comment → _comment}/waline.styl

@@ -9,6 +9,16 @@
     .wl-panel
       margin 0 !important
 
+    .wl-avatar
+      margin-right 1rem
+
+      a
+        img
+          flex-shrink 0
+          overflow hidden
+          text-align center
+          border-radius 65px
+
     .wl-footer
       .wl-info
         button
@@ -39,7 +49,8 @@
       font-weight normal
 
   .wl-cards
-    font-size 16px!important
+    font-size 16px !important
+
     .wl-comment-actions
       button
         margin-right 15px
@@ -47,12 +58,13 @@
 
         &:hover
           color var(--sco-main)
+
     .wl-head .wl-nick
       font-size 20px !important
       color var(--sco-lighttext)
       font-weight bolder
 
-    .wl-meta>span
+    .wl-meta > span
       background var(--sco-gray)
       border-radius 5px
       color var(--sco-card-bg)
@@ -66,10 +78,14 @@
         overflow hidden
         text-align center
         border-radius 2.5rem
-        border 2px solid var(--sco-white)
+        border var(--style-border-always)
+
+  .wl-empty
+    font-size 16px
+    color var(--sco-gray)
 
 [data-waline] a
-  color var(--sco-main) !important
+  color var(--sco-fontcolor) !important
 
 .wl-content pre, .wl-content pre[class*=language-]
-  padding .5rem!important
+  padding .5rem !important