hexo-theme-stellar 1.33.0 → 1.34.0

package/scripts/tags/lib/timeline.js

@@ -1,79 +1,101 @@
-/**
- * timeline.js v2.1 | https://github.com/xaoxuu/hexo-theme-stellar/
- *
- * {% timeline %}
- *
- * <!-- node header1 -->
- * what happened 1
- *
- * <!-- node header2 -->
- * what happened 2
- *
- * {% endtimeline %}
- */
-
-'use strict'
-
-function layoutNodeTitle(ctx, content) {
-  var el = ''
-  el += '<div class="header">'
-  if (content && content.length > 0) {
-    el += `<span>${content}</span>`
-  }
-  el += '</div>'
-  return el
-}
-
-function layoutNodeContent(ctx, content) {
-  var el = ''
-  el += '<div class="body fs14">'
-  if (content && content.length > 0) {
-    el += ctx.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')
-  }
-  el += '</div>'
-  return el
-}
-
-module.exports = ctx => function(args, content = '') {
-  args = ctx.args.map(args, ['api', 'user', 'type', 'limit', 'hide', 'avatar'])
-  args['data-api'] = args.api
-  var el = ''
-  if (!args.type) {
-    args.type = 'timeline'
-  }
-  if (args.api && args.api.length > 0) {
-    el += `<div class="tag-plugin timeline data-service ds-${args.type}"`
-    el += ' ' + ctx.args.joinTags(args, ['data-api', 'user', 'limit', 'hide', 'avatar']).join(' ')
-    el += '>'
-  } else {
-    el += '<div class="tag-plugin timeline">'
-  }
-
-  var arr = content.split(/<!--\s*node (.*?)\s*-->/g).filter(item => item.trim().length > 0)
-  if (arr.length > 0) {
-    var nodes = []
-    arr.forEach((item, i) => {
-      if (i % 2 == 0) {
-        nodes.push({
-          header: item
-        })
-      } else if (nodes.length > 0) {
-        var node = nodes[nodes.length-1]
-        if (node.body == undefined) {
-          node.body = item
-        } else {
-          node.body += '\n' + item
-        }
-      }
-    })
-    nodes.forEach((node, i) => {
-      el += '<div class="timenode" index="' + (i) + '">'
-      el += layoutNodeTitle(ctx, node.header)
-      el += layoutNodeContent(ctx, node.body)
-      el += '</div>'
-    })  
-  }
-
-  el += '</div>'
-  return el
-}
+/**
+ * timeline.js v2.1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ *
+ * {% timeline %}
+ *
+ * <!-- node header1 -->
+ * what happened 1
+ *
+ * <!-- node header2 -->
+ * what happened 2
+ *
+ * {% endtimeline %}
+ */
+
+'use strict'
+
+function layoutNodeTitle(ctx, content) {
+  var el = ''
+  el += '<div class="header">'
+  if (content && content.length > 0) {
+    el += `<span>${content}</span>`
+  }
+  el += '</div>'
+  return el
+}
+
+function layoutNodeContent(ctx, content) {
+  var el = ''
+  el += '<div class="body fs14">'
+  if (content && content.length > 0) {
+    el += ctx.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')
+  }
+  el += '</div>'
+  return el
+}
+
+module.exports = ctx => function(rawArgs, content = '') {
+  let args = {}
+  for (const item of rawArgs) {
+    if (typeof item !== 'string') continue
+    const idx = item.indexOf(':')
+    if (idx === -1) continue
+
+    const key = item.slice(0, idx)
+    const value = item.slice(idx + 1)
+    args[key] = value
+  }
+
+  const type = args.type || 'timeline'
+
+  let classBuffer = ''
+  let attrBuffer = ''
+  if (args.api) {
+    args['data-api'] = args.api
+    delete args.api
+
+    const attrKeys = Object.keys(args).filter(
+      key =>
+        key !== 'type' &&
+        args[key] !== undefined &&
+        args[key] !== null &&
+        args[key] !== ''
+    )
+
+    classBuffer += ` data-service ds-${type}`
+
+    if (attrKeys.length) {
+      attrBuffer += ' ' + ctx.args.joinTags(args, attrKeys).join(' ')
+    }
+  }
+
+  let el = `<div class="tag-plugin timeline${classBuffer}"${attrBuffer}>`
+
+  var arr = content.split(/<!--\s*node (.*?)\s*-->/g).filter(item => item.trim().length > 0)
+  if (arr.length > 0) {
+    var nodes = []
+    arr.forEach((item, i) => {
+      if (i % 2 == 0) {
+        nodes.push({
+          header: item
+        })
+      } else if (nodes.length > 0) {
+        var node = nodes[nodes.length-1]
+        if (node.body == undefined) {
+          node.body = item
+        } else {
+          node.body += '\n' + item
+        }
+      }
+    })
+    nodes.forEach((node, i) => {
+      el += '<div class="timenode" index="' + (i) + '">'
+      el += layoutNodeTitle(ctx, node.header)
+      el += layoutNodeContent(ctx, node.body)
+      el += '</div>'
+    })  
+  }
+
+  el += '</div>'
+  return el
+}

