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