:root {
--theme: #333;
--theme-op-3: rgba(255 255 255 / .3);
--post-cover: #00000000;
--scroll: rgba(0 0 0 / .2);
--title-color: rgba(0 0 0 / .1);
--menu-hover: #f5f5f5;
--social-hover: #fff;
--theme-bak: #333;
--code-bgc: rgba(0 0 0 / .05);
--tr3: .3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
-webkit-tap-highlight-color: rgba(0 0 0 / 0);
-webkit-text-size-adjust: none;
}
html {
background-color: #fff;
} 
body {
background-color: #f5f6f7;
height: 100%;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
}
.container {
width: 1400px;
height: 100%;
margin: 0 auto;
background-color: #fff;
display: flex;
border-left: 1px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
user-select: none;
}
::-moz-selection {
background-color: var(--theme); 
color: #fff;
}
::-webkit-selection {
background-color: var(--theme); 
color: #fff;
}
::selection {
background-color: var(--theme); 
color: #fff;
}
.home *,
.search *,
.category *,
.tag *,
.archive *,
.link *,
.note *,
.single * {
-webkit-transition: all var(--tr3), height 0s;
transition: all var(--tr3), height 0s;
}
.single article {
scroll-padding-top: 20px; } header {
width: 100px;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #e2e2e2;
background-color: #fff;
z-index: 1000;
}
header .logo {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
}
header .logo a {
display: block;
width: 50px;
height: 50px;
}
header .logo a img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
}
header .menu ul li a {
display: block;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
font-size: 15px;
color: #333;
position: relative;
}
header .menu ul li a:hover {
background-color: var(--menu-hover);
}
header .menu ul li a > * {
color: #333;
font-size: 24px;
}
header .menu ul li {
margin-bottom: 30px;
}
header .menu ul li:last-child {
margin-bottom: 0;
}
header .menu ul li.current-menu-item a,
header .menu ul li.current-menu-item a:hover {
color: #fff;
background-color: #333;
box-shadow: 0 2px 20px 0 rgba(0 0 0 / .2);
}
header .menu ul li.current-menu-item a > * {
color: #fff;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
}
header .menu .menu-item-has-children ul {
display: none;
}
header .menu ul li a .menu-item-title {
display: block;
position: absolute;
font-size: 14px;
color: #fff;
left: calc(100% + 10px);
transform: translateX(-5px);
opacity: 0;
visibility: hidden;
white-space: nowrap;
padding: 5px 12px;
border-radius: 6px;
background-color: rgba(0 0 0 / .5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
pointer-events: none;
z-index: 1;
}
header .menu ul li a:hover .menu-item-title {
transform: translateX(0);
opacity: 1;
visibility: visible;
} main {
width: calc(100% - 100px);
position: relative;
}
main .nav {
height: 90px;
width: 100%;
border-bottom: 1px solid #e2e2e2;
background-color: #fff;
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 25px;
z-index: 998;
}
main .nav .left {
display: flex;
align-items: center;
}
main .nav .left .menu-btn,
main .nav .left .search-btn {
margin-right: 20px;
display: none;
}
main .nav .left .menu-btn span,
main .nav .left .search-btn span {
font-size: 24px;
color: #333;
cursor: pointer;
}
main .nav .left .menu-btn {
margin-top: 2px;
}
main .nav .search-box {
width: 500px;
height: 40px;
position: relative;
display: flex;
align-items: center;
}
main .nav .search-box label {
font-size: 20px;
color: #999999;
position: absolute;
left: 15px;
}
main .nav .search-box input {
outline: 0;
width: 100%;
height: 100%;
border-radius: 30px;
border: 1px solid transparent;
padding: 0 20px 0 40px;
font-size: 14px;
color: #333;
background-color: #f5f5f5;
}
.search-m {
display: none;
position: fixed;
top: 70px;
transform: translateY(-80px);
z-index: 999;
background-color: #fff;
width: 100%;
height: auto;
border-bottom: 1px solid #e2e2e2;
padding: 0 25px 25px 25px;
box-shadow: 0 0 10px rgba(0 0 0 / .05);
}
.search-m.active {
transform: translateY(0);
}
.search-m form {
width: 100%;
height: 40px;
}
.search-m form input {
border: none;
outline: 0;
width: 100%;
height: 100%;
font-size: 13px;
padding: 0 15px;
color: #333;
background-color: #f5f5f5;
border-radius: 50px;
border: 1px solid transparent;
}
main .nav .search-box input:hover,
main .nav .search-box input:focus,
.search-m form input:hover,
.search-m form input:focus {
border: 1px solid var(--scroll);
}
main .nav .search-box input:focus,
.search-m form input:focus {
background-color: var(--code-bgc);
box-shadow: 0 10px 20px 1px var(--menu-hover);
} main .nav .user-menu {
position: relative;
font-size: 0;
}
main .nav .user-menu span {
font-size: 24px;
color: #333;
cursor: pointer;
}
main .nav .user-menu .user-menu-box {
position: absolute;
right: 0;
top: 0;
width: 150px;
margin-top: 35px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
}
main .nav .user-menu .user-menu-box.active {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
main .nav .user-menu .user-menu-box ul {
background-color: #fff;
padding: 10px 0;
box-shadow: 0 2px 20px rgba(0 0 0 / .1) ;
border-radius: 8px;
}
main .nav .user-menu .user-menu-box ul li a {
padding: 7px 20px;
display: flex;
align-items: center;
font-size: 14px;
color: #333;
}
main .nav .user-menu .user-menu-box ul li a:hover {
background-color: var(--menu-hover);
}
main .nav .user-menu .user-menu-box ul li a i {
margin-right: 5px;
}
main .nav .user-menu .user-menu-box ul li .logout {
color: #dd2424;
}
main .nav .user-menu .user-menu-box ul li .logout:hover {
background-color: #dd24240d;
}
main .nav .user-menu #aside-btn {
display: none;
}
main .nav .user-menu .backtop {
visibility: hidden;
opacity: 0;
}
main .nav .user-menu .backtop.active {
visibility: visible;
opacity: 1;
}
main .nav .user-menu > span {
margin-left: 20px;
} main .content {
height: calc(100vh - 90px);
word-break: break-all;
display: flex;
}
main .content article {
width: calc(100% - 300px);
height: 100%;
padding: 25px;
position: relative;
background-color: #fff;
}
main .content article .bottom {
position: relative;
} main .content article,
main .content aside .aside-content .aside-page {
overflow: auto;
overflow: overlay;
}
main .content article::-webkit-scrollbar,
main .content aside .aside-content .aside-page::-webkit-scrollbar {
width: 6px;
height: 0;
}
main .content article:hover::-webkit-scrollbar-thumb,
main .content aside .aside-content .aside-page:hover::-webkit-scrollbar-thumb {
background: var(--scroll);
border-radius: 6px;
}
main .content aside .aside-content {
overflow: hidden;
} .home article .top {
padding-bottom: 20px;
margin-bottom: 25px;
border-bottom: 1px dashed #e2e2e2;
overflow: hidden;
}
.home article .top .regular {
margin-bottom: 10px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 25px;
position: relative;
}
.home article .top .regular .regular-box a {
width: 100%;
height: 180px;
display: block;
border-radius: 8px;
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
.home article .top .regular .regular-box a::before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top,rgba(0 0 0 / .3),rgba(0 0 0 / .05));
}
.home article .top .regular .regular-box a .regular-post-info {
color: #fff;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
position: absolute;
bottom: 0;
padding: 0 20px 20px 20px;
}
.home article .top .regular .regular-box a img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
}
.home article .top .regular .regular-box h2 {
font-size: 14px;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.home article .top .regular .regular-box h2:hover {
text-decoration: underline;
}
.home article .top .regular .regular-box p {
font-size: 13px;
color: #999;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 4px;
} .home article .top .swiper {
width: 100%;
height: 250px;
padding: 10px 0 40px 0;
position: relative;
}
.home article .top .swiper-slide {
background-color: #fff; border-radius: 8px;
transform: scale(0.8);
transition: all 0s;
user-select: none;
}
.home article .top .swiper-slide-active,
.home article .top .swiper-slide-duplicate-active {
transform: scale(1);
}
.home article .top .swiper-pagination-bullet-active {
background-color: #333;
}
.home article .top .swiper-button-prev,
.home article .top .swiper-button-next {
background-color: rgba(0 0 0 / .2);
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
visibility: hidden;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top: -15px;
}
.home article .top .swiper-button-prev::after,
.home article .top .swiper-button-next::after {
font-size: 12px;
padding-top: 1px;
}
.home article .top .swiper-button-prev::after {
padding-right: 2px;
}
.home article .top .swiper-button-next::after {
padding-left: 2px;
}
.home article .top .swiper-button-prev { }
.home article .top .swiper-button-next { }
.home article .top .swiper:hover .swiper-button-prev,
.home article .top .swiper:hover .swiper-button-next {
visibility: visible;
opacity: 1;
}
.home article .top .swiper-slide a {
display: block;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.home article .top .swiper-slide a::before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top,rgba(0 0 0 / .3),rgba(0 0 0 / .05));
}
.home article .top .swiper-slide a img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
border-radius: 8px;
}
.home article .top .swiper-slide a .swiper-post-info {
color: #fff;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
position: absolute;
left: 0;
bottom: 0;
padding: 0 20px 20px 20px;
}
.home article .top .swiper-slide a .swiper-post-info h2 {
font-size: 15px;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.home article .top .swiper-slide a .swiper-post-info h2:hover  {
text-decoration: underline;
}
.home main .content article .bottom .recommend-bar {
margin-bottom: 25px;
overflow: auto; }
.home main .content article .bottom .recommend-bar::-webkit-scrollbar {
width: 0;
height: 0;
}
.home main .content article .bottom .recommend-bar ul {
display: flex;
position: relative;
}
.home main .content article .bottom .recommend-bar ul .slider {
height: 100%;
border-radius: 6px;
background-color: #333;
position: absolute;
left: 0;
z-index: 1;
}
.home main .content article .bottom .recommend-bar ul li {
margin-right: 20px;
white-space: nowrap;
z-index: 2;
}
.home main .content article .bottom .recommend-bar ul li:last-child {
margin-right: 0;
}
.home main .content article .bottom .recommend-bar ul li a {
display: block;
color: #333;
padding: 6px 15px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
user-select: none;
}
.home main .content article .bottom .recommend-bar ul li a i,
.home main .content article .bottom .recommend-bar ul li a i::before {
font-size: 14px;
transition: all 0s !important;
}
.home main .content article .bottom .recommend-bar ul li a.active {
color: #fff;
}
.home main .content article .bottom .post-part {
display: none;
}
.home main .content article .bottom .post-part.active {
display: block;
}
.home main .content article .bottom .post-part ul li {
display: flex;
margin-bottom: 25px;
transition: all 0s !important;
padding-bottom: 25px;
border-bottom: 1px dashed #e2e2e2;
}
.home main .content article .bottom .post-part ul li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.home main .content article .bottom .post-part ul li .left {
width: 260px;
height: 170px;
position: relative;
margin-right: 20px;
overflow: hidden;
}
.home main .content article .bottom .post-part ul li .left a.cover {
display: block;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
}
.home main .content article .bottom .post-part ul li .left a.cover img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
}
.home main .content article .bottom .post-part ul li .left .cate-view {
max-width: calc(100% - 20px);
position: absolute;
top: 0;
left: 10px;
padding: 3px 10px;
background-color: rgba(255 255 255 / .7);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: 4px;
box-shadow: 0 0 10px rgb(0 0 0 / 5%);
transform: translateY(-100%);
opacity: 0;
color: #999;
font-size: 14px;
cursor: default;
}
.home main .content article .bottom .post-part ul li .left .cate-view a {
color: #333;
font-size: 14px;
}
.home main .content article .bottom .post-part ul li .left .cate-view a:hover {
text-decoration: underline;
}
.home main .content article .bottom .post-part ul li .left a.cover:hover ~ .cate-view,
.home main .content article .bottom .post-part ul li .left .cate-view:hover {
transform: translateY(10px);
opacity: 1;
}
.home main .content article .bottom .post-part ul li .left .cate-view:hover {
background-color: #fff;
}
.home main .content article .bottom .post-part ul li .right {
width: calc(100% - 280px);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2px 0;
}
.home main .content article .bottom .post-part ul li .right .text .title {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 12px;
}
.home main .content article .bottom .post-part ul li .right .text .title a {
color: #333;
font-size: 18px;
font-weight: 700;  }
.home main .content article .bottom .post-part ul li .right .text .title a:hover { box-shadow: inset 0 -0.55em #e2e2e2;
}
.home main .content article .bottom .post-part ul li .right .text p {
color: #999;
font-size: 14px;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.home main .content article .bottom .post-part ul li .right .post-info {
display: flex;
justify-content: space-between;
}
.home main .content article .bottom .post-part ul li .right .post-info .time {
display: flex;
align-items: center;
}
.home main .content article .bottom .post-part ul li .right .post-info .time i {
font-size: 14px;
color: #999;
margin-right: 5px;
}
.home main .content article .bottom .post-part ul li .right .post-info .time span {
font-size: 14px;
color: #999;
line-height: 1em;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more a {
display: flex;
align-items: center;
padding: 0 10px 0 13px;
height: 30px;
border-radius: 4px;
position: relative;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more a:hover { }
.home main .content article .bottom .post-part ul li .right .post-info .read-more a::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 30px;
background: #ddd;
width: 30px;
height: 100%;
transition: all var(--tr3);
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more a:hover::before {
width: 100%;
background: #f2f2f2;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more span {
font-size: 14px;
color: #333;
margin-right: 3px;
z-index: 1;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more i {
font-size: 15px;
color: #333;
z-index: 1;
} .pagination,
.no-more-post {
padding-top: 25px;
}
aside .pagination,
aside .no-more-post {
padding-top: 0;
}
.pagination a,
.no-more-post a {
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
padding: 10px 0;
}
.pagination a,
.pagination a i,
.no-more-post a,
.no-more-post a i {
color: #999;
font-size: 14px;
}
.pagination a i,
.no-more-post a i {
margin-right: 5px;
}
.no-more-post a,
.no-more-post a i,
.no-more-post a:hover,
.no-more-post a:hover i {
background-color: transparent !important;
color: #999 !important;
}
.pagination a:hover,
.pagination a:hover i {
background-color: #f5f5f5;
color: #333;
} main .content aside {
width: 300px;
height: 100%;
border-left: 1px solid #e2e2e2;
background-color: #fff;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 997;
overflow: hidden;
}
main .content aside .aside-content,
main .content aside .aside-content .aside-page {
height: 100%;
}
main .content aside .author {
position: relative;
}
main .content aside .author .cover {
width: 100%;
height: 170px;
}
main .content aside .author .cover img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
pointer-events: none;
}
main .content aside .author .author-info {
width: 100%;
margin-top: -40px;
padding: 25px;
padding-top: 0;
}
main .content aside .author .author-info .avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 10px auto;
box-shadow: 0 0 8px rgb(28 31 35 / 4%), 0 0 24px 8px rgb(28 31 35 / 6%);
}
main .content aside .author .author-info img {
width: 100%;
height: 100%;
border-radius: 50%;
vertical-align: middle;
object-fit: cover;
pointer-events: none;
border: 2px solid #fff;
}
main .content aside .author .author-info .name {
text-align: center;
font-size: 16px;
font-weight: 700;
color: #333;
margin-bottom: 5px;
}
main .content aside .author .author-info .des {
font-size: 13px;
color: #999;
margin-bottom: 20px;
text-align: center;
}
main .content aside .author .post-info {
background-color: #f5f5f5;
border-radius: 8px;
display: flex;
justify-content: space-between;
padding: 10px 30px;
}
main .content aside .author .post-info div {
display: flex;
flex-direction: column;
align-items: center;
}
main .content aside .author .post-info i {
font-style: normal;
color: #999;
font-size: 13px;
margin-bottom: 5px;
}
main .content aside .author .post-info span {
font-size: 18px;
font-weight: 700;
color: #333;
} main .content aside .toc {
padding: 0 25px;
margin-bottom: 25px;
}
main .content aside .toc h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .toc h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .toc ul {
background-color: #f5f5f5;
border-radius: 8px;
padding: 8px;
}
main .content aside .toc ul li {
margin-bottom: 4px;
}
main .content aside .toc ul li:last-child {
margin-bottom: 0;
}
main .content aside .toc ul li a {
display: block;
padding: 5px 8px;
border-radius: 5px;
font-size: 14px;
color: #333;
}
main .content aside .toc ul li a:hover {
color: var(--theme-bak);
background-color: var(--code-bgc);
}
main .content aside .toc ul li[id='H3'] a {
padding-left: 15px;
font-size: 13px;
} main .content aside .aside-content {
width: 200%;
transform: translateX(0);
display: flex;
position: relative;
}
main .content aside .aside-content.active {
transform: translateX(-50%);
}
main .content aside .aside-content .aside-page { width: 100%;
}
main .content aside .aside-content .aside-page.active {
opacity: 1;
}
main .content aside .aside-content .aside-btn-open,
main .content aside .aside-content .aside-btn-close {
position: absolute;
top: 10px;
border-radius:  5px;
color: var(--theme-bak);
background-color: rgba(255 255 255 / .5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 0 10px rgba(0 0 0 / .1);
font-size: 14px;
cursor: pointer;
user-select: none;
display: flex;
align-items: center; }
main .content aside .aside-content .aside-btn-open {
right: 10px;
padding: 4px 8px 4px 14px;
}
main .content aside .aside-content .aside-btn-close {
left: 10px;
padding: 4px 14px 4px 8px;
}
main .content aside .aside-content .aside-btn-open:hover,
main .content aside .aside-content .aside-btn-close:hover {
background-color: rgba(255 255 255 / .7);
box-shadow: 0 0 20px rgba(0 0 0 / .1);
}
main .content aside .sub-page .author {
margin-bottom: 25px;
}
main .content aside .author .author-info-sub {
width: 100%;
padding: 20px;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
}
main .content aside .sub-page .cover::before {
content: '';
display: block;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(0 0 0 / .5), rgba(0 0 0 / 0));
}
main .content aside .author .author-info-sub .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 15px;
border: 2px solid #fff;
overflow: hidden;
}
main .content aside .author .author-info-sub img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
pointer-events: none;
}
main .content aside .author .author-info-sub .author-name {
width: calc(100% - 75px);
}
main .content aside .author .author-info-sub .name {
font-size: 16px;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
main .content aside .author .author-info-sub .des {
font-size: 13px;
color: #eee;
margin-bottom: 3px;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
} main .content aside .sub-page .menu_sidebar_box {
padding: 25px;
padding-top: 0;
}
main .content aside .sub-page .menu_sidebar_box h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .sub-page .menu_sidebar_box h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .sub-page .menu_sidebar > ul > .menu-item-has-children > ul > .menu-item-has-children > ul {
display: none;
}
main .content aside .sub-page .menu_sidebar ul li {
}
main .content aside .sub-page .menu_sidebar > ul > li {
margin-bottom: 5px;
}
main .content aside .sub-page .menu_sidebar > ul > li:last-child {
margin-bottom: 0;
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children {
overflow: hidden;
transition: all var(--tr3);
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > a {
display: flex;
align-items: center;
justify-content: space-between;
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > a > .arrow.active {
transform: rotate(-90deg);
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > ul {
background-color: var(--code-bgc);
padding: 8px;
margin-top: 5px;
border-radius: 5px;
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > ul.active {
padding: 5px;
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > ul > li {
margin-bottom: 5px;
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > ul > li:last-child {
margin-bottom: 0;
}
main .content aside .sub-page .menu_sidebar ul li a {
display: block;
padding: 5px 10px;
border-radius: 5px; }
main .content aside .sub-page .menu_sidebar ul li a,
main .content aside .sub-page .menu_sidebar ul li a * {
font-size: 14px;
color: #333;
}
main .content aside .sub-page .menu_sidebar ul li a:hover {
color: var(--theme-bak);
background-color: var(--code-bgc);
}
main .content aside .sub-page .menu_sidebar ul li a:hover * {
color: var(--theme-bak);
} main .content aside .sub-page .new-comments {
padding: 25px;
padding-top: 0;
}
main .content aside .sub-page .new-comments h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .sub-page .new-comments h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .sub-page .new-comments ul > p,
main .content aside .sub-page .new-comments ul > p i {
font-size: 12px;
color: #999;
}
main .content aside .sub-page .new-comments ul > p {
display: flex;
align-items: center;
justify-content: center;
}
main .content aside .sub-page .new-comments ul > p i {
margin-right: 3px;
}
main .content aside .sub-page .new-comments ul li {
width: 100%;
padding: 10px;
background-color: #f5f5f5;
border-radius: 8px;
margin-bottom: 15px;
}
main .content aside .sub-page .new-comments ul li:last-child {
margin-bottom: 0;
}
main .content aside .sub-page .new-comments ul li .top {
display: flex;
align-items: center;
}
main .content aside .sub-page .new-comments ul li .avatar {
width: 40px;
height: 40px;
margin-right: 10px;
overflow: hidden;
}
main .content aside .sub-page .new-comments ul li .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: middle;
border-radius: 6px;
}
main .content aside .sub-page .new-comments ul li .user {
max-width: calc(100% - 50px);
}
main .content aside .sub-page .new-comments ul li .user .name {
font-size: 13px;
margin-bottom: 3px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
main .content aside .sub-page .new-comments ul li .user .name a {
color: #333;
transition: all var(--tr3);
}
main .content aside .sub-page .new-comments ul li .user .name a:hover {
color: var(--theme);
}
main .content aside .sub-page .new-comments ul li .user .rdate,
main .content aside .sub-page .new-comments ul li .user .rdate i {
font-size: 12px;
color: #999;
}
main .content aside .sub-page .new-comments ul li .user .rdate {
display: flex;
align-items: center;
}
main .content aside .sub-page .new-comments ul li .user .rdate i {
margin-right: 2px;
}
main .content aside .sub-page .new-comments ul li .text {
border-radius: 4px;
margin-top: 8px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
cursor: default;
}
main .content aside .sub-page .new-comments ul li .text,
main .content aside .sub-page .new-comments ul li .text a,
main .content aside .sub-page .new-comments ul li .text .at {
font-size: 13px;
color: #999;
}
main .content aside .sub-page .new-comments ul li .text a:hover {
color: var(--theme-bak);
}
main .content aside .sub-page .new-comments ul li .text .at {
color: var(--theme-bak);
font-style: italic;
user-select: none;
margin-right: 5px;
cursor: default;
}
main .content aside .sub-page .new-comments ul li .text .at:hover {
text-decoration: underline;
} main .content aside .sub-page .about {
padding: 25px;
padding-top: 0;
}
main .content aside .sub-page .about h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .sub-page .about h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .sub-page .about p {
font-size: 14px;
color: #333;
white-space: pre-wrap;
}
main .content aside .sub-page .about p * {
max-width: 100%;
}
main .content aside .sub-page .about p a {
color: #333;
text-decoration: underline;
}
main .content aside .sub-page .about p img,
main .content aside .sub-page .about p video {
border-radius: 5px;
} main .content aside .social {
padding: 0 25px;
margin-bottom: 25px;
}
main .content aside .social h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .social h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .social .social-content {
background-color: #f5f5f5;
border-radius: 8px;
padding: 10px;
}
main .content aside .social .social-content ul {
display: flex; overflow: auto;
}
main .content aside .social .social-content ul::-webkit-scrollbar {
width: 0;
height: 0;
}
main .content aside .social .social-content ul li a {
display: flex;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
border-radius: 6px;
margin-right: 5px;
}
main .content aside .social .social-content ul li:last-child a {
margin-right: 0;
}
main .content aside .social .social-content ul li a:hover {
background-color: var(--social-hover);
box-shadow: 0 0 10px rgba(0 0 0 / .05);
}
main .content aside .social .social-content ul li a > * {
font-size: 24px;
color: #333;
} main .content aside .notes-box {
padding: 0 25px 25px 25px;
}
main .content aside .notes-box > h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .notes-box > h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .notes-box ul li {
background-color: #f5f5f5;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}
main .content aside .notes-box ul li .notes-content {
margin-bottom: 10px;
max-height: 200px;
overflow: hidden;
position: relative;
}
main .content aside .notes-box ul li .notes-content::before {
content: '';
display: block;
width: 100%;
height: 30px;
position: absolute;
top: 170px;
left: 0;
background: linear-gradient(to top, #f5f5f5, rgba(0 0 0 / 0));
z-index: 1;
}
main .content aside .notes-box ul li .view-detail {
text-align: center;
}
main .content aside .notes-box ul li .view-detail a {
display: block;
font-size: 12px;
color: #999;
background-color: rgba(0 0 0 / .05);
padding: 4px 0;
border-radius: 6px;
margin-top: 10px;
}
main .content aside .notes-box ul li .view-detail a:hover {
color: var(--theme-bak);
background-color: var(--code-bgc);
}
main .content aside .notes-box ul li .notes-info {
display: flex;
justify-content: space-between;
align-items: center;
}
main .content aside .notes-box ul li .notes-info .time,
main .content aside .notes-box ul li .notes-info .new {
display: flex;
}
main .content aside .notes-box ul li .notes-info .time span::before,
main .content aside .notes-box ul li .notes-info .new span::before {
font-size: 12px;
color: #999;
margin-right: 2px;
}
main .content aside .notes-box ul li .notes-info .time span,
main .content aside .notes-box ul li .notes-info .new span {
font-size: 12px;
color: #999;
}
main .content aside .notes-box ul li .notes-info .time span::before {
content: '\e6ab';
font-family: 'iconfont';
}
main .content aside .notes-box ul li .notes-info .new span::before {
content: '\e6a1';
font-family: 'iconfont';
}
main .content aside .notes-box ul li .notes-info .new span::before,
main .content aside .notes-box ul li .notes-info .new span {
color: var(--theme-bak);
} main .content .notes-content * {
margin-bottom: 5px;
font-size: 13px;
color: #333;
line-height: 1.5;
}
main .content .notes-content *:last-child {
margin-bottom: 0;
}
main .content .notes-content a {
color: var(--theme-bak);
text-decoration: underline;
}
main .content .notes-content h1 {
font-size: 17px;
color: #333;
position: relative;
}
main .content .notes-content h2 {
font-size: 16px;
color: #333;
position: relative;
}
main .content .notes-content h3 {
font-size: 15px;
color: #333;
position: relative;
}
main .content .notes-content h4 {
font-size: 14px;
color: #333;
position: relative;
}
main .content .notes-content h5 {
font-size: 13px;
color: #333;
position: relative;
}
main .content .notes-content h6 {
font-size: 12px;
color: #333;
position: relative;
}
main .content .notes-content pre {
display: inline-block; white-space: pre-wrap;
word-wrap: break-word;
border-radius: 6px;
background-color: var(--code-bgc);
color: var(--theme-bak);
font-size: 12px;
padding: 2px 8px;
font-family: 'PingFang SC','Consolas','Courier New';
}
main .content .notes-content img,
main .content .notes-content video {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 0;
vertical-align: middle;
}
main .content .notes-content .wp-video {
width: 100% !important;
}
main .content .notes-content ul, 
main .content .notes-content ol {
margin-left: 30px;
}
main .content .notes-content ul li, 
main .content .notes-content ol li { width: calc(100% - 30px);
word-break: break-all;
word-wrap: break-word;
padding: 0;
}
main .content .notes-content ul li {
list-style: disc;
}
main .content .notes-content ol li {
list-style: auto;
} .pagination-aside a,
.no-more-note a {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #999;
border-radius: 8px;
padding: 8px 0;
}
.pagination-aside a i,
.no-more-note a i {
font-size: 12px;
color: #999;
margin-right: 3px;
}
.pagination-aside a:hover,
.pagination-aside a:hover i {
background-color: #f5f5f5;
color: #333;
} .note main .content article .note-page li {
border-radius: 8px;
background-color: #f5f5f5;
margin-bottom: 25px;
padding: 15px;
overflow: hidden;
}
.note main .content article .note-page li:last-child {
margin-bottom: 0;
}
.note main .content article .note-page li .top {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.note main .content article .note-page li .top .left {
width: 50px;
height: 50px;
margin-right: 15px;
}
.note main .content article .note-page li .top .left img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
vertical-align: middle;
pointer-events: none;
}
.note main .content article .note-page li .top .right {
width: calc(100% - 65px);
}
.note main .content article .note-page li .top .right .note-author {
font-size: 15px;
font-weight: 700;
color: #333;
margin-bottom: 5px;
}
.note main .content article .note-page li .top .right .note-date {
font-size: 13px;
font-weight: 400;
color: #999;
}
.note main .content article .note-page li .center {
margin-bottom: 15px;
}
.note main .content article .note-page li .bottom {
display: flex;
justify-content: right;
}
.note main .content article .note-page li .bottom a {
display: inline-block;
padding: 5px 10px;
border-radius: 6px;
}
.note main .content article .note-page li .bottom a i {
margin-right: 3px;
}
.note main .content article .note-page li .bottom a,
.note main .content article .note-page li .bottom a i {
font-weight: 400;
font-size: 13px;
color: #999;
}
.note main .content article .note-page li .bottom a:hover {
color: #333;
background-color: rgba(0 0 0 / .05);
}
.note main .content article .note-page li .bottom a:hover i {
color: #333;
} footer {
position: sticky;
bottom: 0;
width: 100%;
padding: 15px 25px;
background-color: #fff;
border-top: 1px solid #e2e2e2;
} footer .copyright a,
footer .copyright {
font-size: 13px;
color: #999;
}
footer .copyright > * {
margin-bottom: 5px;
}
footer .copyright > *:last-child {
margin-bottom: 0;
}
footer .copyright a:hover {
color: var(--theme);
}
footer .copyright p {
text-align: center;
} .single main .content article {
padding: 0;
z-index: 1;
}
.single main .content article .post-cover {
width: 100%;
height: 350px;
position: relative; }
.single main .content article .post-cover .cover {
width: 100%;
height: 100%;
}
.single main .content article .post-cover .cover::before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top, var(--post-cover), rgba(0 0 0 / 0));
z-index: 1;
}
.single main .content article .post-cover .cover::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(0 0 0 / .5), rgba(0 0 0 / 0));
z-index: 2;
}
.single main .content article .post-cover .cover img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
pointer-events: none;
}
.single main .content article .post-cover .cover .get_img_url,
.single main .content article .post-cover .cover .thumbnail_loading {
object-fit: contain;
position: absolute;
top: 0;
}
.single main .content article .post-cover .shortcuts {
position: absolute;
top: 25px;
right: 25px;
z-index: 3;
display: flex;
align-items: center;
}
.single main .content article .post-cover .shortcuts a {
display: flex;
align-items: center;
color: #fff;
background-color: var(--scroll);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
text-shadow: 0 0 5px rgba(0 0 0 / .2);
padding: 5px 15px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
user-select: none;
margin-left: 10px;
}
.single main .content article .post-cover .shortcuts a i {
font-size: 14px;
margin-right: 3px;
}
.single main .content article .post-cover .shortcuts a:hover {
background-color: var(--theme);
}
.single main .content article .post-cover .post-info {
width: 100%;
position: absolute;
bottom: 0;
padding: 0 25px 25px 25px;
z-index: 3;
}
.single main .content article .post-cover .post-info .title {
font-size: 28px;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.single main .content article .post-cover .post-info .title h2 {
display: inline;
font-size: 28px;
font-weight: 700;
color: #fff;
}
.single main .content article .post-cover .post-info .more {
display: flex;
align-items: center;
white-space: nowrap;
overflow: auto;
}
.single main .content article .post-cover .post-info .more::-webkit-scrollbar {
width: 0;
height: 0;
}
.single main .content article .post-cover .post-info .more div {
margin-left: 15px;
display: flex;
align-items: center;
}
.single main .content article .post-cover .post-info .more .time {
display: flex;
align-items: center;
color: #fff;
margin-left: 0;
}
.single main .content article .post-cover .post-info .more .time i {
font-size: 15px;
margin-right: 5px;
}
.single main .content article .post-cover .post-info .more .time span {
font-size: 14px;
}
.single main .content article .post-cover .post-info .more .cate a {
display: flex;
align-items: center;
color: #fff;
padding: 4px 10px;
margin-right: 5px;
border-radius: 6px;
font-size: 14px;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
}
.single main .content article .post-cover .post-info .more .cate a:last-child {
margin-right: 0;
}
.single main .content article .post-cover .post-info .more .cate a:hover {
background-color: var(--theme-op-3);
color: #fff;
}
.single main .content article .post-cover .post-info .more .cate a::before {
content: '\e6b6';
font-family: 'iconfont';
margin-right: 5px;
font-size: 14px;
}
.single main .content article .post-cover .post-info .more .tag {
cursor: default;
}
.single main .content article .post-cover .post-info .more .tag a {
display: block;
color: #fff;
padding: 4px 10px;
margin-right: 5px;
border-radius: 6px;
font-size: 14px;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
}
.single main .content article .post-cover .post-info .more .tag a:last-child {
margin-right: 0;
}
.single main .content article .post-cover .post-info .more .tag a:hover {
background-color: var(--theme-op-3);
color: #fff;
}
.single main .content article .post-cover .post-info .more .tag a::before {
content: '#';
font-size: 14px;
} .single main .content article .post-content {
padding: 30px 25px;
} .home main .content article > h2,
.category main .content article .categories > h2,
.tag main .content article > h2,
.archive main .content article > h2,
.search main .content article h2,
.note main .content article > h2,
.link main .content article > h2 {
font-size: 28px;
color: #333;
margin-bottom: 20px;
}
.home main .content article > h2 span,
.category main .content article .categories > h2 span,
.tag main .content article > h2 span,
.archive main .content article > h2 span,
.search main .content article h2 span,
.note main .content article > h2 span,
.link main .content article > h2 span {
font-weight: 400;
font-size: 14px;
color: #999;
}
.category main .content article .categories,
.tag main .content article .tag-bar {
margin-bottom: 15px;
}
.category main .content article .categories ul,
.tag main .content article .tag-bar ul {
display: flex;
overflow: auto;
position: relative;
padding-bottom: 10px;
}
.category main .content article .categories ul .slider,
.tag main .content article .tag-bar ul .slider {
height: calc(100% - 10px);
border-radius: 6px;
background-color: #333;
position: absolute;
left: 0;
z-index: 1;
}
.category main .content article .categories ul::-webkit-scrollbar,
.tag main .content article .tag-bar ul::-webkit-scrollbar {
width: 0;
height: 0;
}
.tag main .content article .tag-bar ul li,
.category main .content article .categories ul li {
margin-right: 10px;
white-space: nowrap;
z-index: 2;
}
.category main .content article .categories ul li .children {
display: none;
}
.category main .content article .categories ul li:last-child,
.tag main .content article .tag-bar ul li:last-child {
margin-right: 0;
}
.category main .content article .categories ul li a,
.tag main .content article .tag-bar ul li a {
display: block;
color: #333;
padding: 6px 15px;
border-radius: 6px;
font-size: 14px;
user-select: none;
}
.category main .content article .categories ul li a:hover,
.tag main .content article .tag-bar ul li a:hover { }
.category main .content article .categories ul li a.active:hover,
.tag main .content article .tag-bar ul li a.active:hover { }
.category main .content article .categories ul li a.active,
.tag main .content article .tag-bar ul li a.active {
color: #fff;
}
.category main .content article .cate-box ul,
.tag main .content article .tag-box ul,
.search main .content article .search-box ul {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
}
.category main .content article .cate-box ul li,
.tag main .content article .tag-box ul li,
.search main .content article .search-box ul li {
display: flex;
width: 100%;
}
.category main .content article .cate-box ul li .left,
.tag main .content article .tag-box ul li .left,
.search main .content article .search-box ul li .left {
width: 150px;
height: 100px;
border-radius: 6px;
overflow: hidden;
margin-right: 10px;
}
.category main .content article .cate-box ul li .left a,
.tag main .content article .tag-box ul li .left a,
.search main .content article .search-box ul li .left a {
display: block;
width: 100%;
height: 100%;
}
.category main .content article .cate-box ul li .left img,
.tag main .content article .tag-box ul li .left img,
.search main .content article .search-box ul li .left img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: middle;
}
.category main .content article .cate-box ul li .right,
.tag main .content article .tag-box ul li .right,
.search main .content article .search-box ul li .right {
display: flex;
flex-direction: column;
justify-content: space-between;
width: calc(100% - 160px);
}
.category main .content article .cate-box ul li .right p,
.tag main .content article .tag-box ul li .right p,
.search main .content article .search-box ul li .right p {
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.category main .content article .cate-box ul li .right p a,
.tag main .content article .tag-box ul li .right p a,
.search main .content article .search-box ul li .right p a {
font-size: 15px;
color: #333;
}
.category main .content article .cate-box ul li .right p a:hover,
.tag main .content article .tag-box ul li .right p a:hover,
.search main .content article .search-box ul li .right p a:hover {
text-decoration: underline;
}
.category main .content article .cate-box ul li .right span,
.category main .content article .cate-box ul li .right span i,
.tag main .content article .tag-box ul li .right span,
.tag main .content article .tag-box ul li .right span i,
.search main .content article .search-box ul li .right span,
.search main .content article .search-box ul li .right span i {
font-size: 13px;
color: #999;
}
.category main .content article .categories ul li a::before {
content: '\e6b6';
font-family: 'iconfont';
margin-right: 5px;
transition: all 0s !important;
}
.tag main .content article .tag-bar ul li a::before {
content: '#';
transition: all 0s !important;
}
.archive main .content article .archive-box h3 {
margin-top: 30px;
margin-bottom: 10px;
color: #333;
font-size: 17px;
}
.archive main .content article .archive-box h3:first-child {
margin-top: 0;
}
.archive main .content article .archive-box li {
padding: 10px 0; display: flex;
align-items: start;
}
.archive main .content article .archive-box li:last-child {
padding-bottom: 0;
}
.archive main .content article .archive-box li span {
font-size: 15px;
color: #333;
white-space: nowrap;
} .archive main .content article .archive-box li a,
.archive main .content article .archive-box li a::before {
color: #999;
font-size: 15px;
}
.archive main .content article .archive-box li a:hover,
.archive main .content article .archive-box li a:hover::before {
color: #333;
font-size: 15px;
text-decoration: underline;
}
.search main .content article h3 {
font-weight: 400;
margin-bottom: 25px;
font-size: 16px;
color: #999;
}
.search main .content article h3 span {
color: #333;
} .link main .content article .link-box ul {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.link main .content article .link-box ul li {
width: 100%;
overflow: hidden;
}
.link main .content article .link-box ul li a {
display: flex;
width: 100%;
height: 100%;
padding: 10px;
border-radius: 8px;
}
.link main .content article .link-box ul li a:hover {
background-color: #f5f5f5;
}
.link main .content article .link-box ul li a .left {
width: 50px;
height: 50px;
border-radius: 6px;
overflow: hidden;
margin-right: 10px;
}
.link main .content article .link-box ul li a .left img {
width: 100%;
height: 100%;
object-fit: cover;
}
.link main .content article .link-box ul li a .right {
width: calc(100% - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.link main .content article .link-box ul li a .right h3 {
font-weight: 400;
font-size: 14px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link main .content article .link-box ul li a .right p {
font-size: 12px;
margin-top: 5px;
padding-bottom: 2px;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .response form > .emoji-btn,
main .content aside .social .social-content ul li a,
main .content aside .sub-page .menu_sidebar ul li a,
main .content aside .notes-box ul li .view-detail a,
.single main .content article .post-cover .post-info .more .cate a,
.single main .content article .post-cover .post-info .more .tag a,
.comments .comments-body ul li .user-avatar .change-comment a,
.comments .comments-body ul li .comment-info .info .reply-btn a,
.link main .content article .link-box ul li a,
.note main .content article .note-page li .bottom a,
.pagination a,
.home main .content article .bottom .post-part ul li .right .post-info .read-more a::before,
header .menu ul li a,
main .content aside .toc ul li a,
.comments .response .emoji span,
.comments .response .comment-component .comment-btns button {
border: 1px solid transparent !important;
}
.response form > .emoji-btn:active,
main .content aside .social .social-content ul li a:active,
main .content aside .sub-page .menu_sidebar ul li a:active,
main .content aside .notes-box ul li .view-detail a:active,
.single main .content article .post-cover .post-info .more .cate a:active,
.single main .content article .post-cover .post-info .more .tag a:active,
.comments .comments-body ul li .user-avatar .change-comment a:active,
.comments .comments-body ul li .comment-info .info .reply-btn a:active,
.link main .content article .link-box ul li a:active,
.note main .content article .note-page li .bottom a:active,
.pagination a:active,
.home main .content article .bottom .post-part ul li .right .post-info .read-more a:active:before,
header .menu ul li a:active,
main .content aside .toc ul li a:active,
.comments .response .emoji span:active,
.comments .response .comment-component .comment-btns button:active {
border: 1px solid var(--scroll) !important;
transition: all 0s;
}
.pagination.no-more-post a:active {
border: 1px solid transparent !important;
}
.comments .response .comment-component .comment-btns .cancal:active {
border: 1px solid #dd24243a !important;
}
@media screen and (max-width: 1400px) {
.container {
width: 100%;
border: 0;
}
.home article .top .swiper {
height: 230px;
}
.home article .top .regular .regular-box a {
height: 170px;
}
}
@media screen and (max-width: 1200px) {
html,body {
background-color: #fff;
} 
header {
position: fixed;
height: calc(100vh - 90px);
top: 90px;
left: 0;
transform: translateX(-100%);
z-index: 998;
}
header.active {
transform: translateX(0);
box-shadow: 0 0 10px rgba(0 0 0 / .1);
}
main .nav {
z-index: 1000;
}
main {
width: 100%;
}
main .nav {
position: fixed;
top: 0;
}
main .nav .left .menu-btn {
display: block;
}
main .content {
margin-top: 90px;
position: relative;
}
.home article .top .swiper {
height: 230px;
}
}
@media screen and (max-width: 1100px) {
.home article .top .swiper {
height: 220px;
}
.home article .top .regular .regular-box a {
height: 150px;
}
}
@media screen and (max-width: 1000px) {
main .content aside {
position: fixed;
height: calc(100% - 90px);
right: 0;
top: 90px;
transform: translateX(100%);
}
main .content aside.active {
transform: translateX(0);
box-shadow: 0 0 10px rgba(0 0 0 / .1);
}
main .content article {
width: 100%;
}
main .nav .user-menu #aside-btn {
display: inline-block;
}
main .nav {
position: fixed;
top: 0;
}
#pagination-home,
#pagination-post,
.no-more-post {
padding-top: 25px;
}
.home article .top .swiper {
height: 240px;
}
.home article .top .regular .regular-box a {
height: 170px;
}
}
@media screen and (max-width: 800px) {
header {
height: calc(100vh - 70px);
top: 70px;
}
main .content article::-webkit-scrollbar,
main .content aside .aside-content::-webkit-scrollbar {
width: 0;
height: 0;
}
main .nav .search-box {
display: none;
}
.search-m {
display: block;
}
main .nav .left .search-btn {
display: block;
}
main .nav {
height: 70px;
}
main .content {
height: calc(100% - 70px);
margin-top: 70px;
}
.home main .content article .bottom .post-part ul li .left {
width: 230px;
height: 150px;
}
.home main .content article .bottom .post-part ul li .right {
width: calc(100% - 250px);
}
.home main .content article .bottom .post-part ul li .left .cate-view {
transform: translateY(10px);
opacity: 1;
}
main .content aside {
height: calc(100% - 70px);
top: 70px;
}
.home article .top .swiper {
height: 250px;
}
.home article .top .regular .regular-box a {
height: 150px;
}
.home article .top .regular .regular-box h2 {
font-size: 15px;
}
.pagination a:hover,
.pagination a:hover i,
.pagination-aside a:hover,
.pagination-aside a:hover i {
background-color: transparent;
color: #999;
}
.pagination a:active,
.pagination a:active i,
.pagination-aside a:active,
.pagination-aside a:active i {
background-color: #f5f5f5;
color: #333;
}
}
@media screen and (max-width: 700px) { .home main .content article > h2,
.category main .content article .categories > h2,
.tag main .content article > h2,
.archive main .content article > h2,
.search main .content article h2,
.note main .content article > h2,
.link main .content article > h2 {
font-size: 26px;
}
.home main .content article > h2 span,
.category main .content article .categories > h2 span,
.tag main .content article > h2 span,
.archive main .content article > h2 span,
.search main .content article h2 span,
.note main .content article > h2 span,
.link main .content article > h2 span {
font-size: 13px;
}
.home main .content article .bottom .post-part ul li .left {
width: 200px;
height: 135px;
}
.home main .content article .bottom .post-part ul li .right {
width: calc(100% - 220px);
}
.home main .content article .bottom .post-part ul li .right .text .title a {
font-size: 16px;
}
.home main .content article .bottom .post-part ul li .right .text p {
font-size: 13px;
-webkit-line-clamp: 2;
}
.home main .content article .bottom .post-part ul li .right .post-info .time i,
#pagination-home a i,
#pagination-post a i,
.no-more-post a i {
margin-right: 3px;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more span,
#pagination-home a, 
#pagination-home a i,
#pagination-post a,
#pagination-post a i,
.no-more-post a,
.no-more-post a i {
font-size: 13px;
}
.home main .content article .bottom .post-part ul li .left .cate-view,
.home main .content article .bottom .post-part ul li .left .cate-view a {
font-size: 13px;
} .category main .content article .cate-box ul,
.tag main .content article .tag-box ul,
.search main .content article .search-box ul {
grid-template-columns: 1fr;
}
.category main .content article .cate-box ul li .left,
.tag main .content article .tag-box ul li .left,
.search main .content article .search-box ul li .left {
width: 200px;
height: 135px;
margin-right: 20px;
}
.category main .content article .cate-box ul li .right,
.tag main .content article .tag-box ul li .right,
.search main .content article .search-box ul li .right {
width: calc(100% - 220px);
}
.link main .content article .link-box ul {
grid-template-columns: 1fr 1fr;
}
.single main .content article .post-cover {
height: 240px;
}
.single main .content article .post-cover .shortcuts {
top: 10px;
right: 10px;
}
.single main .content article .post-cover .post-info {
padding: 0 25px 20px 25px;
}
.single main .content article .post-cover .post-info .title,
.single main .content article .post-cover .post-info .title h2 {
font-size: 22px;
}
.single main .content article .post-cover .post-info .more div {
margin-left: 10px;
}
.single main .content article .post-cover .post-info .more .time span,
.single main .content article .post-cover .post-info .more .cate a,
.single main .content article .post-cover .post-info .more .tag a {
font-size: 13px;
}
.single main .content article .post-cover .post-info .more .time i,
.single main .content article .post-cover .post-info .more .cate a::before,
.single main .content article .post-cover .post-info .more .tag a::before {
font-size: 14px;
}
.home article .top .swiper {
height: 240px;
}
.home article .top .regular {
grid-template-columns: 1fr 1fr;
}
.home article .top .regular .regular-box:last-child {
display: none;
}
.home article .top .regular .regular-box a {
height: 170px;
}
}
@media screen and (max-width: 600px) {
.home article .top .swiper {
height: 210px;
}
.home article .top .regular .regular-box a {
height: 150px;
}
}
@media screen and (max-width: 500px) {
header.active,
main .content aside.active {
box-shadow: none;
}
.home main .content article .bottom .post-part ul li .left {
width: 140px;
height: 100px;
}
.home main .content article .bottom .post-part ul li {
margin-bottom: 20px;
padding-bottom: 0;
border-bottom: 0;
}
.home main .content article .bottom .post-part ul li .left {
margin-right: 10px;
}
.home main .content article .bottom .post-part ul li .right {
width: calc(100% - 150px);
}
.home main .content article .bottom .post-part ul li .right .text .title {
-webkit-line-clamp: 3;
}
.home main .content article .bottom .post-part ul li .right .text .title a {
font-size: 15px;
}
.home main .content article .bottom .post-part ul li .right .text p {
display: none;
}
.home main .content article .bottom .post-part ul li .right .post-info .time i {
font-size: 12px;
}
.home main .content article .bottom .post-part ul li .right .post-info .time span,
#pagination-home a, 
#pagination-home a i,
#pagination-post a,
#pagination-post a i,
.no-more-post a,
.no-more-post a i  {
font-size: 12px;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more {
display: none;
}
.home main .content article .bottom .post-part ul li .left .cate-view {
font-size: 12px;
left: 5px;
padding: 2px 6px;
}
.home main .content article .bottom .post-part ul li .left .cate-view a {
font-size: 12px;
}
.home main .content article .bottom .post-part ul li .left .cate-view,
.home main .content article .bottom .post-part ul li .left .cate-view:hover,
.home main .content article .bottom .post-part ul li .left a.cover:hover ~ .cate-view {
transform: translateY(5px);
max-width: calc(100% - 10px);
} .home main .content article > h2,
.category main .content article .categories > h2,
.tag main .content article > h2,
.archive main .content article > h2,
.search main .content article h2,
.note main .content article > h2,
.link main .content article > h2 {
font-size: 24px;
}
.home main .content article > h2 span,
.category main .content article .categories > h2 span,
.tag main .content article > h2 span,
.archive main .content article > h2 span,
.search main .content article h2 span,
.note main .content article > h2 span,
.link main .content article > h2 span {
font-size: 12px;
}
.category main .content article .cate-box ul, 
.tag main .content article .tag-box ul, 
.search main .content article .search-box ul {
grid-gap: 20px;
}
.tag main .content article .tag-bar ul li,
.category main .content article .categories ul li {
margin-right: 10px;
}
.tag main .content article .tag-bar ul li a,
.category main .content article .categories ul li a {
padding: 5px 12px;
}
.category main .content article .cate-box ul li .left,
.tag main .content article .tag-box ul li .left,
.search main .content article .search-box ul li .left {
width: 140px;
height: 100px;
margin-right: 10px;
}
.category main .content article .cate-box ul li .right,
.tag main .content article .tag-box ul li .right,
.search main .content article .search-box ul li .right {
width: calc(100% - 150px);
}
.search main .content article h3 {
font-size: 15px;
}
.archive main .content article .archive-box h3 {
font-size: 16px;
margin-top: 20px;
}
.archive main .content article .archive-box li a,
.archive main .content article .archive-box li a::before {
color: #999;
font-size: 14px;
}
.archive main .content article .archive-box li span {
font-size: 14px;
}
.archive main .content article .archive-box li a:hover,
.archive main .content article .archive-box li a:hover::before {
color: #333;
font-size: 14px;
}
main .content aside .aside-content .aside-btn-open,
main .content aside .aside-content .aside-btn-close {
font-size: 13px;
}
main .content aside {
width: calc(100% - 99px);
}
main .content aside .toc > h2,
main .content aside .social > h2,
main .content aside .notes-box > h2,
main .content aside .menu_sidebar_box > h2,
main .content aside .new-comments > h2,
main .content aside .about > h2 {
font-size: 16px !important;
}
main .content aside .social .social-content ul li a {
margin-right: 4px;
}
.link main .content article .link-box ul {
grid-template-columns: 1fr;
grid-gap: 15px;
}
footer .copyright a, footer .copyright {
font-size: 12px;
}
.single main .content article .post-content {
padding: 30px 25px;
}
.note main .content article .note-page li {
margin-bottom: 20px;
}
.home article .top {
padding-bottom: 10px;
}
.home article .top .swiper {
height: 260px;
padding-top: 0;
overflow: hidden;
}
.home article .top .swiper-slide {
transform: scale(1);
}
.home article .top .swiper-button-prev,
.home article .top .swiper-button-next {
display: none;
}
.home article .top .swiper-slide a .swiper-post-info h2 {
-webkit-line-clamp: 3;
}
.home article .top .swiper-slide a .swiper-post-info h2:hover  {
text-decoration: none;
}
.home article .top .regular {
grid-template-columns: 1fr;
}
.home article .top .regular .regular-box {
display: none;
}
.home article .top .regular .regular-box:first-child {
display: block;
}
.home article .top .regular .regular-box a {
height: 180px;
}
.home article .top .regular .regular-box h2:hover {
text-decoration: none;
}
.home article .top .regular .regular-box p {
font-size: 14px;
}
.single main .content article .post-cover .post-info .title,
.single main .content article .post-cover .post-info .title h2 {
font-size: 18px;
}
} @media screen and (min-width: 500px) {
main article .note-page .notes-content * {
font-size: 15px;
}
main article .note-page .notes-content h1 {
font-size: 19px;
}
main article .note-page .notes-content h2 {
font-size: 18px;
}
main article .note-page .notes-content h3 {
font-size: 17px;
}
main article .note-page .notes-content h4 {
font-size: 16px;
}
main article .note-page .notes-content h5 {
font-size: 15px;
}
main article .note-page .notes-content h6 {
font-size: 15px;
font-weight: 400;
}
main article .note-page .notes-content pre {
font-size: 14px;
}
}
@media screen and (max-width: 400px) {
header {
width: 80px;
}
header .logo {
height: 80px;
}
header .logo a {
width: 40px;
height: 40px;
}
header .menu ul li {
margin-bottom: 20px;
}
header .menu ul li a {
width: 40px;
height: 40px;
font-size: 12px;
}
header .menu ul li a > * {
font-size: 20px;
}
main .nav .left .menu-btn.active {
margin-left: 80px;
}
main .content aside {
width: calc(100% - 79px);
}
footer {
padding: 10px 25px;
}
.home article .top .swiper {
height: 220px;
}
}
@media screen and (max-width: 400px) and (max-height: 600px) {
header .logo {
display: none;
}
}
@media screen and (min-width: 400px) and (max-height: 700px) {
header .logo {
display: none;
}
}  @keyframes FadeIn-Left {
from {
transform: translateX(-20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
} @keyframes FadeIn-Right {
from {
transform: translateX(20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
} @keyframes FadeIn-Top {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
} @keyframes FadeIn-Enlarge {
from {
transform: scale(.98);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}@font-face {
font-family: "iconfont"; src: url(//na-rim.com/wp-content/themes/iEmo-0.5.2/assets/static/iconfont/iconfont.woff2?t=1678985733454) format('woff2'),
url(//na-rim.com/wp-content/themes/iEmo-0.5.2/assets/static/iconfont/iconfont.woff?t=1678985733454) format('woff'),
url(//na-rim.com/wp-content/themes/iEmo-0.5.2/assets/static/iconfont/iconfont.ttf?t=1678985733454) format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-arrow-up:before {
content: "\e69b";
}
.icon-chevrons-up:before {
content: "\e6ac";
}
.icon-chevron-down:before {
content: "\e6aa";
}
.icon-chevron-left:before {
content: "\e6a8";
}
.icon-chevron-right:before {
content: "\e6a9";
}
.icon-message-circle:before {
content: "\e6c4";
}
.icon-map-pin:before {
content: "\e6c3";
}
.icon-flag:before {
content: "\e6b7";
}
.icon-message-square:before {
content: "\e6c2";
}
.icon-layout:before {
content: "\e6bf";
}
.icon-log-in:before {
content: "\e6c1";
}
.icon-file:before {
content: "\e6b4";
}
.icon-activity:before {
content: "\e691";
}
.icon-anchor:before {
content: "\e69a";
}
.icon-loader:before {
content: "\e6be";
}
.icon-user:before {
content: "\e6e0";
}
.icon-edit:before {
content: "\e6b3";
}
.icon-edit-:before {
content: "\e6bc";
}
.icon-power:before {
content: "\e6cc";
}
.icon-settings:before {
content: "\e6d2";
}
.icon-grid:before {
content: "\e6ba";
}
.icon-menu:before {
content: "\e6c0";
}
.icon-bookmark:before {
content: "\e6a1";
}
.icon-weixin:before {
content: "\e600";
}
.icon-tuitetwitter43:before {
content: "\e707";
}
.icon-telegram:before {
content: "\e731";
}
.icon-QQ:before {
content: "\e882";
}
.icon-Youtube-fill:before {
content: "\e883";
}
.icon-bilibili-line:before {
content: "\e75d";
}
.icon-github:before {
content: "\e673";
}
.icon-gitee:before {
content: "\e60c";
}
.icon-arrow-right:before {
content: "\e699";
}
.icon-clock:before {
content: "\e6ab";
}
.icon-search:before {
content: "\e6d1";
}
.icon-home:before {
content: "\e6bb";
}
.icon-archive:before {
content: "\e698";
}
.icon-hash:before {
content: "\e6b9";
}
.icon-link:before {
content: "\e6bd";
}
.icon-folder:before {
content: "\e6b6";
}#nprogress {
pointer-events: none;
position: fixed;
z-index: 99999;
top: 0;
}
#nprogress .bar {
background: #FD96B4;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 2px;
} #nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #FD96B4, 0 0 5px #FD96B4;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
} #nprogress .spinner {
display: block;
position: fixed;
z-index: 9999;
top: 15px;
right: 15px;
} .nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0%   { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0%   { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}