package/source/css/_common/canonical.styl

@@ -1,23 +1,28 @@
 .canonical-tip
   position: fixed
+  display: flex
   text-align: center
   bottom: 4rem
   left: 50%
   transform: translateX(-50%)
   max-width: 90%
-  background-color: var(--card)
-  color: var(--text-p1)
-  font-size: 1rem
+  color: var(--text)
   font-family: #fff8e1
   z-index: 9999999
   box-shadow: 0 2px 8px rgba(black, .1), 0 4px 16px rgba(black, .1), 0 8px 32px rgba(black, .1)
-  border-radius: 6px
   .headline
     font-size: $fsh2
-  a
+  a, button
+    border-radius: 6px
+    background: var(--bg-a100)
     display: block
     color: inherit
-    padding: 1rem 2rem
+    padding: 1rem
+    font-size: 1rem
+  button
+    padding: 0
+    width: 3rem
+    margin-left: 1px
 
 .canonical-tip.unofficial
   background-color: hsl(5, 100%, 60%)

package/source/css/_common/highlight.styl

@@ -14,9 +14,9 @@ p>code:not([class]),li>code:not([class])
   --theme: var(--text-p3)
   margin: var(--gap-p) 0
   border-radius: $border-card
+  corner-shape: superellipse(1.2)
   overflow: hidden
   background: var(--block)
-  line-height: 1.5
   font-family: $ff-codeblock
   box-sizing: border-box
   @media screen and (min-width: $device-mobile)
@@ -80,6 +80,7 @@ p>code:not([class]),li>code:not([class])
   .gist-file 
     border: 1px solid var(--block-border)
     border-radius: $border-card
+    corner-shape: superellipse(1.2)
     overflow: hidden
   .gist-data
     --bgColor-default: var(--block)
@@ -182,6 +183,8 @@ table:not([class])
     content: "TS"
   &.matlab .code:before
     content: "MATLAB"
+  &.nginx .code:before
+    content: "Nginx"
 
 
 

package/source/css/_common/html.styl

@@ -1,6 +1,10 @@
 *
   outline: none
 html
+  height: 100%
+  width: 100%
+  scrollbar(8px,8px)
+  overflow-y: scroll
   font-family: $ff-body
   font-size: $fs-root
   -webkit-text-size-adjust: 100%

package/source/css/_common/loading.styl

@@ -31,4 +31,8 @@ svg.loading
     font-size: 14px
   &.error
     &:after
-      content: hexo-config('style.loading.error')
+      content: hexo-config('style.loading.error')
+
+.article-footer
+  .loading-wrap
+    background: none

package/source/css/_components/md.styl

@@ -44,6 +44,8 @@
     margin-top: var(--gap-p)
     margin-bottom: var(--gap-p)
   iframe
+    margin-left: auto
+    margin-right: auto
     display: block
 
 // titles
@@ -80,6 +82,7 @@
 .md-text.content 
   p>img, .tag-plugin.image .image-bg
     border-radius: $border-image
+    corner-shape: superellipse(1.2)
 
 // 链接样式
 li:not([class]) a:not([class])

package/source/css/_components/pages/article-story.styl

@@ -91,8 +91,10 @@
 
   p>img, .tag-plugin.image .image-bg
     border-radius: $border-image-l
+    corner-shape: superellipse(1.2)
     >img
       border-radius: $border-image-l
+      corner-shape: superellipse(1.2)
 
 
 .l_body[type=story] .md-text.content>blockquote, .md-text.content .tag-plugin.blockquote

package/source/css/_components/partial/article-footer.styl

@@ -3,6 +3,7 @@
   padding: 1rem
   background: var(--block)
   border-radius: $border-card-l
+  corner-shape: superellipse(1.2)
   border: 1px solid var(--block-border)
   font-size: $fs-15
   line-height: 1.6

package/source/css/_components/partial/navbar.styl

@@ -35,14 +35,16 @@
     z-index: 1
     trans1 all
     &:hover
-      background: var(--bg-a100)
+      background: var(--bg-a50)
     &.active, &:hover
       color: var(--text)
     &.active
       background: var(--bg-a60)
+      :root[data-theme="dark"] &
+        background: rgba(white, 0.25)
       @media (prefers-color-scheme: dark)
         background: rgba(white, 0.25)
-      box-shadow: $boxshadow-button
+      box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 0 2px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.08)
       cursor default
       pointer-events: none
       backdrop-filter: saturate(300%)

package/source/css/_components/sidebar/menu.styl

@@ -16,6 +16,7 @@
     width: 100%
     min-height: 40px
     border-radius: $border-bar
+    corner-shape: superellipse(1.2)
     font-size: $fs-15
     font-weight: 500
     color: var(--text-p3)

package/source/css/_components/sidebar/search.styl

@@ -25,6 +25,8 @@
       right: 1rem
       border-radius: $border-bar
       background: var(--bg-a100)
+      :root[data-theme="dark"] &
+        background: var(--bg-a20)
       @media screen and (prefers-color-scheme: dark)
         background: var(--bg-a20)
       z-index 0
@@ -44,6 +46,8 @@
     color: var(--text)
     &::placeholder
       color: var(--text-p3)
+      :root[data-theme="dark"] &
+        color: var(--text-p2)
       @media screen and (prefers-color-scheme: dark)
         color: var(--text-p2)
   .search-button 

package/source/css/_components/sidebar/sidebar.styl

@@ -38,11 +38,15 @@
         --background-opacity: hexo-config('style.leftbar.background-opacity')
       background-image: convert(hexo-config('style.leftbar.background-image'))
       filter: saturate(var(--saturate)) blur(var(--blur-px)) opacity(var(--background-opacity))
+      :root[data-theme="dark"] &
+        --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
       @media screen and (prefers-color-scheme: dark)
         --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
-    else if $leftbar-background-color
-      background-color: convert($leftbar-background-color)
-    
+    else if $leftbar-background-color-light || $leftbar-background-color-dark
+      background-color: convert($leftbar-background-color-light)
+      @media screen and (prefers-color-scheme: dark)
+        background-color: convert($leftbar-background-color-dark)
+
   .leftbar-container
     height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
     display: flex
@@ -69,12 +73,15 @@
     &:before
       if $leftbar-background-image
         @media screen and (min-width: $device-mobile-max)
-          background: rgba(white, 0.5)
+          background: rgba(white, 0.05)
           box-shadow: inset 0 0 32px 1px rgba(white, 0.5)
           backdrop-filter: saturate(300%)
           -webkit-backdrop-filter: saturate(300%)
           mask: linear-gradient(black, rgba(black, 0.5), 70%, transparent, 90%, transparent)
           -webkit-mask: linear-gradient(black, rgba(black, 0.5), 70%, transparent, 90%, transparent)
+        :root[data-theme="dark"] &
+          background: rgba(white, 0.05)
+          box-shadow: inset 0 0 32px 1px rgba(white, 0.1)
         @media screen and (prefers-color-scheme: dark)
           background: rgba(white, 0.05)
           box-shadow: inset 0 0 32px 1px rgba(white, 0.1)
@@ -87,4 +94,4 @@
       --inset: 0
       --saturate: 300%
     .leftbar-container:after
-      background: var(--bg-a20)
+      background: var(--bg-a20)

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

@@ -39,8 +39,6 @@ chat_dark()
         font-size: $fs-12
     .cap
         color: var(--text-p3)
-    *
-        word-break: break-all
     box-sizing: border-box
     -webkit-box-sizing: border-box
     -moz-box-sizing: border-box
@@ -62,7 +60,7 @@ chat_dark()
         position: relative
         box-shadow: unset
         >.device-image
-            background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/frame/iphone11.svg)
+            background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.14/frame/iphone11.svg)
             width: 100%
             height: 100%
             position: absolute
@@ -274,7 +272,7 @@ chat_dark()
                     &.emoji,
                     &.link,
                     &.video,
-                    &.file
+                    &.chat-file
                         background: unset !important
                         padding: 0 !important
                     &.link
@@ -394,7 +392,7 @@ chat_dark()
                         video
                             width: 100%
                             border-radius: 6px
-                    &.file
+                    &.chat-file
                         background: transparent !important
                         display: flex
                         padding: unset !important
@@ -458,7 +456,7 @@ chat_dark()
                         flex-basis: 100%
                         justify-content: flex-end
                     .talk
-                        &.file
+                        &.chat-file
                             flex-direction: row-reverse
                         &.voice
                             .voice-btns
@@ -524,11 +522,11 @@ chat_dark()
                             display: none
                         &.link>.link-card,
                         &.video>video,
-                        &.file>.content,
+                        &.chat-file>.content,
                         &.image>img,
                         &.emoji>img
                             border-radius: 4px
-                        &.file .download-btn
+                        &.chat-file .download-btn
                             display: none
                         &.voice
                             padding: 8px .5em

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

@@ -3,6 +3,7 @@ details.folding
   padding: 1rem
   margin: 1rem 0
   border-radius: $border-card
+  corner-shape: superellipse(1.2)
   background: var(--theme-block)
   border: 1px solid var(--theme-border)
   summary

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

@@ -49,6 +49,8 @@
 // 网格布局
 .tag-plugin.gallery.grid-box
   display: grid
