hexo-theme-stellar 1.17.2 → 1.18.0

package/source/css/_layout/tag-plugins/common.styl

@@ -1,120 +1,106 @@
 set_text_white()
   --text-p0: white
   --text-p1: white
-  --text-p2: #eee
+  --text-p2: hsl(0 0 88%)
   --text-p3: #ddd
   --text-code: white
-  --card: $dark-card
-  --block: $dark-block
-  --block-border: lighten($dark-block, 6)
-  --block-hover: darken($dark-block, 4)
 set_text_black()
   --text-p0: black
   --text-p1: #111
-  --text-p2: #333
+  --text-p2: hsl(0 0 12%)
   --text-p3: #555
   --text-code: white
-  --card: $light-card
-  --block: $light-block
-  --block-border: darken($light-block, 5)
-  --block-hover: darken($light-block, 2)
+
+set_dynamic_color($theme)
+  --theme: $theme
+  --theme-bg1: hsl(hue($theme), 90, 90)
+  --theme-bg2: hsl(hue($theme), 80, 95)
+  --theme-border: hsl(hue($theme), 50, 80)
+  --text-p0: hsl(hue($theme), 60, 16)
+  --text-p1: hsl(hue($theme), 50, 24)
+  --text-p2: hsl(hue($theme), 90, 24)
 
 .tag-plugin
   --theme: var(--text-p1)
   --theme-border: var(--block-border)
-  --theme-bg: var(--block)
+  --theme-bg1: hsl(hue($color-theme), 90, 90)
+  --theme-bg2: var(--block)
+  &.tag
+    --text-p2: hsl(hue($color-theme), 90, 24)
 
 .tag-plugin[color='red']
-  --theme: $c-red
-  --theme-border: mix($c-red, white, 60)
-  --theme-bg: mix($c-red, white, 15)
-
+  set_dynamic_color($c-red)
 .tag-plugin[color='orange']
-  --theme: $c-orange
-  --theme-border: mix($c-orange, white, 60)
-  --theme-bg: mix($c-orange, white, 15)
-
+  set_dynamic_color($c-orange)
 .tag-plugin[color='yellow']
-  --theme: $c-yellow
-  --theme-border: mix($c-yellow, white, 60)
-  --theme-bg: mix($c-yellow, white, 20)
-
+  set_dynamic_color($c-yellow)
 .tag-plugin[color='green']
-  --theme: $c-green
-  --theme-border: mix($c-green, white, 60)
-  --theme-bg: mix($c-green, white, 15)
-
+  set_dynamic_color($c-green)
 .tag-plugin[color='cyan']
-  --theme: $c-cyan
-  --theme-border: mix($c-cyan, white, 60)
-  --theme-bg: mix($c-cyan, white, 15)
-
+  set_dynamic_color($c-cyan)
 .tag-plugin[color='blue']
-  --theme: $c-blue
-  --theme-border: mix($c-blue, white, 60)
-  --theme-bg: mix($c-blue, white, 15)
-
+  set_dynamic_color($c-blue)
 .tag-plugin[color='purple']
-  --theme: $c-purple
-  --theme-border: mix($c-purple, white, 60)
-  --theme-bg: mix($c-purple, white, 15)
+  set_dynamic_color($c-purple)
 
 .tag-plugin[color='light']
-  --theme-bg: white
+  --theme-bg1: hsl(0 0 88%)
+  --theme-bg2: white
+  set_text_black()
 
 .tag-plugin[color='dark']
-  --theme-bg: #333
+  --theme-bg1: hsl(0 0 12%)
+  --theme-bg2: #333
   set_text_white()
 
 .tag-plugin[color='warning']
   --theme: $c-yellow
   --theme-border: #ffe659
-  --theme-bg: #ffe659
+  --theme-bg2: #ffe659
   --theme-link: #ff453a
 
 .tag-plugin[color='error']
   --theme: $c-yellow
   --theme-border: #ff453a
