hexo-theme-stellar 1.29.1 → 1.30.1

package/source/css/_components/tag-plugins/friends_posts.styl

@@ -0,0 +1,160 @@
+.users-posts-wrap .grid-box
+  display: grid
+  grid-template-columns: 1fr
+  grid-gap: 2px
+  overflow: hidden
+  border-radius: $border-card
+
+.users-posts-wrap .user-post-card
+  display: grid
+  grid-template-columns: 1fr 2fr
+  grid-gap: 16px
+  font-weight: 500
+  border-radius: 4px
+  background: var(--block)
+  padding: 1rem
+  div,span
+    line-height: 1.2
+  .labels
+    margin-top: 4px
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    justify-content: center
+    pointer-events: none
+    user-select: none
+    .label
+      color: white
+      font-size: 12px
+      padding: 3px 6px 2px 6px
+      margin: 4px 2px 0 2px
+      line-height: 1
+      border-radius: 16px
+  .avatar-box
+    display: flex
+    justify-content: center
+    flex-direction: column
+    align-items: center
+    padding: 1rem
+  .card-link
+    color: var(--text-p1)
+    display: flex
+    justify-content: flex-start
+    flex-direction: column
+    align-items: center
+    text-align: center
+    border-radius: 4px
+    position: relative
+    flex-shrink: 0
+    trans1 width 
+    span
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 1
+      position: relative
+    .title
+      font-size: $fs-14
+      font-weight: 500
+      margin-top: 1rem
+      max-width: 100%
+    img
+      object-fit: cover
+      display: block
+      width: 64px
+      height: 64px
+      background: var(--card)
+      border-radius: 64px
+      floatable-trans()
+    
+  .previews
+    display: flex
+    justify-content: space-between
+    flex-direction: column
+    height: 100%
+    position: relative
+    .empty
+      min-height: 1rem
+    .desc
+      font-size: 1.2rem
+      color: var(--text-p3)
+      font-weight: 400
+      margin: 1rem 0
+      margin-right: auto
+      position: relative
+      &:before
+        position: absolute
+        font-weight: 900
+        font-size: 32px
+        color: var(--block-border)
+        top: 0
+        content: '“'
+        left: -20px
+        trans1 all
+    .spacer
+      height: 100%
+    .posts
+      margin: 0.5rem 0 1rem 0
+      display: flex
+      flex-direction: column
+      align-items: flex-start
+    .post-link
+      display: flex
+      flex-direction: column
+      color: var(--text-p1)
+      position: relative
+      trans1 color
+      &+.post-link
+        margin-top: 1rem
+      &:before
+        content: ''
+        position: absolute
+        left: -12px
+        top: 2px
+        height: 'calc(%s - 2px)' % $fs-14
+        width: 4px
+        border-radius: 4px
+        background: var(--block-border)
+        trans1 all
+      &:hover:before
+        background: $color-hover
+        // height: calc(100% - 4px)
+        height: 100%
+        top: 0
+      span 
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        overflow: hidden
+        -webkit-line-clamp: 1
+        position: relative
+     .title
+        font-size: $fs-14
+        font-weight: 500
+        max-width: 100%
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        overflow: hidden
+        -webkit-line-clamp: 2
+        position: relative
+      .date
+        font-size: $fs-12
+        color: var(--text-p3)
+        margin-top: 0.25rem
+      .no-post
+        font-size: $fs-13
+        color: var(--text-p4)
+
+
+// transform
+.users-posts-wrap .user-post-card
+  &:hover
+    .desc
+      &:before
+        color: $color-hover
+        transform: scale(1.2) translateX(-4px)
+  .card-link:hover
+    img
+      transform: scale(1.2) rotate(8deg)
+      box-shadow: $boxshadow-card-float
+  .post-link:hover
+    color: $color-hover

package/source/css/_components/tag-plugins/sites.styl

@@ -9,6 +9,7 @@
   width: 100%
   display: flex
   flex-direction: column
+  position: relative
   >img
     object-fit: cover
     aspect-ratio: 1.5
@@ -18,6 +19,7 @@
   .info
     margin-top: 0.5rem
     line-height: 1.2
+    position: relative
     >img
       width: 28px
       height: @width
@@ -46,10 +48,33 @@
       overflow: hidden
       -webkit-line-clamp: 1
 
+  .labels
+    position: absolute
+    top: 2px
+    right: 2px
+    display: flex
+    flex-wrap: wrap
+    justify-content: flex-end
+    pointer-events: none
+    user-select: none
+    opacity 1
+    trans1 all
+    .label
+      font-weight: 500
+      color: white
+      font-size: 12px
+      padding: 3px 6px 2px 6px
+      margin: 2px
+      line-height: 1
+      border-radius: 16px
+
 // transform
 .sites-wrap .site-card .card-link
   >img
     floatable-trans()
   &:hover
