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

update

Browse Source
i18n
xaoxuu 6 years ago
parent e34326eee1
commit a741e80254
10 changed files with 1470 additions and 1470 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 86
      source/less/_archive.less
  2. 646
      source/less/_article.less
  3. 378
      source/less/_base.less
  4. 84
      source/less/_footer.less
  5. 592
      source/less/_header.less
  6. 874
      source/less/_main.less
  7. 10
      source/less/_normalize.less
  8. 24
      source/less/_side.less
  9. 196
      source/less/_toc.less
  10. 50
      source/less/_widget.less

86
source/less/_archive.less
Unescape View File

@ -1,47 +1,47 @@
#archive-page { #archive-page {
margin-bottom: @gap * 2; margin-bottom: @gap * 2;
.archive { .archive {
position: relative; position: relative;
.archive-year { .archive-year {
font-size: @fontsize_base; font-size: @fontsize_base;
margin-top: 4em; margin-top: 4em;
margin-bottom: 1em; margin-bottom: 1em;
&:first-child{ &:first-child{
margin-top: 0em; margin-top: 0em;
padding-top: 0; padding-top: 0;
} }
h2 { h2 {
margin-top: 1em; margin-top: 1em;
} }
a { a {
color: @color_text_main; color: @color_text_main;
text-decoration: none; text-decoration: none;
} }
} }
.archive-post { .archive-post {
a { a {
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
text-decoration: none; text-decoration: none;
} }
time { time {
color: @color_text_main; color: @color_text_main;
flex: none; flex: none;
font-size: @fontsize_small; font-size: @fontsize_small;
padding: .5em .5em .5em 3em; padding: .5em .5em .5em 3em;
@media (max-width: @on_phone) { @media (max-width: @on_phone) {
padding: .5em .5em .5em 0; padding: .5em .5em .5em 0;
}
}
.title {
flex: auto;
padding: .5em;
font-size: @fontsize_small;
color: fade(@color_text_main,80%);
}
} }
}
.title {
flex: auto;
padding: .5em;
font-size: @fontsize_small;
color: fade(@color_text_main,80%);
}
} }
}
} }

646
source/less/_article.less
Unescape View File

