diff --git a/_config.yml b/_config.yml
index 5e8d09bb..f37d9371 100755
--- a/_config.yml
+++ b/_config.yml
@@ -282,6 +282,9 @@ footer:
   start_time: 2022/8/17 11:45:14 # the starting time of your website, format: yyyy/mm/dd hh:mm:ss
   customize:  # customize footer message, can be html code
   icp: # ICP record number of your website, Can be null
+    enable: false
+    number: # ICP record number
+    url: # ICP record url
 
 # ---------------------------------------------------------------------------------------
 # Custom html code
@@ -300,4 +303,4 @@ inject:
 # Please go to github to update the latest version frequently
 # Github: https://github.com/EvanNotFound/hexo-theme-redefine
 # ---------------------------------------------------------------------------------------
-version: 1.1.2
\ No newline at end of file
+version: 1.1.3
\ No newline at end of file
diff --git a/layout/_partials/comments/waline.ejs b/layout/_partials/comments/waline.ejs
index ec92745f..c7f51c79 100644
--- a/layout/_partials/comments/waline.ejs
+++ b/layout/_partials/comments/waline.ejs
@@ -5,11 +5,11 @@
 ) { %>
  
     <div id="waline"></div>
-    <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %> 
-        src="//evan.beee.top/js/waline.js"></script>
-    <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
+    <script type="module"  <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
+        import { init } from 'https://evan.beee.top/js/waline.mjs';
+
         function loadWaline() {
-            Waline.init({
+            init({
                 el: '#waline',
                 serverURL: '<%= theme.comment.waline.serverUrl %>',
                 lang: '<%= theme.comment.waline.lang %>',
diff --git a/layout/_partials/footer.ejs b/layout/_partials/footer.ejs
index 0b2c30bb..f6785f8a 100755
--- a/layout/_partials/footer.ejs
+++ b/layout/_partials/footer.ejs
@@ -28,8 +28,14 @@
                 <br> 
             <%# 保留主题信息是对作者的尊重，感谢！ %><span class="theme-version-container"><%- __('theme') %>&nbsp;<a class="theme-version" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v<%= theme.version %></a><%# 保留主题信息是对作者的尊重，感谢！ %>
         </div>
-        <% if (theme.footer.hasOwnProperty('icp') && theme.footer.icp) { %>
-            <div class="icp-info info-item"><a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn"><%= theme.footer.icp %></a></div>
+        <% if (theme.footer.icp.enable && theme.footer.icp.hasOwnProperty('number')) { %>
+            <div class="icp-info info-item"><a target="_blank" rel="nofollow" href="
+                <% if (theme.footer.icp.hasOwnProperty('url') && theme.footer.icp.url) { %>
+                    <%= theme.footer.icp.url %>
+                <% } else { %>
+                https://beian.miit.gov.cn
+                <% } %>
+                "><%= theme.footer.icp.number %></a></div>
         <% } %>
         <% if (theme.footer.hasOwnProperty('upyun') && theme.footer.upyun) { %>
             <div class="icp-info info-item"><a target="_blank" rel="nofollow" href="<%= theme.footer.upyun %>">本网站由
diff --git a/package.json b/package.json
index 8d23d03f..1b9f43d5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-redefine",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": false,
   "description": "Redefine your writing with modern style and various functionality in 'Redefine' Hexo Theme.",
   "scripts": {
diff --git a/scripts/modules/folding.js b/scripts/modules/folding.js
index 1cab468d..c64d4167 100755
--- a/scripts/modules/folding.js
+++ b/scripts/modules/folding.js
@@ -23,13 +23,13 @@ function postFolding(args, content) {
     title = args[0].trim();
   }
   if (style != undefined) {
-    return `<details class="${style}"><summary> ${title} </summary>
+    return `<details class="${style}"><summary><i class="fa-solid fa-chevron-right"></i>&nbsp&nbsp&nbsp&nbsp${title} </summary>
               <div class='content'>
               ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
               </div>
             </details>`;
   }
-  return `<details><summary> ${title} </summary>
+  return `<details><summary><i class="fa-solid fa-chevron-right"></i>&nbsp&nbsp&nbsp${title} </summary>
               <div class='content'>
               ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
               </div>
diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl
index c8da28b9..660dcf91 100755
--- a/source/css/common/basic.styl
+++ b/source/css/common/basic.styl
@@ -2,6 +2,18 @@
 @require 'animated.styl'
 @require 'redefine-theme.styl'
 
+redefine-tablet() {
+  @media (max-width $media-max-width){
+    {block}
+  }
+}
+
+redefine-mobile() {
+  @media (max-width $media-max-width-mobile){
+    {block}
+  }
+}  
+
 // ======================================================================
 // all
 // ======================================================================
diff --git a/source/css/common/codeblock/code-block.styl b/source/css/common/codeblock/code-block.styl
index 5a3d4cbb..95a21a58 100755
--- a/source/css/common/codeblock/code-block.styl
+++ b/source/css/common/codeblock/code-block.styl
@@ -68,7 +68,7 @@ if (hexo-config('code_block.style') == 'mac') {
     background var(--third-background-color)
     border-radius $redefine-border-radius-large
     box-shadow var(--redefine-box-shadow-flat) 
-    padding-top 20px
+    padding-top 40px
     margin-top 10px
     position relative
 
diff --git a/source/css/common/codeblock/highlight.styl b/source/css/common/codeblock/highlight.styl
index e9cefb73..c9433e5a 100755
--- a/source/css/common/codeblock/highlight.styl
+++ b/source/css/common/codeblock/highlight.styl
@@ -32,6 +32,7 @@ code {
 pre {
   @extend $code-block
   padding 10px
+  tab-size 4
 
   code {
     padding 0
@@ -46,6 +47,7 @@ pre {
   border-radius $redefine-border-radius-large-bottom
   padding-bottom 5px
   overflow: auto
+  margin 0 !important
   if (hexo-config('code_block.style') == 'mac') {
     border-top 1px solid var(--shadow-color-1)
   }
diff --git a/source/css/common/redefine-theme.styl b/source/css/common/redefine-theme.styl
index 852dd09c..94f9cece 100755
--- a/source/css/common/redefine-theme.styl
+++ b/source/css/common/redefine-theme.styl
@@ -1,3 +1,15 @@
+redefine-tablet() {
+  @media (max-width $media-max-width){
+    {block}
+  }
+}
+
+redefine-mobile() {
+  @media (max-width $media-max-width-mobile){
+    {block}
+  }
+}
+
 hover-style(isTransform, scaleX, scaleY) {
   box-shadow var(--redefine-box-shadow)
 
diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index d8a6ddd2..b2691127 100755
--- a/source/css/common/variables.styl
+++ b/source/css/common/variables.styl
@@ -27,14 +27,17 @@ $has-toc-content-max-width = $content-max-width * 1.2
 $media-max-width = 780px;                                 // media query max width (tablet)
 $media-max-width-mobile = 500px;                          // media query max width (mobile)
 
-redefine-tablet()
-  @media (max-width $media-max-width)
-    { block }
-
-redefine-mobile()
-  @media (max-width $media-max-width-mobile)
-    { block }
+redefine-tablet() {
+  @media (max-width $media-max-width){
+    {block}
+  }
+}
 
+redefine-mobile() {
+  @media (max-width $media-max-width-mobile){
+    {block}
+  }
+}
 
 // ========================================================================================
 // z-index
diff --git a/source/css/layout/_modules/buttons.styl b/source/css/layout/_modules/buttons.styl
index 66af369a..46cd7c81 100644
--- a/source/css/layout/_modules/buttons.styl
+++ b/source/css/layout/_modules/buttons.styl
@@ -23,7 +23,8 @@ a.button:hover {
 
 a.button:active {
   box-shadow none
-  transform translateY(0)
+  transform translateY(3px)
+  transition transform 0.1s ease
 }
 
 a.center {
diff --git a/source/css/layout/_modules/folding.styl b/source/css/layout/_modules/folding.styl
index 7714b72e..b7055797 100644
--- a/source/css/layout/_modules/folding.styl
+++ b/source/css/layout/_modules/folding.styl
@@ -1,15 +1,42 @@
+details {
+    margin-bottom 1rem
+
+    &> summary {
+        list-style: none;
+    }
+    &> summary::-webkit-details-marker {
+        display: none;
+    }
+    &> summary::marker {
+        display: none;
+    }
+}
+
+details[open] > summary {
+    i.fa-chevron-right {
+        transform rotate(90deg)
+        transition transform 0.2s ease
+    }
+}
+
 summary {
     &:marker {
         margin-right 100px
     }
 
+
+    i.fa-chevron-right {
+        transform rotate(0deg)
+        transition transform 0.2s ease
+    }
+
+
     box-shadow var(--redefine-box-shadow-flat) 
     border-radius $redefine-border-radius-small
     padding 15px
     font-size 1.2rem
     background-color var(--background-color)
     line-height 2rem
-    margin-bottom 1rem
 
     cursor pointer
 
@@ -24,18 +51,22 @@ summary {
 }
 
 details div.content {
-    padding-left 30px
+    border-radius $redefine-border-radius-small
+    border solid 1px var(--shadow-color-1)
+    padding 1rem
     margin-bottom 1rem
+    background-color var(--second-background-color)
+    animation: fade 0.2s ease forwards;
 }
 
 
 ::marker {
-    padding-left 100px
+    //padding-left 100px
 }
 
 details.yellow {
     summary {
-        border-left solid 4px #FFA930
+        //border-left solid 4px #FFA930
 
         &:hover {
             background-color #FFA93030
@@ -45,7 +76,7 @@ details.yellow {
 
 details.blue {
     summary {
-        border-left solid 4px #00A6FF
+        //border-left solid 4px #00A6FF
 
         &:hover {
             background-color #00A6FF30
@@ -55,7 +86,7 @@ details.blue {
 
 details.green {
     summary {
-        border-left solid 4px #00FFA6
+        //border-left solid 4px #00FFA6
 
         &:hover {
             background-color #00FFA630
@@ -65,7 +96,7 @@ details.green {
 
 details.red {
     summary {
-        border-left solid 4px #FF0000
+        //border-left solid 4px #FF0000
 
         &:hover {
             background-color #FF000030
@@ -75,7 +106,7 @@ details.red {
 
 details.orange {
     summary {
-        border-left solid 4px #FFA930
+        //border-left solid 4px #FFA930
 
         &:hover {
             background-color #FFA93030
@@ -85,7 +116,7 @@ details.orange {
 
 details.pink {
     summary {
-        border-left solid 4px #FF00FF
+        //border-left solid 4px #FF00FF
 
         &:hover {
             background-color #FF00FF30
@@ -95,7 +126,7 @@ details.pink {
 
 details.cyan {
     summary {
-        border-left solid 4px #00FFFF
+       // border-left solid 4px #00FFFF
 
         &:hover {
             background-color #00FFFF30
@@ -105,7 +136,7 @@ details.cyan {
 
 details.white {
     summary {
-        border-left solid 4px #FFFFFF
+        //border-left solid 4px #FFFFFF
 
         &:hover {
             background-color #FFFFFF30
@@ -115,7 +146,7 @@ details.white {
 
 details.black {
     summary {
-        border-left solid 4px #000000
+        //border-left solid 4px #000000
 
         &:hover {
             background-color #00000030
@@ -125,7 +156,7 @@ details.black {
 
 details.gray {
     summary {
-        border-left solid 4px #A6A6A6
+        //border-left solid 4px #A6A6A6
 
         &:hover {
             background-color #A6A6A630
@@ -135,7 +166,7 @@ details.gray {
 
 details.purple {
     summary {
-        border-left solid 4px #A763FF
+        //border-left solid 4px #A763FF
 
         &:hover {
             background-color #A763FF30
@@ -145,7 +176,7 @@ details.purple {
 
 details {
     summary {
-        border-left solid 4px #A6A6A6
+        //border-left solid 4px #A6A6A6
 
         &:hover {
             background-color #A6A6A630
@@ -153,4 +184,16 @@ details {
     }
 }
 
+@keyframes fade {
+  from {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+  }
+  to { 
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+}
 
diff --git a/source/css/layout/_modules/tabs.styl b/source/css/layout/_modules/tabs.styl
index 95eaab9f..585b68d0 100755
--- a/source/css/layout/_modules/tabs.styl
+++ b/source/css/layout/_modules/tabs.styl
@@ -71,10 +71,22 @@ div.tabs {
         color: var(--primary-color)
         background-color var(--second-background-color)
         box-shadow var(--redefine-box-shadow-flat)
+        transform translateY(-1px)
+        transition transform 0.1s ease
       }
     }
   }
   .tab-content {
+    .highlight-container[data-rel] {
+      border-radius $redefine-border-radius-small
+    }
+    .highlight {
+      border-radius $redefine-border-radius-small-bottom
+    }
+    blockquote{
+      border-radius 0 $redefine-border-radius-small $redefine-border-radius-small 0
+    }
+
     border-top 1px solid var(--shadow-color-1)
     background-color var(--second-background-color)
     border-radius: 0 0 $redefine-border-radius-medium $redefine-border-radius-medium
diff --git a/source/css/layout/_partials/archive-list.styl b/source/css/layout/_partials/archive-list.styl
index 99698fbc..883d4e3f 100755
--- a/source/css/layout/_partials/archive-list.styl
+++ b/source/css/layout/_partials/archive-list.styl
@@ -3,6 +3,8 @@ $archive-year-count-font-size = 1.2rem
 $article-title-font-size = 1.2rem
 $article-date-font-size = 1rem
 
+@import "../../common/variables"
+
 .archive-list-container {
 
   .archive-item {
diff --git a/source/css/layout/_partials/article-meta-info.styl b/source/css/layout/_partials/article-meta-info.styl
index ce6322e6..e2be2812 100755
--- a/source/css/layout/_partials/article-meta-info.styl
+++ b/source/css/layout/_partials/article-meta-info.styl
@@ -1,3 +1,5 @@
+@import "../../common/variables"
+
 .article-meta-info {
   font-size 0.8rem
   color var(--third-text-color)
diff --git a/source/css/layout/_partials/comments/waline.styl b/source/css/layout/_partials/comments/waline.styl
index b46557e2..1a8114dd 100644
--- a/source/css/layout/_partials/comments/waline.styl
+++ b/source/css/layout/_partials/comments/waline.styl
@@ -23,924 +23,1095 @@
   --waline-info-font-size: 0.625em;
   --waline-border none
   --waline-avatar-radius: 28%;
-  --redefine-box-shadow var(--redefine-box-shadow-flat)
-}
-[data-waline] {
-  font-size: var(--waline-font-size);
-  text-align: left;
-}
-[data-waline] * {
-  box-sizing: content-box;
-  line-height: 1.75;
-}
-[data-waline] p {
-  color: var(--waline-color);
-}
-[data-waline] a {
-  position: relative;
-  display: inline-block;
-  color: var(--waline-theme-color);
-  text-decoration: none;
-  word-break: break-word;
-  cursor: pointer;
-}
-[data-waline] a:hover {
-  color: var(--waline-active-color);
-}
-[data-waline] img {
-  max-width: 100%;
-  max-height: 400px;
-  border: none;
-}
-[data-waline] hr {
-  margin: 0.825em 0;
-  border-style: dashed;
-  border-color: var(--waline-bgcolor-light);
-}
-[data-waline] code,
-[data-waline] pre {
-  margin: 0;
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  background: var(--waline-bgcolor-light);
-  font-size: 85%;
-}
-[data-waline] pre {
-  overflow: auto;
-  padding: 10px;
-  line-height: 1.45;
-}
-[data-waline] pre::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-[data-waline] pre::-webkit-scrollbar-track-piece:horizontal {
-  -webkit-border-radius 14px
-  border-radius 14px
-  background: rgba(0,0,0,0.1);
-}
-[data-waline] pre::-webkit-scrollbar-thumb:horizontal {
-  width: 6px;
-  -webkit-border-radius 14px
-  border-radius 14px
-  background: var(--waline-theme-color);
-}
-[data-waline] pre code {
-  padding: 0;
-  background: rgba(0,0,0,0);
-  color: var(--waline-color);
-  white-space: pre-wrap;
-  word-break: keep-all;
-}
-[data-waline] blockquote {
-  margin: 0.5em 0;
-  padding: 0.5em 0 0.5em 1em;
-  border-left: 8px solid var(--waline-bq-color);
-  color: var(--waline-dark-grey);
-}
-[data-waline] blockquote>p {
-  margin: 0;
+  //--redefine-box-shadow var(--redefine-box-shadow-flat) !important
+}
+[data-waline]{
+    font-size:var(--waline-font-size);
+    text-align:start
+}
+[dir=rtl] [data-waline]{
+    direction:rtl
+}
+[data-waline] *{
+    box-sizing:content-box;
+    line-height:1.75
+}
+[data-waline] p{
+    color:var(--waline-color)
+}
+[data-waline] a{
+    position:relative;
+    display:inline-block;
+    color:var(--waline-theme-color);
+    text-decoration:none;
+    word-break:break-word;
+    cursor:pointer
+}
+[data-waline] a:hover{
+    color:var(--waline-active-color)
+}
+[data-waline] img{
+    max-width:100%;
+    max-height:400px;
+    border:none
+}
+[data-waline] hr{
+    margin:.825em 0;
+    border-style:dashed;
+    border-color:var(--waline-bgcolor-light)
+}
+[data-waline] code,[data-waline] pre{
+    margin:0;
+    padding:.2em .4em;
+    border-radius:3px;
+    background:var(--waline-bgcolor-light);
+    font-size:85%
+}
+[data-waline] pre{
+    overflow:auto;
+    padding:10px;
+    line-height:1.45
+}
+[data-waline] pre::-webkit-scrollbar{
+    width:6px;
+    height:6px
+}
+[data-waline] pre::-webkit-scrollbar-track-piece:horizontal{
+    -webkit-border-radius:6px;
+    border-radius:6px;
+    background:rgba(0,0,0,.1)
+}
+[data-waline] pre::-webkit-scrollbar-thumb:horizontal{
+    width:6px;
+    -webkit-border-radius:6px;
+    border-radius:6px;
+    background:var(--waline-theme-color)
+}
+[data-waline] pre code{
+    padding:0;
+    background:rgba(0,0,0,0);
+    color:var(--waline-color);
+    white-space:pre-wrap;
+    word-break:keep-all
+}
+[data-waline] blockquote{
+    margin:.5em 0;
+    padding:.5em 0 .5em 1em;
+    border-inline-start:8px solid var(--waline-bq-color);
+    color:var(--waline-dark-grey)
+}
+[data-waline] blockquote>p{
+    margin:0
 }
 [data-waline] ol,
-[data-waline] ul {
-  margin-left: 1.25em;
-  padding: 0;
+[data-waline] ul{
+    margin-inline-start:1.25em;
+    padding:0
 }
 [data-waline] input[type=checkbox],
-[data-waline] input[type=radio] {
-  display: inline-block;
-  vertical-align: middle;
-  margin-top: -2px;
-}
-.wl-btn {
-  display: inline-block;
-  vertical-align: middle;
-  min-width: 2.5em;
-  margin-bottom: 0;
-  padding: 0.5em 1em;
-  border: 1px solid var(--waline-border-color);
-  border-radius: $redefine-border-radius-small;
-  background: rgba(0,0,0,0);
-  color: var(--waline-color);
-  font-weight: 400;
-  font-size: 0.75em;
-  line-height: 1.5;
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  transition-duration: 0.4s;
-  touch-action: manipulation;
-}
-.wl-btn:hover,
-.wl-btn:active {
-  border-color: var(--waline-theme-color);
-  color: var(--waline-theme-color);
-}
-.wl-btn:disabled {
-  border-color: var(--waline-border-color);
-  background: var(--waline-disable-bgcolor);
-  color: var(--waline-disable-color);
-  cursor: not-allowed;
-}
-.wl-btn.primary {
-  border-color: var(--waline-theme-color);
-  background: var(--waline-theme-color);
-  color: var(--waline-white);
-}
-.wl-btn.primary:hover,
-.wl-btn.primary:active {
-  border-color: var(--waline-active-color);
-  background: var(--waline-active-color);
-  color: var(--waline-white);
-}
-.wl-btn.primary:disabled {
-  border-color: var(--waline-border-color);
-  background: var(--waline-disable-bgcolor);
-  color: var(--waline-disable-color);
-  cursor: not-allowed;
-}
-.wl-loading {
-  text-align: center;
-}
-.wl-loading svg {
-  margin: 0 auto;
-}
-.wl-comment {
-  position: relative;
-  display: flex;
-  margin-bottom: 0.75em;
-}
-.wl-close {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  padding: 0;
-  border: none;
-  background: rgba(0,0,0,0);
-  line-height: 1;
-  cursor: pointer;
-}
-.wl-login-info {
-  max-width: 80px;
-  margin-top: 0.75em;
-  text-align: center;
-}
-.wl-logout-btn {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  padding: 3px;
-  border: none;
-  background: rgba(0,0,0,0);
-  line-height: 0;
-  cursor: pointer;
-}
-.wl-avatar {
-  position: relative;
-  width: var(--waline-avatar-size);
-  height: var(--waline-avatar-size);
-  margin: 0 auto;
-  border: var(--waline-border);
-  border-radius: var(--waline-avatar-radius);
-}
-@media (max-width: 720px) {
-  .wl-avatar {
-    width: var(--waline-m-avatar-size);
-    height: var(--waline-m-avatar-size);
-  }
-}
-.wl-avatar img {
-  width: 100%;
-  height: 100%;
-  border-radius: var(--waline-avatar-radius);
-}
-.wl-login-nick {
-  display: block;
-  color: var(--waline-theme-color);
-  font-size: 0.75em;
-  word-break: break-all;
-}
-.wl-panel {
-  position: relative;
-  flex-shrink: 1;
-  width: 100%;
-  margin: 0.5em;
-  border: var(--waline-border);
-  border-radius: 14px;
-  background: var(--waline-bgcolor);
-  box-shadow: var(--redefine-box-shadow-flat);
+[data-waline] input[type=radio]{
+    display:inline-block;
+    vertical-align:middle;
+    margin-top:-2px
+}
+.wl-btn{
+    display:inline-block;
+    vertical-align:middle;
+    min-width:2.5em;
+    margin-bottom:0;
+    padding:.5em 1em;
+    border:1px solid var(--waline-border-color);
+    border-radius:.5em;
+    background:rgba(0,0,0,0);
+    color:var(--waline-color);
+    font-weight:400;
+    font-size:.75em;
+    line-height:1.5;
+    text-align:center;
+    white-space:nowrap;
+    cursor:pointer;
+    user-select:none;
+    transition-duration:.4s;
+    touch-action:manipulation
+}
+.wl-btn:hover,.wl-btn:active{
+    border-color:var(--waline-theme-color);
+    color:var(--waline-theme-color)
+}
+.wl-btn:disabled{
+    border-color:var(--waline-border-color);
+    background:var(--waline-disable-bgcolor);
+    color:var(--waline-disable-color);
+    cursor:not-allowed
+}
+.wl-btn.primary{
+    border-color:var(--waline-theme-color);
+    background:var(--waline-theme-color);
+    color:var(--waline-white)
+}
+.wl-btn.primary:hover,.wl-btn.primary:active{
+    border-color:var(--waline-active-color);
+    background:var(--waline-active-color);
+    color:var(--waline-white)
+}
+.wl-btn.primary:disabled{
+    border-color:var(--waline-border-color);
+    background:var(--waline-disable-bgcolor);
+    color:var(--waline-disable-color);
+    cursor:not-allowed
+}
+.wl-loading{
+    text-align:center
+}
+.wl-loading svg{
+    margin:0 auto
+}
+.wl-comment{
+    position:relative;
+    display:flex;
+    margin-bottom:.75em
+}
+.wl-close{
+    position:absolute;
+    top:-4px;
+    inset-inline-end:-4px;
+    padding:0;
+    border:none;
+    background:rgba(0,0,0,0);
+    line-height:1;
+    cursor:pointer
+}
+.wl-login-info{
+    max-width:80px;
+    margin-top:.75em;
+    text-align:center
+}
+.wl-logout-btn{
+    position:absolute;
+    top:-10px;
+    inset-inline-end:-10px;
+    padding:3px;
+    border:none;
+    background:rgba(0,0,0,0);
+    line-height:0;
+    cursor:pointer
+}
+.wl-avatar{
+    position:relative;
+    width:var(--waline-avatar-size);
+    height:var(--waline-avatar-size);
+    margin:0 auto;
+    border:var(--waline-border);
+    border-radius:var(--waline-avatar-radius)
+}
+@media(max-width: 720px){
+    .wl-avatar{
+        width:var(--waline-m-avatar-size);
+        height:var(--waline-m-avatar-size)
+    }
+}
+.wl-avatar img{
+    width:100%;
+    height:100%;
+    border-radius:var(--waline-avatar-radius)
+}
+.wl-login-nick{
+    display:block;
+    color:var(--waline-theme-color);
+    font-size:.75em;
+    word-break:break-all
+}
+.wl-panel{
+    position:relative;
+    flex-shrink:1;
+    width:100%;
+    margin:.5em;
+    border:var(--waline-border);
+    border-radius:.75em;
+    background:var(--waline-bgcolor);
+    box-shadow:var(--redefine-box-shadow-flat)
 
-  &:hover {
-    box-shadow: var(--redefine-box-shadow-flat-hover);
-  }
-}
-.wl-header {
-  display: flex;
-  overflow: hidden;
-  padding: 0 4px;
-  border-bottom: 2px dashed var(--waline-border-color);
-  border-top-left-radius: 0.75em;
-  border-top-right-radius: 0.75em;
-}
-@media (max-width: 580px) {
-  .wl-header {
-    display: block;
-  }
-}
-.wl-header label {
-  min-width: 40px;
-  padding: 0.75em 0.5em;
-  color: var(--waline-color);
-  font-size: 0.75em;
-  text-align: center;
-}
-.wl-header input {
-  flex: 1;
-  width: 0;
-  padding: 0.5em;
-  background: rgba(0,0,0,0);
-  font-size: 0.625em;
-  resize: none;
-}
-.wl-header-item {
-  display: flex;
-  flex: 1;
-}
-@media (max-width: 580px) {
-  .wl-header-item:not(:last-child) {
-    border-bottom: 2px dashed var(--waline-border-color);
-  }
-}
-.wl-header-1 .wl-header-item {
-  width: 100%;
-}
-.wl-header-2 .wl-header-item {
-  width: 50%;
-}
-@media (max-width: 580px) {
-  .wl-header-2 .wl-header-item {
-    flex: 0;
-    width: 100%;
-  }
-}
-.wl-header-3 .wl-header-item {
-  width: 33.33%;
-}
-@media (max-width: 580px) {
-  .wl-header-3 .wl-header-item {
-    width: 100%;
-  }
-}
-.wl-editor,
-.wl-input {
-  max-width: 100%;
-  border: none;
-  color: var(--waline-color);
-  outline: none;
-  transition: all 0.25s ease;
-}
-.wl-editor:focus,
-.wl-input:focus {
-  background: var(--waline-bgcolor-light);
-}
-.wl-editor {
-  position: relative;
-  width: calc(100% - 1em);
-  min-height: 8.75em;
-  margin: 0.75em 0.5em;
-  border-radius: 0.5em;
-  background: rgba(0,0,0,0);
-  font-size: 0.875em;
-  resize: vertical;
-}
-.wl-preview {
-  padding: 0 0.5em 0.5em;
-}
-.wl-preview h4 {
-  margin: 0.25em;
-  font-weight: bold;
-  font-size: 0.9375em;
-}
-.wl-preview .wl-content {
-  min-height: 1.25em;
-  padding: 0.25em;
-  word-break: break-word;
-  hyphens: auto;
-}
-.wl-preview .wl-content>*:first-child {
-  margin-top: 0;
-}
-.wl-preview .wl-content>*:last-child {
-  margin-bottom: 0;
-}
-.wl-footer {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0.5em 0.75em;
-}
-.wl-actions {
-  display: flex;
-  flex: 2;
-  align-items: center;
-}
-.wl-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5em;
-  height: 1.5em;
-  margin: 2px;
-  padding: 0;
-  border: none;
-  background: rgba(0,0,0,0);
-  color: var(--waline-color);
-  font-size: 16px;
-  cursor: pointer;
-}
-.wl-action:hover {
-  color: var(--waline-theme-color);
-}
-.wl-action.actived {
-  color: var(--waline-active-color);
-}
-#wl-image-upload {
-  display: none;
-}
-#wl-image-upload:focus+label {
-  color: var(--waline-color);
-}
-#wl-image-upload:focus-visible+label {
-  outline: -webkit-focus-ring-color auto 1px;
-}
-.wl-info {
-  display: flex;
-  flex: 3;
-  align-items: center;
-  justify-content: flex-end;
-}
-.wl-info .wl-text-number {
-  color: var(--waline-info-color);
-  font-size: 0.75em;
-}
-.wl-info .wl-text-number .illegal {
-  color: #f00;
-}
-.wl-info button {
-  margin-left: 0.75em;
-}
-.wl-info button svg {
-  display: block;
-  margin: 0 auto;
-  line-height: 18px;
-}
-.wl-emoji-popup {
-  position: absolute;
-  top: 100%;
-  left: 1.25em;
-  z-index: 10;
-  max-width: 526px;
-  border: var(--waline-border);
-  border-radius 14px
-  background: var(--waline-bgcolor);
-  box-shadow: var(--redefine-box-shadow-flat);
-  opacity: 0;
-  visibility: hidden;
-  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-  transform: scale(0.9, 0.9);
-  transform-origin: 0 0;
-}
-.wl-emoji-popup.display {
-  opacity: 1;
-  visibility: visible;
-  transform: none;
-}
-.wl-emoji-popup button {
-  display: inline-block;
-  vertical-align: middle;
-  width: 2em;
-  margin: 0.125em;
-  padding: 0;
-  border-width: 0;
-  background: rgba(0,0,0,0);
-  font-size: inherit;
-  line-height: 2;
-  text-align: center;
-  cursor: pointer;
-}
-.wl-emoji-popup button:hover {
-  background: var(--waline-bgcolor-hover);
-}
-.wl-emoji-popup .wl-emoji {
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 1.5em;
-  max-height: 1.5em;
-}
-.wl-emoji-popup .wl-tab-wrapper {
-  overflow-y: auto;
-  max-height: 145px;
-  padding: 0.5em;
-}
-.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-track-piece:vertical {
-  -webkit-border-radius 14px
-  border-radius 14px
-  background: rgba(0,0,0,0.1);
-}
-.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb:vertical {
-  width: 6px;
-  -webkit-border-radius 14px
-  border-radius 14px
-  background: var(--waline-theme-color);
-}
-.wl-emoji-popup .wl-tabs {
-  position: relative;
-  overflow-x: scroll;
-  height: 2em;
-  padding: 0 6px 1px;
-  white-space: nowrap;
-}
-.wl-emoji-popup .wl-tabs::before {
-  content: " ";
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 2;
-  height: 1px;
-  background: var(--waline-border-color);
-}
-.wl-emoji-popup .wl-tabs::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.wl-emoji-popup .wl-tabs::-webkit-scrollbar-track-piece:horizontal {
-  -webkit-border-radius 14px
-  border-radius 14px
-  background: rgba(0,0,0,0.1);
-}
-.wl-emoji-popup .wl-tabs::-webkit-scrollbar-thumb:horizontal {
-  height: 6px;
-  -webkit-border-radius 14px
-  border-radius 14px
-  background: var(--waline-theme-color);
-}
-.wl-emoji-popup .wl-tab {
-  position: relative;
-  margin: 0;
-  padding: 0 0.5em;
-}
-.wl-emoji-popup .wl-tab.active {
-  z-index: 3;
-  border: 1px solid var(--waline-border-color);
-  border-top-width: 0;
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
-  background: var(--waline-bgcolor);
-}
-.wl-gif-popup {
-  position: absolute;
-  top: 100%;
-  left: 1.25em;
-  z-index: 10;
-  width: calc(100% - 3em);
-  padding: 0.75em 0.75em 0.25em;
-  border: var(--waline-border);
-  border-radius 14px
-  background: var(--waline-bgcolor);
-  box-shadow: var(--redefine-box-shadow-flat);
-  opacity: 0;
-  visibility: hidden;
-  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-  transform: scale(0.9, 0.9);
-  transform-origin: 0 0;
-}
-.wl-gif-popup.display {
-  opacity: 1;
-  visibility: visible;
-  transform: none;
-}
-.wl-gif-popup input {
-  box-sizing: border-box;
-  width: 100%;
-  margin-bottom: 10px;
-  padding: 3px 5px;
-  border: var(--waline-border);
-}
-.wl-gif-popup img {
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  border-width: 2px;
-  border-style: solid;
-  border-color: #fff;
-  cursor: pointer;
-}
-.wl-gif-popup img:hover {
-  border-color: var(--waline-theme-color);
-  border-radius: 2px;
-}
-.wl-gallery {
-  display: flex;
-  overflow-y: auto;
-  max-height: 80vh;
-}
-.wl-gallery-column {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  height: -webkit-max-content;
-  height: -moz-max-content;
-  height: max-content;
-}
-.wl-cards .wl-item {
-  position: relative;
-  display: flex;
-  padding: 0.5em;
-}
-.wl-cards .wl-item:last-child .wl-card {
-  border-bottom: none;
-}
-.wl-cards .wl-card .wl-item {
-  padding-right: 0;
-}
-.wl-cards .wl-user {
-  --avatar-size: var(--waline-avatar-size);
-  position: relative;
-  margin-right: 0.75em;
-}
-@media (max-width: 720px) {
-  .wl-cards .wl-user {
-    --avatar-size: var(--waline-m-avatar-size);
-  }
-}
-.wl-cards .wl-user img {
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-  border-radius: var(--waline-avatar-radius);
-  box-shadow: var(--redefine-box-shadow);
-}
-.wl-cards .wl-user .verified-icon {
-  position: absolute;
-  top: calc(var(--avatar-size) * 3 / 4);
-  left: calc(var(--avatar-size) * 3 / 4);
-  border-radius: 50%;
-  background: var(--waline-bgcolor);
-  box-shadow: var(--redefine-box-shadow);
-}
-.wl-card {
-  flex: 1;
-  width: 0;
-  padding-bottom: 0.5em;
-  border-bottom: 1px dashed var(--waline-border-color);
-}
-.wl-card:first-child {
-  margin-left: 1em;
-}
-.wl-card .wl-head {
-  line-height: 1.5;
-}
-.wl-card .wl-nick {
-  position: relative;
-  display: inline-block;
-  margin-right: 0.5em;
-  font-weight: bold;
-  font-size: 0.875em;
-  line-height: 1;
-  text-decoration: none;
-}
-.wl-card .wl-nick svg {
-  position: relative;
-  bottom: -0.125em;
-  line-height: 1;
-}
-.wl-card span.wl-nick {
-  color: var(--waline-dark-grey);
+    &:hover {
+      box-shadow: var(--redefine-box-shadow-flat-hover);
+    }
+}
+.wl-header{
+    display:flex;
+    overflow:hidden;
+    padding:0 4px;
+    border-bottom:2px dashed var(--waline-border-color);
+    border-top-left-radius:.75em;
+    border-top-right-radius:.75em
+}
+@media(max-width: 580px){
+    .wl-header{
+        display:block
+    }
+}
+.wl-header label{
+    min-width:40px;
+    padding:.75em .5em;
+    color:var(--waline-color);
+    font-size:.75em;
+    text-align:center
+}
+.wl-header input{
+    flex:1;
+    width:0;
+    padding:.5em;
+    background:rgba(0,0,0,0);
+    font-size:.625em;
+    resize:none
+}
+.wl-header-item{
+    display:flex;
+    flex:1
+}
+@media(max-width: 580px){
+    .wl-header-item:not(:last-child){
+        border-bottom:2px dashed var(--waline-border-color)
+    }
+}
+.wl-header-1 .wl-header-item{
+    width:100%
+}
+.wl-header-2 .wl-header-item{
+    width:50%
+}
+@media(max-width: 580px){
+    .wl-header-2 .wl-header-item{
+        flex:0;
+        width:100%
+    }
+}
+.wl-header-3 .wl-header-item{
+    width:33.33%
+}
+@media(max-width: 580px){
+    .wl-header-3 .wl-header-item{
+        width:100%
+    }
+}
+.wl-editor{
+    position:relative;
+    width:calc(100% - 1em);
+    min-height:8.75em;
+    margin:.75em .5em;
+    border-radius:.5em;
+    background:rgba(0,0,0,0);
+    font-size:.875em;
+    resize:vertical
+}
+.wl-editor,.wl-input{
+    max-width:100%;
+    border:none;
+    color:var(--waline-color);
+    outline:none;
+    transition:all .25s ease
+}
+.wl-editor:focus,.wl-input:focus{
+    background:var(--waline-bgcolor-light)
+}
+.wl-preview{
+    padding:0 .5em .5em
+}
+.wl-preview h4{
+    margin:.25em;
+    font-weight:bold;
+    font-size:.9375em
+}
+.wl-preview .wl-content{
+    min-height:1.25em;
+    padding:.25em;
+    word-break:break-word;
+    hyphens:auto
+}
+.wl-preview .wl-content>*:first-child{
+    margin-top:0
+}
+.wl-preview .wl-content>*:last-child{
+    margin-bottom:0
+}
+.wl-footer{
+    position:relative;
+    display:flex;
+    flex-wrap:wrap;
+    margin:.5em .75em
+}
+.wl-actions{
+    display:flex;
+    flex:2;
+    align-items:center
+}
+.wl-action{
+    display:inline-flex;
+    align-items:center;
+    justify-content:center;
+    width:1.5em;
+    height:1.5em;
+    margin:2px;
+    padding:0;
+    border:none;
+    background:rgba(0,0,0,0);
+    color:var(--waline-color);
+    font-size:16px;
+    cursor:pointer
+}
+.wl-action:hover{
+    color:var(--waline-theme-color)
+}
+.wl-action.active{
+    color:var(--waline-active-color)
+}
+#wl-image-upload{
+    display:none
+}
+#wl-image-upload:focus+label{
+    color:var(--waline-color)
+}
+#wl-image-upload:focus-visible+label{
+    outline:-webkit-focus-ring-color auto 1px
+}
+.wl-info{
+    display:flex;
+    flex:3;
+    align-items:center;
+    justify-content:flex-end
+}
+.wl-info .wl-text-number{
+    color:var(--waline-info-color);
+    font-size:.75em
+}
+.wl-info .wl-text-number .illegal{
+    color:red
+}
+.wl-info button{
+    margin-inline-start:.75em
+}
+.wl-info button svg{
+    display:block;
+    margin:0 auto;
+    line-height:18px
+}
+.wl-emoji-popup{
+    position:absolute;
+    top:100%;
+    inset-inline-start:1.25em;
+    z-index:10;
+    max-width:526px;
+    border:var(--waline-border);
+    border-radius:6px;
+    background:var(--waline-bgcolor);
+    box-shadow:var(--redefine-box-shadow-flat);
+    opacity:0;
+    visibility:hidden;
+    transition:transform .2s ease-out,opacity .2s ease-out;
+    transform:scale(0.9, 0.9);
+    transform-origin:0 0
+}
+.wl-emoji-popup.display{
+    opacity:1;
+    visibility:visible;
+    transform:none
+}
+.wl-emoji-popup button{
+    display:inline-block;
+    vertical-align:middle;
+    width:2em;
+    margin:.125em;
+    padding:0;
+    border-width:0;
+    background:rgba(0,0,0,0);
+    font-size:inherit;
+    line-height:2;
+    text-align:center;
+    cursor:pointer
+}
+.wl-emoji-popup button:hover{
+    background:var(--waline-bgcolor-hover)
+}
+.wl-emoji-popup .wl-emoji{
+    display:inline-block;
+    vertical-align:middle;
+    max-width:1.5em;
+    max-height:1.5em
+}
+.wl-emoji-popup .wl-tab-wrapper{
+    overflow-y:auto;
+    max-height:145px;
+    padding:.5em
+}
+.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar{
+    width:6px;
+    height:6px
+}
+.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-track-piece:vertical{
+    -webkit-border-radius:6px;
+    border-radius:6px;
+    background:rgba(0,0,0,.1)
+}
+.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb:vertical{
+    width:6px;
+    -webkit-border-radius:6px;
+    border-radius:6px;
+    background:var(--waline-theme-color)
+}
+.wl-emoji-popup .wl-tabs{
+    position:relative;
+    overflow-x:auto;
+    padding:0 6px;
+    white-space:nowrap
+}
+.wl-emoji-popup .wl-tabs::before{
+    content:" ";
+    position:absolute;
+    top:0;
+    right:0;
+    left:0;
+    z-index:2;
+    height:1px;
+    background:var(--waline-border-color)
+}
+.wl-emoji-popup .wl-tabs::-webkit-scrollbar{
+    width:6px;
+    height:6px
+}
+.wl-emoji-popup .wl-tabs::-webkit-scrollbar-track-piece:horizontal{
+    -webkit-border-radius:6px;
+    border-radius:6px;
+    background:rgba(0,0,0,.1)
+}
+.wl-emoji-popup .wl-tabs::-webkit-scrollbar-thumb:horizontal{
+    height:6px;
+    -webkit-border-radius:6px;
+    border-radius:6px;
+    background:var(--waline-theme-color)
+}
+.wl-emoji-popup .wl-tab{
+    position:relative;
+    margin:0;
+    padding:0 .5em
+}
+.wl-emoji-popup .wl-tab.active{
+    z-index:3;
+    border:1px solid var(--waline-border-color);
+    border-top-width:0;
+    border-bottom-right-radius:6px;
+    border-bottom-left-radius:6px;
+    background:var(--waline-bgcolor)
+}
+.wl-gif-popup{
+    position:absolute;
+    top:100%;
+    inset-inline-start:1.25em;
+    z-index:10;
+    width:calc(100% - 3em);
+    padding:.75em .75em .25em;
+    border:var(--waline-border);
+    border-radius:6px;
+    background:var(--waline-bgcolor);
+    box-shadow:var(--redefine-box-shadow-flat);
+    opacity:0;
+    visibility:hidden;
+    transition:transform .2s ease-out,opacity .2s ease-out;
+    transform:scale(0.9, 0.9);
+    transform-origin:0 0
+}
+.wl-gif-popup.display{
+    opacity:1;
+    visibility:visible;
+    transform:none
+}
+.wl-gif-popup input{
+    box-sizing:border-box;
+    width:100%;
+    margin-bottom:10px;
+    padding:3px 5px;
+    border:var(--waline-border)
+}
+.wl-gif-popup img{
+    display:block;
+    box-sizing:border-box;
+    width:100%;
+    border-width:2px;
+    border-style:solid;
+    border-color:#fff;
+    cursor:pointer
+}
+.wl-gif-popup img:hover{
+    border-color:var(--waline-theme-color);
+    border-radius:2px
 }
-.wl-card .wl-badge {
-  display: inline-block;
-  margin-right: 1em;
-  padding: 0 0.3em;
-  border: 1px solid var(--waline-badge-color);
-  border-radius: 4px;
-  color: var(--waline-badge-color);
-  font-size: var(--waline-badge-font-size);
-}
-.wl-card .wl-time {
-  margin-right: 0.875em;
-  color: var(--waline-info-color);
-  font-size: 0.75em;
-}
-.wl-card .wl-meta {
-  position: relative;
-  line-height: 1;
-}
-.wl-card .wl-meta>span {
-  display: inline-block;
-  margin-right: 0.25em;
-  padding: 2px 4px;
-  border-radius: 0.2em;
-  background: var(--waline-info-bgcolor);
-  color: var(--waline-info-color);
-  font-size: var(--waline-info-font-size);
-  line-height: 1.5;
-}
-.wl-card .wl-meta>span:empty {
-  display: none;
-}
-.wl-card .wl-comment-actions {
-  float: right;
-}
-.wl-card .wl-delete,
-.wl-card .wl-like,
-.wl-card .wl-reply,
-.wl-card .wl-edit {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px;
-  border: none;
-  background: rgba(0,0,0,0);
-  color: var(--waline-color);
-  line-height: 1;
-  cursor: pointer;
-  transition: color 0.2s ease;
-}
-.wl-card .wl-delete:hover,
-.wl-card .wl-like:hover,
-.wl-card .wl-reply:hover,
-.wl-card .wl-edit:hover {
-  color: var(--waline-theme-color);
-}
-.wl-card .wl-delete.active,
-.wl-card .wl-like.active,
-.wl-card .wl-reply.active,
-.wl-card .wl-edit.active {
-  color: var(--waline-active-color);
-}
-.wl-card .wl-content {
-  position: relative;
-  margin-bottom: 0.75em;
-  padding-top: 0.625em;
-  font-size: 0.875em;
-  line-height: 2;
-  word-wrap: break-word;
-}
-.wl-card .wl-content.expand {
-  overflow: hidden;
-  max-height: 8em;
-  cursor: pointer;
-}
-.wl-card .wl-content.expand::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 3.15em;
-  left: 0;
-  z-index: 999;
-  display: block;
-  width: 100%;
-  background: linear-gradient(180deg, #000, rgba(255,255,255,0.9));
-}
-.wl-card .wl-content.expand::after {
-  content: attr(data-expand);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  z-index: 999;
-  display: block;
-  width: 100%;
-  height: 3.15em;
-  background: rgba(255,255,255,0.9);
-  color: #828586;
-  line-height: 3.15em;
-  text-align: center;
-}
-.wl-card .wl-content>*:first-child {
-  margin-top: 0;
-}
-.wl-card .wl-content>*:last-child {
-  margin-bottom: 0;
-}
-.wl-card .wl-admin-actions {
-  margin: 8px 0;
-  font-size: 12px;
-  text-align: right;
-}
-.wl-card .wl-comment-status {
-  margin: 0 8px;
-}
-.wl-card .wl-comment-status .wl-btn {
-  border-radius: 0;
-}
-.wl-card .wl-comment-status .wl-btn:first-child {
-  border-right: 0;
-  border-radius: $redefine-border-radius-small 0 0 $redefine-border-radius-small;
-}
-.wl-card .wl-comment-status .wl-btn:last-child {
-  border-left: 0;
-  border-radius: 0 $redefine-border-radius-small $redefine-border-radius-small 0;
-}
-.wl-card .wl-quote {
-  border-left: 1px dashed rgba(237,237,237,0.5);
-}
-.wl-card .wl-quote .wl-user {
-  --avatar-size: var(--waline-m-avatar-size);
-}
-.wl-close-icon {
-  color: var(--waline-border-color);
-}
-.wl-content .vemoji,
-.wl-content .wl-emoji {
-  display: inline-block;
-  vertical-align: baseline;
-  height: 1.25em;
-  margin: -0.125em 0.25em;
-}
-.wl-content .wl-tex {
-  background: var(--waline-info-bgcolor);
-  color: var(--waline-info-color);
-}
-.wl-content span.wl-tex {
-  display: inline-block;
-  margin-right: 0.25em;
-  padding: 2px 4px;
-  border-radius: 0.2em;
-  font-size: var(--waline-info-font-size);
-  line-height: 1.5;
-}
-.wl-content p.wl-tex {
-  text-align: center;
-}
-.wl-content .katex-display {
-  overflow: auto hidden;
-  -webkit-overflow-scrolling: touch;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-.wl-content .katex-display::-webkit-scrollbar {
-  height: 3px;
-}
-.wl-content .katex-error {
-  color: #f00;
-}
-.wl-count {
-  flex: 1;
-  font-weight: bold;
-  font-size: 1.25em;
-}
-.wl-empty {
-  overflow: auto;
-  padding: 1.25em;
-  color: var(--waline-color);
-  text-align: center;
-}
-.wl-operation {
-  text-align: center;
-}
-.wl-operation button {
-  margin: 1em 0;
-}
-.wl-power {
-  padding: 0.5em 0;
-  color: var(--waline-light-grey);
-  font-size: var(--waline-info-font-size);
-  text-align: right;
-}
-.wl-meta-head {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0.375em;
-}
-ul.wl-sort {
-  margin: 0;
-  list-style-type: none;
-}
-.wl-sort li {
-  display: inline-block;
-  color: var(--waline-info-color);
-  font-size: 0.75em;
-  cursor: pointer;
-}
-.wl-sort li+li {
-  margin-left: 1em;
-}
-.wl-sort li.active {
-  color: var(--waline-theme-color);
-}
-.wl-content pre,
-.wl-content pre[class*=language-] {
-  overflow: auto;
-  margin: 0.75rem 0;
-  padding: 1rem 1.25rem;
-  border-radius 14px
-  background: var(--waline-code-bgcolor);
-  line-height: 1.4;
-}
-.wl-content pre code,
-.wl-content pre[class*=language-] code {
-  padding: 0;
-  border-radius: 0;
-  background: rgba(0,0,0,0) !important;
-  color: #bbb;
-}
-.wl-content code[class*=language-],
-.wl-content pre[class*=language-] {
-  background: none;
-  color: #ccc;
-  font-size: 1em;
-  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-wrap: normal;
-  word-break: normal;
-  tab-size: 4;
-  hyphens: none;
-}
-.wl-content pre[class*=language-] {
-  overflow: auto;
-}
-.wl-content :not(pre)>code[class*=language-],
-.wl-content pre[class*=language-] {
-  background: #2d2d2d;
-}
-.wl-content :not(pre)>code[class*=language-] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-.wl-content .token.comment,
-.wl-content .token.block-comment,
-.wl-content .token.prolog,
-.wl-content .token.doctype,
-.wl-content .token.cdata {
-  color: #999;
-}
-.wl-content .token.punctuation {
-  color: #ccc;
-}
-.wl-content .token.tag,
-.wl-content .token.attr-name,
-.wl-content .token.namespace,
-.wl-content .token.deleted {
-  color: #e2777a;
-}
-.wl-content .token.function-name {
-  color: #6196cc;
-}
-.wl-content .token.boolean,
-.wl-content .token.number,
-.wl-content .token.function {
-  color: #f08d49;
-}
-.wl-content .token.property,
-.wl-content .token.class-name,
-.wl-content .token.constant,
-.wl-content .token.symbol {
-  color: #f8c555;
-}
-.wl-content .token.selector,
-.wl-content .token.important,
-.wl-content .token.atrule,
-.wl-content .token.keyword,
-.wl-content .token.builtin {
-  color: #cc99cd;
-}
-.wl-content .token.string,
-.wl-content .token.char,
-.wl-content .token.attr-value,
-.wl-content .token.regex,
-.wl-content .token.variable {
-  color: #7ec699;
-}
-.wl-content .token.operator,
-.wl-content .token.entity,
-.wl-content .token.url {
-  color: #67cdcc;
-}
-.wl-content .token.important,
-.wl-content .token.bold {
-  font-weight: bold;
-}
-.wl-content .token.italic {
-  font-style: italic;
-}
-.wl-content .token.entity {
-  cursor: help;
-}
-.wl-content .token.inserted {
-  color: #008000;
-}
-.wl-recent-item p {
-  display: inline;
+
+
+
+.wl-gallery{
+    display:flex;
+    overflow-y:auto;
+    max-height:80vh
+}
+.wl-gallery-column{
+    display:flex;
+    flex:1;
+    flex-direction:column;
+    height:-webkit-max-content;
+    height:-moz-max-content;
+    height:max-content
+}
+.wl-cards .wl-user{
+    --avatar-size: var(--waline-avatar-size);
+    position:relative;
+    margin-inline-end:.75em
+}
+@media(max-width: 720px){
+    .wl-cards .wl-user{
+        --avatar-size: var(--waline-m-avatar-size)
+    }
+}
+.wl-cards .wl-user img{
+    width:var(--avatar-size);
+    height:var(--avatar-size);
+    border-radius:var(--waline-avatar-radius);
+    box-shadow:var(--redefine-box-shadow-flat)
+}
+.wl-cards .wl-user .verified-icon{
+    position:absolute;
+    top:calc(var(--avatar-size)*3/4);
+    inset-inline-start:calc(var(--avatar-size)*3/4);
+    border-radius:50%;
+    background:var(--waline-bgcolor);
+    box-shadow:var(--redefine-box-shadow-flat)
+}
+.wl-card-item{
+    position:relative;
+    display:flex;
+    padding:.5em
+}
+.wl-card-item .wl-card-item{
+    padding-inline-end:0
+}
+.wl-card{
+    flex:1;
+    width:0;
+    padding-bottom:.5em;
+    border-bottom:1px dashed var(--waline-border-color)
+}
+.wl-card:first-child{
+    margin-inline-start:1em
+}
+.wl-card-item:last-child .wl-card{
+    border-bottom:none
+}
+.wl-card .wl-head{
+    overflow:hidden;
+    line-height:1.5
+}
+.wl-card .wl-nick{
+    position:relative;
+    display:inline-block;
+    margin-inline-end:.5em;
+    font-weight:bold;
+    font-size:.875em;
+    line-height:1;
+    text-decoration:none
+}
+.wl-card .wl-nick svg{
+    position:relative;
+    bottom:-0.125em;
+    line-height:1
+}
+.wl-card span.wl-nick{
+    color:var(--waline-dark-grey)
+}
+.wl-card .wl-badge{
+    display:inline-block;
+    margin-inline-end:1em;
+    padding:0 .3em;
+    border:1px solid var(--waline-badge-color);
+    border-radius:4px;
+    color:var(--waline-badge-color);
+    font-size:var(--waline-badge-font-size)
+}
+.wl-card .wl-time{
+    margin-inline-end:.875em;
+    color:var(--waline-info-color);
+    font-size:.75em
+}
+.wl-card .wl-meta{
+    position:relative;
+    line-height:1
+}
+.wl-card .wl-meta>span{
+    display:inline-block;
+    margin-inline-end:.25em;
+    padding:2px 4px;
+    border-radius:.2em;
+    background:var(--waline-info-bgcolor);
+    color:var(--waline-info-color);
+    font-size:var(--waline-info-font-size);
+    line-height:1.5
+}
+.wl-card .wl-meta>span:empty{
+    display:none
+}
+.wl-card .wl-comment-actions{
+    float:right;
+    line-height:1
+}
+[dir=rtl] .wl-card .wl-comment-actions{
+    float:left
+}
+.wl-card .wl-delete,.wl-card .wl-like,.wl-card .wl-reply,.wl-card .wl-edit{
+    display:inline-flex;
+    align-items:center;
+    border:none;
+    background:rgba(0,0,0,0);
+    color:var(--waline-color);
+    line-height:1;
+    cursor:pointer;
+    transition:color .2s ease
+}
+.wl-card .wl-delete:hover,.wl-card .wl-like:hover,.wl-card .wl-reply:hover,.wl-card .wl-edit:hover{
+    color:var(--waline-theme-color)
+}
+.wl-card .wl-delete.active,.wl-card .wl-like.active,.wl-card .wl-reply.active,.wl-card .wl-edit.active{
+    color:var(--waline-active-color)
+}
+.wl-card .wl-content{
+    position:relative;
+    margin-bottom:.75em;
+    padding-top:.625em;
+    font-size:.875em;
+    line-height:2;
+    word-wrap:break-word
+}
+.wl-card .wl-content.expand{
+    overflow:hidden;
+    max-height:8em;
+    cursor:pointer
+}
+.wl-card .wl-content.expand::before{
+    content:"";
+    position:absolute;
+    top:0;
+    bottom:3.15em;
+    inset-inline-start:0;
+    z-index:999;
+    display:block;
+    width:100%;
+    background:linear-gradient(180deg, #000, rgba(255, 255, 255, 0.9))
+}
+.wl-card .wl-content.expand::after{
+    content:attr(data-expand);
+    position:absolute;
+    bottom:0;
+    inset-inline-start:0;
+    z-index:999;
+    display:block;
+    width:100%;
+    height:3.15em;
+    background:rgba(255,255,255,.9);
+    color:#828586;
+    line-height:3.15em;
+    text-align:center
+}
+.wl-card .wl-content>*:first-child{
+    margin-top:0
+}
+.wl-card .wl-content>*:last-child{
+    margin-bottom:0
+}
+.wl-card .wl-admin-actions{
+    margin:8px 0;
+    font-size:12px;
+    text-align:right
+}
+.wl-card .wl-comment-status{
+    margin:0 8px
+}
+.wl-card .wl-comment-status .wl-btn{
+    border-radius:0
+}
+.wl-card .wl-comment-status .wl-btn:first-child{
+    border-inline-end:0;
+    border-radius:.5em 0 0 .5em
+}
+.wl-card .wl-comment-status .wl-btn:last-child{
+    border-inline-start:0;
+    border-radius:0 .5em .5em 0
+}
+.wl-card .wl-quote{
+    border-inline-start:1px dashed rgba(237,237,237,.5)
+}
+.wl-card .wl-quote .wl-user{
+    --avatar-size: var(--waline-m-avatar-size)
+}
+.wl-close-icon{
+    color:var(--waline-border-color)
+}
+.wl-content .vemoji,.wl-content .wl-emoji{
+    display:inline-block;
+    vertical-align:baseline;
+    height:1.25em;
+    margin:-0.125em .25em
+}
+.wl-content .wl-tex{
+    background:var(--waline-info-bgcolor);
+    color:var(--waline-info-color)
+}
+.wl-content span.wl-tex{
+    display:inline-block;
+    margin-inline-end:.25em;
+    padding:2px 4px;
+    border-radius:.2em;
+    font-size:var(--waline-info-font-size);
+    line-height:1.5
+}
+.wl-content p.wl-tex{
+    text-align:center
+}
+.wl-content .katex-display{
+    overflow:auto hidden;
+    -webkit-overflow-scrolling:touch;
+    padding-top:.2em;
+    padding-bottom:.2em
+}
+.wl-content .katex-display::-webkit-scrollbar{
+    height:3px
+}
+.wl-content .katex-error{
+    color:red
+}
+.wl-count{
+    flex:1;
+    font-weight:bold;
+    font-size:1.25em
+}
+.wl-empty{
+    overflow:auto;
+    padding:1.25em;
+    color:var(--waline-color);
+    text-align:center
+}
+.wl-operation{
+    text-align:center
+}
+.wl-operation button{
+    margin:1em 0
+}
+.wl-power{
+    padding:.5em 0;
+    color:var(--waline-light-grey);
+    font-size:var(--waline-info-font-size);
+    text-align:end
+}
+.wl-meta-head{
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    padding:.375em
+}
+.wl-sort{
+    margin:0;
+    list-style-type:none
+}
+.wl-sort li{
+    display:inline-block;
+    color:var(--waline-info-color);
+    font-size:.75em;
+    cursor:pointer
+}
+.wl-sort li.active{
+    color:var(--waline-theme-color)
+}
+.wl-sort li+li{
+    margin-inline-start:1em
+}
+.wl-reaction{
+    overflow:auto hidden;
+    margin-bottom:1.75em;
+    text-align:center
+}
+.wl-reaction img{
+    width:100%;
+    height:100%;
+    transition:all 250ms ease-in-out
+}
+.wl-reaction-title{
+    margin:16px auto;
+    font-weight:bold;
+    font-size:18px
+}
+.wl-reaction-list{
+    display:flex;
+    flex-direction:row;
+    gap:16px;
+    justify-content:center;
+    margin:0;
+    padding:8px;
+    list-style-type:none
+}
+@media(max-width: 580px){
+    .wl-reaction-list{
+        gap:12px
+    }
+}
+[data-waline] .wl-reaction-list{
+    margin-inline-start:0
+}
+.wl-reaction-item{
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    cursor:pointer
+}
+.wl-reaction-item:hover img,.wl-reaction-item.active img{
+    transform:scale(1.15)
+}
+.wl-reaction-img{
+    position:relative;
+    width:42px;
+    height:42px
+}
+@media(max-width: 580px){
+    .wl-reaction-img{
+        width:32px;
+        height:32px
+    }
+}
+.wl-reaction-loading{
+    position:absolute;
+    top:-4px;
+    inset-inline-end:-5px;
+    width:18px;
+    height:18px;
+    color:var(--waline-theme-color)
+}
+.wl-reaction-votes{
+    position:absolute;
+    top:-9px;
+    inset-inline-end:-9px;
+    min-width:1em;
+    padding:2px;
+    border:1px solid var(--waline-theme-color);
+    border-radius:1em;
+    background:var(--waline-bgcolor);
+    color:var(--waline-theme-color);
+    font-weight:700;
+    font-size:.75em;
+    line-height:1
+}
+.wl-reaction-item.active .wl-reaction-votes{
+    background:var(--waline-theme-color);
+    color:var(--waline-bgcolor)
+}
+.wl-reaction-text{
+    font-size:.875em
+}
+.wl-reaction-item.active .wl-reaction-text{
+    color:var(--waline-theme-color)
+}
+.wl-content pre,.wl-content pre[class*=language-]{
+    overflow:auto;
+    margin:.75rem 0;
+    padding:1rem 1.25rem;
+    border-radius:6px;
+    background:var(--waline-code-bgcolor);
+    line-height:1.4
+}
+.wl-content pre code,.wl-content pre[class*=language-] code{
+    padding:0;
+    border-radius:0;
+    background:rgba(0,0,0,0) !important;
+    color:#bbb;
+    direction:ltr
+}
+.wl-content code[class*=language-],.wl-content pre[class*=language-]{
+    background:none;
+    color:#ccc;
+    font-size:1em;
+    font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
+    text-align:left;
+    white-space:pre;
+    word-spacing:normal;
+    word-wrap:normal;
+    word-break:normal;
+    tab-size:4;
+    hyphens:none
+}
+.wl-content pre[class*=language-]{
+    overflow:auto
+}
+.wl-content :not(pre)>code[class*=language-],.wl-content pre[class*=language-]{
+    background:#2d2d2d
+}
+.wl-content :not(pre)>code[class*=language-]{
+    padding:.1em;
+    border-radius:.3em;
+    white-space:normal
+}
+.wl-content .token.comment,.wl-content .token.block-comment,.wl-content .token.prolog,.wl-content .token.doctype,.wl-content .token.cdata{
+    color:#999
+}
+.wl-content .token.punctuation{
+    color:#ccc
+}
+.wl-content .token.tag,.wl-content .token.attr-name,.wl-content .token.namespace,.wl-content .token.deleted{
+    color:#e2777a
+}
+.wl-content .token.function-name{
+    color:#6196cc
+}
+.wl-content .token.boolean,.wl-content .token.number,.wl-content .token.function{
+    color:#f08d49
+}
+.wl-content .token.property,.wl-content .token.class-name,.wl-content .token.constant,.wl-content .token.symbol{
+    color:#f8c555
+}
+.wl-content .token.selector,.wl-content .token.important,.wl-content .token.atrule,.wl-content .token.keyword,.wl-content .token.builtin{
+    color:#cc99cd
+}
+.wl-content .token.string,.wl-content .token.char,.wl-content .token.attr-value,.wl-content .token.regex,.wl-content .token.variable{
+    color:#7ec699
+}
+.wl-content .token.operator,.wl-content .token.entity,.wl-content .token.url{
+    color:#67cdcc
+}
+.wl-content .token.important,.wl-content .token.bold{
+    font-weight:bold
+}
+.wl-content .token.italic{
+    font-style:italic
+}
+.wl-content .token.entity{
+    cursor:help
+}
+.wl-content .token.inserted{
+    color:green
+}
+.wl-recent-item p{
+    display:inline
+}
+.wl-user-list{
+    padding:0;
+    list-style:none
+}
+.wl-user-list a,.wl-user-list a:hover,.wl-user-list a:visited{
+    color:var(--waline-color);
+    text-decoration:none
+}
+.wl-user-list .wl-user-avatar{
+    position:relative;
+    display:inline-block;
+    overflow:hidden;
+    margin-inline-end:10px;
+    border-radius:4px;
+    line-height:0
+}
+.wl-user-list .wl-user-avatar>img{
+    width:var(--waline-user-avatar-size, 48px);
+    height:var(--waline-user-avatar-size, 48px)
+}
+.wl-user-list .wl-user-badge{
+    position:absolute;
+    bottom:0;
+    inset-inline-end:0;
+    min-width:.7em;
+    height:1.5em;
+    padding:0 .4em;
+    border-radius:4px;
+    background:var(--waline-info-bgcolor);
+    color:var(--waline-info-color);
+    font-weight:bold;
+    font-size:10px;
+    line-height:1.5em;
+    text-align:center
+}
+.wl-user-list .wl-user-item{
+    margin:10px 0
+}
+.wl-user-list .wl-user-item:nth-child(1) .wl-user-badge{
+    background:var(--waline-rank-gold-bgcolor, #fa3939);
+    color:var(--waline-white);
+    font-weight:bold
+}
+.wl-user-list .wl-user-item:nth-child(2) .wl-user-badge{
+    background:var(--waline-rank-silver-bgcolor, #fb811c);
+    color:var(--waline-white);
+    font-weight:bold
+}
+.wl-user-list .wl-user-item:nth-child(3) .wl-user-badge{
+    background:var(--waline-rank-copper-bgcolor, #feb207);
+    color:var(--waline-white)
+}
+.wl-user-list .wl-user-meta{
+    display:inline-block;
+    vertical-align:top
+}
+.wl-user-list .wl-badge{
+    display:inline-block;
+    vertical-align:text-top;
+    margin-inline-start:.5em;
+    padding:0 .3em;
+    border:1px solid var(--waline-badge-color);
+    border-radius:4px;
+    color:var(--waline-badge-color);
+    font-size:var(--waline-badge-font-size)
+}
+.wl-user-wall{
+    padding:0;
+    list-style:none
+}
+.wl-user-wall .wl-user-badge,.wl-user-wall .wl-user-meta{
+    display:none
+}
+.wl-user-wall .wl-user-item{
+    position:relative;
+    display:inline-block;
+    transition:transform ease-in-out .2s
+}
+.wl-user-wall .wl-user-item::before,.wl-user-wall .wl-user-item::after{
+    position:absolute;
+    bottom:100%;
+    left:50%;
+    z-index:10;
+    opacity:0;
+    pointer-events:none;
+    transition:all .18s ease-out .18s;
+    transform:translate(-50%, 4px);
+    transform-origin:top
+}
+.wl-user-wall .wl-user-item::before{
+    content:"";
+    width:0;
+    height:0;
+    border:5px solid rgba(0,0,0,0);
+    border-top-color:rgba(16,16,16,.95)
+}
+.wl-user-wall .wl-user-item::after{
+    content:attr(aria-label);
+    margin-bottom:10px;
+    padding:.5em 1em;
+    border-radius:2px;
+    background:rgba(16,16,16,.95);
+    color:#fff;
+    font-size:12px;
+    white-space:nowrap
+}
+.wl-user-wall .wl-user-item:hover{
+    transform:scale(1.1)
+}
+.wl-user-wall .wl-user-item:hover::before,.wl-user-wall .wl-user-item:hover::after{
+    opacity:1;
+    pointer-events:none;
+    transform:translate(-50%, 0)
+}
+.wl-user-wall .wl-user-item img{
+    width:var(--waline-user-avatar-size, 48px);
+    height:var(--waline-user-avatar-size, 48px)
 }
 /*# sourceMappingURL=waline.css.map */
+/*# sourceMappingURL=waline.css.map */
 
 /* Waline meta */
 .wl-meta > span::before {
diff --git a/source/css/layout/_partials/first-screen.styl b/source/css/layout/_partials/first-screen.styl
index 2c60858d..4dcd127c 100755
--- a/source/css/layout/_partials/first-screen.styl
+++ b/source/css/layout/_partials/first-screen.styl
@@ -1,6 +1,7 @@
 $first-screen-font-size = 2rem
 $first-screen-icon-size = 1.6rem
 
+@import "../../common/variables"
 
 .first-screen-container {
   font-family "Optima Bold", sans-serif
diff --git a/source/css/layout/_partials/footer.styl b/source/css/layout/_partials/footer.styl
index fdf234bc..525aace2 100755
--- a/source/css/layout/_partials/footer.styl
+++ b/source/css/layout/_partials/footer.styl
@@ -1,3 +1,5 @@
+@import "../../common/variables"
+
 .footer {
   margin-top 20px !important
   padding-top 20px !important
diff --git a/source/css/layout/_partials/local-search.styl b/source/css/layout/_partials/local-search.styl
index d98e6949..a70fb409 100755
--- a/source/css/layout/_partials/local-search.styl
+++ b/source/css/layout/_partials/local-search.styl
@@ -1,5 +1,7 @@
 $icon-size = 1.2rem
 
+@import "../../common/variables"
+
 .search-pop-overlay {
   position fixed
   display flex
diff --git a/source/css/layout/_partials/menu.styl b/source/css/layout/_partials/menu.styl
index d1e3e77e..bc4ca27d 100755
--- a/source/css/layout/_partials/menu.styl
+++ b/source/css/layout/_partials/menu.styl
@@ -3,6 +3,8 @@ $pc-search-icon-font-size = 1.5rem
 $menu-bar-line-height = 2.5px
 $logo-image-box-width = 46px
 
+@import "../../common/variables"
+
 .menu-wrapper {
   font-family "Optima Medium", sans-serif
   width 100%
diff --git a/source/css/layout/_partials/page-template.styl b/source/css/layout/_partials/page-template.styl
index f493391b..3a71195e 100755
--- a/source/css/layout/_partials/page-template.styl
+++ b/source/css/layout/_partials/page-template.styl
@@ -3,6 +3,8 @@ $friend-link-item-height-tablet = 68px
 $friend-link-item-interval = 16px
 $friend-link-item-border-radius = 9px
 
+@import "../../common/variables"
+
 .page-template-container {
 
   redefine-container(false, 0, 0, 30px, 30px)
diff --git a/source/css/layout/_partials/toc.styl b/source/css/layout/_partials/toc.styl
index 8f3ee008..b985d981 100755
--- a/source/css/layout/_partials/toc.styl
+++ b/source/css/layout/_partials/toc.styl
@@ -14,6 +14,7 @@
     }
 
     .page-title {
+      white-space normal
       font-size 1.1rem
       color var(--second-text-color)
       font-weight bold
@@ -21,7 +22,6 @@
     }
     
     ol {
-      
       ol {
         border-left 2px dotted var(--shadow-color-1)
       }
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index aafde239..f01880bb 100755
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -1,11 +1,13 @@
+@import "../common/variables"
 $avatarWidth = 46px
 $arrow-icon-width = 16px
 $post-nav-max-width = 220px
 $article-title-font-size = 3.2rem 
 $temp-toc-width = hexo-config('style.right_side_width')
 $toc-container-width = $temp-toc-width ? convert($temp-toc-width) : 210px
-$without-toc-container-width = calc(100% - 210px)
+$without-toc-container-width = calc(100% - $temp-toc-width)
 $gap = 30px
+
 .post-page-container{
   display flex
   position relative
@@ -17,6 +19,9 @@ $gap = 30px
   &.show-toc {
     .toc-content-container {
       display block
+      opacity 1
+      transition opacity 0.2s ease-in 0.2s
+      width $toc-container-width
 
       &:hover::-webkit-scrollbar-thumb {
         border: 3px solid rgba(183, 183, 183, 0.3);
@@ -42,7 +47,7 @@ $gap = 30px
     }
 
     .article-content-container {
-      width $without-toc-container-width !important
+      width calc(100% - 210px) !important
     }
   }
 
@@ -69,7 +74,7 @@ $gap = 30px
 
   .article-content-container {
     width 100%
-    margin-right: 30px
+    transition width 0.2s ease
 
     redefine-container(false, 0, 0, 30px, 30px)
 
@@ -262,7 +267,7 @@ $gap = 30px
       width 100%
 
       +redefine-tablet() {
-        margin-top $spacing-unit * 0.8 !important
+        margin-top ($spacing-unit * 0.8) !important
       }
     }
 
@@ -414,20 +419,27 @@ $gap = 30px
   }
 
   .toc-content-container {
+    white-space: nowrap;
+    opacity 0
     position sticky
     top $menu-height + $spacing-unit
     //border-radius $redefine-border-radius-large
     border-radius $redefine-border-radius-none
-    display none
-    width $toc-container-width
+    //display none
+    //visibility hidden
+    //width $toc-container-width
+    width 0
     height auto
     max-height calc(100vh - 210px)
+    margin-left 30px
     //z-index $z-index-6
     overflow-y auto
+    overflow-x hidden
     float right
     padding 10px
     box-sizing border-box
     box-shadow none !important
+    transition opacity 0.3s ease-out 0.3s
     
 
     hover-style(false, 0, 0)
@@ -439,4 +451,4 @@ $gap = 30px
       display none !important
     }
   }
-}
\ No newline at end of file
+}
diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl
index ff33d415..0841d221 100755
--- a/source/css/layout/category-content.styl
+++ b/source/css/layout/category-content.styl
@@ -1,3 +1,4 @@
+@import "../common/variables"
 $category-name-font-size = 1.6rem
 
 .category-container {
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 83674fd8..57d4819f 100755
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -1,3 +1,5 @@
+@import "../common/variables"
+
 .home-content-container {
   background var(--background-color)
 
@@ -43,17 +45,17 @@
         height 150px
         padding-bottom 28px
         overflow hidden
-        border-radius $redefine-border-radius-large-top !important
+        border-radius $redefine-border-radius-large-top 
         margin -28px -28px 20px -28px
 
         +redefine-tablet() {
-          border-radius 14.4px
+          border-radius $redefine-border-radius-large-top * 0.8
           margin -22.4px -22.4px 16px -22.4px
           padding-bottom 22.4px
         }
 
         +redefine-mobile() {
-          border-radius 10.8px
+          border-radius $redefine-border-radius-large-top * 0.6
           margin -16.8px -16.8px 12px -16.8px
           padding-bottom 16.8px
         }
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index 06815632..2cf4441e 100755
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -1,3 +1,5 @@
+@import "../common/variables"
+
 .page-container {
   position relative
   box-sizing border-box
@@ -22,7 +24,7 @@
 
 
       +redefine-tablet() {
-        padding-top $menu-shrink-height * 0.9
+        padding-top ($menu-shrink-height * 0.9)
       }
 
       +redefine-mobile() {
@@ -59,7 +61,7 @@
         height $menu-shrink-height
 
         +redefine-tablet() {
-          height $menu-shrink-height * 0.9
+          height ($menu-shrink-height * 0.9)
         }
 
         +redefine-mobile() {
@@ -89,7 +91,7 @@
       padding $spacing-unit 0
 
       +redefine-tablet() {
-        padding $spacing-unit * 0.8 0
+        padding ($spacing-unit * 0.8) 0
         box-shadow none !important
 
         :hover {
@@ -113,7 +115,7 @@
         width $main-content-width
         max-width $content-max-width 
         height 100%
-        transition-t("max-width, width", "0, 0", "0.2, 0.2", "ease-in, ease-out")
+        transition-t("max-width, width", "0, 0", "0.2, 0.2", "ease, ease")
 
         +redefine-tablet() {
           width $main-content-width-tablet
@@ -145,17 +147,17 @@
       top $menu-shrink-height + $spacing-unit
 
       +redefine-tablet() {
-        top $menu-shrink-height * 0.9 + $spacing-unit
+        top (($menu-shrink-height * 0.9) + $spacing-unit)
       }
 
       +redefine-mobile() {
-        top $menu-shrink-height * 0.8 + $spacing-unit
+        top ($menu-shrink-height * 0.8 + $spacing-unit)
       }
     }
 
 
     +redefine-tablet() {
-      top $menu-height * 0.9 + $spacing-unit
+      top ($menu-height * 0.9 + $spacing-unit)
       right 10px
       transform scale(0.82)
       transform-origin right top
@@ -163,7 +165,7 @@
 
 
     +redefine-mobile() {
-      top $menu-height * 0.8 + $spacing-unit
+      top ($menu-height * 0.8 + $spacing-unit)
       right 5px
       transform scale(0.72)
     }
diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl
index 97090f2b..aeb05102 100755
--- a/source/css/layout/tag-content.styl
+++ b/source/css/layout/tag-content.styl
@@ -1,3 +1,4 @@
+@import "../common/variables"
 $tag-name-font-size = 1.6rem
 
 .tag-container {
diff --git a/source/css/style.styl b/source/css/style.styl
index 372d4c47..ca04a481 100755
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -1,5 +1,8 @@
+@import "common/animated.styl"
+@import "common/variables.styl"
 @import "common/basic.styl"
 @import "common/markdown.styl"
+@import "common/redefine-theme.styl"
 @import "common/codeblock/highlight.styl"
 @import "common/codeblock/code-block.styl"
 @import "common/codeblock/code-theme.styl"
diff --git a/source/js/layouts/toc.js b/source/js/layouts/toc.js
index 5d7db3bd..d412413d 100755
--- a/source/js/layouts/toc.js
+++ b/source/js/layouts/toc.js
@@ -94,8 +94,9 @@ function initTOC() {
     REDEFINE.utils.registerTOCScroll();
 
   } else {
-    REDEFINE.utils.pageContainer_dom.removeChild(document.querySelector('.toc-content-container'));
-    REDEFINE.utils.pageContainer_dom.removeChild(document.querySelector('.toc-marker'));
+    document.querySelectorAll('.toc-content-container, .toc-marker').forEach((elem) => {
+      elem.remove();
+    });
   }
 }