991 lines
22 KiB
CSS
991 lines
22 KiB
CSS
@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;
|
||
--dark-blue: #6e8aad;
|
||
--board-back: #fff;
|
||
--board-border: #ccc;
|
||
}
|
||
|
||
body{
|
||
color: rgb(46, 44, 44);
|
||
font-weight: 300;
|
||
background: #fafafa;
|
||
transition: margin .3s, background .3s;
|
||
display: block;
|
||
}
|
||
|
||
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 }
|
||
|
||
/*.head-menu .has-child > a:after{
|
||
float: right;
|
||
/*content: "\f107";
|
||
margin-left: .5em;
|
||
/*font-family: "FontAwesome";
|
||
}*/
|
||
|
||
/* -- 手机版 */
|
||
@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;
|
||
margin-bottom: 1em;
|
||
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{
|
||
margin-bottom: 2em;
|
||
word-break: break-all;
|
||
width:100%;
|
||
height:100%;
|
||
background-color:rgb(255, 255, 255);
|
||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius:20px;
|
||
padding:10px;
|
||
}
|
||
.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;
|
||
/*border-bottom: 1px solid #ddd;*/
|
||
border-bottom: 1px solid #6e8aad;
|
||
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; }
|
||
.post-content, .page-content, .post-near, .post-footer, .post-author{ margin-bottom: 2em }
|
||
|
||
article h1, article h2, article h3,article h4,article h5,article h6{
|
||
margin-top: 0rem;
|
||
scroll-margin-top: 5em;
|
||
margin-bottom: 0em;
|
||
}
|
||
article p{
|
||
margin-bottom: 0.6em;
|
||
}
|
||
|
||
article h1{ font-size: 1.2em }
|
||
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,
|
||
article h3:before,
|
||
article h4:before,
|
||
article h5:before,
|
||
article h6:before{
|
||
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;
|
||
}
|
||
.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;
|
||
}
|
||
/* - 阅读页文章标签 */
|
||
.post-tags:before{
|
||
content: "\f02c";
|
||
/*margin-right: .75em;*/
|
||
font-family: "FontAwesome";
|
||
}
|
||
|
||
.post-category:before{
|
||
content: "\f07b";
|
||
font-family: "FontAwesome";
|
||
}
|
||
/* - 阅读页作者信息 */
|
||
.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;
|
||
}
|
||
|
||
.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: " " }
|
||
|
||
@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{
|
||
float:left;
|
||
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;
|
||
}
|
||
}
|
||
|
||
/* - Prism 代码块样式
|
||
.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 }
|
||
|
||
.namespace { opacity: .7 }*/
|
||
/*
|
||
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;
|
||
}
|