diff --git a/style.css.bak b/style.css.bak deleted file mode 100644 index 2bcd4ea..0000000 --- a/style.css.bak +++ /dev/null @@ -1,16516 +0,0 @@ -/* - -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 - -Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应, 夜间模式, 可自定义 - -*/ - - - -@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); - - backdrop-filter: blur(12px); - - -webkit-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; - -} - -#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 { - - transition: all var(--animation-slow) var(--ease-emphasized); - -} - -#navbar_search_input_container input.form-control { - - width: 200px; - - 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; - - backdrop-filter: blur(20px) saturate(130%); - -webkit-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 { - max-height: calc(100vh - 110px - var(--leftbar-part3-height, 0px)); - overflow-y: auto; - padding: 10px; -} - -#leftbar_part2_inner::-webkit-scrollbar { - - width: 6px; - -} - -#leftbar_part2_inner::-webkit-scrollbar-track { - - background: transparent; - -} - -#leftbar_part2_inner::-webkit-scrollbar-thumb { - - border-width: 1px; - - background-color: rgba(0, 0, 0, 0.2); - -} - -html.darkmode #leftbar_part2_inner::-webkit-scrollbar-thumb { - - border-width: 1px; - - background-color: rgba(255, 255, 255, 0.2); - -} - -#leftbar_part2_inner::-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); - backdrop-filter: blur(24px) saturate(180%); - -webkit-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-preview .loading-css-animation { - - padding-top: 20px; - - padding-bottom: 10px; - - width: 100%; - -} - -.post-preview.post-pjax-loading { - - opacity: 1 !important; - -} - -.post-list-pjax-loading .post-preview { - - opacity: 0; - - pointer-events: none; - -} - -.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: 20px; - -} - -.post-meta { - - margin-top: 10px; - -} - -.post-meta-detail { - - font-size: 14.5px; - - line-height: 24px; - - opacity: 0.8; - - display: inline-block; - -} - -.post-meta-detail i { - - margin-right: 3px; - -} - -.post-meta-devide { - - display: inline-block; - - font-size: 14.5px; - - line-height: 24px; - - margin-left: 3px; - - margin-right: 3px; - - 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: 10px; - -} - -.post-content p { - - font-weight: normal; - -} - -.post-tags { - - margin-top: 15px; - - 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: 25px; - -} - -/* 文章预览样式 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 .loading-css-animation { - - position: absolute; - - bottom: -8px; - -} - -/* 文章预览样式 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: 20px; - - margin-bottom: 30px; - -} - -.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: 10px; - -} - -/*评论区*/ - -#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 { - transform: translateY(-1px); -} - -/* ---------- 评论 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; - -} - -/*短代码适配*/ - -/*短代码-checkbox*/ - -.shortcode-todo { - - cursor: default; - - margin: 3px 0; - -} - -.shortcode-todo .custom-control-input { - - pointer-events: none; - -} - -.shortcode-todo * { - - cursor: default !important; - -} - -.shortcode-todo .custom-control-label span { - - transform: translateY(-2.5px); - - display: block; - - cursor: text !important; - -} - -.shortcode-todo.inline { - - display: inline-block; - - margin-right: 10px; - -} - - - -/*短代码-警告与折叠块*/ - -.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); - - -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); - - } - - 100% { - - -webkit-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; - -} - -.post-list-pjax-loading .shuoshuo-preview-container { - - opacity: 0; - - pointer-events: none; - -} - -.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 Dot*/ - -.loading-css-animation { - - text-align: center; - -} - -.loading-dot { - - display: inline-block; - - background: var(--themecolor); - - height: 6px; - - width: 6px; - - opacity: 0; - - border-radius: 50%; - - transform: translateX(-300px); - - animation: loading-animation 4s infinite ease; - -} - -.loading-dot-1 { - - animation-delay: 0.8s; - -} - -.loading-dot-2 { - - animation-delay: 0.7s; - -} - -.loading-dot-3 { - - animation-delay: 0.6s; - -} - -.loading-dot-4 { - - animation-delay: 0.5s; - -} - -.loading-dot-5 { - - animation-delay: 0.4s; - -} - -.loading-dot-6 { - - animation-delay: 0.3s; - -} - -.loading-dot-7 { - - animation-delay: 0.2s; - -} - -.loading-dot-8 { - - animation-delay: 0.1s; - -} - -@keyframes loading-animation { - - 40% { - - transform: translateX(0); - - opacity: 0.8; - - } - - 100% { - - transform: translateX(300px); - - opacity: 0; - - } - -} - -/*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); - backdrop-filter: blur(10px); - -webkit-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); - backdrop-filter: blur(10px); - -webkit-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-ripple { - position: absolute; - width: 10px; - height: 10px; - background: rgba(var(--themecolor-rgbstr), 0.25); - border-radius: 50%; - transform: translate(-50%, -50%) scale(0); - animation: collapseRipple 0.6s var(--ease-emphasized-decelerate) forwards; - pointer-events: none; - } - - @keyframes collapseRipple { - 0% { - transform: translate(-50%, -50%) scale(0); - opacity: 1; - } - 100% { - transform: translate(-50%, -50%) scale(25); - opacity: 0; - } - } - - .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); - } - - .mobile-todo-item.todo-completing { - opacity: 0; - transform: translateX(40px) scale(0.85); - 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; - } - - #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); - backdrop-filter: blur(2px); - -webkit-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 { - backdrop-filter: blur(4px); - -webkit-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; - - } - - html.darkmode .navbar-collapse .navbar-collapse-header { - - /*border-bottom: 1px solid rgba(255,255,255,.1);*/ - - } - - - - /*.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; - - 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; - -} - -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); - backdrop-filter: blur(8px); - -webkit-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; - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-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; - max-height: var(--leftbar-part3-max-height, 50vh); - overflow: hidden; - display: flex; - flex-direction: column; -} - -#leftbar_part3.sticky .card-body { - overflow-y: auto; - flex: 1; - min-height: 0; -} - -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); - } -} - -#leftbar_part3 .card-body { - padding: 12px 16px; -} - -.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-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 { - max-height: none; - overflow-y: auto; - padding-right: 5px; -} - -.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); - 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; -} - -.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); - backdrop-filter: blur(4px); - -webkit-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; - -khtml-user-drag: none; - -moz-user-drag: none; - -o-user-drag: none; - user-drag: none; - pointer-events: auto; -} - -#post_content img, -.post-content img { - -webkit-user-drag: auto; - -khtml-user-drag: auto; - -moz-user-drag: auto; - -o-user-drag: auto; - 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 { - transform: translateY(-3px); - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); - 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-card:hover { - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); -} - -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 { - backdrop-filter: blur(12px) saturate(120%); - -webkit-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; - backdrop-filter: blur(8px); - -webkit-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; - backdrop-filter: blur(20px) saturate(180%); - -webkit-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; -} - -.card:hover { - box-shadow: var(--m3-elevation-2) !important; -} - -/* M3 文章卡片 */ -article.post.card { - overflow: hidden; - border: none !important; -} - -article.post.card:hover { - transform: translateY(-2px); - box-shadow: var(--m3-elevation-3) !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); -} - -.related-post-card:hover { - transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); -} - -/* 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; - backdrop-filter: blur(20px); - -webkit-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; - backdrop-filter: blur(20px); - -webkit-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: scale(1.03); -} - -/* 侧边栏卡片优化 */ -#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); -} - -/* 评论区优化 */ -#comments.card, -#post_comment.card { - /* 使用全局 --color-foreground */ -} - -/* 评论项悬浮效果 */ -.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 { - transform: translateY(-4px); - 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 { - backdrop-filter: blur(6px); - -webkit-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 { - transform: translateY(-4px); - 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); -} - -html.darkmode article.post.card:hover { - box-shadow: - 0 8px 25px rgba(0, 0, 0, 0.3), - 0 20px 40px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -/* 按钮 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); - backdrop-filter: blur(20px) saturate(180%); - -webkit-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); - backdrop-filter: blur(30px) saturate(150%); - -webkit-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: translateY(-2px); - } -} - -/* ======================================== - 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)); - backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - -webkit-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)); - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); -} - -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; - backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - -webkit-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); - backdrop-filter: blur(8px); - -webkit-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); - backdrop-filter: blur(8px); - -webkit-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; - backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - -webkit-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; - backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - -webkit-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:hover { - transform: translateY(-6px) scale(1.005); - box-shadow: var(--shadow-hover); - } - article.post.card .post-thumbnail { - transition: transform var(--animation-slow) var(--ease-out-expo); - } - article.post.card:hover .post-thumbnail { - transform: scale(1.05); - } - .card:not(article):not(.no-hover-effect) { - transition: transform var(--animation-normal) var(--ease-standard), box-shadow var(--animation-normal) var(--ease-standard); - } - .card:not(article):not(.no-hover-effect):hover { - transform: translateY(-3px); - box-shadow: var(--shadow-3); - } - #leftbar .card, #rightbar .card { - transition: transform var(--animation-normal) var(--ease-standard), box-shadow var(--animation-normal) var(--ease-standard), border-color var(--animation-fast) var(--ease-standard); - } - #leftbar .card:hover, #rightbar .card:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-2); - 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:hover { transform: translateY(-1px); } - .btn:active { transform: translateY(0) 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: transform var(--animation-normal) var(--ease-standard), box-shadow var(--animation-normal) var(--ease-standard); } - .comment-item:hover { transform: translateX(4px); box-shadow: -4px 0 0 var(--themecolor); } -} - -/* 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 { animation: modernContentFadeIn var(--animation-slow) var(--ease-emphasized-decelerate); } - -#float_action_buttons { transition: transform var(--animation-normal) var(--ease-back), opacity var(--animation-normal) var(--ease-standard); } -#float_action_buttons .fabtn { transition: transform var(--animation-fast) var(--ease-spring), background var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard), opacity var(--animation-normal) var(--ease-standard); } -@media (hover: hover) { #float_action_buttons .fabtn:hover { transform: scale(1.1); box-shadow: var(--shadow-3); } } -#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: transform var(--animation-fast) var(--ease-spring), background var(--animation-fast) var(--ease-standard); } -@media (hover: hover) { .badge:hover, .tag:hover { transform: scale(1.05); } } -.badge:active, .tag:active { transform: scale(0.95); } -.pagination .page-link { transition: all var(--animation-fast) var(--ease-standard); } -@media (hover: hover) { .pagination .page-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } } -.pagination .page-link:active { transform: translateY(0) 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: transform var(--animation-normal) var(--ease-spring), box-shadow var(--animation-normal) var(--ease-standard); } -@media (hover: hover) { - .friend-link-item:hover { transform: translateY(-5px) rotate(1deg); box-shadow: var(--shadow-4); } - .friend-link-item:hover .friend-link-avatar { transform: scale(1.1) rotate(-5deg); } -} -.friend-link-avatar { transition: transform var(--animation-normal) var(--ease-spring); } -.hljs-codeblock { transition: box-shadow var(--animation-normal) var(--ease-standard); } -@media (hover: hover) { .hljs-codeblock:hover { box-shadow: var(--shadow-3); } } -.code-copy-btn { opacity: 0; transform: translateY(-5px); transition: opacity var(--animation-fast) var(--ease-standard), transform var(--animation-fast) var(--ease-standard), background var(--animation-fast) var(--ease-standard); } -.hljs-codeblock:hover .code-copy-btn { opacity: 1; transform: translateY(0); } - -/* 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 ========== */ \ No newline at end of file