+    .labels
+      opacity 0
+      transform: translateY(-4px)
     >img
       floatable-float()

package/source/css/_components/tag-plugins/tabs.styl

@@ -76,10 +76,13 @@
     text-align: justify
     margin-top: .5rem
     .tab-pane
+      display: block
       &:not(.active)
-        display: none
+        visibility: hidden
+        height: 0
       &.active
-        display: block
+        visibility: visible
+        height: auto
   .tab-content:has(.grid-box)
     width: 100%
 

package/source/css/_custom.styl

@@ -2,6 +2,7 @@
 
 // 通用主题色
 $color-theme = convert(hexo-config('style.color.theme'))
+$color-theme-opa = hsla(hue($color-theme), saturation($color-theme), lightness($color-theme), 0.3)
 $color-accent = convert(hexo-config('style.color.accent'))
 $color-link = convert(hexo-config('style.color.link'))
 $color-hover = convert(hexo-config('style.color.hover'))

package/source/css/_defines/func.styl

@@ -14,11 +14,11 @@ trans1($op, $time = 0.2s)
   -o-transition: $op $time ease-out
 
 // 为2个属性设置动画
-trans2($op1, $op2)
-  transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-  -moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-  -webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
-  -o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
+trans2($op1, $op2, $time = 0.2s)
+  transition: $op1 $time ease-out, $op2 $time ease-out
+  -moz-transition: $op1 $time ease-out, $op2 $time ease-out
+  -webkit-transition: $op1 $time ease-out, $op2 $time ease-out
+  -o-transition: $op1 $time ease-out, $op2 $time ease-out
 
 trans2pro($op1, $t1, $op2, $t2)
   transition: $op1 $t1 ease-out, $op2 $t2 ease-out
@@ -78,7 +78,8 @@ scrollbar-codeblock($height = 4px)
   &::-webkit-scrollbar
     height: $height
     width: $height
-  &::-webkit-scrollbar-track-piece
+  &::-webkit-scrollbar-track-piece,
+  &::-webkit-scrollbar-corner
     background: transparent
   &::-webkit-scrollbar-thumb
     background: transparent

package/source/css/_defines/theme.styl

@@ -23,6 +23,7 @@ _dark_text()
   --text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
   --text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
   --text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25)
+  --text-p3-opa: hsla($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25, 0.3)
   --text-p4: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.5)
   --text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2)
   --text-code: hsl($color-code-h, $color-code-s, $color-code-l)
@@ -32,6 +33,7 @@ _light_text()
   --text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
   --text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
   --text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2)
+  --text-p3-opa: hsla($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2, 0.3)
   --text-p4: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.4)
   --text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75)
   --text-code: hsl($color-code-h, $color-code-s, (100 - $color-code-l) * 1.2)
@@ -39,6 +41,8 @@ _light_text()
 _common_root()
   :root
     --theme-link: $color-link
+    --theme-color: $color-theme
+    --theme-color-opa: $color-theme-opa
 
 _light_root()
   --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
@@ -53,6 +57,18 @@ _light_root()
   --alpha60: rgba(white, 0.6)
   --alpha75: rgba(white, 0.75)
   --alpha100: white
+  // chat 标签
+  --chat-bg:     #f1f2f5
+  --chat-block:  #ffffff
+  --chat-border: #f2f2f2
+  --chat-qq-right-bg: #0099FF
+  --chat-qq-right-text: #ffffff
+  --chat-wechat-news-num: #d8dadf
+  --chat-video-button: #ffffffE6
+  --chat-wechat-right-bg: #91ED61
+  --chat-quote-blink-color: #185c6d1a
+  --chat-wechat-quote-color: #808080
+  --chat-wechat-quote-bg: #8080801a
   _dark_text()
 
 _dark_root()
@@ -68,6 +84,18 @@ _dark_root()
   --alpha60: rgba(black, 0.6)
   --alpha75: rgba(black, 0.75)
   --alpha100: black
+  // chat 标签
+  --chat-bg:     #1f2224  // #111111
+  --chat-block:  #25282a  // #191919
+  --chat-border: #303437  // #222222
+  --chat-qq-right-bg: #0099ff80
+  --chat-qq-right-text: #ffffff99
+  --chat-wechat-news-num: #25282a
+  --chat-video-button: #25282ad9  // #191919E6
+  --chat-wechat-right-bg: hsl(hue($c-green), 25, 25)
+  --chat-quote-blink-color: #185c6d26
+  --chat-wechat-quote-color: #858585
+  --chat-wechat-quote-bg: #8585851a
   _light_text()
   @media screen and (max-width: $device-mobile-max)
     --site-bg: black
