[opt] style

layout/_partial/sidebar/index.ejs

@@ -86,38 +86,38 @@ function layoutWidgets() {
   return el;
 }
 function layoutFooterDiv() {
-  if (page.layout !== 'wiki' && theme.footer.social) {
+  const { social } = theme.footer
-    var el = '<footer class="footer dis-select">';
+  if (social == null) {
-    el += '<div class="social-wrap">';
+    return ''
-    for (let id of Object.keys(theme.footer.social)) {
-      let item = theme.footer.social[id];
-      if (item.icon && (item.url || item.onclick)) {
-        el += '<a class="social"';
-        if (item.title) {
-          el += ' title="' + item.title + '"';
-        }
-        if (item.url) {
-          el += ' href="' + url_for(item.url) + '"';
-          if (item.url.includes('://')) {
-            el += ' target="_blank" rel="external nofollow noopener noreferrer"';
-          } else {
-            el += ' rel="noopener noreferrer"';
-          }
-        } else if (item.onclick) {
-          item.onclick = item.onclick.replace(/"|\'/g, '&quot;');
-          el += ' onclick="' + item.onclick + '"';
-        }
-        el += '>';
-        el += item.icon;
-        el += '</a>';
-      }
-    }
-    el += '</div>';
-    el += '</footer>';
-    return el;
-  } else {
-    return '';
   }
+  var el = '<footer class="footer dis-select">';
+  el += '<div class="social-wrap">';
+  for (let id of Object.keys(social)) {
+    let item = social[id];
+    if (item.icon && (item.url || item.onclick)) {
+      el += '<a class="social"';
+      if (item.title) {
+        el += ' title="' + item.title + '"';
+      }
+      if (item.url) {
+        el += ' href="' + url_for(item.url) + '"';
+        if (item.url.includes('://')) {
+          el += ' target="_blank" rel="external nofollow noopener noreferrer"';
+        } else {
+          el += ' rel="noopener noreferrer"';
+        }
+      } else if (item.onclick) {
+        item.onclick = item.onclick.replace(/"|\'/g, '&quot;');
+        el += ' onclick="' + item.onclick + '"';
+      }
+      el += '>';
+      el += item.icon;
+      el += '</a>';
+    }
+  }
+  el += '</div>';
+  el += '</footer>';
+  return el;
 }
 
 function layoutLogo() {

layout/_partial/sidebar/menu.ejs

@@ -7,9 +7,13 @@ function layoutDiv() {
     if (item == undefined || item.length == 0) {
       continue
     }
-    el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" title="${item.title}" href="${url_for(item.url)}">`
+    el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" title="${item.title}" href="${url_for(item.url)}"`
+    if (item.theme?.length > 0) {
+      el += ` style="color:${item.theme}"`
+    }
+    el += `>`
     if (item.icon?.length > 0) {
-      if (item.icon.startsWith('<img')) {
+      if (item.icon.startsWith('<')) {
         el += item.icon
       } else {
         el += `<img no-lazy src="${item.icon}">`

layout/_partial/widgets/ghissues.ejs

@@ -23,7 +23,7 @@ function layoutDiv() {
   }
   el += '<widget class="widget-wrapper timeline">';
     if (item.title) {
-      el += '<div class="widget-header cap dis-select">';
+      el += '<div class="widget-header dis-select">';
       el += '<span class="name">' + item.title + '</span>';
       el += '</div>';
     }

layout/_partial/widgets/markdown.ejs

@@ -4,7 +4,7 @@ function layoutDiv() {
   var el = '';
   el += '<widget class="widget-wrapper markdown">';
   if (item.title?.length > 0) {
-    el += '<div class="widget-header cap dis-select">';
+    el += '<div class="widget-header dis-select">';
     el += '<span class="name">' + item.title + '</span>';
     el += '</div>';
   }

layout/_partial/widgets/recent.ejs

@@ -2,7 +2,7 @@
 function layoutDiv() {
   var el = '<widget class="widget-wrapper post-list">';
   // header
-  el += '<div class="widget-header cap dis-select">';
+  el += '<div class="widget-header dis-select">';
   el += '<span class="name">' + __("meta.recent_update") + '</span>';
   if (item.rss) {
     el += '<a class="cap-action" id="rss" title="Subscribe" href="' + item.rss + '">';

layout/_partial/widgets/related.ejs

@@ -9,7 +9,7 @@ function relatedPostsInTopic() {
   }
   var el = ''
   el += `<widget class="widget-wrapper post-list">`
-  el += `<div class="widget-header cap dis-select">`
+  el += `<div class="widget-header dis-select">`
   el += `<span class="name">${__('btn.topic') + __('symbol.colon') + topic.name}</span>`
   el += `</div>`
   el += `<div class="widget-body">`
@@ -35,7 +35,7 @@ function relatedWiki() {
   var el = ''
   for (let relatedItem of relatedItems) {
     el += `<widget class="widget-wrapper post-card">`
-    el += `<div class="widget-header cap dis-select">`
+    el += `<div class="widget-header dis-select">`
     el += `<span class="name">${__('meta.more') + __('symbol.colon') + relatedItem.name}</span>`
     el += `</div>`
     el += `<div class="widget-body">`

layout/_partial/widgets/tagcloud.ejs

@@ -10,7 +10,7 @@ function layoutDiv() {
   opts.class = 'tag ';
   el += '<widget class="widget-wrapper tagcloud">';
     if (item.title) {
-      el += '<div class="widget-header cap dis-select">';
+      el += '<div class="widget-header dis-select">';
       el += '<span class="name">' + item.title + '</span>';
       el += '</div>';
     }

layout/_partial/widgets/timeline.ejs

@@ -6,7 +6,7 @@ function layoutDiv() {
   }
   el += '<widget class="widget-wrapper timeline">';
     if (item.title) {
-      el += '<div class="widget-header cap dis-select">';
+      el += '<div class="widget-header dis-select">';
       el += '<span class="name">' + item.title + '</span>';
       el += '</div>';
     }

layout/_partial/widgets/toc.ejs

@@ -16,7 +16,7 @@ function layoutTocBody() {
 
 function layoutTocHeader(title) {
   var el = ''
-  el += `<div class="widget-header cap dis-select">`
+  el += `<div class="widget-header dis-select">`
   el += `<span class="name">${title || __("meta.toc")}</span>`
   el += `</div>`
   return el

layout/layout.ejs

@@ -14,7 +14,7 @@ html += `<html lang="${page.lang}">`
     html += `<div class="l_body ${page_type}" id="start" layout="page.layout">`
       html += `<aside class="l_left">`
         html += `<img no-lazy class="sidebar-bg" src="${theme.default.sidebar}">`
-        html += `<div class="sidebar-container blur">`
+        html += `<div class="sidebar-container">`
           html += partial('_partial/sidebar/index')
         html += `</div>`
       html += `</aside>`

scripts/helpers/category_color.js

@@ -16,7 +16,7 @@ hexo.extend.helper.register('category_color', function(cat){
     } else if (textColor.length == (1+6)) { // #ffffff
       bgColor += '20'
     }
-    return ` style="--text-p3:${textColor};--theme-block:${bgColor}"`;
+    return ` style="--text-p2:${textColor};--theme-block:${bgColor}"`;
   }
   return ''
 })

source/css/_defines/theme.styl

@@ -37,8 +37,9 @@ set_text_light()
   --card: hsl($color-block-h, $color-block-s, 100)
   --alpha20: rgba(white, 0.2)
   --alpha50: rgba(white, 0.5)
-  --alpha75: rgba(white, 0.75)
+  --alpha60: rgba(white, 0.6)
   --alpha100: white
+  --sidebar-bg: rgba(white, 0.5)
   --block: hsl($color-block-h, $color-block-s, 95)
   --block-border: hsl($color-block-h, $color-block-s, 90)
   --block-hover: hsl($color-block-h, $color-block-s, 92)
@@ -54,8 +55,9 @@ set_darkmode()
     --block-hover: hsl($color-block-h, $color-block-s, 20)
     --alpha20: rgba(black, 0.2)
     --alpha50: rgba(black, 0.5)
-    --alpha75: rgba(black, 0.75)
+    --alpha60: rgba(black, 0.6)
     --alpha100: black
+    --sidebar-bg: rgba(black, 0.64)
     set_text_light()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black

source/css/_layout/sidebar/footer.styl

@@ -5,7 +5,7 @@
   display: grid
   grid-gap: 0.25rem 0.25rem
   grid-template-columns: repeat(auto-fill, 32px)
-  a.social
+  .social
     line-height: 0
     display: inline-block
     padding: 6px
@@ -18,22 +18,3 @@
       z-index: 1
       filter: unset
       background: var(--alpha100)
-
-.proj-wrap
-  display: grid
-  grid-gap: 0.25rem 0.25rem
-  a.item
-    border-radius: 4px
-    font-size: $fs-13
-    font-weight: 500
-    color: var(--text-p2)
-    background: var(--block)
-    border: 1px solid var(--block-border)
-    overflow: hidden
-    padding: .75em
-    text-align: center
-    svg
-      margin-right: .5em
-    &:hover
-      color: $color-hover
-      background: var(--card)

source/css/_layout/sidebar/menu.styl

@@ -21,20 +21,16 @@
     color: var(--text-p3)
     text-align: center
     background: var(--alpha50)
-    @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
-      backdrop-filter: saturate(200%) blur(var(--blur-px))
-      -webkit-backdrop-filter: saturate(200%) blur(var(--blur-px))
     trans1 background
     position: relative
     display: flex
     flex-direction: column
     align-items: center
     justify-content: center
-    img
+    img,svg
-      height: 32px
+      height: 28px
       object-fit: contain
-      opacity 0.5
+      filter: grayscale(100%) brightness(0.8) opacity(0.8)
-      filter: grayscale(100%) brightness(0.4)
       trans1 all
     span
       text-overflow: ellipsis
@@ -42,8 +38,7 @@
     &.active, &:hover
       color: var(--text-p1)
       background: var(--alpha100)
-      img
+      img,svg
-        opacity: 1
         filter: unset
     &.active:after
       content: ''

source/css/_layout/sidebar/search.styl

@@ -35,7 +35,10 @@
     path[p-id="1562"]
       color: $color-theme
     
-  
+  &[searching='true']
+    .search-icon
+      path[p-id="1562"]
+        color: $c-green
   &.noresult[searching='true']
     .search-icon
       path[p-id="1562"]

source/css/_layout/sidebar/sidebar.styl

@@ -19,23 +19,13 @@
     background: var(--text-meta)
   .sidebar-container
     height: 100%
-    --blur-px: 50px
+    --blur-px: 100px
+    --blur-bg: var(--sidebar-bg)
+    @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
+      background: var(--blur-bg)
+      backdrop-filter: saturate(240%) blur(var(--blur-px))
+      -webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))
     display: flex
     flex-direction: column
     word-break: break-all
     text-align: justify
-
-.l_left .widgets .widget-wrapper.logo-wrap.wiki .widget-body
-  display: flex
-  margin-bottom: 1.5rem
-  flex-direction: column
-  align-items: flex-start
-  a.wiki-home
-    margin-bottom: 0.5rem
-    color: var(--text-p1)
-    svg
-      margin-right: 2px
-    &:hover
-      color: $color-hover
-      filter: unset !important
-

source/css/_layout/widgets/related.styl

@@ -6,7 +6,7 @@
     margin-top: 8px
   .item
     line-height: 1.2
-    background: var(--alpha50)
+    background: var(--alpha20)
     padding: 10px 16px
     border-radius: $border-card
     display: block
@@ -34,6 +34,6 @@
   .item
     trans1 background
   .item.active
-    background: var(--card)
+    background: var(--alpha50)
   .item:hover
-    background: var(--card)
+    background: var(--alpha50)

source/css/_layout/widgets/timeline.styl

@@ -24,7 +24,7 @@
       a
         trans1 all
         border-bottom: 1px solid var(--text-p0)
-        color: var(--text-p0)
+        color: var(--text-p1)
         &:hover
           color: $color-hover
           border-bottom: 1px solid $color-hover

source/css/_layout/widgets/toc_wiki.styl

@@ -1,6 +1,13 @@
 .doc-tree+.doc-tree
   margin-top: 2px
 
+.widget-wrapper.toc.multi
+  // .widget-header.cap
+  //   color: $color-theme
+  //   filter: brightness(75%)
+  .widget-body+.widget-header.cap
+    margin-top: 28px
+
 // 其它分页链接
 .widget-wrapper.toc.multi .doc-tree
   border-radius: $border-card
@@ -12,7 +19,6 @@
     justify-content: space-between
     align-items: center
     font-size: $fs-14
-    font-weight: 500
     position: relative
     trans1 background
     .toc-text

source/css/_layout/widgets/widgets.styl

@@ -1,6 +1,7 @@
 .widgets 
   .loading-wrap
     margin: 0.5rem 0
+    background: var(--alpha50)
 
 .widgets
   overflow: scroll
@@ -17,12 +18,15 @@
       display: flex
       justify-content: space-between
       align-items: center
-      font-weight: 500
       line-height: 28px
+      font-weight: 500
+      font-size: $fs-12
+      color: var(--text-p1)
       .item 
         display: block
       >span
         text-align: left
+        opacity 0.6
       &:empty
         display: none
       .cap-action
@@ -31,7 +35,7 @@
         trans2: color background
         border-radius: 4px
         padding: 6px
-        margin-right: -4px
+        margin-right: -5px
         .icon
           fill: var(--text-p2)
         &:hover