diff --git a/.history/style_20260302002620.css b/.history/style_20260302002620.css new file mode 100644 index 0000000..832850c --- /dev/null +++ b/.history/style_20260302002620.css @@ -0,0 +1,18608 @@ +/* + +Theme Name: argon + +Author: solstice23 + +Author URI: https://solstice23.top/ + +Description: 轻盈、简洁、美观的 Wordpress 主题 + +Version: 1.5.2 + +License: GNU General Public License v3.0 + +License URI: https://www.gnu.org/licenses/gpl-3.0.html + +*/ + + + +@charset "utf-8"; + + +:root { + + --themecolor: #5e72e4; + + --themecolor-R: 94; + + --themecolor-G: 114; + + --themecolor-B: 228; + + --themecolor-H: 231; + + --themecolor-S: 71; + + --themecolor-L: 63; + + --themecolor-rgbstr: var(--themecolor-R), var(--themecolor-G), var(--themecolor-B); + + --themecolor-dark0: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 2.5%), 0%)); + + --themecolor-dark: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 5%), 0%)); + + --themecolor-dark2: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 10%), 0%)); + + --themecolor-dark3: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 15%), 0%)); + + --themecolor-light: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), min(calc(var(--themecolor-L) * 1% + 10%), 100%)); + + --themecolor-gradient: linear-gradient(150deg, var(--themecolor-light) 15%, var(--themecolor) 70%, var(--themecolor-dark0) 94%); + + + + --color-tint-70: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.7), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.7), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.7); + + --color-tint-78: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.78), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.78), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.78); + + --color-tint-80: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.8), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.8), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.8); + + --color-tint-82: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.82), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.82), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.82); + + --color-tint-86: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.86), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.86), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.86); + + --color-tint-92: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.92), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.92), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.92); + + --color-tint-95: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.95), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.95), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.95); + + --color-shade-70: + + calc(30 * 0.7 + var(--themecolor-R) * (1 - 0.7)), + + calc(30 * 0.7 + var(--themecolor-G) * (1 - 0.7)), + + calc(30 * 0.7 + var(--themecolor-B) * (1 - 0.7)); + + --color-shade-75: + + calc(30 * 0.75 + var(--themecolor-R) * (1 - 0.75)), + + calc(30 * 0.75 + var(--themecolor-G) * (1 - 0.75)), + + calc(30 * 0.75 + var(--themecolor-B) * (1 - 0.75)); + + --color-shade-80: + + calc(30 * 0.8 + var(--themecolor-R) * (1 - 0.8)), + + calc(30 * 0.8 + var(--themecolor-G) * (1 - 0.8)), + + calc(30 * 0.8 + var(--themecolor-B) * (1 - 0.8)); + + --color-shade-82: + + calc(30 * 0.82 + var(--themecolor-R) * (1 - 0.82)), + + calc(30 * 0.82 + var(--themecolor-G) * (1 - 0.82)), + + calc(30 * 0.82 + var(--themecolor-B) * (1 - 0.82)); + + --color-shade-86: + + calc(30 * 0.86 + var(--themecolor-R) * (1 - 0.86)), + + calc(30 * 0.86 + var(--themecolor-G) * (1 - 0.86)), + + calc(30 * 0.86 + var(--themecolor-B) * (1 - 0.86)); + + --color-shade-90: + + calc(30 * 0.9 + var(--themecolor-R) * (1 - 0.9)), + + calc(30 * 0.9 + var(--themecolor-G) * (1 - 0.9)), + + calc(30 * 0.9 + var(--themecolor-B) * (1 - 0.9)); + + --color-shade-94: + + calc(30 * 0.94 + var(--themecolor-R) * (1 - 0.94)), + + calc(30 * 0.94 + var(--themecolor-G) * (1 - 0.94)), + + calc(30 * 0.94 + var(--themecolor-B) * (1 - 0.94)); + + --color-shade-96: + + calc(30 * 0.96 + var(--themecolor-R) * (1 - 0.96)), + + calc(30 * 0.96 + var(--themecolor-G) * (1 - 0.96)), + + calc(30 * 0.96 + var(--themecolor-B) * (1 - 0.96)); + + --color-tint-blue: + + calc(204 * 0.6 + var(--themecolor-R) * (1 - 0.6)), + + calc(226 * 0.6 + var(--themecolor-G) * (1 - 0.6)), + + calc(255 * 0.6 + var(--themecolor-B) * (1 - 0.6)); + + + + --color-background: #f4f5f7; + + --color-foreground: #fff; + + --color-widgets: #fff; + + --color-widgets-disabled: #e9ecef; + + --color-border: #dce0e5; + + --color-border-on-foreground: #f3f3f3; + + --color-border-on-foreground-deeper: #eee; + + --color-text-deeper: #212529; + + --color-selection: #cce2ff; + + /* ========== 统一动画系统 - 桌面端和移动端一�?========== */ + /* 动画时长 - 基于 Material Design 3 规范 */ + --animation-instant: 100ms; + --animation-fast: 150ms; + --animation-normal: 250ms; + --animation-slow: 400ms; + --animation-slower: 600ms; + + /* 缓动函数 - Material 3 标准曲线 */ + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --ease-standard-decelerate: cubic-bezier(0, 0, 0, 1); + --ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); + --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); + --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); + --ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); + + /* 弹性缓�?- 用于交互反馈 */ + --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); + --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + + /* 状态层透明�?- Material 3 */ + --state-hover-opacity: 0.08; + --state-focus-opacity: 0.12; + --state-pressed-opacity: 0.12; + --state-dragged-opacity: 0.16; +} + +html.darkmode body { + + --color-background: #282828; + + --color-foreground: #424242; + + --color-widgets: #555; + + --color-widgets-disabled: #474747; + + --color-border: #777; + + --color-border-on-foreground: #555; + + --color-border-on-foreground-deeper: #777; + + --color-text-deeper: #eee; + + --color-darkmode-toolbar: 33, 33, 33; + + --color-darkmode-banner: #212121; + + --color-selection: #607799; + +} + +html.darkmode.amoled-dark body, + +html.darkmode.amoled-dark.immersion-color body { + + --color-background: #111; + + --color-foreground: #000; + + --color-widgets: #151515; + + --color-widgets-disabled: #000; + + --color-border: #222; + + --color-border-on-foreground: #181818; + + --color-border-on-foreground-deeper: #252525; + + --color-text-deeper: #eee; + + --color-selection: #607799; + + + + --color-darkmode-toolbar: 0, 0, 0; + + --color-darkmode-banner: #131313; + +} + + + +html.immersion-color body { + + --color-background: rgb(var(--color-tint-86)); + + --color-foreground: rgb(var(--color-tint-92)); + + --color-widgets: rgb(var(--color-tint-95)); + + --color-widgets-disabled: rgb(var(--color-tint-86)); + + --color-border: rgb(var(--color-tint-78)); + + --color-border-on-foreground: rgb(var(--color-tint-86)); + + --color-border-on-foreground-deeper: rgb(var(--color-tint-80)); + + --color-text-deeper: rgb(var(--color-shade-82)); + + --color-selection: rgb(var(--color-tint-70)); + +} + +html.immersion-color.darkmode body { + + --color-background: rgb(var(--color-shade-94)); + + --color-foreground: rgb(var(--color-shade-90)); + + --color-widgets: rgb(var(--color-shade-86)); + + --color-widgets-disabled: rgb(var(--color-shade-82)); + + --color-border: rgb(var(--color-shade-80)); + + --color-border-on-foreground: rgb(var(--color-shade-82)); + + --color-border-on-foreground-deeper: rgb(var(--color-shade-75)); + + --color-text-deeper: rgb(var(--color-tint-82)); + + --color-selection: rgb(var(--color-shade-70)); + + + + --color-darkmode-toolbar: var(--color-shade-90); + + --color-darkmode-banner: rgb(var(--color-shade-96)); + +} + +/* 主题切换过渡效果 (Dark/Light Mode Transition) */ +html { + transition: none; +} + +html.theme-transitioning, +html.theme-transitioning *, +html.theme-transitioning *::before, +html.theme-transitioning *::after { + transition: + background-color 250ms var(--ease-standard), + border-color 250ms var(--ease-standard), + color 200ms var(--ease-standard), + box-shadow 250ms var(--ease-standard), + fill 200ms var(--ease-standard), + stroke 200ms var(--ease-standard) !important; +} + +/*Argon CSS Override*/ + +.bg-white, + +.card, + +.dropdown-menu, + +.dropdown-menu:before { + + background-color: var(--color-foreground) !important; + +} + +.form-control, + +.form-control:focus, + +.focused .input-group-text, + +.btn-neutral, + +.input-group-text, + +.page-link, + +.modal-content, + +.custom-control-label::before, + +.btn-secondary { + + background-color: var(--color-widgets); + +} + +.page-link { + + border-color: var(--color-border) !important; + +} + +.modal-header, + +.custom-control-label::before { + + border-color: var(--color-border-on-foreground-deeper) !important; + +} + +.page-link:hover { + + background-color: var(--color-widgets-disabled); + +} + +.form-control:disabled, + +.form-control[readonly] { + + background-color: var(--color-widgets-disabled); + +} + + + +/* Main CSS */ + +:root { + + --card-radius: 4px; + + --font: "Open Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, + + Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + +} + +html.themecolor-toodark.darkmode { + + --themecolor: #5e72e4 !important; + + --themecolor-light: #8a98eb !important; + +} + + + +body { + + background: var(--color-background) !important; + + font-family: var(--font); + + overflow: overlay; + +} + +a { + + transition: color var(--animation-normal) var(--ease-standard); + +} + +audio, + +canvas, + +progress, + +video { + + display: inline-block; + + vertical-align: baseline; + +} + +article .post-content { + + margin-top: 6px; + +} + +article .post-content p { + + line-height: 1.8; + + word-wrap: break-word; + +} + +article h1, + +article h2, + +article h3, + +article h4, + +article h5, + +article h6, + +article strong { + + font-weight: 600; + +} + +article h1, + +article h2, + +article h3, + +article h4, + +article h5, + +article h6 { + + margin-top: 18px !important; + + margin-bottom: 15px; + +} + +article h1 { + + font-size: 30px; + +} + +article h2 { + + font-size: 26px; + +} + +article h3 { + + font-size: 22px; + +} + +article h4 { + + font-size: 18px; + +} + +article h5 { + + font-size: 15px; + +} + +article h6 { + + font-size: 13px; + +} + +article figcaption { + + text-align: center; + + opacity: 0.65; + + margin-top: 10px; + +} + +article img, + +.shuoshuo-preview-container img { + + max-width: 100%; + + height: auto; + +} + +.shuoshuo-preview-container img { + + border-radius: var(--card-radius); + +} + +.shuoshuo-preview-container p+p>img:first-child { + + margin-top: 12px; + +} + +article .wp-block-image figcaption, + +.shuoshuo-preview-container .wp-block-image figcaption { + + text-align: center; + + font-size: 14px; + + opacity: 0.6; + +} + +article video, + +.shuoshuo-preview-container video { + + max-width: 100%; + + outline: none; + +} + +article .wp-caption, + +.shuoshuo-preview-container .wp-caption { + + max-width: 100%; + +} + +article .post-content a { + + position: relative; + +} + +article .post-content a:before { + + content: " "; + + position: absolute; + + top: auto; + + bottom: 0px; + + left: 0; + + width: 100%; + + height: 1px; + + background-color: var(--themecolor); + + transition: all 0.2s; + + transform: scaleX(0); + + backface-visibility: hidden; + +} + +article .post-content a[class*="button"]:before { + + display: none; + +} + +article .post-content a:hover:before { + + transform: scaleX(1); + +} + +article .post-content a.no-hover-underline:before { + + display: none; + +} + +html:not(.disable-codeblock-style) article pre:not(.hljs-codeblock) { + + font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", + + "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, + + monospace; + + font-size: 14px; + + line-height: 1.375; + + text-align: left; + + white-space: pre; + + word-spacing: normal; + + word-break: normal; + + tab-size: 4; + + hyphens: none; + + color: #5e6687; + + background: var(--color-border-on-foreground); + + direction: ltr; + + border: 1px solid var(--color-border-on-foreground-deeper); + + padding: 14px; + + border-radius: 3px; + +} + +article .post-content blockquote { + + padding-left: 1em; + + margin: 1em 3em 1em 0; + + font-weight: 400; + + border-left: 4px solid var(--color-border-on-foreground-deeper); + +} + +article .post-content mark { + + padding: 2px; + + margin: 0 5px; + + background: #fffdd1; + + border-bottom: 1px solid #ffedce; + +} + +article .post-content u, + +article .post-content ins { + + text-decoration: none; + + border-bottom: 1px solid; + +} + +html:not(.disable-codeblock-style) article code:not([hljs-codeblock-inner]) { + + font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", + + "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, + + monospace; + + color: #5e6687; + + background: var(--color-border-on-foreground); + + border: 1px solid var(--color-border-on-foreground-deeper); + + direction: ltr; + + border-radius: 3px; + + padding: 0 4px; + +} + +html:not(.disable-codeblock-style) article .post-content>code:not([hljs-codeblock-inner]), + +article .post-content>p>code:not([hljs-codeblock-inner]) { + + padding: 2px 5px; + +} + +article .post-content abbr[title] { + + text-decoration: none; + + cursor: help; + + border-bottom: 1px dotted; + +} + +article .post-content kbd { + + padding: 2px 6px; + + font-size: 90%; + + color: #fff; + + background-color: #333; + + border-radius: 3px; + +} + +article .wp-embedded-content, + +article .blocks-gallery-grid, + +article .wp-block-gallery, + +article .wp-block-media-text { + + max-width: 100%; + +} + +article .blocks-gallery-grid.is-cropped .blocks-gallery-image .fancybox-wrapper, + +article .blocks-gallery-grid.is-cropped .blocks-gallery-item .fancybox-wrapper, + +article .wp-block-gallery.is-cropped .blocks-gallery-image .fancybox-wrapper, + +article .wp-block-gallery.is-cropped .blocks-gallery-item .fancybox-wrapper { + + height: 100%; + + flex: 1; + + -o-object-fit: cover; + + object-fit: cover; + +} + +article .wp-block-cover, + +article .wp-block-cover-image { + + padding: 0; + +} + +article .wp-block-cover-image .wp-block-cover__inner-container, + +article .wp-block-cover .wp-block-cover__inner-container { + + position: absolute; + +} + +article table { + + max-width: 100%; + + word-break: break-word; + +} + +article table>tbody>tr>td, + +article table>tbody>tr>th, + +article table>tfoot>tr>td, + +article table>tfoot>tr>th, + +article table>thead>tr>td, + +article table>thead>tr>th { + + padding: 1rem; + + vertical-align: top; + + border: 1px solid var(--color-border-on-foreground-deeper); + +} + +.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { + + background-color: var(--color-border-on-foreground) !important; + +} + +article figure.is-style-stripes table>tbody>tr>td, + +article figure.is-style-stripes table>tbody>tr>th, + +article figure.is-style-stripes table>tfoot>tr>td, + +article figure.is-style-stripes table>tfoot>tr>th, + +article figure.is-style-stripes table>thead>tr>td, + +article figure.is-style-stripes table>thead>tr>th { + + border: none !important; + +} + +.wp-block-table.is-style-stripes { + + border-bottom: none !important; + +} + +article hr, + +article .wp-block-separator { + + border-top: 0.0625rem solid var(--color-border-on-foreground-deeper); + + border-bottom: none; + +} + +/* ---------- Mermaid 图表容器样式 ---------- */ +.mermaid-container { + background: var(--color-foreground); + border-radius: 8px; + padding: 20px; + margin: 20px -20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; + position: relative; + opacity: 0; + animation: mermaidFadeIn 0.3s ease-in-out forwards; +} + +/* 需�?18.2: Mermaid 加载动画容器 */ +.mermaid-loading { + background: var(--color-foreground); + border-radius: 8px; + padding: 40px 20px; + margin: 20px -20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 150px; +} + +.mermaid-loading-spinner { + width: 40px; + height: 40px; + border: 3px solid rgba(94, 114, 228, 0.2); + border-top-color: #5e72e4; + border-radius: 50%; + animation: mermaidSpinner 0.8s linear infinite; +} + +.mermaid-loading-text { + margin-top: 15px; + color: #666; + font-size: 14px; +} + +html.darkmode .mermaid-loading { + background: var(--color-widgets); +} + +html.darkmode .mermaid-loading-text { + color: #aaa; +} + +html.darkmode .mermaid-loading-spinner { + border-color: rgba(94, 114, 228, 0.3); + border-top-color: #5e72e4; +} + +/* 加载动画旋转 */ +@keyframes mermaidSpinner { + to { + transform: rotate(360deg); + } +} + +.mermaid-container-inner { + overflow: auto; + transform-origin: top left; + transition: transform 0.3s ease; +} + +.mermaid-container svg { + width: 100% !important; + height: auto !important; + display: block; +} + +/* 缩放控制按钮 */ +.mermaid-zoom-controls { + position: absolute; + top: 10px; + right: 10px; + display: flex; + gap: 5px; + z-index: 10; + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(10px); + border-radius: 6px; + padding: 5px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + opacity: 0; + transform: translateY(-10px); + transition: opacity 0.3s ease, transform 0.3s ease; + pointer-events: none; +} + +.mermaid-container:hover .mermaid-zoom-controls { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +html.darkmode .mermaid-zoom-controls { + background: rgba(30, 30, 30, 0.85); +} + +.mermaid-zoom-btn { + width: 32px; + height: 32px; + border: none; + background: transparent; + cursor: pointer; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: #5e72e4; + transition: all 0.2s; +} + +.mermaid-zoom-btn:hover { + background: rgba(94, 114, 228, 0.1); +} + +.mermaid-zoom-btn:active { + transform: scale(0.95); +} + +.mermaid-zoom-btn:disabled { + opacity: 0.4; + cursor: not-allowed; + pointer-events: none; +} + +.mermaid-zoom-level { + display: flex; + align-items: center; + padding: 0 8px; + font-size: 13px; + color: #666; + min-width: 50px; + justify-content: center; +} + +html.darkmode .mermaid-zoom-level { + color: #aaa; +} + +/* 按钮 tooltip */ +.mermaid-zoom-btn[title] { + position: relative; +} + +.mermaid-zoom-btn[title]::after { + content: attr(title); + position: absolute; + bottom: -35px; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.85); + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + white-space: nowrap; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease; + z-index: 100; +} + +.mermaid-zoom-btn[title]:hover::after { + opacity: 1; +} + +html.darkmode .mermaid-zoom-btn[title]::after { + background: rgba(255, 255, 255, 0.9); + color: #333; +} + +/* 提示文本 */ +.mermaid-hint { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.7); + color: white; + padding: 6px 12px; + border-radius: 4px; + font-size: 12px; + pointer-events: none; + opacity: 0; + transition: opacity 0.3s; + white-space: nowrap; + z-index: 9; +} + +.mermaid-container:hover .mermaid-hint { + opacity: 1; +} + +html.darkmode .mermaid-hint { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); +} + +/* 拖拽时的光标和视觉反馈 */ +/* 需求 13.1, 13.2, 13.4: 优化拖拽视觉反馈 */ +.mermaid-container-inner.dragging { + cursor: grabbing !important; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +.mermaid-container-inner:not(.dragging) { + cursor: grab; +} + +/* 拖拽时禁用 SVG 内的文本选择 */ +.mermaid-container-inner.dragging svg { + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +/* 需求 14: Mermaid 全屏模式样式 */ +.mermaid-fullscreen { + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: 100vw !important; + height: 100vh !important; + margin: 0 !important; + padding: 20px !important; + z-index: 99999 !important; + background: var(--color-foreground) !important; + border-radius: 0 !important; + box-shadow: none !important; + overflow: auto !important; +} + +html.darkmode .mermaid-fullscreen { + background: var(--color-widgets) !important; +} + +/* 全屏模式下的工具栏 */ +.mermaid-fullscreen .mermaid-zoom-controls { + opacity: 1; + transform: translateY(0); + background: rgba(255, 255, 255, 0.95); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); +} + +html.darkmode .mermaid-fullscreen .mermaid-zoom-controls { + background: rgba(30, 30, 30, 0.95); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); +} + +/* 全屏按钮激活状态 */ +.mermaid-zoom-btn[data-action="fullscreen"].active { + background: rgba(94, 114, 228, 0.2); + color: var(--themecolor); +} + +/* 需求 15: Mermaid 导出功能样式 */ +/* 导出按钮 */ +.mermaid-export-btn { + position: relative; +} + +/* 导出菜单 */ +.mermaid-export-menu { + position: absolute; + top: 45px; + right: 10px; + background: white; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + padding: 8px; + display: flex; + flex-direction: column; + gap: 4px; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all 0.2s ease; + z-index: 11; + min-width: 140px; +} + +.mermaid-export-menu.visible { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +html.darkmode .mermaid-export-menu { + background: #2a2a2a; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); +} + +/* 导出选项按钮 */ +.mermaid-export-option { + padding: 8px 12px; + border: none; + background: transparent; + color: #333; + text-align: left; + cursor: pointer; + border-radius: 4px; + font-size: 14px; + transition: background 0.2s; + white-space: nowrap; +} + +.mermaid-export-option:hover { + background: rgba(94, 114, 228, 0.1); + color: var(--themecolor); +} + +html.darkmode .mermaid-export-option { + color: #ddd; +} + +html.darkmode .mermaid-export-option:hover { + background: rgba(94, 114, 228, 0.2); +} + +/* 需求 15.5: 导出错误提示 */ +.mermaid-export-error { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(220, 53, 69, 0.95); + color: white; + padding: 12px 20px; + border-radius: 6px; + font-size: 14px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + z-index: 100; + animation: slideInDown 0.3s ease; + max-width: 80%; + text-align: center; +} + +@keyframes slideInDown { + from { + opacity: 0; + transform: translate(-50%, -60%); + } + + to { + opacity: 1; + transform: translate(-50%, -50%); + } +} + +html.darkmode .mermaid-export-error { + background: rgba(200, 35, 51, 0.95); +} + +/* 全屏模式下的内部容器 */ +.mermaid-fullscreen .mermaid-container-inner { + max-height: calc(100vh - 100px); + display: flex; + align-items: center; + justify-content: center; +} + +/* 全屏模式下的提示文本 */ +.mermaid-fullscreen .mermaid-hint { + opacity: 1; + bottom: 20px; +} + +/* Mermaid 淡入动画 */ +@keyframes mermaidFadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 文章卡片内的 Mermaid 图表 */ +article.card .mermaid-container { + margin: 20px -20px; +} + +/* 响应式调整 */ +/* 需求 16.1: 移动端工具栏适配 - 调整按钮大小 */ +@media screen and (max-width: 768px) { + .mermaid-container { + margin: 15px -15px; + padding: 15px; + } + + article.card .mermaid-container { + margin: 15px -15px; + } + + /* 移动端工具栏按钮放大，便于触摸 */ + .mermaid-zoom-controls { + padding: 8px; + gap: 8px; + } + + .mermaid-zoom-btn { + width: 40px; + height: 40px; + font-size: 20px; + } + + .mermaid-zoom-level { + font-size: 14px; + min-width: 55px; + padding: 0 10px; + } + + /* 移动端提示文本调整 */ + .mermaid-hint { + font-size: 11px; + padding: 5px 10px; + bottom: 8px; + } + + /* 移动端导出菜单调整 */ + .mermaid-export-menu { + right: 8px; + top: 50px; + min-width: 150px; + } + + .mermaid-export-option { + padding: 10px 14px; + font-size: 15px; + } +} + +/* 需求 16.5: 横屏模式优化 - 自动调整图表布局 */ +@media screen and (max-width: 768px) and (orientation: landscape) { + .mermaid-container { + max-height: 70vh; + overflow-y: auto; + } + + .mermaid-container-inner { + max-height: 65vh; + } + + /* 横屏时工具栏更紧凑 */ + .mermaid-zoom-controls { + padding: 5px; + gap: 5px; + top: 5px; + right: 5px; + } + + .mermaid-zoom-btn { + width: 36px; + height: 36px; + font-size: 18px; + } + + /* 横屏时隐藏提示文本，节省空间 */ + .mermaid-hint { + display: none; + } +} + +@media screen and (max-width: 480px) { + .mermaid-container { + margin: 10px -10px; + padding: 10px; + } + + article.card .mermaid-container { + margin: 10px -10px; + } + + .mermaid-zoom-controls { + top: 5px; + right: 5px; + padding: 3px; + } + + .mermaid-zoom-btn { + width: 28px; + height: 28px; + font-size: 16px; + } +} + +/* ---------- Mermaid 错误提示样式 ---------- */ +.mermaid-error-container { + background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%); + border: 2px solid #fc8181; + border-left: 5px solid #e53e3e; + border-radius: var(--card-radius); + padding: 20px; + margin: 20px 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15); + transition: box-shadow 0.3s ease; +} + +.mermaid-error-container:hover { + box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25); +} + +.mermaid-error-header { + display: flex; + align-items: center; + margin-bottom: 15px; + padding-bottom: 12px; + border-bottom: 1px solid rgba(220, 53, 69, 0.2); +} + +.mermaid-error-icon { + font-size: 28px; + margin-right: 12px; + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + + 0%, + 100% { + transform: scale(1); + opacity: 1; + } + + 50% { + transform: scale(1.1); + opacity: 0.8; + } +} + +.mermaid-error-title { + font-size: 18px; + font-weight: bold; + color: #c53030; + letter-spacing: 0.3px; +} + +.mermaid-error-body { + margin-bottom: 15px; + line-height: 1.6; +} + +.mermaid-error-type { + font-weight: bold; + color: #742a2a; + margin: 8px 0; + padding: 4px 8px; + background: rgba(220, 53, 69, 0.1); + border-radius: 4px; + display: inline-block; +} + +.mermaid-error-message { + color: #742a2a; + margin: 8px 0; + padding: 8px 12px; + background: rgba(255, 255, 255, 0.6); + border-radius: 4px; + border-left: 3px solid #fc8181; +} + +.mermaid-error-code { + margin-top: 15px; +} + +.mermaid-error-code summary { + cursor: pointer; + color: var(--themecolor); + font-weight: bold; + padding: 8px 12px; + background: rgba(255, 255, 255, 0.6); + border-radius: 4px; + user-select: none; + transition: all 0.2s ease; + display: inline-block; +} + +.mermaid-error-code summary:hover { + background: rgba(255, 255, 255, 0.9); + transform: translateX(4px); +} + +.mermaid-error-code summary::marker { + color: var(--themecolor); +} + +.mermaid-error-code[open] summary { + margin-bottom: 10px; +} + +.mermaid-error-code pre { + background: #2d3748; + color: #e2e8f0; + padding: 15px; + border-radius: 6px; + overflow-x: auto; + margin-top: 10px; + font-family: 'Courier New', Consolas, Monaco, monospace; + font-size: 14px; + line-height: 1.6; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.mermaid-error-code code { + background: transparent; + color: inherit; + padding: 0; +} + +::-webkit-scrollbar { + + width: 10px; + + height: 8px; + + background-color: rgba(0, 0, 0, 0); + +} + +::-webkit-scrollbar-track { + + background-color: transparent; + +} + +::-webkit-scrollbar-thumb { + + background-color: rgba(0, 0, 0, 0.25); + + border-radius: 100px; + + border: 2px solid transparent; + + background-clip: content-box; + +} + +::-webkit-scrollbar-thumb:hover { + + background-color: rgba(var(--themecolor-rgbstr), 0.7) !important; + +} + +*::selection { + + background-color: var(--color-selection); + +} + +*::-moz-selection { + + background-color: var(--color-selection); + +} + +*::-webkit-selection { + + background-color: var(--color-selection); + +} + +html.darkmode *::selection { + + background-color: var(--color-selection); + +} + +html.darkmode *::-moz-selection { + + background-color: var(--color-selection); + +} + +html.darkmode *::-webkit-selection { + + background-color: var(--color-selection); + +} + +html.use-serif body { + + --font: "Noto Serif SC", serif, system-ui; + +} + +html.use-big-shadow *.shadow-sm { + + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important; + +} + +/*标题样式*/ + +.article-header-style-1 article h1, + +.article-header-style-1 article h2, + +.article-header-style-1 article h3 { + + position: relative; + +} + +.article-header-style-1 article h1:after, + +.article-header-style-1 article h2:after, + +.article-header-style-1 article h3:after { + + content: ""; + + display: block; + + position: absolute; + + background: var(--themecolor); + + opacity: 0.25; + + pointer-events: none; + + border-radius: 15px; + + left: -2px; + + bottom: 0px; + +} + +.article-header-style-1 article h1:after { + + width: 45px; + + height: 13px; + +} + +.article-header-style-1 article h2:after { + + width: 40px; + + height: 11px; + +} + +.article-header-style-1 article h3:after { + + width: 30px; + + height: 9px; + +} + +.article-header-style-1 article h1.text-center:after, + +.article-header-style-1 article h1[style*="text-align: center"]:after, + +.article-header-style-1 article h1[style*="text-align:center"]:after, + +.article-header-style-1 article h1[class*="text-align-center"]:after, + +.article-header-style-1 article h2.text-center:after, + +.article-header-style-1 article h2[style*="text-align: center"]:after, + +.article-header-style-1 article h2[style*="text-align:center"]:after, + +.article-header-style-1 article h2[class*="text-align-center"]:after, + +.article-header-style-1 article h3.text-center:after, + +.article-header-style-1 article h3[style*="text-align: center"]:after, + +.article-header-style-1 article h3[style*="text-align:center"]:after, + +.article-header-style-1 article h3[class*="text-align-center"]:after { + + left: 50%; + + transform: translateX(-50%); + +} + +.article-header-style-1 article h1.text-right:after, + +.article-header-style-1 article h1[style*="text-align: right"]:after, + +.article-header-style-1 article h1[style*="text-align:right"]:after, + +.article-header-style-1 article h1[class*="text-align-right"]:after, + +.article-header-style-1 article h2.text-right:after, + +.article-header-style-1 article h2[style*="text-align: right"]:after, + +.article-header-style-1 article h2[style*="text-align:right"]:after, + +.article-header-style-1 article h2[class*="text-align-right"]:after, + +.article-header-style-1 article h3.text-right:after, + +.article-header-style-1 article h3[style*="text-align: right"]:after, + +.article-header-style-1 article h3[style*="text-align:right"]:after, + +.article-header-style-1 article h3[class*="text-align-right"]:after { + + left: unset; + + right: -2px; + +} + +.article-header-style-2 article h1:before, + +.article-header-style-2 article h2:before, + +.article-header-style-2 article h3:before { + + content: ""; + + display: inline-block; + + background: var(--themecolor); + + opacity: 1; + + pointer-events: none; + + border-radius: 15px; + + width: 6px; + + vertical-align: middle; + + margin-right: 15px; + +} + +.article-header-style-2 article h1:before { + + height: 25px; + + transform: translateY(-1px); + +} + +.article-header-style-2 article h2:before { + + height: 20px; + + transform: translateY(-2px); + +} + +.article-header-style-2 article h3:before { + + height: 16px; + + transform: translateY(-1px); + +} + +.no-results header h1:after { + + display: none !important; + +} + +/*卡片圆角*/ + +.card { + + border-radius: var(--card-radius); + +} + +/*主题色适配*/ + +.text-primary { + + color: var(--themecolor) !important; + +} + +a, + +.btn-neutral { + + color: var(--themecolor); + +} + +a:hover { + + color: var(--themecolor-dark); + +} + +a.text-primary:focus, + +a.text-primary:hover { + + color: var(--themecolor) !important; + +} + +.btn-primary.disabled, +.btn-primary:disabled { + border-color: var(--themecolor) !important; + background-color: var(--themecolor) !important; + color: #fff !important; +} + +.custom-toggle input:checked+.custom-toggle-slider { + border-color: var(--themecolor); +} + +.custom-toggle input:checked+.custom-toggle-slider:before { + background-color: var(--themecolor); +} + +.btn-primary { + border-color: var(--themecolor) !important; + background-color: var(--themecolor) !important; + color: #fff !important; +} + +.btn-primary:hover { + border-color: var(--themecolor-dark) !important; + background-color: var(--themecolor-dark) !important; + color: #fff !important; +} + +.btn-primary.focus, +.btn-primary:focus { + border-color: var(--themecolor) !important; + background-color: var(--themecolor) !important; + box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.5) !important; + color: #fff !important; +} + +.btn-primary:not(:disabled):not(.disabled).active, +.btn-primary:not(:disabled):not(.disabled):active, +.show>.btn-primary.dropdown-toggle { + border-color: var(--themecolor-dark2) !important; + background-color: var(--themecolor-dark2) !important; + color: #fff !important; +} + +.btn-primary:not(:disabled):not(.disabled).active:focus, +.btn-primary:not(:disabled):not(.disabled):active:focus, +.show>.btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.5) !important; +} + +.btn-outline-primary { + border-color: var(--themecolor) !important; + color: var(--themecolor) !important; + background-color: transparent !important; +} + +.btn-outline-primary:hover { + border-color: var(--themecolor) !important; + background-color: var(--themecolor) !important; + color: #fff !important; +} + +.btn-outline-primary.focus, +.btn-outline-primary:focus { + box-shadow: 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.5) !important; +} + +.btn-outline-primary.disabled, +.btn-outline-primary:disabled { + color: var(--themecolor) !important; + background-color: transparent !important; +} + +.btn-outline-primary:not(:disabled):not(.disabled).active, +.btn-outline-primary:not(:disabled):not(.disabled):active, +.show>.btn-outline-primary.dropdown-toggle { + border-color: var(--themecolor) !important; + background-color: var(--themecolor) !important; + color: #fff !important; +} + +.btn-primary:active, +.btn-outline-primary:active { + border-color: var(--themecolor-dark2) !important; + background-color: var(--themecolor-dark2) !important; +} + +/* 链接按钮和中性按钮主题色覆盖 */ +.btn-link { + color: var(--themecolor) !important; +} + +.btn-link:hover { + color: var(--themecolor-dark) !important; +} + +.btn-neutral { + color: var(--themecolor) !important; +} + +.btn-neutral:hover { + color: var(--themecolor-dark) !important; +} + +.page-item.active .page-link, + +.custom-checkbox .custom-control-input:checked~.custom-control-label::before, + +.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before, + +.custom-control-input:not(:disabled):active~.custom-control-label::before { + + border-color: var(--themecolor) !important; + + background-color: var(--themecolor); + +} + +/*页面框架*/ + +#content { + + padding: 0 5px; + + max-width: 1200px; + + margin: auto; + + margin-top: -30vh; + +} + +html.no-banner #content { + + margin-top: 85px; + +} + +html.banner-mini #content, + +html.is-home.banner-as-cover #content { + + margin-top: unset; + +} + +@media screen and (min-width: 1700px) { + + #content { + + max-width: 1500px; + + } + +} + +@media screen and (max-width: 900px) { + + html.no-banner #content { + + margin-top: 60px; + + } + +} + +#primary { + + width: calc(100% - 280px); + + float: right; + +} + +#leftbar { + + padding-left: 20px; + + padding-right: 20px; + + width: 280px; + + float: left; + + margin-bottom: 25px; + +} + +#main { + + padding: 0 20px; + + overflow: visible; + + position: relative; + +} + +#main.waterflow { + + padding: 0; + +} + +.waterflow-placeholder { + + pointer-events: none; + +} + + + +/*双栏反转布局*/ + +html.double-column-reverse #leftbar { + + float: right; + +} + +html.double-column-reverse #primary { + + float: left; + +} + +/*单栏布局*/ + +html.single-column #leftbar { + + display: none; + +} + +/* 单栏布局 - 移动端侧边栏支持 */ +@media screen and (max-width: 900px) { + html.single-column #leftbar { + display: block; + position: fixed; + background: var(--color-foreground); + top: 0; + left: -300px; + height: 100%; + padding: 0; + overflow: auto; + z-index: 1002; + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important; + transition: all 0.3s ease; + } + + html.single-column.leftbar-opened #leftbar { + left: 0px; + } + + html.single-column #fabtn_open_sidebar { + display: block !important; + } + + html.single-column #open_sidebar { + visibility: visible !important; + } +} + +html.single-column #primary { + + width: 100%; + + float: none; + + max-width: 1200px; + + margin: auto; + +} + +html.single-column #primary.waterflow { + + max-width: 1500px; + +} + +html.single-column #main { + + padding: 0; + +} + +/* 单栏布局 - 桌面端隐藏侧边栏按钮 */ +@media screen and (min-width: 901px) { + html.single-column #fabtn_open_sidebar { + display: none !important; + } +} + +html.single-column .page-information-card { + + width: 100%; + + max-width: 1200px; + + margin-left: auto; + + margin-right: auto; + +} + +/* 单栏布局 - 桌面端隐藏顶栏侧边栏按钮 */ +@media screen and (min-width: 901px) { + html.single-column #open_sidebar { + visibility: hidden; + } +} + +/*三栏布局*/ + +#rightbar { + + padding-left: 0; + + padding-right: 0; + + width: 280px; + + float: right; + + margin-bottom: 25px; + +} + +#rightbar>.card { + + margin-left: 10px; + + margin-right: 20px; + + margin-bottom: 15px; + + padding: 20px 25px; + +} + +#rightbar>.card ul { + + list-style: none; + + padding-inline-start: 0; + +} + +#rightbar>.card ul li { + + margin-bottom: 5px; + +} + +#rightbar>.card>h6 { + + margin-bottom: 15px; + +} + +@media screen and (min-width: 1100px) { + + html.triple-column #leftbar { + + padding-right: 10px; + + } + + html.triple-column #leftbar_part2.sticky { + + width: 250px; + + } + + html.triple-column #primary { + + width: calc(100% - 560px); + + float: left; + + } + +} + +html.triple-column #content { + + max-width: 1500px; + +} + +@media screen and (min-width: 1700px) { + + html.triple-column #content { + + max-width: 1600px; + + } + +} + +@media screen and (max-width: 1100px) { + + #rightbar { + + display: none; + + } + +} + + + +/*Pjax加载动画 & 卡片动画*/ + +@keyframes card-show { + + 0% { + + opacity: 0; + + transform: scale(0.95) translateY(8px); + + } + + 100% { + + opacity: 1; + + transform: none; + + } + +} + +#primary { + + transition: all var(--animation-normal) var(--ease-standard); + +} + +.card { + + animation: card-show var(--animation-normal) var(--ease-emphasized-decelerate); + + transform-origin: center top; + +} + +.card .card { + + animation: none; + +} + +/*顶栏�?Banner 部分*/ + +#navbar-main { + + --toolbar-color: var(--themecolor-rgbstr); + +} + +.headroom--pinned { + + z-index: 100; + +} + +html.darkmode #navbar-main { + + --toolbar-color: var(--color-darkmode-toolbar); + +} + +@media (min-width: 1700px) { + + .navbar-main .container { + + max-width: 1500px !important; + + } + +} + +@media (min-width: 1200px) and (max-width: 1700px) { + + .navbar-main .container { + + max-width: 1200px !important; + + } + +} + +@media (min-width: 900px) { + + .navbar-main .container { + + max-width: 100%; + + } + +} + +.dropdown-menu .dropdown-item { + + line-height: 1.5; + +} + +.dropdown-item:focus, + +.dropdown-item:hover { + + background: var(--color-border-on-foreground); + +} + +.dropdown-item:active { + + background: var(--themecolor); + +} + +.navbar-brand { + + text-transform: none; + + vertical-align: middle; + +} + +.navbar-brand:focus, + +.navbar-brand:hover { + + color: #fff !important; + +} + +.navbar-brand.navbar-icon-mobile { + + display: none; + +} + +#navbar-main { + + transition: background 0s, padding 0.15s ease; + + background-color: var(--toolbar-color) !important; + + padding-top: 0.5rem; + + padding-bottom: 0.5rem; + + transition: all var(--animation-normal) var(--ease-standard); + +} + +#navbar-main.navbar-ontop { + + padding-top: 1rem; + + padding-bottom: 1rem; + +} + +body.leftbar-can-headroom.headroom---unpinned #navbar-main { + + transform: translateY(-100%); + +} + + + +#navbar_search_input_container:not(.open) { + + cursor: pointer; + +} + +#navbar_search_input_container .input-group { + + box-shadow: none; + + border-radius: 20px; + + overflow: hidden; + + transition: all var(--animation-normal) var(--ease-standard); + +} + +#navbar_search_input_container:not(.open) .input-group { + + background: transparent; + +} + +#navbar_search_input_container:not(.open) .input-group:hover { + + background: rgba(255, 255, 255, 0.15); + +} + +#navbar_search_input_container.open .input-group { + + background: rgba(255, 255, 255, 0.2); + + -webkit-backdrop-filter: blur(12px); + + backdrop-filter: blur(12px); + +} + +#navbar_search_input_container.open .input-group:hover, + +#navbar_search_input_container.open .input-group:focus-within { + + background: rgba(255, 255, 255, 0.95); + + backdrop-filter: none; + +} + +#navbar_search_input_container:not(.open) .input-group-text { + + background: transparent; + + color: #fff; + +} + +#navbar_search_input_container.open .input-group-text { + + background: transparent; + + color: #fff; + + transition: color var(--animation-normal) var(--ease-standard); + +} + +#navbar_search_input_container.open .input-group:hover .input-group-text, + +#navbar_search_input_container.open .input-group:focus-within .input-group-text { + + color: #666; + +} + +#navbar_search_input_container .input-group-text i.fa { + font-size: 16px; + line-height: 1; +} + +#navbar_search_input_container:not(.open) input.form-control { + + width: 0 !important; + + padding: 0 !important; + + background: transparent; + +} + +#navbar_search_input_container.open input.form-control { + + background: transparent; + + color: #fff; + + transition: color var(--animation-normal) var(--ease-standard); + +} + +#navbar_search_input_container.open input.form-control::placeholder { + + color: rgba(255, 255, 255, 0.7); + + transition: color var(--animation-normal) var(--ease-standard); + +} + +#navbar_search_input_container.open .input-group:hover input.form-control, + +#navbar_search_input_container.open .input-group:focus-within input.form-control { + + color: #333; + +} + +#navbar_search_input_container.open .input-group:hover input.form-control::placeholder, + +#navbar_search_input_container.open .input-group:focus-within input.form-control::placeholder { + + color: #999; + +} + +#navbar_search_input_container .input-group-prepend { + + margin-right: 0px; + +} + +#navbar_search_input_container .input-group-text { + display: flex; + align-items: center; + justify-content: center; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + transition: all var(--animation-slow) var(--ease-emphasized); +} + +#navbar_search_input_container input.form-control { + width: 200px; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + line-height: 1.5; + transition: all 0.5s cubic-bezier(0.4, 0, 0, 1); +} + +#navbar_search_btn_mobile { + + display: none; + +} + +#navbar_menu_mask { + + display: none; + +} + +html.navbar-absolute #navbar-main { + + position: absolute !important; + +} + +html.navbar-absolute:not(.no-banner) #navbar-main { + + background-color: transparent; + + box-shadow: none; + +} + +html.no-banner #navbar-main { + + background-color: rgba(var(--themecolor-rgbstr), 0.82) !important; + +} + +html.no-banner.toolbar-blur #navbar-main { + + background-color: rgba(var(--themecolor-rgbstr), 0.6) !important; + + -webkit-backdrop-filter: blur(20px) saturate(130%); + + backdrop-filter: blur(20px) saturate(130%); + +} + +html.no-banner.toolbar-blur #navbar-main.navbar-no-blur { + + background-color: rgba(var(--themecolor-rgbstr), 0.85) !important; + + backdrop-filter: blur(0px); + +} + +.banner { + + margin-bottom: 25px; + + height: 71.8vh; + + overflow: hidden; + + background-position: center; + + background-repeat: no-repeat; + + background-size: cover; + +} + +.banner-container { + + height: calc(40vh - 120px) !important; + +} + +.banner-title { + + font-size: 1.8em; + + vertical-align: middle; + + position: absolute; + + top: 50%; + + transform: translateY(-50%); + + width: 100%; + + left: 0; + +} + +.banner-subtitle { + + margin-top: 10px; + + font-size: 16px; + + opacity: 0.9; + +} + +.banner-title-inner.typing-effect:after, + +.banner-subtitle.typing-effect:after { + + content: ""; + + width: 0px; + + height: 30px; + + display: inline-block; + + transform: translateX(5px) translateY(5px); + + animation: cursor-flash-effect 1s; + + animation-fill-mode: forwards; + + outline: 1px solid #fff; + + animation-iteration-count: var(--animation-cnt); + +} + +.banner-subtitle.typing-effect:after { + + height: 16px; + + transform: translateX(5px) translateY(2px); + + outline: 0.5px solid #fff; + + opacity: 0.9; + +} + +@keyframes cursor-flash-effect { + + 0% { + + opacity: 0; + + } + + 15% { + + opacity: 1; + + } + + 50% { + + opacity: 1; + + } + + 65% { + + opacity: 0; + + } + + 100% { + + opacity: 0; + + } + +} + +html.no-banner .banner { + + display: none; + +} + +html.banner-mini .banner { + + height: unset; + +} + +html.banner-mini .banner>.banner-container { + + height: unset !important; + +} + +html.banner-mini .banner>.banner-container>.banner-title { + + position: unset; + + top: unset; + + transform: unset; + +} + +html.is-home.banner-as-cover.banner-as-cover .banner { + + height: 100vh; + +} + +html.is-home.banner-as-cover.banner-as-cover .banner-container { + + height: 100% !important; + +} + +.cover-scroll-down { + + display: block; + + width: max-content; + + color: #fff; + + position: absolute; + + left: 50%; + + bottom: 10px; + + transform: translateX(-50%); + + cursor: pointer; + + font-size: 36px; + + transition: opacity 0.3s ease; + +} + +html:not(.is-home) .cover-scroll-down { + + opacity: 0; + + pointer-events: none; + +} + +.cover-scroll-down.hidden { + + opacity: 0; + + pointer-events: none; + +} + + + +/* 左侧�?*/ + +.leftbar-banner { + + /*background: linear-gradient(150deg,#7795f8 15%,#6772e5 70%,#555abf 94%);*/ + + background: var(--themecolor-gradient); + + text-align: center; + + border-radius: var(--card-radius) var(--card-radius) 0 0; + +} + +.leftbar-banner-title { + + font-size: 20px; + + display: block; + +} + +.leftbar-banner-subtitle { + + margin-top: 15px; + + margin-bottom: 8px; + + font-size: 13px; + + opacity: 0.8; + + display: block; + +} + + + +.leftbar-menu { + + margin-top: 10px; + + margin-left: 0; + + margin-right: 0; + + padding: 0; + +} + +.leftbar-menu-item { + + height: 36px; + + line-height: 36px; + + list-style: none; + + padding: 0; + + position: relative; + +} + +.leftbar-menu-item:hover>.leftbar-menu-subitem { + + opacity: 1; + + transform: none; + + pointer-events: unset; + +} + +.leftbar-menu-subitem { + + position: absolute; + + left: calc(100% + 8px); + + top: 0; + + background: var(--color-foreground); + + width: max-content; + + min-width: 150px; + + z-index: 1; + + height: unset; + + border-radius: 3px; + + padding: 6px 0; + + opacity: 0; + + transform: translateX(-8px); + + pointer-events: none; + + transition: all 0.3s ease; + +} + +.leftbar-menu-subitem:before { + + content: ""; + + width: 8px; + + height: calc(100% + 12px); + + display: block; + + position: absolute; + + top: 0; + + left: -8px; + +} + +#leftbar_part1_menu>.leftbar-menu-item>.leftbar-menu-subitem { + + left: calc(100% + 12px); + +} + +#leftbar_part1_menu>.leftbar-menu-item>.leftbar-menu-subitem:before { + + width: 12px; + + left: -12px; + +} + +.leftbar-menu-subitem>.leftbar-menu-item:first-child a { + + border-radius: 3px 3px 0 0; + +} + +.leftbar-menu-subitem>.leftbar-menu-item:last-child a { + + border-radius: 0 0 3px 3px; + +} + +.leftbar-menu-item>a { + + display: block; + + height: 100%; + + width: 100%; + + margin: 0; + + padding: 0 20px; + + overflow-wrap: break-word; + + word-wrap: break-word; + + background-color: transparent; + + color: #32325d !important; + + text-decoration: none; + + outline: none; + + cursor: pointer; + + font-size: 14px; + + transition: background var(--animation-fast) var(--ease-standard); + +} + +.leftbar-menu-item>a:hover, + +.leftbar-menu-item.current>a { + + background-color: var(--color-border-on-foreground); + +} + +.leftbar-menu-item>a>i { + + margin-right: 8px; + + width: 15px; + + text-align: center; + +} + +.leftbar-menu-item.leftbar-menu-item-haschildren:after { + + content: "\f0da"; + + font: normal normal normal 14px/1 FontAwesome; + + font-size: 14px; + + text-rendering: auto; + + -webkit-font-smoothing: antialiased; + + -moz-osx-font-smoothing: grayscale; + + position: absolute; + + right: 16px; + + top: 0; + + line-height: 36px; + + opacity: 0.6; + + transform: translateY(1px); + + transition: all 0.3s ease; + + pointer-events: none; + +} + + + +.leftbar-search-button { + + padding-top: 0; + + transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); + +} + +.leftbar-search-button.open { + + padding: 0 15px 18px 15px; + + margin-top: -9px; + +} + +#leftbar_search_container { + + transition: width var(--animation-normal) var(--ease-emphasized), height var(--animation-normal) var(--ease-emphasized), box-shadow var(--animation-fast) var(--ease-standard), + + transform var(--animation-fast) var(--ease-standard); + + height: 30px; + + transform: unset !important; + + text-transform: capitalize; + + background-color: var(--color-border-on-foreground-deeper); + + color: var(--color-text-deeper); + +} + +html.darkmode.amoled-dark #leftbar_search_container { + + background: #151515; + +} + +.leftbar-search-button.open #leftbar_search_container { + + height: 45px; + +} + +.leftbar-search-button:not(.open) #leftbar_search_container:focus-within { + + box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); + +} + +#leftbar_search_input { + + position: absolute; + + left: -1px; + + top: -1px; + + width: calc(100% + 2px); + + height: calc(100% + 2px); + + transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); + + opacity: 0; + + cursor: pointer; + + user-select: none; + +} + +.leftbar-search-button.open #leftbar_search_input { + + opacity: 1; + + cursor: text; + + user-select: all; + + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + +} + + + +#leftbar_part2 { + + margin-top: 10px; + + transition: all var(--animation-normal) var(--ease-standard); + +} + +#leftbar_part2.sticky { + + position: fixed; + + width: 240px; + + top: 80px; + +} + +body.leftbar-can-headroom.headroom---unpinned #leftbar_part2.sticky { + + top: 10px; + +} + +html.navbar-absolute #leftbar_part2.sticky { + + top: 10px !important; + +} + +#leftbar_part2_inner { + padding: 10px; +} + +#leftbar_part2.sticky #leftbar_part2_inner { + max-height: calc(100vh - 110px - var(--leftbar-part3-height, 0px)); +} + +/* 只有文章目录标签需要滚�?*/ +#leftbar_part2.sticky #leftbar_tab_catalog { + max-height: calc(100vh - 200px - var(--leftbar-part3-height, 0px)); + overflow-y: auto; +} + +#leftbar_tab_catalog::-webkit-scrollbar { + width: 6px; +} + +#leftbar_tab_catalog::-webkit-scrollbar-track { + background: transparent; +} + +#leftbar_tab_catalog::-webkit-scrollbar-thumb { + border-width: 1px; + background-color: rgba(0, 0, 0, 0.2); +} + +html.darkmode #leftbar_tab_catalog::-webkit-scrollbar-thumb { + border-width: 1px; + background-color: rgba(255, 255, 255, 0.2); +} + +#leftbar_tab_catalog::-webkit-scrollbar-button { + height: 5px; + pointer-events: none; +} + +.sidebar-tab-switcher { + + font-size: 13px; + + padding: 0 !important; + +} + +.sidebar-tab-switcher>a { + + padding-bottom: 5px; + + border-bottom: 1px solid transparent; + + transition: border-bottom var(--animation-fast) var(--ease-standard); + +} + +.sidebar-tab-switcher>a.active { + + border-bottom: 1px solid var(--themecolor); + +} + +html.darkmode .sidebar-tab-switcher>a.active { + + border-bottom: 1px solid var(--themecolor-light); + +} + + + +#leftbar_overview_author_image { + + width: 100px; + + height: 100px; + + margin: auto; + + background-position: center; + + background-repeat: no-repeat; + + background-size: cover; + + background-color: rgba(127, 127, 127, 0.1); + +} + +#leftbar_overview_author_name { + + margin-top: 15px; + + font-size: 18px; + +} + +#leftbar_overview_author_description { + + font-size: 14px; + + margin-top: -4px; + + opacity: 0.8; + +} + +.site-state { + + overflow: hidden; + + line-height: 1.4; + + white-space: nowrap; + + text-align: center; + + margin-top: 15px; + +} + +.site-state-item { + + display: inline-block; + + border-left: 1px solid var(--color-border-on-foreground-deeper); + + padding: 0 10px; + +} + +.site-state-item:first-child { + + border-left: none !important; + +} + +.site-state-item>a { + + cursor: pointer; + +} + +.site-state-item-count { + + display: block; + + text-align: center; + + color: #32325d; + + font-weight: bold; + + font-size: 16px; + +} + +.site-state-item-name { + + font-size: 13px; + + color: #525f82; + +} + +.tag.badge { + + font-size: 14px; + + text-transform: none; + + transition: background var(--animation-fast) var(--ease-standard); + + background: var(--color-border-on-foreground); + + border: 1px solid var(--color-border-on-foreground-deeper); + + padding: 5px 10px; + + margin-right: 12px; + + margin-bottom: 15px; + +} + +.tag.badge:hover { + + background: var(--color-border-on-foreground-deeper); + +} + +.tag-num { + + font-size: 12px; + + opacity: 0.7; + +} + +.site-author-links { + + display: flex; + + flex-wrap: wrap; + + justify-content: left; + + margin-top: 15px; + +} + +.site-author-links-item { + + display: inline-block; + + width: 50%; + + border-radius: 4px; + + margin-top: 5px; + + transition: background var(--animation-fast) var(--ease-standard); + + background: transparent; + +} + +.site-author-links-item:hover { + + background: var(--color-border-on-foreground); + +} + +.site-author-links-item>a { + + display: block; + + width: 100%; + + padding: 2px 8px; + + font-size: 15px; + + color: #32325d !important; + + text-align: left; + + overflow: hidden; + + white-space: nowrap; + + text-overflow: ellipsis; + +} + +.site-friend-links-title { + + margin-top: 25px; + + border-top: 1px dotted var(--color-border-on-foreground-deeper); + + padding-top: 15px; + +} + +.site-friend-links-ul { + + margin-top: 8px; + + padding: 3px 0 0; + +} + +.site-friend-links-item { + + margin: 0; + + padding: 0; + + list-style: none; + + margin-bottom: 3px; + +} + +.site-friend-links-item>a { + + max-width: 280px; + + box-sizing: border-box; + + display: inline-block; + + max-width: 100%; + + overflow: hidden; + + white-space: nowrap; + + text-overflow: ellipsis; + + color: #32325d; + + border-bottom: 1px solid #999; + +} + +#leftbar_announcement { + + margin-bottom: 10px; + + background: var(--themecolor-gradient); + +} + +html.darkmode #leftbar_announcement { + + background: var(--color-foreground); + +} + +.leftbar-announcement-body { + + padding: 15px 1.2em; + + padding-bottom: 22px; + +} + +.leftbar-announcement-title { + + font-size: 18px; + +} + +.leftbar-announcement-content { + + font-size: 15px; + + line-height: 1.8; + + padding-top: 8px; + + opacity: 0.9; + +} + +#leftbar_tab_tools ul, + +#leftbar_tab_tools ol { + + list-style: none; + + padding: 0; + +} + +#leftbar_tab_tools ul li { + + padding-top: 10px; + + padding-bottom: 10px; + + border-bottom: var(--color-border-on-foreground) solid 1px; + +} + +#leftbar_tab_tools ul li:first-child { + + padding-top: 5px; + +} + +#leftbar_tab_tools>div>h6:first-child, + +#leftbar_tab_tools .wp-block-group__inner-container>h6:first-child { + + font-size: 17px; + + font-weight: 600; + + position: relative; + + display: block; + + width: max-content; + +} + +#leftbar_tab_tools>div>h6:first-child:after, + +#leftbar_tab_tools .wp-block-group__inner-container>h6:first-child:after { + + content: ""; + + display: block; + + background: var(--themecolor); + + width: 30px; + + height: 9px; + + position: absolute; + + left: 0; + + bottom: -1px; + + border-radius: 10px; + + opacity: 0.25; + + pointer-events: none; + +} + +.wp-calendar-table caption { + + font-size: 14px; + + text-align: center; + + opacity: 0.7; + +} + +.wp-block-calendar table * { + + background: transparent !important; + + border: none !important; + + padding-top: 5px; + + padding-bottom: 8px; + +} + +.wp-block-calendar table th { + + opacity: 0.6; + +} + +.wp-block-calendar tbody td a { + + position: relative; + + text-decoration: none; + +} + +.wp-block-calendar tbody td a:before { + + content: ""; + + display: block; + + background: var(--themecolor); + + position: absolute; + + width: 25px; + + height: 25px; + + border-radius: 20px; + + opacity: 0.2; + + transform: translateX(-2px); + + z-index: 0; + +} + +.wp-calendar-nav-prev a, + +.wp-calendar-nav-next a { + + text-decoration: none !important; + + border: 1px solid var(--themecolor); + + color: var(--themecolor); + + padding: 1px 8px; + + border-radius: 19px; + + font-size: 14px; + + transition: all var(--animation-normal) var(--ease-standard); + + user-select: none; + +} + +.wp-calendar-nav-prev a:hover, + +.wp-calendar-nav-next a:hover { + + background-color: var(--themecolor); + + color: #fff !important; + + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; + +} + +.wp-calendar-nav { + + padding-bottom: 12px; + + display: flex; + + flex-direction: row; + + flex-wrap: nowrap; + + justify-content: center; + + align-items: center; + + align-content: center; + +} + +html.darkmode .wp-calendar-table caption, + +html.darkmode .wp-block-calendar tbody td { + + color: #eee; + +} + +/*底栏*/ + +#footer { + + background: var(--themecolor-gradient); + + color: #fff; + + width: 100%; + + float: right; + + margin-bottom: 25px; + + text-align: center; + + padding: 3px 20px 20px; + + line-height: 1.8; + + transition: none; + + user-select: none; + + -webkit-user-select: none; + + -moz-user-select: none; + + -ms-user-select: none; + +} + +#footer a { + + color: #fff; + +} + + + +/* ======================================== + 浮动按钮组件 (Float Action Buttons) + ======================================== */ + +/* 容器样式 */ +#float_action_buttons { + position: fixed; + bottom: 35px; + right: 20px; + z-index: 1000; + display: flex; + flex-direction: column; + align-items: center; + transition: + opacity var(--animation-normal) var(--ease-standard), + transform var(--animation-normal) var(--ease-standard); +} + +#float_action_buttons.fabtns-float-left { + left: 20px; + right: auto; +} + +#float_action_buttons.fabtns-float-left .fabtn-show-on-right { + display: none; +} + +#float_action_buttons:not(.fabtns-float-left) .fabtn-show-on-left { + display: none; +} + +/* 首页横幅模式下隐�?*/ +html.is-home.banner-as-cover #float_action_buttons.hidden { + opacity: 0; + pointer-events: none; +} + +/* 加载状�?- 初始隐藏 */ +.fabtns-unloaded { + opacity: 0; + pointer-events: none; + transition: opacity var(--animation-normal) var(--ease-standard); +} + +/* 基础按钮样式 - 重置所�?Bootstrap 样式 */ +#float_action_buttons .fabtn, +#float_action_buttons .fabtn.btn, +#float_action_buttons .fabtn.btn-icon, +#float_action_buttons .fabtn.btn-neutral, +#float_action_buttons button.fabtn { + width: 44px !important; + height: 44px !important; + min-width: 44px !important; + min-height: 44px !important; + max-width: 44px !important; + max-height: 44px !important; + padding: 0 !important; + margin: 5px 0 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + position: relative; + overflow: visible; + border: none !important; + border-radius: var(--card-radius) !important; + background-color: var(--color-foreground) !important; + color: var(--themecolor) !important; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.08), + 0 4px 16px rgba(0, 0, 0, 0.04); + cursor: pointer; + transition: + background-color var(--animation-fast) var(--ease-standard), + color var(--animation-fast) var(--ease-standard), + transform var(--animation-normal) var(--ease-spring), + box-shadow var(--animation-normal) var(--ease-standard), + opacity var(--animation-fast) var(--ease-standard); +} + +#float_action_buttons .fabtn:first-child { + margin-top: 0 !important; +} + +#float_action_buttons .fabtn:hover { + color: #fff !important; + background-color: var(--themecolor) !important; + transform: translateY(-3px) scale(1.05); + box-shadow: + 0 6px 20px rgba(var(--themecolor-rgbstr), 0.35), + 0 12px 28px rgba(var(--themecolor-rgbstr), 0.2) !important; +} + +#float_action_buttons .fabtn:active { + color: #fff !important; + background-color: var(--themecolor-dark) !important; + transform: translateY(-1px) scale(0.98); + box-shadow: + 0 2px 8px rgba(var(--themecolor-rgbstr), 0.25) !important; +} + +/* 按钮内图标居�?*/ +#float_action_buttons .fabtn .btn-inner--icon { + display: flex !important; + align-items: center !important; + justify-content: center !important; + width: 100%; + height: 100%; +} + +#float_action_buttons .fabtn i { + font-size: 16px; + line-height: 1; +} + +/* 隐藏状�?*/ +#float_action_buttons .fabtn.fabtn-hidden { + width: 0 !important; + height: 0 !important; + min-width: 0 !important; + min-height: 0 !important; + max-width: 0 !important; + max-height: 0 !important; + opacity: 0 !important; + margin: 0 !important; + padding: 0 !important; + box-shadow: none !important; + pointer-events: none !important; + transform: scale(0) !important; + overflow: hidden !important; +} + +/* 左右切换按钮 - 尺寸较小 */ +#float_action_buttons #fabtn_toggle_sides, +#float_action_buttons #fabtn_toggle_sides.btn { + width: 32px !important; + height: 32px !important; + min-width: 32px !important; + min-height: 32px !important; + max-width: 32px !important; + max-height: 32px !important; + border-radius: var(--card-radius) !important; + opacity: 0.6; + font-size: 11px; +} + +#float_action_buttons #fabtn_toggle_sides:hover { + opacity: 1; +} + +/* 阅读进度按钮 */ +#float_action_buttons #fabtn_reading_progress { + overflow: visible; + font-size: 11px; + font-weight: 600; +} + +#float_action_buttons #fabtn_reading_progress_bar { + position: absolute; + left: 0; + top: 0; + width: 0; + height: 100%; + border-radius: var(--card-radius); + background: var(--themecolor); + opacity: 0.12; + transition: width var(--animation-fast) var(--ease-standard); + pointer-events: none; +} + +#float_action_buttons #fabtn_reading_progress_details { + position: relative; + z-index: 1; +} + +/* 夜间模式按钮图标切换 */ +#float_action_buttons #fabtn_toggle_darkmode i.fa { + margin: 0; +} + +#float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { + display: none; +} + +html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-moon-o { + display: none; +} + +html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { + display: inline-block; +} + +/* 侧边栏打开按钮（移动端�?*/ +#float_action_buttons #fabtn_open_sidebar { + display: none; +} + +/* 侧边栏遮�?*/ +#sidebar_mask { + display: none; + opacity: 0; +} + +/* 设置弹窗 */ +#fabtn_blog_settings_popup { + position: fixed; + right: 85px; + bottom: 35px; + padding: 20px 24px; + width: max-content; + width: -moz-max-content; + min-width: 350px; + max-width: calc(100vw - 170px); + max-height: calc(100vh - 70px); + opacity: 0; + pointer-events: none; + transform: translateX(12px) scale(0.96); + transition: + opacity var(--animation-normal) var(--ease-emphasized), + transform var(--animation-normal) var(--ease-emphasized); + animation: none !important; + border-radius: 20px; + background: var(--color-foreground); + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.15), + 0 4px 12px rgba(0, 0, 0, 0.08); + + -webkit-backdrop-filter: blur(24px) saturate(180%); + + backdrop-filter: blur(24px) saturate(180%); + overflow-y: auto; +} + +#float_action_buttons.fabtns-float-left #fabtn_blog_settings_popup { + left: 85px; + right: unset; + transform: translateX(-12px) scale(0.96); +} + +/* 设置弹窗打开状�?*/ +.blog_settings_opened #fabtn_blog_settings_popup { + opacity: 1 !important; + transform: none !important; + pointer-events: auto !important; +} + +.blog_settings_opened #fabtn_toggle_blog_settings_popup { + opacity: 1 !important; + color: #fff !important; + background-color: var(--themecolor) !important; + pointer-events: auto !important; + transform: scale(1.05); +} + +.blog_settings_opened .fabtn { + pointer-events: none; + opacity: 0.3; +} + +.blog_settings_opened #fabtn_toggle_sides { + opacity: 0 !important; +} + +#close_blog_settings { + text-align: right; + font-size: 12px; + margin-right: -12px; + cursor: pointer; + opacity: 0.6; + transition: opacity var(--animation-fast) var(--ease-standard); +} + +#close_blog_settings:hover { + opacity: 1; +} + +/* 暗色模式浮动按钮 */ +html.darkmode .fabtn { + color: #ddd; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + 0 4px 16px rgba(0, 0, 0, 0.15); +} + +html.darkmode .fabtn:hover { + color: #fff !important; + background-color: var(--themecolor) !important; + box-shadow: + 0 6px 20px rgba(var(--themecolor-rgbstr), 0.4), + 0 12px 28px rgba(0, 0, 0, 0.3) !important; +} + +html.darkmode #fabtn_blog_settings_popup { + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.4), + 0 4px 12px rgba(0, 0, 0, 0.25); +} + +.blog-setting-item { + display: flex; + flex-flow: row; + align-items: center; + padding: 10px 0; +} + +/* 设置面板标题样式 */ +.blog-setting-item>div:first-child { + font-weight: 500; + color: var(--color-text-deeper); +} + +#blog_setting_toggle_darkmode_and_amoledarkmode { + + cursor: pointer; + +} + +html:not(.amoled-dark) #blog_setting_toggle_darkmode_and_amoledarkmode span:nth-of-type(2) { + + display: none; + +} + +html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode span:first-of-type { + + display: none; + +} + +#blog_setting_toggle_darkmode_and_amoledarkmode:before { + + content: attr(tooltip-switch-to-blackmode); + + position: absolute; + + top: -32px; + + left: 50%; + + line-height: 22px; + + font-weight: normal; + + color: #fff; + + background: #32325d; + + padding: 3px 10px; + + font-size: 12px; + + border-radius: 3px; + + transition: all 0.3s ease; + + transform: translateX(-50%) translateY(5px); + + opacity: 0; + + width: max-content; + + width: -moz-max-content; + + pointer-events: none; + +} + +html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { + + content: attr(tooltip-switch-to-darkmode); + +} + +#blog_setting_toggle_darkmode_and_amoledarkmode:hover:before { + + transform: translateX(-50%); + + opacity: 0.7; + +} + +.blog-setting-font, + +.blog-setting-shadow { + + text-transform: none; + + padding: 3px 10px; + +} + +.blog-setting-font:hover, + +.blog-setting-shadow:hover { + + color: #fff + /*var(--themecolor)*/ + ; + + /*background-color: transparent !important;*/ + +} + +/* 设置面板分段选择器优�?*/ +.blog-setting-selector-left { + + margin-right: 0 !important; + + border-top-right-radius: 0; + + border-bottom-right-radius: 0; + + transform: none !important; + + border-radius: 8px 0 0 8px; + + padding: 8px 14px; + + font-size: 13px; + + font-weight: 500; + + transition: all var(--animation-fast) var(--ease-standard); + +} + +.blog-setting-selector-right { + + border-top-left-radius: 0; + + border-bottom-left-radius: 0; + + margin-left: 0 !important; + + transform: none !important; + + border-left: 0; + + border-radius: 0 8px 8px 0; + + padding: 8px 14px; + + font-size: 13px; + + font-weight: 500; + + transition: all var(--animation-fast) var(--ease-standard); + +} + +html:not(.use-serif) #blog_setting_font_sans_serif { + + color: #fff; + + background: var(--themecolor); + + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); + +} + +html.use-serif #blog_setting_font_serif { + + color: #fff; + + background: var(--themecolor); + + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); + +} + +html:not(.use-big-shadow) #blog_setting_shadow_small { + + color: #fff; + + background: var(--themecolor); + + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); + +} + +html.use-big-shadow #blog_setting_shadow_big { + + color: #fff; + + background: var(--themecolor); + + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); + +} + +.blog-setting-filter-btn { + + border-radius: 12px; + + outline: none !important; + + border: 2px solid transparent; + + height: 44px; + + width: 44px; + + margin-left: 6px; + + cursor: pointer; + + font-size: 12px; + + font-weight: 500; + + transition: all var(--animation-fast) var(--ease-standard); + +} + +.blog-setting-filter-btn:hover { + + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); + + transform: translateY(-2px); + +} + +#blog_setting_filter_off { + + background: rgba(var(--themecolor-rgbstr), 0.05); + + color: var(--themecolor); + +} + +#blog_setting_filter_sunset { + + background: rgba(255, 255, 200, 1); + + color: #6e5a00; + +} + +#blog_setting_filter_darkness { + + background: rgba(80, 80, 80, 0.7); + + color: #eee; + +} + +#blog_setting_filter_grayscale { + + background: rgba(200, 200, 200, 0.8); + + color: #333; + +} + +#blog_setting_filter_off.active { + + border: 1px solid var(--themecolor); + +} + +#blog_setting_filter_sunset.active { + + border: 1px solid #6e5a00; + +} + +#blog_setting_filter_darkness.active { + + border: 1px solid #111; + +} + +#blog_setting_filter_grayscale.active { + + border: 1px solid #333; + +} + +/* 风格选择按钮 */ +.blog-setting-style-btn { + border-radius: 8px; + outline: none !important; + border: 1px solid transparent; + height: 36px; + padding: 0 12px; + margin-left: 5px; + cursor: pointer; + font-size: 13px; + font-weight: 500; + transition: all var(--animation-fast) var(--ease-standard); + background: rgba(var(--themecolor-rgbstr), 0.08); + color: var(--themecolor); +} + +.blog-setting-style-btn:hover { + background: rgba(var(--themecolor-rgbstr), 0.15); + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.15); +} + +.blog-setting-style-btn.active { + background: var(--themecolor); + color: #fff; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); +} + +html.darkmode .blog-setting-style-btn { + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.9); +} + +html.darkmode .blog-setting-style-btn:hover { + background: rgba(255, 255, 255, 0.15); +} + +html.darkmode .blog-setting-style-btn.active { + background: var(--themecolor); + color: #fff; +} + +html.filter-sunset { + + filter: sepia(30%); + +} + +html.filter-darkness #primary:after { + + content: ""; + + position: fixed; + + left: 0; + + top: 0; + + right: 0; + + bottom: 0; + + height: 100vh; + + width: 100vw; + + background: rgba(0, 0, 0, 0.4); + + z-index: 999999999; + + pointer-events: none; + +} + +html.filter-grayscale { + + filter: grayscale(1); + +} + +#blog_setting_card_radius_to_default { + + position: relative; + +} + +#blog_setting_card_radius_to_default:before { + + content: attr(tooltip); + + position: absolute; + + top: -30px; + + left: 50%; + + line-height: 15px; + + font-weight: normal; + + color: #fff; + + background: #32325d; + + padding: 3px 10px; + + font-size: 12px; + + border-radius: 3px; + + transition: all 0.3s ease; + + transform: translateX(-50%) translateY(5px); + + opacity: 0; + + width: max-content; + + width: -moz-max-content; + + pointer-events: none; + +} + +#blog_setting_card_radius_to_default:hover:before { + + transform: translateX(-50%); + + opacity: 0.7; + +} + +/*页码*/ + +.pagination { + + width: max-content; + + width: -moz-max-content; + + padding-top: 15px; + + padding-bottom: 15px; + + margin: auto; + + margin-bottom: 25px; + +} + +.pagination.pagination-mobile { + + display: none; + +} + +.page-link { + + transition: background-color var(--animation-fast) var(--ease-standard); + +} + + + +/*文章*/ + +.post { + + margin-bottom: 25px; + + padding: 30px 30px; + + padding-bottom: 35px; + +} + +.post-preview { + + transition: all var(--animation-slow) var(--ease-emphasized); + +} + +.post-title { + + font-size: 26px; + + letter-spacing: 0.5px; + + transition: all var(--animation-normal) var(--ease-standard); + +} + +.post-title:hover { + + letter-spacing: 1px; + +} + +#main.waterflow .post-title { + + transition: all var(--animation-normal) var(--ease-standard); + + display: inline-block; + +} + +#main.waterflow .post-title:hover { + + letter-spacing: 0.5px; + + transform: scale(1.02); + + text-rendering: optimizeLegibility; + +} + +.post-header { + + margin-bottom: 12px; + +} + +.post-meta { + + margin-top: 6px; + + display: flex; + + flex-wrap: wrap; + + align-items: center; + + justify-content: center; + + gap: 6px; + +} + +.post-meta-detail { + + font-size: 14.5px; + + line-height: 24px; + + opacity: 0.8; + + display: inline-block; + + white-space: nowrap; + +} + +.post-meta-detail i { + + margin-right: 3px; + +} + +.post-meta-devide { + + display: inline-block; + + font-size: 14.5px; + + line-height: 24px; + + opacity: 0.5; + + user-select: none; + +} + +.post-meta-detail-categories-space { + + margin-left: 2px; + + margin-right: 2px; + +} + +.post-header.post-header-with-thumbnail { + + margin: -30px -30px 35px -30px; + + border-radius: var(--card-radius) var(--card-radius) 0 0; + + overflow: hidden; + + position: relative; + +} + +.post-thumbnail { + + width: 100%; + + min-height: 250px; + + max-height: 25vh; + + object-fit: cover; + + pointer-events: none; + +} + +/* 图片加载过渡效果 */ +.post-thumbnail { + transition: opacity 0.3s ease 0s; +} + +.single .post-thumbnail, + +.page .post-thumbnail { + + max-height: 30vh; + + min-height: 250px; + +} + +.post-header.post-header-with-thumbnail .post-header-text-container { + + position: absolute; + + bottom: 0; + + left: 0; + + width: 100%; + + color: #fff; + + opacity: 0.9; + + padding-bottom: 35px; + + padding-top: 35px; + + background: rgba(0, 0, 0, 0.05); + + background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0)); + +} + +.post-header.post-header-with-thumbnail .post-header-text-container .post-title { + + color: rgba(255, 255, 255, 0.95) !important; + + /*text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);*/ + + filter: drop-shadow(0px 1px 5px #0005); + +} + +.post-header.post-header-with-thumbnail .post-header-text-container .post-meta { + + text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); + +} + +.post-outdated-info { + + color: var(--themecolor); + + border-left: 2px solid var(--themecolor); + + padding: 5px 20px; + + margin-top: 10px; + + margin-bottom: 25px; + + background: rgba(var(--themecolor-rgbstr), 0.1); + +} + +.post-outdated-info>i { + + font-size: 20px; + + margin-right: 15px; + + transform: translateY(2px); + +} + +.post-header-with-thumbnail+.post-content>.post-outdated-info { + + margin-top: -15px; + +} + +.post-content { + + line-height: 1.8; + + margin-bottom: 8px; + +} + +.post-content p { + + font-weight: normal; + +} + +.post-tags { + + margin-top: 10px; + + margin-bottom: -4px; + +} + +.post-tags>i { + + margin-right: 5px; + +} + +.tag.post-meta-detail-tag { + + margin-bottom: 4px; + + margin-right: 7px; + + font-size: 12px; + +} + +.additional-content-after-post+.post-tags { + + margin-top: 12px; + +} + +/* 文章预览样式 2 */ + +article.post-preview-layout-2 { + + display: flex; + + flex-direction: row; + + padding: 0; + + min-height: 200px; + + overflow: visible; + +} + +article.post-preview-layout-2 .post-header.post-header-with-thumbnail { + + margin: 0; + + border-radius: var(--card-radius) 0 0 var(--card-radius); + + text-align: left; + + width: 300px; + + height: 200px; + + flex-shrink: 0; + + overflow: hidden; + +} + +article.post-preview-layout-2 .post-thumbnail { + + width: 100%; + + height: 200px !important; + + max-height: 200px !important; + + object-fit: cover; + + object-position: center center; + +} + +article.post-preview-layout-2 .post-content-container { + + padding: 20px 28px; + + flex: 1; + + display: flex; + + flex-direction: column; + + max-width: 100%; + + overflow: hidden; + +} + +article.post-preview-layout-2 .post-content { + + flex: 1; + + margin-top: 10px; + + display: -webkit-box; + + -webkit-line-clamp: 3; + + -webkit-box-orient: vertical; + + overflow: hidden; + +} + +article.post-preview-layout-2 .post-title { + max-width: max-content; +} + +article.post-preview-layout-2 .post-meta { + justify-content: flex-start; +} + +/* 文章预览样式 3 */ + +article.post-preview-layout-3 .post-header { + + margin-bottom: 10px; + +} + +article.post-preview-layout-3 .post-header.post-header-with-thumbnail { + + margin-bottom: 25px; + +} + +article.post-preview-layout-3 .post-thumbnail { + + max-height: 20vh; + +} + +/*Reference*/ + +sup.reference { + + white-space: nowrap; + + transition: box-shadow 0.3s ease; + + border-radius: 1px; + +} + +sup.reference:focus { + + box-shadow: 0 0 0 2px var(--color-widgets), 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.3); + + outline: none; + +} + +.tippy-box[data-theme~="scroll-y"] .tippy-content { + + max-height: 200px; + + overflow-y: auto; + +} + +.tippy-box[data-theme~="light"] { + + background-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"][data-placement^="top"]>.tippy-arrow:before { + + border-top-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"][data-placement^="bottom"]>.tippy-arrow:before { + + border-bottom-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"][data-placement^="left"]>.tippy-arrow:before { + + border-left-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"][data-placement^="right"]>.tippy-arrow:before { + + border-right-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"]>.tippy-backdrop { + + background-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"]>.tippy-svg-arrow { + + fill: var(--color-widgets); + +} + + + +html.darkmode .tippy-box[data-theme~="light"] { + + color: #eee; + + background-color: var(--color-widgets); + +} + +.reference-list { + + padding-left: 0; + + list-style: inside none; + + counter-reset: ol; + + margin-bottom: 0; + +} + +.reference-list li { + + font-size: 14px; + + position: relative; + + display: flex; + +} + +.reference-list li .space { + + pointer-events: none; + +} + +.reference-list li .space:before { + + content: ""; + + position: absolute; + + left: 0; + + right: 0; + + top: 0; + + bottom: 0; + + display: block; + + border-radius: 3px; + + transition: background 0.3s ease; + + pointer-events: none; + + background: transparent; + +} + +.reference-list li .space:focus:before { + + background: rgba(var(--themecolor-rgbstr), 0.15); + +} + +.reference-list li:before { + + text-align: right; + + counter-increment: ol; + + content: counter(ol) ". "; + + white-space: pre; + +} + +.reference-list li>div>*:first-child { + + margin-right: 5px; + +} + +.reference-list li>div>sup { + + margin-left: 1px; + +} + +.reference-list li>div>sup:last-of-type { + + margin-right: 5px; + +} + +/*文章输入密码界面*/ + +.post-password-form { + + margin-top: 45px; + + margin-bottom: 55px; + +} + +.post-password-form-text { + + margin: auto; + + margin-bottom: 15px; + +} + +.post-password-form-input { + + margin: auto; + + margin-bottom: 20px; + +} + +.post-password-hint { + + margin-top: 10px; + + color: var(--themecolor); + + opacity: 0.9; + +} + +/*侧栏文章目录*/ + +#leftbar_catalog { + margin-left: -5px; + width: calc(100% + 0px); + height: auto; +} + +#leftbar_catalog::-webkit-scrollbar { + width: 4px; +} + +#leftbar_catalog::-webkit-scrollbar-track { + background: transparent; +} + +#leftbar_catalog::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.15); + border-radius: 2px; +} + +html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.15); +} + +#leftbar_catalog ul { + padding: 0; + list-style: none; +} + +#leftbar_catalog .index-item, + +#leftbar_catalog .index-link { + + width: 100%; + + display: block; + + color: #32325d; + + text-decoration: none; + + box-sizing: border-box; + +} + +#leftbar_catalog .index-link { + + font-size: 15px; + + padding: 4px 8px 4px 8px; + + cursor: pointer; + + transition: background-color 0.3s ease, border-left-color 0.3s ease, color 0.3s ease; + + border-left: 3px solid transparent; + + word-break: break-all; + + border-radius: 3px; + +} + +#leftbar_catalog .index-item.current>.index-link { + + color: var(--themecolor); + + font-weight: bold; + +} + +#leftbar_catalog .index-link:hover { + + background-color: var(--color-border-on-foreground-deeper); + +} + +#leftbar_catalog .index-subItem-box .index-item { + + padding-left: 20px; + +} + + + +/*搜索等页面的标题卡片*/ + +.page-information-card { + + margin: 30px 20px; + + margin-top: 0px; + + background: var(--color-foreground) !important; + +} + +.search-filter-wrapper { + + display: inline-block; + + margin-right: 12px; + +} + +.search-filter-wrapper>.custom-control-label { + + line-height: 25px; + +} + + + +/*文章导航 (�?下一篇文�?*/ + +.post-navigation { + + margin-bottom: 25px; + + padding: 30px 25px; + + padding-top: 25px; + + font-size: 18px; + + display: block !important; + +} + +.post-navigation-item { + + width: calc(50%); + + display: inline-block; + + vertical-align: top; + +} + +.page-navigation-extra-text { + + font-size: 22px; + + opacity: 0.85; + + display: block; + + margin-bottom: 15px; + +} + +.post-navigation-pre .page-navigation-extra-text i { + + margin-right: 10px; + +} + +.post-navigation-next .page-navigation-extra-text i { + + margin-left: 10px; + +} + +.post-navigation-pre { + + padding-right: 10px; + +} + +.post-navigation-next { + + padding-left: 10px; + + text-align: right; + +} + +/*相关文章*/ + +.related-posts { + + display: block; + + white-space: nowrap; + + margin-bottom: 25px; + + padding: 0; + + padding-bottom: 0; + +} + +.related-post-card { + + display: inline-block; + + height: 105px; + + width: 180px; + + border-radius: 5px; + + margin-right: 10px; + + font-size: 16px; + + line-height: 27px; + + white-space: normal; + + transition: all 0.3s ease; + + position: relative; + + background: var(--themecolor-gradient); + + overflow: hidden; + +} + +.related-post-card:hover { + + filter: brightness(0.9); + + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + + border-color: transparent; + +} + +.related-post-title.clamp { + + color: white; + +} + +.related-post-card-container { + + position: absolute; + + left: 0; + + right: 0; + + top: 0; + + bottom: 0; + + padding: 10px 15px; + +} + +.related-post-card-container.has-thumbnail { + + background: rgba(0, 0, 0, 0.2); + + color: #fff; + + transition: all 0.3s ease; + +} + +.related-post-card-container.has-thumbnail:hover { + + background: rgba(0, 0, 0, 0.3); + +} + +.related-post-title { + + max-height: 81px; + + overflow: hidden; + +} + +.related-post-arrow { + + position: absolute; + + right: 15px; + + bottom: 15px; + + font-size: 15px; + + pointer-events: none; + +} + +.related-post-thumbnail { + + width: 100%; + + height: 100%; + + object-fit: cover; + +} + +i.related-post-arrow.fa.fa-chevron-right { + + color: white; + +} + +img.related-post-thumbnail { + + vertical-align: unset; + +} + +html.darkmode a.related-post-card { + + background: var(--color-border-on-foreground-deeper); + + opacity: 0.7; + + border-radius: 5px; + +} + +html.darkmode .related-post-title.clamp { + + color: var(--themecolor-light); + +} + +html.darkmode .has-thumbnail .related-post-title.clamp { + + color: #eee; + +} + +/*文章赞赏*/ + +.post-donate { + + text-align: center; + + position: relative; + +} + +.post-donate img { + + /*width: max-content; + + width: -moz-max-content;*/ + + max-width: min(30vw, 500px); + +} + +.post-donate .donate-qrcode { + + width: max-content; + + width: -moz-max-content; + + position: absolute; + + left: 50%; + + bottom: 100px; + + padding: 25px; + + z-index: 2; + + transition: all 0.3s ease; + + transform: translate(-50%, 10px) scale(0.9); + + transform-origin: bottom; + + opacity: 0; + + pointer-events: none; + + background-color: var(--color-widgets) !important; + +} + +.post-donate .donate-btn:focus~.donate-qrcode { + + transform: translateX(-50%); + + opacity: 1; + +} + +.post-donate .donate-btn { + + margin-right: 0; + + margin-top: 12px; + + margin-bottom: 12px; + +} + +.post-donate .donate-qrcode:before { + + position: absolute; + + z-index: 3; + + bottom: 0; + + left: 50%; + + display: block; + + width: 16px; + + height: 16px; + + content: ""; + + transform: translate(-50%, 8px) rotate(-45deg); + + border-radius: 0.2rem; + + background: var(--color-widgets); + + z-index: 1; + + box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.1); + +} + +/*文末附加内容*/ + +.additional-content-after-post { + + border-left: 3px solid var(--themecolor); + + padding: 15px 20px; + + background: rgba(var(--themecolor-rgbstr), 0.1); + + border-radius: 3px; + + margin-top: 8px; + +} + +/*评论�?/ + +#comments { + + margin-bottom: 25px; + +} + +/* 评论折叠功能 - Material 3 动画优化 */ +#comments, +#post_comment { + transition: + opacity var(--animation-normal) var(--ease-standard), + max-height var(--animation-slow) var(--ease-emphasized), + margin var(--animation-slow) var(--ease-standard), + padding var(--animation-slow) var(--ease-standard); + will-change: opacity, max-height; +} + +#comments.comments-collapsed, +#post_comment.comments-collapsed { + overflow: hidden; +} + +#comments.comments-collapsed { + max-height: 0 !important; + opacity: 0; + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + border: none !important; + transition-delay: 0.15s; +} + +#post_comment.comments-collapsed { + max-height: 0 !important; + opacity: 0; + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + border: none !important; + transition-delay: 0s; +} + +#comments:not(.comments-collapsed) { + max-height: 9999px; + opacity: 1; + transition-delay: 0s; +} + +#post_comment:not(.comments-collapsed) { + max-height: 9999px; + opacity: 1; + transition-delay: 0.15s; +} + +/* 评论切换按钮图标动画 */ +#comments_toggle .btn-inner--icon i { + transition: transform var(--animation-slow) var(--ease-spring); + display: inline-block; +} + +#comments_toggle.expanded .btn-inner--icon i { + transform: rotate(360deg); +} + +#comments>.card-body { + + transition: opacity 0.5s ease; + + overflow: visible; + +} + +#comments.comments-loading>.card-body { + + opacity: 0.5; + + pointer-events: none; + +} + +#comments li { + + list-style: none; + + position: relative; + +} + +#comments .comment-item:target:before, +#comments .comment-item:before { + + content: ""; + + display: block; + + position: absolute; + + left: -10px; + + right: -10px; + + top: 0; + + bottom: 0; + + background-color: var(--themecolor); + + opacity: 0.15; + + border-radius: var(--card-radius); + + pointer-events: none; + + animation: comment-focus-breath 2s linear; + + animation-fill-mode: forwards; + +} + +#comments .comment-item:before { + + animation: none; + + opacity: 0; + + transition: opacity 0.25s ease; + +} + +#comments .comment-item.highlight:before { + + opacity: 0.2; + +} + +@keyframes comment-focus-breath { + + 0% { + + opacity: 0.5; + + } + + 33% { + + opacity: 0.05; + + } + + 66% { + + opacity: 0.3; + + } + + 100% { + + opacity: 0.15; + + } + +} + +.comments-title { + + font-size: 20px; + +} + +.comments-title i { + + margin-right: 5px; + +} + +.comment-list { + + padding: 0; + +} + +.comment-item { + + margin-bottom: 1px; + + display: flex; + + overflow: visible; + +} + +/* ---------- 评论项左侧区�?---------- */ +.comment-item-left-wrapper { + display: flex; + flex-direction: column; + align-items: center; + width: 44px; + margin-top: 20px; + margin-right: 16px; + position: relative; + min-height: 80px; + overflow: visible; + flex-shrink: 0; +} + +.comment-avatar-vertical-center .comment-item-left-wrapper { + margin: auto; + margin-right: 16px; +} + +/* ---------- 评论头像 ---------- */ +.comment-item-avatar { + position: relative; + z-index: 1; +} + +.comment-item-avatar .avatar { + height: 44px; + width: 44px; + border-radius: 50%; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: transform var(--animation-fast, 0.15s) var(--ease-standard, ease), + box-shadow var(--animation-fast, 0.15s) var(--ease-standard, ease); +} + +.comment-item:hover .comment-item-avatar .avatar { + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +html.darkmode .comment-item-avatar .avatar { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.text-avatar { + user-select: none; + display: inline-flex !important; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 16px; +} + +/* ---------- 评论项内容区�?---------- */ +.comment-item-inner { + display: block; + position: relative; + margin-top: 20px; + padding-bottom: 40px; + border-bottom: var(--color-border-on-foreground) solid 1px; + width: calc(100% - 60px); + flex: 1; + min-width: 0; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; +} + +#comments .comment-item:last-child .comment-item-inner { + border-bottom: 0; +} + +/* ---------- 评论标题区域 ---------- */ +.comment-item-title { + font-size: 15px; + display: flex; + flex-wrap: wrap; + align-items: center; + margin-bottom: 6px; + gap: 4px; +} + +.comment-item-title .badge-admin, +.comment-item-title .badge-pinned, +.comment-item-title .badge-private-comment, +.comment-item-title .badge-unapproved { + transform: translateY(-1px); + margin-left: 4px; + font-size: 11px; + padding: 2px 6px; +} + +/* ---------- 评论内容 ---------- */ +.comment-item-text { + min-height: 24px; + margin-bottom: 1rem; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + line-height: 1.7; + color: var(--color-text); +} + +.comment-item-text p:last-child { + margin-bottom: 0; +} + +/* ---------- 评论作者信�?---------- */ +.comment-name { + flex: 1; + font-weight: 600; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 4px; +} + +.comment-author { + display: inline-block; + color: var(--color-text); + transition: color var(--animation-fast, 0.15s) ease; +} + +.comment-author a { + color: inherit; + text-decoration: none; +} + +.comment-author a:hover { + color: var(--themecolor); +} + +.comment-parent-info { + display: inline-block; + opacity: 0.5; + margin-left: 2px; + transition: opacity var(--animation-fast, 0.15s) ease; + font-weight: normal; + font-size: 13px; +} + +.comment-item:hover .comment-parent-info { + opacity: 0.75; +} + +/* ---------- 评论元信�?---------- */ +.comment-info { + margin-top: 2px; + font-size: 12px; + font-weight: normal; + margin-left: 3px; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + opacity: 0.6; +} + +.comment-info>div { + display: inline-block; + white-space: nowrap; + flex-shrink: 0; +} + +.comment-time { + position: relative; + cursor: default; +} + +.comment-time-details { + pointer-events: none; + position: absolute; + top: -35px; + right: 0; + width: max-content; + width: -moz-max-content; + line-height: 22px; + color: #fff; + background: #32325d; + padding: 3px 10px; + font-size: 12px; + border-radius: var(--m3-shape-sm, 6px); + transition: all var(--animation-fast, 0.15s) var(--ease-standard, ease); + transform: translateY(5px); + opacity: 0; + z-index: 10; +} + +.comment-time:hover .comment-time-details { + transform: translateY(0); + opacity: 0.9; +} + +.comment-edited { + margin-right: 3px; + opacity: 0.8; +} + +.comment-edited>i { + margin-right: 4px; +} + +.comment-edited.comment-edithistory-accessible { + cursor: pointer; + transition: opacity var(--animation-fast, 0.15s) ease; +} + +.comment-edited.comment-edithistory-accessible:hover { + opacity: 1; +} + +/* ---------- 评论操作按钮 ---------- */ +.comment-operations { + position: absolute; + right: 0; + bottom: 8px; + font-size: 12px; + padding: 4px 8px; + transition: all var(--animation-fast, 0.15s) var(--ease-standard, ease); + opacity: 0; + transform: translateY(4px); + display: flex; + gap: 6px; + background: var(--color-widgets); + border-radius: var(--m3-shape-sm, 6px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + pointer-events: none; +} + +.comment-item:hover .comment-operations { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +html.darkmode .comment-operations { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.comment-operations .btn { + padding: 4px 10px; + font-size: 12px; + border-radius: var(--m3-shape-sm, 6px); + transition: all var(--animation-fast, 0.15s) var(--ease-standard, ease); +} + +.comment-operations .btn:hover { + opacity: 0.8; +} + +/* ---------- 评论 UA 信息 ---------- */ +.comment-useragent { + display: inline-flex; + align-items: center; + font-weight: normal; + padding-left: 4px; + font-size: 13px; + flex-shrink: 0; + opacity: 0.5; + transition: opacity var(--animation-fast, 0.15s) ease; +} + +.comment-item:hover .comment-useragent { + opacity: 0.7; +} + +.comment-useragent>svg { + height: 16px; + width: 16px; + transform: translateY(-1px); + margin-left: 4px; + margin-right: 1px; + flex-shrink: 0; +} + +/* ---------- 评论点赞按钮 ---------- */ +.comment-upvote { + white-space: nowrap; + border-radius: var(--m3-shape-full, 100px); + height: 32px; + line-height: 30px; + padding: 0 12px; + border: none !important; + color: var(--themecolor); + background-color: rgba(var(--themecolor-rgbstr), 0.12); + text-align: center; + position: absolute; + left: 50%; + top: 48px; + transform: translateX(-50%) !important; + min-width: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 4px; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all var(--animation-fast, 0.15s) var(--ease-standard, ease); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.comment-upvote .btn-inner--icon { + display: flex; + align-items: center; + justify-content: center; + transition: transform var(--animation-fast, 0.15s) var(--ease-spring, ease); +} + +.comment-upvote .btn-inner--icon i { + font-size: 14px; +} + +.comment-upvote .btn-inner--text { + margin-left: 0 !important; + margin-right: 0 !important; + font-variant-numeric: tabular-nums; + display: inline-block !important; +} + +.comment-upvote .comment-upvote-num { + min-width: 12px; + text-align: center; + display: inline-block; +} + +html.darkmode .comment-upvote { + background-color: rgba(var(--themecolor-rgbstr), 0.2); + color: var(--themecolor-light); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.comment-upvote:hover { + background-color: rgba(var(--themecolor-rgbstr), 0.25) !important; + color: var(--themecolor) !important; + transform: translateX(-50%) scale(1.05) !important; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.25); +} + +.comment-upvote:hover .btn-inner--icon { + transform: translateY(-2px); +} + +html.darkmode .comment-upvote:hover { + background-color: rgba(var(--themecolor-rgbstr), 0.35) !important; + color: var(--themecolor-light) !important; +} + +.comment-upvote:active { + transform: translateX(-50%) scale(0.95) !important; +} + +.comment-upvote.upvoted { + color: #fff !important; + background-color: var(--themecolor) !important; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.4); +} + +.comment-upvote.upvoted:hover { + background-color: var(--themecolor-dark) !important; + color: #fff !important; + transform: translateX(-50%) scale(1.05) !important; + cursor: pointer; +} + +.comment-upvote.comment-upvoting { + opacity: 0.6; + pointer-events: none; +} + +.comment-upvote.comment-upvoting .btn-inner--icon i { + animation: upvote-pulse 0.6s ease infinite; +} + +@keyframes upvote-pulse { + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } +} + +/*评论内容*/ + +.comment-item-text .comment-sticker { + + max-height: 60px; + + transition: all 0.3s ease; + + transition-delay: 0s; + + transform: none; + +} + +.comment-item-text .comment-sticker:active { + + transition-delay: 0.3s; + + transform: scale(2); + + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15); + + background: var(--color-widgets); + +} + +.comment-item-text .comment-image br { + + display: none; + +} + +.comment-item-text .comment-image { + + color: var(--themecolor) !important; + + cursor: pointer; + + user-select: none; + + position: relative; + +} + +.comment-image-preview-mask { + + display: none; + +} + +.comment-item-text .comment-image.comment-image-preview-zoomed .comment-image-preview-mask { + + display: block; + + background: transparent; + + position: fixed; + + left: 0; + + right: 0; + + top: 0; + + bottom: 0; + + width: 100vw; + + height: 100vh; + + z-index: 1501; + + cursor: zoom-out; + +} + +.comment-item-text .comment-image .comment-image-preview { + + width: 22px; + + height: 22px; + + position: absolute; + + left: 0; + + opacity: 0; + + /*pointer-events: none;*/ + +} + +.comment-item-text .comment-image.comment-image-preview-zoomed .comment-image-preview { + + z-index: 1502; + + opacity: 1; + + pointer-events: unset; + +} + +.comment-item-text b, + +.comment-item-text strong { + + font-weight: 600; + + opacity: 0.78; + +} + +.comment-item-text pre { + + font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", + + "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, + + monospace; + + font-size: 14px; + + line-height: 1.375; + + text-align: left; + + white-space: pre; + + word-spacing: normal; + + word-break: normal; + + tab-size: 4; + + hyphens: none; + + color: #5e6687; + + background: var(--color-widgets); + + direction: ltr; + + border: 1px solid var(--color-border-on-foreground); + + padding: 14px; + + border-radius: 3px; + + margin-top: 15px; + +} + +html.darkmode .comment-item-text pre { + + color: #eee; + +} + +.comment-item-text blockquote { + + padding-left: 1.2em; + + margin: 1em 3em 1em 0; + + font-weight: 400; + + border-left: 3px solid rgba(0, 0, 0, 0.12); + +} + +html.darkmode .comment-item-text blockquote { + + border-color: rgba(255, 255, 255, 0.2); + +} + +.comment-item-text ol li { + + list-style-type: decimal !important; + +} + +.comment-item-text ul, + +.comment-item-text ol { + + padding-inline-start: 20px; + +} + +.comment-item-text ul li { + + list-style-type: disc !important; + +} + +.comment-item-text ul ul li { + + list-style-type: square !important; + +} + +.comment-item-text h1, + +.comment-item-text h2, + +.comment-item-text h3, + +.comment-item-text h4, + +.comment-item-text h5, + +.comment-item-text h6 { + + font-weight: 600; + + opacity: 0.6; + + font-size: inherit; + + margin-top: 10px; + + margin-bottom: 5px; + + transition: opacity 0.3s ease; + +} + +.comment-item-text:hover h1, + +.comment-item-text:hover h2, + +.comment-item-text:hover h3, + +.comment-item-text:hover h4, + +.comment-item-text:hover h5, + +.comment-item-text:hover h6 { + + font-weight: 600; + + opacity: 0.8; + +} + +.comment-item-text h1 { + + font-size: 20px; + +} + +.comment-item-text h2 { + + font-size: 19px; + +} + +.comment-item-text h3 { + + font-size: 18px; + +} + +.comment-item-text h4 { + + font-size: 17px; + +} + +.comment-item-text h5 { + + font-size: 16px; + +} + +.comment-item-text h6 { + + font-size: 15px; + +} + +/*评论折叠*/ + +.comment-item-inner.comment-folded { + + max-height: 200px; + + overflow: hidden; + +} + +.comment-item-inner.comment-folded:after { + + content: ""; + + display: block; + + position: absolute; + + left: 0; + + right: 0; + + bottom: 0; + + height: 80px; + + background: linear-gradient(180deg, transparent 0%, var(--color-foreground) 100%); + + pointer-events: none; + +} + +.comment-item-inner.comment-folded .comment-operations { + + display: none; + +} + +.comment-item-inner.comment-folded .show-full-comment { + + position: absolute; + + bottom: 0; + + left: 0; + + right: 0; + + height: 35px; + + color: var(--themecolor); + + z-index: 2; + + text-align: left; + + cursor: pointer; + + user-select: none; + + opacity: 0.6; + + transition: opacity 0.25s ease; + +} + +.comment-item-inner.comment-folded:hover .show-full-comment { + + opacity: 1; + +} + +.comment-item-inner:not(.comment-folded) .show-full-comment { + + display: none; + +} + +/*评论区页�?/ + +.comments-navigation .page-item > div { + + cursor: pointer; + +} + +/*评论区更�?/ + +#comments_more { + + width: 52px; + + height: 52px; + + display: block; + + margin: 30px auto 10px auto; + +} + +#comments_more:disabled { + + animation: breath 2s ease infinite; + +} + +@keyframes breath { + + 0% { + + transform: scale(1); + + } + + 50% { + + transform: scale(1.2); + + } + + 100% { + + transform: scale(1); + + } + +} + +.comments-navigation-more .comments-navigation-nomore { + + text-align: center; + + margin-top: 30px; + + margin-bottom: 10px; + + opacity: 0.6; + +} + +/*评论编辑记录*/ + +.comment-edit-history-item { + + border-bottom: 1px solid #e9ecef; + + margin-bottom: 22px; + + padding-bottom: 30px; + + padding-left: 5px; + + padding-right: 5px; + +} + +html.darkmode .comment-edit-history-item { + + border-bottom-color: #666; + +} + +.comment-edit-history-title { + + margin-bottom: 6px; + +} + +.comment-edit-history-id { + + font-size: 22px; + + font-weight: bold; + + display: inline-block; + +} + +.comment-edit-history-title .badge { + + transform: translateY(-3px); + + margin-left: 8px; + + display: inline-block; + +} + +.comment-edit-history-time { + + opacity: 0.6; + + font-size: 15px; + + margin-bottom: 12px; + +} + +#comment_edit_history .modal-body .comment-edit-history-item:last-child { + + border: navajowhite; + + padding-bottom: 0; + +} + +/*发送评论区�?/ + +#post_comment { + + margin-bottom: 25px; + +} + +/* 发送评论卡片优�?*/ +#post_comment.card { + border-radius: 16px; + padding: 20px; + background: var(--color-foreground); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.04), + 0 8px 24px rgba(0, 0, 0, 0.06); + transition: + box-shadow var(--animation-normal) var(--ease-standard), + transform var(--animation-normal) var(--ease-standard); +} + +#post_comment.card .card-body { + padding: 0; +} + +#post_comment.card:hover { + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 12px 32px rgba(0, 0, 0, 0.08); +} + +html.darkmode #post_comment.card { + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + 0 8px 24px rgba(0, 0, 0, 0.15); +} + +html.darkmode #post_comment.card:hover { + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.25), + 0 12px 32px rgba(0, 0, 0, 0.2); +} + +.post-comment-title { + + font-size: 18px; + font-weight: 600; + margin-bottom: 12px; + +} + +.post-comment-title i { + + margin-right: 8px; + color: var(--themecolor); + +} + +/* ---------- 评论回复提示�?---------- */ +.post-comment-reply { + margin-top: 12px; + margin-bottom: 12px; + border-radius: 12px; + overflow: hidden; + background: linear-gradient(135deg, rgba(var(--themecolor-rgbstr), 0.08) 0%, rgba(var(--themecolor-rgbstr), 0.03) 100%); + border: 1px solid rgba(var(--themecolor-rgbstr), 0.15); + transform-origin: top center; +} + +.post-comment-reply-header { + display: flex; + align-items: center; + padding: 12px 16px; + gap: 12px; + background: rgba(var(--themecolor-rgbstr), 0.05); + border-bottom: 1px solid rgba(var(--themecolor-rgbstr), 0.1); +} + +.post-comment-reply-icon { + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--themecolor); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + flex-shrink: 0; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); +} + +.post-comment-reply-meta { + flex: 1; + min-width: 0; +} + +.post-comment-reply-label { + font-size: 12px; + color: var(--color-text-light, #8898aa); + display: block; + line-height: 1.2; +} + +.post-comment-reply-name { + font-size: 14px; + font-weight: 600; + color: var(--themecolor); + display: block; + line-height: 1.3; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.post-comment-reply-close { + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + flex-shrink: 0; + transition: all 0.2s ease; +} + +.post-comment-reply-close:hover { + background: var(--themecolor); + color: #fff; + transform: rotate(90deg); +} + +.post-comment-reply-preview { + padding: 12px 16px; + font-size: 13px; + line-height: 1.6; + color: var(--color-text, #525f7f); + max-height: 80px; + overflow: hidden; + position: relative; + background: rgba(255, 255, 255, 0.5); +} + +html.darkmode .post-comment-reply-preview { + background: rgba(0, 0, 0, 0.2); +} + +.post-comment-reply-preview::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 30px; + background: linear-gradient(180deg, transparent 0%, rgba(var(--themecolor-rgbstr), 0.05) 100%); + pointer-events: none; +} + +/* 回复框动�?*/ +@keyframes replySlideIn { + from { + opacity: 0; + transform: scaleY(0.8) translateY(-10px); + } + + to { + opacity: 1; + transform: scaleY(1) translateY(0); + } +} + +@keyframes replySlideOut { + from { + opacity: 1; + transform: scaleY(1) translateY(0); + } + + to { + opacity: 0; + transform: scaleY(0.8) translateY(-10px); + } +} + +.post-comment-reply.reply-entering { + animation: replySlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; +} + +.post-comment-reply.reply-leaving { + animation: replySlideOut 0.2s ease-out forwards; +} + +#post_comment_reply_cancel { + margin-top: 10px; + border-radius: 8px; + padding: 6px 14px; + font-size: 13px; +} + +#post_comment_content { + + transition: height 0.15s ease, box-shadow var(--animation-normal) var(--ease-standard), border-color var(--animation-normal) var(--ease-standard); + + overflow: hidden; + + min-height: 80px; + + resize: none; + + white-space: pre-wrap; + + word-wrap: break-word; + + margin-bottom: 12px; + + margin-top: 0; + + border-radius: 10px; + + border: 1px solid var(--color-border-on-foreground-deeper); + + padding: 12px 14px; + + font-size: 14px; + + line-height: 1.6; + + background-color: var(--color-widgets); + +} + +#post_comment_content:focus { + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); +} + +/* 评论表单输入框统一样式 */ +#post_comment .input-group-alternative { + margin-bottom: 12px !important; + border-radius: 10px; + overflow: hidden; + border: 1px solid var(--color-border-on-foreground-deeper); + box-shadow: none; + background-color: var(--color-widgets); + transition: border-color var(--animation-normal) var(--ease-standard), box-shadow var(--animation-normal) var(--ease-standard); +} + +#post_comment .input-group-alternative:focus-within { + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); +} + +#post_comment .input-group-alternative .input-group-text { + background-color: transparent; + border: none; + color: var(--themecolor); + padding: 10px 12px; +} + +#post_comment .input-group-alternative .form-control { + border: none; + background-color: transparent; + padding: 10px 12px 10px 0; + height: auto; + font-size: 14px; +} + +#post_comment .input-group-alternative .form-control:focus { + box-shadow: none; +} + +#post_comment_content_hidden { + + font-family: inherit !important; + + font-weight: 400; + + line-height: 1.5; + + font-size: 14px; + + padding: 0.625rem 0.75rem; + + width: calc(100% - 30px); + + overflow: hidden; + + white-space: pre-wrap; + + word-wrap: break-word; + + position: absolute; + + pointer-events: none; + + opacity: 0; + +} + +.post-comment-link-container:before, + +.post-comment-captcha-container:before, + +#post_comment_toggle_extra_input:before, + +.comment-post-checkbox:before { + + pointer-events: none; + + position: absolute; + + top: -35px; + + left: 0px; + + line-height: 25px; + + font-weight: normal; + + color: #fff; + + background: #32325d; + + padding: 3px 10px; + + font-size: 14px; + + border-radius: 3px; + + z-index: 3; + + transition: all 0.3s ease; + + transform: translateY(5px); + + opacity: 0; + + width: max-content; + + width: -moz-max-content; + +} + +.post-comment-link-container:hover:before, + +.post-comment-link-container.active:before, + +.post-comment-captcha-container:hover:before, + +.post-comment-captcha-container.active:before, + +#post_comment_toggle_extra_input:hover:before, + +.comment-post-checkbox:hover:before { + + transform: translateY(0); + + opacity: 0.7; + +} + +.post-comment-link-container:before { + + content: "http(s)://"; + +} + +#post_comment_toggle_extra_input:before { + + content: attr(tooltip-show-extra-field); + + text-transform: none; + +} + +.show-extra-input #post_comment_toggle_extra_input:before { + + content: attr(tooltip-hide-extra-field); + +} + +#post_comment_toggle_extra_input { + + border-radius: 100px; + + padding: 5px 20px; + +} + +#post_comment_toggle_extra_input i { + + transition: all 0.3s ease; + +} + +.show-extra-input #post_comment_toggle_extra_input i { + + transform: rotateZ(180deg); + +} + +#post_comment.logged #post_comment_name, + +#post_comment.logged #post_comment_email { + + opacity: 1; + + background-color: var(--color-widgets-disabled); + + pointer-events: none; + +} + +.comment-post-checkbox { + + display: inline-block; + + margin-top: 8px; + + height: 28px; + + margin-right: 8px; + +} + +.comment-post-checkbox .custom-control-label { + + line-height: 26px; + + font-size: 13px; + +} + +#post_comment.post-comment-force-privatemode-on .comment-post-privatemode { + + opacity: 0.6; + + pointer-events: none; + +} + +#post_comment.post-comment-force-privatemode-on .comment-post-privatemode .custom-control-label::before { + + border-color: var(--themecolor); + + background-color: var(--themecolor); + + color: #fff; + + box-shadow: none; + +} + +#post_comment.post-comment-force-privatemode-on .comment-post-privatemode .custom-control-label::after { + + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); + +} + +#post_comment.post-comment-force-privatemode-off .comment-post-privatemode { + + opacity: 0.6; + + pointer-events: none; + +} + +#post_comment.post-comment-force-privatemode-off .comment-post-privatemode .custom-control-label::before { + + border-color: var(--color-widgets-disabled); + +} + +html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-privatemode .custom-control-label::before { + + background: #555; + + border-color: #666; + +} + +#post_comment.post-comment-force-privatemode-off .comment-post-privatemode .custom-control-label::after { + + background-image: unset; + +} + +.comment-post-privatemode:before { + + content: attr(tooltip); + +} + +.comment-post-mailnotice:before { + + content: attr(tooltip); + +} + +#post_comment.sending .comment-post-checkbox { + + opacity: 0.6; + + pointer-events: none; + +} + +.comment-btn { + + margin-top: 0; + + margin-right: 8px; + +} + +/*发送评论区�?编辑评论*/ + +#post_comment:not(.editing) .hide-on-comment-not-editing { + + display: none !important; + +} + +#post_comment.editing .hide-on-comment-editing { + + display: none !important; + +} + +#post_comment.editing .comment-post-use-markdown { + + pointer-events: none; + + opacity: 0.6; + +} + +#post_comment.editing .comment-post-mailnotice { + + display: none; + +} + +/*评论表情*/ + +#comment_emotion_btn { + + border-radius: 100px; + + width: 38px; + + height: 38px; + + padding: 0; + + font-size: 22px; + + background: transparent !important; + + box-shadow: none; + + color: inherit; + + border: none; + + transform: none; + + opacity: 0.7; + + margin-top: 0; + + margin-right: 8px; + + transition: all 0.3s ease; + +} + +#comment_emotion_btn:hover { + opacity: 1; + color: var(--themecolor); +} + +#comment_emotion_btn.comment-emotion-keyboard-open { + + border-radius: 100px; + + color: var(--themecolor); + + opacity: 1; + +} + +.emotion-keyboard { + + max-width: min(500px, calc(100vw - 40px)); + + min-width: min(300px, calc(100vw - 40px)); + + display: flex; + + height: 300px; + + flex-direction: column; + + overflow: hidden; + + position: absolute; + + z-index: 2; + + right: 0; + + bottom: -10px; + + transform: translateY(100%) scale(0.9); + + transform-origin: top; + + transition: all 0.3s ease; + + opacity: 0; + + pointer-events: none; + +} + +#comment_emotion_btn.comment-emotion-keyboard-open+.emotion-keyboard { + + opacity: 1; + + transform: translateY(100%); + + pointer-events: all; + +} + +.emotion-keyboard-content { + + flex: 1; + + overflow-y: auto; + +} + +.emotion-group { + + padding: 15px 15px; + + padding-bottom: 10px; + +} + +.emotion-item { + + display: inline-block; + + background: var(--color-border-on-foreground); + + border-radius: 5px; + + user-select: none; + + margin-right: 12px; + + margin-bottom: 12px; + + padding: 2px 10px; + + cursor: pointer; + + transition: all 0.3s ease; + +} + +.emotion-item.emotion-item-sticker { + + padding: 2px; + + background: rgba(126, 126, 126, 0.15); + +} + +.emotion-item>img { + + max-height: 60px; + + border-radius: 3px; + + transition: filter 0.3s ease, transform 0.3s ease; + + transition-delay: 0s; + + background: var(--color-widgets); + +} + +.emotion-item.emotion-item-sticker:hover>img[src^="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nI"] { + + filter: brightness(2); + +} + +.emotion-item:hover { + + background: var(--themecolor); + + color: #fff; + +} + +.emotion-group:active .emotion-item:hover>img:not([src^="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nI"]) { + + transition: all 0.3s ease; + + transition-delay: 0.3s; + + transform: scale(1.5); + + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15); + +} + +.emotion-group-description { + + text-align: right; + + font-size: 14px; + + opacity: 0.6; + +} + +.emotion-keyboard-bar { + + overflow-x: auto; + + white-space: nowrap; + + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06); + + transform: scaleY(-1); + +} + +.emotion-keyboard-bar::-webkit-scrollbar-track { + + background: transparent; + +} + +.emotion-keyboard-bar::-webkit-scrollbar { + + height: 5px; + +} + +.emotion-keyboard-bar::-webkit-scrollbar-thumb { + + background-color: rgba(0, 0, 0, 0.2); + + border: none; + +} + +.emotion-keyboard-bar::-webkit-scrollbar-thumb:hover { + + background-color: var(--themecolor); + +} + +.emotion-group-name { + + display: inline-block; + + padding: 10px 20px; + + cursor: pointer; + + transition: all 0.3s ease; + + position: relative; + + user-select: none; + + transform: scaleY(-1); + +} + +.emotion-group-name:hover { + + background: var(--color-border-on-foreground); + +} + +.emotion-group-name.active:after { + + content: ""; + + position: absolute; + + left: 0; + + right: 0; + + bottom: 0; + + background: var(--themecolor); + + height: 3px; + + pointer-events: none; + +} + +/*短代码适配*/ + +/*短代�?警告与折叠块*/ + +.admonition, + +.collapse-block { + + border-radius: 3px; + + border-left-width: 3px; + + border-left-style: solid; + + margin-bottom: 20px; + + background-color: var(--color-widgets) !important; + +} + +.admonition i:first-child, + +.collapse-block .collapse-block-title i:first-child { + + margin-right: 5px; + +} + +.collapse-block.hide-border-left { + + border-left: none; + +} + +.collapse-block .collapse-icon { + + position: absolute; + + right: 15px; + + bottom: 15px; + + transform: rotateZ(180deg); + + transition: all 0.2s ease; + +} + +.collapse-block.collapsed .collapse-icon { + + transform: rotateZ(0deg); + +} + +.admonition-title, + +.collapse-block-title { + + padding: 10px 15px; + + font-weight: bold; + +} + +.collapse-block-title-inner { + + max-width: calc(100% - 20px); + + display: inline-block; + +} + +.collapse-block-title { + + cursor: pointer; + + position: relative; + +} + +.admonition-body, + +.collapse-block-body { + + padding: 20px 15px; + + padding-bottom: 20px; + +} + +.admonition-primary, + +.collapse-block-primary { + + border-left-color: #7889e8; + +} + +.admonition-primary>.admonition-title, + +.collapse-block-primary>.collapse-block-title { + + background: #7889e833; + +} + +.admonition-success, + +.collapse-block-success { + + border-left-color: #4fd69c; + +} + +.admonition-success>.admonition-title, + +.collapse-block-success>.collapse-block-title { + + background: #4fd69c33; + +} + +.admonition-danger, + +.collapse-block-danger { + + border-left-color: #f75676; + +} + +.admonition-danger>.admonition-title, + +.collapse-block-danger>.collapse-block-title { + + background: #f7567633; + +} + +.admonition-info, + +.collapse-block-info { + + border-left-color: #37d5f2; + +} + +.admonition-info>.admonition-title, + +.collapse-block-info>.collapse-block-title { + + background: #37d5f233; + +} + +.admonition-warning, + +.collapse-block-warning { + + border-left-color: #fc7c5f; + +} + +.admonition-warning>.admonition-title, + +.collapse-block-warning>.collapse-block-title { + + background: #fc7c5f33; + +} + +.admonition-default, + +.collapse-block-default { + + border-left-color: #3c4d69; + +} + +.admonition-default>.admonition-title, + +.collapse-block-default>.collapse-block-title { + + background: #3c4d6933; + +} + +.admonition-grey, + +.collapse-block-grey { + + border-left-color: #888888; + +} + +.admonition-grey>.admonition-title, + +.collapse-block-grey>.collapse-block-title { + + background: #88888833; + +} + + + +/*短代�?友链-简�?/ + +.friend-links-simple .friend-category-title { + + font-size: 22px; + + text-align: center; + + font-weight: bold; + + margin-top: 20px; + + margin-bottom: 25px; + +} + +.friend-links-simple .link { + + padding: 0 10px; + +} + +.friend-links-simple .link .card { + + padding: 12px 12px; + +} + +.friend-links-simple .link .friend-link-avatar { + + margin-top: 8px; + +} + +.friend-links-simple .link .card img { + + border: none; + + max-width: unset; + +} + +.friend-links-simple .link .friend-link-title { + + font-size: 17px; + + font-weight: bold; + + margin-bottom: 5px; + +} + +.friend-links-simple .link a:before { + + display: none; + +} + + + +/*短代�?友链*/ + +.friend-links .link { + + padding-left: 10px; + + padding-right: 10px; + + padding-bottom: 15px; + +} + +.friend-links .friend-link-container { + + display: block; + + overflow: hidden; + + white-space: nowrap; + + background-color: var(--color-widgets) !important; + +} + +.friend-links .link a:before { + + display: none; + +} + +/*短代�?友链-样式 1*/ + +.friend-links-style1 .friend-link-avatar { + + display: inline-block; + + width: 125px; + + height: 140px; + + border-radius: 0 65px 65px 0; + + object-fit: cover; + + pointer-events: none; + +} + +.friend-links-style1 .friend-link-content { + + display: inline-block; + + width: calc(100% - 125px); + + height: 140px; + + vertical-align: middle; + + padding: 10px 15px 10px 15px; + + white-space: normal; + +} + +.friend-links-style1 .no-avatar .friend-link-content { + + width: 100%; + +} + +.friend-links-style1 .friend-link-title { + + font-weight: bold; + + font-size: 18px; + + height: 36px; + + white-space: nowrap; + + overflow: hidden; + + text-overflow: ellipsis; + +} + +.friend-links-style1 .friend-link-description { + + height: 50px; + + overflow: hidden; + + line-height: 25px; + + position: relative; + +} + +.friend-links-style1 .friend-link-description:after { + + content: ""; + + width: 45px; + + height: 22px; + + display: block; + + position: absolute; + + right: 0; + + top: 25px; + + pointer-events: none; + + background: linear-gradient(90deg, transparent 0%, var(--color-widgets) 100%); + +} + +.friend-links-style1 .friend-link-links { + + height: 32px; + + overflow: hidden; + + font-size: 18px; + + margin-top: 2px; + +} + +.friend-links-style1 .friend-link-links>a { + + margin-right: 12px; + +} + +/*短代�?友链-样式 1-方形头像*/ + +.friend-links-style1.friend-links-style1-square .friend-link-avatar { + + border-radius: 0; + + width: 130px; + +} + +.friend-links-style1.friend-links-style1-square .friend-link-content { + + width: calc(100% - 130px); + +} + +.friend-links-style1.friend-links-style1-square .no-avatar .friend-link-content { + + width: 100%; + +} + +/*短代�?友链-样式 2*/ + +.friend-links-style2 .friend-link-avatar { + + display: block; + + width: 100%; + + height: 160px; + + object-fit: cover; + + pointer-events: none; + +} + +.friend-links-style2 .friend-link-content { + + display: block; + + width: 100%; + + padding: 10px 15px 12px 15px; + +} + +.friend-links-style2 .friend-link-title { + + font-weight: bold; + + font-size: 18px; + + height: 36px; + + white-space: nowrap; + + overflow: hidden; + + text-overflow: ellipsis; + +} + +.friend-links-style2 .friend-link-description { + + height: 25px; + + line-height: 25px; + + white-space: nowrap; + + overflow: hidden; + + text-overflow: ellipsis; + +} + +.friend-links-style2 .friend-link-links { + + height: 30px; + + overflow: hidden; + + font-size: 18px; + + margin-top: 8px; + +} + +.friend-links-style2 .friend-link-links>a { + + margin-right: 15px; + +} + +/*短代�?友链-样式 2-大头�?/ + +.friend-links-style2.friend-links-style2-big .friend-link-avatar { + + height: calc(100vw * 0.2); + + min-height: 200px; + + max-height: 250px; + +} + +.friend-links-style2.friend-links-style2-big .friend-link-links > a { + + margin-right: 12px; + +} + +@media (min-width: 900px) { + + .friend-links.friend-links-style2-big .link { + + max-width: 33.33333%; + + flex: 0 0 33.33333%; + + } + +} + + + +/*短代�?时间�?/ + +.argon-timeline { + + margin-left: 110px; + + border-left: 3px solid rgba(var(--themecolor-rgbstr), 0.2); + + padding-left: 25px; + + position: relative; + + padding-top: 30px; + + padding-bottom: 10px; + +} + +.argon-timeline-time { + + position: absolute !important; + + left: -110px; + + margin-top: 12px; + + width: 85px; + + text-align: right; + + font-size: 15px; + + line-height: 26px; + +} + +.argon-timeline-card { + + margin-bottom: 35px; + + padding: 18px 25px; + + background: var(--color-widgets) !important; + +} + +.argon-timeline-card:before { + + content: ""; + + position: absolute; + + left: -35px; + + top: 17px; + + background: var(--themecolor); + + width: 14px; + + height: 14px; + + border-radius: 50%; + +} + +.argon-timeline-title { + + font-size: 17px; + + font-weight: bold; + + margin-bottom: 5px; + +} + + + +/*短代�?隐藏文本*/ + +.argon-hidden-text { + transition: all 0.3s ease; +} + +.argon-hidden-text.argon-hidden-text-blur { + filter: blur(4px); +} + +.argon-hidden-text.argon-hidden-text-blur:hover { + filter: blur(0px); +} + +.argon-hidden-text.argon-hidden-text-background { + background: #000; + color: transparent; + border-radius: 1px; +} + +.argon-hidden-text.argon-hidden-text-background:hover { + background: transparent; + color: inherit; + border-radius: 0px; +} + +/*短代�?Github*/ + +.github-info-card { + + background: #24292e !important; + + margin-top: 20px; + + margin-bottom: 20px; + + padding: 20px 25px; + + color: #eee; + +} + +.github-info-card a { + + color: var(--themecolor-light); + +} + +.github-info-card-header { + + margin-bottom: 5px; + +} + +.github-info-card-header a { + + color: #eee !important; + + font-size: 16px; + +} + +.github-info-card-header a:before { + + display: none; + +} + +.github-info-card-header a i { + + margin-right: 2px; + +} + +.github-info-card-name-a { + + font-size: 20px; + +} + +.github-info-card-bottom { + + margin-top: 15px; + +} + +.github-info-card-bottom .github-info-card-meta { + + margin-right: 10px; + + opacity: 0.7; + +} + +.github-info-card-bottom .github-info-card-meta i { + + margin-right: 2px; + +} + +/*短代�?Github-Mini*/ + +.github-info-card-mini { + + display: flex; + + flex-direction: row; + + white-space: nowrap; + + align-items: center; + + padding: 15px 20px; + +} + +.github-info-card-mini .github-info-card-name-a { + + display: inline-block; + + margin-right: 12px; + + font-size: 19px; + +} + +.github-info-card-mini .github-info-card-description { + + white-space: nowrap; + + text-overflow: ellipsis; + + overflow: hidden; + + word-break: break-all; + + display: inline-block; + +} + +.github-info-card-mini .github-info-card-body { + + flex: 1; + + white-space: nowrap; + + overflow: hidden; + + display: flex; + + align-items: center; + +} + +.github-info-card-mini .github-info-card-bottom { + + display: inline-block; + + margin-top: 0; + + margin-left: 10px; + +} + +.github-info-card-mini .github-info-card-header { + + margin-right: 7px; + + margin-bottom: 0; + +} + +.github-info-card-mini .github-info-card-header a i { + + font-size: 19px; + + transform: translateY(2px); + + margin-right: 2px; + +} + +.github-info-card-mini .github-info-card-bottom .github-info-card-meta-forks { + + display: none; + +} + +.github-info-card-mini .github-info-card-bottom .github-info-card-meta-stars { + + margin-right: 0; + +} + + + +/*短代�?进度�?/ + +.progress { + + background: var(--color-border-on-foreground-deeper); + +} + +/*Gutenburg 区块-Tab 面板*/ + +.argon-tabpanel { + + margin-bottom: 20px; + +} + +.argon-tabpanel>.tabpanel-header { + + padding: 0; + +} + +.argon-tabpanel>.tabpanel-body { + + background-color: var(--color-widgets) !important; + +} + +.argon-tabpanel .nav { + + display: flex; + + justify-content: flex-start; + + align-content: center; + + flex-wrap: wrap; + +} + +.argon-tabpanel .nav-pills .nav-item { + + padding: 0; + + flex: 0; + + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + + margin-bottom: 0; + +} + +.argon-tabpanel .nav-pills .nav-link { + + box-shadow: none; + + border-bottom-left-radius: 0; + + border-bottom-right-radius: 0; + + background-color: var(--color-widgets); + + border: solid 1px var(--color-border-on-foreground); + + border-bottom: none; + + padding: 8px 16px; + + white-space: nowrap; + +} + +html.darkmode .argon-tabpanel .nav-pills .nav-link { + + color: #fff; + +} + +.argon-tabpanel .nav-pills .nav-link:not(:first-of-type) { + + border-left: none; + +} + +.argon-tabpanel .nav-pills .nav-link:before { + + display: none; + +} + +.argon-tabpanel .nav-pills .nav-link.active, + +.argon-tabpanel .nav-pills .show>.nav-link { + + background-color: var(--themecolor) !important; + +} + + + +/*noUiSlidebar*/ + +.noUi-connect, + +.noUi-handle { + + background: var(--themecolor) !important; + +} + +.noUi-handle:before { + + content: attr(aria-valuenow) " px"; + + position: absolute; + + left: -36px; + + top: -20px; + + font-size: 10px; + + display: block; + + width: 90px; + + text-align: center; + + transition: opacity 0.15s ease; + + opacity: 0; + + pointer-events: none; + +} + +.noUi-handle.noUi-active:before { + + opacity: 1; + +} + +.noUi-target { + + background: var(--color-border-on-foreground-deeper); + +} + + + +/*nprogress 加载进度�?/ + +#nprogress { + + pointer-events: none; + +} + +#nprogress .bar { + + background: rgba(255, 255, 255, 0.67); + + position: fixed; + + z-index: 1031; + + top: 0; + + left: 0; + + width: 100%; + + height: 2px; + +} + +body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { + + background: rgba(var(--themecolor-rgbstr), 0.67); + +} + +#nprogress .peg { + + display: block; + + position: absolute; + + right: 0px; + + width: 100px; + + height: 100%; + + box-shadow: 0 0 10px rgba(255, 255, 255, 0.67), 0 0 5px rgba(255, 255, 255, 0.67); + + opacity: 1; + + -webkit-transform: rotate(3deg) translate(0px, -4px); + 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: 1031; + + top: 15px; + + right: 15px; + +} + +#nprogress .spinner-icon { + + width: 18px; + + height: 18px; + + box-sizing: border-box; + + border: solid 2px transparent; + + border-top-color: rgba(255, 255, 255, 0.67); + + border-left-color: rgba(255, 255, 255, 0.67); + + border-radius: 50%; + + -webkit-animation: nprogress-spinner 400ms linear infinite; + + animation: nprogress-spinner 400ms linear infinite; + +} + +.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); + transform: rotate(0deg); + + } + + 100% { + + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + + } + +} + +@keyframes nprogress-spinner { + + 0% { + + transform: rotate(0deg); + + } + + 100% { + + transform: rotate(360deg); + + } + +} + + + +/*iziToast*/ + +.iziToast:after { + + box-shadow: none !important; + +} + +.iziToast>.iziToast-close { + + opacity: 0.9 !important; + + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTcwODgxMzc1MTA3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0MTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik05NTQuMzA0IDE5MC4zMzZhMTUuNTUyIDE1LjU1MiAwIDAgMSAwIDIxLjk1MmwtMzAwLjAzMiAzMDAuMDMyIDI5OC41NiAyOTguNTZhMTUuNjE2IDE1LjYxNiAwIDAgMSAwIDIyLjAxNmwtMTIwLjk2IDEyMC44OTZhMTUuNTUyIDE1LjU1MiAwIDAgMS0yMS45NTIgMEw1MTEuMzYgNjU1LjIzMiAyMTQuMjcyIDk1Mi4zMmExNS41NTIgMTUuNTUyIDAgMCAxLTIxLjk1MiAwbC0xMjAuODk2LTEyMC44OTZhMTUuNDg4IDE1LjQ4OCAwIDAgMSAwLTIxLjk1MmwyOTcuMTUyLTI5Ny4xNTJMNjkuODg4IDIxMy43NmExNS41NTIgMTUuNTUyIDAgMCAxIDAtMjEuOTUybDEyMC44OTYtMTIwLjg5NmExNS41NTIgMTUuNTUyIDAgMCAxIDIxLjk1MiAwTDUxMS4zNiAzNjkuNDcybDMwMC4wOTYtMzAwLjAzMmExNS4zNiAxNS4zNiAwIDAgMSAyMS45NTIgMGwxMjAuODk2IDEyMC44OTZ6IiBwLWlkPSIzNDExIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+) no-repeat 50% 50% !important; + + background-size: 10px !important; + +} + +.iziToast>.iziToast-body .iziToast-icon { + + font-size: 18px !important; + +} + +.iziToast>.iziToast-body i.fa-spin:before { + + animation: fa-spin 2s infinite linear; + + display: inline-block; + +} + +.iziToast.iziToast-noprogressbar .iziToast-progressbar { + + display: none; + +} + +/*Mathjax 相关*/ + +.MathJax { + + outline: none !important; + +} + +#MathJax_Zoom { + + background: var(--color-widgets) !important; + + border: var(--color-border-on-foreground-deeper) solid 1px !important; + + border-radius: 3px !important; + + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important; + +} + +.CtxtMenu_Menu { + + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; + + border: none !important; + + border-radius: 5px !important; + +} + + + +/*LazyLoad 加载样式*/ + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"] { + + width: 100%; + + max-height: 60vh; + + background-color: var(--color-border-on-foreground); + + background-repeat: no-repeat; + + background-position: 50% 50%; + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"]:not([srcset]) { + + height: 500px; + + pointer-events: none; + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-1 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iOC4wNDIlIiB5MT0iMCUiIHgyPSI2NS42ODIlIiB5Mj0iMjMuODY1JSIgaWQ9ImEiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNWU3MmU0IiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCUiLz4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzVlNzJlNCIgc3RvcC1vcGFjaXR5PSIuNjMxIiBvZmZzZXQ9IjYzLjE0NiUiLz4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzVlNzJlNCIgb2Zmc2V0PSIxMDAlIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCIgaWQ9Ik92YWwtMiIgc3Ryb2tlPSJ1cmwoI2EpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0KICAgICAgICAgICAgICAgICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iCiAgICAgICAgICAgICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgICAgICAgICAgIGZyb209IjAgMTggMTgiCiAgICAgICAgICAgICAgICAgICAgdG89IjM2MCAxOCAxOCIKICAgICAgICAgICAgICAgICAgICBkdXI9IjAuOXMiCiAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvcGF0aD4KICAgICAgICAgICAgPGNpcmNsZSBmaWxsPSIjNWU3MmU0IiBjeD0iMzYiIGN5PSIxOCIgcj0iMSI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgICAgICAgICAgICB0eXBlPSJyb3RhdGUiCiAgICAgICAgICAgICAgICAgICAgZnJvbT0iMCAxOCAxOCIKICAgICAgICAgICAgICAgICAgICB0bz0iMzYwIDE4IDE4IgogICAgICAgICAgICAgICAgICAgIGR1cj0iMC45cyIKICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-2 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM1ZTcyZTQiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjEiPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIgogICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuOHMiCiAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7IDIwIgogICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIKICAgICAgICAgICAgICAgIGtleVRpbWVzPSIwOyAxIgogICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4xNjUsIDAuODQsIDAuNDQsIDEiCiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ic3Ryb2tlLW9wYWNpdHkiCiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS44cyIKICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIKICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJzcGxpbmUiCiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIKICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiCiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L2NpcmNsZT4KICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIKICAgICAgICAgICAgICAgIGJlZ2luPSItMC45cyIgZHVyPSIxLjhzIgogICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIKICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJzcGxpbmUiCiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIKICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIgogICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1vcGFjaXR5IgogICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuOHMiCiAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7IDAiCiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIgogICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiCiAgICAgICAgICAgICAgICBrZXlTcGxpbmVzPSIwLjMsIDAuNjEsIDAuMzU1LCAxIgogICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9jaXJjbGU+CiAgICA8L2c+Cjwvc3ZnPg==); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-3 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUiIGhlaWdodD0iNDYuNSIgdmlld0JveD0iMCAwIDEzNSAxNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzVlNzJlNCI+CiAgICA8cmVjdCB5PSIxMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjEyMCIgcng9IjYiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIKICAgICAgICAgICAgIGJlZ2luPSIwLjVzIiBkdXI9IjFzIgogICAgICAgICAgICAgdmFsdWVzPSIxMjA7MTEwOzEwMDs5MDs4MDs3MDs2MDs1MDs0MDsxNDA7MTIwIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIKICAgICAgICAgICAgIGJlZ2luPSIwLjVzIiBkdXI9IjFzIgogICAgICAgICAgICAgdmFsdWVzPSIxMDsxNTsyMDsyNTszMDszNTs0MDs0NTs1MDswOzEwIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSIzMCIgeT0iMTAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMjAiIHJ4PSI2Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICBiZWdpbj0iMC4yNXMiIGR1cj0iMXMiCiAgICAgICAgICAgICB2YWx1ZXM9IjEyMDsxMTA7MTAwOzkwOzgwOzcwOzYwOzUwOzQwOzE0MDsxMjAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IgogICAgICAgICAgICAgYmVnaW49IjAuMjVzIiBkdXI9IjFzIgogICAgICAgICAgICAgdmFsdWVzPSIxMDsxNTsyMDsyNTszMDszNTs0MDs0NTs1MDswOzEwIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSI2MCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE0MCIgcng9IjYiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIKICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxcyIKICAgICAgICAgICAgIHZhbHVlcz0iMTIwOzExMDsxMDA7OTA7ODA7NzA7NjA7NTA7NDA7MTQwOzEyMCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiCiAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMXMiCiAgICAgICAgICAgICB2YWx1ZXM9IjEwOzE1OzIwOzI1OzMwOzM1OzQwOzQ1OzUwOzA7MTAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9IjkwIiB5PSIxMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjEyMCIgcng9IjYiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIKICAgICAgICAgICAgIGJlZ2luPSIwLjI1cyIgZHVyPSIxcyIKICAgICAgICAgICAgIHZhbHVlcz0iMTIwOzExMDsxMDA7OTA7ODA7NzA7NjA7NTA7NDA7MTQwOzEyMCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiCiAgICAgICAgICAgICBiZWdpbj0iMC4yNXMiIGR1cj0iMXMiCiAgICAgICAgICAgICB2YWx1ZXM9IjEwOzE1OzIwOzI1OzMwOzM1OzQwOzQ1OzUwOzA7MTAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9IjEyMCIgeT0iMTAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMjAiIHJ4PSI2Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICBiZWdpbj0iMC41cyIgZHVyPSIxcyIKICAgICAgICAgICAgIHZhbHVlcz0iMTIwOzExMDsxMDA7OTA7ODA7NzA7NjA7NTA7NDA7MTQwOzEyMCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiCiAgICAgICAgICAgICBiZWdpbj0iMC41cyIgZHVyPSIxcyIKICAgICAgICAgICAgIHZhbHVlcz0iMTA7MTU7MjA7MjU7MzA7MzU7NDA7NDU7NTA7MDsxMCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgPC9yZWN0Pgo8L3N2Zz4K); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-4 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM1ZTcyZTQiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8Y2lyY2xlIHN0cm9rZS1vcGFjaXR5PSIuNSIgY3g9IjE4IiBjeT0iMTgiIHI9IjE4Ii8+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgICAgICAgICAgICB0eXBlPSJyb3RhdGUiCiAgICAgICAgICAgICAgICAgICAgZnJvbT0iMCAxOCAxOCIKICAgICAgICAgICAgICAgICAgICB0bz0iMzYwIDE4IDE4IgogICAgICAgICAgICAgICAgICAgIGR1cj0iMXMiCiAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICAgICAgICAgICAgPC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-5 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iNjUiIHZpZXdCb3g9IjAgMCA0NSA0NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM1ZTcyZTQiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIKICAgICAgICAgICAgICAgICBiZWdpbj0iMS41cyIgZHVyPSIzcyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjY7MjIiCiAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ic3Ryb2tlLW9wYWNpdHkiCiAgICAgICAgICAgICAgICAgYmVnaW49IjEuNXMiIGR1cj0iM3MiCiAgICAgICAgICAgICAgICAgdmFsdWVzPSIxOzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIKICAgICAgICAgICAgICAgICBiZWdpbj0iMS41cyIgZHVyPSIzcyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjI7MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L2NpcmNsZT4KICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiCiAgICAgICAgICAgICAgICAgYmVnaW49IjNzIiBkdXI9IjNzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iNjsyMiIKICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIKICAgICAgICAgICAgICAgICBiZWdpbj0iM3MiIGR1cj0iM3MiCiAgICAgICAgICAgICAgICAgdmFsdWVzPSIxOzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIKICAgICAgICAgICAgICAgICBiZWdpbj0iM3MiIGR1cj0iM3MiCiAgICAgICAgICAgICAgICAgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgPGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiCiAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNXMiCiAgICAgICAgICAgICAgICAgdmFsdWVzPSI2OzE7MjszOzQ7NTs2IgogICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9jaXJjbGU+CiAgICA8L2c+Cjwvc3ZnPg==); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-6 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMjAgMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzVlNzJlNCI+CiAgICA8Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNSI+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgZnJvbT0iMTUiIHRvPSIxNSIKICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMC44cyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjE1Ozk7MTUiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IiBmcm9tPSIxIiB0bz0iMSIKICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMC44cyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7LjU7MSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iNjAiIGN5PSIxNSIgcj0iOSIgZmlsbC1vcGFjaXR5PSIwLjMiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIGZyb209IjkiIHRvPSI5IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIwLjhzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iOTsxNTs5IiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIgZnJvbT0iMC41IiB0bz0iMC41IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIwLjhzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iLjU7MTsuNSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iMTA1IiBjeT0iMTUiIHI9IjE1Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIwLjhzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iMTU7OTsxNSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIwLjhzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsuNTsxIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgPC9jaXJjbGU+Cjwvc3ZnPgo=); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-7 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzUiIGhlaWdodD0iNDUiIHZpZXdCb3g9IjAgMCA1NSA4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjNWU3MmU0Ij4KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgODApIj4KICAgICAgICA8cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMjAiIHJ4PSIzIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSI0LjNzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iMjA7NDU7NTc7ODA7NjQ7MzI7NjY7NDU7NjQ7MjM7NjY7MTM7NjQ7NTY7MzQ7MzQ7MjsyMzs3Njs3OTsyMCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgICAgPHJlY3QgeD0iMTUiIHdpZHRoPSIxMCIgaGVpZ2h0PSI4MCIgcng9IjMiPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjJzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iODA7NTU7MzM7NTs3NTsyMzs3MzszMzsxMjsxNDs2MDs4MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgICAgPHJlY3QgeD0iMzAiIHdpZHRoPSIxMCIgaGVpZ2h0PSI1MCIgcng9IjMiPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiCiAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDszNDs3ODsyMzs1NjsyMzszNDs3Njs4MDs1NDsyMTs1MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgICAgPHJlY3QgeD0iNDUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIzMCIgcng9IjMiPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjJzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iMzA7NDU7MTM7ODA7NTY7NzI7NDU7NzY7MzQ7MjM7Njc7MzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9yZWN0PgogICAgPC9nPgo8L3N2Zz4=); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-8 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAxMDUgMTA1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM1ZTcyZTQiPgogICAgPGNpcmNsZSBjeD0iMTIuNSIgY3k9IjEyLjUiIHI9IjEyLjUiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjFzIgogICAgICAgICB2YWx1ZXM9IjE7LjI7MSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L2NpcmNsZT4KICAgIDxjaXJjbGUgY3g9IjEyLjUiIGN5PSI1Mi41IiByPSIxMi41IiBmaWxsLW9wYWNpdHk9Ii41Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgIGJlZ2luPSIxMDBtcyIgZHVyPSIxcyIKICAgICAgICAgdmFsdWVzPSIxOy4yOzEiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgPC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI1Mi41IiBjeT0iMTIuNSIgcj0iMTIuNSI+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IgogICAgICAgICBiZWdpbj0iMzAwbXMiIGR1cj0iMXMiCiAgICAgICAgIHZhbHVlcz0iMTsuMjsxIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iNTIuNSIgY3k9IjUyLjUiIHI9IjEyLjUiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgYmVnaW49IjYwMG1zIiBkdXI9IjFzIgogICAgICAgICB2YWx1ZXM9IjE7LjI7MSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L2NpcmNsZT4KICAgIDxjaXJjbGUgY3g9IjkyLjUiIGN5PSIxMi41IiByPSIxMi41Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgIGJlZ2luPSI4MDBtcyIgZHVyPSIxcyIKICAgICAgICAgdmFsdWVzPSIxOy4yOzEiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgPC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI5Mi41IiBjeT0iNTIuNSIgcj0iMTIuNSI+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IgogICAgICAgICBiZWdpbj0iNDAwbXMiIGR1cj0iMXMiCiAgICAgICAgIHZhbHVlcz0iMTsuMjsxIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iMTIuNSIgY3k9IjkyLjUiIHI9IjEyLjUiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgYmVnaW49IjcwMG1zIiBkdXI9IjFzIgogICAgICAgICB2YWx1ZXM9IjE7LjI7MSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L2NpcmNsZT4KICAgIDxjaXJjbGUgY3g9IjUyLjUiIGN5PSI5Mi41IiByPSIxMi41Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgIGJlZ2luPSI1MDBtcyIgZHVyPSIxcyIKICAgICAgICAgdmFsdWVzPSIxOy4yOzEiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgPC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI5Mi41IiBjeT0iOTIuNSIgcj0iMTIuNSI+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IgogICAgICAgICBiZWdpbj0iMjAwbXMiIGR1cj0iMXMiCiAgICAgICAgIHZhbHVlcz0iMTsuMjsxIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvY2lyY2xlPgo8L3N2Zz4K); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-9 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA1OCA1OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiAxKSIgc3Ryb2tlPSIjNWU3MmU0IiBzdHJva2Utd2lkdGg9IjEuNSI+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjQyLjYwMSIgY3k9IjExLjQ2MiIgcj0iNSIgZmlsbC1vcGFjaXR5PSIxIiBmaWxsPSIjNWU3MmU0Ij4KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuM3MiCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iMTswOzA7MDswOzA7MDswIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjQ5LjA2MyIgY3k9IjI3LjA2MyIgcj0iNSIgZmlsbC1vcGFjaXR5PSIwIiBmaWxsPSIjNWU3MmU0Ij4KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuM3MiCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iMDsxOzA7MDswOzA7MDswIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjQyLjYwMSIgY3k9IjQyLjY2MyIgcj0iNSIgZmlsbC1vcGFjaXR5PSIwIiBmaWxsPSIjNWU3MmU0Ij4KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuM3MiCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iMDswOzE7MDswOzA7MDswIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjI3IiBjeT0iNDkuMTI1IiByPSI1IiBmaWxsLW9wYWNpdHk9IjAiIGZpbGw9IiM1ZTcyZTQiPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IgogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS4zcyIKICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIwOzA7MDsxOzA7MDswOzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICA8L2NpcmNsZT4KICAgICAgICAgICAgPGNpcmNsZSBjeD0iMTEuMzk5IiBjeT0iNDIuNjYzIiByPSI1IiBmaWxsLW9wYWNpdHk9IjAiIGZpbGw9IiM1ZTcyZTQiPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IgogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS4zcyIKICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIwOzA7MDswOzE7MDswOzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICA8L2NpcmNsZT4KICAgICAgICAgICAgPGNpcmNsZSBjeD0iNC45MzgiIGN5PSIyNy4wNjMiIHI9IjUiIGZpbGwtb3BhY2l0eT0iMCIgZmlsbD0iIzVlNzJlNCI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxLjNzIgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjA7MDswOzA7MDsxOzA7MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSIxMS4zOTkiIGN5PSIxMS40NjIiIHI9IjUiIGZpbGwtb3BhY2l0eT0iMCIgZmlsbD0iIzVlNzJlNCI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxLjNzIgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjA7MDswOzA7MDswOzE7MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiIGZpbGwtb3BhY2l0eT0iMCIgZmlsbD0iIzVlNzJlNCI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxLjNzIgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjA7MDswOzA7MDswOzA7MSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-10 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCAxMzUgMTM1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM1ZTcyZTQiPgogICAgPHBhdGggZD0iTTY3LjQ0NyA1OGM1LjUyMyAwIDEwLTQuNDc3IDEwLTEwcy00LjQ3Ny0xMC0xMC0xMC0xMCA0LjQ3Ny0xMCAxMCA0LjQ3NyAxMCAxMCAxMHptOS40NDggOS40NDdjMCA1LjUyMyA0LjQ3NyAxMCAxMCAxMCA1LjUyMiAwIDEwLTQuNDc3IDEwLTEwcy00LjQ3OC0xMC0xMC0xMGMtNS41MjMgMC0xMCA0LjQ3Ny0xMCAxMHptLTkuNDQ4IDkuNDQ4Yy01LjUyMyAwLTEwIDQuNDc3LTEwIDEwIDAgNS41MjIgNC40NzcgMTAgMTAgMTBzMTAtNC40NzggMTAtMTBjMC01LjUyMy00LjQ3Ny0xMC0xMC0xMHpNNTggNjcuNDQ3YzAtNS41MjMtNC40NzctMTAtMTAtMTBzLTEwIDQuNDc3LTEwIDEwIDQuNDc3IDEwIDEwIDEwIDEwLTQuNDc3IDEwLTEweiI+CiAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0KICAgICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICAgICAgICB0eXBlPSJyb3RhdGUiCiAgICAgICAgICAgIGZyb209IjAgNjcgNjciCiAgICAgICAgICAgIHRvPSItMzYwIDY3IDY3IgogICAgICAgICAgICBkdXI9IjIuNXMiCiAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgICA8L3BhdGg+CiAgICA8cGF0aCBkPSJNMjguMTkgNDAuMzFjNi42MjcgMCAxMi01LjM3NCAxMi0xMiAwLTYuNjI4LTUuMzczLTEyLTEyLTEyLTYuNjI4IDAtMTIgNS4zNzItMTIgMTIgMCA2LjYyNiA1LjM3MiAxMiAxMiAxMnptMzAuNzItMTkuODI1YzQuNjg2IDQuNjg3IDEyLjI4NCA0LjY4NyAxNi45NyAwIDQuNjg2LTQuNjg2IDQuNjg2LTEyLjI4NCAwLTE2Ljk3LTQuNjg2LTQuNjg3LTEyLjI4NC00LjY4Ny0xNi45NyAwLTQuNjg3IDQuNjg2LTQuNjg3IDEyLjI4NCAwIDE2Ljk3em0zNS43NCA3LjcwNWMwIDYuNjI3IDUuMzcgMTIgMTIgMTIgNi42MjYgMCAxMi01LjM3MyAxMi0xMiAwLTYuNjI4LTUuMzc0LTEyLTEyLTEyLTYuNjMgMC0xMiA1LjM3Mi0xMiAxMnptMTkuODIyIDMwLjcyYy00LjY4NiA0LjY4Ni00LjY4NiAxMi4yODQgMCAxNi45NyA0LjY4NyA0LjY4NiAxMi4yODUgNC42ODYgMTYuOTcgMCA0LjY4Ny00LjY4NiA0LjY4Ny0xMi4yODQgMC0xNi45Ny00LjY4NS00LjY4Ny0xMi4yODMtNC42ODctMTYuOTcgMHptLTcuNzA0IDM1Ljc0Yy02LjYyNyAwLTEyIDUuMzctMTIgMTIgMCA2LjYyNiA1LjM3MyAxMiAxMiAxMnMxMi01LjM3NCAxMi0xMmMwLTYuNjMtNS4zNzMtMTItMTItMTJ6bS0zMC43MiAxOS44MjJjLTQuNjg2LTQuNjg2LTEyLjI4NC00LjY4Ni0xNi45NyAwLTQuNjg2IDQuNjg3LTQuNjg2IDEyLjI4NSAwIDE2Ljk3IDQuNjg2IDQuNjg3IDEyLjI4NCA0LjY4NyAxNi45NyAwIDQuNjg3LTQuNjg1IDQuNjg3LTEyLjI4MyAwLTE2Ljk3em0tMzUuNzQtNy43MDRjMC02LjYyNy01LjM3Mi0xMi0xMi0xMi02LjYyNiAwLTEyIDUuMzczLTEyIDEyczUuMzc0IDEyIDEyIDEyYzYuNjI4IDAgMTItNS4zNzMgMTItMTJ6bS0xOS44MjMtMzAuNzJjNC42ODctNC42ODYgNC42ODctMTIuMjg0IDAtMTYuOTctNC42ODYtNC42ODYtMTIuMjg0LTQuNjg2LTE2Ljk3IDAtNC42ODcgNC42ODYtNC42ODcgMTIuMjg0IDAgMTYuOTcgNC42ODYgNC42ODcgMTIuMjg0IDQuNjg3IDE2Ljk3IDB6Ij4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iCiAgICAgICAgICAgIHR5cGU9InJvdGF0ZSIKICAgICAgICAgICAgZnJvbT0iMCA2NyA2NyIKICAgICAgICAgICAgdG89IjM2MCA2NyA2NyIKICAgICAgICAgICAgZHVyPSI4cyIKICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICAgIDwvcGF0aD4KPC9zdmc+Cg==); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-11 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUiIGhlaWdodD0iNDUiIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM1ZTcyZTQiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3kiCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiCiAgICAgICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjU7Mjc7NDk7NSIKICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3kiCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIgogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSIKICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1OzUwOzUwOzUiCiAgICAgICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIgogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3IgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjI3OzQ5OzU7MjciCiAgICAgICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICA8L2NpcmNsZT4KICAgICAgICAgICAgPGNpcmNsZSBjeD0iNDkiIGN5PSI1MCIgcj0iNSI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSIKICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTA7NTA7NTs1MCIKICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeCIKICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSIKICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNDk7NTsyNzs0OSIKICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); + +} + + + +/*Fancybox 样式*/ + +.fancybox-wrapper { + + width: max-content; + + max-width: 100%; + +} + +figure>.fancybox-wrapper, + +figure>a>.fancybox-wrapper { + + width: unset; + +} + +.fancybox-wrapper.lazyload-container-unload { + + width: 100%; + +} + + + +.fancybox-wrapper>img { + + cursor: pointer; + + cursor: -webkit-zoom-in; + + cursor: zoom-in; + +} + +/*Zoomify 样式*/ + +.zoomify { + + cursor: pointer; + + cursor: -webkit-zoom-in; + + cursor: zoom-in; + +} + +.zoomify.zoomed { + + cursor: -webkit-zoom-out; + + cursor: zoom-out; + + padding: 0; + + margin: 0; + + border: none; + + border-radius: 0; + + box-shadow: none; + + position: relative; + + z-index: 1501; + +} + +.zoomify-shadow { + + position: fixed; + + top: 0; + + left: 0; + + right: 0; + + bottom: 0; + + width: 100%; + + height: 100%; + + display: block; + + z-index: 1500; + + background: rgba(0, 0, 0, 0.3); + + opacity: 0; + +} + +.zoomify-shadow.zoomed { + + opacity: 1; + + cursor: pointer; + + cursor: -webkit-zoom-out; + + cursor: zoom-out; + +} + +.noscroll { + + overflow: hidden !important; + +} + +body.noscroll:before { + + opacity: 0 !important; + +} + + + +/*Share.js*/ + +/* 文章操作按钮容器 */ +#post_actions_container { + display: flex !important; + flex-direction: row !important; + justify-content: flex-end !important; + align-items: center !important; + gap: 10px !important; + margin-bottom: 25px; +} + +/* ---------- 分享按钮 ---------- */ +#share_container { + position: relative; + display: inline-flex; + align-items: flex-end; +} + +#comments_toggle { + display: inline-flex !important; + align-items: center; + gap: 8px; + padding: 8px 16px; + height: 38px; + white-space: nowrap; + background-color: var(--themecolor) !important; + border-color: var(--themecolor) !important; +} + +#comments_toggle:hover { + background-color: var(--themecolor-dark) !important; + border-color: var(--themecolor-dark) !important; +} + +#comments_toggle:active { + background-color: var(--themecolor-dark2) !important; + border-color: var(--themecolor-dark2) !important; +} + +#comments_toggle .btn-inner--icon { + margin-right: 0; +} + +#comments_toggle .btn-inner--text { + font-size: 14px; +} + +/* 分享按钮 - 默认显示 */ +#share_show { + position: relative; + z-index: 2; + height: 38px; + width: 38px; + display: inline-flex; + align-items: center; + justify-content: center; + background-color: var(--themecolor) !important; + border-color: var(--themecolor) !important; + transform: translateY(0); + opacity: 1; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} + +#share_show:hover { + background-color: var(--themecolor-dark) !important; + border-color: var(--themecolor-dark) !important; +} + +#share_show:active { + background-color: var(--themecolor-dark2) !important; + border-color: var(--themecolor-dark2) !important; +} + +/* 分享面板 - 默认隐藏 */ +#share { + position: absolute; + bottom: 0; + right: 0; + display: flex; + flex-direction: row; + gap: 6px; + transform: translateY(15px); + opacity: 0; + pointer-events: none; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* 分享渠道按钮初始状�?*/ +#share>a { + opacity: 0; + transform: translateY(10px); + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), + opacity 0.2s ease-out; +} + +/* 展开状�?- 分享按钮上滑淡出 */ +#share_container.opened #share_show { + transform: translateY(-15px); + opacity: 0; + pointer-events: none; +} + +/* 展开状�?- 分享面板上滑淡入 */ +#share_container.opened #share { + transform: translateY(0); + opacity: 1; + pointer-events: auto; +} + +/* 展开时各按钮错落滑入 */ +#share_container.opened #share>a { + opacity: 1; + transform: translateY(0); +} + +#share_container.opened #share>a:nth-child(1) { + transition-delay: 30ms; +} + +#share_container.opened #share>a:nth-child(2) { + transition-delay: 60ms; +} + +#share_container.opened #share>a:nth-child(3) { + transition-delay: 90ms; +} + +#share_container.opened #share>a:nth-child(4) { + transition-delay: 120ms; +} + +#share_container.opened #share>a:nth-child(5) { + transition-delay: 150ms; +} + +#share_container.opened #share>a:nth-child(6) { + transition-delay: 180ms; +} + +#share_container.opened #share>a:nth-child(7) { + transition-delay: 210ms; +} + +#share_container.opened #share>a:nth-child(8) { + transition-delay: 240ms; +} + +/* 收起时各按钮错落滑出 */ +#share_container:not(.opened) #share>a:nth-child(8) { + transition-delay: 0ms; +} + +#share_container:not(.opened) #share>a:nth-child(7) { + transition-delay: 15ms; +} + +#share_container:not(.opened) #share>a:nth-child(6) { + transition-delay: 30ms; +} + +#share_container:not(.opened) #share>a:nth-child(5) { + transition-delay: 45ms; +} + +#share_container:not(.opened) #share>a:nth-child(4) { + transition-delay: 60ms; +} + +#share_container:not(.opened) #share>a:nth-child(3) { + transition-delay: 75ms; +} + +#share_container:not(.opened) #share>a:nth-child(2) { + transition-delay: 90ms; +} + +#share_container:not(.opened) #share>a:nth-child(1) { + transition-delay: 105ms; +} + +/* 分享按钮通用样式 */ +#share_container .btn { + height: 38px; + width: 38px; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0; + border-radius: 10px; +} + +/* 移动端分享面板适配 */ +@media (max-width: 576px) { + #share { + flex-wrap: wrap; + justify-content: flex-end; + max-width: calc(100vw - 40px); + } +} + +#share .icon-wechat, +#share .icon-copy-link { + position: relative; +} + +/* 二维码弹�?- 显示在按钮上�?*/ +#share .icon-wechat .wechat-qrcode, +#share .icon-copy-link .wechat-qrcode { + position: absolute; + z-index: 10; + bottom: calc(100% + 10px); + left: 50%; + transform: translateX(-50%) translateY(10px); + width: max-content; + width: -moz-max-content; + background: var(--color-widgets); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + text-align: center; + padding: 15px 20px; + transition: opacity 0.25s ease, transform 0.25s ease; + opacity: 0; + border-radius: 12px; + pointer-events: none; +} + +#share .icon-wechat:hover .wechat-qrcode, +#share .icon-copy-link:hover .wechat-qrcode { + transform: translateX(-50%) translateY(0); + opacity: 1; + pointer-events: auto; +} + +/* 二维码弹窗箭�?*/ +#share .wechat-qrcode:before { + position: absolute; + z-index: 3; + bottom: -6px; + left: 50%; + display: block; + width: 12px; + height: 12px; + content: ""; + transform: translateX(-50%) rotate(45deg); + border-radius: 2px; + background: var(--color-widgets); +} + +#share .qrcode img { + margin: auto; +} + +#share .wechat-qrcode h4 { + font-size: 16px; + padding-bottom: 10px; + margin: 0; +} + +#share .wechat-qrcode .help { + color: #666; + padding-top: 10px; + padding-bottom: 0; + font-size: 12px; +} + +html.darkmode #share .wechat-qrcode .help { + color: var(--color-text); +} + +#share>a { + position: relative; +} + +/* tooltip - 显示在按钮上�?*/ +#share>a:before, +#share_show:before { + pointer-events: none; + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%) translateY(5px); + line-height: 1.4; + width: max-content; + width: -moz-max-content; + text-align: center; + font-weight: normal; + color: #fff; + background: rgba(50, 50, 93, 0.95); + padding: 6px 12px; + font-size: 13px; + border-radius: 6px; + z-index: 10; + transition: opacity 0.2s ease, transform 0.2s ease; + opacity: 0; +} + +#share>a:hover:before, +#share_show:hover:before { + transform: translateX(-50%) translateY(0); + opacity: 1; +} + +#share_show:before { + content: attr(tooltip); + height: max-content; + height: -moz-max-content; + text-transform: none; +} + +#share .icon-douban:before { + content: attr(tooltip); +} + +#share .icon-qq:before { + content: attr(tooltip); +} + +#share .icon-qzone:before { + content: attr(tooltip); +} + +#share .icon-weibo:before { + content: attr(tooltip); +} + +#share .icon-facebook:before { + content: attr(tooltip); +} + +#share .icon-twitter:before { + content: attr(tooltip); +} + +#share .icon-telegram:before { + content: attr(tooltip); +} + +#share .icon-copy-link:before { + display: none !important; +} + +/* 移动端分享按钮适配 */ +@media (max-width: 576px) { + + /* 隐藏 tooltip */ + #share>a:before, + #share_show:before { + display: none !important; + } + + /* 二维码弹窗改为左侧显�?*/ + #share .icon-wechat .wechat-qrcode, + #share .icon-copy-link .wechat-qrcode { + bottom: auto; + top: 50%; + left: auto; + right: calc(100% + 10px); + transform: translateY(-50%) translateX(10px); + } + + #share .icon-wechat:hover .wechat-qrcode, + #share .icon-copy-link:hover .wechat-qrcode { + transform: translateY(-50%) translateX(0); + } + + #share .wechat-qrcode:before { + bottom: auto; + top: 50%; + left: auto; + right: -6px; + transform: translateY(-50%) rotate(45deg); + } +} + +/* ========================================================================== + WordPress Adminbar + ========================================================================== */ +#wpadminbar { + position: fixed !important; + width: max-content !important; + height: max-content !important; + width: -moz-max-content !important; + height: -moz-max-content !important; + min-height: 55px; + max-width: 100vw; + background: var(--themecolor) !important; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; + border-radius: 0 100px 100px 0; + padding: 10px 20px; + top: calc(50vh - 27.5px) !important; + left: 0 !important; + transform: translateX(calc(-100% + 25px)); + transition: all 0.3s ease; +} + +#wpadminbar:hover { + transform: none !important; +} + +#wpadminbar:after { + + content: "\f105"; + + font: normal normal normal 20px/1 FontAwesome; + + position: absolute; + + top: 50%; + + transform: translateY(calc(-50% - 2px)); + + right: 10px; + + transition: all 0.3s ease; + + color: #fff; + +} + +#wpadminbar:hover:after { + + opacity: 0; + +} + +html[class], + +html[lang] { + + margin-top: 0 !important; + +} + + + +/*说说*/ + +.shuoshuo-container { + + margin-bottom: 25px; + +} + +.shuoshuo-meta { + + text-align: center; + + background: var(--color-foreground); + + border-radius: 5px 5px 0 0; + + width: max-content; + + width: -moz-max-content; + + padding: 3px 15px; + + font-size: 15px; + + opacity: 0.95; + +} + +.shuoshuo-meta i.fa { + + margin-right: 3px; + +} + +.shuoshuo-date-date, + +.shuoshuo-date-month { + + font-size: 18px; + +} + +.shuoshuo-main { + + border-top-left-radius: 0; + + padding: 20px 20px; + +} + +.shuoshuo-title { + + font-size: 18px; + + color: #555; + + font-weight: bold; + + margin-bottom: 10px; + + width: max-content; + + width: -moz-max-content; + + max-width: 100%; + +} + +.shuoshuo-content { + + padding-bottom: 10px; + +} + +.shuoshuo-content p { + + margin-bottom: 0; + + line-height: 1.8; + +} + +.shuoshuo-content * { + + max-width: 100%; + +} + +.shuoshuo-comments { + + font-size: 14px; + + opacity: 0.85; + + margin-top: 10px; + +} + +.shuoshuo-comments li { + + list-style: none; + +} + +.shuoshuo-comment-item-title { + + font-weight: bold; + +} + +.shuoshuo-comment-item-title .badge-admin, + +.shuoshuo-comment-item-title .badge-private-comment, + +.shuoshuo-comment-item-title .badge-unapproved { + + transform: translateY(-2px); + + padding: 3px 5px; + +} + +.shuoshuo-comments .comment-item-inner { + + margin-top: 2px; + + padding-bottom: 3px; + + border: none !important; + +} + +.shuoshuo-comments ul.children { + + padding-inline-start: 20px; + +} + +.shuoshuo-operations { + + margin-top: 5px; + + margin-left: auto; + + width: max-content; + + width: -moz-max-content; + +} + +.shuoshuo-operations button { + + margin-left: 3px; + +} + +.shuoshuo-operations button.upvoted { + + color: #fff; + + border-color: var(--themecolor); + + background-color: var(--themecolor); + + pointer-events: none; + +} + +@keyframes shuoshuo-upvoted-animation { + + 0% { + + transform: none; + + } + + 50% { + + transform: scale(1.35); + + } + + 100% { + + transform: none; + + } + +} + +.shuoshuo-upvoted-animation i.fa { + + animation: shuoshuo-upvoted-animation 1s ease; + +} + +.shuoshuo-upvote i.fa-spin { + + display: none; + +} + +.shuoshuo-upvote.shuoshuo-upvoting i.fa-spin { + + display: inline-block; + +} + +.shuoshuo-upvote.shuoshuo-upvoting { + + opacity: 0.8; + + pointer-events: none; + +} + + + +.shuoshuo-preview-container { + + margin-bottom: 20px; + + padding: 25px 35px; + + transition: opacity 0.5s ease; + +} + +.shuoshuo-preview-container:before { + + content: ""; + + display: block; + + position: absolute; + + left: -20px; + + top: -10px; + + width: 40px; + + height: 30px; + + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTgzNDIzNDcwNTE4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMwOTciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzc1Ljk5MTUxIDQzNy43MjYzOWM0OC4xMzEyMDctNzQuODg3NTk0IDExNi4yODY0Ny0xMzguMjQ5NjkxIDE4My4wMzg3OC0xODMuNTU2NTczbC03NS4xMzQyMTEtNzkuNDAxMzk4Yy0xNzIuNDgwMzA2IDY3LjY0MDU0LTMzNi43ODMzNzMgMjQyLjYxMTU3My0zMzYuNzgzMzczIDQ0OC40MzkzODJsMS4zMjcyMjggMGMtMC41Njg5NTggNi4yMzE5MzUtMC44NzQ5MjcgMTIuNTQwNjE3LTAuODc0OTI3IDE4LjkyMDkzMiAwIDExMy41ODU5NjUgOTIuMDc3MDkyIDIwNS42NjMwNTYgMjA1LjY2MzA1NiAyMDUuNjYzMDU2IDExMy41ODE4NzEgMCAyMDUuNjYzMDU2LTkyLjA3NzA5MiAyMDUuNjYzMDU2LTIwNS42NjMwNTZDOTU4Ljg5MjE0MyA1MzYuMjM5MDU0IDg3OC44NjAzODkgNDQ5LjA1NTQxMiA3NzUuOTkxNTEgNDM3LjcyNjM5ek00NzIuOTE2ODY2IDI1NC4xNjk4MTdsLTc1LjEzNDIxMS03OS40MDEzOThjLTE3Mi40ODAzMDYgNjcuNjQwNTQtMzM2Ljc4MzM3MyAyNDIuNjExNTczLTMzNi43ODMzNzMgNDQ4LjQzOTM4MmwxLjMyNzIyOCAwYy0wLjU2ODk1OCA2LjIzMTkzNS0wLjg3NDkyNyAxMi41NDA2MTctMC44NzQ5MjcgMTguOTIwOTMyIDAgMTEzLjU4NTk2NSA5Mi4wNzcwOTIgMjA1LjY2MzA1NiAyMDUuNjYzMDU2IDIwNS42NjMwNTZzMjA1LjY2MzA1Ni05Mi4wNzcwOTIgMjA1LjY2MzA1Ni0yMDUuNjYzMDU2YzAtMTA1Ljg5MDcwMi04MC4wMjg2ODUtMTkzLjA3NTM2Ny0xODIuOTAwNjMzLTIwNC40MDMzNjdDMzM4LjAwODI3IDM2Mi44Mzg3OTUgNDA2LjE2MzUzMyAyOTkuNDc2Njk5IDQ3Mi45MTY4NjYgMjU0LjE2OTgxN3oiIHAtaWQ9IjMwOTgiIGZpbGw9IiNmZmZmZmYiIGRhdGEtc3BtLWFuY2hvci1pZD0iYTMxM3guNzc4MTA2OS4wLmkyIiBjbGFzcz0ic2VsZWN0ZWQiPjwvcGF0aD48L3N2Zz4=); + + background-color: var(--themecolor); + + background-position: 40% 35%; + + border-radius: 20px; + + background-size: 32%; + + background-repeat: no-repeat; + + transition: all 0.3s ease; + +} + +.shuoshuo-preview-container:hover:before { + + left: -20px; + + top: -10px; + + width: 40px; + + height: 40px; + + background-position: 45% 45%; + + border-radius: 20px; + + background-size: 40%; + + background-repeat: no-repeat; + +} + +.shuoshuo-preview-meta { + + font-size: 14px; + + opacity: 0.6; + + transition: all 0.3s ease; + + margin-top: 10px; + +} + +.shuoshuo-preview-container .shuoshuo-preview-meta:hover { + + opacity: 0.8; + +} + +.shuoshuo-preview-meta .shuoshuo-date-date, + +.shuoshuo-preview-meta .shuoshuo-date-month { + + font-size: 14px; + +} + +.shuoshuo-preview-link { + + position: absolute; + + right: 20px; + + bottom: 25px; + + opacity: 0; + + transition: all 0.3s ease; + +} + +.shuoshuo-preview-container:hover .shuoshuo-preview-link { + + opacity: 1; + +} + +.shuoshuo-content.shuoshuo-folded { + + position: relative; + + max-height: 400px; + + overflow: hidden; + +} + +.shuoshuo-content.shuoshuo-folded:after { + + content: ""; + + display: block; + + position: absolute; + + left: 0; + + right: 0; + + bottom: 0; + + height: 150px; + + background: linear-gradient(180deg, transparent 0%, var(--color-foreground) 100%); + + pointer-events: none; + +} + +.shuoshuo-content.shuoshuo-folded .show-full-shuoshuo { + + position: absolute; + + bottom: 10px; + + right: 50%; + + transform: translateX(50%); + + color: var(--themecolor); + + z-index: 2; + + text-align: left; + + cursor: pointer; + + user-select: none; + + opacity: 1; + +} + +.shuoshuo-content.shuoshuo-folded .show-full-shuoshuo>button { + + border-radius: var(--card-radius); + + padding: 5px 20px; + + opacity: 0.8; + +} + +.shuoshuo-content.shuoshuo-folded .show-full-shuoshuo button:hover { + + opacity: 1; + +} + + + +.shuoshuo-content:not(.shuoshuo-folded) .show-full-shuoshuo { + + display: none; + +} + +/*归档时间�?/ + +.archive-timeline { + + padding-top: 10px; + +} + +.archive-timeline-title { + + box-shadow: none; + + border: none; + + background: transparent !important; + + font-size: 18px; + + padding: 0; + + margin-left: 1px; + + margin-bottom: 25px; + + padding-top: 7px; + +} + +.archive-timeline-year { + + font-size: 30px; + + color: var(--themecolor); + + margin-top: 12px !important; + + margin-bottom: 0; + +} + +.archive-timeline-month { + + font-size: 24px; + + color: var(--themecolor); + + opacity: 0.8; + + margin-top: 12px !important; + + margin-bottom: 0; + + font-weight: unset; + +} + +.archive-timeline-year + .archive-timeline-title { + + height: 50px; + + margin-top: 30px; + +} + +.archive-timeline *:not(.archive-timeline-year) + .archive-timeline-title:before { + + width: 12px; + + height: 12px; + + left: -34px; + + top: 18px; + +} + +.archive-timeline-month + .archive-timeline-title { + + height: 30px; + +} + +.archive-timeline-month.first-month-of-year + .archive-timeline-title { + + margin-top: -10px; + +} + +.archive-timeline-title > a { + + width: max-content; + + max-width: 100%; + +} + +.argon-timeline-time > a:before, + +.archive-timeline-title > a:before { + + display: none; + +} + +.argon-timeline-node:first-child > .archive-timeline-year + .archive-timeline-title { + + margin-top: 0; + +} + +.archive-timeline h2:before, + +.archive-timeline h3:before, + +.archive-timeline h2:after, + +.archive-timeline h3:after { + + display: none !important; + +} + +/*Loading Spinner*/ + +@keyframes spin { + + to { + + transform: rotate(1turn); + + } + +} + +.spinner-border { + + display: inline-block; + + width: 2rem; + + height: 2rem; + + vertical-align: text-bottom; + + border: 0.25em solid currentColor; + + border-right-color: transparent; + + border-radius: 50%; + + animation: spin 0.75s linear infinite; + +} + +.spinner-border-sm { + + width: 1rem; + + height: 1rem; + + border-width: 0.2em; + +} + +/*Loading Spinner Grow*/ + +@keyframes grow { + + 0% { + + transform: scale(0); + + } + + 50% { + + opacity: 1; + + } + +} + +.spinner-grow { + + display: inline-block; + + width: 2rem; + + height: 2rem; + + vertical-align: text-bottom; + + background-color: currentColor; + + border-radius: 50%; + + opacity: 0; + + animation: grow 0.75s linear infinite; + +} + +.spinner-grow-sm { + + width: 1rem; + + height: 1rem; + +} + +/*Highlight.js*/ + +article table.hljs-ln>tbody>tr>td, + +article table.hljs-ln>tbody>tr>th, + +article table.hljs-ln>tfoot>tr>td, + +article table.hljs-ln>tfoot>tr>th, + +article table.hljs-ln>thead>tr>td, + +article table.hljs-ln>thead>tr>th { + + padding: unset; + + vertical-align: unset; + + border: unset !important; + +} + +.hljs { + + overflow-x: auto; + +} + +pre.hljs-codeblock { + + overflow: visible; + + position: relative; + + tab-size: 4; + +} + +pre.hljs-codeblock:before { + + content: ""; + + position: absolute; + + background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkY1RjU2IiBzdHJva2U9IiNFMDQ0M0UiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iI0ZGQkQyRSIgc3Ryb2tlPSIjREVBMTIzIiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0NiIgY3k9IjYiIHI9IjYiIGZpbGw9IiMyN0M5M0YiIHN0cm9rZT0iIzFBQUIyOSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==) no-repeat; + + background-position-y: center; + + top: 22px; + + left: 20px; + + height: 14px; + + width: 54px; + + margin-left: 5px; + + display: block; + +} + +code[hljs-codeblock-inner] { + + line-height: 1.5; + + font-size: 16px; + + padding: 22px 20px !important; + + border-radius: 8px; + + box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; + + margin-top: 15px !important; + + margin-bottom: 15px !important; + + padding-top: 55px !important; + + display: block; + +} + +.hljs-ln-numbers { + + -webkit-touch-callout: none; + + -webkit-user-select: none; + + -khtml-user-select: none; + + -moz-user-select: none; + + -ms-user-select: none; + + user-select: none; + + text-align: center; + + vertical-align: top; + + padding-right: 12px !important; + + position: absolute; + + left: 20px; + + width: 30px; + + overflow-x: visible !important; + + white-space: nowrap; + + transition: all 0.3s ease; + +} + +.hljs-ln-numbers:before { + + content: ""; + + position: absolute; + + left: -20px; + + width: 20px; + + height: 100%; + + background: inherit; + +} + +pre.hljs-codeblock.hljs-transparent-linenumber .hljs-ln-numbers { + + background: transparent !important; + +} + +.hljs-ln-code { + + padding-left: 30px !important; + + transition: all 0.3s ease; + +} + +pre.hljs-codeblock.hljs-break-line .hljs-ln-code { + + line-break: anywhere; + + white-space: break-spaces; + +} + +pre.hljs-codeblock:not(.hljs-break-line) .hljs-ln-code { + + white-space: pre; + +} + +code[hljs-codeblock-inner]::-webkit-scrollbar-track { + + border: none; + + background: transparent !important; + +} + +code[hljs-codeblock-inner]::-webkit-scrollbar-thumb { + + background: rgba(255, 255, 255, 0.3) !important; + + box-shadow: none !important; + + border: none !important; + + border-radius: 10px; + + transition: background 0.3s ease; + +} + +code[hljs-codeblock-inner]::-webkit-scrollbar-thumb:hover { + + background: rgba(255, 255, 255, 0.5) !important; + +} + +code[hljs-codeblock-inner]::-webkit-scrollbar { + + background: transparent; + + height: 6px; + +} + +code[hljs-codeblock-inner] *::selection { + + background-color: rgba(204, 226, 255, 0.2) !important; + +} + +pre.hljs-codeblock.hljs-codeblock-fullscreen { + + position: fixed; + + left: 0; + + right: 0; + + top: 0; + + bottom: 0; + + z-index: 10000; + + margin: 0 !important; + + animation: codeblock-fullscreen 0.5s cubic-bezier(0.18, 0.89, 0.37, 1.12); + +} + +pre.hljs-codeblock.hljs-codeblock-fullscreen>code[hljs-codeblock-inner] { + + position: absolute; + + left: 0; + + right: 0; + + top: 0; + + bottom: 0; + + border-radius: 0; + + margin: 0 !important; + +} + +pre.hljs-codeblock.hljs-codeblock-fullscreen:before { + + z-index: 10001; + +} + +@keyframes codeblock-fullscreen { + + 0% { + + transform: scale(0.5); + + opacity: 1; + + } + + 100% { + + transform: none; + + opacity: 1; + + } + +} + +pre.hljs-codeblock.hljs-hide-linenumber .hljs-ln-numbers.hljs { + + width: 0px; + + opacity: 0; + +} + +pre.hljs-codeblock.hljs-hide-linenumber .hljs-ln-code { + + padding-left: 4px !important; + +} + +pre.hljs-codeblock .hljs-control { + + display: block; + + position: absolute; + + top: 16px !important; + + right: 20px !important; + + user-select: none; + + opacity: 0; + + transition: all 0.2s ease; + + white-space: nowrap; + + overflow: visible; + + background: transparent; + + padding: 0; + + margin: 0; + +} + +pre.hljs-codeblock:hover .hljs-control { + + opacity: 0.4; + +} + +pre.hljs-codeblock:hover .hljs-control:hover { + + opacity: 1; + +} + +pre.hljs-codeblock .hljs-control i.fa { + + font: normal normal normal 14px/1 FontAwesome !important; + +} + +.hljs-control .hljs-control-btn { + + display: inline-block; + + opacity: 0.8; + + transition: all 0.2s ease; + + cursor: pointer; + + margin-left: 15px; + + width: 12px; + + position: relative; + +} + +.hljs-control .hljs-control-btn:hover { + + opacity: 0.5; + +} + +.hljs-control-btn:before { + + position: absolute; + + top: 22px; + + left: -40px; + + width: 92px; + + text-align: center; + + opacity: 0; + + pointer-events: none; + + transition: all 0.2s ease; + + font-size: 12px; + + font-family: sans-serif; + +} + +.hljs-control-btn:hover:before { + + opacity: 1; + + top: 25px; + +} + +.hljs-control-toggle-linenumber:before { + + content: attr(tooltip-hide-linenumber); + +} + +pre.hljs-codeblock.hljs-hide-linenumber .hljs-control-toggle-linenumber:before { + + content: attr(tooltip-show-linenumber); + +} + +.hljs-control-toggle-break-line:before { + + content: attr(tooltip-enable-breakline); + +} + +pre.hljs-codeblock.hljs-break-line .hljs-control-toggle-break-line:before { + + content: attr(tooltip-disable-breakline); + +} + +.hljs-control-copy:before { + + content: attr(tooltip); + +} + +.hljs-control-fullscreen:before { + + content: attr(tooltip-fullscreen); + +} + +pre.hljs-codeblock.hljs-codeblock-fullscreen .hljs-control-fullscreen:before { + + content: attr(tooltip-exit-fullscreen); + +} + +pre.hljs-codeblock.hljs-codeblock-fullscreen .hljs-control-fullscreen>i:before { + + content: "\f066"; +} + +/*==========Style-Dark==========*/ + + + +html.darkmode body { + + color: #eee; + +} + +html.darkmode body:before { + + content: ""; + + position: fixed; + + left: 0; + + top: 0; + + right: 0; + + bottom: 0; + + height: 100vh; + + width: 100vw; + + background: rgba(0, 0, 0, 0.2); + + z-index: 999999999; + + pointer-events: none; + + transition: background 0.3s ease; + +} + +html.darkmode body.fancybox-active:before { + + background: rgba(0, 0, 0, 0); + +} + +html.darkmode .h1, + +html.darkmode .h2, + +html.darkmode .h3, + +html.darkmode .h4, + +html.darkmode .h5, + +html.darkmode .h6, + +html.darkmode h1, + +html.darkmode h2, + +html.darkmode h3, + +html.darkmode h4, + +html.darkmode h5, + +html.darkmode h6 { + + color: #eee; + +} + +html.darkmode a { + + color: var(--themecolor-light); + +} + +html.darkmode a:hover { + + color: var(--themecolor); + +} + + + +html.darkmode ::-webkit-scrollbar { + + background-color: rgba(255, 255, 255, 0); + +} + +html.darkmode ::-webkit-scrollbar-thumb { + + background-color: rgba(255, 255, 255, 0.25); + +} + + + +html.darkmode .leftbar-menu-item>a { + + color: #eee !important; + +} + + + +html.darkmode .site-state-item-count, + +html.darkmode .site-author-links-item>a, + +html.darkmode .site-friend-links-item>a { + + color: #eee !important; + +} + + + +html.darkmode .site-state-item-name { + + color: #aaa; + +} + + + +html.darkmode .banner { + + background-color: var(--color-darkmode-banner); + +} + +html.darkmode .leftbar-banner { + + background: var(--color-widgets); + +} + + + +html.darkmode #footer { + + background: var(--color-foreground) !important; + +} + + + +html.darkmode .close>span:not(.sr-only) { + + color: #eee; + +} + + + +html.darkmode .tag.badge { + + color: #eee; + +} + + + +html.darkmode .dropdown-item:active { + + background: var(--color-border-on-foreground-deeper); + +} + +html.darkmode .dropdown-item { + + color: #eee !important; + +} + + + +html.darkmode #leftbar_catalog .index-item, + +html.darkmode #leftbar_catalog .index-link { + + color: #eee; + +} + +html.darkmode #leftbar_catalog .index-item.current>.index-link { + + color: var(--themecolor-light); + +} + + + +html.darkmode article .post-content pre:not(.hljs-codeblock) { + + color: #eee; + +} + +html.darkmode article .post-content code:not([hljs-codeblock-inner]) { + + color: #eee; + +} + +html.darkmode .form-control { + + color: #eee; + +} + +html.darkmode input[disabled], + +html.darkmode textarea[disabled], + +html.darkmode #post_comment.logged #post_comment_name, + +html.darkmode #post_comment.logged #post_comment_email { + + opacity: 0.3; + +} + + + +html.darkmode .comment-item-text .comment-image { + + color: var(--themecolor-light) !important; + +} + +html.darkmode #blog_setting_darkmode_switch .custom-toggle-slider { + + border-color: var(--themecolor); + +} + +html.darkmode #blog_setting_darkmode_switch .custom-toggle-slider:before { + + transform: translateX(1.625rem); + + background-color: var(--themecolor); + +} + +html.darkmode .badge { + + color: #eee; + +} + +html.darkmode .page-link { + + color: #eee !important; + +} + +html.darkmode .zoomify-shadow { + + background: rgba(0, 0, 0, 0.6); + +} + +html.darkmode #share .wechat-qrcode .help { + + color: #eee; + +} + +html.darkmode .github-info-card { + + background: #24292e !important; + +} + +html.darkmode .CtxtMenu_Menu { + + filter: invert(0.8); + +} + + + +/*==========Style-Dark-For-AMOLED==========*/ + + + +html.darkmode.amoled-dark .leftbar-banner { + + background: var(--color-foreground); + +} + +html.darkmode.amoled-dark .github-info-card { + + background: #000 !important; + + border: 1px solid #222; + +} + +html.darkmode.amoled-dark #content:before, + +html.darkmode.amoled-dark #content:after { + + display: none; +} + +/* 桌面端隐藏移动端导航区域 */ +.leftbar-mobile-nav { + display: none; +} + +/* 桌面端显示原有侧边栏内容 */ +.leftbar-desktop-content { + display: block; +} + +/*==========Style-Mobile==========*/ + +@media screen and (max-width: 900px) { + + /* 移动端隐藏桌面端侧边栏内容，只显示移动端导航 */ + .leftbar-desktop-content { + display: none !important; + } + + /* 移动端侧边栏 - 优化设计 */ + .leftbar-mobile-nav { + display: flex; + flex-direction: column; + min-height: 100%; + background: var(--color-foreground); + } + + /* 顶部用户信息�?- 增强视觉效果 */ + .leftbar-mobile-profile { + background: var(--themecolor-gradient); + padding: 28px 20px 24px; + position: relative; + color: #fff; + overflow: hidden; + } + + /* 背景装饰圆形 */ + .leftbar-mobile-profile::before { + content: ""; + position: absolute; + top: -60px; + right: -60px; + width: 160px; + height: 160px; + background: rgba(255, 255, 255, 0.08); + border-radius: 50%; + pointer-events: none; + } + + .leftbar-mobile-profile::after { + content: ""; + position: absolute; + bottom: -40px; + left: -40px; + width: 120px; + height: 120px; + background: rgba(255, 255, 255, 0.05); + border-radius: 50%; + pointer-events: none; + } + + .leftbar-mobile-close { + position: absolute; + top: 16px; + right: 16px; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: rgba(255, 255, 255, 0.15); + + -webkit-backdrop-filter: blur(10px); + + backdrop-filter: blur(10px); + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); + color: #fff; + z-index: 1; + } + + .leftbar-mobile-close:active { + background: rgba(255, 255, 255, 0.25); + transform: scale(0.92); + } + + .leftbar-mobile-close i { + font-size: 15px; + } + + .leftbar-mobile-avatar { + width: 72px; + height: 72px; + border-radius: 50%; + overflow: hidden; + border: 3px solid rgba(255, 255, 255, 0.35); + margin-bottom: 14px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); + position: relative; + z-index: 1; + transition: all var(--animation-normal) var(--ease-spring); + } + + .leftbar-mobile-avatar:active { + transform: scale(0.95); + border-color: rgba(255, 255, 255, 0.6); + } + + .leftbar-mobile-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .leftbar-mobile-user-info { + margin-bottom: 18px; + position: relative; + z-index: 1; + } + + .leftbar-mobile-user-name { + font-size: 22px; + font-weight: 700; + margin-bottom: 6px; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 4px; + letter-spacing: -0.3px; + } + + .leftbar-mobile-user-desc { + font-size: 13px; + opacity: 0.9; + line-height: 1.4; + } + + .leftbar-mobile-stats { + display: flex; + gap: 0; + background: rgba(255, 255, 255, 0.12); + + -webkit-backdrop-filter: blur(10px); + + backdrop-filter: blur(10px); + border-radius: 16px; + padding: 12px 8px; + position: relative; + z-index: 1; + } + + .leftbar-mobile-stat { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } + + .leftbar-mobile-stat:not(:last-child)::after { + content: ""; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 24px; + background: rgba(255, 255, 255, 0.2); + } + + .leftbar-mobile-stat .stat-num { + font-size: 20px; + font-weight: 700; + line-height: 1.2; + } + + .leftbar-mobile-stat .stat-label { + font-size: 11px; + opacity: 0.75; + margin-top: 3px; + font-weight: 500; + } + + /* 搜索�?- 优化样式 */ + .leftbar-mobile-search { + padding: 16px 16px 8px; + background: var(--color-foreground); + } + + .leftbar-mobile-search-inner { + display: flex; + align-items: center; + background: var(--color-background); + border-radius: 14px; + padding: 12px 16px; + gap: 12px; + transition: all var(--animation-fast) var(--ease-standard); + border: 1px solid transparent; + } + + .leftbar-mobile-search-inner:focus-within { + border-color: rgba(var(--themecolor-rgbstr), 0.3); + background: var(--color-foreground); + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); + transform: scale(1.02); + } + + .leftbar-mobile-search-inner i { + color: #999; + font-size: 15px; + transition: color var(--animation-fast) var(--ease-standard); + } + + .leftbar-mobile-search-inner:focus-within i { + color: var(--themecolor); + } + + .leftbar-mobile-search-inner input { + flex: 1; + border: none; + background: transparent; + font-size: 15px; + color: var(--color-text-deeper); + outline: none; + } + + .leftbar-mobile-search-inner input::placeholder { + color: #aaa; + } + + /* 导航菜单区域 - 优化间距和样�?*/ + .leftbar-mobile-menu-section { + padding: 12px 12px 8px; + } + + .leftbar-mobile-section-title { + font-size: 11px; + font-weight: 700; + color: #999; + text-transform: uppercase; + letter-spacing: 1.2px; + padding: 8px 12px 12px; + margin-bottom: 0; + } + + .leftbar-mobile-menu { + list-style: none; + padding: 0; + margin: 0; + } + + .leftbar-mobile-menu-item { + margin-bottom: 4px; + } + + .leftbar-mobile-menu-item>a { + display: flex; + align-items: center; + padding: 14px 16px; + color: var(--color-text-deeper); + text-decoration: none; + border-radius: 14px; + transition: all var(--animation-fast) var(--ease-standard); + font-size: 15px; + font-weight: 500; + position: relative; + overflow: hidden; + } + + /* 菜单项涟漪效�?*/ + .leftbar-mobile-menu-item>a::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(var(--themecolor-rgbstr), 0.15); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: width 0.4s var(--ease-standard), height 0.4s var(--ease-standard); + pointer-events: none; + } + + .leftbar-mobile-menu-item>a:active::before { + width: 200%; + height: 200%; + } + + .leftbar-mobile-menu-item>a:active { + background: rgba(var(--themecolor-rgbstr), 0.1); + transform: scale(0.98); + } + + .leftbar-mobile-menu-item.current>a { + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + } + + .leftbar-mobile-menu-item.current>a::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 20px; + background: var(--themecolor); + border-radius: 0 4px 4px 0; + } + + .leftbar-mobile-menu-item .menu-text { + flex: 1; + } + + .leftbar-mobile-menu-item .submenu-arrow { + font-size: 12px; + color: #999; + transition: transform var(--animation-normal) var(--ease-standard); + margin-left: 8px; + } + + .leftbar-mobile-menu-item.expanded .submenu-arrow { + transform: rotate(180deg); + } + + .leftbar-mobile-submenu { + list-style: none; + padding: 0; + margin: 4px 0 4px 16px; + max-height: 0; + overflow: hidden; + transition: max-height var(--animation-normal) var(--ease-standard); + border-left: 2px solid var(--color-border-on-foreground-deeper); + padding-left: 12px; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu { + max-height: 500px; + } + + /* 子菜单项交错入场动画 */ + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item { + animation: fadeInUp 0.25s var(--ease-standard) both; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(1) { + animation-delay: 0.05s; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(2) { + animation-delay: 0.1s; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(3) { + animation-delay: 0.15s; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(4) { + animation-delay: 0.2s; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(5) { + animation-delay: 0.25s; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(6) { + animation-delay: 0.3s; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item { + margin-bottom: 2px; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item>a { + padding: 11px 14px; + font-size: 14px; + font-weight: 400; + color: #666; + border-radius: 10px; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item>a:active { + color: var(--themecolor); + background: rgba(var(--themecolor-rgbstr), 0.08); + } + + /* 底部操作�?- 优化设计 */ + .leftbar-mobile-footer { + margin-top: auto; + padding: 12px 16px 20px; + border-top: 1px solid var(--color-border-on-foreground-deeper); + background: var(--color-foreground); + } + + .leftbar-mobile-actions { + display: flex; + justify-content: center; + gap: 8px; + } + + .leftbar-mobile-action { + flex: 1; + max-width: 100px; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + padding: 14px 12px; + border: none; + background: var(--color-background); + color: #666; + font-size: 11px; + font-weight: 500; + cursor: pointer; + border-radius: 14px; + transition: all var(--animation-fast) var(--ease-standard); + position: relative; + overflow: hidden; + } + + /* 底部按钮涟漪效果 */ + .leftbar-mobile-action::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(var(--themecolor-rgbstr), 0.2); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: width 0.35s var(--ease-standard), height 0.35s var(--ease-standard); + pointer-events: none; + } + + .leftbar-mobile-action:active::before { + width: 180%; + height: 180%; + } + + .leftbar-mobile-action:active { + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + transform: scale(0.96); + } + + .leftbar-mobile-action i { + font-size: 20px; + transition: transform var(--animation-fast) var(--ease-spring); + } + + .leftbar-mobile-action:active i { + transform: scale(1.1); + } + + /* ========== 移动端折叠面板样�?- Material 3 & iOS 风格 ========== */ + .leftbar-mobile-collapse-section { + margin: 4px 12px; + background: var(--color-background); + border-radius: 14px; + overflow: hidden; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); + transition: all var(--animation-normal) var(--ease-emphasized), + box-shadow var(--animation-normal) var(--ease-standard); + } + + .leftbar-mobile-collapse-section.expanded { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + margin: 6px 12px; + } + + .leftbar-mobile-collapse-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + cursor: pointer; + user-select: none; + transition: all var(--animation-fast) var(--ease-standard); + position: relative; + overflow: hidden; + } + + /* 折叠头部涟漪效果 */ + .leftbar-mobile-collapse-header::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(var(--themecolor-rgbstr), 0.15); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: width 0.6s var(--ease-emphasized-decelerate), + height 0.6s var(--ease-emphasized-decelerate), + opacity 0.4s var(--ease-standard); + pointer-events: none; + opacity: 0; + } + + .leftbar-mobile-collapse-header:active::before { + width: 300%; + height: 300%; + opacity: 1; + } + + .leftbar-mobile-collapse-header:active { + background: rgba(var(--themecolor-rgbstr), 0.04); + } + + .collapse-header-left { + display: flex; + align-items: center; + gap: 10px; + flex: 1; + } + + .collapse-icon { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + border-radius: 8px; + font-size: 12px; + transition: all var(--animation-normal) var(--ease-spring); + } + + .leftbar-mobile-collapse-section.expanded .collapse-icon { + background: var(--themecolor); + color: #fff; + transform: scale(1.08) rotate(3deg); + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.35); + } + + .collapse-title { + font-size: 14px; + font-weight: 600; + color: var(--color-text-deeper); + transition: color var(--animation-fast) var(--ease-standard); + } + + .leftbar-mobile-collapse-section.expanded .collapse-title { + color: var(--themecolor); + } + + .collapse-badge { + background: var(--themecolor); + color: #fff; + font-size: 10px; + font-weight: 700; + padding: 2px 7px; + border-radius: 8px; + min-width: 18px; + text-align: center; + margin-left: auto; + margin-right: 10px; + transition: all var(--animation-normal) var(--ease-spring); + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); + } + + .leftbar-mobile-collapse-section.expanded .collapse-badge { + transform: scale(1.1); + box-shadow: 0 3px 10px rgba(var(--themecolor-rgbstr), 0.4); + } + + .collapse-arrow { + font-size: 11px; + color: #aaa; + transition: all var(--animation-normal) var(--ease-emphasized); + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: transparent; + } + + .leftbar-mobile-collapse-section.expanded .collapse-arrow { + transform: rotate(180deg); + color: var(--themecolor); + background: rgba(var(--themecolor-rgbstr), 0.1); + } + + .leftbar-mobile-collapse-content { + max-height: 0; + overflow: hidden; + transition: max-height var(--animation-slow) var(--ease-emphasized), + opacity var(--animation-normal) var(--ease-standard); + opacity: 0; + } + + .leftbar-mobile-collapse-section.expanded .leftbar-mobile-collapse-content { + max-height: 350px; + opacity: 1; + } + + /* 折叠内容入场动画 */ + .leftbar-mobile-collapse-section.expanded .mobile-catalog-container, + .leftbar-mobile-collapse-section.expanded .mobile-todo-container { + animation: collapseContentFadeIn 0.35s var(--ease-emphasized-decelerate) 0.1s both; + } + + @keyframes collapseContentFadeIn { + from { + opacity: 0; + transform: translateY(-8px); + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + /* ========== 移动端文章目录样�?========== */ + .mobile-catalog-container { + padding: 4px 12px 12px; + } + + #leftbar_mobile_catalog { + max-height: 250px; + overflow-y: auto; + padding-right: 4px; + } + + #leftbar_mobile_catalog::-webkit-scrollbar { + width: 2px; + } + + #leftbar_mobile_catalog::-webkit-scrollbar-track { + background: transparent; + } + + #leftbar_mobile_catalog::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.25); + border-radius: 2px; + } + + #leftbar_mobile_catalog ul { + list-style: none; + padding: 0; + margin: 0; + } + + #leftbar_mobile_catalog .index-item { + margin-bottom: 1px; + } + + #leftbar_mobile_catalog .index-link { + display: block; + padding: 8px 10px; + font-size: 13px; + color: #666; + text-decoration: none; + border-radius: 8px; + transition: all var(--animation-fast) var(--ease-standard), + transform var(--animation-fast) var(--ease-spring); + position: relative; + overflow: hidden; + } + + #leftbar_mobile_catalog .index-link::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%) scaleY(0); + width: 3px; + height: 14px; + background: var(--themecolor); + border-radius: 0 3px 3px 0; + transition: transform var(--animation-normal) var(--ease-spring); + } + + #leftbar_mobile_catalog .index-item.current>.index-link { + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + font-weight: 500; + padding-left: 14px; + } + + #leftbar_mobile_catalog .index-item.current>.index-link::before { + transform: translateY(-50%) scaleY(1); + } + + #leftbar_mobile_catalog .index-link:active { + background: rgba(var(--themecolor-rgbstr), 0.12); + transform: scale(0.97); + } + + #leftbar_mobile_catalog .index-subItem-box { + padding-left: 14px; + border-left: 2px solid var(--color-border-on-foreground-deeper); + margin-left: 10px; + margin-top: 2px; + } + + #leftbar_mobile_catalog .index-subItem-box .index-link { + font-size: 12px; + padding: 6px 8px; + } + + /* ========== 移动端TODO样式 ========== */ + .mobile-todo-container { + padding: 4px 12px 12px; + } + + .mobile-todo-add-form { + display: flex; + gap: 6px; + margin-bottom: 10px; + } + + .mobile-todo-add-form input { + flex: 1; + border: 1.5px solid var(--color-border-on-foreground-deeper); + border-radius: 10px; + padding: 8px 12px; + font-size: 13px; + background: var(--color-foreground); + color: var(--color-text-deeper); + transition: all var(--animation-fast) var(--ease-standard), + transform var(--animation-fast) var(--ease-spring); + outline: none; + } + + .mobile-todo-add-form input:focus { + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); + transform: scale(1.01); + } + + .mobile-todo-add-form input::placeholder { + color: #aaa; + font-size: 12px; + } + + .mobile-todo-add-form button { + width: 36px; + height: 36px; + border: none; + border-radius: 10px; + background: var(--themecolor); + color: #fff; + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all var(--animation-fast) var(--ease-spring); + flex-shrink: 0; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); + } + + .mobile-todo-add-form button:active { + transform: scale(0.88); + background: var(--themecolor-dark); + box-shadow: 0 1px 4px rgba(var(--themecolor-rgbstr), 0.2); + } + + .mobile-todo-list { + list-style: none; + padding: 0; + margin: 0; + max-height: 200px; + overflow-y: auto; + } + + .mobile-todo-list::-webkit-scrollbar { + width: 2px; + } + + .mobile-todo-list::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.25); + border-radius: 2px; + } + + .mobile-todo-item { + display: flex; + align-items: center; + padding: 10px 12px; + background: var(--color-foreground); + border-radius: 10px; + margin-bottom: 6px; + transition: all var(--animation-fast) var(--ease-standard), + transform var(--animation-fast) var(--ease-spring), + box-shadow var(--animation-fast) var(--ease-standard); + animation: mobileTodoSlideIn 0.35s var(--ease-emphasized-decelerate) both; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); + } + + @keyframes mobileTodoSlideIn { + from { + opacity: 0; + transform: translateY(-10px) scale(0.94); + } + + to { + opacity: 1; + transform: translateY(0) scale(1); + } + } + + .mobile-todo-item:last-child { + margin-bottom: 0; + } + + .mobile-todo-item:active { + transform: scale(0.97); + background: var(--color-border-on-foreground); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + + .mobile-todo-content { + flex: 1; + font-size: 13px; + color: var(--color-text-deeper); + line-height: 1.4; + word-break: break-word; + } + + .mobile-todo-complete-btn, + .mobile-todo-urge-btn, + .mobile-todo-delete-btn { + width: 28px; + height: 28px; + border: none; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-spring); + flex-shrink: 0; + margin-left: 8px; + font-size: 11px; + } + + .mobile-todo-complete-btn { + background: rgba(40, 167, 69, 0.12); + color: #28a745; + } + + .mobile-todo-complete-btn:active { + background: #28a745; + color: #fff; + transform: scale(0.85); + box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4); + } + + .mobile-todo-urge-btn { + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + } + + .mobile-todo-urge-btn:active { + background: var(--themecolor); + color: #fff; + transform: scale(0.85); + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.4); + } + + .mobile-todo-urge-btn.urged { + background: #28a745; + color: #fff; + animation: urgeSuccessMobile 0.5s var(--ease-spring); + } + + @keyframes urgeSuccessMobile { + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.15); + } + } + + .mobile-todo-delete-btn { + background: rgba(220, 53, 69, 0.1); + color: #dc3545; + } + + .mobile-todo-delete-btn:active { + background: #dc3545; + color: #fff; + transform: scale(0.85); + box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4); + } + + .mobile-todo-done-mark { + width: 28px; + height: 28px; + border-radius: 8px; + background: rgba(40, 167, 69, 0.1); + color: #28a745; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + margin-left: 8px; + flex-shrink: 0; + } + + .mobile-todo-item.todo-completed .mobile-todo-content { + text-decoration: line-through; + color: #adb5bd; + } + + .mobile-todo-item.todo-completed { + opacity: 0.6; + order: 1; + transform: scale(0.98); + max-height: 500px; + overflow: hidden; + transition: all var(--animation-normal) var(--ease-emphasized), + max-height var(--animation-normal) var(--ease-emphasized), + margin var(--animation-normal) var(--ease-emphasized), + padding var(--animation-normal) var(--ease-emphasized), + opacity var(--animation-normal) var(--ease-emphasized); + } + + .mobile-todo-item.todo-completed.collapsed { + max-height: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + opacity: 0; + transform: translateY(-10px) scale(0.9); + } + + .mobile-todo-item.todo-completing { + opacity: 0; + transform: translateX(40px) scale(0.85); + max-height: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + transition: all 0.4s var(--ease-emphasized-accelerate); + } + + .mobile-todo-empty { + text-align: center; + color: #bbb; + font-size: 12px; + padding: 20px 0; + } + + .mobile-todo-empty::before { + content: "\f0ae"; + font-family: FontAwesome; + display: block; + font-size: 24px; + margin-bottom: 8px; + opacity: 0.35; + } + + /* 移动端折叠已完成按钮 */ + .mobile-todo-collapse-btn { + display: flex; + align-items: center; + gap: 3px; + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + border: none; + border-radius: 8px; + padding: 2px 6px; + font-size: 10px; + font-weight: 600; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); + margin-left: 6px; + flex-shrink: 0; + } + + .mobile-todo-collapse-btn:active { + background: rgba(var(--themecolor-rgbstr), 0.25); + transform: scale(0.92); + } + + .mobile-todo-collapse-btn i { + font-size: 8px; + transition: transform var(--animation-fast) var(--ease-standard); + } + + .mobile-todo-collapse-btn.collapsed i { + transform: rotate(-90deg); + } + + .mobile-todo-completed-count { + min-width: 10px; + text-align: center; + } + + /* 移动端已完成任务分隔�?*/ + .mobile-todo-completed-divider { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 12px; + margin: 8px 0 6px; + background: var(--color-foreground); + border-radius: 10px; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); + user-select: none; + border-top: 1px dashed rgba(var(--themecolor-rgbstr), 0.2); + border-bottom: 1px dashed rgba(var(--themecolor-rgbstr), 0.2); + list-style: none; + } + + .mobile-todo-completed-divider:active { + background: rgba(var(--themecolor-rgbstr), 0.08); + transform: scale(0.98); + } + + .mobile-todo-completed-divider .divider-text { + display: flex; + align-items: center; + gap: 5px; + font-size: 11px; + font-weight: 600; + color: #6c757d; + } + + .mobile-todo-completed-divider .divider-text i { + color: #28a745; + font-size: 10px; + } + + .mobile-todo-completed-divider .mobile-todo-completed-count { + background: rgba(40, 167, 69, 0.15); + color: #28a745; + font-size: 9px; + font-weight: 600; + padding: 2px 5px; + border-radius: 6px; + min-width: 16px; + text-align: center; + } + + .mobile-todo-completed-divider .divider-arrow { + font-size: 9px; + color: #6c757d; + transition: transform var(--animation-fast) var(--ease-standard); + } + + .mobile-todo-completed-divider.collapsed .divider-arrow { + transform: rotate(-90deg); + } + + #navbar_global { + background: var(--color-foreground); + } + + #float_action_buttons #fabtn_open_sidebar { + display: block; + } + + /* 移动端隐藏浮动按钮提示文�?*/ + #float_action_buttons .fabtn:before { + display: none !important; + } + + /* 移动端侧边栏容器 - 优化动画 */ + #leftbar { + position: fixed; + background: var(--color-foreground); + top: 0; + left: 0; + height: 100%; + width: 300px; + padding: 0; + margin-bottom: 0; + overflow: auto; + overflow-x: hidden; + z-index: 1002; + box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); + transform: translateX(-100%); + transition: transform var(--animation-normal) var(--ease-emphasized); + will-change: transform; + } + + html.leftbar-opened #leftbar { + transform: translateX(0); + } + + /* 移动端侧边栏入场动画关键�?*/ + @keyframes slideInFromLeft { + from { + opacity: 0; + transform: translateX(-20px); + } + + to { + opacity: 1; + transform: translateX(0); + } + } + + @keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(16px); + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + @keyframes scaleIn { + from { + opacity: 0; + transform: scale(0.8); + } + + to { + opacity: 1; + transform: scale(1); + } + } + + @keyframes circleExpand { + from { + transform: scale(0.6); + opacity: 0; + } + + to { + transform: scale(1); + opacity: 1; + } + } + + /* 侧边栏内容交错入场动�?*/ + html.leftbar-opened .leftbar-mobile-profile { + animation: slideInFromLeft 0.4s var(--ease-emphasized) 0.05s both; + } + + html.leftbar-opened .leftbar-mobile-avatar { + animation: scaleIn 0.35s var(--ease-spring) 0.15s both; + } + + html.leftbar-opened .leftbar-mobile-user-info { + animation: fadeInUp 0.35s var(--ease-emphasized) 0.2s both; + } + + /* 多邻国连胜徽章入场动�?*/ + html.leftbar-opened .leftbar-mobile-user-name .duolingo-streak { + animation: duolingoBadgeIn 0.4s var(--ease-spring) 0.35s both; + } + + @keyframes duolingoBadgeIn { + from { + opacity: 0; + transform: scale(0.5) translateX(-10px); + } + + to { + opacity: 1; + transform: scale(1) translateX(0); + } + } + + html.leftbar-opened .leftbar-mobile-stats { + animation: fadeInUp 0.35s var(--ease-emphasized) 0.25s both; + } + + html.leftbar-opened .leftbar-mobile-profile::before { + animation: circleExpand 0.5s var(--ease-spring) 0.2s both; + } + + html.leftbar-opened .leftbar-mobile-profile::after { + animation: circleExpand 0.5s var(--ease-spring) 0.3s both; + } + + html.leftbar-opened .leftbar-mobile-search { + animation: slideInFromLeft 0.4s var(--ease-emphasized) 0.12s both; + } + + html.leftbar-opened .leftbar-mobile-menu-section:nth-child(3) { + animation: slideInFromLeft 0.4s var(--ease-emphasized) 0.18s both; + } + + html.leftbar-opened .leftbar-mobile-menu-section:nth-child(4) { + animation: slideInFromLeft 0.4s var(--ease-emphasized) 0.24s both; + } + + html.leftbar-opened .leftbar-mobile-footer { + animation: fadeInUp 0.4s var(--ease-emphasized) 0.3s both; + } + + /* 菜单项交错入�?*/ + html.leftbar-opened .leftbar-mobile-menu-item { + animation: fadeInUp 0.3s var(--ease-standard) both; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(1) { + animation-delay: 0.22s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(2) { + animation-delay: 0.26s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(3) { + animation-delay: 0.30s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(4) { + animation-delay: 0.34s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(5) { + animation-delay: 0.38s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(6) { + animation-delay: 0.42s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(7) { + animation-delay: 0.46s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(8) { + animation-delay: 0.50s; + } + + #leftbar_part1, + #leftbar_part2 { + box-shadow: none !important; + } + + #leftbar_part2 { + position: relative !important; + width: 100% !important; + top: unset !important; + } + + #leftbar_part2_inner { + max-height: unset; + height: max-content; + height: -moz-max-content; + } + + #leftbar_part2_inner:before { + content: ""; + display: block; + margin: auto; + margin-bottom: 15px; + transform: translateY(-10px); + width: 80%; + height: 1px; + background: var(--color-border-on-foreground-deeper); + } + + #leftbar::-webkit-scrollbar { + display: none; + } + + html.leftbar-opened { + overflow: hidden; + } + + /* 遮罩�?- 优化动画 */ + #sidebar_mask { + position: fixed; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100vw; + height: 100vh; + z-index: 1001; + background: rgba(0, 0, 0, 0.5); + + -webkit-backdrop-filter: blur(2px); + + backdrop-filter: blur(2px); + opacity: 0; + visibility: hidden; + transition: opacity var(--animation-normal) var(--ease-standard), + visibility var(--animation-normal) var(--ease-standard); + } + + html.leftbar-opened #sidebar_mask { + opacity: 1; + visibility: visible; + } + + .leftbar-menu-item { + overflow: hidden; + } + + .leftbar-menu-item:hover { + height: max-content; + } + + .leftbar-menu-item:hover:after { + transform: rotateZ(90deg) translateY(1px); + } + + .leftbar-menu-subitem { + position: static; + width: calc(100% - 10px) !important; + margin-left: 10px; + box-shadow: none !important; + } + + .leftbar-menu-item:hover .leftbar-menu-subitem { + + position: static; + + width: 100%; + + box-shadow: none; + + } + + .leftbar-banner { + + padding-top: 40px; + + padding-bottom: 40px; + + padding-left: 20px; + + text-align: left; + + border-radius: 0; + + } + + .leftbar-banner-subtitle { + + margin-top: 10px; + + } + + #leftbar_announcement { + + border-radius: 0; + + margin-bottom: 0; + + background: linear-gradient(180deg, var(--themecolor-dark), var(--themecolor) 90%); + + } + + html.darkmode #leftbar_announcement { + + background: var(--color-border-on-foreground) !important; + + } + + #leftbar_announcement:after { + + content: ""; + + height: 1px; + + background: #fff; + + opacity: 0.15; + + margin-left: 15px; + + margin-right: 15px; + + } + + .leftbar-announcement-body { + + opacity: 0.8; + + padding-top: 20px; + + } + + #leftbar_announcement~#leftbar_part1 .leftbar-banner { + + background: var(--themecolor) !important; + + padding-top: 25px; + + padding-bottom: 25px; + + } + + html.darkmode #leftbar_announcement~#leftbar_part1 .leftbar-banner { + + background: var(--color-border-on-foreground) !important; + + } + + #primary { + + width: 100%; + + } + + #main { + + padding: 5px; + + } + + + + .post-header.post-header-with-thumbnail .post-header-text-container { + + padding-bottom: 20px; + + } + + .post-thumbnail { + + max-height: 30vh; + + } + + .post-header.post-header-with-thumbnail .post-header-text-container { + + padding-bottom: 20px; + + } + + + + .post-donate img { + + max-width: 70vw; + + } + + + + #comments .children { + padding-inline-start: 15px; + } + + /* 夜间模式适配 - 移动端侧边栏 */ + html.darkmode .leftbar-mobile-profile { + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.8) 0%, + rgba(var(--themecolor-rgbstr), 0.6) 100%); + } + + html.darkmode .leftbar-mobile-profile::before, + html.darkmode .leftbar-mobile-profile::after { + background: rgba(255, 255, 255, 0.05); + } + + html.darkmode .leftbar-mobile-stats { + background: rgba(0, 0, 0, 0.2); + } + + html.darkmode .leftbar-mobile-search-inner { + background: var(--color-background); + } + + html.darkmode .leftbar-mobile-search-inner:focus-within { + background: var(--color-widgets); + } + + html.darkmode .leftbar-mobile-action { + background: var(--color-widgets); + color: #aaa; + } + + html.darkmode .leftbar-mobile-action:active { + color: var(--themecolor-light); + } + + html.darkmode .leftbar-mobile-section-title { + color: #777; + } + + html.darkmode .leftbar-mobile-submenu .leftbar-mobile-menu-item>a { + color: #999; + } + + /* ========== 移动端文章卡片独立样�?========== */ + /* 移动端布局 1: 大图模式 (默认) */ + html.mobile-layout-1 article.post-preview-layout-2, + article.post-preview-layout-2 { + flex-direction: column; + max-height: none; + } + + html.mobile-layout-1 article.post-preview-layout-2 .post-header.post-header-with-thumbnail, + article.post-preview-layout-2 .post-header.post-header-with-thumbnail { + width: 100%; + height: 200px; + border-radius: var(--card-radius) var(--card-radius) 0 0; + } + + html.mobile-layout-1 article.post-preview-layout-2 .post-thumbnail, + article.post-preview-layout-2 .post-thumbnail { + height: 200px !important; + max-height: 200px !important; + } + + html.mobile-layout-1 article.post-preview-layout-2 .post-content-container, + article.post-preview-layout-2 .post-content-container { + padding: 18px 20px 20px; + } + + html.mobile-layout-1 article.post-preview-layout-2 .post-content, + article.post-preview-layout-2 .post-content { + -webkit-line-clamp: 3; + margin-top: 12px; + line-height: 1.7; + } + + /* 移动端布局 2: 紧凑模式 */ + html.mobile-layout-2 article.post-preview-layout-2 { + flex-direction: column; + max-height: none; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-header.post-header-with-thumbnail { + width: 100%; + height: 140px; + border-radius: var(--card-radius) var(--card-radius) 0 0; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-thumbnail { + height: 140px !important; + max-height: 140px !important; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-content-container { + padding: 14px 16px 16px; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-content { + -webkit-line-clamp: 2; + margin-top: 8px; + line-height: 1.6; + font-size: 14px; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-title { + font-size: 16px; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-meta-detail { + font-size: 12px; + } + + /* 移动端布局 3: 横向模式 */ + html.mobile-layout-3 article.post-preview-layout-2 { + flex-direction: row; + max-height: 120px; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-header.post-header-with-thumbnail { + width: 120px; + height: 120px; + border-radius: var(--card-radius) 0 0 var(--card-radius); + flex-shrink: 0; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-thumbnail { + height: 120px !important; + max-height: 120px !important; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-content-container { + padding: 12px 14px; + justify-content: center; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-content { + -webkit-line-clamp: 2; + margin-top: 6px; + line-height: 1.5; + font-size: 13px; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-title { + font-size: 15px; + line-height: 1.3; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-meta-detail { + font-size: 11px; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-tags { + display: none; + } + + /* 通用移动端文章卡片样�?*/ + article.post-preview-layout-2 .post-title { + font-size: 18px; + line-height: 1.4; + } + + article.post-preview-layout-2 .post-meta-detail { + font-size: 13px; + } + + /* ========== 移动端搜索框动画 (照搬桌面�? ========== */ + .leftbar-mobile-search-inner { + position: relative; + transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); + } + + .leftbar-mobile-search-inner:focus-within { + transform: scale(1.02); + box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.15); + } + + .leftbar-mobile-search-inner input { + transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); + } + + /* 搜索框聚焦时的光标动�?*/ + @keyframes searchPulse { + + 0%, + 100% { + box-shadow: 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.2); + } + + 50% { + box-shadow: 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.1); + } + } + + .leftbar-mobile-search-inner:focus-within { + animation: searchPulse 2s ease-in-out infinite; + } + + /* ========== 更多流畅侧边栏动�?========== */ + /* 关闭按钮旋转入场 */ + @keyframes rotateIn { + from { + opacity: 0; + transform: rotate(-90deg) scale(0.5); + } + + to { + opacity: 1; + transform: rotate(0) scale(1); + } + } + + html.leftbar-opened .leftbar-mobile-close { + animation: rotateIn 0.4s var(--ease-spring) 0.1s both; + } + + /* 统计数字弹跳动画 */ + @keyframes bounceIn { + 0% { + opacity: 0; + transform: scale(0.3); + } + + 50% { + transform: scale(1.1); + } + + 70% { + transform: scale(0.9); + } + + 100% { + opacity: 1; + transform: scale(1); + } + } + + html.leftbar-opened .leftbar-mobile-stat:nth-child(1) .stat-num { + animation: bounceIn 0.5s var(--ease-spring) 0.3s both; + } + + html.leftbar-opened .leftbar-mobile-stat:nth-child(2) .stat-num { + animation: bounceIn 0.5s var(--ease-spring) 0.4s both; + } + + html.leftbar-opened .leftbar-mobile-stat:nth-child(3) .stat-num { + animation: bounceIn 0.5s var(--ease-spring) 0.5s both; + } + + /* 搜索图标脉冲动画 */ + @keyframes iconPulse { + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } + } + + html.leftbar-opened .leftbar-mobile-search-inner i { + animation: iconPulse 0.6s var(--ease-spring) 0.35s both; + } + + /* 底部按钮交错入场 */ + html.leftbar-opened .leftbar-mobile-action:nth-child(1) { + animation: fadeInUp 0.35s var(--ease-emphasized) 0.35s both; + } + + html.leftbar-opened .leftbar-mobile-action:nth-child(2) { + animation: fadeInUp 0.35s var(--ease-emphasized) 0.42s both; + } + + html.leftbar-opened .leftbar-mobile-action:nth-child(3) { + animation: fadeInUp 0.35s var(--ease-emphasized) 0.49s both; + } + + /* 底部按钮图标悬浮效果 */ + .leftbar-mobile-action i { + transition: transform 0.3s var(--ease-spring); + } + + .leftbar-mobile-action:active i { + transform: scale(1.15) rotate(-5deg); + } + + /* 菜单项悬浮指示器 */ + .leftbar-mobile-menu-item.current>a { + position: relative; + } + + .leftbar-mobile-menu-item.current>a::after { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 20px; + background: var(--themecolor); + border-radius: 0 4px 4px 0; + animation: slideInFromLeft 0.3s var(--ease-spring) both; + } + + /* 子菜单展开箭头旋转 */ + .leftbar-mobile-menu-item .submenu-arrow { + transition: transform 0.3s var(--ease-spring); + } + + .leftbar-mobile-menu-item.expanded .submenu-arrow { + transform: rotate(180deg); + } + + /* 遮罩层淡入增�?*/ + #sidebar_mask { + transition: opacity 0.35s var(--ease-emphasized), + visibility 0.35s var(--ease-emphasized), + backdrop-filter 0.35s var(--ease-emphasized); + } + + html.leftbar-opened #sidebar_mask { + + -webkit-backdrop-filter: blur(4px); + + backdrop-filter: blur(4px); + } +} + +@media screen and (max-width: 1000px) { + + .navbar-main { + + padding-left: 10px; + + padding-right: 10px; + + } + + .navbar-main .container { + + margin: 0; + + max-width: 100vw; + + } + + .navbar-toggler-icon { + + width: 20px; + + height: 20px; + + } + +} + +@media screen and (max-width: 900px) { + + .navbar-toggler { + + outline: none !important; + + } + + .navbar-collapse-header { + + border: none !important; + + } + + .navbar-collapse .navbar-collapse-header { + + margin-bottom: 0 !important; + + } + + html.darkmode #navbar_global * { + + color: #eee; + + } + + html.darkmode #navbar_global .navbar-toggler * { + background: #eee; + } + + /*.navbar-brand.navbar-icon { + + display: none; + + } + + .navbar-brand.navbar-icon-mobile { + + display: block; + + margin-right: 5px; + + }*/ + + .navbar-title { + + margin-right: 0; + + } + + #navbar_search_btn_mobile { + + display: list-item; + + } + + #navbar_search_container { + + display: none; + + } + + #navbar_global.show+#navbar_menu_mask { + + display: block; + + position: fixed; + + left: 0; + + top: 0; + + height: 100vh; + + width: 100vw; + + z-index: 1049; + + background: transparent; + + } + + .navbar-nav:not(#navbar_search_btn_mobile)>.nav-item i:not(.d-lg-none) { + + margin-right: 8px; + + text-align: center; + + width: 14px; + + } + + + + .navbar-nav:not(#navbar_search_btn_mobile)>.nav-item i:not(.d-lg-none) { + + margin-right: 8px; + + text-align: center; + + width: 14px; + + } + + + + .navbar-transparent .navbar-toggler-icon { + + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzAgMzAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMwIDMwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNi4zIiB5MT0iNCIgeDI9IjI3LjEiIHkyPSI0Ii8+DQo8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjYuMyIgeTE9IjEyLjUiIHgyPSIyNy4xIiB5Mj0iMTIuNSIvPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI2LjMiIHkxPSIyMSIgeDI9IjI3LjEiIHkyPSIyMSIvPg0KPC9zdmc+DQo=); + + } + + .navbar-toggler-searcg-icon { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMwIDMwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48Y2lyY2xlIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjE0IiBjeT0iMTEuNiIgcj0iOC44Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIyMC43IiB5MT0iMTcuNCIgeDI9IjI3LjMiIHkyPSIyNCIvPjwvZz48L3N2Zz4=) !important; + + } + +} + +@media screen and (min-width: 900px) and (max-width: 1000px) { + + #leftbar_part2.sticky { + + transform: translateY(-25px); + + } + + body.leftbar-can-headroom.headroom---unpinned #leftbar_part2.sticky { + + transform: translateY(-5px); + + } + +} + +@media screen and (max-width: 900px) { + + /*TimeLine*/ + + .argon-timeline { + + margin-left: 75px; + + } + +} + +@media screen and (max-width: 450px) { + + /*Fab 设置菜单*/ + + #fabtn_blog_settings_popup { + + position: fixed; + + left: 0 !important; + + right: 0 !important; + + bottom: 0 !important; + + z-index: 1005; + + width: 100vw; + + padding: 10px 25px; + + opacity: 0; + + max-width: unset; + + pointer-events: none; + + transform: translateY(15px); + + transition: all 0.3s ease; + + animation: none !important; + + border-radius: var(--card-radius) var(--card-radius) 0 0; + + } + + #close_blog_settings { + + margin-right: -10px; + + } + +} + +@media screen and (max-width: 600px) { + + /*浮动操作按钮透明*/ + + #float_action_buttons { + + opacity: 0.5; + + } + + #float_action_buttons:hover, + + #float_action_buttons.blog_settings_opened { + + opacity: 1; + + } + + /*文章边界缩小*/ + + .post-full { + + margin-left: -10px; + + margin-right: -10px; + + } + + /*显示更少的页�?/ + + .pagination:not(.pagination-mobile) { + + display: none; + + } + + .pagination.pagination-mobile { + + display: flex; + + } + +} + +@media screen and (max-width: 690px) { + + /*文章分享的浮动二维码*/ + + #share .icon-wechat .wechat-qrcode { + + position: fixed; + + z-index: 2000; + + left: 50%; + + top: 50%; + + bottom: unset; + + right: unset; + + width: max-content; + + width: -moz-max-content; + + background: var(--color-foreground); + + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + + text-align: center; + + padding: 15px 30px; + + transition: visibility 0.25s, opacity 0.25s, transform 0.25s; + + transform: translate(-50%, calc(-50% + 10px)); + + opacity: 0; + + pointer-events: none; + + } + + #share .icon-wechat:hover .wechat-qrcode { + + transform: translate(-50%, -50%); + + opacity: 1; + + } + + #share .wechat-qrcode:before { + + display: none; + + } + + #share .icon-wechat:before { + + content: ""; + + display: block; + + position: fixed; + + left: 0; + + top: 0; + + right: 0; + + bottom: 0; + + height: 100%; + + width: 100%; + + z-index: 1999; + + pointer-events: none; + + transform: none; + + background: rgba(0, 0, 0, 0.6); + + opacity: 0; + + } + + #share .icon-wechat:hover:before { + + opacity: 1; + + } + +} + + + +/*打印样式优化*/ + +@media print { + + #leftbar, + + #post_comment, + + #float_action_buttons, + + #toolbar, + + #share_container { + + display: none !important; + + } + + #primary { + + width: 100% !important; + + } + + #content { + + max-width: unset !important; + + } + + article { + + width: 100% !important; + + } + + article .post-content a { + + text-decoration: underline !important; + + } + + article a::after { + + content: " (" attr(href) ")"; + + } + + html>body { + + background-color: white !important; + + } + + article p { + + color: rgba(0, 0, 0, 0.8) !important; + + } + + article { + + font: 13pt Georgia, "Nimbus Roman No9 L", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", + + "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", + + "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", + + PMingLiU, MingLiU, serif !important; + + } + +} + +/*Noscript*/ + +html.no-js article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"] { + + display: none; + +} + +html.no-js .comment-item-text .comment-sticker.lazyload { + + display: none; + +} + + + +/*Safari 兼容*/ + +html.using-safari #float_action_buttons .fabtn:before, + +html.using-safari #share>a:before, + +html.using-safari #share_show:before, + +html.using-safari .post-comment-link-container:before, + +html.using-safari .post-comment-captcha-container:before, + +html.using-safari #post_comment_toggle_extra_input:before, + +html.using-safari .comment-post-checkbox:before, + +html.using-safari .comment-time-details, + +html.using-safari #share .icon-wechat .wechat-qrcode { + + -webkit-transform: translate3d(0, 0, 0) !important; + transform: translate3d(0, 0, 0) !important; + + width: unset !important; + + white-space: nowrap; + +} + +@media screen and (max-width: 690px) { + + html.using-safari #share .icon-wechat .wechat-qrcode { + + transform: translate3d(-50%, -50%, 0) !important; + + } + +} + +html.using-safari .post-donate .donate-btn:hover~.donate-qrcode { + + transform: translateX(-50%); + + opacity: 1; + +} + +html.using-safari #fabtn_blog_settings_popup { + + -webkit-transform: translate3d(0, 0, 0) !important; + transform: translate3d(0, 0, 0) !important; + +} + +html.using-safari #blog_setting_toggle_darkmode_and_amoledarkmode:before, + +html.using-safari #blog_setting_card_radius_to_default:before { + + transform: translate3d(-50%, 0, 0) !important; + + white-space: nowrap; + +} + +html.using-safari .friend-link-description:after { + + display: none; + +} + + +/* 下面是抄袭萌娘百科的css */ +.huhua { + color: #9ea3a9 !important; + text-decoration: line-through !important; + text-shadow: none !important; + transition: color .2s ease; +} + +.huhua a { + color: inherit !important; + text-decoration: inherit !important; +} + +.huhua:hover, +.huhua:active { + color: #7f858b !important; +} + +.text-blur, +.text-blur a, +a .text-blur, +.text-blur a.new { + filter: blur(2px) !important; + transition: filter var(--text-blur-transition-time, .2s) ease, color var(--text-blur-transition-time, .2s) ease; + display: inline-block; +} + +.text-blur a { + color: inherit !important; +} + +.text-blur:hover, +.text-blur:active, +.text-blur:hover .text-blur, +.text-blur:active .text-blur { + filter: none !important; + color: var(--text-blur-color, inherit) !important; +} + +.text-blur:hover a, +a:hover .text-blur, +.text-blur:active a, +a:active .text-blur { + filter: none !important; + color: inherit !important; +} + +.color-curtain, +.color-curtain a, +a .color-curtain, +.color-curtain a.new { + background-color: var(--curtain-bg, #252525) !important; + color: var(--curtain-bg, #252525) !important; + text-shadow: none !important; + text-decoration: none !important; + transition: color .2s ease, background-color .2s ease; +} + +.color-curtain a { + color: inherit !important; + transition: inherit !important; +} + +.color-curtain:hover, +.color-curtain:active, +.color-curtain:hover .color-curtain, +.color-curtain:active .color-curtain { + color: var(--curtain-fg, #fff) !important; +} + +.color-curtain:hover a, +a:hover .color-curtain, +.color-curtain:active a, +a:active .color-curtain { + color: inherit !important; +} + +.color-curtain:hover .new, +.color-curtain .new:hover, +.new:hover .color-curtain, +.color-curtain:active .new, +.color-curtain .new:active, +.new:active .color-curtain { + color: #BA0000 !important; +} + +/* + * 放置于这里的CSS将应用于所有皮�? + * 萌娘百科仅开放Vector皮肤 + * 请尊重萌娘百科版权，以下代码除非注明均是管理员手敲出来的！！！复制需要注明源自萌娘百科，并且附上URL地址 `http://zh.moegirl.org/MediaWiki:Common.css` + * 版权协定：知识共�?署名-非商业性使�?相同方式共享 3.0 + * 复制之后请把图片换成自己网站上URL地址�? + */ + +.heimu, +.heimu a, +a .heimu, +.heimu a.new { + background-color: #252525 !important; + color: #252525 !important; + text-shadow: none !important; + transition: color var(--heimu-transition-time, .2s) ease, background-color var(--heimu-transition-time, .2s) ease; +} + +.heimu a { + color: inherit !important; + transition: inherit; +} + +.heimu:hover, +.heimu:active, +.heimu:hover .heimu, +.heimu:active .heimu { + color: white !important; +} + +.heimu:hover a, +a:hover .heimu, +.heimu:active a, +a:active .heimu { + color: inherit !important; +} + +.heimu:hover .new, +.heimu .new:hover, +.new:hover .heimu, +.heimu:active .new, +.heimu .new:active, +.new:active .heimu { + color: #BA0000 !important; +} + +/* Fix macro styles in dark mode */ +html.darkmode .heimu a, +html.darkmode .color-curtain a { + color: inherit !important; +} + +html.darkmode .heimu:hover a, +html.darkmode .color-curtain:hover a { + color: inherit !important; +} + +/* Ensure heimu/color-curtain visibility in dark mode comment sections */ +html.darkmode .comment-content .heimu, +html.darkmode .comment-content .color-curtain { + background-color: #252525 !important; + color: #252525 !important; +} + +html.darkmode .comment-content .heimu:hover, +html.darkmode .comment-content .heimu:active, +html.darkmode .comment-content .color-curtain:hover, +html.darkmode .comment-content .color-curtain:active { + color: #fff !important; +} + +/* Disable global underline effect for links in macros to prevent animation conflicts */ +article .post-content .heimu a:before, +article .post-content .color-curtain a:before, +article .post-content .text-blur a:before, +article .post-content .huhua a:before { + display: none !important; + content: none !important; +} + +/* Ensure links in macros inherit transition properties */ +.heimu a, +.color-curtain a, +.text-blur a, +.huhua a { + transition: inherit !important; +} + + +/* ===== Git 版本徽章 ===== */ +.git-version-badge { + display: inline-flex; + align-items: center; + gap: 4px; + margin-left: 8px; + padding: 2px 8px; + background: rgba(0, 0, 0, 0.15); + border-radius: 10px; + font-size: 11px; + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + color: inherit; + opacity: 0.7; + transition: opacity 0.2s ease; + vertical-align: middle; + cursor: pointer; + user-select: none; +} + +.git-version-badge:hover { + opacity: 1; +} + +.git-version-badge .git-icon { + width: 11px; + height: 11px; + color: #f05033; + flex-shrink: 0; +} + +/* Git 彩蛋弹窗 */ +.git-easter-egg-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); + + -webkit-backdrop-filter: blur(8px); + + backdrop-filter: blur(8px); + display: flex; + align-items: center; + justify-content: center; + z-index: 10000; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; +} + +.git-easter-egg-overlay.show { + opacity: 1; + visibility: visible; +} + +.git-easter-egg-modal { + background: var(--color-background, #fff); + border-radius: 20px; + box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3); + padding: 40px 50px; + text-align: center; + transform: scale(0.7) translateY(30px); + opacity: 0; + transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; + max-width: 90%; + min-width: 300px; + position: relative; + z-index: 2; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.git-easter-egg-overlay.show .git-easter-egg-modal { + transform: scale(1) translateY(0); + opacity: 1; +} + +.git-easter-egg-emoji { + font-size: 56px; + margin-bottom: 15px; + animation: eggBounce 0.8s ease infinite; + display: inline-block; +} + +@keyframes eggBounce { + + 0%, + 100% { + transform: translateY(0) rotate(-5deg); + } + + 50% { + transform: translateY(-12px) rotate(5deg); + } +} + +.git-easter-egg-content { + font-size: 18px; + color: var(--color-text, #525f7f); + margin-bottom: 30px; + line-height: 1.7; + font-weight: 500; +} + +.git-easter-egg-buttons { + display: flex; + gap: 15px; + justify-content: center; +} + +.git-easter-egg-btn { + padding: 12px 32px; + border: none; + border-radius: 10px; + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); +} + +.git-easter-egg-btn.btn-good { + background: var(--themecolor, #5e72e4); + color: #fff; +} + +.git-easter-egg-btn.btn-good:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(94, 114, 228, 0.4); +} + +.git-easter-egg-btn.btn-good:active { + transform: translateY(-1px); +} + +.git-easter-egg-btn.btn-bad { + position: fixed; + z-index: 10001; + background: linear-gradient(135deg, #ff6b6b, #ee5a5a); + color: #fff; + transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), + top 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), + transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), + box-shadow 0.2s ease, + background 0.3s ease; + opacity: 0; + visibility: hidden; +} + +.git-easter-egg-overlay.show .git-easter-egg-btn.btn-bad { + opacity: 1; + visibility: visible; +} + +.git-easter-egg-btn.btn-bad:hover { + box-shadow: 0 8px 25px rgba(238, 90, 90, 0.5); +} + +/* 假装乖巧时的样式 */ +.git-easter-egg-btn.btn-bad.pretend-nice { + background: linear-gradient(135deg, #a8e6cf, #88d8b0); + box-shadow: 0 4px 15px rgba(136, 216, 176, 0.4); +} + +/* 移动�?*/ +@media screen and (max-width: 576px) { + .git-version-badge { + display: none; + } +} + + +/* ===== TODO 列表 ===== */ +#leftbar_part3 { + margin-top: 10px; + transition: top 0.3s ease, transform 0.3s ease; +} + +#leftbar_part3.sticky { + position: fixed; + top: calc(80px + var(--leftbar-part2-height, 300px)); + width: 240px; +} + +#leftbar_part3 .card-body { + padding: 12px 16px; + max-height: 50vh; + overflow-y: auto; +} + +#leftbar_part3 .card-body::-webkit-scrollbar { + width: 6px; +} + +#leftbar_part3 .card-body::-webkit-scrollbar-track { + background: transparent; +} + +#leftbar_part3 .card-body::-webkit-scrollbar-thumb { + border-width: 1px; + background-color: rgba(0, 0, 0, 0.2); +} + +html.darkmode #leftbar_part3 .card-body::-webkit-scrollbar-thumb { + border-width: 1px; + background-color: rgba(255, 255, 255, 0.2); +} + +#leftbar_part3 .card-body::-webkit-scrollbar-button { + height: 5px; + pointer-events: none; +} + +body.leftbar-can-headroom.headroom---unpinned #leftbar_part3.sticky { + top: calc(10px + var(--leftbar-part2-height, 300px)); +} + +html.navbar-absolute #leftbar_part3.sticky { + top: calc(10px + var(--leftbar-part2-height, 300px)) !important; +} + +@media screen and (min-width: 900px) and (max-width: 1000px) { + #leftbar_part3.sticky { + transform: translateY(-25px); + } + + body.leftbar-can-headroom.headroom---unpinned #leftbar_part3.sticky { + transform: translateY(-5px); + } +} + +.todo-title { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 10px; + font-size: 14px; +} + +.todo-title i { + color: var(--themecolor); + font-size: 13px; +} + +.todo-count { + background: var(--themecolor); + color: #fff; + font-size: 10px; + font-weight: 600; + padding: 2px 7px; + border-radius: 8px; + margin-left: auto; +} + +/* 折叠已完成按�?*/ +.todo-collapse-btn { + display: flex; + align-items: center; + gap: 4px; + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + border: none; + border-radius: 8px; + padding: 2px 7px; + font-size: 10px; + font-weight: 600; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); + margin-left: 6px; +} + +.todo-collapse-btn:hover { + background: rgba(var(--themecolor-rgbstr), 0.2); + transform: scale(1.05); +} + +.todo-collapse-btn i { + font-size: 9px; + transition: transform var(--animation-fast) var(--ease-standard); +} + +.todo-collapse-btn.collapsed i { + transform: rotate(-90deg); +} + +.todo-completed-count { + min-width: 12px; + text-align: center; +} + +/* 已完成任务分隔栏 */ +.todo-completed-divider { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 10px; + margin: 8px 0 6px; + background: var(--color-foreground); + border-radius: 8px; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); + user-select: none; + border-top: 1px dashed rgba(var(--themecolor-rgbstr), 0.2); + border-bottom: 1px dashed rgba(var(--themecolor-rgbstr), 0.2); + list-style: none; +} + +.todo-completed-divider:hover { + background: rgba(var(--themecolor-rgbstr), 0.05); +} + +.todo-completed-divider .divider-text { + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; + font-weight: 600; + color: #6c757d; +} + +.todo-completed-divider .divider-text i { + color: #28a745; + font-size: 11px; +} + +.todo-completed-divider .todo-completed-count { + background: rgba(40, 167, 69, 0.15); + color: #28a745; + font-size: 10px; + font-weight: 600; + padding: 2px 6px; + border-radius: 6px; + min-width: 18px; + text-align: center; +} + +.todo-completed-divider .divider-arrow { + font-size: 10px; + color: #6c757d; + transition: transform var(--animation-fast) var(--ease-standard); +} + +.todo-completed-divider.collapsed .divider-arrow { + transform: rotate(-90deg); +} + +/* 站长端：显示未完成数�?*/ +.todo-count::before { + content: ''; +} + +.todo-add-form { + display: flex; + gap: 6px; + margin-bottom: 10px; + align-items: center; +} + +.todo-add-form input { + flex: 1; + border-radius: 6px; + border: 1px solid #e9ecef; + padding: 6px 10px; + font-size: 13px; + height: 32px; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.todo-add-form input:focus { + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(var(--themecolor-R), var(--themecolor-G), var(--themecolor-B), 0.1); + outline: none; +} + +.todo-add-form input::placeholder { + color: #adb5bd; + font-size: 12px; +} + +.todo-add-form button { + padding: 0; + width: 32px; + height: 32px; + border-radius: 6px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.todo-list { + list-style: none; + padding: 0; + margin: 0; +} + +.todo-list-scroll { + overflow-y: visible; + padding-right: 0; +} + +.todo-list-scroll::-webkit-scrollbar { + width: 4px; +} + +.todo-list-scroll::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 2px; +} + +.todo-list-scroll::-webkit-scrollbar-thumb { + background: #ccc; + border-radius: 2px; +} + +.todo-list-scroll::-webkit-scrollbar-thumb:hover { + background: #aaa; +} + +.todo-item { + display: flex; + align-items: center; + padding: 8px 10px; + background: var(--color-foreground, #f8f9fa); + border-radius: 8px; + margin-bottom: 6px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + animation: todoSlideIn 0.3s ease; +} + +@keyframes todoSlideIn { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.todo-item:last-child { + margin-bottom: 0; +} + +.todo-item:hover { + background: #f0f2f5; + transform: translateX(2px); +} + +.todo-content { + flex: 1; + font-size: 13px; + line-height: 1.4; + color: var(--color-text, #525f7f); + word-break: break-word; +} + +.todo-complete-btn, +.todo-urge-btn { + width: 24px; + height: 24px; + border: none; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + flex-shrink: 0; + margin-left: 8px; + font-size: 11px; +} + +.todo-complete-btn { + background: #d4edda; + color: #28a745; +} + +.todo-complete-btn:hover { + background: #28a745; + color: #fff; + transform: scale(1.1); +} + +.todo-urge-btn { + background: rgba(var(--themecolor-rgbstr), 0.15); + color: var(--themecolor); +} + +.todo-urge-btn:hover { + background: var(--themecolor); + color: #fff; + transform: scale(1.1); +} + +.todo-urge-btn.urged { + background: #28a745; + color: #fff; + animation: urgeSuccess 0.5s ease; +} + +.todo-urge-btn.urged i::before { + content: "\f00c"; +} + +@keyframes urgeSuccess { + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } +} + +.todo-urge-btn:disabled, +.todo-complete-btn:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none; +} + +.todo-item.todo-completing { + opacity: 0; + transform: translateX(30px) scale(0.9); + max-height: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +.todo-item.todo-completed .todo-content { + text-decoration: line-through; + color: #adb5bd; +} + +.todo-item.todo-completed { + opacity: 0.7; + order: 1; + max-height: 500px; + overflow: hidden; + transition: all var(--animation-normal) var(--ease-emphasized), + max-height var(--animation-normal) var(--ease-emphasized), + margin var(--animation-normal) var(--ease-emphasized), + padding var(--animation-normal) var(--ease-emphasized), + opacity var(--animation-normal) var(--ease-emphasized); +} + +.todo-item.todo-completed.collapsed { + max-height: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + opacity: 0; + transform: translateY(-10px); +} + +.todo-item.todo-completed:hover { + opacity: 0.85; +} + +/* 已完成任务的完成标记（访客端�?*/ +.todo-item.todo-completed .todo-done-mark { + width: 24px; + height: 24px; + border-radius: 50%; + background: #d4edda; + color: #28a745; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + margin-left: 8px; + flex-shrink: 0; +} + +.todo-delete-btn { + width: 24px; + height: 24px; + border: none; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + flex-shrink: 0; + background: #f8d7da; + color: #dc3545; + margin-left: 8px; + font-size: 11px; +} + +.todo-delete-btn:hover { + background: #dc3545; + color: #fff; + transform: scale(1.1); +} + +.todo-empty { + text-align: center; + color: #adb5bd; + font-size: 12px; + padding: 20px 0; +} + +.todo-empty::before { + content: "\f0ae"; + font-family: FontAwesome; + display: block; + font-size: 24px; + margin-bottom: 8px; + opacity: 0.5; +} + +.todo-captcha-container { + margin-top: 10px; + padding-top: 10px; + border-top: 1px dashed #e9ecef; +} + +.todo-captcha-container .input-group { + max-width: 250px; +} + +.todo-captcha-text { + font-family: monospace; + font-weight: bold; + background: #f8f9fa; + cursor: default; +} + +#todo-captcha-submit { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +/* 深色模式 */ +html.darkmode .todo-item { + background: var(--color-foreground, #2d3748); +} + +html.darkmode .todo-item:hover { + background: #3d4758; +} + +html.darkmode .todo-add-form input { + background: var(--color-foreground, #2d3748); + border-color: #4a5568; + color: #e2e8f0; +} + +html.darkmode .todo-add-form input:focus { + border-color: var(--themecolor); +} + +/* ===== 多邻国连�?===== */ +.duolingo-streak { + display: inline-flex; + align-items: center; + gap: 3px; + font-size: 14px; + font-weight: 700; + color: #FF9600; + margin-left: 6px; + vertical-align: middle; + animation: duolingoFadeIn 0.5s var(--ease-emphasized-decelerate) both; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.duolingo-streak.not-done { + color: #999; + text-shadow: none; +} + +.duolingo-flame { + width: 14px; + height: 17px; + animation: duolingoFlameGlow 2s ease-in-out infinite; +} + +.duolingo-streak.not-done .duolingo-flame { + animation: none; + opacity: 0.6; +} + +/* 多邻国火焰动�?*/ +@keyframes duolingoFlameGlow { + + 0%, + 100% { + filter: drop-shadow(0 0 2px rgba(255, 150, 0, 0.4)); + transform: scale(1); + } + + 50% { + filter: drop-shadow(0 0 6px rgba(255, 150, 0, 0.8)); + transform: scale(1.05); + } +} + +@keyframes duolingoFadeIn { + from { + opacity: 0; + transform: translateX(-5px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +/* 移动端多邻国连胜样式优化 */ +.leftbar-mobile-user-name .duolingo-streak { + font-size: 15px; + margin-left: 8px; + padding: 3px 10px 3px 6px; + background: rgba(0, 0, 0, 0.25); + border-radius: 14px; + gap: 4px; + color: #fff; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + + -webkit-backdrop-filter: blur(4px); + + backdrop-filter: blur(4px); +} + +.leftbar-mobile-user-name .duolingo-streak.not-done { + background: rgba(0, 0, 0, 0.2); + color: rgba(255, 255, 255, 0.7); + text-shadow: none; +} + +.leftbar-mobile-user-name .duolingo-flame { + width: 16px; + height: 19px; + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); +} + + +/* ===== 禁止选中（文章内容除外） ===== */ +body { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#post_content, +.post-content, +.comment-content, +.card-body p, +textarea, +input { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} + +/* ===== 禁止图片拖动（文章内容除外） ===== */ +img { + -webkit-user-drag: none; + pointer-events: auto; +} + +#post_content img, +.post-content img { + -webkit-user-drag: auto; +} + +/* ===== 修复评论框溢�?===== */ +#post_comment.card { + overflow: visible; +} + +#post_comment .card-body { + overflow: visible; +} + +#post_comment .post-comment-title { + overflow: hidden; +} + + +/* ===== 友情链接 ===== */ +.friend-links-container { + margin-top: 20px; +} + +.friend-links-category { + color: var(--themecolor); + font-size: 18px; + font-weight: 600; + margin: 25px 0 15px; + padding-bottom: 8px; + border-bottom: 2px solid var(--themecolor); +} + +.friend-links-category:first-child { + margin-top: 0; +} + +.friend-links-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 15px; +} + +.friend-link-card { + display: flex; + align-items: center; + padding: 15px; + background: var(--card-bg); + border-radius: var(--card-radius); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + text-decoration: none; + color: inherit; + transition: all 0.3s ease; +} + +.friend-link-card:hover { + text-decoration: none; + color: inherit; +} + +.friend-link-avatar { + flex-shrink: 0; + width: 50px; + height: 50px; + margin-right: 12px; +} + +.friend-link-avatar img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; +} + +.friend-link-avatar-placeholder { + width: 100%; + height: 100%; + border-radius: 50%; + background: linear-gradient(135deg, var(--themecolor), #8e99e4); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + font-weight: bold; +} + +.friend-link-info { + flex: 1; + min-width: 0; +} + +.friend-link-name { + font-size: 15px; + font-weight: 600; + color: var(--font-color); + margin-bottom: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.friend-link-desc { + font-size: 12px; + color: #999; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* 暗色模式适配 */ +html.darkmode .friend-link-card { + background: var(--card-bg); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +html.darkmode .friend-link-name { + color: var(--font-color); +} + +@media (max-width: 768px) { + .friend-links-grid { + grid-template-columns: 1fr; + } +} + + +/* ========== 友情链接页面样式 ========== */ + +/* 页面头部 */ +.argon-fl-header { + margin-bottom: 20px; +} + +.argon-fl-page-title { + font-size: 28px; + margin: 0 0 10px; + color: var(--themecolor); +} + +.argon-fl-page-title i { + margin-right: 10px; +} + +.argon-fl-page-desc { + color: var(--color-text-secondary); + margin-bottom: 15px; +} + +.argon-fl-page-desc p:last-child { + margin-bottom: 0; +} + +.argon-fl-stats { + display: flex; + gap: 20px; + font-size: 14px; + color: var(--color-text-secondary); +} + +.argon-fl-stats i { + margin-right: 5px; + color: var(--themecolor); +} + +/* 分类卡片 */ +.argon-fl-category-card { + margin-bottom: 20px; +} + +.argon-fl-category-title { + font-size: 18px; + margin: 0 0 20px; + padding-bottom: 12px; + border-bottom: 2px solid var(--themecolor); + color: var(--color-text); + display: flex; + align-items: center; +} + +.argon-fl-category-title i { + margin-right: 10px; + color: var(--themecolor); +} + +.argon-fl-category-count { + margin-left: auto; + background: var(--themecolor); + color: #fff; + font-size: 12px; + padding: 2px 10px; + border-radius: 20px; + font-weight: normal; +} + +/* 友链网格 */ +.argon-fl-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 15px; +} + +@media (max-width: 768px) { + .argon-fl-grid { + grid-template-columns: 1fr; + } +} + +/* 友链项目 */ +.argon-fl-item { + display: flex; + align-items: center; + padding: 15px; + background: var(--color-background); + border-radius: var(--card-radius); + text-decoration: none !important; + transition: all 0.3s ease; + border: 1px solid transparent; +} + +.argon-fl-item:hover { + background: var(--color-foreground); + border-color: var(--themecolor); + transform: translateX(5px); + box-shadow: 0 4px 15px rgba(94, 114, 228, 0.15); +} + +.argon-fl-item:before { + display: none; +} + +/* 头像 */ +.argon-fl-avatar { + width: 50px; + height: 50px; + flex-shrink: 0; + margin-right: 15px; + position: relative; +} + +.argon-fl-avatar img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + border: 2px solid var(--color-border); +} + +.argon-fl-avatar-text { + width: 100%; + height: 100%; + border-radius: 50%; + background: linear-gradient(135deg, var(--themecolor), var(--themecolor-light)); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + font-weight: bold; +} + +/* 内容 */ +.argon-fl-content { + flex: 1; + min-width: 0; +} + +.argon-fl-name { + font-size: 16px; + font-weight: 600; + color: var(--color-text); + margin-bottom: 4px; + display: flex; + align-items: center; +} + +.argon-fl-verified-icon { + color: #28a745; + font-size: 14px; + margin-left: 6px; +} + +.argon-fl-desc { + font-size: 13px; + color: var(--color-text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* 箭头 */ +.argon-fl-arrow { + color: var(--color-text-secondary); + opacity: 0; + transform: translateX(-10px); + transition: all 0.3s ease; +} + +.argon-fl-item:hover .argon-fl-arrow { + opacity: 1; + transform: translateX(0); +} + +/* 空状�?*/ +.argon-fl-empty { + text-align: center; + padding: 60px 20px; + color: var(--color-text-secondary); +} + +.argon-fl-empty i { + font-size: 64px; + margin-bottom: 20px; + opacity: 0.3; + color: var(--themecolor); +} + +.argon-fl-empty p { + margin: 0; + font-size: 18px; +} + +.argon-fl-empty-hint { + font-size: 14px !important; + margin-top: 10px !important; + opacity: 0.7; +} + +/* 申请卡片 */ +.argon-fl-apply-card { + margin-top: 10px; +} + +.argon-fl-apply-title { + font-size: 20px; + margin: 0 0 20px; + color: var(--themecolor); +} + +.argon-fl-apply-title i { + margin-right: 10px; +} + +/* 申请结果 */ +.argon-fl-result { + padding: 15px 20px; + border-radius: var(--card-radius); + margin-bottom: 20px; + display: flex; + align-items: center; +} + +.argon-fl-result i { + margin-right: 10px; + font-size: 18px; +} + +.argon-fl-result.success { + background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05)); + color: #28a745; + border: 1px solid rgba(40, 167, 69, 0.3); +} + +.argon-fl-result.error { + background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05)); + color: #dc3545; + border: 1px solid rgba(220, 53, 69, 0.3); +} + +/* 申请要求 */ +.argon-fl-requirements { + background: var(--color-background); + padding: 20px; + border-radius: var(--card-radius); + margin-bottom: 25px; + font-size: 14px; + line-height: 1.8; +} + +.argon-fl-requirements p:last-child { + margin-bottom: 0; +} + +.argon-fl-requirements ul { + margin: 10px 0 0; + padding-left: 20px; +} + +/* 表单 */ +.argon-fl-form { + margin-top: 20px; +} + +.argon-fl-form-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} + +@media (max-width: 768px) { + .argon-fl-form-grid { + grid-template-columns: 1fr; + } +} + +.argon-fl-field { + margin-bottom: 20px; +} + +.argon-fl-field label { + display: block; + margin-bottom: 8px; + font-weight: 500; + font-size: 14px; + color: var(--color-text); +} + +.argon-fl-field label .required { + color: #dc3545; + margin-left: 2px; +} + +.argon-fl-field input, +.argon-fl-field textarea { + width: 100%; + padding: 12px 16px; + border: 1px solid var(--color-border); + border-radius: var(--card-radius); + font-size: 14px; + background: var(--color-background); + color: var(--color-text); + transition: all 0.2s ease; +} + +.argon-fl-field input:focus, +.argon-fl-field textarea:focus { + outline: none; + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.15); + background: var(--color-foreground); +} + +.argon-fl-field textarea { + resize: vertical; + min-height: 100px; +} + +.argon-fl-submit { + text-align: center; + padding-top: 10px; +} + +.argon-fl-submit button { + padding: 14px 50px; + font-size: 16px; +} + +.argon-fl-submit button i { + margin-right: 10px; +} + +/* 夜间模式 */ +html.darkmode .argon-fl-item:hover { + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); +} + +/* ======================================== + 顶栏增强样式 - Toolbar Enhancement + ======================================== */ + +/* 顶栏基础增强 - 柔和毛玻璃效�?*/ +#navbar-main { + -webkit-backdrop-filter: blur(12px) saturate(120%); + backdrop-filter: blur(12px) saturate(120%); + border-bottom: none; + box-shadow: none; +} + +/* 顶栏底部柔和过渡伪元�?*/ +#navbar-main::after { + content: ''; + position: absolute; + bottom: -20px; + left: 0; + right: 0; + height: 20px; + background: linear-gradient(to bottom, + rgba(var(--themecolor-rgbstr), 0.15) 0%, + rgba(var(--themecolor-rgbstr), 0.05) 40%, + transparent 100%); + pointer-events: none; + opacity: 0; + transition: opacity 0.3s ease; +} + +/* 滚动后显示底部渐�?*/ +#navbar-main:not(.navbar-ontop)::after { + opacity: 1; +} + +/* 顶栏在顶部时的透明状�?*/ +html.navbar-absolute:not(.no-banner) #navbar-main.navbar-ontop { + background: linear-gradient(to bottom, + rgba(0, 0, 0, 0.2) 0%, + rgba(0, 0, 0, 0.1) 50%, + transparent 100%) !important; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); +} + +/* 顶栏渐变背景模式 */ +html.toolbar-gradient #navbar-main { + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.88) 0%, + rgba(var(--themecolor-rgbstr), 0.82) 100%) !important; +} + +/* 顶栏玻璃态模�?*/ +html.toolbar-glass #navbar-main { + background: rgba(255, 255, 255, 0.12) !important; + -webkit-backdrop-filter: blur(20px) saturate(180%); + backdrop-filter: blur(20px) saturate(180%); + border-bottom: none; +} + +html.toolbar-glass.darkmode #navbar-main { + background: rgba(0, 0, 0, 0.25) !important; +} + +/* 顶栏阴影增强 - 更柔�?*/ +html.toolbar-shadow #navbar-main { + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); +} + +html.toolbar-shadow.darkmode #navbar-main { + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); +} + +/* 顶栏底部边框 - 更柔�?*/ +html.toolbar-border #navbar-main { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +html.toolbar-border.darkmode #navbar-main { + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +/* 顶栏标题样式增强 */ +.navbar-brand.navbar-title { + font-weight: 600; + letter-spacing: 0.5px; + transition: all 0.3s ease; +} + +.navbar-brand.navbar-title:hover { + transform: scale(1.02); +} + +/* 顶栏图标增强 */ +.navbar-brand.navbar-icon img { + transition: all 0.3s ease; + border-radius: 6px; +} + +.navbar-brand.navbar-icon:hover img { + transform: scale(1.08); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); +} + +/* 顶栏菜单项增�?*/ +.navbar-nav .nav-link { + position: relative; + transition: all 0.25s ease; +} + +.navbar-nav .nav-link::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: rgba(255, 255, 255, 0.8); + transition: all 0.3s ease; + transform: translateX(-50%); + border-radius: 1px; +} + +.navbar-nav .nav-link:hover::after, +.navbar-nav .nav-link.active::after { + width: 60%; +} + +/* 顶栏下拉菜单增强 */ +.navbar-nav .dropdown-menu { + border: none; + border-radius: var(--card-radius); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); + padding: 8px 0; + animation: dropdownFadeIn 0.2s ease; +} + +@keyframes dropdownFadeIn { + from { + opacity: 0; + transform: translateY(-8px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.navbar-nav .dropdown-item { + padding: 10px 20px; + font-size: 14px; + transition: all 0.2s ease; + border-radius: 0; +} + +.navbar-nav .dropdown-item:hover { + background: rgba(var(--themecolor-rgbstr), 0.08); + color: var(--themecolor); + padding-left: 24px; +} + +/* 顶栏搜索框增�?*/ +#navbar_search_input_container .input-group { + border-radius: 25px; +} + +#navbar_search_input_container.open .input-group { + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +/* 顶栏紧凑模式 */ +html.toolbar-compact #navbar-main { + padding-top: 0.35rem !important; + padding-bottom: 0.35rem !important; +} + +html.toolbar-compact #navbar-main.navbar-ontop { + padding-top: 0.6rem !important; + padding-bottom: 0.6rem !important; +} + +/* 顶栏居中模式 */ +html.toolbar-center .navbar-brand.mr-0 { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +html.toolbar-center .navbar-nav.navbar-nav-hover { + margin-left: auto; +} + +@media (max-width: 991px) { + html.toolbar-center .navbar-brand.mr-0 { + position: relative; + left: auto; + transform: none; + } +} + +/* 移动端顶栏优�?*/ +@media (max-width: 991px) { + #navbar-main { + padding-left: 8px; + padding-right: 8px; + } + + .navbar-brand.navbar-title { + font-size: 16px; + } + + .navbar-brand.navbar-icon img { + max-height: 32px; + } +} + + +/* ======================================== + Material 3 Design System Enhancement + ======================================== */ + +/* M3 设计令牌 */ +:root { + /* 表面层级 */ + --m3-surface-1: rgba(var(--themecolor-rgbstr), 0.05); + --m3-surface-2: rgba(var(--themecolor-rgbstr), 0.08); + --m3-surface-3: rgba(var(--themecolor-rgbstr), 0.11); + --m3-surface-4: rgba(var(--themecolor-rgbstr), 0.12); + --m3-surface-5: rgba(var(--themecolor-rgbstr), 0.14); + + /* 状态层 */ + --m3-state-hover: rgba(var(--themecolor-rgbstr), 0.08); + --m3-state-focus: rgba(var(--themecolor-rgbstr), 0.12); + --m3-state-pressed: rgba(var(--themecolor-rgbstr), 0.12); + --m3-state-dragged: rgba(var(--themecolor-rgbstr), 0.16); + + /* 圆角 */ + --m3-shape-xs: 4px; + --m3-shape-sm: 8px; + --m3-shape-md: 12px; + --m3-shape-lg: 16px; + --m3-shape-xl: 28px; + + /* 阴影 */ + --m3-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); + --m3-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1); + --m3-elevation-3: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.12); + --m3-elevation-4: 0 2px 3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14); + --m3-elevation-5: 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 12px rgba(0, 0, 0, 0.16); + + /* 过渡 */ + --m3-motion-standard: cubic-bezier(0.2, 0, 0, 1); + --m3-motion-emphasized: cubic-bezier(0.2, 0, 0, 1); + --m3-motion-duration-short: 150ms; + --m3-motion-duration-medium: 250ms; + --m3-motion-duration-long: 400ms; +} + +html.darkmode { + --m3-surface-1: rgba(255, 255, 255, 0.05); + --m3-surface-2: rgba(255, 255, 255, 0.08); + --m3-surface-3: rgba(255, 255, 255, 0.11); + --m3-surface-4: rgba(255, 255, 255, 0.12); + --m3-surface-5: rgba(255, 255, 255, 0.14); + --m3-state-hover: rgba(255, 255, 255, 0.08); + --m3-state-focus: rgba(255, 255, 255, 0.12); + --m3-state-pressed: rgba(255, 255, 255, 0.12); +} + +/* M3 卡片样式 */ +.card { + border-radius: var(--m3-shape-lg) !important; + transition: box-shadow var(--m3-motion-duration-medium) var(--m3-motion-standard), + transform var(--m3-motion-duration-medium) var(--m3-motion-standard); +} + +.card.shadow-sm { + box-shadow: var(--m3-elevation-1) !important; +} + +/* M3 文章卡片 */ +article.post.card { + overflow: visible; + border: none !important; +} + +/* M3 按钮样式 */ +.btn { + border-radius: var(--m3-shape-xl) !important; + font-weight: 500; + letter-spacing: 0.1px; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); + position: relative; + overflow: hidden; +} + +.btn::before { + content: ''; + position: absolute; + inset: 0; + background: currentColor; + opacity: 0; + transition: opacity var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.btn:hover::before { + opacity: 0.08; +} + +.btn:active::before { + opacity: 0.12; +} + +.btn-primary { + box-shadow: var(--m3-elevation-1); +} + +.btn-primary:hover { + box-shadow: var(--m3-elevation-2); + transform: translateY(-1px); +} + +/* M3 输入框样�?*/ +.form-control { + border-radius: var(--m3-shape-sm) !important; + border: 1px solid var(--color-border); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); + padding: 12px 16px; +} + +.form-control:focus { + border-color: var(--themecolor); + box-shadow: 0 0 0 2px rgba(var(--themecolor-rgbstr), 0.2); + outline: none; +} + +/* M3 侧边栏样�?*/ +#leftbar .card { + border-radius: var(--m3-shape-lg) !important; + overflow: hidden; +} + +#leftbar_part1 { + border-radius: var(--m3-shape-lg) !important; +} + +#leftbar_part2 { + border-radius: var(--m3-shape-lg) !important; +} + +/* M3 侧边栏菜�?*/ +.leftbar-menu-item>a { + border-radius: var(--m3-shape-xl); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); + margin: 2px 8px; + padding: 10px 16px !important; +} + +.leftbar-menu-item>a:hover { + background: var(--m3-state-hover); +} + +.leftbar-menu-item.current>a { + background: var(--m3-surface-3); + color: var(--themecolor); + font-weight: 500; +} + +/* M3 搜索按钮 */ +#leftbar_search_container { + border-radius: var(--m3-shape-xl) !important; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +#leftbar_search_container:hover { + background: var(--m3-state-hover) !important; +} + +/* M3 标签�?*/ +.nav-pills .nav-link { + border-radius: var(--m3-shape-xl); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); + font-weight: 500; +} + +.nav-pills .nav-link.active { + background: var(--themecolor); + box-shadow: var(--m3-elevation-1); +} + +/* M3 站点统计 */ +.site-state { + display: flex; + justify-content: center; + gap: 8px; + margin: 16px 0; +} + +.site-state-item { + flex: 1; + text-align: center; +} + +.site-state-item a { + display: block; + padding: 12px 8px; + border-radius: var(--m3-shape-md); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.site-state-item a:hover { + background: var(--m3-state-hover); +} + +.site-state-item-count { + display: block; + font-size: 20px; + font-weight: 600; + color: var(--themecolor); + line-height: 1.2; +} + +.site-state-item-name { + display: block; + font-size: 12px; + color: #888; + margin-top: 2px; +} + +/* M3 作者链�?*/ +.site-author-links { + display: flex; + justify-content: center; + gap: 8px; + flex-wrap: wrap; + margin: 12px 0; +} + +.site-author-links-item a { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: var(--m3-shape-xl); + background: var(--m3-surface-2); + color: var(--themecolor); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.site-author-links-item a:hover { + background: var(--themecolor); + color: #fff; + transform: translateY(-2px); + box-shadow: var(--m3-elevation-2); +} + +/* M3 文章列表 */ +.article-list article.post { + margin-bottom: 16px; +} + +/* M3 文章预览卡片 */ +.post-preview-container { + border-radius: var(--m3-shape-lg); + overflow: hidden; +} + +/* M3 文章标题 */ +.post-title a { + transition: color var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.post-title a:hover { + color: var(--themecolor); +} + +/* M3 标签样式 */ +.badge, +.tag { + border-radius: var(--m3-shape-sm) !important; + padding: 4px 10px; + font-weight: 500; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.badge:hover, +.tag:hover { + transform: translateY(-1px); + box-shadow: var(--m3-elevation-1); +} + +/* M3 分页 */ +.page-link { + border-radius: var(--m3-shape-sm) !important; + margin: 0 2px; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.page-item.active .page-link { + box-shadow: var(--m3-elevation-1); +} + +/* M3 评论�?*/ +#comments.card, +#post_comment.card { + border-radius: var(--m3-shape-lg) !important; +} + +.comment-item { + border-radius: var(--m3-shape-md); + transition: background var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.comment-item:hover { + background: var(--m3-surface-1); +} + +/* M3 评论头像 */ +.comment-avatar img { + border-radius: var(--m3-shape-xl) !important; + transition: transform var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.comment-avatar img:hover { + transform: scale(1.05); +} + +/* M3 浮动按钮 */ +.float-action-buttons .fabtn { + border-radius: var(--card-radius) !important; + box-shadow: var(--m3-elevation-2) !important; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.float-action-buttons .fabtn:hover { + box-shadow: var(--m3-elevation-3) !important; +} + +/* M3 模态框 */ +.modal-content { + border-radius: var(--m3-shape-xl) !important; + border: none; + box-shadow: var(--m3-elevation-5); + overflow: hidden; +} + +.modal-header { + border-bottom: 1px solid var(--color-border-on-foreground); + padding: 20px 24px; +} + +.modal-body { + padding: 24px; +} + +/* M3 下拉菜单 */ +.dropdown-menu { + border-radius: var(--m3-shape-md) !important; + border: none; + box-shadow: var(--m3-elevation-3); + padding: 8px 0; + animation: m3-dropdown-in var(--m3-motion-duration-medium) var(--m3-motion-emphasized); +} + +@keyframes m3-dropdown-in { + from { + opacity: 0; + transform: scaleY(0.9) translateY(-8px); + transform-origin: top center; + } + + to { + opacity: 1; + transform: scaleY(1) translateY(0); + } +} + +.dropdown-item { + padding: 10px 16px; + border-radius: 0; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.dropdown-item:hover { + background: var(--m3-state-hover); +} + +/* M3 Alert 样式 */ +.alert { + border-radius: var(--m3-shape-md) !important; + border: none; + padding: 16px 20px; +} + +/* M3 TODO 列表 */ +.todo-list { + border-radius: var(--m3-shape-md); +} + +.todo-item { + border-radius: var(--m3-shape-sm); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.todo-item:hover { + background: var(--m3-state-hover); +} + +/* M3 公告卡片 */ +#leftbar_announcement { + border-radius: var(--m3-shape-lg) !important; + overflow: hidden; +} + +/* M3 文章导航 */ +.post-navigation { + border-radius: var(--m3-shape-lg) !important; + overflow: hidden; +} + +.post-navigation-item { + transition: background var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.post-navigation-item:hover { + background: var(--m3-surface-1); +} + +/* M3 相关文章 */ +.related-posts { + border-radius: var(--m3-shape-lg) !important; +} + +.related-post-card { + border-radius: var(--m3-shape-md); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +/* M3 代码�?*/ +article pre:not(.hljs-codeblock) { + border-radius: var(--m3-shape-md) !important; +} + +.hljs-codeblock { + border-radius: var(--m3-shape-md) !important; + overflow: hidden; +} + +/* M3 引用�?*/ +article .post-content blockquote { + border-radius: 0 var(--m3-shape-sm) var(--m3-shape-sm) 0; + background: var(--m3-surface-1); + padding: 16px 20px; + border-left: 4px solid var(--themecolor); +} + +/* M3 图片 */ +article img { + border-radius: var(--m3-shape-sm); +} + +.wp-block-image img { + border-radius: var(--m3-shape-md); +} + +/* M3 表格 */ +article table { + border-radius: var(--m3-shape-md); + overflow: hidden; +} + +article table>thead>tr>th { + background: var(--m3-surface-2); +} + +/* M3 滚动�?*/ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.3); + border-radius: var(--m3-shape-xl); +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(var(--themecolor-rgbstr), 0.5); +} + +/* M3 选中文本 */ +::selection { + background: rgba(var(--themecolor-rgbstr), 0.2); +} + +/* M3 链接悬停效果 */ +article .post-content a { + color: var(--themecolor); + text-decoration: none; + background: linear-gradient(to right, var(--themecolor), var(--themecolor)) no-repeat right bottom; + background-size: 0 2px; + transition: background-size var(--m3-motion-duration-medium) var(--m3-motion-standard); +} + +article .post-content a:hover { + background-size: 100% 2px; + background-position: left bottom; +} + +/* M3 页面过渡动画 */ +@keyframes m3-page-in { + from { + opacity: 0; + transform: translateY(16px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +#primary { + animation: m3-page-in var(--m3-motion-duration-long) var(--m3-motion-emphasized); +} + +/* M3 卡片进入动画 - 使用原有动画 */ + +/* M3 Chip/标签样式 */ +.post-meta .badge, +.post-categories a, +.post-tags a { + background: var(--m3-surface-2); + color: var(--color-text-deeper); + border: none; + padding: 6px 12px; + border-radius: var(--m3-shape-sm); + font-size: 12px; + font-weight: 500; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.post-meta .badge:hover, +.post-categories a:hover, +.post-tags a:hover { + background: var(--themecolor); + color: #fff; +} + +/* M3 头像�?*/ +#leftbar_overview_author_image { + border: 3px solid var(--m3-surface-3); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +#leftbar_overview_author_image:hover { + border-color: var(--themecolor); + transform: scale(1.05); +} + +/* M3 响应式优�?*/ +@media (max-width: 768px) { + :root { + --m3-shape-lg: 12px; + --m3-shape-xl: 20px; + } + + .card { + border-radius: var(--m3-shape-md) !important; + } + + .btn { + border-radius: var(--m3-shape-lg) !important; + } +} + +/* ---------- 评论区响应式优化 ---------- */ +@media (max-width: 768px) { + .comment-item-left-wrapper { + width: 36px; + margin-right: 12px; + min-height: 70px; + } + + .comment-item-avatar .avatar { + height: 36px; + width: 36px; + } + + .comment-upvote { + height: 28px; + line-height: 26px; + padding: 0 8px; + min-width: 36px; + font-size: 12px; + top: 42px; + } + + .comment-item-inner { + width: calc(100% - 48px); + padding-bottom: 36px; + } + + .comment-item-title { + font-size: 14px; + } + + .comment-operations { + position: relative; + right: auto; + bottom: auto; + opacity: 1; + transform: none; + margin-top: 8px; + padding: 0; + background: transparent; + box-shadow: none; + justify-content: flex-start; + } + + .comment-useragent { + display: none; + } + + .comment-info { + gap: 6px; + } +} + +/* ========== 精确修复 ========== */ + +/* 1. 搜索按钮动画优化 - 毛玻璃效果和左移滑入动画 */ +#navbar_search_input_container .input-group { + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; +} + +#navbar_search_input_container:not(.open) input.form-control { + width: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + opacity: 0; + transform: translateX(30px); + transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), + padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.25s ease 0.1s, + transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); +} + +#navbar_search_input_container.open input.form-control { + opacity: 1; + transform: translateX(0); + transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), + padding 0.4s cubic-bezier(0.16, 1, 0.3, 1), + opacity 0.3s ease, + transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); +} + +/* 搜索框展开时默认毛玻璃状�?*/ +#navbar_search_input_container.open .input-group { + background: rgba(255, 255, 255, 0.15) !important; + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.2); +} + +#navbar_search_input_container.open .input-group .input-group-text { + color: rgba(255, 255, 255, 0.9); +} + +#navbar_search_input_container.open .input-group input.form-control { + color: rgba(255, 255, 255, 0.95); +} + +#navbar_search_input_container.open .input-group input.form-control::placeholder { + color: rgba(255, 255, 255, 0.6); +} + +/* hover或有内容时切换为白色背景 */ +#navbar_search_input_container.open .input-group:hover, +#navbar_search_input_container.open .input-group:focus-within, +#navbar_search_input_container.open.has-text .input-group { + background: rgba(255, 255, 255, 0.95) !important; + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); +} + +#navbar_search_input_container.open .input-group:hover .input-group-text, +#navbar_search_input_container.open .input-group:focus-within .input-group-text, +#navbar_search_input_container.open.has-text .input-group .input-group-text { + color: #666; +} + +#navbar_search_input_container.open .input-group:hover input.form-control, +#navbar_search_input_container.open .input-group:focus-within input.form-control, +#navbar_search_input_container.open.has-text .input-group input.form-control { + color: #333; +} + +#navbar_search_input_container.open .input-group:hover input.form-control::placeholder, +#navbar_search_input_container.open .input-group:focus-within input.form-control::placeholder, +#navbar_search_input_container.open.has-text .input-group input.form-control::placeholder { + color: #999; +} + +/* 2. 移动端侧边栏按钮修复 */ +@media screen and (max-width: 900px) { + #open_sidebar { + -webkit-tap-highlight-color: transparent; + touch-action: manipulation; + cursor: pointer; + z-index: 1000; + } + + #open_sidebar .navbar-toggler-icon { + pointer-events: none; + } + + html.leftbar-opened #leftbar { + transform: translateX(0) !important; + opacity: 1 !important; + visibility: visible !important; + } +} + +/* 3. Git 徽章样式 */ +.git-version-badge { + display: inline-flex; + align-items: center; + gap: 4px; + margin-left: 8px; + padding: 2px 8px; + background: rgba(0, 0, 0, 0.15); + border-radius: 10px; + font-size: 11px; + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + color: inherit; + opacity: 0.7; + transition: opacity 0.2s ease; + vertical-align: middle; + cursor: pointer; + user-select: none; +} + +.git-version-badge:hover { + opacity: 1; +} + +.git-version-badge .git-icon { + width: 11px; + height: 11px; + color: #f05033; + flex-shrink: 0; +} + +/* 移动端隐藏Git徽章 */ +@media screen and (max-width: 576px) { + .git-version-badge { + display: none; + } + + .git-version-badge .git-icon { + width: 11px; + height: 11px; + } +} + +/* 4. Topbar 自定义链接样�?*/ +.navbar-custom-links { + display: flex; + align-items: center; + gap: 6px; + margin-left: 10px; +} + +.navbar-custom-links a { + color: rgba(255, 255, 255, 0.9); + font-size: 13px; + padding: 5px 12px; + border-radius: 18px; + transition: all 0.25s ease; + text-decoration: none; + white-space: nowrap; +} + +.navbar-custom-links a:hover { + background: rgba(255, 255, 255, 0.18); + color: #fff; +} + +.navbar-custom-links a i { + margin-right: 5px; +} + +@media screen and (max-width: 992px) { + .navbar-custom-links { + display: none; + } +} + +/* 6. 防止按钮文字换行 */ +.btn { + white-space: nowrap; +} + +.btn-inner--text { + white-space: nowrap; +} + +.nav-link { + white-space: nowrap; +} + +.navbar-nav .nav-item { + white-space: nowrap; +} + +/* 标签和徽章防止换�?*/ +.badge, +.tag, +.post-categories a, +.post-tags a { + white-space: nowrap; +} + +/* ======================================== + 全局视觉优化 - 保持原有风格融入 M3 + ======================================== */ + +/* 全局平滑滚动�?JS 库处理，此处不设�?*/ + +/* 页面背景微妙纹理 */ +body { + background-image: + radial-gradient(circle at 20% 80%, rgba(var(--themecolor-rgbstr), 0.03) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(var(--themecolor-rgbstr), 0.02) 0%, transparent 40%); + background-attachment: fixed; +} + +html.darkmode body { + background-image: + radial-gradient(circle at 20% 80%, rgba(var(--themecolor-rgbstr), 0.05) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(var(--themecolor-rgbstr), 0.03) 0%, transparent 40%); +} + +/* 卡片悬浮效果增强 */ +.card { + border: 1px solid rgba(var(--themecolor-rgbstr), 0.06); + background-color: var(--color-foreground); +} + +html.darkmode .card { + border: 1px solid rgba(255, 255, 255, 0.05); + background-color: var(--color-foreground); +} + +/* 文章卡片优化 */ +article.post.card { + border: none; + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.04), + 0 4px 12px rgba(0, 0, 0, 0.03); +} + +article.post.card:hover { + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 12px 28px rgba(var(--themecolor-rgbstr), 0.08); +} + +/* 文章导航卡片透明�?*/ +.post-navigation.card { + background: var(--color-foreground); +} + +/* 相关文章卡片透明�?*/ +.related-posts.card { + background: var(--color-foreground); +} + +/* 文章标题优化 */ +.post-title a { + background: linear-gradient(to right, var(--themecolor), var(--themecolor-light)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + transition: all 0.3s ease; +} + +.post-title a:hover { + filter: brightness(1.1); +} + +/* 文章预览卡片缩略图优�?*/ +.post-thumbnail { + transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +article.post.card:hover .post-thumbnail { + transform: none; +} + +/* 侧边栏卡片优�?*/ +#leftbar .card, +#leftbar_part1, +#leftbar_part2 { + border: 1px solid rgba(var(--themecolor-rgbstr), 0.05); +} + +html.darkmode #leftbar .card, +html.darkmode #leftbar_part1, +html.darkmode #leftbar_part2 { + border: 1px solid rgba(255, 255, 255, 0.04); +} + +/* 侧边栏头像光晕效�?*/ +#leftbar_overview_author_image { + box-shadow: + 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1), + 0 4px 16px rgba(var(--themecolor-rgbstr), 0.15); +} + +#leftbar_overview_author_image:hover { + box-shadow: + 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.2), + 0 8px 24px rgba(var(--themecolor-rgbstr), 0.25); +} + +/* 按钮优化 - 纯色主题�?+ Material 3 动画 */ +.btn-primary { + background-color: var(--themecolor); + border: none; + border-radius: var(--card-radius); + box-shadow: 0 1px 3px rgba(var(--themecolor-rgbstr), 0.2); + transition: + background-color var(--animation-fast) var(--ease-standard), + box-shadow var(--animation-fast) var(--ease-standard), + transform var(--animation-fast) var(--ease-standard); + position: relative; + overflow: hidden; +} + +.btn-primary:hover { + background-color: var(--themecolor-dark); + box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.35); + transform: translateY(-1px); +} + +.btn-primary:active { + background-color: var(--themecolor-dark2); + transform: scale(0.98); + box-shadow: 0 1px 2px rgba(var(--themecolor-rgbstr), 0.2); +} + +.btn-outline-primary { + border: 1.5px solid var(--themecolor); + background: transparent; + position: relative; + overflow: hidden; + z-index: 1; +} + +.btn-outline-primary::after { + content: ''; + position: absolute; + inset: 0; + background: var(--themecolor); + transform: scaleX(0); + transform-origin: right; + transition: transform 0.3s ease; + z-index: -1; +} + +.btn-outline-primary:hover::after { + transform: scaleX(1); + transform-origin: left; +} + +.btn-outline-primary:hover { + color: #fff; + border-color: var(--themecolor); +} + +/* 评论项悬浮效�?*/ +.comment-body { + transition: all 0.25s ease; + border-radius: var(--m3-shape-md); + padding: 12px; + margin: -12px; +} + +.comment-body:hover { + background: rgba(var(--themecolor-rgbstr), 0.03); +} + +html.darkmode .comment-body:hover { + background: rgba(255, 255, 255, 0.03); +} + +/* 输入框聚焦效�?*/ +.form-control:focus, +textarea.form-control:focus { + border-color: var(--themecolor); + box-shadow: + 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.12), + 0 2px 8px rgba(var(--themecolor-rgbstr), 0.08); +} + +/* 浮动按钮优化 */ +#float_action_buttons .fabtn { + border: 1px solid rgba(var(--themecolor-rgbstr), 0.1); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.08), + 0 4px 16px rgba(var(--themecolor-rgbstr), 0.1); +} + +#float_action_buttons .fabtn:hover { + background: var(--themecolor); + color: #fff; + border-color: transparent; + box-shadow: + 0 4px 12px rgba(var(--themecolor-rgbstr), 0.3), + 0 8px 24px rgba(var(--themecolor-rgbstr), 0.2); + transform: translateY(-2px); +} + +html.darkmode #float_action_buttons .fabtn { + background: rgba(var(--color-darkmode-foreground-rgbstr, 45, 45, 45), 0.9); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +html.darkmode #float_action_buttons .fabtn:hover { + background: var(--themecolor); +} + +/* Banner 优化 */ +.banner { + position: relative; +} + +.banner::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 120px; + background: linear-gradient(to top, var(--color-background) 0%, transparent 100%); + pointer-events: none; +} + +/* Banner 标题优化 */ +.banner-title { + text-shadow: + 0 2px 4px rgba(0, 0, 0, 0.3), + 0 4px 16px rgba(0, 0, 0, 0.2); +} + +/* 分页优化 */ +.page-link { + background: rgba(255, 255, 255, 0.8); + border: 1px solid rgba(var(--themecolor-rgbstr), 0.1); + transition: all 0.25s ease; +} + +.page-link:hover { + background: var(--themecolor); + color: #fff; + border-color: var(--themecolor); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.25); +} + +.page-item.active .page-link { + background: linear-gradient(135deg, var(--themecolor-light), var(--themecolor)); + border-color: transparent; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); +} + +html.darkmode .page-link { + background: rgba(var(--color-darkmode-foreground-rgbstr, 45, 45, 45), 0.8); + border-color: rgba(255, 255, 255, 0.08); +} + +/* 标签优化 */ +.badge.badge-secondary, +.tag.badge-secondary { + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + border: none; +} + +.badge.badge-secondary:hover, +.tag.badge-secondary:hover { + background: var(--themecolor); + color: #fff; +} + +/* 代码块优�?*/ +article pre, +.hljs-codeblock { + background: rgba(30, 30, 40, 0.95) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.05), + 0 4px 16px rgba(0, 0, 0, 0.15); +} + +/* 引用块优�?*/ +article .post-content blockquote { + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.06) 0%, + rgba(var(--themecolor-rgbstr), 0.02) 100%); + border-left: 3px solid var(--themecolor); + box-shadow: inset 0 0 0 1px rgba(var(--themecolor-rgbstr), 0.05); +} + +/* 目录优化 */ +#post_toc a { + transition: all 0.2s ease; + border-radius: 4px; + padding: 4px 8px; + margin: -4px -8px; +} + +#post_toc a:hover { + background: rgba(var(--themecolor-rgbstr), 0.08); + color: var(--themecolor); +} + +#post_toc a.active { + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + font-weight: 500; +} + +/* 加载动画优化 */ +@keyframes skeleton-loading { + 0% { + background-position: -200% 0; + } + + 100% { + background-position: 200% 0; + } +} + +.skeleton-loading { + background: linear-gradient(90deg, + rgba(var(--themecolor-rgbstr), 0.06) 25%, + rgba(var(--themecolor-rgbstr), 0.12) 50%, + rgba(var(--themecolor-rgbstr), 0.06) 75%); + background-size: 200% 100%; + animation: skeleton-loading 1.5s infinite; +} + +/* 链接下划线动�?*/ +a { + text-decoration: none; +} + +/* 图片加载优化 */ +article img { + opacity: 1; + transition: opacity 0.3s ease, transform 0.3s ease; +} + +article img:hover { + transform: scale(1.01); +} + +/* 表格优化 */ +article table { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); + border: 1px solid rgba(var(--themecolor-rgbstr), 0.08); +} + +article table>thead>tr>th { + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.08) 0%, + rgba(var(--themecolor-rgbstr), 0.04) 100%); + border-bottom: 2px solid rgba(var(--themecolor-rgbstr), 0.15); +} + +article table>tbody>tr:hover { + background: rgba(var(--themecolor-rgbstr), 0.03); +} + +/* 友情链接卡片优化 */ +.friend-link-card { + border: 1px solid rgba(var(--themecolor-rgbstr), 0.08); + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.friend-link-card:hover { + box-shadow: + 0 8px 24px rgba(var(--themecolor-rgbstr), 0.12), + 0 16px 48px rgba(0, 0, 0, 0.08); + border-color: rgba(var(--themecolor-rgbstr), 0.2); +} + +html.darkmode .friend-link-card { + background: rgba(var(--color-darkmode-foreground-rgbstr, 45, 45, 45), 0.85); + border-color: rgba(255, 255, 255, 0.06); +} + +/* 时间线优�?*/ +.timeline-item { + position: relative; +} + +.timeline-item::before { + content: ''; + position: absolute; + left: -20px; + top: 8px; + width: 10px; + height: 10px; + background: var(--themecolor); + border-radius: 50%; + box-shadow: 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.2); + transition: all 0.3s ease; +} + +.timeline-item:hover::before { + transform: scale(1.3); + box-shadow: 0 0 0 6px rgba(var(--themecolor-rgbstr), 0.3); +} + +/* 全局焦点样式 */ +:focus-visible { + outline: 2px solid var(--themecolor); + outline-offset: 2px; +} + +/* 平滑字体渲染 */ +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; +} + +/* 响应式优�?*/ +@media (max-width: 768px) { + .card { + -webkit-backdrop-filter: blur(6px); + backdrop-filter: blur(6px); + } + + article.post.card:hover { + transform: none; + } + + .banner::after { + height: 80px; + } +} + +/* 减少动画偏好 */ +@media (prefers-reduced-motion: reduce) { + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* ======================================== + Apple & Material 3 风格增强 + ======================================== */ + +/* 卡片微妙边框光泽 */ +.card { + border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.04), + 0 4px 12px rgba(0, 0, 0, 0.03), + inset 0 1px 0 rgba(255, 255, 255, 0.6); +} + +html.darkmode .card { + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.2), + 0 4px 12px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +/* 卡片悬浮提升效果 */ +article.post.card { + transition: transform var(--animation-normal) var(--ease-spring), + box-shadow var(--animation-normal) var(--ease-standard); +} + +article.post.card:hover { + box-shadow: + 0 8px 25px rgba(0, 0, 0, 0.08), + 0 20px 40px rgba(var(--themecolor-rgbstr), 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.8); +} + +/* 按钮 Apple + Material 3 融合风格 */ +.btn { + font-weight: 500; + letter-spacing: -0.01em; + transition: all var(--animation-fast) var(--ease-standard); +} + +/* 涟漪效果 (Ripple Effect) */ +.btn-ripple { + position: relative; + overflow: hidden; +} + +.btn-ripple::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%); + background-repeat: no-repeat; + background-position: 50%; + transform: scale(10, 10); + opacity: 0; + transition: opacity 350ms var(--ease-standard); +} + +.btn-ripple:active::after { + transform: scale(10, 10); + opacity: 1; + transition: transform 0s, opacity 0s; +} + +/* 输入�?Apple 风格 */ +.form-control { + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); + transition: all 0.2s ease; +} + +.form-control:focus { + border-color: var(--themecolor); + box-shadow: + 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.15), + inset 0 1px 2px rgba(0, 0, 0, 0.02); +} + +html.darkmode .form-control { + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); +} + +/* 侧边栏卡片光�?*/ +#leftbar .card, +#leftbar_part1, +#leftbar_part2 { + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +html.darkmode #leftbar .card, +html.darkmode #leftbar_part1, +html.darkmode #leftbar_part2 { + border: 1px solid rgba(255, 255, 255, 0.06); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +/* 头像环发光效�?*/ +#leftbar_overview_author_image { + border: 3px solid rgba(255, 255, 255, 0.9); + box-shadow: + 0 0 0 1px rgba(var(--themecolor-rgbstr), 0.2), + 0 4px 15px rgba(0, 0, 0, 0.1); + transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +#leftbar_overview_author_image:hover { + transform: scale(1.05); + box-shadow: + 0 0 0 2px rgba(var(--themecolor-rgbstr), 0.4), + 0 8px 25px rgba(var(--themecolor-rgbstr), 0.2); +} + +/* 浮动按钮 Apple 风格 */ +#float_action_buttons .fabtn { + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.1), + 0 8px 20px rgba(0, 0, 0, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.5); + transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +#float_action_buttons .fabtn:hover { + box-shadow: + 0 6px 16px rgba(var(--themecolor-rgbstr), 0.25), + 0 12px 28px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.6); +} + +html.darkmode #float_action_buttons .fabtn { + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 8px 20px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +/* 分页按钮 */ +.page-link { + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); + transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.page-link:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.2); +} + +.page-item.active .page-link { + background: linear-gradient(180deg, var(--themecolor-light), var(--themecolor)); + box-shadow: + 0 2px 8px rgba(var(--themecolor-rgbstr), 0.35), + inset 0 1px 0 rgba(255, 255, 255, 0.2); +} + +/* 标签胶囊样式 */ +.badge, +.tag { + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + border: none; + font-weight: 500; + transition: all 0.2s ease; +} + +.badge:hover, +.tag:hover { + background: var(--themecolor); + color: #fff; + transform: translateY(-1px); + box-shadow: 0 3px 8px rgba(var(--themecolor-rgbstr), 0.3); +} + +/* 评论区卡�?*/ +#comments.card, +#post_comment.card { + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 2px 12px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +html.darkmode #comments.card, +html.darkmode #post_comment.card { + border: 1px solid rgba(255, 255, 255, 0.06); + box-shadow: + 0 2px 12px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +/* 评论头像悬浮 */ +.comment-avatar img { + transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.comment-avatar img:hover { + transform: scale(1.1); + box-shadow: 0 4px 16px rgba(var(--themecolor-rgbstr), 0.2); +} + +/* 导航和推荐卡�?*/ +.post-navigation.card, +.related-posts.card { + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +html.darkmode .post-navigation.card, +html.darkmode .related-posts.card { + border: 1px solid rgba(255, 255, 255, 0.06); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +/* 下拉菜单 Apple 风格 */ +.dropdown-menu { + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: + 0 10px 40px rgba(0, 0, 0, 0.12), + 0 2px 10px rgba(0, 0, 0, 0.06); + -webkit-backdrop-filter: blur(20px) saturate(180%); + backdrop-filter: blur(20px) saturate(180%); + background: rgba(255, 255, 255, 0.9); +} + +html.darkmode .dropdown-menu { + background: rgba(40, 40, 40, 0.9); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* 模态框 Apple 风格 */ +.modal-content { + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 25px 80px rgba(0, 0, 0, 0.25), + 0 10px 30px rgba(0, 0, 0, 0.1); + -webkit-backdrop-filter: blur(30px) saturate(150%); + backdrop-filter: blur(30px) saturate(150%); + background: rgba(255, 255, 255, 0.95); +} + +html.darkmode .modal-content { + background: rgba(40, 40, 40, 0.95); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* 代码块优雅阴�?*/ +article pre, +.hljs-codeblock { + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +/* 引用块左边框渐变 */ +article .post-content blockquote { + border-left: 3px solid transparent; + border-image: linear-gradient(180deg, var(--themecolor), var(--themecolor-light)) 1; + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.06) 0%, + rgba(var(--themecolor-rgbstr), 0.02) 100%); +} + +/* 表格优雅样式 */ +article table { + border: 1px solid rgba(var(--themecolor-rgbstr), 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + overflow: hidden; +} + +article table>thead>tr>th { + background: linear-gradient(180deg, + rgba(var(--themecolor-rgbstr), 0.08) 0%, + rgba(var(--themecolor-rgbstr), 0.04) 100%); +} + +/* 图片悬浮效果 */ +article .post-content img { + transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + border-radius: 8px; +} + +article .post-content img:hover { + transform: scale(1.02); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); +} + +/* 链接下划线动�?*/ +article .post-content a:not(.btn):not(.tag):not(.badge) { + text-decoration: none; + background: linear-gradient(var(--themecolor), var(--themecolor)) no-repeat right bottom; + background-size: 0 1.5px; + transition: background-size 0.3s ease; + padding-bottom: 1px; +} + +article .post-content a:not(.btn):not(.tag):not(.badge):hover { + background-size: 100% 1.5px; + background-position: left bottom; +} + +/* 滚动条美�?*/ +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.02); + border-radius: 5px; +} + +::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.25); + border-radius: 5px; + border: 2px solid transparent; + background-clip: padding-box; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(var(--themecolor-rgbstr), 0.4); + border: 2px solid transparent; + background-clip: padding-box; +} + +html.darkmode ::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.02); +} + +html.darkmode ::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); +} + +html.darkmode ::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.35); +} + +/* 选中文本样式 */ +::selection { + background: rgba(var(--themecolor-rgbstr), 0.25); + color: inherit; +} + +/* 移动端响应式调整 */ +@media (max-width: 768px) { + article.post.card:hover { + transform: none; + } +} + +/* ======================================== + Material 3 分段控件 (Segmented Control) + ======================================== */ + +.segmented-control { + display: inline-flex; + background: var(--color-widgets-disabled); + border-radius: 10px; + padding: 3px; + gap: 2px; +} + +.segmented-control-item { + padding: 6px 14px; + border-radius: 8px; + border: none; + background: transparent; + color: var(--color-text-deeper); + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); +} + +.segmented-control-item:hover { + background: rgba(var(--themecolor-rgbstr), 0.08); +} + +.segmented-control-item.active { + background: var(--themecolor); + color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); +} + +html.darkmode .segmented-control { + background: rgba(255, 255, 255, 0.08); +} + +html.darkmode .segmented-control-item { + color: rgba(255, 255, 255, 0.9); +} + +html.darkmode .segmented-control-item:hover { + background: rgba(255, 255, 255, 0.1); +} + +/* ======================================== + 主题变体 - 玻璃拟�?(Glassmorphism) + 使用 CSS 变量，由站长设置控制 + ======================================== */ + +html.style-glass .card, +html.style-glass #fabtn_blog_settings_popup { + background: rgba(255, 255, 255, var(--card-opacity, 0.7)); + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +html.style-glass .card:hover { + background: rgba(255, 255, 255, calc(var(--card-opacity, 0.7) + 0.1)); +} + +html.darkmode.style-glass .card, +html.darkmode.style-glass #fabtn_blog_settings_popup { + background: rgba(66, 66, 66, var(--card-opacity, 0.7)); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +html.darkmode.style-glass .card:hover { + background: rgba(66, 66, 66, calc(var(--card-opacity, 0.7) + 0.1)); +} + +/* Fix CSS Stacking Context breaking backdrop-filter in Glass style */ +html.style-glass .article-list article.post, +html.style-glass article.post.post-full, +html.style-glass .page-transition-content, +html.style-glass #primary { + will-change: auto !important; + transform: none !important; + animation-fill-mode: none !important; +} + +/* ======================================== + 主题变体 - 新拟�?(Neumorphism) + ======================================== */ + +html.style-neumorphism .card { + background: var(--color-background); + border: none; + box-shadow: + 8px 8px 16px rgba(0, 0, 0, 0.08), + -8px -8px 16px rgba(255, 255, 255, 0.8); +} + +html.style-neumorphism .card:hover { + box-shadow: + 10px 10px 20px rgba(0, 0, 0, 0.1), + -10px -10px 20px rgba(255, 255, 255, 0.9); +} + +html.style-neumorphism #fabtn_blog_settings_popup { + background: var(--color-background); + box-shadow: + 8px 8px 16px rgba(0, 0, 0, 0.08), + -8px -8px 16px rgba(255, 255, 255, 0.8); +} + +html.style-neumorphism .btn-primary { + box-shadow: + 4px 4px 8px rgba(0, 0, 0, 0.1), + -4px -4px 8px rgba(255, 255, 255, 0.5); +} + +html.style-neumorphism .btn-primary:active { + box-shadow: + inset 2px 2px 4px rgba(0, 0, 0, 0.1), + inset -2px -2px 4px rgba(255, 255, 255, 0.5); +} + +html.darkmode.style-neumorphism .card { + background: var(--color-background); + box-shadow: + 8px 8px 16px rgba(0, 0, 0, 0.3), + -8px -8px 16px rgba(255, 255, 255, 0.05); +} + +html.darkmode.style-neumorphism .card:hover { + box-shadow: + 10px 10px 20px rgba(0, 0, 0, 0.35), + -10px -10px 20px rgba(255, 255, 255, 0.06); +} + +html.darkmode.style-neumorphism #fabtn_blog_settings_popup { + box-shadow: + 8px 8px 16px rgba(0, 0, 0, 0.3), + -8px -8px 16px rgba(255, 255, 255, 0.05); +} + +/* 样式切换过渡动画 */ +html.style-glass .card, +html.style-glass #fabtn_blog_settings_popup, +html.style-neumorphism .card, +html.style-neumorphism #fabtn_blog_settings_popup { + transition: + background-color var(--animation-slow) var(--ease-standard), + box-shadow var(--animation-slow) var(--ease-standard), + backdrop-filter var(--animation-slow) var(--ease-standard); +} + + +/* ========== 玻璃风格下文�?页面卡片样式统一 ========== */ +/* 使用 CSS 变量，确保与首页卡片一�?*/ +html.style-glass article.post.post-full.card { + background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important; + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +html.darkmode.style-glass article.post.post-full.card { + background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +/* ========== 移动端侧边栏重新设计 ========== */ +@media screen and (max-width: 900px) { + + /* 侧边栏容�?*/ + #leftbar { + width: min(300px, 82vw); + background: var(--color-foreground); + box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); + } + + /* 移动端导航整体布局 */ + .leftbar-mobile-nav { + padding-bottom: env(safe-area-inset-bottom, 0); + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + + /* ===== 顶部用户信息�?===== */ + .leftbar-mobile-profile { + padding: 32px 24px 28px; + padding-top: calc(32px + env(safe-area-inset-top, 0)); + background: var(--themecolor-gradient); + position: relative; + } + + /* 装饰性背景圆 */ + .leftbar-mobile-profile::before { + content: ""; + position: absolute; + top: -50px; + right: -50px; + width: 140px; + height: 140px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + } + + .leftbar-mobile-profile::after { + content: ""; + position: absolute; + bottom: -30px; + left: -30px; + width: 100px; + height: 100px; + background: rgba(255, 255, 255, 0.06); + border-radius: 50%; + } + + /* 关闭按钮 */ + .leftbar-mobile-close { + position: absolute; + top: calc(16px + env(safe-area-inset-top, 0)); + right: 16px; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: rgba(255, 255, 255, 0.18); + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + color: #fff; + cursor: pointer; + z-index: 2; + transition: all var(--animation-fast) var(--ease-spring); + } + + .leftbar-mobile-close:active { + transform: scale(0.9); + background: rgba(255, 255, 255, 0.28); + } + + .leftbar-mobile-close i { + font-size: 14px; + } + + /* 头像 */ + .leftbar-mobile-avatar { + width: 72px; + height: 72px; + border-radius: 50%; + overflow: hidden; + border: 3px solid rgba(255, 255, 255, 0.4); + margin: 0 auto 16px; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + position: relative; + z-index: 1; + transition: all var(--animation-normal) var(--ease-spring); + } + + .leftbar-mobile-avatar:active { + transform: scale(0.95); + } + + .leftbar-mobile-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + } + + /* 用户信息 */ + .leftbar-mobile-user-info { + text-align: center; + position: relative; + z-index: 1; + margin-bottom: 20px; + } + + .leftbar-mobile-user-name { + font-size: 22px; + font-weight: 700; + color: #fff; + margin-bottom: 6px; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + flex-wrap: wrap; + } + + .leftbar-mobile-user-desc { + font-size: 13px; + color: rgba(255, 255, 255, 0.85); + line-height: 1.5; + max-width: 220px; + margin: 0 auto; + } + + /* 统计数据 */ + .leftbar-mobile-stats { + display: flex; + background: rgba(255, 255, 255, 0.15); + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + border-radius: 16px; + padding: 14px 10px; + position: relative; + z-index: 1; + } + + .leftbar-mobile-stat { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } + + .leftbar-mobile-stat:not(:last-child)::after { + content: ""; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 28px; + background: rgba(255, 255, 255, 0.25); + } + + .leftbar-mobile-stat .stat-num { + font-size: 20px; + font-weight: 700; + color: #fff; + line-height: 1.2; + } + + .leftbar-mobile-stat .stat-label { + font-size: 11px; + color: rgba(255, 255, 255, 0.75); + margin-top: 4px; + font-weight: 500; + } + + /* ===== 搜索�?===== */ + .leftbar-mobile-search { + padding: 18px 18px 10px; + } + + .leftbar-mobile-search-inner { + display: flex; + align-items: center; + background: var(--color-background); + border-radius: 14px; + padding: 12px 16px; + gap: 12px; + border: 1.5px solid transparent; + transition: all var(--animation-fast) var(--ease-standard); + } + + .leftbar-mobile-search-inner:focus-within { + border-color: rgba(var(--themecolor-rgbstr), 0.4); + background: var(--color-foreground); + box-shadow: 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.1); + } + + .leftbar-mobile-search-inner i { + color: #999; + font-size: 15px; + transition: color var(--animation-fast); + } + + .leftbar-mobile-search-inner:focus-within i { + color: var(--themecolor); + } + + .leftbar-mobile-search-inner input { + flex: 1; + border: none; + background: transparent; + font-size: 15px; + color: var(--color-text-deeper); + outline: none; + } + + .leftbar-mobile-search-inner input::placeholder { + color: #aaa; + } + + /* ===== 菜单区域 ===== */ + .leftbar-mobile-menu-section { + padding: 10px 14px 8px; + } + + .leftbar-mobile-section-title { + font-size: 11px; + font-weight: 700; + color: #999; + text-transform: uppercase; + letter-spacing: 1.5px; + padding: 8px 14px 12px; + } + + .leftbar-mobile-menu { + list-style: none; + padding: 0; + margin: 0; + } + + .leftbar-mobile-menu-item { + margin-bottom: 4px; + } + + .leftbar-mobile-menu-item>a { + display: flex; + align-items: center; + padding: 14px 16px; + color: var(--color-text-deeper); + text-decoration: none; + border-radius: 14px; + font-size: 15px; + font-weight: 500; + transition: all var(--animation-fast) var(--ease-standard); + } + + .leftbar-mobile-menu-item>a:active { + background: rgba(var(--themecolor-rgbstr), 0.1); + transform: scale(0.98); + } + + .leftbar-mobile-menu-item.current>a { + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + } + + .leftbar-mobile-menu-item .menu-text { + flex: 1; + } + + .leftbar-mobile-menu-item .submenu-arrow { + font-size: 12px; + color: #999; + transition: transform var(--animation-normal) var(--ease-standard); + } + + .leftbar-mobile-menu-item.expanded .submenu-arrow { + transform: rotate(180deg); + } + + /* 子菜�?*/ + .leftbar-mobile-submenu { + list-style: none; + padding: 0; + margin: 4px 0 4px 18px; + padding-left: 14px; + border-left: 2px solid var(--color-border-on-foreground-deeper); + max-height: 0; + overflow: hidden; + transition: max-height var(--animation-normal) var(--ease-standard); + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu { + max-height: 400px; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item { + margin-bottom: 2px; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item>a { + padding: 11px 14px; + font-size: 14px; + font-weight: 400; + color: #666; + border-radius: 10px; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item>a:active { + color: var(--themecolor); + background: rgba(var(--themecolor-rgbstr), 0.08); + } + + /* ===== 折叠面板 ===== */ + .leftbar-mobile-collapse-section { + margin: 6px 14px; + background: var(--color-background); + border-radius: 16px; + overflow: hidden; + transition: all var(--animation-normal) var(--ease-emphasized); + } + + .leftbar-mobile-collapse-section.expanded { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + } + + .leftbar-mobile-collapse-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + cursor: pointer; + user-select: none; + transition: background var(--animation-fast); + } + + .leftbar-mobile-collapse-header:active { + background: rgba(var(--themecolor-rgbstr), 0.05); + } + + .collapse-header-left { + display: flex; + align-items: center; + gap: 12px; + flex: 1; + } + + .collapse-icon { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + border-radius: 10px; + font-size: 13px; + transition: all var(--animation-normal) var(--ease-spring); + } + + .leftbar-mobile-collapse-section.expanded .collapse-icon { + background: var(--themecolor); + color: #fff; + transform: scale(1.05); + box-shadow: 0 3px 10px rgba(var(--themecolor-rgbstr), 0.35); + } + + .collapse-title { + font-size: 14px; + font-weight: 600; + color: var(--color-text-deeper); + transition: color var(--animation-fast); + } + + .leftbar-mobile-collapse-section.expanded .collapse-title { + color: var(--themecolor); + } + + .collapse-badge { + background: var(--themecolor); + color: #fff; + font-size: 10px; + font-weight: 700; + padding: 3px 8px; + border-radius: 10px; + min-width: 20px; + text-align: center; + margin-left: auto; + margin-right: 12px; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); + transition: all var(--animation-normal) var(--ease-spring); + } + + .leftbar-mobile-collapse-section.expanded .collapse-badge { + transform: scale(1.08); + } + + .collapse-arrow { + font-size: 11px; + color: #aaa; + transition: all var(--animation-normal) var(--ease-emphasized); + } + + .leftbar-mobile-collapse-section.expanded .collapse-arrow { + transform: rotate(180deg); + color: var(--themecolor); + } + + .leftbar-mobile-collapse-content { + max-height: 0; + overflow: hidden; + transition: max-height var(--animation-slow) var(--ease-emphasized); + } + + .leftbar-mobile-collapse-section.expanded .leftbar-mobile-collapse-content { + max-height: 320px; + } + + /* 目录容器 */ + .mobile-catalog-container { + padding: 4px 14px 14px; + } + + #leftbar_mobile_catalog { + max-height: 240px; + overflow-y: auto; + padding-right: 4px; + } + + #leftbar_mobile_catalog .index-link { + padding: 9px 12px; + font-size: 13px; + border-radius: 8px; + } + + /* TODO 容器 */ + .mobile-todo-container { + padding: 4px 14px 14px; + } + + .mobile-todo-add-form { + display: flex; + gap: 8px; + margin-bottom: 12px; + } + + .mobile-todo-add-form input { + flex: 1; + border: 1.5px solid var(--color-border-on-foreground-deeper); + border-radius: 12px; + padding: 10px 14px; + font-size: 14px; + background: var(--color-foreground); + color: var(--color-text-deeper); + outline: none; + transition: all var(--animation-fast); + } + + .mobile-todo-add-form input:focus { + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.12); + } + + .mobile-todo-add-form button { + width: 40px; + height: 40px; + border: none; + border-radius: 12px; + background: var(--themecolor); + color: #fff; + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + box-shadow: 0 3px 10px rgba(var(--themecolor-rgbstr), 0.3); + transition: all var(--animation-fast) var(--ease-spring); + } + + .mobile-todo-add-form button:active { + transform: scale(0.9); + } + + .mobile-todo-list { + list-style: none; + padding: 0; + margin: 0; + max-height: 180px; + overflow-y: auto; + } + + .mobile-todo-item { + display: flex; + align-items: center; + padding: 12px 14px; + background: var(--color-foreground); + border-radius: 12px; + margin-bottom: 6px; + transition: all var(--animation-fast); + } + + .mobile-todo-content { + flex: 1; + font-size: 13px; + color: var(--color-text-deeper); + } + + .mobile-todo-complete-btn, + .mobile-todo-urge-btn, + .mobile-todo-delete-btn { + width: 30px; + height: 30px; + border: none; + border-radius: 8px; + font-size: 12px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + margin-left: 8px; + transition: all var(--animation-fast) var(--ease-spring); + } + + .mobile-todo-complete-btn { + background: rgba(76, 175, 80, 0.12); + color: #4CAF50; + } + + .mobile-todo-complete-btn:active { + transform: scale(0.9); + background: rgba(76, 175, 80, 0.2); + } + + .mobile-todo-delete-btn { + background: rgba(244, 67, 54, 0.12); + color: #F44336; + } + + .mobile-todo-delete-btn:active { + transform: scale(0.9); + } + + .mobile-todo-urge-btn { + background: rgba(255, 152, 0, 0.12); + color: #FF9800; + } + + .mobile-todo-urge-btn:active { + transform: scale(0.9); + } + + /* ===== 底部操作�?===== */ + .leftbar-mobile-footer { + margin-top: auto; + padding: 14px 18px 22px; + padding-bottom: calc(22px + env(safe-area-inset-bottom, 0)); + border-top: 1px solid var(--color-border-on-foreground-deeper); + background: var(--color-foreground); + } + + .leftbar-mobile-actions { + display: flex; + justify-content: center; + gap: 10px; + } + + .leftbar-mobile-action { + flex: 1; + max-width: 95px; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + padding: 14px 10px; + border: none; + background: var(--color-background); + color: #666; + font-size: 11px; + font-weight: 500; + cursor: pointer; + border-radius: 14px; + transition: all var(--animation-fast) var(--ease-spring); + } + + .leftbar-mobile-action:active { + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + transform: scale(0.95); + } + + .leftbar-mobile-action i { + font-size: 20px; + transition: transform var(--animation-fast) var(--ease-spring); + } + + .leftbar-mobile-action:active i { + transform: scale(1.15); + } + + .leftbar-mobile-action span { + white-space: nowrap; + } +} + +/* ===== 小屏幕适配 ===== */ +@media screen and (max-width: 375px) { + #leftbar { + width: min(270px, 80vw); + } + + .leftbar-mobile-profile { + padding: 26px 20px 24px; + } + + .leftbar-mobile-avatar { + width: 64px; + height: 64px; + } + + .leftbar-mobile-user-name { + font-size: 20px; + } + + .leftbar-mobile-stats { + padding: 12px 8px; + } + + .leftbar-mobile-stat .stat-num { + font-size: 18px; + } + + .leftbar-mobile-search { + padding: 14px 14px 8px; + } + + .leftbar-mobile-menu-section { + padding: 8px 12px 6px; + } + + .leftbar-mobile-collapse-section { + margin: 5px 12px; + } + + .collapse-icon { + width: 28px; + height: 28px; + font-size: 12px; + } + + .collapse-title { + font-size: 13px; + } + + .leftbar-mobile-footer { + padding: 12px 14px 18px; + } + + .leftbar-mobile-action { + padding: 12px 8px; + max-width: 85px; + } + + .leftbar-mobile-action i { + font-size: 18px; + } + + .leftbar-mobile-action span { + font-size: 10px; + } +} + +/* ========== 移动端玻璃风格文章卡�?========== */ +@media screen and (max-width: 900px) { + html.style-glass article.post.post-full.card { + background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important; + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + } + + html.darkmode.style-glass article.post.post-full.card { + background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important; + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + } +} + +/* ========== 暗色模式移动端目录样式补�?========== */ +@media screen and (max-width: 900px) { + + /* 暗色模式下目录链接颜�?*/ + html.darkmode #leftbar_mobile_catalog .index-link { + color: #bbb; + } + + html.darkmode #leftbar_mobile_catalog .index-item.current>.index-link { + color: var(--themecolor-light); + background: rgba(var(--themecolor-rgbstr), 0.15); + } + + html.darkmode #leftbar_mobile_catalog .index-link:active { + background: rgba(var(--themecolor-rgbstr), 0.18); + } + + /* 暗色模式下子目录边框 */ + html.darkmode #leftbar_mobile_catalog .index-subItem-box { + border-left-color: rgba(255, 255, 255, 0.1); + } + + /* 暗色模式下滚动条 */ + html.darkmode #leftbar_mobile_catalog::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.35); + } +} + + +/* ========== backdrop-filter 移动端兼容性修�?========== */ +/* 针对不支�?backdrop-filter 的浏览器提供降级方案 */ + +/* 检测不支持 backdrop-filter 的浏览器，使用更高不透明度的背景作为降级 */ +@supports not (backdrop-filter: blur(1px)) { + + /* 顶栏降级 */ + html.no-banner.toolbar-blur #navbar-main { + background-color: rgba(var(--themecolor-rgbstr), 0.92) !important; + } + + /* 搜索框降�?*/ + #navbar_search_input_container.open .input-group { + background: rgba(255, 255, 255, 0.95); + } + + /* 侧边栏遮罩降�?*/ + #sidebar_mask { + background: rgba(0, 0, 0, 0.65); + } + + /* 左侧栏移动端降级 */ + @media screen and (max-width: 900px) { + #leftbar { + background: rgba(255, 255, 255, 0.98) !important; + } + + html.darkmode #leftbar { + background: rgba(30, 30, 30, 0.98) !important; + } + + .leftbar-mobile-action { + background: rgba(var(--themecolor-rgbstr), 0.12); + } + + .leftbar-mobile-actions-container { + background: rgba(255, 255, 255, 0.98); + } + + html.darkmode .leftbar-mobile-actions-container { + background: rgba(30, 30, 30, 0.98); + } + } + + /* 玻璃态顶栏降�?*/ + html.toolbar-glass #navbar-main { + background: rgba(255, 255, 255, 0.88) !important; + } + + html.toolbar-glass.darkmode #navbar-main { + background: rgba(0, 0, 0, 0.85) !important; + } + + /* 弹窗遮罩降级 */ + .modal-backdrop, + #share_panel_mask { + background: rgba(0, 0, 0, 0.7); + } + + /* 图片查看器遮罩降�?*/ + .fancybox-bg { + background: rgba(0, 0, 0, 0.92); + } +} + +/* 针对 -webkit-backdrop-filter 也不支持的情况（部分旧版安卓浏览器） */ +@supports not (-webkit-backdrop-filter: blur(1px)) { + @supports not (backdrop-filter: blur(1px)) { + + /* 确保在完全不支持的情况下有可用的样式 */ + html.no-banner.toolbar-blur #navbar-main, + html.toolbar-glass #navbar-main { + background-color: rgba(var(--themecolor-rgbstr), 0.95) !important; + } + + @media screen and (max-width: 900px) { + #leftbar { + background: var(--color-foreground) !important; + } + } + } +} + +/* ========== iOS Safari 特殊处理 ========== */ +/* iOS Safari 需�?-webkit- 前缀，且在某些情况下需要强制开启硬件加�?*/ +@media screen and (max-width: 900px) { + + #leftbar, + #navbar-main, + .leftbar-mobile-actions-container { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } +} + +/* ========== Modern UI Enhancements - 现代化布局和动画优�?========== */ + +/* 1. 增强动画变量 */ +:root { + --micro-duration: 80ms; + --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); + --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1); + --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); + --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); + --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); + --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.1); + --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.1); + --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.12); + --shadow-5: 0 12px 24px rgba(0, 0, 0, 0.1), 0 24px 48px rgba(0, 0, 0, 0.15); + --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(var(--themecolor-rgbstr), 0.08); + --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +html.darkmode { + --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3); + --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3); + --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.3); + --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.25), 0 16px 32px rgba(0, 0, 0, 0.35); + --shadow-5: 0 12px 24px rgba(0, 0, 0, 0.3), 0 24px 48px rgba(0, 0, 0, 0.4); + --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(var(--themecolor-rgbstr), 0.15); +} + +/* 2. 桌面端卡片悬停效果增�?*/ +@media (hover: hover) and (pointer: fine) { + article.post.card { + transition: transform var(--animation-normal) var(--ease-out-expo), box-shadow var(--animation-normal) var(--ease-standard); + } + + article.post.card .post-thumbnail { + transition: transform var(--animation-slow) var(--ease-out-expo); + } + + article.post.card:hover .post-thumbnail { + transform: none; + } + + .card:not(article):not(.no-hover-effect) { + transition: box-shadow var(--animation-normal) var(--ease-standard); + } + + #leftbar .card, + #rightbar .card { + transition: box-shadow var(--animation-normal) var(--ease-standard), border-color var(--animation-fast) var(--ease-standard); + } + + #leftbar .card:hover, + #rightbar .card:hover { + border-color: rgba(var(--themecolor-rgbstr), 0.15); + } +} + +/* 3. 按钮和链接悬停效�?*/ +@media (hover: hover) and (pointer: fine) { + .btn { + transition: all var(--animation-fast) var(--ease-standard); + position: relative; + overflow: hidden; + } + + .btn::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%); + opacity: 0; + transition: opacity var(--animation-fast) var(--ease-standard); + pointer-events: none; + } + + .btn:hover::after { + opacity: 1; + } + + .btn:active { + transform: scale(0.98); + transition-duration: var(--micro-duration); + } + + article .post-content a:not([class*="button"]):not(.no-underline) { + background-image: linear-gradient(var(--themecolor), var(--themecolor)); + background-size: 0% 2px; + background-position: 0 100%; + background-repeat: no-repeat; + transition: background-size var(--animation-normal) var(--ease-out-expo); + } + + article .post-content a:not([class*="button"]):not(.no-underline):hover { + background-size: 100% 2px; + } + + .navbar-nav .nav-link { + position: relative; + transition: color var(--animation-fast) var(--ease-standard); + } + + .navbar-nav .nav-link::before { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: currentColor; + transition: width var(--animation-normal) var(--ease-out-expo), left var(--animation-normal) var(--ease-out-expo); + border-radius: 1px; + } + + .navbar-nav .nav-link:hover::before { + width: 100%; + left: 0; + } + + .comment-item { + transition: box-shadow var(--animation-normal) var(--ease-standard); + } +} + +/* 4. 滚动入场动画 */ +@keyframes modernFadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes modernFadeInScale { + from { + opacity: 0; + transform: scale(0.95); + } + + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes modernSlideInLeft { + from { + opacity: 0; + transform: translateX(-20px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes modernSlideInRight { + from { + opacity: 0; + transform: translateX(20px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +.article-list article.post { + animation: modernFadeInUp var(--animation-slow) var(--ease-emphasized-decelerate) both; +} + +.article-list article.post:nth-child(1) { + animation-delay: 0ms; +} + +.article-list article.post:nth-child(2) { + animation-delay: 50ms; +} + +.article-list article.post:nth-child(3) { + animation-delay: 100ms; +} + +.article-list article.post:nth-child(4) { + animation-delay: 150ms; +} + +.article-list article.post:nth-child(5) { + animation-delay: 200ms; +} + +.article-list article.post:nth-child(6) { + animation-delay: 250ms; +} + +.article-list article.post:nth-child(7) { + animation-delay: 300ms; +} + +.article-list article.post:nth-child(8) { + animation-delay: 350ms; +} + +.article-list article.post:nth-child(n+9) { + animation-delay: 400ms; +} + +#leftbar .card { + animation: modernSlideInLeft var(--animation-slow) var(--ease-emphasized-decelerate) both; +} + +#leftbar .card:nth-child(1) { + animation-delay: 100ms; +} + +#leftbar .card:nth-child(2) { + animation-delay: 150ms; +} + +#leftbar .card:nth-child(3) { + animation-delay: 200ms; +} + +#leftbar .card:nth-child(4) { + animation-delay: 250ms; +} + +#leftbar .card:nth-child(5) { + animation-delay: 300ms; +} + +#rightbar .card { + animation: modernSlideInRight var(--animation-slow) var(--ease-emphasized-decelerate) both; +} + +#rightbar .card:nth-child(1) { + animation-delay: 100ms; +} + +#rightbar .card:nth-child(2) { + animation-delay: 150ms; +} + +#rightbar .card:nth-child(3) { + animation-delay: 200ms; +} + +/* 5. 页面过渡和浮动按钮动�?*/ +#primary.pjax-loading { + opacity: 0.6; + transform: translate3d(0, 10px, 0); + pointer-events: none; +} + +#primary { + transition: opacity var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard); +} + +@keyframes modernContentFadeIn { + from { + opacity: 0; + transform: translate3d(0, 16px, 0); + } + + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +article.post.post-full:not(.no-animation) { + animation: modernContentFadeIn var(--animation-slow) var(--ease-emphasized-decelerate) both; +} + +article.post.post-full { + transform-origin: center top; +} + +#float_action_buttons { + transition: transform var(--animation-normal) var(--ease-back), opacity var(--animation-normal) var(--ease-standard); +} + +#float_action_buttons .fabtn { + transition: background var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard), opacity var(--animation-normal) var(--ease-standard); +} + +#float_action_buttons .fabtn:active { + transform: scale(0.9); + transition-duration: var(--micro-duration); +} + +@keyframes modernFabtnBounceIn { + 0% { + opacity: 0; + transform: scale(0.3); + } + + 50% { + transform: scale(1.05); + } + + 70% { + transform: scale(0.95); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +#float_action_buttons:not(.fabtns-unloaded) .fabtn:not(.fabtn-hidden) { + animation: modernFabtnBounceIn var(--animation-slow) var(--ease-spring) both; +} + +#float_action_buttons .fabtn:nth-child(1) { + animation-delay: 0ms; +} + +#float_action_buttons .fabtn:nth-child(2) { + animation-delay: 50ms; +} + +#float_action_buttons .fabtn:nth-child(3) { + animation-delay: 100ms; +} + +#float_action_buttons .fabtn:nth-child(4) { + animation-delay: 150ms; +} + +#float_action_buttons .fabtn:nth-child(5) { + animation-delay: 200ms; +} + +/* 6. 顶栏和评论区动画 */ +#navbar-main { + transition: background-color var(--animation-normal) var(--ease-standard), padding var(--animation-normal) var(--ease-standard), box-shadow var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard), backdrop-filter var(--animation-normal) var(--ease-standard); +} + +#navbar-main:not(.navbar-ontop) { + box-shadow: var(--shadow-2); +} + +#navbar_search_input_container .input-group { + transition: width var(--animation-normal) var(--ease-out-expo), background var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard); +} + +#navbar_search_input_container.open .input-group { + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); +} + +.comment-item { + animation: modernFadeInUp var(--animation-normal) var(--ease-emphasized-decelerate) both; +} + +.comment-item:nth-child(1) { + animation-delay: 0ms; +} + +.comment-item:nth-child(2) { + animation-delay: 30ms; +} + +.comment-item:nth-child(3) { + animation-delay: 60ms; +} + +.comment-item:nth-child(4) { + animation-delay: 90ms; +} + +.comment-item:nth-child(5) { + animation-delay: 120ms; +} + +.comment-item:nth-child(n+6) { + animation-delay: 150ms; +} + +@keyframes modernCommentSuccess { + 0% { + transform: scale(0.8); + opacity: 0; + } + + 50% { + transform: scale(1.02); + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +.comment-item.new-comment { + animation: modernCommentSuccess var(--animation-slow) var(--ease-spring); +} + +/* 7. 图片和表单动�?*/ +article img, +.post-thumbnail img { + transition: opacity var(--animation-normal) var(--ease-standard); +} + +article img[loading="lazy"], +.post-thumbnail img[loading="lazy"] { + opacity: 0; +} + +article img.loaded, +.post-thumbnail img.loaded, +article img:not([loading="lazy"]), +.post-thumbnail img:not([loading="lazy"]) { + opacity: 1; +} + +.form-control { + transition: border-color var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard), background-color var(--animation-fast) var(--ease-standard); +} + +.form-control:focus { + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.15); + border-color: var(--themecolor); +} + +.form-group.floating-label { + position: relative; +} + +.form-group.floating-label label { + position: absolute; + left: 12px; + top: 50%; + transform: translateY(-50%); + transition: all var(--animation-fast) var(--ease-standard); + pointer-events: none; + color: #999; + background: var(--color-foreground); + padding: 0 4px; +} + +.form-group.floating-label .form-control:focus~label, +.form-group.floating-label .form-control:not(:placeholder-shown)~label { + top: 0; + font-size: 12px; + color: var(--themecolor); +} + +/* 8. 滚动条美�?*/ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.3); + border-radius: 4px; + border: 2px solid transparent; + background-clip: content-box; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(var(--themecolor-rgbstr), 0.5); + background-clip: content-box; +} + +* { + scrollbar-width: thin; + scrollbar-color: rgba(var(--themecolor-rgbstr), 0.3) transparent; +} + +/* 9. 移动端触摸优�?*/ +@media (hover: none) and (pointer: coarse) { + article.post.card:hover { + transform: none; + box-shadow: var(--shadow-1); + } + + * { + -webkit-tap-highlight-color: transparent; + } +} + +/* 10. 移动端侧边栏动画增强 */ +@media screen and (max-width: 900px) { + #leftbar { + transition: transform var(--animation-normal) var(--ease-out-expo), box-shadow var(--animation-normal) var(--ease-standard); + transform: translateX(-100%); + box-shadow: none; + } + + html.leftbar-opened #leftbar { + transform: translateX(0); + box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15); + } + + #leftbar_backdrop { + transition: opacity var(--animation-normal) var(--ease-standard), visibility var(--animation-normal); + } + + @keyframes modernSlideInDown { + from { + opacity: 0; + transform: translateY(-15px); + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + html.leftbar-opened .leftbar-mobile-profile { + animation: modernSlideInDown var(--animation-normal) var(--ease-emphasized-decelerate) 0.1s both; + } + + html.leftbar-opened .leftbar-mobile-search { + animation: modernFadeInUp var(--animation-normal) var(--ease-emphasized-decelerate) 0.15s both; + } + + html.leftbar-opened .leftbar-mobile-menu-section { + animation: modernFadeInUp var(--animation-normal) var(--ease-emphasized-decelerate) 0.2s both; + } + + html.leftbar-opened .leftbar-mobile-footer { + animation: modernFadeInUp var(--animation-normal) var(--ease-emphasized-decelerate) 0.25s both; + } + + .leftbar-mobile-menu-item>a { + transition: background var(--animation-fast) var(--ease-standard), transform var(--micro-duration) var(--ease-standard); + } + + .leftbar-mobile-menu-item>a:active { + background: rgba(var(--themecolor-rgbstr), 0.12); + transform: scale(0.98); + } + + article.post.card { + transition: transform var(--micro-duration) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard); + } + + #navbar-main { + transition: transform var(--animation-normal) var(--ease-standard), background-color var(--animation-fast) var(--ease-standard); + } +} + +/* 11. 骨架屏和加载动画 */ +@keyframes modernSkeletonPulse { + 0% { + background-position: -200% 0; + } + + 100% { + background-position: 200% 0; + } +} + +.skeleton { + background: linear-gradient(90deg, var(--color-border-on-foreground) 25%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 75%); + background-size: 200% 100%; + animation: modernSkeletonPulse 1.5s ease-in-out infinite; + border-radius: var(--card-radius); +} + +/* ========================================================================== + 现代化页面加载系统 + ========================================================================== */ + +/* ---------- 基础旋转器（保留用于其他地方） ---------- */ +@keyframes modernSpinnerRotate { + to { + transform: rotate(360deg); + } +} + +.loading-spinner { + width: 24px; + height: 24px; + border: 2px solid var(--color-border); + border-top-color: var(--themecolor); + border-radius: 50%; + animation: modernSpinnerRotate 0.8s linear infinite; +} + +/* ---------- 顶部进度条 ---------- */ +#page-loading-bar { + position: fixed; + top: 0; + left: 0; + height: 3px; + background: var(--themecolor-gradient); + z-index: 9999; + transition: width var(--animation-fast) var(--ease-out-expo); + box-shadow: 0 0 10px rgba(var(--themecolor-rgbstr), 0.5); +} + +/* ---------- 页面加载器容器 ---------- */ +.page-loader { + position: fixed; + inset: 0; + z-index: 9998; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s; +} + +.page-loader.is-visible { + opacity: 1; + visibility: visible; + pointer-events: auto; + transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; +} + +.page-loader.is-hiding { + opacity: 0; + transition: opacity 0.35s cubic-bezier(0.4, 0, 0.6, 1); +} + +/* ---------- 背景遮罩 ---------- */ +.page-loader-backdrop { + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(var(--themecolor-rgbstr), 0.03) 0%, rgba(var(--themecolor-rgbstr), 0.08) 100%); + -webkit-backdrop-filter: blur(24px) saturate(180%); + backdrop-filter: blur(24px) saturate(180%); +} + +html.darkmode .page-loader-backdrop { + background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%); +} + +/* ---------- 内容容器 ---------- */ +.page-loader-content { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + gap: 32px; + transform: translateY(20px) scale(0.95); + opacity: 0; + transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; +} + +.page-loader.is-visible .page-loader-content { + transform: translateY(0) scale(1); + opacity: 1; + transition-delay: 0.1s; +} + +/* ---------- 进度环容器 ---------- */ +.loader-ring-container { + position: relative; + width: 120px; + height: 120px; +} + +/* ---------- SVG 进度环 ---------- */ +.loader-ring { + width: 100%; + height: 100%; + transform: rotate(-90deg); + filter: drop-shadow(0 4px 12px rgba(var(--themecolor-rgbstr), 0.2)); +} + +.loader-ring-bg { + fill: none; + stroke: var(--color-border); + stroke-width: 3; + opacity: 0.2; +} + +.loader-ring-progress { + fill: none; + stroke: url(#loaderGradient); + stroke-width: 3; + stroke-linecap: round; + stroke-dasharray: 283; + stroke-dashoffset: 283; + transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* 渐变定义（通过 JS 动态添加或使用内联 SVG） */ +.loader-ring::before { + content: ''; + position: absolute; + inset: 0; + border-radius: 50%; + background: conic-gradient(from 0deg, var(--themecolor), transparent); + opacity: 0.1; + animation: ringGlow 2s ease-in-out infinite; +} + +@keyframes ringGlow { + + 0%, + 100% { + opacity: 0.1; + } + + 50% { + opacity: 0.3; + } +} + +/* ---------- 中心图标 ---------- */ +.loader-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 48px; + height: 48px; + color: var(--themecolor); + animation: iconPulse 2s ease-in-out infinite; +} + +.loader-icon svg { + width: 100%; + height: 100%; + animation: iconRotate 3s linear infinite; +} + +@keyframes iconPulse { + + 0%, + 100% { + opacity: 0.6; + transform: translate(-50%, -50%) scale(1); + } + + 50% { + opacity: 1; + transform: translate(-50%, -50%) scale(1.1); + } +} + +@keyframes iconRotate { + to { + transform: rotate(360deg); + } +} + +/* ---------- 加载文字 ---------- */ +.loader-text { + text-align: center; + opacity: 0; + transform: translateY(10px); + animation: textFadeIn 0.5s ease forwards; + animation-delay: 0.3s; +} + +@keyframes textFadeIn { + to { + opacity: 1; + transform: translateY(0); + } +} + +.loader-title { + font-size: 20px; + font-weight: 600; + color: var(--color-font); + margin-bottom: 8px; + letter-spacing: 0.5px; +} + +.loader-subtitle { + font-size: 14px; + color: var(--color-font-sub); + font-weight: 400; +} + +/* ---------- 骨架屏（延迟显示） ---------- */ +.loader-skeleton { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + pointer-events: none; +} + +.page-loader.show-skeleton .loader-skeleton { + opacity: 1; + transform: translateY(0); +} + +/* ---------- 骨架卡片 ---------- */ +.skeleton-card { + width: min(480px, 85vw); + background: var(--color-foreground); + border-radius: 16px; + overflow: hidden; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); +} + +html.darkmode .skeleton-card { + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); +} + +/* ---------- 骨架图片 ---------- */ +.skeleton-image { + width: 100%; + height: 200px; + background: linear-gradient(90deg, var(--color-border-on-foreground) 0%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 100%); + background-size: 200% 100%; + animation: skeletonShimmer 1.5s ease-in-out infinite; + position: relative; + overflow: hidden; +} + +.skeleton-image::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + animation: shimmerSlide 2s infinite; +} + +html.darkmode .skeleton-image::after { + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); +} + +@keyframes shimmerSlide { + to { + left: 100%; + } +} + +@keyframes skeletonShimmer { + + 0%, + 100% { + background-position: 0% 0%; + } + + 50% { + background-position: 100% 0%; + } +} + +/* ---------- 骨架内容 ---------- */ +.skeleton-content { + padding: 20px; +} + +.skeleton-title { + height: 24px; + width: 70%; + border-radius: 12px; + background: linear-gradient(90deg, var(--color-border-on-foreground) 0%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 100%); + background-size: 200% 100%; + animation: skeletonShimmer 1.5s ease-in-out infinite; + margin-bottom: 16px; +} + +.skeleton-line { + height: 14px; + border-radius: 7px; + background: linear-gradient(90deg, var(--color-border-on-foreground) 0%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 100%); + background-size: 200% 100%; + animation: skeletonShimmer 1.5s ease-in-out infinite; + margin-bottom: 10px; +} + +.skeleton-line.short { + width: 60%; +} + +/* ---------- 响应式适配 ---------- */ +@media (max-width: 768px) { + .loader-ring-container { + width: 100px; + height: 100px; + } + + .loader-icon { + width: 40px; + height: 40px; + } + + .loader-title { + font-size: 18px; + } + + .loader-subtitle { + font-size: 13px; + } + + .skeleton-image { + height: 160px; + } + + .skeleton-content { + padding: 16px; + } +} + +@media (max-width: 480px) { + .page-loader-content { + gap: 24px; + } + + .loader-ring-container { + width: 90px; + height: 90px; + } + + .loader-icon { + width: 36px; + height: 36px; + } + + .skeleton-card { + width: 92vw; + } + + .skeleton-image { + height: 140px; + } +} + +/* ---------- 减少动画（无障碍） ---------- */ +@media (prefers-reduced-motion: reduce) { + + .page-loader, + .page-loader-content, + .loader-ring-progress, + .loader-icon, + .loader-text, + .loader-skeleton, + .skeleton-image, + .skeleton-title, + .skeleton-line { + animation: none !important; + transition: none !important; + } + + .page-loader.is-visible .page-loader-content { + transform: none; + opacity: 1; + } +} + +/* 页面过渡内容容器 */ +.page-transition-content { + will-change: opacity, transform; + transition: opacity var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-emphasized-decelerate); + transform: translate3d(0, 0, 0); +} + +html.page-transition-enter .page-transition-content { + opacity: 0; + transform: translate3d(0, 8px, 0); +} + +html.page-transition-enter.page-transition-active .page-transition-content { + opacity: 1; + transform: translate3d(0, 0, 0); +} + +@media (prefers-reduced-motion: reduce) { + + .page-transition-content, + #article-loading-overlay, + #article-loading-overlay .overlay-content { + transition: none !important; + animation: none !important; + } +} + +/* 12. 模态框和下拉菜单动�?*/ +.modal { + transition: opacity var(--animation-normal) var(--ease-standard); +} + +.modal.show { + opacity: 1; +} + +.modal-dialog { + transition: transform var(--animation-normal) var(--ease-emphasized-decelerate), opacity var(--animation-normal) var(--ease-standard); + transform: scale(0.9) translateY(-20px); + opacity: 0; +} + +.modal.show .modal-dialog { + transform: scale(1) translateY(0); + opacity: 1; +} + +@media screen and (max-width: 900px) { + .modal-dialog.modal-bottom { + position: fixed; + bottom: 0; + left: 0; + right: 0; + margin: 0; + transform: translateY(100%); + border-radius: 20px 20px 0 0; + } + + .modal.show .modal-dialog.modal-bottom { + transform: translateY(0); + } +} + +.dropdown-menu { + opacity: 0; + transform: translateY(-10px) scale(0.95); + transform-origin: top center; + transition: opacity var(--animation-fast) var(--ease-standard), transform var(--animation-fast) var(--ease-emphasized-decelerate), visibility var(--animation-fast); + visibility: hidden; +} + +.dropdown-menu.show { + opacity: 1; + transform: translateY(0) scale(1); + visibility: visible; +} + +.dropdown-item { + transition: background var(--animation-fast) var(--ease-standard), color var(--animation-fast) var(--ease-standard); +} + +/* 13. 工具提示、标签、分页动�?*/ +.tooltip { + opacity: 0; + transform: translateY(5px); + transition: opacity var(--animation-fast) var(--ease-standard), transform var(--animation-fast) var(--ease-emphasized-decelerate); +} + +.tooltip.show { + opacity: 1; + transform: translateY(0); +} + +.badge, +.tag { + transition: background var(--animation-fast) var(--ease-standard); +} + +.badge:active, +.tag:active { + transform: scale(0.95); +} + +.pagination .page-link { + transition: all var(--animation-fast) var(--ease-standard); +} + +.pagination .page-link:active { + transform: scale(0.95); +} + +/* 14. 目录导航动画 */ +.index-link { + transition: all var(--animation-fast) var(--ease-standard); + position: relative; +} + +.index-link::before { + content: ""; + position: absolute; + left: -8px; + top: 50%; + transform: translateY(-50%) scaleY(0); + width: 3px; + height: 60%; + background: var(--themecolor); + border-radius: 2px; + transition: transform var(--animation-normal) var(--ease-spring); +} + +.index-item.current>.index-link::before { + transform: translateY(-50%) scaleY(1); +} + +/* 15. 时间线动�?*/ +.timeline-item { + opacity: 0; + transform: translateX(-20px); + animation: modernTimelineSlideIn var(--animation-slow) var(--ease-emphasized-decelerate) forwards; +} + +@keyframes modernTimelineSlideIn { + to { + opacity: 1; + transform: translateX(0); + } +} + +.timeline-item:nth-child(1) { + animation-delay: 0ms; +} + +.timeline-item:nth-child(2) { + animation-delay: 100ms; +} + +.timeline-item:nth-child(3) { + animation-delay: 200ms; +} + +.timeline-item:nth-child(4) { + animation-delay: 300ms; +} + +.timeline-item:nth-child(5) { + animation-delay: 400ms; +} + +.timeline-item:nth-child(n+6) { + animation-delay: 500ms; +} + +/* 16. 友链和代码块动画 */ +.friend-link-item { + transition: box-shadow var(--animation-normal) var(--ease-standard); +} + +.friend-link-avatar { + transition: transform var(--animation-normal) var(--ease-spring); +} + +.hljs-codeblock { + transition: box-shadow var(--animation-normal) var(--ease-standard); +} + +.code-copy-btn { + opacity: 0; + transition: opacity var(--animation-fast) var(--ease-standard), background var(--animation-fast) var(--ease-standard); +} + +.hljs-codeblock:hover .code-copy-btn { + opacity: 1; +} + +/* 17. 减少动画偏好支持 */ +@media (prefers-reduced-motion: reduce) { + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .card, + .btn, + a { + transition: none !important; + } +} + +/* 18. 打印样式优化 */ +@media print { + + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + } +} + +/* ========== End of Modern UI Enhancements ========== */ + + +/* ---------- Mermaid 夜间模式样式 ---------- */ +html.darkmode .mermaid-container { + background: var(--color-widgets); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* ---------- 夜间模式下的 Mermaid 错误提示 ---------- */ +html.darkmode .mermaid-error-container { + background: linear-gradient(135deg, #2d1f1f 0%, #3d2020 100%); + border-color: #9b2c2c; + border-left-color: #e53e3e; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); +} + +html.darkmode .mermaid-error-container:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); +} + +html.darkmode .mermaid-error-header { + border-bottom-color: rgba(155, 44, 44, 0.3); +} + +html.darkmode .mermaid-error-title { + color: #fc8181; +} + +html.darkmode .mermaid-error-type { + color: #feb2b2; + background: rgba(155, 44, 44, 0.3); +} + +html.darkmode .mermaid-error-message { + color: #feb2b2; + background: rgba(0, 0, 0, 0.3); + border-left-color: #9b2c2c; +} + +html.darkmode .mermaid-error-code summary { + background: rgba(0, 0, 0, 0.3); + color: #90cdf4; +} + +html.darkmode .mermaid-error-code summary:hover { + background: rgba(0, 0, 0, 0.5); +} + +html.darkmode .mermaid-error-code pre { + background: #1a202c; + color: #cbd5e0; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); +} + + +/* ========================================================================== + Mermaid 图表样式 + ========================================================================== */ + +/* ---------- Mermaid 容器基础样式 ---------- */ +.mermaid-container { + background: var(--card-background); + border-radius: var(--card-radius); + padding: 20px; + margin: 20px 0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; + position: relative; + margin: 20px -20px; + transition: opacity 0.3s ease-in; +} + +.mermaid-container-inner { + overflow: auto; + transform-origin: top left; + transition: transform 0.3s ease; +} + +.mermaid-container svg { + width: 100% !important; + height: auto !important; + display: block; +} + +/* 缩放控制按钮 */ +.mermaid-zoom-controls { + position: absolute; + top: 10px; + right: 10px; + display: flex; + gap: 5px; + z-index: 10; + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(10px); + border-radius: 6px; + padding: 5px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + opacity: 0; + transform: translateY(-10px); + transition: opacity 0.3s ease, transform 0.3s ease; + pointer-events: none; +} + +.mermaid-container:hover .mermaid-zoom-controls { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +html.darkmode .mermaid-zoom-controls { + background: rgba(30, 30, 30, 0.85); +} + +.mermaid-zoom-btn { + width: 32px; + height: 32px; + border: none; + background: transparent; + cursor: pointer; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: #5e72e4; + transition: all 0.2s; +} + +.mermaid-zoom-btn:hover { + background: rgba(94, 114, 228, 0.1); +} + +.mermaid-zoom-btn:active { + transform: scale(0.95); +} + +.mermaid-zoom-btn:disabled { + opacity: 0.4; + cursor: not-allowed; + pointer-events: none; +} + +.mermaid-zoom-level { + display: flex; + align-items: center; + padding: 0 8px; + font-size: 13px; + color: #666; + min-width: 50px; + justify-content: center; +} + +html.darkmode .mermaid-zoom-level { + color: #aaa; +} + +/* 按钮 tooltip */ +.mermaid-zoom-btn[title] { + position: relative; +} + +.mermaid-zoom-btn[title]::after { + content: attr(title); + position: absolute; + bottom: -35px; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.85); + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + white-space: nowrap; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease; + z-index: 100; +} + +.mermaid-zoom-btn[title]:hover::after { + opacity: 1; +} + +html.darkmode .mermaid-zoom-btn[title]::after { + background: rgba(255, 255, 255, 0.9); + color: #333; +} + +/* ---------- 卡片内的 Mermaid 图表 ---------- */ +.card .mermaid-container, +.post-card .mermaid-container, +.comment-content .mermaid-container { + padding: 15px; + margin: 15px -15px; +} + +/* ---------- 夜间模式适配 ---------- */ +html.darkmode .mermaid-container { + background: var(--card-background-dark); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* ---------- 响应式设�?---------- */ +@media screen and (max-width: 768px) { + .mermaid-container { + padding: 15px; + margin: 15px -15px; + border-radius: calc(var(--card-radius) * 0.8); + } + + .card .mermaid-container, + .post-card .mermaid-container, + .comment-content .mermaid-container { + margin: 15px -15px; + } +} + +@media screen and (max-width: 480px) { + .mermaid-container { + padding: 10px; + margin: 10px -10px; + } + + .card .mermaid-container, + .post-card .mermaid-container, + .comment-content .mermaid-container { + margin: 10px -10px; + } + + .mermaid-zoom-controls { + top: 5px; + right: 5px; + padding: 3px; + } + + .mermaid-zoom-btn { + width: 28px; + height: 28px; + font-size: 16px; + } +} + +/* ---------- 打印样式 ---------- */ +@media print { + .mermaid-container { + box-shadow: none; + border: 1px solid #e2e8f0; + page-break-inside: avoid; + } + + .mermaid-error-container { + display: none; + } +} + +/* ---------- 加载动画 ---------- */ +.mermaid-container.loading { + opacity: 0.5; + position: relative; +} + +.mermaid-container.loading::after { + content: "正在渲染图表..."; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--color-text-secondary); + font-size: 14px; +} + +/* ---------- 滚动条样式（Webkit�?---------- */ +.mermaid-container::-webkit-scrollbar { + height: 8px; +} + +.mermaid-container::-webkit-scrollbar-track { + background: var(--color-background); + border-radius: 4px; +} + +.mermaid-container::-webkit-scrollbar-thumb { + background: var(--color-border); + border-radius: 4px; +} + +.mermaid-container::-webkit-scrollbar-thumb:hover { + background: var(--color-text-secondary); +} + +html.darkmode .mermaid-container::-webkit-scrollbar-track { + background: var(--color-background-dark); +} + +html.darkmode .mermaid-container::-webkit-scrollbar-thumb { + background: var(--color-border-dark); +} + +html.darkmode .mermaid-container::-webkit-scrollbar-thumb:hover { + background: var(--color-text-secondary-dark); +} \ No newline at end of file diff --git a/.history/style_20260302002714.css b/.history/style_20260302002714.css new file mode 100644 index 0000000..832850c --- /dev/null +++ b/.history/style_20260302002714.css @@ -0,0 +1,18608 @@ +/* + +Theme Name: argon + +Author: solstice23 + +Author URI: https://solstice23.top/ + +Description: 轻盈、简洁、美观的 Wordpress 主题 + +Version: 1.5.2 + +License: GNU General Public License v3.0 + +License URI: https://www.gnu.org/licenses/gpl-3.0.html + +*/ + + + +@charset "utf-8"; + + +:root { + + --themecolor: #5e72e4; + + --themecolor-R: 94; + + --themecolor-G: 114; + + --themecolor-B: 228; + + --themecolor-H: 231; + + --themecolor-S: 71; + + --themecolor-L: 63; + + --themecolor-rgbstr: var(--themecolor-R), var(--themecolor-G), var(--themecolor-B); + + --themecolor-dark0: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 2.5%), 0%)); + + --themecolor-dark: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 5%), 0%)); + + --themecolor-dark2: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 10%), 0%)); + + --themecolor-dark3: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 15%), 0%)); + + --themecolor-light: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), min(calc(var(--themecolor-L) * 1% + 10%), 100%)); + + --themecolor-gradient: linear-gradient(150deg, var(--themecolor-light) 15%, var(--themecolor) 70%, var(--themecolor-dark0) 94%); + + + + --color-tint-70: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.7), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.7), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.7); + + --color-tint-78: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.78), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.78), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.78); + + --color-tint-80: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.8), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.8), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.8); + + --color-tint-82: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.82), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.82), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.82); + + --color-tint-86: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.86), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.86), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.86); + + --color-tint-92: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.92), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.92), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.92); + + --color-tint-95: + + calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.95), + + calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.95), + + calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.95); + + --color-shade-70: + + calc(30 * 0.7 + var(--themecolor-R) * (1 - 0.7)), + + calc(30 * 0.7 + var(--themecolor-G) * (1 - 0.7)), + + calc(30 * 0.7 + var(--themecolor-B) * (1 - 0.7)); + + --color-shade-75: + + calc(30 * 0.75 + var(--themecolor-R) * (1 - 0.75)), + + calc(30 * 0.75 + var(--themecolor-G) * (1 - 0.75)), + + calc(30 * 0.75 + var(--themecolor-B) * (1 - 0.75)); + + --color-shade-80: + + calc(30 * 0.8 + var(--themecolor-R) * (1 - 0.8)), + + calc(30 * 0.8 + var(--themecolor-G) * (1 - 0.8)), + + calc(30 * 0.8 + var(--themecolor-B) * (1 - 0.8)); + + --color-shade-82: + + calc(30 * 0.82 + var(--themecolor-R) * (1 - 0.82)), + + calc(30 * 0.82 + var(--themecolor-G) * (1 - 0.82)), + + calc(30 * 0.82 + var(--themecolor-B) * (1 - 0.82)); + + --color-shade-86: + + calc(30 * 0.86 + var(--themecolor-R) * (1 - 0.86)), + + calc(30 * 0.86 + var(--themecolor-G) * (1 - 0.86)), + + calc(30 * 0.86 + var(--themecolor-B) * (1 - 0.86)); + + --color-shade-90: + + calc(30 * 0.9 + var(--themecolor-R) * (1 - 0.9)), + + calc(30 * 0.9 + var(--themecolor-G) * (1 - 0.9)), + + calc(30 * 0.9 + var(--themecolor-B) * (1 - 0.9)); + + --color-shade-94: + + calc(30 * 0.94 + var(--themecolor-R) * (1 - 0.94)), + + calc(30 * 0.94 + var(--themecolor-G) * (1 - 0.94)), + + calc(30 * 0.94 + var(--themecolor-B) * (1 - 0.94)); + + --color-shade-96: + + calc(30 * 0.96 + var(--themecolor-R) * (1 - 0.96)), + + calc(30 * 0.96 + var(--themecolor-G) * (1 - 0.96)), + + calc(30 * 0.96 + var(--themecolor-B) * (1 - 0.96)); + + --color-tint-blue: + + calc(204 * 0.6 + var(--themecolor-R) * (1 - 0.6)), + + calc(226 * 0.6 + var(--themecolor-G) * (1 - 0.6)), + + calc(255 * 0.6 + var(--themecolor-B) * (1 - 0.6)); + + + + --color-background: #f4f5f7; + + --color-foreground: #fff; + + --color-widgets: #fff; + + --color-widgets-disabled: #e9ecef; + + --color-border: #dce0e5; + + --color-border-on-foreground: #f3f3f3; + + --color-border-on-foreground-deeper: #eee; + + --color-text-deeper: #212529; + + --color-selection: #cce2ff; + + /* ========== 统一动画系统 - 桌面端和移动端一�?========== */ + /* 动画时长 - 基于 Material Design 3 规范 */ + --animation-instant: 100ms; + --animation-fast: 150ms; + --animation-normal: 250ms; + --animation-slow: 400ms; + --animation-slower: 600ms; + + /* 缓动函数 - Material 3 标准曲线 */ + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --ease-standard-decelerate: cubic-bezier(0, 0, 0, 1); + --ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); + --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); + --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); + --ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); + + /* 弹性缓�?- 用于交互反馈 */ + --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); + --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + + /* 状态层透明�?- Material 3 */ + --state-hover-opacity: 0.08; + --state-focus-opacity: 0.12; + --state-pressed-opacity: 0.12; + --state-dragged-opacity: 0.16; +} + +html.darkmode body { + + --color-background: #282828; + + --color-foreground: #424242; + + --color-widgets: #555; + + --color-widgets-disabled: #474747; + + --color-border: #777; + + --color-border-on-foreground: #555; + + --color-border-on-foreground-deeper: #777; + + --color-text-deeper: #eee; + + --color-darkmode-toolbar: 33, 33, 33; + + --color-darkmode-banner: #212121; + + --color-selection: #607799; + +} + +html.darkmode.amoled-dark body, + +html.darkmode.amoled-dark.immersion-color body { + + --color-background: #111; + + --color-foreground: #000; + + --color-widgets: #151515; + + --color-widgets-disabled: #000; + + --color-border: #222; + + --color-border-on-foreground: #181818; + + --color-border-on-foreground-deeper: #252525; + + --color-text-deeper: #eee; + + --color-selection: #607799; + + + + --color-darkmode-toolbar: 0, 0, 0; + + --color-darkmode-banner: #131313; + +} + + + +html.immersion-color body { + + --color-background: rgb(var(--color-tint-86)); + + --color-foreground: rgb(var(--color-tint-92)); + + --color-widgets: rgb(var(--color-tint-95)); + + --color-widgets-disabled: rgb(var(--color-tint-86)); + + --color-border: rgb(var(--color-tint-78)); + + --color-border-on-foreground: rgb(var(--color-tint-86)); + + --color-border-on-foreground-deeper: rgb(var(--color-tint-80)); + + --color-text-deeper: rgb(var(--color-shade-82)); + + --color-selection: rgb(var(--color-tint-70)); + +} + +html.immersion-color.darkmode body { + + --color-background: rgb(var(--color-shade-94)); + + --color-foreground: rgb(var(--color-shade-90)); + + --color-widgets: rgb(var(--color-shade-86)); + + --color-widgets-disabled: rgb(var(--color-shade-82)); + + --color-border: rgb(var(--color-shade-80)); + + --color-border-on-foreground: rgb(var(--color-shade-82)); + + --color-border-on-foreground-deeper: rgb(var(--color-shade-75)); + + --color-text-deeper: rgb(var(--color-tint-82)); + + --color-selection: rgb(var(--color-shade-70)); + + + + --color-darkmode-toolbar: var(--color-shade-90); + + --color-darkmode-banner: rgb(var(--color-shade-96)); + +} + +/* 主题切换过渡效果 (Dark/Light Mode Transition) */ +html { + transition: none; +} + +html.theme-transitioning, +html.theme-transitioning *, +html.theme-transitioning *::before, +html.theme-transitioning *::after { + transition: + background-color 250ms var(--ease-standard), + border-color 250ms var(--ease-standard), + color 200ms var(--ease-standard), + box-shadow 250ms var(--ease-standard), + fill 200ms var(--ease-standard), + stroke 200ms var(--ease-standard) !important; +} + +/*Argon CSS Override*/ + +.bg-white, + +.card, + +.dropdown-menu, + +.dropdown-menu:before { + + background-color: var(--color-foreground) !important; + +} + +.form-control, + +.form-control:focus, + +.focused .input-group-text, + +.btn-neutral, + +.input-group-text, + +.page-link, + +.modal-content, + +.custom-control-label::before, + +.btn-secondary { + + background-color: var(--color-widgets); + +} + +.page-link { + + border-color: var(--color-border) !important; + +} + +.modal-header, + +.custom-control-label::before { + + border-color: var(--color-border-on-foreground-deeper) !important; + +} + +.page-link:hover { + + background-color: var(--color-widgets-disabled); + +} + +.form-control:disabled, + +.form-control[readonly] { + + background-color: var(--color-widgets-disabled); + +} + + + +/* Main CSS */ + +:root { + + --card-radius: 4px; + + --font: "Open Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, + + Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + +} + +html.themecolor-toodark.darkmode { + + --themecolor: #5e72e4 !important; + + --themecolor-light: #8a98eb !important; + +} + + + +body { + + background: var(--color-background) !important; + + font-family: var(--font); + + overflow: overlay; + +} + +a { + + transition: color var(--animation-normal) var(--ease-standard); + +} + +audio, + +canvas, + +progress, + +video { + + display: inline-block; + + vertical-align: baseline; + +} + +article .post-content { + + margin-top: 6px; + +} + +article .post-content p { + + line-height: 1.8; + + word-wrap: break-word; + +} + +article h1, + +article h2, + +article h3, + +article h4, + +article h5, + +article h6, + +article strong { + + font-weight: 600; + +} + +article h1, + +article h2, + +article h3, + +article h4, + +article h5, + +article h6 { + + margin-top: 18px !important; + + margin-bottom: 15px; + +} + +article h1 { + + font-size: 30px; + +} + +article h2 { + + font-size: 26px; + +} + +article h3 { + + font-size: 22px; + +} + +article h4 { + + font-size: 18px; + +} + +article h5 { + + font-size: 15px; + +} + +article h6 { + + font-size: 13px; + +} + +article figcaption { + + text-align: center; + + opacity: 0.65; + + margin-top: 10px; + +} + +article img, + +.shuoshuo-preview-container img { + + max-width: 100%; + + height: auto; + +} + +.shuoshuo-preview-container img { + + border-radius: var(--card-radius); + +} + +.shuoshuo-preview-container p+p>img:first-child { + + margin-top: 12px; + +} + +article .wp-block-image figcaption, + +.shuoshuo-preview-container .wp-block-image figcaption { + + text-align: center; + + font-size: 14px; + + opacity: 0.6; + +} + +article video, + +.shuoshuo-preview-container video { + + max-width: 100%; + + outline: none; + +} + +article .wp-caption, + +.shuoshuo-preview-container .wp-caption { + + max-width: 100%; + +} + +article .post-content a { + + position: relative; + +} + +article .post-content a:before { + + content: " "; + + position: absolute; + + top: auto; + + bottom: 0px; + + left: 0; + + width: 100%; + + height: 1px; + + background-color: var(--themecolor); + + transition: all 0.2s; + + transform: scaleX(0); + + backface-visibility: hidden; + +} + +article .post-content a[class*="button"]:before { + + display: none; + +} + +article .post-content a:hover:before { + + transform: scaleX(1); + +} + +article .post-content a.no-hover-underline:before { + + display: none; + +} + +html:not(.disable-codeblock-style) article pre:not(.hljs-codeblock) { + + font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", + + "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, + + monospace; + + font-size: 14px; + + line-height: 1.375; + + text-align: left; + + white-space: pre; + + word-spacing: normal; + + word-break: normal; + + tab-size: 4; + + hyphens: none; + + color: #5e6687; + + background: var(--color-border-on-foreground); + + direction: ltr; + + border: 1px solid var(--color-border-on-foreground-deeper); + + padding: 14px; + + border-radius: 3px; + +} + +article .post-content blockquote { + + padding-left: 1em; + + margin: 1em 3em 1em 0; + + font-weight: 400; + + border-left: 4px solid var(--color-border-on-foreground-deeper); + +} + +article .post-content mark { + + padding: 2px; + + margin: 0 5px; + + background: #fffdd1; + + border-bottom: 1px solid #ffedce; + +} + +article .post-content u, + +article .post-content ins { + + text-decoration: none; + + border-bottom: 1px solid; + +} + +html:not(.disable-codeblock-style) article code:not([hljs-codeblock-inner]) { + + font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", + + "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, + + monospace; + + color: #5e6687; + + background: var(--color-border-on-foreground); + + border: 1px solid var(--color-border-on-foreground-deeper); + + direction: ltr; + + border-radius: 3px; + + padding: 0 4px; + +} + +html:not(.disable-codeblock-style) article .post-content>code:not([hljs-codeblock-inner]), + +article .post-content>p>code:not([hljs-codeblock-inner]) { + + padding: 2px 5px; + +} + +article .post-content abbr[title] { + + text-decoration: none; + + cursor: help; + + border-bottom: 1px dotted; + +} + +article .post-content kbd { + + padding: 2px 6px; + + font-size: 90%; + + color: #fff; + + background-color: #333; + + border-radius: 3px; + +} + +article .wp-embedded-content, + +article .blocks-gallery-grid, + +article .wp-block-gallery, + +article .wp-block-media-text { + + max-width: 100%; + +} + +article .blocks-gallery-grid.is-cropped .blocks-gallery-image .fancybox-wrapper, + +article .blocks-gallery-grid.is-cropped .blocks-gallery-item .fancybox-wrapper, + +article .wp-block-gallery.is-cropped .blocks-gallery-image .fancybox-wrapper, + +article .wp-block-gallery.is-cropped .blocks-gallery-item .fancybox-wrapper { + + height: 100%; + + flex: 1; + + -o-object-fit: cover; + + object-fit: cover; + +} + +article .wp-block-cover, + +article .wp-block-cover-image { + + padding: 0; + +} + +article .wp-block-cover-image .wp-block-cover__inner-container, + +article .wp-block-cover .wp-block-cover__inner-container { + + position: absolute; + +} + +article table { + + max-width: 100%; + + word-break: break-word; + +} + +article table>tbody>tr>td, + +article table>tbody>tr>th, + +article table>tfoot>tr>td, + +article table>tfoot>tr>th, + +article table>thead>tr>td, + +article table>thead>tr>th { + + padding: 1rem; + + vertical-align: top; + + border: 1px solid var(--color-border-on-foreground-deeper); + +} + +.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { + + background-color: var(--color-border-on-foreground) !important; + +} + +article figure.is-style-stripes table>tbody>tr>td, + +article figure.is-style-stripes table>tbody>tr>th, + +article figure.is-style-stripes table>tfoot>tr>td, + +article figure.is-style-stripes table>tfoot>tr>th, + +article figure.is-style-stripes table>thead>tr>td, + +article figure.is-style-stripes table>thead>tr>th { + + border: none !important; + +} + +.wp-block-table.is-style-stripes { + + border-bottom: none !important; + +} + +article hr, + +article .wp-block-separator { + + border-top: 0.0625rem solid var(--color-border-on-foreground-deeper); + + border-bottom: none; + +} + +/* ---------- Mermaid 图表容器样式 ---------- */ +.mermaid-container { + background: var(--color-foreground); + border-radius: 8px; + padding: 20px; + margin: 20px -20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; + position: relative; + opacity: 0; + animation: mermaidFadeIn 0.3s ease-in-out forwards; +} + +/* 需�?18.2: Mermaid 加载动画容器 */ +.mermaid-loading { + background: var(--color-foreground); + border-radius: 8px; + padding: 40px 20px; + margin: 20px -20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 150px; +} + +.mermaid-loading-spinner { + width: 40px; + height: 40px; + border: 3px solid rgba(94, 114, 228, 0.2); + border-top-color: #5e72e4; + border-radius: 50%; + animation: mermaidSpinner 0.8s linear infinite; +} + +.mermaid-loading-text { + margin-top: 15px; + color: #666; + font-size: 14px; +} + +html.darkmode .mermaid-loading { + background: var(--color-widgets); +} + +html.darkmode .mermaid-loading-text { + color: #aaa; +} + +html.darkmode .mermaid-loading-spinner { + border-color: rgba(94, 114, 228, 0.3); + border-top-color: #5e72e4; +} + +/* 加载动画旋转 */ +@keyframes mermaidSpinner { + to { + transform: rotate(360deg); + } +} + +.mermaid-container-inner { + overflow: auto; + transform-origin: top left; + transition: transform 0.3s ease; +} + +.mermaid-container svg { + width: 100% !important; + height: auto !important; + display: block; +} + +/* 缩放控制按钮 */ +.mermaid-zoom-controls { + position: absolute; + top: 10px; + right: 10px; + display: flex; + gap: 5px; + z-index: 10; + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(10px); + border-radius: 6px; + padding: 5px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + opacity: 0; + transform: translateY(-10px); + transition: opacity 0.3s ease, transform 0.3s ease; + pointer-events: none; +} + +.mermaid-container:hover .mermaid-zoom-controls { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +html.darkmode .mermaid-zoom-controls { + background: rgba(30, 30, 30, 0.85); +} + +.mermaid-zoom-btn { + width: 32px; + height: 32px; + border: none; + background: transparent; + cursor: pointer; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: #5e72e4; + transition: all 0.2s; +} + +.mermaid-zoom-btn:hover { + background: rgba(94, 114, 228, 0.1); +} + +.mermaid-zoom-btn:active { + transform: scale(0.95); +} + +.mermaid-zoom-btn:disabled { + opacity: 0.4; + cursor: not-allowed; + pointer-events: none; +} + +.mermaid-zoom-level { + display: flex; + align-items: center; + padding: 0 8px; + font-size: 13px; + color: #666; + min-width: 50px; + justify-content: center; +} + +html.darkmode .mermaid-zoom-level { + color: #aaa; +} + +/* 按钮 tooltip */ +.mermaid-zoom-btn[title] { + position: relative; +} + +.mermaid-zoom-btn[title]::after { + content: attr(title); + position: absolute; + bottom: -35px; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.85); + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + white-space: nowrap; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease; + z-index: 100; +} + +.mermaid-zoom-btn[title]:hover::after { + opacity: 1; +} + +html.darkmode .mermaid-zoom-btn[title]::after { + background: rgba(255, 255, 255, 0.9); + color: #333; +} + +/* 提示文本 */ +.mermaid-hint { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.7); + color: white; + padding: 6px 12px; + border-radius: 4px; + font-size: 12px; + pointer-events: none; + opacity: 0; + transition: opacity 0.3s; + white-space: nowrap; + z-index: 9; +} + +.mermaid-container:hover .mermaid-hint { + opacity: 1; +} + +html.darkmode .mermaid-hint { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); +} + +/* 拖拽时的光标和视觉反馈 */ +/* 需求 13.1, 13.2, 13.4: 优化拖拽视觉反馈 */ +.mermaid-container-inner.dragging { + cursor: grabbing !important; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +.mermaid-container-inner:not(.dragging) { + cursor: grab; +} + +/* 拖拽时禁用 SVG 内的文本选择 */ +.mermaid-container-inner.dragging svg { + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +/* 需求 14: Mermaid 全屏模式样式 */ +.mermaid-fullscreen { + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: 100vw !important; + height: 100vh !important; + margin: 0 !important; + padding: 20px !important; + z-index: 99999 !important; + background: var(--color-foreground) !important; + border-radius: 0 !important; + box-shadow: none !important; + overflow: auto !important; +} + +html.darkmode .mermaid-fullscreen { + background: var(--color-widgets) !important; +} + +/* 全屏模式下的工具栏 */ +.mermaid-fullscreen .mermaid-zoom-controls { + opacity: 1; + transform: translateY(0); + background: rgba(255, 255, 255, 0.95); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); +} + +html.darkmode .mermaid-fullscreen .mermaid-zoom-controls { + background: rgba(30, 30, 30, 0.95); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); +} + +/* 全屏按钮激活状态 */ +.mermaid-zoom-btn[data-action="fullscreen"].active { + background: rgba(94, 114, 228, 0.2); + color: var(--themecolor); +} + +/* 需求 15: Mermaid 导出功能样式 */ +/* 导出按钮 */ +.mermaid-export-btn { + position: relative; +} + +/* 导出菜单 */ +.mermaid-export-menu { + position: absolute; + top: 45px; + right: 10px; + background: white; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + padding: 8px; + display: flex; + flex-direction: column; + gap: 4px; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all 0.2s ease; + z-index: 11; + min-width: 140px; +} + +.mermaid-export-menu.visible { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +html.darkmode .mermaid-export-menu { + background: #2a2a2a; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); +} + +/* 导出选项按钮 */ +.mermaid-export-option { + padding: 8px 12px; + border: none; + background: transparent; + color: #333; + text-align: left; + cursor: pointer; + border-radius: 4px; + font-size: 14px; + transition: background 0.2s; + white-space: nowrap; +} + +.mermaid-export-option:hover { + background: rgba(94, 114, 228, 0.1); + color: var(--themecolor); +} + +html.darkmode .mermaid-export-option { + color: #ddd; +} + +html.darkmode .mermaid-export-option:hover { + background: rgba(94, 114, 228, 0.2); +} + +/* 需求 15.5: 导出错误提示 */ +.mermaid-export-error { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(220, 53, 69, 0.95); + color: white; + padding: 12px 20px; + border-radius: 6px; + font-size: 14px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + z-index: 100; + animation: slideInDown 0.3s ease; + max-width: 80%; + text-align: center; +} + +@keyframes slideInDown { + from { + opacity: 0; + transform: translate(-50%, -60%); + } + + to { + opacity: 1; + transform: translate(-50%, -50%); + } +} + +html.darkmode .mermaid-export-error { + background: rgba(200, 35, 51, 0.95); +} + +/* 全屏模式下的内部容器 */ +.mermaid-fullscreen .mermaid-container-inner { + max-height: calc(100vh - 100px); + display: flex; + align-items: center; + justify-content: center; +} + +/* 全屏模式下的提示文本 */ +.mermaid-fullscreen .mermaid-hint { + opacity: 1; + bottom: 20px; +} + +/* Mermaid 淡入动画 */ +@keyframes mermaidFadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 文章卡片内的 Mermaid 图表 */ +article.card .mermaid-container { + margin: 20px -20px; +} + +/* 响应式调整 */ +/* 需求 16.1: 移动端工具栏适配 - 调整按钮大小 */ +@media screen and (max-width: 768px) { + .mermaid-container { + margin: 15px -15px; + padding: 15px; + } + + article.card .mermaid-container { + margin: 15px -15px; + } + + /* 移动端工具栏按钮放大，便于触摸 */ + .mermaid-zoom-controls { + padding: 8px; + gap: 8px; + } + + .mermaid-zoom-btn { + width: 40px; + height: 40px; + font-size: 20px; + } + + .mermaid-zoom-level { + font-size: 14px; + min-width: 55px; + padding: 0 10px; + } + + /* 移动端提示文本调整 */ + .mermaid-hint { + font-size: 11px; + padding: 5px 10px; + bottom: 8px; + } + + /* 移动端导出菜单调整 */ + .mermaid-export-menu { + right: 8px; + top: 50px; + min-width: 150px; + } + + .mermaid-export-option { + padding: 10px 14px; + font-size: 15px; + } +} + +/* 需求 16.5: 横屏模式优化 - 自动调整图表布局 */ +@media screen and (max-width: 768px) and (orientation: landscape) { + .mermaid-container { + max-height: 70vh; + overflow-y: auto; + } + + .mermaid-container-inner { + max-height: 65vh; + } + + /* 横屏时工具栏更紧凑 */ + .mermaid-zoom-controls { + padding: 5px; + gap: 5px; + top: 5px; + right: 5px; + } + + .mermaid-zoom-btn { + width: 36px; + height: 36px; + font-size: 18px; + } + + /* 横屏时隐藏提示文本，节省空间 */ + .mermaid-hint { + display: none; + } +} + +@media screen and (max-width: 480px) { + .mermaid-container { + margin: 10px -10px; + padding: 10px; + } + + article.card .mermaid-container { + margin: 10px -10px; + } + + .mermaid-zoom-controls { + top: 5px; + right: 5px; + padding: 3px; + } + + .mermaid-zoom-btn { + width: 28px; + height: 28px; + font-size: 16px; + } +} + +/* ---------- Mermaid 错误提示样式 ---------- */ +.mermaid-error-container { + background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%); + border: 2px solid #fc8181; + border-left: 5px solid #e53e3e; + border-radius: var(--card-radius); + padding: 20px; + margin: 20px 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15); + transition: box-shadow 0.3s ease; +} + +.mermaid-error-container:hover { + box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25); +} + +.mermaid-error-header { + display: flex; + align-items: center; + margin-bottom: 15px; + padding-bottom: 12px; + border-bottom: 1px solid rgba(220, 53, 69, 0.2); +} + +.mermaid-error-icon { + font-size: 28px; + margin-right: 12px; + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + + 0%, + 100% { + transform: scale(1); + opacity: 1; + } + + 50% { + transform: scale(1.1); + opacity: 0.8; + } +} + +.mermaid-error-title { + font-size: 18px; + font-weight: bold; + color: #c53030; + letter-spacing: 0.3px; +} + +.mermaid-error-body { + margin-bottom: 15px; + line-height: 1.6; +} + +.mermaid-error-type { + font-weight: bold; + color: #742a2a; + margin: 8px 0; + padding: 4px 8px; + background: rgba(220, 53, 69, 0.1); + border-radius: 4px; + display: inline-block; +} + +.mermaid-error-message { + color: #742a2a; + margin: 8px 0; + padding: 8px 12px; + background: rgba(255, 255, 255, 0.6); + border-radius: 4px; + border-left: 3px solid #fc8181; +} + +.mermaid-error-code { + margin-top: 15px; +} + +.mermaid-error-code summary { + cursor: pointer; + color: var(--themecolor); + font-weight: bold; + padding: 8px 12px; + background: rgba(255, 255, 255, 0.6); + border-radius: 4px; + user-select: none; + transition: all 0.2s ease; + display: inline-block; +} + +.mermaid-error-code summary:hover { + background: rgba(255, 255, 255, 0.9); + transform: translateX(4px); +} + +.mermaid-error-code summary::marker { + color: var(--themecolor); +} + +.mermaid-error-code[open] summary { + margin-bottom: 10px; +} + +.mermaid-error-code pre { + background: #2d3748; + color: #e2e8f0; + padding: 15px; + border-radius: 6px; + overflow-x: auto; + margin-top: 10px; + font-family: 'Courier New', Consolas, Monaco, monospace; + font-size: 14px; + line-height: 1.6; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.mermaid-error-code code { + background: transparent; + color: inherit; + padding: 0; +} + +::-webkit-scrollbar { + + width: 10px; + + height: 8px; + + background-color: rgba(0, 0, 0, 0); + +} + +::-webkit-scrollbar-track { + + background-color: transparent; + +} + +::-webkit-scrollbar-thumb { + + background-color: rgba(0, 0, 0, 0.25); + + border-radius: 100px; + + border: 2px solid transparent; + + background-clip: content-box; + +} + +::-webkit-scrollbar-thumb:hover { + + background-color: rgba(var(--themecolor-rgbstr), 0.7) !important; + +} + +*::selection { + + background-color: var(--color-selection); + +} + +*::-moz-selection { + + background-color: var(--color-selection); + +} + +*::-webkit-selection { + + background-color: var(--color-selection); + +} + +html.darkmode *::selection { + + background-color: var(--color-selection); + +} + +html.darkmode *::-moz-selection { + + background-color: var(--color-selection); + +} + +html.darkmode *::-webkit-selection { + + background-color: var(--color-selection); + +} + +html.use-serif body { + + --font: "Noto Serif SC", serif, system-ui; + +} + +html.use-big-shadow *.shadow-sm { + + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important; + +} + +/*标题样式*/ + +.article-header-style-1 article h1, + +.article-header-style-1 article h2, + +.article-header-style-1 article h3 { + + position: relative; + +} + +.article-header-style-1 article h1:after, + +.article-header-style-1 article h2:after, + +.article-header-style-1 article h3:after { + + content: ""; + + display: block; + + position: absolute; + + background: var(--themecolor); + + opacity: 0.25; + + pointer-events: none; + + border-radius: 15px; + + left: -2px; + + bottom: 0px; + +} + +.article-header-style-1 article h1:after { + + width: 45px; + + height: 13px; + +} + +.article-header-style-1 article h2:after { + + width: 40px; + + height: 11px; + +} + +.article-header-style-1 article h3:after { + + width: 30px; + + height: 9px; + +} + +.article-header-style-1 article h1.text-center:after, + +.article-header-style-1 article h1[style*="text-align: center"]:after, + +.article-header-style-1 article h1[style*="text-align:center"]:after, + +.article-header-style-1 article h1[class*="text-align-center"]:after, + +.article-header-style-1 article h2.text-center:after, + +.article-header-style-1 article h2[style*="text-align: center"]:after, + +.article-header-style-1 article h2[style*="text-align:center"]:after, + +.article-header-style-1 article h2[class*="text-align-center"]:after, + +.article-header-style-1 article h3.text-center:after, + +.article-header-style-1 article h3[style*="text-align: center"]:after, + +.article-header-style-1 article h3[style*="text-align:center"]:after, + +.article-header-style-1 article h3[class*="text-align-center"]:after { + + left: 50%; + + transform: translateX(-50%); + +} + +.article-header-style-1 article h1.text-right:after, + +.article-header-style-1 article h1[style*="text-align: right"]:after, + +.article-header-style-1 article h1[style*="text-align:right"]:after, + +.article-header-style-1 article h1[class*="text-align-right"]:after, + +.article-header-style-1 article h2.text-right:after, + +.article-header-style-1 article h2[style*="text-align: right"]:after, + +.article-header-style-1 article h2[style*="text-align:right"]:after, + +.article-header-style-1 article h2[class*="text-align-right"]:after, + +.article-header-style-1 article h3.text-right:after, + +.article-header-style-1 article h3[style*="text-align: right"]:after, + +.article-header-style-1 article h3[style*="text-align:right"]:after, + +.article-header-style-1 article h3[class*="text-align-right"]:after { + + left: unset; + + right: -2px; + +} + +.article-header-style-2 article h1:before, + +.article-header-style-2 article h2:before, + +.article-header-style-2 article h3:before { + + content: ""; + + display: inline-block; + + background: var(--themecolor); + + opacity: 1; + + pointer-events: none; + + border-radius: 15px; + + width: 6px; + + vertical-align: middle; + + margin-right: 15px; + +} + +.article-header-style-2 article h1:before { + + height: 25px; + + transform: translateY(-1px); + +} + +.article-header-style-2 article h2:before { + + height: 20px; + + transform: translateY(-2px); + +} + +.article-header-style-2 article h3:before { + + height: 16px; + + transform: translateY(-1px); + +} + +.no-results header h1:after { + + display: none !important; + +} + +/*卡片圆角*/ + +.card { + + border-radius: var(--card-radius); + +} + +/*主题色适配*/ + +.text-primary { + + color: var(--themecolor) !important; + +} + +a, + +.btn-neutral { + + color: var(--themecolor); + +} + +a:hover { + + color: var(--themecolor-dark); + +} + +a.text-primary:focus, + +a.text-primary:hover { + + color: var(--themecolor) !important; + +} + +.btn-primary.disabled, +.btn-primary:disabled { + border-color: var(--themecolor) !important; + background-color: var(--themecolor) !important; + color: #fff !important; +} + +.custom-toggle input:checked+.custom-toggle-slider { + border-color: var(--themecolor); +} + +.custom-toggle input:checked+.custom-toggle-slider:before { + background-color: var(--themecolor); +} + +.btn-primary { + border-color: var(--themecolor) !important; + background-color: var(--themecolor) !important; + color: #fff !important; +} + +.btn-primary:hover { + border-color: var(--themecolor-dark) !important; + background-color: var(--themecolor-dark) !important; + color: #fff !important; +} + +.btn-primary.focus, +.btn-primary:focus { + border-color: var(--themecolor) !important; + background-color: var(--themecolor) !important; + box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.5) !important; + color: #fff !important; +} + +.btn-primary:not(:disabled):not(.disabled).active, +.btn-primary:not(:disabled):not(.disabled):active, +.show>.btn-primary.dropdown-toggle { + border-color: var(--themecolor-dark2) !important; + background-color: var(--themecolor-dark2) !important; + color: #fff !important; +} + +.btn-primary:not(:disabled):not(.disabled).active:focus, +.btn-primary:not(:disabled):not(.disabled):active:focus, +.show>.btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.5) !important; +} + +.btn-outline-primary { + border-color: var(--themecolor) !important; + color: var(--themecolor) !important; + background-color: transparent !important; +} + +.btn-outline-primary:hover { + border-color: var(--themecolor) !important; + background-color: var(--themecolor) !important; + color: #fff !important; +} + +.btn-outline-primary.focus, +.btn-outline-primary:focus { + box-shadow: 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.5) !important; +} + +.btn-outline-primary.disabled, +.btn-outline-primary:disabled { + color: var(--themecolor) !important; + background-color: transparent !important; +} + +.btn-outline-primary:not(:disabled):not(.disabled).active, +.btn-outline-primary:not(:disabled):not(.disabled):active, +.show>.btn-outline-primary.dropdown-toggle { + border-color: var(--themecolor) !important; + background-color: var(--themecolor) !important; + color: #fff !important; +} + +.btn-primary:active, +.btn-outline-primary:active { + border-color: var(--themecolor-dark2) !important; + background-color: var(--themecolor-dark2) !important; +} + +/* 链接按钮和中性按钮主题色覆盖 */ +.btn-link { + color: var(--themecolor) !important; +} + +.btn-link:hover { + color: var(--themecolor-dark) !important; +} + +.btn-neutral { + color: var(--themecolor) !important; +} + +.btn-neutral:hover { + color: var(--themecolor-dark) !important; +} + +.page-item.active .page-link, + +.custom-checkbox .custom-control-input:checked~.custom-control-label::before, + +.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before, + +.custom-control-input:not(:disabled):active~.custom-control-label::before { + + border-color: var(--themecolor) !important; + + background-color: var(--themecolor); + +} + +/*页面框架*/ + +#content { + + padding: 0 5px; + + max-width: 1200px; + + margin: auto; + + margin-top: -30vh; + +} + +html.no-banner #content { + + margin-top: 85px; + +} + +html.banner-mini #content, + +html.is-home.banner-as-cover #content { + + margin-top: unset; + +} + +@media screen and (min-width: 1700px) { + + #content { + + max-width: 1500px; + + } + +} + +@media screen and (max-width: 900px) { + + html.no-banner #content { + + margin-top: 60px; + + } + +} + +#primary { + + width: calc(100% - 280px); + + float: right; + +} + +#leftbar { + + padding-left: 20px; + + padding-right: 20px; + + width: 280px; + + float: left; + + margin-bottom: 25px; + +} + +#main { + + padding: 0 20px; + + overflow: visible; + + position: relative; + +} + +#main.waterflow { + + padding: 0; + +} + +.waterflow-placeholder { + + pointer-events: none; + +} + + + +/*双栏反转布局*/ + +html.double-column-reverse #leftbar { + + float: right; + +} + +html.double-column-reverse #primary { + + float: left; + +} + +/*单栏布局*/ + +html.single-column #leftbar { + + display: none; + +} + +/* 单栏布局 - 移动端侧边栏支持 */ +@media screen and (max-width: 900px) { + html.single-column #leftbar { + display: block; + position: fixed; + background: var(--color-foreground); + top: 0; + left: -300px; + height: 100%; + padding: 0; + overflow: auto; + z-index: 1002; + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important; + transition: all 0.3s ease; + } + + html.single-column.leftbar-opened #leftbar { + left: 0px; + } + + html.single-column #fabtn_open_sidebar { + display: block !important; + } + + html.single-column #open_sidebar { + visibility: visible !important; + } +} + +html.single-column #primary { + + width: 100%; + + float: none; + + max-width: 1200px; + + margin: auto; + +} + +html.single-column #primary.waterflow { + + max-width: 1500px; + +} + +html.single-column #main { + + padding: 0; + +} + +/* 单栏布局 - 桌面端隐藏侧边栏按钮 */ +@media screen and (min-width: 901px) { + html.single-column #fabtn_open_sidebar { + display: none !important; + } +} + +html.single-column .page-information-card { + + width: 100%; + + max-width: 1200px; + + margin-left: auto; + + margin-right: auto; + +} + +/* 单栏布局 - 桌面端隐藏顶栏侧边栏按钮 */ +@media screen and (min-width: 901px) { + html.single-column #open_sidebar { + visibility: hidden; + } +} + +/*三栏布局*/ + +#rightbar { + + padding-left: 0; + + padding-right: 0; + + width: 280px; + + float: right; + + margin-bottom: 25px; + +} + +#rightbar>.card { + + margin-left: 10px; + + margin-right: 20px; + + margin-bottom: 15px; + + padding: 20px 25px; + +} + +#rightbar>.card ul { + + list-style: none; + + padding-inline-start: 0; + +} + +#rightbar>.card ul li { + + margin-bottom: 5px; + +} + +#rightbar>.card>h6 { + + margin-bottom: 15px; + +} + +@media screen and (min-width: 1100px) { + + html.triple-column #leftbar { + + padding-right: 10px; + + } + + html.triple-column #leftbar_part2.sticky { + + width: 250px; + + } + + html.triple-column #primary { + + width: calc(100% - 560px); + + float: left; + + } + +} + +html.triple-column #content { + + max-width: 1500px; + +} + +@media screen and (min-width: 1700px) { + + html.triple-column #content { + + max-width: 1600px; + + } + +} + +@media screen and (max-width: 1100px) { + + #rightbar { + + display: none; + + } + +} + + + +/*Pjax加载动画 & 卡片动画*/ + +@keyframes card-show { + + 0% { + + opacity: 0; + + transform: scale(0.95) translateY(8px); + + } + + 100% { + + opacity: 1; + + transform: none; + + } + +} + +#primary { + + transition: all var(--animation-normal) var(--ease-standard); + +} + +.card { + + animation: card-show var(--animation-normal) var(--ease-emphasized-decelerate); + + transform-origin: center top; + +} + +.card .card { + + animation: none; + +} + +/*顶栏�?Banner 部分*/ + +#navbar-main { + + --toolbar-color: var(--themecolor-rgbstr); + +} + +.headroom--pinned { + + z-index: 100; + +} + +html.darkmode #navbar-main { + + --toolbar-color: var(--color-darkmode-toolbar); + +} + +@media (min-width: 1700px) { + + .navbar-main .container { + + max-width: 1500px !important; + + } + +} + +@media (min-width: 1200px) and (max-width: 1700px) { + + .navbar-main .container { + + max-width: 1200px !important; + + } + +} + +@media (min-width: 900px) { + + .navbar-main .container { + + max-width: 100%; + + } + +} + +.dropdown-menu .dropdown-item { + + line-height: 1.5; + +} + +.dropdown-item:focus, + +.dropdown-item:hover { + + background: var(--color-border-on-foreground); + +} + +.dropdown-item:active { + + background: var(--themecolor); + +} + +.navbar-brand { + + text-transform: none; + + vertical-align: middle; + +} + +.navbar-brand:focus, + +.navbar-brand:hover { + + color: #fff !important; + +} + +.navbar-brand.navbar-icon-mobile { + + display: none; + +} + +#navbar-main { + + transition: background 0s, padding 0.15s ease; + + background-color: var(--toolbar-color) !important; + + padding-top: 0.5rem; + + padding-bottom: 0.5rem; + + transition: all var(--animation-normal) var(--ease-standard); + +} + +#navbar-main.navbar-ontop { + + padding-top: 1rem; + + padding-bottom: 1rem; + +} + +body.leftbar-can-headroom.headroom---unpinned #navbar-main { + + transform: translateY(-100%); + +} + + + +#navbar_search_input_container:not(.open) { + + cursor: pointer; + +} + +#navbar_search_input_container .input-group { + + box-shadow: none; + + border-radius: 20px; + + overflow: hidden; + + transition: all var(--animation-normal) var(--ease-standard); + +} + +#navbar_search_input_container:not(.open) .input-group { + + background: transparent; + +} + +#navbar_search_input_container:not(.open) .input-group:hover { + + background: rgba(255, 255, 255, 0.15); + +} + +#navbar_search_input_container.open .input-group { + + background: rgba(255, 255, 255, 0.2); + + -webkit-backdrop-filter: blur(12px); + + backdrop-filter: blur(12px); + +} + +#navbar_search_input_container.open .input-group:hover, + +#navbar_search_input_container.open .input-group:focus-within { + + background: rgba(255, 255, 255, 0.95); + + backdrop-filter: none; + +} + +#navbar_search_input_container:not(.open) .input-group-text { + + background: transparent; + + color: #fff; + +} + +#navbar_search_input_container.open .input-group-text { + + background: transparent; + + color: #fff; + + transition: color var(--animation-normal) var(--ease-standard); + +} + +#navbar_search_input_container.open .input-group:hover .input-group-text, + +#navbar_search_input_container.open .input-group:focus-within .input-group-text { + + color: #666; + +} + +#navbar_search_input_container .input-group-text i.fa { + font-size: 16px; + line-height: 1; +} + +#navbar_search_input_container:not(.open) input.form-control { + + width: 0 !important; + + padding: 0 !important; + + background: transparent; + +} + +#navbar_search_input_container.open input.form-control { + + background: transparent; + + color: #fff; + + transition: color var(--animation-normal) var(--ease-standard); + +} + +#navbar_search_input_container.open input.form-control::placeholder { + + color: rgba(255, 255, 255, 0.7); + + transition: color var(--animation-normal) var(--ease-standard); + +} + +#navbar_search_input_container.open .input-group:hover input.form-control, + +#navbar_search_input_container.open .input-group:focus-within input.form-control { + + color: #333; + +} + +#navbar_search_input_container.open .input-group:hover input.form-control::placeholder, + +#navbar_search_input_container.open .input-group:focus-within input.form-control::placeholder { + + color: #999; + +} + +#navbar_search_input_container .input-group-prepend { + + margin-right: 0px; + +} + +#navbar_search_input_container .input-group-text { + display: flex; + align-items: center; + justify-content: center; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + transition: all var(--animation-slow) var(--ease-emphasized); +} + +#navbar_search_input_container input.form-control { + width: 200px; + padding-top: 0.625rem; + padding-bottom: 0.625rem; + line-height: 1.5; + transition: all 0.5s cubic-bezier(0.4, 0, 0, 1); +} + +#navbar_search_btn_mobile { + + display: none; + +} + +#navbar_menu_mask { + + display: none; + +} + +html.navbar-absolute #navbar-main { + + position: absolute !important; + +} + +html.navbar-absolute:not(.no-banner) #navbar-main { + + background-color: transparent; + + box-shadow: none; + +} + +html.no-banner #navbar-main { + + background-color: rgba(var(--themecolor-rgbstr), 0.82) !important; + +} + +html.no-banner.toolbar-blur #navbar-main { + + background-color: rgba(var(--themecolor-rgbstr), 0.6) !important; + + -webkit-backdrop-filter: blur(20px) saturate(130%); + + backdrop-filter: blur(20px) saturate(130%); + +} + +html.no-banner.toolbar-blur #navbar-main.navbar-no-blur { + + background-color: rgba(var(--themecolor-rgbstr), 0.85) !important; + + backdrop-filter: blur(0px); + +} + +.banner { + + margin-bottom: 25px; + + height: 71.8vh; + + overflow: hidden; + + background-position: center; + + background-repeat: no-repeat; + + background-size: cover; + +} + +.banner-container { + + height: calc(40vh - 120px) !important; + +} + +.banner-title { + + font-size: 1.8em; + + vertical-align: middle; + + position: absolute; + + top: 50%; + + transform: translateY(-50%); + + width: 100%; + + left: 0; + +} + +.banner-subtitle { + + margin-top: 10px; + + font-size: 16px; + + opacity: 0.9; + +} + +.banner-title-inner.typing-effect:after, + +.banner-subtitle.typing-effect:after { + + content: ""; + + width: 0px; + + height: 30px; + + display: inline-block; + + transform: translateX(5px) translateY(5px); + + animation: cursor-flash-effect 1s; + + animation-fill-mode: forwards; + + outline: 1px solid #fff; + + animation-iteration-count: var(--animation-cnt); + +} + +.banner-subtitle.typing-effect:after { + + height: 16px; + + transform: translateX(5px) translateY(2px); + + outline: 0.5px solid #fff; + + opacity: 0.9; + +} + +@keyframes cursor-flash-effect { + + 0% { + + opacity: 0; + + } + + 15% { + + opacity: 1; + + } + + 50% { + + opacity: 1; + + } + + 65% { + + opacity: 0; + + } + + 100% { + + opacity: 0; + + } + +} + +html.no-banner .banner { + + display: none; + +} + +html.banner-mini .banner { + + height: unset; + +} + +html.banner-mini .banner>.banner-container { + + height: unset !important; + +} + +html.banner-mini .banner>.banner-container>.banner-title { + + position: unset; + + top: unset; + + transform: unset; + +} + +html.is-home.banner-as-cover.banner-as-cover .banner { + + height: 100vh; + +} + +html.is-home.banner-as-cover.banner-as-cover .banner-container { + + height: 100% !important; + +} + +.cover-scroll-down { + + display: block; + + width: max-content; + + color: #fff; + + position: absolute; + + left: 50%; + + bottom: 10px; + + transform: translateX(-50%); + + cursor: pointer; + + font-size: 36px; + + transition: opacity 0.3s ease; + +} + +html:not(.is-home) .cover-scroll-down { + + opacity: 0; + + pointer-events: none; + +} + +.cover-scroll-down.hidden { + + opacity: 0; + + pointer-events: none; + +} + + + +/* 左侧�?*/ + +.leftbar-banner { + + /*background: linear-gradient(150deg,#7795f8 15%,#6772e5 70%,#555abf 94%);*/ + + background: var(--themecolor-gradient); + + text-align: center; + + border-radius: var(--card-radius) var(--card-radius) 0 0; + +} + +.leftbar-banner-title { + + font-size: 20px; + + display: block; + +} + +.leftbar-banner-subtitle { + + margin-top: 15px; + + margin-bottom: 8px; + + font-size: 13px; + + opacity: 0.8; + + display: block; + +} + + + +.leftbar-menu { + + margin-top: 10px; + + margin-left: 0; + + margin-right: 0; + + padding: 0; + +} + +.leftbar-menu-item { + + height: 36px; + + line-height: 36px; + + list-style: none; + + padding: 0; + + position: relative; + +} + +.leftbar-menu-item:hover>.leftbar-menu-subitem { + + opacity: 1; + + transform: none; + + pointer-events: unset; + +} + +.leftbar-menu-subitem { + + position: absolute; + + left: calc(100% + 8px); + + top: 0; + + background: var(--color-foreground); + + width: max-content; + + min-width: 150px; + + z-index: 1; + + height: unset; + + border-radius: 3px; + + padding: 6px 0; + + opacity: 0; + + transform: translateX(-8px); + + pointer-events: none; + + transition: all 0.3s ease; + +} + +.leftbar-menu-subitem:before { + + content: ""; + + width: 8px; + + height: calc(100% + 12px); + + display: block; + + position: absolute; + + top: 0; + + left: -8px; + +} + +#leftbar_part1_menu>.leftbar-menu-item>.leftbar-menu-subitem { + + left: calc(100% + 12px); + +} + +#leftbar_part1_menu>.leftbar-menu-item>.leftbar-menu-subitem:before { + + width: 12px; + + left: -12px; + +} + +.leftbar-menu-subitem>.leftbar-menu-item:first-child a { + + border-radius: 3px 3px 0 0; + +} + +.leftbar-menu-subitem>.leftbar-menu-item:last-child a { + + border-radius: 0 0 3px 3px; + +} + +.leftbar-menu-item>a { + + display: block; + + height: 100%; + + width: 100%; + + margin: 0; + + padding: 0 20px; + + overflow-wrap: break-word; + + word-wrap: break-word; + + background-color: transparent; + + color: #32325d !important; + + text-decoration: none; + + outline: none; + + cursor: pointer; + + font-size: 14px; + + transition: background var(--animation-fast) var(--ease-standard); + +} + +.leftbar-menu-item>a:hover, + +.leftbar-menu-item.current>a { + + background-color: var(--color-border-on-foreground); + +} + +.leftbar-menu-item>a>i { + + margin-right: 8px; + + width: 15px; + + text-align: center; + +} + +.leftbar-menu-item.leftbar-menu-item-haschildren:after { + + content: "\f0da"; + + font: normal normal normal 14px/1 FontAwesome; + + font-size: 14px; + + text-rendering: auto; + + -webkit-font-smoothing: antialiased; + + -moz-osx-font-smoothing: grayscale; + + position: absolute; + + right: 16px; + + top: 0; + + line-height: 36px; + + opacity: 0.6; + + transform: translateY(1px); + + transition: all 0.3s ease; + + pointer-events: none; + +} + + + +.leftbar-search-button { + + padding-top: 0; + + transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); + +} + +.leftbar-search-button.open { + + padding: 0 15px 18px 15px; + + margin-top: -9px; + +} + +#leftbar_search_container { + + transition: width var(--animation-normal) var(--ease-emphasized), height var(--animation-normal) var(--ease-emphasized), box-shadow var(--animation-fast) var(--ease-standard), + + transform var(--animation-fast) var(--ease-standard); + + height: 30px; + + transform: unset !important; + + text-transform: capitalize; + + background-color: var(--color-border-on-foreground-deeper); + + color: var(--color-text-deeper); + +} + +html.darkmode.amoled-dark #leftbar_search_container { + + background: #151515; + +} + +.leftbar-search-button.open #leftbar_search_container { + + height: 45px; + +} + +.leftbar-search-button:not(.open) #leftbar_search_container:focus-within { + + box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); + +} + +#leftbar_search_input { + + position: absolute; + + left: -1px; + + top: -1px; + + width: calc(100% + 2px); + + height: calc(100% + 2px); + + transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); + + opacity: 0; + + cursor: pointer; + + user-select: none; + +} + +.leftbar-search-button.open #leftbar_search_input { + + opacity: 1; + + cursor: text; + + user-select: all; + + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + +} + + + +#leftbar_part2 { + + margin-top: 10px; + + transition: all var(--animation-normal) var(--ease-standard); + +} + +#leftbar_part2.sticky { + + position: fixed; + + width: 240px; + + top: 80px; + +} + +body.leftbar-can-headroom.headroom---unpinned #leftbar_part2.sticky { + + top: 10px; + +} + +html.navbar-absolute #leftbar_part2.sticky { + + top: 10px !important; + +} + +#leftbar_part2_inner { + padding: 10px; +} + +#leftbar_part2.sticky #leftbar_part2_inner { + max-height: calc(100vh - 110px - var(--leftbar-part3-height, 0px)); +} + +/* 只有文章目录标签需要滚�?*/ +#leftbar_part2.sticky #leftbar_tab_catalog { + max-height: calc(100vh - 200px - var(--leftbar-part3-height, 0px)); + overflow-y: auto; +} + +#leftbar_tab_catalog::-webkit-scrollbar { + width: 6px; +} + +#leftbar_tab_catalog::-webkit-scrollbar-track { + background: transparent; +} + +#leftbar_tab_catalog::-webkit-scrollbar-thumb { + border-width: 1px; + background-color: rgba(0, 0, 0, 0.2); +} + +html.darkmode #leftbar_tab_catalog::-webkit-scrollbar-thumb { + border-width: 1px; + background-color: rgba(255, 255, 255, 0.2); +} + +#leftbar_tab_catalog::-webkit-scrollbar-button { + height: 5px; + pointer-events: none; +} + +.sidebar-tab-switcher { + + font-size: 13px; + + padding: 0 !important; + +} + +.sidebar-tab-switcher>a { + + padding-bottom: 5px; + + border-bottom: 1px solid transparent; + + transition: border-bottom var(--animation-fast) var(--ease-standard); + +} + +.sidebar-tab-switcher>a.active { + + border-bottom: 1px solid var(--themecolor); + +} + +html.darkmode .sidebar-tab-switcher>a.active { + + border-bottom: 1px solid var(--themecolor-light); + +} + + + +#leftbar_overview_author_image { + + width: 100px; + + height: 100px; + + margin: auto; + + background-position: center; + + background-repeat: no-repeat; + + background-size: cover; + + background-color: rgba(127, 127, 127, 0.1); + +} + +#leftbar_overview_author_name { + + margin-top: 15px; + + font-size: 18px; + +} + +#leftbar_overview_author_description { + + font-size: 14px; + + margin-top: -4px; + + opacity: 0.8; + +} + +.site-state { + + overflow: hidden; + + line-height: 1.4; + + white-space: nowrap; + + text-align: center; + + margin-top: 15px; + +} + +.site-state-item { + + display: inline-block; + + border-left: 1px solid var(--color-border-on-foreground-deeper); + + padding: 0 10px; + +} + +.site-state-item:first-child { + + border-left: none !important; + +} + +.site-state-item>a { + + cursor: pointer; + +} + +.site-state-item-count { + + display: block; + + text-align: center; + + color: #32325d; + + font-weight: bold; + + font-size: 16px; + +} + +.site-state-item-name { + + font-size: 13px; + + color: #525f82; + +} + +.tag.badge { + + font-size: 14px; + + text-transform: none; + + transition: background var(--animation-fast) var(--ease-standard); + + background: var(--color-border-on-foreground); + + border: 1px solid var(--color-border-on-foreground-deeper); + + padding: 5px 10px; + + margin-right: 12px; + + margin-bottom: 15px; + +} + +.tag.badge:hover { + + background: var(--color-border-on-foreground-deeper); + +} + +.tag-num { + + font-size: 12px; + + opacity: 0.7; + +} + +.site-author-links { + + display: flex; + + flex-wrap: wrap; + + justify-content: left; + + margin-top: 15px; + +} + +.site-author-links-item { + + display: inline-block; + + width: 50%; + + border-radius: 4px; + + margin-top: 5px; + + transition: background var(--animation-fast) var(--ease-standard); + + background: transparent; + +} + +.site-author-links-item:hover { + + background: var(--color-border-on-foreground); + +} + +.site-author-links-item>a { + + display: block; + + width: 100%; + + padding: 2px 8px; + + font-size: 15px; + + color: #32325d !important; + + text-align: left; + + overflow: hidden; + + white-space: nowrap; + + text-overflow: ellipsis; + +} + +.site-friend-links-title { + + margin-top: 25px; + + border-top: 1px dotted var(--color-border-on-foreground-deeper); + + padding-top: 15px; + +} + +.site-friend-links-ul { + + margin-top: 8px; + + padding: 3px 0 0; + +} + +.site-friend-links-item { + + margin: 0; + + padding: 0; + + list-style: none; + + margin-bottom: 3px; + +} + +.site-friend-links-item>a { + + max-width: 280px; + + box-sizing: border-box; + + display: inline-block; + + max-width: 100%; + + overflow: hidden; + + white-space: nowrap; + + text-overflow: ellipsis; + + color: #32325d; + + border-bottom: 1px solid #999; + +} + +#leftbar_announcement { + + margin-bottom: 10px; + + background: var(--themecolor-gradient); + +} + +html.darkmode #leftbar_announcement { + + background: var(--color-foreground); + +} + +.leftbar-announcement-body { + + padding: 15px 1.2em; + + padding-bottom: 22px; + +} + +.leftbar-announcement-title { + + font-size: 18px; + +} + +.leftbar-announcement-content { + + font-size: 15px; + + line-height: 1.8; + + padding-top: 8px; + + opacity: 0.9; + +} + +#leftbar_tab_tools ul, + +#leftbar_tab_tools ol { + + list-style: none; + + padding: 0; + +} + +#leftbar_tab_tools ul li { + + padding-top: 10px; + + padding-bottom: 10px; + + border-bottom: var(--color-border-on-foreground) solid 1px; + +} + +#leftbar_tab_tools ul li:first-child { + + padding-top: 5px; + +} + +#leftbar_tab_tools>div>h6:first-child, + +#leftbar_tab_tools .wp-block-group__inner-container>h6:first-child { + + font-size: 17px; + + font-weight: 600; + + position: relative; + + display: block; + + width: max-content; + +} + +#leftbar_tab_tools>div>h6:first-child:after, + +#leftbar_tab_tools .wp-block-group__inner-container>h6:first-child:after { + + content: ""; + + display: block; + + background: var(--themecolor); + + width: 30px; + + height: 9px; + + position: absolute; + + left: 0; + + bottom: -1px; + + border-radius: 10px; + + opacity: 0.25; + + pointer-events: none; + +} + +.wp-calendar-table caption { + + font-size: 14px; + + text-align: center; + + opacity: 0.7; + +} + +.wp-block-calendar table * { + + background: transparent !important; + + border: none !important; + + padding-top: 5px; + + padding-bottom: 8px; + +} + +.wp-block-calendar table th { + + opacity: 0.6; + +} + +.wp-block-calendar tbody td a { + + position: relative; + + text-decoration: none; + +} + +.wp-block-calendar tbody td a:before { + + content: ""; + + display: block; + + background: var(--themecolor); + + position: absolute; + + width: 25px; + + height: 25px; + + border-radius: 20px; + + opacity: 0.2; + + transform: translateX(-2px); + + z-index: 0; + +} + +.wp-calendar-nav-prev a, + +.wp-calendar-nav-next a { + + text-decoration: none !important; + + border: 1px solid var(--themecolor); + + color: var(--themecolor); + + padding: 1px 8px; + + border-radius: 19px; + + font-size: 14px; + + transition: all var(--animation-normal) var(--ease-standard); + + user-select: none; + +} + +.wp-calendar-nav-prev a:hover, + +.wp-calendar-nav-next a:hover { + + background-color: var(--themecolor); + + color: #fff !important; + + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; + +} + +.wp-calendar-nav { + + padding-bottom: 12px; + + display: flex; + + flex-direction: row; + + flex-wrap: nowrap; + + justify-content: center; + + align-items: center; + + align-content: center; + +} + +html.darkmode .wp-calendar-table caption, + +html.darkmode .wp-block-calendar tbody td { + + color: #eee; + +} + +/*底栏*/ + +#footer { + + background: var(--themecolor-gradient); + + color: #fff; + + width: 100%; + + float: right; + + margin-bottom: 25px; + + text-align: center; + + padding: 3px 20px 20px; + + line-height: 1.8; + + transition: none; + + user-select: none; + + -webkit-user-select: none; + + -moz-user-select: none; + + -ms-user-select: none; + +} + +#footer a { + + color: #fff; + +} + + + +/* ======================================== + 浮动按钮组件 (Float Action Buttons) + ======================================== */ + +/* 容器样式 */ +#float_action_buttons { + position: fixed; + bottom: 35px; + right: 20px; + z-index: 1000; + display: flex; + flex-direction: column; + align-items: center; + transition: + opacity var(--animation-normal) var(--ease-standard), + transform var(--animation-normal) var(--ease-standard); +} + +#float_action_buttons.fabtns-float-left { + left: 20px; + right: auto; +} + +#float_action_buttons.fabtns-float-left .fabtn-show-on-right { + display: none; +} + +#float_action_buttons:not(.fabtns-float-left) .fabtn-show-on-left { + display: none; +} + +/* 首页横幅模式下隐�?*/ +html.is-home.banner-as-cover #float_action_buttons.hidden { + opacity: 0; + pointer-events: none; +} + +/* 加载状�?- 初始隐藏 */ +.fabtns-unloaded { + opacity: 0; + pointer-events: none; + transition: opacity var(--animation-normal) var(--ease-standard); +} + +/* 基础按钮样式 - 重置所�?Bootstrap 样式 */ +#float_action_buttons .fabtn, +#float_action_buttons .fabtn.btn, +#float_action_buttons .fabtn.btn-icon, +#float_action_buttons .fabtn.btn-neutral, +#float_action_buttons button.fabtn { + width: 44px !important; + height: 44px !important; + min-width: 44px !important; + min-height: 44px !important; + max-width: 44px !important; + max-height: 44px !important; + padding: 0 !important; + margin: 5px 0 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + position: relative; + overflow: visible; + border: none !important; + border-radius: var(--card-radius) !important; + background-color: var(--color-foreground) !important; + color: var(--themecolor) !important; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.08), + 0 4px 16px rgba(0, 0, 0, 0.04); + cursor: pointer; + transition: + background-color var(--animation-fast) var(--ease-standard), + color var(--animation-fast) var(--ease-standard), + transform var(--animation-normal) var(--ease-spring), + box-shadow var(--animation-normal) var(--ease-standard), + opacity var(--animation-fast) var(--ease-standard); +} + +#float_action_buttons .fabtn:first-child { + margin-top: 0 !important; +} + +#float_action_buttons .fabtn:hover { + color: #fff !important; + background-color: var(--themecolor) !important; + transform: translateY(-3px) scale(1.05); + box-shadow: + 0 6px 20px rgba(var(--themecolor-rgbstr), 0.35), + 0 12px 28px rgba(var(--themecolor-rgbstr), 0.2) !important; +} + +#float_action_buttons .fabtn:active { + color: #fff !important; + background-color: var(--themecolor-dark) !important; + transform: translateY(-1px) scale(0.98); + box-shadow: + 0 2px 8px rgba(var(--themecolor-rgbstr), 0.25) !important; +} + +/* 按钮内图标居�?*/ +#float_action_buttons .fabtn .btn-inner--icon { + display: flex !important; + align-items: center !important; + justify-content: center !important; + width: 100%; + height: 100%; +} + +#float_action_buttons .fabtn i { + font-size: 16px; + line-height: 1; +} + +/* 隐藏状�?*/ +#float_action_buttons .fabtn.fabtn-hidden { + width: 0 !important; + height: 0 !important; + min-width: 0 !important; + min-height: 0 !important; + max-width: 0 !important; + max-height: 0 !important; + opacity: 0 !important; + margin: 0 !important; + padding: 0 !important; + box-shadow: none !important; + pointer-events: none !important; + transform: scale(0) !important; + overflow: hidden !important; +} + +/* 左右切换按钮 - 尺寸较小 */ +#float_action_buttons #fabtn_toggle_sides, +#float_action_buttons #fabtn_toggle_sides.btn { + width: 32px !important; + height: 32px !important; + min-width: 32px !important; + min-height: 32px !important; + max-width: 32px !important; + max-height: 32px !important; + border-radius: var(--card-radius) !important; + opacity: 0.6; + font-size: 11px; +} + +#float_action_buttons #fabtn_toggle_sides:hover { + opacity: 1; +} + +/* 阅读进度按钮 */ +#float_action_buttons #fabtn_reading_progress { + overflow: visible; + font-size: 11px; + font-weight: 600; +} + +#float_action_buttons #fabtn_reading_progress_bar { + position: absolute; + left: 0; + top: 0; + width: 0; + height: 100%; + border-radius: var(--card-radius); + background: var(--themecolor); + opacity: 0.12; + transition: width var(--animation-fast) var(--ease-standard); + pointer-events: none; +} + +#float_action_buttons #fabtn_reading_progress_details { + position: relative; + z-index: 1; +} + +/* 夜间模式按钮图标切换 */ +#float_action_buttons #fabtn_toggle_darkmode i.fa { + margin: 0; +} + +#float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { + display: none; +} + +html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-moon-o { + display: none; +} + +html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { + display: inline-block; +} + +/* 侧边栏打开按钮（移动端�?*/ +#float_action_buttons #fabtn_open_sidebar { + display: none; +} + +/* 侧边栏遮�?*/ +#sidebar_mask { + display: none; + opacity: 0; +} + +/* 设置弹窗 */ +#fabtn_blog_settings_popup { + position: fixed; + right: 85px; + bottom: 35px; + padding: 20px 24px; + width: max-content; + width: -moz-max-content; + min-width: 350px; + max-width: calc(100vw - 170px); + max-height: calc(100vh - 70px); + opacity: 0; + pointer-events: none; + transform: translateX(12px) scale(0.96); + transition: + opacity var(--animation-normal) var(--ease-emphasized), + transform var(--animation-normal) var(--ease-emphasized); + animation: none !important; + border-radius: 20px; + background: var(--color-foreground); + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.15), + 0 4px 12px rgba(0, 0, 0, 0.08); + + -webkit-backdrop-filter: blur(24px) saturate(180%); + + backdrop-filter: blur(24px) saturate(180%); + overflow-y: auto; +} + +#float_action_buttons.fabtns-float-left #fabtn_blog_settings_popup { + left: 85px; + right: unset; + transform: translateX(-12px) scale(0.96); +} + +/* 设置弹窗打开状�?*/ +.blog_settings_opened #fabtn_blog_settings_popup { + opacity: 1 !important; + transform: none !important; + pointer-events: auto !important; +} + +.blog_settings_opened #fabtn_toggle_blog_settings_popup { + opacity: 1 !important; + color: #fff !important; + background-color: var(--themecolor) !important; + pointer-events: auto !important; + transform: scale(1.05); +} + +.blog_settings_opened .fabtn { + pointer-events: none; + opacity: 0.3; +} + +.blog_settings_opened #fabtn_toggle_sides { + opacity: 0 !important; +} + +#close_blog_settings { + text-align: right; + font-size: 12px; + margin-right: -12px; + cursor: pointer; + opacity: 0.6; + transition: opacity var(--animation-fast) var(--ease-standard); +} + +#close_blog_settings:hover { + opacity: 1; +} + +/* 暗色模式浮动按钮 */ +html.darkmode .fabtn { + color: #ddd; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + 0 4px 16px rgba(0, 0, 0, 0.15); +} + +html.darkmode .fabtn:hover { + color: #fff !important; + background-color: var(--themecolor) !important; + box-shadow: + 0 6px 20px rgba(var(--themecolor-rgbstr), 0.4), + 0 12px 28px rgba(0, 0, 0, 0.3) !important; +} + +html.darkmode #fabtn_blog_settings_popup { + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.4), + 0 4px 12px rgba(0, 0, 0, 0.25); +} + +.blog-setting-item { + display: flex; + flex-flow: row; + align-items: center; + padding: 10px 0; +} + +/* 设置面板标题样式 */ +.blog-setting-item>div:first-child { + font-weight: 500; + color: var(--color-text-deeper); +} + +#blog_setting_toggle_darkmode_and_amoledarkmode { + + cursor: pointer; + +} + +html:not(.amoled-dark) #blog_setting_toggle_darkmode_and_amoledarkmode span:nth-of-type(2) { + + display: none; + +} + +html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode span:first-of-type { + + display: none; + +} + +#blog_setting_toggle_darkmode_and_amoledarkmode:before { + + content: attr(tooltip-switch-to-blackmode); + + position: absolute; + + top: -32px; + + left: 50%; + + line-height: 22px; + + font-weight: normal; + + color: #fff; + + background: #32325d; + + padding: 3px 10px; + + font-size: 12px; + + border-radius: 3px; + + transition: all 0.3s ease; + + transform: translateX(-50%) translateY(5px); + + opacity: 0; + + width: max-content; + + width: -moz-max-content; + + pointer-events: none; + +} + +html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { + + content: attr(tooltip-switch-to-darkmode); + +} + +#blog_setting_toggle_darkmode_and_amoledarkmode:hover:before { + + transform: translateX(-50%); + + opacity: 0.7; + +} + +.blog-setting-font, + +.blog-setting-shadow { + + text-transform: none; + + padding: 3px 10px; + +} + +.blog-setting-font:hover, + +.blog-setting-shadow:hover { + + color: #fff + /*var(--themecolor)*/ + ; + + /*background-color: transparent !important;*/ + +} + +/* 设置面板分段选择器优�?*/ +.blog-setting-selector-left { + + margin-right: 0 !important; + + border-top-right-radius: 0; + + border-bottom-right-radius: 0; + + transform: none !important; + + border-radius: 8px 0 0 8px; + + padding: 8px 14px; + + font-size: 13px; + + font-weight: 500; + + transition: all var(--animation-fast) var(--ease-standard); + +} + +.blog-setting-selector-right { + + border-top-left-radius: 0; + + border-bottom-left-radius: 0; + + margin-left: 0 !important; + + transform: none !important; + + border-left: 0; + + border-radius: 0 8px 8px 0; + + padding: 8px 14px; + + font-size: 13px; + + font-weight: 500; + + transition: all var(--animation-fast) var(--ease-standard); + +} + +html:not(.use-serif) #blog_setting_font_sans_serif { + + color: #fff; + + background: var(--themecolor); + + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); + +} + +html.use-serif #blog_setting_font_serif { + + color: #fff; + + background: var(--themecolor); + + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); + +} + +html:not(.use-big-shadow) #blog_setting_shadow_small { + + color: #fff; + + background: var(--themecolor); + + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); + +} + +html.use-big-shadow #blog_setting_shadow_big { + + color: #fff; + + background: var(--themecolor); + + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); + +} + +.blog-setting-filter-btn { + + border-radius: 12px; + + outline: none !important; + + border: 2px solid transparent; + + height: 44px; + + width: 44px; + + margin-left: 6px; + + cursor: pointer; + + font-size: 12px; + + font-weight: 500; + + transition: all var(--animation-fast) var(--ease-standard); + +} + +.blog-setting-filter-btn:hover { + + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); + + transform: translateY(-2px); + +} + +#blog_setting_filter_off { + + background: rgba(var(--themecolor-rgbstr), 0.05); + + color: var(--themecolor); + +} + +#blog_setting_filter_sunset { + + background: rgba(255, 255, 200, 1); + + color: #6e5a00; + +} + +#blog_setting_filter_darkness { + + background: rgba(80, 80, 80, 0.7); + + color: #eee; + +} + +#blog_setting_filter_grayscale { + + background: rgba(200, 200, 200, 0.8); + + color: #333; + +} + +#blog_setting_filter_off.active { + + border: 1px solid var(--themecolor); + +} + +#blog_setting_filter_sunset.active { + + border: 1px solid #6e5a00; + +} + +#blog_setting_filter_darkness.active { + + border: 1px solid #111; + +} + +#blog_setting_filter_grayscale.active { + + border: 1px solid #333; + +} + +/* 风格选择按钮 */ +.blog-setting-style-btn { + border-radius: 8px; + outline: none !important; + border: 1px solid transparent; + height: 36px; + padding: 0 12px; + margin-left: 5px; + cursor: pointer; + font-size: 13px; + font-weight: 500; + transition: all var(--animation-fast) var(--ease-standard); + background: rgba(var(--themecolor-rgbstr), 0.08); + color: var(--themecolor); +} + +.blog-setting-style-btn:hover { + background: rgba(var(--themecolor-rgbstr), 0.15); + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.15); +} + +.blog-setting-style-btn.active { + background: var(--themecolor); + color: #fff; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); +} + +html.darkmode .blog-setting-style-btn { + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.9); +} + +html.darkmode .blog-setting-style-btn:hover { + background: rgba(255, 255, 255, 0.15); +} + +html.darkmode .blog-setting-style-btn.active { + background: var(--themecolor); + color: #fff; +} + +html.filter-sunset { + + filter: sepia(30%); + +} + +html.filter-darkness #primary:after { + + content: ""; + + position: fixed; + + left: 0; + + top: 0; + + right: 0; + + bottom: 0; + + height: 100vh; + + width: 100vw; + + background: rgba(0, 0, 0, 0.4); + + z-index: 999999999; + + pointer-events: none; + +} + +html.filter-grayscale { + + filter: grayscale(1); + +} + +#blog_setting_card_radius_to_default { + + position: relative; + +} + +#blog_setting_card_radius_to_default:before { + + content: attr(tooltip); + + position: absolute; + + top: -30px; + + left: 50%; + + line-height: 15px; + + font-weight: normal; + + color: #fff; + + background: #32325d; + + padding: 3px 10px; + + font-size: 12px; + + border-radius: 3px; + + transition: all 0.3s ease; + + transform: translateX(-50%) translateY(5px); + + opacity: 0; + + width: max-content; + + width: -moz-max-content; + + pointer-events: none; + +} + +#blog_setting_card_radius_to_default:hover:before { + + transform: translateX(-50%); + + opacity: 0.7; + +} + +/*页码*/ + +.pagination { + + width: max-content; + + width: -moz-max-content; + + padding-top: 15px; + + padding-bottom: 15px; + + margin: auto; + + margin-bottom: 25px; + +} + +.pagination.pagination-mobile { + + display: none; + +} + +.page-link { + + transition: background-color var(--animation-fast) var(--ease-standard); + +} + + + +/*文章*/ + +.post { + + margin-bottom: 25px; + + padding: 30px 30px; + + padding-bottom: 35px; + +} + +.post-preview { + + transition: all var(--animation-slow) var(--ease-emphasized); + +} + +.post-title { + + font-size: 26px; + + letter-spacing: 0.5px; + + transition: all var(--animation-normal) var(--ease-standard); + +} + +.post-title:hover { + + letter-spacing: 1px; + +} + +#main.waterflow .post-title { + + transition: all var(--animation-normal) var(--ease-standard); + + display: inline-block; + +} + +#main.waterflow .post-title:hover { + + letter-spacing: 0.5px; + + transform: scale(1.02); + + text-rendering: optimizeLegibility; + +} + +.post-header { + + margin-bottom: 12px; + +} + +.post-meta { + + margin-top: 6px; + + display: flex; + + flex-wrap: wrap; + + align-items: center; + + justify-content: center; + + gap: 6px; + +} + +.post-meta-detail { + + font-size: 14.5px; + + line-height: 24px; + + opacity: 0.8; + + display: inline-block; + + white-space: nowrap; + +} + +.post-meta-detail i { + + margin-right: 3px; + +} + +.post-meta-devide { + + display: inline-block; + + font-size: 14.5px; + + line-height: 24px; + + opacity: 0.5; + + user-select: none; + +} + +.post-meta-detail-categories-space { + + margin-left: 2px; + + margin-right: 2px; + +} + +.post-header.post-header-with-thumbnail { + + margin: -30px -30px 35px -30px; + + border-radius: var(--card-radius) var(--card-radius) 0 0; + + overflow: hidden; + + position: relative; + +} + +.post-thumbnail { + + width: 100%; + + min-height: 250px; + + max-height: 25vh; + + object-fit: cover; + + pointer-events: none; + +} + +/* 图片加载过渡效果 */ +.post-thumbnail { + transition: opacity 0.3s ease 0s; +} + +.single .post-thumbnail, + +.page .post-thumbnail { + + max-height: 30vh; + + min-height: 250px; + +} + +.post-header.post-header-with-thumbnail .post-header-text-container { + + position: absolute; + + bottom: 0; + + left: 0; + + width: 100%; + + color: #fff; + + opacity: 0.9; + + padding-bottom: 35px; + + padding-top: 35px; + + background: rgba(0, 0, 0, 0.05); + + background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0)); + +} + +.post-header.post-header-with-thumbnail .post-header-text-container .post-title { + + color: rgba(255, 255, 255, 0.95) !important; + + /*text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);*/ + + filter: drop-shadow(0px 1px 5px #0005); + +} + +.post-header.post-header-with-thumbnail .post-header-text-container .post-meta { + + text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); + +} + +.post-outdated-info { + + color: var(--themecolor); + + border-left: 2px solid var(--themecolor); + + padding: 5px 20px; + + margin-top: 10px; + + margin-bottom: 25px; + + background: rgba(var(--themecolor-rgbstr), 0.1); + +} + +.post-outdated-info>i { + + font-size: 20px; + + margin-right: 15px; + + transform: translateY(2px); + +} + +.post-header-with-thumbnail+.post-content>.post-outdated-info { + + margin-top: -15px; + +} + +.post-content { + + line-height: 1.8; + + margin-bottom: 8px; + +} + +.post-content p { + + font-weight: normal; + +} + +.post-tags { + + margin-top: 10px; + + margin-bottom: -4px; + +} + +.post-tags>i { + + margin-right: 5px; + +} + +.tag.post-meta-detail-tag { + + margin-bottom: 4px; + + margin-right: 7px; + + font-size: 12px; + +} + +.additional-content-after-post+.post-tags { + + margin-top: 12px; + +} + +/* 文章预览样式 2 */ + +article.post-preview-layout-2 { + + display: flex; + + flex-direction: row; + + padding: 0; + + min-height: 200px; + + overflow: visible; + +} + +article.post-preview-layout-2 .post-header.post-header-with-thumbnail { + + margin: 0; + + border-radius: var(--card-radius) 0 0 var(--card-radius); + + text-align: left; + + width: 300px; + + height: 200px; + + flex-shrink: 0; + + overflow: hidden; + +} + +article.post-preview-layout-2 .post-thumbnail { + + width: 100%; + + height: 200px !important; + + max-height: 200px !important; + + object-fit: cover; + + object-position: center center; + +} + +article.post-preview-layout-2 .post-content-container { + + padding: 20px 28px; + + flex: 1; + + display: flex; + + flex-direction: column; + + max-width: 100%; + + overflow: hidden; + +} + +article.post-preview-layout-2 .post-content { + + flex: 1; + + margin-top: 10px; + + display: -webkit-box; + + -webkit-line-clamp: 3; + + -webkit-box-orient: vertical; + + overflow: hidden; + +} + +article.post-preview-layout-2 .post-title { + max-width: max-content; +} + +article.post-preview-layout-2 .post-meta { + justify-content: flex-start; +} + +/* 文章预览样式 3 */ + +article.post-preview-layout-3 .post-header { + + margin-bottom: 10px; + +} + +article.post-preview-layout-3 .post-header.post-header-with-thumbnail { + + margin-bottom: 25px; + +} + +article.post-preview-layout-3 .post-thumbnail { + + max-height: 20vh; + +} + +/*Reference*/ + +sup.reference { + + white-space: nowrap; + + transition: box-shadow 0.3s ease; + + border-radius: 1px; + +} + +sup.reference:focus { + + box-shadow: 0 0 0 2px var(--color-widgets), 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.3); + + outline: none; + +} + +.tippy-box[data-theme~="scroll-y"] .tippy-content { + + max-height: 200px; + + overflow-y: auto; + +} + +.tippy-box[data-theme~="light"] { + + background-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"][data-placement^="top"]>.tippy-arrow:before { + + border-top-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"][data-placement^="bottom"]>.tippy-arrow:before { + + border-bottom-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"][data-placement^="left"]>.tippy-arrow:before { + + border-left-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"][data-placement^="right"]>.tippy-arrow:before { + + border-right-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"]>.tippy-backdrop { + + background-color: var(--color-widgets); + +} + +.tippy-box[data-theme~="light"]>.tippy-svg-arrow { + + fill: var(--color-widgets); + +} + + + +html.darkmode .tippy-box[data-theme~="light"] { + + color: #eee; + + background-color: var(--color-widgets); + +} + +.reference-list { + + padding-left: 0; + + list-style: inside none; + + counter-reset: ol; + + margin-bottom: 0; + +} + +.reference-list li { + + font-size: 14px; + + position: relative; + + display: flex; + +} + +.reference-list li .space { + + pointer-events: none; + +} + +.reference-list li .space:before { + + content: ""; + + position: absolute; + + left: 0; + + right: 0; + + top: 0; + + bottom: 0; + + display: block; + + border-radius: 3px; + + transition: background 0.3s ease; + + pointer-events: none; + + background: transparent; + +} + +.reference-list li .space:focus:before { + + background: rgba(var(--themecolor-rgbstr), 0.15); + +} + +.reference-list li:before { + + text-align: right; + + counter-increment: ol; + + content: counter(ol) ". "; + + white-space: pre; + +} + +.reference-list li>div>*:first-child { + + margin-right: 5px; + +} + +.reference-list li>div>sup { + + margin-left: 1px; + +} + +.reference-list li>div>sup:last-of-type { + + margin-right: 5px; + +} + +/*文章输入密码界面*/ + +.post-password-form { + + margin-top: 45px; + + margin-bottom: 55px; + +} + +.post-password-form-text { + + margin: auto; + + margin-bottom: 15px; + +} + +.post-password-form-input { + + margin: auto; + + margin-bottom: 20px; + +} + +.post-password-hint { + + margin-top: 10px; + + color: var(--themecolor); + + opacity: 0.9; + +} + +/*侧栏文章目录*/ + +#leftbar_catalog { + margin-left: -5px; + width: calc(100% + 0px); + height: auto; +} + +#leftbar_catalog::-webkit-scrollbar { + width: 4px; +} + +#leftbar_catalog::-webkit-scrollbar-track { + background: transparent; +} + +#leftbar_catalog::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.15); + border-radius: 2px; +} + +html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.15); +} + +#leftbar_catalog ul { + padding: 0; + list-style: none; +} + +#leftbar_catalog .index-item, + +#leftbar_catalog .index-link { + + width: 100%; + + display: block; + + color: #32325d; + + text-decoration: none; + + box-sizing: border-box; + +} + +#leftbar_catalog .index-link { + + font-size: 15px; + + padding: 4px 8px 4px 8px; + + cursor: pointer; + + transition: background-color 0.3s ease, border-left-color 0.3s ease, color 0.3s ease; + + border-left: 3px solid transparent; + + word-break: break-all; + + border-radius: 3px; + +} + +#leftbar_catalog .index-item.current>.index-link { + + color: var(--themecolor); + + font-weight: bold; + +} + +#leftbar_catalog .index-link:hover { + + background-color: var(--color-border-on-foreground-deeper); + +} + +#leftbar_catalog .index-subItem-box .index-item { + + padding-left: 20px; + +} + + + +/*搜索等页面的标题卡片*/ + +.page-information-card { + + margin: 30px 20px; + + margin-top: 0px; + + background: var(--color-foreground) !important; + +} + +.search-filter-wrapper { + + display: inline-block; + + margin-right: 12px; + +} + +.search-filter-wrapper>.custom-control-label { + + line-height: 25px; + +} + + + +/*文章导航 (�?下一篇文�?*/ + +.post-navigation { + + margin-bottom: 25px; + + padding: 30px 25px; + + padding-top: 25px; + + font-size: 18px; + + display: block !important; + +} + +.post-navigation-item { + + width: calc(50%); + + display: inline-block; + + vertical-align: top; + +} + +.page-navigation-extra-text { + + font-size: 22px; + + opacity: 0.85; + + display: block; + + margin-bottom: 15px; + +} + +.post-navigation-pre .page-navigation-extra-text i { + + margin-right: 10px; + +} + +.post-navigation-next .page-navigation-extra-text i { + + margin-left: 10px; + +} + +.post-navigation-pre { + + padding-right: 10px; + +} + +.post-navigation-next { + + padding-left: 10px; + + text-align: right; + +} + +/*相关文章*/ + +.related-posts { + + display: block; + + white-space: nowrap; + + margin-bottom: 25px; + + padding: 0; + + padding-bottom: 0; + +} + +.related-post-card { + + display: inline-block; + + height: 105px; + + width: 180px; + + border-radius: 5px; + + margin-right: 10px; + + font-size: 16px; + + line-height: 27px; + + white-space: normal; + + transition: all 0.3s ease; + + position: relative; + + background: var(--themecolor-gradient); + + overflow: hidden; + +} + +.related-post-card:hover { + + filter: brightness(0.9); + + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + + border-color: transparent; + +} + +.related-post-title.clamp { + + color: white; + +} + +.related-post-card-container { + + position: absolute; + + left: 0; + + right: 0; + + top: 0; + + bottom: 0; + + padding: 10px 15px; + +} + +.related-post-card-container.has-thumbnail { + + background: rgba(0, 0, 0, 0.2); + + color: #fff; + + transition: all 0.3s ease; + +} + +.related-post-card-container.has-thumbnail:hover { + + background: rgba(0, 0, 0, 0.3); + +} + +.related-post-title { + + max-height: 81px; + + overflow: hidden; + +} + +.related-post-arrow { + + position: absolute; + + right: 15px; + + bottom: 15px; + + font-size: 15px; + + pointer-events: none; + +} + +.related-post-thumbnail { + + width: 100%; + + height: 100%; + + object-fit: cover; + +} + +i.related-post-arrow.fa.fa-chevron-right { + + color: white; + +} + +img.related-post-thumbnail { + + vertical-align: unset; + +} + +html.darkmode a.related-post-card { + + background: var(--color-border-on-foreground-deeper); + + opacity: 0.7; + + border-radius: 5px; + +} + +html.darkmode .related-post-title.clamp { + + color: var(--themecolor-light); + +} + +html.darkmode .has-thumbnail .related-post-title.clamp { + + color: #eee; + +} + +/*文章赞赏*/ + +.post-donate { + + text-align: center; + + position: relative; + +} + +.post-donate img { + + /*width: max-content; + + width: -moz-max-content;*/ + + max-width: min(30vw, 500px); + +} + +.post-donate .donate-qrcode { + + width: max-content; + + width: -moz-max-content; + + position: absolute; + + left: 50%; + + bottom: 100px; + + padding: 25px; + + z-index: 2; + + transition: all 0.3s ease; + + transform: translate(-50%, 10px) scale(0.9); + + transform-origin: bottom; + + opacity: 0; + + pointer-events: none; + + background-color: var(--color-widgets) !important; + +} + +.post-donate .donate-btn:focus~.donate-qrcode { + + transform: translateX(-50%); + + opacity: 1; + +} + +.post-donate .donate-btn { + + margin-right: 0; + + margin-top: 12px; + + margin-bottom: 12px; + +} + +.post-donate .donate-qrcode:before { + + position: absolute; + + z-index: 3; + + bottom: 0; + + left: 50%; + + display: block; + + width: 16px; + + height: 16px; + + content: ""; + + transform: translate(-50%, 8px) rotate(-45deg); + + border-radius: 0.2rem; + + background: var(--color-widgets); + + z-index: 1; + + box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.1); + +} + +/*文末附加内容*/ + +.additional-content-after-post { + + border-left: 3px solid var(--themecolor); + + padding: 15px 20px; + + background: rgba(var(--themecolor-rgbstr), 0.1); + + border-radius: 3px; + + margin-top: 8px; + +} + +/*评论�?/ + +#comments { + + margin-bottom: 25px; + +} + +/* 评论折叠功能 - Material 3 动画优化 */ +#comments, +#post_comment { + transition: + opacity var(--animation-normal) var(--ease-standard), + max-height var(--animation-slow) var(--ease-emphasized), + margin var(--animation-slow) var(--ease-standard), + padding var(--animation-slow) var(--ease-standard); + will-change: opacity, max-height; +} + +#comments.comments-collapsed, +#post_comment.comments-collapsed { + overflow: hidden; +} + +#comments.comments-collapsed { + max-height: 0 !important; + opacity: 0; + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + border: none !important; + transition-delay: 0.15s; +} + +#post_comment.comments-collapsed { + max-height: 0 !important; + opacity: 0; + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; + border: none !important; + transition-delay: 0s; +} + +#comments:not(.comments-collapsed) { + max-height: 9999px; + opacity: 1; + transition-delay: 0s; +} + +#post_comment:not(.comments-collapsed) { + max-height: 9999px; + opacity: 1; + transition-delay: 0.15s; +} + +/* 评论切换按钮图标动画 */ +#comments_toggle .btn-inner--icon i { + transition: transform var(--animation-slow) var(--ease-spring); + display: inline-block; +} + +#comments_toggle.expanded .btn-inner--icon i { + transform: rotate(360deg); +} + +#comments>.card-body { + + transition: opacity 0.5s ease; + + overflow: visible; + +} + +#comments.comments-loading>.card-body { + + opacity: 0.5; + + pointer-events: none; + +} + +#comments li { + + list-style: none; + + position: relative; + +} + +#comments .comment-item:target:before, +#comments .comment-item:before { + + content: ""; + + display: block; + + position: absolute; + + left: -10px; + + right: -10px; + + top: 0; + + bottom: 0; + + background-color: var(--themecolor); + + opacity: 0.15; + + border-radius: var(--card-radius); + + pointer-events: none; + + animation: comment-focus-breath 2s linear; + + animation-fill-mode: forwards; + +} + +#comments .comment-item:before { + + animation: none; + + opacity: 0; + + transition: opacity 0.25s ease; + +} + +#comments .comment-item.highlight:before { + + opacity: 0.2; + +} + +@keyframes comment-focus-breath { + + 0% { + + opacity: 0.5; + + } + + 33% { + + opacity: 0.05; + + } + + 66% { + + opacity: 0.3; + + } + + 100% { + + opacity: 0.15; + + } + +} + +.comments-title { + + font-size: 20px; + +} + +.comments-title i { + + margin-right: 5px; + +} + +.comment-list { + + padding: 0; + +} + +.comment-item { + + margin-bottom: 1px; + + display: flex; + + overflow: visible; + +} + +/* ---------- 评论项左侧区�?---------- */ +.comment-item-left-wrapper { + display: flex; + flex-direction: column; + align-items: center; + width: 44px; + margin-top: 20px; + margin-right: 16px; + position: relative; + min-height: 80px; + overflow: visible; + flex-shrink: 0; +} + +.comment-avatar-vertical-center .comment-item-left-wrapper { + margin: auto; + margin-right: 16px; +} + +/* ---------- 评论头像 ---------- */ +.comment-item-avatar { + position: relative; + z-index: 1; +} + +.comment-item-avatar .avatar { + height: 44px; + width: 44px; + border-radius: 50%; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: transform var(--animation-fast, 0.15s) var(--ease-standard, ease), + box-shadow var(--animation-fast, 0.15s) var(--ease-standard, ease); +} + +.comment-item:hover .comment-item-avatar .avatar { + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +html.darkmode .comment-item-avatar .avatar { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.text-avatar { + user-select: none; + display: inline-flex !important; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 16px; +} + +/* ---------- 评论项内容区�?---------- */ +.comment-item-inner { + display: block; + position: relative; + margin-top: 20px; + padding-bottom: 40px; + border-bottom: var(--color-border-on-foreground) solid 1px; + width: calc(100% - 60px); + flex: 1; + min-width: 0; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; +} + +#comments .comment-item:last-child .comment-item-inner { + border-bottom: 0; +} + +/* ---------- 评论标题区域 ---------- */ +.comment-item-title { + font-size: 15px; + display: flex; + flex-wrap: wrap; + align-items: center; + margin-bottom: 6px; + gap: 4px; +} + +.comment-item-title .badge-admin, +.comment-item-title .badge-pinned, +.comment-item-title .badge-private-comment, +.comment-item-title .badge-unapproved { + transform: translateY(-1px); + margin-left: 4px; + font-size: 11px; + padding: 2px 6px; +} + +/* ---------- 评论内容 ---------- */ +.comment-item-text { + min-height: 24px; + margin-bottom: 1rem; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + line-height: 1.7; + color: var(--color-text); +} + +.comment-item-text p:last-child { + margin-bottom: 0; +} + +/* ---------- 评论作者信�?---------- */ +.comment-name { + flex: 1; + font-weight: 600; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 4px; +} + +.comment-author { + display: inline-block; + color: var(--color-text); + transition: color var(--animation-fast, 0.15s) ease; +} + +.comment-author a { + color: inherit; + text-decoration: none; +} + +.comment-author a:hover { + color: var(--themecolor); +} + +.comment-parent-info { + display: inline-block; + opacity: 0.5; + margin-left: 2px; + transition: opacity var(--animation-fast, 0.15s) ease; + font-weight: normal; + font-size: 13px; +} + +.comment-item:hover .comment-parent-info { + opacity: 0.75; +} + +/* ---------- 评论元信�?---------- */ +.comment-info { + margin-top: 2px; + font-size: 12px; + font-weight: normal; + margin-left: 3px; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + opacity: 0.6; +} + +.comment-info>div { + display: inline-block; + white-space: nowrap; + flex-shrink: 0; +} + +.comment-time { + position: relative; + cursor: default; +} + +.comment-time-details { + pointer-events: none; + position: absolute; + top: -35px; + right: 0; + width: max-content; + width: -moz-max-content; + line-height: 22px; + color: #fff; + background: #32325d; + padding: 3px 10px; + font-size: 12px; + border-radius: var(--m3-shape-sm, 6px); + transition: all var(--animation-fast, 0.15s) var(--ease-standard, ease); + transform: translateY(5px); + opacity: 0; + z-index: 10; +} + +.comment-time:hover .comment-time-details { + transform: translateY(0); + opacity: 0.9; +} + +.comment-edited { + margin-right: 3px; + opacity: 0.8; +} + +.comment-edited>i { + margin-right: 4px; +} + +.comment-edited.comment-edithistory-accessible { + cursor: pointer; + transition: opacity var(--animation-fast, 0.15s) ease; +} + +.comment-edited.comment-edithistory-accessible:hover { + opacity: 1; +} + +/* ---------- 评论操作按钮 ---------- */ +.comment-operations { + position: absolute; + right: 0; + bottom: 8px; + font-size: 12px; + padding: 4px 8px; + transition: all var(--animation-fast, 0.15s) var(--ease-standard, ease); + opacity: 0; + transform: translateY(4px); + display: flex; + gap: 6px; + background: var(--color-widgets); + border-radius: var(--m3-shape-sm, 6px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + pointer-events: none; +} + +.comment-item:hover .comment-operations { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +html.darkmode .comment-operations { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.comment-operations .btn { + padding: 4px 10px; + font-size: 12px; + border-radius: var(--m3-shape-sm, 6px); + transition: all var(--animation-fast, 0.15s) var(--ease-standard, ease); +} + +.comment-operations .btn:hover { + opacity: 0.8; +} + +/* ---------- 评论 UA 信息 ---------- */ +.comment-useragent { + display: inline-flex; + align-items: center; + font-weight: normal; + padding-left: 4px; + font-size: 13px; + flex-shrink: 0; + opacity: 0.5; + transition: opacity var(--animation-fast, 0.15s) ease; +} + +.comment-item:hover .comment-useragent { + opacity: 0.7; +} + +.comment-useragent>svg { + height: 16px; + width: 16px; + transform: translateY(-1px); + margin-left: 4px; + margin-right: 1px; + flex-shrink: 0; +} + +/* ---------- 评论点赞按钮 ---------- */ +.comment-upvote { + white-space: nowrap; + border-radius: var(--m3-shape-full, 100px); + height: 32px; + line-height: 30px; + padding: 0 12px; + border: none !important; + color: var(--themecolor); + background-color: rgba(var(--themecolor-rgbstr), 0.12); + text-align: center; + position: absolute; + left: 50%; + top: 48px; + transform: translateX(-50%) !important; + min-width: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 4px; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all var(--animation-fast, 0.15s) var(--ease-standard, ease); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); +} + +.comment-upvote .btn-inner--icon { + display: flex; + align-items: center; + justify-content: center; + transition: transform var(--animation-fast, 0.15s) var(--ease-spring, ease); +} + +.comment-upvote .btn-inner--icon i { + font-size: 14px; +} + +.comment-upvote .btn-inner--text { + margin-left: 0 !important; + margin-right: 0 !important; + font-variant-numeric: tabular-nums; + display: inline-block !important; +} + +.comment-upvote .comment-upvote-num { + min-width: 12px; + text-align: center; + display: inline-block; +} + +html.darkmode .comment-upvote { + background-color: rgba(var(--themecolor-rgbstr), 0.2); + color: var(--themecolor-light); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.comment-upvote:hover { + background-color: rgba(var(--themecolor-rgbstr), 0.25) !important; + color: var(--themecolor) !important; + transform: translateX(-50%) scale(1.05) !important; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.25); +} + +.comment-upvote:hover .btn-inner--icon { + transform: translateY(-2px); +} + +html.darkmode .comment-upvote:hover { + background-color: rgba(var(--themecolor-rgbstr), 0.35) !important; + color: var(--themecolor-light) !important; +} + +.comment-upvote:active { + transform: translateX(-50%) scale(0.95) !important; +} + +.comment-upvote.upvoted { + color: #fff !important; + background-color: var(--themecolor) !important; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.4); +} + +.comment-upvote.upvoted:hover { + background-color: var(--themecolor-dark) !important; + color: #fff !important; + transform: translateX(-50%) scale(1.05) !important; + cursor: pointer; +} + +.comment-upvote.comment-upvoting { + opacity: 0.6; + pointer-events: none; +} + +.comment-upvote.comment-upvoting .btn-inner--icon i { + animation: upvote-pulse 0.6s ease infinite; +} + +@keyframes upvote-pulse { + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } +} + +/*评论内容*/ + +.comment-item-text .comment-sticker { + + max-height: 60px; + + transition: all 0.3s ease; + + transition-delay: 0s; + + transform: none; + +} + +.comment-item-text .comment-sticker:active { + + transition-delay: 0.3s; + + transform: scale(2); + + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15); + + background: var(--color-widgets); + +} + +.comment-item-text .comment-image br { + + display: none; + +} + +.comment-item-text .comment-image { + + color: var(--themecolor) !important; + + cursor: pointer; + + user-select: none; + + position: relative; + +} + +.comment-image-preview-mask { + + display: none; + +} + +.comment-item-text .comment-image.comment-image-preview-zoomed .comment-image-preview-mask { + + display: block; + + background: transparent; + + position: fixed; + + left: 0; + + right: 0; + + top: 0; + + bottom: 0; + + width: 100vw; + + height: 100vh; + + z-index: 1501; + + cursor: zoom-out; + +} + +.comment-item-text .comment-image .comment-image-preview { + + width: 22px; + + height: 22px; + + position: absolute; + + left: 0; + + opacity: 0; + + /*pointer-events: none;*/ + +} + +.comment-item-text .comment-image.comment-image-preview-zoomed .comment-image-preview { + + z-index: 1502; + + opacity: 1; + + pointer-events: unset; + +} + +.comment-item-text b, + +.comment-item-text strong { + + font-weight: 600; + + opacity: 0.78; + +} + +.comment-item-text pre { + + font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", + + "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, + + monospace; + + font-size: 14px; + + line-height: 1.375; + + text-align: left; + + white-space: pre; + + word-spacing: normal; + + word-break: normal; + + tab-size: 4; + + hyphens: none; + + color: #5e6687; + + background: var(--color-widgets); + + direction: ltr; + + border: 1px solid var(--color-border-on-foreground); + + padding: 14px; + + border-radius: 3px; + + margin-top: 15px; + +} + +html.darkmode .comment-item-text pre { + + color: #eee; + +} + +.comment-item-text blockquote { + + padding-left: 1.2em; + + margin: 1em 3em 1em 0; + + font-weight: 400; + + border-left: 3px solid rgba(0, 0, 0, 0.12); + +} + +html.darkmode .comment-item-text blockquote { + + border-color: rgba(255, 255, 255, 0.2); + +} + +.comment-item-text ol li { + + list-style-type: decimal !important; + +} + +.comment-item-text ul, + +.comment-item-text ol { + + padding-inline-start: 20px; + +} + +.comment-item-text ul li { + + list-style-type: disc !important; + +} + +.comment-item-text ul ul li { + + list-style-type: square !important; + +} + +.comment-item-text h1, + +.comment-item-text h2, + +.comment-item-text h3, + +.comment-item-text h4, + +.comment-item-text h5, + +.comment-item-text h6 { + + font-weight: 600; + + opacity: 0.6; + + font-size: inherit; + + margin-top: 10px; + + margin-bottom: 5px; + + transition: opacity 0.3s ease; + +} + +.comment-item-text:hover h1, + +.comment-item-text:hover h2, + +.comment-item-text:hover h3, + +.comment-item-text:hover h4, + +.comment-item-text:hover h5, + +.comment-item-text:hover h6 { + + font-weight: 600; + + opacity: 0.8; + +} + +.comment-item-text h1 { + + font-size: 20px; + +} + +.comment-item-text h2 { + + font-size: 19px; + +} + +.comment-item-text h3 { + + font-size: 18px; + +} + +.comment-item-text h4 { + + font-size: 17px; + +} + +.comment-item-text h5 { + + font-size: 16px; + +} + +.comment-item-text h6 { + + font-size: 15px; + +} + +/*评论折叠*/ + +.comment-item-inner.comment-folded { + + max-height: 200px; + + overflow: hidden; + +} + +.comment-item-inner.comment-folded:after { + + content: ""; + + display: block; + + position: absolute; + + left: 0; + + right: 0; + + bottom: 0; + + height: 80px; + + background: linear-gradient(180deg, transparent 0%, var(--color-foreground) 100%); + + pointer-events: none; + +} + +.comment-item-inner.comment-folded .comment-operations { + + display: none; + +} + +.comment-item-inner.comment-folded .show-full-comment { + + position: absolute; + + bottom: 0; + + left: 0; + + right: 0; + + height: 35px; + + color: var(--themecolor); + + z-index: 2; + + text-align: left; + + cursor: pointer; + + user-select: none; + + opacity: 0.6; + + transition: opacity 0.25s ease; + +} + +.comment-item-inner.comment-folded:hover .show-full-comment { + + opacity: 1; + +} + +.comment-item-inner:not(.comment-folded) .show-full-comment { + + display: none; + +} + +/*评论区页�?/ + +.comments-navigation .page-item > div { + + cursor: pointer; + +} + +/*评论区更�?/ + +#comments_more { + + width: 52px; + + height: 52px; + + display: block; + + margin: 30px auto 10px auto; + +} + +#comments_more:disabled { + + animation: breath 2s ease infinite; + +} + +@keyframes breath { + + 0% { + + transform: scale(1); + + } + + 50% { + + transform: scale(1.2); + + } + + 100% { + + transform: scale(1); + + } + +} + +.comments-navigation-more .comments-navigation-nomore { + + text-align: center; + + margin-top: 30px; + + margin-bottom: 10px; + + opacity: 0.6; + +} + +/*评论编辑记录*/ + +.comment-edit-history-item { + + border-bottom: 1px solid #e9ecef; + + margin-bottom: 22px; + + padding-bottom: 30px; + + padding-left: 5px; + + padding-right: 5px; + +} + +html.darkmode .comment-edit-history-item { + + border-bottom-color: #666; + +} + +.comment-edit-history-title { + + margin-bottom: 6px; + +} + +.comment-edit-history-id { + + font-size: 22px; + + font-weight: bold; + + display: inline-block; + +} + +.comment-edit-history-title .badge { + + transform: translateY(-3px); + + margin-left: 8px; + + display: inline-block; + +} + +.comment-edit-history-time { + + opacity: 0.6; + + font-size: 15px; + + margin-bottom: 12px; + +} + +#comment_edit_history .modal-body .comment-edit-history-item:last-child { + + border: navajowhite; + + padding-bottom: 0; + +} + +/*发送评论区�?/ + +#post_comment { + + margin-bottom: 25px; + +} + +/* 发送评论卡片优�?*/ +#post_comment.card { + border-radius: 16px; + padding: 20px; + background: var(--color-foreground); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.04), + 0 8px 24px rgba(0, 0, 0, 0.06); + transition: + box-shadow var(--animation-normal) var(--ease-standard), + transform var(--animation-normal) var(--ease-standard); +} + +#post_comment.card .card-body { + padding: 0; +} + +#post_comment.card:hover { + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 12px 32px rgba(0, 0, 0, 0.08); +} + +html.darkmode #post_comment.card { + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + 0 8px 24px rgba(0, 0, 0, 0.15); +} + +html.darkmode #post_comment.card:hover { + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.25), + 0 12px 32px rgba(0, 0, 0, 0.2); +} + +.post-comment-title { + + font-size: 18px; + font-weight: 600; + margin-bottom: 12px; + +} + +.post-comment-title i { + + margin-right: 8px; + color: var(--themecolor); + +} + +/* ---------- 评论回复提示�?---------- */ +.post-comment-reply { + margin-top: 12px; + margin-bottom: 12px; + border-radius: 12px; + overflow: hidden; + background: linear-gradient(135deg, rgba(var(--themecolor-rgbstr), 0.08) 0%, rgba(var(--themecolor-rgbstr), 0.03) 100%); + border: 1px solid rgba(var(--themecolor-rgbstr), 0.15); + transform-origin: top center; +} + +.post-comment-reply-header { + display: flex; + align-items: center; + padding: 12px 16px; + gap: 12px; + background: rgba(var(--themecolor-rgbstr), 0.05); + border-bottom: 1px solid rgba(var(--themecolor-rgbstr), 0.1); +} + +.post-comment-reply-icon { + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--themecolor); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + flex-shrink: 0; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); +} + +.post-comment-reply-meta { + flex: 1; + min-width: 0; +} + +.post-comment-reply-label { + font-size: 12px; + color: var(--color-text-light, #8898aa); + display: block; + line-height: 1.2; +} + +.post-comment-reply-name { + font-size: 14px; + font-weight: 600; + color: var(--themecolor); + display: block; + line-height: 1.3; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.post-comment-reply-close { + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + flex-shrink: 0; + transition: all 0.2s ease; +} + +.post-comment-reply-close:hover { + background: var(--themecolor); + color: #fff; + transform: rotate(90deg); +} + +.post-comment-reply-preview { + padding: 12px 16px; + font-size: 13px; + line-height: 1.6; + color: var(--color-text, #525f7f); + max-height: 80px; + overflow: hidden; + position: relative; + background: rgba(255, 255, 255, 0.5); +} + +html.darkmode .post-comment-reply-preview { + background: rgba(0, 0, 0, 0.2); +} + +.post-comment-reply-preview::after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 30px; + background: linear-gradient(180deg, transparent 0%, rgba(var(--themecolor-rgbstr), 0.05) 100%); + pointer-events: none; +} + +/* 回复框动�?*/ +@keyframes replySlideIn { + from { + opacity: 0; + transform: scaleY(0.8) translateY(-10px); + } + + to { + opacity: 1; + transform: scaleY(1) translateY(0); + } +} + +@keyframes replySlideOut { + from { + opacity: 1; + transform: scaleY(1) translateY(0); + } + + to { + opacity: 0; + transform: scaleY(0.8) translateY(-10px); + } +} + +.post-comment-reply.reply-entering { + animation: replySlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; +} + +.post-comment-reply.reply-leaving { + animation: replySlideOut 0.2s ease-out forwards; +} + +#post_comment_reply_cancel { + margin-top: 10px; + border-radius: 8px; + padding: 6px 14px; + font-size: 13px; +} + +#post_comment_content { + + transition: height 0.15s ease, box-shadow var(--animation-normal) var(--ease-standard), border-color var(--animation-normal) var(--ease-standard); + + overflow: hidden; + + min-height: 80px; + + resize: none; + + white-space: pre-wrap; + + word-wrap: break-word; + + margin-bottom: 12px; + + margin-top: 0; + + border-radius: 10px; + + border: 1px solid var(--color-border-on-foreground-deeper); + + padding: 12px 14px; + + font-size: 14px; + + line-height: 1.6; + + background-color: var(--color-widgets); + +} + +#post_comment_content:focus { + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); +} + +/* 评论表单输入框统一样式 */ +#post_comment .input-group-alternative { + margin-bottom: 12px !important; + border-radius: 10px; + overflow: hidden; + border: 1px solid var(--color-border-on-foreground-deeper); + box-shadow: none; + background-color: var(--color-widgets); + transition: border-color var(--animation-normal) var(--ease-standard), box-shadow var(--animation-normal) var(--ease-standard); +} + +#post_comment .input-group-alternative:focus-within { + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); +} + +#post_comment .input-group-alternative .input-group-text { + background-color: transparent; + border: none; + color: var(--themecolor); + padding: 10px 12px; +} + +#post_comment .input-group-alternative .form-control { + border: none; + background-color: transparent; + padding: 10px 12px 10px 0; + height: auto; + font-size: 14px; +} + +#post_comment .input-group-alternative .form-control:focus { + box-shadow: none; +} + +#post_comment_content_hidden { + + font-family: inherit !important; + + font-weight: 400; + + line-height: 1.5; + + font-size: 14px; + + padding: 0.625rem 0.75rem; + + width: calc(100% - 30px); + + overflow: hidden; + + white-space: pre-wrap; + + word-wrap: break-word; + + position: absolute; + + pointer-events: none; + + opacity: 0; + +} + +.post-comment-link-container:before, + +.post-comment-captcha-container:before, + +#post_comment_toggle_extra_input:before, + +.comment-post-checkbox:before { + + pointer-events: none; + + position: absolute; + + top: -35px; + + left: 0px; + + line-height: 25px; + + font-weight: normal; + + color: #fff; + + background: #32325d; + + padding: 3px 10px; + + font-size: 14px; + + border-radius: 3px; + + z-index: 3; + + transition: all 0.3s ease; + + transform: translateY(5px); + + opacity: 0; + + width: max-content; + + width: -moz-max-content; + +} + +.post-comment-link-container:hover:before, + +.post-comment-link-container.active:before, + +.post-comment-captcha-container:hover:before, + +.post-comment-captcha-container.active:before, + +#post_comment_toggle_extra_input:hover:before, + +.comment-post-checkbox:hover:before { + + transform: translateY(0); + + opacity: 0.7; + +} + +.post-comment-link-container:before { + + content: "http(s)://"; + +} + +#post_comment_toggle_extra_input:before { + + content: attr(tooltip-show-extra-field); + + text-transform: none; + +} + +.show-extra-input #post_comment_toggle_extra_input:before { + + content: attr(tooltip-hide-extra-field); + +} + +#post_comment_toggle_extra_input { + + border-radius: 100px; + + padding: 5px 20px; + +} + +#post_comment_toggle_extra_input i { + + transition: all 0.3s ease; + +} + +.show-extra-input #post_comment_toggle_extra_input i { + + transform: rotateZ(180deg); + +} + +#post_comment.logged #post_comment_name, + +#post_comment.logged #post_comment_email { + + opacity: 1; + + background-color: var(--color-widgets-disabled); + + pointer-events: none; + +} + +.comment-post-checkbox { + + display: inline-block; + + margin-top: 8px; + + height: 28px; + + margin-right: 8px; + +} + +.comment-post-checkbox .custom-control-label { + + line-height: 26px; + + font-size: 13px; + +} + +#post_comment.post-comment-force-privatemode-on .comment-post-privatemode { + + opacity: 0.6; + + pointer-events: none; + +} + +#post_comment.post-comment-force-privatemode-on .comment-post-privatemode .custom-control-label::before { + + border-color: var(--themecolor); + + background-color: var(--themecolor); + + color: #fff; + + box-shadow: none; + +} + +#post_comment.post-comment-force-privatemode-on .comment-post-privatemode .custom-control-label::after { + + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); + +} + +#post_comment.post-comment-force-privatemode-off .comment-post-privatemode { + + opacity: 0.6; + + pointer-events: none; + +} + +#post_comment.post-comment-force-privatemode-off .comment-post-privatemode .custom-control-label::before { + + border-color: var(--color-widgets-disabled); + +} + +html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-privatemode .custom-control-label::before { + + background: #555; + + border-color: #666; + +} + +#post_comment.post-comment-force-privatemode-off .comment-post-privatemode .custom-control-label::after { + + background-image: unset; + +} + +.comment-post-privatemode:before { + + content: attr(tooltip); + +} + +.comment-post-mailnotice:before { + + content: attr(tooltip); + +} + +#post_comment.sending .comment-post-checkbox { + + opacity: 0.6; + + pointer-events: none; + +} + +.comment-btn { + + margin-top: 0; + + margin-right: 8px; + +} + +/*发送评论区�?编辑评论*/ + +#post_comment:not(.editing) .hide-on-comment-not-editing { + + display: none !important; + +} + +#post_comment.editing .hide-on-comment-editing { + + display: none !important; + +} + +#post_comment.editing .comment-post-use-markdown { + + pointer-events: none; + + opacity: 0.6; + +} + +#post_comment.editing .comment-post-mailnotice { + + display: none; + +} + +/*评论表情*/ + +#comment_emotion_btn { + + border-radius: 100px; + + width: 38px; + + height: 38px; + + padding: 0; + + font-size: 22px; + + background: transparent !important; + + box-shadow: none; + + color: inherit; + + border: none; + + transform: none; + + opacity: 0.7; + + margin-top: 0; + + margin-right: 8px; + + transition: all 0.3s ease; + +} + +#comment_emotion_btn:hover { + opacity: 1; + color: var(--themecolor); +} + +#comment_emotion_btn.comment-emotion-keyboard-open { + + border-radius: 100px; + + color: var(--themecolor); + + opacity: 1; + +} + +.emotion-keyboard { + + max-width: min(500px, calc(100vw - 40px)); + + min-width: min(300px, calc(100vw - 40px)); + + display: flex; + + height: 300px; + + flex-direction: column; + + overflow: hidden; + + position: absolute; + + z-index: 2; + + right: 0; + + bottom: -10px; + + transform: translateY(100%) scale(0.9); + + transform-origin: top; + + transition: all 0.3s ease; + + opacity: 0; + + pointer-events: none; + +} + +#comment_emotion_btn.comment-emotion-keyboard-open+.emotion-keyboard { + + opacity: 1; + + transform: translateY(100%); + + pointer-events: all; + +} + +.emotion-keyboard-content { + + flex: 1; + + overflow-y: auto; + +} + +.emotion-group { + + padding: 15px 15px; + + padding-bottom: 10px; + +} + +.emotion-item { + + display: inline-block; + + background: var(--color-border-on-foreground); + + border-radius: 5px; + + user-select: none; + + margin-right: 12px; + + margin-bottom: 12px; + + padding: 2px 10px; + + cursor: pointer; + + transition: all 0.3s ease; + +} + +.emotion-item.emotion-item-sticker { + + padding: 2px; + + background: rgba(126, 126, 126, 0.15); + +} + +.emotion-item>img { + + max-height: 60px; + + border-radius: 3px; + + transition: filter 0.3s ease, transform 0.3s ease; + + transition-delay: 0s; + + background: var(--color-widgets); + +} + +.emotion-item.emotion-item-sticker:hover>img[src^="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nI"] { + + filter: brightness(2); + +} + +.emotion-item:hover { + + background: var(--themecolor); + + color: #fff; + +} + +.emotion-group:active .emotion-item:hover>img:not([src^="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nI"]) { + + transition: all 0.3s ease; + + transition-delay: 0.3s; + + transform: scale(1.5); + + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15); + +} + +.emotion-group-description { + + text-align: right; + + font-size: 14px; + + opacity: 0.6; + +} + +.emotion-keyboard-bar { + + overflow-x: auto; + + white-space: nowrap; + + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06); + + transform: scaleY(-1); + +} + +.emotion-keyboard-bar::-webkit-scrollbar-track { + + background: transparent; + +} + +.emotion-keyboard-bar::-webkit-scrollbar { + + height: 5px; + +} + +.emotion-keyboard-bar::-webkit-scrollbar-thumb { + + background-color: rgba(0, 0, 0, 0.2); + + border: none; + +} + +.emotion-keyboard-bar::-webkit-scrollbar-thumb:hover { + + background-color: var(--themecolor); + +} + +.emotion-group-name { + + display: inline-block; + + padding: 10px 20px; + + cursor: pointer; + + transition: all 0.3s ease; + + position: relative; + + user-select: none; + + transform: scaleY(-1); + +} + +.emotion-group-name:hover { + + background: var(--color-border-on-foreground); + +} + +.emotion-group-name.active:after { + + content: ""; + + position: absolute; + + left: 0; + + right: 0; + + bottom: 0; + + background: var(--themecolor); + + height: 3px; + + pointer-events: none; + +} + +/*短代码适配*/ + +/*短代�?警告与折叠块*/ + +.admonition, + +.collapse-block { + + border-radius: 3px; + + border-left-width: 3px; + + border-left-style: solid; + + margin-bottom: 20px; + + background-color: var(--color-widgets) !important; + +} + +.admonition i:first-child, + +.collapse-block .collapse-block-title i:first-child { + + margin-right: 5px; + +} + +.collapse-block.hide-border-left { + + border-left: none; + +} + +.collapse-block .collapse-icon { + + position: absolute; + + right: 15px; + + bottom: 15px; + + transform: rotateZ(180deg); + + transition: all 0.2s ease; + +} + +.collapse-block.collapsed .collapse-icon { + + transform: rotateZ(0deg); + +} + +.admonition-title, + +.collapse-block-title { + + padding: 10px 15px; + + font-weight: bold; + +} + +.collapse-block-title-inner { + + max-width: calc(100% - 20px); + + display: inline-block; + +} + +.collapse-block-title { + + cursor: pointer; + + position: relative; + +} + +.admonition-body, + +.collapse-block-body { + + padding: 20px 15px; + + padding-bottom: 20px; + +} + +.admonition-primary, + +.collapse-block-primary { + + border-left-color: #7889e8; + +} + +.admonition-primary>.admonition-title, + +.collapse-block-primary>.collapse-block-title { + + background: #7889e833; + +} + +.admonition-success, + +.collapse-block-success { + + border-left-color: #4fd69c; + +} + +.admonition-success>.admonition-title, + +.collapse-block-success>.collapse-block-title { + + background: #4fd69c33; + +} + +.admonition-danger, + +.collapse-block-danger { + + border-left-color: #f75676; + +} + +.admonition-danger>.admonition-title, + +.collapse-block-danger>.collapse-block-title { + + background: #f7567633; + +} + +.admonition-info, + +.collapse-block-info { + + border-left-color: #37d5f2; + +} + +.admonition-info>.admonition-title, + +.collapse-block-info>.collapse-block-title { + + background: #37d5f233; + +} + +.admonition-warning, + +.collapse-block-warning { + + border-left-color: #fc7c5f; + +} + +.admonition-warning>.admonition-title, + +.collapse-block-warning>.collapse-block-title { + + background: #fc7c5f33; + +} + +.admonition-default, + +.collapse-block-default { + + border-left-color: #3c4d69; + +} + +.admonition-default>.admonition-title, + +.collapse-block-default>.collapse-block-title { + + background: #3c4d6933; + +} + +.admonition-grey, + +.collapse-block-grey { + + border-left-color: #888888; + +} + +.admonition-grey>.admonition-title, + +.collapse-block-grey>.collapse-block-title { + + background: #88888833; + +} + + + +/*短代�?友链-简�?/ + +.friend-links-simple .friend-category-title { + + font-size: 22px; + + text-align: center; + + font-weight: bold; + + margin-top: 20px; + + margin-bottom: 25px; + +} + +.friend-links-simple .link { + + padding: 0 10px; + +} + +.friend-links-simple .link .card { + + padding: 12px 12px; + +} + +.friend-links-simple .link .friend-link-avatar { + + margin-top: 8px; + +} + +.friend-links-simple .link .card img { + + border: none; + + max-width: unset; + +} + +.friend-links-simple .link .friend-link-title { + + font-size: 17px; + + font-weight: bold; + + margin-bottom: 5px; + +} + +.friend-links-simple .link a:before { + + display: none; + +} + + + +/*短代�?友链*/ + +.friend-links .link { + + padding-left: 10px; + + padding-right: 10px; + + padding-bottom: 15px; + +} + +.friend-links .friend-link-container { + + display: block; + + overflow: hidden; + + white-space: nowrap; + + background-color: var(--color-widgets) !important; + +} + +.friend-links .link a:before { + + display: none; + +} + +/*短代�?友链-样式 1*/ + +.friend-links-style1 .friend-link-avatar { + + display: inline-block; + + width: 125px; + + height: 140px; + + border-radius: 0 65px 65px 0; + + object-fit: cover; + + pointer-events: none; + +} + +.friend-links-style1 .friend-link-content { + + display: inline-block; + + width: calc(100% - 125px); + + height: 140px; + + vertical-align: middle; + + padding: 10px 15px 10px 15px; + + white-space: normal; + +} + +.friend-links-style1 .no-avatar .friend-link-content { + + width: 100%; + +} + +.friend-links-style1 .friend-link-title { + + font-weight: bold; + + font-size: 18px; + + height: 36px; + + white-space: nowrap; + + overflow: hidden; + + text-overflow: ellipsis; + +} + +.friend-links-style1 .friend-link-description { + + height: 50px; + + overflow: hidden; + + line-height: 25px; + + position: relative; + +} + +.friend-links-style1 .friend-link-description:after { + + content: ""; + + width: 45px; + + height: 22px; + + display: block; + + position: absolute; + + right: 0; + + top: 25px; + + pointer-events: none; + + background: linear-gradient(90deg, transparent 0%, var(--color-widgets) 100%); + +} + +.friend-links-style1 .friend-link-links { + + height: 32px; + + overflow: hidden; + + font-size: 18px; + + margin-top: 2px; + +} + +.friend-links-style1 .friend-link-links>a { + + margin-right: 12px; + +} + +/*短代�?友链-样式 1-方形头像*/ + +.friend-links-style1.friend-links-style1-square .friend-link-avatar { + + border-radius: 0; + + width: 130px; + +} + +.friend-links-style1.friend-links-style1-square .friend-link-content { + + width: calc(100% - 130px); + +} + +.friend-links-style1.friend-links-style1-square .no-avatar .friend-link-content { + + width: 100%; + +} + +/*短代�?友链-样式 2*/ + +.friend-links-style2 .friend-link-avatar { + + display: block; + + width: 100%; + + height: 160px; + + object-fit: cover; + + pointer-events: none; + +} + +.friend-links-style2 .friend-link-content { + + display: block; + + width: 100%; + + padding: 10px 15px 12px 15px; + +} + +.friend-links-style2 .friend-link-title { + + font-weight: bold; + + font-size: 18px; + + height: 36px; + + white-space: nowrap; + + overflow: hidden; + + text-overflow: ellipsis; + +} + +.friend-links-style2 .friend-link-description { + + height: 25px; + + line-height: 25px; + + white-space: nowrap; + + overflow: hidden; + + text-overflow: ellipsis; + +} + +.friend-links-style2 .friend-link-links { + + height: 30px; + + overflow: hidden; + + font-size: 18px; + + margin-top: 8px; + +} + +.friend-links-style2 .friend-link-links>a { + + margin-right: 15px; + +} + +/*短代�?友链-样式 2-大头�?/ + +.friend-links-style2.friend-links-style2-big .friend-link-avatar { + + height: calc(100vw * 0.2); + + min-height: 200px; + + max-height: 250px; + +} + +.friend-links-style2.friend-links-style2-big .friend-link-links > a { + + margin-right: 12px; + +} + +@media (min-width: 900px) { + + .friend-links.friend-links-style2-big .link { + + max-width: 33.33333%; + + flex: 0 0 33.33333%; + + } + +} + + + +/*短代�?时间�?/ + +.argon-timeline { + + margin-left: 110px; + + border-left: 3px solid rgba(var(--themecolor-rgbstr), 0.2); + + padding-left: 25px; + + position: relative; + + padding-top: 30px; + + padding-bottom: 10px; + +} + +.argon-timeline-time { + + position: absolute !important; + + left: -110px; + + margin-top: 12px; + + width: 85px; + + text-align: right; + + font-size: 15px; + + line-height: 26px; + +} + +.argon-timeline-card { + + margin-bottom: 35px; + + padding: 18px 25px; + + background: var(--color-widgets) !important; + +} + +.argon-timeline-card:before { + + content: ""; + + position: absolute; + + left: -35px; + + top: 17px; + + background: var(--themecolor); + + width: 14px; + + height: 14px; + + border-radius: 50%; + +} + +.argon-timeline-title { + + font-size: 17px; + + font-weight: bold; + + margin-bottom: 5px; + +} + + + +/*短代�?隐藏文本*/ + +.argon-hidden-text { + transition: all 0.3s ease; +} + +.argon-hidden-text.argon-hidden-text-blur { + filter: blur(4px); +} + +.argon-hidden-text.argon-hidden-text-blur:hover { + filter: blur(0px); +} + +.argon-hidden-text.argon-hidden-text-background { + background: #000; + color: transparent; + border-radius: 1px; +} + +.argon-hidden-text.argon-hidden-text-background:hover { + background: transparent; + color: inherit; + border-radius: 0px; +} + +/*短代�?Github*/ + +.github-info-card { + + background: #24292e !important; + + margin-top: 20px; + + margin-bottom: 20px; + + padding: 20px 25px; + + color: #eee; + +} + +.github-info-card a { + + color: var(--themecolor-light); + +} + +.github-info-card-header { + + margin-bottom: 5px; + +} + +.github-info-card-header a { + + color: #eee !important; + + font-size: 16px; + +} + +.github-info-card-header a:before { + + display: none; + +} + +.github-info-card-header a i { + + margin-right: 2px; + +} + +.github-info-card-name-a { + + font-size: 20px; + +} + +.github-info-card-bottom { + + margin-top: 15px; + +} + +.github-info-card-bottom .github-info-card-meta { + + margin-right: 10px; + + opacity: 0.7; + +} + +.github-info-card-bottom .github-info-card-meta i { + + margin-right: 2px; + +} + +/*短代�?Github-Mini*/ + +.github-info-card-mini { + + display: flex; + + flex-direction: row; + + white-space: nowrap; + + align-items: center; + + padding: 15px 20px; + +} + +.github-info-card-mini .github-info-card-name-a { + + display: inline-block; + + margin-right: 12px; + + font-size: 19px; + +} + +.github-info-card-mini .github-info-card-description { + + white-space: nowrap; + + text-overflow: ellipsis; + + overflow: hidden; + + word-break: break-all; + + display: inline-block; + +} + +.github-info-card-mini .github-info-card-body { + + flex: 1; + + white-space: nowrap; + + overflow: hidden; + + display: flex; + + align-items: center; + +} + +.github-info-card-mini .github-info-card-bottom { + + display: inline-block; + + margin-top: 0; + + margin-left: 10px; + +} + +.github-info-card-mini .github-info-card-header { + + margin-right: 7px; + + margin-bottom: 0; + +} + +.github-info-card-mini .github-info-card-header a i { + + font-size: 19px; + + transform: translateY(2px); + + margin-right: 2px; + +} + +.github-info-card-mini .github-info-card-bottom .github-info-card-meta-forks { + + display: none; + +} + +.github-info-card-mini .github-info-card-bottom .github-info-card-meta-stars { + + margin-right: 0; + +} + + + +/*短代�?进度�?/ + +.progress { + + background: var(--color-border-on-foreground-deeper); + +} + +/*Gutenburg 区块-Tab 面板*/ + +.argon-tabpanel { + + margin-bottom: 20px; + +} + +.argon-tabpanel>.tabpanel-header { + + padding: 0; + +} + +.argon-tabpanel>.tabpanel-body { + + background-color: var(--color-widgets) !important; + +} + +.argon-tabpanel .nav { + + display: flex; + + justify-content: flex-start; + + align-content: center; + + flex-wrap: wrap; + +} + +.argon-tabpanel .nav-pills .nav-item { + + padding: 0; + + flex: 0; + + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + + margin-bottom: 0; + +} + +.argon-tabpanel .nav-pills .nav-link { + + box-shadow: none; + + border-bottom-left-radius: 0; + + border-bottom-right-radius: 0; + + background-color: var(--color-widgets); + + border: solid 1px var(--color-border-on-foreground); + + border-bottom: none; + + padding: 8px 16px; + + white-space: nowrap; + +} + +html.darkmode .argon-tabpanel .nav-pills .nav-link { + + color: #fff; + +} + +.argon-tabpanel .nav-pills .nav-link:not(:first-of-type) { + + border-left: none; + +} + +.argon-tabpanel .nav-pills .nav-link:before { + + display: none; + +} + +.argon-tabpanel .nav-pills .nav-link.active, + +.argon-tabpanel .nav-pills .show>.nav-link { + + background-color: var(--themecolor) !important; + +} + + + +/*noUiSlidebar*/ + +.noUi-connect, + +.noUi-handle { + + background: var(--themecolor) !important; + +} + +.noUi-handle:before { + + content: attr(aria-valuenow) " px"; + + position: absolute; + + left: -36px; + + top: -20px; + + font-size: 10px; + + display: block; + + width: 90px; + + text-align: center; + + transition: opacity 0.15s ease; + + opacity: 0; + + pointer-events: none; + +} + +.noUi-handle.noUi-active:before { + + opacity: 1; + +} + +.noUi-target { + + background: var(--color-border-on-foreground-deeper); + +} + + + +/*nprogress 加载进度�?/ + +#nprogress { + + pointer-events: none; + +} + +#nprogress .bar { + + background: rgba(255, 255, 255, 0.67); + + position: fixed; + + z-index: 1031; + + top: 0; + + left: 0; + + width: 100%; + + height: 2px; + +} + +body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { + + background: rgba(var(--themecolor-rgbstr), 0.67); + +} + +#nprogress .peg { + + display: block; + + position: absolute; + + right: 0px; + + width: 100px; + + height: 100%; + + box-shadow: 0 0 10px rgba(255, 255, 255, 0.67), 0 0 5px rgba(255, 255, 255, 0.67); + + opacity: 1; + + -webkit-transform: rotate(3deg) translate(0px, -4px); + 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: 1031; + + top: 15px; + + right: 15px; + +} + +#nprogress .spinner-icon { + + width: 18px; + + height: 18px; + + box-sizing: border-box; + + border: solid 2px transparent; + + border-top-color: rgba(255, 255, 255, 0.67); + + border-left-color: rgba(255, 255, 255, 0.67); + + border-radius: 50%; + + -webkit-animation: nprogress-spinner 400ms linear infinite; + + animation: nprogress-spinner 400ms linear infinite; + +} + +.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); + transform: rotate(0deg); + + } + + 100% { + + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + + } + +} + +@keyframes nprogress-spinner { + + 0% { + + transform: rotate(0deg); + + } + + 100% { + + transform: rotate(360deg); + + } + +} + + + +/*iziToast*/ + +.iziToast:after { + + box-shadow: none !important; + +} + +.iziToast>.iziToast-close { + + opacity: 0.9 !important; + + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTcwODgxMzc1MTA3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0MTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik05NTQuMzA0IDE5MC4zMzZhMTUuNTUyIDE1LjU1MiAwIDAgMSAwIDIxLjk1MmwtMzAwLjAzMiAzMDAuMDMyIDI5OC41NiAyOTguNTZhMTUuNjE2IDE1LjYxNiAwIDAgMSAwIDIyLjAxNmwtMTIwLjk2IDEyMC44OTZhMTUuNTUyIDE1LjU1MiAwIDAgMS0yMS45NTIgMEw1MTEuMzYgNjU1LjIzMiAyMTQuMjcyIDk1Mi4zMmExNS41NTIgMTUuNTUyIDAgMCAxLTIxLjk1MiAwbC0xMjAuODk2LTEyMC44OTZhMTUuNDg4IDE1LjQ4OCAwIDAgMSAwLTIxLjk1MmwyOTcuMTUyLTI5Ny4xNTJMNjkuODg4IDIxMy43NmExNS41NTIgMTUuNTUyIDAgMCAxIDAtMjEuOTUybDEyMC44OTYtMTIwLjg5NmExNS41NTIgMTUuNTUyIDAgMCAxIDIxLjk1MiAwTDUxMS4zNiAzNjkuNDcybDMwMC4wOTYtMzAwLjAzMmExNS4zNiAxNS4zNiAwIDAgMSAyMS45NTIgMGwxMjAuODk2IDEyMC44OTZ6IiBwLWlkPSIzNDExIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+) no-repeat 50% 50% !important; + + background-size: 10px !important; + +} + +.iziToast>.iziToast-body .iziToast-icon { + + font-size: 18px !important; + +} + +.iziToast>.iziToast-body i.fa-spin:before { + + animation: fa-spin 2s infinite linear; + + display: inline-block; + +} + +.iziToast.iziToast-noprogressbar .iziToast-progressbar { + + display: none; + +} + +/*Mathjax 相关*/ + +.MathJax { + + outline: none !important; + +} + +#MathJax_Zoom { + + background: var(--color-widgets) !important; + + border: var(--color-border-on-foreground-deeper) solid 1px !important; + + border-radius: 3px !important; + + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important; + +} + +.CtxtMenu_Menu { + + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; + + border: none !important; + + border-radius: 5px !important; + +} + + + +/*LazyLoad 加载样式*/ + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"] { + + width: 100%; + + max-height: 60vh; + + background-color: var(--color-border-on-foreground); + + background-repeat: no-repeat; + + background-position: 50% 50%; + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"]:not([srcset]) { + + height: 500px; + + pointer-events: none; + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-1 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iOC4wNDIlIiB5MT0iMCUiIHgyPSI2NS42ODIlIiB5Mj0iMjMuODY1JSIgaWQ9ImEiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNWU3MmU0IiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCUiLz4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzVlNzJlNCIgc3RvcC1vcGFjaXR5PSIuNjMxIiBvZmZzZXQ9IjYzLjE0NiUiLz4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzVlNzJlNCIgb2Zmc2V0PSIxMDAlIi8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCIgaWQ9Ik92YWwtMiIgc3Ryb2tlPSJ1cmwoI2EpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0KICAgICAgICAgICAgICAgICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iCiAgICAgICAgICAgICAgICAgICAgdHlwZT0icm90YXRlIgogICAgICAgICAgICAgICAgICAgIGZyb209IjAgMTggMTgiCiAgICAgICAgICAgICAgICAgICAgdG89IjM2MCAxOCAxOCIKICAgICAgICAgICAgICAgICAgICBkdXI9IjAuOXMiCiAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvcGF0aD4KICAgICAgICAgICAgPGNpcmNsZSBmaWxsPSIjNWU3MmU0IiBjeD0iMzYiIGN5PSIxOCIgcj0iMSI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgICAgICAgICAgICB0eXBlPSJyb3RhdGUiCiAgICAgICAgICAgICAgICAgICAgZnJvbT0iMCAxOCAxOCIKICAgICAgICAgICAgICAgICAgICB0bz0iMzYwIDE4IDE4IgogICAgICAgICAgICAgICAgICAgIGR1cj0iMC45cyIKICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-2 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM1ZTcyZTQiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjEiPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIgogICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuOHMiCiAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7IDIwIgogICAgICAgICAgICAgICAgY2FsY01vZGU9InNwbGluZSIKICAgICAgICAgICAgICAgIGtleVRpbWVzPSIwOyAxIgogICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4xNjUsIDAuODQsIDAuNDQsIDEiCiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ic3Ryb2tlLW9wYWNpdHkiCiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS44cyIKICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsgMCIKICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJzcGxpbmUiCiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIKICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMywgMC42MSwgMC4zNTUsIDEiCiAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L2NpcmNsZT4KICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIKICAgICAgICAgICAgICAgIGJlZ2luPSItMC45cyIgZHVyPSIxLjhzIgogICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAyMCIKICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJzcGxpbmUiCiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIKICAgICAgICAgICAgICAgIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIgogICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1vcGFjaXR5IgogICAgICAgICAgICAgICAgYmVnaW49Ii0wLjlzIiBkdXI9IjEuOHMiCiAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7IDAiCiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIgogICAgICAgICAgICAgICAga2V5VGltZXM9IjA7IDEiCiAgICAgICAgICAgICAgICBrZXlTcGxpbmVzPSIwLjMsIDAuNjEsIDAuMzU1LCAxIgogICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9jaXJjbGU+CiAgICA8L2c+Cjwvc3ZnPg==); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-3 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUiIGhlaWdodD0iNDYuNSIgdmlld0JveD0iMCAwIDEzNSAxNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzVlNzJlNCI+CiAgICA8cmVjdCB5PSIxMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjEyMCIgcng9IjYiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIKICAgICAgICAgICAgIGJlZ2luPSIwLjVzIiBkdXI9IjFzIgogICAgICAgICAgICAgdmFsdWVzPSIxMjA7MTEwOzEwMDs5MDs4MDs3MDs2MDs1MDs0MDsxNDA7MTIwIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIKICAgICAgICAgICAgIGJlZ2luPSIwLjVzIiBkdXI9IjFzIgogICAgICAgICAgICAgdmFsdWVzPSIxMDsxNTsyMDsyNTszMDszNTs0MDs0NTs1MDswOzEwIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSIzMCIgeT0iMTAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMjAiIHJ4PSI2Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICBiZWdpbj0iMC4yNXMiIGR1cj0iMXMiCiAgICAgICAgICAgICB2YWx1ZXM9IjEyMDsxMTA7MTAwOzkwOzgwOzcwOzYwOzUwOzQwOzE0MDsxMjAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IgogICAgICAgICAgICAgYmVnaW49IjAuMjVzIiBkdXI9IjFzIgogICAgICAgICAgICAgdmFsdWVzPSIxMDsxNTsyMDsyNTszMDszNTs0MDs0NTs1MDswOzEwIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSI2MCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE0MCIgcng9IjYiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIKICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxcyIKICAgICAgICAgICAgIHZhbHVlcz0iMTIwOzExMDsxMDA7OTA7ODA7NzA7NjA7NTA7NDA7MTQwOzEyMCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiCiAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMXMiCiAgICAgICAgICAgICB2YWx1ZXM9IjEwOzE1OzIwOzI1OzMwOzM1OzQwOzQ1OzUwOzA7MTAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9IjkwIiB5PSIxMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjEyMCIgcng9IjYiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIKICAgICAgICAgICAgIGJlZ2luPSIwLjI1cyIgZHVyPSIxcyIKICAgICAgICAgICAgIHZhbHVlcz0iMTIwOzExMDsxMDA7OTA7ODA7NzA7NjA7NTA7NDA7MTQwOzEyMCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiCiAgICAgICAgICAgICBiZWdpbj0iMC4yNXMiIGR1cj0iMXMiCiAgICAgICAgICAgICB2YWx1ZXM9IjEwOzE1OzIwOzI1OzMwOzM1OzQwOzQ1OzUwOzA7MTAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9IjEyMCIgeT0iMTAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMjAiIHJ4PSI2Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICBiZWdpbj0iMC41cyIgZHVyPSIxcyIKICAgICAgICAgICAgIHZhbHVlcz0iMTIwOzExMDsxMDA7OTA7ODA7NzA7NjA7NTA7NDA7MTQwOzEyMCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiCiAgICAgICAgICAgICBiZWdpbj0iMC41cyIgZHVyPSIxcyIKICAgICAgICAgICAgIHZhbHVlcz0iMTA7MTU7MjA7MjU7MzA7MzU7NDA7NDU7NTA7MDsxMCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgPC9yZWN0Pgo8L3N2Zz4K); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-4 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM1ZTcyZTQiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8Y2lyY2xlIHN0cm9rZS1vcGFjaXR5PSIuNSIgY3g9IjE4IiBjeT0iMTgiIHI9IjE4Ii8+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIKICAgICAgICAgICAgICAgICAgICB0eXBlPSJyb3RhdGUiCiAgICAgICAgICAgICAgICAgICAgZnJvbT0iMCAxOCAxOCIKICAgICAgICAgICAgICAgICAgICB0bz0iMzYwIDE4IDE4IgogICAgICAgICAgICAgICAgICAgIGR1cj0iMXMiCiAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICAgICAgICAgICAgPC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-5 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iNjUiIHZpZXdCb3g9IjAgMCA0NSA0NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM1ZTcyZTQiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIKICAgICAgICAgICAgICAgICBiZWdpbj0iMS41cyIgZHVyPSIzcyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjY7MjIiCiAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ic3Ryb2tlLW9wYWNpdHkiCiAgICAgICAgICAgICAgICAgYmVnaW49IjEuNXMiIGR1cj0iM3MiCiAgICAgICAgICAgICAgICAgdmFsdWVzPSIxOzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIKICAgICAgICAgICAgICAgICBiZWdpbj0iMS41cyIgZHVyPSIzcyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjI7MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L2NpcmNsZT4KICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiCiAgICAgICAgICAgICAgICAgYmVnaW49IjNzIiBkdXI9IjNzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iNjsyMiIKICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIKICAgICAgICAgICAgICAgICBiZWdpbj0iM3MiIGR1cj0iM3MiCiAgICAgICAgICAgICAgICAgdmFsdWVzPSIxOzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIKICAgICAgICAgICAgICAgICBiZWdpbj0iM3MiIGR1cj0iM3MiCiAgICAgICAgICAgICAgICAgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgPGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiCiAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNXMiCiAgICAgICAgICAgICAgICAgdmFsdWVzPSI2OzE7MjszOzQ7NTs2IgogICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9jaXJjbGU+CiAgICA8L2c+Cjwvc3ZnPg==); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-6 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMjAgMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iIzVlNzJlNCI+CiAgICA8Y2lyY2xlIGN4PSIxNSIgY3k9IjE1IiByPSIxNSI+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgZnJvbT0iMTUiIHRvPSIxNSIKICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMC44cyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjE1Ozk7MTUiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IiBmcm9tPSIxIiB0bz0iMSIKICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMC44cyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7LjU7MSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iNjAiIGN5PSIxNSIgcj0iOSIgZmlsbC1vcGFjaXR5PSIwLjMiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIGZyb209IjkiIHRvPSI5IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIwLjhzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iOTsxNTs5IiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIgZnJvbT0iMC41IiB0bz0iMC41IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIwLjhzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iLjU7MTsuNSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iMTA1IiBjeT0iMTUiIHI9IjE1Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIwLjhzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iMTU7OTsxNSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIwLjhzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iMTsuNTsxIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgPC9jaXJjbGU+Cjwvc3ZnPgo=); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-7 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzUiIGhlaWdodD0iNDUiIHZpZXdCb3g9IjAgMCA1NSA4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjNWU3MmU0Ij4KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgODApIj4KICAgICAgICA8cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMjAiIHJ4PSIzIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSI0LjNzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iMjA7NDU7NTc7ODA7NjQ7MzI7NjY7NDU7NjQ7MjM7NjY7MTM7NjQ7NTY7MzQ7MzQ7MjsyMzs3Njs3OTsyMCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgICAgPHJlY3QgeD0iMTUiIHdpZHRoPSIxMCIgaGVpZ2h0PSI4MCIgcng9IjMiPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjJzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iODA7NTU7MzM7NTs3NTsyMzs3MzszMzsxMjsxNDs2MDs4MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgICAgPHJlY3QgeD0iMzAiIHdpZHRoPSIxMCIgaGVpZ2h0PSI1MCIgcng9IjMiPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuNHMiCiAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDszNDs3ODsyMzs1NjsyMzszNDs3Njs4MDs1NDsyMTs1MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L3JlY3Q+CiAgICAgICAgPHJlY3QgeD0iNDUiIHdpZHRoPSIxMCIgaGVpZ2h0PSIzMCIgcng9IjMiPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiCiAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjJzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iMzA7NDU7MTM7ODA7NTY7NzI7NDU7NzY7MzQ7MjM7Njc7MzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9yZWN0PgogICAgPC9nPgo8L3N2Zz4=); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-8 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAxMDUgMTA1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM1ZTcyZTQiPgogICAgPGNpcmNsZSBjeD0iMTIuNSIgY3k9IjEyLjUiIHI9IjEyLjUiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjFzIgogICAgICAgICB2YWx1ZXM9IjE7LjI7MSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L2NpcmNsZT4KICAgIDxjaXJjbGUgY3g9IjEyLjUiIGN5PSI1Mi41IiByPSIxMi41IiBmaWxsLW9wYWNpdHk9Ii41Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgIGJlZ2luPSIxMDBtcyIgZHVyPSIxcyIKICAgICAgICAgdmFsdWVzPSIxOy4yOzEiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgPC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI1Mi41IiBjeT0iMTIuNSIgcj0iMTIuNSI+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IgogICAgICAgICBiZWdpbj0iMzAwbXMiIGR1cj0iMXMiCiAgICAgICAgIHZhbHVlcz0iMTsuMjsxIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iNTIuNSIgY3k9IjUyLjUiIHI9IjEyLjUiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgYmVnaW49IjYwMG1zIiBkdXI9IjFzIgogICAgICAgICB2YWx1ZXM9IjE7LjI7MSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L2NpcmNsZT4KICAgIDxjaXJjbGUgY3g9IjkyLjUiIGN5PSIxMi41IiByPSIxMi41Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgIGJlZ2luPSI4MDBtcyIgZHVyPSIxcyIKICAgICAgICAgdmFsdWVzPSIxOy4yOzEiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgPC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI5Mi41IiBjeT0iNTIuNSIgcj0iMTIuNSI+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IgogICAgICAgICBiZWdpbj0iNDAwbXMiIGR1cj0iMXMiCiAgICAgICAgIHZhbHVlcz0iMTsuMjsxIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iMTIuNSIgY3k9IjkyLjUiIHI9IjEyLjUiPgogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgYmVnaW49IjcwMG1zIiBkdXI9IjFzIgogICAgICAgICB2YWx1ZXM9IjE7LjI7MSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICA8L2NpcmNsZT4KICAgIDxjaXJjbGUgY3g9IjUyLjUiIGN5PSI5Mi41IiByPSIxMi41Ij4KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgIGJlZ2luPSI1MDBtcyIgZHVyPSIxcyIKICAgICAgICAgdmFsdWVzPSIxOy4yOzEiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgPC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSI5Mi41IiBjeT0iOTIuNSIgcj0iMTIuNSI+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IgogICAgICAgICBiZWdpbj0iMjAwbXMiIGR1cj0iMXMiCiAgICAgICAgIHZhbHVlcz0iMTsuMjsxIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgIDwvY2lyY2xlPgo8L3N2Zz4K); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-9 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA1OCA1OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMiAxKSIgc3Ryb2tlPSIjNWU3MmU0IiBzdHJva2Utd2lkdGg9IjEuNSI+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjQyLjYwMSIgY3k9IjExLjQ2MiIgcj0iNSIgZmlsbC1vcGFjaXR5PSIxIiBmaWxsPSIjNWU3MmU0Ij4KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuM3MiCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iMTswOzA7MDswOzA7MDswIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjQ5LjA2MyIgY3k9IjI3LjA2MyIgcj0iNSIgZmlsbC1vcGFjaXR5PSIwIiBmaWxsPSIjNWU3MmU0Ij4KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuM3MiCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iMDsxOzA7MDswOzA7MDswIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjQyLjYwMSIgY3k9IjQyLjY2MyIgcj0iNSIgZmlsbC1vcGFjaXR5PSIwIiBmaWxsPSIjNWU3MmU0Ij4KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImZpbGwtb3BhY2l0eSIKICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjEuM3MiCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iMDswOzE7MDswOzA7MDswIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDxjaXJjbGUgY3g9IjI3IiBjeT0iNDkuMTI1IiByPSI1IiBmaWxsLW9wYWNpdHk9IjAiIGZpbGw9IiM1ZTcyZTQiPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IgogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS4zcyIKICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIwOzA7MDsxOzA7MDswOzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICA8L2NpcmNsZT4KICAgICAgICAgICAgPGNpcmNsZSBjeD0iMTEuMzk5IiBjeT0iNDIuNjYzIiByPSI1IiBmaWxsLW9wYWNpdHk9IjAiIGZpbGw9IiM1ZTcyZTQiPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbC1vcGFjaXR5IgogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMS4zcyIKICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIwOzA7MDswOzE7MDswOzAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICA8L2NpcmNsZT4KICAgICAgICAgICAgPGNpcmNsZSBjeD0iNC45MzgiIGN5PSIyNy4wNjMiIHI9IjUiIGZpbGwtb3BhY2l0eT0iMCIgZmlsbD0iIzVlNzJlNCI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxLjNzIgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjA7MDswOzA7MDsxOzA7MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSIxMS4zOTkiIGN5PSIxMS40NjIiIHI9IjUiIGZpbGwtb3BhY2l0eT0iMCIgZmlsbD0iIzVlNzJlNCI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxLjNzIgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjA7MDswOzA7MDswOzE7MCIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiIGZpbGwtb3BhY2l0eT0iMCIgZmlsbD0iIzVlNzJlNCI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxLjNzIgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjA7MDswOzA7MDswOzA7MSIgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-10 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCAxMzUgMTM1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM1ZTcyZTQiPgogICAgPHBhdGggZD0iTTY3LjQ0NyA1OGM1LjUyMyAwIDEwLTQuNDc3IDEwLTEwcy00LjQ3Ny0xMC0xMC0xMC0xMCA0LjQ3Ny0xMCAxMCA0LjQ3NyAxMCAxMCAxMHptOS40NDggOS40NDdjMCA1LjUyMyA0LjQ3NyAxMCAxMCAxMCA1LjUyMiAwIDEwLTQuNDc3IDEwLTEwcy00LjQ3OC0xMC0xMC0xMGMtNS41MjMgMC0xMCA0LjQ3Ny0xMCAxMHptLTkuNDQ4IDkuNDQ4Yy01LjUyMyAwLTEwIDQuNDc3LTEwIDEwIDAgNS41MjIgNC40NzcgMTAgMTAgMTBzMTAtNC40NzggMTAtMTBjMC01LjUyMy00LjQ3Ny0xMC0xMC0xMHpNNTggNjcuNDQ3YzAtNS41MjMtNC40NzctMTAtMTAtMTBzLTEwIDQuNDc3LTEwIDEwIDQuNDc3IDEwIDEwIDEwIDEwLTQuNDc3IDEwLTEweiI+CiAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0KICAgICAgICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICAgICAgICB0eXBlPSJyb3RhdGUiCiAgICAgICAgICAgIGZyb209IjAgNjcgNjciCiAgICAgICAgICAgIHRvPSItMzYwIDY3IDY3IgogICAgICAgICAgICBkdXI9IjIuNXMiCiAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgICA8L3BhdGg+CiAgICA8cGF0aCBkPSJNMjguMTkgNDAuMzFjNi42MjcgMCAxMi01LjM3NCAxMi0xMiAwLTYuNjI4LTUuMzczLTEyLTEyLTEyLTYuNjI4IDAtMTIgNS4zNzItMTIgMTIgMCA2LjYyNiA1LjM3MiAxMiAxMiAxMnptMzAuNzItMTkuODI1YzQuNjg2IDQuNjg3IDEyLjI4NCA0LjY4NyAxNi45NyAwIDQuNjg2LTQuNjg2IDQuNjg2LTEyLjI4NCAwLTE2Ljk3LTQuNjg2LTQuNjg3LTEyLjI4NC00LjY4Ny0xNi45NyAwLTQuNjg3IDQuNjg2LTQuNjg3IDEyLjI4NCAwIDE2Ljk3em0zNS43NCA3LjcwNWMwIDYuNjI3IDUuMzcgMTIgMTIgMTIgNi42MjYgMCAxMi01LjM3MyAxMi0xMiAwLTYuNjI4LTUuMzc0LTEyLTEyLTEyLTYuNjMgMC0xMiA1LjM3Mi0xMiAxMnptMTkuODIyIDMwLjcyYy00LjY4NiA0LjY4Ni00LjY4NiAxMi4yODQgMCAxNi45NyA0LjY4NyA0LjY4NiAxMi4yODUgNC42ODYgMTYuOTcgMCA0LjY4Ny00LjY4NiA0LjY4Ny0xMi4yODQgMC0xNi45Ny00LjY4NS00LjY4Ny0xMi4yODMtNC42ODctMTYuOTcgMHptLTcuNzA0IDM1Ljc0Yy02LjYyNyAwLTEyIDUuMzctMTIgMTIgMCA2LjYyNiA1LjM3MyAxMiAxMiAxMnMxMi01LjM3NCAxMi0xMmMwLTYuNjMtNS4zNzMtMTItMTItMTJ6bS0zMC43MiAxOS44MjJjLTQuNjg2LTQuNjg2LTEyLjI4NC00LjY4Ni0xNi45NyAwLTQuNjg2IDQuNjg3LTQuNjg2IDEyLjI4NSAwIDE2Ljk3IDQuNjg2IDQuNjg3IDEyLjI4NCA0LjY4NyAxNi45NyAwIDQuNjg3LTQuNjg1IDQuNjg3LTEyLjI4MyAwLTE2Ljk3em0tMzUuNzQtNy43MDRjMC02LjYyNy01LjM3Mi0xMi0xMi0xMi02LjYyNiAwLTEyIDUuMzczLTEyIDEyczUuMzc0IDEyIDEyIDEyYzYuNjI4IDAgMTItNS4zNzMgMTItMTJ6bS0xOS44MjMtMzAuNzJjNC42ODctNC42ODYgNC42ODctMTIuMjg0IDAtMTYuOTctNC42ODYtNC42ODYtMTIuMjg0LTQuNjg2LTE2Ljk3IDAtNC42ODcgNC42ODYtNC42ODcgMTIuMjg0IDAgMTYuOTcgNC42ODYgNC42ODcgMTIuMjg0IDQuNjg3IDE2Ljk3IDB6Ij4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybQogICAgICAgICAgICBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iCiAgICAgICAgICAgIHR5cGU9InJvdGF0ZSIKICAgICAgICAgICAgZnJvbT0iMCA2NyA2NyIKICAgICAgICAgICAgdG89IjM2MCA2NyA2NyIKICAgICAgICAgICAgZHVyPSI4cyIKICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICAgIDwvcGF0aD4KPC9zdmc+Cg==); + +} + +article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"].lazyload-style-11 { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUiIGhlaWdodD0iNDUiIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM1ZTcyZTQiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3kiCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiCiAgICAgICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjU7Mjc7NDk7NSIKICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3kiCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIgogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSIKICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1OzUwOzUwOzUiCiAgICAgICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIgogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3IgogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjI3OzQ5OzU7MjciCiAgICAgICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgICAgICA8L2NpcmNsZT4KICAgICAgICAgICAgPGNpcmNsZSBjeD0iNDkiIGN5PSI1MCIgcj0iNSI+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSIKICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTA7NTA7NTs1MCIKICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeCIKICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSIKICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNDk7NTsyNzs0OSIKICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciIKICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); + +} + + + +/*Fancybox 样式*/ + +.fancybox-wrapper { + + width: max-content; + + max-width: 100%; + +} + +figure>.fancybox-wrapper, + +figure>a>.fancybox-wrapper { + + width: unset; + +} + +.fancybox-wrapper.lazyload-container-unload { + + width: 100%; + +} + + + +.fancybox-wrapper>img { + + cursor: pointer; + + cursor: -webkit-zoom-in; + + cursor: zoom-in; + +} + +/*Zoomify 样式*/ + +.zoomify { + + cursor: pointer; + + cursor: -webkit-zoom-in; + + cursor: zoom-in; + +} + +.zoomify.zoomed { + + cursor: -webkit-zoom-out; + + cursor: zoom-out; + + padding: 0; + + margin: 0; + + border: none; + + border-radius: 0; + + box-shadow: none; + + position: relative; + + z-index: 1501; + +} + +.zoomify-shadow { + + position: fixed; + + top: 0; + + left: 0; + + right: 0; + + bottom: 0; + + width: 100%; + + height: 100%; + + display: block; + + z-index: 1500; + + background: rgba(0, 0, 0, 0.3); + + opacity: 0; + +} + +.zoomify-shadow.zoomed { + + opacity: 1; + + cursor: pointer; + + cursor: -webkit-zoom-out; + + cursor: zoom-out; + +} + +.noscroll { + + overflow: hidden !important; + +} + +body.noscroll:before { + + opacity: 0 !important; + +} + + + +/*Share.js*/ + +/* 文章操作按钮容器 */ +#post_actions_container { + display: flex !important; + flex-direction: row !important; + justify-content: flex-end !important; + align-items: center !important; + gap: 10px !important; + margin-bottom: 25px; +} + +/* ---------- 分享按钮 ---------- */ +#share_container { + position: relative; + display: inline-flex; + align-items: flex-end; +} + +#comments_toggle { + display: inline-flex !important; + align-items: center; + gap: 8px; + padding: 8px 16px; + height: 38px; + white-space: nowrap; + background-color: var(--themecolor) !important; + border-color: var(--themecolor) !important; +} + +#comments_toggle:hover { + background-color: var(--themecolor-dark) !important; + border-color: var(--themecolor-dark) !important; +} + +#comments_toggle:active { + background-color: var(--themecolor-dark2) !important; + border-color: var(--themecolor-dark2) !important; +} + +#comments_toggle .btn-inner--icon { + margin-right: 0; +} + +#comments_toggle .btn-inner--text { + font-size: 14px; +} + +/* 分享按钮 - 默认显示 */ +#share_show { + position: relative; + z-index: 2; + height: 38px; + width: 38px; + display: inline-flex; + align-items: center; + justify-content: center; + background-color: var(--themecolor) !important; + border-color: var(--themecolor) !important; + transform: translateY(0); + opacity: 1; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} + +#share_show:hover { + background-color: var(--themecolor-dark) !important; + border-color: var(--themecolor-dark) !important; +} + +#share_show:active { + background-color: var(--themecolor-dark2) !important; + border-color: var(--themecolor-dark2) !important; +} + +/* 分享面板 - 默认隐藏 */ +#share { + position: absolute; + bottom: 0; + right: 0; + display: flex; + flex-direction: row; + gap: 6px; + transform: translateY(15px); + opacity: 0; + pointer-events: none; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* 分享渠道按钮初始状�?*/ +#share>a { + opacity: 0; + transform: translateY(10px); + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), + opacity 0.2s ease-out; +} + +/* 展开状�?- 分享按钮上滑淡出 */ +#share_container.opened #share_show { + transform: translateY(-15px); + opacity: 0; + pointer-events: none; +} + +/* 展开状�?- 分享面板上滑淡入 */ +#share_container.opened #share { + transform: translateY(0); + opacity: 1; + pointer-events: auto; +} + +/* 展开时各按钮错落滑入 */ +#share_container.opened #share>a { + opacity: 1; + transform: translateY(0); +} + +#share_container.opened #share>a:nth-child(1) { + transition-delay: 30ms; +} + +#share_container.opened #share>a:nth-child(2) { + transition-delay: 60ms; +} + +#share_container.opened #share>a:nth-child(3) { + transition-delay: 90ms; +} + +#share_container.opened #share>a:nth-child(4) { + transition-delay: 120ms; +} + +#share_container.opened #share>a:nth-child(5) { + transition-delay: 150ms; +} + +#share_container.opened #share>a:nth-child(6) { + transition-delay: 180ms; +} + +#share_container.opened #share>a:nth-child(7) { + transition-delay: 210ms; +} + +#share_container.opened #share>a:nth-child(8) { + transition-delay: 240ms; +} + +/* 收起时各按钮错落滑出 */ +#share_container:not(.opened) #share>a:nth-child(8) { + transition-delay: 0ms; +} + +#share_container:not(.opened) #share>a:nth-child(7) { + transition-delay: 15ms; +} + +#share_container:not(.opened) #share>a:nth-child(6) { + transition-delay: 30ms; +} + +#share_container:not(.opened) #share>a:nth-child(5) { + transition-delay: 45ms; +} + +#share_container:not(.opened) #share>a:nth-child(4) { + transition-delay: 60ms; +} + +#share_container:not(.opened) #share>a:nth-child(3) { + transition-delay: 75ms; +} + +#share_container:not(.opened) #share>a:nth-child(2) { + transition-delay: 90ms; +} + +#share_container:not(.opened) #share>a:nth-child(1) { + transition-delay: 105ms; +} + +/* 分享按钮通用样式 */ +#share_container .btn { + height: 38px; + width: 38px; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0; + border-radius: 10px; +} + +/* 移动端分享面板适配 */ +@media (max-width: 576px) { + #share { + flex-wrap: wrap; + justify-content: flex-end; + max-width: calc(100vw - 40px); + } +} + +#share .icon-wechat, +#share .icon-copy-link { + position: relative; +} + +/* 二维码弹�?- 显示在按钮上�?*/ +#share .icon-wechat .wechat-qrcode, +#share .icon-copy-link .wechat-qrcode { + position: absolute; + z-index: 10; + bottom: calc(100% + 10px); + left: 50%; + transform: translateX(-50%) translateY(10px); + width: max-content; + width: -moz-max-content; + background: var(--color-widgets); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + text-align: center; + padding: 15px 20px; + transition: opacity 0.25s ease, transform 0.25s ease; + opacity: 0; + border-radius: 12px; + pointer-events: none; +} + +#share .icon-wechat:hover .wechat-qrcode, +#share .icon-copy-link:hover .wechat-qrcode { + transform: translateX(-50%) translateY(0); + opacity: 1; + pointer-events: auto; +} + +/* 二维码弹窗箭�?*/ +#share .wechat-qrcode:before { + position: absolute; + z-index: 3; + bottom: -6px; + left: 50%; + display: block; + width: 12px; + height: 12px; + content: ""; + transform: translateX(-50%) rotate(45deg); + border-radius: 2px; + background: var(--color-widgets); +} + +#share .qrcode img { + margin: auto; +} + +#share .wechat-qrcode h4 { + font-size: 16px; + padding-bottom: 10px; + margin: 0; +} + +#share .wechat-qrcode .help { + color: #666; + padding-top: 10px; + padding-bottom: 0; + font-size: 12px; +} + +html.darkmode #share .wechat-qrcode .help { + color: var(--color-text); +} + +#share>a { + position: relative; +} + +/* tooltip - 显示在按钮上�?*/ +#share>a:before, +#share_show:before { + pointer-events: none; + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%) translateY(5px); + line-height: 1.4; + width: max-content; + width: -moz-max-content; + text-align: center; + font-weight: normal; + color: #fff; + background: rgba(50, 50, 93, 0.95); + padding: 6px 12px; + font-size: 13px; + border-radius: 6px; + z-index: 10; + transition: opacity 0.2s ease, transform 0.2s ease; + opacity: 0; +} + +#share>a:hover:before, +#share_show:hover:before { + transform: translateX(-50%) translateY(0); + opacity: 1; +} + +#share_show:before { + content: attr(tooltip); + height: max-content; + height: -moz-max-content; + text-transform: none; +} + +#share .icon-douban:before { + content: attr(tooltip); +} + +#share .icon-qq:before { + content: attr(tooltip); +} + +#share .icon-qzone:before { + content: attr(tooltip); +} + +#share .icon-weibo:before { + content: attr(tooltip); +} + +#share .icon-facebook:before { + content: attr(tooltip); +} + +#share .icon-twitter:before { + content: attr(tooltip); +} + +#share .icon-telegram:before { + content: attr(tooltip); +} + +#share .icon-copy-link:before { + display: none !important; +} + +/* 移动端分享按钮适配 */ +@media (max-width: 576px) { + + /* 隐藏 tooltip */ + #share>a:before, + #share_show:before { + display: none !important; + } + + /* 二维码弹窗改为左侧显�?*/ + #share .icon-wechat .wechat-qrcode, + #share .icon-copy-link .wechat-qrcode { + bottom: auto; + top: 50%; + left: auto; + right: calc(100% + 10px); + transform: translateY(-50%) translateX(10px); + } + + #share .icon-wechat:hover .wechat-qrcode, + #share .icon-copy-link:hover .wechat-qrcode { + transform: translateY(-50%) translateX(0); + } + + #share .wechat-qrcode:before { + bottom: auto; + top: 50%; + left: auto; + right: -6px; + transform: translateY(-50%) rotate(45deg); + } +} + +/* ========================================================================== + WordPress Adminbar + ========================================================================== */ +#wpadminbar { + position: fixed !important; + width: max-content !important; + height: max-content !important; + width: -moz-max-content !important; + height: -moz-max-content !important; + min-height: 55px; + max-width: 100vw; + background: var(--themecolor) !important; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; + border-radius: 0 100px 100px 0; + padding: 10px 20px; + top: calc(50vh - 27.5px) !important; + left: 0 !important; + transform: translateX(calc(-100% + 25px)); + transition: all 0.3s ease; +} + +#wpadminbar:hover { + transform: none !important; +} + +#wpadminbar:after { + + content: "\f105"; + + font: normal normal normal 20px/1 FontAwesome; + + position: absolute; + + top: 50%; + + transform: translateY(calc(-50% - 2px)); + + right: 10px; + + transition: all 0.3s ease; + + color: #fff; + +} + +#wpadminbar:hover:after { + + opacity: 0; + +} + +html[class], + +html[lang] { + + margin-top: 0 !important; + +} + + + +/*说说*/ + +.shuoshuo-container { + + margin-bottom: 25px; + +} + +.shuoshuo-meta { + + text-align: center; + + background: var(--color-foreground); + + border-radius: 5px 5px 0 0; + + width: max-content; + + width: -moz-max-content; + + padding: 3px 15px; + + font-size: 15px; + + opacity: 0.95; + +} + +.shuoshuo-meta i.fa { + + margin-right: 3px; + +} + +.shuoshuo-date-date, + +.shuoshuo-date-month { + + font-size: 18px; + +} + +.shuoshuo-main { + + border-top-left-radius: 0; + + padding: 20px 20px; + +} + +.shuoshuo-title { + + font-size: 18px; + + color: #555; + + font-weight: bold; + + margin-bottom: 10px; + + width: max-content; + + width: -moz-max-content; + + max-width: 100%; + +} + +.shuoshuo-content { + + padding-bottom: 10px; + +} + +.shuoshuo-content p { + + margin-bottom: 0; + + line-height: 1.8; + +} + +.shuoshuo-content * { + + max-width: 100%; + +} + +.shuoshuo-comments { + + font-size: 14px; + + opacity: 0.85; + + margin-top: 10px; + +} + +.shuoshuo-comments li { + + list-style: none; + +} + +.shuoshuo-comment-item-title { + + font-weight: bold; + +} + +.shuoshuo-comment-item-title .badge-admin, + +.shuoshuo-comment-item-title .badge-private-comment, + +.shuoshuo-comment-item-title .badge-unapproved { + + transform: translateY(-2px); + + padding: 3px 5px; + +} + +.shuoshuo-comments .comment-item-inner { + + margin-top: 2px; + + padding-bottom: 3px; + + border: none !important; + +} + +.shuoshuo-comments ul.children { + + padding-inline-start: 20px; + +} + +.shuoshuo-operations { + + margin-top: 5px; + + margin-left: auto; + + width: max-content; + + width: -moz-max-content; + +} + +.shuoshuo-operations button { + + margin-left: 3px; + +} + +.shuoshuo-operations button.upvoted { + + color: #fff; + + border-color: var(--themecolor); + + background-color: var(--themecolor); + + pointer-events: none; + +} + +@keyframes shuoshuo-upvoted-animation { + + 0% { + + transform: none; + + } + + 50% { + + transform: scale(1.35); + + } + + 100% { + + transform: none; + + } + +} + +.shuoshuo-upvoted-animation i.fa { + + animation: shuoshuo-upvoted-animation 1s ease; + +} + +.shuoshuo-upvote i.fa-spin { + + display: none; + +} + +.shuoshuo-upvote.shuoshuo-upvoting i.fa-spin { + + display: inline-block; + +} + +.shuoshuo-upvote.shuoshuo-upvoting { + + opacity: 0.8; + + pointer-events: none; + +} + + + +.shuoshuo-preview-container { + + margin-bottom: 20px; + + padding: 25px 35px; + + transition: opacity 0.5s ease; + +} + +.shuoshuo-preview-container:before { + + content: ""; + + display: block; + + position: absolute; + + left: -20px; + + top: -10px; + + width: 40px; + + height: 30px; + + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTgzNDIzNDcwNTE4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMwOTciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzc1Ljk5MTUxIDQzNy43MjYzOWM0OC4xMzEyMDctNzQuODg3NTk0IDExNi4yODY0Ny0xMzguMjQ5NjkxIDE4My4wMzg3OC0xODMuNTU2NTczbC03NS4xMzQyMTEtNzkuNDAxMzk4Yy0xNzIuNDgwMzA2IDY3LjY0MDU0LTMzNi43ODMzNzMgMjQyLjYxMTU3My0zMzYuNzgzMzczIDQ0OC40MzkzODJsMS4zMjcyMjggMGMtMC41Njg5NTggNi4yMzE5MzUtMC44NzQ5MjcgMTIuNTQwNjE3LTAuODc0OTI3IDE4LjkyMDkzMiAwIDExMy41ODU5NjUgOTIuMDc3MDkyIDIwNS42NjMwNTYgMjA1LjY2MzA1NiAyMDUuNjYzMDU2IDExMy41ODE4NzEgMCAyMDUuNjYzMDU2LTkyLjA3NzA5MiAyMDUuNjYzMDU2LTIwNS42NjMwNTZDOTU4Ljg5MjE0MyA1MzYuMjM5MDU0IDg3OC44NjAzODkgNDQ5LjA1NTQxMiA3NzUuOTkxNTEgNDM3LjcyNjM5ek00NzIuOTE2ODY2IDI1NC4xNjk4MTdsLTc1LjEzNDIxMS03OS40MDEzOThjLTE3Mi40ODAzMDYgNjcuNjQwNTQtMzM2Ljc4MzM3MyAyNDIuNjExNTczLTMzNi43ODMzNzMgNDQ4LjQzOTM4MmwxLjMyNzIyOCAwYy0wLjU2ODk1OCA2LjIzMTkzNS0wLjg3NDkyNyAxMi41NDA2MTctMC44NzQ5MjcgMTguOTIwOTMyIDAgMTEzLjU4NTk2NSA5Mi4wNzcwOTIgMjA1LjY2MzA1NiAyMDUuNjYzMDU2IDIwNS42NjMwNTZzMjA1LjY2MzA1Ni05Mi4wNzcwOTIgMjA1LjY2MzA1Ni0yMDUuNjYzMDU2YzAtMTA1Ljg5MDcwMi04MC4wMjg2ODUtMTkzLjA3NTM2Ny0xODIuOTAwNjMzLTIwNC40MDMzNjdDMzM4LjAwODI3IDM2Mi44Mzg3OTUgNDA2LjE2MzUzMyAyOTkuNDc2Njk5IDQ3Mi45MTY4NjYgMjU0LjE2OTgxN3oiIHAtaWQ9IjMwOTgiIGZpbGw9IiNmZmZmZmYiIGRhdGEtc3BtLWFuY2hvci1pZD0iYTMxM3guNzc4MTA2OS4wLmkyIiBjbGFzcz0ic2VsZWN0ZWQiPjwvcGF0aD48L3N2Zz4=); + + background-color: var(--themecolor); + + background-position: 40% 35%; + + border-radius: 20px; + + background-size: 32%; + + background-repeat: no-repeat; + + transition: all 0.3s ease; + +} + +.shuoshuo-preview-container:hover:before { + + left: -20px; + + top: -10px; + + width: 40px; + + height: 40px; + + background-position: 45% 45%; + + border-radius: 20px; + + background-size: 40%; + + background-repeat: no-repeat; + +} + +.shuoshuo-preview-meta { + + font-size: 14px; + + opacity: 0.6; + + transition: all 0.3s ease; + + margin-top: 10px; + +} + +.shuoshuo-preview-container .shuoshuo-preview-meta:hover { + + opacity: 0.8; + +} + +.shuoshuo-preview-meta .shuoshuo-date-date, + +.shuoshuo-preview-meta .shuoshuo-date-month { + + font-size: 14px; + +} + +.shuoshuo-preview-link { + + position: absolute; + + right: 20px; + + bottom: 25px; + + opacity: 0; + + transition: all 0.3s ease; + +} + +.shuoshuo-preview-container:hover .shuoshuo-preview-link { + + opacity: 1; + +} + +.shuoshuo-content.shuoshuo-folded { + + position: relative; + + max-height: 400px; + + overflow: hidden; + +} + +.shuoshuo-content.shuoshuo-folded:after { + + content: ""; + + display: block; + + position: absolute; + + left: 0; + + right: 0; + + bottom: 0; + + height: 150px; + + background: linear-gradient(180deg, transparent 0%, var(--color-foreground) 100%); + + pointer-events: none; + +} + +.shuoshuo-content.shuoshuo-folded .show-full-shuoshuo { + + position: absolute; + + bottom: 10px; + + right: 50%; + + transform: translateX(50%); + + color: var(--themecolor); + + z-index: 2; + + text-align: left; + + cursor: pointer; + + user-select: none; + + opacity: 1; + +} + +.shuoshuo-content.shuoshuo-folded .show-full-shuoshuo>button { + + border-radius: var(--card-radius); + + padding: 5px 20px; + + opacity: 0.8; + +} + +.shuoshuo-content.shuoshuo-folded .show-full-shuoshuo button:hover { + + opacity: 1; + +} + + + +.shuoshuo-content:not(.shuoshuo-folded) .show-full-shuoshuo { + + display: none; + +} + +/*归档时间�?/ + +.archive-timeline { + + padding-top: 10px; + +} + +.archive-timeline-title { + + box-shadow: none; + + border: none; + + background: transparent !important; + + font-size: 18px; + + padding: 0; + + margin-left: 1px; + + margin-bottom: 25px; + + padding-top: 7px; + +} + +.archive-timeline-year { + + font-size: 30px; + + color: var(--themecolor); + + margin-top: 12px !important; + + margin-bottom: 0; + +} + +.archive-timeline-month { + + font-size: 24px; + + color: var(--themecolor); + + opacity: 0.8; + + margin-top: 12px !important; + + margin-bottom: 0; + + font-weight: unset; + +} + +.archive-timeline-year + .archive-timeline-title { + + height: 50px; + + margin-top: 30px; + +} + +.archive-timeline *:not(.archive-timeline-year) + .archive-timeline-title:before { + + width: 12px; + + height: 12px; + + left: -34px; + + top: 18px; + +} + +.archive-timeline-month + .archive-timeline-title { + + height: 30px; + +} + +.archive-timeline-month.first-month-of-year + .archive-timeline-title { + + margin-top: -10px; + +} + +.archive-timeline-title > a { + + width: max-content; + + max-width: 100%; + +} + +.argon-timeline-time > a:before, + +.archive-timeline-title > a:before { + + display: none; + +} + +.argon-timeline-node:first-child > .archive-timeline-year + .archive-timeline-title { + + margin-top: 0; + +} + +.archive-timeline h2:before, + +.archive-timeline h3:before, + +.archive-timeline h2:after, + +.archive-timeline h3:after { + + display: none !important; + +} + +/*Loading Spinner*/ + +@keyframes spin { + + to { + + transform: rotate(1turn); + + } + +} + +.spinner-border { + + display: inline-block; + + width: 2rem; + + height: 2rem; + + vertical-align: text-bottom; + + border: 0.25em solid currentColor; + + border-right-color: transparent; + + border-radius: 50%; + + animation: spin 0.75s linear infinite; + +} + +.spinner-border-sm { + + width: 1rem; + + height: 1rem; + + border-width: 0.2em; + +} + +/*Loading Spinner Grow*/ + +@keyframes grow { + + 0% { + + transform: scale(0); + + } + + 50% { + + opacity: 1; + + } + +} + +.spinner-grow { + + display: inline-block; + + width: 2rem; + + height: 2rem; + + vertical-align: text-bottom; + + background-color: currentColor; + + border-radius: 50%; + + opacity: 0; + + animation: grow 0.75s linear infinite; + +} + +.spinner-grow-sm { + + width: 1rem; + + height: 1rem; + +} + +/*Highlight.js*/ + +article table.hljs-ln>tbody>tr>td, + +article table.hljs-ln>tbody>tr>th, + +article table.hljs-ln>tfoot>tr>td, + +article table.hljs-ln>tfoot>tr>th, + +article table.hljs-ln>thead>tr>td, + +article table.hljs-ln>thead>tr>th { + + padding: unset; + + vertical-align: unset; + + border: unset !important; + +} + +.hljs { + + overflow-x: auto; + +} + +pre.hljs-codeblock { + + overflow: visible; + + position: relative; + + tab-size: 4; + +} + +pre.hljs-codeblock:before { + + content: ""; + + position: absolute; + + background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkY1RjU2IiBzdHJva2U9IiNFMDQ0M0UiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iI0ZGQkQyRSIgc3Ryb2tlPSIjREVBMTIzIiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0NiIgY3k9IjYiIHI9IjYiIGZpbGw9IiMyN0M5M0YiIHN0cm9rZT0iIzFBQUIyOSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==) no-repeat; + + background-position-y: center; + + top: 22px; + + left: 20px; + + height: 14px; + + width: 54px; + + margin-left: 5px; + + display: block; + +} + +code[hljs-codeblock-inner] { + + line-height: 1.5; + + font-size: 16px; + + padding: 22px 20px !important; + + border-radius: 8px; + + box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; + + margin-top: 15px !important; + + margin-bottom: 15px !important; + + padding-top: 55px !important; + + display: block; + +} + +.hljs-ln-numbers { + + -webkit-touch-callout: none; + + -webkit-user-select: none; + + -khtml-user-select: none; + + -moz-user-select: none; + + -ms-user-select: none; + + user-select: none; + + text-align: center; + + vertical-align: top; + + padding-right: 12px !important; + + position: absolute; + + left: 20px; + + width: 30px; + + overflow-x: visible !important; + + white-space: nowrap; + + transition: all 0.3s ease; + +} + +.hljs-ln-numbers:before { + + content: ""; + + position: absolute; + + left: -20px; + + width: 20px; + + height: 100%; + + background: inherit; + +} + +pre.hljs-codeblock.hljs-transparent-linenumber .hljs-ln-numbers { + + background: transparent !important; + +} + +.hljs-ln-code { + + padding-left: 30px !important; + + transition: all 0.3s ease; + +} + +pre.hljs-codeblock.hljs-break-line .hljs-ln-code { + + line-break: anywhere; + + white-space: break-spaces; + +} + +pre.hljs-codeblock:not(.hljs-break-line) .hljs-ln-code { + + white-space: pre; + +} + +code[hljs-codeblock-inner]::-webkit-scrollbar-track { + + border: none; + + background: transparent !important; + +} + +code[hljs-codeblock-inner]::-webkit-scrollbar-thumb { + + background: rgba(255, 255, 255, 0.3) !important; + + box-shadow: none !important; + + border: none !important; + + border-radius: 10px; + + transition: background 0.3s ease; + +} + +code[hljs-codeblock-inner]::-webkit-scrollbar-thumb:hover { + + background: rgba(255, 255, 255, 0.5) !important; + +} + +code[hljs-codeblock-inner]::-webkit-scrollbar { + + background: transparent; + + height: 6px; + +} + +code[hljs-codeblock-inner] *::selection { + + background-color: rgba(204, 226, 255, 0.2) !important; + +} + +pre.hljs-codeblock.hljs-codeblock-fullscreen { + + position: fixed; + + left: 0; + + right: 0; + + top: 0; + + bottom: 0; + + z-index: 10000; + + margin: 0 !important; + + animation: codeblock-fullscreen 0.5s cubic-bezier(0.18, 0.89, 0.37, 1.12); + +} + +pre.hljs-codeblock.hljs-codeblock-fullscreen>code[hljs-codeblock-inner] { + + position: absolute; + + left: 0; + + right: 0; + + top: 0; + + bottom: 0; + + border-radius: 0; + + margin: 0 !important; + +} + +pre.hljs-codeblock.hljs-codeblock-fullscreen:before { + + z-index: 10001; + +} + +@keyframes codeblock-fullscreen { + + 0% { + + transform: scale(0.5); + + opacity: 1; + + } + + 100% { + + transform: none; + + opacity: 1; + + } + +} + +pre.hljs-codeblock.hljs-hide-linenumber .hljs-ln-numbers.hljs { + + width: 0px; + + opacity: 0; + +} + +pre.hljs-codeblock.hljs-hide-linenumber .hljs-ln-code { + + padding-left: 4px !important; + +} + +pre.hljs-codeblock .hljs-control { + + display: block; + + position: absolute; + + top: 16px !important; + + right: 20px !important; + + user-select: none; + + opacity: 0; + + transition: all 0.2s ease; + + white-space: nowrap; + + overflow: visible; + + background: transparent; + + padding: 0; + + margin: 0; + +} + +pre.hljs-codeblock:hover .hljs-control { + + opacity: 0.4; + +} + +pre.hljs-codeblock:hover .hljs-control:hover { + + opacity: 1; + +} + +pre.hljs-codeblock .hljs-control i.fa { + + font: normal normal normal 14px/1 FontAwesome !important; + +} + +.hljs-control .hljs-control-btn { + + display: inline-block; + + opacity: 0.8; + + transition: all 0.2s ease; + + cursor: pointer; + + margin-left: 15px; + + width: 12px; + + position: relative; + +} + +.hljs-control .hljs-control-btn:hover { + + opacity: 0.5; + +} + +.hljs-control-btn:before { + + position: absolute; + + top: 22px; + + left: -40px; + + width: 92px; + + text-align: center; + + opacity: 0; + + pointer-events: none; + + transition: all 0.2s ease; + + font-size: 12px; + + font-family: sans-serif; + +} + +.hljs-control-btn:hover:before { + + opacity: 1; + + top: 25px; + +} + +.hljs-control-toggle-linenumber:before { + + content: attr(tooltip-hide-linenumber); + +} + +pre.hljs-codeblock.hljs-hide-linenumber .hljs-control-toggle-linenumber:before { + + content: attr(tooltip-show-linenumber); + +} + +.hljs-control-toggle-break-line:before { + + content: attr(tooltip-enable-breakline); + +} + +pre.hljs-codeblock.hljs-break-line .hljs-control-toggle-break-line:before { + + content: attr(tooltip-disable-breakline); + +} + +.hljs-control-copy:before { + + content: attr(tooltip); + +} + +.hljs-control-fullscreen:before { + + content: attr(tooltip-fullscreen); + +} + +pre.hljs-codeblock.hljs-codeblock-fullscreen .hljs-control-fullscreen:before { + + content: attr(tooltip-exit-fullscreen); + +} + +pre.hljs-codeblock.hljs-codeblock-fullscreen .hljs-control-fullscreen>i:before { + + content: "\f066"; +} + +/*==========Style-Dark==========*/ + + + +html.darkmode body { + + color: #eee; + +} + +html.darkmode body:before { + + content: ""; + + position: fixed; + + left: 0; + + top: 0; + + right: 0; + + bottom: 0; + + height: 100vh; + + width: 100vw; + + background: rgba(0, 0, 0, 0.2); + + z-index: 999999999; + + pointer-events: none; + + transition: background 0.3s ease; + +} + +html.darkmode body.fancybox-active:before { + + background: rgba(0, 0, 0, 0); + +} + +html.darkmode .h1, + +html.darkmode .h2, + +html.darkmode .h3, + +html.darkmode .h4, + +html.darkmode .h5, + +html.darkmode .h6, + +html.darkmode h1, + +html.darkmode h2, + +html.darkmode h3, + +html.darkmode h4, + +html.darkmode h5, + +html.darkmode h6 { + + color: #eee; + +} + +html.darkmode a { + + color: var(--themecolor-light); + +} + +html.darkmode a:hover { + + color: var(--themecolor); + +} + + + +html.darkmode ::-webkit-scrollbar { + + background-color: rgba(255, 255, 255, 0); + +} + +html.darkmode ::-webkit-scrollbar-thumb { + + background-color: rgba(255, 255, 255, 0.25); + +} + + + +html.darkmode .leftbar-menu-item>a { + + color: #eee !important; + +} + + + +html.darkmode .site-state-item-count, + +html.darkmode .site-author-links-item>a, + +html.darkmode .site-friend-links-item>a { + + color: #eee !important; + +} + + + +html.darkmode .site-state-item-name { + + color: #aaa; + +} + + + +html.darkmode .banner { + + background-color: var(--color-darkmode-banner); + +} + +html.darkmode .leftbar-banner { + + background: var(--color-widgets); + +} + + + +html.darkmode #footer { + + background: var(--color-foreground) !important; + +} + + + +html.darkmode .close>span:not(.sr-only) { + + color: #eee; + +} + + + +html.darkmode .tag.badge { + + color: #eee; + +} + + + +html.darkmode .dropdown-item:active { + + background: var(--color-border-on-foreground-deeper); + +} + +html.darkmode .dropdown-item { + + color: #eee !important; + +} + + + +html.darkmode #leftbar_catalog .index-item, + +html.darkmode #leftbar_catalog .index-link { + + color: #eee; + +} + +html.darkmode #leftbar_catalog .index-item.current>.index-link { + + color: var(--themecolor-light); + +} + + + +html.darkmode article .post-content pre:not(.hljs-codeblock) { + + color: #eee; + +} + +html.darkmode article .post-content code:not([hljs-codeblock-inner]) { + + color: #eee; + +} + +html.darkmode .form-control { + + color: #eee; + +} + +html.darkmode input[disabled], + +html.darkmode textarea[disabled], + +html.darkmode #post_comment.logged #post_comment_name, + +html.darkmode #post_comment.logged #post_comment_email { + + opacity: 0.3; + +} + + + +html.darkmode .comment-item-text .comment-image { + + color: var(--themecolor-light) !important; + +} + +html.darkmode #blog_setting_darkmode_switch .custom-toggle-slider { + + border-color: var(--themecolor); + +} + +html.darkmode #blog_setting_darkmode_switch .custom-toggle-slider:before { + + transform: translateX(1.625rem); + + background-color: var(--themecolor); + +} + +html.darkmode .badge { + + color: #eee; + +} + +html.darkmode .page-link { + + color: #eee !important; + +} + +html.darkmode .zoomify-shadow { + + background: rgba(0, 0, 0, 0.6); + +} + +html.darkmode #share .wechat-qrcode .help { + + color: #eee; + +} + +html.darkmode .github-info-card { + + background: #24292e !important; + +} + +html.darkmode .CtxtMenu_Menu { + + filter: invert(0.8); + +} + + + +/*==========Style-Dark-For-AMOLED==========*/ + + + +html.darkmode.amoled-dark .leftbar-banner { + + background: var(--color-foreground); + +} + +html.darkmode.amoled-dark .github-info-card { + + background: #000 !important; + + border: 1px solid #222; + +} + +html.darkmode.amoled-dark #content:before, + +html.darkmode.amoled-dark #content:after { + + display: none; +} + +/* 桌面端隐藏移动端导航区域 */ +.leftbar-mobile-nav { + display: none; +} + +/* 桌面端显示原有侧边栏内容 */ +.leftbar-desktop-content { + display: block; +} + +/*==========Style-Mobile==========*/ + +@media screen and (max-width: 900px) { + + /* 移动端隐藏桌面端侧边栏内容，只显示移动端导航 */ + .leftbar-desktop-content { + display: none !important; + } + + /* 移动端侧边栏 - 优化设计 */ + .leftbar-mobile-nav { + display: flex; + flex-direction: column; + min-height: 100%; + background: var(--color-foreground); + } + + /* 顶部用户信息�?- 增强视觉效果 */ + .leftbar-mobile-profile { + background: var(--themecolor-gradient); + padding: 28px 20px 24px; + position: relative; + color: #fff; + overflow: hidden; + } + + /* 背景装饰圆形 */ + .leftbar-mobile-profile::before { + content: ""; + position: absolute; + top: -60px; + right: -60px; + width: 160px; + height: 160px; + background: rgba(255, 255, 255, 0.08); + border-radius: 50%; + pointer-events: none; + } + + .leftbar-mobile-profile::after { + content: ""; + position: absolute; + bottom: -40px; + left: -40px; + width: 120px; + height: 120px; + background: rgba(255, 255, 255, 0.05); + border-radius: 50%; + pointer-events: none; + } + + .leftbar-mobile-close { + position: absolute; + top: 16px; + right: 16px; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: rgba(255, 255, 255, 0.15); + + -webkit-backdrop-filter: blur(10px); + + backdrop-filter: blur(10px); + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); + color: #fff; + z-index: 1; + } + + .leftbar-mobile-close:active { + background: rgba(255, 255, 255, 0.25); + transform: scale(0.92); + } + + .leftbar-mobile-close i { + font-size: 15px; + } + + .leftbar-mobile-avatar { + width: 72px; + height: 72px; + border-radius: 50%; + overflow: hidden; + border: 3px solid rgba(255, 255, 255, 0.35); + margin-bottom: 14px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); + position: relative; + z-index: 1; + transition: all var(--animation-normal) var(--ease-spring); + } + + .leftbar-mobile-avatar:active { + transform: scale(0.95); + border-color: rgba(255, 255, 255, 0.6); + } + + .leftbar-mobile-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .leftbar-mobile-user-info { + margin-bottom: 18px; + position: relative; + z-index: 1; + } + + .leftbar-mobile-user-name { + font-size: 22px; + font-weight: 700; + margin-bottom: 6px; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 4px; + letter-spacing: -0.3px; + } + + .leftbar-mobile-user-desc { + font-size: 13px; + opacity: 0.9; + line-height: 1.4; + } + + .leftbar-mobile-stats { + display: flex; + gap: 0; + background: rgba(255, 255, 255, 0.12); + + -webkit-backdrop-filter: blur(10px); + + backdrop-filter: blur(10px); + border-radius: 16px; + padding: 12px 8px; + position: relative; + z-index: 1; + } + + .leftbar-mobile-stat { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } + + .leftbar-mobile-stat:not(:last-child)::after { + content: ""; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 24px; + background: rgba(255, 255, 255, 0.2); + } + + .leftbar-mobile-stat .stat-num { + font-size: 20px; + font-weight: 700; + line-height: 1.2; + } + + .leftbar-mobile-stat .stat-label { + font-size: 11px; + opacity: 0.75; + margin-top: 3px; + font-weight: 500; + } + + /* 搜索�?- 优化样式 */ + .leftbar-mobile-search { + padding: 16px 16px 8px; + background: var(--color-foreground); + } + + .leftbar-mobile-search-inner { + display: flex; + align-items: center; + background: var(--color-background); + border-radius: 14px; + padding: 12px 16px; + gap: 12px; + transition: all var(--animation-fast) var(--ease-standard); + border: 1px solid transparent; + } + + .leftbar-mobile-search-inner:focus-within { + border-color: rgba(var(--themecolor-rgbstr), 0.3); + background: var(--color-foreground); + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); + transform: scale(1.02); + } + + .leftbar-mobile-search-inner i { + color: #999; + font-size: 15px; + transition: color var(--animation-fast) var(--ease-standard); + } + + .leftbar-mobile-search-inner:focus-within i { + color: var(--themecolor); + } + + .leftbar-mobile-search-inner input { + flex: 1; + border: none; + background: transparent; + font-size: 15px; + color: var(--color-text-deeper); + outline: none; + } + + .leftbar-mobile-search-inner input::placeholder { + color: #aaa; + } + + /* 导航菜单区域 - 优化间距和样�?*/ + .leftbar-mobile-menu-section { + padding: 12px 12px 8px; + } + + .leftbar-mobile-section-title { + font-size: 11px; + font-weight: 700; + color: #999; + text-transform: uppercase; + letter-spacing: 1.2px; + padding: 8px 12px 12px; + margin-bottom: 0; + } + + .leftbar-mobile-menu { + list-style: none; + padding: 0; + margin: 0; + } + + .leftbar-mobile-menu-item { + margin-bottom: 4px; + } + + .leftbar-mobile-menu-item>a { + display: flex; + align-items: center; + padding: 14px 16px; + color: var(--color-text-deeper); + text-decoration: none; + border-radius: 14px; + transition: all var(--animation-fast) var(--ease-standard); + font-size: 15px; + font-weight: 500; + position: relative; + overflow: hidden; + } + + /* 菜单项涟漪效�?*/ + .leftbar-mobile-menu-item>a::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(var(--themecolor-rgbstr), 0.15); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: width 0.4s var(--ease-standard), height 0.4s var(--ease-standard); + pointer-events: none; + } + + .leftbar-mobile-menu-item>a:active::before { + width: 200%; + height: 200%; + } + + .leftbar-mobile-menu-item>a:active { + background: rgba(var(--themecolor-rgbstr), 0.1); + transform: scale(0.98); + } + + .leftbar-mobile-menu-item.current>a { + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + } + + .leftbar-mobile-menu-item.current>a::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 20px; + background: var(--themecolor); + border-radius: 0 4px 4px 0; + } + + .leftbar-mobile-menu-item .menu-text { + flex: 1; + } + + .leftbar-mobile-menu-item .submenu-arrow { + font-size: 12px; + color: #999; + transition: transform var(--animation-normal) var(--ease-standard); + margin-left: 8px; + } + + .leftbar-mobile-menu-item.expanded .submenu-arrow { + transform: rotate(180deg); + } + + .leftbar-mobile-submenu { + list-style: none; + padding: 0; + margin: 4px 0 4px 16px; + max-height: 0; + overflow: hidden; + transition: max-height var(--animation-normal) var(--ease-standard); + border-left: 2px solid var(--color-border-on-foreground-deeper); + padding-left: 12px; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu { + max-height: 500px; + } + + /* 子菜单项交错入场动画 */ + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item { + animation: fadeInUp 0.25s var(--ease-standard) both; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(1) { + animation-delay: 0.05s; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(2) { + animation-delay: 0.1s; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(3) { + animation-delay: 0.15s; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(4) { + animation-delay: 0.2s; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(5) { + animation-delay: 0.25s; + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item:nth-child(6) { + animation-delay: 0.3s; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item { + margin-bottom: 2px; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item>a { + padding: 11px 14px; + font-size: 14px; + font-weight: 400; + color: #666; + border-radius: 10px; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item>a:active { + color: var(--themecolor); + background: rgba(var(--themecolor-rgbstr), 0.08); + } + + /* 底部操作�?- 优化设计 */ + .leftbar-mobile-footer { + margin-top: auto; + padding: 12px 16px 20px; + border-top: 1px solid var(--color-border-on-foreground-deeper); + background: var(--color-foreground); + } + + .leftbar-mobile-actions { + display: flex; + justify-content: center; + gap: 8px; + } + + .leftbar-mobile-action { + flex: 1; + max-width: 100px; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + padding: 14px 12px; + border: none; + background: var(--color-background); + color: #666; + font-size: 11px; + font-weight: 500; + cursor: pointer; + border-radius: 14px; + transition: all var(--animation-fast) var(--ease-standard); + position: relative; + overflow: hidden; + } + + /* 底部按钮涟漪效果 */ + .leftbar-mobile-action::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(var(--themecolor-rgbstr), 0.2); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: width 0.35s var(--ease-standard), height 0.35s var(--ease-standard); + pointer-events: none; + } + + .leftbar-mobile-action:active::before { + width: 180%; + height: 180%; + } + + .leftbar-mobile-action:active { + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + transform: scale(0.96); + } + + .leftbar-mobile-action i { + font-size: 20px; + transition: transform var(--animation-fast) var(--ease-spring); + } + + .leftbar-mobile-action:active i { + transform: scale(1.1); + } + + /* ========== 移动端折叠面板样�?- Material 3 & iOS 风格 ========== */ + .leftbar-mobile-collapse-section { + margin: 4px 12px; + background: var(--color-background); + border-radius: 14px; + overflow: hidden; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); + transition: all var(--animation-normal) var(--ease-emphasized), + box-shadow var(--animation-normal) var(--ease-standard); + } + + .leftbar-mobile-collapse-section.expanded { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + margin: 6px 12px; + } + + .leftbar-mobile-collapse-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + cursor: pointer; + user-select: none; + transition: all var(--animation-fast) var(--ease-standard); + position: relative; + overflow: hidden; + } + + /* 折叠头部涟漪效果 */ + .leftbar-mobile-collapse-header::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(var(--themecolor-rgbstr), 0.15); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: width 0.6s var(--ease-emphasized-decelerate), + height 0.6s var(--ease-emphasized-decelerate), + opacity 0.4s var(--ease-standard); + pointer-events: none; + opacity: 0; + } + + .leftbar-mobile-collapse-header:active::before { + width: 300%; + height: 300%; + opacity: 1; + } + + .leftbar-mobile-collapse-header:active { + background: rgba(var(--themecolor-rgbstr), 0.04); + } + + .collapse-header-left { + display: flex; + align-items: center; + gap: 10px; + flex: 1; + } + + .collapse-icon { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + border-radius: 8px; + font-size: 12px; + transition: all var(--animation-normal) var(--ease-spring); + } + + .leftbar-mobile-collapse-section.expanded .collapse-icon { + background: var(--themecolor); + color: #fff; + transform: scale(1.08) rotate(3deg); + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.35); + } + + .collapse-title { + font-size: 14px; + font-weight: 600; + color: var(--color-text-deeper); + transition: color var(--animation-fast) var(--ease-standard); + } + + .leftbar-mobile-collapse-section.expanded .collapse-title { + color: var(--themecolor); + } + + .collapse-badge { + background: var(--themecolor); + color: #fff; + font-size: 10px; + font-weight: 700; + padding: 2px 7px; + border-radius: 8px; + min-width: 18px; + text-align: center; + margin-left: auto; + margin-right: 10px; + transition: all var(--animation-normal) var(--ease-spring); + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); + } + + .leftbar-mobile-collapse-section.expanded .collapse-badge { + transform: scale(1.1); + box-shadow: 0 3px 10px rgba(var(--themecolor-rgbstr), 0.4); + } + + .collapse-arrow { + font-size: 11px; + color: #aaa; + transition: all var(--animation-normal) var(--ease-emphasized); + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: transparent; + } + + .leftbar-mobile-collapse-section.expanded .collapse-arrow { + transform: rotate(180deg); + color: var(--themecolor); + background: rgba(var(--themecolor-rgbstr), 0.1); + } + + .leftbar-mobile-collapse-content { + max-height: 0; + overflow: hidden; + transition: max-height var(--animation-slow) var(--ease-emphasized), + opacity var(--animation-normal) var(--ease-standard); + opacity: 0; + } + + .leftbar-mobile-collapse-section.expanded .leftbar-mobile-collapse-content { + max-height: 350px; + opacity: 1; + } + + /* 折叠内容入场动画 */ + .leftbar-mobile-collapse-section.expanded .mobile-catalog-container, + .leftbar-mobile-collapse-section.expanded .mobile-todo-container { + animation: collapseContentFadeIn 0.35s var(--ease-emphasized-decelerate) 0.1s both; + } + + @keyframes collapseContentFadeIn { + from { + opacity: 0; + transform: translateY(-8px); + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + /* ========== 移动端文章目录样�?========== */ + .mobile-catalog-container { + padding: 4px 12px 12px; + } + + #leftbar_mobile_catalog { + max-height: 250px; + overflow-y: auto; + padding-right: 4px; + } + + #leftbar_mobile_catalog::-webkit-scrollbar { + width: 2px; + } + + #leftbar_mobile_catalog::-webkit-scrollbar-track { + background: transparent; + } + + #leftbar_mobile_catalog::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.25); + border-radius: 2px; + } + + #leftbar_mobile_catalog ul { + list-style: none; + padding: 0; + margin: 0; + } + + #leftbar_mobile_catalog .index-item { + margin-bottom: 1px; + } + + #leftbar_mobile_catalog .index-link { + display: block; + padding: 8px 10px; + font-size: 13px; + color: #666; + text-decoration: none; + border-radius: 8px; + transition: all var(--animation-fast) var(--ease-standard), + transform var(--animation-fast) var(--ease-spring); + position: relative; + overflow: hidden; + } + + #leftbar_mobile_catalog .index-link::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%) scaleY(0); + width: 3px; + height: 14px; + background: var(--themecolor); + border-radius: 0 3px 3px 0; + transition: transform var(--animation-normal) var(--ease-spring); + } + + #leftbar_mobile_catalog .index-item.current>.index-link { + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + font-weight: 500; + padding-left: 14px; + } + + #leftbar_mobile_catalog .index-item.current>.index-link::before { + transform: translateY(-50%) scaleY(1); + } + + #leftbar_mobile_catalog .index-link:active { + background: rgba(var(--themecolor-rgbstr), 0.12); + transform: scale(0.97); + } + + #leftbar_mobile_catalog .index-subItem-box { + padding-left: 14px; + border-left: 2px solid var(--color-border-on-foreground-deeper); + margin-left: 10px; + margin-top: 2px; + } + + #leftbar_mobile_catalog .index-subItem-box .index-link { + font-size: 12px; + padding: 6px 8px; + } + + /* ========== 移动端TODO样式 ========== */ + .mobile-todo-container { + padding: 4px 12px 12px; + } + + .mobile-todo-add-form { + display: flex; + gap: 6px; + margin-bottom: 10px; + } + + .mobile-todo-add-form input { + flex: 1; + border: 1.5px solid var(--color-border-on-foreground-deeper); + border-radius: 10px; + padding: 8px 12px; + font-size: 13px; + background: var(--color-foreground); + color: var(--color-text-deeper); + transition: all var(--animation-fast) var(--ease-standard), + transform var(--animation-fast) var(--ease-spring); + outline: none; + } + + .mobile-todo-add-form input:focus { + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); + transform: scale(1.01); + } + + .mobile-todo-add-form input::placeholder { + color: #aaa; + font-size: 12px; + } + + .mobile-todo-add-form button { + width: 36px; + height: 36px; + border: none; + border-radius: 10px; + background: var(--themecolor); + color: #fff; + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all var(--animation-fast) var(--ease-spring); + flex-shrink: 0; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); + } + + .mobile-todo-add-form button:active { + transform: scale(0.88); + background: var(--themecolor-dark); + box-shadow: 0 1px 4px rgba(var(--themecolor-rgbstr), 0.2); + } + + .mobile-todo-list { + list-style: none; + padding: 0; + margin: 0; + max-height: 200px; + overflow-y: auto; + } + + .mobile-todo-list::-webkit-scrollbar { + width: 2px; + } + + .mobile-todo-list::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.25); + border-radius: 2px; + } + + .mobile-todo-item { + display: flex; + align-items: center; + padding: 10px 12px; + background: var(--color-foreground); + border-radius: 10px; + margin-bottom: 6px; + transition: all var(--animation-fast) var(--ease-standard), + transform var(--animation-fast) var(--ease-spring), + box-shadow var(--animation-fast) var(--ease-standard); + animation: mobileTodoSlideIn 0.35s var(--ease-emphasized-decelerate) both; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); + } + + @keyframes mobileTodoSlideIn { + from { + opacity: 0; + transform: translateY(-10px) scale(0.94); + } + + to { + opacity: 1; + transform: translateY(0) scale(1); + } + } + + .mobile-todo-item:last-child { + margin-bottom: 0; + } + + .mobile-todo-item:active { + transform: scale(0.97); + background: var(--color-border-on-foreground); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + } + + .mobile-todo-content { + flex: 1; + font-size: 13px; + color: var(--color-text-deeper); + line-height: 1.4; + word-break: break-word; + } + + .mobile-todo-complete-btn, + .mobile-todo-urge-btn, + .mobile-todo-delete-btn { + width: 28px; + height: 28px; + border: none; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-spring); + flex-shrink: 0; + margin-left: 8px; + font-size: 11px; + } + + .mobile-todo-complete-btn { + background: rgba(40, 167, 69, 0.12); + color: #28a745; + } + + .mobile-todo-complete-btn:active { + background: #28a745; + color: #fff; + transform: scale(0.85); + box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4); + } + + .mobile-todo-urge-btn { + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + } + + .mobile-todo-urge-btn:active { + background: var(--themecolor); + color: #fff; + transform: scale(0.85); + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.4); + } + + .mobile-todo-urge-btn.urged { + background: #28a745; + color: #fff; + animation: urgeSuccessMobile 0.5s var(--ease-spring); + } + + @keyframes urgeSuccessMobile { + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.15); + } + } + + .mobile-todo-delete-btn { + background: rgba(220, 53, 69, 0.1); + color: #dc3545; + } + + .mobile-todo-delete-btn:active { + background: #dc3545; + color: #fff; + transform: scale(0.85); + box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4); + } + + .mobile-todo-done-mark { + width: 28px; + height: 28px; + border-radius: 8px; + background: rgba(40, 167, 69, 0.1); + color: #28a745; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + margin-left: 8px; + flex-shrink: 0; + } + + .mobile-todo-item.todo-completed .mobile-todo-content { + text-decoration: line-through; + color: #adb5bd; + } + + .mobile-todo-item.todo-completed { + opacity: 0.6; + order: 1; + transform: scale(0.98); + max-height: 500px; + overflow: hidden; + transition: all var(--animation-normal) var(--ease-emphasized), + max-height var(--animation-normal) var(--ease-emphasized), + margin var(--animation-normal) var(--ease-emphasized), + padding var(--animation-normal) var(--ease-emphasized), + opacity var(--animation-normal) var(--ease-emphasized); + } + + .mobile-todo-item.todo-completed.collapsed { + max-height: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + opacity: 0; + transform: translateY(-10px) scale(0.9); + } + + .mobile-todo-item.todo-completing { + opacity: 0; + transform: translateX(40px) scale(0.85); + max-height: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + transition: all 0.4s var(--ease-emphasized-accelerate); + } + + .mobile-todo-empty { + text-align: center; + color: #bbb; + font-size: 12px; + padding: 20px 0; + } + + .mobile-todo-empty::before { + content: "\f0ae"; + font-family: FontAwesome; + display: block; + font-size: 24px; + margin-bottom: 8px; + opacity: 0.35; + } + + /* 移动端折叠已完成按钮 */ + .mobile-todo-collapse-btn { + display: flex; + align-items: center; + gap: 3px; + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + border: none; + border-radius: 8px; + padding: 2px 6px; + font-size: 10px; + font-weight: 600; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); + margin-left: 6px; + flex-shrink: 0; + } + + .mobile-todo-collapse-btn:active { + background: rgba(var(--themecolor-rgbstr), 0.25); + transform: scale(0.92); + } + + .mobile-todo-collapse-btn i { + font-size: 8px; + transition: transform var(--animation-fast) var(--ease-standard); + } + + .mobile-todo-collapse-btn.collapsed i { + transform: rotate(-90deg); + } + + .mobile-todo-completed-count { + min-width: 10px; + text-align: center; + } + + /* 移动端已完成任务分隔�?*/ + .mobile-todo-completed-divider { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 12px; + margin: 8px 0 6px; + background: var(--color-foreground); + border-radius: 10px; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); + user-select: none; + border-top: 1px dashed rgba(var(--themecolor-rgbstr), 0.2); + border-bottom: 1px dashed rgba(var(--themecolor-rgbstr), 0.2); + list-style: none; + } + + .mobile-todo-completed-divider:active { + background: rgba(var(--themecolor-rgbstr), 0.08); + transform: scale(0.98); + } + + .mobile-todo-completed-divider .divider-text { + display: flex; + align-items: center; + gap: 5px; + font-size: 11px; + font-weight: 600; + color: #6c757d; + } + + .mobile-todo-completed-divider .divider-text i { + color: #28a745; + font-size: 10px; + } + + .mobile-todo-completed-divider .mobile-todo-completed-count { + background: rgba(40, 167, 69, 0.15); + color: #28a745; + font-size: 9px; + font-weight: 600; + padding: 2px 5px; + border-radius: 6px; + min-width: 16px; + text-align: center; + } + + .mobile-todo-completed-divider .divider-arrow { + font-size: 9px; + color: #6c757d; + transition: transform var(--animation-fast) var(--ease-standard); + } + + .mobile-todo-completed-divider.collapsed .divider-arrow { + transform: rotate(-90deg); + } + + #navbar_global { + background: var(--color-foreground); + } + + #float_action_buttons #fabtn_open_sidebar { + display: block; + } + + /* 移动端隐藏浮动按钮提示文�?*/ + #float_action_buttons .fabtn:before { + display: none !important; + } + + /* 移动端侧边栏容器 - 优化动画 */ + #leftbar { + position: fixed; + background: var(--color-foreground); + top: 0; + left: 0; + height: 100%; + width: 300px; + padding: 0; + margin-bottom: 0; + overflow: auto; + overflow-x: hidden; + z-index: 1002; + box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); + transform: translateX(-100%); + transition: transform var(--animation-normal) var(--ease-emphasized); + will-change: transform; + } + + html.leftbar-opened #leftbar { + transform: translateX(0); + } + + /* 移动端侧边栏入场动画关键�?*/ + @keyframes slideInFromLeft { + from { + opacity: 0; + transform: translateX(-20px); + } + + to { + opacity: 1; + transform: translateX(0); + } + } + + @keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(16px); + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + @keyframes scaleIn { + from { + opacity: 0; + transform: scale(0.8); + } + + to { + opacity: 1; + transform: scale(1); + } + } + + @keyframes circleExpand { + from { + transform: scale(0.6); + opacity: 0; + } + + to { + transform: scale(1); + opacity: 1; + } + } + + /* 侧边栏内容交错入场动�?*/ + html.leftbar-opened .leftbar-mobile-profile { + animation: slideInFromLeft 0.4s var(--ease-emphasized) 0.05s both; + } + + html.leftbar-opened .leftbar-mobile-avatar { + animation: scaleIn 0.35s var(--ease-spring) 0.15s both; + } + + html.leftbar-opened .leftbar-mobile-user-info { + animation: fadeInUp 0.35s var(--ease-emphasized) 0.2s both; + } + + /* 多邻国连胜徽章入场动�?*/ + html.leftbar-opened .leftbar-mobile-user-name .duolingo-streak { + animation: duolingoBadgeIn 0.4s var(--ease-spring) 0.35s both; + } + + @keyframes duolingoBadgeIn { + from { + opacity: 0; + transform: scale(0.5) translateX(-10px); + } + + to { + opacity: 1; + transform: scale(1) translateX(0); + } + } + + html.leftbar-opened .leftbar-mobile-stats { + animation: fadeInUp 0.35s var(--ease-emphasized) 0.25s both; + } + + html.leftbar-opened .leftbar-mobile-profile::before { + animation: circleExpand 0.5s var(--ease-spring) 0.2s both; + } + + html.leftbar-opened .leftbar-mobile-profile::after { + animation: circleExpand 0.5s var(--ease-spring) 0.3s both; + } + + html.leftbar-opened .leftbar-mobile-search { + animation: slideInFromLeft 0.4s var(--ease-emphasized) 0.12s both; + } + + html.leftbar-opened .leftbar-mobile-menu-section:nth-child(3) { + animation: slideInFromLeft 0.4s var(--ease-emphasized) 0.18s both; + } + + html.leftbar-opened .leftbar-mobile-menu-section:nth-child(4) { + animation: slideInFromLeft 0.4s var(--ease-emphasized) 0.24s both; + } + + html.leftbar-opened .leftbar-mobile-footer { + animation: fadeInUp 0.4s var(--ease-emphasized) 0.3s both; + } + + /* 菜单项交错入�?*/ + html.leftbar-opened .leftbar-mobile-menu-item { + animation: fadeInUp 0.3s var(--ease-standard) both; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(1) { + animation-delay: 0.22s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(2) { + animation-delay: 0.26s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(3) { + animation-delay: 0.30s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(4) { + animation-delay: 0.34s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(5) { + animation-delay: 0.38s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(6) { + animation-delay: 0.42s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(7) { + animation-delay: 0.46s; + } + + html.leftbar-opened .leftbar-mobile-menu-item:nth-child(8) { + animation-delay: 0.50s; + } + + #leftbar_part1, + #leftbar_part2 { + box-shadow: none !important; + } + + #leftbar_part2 { + position: relative !important; + width: 100% !important; + top: unset !important; + } + + #leftbar_part2_inner { + max-height: unset; + height: max-content; + height: -moz-max-content; + } + + #leftbar_part2_inner:before { + content: ""; + display: block; + margin: auto; + margin-bottom: 15px; + transform: translateY(-10px); + width: 80%; + height: 1px; + background: var(--color-border-on-foreground-deeper); + } + + #leftbar::-webkit-scrollbar { + display: none; + } + + html.leftbar-opened { + overflow: hidden; + } + + /* 遮罩�?- 优化动画 */ + #sidebar_mask { + position: fixed; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100vw; + height: 100vh; + z-index: 1001; + background: rgba(0, 0, 0, 0.5); + + -webkit-backdrop-filter: blur(2px); + + backdrop-filter: blur(2px); + opacity: 0; + visibility: hidden; + transition: opacity var(--animation-normal) var(--ease-standard), + visibility var(--animation-normal) var(--ease-standard); + } + + html.leftbar-opened #sidebar_mask { + opacity: 1; + visibility: visible; + } + + .leftbar-menu-item { + overflow: hidden; + } + + .leftbar-menu-item:hover { + height: max-content; + } + + .leftbar-menu-item:hover:after { + transform: rotateZ(90deg) translateY(1px); + } + + .leftbar-menu-subitem { + position: static; + width: calc(100% - 10px) !important; + margin-left: 10px; + box-shadow: none !important; + } + + .leftbar-menu-item:hover .leftbar-menu-subitem { + + position: static; + + width: 100%; + + box-shadow: none; + + } + + .leftbar-banner { + + padding-top: 40px; + + padding-bottom: 40px; + + padding-left: 20px; + + text-align: left; + + border-radius: 0; + + } + + .leftbar-banner-subtitle { + + margin-top: 10px; + + } + + #leftbar_announcement { + + border-radius: 0; + + margin-bottom: 0; + + background: linear-gradient(180deg, var(--themecolor-dark), var(--themecolor) 90%); + + } + + html.darkmode #leftbar_announcement { + + background: var(--color-border-on-foreground) !important; + + } + + #leftbar_announcement:after { + + content: ""; + + height: 1px; + + background: #fff; + + opacity: 0.15; + + margin-left: 15px; + + margin-right: 15px; + + } + + .leftbar-announcement-body { + + opacity: 0.8; + + padding-top: 20px; + + } + + #leftbar_announcement~#leftbar_part1 .leftbar-banner { + + background: var(--themecolor) !important; + + padding-top: 25px; + + padding-bottom: 25px; + + } + + html.darkmode #leftbar_announcement~#leftbar_part1 .leftbar-banner { + + background: var(--color-border-on-foreground) !important; + + } + + #primary { + + width: 100%; + + } + + #main { + + padding: 5px; + + } + + + + .post-header.post-header-with-thumbnail .post-header-text-container { + + padding-bottom: 20px; + + } + + .post-thumbnail { + + max-height: 30vh; + + } + + .post-header.post-header-with-thumbnail .post-header-text-container { + + padding-bottom: 20px; + + } + + + + .post-donate img { + + max-width: 70vw; + + } + + + + #comments .children { + padding-inline-start: 15px; + } + + /* 夜间模式适配 - 移动端侧边栏 */ + html.darkmode .leftbar-mobile-profile { + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.8) 0%, + rgba(var(--themecolor-rgbstr), 0.6) 100%); + } + + html.darkmode .leftbar-mobile-profile::before, + html.darkmode .leftbar-mobile-profile::after { + background: rgba(255, 255, 255, 0.05); + } + + html.darkmode .leftbar-mobile-stats { + background: rgba(0, 0, 0, 0.2); + } + + html.darkmode .leftbar-mobile-search-inner { + background: var(--color-background); + } + + html.darkmode .leftbar-mobile-search-inner:focus-within { + background: var(--color-widgets); + } + + html.darkmode .leftbar-mobile-action { + background: var(--color-widgets); + color: #aaa; + } + + html.darkmode .leftbar-mobile-action:active { + color: var(--themecolor-light); + } + + html.darkmode .leftbar-mobile-section-title { + color: #777; + } + + html.darkmode .leftbar-mobile-submenu .leftbar-mobile-menu-item>a { + color: #999; + } + + /* ========== 移动端文章卡片独立样�?========== */ + /* 移动端布局 1: 大图模式 (默认) */ + html.mobile-layout-1 article.post-preview-layout-2, + article.post-preview-layout-2 { + flex-direction: column; + max-height: none; + } + + html.mobile-layout-1 article.post-preview-layout-2 .post-header.post-header-with-thumbnail, + article.post-preview-layout-2 .post-header.post-header-with-thumbnail { + width: 100%; + height: 200px; + border-radius: var(--card-radius) var(--card-radius) 0 0; + } + + html.mobile-layout-1 article.post-preview-layout-2 .post-thumbnail, + article.post-preview-layout-2 .post-thumbnail { + height: 200px !important; + max-height: 200px !important; + } + + html.mobile-layout-1 article.post-preview-layout-2 .post-content-container, + article.post-preview-layout-2 .post-content-container { + padding: 18px 20px 20px; + } + + html.mobile-layout-1 article.post-preview-layout-2 .post-content, + article.post-preview-layout-2 .post-content { + -webkit-line-clamp: 3; + margin-top: 12px; + line-height: 1.7; + } + + /* 移动端布局 2: 紧凑模式 */ + html.mobile-layout-2 article.post-preview-layout-2 { + flex-direction: column; + max-height: none; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-header.post-header-with-thumbnail { + width: 100%; + height: 140px; + border-radius: var(--card-radius) var(--card-radius) 0 0; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-thumbnail { + height: 140px !important; + max-height: 140px !important; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-content-container { + padding: 14px 16px 16px; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-content { + -webkit-line-clamp: 2; + margin-top: 8px; + line-height: 1.6; + font-size: 14px; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-title { + font-size: 16px; + } + + html.mobile-layout-2 article.post-preview-layout-2 .post-meta-detail { + font-size: 12px; + } + + /* 移动端布局 3: 横向模式 */ + html.mobile-layout-3 article.post-preview-layout-2 { + flex-direction: row; + max-height: 120px; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-header.post-header-with-thumbnail { + width: 120px; + height: 120px; + border-radius: var(--card-radius) 0 0 var(--card-radius); + flex-shrink: 0; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-thumbnail { + height: 120px !important; + max-height: 120px !important; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-content-container { + padding: 12px 14px; + justify-content: center; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-content { + -webkit-line-clamp: 2; + margin-top: 6px; + line-height: 1.5; + font-size: 13px; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-title { + font-size: 15px; + line-height: 1.3; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-meta-detail { + font-size: 11px; + } + + html.mobile-layout-3 article.post-preview-layout-2 .post-tags { + display: none; + } + + /* 通用移动端文章卡片样�?*/ + article.post-preview-layout-2 .post-title { + font-size: 18px; + line-height: 1.4; + } + + article.post-preview-layout-2 .post-meta-detail { + font-size: 13px; + } + + /* ========== 移动端搜索框动画 (照搬桌面�? ========== */ + .leftbar-mobile-search-inner { + position: relative; + transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); + } + + .leftbar-mobile-search-inner:focus-within { + transform: scale(1.02); + box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.15); + } + + .leftbar-mobile-search-inner input { + transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); + } + + /* 搜索框聚焦时的光标动�?*/ + @keyframes searchPulse { + + 0%, + 100% { + box-shadow: 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.2); + } + + 50% { + box-shadow: 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.1); + } + } + + .leftbar-mobile-search-inner:focus-within { + animation: searchPulse 2s ease-in-out infinite; + } + + /* ========== 更多流畅侧边栏动�?========== */ + /* 关闭按钮旋转入场 */ + @keyframes rotateIn { + from { + opacity: 0; + transform: rotate(-90deg) scale(0.5); + } + + to { + opacity: 1; + transform: rotate(0) scale(1); + } + } + + html.leftbar-opened .leftbar-mobile-close { + animation: rotateIn 0.4s var(--ease-spring) 0.1s both; + } + + /* 统计数字弹跳动画 */ + @keyframes bounceIn { + 0% { + opacity: 0; + transform: scale(0.3); + } + + 50% { + transform: scale(1.1); + } + + 70% { + transform: scale(0.9); + } + + 100% { + opacity: 1; + transform: scale(1); + } + } + + html.leftbar-opened .leftbar-mobile-stat:nth-child(1) .stat-num { + animation: bounceIn 0.5s var(--ease-spring) 0.3s both; + } + + html.leftbar-opened .leftbar-mobile-stat:nth-child(2) .stat-num { + animation: bounceIn 0.5s var(--ease-spring) 0.4s both; + } + + html.leftbar-opened .leftbar-mobile-stat:nth-child(3) .stat-num { + animation: bounceIn 0.5s var(--ease-spring) 0.5s both; + } + + /* 搜索图标脉冲动画 */ + @keyframes iconPulse { + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } + } + + html.leftbar-opened .leftbar-mobile-search-inner i { + animation: iconPulse 0.6s var(--ease-spring) 0.35s both; + } + + /* 底部按钮交错入场 */ + html.leftbar-opened .leftbar-mobile-action:nth-child(1) { + animation: fadeInUp 0.35s var(--ease-emphasized) 0.35s both; + } + + html.leftbar-opened .leftbar-mobile-action:nth-child(2) { + animation: fadeInUp 0.35s var(--ease-emphasized) 0.42s both; + } + + html.leftbar-opened .leftbar-mobile-action:nth-child(3) { + animation: fadeInUp 0.35s var(--ease-emphasized) 0.49s both; + } + + /* 底部按钮图标悬浮效果 */ + .leftbar-mobile-action i { + transition: transform 0.3s var(--ease-spring); + } + + .leftbar-mobile-action:active i { + transform: scale(1.15) rotate(-5deg); + } + + /* 菜单项悬浮指示器 */ + .leftbar-mobile-menu-item.current>a { + position: relative; + } + + .leftbar-mobile-menu-item.current>a::after { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 4px; + height: 20px; + background: var(--themecolor); + border-radius: 0 4px 4px 0; + animation: slideInFromLeft 0.3s var(--ease-spring) both; + } + + /* 子菜单展开箭头旋转 */ + .leftbar-mobile-menu-item .submenu-arrow { + transition: transform 0.3s var(--ease-spring); + } + + .leftbar-mobile-menu-item.expanded .submenu-arrow { + transform: rotate(180deg); + } + + /* 遮罩层淡入增�?*/ + #sidebar_mask { + transition: opacity 0.35s var(--ease-emphasized), + visibility 0.35s var(--ease-emphasized), + backdrop-filter 0.35s var(--ease-emphasized); + } + + html.leftbar-opened #sidebar_mask { + + -webkit-backdrop-filter: blur(4px); + + backdrop-filter: blur(4px); + } +} + +@media screen and (max-width: 1000px) { + + .navbar-main { + + padding-left: 10px; + + padding-right: 10px; + + } + + .navbar-main .container { + + margin: 0; + + max-width: 100vw; + + } + + .navbar-toggler-icon { + + width: 20px; + + height: 20px; + + } + +} + +@media screen and (max-width: 900px) { + + .navbar-toggler { + + outline: none !important; + + } + + .navbar-collapse-header { + + border: none !important; + + } + + .navbar-collapse .navbar-collapse-header { + + margin-bottom: 0 !important; + + } + + html.darkmode #navbar_global * { + + color: #eee; + + } + + html.darkmode #navbar_global .navbar-toggler * { + background: #eee; + } + + /*.navbar-brand.navbar-icon { + + display: none; + + } + + .navbar-brand.navbar-icon-mobile { + + display: block; + + margin-right: 5px; + + }*/ + + .navbar-title { + + margin-right: 0; + + } + + #navbar_search_btn_mobile { + + display: list-item; + + } + + #navbar_search_container { + + display: none; + + } + + #navbar_global.show+#navbar_menu_mask { + + display: block; + + position: fixed; + + left: 0; + + top: 0; + + height: 100vh; + + width: 100vw; + + z-index: 1049; + + background: transparent; + + } + + .navbar-nav:not(#navbar_search_btn_mobile)>.nav-item i:not(.d-lg-none) { + + margin-right: 8px; + + text-align: center; + + width: 14px; + + } + + + + .navbar-nav:not(#navbar_search_btn_mobile)>.nav-item i:not(.d-lg-none) { + + margin-right: 8px; + + text-align: center; + + width: 14px; + + } + + + + .navbar-transparent .navbar-toggler-icon { + + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzAgMzAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMwIDMwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNi4zIiB5MT0iNCIgeDI9IjI3LjEiIHkyPSI0Ii8+DQo8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjYuMyIgeTE9IjEyLjUiIHgyPSIyNy4xIiB5Mj0iMTIuNSIvPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI2LjMiIHkxPSIyMSIgeDI9IjI3LjEiIHkyPSIyMSIvPg0KPC9zdmc+DQo=); + + } + + .navbar-toggler-searcg-icon { + + background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMwIDMwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48Y2lyY2xlIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjE0IiBjeT0iMTEuNiIgcj0iOC44Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIyMC43IiB5MT0iMTcuNCIgeDI9IjI3LjMiIHkyPSIyNCIvPjwvZz48L3N2Zz4=) !important; + + } + +} + +@media screen and (min-width: 900px) and (max-width: 1000px) { + + #leftbar_part2.sticky { + + transform: translateY(-25px); + + } + + body.leftbar-can-headroom.headroom---unpinned #leftbar_part2.sticky { + + transform: translateY(-5px); + + } + +} + +@media screen and (max-width: 900px) { + + /*TimeLine*/ + + .argon-timeline { + + margin-left: 75px; + + } + +} + +@media screen and (max-width: 450px) { + + /*Fab 设置菜单*/ + + #fabtn_blog_settings_popup { + + position: fixed; + + left: 0 !important; + + right: 0 !important; + + bottom: 0 !important; + + z-index: 1005; + + width: 100vw; + + padding: 10px 25px; + + opacity: 0; + + max-width: unset; + + pointer-events: none; + + transform: translateY(15px); + + transition: all 0.3s ease; + + animation: none !important; + + border-radius: var(--card-radius) var(--card-radius) 0 0; + + } + + #close_blog_settings { + + margin-right: -10px; + + } + +} + +@media screen and (max-width: 600px) { + + /*浮动操作按钮透明*/ + + #float_action_buttons { + + opacity: 0.5; + + } + + #float_action_buttons:hover, + + #float_action_buttons.blog_settings_opened { + + opacity: 1; + + } + + /*文章边界缩小*/ + + .post-full { + + margin-left: -10px; + + margin-right: -10px; + + } + + /*显示更少的页�?/ + + .pagination:not(.pagination-mobile) { + + display: none; + + } + + .pagination.pagination-mobile { + + display: flex; + + } + +} + +@media screen and (max-width: 690px) { + + /*文章分享的浮动二维码*/ + + #share .icon-wechat .wechat-qrcode { + + position: fixed; + + z-index: 2000; + + left: 50%; + + top: 50%; + + bottom: unset; + + right: unset; + + width: max-content; + + width: -moz-max-content; + + background: var(--color-foreground); + + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + + text-align: center; + + padding: 15px 30px; + + transition: visibility 0.25s, opacity 0.25s, transform 0.25s; + + transform: translate(-50%, calc(-50% + 10px)); + + opacity: 0; + + pointer-events: none; + + } + + #share .icon-wechat:hover .wechat-qrcode { + + transform: translate(-50%, -50%); + + opacity: 1; + + } + + #share .wechat-qrcode:before { + + display: none; + + } + + #share .icon-wechat:before { + + content: ""; + + display: block; + + position: fixed; + + left: 0; + + top: 0; + + right: 0; + + bottom: 0; + + height: 100%; + + width: 100%; + + z-index: 1999; + + pointer-events: none; + + transform: none; + + background: rgba(0, 0, 0, 0.6); + + opacity: 0; + + } + + #share .icon-wechat:hover:before { + + opacity: 1; + + } + +} + + + +/*打印样式优化*/ + +@media print { + + #leftbar, + + #post_comment, + + #float_action_buttons, + + #toolbar, + + #share_container { + + display: none !important; + + } + + #primary { + + width: 100% !important; + + } + + #content { + + max-width: unset !important; + + } + + article { + + width: 100% !important; + + } + + article .post-content a { + + text-decoration: underline !important; + + } + + article a::after { + + content: " (" attr(href) ")"; + + } + + html>body { + + background-color: white !important; + + } + + article p { + + color: rgba(0, 0, 0, 0.8) !important; + + } + + article { + + font: 13pt Georgia, "Nimbus Roman No9 L", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", + + "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", + + "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", + + PMingLiU, MingLiU, serif !important; + + } + +} + +/*Noscript*/ + +html.no-js article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"] { + + display: none; + +} + +html.no-js .comment-item-text .comment-sticker.lazyload { + + display: none; + +} + + + +/*Safari 兼容*/ + +html.using-safari #float_action_buttons .fabtn:before, + +html.using-safari #share>a:before, + +html.using-safari #share_show:before, + +html.using-safari .post-comment-link-container:before, + +html.using-safari .post-comment-captcha-container:before, + +html.using-safari #post_comment_toggle_extra_input:before, + +html.using-safari .comment-post-checkbox:before, + +html.using-safari .comment-time-details, + +html.using-safari #share .icon-wechat .wechat-qrcode { + + -webkit-transform: translate3d(0, 0, 0) !important; + transform: translate3d(0, 0, 0) !important; + + width: unset !important; + + white-space: nowrap; + +} + +@media screen and (max-width: 690px) { + + html.using-safari #share .icon-wechat .wechat-qrcode { + + transform: translate3d(-50%, -50%, 0) !important; + + } + +} + +html.using-safari .post-donate .donate-btn:hover~.donate-qrcode { + + transform: translateX(-50%); + + opacity: 1; + +} + +html.using-safari #fabtn_blog_settings_popup { + + -webkit-transform: translate3d(0, 0, 0) !important; + transform: translate3d(0, 0, 0) !important; + +} + +html.using-safari #blog_setting_toggle_darkmode_and_amoledarkmode:before, + +html.using-safari #blog_setting_card_radius_to_default:before { + + transform: translate3d(-50%, 0, 0) !important; + + white-space: nowrap; + +} + +html.using-safari .friend-link-description:after { + + display: none; + +} + + +/* 下面是抄袭萌娘百科的css */ +.huhua { + color: #9ea3a9 !important; + text-decoration: line-through !important; + text-shadow: none !important; + transition: color .2s ease; +} + +.huhua a { + color: inherit !important; + text-decoration: inherit !important; +} + +.huhua:hover, +.huhua:active { + color: #7f858b !important; +} + +.text-blur, +.text-blur a, +a .text-blur, +.text-blur a.new { + filter: blur(2px) !important; + transition: filter var(--text-blur-transition-time, .2s) ease, color var(--text-blur-transition-time, .2s) ease; + display: inline-block; +} + +.text-blur a { + color: inherit !important; +} + +.text-blur:hover, +.text-blur:active, +.text-blur:hover .text-blur, +.text-blur:active .text-blur { + filter: none !important; + color: var(--text-blur-color, inherit) !important; +} + +.text-blur:hover a, +a:hover .text-blur, +.text-blur:active a, +a:active .text-blur { + filter: none !important; + color: inherit !important; +} + +.color-curtain, +.color-curtain a, +a .color-curtain, +.color-curtain a.new { + background-color: var(--curtain-bg, #252525) !important; + color: var(--curtain-bg, #252525) !important; + text-shadow: none !important; + text-decoration: none !important; + transition: color .2s ease, background-color .2s ease; +} + +.color-curtain a { + color: inherit !important; + transition: inherit !important; +} + +.color-curtain:hover, +.color-curtain:active, +.color-curtain:hover .color-curtain, +.color-curtain:active .color-curtain { + color: var(--curtain-fg, #fff) !important; +} + +.color-curtain:hover a, +a:hover .color-curtain, +.color-curtain:active a, +a:active .color-curtain { + color: inherit !important; +} + +.color-curtain:hover .new, +.color-curtain .new:hover, +.new:hover .color-curtain, +.color-curtain:active .new, +.color-curtain .new:active, +.new:active .color-curtain { + color: #BA0000 !important; +} + +/* + * 放置于这里的CSS将应用于所有皮�? + * 萌娘百科仅开放Vector皮肤 + * 请尊重萌娘百科版权，以下代码除非注明均是管理员手敲出来的！！！复制需要注明源自萌娘百科，并且附上URL地址 `http://zh.moegirl.org/MediaWiki:Common.css` + * 版权协定：知识共�?署名-非商业性使�?相同方式共享 3.0 + * 复制之后请把图片换成自己网站上URL地址�? + */ + +.heimu, +.heimu a, +a .heimu, +.heimu a.new { + background-color: #252525 !important; + color: #252525 !important; + text-shadow: none !important; + transition: color var(--heimu-transition-time, .2s) ease, background-color var(--heimu-transition-time, .2s) ease; +} + +.heimu a { + color: inherit !important; + transition: inherit; +} + +.heimu:hover, +.heimu:active, +.heimu:hover .heimu, +.heimu:active .heimu { + color: white !important; +} + +.heimu:hover a, +a:hover .heimu, +.heimu:active a, +a:active .heimu { + color: inherit !important; +} + +.heimu:hover .new, +.heimu .new:hover, +.new:hover .heimu, +.heimu:active .new, +.heimu .new:active, +.new:active .heimu { + color: #BA0000 !important; +} + +/* Fix macro styles in dark mode */ +html.darkmode .heimu a, +html.darkmode .color-curtain a { + color: inherit !important; +} + +html.darkmode .heimu:hover a, +html.darkmode .color-curtain:hover a { + color: inherit !important; +} + +/* Ensure heimu/color-curtain visibility in dark mode comment sections */ +html.darkmode .comment-content .heimu, +html.darkmode .comment-content .color-curtain { + background-color: #252525 !important; + color: #252525 !important; +} + +html.darkmode .comment-content .heimu:hover, +html.darkmode .comment-content .heimu:active, +html.darkmode .comment-content .color-curtain:hover, +html.darkmode .comment-content .color-curtain:active { + color: #fff !important; +} + +/* Disable global underline effect for links in macros to prevent animation conflicts */ +article .post-content .heimu a:before, +article .post-content .color-curtain a:before, +article .post-content .text-blur a:before, +article .post-content .huhua a:before { + display: none !important; + content: none !important; +} + +/* Ensure links in macros inherit transition properties */ +.heimu a, +.color-curtain a, +.text-blur a, +.huhua a { + transition: inherit !important; +} + + +/* ===== Git 版本徽章 ===== */ +.git-version-badge { + display: inline-flex; + align-items: center; + gap: 4px; + margin-left: 8px; + padding: 2px 8px; + background: rgba(0, 0, 0, 0.15); + border-radius: 10px; + font-size: 11px; + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + color: inherit; + opacity: 0.7; + transition: opacity 0.2s ease; + vertical-align: middle; + cursor: pointer; + user-select: none; +} + +.git-version-badge:hover { + opacity: 1; +} + +.git-version-badge .git-icon { + width: 11px; + height: 11px; + color: #f05033; + flex-shrink: 0; +} + +/* Git 彩蛋弹窗 */ +.git-easter-egg-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); + + -webkit-backdrop-filter: blur(8px); + + backdrop-filter: blur(8px); + display: flex; + align-items: center; + justify-content: center; + z-index: 10000; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; +} + +.git-easter-egg-overlay.show { + opacity: 1; + visibility: visible; +} + +.git-easter-egg-modal { + background: var(--color-background, #fff); + border-radius: 20px; + box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3); + padding: 40px 50px; + text-align: center; + transform: scale(0.7) translateY(30px); + opacity: 0; + transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; + max-width: 90%; + min-width: 300px; + position: relative; + z-index: 2; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.git-easter-egg-overlay.show .git-easter-egg-modal { + transform: scale(1) translateY(0); + opacity: 1; +} + +.git-easter-egg-emoji { + font-size: 56px; + margin-bottom: 15px; + animation: eggBounce 0.8s ease infinite; + display: inline-block; +} + +@keyframes eggBounce { + + 0%, + 100% { + transform: translateY(0) rotate(-5deg); + } + + 50% { + transform: translateY(-12px) rotate(5deg); + } +} + +.git-easter-egg-content { + font-size: 18px; + color: var(--color-text, #525f7f); + margin-bottom: 30px; + line-height: 1.7; + font-weight: 500; +} + +.git-easter-egg-buttons { + display: flex; + gap: 15px; + justify-content: center; +} + +.git-easter-egg-btn { + padding: 12px 32px; + border: none; + border-radius: 10px; + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: transform 0.2s ease, box-shadow 0.2s ease; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); +} + +.git-easter-egg-btn.btn-good { + background: var(--themecolor, #5e72e4); + color: #fff; +} + +.git-easter-egg-btn.btn-good:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(94, 114, 228, 0.4); +} + +.git-easter-egg-btn.btn-good:active { + transform: translateY(-1px); +} + +.git-easter-egg-btn.btn-bad { + position: fixed; + z-index: 10001; + background: linear-gradient(135deg, #ff6b6b, #ee5a5a); + color: #fff; + transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), + top 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), + transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), + box-shadow 0.2s ease, + background 0.3s ease; + opacity: 0; + visibility: hidden; +} + +.git-easter-egg-overlay.show .git-easter-egg-btn.btn-bad { + opacity: 1; + visibility: visible; +} + +.git-easter-egg-btn.btn-bad:hover { + box-shadow: 0 8px 25px rgba(238, 90, 90, 0.5); +} + +/* 假装乖巧时的样式 */ +.git-easter-egg-btn.btn-bad.pretend-nice { + background: linear-gradient(135deg, #a8e6cf, #88d8b0); + box-shadow: 0 4px 15px rgba(136, 216, 176, 0.4); +} + +/* 移动�?*/ +@media screen and (max-width: 576px) { + .git-version-badge { + display: none; + } +} + + +/* ===== TODO 列表 ===== */ +#leftbar_part3 { + margin-top: 10px; + transition: top 0.3s ease, transform 0.3s ease; +} + +#leftbar_part3.sticky { + position: fixed; + top: calc(80px + var(--leftbar-part2-height, 300px)); + width: 240px; +} + +#leftbar_part3 .card-body { + padding: 12px 16px; + max-height: 50vh; + overflow-y: auto; +} + +#leftbar_part3 .card-body::-webkit-scrollbar { + width: 6px; +} + +#leftbar_part3 .card-body::-webkit-scrollbar-track { + background: transparent; +} + +#leftbar_part3 .card-body::-webkit-scrollbar-thumb { + border-width: 1px; + background-color: rgba(0, 0, 0, 0.2); +} + +html.darkmode #leftbar_part3 .card-body::-webkit-scrollbar-thumb { + border-width: 1px; + background-color: rgba(255, 255, 255, 0.2); +} + +#leftbar_part3 .card-body::-webkit-scrollbar-button { + height: 5px; + pointer-events: none; +} + +body.leftbar-can-headroom.headroom---unpinned #leftbar_part3.sticky { + top: calc(10px + var(--leftbar-part2-height, 300px)); +} + +html.navbar-absolute #leftbar_part3.sticky { + top: calc(10px + var(--leftbar-part2-height, 300px)) !important; +} + +@media screen and (min-width: 900px) and (max-width: 1000px) { + #leftbar_part3.sticky { + transform: translateY(-25px); + } + + body.leftbar-can-headroom.headroom---unpinned #leftbar_part3.sticky { + transform: translateY(-5px); + } +} + +.todo-title { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 10px; + font-size: 14px; +} + +.todo-title i { + color: var(--themecolor); + font-size: 13px; +} + +.todo-count { + background: var(--themecolor); + color: #fff; + font-size: 10px; + font-weight: 600; + padding: 2px 7px; + border-radius: 8px; + margin-left: auto; +} + +/* 折叠已完成按�?*/ +.todo-collapse-btn { + display: flex; + align-items: center; + gap: 4px; + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + border: none; + border-radius: 8px; + padding: 2px 7px; + font-size: 10px; + font-weight: 600; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); + margin-left: 6px; +} + +.todo-collapse-btn:hover { + background: rgba(var(--themecolor-rgbstr), 0.2); + transform: scale(1.05); +} + +.todo-collapse-btn i { + font-size: 9px; + transition: transform var(--animation-fast) var(--ease-standard); +} + +.todo-collapse-btn.collapsed i { + transform: rotate(-90deg); +} + +.todo-completed-count { + min-width: 12px; + text-align: center; +} + +/* 已完成任务分隔栏 */ +.todo-completed-divider { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 10px; + margin: 8px 0 6px; + background: var(--color-foreground); + border-radius: 8px; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); + user-select: none; + border-top: 1px dashed rgba(var(--themecolor-rgbstr), 0.2); + border-bottom: 1px dashed rgba(var(--themecolor-rgbstr), 0.2); + list-style: none; +} + +.todo-completed-divider:hover { + background: rgba(var(--themecolor-rgbstr), 0.05); +} + +.todo-completed-divider .divider-text { + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; + font-weight: 600; + color: #6c757d; +} + +.todo-completed-divider .divider-text i { + color: #28a745; + font-size: 11px; +} + +.todo-completed-divider .todo-completed-count { + background: rgba(40, 167, 69, 0.15); + color: #28a745; + font-size: 10px; + font-weight: 600; + padding: 2px 6px; + border-radius: 6px; + min-width: 18px; + text-align: center; +} + +.todo-completed-divider .divider-arrow { + font-size: 10px; + color: #6c757d; + transition: transform var(--animation-fast) var(--ease-standard); +} + +.todo-completed-divider.collapsed .divider-arrow { + transform: rotate(-90deg); +} + +/* 站长端：显示未完成数�?*/ +.todo-count::before { + content: ''; +} + +.todo-add-form { + display: flex; + gap: 6px; + margin-bottom: 10px; + align-items: center; +} + +.todo-add-form input { + flex: 1; + border-radius: 6px; + border: 1px solid #e9ecef; + padding: 6px 10px; + font-size: 13px; + height: 32px; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.todo-add-form input:focus { + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(var(--themecolor-R), var(--themecolor-G), var(--themecolor-B), 0.1); + outline: none; +} + +.todo-add-form input::placeholder { + color: #adb5bd; + font-size: 12px; +} + +.todo-add-form button { + padding: 0; + width: 32px; + height: 32px; + border-radius: 6px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.todo-list { + list-style: none; + padding: 0; + margin: 0; +} + +.todo-list-scroll { + overflow-y: visible; + padding-right: 0; +} + +.todo-list-scroll::-webkit-scrollbar { + width: 4px; +} + +.todo-list-scroll::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 2px; +} + +.todo-list-scroll::-webkit-scrollbar-thumb { + background: #ccc; + border-radius: 2px; +} + +.todo-list-scroll::-webkit-scrollbar-thumb:hover { + background: #aaa; +} + +.todo-item { + display: flex; + align-items: center; + padding: 8px 10px; + background: var(--color-foreground, #f8f9fa); + border-radius: 8px; + margin-bottom: 6px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + animation: todoSlideIn 0.3s ease; +} + +@keyframes todoSlideIn { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.todo-item:last-child { + margin-bottom: 0; +} + +.todo-item:hover { + background: #f0f2f5; + transform: translateX(2px); +} + +.todo-content { + flex: 1; + font-size: 13px; + line-height: 1.4; + color: var(--color-text, #525f7f); + word-break: break-word; +} + +.todo-complete-btn, +.todo-urge-btn { + width: 24px; + height: 24px; + border: none; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + flex-shrink: 0; + margin-left: 8px; + font-size: 11px; +} + +.todo-complete-btn { + background: #d4edda; + color: #28a745; +} + +.todo-complete-btn:hover { + background: #28a745; + color: #fff; + transform: scale(1.1); +} + +.todo-urge-btn { + background: rgba(var(--themecolor-rgbstr), 0.15); + color: var(--themecolor); +} + +.todo-urge-btn:hover { + background: var(--themecolor); + color: #fff; + transform: scale(1.1); +} + +.todo-urge-btn.urged { + background: #28a745; + color: #fff; + animation: urgeSuccess 0.5s ease; +} + +.todo-urge-btn.urged i::before { + content: "\f00c"; +} + +@keyframes urgeSuccess { + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } +} + +.todo-urge-btn:disabled, +.todo-complete-btn:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none; +} + +.todo-item.todo-completing { + opacity: 0; + transform: translateX(30px) scale(0.9); + max-height: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +.todo-item.todo-completed .todo-content { + text-decoration: line-through; + color: #adb5bd; +} + +.todo-item.todo-completed { + opacity: 0.7; + order: 1; + max-height: 500px; + overflow: hidden; + transition: all var(--animation-normal) var(--ease-emphasized), + max-height var(--animation-normal) var(--ease-emphasized), + margin var(--animation-normal) var(--ease-emphasized), + padding var(--animation-normal) var(--ease-emphasized), + opacity var(--animation-normal) var(--ease-emphasized); +} + +.todo-item.todo-completed.collapsed { + max-height: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + opacity: 0; + transform: translateY(-10px); +} + +.todo-item.todo-completed:hover { + opacity: 0.85; +} + +/* 已完成任务的完成标记（访客端�?*/ +.todo-item.todo-completed .todo-done-mark { + width: 24px; + height: 24px; + border-radius: 50%; + background: #d4edda; + color: #28a745; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + margin-left: 8px; + flex-shrink: 0; +} + +.todo-delete-btn { + width: 24px; + height: 24px; + border: none; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + flex-shrink: 0; + background: #f8d7da; + color: #dc3545; + margin-left: 8px; + font-size: 11px; +} + +.todo-delete-btn:hover { + background: #dc3545; + color: #fff; + transform: scale(1.1); +} + +.todo-empty { + text-align: center; + color: #adb5bd; + font-size: 12px; + padding: 20px 0; +} + +.todo-empty::before { + content: "\f0ae"; + font-family: FontAwesome; + display: block; + font-size: 24px; + margin-bottom: 8px; + opacity: 0.5; +} + +.todo-captcha-container { + margin-top: 10px; + padding-top: 10px; + border-top: 1px dashed #e9ecef; +} + +.todo-captcha-container .input-group { + max-width: 250px; +} + +.todo-captcha-text { + font-family: monospace; + font-weight: bold; + background: #f8f9fa; + cursor: default; +} + +#todo-captcha-submit { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +/* 深色模式 */ +html.darkmode .todo-item { + background: var(--color-foreground, #2d3748); +} + +html.darkmode .todo-item:hover { + background: #3d4758; +} + +html.darkmode .todo-add-form input { + background: var(--color-foreground, #2d3748); + border-color: #4a5568; + color: #e2e8f0; +} + +html.darkmode .todo-add-form input:focus { + border-color: var(--themecolor); +} + +/* ===== 多邻国连�?===== */ +.duolingo-streak { + display: inline-flex; + align-items: center; + gap: 3px; + font-size: 14px; + font-weight: 700; + color: #FF9600; + margin-left: 6px; + vertical-align: middle; + animation: duolingoFadeIn 0.5s var(--ease-emphasized-decelerate) both; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.duolingo-streak.not-done { + color: #999; + text-shadow: none; +} + +.duolingo-flame { + width: 14px; + height: 17px; + animation: duolingoFlameGlow 2s ease-in-out infinite; +} + +.duolingo-streak.not-done .duolingo-flame { + animation: none; + opacity: 0.6; +} + +/* 多邻国火焰动�?*/ +@keyframes duolingoFlameGlow { + + 0%, + 100% { + filter: drop-shadow(0 0 2px rgba(255, 150, 0, 0.4)); + transform: scale(1); + } + + 50% { + filter: drop-shadow(0 0 6px rgba(255, 150, 0, 0.8)); + transform: scale(1.05); + } +} + +@keyframes duolingoFadeIn { + from { + opacity: 0; + transform: translateX(-5px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +/* 移动端多邻国连胜样式优化 */ +.leftbar-mobile-user-name .duolingo-streak { + font-size: 15px; + margin-left: 8px; + padding: 3px 10px 3px 6px; + background: rgba(0, 0, 0, 0.25); + border-radius: 14px; + gap: 4px; + color: #fff; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + + -webkit-backdrop-filter: blur(4px); + + backdrop-filter: blur(4px); +} + +.leftbar-mobile-user-name .duolingo-streak.not-done { + background: rgba(0, 0, 0, 0.2); + color: rgba(255, 255, 255, 0.7); + text-shadow: none; +} + +.leftbar-mobile-user-name .duolingo-flame { + width: 16px; + height: 19px; + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); +} + + +/* ===== 禁止选中（文章内容除外） ===== */ +body { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#post_content, +.post-content, +.comment-content, +.card-body p, +textarea, +input { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} + +/* ===== 禁止图片拖动（文章内容除外） ===== */ +img { + -webkit-user-drag: none; + pointer-events: auto; +} + +#post_content img, +.post-content img { + -webkit-user-drag: auto; +} + +/* ===== 修复评论框溢�?===== */ +#post_comment.card { + overflow: visible; +} + +#post_comment .card-body { + overflow: visible; +} + +#post_comment .post-comment-title { + overflow: hidden; +} + + +/* ===== 友情链接 ===== */ +.friend-links-container { + margin-top: 20px; +} + +.friend-links-category { + color: var(--themecolor); + font-size: 18px; + font-weight: 600; + margin: 25px 0 15px; + padding-bottom: 8px; + border-bottom: 2px solid var(--themecolor); +} + +.friend-links-category:first-child { + margin-top: 0; +} + +.friend-links-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 15px; +} + +.friend-link-card { + display: flex; + align-items: center; + padding: 15px; + background: var(--card-bg); + border-radius: var(--card-radius); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + text-decoration: none; + color: inherit; + transition: all 0.3s ease; +} + +.friend-link-card:hover { + text-decoration: none; + color: inherit; +} + +.friend-link-avatar { + flex-shrink: 0; + width: 50px; + height: 50px; + margin-right: 12px; +} + +.friend-link-avatar img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; +} + +.friend-link-avatar-placeholder { + width: 100%; + height: 100%; + border-radius: 50%; + background: linear-gradient(135deg, var(--themecolor), #8e99e4); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + font-weight: bold; +} + +.friend-link-info { + flex: 1; + min-width: 0; +} + +.friend-link-name { + font-size: 15px; + font-weight: 600; + color: var(--font-color); + margin-bottom: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.friend-link-desc { + font-size: 12px; + color: #999; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* 暗色模式适配 */ +html.darkmode .friend-link-card { + background: var(--card-bg); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +html.darkmode .friend-link-name { + color: var(--font-color); +} + +@media (max-width: 768px) { + .friend-links-grid { + grid-template-columns: 1fr; + } +} + + +/* ========== 友情链接页面样式 ========== */ + +/* 页面头部 */ +.argon-fl-header { + margin-bottom: 20px; +} + +.argon-fl-page-title { + font-size: 28px; + margin: 0 0 10px; + color: var(--themecolor); +} + +.argon-fl-page-title i { + margin-right: 10px; +} + +.argon-fl-page-desc { + color: var(--color-text-secondary); + margin-bottom: 15px; +} + +.argon-fl-page-desc p:last-child { + margin-bottom: 0; +} + +.argon-fl-stats { + display: flex; + gap: 20px; + font-size: 14px; + color: var(--color-text-secondary); +} + +.argon-fl-stats i { + margin-right: 5px; + color: var(--themecolor); +} + +/* 分类卡片 */ +.argon-fl-category-card { + margin-bottom: 20px; +} + +.argon-fl-category-title { + font-size: 18px; + margin: 0 0 20px; + padding-bottom: 12px; + border-bottom: 2px solid var(--themecolor); + color: var(--color-text); + display: flex; + align-items: center; +} + +.argon-fl-category-title i { + margin-right: 10px; + color: var(--themecolor); +} + +.argon-fl-category-count { + margin-left: auto; + background: var(--themecolor); + color: #fff; + font-size: 12px; + padding: 2px 10px; + border-radius: 20px; + font-weight: normal; +} + +/* 友链网格 */ +.argon-fl-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 15px; +} + +@media (max-width: 768px) { + .argon-fl-grid { + grid-template-columns: 1fr; + } +} + +/* 友链项目 */ +.argon-fl-item { + display: flex; + align-items: center; + padding: 15px; + background: var(--color-background); + border-radius: var(--card-radius); + text-decoration: none !important; + transition: all 0.3s ease; + border: 1px solid transparent; +} + +.argon-fl-item:hover { + background: var(--color-foreground); + border-color: var(--themecolor); + transform: translateX(5px); + box-shadow: 0 4px 15px rgba(94, 114, 228, 0.15); +} + +.argon-fl-item:before { + display: none; +} + +/* 头像 */ +.argon-fl-avatar { + width: 50px; + height: 50px; + flex-shrink: 0; + margin-right: 15px; + position: relative; +} + +.argon-fl-avatar img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + border: 2px solid var(--color-border); +} + +.argon-fl-avatar-text { + width: 100%; + height: 100%; + border-radius: 50%; + background: linear-gradient(135deg, var(--themecolor), var(--themecolor-light)); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + font-weight: bold; +} + +/* 内容 */ +.argon-fl-content { + flex: 1; + min-width: 0; +} + +.argon-fl-name { + font-size: 16px; + font-weight: 600; + color: var(--color-text); + margin-bottom: 4px; + display: flex; + align-items: center; +} + +.argon-fl-verified-icon { + color: #28a745; + font-size: 14px; + margin-left: 6px; +} + +.argon-fl-desc { + font-size: 13px; + color: var(--color-text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* 箭头 */ +.argon-fl-arrow { + color: var(--color-text-secondary); + opacity: 0; + transform: translateX(-10px); + transition: all 0.3s ease; +} + +.argon-fl-item:hover .argon-fl-arrow { + opacity: 1; + transform: translateX(0); +} + +/* 空状�?*/ +.argon-fl-empty { + text-align: center; + padding: 60px 20px; + color: var(--color-text-secondary); +} + +.argon-fl-empty i { + font-size: 64px; + margin-bottom: 20px; + opacity: 0.3; + color: var(--themecolor); +} + +.argon-fl-empty p { + margin: 0; + font-size: 18px; +} + +.argon-fl-empty-hint { + font-size: 14px !important; + margin-top: 10px !important; + opacity: 0.7; +} + +/* 申请卡片 */ +.argon-fl-apply-card { + margin-top: 10px; +} + +.argon-fl-apply-title { + font-size: 20px; + margin: 0 0 20px; + color: var(--themecolor); +} + +.argon-fl-apply-title i { + margin-right: 10px; +} + +/* 申请结果 */ +.argon-fl-result { + padding: 15px 20px; + border-radius: var(--card-radius); + margin-bottom: 20px; + display: flex; + align-items: center; +} + +.argon-fl-result i { + margin-right: 10px; + font-size: 18px; +} + +.argon-fl-result.success { + background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05)); + color: #28a745; + border: 1px solid rgba(40, 167, 69, 0.3); +} + +.argon-fl-result.error { + background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05)); + color: #dc3545; + border: 1px solid rgba(220, 53, 69, 0.3); +} + +/* 申请要求 */ +.argon-fl-requirements { + background: var(--color-background); + padding: 20px; + border-radius: var(--card-radius); + margin-bottom: 25px; + font-size: 14px; + line-height: 1.8; +} + +.argon-fl-requirements p:last-child { + margin-bottom: 0; +} + +.argon-fl-requirements ul { + margin: 10px 0 0; + padding-left: 20px; +} + +/* 表单 */ +.argon-fl-form { + margin-top: 20px; +} + +.argon-fl-form-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} + +@media (max-width: 768px) { + .argon-fl-form-grid { + grid-template-columns: 1fr; + } +} + +.argon-fl-field { + margin-bottom: 20px; +} + +.argon-fl-field label { + display: block; + margin-bottom: 8px; + font-weight: 500; + font-size: 14px; + color: var(--color-text); +} + +.argon-fl-field label .required { + color: #dc3545; + margin-left: 2px; +} + +.argon-fl-field input, +.argon-fl-field textarea { + width: 100%; + padding: 12px 16px; + border: 1px solid var(--color-border); + border-radius: var(--card-radius); + font-size: 14px; + background: var(--color-background); + color: var(--color-text); + transition: all 0.2s ease; +} + +.argon-fl-field input:focus, +.argon-fl-field textarea:focus { + outline: none; + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.15); + background: var(--color-foreground); +} + +.argon-fl-field textarea { + resize: vertical; + min-height: 100px; +} + +.argon-fl-submit { + text-align: center; + padding-top: 10px; +} + +.argon-fl-submit button { + padding: 14px 50px; + font-size: 16px; +} + +.argon-fl-submit button i { + margin-right: 10px; +} + +/* 夜间模式 */ +html.darkmode .argon-fl-item:hover { + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); +} + +/* ======================================== + 顶栏增强样式 - Toolbar Enhancement + ======================================== */ + +/* 顶栏基础增强 - 柔和毛玻璃效�?*/ +#navbar-main { + -webkit-backdrop-filter: blur(12px) saturate(120%); + backdrop-filter: blur(12px) saturate(120%); + border-bottom: none; + box-shadow: none; +} + +/* 顶栏底部柔和过渡伪元�?*/ +#navbar-main::after { + content: ''; + position: absolute; + bottom: -20px; + left: 0; + right: 0; + height: 20px; + background: linear-gradient(to bottom, + rgba(var(--themecolor-rgbstr), 0.15) 0%, + rgba(var(--themecolor-rgbstr), 0.05) 40%, + transparent 100%); + pointer-events: none; + opacity: 0; + transition: opacity 0.3s ease; +} + +/* 滚动后显示底部渐�?*/ +#navbar-main:not(.navbar-ontop)::after { + opacity: 1; +} + +/* 顶栏在顶部时的透明状�?*/ +html.navbar-absolute:not(.no-banner) #navbar-main.navbar-ontop { + background: linear-gradient(to bottom, + rgba(0, 0, 0, 0.2) 0%, + rgba(0, 0, 0, 0.1) 50%, + transparent 100%) !important; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); +} + +/* 顶栏渐变背景模式 */ +html.toolbar-gradient #navbar-main { + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.88) 0%, + rgba(var(--themecolor-rgbstr), 0.82) 100%) !important; +} + +/* 顶栏玻璃态模�?*/ +html.toolbar-glass #navbar-main { + background: rgba(255, 255, 255, 0.12) !important; + -webkit-backdrop-filter: blur(20px) saturate(180%); + backdrop-filter: blur(20px) saturate(180%); + border-bottom: none; +} + +html.toolbar-glass.darkmode #navbar-main { + background: rgba(0, 0, 0, 0.25) !important; +} + +/* 顶栏阴影增强 - 更柔�?*/ +html.toolbar-shadow #navbar-main { + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); +} + +html.toolbar-shadow.darkmode #navbar-main { + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); +} + +/* 顶栏底部边框 - 更柔�?*/ +html.toolbar-border #navbar-main { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +html.toolbar-border.darkmode #navbar-main { + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +/* 顶栏标题样式增强 */ +.navbar-brand.navbar-title { + font-weight: 600; + letter-spacing: 0.5px; + transition: all 0.3s ease; +} + +.navbar-brand.navbar-title:hover { + transform: scale(1.02); +} + +/* 顶栏图标增强 */ +.navbar-brand.navbar-icon img { + transition: all 0.3s ease; + border-radius: 6px; +} + +.navbar-brand.navbar-icon:hover img { + transform: scale(1.08); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); +} + +/* 顶栏菜单项增�?*/ +.navbar-nav .nav-link { + position: relative; + transition: all 0.25s ease; +} + +.navbar-nav .nav-link::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: rgba(255, 255, 255, 0.8); + transition: all 0.3s ease; + transform: translateX(-50%); + border-radius: 1px; +} + +.navbar-nav .nav-link:hover::after, +.navbar-nav .nav-link.active::after { + width: 60%; +} + +/* 顶栏下拉菜单增强 */ +.navbar-nav .dropdown-menu { + border: none; + border-radius: var(--card-radius); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); + padding: 8px 0; + animation: dropdownFadeIn 0.2s ease; +} + +@keyframes dropdownFadeIn { + from { + opacity: 0; + transform: translateY(-8px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.navbar-nav .dropdown-item { + padding: 10px 20px; + font-size: 14px; + transition: all 0.2s ease; + border-radius: 0; +} + +.navbar-nav .dropdown-item:hover { + background: rgba(var(--themecolor-rgbstr), 0.08); + color: var(--themecolor); + padding-left: 24px; +} + +/* 顶栏搜索框增�?*/ +#navbar_search_input_container .input-group { + border-radius: 25px; +} + +#navbar_search_input_container.open .input-group { + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +/* 顶栏紧凑模式 */ +html.toolbar-compact #navbar-main { + padding-top: 0.35rem !important; + padding-bottom: 0.35rem !important; +} + +html.toolbar-compact #navbar-main.navbar-ontop { + padding-top: 0.6rem !important; + padding-bottom: 0.6rem !important; +} + +/* 顶栏居中模式 */ +html.toolbar-center .navbar-brand.mr-0 { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +html.toolbar-center .navbar-nav.navbar-nav-hover { + margin-left: auto; +} + +@media (max-width: 991px) { + html.toolbar-center .navbar-brand.mr-0 { + position: relative; + left: auto; + transform: none; + } +} + +/* 移动端顶栏优�?*/ +@media (max-width: 991px) { + #navbar-main { + padding-left: 8px; + padding-right: 8px; + } + + .navbar-brand.navbar-title { + font-size: 16px; + } + + .navbar-brand.navbar-icon img { + max-height: 32px; + } +} + + +/* ======================================== + Material 3 Design System Enhancement + ======================================== */ + +/* M3 设计令牌 */ +:root { + /* 表面层级 */ + --m3-surface-1: rgba(var(--themecolor-rgbstr), 0.05); + --m3-surface-2: rgba(var(--themecolor-rgbstr), 0.08); + --m3-surface-3: rgba(var(--themecolor-rgbstr), 0.11); + --m3-surface-4: rgba(var(--themecolor-rgbstr), 0.12); + --m3-surface-5: rgba(var(--themecolor-rgbstr), 0.14); + + /* 状态层 */ + --m3-state-hover: rgba(var(--themecolor-rgbstr), 0.08); + --m3-state-focus: rgba(var(--themecolor-rgbstr), 0.12); + --m3-state-pressed: rgba(var(--themecolor-rgbstr), 0.12); + --m3-state-dragged: rgba(var(--themecolor-rgbstr), 0.16); + + /* 圆角 */ + --m3-shape-xs: 4px; + --m3-shape-sm: 8px; + --m3-shape-md: 12px; + --m3-shape-lg: 16px; + --m3-shape-xl: 28px; + + /* 阴影 */ + --m3-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); + --m3-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1); + --m3-elevation-3: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.12); + --m3-elevation-4: 0 2px 3px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.14); + --m3-elevation-5: 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 12px rgba(0, 0, 0, 0.16); + + /* 过渡 */ + --m3-motion-standard: cubic-bezier(0.2, 0, 0, 1); + --m3-motion-emphasized: cubic-bezier(0.2, 0, 0, 1); + --m3-motion-duration-short: 150ms; + --m3-motion-duration-medium: 250ms; + --m3-motion-duration-long: 400ms; +} + +html.darkmode { + --m3-surface-1: rgba(255, 255, 255, 0.05); + --m3-surface-2: rgba(255, 255, 255, 0.08); + --m3-surface-3: rgba(255, 255, 255, 0.11); + --m3-surface-4: rgba(255, 255, 255, 0.12); + --m3-surface-5: rgba(255, 255, 255, 0.14); + --m3-state-hover: rgba(255, 255, 255, 0.08); + --m3-state-focus: rgba(255, 255, 255, 0.12); + --m3-state-pressed: rgba(255, 255, 255, 0.12); +} + +/* M3 卡片样式 */ +.card { + border-radius: var(--m3-shape-lg) !important; + transition: box-shadow var(--m3-motion-duration-medium) var(--m3-motion-standard), + transform var(--m3-motion-duration-medium) var(--m3-motion-standard); +} + +.card.shadow-sm { + box-shadow: var(--m3-elevation-1) !important; +} + +/* M3 文章卡片 */ +article.post.card { + overflow: visible; + border: none !important; +} + +/* M3 按钮样式 */ +.btn { + border-radius: var(--m3-shape-xl) !important; + font-weight: 500; + letter-spacing: 0.1px; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); + position: relative; + overflow: hidden; +} + +.btn::before { + content: ''; + position: absolute; + inset: 0; + background: currentColor; + opacity: 0; + transition: opacity var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.btn:hover::before { + opacity: 0.08; +} + +.btn:active::before { + opacity: 0.12; +} + +.btn-primary { + box-shadow: var(--m3-elevation-1); +} + +.btn-primary:hover { + box-shadow: var(--m3-elevation-2); + transform: translateY(-1px); +} + +/* M3 输入框样�?*/ +.form-control { + border-radius: var(--m3-shape-sm) !important; + border: 1px solid var(--color-border); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); + padding: 12px 16px; +} + +.form-control:focus { + border-color: var(--themecolor); + box-shadow: 0 0 0 2px rgba(var(--themecolor-rgbstr), 0.2); + outline: none; +} + +/* M3 侧边栏样�?*/ +#leftbar .card { + border-radius: var(--m3-shape-lg) !important; + overflow: hidden; +} + +#leftbar_part1 { + border-radius: var(--m3-shape-lg) !important; +} + +#leftbar_part2 { + border-radius: var(--m3-shape-lg) !important; +} + +/* M3 侧边栏菜�?*/ +.leftbar-menu-item>a { + border-radius: var(--m3-shape-xl); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); + margin: 2px 8px; + padding: 10px 16px !important; +} + +.leftbar-menu-item>a:hover { + background: var(--m3-state-hover); +} + +.leftbar-menu-item.current>a { + background: var(--m3-surface-3); + color: var(--themecolor); + font-weight: 500; +} + +/* M3 搜索按钮 */ +#leftbar_search_container { + border-radius: var(--m3-shape-xl) !important; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +#leftbar_search_container:hover { + background: var(--m3-state-hover) !important; +} + +/* M3 标签�?*/ +.nav-pills .nav-link { + border-radius: var(--m3-shape-xl); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); + font-weight: 500; +} + +.nav-pills .nav-link.active { + background: var(--themecolor); + box-shadow: var(--m3-elevation-1); +} + +/* M3 站点统计 */ +.site-state { + display: flex; + justify-content: center; + gap: 8px; + margin: 16px 0; +} + +.site-state-item { + flex: 1; + text-align: center; +} + +.site-state-item a { + display: block; + padding: 12px 8px; + border-radius: var(--m3-shape-md); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.site-state-item a:hover { + background: var(--m3-state-hover); +} + +.site-state-item-count { + display: block; + font-size: 20px; + font-weight: 600; + color: var(--themecolor); + line-height: 1.2; +} + +.site-state-item-name { + display: block; + font-size: 12px; + color: #888; + margin-top: 2px; +} + +/* M3 作者链�?*/ +.site-author-links { + display: flex; + justify-content: center; + gap: 8px; + flex-wrap: wrap; + margin: 12px 0; +} + +.site-author-links-item a { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: var(--m3-shape-xl); + background: var(--m3-surface-2); + color: var(--themecolor); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.site-author-links-item a:hover { + background: var(--themecolor); + color: #fff; + transform: translateY(-2px); + box-shadow: var(--m3-elevation-2); +} + +/* M3 文章列表 */ +.article-list article.post { + margin-bottom: 16px; +} + +/* M3 文章预览卡片 */ +.post-preview-container { + border-radius: var(--m3-shape-lg); + overflow: hidden; +} + +/* M3 文章标题 */ +.post-title a { + transition: color var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.post-title a:hover { + color: var(--themecolor); +} + +/* M3 标签样式 */ +.badge, +.tag { + border-radius: var(--m3-shape-sm) !important; + padding: 4px 10px; + font-weight: 500; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.badge:hover, +.tag:hover { + transform: translateY(-1px); + box-shadow: var(--m3-elevation-1); +} + +/* M3 分页 */ +.page-link { + border-radius: var(--m3-shape-sm) !important; + margin: 0 2px; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.page-item.active .page-link { + box-shadow: var(--m3-elevation-1); +} + +/* M3 评论�?*/ +#comments.card, +#post_comment.card { + border-radius: var(--m3-shape-lg) !important; +} + +.comment-item { + border-radius: var(--m3-shape-md); + transition: background var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.comment-item:hover { + background: var(--m3-surface-1); +} + +/* M3 评论头像 */ +.comment-avatar img { + border-radius: var(--m3-shape-xl) !important; + transition: transform var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.comment-avatar img:hover { + transform: scale(1.05); +} + +/* M3 浮动按钮 */ +.float-action-buttons .fabtn { + border-radius: var(--card-radius) !important; + box-shadow: var(--m3-elevation-2) !important; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.float-action-buttons .fabtn:hover { + box-shadow: var(--m3-elevation-3) !important; +} + +/* M3 模态框 */ +.modal-content { + border-radius: var(--m3-shape-xl) !important; + border: none; + box-shadow: var(--m3-elevation-5); + overflow: hidden; +} + +.modal-header { + border-bottom: 1px solid var(--color-border-on-foreground); + padding: 20px 24px; +} + +.modal-body { + padding: 24px; +} + +/* M3 下拉菜单 */ +.dropdown-menu { + border-radius: var(--m3-shape-md) !important; + border: none; + box-shadow: var(--m3-elevation-3); + padding: 8px 0; + animation: m3-dropdown-in var(--m3-motion-duration-medium) var(--m3-motion-emphasized); +} + +@keyframes m3-dropdown-in { + from { + opacity: 0; + transform: scaleY(0.9) translateY(-8px); + transform-origin: top center; + } + + to { + opacity: 1; + transform: scaleY(1) translateY(0); + } +} + +.dropdown-item { + padding: 10px 16px; + border-radius: 0; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.dropdown-item:hover { + background: var(--m3-state-hover); +} + +/* M3 Alert 样式 */ +.alert { + border-radius: var(--m3-shape-md) !important; + border: none; + padding: 16px 20px; +} + +/* M3 TODO 列表 */ +.todo-list { + border-radius: var(--m3-shape-md); +} + +.todo-item { + border-radius: var(--m3-shape-sm); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.todo-item:hover { + background: var(--m3-state-hover); +} + +/* M3 公告卡片 */ +#leftbar_announcement { + border-radius: var(--m3-shape-lg) !important; + overflow: hidden; +} + +/* M3 文章导航 */ +.post-navigation { + border-radius: var(--m3-shape-lg) !important; + overflow: hidden; +} + +.post-navigation-item { + transition: background var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.post-navigation-item:hover { + background: var(--m3-surface-1); +} + +/* M3 相关文章 */ +.related-posts { + border-radius: var(--m3-shape-lg) !important; +} + +.related-post-card { + border-radius: var(--m3-shape-md); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +/* M3 代码�?*/ +article pre:not(.hljs-codeblock) { + border-radius: var(--m3-shape-md) !important; +} + +.hljs-codeblock { + border-radius: var(--m3-shape-md) !important; + overflow: hidden; +} + +/* M3 引用�?*/ +article .post-content blockquote { + border-radius: 0 var(--m3-shape-sm) var(--m3-shape-sm) 0; + background: var(--m3-surface-1); + padding: 16px 20px; + border-left: 4px solid var(--themecolor); +} + +/* M3 图片 */ +article img { + border-radius: var(--m3-shape-sm); +} + +.wp-block-image img { + border-radius: var(--m3-shape-md); +} + +/* M3 表格 */ +article table { + border-radius: var(--m3-shape-md); + overflow: hidden; +} + +article table>thead>tr>th { + background: var(--m3-surface-2); +} + +/* M3 滚动�?*/ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.3); + border-radius: var(--m3-shape-xl); +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(var(--themecolor-rgbstr), 0.5); +} + +/* M3 选中文本 */ +::selection { + background: rgba(var(--themecolor-rgbstr), 0.2); +} + +/* M3 链接悬停效果 */ +article .post-content a { + color: var(--themecolor); + text-decoration: none; + background: linear-gradient(to right, var(--themecolor), var(--themecolor)) no-repeat right bottom; + background-size: 0 2px; + transition: background-size var(--m3-motion-duration-medium) var(--m3-motion-standard); +} + +article .post-content a:hover { + background-size: 100% 2px; + background-position: left bottom; +} + +/* M3 页面过渡动画 */ +@keyframes m3-page-in { + from { + opacity: 0; + transform: translateY(16px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +#primary { + animation: m3-page-in var(--m3-motion-duration-long) var(--m3-motion-emphasized); +} + +/* M3 卡片进入动画 - 使用原有动画 */ + +/* M3 Chip/标签样式 */ +.post-meta .badge, +.post-categories a, +.post-tags a { + background: var(--m3-surface-2); + color: var(--color-text-deeper); + border: none; + padding: 6px 12px; + border-radius: var(--m3-shape-sm); + font-size: 12px; + font-weight: 500; + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +.post-meta .badge:hover, +.post-categories a:hover, +.post-tags a:hover { + background: var(--themecolor); + color: #fff; +} + +/* M3 头像�?*/ +#leftbar_overview_author_image { + border: 3px solid var(--m3-surface-3); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); +} + +#leftbar_overview_author_image:hover { + border-color: var(--themecolor); + transform: scale(1.05); +} + +/* M3 响应式优�?*/ +@media (max-width: 768px) { + :root { + --m3-shape-lg: 12px; + --m3-shape-xl: 20px; + } + + .card { + border-radius: var(--m3-shape-md) !important; + } + + .btn { + border-radius: var(--m3-shape-lg) !important; + } +} + +/* ---------- 评论区响应式优化 ---------- */ +@media (max-width: 768px) { + .comment-item-left-wrapper { + width: 36px; + margin-right: 12px; + min-height: 70px; + } + + .comment-item-avatar .avatar { + height: 36px; + width: 36px; + } + + .comment-upvote { + height: 28px; + line-height: 26px; + padding: 0 8px; + min-width: 36px; + font-size: 12px; + top: 42px; + } + + .comment-item-inner { + width: calc(100% - 48px); + padding-bottom: 36px; + } + + .comment-item-title { + font-size: 14px; + } + + .comment-operations { + position: relative; + right: auto; + bottom: auto; + opacity: 1; + transform: none; + margin-top: 8px; + padding: 0; + background: transparent; + box-shadow: none; + justify-content: flex-start; + } + + .comment-useragent { + display: none; + } + + .comment-info { + gap: 6px; + } +} + +/* ========== 精确修复 ========== */ + +/* 1. 搜索按钮动画优化 - 毛玻璃效果和左移滑入动画 */ +#navbar_search_input_container .input-group { + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; +} + +#navbar_search_input_container:not(.open) input.form-control { + width: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + opacity: 0; + transform: translateX(30px); + transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), + padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.25s ease 0.1s, + transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); +} + +#navbar_search_input_container.open input.form-control { + opacity: 1; + transform: translateX(0); + transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), + padding 0.4s cubic-bezier(0.16, 1, 0.3, 1), + opacity 0.3s ease, + transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); +} + +/* 搜索框展开时默认毛玻璃状�?*/ +#navbar_search_input_container.open .input-group { + background: rgba(255, 255, 255, 0.15) !important; + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.2); +} + +#navbar_search_input_container.open .input-group .input-group-text { + color: rgba(255, 255, 255, 0.9); +} + +#navbar_search_input_container.open .input-group input.form-control { + color: rgba(255, 255, 255, 0.95); +} + +#navbar_search_input_container.open .input-group input.form-control::placeholder { + color: rgba(255, 255, 255, 0.6); +} + +/* hover或有内容时切换为白色背景 */ +#navbar_search_input_container.open .input-group:hover, +#navbar_search_input_container.open .input-group:focus-within, +#navbar_search_input_container.open.has-text .input-group { + background: rgba(255, 255, 255, 0.95) !important; + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); +} + +#navbar_search_input_container.open .input-group:hover .input-group-text, +#navbar_search_input_container.open .input-group:focus-within .input-group-text, +#navbar_search_input_container.open.has-text .input-group .input-group-text { + color: #666; +} + +#navbar_search_input_container.open .input-group:hover input.form-control, +#navbar_search_input_container.open .input-group:focus-within input.form-control, +#navbar_search_input_container.open.has-text .input-group input.form-control { + color: #333; +} + +#navbar_search_input_container.open .input-group:hover input.form-control::placeholder, +#navbar_search_input_container.open .input-group:focus-within input.form-control::placeholder, +#navbar_search_input_container.open.has-text .input-group input.form-control::placeholder { + color: #999; +} + +/* 2. 移动端侧边栏按钮修复 */ +@media screen and (max-width: 900px) { + #open_sidebar { + -webkit-tap-highlight-color: transparent; + touch-action: manipulation; + cursor: pointer; + z-index: 1000; + } + + #open_sidebar .navbar-toggler-icon { + pointer-events: none; + } + + html.leftbar-opened #leftbar { + transform: translateX(0) !important; + opacity: 1 !important; + visibility: visible !important; + } +} + +/* 3. Git 徽章样式 */ +.git-version-badge { + display: inline-flex; + align-items: center; + gap: 4px; + margin-left: 8px; + padding: 2px 8px; + background: rgba(0, 0, 0, 0.15); + border-radius: 10px; + font-size: 11px; + font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; + color: inherit; + opacity: 0.7; + transition: opacity 0.2s ease; + vertical-align: middle; + cursor: pointer; + user-select: none; +} + +.git-version-badge:hover { + opacity: 1; +} + +.git-version-badge .git-icon { + width: 11px; + height: 11px; + color: #f05033; + flex-shrink: 0; +} + +/* 移动端隐藏Git徽章 */ +@media screen and (max-width: 576px) { + .git-version-badge { + display: none; + } + + .git-version-badge .git-icon { + width: 11px; + height: 11px; + } +} + +/* 4. Topbar 自定义链接样�?*/ +.navbar-custom-links { + display: flex; + align-items: center; + gap: 6px; + margin-left: 10px; +} + +.navbar-custom-links a { + color: rgba(255, 255, 255, 0.9); + font-size: 13px; + padding: 5px 12px; + border-radius: 18px; + transition: all 0.25s ease; + text-decoration: none; + white-space: nowrap; +} + +.navbar-custom-links a:hover { + background: rgba(255, 255, 255, 0.18); + color: #fff; +} + +.navbar-custom-links a i { + margin-right: 5px; +} + +@media screen and (max-width: 992px) { + .navbar-custom-links { + display: none; + } +} + +/* 6. 防止按钮文字换行 */ +.btn { + white-space: nowrap; +} + +.btn-inner--text { + white-space: nowrap; +} + +.nav-link { + white-space: nowrap; +} + +.navbar-nav .nav-item { + white-space: nowrap; +} + +/* 标签和徽章防止换�?*/ +.badge, +.tag, +.post-categories a, +.post-tags a { + white-space: nowrap; +} + +/* ======================================== + 全局视觉优化 - 保持原有风格融入 M3 + ======================================== */ + +/* 全局平滑滚动�?JS 库处理，此处不设�?*/ + +/* 页面背景微妙纹理 */ +body { + background-image: + radial-gradient(circle at 20% 80%, rgba(var(--themecolor-rgbstr), 0.03) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(var(--themecolor-rgbstr), 0.02) 0%, transparent 40%); + background-attachment: fixed; +} + +html.darkmode body { + background-image: + radial-gradient(circle at 20% 80%, rgba(var(--themecolor-rgbstr), 0.05) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(var(--themecolor-rgbstr), 0.03) 0%, transparent 40%); +} + +/* 卡片悬浮效果增强 */ +.card { + border: 1px solid rgba(var(--themecolor-rgbstr), 0.06); + background-color: var(--color-foreground); +} + +html.darkmode .card { + border: 1px solid rgba(255, 255, 255, 0.05); + background-color: var(--color-foreground); +} + +/* 文章卡片优化 */ +article.post.card { + border: none; + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.04), + 0 4px 12px rgba(0, 0, 0, 0.03); +} + +article.post.card:hover { + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 12px 28px rgba(var(--themecolor-rgbstr), 0.08); +} + +/* 文章导航卡片透明�?*/ +.post-navigation.card { + background: var(--color-foreground); +} + +/* 相关文章卡片透明�?*/ +.related-posts.card { + background: var(--color-foreground); +} + +/* 文章标题优化 */ +.post-title a { + background: linear-gradient(to right, var(--themecolor), var(--themecolor-light)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + transition: all 0.3s ease; +} + +.post-title a:hover { + filter: brightness(1.1); +} + +/* 文章预览卡片缩略图优�?*/ +.post-thumbnail { + transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +article.post.card:hover .post-thumbnail { + transform: none; +} + +/* 侧边栏卡片优�?*/ +#leftbar .card, +#leftbar_part1, +#leftbar_part2 { + border: 1px solid rgba(var(--themecolor-rgbstr), 0.05); +} + +html.darkmode #leftbar .card, +html.darkmode #leftbar_part1, +html.darkmode #leftbar_part2 { + border: 1px solid rgba(255, 255, 255, 0.04); +} + +/* 侧边栏头像光晕效�?*/ +#leftbar_overview_author_image { + box-shadow: + 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1), + 0 4px 16px rgba(var(--themecolor-rgbstr), 0.15); +} + +#leftbar_overview_author_image:hover { + box-shadow: + 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.2), + 0 8px 24px rgba(var(--themecolor-rgbstr), 0.25); +} + +/* 按钮优化 - 纯色主题�?+ Material 3 动画 */ +.btn-primary { + background-color: var(--themecolor); + border: none; + border-radius: var(--card-radius); + box-shadow: 0 1px 3px rgba(var(--themecolor-rgbstr), 0.2); + transition: + background-color var(--animation-fast) var(--ease-standard), + box-shadow var(--animation-fast) var(--ease-standard), + transform var(--animation-fast) var(--ease-standard); + position: relative; + overflow: hidden; +} + +.btn-primary:hover { + background-color: var(--themecolor-dark); + box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.35); + transform: translateY(-1px); +} + +.btn-primary:active { + background-color: var(--themecolor-dark2); + transform: scale(0.98); + box-shadow: 0 1px 2px rgba(var(--themecolor-rgbstr), 0.2); +} + +.btn-outline-primary { + border: 1.5px solid var(--themecolor); + background: transparent; + position: relative; + overflow: hidden; + z-index: 1; +} + +.btn-outline-primary::after { + content: ''; + position: absolute; + inset: 0; + background: var(--themecolor); + transform: scaleX(0); + transform-origin: right; + transition: transform 0.3s ease; + z-index: -1; +} + +.btn-outline-primary:hover::after { + transform: scaleX(1); + transform-origin: left; +} + +.btn-outline-primary:hover { + color: #fff; + border-color: var(--themecolor); +} + +/* 评论项悬浮效�?*/ +.comment-body { + transition: all 0.25s ease; + border-radius: var(--m3-shape-md); + padding: 12px; + margin: -12px; +} + +.comment-body:hover { + background: rgba(var(--themecolor-rgbstr), 0.03); +} + +html.darkmode .comment-body:hover { + background: rgba(255, 255, 255, 0.03); +} + +/* 输入框聚焦效�?*/ +.form-control:focus, +textarea.form-control:focus { + border-color: var(--themecolor); + box-shadow: + 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.12), + 0 2px 8px rgba(var(--themecolor-rgbstr), 0.08); +} + +/* 浮动按钮优化 */ +#float_action_buttons .fabtn { + border: 1px solid rgba(var(--themecolor-rgbstr), 0.1); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.08), + 0 4px 16px rgba(var(--themecolor-rgbstr), 0.1); +} + +#float_action_buttons .fabtn:hover { + background: var(--themecolor); + color: #fff; + border-color: transparent; + box-shadow: + 0 4px 12px rgba(var(--themecolor-rgbstr), 0.3), + 0 8px 24px rgba(var(--themecolor-rgbstr), 0.2); + transform: translateY(-2px); +} + +html.darkmode #float_action_buttons .fabtn { + background: rgba(var(--color-darkmode-foreground-rgbstr, 45, 45, 45), 0.9); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +html.darkmode #float_action_buttons .fabtn:hover { + background: var(--themecolor); +} + +/* Banner 优化 */ +.banner { + position: relative; +} + +.banner::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 120px; + background: linear-gradient(to top, var(--color-background) 0%, transparent 100%); + pointer-events: none; +} + +/* Banner 标题优化 */ +.banner-title { + text-shadow: + 0 2px 4px rgba(0, 0, 0, 0.3), + 0 4px 16px rgba(0, 0, 0, 0.2); +} + +/* 分页优化 */ +.page-link { + background: rgba(255, 255, 255, 0.8); + border: 1px solid rgba(var(--themecolor-rgbstr), 0.1); + transition: all 0.25s ease; +} + +.page-link:hover { + background: var(--themecolor); + color: #fff; + border-color: var(--themecolor); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.25); +} + +.page-item.active .page-link { + background: linear-gradient(135deg, var(--themecolor-light), var(--themecolor)); + border-color: transparent; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); +} + +html.darkmode .page-link { + background: rgba(var(--color-darkmode-foreground-rgbstr, 45, 45, 45), 0.8); + border-color: rgba(255, 255, 255, 0.08); +} + +/* 标签优化 */ +.badge.badge-secondary, +.tag.badge-secondary { + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + border: none; +} + +.badge.badge-secondary:hover, +.tag.badge-secondary:hover { + background: var(--themecolor); + color: #fff; +} + +/* 代码块优�?*/ +article pre, +.hljs-codeblock { + background: rgba(30, 30, 40, 0.95) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.05), + 0 4px 16px rgba(0, 0, 0, 0.15); +} + +/* 引用块优�?*/ +article .post-content blockquote { + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.06) 0%, + rgba(var(--themecolor-rgbstr), 0.02) 100%); + border-left: 3px solid var(--themecolor); + box-shadow: inset 0 0 0 1px rgba(var(--themecolor-rgbstr), 0.05); +} + +/* 目录优化 */ +#post_toc a { + transition: all 0.2s ease; + border-radius: 4px; + padding: 4px 8px; + margin: -4px -8px; +} + +#post_toc a:hover { + background: rgba(var(--themecolor-rgbstr), 0.08); + color: var(--themecolor); +} + +#post_toc a.active { + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + font-weight: 500; +} + +/* 加载动画优化 */ +@keyframes skeleton-loading { + 0% { + background-position: -200% 0; + } + + 100% { + background-position: 200% 0; + } +} + +.skeleton-loading { + background: linear-gradient(90deg, + rgba(var(--themecolor-rgbstr), 0.06) 25%, + rgba(var(--themecolor-rgbstr), 0.12) 50%, + rgba(var(--themecolor-rgbstr), 0.06) 75%); + background-size: 200% 100%; + animation: skeleton-loading 1.5s infinite; +} + +/* 链接下划线动�?*/ +a { + text-decoration: none; +} + +/* 图片加载优化 */ +article img { + opacity: 1; + transition: opacity 0.3s ease, transform 0.3s ease; +} + +article img:hover { + transform: scale(1.01); +} + +/* 表格优化 */ +article table { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); + border: 1px solid rgba(var(--themecolor-rgbstr), 0.08); +} + +article table>thead>tr>th { + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.08) 0%, + rgba(var(--themecolor-rgbstr), 0.04) 100%); + border-bottom: 2px solid rgba(var(--themecolor-rgbstr), 0.15); +} + +article table>tbody>tr:hover { + background: rgba(var(--themecolor-rgbstr), 0.03); +} + +/* 友情链接卡片优化 */ +.friend-link-card { + border: 1px solid rgba(var(--themecolor-rgbstr), 0.08); + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.friend-link-card:hover { + box-shadow: + 0 8px 24px rgba(var(--themecolor-rgbstr), 0.12), + 0 16px 48px rgba(0, 0, 0, 0.08); + border-color: rgba(var(--themecolor-rgbstr), 0.2); +} + +html.darkmode .friend-link-card { + background: rgba(var(--color-darkmode-foreground-rgbstr, 45, 45, 45), 0.85); + border-color: rgba(255, 255, 255, 0.06); +} + +/* 时间线优�?*/ +.timeline-item { + position: relative; +} + +.timeline-item::before { + content: ''; + position: absolute; + left: -20px; + top: 8px; + width: 10px; + height: 10px; + background: var(--themecolor); + border-radius: 50%; + box-shadow: 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.2); + transition: all 0.3s ease; +} + +.timeline-item:hover::before { + transform: scale(1.3); + box-shadow: 0 0 0 6px rgba(var(--themecolor-rgbstr), 0.3); +} + +/* 全局焦点样式 */ +:focus-visible { + outline: 2px solid var(--themecolor); + outline-offset: 2px; +} + +/* 平滑字体渲染 */ +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; +} + +/* 响应式优�?*/ +@media (max-width: 768px) { + .card { + -webkit-backdrop-filter: blur(6px); + backdrop-filter: blur(6px); + } + + article.post.card:hover { + transform: none; + } + + .banner::after { + height: 80px; + } +} + +/* 减少动画偏好 */ +@media (prefers-reduced-motion: reduce) { + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* ======================================== + Apple & Material 3 风格增强 + ======================================== */ + +/* 卡片微妙边框光泽 */ +.card { + border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.04), + 0 4px 12px rgba(0, 0, 0, 0.03), + inset 0 1px 0 rgba(255, 255, 255, 0.6); +} + +html.darkmode .card { + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.2), + 0 4px 12px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +/* 卡片悬浮提升效果 */ +article.post.card { + transition: transform var(--animation-normal) var(--ease-spring), + box-shadow var(--animation-normal) var(--ease-standard); +} + +article.post.card:hover { + box-shadow: + 0 8px 25px rgba(0, 0, 0, 0.08), + 0 20px 40px rgba(var(--themecolor-rgbstr), 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.8); +} + +/* 按钮 Apple + Material 3 融合风格 */ +.btn { + font-weight: 500; + letter-spacing: -0.01em; + transition: all var(--animation-fast) var(--ease-standard); +} + +/* 涟漪效果 (Ripple Effect) */ +.btn-ripple { + position: relative; + overflow: hidden; +} + +.btn-ripple::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%); + background-repeat: no-repeat; + background-position: 50%; + transform: scale(10, 10); + opacity: 0; + transition: opacity 350ms var(--ease-standard); +} + +.btn-ripple:active::after { + transform: scale(10, 10); + opacity: 1; + transition: transform 0s, opacity 0s; +} + +/* 输入�?Apple 风格 */ +.form-control { + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); + transition: all 0.2s ease; +} + +.form-control:focus { + border-color: var(--themecolor); + box-shadow: + 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.15), + inset 0 1px 2px rgba(0, 0, 0, 0.02); +} + +html.darkmode .form-control { + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); +} + +/* 侧边栏卡片光�?*/ +#leftbar .card, +#leftbar_part1, +#leftbar_part2 { + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +html.darkmode #leftbar .card, +html.darkmode #leftbar_part1, +html.darkmode #leftbar_part2 { + border: 1px solid rgba(255, 255, 255, 0.06); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +/* 头像环发光效�?*/ +#leftbar_overview_author_image { + border: 3px solid rgba(255, 255, 255, 0.9); + box-shadow: + 0 0 0 1px rgba(var(--themecolor-rgbstr), 0.2), + 0 4px 15px rgba(0, 0, 0, 0.1); + transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +#leftbar_overview_author_image:hover { + transform: scale(1.05); + box-shadow: + 0 0 0 2px rgba(var(--themecolor-rgbstr), 0.4), + 0 8px 25px rgba(var(--themecolor-rgbstr), 0.2); +} + +/* 浮动按钮 Apple 风格 */ +#float_action_buttons .fabtn { + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.1), + 0 8px 20px rgba(0, 0, 0, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.5); + transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +#float_action_buttons .fabtn:hover { + box-shadow: + 0 6px 16px rgba(var(--themecolor-rgbstr), 0.25), + 0 12px 28px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.6); +} + +html.darkmode #float_action_buttons .fabtn { + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 8px 20px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +/* 分页按钮 */ +.page-link { + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); + transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.page-link:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.2); +} + +.page-item.active .page-link { + background: linear-gradient(180deg, var(--themecolor-light), var(--themecolor)); + box-shadow: + 0 2px 8px rgba(var(--themecolor-rgbstr), 0.35), + inset 0 1px 0 rgba(255, 255, 255, 0.2); +} + +/* 标签胶囊样式 */ +.badge, +.tag { + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + border: none; + font-weight: 500; + transition: all 0.2s ease; +} + +.badge:hover, +.tag:hover { + background: var(--themecolor); + color: #fff; + transform: translateY(-1px); + box-shadow: 0 3px 8px rgba(var(--themecolor-rgbstr), 0.3); +} + +/* 评论区卡�?*/ +#comments.card, +#post_comment.card { + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 2px 12px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +html.darkmode #comments.card, +html.darkmode #post_comment.card { + border: 1px solid rgba(255, 255, 255, 0.06); + box-shadow: + 0 2px 12px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +/* 评论头像悬浮 */ +.comment-avatar img { + transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.comment-avatar img:hover { + transform: scale(1.1); + box-shadow: 0 4px 16px rgba(var(--themecolor-rgbstr), 0.2); +} + +/* 导航和推荐卡�?*/ +.post-navigation.card, +.related-posts.card { + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.04), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +html.darkmode .post-navigation.card, +html.darkmode .related-posts.card { + border: 1px solid rgba(255, 255, 255, 0.06); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +/* 下拉菜单 Apple 风格 */ +.dropdown-menu { + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: + 0 10px 40px rgba(0, 0, 0, 0.12), + 0 2px 10px rgba(0, 0, 0, 0.06); + -webkit-backdrop-filter: blur(20px) saturate(180%); + backdrop-filter: blur(20px) saturate(180%); + background: rgba(255, 255, 255, 0.9); +} + +html.darkmode .dropdown-menu { + background: rgba(40, 40, 40, 0.9); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* 模态框 Apple 风格 */ +.modal-content { + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: + 0 25px 80px rgba(0, 0, 0, 0.25), + 0 10px 30px rgba(0, 0, 0, 0.1); + -webkit-backdrop-filter: blur(30px) saturate(150%); + backdrop-filter: blur(30px) saturate(150%); + background: rgba(255, 255, 255, 0.95); +} + +html.darkmode .modal-content { + background: rgba(40, 40, 40, 0.95); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* 代码块优雅阴�?*/ +article pre, +.hljs-codeblock { + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +/* 引用块左边框渐变 */ +article .post-content blockquote { + border-left: 3px solid transparent; + border-image: linear-gradient(180deg, var(--themecolor), var(--themecolor-light)) 1; + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.06) 0%, + rgba(var(--themecolor-rgbstr), 0.02) 100%); +} + +/* 表格优雅样式 */ +article table { + border: 1px solid rgba(var(--themecolor-rgbstr), 0.1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + overflow: hidden; +} + +article table>thead>tr>th { + background: linear-gradient(180deg, + rgba(var(--themecolor-rgbstr), 0.08) 0%, + rgba(var(--themecolor-rgbstr), 0.04) 100%); +} + +/* 图片悬浮效果 */ +article .post-content img { + transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + border-radius: 8px; +} + +article .post-content img:hover { + transform: scale(1.02); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); +} + +/* 链接下划线动�?*/ +article .post-content a:not(.btn):not(.tag):not(.badge) { + text-decoration: none; + background: linear-gradient(var(--themecolor), var(--themecolor)) no-repeat right bottom; + background-size: 0 1.5px; + transition: background-size 0.3s ease; + padding-bottom: 1px; +} + +article .post-content a:not(.btn):not(.tag):not(.badge):hover { + background-size: 100% 1.5px; + background-position: left bottom; +} + +/* 滚动条美�?*/ +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.02); + border-radius: 5px; +} + +::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.25); + border-radius: 5px; + border: 2px solid transparent; + background-clip: padding-box; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(var(--themecolor-rgbstr), 0.4); + border: 2px solid transparent; + background-clip: padding-box; +} + +html.darkmode ::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.02); +} + +html.darkmode ::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); +} + +html.darkmode ::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.35); +} + +/* 选中文本样式 */ +::selection { + background: rgba(var(--themecolor-rgbstr), 0.25); + color: inherit; +} + +/* 移动端响应式调整 */ +@media (max-width: 768px) { + article.post.card:hover { + transform: none; + } +} + +/* ======================================== + Material 3 分段控件 (Segmented Control) + ======================================== */ + +.segmented-control { + display: inline-flex; + background: var(--color-widgets-disabled); + border-radius: 10px; + padding: 3px; + gap: 2px; +} + +.segmented-control-item { + padding: 6px 14px; + border-radius: 8px; + border: none; + background: transparent; + color: var(--color-text-deeper); + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all var(--animation-fast) var(--ease-standard); +} + +.segmented-control-item:hover { + background: rgba(var(--themecolor-rgbstr), 0.08); +} + +.segmented-control-item.active { + background: var(--themecolor); + color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); +} + +html.darkmode .segmented-control { + background: rgba(255, 255, 255, 0.08); +} + +html.darkmode .segmented-control-item { + color: rgba(255, 255, 255, 0.9); +} + +html.darkmode .segmented-control-item:hover { + background: rgba(255, 255, 255, 0.1); +} + +/* ======================================== + 主题变体 - 玻璃拟�?(Glassmorphism) + 使用 CSS 变量，由站长设置控制 + ======================================== */ + +html.style-glass .card, +html.style-glass #fabtn_blog_settings_popup { + background: rgba(255, 255, 255, var(--card-opacity, 0.7)); + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +html.style-glass .card:hover { + background: rgba(255, 255, 255, calc(var(--card-opacity, 0.7) + 0.1)); +} + +html.darkmode.style-glass .card, +html.darkmode.style-glass #fabtn_blog_settings_popup { + background: rgba(66, 66, 66, var(--card-opacity, 0.7)); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +html.darkmode.style-glass .card:hover { + background: rgba(66, 66, 66, calc(var(--card-opacity, 0.7) + 0.1)); +} + +/* Fix CSS Stacking Context breaking backdrop-filter in Glass style */ +html.style-glass .article-list article.post, +html.style-glass article.post.post-full, +html.style-glass .page-transition-content, +html.style-glass #primary { + will-change: auto !important; + transform: none !important; + animation-fill-mode: none !important; +} + +/* ======================================== + 主题变体 - 新拟�?(Neumorphism) + ======================================== */ + +html.style-neumorphism .card { + background: var(--color-background); + border: none; + box-shadow: + 8px 8px 16px rgba(0, 0, 0, 0.08), + -8px -8px 16px rgba(255, 255, 255, 0.8); +} + +html.style-neumorphism .card:hover { + box-shadow: + 10px 10px 20px rgba(0, 0, 0, 0.1), + -10px -10px 20px rgba(255, 255, 255, 0.9); +} + +html.style-neumorphism #fabtn_blog_settings_popup { + background: var(--color-background); + box-shadow: + 8px 8px 16px rgba(0, 0, 0, 0.08), + -8px -8px 16px rgba(255, 255, 255, 0.8); +} + +html.style-neumorphism .btn-primary { + box-shadow: + 4px 4px 8px rgba(0, 0, 0, 0.1), + -4px -4px 8px rgba(255, 255, 255, 0.5); +} + +html.style-neumorphism .btn-primary:active { + box-shadow: + inset 2px 2px 4px rgba(0, 0, 0, 0.1), + inset -2px -2px 4px rgba(255, 255, 255, 0.5); +} + +html.darkmode.style-neumorphism .card { + background: var(--color-background); + box-shadow: + 8px 8px 16px rgba(0, 0, 0, 0.3), + -8px -8px 16px rgba(255, 255, 255, 0.05); +} + +html.darkmode.style-neumorphism .card:hover { + box-shadow: + 10px 10px 20px rgba(0, 0, 0, 0.35), + -10px -10px 20px rgba(255, 255, 255, 0.06); +} + +html.darkmode.style-neumorphism #fabtn_blog_settings_popup { + box-shadow: + 8px 8px 16px rgba(0, 0, 0, 0.3), + -8px -8px 16px rgba(255, 255, 255, 0.05); +} + +/* 样式切换过渡动画 */ +html.style-glass .card, +html.style-glass #fabtn_blog_settings_popup, +html.style-neumorphism .card, +html.style-neumorphism #fabtn_blog_settings_popup { + transition: + background-color var(--animation-slow) var(--ease-standard), + box-shadow var(--animation-slow) var(--ease-standard), + backdrop-filter var(--animation-slow) var(--ease-standard); +} + + +/* ========== 玻璃风格下文�?页面卡片样式统一 ========== */ +/* 使用 CSS 变量，确保与首页卡片一�?*/ +html.style-glass article.post.post-full.card { + background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important; + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +html.darkmode.style-glass article.post.post-full.card { + background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +/* ========== 移动端侧边栏重新设计 ========== */ +@media screen and (max-width: 900px) { + + /* 侧边栏容�?*/ + #leftbar { + width: min(300px, 82vw); + background: var(--color-foreground); + box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); + } + + /* 移动端导航整体布局 */ + .leftbar-mobile-nav { + padding-bottom: env(safe-area-inset-bottom, 0); + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + + /* ===== 顶部用户信息�?===== */ + .leftbar-mobile-profile { + padding: 32px 24px 28px; + padding-top: calc(32px + env(safe-area-inset-top, 0)); + background: var(--themecolor-gradient); + position: relative; + } + + /* 装饰性背景圆 */ + .leftbar-mobile-profile::before { + content: ""; + position: absolute; + top: -50px; + right: -50px; + width: 140px; + height: 140px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + } + + .leftbar-mobile-profile::after { + content: ""; + position: absolute; + bottom: -30px; + left: -30px; + width: 100px; + height: 100px; + background: rgba(255, 255, 255, 0.06); + border-radius: 50%; + } + + /* 关闭按钮 */ + .leftbar-mobile-close { + position: absolute; + top: calc(16px + env(safe-area-inset-top, 0)); + right: 16px; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: rgba(255, 255, 255, 0.18); + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + color: #fff; + cursor: pointer; + z-index: 2; + transition: all var(--animation-fast) var(--ease-spring); + } + + .leftbar-mobile-close:active { + transform: scale(0.9); + background: rgba(255, 255, 255, 0.28); + } + + .leftbar-mobile-close i { + font-size: 14px; + } + + /* 头像 */ + .leftbar-mobile-avatar { + width: 72px; + height: 72px; + border-radius: 50%; + overflow: hidden; + border: 3px solid rgba(255, 255, 255, 0.4); + margin: 0 auto 16px; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + position: relative; + z-index: 1; + transition: all var(--animation-normal) var(--ease-spring); + } + + .leftbar-mobile-avatar:active { + transform: scale(0.95); + } + + .leftbar-mobile-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + } + + /* 用户信息 */ + .leftbar-mobile-user-info { + text-align: center; + position: relative; + z-index: 1; + margin-bottom: 20px; + } + + .leftbar-mobile-user-name { + font-size: 22px; + font-weight: 700; + color: #fff; + margin-bottom: 6px; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + flex-wrap: wrap; + } + + .leftbar-mobile-user-desc { + font-size: 13px; + color: rgba(255, 255, 255, 0.85); + line-height: 1.5; + max-width: 220px; + margin: 0 auto; + } + + /* 统计数据 */ + .leftbar-mobile-stats { + display: flex; + background: rgba(255, 255, 255, 0.15); + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + border-radius: 16px; + padding: 14px 10px; + position: relative; + z-index: 1; + } + + .leftbar-mobile-stat { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + } + + .leftbar-mobile-stat:not(:last-child)::after { + content: ""; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 28px; + background: rgba(255, 255, 255, 0.25); + } + + .leftbar-mobile-stat .stat-num { + font-size: 20px; + font-weight: 700; + color: #fff; + line-height: 1.2; + } + + .leftbar-mobile-stat .stat-label { + font-size: 11px; + color: rgba(255, 255, 255, 0.75); + margin-top: 4px; + font-weight: 500; + } + + /* ===== 搜索�?===== */ + .leftbar-mobile-search { + padding: 18px 18px 10px; + } + + .leftbar-mobile-search-inner { + display: flex; + align-items: center; + background: var(--color-background); + border-radius: 14px; + padding: 12px 16px; + gap: 12px; + border: 1.5px solid transparent; + transition: all var(--animation-fast) var(--ease-standard); + } + + .leftbar-mobile-search-inner:focus-within { + border-color: rgba(var(--themecolor-rgbstr), 0.4); + background: var(--color-foreground); + box-shadow: 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.1); + } + + .leftbar-mobile-search-inner i { + color: #999; + font-size: 15px; + transition: color var(--animation-fast); + } + + .leftbar-mobile-search-inner:focus-within i { + color: var(--themecolor); + } + + .leftbar-mobile-search-inner input { + flex: 1; + border: none; + background: transparent; + font-size: 15px; + color: var(--color-text-deeper); + outline: none; + } + + .leftbar-mobile-search-inner input::placeholder { + color: #aaa; + } + + /* ===== 菜单区域 ===== */ + .leftbar-mobile-menu-section { + padding: 10px 14px 8px; + } + + .leftbar-mobile-section-title { + font-size: 11px; + font-weight: 700; + color: #999; + text-transform: uppercase; + letter-spacing: 1.5px; + padding: 8px 14px 12px; + } + + .leftbar-mobile-menu { + list-style: none; + padding: 0; + margin: 0; + } + + .leftbar-mobile-menu-item { + margin-bottom: 4px; + } + + .leftbar-mobile-menu-item>a { + display: flex; + align-items: center; + padding: 14px 16px; + color: var(--color-text-deeper); + text-decoration: none; + border-radius: 14px; + font-size: 15px; + font-weight: 500; + transition: all var(--animation-fast) var(--ease-standard); + } + + .leftbar-mobile-menu-item>a:active { + background: rgba(var(--themecolor-rgbstr), 0.1); + transform: scale(0.98); + } + + .leftbar-mobile-menu-item.current>a { + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + } + + .leftbar-mobile-menu-item .menu-text { + flex: 1; + } + + .leftbar-mobile-menu-item .submenu-arrow { + font-size: 12px; + color: #999; + transition: transform var(--animation-normal) var(--ease-standard); + } + + .leftbar-mobile-menu-item.expanded .submenu-arrow { + transform: rotate(180deg); + } + + /* 子菜�?*/ + .leftbar-mobile-submenu { + list-style: none; + padding: 0; + margin: 4px 0 4px 18px; + padding-left: 14px; + border-left: 2px solid var(--color-border-on-foreground-deeper); + max-height: 0; + overflow: hidden; + transition: max-height var(--animation-normal) var(--ease-standard); + } + + .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu { + max-height: 400px; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item { + margin-bottom: 2px; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item>a { + padding: 11px 14px; + font-size: 14px; + font-weight: 400; + color: #666; + border-radius: 10px; + } + + .leftbar-mobile-submenu .leftbar-mobile-menu-item>a:active { + color: var(--themecolor); + background: rgba(var(--themecolor-rgbstr), 0.08); + } + + /* ===== 折叠面板 ===== */ + .leftbar-mobile-collapse-section { + margin: 6px 14px; + background: var(--color-background); + border-radius: 16px; + overflow: hidden; + transition: all var(--animation-normal) var(--ease-emphasized); + } + + .leftbar-mobile-collapse-section.expanded { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + } + + .leftbar-mobile-collapse-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + cursor: pointer; + user-select: none; + transition: background var(--animation-fast); + } + + .leftbar-mobile-collapse-header:active { + background: rgba(var(--themecolor-rgbstr), 0.05); + } + + .collapse-header-left { + display: flex; + align-items: center; + gap: 12px; + flex: 1; + } + + .collapse-icon { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + border-radius: 10px; + font-size: 13px; + transition: all var(--animation-normal) var(--ease-spring); + } + + .leftbar-mobile-collapse-section.expanded .collapse-icon { + background: var(--themecolor); + color: #fff; + transform: scale(1.05); + box-shadow: 0 3px 10px rgba(var(--themecolor-rgbstr), 0.35); + } + + .collapse-title { + font-size: 14px; + font-weight: 600; + color: var(--color-text-deeper); + transition: color var(--animation-fast); + } + + .leftbar-mobile-collapse-section.expanded .collapse-title { + color: var(--themecolor); + } + + .collapse-badge { + background: var(--themecolor); + color: #fff; + font-size: 10px; + font-weight: 700; + padding: 3px 8px; + border-radius: 10px; + min-width: 20px; + text-align: center; + margin-left: auto; + margin-right: 12px; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); + transition: all var(--animation-normal) var(--ease-spring); + } + + .leftbar-mobile-collapse-section.expanded .collapse-badge { + transform: scale(1.08); + } + + .collapse-arrow { + font-size: 11px; + color: #aaa; + transition: all var(--animation-normal) var(--ease-emphasized); + } + + .leftbar-mobile-collapse-section.expanded .collapse-arrow { + transform: rotate(180deg); + color: var(--themecolor); + } + + .leftbar-mobile-collapse-content { + max-height: 0; + overflow: hidden; + transition: max-height var(--animation-slow) var(--ease-emphasized); + } + + .leftbar-mobile-collapse-section.expanded .leftbar-mobile-collapse-content { + max-height: 320px; + } + + /* 目录容器 */ + .mobile-catalog-container { + padding: 4px 14px 14px; + } + + #leftbar_mobile_catalog { + max-height: 240px; + overflow-y: auto; + padding-right: 4px; + } + + #leftbar_mobile_catalog .index-link { + padding: 9px 12px; + font-size: 13px; + border-radius: 8px; + } + + /* TODO 容器 */ + .mobile-todo-container { + padding: 4px 14px 14px; + } + + .mobile-todo-add-form { + display: flex; + gap: 8px; + margin-bottom: 12px; + } + + .mobile-todo-add-form input { + flex: 1; + border: 1.5px solid var(--color-border-on-foreground-deeper); + border-radius: 12px; + padding: 10px 14px; + font-size: 14px; + background: var(--color-foreground); + color: var(--color-text-deeper); + outline: none; + transition: all var(--animation-fast); + } + + .mobile-todo-add-form input:focus { + border-color: var(--themecolor); + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.12); + } + + .mobile-todo-add-form button { + width: 40px; + height: 40px; + border: none; + border-radius: 12px; + background: var(--themecolor); + color: #fff; + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + box-shadow: 0 3px 10px rgba(var(--themecolor-rgbstr), 0.3); + transition: all var(--animation-fast) var(--ease-spring); + } + + .mobile-todo-add-form button:active { + transform: scale(0.9); + } + + .mobile-todo-list { + list-style: none; + padding: 0; + margin: 0; + max-height: 180px; + overflow-y: auto; + } + + .mobile-todo-item { + display: flex; + align-items: center; + padding: 12px 14px; + background: var(--color-foreground); + border-radius: 12px; + margin-bottom: 6px; + transition: all var(--animation-fast); + } + + .mobile-todo-content { + flex: 1; + font-size: 13px; + color: var(--color-text-deeper); + } + + .mobile-todo-complete-btn, + .mobile-todo-urge-btn, + .mobile-todo-delete-btn { + width: 30px; + height: 30px; + border: none; + border-radius: 8px; + font-size: 12px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + margin-left: 8px; + transition: all var(--animation-fast) var(--ease-spring); + } + + .mobile-todo-complete-btn { + background: rgba(76, 175, 80, 0.12); + color: #4CAF50; + } + + .mobile-todo-complete-btn:active { + transform: scale(0.9); + background: rgba(76, 175, 80, 0.2); + } + + .mobile-todo-delete-btn { + background: rgba(244, 67, 54, 0.12); + color: #F44336; + } + + .mobile-todo-delete-btn:active { + transform: scale(0.9); + } + + .mobile-todo-urge-btn { + background: rgba(255, 152, 0, 0.12); + color: #FF9800; + } + + .mobile-todo-urge-btn:active { + transform: scale(0.9); + } + + /* ===== 底部操作�?===== */ + .leftbar-mobile-footer { + margin-top: auto; + padding: 14px 18px 22px; + padding-bottom: calc(22px + env(safe-area-inset-bottom, 0)); + border-top: 1px solid var(--color-border-on-foreground-deeper); + background: var(--color-foreground); + } + + .leftbar-mobile-actions { + display: flex; + justify-content: center; + gap: 10px; + } + + .leftbar-mobile-action { + flex: 1; + max-width: 95px; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + padding: 14px 10px; + border: none; + background: var(--color-background); + color: #666; + font-size: 11px; + font-weight: 500; + cursor: pointer; + border-radius: 14px; + transition: all var(--animation-fast) var(--ease-spring); + } + + .leftbar-mobile-action:active { + background: rgba(var(--themecolor-rgbstr), 0.12); + color: var(--themecolor); + transform: scale(0.95); + } + + .leftbar-mobile-action i { + font-size: 20px; + transition: transform var(--animation-fast) var(--ease-spring); + } + + .leftbar-mobile-action:active i { + transform: scale(1.15); + } + + .leftbar-mobile-action span { + white-space: nowrap; + } +} + +/* ===== 小屏幕适配 ===== */ +@media screen and (max-width: 375px) { + #leftbar { + width: min(270px, 80vw); + } + + .leftbar-mobile-profile { + padding: 26px 20px 24px; + } + + .leftbar-mobile-avatar { + width: 64px; + height: 64px; + } + + .leftbar-mobile-user-name { + font-size: 20px; + } + + .leftbar-mobile-stats { + padding: 12px 8px; + } + + .leftbar-mobile-stat .stat-num { + font-size: 18px; + } + + .leftbar-mobile-search { + padding: 14px 14px 8px; + } + + .leftbar-mobile-menu-section { + padding: 8px 12px 6px; + } + + .leftbar-mobile-collapse-section { + margin: 5px 12px; + } + + .collapse-icon { + width: 28px; + height: 28px; + font-size: 12px; + } + + .collapse-title { + font-size: 13px; + } + + .leftbar-mobile-footer { + padding: 12px 14px 18px; + } + + .leftbar-mobile-action { + padding: 12px 8px; + max-width: 85px; + } + + .leftbar-mobile-action i { + font-size: 18px; + } + + .leftbar-mobile-action span { + font-size: 10px; + } +} + +/* ========== 移动端玻璃风格文章卡�?========== */ +@media screen and (max-width: 900px) { + html.style-glass article.post.post-full.card { + background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important; + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + } + + html.darkmode.style-glass article.post.post-full.card { + background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important; + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + } +} + +/* ========== 暗色模式移动端目录样式补�?========== */ +@media screen and (max-width: 900px) { + + /* 暗色模式下目录链接颜�?*/ + html.darkmode #leftbar_mobile_catalog .index-link { + color: #bbb; + } + + html.darkmode #leftbar_mobile_catalog .index-item.current>.index-link { + color: var(--themecolor-light); + background: rgba(var(--themecolor-rgbstr), 0.15); + } + + html.darkmode #leftbar_mobile_catalog .index-link:active { + background: rgba(var(--themecolor-rgbstr), 0.18); + } + + /* 暗色模式下子目录边框 */ + html.darkmode #leftbar_mobile_catalog .index-subItem-box { + border-left-color: rgba(255, 255, 255, 0.1); + } + + /* 暗色模式下滚动条 */ + html.darkmode #leftbar_mobile_catalog::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.35); + } +} + + +/* ========== backdrop-filter 移动端兼容性修�?========== */ +/* 针对不支�?backdrop-filter 的浏览器提供降级方案 */ + +/* 检测不支持 backdrop-filter 的浏览器，使用更高不透明度的背景作为降级 */ +@supports not (backdrop-filter: blur(1px)) { + + /* 顶栏降级 */ + html.no-banner.toolbar-blur #navbar-main { + background-color: rgba(var(--themecolor-rgbstr), 0.92) !important; + } + + /* 搜索框降�?*/ + #navbar_search_input_container.open .input-group { + background: rgba(255, 255, 255, 0.95); + } + + /* 侧边栏遮罩降�?*/ + #sidebar_mask { + background: rgba(0, 0, 0, 0.65); + } + + /* 左侧栏移动端降级 */ + @media screen and (max-width: 900px) { + #leftbar { + background: rgba(255, 255, 255, 0.98) !important; + } + + html.darkmode #leftbar { + background: rgba(30, 30, 30, 0.98) !important; + } + + .leftbar-mobile-action { + background: rgba(var(--themecolor-rgbstr), 0.12); + } + + .leftbar-mobile-actions-container { + background: rgba(255, 255, 255, 0.98); + } + + html.darkmode .leftbar-mobile-actions-container { + background: rgba(30, 30, 30, 0.98); + } + } + + /* 玻璃态顶栏降�?*/ + html.toolbar-glass #navbar-main { + background: rgba(255, 255, 255, 0.88) !important; + } + + html.toolbar-glass.darkmode #navbar-main { + background: rgba(0, 0, 0, 0.85) !important; + } + + /* 弹窗遮罩降级 */ + .modal-backdrop, + #share_panel_mask { + background: rgba(0, 0, 0, 0.7); + } + + /* 图片查看器遮罩降�?*/ + .fancybox-bg { + background: rgba(0, 0, 0, 0.92); + } +} + +/* 针对 -webkit-backdrop-filter 也不支持的情况（部分旧版安卓浏览器） */ +@supports not (-webkit-backdrop-filter: blur(1px)) { + @supports not (backdrop-filter: blur(1px)) { + + /* 确保在完全不支持的情况下有可用的样式 */ + html.no-banner.toolbar-blur #navbar-main, + html.toolbar-glass #navbar-main { + background-color: rgba(var(--themecolor-rgbstr), 0.95) !important; + } + + @media screen and (max-width: 900px) { + #leftbar { + background: var(--color-foreground) !important; + } + } + } +} + +/* ========== iOS Safari 特殊处理 ========== */ +/* iOS Safari 需�?-webkit- 前缀，且在某些情况下需要强制开启硬件加�?*/ +@media screen and (max-width: 900px) { + + #leftbar, + #navbar-main, + .leftbar-mobile-actions-container { + -webkit-transform: translateZ(0); + transform: translateZ(0); + } +} + +/* ========== Modern UI Enhancements - 现代化布局和动画优�?========== */ + +/* 1. 增强动画变量 */ +:root { + --micro-duration: 80ms; + --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); + --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1); + --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); + --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); + --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); + --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.1); + --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.1); + --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.12); + --shadow-5: 0 12px 24px rgba(0, 0, 0, 0.1), 0 24px 48px rgba(0, 0, 0, 0.15); + --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(var(--themecolor-rgbstr), 0.08); + --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +html.darkmode { + --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3); + --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3); + --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.3); + --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.25), 0 16px 32px rgba(0, 0, 0, 0.35); + --shadow-5: 0 12px 24px rgba(0, 0, 0, 0.3), 0 24px 48px rgba(0, 0, 0, 0.4); + --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(var(--themecolor-rgbstr), 0.15); +} + +/* 2. 桌面端卡片悬停效果增�?*/ +@media (hover: hover) and (pointer: fine) { + article.post.card { + transition: transform var(--animation-normal) var(--ease-out-expo), box-shadow var(--animation-normal) var(--ease-standard); + } + + article.post.card .post-thumbnail { + transition: transform var(--animation-slow) var(--ease-out-expo); + } + + article.post.card:hover .post-thumbnail { + transform: none; + } + + .card:not(article):not(.no-hover-effect) { + transition: box-shadow var(--animation-normal) var(--ease-standard); + } + + #leftbar .card, + #rightbar .card { + transition: box-shadow var(--animation-normal) var(--ease-standard), border-color var(--animation-fast) var(--ease-standard); + } + + #leftbar .card:hover, + #rightbar .card:hover { + border-color: rgba(var(--themecolor-rgbstr), 0.15); + } +} + +/* 3. 按钮和链接悬停效�?*/ +@media (hover: hover) and (pointer: fine) { + .btn { + transition: all var(--animation-fast) var(--ease-standard); + position: relative; + overflow: hidden; + } + + .btn::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%); + opacity: 0; + transition: opacity var(--animation-fast) var(--ease-standard); + pointer-events: none; + } + + .btn:hover::after { + opacity: 1; + } + + .btn:active { + transform: scale(0.98); + transition-duration: var(--micro-duration); + } + + article .post-content a:not([class*="button"]):not(.no-underline) { + background-image: linear-gradient(var(--themecolor), var(--themecolor)); + background-size: 0% 2px; + background-position: 0 100%; + background-repeat: no-repeat; + transition: background-size var(--animation-normal) var(--ease-out-expo); + } + + article .post-content a:not([class*="button"]):not(.no-underline):hover { + background-size: 100% 2px; + } + + .navbar-nav .nav-link { + position: relative; + transition: color var(--animation-fast) var(--ease-standard); + } + + .navbar-nav .nav-link::before { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: currentColor; + transition: width var(--animation-normal) var(--ease-out-expo), left var(--animation-normal) var(--ease-out-expo); + border-radius: 1px; + } + + .navbar-nav .nav-link:hover::before { + width: 100%; + left: 0; + } + + .comment-item { + transition: box-shadow var(--animation-normal) var(--ease-standard); + } +} + +/* 4. 滚动入场动画 */ +@keyframes modernFadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes modernFadeInScale { + from { + opacity: 0; + transform: scale(0.95); + } + + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes modernSlideInLeft { + from { + opacity: 0; + transform: translateX(-20px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes modernSlideInRight { + from { + opacity: 0; + transform: translateX(20px); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +.article-list article.post { + animation: modernFadeInUp var(--animation-slow) var(--ease-emphasized-decelerate) both; +} + +.article-list article.post:nth-child(1) { + animation-delay: 0ms; +} + +.article-list article.post:nth-child(2) { + animation-delay: 50ms; +} + +.article-list article.post:nth-child(3) { + animation-delay: 100ms; +} + +.article-list article.post:nth-child(4) { + animation-delay: 150ms; +} + +.article-list article.post:nth-child(5) { + animation-delay: 200ms; +} + +.article-list article.post:nth-child(6) { + animation-delay: 250ms; +} + +.article-list article.post:nth-child(7) { + animation-delay: 300ms; +} + +.article-list article.post:nth-child(8) { + animation-delay: 350ms; +} + +.article-list article.post:nth-child(n+9) { + animation-delay: 400ms; +} + +#leftbar .card { + animation: modernSlideInLeft var(--animation-slow) var(--ease-emphasized-decelerate) both; +} + +#leftbar .card:nth-child(1) { + animation-delay: 100ms; +} + +#leftbar .card:nth-child(2) { + animation-delay: 150ms; +} + +#leftbar .card:nth-child(3) { + animation-delay: 200ms; +} + +#leftbar .card:nth-child(4) { + animation-delay: 250ms; +} + +#leftbar .card:nth-child(5) { + animation-delay: 300ms; +} + +#rightbar .card { + animation: modernSlideInRight var(--animation-slow) var(--ease-emphasized-decelerate) both; +} + +#rightbar .card:nth-child(1) { + animation-delay: 100ms; +} + +#rightbar .card:nth-child(2) { + animation-delay: 150ms; +} + +#rightbar .card:nth-child(3) { + animation-delay: 200ms; +} + +/* 5. 页面过渡和浮动按钮动�?*/ +#primary.pjax-loading { + opacity: 0.6; + transform: translate3d(0, 10px, 0); + pointer-events: none; +} + +#primary { + transition: opacity var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard); +} + +@keyframes modernContentFadeIn { + from { + opacity: 0; + transform: translate3d(0, 16px, 0); + } + + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +article.post.post-full:not(.no-animation) { + animation: modernContentFadeIn var(--animation-slow) var(--ease-emphasized-decelerate) both; +} + +article.post.post-full { + transform-origin: center top; +} + +#float_action_buttons { + transition: transform var(--animation-normal) var(--ease-back), opacity var(--animation-normal) var(--ease-standard); +} + +#float_action_buttons .fabtn { + transition: background var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard), opacity var(--animation-normal) var(--ease-standard); +} + +#float_action_buttons .fabtn:active { + transform: scale(0.9); + transition-duration: var(--micro-duration); +} + +@keyframes modernFabtnBounceIn { + 0% { + opacity: 0; + transform: scale(0.3); + } + + 50% { + transform: scale(1.05); + } + + 70% { + transform: scale(0.95); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +#float_action_buttons:not(.fabtns-unloaded) .fabtn:not(.fabtn-hidden) { + animation: modernFabtnBounceIn var(--animation-slow) var(--ease-spring) both; +} + +#float_action_buttons .fabtn:nth-child(1) { + animation-delay: 0ms; +} + +#float_action_buttons .fabtn:nth-child(2) { + animation-delay: 50ms; +} + +#float_action_buttons .fabtn:nth-child(3) { + animation-delay: 100ms; +} + +#float_action_buttons .fabtn:nth-child(4) { + animation-delay: 150ms; +} + +#float_action_buttons .fabtn:nth-child(5) { + animation-delay: 200ms; +} + +/* 6. 顶栏和评论区动画 */ +#navbar-main { + transition: background-color var(--animation-normal) var(--ease-standard), padding var(--animation-normal) var(--ease-standard), box-shadow var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard), backdrop-filter var(--animation-normal) var(--ease-standard); +} + +#navbar-main:not(.navbar-ontop) { + box-shadow: var(--shadow-2); +} + +#navbar_search_input_container .input-group { + transition: width var(--animation-normal) var(--ease-out-expo), background var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard); +} + +#navbar_search_input_container.open .input-group { + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); +} + +.comment-item { + animation: modernFadeInUp var(--animation-normal) var(--ease-emphasized-decelerate) both; +} + +.comment-item:nth-child(1) { + animation-delay: 0ms; +} + +.comment-item:nth-child(2) { + animation-delay: 30ms; +} + +.comment-item:nth-child(3) { + animation-delay: 60ms; +} + +.comment-item:nth-child(4) { + animation-delay: 90ms; +} + +.comment-item:nth-child(5) { + animation-delay: 120ms; +} + +.comment-item:nth-child(n+6) { + animation-delay: 150ms; +} + +@keyframes modernCommentSuccess { + 0% { + transform: scale(0.8); + opacity: 0; + } + + 50% { + transform: scale(1.02); + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +.comment-item.new-comment { + animation: modernCommentSuccess var(--animation-slow) var(--ease-spring); +} + +/* 7. 图片和表单动�?*/ +article img, +.post-thumbnail img { + transition: opacity var(--animation-normal) var(--ease-standard); +} + +article img[loading="lazy"], +.post-thumbnail img[loading="lazy"] { + opacity: 0; +} + +article img.loaded, +.post-thumbnail img.loaded, +article img:not([loading="lazy"]), +.post-thumbnail img:not([loading="lazy"]) { + opacity: 1; +} + +.form-control { + transition: border-color var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard), background-color var(--animation-fast) var(--ease-standard); +} + +.form-control:focus { + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.15); + border-color: var(--themecolor); +} + +.form-group.floating-label { + position: relative; +} + +.form-group.floating-label label { + position: absolute; + left: 12px; + top: 50%; + transform: translateY(-50%); + transition: all var(--animation-fast) var(--ease-standard); + pointer-events: none; + color: #999; + background: var(--color-foreground); + padding: 0 4px; +} + +.form-group.floating-label .form-control:focus~label, +.form-group.floating-label .form-control:not(:placeholder-shown)~label { + top: 0; + font-size: 12px; + color: var(--themecolor); +} + +/* 8. 滚动条美�?*/ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(var(--themecolor-rgbstr), 0.3); + border-radius: 4px; + border: 2px solid transparent; + background-clip: content-box; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(var(--themecolor-rgbstr), 0.5); + background-clip: content-box; +} + +* { + scrollbar-width: thin; + scrollbar-color: rgba(var(--themecolor-rgbstr), 0.3) transparent; +} + +/* 9. 移动端触摸优�?*/ +@media (hover: none) and (pointer: coarse) { + article.post.card:hover { + transform: none; + box-shadow: var(--shadow-1); + } + + * { + -webkit-tap-highlight-color: transparent; + } +} + +/* 10. 移动端侧边栏动画增强 */ +@media screen and (max-width: 900px) { + #leftbar { + transition: transform var(--animation-normal) var(--ease-out-expo), box-shadow var(--animation-normal) var(--ease-standard); + transform: translateX(-100%); + box-shadow: none; + } + + html.leftbar-opened #leftbar { + transform: translateX(0); + box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15); + } + + #leftbar_backdrop { + transition: opacity var(--animation-normal) var(--ease-standard), visibility var(--animation-normal); + } + + @keyframes modernSlideInDown { + from { + opacity: 0; + transform: translateY(-15px); + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + html.leftbar-opened .leftbar-mobile-profile { + animation: modernSlideInDown var(--animation-normal) var(--ease-emphasized-decelerate) 0.1s both; + } + + html.leftbar-opened .leftbar-mobile-search { + animation: modernFadeInUp var(--animation-normal) var(--ease-emphasized-decelerate) 0.15s both; + } + + html.leftbar-opened .leftbar-mobile-menu-section { + animation: modernFadeInUp var(--animation-normal) var(--ease-emphasized-decelerate) 0.2s both; + } + + html.leftbar-opened .leftbar-mobile-footer { + animation: modernFadeInUp var(--animation-normal) var(--ease-emphasized-decelerate) 0.25s both; + } + + .leftbar-mobile-menu-item>a { + transition: background var(--animation-fast) var(--ease-standard), transform var(--micro-duration) var(--ease-standard); + } + + .leftbar-mobile-menu-item>a:active { + background: rgba(var(--themecolor-rgbstr), 0.12); + transform: scale(0.98); + } + + article.post.card { + transition: transform var(--micro-duration) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard); + } + + #navbar-main { + transition: transform var(--animation-normal) var(--ease-standard), background-color var(--animation-fast) var(--ease-standard); + } +} + +/* 11. 骨架屏和加载动画 */ +@keyframes modernSkeletonPulse { + 0% { + background-position: -200% 0; + } + + 100% { + background-position: 200% 0; + } +} + +.skeleton { + background: linear-gradient(90deg, var(--color-border-on-foreground) 25%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 75%); + background-size: 200% 100%; + animation: modernSkeletonPulse 1.5s ease-in-out infinite; + border-radius: var(--card-radius); +} + +/* ========================================================================== + 现代化页面加载系统 + ========================================================================== */ + +/* ---------- 基础旋转器（保留用于其他地方） ---------- */ +@keyframes modernSpinnerRotate { + to { + transform: rotate(360deg); + } +} + +.loading-spinner { + width: 24px; + height: 24px; + border: 2px solid var(--color-border); + border-top-color: var(--themecolor); + border-radius: 50%; + animation: modernSpinnerRotate 0.8s linear infinite; +} + +/* ---------- 顶部进度条 ---------- */ +#page-loading-bar { + position: fixed; + top: 0; + left: 0; + height: 3px; + background: var(--themecolor-gradient); + z-index: 9999; + transition: width var(--animation-fast) var(--ease-out-expo); + box-shadow: 0 0 10px rgba(var(--themecolor-rgbstr), 0.5); +} + +/* ---------- 页面加载器容器 ---------- */ +.page-loader { + position: fixed; + inset: 0; + z-index: 9998; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s; +} + +.page-loader.is-visible { + opacity: 1; + visibility: visible; + pointer-events: auto; + transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; +} + +.page-loader.is-hiding { + opacity: 0; + transition: opacity 0.35s cubic-bezier(0.4, 0, 0.6, 1); +} + +/* ---------- 背景遮罩 ---------- */ +.page-loader-backdrop { + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(var(--themecolor-rgbstr), 0.03) 0%, rgba(var(--themecolor-rgbstr), 0.08) 100%); + -webkit-backdrop-filter: blur(24px) saturate(180%); + backdrop-filter: blur(24px) saturate(180%); +} + +html.darkmode .page-loader-backdrop { + background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%); +} + +/* ---------- 内容容器 ---------- */ +.page-loader-content { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + gap: 32px; + transform: translateY(20px) scale(0.95); + opacity: 0; + transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; +} + +.page-loader.is-visible .page-loader-content { + transform: translateY(0) scale(1); + opacity: 1; + transition-delay: 0.1s; +} + +/* ---------- 进度环容器 ---------- */ +.loader-ring-container { + position: relative; + width: 120px; + height: 120px; +} + +/* ---------- SVG 进度环 ---------- */ +.loader-ring { + width: 100%; + height: 100%; + transform: rotate(-90deg); + filter: drop-shadow(0 4px 12px rgba(var(--themecolor-rgbstr), 0.2)); +} + +.loader-ring-bg { + fill: none; + stroke: var(--color-border); + stroke-width: 3; + opacity: 0.2; +} + +.loader-ring-progress { + fill: none; + stroke: url(#loaderGradient); + stroke-width: 3; + stroke-linecap: round; + stroke-dasharray: 283; + stroke-dashoffset: 283; + transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* 渐变定义（通过 JS 动态添加或使用内联 SVG） */ +.loader-ring::before { + content: ''; + position: absolute; + inset: 0; + border-radius: 50%; + background: conic-gradient(from 0deg, var(--themecolor), transparent); + opacity: 0.1; + animation: ringGlow 2s ease-in-out infinite; +} + +@keyframes ringGlow { + + 0%, + 100% { + opacity: 0.1; + } + + 50% { + opacity: 0.3; + } +} + +/* ---------- 中心图标 ---------- */ +.loader-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 48px; + height: 48px; + color: var(--themecolor); + animation: iconPulse 2s ease-in-out infinite; +} + +.loader-icon svg { + width: 100%; + height: 100%; + animation: iconRotate 3s linear infinite; +} + +@keyframes iconPulse { + + 0%, + 100% { + opacity: 0.6; + transform: translate(-50%, -50%) scale(1); + } + + 50% { + opacity: 1; + transform: translate(-50%, -50%) scale(1.1); + } +} + +@keyframes iconRotate { + to { + transform: rotate(360deg); + } +} + +/* ---------- 加载文字 ---------- */ +.loader-text { + text-align: center; + opacity: 0; + transform: translateY(10px); + animation: textFadeIn 0.5s ease forwards; + animation-delay: 0.3s; +} + +@keyframes textFadeIn { + to { + opacity: 1; + transform: translateY(0); + } +} + +.loader-title { + font-size: 20px; + font-weight: 600; + color: var(--color-font); + margin-bottom: 8px; + letter-spacing: 0.5px; +} + +.loader-subtitle { + font-size: 14px; + color: var(--color-font-sub); + font-weight: 400; +} + +/* ---------- 骨架屏（延迟显示） ---------- */ +.loader-skeleton { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + pointer-events: none; +} + +.page-loader.show-skeleton .loader-skeleton { + opacity: 1; + transform: translateY(0); +} + +/* ---------- 骨架卡片 ---------- */ +.skeleton-card { + width: min(480px, 85vw); + background: var(--color-foreground); + border-radius: 16px; + overflow: hidden; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); +} + +html.darkmode .skeleton-card { + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); +} + +/* ---------- 骨架图片 ---------- */ +.skeleton-image { + width: 100%; + height: 200px; + background: linear-gradient(90deg, var(--color-border-on-foreground) 0%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 100%); + background-size: 200% 100%; + animation: skeletonShimmer 1.5s ease-in-out infinite; + position: relative; + overflow: hidden; +} + +.skeleton-image::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + animation: shimmerSlide 2s infinite; +} + +html.darkmode .skeleton-image::after { + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); +} + +@keyframes shimmerSlide { + to { + left: 100%; + } +} + +@keyframes skeletonShimmer { + + 0%, + 100% { + background-position: 0% 0%; + } + + 50% { + background-position: 100% 0%; + } +} + +/* ---------- 骨架内容 ---------- */ +.skeleton-content { + padding: 20px; +} + +.skeleton-title { + height: 24px; + width: 70%; + border-radius: 12px; + background: linear-gradient(90deg, var(--color-border-on-foreground) 0%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 100%); + background-size: 200% 100%; + animation: skeletonShimmer 1.5s ease-in-out infinite; + margin-bottom: 16px; +} + +.skeleton-line { + height: 14px; + border-radius: 7px; + background: linear-gradient(90deg, var(--color-border-on-foreground) 0%, var(--color-border-on-foreground-deeper) 50%, var(--color-border-on-foreground) 100%); + background-size: 200% 100%; + animation: skeletonShimmer 1.5s ease-in-out infinite; + margin-bottom: 10px; +} + +.skeleton-line.short { + width: 60%; +} + +/* ---------- 响应式适配 ---------- */ +@media (max-width: 768px) { + .loader-ring-container { + width: 100px; + height: 100px; + } + + .loader-icon { + width: 40px; + height: 40px; + } + + .loader-title { + font-size: 18px; + } + + .loader-subtitle { + font-size: 13px; + } + + .skeleton-image { + height: 160px; + } + + .skeleton-content { + padding: 16px; + } +} + +@media (max-width: 480px) { + .page-loader-content { + gap: 24px; + } + + .loader-ring-container { + width: 90px; + height: 90px; + } + + .loader-icon { + width: 36px; + height: 36px; + } + + .skeleton-card { + width: 92vw; + } + + .skeleton-image { + height: 140px; + } +} + +/* ---------- 减少动画（无障碍） ---------- */ +@media (prefers-reduced-motion: reduce) { + + .page-loader, + .page-loader-content, + .loader-ring-progress, + .loader-icon, + .loader-text, + .loader-skeleton, + .skeleton-image, + .skeleton-title, + .skeleton-line { + animation: none !important; + transition: none !important; + } + + .page-loader.is-visible .page-loader-content { + transform: none; + opacity: 1; + } +} + +/* 页面过渡内容容器 */ +.page-transition-content { + will-change: opacity, transform; + transition: opacity var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-emphasized-decelerate); + transform: translate3d(0, 0, 0); +} + +html.page-transition-enter .page-transition-content { + opacity: 0; + transform: translate3d(0, 8px, 0); +} + +html.page-transition-enter.page-transition-active .page-transition-content { + opacity: 1; + transform: translate3d(0, 0, 0); +} + +@media (prefers-reduced-motion: reduce) { + + .page-transition-content, + #article-loading-overlay, + #article-loading-overlay .overlay-content { + transition: none !important; + animation: none !important; + } +} + +/* 12. 模态框和下拉菜单动�?*/ +.modal { + transition: opacity var(--animation-normal) var(--ease-standard); +} + +.modal.show { + opacity: 1; +} + +.modal-dialog { + transition: transform var(--animation-normal) var(--ease-emphasized-decelerate), opacity var(--animation-normal) var(--ease-standard); + transform: scale(0.9) translateY(-20px); + opacity: 0; +} + +.modal.show .modal-dialog { + transform: scale(1) translateY(0); + opacity: 1; +} + +@media screen and (max-width: 900px) { + .modal-dialog.modal-bottom { + position: fixed; + bottom: 0; + left: 0; + right: 0; + margin: 0; + transform: translateY(100%); + border-radius: 20px 20px 0 0; + } + + .modal.show .modal-dialog.modal-bottom { + transform: translateY(0); + } +} + +.dropdown-menu { + opacity: 0; + transform: translateY(-10px) scale(0.95); + transform-origin: top center; + transition: opacity var(--animation-fast) var(--ease-standard), transform var(--animation-fast) var(--ease-emphasized-decelerate), visibility var(--animation-fast); + visibility: hidden; +} + +.dropdown-menu.show { + opacity: 1; + transform: translateY(0) scale(1); + visibility: visible; +} + +.dropdown-item { + transition: background var(--animation-fast) var(--ease-standard), color var(--animation-fast) var(--ease-standard); +} + +/* 13. 工具提示、标签、分页动�?*/ +.tooltip { + opacity: 0; + transform: translateY(5px); + transition: opacity var(--animation-fast) var(--ease-standard), transform var(--animation-fast) var(--ease-emphasized-decelerate); +} + +.tooltip.show { + opacity: 1; + transform: translateY(0); +} + +.badge, +.tag { + transition: background var(--animation-fast) var(--ease-standard); +} + +.badge:active, +.tag:active { + transform: scale(0.95); +} + +.pagination .page-link { + transition: all var(--animation-fast) var(--ease-standard); +} + +.pagination .page-link:active { + transform: scale(0.95); +} + +/* 14. 目录导航动画 */ +.index-link { + transition: all var(--animation-fast) var(--ease-standard); + position: relative; +} + +.index-link::before { + content: ""; + position: absolute; + left: -8px; + top: 50%; + transform: translateY(-50%) scaleY(0); + width: 3px; + height: 60%; + background: var(--themecolor); + border-radius: 2px; + transition: transform var(--animation-normal) var(--ease-spring); +} + +.index-item.current>.index-link::before { + transform: translateY(-50%) scaleY(1); +} + +/* 15. 时间线动�?*/ +.timeline-item { + opacity: 0; + transform: translateX(-20px); + animation: modernTimelineSlideIn var(--animation-slow) var(--ease-emphasized-decelerate) forwards; +} + +@keyframes modernTimelineSlideIn { + to { + opacity: 1; + transform: translateX(0); + } +} + +.timeline-item:nth-child(1) { + animation-delay: 0ms; +} + +.timeline-item:nth-child(2) { + animation-delay: 100ms; +} + +.timeline-item:nth-child(3) { + animation-delay: 200ms; +} + +.timeline-item:nth-child(4) { + animation-delay: 300ms; +} + +.timeline-item:nth-child(5) { + animation-delay: 400ms; +} + +.timeline-item:nth-child(n+6) { + animation-delay: 500ms; +} + +/* 16. 友链和代码块动画 */ +.friend-link-item { + transition: box-shadow var(--animation-normal) var(--ease-standard); +} + +.friend-link-avatar { + transition: transform var(--animation-normal) var(--ease-spring); +} + +.hljs-codeblock { + transition: box-shadow var(--animation-normal) var(--ease-standard); +} + +.code-copy-btn { + opacity: 0; + transition: opacity var(--animation-fast) var(--ease-standard), background var(--animation-fast) var(--ease-standard); +} + +.hljs-codeblock:hover .code-copy-btn { + opacity: 1; +} + +/* 17. 减少动画偏好支持 */ +@media (prefers-reduced-motion: reduce) { + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .card, + .btn, + a { + transition: none !important; + } +} + +/* 18. 打印样式优化 */ +@media print { + + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + } +} + +/* ========== End of Modern UI Enhancements ========== */ + + +/* ---------- Mermaid 夜间模式样式 ---------- */ +html.darkmode .mermaid-container { + background: var(--color-widgets); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* ---------- 夜间模式下的 Mermaid 错误提示 ---------- */ +html.darkmode .mermaid-error-container { + background: linear-gradient(135deg, #2d1f1f 0%, #3d2020 100%); + border-color: #9b2c2c; + border-left-color: #e53e3e; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); +} + +html.darkmode .mermaid-error-container:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); +} + +html.darkmode .mermaid-error-header { + border-bottom-color: rgba(155, 44, 44, 0.3); +} + +html.darkmode .mermaid-error-title { + color: #fc8181; +} + +html.darkmode .mermaid-error-type { + color: #feb2b2; + background: rgba(155, 44, 44, 0.3); +} + +html.darkmode .mermaid-error-message { + color: #feb2b2; + background: rgba(0, 0, 0, 0.3); + border-left-color: #9b2c2c; +} + +html.darkmode .mermaid-error-code summary { + background: rgba(0, 0, 0, 0.3); + color: #90cdf4; +} + +html.darkmode .mermaid-error-code summary:hover { + background: rgba(0, 0, 0, 0.5); +} + +html.darkmode .mermaid-error-code pre { + background: #1a202c; + color: #cbd5e0; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); +} + + +/* ========================================================================== + Mermaid 图表样式 + ========================================================================== */ + +/* ---------- Mermaid 容器基础样式 ---------- */ +.mermaid-container { + background: var(--card-background); + border-radius: var(--card-radius); + padding: 20px; + margin: 20px 0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; + position: relative; + margin: 20px -20px; + transition: opacity 0.3s ease-in; +} + +.mermaid-container-inner { + overflow: auto; + transform-origin: top left; + transition: transform 0.3s ease; +} + +.mermaid-container svg { + width: 100% !important; + height: auto !important; + display: block; +} + +/* 缩放控制按钮 */ +.mermaid-zoom-controls { + position: absolute; + top: 10px; + right: 10px; + display: flex; + gap: 5px; + z-index: 10; + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(10px); + border-radius: 6px; + padding: 5px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + opacity: 0; + transform: translateY(-10px); + transition: opacity 0.3s ease, transform 0.3s ease; + pointer-events: none; +} + +.mermaid-container:hover .mermaid-zoom-controls { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +html.darkmode .mermaid-zoom-controls { + background: rgba(30, 30, 30, 0.85); +} + +.mermaid-zoom-btn { + width: 32px; + height: 32px; + border: none; + background: transparent; + cursor: pointer; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + color: #5e72e4; + transition: all 0.2s; +} + +.mermaid-zoom-btn:hover { + background: rgba(94, 114, 228, 0.1); +} + +.mermaid-zoom-btn:active { + transform: scale(0.95); +} + +.mermaid-zoom-btn:disabled { + opacity: 0.4; + cursor: not-allowed; + pointer-events: none; +} + +.mermaid-zoom-level { + display: flex; + align-items: center; + padding: 0 8px; + font-size: 13px; + color: #666; + min-width: 50px; + justify-content: center; +} + +html.darkmode .mermaid-zoom-level { + color: #aaa; +} + +/* 按钮 tooltip */ +.mermaid-zoom-btn[title] { + position: relative; +} + +.mermaid-zoom-btn[title]::after { + content: attr(title); + position: absolute; + bottom: -35px; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.85); + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; + white-space: nowrap; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s ease; + z-index: 100; +} + +.mermaid-zoom-btn[title]:hover::after { + opacity: 1; +} + +html.darkmode .mermaid-zoom-btn[title]::after { + background: rgba(255, 255, 255, 0.9); + color: #333; +} + +/* ---------- 卡片内的 Mermaid 图表 ---------- */ +.card .mermaid-container, +.post-card .mermaid-container, +.comment-content .mermaid-container { + padding: 15px; + margin: 15px -15px; +} + +/* ---------- 夜间模式适配 ---------- */ +html.darkmode .mermaid-container { + background: var(--card-background-dark); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* ---------- 响应式设�?---------- */ +@media screen and (max-width: 768px) { + .mermaid-container { + padding: 15px; + margin: 15px -15px; + border-radius: calc(var(--card-radius) * 0.8); + } + + .card .mermaid-container, + .post-card .mermaid-container, + .comment-content .mermaid-container { + margin: 15px -15px; + } +} + +@media screen and (max-width: 480px) { + .mermaid-container { + padding: 10px; + margin: 10px -10px; + } + + .card .mermaid-container, + .post-card .mermaid-container, + .comment-content .mermaid-container { + margin: 10px -10px; + } + + .mermaid-zoom-controls { + top: 5px; + right: 5px; + padding: 3px; + } + + .mermaid-zoom-btn { + width: 28px; + height: 28px; + font-size: 16px; + } +} + +/* ---------- 打印样式 ---------- */ +@media print { + .mermaid-container { + box-shadow: none; + border: 1px solid #e2e8f0; + page-break-inside: avoid; + } + + .mermaid-error-container { + display: none; + } +} + +/* ---------- 加载动画 ---------- */ +.mermaid-container.loading { + opacity: 0.5; + position: relative; +} + +.mermaid-container.loading::after { + content: "正在渲染图表..."; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--color-text-secondary); + font-size: 14px; +} + +/* ---------- 滚动条样式（Webkit�?---------- */ +.mermaid-container::-webkit-scrollbar { + height: 8px; +} + +.mermaid-container::-webkit-scrollbar-track { + background: var(--color-background); + border-radius: 4px; +} + +.mermaid-container::-webkit-scrollbar-thumb { + background: var(--color-border); + border-radius: 4px; +} + +.mermaid-container::-webkit-scrollbar-thumb:hover { + background: var(--color-text-secondary); +} + +html.darkmode .mermaid-container::-webkit-scrollbar-track { + background: var(--color-background-dark); +} + +html.darkmode .mermaid-container::-webkit-scrollbar-thumb { + background: var(--color-border-dark); +} + +html.darkmode .mermaid-container::-webkit-scrollbar-thumb:hover { + background: var(--color-text-secondary-dark); +} \ No newline at end of file diff --git a/.kiro/specs/loading-animation-cleanup/design.md b/.kiro/specs/loading-animation-cleanup/design.md new file mode 100644 index 0000000..ec6c458 --- /dev/null +++ b/.kiro/specs/loading-animation-cleanup/design.md @@ -0,0 +1,369 @@ +# 加载动画系统清理与文本效果修复 - 设计文档 + +## 1. 架构概述 + +本次优化分为两个独立模块： +1. **加载动画清理模块**：移除旧代码，统一使用 `PageLoader` +2. **文本效果修复模块**：为文本特效添加文章容器选择器支持 + +## 2. 加载动画清理设计 + +### 2.1 问题分析 + +**旧代码位置**：`argontheme.js` 第 4970-5040 行 + +**旧代码特征**： +- 使用 `article-loading-overlay` ID +- 手动创建 DOM 元素和骨架屏 HTML +- 使用 `setInterval` 模拟进度 +- 监听 `window.load` 事件 +- PJAX 事件处理中重复创建相同元素 + +**新系统特征**： +- 使用 `PageLoader` 模块（IIFE 封装） +- 统一的 `loading-*` 类名前缀 +- SVG 圆环进度指示器 +- 智能进度算法（缓动函数） +- 延迟显示和最小显示时间控制 + +### 2.2 清理策略 + +#### 2.2.1 页面初始加载 +**旧代码**（需移除）： +```javascript +// 第 4970-4995 行 +var bar = document.getElementById('page-loading-bar'); +// ... 创建 article-loading-overlay ... +window.addEventListener('load', function() { ... }); +``` + +**新方案**： +- 在 `DOMContentLoaded` 时调用 `PageLoader.show()` +- 在 `window.load` 时调用 `PageLoader.hide()` +- 已在现有代码中实现，无需修改 + +#### 2.2.2 PJAX 加载动画 +**旧代码**（需移除）： +```javascript +// 第 4997-5033 行 +function initPjaxAnimations() { + jQuery(document).on('pjax:start', function() { + // ... 创建 article-loading-overlay ... + }); + jQuery(document).on('pjax:end', function() { + // ... 移除 overlay ... + }); +} +``` + +**新方案**： +- `pjax:start` 时调用 `PageLoader.show()` +- `pjax:end` 时调用 `PageLoader.hide()` +- 需要新增此部分代码 + +### 2.3 实现步骤 + +1. **定位旧代码**：确认第 4970-5040 行的完整范围 +2. **移除旧代码**：删除整个旧的加载动画实现 +3. **添加 PJAX 支持**：在 `PageLoader` 模块后添加 PJAX 事件监听 +4. **测试验证**：确保页面加载和 PJAX 导航都正常 + +### 2.4 新增 PJAX 集成代码 + +```javascript +// PJAX 加载动画集成 +if (typeof jQuery !== 'undefined') { + jQuery(document).on('pjax:start', function() { + PageLoader.show(); + }); + + jQuery(document).on('pjax:end', function() { + PageLoader.hide(); + // 重新初始化页面动画 + setTimeout(function() { + initImageLoadAnimation(); + initScrollAnimations(); + initSmoothScroll(); + }, 100); + }); +} +``` + +## 3. 文本效果修复设计 + +### 3.1 问题分析 + +**当前样式选择器**： +```css +.color-curtain { ... } +.text-blur { ... } +.huhua { ... } +``` + +**问题**： +- 缺少文章容器选择器（`article .entry-content`、`.article-content`） +- 在某些文章布局中可能不生效 + +### 3.2 修复策略 + +参考黑幕样式的修复方式，为每个文本效果添加文章容器选择器。 + +#### 3.2.1 彩色黑幕（color-curtain） + +**当前样式**： +```css +.color-curtain, .color-curtain a, a .color-curtain, .color-curtain a.new { + background-color: var(--curtain-bg, #252525) !important; + color: var(--curtain-bg, #252525) !important; + /* ... */ +} +``` + +**修复方案**： +```css +/* 基础样式 */ +.color-curtain, +article .entry-content .color-curtain, +.article-content .color-curtain { + background-color: var(--curtain-bg, #252525) !important; + color: var(--curtain-bg, #252525) !important; + /* ... */ +} + +/* 链接样式 */ +.color-curtain a, +article .entry-content .color-curtain a, +.article-content .color-curtain a { + color: inherit !important; + /* ... */ +} + +/* 悬停样式 */ +.color-curtain:hover, +article .entry-content .color-curtain:hover, +.article-content .color-curtain:hover { + color: var(--curtain-fg, #fff) !important; +} +``` + +**夜间模式优化**： +```css +html.darkmode .color-curtain, +html.darkmode article .entry-content .color-curtain, +html.darkmode .article-content .color-curtain { + --curtain-bg: #1a1a1a; + --curtain-fg: #e0e0e0; +} +``` + +#### 3.2.2 模糊文本（text-blur） + +**当前样式**： +```css +.text-blur, .text-blur a, a .text-blur, .text-blur a.new { + filter: blur(2px) !important; + /* ... */ +} +``` + +**修复方案**： +```css +.text-blur, +article .entry-content .text-blur, +.article-content .text-blur { + filter: blur(2px) !important; + transition: filter var(--text-blur-transition-time, .2s) ease; + display: inline-block; +} + +.text-blur:hover, +article .entry-content .text-blur:hover, +.article-content .text-blur:hover { + filter: none !important; +} +``` + +#### 3.2.3 划掉文本（huhua） + +**当前样式**： +```css +.huhua { + color: #9ea3a9 !important; + text-decoration: line-through !important; + /* ... */ +} +``` + +**修复方案**： +```css +.huhua, +article .entry-content .huhua, +.article-content .huhua { + color: #9ea3a9 !important; + text-decoration: line-through !important; + text-shadow: none !important; + transition: color .2s ease; +} + +.huhua:hover, +article .entry-content .huhua:hover, +.article-content .huhua:hover { + color: #7f858b !important; +} +``` + +**夜间模式优化**： +```css +html.darkmode .huhua, +html.darkmode article .entry-content .huhua, +html.darkmode .article-content .huhua { + color: #6a7075 !important; +} + +html.darkmode .huhua:hover, +html.darkmode article .entry-content .huhua:hover, +html.darkmode .article-content .huhua:hover { + color: #555a5f !important; +} +``` + +### 3.3 代码组织 + +在 `style.css` 中重新组织文本效果样式： + +``` +/* ========================================================================== + 文章文本特效（Text Effects in Articles） + ========================================================================== */ + +/* ---------- 彩色黑幕（Color Curtain） ---------- */ +/* 基础样式 */ +/* 链接样式 */ +/* 悬停样式 */ +/* 夜间模式 */ + +/* ---------- 模糊文本（Text Blur） ---------- */ +/* 基础样式 */ +/* 悬停样式 */ + +/* ---------- 划掉文本（Strikethrough） ---------- */ +/* 基础样式 */ +/* 悬停样式 */ +/* 夜间模式 */ +``` + +## 4. 正确性属性（Correctness Properties） + +### 4.1 加载动画属性 + +**Property 1.1**: 页面加载时必须显示加载动画 +- **验证方式**：刷新页面，观察是否出现 SVG 圆环进度指示器 +- **预期行为**：`DOMContentLoaded` 后显示，`window.load` 后隐藏 + +**Property 1.2**: PJAX 导航时必须显示加载动画 +- **验证方式**：点击文章链接，观察是否出现加载动画 +- **预期行为**：`pjax:start` 后显示，`pjax:end` 后隐藏 + +**Property 1.3**: 不存在旧的 `article-loading-overlay` 元素 +- **验证方式**：检查 DOM 树和控制台 +- **预期行为**：只有 `loading-overlay` 元素，无 `article-loading-overlay` + +### 4.2 文本效果属性 + +**Property 2.1**: 文本效果在文章中可见 +- **验证方式**：在文章中添加 `测试` +- **预期行为**：文本被彩色背景遮盖 + +**Property 2.2**: 悬停时文本效果正确响应 +- **验证方式**：鼠标悬停在文本效果上 +- **预期行为**： + - `color-curtain`：显示文本内容 + - `text-blur`：取消模糊 + - `huhua`：颜色变深 + +**Property 2.3**: 夜间模式下颜色正确 +- **验证方式**：切换到夜间模式，检查文本效果颜色 +- **预期行为**：使用夜间模式专用颜色变量 + +## 5. 测试策略 + +### 5.1 单元测试（手动） + +1. **页面初始加载** + - 刷新页面 + - 观察加载动画是否正常显示和隐藏 + - 检查控制台是否有错误 + +2. **PJAX 导航** + - 点击文章链接 + - 观察加载动画是否正常显示和隐藏 + - 检查页面内容是否正确更新 + +3. **文本效果显示** + - 在文章编辑器中添加测试内容： + ```html + 彩色黑幕测试 + 模糊文本测试 + 划掉文本测试 + ``` + - 发布文章并查看效果 + +4. **文本效果交互** + - 鼠标悬停在每个文本效果上 + - 验证交互行为是否正确 + +5. **夜间模式** + - 切换到夜间模式 + - 重复步骤 3 和 4 + +### 5.2 回归测试 + +- 验证其他页面功能未受影响 +- 验证移动端响应式布局正常 +- 验证浏览器兼容性（Chrome、Firefox、Safari、Edge） + +## 6. 风险评估 + +### 6.1 高风险 +- **PJAX 功能失效**：移除旧代码可能影响 PJAX 导航 + - **缓解措施**：仔细测试 PJAX 导航，确保新代码正确集成 + +### 6.2 中风险 +- **样式冲突**：新增选择器可能与现有样式冲突 + - **缓解措施**：使用 `!important` 确保优先级，参考黑幕样式的成功经验 + +### 6.3 低风险 +- **性能影响**：新增选择器可能轻微影响 CSS 性能 + - **缓解措施**：选择器数量有限，影响可忽略 + +## 7. 实施计划 + +### Phase 1: 清理旧加载动画代码 +1. 备份 `argontheme.js` +2. 移除第 4970-5040 行旧代码 +3. 添加 PJAX 集成代码 +4. 测试页面加载和 PJAX 导航 + +### Phase 2: 修复文本效果样式 +1. 备份 `style.css` +2. 重构 `color-curtain` 样式 +3. 重构 `text-blur` 样式 +4. 重构 `huhua` 样式 +5. 添加夜间模式优化 +6. 测试所有文本效果 + +### Phase 3: 验证和提交 +1. 完整回归测试 +2. 检查代码规范 +3. 编写详细的 Git commit 信息 +4. 提交代码 + +## 8. 成功标准 + +- ✅ 旧加载动画代码完全移除 +- ✅ 页面加载和 PJAX 导航动画正常工作 +- ✅ 所有文本效果在文章中正常显示和交互 +- ✅ 夜间模式下颜色正确 +- ✅ 无控制台错误或警告 +- ✅ 代码遵循项目规范 +- ✅ Git commit 信息详细清晰 diff --git a/.kiro/specs/loading-animation-cleanup/requirements.md b/.kiro/specs/loading-animation-cleanup/requirements.md new file mode 100644 index 0000000..7fca51a --- /dev/null +++ b/.kiro/specs/loading-animation-cleanup/requirements.md @@ -0,0 +1,69 @@ +# 加载动画系统清理与文本效果修复 + +## 1. 概述 + +清理旧的加载动画代码，统一使用新的 `PageLoader` 系统，并修复文章中文本特效样式不显示的问题。 + +## 2. 背景 + +在之前的优化中： +- 创建了全新的 `PageLoader` 模块（SVG 圆环进度、智能进度算法、骨架屏） +- 移除了向后兼容函数 `showLoadingOverlay()` 和 `hideLoadingOverlay()` +- 修复了黑幕（`.heimu`）样式在文章中不显示的问题 + +但仍存在以下问题： +1. `argontheme.js` 第 4970-5040 行存在旧的加载动画代码，使用旧的 `article-loading-overlay` ID +2. 其他文本效果（`color-curtain`、`text-blur`、`huhua`）可能在文章中不显示 +3. 代码冗余，维护困难 + +## 3. 用户故事 + +### 3.1 作为开发者 +我希望代码库中只有一套加载动画系统，这样： +- 代码更易维护 +- 避免新旧系统冲突 +- 减少代码体积 + +### 3.2 作为用户 +我希望在文章中使用的所有文本特效都能正常显示，包括： +- 彩色黑幕（`color-curtain`） +- 模糊文本（`text-blur`） +- 划掉文本（`huhua`） + +## 4. 验收标准 + +### 4.1 清理旧加载动画代码 +- [ ] 移除 `argontheme.js` 中第 4970-5040 行的旧加载动画代码 +- [ ] 确保所有加载动画调用都使用新的 `PageLoader` 系统 +- [ ] PJAX 加载动画正常工作 +- [ ] 页面初始加载动画正常工作 + +### 4.2 修复文本效果样式 +- [ ] `color-curtain` 在文章中正常显示和交互 +- [ ] `text-blur` 在文章中正常显示和交互 +- [ ] `huhua` 在文章中正常显示和交互 +- [ ] 夜间模式下所有文本效果颜色正确 + +### 4.3 代码质量 +- [ ] 遵循项目代码规范（Tab 缩进、单引号、严格相等） +- [ ] 添加清晰的注释 +- [ ] 无控制台错误或警告 + +## 5. 技术约束 + +- 必须保持与现有 `PageLoader` 系统的兼容性 +- 不能破坏 PJAX 功能 +- 样式修复需要参考黑幕样式的修复方式（添加 `article .entry-content` 和 `.article-content` 选择器） +- 遵循 Argon 主题代码规范 + +## 6. 非功能性需求 + +- 加载动画性能不能下降 +- 文本效果不能影响页面渲染性能 +- 代码体积应该减少（移除冗余代码） + +## 7. 排除范围 + +- 不涉及其他页面元素的样式修复 +- 不涉及新功能开发 +- 不涉及其他 JavaScript 模块的重构 diff --git a/.kiro/specs/loading-animation-cleanup/tasks.md b/.kiro/specs/loading-animation-cleanup/tasks.md new file mode 100644 index 0000000..f810d52 --- /dev/null +++ b/.kiro/specs/loading-animation-cleanup/tasks.md @@ -0,0 +1,123 @@ +# 加载动画系统清理与文本效果修复 - 任务列表 + +## 1. 准备工作 +- [ ] 1.1 备份 `argontheme.js` 到 `tmp/` 目录 +- [ ] 1.2 备份 `style.css` 到 `tmp/` 目录 +- [ ] 1.3 确认 `PageLoader` 模块正常工作 + +## 2. 清理旧加载动画代码 +- [ ] 2.1 定位并移除 `argontheme.js` 第 4970-5040 行的旧代码 + - 移除页面初始加载的旧实现 + - 移除 `initPjaxAnimations()` 函数 + - 移除相关的 `article-loading-overlay` 创建代码 +- [ ] 2.2 添加 PJAX 集成代码 + - 在 `PageLoader` 模块后添加 PJAX 事件监听 + - `pjax:start` 时调用 `PageLoader.show()` + - `pjax:end` 时调用 `PageLoader.hide()` 并重新初始化动画 +- [ ] 2.3 测试页面加载动画 + - 刷新页面，验证加载动画正常显示和隐藏 + - 检查控制台无错误 +- [ ] 2.4 测试 PJAX 导航动画 + - 点击文章链接，验证加载动画正常显示和隐藏 + - 验证页面内容正确更新 + - 检查控制台无错误 + +## 3. 修复彩色黑幕样式 +- [ ] 3.1 重构 `.color-curtain` 基础样式 + - 添加 `article .entry-content .color-curtain` 选择器 + - 添加 `.article-content .color-curtain` 选择器 + - 保持原有样式属性 +- [ ] 3.2 重构 `.color-curtain` 链接样式 + - 添加文章容器选择器支持 + - 确保链接继承父元素样式 +- [ ] 3.3 重构 `.color-curtain` 悬停样式 + - 添加文章容器选择器支持 + - 确保悬停时正确显示文本 +- [ ] 3.4 添加夜间模式优化 + - 设置 `--curtain-bg: #1a1a1a` + - 设置 `--curtain-fg: #e0e0e0` +- [ ] 3.5 测试彩色黑幕效果 + - 在文章中添加测试内容 + - 验证默认状态和悬停状态 + - 验证夜间模式颜色 + +## 4. 修复模糊文本样式 +- [ ] 4.1 重构 `.text-blur` 基础样式 + - 添加 `article .entry-content .text-blur` 选择器 + - 添加 `.article-content .text-blur` 选择器 + - 保持 `filter: blur(2px)` 效果 +- [ ] 4.2 重构 `.text-blur` 链接样式 + - 添加文章容器选择器支持 + - 确保链接也应用模糊效果 +- [ ] 4.3 重构 `.text-blur` 悬停样式 + - 添加文章容器选择器支持 + - 确保悬停时取消模糊 +- [ ] 4.4 测试模糊文本效果 + - 在文章中添加测试内容 + - 验证默认模糊和悬停清晰 + - 验证夜间模式正常 + +## 5. 修复划掉文本样式 +- [ ] 5.1 重构 `.huhua` 基础样式 + - 添加 `article .entry-content .huhua` 选择器 + - 添加 `.article-content .huhua` 选择器 + - 保持 `text-decoration: line-through` 效果 +- [ ] 5.2 重构 `.huhua` 链接样式 + - 添加文章容器选择器支持 + - 确保链接继承样式 +- [ ] 5.3 重构 `.huhua` 悬停样式 + - 添加文章容器选择器支持 + - 确保悬停时颜色变深 +- [ ] 5.4 添加夜间模式优化 + - 设置基础颜色 `#6a7075` + - 设置悬停颜色 `#555a5f` +- [ ] 5.5 测试划掉文本效果 + - 在文章中添加测试内容 + - 验证默认状态和悬停状态 + - 验证夜间模式颜色 + +## 6. 代码优化和注释 +- [ ] 6.1 在 `style.css` 中添加结构化注释 + - 添加 "文章文本特效" 大区块注释 + - 为每个效果添加小区块注释 + - 为关键样式添加说明注释 +- [ ] 6.2 检查代码规范 + - 验证 Tab 缩进正确 + - 验证属性独占一行 + - 验证属性之间无多余空行 + - 验证 JavaScript 使用 `let`/`const` + +## 7. 测试和验证 +- [ ] 7.1 完整功能测试 + - 测试页面初始加载 + - 测试 PJAX 导航 + - 测试所有文本效果（日间模式） + - 测试所有文本效果（夜间模式） +- [ ] 7.2 回归测试 + - 验证其他页面功能正常 + - 验证移动端响应式布局 + - 验证浏览器兼容性 +- [ ] 7.3 性能检查 + - 检查页面加载时间 + - 检查控制台无警告 + - 检查 DOM 元素数量合理 + +## 8. 提交代码 +- [ ] 8.1 编写详细的 Git commit 信息 + - 标题：`refactor: 清理旧加载动画代码并修复文本效果样式` + - 详细说明： + - 移除 argontheme.js 第 4970-5040 行旧代码 + - 添加 PJAX 集成到 PageLoader 系统 + - 为 color-curtain、text-blur、huhua 添加文章容器选择器 + - 优化夜间模式颜色 + - 添加结构化注释 +- [ ] 8.2 提交代码到 Git +- [ ] 8.3 验证提交成功 + +## 9. 文档更新（可选） +- [ ]* 9.1 更新 `doc/argon-theme-training.md` + - 记录新的加载动画系统架构 + - 记录文本效果的使用方法 +- [ ]* 9.2 创建文本效果使用示例 + - 提供 HTML 代码示例 + - 提供效果预览截图 diff --git a/404.php b/404.php index 11b91d0..04eaa6c 100644 --- a/404.php +++ b/404.php @@ -1,7 +1,7 @@ > - + - - - - - - - - - - - - - - -``` - -#### 客户端初始化 - -1. **兼容性修复**（argontheme.js 开头） - -```javascript -// argontheme.js -// 确保 Prism 存在 -if (typeof window.Prism === 'undefined') { - window.Prism = { - highlightAll: function() {}, - highlightElement: function() {}, - plugins: {} - }; -} - -// 确保 jQuery 插件存在 -if (typeof jQuery !== 'undefined') { - (function($) { - // 修复空选择器问题 - if (!$.fn._argonInit) { - $.fn._argonInit = $.fn.init; - $.fn.init = function(selector, context, root) { - if (typeof selector === 'string') { - let trimmed = selector.trim(); - if (trimmed === '' || trimmed === '#') { - return new $.fn._argonInit(); - } - } - return $.fn._argonInit.call(this, selector, context, root); - }; - $.fn.init.prototype = $.fn; - } - })(jQuery); -} -``` - -2. **工具函数定义** - -```javascript -// argontheme.js -// Cookie 操作 -function setCookie(cname, cvalue, exdays) { /* ... */ } -function getCookie(cname) { /* ... */ } - -// 多语言翻译 -var translation = {}; -translation['en_US'] = { /* ... */ }; -translation['ru_RU'] = { /* ... */ }; -function __(text) { - if (typeof translation[argonConfig.language] !== 'undefined' && - typeof translation[argonConfig.language][text] !== 'undefined') { - return translation[argonConfig.language][text]; - } - return text; -} -``` - -3. **DOM 加载完成后初始化** - -```javascript -// argontheme.js -$(document).ready(function() { - // 初始化顶栏 - initNavbar(); - - // 初始化侧边栏 - initSidebar(); - - // 初始化瀑布流 - waterflowInit(); - - // 初始化懒加载 - if (argonConfig.lazyload) { - initLazyload(); - } - - // 初始化图片缩放 - if (argonConfig.zoomify) { - $('.post-content img').zoomify(argonConfig.zoomify); - } - - // 初始化代码高亮 - if (argonConfig.code_highlight.enable) { - initCodeHighlight(); - } - - // 初始化评论系统 - initCommentSystem(); - - // 初始化浮动按钮 - initFloatButtons(); - - // 初始化 PJAX - if (!argonConfig.disable_pjax) { - initPjax(); - } - - // 移除加载类 - $('#float_action_buttons').removeClass('fabtns-unloaded'); -}); -``` - -#### 资源加载策略 - -1. **CSS 加载顺序** - -```php -// header.php -// 1. 合并的 CSS（包含 Bootstrap 和 Argon Design System） -wp_enqueue_style("argon_css_merged", ".../argon_css_merged.css"); - -// 2. 主题样式（依赖合并的 CSS） -wp_enqueue_style("style", ".../style.css", array('argon_css_merged')); -``` - -2. **JavaScript 加载顺序** - -```php -// header.php -// 1. 资源加载器（用于备用资源加载） -wp_enqueue_script("resource_loader", ".../resource-loader.js"); - -// 2. 合并的 JS（包含 jQuery 和其他库）- 在头部同步加载 -wp_enqueue_script("argon_js_merged", ".../argon_js_merged.js", array(), $assets_version, false); - -// 3. Argon 修复补丁（必须在 wp_head() 之后） - - -// 4. 主题核心脚本（在 footer.php 中加载） - - -``` - -3. **按需加载** - -```javascript -// argontheme.js -// Google Fonts 按需加载 -if (typeof ArgonResourceLoader !== "undefined") { - ArgonResourceLoader.smartLoad("//fonts.googleapis.com/css?family=...", "css"); -} - -// 数学公式渲染库在 footer.php 中按设置输出（get_option('argon_math_render')） -// 可选：mathjax3 / mathjax2 / katex / disabled -``` - -#### 强制刷新机制 - -当主题更新后，可能需要清除客户端缓存： - -```php -// functions.php -function argon_is_force_refresh_enabled() { - $enabled_time = get_option('argon_force_refresh_enabled_time', 0); - if ($enabled_time == 0) { - return false; - } - // 1 小时后自动关闭 - if (time() - $enabled_time > 3600) { - update_option('argon_force_refresh_enabled_time', 0); - return false; - } - return true; -} - -function argon_get_assets_version() { - if (argon_is_force_refresh_enabled()) { - $enabled_time = get_option('argon_force_refresh_enabled_time', 0); - return $GLOBALS['theme_version'] . '.r' . $enabled_time; - } - return $GLOBALS['theme_version']; -} -``` - -强制刷新时，header.php 会输出清除缓存的脚本： - -```javascript -// header.php - - - -``` - -### 全局配置对象 - -`argonConfig` 是主题的核心配置对象，在 header.php 中通过 PHP 动态生成并输出到页面： - -```javascript -var argonConfig = { - wp_path: "/", // WordPress 安装路径 - language: "zh_CN", // 当前语言代码 - dateFormat: "YMD", // 日期显示格式 - - // 图片缩放配置（Zoomify） - zoomify: { - duration: 200, // 缩放动画时长（毫秒） - easing: "cubic-bezier(0.4,0,0,1)", // 缓动函数 - scale: 0.9 // 缩放比例 - }, - // 如果禁用则为 false - - pangu: "false", // 盘古之白（中英文间自动加空格） - - // 懒加载配置 - lazyload: true, // 是否启用懒加载 - lazyload_effect: "fadeIn", // 懒加载显示效果 - lazyload_threshold: 800, // 提前加载阈值（像素） - - fold_long_comments: false, // 是否折叠长评论 - fold_long_shuoshuo: false, // 是否折叠长说说 - - // PJAX 配置 - disable_pjax: false, // 是否禁用 PJAX - pjax_animation_durtion: 600, // PJAX 切换动画时长（毫秒） - - headroom: "false", // 顶栏自动隐藏模式（false/true/absolute） - - // 文章列表布局 - waterflow_columns: "1", // 瀑布流列数（1/2/3） - article_list_layout_mobile: "1", // 移动端文章列表布局样式 - - // 代码高亮配置 - code_highlight: { - enable: false, // 是否启用代码高亮 - hide_linenumber: false, // 是否隐藏行号 - transparent_linenumber: false, // 行号是否透明 - break_line: false // 是否自动折行 - } -}; -``` - -配置对象的值从 WordPress 后台设置中读取，通过 PHP 的 `get_option()` 函数获取。例如： - -```php -// header.php -lazyload: , -``` - -### CSS 变量系统 - -主题使用 CSS 自定义属性（CSS Variables）实现动态主题色和样式配置。这些变量在 header.php 中通过 PHP 动态生成。 - -#### 主题色变量 - -```php -// header.php - 获取主题色 -$themecolor = get_option("argon_theme_color", "#5e72e4"); -// 支持用户自定义主题色（通过 Cookie） -if (isset($_COOKIE["argon_custom_theme_color"])) { - if (checkHEX($_COOKIE["argon_custom_theme_color"]) && - get_option('argon_show_customize_theme_color_picker') != 'false') { - $themecolor = $_COOKIE["argon_custom_theme_color"]; - } -} - -// 转换为 RGB 和 HSL 值 -$RGB = hexstr2rgb($themecolor); -$HSL = rgb2hsl($RGB['R'], $RGB['G'], $RGB['B']); -``` - -生成的 CSS 变量： - -```css -:root { - /* 主题色 - 十六进制 */ - --themecolor: #5e72e4; - - /* 主题色 - RGB 分量（用于 rgba() 函数）*/ - --themecolor-R: 94; - --themecolor-G: 114; - --themecolor-B: 228; - - /* 主题色 - HSL 分量（用于生成色调变体）*/ - --themecolor-H: 231; - --themecolor-S: 71; - --themecolor-L: 63; -} -``` - -#### 动画系统变量 - -```css -:root { - /* 动画时长 - 遵循 Material Design 3 规范 */ - --animation-fast: 150ms; // 快速动画（按钮点击等） - --animation-normal: 250ms; // 标准动画（卡片展开等） - --animation-slow: 400ms; // 慢速动画（页面切换等） - - /* 缓动函数 - 融合 Material 3 + Apple 风格 */ - --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1); // 标准缓动，流畅自然 - --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); // 弹性缓动，有活力 -} -``` - -#### 卡片样式变量 - -```css -:root { - --card-radius: 4px; // 卡片圆角 - --card-opacity: 0.7; // 卡片透明度 - --card-blur: 20px; // 毛玻璃模糊度 - --card-saturate: 180%; // 饱和度增强 - --toolbar-blur: 12px; // 顶栏模糊度（卡片的 60%） - --page-background-opacity: 1; // 页面背景透明度 -} -``` - -这些值可以通过后台设置动态调整： - -```php -// header.php -$card_opacity = get_option('argon_post_background_opacity', '0.7'); -$card_blur = get_option('argon_card_blur', '20'); -$card_saturate = get_option('argon_card_saturate', '180'); -``` - -#### 颜色变量 - -```css -:root { - /* 日间模式颜色 */ - --color-background: #f4f5f7; // 页面背景色 - --color-foreground: #fff; // 卡片背景色 - --color-widgets: #fff; // 小工具背景色 - --color-border: #dce0e5; // 边框颜色 - --color-text-deeper: #212529; // 深色文本 -} -``` - -夜间模式通过 `html.darkmode` 类切换颜色变量： - -```css -html.darkmode body { - --color-background: #282828; // 深色背景 - --color-foreground: #424242; // 深色卡片 - --color-widgets: #555; // 深色小工具 - --color-text-deeper: #eee; // 浅色文本 -} -``` - -AMOLED 暗黑模式提供更深的黑色： - -```css -html.darkmode.amoled-dark body { - --color-background: #111; // 纯黑背景 - --color-foreground: #000; // 纯黑卡片 - --color-widgets: #151515; // 深黑小工具 -} -``` - - - -### 后台设置框架 - -Argon 主题不依赖第三方设置框架（如 Redux 或 Codestar），而是使用原生 PHP + HTML 实现了一个轻量级的设置页面。 - -#### 1. 设置页面结构 - -设置页面位于 `settings.php`，通过 `functions.php` 中的 `add_theme_page` 挂载： - -```php -// functions.php -function themeoptions_admin_menu() { - add_theme_page("Argon 主题设置", "Argon 主题选项", 'edit_themes', basename(__FILE__), 'themeoptions_page'); -} -add_action('admin_menu', 'themeoptions_admin_menu'); -``` - -页面内容主要由 `themeoptions_page()` 函数输出，采用 HTML Table 布局，包含多个选项卡（如“全局设置”、“侧栏设置”等）。 - -#### 2. 选项存储与更新 - -设置数据的保存逻辑集成在 `settings.php` 顶部： - -```php -// settings.php -if (isset($_POST['update_themeoptions']) && $_POST['update_themeoptions'] == 'true') { - // 1. 验证 Nonce 安全令牌 - check_admin_referer('argon_update_themeoptions', 'argon_update_themeoptions_nonce'); - - // 2. 处理复选框（未选中的 checkbox 不会提交，需要手动设为 false） - if (!isset($_POST['argon_enable_lazyload'])) $_POST['argon_enable_lazyload'] = 'false'; - - // 3. 循环更新所有选项 - foreach ($_POST as $key => $value) { - if (isset($value) && $value != '') { - update_option($key, $value); - } else { - delete_option($key); // 空值则删除选项 - } - } - - // 4. 提示保存成功 - echo '

设置已保存

'; -} -``` - -#### 3. 添加新选项指南 - -要在主题中添加一个新的设置项，需遵循以下步骤： - -1. 在 `settings.php` 的对应表格行中添加 HTML 输入控件。 -2. `name` 属性必须以 `argon_` 开头（这是约定，方便管理）。 -3. 使用 `get_option('option_name')` 获取当前值回显。 - -示例：添加一个“显示版权信息”的开关 - -```php - - - - - - -``` - -### 前端交互架构 (PJAX & SPA) - -Argon 主题采用 PJAX (PushState + AJAX) 技术实现单页应用 (SPA) 体验，核心逻辑位于 `assets/js/argontheme.js`。 - -#### 1. PJAX 工作原理 - -1. **拦截点击**：监听所有 `a` 标签点击事件。 -2. **获取内容**：通过 AJAX 请求目标页面 URL。 -3. **解析响应**：从响应 HTML 中提取 `#content` 容器内容。 -4. **替换容器**：将当前页面的 `#content` 替换为新内容。 -5. **更新状态**：使用 `history.pushState` 更新浏览器 URL。 -6. **重载资源**：重新执行内联脚本，重置事件监听器。 - -#### 2. 初始化与重载机制 - -由于 PJAX 会替换页面的部分 DOM，依赖旧 DOM 的事件绑定与第三方实例需要在 PJAX 完成后重新初始化。Argon 的实现采用“首屏最小初始化 + PJAX 完整重初始化”的策略。 - -首屏加载完成后的初始化入口位于 `argontheme.js` 的 `$(document).ready(...)`，主要执行性能优化模块初始化（如已加载）以及基础渲染： - -```javascript -$(document).ready(function(){ - if (typeof initArgonPerformance === 'function') { - initArgonPerformance(); - } - highlightJsRender(); - waterflowInit(); -}); -``` - -PJAX 主流程通过 `$(document).pjax(...)` 建立，并在 `pjax:beforeReplace` 统一清理旧页面资源，在 `pjax:complete` 完整初始化新页面模块（包含数学公式渲染、脚本执行与各功能模块的错误隔离初始化）。 - -#### 3. 脚本执行器 (Inline Script Executor) - -PJAX 替换的 DOM 片段中可能包含内联 `