[feat] colorful tag

_config.yml

@@ -339,18 +339,17 @@ style:
     code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
   text-align: left
   color:
-    common:
-      theme: 'hsl(192 98% 55%)' # 主题色
-      accent: 'hsl(14 100% 57%)' # 强调色
-      link: 'hsl(207 90% 54%)' # 超链接颜色
-      button: 'hsl(192 98% 55%)' # 按钮颜色
-      hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
     # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
-    dynamic:
+    background: 'hsl(212 16% 98%)' # 浅色背景颜色
-      background: 'hsl(212 16% 98%)' # 浅色背景颜色
+    block: 'hsl(212 8% 95%)' # 块背景颜色
-      block: 'hsl(212 8% 95%)' # 块背景颜色
+    code: 'hsl(14 100% 48%)' # 行内代码颜色
-      code: 'hsl(14 100% 48%)' # 行内代码颜色
+    text: 'hsl(0 0% 20%)' # 文本颜色
-      text: 'hsl(0 0% 20%)' # 文本颜色
+    # 主题色配置（不会根据明暗动态调整，请设置为通用的颜色）
+    theme: 'hsl(192 98% 55%)' # 主题色
+    accent: 'hsl(14 100% 57%)' # 强调色
+    link: 'hsl(207 90% 54%)' # 超链接颜色
+    button: 'hsl(192 98% 55%)' # 按钮颜色
+    hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
   animated_avatar:
     animate: auto # auto, always
     background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp

scripts/tags/poetry.js

@@ -3,7 +3,7 @@
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
  * poetry:
- * {% poetry [align:center] [title] [author:作者] [date:日期] [footer:footer] %}
+ * {% poetry [title] [author:作者] [date:日期] [footer:footer] %}
  * body
  * {% endpoetry %}
  *
