From 7edff0921f2848406f6ae911a84f2196d640a3ed Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Sat, 18 Aug 2018 20:06:39 +0800
Subject: [PATCH] css

---
 source/less/_article.less   | 37 ++++++++++++++++++-------------------
 source/less/_base.less      | 15 +++++++++------
 source/less/_defines.less   | 35 +++++++++++++++++++----------------
 source/less/_footer.less    |  4 ++--
 source/less/_header.less    | 26 +++++++++++++-------------
 source/less/_main.less      | 13 ++++++-------
 source/less/_normalize.less |  6 +++---
 source/less/_search.less    | 10 +++++-----
 source/less/_toc.less       | 12 +++++++-----
 source/less/_tog.less       |  6 +++---
 source/less/_widget.less    | 16 +++++++---------
 11 files changed, 92 insertions(+), 88 deletions(-)

diff --git a/source/less/_article.less b/source/less/_article.less
index 7d2f960..acd3ebc 100755
--- a/source/less/_article.less
+++ b/source/less/_article.less
@@ -74,14 +74,14 @@
         &:before{
             display: none;
         }
-        color: darken(@href-color, 5%);
+        color: @theme-text-link;
         .enable-trans();
         &:hover {
-            color: darken(@href-color, 20%);
+            color: @theme-text-highlight;
             text-decoration: underline;
         }
         &:active {
-            color: darken(@href-color, 50%);
+            color: darken(@theme-text-highlight, 25%);
         }
     }
     h1,