-  --theme-bg: #ff453a
+  --theme-bg2: #ff453a
   --theme-link: #ffe659
   set_text_white()
 
 set_darkmode_tags()
+  set_dynamic_color($theme)
+    --theme: $theme
+    --theme-bg1: hsl(hue($theme), 80, 20)
+    --theme-bg2: hsl(hue($theme), 16, 16)
+    --theme-border: hsl(hue($theme), 50, 24)
+    --text-p0: hsl(hue($theme), 80, 80)
+    --text-p1: hsl(hue($theme), 64, 80)
+    --text-p2: hsl(hue($theme), 80, 72)
+  .tag-plugin.tag
+    set_dynamic_color($color-theme)
   .tag-plugin[color='red']
-    --theme-border: mix($c-red, black, 70)
-    --theme-bg: mix($c-red, black, 35)
-
+    set_dynamic_color($c-red)
   .tag-plugin[color='orange']
-    --theme-border: mix($c-orange, black, 70)
-    --theme-bg: mix($c-orange, black, 35)
-
+    set_dynamic_color($c-orange)
   .tag-plugin[color='yellow']
-    --theme-border: mix($c-yellow, black, 70)
-    --theme-bg: mix($c-yellow, black, 30)
-
+    set_dynamic_color($c-yellow)
   .tag-plugin[color='green']
-    --theme-border: mix($c-green, black, 70)
-    --theme-bg: mix($c-green, black, 30)
-
+    set_dynamic_color($c-green)
   .tag-plugin[color='cyan']
-    --theme-border: mix($c-cyan, black, 70)
-    --theme-bg: mix($c-cyan, black, 30)
-
+    set_dynamic_color($c-cyan)
   .tag-plugin[color='blue']
-    --theme-border: mix($c-blue, black, 70)
-    --theme-bg: mix($c-blue, black, 35)
-
+    set_dynamic_color($c-blue)
   .tag-plugin[color='purple']
-    --theme-border: mix($c-purple, black, 70)
-    --theme-bg: mix($c-purple, black, 40)
-
+    set_dynamic_color($c-purple)
   .tag-plugin[color='light']
     --theme-border: white
-    --theme-bg: #fff
+    --theme-bg1: hsl(0 0 88%)
+    --theme-bg2: #fff
+    set_text_black()
 
   .tag-plugin[color='dark']
     --theme-border: black
-    --theme-bg: #111
+    --theme-bg1: hsl(0 0 12%)
+    --theme-bg2: #111
     set_text_white()
 
   .tag-plugin[color='warning'],.tag-plugin[color='light']

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

@@ -4,7 +4,7 @@ details.folding
   margin: 1rem 0
   border-radius: $border-block
   font-size: $fs-14
-  background: var(--theme-bg)
+  background: var(--theme-bg2)
   border: 1px solid var(--theme-border)
   summary
     cursor: pointer
@@ -22,13 +22,13 @@ details.folding
         border-bottom: none !important
     &:hover
       color: var(--text-p0)
-      &:after
-        position: absolute
-        content: '+'
-        text-align: center
-        top: 50%
-        transform: translateY(-50%)
-        right: 1rem
+    &:after
+      position: absolute
+      content: '+'
+      text-align: center
+      top: 50%
+      transform: translateY(-50%)
+      right: 1rem
 
 
 details.folding[open]
@@ -38,9 +38,8 @@ details.folding[open]
     border-bottom-right-radius: 0
     color: var(--text-p1)
     margin-bottom: 0
-    &:hover
-      &:after
-        content: '-'
+    &:after
+      content: '-'
   >div.body
     display: flex;
     flex-direction: column;

package/source/css/_layout/tag-plugins/{split.styl → grid.styl}

@@ -1,11 +1,11 @@
-.tag-plugin.split
+.tag-plugin.grid
   display: grid
   grid-gap: 16px
   grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
   >.cell
     margin: 1rem 0
     p:first-child>strong:only-child
-      font-size: $fs-h4
+      font-size: 1rem
   >.cell>
     p   
       line-height: 1.5
