Last active
February 6, 2020 04:42
-
-
Save xjtu-blacksmith/1e1b7abd360fef49b6575e3c45637974 to your computer and use it in GitHub Desktop.
Custom theme for cnblogs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
: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