hexo-theme-stellar 1.26.8 → 1.28.0

package/source/css/_plugins/comments/twikoo.styl

@@ -1,120 +1,164 @@
 .cmt-body.twikoo
-  --twikoo-lighttext: $color-theme;
-  --twikoo-secondtext: #909094;
-  --twikoo-emoji-background: #f8f8f8;
-  --twikoo-theme: $color-theme;
+  --twikoo-theme: $color-theme
   margin-top: 1.5rem
 
   .tk-content
     .vemoji, .tk-owo-emotion
-      width: unset;
-      border-radius: $border-image;
-      max-height: 24px;
-      max-width: 100px;
-
+      width: unset
+      border-radius: $border-image
+      max-height: 24px
+      max-width: 100px
+      display: inline
+      margin: 0 0.25em
     img
-      max-width: 400px;
-      max-height: 400px;
-      border-radius: $border-image;
+      max-width: 400px
+      max-height: 400px
+      border-radius: $border-image
 
 .OwO
   .OwO-body
-    background: var(--twikoo-emoji-background) !important;
-    color: var(--text-p1) !important;
+    background-color: var(--block) !important
+    color: var(--text-p1) !important
 
     .OwO-items
       .OwO-item
         img
-          max-height: 26px;
-          width: unset;
+          max-height: 26px
+          width: unset
 
 .twikoo
   .el-input-group__append, .el-input-group__prepend,
   .el-input__inner, .el-textarea__inner,
-  .el-button:not(.el-button--primary):not(.el-button--text),
-  .tk-comments-count,
-  .tk-content,
   .tk-preview-container
-    color: var(--text-p1) !important;
-
+    border-color: var(--block-border)
+  .el-input__inner:focus,
+  .el-textarea__inner:focus
+    border-color: var(--twikoo-theme) !important  
   .el-button:not(.el-button--primary):not(.el-button--text):active,
   .el-button:not(.el-button--primary):not(.el-button--text):focus,
   .el-button:not(.el-button--primary):not(.el-button--text):hover
-    color: var(--twikoo-theme) !important;
+    color: var(--twikoo-theme) !important
+    border-color: var(--theme-link-opa) !important
+    background-color: var(--block) !important
+  .el-button--primary.is-disabled:active,
+  .el-button--primary.is-disabled:focus,
+  .el-button--primary.is-disabled:hover
+    background-color: var(--theme-link-opa) !important
+
+  .el-button:focus,.el-button:hover
+    border-color: var(--theme-link-opa)
+  .el-button:active
+    color: var(--twikoo-theme)
+    border-color: var(--twikoo-theme)
+  .el-button.is-active,.el-button.is-plain:active
+    color: var(--twikoo-theme)
+    border-color: var(--twikoo-theme)
+
+  .el-button--primary
+    background-color: var(--twikoo-theme)
+    border-color: var(--twikoo-theme) !important
+  .el-button--primary:focus,.el-button--primary:hover
+    background: $color-hover
+    border-color: $color-hover !important
+  .el-button--primary:active
+    background: var(--twikoo-theme)
+    border-color: var(--twikoo-theme)
+  .el-button--primary.is-active
+    background: var(--twikoo-theme)
+    border-color: var(--twikoo-theme)
+  .el-button--primary.is-disabled,
+  .el-button--primary.is-disabled:active,
+  .el-button--primary.is-disabled:focus,
+  .el-button--primary.is-disabled:hover
+    background-color: var(--theme-link-opa) !important
+    border-color: var(--theme-link-opa) !important
+  .el-button--primary.is-plain
+    color: var(--twikoo-theme) !important
+    border-color: var(--theme-link-opa)
+  .el-button--primary.is-plain:focus,
+  .el-button--primary.is-plain:hover
+    background: var(--twikoo-theme) !important
+    border-color: var(--twikoo-theme)
+  .el-button--primary.is-plain:active
+    background: var(--twikoo-theme) !important
+    border-color: var(--twikoo-theme)
 
   .tk-action-icon svg
-    color: var(--text-p1) !important;
+    color: var(--text-p2)
+
+  .tk-action-link
+    color: var(--text-p1)
+    &:hover
+      color: var(--twikoo-theme)
+
+  .el-loading-spinner .path
+    stroke: var(--twikoo-theme)
+
+  .tk-icon.__comments
+    color: var(--twikoo-theme)
 
   b, strong
