mirror of https://github.com/IoTcat/ushio-img.git
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.
843 lines
18 KiB
843 lines
18 KiB
4 years ago
|
@charset "UTF-8";
|
||
|
|
||
|
/* ----
|
||
|
|
||
|
# Single Theme
|
||
|
# By: Dreamer-Paul
|
||
|
# Last Update: 2019.3.2
|
||
|
|
||
|
一个简洁大气,含夜间模式的 Typecho 博客模板。
|
||
|
|
||
|
本代码为奇趣保罗原创,并遵守 MIT 开源协议。欢迎访问我的博客:https://paugram.com
|
||
|
|
||
|
---- */
|
||
|
|
||
|
/* 0 - 全局
|
||
|
-------------------------------- */
|
||
|
body{
|
||
|
color: #555;
|
||
|
background: #fafafa;
|
||
|
font-weight: lighter;
|
||
|
transition: margin .3s, background .3s;
|
||
|
}
|
||
|
|
||
|
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;
|
||
|
background: rgba(255, 255, 255, .6);
|
||
|
}
|
||
|
|
||
|
a{ color: #6f9fc7 }
|
||
|
a:hover{ color: #9fcff7 }
|
||
|
|
||
|
h1, h2, h3, h4, h5, h6{ font-weight: normal }
|
||
|
|
||
|
hr{ border-color: #eee }
|
||
|
|
||
|
em{ background: #6f9fc7 }
|
||
|
|
||
|
.btn{
|
||
|
color: #fff;
|
||
|
background: #6f9fc7;
|
||
|
}
|
||
|
.btn:hover{
|
||
|
color: #fff;
|
||
|
background: #9fcff7;
|
||
|
}
|
||
|
|
||
|
pre code{
|
||
|
color: inherit;
|
||
|
border: 1px solid #ddd;
|
||
|
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;
|
||
|
}
|
||
|
|
||
|
input, textarea{ background: #fff }
|
||
|
input, textarea, code, hr, blockquote{
|
||
|
transition: border .3s, background .3s;
|
||
|
}
|
||
|
|
||
|
.auto-border{
|
||
|
border-color: #ccc !important;
|
||
|
transition: color .3s, border-color .3s;
|
||
|
}
|
||
|
|
||
|
body.neon .auto-border{
|
||
|
color: #aaa;
|
||
|
border-color: #555 !important;
|
||
|
}
|
||
|
|
||
|
/* - 夜间风格 */
|
||
|
body.neon{
|
||
|
color: #999;
|
||
|
background: #333;
|
||
|
}
|
||
|
|
||
|
body.neon::-webkit-scrollbar{
|
||
|
border-color: transparent;
|
||
|
background: rgba(255, 255, 255, .2);
|
||
|
}
|
||
|
|
||
|
body.neon a{ color: #c9861d }
|
||
|
body.neon a:hover{ color: #eb9c26 }
|
||
|
|
||
|
body.neon img{
|
||
|
filter: brightness(60%);
|
||
|
-webkit-filter: brightness(60%);
|
||
|
}
|
||
|
|
||
|
body.neon blockquote{
|
||
|
color: #c9861d;
|
||
|
border-color: #eb9c26;
|
||
|
background: rgba(255, 255, 255, .05);
|
||
|
}
|
||
|
|
||
|
/* -- 边框 */
|
||
|
body.neon header, body.neon .head-menu .sub-menu, body.neon main .article-list,
|
||
|
body.neon .post-item h2 a, body.neon .post-title, body.neon .page-title, body.neon .post-author,
|
||
|
body.neon tr, body.neon hr, body.neon pre code, body.neon input, body.neon textarea, body.neon .btn, body.neon .toggle-list,
|
||
|
body.neon footer, body.neon .to-top{ border-color: #555 }
|
||
|
|
||
|
/* -- 透明 */
|
||
|
body.neon iframe, body.neon em{ opacity: .6 }
|
||
|
|
||
|
/* -- 颜色 */
|
||
|
body.neon .btn{ color: inherit }
|
||
|
|
||
|
/* -- 背景 */
|
||
|
body.neon input, body.neon textarea, body.neon .btn, body.neon .to-top, body.neon .toggle-list{ background: #444 }
|
||
|
|
||
|
/* -- 头部 */
|
||
|
body.neon header, body.neon .head-menu .sub-menu, body.neon .head-menu .sub-menu:before{
|
||
|
color: #aaa;
|
||
|
background: #444;
|
||
|
}
|
||
|
body.neon .head-menu .sub-menu:before{
|
||
|
border-color: #555 #555 transparent transparent;
|
||
|
}
|
||
|
|
||
|
body.neon :not(pre) > code{
|
||
|
color: #ffa5a5;
|
||
|
background: rgba(255, 255, 255, .2);
|
||
|
}
|
||
|
|
||
|
body.neon .head-search input{
|
||
|
background: #666;
|
||
|
border-color: transparent;
|
||
|
}
|
||
|
body.neon .head-search input::-webkit-input-placeholder{ color: #bbb }
|
||
|
|
||
|
body.neon header a{ color: #aaa }
|
||
|
body.neon header a:hover{ color: #ddd }
|
||
|
|
||
|
@media screen and (max-width: 600px){
|
||
|
body.neon .head-menu .sub-menu{ background: none }
|
||
|
}
|
||
|
|
||
|
/* 1 - 页眉
|
||
|
-------------------------------- */
|
||
|
header{
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
z-index: 2;
|
||
|
color: #666;
|
||
|
position: fixed;
|
||
|
line-height: 1em;
|
||
|
background: #fff;
|
||
|
border-bottom: 1px solid #ddd;
|
||
|
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: .3em;
|
||
|
font-family: "FontAwesome";
|
||
|
}
|
||
|
|
||
|
/* -- 手机版 */
|
||
|
@media screen and (max-width: 600px){
|
||
|
.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: 599px){
|
||
|
.head-menu{
|
||
|
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: 599px){
|
||
|
.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;
|
||
|
padding: .5em 1em;
|
||
|
visibility: hidden;
|
||
|
position: absolute;
|
||
|
white-space: nowrap;
|
||
|
border: 1px solid #ddd;
|
||
|
border-radius: 0 0 .25em .25em;
|
||
|
transition: opacity .15s, visibility .15s;
|
||
|
}
|
||
|
|
||
|
.head-menu .sub-menu:before{
|
||
|
left: 2em;
|
||
|
top: -.5em;
|
||
|
width: 1em;
|
||
|
height: 1em;
|
||
|
content: '';
|
||
|
display: block;
|
||
|
background: #fff;
|
||
|
border: 1px solid;
|
||
|
position: absolute;
|
||
|
transform: rotate(-45deg);
|
||
|
border-color: #ccc #ccc transparent transparent;
|
||
|
}
|
||
|
|
||
|
.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: 4px;
|
||
|
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{
|
||
|
height: 2em;
|
||
|
width: 10em;
|
||
|
border-radius: 50px;
|
||
|
padding: .25em .75em;
|
||
|
}
|
||
|
|
||
|
@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: 3em;
|
||
|
animation: fade-in-bottom .3s both; -webkit-animation: fade-in-bottom .3s both;
|
||
|
}
|
||
|
|
||
|
.home-title h1{ color: #6e8aad }
|
||
|
|
||
|
.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: 3em;
|
||
|
word-break: break-all;
|
||
|
}
|
||
|
.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 h2{ margin-bottom: .5em }
|
||
|
|
||
|
.post-item h2 a{
|
||
|
line-height: 2em;
|
||
|
padding-bottom: .3rem;
|
||
|
border-bottom: 2px solid #eee;
|
||
|
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 .comments:before{ content: "\f086" }
|
||
|
.post-meta .view:before{ content: "\f080" }
|
||
|
|
||
|
/* - 换页 */
|
||
|
.page-navigator{
|
||
|
margin-left: 0;
|
||
|
cursor: default;
|
||
|
margin-top: 60px;
|
||
|
font-size: 1.25em;
|
||
|
text-align: center;
|
||
|
animation: fade-in-top .3s .7s both; -webkit-animation: fade-in-top .3s .7s both;
|
||
|
}
|
||
|
|
||
|
.page-navigator li{
|
||
|
font-weight: normal;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.page-navigator li.current a{ color: inherit }
|
||
|
.page-navigator li a{
|
||
|
display: block;
|
||
|
padding: .25em .3em;
|
||
|
}
|
||
|
|
||
|
/* - 阅读页标题 */
|
||
|
.post-title, .page-title{
|
||
|
margin-bottom: 1em;
|
||
|
padding-bottom: 1em;
|
||
|
transition: border 0.3s;
|
||
|
border-bottom: 1px solid #ddd;
|
||
|
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 }
|
||
|
|
||
|
.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-author{ margin-bottom: 3em }
|
||
|
|
||
|
article h1, article h2, article h3{ margin-top: 3rem }
|
||
|
|
||
|
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{
|
||
|
content: "#";
|
||
|
color: #6f9fc7;
|
||
|
margin-right: .5em;
|
||
|
}
|
||
|
|
||
|
article h1:before{ font-weight: bold }
|
||
|
|
||
|
.post-near{ animation: fade-in-top .3s .3s backwards; -webkit-animation: fade-in-top .3s .3s backwards; }
|
||
|
|
||
|
/* - 阅读页作者信息 */
|
||
|
.post-author{
|
||
|
display: table;
|
||
|
padding: 1.5em 0;
|
||
|
border-top: 1px solid #ddd;
|
||
|
border-bottom: 1px solid #ddd;
|
||
|
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;
|
||
|
}
|
||
|
|
||
|
/* - 阅读页评论 */
|
||
|
.post-comments{ 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;
|
||
|
transform-origin: left;
|
||
|
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: transform .3s ease-in-out;
|
||
|
}
|
||
|
|
||
|
.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;
|
||
|
transform: translateY(0%);
|
||
|
}
|
||
|
.article-list::-webkit-scrollbar{ width: 0; height: 0 }
|
||
|
|
||
|
.article-list h4{ text-align: center }
|
||
|
|
||
|
.article-list .title{
|
||
|
color: #555;
|
||
|
padding: .25em 1em;
|
||
|
border-top: 1px solid;
|
||
|
border-bottom: 1px solid;
|
||
|
display: inline-block;
|
||
|
}
|
||
|
|
||
|
.article-list a{
|
||
|
display: block;
|
||
|
margin-bottom: .5em;
|
||
|
}
|
||
|
|
||
|
.article-list a.item-2:before,
|
||
|
.article-list a.item-3:before,
|
||
|
.article-list a.item-4:before,
|
||
|
.article-list a.item-5:before,
|
||
|
.article-list a.item-6:before{
|
||
|
margin-right: .5em;
|
||
|
}
|
||
|
|
||
|
.article-list a.item-2:before{ content: "-" }
|
||
|
.article-list a.item-3:before{ content: "--" }
|
||
|
.article-list a.item-4:before{ content: "---" }
|
||
|
.article-list a.item-5:before{ content: "----" }
|
||
|
.article-list a.item-6:before{ content: "-----" }
|
||
|
|
||
|
@media screen and (min-width: 800px){
|
||
|
body.has-trees{ margin-right: 15em }
|
||
|
|
||
|
body.neon .article-list{ background: rgba(0, 0, 0, .1) }
|
||
|
|
||
|
.article-list{
|
||
|
top: 3.2em;
|
||
|
opacity: 1;
|
||
|
visibility: visible;
|
||
|
border-left: 1px solid #ccc;
|
||
|
}
|
||
|
}
|
||
|
@media screen and (max-width: 799px){
|
||
|
body.neon .article-list{ background: #444 }
|
||
|
|
||
|
.article-list{
|
||
|
left: 0;
|
||
|
width: 100%;
|
||
|
min-height: 40%;
|
||
|
max-height: 80%;
|
||
|
transform: translateY(100%);
|
||
|
border-top: 1px solid #ccc;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/* - 错误页面 */
|
||
|
.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: 400px }
|
||
|
|
||
|
/* 3 - 页尾
|
||
|
-------------------------------- */
|
||
|
footer{
|
||
|
border-top: 1px solid #eee;
|
||
|
transition: border 0.3s, background 0.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;
|
||
|
border-radius: 4px;
|
||
|
border: 1px solid #eee;
|
||
|
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: right;
|
||
|
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{
|
||
|
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 - 附加
|
||
|
-------------------------------- */
|
||
|
:not(pre) > code[class*="language-"]{
|
||
|
position: relative;
|
||
|
padding: .2em;
|
||
|
border-radius: 0.3em;
|
||
|
color: #c92c2c;
|
||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
|
display: inline;
|
||
|
white-space: normal;
|
||
|
}
|
||
|
|
||
|
.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 }
|