@@ -13,13 +13,11 @@
 
 hexo.extend.tag.register('poetry', function(args, content) {
   var el = '';
-  args = hexo.args.map(args, ['author', 'date', 'align', 'footer'], ['title']);
+  args = hexo.args.map(args, ['author', 'date', 'footer'], ['title']);
 
   el += '<div class="tag-plugin poetry"';
-  if (args.align) {
-    el += ' align="' + args.align + '"';
-  }
   el += '>';
+  el += '<div class="content">'
   if (args.title) {
     el += '<div class="title">';
     el += args.title;
@@ -43,6 +41,7 @@ hexo.extend.tag.register('poetry', function(args, content) {
     el += args.footer;
     el += '</div>';
   }
+  el += '</div>'
   el += '</div>';
   return el;
 }, {ends: true});

scripts/tags/quot.js

@@ -38,14 +38,18 @@ hexo.extend.tag.register('quot', function(args) {
     return el;
   }
   if (args.el.includes('h')) {
-    el += '<' + args.el + ' class="tag-plugin quot"' + type + ' id="' + args.text + '">';
+    el += '<div' + ' class="tag-plugin quot">'
+    el += '<' + args.el + ' class="content" id="' + args.text + '"' + type + '>';
     el += '<a href="#' + args.text + '" class="headerlink" title="' + args.text + '"></a>';
     el += content();
     el += '</' + args.el + '>';
+    el += '</div>'
   } else {
-    el += '<' + args.el + ' class="tag-plugin quot"' + type + '>';
+    el += '<div' + ' class="tag-plugin quot">'
+    el += '<' + args.el + ' class="content"' + type + '>';
     el += content();
     el += '</' + args.el + '>';
+    el += '</div>'
   }
   return el;
 });

scripts/tags/tag.js

@@ -0,0 +1,35 @@
+/**
+ * tag.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% tag text href [color:color] %}
+ *
+ */
+
+'use strict';
+
+const tag_colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple']
+var tag_index = 0;
+
+hexo.extend.tag.register('tag', function(args) {
+  args = hexo.args.map(args, ['color'], ['text', 'href']);
+  if (args.color == null) {
+    const default_color = hexo.theme.config.tag_plugins.tag?.default_color
+    if (default_color) {
+      args.color = default_color
+    } else {
+      args.color = tag_colors[tag_index]
+      tag_index += 1
+      if (tag_index >= tag_colors.length) {
+        tag_index = 0
+      }
+    }
+  }
+  var el = '';
+  el += '<a class="tag-plugin tag"';
+  el += ' ' + hexo.args.joinTags(args, ['color', 'href']).join(' ');
+  el += '>';
+  el += args.text;
+  el += '</a>';
+  return el;
+});

source/css/_common/blockquote.styl

@@ -5,6 +5,6 @@ blockquote
   padding: 0.5rem 0.75rem
   background: var(--block)
   $bd-left = 4px
-  border-left: $bd-left solid hsl($dynamic-block-h, $dynamic-block-s, $dynamic-block-l * 0.8)
+  border-left: $bd-left solid var(--text-meta)
   border-radius: $bd-left $border-block $border-block $bd-left
   color: var(--text-p2)

source/css/_common/highlight.styl

@@ -15,7 +15,6 @@ p>code:not([class]),li>code:not([class])
   border-radius: $border-block
   overflow: hidden
   background: var(--block)
-  border: 1px solid var(--block-border)
   line-height: 1.5
   font-family: $ff-code
   box-sizing: border-box
@@ -35,7 +34,6 @@ p>code:not([class]),li>code:not([class])
     background: var(--block-hover)
     border-top-left-radius: "calc(%s - 1px)" % $border-block
     border-top-right-radius: "calc(%s - 1px)" % $border-block
-    border-bottom: 1px solid var(--block-border)
     span
       margin-right: 4px
   >table
@@ -102,7 +100,6 @@ table:not([class])
   >.hljs
     padding: 1rem
     border-radius: $border-block
-    border: 1px solid var(--block-border)
     line-height: 1.5
     box-sizing: border-box
 

source/css/_custom.styl

@@ -1,17 +1,17 @@
 @require('_defines/const')
 
 // 通用主题色
-$color-theme = convert(hexo-config('style.color.common.theme'))
+$color-theme = convert(hexo-config('style.color.theme'))
-$color-accent = convert(hexo-config('style.color.common.accent'))
+$color-accent = convert(hexo-config('style.color.accent'))
-$color-link = convert(hexo-config('style.color.common.link'))
+$color-link = convert(hexo-config('style.color.link'))
-$color-button = convert(hexo-config('style.color.common.button'))
+$color-button = convert(hexo-config('style.color.button'))
-$color-hover = convert(hexo-config('style.color.common.hover'))
+$color-hover = convert(hexo-config('style.color.hover'))
 
 // 动态颜色
-$dynamic-background = convert(hexo-config('style.color.dynamic.background'))
+$color-background = convert(hexo-config('style.color.background'))
-$dynamic-block = convert(hexo-config('style.color.dynamic.block'))
+$color-block = convert(hexo-config('style.color.block'))
-$dynamic-code = convert(hexo-config('style.color.dynamic.code'))
+$color-code = convert(hexo-config('style.color.code'))
-$dynamic-text = convert(hexo-config('style.color.dynamic.text'))
+$color-text = convert(hexo-config('style.color.text'))
 
 // @font-face
 //   font-family: 'Dosis'
@@ -41,7 +41,7 @@ $fs-13 = .8125rem
 $fs-12 = .75rem
 
 $fs-h1   = 1.75rem   // 32px
-$fs-h2   = 1.5rem // 24px
+$fs-h2   = 1.5rem    // 24px
 $fs-h3   = 1.375rem  // 22px
 $fs-h4   = 1.125rem  // 18px
 $fs-h5   = $fs-15

source/css/_defines/theme.styl

@@ -1,56 +1,56 @@
-$dynamic-background-h = hue($dynamic-background)
+$color-background-h = hue($color-background)
-$dynamic-background-s = saturation($dynamic-background)
+$color-background-s = saturation($color-background)
-$dynamic-background-l = lightness($dynamic-background)
+$color-background-l = lightness($color-background)
 
-$dynamic-block-h = hue($dynamic-block)
+$color-block-h = hue($color-block)
-$dynamic-block-s = saturation($dynamic-block)
+$color-block-s = saturation($color-block)
-$dynamic-block-l = lightness($dynamic-block)
+$color-block-l = lightness($color-block)
 
-$dynamic-code-h = hue($dynamic-code)
+$color-code-h = hue($color-code)
-$dynamic-code-s = saturation($dynamic-code)
+$color-code-s = saturation($color-code)
-$dynamic-code-l = lightness($dynamic-code)
+$color-code-l = lightness($color-code)
 
-$dynamic-text-h = hue($dynamic-text)
+$color-text-h = hue($color-text)
-$dynamic-text-s = saturation($dynamic-text)
+$color-text-s = saturation($color-text)
-$dynamic-text-l = lightness($dynamic-text)
+$color-text-l = lightness($color-text)
 
 set_text_dark()
-  --text-p0: hsl($dynamic-text-h, $dynamic-text-s, 0)
+  --text-p0: hsl($color-text-h, $color-text-s, 0)
-  --text-p1: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l)
+  --text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
-  --text-p2: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 0.75)
+  --text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
-  --text-p3: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.25)
+  --text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25)
-  --text-p4: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.5)
+  --text-p4: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.5)
-  --text-meta: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 2)
+  --text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2)
-  --text-code: hsl($dynamic-code-h, $dynamic-code-s, $dynamic-code-l * 1)
+  --text-code: hsl($color-code-h, $color-code-s, $color-code-l * 1)
 
 set_text_light()