@ -1,358 +1,358 @@
.article { .article {
color: @color_text_main; color: @color_text_main;
font-size: @fontsize_base; font-size: @fontsize_base;
line-height: @lineheight_base; line-height: @lineheight_base;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
img {
position: relative;
margin: 0 auto;
background: white;
.enable-trans();
@media (max-width: @on_phone) {
box-shadow: none;
}
}
span{
img { img {
position: relative; display: inline;
margin: 0 auto; margin: auto;
background: white;
.enable-trans();
@media (max-width: @on_phone) {
box-shadow: none;
}
} }
span{ }
img { hr {
display: inline; border: 0;
margin: auto; border-radius: 1px;
} border-bottom: 1px solid rgba(0,0,0,0.1);
}
p.small-img,
div.small-img {
img {
width: auto;
max-width: 100%;
margin: 0;
box-shadow: none;
}
}
p {
// margin: 20px 0px;
margin-top: .5em;
margin-bottom: 1em;
text-align: justify;
strong{
color: @color_text_main;
padding-left: 2px;
padding-right: 2px;
} }
hr { max-width: 100%;
border: 0; overflow: auto;
border-radius: 1px; .mjx-math{
border-bottom: 1px solid rgba(0,0,0,0.1); font-family: @fontfamily_code;
} background: fade(@theme_background, 50%);
p.small-img, padding: @gap/2;
div.small-img { border-radius: @border_radius_code_block;
img {
width: auto;
max-width: 100%;
margin: 0;
box-shadow: none;
}
} }
p { }
// margin: 20px 0px; ul,
margin-top: .5em; ol {
margin-bottom: 1em; font-size: @fontsize_base * .95;
text-align: justify; list-style: initial;
strong{ padding-left: 10px;
color: @color_text_main; margin-left: 10px;
padding-left: 2px; margin-bottom: 1em;
padding-right: 2px; }
} ul {
max-width: 100%; & > li{
overflow: auto; list-style: initial;
.mjx-math{
font-family: @fontfamily_code;
background: fade(@theme_background, 50%);
padding: @gap/2;
border-radius: @border_radius_code_block;
}
} }
ul, }
ol { ol {
font-size: @fontsize_base * .95; & > li{
list-style: initial; margin-left: 10px;
padding-left: 10px; list-style: decimal;
margin-left: 10px;
margin-bottom: 1em;
}
ul {
& > li{
list-style: initial;
}
} }
ol { }
& > li{ a {
margin-left: 10px; &:before{
list-style: decimal; display: none;
}
color: @color_text_link;
.enable-trans();
&:hover {
color: @color_text_highlight;
text-decoration: underline;
}
&:active {
color: darken(@color_text_highlight, 25%);
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
position: relative;
font-family: @fontfamily_base;
font-weight: normal;
margin-top: 1.5em;
margin-bottom: 1em;
&.title {
left: 0;
&:before {
content: none;
} }
} }
a { }
&:before{ h1, h2 {
display: none; color: @color_text_header;
} margin-top: 2em;
color: @color_text_link; }
.enable-trans(); h3, h4, h5, h6 {
&:hover { &:first-child{
color: @color_text_highlight; margin-top: 0;
text-decoration: underline; padding-top: 0;
}
&:active {
color: darken(@color_text_highlight, 25%);
}
} }
h1, }
h2, h1 {
h3, font-size: @fontsize_h1;
h4, }
h5, h2 {
font-size: @fontsize_h2;
}
h3 {
font-size: @fontsize_h3;
color: darken(@color_text_main, 20%);
}
h4 {
font-weight: bold;
font-size: @fontsize_h4;
}
h5 {
font-weight: bold;
color: @color_text_main;
font-size: @fontsize_h5;
}
h6 {
color: fade(@color_text_main, 75%);
font-size: @fontsize_h6;
}
.subtitle{
h6 { h6 {
position: relative; color: fade(@color_text_main, 90%);
font-family: @fontfamily_base;
font-weight: normal;
margin-top: 1.5em;
margin-bottom: 1em;
&.title {
left: 0;
&:before {
content: none;
}
}
}
h1, h2 {
color: @color_text_header;
margin-top: 2em;
} }
h3, h4, h5, h6 { }
&:first-child{ figure {
margin-top: 0; figcaption {
padding-top: 0; span {
} display: inline-block;
margin-right: 5px;
}
} }
h1 { }
font-size: @fontsize_h1; blockquote {
p{
text-align: left;
word-wrap: normal;
margin: 0;
font-size: @fontsize_small;
line-height: @fontsize_small * 1.5;
} }
h2 { position: relative;
font-size: @fontsize_h2; width: 100%;
font-size: @fontsize_small;
background: fade(@color_bg_quote, 10%);
margin: 1em 0;
padding: @gap;
border-left: @border_radius_code_block solid @color_bg_quote;
border-radius: @border_radius_code_block;
.enable-trans();
footer {
strong {
margin-right: 7px;
}
} }
h3 { &.pullquote{
font-size: @fontsize_h3; &.right{
color: darken(@color_text_main, 20%); border-left: none;
border-right: @border_radius_code_block solid @color_bg_quote;
p{
text-align: right;
}
}
} }
h4 { }
pre {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: @fontfamily_code;
color: @color_text_main;
}
code {
font-family: @fontfamily_code;
padding: 3px 3px 0px 3px;
margin: 0px 2px;
vertical-align: center;
border-radius: 2px;
border: 1px solid fade(@color_bg_code, 50%);
font-size: @fontsize_base * .8;
background: @color_bg_code;
@media(max-width: @on_phone){
font-size: @fontsize_base * .8 * .95;
}
}
.readmore {
// display: none; // howtodesign?
font-family: @fontfamily_base;
font-size: .8em;
letter-spacing: .1em;
margin-top: @gap;
a {
text-decoration: none;
display: inline-block;
vertical-align: middle;
line-height: 2rem;
font-weight: bold; font-weight: bold;
font-size: @fontsize_h4; background-color: @theme_main;
padding: .2em 2.4em;
color: white;
border-radius: @border_radius/2;
.enable-trans();
&:hover {
background: darken(@theme_main, 10%);
}
&:active {
// background: darken(@theme_main, 20%);
}
} }
h5 {
font-weight: bold;
color: @color_text_main;
font-size: @fontsize_h5;
}
.tags {
position: relative;
padding-top: @gap/2;
padding-bottom: @gap/2;
font-size: @fontsize_small;
line-height: @lineheight_base;
margin-top: @gap;
background: darken(fade(@theme_background, 50%), 5%);
&.article-tags {
// padding-top: 2*@gap;
// background: transparent;
} }
h6 { word-spacing: @gap/2;
color: fade(@color_text_main, 75%); a {
font-size: @fontsize_h6; color: @color_text_main;
} position: relative;
.subtitle{ display: inline-block;
h6 { word-spacing: 0;
color: fade(@color_text_main, 90%); // letter-spacing: .1em;
// &+a{
// margin-left: @gap/2;
// }
.enable-trans();
&:hover {
color: @color_text_highlight;
background: transparent;
text-decoration: none;
}
&::before {
// content: "#";
} }
} }
figure { }
figcaption {
span { table:not('.highlight table') {
display: inline-block; width: 100%;
margin-right: 5px;
} td,
} th {
padding: 12px 24px;
} }
blockquote { tr {
p{ // border-bottom: 1px solid #ddd;
text-align: left;
word-wrap: normal;
margin: 0;
font-size: @fontsize_small;
line-height: @fontsize_small * 1.5;
}
position: relative;
width: 100%;
font-size: @fontsize_small;
background: fade(@color_bg_quote, 10%);
margin: 1em 0;
padding: @gap;
border-left: @border_radius_code_block solid @color_bg_quote;
border-radius: @border_radius_code_block;
.enable-trans();
footer {
strong {
margin-right: 7px;
}
}
&.pullquote{
&.right{
border-left: none;
border-right: @border_radius_code_block solid @color_bg_quote;
p{
text-align: right;
}
}
}
} }
&>thead>th {
pre { // border-bottom-width: 2px;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: @fontfamily_code;
color: @color_text_main;
}
code {
font-family: @fontfamily_code;
padding: 3px 3px 0px 3px;
margin: 0px 2px;
vertical-align: center;
border-radius: 2px;
border: 1px solid fade(@color_bg_code, 50%);
font-size: @fontsize_base * .8;
background: @color_bg_code;
@media(max-width: @on_phone){
font-size: @fontsize_base * .8 * .95;
}
} }
.readmore { }
// display: none; // howtodesign? @media (max-width: @on_phone) {
font-family: @fontfamily_base; ul,
font-size: .8em; ol {
letter-spacing: .1em; font-size: @fontsize_base * .95;
margin-top: @gap;
a {
text-decoration: none;
display: inline-block;
vertical-align: middle;
line-height: 2rem;
font-weight: bold;
background-color: @theme_main;
padding: .2em 2.4em;
color: white;
border-radius: @border_radius/2;
.enable-trans();
&:hover {
background: darken(@theme_main, 10%);
}
&:active {
// background: darken(@theme_main, 20%);
}
}
} }
.tags { figure {
position: relative; font-size: 13px;
padding-top: @gap/2; line-height: 1.6em;
padding-bottom: @gap/2; }
font-size: @fontsize_small; }
.prev-next{
width: 100%;
display: flex;
justify-content: space-between;
align-content: flex-start;
section{
width: 100%;
padding: @gap/2;
color: fade(@color_text_main, 70%);
background-color: fade(@theme_background, 50%);
border-radius: @border_radius;
p{
font-size: @fontsize_base;
line-height: @lineheight_base; line-height: @lineheight_base;
margin-top: @gap; margin: 0;
background: darken(fade(@theme_background, 50%), 5%); }
&.article-tags { h4{
// padding-top: 2*@gap; margin-top: @gap/2;
// background: transparent; margin-bottom: @gap/2;
} position: relative;
word-spacing: @gap/2; font-family: @fontfamily_base;
a { font-weight: bold;
color: @color_text_main; font-size: @fontsize_h5;
position: relative; @media(max-width:@on_phone) {
display: inline-block; letter-spacing: -1px;
word-spacing: 0;
// letter-spacing: .1em;
// &+a{
// margin-left: @gap/2;
// }
.enable-trans();
&:hover {
color: @color_text_highlight;
background: transparent;
text-decoration: none;
}
&::before {
// content: "#";
}
} }
}
table:not('.highlight table') { }
width: 100%; h6{
margin: 0;
td, word-spacing: normal;
th { }
padding: 12px 24px; .enable-trans();
} // border: 1px solid transparent;
tr { // &:hover{
// border-bottom: 1px solid #ddd; // border: 1px solid fade(@theme_main, 30%);
} // }
&>thead>th { .tags{
// border-bottom-width: 2px; background: transparent;
} padding: 0;
margin-top: @gap/2;
margin-bottom: 0;
font-size: @fontsize_small * 0.9;
word-spacing: 4px;
}
&:first-child{
margin-left: 0;
margin-right: 0;
}
} }
@media (max-width: @on_phone) { .prev{
ul, text-align: left;
ol { margin-left: 0;
font-size: @fontsize_base * .95; margin-right: @gap/2;
} border-top-right-radius: @border_radius;
figure { border-bottom-right-radius: @border_radius;
font-size: 13px;
line-height: 1.6em;
}
} }
.prev-next{ .next{
width: 100%; text-align: right;
display: flex; margin-left: @gap/2;
justify-content: space-between; margin-right: 0;
align-content: flex-start; border-top-left-radius: @border_radius;
section{ border-bottom-left-radius: @border_radius;
width: 100%;
padding: @gap/2;
color: fade(@color_text_main, 70%);
background-color: fade(@theme_background, 50%);
border-radius: @border_radius;
p{
font-size: @fontsize_base;
line-height: @lineheight_base;
margin: 0;
}
h4{
margin-top: @gap/2;
margin-bottom: @gap/2;
position: relative;
font-family: @fontfamily_base;
font-weight: bold;
font-size: @fontsize_h5;
@media(max-width:@on_phone) {
letter-spacing: -1px;
}
}
h6{
margin: 0;
word-spacing: normal;
}
.enable-trans();
// border: 1px solid transparent;
// &:hover{
// border: 1px solid fade(@theme_main, 30%);
// }
.tags{
background: transparent;
padding: 0;
margin-top: @gap/2;
margin-bottom: 0;
font-size: @fontsize_small * 0.9;
word-spacing: 4px;
}
&:first-child{
margin-left: 0;
margin-right: 0;
}
}
.prev{
text-align: left;
margin-left: 0;
margin-right: @gap/2;
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;
}
} }
}
} }

378
source/less/_base.less
Unescape View File