@@ -19,11 +19,11 @@
       margin-bottom: -0.25em
     
 
-.tag-plugin.split
+.tag-plugin.grid
   @media screen and (max-width: $device-tablet)
     display: block
 
-.tag-plugin.split
+.tag-plugin.grid
   &[bg]>.cell
     padding: 1rem
     border-radius: $border-card

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

@@ -69,7 +69,7 @@
   >.bottom
     margin: 0 1rem 1rem
     .title
-      font-size: $fs-15
+      font-size: 1rem
       margin-bottom: 0.5rem
 
 .md-text .link-card

package/source/css/_layout/tag-plugins/mark.styl

@@ -1,8 +1,8 @@
 .md-text .tag-plugin.mark
   padding: 0 1px
   border-radius: 2px
-  background: var(--theme-bg)
+  background: var(--theme-bg2)
   border: 1px solid var(--theme-border)
   color: var(--text-p0)
   &[color=dark]
-    border-color: var(--theme-bg)
+    border-color: var(--theme-bg2)

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

@@ -16,7 +16,7 @@
         display: none
       &:hover
         background: var(--block)
-      &.active 
+      &.active
         background: var(--block)
         box-shadow: none
         color: var(--text-p1)

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

@@ -4,13 +4,15 @@
   margin-bottom: 1rem
   padding: 0 1rem
   border-radius: $border-block
-  background: var(--theme-bg)
+  background: var(--theme-bg2)
   border: 1px solid var(--theme-border)
   color: var(--text-p1)
   >.title
     font-size: $fs-15
     line-height: 1.2
     margin-top: 1rem
+    font-weight: 500
+    color: var(--text-p0)
   >.body
     &,p
       font-size: $fs-14

package/source/css/_layout/tag-plugins/poetry.styl

@@ -1,31 +1,32 @@
 .md-text .tag-plugin.poetry
-  align-self: center
-  &[align=center]
-    align-items: center
-  >.title
-    font-weight: 500
-    font-size: 1rem
-    margin-top: var(--gap-p)
-  >.meta
-    color: var(--text-p2)
-    font-size: $fs-12
-    font-weight: 500
-    span+span
-      margin-left: 4px
-  >.body
-    margin: var(--gap-p) 0
-    border-top: 1px dashed var(--block-border)
-    border-bottom: 1px dashed var(--block-border)
-    p
-      font-size: $fs-14
-  >.footer
-    font-style: italic
-    color: var(--text-p4)
-    margin: var(--gap-p) 0
-    font-size: $fs-12
+  display: flex
+  flex-direction: column
+  align-items: center
+  .content
+    >.title
+      font-weight: 500
+      font-size: 1rem
+      margin-top: var(--gap-p)
+    >.meta
+      color: var(--text-p2)
+      font-size: $fs-12
+      font-weight: 500
+      span+span
+        margin-left: 4px
+    >.body
+      margin: var(--gap-p) 0
+      border-top: 1px dashed var(--block-border)
+      border-bottom: 1px dashed var(--block-border)
+      p
+        font-size: $fs-14
+    >.footer
+      font-style: italic
+      color: var(--text-p4)
+      margin: var(--gap-p) 0
+      font-size: $fs-12
 
 // 描边修饰
-.md-text .tag-plugin.poetry
+.md-text .tag-plugin.poetry .content
   padding-left: 1rem
   position: relative
   &:before

package/source/css/_layout/tag-plugins/quot.styl

@@ -1,62 +1,66 @@
 .md-text .tag-plugin.quot
   text-align: center
-  position: relative
   align-items: center
