xaoxuu
4 years ago
parent
f5153398da
commit
152600b59c
25 changed files with 99 additions and 4965 deletions
@ -1,94 +0,0 @@ |
||||
#archive-page { |
||||
margin-bottom: @gap * 2; |
||||
.archive { |
||||
position: relative; |
||||
.archive-year { |
||||
font-size: @fontsize_base; |
||||
margin-top: 4em; |
||||
margin-bottom: 1em; |
||||
&:first-child{ |
||||
margin-top: 0em; |
||||
padding-top: 0; |
||||
} |
||||
h2 { |
||||
margin-top: 1em; |
||||
} |
||||
a { |
||||
color: @color_text_main; |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
.archive-post { |
||||
a { |
||||
width: 100%; |
||||
display: inline-flex; |
||||
flex-flow: row nowrap; |
||||
justify-content: flex-start; |
||||
align-items: flex-start; |
||||
text-decoration: none; |
||||
&.child{ |
||||
padding-left: 2*@gap; |
||||
} |
||||
} |
||||
time { |
||||
color: @color_text_main; |
||||
flex: none; |
||||
font-size: @fontsize_small; |
||||
padding: .5em .5em .5em 3em; |
||||
@media (max-width: @on_phone) { |
||||
padding: .5em .5em .5em 0; |
||||
} |
||||
} |
||||
.title { |
||||
flex: auto; |
||||
padding: .5em; |
||||
font-size: @fontsize_small; |
||||
color: @color_text_main; |
||||
i{ |
||||
color: @theme_main; |
||||
&.music { |
||||
color: @color_text_highlight; |
||||
} |
||||
&.red { |
||||
color: @color_mac_close; |
||||
} |
||||
&.green { |
||||
color: @color_mac_maximize; |
||||
} |
||||
&.yellow { |
||||
color: @color_mac_minimize; |
||||
} |
||||
&.blue { |
||||
color: @color_mac_finder; |
||||
} |
||||
&.theme { |
||||
color: @theme_main; |
||||
} |
||||
&.accent { |
||||
color: @color_text_highlight; |
||||
} |
||||
&.orange { |
||||
color: @color_md_deep_orange; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.all-tags { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
align-items: baseline; |
||||
word-spacing: @gap/2; |
||||
text-align: center; |
||||
a { |
||||
color: fade(@color_text_main, 80%); |
||||
margin-right: @gap; |
||||
&:hover,&:active,&.active{ |
||||
color: @color_text_highlight; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,972 +0,0 @@ |
||||
.article { |
||||
color: @color_text_main; |
||||
font-size: @fontsize_base; |
||||
line-height: @lineheight_base; |
||||
// word-break: break-all; |
||||
word-wrap: break-word; |
||||
img { |
||||
position: relative; |
||||
margin: 0 auto; |
||||
background: white; |
||||
.enable-trans(); |
||||
@media (max-width: @on_phone) { |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
span{ |
||||
img { |
||||
display: inline; |
||||
margin: auto; |
||||
} |
||||
} |
||||
.aplayer{ |
||||
margin: 0; |
||||
display: inline-block; |
||||
width: 400px; |
||||
max-width: 100%; |
||||
border-radius: 4px; |
||||
color: #666; |
||||
font-family: @fontfamily_base; |
||||
} |
||||
p.small-img, |
||||
div.small-img { |
||||
img { |
||||
width: auto; |
||||
max-width: 100%; |
||||
margin: 0; |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
p { |
||||
// margin: 20px 0px; |
||||
margin-top: .6em; |
||||
margin-bottom: .6em; |
||||
// text-align: justify; |
||||
strong{ |
||||
// color: @color_text_main; |
||||
// padding-left: 2px; |
||||
// padding-right: 2px; |
||||
} |
||||
u{ |
||||
color: @color_md_deep_orange; |
||||
} |
||||
s{ |
||||
color: fade(@color_text_main, 70%); |
||||
} |
||||
max-width: 100%; |
||||
overflow: auto; |
||||
&.has-jax{ |
||||
font-family: @fontfamily_code; |
||||
background: @color_bg_mathjax; |
||||
padding: @gap @gap/2; |
||||
border-radius: @border_radius_code_block; |
||||
.mjx-chtml.MJXc-display{ |
||||
margin: 0; |
||||
} |
||||
} |
||||
} |
||||
ul, |
||||
ol { |
||||
font-size: @fontsize_base * .95; |
||||
list-style: initial; |
||||
padding-left: 8px; |
||||
margin-left: @gap; |
||||
margin-top: .6em; |
||||
margin-bottom: .6em; |
||||
ul,ol{ |
||||
margin-top: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
&.task-list{ |
||||
padding-left: 0; |
||||
margin-left: 4px; |
||||
li{ |
||||
list-style: none; |
||||
input{ |
||||
margin-right: 4px; |
||||
} |
||||
} |
||||
} |
||||
&.center{ |
||||
justify-content: center; |
||||
} |
||||
&.pure{ |
||||
margin: 0; |
||||
padding: 0; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: stretch; |
||||
br{ |
||||
display: none; |
||||
} |
||||
@media screen and (max-width: 900px){ |
||||
justify-content: space-between; |
||||
} |
||||
li{ |
||||
margin: 8px; |
||||
display: flex; |
||||
width: 75px; |
||||
flex-direction: column; |
||||
align-items: stretch; |
||||
vertical-align: middle; |
||||
text-align: center; |
||||
font-size: .8em; |
||||
line-height: 1.2em; |
||||
overflow: hidden; |
||||
a{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
text-align: center; |
||||
} |
||||
|
||||
img{ |
||||
margin-bottom: 8px; |
||||
} |
||||
|
||||
} |
||||
&.rounded{ |
||||
img{ |
||||
border-radius: 25%; |
||||
} |
||||
} |
||||
|
||||
&.circle{ |
||||
img{ |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
&.about{ |
||||
@media screen and (max-width: 900px){ |
||||
justify-content: center; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
ul { |
||||
& > li{ |
||||
list-style: initial; |
||||
} |
||||
|
||||
} |
||||
ol { |
||||
& > li{ |
||||
list-style: decimal; |
||||
} |
||||
} |
||||
a { |
||||
&:before{ |
||||
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: 0.6em; |
||||
&.title { |
||||
left: 0; |
||||
&:before { |
||||
content: none; |
||||
} |
||||
} |
||||
} |
||||
h1, h2 { |
||||
color: @color_text_header; |
||||
margin-top: @height_h2; |
||||
border-bottom: 1px solid fade(@color_text_main, 10%); |
||||
padding-bottom: .2em; |
||||
} |
||||
h1 { |
||||
font-size: @fontsize_h1; |
||||
} |
||||
h2 { |
||||
font-size: @fontsize_h2; |
||||
text-align: @text_align_h2; |
||||
} |
||||
h3 { |
||||
margin-top: @height_h3; |
||||
font-size: @fontsize_h3; |
||||
color: @color_text_h3; |
||||
text-align: @text_align_h3; |
||||
} |
||||
h4 { |
||||
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; |
||||
} |
||||
h3, h4, h5, h6 { |
||||
&:first-child{ |
||||
margin-top: 0; |
||||
padding-top: 0; |
||||
} |
||||
} |
||||
.subtitle{ |
||||
h6 { |
||||
color: fade(@color_text_main, 90%); |
||||
} |
||||
} |
||||
figure { |
||||
figcaption { |
||||
span { |
||||
display: inline-block; |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
blockquote { |
||||
background: fade(@color_bg_quote, 10%); |
||||
border-left: @border_radius_code_block solid @color_bg_quote; |
||||
border-radius: @border_radius_code_block; |
||||
} |
||||
blockquote,div.info,div.success,div.warning,div.danger { |
||||
p{ |
||||
text-align: left; |
||||
word-wrap: normal; |
||||
font-size: @fontsize_small; |
||||
line-height: @fontsize_small * 1.5; |
||||
margin: .6em 0; |
||||
} |
||||
position: relative; |
||||
width: 100%; |
||||
font-size: @fontsize_small; |
||||
margin: .6em 0; |
||||
padding: .7em 1.2em; |
||||
|
||||
.enable-trans(); |
||||
footer { |
||||
padding: 0; |
||||
text-align: justify; |
||||
color: inherit; |
||||
font-style: italic; |
||||
margin: .6em 0; |
||||
cite{ |
||||
&::before{ |
||||
content: '----'; |
||||
padding: 0 .3em; |
||||
} |
||||
color: fade(@color_text_main, 70%); |
||||
margin-left: 1em; |
||||
} |
||||
} |
||||
&.pullquote{ |
||||
&.right{ |
||||
border-left: none; |
||||
border-right: @border_radius_code_block solid @color_bg_quote; |
||||
p{ |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
pre { |
||||
display: block; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
margin-top: .7em; |
||||
margin-bottom: .7em; |
||||
overflow: auto; |
||||
background: @color_bg_code_block; |
||||
font-size: @fontsize_small * .95; |
||||
font-family:@fontfamily_code; |
||||
line-height: @lineheight_base; |
||||
border: 1px solid darken(@color_bg_code_block, 10%); |
||||
padding: @gap; |
||||
} |
||||
div>pre{ |
||||
border-radius: @border_radius_code_block; |
||||
&>code{ |
||||
padding: 0; |
||||
margin: 0; |
||||
background: transparent; |
||||
color: fade(@color_text_main, 90%); |
||||
} |
||||
} |
||||
code { |
||||
font-family: @fontfamily_code; |
||||
padding: 3px 3px 0px 3px; |
||||
margin: 0px 1px; |
||||
vertical-align: center; |
||||
border-radius: 2px; |
||||
border: 1px solid fade(@color_bg_code, 20%); |
||||
font-size: @fontsize_base * .8; |
||||
background: @color_bg_code; |
||||
color: @color_text_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; |
||||
background-color: @theme_main; |
||||
padding: .2em 2.4em; |
||||
color: @color_text_in_header; |
||||
border-radius: @border_radius/2; |
||||
.enable-trans(); |
||||
&:hover { |
||||
background: darken(@theme_main, 10%); |
||||
} |
||||
&:active { |
||||
// background: darken(@theme_main, 20%); |
||||
} |
||||
} |
||||
|
||||
} |
||||
.tags { |
||||
position: relative; |
||||
padding-top: @gap/2; |
||||
padding-bottom: @gap/2; |
||||
font-size: @fontsize_small; |
||||
line-height: @lineheight_base; |
||||
margin-top: @gap; |
||||
background: @color_bg_code_block; |
||||
&.article-tags { |
||||
// padding-top: 2*@gap; |
||||
// background: transparent; |
||||
} |
||||
word-spacing: @gap/2; |
||||
a { |
||||
color: @color_text_main; |
||||
position: relative; |
||||
display: inline-block; |
||||
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%; |
||||
|
||||
td, |
||||
th { |
||||
padding: 12px 24px; |
||||
} |
||||
tr { |
||||
// border-bottom: 1px solid #ddd; |
||||
} |
||||
&>thead>th { |
||||
// border-bottom-width: 2px; |
||||
} |
||||
} |
||||
@media (max-width: @on_phone) { |
||||
ul, |
||||
ol { |
||||
font-size: @fontsize_base * .95; |
||||
} |
||||
figure { |
||||
font-size: 13px; |
||||
line-height: 1.6em; |
||||
} |
||||
} |
||||
.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: @color_bg_code_block; |
||||
border-radius: @border_radius_code_block; |
||||
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_code_block; |
||||
border-bottom-right-radius: @border_radius_code_block; |
||||
} |
||||
.next{ |
||||
text-align: right; |
||||
margin-left: @gap/2; |
||||
margin-right: 0; |
||||
border-top-left-radius: @border_radius_code_block; |
||||
border-bottom-left-radius: @border_radius_code_block; |
||||
} |
||||
|
||||
} |
||||
|
||||
p btn, li btn { |
||||
.btn-wrapper(); |
||||
} |
||||
|
||||
p{ |
||||
&[small]{ |
||||
font-size: @fontsize_small; |
||||
} |
||||
&[large]{ |
||||
font-size: 4em; |
||||
line-height: 1.2em; |
||||
} |
||||
&[huge]{ |
||||
font-size: 6em; |
||||
line-height: 1.2em; |
||||
} |
||||
&[small],&[large],&[huge]{ |
||||
margin: 0; |
||||
} |
||||
&[bold]{ |
||||
font-weight: bold; |
||||
} |
||||
&[left]{ |
||||
text-align: left; |
||||
} |
||||
&[center]{ |
||||
text-align: center; |
||||
} |
||||
&[right]{ |
||||
text-align: right; |
||||
} |
||||
|
||||
} |
||||
red,p[red]{ |
||||
color: @color_mac_close; |
||||
} |
||||
yellow,p[yellow]{ |
||||
color: @color_mac_minimize; |
||||
} |
||||
green,p[green]{ |
||||
color: @color_mac_maximize; |
||||
} |
||||
cyan,p[cyan]{ |
||||
color: @color_mac_finder; |
||||
} |
||||
blue,p[blue]{ |
||||
color: @color_md_blue; |
||||
} |
||||
gray,p[gray]{ |
||||
color: #666; |
||||
} |
||||
btns { |
||||
.btns-wrapper(); |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
.highlight { |
||||
position: relative; |
||||
width: 100%; |
||||
margin-top: .7em; |
||||
margin-bottom: .7em; |
||||
overflow: auto; |
||||
display: block; |
||||
background: @color_bg_code_block; |
||||
font-size: @fontsize_small * .95; |
||||
font-family:@fontfamily_code; |
||||
line-height: @lineheight_base; |
||||
border-radius: @border_radius_code_block; |
||||
border: 1px solid darken(@color_bg_code_block, 10%); |
||||
.enable-trans(); |
||||
figcaption{ |
||||
position: sticky; |
||||
left: 0; |
||||
padding: @gap/4 @gap/2 @gap/4 @gap/2; |
||||
background-color: darken(@color_bg_code_block, 5%); |
||||
|
||||
} |
||||
table { |
||||
td,th{ |
||||
padding: 0; |
||||
border: none; |
||||
} |
||||
margin: 0; |
||||
background-color: transparent; |
||||
border: none; |
||||
tr{ |
||||
background-color: transparent; |
||||
&:hover{ |
||||
background-color: transparent; |
||||
} |
||||
} |
||||
.gutter{ |
||||
width: 24px; |
||||
padding: 0 12px; |
||||
text-align: right; |
||||
border-width: 0; |
||||
margin-left: 0; |
||||
position: sticky; |
||||
left: 0; |
||||
background-color: darken(@color_bg_code_block, 5%); |
||||
pre{ |
||||
color: fade(@color_text_main, 80%); |
||||
} |
||||
} |
||||
pre{ |
||||
background: transparent; |
||||
margin: 0; |
||||
padding: 0; |
||||
border: none; |
||||
} |
||||
.code{ |
||||
padding: @gap; |
||||
vertical-align: top; |
||||
background-color: transparent; |
||||
&:before{ |
||||
content: ""; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
color: fade(@color_text_main, 80%); |
||||
font-size: @fontsize_footnote; |
||||
padding: 4px 8px; |
||||
line-height: @lineheight_base; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
&.html .code:before{ |
||||
content: "HTML"; |
||||
} |
||||
&.js .code:before{ |
||||
content: "JS"; |
||||
} |
||||
&.bash .code:before{ |
||||
content: "BASH"; |
||||
} |
||||
&.shell .code:before{ |
||||
content: "SHELL"; |
||||
} |
||||
&.css .code:before{ |
||||
content: "CSS"; |
||||
} |
||||
&.less .code:before{ |
||||
content: "LESS"; |
||||
} |
||||
&.swift .code:before{ |
||||
content: "SWIFT"; |
||||
} |
||||
&.objc .code:before{ |
||||
content: "OBJECTIVE-C"; |
||||
} |
||||
&.c .code:before{ |
||||
content: "C"; |
||||
} |
||||
&.cpp .code:before{ |
||||
content: "C++"; |
||||
} |
||||
&.java .code:before{ |
||||
content: "JAVA"; |
||||
} |
||||
&.python .code:before{ |
||||
content: "PYTHON"; |
||||
} |
||||
&.yaml .code:before{ |
||||
content: "YAML"; |
||||
} |
||||
&.plain .code:before{ |
||||
content: ""; |
||||
} |
||||
|
||||
&::-webkit-scrollbar { |
||||
height: @border_radius_line; |
||||
width: @border_radius_line; |
||||
} |
||||
// /* Track */ |
||||
|
||||
&::-webkit-scrollbar-track-piece { |
||||
background: transparent; |
||||
} |
||||
|
||||
|
||||
/* Handle */ |
||||
|
||||
&::-webkit-scrollbar-thumb { |
||||
background: darken(@color_bg_code_block, 5%); |
||||
cursor: pointer; |
||||
border-radius: @border_radius_code_block; |
||||
.enable-trans(); |
||||
&:hover { |
||||
background: darken(@color_bg_code_block, 12%); |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.article { |
||||
@media (max-width: @on_phone) { |
||||
.highlight { |
||||
font-size: @fontsize_small * .95 * .95; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.art-item-footer{ |
||||
height: 40px; |
||||
line-height: @lineheight_base; |
||||
font-size: @fontsize_small; |
||||
.art-item-left,.art-item-right{ |
||||
width:50%; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
} |
||||
.art-item-left{ |
||||
float: left; |
||||
text-align: left; |
||||
} |
||||
.art-item-right{ |
||||
float: right; |
||||
text-align: right; |
||||
} |
||||
@media (max-width: @on_phone) { |
||||
font-size: @fontsize_small * .95 * .95; |
||||
} |
||||
} |
||||
|
||||
@hl_keyword: #9c27b0; |
||||
@hl_blue: #1E80F0; |
||||
@hl_cyan: #17AFCA; |
||||
@hl_green: #3FA33F; |
||||
@hl_light_blue: #6ECDF9; |
||||
@hl_red: #EE2B29; |
||||
@hl_orange: #FB3F1B; |
||||
@hl_amber: #FD8607; |
||||
|
||||
pre{ |
||||
// 行 |
||||
line-height: @lineheight_base*1.1; |
||||
.line{ |
||||
color: fade(@color_text_main, 90%); |
||||
} |
||||
.marked{ |
||||
background-color: fade(@color_mac_minimize, 40%); |
||||
padding: 3px 8px 3px 0; |
||||
border-radius: 2px; |
||||
width: 100%; |
||||
} |
||||
.title{ |
||||
color: @color_md_indigo; |
||||
} |
||||
// 注释 |
||||
.comment { |
||||
color: fade(darken(@color_md_green, 10%), 70%); |
||||
} |
||||
.keyword, .javascript .function, .attr { |
||||
color: @hl_keyword; |
||||
} |
||||
.type, .built_in, .tag .name{ |
||||
color: @color_md_light_blue; |
||||
} |
||||
.variable, .attribute, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo { |
||||
color: @hl_amber; |
||||
} |
||||
.number, .preprocessor, .literal, .params, .constant { |
||||
color: @hl_amber; |
||||
} |
||||
.class, .ruby .class .title, .css .rules .attribute { |
||||
color: @color_md_orange; |
||||
} |
||||
.string { |
||||
color: darken(@color_md_green, 10%); |
||||
} |
||||
.value, .inheritance, .header, .ruby .symbol, .xml .cdata { |
||||
color: @color_md_green; |
||||
} |
||||
.css .hexcolor { |
||||
color: #66cccc; |
||||
} |
||||
.function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title { |
||||
color: #6699cc; |
||||
} |
||||
|
||||
} |
||||
.html{ |
||||
.tag .name{ |
||||
color: @hl_red; |
||||
} |
||||
} |
||||
|
||||
//代码块复制按钮 |
||||
.highlight{ |
||||
//方便copy代码按钮（btn-copy）的定位 |
||||
position: relative; |
||||
} |
||||
.btn-copy { |
||||
display: inline-block; |
||||
cursor: pointer; |
||||
background-color: #FCFCFC; |
||||
background-image: linear-gradient(#fcfcfc,#eee); |
||||
border: 1px solid #d5d5d5; |
||||
border-radius: 2px; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
-webkit-appearance: none; |
||||
font-size: 13px; |
||||
font-weight: 700; |
||||
line-height: 20px; |
||||
color: #666; |
||||
padding: 2px 6px; |
||||
position: absolute; |
||||
right: 5px; |
||||
top: 5px; |
||||
opacity: 0; |
||||
.enable-trans(); |
||||
&:hover{ |
||||
color: #444; |
||||
} |
||||
} |
||||
.btn-copy span { |
||||
margin-left: 5px; |
||||
} |
||||
.highlight:hover .btn-copy{ |
||||
opacity: 1; |
||||
} |
||||
|
||||
|
||||
.article-entry{ |
||||
div.info { |
||||
background-color: fade(@color_mac_finder, 20%); |
||||
border-left: @border_radius_code_block solid @color_mac_finder; |
||||
border-radius: @border_radius_code_block; |
||||
:before { |
||||
content: " "; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -14.5px; |
||||
margin-top: -12px; |
||||
width: 24px; |
||||
height: 24px; |
||||
border-radius: 50%; |
||||
text-align: center; |
||||
color: #fff; |
||||
background-size: 16px 16px; |
||||
background-position: 4px 4px; |
||||
background-repeat: no-repeat; |
||||
background-color: @color_mac_finder; |
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSIxNzkyIiBoZWlnaHQ9IjE3OTIiIHZpZXdCb3g9IjAgMCAxNzkyIDE3OTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyMTYgMTM0NHYxMjhxMCAyNi0xOSA0NXQtNDUgMTloLTUxMnEtMjYgMC00NS0xOXQtMTktNDV2LTEyOHEwLTI2IDE5LTQ1dDQ1LTE5aDY0di0zODRoLTY0cS0yNiAwLTQ1LTE5dC0xOS00NXYtMTI4cTAtMjYgMTktNDV0NDUtMTloMzg0cTI2IDAgNDUgMTl0MTkgNDV2NTc2aDY0cTI2IDAgNDUgMTl0MTkgNDV6bS0xMjgtMTE1MnYxOTJxMCAyNi0xOSA0NXQtNDUgMTloLTI1NnEtMjYgMC00NS0xOXQtMTktNDV2LTE5MnEwLTI2IDE5LTQ1dDQ1LTE5aDI1NnEyNiAwIDQ1IDE5dDE5IDQ1eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); |
||||
} |
||||
} |
||||
|
||||
div.success { |
||||
background-color: fade(@color_mac_maximize, 20%); |
||||
border-left: @border_radius_code_block solid @color_mac_maximize; |
||||
border-radius: @border_radius_code_block; |
||||
:before { |
||||
content: " "; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -14.5px; |
||||
margin-top: -12px; |
||||
width: 24px; |
||||
height: 24px; |
||||
border-radius: 50%; |
||||
text-align: center; |
||||
color: #fff; |
||||
background-size: 16px 16px; |
||||
background-position: 4px 4px; |
||||
background-repeat: no-repeat; |
||||
background-color: @color_mac_maximize; |
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNjcxIDU2NnEwIDQwLTI4IDY4bC03MjQgNzI0LTEzNiAxMzZxLTI4IDI4LTY4IDI4dC02OC0yOGwtMTM2LTEzNi0zNjItMzYycS0yOC0yOC0yOC02OHQyOC02OGwxMzYtMTM2cTI4LTI4IDY4LTI4dDY4IDI4bDI5NCAyOTUgNjU2LTY1N3EyOC0yOCA2OC0yOHQ2OCAyOGwxMzYgMTM2cTI4IDI4IDI4IDY4eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); |
||||
} |
||||
} |
||||
|
||||
|
||||
div.warning { |
||||
background-color: fade(@color_mac_minimize, 20%); |
||||
border-left: @border_radius_code_block solid @color_mac_minimize; |
||||
border-radius: @border_radius_code_block; |
||||
:before { |
||||
content: " "; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -14.5px; |
||||
margin-top: -12px; |
||||
width: 24px; |
||||
height: 24px; |
||||
border-radius: 50%; |
||||
text-align: center; |
||||
color: #fff; |
||||
background-size: 16px 16px; |
||||
background-position: 4px 4px; |
||||
background-repeat: no-repeat; |
||||
background-color: @color_mac_minimize; |
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMDg4IDEyNTZ2MjQwcTAgMTYtMTIgMjh0LTI4IDEyaC0yNDBxLTE2IDAtMjgtMTJ0LTEyLTI4di0yNDBxMC0xNiAxMi0yOHQyOC0xMmgyNDBxMTYgMCAyOCAxMnQxMiAyOHptMzE2LTYwMHEwIDU0LTE1LjUgMTAxdC0zNSA3Ni41LTU1IDU5LjUtNTcuNSA0My41LTYxIDM1LjVxLTQxIDIzLTY4LjUgNjV0LTI3LjUgNjdxMCAxNy0xMiAzMi41dC0yOCAxNS41aC0yNDBxLTE1IDAtMjUuNS0xOC41dC0xMC41LTM3LjV2LTQ1cTAtODMgNjUtMTU2LjV0MTQzLTEwOC41cTU5LTI3IDg0LTU2dDI1LTc2cTAtNDItNDYuNS03NHQtMTA3LjUtMzJxLTY1IDAtMTA4IDI5LTM1IDI1LTEwNyAxMTUtMTMgMTYtMzEgMTYtMTIgMC0yNS04bC0xNjQtMTI1cS0xMy0xMC0xNS41LTI1dDUuNS0yOHExNjAtMjY2IDQ2NC0yNjYgODAgMCAxNjEgMzF0MTQ2IDgzIDEwNiAxMjcuNSA0MSAxNTguNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="); |
||||
} |
||||
} |
||||
|
||||
div.danger { |
||||
background-color: fade(@color_mac_close, 20%); |
||||
border-left: @border_radius_code_block solid @color_mac_close; |
||||
border-radius: @border_radius_code_block; |
||||
:before { |
||||
content: " "; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -14.5px; |
||||
margin-top: -12px; |
||||
width: 24px; |
||||
height: 24px; |
||||
border-radius: 50%; |
||||
text-align: center; |
||||
color: #fff; |
||||
background-size: 16px 16px; |
||||
background-position: 4px 4px; |
||||
background-repeat: no-repeat; |
||||
background-color: @color_mac_close; |
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMDg4IDEyNDh2MjI0cTAgMjYtMTkgNDV0LTQ1IDE5aC0yNTZxLTI2IDAtNDUtMTl0LTE5LTQ1di0yMjRxMC0yNiAxOS00NXQ0NS0xOWgyNTZxMjYgMCA0NSAxOXQxOSA0NXptMzAtMTA1NmwtMjggNzY4cS0xIDI2LTIwLjUgNDV0LTQ1LjUgMTloLTI1NnEtMjYgMC00NS41LTE5dC0yMC41LTQ1bC0yOC03NjhxLTEtMjYgMTcuNS00NXQ0NC41LTE5aDMyMHEyNiAwIDQ0LjUgMTl0MTcuNSA0NXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="); |
||||
} |
||||
} |
||||
|
||||
.widget{ |
||||
background: transparent; |
||||
margin: .6em 0; |
||||
font-family: @fontfamily_base; |
||||
font-size: @fontsize_base; |
||||
box-shadow: none; |
||||
border-radius: @border_radius_code_block; |
||||
cursor: auto; |
||||
background: @color_bg_code_block; |
||||
padding: @gap/2 0; |
||||
.enable-trans(); |
||||
&:hover { |
||||
box-shadow: none; |
||||
} |
||||
&:active { |
||||
box-shadow: none; |
||||
} |
||||
header { |
||||
padding: @gap/4 .6em; |
||||
padding-bottom: 0; |
||||
color: fade(@color_text_main, 85%); |
||||
} |
||||
&.copyright,&.qrcode{ |
||||
background: none; |
||||
padding: 0; |
||||
header { |
||||
display: none; |
||||
} |
||||
.content{ |
||||
padding: 0; |
||||
} |
||||
} |
||||
.content{ |
||||
padding: 0 .6em; |
||||
margin: 0; |
||||
ul.entry, ul.popular-posts{ |
||||
padding-left: 8px; |
||||
margin-left: @gap; |
||||
a{ |
||||
display: inline; |
||||
border-left: none; |
||||
padding: 0; |
||||
padding-left: 4px; |
||||
color: inherit; |
||||
font-weight: normal; |
||||
&:hover,&.active,&:active{ |
||||
border-left: none; |
||||
background: none; |
||||
color: @color_text_highlight; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&.qrcode > .content{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding-left: @gap; |
||||
padding-right: @gap; |
||||
&>fancybox, &>img{ |
||||
margin: 0 @gap/2; |
||||
} |
||||
img{ |
||||
margin-bottom: 4px; |
||||
} |
||||
margin-bottom: 4px; |
||||
} |
||||
} |
||||
.widget-blur{ |
||||
backdrop-filter: none; |
||||
} |
||||
} |
||||
@ -1,755 +0,0 @@ |
||||
/* Basic Settings */ |
||||
|
||||
* { |
||||
box-sizing: border-box; |
||||
outline: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
|
||||
/* My Base */ |
||||
|
||||
html { |
||||
color: @color_text_main; |
||||
width: 100%; |
||||
height: 100%; |
||||
font-family: @fontfamily_base; |
||||
font-size: @fontsize_base; |
||||
line-height: 1.5rem; |
||||
-webkit-text-size-adjust: 100%; |
||||
-ms-text-size-adjust: 100%; |
||||
text-rendering: optimizelegibility; |
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||
} |
||||
|
||||
body { |
||||
background-color: @theme_background; |
||||
&.modal-active { |
||||
overflow: hidden; |
||||
@media (max-width: @on_modal_threshold) { |
||||
position: fixed; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
} |
||||
} |
||||
&.z_menu-open { |
||||
.menu-phone { |
||||
transform: translate3d(-@gap, 0, 0); |
||||
} |
||||
} |
||||
} |
||||
|
||||
fancybox{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
.backstretch { |
||||
|
||||
} |
||||
.cover-wrapper{ |
||||
padding-bottom: 2px; |
||||
.cover{ |
||||
top: 0; |
||||
left: 0; |
||||
max-width: 100%; |
||||
height: ~"calc(100vh)"; |
||||
display: flex; |
||||
flex-wrap: nowrap; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
align-self: center; |
||||
align-content: center; |
||||
color: fade(@color_text_main, 75%); |
||||
padding: @gap; |
||||
.title, .logo{ |
||||
margin-top: ~"calc(30vh)"; |
||||
text-align: center; |
||||
} |
||||
.title{ |
||||
font-size: @fontsize_h1*2.2; |
||||
line-height: @fontsize_h1*2.2; |
||||
} |
||||
.subtitle{ |
||||
font-size: @fontsize_small; |
||||
} |
||||
.logo{ |
||||
max-height: 100px; |
||||
max-width: ~"calc(100% - 4*@{gap})"; |
||||
} |
||||
.white{ |
||||
color: white; |
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
.title, .logo { |
||||
font-size: @fontsize_h1*2; |
||||
line-height: @fontsize_h1*2; |
||||
} |
||||
} |
||||
.m_search{ |
||||
@iconW: 32px; |
||||
@iconMargin: 4px; |
||||
margin-top: ~"calc(2vh + 32px)"; |
||||
position: relative; |
||||
max-width: ~"calc(100% - 1*@{gap})"; |
||||
width: 340px; |
||||
// @media(max-width: @on_laptop){ |
||||
// width: 1.4*@width_sidebar_m; |
||||
// } |
||||
line-height: @height_navbar - @gap; |
||||
vertical-align: middle; |
||||
.form { |
||||
position: relative; |
||||
display: block; |
||||
width: 100%; |
||||
} |
||||
.icon,.input{ |
||||
.enable-trans(.3s); |
||||
} |
||||
.icon { |
||||
position: absolute; |
||||
display:block; |
||||
line-height: @searchbar_height_cover; |
||||
height: @searchbar_height_cover; |
||||
width: @iconW; |
||||
top: 0; |
||||
left: @iconMargin+1px; |
||||
font-size: @fontsize_base; |
||||
color: fade(@color_text_main, 60%); |
||||
} |
||||
.input { |
||||
display: block; |
||||
font-size: @fontsize_base; |
||||
line-height: @fontsize_base; |
||||
height: @searchbar_height_cover; |
||||
width: 100%; |
||||
color: @color_text_main; |
||||
box-shadow: none; |
||||
box-sizing: border-box; |
||||
-webkit-appearance: none; |
||||
padding-left: @iconW + @iconMargin; |
||||
@media(max-width: @on_phone){ |
||||
padding-left: @iconW + @iconMargin; |
||||
} |
||||
border-radius: @height_navbar; |
||||
background: lighten(@theme_cardbg, 10%); |
||||
border: 1px dashed transparent; |
||||
.set-placeholder({ |
||||
padding-top: 2px; |
||||
font-size: @fontsize_small; |
||||
color: fade(@color_text_main, 60%); |
||||
}); |
||||
&:hover{ |
||||
~.icon{ |
||||
color: @theme_main; |
||||
} |
||||
} |
||||
&:focus { |
||||
~.icon{ |
||||
color: @theme_main; |
||||
} |
||||
border: 1px solid @theme_main; |
||||
} |
||||
} |
||||
|
||||
} |
||||
&.half{ |
||||
margin-bottom: ~"calc(-100px)"; |
||||
height: ~"calc(60vh - @{height_navbar} + 120px)"; |
||||
.title, .logo{ |
||||
margin-top: ~"calc(28vh - 80px)"; |
||||
} |
||||
.m_search{ |
||||
margin-top: @gap*2; |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
height: ~"calc(40vh - @{height_navbar} + 160px)"; |
||||
.title, .logo{ |
||||
margin-top: ~"calc(22vh - 90px)"; |
||||
} |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
height: ~"calc(30vh - @{height_navbar} + 200px)"; |
||||
.title, .logo{ |
||||
margin-top: ~"calc(22vh - 70px)"; |
||||
} |
||||
} |
||||
} |
||||
.menu{ |
||||
margin-top: @gap; |
||||
ul { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: baseline; |
||||
justify-content: center; |
||||
li { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
padding: 0; |
||||
height: auto; |
||||
} |
||||
} |
||||
ul > li > a{ |
||||
font-size: @fontsize_small; |
||||
padding: 2px; |
||||
margin: 0 4px; |
||||
.enable-trans(); |
||||
color: fade(@color_text_main, 85%); |
||||
border-bottom: 1px solid transparent; |
||||
&:hover, &.active, &:active{ |
||||
color: @theme_main; |
||||
border-bottom: 1px solid @theme_main; |
||||
} |
||||
&.white{ |
||||
color: fade(white, 70%); |
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
||||
&:hover, &.active, &:active{ |
||||
color: white; |
||||
border-bottom: 1px solid white; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.switcher{ |
||||
& > li{ |
||||
a{ |
||||
&:hover { |
||||
background: fade(@theme_main, 15%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.scroll-down{ |
||||
width: 100%; |
||||
height: 64px; |
||||
position: absolute; |
||||
bottom: 0; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
.scroll-down-effects{ |
||||
color: white; |
||||
font-size: 24px; |
||||
line-height: 64px; |
||||
position: absolute; |
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, .1); |
||||
@keyframes scroll-down-effect{ |
||||
0%{ |
||||
top: 0; |
||||
opacity: .4; |
||||
} |
||||
50%{ |
||||
top: -16px; |
||||
opacity: 1; |
||||
} |
||||
100%{ |
||||
top: 0; |
||||
opacity: .4; |
||||
} |
||||
} |
||||
animation: scroll-down-effect 1.5s infinite; |
||||
transform: rotateX(20px); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
.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); |
||||
} |
||||
.z-depth-nav-raised { |
||||
box-shadow: @boxshadow_card_raised; |
||||
} |
||||
|
||||
.hoverable { |
||||
.enable-trans(); |
||||
box-shadow: 0; |
||||
} |
||||
|
||||
.hoverable:hover { |
||||
.enable-trans(); |
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
||||
} |
||||
|
||||
::-moz-selection { |
||||
background: @color_bg_selection; |
||||
} |
||||
|
||||
::selection { |
||||
background: @color_bg_selection; |
||||
} |
||||
// transition |
||||
.enable-trans(@time: 0.25s){ |
||||
transition: all @time ease; |
||||
-moz-transition: all @time ease; |
||||
-webkit-transition: all @time ease; |
||||
-o-transition: all @time ease; |
||||
} |
||||
|
||||
.set-placeholder(@rules){ |
||||
&::-webkit-input-placeholder {@rules();} |
||||
&:-moz-placeholder {@rules();} |
||||
&::-moz-placeholder {@rules();} |
||||
&:-ms-input-placeholder {@rules();} |
||||
} |
||||
|
||||
|
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6 { |
||||
-webkit-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; |
||||
text-rendering: geometricPrecision; |
||||
margin: 0 0 0.4em 0; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: @fontsize_h1; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: @fontsize_h2; |
||||
} |
||||
|
||||
h3 { |
||||
font-size: @fontsize_h3; |
||||
} |
||||
|
||||
h4 { |
||||
font-size: @fontsize_h4; |
||||
} |
||||
|
||||
h5 { |
||||
font-size: @fontsize_h5; |
||||
} |
||||
|
||||
h6 { |
||||
font-size: @fontsize_h6; |
||||
} |
||||
|
||||
a { |
||||
color: @black; |
||||
cursor: pointer; |
||||
text-decoration: none; |
||||
.enable-trans(); |
||||
&:hover { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
||||
pre { |
||||
tab-size: 4; |
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
-webkit-tab-size: 4; |
||||
} |
||||
|
||||
img { |
||||
max-width: 100%; |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Util |
||||
*/ |
||||
|
||||
.clearfix { |
||||
zoom: 1; |
||||
&:before, |
||||
&:after { |
||||
content: " "; // 1 |
||||
display: table; // 2 |
||||
} |
||||
&:after { |
||||
clear: both; |
||||
} |
||||
} |
||||
|
||||
|
||||
.hidden { |
||||
text-indent: -9999px; |
||||
visibility: hidden; |
||||
display: none; |
||||
} |
||||
|
||||
.inner { |
||||
position: relative; |
||||
width: 80%; |
||||
max-width: 710px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.vertical { |
||||
display: table-cell; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.right { |
||||
float: right; |
||||
} |
||||
|
||||
.left { |
||||
float: left; |
||||
} |
||||
|
||||
.disable-trans { |
||||
-moz-transition: none !important; |
||||
-webkit-transition: none !important; |
||||
transition: none !important; |
||||
} |
||||
|
||||
.txt-ellipsis { |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
ul, |
||||
ol { |
||||
padding-left: 0; |
||||
} |
||||
|
||||
li { |
||||
list-style: none; |
||||
} |
||||
|
||||
.mark { |
||||
position: relative; |
||||
a { |
||||
color: @black; |
||||
background: transparent; |
||||
display: inline-block; |
||||
padding: 0 8px; |
||||
border-left: @border_radius_line solid transparent; |
||||
background: transparent; |
||||
border-radius: @border_radius_code_block; |
||||
.enable-trans(); |
||||
&:hover { |
||||
background: fade(@theme_main, 10%); |
||||
border-left: @border_radius_line solid @theme_main; |
||||
padding: 8px; |
||||
} |
||||
&:active { |
||||
border-left: 2*@border_radius_line solid @theme_main; |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
ul.h-list { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 100%; |
||||
&>li { |
||||
// flex: none; |
||||
height: 100%; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Loading bar |
||||
*/ |
||||
|
||||
#loading-bar-wrapper { |
||||
position: fixed; |
||||
top: @height_navbar - @loading_height; |
||||
// top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
// overflow: scroll; |
||||
z-index: 99999; |
||||
} |
||||
|
||||
#loading-bar { |
||||
position: fixed; |
||||
width: 0; |
||||
height: @loading_height; |
||||
// height: @height_navbar; |
||||
.enable-trans(); |
||||
background-color: fade(@theme_main, 50%); |
||||
} |
||||
|
||||
.body-wrapper { |
||||
position: relative; |
||||
display: flex; |
||||
width: 100%; |
||||
max-width: @width_container; |
||||
margin: 0 auto; |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
align-items: stretch; |
||||
} |
||||
|
||||
.container--flex { |
||||
display: flex; |
||||
flex-wrap: nowrap; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.l_body { |
||||
position: relative; |
||||
margin: @gap; |
||||
margin-top: @gap; |
||||
&.nocover{ |
||||
margin-top: @gap + @height_navbar; |
||||
} |
||||
@media(max-width: @on_phone) { |
||||
margin: @height_navbar + @gap 0 @gap; |
||||
border-radius: 0; |
||||
} |
||||
// padding-top: -@gap/2; |
||||
.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; |
||||
} |
||||
&.show{ |
||||
transform: translateY(0) scale(1); |
||||
&.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; |
||||
&.hl{ |
||||
box-shadow: @boxshadow_card_raised; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.white-box{ |
||||
background: @theme_cardbg; |
||||
} |
||||
.reveal { |
||||
// visibility: hidden; |
||||
} |
||||
|
||||
.btn-wrapper{ |
||||
a { |
||||
line-height: @lineheight_base * 1.3; |
||||
background: @color_text_link; |
||||
color: @color_text_in_header; |
||||
padding: 3px 5px 1px 5px; |
||||
margin: 2px; |
||||
border-radius: 2px; |
||||
.enable-trans(); |
||||
&:hover { |
||||
color: @color_text_in_header; |
||||
text-decoration: none; |
||||
background: @color_text_highlight; |
||||
} |
||||
} |
||||
&[regular] { |
||||
a { |
||||
line-height: @lineheight_base * 1.8; |
||||
padding: 9px 16px 7px 16px; |
||||
i { |
||||
margin-right: 2px; |
||||
} |
||||
} |
||||
} |
||||
&[large] { |
||||
a { |
||||
line-height: @lineheight_base * 3; |
||||
padding: 11px 40px 10px 40px; |
||||
i { |
||||
margin: 0 5px 0 -2px; |
||||
} |
||||
} |
||||
} |
||||
&[center] { |
||||
display: block; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.btns-wrapper{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin: .6em -@gap/2; |
||||
align-items: flex-start; |
||||
&[wide]{ |
||||
a{ |
||||
padding-left: @gap*2; |
||||
padding-right: @gap*2; |
||||
} |
||||
} |
||||
&[fill]{ |
||||
a{ |
||||
flex-grow: 1; |
||||
width: auto; |
||||
} |
||||
} |
||||
&[around]{ |
||||
justify-content: space-around; |
||||
} |
||||
&[center]{ |
||||
justify-content: center; |
||||
} |
||||
&[grid2]{ |
||||
a{ |
||||
width:~"calc(100%/2 - @{gap})"; |
||||
@media(max-width: @on_laptop){ |
||||
width:~"calc(100%/2 - @{gap})"; |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
width:~"calc(100%/2 - @{gap})"; |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
width:~"calc(100%/1 - @{gap})"; |
||||
} |
||||
} |
||||
} |
||||
&[grid3]{ |
||||
a{ |
||||
width:~"calc(100%/3 - @{gap})"; |
||||
@media(max-width: @on_laptop){ |
||||
width:~"calc(100%/3 - @{gap})"; |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
width:~"calc(100%/3 - @{gap})"; |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
width:~"calc(100%/1 - @{gap})"; |
||||
} |
||||
} |
||||
} |
||||
&[grid4]{ |
||||
a{ |
||||
width:~"calc(100%/4 - @{gap})"; |
||||
@media(max-width: @on_laptop){ |
||||
width:~"calc(100%/3 - @{gap})"; |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
width:~"calc(100%/3 - @{gap})"; |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
width:~"calc(100%/2 - @{gap})"; |
||||
} |
||||
} |
||||
} |
||||
&[grid5]{ |
||||
a{ |
||||
width:~"calc(100%/5 - @{gap})"; |
||||
@media(max-width: @on_laptop){ |
||||
width:~"calc(100%/4 - @{gap})"; |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
width:~"calc(100%/3 - @{gap})"; |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
width:~"calc(100%/2 - @{gap})"; |
||||
} |
||||
} |
||||
} |
||||
|
||||
a{ |
||||
.enable-trans(); |
||||
margin: @gap/2; |
||||
margin-top: ~"calc(@{gap}*1.25 + 32px)"; |
||||
min-width: 120px; |
||||
font-weight: bold; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
align-content: center; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
line-height: @lineheight_base; |
||||
padding: @gap/2; |
||||
text-align: center; |
||||
font-size: @fontsize_small; |
||||
&>img:first-child, &>i:first-child{ |
||||
.enable-trans(); |
||||
height: 64px; |
||||
width: 64px; |
||||
&[auto]{ |
||||
width: auto; |
||||
} |
||||
margin: @gap @gap/2 @gap/4 @gap/2; |
||||
margin-top: ~"calc(-@{gap}*1.25 - 32px)"; |
||||
border: 2px solid @theme_cardbg; |
||||
background: @color_text_in_header; |
||||
line-height: 60px; |
||||
font-size: 28px; |
||||
} |
||||
&>i:first-child{ |
||||
color: @color_text_in_header; |
||||
background: @color_text_link; |
||||
} |
||||
background: darken(@color_bg_code_block, 10%); |
||||
border-radius: 4px; |
||||
color: @color_text_main; |
||||
p,b{ |
||||
margin: .25em; |
||||
font-weight: normal; |
||||
line-height: 1.25; |
||||
word-wrap: break-word; |
||||
} |
||||
b{ |
||||
font-size: @fontsize_base; |
||||
font-weight: bold; |
||||
line-height: 1.3; |
||||
} |
||||
img{ |
||||
margin: .4em auto; |
||||
} |
||||
&:hover{ |
||||
text-decoration: none; |
||||
background: fade(@color_text_highlight, 15%); |
||||
&>img:first-child, &>i:first-child{ |
||||
transform: scale(1.1) translateY(-8px); |
||||
box-shadow: @boxshadow_base_4; |
||||
} |
||||
&>i:first-child{ |
||||
background: @color_text_highlight; |
||||
} |
||||
} |
||||
} |
||||
&[circle] > a { |
||||
&>img:first-child, &>i:first-child{ |
||||
border-radius: 32px; |
||||
} |
||||
} |
||||
&[rounded] > a { |
||||
&>img:first-child, &>i:first-child{ |
||||
border-radius: 16px; |
||||
} |
||||
} |
||||
} |
||||
@ -1,66 +0,0 @@ |
||||
// 如果你只想简单地换个风格，可以只改这里的几项： |
||||
// 网页背景颜色 |
||||
@theme_background: #F4F4F4; |
||||
// @theme_background: #454545; // 暗色主题 |
||||
// 主题色 |
||||
@theme_main: @color_md_blue; |
||||
// 卡片背景颜色 |
||||
@theme_cardbg: white; |
||||
// @theme_cardbg: #555; // 暗色主题 |
||||
|
||||
|
||||
|
||||
|
||||
// 如果你想更自由地定制颜色，可以修改这里的几项： |
||||
|
||||
// 背景色 ---------------- |
||||
// 导航栏背景，默认和主题色保持一致 |
||||
@color_bg_navbar: @theme_main; |
||||
// 代码的背景色 |
||||
@color_bg_code: #FFF8F0; |
||||
// 代码块的背景色 |
||||
@color_bg_code_block: fade(darken(@theme_cardbg, 5%), 60%); |
||||
// 公式背景颜色 |
||||
@color_bg_mathjax: #FFF0; |
||||
// 引用的颜色 |
||||
@color_bg_quote: @theme_main; |
||||
// 选中部分文字的背景颜色 |
||||
@color_bg_selection: fade(@color_md_blue, 20%); |
||||
|
||||
// 文字颜色 ---------------- |
||||
// 标题文字颜色（h1/h2） |
||||
@color_text_header: darken(@color_text_main, 5%); |
||||
// 标题文字颜色（h3） |
||||
@color_text_h3: darken(@theme_main, 5%); |
||||
// 链接颜色 |
||||
@color_text_link: @theme_main; |
||||
// 链接高亮颜色 |
||||
@color_text_highlight: @color_md_deep_orange; |
||||
// 在主题色中显示的文本（一般为白或深灰） |
||||
@color_text_in_header: white; |
||||
// 正文文字颜色 |
||||
@color_text_main: @dark; |
||||
// @color_text_main: white; // 暗色主题 |
||||
// 代码颜色 |
||||
@color_text_code: #A55A00; |
||||
|
||||
// 导航栏毛玻璃效果 |
||||
.nav-blur { |
||||
background: fade(@theme_cardbg, 85%); |
||||
backdrop-filter: blur(20px); |
||||
} |
||||
|
||||
// 卡片毛玻璃效果 |
||||
.body-blur,.widget-blur { |
||||
background: fade(@theme_cardbg, 85%); |
||||
backdrop-filter: blur(20px); |
||||
} |
||||
|
||||
// 卡片阴影 |
||||
.shadow { |
||||
.enable-trans(); |
||||
box-shadow: @boxshadow_card_normal; |
||||
&:hover { |
||||
box-shadow: @boxshadow_card_raised; |
||||
} |
||||
} |
||||
@ -1,52 +0,0 @@ |
||||
// 颜色 |
||||
// Material color scheme |
||||
@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; |
||||
@color_grey: #828282; |
||||
@white: #ffffff; |
||||
@light: #eeeeee; |
||||
@dark: #333333; |
||||
// 这些颜色取自macOS |
||||
@color_mac_maximize: #3DC550; |
||||
@color_mac_minimize: #FFBD2B; |
||||
@color_mac_close: #FE5F58; |
||||
@color_mac_finder: #1BCDFC; |
||||
// xx |
||||
@color_light_green: #5CC281; |
||||
@color_vue: #4fc08d; |
||||
@color_yellow: #e96900; |
||||
// 这些颜色由xaoxuu调配 |
||||
@color_ax_light_red: #FF6868; |
||||
@color_ax_red: #F24E32; |
||||
@color_ax_blue: #52A1F8; |
||||
|
||||
// 阴影 |
||||
@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_card_normal: @boxshadow_base_1; |
||||
// 卡片漂浮起来时的阴影 |
||||
@boxshadow_card_raised: @boxshadow_base_2, @boxshadow_base_4, @boxshadow_base_8; |
||||
@ -1,39 +0,0 @@ |
||||
@font-face{ |
||||
font-family: 'Varela Round'; |
||||
src: url(https://cdn.jsdelivr.net/gh/xaoxuu/cdn-fonts@19.1.7/VarelaRound/VarelaRound-Regular.ttf); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
} |
||||
@font-face{ |
||||
font-family: 'Source Sans Pro'; |
||||
src: url(https://cdn.jsdelivr.net/gh/xaoxuu/cdn-fonts@master/SourceSansPro/SourceSansPro-Regular.ttf); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
} |
||||
|
||||
// 大部分文字字体 |
||||
@fontfamily_base: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif; |
||||
// 代码字体 |
||||
@fontfamily_code: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, 'Ubuntu'; |
||||
// LOGO字体 |
||||
@fontfamily_logo: @fontfamily_base; |
||||
|
||||
|
||||
// 字号 |
||||
// base |
||||
@fontsize_base: 16px; |
||||
@fontsize_small: @fontsize_base * 0.88; |
||||
@fontsize_footnote: @fontsize_base * 0.7; |
||||
@lineheight_base: 1.5; |
||||
// title |
||||
@fontsize_h1: @fontsize_base * 1.5; |
||||
@fontsize_h2: @fontsize_base * 1.42; |
||||
@fontsize_h3: @fontsize_base * 1.28; |
||||
@fontsize_h4: @fontsize_base * 1.08; |
||||
@fontsize_h5: @fontsize_base * 1; |
||||
@fontsize_h6: @fontsize_base * 1; |
||||
// 文章列表中的标题 |
||||
@fontsize_list_title: @fontsize_base * 1.4; |
||||
// 文章页的标题 |
||||
@fontsize_article_title: @fontsize_h2 * 1.1; |
||||
@fontsize_article_title_phone: @fontsize_h2; |
||||
@ -1,66 +0,0 @@ |
||||
footer { |
||||
position: relative; |
||||
padding: 40px 10px 120px 10px; |
||||
width: 100%; |
||||
color: fade(@color_text_main, 50%); |
||||
margin: 0px auto; |
||||
font-size: @fontsize_small; |
||||
overflow: hidden; |
||||
text-align: center; |
||||
font-family: @fontfamily_base; |
||||
&.white, &.white a{ |
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
||||
} |
||||
&.white{ |
||||
color: fade(white, 50%); |
||||
} |
||||
&.white a{ |
||||
color: fade(white, 80%); |
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
||||
} |
||||
.licenses { |
||||
color: fade(@color_text_main, 50%); |
||||
text-decoration: underline; |
||||
} |
||||
.codename { |
||||
// color: @color_vue; |
||||
text-decoration: underline; |
||||
} |
||||
.social-wrapper { |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
margin: 4px @gap/2; |
||||
} |
||||
a { |
||||
color: fade(@color_text_main, 70%); |
||||
padding: 0; |
||||
.enable-trans(); |
||||
&:hover { |
||||
color: @color_text_highlight; |
||||
} |
||||
&.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; |
||||
} |
||||
} |
||||
} |
||||
.copyright { |
||||
margin-top: @gap; |
||||
font-size: @fontsize_small * 0.9; |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
justify-content: center; |
||||
} |
||||
} |
||||
@ -1,311 +0,0 @@ |
||||
.l_header { |
||||
@iconW: 32px; |
||||
@iconMargin: 4px; |
||||
position: fixed; |
||||
z-index: 9999; |
||||
top: 0; |
||||
overflow: hidden; |
||||
width: 100%; |
||||
font-size: @fontsize_base; |
||||
line-height: @height_navbar; |
||||
height: @height_navbar; |
||||
overflow: hidden; |
||||
font-family: @fontfamily_base; |
||||
padding: 0 @gap; |
||||
margin-bottom: @gap; |
||||
box-shadow: @boxshadow_card_normal; |
||||
.wrapper{ |
||||
padding: auto @gap; |
||||
max-width: @width_container; |
||||
margin: auto; |
||||
.enable-trans(); |
||||
a.logo { |
||||
color: @color_text_header; |
||||
} |
||||
} |
||||
&.no_sidebar{ |
||||
.wrapper{ |
||||
max-width: @on_pad; |
||||
margin: auto; |
||||
} |
||||
} |
||||
.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; |
||||
} |
||||
background: @theme_cardbg; |
||||
&.hide{ |
||||
transform: translateY(100px) scale(0); |
||||
} |
||||
&.show{ |
||||
transform: translateY(0) scale(1); |
||||
} |
||||
&, a{ |
||||
.txt-ellipsis; |
||||
height: @height_navbar; |
||||
line-height: @height_navbar; |
||||
color: @theme_main; |
||||
} |
||||
&:extend(.z-depth-nav); // 适合深色导航栏背景 |
||||
|
||||
.enable-trans(); |
||||
&:hover { |
||||
// &:extend(.z-depth-nav-raised); |
||||
} |
||||
&:active { |
||||
|
||||
} |
||||
.logo { |
||||
padding: 0 @gap*1.5; |
||||
font-size: @fontsize_logo; |
||||
font-family: @fontfamily_logo; |
||||
@media(max-width: @on_phone){ |
||||
padding: 0 @gap; |
||||
} |
||||
&.img{ |
||||
padding: 0 @gap 0 0; |
||||
} |
||||
img{ |
||||
height: 100%; |
||||
} |
||||
letter-spacing: 0; |
||||
} |
||||
img.logo { |
||||
padding: 4px 0; |
||||
} |
||||
|
||||
.nav-sub{ |
||||
.logo { |
||||
padding: 0 @gap*1.5; |
||||
font-size: @fontsize_base; |
||||
font-family: @fontfamily_base; |
||||
@media(max-width: @on_phone){ |
||||
letter-spacing: -0.5px; |
||||
padding-top: 1px; |
||||
} |
||||
|
||||
} |
||||
} |
||||
.menu{ |
||||
position:relative; |
||||
flex: 1 0 auto; |
||||
height: @height_navbar; |
||||
.enable-trans(); |
||||
margin: 0 @gap 0 0; |
||||
ul > li > a{ |
||||
.enable-trans(); |
||||
display: block; |
||||
padding: 0 8px; |
||||
color: fade(@color_text_main, 85%); |
||||
&.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; |
||||
} |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
display:none; |
||||
} |
||||
} |
||||
.switcher{ |
||||
display: none; |
||||
font-size: @fontsize_base; |
||||
line-height: @height_navbar; |
||||
.s-toc { |
||||
display: none; |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
.s-toc { |
||||
display: block; |
||||
} |
||||
} |
||||
& > li{ |
||||
height: @height_navbar - @gap; |
||||
.enable-trans(); |
||||
margin: 2px; |
||||
@height: @height_navbar - @gap; |
||||
@media(max-width: @on_phone){ |
||||
margin: 0; |
||||
height: @height; |
||||
} |
||||
a{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: @height; |
||||
height: @height; |
||||
border-radius: 100px; |
||||
.enable-trans(); |
||||
&:hover { |
||||
background: fade(@theme_main, 15%); |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
width: @iconW; |
||||
height: @height; |
||||
} |
||||
} |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
display: flex; |
||||
padding-left: @gap/2; |
||||
padding-right: @gap - 6px; |
||||
} |
||||
} |
||||
.nav-sub .switcher{ |
||||
display: flex; |
||||
} |
||||
.m_search { |
||||
position: relative; |
||||
display: flex; |
||||
width: @width_sidebar; |
||||
height: @height_navbar; |
||||
@media(max-width: @on_desktop){ |
||||
width: @width_sidebar_m; |
||||
} |
||||
.form { |
||||
position: relative; |
||||
display: flex; |
||||
width: 100%; |
||||
margin: auto; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
} |
||||
.icon,.input{ |
||||
.enable-trans(.3s); |
||||
} |
||||
.icon { |
||||
position: absolute; |
||||
width: @iconW; |
||||
left: @iconMargin+1px; |
||||
font-size: @fontsize_small; |
||||
color: fade(@color_text_main, 70%); |
||||
} |
||||
.input { |
||||
display: block; |
||||
font-size: @fontsize_small; |
||||
padding-top: 8px; |
||||
padding-bottom: 8px; |
||||
width: 100%; |
||||
color: @color_text_main; |
||||
background: fade(darken(@theme_cardbg, 5%), 75%); |
||||
box-shadow: none; |
||||
box-sizing: border-box; |
||||
padding-left: @iconW + @iconMargin; |
||||
@media(max-width: @on_phone){ |
||||
padding-left: @iconW + @iconMargin; |
||||
} |
||||
border-radius: @border_radius_searchbar; |
||||
border: 1px dashed transparent; |
||||
.set-placeholder({ |
||||
color: fade(@color_text_main, 50%); |
||||
}); |
||||
&:hover{ |
||||
color: @color_text_in_header; |
||||
~.icon{ |
||||
color: fade(@theme_main, 80%); |
||||
} |
||||
border: 1px solid fade(@theme_main, 60%); |
||||
} |
||||
&:focus { |
||||
~.icon{ |
||||
color: @theme_main; |
||||
} |
||||
color: @color_text_main; |
||||
background: fade(@theme_main, 15%); |
||||
border: 1px solid @theme_main; |
||||
} |
||||
} |
||||
} |
||||
@media (max-width: @on_phone) { |
||||
padding: 0; |
||||
.m_search{ |
||||
width:0; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
.enable-trans(); |
||||
margin: 0 @gap/2; |
||||
} |
||||
&.z_search-open{ |
||||
.logo{ |
||||
opacity:0; |
||||
} |
||||
.m_search{ |
||||
width: ~"calc(100vw - 2*@{gap} - 2*@{iconW})"; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.menu-phone{ |
||||
.header{ |
||||
border-top-left-radius: @border_radius; |
||||
border-top-right-radius: @border_radius; |
||||
background-color: fade(@color_bg_navbar,90%); |
||||
color: @color_text_in_header; |
||||
font-size: @fontsize_base; |
||||
line-height: 1.8em; |
||||
padding: 8px @gap+6px; |
||||
} |
||||
position: fixed; |
||||
top: @height_navbar + @gap; |
||||
right: 0; |
||||
z-index:9999 + 1; |
||||
line-height: 2 * @gap; |
||||
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; |
||||
} |
||||
&:active { |
||||
box-shadow: @boxshadow_card_normal; |
||||
} |
||||
nav { |
||||
padding: @gap/2 0px; |
||||
.nav { |
||||
height: @height_cell; |
||||
line-height: @height_cell; |
||||
position: relative; |
||||
display: block; |
||||
color: @black; |
||||
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%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.cover-wrapper{ |
||||
.l_header{ |
||||
.enable-trans(0.5s); |
||||
transform: translateY(-1.5*@height_navbar); |
||||
&.show{ |
||||
transform: translateY(0); |
||||
} |
||||
} |
||||
} |
||||
@ -1,58 +0,0 @@ |
||||
// start: 间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> |
||||
@gap: 16px; |
||||
// end: 间距 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< |
||||
|
||||
|
||||
// start: 布局尺寸 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> |
||||
@on_phone: 580px; |
||||
@on_pad: 768px; |
||||
@on_laptop: 1024px; // 1024 + 285 |
||||
@on_desktop: 1350px; |
||||
// container |
||||
@width_container: 1080px; |
||||
@on_modal_threshold: 680px; |
||||
// 侧边栏宽度 |
||||
@width_sidebar: 285px; |
||||
@width_sidebar_m: 240px; |
||||
// 搜索框的宽度，建议和侧边栏宽度保持一致 |
||||
@width_searchbar: @width_sidebar; |
||||
@width_searchbar_m: @width_sidebar_m; |
||||
// 搜索框的高度，建议不要超出导航栏的高度 |
||||
@height_searchbar: 40px; |
||||
@searchbar_height_cover: 44px; |
||||
// 一个cell的高度 |
||||
@height_cell: 36px; |
||||
|
||||
// H2标题高度 |
||||
@height_h2: 2.5em; |
||||
// H3标题高度 |
||||
@height_h3: 1.5em; |
||||
|
||||
// end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< |
||||
|
||||
|
||||
// start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> |
||||
// 导航栏高度 |
||||
@height_navbar: 64px; |
||||
@fontsize_logo: @fontsize_base * 1.2; |
||||
@fontsize_header_switcher: 1.3em; |
||||
@fontsize_header: 1em; |
||||
// 定位条和页面加载的进度条的高度 |
||||
@loading_height: 2px; |
||||
// end: 导航栏 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< |
||||
|
||||
|
||||
// start: 圆角 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> |
||||
@border_radius: 12px; // 圆角半径，可以根据心情随时调整风格 |
||||
@border_radius_line: 4px; // 线的宽度和滚动条的宽度 |
||||
@border_radius_code_block: 4px; // 引用、代码块的圆角 |
||||
|
||||
@border_radius_searchbar: 8px; // 搜索框的圆角半径，可以根据心情随时调整风格 |
||||
// end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< |
||||
|
||||
|
||||
// start: 文字对齐方向 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> |
||||
@text_align_h1: left; |
||||
@text_align_h2: left; |
||||
@text_align_h3: left; |
||||
// end: 文字对齐方向 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< |
||||
@ -1,92 +0,0 @@ |
||||
.article.typo.l_friends{ |
||||
.friends-group{ |
||||
.friend-content{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin: -@gap/2; |
||||
border-radius: @border_radius; |
||||
align-items: flex-start; |
||||
.friend-card{ |
||||
display: flex; |
||||
border-radius: @border_radius/4; |
||||
box-shadow: @boxshadow_card_normal; |
||||
padding: @gap/2 0; |
||||
margin: @gap/2; |
||||
margin-top: ~"calc(@{gap}*1.25 + 32px)"; |
||||
color: fade(@color_text_main, 80%); |
||||
background: darken(@color_bg_code_block, 10%); |
||||
justify-content: flex-start; |
||||
align-content: flex-start; |
||||
flex-direction: column; |
||||
width:~"calc(100%/4 - @{gap})"; |
||||
@media(max-width: @on_laptop){ |
||||
width:~"calc(100%/4 - @{gap})"; |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
width:~"calc(100%/3 - @{gap})"; |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
width:~"calc(100%/2 - @{gap})"; |
||||
} |
||||
&:hover{ |
||||
text-decoration: none; |
||||
transform: scale(1.05); |
||||
border-radius: @border_radius/2; |
||||
.friend-left{ |
||||
.avatar{ |
||||
transform: scale(1.2) rotate(12deg); |
||||
box-shadow: @boxshadow_card_raised; |
||||
} |
||||
} |
||||
} |
||||
.friend-left{ |
||||
display: flex; |
||||
align-self: center; |
||||
.avatar{ |
||||
width: 64px; |
||||
height: 64px; |
||||
.enable-trans(); |
||||
box-shadow: @boxshadow_card_normal; |
||||
margin: @gap @gap/2 @gap/4 @gap/2; |
||||
margin-top: ~"calc(-@{gap}*1.25 - 32px)"; |
||||
border-radius: 100%; |
||||
border: 2px solid white; |
||||
background: white; |
||||
} |
||||
} |
||||
.friend-right{ |
||||
margin: @gap/4 @gap/2; |
||||
display: flex; |
||||
flex-direction: column; |
||||
text-align: center; |
||||
p{ |
||||
text-align: center; |
||||
} |
||||
.friend-tags-wrapper{ |
||||
.enable-trans(); |
||||
margin-left: -2px; |
||||
word-break:break-all; |
||||
line-height: @fontsize_footnote; |
||||
} |
||||
p{ |
||||
margin: 0; |
||||
&.friend-name{ |
||||
font-family: @fontfamily_logo; |
||||
font-size: @fontsize_small; |
||||
line-height: @fontsize_small*1.5; |
||||
padding-top: 4px; |
||||
font-weight: bold; |
||||
} |
||||
&.tags{ |
||||
font-size: @fontsize_footnote; |
||||
display: inline; |
||||
background: none; |
||||
word-wrap: break-word; |
||||
padding-right: 4px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,638 +0,0 @@ |
||||
.l_main { |
||||
width: ~"calc(100% - 1 * @{width_sidebar})"; |
||||
@media(max-width: @on_desktop) { |
||||
width: ~"calc(100% - 1 * @{width_sidebar_m})"; |
||||
} |
||||
@media(max-width: @on_pad) { |
||||
width: 100%; |
||||
} |
||||
padding-right: @gap; |
||||
&.no_sidebar{ |
||||
width: 100%; |
||||
padding-right: 0; |
||||
max-width: @on_pad; |
||||
margin: auto; |
||||
~.l_side{ |
||||
display: none; |
||||
} |
||||
} |
||||
float: left; |
||||
.post-list { |
||||
position: relative; |
||||
margin: @gap auto; |
||||
column-gap: @gap; |
||||
@media(max-width: @on_phone) { |
||||
margin: 0; |
||||
} |
||||
&.multiple-columns{ |
||||
columns: 320px; // 支持多列 |
||||
} |
||||
:first-child{ |
||||
// margin-top: 0; |
||||
} |
||||
} |
||||
ul.popular-posts{ |
||||
h3{ |
||||
padding: 0; |
||||
margin: 0; |
||||
font-size: @fontsize_base; |
||||
} |
||||
} |
||||
#comments { |
||||
position: relative; |
||||
// padding-top: 1.5*@gap; |
||||
@media(max-width: @on_phone) { |
||||
// padding-top: @gap; |
||||
} |
||||
#valine_container{ |
||||
p{ |
||||
line-height: @lineheight_base; |
||||
} |
||||
img { |
||||
display: inline; |
||||
} |
||||
.info{ |
||||
// display: none; |
||||
} |
||||
.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: @color_text_in_header; |
||||
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; |
||||
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%); |
||||
} |
||||
} |
||||
div.info a{ |
||||
font-size: @fontsize_footnote; |
||||
} |
||||
.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{ |
||||
justify-content: space-between; |
||||
i{ |
||||
width: auto; |
||||
height: 36px; |
||||
padding: 0; |
||||
margin: 8px 8px 0 8px; |
||||
#emoji{ |
||||
height: 24px; |
||||
margin-top: 6px; |
||||
background: transparent; |
||||
} |
||||
} |
||||
} |
||||
p{ |
||||
#emoji{ |
||||
display: inline; |
||||
max-height: 28px; |
||||
background: transparent; |
||||
} |
||||
} |
||||
} |
||||
.post-wrapper{ |
||||
// for firefox |
||||
column-break-inside: avoid; |
||||
break-inside: avoid-column; |
||||
} |
||||
.mobile-post() { |
||||
.post { |
||||
.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; |
||||
} |
||||
.highlight{ |
||||
margin-left: 0*@gap; |
||||
margin-right: 0*@gap; |
||||
width:~"calc(100% - 0 * @{gap})"; |
||||
} |
||||
@media(max-width:@on_phone) { |
||||
padding: 1.5*@gap @gap; |
||||
.highlight { |
||||
margin-left: 0*@gap; |
||||
margin-right: 0*@gap; |
||||
width:~"calc(100% - 0 * @{gap})"; |
||||
} |
||||
.auto-padding { |
||||
// padding-left: @gap; |
||||
border-bottom-left-radius: 0; |
||||
border-bottom-right-radius: 0; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.post-wrapper { |
||||
margin-bottom: @gap; |
||||
.post { |
||||
.meta { |
||||
margin-bottom: @gap; |
||||
.title { |
||||
font-size: @fontsize_list_title; |
||||
a { |
||||
font-size: @fontsize_list_title; |
||||
} |
||||
} |
||||
} |
||||
.full-width { |
||||
margin-left: -1.5*@gap; |
||||
margin-right: -1.5*@gap; |
||||
width:~"calc(100% + 3 * @{gap})" |
||||
} |
||||
.auto-padding { |
||||
padding-left: 1.5*@gap; |
||||
padding-right: 1.5*@gap; |
||||
border-bottom-left-radius: @border_radius; |
||||
border-bottom-right-radius: @border_radius; |
||||
overflow: auto; |
||||
} |
||||
} |
||||
.tags { |
||||
margin-bottom: -2*@gap; |
||||
} |
||||
@media(max-width:@on_phone) { |
||||
.tags { |
||||
margin-bottom: -1.5*@gap; |
||||
} |
||||
.mobile-post(); |
||||
} |
||||
|
||||
} |
||||
.widget{ |
||||
@media(max-width: @on_phone) { |
||||
border-radius: 0; |
||||
margin-left: 0; |
||||
margin-right: 0; |
||||
width: auto; |
||||
} |
||||
} |
||||
.post { |
||||
position: relative; |
||||
margin: @gap auto; |
||||
padding: 1.5*@gap; |
||||
// background: @theme_cardbg; |
||||
border-radius: @border_radius; |
||||
h1{ |
||||
font-weight: normal; |
||||
font-size: @fontsize_article_title; |
||||
line-height: @lineheight_base; |
||||
color: @color_text_main; |
||||
} |
||||
@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,.thumbnail{ |
||||
.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; |
||||
} |
||||
@media(max-width: @on_phone) { |
||||
&:hover { |
||||
border-radius: 100%; |
||||
transform: scale(1); |
||||
box-shadow: @boxshadow_card_normal; |
||||
} |
||||
} |
||||
} |
||||
.thumbnail{ |
||||
width: auto; |
||||
border-radius: 4px; |
||||
box-shadow: none; |
||||
&:hover { |
||||
border-radius: 4px; |
||||
transform: scale(1.1) rotate(4deg); |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
.title { |
||||
// left: 0; |
||||
text-align: @text_align_h1; |
||||
font-size: @fontsize_article_title; |
||||
margin: 0; |
||||
@media(max-width: @on_phone) { |
||||
font-size: @fontsize_article_title_phone; |
||||
} |
||||
&:before { |
||||
// content: "#"; |
||||
} |
||||
a { |
||||
display: inline; |
||||
line-height: @lineheight_base; |
||||
font-weight: normal; |
||||
color: @color_text_main; |
||||
text-decoration: none; |
||||
font-size: @fontsize_article_title; |
||||
@media(max-width: @on_phone) { |
||||
font-size: @fontsize_article_title_phone; |
||||
} |
||||
&:hover { |
||||
color: @color_text_highlight; |
||||
} |
||||
} |
||||
} |
||||
@cellH: 28px; |
||||
.new-meta-box{ |
||||
@metaH: 24px; |
||||
.enable-trans(); |
||||
padding-top: 4px; |
||||
padding-bottom: 8px; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
.new-meta-item{ |
||||
color: fade(@color_text_main, 70%); |
||||
font-size: @fontsize_small * 1; |
||||
line-height: @metaH; |
||||
&.link-btns{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: flex-start; |
||||
.btn{ |
||||
font-size: @fontsize_small * .9; |
||||
line-height: @metaH - 4px; |
||||
color: white; |
||||
padding: 0 4px; |
||||
border-radius: 2px; |
||||
margin: 2px; |
||||
&:extend(.hoverable); |
||||
&:hover{ |
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 16px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
i{ |
||||
padding-left: 3px; |
||||
font-size: @fontsize_small * 1; |
||||
} |
||||
p{ |
||||
color: white; |
||||
} |
||||
&:hover{ |
||||
color: white; |
||||
p{ |
||||
color: white; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.notlink{ |
||||
cursor: default; |
||||
&:hover{ |
||||
color: fade(@color_text_main, 70%); |
||||
p{ |
||||
color: fade(@color_text_main, 70%); |
||||
} |
||||
} |
||||
} |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 2px; |
||||
margin: 0 8px 0 0; |
||||
border-radius: 4px; |
||||
&:last-child{ |
||||
margin-right: 0; |
||||
} |
||||
img,i{ |
||||
border-radius: 100%; |
||||
display: inline; |
||||
} |
||||
i{ |
||||
margin-right: 4px; |
||||
border-radius: 0; |
||||
&.fa-hashtag{ |
||||
margin-right: 1px; |
||||
} |
||||
} |
||||
p,a{ |
||||
color: fade(@color_text_main, 70%); |
||||
padding-left: 0; |
||||
padding-right: 4px; |
||||
} |
||||
a{ |
||||
font-family: @fontfamily_base; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
img{ |
||||
height: @metaH - 7px; |
||||
width: @metaH - 7px; |
||||
margin-right: 5px; |
||||
transform: translateY(-1px); |
||||
} |
||||
p{ |
||||
margin: 0; |
||||
padding-top: 2px; |
||||
font-weight: normal; |
||||
.enable-trans(); |
||||
} |
||||
&:hover{ |
||||
color: @color_text_highlight; |
||||
p{ |
||||
color: @color_text_highlight; |
||||
} |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
} |
||||
.share-body{ |
||||
height: @metaH - 2px; |
||||
display: flex; |
||||
a{ |
||||
padding: 0; |
||||
margin-right: 4px; |
||||
img{ |
||||
height: @metaH - 2px; |
||||
width: auto; |
||||
background: transparent; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
.full-width,.highlight{ |
||||
margin-left: 0*@gap; |
||||
margin-right: 0*@gap; |
||||
width:~"calc(100% - 0 * @{gap})"; |
||||
} |
||||
|
||||
img { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
max-width: 100%; |
||||
border-radius: 4px; |
||||
background: none; |
||||
} |
||||
span img{ |
||||
display: inline-block; |
||||
} |
||||
a { |
||||
img{ |
||||
display: inline; |
||||
} |
||||
} |
||||
} |
||||
@media(max-width:@on_pad) { |
||||
padding-right: 0; |
||||
@media(max-width: @on_phone) { |
||||
width: 100%; |
||||
} |
||||
.mobile-post(); |
||||
} |
||||
|
||||
.prev-next{ |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: baseline; |
||||
color: fade(@color_text_main, 50%); |
||||
margin: 0; |
||||
.prev{ |
||||
text-align: left; |
||||
border-top-right-radius: 32px; |
||||
border-bottom-right-radius: 32px; |
||||
} |
||||
.next{ |
||||
text-align: right; |
||||
border-top-left-radius: 32px; |
||||
border-bottom-left-radius: 32px; |
||||
} |
||||
p{ |
||||
margin: @gap; |
||||
} |
||||
a{ |
||||
color: fade(@color_text_link, 90%); |
||||
} |
||||
section{ |
||||
color: fade(@color_text_main, 80%); |
||||
padding: @gap; |
||||
border-radius: @border_radius; |
||||
&:hover { |
||||
color: @color_text_highlight; |
||||
} |
||||
} |
||||
@media(max-width:@on_phone) { |
||||
section{ |
||||
border-radius: 0; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
.alert { |
||||
display: none; |
||||
position: fixed; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%,-50%); |
||||
z-index: 99999; |
||||
text-align: center; |
||||
padding: 24px 36px 22px 36px; |
||||
border-radius: @border_radius_code_block; |
||||
box-shadow: @boxshadow_card_normal; |
||||
font-family: @fontfamily_base; |
||||
font-weight: bold; |
||||
font-size: @fontsize_base; |
||||
|
||||
&.alert-success { |
||||
color: darken(@color_mac_maximize, 20%); |
||||
background-color: lighten(@color_mac_maximize, 40%); |
||||
} |
||||
|
||||
&.alert-info { |
||||
color: darken(@color_mac_finder, 20%); |
||||
background-color: lighten(@color_mac_finder, 40%); |
||||
} |
||||
|
||||
&.alert-warning { |
||||
color: darken(@color_mac_minimize, 20%); |
||||
background-color: lighten(@color_mac_minimize, 40%); |
||||
} |
||||
|
||||
&.alert-danger { |
||||
color: darken(@color_mac_close, 20%); |
||||
background-color: lighten(@color_mac_close, 40%); |
||||
} |
||||
|
||||
} |
||||
|
||||
details { |
||||
display: block; |
||||
background: @color_bg_code_block; |
||||
padding: @gap; |
||||
margin: .6em 0; |
||||
border: 1px solid darken(@color_bg_code_block, 10%); |
||||
border-radius: @border_radius_code_block; |
||||
.enable-trans(); |
||||
summary { |
||||
cursor: pointer; |
||||
padding: @gap; |
||||
margin: -@gap; |
||||
color: fade(@color_text_main, 70%); |
||||
font-size: @fontsize_base * .95; |
||||
font-weight: bold; |
||||
&:hover { |
||||
color: @color_text_highlight; |
||||
} |
||||
} |
||||
} |
||||
@ -1,462 +0,0 @@ |
||||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ |
||||
|
||||
/** |
||||
* 1. Set default font family to sans-serif. |
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling |
||||
* user zoom. |
||||
*/ |
||||
|
||||
html { |
||||
font-family: sans-serif; /* 1 */ |
||||
-ms-text-size-adjust: 100%; /* 2 */ |
||||
-webkit-text-size-adjust: 100%; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Remove default margin. |
||||
*/ |
||||
|
||||
body { |
||||
margin: 0; |
||||
} |
||||
|
||||
/* HTML5 display definitions |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9. |
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11 |
||||
* and Firefox. |
||||
* Correct `block` display not defined for `main` in IE 11. |
||||
*/ |
||||
|
||||
article, |
||||
aside, |
||||
details, |
||||
figcaption, |
||||
figure, |
||||
footer, |
||||
header, |
||||
hgroup, |
||||
main, |
||||
menu, |
||||
nav, |
||||
section, |
||||
summary { |
||||
display: block; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct `inline-block` display not defined in IE 8/9. |
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. |
||||
*/ |
||||
|
||||
audio, |
||||
canvas, |
||||
progress, |
||||
video { |
||||
display: inline-block; /* 1 */ |
||||
vertical-align: baseline; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Prevent modern browsers from displaying `audio` without controls. |
||||
* Remove excess height in iOS 5 devices. |
||||
*/ |
||||
|
||||
audio:not([controls]) { |
||||
display: none; |
||||
height: 0; |
||||
} |
||||
|
||||
/** |
||||
* Address `[hidden]` styling not present in IE 8/9/10. |
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. |
||||
*/ |
||||
|
||||
[hidden], |
||||
template { |
||||
display: none; |
||||
} |
||||
|
||||
/* Links |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove the gray background color from active links in IE 10. |
||||
*/ |
||||
|
||||
a { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
/** |
||||
* Improve readability when focused and also mouse hovered in all browsers. |
||||
*/ |
||||
|
||||
a:active, |
||||
a:hover { |
||||
outline: 0; |
||||
} |
||||
|
||||
/* Text-level semantics |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome. |
||||
*/ |
||||
|
||||
abbr[title] { |
||||
border-bottom: 1px dotted; |
||||
} |
||||
|
||||
/** |
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome. |
||||
*/ |
||||
|
||||
b, |
||||
strong { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/** |
||||
* Address styling not present in Safari and Chrome. |
||||
*/ |
||||
|
||||
dfn { |
||||
font-style: italic; |
||||
} |
||||
|
||||
/** |
||||
* Address variable `h1` font-size and margin within `section` and `article` |
||||
* contexts in Firefox 4+, Safari, and Chrome. |
||||
*/ |
||||
|
||||
h1 { |
||||
font-size: 2em; |
||||
margin: 0.67em 0; |
||||
} |
||||
|
||||
/** |
||||
* Address styling not present in IE 8/9. |
||||
*/ |
||||
|
||||
mark { |
||||
background: #ff0; |
||||
color: #000; |
||||
} |
||||
|
||||
/** |
||||
* Address inconsistent and variable font size in all browsers. |
||||
*/ |
||||
|
||||
small { |
||||
font-size: 80%; |
||||
} |
||||
|
||||
/** |
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers. |
||||
*/ |
||||
|
||||
sub, |
||||
sup { |
||||
font-size: 65%; |
||||
line-height: 0; |
||||
position: relative; |
||||
vertical-align: baseline; |
||||
} |
||||
|
||||
sup { |
||||
top: -0.6em; |
||||
} |
||||
|
||||
sub { |
||||
bottom: -0.3em; |
||||
} |
||||
|
||||
/* Embedded content |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove border when inside `a` element in IE 8/9/10. |
||||
*/ |
||||
|
||||
img { |
||||
border: 0; |
||||
} |
||||
|
||||
/** |
||||
* Correct overflow not hidden in IE 9/10/11. |
||||
*/ |
||||
|
||||
svg:not(:root) { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
/* Grouping content |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Address margin not present in IE 8/9 and Safari. |
||||
*/ |
||||
|
||||
figure { |
||||
margin: 1em 40px; |
||||
} |
||||
|
||||
/** |
||||
* Address differences between Firefox and other browsers. |
||||
*/ |
||||
|
||||
hr { |
||||
-moz-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
height: 0; |
||||
border: 0; |
||||
border-radius: 1px; |
||||
border-bottom: 1px solid fade(@color_text_main, 10%); |
||||
} |
||||
|
||||
/** |
||||
* Contain overflow in all browsers. |
||||
*/ |
||||
|
||||
pre { |
||||
overflow: auto; |
||||
} |
||||
|
||||
/** |
||||
* Address odd `em`-unit font size rendering in all browsers. |
||||
*/ |
||||
|
||||
code, |
||||
kbd, |
||||
pre, |
||||
samp { |
||||
font-family: monospace, monospace; |
||||
font-size: 1em; |
||||
} |
||||
|
||||
/* Forms |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited |
||||
* styling of `select`, unless a `border` property is set. |
||||
*/ |
||||
|
||||
/** |
||||
* 1. Correct color not being inherited. |
||||
* Known issue: affects color of disabled elements. |
||||
* 2. Correct font properties not being inherited. |
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome. |
||||
*/ |
||||
|
||||
button, |
||||
input, |
||||
optgroup, |
||||
select, |
||||
textarea { |
||||
color: inherit; /* 1 */ |
||||
font: inherit; /* 2 */ |
||||
margin: 0; /* 3 */ |
||||
} |
||||
|
||||
/** |
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11. |
||||
*/ |
||||
|
||||
button { |
||||
overflow: visible; |
||||
} |
||||
|
||||
/** |
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`. |
||||
* All other form control elements do not inherit `text-transform` values. |
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. |
||||
* Correct `select` style inheritance in Firefox. |
||||
*/ |
||||
|
||||
button, |
||||
select { |
||||
text-transform: none; |
||||
} |
||||
|
||||
/** |
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` |
||||
* and `video` controls. |
||||
* 2. Correct inability to style clickable `input` types in iOS. |
||||
* 3. Improve usability and consistency of cursor style between image-type |
||||
* `input` and others. |
||||
*/ |
||||
|
||||
button, |
||||
html input[type="button"], /* 1 */ |
||||
input[type="reset"], |
||||
input[type="submit"] { |
||||
-webkit-appearance: button; /* 2 */ |
||||
cursor: pointer; /* 3 */ |
||||
} |
||||
|
||||
/** |
||||
* Re-set default cursor for disabled elements. |
||||
*/ |
||||
|
||||
button[disabled], |
||||
html input[disabled] { |
||||
cursor: default; |
||||
} |
||||
|
||||
/** |
||||
* Remove inner padding and border in Firefox 4+. |
||||
*/ |
||||
|
||||
button::-moz-focus-inner, |
||||
input::-moz-focus-inner { |
||||
border: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
/** |
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in |
||||
* the UA stylesheet. |
||||
*/ |
||||
|
||||
input { |
||||
line-height: normal; |
||||
} |
||||
|
||||
/** |
||||
* It's recommended that you don't attempt to style these elements. |
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width. |
||||
* |
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10. |
||||
* 2. Remove excess padding in IE 8/9/10. |
||||
*/ |
||||
|
||||
input[type="checkbox"], |
||||
input[type="radio"] { |
||||
box-sizing: border-box; /* 1 */ |
||||
padding: 0; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain |
||||
* `font-size` values of the `input`, it causes the cursor style of the |
||||
* decrement button to change from `default` to `text`. |
||||
*/ |
||||
|
||||
input[type="number"]::-webkit-inner-spin-button, |
||||
input[type="number"]::-webkit-outer-spin-button { |
||||
height: auto; |
||||
} |
||||
|
||||
/** |
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome. |
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome |
||||
* (include `-moz` to future-proof). |
||||
*/ |
||||
|
||||
input[type="search"] { |
||||
-webkit-appearance: textfield; /* 1 */ |
||||
-moz-box-sizing: content-box; |
||||
-webkit-box-sizing: content-box; /* 2 */ |
||||
box-sizing: content-box; |
||||
} |
||||
|
||||
/** |
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X. |
||||
* Safari (but not Chrome) clips the cancel button when the search input has |
||||
* padding (and `textfield` appearance). |
||||
*/ |
||||
|
||||
input[type="search"]::-webkit-search-cancel-button, |
||||
input[type="search"]::-webkit-search-decoration { |
||||
-webkit-appearance: none; |
||||
} |
||||
|
||||
/** |
||||
* Define consistent border, margin, and padding. |
||||
*/ |
||||
|
||||
fieldset { |
||||
border: 1px solid #c0c0c0; |
||||
margin: 0 2px; |
||||
padding: 0.35em 0.625em 0.75em; |
||||
} |
||||
|
||||
/** |
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11. |
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets. |
||||
*/ |
||||
|
||||
legend { |
||||
border: 0; /* 1 */ |
||||
padding: 0; /* 2 */ |
||||
} |
||||
|
||||
/** |
||||
* Remove default vertical scrollbar in IE 8/9/10/11. |
||||
*/ |
||||
|
||||
textarea { |
||||
overflow: auto; |
||||
} |
||||
|
||||
/** |
||||
* Don't inherit the `font-weight` (applied by a rule above). |
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X. |
||||
*/ |
||||
|
||||
optgroup { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
/* Tables |
||||
========================================================================== */ |
||||
|
||||
/** |
||||
* Remove most spacing between table cells. |
||||
*/ |
||||
|
||||
table { |
||||
border-collapse: collapse; |
||||
margin-top: .7em; |
||||
margin-bottom: .7em; |
||||
width: 100%; |
||||
th { |
||||
background-color: darken(@color_bg_code_block, 5%); |
||||
} |
||||
td, |
||||
th { |
||||
padding: 4px 16px; |
||||
border: 1px solid darken(@color_bg_code_block, 10%); |
||||
} |
||||
tr { |
||||
background-color: lighten(@color_bg_code_block, 4%); |
||||
} |
||||
tbody>tr { |
||||
.enable-trans(); |
||||
&:hover{ |
||||
background-color: darken(@color_bg_code_block, 5%); |
||||
} |
||||
} |
||||
&>thead>th { |
||||
// border-bottom-width: 2px; |
||||
} |
||||
} |
||||
|
||||
overflow{ |
||||
table{ |
||||
overflow: auto; |
||||
display: block; |
||||
tr{ |
||||
word-break: keep-all; |
||||
} |
||||
} |
||||
} |
||||
|
||||
td, |
||||
th { |
||||
padding: 0; |
||||
} |
||||
@ -1,40 +0,0 @@ |
||||
/* Pagination */ |
||||
|
||||
#page-nav { |
||||
position: relative; |
||||
width: 100%; |
||||
padding: 20px 0px; |
||||
|
||||
.page-number, |
||||
.space { |
||||
display: none; |
||||
} |
||||
.next, |
||||
.prev { |
||||
font-size: 0.8125em; |
||||
font-weight: normal; |
||||
color: lighten(@black, 40%); |
||||
border-radius: 2px; |
||||
|
||||
&:hover { |
||||
color: @black; |
||||
} |
||||
span { |
||||
line-height: 20px; |
||||
vertical-align: middle; |
||||
|
||||
&.icon { |
||||
position: relative; |
||||
top: 1px; |
||||
} |
||||
} |
||||
} |
||||
.next { |
||||
float: right; |
||||
padding: 0 7px 2px 10px; |
||||
} |
||||
.prev { |
||||
float: left; |
||||
padding: 0 10px 2px 7px; |
||||
} |
||||
} |
||||
@ -1,311 +0,0 @@ |
||||
#u-search { |
||||
display: none; |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 60px 20px; |
||||
z-index: 999999; |
||||
|
||||
@media (max-width: @on_modal_threshold) { |
||||
padding: 0px; |
||||
} |
||||
.modal { |
||||
position: fixed; |
||||
height: 80%; |
||||
width: 100%; |
||||
max-width: 640px; |
||||
left: 50%; |
||||
top: 0; |
||||
margin: 64px 0px 0px -320px; |
||||
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; |
||||
overflow: hidden; |
||||
@media (max-width: @on_modal_threshold) { |
||||
box-shadow: none; |
||||
max-width: none; |
||||
top: 0; |
||||
left: 0; |
||||
margin: 0; |
||||
height: 100%; |
||||
border-radius: 0; |
||||
} |
||||
|
||||
.modal-ajax-content { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
.enable-trans(); |
||||
|
||||
&.loaded { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
} |
||||
.modal-header { |
||||
position: relative; |
||||
width: 100%; |
||||
height: @height_navbar; |
||||
background-color: @color_bg_navbar; |
||||
z-index: 3; |
||||
border-top-left-radius: @border_radius; |
||||
border-top-right-radius: @border_radius; |
||||
@media (max-width: @on_modal_threshold) { |
||||
padding: 0px; |
||||
border-radius: 0; |
||||
} |
||||
&:extend(.z-depth-nav); |
||||
.enable-trans(); |
||||
&:hover { |
||||
&:extend(.z-depth-nav-raised); |
||||
} |
||||
&:active { |
||||
|
||||
} |
||||
.btn-close { |
||||
display: block; |
||||
position: absolute; |
||||
width: 50px + 5px; |
||||
height: @height_navbar; |
||||
top: 0; |
||||
right: 0; |
||||
color: @color_text_in_header; |
||||
cursor: pointer; |
||||
text-align: center; |
||||
line-height: @height_navbar; |
||||
vertical-align: middle; |
||||
font-size: @fontsize_header_switcher; |
||||
.enable-trans(); |
||||
z-index: 2; |
||||
|
||||
&:hover { |
||||
transform: rotate(90deg); |
||||
} |
||||
} |
||||
.modal-loading { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 2px; |
||||
background: transparent; |
||||
z-index: 1; |
||||
|
||||
.modal-loading-bar { |
||||
display: block; |
||||
position: relative; |
||||
width: 0%; |
||||
height: 100%; |
||||
background: fade(@white, 100%); |
||||
.enable-trans(); |
||||
} |
||||
} |
||||
#u-search-modal-form { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 2; |
||||
|
||||
#u-search-modal-input { |
||||
width: 100%; |
||||
padding: 0px 50px; |
||||
height: @height_navbar; |
||||
font-size: @fontsize_base; |
||||
line-height: @lineheight_base; |
||||
vertical-align: middle; |
||||
color: @color_text_in_header; |
||||
border: none; |
||||
background: transparent; |
||||
.enable-trans(); |
||||
font-weight: thin; |
||||
appearance: none; |
||||
box-shadow: none; |
||||
|
||||
&:focus { |
||||
border-top-left-radius: @border_radius; |
||||
border-top-right-radius: @border_radius; |
||||
} |
||||
} |
||||
} |
||||
#u-search-modal-btn-submit { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
padding-left: 5px; |
||||
padding-top: 2px; |
||||
background: transparent; |
||||
border: none; |
||||
width: 50px; |
||||
height: @height_navbar; |
||||
vertical-align: middle; |
||||
font-size: @fontsize_header_switcher; |
||||
color: @color_text_in_header; |
||||
z-index: 2; |
||||
} |
||||
} |
||||
.modal-footer { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 50px; |
||||
padding: 0px 15px; |
||||
background: #fff; |
||||
border-top: 1px solid lighten(@black,60%); |
||||
|
||||
.logo { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: center; |
||||
z-index: 0; |
||||
|
||||
a { |
||||
display: inline-block; |
||||
} |
||||
&.google img { |
||||
height: 24px; |
||||
margin-top: 13px; |
||||
} |
||||
&.baidu img { |
||||
height: 22px; |
||||
margin-top: 14px; |
||||
} |
||||
img { |
||||
position: relative; |
||||
display: inline-block; |
||||
width: auto; |
||||
height: 18px; |
||||
margin-top: 16px; |
||||
} |
||||
} |
||||
.modal-error { |
||||
position: relative; |
||||
float: left; |
||||
vertical-align: middle; |
||||
line-height: 50px; |
||||
font-size: 13px; |
||||
z-index: 1; |
||||
} |
||||
.modal-metadata { |
||||
position: relative; |
||||
float: left; |
||||
vertical-align: middle; |
||||
line-height: 50px; |
||||
font-size: 13px; |
||||
z-index: 1; |
||||
} |
||||
.nav { |
||||
position: relative; |
||||
display: block; |
||||
float: right; |
||||
vertical-align: middle; |
||||
font-size: 13px; |
||||
font-weight: 500; |
||||
line-height: 50px; |
||||
color: @color_grey; |
||||
cursor: pointer; |
||||
z-index: 1; |
||||
|
||||
&:hover { |
||||
color: @black; |
||||
} |
||||
&.btn-next { |
||||
margin-left: 10px; |
||||
} |
||||
.icon { |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
} |
||||
.modal-body { |
||||
position: absolute; |
||||
padding: 64px 50px 80px 50px; |
||||
width: 100%; |
||||
height: 100%; |
||||
top: 0; |
||||
left: 0; |
||||
overflow-y: scroll; |
||||
-webkit-overflow-scrolling: touch; |
||||
background-color: @theme_cardbg; |
||||
border-radius: @border_radius; |
||||
@media (max-width: @on_modal_threshold) { |
||||
padding: 60px 20px 80px 20px; |
||||
} |
||||
.modal-results { |
||||
list-style: none; |
||||
|
||||
li { |
||||
border-bottom: 1px solid #e6e8ea; |
||||
|
||||
&:last-child { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
.result { |
||||
position: relative; |
||||
display: block; |
||||
padding-top: 20px; |
||||
text-decoration: none; |
||||
|
||||
&:hover { |
||||
.digest, .icon { |
||||
// color: @black; |
||||
} |
||||
.title { |
||||
color: @color_text_highlight; |
||||
} |
||||
} |
||||
.title { |
||||
display: inline-block; |
||||
max-width: 100%; |
||||
color: lighten(@color_text_main, 10%); |
||||
font-size: @fontsize_base; |
||||
font-weight: bold; |
||||
padding: 1px; |
||||
margin-bottom: 2px; |
||||
line-height: @lineheight_base; |
||||
white-space: normal; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.digest { |
||||
display: block; |
||||
white-space: inherit; |
||||
overflow: hidden; |
||||
word-break: break-all; |
||||
text-overflow: ellipsis; |
||||
font-size: @fontsize_small; |
||||
line-height: @lineheight_base; |
||||
color: lighten(@color_text_main, 30%); |
||||
.enable-trans(); |
||||
em { |
||||
// font-weight: bold; |
||||
} |
||||
} |
||||
.icon { |
||||
position: absolute; |
||||
top: 50%; |
||||
right: 0; |
||||
margin-top: -4px; |
||||
font-size: 11px; |
||||
color: @color_grey; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.modal-overlay { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgba(0,0,0,0.7); |
||||
z-index: 1; |
||||
} |
||||
} |
||||
@ -1,387 +0,0 @@ |
||||
.l_side { |
||||
width: @width_sidebar; |
||||
float: right; |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column; |
||||
@media(max-width: @on_desktop) { |
||||
width: @width_sidebar_m; |
||||
} |
||||
@media(max-width: @on_pad) { |
||||
// margin: @gap 0 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
} |
||||
|
||||
.widget{ |
||||
z-index: 0; |
||||
background: @theme_cardbg; |
||||
margin-top: @gap; |
||||
font-family: @fontfamily_base; |
||||
font-size: @fontsize_base; |
||||
border-radius: @border_radius; |
||||
width: 100%; |
||||
display: none; |
||||
&.desktop{ |
||||
display: block; |
||||
} |
||||
@media(max-width: @on_pad) { |
||||
display: none !important; |
||||
&.mobile{ |
||||
display: block !important; |
||||
} |
||||
} |
||||
@media(max-width: @on_phone) { |
||||
width: ~"calc(100% - 2 * @{gap})"; |
||||
margin: @gap @gap 0 @gap; |
||||
display: none !important; |
||||
&.mobile{ |
||||
display: block !important; |
||||
} |
||||
} |
||||
header{ |
||||
border-top-left-radius: @border_radius; |
||||
border-top-right-radius: @border_radius; |
||||
font-weight: bold; |
||||
line-height: 1.5em; |
||||
padding: ~"calc(@{gap} - 2px)"; |
||||
padding-bottom: 0; |
||||
&,a{ |
||||
color: @theme_main; |
||||
} |
||||
a:hover{ |
||||
color: @color_text_highlight; |
||||
} |
||||
span.name{ |
||||
margin-left: @gap/2; |
||||
} |
||||
} |
||||
.content{ |
||||
text-align: justify; |
||||
padding: @gap/2 0; |
||||
max-height: ~"calc(100% - @{height_navbar} - 12.5 * @{gap})"; |
||||
max-width: 100%; |
||||
p { |
||||
margin: .6em 0; |
||||
} |
||||
ul > li{ |
||||
a{ |
||||
color: fade(@color_text_main, 80%); |
||||
padding: 0 @gap; |
||||
padding-left: @gap/2 + 4px; |
||||
line-height: @height_cell; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-content: center; |
||||
border-left: 4px solid transparent; |
||||
.enable-trans(); |
||||
} |
||||
} |
||||
ul.entry, ul.popular-posts{ |
||||
a{ |
||||
.name{ |
||||
flex:auto; |
||||
&:extend(.txt-ellipsis); |
||||
color: fade(@color_text_main, 80%); |
||||
} |
||||
.badge{ |
||||
flex:none; |
||||
font-weight: normal; |
||||
font-size: @fontsize_small; |
||||
color: fade(@color_text_main, 70%); |
||||
} |
||||
&:hover{ |
||||
border-left: 4px solid @theme_main; |
||||
background: fade(@theme_main, 10%); |
||||
} |
||||
&.active{ |
||||
border-left: 4px solid @theme_main; |
||||
.name{ |
||||
color: @theme_main; |
||||
} |
||||
.badge{ |
||||
color: fade(@theme_main, 90%); |
||||
} |
||||
} |
||||
&:active{ |
||||
border-left: 8px solid @theme_main; |
||||
} |
||||
&.child{ |
||||
padding-left: @gap*2; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
&.blogger{ |
||||
.enable-trans(); |
||||
.content{ |
||||
padding: 0; |
||||
div.avatar{ |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
img{ |
||||
padding: 0; |
||||
margin: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
width: @width_sidebar; |
||||
height: @width_sidebar; |
||||
border-top-left-radius: @border_radius; |
||||
border-top-right-radius: @border_radius; |
||||
@media(max-width: @on_desktop) { |
||||
width: @width_sidebar_m; |
||||
height: @width_sidebar_m; |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
width: 96px; |
||||
height: 96px; |
||||
border-radius: 100%; |
||||
margin-top: @gap/2; |
||||
padding: @gap/2; |
||||
} |
||||
|
||||
} |
||||
h2{ |
||||
text-align: center; |
||||
font-weight: bold; |
||||
margin: @gap/2; |
||||
margin-top: @gap; |
||||
@media(max-width: @on_pad){ |
||||
margin: @gap/2; |
||||
} |
||||
} |
||||
p{ |
||||
font-size: @fontsize_base; |
||||
font-weight: bold; |
||||
text-align: center; |
||||
margin: @gap/2 @gap/2 0 @gap/2; |
||||
empty-cells: hide; |
||||
} |
||||
.social-wrapper{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
margin: 4px @gap/4; |
||||
a{ |
||||
color: fade(@color_text_main, 70%); |
||||
padding: 0; |
||||
.enable-trans(); |
||||
&:hover{ |
||||
color: @color_text_highlight; |
||||
} |
||||
&.social { |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
justify-content: center; |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
@media(max-width: @on_pad){ |
||||
box-shadow: none; |
||||
background: transparent; |
||||
margin-top: 2*@gap; |
||||
backdrop-filter: none; |
||||
} |
||||
} |
||||
|
||||
&.text{ |
||||
.content{ |
||||
font-size: @fontsize_small; |
||||
word-break: break-all; |
||||
padding: @gap/4 @gap; |
||||
line-height: @fontsize_small + 8px; |
||||
a{ |
||||
color: @color_text_link; |
||||
.enable-trans(); |
||||
&:hover { |
||||
color: @color_text_highlight; |
||||
text-decoration: underline; |
||||
} |
||||
&:active { |
||||
color: darken(@color_text_highlight, 25%); |
||||
} |
||||
} |
||||
p btn { |
||||
.btn-wrapper(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.list{ |
||||
.content{ |
||||
padding: @gap/2 0; |
||||
a{ |
||||
font-size: @fontsize_small; |
||||
font-weight: bold; |
||||
&:hover{ |
||||
text-decoration: none; |
||||
} |
||||
i{ |
||||
color: fade(@color_text_main,70%); |
||||
line-height: @height_cell; |
||||
margin-right: 3px; |
||||
} |
||||
img{ |
||||
display: inline; |
||||
vertical-align: middle; |
||||
height: 18px; |
||||
width: 18px; |
||||
margin-bottom: 4px; |
||||
&#round{ |
||||
border-radius: 100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&.grid{ |
||||
.content{ |
||||
ul.grid{ |
||||
border: none; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: space-around; |
||||
padding: 0 @gap; |
||||
a{ |
||||
text-align: center; |
||||
border-radius: @border_radius; |
||||
margin: 4px 0; |
||||
padding: 4px 8px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
font-size: @fontsize_small * .9; |
||||
font-weight: bold; |
||||
line-height: @fontsize_small * 1.3; |
||||
color: fade(@color_text_main, 70%); |
||||
i{ |
||||
margin-top: .3em; |
||||
margin-bottom: .3em; |
||||
font-size: 1.8em; |
||||
} |
||||
img{ |
||||
display: inline; |
||||
vertical-align: middle; |
||||
margin-bottom: 4px; |
||||
&#round{ |
||||
border-radius: 100%; |
||||
} |
||||
} |
||||
border: 1px solid transparent; |
||||
&:hover { |
||||
color: @theme_main; |
||||
background: fade(@theme_main, 10%); |
||||
border-radius: 4px; |
||||
} |
||||
&:active { |
||||
color: @theme_main; |
||||
} |
||||
&.active { |
||||
color: @theme_main; |
||||
border: 1px solid @theme_main; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&.category{ |
||||
.content{ |
||||
font-size: @fontsize_small; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
|
||||
&.tagcloud{ |
||||
.content{ |
||||
text-align: justify; |
||||
padding: @gap/2 @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 |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.related_posts{ |
||||
.content{ |
||||
font-size: @fontsize_small; |
||||
font-weight: bold; |
||||
h3{ |
||||
font-size: @fontsize_small; |
||||
font-weight: bold; |
||||
margin: 0; |
||||
a{ |
||||
line-height: inherit; |
||||
padding-top: 4px; |
||||
padding-bottom: 4px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.qrcode{ |
||||
.content{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
padding-left: @gap; |
||||
padding-right: @gap; |
||||
img{ |
||||
margin-bottom: 4px; |
||||
} |
||||
margin-bottom: 4px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.l_side > .widget.page{ |
||||
.content{ |
||||
padding-top: 0; |
||||
padding-left: @gap - 4px; |
||||
padding-right: @gap - 4px; |
||||
} |
||||
} |
||||
|
||||
.aplayer-container{ |
||||
display: flex; |
||||
justify-content: center; |
||||
min-height: 100px; |
||||
meting-js{ |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
.aplayer{ |
||||
max-width: 500px; |
||||
border-radius: 4px; |
||||
color: @color_text_main; |
||||
font-family: @fontfamily_base; |
||||
.aplayer-list{ |
||||
text-align: left; |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
border-radius: @border_radius; |
||||
} |
||||
} |
||||
@ -1,110 +0,0 @@ |
||||
.l_side .toc-wrapper{ |
||||
z-index: 1; |
||||
overflow: hidden; |
||||
border-radius: @border_radius; |
||||
position: sticky; |
||||
top: @height_navbar + @gap; |
||||
.enable-trans(); |
||||
header{ |
||||
position: sticky; |
||||
width: 100%; |
||||
top: 0; |
||||
padding-bottom: @gap/4; |
||||
} |
||||
.content{ |
||||
max-height: ~"calc(100vh - 5 * @{gap} - @{height_navbar})";; |
||||
overflow: auto; |
||||
a { |
||||
border-left: 4px solid transparent; |
||||
&:hover{ |
||||
background: fade(@theme_main, 10%); |
||||
} |
||||
&:active{ |
||||
border-left: 8px solid @theme_main; |
||||
} |
||||
&.active{ |
||||
color: @theme_main; |
||||
border-left: 4px solid @theme_main; |
||||
} |
||||
} |
||||
} |
||||
&.active{ |
||||
position: fixed; |
||||
box-shadow: @boxshadow_card_raised; |
||||
top: @height_navbar; |
||||
header{ |
||||
.s-toc{ |
||||
transform: rotate(30deg); |
||||
} |
||||
} |
||||
width: @width_sidebar; |
||||
@media(max-width: @on_desktop) { |
||||
width: @width_sidebar_m; |
||||
} |
||||
@media(max-width: @on_pad) { |
||||
width: ~"calc(100% - 2 * @{gap})"; |
||||
} |
||||
} |
||||
.enable-trans(); |
||||
@media(max-width: @on_pad){ |
||||
position: fixed; |
||||
max-height: 1000px; |
||||
width: ~"calc(100% - 2 * @{gap})"; |
||||
top: @height_navbar; |
||||
box-shadow: @boxshadow_card_raised; |
||||
visibility: hidden; |
||||
transform: scale(0,0); |
||||
transform-origin: right top; |
||||
&.active{ |
||||
visibility: visible; |
||||
transform: scale(1,1); |
||||
} |
||||
} |
||||
|
||||
a { |
||||
padding-left: 8px; |
||||
color: fade(@color_text_main, 70%); |
||||
font-size: @fontsize_small; |
||||
display: inline-block; |
||||
} |
||||
ol{ |
||||
.toc-item.toc-level-1 { |
||||
.toc-child a{ |
||||
padding-left: 0.8*@gap; |
||||
font-weight: normal; |
||||
} |
||||
} |
||||
.toc-item.toc-level-2 { |
||||
.toc-child a{ |
||||
padding-left: 1.6*@gap; |
||||
font-weight: normal; |
||||
} |
||||
} |
||||
.toc-item.toc-level-3 { |
||||
.toc-child a{ |
||||
padding-left: 2.4*@gap; |
||||
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{ |
||||
display:none; |
||||
} |
||||
} |
||||
@ -1,39 +0,0 @@ |
||||
.tog{ |
||||
position:fixed; |
||||
top: @height_navbar + @gap * 2; |
||||
right: ~"calc((100% - @{container-width})/2)"; |
||||
.enable-trans(); |
||||
@media(max-width: @width_container){ |
||||
right: 0; |
||||
} |
||||
@media(max-width: @on_phone){ |
||||
right: -@width_sidebar; |
||||
&.active{ |
||||
transform: translateX(-@width_sidebar); |
||||
} |
||||
} |
||||
width: @width_sidebar + 6px; |
||||
z-index:3; |
||||
padding: @gap; |
||||
border-left: 6px solid @color_bg_navbar; |
||||
background: @color_text_in_header; |
||||
a { |
||||
display: inline-block; |
||||
&:hover,&:active,&.active{ |
||||
color: @color_text_highlight; |
||||
} |
||||
} |
||||
ol{ |
||||
&.toc-child{ |
||||
padding-left: @gap; |
||||
} |
||||
li{ |
||||
list-style:none; |
||||
width: auto; |
||||
&:extend(.txt-ellipsis); |
||||
} |
||||
} |
||||
&:empty{ |
||||
display:none; |
||||
} |
||||
} |
||||
@ -1,334 +0,0 @@ |
||||
@charset "utf-8"; |
||||
.typo { |
||||
font-size:1.6rem; |
||||
@media (max-width: @on_phone) { |
||||
padding: 0px 20px; |
||||
} |
||||
} |
||||
/* 内外边距通常让各个浏览器样式的表现位置不同 */ |
||||
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ |
||||
article, aside, details, figcaption, figure, footer, header, menu, nav, section { |
||||
display: block; |
||||
} |
||||
|
||||
/* HTML5 媒体文件跟 img 保持一致 */ |
||||
audio, canvas, video { |
||||
display: inline-block; |
||||
} |
||||
|
||||
/* 要注意表单元素并不继承父级 font 的问题 */ |
||||
body, button, input, select, textarea { |
||||
font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans; |
||||
} |
||||
|
||||
button::-moz-focus-inner, |
||||
input::-moz-focus-inner { |
||||
padding: 0; |
||||
border: 0; |
||||
} |
||||
|
||||
/* 去掉各Table cell 的边距并让其边重合 */ |
||||
table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0; |
||||
} |
||||
|
||||
/* 去除默认边框 */ |
||||
fieldset, img { |
||||
border: 0; |
||||
} |
||||
|
||||
/* 块/段落引用 */ |
||||
blockquote { |
||||
position: relative; |
||||
color: #999; |
||||
font-weight: 400; |
||||
border-left: 1px solid #1abc9c; |
||||
padding-left: 1em; |
||||
margin: 1em 3em 1em 2em; |
||||
} |
||||
|
||||
@media only screen and ( max-width: 640px ) { |
||||
blockquote { |
||||
margin: 1em 0; |
||||
} |
||||
} |
||||
|
||||
/* Firefox 以外，元素没有下划线，需添加 */ |
||||
acronym, abbr { |
||||
border-bottom: 1px dotted; |
||||
font-variant: normal; |
||||
} |
||||
|
||||
/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ |
||||
abbr { |
||||
cursor: help; |
||||
} |
||||
|
||||
/* 一致的 del 样式 */ |
||||
del { |
||||
text-decoration: line-through; |
||||
} |
||||
|
||||
address, caption, cite, code, dfn, em, th, var { |
||||
font-style: normal; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
/* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */ |
||||
ul, ol { |
||||
list-style: none; |
||||
} |
||||
|
||||
/* 对齐是排版最重要的因素, 别让什么都居中 */ |
||||
caption, th { |
||||
text-align: left; |
||||
} |
||||
|
||||
q:before, q:after { |
||||
content: ''; |
||||
} |
||||
|
||||
/* 统一上标和下标 */ |
||||
sub, sup { |
||||
font-size: 75%; |
||||
line-height: 0; |
||||
position: relative; |
||||
} |
||||
|
||||
:root sub, :root sup { |
||||
vertical-align: baseline; /* for ie9 and other modern browsers */ |
||||
} |
||||
|
||||
sup { |
||||
top: -0.5em; |
||||
} |
||||
|
||||
sub { |
||||
bottom: -0.25em; |
||||
} |
||||
|
||||
/* 让链接在 hover 状态下显示下划线 */ |
||||
a { |
||||
color: #1abc9c; |
||||
} |
||||
|
||||
a:hover { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
.typo a { |
||||
border-bottom: 1px solid #1abc9c; |
||||
} |
||||
|
||||
.typo a:hover { |
||||
border-bottom-color: #555; |
||||
color: #555; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
/* 默认不显示下划线，保持页面简洁 */ |
||||
ins, a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的， |
||||
* 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号 |
||||
* 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element |
||||
* 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated |
||||
* 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/ |
||||
*/ |
||||
u, .typo-u { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 标记，类似于手写的荧光笔的作用 */ |
||||
mark { |
||||
background: #fffdd1; |
||||
border-bottom: 1px solid #ffedce; |
||||
padding: 2px; |
||||
margin: 0 5px; |
||||
} |
||||
|
||||
/* 代码片断 */ |
||||
pre, code, pre tt { |
||||
font-family: Courier, 'Courier New', monospace; |
||||
} |
||||
|
||||
pre { |
||||
background: #f8f8f8; |
||||
border: 1px solid #ddd; |
||||
padding: 1em 1.5em; |
||||
display: block; |
||||
-webkit-overflow-scrolling: touch; |
||||
} |
||||
|
||||
/* 一致化 horizontal rule */ |
||||
hr { |
||||
border: none; |
||||
border-bottom: 1px solid #cfcfcf; |
||||
margin-bottom: 0.8em; |
||||
height: 10px; |
||||
} |
||||
|
||||
/* 底部印刷体、版本等标记 */ |
||||
small, .typo-small, |
||||
/* 图片说明 */ |
||||
figcaption { |
||||
font-size: 0.9em; |
||||
color: #888; |
||||
} |
||||
|
||||
strong, b { |
||||
font-weight: bold; |
||||
color: #000; |
||||
} |
||||
|
||||
/* 可拖动文件添加拖动手势 */ |
||||
[draggable] { |
||||
cursor: move; |
||||
} |
||||
|
||||
.clearfix:before, .clearfix:after { |
||||
content: ""; |
||||
display: table; |
||||
} |
||||
|
||||
.clearfix:after { |
||||
clear: both; |
||||
} |
||||
|
||||
.clearfix { |
||||
zoom: 1; |
||||
} |
||||
|
||||
/* 强制文本换行 */ |
||||
.textwrap, .textwrap td, .textwrap th { |
||||
word-wrap: break-word; |
||||
word-break: break-all; |
||||
} |
||||
|
||||
.textwrap-table { |
||||
table-layout: fixed; |
||||
} |
||||
|
||||
/* 提供 serif 版本的字体设置: iOS 下中文自动 fallback 到 sans-serif */ |
||||
.serif { |
||||
font-family: Palatino, Optima, Georgia, serif; |
||||
} |
||||
|
||||
/* 保证块/段落之间的空白隔行 */ |
||||
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, |
||||
.typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote { |
||||
margin-bottom: 1.2em |
||||
} |
||||
|
||||
h1, h2, h3, h4, h5, h6 { |
||||
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; |
||||
font-weight: 100; |
||||
color: #000; |
||||
line-height: 1.35; |
||||
} |
||||
|
||||
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */ |
||||
.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6, |
||||
.typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6 { |
||||
margin-top: 1.2em; |
||||
margin-bottom: 0.6em; |
||||
line-height: 1.35; |
||||
} |
||||
|
||||
.typo h1, .typo-h1 { |
||||
font-size: 2em; |
||||
} |
||||
|
||||
.typo h2, .typo-h2 { |
||||
font-size: 1.8em; |
||||
} |
||||
|
||||
.typo h3, .typo-h3 { |
||||
font-size: 1.6em; |
||||
} |
||||
|
||||
.typo h4, .typo-h4 { |
||||
font-size: 1.4em; |
||||
} |
||||
|
||||
.typo h5, .typo h6, .typo-h5, .typo-h6 { |
||||
font-size: 1.2em; |
||||
} |
||||
|
||||
/* 在文章中，应该还原 ul 和 ol 的样式 */ |
||||
.typo ul, .typo-ul { |
||||
margin-left: 1.3em; |
||||
list-style: disc; |
||||
} |
||||
|
||||
.typo ol, .typo-ol { |
||||
list-style: decimal; |
||||
margin-left: 1.9em; |
||||
} |
||||
|
||||
.typo li ul, .typo li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol { |
||||
margin-bottom: 0.8em; |
||||
margin-left: 2em; |
||||
} |
||||
|
||||
.typo li ul, .typo-ul ul, .typo-ol ul { |
||||
list-style: circle; |
||||
} |
||||
|
||||
/* 同 ul/ol，在文章中应用 table 基本格式 */ |
||||
.typo table th, .typo table td, .typo-table th, .typo-table td, .typo table caption { |
||||
border: 1px solid #ddd; |
||||
padding: 0.5em 1em; |
||||
color: #666; |
||||
} |
||||
|
||||
.typo table th, .typo-table th { |
||||
background: #fbfbfb; |
||||
} |
||||
|
||||
.typo table thead th, .typo-table thead th { |
||||
background: #f1f1f1; |
||||
} |
||||
|
||||
.typo table caption { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
/* 去除 webkit 中 input 和 textarea 的默认样式 */ |
||||
.typo-input, .typo-textarea { |
||||
-webkit-appearance: none; |
||||
border-radius: 0; |
||||
} |
||||
|
||||
.typo-em, .typo em, legend, caption { |
||||
color: #000; |
||||
font-weight: inherit; |
||||
} |
||||
|
||||
/* 着重号，只能在少量（少于100个字符）且全是全角字符的情况下使用 */ |
||||
.typo-em { |
||||
position: relative; |
||||
} |
||||
|
||||
.typo-em:after { |
||||
position: absolute; |
||||
top: 0.65em; |
||||
left: 0; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; |
||||
} |
||||
|
||||
/* Responsive images */ |
||||
.typo img { |
||||
max-width: 100%; |
||||
} |
||||
@ -1,17 +0,0 @@ |
||||
@charset "utf-8"; |
||||
@import "less/_defines.less"; |
||||
@import "less/_fonts.less"; |
||||
@import "less/_normalize.less"; |
||||
@import "less/_base.less"; |
||||
@import "less/_header.less"; |
||||
@import "less/_main.less"; |
||||
@import "less/_side.less"; |
||||
@import "less/_toc.less"; |
||||
@import "less/_archive.less"; |
||||
@import "less/_article.less"; |
||||
@import "less/_pagination.less"; |
||||
@import "less/_search.less"; |
||||
@import "less/_footer.less"; |
||||
@import "less/_color.less"; |
||||
@import "less/_layout.less"; |
||||
@import "less/_links.less"; |
||||
Loading…
Reference in new issue