Custom theme for cnblogs
<!-- head --> | |
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |
<link rel="stylesheet" href="https://files.cnblogs.com/files/xjtu-blacksmith/arduino-light.css"> | |
<script async src="https://cdn.bootcss.com/pangu/4.0.7/pangu.min.js"></script> | |
<script src="https://cdn.bootcss.com/mathjax-mhchem/3.3.2/mhchem.js"></script> |
:root { | |
--text-color: #454851; /* 深色文本 */ | |
--light-text-color: #f1f2f3; /* 浅色文本 */ | |
--bg-color: #f9fafa; /* 浅色背景 */ | |
--dark-bg-color: #eee; /* 深色强调背景 */ | |
--link-color: #508484; /* 链接颜色 */ | |
--theme-color: #17b890; /* 主题色 */ | |
--accent-color: #f55d3e; /* 强调色 */ | |
--shadow: 0 3px 9px 2px rgba(100, 100, 100, .5); /* 阴影样式 */ | |
} | |
/* 页面 & 正文排版样式 */ | |
html { | |
font-size: 100%; | |
} | |
body { | |
background: var(--bg-color); | |
color: var(--text-color); | |
max-width: 960px; | |
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; | |
font-size: 14px; | |
letter-spacing: .035em; | |
margin: auto; | |
} | |
a { | |
text-decoration: none; | |
color: var(--link-color); | |
} | |
em { | |
font-style: normal; /* 斜体改强调 */ | |
color: var(--accent-color); | |
} | |
#cnblogs_post_body { | |
line-height: 2; | |
} | |
#cnblogs_post_body blockquote, .entrylistDescription { | |
border-width: 0; | |
border-left: 3px solid var(--accent-color); | |
color: #999; | |
margin: 1.5ex 1em; | |
padding: 0 1em; | |
} | |
#header h1 { | |
text-align: center; | |
margin: auto; | |
} | |
#cnblogs_post_body h2 { | |
font-size: 1.7em; | |
margin-top: 30px; | |
border-bottom: 1px solid var(--accent-color); | |
} | |
#cnblogs_post_body h3 { | |
font-size: 1.3em; | |
margin-top: 20px; | |
} | |
#cnblogs_post_body h4 { | |
font-size: 1.1em; | |
margin-top: 10px; | |
} | |
#cnblogs_post_body img { | |
display: block; | |
max-width: 90% !important; | |
max-height: 80vh !important; | |
box-shadow: var(--shadow); | |
background-color: var(--bg-color); | |
margin: 2ex auto; | |
} | |
#cnblogs_post_body table { | |
margin: auto; | |
} | |
#cnblogs_post_body label { | |
display: block; | |
text-align: center; | |
font-size: 0.9em; | |
color: var(--theme-color); | |
} | |
.MJXp-math, .math.display .math { | |
max-width: 95%; | |
min-width: unset!important; | |
vertical-align: middle; | |
overflow-x: auto; /* 行间公式溢出修正 */ | |
overflow-y: hidden; | |
} | |
.math.inline { | |
margin-left: 0.1em; /* 补足被 pangu.js 遗漏的空格 */ | |
} | |
.cnblogs-markdown code, .cnblogs-post-body code { | |
border: 0 !important; | |
background: unset !important; | |
font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace !important; | |
font-size: 1em !important; | |
vertical-align: unset; | |
margin: 0; | |
padding: 0 !important; | |
} | |
.cnblogs-markdown code.hljs, .cnblogs-post-body code.hljs { | |
border: 2px solid var(--accent-color) !important; | |
font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace !important; | |
font-size: .9em !important; | |
padding: 10px !important; | |
} | |
.footnote-ref sup::after, a.c_b_p_desc_readmore::after { | |
content: ']'; | |
} | |
.footnote-ref sup::before, a.c_b_p_desc_readmore::before { | |
content: '['; | |
} | |
a.c_b_p_desc_readmore, #cnblogs_post_body blockquote.alert { | |
color: var(--accent-color); | |
} | |
/* 部件样式 */ | |
#MySignature, #comment_form_container { | |
border: 1px dashed var(--accent-color); | |
padding: 5px 20px; | |
} | |
#ad_t2 { | |
padding: 10px; | |
} | |
#ad_t2 a { | |
color: #ddd; | |
} | |
.c_ad_block { | |
display: none; | |
} | |
#div_digg { | |
border: 2px solid var(--accent-color); | |
border-radius: 10px; | |
padding: 5px 10px; | |
} | |
#footer { | |
border-top: 1px solid var(--accent-color); | |
text-align: center; | |
margin-top: 10px; | |
padding: 10px 0; | |
} | |
#leftcontentcontainer { | |
padding-left: 10px; | |
margin-top: 10px; | |
} | |
#leftcontentcontainer ul { | |
padding-left: 20px; | |
} | |
#main { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
width: 100%; | |
} | |
#myposts { | |
margin-left: 0; | |
} | |
#myposts .PostList { | |
font-size: 1.2em; | |
border-left: 3px solid var(--accent-color); | |
margin: 2ex 0; | |
padding: 0 10px; | |
} | |
#myposts .PostList a { | |
color: var(--theme-color); | |
font-weight: bold; | |
} | |
#myposts .postDesc2 { | |
font-size: .8em; | |
} | |
#navigator { | |
border-bottom: 1px dashed var(--accent-color); | |
height: 23px; | |
padding: 5px; | |
} | |
#navigator .blogStats { | |
float: right; | |
margin: auto; | |
} | |
#navigator ul { | |
width: 50%; | |
float: left; | |
margin: 0 0 0 -15px; | |
padding: 0; | |
} | |
#navigator ul li { | |
list-style: none; | |
float: left; | |
margin: 0 10px; | |
} | |
#post_next_prev { | |
font-size: .9em; | |
margin-bottom: 1ex; | |
} | |
#sideBar img, #green_channel { | |
max-width: 100%; | |
} | |
#sideBar, #mainContent { | |
width: 100%; | |
} | |
#sideBarMain { | |
border-top: 1px solid var(--accent-color); | |
display: flex; | |
line-height: 3ex; | |
} | |
#sidebar_news { | |
max-width: 200px; | |
padding-right: 10px; | |
line-height: unset; | |
margin: 10px 10px 0 0; | |
} | |
#tbCommentBody { | |
border: 2px solid var(--accent-color); | |
border-radius: 10px; | |
} | |
.day .dayTitle { | |
font-size: .9em; | |
} | |
.day .postTitle a, .entrylistPosttitle a, .entrylistTitle, h1 a, h2, h3, h4 { | |
color: var(--theme-color); | |
} | |
.day .postTitle, .entrylistItemTitle { | |
font-size: 1.4em; | |
font-weight: bold; | |
margin: .5ex 0; | |
} | |
.day, .entrylistItem { | |
border-left: 3px solid var(--accent-color); | |
margin: 50px 0; | |
padding: 0 10px; | |
} | |
.entrylistDescription { | |
font-size: .9em; | |
padding: 10px; | |
} | |
/* 动画样式,预先隐藏 */ | |
.day, #mainContent, #sideBar, #nav_next_page, #footer { | |
display: none; | |
} | |
#blogTitle, #navigator { | |
opacity: 0; | |
} | |
/* 目录样式 */ | |
/* source: <https://www.w3cplus.com/css3/css3-ordered-list-styles> */ | |
.toc { | |
background: var(--bg-color); | |
padding: 15px; | |
position: fixed; | |
right: calc(8% + 3em); | |
bottom: calc(8% + 3em); | |
width: 350px; | |
max-width: calc(80% - 3em); | |
max-height: 60%; | |
overflow-y: auto; | |
border-radius: 2px; | |
border: 3px solid var(--accent-color); | |
box-shadow: var(--shadow); | |
} | |
.toc ul { | |
counter-reset: li; | |
list-style: none; | |
padding: 0; | |
margin-bottom: 4em; | |
text-shadow: var(--shadow); | |
} | |
.toc ul ul { | |
margin: 0 0 0 2em; | |
} | |
.toc a { | |
position: relative; | |
display: block; | |
padding: 0.4em 0.4em 0.4em 0.8em; | |
margin: 0.5em 0 0.5em 2em; | |
background: var(--dark-bg-color); | |
text-decoration: none; | |
-webkit-transition: all 0.3s ease-out; | |
transition: all 0.3s ease-out; | |
} | |
.toc a:hover { | |
opacity: 1; | |
} | |
.toc a::before { | |
content: counter(li); | |
counter-increment: li; | |
position: absolute; | |
left: -2.5em; | |
top: 50%; | |
margin-top: -1em; | |
background: var(--theme-color); | |
color: var(--light-text-color); | |
width: 2em; | |
height: 2em; | |
line-height: 2em; | |
text-align: center; | |
-webkit-transition: all 0.3s ease-out; | |
transition: all 0.3s ease-out; | |
} | |
.toc ul ul a::before { | |
background: var(--accent-color); | |
} | |
.toc a::after { | |
position: absolute; | |
content: ""; | |
border: 0.5em solid transparent; | |
left: -1em; | |
top: 50%; | |
margin-top: -0.5em; | |
-webkit-transition: all 0.3s ease-out; | |
-moz-transition: all 0.3s ease-out; | |
-ms-transition: all 0.3s ease-out; | |
transition: all 0.3s ease-out; | |
} | |
.toc a:hover::after { | |
left: -0.5em; | |
} | |
.toc-title { | |
text-align: center; | |
font-size: 1.5em; | |
} | |
/* 自定义评论样式 */ | |
/* source: <https://www.jianshu.com/p/cf2d5c2f15fa> */ | |
.feedbackItem { | |
/*为了给after伪元素自动继承*/ | |
padding: 5px 12px 5px 12px; | |
box-sizing: border-box; | |
border-radius: 6px; | |
position: relative; | |
word-break: break-all; | |
background: #ddd; | |
line-height: 4ex; | |
font-size: 0.9em; | |
margin: 2ex 80px 2ex auto; | |
width: calc(90% - 80px); | |
padding: 10px; | |
} | |
.feedbackItem.feedbackLouzhu { | |
background: #76D7C4; | |
margin: 2ex auto 2ex 80px; | |
} | |
.feedbackItem.feedbackLouzhu a { | |
color: var(--accent-color); | |
} | |
.feedbackItem::before { | |
content: ''; | |
position: absolute; | |
top: 30%; | |
right: -5px; | |
width: 10px; | |
height: 10px; | |
margin-top: -10px; | |
background: inherit; | |
/*自动继承父元素的背景*/ | |
transform: rotate(45deg); | |
} | |
.feedbackItem.feedbackLouzhu::before { | |
left: -5px; | |
right: unset; | |
} | |
/* 悬浮目录按钮样式 */ | |
/* source: <http://chensd.com/2016-06/Material-Design-Float-Action-Button.html> */ | |
.float-action-button { | |
position: fixed; | |
right: 8%; | |
bottom: 8%; | |
cursor: pointer; | |
background-color: var(--accent-color); | |
color: var(--light-text-color); | |
opacity: 0.9; | |
border-radius: 50%; | |
width: 4em; | |
height: 4em; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background-repeat: no-repeat; | |
background-position: center; | |
background-size: 30px; | |
box-shadow: var(--shadow); | |
} | |
.float-action-button:hover { | |
opacity: 1; | |
} | |
.float-action-button span { | |
margin: auto; | |
} | |
.float-toc-container { | |
display: none; | |
} | |
.user-avatar { | |
position: absolute; | |
width: 45px; | |
height: 45px; | |
border-radius: 50%; | |
top: calc(30% - 22.5px); | |
right: -70px; | |
border: 2px solid var(--theme-color); | |
} | |
.feedbackLouzhu .user-avatar { | |
left: -70px; | |
border-color: var(--accent-color); | |
} | |
/* 响应式设计 */ | |
@media print, screen and (max-width: 960px) { | |
body { | |
margin: 20px; | |
} | |
#sidebar_news { | |
max-width: 150px; | |
margin-right: 20px; | |
} | |
#tbCommentBody { | |
max-width: 100%; | |
} | |
#tbCommentAuthor { | |
max-width: calc(100% - 31px) | |
} | |
#comment_form { | |
padding-left: 0px !important; | |
; | |
margin-left: 0px; | |
} | |
} | |
@media print, screen and (max-width: 400px) { | |
#navigator ul { | |
display: none; | |
} | |
li .math.inline .math { | |
max-width: 250px; | |
overflow-x: auto; | |
overflow-y: hidden; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment