hexo-theme-solitude 1.2.6 → 1.3.0

package/source/css/_layout/header.styl

@@ -1,31 +1,38 @@
 #page-header
   position relative
   width 100%
-  background-position center center
-  background-size cover
-  background-repeat no-repeat
   transition all .5s ease 0s
-  background-image none !important
   display flex
   justify-content center
 
-  +minWidth1300()
-    height: 25rem
+  &.not-top-img
+    height 60px
+    background 0 center
 
-  &.full_page
-    height 20rem
-    background-attachment fixed
-    height 2rem
-    background-image none !important
-    background-color var(--sco-none)
+    #nav
+      z-index 998
+      transition .3s
+      background var(--sco-card-bg)
 
-    #site-info
-      position absolute
-      top 7.8rem
-      padding 0 .5rem
-      width 100%
-      display none
+      a
+        color var(--sco-fontcolor)
 
+        &:hover
+          color var(--sco-card-bg)
+
+          +maxWidth768()
+            align-items flex-end
+            color var(--sco-fontcolor)
+
+    &:not(.nav-fixed)
+      #nav
+        background var(--sco-none)
+        transition .3s
+
+        +maxWidth768()
+          transition 0s
+
+#page-header
   #site-title
     margin 0
     color var(--sco-white)
@@ -53,7 +60,6 @@
     .social-icon
       margin 0 .5rem
       color var(--light-grey)
-      text-shadow rgba(0, 0, 0, .15) .1rem .1rem .2rem
       font-size 1.43em
       cursor pointer
 
@@ -86,111 +92,6 @@
     +maxWidth768()
       top 7rem
 
-  &.post-bg
-    height 20rem
-    background-color var(--sco-background)
-    transition .6s
-    overflow hidden
-
-    +minWidth1300()
-      height: 25rem
-
-    +maxWidth768()
-      height 30rem
-      background-color var(--sco-main) !important
-      transition 0s
-      margin-bottom -12px
-
-    &::before
-      transition .3s
-      height 20rem
-      background-color var(--sco-main)
-      opacity 1
-      position absolute
-      top 0
-      left 0
-      display block
-      width 100%
-      content ""
-
-      +minWidth1300()
-        height 25rem
-        opacity 0
-        background-color var(--sco-main)
-        animation slide-in-op .6s 0s forwards
-
-      +maxWidth768()
-        height 15rem
-
-  #post-info
-    top 0
-    position absolute
-    padding 0 3rem
-    margin 0 auto
-    z-index 10
-    color var(--sco-white)
-    max-width 1400px
-    display flex
-    flex-direction column
-    align-items flex-start
-    height calc(100% + 0px)
-    justify-content center
-    animation slide-in .6s 0s backwards
-    width 100%
-    text-align center
-
-    +minWidth1300()
-      height calc(100% + 0px)
-      top 0
-      display flex
-      justify-content center
-
-    +maxWidth900()
-      bottom 1.5rem
-      text-align left
-
-    +maxWidth768()
-      padding 0 6%
-      justify-content normal
-      padding-top 18rem
-
-  &.not-top-img
-    height 60px
-    background 0 center
-    margin-bottom 0
-
-    #nav
-      z-index 500
-      transition .3s
-      background var(--sco-card-bg)
-
-      a
-        color var(--sco-fontcolor)
-        text-shadow none
-
-        &:hover
-          color var(--sco-white)
-          text-shadow none
-          align-items center
-
-          +maxWidth768()
-            align-items flex-end !important
-            color var(--sco-fontcolor)
-
-      .back-home-button
-        color var(--sco-fontcolor)
-
-        i
-          font-size 20px
-
-    &:not(.nav-fixed)
-      #nav
-        background var(--sco-none)
-        transition .3s
-
-        +maxWidth768()
-          transition 0s
-
   #nav
     box-shadow none
     transition 0.3s
@@ -212,7 +113,7 @@
             opacity 0
 
             +maxWidth768()
-              opacity 1 !important
+              opacity 1
 
     #nav-group
       max-width 1400px
@@ -248,6 +149,13 @@
 
       .nav-button
         a
