blog-source/usr/themes/HarmonyHues/assets/css/style.css

@charset "UTF-8";
/* ------------------------------------ Harmony Hues主题 @author  星语社长 @link  https://biibii.cn @update  2024-7-6 18:00:04 --------------------------------- */
:root { /*基础样式*/ font-synthesis: style; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; word-wrap: break-word; color: var(--font-color-main); /* 色调 */ /* 主色调：现代蓝色 */ --color-primary: #165DFF; /* 比主色调更深 */ --color-primary-dark-1: #0E42D2; /* 更深的色调 */ --color-primary-dark-2: #072A8A; /* 非常深的色调 */ --color-primary-dark-3: #041957; /* 比主色调稍浅 */ --color-primary-light-1: #4080FF; /* 浅一些的色调 */ --color-primary-light-2: #6AA1FF; /* 较浅的色调 */ --color-primary-light-3: #94BFFF; /* 更浅的色调 */ --color-primary-light-4: #BEDAFF; /* 非常浅的色调 */ --color-primary-light-5: #E8F3FF; /* 主背景色 */ --bg-color-main: #fff; /* 主背景色-黑 */ --bg-color-main-dark: #000; /* 页面背景色 */ --bg-color-body: #f6f7f9; /* 遮罩层浅色1 */ --overlay-color-light-1: rgba(255, 255, 255, 0.1); /* 遮罩层浅色2 */ --overlay-color-light-2: rgba(255, 255, 255, 0.2); /* 遮罩层浅色3 */ --overlay-color-light-3: rgba(255, 255, 255, 0.3); /* 遮罩层浅色4 */ --overlay-color-light-4: rgba(255, 255, 255, 0.4); /* 遮罩层浅色5 */ --overlay-color-light-5: rgba(255, 255, 255, 0.5); /* 遮罩层浅色8 */ --overlay-color-light-8: rgba(255, 255, 255, 0.8); /* 黑遮罩层浅色1 */ --overlay-color-dark-1: rgba(0, 0, 0, 0.1); /* 黑遮罩层浅色2 */ --overlay-color-dark-2: rgba(0, 0, 0, 0.2); /* 黑遮罩层浅色3 */ --overlay-color-dark-3: rgba(0, 0, 0, 0.3); /* 黑遮罩层浅色4 */ --overlay-color-dark-4: rgba(0, 0, 0, 0.4); /* 黑遮罩层浅色5 */ --overlay-color-dark-5: rgba(0, 0, 0, 0.5); /* 主字体颜色 */ --font-color-main: #333; /* 主字体颜色（浅色） */ --font-color-main-light: #6c757d; /* 主字体颜色（透明） */ --font-color-main-transparent: rgba(60, 60, 60, 0.7); /* 字体颜色（muted） */ --font-color-muted: #b2b2b2; /* 主边框颜色 */ --border-color-main: #e4e4e4; /* 主要背景色 */ --bg-color-primary: #f2f2f2; /* 次要背景色 */ --bg-color-secondary: #f5f5f5; /* 基础圆角大小 */ --border-radius-base: 8px; /* 小圆角大小 */ --border-radius-small: 5px; /* 中等圆角大小 */ --border-radius-medium: calc(var(--border-radius-small) * 2); /* 大圆角大小 */ --border-radius-large: calc(var(--border-radius-small) * 6); /* 超大圆角大小 */ --border-radius-xlarge: calc(var(--border-radius-small) * 20); /* 圆形圆角 */ --border-radius-circle: 50%; /* 固定导航栏高度 */ --height-nav-fixed: 80px; /* 页脚高度 */ --height-footer: 60px; /* 主背景滤镜 */ --backdrop-filter-main: saturate(180%) blur(20px); /* 主渐变透明背景 */ --gradient-primary-transparent: linear-gradient(0deg, var(--color-primary-light-4), transparent); /* 主题样式 */ /* 中等蓝色灰色 */ --color-blue-gray-medium: var(--color-primary); /* 浅色中等蓝色灰色 */ --color-blue-gray-medium-light: var(--color-primary-dark-3); /* 主阴影 */ --shadow-box-main: 8px 8px 15px 0 rgba(55, 99, 170, 0.1), -8px -8px 15px 0 var(--bg-color-main), inset 0 4px 15px 0 var(--overlay-color-light-5); /* 小阴影 */ --shadow-box-small: 5px 5px 12px 0 rgba(55, 99, 170, 0.1), -5px -5px 12px 0 var(--bg-color-main), inset 0 4px 10px 0 var(--overlay-color-light-5); /* 悬停阴影 */ --shadow-box-hover: 8px 8px 15px 0 rgba(55, 99, 170, 0.2), -8px -8px 15px 0 var(--bg-color-main); /* 0度渐变 */ --gradient-0deg: linear-gradient(0deg, var(--bg-color-body), #f8f8f8); /* 45度渐变 */ --gradient-45deg: linear-gradient(45deg, var(--bg-color-body), #f8f8f8); /* 工具背景渐变 */ --widget-bg-gradient: linear-gradient(-45deg, var(--bg-color-main), #f3f5f8); /* 主边框 */ --border-solid-main: 2px solid var(--bg-color-main); /* 小边框 */ --border-solid-small: 1px solid var(--bg-color-main); /* 导航栏阴影 */ --shadow-nav: 0 5px 12px 0 rgba(50, 98, 170, 0.1); /* 导航栏shadow */ --shadow-hover-nav: inset -8px -8px 16px var(--bg-color-body), inset 8px 8px 16px var(--bg-color-body), 8px 8px 16px rgba(0, 0, 0, 0.25); /* 内嵌阴影 */ --shadow-inset-box: inset -4px -4px 12px #f1f1f1, inset 4px 4px 12px #e2e2e2; /* 所有属性过渡效果 */ --transition-ease-all: all .3s ease 0s; }

:root[data-theme=dark] { --bg-color-main: #262626; --bg-color-main-dark: #fff; --bg-color-body: #222222; --overlay-color-light-1: rgba(0, 0, 0, 0.5); --overlay-color-light-2: #333333; --overlay-color-light-3: #4d4d4d; --overlay-color-light-4: #666666; --overlay-color-light-5: #2a2a2a; --overlay-color-light-8: #2e2e2e; --overlay-color-dark-1: #4d4d4d; --overlay-color-dark-2: rgba(255, 255, 255, 0.25); --overlay-color-dark-3: #808080; --overlay-color-dark-4: #999999; --overlay-color-dark-5: #b3b3b3; --font-color-main: #fff; --font-color-main-light: #b3b3b3; --font-color-main-transparent: rgba(220, 220, 220, 0.7); --font-color-muted: #757575; --border-color-main: #333; --bg-color-primary: #2C2C2C; --bg-color-secondary: #171717; --gradient-primary-transparent: linear-gradient(0deg, #333, rgba(0, 0, 0, 0.3)); --color-blue-gray-medium: var(--color-primary); --color-blue-gray-medium-light: var(--color-primary-dark-3); --shadow-box-main: 8px 8px 15px 0 rgba(0, 0, 0, 0.3), -8px -8px 15px 0 var(--bg-color-main), inset 0 4px 15px 0 var(--bg-color-body); --shadow-box-small: 5px 5px 12px 0 rgba(0, 0, 0, 0.3), -5px -5px 12px 0 var(--bg-color-main), inset 0 4px 10px 0 var(--bg-color-body); --shadow-box-hover: 8px 8px 15px 0 rgba(0, 0, 0, 0.4), -8px -8px 15px 0 var(--bg-color-main); --gradient-0deg: linear-gradient(0deg, var(--bg-color-body), var(--overlay-color-light-5)); --gradient-45deg: linear-gradient(45deg, var(--bg-color-body), var(--overlay-color-light-5)); --widget-bg-gradient: linear-gradient(-45deg, var(--bg-color-main), var(--bg-color-body)); --shadow-nav: 0 5px 12px 0 rgba(0, 0, 0, 0.3); --shadow-inset-box: inset -4px -4px 12px #1a1a1a, inset 4px 4px 12px #1e1e1e; }

/* 全局样式 */
html { scroll-behavior: smooth; }

body { background-color: var(--bg-color-body) !important; }

ol, ul { list-style: none; margin: 0; }

*, *::before, *::after { font: inherit; color: inherit; padding: 0; margin: 0; border: 0; outline: 0; vertical-align: baseline; box-sizing: border-box; scroll-behavior: smooth; }

/* 去除a标签默认样式 */
a { color: var(--font-color-main); cursor: pointer; text-decoration: none; transition: color 0.3s ease; }

a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none; }

a:hover { color: var(--color-blue-gray-medium) !important; }

/*--------浏览器滚动条---------*/
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar { -webkit-appearance: none; width: 0.5rem; height: 0.5rem; }

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track { background-color: #e4e4e4; }

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb { cursor: pointer; border-radius: 10px; background: #b2b2b2; -webkit-transition: color .3s ease; transition: color .3s ease; }

/* 指定滚动样式 */
.scroll-cover { overflow: auto; }

.scroll-cover::-webkit-scrollbar { width: 2px !important; height: 2px !important; -webkit-appearance: none; appearance: none; }

.scroll-cover::-webkit-scrollbar-track { background-color: transparent; }

/*--------浏览器滚动条---------*/
/*---输入公共样式---*/
input, textarea, select { color: var(--font-color-main) !important; box-shadow: var(--shadow-inset-box) !important; background-color: transparent !important; border-radius: var(--border-radius-base) !important; border: var(--border-solid-small) !important; }

@media (max-width: 767.98px) { input, textarea, select { border: var(--border-solid-small) !important; } }

input:-webkit-autofill { transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: var(--font-color-main) !important; }

button { color: var(--font-color-main) !important; }

button.btn:focus { box-shadow: var(--shadow-inset-box); }

img, video { width: 100%; height: 100%; object-fit: cover; }

:root[data-theme=dark] img, :root[data-theme=dark] video { filter: brightness(0.85); }

/* 名字svg样式 */
.svg-name path { fill: var(--font-color-main); }

/* 文字边框 */
.title-text-stroke { text-stroke: 1px var(--font-color-main); -webkit-text-stroke: 1px var(--font-color-main); -webkit-text-fill-color: transparent; }

/* 文字阴影 */
.text-shadow-style { position: relative; --text-col: var(--bg-color-main); --text-show-col: var(--font-color-main); color: var(--text-col); text-shadow: 3px 3px 0 var(--text-show-col), -1px -1px 0 var(--text-show-col), 1px -1px 0 var(--text-show-col), -1px 1px 0 var(--text-show-col), 1px 1px 0 var(--text-show-col); }

.text-webkit-mask { opacity: 0.5; -webkit-mask: linear-gradient(var(--bg-color-main) 50%, transparent); mask: linear-gradient(var(--bg-color-main) 50%, transparent); }

/* 图标公共样式 */
.iconfont { font-family: "iconfont" !important; color: var(--font-color-main); font-size: 1.5rem; font-style: normal; line-height: 1; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }

.iconfont:hover { color: var(--color-blue-gray-medium); }

/* 公共动画 */
@keyframes fade-in-top { from { opacity: 0;
    transform: translateY(15px); }
  to { opacity: 1;
    transform: translateY(0); } }

@-webkit-keyframes fade-in-top { from { opacity: 0;
    -webkit-transform: translateY(15px); }
  to { opacity: 1;
    -webkit-transform: translateY(0); } }

.animated-signature path { stroke-dasharray: 2400; stroke-dashoffset: 2400; fill: transparent; animation: drawSignature 8s linear infinite both; -webkit-animation: drawSignature 8s linear infinite both; stroke-width: 2px; stroke: var(--font-color-main); }

img.lazy { background-color: var(--color-primary-light-5); filter: blur(25px); -webkit-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }

img.loaded { background-color: transparent; filter: blur(0px); -webkit-transition: filter 1s linear, -webkit-filter 1s linear; transition: filter 1s linear, -webkit-filter 1s linear; }

@keyframes drawSignature { 0% { stroke-dashoffset: 2400; }
  15% { fill: transparent; }
  35%, 75% { stroke-dashoffset: 0;
    fill: var(--font-color-main); }
  90%, to { stroke-dashoffset: 2400;
    fill: transparent; } }

.view-image-lead img { width: auto; height: auto; }

/*---------- 导航栏样式st ----------*/
/* 导航栏样式 */
.navbar { position: fixed; z-index: 99; width: 100%; background-color: transparent; transition: var(--transition-ease-all); }

.navbar.nav-ui-one { background-image: radial-gradient(transparent 1px, var(--bg-color-main) 1px); background-size: 4px 4px; -webkit-backdrop-filter: saturate(50%) blur(5px); backdrop-filter: saturate(50%) blur(5px); -webkit-box-shadow: var(--shadow-nav) !important; box-shadow: var(--shadow-nav) !important; }

.navbar.nav-ui-two .navbar-box { background-image: radial-gradient(transparent 1px, var(--bg-color-main) 1px); background-size: 4px 4px; -webkit-backdrop-filter: saturate(50%) blur(5px); backdrop-filter: saturate(50%) blur(5px); -webkit-box-shadow: var(--shadow-nav) !important; box-shadow: var(--shadow-nav) !important; border: var(--border-solid-main); border-radius: var(--border-radius-medium); }

.navbar.active { box-shadow: var(--shadow-nav) !important; }

.navbar.nav-hidden { transform: translateY(-100%) !important; opacity: 0 !important; }

.navbar.nav-visible { transform: translateY(0) !important; opacity: 1 !important; }

.navbar-logo span { font-size: 1.5rem; }

.navbar-logo img { height: 40px; }

.nav-inner { position: relative; }

.nav-inner .nav-icon { display: inline-block; margin-left: 0.1rem; font-size: 0.8rem; transition: transform 0.3s; }

.nav-inner .nav-menu { gap: 1rem; }

.nav-inner .nav-item { position: relative; }

.nav-inner .nav-item .nav-a.active { color: var(--color-primary); text-shadow: 0 0.15rem 1rem var(--color-primary-light-1); }

.nav-inner .nav-item .nav-a.active .nav-icon { color: var(--color-blue-gray-medium); }

.nav-inner .nav-item > .sub-menu { position: absolute; left: -15%; opacity: 0; visibility: hidden; pointer-events: none; z-index: 9; transform: translateY(-15px); transition: all 0.3s ease; }

.nav-inner .nav-item:hover .nav-a { color: var(--color-blue-gray-medium); }

.nav-inner .nav-item:hover > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.nav-inner .nav-item:hover .nav-icon { color: var(--color-blue-gray-medium); transform: rotate(-90deg); }

.nav-inner .sub-menu { white-space: nowrap; }

.nav-inner .sub-menu ul { background: var(--gradient-0deg); border-radius: var(--border-radius-base); white-space: nowrap; border: var(--border-solid-main); box-shadow: var(--shadow-hover-nav); overflow: hidden; }

.nav-inner .sub-menu ul li { position: relative; width: 100%; transition: all .3s; overflow: hidden; }

.nav-inner .sub-menu ul li > a { --nav-font-size: 20px; display: inline-block; transform: translateY(calc(-1 * var(--nav-font-size) * 1.5)); text-shadow: 0px calc(var(--nav-font-size) * 1.5) 0px var(--font-color-main); transition: transform 0.3s cubic-bezier(0.15, 1, 0.35, 1); }

.nav-inner .sub-menu ul li:hover > a { transform: translateY(0); }

.nav-inner .sub-menu ul li:hover, .nav-inner .sub-menu ul li.active { width: 100%; background-color: var(--bg-color-main); border-radius: var(--border-radius-medium); box-shadow: var(--shadow-box-hover); }

.navbar-icon { gap: 1rem; }

@media (max-width: 767.98px) { .navbar-icon { gap: 0.5rem; } }

.navbar-icon .iconfont { font-size: 1.35rem; }

/*滚动进度+回到顶部样式*/
.back-to-top { display: flex; overflow: hidden; }

.back-to-top .nav-top-item { text-align: center; font-size: 0.8rem; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; border-radius: var(--border-radius-xlarge); background: var(--font-color-main); color: var(--bg-color-main); transition: width 0.3s, display 0.3s; }

.back-to-top .nav-top-item.top-to-active { width: 5rem; }

.back-to-top .top-to-icon { display: none; }

.back-to-top:hover .top-to-icon { display: inline-block; }

.back-to-top:hover .top-to-text { display: none; }

.back-to-top:hover .nav-top-item { width: 5rem; }

/* ----》手机导航栏菜单 */
#nav-components.mobile-aside { display: flex; flex-direction: column; position: fixed; width: 100%; max-height: 95vh; min-height: 70vh; opacity: 0; visibility: hidden; background-color: var(--bg-color-main); bottom: 0; z-index: 1000; transform: translateY(100%); transition: transform 1s cubic-bezier(0.3, 0.7, 0, 1), opacity 1s linear, visibility 1s linear; border-top-left-radius: var(--border-radius-medium); border-top-right-radius: var(--border-radius-medium); box-shadow: 0 -0.15rem 1.5rem 0.25rem var(--overlay-color-dark-1); }

#nav-components.mobile-aside.open { visibility: visible; opacity: 1; transform: translateY(0); }

#nav-components .back-box { display: inline-block; width: 3rem; height: 4px; border-radius: var(--border-radius-xlarge); background-color: var(--overlay-color-dark-3); }

#nav-components .mobile-close-btn { position: absolute; display: flex; right: 0; top: 0; width: 2rem; height: 2rem; background-color: var(--bg-color-body); border-radius: var(--border-radius-circle); align-items: center; justify-content: center; }

#nav-components .nav-menu > .nav-item { font-size: 1rem; color: var(--font-color-main); }

#nav-components .nav-menu .nav-a .iconfont { font-size: 1rem; }

#nav-components .nav-menu .nav-a .nav-icon { display: none; }

#nav-components .nav-menu .sub-menu { background-color: var(--bg-color-body); border-radius: var(--border-radius-medium); border-top-left-radius: 0; }

.nav-fixed { padding-top: var(--height-nav-fixed); }

@media (max-width: 767.98px) { .nav-fixed { padding-top: calc(var(--height-nav-fixed) - 1rem); } }

/*---------- 导航栏样式end ----------*/
/*---------- 文章分类样式st ----------*/
.category-box { position: relative; width: 100%; height: 12rem; max-height: 100%; overflow: hidden; }

.category-box .category-item { position: absolute; color: var(--bg-color-main); width: 100%; height: 100%; background-color: var(--overlay-color-dark-2); }

.category-box .category-item .category-info { width: 100%; height: 100%; }

.category-box .category-item .category-name { display: block; font-size: 1.15rem; font-weight: bold; }

.category-box .category-item .category-desc { display: block; font-size: 0.85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }

.category-box img { width: 100%; height: 100%; object-fit: cover; }

/*---------- 文章分类样式end ----------*/
/*---------- 文章列表样式st ----------*/
.post-list > div:nth-child(1) .post-item { animation-delay: 0.4s; }

.post-list > div:nth-child(2) .post-item { animation-delay: 0.4s; }

.post-list > div:nth-child(3) .post-item { animation-delay: 0.4s; }

.post-list > div:nth-child(4) .post-item { animation-delay: 0.6s; }

.post-list > div:nth-child(5) .post-item { animation-delay: 0.6s; }

.post-list > div:nth-child(6) .post-item { animation-delay: 0.6s; }

.post-list > div:nth-child(7) .post-item { animation-delay: 0.8s; }

.post-list > div:nth-child(8) .post-item { animation-delay: 0.8s; }

.post-list > div:nth-child(9) .post-item { animation-delay: 0.8s; }

@media (max-width: 767.98px) { .post-list > div:nth-child(1) .post-item { animation-delay: 0.4s; }
  .post-list > div:nth-child(2) .post-item { animation-delay: 0.4s; }
  .post-list > div:nth-child(3) .post-item { animation-delay: 0.6s; }
  .post-list > div:nth-child(4) .post-item { animation-delay: 0.6s; }
  .post-list > div:nth-child(5) .post-item { animation-delay: 0.8s; }
  .post-list > div:nth-child(6) .post-item { animation-delay: 0.8s; }
  .post-list > div:nth-child(7) .post-item { animation-delay: 1s; } }

.post-list .post-item { position: relative; min-width: 0; word-wrap: break-word; align-self: stretch; flex: 1 1 auto; overflow: hidden; border-radius: var(--border-radius-medium); border: var(--border-solid-main); box-shadow: var(--shadow-box-main); background: var(--gradient-0deg); background-clip: padding-box; opacity: 0; animation: fade-in-top 0.5s 0.3s forwards; -webkit-animation: fade-in-top 0.5s 0.3s forwards; }

.post-list .post-item:hover { background: var(--bg-color-main) !important; box-shadow: var(--shadow-box-hover); }

.post-list .post-item:hover .post-cover img { transform: scale(1.1); }

.post-list .post-item:hover .post-head > a { color: var(--color-blue-gray-medium) !important; }

.post-list .post-item .post-cover { position: relative; display: block; overflow: hidden; padding: 0; flex-shrink: 0; }

.post-list .post-item .post-cover::after { content: ""; display: block; padding-top: 60%; }

.post-list .post-item .post-cover img { width: 100%; height: 100%; transition: transform .3s ease-in-out; object-fit: cover; }

.post-list .post-item .post-cover a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 0; border-radius: inherit; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; background-clip: padding-box; }

.post-list .post-item .post-info { height: 100%; width: 100%; cursor: pointer; position: relative; overflow: hidden; gap: 0.5rem; }

.post-list .post-item .post-info .post-head > a { margin-bottom: 0.25rem; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--font-color-main); transition: color .3s ease 0s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }

.post-list .post-item .post-info .post-meta-wrap { --font-color-main: var(--font-color-main-light); color: var(--font-color-main); }

.post-list .post-item .post-info .post-description { color: var(--font-color-main-transparent); font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }

@media (max-width: 767.98px) { .post-list .post-item { box-shadow: var(--shadow-box-small); } }

/* -------------段落省略--------- */
.author-content .author-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }

.post-meta-wrap .author-name, .post-meta-wrap .post-meta { color: var(--font-color-main); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }

@media (max-width: 767.98px) { .post-meta-wrap .author-name, .post-meta-wrap .post-meta { font-size: 0.8rem; } }

/*---------- 文章列表样式end ----------*/
/*---------- 文章列表->分页str ----------*/
.pagination { gap: 0.5rem; opacity: 0; animation: fade-in-top 0.5s 0.8s forwards; -webkit-animation: fade-in-top 0.5s 0.8s forwards; }

.pagination .page-item { width: 2rem; height: 2rem; }

.pagination .page-item .page-link { color: var(--font-color-main); background: var(--gradient-45deg); background-clip: padding-box; border: var(--border-solid-main); box-shadow: var(--shadow-box-small); }

.pagination .page-item.prev .iconfont, .pagination .page-item.next .iconfont { font-size: 0.9rem; }

.pagination .page-item.active .page-link, .pagination .page-item:hover .page-link { font-weight: bold; color: var(--color-primary-dark-1); background: var(--bg-color-main) !important; box-shadow: var(--shadow-box-main); }

/*---------- 文章列表分页end ----------*/
/*---------- 侧边栏样式st ----------*/
.hh-widget, .card { width: 100%; color: var(--font-color-main); border: var(--border-solid-main); border-radius: var(--border-radius-medium); box-shadow: var(--shadow-box-main); background: var(--gradient-45deg); background-clip: padding-box; }