-    color: var(--twikoo-lighttext);
+    color: var(--text-p1)
 
   a
     cursor: pointer
 
   .tk-time, .tk-extras
-    color: var(--twikoo-secondtext);
+    color: var(--text-p3)
 
   .tk-expand
     width: auto
     border: none
     padding: 6px 2rem
     border-radius: $border-card
-    background: var(--block)
+    background: var(--block-hover)
     color: var(--text-p1)
     line-height: 2
     font-size: 14px
     font-weight: 500
-    trans()
+    trans1 background
 
     &:hover
-      background: var(--block-hover)
+      background: var(--card)
 
   .tk-comment
-    margin-top: 0 !important;
+    margin-top: 0
     margin-bottom: 1rem
-    border: 1px dashed var(--block-border);
-    padding: 1rem;
-    border-radius: $border-card;
-    background: var(--card);
+    border: 1px dashed var(--block-border)
+    padding: 1rem
+    border-radius: $border-card
+    background: var(--block)
 
     &:hover
-      border-color: var(--twikoo-theme);
+      border-color: var(--twikoo-theme)
 
   .tk-main .tk-comment
-    margin-top: 1rem !important;
-    margin-bottom: 0;
+    margin-top: 1rem
+    margin-bottom: 0
 
   .tk-submit
-    padding: 1rem 1rem 0 1rem;
-    border-radius: $border-card;
-    background: var(--card);
+    padding: 1rem 1rem 0 1rem
+    border-radius: $border-card
+    background: var(--block)
 
   .tk-tag
-    vertical-align: 0.1em !important;
+    vertical-align: 0.1em
 
+  .tk-tag-green
+    border: none
+    background-color: var(--theme-link-opa)
+    color: var(--twikoo-theme)
+    
   .tk-comments-title .tk-comments-count
-    margin-top: 15px;
-    color: var(--text-p1);
+    margin-top: 15px
+    color: var(--text-p1)
 
     span:nth-child(1)
-      font-size: 1.5rem;
-      font-weight: 700;
+      font-size: 1.5rem
+      font-weight: 700
 
     span:nth-child(2)
-      font-size: 1rem;
+      font-size: 1rem
 
   .tk-comments-no
-    color: var(--text-p1);
-
-set_darkmode_comments()
-  .cmt-body.twikoo
-    --twikoo-lighttext: $color-link;
-    --twikoo-secondtext: var(--text-p2);
-    --twikoo-theme: $color-theme;
-
-if hexo-config('style.darkmode') == 'auto'
-  @media (prefers-color-scheme: dark)
-    set_darkmode_comments()
-
-if hexo-config('style.darkmode') == 'always'
-  set_darkmode_comments()
+    color: var(--text-p1)

package/source/css/_plugins/comments/waline.styl

@@ -1,4 +1,4 @@
-.cmt-body.waline
+.cmt-body
   .wl-panel
     margin: 0.5em 0 !important
   .wl-meta-head
@@ -37,8 +37,8 @@
   --waline-avatar-radius: 50%;
   --waline-box-shadow: none;
   
-
-  @media (prefers-color-scheme: dark)
+.cmt-body.waline
+  ondark()
     --waline-white: #000;
     --waline-light-grey: #666;
     --waline-dark-grey: #999;
@@ -55,11 +55,14 @@
     /* 其他颜色 */
     --waline-info-bgcolor: #272727;
     --waline-info-color: #666;
+    .wl-count
+      padding: .375em;
+      font-weight: bold;
+      font-size: 1.25em;
+      color: #fff;
 
-.wl-count
-  @media (prefers-color-scheme: dark)
-    padding: .375em;
-    font-weight: bold;
-    font-size: 1.25em;
-    color: #fff;
-
+  if theme(dark)
+    ondark()
+  else if theme(auto)
+    @media (prefers-color-scheme: dark)
+      ondark()

package/source/css/_plugins/index.styl

@@ -16,6 +16,8 @@ if hexo-config('plugins.copycode.enable')
 if hexo-config('plugins.tianli_gpt.enable')
   @import 'tianli_gpt'
 