+          height 35px
+          width 35px
+          display flex
+          align-items center
+          justify-content center
+          border-radius 40px
+
           &.totopbtn
             width 25px
             height 25px
@@ -259,6 +167,9 @@
             right 5px
             transition .3s
 
+          &.console_switchbutton
+            padding 4px 8px
+
         &.long
           a
             &.totopbtn
@@ -267,7 +178,7 @@
         &:hover
           a
             &.totopbtn
-              background var(--sco-main)
+              background var(--sco-lighttext)
 
         &:not(.long):hover
           a
@@ -277,15 +188,6 @@
               top 0
               right 0
 
-    #nav-left
-      z-index 102
-      display flex
-      flex-direction row
-      height 100%
-      align-items center
-      margin-right 1.5rem
-      overflow hidden
-
   &.nav-fixed
     #nav
       position fixed
@@ -370,10 +272,10 @@
     #percent
       transition .3s
 
-    #nav-totop
+    #nav-right #nav-totop
       width 0
       transform scale(0)
-      margin-left 0 !important
+      margin-left 0
       overflow hidden
       transition .3s ease-in
 
@@ -382,11 +284,6 @@
   text-align center
   line-height 1.5
 
-#page-header.nav-fixed #nav #site-name,
-#page-header.nav-fixed #nav #toggle-menu,
-#page-header.nav-fixed #nav a
-  text-shadow none
-
 #page-header.nav-fixed > #nav,
 #page-header.not-top-img > #nav
   box-shadow none
@@ -420,13 +317,12 @@
     filter none
 
   #toggle-menu
-    padding 0 .4rem
     display none
     padding .1rem 0 0 .3rem
     vertical-align top
 
     +maxWidth768()
-      display inline-block !important
+      display inline-block
 
     &:hover
       color var(--sco-white)
@@ -438,13 +334,12 @@
     height 35px
     min-width 70px
     justify-content center
-    align-items flex-end
-    text-shadow none
+    align-items center
     border-radius 40px
     cursor pointer
 
     &:hover
-      i
+      i, span, img
         +minWidth900()
           opacity 0
 
@@ -459,28 +354,36 @@
         display flex
         z-index 1
         content "\e008"
-        font-family scoicon, serif !important
+        font-family scoicon, serif
         align-items center
         justify-content center
         font-size 22px
         line-height 1
-        color var(--sco-white)
+        color var(--sco-card-bg)
 
-    i
-      font-size 16px
-      line-height 35px
-      padding 0 12px
+    if hexo-config('site.name.class') == i_class
+      i
+        font-size 16px
+        line-height 35px
+        padding 0 12px
 
-      +maxWidth768()
-        transition .1s
+        +maxWidth768()
+          transition .1s
 
-      +minWidth900()
-        opacity 1
-        transition all .3s, color 0s, opacity .3s
+        +minWidth900()
+          opacity 1
+          transition all .3s, color 0s, opacity .3s
 
-    span
-      +maxWidth768()
-        padding-left 8px
+    if hexo-config('site.name.class') == text
+      span
+        +maxWidth768()
+          padding-left 8px
+
+    if hexo-config('site.name.class') == img
+      img
+        max-width 120px
+        max-height 35px
+        padding 4px 8px
 
   #blog_name
     flex-wrap nowrap
@@ -518,7 +421,7 @@
     transform translateZ(0)
 
     +maxWidth768()
-      display none !important
+      display none
 
   .menus_items
     position relative
@@ -540,15 +443,6 @@
       position relative
 
       .menus_item_child
-        position absolute
-        display none
-        margin-top 8px
-        padding 0
-        background-color var(--sidebar-bg)
-        box-shadow rgba(0, 0, 0, .5) 0 5px 20px -4px
-        animation .3s ease .1s 1 normal both running sub_menus
-        border-radius 5px
-        white-space nowrap
         padding 6px 4px 8px 4px
         border-radius 100px
         background-color var(--sco-maskbgdeep)
@@ -556,9 +450,13 @@
         border var(--style-border)
         transition .3s
         backdrop-filter blur(20px)
-        -webkit-backdrop-filter blur(20px)
-        transform translateZ(0)
         top 35px