+  .grid-cell
+    corner-shape: superellipse(1.2)
   &[size='xs']
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
     grid-gap: 2px

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

@@ -17,6 +17,7 @@
   &[bg]>.cell
     padding: 1rem
     border-radius: $border-card
+    corner-shape: superellipse(1.2)
   &[bg='box']>.cell
     background: var(--block)
   &[bg='card']>.cell

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

@@ -5,6 +5,7 @@
   .image-bg
     text-align: center
     border-radius: $border-image
+    corner-shape: superellipse(1.2)
     position: relative
     overflow: hidden
     display: flex
@@ -23,7 +24,9 @@
       display: block
       object-fit: cover
       border-radius: $border-image
+      corner-shape: superellipse(1.2)
     .image-download
+      z-index: 2
       position: absolute
       bottom: 8px
       right: 8px

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

@@ -13,6 +13,7 @@
   width: 300px
   max-width: 100%
   border-radius: $border-card-s
+  corner-shape: superellipse(1.2)
   hoverable-card()
 
 .md-text .link-card.plain

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

@@ -1,19 +1,21 @@
 .tag-plugin.navbar
   display: inline-flex
-  background: var(--card)
-  border-radius: $border-button
-  z-index inherit
-  box-shadow: 0 0 8px hsla(black, 0.04)
   a
     box-sizing: border-box
-    padding: .25rem 1rem
-    margin: 2px
+    padding: .25rem 0
     color: inherit
-    border-radius: 'calc(%s - 1px)' % $border-button
-    trans1 all
+    position: relative
     &+a
-      margin-left: 0
-    &.active
-      background: var(--block)
-    &:hover
-      background: var(--block)
+      margin-left: 1rem
+    &:after
+      content: ''
+      position: absolute
+      border-radius: 2px
+      width: 100%
+      height: 2px
+      left: 0
+      bottom: 0
+      trans1 all
+    &.active,&:hover
+      &:after
+        background: var(--theme)

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

@@ -2,6 +2,7 @@
   position: relative
   padding: 0.25rem 1rem
   border-radius: $border-card
+  corner-shape: superellipse(1.2)
   background: var(--theme-block)
   overflow: hidden
   if hexo-config('tag_plugins.note.border') == true

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

@@ -1,6 +1,7 @@
 .md-text .tag-plugin.okr
   position: relative
   border-radius: $border-card
+  corner-shape: superellipse(1.2)
   background: var(--theme-block)
   if hexo-config('tag_plugins.okr.border') == true
     border: 1px solid var(--theme-border)

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

@@ -12,6 +12,7 @@
   position: relative
   .lazy-box
     border-radius: $border-card-s
+    corner-shape: superellipse(1.2)
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
     overflow hidden
     >img
@@ -28,6 +29,7 @@
       margin-right: 8px
       margin-top: 2px
       border-radius: @width
+      corner-shape: superellipse(1)
       >img
         width: 28px
         height: @width

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

@@ -1,6 +1,9 @@
 .tag-plugin.timeline
   position: relative
   padding-left: 16px
+  p>img
+    border-radius: $border-image-s
+    corner-shape: superellipse(1.2)
   &:before
     content: ''
     position: absolute
@@ -19,6 +22,9 @@
   .tag-plugin.timeline
     ol,ul
       margin-left: 0
+    p>img
+      border-radius: $border-image-s
+      corner-shape: superellipse(1.2)
 
 .tag-plugin.timeline .timenode
   position: relative
@@ -87,6 +93,7 @@
 .tag-plugin.timeline .body
   background: var(--card)
   border-radius: 16px
+  corner-shape: superellipse(1.2)
   border-top-left-radius: 2px
   padding: 0.5rem 1rem
   margin-top: 4px
@@ -143,6 +150,7 @@
   .lazy-box
     margin: .5rem 0
     border-radius: $border-image
+    corner-shape: superellipse(1.2)
     >img
       margin: 0 auto
 
@@ -151,6 +159,7 @@
 
 aside .tag-plugin.timeline[data-api] .body .lazy-box
   border-radius: $border-image-s
+  corner-shape: superellipse(1.2)
 
 .tag-plugin.timeline[data-api] .body .footer
   margin: 0 0 -0.5rem

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

@@ -33,6 +33,8 @@
     trans1 all
     color: var(--theme)
     background: var(--theme-a10)
+    :root[data-theme="dark"] &
+      background: var(--theme-a20)
     @media (prefers-color-scheme: dark)
       background: var(--theme-a20)
     &.vote-up

package/source/css/_components/widgets/components.styl

@@ -4,6 +4,7 @@
 
 .linklist .link
   border-radius: $border-bar
+  corner-shape: superellipse(1.2)
   color: var(--text-p2)
   min-height: 32px
   padding: 0 4px