-  --text-p0: hsl($dynamic-text-h, $dynamic-text-s, 100)
+  --text-p0: hsl($color-text-h, $color-text-s, 100)
-  --text-p1: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 0.25)
+  --text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
-  --text-p2: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-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($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1)
+  --text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2)
-  --text-p4: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1.25)
+  --text-p4: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.4)
-  --text-meta: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1.5)
+  --text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75)
-  --text-code: hsl($dynamic-code-h, $dynamic-code-s, 48)
+  --text-code: hsl($color-code-h, $color-code-s, $color-code-l * 1.25)
 
 :root
-  --site-bg: hsl($dynamic-background-h, $dynamic-background-s, 98)
+  --site-bg: hsl($color-background-h, $color-background-s, 98)
-  --card: hsl($dynamic-block-h, $dynamic-block-s, 100)
+  --card: hsl($color-block-h, $color-block-s, 100)
-  --block: hsl($dynamic-block-h, $dynamic-block-s, 95)
+  --block: hsl($color-block-h, $color-block-s, 95)
-  --block-border: hsl($dynamic-block-h, $dynamic-block-s, 90)
+  --block-border: hsl($color-block-h, $color-block-s, 90)
-  --block-hover: hsl($dynamic-block-h, $dynamic-block-s, 92)
+  --block-hover: hsl($color-block-h, $color-block-s, 92)
-  --block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 100)
+  --block-lighten: hsl($color-block-h, $color-block-s, 100)
   set_text_dark()
-  --theme-bg: $color-theme
+  --theme-bg2: $color-theme
   --theme-link: $color-link
 
 set_darkmode()
   :root
-    --site-bg: hsl($dynamic-background-h, $dynamic-background-s / 2, 16)
+    --site-bg: hsl($color-background-h, $color-background-s / 2, 16)
-    --card: hsl($dynamic-block-h, $dynamic-block-s * 1.5, 25)
+    --card: hsl($color-block-h, $color-block-s * 1.5, 25)
-    --block: hsl($dynamic-block-h, $dynamic-block-s, 12)
+    --block: hsl($color-block-h, $color-block-s, 12)
-    --block-border: hsl($dynamic-block-h, $dynamic-block-s, 24)
+    --block-border: hsl($color-block-h, $color-block-s, 24)
-    --block-hover: hsl($dynamic-block-h, $dynamic-block-s, 9)
+    --block-hover: hsl($color-block-h, $color-block-s, 9)
-    --block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 30)
+    --block-lighten: hsl($color-block-h, $color-block-s, 30)
     set_text_light()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black

source/css/_layout/md.styl

@@ -22,8 +22,8 @@ h1.article-title
 .md-text.content
   position: relative
   margin-bottom: 2rem
-  display: flex
+  // display: flex
-  flex-direction: column
+  // flex-direction: column
   &.indent
     >p:not([class])
       text-indent: 'calc(%s * 2)' % $fs-p

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

@@ -13,13 +13,20 @@ set_text_black()
 
 set_dynamic_color($theme)
   --theme: $theme
