hexo-theme-solitude 2.1.2 → 2.1.4

package/source/css/_layout/capsule.styl

@@ -1,218 +1,229 @@
 if hexo-config('capsule.enable')
-  #nav-music
-    display flex
-    align-items center
-    z-index 11
-    position fixed
-    bottom 20px
-    left 20px
-    cursor pointer
-    transition .3s
-    transform-origin left bottom
-    box-shadow var(--efu-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(--efu-none)
-      -webkit-animation playingShadow 5s linear infinite
-
-      .aplayer
-        background var(--efu-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(--efu-white)
-            animation-play-state running
-
-          .aplayer-info
-            color var(--efu-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
-                  height: 100%;
-                  opacity: .1;
-                  background-color: var(--efu-white) !important;
-                  animation: lightBar 5s ease infinite;
-                  animation-play-state: paused;
-
-      #nav-music-hoverTips
-        opacity 0
-
-    .aplayer
-      background var(--efu-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(--efu-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(--efu-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(--efu-white)
-            border none
-            filter blur(0)
-
-    #nav-music-hoverTips
-      color var(--efu-white)
-      background var(--efu-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
+  @keyframes changeright
+    0%, 50%, 100%
+      transform: rotate(0deg) scale(1.1)
+      box-shadow: 0 0 2px #ffffff00
+    25%, 75%
+      transform: rotate(90deg) scale(1.1)
+      box-shadow: 0 0 14px #ffffff
+
+  @keyframes playingShadow 
+    0%, 100%
+      box-shadow: 0 0px 12px -3px var(--efu-none)
+    50%
+      box-shadow: 0 0px 12px 0px var(--efu-main)
+
+  @keyframes lightBar 
+    0%, 100%
+      opacity: 0.1
+    60%
+      opacity: 0.3
+
+  .aplayer.aplayer-narrow
+    .aplayer-body,
+    .aplayer-pic 
+      height: 66px
+      width: 66px
+
+  #nav-music 
+    display: flex
+    align-items: center
+    z-index: 12
+    position: fixed
+    bottom: 20px
+    left: 20px
+    cursor: pointer
+    transition: all 0.5s, left 0s
+    transform-origin: left bottom
+    box-shadow: var(--efu-shadow-border)
+    border-radius: 40px
+    overflow: hidden
+
+    &:active 
+      transform: scale(0.97)
+
+    &.playing 
+      border: var(--style-border)
+      box-shadow: 0 0px 12px -3px var(--efu-none)
+      animation: playingShadow 5s linear infinite
+
+      .aplayer.aplayer-withlrc
+        .aplayer-pic 
+          box-shadow: 0 0 14px #ffffffa6
+          transform: rotate(0deg) scale(1.1)
+          border-color: var(--efu-white)
+          animation-play-state: running  
+
+        .aplayer-info 
+          color: var(--efu-white)
+
+      #nav-music-hoverTips 
+        width: 0
+
+      .aplayer 
+        background: var(--efu-main)
+        border: var(--style-border-hover)
+        backdrop-filter: saturate(180%) blur(20px)
+        transform: translateZ(0)
+
+      .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played 
+        animation-play-state: running
+
+    &:hover:not(.playing) #nav-music-hoverTips 
+      opacity: 1
+
+    .aplayer.aplayer-withlrc
+      .aplayer-pic 
+        height: 25px
+        width: 25px
+        border-radius: 40px
+        z-index: 1
+        transition: 0.3s
+        transform: rotate(0deg) scale(1)
+        border: var(--style-border-always)
+        animation: changeright 24s linear infinite
+        animation-play-state: paused
+
+      .aplayer-info 
+        height: 100%
+        color: var(--efu-fontcolor)
+        margin: 0
+        padding: 0
+        display: flex
+        align-items: center
+
+    #nav-music-hoverTips 
+      color: var(--efu-white)
+      background: var(--efu-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
+      transition: 0.3s
+
+    .aplayer 
+      background: var(--efu-card-bg)
+      border-radius: 60px
+      height: 41px
+      display: flex
+      margin: 0
+      transition: 0.3s
+      border: var(--style-border)
+      box-shadow: none
+
+      .aplayer-notice,
+      .aplayer-miniswitcher,
+      .aplayer-list 
+        display: none
+
+      .aplayer-body 
+        position: relative
+        display: flex
+        align-items: center
+
+      .aplayer-info 
+        .aplayer-music 
+          margin: 0
+          display: flex
+          align-items: center
+          padding: 0 12px 0 8px
+          cursor: pointer
+          z-index: 1
+          height: 100%
+
+          .aplayer-title 
+            cursor: pointer
+            line-height: 1
+            display: inline-block
+            white-space: nowrap
+            max-width: 120px
+            overflow: hidden
+            text-overflow: ellipsis
+            transition: 0.3s
+            user-select: none
+
+        .aplayer-controller 
+          position: absolute
+          width: 100%
+          height: 100%
+          top: 0
+          left: 0
+
+          .aplayer-bar-wrap 
+            margin: 0
+            padding: 0
+
+            .aplayer-bar 
+              height: 100%
+              background: 0 0
+
+              .aplayer-loaded 
+                display: none
+
+              .aplayer-played 
+                height: 100%
+                opacity: 0.1
+                background-color: var(--efu-white) !important
+                animation: lightBar 5s ease infinite
+                animation-play-state: paused
+
+      .aplayer-pic 
+        pointer-events: none
+
+        .aplayer-button 
+          bottom: 50%
+          right: 50%
+          transform: translate(50%, 50%)
+          margin: 0
+          transition: 0.3s
+          pointer-events all
+
+        &:has(.aplayer-button.aplayer-play) 
+          animation-play-state: paused
+          transform: rotate(0deg) scale(1) !important
+
+        margin-left: 8px
+
+      .aplayer-info .aplayer-controller .aplayer-time,
+      .aplayer-info .aplayer-music .aplayer-author 
+        display: none
+
+      &.aplayer-withlist .aplayer-info 
+        border: none
+
+      .aplayer-lrc 
+        width: 0
+        opacity: 0
+        transition: 0.3s
+        margin-bottom: -15px
+
+        p.aplayer-lrc-current 
+          color: var(--efu-white)
+          border: none
+          min-height: 20px
+          filter: none
+
+        &:after,
+        &:before 
+          display: none
+
+        p 
+          color: #ffffffb3
+          filter: blur(.8px)
+
+    &.stretch .aplayer.aplayer-withlrc .aplayer-lrc 
+      width: 200px
+      margin-left: 8px
+      opacity: 1
+
+  .aplayer-thumb
+    width: 0!important
+    height: 0!important

package/source/css/_layout/recent-post.styl

@@ -23,6 +23,8 @@ if hexo-config('index_post_list.direction') == "column"
 
       +maxWidth1300()
         margin-bottom .5rem
+        #tag &
+          margin-top: 2.5rem
 
       +maxWidth768()
         border-radius 12px
@@ -253,6 +255,8 @@ else if hexo-config('index_post_list.direction') == "row"
       flex-direction row
       width 100%
       box-shadow var(--efu-shadow-border)
+      #tag &
+          margin-top: 2.5rem
 
       +maxWidth768()
         border-radius 12px

package/source/css/_page/_home/home.styl

@@ -1,6 +1,7 @@
 if hexo-config('hometop.enable') || hexo-config('says.enable')
   #home_top
     max-width 1400px
+    width 100%
     margin 0 auto
     padding .5rem 1.5rem
 

package/source/css/_page/links.styl

@@ -253,9 +253,10 @@
 
     +maxWidth768()
       width calc(50% - 12px)
+      height: 120px
 
-    +maxWidth600()
-      width calc(100% - 12px)
+      a
+        flex-direction: column
 
     a
       display flex
@@ -286,6 +287,19 @@
         height fit-content
         padding 0 4px
 
+        +maxWidth768()
+          align-items center
+          width 100%
+
+          .flink-item-name
+            padding: 0
+            width: 100%
+            text-align: center
+            font-size: 14px
+
+          .flink-item-desc
+            display: none
+
         span
           transition .3s
 

package/source/js/main.js

@@ -150,23 +150,52 @@ const sco = {
       });
     }
   },
-  musicToggle() {
-    const $music = document.querySelector('#nav-music') || null;
-    const $meting = document.querySelector('meting-js') || null;
-    const $console = document.getElementById('consoleMusic') || null;
-    const $rm_text = document.querySelector('#menu-music-toggle span') || null;
-    const $rm_icon = document.querySelector('#menu-music-toggle i') || null;
+  musicToggle(isMeting = true) {
+    if (!this.isMusicBind) {
+      this.musicBind();
+    }
+    const $music = document.querySelector('#nav-music');
+    const $meting = document.querySelector('meting-js');
+    const $console = document.getElementById('consoleMusic');
+    const $rmText = document.querySelector('#menu-music-toggle span');
+    const $rmIcon = document.querySelector('#menu-music-toggle i');
+    
     this.musicPlaying = !this.musicPlaying;
     $music.classList.toggle("playing", this.musicPlaying);
-    $console && $console.classList.toggle("on", this.musicPlaying);
+    $music.classList.toggle("stretch", this.musicPlaying);
+    $console?.classList.toggle("on", this.musicPlaying);
+    
     if (this.musicPlaying) {
-      $meting.aplayer.play();
-      (typeof rm !== 'undefined') && rm?.menuItems.music[0] && ($rm_text.textContent = GLOBAL_CONFIG.right_menu.music.stop) && ($rm_icon.className = 'solitude fas fa-pause')
+      if (typeof rm !== 'undefined' && rm?.menuItems.music[0]) {
+        $rmText.textContent = GLOBAL_CONFIG.right_menu.music.stop;
+        $rmIcon.className = 'solitude fas fa-pause';
+      }
     } else {
-      $meting.aplayer.pause();
-      (typeof rm !== 'undefined') && rm?.menuItems.music[0] && ($rm_text.textContent = GLOBAL_CONFIG.right_menu.music.start) && ($rm_icon.className = 'solitude fas fa-play')
+      if (typeof rm !== 'undefined' && rm?.menuItems.music[0]) {
+        $rmText.textContent = GLOBAL_CONFIG.right_menu.music.start;
+        $rmIcon.className = 'solitude fas fa-play';
+      }
+    }
+
+    if(isMeting){
+      this.musicPlaying ? $meting.aplayer.play() : $meting.aplayer.pause();
     }
   },
+  musicBind() {
+    const $music = document.querySelector('#nav-music');
+    const $name = document.querySelector('#nav-music .aplayer-music');
+    const $button = document.querySelector('#nav-music .aplayer-button');
+    
+    $name?.addEventListener('click', () => {
+      $music.classList.toggle("stretch");
+    });
+
+    $button?.addEventListener('click', () => {
+      this.musicToggle(false);
+    });
+    
+    this.isMusicBind = true;
+  },
   switchCommentBarrage() {
     let commentBarrageElement = document.querySelector(".comment-barrage");
     let consoleCommentBarrage = document.querySelector("#consoleCommentBarrage");
@@ -189,7 +218,7 @@ const sco = {
     this.sco_keyboards = !this.sco_keyboards;
     const consoleKeyboard = document.querySelector("#consoleKeyboard");
     const keyboardFunction = this.sco_keyboards ? openKeyboard : closeKeyboard;
-    consoleKeyboard.classList.toggle("on", this.sco_keyboards);
+    consoleKeyboard?.classList.toggle("on", this.sco_keyboards);
     keyboardFunction();
     localStorage.setItem("keyboard", this.sco_keyboards);
     document.getElementById('keyboard-tips')?.classList.remove('show');

package/source/js/right_menu.js

@@ -163,8 +163,8 @@ window.oncontextmenu = (ele) => {
     } else {
         rm.menuItems.paste.style.display = "none";
     }
-
-    if (tagName === "meting-js") {
+    let cls = ele.target.className.toLowerCase();
+    if (cls.match(/aplayer/)) {
         display = true;
         rm.menuItems.music.forEach((item) => (item.style.display = "flex"));
     } else {