add
xiang578
parent
16c38389cc
commit
6b362679ac
|
|
@ -16,3 +16,4 @@
|
|||
@import '../../include/style/donate'
|
||||
@import '../../include/style/plugin'
|
||||
@import '../../include/style/responsive'
|
||||
@import 'xry'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,373 @@
|
|||
// Custom styles.
|
||||
html,
|
||||
body,
|
||||
span,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #2e405b;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACFJREFUeNpiZGBg4GegAsBlCD8TqSYNQg2Mo6FEBAAIMACdPABtrSW/IQAAAABJRU5ErkJggg==");
|
||||
background-repeat: repeat;
|
||||
background-attachment: fixed;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar-inner, .comments, .post-block, .sidebar, .header-inner{
|
||||
background: unset;
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
// 修改选中字符的颜色
|
||||
/* webkit, opera, IE9 */
|
||||
::selection {
|
||||
background: #00c4b6;
|
||||
color: #f7f7f7;
|
||||
}
|
||||
/* firefox */
|
||||
::-moz-selection {
|
||||
background: #00c4b6;
|
||||
color: #f7f7f7;
|
||||
}
|
||||
|
||||
// 删除线
|
||||
del {
|
||||
color: #b35888;
|
||||
background: #fbf7f8;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
//页脚
|
||||
.footer-inner {color: #ff7600;}
|
||||
|
||||
/* 去掉图片边框 */
|
||||
.posts-expand .post-body img {
|
||||
border: none;
|
||||
padding: 0px;
|
||||
}
|
||||
.post-gallery .post-gallery-img img {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
// Custom styles
|
||||
// 页面最顶部的横线
|
||||
.headband {
|
||||
height: 1.5px;
|
||||
background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
|
||||
}
|
||||
// 页面顶部行高
|
||||
.header {
|
||||
line-height: 1.5;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 页面背景色
|
||||
.container {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
// 表格奇数行
|
||||
.highlight table>tbody>tr {
|
||||
&:nth-of-type(odd) {
|
||||
background-color: #E0EEE0;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格每一行鼠标经过时的颜色
|
||||
table>tbody>tr {
|
||||
&:hover {
|
||||
background-color: #CDC9C9;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格的单元格
|
||||
table td, table th {
|
||||
border-right: 1px solid #F5F5DC;
|
||||
}
|
||||
|
||||
// 文章内链接文本样式
|
||||
.post-body p a{
|
||||
color: #0593d3;
|
||||
border-bottom: none;
|
||||
border-bottom: 1px solid #0593d3;
|
||||
&:hover {
|
||||
color: #fc6423;
|
||||
border-bottom: none;
|
||||
border-bottom: 1px solid #fc6423;
|
||||
}
|
||||
}
|
||||
|
||||
// 代码块 styles.
|
||||
code {
|
||||
color: #ff7600;
|
||||
background: #fbf7f8;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
|
||||
blockquote{
|
||||
margin: 6px 0;
|
||||
color: #2e405b;
|
||||
border-left: 4px solid rgb(16, 152, 173);
|
||||
background-color: rgb(227, 242, 253);
|
||||
/* border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px; */
|
||||
margin-bottom: 20px;
|
||||
border-radius: 3px
|
||||
}
|
||||
|
||||
//复制按钮
|
||||
.copy-btn {
|
||||
color: #ff7600;
|
||||
background: #fff;
|
||||
border: 1px solid #ff7600;
|
||||
}
|
||||
.copy-btn:hover {
|
||||
border-color: #ff7600;
|
||||
color: #fff;
|
||||
background: #ff7600;
|
||||
}
|
||||
|
||||
.posts-expand {
|
||||
padding-top: 10px;
|
||||
}
|
||||
// 文章元数据（meta）留白更改
|
||||
.posts-expand .post-meta {
|
||||
margin: 10px 0px 20px 0px;
|
||||
}
|
||||
.posts-expand .post-meta time {
|
||||
border-bottom: none;
|
||||
}
|
||||
.post-category a{
|
||||
color: #49b1f5;
|
||||
}
|
||||
.post-category a:hover {
|
||||
color: #fc6423;
|
||||
}
|
||||
.post-category a, .post-comments-count a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.posts-expand .post.post-type-normal,.post-block{
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
// 鼠标移动至文章标题时的效果
|
||||
.posts-expand .post-title-link::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #49b1f5;
|
||||
visibility: hidden;
|
||||
-webkit-transform: scaleX(0);
|
||||
-moz-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
-o-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
// 文章标题动态效果
|
||||
.posts-expand .post-title-link::before {
|
||||
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
|
||||
}
|
||||
|
||||
// 文章标题字体
|
||||
.posts-expand .post-title {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
}
|
||||
// 文章内标题样式（左边的竖线）
|
||||
.post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
|
||||
border-left: 4px solid #f27c8d;
|
||||
margin-left: -40px;
|
||||
padding-left: 32px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
// 点进文章，文章的主标题
|
||||
.posts-expand article:only-of-type h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
// 二级标题(正常显示器分辨率)
|
||||
// 其实要在左下角和右下角加上一个折角、翻折的效果（一个三角形）
|
||||
.post-body h2 {
|
||||
padding-left: 1.7%;
|
||||
color: #2e405b;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 三级标题
|
||||
.post-body h3 {
|
||||
border-bottom: 1px solid #cfd8dc;
|
||||
padding-bottom: 0.3em;
|
||||
color: #49b1f5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-body h4 {
|
||||
color: #555;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 二级标题(移动终端分辨率)
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.main .post-body h2 {
|
||||
margin: 20px -23px 15px -28px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.main .post-body h2 {
|
||||
margin: 20px -15px 15px -18px;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片底下的描述性文字
|
||||
.post-body .image-caption, .post-body .figure .caption {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
//文章末尾本文链接
|
||||
.post-copyright a{
|
||||
color: #0593d3;
|
||||
border-bottom: none;
|
||||
border-bottom: 1px solid #0593d3;
|
||||
&:hover {
|
||||
color: #fc6423;
|
||||
border-bottom: none;
|
||||
border-bottom: 1px solid #fc6423;
|
||||
}
|
||||
}
|
||||
|
||||
// 文章底部的tags
|
||||
.posts-expand .post-tags a {
|
||||
border-bottom: none;
|
||||
margin-right: 0px;
|
||||
font-size: 13px;
|
||||
padding: 0px 5px;
|
||||
border-radius: 3px;
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
.posts-expand .post-tags a:hover {
|
||||
background: transparent;
|
||||
}
|
||||
// 文章底部页面跳转
|
||||
.post-nav-item a {
|
||||
color: #0593d3;
|
||||
}
|
||||
.post-nav-item a:hover {
|
||||
color: #fc6423;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pagination .prev, .pagination .next, .pagination .page-number {
|
||||
border: none;
|
||||
}
|
||||
.pagination .prev:hover, .pagination .next:hover, .pagination .page-number:hover {
|
||||
background: #ccc;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
|
||||
// 时间轴左边线条
|
||||
.posts-collapse::after {
|
||||
margin-left: -2px;
|
||||
background-image: linear-gradient(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
|
||||
}
|
||||
// 时间轴左边线条圆点颜色
|
||||
.posts-collapse .post-header::before {
|
||||
background-color: #fff;
|
||||
border: 1px solid #bbb8b8;
|
||||
}
|
||||
// 时间轴文章标题左边圆点颜色
|
||||
.posts-collapse .post-header:hover::before {
|
||||
background-color: #49b1f5;
|
||||
}
|
||||
// archives页面时间轴左边线条第一个圆点颜色
|
||||
.page-archive .posts-collapse .archive-move-on {
|
||||
top: 10px;
|
||||
opacity: 1;
|
||||
background-color: rgb(255, 255, 255);
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.posts-collapse .post-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
.posts-collapse .collection-title::before {
|
||||
opacity: 1;
|
||||
background-color: rgb(255, 255, 255);
|
||||
box-shadow: 0px 0px 1px 1px #bdbdbd;
|
||||
}
|
||||
// 标签云页面
|
||||
.tag-cloud-tags a {
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.site-state-item {
|
||||
border-left: none;
|
||||
}
|
||||
.feed-link {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 自定义的引用样式
|
||||
blockquote.question {
|
||||
border-left: 4px solid rgb(16, 152, 173);
|
||||
background-color: rgb(227, 242, 253);
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// 自定义的数字块
|
||||
span#inline-toc {
|
||||
display: inline-block;
|
||||
border-radius: 80% 100% 90% 20%;
|
||||
background-color: rgb(227, 242, 253);
|
||||
color: #555;
|
||||
padding: 0.05em 0.4em;
|
||||
margin: 2px 5px 2px 0px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// 浏览器滚动条
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #49b1f5;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.webmention-body h2 {
|
||||
padding-left: 1.7%;
|
||||
color: #2e405b;
|
||||
position: relative;
|
||||
border-left: 4px solid #f27c8d;
|
||||
margin-left: -40px;
|
||||
border-bottom: none;
|
||||
font-size: 1.375em;
|
||||
}
|
||||
Loading…
Reference in New Issue