@@ -103,7 +103,7 @@
         }
     }
     h1, h2 {
-      color: @text-color-theme;
+      color: @theme-text-header;
       margin-top: 2em;
     }
     h3, h4, h5, h6 {
@@ -148,15 +148,17 @@
         }
     }
     blockquote {
+
         position: relative;
         width: 100%;
         font-size: @small-font-size;
-        background: fade(@primary-color, 10%);
+        background: fade(@theme-bg-quote, 10%);
         margin: 1em 0;
         padding: 1.5em 1.5em .9em 1.5em;
-        border-left: 4px solid @primary-color;
+        border-left: 4px solid @theme-bg-quote;
         border-top-right-radius: 8px;
         border-bottom-right-radius: 8px;
+
         footer {
             strong {
                 margin-right: 7px;
@@ -174,15 +176,12 @@
         font-family: @code-font-family;
         padding: 3px 3px 0px 3px;
         margin: 0px 2px;
-        // margin-bottom: 5px;
         vertical-align: center;
         border-radius: 2px;
-        // border: 1px solid darken(@qoute-background-color, 10%);
-        border: 1px solid fade(@primary-color, 30%);
+        border: 1px solid fade(@theme-bg-header, 30%);
         font-size: @base-font-size * .8;
-        // background: @qoute-background-color;
 
-        background: fade(@primary-color, 10%);
+        background: fade(@theme-bg-header, 10%);
         @media(max-width: @on-phone){
           font-size: @base-font-size * .8 * .95;
         }
@@ -198,16 +197,16 @@
             display: inline-block;
             vertical-align: middle;
             line-height: 2rem;
-            background-color: fade(@primary-color, 90%);
+            background-color: fade(@theme-bg-header, 90%);
             padding: .2em 2.4em;
-            color: @text-color-inside-theme;
+            color: @theme-text-in-header;
             border-radius: 3px;
             .enable-trans();
             &:hover {
-              background: darken(@primary-color, 10%);
+              background: darken(@theme-bg-header, 10%);
             }
             &:active {
-              background: lighten(@primary-color, 20%);
+              background: lighten(@theme-bg-header, 20%);
             }
         }
 
@@ -235,7 +234,7 @@
             .enable-trans();
             color: @grey-color;
             &:hover {
-                color: @accent-color;
+                color: @theme-text-highlight;
                 background: transparent;
             }
             &::before {
@@ -312,7 +311,7 @@
   display: block;
   // background: #2d2d2d;
   // background: fade(@material-blue, 8%);
-  background: @qoute-background-color;
+  background: @theme-bg-code;
   // color: #cccccc;
   font-size: @small-font-size * .95;
   font-family:@code-font-family;
@@ -327,13 +326,13 @@
     border-radius: 8px;
     text-align: right;
     border-width: 0;
-    background-color: darken(@background-color, 5%);
+    background-color: darken(@theme-bg-main, 5%);
   }
   .code{
       padding-left: 8px;
       padding-right: 16px;
       vertical-align: top;
-      border: 0px solid darken(@background-color, 5%);
+      border: 0px solid darken(@theme-bg-main, 5%);
   }
 
   &::-webkit-scrollbar {
diff --git a/source/less/_base.less b/source/less/_base.less
index bd8abb9..5e66b92 100755
--- a/source/less/_base.less
+++ b/source/less/_base.less
@@ -25,7 +25,7 @@ html {
 }
 
 body {
-    background-color: @background-color;
+    background-color: @theme-bg-main;
     &.modal-active {
         overflow: hidden;
         @media (max-width: @modal-threshold) {
@@ -130,12 +130,12 @@ body {
 }
 
 ::-moz-selection {
-    background: fade(lighten(@primary-color, 5%), 25%);
+    background: fade(lighten(@theme-text-link, 5%), 25%);
     // color: @black;
 }
 
 ::selection {
-    background: fade(lighten(@primary-color, 5%), 25%);
+    background: fade(lighten(@theme-text-link, 5%), 25%);
     // color: @black;
 }
 
@@ -293,12 +293,15 @@ li {
         display: inline-block;
         padding: 0 8px;
         color: @black;
-        border-left: 3px solid transparent;
+        border-left: 2px solid transparent;
         background: transparent;
         .enable-trans();
         &:hover {
-            border-left-color: @primary-color;
-            background: lighten(@background-color, 2%);
+            border-left: 4px solid @theme-bg-quote;
+            border-right: 4px solid @theme-bg-quote;
+            border-radius: 8px;
+            padding: 8px;
+            background: fade(@theme-bg-quote, 10%);
         }
     }
 }
diff --git a/source/less/_defines.less b/source/less/_defines.less
index 3d881f5..5ae72fa 100755
--- a/source/less/_defines.less
+++ b/source/less/_defines.less
@@ -58,25 +58,28 @@
 @dark:  #555555;
 @text-color:       fade(@black, 85%);
 @text-color-darken:       darken(@text-color, 20%);
-@background-color: #EFEFEF;
 
-// 主题色
-@primary-color:    @xiaowenwen-green;
-// 强调色
-@accent-color:		 @material-orange;
 
-
-// 变种
-// 主题色的文本（主题色加深）
-@text-color-theme: darken(@primary-color, 5%);
+// 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+// 网页背景
+@theme-bg-main: #EFEFEF;
+// 导航栏背景
+@theme-bg-header: @xiaowenwen-green;
+// 卡片背景
+@theme-bg-card: #FFF;
+// 代码块的背景色
+@theme-bg-code: #EFEFEF;
+// 引用的颜色 和 分类、归档的 hover 时颜色
+@theme-bg-quote: @theme-bg-header;
+// 标题文字颜色（h1/h2）
+@theme-text-header: darken(@theme-bg-header, 0%);
+// 链接颜色
+@theme-text-link: @ax-blue;
+// 链接高亮颜色
+@theme-text-highlight: @material-orange;
 // 在主题色中显示的文本（白或深灰）
-// @text-color-inside-theme: @text-color;
-@text-color-inside-theme: white;
-
-@href-color: @ax-blue;
-
-// 引用部分和代码块的背景色
-@qoute-background-color: fade(@background-color, 80%);
+@theme-text-in-header: white;
+// 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
 
 
 // Responsive limits
diff --git a/source/less/_footer.less b/source/less/_footer.less
index 54884d1..8ddbc77 100755
--- a/source/less/_footer.less
+++ b/source/less/_footer.less
@@ -23,7 +23,7 @@
         color: fade(@text-color, 70%);
         .enable-trans();
         &:hover {
-            color: @accent-color;
+            color: @theme-text-highlight;
         }
         &.social {
             position: relative;
@@ -33,7 +33,7 @@
             padding: 8px;
             &:hover {
                 background: transparent;
-                color: @accent-color;
+                color: @theme-text-highlight;
             }
         }
     }
diff --git a/source/less/_header.less b/source/less/_header.less
index 26b83fe..0a9e7b2 100755
--- a/source/less/_header.less
+++ b/source/less/_header.less
@@ -19,11 +19,11 @@
 	.nav--main,.nav-sub{
 		height: @header-height;
 	}
-	background: @primary-color;
+	background: @theme-bg-header;
 	// padding: 0 @gap;
 	&, a{
 		.txt-ellipsis;
-		color: @text-color-inside-theme;
+		color: @theme-text-in-header;
 	}
 	&:extend(.z-depth-nav);
 		.enable-trans();
@@ -53,10 +53,10 @@
 			.enable-trans();
 			display: block;
 			font-size: @header-font-size * .95;
-			color: fade(@text-color-inside-theme,60%);
+			color: fade(@theme-text-in-header,60%);
 			padding: 0 @gap / 2;
 			&:hover,&.active{
-				color: @text-color-inside-theme;
+				color: @theme-text-in-header;
 			}
 		}
 		@media(max-width: @on-laptop){
@@ -69,7 +69,7 @@
 		.underline{
 			.enable-trans();
 			position: absolute;
-			background: @text-color-inside-theme;
+			background: @theme-text-in-header;
 			left: 0;
 			bottom: 0;
 			width: 0;
@@ -147,14 +147,14 @@
 		line-height: @search-height - 10px;
 		margin: 0;
 		width: 100%;
-		color: @text-color-inside-theme;
+		color: @theme-text-in-header;
 		padding: 5px 10px 5px 40px;
 		height: @search-height;
 		line-height: @search-height;
 		font-family: @base-font-family;
 		border: none;
 		border-radius: 3px;
-		background:fade(@text-color-inside-theme,15%);
+		background:fade(@theme-text-in-header,15%);
 		box-sizing: border-box;
 		-webkit-appearance: none;
 		box-shadow: none;
@@ -169,7 +169,7 @@
 		&:focus ~ .icon{
 			color: @black;
 		}
-		.set-placeholder({color: @text-color-inside-theme});
+		.set-placeholder({color: @theme-text-in-header});
 	}
 
 }
@@ -203,11 +203,11 @@
 			color: @black;
 			font-size: 0.8125em;
 			padding: 2px 20px;
-			border-left: 0px solid @primary-color;
-			&:hover {
-				background: darken(white, 4%);
-				border-left: 3px solid @primary-color;
-			}
+            border-left: 2px solid transparent;
+            &:hover{
+                border-left: 4px solid @theme-bg-quote;
+                background: fade(@theme-bg-quote, 10%);
+            }
 		}
   	}
 }