+        position absolute
+        margin-top 8px
+        white-space nowrap
+        opacity 0
+        pointer-events none
+        transform translateY(-10px) scale(.8)
 
         li
           display inline-flex
@@ -573,15 +471,14 @@
             border-radius 100px
             padding .3rem .8rem
             width 100%
-            color var(--sco-fontcolor) !important
-            text-shadow none !important
+            color var(--sco-fontcolor)
 
             &:hover
-              background var(--sco-main) !important
-              color var(--sco-white) !important
+              background var(--sco-lighttext)
+              color var(--sco-card-bg)
               box-shadow var(--sco-shadow-main)
               margin 0 auto
-              transform scale(1) !important
+              transform scale(1)
               padding .3rem 1rem
 
             i
@@ -606,10 +503,13 @@
           display block
           border var(--style-border-hover)
           box-shadow var(--sco-shadow-main)
+          opacity 1
+          pointer-events all
+          transform translateY(0) scale(1)
 
         i
           &.expand
-            transform rotate(180deg) !important
+            transform rotate(180deg)
 
       i
         &.expand
@@ -641,7 +541,7 @@
 
     #search-button
       span
-        display none !important
+        display none
 
   #search-button
     display inline
@@ -650,15 +550,15 @@
   .site-page
     position relative
     padding-bottom .3rem
-    text-shadow rgba(0, 0, 0, .3) .05rem .05rem .1rem
     font-size .78em
     cursor pointer
 
-  .back-home-button
-    &:hover
-      +minWidth900()
-        box-shadow var(--sco-shadow-main)
-        cursor pointer
+  if hexo-config('nav.left.enable')
+    .back-home-button
+      &:hover
+        +minWidth900()
+          box-shadow var(--sco-shadow-main)
+          cursor pointer
 
   #page-name
     &-text
@@ -681,7 +581,7 @@
 
       &:hover
         +minWidth900()
-          color var(--sco-main) !important
+          color var(--sco-lighttext) !important
           background var(--sco-none)
           box-shadow none
 
@@ -692,20 +592,6 @@
 .nav-button
   cursor pointer
 
-#page-header #nav #nav-left .nav-button a,
-#page-header #nav #nav-right .nav-button a
-  height 35px
-  width 35px
-  display flex
-  align-items center
-  justify-content center
-  border-radius 40px
-
-#page-header #nav #nav-left .nav-button a i,
-#page-header #nav #nav-right .nav-button a i
-  line-height 1
-  font-size 22px
-
 #site-name
   .iconfont
     font-size 20px
@@ -733,14 +619,15 @@
     i
       position absolute
       display flex
-      font-size .8rem
+      font-size 22px
       opacity 0
+      line-height 1
 
   &:hover
     .totopbtn
       i
         opacity 1
-        color var(--sco-white)
+        color var(--sco-card-bg)
         transition .3s
 
     #percent
@@ -766,131 +653,139 @@
   transition .3s
   white-space nowrap
 
-.back-home-button
-  display flex
-  width 35px
-  height 35px
-  padding 0 !important
-  align-items center
-  justify-content center
-  margin-right 4px
-  transition .3s
-  color var(--sco-white)
-  border-radius 40px
-
-  +maxWidth768()
-    display: none
+if hexo-config('nav.left.enable')
+  .back-home-button
+    display flex
+    width 35px
+    height 35px
+    padding 0 !important
+    align-items center
+    justify-content center
+    margin-right 4px
+    transition .3s
+    border-radius 40px
 
-  i
-    font-size 22px
+    +maxWidth768()
+      display: none
 
-  &:hover
-    background var(--sco-main)
-    color var(--sco-white) !important
+    i
+      font-size 20px
 
-    .back-menu-list-groups
-      display flex
-      opacity 1
-      transition .3s
-      top 55px
-      pointer-events auto
-      left 1.5rem
+    &:hover
+      background var(--sco-main)
+      color var(--sco-card-bg)
 
-      +maxWidth768()
-        padding-bottom 8px
-        box-shadow var(--sco-shadow-border)
-        left: 0
+      .back-menu-list-groups
+        display flex
+        opacity 1
+        top 55px
+        pointer-events auto
+        left 1.5rem
+        transform scale(1)
 
