update theme color

i18n
xaoxuu 6 years ago
parent 0d7c42b25a
commit 6a87308da4
  1. 5
      source/less/_article.less
  2. 11
      source/less/_defines.less
  3. 14
      source/less/_header.less
  4. 5
      source/less/_main.less
  5. 8
      source/less/_widget.less

@ -202,9 +202,10 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
line-height: 2rem; line-height: 2rem;
background-color: fade(@theme_bg_navbar, 90%); font-weight: bold;
background-color: @theme_bg_quote;
padding: .2em 2.4em; padding: .2em 2.4em;
color: @theme_text_in_header; color: white;
border-radius: @border_radius/2; border-radius: @border_radius/2;
.enable-trans(); .enable-trans();
&:hover { &:hover {

@ -34,13 +34,14 @@
// xx // xx
@color_light_green: #5CC281; @color_light_green: #5CC281;
@color_vue: #4fc08d; @color_vue: #4fc08d;
@color_yellow: #e96900;
// xaoxuu // xaoxuu
@color_ax_light_red: #FF6868; @color_ax_light_red: #FF6868;
@color_ax_red: #F24E32; @color_ax_red: #F24E32;
@color_ax_blue: #52A1F8; @color_ax_blue: #52A1F8;
// 主题色 // 主题色
@theme_base_main: #EFEFEF; @theme_base_main: #EFEFEF;
@theme_base_tint: @color_ax_light_red; @theme_base_tint: @color_mac_maximize;
// 阴影 // 阴影
@boxshadow_base_1: 0 1px 2px 0px rgba(0, 0, 0, 0.1); @boxshadow_base_1: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
@boxshadow_base_2: 0 2px 4px 0px rgba(0, 0, 0, 0.1); @boxshadow_base_2: 0 2px 4px 0px rgba(0, 0, 0, 0.1);
@ -125,7 +126,7 @@
// start: 圆角 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> // start: 圆角 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 0px: 极端,2px:硬朗,4px:常规,8px:圆润,16px:温柔 // 0px: 极端,2px:硬朗,4px:常规,8px:圆润,16px:温柔
@border_radius: 4px; // 圆角半径,可以根据心情随时调整风格 @border_radius: 8px; // 圆角半径,可以根据心情随时调整风格
@border_radius_left_line: 4px; // 左边的竖线的宽度 @border_radius_left_line: 4px; // 左边的竖线的宽度
@border_radius_code_block: 4px; // 代码块的圆角及其滚动条的宽度 @border_radius_code_block: 4px; // 代码块的圆角及其滚动条的宽度
// end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< // end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@ -138,7 +139,7 @@
// 网页背景 // 网页背景
@theme_bg_main: @theme_base_main; @theme_bg_main: @theme_base_main;
// 导航栏背景 // 导航栏背景
@theme_bg_navbar: @theme_base_tint; @theme_bg_navbar: white;
// 卡片背景 // 卡片背景
@theme_bg_card: white; @theme_bg_card: white;
// 卡片标题栏背景 // 卡片标题栏背景
@ -146,7 +147,7 @@
// 代码的背景色 // 代码的背景色
@theme_bg_code: fade(@color_mac_minimize, 6%); @theme_bg_code: fade(@color_mac_minimize, 6%);
// 代码块的背景色 // 代码块的背景色
@theme_bg_code_block: fade(@color_mac_minimize, 12%); @theme_bg_code_block: fade(@color_mac_minimize, 8%);
// 引用的颜色以及分类、归档的 hover 时颜色 // 引用的颜色以及分类、归档的 hover 时颜色
@theme_bg_quote: @theme_base_tint; @theme_bg_quote: @theme_base_tint;
// 文字颜色 ---------------- // 文字颜色 ----------------
@ -157,7 +158,7 @@
// 链接高亮颜色 // 链接高亮颜色
@theme_text_highlight: @theme_base_tint; @theme_text_highlight: @theme_base_tint;
// 在主题色中显示的文本(一般为白或深灰) // 在主题色中显示的文本(一般为白或深灰)
@theme_text_in_header: white; @theme_text_in_header: @theme_base_tint;
// 正文文字颜色 // 正文文字颜色
@theme_text_main: @dark; @theme_text_main: @dark;
// end: 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< // end: 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

@ -9,6 +9,7 @@
height: @height_navbar; height: @height_navbar;
overflow: hidden; overflow: hidden;
font-family: @fontfamily_base; font-family: @fontfamily_base;
font-weight: bold;
.wrapper{ .wrapper{
padding: auto @gap; padding: auto @gap;
.enable-trans(); .enable-trans();
@ -34,7 +35,8 @@
line-height: @height_navbar; line-height: @height_navbar;
color: @theme_text_in_header; color: @theme_text_in_header;
} }
&:extend(.z-depth-nav); // &:extend(.z-depth-nav); // 适合深色导航栏背景
box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
.enable-trans(); .enable-trans();
&:hover { &:hover {
// &:extend(.z-depth-nav-raised); // &:extend(.z-depth-nav-raised);
@ -201,12 +203,12 @@
border: 1px dashed fade(@theme_text_in_header, 60%); border: 1px dashed fade(@theme_text_in_header, 60%);
} }
&:focus { &:focus {
color:@black; // color:@black;
border: 1px solid fade(@theme_text_in_header, 60%); border: 1px solid fade(@theme_text_in_header, 60%);
.set-placeholder({color: @black}); // .set-placeholder({color: @black});
} }
&:focus ~ .icon{ &:focus ~ .icon{
color: @black; // color: @black;
} }
} }
} }
@ -230,12 +232,12 @@
line-height: 2 * @gap; line-height: 2 * @gap;
background: white; background: white;
border-right: 0; border-right: 0;
&:extend(.z-depth-main-raised); box-shadow: @boxshadow_card_raised;
border-radius: @border_radius; border-radius: @border_radius;
transform: translate3d(@width_sidebar, -0, 0); transform: translate3d(@width_sidebar, -0, 0);
.enable-trans(); .enable-trans();
&:hover { &:hover {
&:extend(.z-depth-main-raised); box-shadow: @boxshadow_card_raised;
} }
&:active { &:active {
box-shadow: @boxshadow_card_normal; box-shadow: @boxshadow_card_normal;

@ -41,8 +41,9 @@
border: none; border: none;
padding-left: 2.4em; padding-left: 2.4em;
padding-right: 2.4em; padding-right: 2.4em;
background-color: fade(@theme_bg_navbar, 90%); font-weight: bold;
color: @theme_text_in_header; background-color: @theme_bg_quote;
color: white;
border-radius: @border_radius/2; border-radius: @border_radius/2;
.enable-trans(); .enable-trans();
&:hover { &:hover {

@ -36,7 +36,8 @@
color: @theme_text_in_header; color: @theme_text_in_header;
font-weight: bold; font-weight: bold;
line-height: 1.5em; line-height: 1.5em;
padding: 8px @gap; // padding: 8px @gap; // 适合深色导航栏背景
padding: 14px @gap 2px @gap; // 适合白色导航栏背景
// letter-spacing: .08em; // letter-spacing: .08em;
} }
@ -111,10 +112,9 @@
} }
.social-wrapper{ .social-wrapper{
display: flex; display: flex;
justify-content: center; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
padding-top: @gap/2; padding: 4px @gap/2;
padding-bottom: @gap/2;
a { a {
color: fade(@theme_text_main, 70%); color: fade(@theme_text_main, 70%);
.enable-trans(); .enable-trans();

Loading…
Cancel
Save