diff --git a/source/less/_main.less b/source/less/_main.less
index 4e24607..378eebc 100755
--- a/source/less/_main.less
+++ b/source/less/_main.less
@@ -15,7 +15,6 @@
     #comments {
         position: relative;
         // padding-top: 1.5*@gap;
-        background: white;
         @media(max-width: @on-phone) {
             // padding-top: @gap;
         }
@@ -94,7 +93,7 @@
         margin: 0 auto;
         padding: 2 * @gap 1.5*@gap;
         //max-width: 768px;
-        background: white;
+        background: @theme-bg-card;
         border-radius: @border-radius-width;
         @media(max-width: @on-phone) {
             border-radius: 0;
@@ -130,7 +129,7 @@
                         font-size: @article-title-size-phone;
                     }
                     &:hover {
-                        color: @accent-color;
+                        color: @theme-text-highlight;
                     }
                 }
             }
@@ -148,18 +147,18 @@
                     content: '';
                     border-top: @border-width/2 solid transparent;
                     border-bottom: @border-width/2 solid transparent;
-                    border-left: @border-width solid darken(@accent-color, 0%);
+                    border-left: @border-width solid @theme-text-link;
                 }
                 a {
                     font-weight: bold;
-                        color: darken(@accent-color, 0%);
+                        color: @theme-text-link;
                         .enable-trans();
                         &:hover {
-                            color: darken(@accent-color, 20%);
+                            color: @theme-text-highlight;
                             text-decoration: underline;
                         }
                         &:active {
-                            color: darken(@accent-color, 50%);
+                            color: darken(@theme-text-highlight, 25%);
                         }
                 }
 
diff --git a/source/less/_normalize.less b/source/less/_normalize.less
index b11a85e..b913824 100755
--- a/source/less/_normalize.less
+++ b/source/less/_normalize.less
@@ -420,16 +420,16 @@ table {
   border-collapse: collapse;
   width: 100%;
   th {
-    background-color: lighten(@background-color, 1%);
+    background-color: lighten(@theme-bg-main, 1%);
   }
   td,
   th {
       padding: 4px 8px;
-      border: 1px solid darken(@background-color, 5%);
+      border: 1px solid @theme-bg-main;
   }
   tr {
       // border-bottom: 2px solid #eee;
-      // background-color: @qoute-background-color;
+      // background-color: @theme-bg-quote;
   }
   &>thead>th {
       // border-bottom-width: 2px;
diff --git a/source/less/_search.less b/source/less/_search.less
index 94dd830..3d024c3 100755
--- a/source/less/_search.less
+++ b/source/less/_search.less
@@ -47,7 +47,7 @@
       position: relative;
       width: 100%;
       height: @header-height;
-      background-color: @primary-color;
+      background-color: @theme-bg-header;
       z-index: 3;
       border-top-left-radius: @border-radius-width;
       border-top-right-radius: @border-radius-width;
@@ -70,7 +70,7 @@
         height: @header-height;
         top: 0;
         right: 0;
-        color: @text-color-inside-theme;
+        color: @theme-text-in-header;
         cursor: pointer;
         text-align: center;
         line-height: @header-height;
@@ -114,7 +114,7 @@
           font-size: @base-font-size;
           line-height: @base-line-height;
           vertical-align: middle;
-          color: @text-color-inside-theme;
+          color: @theme-text-in-header;
           border: none;
           background: transparent;
           .enable-trans();
@@ -140,7 +140,7 @@
         height: @header-height;
         vertical-align: middle;
         font-size: @header-switcher-font-size;
-        color: @text-color-inside-theme;
+        color: @theme-text-in-header;
         z-index: 2;
       }
     }