.hh-widget:not(.no-animation), .card:not(.no-animation) { opacity: 0; animation: fade-in-top 0.5s 0.3s forwards; -webkit-animation: fade-in-top 0.5s 0.3s forwards; }

.main-sidebar .sidebar-sticky { top: 88px; z-index: 2 !important; transition: top 0.3s ease; }

.main-sidebar .sidebar-sticky.visible-top { top: 20px; }

.main-sidebar .widget-title { display: inline-block; font-size: 1rem; font-weight: 700; }

.main-sidebar .widget-title > .iconfont { font-size: 1.1rem; }

/*----------侧边栏样式end ----------*/
/*----------底部样式st ----------*/
.footer { color: var(--font-color-main); background-color: var(--bg-color-main); font-size: 14px; min-height: var(--height-footer); }

@media (max-width: 767.98px) { .footer .container { flex-direction: column; align-items: center; }
  .footer .footer-left { text-align: center; justify-content: center; } }

.footer .theme-toggle { margin: 0 auto; gap: 0.15rem; background: var(--bg-color-body); border-radius: var(--border-radius-xlarge); border: var(--border-solid-small); }

.footer .theme-toggle button { line-height: 1; background: transparent; border-radius: var(--border-radius-large); }

.footer .theme-toggle button.active, .footer .theme-toggle button:hover { background: var(--bg-color-main); }

