2022-04-10 11:10:56 +08:00
|
|
|
|
@charset "UTF-8";
|
|
|
|
|
/* ----
|
|
|
|
|
|
|
|
|
|
# Single Theme
|
|
|
|
|
# By: Dreamer-Paul
|
|
|
|
|
# Last Update: 2022.2.25
|
|
|
|
|
|
|
|
|
|
一个简洁大气,含夜间模式的 Typecho 博客模板。
|
|
|
|
|
|
|
|
|
|
本代码为奇趣保罗原创,并遵守 MIT 开源协议。欢迎访问我的博客:https://paugram.com
|
|
|
|
|
|
|
|
|
|
---- */
|
|
|
|
|
|
|
|
|
|
/* 0 - 全局
|
|
|
|
|
-------------------------------- */
|
|
|
|
|
:root{
|
|
|
|
|
--blue: #6f9fc7;
|
|
|
|
|
--light-blue: #9fcff7;
|
|
|
|
|
--border: #ddd;
|
|
|
|
|
--dark-border: #ccc;
|
|
|
|
|
--light-border: #eee;
|
|
|
|
|
--light-background: #fff;
|
|
|
|
|
--radius: .25em;
|
2022-05-27 01:33:50 +08:00
|
|
|
|
--dark-blue: #6e8aad;
|
|
|
|
|
--board-back: #fff;
|
|
|
|
|
--board-border: #ccc;
|
2022-04-10 11:10:56 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body{
|
2022-05-27 01:33:50 +08:00
|
|
|
|
color: rgb(46, 44, 44);
|
2022-04-10 11:10:56 +08:00
|
|
|
|
font-weight: 300;
|
|
|
|
|
background: #fafafa;
|
|
|
|
|
transition: margin .3s, background .3s;
|
2022-05-27 01:33:50 +08:00
|
|
|
|
display: block;
|
2022-04-10 11:10:56 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body:before{
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
opacity: .1;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
display: block;
|
|
|
|
|
position: fixed;
|
|
|
|
|
background: center/cover no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar{
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
}
|
|
|
|
|
::-webkit-scrollbar-thumb{ background: #6f9fc7 }
|
|
|
|
|
::-webkit-scrollbar-thumb:hover{ background: #9fcff7 }
|
|
|
|
|
|
|
|
|
|
body::-webkit-scrollbar{
|
|
|
|
|
border-left: 1px solid #eee;
|
|
|
|
|
border-color: var(--light-border);
|
|
|
|
|
background: rgba(255, 255, 255, .6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a{
|
|
|
|
|
color: #6f9fc7;
|
|
|
|
|
color: var(--blue);
|
|
|
|
|
}
|
|
|
|
|
a:hover{
|
|
|
|
|
color: #9fcff7;
|
|
|
|
|
color: var(--light-blue);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1, h2, h3, h4, h5, h6{ font-weight: normal }
|
|
|
|
|
|
|
|
|
|
hr{ border-color: #eee }
|
|
|
|
|
|
|
|
|
|
em{ background: #6f9fc7 }
|
|
|
|
|
|
|
|
|
|
.btn{
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: #6f9fc7;
|
|
|
|
|
background: var(--blue);
|
|
|
|
|
}
|
|
|
|
|
.btn:hover{
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: #9fcff7;
|
|
|
|
|
background: var(--light-blue);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pre{
|
|
|
|
|
color: inherit;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border-color: var(--dark-border);
|
|
|
|
|
background: linear-gradient(rgba(18, 18, 18, .05) 50%, transparent 0);
|
|
|
|
|
background-size: auto 3em;
|
|
|
|
|
background-origin: content-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
blockquote{
|
|
|
|
|
background: #ecf1f5;
|
|
|
|
|
border-color: #6f9fc7;
|
|
|
|
|
border-radius: .25em;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input, textarea{
|
|
|
|
|
background: #fff;
|
|
|
|
|
background: var(--light-background);
|
|
|
|
|
}
|
|
|
|
|
input[type="text"], input[type="search"], input[type="email"], input[type="url"], textarea, code, hr, tr{
|
|
|
|
|
border-color: var(--dark-border);
|
|
|
|
|
}
|
|
|
|
|
input, textarea, pre, hr, blockquote{
|
|
|
|
|
transition: border .3s, background .3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 夜间风格 */
|
|
|
|
|
.dark-theme{
|
|
|
|
|
color: #aaa;
|
|
|
|
|
background: #333;
|
|
|
|
|
|
|
|
|
|
--blue: #6e8aad;
|
|
|
|
|
--light-blue: #6f9fc7;
|
|
|
|
|
|
|
|
|
|
--border: #555;
|
|
|
|
|
--dark-border: #666;
|
|
|
|
|
--light-border: #555;
|
|
|
|
|
|
|
|
|
|
--light-background: #444;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -- 额外适配 */
|
|
|
|
|
.dark-theme::-webkit-scrollbar{
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
background: rgba(255, 255, 255, .2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark-theme img{
|
|
|
|
|
filter: brightness(60%);
|
|
|
|
|
-webkit-filter: brightness(60%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark-theme blockquote{
|
|
|
|
|
color: #ddd;
|
|
|
|
|
border-color: #eb9c26;
|
|
|
|
|
background: rgba(255, 255, 255, .05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark-theme iframe, .dark-theme em{ opacity: .6 }
|
|
|
|
|
|
|
|
|
|
.dark-theme :not(pre) > code{
|
|
|
|
|
color: #ffa5a5;
|
|
|
|
|
background: rgba(255, 255, 255, .2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark-theme .head-search input{
|
|
|
|
|
background: #666;
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
.dark-theme .head-search input::-webkit-input-placeholder{ color: #bbb }
|
|
|
|
|
|
|
|
|
|
/* 1 - 页眉
|
|
|
|
|
-------------------------------- */
|
|
|
|
|
header{
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: fixed;
|
|
|
|
|
line-height: 1em;
|
|
|
|
|
background: #fff;
|
|
|
|
|
background: var(--light-background);
|
|
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
|
border-color: var(--border);
|
|
|
|
|
transition: border-color .3s, background .3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 头部标题 */
|
|
|
|
|
.head-title{
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
line-height: 3.2em;
|
|
|
|
|
position: absolute;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
@media screen and (min-width: 600px){
|
|
|
|
|
.head-title{ display: none }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 头部菜单 */
|
|
|
|
|
.head-menu{
|
|
|
|
|
display: flex;
|
|
|
|
|
list-style: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.head-menu a{
|
|
|
|
|
color: inherit;
|
|
|
|
|
display: block;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
position: relative;
|
|
|
|
|
line-height: 2.25em;
|
|
|
|
|
}
|
|
|
|
|
.head-menu a:hover{ color: #ffa628 }
|
|
|
|
|
|
2022-04-16 23:19:15 +08:00
|
|
|
|
/*.head-menu .has-child > a:after{
|
2022-04-10 11:10:56 +08:00
|
|
|
|
float: right;
|
2022-04-16 23:19:15 +08:00
|
|
|
|
/*content: "\f107";
|
|
|
|
|
margin-left: .5em;
|
|
|
|
|
/*font-family: "FontAwesome";
|
|
|
|
|
}*/
|
2022-04-10 11:10:56 +08:00
|
|
|
|
|
|
|
|
|
/* -- 手机版 */
|
|
|
|
|
@media screen and (max-width: 599px){
|
|
|
|
|
.head-menu{
|
|
|
|
|
max-height: 0;
|
|
|
|
|
padding: 0 1em;
|
|
|
|
|
display: block;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
border-right: .5em solid transparent;
|
|
|
|
|
transition: margin .3s, max-height .3s;
|
|
|
|
|
}
|
|
|
|
|
.head-menu.active{
|
|
|
|
|
margin: 1em 0;
|
|
|
|
|
max-height: 18rem;
|
|
|
|
|
}
|
|
|
|
|
.head-menu .sub-menu{ margin-left: 1.5em }
|
|
|
|
|
.head-menu .sub-menu a{
|
|
|
|
|
display: list-item;
|
|
|
|
|
list-style-type: circle;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.head-menu::-webkit-scrollbar{
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
}
|
|
|
|
|
.head-menu::-webkit-scrollbar-thumb{
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background: rgba(0, 0, 0, .1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -- 电脑版 */
|
|
|
|
|
@media screen and (min-width: 600px){
|
|
|
|
|
.head-menu{
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.head-menu > a, .has-child > a{
|
|
|
|
|
padding: .6em 0;
|
|
|
|
|
line-height: 2em;
|
|
|
|
|
margin-right: 1em;
|
|
|
|
|
}
|
|
|
|
|
.head-menu > a:last-child{ margin-right: 0 }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 子菜单 */
|
|
|
|
|
.head-menu .sub-menu a{
|
|
|
|
|
line-height: 2em;
|
|
|
|
|
margin-right: .05em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -- 电脑版 */
|
|
|
|
|
@media screen and (min-width: 600px){
|
|
|
|
|
.head-menu .has-child{
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.head-menu .has-child:hover > .sub-menu{
|
|
|
|
|
opacity: 1;
|
|
|
|
|
visibility: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.head-menu .sub-menu{
|
|
|
|
|
opacity: 0;
|
|
|
|
|
top: 3.2em;
|
|
|
|
|
left: -1em;
|
|
|
|
|
background: #fff;
|
|
|
|
|
background: var(--light-background);
|
|
|
|
|
padding: .5em 1em;
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
position: absolute;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-color: var(--border);
|
|
|
|
|
border-radius: 0 0 .25em .25em;
|
|
|
|
|
transition: background .15s, border-color .15s, opacity .15s, visibility .15s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.head-menu .sub-menu:before{
|
|
|
|
|
left: 2em;
|
|
|
|
|
top: -.5em;
|
|
|
|
|
width: 1em;
|
|
|
|
|
height: 1em;
|
|
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
background: #fff;
|
|
|
|
|
background: var(--light-background);
|
|
|
|
|
border: 1px solid;
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
|
border-color: #ddd #ddd transparent transparent;
|
|
|
|
|
border-color: var(--border) var(--border) transparent transparent;
|
|
|
|
|
transition: background .15s, border-color .15s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-btn{ display: none }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-btn, .light-btn, .search-btn{
|
|
|
|
|
z-index: 1;
|
|
|
|
|
float: left;
|
|
|
|
|
width: 2em;
|
|
|
|
|
margin: .6em;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
position: relative;
|
|
|
|
|
border-radius: .25em;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
transition: color 0.3s, background 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-btn{ margin-right: 0 }
|
|
|
|
|
.search-btn{ float: right }
|
|
|
|
|
|
|
|
|
|
.toggle-btn:hover, .light-btn:hover, .search-btn:hover{
|
|
|
|
|
background: rgba(0, 0, 0, .05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-btn:before, .light-btn:before, .search-btn:before{
|
|
|
|
|
display: block;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font: 1em/2em "FontAwesome";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-btn:before{ content: "\f0c9" }
|
|
|
|
|
.light-btn:before{ content: "\f0eb" }
|
|
|
|
|
.search-btn:before{ content: "\f002" }
|
|
|
|
|
|
|
|
|
|
.head-search{
|
|
|
|
|
z-index: 1;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
float: right;
|
|
|
|
|
margin: .6em 0;
|
|
|
|
|
line-height: 1.5em;
|
|
|
|
|
position: relative;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
transition: opacity 0.3s;
|
|
|
|
|
}
|
|
|
|
|
.head-search.active{
|
|
|
|
|
opacity: 1;
|
|
|
|
|
pointer-events: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.head-search input{
|
|
|
|
|
width: 10em;
|
|
|
|
|
height: 2em;
|
|
|
|
|
padding: 0 .75em;
|
|
|
|
|
min-height: auto;
|
|
|
|
|
border-radius: 3em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 600px){
|
|
|
|
|
.head-search{
|
|
|
|
|
float: none;
|
|
|
|
|
margin-left: 6.5em;
|
|
|
|
|
margin-right: 3.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.head-search input{ width: 100% }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 2 - 正文
|
|
|
|
|
-------------------------------- */
|
|
|
|
|
main{
|
|
|
|
|
padding: 3.5em 0;
|
|
|
|
|
margin-top: 3.2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main img {
|
|
|
|
|
height: auto;
|
|
|
|
|
transition: filter .3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 首页大标题 */
|
|
|
|
|
.home-title{
|
|
|
|
|
text-align: center;
|
2022-05-27 01:33:50 +08:00
|
|
|
|
margin-bottom: 1em;
|
2022-04-10 11:10:56 +08:00
|
|
|
|
animation: fade-in-bottom .3s both; -webkit-animation: fade-in-bottom .3s both;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.home-title h1{
|
|
|
|
|
color: #6e8aad;
|
|
|
|
|
color: var(--blue);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.home-title span{
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
font-style: oblique;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 社交链接 */
|
|
|
|
|
.home-social{
|
|
|
|
|
cursor: default;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.home-social a{
|
|
|
|
|
color: inherit;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.home-social i{ padding: .5em }
|
|
|
|
|
|
|
|
|
|
/* - 文章简要 */
|
|
|
|
|
.post-item{
|
2022-05-27 01:33:50 +08:00
|
|
|
|
margin-bottom: 2em;
|
2022-04-10 11:10:56 +08:00
|
|
|
|
word-break: break-all;
|
2022-04-14 21:48:19 +08:00
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
2022-04-18 22:06:41 +08:00
|
|
|
|
background-color:rgb(255, 255, 255);
|
2022-04-14 21:48:19 +08:00
|
|
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
|
2022-04-18 22:06:41 +08:00
|
|
|
|
border-radius:20px;
|
|
|
|
|
padding:10px;
|
2022-04-10 11:10:56 +08:00
|
|
|
|
}
|
|
|
|
|
.post-item:last-child{ margin-bottom: 0 }
|
|
|
|
|
|
|
|
|
|
/* -- 动画 */
|
|
|
|
|
.post-item:nth-child(1){ animation: fade-in-top .3s .2s backwards; -webkit-animation: fade-in-top .3s .2s backwards; }
|
|
|
|
|
.post-item:nth-child(2){ animation: fade-in-top .3s .3s backwards; -webkit-animation: fade-in-top .3s .3s backwards; }
|
|
|
|
|
.post-item:nth-child(3){ animation: fade-in-top .3s .4s backwards; -webkit-animation: fade-in-top .3s .4s backwards; }
|
|
|
|
|
.post-item:nth-child(4){ animation: fade-in-top .3s .5s backwards; -webkit-animation: fade-in-top .3s .5s backwards; }
|
|
|
|
|
.post-item:nth-child(5){ animation: fade-in-top .3s .6s backwards; -webkit-animation: fade-in-top .3s .6s backwards; }
|
|
|
|
|
.post-item:nth-child(6){ animation: fade-in-top .3s .7s backwards; -webkit-animation: fade-in-top .3s .7s backwards; }
|
|
|
|
|
.post-item:nth-child(7){ animation: fade-in-top .3s .8s backwards; -webkit-animation: fade-in-top .3s .8s backwards; }
|
|
|
|
|
.post-item:nth-child(8){ animation: fade-in-top .3s .9s backwards; -webkit-animation: fade-in-top .3s .9s backwards; }
|
|
|
|
|
.post-item:nth-child(9){ animation: fade-in-top .3s 1s backwards; -webkit-animation: fade-in-top .3s 1s backwards; }
|
|
|
|
|
.post-item:nth-child(10){ animation: fade-in-top .3s 1.1s backwards; -webkit-animation: fade-in-top .3s 1.1s backwards; }
|
|
|
|
|
|
|
|
|
|
.post-item h2{ margin-bottom: .5em }
|
|
|
|
|
|
|
|
|
|
.post-item h2 a{
|
|
|
|
|
line-height: 2em;
|
|
|
|
|
padding-bottom: .3rem;
|
|
|
|
|
border-bottom: 2px solid #eee;
|
|
|
|
|
border-color: var(--light-border);
|
|
|
|
|
transition: color .3s, border .3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-item .edit-link{
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
line-height: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 文章属性 */
|
|
|
|
|
.post-meta{
|
|
|
|
|
overflow: auto;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
.post-meta::-webkit-scrollbar{ height: 0 }
|
|
|
|
|
|
|
|
|
|
.post-meta a{ color: inherit }
|
|
|
|
|
|
|
|
|
|
.post-meta span, .post-meta time{
|
|
|
|
|
margin-right: .8em;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-meta span:last-child{ margin-right: 0 }
|
|
|
|
|
|
|
|
|
|
.post-meta span:before, .post-meta time:before{
|
|
|
|
|
font-size: inherit;
|
|
|
|
|
margin-right: .4em;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-family: "FontAwesome";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-meta .date:before{ content: "\f017" }
|
|
|
|
|
.post-meta .category:before{ content: "\f07b" }
|
|
|
|
|
.post-meta .tags:before{content: "\f02c";}
|
|
|
|
|
.post-meta .visits:before{content: "\f06e";}
|
|
|
|
|
.post-meta .user:before{ content: "\f007" }
|
|
|
|
|
.post-meta .comments:before{ content: "\f086" }
|
|
|
|
|
.post-meta .view:before{ content: "\f080" }
|
|
|
|
|
|
|
|
|
|
/* - 换页 */
|
|
|
|
|
.page-navigator{
|
|
|
|
|
cursor: default;
|
|
|
|
|
margin-top: 3em;
|
|
|
|
|
font-size: 1.25em;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
animation: fade-in-top .3s .7s both; -webkit-animation: fade-in-top .3s .7s both;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-navigator a{ padding: 0 .3em }
|
|
|
|
|
.page-navigator .current a{ color: inherit }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* - 阅读页标题 */
|
|
|
|
|
.post-title, .page-title{
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
padding-bottom: 1em;
|
|
|
|
|
transition: border 0.3s;
|
2022-05-27 01:33:50 +08:00
|
|
|
|
/*border-bottom: 1px solid #ddd;*/
|
|
|
|
|
border-bottom: 1px solid #6e8aad;
|
2022-04-10 11:10:56 +08:00
|
|
|
|
border-color: var(--border);
|
|
|
|
|
animation: fade-in-bottom .3s both; -webkit-animation: fade-in-bottom .3s both;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-title h2, .page-title h2{
|
|
|
|
|
color: #6e8aad;
|
|
|
|
|
margin-right: .25rem;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-title h2{ margin-bottom: 0 }
|
|
|
|
|
|
|
|
|
|
/* - 编辑文章 */
|
|
|
|
|
.post-item .edit-link, .page-title .edit-link, .post-title .edit-link{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 阅读页正文 */
|
|
|
|
|
article a{ border-bottom: 1px dashed currentColor }
|
|
|
|
|
article img{
|
|
|
|
|
border-radius: .25em;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-content, .page-content{ animation: fade-in-top .3s .2s backwards; -webkit-animation: fade-in-top .3s .2s backwards; }
|
2022-05-27 15:30:43 +08:00
|
|
|
|
.post-content, .page-content, .post-near, .post-footer, .post-author{ margin-bottom: 2em }
|
2022-04-10 11:10:56 +08:00
|
|
|
|
|
2022-05-27 01:33:50 +08:00
|
|
|
|
article h1, article h2, article h3,article h4,article h5,article h6{
|
|
|
|
|
margin-top: 0rem;
|
2022-04-10 11:10:56 +08:00
|
|
|
|
scroll-margin-top: 5em;
|
2022-05-27 01:33:50 +08:00
|
|
|
|
margin-bottom: 0em;
|
|
|
|
|
}
|
|
|
|
|
article p{
|
|
|
|
|
margin-bottom: 0.6em;
|
2022-04-10 11:10:56 +08:00
|
|
|
|
}
|
|
|
|
|
|
2022-05-27 01:33:50 +08:00
|
|
|
|
article h1{ font-size: 1.2em }
|
2022-04-10 11:10:56 +08:00
|
|
|
|
article h2{ font-size: 1.15em }
|
|
|
|
|
article h3{ font-size: 1.10em }
|
|
|
|
|
article h4{ font-size: 1.05em }
|
|
|
|
|
article h5{ font-size: 1em }
|
|
|
|
|
article h6{ font-size: .9em }
|
|
|
|
|
|
|
|
|
|
article h1:before,
|
|
|
|
|
article h2:before,
|
2022-05-27 01:33:50 +08:00
|
|
|
|
article h3:before,
|
|
|
|
|
article h4:before,
|
|
|
|
|
article h5:before,
|
|
|
|
|
article h6:before{
|
2022-04-10 11:10:56 +08:00
|
|
|
|
content: "#";
|
|
|
|
|
color: #6f9fc7;
|
|
|
|
|
color: var(--blue);
|
|
|
|
|
margin-right: .5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
article h1:before{ font-weight: bold }
|
|
|
|
|
|
|
|
|
|
article ul p:first-child{
|
|
|
|
|
margin-top: .5em;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 阅读页其他文章 */
|
|
|
|
|
.post-near{
|
|
|
|
|
animation: fade-in-top .3s .3s backwards; -webkit-animation: fade-in-top .3s .3s backwards;
|
|
|
|
|
}
|
2022-05-27 15:30:43 +08:00
|
|
|
|
.post-footer{
|
|
|
|
|
overflow: auto;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.post-footer::-webkit-scrollbar{ height: 0 }
|
|
|
|
|
.post-footer a{ margin: 0 .75em .5em 0;}
|
|
|
|
|
.post-footer span{
|
|
|
|
|
/*transition: border 0.3s;*/
|
|
|
|
|
transition: all 0.3s;
|
2022-04-10 11:10:56 +08:00
|
|
|
|
}
|
2022-05-27 15:30:43 +08:00
|
|
|
|
/* - 阅读页文章标签 */
|
2022-04-10 11:10:56 +08:00
|
|
|
|
.post-tags:before{
|
|
|
|
|
content: "\f02c";
|
2022-05-27 15:30:43 +08:00
|
|
|
|
/*margin-right: .75em;*/
|
2022-04-10 11:10:56 +08:00
|
|
|
|
font-family: "FontAwesome";
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-27 15:30:43 +08:00
|
|
|
|
.post-category:before{
|
|
|
|
|
content: "\f07b";
|
|
|
|
|
font-family: "FontAwesome";
|
|
|
|
|
}
|
2022-04-10 11:10:56 +08:00
|
|
|
|
/* - 阅读页作者信息 */
|
|
|
|
|
.post-author{
|
|
|
|
|
display: table;
|
|
|
|
|
padding: 1.5em 0;
|
|
|
|
|
position: relative;
|
|
|
|
|
border-top: 1px solid #ddd;
|
|
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
|
border-color: var(--border);
|
|
|
|
|
transition: border .3s, filter .3s;
|
|
|
|
|
animation: fade-in-top .3s .4s backwards; -webkit-animation: fade-in-top .3s .4s backwards;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-author .author-avatar{
|
|
|
|
|
width: 5em;
|
|
|
|
|
display: table-cell;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-author img{ border-radius: 66% }
|
|
|
|
|
|
|
|
|
|
.post-author .author-info{ margin-left: 1.5em }
|
|
|
|
|
|
|
|
|
|
.post-author h4{
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-bottom: .5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 800px){
|
|
|
|
|
.post-author{
|
|
|
|
|
margin-top: 6em;
|
|
|
|
|
padding-top: 3em;
|
|
|
|
|
}
|
|
|
|
|
.post-author .author-avatar{
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: -3em;
|
|
|
|
|
margin: auto;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-author .author-info{ margin-left: 0 }
|
|
|
|
|
|
|
|
|
|
.post-author h4{ text-align: center }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 阅读页评论 */
|
|
|
|
|
.post-comments{
|
|
|
|
|
scroll-margin-top: 5em;
|
|
|
|
|
animation: fade-in-top .3s .5s backwards; -webkit-animation: fade-in-top .3s .5s backwards;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-comments input, .post-comments textarea{
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
-moz-appearance: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -- 评论结构 */
|
|
|
|
|
.post-comments{ word-break: break-all }
|
|
|
|
|
|
|
|
|
|
.comment-form{ margin-bottom: 2em }
|
|
|
|
|
|
|
|
|
|
.comment-list .comment-single{
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-left: 3.75em;
|
|
|
|
|
margin-bottom: 1.5em;
|
|
|
|
|
scroll-margin-top: 5em;
|
|
|
|
|
transition: transform .3s;
|
|
|
|
|
}
|
|
|
|
|
.comment-list .comment-single:after{
|
|
|
|
|
content: "";
|
|
|
|
|
clear: both;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.comment-list .comment-single.active{ transform: scale(1.05) }
|
|
|
|
|
|
|
|
|
|
.comment-list .comment-child{ margin-left: 2em }
|
|
|
|
|
|
|
|
|
|
/* --- 评论头像 */
|
|
|
|
|
.comment-list .avatar{
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
min-width: 45px;
|
|
|
|
|
max-width: 45px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
transition: filter .3s, transform .3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.comment-list .comment-single:hover .avatar{
|
|
|
|
|
transform: rotate(1turn);
|
|
|
|
|
-webkit-transform: rotate(1turn);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- 评论信息 */
|
|
|
|
|
.comment-list .comment-meta{
|
|
|
|
|
margin-bottom: .25em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.comment-list .comment-time:before{
|
|
|
|
|
content: "\f017";
|
|
|
|
|
margin-right: .4em;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-family: "FontAwesome";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.comment-list .comment-author,
|
|
|
|
|
.comment-list .comment-time{
|
|
|
|
|
margin-right: .8em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- 评论内容 */
|
|
|
|
|
.comment-single .comment-reply{
|
|
|
|
|
opacity: 0;
|
|
|
|
|
float: right;
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
transition: opacity .3s;
|
|
|
|
|
}
|
|
|
|
|
.comment-single:hover .comment-reply{ opacity: 1 }
|
|
|
|
|
|
|
|
|
|
.comment-reply a, .cancel-comment-reply a{ color: #aaa }
|
|
|
|
|
.comment-reply a:hover, .cancel-comment-reply a:hover{ color: #555 }
|
|
|
|
|
|
|
|
|
|
.cancel-comment-reply{
|
|
|
|
|
display: block;
|
|
|
|
|
margin: .5em 0;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 600px){
|
|
|
|
|
.comment-form button{ width: 100% }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -- 文章目录 */
|
|
|
|
|
.article-list{
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
width: 15em;
|
|
|
|
|
padding: 1em;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
position: fixed;
|
|
|
|
|
transform: translateY(0%);
|
|
|
|
|
background: rgba(255, 255, 255, .5);
|
|
|
|
|
transition: transform .3s, border .3s, opacity .3s, background .3s;
|
|
|
|
|
}
|
|
|
|
|
.article-list.active{
|
|
|
|
|
opacity: 1;
|
|
|
|
|
background: #fff;
|
|
|
|
|
background: var(--light-background);
|
|
|
|
|
transform: translateY(0%);
|
|
|
|
|
}
|
|
|
|
|
.article-list::-webkit-scrollbar{ width: 0; height: 0 }
|
|
|
|
|
|
|
|
|
|
.article-list h4{ text-align: center }
|
|
|
|
|
|
|
|
|
|
.article-list .title{
|
|
|
|
|
padding: .25em 1em;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
transition: border-color .3s;
|
|
|
|
|
border-top: 1px solid #ccc;
|
|
|
|
|
border-bottom: 1px solid #ccc;
|
|
|
|
|
border-color: var(--dark-border);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.article-list a{
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: .5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.article-list .item-2:before,
|
|
|
|
|
.article-list .item-3:before,
|
|
|
|
|
.article-list .item-4:before,
|
|
|
|
|
.article-list .item-5:before,
|
|
|
|
|
.article-list .item-6:before{
|
|
|
|
|
margin-right: .5em;
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-16 23:19:15 +08:00
|
|
|
|
.article-list .item-2:before{ content: " " }
|
|
|
|
|
.article-list .item-3:before{ content: " " }
|
|
|
|
|
.article-list .item-4:before{ content: " " }
|
|
|
|
|
.article-list .item-5:before{ content: " " }
|
|
|
|
|
.article-list .item-6:before{ content: " " }
|
2022-04-10 11:10:56 +08:00
|
|
|
|
|
|
|
|
|
@media screen and (min-width: 800px){
|
|
|
|
|
body.has-trees{ margin-right: 15em }
|
|
|
|
|
|
|
|
|
|
.dark-theme .article-list{ background: rgba(0, 0, 0, .1) }
|
|
|
|
|
|
|
|
|
|
.article-list{
|
|
|
|
|
top: 3.2em;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
visibility: visible;
|
|
|
|
|
border-left: 1px solid #ddd;
|
|
|
|
|
border-color: var(--border);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media screen and (max-width: 799px){
|
|
|
|
|
.article-list{
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: 40%;
|
|
|
|
|
max-height: 80%;
|
|
|
|
|
transform: translateY(100%);
|
|
|
|
|
border-top: 1px solid #ddd;
|
|
|
|
|
border-color: var(--border);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* - 错误页面 */
|
|
|
|
|
.error-page{
|
|
|
|
|
text-align: center;
|
|
|
|
|
animation: fade-in-bottom .3s backwards; -webkit-animation: fade-in-bottom .3s backwards;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.error-page h1{
|
|
|
|
|
font-size: 5em;
|
|
|
|
|
line-height: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.error-page img{ width: 25em }
|
|
|
|
|
|
|
|
|
|
/* 3 - 页尾
|
|
|
|
|
-------------------------------- */
|
|
|
|
|
footer{
|
|
|
|
|
border-top: 1px solid #eee;
|
|
|
|
|
border-color: var(--light-border);
|
|
|
|
|
transition: border .3s, background .3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer .buttons{
|
|
|
|
|
right: 1em;
|
|
|
|
|
bottom: 5em;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
position: fixed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer .to-top, footer .toggle-list{
|
|
|
|
|
padding: .5em;
|
|
|
|
|
display: block;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background: #fff;
|
|
|
|
|
background: var(--light-background);
|
|
|
|
|
border-radius: .25em;
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
border-color: var(--border);
|
|
|
|
|
transform: translateX(5em);
|
|
|
|
|
transition: color .3s, border .3s, background .3s, transform .3s;
|
|
|
|
|
}
|
|
|
|
|
footer .to-top.active{ transform: translateX(0) }
|
|
|
|
|
footer .to-top:before, footer .toggle-list:before{
|
|
|
|
|
width: 1.5em;
|
|
|
|
|
display: block;
|
|
|
|
|
content: "\f062";
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-family: "FontAwesome";
|
|
|
|
|
}
|
|
|
|
|
footer .toggle-list{
|
|
|
|
|
display: none;
|
|
|
|
|
margin-top: .5em;
|
|
|
|
|
}
|
|
|
|
|
footer .toggle-list:before{ content: '\f00b' }
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 800px){
|
|
|
|
|
footer .toggle-list{
|
|
|
|
|
display: block;
|
|
|
|
|
transform: translateX(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer .widget{ padding: 2em 0 }
|
|
|
|
|
|
|
|
|
|
footer .title-comments:after,
|
|
|
|
|
footer .title-recent:after,
|
|
|
|
|
footer .title-date:after{
|
2022-04-14 21:48:19 +08:00
|
|
|
|
float:left;
|
2022-04-10 11:10:56 +08:00
|
|
|
|
margin-right: .75em;
|
|
|
|
|
font-family: "FontAwesome";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer .title-comments:after{ content: "\f0e6" }
|
|
|
|
|
footer .title-recent:after{ content: "\f040" }
|
|
|
|
|
footer .title-date:after{ content: "\f017" }
|
|
|
|
|
|
|
|
|
|
footer .widget ul{
|
|
|
|
|
margin: 0;
|
|
|
|
|
list-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer .widget ul li{
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
margin-bottom: .5em;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
footer .widget ul li:before{
|
|
|
|
|
opacity: .3;
|
|
|
|
|
content: "\f105";
|
|
|
|
|
margin-right: .75em;
|
|
|
|
|
font-family: "FontAwesome";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer .sub-footer{
|
|
|
|
|
padding: 1em 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer .sub-footer p{ font-size: .875em }
|
|
|
|
|
|
|
|
|
|
/* 4 - 附加
|
|
|
|
|
-------------------------------- */
|
|
|
|
|
|
|
|
|
|
/* - 打印样式 */
|
|
|
|
|
@media print {
|
|
|
|
|
body{
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body:before, header, .post-comments, .post-near, footer{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main{
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
padding: 1.25em 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post-author{
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-16 23:19:15 +08:00
|
|
|
|
/* - Prism 代码块样式
|
2022-04-10 11:10:56 +08:00
|
|
|
|
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata{ color: #7D8B99 }
|
|
|
|
|
.token.punctuation{ color: #5F6364 }
|
|
|
|
|
.token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted{ color: #c92c2c }
|
|
|
|
|
.token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted{ color: #2f9c0a }
|
|
|
|
|
|
|
|
|
|
.token.operator, .token.entity, .token.url, .token.variable{ color: #a67f59 }
|
|
|
|
|
.token.atrule, .token.attr-value, .token.keyword, .token.class-name{ color: #1990b8 }
|
|
|
|
|
.token.regex, .token.important{ color: #e90 }
|
|
|
|
|
|
|
|
|
|
.language-css .token.string, .style .token.string {
|
|
|
|
|
color: #a67f59;
|
|
|
|
|
background: rgba(255, 255, 255, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.token.bold { font-weight: bold }
|
|
|
|
|
.token.italic { font-style: italic }
|
|
|
|
|
.token.entity { cursor: help }
|
|
|
|
|
.token.important { font-weight: normal }
|
|
|
|
|
|
2022-04-16 23:19:15 +08:00
|
|
|
|
.namespace { opacity: .7 }*/
|
2022-05-28 00:36:30 +08:00
|
|
|
|
/*
|
|
|
|
|
july
|
|
|
|
|
*/
|
|
|
|
|
.github-badge {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
text-shadow: none;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
line-height: 15px;
|
|
|
|
|
background-color: #abbac3;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
}
|
|
|
|
|
.github-badge .badge-subject {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background-color: #4d4d4d;
|
|
|
|
|
padding: 4px 4px 4px 6px;
|
|
|
|
|
border-top-left-radius: 4px;
|
|
|
|
|
border-bottom-left-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
.github-badge .badge-value {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
padding: 4px 6px 4px 4px;
|
|
|
|
|
border-top-right-radius: 4px;
|
|
|
|
|
border-bottom-right-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
.github-badge .bg-blue {
|
|
|
|
|
background-color: #007ec6!important;
|
|
|
|
|
}
|
|
|
|
|
.github-badge .bg-red {
|
|
|
|
|
background-color: #e05d44!important;
|
|
|
|
|
}
|
|
|
|
|
.github-badge .bg-brightgreen {
|
|
|
|
|
background-color: #4dc820!important;
|
|
|
|
|
}
|
|
|
|
|
.github-badge .bg-orange {
|
|
|
|
|
background-color: orange!important;
|
|
|
|
|
}
|
|
|
|
|
.github-badge .bg-blueviolet {
|
|
|
|
|
background-color: #8833d7!important;
|
|
|
|
|
}
|