-  .back-menu-list-group
-    display flex
-    flex-direction column
+        +maxWidth768()
+          padding-bottom 8px
+          box-shadow var(--sco-shadow-border)
+          left: 0
 
-    .back-menu-list-title
-      margin 8px 0 0 16px
-      transition .3s
+    .back-menu-list-group
+      display flex
+      flex-direction column
 
-    &:hover
       .back-menu-list-title
-        color var(--sco-main)
+        margin 8px 0 0 16px
+        transition .3s
 
-  .back-menu-list-groups
-    position absolute
-    top 65px
-    left 1.5rem
-    background var(--sco-card-bg)
-    border-radius 12px
-    border var(--style-border)
-    flex-direction column
-    font-size 12px
-    color var(--sco-secondtext)
-    box-shadow var(--sco-shadow-border)
-    transition 0s
-    opacity 0
-    pointer-events none
+      &:hover
+        .back-menu-list-title
+          color var(--sco-lighttext)
 
-    +maxWidth768()
-      left 0
+    .back-menu-list-groups
+      position absolute
+      top 45px
+      transform scale(.8)
+      transform-origin top left
+      left 1.5rem
+      background-color var(--sco-maskbgdeep)
+      border-radius 12px
+      border var(--style-border)
+      flex-direction column
+      font-size 12px
+      color var(--sco-secondtext)
+      box-shadow var(--sco-shadow-border)
+      transition .3s
+      opacity 0
+      pointer-events none
+      backdrop-filter blur(20px)
 
-    &:hover
-      border var(--style-border-hover)
+      +maxWidth768()
+        left 0
 
-  .back-menu-list
-    .back-menu-item
-      width 150px
+      &:hover
+        border var(--style-border-hover)
+
+    .back-menu-list
+      .back-menu-item
+        width 150px
 
 .nav-fixed
   #nav
-    .back-home-button
-      color var(--sco-fontcolor)
-
     a
       color var(--sco-fontcolor)
       transition .3s
 
       &:hover
-        background var(--sco-main)
-        color var(--sco-white)
+        background var(--sco-lighttext)
+        color var(--sco-card-bg)
         transition .3s
 
     #site-name
       &:hover
         +minWidth900()
-          background var(--sco-main) !important
+          background var(--sco-lighttext)
 
-      i
+    if hexo-config('nav.left.enable')
+      .back-home-button
         color var(--sco-fontcolor)
-        transition .3s
 
-        +maxWidth768()
-          color var(--sco-fontcolor)
-          transition .3s
+        &:hover
+          background var(--sco-lighttext)
+          color var(--sco-card-bg)
 
-  .back-home-button
-    &:hover
-      background var(--sco-main) !important
-      color var(--sco-white) !important
+    .menus_item
+      &:hover
+        & >
+        a.site-page
+          background-color var(--sco-lighttext)
 
-  .menus_item
-    &:hover
-      & >
-      a.site-page
-        +minWidth768()
-          background-color var(--sco-main)
+          +minWidth768()
+            background-color var(--sco-main)
 
 .post
-  .back-home-button
-    &:hover
-      background var(--sco-white-op)
-      color var(--sco-white) !important
-      cursor pointer
+  if hexo-config('nav.left.enable')
+    .back-home-button
+      color var(--sco-white)
+
+      &:hover
+        background var(--sco-white-op)
+        color var(--sco-white)
+        cursor pointer
 
   #nav
     #site-name
       &:hover
         +minWidth900()
-          background var(--sco-white-op)
           align-items center
 
+      &:after
+        color var(--sco-white)
+
+  .nav-fixed
+    #nav
+      #site-name
+        &:after
+          color var(--sco-card-bg)
+
 .back-menu-list-groups
   .back-menu-list
     display flex
@@ -911,16 +806,17 @@
       display flex
       align-items center
       margin 4px 8px
-      padding 4px 8px !important
-      transition .3s
-      border-radius 8px
+      padding 4px 8px
+
+      #nav &
+        padding 4px 8px
 
       &:hover
-        background var(--sco-main) !important
-        transform scale(1) !important
+        background var(--sco-lighttext)
+        transform scale(1)
 
         .back-menu-item-text
-          color var(--sco-white)
+          color var(--sco-card-bg)
 
       .back-menu-item-icon
         width 24px
@@ -930,310 +826,34 @@
 
       .back-menu-item-text
         font-size 16px
+        transition .3s
         margin-left .5rem
         color var(--sco-fontcolor)
 
         +maxWidth768()
           font-size 14px
 
-#nav-music
-  display flex
-  align-items center
-  z-index 1001
-  position fixed
-  bottom 20px
-  left 20px
-  cursor pointer
-  transition .3s
-  transform-origin left bottom
-  box-shadow var(--sco-shadow-border)
-  border-radius 40px
-  overflow hidden
-  user-select none
-
-  +maxWidth798()
-    display none !important
-
-  span
-    user-select none
-
-  div
-    user-select none
-
-  &.playing
-    box-shadow 0 0 12px -3px var(--sco-none)
-    -webkit-animation playingShadow 5s linear infinite
-
-    .aplayer
-      background var(--sco-main-op-deep)
-      border var(--style-border-hover)
-      backdrop-filter saturate(180%) blur(20px)
-      -webkit-backdrop-filter blur(20px)
-      transform translateZ(0)
-
-      &.aplayer-withlrc
-        .aplayer-pic
-          box-shadow 0 0 14px #ffffffa6
-          -webkit-transform rotate(0) scale(1.1)
-          border-color var(--sco-white)
-          animation-play-state running
-
-        .aplayer-info
-          color var(--sco-white)
-
-        .aplayer-lrc
-          width 200px
-          margin-bottom 0
-          opacity 1
-
-      .aplayer-info
-        .aplayer-controller
-          .aplayer-bar-wrap
-            .aplayer-bar
-              opacity 1
-
-              .aplayer-played
-                animation-play-state running
-
-    #nav-music-hoverTips
-      opacity 0
-
-  .aplayer
-    background var(--sco-card-bg)
-    border-radius 60px
-    height 41px
-    display flex
-    margin 0
-    pointer-events none
-    transition .3s
-    border var(--style-border)
-    box-shadow none
-
-    &.aplayer-withlrc
-      .aplayer-pic
-        height 25px
-        width 25px
-        border-radius 40px
-        z-index 1
-        transition .3s
-        -webkit-transform rotate(0) scale(1)
-        border var(--style-border-always)
-        -webkit-animation changeright 24s linear infinite
-        animation-play-state paused
-
-      .aplayer-info
-        height 100%
-        color var(--sco-fontcolor)
-        margin-left 8px
-        padding 0
-        display flex
-        align-items center
-
-      .aplayer-lrc
-        width 0
-        opacity 0
-        transition .3s
-        margin-left 8px
-        margin-top -2px
-
-    .aplayer-notice
-      display none
-
-    .aplayer-miniswitcher
-      display none
-
-    .aplayer-body
-      position relative
-      display flex
-      align-items center
-      padding 0 12px 0 8px
-
-    .aplayer-pic
-      .aplayer-play
-        opacity 0
-
-      div
-        display none
-
-    .aplayer-info
-      .aplayer-music
-        margin 0
-        display flex
-        align-items center
-        padding 0
-        z-index 1
-
-        .aplayer-author
-          display none
-
-        .aplayer-title
-          cursor pointer
-          line-height 1
-          display inline-block
-          white-space nowrap
-          max-width 120px
-          overflow hidden
-          text-overflow ellipsis
-          transition .3s
-
-      .aplayer-controller
-        position absolute
-        width 100%
-        height 100%
-        top 0
-        left 0
-
-        .aplayer-time
-          display none
-
-        .aplayer-bar-wrap
-          margin 0
-          padding 0
-
-          .aplayer-bar
-            height 100%
-            background 0 0
-            opacity 0
-
-            .aplayer-loaded
-              display none
-
-            .aplayer-played
-              height 100%
-              opacity .1
-              background-color var(--sco-white) !important
-              -webkit-animation lightBar 5s ease infinite
-              animation-play-state paused
-
-    &.aplayer-withlist
-      .aplayer-info
-        border none
-
-    .aplayer-lrc
-      p
-        color #ffffffb3
-        filter blur(1px)
-
-        &.aplayer-lrc-current
-          color var(--sco-white)
-          border none
-          filter blur(0)
-
-  #nav-music-hoverTips
-    color var(--sco-white)
-    background var(--sco-main)
-    width 100%
-    height 100%
-    position absolute
-    top 0
-    left 0
-    align-items center
-    justify-content center
-    display flex
-    border-radius 40px
-    opacity 0
-    font-size 12px
-    z-index 2
-    pointer-events none
-    transition .3s
-
-  &:hover
-    &:not(.playing)
-      #nav-music-hoverTips
-        opacity 1
-
-  .aplayer-list
-    display none
-
-#nav-music .aplayer .aplayer-lrc:after,
-#nav-music .aplayer .aplayer-lrc:before
-  display none
-
-i
-  &.fab
-    font-size 20px
-    vertical-align middle
-    margin-bottom 4px
-
-#body-wrap
-  .full_page
-    &:before
-      background-color var(--sco-none) !important
-      transition 0s !important
-
-.full_page
-  #page-header
-    &:before
-      display none !important
-
-.snackbar-container
-  background var(--sco-main) !important
-  color var(--sco-white) !important
-  border-radius 0 !important
-  display flex
-  justify-content center !important
-  max-width none !important
-  min-width 100% !important
-  margin 0 !important
-  left 0 !important
-  height 60px !important
-  transform none !important
-
-  p
-    font-weight 700 !important
-    text-align center !important
-    font-size .8rem !important
-    display flex !important
-    justify-content center !important
-
-  .action
-    color var(--sco-white) !important
-    padding 4px 6px !important
-    font-weight 700
-    border-radius 8px !important
-    transition .3s
-    border var(--style-border) !important
-
-    &:hover
-      color var(--sco-main) !important
-      background var(--sco-white) !important
-
-  &::after
-    position absolute
-    width 0
-    height 100%
-    left 0
-    top 0
-    background var(--sco-white)
-    opacity .1
-    content ""
-    animation snackbar-progress var(--sco-snackbar-time) linear forwards
-    pointer-events none
-
 .page
   #nav
     a
       &:hover