-  max-width 400px
-.md-text .tag-plugin.quot:not(span)
-  display: inline-flex
-  align-self: center
-  border-bottom: none
-  font-weight: 700
-  &:first-child
-    margin-top: 1.5rem
-  a.headerlink:before
-    content: ''
-  padding: 16px 24px 8px 24px
-  @media screen and (max-width: $device-mobile)
-    padding: 16px 20px 8px
-  line-height: 1.2
+  display: flex
+  flex-direction: column
+  
+  .content
+    display: flex
+    align-items: center
+    border-bottom: none
+    font-weight: 700
+    &:first-child
+      margin-top: 1.5rem
+    a.headerlink:before
+      content: ''
+    padding: 16px 24px 8px 24px
+    @media screen and (max-width: $device-mobile)
+      padding: 16px 20px 8px
+    line-height: 1.2
 
+.md-text .tag-plugin.quot .content
+  max-width 400px
+  position: relative
 // override
-.md-text.content
-  .quot:not(span)
-    color: var(--text-p0)
-  h1.quot
+.tag-plugin.quot
+  h1
     font-size: $fs-h1
     font-weight: 900
     padding: 20px 32px 12px 32px
     @media screen and (max-width: $device-mobile)
       padding: 20px 24px 12px
-  h2.quot,h3.quot,h4.quot,h5.quot,h6.quot
+  h2,h3,h4,h5,h6
     font-size: $fs-h3
-  p.quot
+  p
     font-size: $fs-h4
+    color: var(--text-p0)
 
 // type=text
-.md-text .tag-plugin.quot[type=text]:not(span)
-  &:before,&:after
-    content: ""
-    position: absolute
-    width: 8px
-    height: 14px
-  &:before
-    top: 8px
-    left: 0
-    border-top: 6px solid $color-accent
-    border-left: 6px solid $color-accent
-  &:after
-    right: 0
-    bottom: 0
-    border-right: 6px solid $color-accent
-    border-bottom: 6px solid $color-accent
-.md-text.content h1.quot[type=text]
-  &:before,&:after
-    width: 12px
-    height: 20px
-    border-width: 8px
+.md-text .tag-plugin.quot
+  .content[type=text]
+    &:before,&:after
+      content: ""
+      position: absolute
+      width: 8px
+      height: 14px
+    &:before
+      top: 8px
+      left: 0
+      border-top: 6px solid $color-accent
+      border-left: 6px solid $color-accent
+    &:after
+      right: 0
+      bottom: 0
+      border-right: 6px solid $color-accent
+      border-bottom: 6px solid $color-accent
+  h1.content[type=text]
+    &:before,&:after
+      width: 12px
+      height: 20px
+      border-width: 8px
 
 // type=icon
-.md-text .tag-plugin.quot[type=icon]:not(span)
+.md-text .tag-plugin.quot .content[type=icon]
   .icon
     height: 1.5em
     display: inline-block
@@ -67,18 +71,3 @@
       margin-right: .5rem
     &.suffix
       margin-left: .5rem
-
-// inline quot
-.md-text span.tag-plugin.quot
-  font-weight: 500
-  &:before,&:after
-    color: $color-accent
-    font-weight: 900
-  &:before
-    content: "「"
-    margin-left: -0.125em
-    margin-right: 0.125em
-  &:after
-    content: "」"
-    margin-left: 0.125em
-    margin-right: -0.125em

package/source/css/_layout/tag-plugins/tag.styl

@@ -0,0 +1,13 @@
+.md-text .tag-plugin.tag
+  padding: 0px 4px
+  border-radius: 2px
+  background: var(--theme-bg1)
+  color: var(--text-p2)
+  margin: 2px 0
+  display: inline-block
+  font-size: $fs-14
+  trans2 background color
+  &:hover
+    background: var(--text-p2)
+    color: var(--theme-bg1)
+  

package/source/css/_layout/widgets/ghuser.styl

@@ -52,21 +52,25 @@
   .menu 
     margin-bottom: 0
     background: none