+if hexo-config('plugins.katex.enable')
+  @import 'katex'
 
 // 评论
 if hexo-config('comments.service') == 'beaudar'

package/source/css/_plugins/katex.styl

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

package/source/css/_plugins/mermaid.styl

@@ -1,18 +1,9 @@
 pre.mermaid
-  display: inline-block
-  width: 100%
-  text-align: center
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-family: $ff-body
 
-.mermaid svg 
-  width: 100%
-  display: inline-block
-
-
-.mermaid svg
-  width: 100%
-  display: inline-block
-
 .mermaid span,text
   font-family: $ff-body
 
@@ -23,103 +14,102 @@ pre.mermaid
 .mermaid rect.basic.label-container
   stroke: var(--block-border) !important
   fill: var(--block) !important
-  
-set_mermaid_darkmode()
-  .mermaid 
+
+_dark_mermaid()
+  .mermaid
     fill: #ccc !important
-  
 
-  .mermaid .error-icon 
+
+  .mermaid .error-icon
     fill: #a44141 !important
-  
 
-  .mermaid .error-text 
+
+  .mermaid .error-text
     fill: #ddd !important
     stroke: #ddd !important
-  
 
-  .mermaid .marker 
+
+  .mermaid .marker
     fill: lightgrey !important
     stroke: lightgrey !important
-  
 
-  .mermaid .marker.cross 
+
+  .mermaid .marker.cross
     stroke: lightgrey !important
-  
 
-  .mermaid .label 
+
+  .mermaid .label
     color: #ccc !important
-  
 
-  .mermaid .cluster-label text 
+
+  .mermaid .cluster-label text
     fill: #F9FFFE !important
-  
 
-  .mermaid .cluster-label span 
+
+  .mermaid .cluster-label span
     color: #F9FFFE !important
-  
+
 
   .mermaid .label text,
-  .mermaid span 
+  .mermaid span
     fill: #ccc !important
     color: #ccc !important
-  
+
 
   .mermaid .node rect,
   .mermaid .node circle,
   .mermaid .node ellipse,
   .mermaid .node polygon,
-  .mermaid .node path 
+  .mermaid .node path
     fill: #1f2020 !important
     stroke: #81B1DB !important
-  
 
-  .mermaid .arrowheadPath 
+
+  .mermaid .arrowheadPath
     fill: lightgrey !important
-  
 
-  .mermaid .edgePath .path 
+
+  .mermaid .edgePath .path
     stroke: lightgrey !important
-  
 
-  .mermaid .flowchart-link 
+
+  .mermaid .flowchart-link
     stroke: lightgrey !important
-  
 
-  .mermaid .edgeLabel 
+
+  .mermaid .edgeLabel
     background-color: hsl(0, 0%, 34.4117647059%) !important
-  
 
-  .mermaid .edgeLabel rect 
+
+  .mermaid .edgeLabel rect
     background-color: hsl(0, 0%, 34.4117647059%) !important
     fill: hsl(0, 0%, 34.4117647059%) !important
-  
 
-  .mermaid .cluster rect 
+
+  .mermaid .cluster rect
     fill: hsl(180, 1.5873015873%, 28.3529411765%) !important
     stroke: rgba(255, 255, 255, 0.25) !important
-  
 
-  .mermaid .cluster text 
+
+  .mermaid .cluster text
     fill: #F9FFFE !important
-  
 
-  .mermaid .cluster span 
+
+  .mermaid .cluster span
     color: #F9FFFE !important
-  
 
-  .mermaid div.mermaidTooltip 
+
+  .mermaid div.mermaidTooltip
     background: hsl(20, 1.5873015873%, 12.3529411765%) !important
     border: 1px solid rgba(255, 255, 255, 0.25) !important
-  
 
-  .mermaid .flowchartTitleText 
+
+  .mermaid .flowchartTitleText
     fill: #ccc
-  
 
-if hexo-config('style.darkmode') == 'auto'
-  @media (prefers-color-scheme: dark)
-    set_mermaid_darkmode()
 
-if hexo-config('style.darkmode') == 'always'
-  set_mermaid_darkmode()
+if theme(dark)
+  _dark_mermaid()
+else if theme(auto)
+  @media (prefers-color-scheme: dark)
+    _dark_mermaid()