.footer .theme-toggle .iconfont { font-size: 0.85rem; color: var(--font-color-main-light); }

.footer .social-info-list a { display: flex; width: 1.75rem; height: 1.75rem; background-color: var(--bg-color-main-dark); border-radius: var(--border-radius-circle); align-items: center; justify-content: center; transition: background-color 0.2s; }

.footer .social-info-list a i { color: var(--bg-color-main); font-size: 1rem; }

.footer .social-info-list a:hover { background-color: var(--bg-color-body); }

.footer .social-info-list a:hover i { color: var(--font-color-main); }

main > .container { min-height: calc(100vh - 6rem - var(--height-footer)); }

/*---------- 底部样式end ----------*/
/*---------- 文章+页面-面包屑样式st ----------*/
.breadcrumb { font-size: 0.85rem; background: none !important; opacity: 0; animation: fade-in-top 0.3s 0.2s forwards; -webkit-animation: fade-in-top 0.3s 0.2s forwards; }

.breadcrumb li a, .breadcrumb li span { color: var(--font-color-main-light); font-size: 0.8rem; line-height: 1; padding: 0.2rem 0.5rem; background: linear-gradient(to right, var(--bg-color-primary), var(--overlay-color-light-2)); border-radius: var(--border-radius-xlarge); border: var(--border-solid-small); border-bottom-left-radius: var(--border-radius-small); box-shadow: var(--shadow-box-small); }