-    a:hover 
-      box-shadow: none 
-      background: var(--block)
-    a.active 
-      box-shadow: none
-      position: relative
-      &:after
-        content: ''
-        position: absolute
-        height: 3px
-        bottom: 0
-        width: 32px
-        left: 'calc(50% - 0.5 * %s)' % @width
-        border-radius: 4px
-        background: $color-theme
+    border: 0
+    a
+      margin: 0
+      &.active 
+        box-shadow: none
+        position: relative
+        background: none
+        &:after
+          content: ''
+          position: absolute
+          height: 3px
+          bottom: 0
+          width: 32px
+          left: 'calc(50% - 0.5 * %s)' % @width
+          border-radius: 4px
+          background: $color-theme
+      &:hover 
+        box-shadow: none 
+        background: var(--block)
 
   .buttons
     margin: 1rem 0

package/source/css/_layout/widgets/search.styl

@@ -1,3 +1,103 @@
 .widgets .widget-wrapper.search
-  margin-top: 0
+  margin-top: 1rem
   margin-bottom: 0
+
+.search-wrapper
+  width: 100%
+  >.search-form
+    position: sticky
+    top: 1rem
+    display: flex
+    flex-direction: row
+    align-items: center
+  .search-input
+    width: 100%
+    padding: 0.5rem
+    line-height: 1
+    box-sizing: border-box
+    border-radius: $border-block
+    background-color: var(--card)
+    color: var(--text-p0)
+    border: 1px solid var(--block-border)
+    &:focus
+      trans1 border-color
+  
+  &.noresult 
+    .search-input
+      &:focus
+        border: 1px solid $c-red
+    .search-icon
+      color: $c-red
+
+  .search-no-result
+    display: none
+    margin: 1em auto
+    color: var(--text-p1)
+    text-align: center
+    font-size: $fs-14
+    padding: 2rem
+    background: var(--block)
+    border-radius: $border-block
+
+  #search-result
+    ul.search-result-list
+      padding: 0
+      margin: 0
+      list-style-type: none
+    li
+      margin: 1em auto
+      &:hover
+        .search-result-title
+          color: $color-hover
+    .search-result-title
+      color: var(--text-p1)
+      font-weight: 700
+      line-height: 1.2
+
+    .search-result-content
+      overflow: hidden
+      color: var(--text-p3)
+      margin: .4em auto
+      max-height: 13em
+      text-align: justify
+      font-size: $fs-12
+      line-height: 1.2
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 3
+
+    .search-keyword
+      border-bottom: 1px dashed $color-hover
+      color: $color-hover
+      font-weight: bold
+
+
+
+.search-wrapper.noresult
+  .search-no-result
+    display: block
+
+.widget-wrapper
+  .search-form
+    top: 0
+    background: var(--site-bg)
+  .search-input
+    margin-top: 1rem
+    margin-bottom: -1rem
+    padding-left: 1.75rem
+  .search-icon 
+    margin-top: 1rem
+    margin-bottom: -1rem
+    position: absolute
+    margin-left: 0.5rem
+    left: 0
+    pointer-events: none
+    color: var(--text-p2)
+    
+  #search-result,.search-no-result
+    margin-top: 2rem
+
+.widget-wrapper:not(:first-child)
+  .search-wrapper
+    margin-top: -1rem

package/source/css/_layout/widgets/toc_common.styl

@@ -66,6 +66,6 @@
   &:hover
     background: var(--block-hover)
   &.active
-    color: var(--theme-highlight) !important
+    color: $color-theme !important
     &:before
       visibility: visible

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

@@ -110,7 +110,6 @@ set_darkmode_comments()
   .cmt-body.twikoo
     --twikoo-lighttext: #f2b94b;
     --twikoo-secondtext: #a1a2b8;
-    --twikoo-emoji-background: darken($dark-block, 1);
     --twikoo-theme: #409eff;
 
 if hexo-config('style.darkmode') == 'auto'

package/source/css/_plugins/index.styl

@@ -8,9 +8,6 @@ if hexo-config('plugins.scrollreveal.enable')
 if hexo-config('plugins.fancybox.enable')
   @import 'fancybox'
 
-// 搜索
-if hexo-config('search.service') == 'local_search'
-  @import 'search/local-search'
 
 // 评论
 if hexo-config('comments.service') == 'beaudar'