@@ -82,3 +110,13 @@ _common_root()
   _light_root()
   @media (prefers-color-scheme: dark)
     _dark_root()
+
+@media (prefers-color-scheme: dark)
+  :root:not([color-scheme])
+    img,
+    .md-text .tag-plugin.chat>.content .chatcell .user-main .talk.file>.content>.top>.right>svg.icon>path
+      filter: brightness(75%)!important
+[color-scheme='dark']
+    img,
+    .md-text .tag-plugin.chat>.content .chatcell .user-main .talk.file>.content>.top>.right>svg.icon>path
+      filter: brightness(75%)!important

package/source/css/_plugins/katex.styl

@@ -1,5 +1,4 @@
 .md-text 
   p.katex-block
-  .katex-display
     overflow: scroll
     scrollbar(0, 0)

package/source/js/plugins/download-file.js

@@ -0,0 +1,198 @@
+// 传入一个字符串，返回对应的文件格式类型
+function extToMimes(ext) {
+    let type = undefined;
+    switch (ext) {
+      // 对应图片格式jpg
+      case 'jpg':
+        type = 'image/jpeg'
+        break;
+      // 对应图片格式png
+      case 'png':
+        type = 'image/png'
+        break;
+      // 对应图片格式jpeg
+      case 'jpeg':
+        type = 'image/jpeg'
+        break;
+       // 对应图片格式gif
+      case 'gif':
+        type ='image/gif'
+        break;
+      // 对应图片格式bmp
+      case 'bmp':
+        type = 'image/bmp'
+        break;
+      // 对应文本格式txt
+      case 'txt':
+        type = 'text/plain'
+        break;
+      // 对应表格格式xls
+      case 'xls':
+        type = 'application/vnd.ms-excel'
+        break;
+      // 对应word文档doc格式
+      case 'doc':
+        type = 'application/msword'
+        break;
+      // 对应文档格式pdf
+      case 'pdf':
+        type = 'application/pdf'
+        break;
+      // 对应表格格式xlsx
+      case 'xlsx':
+        type = 'application/vnd.ms-excel'
+        break;
+      // 对应表格格式csv
+      case 'csv':
+        type = 'text/csv'
+        break;
+      // 对应的视频格式一般是MPEG-4或者H.264编码的MP4格式
+      case 'mp4':
+        type = 'video/mp4'
+        break;
+      // 对应的视频格式一般是AVI格式
+      case 'avi':
+        type = 'video/x-msvideo'
+        break;
+      // 对应的视频格式一般是Windows Media Video格式
+      case 'WindowsMediaVideo':
+        type = 'video/x-ms-wmv'
+        break;
+      // 对应的视频格式一般是MOV格式，由苹果公司开发的
+      case 'mov':
+        type = 'video/quicktime'
+        break;
+      // 对应的视频格式一般是Flash视频格式，由Adobe公司开发的
+      case 'flash':
+        type = 'video/x-flv'
+        break;
+      // 对应的视频格式一般是MKV格式，开源免费的多媒体容器格式
+      case 'mkv':
+        type = 'video/x-matroska'
+        break;
+      // 对应音频格式mp3
+      case 'mp3':
+        type = 'audio/mpeg'
+        break;
+      // 对应音频格式wav
+      case 'wav':
+        type = 'audio/wav'
+        break;
+      // 对应音频格式flac
+      case 'flac':
+        type = 'audio/flac'
+        break;
+      // 对应音频格式aac
+      case 'aac':
+        type = 'audio/aac'
+        break;
+      // 对应音频格式WMA
+      case 'wma':
+        type = 'audio/x-ms-wma'
+        break;
+      default:
+        type = 'text/plain'
+        break;
+    }
+    return type;
+  }
+  
+  /**
+   * 根据字节数获取文件大小，并转换成 KB、MB、GB、TB 等形式
+   * @param {number} bytes - 文件的字节数
+   * @returns {string} - 文件大小的字符串表示形式
+   */
+  function formatFileSize(bytes) {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    let size = bytes;
+    let unitIndex = 0;
+  
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+  
+    // 保留两位小数，四舍五入
+    size = Math.round(size * 100) / 100;
+  
+    return `${size}${units[unitIndex]}`;
+  }
+  
+  var file_contents = {};
+  
+  function cacheDatas(url, data) {
+    let content = data.file;
+    let fileName = url.split("/").at(-1);
+    let fileType = fileName.split(".")[1];
+    let fileMimeType = extToMimes(fileType);
+    // 拿到二进制字符串 content
+    // 再利用 Buffer 转为对象
+    const length = content ? content.data.length : 0;
+    let buf = new ArrayBuffer(length)
+    let view = new Uint8Array(buf)
+    for (let i = 0; i < length; ++i) {
+      view[i] = content.data[i]
+    }
+    // 再输入到 Blob 生成文件
+    let blob = new Blob([buf], {type: fileMimeType});
+    let fileSize = formatFileSize(blob.size);
+  
+    let file_content = {};
+    file_content.name = fileName;
+    file_content.size = fileSize;
+    file_content.blob = blob;
+  
+    file_contents[url] = file_content;
+  }
+  
+  function renderFileDom(el, url) {
+    let fileSizeSpan = el.querySelector('.file-size');
+    let fileSize = file_contents[url].size;
+    if (fileSizeSpan && fileSize) {
+      fileSizeSpan.innerHTML = fileSize;
+    }
+  }
+  
+  function downloadFile(url) {
+    let file = file_contents[url];
+    let a = document.createElement('a')
+    // 指定生成的文件名
+    a.download = file.name;
+    a.href = URL.createObjectURL(file.blob)
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+  
+  function downloadFileEvent(fileDoms) {
+    for (let i = 0; i < fileDoms.length; ++i) {
+      let fileDom = fileDoms[i];
+      const api = ctx.tag_plugins.chat.api + '?type=file&url=' || 'https://api.vlts.cc/site_info/v1?type=file&url=';
+      const obverser = new IntersectionObserver((entries, observer) => {
+        utils.requestAnimationFrame(()=>{
+          entries.filter((entry)=>{return entry.isIntersecting}).sort((a,b)=>a.intersectionRect.y !== b.intersectionRect.y ? a.intersectionRect.y - b.intersectionRect.y : a.intersectionRect.x - b.intersectionRect.x).forEach((entry, index) => {
+            observer.unobserve(entry.target);
+            setTimeout(() => {
+              let url = entry.target.getAttribute('url');
+              fetch(api + url).then(function(response) {
+                if (response.ok) {
+                  return response.json();
+                }
+                throw new Error('Network response was not ok.');
+              }).then(function(data) {
+                cacheDatas(url, data);
+                renderFileDom(fileDom, url);
+              }).catch(function(error) {
+                console.log(error);
+              });
+              fileDom.addEventListener('click', ()=>{
+                  downloadFile(url);
+              });
+            }, Math.max(100, 16)*(index+1));
+          });
+        });
+      });
+      obverser.observe(fileDom);
+    }
+  }
+  

package/source/js/plugins/video.js

@@ -0,0 +1,65 @@
+function videoEvents(videos) {
+    for (let i = 0; i < videos.length; ++i) {
+        let video = videos[i];
+        video.loop = false;
+        let videoDom = video.parentElement;
+        let pauseBtn = videoDom.querySelector('.pause-btn');
+        let playBtn = videoDom.querySelector('.play-btn');
+        // videoDom.addEventListener('click', ()=>{
+        //     if (pauseBtn.style.display === 'flex') {
+        //         video.pause();
+        //         pauseBtn.style.display = "none";
+        //         playBtn.style.display = "flex";
+        //         playFlag = false;
+        //     } else {
+        //         if (video.requestFullscreen) {
+        //             video.requestFullscreen();
+        //         } else if (video.mozRequestFullScreen) {
+        //             video.mozRequestFullScreen();
+        //         } else if (video.webkitRequestFullScreen) {
+        //             video.webkitRequestFullScreen();
+        //         } else if (video.msRequestFullscreen) {
+        //             video.msRequestFullscreen();
+        //         }
+        //         video.play();
+        //         pauseBtn.style.display = "flex";
+        //         playBtn.style.display = "none";
+        //         playFlag = true;
+        //     }
+        // });
+
+        // video.addEventListener('ended', ()=>{
+        //     pauseBtn.style.display = "none";
+        //     playBtn.style.display = "flex";
+        // });
+
+        videoDom.addEventListener('click', ()=>{
+            if (video.requestFullscreen) {
+                video.requestFullscreen();
+            } else if (video.mozRequestFullScreen) {
+                video.mozRequestFullScreen();
+            } else if (video.webkitRequestFullScreen) {
+                video.webkitRequestFullScreen();
+            } else if (video.msRequestFullscreen) {
+                video.msRequestFullscreen();
+            }
+        });
+
+
+        document.addEventListener('fullscreenchange', () => {
+            if (checkIsFullScreen()) {
+                console.log("进入全屏");
+                video.play();
+            } else {
+                console.log("退出全屏");
+                video.currentTime = 0;			// 更改当前播放的时间点
+                video.pause();
+            }
+        });
+        function checkIsFullScreen(){
+            var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
+            return isFullScreen == undefined ? false : isFullScreen;
+        }
+    }
+}
+