@ -1,111 +1,111 @@
/* Basic Settings */ /* Basic Settings */
* { * {
box-sizing: border-box; box-sizing: border-box;
outline: none; outline: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* My Base */ /* My Base */
html { html {
color: @color_text_main; color: @color_text_main;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: @height_navbar; padding-top: @height_navbar;
font-family: @fontfamily_base; font-family: @fontfamily_base;
font-size: @fontsize_base; font-size: @fontsize_base;
line-height: 1.5rem; line-height: 1.5rem;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
body { body {
background-color: @theme_background; background-color: @theme_background;
&.modal-active { &.modal-active {
overflow: hidden; overflow: hidden;
@media (max-width: @on_modal_threshold) { @media (max-width: @on_modal_threshold) {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
}
} }
&.z_menu-open { }
.menu-phone { &.z_menu-open {
transform: translate3d(-@gap, 0, 0); .menu-phone {
} transform: translate3d(-@gap, 0, 0);
} }
}
} }
.z-depth-nav { .z-depth-nav {
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1); 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 { .z-depth-nav-raised {
box-shadow: @boxshadow_card_raised; box-shadow: @boxshadow_card_raised;
} }
.z-depth-main { .z-depth-main {
box-shadow: @boxshadow_card_normal; box-shadow: @boxshadow_card_normal;
} }
.z-depth-main-raised { .z-depth-main-raised {
box-shadow: @boxshadow_card_raised; box-shadow: @boxshadow_card_raised;
} }
.z-depth-0 { .z-depth-0 {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
} }
.z-depth-1 { .z-depth-1 {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
} }
.z-depth-1-half { .z-depth-1-half {
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.4), 0 0px 8px 0px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.4), 0 0px 8px 0px rgba(0, 0, 0, 0.2);
} }
.z-depth-2 { .z-depth-2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
} }
.z-depth-3 { .z-depth-3 {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 8px 25px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.12), 0 8px 25px 0 rgba(0, 0, 0, 0.1);
} }
.z-depth-4 { .z-depth-4 {
box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.11), 0 12px 22px 0 rgba(0, 0, 0, 0.11); box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.11), 0 12px 22px 0 rgba(0, 0, 0, 0.11);
} }
.z-depth-5 { .z-depth-5 {
box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 33px 0 rgba(0, 0, 0, 0.11); box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 33px 0 rgba(0, 0, 0, 0.11);
} }
.z-depth-0 { .z-depth-0 {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
} }
.hoverable { .hoverable {
.enable-trans(); .enable-trans();
box-shadow: 0; box-shadow: 0;
} }
.hoverable:hover { .hoverable:hover {
.enable-trans(); .enable-trans();
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }
::-moz-selection { ::-moz-selection {
background: @color_bg_selection; background: @color_bg_selection;
} }
::selection { ::selection {
background: @color_bg_selection; background: @color_bg_selection;
} }
// transition // transition
.enable-trans(@time: 0.25s){ .enable-trans(@time: 0.25s){
@ -129,159 +129,159 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
text-rendering: geometricPrecision; text-rendering: geometricPrecision;
margin: 0 0 0.4em 0; margin: 0 0 0.4em 0;
} }
h1 { h1 {
font-size: @fontsize_h1; font-size: @fontsize_h1;
} }
h2 { h2 {
font-size: @fontsize_h2; font-size: @fontsize_h2;
} }
h3 { h3 {
font-size: @fontsize_h3; font-size: @fontsize_h3;
} }
h4 { h4 {
font-size: @fontsize_h4; font-size: @fontsize_h4;
} }
h5 { h5 {
font-size: @fontsize_h5; font-size: @fontsize_h5;
} }
h6 { h6 {
font-size: @fontsize_h6; font-size: @fontsize_h6;
} }
a { a {
color: @black; color: @black;
cursor: pointer; cursor: pointer;
text-decoration: none;
.enable-trans();
&:hover {
text-decoration: none; text-decoration: none;
.enable-trans(); }
&:hover {
text-decoration: none;
}
} }
pre { pre {
tab-size: 4; tab-size: 4;
-moz-tab-size: 4; -moz-tab-size: 4;
-o-tab-size: 4; -o-tab-size: 4;
-webkit-tab-size: 4; -webkit-tab-size: 4;
} }
img { img {
max-width: 100%; max-width: 100%;
} }
/** /**
* Util * Util
*/ */
.clearfix { .clearfix {
zoom: 1; zoom: 1;
&:before, &:before,
&:after { &:after {
content: " "; // 1 content: " "; // 1
display: table; // 2 display: table; // 2
} }
&:after { &:after {
clear: both; clear: both;
} }
} }
.container.clearfix{ .container.clearfix{
display: flex; display: flex;
@media(max-width: @on_pad) { @media(max-width: @on_pad) {
display: inherit; display: inherit;
} }
} }
.hidden { .hidden {
text-indent: -9999px; text-indent: -9999px;
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
.inner { .inner {
position: relative; position: relative;
width: 80%; width: 80%;
max-width: 710px; max-width: 710px;
margin: 0 auto; margin: 0 auto;
} }
.vertical { .vertical {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
.right { .right {
float: right; float: right;
} }
.left { .left {
float: left; float: left;
} }
.disable-trans { .disable-trans {
-moz-transition: none !important; -moz-transition: none !important;
-webkit-transition: none !important; -webkit-transition: none !important;
transition: none !important; transition: none !important;
} }
.txt-ellipsis { .txt-ellipsis {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
ul, ul,
ol { ol {
padding-left: 0; padding-left: 0;
} }
li { li {
list-style: none; list-style: none;
} }
.mark { .mark {
position: relative; position: relative;
a { a {
color: @black; color: @black;
background: transparent; background: transparent;
display: inline-block; display: inline-block;
padding: 0 8px; padding: 0 8px;
border-left: @border_radius_line solid transparent; border-left: @border_radius_line solid transparent;
background: transparent; background: transparent;
border-radius: @border_radius_code_block; border-radius: @border_radius_code_block;
.enable-trans(); .enable-trans();
&:hover { &:hover {
background: fade(@theme_main, 10%); background: fade(@theme_main, 10%);
border-left: @border_radius_line solid @theme_main; border-left: @border_radius_line solid @theme_main;
padding: 8px; padding: 8px;
}
&:active {
border-left: max(@border_radius, @border_radius_line) solid @theme_main;
}
} }
&:active {
border-left: max(@border_radius, @border_radius_line) solid @theme_main;
}
}
} }
ul.h-list { ul.h-list {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%;
&>li {
// flex: none;
height: 100%; height: 100%;
&>li { justify-content: center;
// flex: none; }
height: 100%;
justify-content: center;
}
} }
@ -290,87 +290,87 @@ ul.h-list {
*/ */
#loading-bar-wrapper { #loading-bar-wrapper {
position: fixed; position: fixed;
top: @height_navbar - @loading_height; top: @height_navbar - @loading_height;
// top: 0; // top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
// overflow: scroll; // overflow: scroll;
z-index: 99999; z-index: 99999;
} }
#loading-bar { #loading-bar {
position: fixed; position: fixed;
width: 0; width: 0;
height: @loading_height; height: @loading_height;
// height: @height_navbar; // height: @height_navbar;
.enable-trans(); .enable-trans();
background-color: fade(white, 50%); background-color: fade(white, 50%);
&.pure{ &.pure{
background-color: fade(@theme_main, 50%); background-color: fade(@theme_main, 50%);
} }
} }
.container { .container {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: @width_container; max-width: @width_container;
margin: 0 auto; margin: 0 auto;
} }
.container--flex { .container--flex {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.l_body { .l_body {
position: relative; position: relative;
padding: 2*@gap @gap @gap; padding: 2*@gap @gap @gap;
@media(max-width: @on_phone) { @media(max-width: @on_phone) {
padding: @gap 0 @gap; padding: @gap 0 @gap;
border-radius: 0; border-radius: 0;
}
.s-top{
.enable-trans(0.6s);
z-index: 9;
position: fixed;
width: 48px;
height: 48px;
line-height: 48px;
border-radius: 100%;
bottom: @gap*2;
right: @gap*2;
transform: translateY(100px) scale(0);
transform-origin: bottom;
color: @color_text_main;
@media(max-width: @on_pad) {
right: @gap;
} }
.s-top{ &.show{
.enable-trans(0.6s); transform: translateY(0) scale(1);
z-index: 9; &.hl{
position: fixed; background: @theme_main;
width: 48px; color: white;
height: 48px; box-shadow: @boxshadow_card_normal;
line-height: 48px;
border-radius: 100%;
bottom: @gap*2;
right: @gap*2;
transform: translateY(100px) scale(0);
transform-origin: bottom;
color: @color_text_main;
@media(max-width: @on_pad) {
right: @gap;
} }
&.show{ }
transform: translateY(0) scale(1); @media(min-width: @on_pad) {
&:hover{
transform: scale(1.2);
border-radius: 25%;
background: @theme_main;
color: white;
box-shadow: @boxshadow_card_raised;
&.hl{ &.hl{
background: @theme_main;
color: white;
box-shadow: @boxshadow_card_normal;
}
}
@media(min-width: @on_pad) {
&:hover{
transform: scale(1.2);
border-radius: 25%;
background: @theme_main;
color: white;
box-shadow: @boxshadow_card_raised; box-shadow: @boxshadow_card_raised;
&.hl{
box-shadow: @boxshadow_card_raised;
}
} }
} }
} }
}
} }
.reveal { .reveal {
// visibility: hidden; // visibility: hidden;
} }

84
source/less/_footer.less
Unescape View File

@ -1,47 +1,47 @@
#footer { #footer {
position: relative; position: relative;
padding: 40px 10px 120px 10px; padding: 40px 10px 120px 10px;
width: 100%; width: 100%;
color: fade(@color_text_main, 50%);
margin: 0px auto;
font-size: @fontsize_small;
overflow: hidden;
text-align: center;
font-family: @fontfamily_base;
.licenses {
color: fade(@color_text_main, 50%); color: fade(@color_text_main, 50%);
margin: 0px auto; text-decoration: underline;
font-size: @fontsize_small; }
overflow: hidden; .codename {
text-align: center; // color: @color_vue;
font-family: @fontfamily_base; text-decoration: underline;
.licenses { }
color: fade(@color_text_main, 50%); .social-wrapper {
text-decoration: underline; display: flex;
justify-content: center;
flex-wrap: wrap;
}
a {
color: fade(@color_text_main, 70%);
.enable-trans();
&:hover {
color: @color_text_highlight;
} }
.codename { &.social {
// color: @color_vue; position: relative;
text-decoration: underline; display: inline-block;
} text-align: center;
.social-wrapper { display: flex;
display: flex; justify-content: center;
justify-content: center; align-items: center;
flex-wrap: wrap; width: 32px;
} height: 32px;
a { margin: 4px;
color: fade(@color_text_main, 70%); border-radius: 100px;
.enable-trans(); &:hover {
&:hover { background: fade(@theme_main, 10%);
color: @color_text_highlight; color: @theme_main;
} }
&.social {
position: relative;
display: inline-block;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
margin: 4px;
border-radius: 100px;
&:hover {
background: fade(@theme_main, 10%);
color: @theme_main;
}
}
} }
}
} }

592
source/less/_header.less
Unescape View File

@ -1,336 +1,336 @@
.l_header { .l_header {
position:fixed; position:fixed;
z-index: 9999; z-index: 9999;
top:0; top:0;
left:0; left:0;
width:100%; width:100%;
font-size: @fontsize_base; font-size: @fontsize_base;
line-height: @height_navbar; line-height: @height_navbar;
height: @height_navbar;
overflow: hidden;
font-family: @fontfamily_base;
font-weight: bold;
padding: 0 @gap;
.wrapper{
padding: auto @gap;
.enable-trans();
}
.wrapper.sub{
.enable-trans();
transform: translateY(-@height_navbar);
.logo{
// padding-left: 0;
@media(max-width: @on_phone){
.enable-trans();
padding-left: @gap;
padding-right: 0;
font-size: @fontsize_base;
}
}
}
.nav--main,.nav-sub{
height: @height_navbar; height: @height_navbar;
overflow: hidden; }
font-family: @fontfamily_base; background: @color_bg_navbar;
font-weight: bold;
&, a{
.txt-ellipsis;
height: @height_navbar;
line-height: @height_navbar;
color: @color_text_in_header;
}
&:extend(.z-depth-nav); // 适合深色导航栏背景
.enable-trans();
&:hover {
// &:extend(.z-depth-nav-raised);
}
&:active {
}
.logo {
padding: 0 @gap; padding: 0 @gap;
.wrapper{ line-height: @height_navbar;
padding: auto @gap; font-size: @fontsize_logo;
.enable-trans(); font-family: @fontfamily_logo;
@media(max-width: @on_phone){
flex: auto;
} }
.wrapper.sub{ &.img{
.enable-trans(); padding: 0 @gap 0 0;
transform: translateY(-@height_navbar);
.logo{
// padding-left: 0;
@media(max-width: @on_phone){
.enable-trans();
padding-left: @gap;
padding-right: 0;
font-size: @fontsize_base;
}
}
} }
.nav--main,.nav-sub{ img{
height: @height_navbar; padding: 0;
height: 100%;
} }
background: @color_bg_navbar; letter-spacing: 0;
}
&, a{ .nav-sub{
.txt-ellipsis; .logo {
height: @height_navbar; font-size: @fontsize_base;
line-height: @height_navbar; font-family: @fontfamily_base;
color: @color_text_in_header; @media(max-width: @on_phone){
} letter-spacing: -0.5px;
&:extend(.z-depth-nav); // 适合深色导航栏背景 padding-top: 1px;
}
}
}
.menu{
position:relative;
flex: 1 0 auto;
height: @height_navbar;
.enable-trans(); .enable-trans();
&:hover { margin:0 @gap;
// &:extend(.z-depth-nav-raised); ul > li > a{
.enable-trans();
display: block;
font-size: @fontsize_base;
color: fade(@color_text_in_header, 70%);
padding: 0 8px;
&:hover{
color: @color_text_in_header;
border-bottom: @loading_height solid @theme_cardbg;
background: fade(@theme_cardbg, 10%);
}
&:active,&.active{
color: @color_text_in_header;
border-bottom: @loading_height solid @theme_cardbg;
}
} }
&:active { @media(max-width: @on_phone){
display:none;
} }
.logo { }
padding: 0 @gap; .switcher{
line-height: @height_navbar; display: none;
font-size: @fontsize_logo; font-size: @fontsize_base;
font-family: @fontfamily_logo; line-height: @height_navbar;
@media(max-width: @on_phone){
flex: auto; & > li{
} height: @height_navbar - @gap;
&.img{ .enable-trans();
padding: 0 @gap 0 0; margin: 2px;
@height: @height_navbar - @gap;
@media(max-width: @on_phone){
width: @height;
height: @height;
}
a{
display: flex;
justify-content: center;
align-items: center;
width: @height;
height: @height;
border-radius: 100px;
.enable-trans();
&:hover {
background: fade(@theme_cardbg, 30%);
} }
img{ @media(max-width: @on_phone){
padding: 0; width: @height;
height: 100%; height: @height;
} }
letter-spacing: 0; }
} }
@media(max-width: @on_phone){
.nav-sub{ display: flex;
.logo { padding-left: @gap/2;
font-size: @fontsize_base; padding-right: @gap - 6px;
font-family: @fontfamily_base; }
@media(max-width: @on_phone){ }
letter-spacing: -0.5px; .nav-sub .switcher{
padding-top: 1px; display: flex;
} }
.m_search {
position: relative;
height: @height_navbar - @gap;
width: @width_sidebar;
@media(max-width: @on_laptop){
width: @width_sidebar_m;
}
line-height: @height_navbar - @gap;
margin-top: @gap/2;
margin-bottom: @gap/2;
vertical-align: middle;
.form {
position: relative;
display: block;
width: 100%;
}
.icon,.input{
.enable-trans(.1s);
}
.icon {
position: absolute;
display:block;
height: @height_navbar - @gap;
width: @height_navbar - @gap;
line-height: @height_navbar - @gap;
top: 0;
left: @gap/2;
font-size: @fontsize_small;
}
.input {
display:block;
font-size: @fontsize_small;
line-height: @height_navbar - @gap;
margin: 0;
width: 100%;
color: fade(@color_text_in_header, 60%);
padding-left: @fontsize_base + @gap - 2px;
@media(max-width: @on_phone){
padding-left: @fontsize_base + @gap - 2px;
}
height: @height_navbar - @gap;
line-height: @height_navbar - @gap;
font-family: @fontfamily_base;
border: none;
border-radius: @border_radius_searchbar;
background: fade(@theme_cardbg, 15%);
box-sizing: border-box;
-webkit-appearance: none;
box-shadow: none;
border: 1px dashed transparent;
.enable-trans();
~ .icon{
color: fade(@color_text_in_header, 60%);
}
.set-placeholder({color: fade(@color_text_in_header, 60%)});
&:hover{
border: 1px dashed fade(@color_text_in_header, 60%);
}
&:focus {
~ .icon{
color: @color_text_in_header;
} }
color: @color_text_in_header;
border: 1px solid fade(@color_text_in_header, 60%);
// .set-placeholder({color: @black});
}
} }
}
&.pure{
background: @theme_cardbg;
&, a{
color: @theme_main;
}
box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
.menu{ .menu{
position:relative; ul > li > a{
flex: 1 0 auto;
height: @height_navbar;
.enable-trans(); .enable-trans();
margin:0 @gap; color: fade(@theme_main, 70%);
ul > li > a{ &.current{
.enable-trans(); border-bottom: @loading_height solid fade(@theme_main, 80%);
display: block;
font-size: @fontsize_base;
color: fade(@color_text_in_header, 70%);
padding: 0 8px;
&:hover{
color: @color_text_in_header;
border-bottom: @loading_height solid @theme_cardbg;
background: fade(@theme_cardbg, 10%);
}
&:active,&.active{
color: @color_text_in_header;
border-bottom: @loading_height solid @theme_cardbg;
}
} }
@media(max-width: @on_phone){ &:hover{
display:none; color: @theme_main;
border-bottom: @loading_height solid @theme_main;
background: fade(@theme_main, 10%);
} }
&:active,&.active{
color: @theme_main;
border-bottom: @loading_height solid @theme_main;
}
}
} }
.switcher{ .switcher{
display: none; & > li{
font-size: @fontsize_base; a{
line-height: @height_navbar; &:hover {
background: fade(@theme_main, 15%);
& > li{ }
height: @height_navbar - @gap;
.enable-trans();
margin: 2px;
@height: @height_navbar - @gap;
@media(max-width: @on_phone){
width: @height;
height: @height;
}
a{
display: flex;
justify-content: center;
align-items: center;
width: @height;
height: @height;
border-radius: 100px;
.enable-trans();
&:hover {
background: fade(@theme_cardbg, 30%);
}
@media(max-width: @on_phone){
width: @height;
height: @height;
}
}
}
@media(max-width: @on_phone){
display: flex;
padding-left: @gap/2;
padding-right: @gap - 6px;
} }
} }
.nav-sub .switcher{
display: flex;
} }
.m_search { .m_search {
position: relative; .input {
height: @height_navbar - @gap; color: fade(@theme_main, 60%);
width: @width_sidebar; background: @theme_background;
@media(max-width: @on_laptop){ ~ .icon{
width: @width_sidebar_m; color: fade(@theme_main, 60%);
}
line-height: @height_navbar - @gap;
margin-top: @gap/2;
margin-bottom: @gap/2;
vertical-align: middle;
.form {
position: relative;
display: block;
width: 100%;
} }
.icon,.input{ .set-placeholder({color: fade(@theme_main, 60%)});
.enable-trans(.1s); &:hover{
border: 1px dashed fade(@theme_main, 60%);
} }
.icon { &:focus {
position: absolute; ~ .icon{
display:block; color: @theme_main;
height: @height_navbar - @gap;
width: @height_navbar - @gap;
line-height: @height_navbar - @gap;
top: 0;
left: @gap/2;
font-size: @fontsize_small;
}
.input {
display:block;
font-size: @fontsize_small;
line-height: @height_navbar - @gap;
margin: 0;
width: 100%;
color: fade(@color_text_in_header, 60%);
padding-left: @fontsize_base + @gap - 2px;
@media(max-width: @on_phone){
padding-left: @fontsize_base + @gap - 2px;
}
height: @height_navbar - @gap;
line-height: @height_navbar - @gap;
font-family: @fontfamily_base;
border: none;
border-radius: @border_radius_searchbar;
background: fade(@theme_cardbg, 15%);
box-sizing: border-box;
-webkit-appearance: none;
box-shadow: none;
border: 1px dashed transparent;
.enable-trans();
~ .icon{
color: fade(@color_text_in_header, 60%);
}
.set-placeholder({color: fade(@color_text_in_header, 60%)});
&:hover{
border: 1px dashed fade(@color_text_in_header, 60%);
}
&:focus {
~ .icon{
color: @color_text_in_header;
}
color: @color_text_in_header;
border: 1px solid fade(@color_text_in_header, 60%);
// .set-placeholder({color: @black});
}
}
}
&.pure{
background: @theme_cardbg;
&, a{
color: @theme_main;
}
box-shadow: @boxshadow_card_normal; // 适合白色导航栏背景
.menu{
ul > li > a{
.enable-trans();
color: fade(@theme_main, 70%);
&.current{
border-bottom: @loading_height solid fade(@theme_main, 80%);
}
&:hover{
color: @theme_main;
border-bottom: @loading_height solid @theme_main;
background: fade(@theme_main, 10%);
}
&:active,&.active{
color: @theme_main;
border-bottom: @loading_height solid @theme_main;
}
}
}
.switcher{
& > li{
a{
&:hover {
background: fade(@theme_main, 15%);
}
}
} }
} color: @theme_main;
.m_search { background: fade(@theme_main, 15%);
.input { border: 1px solid fade(@theme_main, 60%);
color: fade(@theme_main, 60%);
background: @theme_background;
~ .icon{
color: fade(@theme_main, 60%);
}
.set-placeholder({color: fade(@theme_main, 60%)});
&:hover{
border: 1px dashed fade(@theme_main, 60%);
}
&:focus {
~ .icon{
color: @theme_main;
}
color: @theme_main;
background: fade(@theme_main, 15%);
border: 1px solid fade(@theme_main, 60%);
}
} }
} }
} }
@media (max-width: @on_phone) { }
padding: 0; @media (max-width: @on_phone) {
.m_search{ padding: 0;
width:0; .m_search{
overflow: hidden; width:0;
position: absolute; overflow: hidden;
.enable-trans(); position: absolute;
margin: 0 @gap/2; .enable-trans();
} margin: 0 @gap/2;
&.z_search-open{
.logo{
opacity:0;
}
.m_search{
width: 100% - 1.5*@gap;
}
}
} }
&.z_search-open{
.logo{
opacity:0;
}
.m_search{
width: 100% - 1.5*@gap;
}
}
}
} }
.menu-phone{ .menu-phone{
.header{ .header{
border-top-left-radius: @border_radius; border-top-left-radius: @border_radius;
border-top-right-radius: @border_radius; border-top-right-radius: @border_radius;
background-color: fade(@color_bg_navbar,90%); background-color: fade(@color_bg_navbar,90%);
color: @color_text_in_header; color: @color_text_in_header;
font-size: @fontsize_base; font-size: @fontsize_base;
line-height: 1.8em; line-height: 1.8em;
padding: 8px @gap+6px; padding: 8px @gap+6px;
} }
position: fixed; position: fixed;
top: @height_navbar + @gap; top: @height_navbar + @gap;
right: 0; right: 0;
z-index:9999 + 1; z-index:9999 + 1;
line-height: 2 * @gap; line-height: 2 * @gap;
background: white; background: white;
border-right: 0; border-right: 0;
box-shadow: @boxshadow_card_raised;
border-radius: @border_radius;
transform: translate3d(-40px, -40px, 0) scale(0,0);
transform-origin: right top;
.enable-trans();
&:hover {
box-shadow: @boxshadow_card_raised; box-shadow: @boxshadow_card_raised;
border-radius: @border_radius; }
transform: translate3d(-40px, -40px, 0) scale(0,0); &:active {
transform-origin: right top; box-shadow: @boxshadow_card_normal;
.enable-trans(); }
&:hover { nav {
box-shadow: @boxshadow_card_raised; padding: @gap/2 0px;
} .nav {
&:active { height: @height_cell;
box-shadow: @boxshadow_card_normal; line-height: @height_cell;
} position: relative;
nav { display: block;
padding: @gap/2 0px; color: @black;
.nav { padding: 2px 20px;
height: @height_cell; border-left: 4px solid transparent;
line-height: @height_cell; border-right: 4px solid transparent;
position: relative; &:hover,&.active{
display: block; border-left: 4px solid @theme_main;
color: @black; background: fade(@theme_main, 10%);
padding: 2px 20px; }
border-left: 4px solid transparent;
border-right: 4px solid transparent;
&:hover,&.active{
border-left: 4px solid @theme_main;
background: fade(@theme_main, 10%);
}
}
} }
}
} }

874
source/less/_main.less
Unescape View File

@ -1,484 +1,484 @@
.l_main { .l_main {
width: ~"calc(100% - 1 * @{width_sidebar})"; width: ~"calc(100% - 1 * @{width_sidebar})";
@media(max-width: @on_laptop) { @media(max-width: @on_laptop) {
width: ~"calc(100% - 1 * @{width_sidebar_m})"; width: ~"calc(100% - 1 * @{width_sidebar_m})";
}
@media(max-width: @on_pad) {
width: 100%;
}
padding-right: @gap;
float: left;
.post-list {
position: relative;
margin: 0px auto;
// columns: 400px;
column-gap: 0;
margin: -@gap /2;
@media(max-width: @on_phone) {
margin: 0;
} }
@media(max-width: @on_pad) { }
width: 100%; #comments {
position: relative;
// padding-top: 1.5*@gap;
@media(max-width: @on_phone) {
// padding-top: @gap;
} }
padding-right: @gap; #valine_container{
float: left; p{
.post-list { line-height: @lineheight_base;
position: relative;
margin: 0px auto;
// columns: 400px;
column-gap: 0;
margin: -@gap /2;
@media(max-width: @on_phone) {
margin: 0;
} }
} .info{
#comments { display: none;
position: relative;
// padding-top: 1.5*@gap;
@media(max-width: @on_phone) {
// padding-top: @gap;
} }
#valine_container{ .vwrap{
p{ border-radius: @border_radius;
line-height: @lineheight_base; border-style: dashed;
} border: 1px dashed fade(@color_text_main, 30%);
.info{ .enable-trans();
display: none; &:hover{
} border: 1px dashed fade(@theme_main, 100%);
.vwrap{
border-radius: @border_radius;
border-style: dashed;
border: 1px dashed fade(@color_text_main, 30%);
.enable-trans();
&:hover{
border: 1px dashed fade(@theme_main, 100%);
}
.vheader{
.vinput{
border-radius: 0;
border-bottom: 1px dashed fade(@color_text_main, 30%);
&:hover{
border-bottom: 1px dashed @theme_main;
}
&:focus{
border-bottom: 1px solid @theme_main;
}
}
}
.vedit .vctrl span {
color: @theme_main;
padding: 0;
margin: 10px;
}
}
button{
border: none;
padding-left: 2.4em;
padding-right: 2.4em;
font-weight: bold;
background-color: @theme_main;
color: white;
border-radius: @border_radius/2;
.enable-trans();
&:hover {
background: darken(@theme_main, 10%);
}
&:active {
// background: lighten(@theme_main, 20%);
}
}
blockquote{
padding: @gap;
border-left: @border_radius_line solid @color_bg_quote;
// border-radius: @border_radius_code_block;
.enable-trans();
p{
text-align: left;
word-wrap: normal;
margin: 0;
font-size: @fontsize_small;
line-height: @fontsize_small * 1.5;
}
}
pre code{
border: none;
}
code{
font-family: @fontfamily_code;
font-size: @fontsize_base * .8;
color: fade(@color_text_main, 90%);
}
a, .vemoji-btn, .vpreview-btn{
color: @color_text_link;
.enable-trans();
&:hover {
color: @color_text_highlight;
text-decoration: underline;
}
&:active {
color: darken(@color_text_highlight, 25%);
}
}
.vhead{
span{
&.vnick{
color: fade(@color_text_main, 90%);
}
}
a{
&.vnick{
color: #ff9800;
font-weight: bold;
&:hover {
color: @color_text_highlight;
text-decoration: underline;
}
}
}
.vsys{
margin: 2px;
padding: 1px 8px;
background-color: fade(@color_text_main, 10%);
}
}
.vcard{
.vquote{
border-left: none;
}
.vh {
border-bottom: 1px dashed fade(@color_text_main, 10%);
}
}
.vmeta{
.vat{
font-weight: bold;
color: @theme_main;
.enable-trans();
&:hover {
color: @color_text_highlight;
text-decoration: underline;
}
&:active {
color: darken(@color_text_highlight, 25%);
}
}
}
.vinput{
color: @color_text_main;
}
p{
color: @color_text_main;
}
} }
.vemojis{ .vheader{
justify-content: space-between; .vinput{
i{ border-radius: 0;
width: auto; border-bottom: 1px dashed fade(@color_text_main, 30%);
height: 36px; &:hover{
padding: 0; border-bottom: 1px dashed @theme_main;
margin: 8px 8px 0 8px; }
.emoji{ &:focus{
height: 24px; border-bottom: 1px solid @theme_main;
margin-top: 6px;
background: transparent;
} }
} }
} }
p{
.emoji{
display: inline;
height: 28px;
background: transparent;
}
}
}
.post-wrapper{
// for firefox
column-break-inside: avoid;
break-inside: avoid-column;
}
.mobile-post() {
.post {
padding: 1.5 * @gap @gap;
.meta {
margin-bottom: @gap;
.title {
font-size: @fontsize_article_title_phone;
}
}
.full-width {
margin-left: -@gap;
margin-right: -@gap;
padding-left: @gap;
padding-right: @gap;
width:~"calc(100% + 2 * @{gap})"
}
.auto-padding {
padding-left: @gap;
padding-right: @gap;
border-bottom-left-radius: @border_radius;
border-bottom-right-radius: @border_radius;
overflow: auto;
}
img,
.highlight {
// width:~"calc(100% + 2 * @{gap})";
// display: block;
}
.highlight{
margin-left: 0*@gap;
margin-right: 0*@gap;
width:~"calc(100% - 0 * @{gap})";
}
@media(max-width:@on_phone) {
.highlight {
margin-left: 0*@gap;
margin-right: 0*@gap;
width:~"calc(100% - 0 * @{gap})";
}
.auto-padding {
padding-left: @gap;
padding-right: @gap;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.vedit .vctrl span {
color: @theme_main;
padding: 0;
margin: 10px;
} }
}
.post-wrapper { }
padding: @gap / 2; button{
.mobile-post(); border: none;
.tags { padding-left: 2.4em;
margin-bottom: -1.5*@gap; padding-right: 2.4em;
font-weight: bold;
background-color: @theme_main;
color: white;
border-radius: @border_radius/2;
.enable-trans();
&:hover {
background: darken(@theme_main, 10%);
} }
@media(max-width:@on_phone) { &:active {
padding: 0 0 @gap 0; // background: lighten(@theme_main, 20%);
} }
} }
.post { blockquote{
position: relative; padding: @gap;
margin: 0 auto; border-left: @border_radius_line solid @color_bg_quote;
padding: 2 * @gap 1.5*@gap; // border-radius: @border_radius_code_block;
//max-width: 768px; .enable-trans();
background: @theme_cardbg; p{
border-radius: @border_radius; text-align: left;
h1{ word-wrap: normal;
font-weight: normal; margin: 0;
font-size: @fontsize_article_title; font-size: @fontsize_small;
line-height: @lineheight_base; line-height: @fontsize_small * 1.5;
color: @color_text_main;
} }
&:extend(.z-depth-main); }
pre code{
border: none;
}
code{
font-family: @fontfamily_code;
font-size: @fontsize_base * .8;
color: fade(@color_text_main, 90%);
}
a, .vemoji-btn, .vpreview-btn{
color: @color_text_link;
.enable-trans(); .enable-trans();
&:hover { &:hover {
box-shadow: @boxshadow_card_raised; color: @color_text_highlight;
text-decoration: underline;
} }
&:active { &:active {
box-shadow: @boxshadow_card_normal; color: darken(@color_text_highlight, 25%);
} }
@media(max-width: @on_phone) { }
border-radius: 0; .vhead{
span{
&.vnick{
color: fade(@color_text_main, 90%);
}
}
a{
&.vnick{
color: #ff9800;
font-weight: bold;
&:hover { &:hover {
box-shadow: @boxshadow_card_normal; color: @color_text_highlight;
text-decoration: underline;
} }
}
} }
.tags a{ .vsys{
color: fade(@color_text_main, 70%); margin: 2px;
padding: 1px 8px;
background-color: fade(@color_text_main, 10%);
} }
.meta {
color: fade(@color_text_main, 70%); }
&#header-meta{ .vcard{
margin-top: 0; .vquote{
margin-bottom: 1*@gap; border-left: none;
}
.vh {
border-bottom: 1px dashed fade(@color_text_main, 10%);
}
}
.vmeta{
.vat{
font-weight: bold;
color: @theme_main;
.enable-trans();
&:hover {
color: @color_text_highlight;
text-decoration: underline;
} }
&#footer-meta{ &:active {
margin-top: 2*@gap; color: darken(@color_text_highlight, 25%);
margin-bottom: 0.5*@gap;
} }
font-size: @fontsize_small * .95; }
.aplayer{ }
.enable-trans(); .vinput{
width: 65px; color: @color_text_main;
height: 65px; }
border-radius: 100%; p{
float: right; color: @color_text_main;
margin: 4px; }
box-shadow: @boxshadow_card_normal; }
&:hover { .vemojis{
border-radius: 25%; justify-content: space-between;
transform: scale(1.1); i{
box-shadow: @boxshadow_card_raised; width: auto;
} height: 36px;
@media(max-width: @on_phone) { padding: 0;
&:hover { margin: 8px 8px 0 8px;
border-radius: 100%; .emoji{
transform: scale(1); height: 24px;
box-shadow: @boxshadow_card_normal; margin-top: 6px;
} background: transparent;
}
}
}
p{
.emoji{
display: inline;
height: 28px;
background: transparent;
}
}
}
.post-wrapper{
// for firefox
column-break-inside: avoid;
break-inside: avoid-column;
}
.mobile-post() {
.post {
padding: 1.5 * @gap @gap;
.meta {
margin-bottom: @gap;
.title {
font-size: @fontsize_article_title_phone;
} }
}
.full-width {
margin-left: -@gap;
margin-right: -@gap;
padding-left: @gap;
padding-right: @gap;
width:~"calc(100% + 2 * @{gap})"
}
.auto-padding {
padding-left: @gap;
padding-right: @gap;
border-bottom-left-radius: @border_radius;
border-bottom-right-radius: @border_radius;
overflow: auto;
}
img,
.highlight {
// width:~"calc(100% + 2 * @{gap})";
// display: block;
}
.highlight{
margin-left: 0*@gap;
margin-right: 0*@gap;
width:~"calc(100% - 0 * @{gap})";
}
@media(max-width:@on_phone) {
.highlight {
margin-left: 0*@gap;
margin-right: 0*@gap;
width:~"calc(100% - 0 * @{gap})";
}
.auto-padding {
padding-left: @gap;
padding-right: @gap;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} }
}
.title { }
left: 0; }
font-size: @fontsize_article_title; .post-wrapper {
@media(max-width: @on_phone) { padding: @gap / 2;
font-size: @fontsize_article_title_phone; .mobile-post();
} .tags {
&:before { margin-bottom: -1.5*@gap;
// content: "#"; }
} @media(max-width:@on_phone) {
a { padding: 0 0 @gap 0;
display: inline; }
line-height: @lineheight_base; }
font-weight: normal; .post {
color: @color_text_main; position: relative;
text-decoration: none; margin: 0 auto;
font-size: @fontsize_article_title; padding: 2 * @gap 1.5*@gap;
@media(max-width: @on_phone) { //max-width: 768px;
font-size: @fontsize_article_title_phone; background: @theme_cardbg;
} border-radius: @border_radius;
&:hover { h1{
color: @color_text_highlight; font-weight: normal;
} font-size: @fontsize_article_title;
} line-height: @lineheight_base;
color: @color_text_main;
}
&:extend(.z-depth-main);
.enable-trans();
&:hover {
box-shadow: @boxshadow_card_raised;
}
&:active {
box-shadow: @boxshadow_card_normal;
}
@media(max-width: @on_phone) {
border-radius: 0;
&:hover {
box-shadow: @boxshadow_card_normal;
}
}
.tags a{
color: fade(@color_text_main, 70%);
}
.meta {
color: fade(@color_text_main, 70%);
&#header-meta{
margin-top: 0;
margin-bottom: 1*@gap;
}
&#footer-meta{
margin-top: 2*@gap;
margin-bottom: 0.5*@gap;
}
font-size: @fontsize_small * .95;
.aplayer{
.enable-trans();
width: 65px;
height: 65px;
border-radius: 100%;
float: right;
margin: 4px;
box-shadow: @boxshadow_card_normal;
&:hover {
border-radius: 25%;
transform: scale(1.1);
box-shadow: @boxshadow_card_raised;
} }
.tags{ @media(max-width: @on_phone) {
display: inline-flex; &:hover {
background: transparent; border-radius: 100%;
word-spacing: normal; transform: scale(1);
box-shadow: @boxshadow_card_normal;
}
} }
@cellH: 28px; }
.metatag {
.enable-trans(); .title {
font-size: @fontsize_small * .95; left: 0;
line-height: @cellH + 1px; font-size: @fontsize_article_title;
height: @cellH; @media(max-width: @on_phone) {
color: fade(@color_text_main, 70%); font-size: @fontsize_article_title_phone;
display: inline-flex; }
background: @theme_background; &:before {
margin: 4px 4px 4px 0px; // content: "#";
padding: 0px 8px 0px 2px; }
border-radius: 0.5*@border_radius_code_block; a {
border-left: 25px solid lighten(@theme_main, 10%); display: inline;
&:hover { line-height: @lineheight_base;
background: lighten(@theme_main, 10%); font-weight: normal;
color: @color_text_in_header; color: @color_text_main;
a{ text-decoration: none;
color: @color_text_in_header; font-size: @fontsize_article_title;
@media(max-width: @on_phone) {
font-size: @fontsize_article_title_phone;
} }
.fas, .fab{ &:hover {
color: @color_text_in_header; color: @color_text_highlight;
} }
border-left-width: 30px; }
padding-right: 10px; }
} .tags{
i{ display: inline-flex;
width: 28px; background: transparent;
line-height: @cellH; word-spacing: normal;
color: @color_text_in_header; }
margin-left: -28px; @cellH: 28px;
} .metatag {
.enable-trans();
font-size: @fontsize_small * .95;
line-height: @cellH + 1px;
height: @cellH;
color: fade(@color_text_main, 70%);
display: inline-flex;
background: @theme_background;
margin: 4px 4px 4px 0px;
padding: 0px 8px 0px 2px;
border-radius: 0.5*@border_radius_code_block;
border-left: 25px solid lighten(@theme_main, 10%);
&:hover {
background: lighten(@theme_main, 10%);
color: @color_text_in_header;
a{ a{
color: fade(@color_text_main, 70%); color: @color_text_in_header;
.enable-trans();
&:hover {
color: @color_text_highlight;
color: @color_text_in_header;
}
}
.categories {
font-weight: normal;
color: fade(@color_text_main, 70%);
} }
.tag,{ .fas, .fab{
color: fade(@color_text_main, 70%); color: @color_text_in_header;
} }
.fa-spinner{ border-left-width: 30px;
padding-right: 10px;
}
i{
width: 28px;
line-height: @cellH;
color: @color_text_in_header;
margin-left: -28px;
}
a{
color: fade(@color_text_main, 70%); color: fade(@color_text_main, 70%);
margin-left: 2px; .enable-trans();
} &:hover {
color: @color_text_highlight;
color: @color_text_in_header;
}
}
.categories {
font-weight: normal;
color: fade(@color_text_main, 70%);
}
.tag,{
color: fade(@color_text_main, 70%);
}
.fa-spinner{
color: fade(@color_text_main, 70%);
margin-left: 2px;
}
}
.share{
&:hover {
background: @theme_background;
} }
.share{ .share-body{
&:hover { display: flex;
background: @theme_background; a{
} margin-left: 4px;
.share-body{ img{
display: flex; margin: 2px 0;
a{ height: @cellH - 4px;
margin-left: 4px; width: auto;
img{ background: transparent;
margin: 2px 0; }
height: @cellH - 4px; i{
width: auto; display: inline-block;
background: transparent; margin: 0;
} padding: 0;
i{ color: fade(@color_text_main, 70%);
display: inline-block; }
margin: 0; padding-bottom: 0;
padding: 0; margin-bottom: 0;
color: fade(@color_text_main, 70%); &:hover{
} // background: darken(@color_md_orange, 10%);
padding-bottom: 0; text-decoration: none;
margin-bottom: 0;
&:hover{
// background: darken(@color_md_orange, 10%);
text-decoration: none;
}
} }
} }
} }
}
} }
.full-width,.highlight{ .full-width,.highlight{
margin-left: 0*@gap; margin-left: 0*@gap;
margin-right: 0*@gap; margin-right: 0*@gap;
width:~"calc(100% - 0 * @{gap})"; width:~"calc(100% - 0 * @{gap})";
} }
img { img {
display: block; display: block;
max-width: 100%; max-width: 100%;
border-radius: 4px; border-radius: 4px;
background: none; background: none;
} }
} }
@media(max-width:@on_pad) { @media(max-width:@on_pad) {
padding-right: 0; padding-right: 0;
@media(max-width: @on_phone) { @media(max-width: @on_phone) {
width: 100%; width: 100%;
} }
.mobile-post(); .mobile-post();
} }
.prev-next{ .prev-next{
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
color: fade(@color_text_main, 50%); color: fade(@color_text_main, 50%);
margin: 0; margin: 0;
.prev{ .prev{
text-align: left; text-align: left;
border-top-right-radius: 32px; border-top-right-radius: 32px;
border-bottom-right-radius: 32px; border-bottom-right-radius: 32px;
} }
.next{ .next{
text-align: right; text-align: right;
border-top-left-radius: 32px; border-top-left-radius: 32px;
border-bottom-left-radius: 32px; border-bottom-left-radius: 32px;
} }
p{ p{
margin: @gap; margin: @gap;
} }
a{ a{
color: fade(@color_text_link, 90%); color: fade(@color_text_link, 90%);
} }
section{ section{
color: fade(@color_text_main, 80%); color: fade(@color_text_main, 80%);
padding: @gap; padding: @gap;
border-radius: @border_radius; border-radius: @border_radius;
&:hover { &:hover {
color: @color_text_highlight; color: @color_text_highlight;
} }
} }
@media(max-width:@on_phone) { @media(max-width:@on_phone) {
section{ section{
border-radius: 0; border-radius: 0;
} }
} }
} }
} }

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