.breadcrumb li span { color: var(--font-color-main); box-shadow: var(--shadow-inset-box); }

.breadcrumb li:hover a { box-shadow: var(--shadow-inset-box); }

.breadcrumb > li + li:before { opacity: .6; padding: 0 0.35rem; color: var(--font-color-main-transparent); content: "\003e"; }

/*---------- 文章+页面-面包屑样式end ----------*/
/*---------- 文章内容样式end ----------*/
.post-header .author-left, .post-header .author-right { --font-color-main: var(--font-color-main-transparent); color: var(--font-color-main) !important; }

.post-head, .post-content { color: var(--font-color-main); }

.post .iconfont { font-size: 1rem; }

/* 文章内容样式 */
.post-content { position: relative; box-sizing: border-box; }

/* 文章版权样式 */
.post-copyright { position: relative; font-size: 0.9rem; line-height: 1.8; color: var(--font-color-main); border-radius: var(--border-radius-medium); box-shadow: var(--shadow-inset-box); z-index: 1; border: var(--border-solid-small); }

.copyright-svgname { position: absolute; height: 3rem; top: 30%; right: 0; opacity: 0.9; z-index: -1; }

/* 文章结束样式 */
.post-end { color: var(--border-color-main); }

.post-end::after, .post-end::before { content: ''; background: var(--border-color-main); max-width: 50%; height: 0.05rem; margin: 0 1rem; flex: 1; }

