You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

924 lines
21 KiB

.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-radius: @border_radius_code_block;
border: 1px solid darken(@color_bg_code_block, 10%);
padding: @gap;
}
pre>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;
p{
font-size: @fontsize_base;
line-height: @lineheight_base;
margin: 0;
}
h4{
margin-top: @gap/2;
margin-bottom: @gap/2;
position: relative;
font-family: @fontfamily_base;
font-weight: bold;
font-size: @fontsize_h5;
@media(max-width:@on_phone) {
letter-spacing: -1px;
}
}
h6{
margin: 0;
word-spacing: normal;
}
.enable-trans();
// border: 1px solid transparent;
// &:hover{
// border: 1px solid fade(@theme_main, 30%);
// }
.tags{
background: transparent;
padding: 0;
margin-top: @gap/2;
margin-bottom: 0;
font-size: @fontsize_small * 0.9;
word-spacing: 4px;
}
&:first-child{
margin-left: 0;
margin-right: 0;
}
}
.prev{
text-align: left;
margin-left: 0;
margin-right: @gap/2;
border-top-right-radius: @border_radius;
border-bottom-right-radius: @border_radius;
}
.next{
text-align: right;
margin-left: @gap/2;
margin-right: 0;
border-top-left-radius: @border_radius;
border-bottom-left-radius: @border_radius;
}
}
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: 0;
font-family: @fontfamily_base;
font-size: @fontsize_base;
box-shadow: none;
border-radius: @border_radius;
cursor: auto;
.enable-trans();
&:hover {
box-shadow: none;
}
&:active {
box-shadow: none;
}
header {
display: none;
}
.content{
padding: 0;
margin-top: @gap;
}
}
.widget-blur{
backdrop-filter: none;
}
}