iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

defines

Browse Source
i18n
xaoxuu 6 years ago
parent 0d09c57a94
commit 9a76194fbb
15 changed files with 470 additions and 467 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 82
      README.md
  2. 14
      source/less/_archive.less
  3. 148
      source/less/_article.less
  4. 56
      source/less/_base.less
  5. 155
      source/less/_defines.less
  6. 16
      source/less/_footer.less
  7. 140
      source/less/_header.less
  8. 134
      source/less/_main.less
  9. 6
      source/less/_normalize.less
  10. 62
      source/less/_search.less
  11. 4
      source/less/_side.less
  12. 28
      source/less/_toc.less
  13. 18
      source/less/_tog.less
  14. 2
      source/less/_typo.less
  15. 72
      source/less/_widget.less

82
README.md
Unescape View File

@ -390,19 +390,19 @@ mathjax: true
```yaml
// base
@base-font-size: 16px;
@small-font-size: @base-font-size * 0.875;
@base-line-height: 1.7;
@fontsize_base: 16px;
@fontsize_small: @fontsize_base * 0.875;
@lineheight_base: 1.7;
// title
@font-size-h1: @base-font-size * 1.5;
@font-size-h2: @base-font-size * 1.4;
@font-size-h3: @base-font-size * 1.2;
@font-size-h4: @base-font-size * 1.1;
@font-size-h5: @base-font-size * 1;
@font-size-h6: @small-font-size;
@fontsize_h1: @fontsize_base * 1.5;
@fontsize_h2: @fontsize_base * 1.4;
@fontsize_h3: @fontsize_base * 1.2;
@fontsize_h4: @fontsize_base * 1.1;
@fontsize_h5: @fontsize_base * 1;
@fontsize_h6: @fontsize_small;
// article
@article-title-size: @font-size-h1 * 1.2;
@article-title-size-phone: @font-size-h2;
@fontsize_article_title: @fontsize_h1 * 1.2;
@fontsize_article_title_phone: @fontsize_h2;
```
@ -410,20 +410,20 @@ mathjax: true
### 布局尺寸
```yaml
@modal-threshold: 680px;
@on-phone: 820px;
@on-laptop: 990px;
@on-desktop: 1200px;
@on_modal_threshold: 680px;
@on_phone: 820px;
@on_laptop: 990px;
@on_desktop: 1200px;
// container
@container-width: 1200px;
@width_container: 1200px;
// post
@post-max-width: 980px;
@width_post_max: 980px;
// 侧边栏宽度
@side-width: 250px;
@width_sidebar: 250px;
// 搜索框的宽度，建议和侧边栏宽度保持一致
@search-width: @side-width;
@width_searchbar: @width_sidebar;
// 一个cell的高度
@item-height: 36px;
@height_cell: 36px;
```
@ -432,10 +432,10 @@ mathjax: true
```yaml
// 导航栏高度
@header-height: 54px;
@header-logo-font-size: 1.3em;
@header-switcher-font-size: 1.3em;
@header-font-size: 1em;
@height_navbar: 54px;
@fontsize_logo: 1.3em;
@fontsize_header_switcher: 1.3em;
@fontsize_header: 1em;
```
@ -454,9 +454,9 @@ mathjax: true
```yaml
// 0px: 极端，2px：硬朗，4px：常规，8px：圆润，16px：温柔
@border-radius: 8px; // 圆角半径，可以根据心情随时调整风格
@border-left-radius: 4px; // 左边的竖线的宽度
@border-code-block: 4px; // 代码块的圆角及其滚动条的宽度
@border_radius: 8px; // 圆角半径，可以根据心情随时调整风格
@border_radius_left_line: 4px; // 左边的竖线的宽度
@border_radius_code_block: 4px; // 代码块的圆角及其滚动条的宽度
```
@ -466,30 +466,30 @@ mathjax: true
```yaml
// 背景色 ----------------
// 网页背景
@theme-bg-main: @theme-base-main;
@theme_bg_main: @theme_base_main;
// 导航栏背景
@theme-bg-nav-header: darken(@theme-base-main, 4%);
@theme_bg_navbar: darken(@theme_base_main, 4%);
// 卡片背景
@theme-bg-card: white;
@theme_bg_card: white;
// 卡片标题栏背景
@theme-bg-card-header: @theme-bg-nav-header;
@theme_bg_card_header: @theme_bg_navbar;
// 代码的背景色
@theme-bg-code: fade(@mac-maximize, 6%);
@theme_bg_code: fade(@color_mac_maximize, 6%);
// 代码块的背景色
@theme-bg-code-block: @theme-bg-code;
@theme_bg_code_block: @theme_bg_code;
// 引用的颜色以及分类、归档的 hover 时颜色
@theme-bg-quote: @theme-base-tint;
@theme_bg_quote: @theme_base_tint;
// 文字颜色 ----------------
// 标题文字颜色（h1/h2）
@theme-text-header: @theme-base-tint;
@theme_text_header: @theme_base_tint;
// 链接颜色
@theme-text-link: @ax-blue;
@theme_text_link: @color_ax_blue;
// 链接高亮颜色
@theme-text-highlight: @theme-base-tint;
@theme_text_highlight: @theme_base_tint;
// 在主题色中显示的文本（一般为白或深灰）
@theme-text-in-header: @dark;
@theme_text_in_header: @dark;
// 正文文字颜色
@theme-text-main: @dark;
@theme_text_main: @dark;
```
对应的效果如图所示：
@ -502,9 +502,9 @@ mathjax: true
```yaml
// 卡片正常状态的阴影
@box-shadow-card-normal: @base-box-shadow-1, @base-box-shadow-2;
@boxshadow_card_normal: @boxshadow_base_1, @boxshadow_base_2;
// 卡片漂浮起来时的阴影
@box-shadow-card-raised: @base-box-shadow-2, @base-box-shadow-4, @base-box-shadow-8, @base-box-shadow-16;
@boxshadow_card_raised: @boxshadow_base_2, @boxshadow_base_4, @boxshadow_base_8, @boxshadow_base_16;
```

14
source/less/_archive.less
Unescape View File

@ -3,7 +3,7 @@
.archive {
position: relative;
.archive-year {
font-size: @base-font-size;
font-size: @fontsize_base;
margin-top: 4em;
margin-bottom: 1em;
&:first-child{
@ -14,7 +14,7 @@
margin-top: 1em;
}
a {
color: @theme-text-main;
color: @theme_text_main;
text-decoration: none;
}
}
@ -28,19 +28,19 @@
text-decoration: none;
}
time {
color: @theme-text-main;
color: @theme_text_main;
flex: none;
font-size: @small-font-size;
font-size: @fontsize_small;
padding: .5em .5em .5em 3em;
@media (max-width: @on-phone) {
@media (max-width: @on_phone) {
padding: .5em .5em .5em 0;
}
}
.title {
flex: auto;
padding: .5em;
font-size: @small-font-size;
color: fade(@theme-text-main,80%);
font-size: @fontsize_small;
color: fade(@theme_text_main,80%);
}
}
}

148
source/less/_article.less
Unescape View File