-        color var(--sco-white)
+        color var(--sco-card-bg)
         background var(--sco-main)
         transition .3s
         box-shadow var(--sco-shadow-main)
+    #site-name
+      &:hover
+        i
+          color var(--sco-card-bg)
 
   .menus_item
     &:hover
-      & >
-      a.site-page
+      & > a.site-page
         +minWidth768()
-          color var(--sco-white) !important
+          color var(--sco-card-bg) !important
           background var(--sco-main)
-          transition .3s
           box-shadow var(--sco-shadow-main)
 
-  #site-name
-    i
-      +maxWidth768()
-        color var(--sco-fontcolor)
-
 .error
   #nav
     a
@@ -1293,39 +913,7 @@ i
     overflow hidden
     left 0
 
-.menus_item
-  &:hover
-    & >
-    a.site-page
-      +minWidth768()
-        color var(--sco-white) !important
-        background var(--sco-white-op)
-        transition .3s;
-        box-shadow var(--sco-shadow-main)
-
-a.console_switchbutton
-  padding 4px 8px !important
-  cursor pointer
-
-#nav-console
-  +maxWidth768()
-    display none
-
-+minWidth768()
-  .menus_item:hover > a.site-page
-    color var(--sco-card-bg) !important;
-    background var(--sco-white-op);
-    transition .3s;
-    box-shadow var(--sco-shadow-main)
-
-  .page .menus_item:hover > a.site-page
-    color var(--sco-card-bg) !important
-    background var(--sco-main);
-    transition .3s;
-    box-shadow var(--sco-shadow-main)
-
-  .post .menus_item:hover > a.site-page
-    color var(--sco-white)
-
-  .nav-fixed .menus_item:hover > a.site-page
-    background-color var(--sco-lighttext)
+if hexo-config('nav.right.console')
+  #nav-console
+    +maxWidth768()
+      display none