/* 文章标签样式 */
.category-and-tags { gap: 0.5rem; }

.category-and-tags a { font-size: 0.75rem; color: var(--font-color-main-transparent); padding: 0.25rem 0.5rem; border-radius: var(--border-radius-large); border: var(--border-solid-main); background-color: var(--bg-color-secondary); }

.category-and-tags a:hover { background: var(--border-color-main); }

.category-and-tags .post-tags { gap: 0.5rem; }

.category-and-tags .post-tags a { padding: 0.15rem 0.5rem 0.15rem 0.15rem; }

.category-and-tags .post-tags a::before { content: '#'; display: inline-flex; margin-right: 0.25rem; background-color: var(--bg-color-main); width: 20px; height: 20px; line-height: 20px; font-weight: 700; justify-content: center; border-radius: var(--border-radius-large); }

/* 分享+赞赏 */
.post-tools { gap: 1rem; }

.post-tools .post-tools-item { gap: 0.35rem; }

.post-tools .post-tools-item .post-tools-title { color: var(--font-color-main-transparent); font-size: 0.9rem; }

.post-tools button { width: 3rem; height: 3rem; background-image: var(--gradient-45deg); box-shadow: var(--shadow-box-small); border: var(--border-solid-main); border-radius: var(--border-radius-xlarge); }

.post-tools button .iconfont { font-size: 1.2rem; }

.post-tools button:hover { box-shadow: var(--shadow-inset-box); }

/* 下一篇、上一篇 */
.post-next-prev { gap: 1rem; line-height: 1.8; }

.post-next-prev .post-next, .post-next-prev .post-prev { position: relative; }

.post-next-prev .post-next .next-prev-title, .post-next-prev .post-prev .next-prev-title { cursor: default; line-height: 1; font-size: 1.25rem; }

.post-next-prev .post-next:hover .next-prev-title, .post-next-prev .post-prev:hover .next-prev-title { opacity: 0.7; }