@ -424,15 +424,15 @@ table {
} }
td, td,
th { th {
padding: 4px 8px; padding: 4px 8px;
border: 1px solid @theme_background; border: 1px solid @theme_background;
} }
tr { tr {
// border-bottom: 2px solid #eee; // border-bottom: 2px solid #eee;
// background-color: @theme_main; // background-color: @theme_main;
} }
&>thead>th { &>thead>th {
// border-bottom-width: 2px; // border-bottom-width: 2px;
} }
} }

24
source/less/_side.less
Unescape View File

@ -1,15 +1,15 @@
.l_side { .l_side {
width: @width_sidebar; width: @width_sidebar;
float: right; float: right;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media(max-width: @on_laptop) { @media(max-width: @on_laptop) {
width: @width_sidebar_m; width: @width_sidebar_m;
} }
@media(max-width: @on_pad) { @media(max-width: @on_pad) {
margin: @gap 0 0; margin: @gap 0 0;
width: 100%; width: 100%;
} }
} }

196
source/less/_toc.less
Unescape View File

@ -1,110 +1,110 @@
.l_side .toc-wrapper{ .l_side .toc-wrapper{
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
border-radius: @border_radius; border-radius: @border_radius;
position: sticky;
top: @height_navbar + 1*@gap;
.enable-trans();
header{
position: sticky; position: sticky;
top: @height_navbar + 1*@gap; width: 100%;
.enable-trans(); top: 0;
}
.content{
padding: @gap/2 0;
max-height: 500px;
overflow: auto;
&.pure{
padding-top: 0; // 适合白色导航栏背景
}
a {
border-left: 4px solid transparent;
&:hover{
color: fade(@color_text_main, 100%);
border-left: 4px solid @theme_main;
}
&:active{
border-left: 8px solid @theme_main;
}
&.active{
color: fade(@color_text_main, 100%);
border-left: 4px solid @theme_main;
background: fade(@theme_main, 10%);
}
}
}
&.active{
position: fixed;
box-shadow: @boxshadow_card_raised;
header{ header{
position: sticky; .s-toc{
width: 100%; transform: rotate(30deg);
top: 0; }
} }
.content{ }
padding: @gap/2 0; .enable-trans();
max-height: 500px; @media(max-width: @on_phone){
overflow: auto; position: fixed;
&.pure{ max-height: 1000px;
padding-top: 0; // 适合白色导航栏背景 // width: ~"calc(100% - 2 * @{gap})";
} top: @height_navbar;
a { box-shadow: @boxshadow_card_raised;
border-left: 4px solid transparent; visibility: hidden;
&:hover{ .rightBtn{
color: fade(@color_text_main, 100%); display: none;
border-left: 4px solid @theme_main;
}
&:active{
border-left: 8px solid @theme_main;
}
&.active{
color: fade(@color_text_main, 100%);
border-left: 4px solid @theme_main;
background: fade(@theme_main, 10%);
}
}
} }
transform: scale(0,0);
transform-origin: right top;
&.active{ &.active{
position: fixed; visibility: visible;
box-shadow: @boxshadow_card_raised; transform: scale(1,1);
header{
.s-toc{
transform: rotate(30deg);
}
}
}
.enable-trans();
@media(max-width: @on_phone){
position: fixed;
max-height: 1000px;
// width: ~"calc(100% - 2 * @{gap})";
top: @height_navbar;
box-shadow: @boxshadow_card_raised;
visibility: hidden;
.rightBtn{
display: none;
}
transform: scale(0,0);
transform-origin: right top;
&.active{
visibility: visible;
transform: scale(1,1);
}
} }
}
a { a {
padding-left: 8px; padding-left: 8px;
color: fade(@color_text_main, 60%); color: fade(@color_text_main, 60%);
font-size: @fontsize_small; font-size: @fontsize_small;
display: inline-block; display: inline-block;
}
ol{
.toc-item.toc-level-1 {
.toc-child a{
padding-left: 0.8*@gap;
font-weight: normal;
}
} }
ol{ .toc-item.toc-level-2 {
.toc-item.toc-level-1 { .toc-child a{
.toc-child a{ padding-left: 1.6*@gap;
padding-left: 0.8*@gap; font-weight: normal;
font-weight: normal; }
} }
} .toc-item.toc-level-3 {
.toc-item.toc-level-2 { .toc-child a{
.toc-child a{ padding-left: 2.4*@gap;
padding-left: 1.6*@gap; font-weight: normal;
font-weight: normal; }
} }
} .toc-item.toc-level-4 {
.toc-item.toc-level-3 { .toc-child a{
.toc-child a{ padding-left: 3.2*@gap;
padding-left: 2.4*@gap; font-weight: normal;
font-weight: normal; }
}
}
.toc-item.toc-level-4 {
.toc-child a{
padding-left: 3.2*@gap;
font-weight: normal;
}
}
li{
a{
padding: 0 @gap/2 0 (@gap - 5px);
font-weight: bold;
width: 100%;
}
width: auto;
text-align: left;
// &:extend(.txt-ellipsis);
}
} }
&:empty{ li{
display:none; a{
padding: 0 @gap/2 0 (@gap - 5px);
font-weight: bold;
width: 100%;
}
width: auto;
text-align: left;
// &:extend(.txt-ellipsis);
} }
}
&:empty{
display:none;
}
} }