@@ -255,7 +255,7 @@
               // color: @black;
             }
             .title {
-              color: @text-color-theme;
+              color: @theme-text-highlight;
             }
           }
           .title {
diff --git a/source/less/_toc.less b/source/less/_toc.less
index cde76bd..048ac07 100755
--- a/source/less/_toc.less
+++ b/source/less/_toc.less
@@ -37,15 +37,17 @@
     background: white;
     a {
         padding-left: 8px;
-        border-left: 3px solid fade(@primary-color, 0);
         color: fade(@text-color, 60%);
         font-size: @small-font-size;
         display: inline-block;
+        border-left: 2px solid transparent;
         &:hover,&:active,&.active{
-            color: darken(@text-color-theme, 00%);
-            font-weight: bold;
-            border-left: 3px solid @primary-color;
-            background:darken(white, 5%);
+            border-left: 4px solid @theme-bg-quote;
+            background: fade(@theme-bg-quote, 10%);
+        }
+        &:hover{
+            border-left: 4px solid @theme-bg-quote;
+            background: fade(@theme-bg-quote, 10%);
         }
     }
     ol{
diff --git a/source/less/_tog.less b/source/less/_tog.less
index b45d6e4..ebe5fef 100755
--- a/source/less/_tog.less
+++ b/source/less/_tog.less
@@ -16,12 +16,12 @@
   z-index:3;
   &:extend(.z-depth-2);
   padding: @gap;
-  border-left: 6px solid @primary-color;
-  background: @text-color-inside-theme;
+  border-left: 6px solid @theme-bg-header;
+  background: @theme-text-in-header;
   a {
     display: inline-block;
     &:hover,&:active,&.active{
-      color: @accent-color;
+      color: @theme-text-highlight;
     }
   }
   ol{
diff --git a/source/less/_widget.less b/source/less/_widget.less
index b76905c..c99ba8d 100755
--- a/source/less/_widget.less
+++ b/source/less/_widget.less
@@ -1,6 +1,6 @@
 .m_widget{
     &:extend(.z-depth-main);
-    background: white;
+    background: @theme-bg-card;
     margin-bottom: @gap;
     border-radius: @border-radius-width;
     @media(max-width: @on-phone) {
@@ -19,8 +19,8 @@
         @media(max-width: @on-phone) {
             border-radius: 0;
         }
-        background-color: fade(@primary-color,90%);
-        color: @text-color-inside-theme;
+        background-color: fade(@theme-bg-header,90%);
+        color: @theme-text-in-header;
         font-size: @base-font-size;
         line-height: 1.8em;
         padding: 8px @gap;
@@ -38,7 +38,7 @@
         display: flex;
         justify-content: space-between;
         align-content: center;
-        border-left: 0px solid @primary-color;
+        border-left: 2px solid transparent;
         .enable-trans();
         .name{
             flex:auto;
@@ -51,8 +51,8 @@
             color: fade(@text-color, 50%);
         }
         &:hover{
-            border-left: 3px solid @primary-color;
-            background:darken(white, 5%);
+            border-left: 4px solid @theme-bg-quote;
+            background: fade(@theme-bg-quote, 10%);
         }
     }
 }
@@ -70,7 +70,6 @@
         .desc{
             position: relative;
             padding: @gap;
-            background:@qoute-background-color;
             .enable-trans(.15s);
             line-height: 1.2em;
             font-style: italic;
@@ -81,7 +80,6 @@
                 top:0;
                 width:2px;
                 height:100%;
-                background:@primary-color;
             }
             &:empty{
                 padding:0;
@@ -98,7 +96,7 @@
             .enable-trans(.1s);
             line-height: 1.6em;
             &:hover{
-                color: @accent-color !important; //to cover inline style.
+                color: @theme-text-highlight !important; //to cover inline style.
                 text-decoration: underline
             }
         }