.post-next-prev a { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }

/*---------- 文章内容样式end ----------*/
/*---------- 评论样式st ----------*/
#comments { font-size: 0.9rem; }

/* 评论框 */
#comment-form .form-control { font-size: 0.9rem; }

#comment-form .comment-form-info input:focus { background-color: var(--overlay-color-light-5) !important; }

#comment-form .comment-form-info textarea:focus { background-color: var(--overlay-color-light-5) !important; }

.com-footer .com-tool-list .com-tool-item { position: relative; border-radius: var(--border-radius-base); }

.com-footer .com-tool-list .com-tool-item:hover, .com-footer .com-tool-list .com-tool-item.active { background: var(--bg-color-main); }

.com-footer .com-tool-list .iconfont { font-size: 1.25rem; }

.com-footer .com-tool-list .com-emoji { position: relative; }

.com-footer .com-tool-list .com-emoji .emoji-box { display: none; position: absolute; top: 3rem; left: -0.5rem; z-index: 10; background-image: var(--gradient-45deg); border: var(--border-solid-main); border-radius: var(--border-radius-base); overflow: hidden; box-shadow: var(--shadow-box-small); }

.com-footer .com-tool-list .com-emoji .emoji-dropdown { max-width: 100%; width: 22rem; height: 15rem; text-align: center; overflow-x: hidden; overflow-y: auto; margin: 0; }

.com-footer .com-tool-list .com-emoji .emoji-item { display: inline-block; font-size: 14px; cursor: pointer; }

.com-footer .com-tool-list .com-emoji .emoji-item .gif-img { min-width: 4rem; }

.com-footer .com-tool-list .com-emoji .emoji-item img { width: 2rem; height: auto; max-height: 100%; }

.com-footer .com-tool-list .com-emoji .emoji-item:hover { border-radius: var(--border-radius-medium); background-color: var(--bg-color-main); }

.com-footer .com-tool-list .com-emoji .emoji-bar { background-color: var(--bg-color-main); }

.com-footer .com-tool-list .com-emoji .emoji-bar li { cursor: pointer; }

.com-footer .com-tool-list .com-emoji .emoji-bar li:hover, .com-footer .com-tool-list .com-emoji .emoji-bar li.emoji-active { background-color: var(--bg-color-secondary); }

.com-footer .btn-card { color: var(--font-color-main); font-size: 0.85rem; background-image: var(--gradient-45deg); box-shadow: var(--shadow-box-main); border: var(--border-solid-small); border-radius: var(--border-radius-medium); background-clip: padding-box; }

.com-footer .btn-card:hover { box-shadow: var(--shadow-inset-box); }

/* 评论列表 */
.comment-body { position: relative; font-size: 0.85rem; gap: 0.5rem; }

.comment-body .comment-author { position: relative; gap: 0.5rem; }

.comment-body .comment-author .comment-name .comment-author-ua { font-size: 0.7rem; background-color: var(--color-primary); color: var(--bg-color-main); padding: 0.1rem 0.25rem; border-radius: var(--border-radius-small); }

.comment-body .comment-author .comment-time, .comment-body .comment-author .comment-ua { margin-right: 0.15rem; font-size: 0.8rem; color: var(--font-color-main-transparent); }

.comment-body .comment-author img { width: 40px; height: 40px; border-radius: var(--border-radius-circle); border: var(--border-solid-main); }

.comment-body .comment-content { word-break: break-all; }

.comment-body .comment-content p { display: inline-block; margin: 0; }

.comment-body .comment-content .emoji-image { display: inline-block !important; width: 2rem; height: auto; max-height: 100%; vertical-align: middle; }

.comment-body .comment-content img { display: block; max-width: 100%; width: auto; height: 10rem; margin: 0.5rem 0; border-radius: var(--border-radius-small); }

.comment-body .comment-content .repy-to-author a { color: var(--red); }

.comment-body .comment-footer { position: absolute; right: 0; bottom: 0; color: var(--font-color-main-transparent); font-size: 0.85rem; }

.comment-body .comment-footer .iconfont { color: var(--border-color-main); }

.comment-body .comment-footer:hover .iconfont { color: var(--font-color-main) !important; }

.comment-body:hover .comment-footer .iconfont { color: var(--font-color-main-transparent); }

.comment-parent { border-radius: var(--border-radius-medium); box-shadow: var(--shadow-inset-box); border: var(--border-solid-small); }

.comment-parent .comment-list { border-radius: var(--border-radius-medium); box-shadow: var(--shadow-inset-box); border: var(--border-solid-small); }

.comment-parent .comment-list .comment-list .comment-child { border-bottom: 1px dashed var(--overlay-color-dark-1); }

.comment-parent .comment-list .comment-list .comment-child:last-child { border: none; }

.comment-parent .comment-list .repy-to-author + p { display: contents; }

.comment-child, .comment-parent { margin-bottom: 0.25rem; }

.comment-child:last-child, .comment-parent:last-child { margin-bottom: 0 !important; }