@ -1,7 +1,7 @@
.article {
color: @theme-text-main;
font-size: @base-font-size;
line-height: @base-line-height;
color: @theme_text_main;
font-size: @fontsize_base;
line-height: @lineheight_base;
word-break: break-all;
word-wrap: break-word;
em {
@ -22,7 +22,7 @@
margin: 0 auto;
background: white;
.enable-trans();
@media (max-width: @on-phone) {
@media (max-width: @on_phone) {
box-shadow: none;
}
}
@ -52,14 +52,14 @@
margin-bottom: 1em;
text-align: justify;
strong{
color: @theme-text-main;
color: @theme_text_main;
padding-left: 2px;
padding-right: 2px;
}
}
ul,
ol {
font-size: @base-font-size * .95;
font-size: @fontsize_base * .95;
list-style: initial;
padding-left: 10px;
margin-left: 10px;
@ -80,14 +80,14 @@
&:before{
display: none;
}
color: @theme-text-link;
color: @theme_text_link;
.enable-trans();
&:hover {
color: @theme-text-highlight;
color: @theme_text_highlight;
text-decoration: underline;
}
&:active {
color: darken(@theme-text-highlight, 25%);
color: darken(@theme_text_highlight, 25%);
}
}
h1,
@ -109,7 +109,7 @@
}
}
h1, h2 {
color: @theme-text-header;
color: @theme_text_header;
margin-top: 2em;
}
h3, h4, h5, h6 {
@ -119,29 +119,29 @@
}
}
h1 {
font-size: @font-size-h1;
font-size: @fontsize_h1;
}
h2 {
font-size: @font-size-h2;
font-size: @fontsize_h2;
}
h3 {
font-size: @font-size-h3;
color: darken(@theme-text-main, 20%);
font-size: @fontsize_h3;
color: darken(@theme_text_main, 20%);
}
h4 {
font-weight: bold;
font-size: @font-size-h4;
font-size: @fontsize_h4;
}
h5 {
font-weight: bold;
color: @theme-text-main;
font-size: @font-size-h5;
color: @theme_text_main;
font-size: @fontsize_h5;
}
h6 {
color: fade(@theme-text-main, 75%);
font-size: @font-size-h6;
color: fade(@theme_text_main, 75%);
font-size: @fontsize_h6;
}
figure {
@ -157,21 +157,21 @@
text-align: left;
word-wrap: normal;
margin: 0;
font-size: @small-font-size;
line-height: @small-font-size * 1.5;
font-size: @fontsize_small;
line-height: @fontsize_small * 1.5;
}
position: relative;
width: 100%;
font-size: @small-font-size;
background: fade(@theme-bg-quote, 10%);
font-size: @fontsize_small;
background: fade(@theme_bg_quote, 10%);
margin: 1em 0;
padding: @gap;
border-left: @border-left-radius solid @theme-bg-quote;
// border-radius: @border-code-block;
border-left: @border_radius_left_line solid @theme_bg_quote;
// border-radius: @border_radius_code_block;
.enable-trans();
// &:hover{
// border-left: @border-radius solid @theme-bg-quote;
// border-radius: @border-radius;
// border-left: @border_radius solid @theme_bg_quote;
// border-radius: @border_radius;
// }
footer {
strong {
@ -185,7 +185,7 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: @fontfamily_code;
color: fade(@theme-text-main, 90%);
color: fade(@theme_text_main, 90%);
}
code {
font-family: @fontfamily_code;
@ -193,12 +193,12 @@
margin: 0px 2px;
vertical-align: center;
border-radius: 2px;
border: 1px solid fade(@theme-bg-code, 30%);
font-size: @base-font-size * .8;
border: 1px solid fade(@theme_bg_code, 30%);
font-size: @fontsize_base * .8;
background: fade(@theme-bg-code, 10%);
@media(max-width: @on-phone){
font-size: @base-font-size * .8 * .95;
background: fade(@theme_bg_code, 10%);
@media(max-width: @on_phone){
font-size: @fontsize_base * .8 * .95;
}
}
.readmore {
@ -212,16 +212,16 @@
display: inline-block;
vertical-align: middle;
line-height: 2rem;
background-color: fade(@theme-bg-nav-header, 90%);
background-color: fade(@theme_bg_navbar, 90%);
padding: .2em 2.4em;
color: @theme-text-in-header;
border-radius: @border-radius/2;
color: @theme_text_in_header;
border-radius: @border_radius/2;
.enable-trans();
&:hover {
background: darken(@theme-bg-nav-header, 10%);
background: darken(@theme_bg_navbar, 10%);
}
&:active {
// background: darken(@theme-bg-nav-header, 20%);
// background: darken(@theme_bg_navbar, 20%);
}
}
@ -230,10 +230,10 @@
position: relative;
padding-top: @gap/2;
padding-bottom: @gap/2;
font-size: @small-font-size;
line-height: @base-line-height;
font-size: @fontsize_small;
line-height: @lineheight_base;
margin-top: @gap;
background: darken(fade(@theme-bg-main, 50%), 5%);
background: darken(fade(@theme_bg_main, 50%), 5%);
&.article-tags {
background: transparent;
}
@ -247,9 +247,9 @@
// margin-left: @gap/2;
// }
.enable-trans();
color: @grey-color;
color: @color_grey;
&:hover {
color: @theme-text-highlight;
color: @theme_text_highlight;
background: transparent;
}
&::before {
@ -272,10 +272,10 @@
// border-bottom-width: 2px;
}
}
@media (max-width: @on-phone) {
@media (max-width: @on_phone) {
ul,
ol {
font-size: @base-font-size * .95;
font-size: @fontsize_base * .95;
}
figure {
font-size: 13px;
@ -290,12 +290,12 @@
section{
width: 100%;
padding: @gap/2;
color: fade(@theme-text-main, 70%);
background-color: fade(@theme-bg-main, 50%);
border-radius: @border-radius;
color: fade(@theme_text_main, 70%);
background-color: fade(@theme_bg_main, 50%);
border-radius: @border_radius;
p{
font-size: @base-font-size;
line-height: @base-line-height;
font-size: @fontsize_base;
line-height: @lineheight_base;
margin: 0;
}
h4{
@ -304,7 +304,7 @@
position: relative;
font-family: @fontfamily_base;
font-weight: bold;
font-size: @font-size-h4;
font-size: @fontsize_h4;
}
h6{
margin: 0;
@ -312,7 +312,7 @@
.enable-trans();
// border: 1px solid transparent;
// &:hover{
// border: 1px solid fade(@theme-bg-quote, 30%);
// border: 1px solid fade(@theme_bg_quote, 30%);
// }
.tags{
background: transparent;
@ -329,15 +329,15 @@
text-align: left;
margin-left: 0;
margin-right: @gap/2;
border-top-right-radius: @border-radius;
border-bottom-right-radius: @border-radius;
border-top-right-radius: @border_radius;
border-bottom-right-radius: @border_radius;
}
.next{
text-align: right;
margin-left: @gap/2;
margin-right: 0;
border-top-left-radius: @border-radius;
border-bottom-left-radius: @border-radius;
border-top-left-radius: @border_radius;
border-bottom-left-radius: @border_radius;
}
}
@ -384,11 +384,11 @@
margin-bottom: 1.2em;
overflow: auto;
display: block;
background: @theme-bg-code-block;
font-size: @small-font-size * .95;
background: @theme_bg_code_block;
font-size: @fontsize_small * .95;
font-family:@fontfamily_code;
line-height: @base-line-height;
border-radius: @border-code-block;
line-height: @lineheight_base;
border-radius: @border_radius_code_block;
.enable-trans();
table{
td,th{
@ -401,9 +401,9 @@
text-align: right;
border-width: 0;
margin-left: 0;
background-color: darken(@theme-bg-code-block, 3%);
background-color: darken(@theme_bg_code_block, 3%);
pre{
color: fade(@theme-text-main, 35%);
color: fade(@theme_text_main, 35%);
}
&:hover{
@ -412,12 +412,12 @@
.code{
padding: @gap;
vertical-align: top;
border: 0px solid darken(@theme-bg-main, 2%);
border: 0px solid darken(@theme_bg_main, 2%);
}
&::-webkit-scrollbar {
height: @border-code-block;
width: @border-code-block;
height: @border_radius_code_block;
width: @border_radius_code_block;
}
// /* Track */
@ -429,29 +429,29 @@
/* Handle */
&::-webkit-scrollbar-thumb {
background: darken(@theme-bg-code-block, 5%);
background: darken(@theme_bg_code_block, 5%);
cursor: pointer;
border-radius: @border-code-block;
border-radius: @border_radius_code_block;
.enable-trans();
&:hover {
background: darken(@theme-bg-code-block, 12%);
background: darken(@theme_bg_code_block, 12%);
}
}
}
.article {
@media (max-width: @on-phone) {
@media (max-width: @on_phone) {
.highlight {
font-size: @small-font-size * .95 * .95;
font-size: @fontsize_small * .95 * .95;
}
}
}
.art-item-footer{
height: 40px;
line-height: @base-line-height;
font-size: @small-font-size;
line-height: @lineheight_base;
font-size: @fontsize_small;
.art-item-left,.art-item-right{
width:50%;
height: 40px;
@ -468,7 +468,7 @@
float: right;
text-align: right;
}
@media (max-width: @on-phone) {
font-size: @small-font-size * .95 * .95;
@media (max-width: @on_phone) {
font-size: @fontsize_small * .95 * .95;
}
}

56
source/less/_base.less
Unescape View File

@ -13,11 +13,11 @@
html {
width: 100%;
height: 100%;
padding-top: @header-height;
padding-top: @height_navbar;
font-family: @fontfamily_base;
font-size: @base-font-size;
font-size: @fontsize_base;
line-height: 1.5rem;
color: @theme-text-main;
color: @theme_text_main;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
@ -25,10 +25,10 @@ html {
}
body {
background-color: @theme-bg-main;
background-color: @theme_bg_main;
&.modal-active {
overflow: hidden;
@media (max-width: @modal-threshold) {
@media (max-width: @on_modal_threshold) {
position: fixed;
top: 0;
right: 0;
@ -48,15 +48,15 @@ body {
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1);
}
.z-depth-nav-raised {
box-shadow: @box-shadow-card-raised;
box-shadow: @boxshadow_card_raised;
}
.z-depth-main {
box-shadow: @box-shadow-card-normal;
box-shadow: @boxshadow_card_normal;
}
.z-depth-main-raised {
box-shadow: @box-shadow-card-raised;
box-shadow: @boxshadow_card_raised;
}
.z-depth-0 {
@ -101,12 +101,12 @@ body {
}
::-moz-selection {
background: fade(lighten(@theme-text-link, 5%), 25%);
background: fade(lighten(@theme_text_link, 5%), 25%);
// color: @black;
}
::selection {
background: fade(lighten(@theme-text-link, 5%), 25%);
background: fade(lighten(@theme_text_link, 5%), 25%);
// color: @black;
}
// transition
@ -139,27 +139,27 @@ h6 {
}
h1 {
font-size: @font-size-h1;
font-size: @fontsize_h1;
}
h2 {
font-size: @font-size-h2;
font-size: @fontsize_h2;
}
h3 {
font-size: @font-size-h3;
font-size: @fontsize_h3;
}
h4 {
font-size: @font-size-h4;
font-size: @fontsize_h4;
}
h5 {
font-size: @font-size-h5;
font-size: @fontsize_h5;
}
h6 {
font-size: @font-size-h6;
font-size: @fontsize_h6;
}
a {
@ -201,7 +201,7 @@ img {
}
.container.clearfix{
display: flex;
@media(max-width: @on-phone) {
@media(max-width: @on_phone) {
display: inherit;
}
}
@ -284,18 +284,18 @@ li {
display: inline-block;
padding: 0 8px;
color: @black;
border-left: @border-left-radius solid transparent;
border-left: @border_radius_left_line solid transparent;
background: transparent;
// border-radius: @border-code-block;
// border-radius: @border_radius_code_block;
.enable-trans();
&:hover {
border-left: @border-left-radius solid @theme-bg-quote;
border-left: @border_radius_left_line solid @theme_bg_quote;
padding: 8px;
background: fade(@theme-bg-quote, 10%);
background: fade(@theme_bg_quote, 10%);
}
&:active {
// border-radius: @border-radius;
border-left: max(@border-radius, @border-left-radius) solid @theme-bg-quote;
// border-radius: @border_radius;
border-left: max(@border_radius, @border_radius_left_line) solid @theme_bg_quote;
}
}
@ -319,7 +319,7 @@ ul.h-list {
#loading-bar-wrapper {
position: fixed;
top: @header-height - 8;
top: @height_navbar - 8;
top: 0;
left: 0;
width: 100%;
@ -331,15 +331,15 @@ ul.h-list {
position: fixed;
width: 0;
height: 8px;
height: @header-height;
background-color: fade(@theme-text-in-header, 20%);
height: @height_navbar;
background-color: fade(@theme_text_in_header, 20%);
.enable-trans();
}
.container {
position: relative;
width: 100%;
max-width: @container-width;
max-width: @width_container;
margin: 0 auto;
}
@ -353,7 +353,7 @@ ul.h-list {
.l_body {
position: relative;
padding: 2 * @gap 0 @gap;
@media(max-width: @on-phone) {
@media(max-width: @on_phone) {
// padding: @gap @gap/2 @gap/2;
border-radius: 0;
}

155
source/less/_defines.less
Unescape View File

@ -2,52 +2,52 @@
// 这里面的东西只有这一页用到
// 颜色
// Material color scheme
@material-red: #f44336;
@material-pink: #E91E63;
@material-purple: #9c27b0;
@material-deep-purple: #673ab7;
@material-indigo: #3f51b5;
@material-light-blue: #4BA7EE;
@material-blue: #2196f3;
@material-deep-blue: #3367d6;
@material-teal: #009688;
@material-green: #4caf50;
@material-light-green: #8bc34a;
@material-orange: #ff9800;
@material-deep-orange: #ff5722;
@material-brown: #795548;
@material-blue-grey: #607d8b;
@material-grey: #9e9e9e;
@material-light-grey:#e0e0e0;
@material-yellow: #FCEC60;
@material-amber: #F6C344;
@color_md_red: #f44336;
@color_md_pink: #E91E63;
@color_md_purple: #9c27b0;
@color_md_deep_purple: #673ab7;
@color_md_indigo: #3f51b5;
@color_md_light_blue: #4BA7EE;
@color_md_blue: #2196f3;
@color_md_deep_blue: #3367d6;
@color_md_teal: #009688;
@color_md_green: #4caf50;
@color_md_light_green: #8bc34a;
@color_md_orange: #ff9800;
@color_md_deep_orange: #ff5722;
@color_md_brown: #795548;
@color_md_blue_grey: #607d8b;
@color_md_grey: #9e9e9e;
@color_md_light_grey:#e0e0e0;
@color_md_yellow: #FCEC60;
@color_md_amber: #F6C344;
// 基本不变的黑白灰
@black: #444444;
@grey-color: #828282;
@color_grey: #828282;
@white: #ffffff;
@light: #eeeeee;
@dark: #666666;
// mac
@mac-maximize: #3DC550;
@mac-minimize: #FFBD2B;
@mac-close: #FE5F58;
@color_mac_maximize: #3DC550;
@color_mac_minimize: #FFBD2B;
@color_mac_close: #FE5F58;
// xx
@xiaowenwen-green: #5CC281;
@vue: #4fc08d;
@color_light_green: #5CC281;
@color_vue: #4fc08d;
// ax
@ax-light-pink: #E7BED0;
@ax-light-red: #FF8485;
@ax-red: #F24E32;
@ax-blue: #52A1F8;
@color_ax_light_pink: #E7BED0;
@color_ax_light_red: #FF8485;
@color_ax_red: #F24E32;
@color_ax_blue: #52A1F8;
// 主题色
@theme-base-main: #EFEFEF;
@theme-base-tint: @ax-light-red;
@theme_base_main: #EFEFEF;
@theme_base_tint: @color_ax_light_red;
// 阴影
@base-box-shadow-1: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
@base-box-shadow-2: 0 2px 4px 0px rgba(0, 0, 0, 0.1);
@base-box-shadow-4: 0 4px 8px 0px rgba(0, 0, 0, 0.1);
@base-box-shadow-8: 0 8px 16px 0px rgba(0, 0, 0, 0.1);
@base-box-shadow-16: 0 16px 32px 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_4: 0 4px 8px 0px rgba(0, 0, 0, 0.1);
@boxshadow_base_8: 0 8px 16px 0px rgba(0, 0, 0, 0.1);
@boxshadow_base_16: 0 16px 32px 0px rgba(0, 0, 0, 0.1);
// end: 预定义 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@ -64,41 +64,42 @@
// start: 字号 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// base
@base-font-size: 16px;
@small-font-size: @base-font-size * 0.875;
@base-line-height: 1.7;
@fontsize_base: 16px;
@fontsize_small: @fontsize_base * 0.875;
@lineheight_base: 1.7;
// title
@font-size-h1: @base-font-size * 1.5;
@font-size-h2: @base-font-size * 1.4;
@font-size-h3: @base-font-size * 1.2;
@font-size-h4: @base-font-size * 1.1;
@font-size-h5: @base-font-size * 1;
@font-size-h6: @small-font-size;
@fontsize_h1: @fontsize_base * 1.5;
@fontsize_h2: @fontsize_base * 1.4;
@fontsize_h3: @fontsize_base * 1.2;
@fontsize_h4: @fontsize_base * 1.1;
@fontsize_h5: @fontsize_base * 1;
@fontsize_h6: @fontsize_small;
// article
@article-title-size: @font-size-h1 * 1.2;
@article-title-size-phone: @font-size-h2;
@fontsize_article_title: @fontsize_h1 * 1.2;
@fontsize_article_title_phone: @fontsize_h2;
// end: 字号 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
// start: 布局尺寸 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
@modal-threshold: 680px;
@on-phone: 820px;
@on-laptop: 990px;
@on-desktop: 1200px;
@on_modal_threshold: 680px;
@on_phone: 820px;
@on_laptop: 990px;
@on_desktop: 1200px;
// container
@container-width: 1200px;
@width_container: 1200px;
// post
@post-max-width: 980px;
@width_post_max: 980px;
// 侧边栏宽度
@side-width: 250px;
@width_sidebar: 250px;
// 搜索框的宽度，建议和侧边栏宽度保持一致
@search-width: @side-width;
@width_searchbar: @width_sidebar;
// 一个cell的高度
@item-height: 36px;
@height_cell: 36px;
// end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@ -106,10 +107,10 @@
// start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 导航栏高度
@header-height: 54px;
@header-logo-font-size: 1.3em;
@header-switcher-font-size: 1.3em;
@header-font-size: 1em;
@height_navbar: 54px;
@fontsize_logo: 1.3em;
@fontsize_header_switcher: 1.3em;
@fontsize_header: 1em;
// end: 导航栏 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@ -124,9 +125,9 @@
// start: 圆角 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 0px: 极端，2px：硬朗，4px：常规，8px：圆润，16px：温柔
@border-radius: 8px; // 圆角半径，可以根据心情随时调整风格
@border-left-radius: 4px; // 左边的竖线的宽度
@border-code-block: 4px; // 代码块的圆角及其滚动条的宽度
@border_radius: 8px; // 圆角半径，可以根据心情随时调整风格
@border_radius_left_line: 4px; // 左边的竖线的宽度
@border_radius_code_block: 4px; // 代码块的圆角及其滚动条的宽度
// end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@ -135,30 +136,30 @@
// start: 自定义主题色 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 背景色 ----------------
// 网页背景
@theme-bg-main: @theme-base-main;
@theme_bg_main: @theme_base_main;
// 导航栏背景
@theme-bg-nav-header: darken(@theme-base-main, 4%);
@theme_bg_navbar: darken(@theme_base_main, 4%);
// 卡片背景
@theme-bg-card: white;
@theme_bg_card: white;
// 卡片标题栏背景
@theme-bg-card-header: @theme-bg-nav-header;
@theme_bg_card_header: @theme_bg_navbar;
// 代码的背景色
@theme-bg-code: fade(@mac-maximize, 6%);
@theme_bg_code: fade(@color_mac_maximize, 6%);
// 代码块的背景色
@theme-bg-code-block: @theme-bg-code;
@theme_bg_code_block: @theme_bg_code;
// 引用的颜色以及分类、归档的 hover 时颜色
@theme-bg-quote: @theme-base-tint;
@theme_bg_quote: @theme_base_tint;
// 文字颜色 ----------------
// 标题文字颜色（h1/h2）
@theme-text-header: @theme-base-tint;
@theme_text_header: @theme_base_tint;
// 链接颜色
@theme-text-link: @ax-blue;
@theme_text_link: @color_ax_blue;
// 链接高亮颜色
@theme-text-highlight: @theme-base-tint;
@theme_text_highlight: @theme_base_tint;
// 在主题色中显示的文本（一般为白或深灰）
@theme-text-in-header: @dark;
@theme_text_in_header: @dark;
// 正文文字颜色
@theme-text-main: @dark;
@theme_text_main: @dark;
// end: 自定义主题色 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
@ -166,7 +167,7 @@
// start: 阴影 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 卡片正常状态的阴影
@box-shadow-card-normal: @base-box-shadow-1, @base-box-shadow-2;
@boxshadow_card_normal: @boxshadow_base_1, @boxshadow_base_2;
// 卡片漂浮起来时的阴影
@box-shadow-card-raised: @base-box-shadow-2, @base-box-shadow-4, @base-box-shadow-8, @base-box-shadow-16;
@boxshadow_card_raised: @boxshadow_base_2, @boxshadow_base_4, @boxshadow_base_8, @boxshadow_base_16;
// end: 阴影 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

16
source/less/_footer.less
Unescape View File

@ -2,18 +2,18 @@
position: relative;
padding: 40px 10px 120px 10px;
width: 100%;
color: fade(@theme-text-main, 50%);
color: fade(@theme_text_main, 50%);
margin: 0px auto;
font-size: @small-font-size;
font-size: @fontsize_small;
overflow: hidden;
text-align: center;
font-family: @fontfamily_base;
.licenses {
color: fade(@theme-text-main, 50%);
color: fade(@theme_text_main, 50%);
text-decoration: underline;
}
.codename {
color: @vue;
color: @color_vue;
text-decoration: underline;
}
.social-wrapper {
@ -22,10 +22,10 @@
flex-wrap: wrap;
}
a {
color: fade(@theme-text-main, 70%);
color: fade(@theme_text_main, 70%);
.enable-trans();
&:hover {
color: @theme-text-highlight;
color: @theme_text_highlight;
}
&.social {
position: relative;
@ -39,8 +39,8 @@
margin: 4px;
border-radius: 100px;
&:hover {
background: fade(@theme-bg-quote, 10%);
color: @theme-bg-quote;
background: fade(@theme_bg_quote, 10%);
color: @theme_bg_quote;
}
}
}

140
source/less/_header.less
Unescape View File

@ -4,9 +4,9 @@
top:0;
left:0;
width:100%;
font-size: @base-font-size;
line-height: @header-height;
height: @header-height;
font-size: @fontsize_base;
line-height: @height_navbar;
height: @height_navbar;
overflow: hidden;
font-family: @fontfamily_base;
.wrapper{
@ -14,25 +14,25 @@
.enable-trans();
}
.wrapper.sub{
transform: translateY(-@header-height);
transform: translateY(-@height_navbar);
.logo{
// padding-left: 0;
@media(max-width: @on-phone){
@media(max-width: @on_phone){
padding-left: @gap;
padding-right: @gap/2;
font-size: @base-font-size;
font-size: @fontsize_base;
}
}
}
.nav--main,.nav-sub{
height: @header-height;
height: @height_navbar;
}
background: @theme-bg-nav-header;
background: @theme_bg_navbar;
&, a{
.txt-ellipsis;
height: @header-height;
line-height: @header-height;
color: @theme-text-in-header;
height: @height_navbar;
line-height: @height_navbar;
color: @theme_text_in_header;
}
&:extend(.z-depth-nav);
.enable-trans();
@ -44,36 +44,36 @@
}
.logo {
padding: 0 @gap;
font-size: @base-font-size * 1.2;
font-size: @fontsize_base * 1.2;
font-family: @fontfamily_logo;
@media(max-width: @on-phone){
@media(max-width: @on_phone){
flex: auto;
}
}
.menu{
position:relative;
flex: 1 0 auto;
height: @header-height;
height: @height_navbar;
.enable-trans();
margin:0 @gap;
ul > li > a{
.enable-trans();
display: block;
font-size: @base-font-size * .95;
color: fade(@theme-text-in-header,60%);
font-size: @fontsize_base * .95;
color: fade(@theme_text_in_header,60%);
padding: 0 8px;
&:hover,&.active{
color: @theme-text-in-header;
color: @theme_text_in_header;
}
}
@media(max-width: @on-phone){
@media(max-width: @on_phone){
display:none;
}
.underline{
.enable-trans();
position: absolute;
background: @theme-text-in-header;
background: @theme_text_in_header;
left: 0;
bottom: 0;
width: 0;
@ -86,36 +86,36 @@
}
.switcher{
display: none;
font-size: @base-font-size;
line-height: @header-height;
font-size: @fontsize_base;
line-height: @height_navbar;
& > li{
height: @header-height - @gap;
height: @height_navbar - @gap;
.enable-trans();
margin: 0;
@media(max-width: @on-phone){
width: @header-height - 1.5*@gap;
height: @header-height - 1.5*@gap;
@media(max-width: @on_phone){
width: @height_navbar - 1.5*@gap;
height: @height_navbar - 1.5*@gap;
}
a{
display: flex;
justify-content: center;
align-items: center;
width: @header-height - @gap;
height: @header-height - @gap;
width: @height_navbar - @gap;
height: @height_navbar - @gap;
border-radius: 100px;
.enable-trans();
&:hover {
background: darken(@theme-bg-nav-header, 10%);
// color: @theme-bg-quote;
background: darken(@theme_bg_navbar, 10%);
// color: @theme_bg_quote;
}
@media(max-width: @on-phone){
width: @header-height - 1.5*@gap;
height: @header-height - 1.5*@gap;
@media(max-width: @on_phone){
width: @height_navbar - 1.5*@gap;
height: @height_navbar - 1.5*@gap;
}
}
}
@media(max-width: @on-phone){
@media(max-width: @on_phone){
display: flex;
padding-right: @gap;
}
@ -124,7 +124,7 @@
display: flex;
}
@media (max-width: @on-phone) {
@media (max-width: @on_phone) {
.m_search{
width:0;
overflow: hidden;
@ -144,9 +144,9 @@
}
.m_search {
position: relative;
height: @header-height - @gap;
width: @side-width;
line-height: @header-height - @gap;
height: @height_navbar - @gap;
width: @width_sidebar;
line-height: @height_navbar - @gap;
margin-top: @gap/2;
margin-bottom: @gap/2;
vertical-align: middle;
@ -161,46 +161,46 @@
.icon {
position: absolute;
display:block;
height: @header-height - @gap;
width: @header-height - @gap;
line-height: @header-height - @gap;
height: @height_navbar - @gap;
width: @height_navbar - @gap;
line-height: @height_navbar - @gap;
top: 0;
left: @gap/2;
font-size: @small-font-size;
font-size: @fontsize_small;
}
.input {
display:block;
font-size: @small-font-size;
line-height: @header-height - @gap;
font-size: @fontsize_small;
line-height: @height_navbar - @gap;
margin: 0;
width: 100%;
color: fade(@theme-text-in-header, 60%);
padding-left: @base-font-size + @gap - 2px;
@media(max-width: @on-phone){
padding-left: @base-font-size + @gap - 2px;
color: fade(@theme_text_in_header, 60%);
padding-left: @fontsize_base + @gap - 2px;
@media(max-width: @on_phone){
padding-left: @fontsize_base + @gap - 2px;
}
height: @header-height - @gap;
line-height: @header-height - @gap;
height: @height_navbar - @gap;
line-height: @height_navbar - @gap;
font-family: @fontfamily_base;
border: none;
border-radius: @border-radius;
background: fade(@theme-text-in-header,15%);
border-radius: @border_radius;
background: fade(@theme_text_in_header,15%);
box-sizing: border-box;
-webkit-appearance: none;
box-shadow: none;
border: 1px dashed transparent;
.enable-trans();
~ .icon{
color: fade(@theme-text-in-header, 60%);
color: fade(@theme_text_in_header, 60%);
}
.set-placeholder({color: fade(@theme-text-in-header, 60%)});
.set-placeholder({color: fade(@theme_text_in_header, 60%)});
&:hover{
border: 1px dashed fade(@theme-text-in-header, 60%);
border: 1px dashed fade(@theme_text_in_header, 60%);
}
&:focus {
color:@black;
border: 1px solid fade(@theme-text-in-header, 60%);
border: 1px solid fade(@theme_text_in_header, 60%);
.set-placeholder({color: @black});
}
&:focus ~ .icon{
@ -212,38 +212,38 @@
.menu-phone{
.header{
border-top-left-radius: @border-radius;
border-top-right-radius: @border-radius;
background-color: fade(@theme-bg-nav-header,90%);
color: @theme-text-in-header;
font-size: @base-font-size;
border-top-left-radius: @border_radius;
border-top-right-radius: @border_radius;
background-color: fade(@theme_bg_navbar,90%);
color: @theme_text_in_header;
font-size: @fontsize_base;
line-height: 1.8em;
padding: 8px @gap;
}
width: @side-width;
width: @width_sidebar;
position: fixed;
top: @header-height + @gap;
top: @height_navbar + @gap;
right: 0;
width: @side-width;
width: @width_sidebar;
z-index:9999 + 1;
line-height: 2 * @gap;
background: white;
border-right: 0;
&:extend(.z-depth-main-raised);
border-radius: @border-radius;
transform: translate3d(@side-width, -0, 0);
border-radius: @border_radius;
transform: translate3d(@width_sidebar, -0, 0);
.enable-trans();
&:hover {
&:extend(.z-depth-main-raised);
}
&:active {
box-shadow: @box-shadow-card-normal;
box-shadow: @boxshadow_card_normal;
}
nav {
padding: @gap/2 0px;
.nav {
height: @item-height;
line-height: @item-height;
height: @height_cell;
line-height: @height_cell;
position: relative;
display: block;
color: @black;
@ -251,8 +251,8 @@
padding: 2px 20px;
border-left: 2px solid transparent;
&:hover{
border-left: 4px solid @theme-bg-quote;
background: fade(@theme-bg-quote, 10%);
border-left: 4px solid @theme_bg_quote;
background: fade(@theme_bg_quote, 10%);
}
}
}

134
source/less/_main.less
Unescape View File

@ -1,5 +1,5 @@
.l_main {
width: ~"calc(100% - 1 * @{side-width})";
width: ~"calc(100% - 1 * @{width_sidebar})";
padding-right: @gap;
float: left;
.post-list {
@ -8,29 +8,29 @@
// columns: 400px;
column-gap: 0;
margin: -@gap /2;
@media(max-width: @on-phone) {
@media(max-width: @on_phone) {
margin: 0;
}
}
#comments {
position: relative;
// padding-top: 1.5*@gap;
@media(max-width: @on-phone) {
@media(max-width: @on_phone) {
// padding-top: @gap;
}
#valine_container{
p{
line-height: @base-line-height;
line-height: @lineheight_base;
}
.info{
display: none;
}
.vwrap{
border-radius: @border-radius;
border-radius: @border_radius;
border-style: dashed;
.enable-trans();
&:hover{
border: 1px dashed fade(@theme-bg-quote, 100%);
border: 1px dashed fade(@theme_bg_quote, 100%);
}
.vedit .vctrl span {
padding: 0;
@ -41,58 +41,60 @@
border: none;
padding-left: 2.4em;
padding-right: 2.4em;
background-color: fade(@theme-bg-nav-header, 90%);
color: @theme-text-in-header;
border-radius: @border-radius/2;
background-color: fade(@theme_bg_navbar, 90%);
color: @theme_text_in_header;
border-radius: @border_radius/2;
.enable-trans();
&:hover {
background: darken(@theme-bg-nav-header, 10%);
background: darken(@theme_bg_navbar, 10%);
}
&:active {
// background: lighten(@theme-bg-nav-header, 20%);
// background: lighten(@theme_bg_navbar, 20%);
}
}
blockquote{
padding: @gap;
border-left: @border-left-radius solid @theme-bg-quote;
// border-radius: @border-code-block;
border-left: @border_radius_left_line solid @theme_bg_quote;
// border-radius: @border_radius_code_block;
.enable-trans();
p{
text-align: left;
word-wrap: normal;
margin: 0;
font-size: @small-font-size;
line-height: @small-font-size * 1.5;
font-size: @fontsize_small;
line-height: @fontsize_small * 1.5;
}
}
a, .vemoji-btn, .vpreview-btn{
color: @theme-text-link;
color: @theme_text_link;
.enable-trans();
&:hover {
color: @theme-text-highlight;
color: @theme_text_highlight;
text-decoration: underline;
}
&:active {
color: darken(@theme-text-highlight, 25%);
color: darken(@theme_text_highlight, 25%);
}
}
.vhead{
span{
color: fade(@theme-text-main, 80%);
color: fade(@theme_text_main, 80%);
}
a{
color: @vue;
color: @color_vue;
}
}
.vmeta.vat{
color: @theme-text-link;
.enable-trans();
&:hover {
color: @theme-text-highlight;
text-decoration: underline;
}
&:active {
color: darken(@theme-text-highlight, 25%);
.vmeta{
.vat{
color: @theme_text_link;
.enable-trans();
&:hover {
color: @theme_text_highlight;
text-decoration: underline;
}
&:active {
color: darken(@theme_text_highlight, 25%);
}
}
}
}
@ -109,7 +111,7 @@
.meta {
margin-bottom: @gap;
.title {
font-size: @article-title-size-phone;
font-size: @fontsize_article_title_phone;
}
}
.full-width {
@ -122,8 +124,8 @@
.auto-padding {
padding-left: @gap;
padding-right: @gap;
border-bottom-left-radius: @border-radius;
border-bottom-right-radius: @border-radius;
border-bottom-left-radius: @border_radius;
border-bottom-right-radius: @border_radius;
}
img,
.highlight {
@ -131,7 +133,7 @@
// margin-left: -@gap;
// margin-right: -@gap;
// max-width: none;
// @media(max-width:@on-phone) {
// @media(max-width:@on_phone) {
// padding-left: @gap;
// padding-right: @gap;
// }
@ -141,7 +143,7 @@
margin-right: 0*@gap;
width:~"calc(100% - 0 * @{gap})";
}
@media(max-width:@on-phone) {
@media(max-width:@on_phone) {
.highlight {
margin-left: 0*@gap;
margin-right: 0*@gap;
@ -163,7 +165,7 @@
.tags {
margin-bottom: -1.5*@gap;
}
@media(max-width:@on-phone) {
@media(max-width:@on_phone) {
padding-left: 0;
padding-right: 0;
}
@ -173,58 +175,58 @@
margin: 0 auto;
padding: 2 * @gap 1.5*@gap;
//max-width: 768px;
background: @theme-bg-card;
border-radius: @border-radius;
background: @theme_bg_card;
border-radius: @border_radius;
h1{
font-weight: normal;
font-size: @article-title-size;
line-height: @base-line-height;
color: @theme-text-main;
font-size: @fontsize_article_title;
line-height: @lineheight_base;
color: @theme_text_main;
}
&:extend(.z-depth-main);
.enable-trans();
&:hover {
box-shadow: @box-shadow-card-raised;
box-shadow: @boxshadow_card_raised;
}
&:active {
box-shadow: @box-shadow-card-normal;
box-shadow: @boxshadow_card_normal;
}
@media(max-width: @on-phone) {
@media(max-width: @on_phone) {
border-radius: 0;
&:hover {
box-shadow: @box-shadow-card-normal;
box-shadow: @boxshadow_card_normal;
}
}
.meta {
margin-bottom: 2*@gap;
.title {
left: 0;
font-size: @article-title-size;
@media(max-width: @on-phone) {
font-size: @article-title-size-phone;
font-size: @fontsize_article_title;
@media(max-width: @on_phone) {
font-size: @fontsize_article_title_phone;
}
&:before {
// content: "#";
}
a {
display: inline;
line-height: @base-line-height;
line-height: @lineheight_base;
font-weight: normal;
color: @theme-text-main;
color: @theme_text_main;
text-decoration: none;
font-size: @article-title-size;
@media(max-width: @on-phone) {
font-size: @article-title-size-phone;
font-size: @fontsize_article_title;
@media(max-width: @on_phone) {
font-size: @fontsize_article_title_phone;
}
&:hover {
color: @theme-text-highlight;
color: @theme_text_highlight;
}
}
}
time,
.cats {
display: inline-block;
font-size: @small-font-size * .95;
font-size: @fontsize_small * .95;
}
.cats {
@ -235,24 +237,24 @@
content: '';
border-top: @border-width/2 solid transparent;
border-bottom: @border-width/2 solid transparent;
border-left: @border-width solid @theme-text-link;
border-left: @border-width solid @theme_text_link;
}
a {
font-weight: bold;
color: @theme-text-link;
color: @theme_text_link;
.enable-trans();
&:hover {
color: @theme-text-highlight;
color: @theme_text_highlight;
text-decoration: underline;
}
&:active {
color: darken(@theme-text-highlight, 25%);
color: darken(@theme_text_highlight, 25%);
}
}
}
time {
color: lighten(@grey-color, 20%);
color: lighten(@color_grey, 20%);
}
}
.full-width,.highlight{
@ -265,9 +267,9 @@
max-width: 100%;
}
}
@media(max-width:@on-phone) {
@media(max-width:@on_phone) {
padding-right: 0;
@media(max-width: @on-phone) {
@media(max-width: @on_phone) {
width: 100%;
}
.mobile-post();
@ -278,7 +280,7 @@
display: flex;
justify-content: space-between;
align-items: baseline;
color: fade(@theme-text-main, 50%);
color: fade(@theme_text_main, 50%);
margin: 0;
.prev{
text-align: left;
@ -294,14 +296,14 @@
margin: @gap;
}
section{
color: fade(@theme-text-main, 80%);
color: fade(@theme_text_main, 80%);
padding: @gap;
border-radius: @border-radius;
border-radius: @border_radius;
&:hover {
color: @theme-text-highlight;
color: @theme_text_highlight;
}
}
@media(max-width:@on-phone) {
@media(max-width:@on_phone) {
section{
border-radius: 0;
}

6
source/less/_normalize.less vendored
Unescape View File

@ -420,16 +420,16 @@ table {
border-collapse: collapse;
width: 100%;
th {
background-color: lighten(@theme-bg-main, 1%);
background-color: lighten(@theme_bg_main, 1%);
}
td,
th {
padding: 4px 8px;
border: 1px solid @theme-bg-main;
border: 1px solid @theme_bg_main;
}
tr {
// border-bottom: 2px solid #eee;
// background-color: @theme-bg-quote;
// background-color: @theme_bg_quote;
}
&>thead>th {
// border-bottom-width: 2px;

62
source/less/_search.less
Unescape View File

@ -8,7 +8,7 @@
padding: 60px 20px;
z-index: 999999;
@media (max-width: @modal-threshold) {
@media (max-width: @on_modal_threshold) {
padding: 0px;
}
.modal {
@ -22,8 +22,8 @@
background: #fff;
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
z-index: 3;
border-radius: @border-radius;
@media (max-width: @modal-threshold) {
border-radius: @border_radius;
@media (max-width: @on_modal_threshold) {
box-shadow: none;
max-width: none;
top: 0;
@ -46,12 +46,12 @@
.modal-header {
position: relative;
width: 100%;
height: @header-height;
background-color: @theme-bg-nav-header;
height: @height_navbar;
background-color: @theme_bg_navbar;
z-index: 3;
border-top-left-radius: @border-radius;
border-top-right-radius: @border-radius;
@media (max-width: @modal-threshold) {
border-top-left-radius: @border_radius;
border-top-right-radius: @border_radius;
@media (max-width: @on_modal_threshold) {
padding: 0px;
border-radius: 0;
}
@ -67,15 +67,15 @@
display: block;
position: absolute;
width: 50px + 5px;
height: @header-height;
height: @height_navbar;
top: 0;
right: 0;
color: @theme-text-in-header;
color: @theme_text_in_header;
cursor: pointer;
text-align: center;
line-height: @header-height;
line-height: @height_navbar;
vertical-align: middle;
font-size: @header-switcher-font-size;
font-size: @fontsize_header_switcher;
.enable-trans();
z-index: 2;
@ -110,11 +110,11 @@
#u-search-modal-input {
width: 100%;
padding: 0px 50px;
height: @header-height;
font-size: @base-font-size;
line-height: @base-line-height;
height: @height_navbar;
font-size: @fontsize_base;
line-height: @lineheight_base;
vertical-align: middle;
color: @theme-text-in-header;
color: @theme_text_in_header;
border: none;
background: transparent;
.enable-trans();
@ -123,8 +123,8 @@
box-shadow: none;
&:focus {
border-top-left-radius: @border-radius;
border-top-right-radius: @border-radius;
border-top-left-radius: @border_radius;
border-top-right-radius: @border_radius;
}
}
}
@ -137,10 +137,10 @@
background: transparent;
border: none;
width: 50px;
height: @header-height;
height: @height_navbar;
vertical-align: middle;
font-size: @header-switcher-font-size;
color: @theme-text-in-header;
font-size: @fontsize_header_switcher;
color: @theme_text_in_header;
z-index: 2;
}
}
@ -206,7 +206,7 @@
font-size: 13px;
font-weight: 500;
line-height: 50px;
color: @grey-color;
color: @color_grey;
cursor: pointer;
z-index: 1;
@ -231,7 +231,7 @@
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
@media (max-width: @modal-threshold) {
@media (max-width: @on_modal_threshold) {
padding: 60px 20px 80px 20px;
}
.modal-results {
@ -255,18 +255,18 @@
// color: @black;
}
.title {
color: @theme-text-highlight;
color: @theme_text_highlight;
}
}
.title {
display: inline-block;
max-width: 100%;
color: lighten(@theme-text-main, 10%);
font-size: @base-font-size;
color: lighten(@theme_text_main, 10%);
font-size: @fontsize_base;
font-weight: bold;
padding: 1px;
margin-bottom: 2px;
line-height: @base-line-height;
line-height: @lineheight_base;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
@ -276,9 +276,9 @@
white-space: pre-wrap;
overflow: scroll;
text-overflow: ellipsis;
font-size: @small-font-size;
line-height: @base-line-height;
color: lighten(@theme-text-main, 30%);
font-size: @fontsize_small;
line-height: @lineheight_base;
color: lighten(@theme_text_main, 30%);
.enable-trans();
em {
// font-weight: bold;
@ -290,7 +290,7 @@
right: 0;
margin-top: -4px;
font-size: 11px;
color: @grey-color;
color: @color_grey;
}
}
}

4
source/less/_side.less
Unescape View File

@ -1,10 +1,10 @@
.l_side {
width: @side-width;
width: @width_sidebar;
float: right;
position: relative;
display: flex;
flex-direction: column;
@media(max-width: @on-phone) {
@media(max-width: @on_phone) {
margin: @gap 0 0;
width: 100%;
}

28
source/less/_toc.less
Unescape View File

@ -1,15 +1,15 @@
.m_widget.toc-wrapper{
overflow: auto;
border-radius: @border-radius;
border-radius: @border_radius;
position: sticky;
top: @header-height + 1*@gap;
top: @height_navbar + 1*@gap;
.enable-trans();
.content{
padding: @gap/2 0;
}
&.active{
position: fixed;
box-shadow: @box-shadow-card-raised;
box-shadow: @boxshadow_card_raised;
}
.header{
@ -17,12 +17,12 @@
width: 100%;
top: 0;
}
@media(max-width: @on-phone){
@media(max-width: @on_phone){
position: fixed;
width: 100% - 0.5 * @gap;
top: @header-height + @gap;
top: @height_navbar + @gap;
left: @gap;
box-shadow: @box-shadow-card-raised;
box-shadow: @boxshadow_card_raised;
display: none;
&.active{
display: block;
@ -32,21 +32,21 @@
a {
padding-left: 8px;
color: fade(@theme-text-main, 60%);
font-size: @small-font-size;
color: fade(@theme_text_main, 60%);
font-size: @fontsize_small;
display: inline-block;
border-left: 4px solid transparent;
&:hover{
color: fade(@theme-text-main, 100%);
border-left: 4px solid @theme-bg-quote;
color: fade(@theme_text_main, 100%);
border-left: 4px solid @theme_bg_quote;
}
&:active{
border-left: 8px solid @theme-bg-quote;
border-left: 8px solid @theme_bg_quote;
}
&.active{
color: fade(@theme-text-main, 100%);
border-left: 4px solid @theme-bg-quote;
background: fade(@theme-bg-quote, 10%);
color: fade(@theme_text_main, 100%);
border-left: 4px solid @theme_bg_quote;
background: fade(@theme_bg_quote, 10%);
}
}

18
source/less/_tog.less
Unescape View File

@ -1,27 +1,27 @@
.tog{
position:fixed;
top: @header-height + @gap * 2;
top: @height_navbar + @gap * 2;
right: ~"calc((100% - @{container-width})/2)";
.enable-trans();
@media(max-width: @container-width){
@media(max-width: @width_container){
right: 0;
}
@media(max-width: @on-phone){
right: -@side-width;
@media(max-width: @on_phone){
right: -@width_sidebar;
&.active{
transform: translateX(-@side-width);
transform: translateX(-@width_sidebar);
}
}
width: @side-width + 6px;
width: @width_sidebar + 6px;
z-index:3;
&:extend(.z-depth-2);
padding: @gap;
border-left: 6px solid @theme-bg-nav-header;
background: @theme-text-in-header;
border-left: 6px solid @theme_bg_navbar;
background: @theme_text_in_header;
a {
display: inline-block;
&:hover,&:active,&.active{
color: @theme-text-highlight;
color: @theme_text_highlight;
}
}
ol{

2
source/less/_typo.less
Unescape View File

@ -1,7 +1,7 @@
@charset "utf-8";
.typo {
font-size:1.6rem;
@media (max-width: @on-phone) {
@media (max-width: @on_phone) {
padding: 0px 20px;
}
}

72
source/less/_widget.less
Unescape View File

@ -1,39 +1,39 @@
.m_widget{
&:extend(.z-depth-main);
background: @theme-bg-card;
background: @theme_bg_card;
margin-top: @gap;
font-family: @fontfamily_base;
font-size: @base-font-size;
font-size: @fontsize_base;
&:first-child{
margin-top: 0;
}
// margin-left: @gap;
border-radius: @border-radius;
border-radius: @border_radius;
.enable-trans();
&:hover {
box-shadow: @box-shadow-card-raised;
box-shadow: @boxshadow_card_raised;
}
&:active {
box-shadow: @box-shadow-card-normal;
box-shadow: @boxshadow_card_normal;
}
// height: 100%;
@media(max-width: @on-phone) {
@media(max-width: @on_phone) {
border-radius: 0;
width: 100%;
&:hover {
box-shadow: @box-shadow-card-normal;
box-shadow: @boxshadow_card_normal;
}
}
width: @side-width;
max-height: ~"calc(100% - @{header-height} - 4 * @{gap})";
width: @width_sidebar;
max-height: ~"calc(100% - @{height_navbar} - 4 * @{gap})";
.header{
border-top-left-radius: @border-radius;
border-top-right-radius: @border-radius;
@media(max-width: @on-phone) {
border-top-left-radius: @border_radius;
border-top-right-radius: @border_radius;
@media(max-width: @on_phone) {
border-radius: 0;
}
background-color: @theme-bg-card-header;
color: @theme-text-in-header;
background-color: @theme_bg_card_header;
color: @theme_text_in_header;
font-weight: bold;
line-height: 1.8em;
padding: 8px @gap;
@ -43,13 +43,13 @@
.content{
text-align: justify;
padding: @gap/2;
max-height: ~"calc(100% - @{header-height} - 2.5 * @{gap})";
max-height: ~"calc(100% - @{height_navbar} - 2.5 * @{gap})";
}
ul.entry > li > a{
padding: 0 @gap;
line-height:@item-height;
height: @item-height;
line-height:@height_cell;
height: @height_cell;
display: flex;
justify-content: space-between;
align-content: center;
@ -58,19 +58,19 @@
.name{
flex:auto;
&:extend(.txt-ellipsis);
color: fade(@theme-text-main,70%);
color: fade(@theme_text_main,70%);
}
.badge{
flex:none;
font-size: @small-font-size;
color: fade(@theme-text-main, 50%);
font-size: @fontsize_small;
color: fade(@theme_text_main, 50%);
}
&:hover{
border-left: 4px solid @theme-bg-quote;
background: fade(@theme-bg-quote, 10%);
border-left: 4px solid @theme_bg_quote;
background: fade(@theme_bg_quote, 10%);
}
&:active{
border-left: 8px solid @theme-bg-quote;
border-left: 8px solid @theme_bg_quote;
}
}
}
@ -78,7 +78,7 @@
.enable-trans();
h2{
text-align: center;
// color: @theme-text-header;
// color: @theme_text_header;
}
.header{
padding: 0;
@ -86,25 +86,25 @@
display: flex;
justify-content: center;
background-color: transparent;
@media(max-width: @on-phone){
@media(max-width: @on_phone){
padding: @gap/2;
}
}
img{
width: @side-width;
height: @side-width;
@media(max-width: @on-phone){
width: @width_sidebar;
height: @width_sidebar;
@media(max-width: @on_phone){
width: 80px;
height: 80px;
border-radius: 100%;
margin-top: @gap/2;
}
border-top-left-radius: @border-radius;
border-top-right-radius: @border-radius;
border-top-left-radius: @border_radius;
border-top-right-radius: @border_radius;
}
.content{
font-weight: bold;
@media(max-width: @on-phone){
@media(max-width: @on_phone){
padding: @gap/2 @gap;
}
}
@ -115,10 +115,10 @@
padding-top: 0;
padding-bottom: @gap/2;
a {
color: fade(@theme-text-main, 70%);
color: fade(@theme_text_main, 70%);
.enable-trans();
&:hover {
color: @theme-text-highlight;
color: @theme_text_highlight;
}
&.social {
display: flex;
@ -129,8 +129,8 @@
margin: 4px;
border-radius: 100px;
&:hover {
background: fade(@theme-bg-quote, 10%);
color: @theme-bg-quote;
background: fade(@theme_bg_quote, 10%);
color: @theme_bg_quote;
}
}
}
@ -152,7 +152,7 @@
.enable-trans(.1s);
line-height: 1.6em;
&:hover{
color: @theme-text-highlight !important; //to cover inline style.
color: @theme_text_highlight !important; //to cover inline style.
text-decoration: underline
}
}

Write Preview
Loading…
Cancel
Save