-  --theme-bg: hsl(hue($theme), 100, 95)
+  --theme-bg1: hsl(hue($theme), 90, 90)
-  --theme-border: hsl(hue($theme), 90, 50)
+  --theme-bg2: hsl(hue($theme), 80, 95)
+  --theme-border: hsl(hue($theme), 50, 80)
+  --text-p0: hsl(hue($theme), 50, 24)
+  --text-p1: hsl(hue($theme), 40, 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']
   set_dynamic_color($c-red)
@@ -37,30 +44,36 @@ set_dynamic_color($theme)
   set_dynamic_color($c-purple)
 
 .tag-plugin[color='light']
-  --theme-bg: white
+  --theme-bg2: white
 
 .tag-plugin[color='dark']
-  --theme-bg: #333
+  --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-bg: hsl(hue($theme), 30, 20)
+    --theme-bg1: hsl(hue($theme), 80, 20)
-    --theme-border: hsl(hue($theme), 90, 40)
+    --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, 90)
+    --text-p2: hsl(hue($theme), 80, 72)
+  .tag-plugin.tag
+    set_dynamic_color($color-theme)
   .tag-plugin[color='red']
     set_dynamic_color($c-red)
   .tag-plugin[color='orange']
@@ -77,11 +90,11 @@ set_darkmode_tags()
     set_dynamic_color($c-purple)
   .tag-plugin[color='light']
     --theme-border: white
-    --theme-bg: #fff
+    --theme-bg2: #fff
 
   .tag-plugin[color='dark']
     --theme-border: black
-    --theme-bg: #111
+    --theme-bg2: #111
     set_text_white()
 
   .tag-plugin[color='warning'],.tag-plugin[color='light']

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

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

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)

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

@@ -4,7 +4,7 @@
   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

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

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

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
+  display: flex
-.md-text .tag-plugin.quot:not(span)
+  flex-direction: column
-  display: inline-flex
+  
-  align-self: center
+  .content:not(span)
-  border-bottom: none
+    display: flex
-  font-weight: 700
+    align-items: center
-  &:first-child
+    border-bottom: none
-    margin-top: 1.5rem
+    font-weight: 700
-  a.headerlink:before
+    &:first-child
-    content: ''
+      margin-top: 1.5rem
-  padding: 16px 24px 8px 24px
+    a.headerlink:before
-  @media screen and (max-width: $device-mobile)
+      content: ''
-    padding: 16px 20px 8px
+    padding: 16px 24px 8px 24px
-  line-height: 1.2
+    @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
+.tag-plugin.quot
-  .quot:not(span)
+  h1
-    color: var(--text-p0)
-  h1.quot
     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)
+.md-text .tag-plugin.quot 
-  &:before,&:after
+  .content[type=text]:not(span)
-    content: ""
+    &:before,&:after
-    position: absolute
+      content: ""
-    width: 8px
+      position: absolute
-    height: 14px
+      width: 8px
-  &:before
+      height: 14px
-    top: 8px
+    &:before
-    left: 0
+      top: 8px
-    border-top: 6px solid $color-accent
+      left: 0
-    border-left: 6px solid $color-accent
+      border-top: 6px solid $color-accent
-  &:after
+      border-left: 6px solid $color-accent
-    right: 0
+    &:after
-    bottom: 0
+      right: 0
-    border-right: 6px solid $color-accent
+      bottom: 0
-    border-bottom: 6px solid $color-accent
+      border-right: 6px solid $color-accent
-.md-text.content h1.quot[type=text]
+      border-bottom: 6px solid $color-accent
-  &:before,&:after
+  h1.content[type=text]
-    width: 12px
+    &:before,&:after
-    height: 20px
+      width: 12px
-    border-width: 8px
+      height: 20px
+      border-width: 8px
 
 // type=icon
-.md-text .tag-plugin.quot[type=icon]:not(span)
+.md-text .tag-plugin.quot .content[type=icon]:not(span)
   .icon
     height: 1.5em
     display: inline-block
@@ -69,7 +73,7 @@
       margin-left: .5rem
 
 // inline quot
-.md-text span.tag-plugin.quot
+.md-text span.tag-plugin.quot .content
   font-weight: 500
   &:before,&:after
     color: $color-accent

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

@@ -0,0 +1,13 @@
+.md-text .tag-plugin.tag
+  padding: 0px 4px
+  border-radius: 4px
+  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)
+  

source/css/_layout/widgets/ghuser.styl

@@ -55,12 +55,10 @@
     border: 0
     a
       margin: 0
-      &:hover 
-        box-shadow: none 
-        background: var(--block)
       &.active 
         box-shadow: none
         position: relative
+        background: none
         &:after
           content: ''
           position: absolute
@@ -70,6 +68,9 @@
           left: 'calc(50% - 0.5 * %s)' % @width
           border-radius: 4px
           background: $color-theme
+      &:hover 
+        box-shadow: none 
+        background: var(--block)
 
   .buttons
     margin: 1rem 0