/*评论下一页、上一页*/
.comment-pagination ol { gap: 0.5rem; }

.comment-pagination a { width: 2rem; height: 2rem; display: flex; background-image: var(--gradient-45deg); border: var(--border-solid-small); border-radius: var(--border-radius-medium); box-shadow: var(--shadow-box-main); background-clip: padding-box; justify-content: center; align-items: center; }

.comment-pagination li.current a { font-weight: 700; }

.comment-pagination a:hover, .comment-pagination li.current a { color: var(--color-primary); box-shadow: var(--shadow-inset-box); }

.comment-pagination .com-next .iconfont, .comment-pagination .com-prev .iconfont { font-size: 0.9rem; }

/*---------- 评论样式end ----------*/
/*---------- 弹窗工具：搜索+分享+赞赏按钮样式st ----------*/
.pop-tool-overlay-bg { opacity: 0; visibility: hidden; position: fixed; inset: 0; background: var(--overlay-color-light-1); -webkit-backdrop-filter: var(--backdrop-filter-main); backdrop-filter: var(--backdrop-filter-main); z-index: 997; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; transform: rotate(45deg) scale(0); }

/* 应用Mixins */
.open .pop-tool-overlay-bg { opacity: 1 !important; visibility: visible !important; transform: rotate(0) scale(1) !important; }

.open .pop-tool-box { opacity: 1 !important; visibility: visible !important; top: 45% !important; transform: translate(-50%, -50%) scale(1) !important; }

.pop-tool-box { opacity: 0; visibility: hidden; position: fixed; width: calc(-20px + 100vw); max-height: calc(100vh - 6rem); max-width: 50rem; z-index: 998; top: 35%; left: 50%; transform: translate(-50%, -50%) scale(0); overflow: hidden; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }

/* 海报生成 */
.main-poster .poster-box { width: 400px; max-width: calc(100vw - 1rem); padding: 0 !important; overflow: unset; color: var(--font-color-main); }

.main-poster .poster-box .poster-post-box { --poster-text-color: var(--font-color-main-light); position: relative; background: var(--gradient-0deg); width: 100%; overflow: hidden; border-radius: var(--border-radius-base); }

.main-poster .poster-box .poster-cover { height: 200px; border-radius: var(--border-radius-small); overflow: hidden; }

.main-poster .poster-box .poster-content { gap: 1rem; }

.main-poster .poster-box .poster-content .poster-date { height: 100%; color: var(--gray-dark); background-color: var(--white); border-radius: var(--border-radius-medium); }

.main-poster .poster-box .poster-content .poster-post-content .poster-post-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }

.main-poster .poster-box .poster-content .poster-post-content .poster-post-text { font-size: 0.9rem; color: var(--poster-text-color); }

.main-poster .poster-box .poster-footer { border: var(--border-solid-small); }

.main-poster .poster-box .down-btn-box { width: 100%; position: absolute; bottom: -4rem; }

/* 赞赏独立样式 */
.main-reward .reward-box { width: auto; }

.main-reward .reward-content { gap: 1rem; }

.main-reward .reward-content .reward-qr { color: var(--font-color-muted); box-shadow: var(--shadow-inset-box); border-radius: var(--border-radius-base); overflow: hidden; padding: 0.25rem; }

.main-reward .reward-content img { width: 10rem; border-radius: var(--border-radius-base); }

@media (max-width: 767.98px) { .main-reward .reward-content img { width: 8rem; } }

/* 分享独立样式 */
.share-box { top: 50%; }

.share-box p { text-align: center; color: var(--font-color-main-transparent); background-color: var(--bg-color-primary); border-radius: var(--border-radius-base); border: var(--border-solid-small); }

.share-box p:hover { color: var(--font-color-main); background: var(--overlay-color-light-5); }

.share-box .share-a { gap: 20px; }

.share-box .share-a .share-item { width: 3rem; height: 3rem; background-image: var(--gradient-0deg); box-shadow: var(--shadow-box-main); border: var(--border-solid-main); background-clip: padding-box; border-radius: var(--border-radius-circle); }

.share-box .share-a .share-item:hover { box-shadow: var(--shadow-inset-box); }

.share-box .wechat-qrcode img, .share-box .zdyqr-qrcode img { width: 10rem; height: 10rem; }

/* 搜索独立样式 */
.search-box .search-form { position: relative; }

.search-box .search-name h5 { font-weight: 700; }

.search-box .form-control { position: relative; width: 100%; height: 100%; padding: 0.6rem 2rem 0.6rem 1rem; font-size: 0.9rem; border-radius: var(--border-radius-medium); }

.search-box .site-search-btn { position: absolute; right: 0; top: 0; width: 3rem; height: 100%; z-index: 1; }

/* 关闭按钮样式 */
.close-btn { position: absolute; right: 0; top: 0; background: var(--font-color-main); border-bottom-left-radius: var(--border-radius-medium); }

.close-btn i { color: var(--bg-color-main); }

/*---------- 搜索+分享+赞赏按钮样式end ----------*/