mirror of https://github.com/1099438829/apeblog
2578 lines
42 KiB
CSS
2578 lines
42 KiB
CSS
/*
|
||
Theme Name: CorePress
|
||
Theme URI: https://www.lovestu.com/CorePress.html
|
||
Version: 5.x
|
||
Author: applek
|
||
Author URI: https://www.lovestu.com
|
||
Description: 极客个人主题，多功能CMS主题
|
||
Tags:CorePress
|
||
*/
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
img {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.sticky {
|
||
position: sticky;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 6px; /*对垂直流动条有效*/
|
||
height: 6px; /*对水平流动条有效*/
|
||
}
|
||
|
||
/*定义滚动条的轨道颜色、内阴影及圆角*/
|
||
::-webkit-scrollbar-track {
|
||
-webkit-box-shadow: inset 0 0 6px #ffffff;
|
||
background-color: #ffffff;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/*定义滑块颜色、内阴影及圆角*/
|
||
::-webkit-scrollbar-thumb {
|
||
border-radius: var(--border-hd);
|
||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
||
background-color: #C0C4CC;
|
||
}
|
||
|
||
:root {
|
||
--Maincolor: #409EFF;
|
||
--MaincolorHover: #66b1ff;
|
||
--bagcolor: #f7f9fa;
|
||
--swiper-navigation-size: 30px !important;
|
||
--border-hd: 2px;
|
||
--border-box: 1px solid #f5f6f7;
|
||
--box-shadow: 0 0 2px 0 rgba(98, 124, 153, .1);
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: var(--Maincolor);
|
||
}
|
||
|
||
a:visited {
|
||
color: var(--Maincolor);
|
||
}
|
||
|
||
html {
|
||
font-family: PingFang\ SC, Hiragino\ Sans\ GB, Microsoft\ YaHei, STHeiti, WenQuanYi\ Micro\ Hei, Helvetica, Arial, sans-serif;
|
||
text-rendering: optimizeLegibility;
|
||
font-size: 16px;
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
textarea {
|
||
font-family: PingFang\ SC, Hiragino\ Sans\ GB, Microsoft\ YaHei, STHeiti, WenQuanYi\ Micro\ Hei, Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
html, body, #app {
|
||
height: 100%;
|
||
background-color: var(--bagcolor);
|
||
}
|
||
|
||
html {
|
||
|
||
}
|
||
|
||
body {
|
||
overflow-x: hidden;
|
||
|
||
}
|
||
|
||
#app {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
main {
|
||
flex: 1;
|
||
width: 100%;
|
||
}
|
||
|
||
.html-main {
|
||
justify-content: space-between;
|
||
display: flex;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/**
|
||
头部
|
||
*/
|
||
header {
|
||
width: 100%;
|
||
box-shadow: 0 0 3px 1px rgba(0, 0, 0, .1);
|
||
align-items: center;
|
||
background-color: #fff;
|
||
position: fixed;
|
||
z-index: 99;
|
||
}
|
||
|
||
.top-divider {
|
||
min-height: 80px;
|
||
width: 100%;
|
||
}
|
||
|
||
.header-logo-plane {
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-logo img {
|
||
height: 50px;
|
||
width: auto;
|
||
}
|
||
|
||
.header-logo a {
|
||
color: var(--Maincolor);
|
||
}
|
||
|
||
.header-main-plane {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.header-main {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 100%;
|
||
position: relative;
|
||
max-width: 1300px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.header-logo-plane {
|
||
padding: 0 10px;
|
||
}
|
||
.header-menu {
|
||
display: flex;
|
||
}
|
||
|
||
.menu-header-plane {
|
||
position: relative;
|
||
height: 100%;
|
||
|
||
}
|
||
|
||
.menu-header-plane ul {
|
||
display: flex;
|
||
}
|
||
|
||
.menu-header-plane > ul {
|
||
height: 100%;
|
||
background: #fff;
|
||
}
|
||
|
||
.menu-header-plane a, .user-menu-plane a {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.menu-header-list > .menu-item > a {
|
||
position: relative;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.menu-header-list > .menu-item > a:hover {
|
||
color: var(--MaincolorHover);
|
||
}
|
||
|
||
.menu-header-list > .menu-item > a:before {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 40%;
|
||
width: 0;
|
||
height: 3px;
|
||
background-color: var(--Maincolor);
|
||
transition: all .3s;
|
||
display: flex;
|
||
justify-content: center;
|
||
visibility: hidden;
|
||
}
|
||
|
||
header .current-menu-item > a {
|
||
color: var(--MaincolorHover) !important;
|
||
}
|
||
|
||
|
||
.menu-header-list > .menu-item > a:hover:before {
|
||
visibility: visible;
|
||
width: 80%;
|
||
left: 10%;
|
||
}
|
||
|
||
.menu-item-has-children > a:before {
|
||
display: none !important;
|
||
}
|
||
|
||
.menu-header-list > li > a {
|
||
line-height: 62px;
|
||
padding: 0 14px;
|
||
}
|
||
|
||
.menu-header-list > .menu-item-has-children a, .user-menu a {
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.menu-header-list > .menu-item-has-children:after, .user-menu:after {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
font-family: "Font Awesome 5 Pro";
|
||
content: "\f107";
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
line-height: 62px;
|
||
transition: transform .3s;
|
||
|
||
|
||
}
|
||
|
||
.menu-header-list > .menu-item-has-children:hover:after {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.user-menu-main {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.user-menu-plane {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.user-menu {
|
||
flex: 1;
|
||
}
|
||
|
||
.user-menu-pc-search {
|
||
padding: 0 6px;
|
||
}
|
||
|
||
.user-avatar {
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
|
||
.user-menu:hover:after {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.menu-header-plane li {
|
||
list-style: none;
|
||
position: relative;
|
||
height: 100%;
|
||
}
|
||
|
||
.menu-header-plane li > a {
|
||
display: inline-block !important;
|
||
color: #4e5358;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.menu-header-plane .menu-item-has-children > ul {
|
||
display: block;
|
||
}
|
||
|
||
@media (hover: hover) and (pointer: fine) {
|
||
.menu-header-plane .menu-item-has-children:hover > .sub-menu {
|
||
visibility: visible;
|
||
display: block;
|
||
z-index: 1;
|
||
opacity: 1;
|
||
top: 50px;
|
||
min-width: 118px;
|
||
}
|
||
}
|
||
|
||
.menu-header-plane .menu-item-has-children:hover > .sub-menu {
|
||
visibility: visible;
|
||
display: block;
|
||
z-index: 1;
|
||
opacity: 1;
|
||
top: 50px;
|
||
min-width: 118px;
|
||
}
|
||
|
||
.menu-header-plane .sub-menu {
|
||
position: absolute;
|
||
visibility: hidden;
|
||
background-color: #fff;
|
||
box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
|
||
top: 40px;
|
||
white-space: nowrap;
|
||
border-radius: var(--border-hd);
|
||
transition-duration: .3s;
|
||
opacity: 0;
|
||
}
|
||
|
||
.menu-header-plane .sub-menu li a, .user-sub-menu li a {
|
||
padding: 10px 20px;
|
||
transition-duration: .3s;
|
||
}
|
||
|
||
.menu-header-plane .sub-menu li a:hover, .user-sub-menu li a:hover {
|
||
color: var(--MaincolorHover);
|
||
}
|
||
|
||
.menu-header-plane .sub-menu .sub-menu {
|
||
left: 100%;
|
||
top: 0px !important;
|
||
}
|
||
|
||
/**用户菜单
|
||
*/
|
||
.user-menu-plane li {
|
||
list-style: none;
|
||
}
|
||
|
||
|
||
.login-btn-header:active {
|
||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
|
||
}
|
||
|
||
.login-btn-header {
|
||
border: 1px solid var(--Maincolor);
|
||
color: var(--Maincolor);
|
||
border-radius: var(--border-hd);
|
||
background: #fff;
|
||
outline: none;
|
||
padding: 5px 13px;;
|
||
}
|
||
|
||
.reg-btn-header {
|
||
color: #fff;
|
||
background: var(--Maincolor);
|
||
}
|
||
|
||
.user-menu-main {
|
||
line-height: 62px;
|
||
padding: 0 14px;
|
||
display: inline-block !important;
|
||
color: #4e5358;
|
||
}
|
||
|
||
.user-menu-name {
|
||
cursor: default;
|
||
}
|
||
|
||
.user-menu > li {
|
||
position: relative;
|
||
}
|
||
|
||
.user-menu > li:hover .user-sub-menu {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
top: 50px;
|
||
}
|
||
|
||
.user-sub-menu {
|
||
opacity: 0;
|
||
position: absolute;
|
||
visibility: hidden;
|
||
display: block;
|
||
background: #fff;
|
||
box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
|
||
top: 40px;
|
||
white-space: nowrap;
|
||
z-index: 99;
|
||
left: 20px;
|
||
border-radius: var(--border-hd);
|
||
transition-duration: .3s;
|
||
}
|
||
|
||
.user-sub-menu a {
|
||
padding: 10px 20px;
|
||
display: inline-block !important;
|
||
color: #4e5358;
|
||
font-size: 14px;
|
||
}
|
||
|
||
|
||
.swiper-slide {
|
||
position: relative;
|
||
}
|
||
|
||
.swiper-slide img {
|
||
height: auto;
|
||
width: 100%;
|
||
max-height: 300px;
|
||
border-radius: var(--border-hd);
|
||
}
|
||
|
||
.slide-title {
|
||
position: absolute;
|
||
z-index: 2;
|
||
width: 100%;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 3px 15px 0;
|
||
margin: 0;
|
||
line-height: 48px;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
font-size: 28px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
|
||
}
|
||
|
||
.swiper-pagination {
|
||
display: inline-block !important;
|
||
}
|
||
|
||
.carousel {
|
||
margin-bottom: 20px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.carousel img {
|
||
transition: all .3s;
|
||
}
|
||
|
||
.swiper-button-prev {
|
||
left: -100px !important;
|
||
}
|
||
|
||
.swiper-button-next {
|
||
right: -100px !important;
|
||
}
|
||
|
||
.carousel:hover .swiper-button-prev {
|
||
left: 10px !important;
|
||
}
|
||
|
||
.carousel:hover .swiper-button-next {
|
||
right: 10px !important;
|
||
}
|
||
|
||
.swiper-button-prev, .swiper-button-next {
|
||
background-color: #000;
|
||
padding: 18px;
|
||
border-radius: 50%;
|
||
transition: .3s;
|
||
opacity: .7;
|
||
outline: none;
|
||
}
|
||
|
||
.carousel:hover .swiper-button-prev, .carousel:hover .swiper-button-next {
|
||
visibility: visible;
|
||
|
||
}
|
||
|
||
.swiper-container {
|
||
--swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
|
||
--swiper-navigation-size: 20px; /* 设置按钮大小 */
|
||
}
|
||
|
||
.swiper-pagination {
|
||
text-align: right !important;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.carousel:hover .corepress-swiper-button-next {
|
||
right: 10px !important;
|
||
}
|
||
|
||
.carousel:hover .corepress-swiper-button-prev {
|
||
left: 10px !important;
|
||
}
|
||
|
||
.corepress-swiper-button-prev, .corepress-swiper-button-next {
|
||
transition: .2s;
|
||
outline: none;
|
||
}
|
||
|
||
|
||
/**
|
||
首页卡片列表
|
||
*/
|
||
|
||
.index-top-postcard-plane {
|
||
|
||
}
|
||
|
||
.index-top-postcard-body {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
flex-shrink: 0;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.index-top-postcard-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.index-top-postcard-main img {
|
||
max-height: 160px;
|
||
border-radius: 0 !important;
|
||
max-width: unset !important;
|
||
}
|
||
|
||
.index-top-postcard-main img:hover {
|
||
transform: unset !important;
|
||
}
|
||
|
||
.index-top-postcard-main {
|
||
background-color: #fff;
|
||
border: 1px solid rgba(239, 239, 239, .9);
|
||
border-radius: var(--border-hd);
|
||
overflow: hidden;
|
||
transition: all .3s ease 0s;
|
||
}
|
||
|
||
.index-top-postcard-main:hover {
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.index-top-postcard-main a {
|
||
color: #999;
|
||
}
|
||
|
||
.index-top-postcard-title {
|
||
padding: 6px 0;
|
||
}
|
||
|
||
/**
|
||
首页选项卡
|
||
*/
|
||
.index-tab-plane {
|
||
display: flex;
|
||
}
|
||
|
||
.index-tab-item {
|
||
margin-right: 20px;
|
||
transition: all .3s;
|
||
font-size: 16px;
|
||
user-select: none;
|
||
}
|
||
|
||
.index-tab-item:after {
|
||
visibility: hidden;
|
||
content: " ";
|
||
display: block;
|
||
height: 3px;
|
||
width: 0;
|
||
background-color: var(--Maincolor);
|
||
position: relative;
|
||
top: 10px;
|
||
transition: all .3s;
|
||
left: 50%;
|
||
}
|
||
|
||
.index-tab-item:hover.index-tab-item:after {
|
||
visibility: visible;
|
||
width: 100%;
|
||
left: 0;
|
||
}
|
||
|
||
.index-tab-item-active:after {
|
||
visibility: visible;
|
||
width: 100%;
|
||
left: 0;
|
||
|
||
}
|
||
|
||
.index-tab-item-active {
|
||
color: var(--Maincolor);
|
||
}
|
||
|
||
/**
|
||
文章列表
|
||
*/
|
||
|
||
.post-item-new:before {
|
||
content: "New";
|
||
display: block;
|
||
position: absolute;
|
||
right: 0;
|
||
background: var(--Maincolor);
|
||
color: #fff;
|
||
padding: 0 6px;
|
||
border-radius: var(--border-hd);
|
||
margin-top: 6px;
|
||
margin-right: 10px;
|
||
font-size: 14px;
|
||
line-height: 18px;
|
||
}
|
||
|
||
|
||
.post-main {
|
||
flex-basis: 74%;
|
||
margin-bottom: 10px;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
width: 0;
|
||
min-width: 0;
|
||
transition-duration: 0.3s;
|
||
border-radius: var(--border-hd);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.post-main-closesidebar {
|
||
flex-basis: 100%;
|
||
}
|
||
|
||
.sidebar-display {
|
||
flex-basis: 0;
|
||
display: none;
|
||
}
|
||
|
||
.post-main-full {
|
||
flex-basis: 100% !important;
|
||
}
|
||
|
||
.sidebar {
|
||
flex-basis: 26%;
|
||
margin: 0 10px;
|
||
width: 0;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sidebar-box-list {
|
||
position: sticky;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.post-content-post img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.post-list-page-plane {
|
||
border: var(--border-box);
|
||
border-radius: var(--border-hd);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
|
||
.post-list, .sidebar li {
|
||
list-style: none !important;
|
||
}
|
||
|
||
.post-item-sticky {
|
||
display: inline-block;
|
||
margin-top: 1px;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
color: #fff;
|
||
border-radius: var(--border-hd);
|
||
vertical-align: top;
|
||
background: var(--Maincolor);
|
||
padding: 2px 8px;
|
||
}
|
||
|
||
.post-item {
|
||
overflow: hidden;
|
||
background: #fff;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
position: relative;
|
||
}
|
||
|
||
.post-loading {
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
color: #999;
|
||
}
|
||
|
||
.post-item a {
|
||
color: #999;
|
||
transition: all .3s ease-out 0s;
|
||
}
|
||
|
||
.post-item a:hover {
|
||
color: var(--MaincolorHover);
|
||
}
|
||
|
||
.post-item:hover {
|
||
background: #fcfcfc;
|
||
}
|
||
|
||
.post-item-bg img {
|
||
filter: blur(10px) brightness(0.8);
|
||
transform: scale(1.2);
|
||
position: absolute;
|
||
}
|
||
|
||
.post-item-container {
|
||
display: flex;
|
||
align-items: stretch;
|
||
padding: 20px 24px;
|
||
margin: 5px;
|
||
}
|
||
|
||
.post-item-container-closethumbnail {
|
||
padding: 10px;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.post-item h2 {
|
||
color: #333;
|
||
line-height: 1.2;
|
||
font-size: 19px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.post-item h2 a {
|
||
color: #333;
|
||
transition: all .3s ease-out 0s;
|
||
}
|
||
|
||
.post-item h2 a:hover {
|
||
color: var(--MaincolorHover);
|
||
}
|
||
|
||
.post-item-thumbnail {
|
||
flex: 30%;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.post-item-thumbnail:before {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 60%;
|
||
}
|
||
|
||
.post-item-thumbnail > a {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.post-item-thumbnail img {
|
||
object-fit: cover;
|
||
max-width: 240px;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: var(--border-hd);
|
||
transition: all .3s ease-out 0s;
|
||
|
||
}
|
||
|
||
.post-item-thumbnail img:hover {
|
||
transform: scale(1.03);
|
||
}
|
||
|
||
.post-item-main {
|
||
margin-left: 20px;
|
||
font-weight: 500;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
flex: 70%;
|
||
}
|
||
|
||
.post-item-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #b1b1b1;
|
||
font-size: 12px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.post-item-meta i {
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.post-item-avatar {
|
||
border-radius: 50%;
|
||
margin-right: 6px;
|
||
max-width: 24px;
|
||
}
|
||
|
||
.post-item-type1 {
|
||
padding: 20px 30px;
|
||
}
|
||
|
||
.post-item-type1 {
|
||
padding: 0 30px;
|
||
}
|
||
|
||
.post-item-type1 h2 {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.post-item-info-type1 {
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.post-item-thumbnail-type1 {
|
||
margin-bottom: 10px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.post-item-thumbnail-type1 img {
|
||
width: 100%;
|
||
max-height: 300px;
|
||
border-radius: var(--border-hd);
|
||
transition: all .3s ease-out 0s;
|
||
}
|
||
|
||
.post-item-thumbnail-type1 img:hover {
|
||
transform: scale(1.03);
|
||
}
|
||
|
||
.cat-item-mark {
|
||
position: relative;
|
||
width: 11px;
|
||
height: 11px;
|
||
display: inline-block;
|
||
content: '';
|
||
border-radius: 50%;
|
||
background: #1985ff;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.post-item-tags > .cat-item-mark:nth-child(3) {
|
||
background: #ff3355;
|
||
}
|
||
|
||
.post-item-tags > .cat-item-mark:nth-child(5) {
|
||
background: #ffa41b !important;
|
||
}
|
||
|
||
|
||
.post-item-content {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
margin-top: 10px;
|
||
color: #797c80;
|
||
max-height: 40px;
|
||
overflow: hidden;
|
||
word-break:break-all;
|
||
}
|
||
|
||
.post-item-tags {
|
||
position: absolute;
|
||
padding: 4px 8px;
|
||
font-size: 12px;
|
||
line-height: 14px;
|
||
color: #fff;
|
||
background-color: #000;
|
||
margin: 10px;
|
||
background: rgba(0, 0, 0, .6);
|
||
border-radius: var(--border-hd);
|
||
}
|
||
|
||
.post-item-tags-type1 {
|
||
top: 50px;
|
||
|
||
}
|
||
|
||
.post-item-tags a {
|
||
color: #fff;
|
||
}
|
||
|
||
.post-item-info {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.item-post-meta-other {
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.post-item-time {
|
||
color: #adb5bd;
|
||
}
|
||
|
||
.item-post-meta-other span {
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.item-post-meta-other i {
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.post-item-author {
|
||
margin-top: 30px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/**
|
||
分页
|
||
*/
|
||
.pages {
|
||
text-align: center;
|
||
background: #fff;
|
||
padding: 20px;
|
||
|
||
}
|
||
|
||
.fenye a, .pagedbox, .page-numbers {
|
||
display: inline-block;
|
||
padding: 7px 8px;
|
||
margin-left: 5px;
|
||
margin-bottom: 5px;
|
||
color: #999 !important;
|
||
line-height: 1;
|
||
background-color: #f2f2f2;
|
||
border-radius: var(--border-hd);
|
||
transition: all .3s ease-out 0s;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.fenye a:hover, .page-numbers:hover {
|
||
background: var(--MaincolorHover) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.current {
|
||
background: var(--Maincolor) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.page-count {
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.index-load-more-btn {
|
||
color: var(--Maincolor);
|
||
border: 1px solid var(--Maincolor);
|
||
background-color: #fff;
|
||
padding: 6px 20px;
|
||
border-radius: var(--border-hd);
|
||
outline: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/*
|
||
侧边
|
||
*/
|
||
|
||
.textwidget {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.aside-box {
|
||
background: #fff;
|
||
padding: 10px;
|
||
border: var(--border-box);
|
||
border-radius: var(--border-hd);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.aside-box img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.aside-box li {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.aside-box a {
|
||
color: #999;
|
||
transition: all .3s ease-out 0s;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.aside-box a:hover {
|
||
color: var(--MaincolorHover);
|
||
}
|
||
|
||
.widget-title {
|
||
position: relative;
|
||
padding-left: 20px;
|
||
margin-bottom: 6px;
|
||
padding-bottom: 16px;
|
||
padding-top: 4px;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #18191a;
|
||
line-height: 22px;
|
||
}
|
||
|
||
.widget-title:before, .widget-title:after {
|
||
position: absolute;
|
||
transform: skewX(-15deg);
|
||
content: '';
|
||
width: 2px;
|
||
height: 15px;
|
||
background: var(--Maincolor);
|
||
top: 8px;
|
||
left: 4px;
|
||
bottom: 10%;
|
||
transition: .4s;
|
||
|
||
}
|
||
|
||
.widget-title:after {
|
||
left: 10px;
|
||
}
|
||
|
||
.widget-sentence-placeholder {
|
||
position: relative;
|
||
}
|
||
|
||
.widget-sentence-placeholder:before {
|
||
position: absolute;
|
||
content: "\f10d";
|
||
font-family: "Font Awesome 5 Pro";
|
||
font-weight: 900;
|
||
font-size: 20px;
|
||
color: #ccc;
|
||
left: 0;
|
||
top: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
.widget-sentence-placeholder p {
|
||
text-indent: 25px;
|
||
}
|
||
|
||
.widget-sentence-placeholder li {
|
||
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
||
width: 100%;
|
||
height: 18px;
|
||
list-style: none;
|
||
background-size: 400% 100%;
|
||
background-position: 100% 50%;
|
||
animation: skeleton-loading 1.4s ease infinite;
|
||
}
|
||
|
||
@keyframes skeleton-loading {
|
||
0% {
|
||
background-position: 100% 50%;
|
||
}
|
||
100% {
|
||
background-position: 0 50%;
|
||
}
|
||
}
|
||
|
||
/**
|
||
底部
|
||
*/
|
||
.footer-plane {
|
||
background: #22292d;
|
||
color: #5f676f;
|
||
padding: 30px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.menu-footer-plane {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.footer-plane a {
|
||
color: #b3c0ce;
|
||
}
|
||
|
||
.footer-container {
|
||
max-width: 1200px;
|
||
margin: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.footer-container > div:nth-child(1) {
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.footer-logo img {
|
||
height: 50px;
|
||
}
|
||
|
||
.footer-aside-box {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.footer-aside-box .menu-item {
|
||
display: inline-block;
|
||
}
|
||
|
||
.footer-aside-box li {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-left {
|
||
flex: 70%;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
}
|
||
|
||
.footer-right {
|
||
display: flex;
|
||
flex: 30%;
|
||
flex-shrink: 0;
|
||
justify-content: flex-end;
|
||
text-align: right;
|
||
}
|
||
|
||
.footer-aside-box a {
|
||
color: #f2f2f2 !important;
|
||
}
|
||
|
||
.footer-widget-title {
|
||
font-size: 16px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.menu-footer-plane, .footer-info {
|
||
font-size: 14px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.menu-footer-plane li {
|
||
list-style: none;
|
||
}
|
||
|
||
.menu-footer-list {
|
||
display: flex;
|
||
}
|
||
|
||
.menu-footer-list .menu-item {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
|
||
.footer-details img {
|
||
height: 90px;
|
||
}
|
||
|
||
.ipc-icon {
|
||
width: 24px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.footer-icp {
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
/**
|
||
面包屑
|
||
*/
|
||
.crumbs-plane-body {
|
||
position: relative;
|
||
}
|
||
|
||
.crumbs-plane {
|
||
padding: 10px;
|
||
border-bottom: 1px solid #f7f7f7;
|
||
font-size: 14px;
|
||
transition: all .3s;
|
||
position: relative;
|
||
}
|
||
|
||
.crumbs-plane a {
|
||
color: #999;
|
||
}
|
||
|
||
.crumbs-plane a:hover {
|
||
text-decoration: underline !important;
|
||
}
|
||
|
||
.crumbs-plane li {
|
||
list-style: none;
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.crumbs-plane li:after {
|
||
content: " /";
|
||
color: #999;
|
||
}
|
||
|
||
.crumbs-plane li:last-child:after {
|
||
content: "";
|
||
}
|
||
|
||
.corepress-crumbs {
|
||
width: 100%;
|
||
padding: 10px;
|
||
padding-top: 0;
|
||
}
|
||
|
||
|
||
/**
|
||
文章内容
|
||
*/
|
||
::selection {
|
||
background: var(--fontSelectedColor);
|
||
color: #fff;
|
||
}
|
||
|
||
.aligncenter {
|
||
clear: both;
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.alignright {
|
||
float: right;
|
||
margin: 0.5em 0 0.5em 1em;
|
||
}
|
||
|
||
.alignleft {
|
||
float: left;
|
||
margin: 0.5em 1em 0.5em 0;
|
||
}
|
||
|
||
.post-content-body {
|
||
background: #fff;
|
||
border: var(--border-box);
|
||
border-radius: var(--border-hd);
|
||
overflow: hidden;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.post-content {
|
||
padding: 30px;
|
||
line-height: 1.6;
|
||
color: #4e5358;
|
||
position: relative;
|
||
}
|
||
|
||
.wp-video, .wp-video-shortcode, .wp-playlist video {
|
||
max-width: 100% !important;
|
||
height: auto;
|
||
}
|
||
|
||
.wp-block-video video {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.post-content li {
|
||
list-style-position: inside;
|
||
}
|
||
|
||
.post-content p {
|
||
margin-bottom: 10px;
|
||
line-height: 1.8;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.post-title {
|
||
font-size: 22px;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
padding-bottom: 10px;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
|
||
.post-info {
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
font-size: 14px;
|
||
color: #999;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.post-info-switch-sidebar-show i {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
|
||
.post-info-switch-sidebar:hover {
|
||
color: var(--Maincolor);
|
||
}
|
||
|
||
.post-info .fa {
|
||
margin: 0 6px;
|
||
|
||
}
|
||
|
||
.dot {
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.post-info a {
|
||
color: #999;
|
||
transition: all .3s ease-out 0s;
|
||
}
|
||
|
||
.post-content h2, h3 {
|
||
position: relative;
|
||
}
|
||
|
||
.post-content h2:before, h3:before {
|
||
box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
|
||
}
|
||
|
||
.post-content h3 {
|
||
padding-bottom: 10px;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
.post-content h3:hover:before {
|
||
width: 50px;
|
||
}
|
||
|
||
.post-content h3:before {
|
||
width: 40px;
|
||
height: 3px;
|
||
top: auto;
|
||
left: 0;
|
||
bottom: 3px;
|
||
transition: .4s;
|
||
position: absolute;
|
||
content: '';
|
||
background: var(--Maincolor);
|
||
border-radius: 5px;
|
||
|
||
}
|
||
|
||
.post-content h2 {
|
||
padding-left: 16px;
|
||
margin: 12px 0;
|
||
border: none;
|
||
font-weight: 700;
|
||
color: var(--Maincolor);
|
||
font-size: 20px;
|
||
}
|
||
|
||
.post-content h2:before {
|
||
position: absolute;
|
||
content: '';
|
||
width: 4px;
|
||
background: var(--Maincolor);
|
||
top: 10%;
|
||
left: 2px;
|
||
bottom: 10%;
|
||
border-radius: 5px;
|
||
transition: .4s;
|
||
}
|
||
|
||
.post-content blockquote {
|
||
position: relative;
|
||
padding: 30px 30px 30px 75px;
|
||
background: #f3f3f3;
|
||
border-left: 0;
|
||
font-size: 16px;
|
||
border-radius: var(--border-hd);
|
||
}
|
||
|
||
.post-content blockquote:before {
|
||
position: absolute;
|
||
content: "\f10d";
|
||
font-family: "Font Awesome 5 Pro";
|
||
font-weight: 900;
|
||
font-size: 32px;
|
||
color: #ccc;
|
||
left: 30px;
|
||
top: 22px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.post-content ul, ol {
|
||
list-style-position: outside;
|
||
}
|
||
|
||
pre {
|
||
margin: 10px 0;
|
||
padding: 10px;
|
||
max-height: 500px;
|
||
overflow: auto;
|
||
background-color: #f8f8f8;
|
||
border-radius: var(--border-hd);
|
||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace, sans-serif;
|
||
}
|
||
|
||
pre code {
|
||
color: unset;
|
||
background-color: unset;
|
||
}
|
||
|
||
code {
|
||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||
display: inline-block;
|
||
padding: 0 4px;
|
||
margin-left: 2px;
|
||
font-size: 90%;
|
||
margin-bottom: 2px;
|
||
color: #c7254e;
|
||
background-color: #f9f2f4;
|
||
border-radius: var(--border-hd);
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
margin: 10px 0;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
tr:nth-child(2n+1) td {
|
||
background: #fafafa;
|
||
}
|
||
|
||
tr:hover td {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
td {
|
||
transition: background-color .25s ease;
|
||
padding: 8px;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
text-overflow: ellipsis;
|
||
vertical-align: middle;
|
||
position: relative;
|
||
text-align: left;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.post-copyright {
|
||
margin-top: 30px;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
border-radius: var(--border-hd);
|
||
background: #f7f9fa;
|
||
padding: 8px 20px;
|
||
color: #999;
|
||
}
|
||
|
||
.post-end-dividing {
|
||
text-align: center;
|
||
color: #b1b1b8;
|
||
margin: 20px 0;
|
||
font-size: 14px;
|
||
user-select: none;
|
||
}
|
||
|
||
.post-end-dividing:before, .post-end-dividing:after {
|
||
content: "";
|
||
background: #f3f3f3;
|
||
width: 20%;
|
||
vertical-align: middle;
|
||
height: 1px;
|
||
display: inline-block;
|
||
margin: 0 16px;
|
||
}
|
||
|
||
.post-turn-page-plane {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-shrink: 0;
|
||
margin: 10px 0;
|
||
color: #fff;
|
||
}
|
||
|
||
.post-turn-page-previous {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.post-turn-page {
|
||
flex: 40%;
|
||
padding: 10px;
|
||
border-radius: var(--border-hd);
|
||
overflow: hidden;
|
||
font-size: 14px;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
color: #fff;
|
||
background-size: cover;
|
||
background-position: 50%;
|
||
}
|
||
|
||
.post-turn-page-main {
|
||
z-index: 10;
|
||
font-size: 16px;
|
||
position: relative;
|
||
}
|
||
|
||
.post-turn-page-link-pre, .post-turn-page-link-next {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.post-turn-page-main a {
|
||
color: #fff;
|
||
}
|
||
|
||
.post-turn-page-next {
|
||
text-align: right;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.post-turn-page:before {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, .5);
|
||
content: "";
|
||
opacity: .8;
|
||
}
|
||
|
||
.post-tag {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.post-tags {
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.post-tags-icon {
|
||
margin-right: 20px;
|
||
color: #fff;
|
||
padding: 4px;
|
||
border-radius: 50%;
|
||
background: var(--Maincolor);
|
||
|
||
}
|
||
|
||
.post-tags a {
|
||
font-size: 12px;
|
||
margin-right: 20px;
|
||
padding: 3px 10px;
|
||
border-radius: 6px;
|
||
opacity: .8;
|
||
margin-bottom: 10px;
|
||
display: inline-block;
|
||
color: #888;
|
||
background: #f3f3f3;
|
||
}
|
||
|
||
/*.post-tags a:nth-child(1n) {
|
||
background: #FFCDD2 !important;
|
||
color: #EF5350!important;
|
||
}
|
||
.post-tags a:nth-child(2n) {
|
||
background: #FFCCBC !important;
|
||
color: #FF5722!important;
|
||
}
|
||
.post-tags a:nth-child(3n) {
|
||
background: #BBDEFB !important;
|
||
color: #42A5F5!important;
|
||
}
|
||
.post-tags a:nth-child(4n) {
|
||
background: #C8E6C9 !important;
|
||
color: #66BB6A!important;
|
||
}
|
||
.post-tags a:nth-child(5n) {
|
||
background: #f3f3f3;
|
||
color: #888;
|
||
}*/
|
||
|
||
.post-end-tool-btns {
|
||
text-align: center;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.post-end-tool-btn-item {
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
padding: 0 10px;
|
||
|
||
}
|
||
|
||
.post-end-tool-btns svg {
|
||
width: 30px;
|
||
height: 30px;
|
||
display: block;
|
||
fill: currentColor;
|
||
color: #83878a;
|
||
margin: 0 auto;
|
||
transition: .3s;
|
||
}
|
||
|
||
.post-end-tool-btn-item svg:hover {
|
||
color: var(--MaincolorHover);
|
||
}
|
||
|
||
.post-share img {
|
||
width: 36px;
|
||
height: 36px;
|
||
box-shadow: none !important;
|
||
background: #f3f3f3;
|
||
padding: 6px;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.post-share-list img, .post-share-list svg {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.post-pop-plane-show {
|
||
visibility: visible !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
#qrcode-plane img, #qrcode-plane svg {
|
||
max-width: 100px;
|
||
width: 100%;
|
||
}
|
||
|
||
#reward-plane img {
|
||
max-width: 200px;
|
||
}
|
||
|
||
.post-pop-plane {
|
||
transition: .5s;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
position: absolute;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
|
||
border: 1px solid rgba(0, 0, 0, .2);
|
||
z-index: 999;
|
||
border-radius: var(--border-hd);
|
||
padding: 20px;
|
||
background: #fff;
|
||
}
|
||
|
||
#share-plane svg {
|
||
display: inline-block;
|
||
}
|
||
|
||
|
||
.qrcode-img img, canvas {
|
||
width: 100%;
|
||
}
|
||
|
||
/**
|
||
评论
|
||
*/
|
||
.login-btn {
|
||
padding: 6px 10px !important;
|
||
margin-left: 10px !important;
|
||
}
|
||
|
||
.login-btn:hover {
|
||
color: #409eff;
|
||
border-color: #c6e2ff;
|
||
background-color: #ecf5ff;
|
||
outline: none;
|
||
}
|
||
|
||
.button {
|
||
display: inline-block;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
background: #fff;
|
||
border: 1px solid #dcdfe6;
|
||
color: #606266;
|
||
-webkit-appearance: none;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
margin: 0;
|
||
transition: .1s;
|
||
font-weight: 500;
|
||
-moz-user-select: none;
|
||
-webkit-user-select: none;
|
||
-ms-user-select: none;
|
||
padding: 12px 20px;
|
||
font-size: 14px;
|
||
border-radius: var(--border-hd);
|
||
}
|
||
|
||
.primary-btn {
|
||
color: #fff;
|
||
background-color: var(--Maincolor);
|
||
border-color: var(--Maincolor);
|
||
}
|
||
|
||
.primary-btn:hover {
|
||
background: var(--MaincolorHover);
|
||
border-color: var(--MaincolorHover);
|
||
color: #fff;
|
||
}
|
||
|
||
#comments {
|
||
background: #fff;
|
||
border: var(--border-box);
|
||
border-radius: var(--border-hd);
|
||
}
|
||
|
||
#comments a {
|
||
color: #333;
|
||
}
|
||
|
||
#comments li {
|
||
list-style: none;
|
||
}
|
||
|
||
.comment .children .avatar-img {
|
||
width: auto;
|
||
height: auto;
|
||
}
|
||
|
||
#reply-title {
|
||
margin-bottom: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.comment_form_textarea_box {
|
||
margin-bottom: 10px;
|
||
position: relative;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
#comment {
|
||
width: 100%;
|
||
}
|
||
|
||
.logged-in-as {
|
||
text-align: center;
|
||
max-width: 100px;
|
||
margin-right: 10px;
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.logged-in-as img {
|
||
max-height: 80px;
|
||
}
|
||
|
||
.logged-in-as > a {
|
||
color: #999 !important;
|
||
}
|
||
|
||
#respond {
|
||
padding: 20px;
|
||
padding-top: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.comment_form_textarea {
|
||
outline: none;
|
||
border: 1px solid #f7f9fa;
|
||
resize: none;
|
||
min-height: 100px;
|
||
padding: 6px;
|
||
transition: .15s;
|
||
border-radius: var(--border-hd);
|
||
background: var(--bagcolor);
|
||
}
|
||
|
||
.comment_form_textarea:hover {
|
||
border: 1px solid var(--Maincolor);
|
||
}
|
||
|
||
.comment_form_textarea:focus {
|
||
border: 1px solid var(--Maincolor);
|
||
}
|
||
|
||
.comment_userinput {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.comment_userinput input {
|
||
height: 34px;
|
||
font-size: 14px;
|
||
background: #f5f6f7;
|
||
border-radius: var(--border-hd);
|
||
outline: none;
|
||
padding-left: 6px;
|
||
border: 1px solid #f7f9fa;
|
||
|
||
}
|
||
|
||
.comment-set-submit-plane {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.comment-form-author, .comment-form-email, .comment-form-url {
|
||
flex: 20%;
|
||
margin: 10px;
|
||
}
|
||
|
||
.comment-form-author {
|
||
margin-left: 0 !important;
|
||
}
|
||
|
||
.comment-form-url {
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
.comment-form-author input, .comment-form-email input, .comment-form-url input {
|
||
width: 100%;
|
||
line-height: 30px;
|
||
outline: none;
|
||
background: #fff;
|
||
}
|
||
|
||
.comment a {
|
||
color: #333;
|
||
}
|
||
|
||
.comment-item:hover .comment-btn-reply {
|
||
visibility: visible !important;
|
||
opacity: 1;
|
||
}
|
||
|
||
.comment-btn-reply {
|
||
transition: all .1s;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.comment-pub-time, .comment-btn-reply {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
|
||
.comment-text {
|
||
color: #777;
|
||
margin: 6px 0;
|
||
line-height: 1.5;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.comment-text > p {
|
||
margin-top: 10px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.comment-navigation {
|
||
border-radius: var(--border-hd);
|
||
}
|
||
|
||
.comments-title {
|
||
margin-bottom: 10px;
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
padding-left: 20px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.reply-title, .plane-title {
|
||
padding: 20px 20px;
|
||
color: #18191a;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.comment-metadata {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.comment-item {
|
||
display: flex;
|
||
box-shadow: 0 .5px 0 #f2f2f2;
|
||
padding: 10px 0 5px;
|
||
}
|
||
|
||
.comment-media {
|
||
flex-shrink: 0;
|
||
|
||
}
|
||
|
||
.avatar-img {
|
||
flex: 1;
|
||
}
|
||
|
||
.avatar-img img {
|
||
border-radius: 50%;
|
||
max-height: 48px;
|
||
max-width: 48px;
|
||
}
|
||
|
||
.author_name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
|
||
.author_name > a, .comment-reply-link {
|
||
transition: .3s;
|
||
}
|
||
|
||
.author_name > a:hover, .comment-reply-link:hover {
|
||
color: var(--Maincolor) !important;
|
||
}
|
||
|
||
.comment-from {
|
||
background: var(--Maincolor);
|
||
color: #fff;
|
||
padding: 2px 3px;
|
||
margin-left: 5px;
|
||
border-radius: 2px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.comment-zhan img {
|
||
width: 16px;
|
||
margin-left: 6px;
|
||
position: relative;
|
||
bottom: 1px;
|
||
}
|
||
|
||
.comment-from a {
|
||
color: #fff !important;
|
||
font-size: 12px;
|
||
|
||
}
|
||
|
||
.user-identity {
|
||
display: inline-block;
|
||
margin: 0 3px;
|
||
}
|
||
|
||
.user-identity svg {
|
||
vertical-align: middle;
|
||
width: 20px;
|
||
height: auto;
|
||
fill: var(--Maincolor);
|
||
}
|
||
|
||
.commentlist {
|
||
padding: 0 30px;
|
||
|
||
}
|
||
|
||
.commentlist > .comment > .children {
|
||
padding-left: 60px;
|
||
}
|
||
|
||
.commentlist > .comment > .children > .comment:first-child {
|
||
margin-top: 10px;
|
||
border-top-left-radius: 4px;
|
||
border-top-right-radius: 4px;
|
||
}
|
||
|
||
.commentlist > .comment > .children > .comment:last-child {
|
||
margin-bottom: 10px;
|
||
border-bottom-left-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.commentlist > .comment > .children > .comment:last-child > .comment-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.commentlist > .comment > .children > .comment {
|
||
background: #f7f7f7;
|
||
padding: 0 20px;
|
||
position: relative;
|
||
margin: 0 10px;
|
||
|
||
}
|
||
|
||
|
||
.commentlist > .comment > .children > .comment:first-child:before {
|
||
position: absolute;
|
||
left: 15px;
|
||
top: -17px;
|
||
border: 9px solid transparent;
|
||
border-bottom: 10px solid #f8f8f8;
|
||
content: "";
|
||
}
|
||
|
||
#reply-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.dots:hover {
|
||
background-color: #f2f2f2 !important;
|
||
color: #999 !important;
|
||
}
|
||
|
||
.comment-sofa {
|
||
padding: 0 30px;
|
||
font-size: 30px;
|
||
text-align: center;
|
||
color: #E4E7ED;
|
||
padding-top: 20px;
|
||
user-select: none;
|
||
}
|
||
|
||
.comment_userinput, .comment-form-cookies-consent {
|
||
padding-left: 80px;
|
||
}
|
||
|
||
.comment-user-plane {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.comment-user-avatar {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.comment_form_must_login {
|
||
height: 150px;
|
||
background: #7474740e;
|
||
border-radius: var(--border-hd);
|
||
text-align: center;
|
||
color: #b1b1b1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.comment_form_must_login {
|
||
text-align: center;
|
||
}
|
||
|
||
.comment_form_must_login button {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#cancel-comment-reply-link {
|
||
background: var(--Maincolor);
|
||
margin-left: 10px;
|
||
color: #fff !important;
|
||
padding: 3px 5px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
#cancel-comment-reply-link:before {
|
||
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
|
||
content: '\f057 ';
|
||
}
|
||
|
||
/**
|
||
侧边工具
|
||
*/
|
||
.textwidget {
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.search-form {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
|
||
.search-form-input-plane {
|
||
flex-grow: 1;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.search-keyword {
|
||
height: 34px;
|
||
font-size: 14px;
|
||
background: #f5f6f7;
|
||
border-radius: var(--border-hd);
|
||
border: none;
|
||
outline: none;
|
||
padding-left: 6px;
|
||
width: 100%;
|
||
}
|
||
|
||
.search-submit {
|
||
background-color: var(--Maincolor);
|
||
color: #fff;
|
||
height: 32px;
|
||
border: none;
|
||
border-radius: var(--border-hd);
|
||
display: inline-block;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
transition-duration: .4s;
|
||
width: 68px;
|
||
outline: none;
|
||
|
||
}
|
||
|
||
.search-submit:hover {
|
||
background: var(--MaincolorHover);
|
||
}
|
||
|
||
/**
|
||
小工具
|
||
*/
|
||
.widger-comment-name, .widger-comment-time {
|
||
margin-left: 10px;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.widger-comment-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.widger-comment-user {
|
||
display: flex;
|
||
}
|
||
|
||
.widger-avatar img {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.widger-comment-excerpt {
|
||
position: relative;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
margin-top: 10px;
|
||
background: #f7f7f7;
|
||
border-radius: 3px;
|
||
color: #666;
|
||
}
|
||
|
||
.widger-comment-excerpt:before {
|
||
position: absolute;
|
||
left: 10px;
|
||
top: -10px;
|
||
content: "";
|
||
width: 0;
|
||
height: 0;
|
||
line-height: 0;
|
||
border: 5px solid transparent;
|
||
border-bottom-color: #f7f7f7;
|
||
}
|
||
|
||
.widger-comment-excerpt p {
|
||
line-height: 1.5;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.widger-comment-plane {
|
||
font-size: 14px;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 10px;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
color: #999;
|
||
}
|
||
|
||
.tagcloud {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.tag-cloud-link {
|
||
background: #409EFF;
|
||
color: #fff !important;
|
||
font-size: 12px !important;
|
||
border-radius: 3px;
|
||
padding: 6px;
|
||
margin-bottom: 2px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
align-content: space-around;
|
||
flex: 0 0 32%;
|
||
margin-right: 1%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.tag-cloud-link:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
|
||
.tag-cloud-link:before {
|
||
content: "# ";
|
||
}
|
||
|
||
.tag-cloud-link:nth-child(n+1) {
|
||
background: #409EFF;
|
||
}
|
||
|
||
.tag-cloud-link:nth-child(2n+2) {
|
||
background: #67C23A;
|
||
}
|
||
|
||
.tag-cloud-link:nth-child(3n+3) {
|
||
background: #F56C6C;
|
||
}
|
||
|
||
.tag-cloud-link:nth-child(n+4) {
|
||
background: #909399;
|
||
}
|
||
|
||
.hot-post-widget-item {
|
||
padding: 10px 20px;
|
||
font-size: 14px;
|
||
position: relative;
|
||
}
|
||
|
||
.hot-post-widget-item-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.hot-post-widget-item-num {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.hot-post-widget-item:nth-child(2) .hot-post-widget-item-num, .hot-post-widget-item:nth-child(3) .hot-post-widget-item-num, .hot-post-widget-item:nth-child(4) .hot-post-widget-item-num {
|
||
background-color: var(--Maincolor);
|
||
border-radius: 2px 8px 8px 2px;
|
||
color: #fff;
|
||
}
|
||
|
||
.hot-post-widget-item:nth-child(2) .hot-post-widget-item-num {
|
||
background-color: #f56c6c;
|
||
}
|
||
|
||
.hot-post-widget-item:nth-child(3) .hot-post-widget-item-num {
|
||
background-color: #ffa41b;
|
||
}
|
||
|
||
.hot-post-widget-item:nth-child(4) .hot-post-widget-item-num {
|
||
background-color: #409eff;
|
||
}
|
||
|
||
.hot-post-widget-item-num {
|
||
padding-right: 5px;
|
||
position: absolute;
|
||
left: -12px;
|
||
text-align: right;
|
||
width: 30px;
|
||
}
|
||
|
||
.hot-post-widget-item-title, .hot-post-widget-item-meta {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.hot-post-widget-item-title a, .hot-post-widget-item-meta a {
|
||
color: #494b4d;
|
||
|
||
}
|
||
|
||
/**
|
||
小工具-作者信息
|
||
*/
|
||
.widget-author-plane {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 10px;
|
||
}
|
||
|
||
.widget-author-main {
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.widget-author-main img {
|
||
border-radius: 50%;
|
||
margin-bottom: 10px;
|
||
|
||
}
|
||
|
||
.widget-avatar-description {
|
||
font-size: 14px;
|
||
color: #8599ab;
|
||
max-width: 150px;
|
||
}
|
||
|
||
.widget-avatar-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 16px;
|
||
color: #999;
|
||
}
|
||
|
||
|
||
.widget-avatar-meta-comments {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.widget-avatar-meta-box i {
|
||
font-size: 18px;
|
||
margin-right: 6px;
|
||
|
||
}
|
||
|
||
.widget-avatar-description, .widget-author-name {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.widget-avatar-post-list {
|
||
border-top: 1px dashed #efefef;
|
||
padding: 10px;
|
||
}
|
||
|
||
.widget-avatar-post-list ul li {
|
||
position: relative;
|
||
}
|
||
|
||
.widget-avatar-post-list ul {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.widget-avatar-post-list ul li:before {
|
||
position: absolute;
|
||
left: -12px;
|
||
top: 8px;
|
||
content: "";
|
||
width: 0;
|
||
height: 0;
|
||
line-height: 0;
|
||
border: 4px solid transparent;
|
||
border-left: 5px solid #ccc;
|
||
}
|
||
|
||
.widget-avatar-title {
|
||
margin-bottom: 6px;
|
||
padding-top: 4px;
|
||
font-size: 15px;
|
||
font-weight: 300;
|
||
}
|
||
|
||
/**
|
||
alert
|
||
*/
|
||
.corepress-alert {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 9999999999;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.corepress-alert-main {
|
||
margin-top: -10px;
|
||
font-size: 14px;
|
||
transition: all 0.3s;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
pointer-events: all;
|
||
padding: 8px 16px;
|
||
border-radius: var(--border-hd);
|
||
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
|
||
background: #fff;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.corepress-alert-main i {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.corepress-alert-main-show {
|
||
margin-top: 70px;
|
||
visibility: visible;
|
||
opacity: 1;
|
||
}
|
||
|
||
/**
|
||
友情链接
|
||
*/
|
||
.frinds-links {
|
||
position: relative;
|
||
background: #fff;
|
||
border-radius: var(--border-hd);
|
||
margin: 10px;
|
||
margin-bottom: 20px;
|
||
border: var(--border-box);
|
||
}
|
||
|
||
.list-plane-linksdescribe {
|
||
margin-left: 10px;
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
|
||
.frinds-links-list a {
|
||
color: #999 !important;
|
||
transition: all 0.3s ease-out 0s;
|
||
}
|
||
|
||
.frinds-links-list img {
|
||
max-width: 20px !important;
|
||
}
|
||
|
||
.frinds-links-list a:hover {
|
||
color: var(--MaincolorHover) !important;
|
||
}
|
||
|
||
.frinds-links li {
|
||
font-size: 15px;
|
||
list-style: none;
|
||
margin-right: 20px;
|
||
margin-bottom: 6px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.frinds-links-icon {
|
||
max-width: 20px;
|
||
}
|
||
|
||
.list-plane-title {
|
||
background: #fff;
|
||
padding: 19px 8px;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
white-space: nowrap;
|
||
overflow: auto;
|
||
}
|
||
|
||
.list-plane-title::-webkit-scrollbar {
|
||
display: none
|
||
}
|
||
|
||
.list-plane-title > div {
|
||
padding-left: 20px;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.frinds-links-list {
|
||
padding: 20px;
|
||
margin: 0 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.frinds-links-apply {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 20px;
|
||
color: #999 !important;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/**
|
||
小工具
|
||
*/
|
||
.go-top-plane {
|
||
background: #e8eaeb;
|
||
position: fixed;
|
||
bottom: 80px;
|
||
right: 20px;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transition: .30s;
|
||
color: #999999;
|
||
z-index: 99;
|
||
}
|
||
|
||
.go-top-plane:hover {
|
||
color: var(--MaincolorHover);
|
||
}
|
||
|
||
.go-top-plane-show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
bottom: 200px;
|
||
}
|
||
|
||
.ad-plane {
|
||
position: relative;
|
||
margin: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.ad-plane img, .ad-plane-post img, .ad-plane-post-in img, .ad-plane-post-comment img, .ad-plane-post-bottom img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.ad-plane-post {
|
||
padding: 10px;
|
||
margin-top: -20px;
|
||
}
|
||
|
||
.ad-plane-post-bottom {
|
||
padding: 10px;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.ad-plane-post-comment {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
#progress {
|
||
position: fixed;
|
||
height: 2px;
|
||
background: #b91f1f;
|
||
transition: opacity 500ms linear;
|
||
z-index: 99999;
|
||
}
|
||
|
||
#progress.done {
|
||
opacity: 0
|
||
}
|
||
|
||
#progress span {
|
||
position: absolute;
|
||
height: 2px;
|
||
opacity: 1;
|
||
width: 150px;
|
||
right: -10px;
|
||
}
|
||
|
||
@-webkit-keyframes pulse {
|
||
30% {
|
||
opacity: .6
|
||
}
|
||
60% {
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
opacity: .6
|
||
}
|
||
}
|
||
|
||
/**
|
||
手型
|
||
*/
|
||
.index-tab-item, .button {
|
||
cursor: pointer;
|
||
} |