50
source/less/_widget.less
Unescape View File

@ -245,22 +245,22 @@
} }
&.tagcloud{ &.tagcloud{
.content{ .content{
text-align: justify; text-align: justify;
padding: @gap/2 @gap; padding: @gap/2 @gap;
&.pure{ &.pure{
padding: 0 @gap @gap @gap; // 适合白色导航栏背景 padding: 0 @gap @gap @gap; // 适合白色导航栏背景
}
a{
display:inline-block;
.enable-trans(.1s);
line-height: 1.6em;
&:hover{
color: @color_text_highlight !important; //to cover inline style.
text-decoration: underline
}
}
} }
a{
display:inline-block;
.enable-trans(.1s);
line-height: 1.6em;
&:hover{
color: @color_text_highlight !important; //to cover inline style.
text-decoration: underline
}
}
}
} }
&.music{ &.music{
@ -270,16 +270,16 @@
} }
} }
.content{ .content{
padding: @gap/2+4px; padding: @gap/2+4px;
padding-top: @gap/2; padding-top: @gap/2;
&.pure{ &.pure{
padding-top: @gap/4; // 适合白色导航栏背景 padding-top: @gap/4; // 适合白色导航栏背景
} }
.aplayer{ .aplayer{
border-radius: 4px; border-radius: 4px;
color: #666; color: #666;
font-family: @fontfamily_base; font-family: @fontfamily_base;
} }
} }
} }
} }

Write Preview
Loading…
Cancel
Save