/* Theme Name: argon Author: solstice23 Author URI: https://solstice23.top/ Description: 轻盈、简洁、美观的 Wordpress 主题 Version: 1.5.0 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; } ::-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)); } /* ======================================== 主题变体 - 新拟�?(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: translateY(10px); 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: translateY(15px); } to { opacity: 1; transform: translateY(0); } } article.post.post-full:not(.no-animation) { animation: modernContentFadeIn var(--animation-slow) var(--ease-emphasized-decelerate); } 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); } /* 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 ========== */