diff --git a/style.css b/style.css index e348622..e9555aa 100644 --- a/style.css +++ b/style.css @@ -6,7 +6,7 @@ Author: solstice23 Author URI: https://solstice23.top/ -Description: 轻盈、简洁、美观的 Wordpress 主题 +Description: 杞荤泩銆佺畝娲併€佺編瑙傜殑 Wordpress 涓婚 Version: 1.5.3 @@ -201,15 +201,15 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html --color-selection: #cce2ff; - /* ========== 统一动画系统 - 桌面端和移动端一致 ========== */ - /* 动画时长 - 基于 Material Design 3 规范 */ + /* ========== 缁熶竴鍔ㄧ敾绯荤粺 - 妗岄潰绔拰绉诲姩绔竴鑷?========== */ + /* 鍔ㄧ敾鏃堕暱 - 鍩轰簬 Material Design 3 瑙勮寖 */ --animation-instant: 100ms; --animation-fast: 150ms; --animation-normal: 250ms; --animation-slow: 400ms; --animation-slower: 600ms; - /* 缓动函数 - Material 3 标准曲线 */ + /* 缂撳姩鍑芥暟 - 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); @@ -217,12 +217,12 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html --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 */ + /* 鐘舵€佸眰閫忔槑搴?- Material 3 */ --state-hover-opacity: 0.08; --state-focus-opacity: 0.12; --state-pressed-opacity: 0.12; @@ -337,7 +337,7 @@ html.immersion-color.darkmode body { } -/* 主题切换过渡效果 (Dark/Light Mode Transition) */ +/* 涓婚鍒囨崲杩囨浮鏁堟灉 (Dark/Light Mode Transition) */ html { transition: none; } @@ -991,7 +991,7 @@ html.use-big-shadow *.shadow-sm { } -/*标题样式*/ +/*鏍囬鏍峰紡*/ .article-header-style-1 article h1, @@ -1169,7 +1169,7 @@ html.use-big-shadow *.shadow-sm { } -/*卡片圆角*/ +/*鍗$墖鍦嗚*/ .card { @@ -1177,7 +1177,7 @@ html.use-big-shadow *.shadow-sm { } -/*主题色适配*/ +/*涓婚鑹查€傞厤*/ .text-primary { @@ -1256,6 +1256,14 @@ a.text-primary:hover { box-shadow: 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.5) !important; } +.heimu:hover, +.heimu:active, +.heimu:hover .heimu, +.heimu:active .heimu { + color: var(--color-text-deeper) !important; + background-color: transparent !important; +} + .btn-outline-primary { border-color: var(--themecolor) !important; color: var(--themecolor) !important; @@ -1293,7 +1301,7 @@ a.text-primary:hover { background-color: var(--themecolor-dark2) !important; } -/* 链接按钮和中性按钮主题色覆盖 */ +/* 閾炬帴鎸夐挳鍜屼腑鎬ф寜閽富棰樿壊瑕嗙洊 */ .btn-link { color: var(--themecolor) !important; } @@ -1324,7 +1332,7 @@ a.text-primary:hover { } -/*页面框架*/ +/*椤甸潰妗嗘灦*/ #content { @@ -1426,7 +1434,7 @@ html.is-home.banner-as-cover #content { -/*双栏反转布局*/ +/*鍙屾爮鍙嶈浆甯冨眬*/ html.double-column-reverse #leftbar { @@ -1440,7 +1448,7 @@ html.double-column-reverse #primary { } -/*单栏布局*/ +/*鍗曟爮甯冨眬*/ html.single-column #leftbar { @@ -1448,7 +1456,7 @@ html.single-column #leftbar { } -/* 单栏布局 - 移动端侧边栏支持 */ +/* 鍗曟爮甯冨眬 - 绉诲姩绔晶杈规爮鏀寔 */ @media screen and (max-width: 900px) { html.single-column #leftbar { display: block; @@ -1501,7 +1509,7 @@ html.single-column #main { } -/* 单栏布局 - 桌面端隐藏侧边栏按钮 */ +/* 鍗曟爮甯冨眬 - 妗岄潰绔殣钘忎晶杈规爮鎸夐挳 */ @media screen and (min-width: 901px) { html.single-column #fabtn_open_sidebar { display: none !important; @@ -1520,14 +1528,14 @@ html.single-column .page-information-card { } -/* 单栏布局 - 桌面端隐藏顶栏侧边栏按钮 */ +/* 鍗曟爮甯冨眬 - 妗岄潰绔殣钘忛《鏍忎晶杈规爮鎸夐挳 */ @media screen and (min-width: 901px) { html.single-column #open_sidebar { visibility: hidden; } } -/*三栏布局*/ +/*涓夋爮甯冨眬*/ #rightbar { @@ -1627,7 +1635,7 @@ html.triple-column #content { -/*Pjax加载动画 & 卡片动画*/ +/*Pjax鍔犺浇鍔ㄧ敾 & 鍗$墖鍔ㄧ敾*/ @keyframes card-show { @@ -1663,7 +1671,7 @@ html.triple-column #content { } -/*顶栏与 Banner 部分*/ +/*椤舵爮涓?Banner 閮ㄥ垎*/ #navbar-main { @@ -2172,7 +2180,7 @@ html:not(.is-home) .cover-scroll-down { -/* 左侧栏 */ +/* 宸︿晶鏍?*/ .leftbar-banner { @@ -2542,7 +2550,7 @@ html.navbar-absolute #leftbar_part2.sticky { max-height: calc(100vh - 110px - var(--leftbar-part3-height, 0px)); } -/* 只有文章目录标签需要滚动 */ +/* 鍙湁鏂囩珷鐩綍鏍囩闇€瑕佹粴鍔?*/ #leftbar_part2.sticky #leftbar_tab_catalog { max-height: calc(100vh - 200px - var(--leftbar-part3-height, 0px)); overflow-y: auto; @@ -3069,7 +3077,7 @@ html.darkmode .wp-block-calendar tbody td { } -/*底栏*/ +/*搴曟爮*/ #footer { @@ -3110,10 +3118,10 @@ html.darkmode .wp-block-calendar tbody td { /* ======================================== - 浮动按钮组件 (Float Action Buttons) + 娴姩鎸夐挳缁勪欢 (Float Action Buttons) ======================================== */ -/* 容器样式 */ +/* 瀹瑰櫒鏍峰紡 */ #float_action_buttons { position: fixed; bottom: 35px; @@ -3140,20 +3148,20 @@ html.darkmode .wp-block-calendar tbody td { 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 样式 */ +/* 鍩虹鎸夐挳鏍峰紡 - 閲嶇疆鎵€鏈?Bootstrap 鏍峰紡 */ #float_action_buttons .fabtn, #float_action_buttons .fabtn.btn, #float_action_buttons .fabtn.btn-icon, @@ -3209,7 +3217,7 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { 0 2px 8px rgba(var(--themecolor-rgbstr), 0.25) !important; } -/* 按钮内图标居中 */ +/* 鎸夐挳鍐呭浘鏍囧眳涓?*/ #float_action_buttons .fabtn .btn-inner--icon { display: flex !important; align-items: center !important; @@ -3223,7 +3231,7 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { line-height: 1; } -/* 隐藏状态 */ +/* 闅愯棌鐘舵€?*/ #float_action_buttons .fabtn.fabtn-hidden { width: 0 !important; height: 0 !important; @@ -3240,7 +3248,7 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { overflow: hidden !important; } -/* 左右切换按钮 - 尺寸较小 */ +/* 宸﹀彸鍒囨崲鎸夐挳 - 灏哄杈冨皬 */ #float_action_buttons #fabtn_toggle_sides, #float_action_buttons #fabtn_toggle_sides.btn { width: 32px !important; @@ -3258,7 +3266,7 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { opacity: 1; } -/* 阅读进度按钮 */ +/* 闃呰杩涘害鎸夐挳 */ #float_action_buttons #fabtn_reading_progress { overflow: visible; font-size: 11px; @@ -3283,7 +3291,7 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { z-index: 1; } -/* 夜间模式按钮图标切换 */ +/* 澶滈棿妯″紡鎸夐挳鍥炬爣鍒囨崲 */ #float_action_buttons #fabtn_toggle_darkmode i.fa { margin: 0; } @@ -3300,18 +3308,18 @@ 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; @@ -3345,7 +3353,7 @@ html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { transform: translateX(-12px) scale(0.96); } -/* 设置弹窗打开状态 */ +/* 璁剧疆寮圭獥鎵撳紑鐘舵€?*/ .blog_settings_opened #fabtn_blog_settings_popup { opacity: 1 !important; transform: none !important; @@ -3382,7 +3390,7 @@ html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { opacity: 1; } -/* 暗色模式浮动按钮 */ +/* 鏆楄壊妯″紡娴姩鎸夐挳 */ html.darkmode .fabtn { color: #ddd; box-shadow: @@ -3411,7 +3419,7 @@ html.darkmode #fabtn_blog_settings_popup { padding: 10px 0; } -/* 设置面板标题样式 */ +/* 璁剧疆闈㈡澘鏍囬鏍峰紡 */ .blog-setting-item>div:first-child { font-weight: 500; color: var(--color-text-deeper); @@ -3509,7 +3517,7 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { } -/* 设置面板分段选择器优化 */ +/* 璁剧疆闈㈡澘鍒嗘閫夋嫨鍣ㄤ紭鍖?*/ .blog-setting-selector-left { margin-right: 0 !important; @@ -3684,7 +3692,7 @@ html.use-big-shadow #blog_setting_shadow_big { } -/* 风格选择按钮 */ +/* 椋庢牸閫夋嫨鎸夐挳 */ .blog-setting-style-btn { border-radius: 8px; outline: none !important; @@ -3815,7 +3823,7 @@ html.filter-grayscale { } -/*页码*/ +/*椤电爜*/ .pagination { @@ -3847,7 +3855,7 @@ html.filter-grayscale { -/*文章*/ +/*鏂囩珷*/ .post { @@ -3989,7 +3997,7 @@ html.filter-grayscale { } -/* 图片加载过渡效果 */ +/* 鍥剧墖鍔犺浇杩囨浮鏁堟灉 */ .post-thumbnail { transition: opacity 0.3s ease 0s; } @@ -4005,27 +4013,16 @@ html.filter-grayscale { } .post-header.post-header-with-thumbnail .post-header-text-container { - position: absolute; - - bottom: 0; - + top: 50%; left: 0; - + transform: translateY(-50%); width: 100%; - color: #fff; - opacity: 0.9; - - padding-bottom: 35px; - - padding-top: 35px; - + padding: 35px 0; 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 { @@ -4120,7 +4117,7 @@ html.filter-grayscale { } -/* 文章预览样式 2 */ +/* 鏂囩珷棰勮鏍峰紡 2 */ article.post-preview-layout-2 { @@ -4220,7 +4217,7 @@ article.post-preview-layout-2 .post-meta { justify-content: flex-start; } -/* 文章预览样式 3 */ +/* 鏂囩珷棰勮鏍峰紡 3 */ article.post-preview-layout-3 .post-header { @@ -4410,7 +4407,7 @@ html.darkmode .tippy-box[data-theme~="light"] { } -/*文章输入密码界面*/ +/*鏂囩珷杈撳叆瀵嗙爜鐣岄潰*/ .post-password-form { @@ -4446,7 +4443,7 @@ html.darkmode .tippy-box[data-theme~="light"] { } -/*侧栏文章目录*/ +/*渚ф爮鏂囩珷鐩綍*/ #leftbar_catalog { margin-left: -5px; @@ -4532,7 +4529,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { -/*搜索等页面的标题卡片*/ +/*鎼滅储绛夐〉闈㈢殑鏍囬鍗$墖*/ .page-information-card { @@ -4560,7 +4557,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { -/*文章导航 (上一篇/下一篇文章)*/ +/*鏂囩珷瀵艰埅 (涓婁竴绡?涓嬩竴绡囨枃绔?*/ .post-navigation { @@ -4624,7 +4621,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { } -/*相关文章*/ +/*鐩稿叧鏂囩珷*/ .related-posts { @@ -4782,7 +4779,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } -/*文章赞赏*/ +/*鏂囩珷璧炶祻*/ .post-donate { @@ -4880,7 +4877,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } -/*文末附加内容*/ +/*鏂囨湯闄勫姞鍐呭*/ .additional-content-after-post { @@ -4896,7 +4893,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } -/*评论区*/ +/*璇勮鍖?/ #comments { @@ -4904,7 +4901,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } -/* 评论折叠功能 - Material 3 动画优化 */ +/* 璇勮鎶樺彔鍔熻兘 - Material 3 鍔ㄧ敾浼樺寲 */ #comments, #post_comment { transition: @@ -4954,7 +4951,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { transition-delay: 0.15s; } -/* 评论切换按钮图标动画 */ +/* 璇勮鍒囨崲鎸夐挳鍥炬爣鍔ㄧ敾 */ #comments_toggle .btn-inner--icon i { transition: transform var(--animation-slow) var(--ease-spring); display: inline-block; @@ -5091,7 +5088,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } -/* ---------- 评论项左侧区域 ---------- */ +/* ---------- 璇勮椤瑰乏渚у尯鍩?---------- */ .comment-item-left-wrapper { display: flex; flex-direction: column; @@ -5110,7 +5107,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { margin-right: 16px; } -/* ---------- 评论头像 ---------- */ +/* ---------- 璇勮澶村儚 ---------- */ .comment-item-avatar { position: relative; z-index: 1; @@ -5143,7 +5140,7 @@ html.darkmode .comment-item-avatar .avatar { font-size: 16px; } -/* ---------- 评论项内容区域 ---------- */ +/* ---------- 璇勮椤瑰唴瀹瑰尯鍩?---------- */ .comment-item-inner { display: block; position: relative; @@ -5162,7 +5159,7 @@ html.darkmode .comment-item-avatar .avatar { border-bottom: 0; } -/* ---------- 评论标题区域 ---------- */ +/* ---------- 璇勮鏍囬鍖哄煙 ---------- */ .comment-item-title { font-size: 15px; display: flex; @@ -5175,6 +5172,7 @@ html.darkmode .comment-item-avatar .avatar { .comment-item-title .badge-admin, .comment-item-title .badge-pinned, .comment-item-title .badge-private-comment, +.comment-item-title .badge-friend, .comment-item-title .badge-unapproved { transform: translateY(-1px); margin-left: 4px; @@ -5182,7 +5180,40 @@ html.darkmode .comment-item-avatar .avatar { padding: 2px 6px; } -/* ---------- 评论内容 ---------- */ +.badge-friend { + background-color: #ff5e7d; + color: #fff; + padding: 2px 4.5px !important; + cursor: pointer; + position: relative; + user-select: none; +} +.badge-friend i { + font-size: 10px; +} +.heart-bubble { + position: fixed; + pointer-events: none; + user-select: none; + z-index: 10000000; + color: #ff5e7d; + font-size: 16px; + text-shadow: 0 1px 4px rgba(255, 94, 125, 0.3); + animation: heart-bubble-float var(--duration, 2s) ease-out forwards; + will-change: transform, opacity; +} +@keyframes heart-bubble-float { + 0% { + transform: translate(-50%, 0) scale(0.8) rotate(0deg); + opacity: 1; + } + 100% { + transform: translate(calc(-50% + var(--drift)), -160px) scale(1.5) rotate(var(--rotate)); + opacity: 0; + } +} + +/* ---------- 璇勮鍐呭 ---------- */ .comment-item-text { min-height: 24px; margin-bottom: 1rem; @@ -5197,7 +5228,7 @@ html.darkmode .comment-item-avatar .avatar { margin-bottom: 0; } -/* ---------- 评论作者信息 ---------- */ +/* ---------- 璇勮浣滆€呬俊鎭?---------- */ .comment-name { flex: 1; font-weight: 600; @@ -5235,7 +5266,7 @@ html.darkmode .comment-item-avatar .avatar { opacity: 0.75; } -/* ---------- 评论元信息 ---------- */ +/* ---------- 璇勮鍏冧俊鎭?---------- */ .comment-info { margin-top: 2px; font-size: 12px; @@ -5301,7 +5332,7 @@ html.darkmode .comment-item-avatar .avatar { opacity: 1; } -/* ---------- 评论操作按钮 ---------- */ +/* ---------- 璇勮鎿嶄綔鎸夐挳 ---------- */ .comment-operations { position: absolute; right: 0; @@ -5340,7 +5371,7 @@ html.darkmode .comment-operations { opacity: 0.8; } -/* ---------- 评论 UA 信息 ---------- */ +/* ---------- 璇勮 UA 淇℃伅 ---------- */ .comment-useragent { display: inline-flex; align-items: center; @@ -5365,7 +5396,7 @@ html.darkmode .comment-operations { flex-shrink: 0; } -/* ---------- 评论点赞按钮 ---------- */ +/* ---------- 璇勮鐐硅禐鎸夐挳 ---------- */ .comment-upvote { white-space: nowrap; border-radius: var(--m3-shape-full, 100px); @@ -5476,7 +5507,7 @@ html.darkmode .comment-upvote:hover { } } -/*评论内容*/ +/*璇勮鍐呭*/ .comment-item-text .comment-sticker { @@ -5758,7 +5789,7 @@ html.darkmode .comment-item-text blockquote { } -/*评论折叠*/ +/*璇勮鎶樺彔*/ .comment-item-inner.comment-folded { @@ -5836,7 +5867,7 @@ html.darkmode .comment-item-text blockquote { } -/*评论区页面*/ +/*璇勮鍖洪〉闈?/ .comments-navigation .page-item>div { @@ -5844,7 +5875,7 @@ html.darkmode .comment-item-text blockquote { } -/*评论区更新*/ +/*璇勮鍖烘洿鏂?/ #comments_more { @@ -5898,7 +5929,7 @@ html.darkmode .comment-item-text blockquote { } -/*评论编辑记录*/ +/*璇勮缂栬緫璁板綍*/ .comment-edit-history-item { @@ -5964,7 +5995,7 @@ html.darkmode .comment-edit-history-item { } -/*发送评论区*/ +/*鍙戦€佽瘎璁哄尯*/ #post_comment { @@ -5972,7 +6003,7 @@ html.darkmode .comment-edit-history-item { } -/* 发送评论卡片优化 */ +/* 鍙戦€佽瘎璁哄崱鐗囦紭鍖?*/ #post_comment.card { border-radius: 16px; padding: 20px; @@ -6038,7 +6069,7 @@ html.darkmode #post_comment.card:hover { } -/* ---------- 评论回复提示框 ---------- */ +/* ---------- 璇勮鍥炲鎻愮ず妗?---------- */ .post-comment-reply { margin-top: 12px; margin-bottom: 12px; @@ -6143,7 +6174,7 @@ html.darkmode .post-comment-reply-preview { pointer-events: none; } -/* 回复框动画 */ +/* 鍥炲妗嗗姩鐢?*/ @keyframes replySlideIn { from { opacity: 0; @@ -6220,7 +6251,7 @@ html.darkmode .post-comment-reply-preview { box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); } -/* 评论表单输入框统一样式 */ +/* 璇勮琛ㄥ崟杈撳叆妗嗙粺涓€鏍峰紡 */ #post_comment .form-group { margin-bottom: 0; } @@ -6505,7 +6536,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -/*发送评论区与编辑评论*/ +/*鍙戦€佽瘎璁哄尯涓庣紪杈戣瘎璁?/ #post_comment:not(.editing) .hide-on-comment-not-editing { @@ -6533,7 +6564,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -/*评论表情*/ +/*璇勮琛ㄦ儏*/ #comment_emotion_btn { @@ -6828,9 +6859,9 @@ html.darkmode .emotion-keyboard { } -/*短代码适配*/ +/*鐭唬鐮侀€傞厤*/ -/*短代码警告与折叠块*/ +/*鐭唬鐮佽鍛婁笌鎶樺彔鍧?/ .admonition, @@ -7032,7 +7063,7 @@ html.darkmode .emotion-keyboard { -/*短代码友链-简单*/ +/*鐭唬鐮佸弸閾?绠€鍗?/ .friend-links-simple .friend-category-title { @@ -7092,7 +7123,7 @@ html.darkmode .emotion-keyboard { -/*短代?友链*/ +/*鐭唬?鍙嬮摼*/ .friend-links .link { @@ -7122,7 +7153,7 @@ html.darkmode .emotion-keyboard { } -/*短代?友链-样式 1*/ +/*鐭唬?鍙嬮摼-鏍峰紡 1*/ .friend-links-style1 .friend-link-avatar { @@ -7230,7 +7261,7 @@ html.darkmode .emotion-keyboard { } -/*短代?友链-样式 1-方形头像*/ +/*鐭唬?鍙嬮摼-鏍峰紡 1-鏂瑰舰澶村儚*/ .friend-links-style1.friend-links-style1-square .friend-link-avatar { @@ -7252,7 +7283,7 @@ html.darkmode .emotion-keyboard { } -/*短代?友链-样式 2*/ +/*鐭唬?鍙嬮摼-鏍峰紡 2*/ .friend-links-style2 .friend-link-avatar { @@ -7326,7 +7357,7 @@ html.darkmode .emotion-keyboard { } -/*短代?友链-样式 2-大头?/ +/*鐭唬?鍙嬮摼-鏍峰紡 2-澶уご?/ .friend-links-style2.friend-links-style2-big .friend-link-avatar { @@ -7358,7 +7389,7 @@ html.darkmode .emotion-keyboard { -/*短代?时间?/ +/*鐭唬?鏃堕棿?/ .argon-timeline { @@ -7436,7 +7467,7 @@ html.darkmode .emotion-keyboard { -/*短代?隐藏文本*/ +/*鐭唬?闅愯棌鏂囨湰*/ .argon-hidden-text { transition: all 0.3s ease; @@ -7462,7 +7493,7 @@ html.darkmode .emotion-keyboard { border-radius: 0px; } -/*短代?Github*/ +/*鐭唬?Github*/ .github-info-card { @@ -7536,7 +7567,7 @@ html.darkmode .emotion-keyboard { } -/*短代?Github-Mini*/ +/*鐭唬?Github-Mini*/ .github-info-card-mini { @@ -7632,7 +7663,7 @@ html.darkmode .emotion-keyboard { -/*短代?进度?/ +/*鐭唬?杩涘害?/ .progress { @@ -7640,7 +7671,7 @@ html.darkmode .emotion-keyboard { } -/*Gutenburg 区块-Tab 面板*/ +/*Gutenburg 鍖哄潡-Tab 闈㈡澘*/ .argon-tabpanel { @@ -7782,7 +7813,7 @@ html.darkmode .argon-tabpanel .nav-pills .nav-link { -/*nprogress 加载进度?/ +/*nprogress 鍔犺浇杩涘害?/ #nprogress { @@ -7965,7 +7996,7 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { } -/*Mathjax 相关*/ +/*Mathjax 鐩稿叧*/ .MathJax { @@ -7997,7 +8028,7 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { -/*LazyLoad 加载样式*/ +/*LazyLoad 鍔犺浇鏍峰紡*/ article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"] { @@ -8089,7 +8120,7 @@ article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg" -/*Fancybox 样式*/ +/*Fancybox 鏍峰紡*/ .fancybox-wrapper { @@ -8125,7 +8156,7 @@ figure>a>.fancybox-wrapper { } -/*Zoomify 样式*/ +/*Zoomify 鏍峰紡*/ .zoomify { @@ -8213,7 +8244,7 @@ body.noscroll:before { /*Share.js*/ -/* 文章操作按钮容器 */ +/* 鏂囩珷鎿嶄綔鎸夐挳瀹瑰櫒 */ #post_actions_container { display: flex !important; flex-direction: row !important; @@ -8223,7 +8254,7 @@ body.noscroll:before { margin-bottom: 25px; } -/* ---------- 分享按钮 ---------- */ +/* ---------- 鍒嗕韩鎸夐挳 ---------- */ #share_container { position: relative; display: inline-flex; @@ -8259,7 +8290,7 @@ body.noscroll:before { font-size: 14px; } -/* 分享按钮 - 默认显示 */ +/* 鍒嗕韩鎸夐挳 - 榛樿鏄剧ず */ #share_show { position: relative; z-index: 2; @@ -8286,7 +8317,7 @@ body.noscroll:before { border-color: var(--themecolor-dark2) !important; } -/* 分享面板 - 默认隐藏 */ +/* 鍒嗕韩闈㈡澘 - 榛樿闅愯棌 */ #share { position: absolute; bottom: 0; @@ -8301,7 +8332,7 @@ body.noscroll:before { opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); } -/* 分享渠道按钮初始状?*/ +/* 鍒嗕韩娓犻亾鎸夐挳鍒濆鐘?*/ #share>a { opacity: 0; transform: translateY(10px); @@ -8309,21 +8340,21 @@ body.noscroll:before { 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); @@ -8361,7 +8392,7 @@ body.noscroll:before { transition-delay: 240ms; } -/* 收起时各按钮错落滑出 */ +/* 鏀惰捣鏃跺悇鎸夐挳閿欒惤婊戝嚭 */ #share_container:not(.opened) #share>a:nth-child(8) { transition-delay: 0ms; } @@ -8394,7 +8425,7 @@ body.noscroll:before { transition-delay: 105ms; } -/* 分享按钮通用样式 */ +/* 鍒嗕韩鎸夐挳閫氱敤鏍峰紡 */ #share_container .btn { height: 38px; width: 38px; @@ -8406,7 +8437,7 @@ body.noscroll:before { border-radius: 10px; } -/* 移动端分享面板适配 */ +/* 绉诲姩绔垎浜潰鏉块€傞厤 */ @media (max-width: 576px) { #share { flex-wrap: wrap; @@ -8420,7 +8451,7 @@ body.noscroll:before { position: relative; } -/* 二维码弹?- 显示在按钮上?*/ +/* 浜岀淮鐮佸脊?- 鏄剧ず鍦ㄦ寜閽笂?*/ #share .icon-wechat .wechat-qrcode, #share .icon-copy-link .wechat-qrcode { position: absolute; @@ -8447,7 +8478,7 @@ body.noscroll:before { pointer-events: auto; } -/* 二维码弹窗箭?*/ +/* 浜岀淮鐮佸脊绐楃?*/ #share .wechat-qrcode:before { position: absolute; z-index: 3; @@ -8487,7 +8518,7 @@ html.darkmode #share .wechat-qrcode .help { position: relative; } -/* tooltip - 显示在按钮上?*/ +/* tooltip - 鏄剧ず鍦ㄦ寜閽笂?*/ #share>a:before, #share_show:before { pointer-events: none; @@ -8555,16 +8586,16 @@ html.darkmode #share .wechat-qrcode .help { display: none !important; } -/* 移动端分享按钮适配 */ +/* 绉诲姩绔垎浜寜閽€傞厤 */ @media (max-width: 576px) { - /* 隐藏 tooltip */ + /* 闅愯棌 tooltip */ #share>a:before, #share_show:before { display: none !important; } - /* 二维码弹窗改为左侧显?*/ + /* 浜岀淮鐮佸脊绐楁敼涓哄乏渚ф樉?*/ #share .icon-wechat .wechat-qrcode, #share .icon-copy-link .wechat-qrcode { bottom: auto; @@ -8649,7 +8680,7 @@ html[lang] { -/*说说*/ +/*璇磋*/ .shuoshuo-container { @@ -8761,6 +8792,8 @@ html[lang] { .shuoshuo-comment-item-title .badge-admin, +.shuoshuo-comment-item-title .badge-friend, + .shuoshuo-comment-item-title .badge-private-comment, .shuoshuo-comment-item-title .badge-unapproved { @@ -9055,7 +9088,7 @@ html[lang] { } -/*归档时间?/ +/*褰掓。鏃堕棿?/ .archive-timeline { @@ -10007,12 +10040,12 @@ html.darkmode.amoled-dark #content:after { display: none; } -/* 桌面端隐藏移动端导航区域 */ +/* 妗岄潰绔殣钘忕Щ鍔ㄧ瀵艰埅鍖哄煙 */ .leftbar-mobile-nav { display: none; } -/* 桌面端显示原有侧边栏内容 */ +/* 妗岄潰绔樉绀哄師鏈変晶杈规爮鍐呭 */ .leftbar-desktop-content { display: block; } @@ -10021,12 +10054,12 @@ html.darkmode.amoled-dark #content:after { @media screen and (max-width: 900px) { - /* 移动端隐藏桌面端侧边栏内容,只显示移动端导航 */ + /* 绉诲姩绔殣钘忔闈㈢渚ц竟鏍忓唴瀹癸紝鍙樉绀虹Щ鍔ㄧ瀵艰埅 */ .leftbar-desktop-content { display: none !important; } - /* 移动端侧边栏 - 优化设计 */ + /* 绉诲姩绔晶杈规爮 - 浼樺寲璁捐 */ .leftbar-mobile-nav { display: flex; flex-direction: column; @@ -10034,7 +10067,7 @@ html.darkmode.amoled-dark #content:after { background: var(--color-foreground); } - /* 顶部用户信息?- 增强视觉效果 */ + /* 椤堕儴鐢ㄦ埛淇℃伅?- 澧炲己瑙嗚鏁堟灉 */ .leftbar-mobile-profile { background: var(--themecolor-gradient); padding: 28px 20px 24px; @@ -10043,7 +10076,7 @@ html.darkmode.amoled-dark #content:after { overflow: hidden; } - /* 背景装饰圆形 */ + /* 鑳屾櫙瑁呴グ鍦嗗舰 */ .leftbar-mobile-profile::before { content: ""; position: absolute; @@ -10192,7 +10225,7 @@ html.darkmode.amoled-dark #content:after { font-weight: 500; } - /* 搜索?- 优化样式 */ + /* 鎼滅储?- 浼樺寲鏍峰紡 */ .leftbar-mobile-search { padding: 16px 16px 8px; background: var(--color-foreground); @@ -10239,7 +10272,7 @@ html.darkmode.amoled-dark #content:after { color: #aaa; } - /* 导航菜单区域 - 优化间距和样?*/ + /* 瀵艰埅鑿滃崟鍖哄煙 - 浼樺寲闂磋窛鍜屾牱?*/ .leftbar-mobile-menu-section { padding: 12px 12px 8px; } @@ -10278,7 +10311,7 @@ html.darkmode.amoled-dark #content:after { overflow: hidden; } - /* 菜单项涟漪效?*/ + /* 鑿滃崟椤规稛婕晥?*/ .leftbar-mobile-menu-item>a::before { content: ""; position: absolute; @@ -10350,7 +10383,7 @@ html.darkmode.amoled-dark #content:after { max-height: 500px; } - /* 子菜单项交错入场动画 */ + /* 瀛愯彍鍗曢」浜ら敊鍏ュ満鍔ㄧ敾 */ .leftbar-mobile-menu-item.expanded .leftbar-mobile-submenu .leftbar-mobile-menu-item { animation: fadeInUp 0.25s var(--ease-standard) both; } @@ -10396,7 +10429,7 @@ html.darkmode.amoled-dark #content:after { background: rgba(var(--themecolor-rgbstr), 0.08); } - /* 底部操作?- 优化设计 */ + /* 搴曢儴鎿嶄綔?- 浼樺寲璁捐 */ .leftbar-mobile-footer { margin-top: auto; padding: 12px 16px 20px; @@ -10430,7 +10463,7 @@ html.darkmode.amoled-dark #content:after { overflow: hidden; } - /* 底部按钮涟漪效果 */ + /* 搴曢儴鎸夐挳娑熸吉鏁堟灉 */ .leftbar-mobile-action::before { content: ""; position: absolute; @@ -10465,7 +10498,7 @@ html.darkmode.amoled-dark #content:after { transform: scale(1.1); } - /* ========== 移动端折叠面板样?- Material 3 & iOS 风格 ========== */ + /* ========== 绉诲姩绔姌鍙犻潰鏉挎牱?- Material 3 & iOS 椋庢牸 ========== */ .leftbar-mobile-collapse-section { margin: 4px 12px; background: var(--color-background); @@ -10493,7 +10526,7 @@ html.darkmode.amoled-dark #content:after { overflow: hidden; } - /* 折叠头部涟漪效果 */ + /* 鎶樺彔澶撮儴娑熸吉鏁堟灉 */ .leftbar-mobile-collapse-header::before { content: ""; position: absolute; @@ -10611,7 +10644,7 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10629,7 +10662,7 @@ html.darkmode.amoled-dark #content:after { } } - /* ========== 移动端文章目录样?========== */ + /* ========== 绉诲姩绔枃绔犵洰褰曟牱?========== */ .mobile-catalog-container { padding: 4px 12px 12px; } @@ -10717,7 +10750,7 @@ html.darkmode.amoled-dark #content:after { padding: 6px 8px; } - /* ========== 移动端TODO样式 ========== */ + /* ========== 绉诲姩绔疶ODO鏍峰紡 ========== */ .mobile-todo-container { padding: 4px 12px 12px; } @@ -10974,7 +11007,7 @@ html.darkmode.amoled-dark #content:after { opacity: 0.35; } - /* 移动端折叠已完成按钮 */ + /* 绉诲姩绔姌鍙犲凡瀹屾垚鎸夐挳 */ .mobile-todo-collapse-btn { display: flex; align-items: center; @@ -11011,7 +11044,7 @@ html.darkmode.amoled-dark #content:after { text-align: center; } - /* 移动端已完成任务分隔?*/ + /* 绉诲姩绔凡瀹屾垚浠诲姟鍒嗛殧?*/ .mobile-todo-completed-divider { display: flex; align-items: center; @@ -11076,12 +11109,12 @@ html.darkmode.amoled-dark #content:after { display: block; } - /* 移动端隐藏浮动按钮提示文字 */ + /* 绉诲姩绔殣钘忔诞鍔ㄦ寜閽彁绀烘枃瀛?*/ #float_action_buttons .fabtn:before { display: none !important; } - /* 移动端侧边栏容器 - 优化动画 */ + /* 绉诲姩绔晶杈规爮瀹瑰櫒 - 浼樺寲鍔ㄧ敾 */ #leftbar { position: fixed; background: var(--color-foreground); @@ -11104,7 +11137,7 @@ html.darkmode.amoled-dark #content:after { transform: translateX(0); } - /* 移动端侧边栏入场动画关键?*/ + /* 绉诲姩绔晶杈规爮鍏ュ満鍔ㄧ敾鍏抽敭?*/ @keyframes slideInFromLeft { from { opacity: 0; @@ -11153,7 +11186,7 @@ html.darkmode.amoled-dark #content:after { } } - /* 侧边栏内容交错入场动?*/ + /* 渚ц竟鏍忓唴瀹逛氦閿欏叆鍦哄姩?*/ html.leftbar-opened .leftbar-mobile-profile { animation: slideInFromLeft 0.4s var(--ease-emphasized) 0.05s both; } @@ -11166,7 +11199,7 @@ html.darkmode.amoled-dark #content:after { 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; } @@ -11211,7 +11244,7 @@ html.darkmode.amoled-dark #content:after { 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; } @@ -11284,7 +11317,7 @@ html.darkmode.amoled-dark #content:after { overflow: hidden; } - /* 遮罩?- 优化动画 */ + /* 閬僵?- 浼樺寲鍔ㄧ敾 */ #sidebar_mask { position: fixed; display: block; @@ -11460,7 +11493,7 @@ html.darkmode.amoled-dark #content:after { padding-inline-start: 15px; } - /* 夜间模式适配 - 移动端侧边栏 */ + /* 澶滈棿妯″紡閫傞厤 - 绉诲姩绔晶杈规爮 */ html.darkmode .leftbar-mobile-profile { background: linear-gradient(135deg, rgba(var(--themecolor-rgbstr), 0.8) 0%, @@ -11501,8 +11534,8 @@ html.darkmode.amoled-dark #content:after { color: #999; } - /* ========== 移动端文章卡片独立样?========== */ - /* 移动端布局 1: 大图模式 (默认) */ + /* ========== 绉诲姩绔枃绔犲崱鐗囩嫭绔嬫牱?========== */ + /* 绉诲姩绔竷灞€ 1: 澶у浘妯″紡 (榛樿) */ html.mobile-layout-1 article.post-preview-layout-2, article.post-preview-layout-2 { flex-direction: column; @@ -11534,7 +11567,7 @@ html.darkmode.amoled-dark #content:after { line-height: 1.7; } - /* 移动端布局 2: 紧凑模式 */ + /* 绉诲姩绔竷灞€ 2: 绱у噾妯″紡 */ html.mobile-layout-2 article.post-preview-layout-2 { flex-direction: column; max-height: none; @@ -11570,7 +11603,7 @@ html.darkmode.amoled-dark #content:after { font-size: 12px; } - /* 移动端布局 3: 横向模式 */ + /* 绉诲姩绔竷灞€ 3: 妯悜妯″紡 */ html.mobile-layout-3 article.post-preview-layout-2 { flex-direction: row; max-height: 120px; @@ -11613,7 +11646,7 @@ html.darkmode.amoled-dark #content:after { display: none; } - /* 通用移动端文章卡片样?*/ + /* 閫氱敤绉诲姩绔枃绔犲崱鐗囨牱?*/ article.post-preview-layout-2 .post-title { font-size: 18px; line-height: 1.4; @@ -11623,7 +11656,7 @@ html.darkmode.amoled-dark #content:after { font-size: 13px; } - /* ========== 移动端搜索框动画 (照搬桌面? ========== */ + /* ========== 绉诲姩绔悳绱㈡鍔ㄧ敾 (鐓ф惉妗岄潰? ========== */ .leftbar-mobile-search-inner { position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); @@ -11638,7 +11671,7 @@ html.darkmode.amoled-dark #content:after { transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); } - /* 搜索框聚焦时的光标动?*/ + /* 鎼滅储妗嗚仛鐒︽椂鐨勫厜鏍囧姩?*/ @keyframes searchPulse { 0%, @@ -11655,8 +11688,8 @@ html.darkmode.amoled-dark #content:after { animation: searchPulse 2s ease-in-out infinite; } - /* ========== 更多流畅侧边栏动?========== */ - /* 关闭按钮旋转入场 */ + /* ========== 鏇村娴佺晠渚ц竟鏍忓姩?========== */ + /* 鍏抽棴鎸夐挳鏃嬭浆鍏ュ満 */ @keyframes rotateIn { from { opacity: 0; @@ -11673,7 +11706,7 @@ html.darkmode.amoled-dark #content:after { animation: rotateIn 0.4s var(--ease-spring) 0.1s both; } - /* 统计数字弹跳动画 */ + /* 缁熻鏁板瓧寮硅烦鍔ㄧ敾 */ @keyframes bounceIn { 0% { opacity: 0; @@ -11706,7 +11739,7 @@ html.darkmode.amoled-dark #content:after { animation: bounceIn 0.5s var(--ease-spring) 0.5s both; } - /* 搜索图标脉冲动画 */ + /* 鎼滅储鍥炬爣鑴夊啿鍔ㄧ敾 */ @keyframes iconPulse { 0%, @@ -11723,7 +11756,7 @@ html.darkmode.amoled-dark #content:after { 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; } @@ -11736,7 +11769,7 @@ html.darkmode.amoled-dark #content:after { animation: fadeInUp 0.35s var(--ease-emphasized) 0.49s both; } - /* 底部按钮图标悬浮效果 */ + /* 搴曢儴鎸夐挳鍥炬爣鎮诞鏁堟灉 */ .leftbar-mobile-action i { transition: transform 0.3s var(--ease-spring); } @@ -11745,7 +11778,7 @@ html.darkmode.amoled-dark #content:after { transform: scale(1.15) rotate(-5deg); } - /* 菜单项悬浮指示器 */ + /* 鑿滃崟椤规偓娴寚绀哄櫒 */ .leftbar-mobile-menu-item.current>a { position: relative; } @@ -11763,7 +11796,7 @@ html.darkmode.amoled-dark #content:after { animation: slideInFromLeft 0.3s var(--ease-spring) both; } - /* 子菜单展开箭头旋转 */ + /* 瀛愯彍鍗曞睍寮€绠ご鏃嬭浆 */ .leftbar-mobile-menu-item .submenu-arrow { transition: transform 0.3s var(--ease-spring); } @@ -11772,7 +11805,7 @@ html.darkmode.amoled-dark #content:after { transform: rotate(180deg); } - /* 遮罩层淡入增?*/ + /* 閬僵灞傛贰鍏ュ?*/ #sidebar_mask { transition: opacity 0.35s var(--ease-emphasized), visibility 0.35s var(--ease-emphasized), @@ -11963,7 +11996,7 @@ html.darkmode.amoled-dark #content:after { @media screen and (max-width: 450px) { - /*Fab 设置菜单*/ + /*Fab 璁剧疆鑿滃崟*/ #fabtn_blog_settings_popup { @@ -12007,7 +12040,7 @@ html.darkmode.amoled-dark #content:after { @media screen and (max-width: 600px) { - /*浮动操作按钮透明*/ + /*娴姩鎿嶄綔鎸夐挳閫忔槑*/ #float_action_buttons { @@ -12023,7 +12056,7 @@ html.darkmode.amoled-dark #content:after { } - /*文章边界缩小*/ + /*鏂囩珷杈圭晫缂╁皬*/ .post-full { @@ -12033,7 +12066,7 @@ html.darkmode.amoled-dark #content:after { } - /*显示更少的页?/ + /*鏄剧ず鏇村皯鐨勯〉?/ .pagination:not(.pagination-mobile) { @@ -12051,7 +12084,7 @@ html.darkmode.amoled-dark #content:after { @media screen and (max-width: 690px) { - /*文章分享的浮动二维码*/ + /*鏂囩珷鍒嗕韩鐨勬诞鍔ㄤ簩缁寸爜*/ #share .icon-wechat .wechat-qrcode { @@ -12145,7 +12178,7 @@ html.darkmode.amoled-dark #content:after { -/*打印样式优化*/ +/*鎵撳嵃鏍峰紡浼樺寲*/ @media print { @@ -12195,7 +12228,7 @@ html.darkmode.amoled-dark #content:after { html>body { - background-color: white !important; + background-color: var(--color-text-deeper) !important; } @@ -12235,7 +12268,7 @@ html.no-js .comment-item-text .comment-sticker.lazyload { -/*Safari 兼容*/ +/*Safari 鍏煎*/ html.using-safari #float_action_buttons .fabtn:before, @@ -12306,7 +12339,7 @@ html.using-safari .friend-link-description:after { } -/* 下面是抄袭萌娘百科的css */ +/* 涓嬮潰鏄妱琚悓濞樼櫨绉戠殑css */ .huhua { color: #9ea3a9 !important; text-decoration: line-through !important; @@ -12393,14 +12426,14 @@ a:active .color-curtain { } /* - * 放置于这里的CSS将应用于所有皮? - * 萌娘百科仅开放Vector皮肤 - * 请尊重萌娘百科版权,以下代码除非注明均是管理员手敲出来的!!!复制需要注明源自萌娘百科,并且附上URL地址 `http://zh.moegirl.org/MediaWiki:Common.css` + * 鏀剧疆浜庤繖閲岀殑CSS灏嗗簲鐢ㄤ簬鎵€鏈夌毊? + * 钀屽鐧剧浠呭紑鏀綱ector鐨偆 + * 璇峰皧閲嶈悓濞樼櫨绉戠増鏉冿紝浠ヤ笅浠g爜闄ら潪娉ㄦ槑鍧囨槸绠$悊鍛樻墜鏁插嚭鏉ョ殑锛侊紒锛佸鍒堕渶瑕佹敞鏄庢簮鑷悓濞樼櫨绉戯紝骞朵笖闄勪笂URL鍦板潃 `http://zh.moegirl.org/MediaWiki:Common.css` /* ========================================================================== - 黑幕效果(Spoiler/Heimu? + 榛戝箷鏁堟灉锛圫poiler/Heimu? ========================================================================== */ -/* 基础黑幕样式 */ +/* 鍩虹榛戝箷鏍峰紡 */ .heimu, .heimu a, a .heimu, @@ -12417,12 +12450,12 @@ a .heimu, transition: inherit; } -/* 悬停和激活状?*/ +/* 鎮仠鍜屾縺娲荤姸?*/ .heimu:hover, .heimu:active, .heimu:hover .heimu, .heimu:active .heimu { - color: white !important; + color: var(--color-text-deeper) !important; background-color: transparent !important; } @@ -12442,7 +12475,7 @@ a:active .heimu { color: #BA0000 !important; } -/* 文章内容中的黑幕 */ +/* 鏂囩珷鍐呭涓殑榛戝箷 */ article .post-content .heimu, article .entry-content .heimu, .article-content .heimu { @@ -12456,11 +12489,11 @@ article .entry-content .heimu:hover, article .post-content .heimu:active, article .entry-content .heimu:active, .article-content .heimu:active { - color: white !important; + color: var(--color-text-deeper) !important; background-color: transparent !important; } -/* 夜间模式 */ +/* 澶滈棿妯″紡 */ html.darkmode .heimu, html.darkmode .heimu a, html.darkmode a .heimu, @@ -12471,7 +12504,7 @@ html.darkmode .heimu a.new { html.darkmode .heimu:hover, html.darkmode .heimu:active { - color: #e0e0e0 !important; + color: var(--color-text-deeper) !important; background-color: transparent !important; } @@ -12484,7 +12517,7 @@ html.darkmode .color-curtain:hover a { color: inherit !important; } -/* 评论区黑?*/ +/* 璇勮鍖洪粦?*/ html.darkmode .comment-content .heimu, html.darkmode .comment-content .color-curtain { background-color: #1a1a1a !important; @@ -12495,11 +12528,11 @@ 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: #e0e0e0 !important; + color: var(--color-text-deeper) !important; background-color: transparent !important; } -/* 禁用链接下划线动画(防止冲突?*/ +/* 绂佺敤閾炬帴涓嬪垝绾垮姩鐢伙紙闃叉鍐茬獊?*/ article .post-content .heimu a:before, article .entry-content .heimu a:before, .article-content .heimu a:before, @@ -12510,7 +12543,7 @@ article .post-content .huhua a:before { content: none !important; } -/* 确保宏内链接继承过渡属?*/ +/* 纭繚瀹忓唴閾炬帴缁ф壙杩囨浮灞?*/ .heimu a, .color-curtain a, .text-blur a, @@ -12519,7 +12552,7 @@ article .post-content .huhua a:before { } -/* ===== Git 版本徽章 ===== */ +/* ===== Git 鐗堟湰寰界珷 ===== */ .git-version-badge { display: inline-flex; align-items: center; @@ -12549,7 +12582,7 @@ article .post-content .huhua a:before { flex-shrink: 0; } -/* Git 彩蛋弹窗 */ +/* Git 褰╄泲寮圭獥 */ .git-easter-egg-overlay { position: fixed; top: 0; @@ -12678,13 +12711,13 @@ article .post-content .huhua a:before { 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; @@ -12692,7 +12725,7 @@ article .post-content .huhua a:before { } -/* ===== TODO 列表 ===== */ +/* ===== TODO 鍒楄〃 ===== */ #leftbar_part3 { margin-top: 10px; transition: top 0.3s ease, transform 0.3s ease; @@ -12774,7 +12807,7 @@ html.navbar-absolute #leftbar_part3.sticky { margin-left: auto; } -/* 折叠已完成按?*/ +/* 鎶樺彔宸插畬鎴愭寜?*/ .todo-collapse-btn { display: flex; align-items: center; @@ -12810,7 +12843,7 @@ html.navbar-absolute #leftbar_part3.sticky { text-align: center; } -/* 已完成任务分隔栏 */ +/* 宸插畬鎴愪换鍔″垎闅旀爮 */ .todo-completed-divider { display: flex; align-items: center; @@ -12866,7 +12899,7 @@ html.navbar-absolute #leftbar_part3.sticky { transform: rotate(-90deg); } -/* 站长端:显示未完成数?*/ +/* 绔欓暱绔細鏄剧ず鏈畬鎴愭暟?*/ .todo-count::before { content: ''; } @@ -13087,7 +13120,7 @@ html.navbar-absolute #leftbar_part3.sticky { opacity: 0.85; } -/* 已完成任务的完成标记(访客端?*/ +/* 宸插畬鎴愪换鍔$殑瀹屾垚鏍囪锛堣瀹㈢?*/ .todo-item.todo-completed .todo-done-mark { width: 24px; height: 24px; @@ -13163,7 +13196,7 @@ html.navbar-absolute #leftbar_part3.sticky { border-bottom-left-radius: 0; } -/* 深色模式 */ +/* 娣辫壊妯″紡 */ html.darkmode .todo-item { background: var(--color-foreground, #2d3748); } @@ -13182,7 +13215,7 @@ html.darkmode .todo-add-form input:focus { border-color: var(--themecolor); } -/* ===== 多邻国连?===== */ +/* ===== 澶氶偦鍥借繛?===== */ .duolingo-streak { display: inline-flex; align-items: center; @@ -13212,7 +13245,7 @@ html.darkmode .todo-add-form input:focus { opacity: 0.6; } -/* 多邻国火焰动?*/ +/* 澶氶偦鍥界伀鐒板姩?*/ @keyframes duolingoFlameGlow { 0%, @@ -13239,7 +13272,7 @@ html.darkmode .todo-add-form input:focus { } } -/* 移动端多邻国连胜样式优化 */ +/* 绉诲姩绔閭诲浗杩炶儨鏍峰紡浼樺寲 */ .leftbar-mobile-user-name .duolingo-streak { font-size: 15px; margin-left: 8px; @@ -13266,7 +13299,7 @@ html.darkmode .todo-add-form input:focus { } -/* ===== 禁止选中(文章内容除外) ===== */ +/* ===== 绂佹閫変腑锛堟枃绔犲唴瀹归櫎澶栵級 ===== */ body { -webkit-user-select: none; -moz-user-select: none; @@ -13286,7 +13319,7 @@ input { user-select: text; } -/* ===== 禁止图片拖动(文章内容除外) ===== */ +/* ===== 绂佹鍥剧墖鎷栧姩锛堟枃绔犲唴瀹归櫎澶栵級 ===== */ img { -webkit-user-drag: none; pointer-events: auto; @@ -13297,7 +13330,7 @@ img { -webkit-user-drag: auto; } -/* ===== 修复评论框溢出 ===== */ +/* ===== 淇璇勮妗嗘孩鍑?===== */ #post_comment.card { overflow: hidden; will-change: auto; @@ -13312,7 +13345,7 @@ img { } -/* ===== 友情链接 ===== */ +/* ===== 鍙嬫儏閾炬帴 ===== */ .friend-links-container { margin-top: 20px; } @@ -13405,7 +13438,7 @@ img { overflow: hidden; } -/* 暗色模式适配 */ +/* 鏆楄壊妯″紡閫傞厤 */ html.darkmode .friend-link-card { background: var(--card-bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); @@ -13422,9 +13455,9 @@ html.darkmode .friend-link-name { } -/* ========== 友情链接页面样式 ========== */ +/* ========== 鍙嬫儏閾炬帴椤甸潰鏍峰紡 ========== */ -/* 页面头部 */ +/* 椤甸潰澶撮儴 */ .argon-fl-header { margin-bottom: 20px; } @@ -13460,7 +13493,7 @@ html.darkmode .friend-link-name { color: var(--themecolor); } -/* 分类卡片 */ +/* 鍒嗙被鍗$墖 */ .argon-fl-category-card { margin-bottom: 20px; } @@ -13490,7 +13523,7 @@ html.darkmode .friend-link-name { font-weight: normal; } -/* 友链网格 */ +/* 鍙嬮摼缃戞牸 */ .argon-fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); @@ -13503,7 +13536,7 @@ html.darkmode .friend-link-name { } } -/* 友链项目 */ +/* 鍙嬮摼椤圭洰 */ .argon-fl-item { display: flex; align-items: center; @@ -13526,7 +13559,7 @@ html.darkmode .friend-link-name { display: none; } -/* 头像 */ +/* 澶村儚 */ .argon-fl-avatar { width: 50px; height: 50px; @@ -13556,7 +13589,7 @@ html.darkmode .friend-link-name { font-weight: bold; } -/* 内容 */ +/* 鍐呭 */ .argon-fl-content { flex: 1; min-width: 0; @@ -13585,7 +13618,7 @@ html.darkmode .friend-link-name { text-overflow: ellipsis; } -/* 箭头 */ +/* 绠ご */ .argon-fl-arrow { color: var(--color-text-secondary); opacity: 0; @@ -13598,7 +13631,7 @@ html.darkmode .friend-link-name { transform: translateX(0); } -/* 空状?*/ +/* 绌虹姸?*/ .argon-fl-empty { text-align: center; padding: 60px 20px; @@ -13623,7 +13656,7 @@ html.darkmode .friend-link-name { opacity: 0.7; } -/* 申请卡片 */ +/* 鐢宠鍗$墖 */ .argon-fl-apply-card { margin-top: 10px; } @@ -13638,7 +13671,7 @@ html.darkmode .friend-link-name { margin-right: 10px; } -/* 申请结果 */ +/* 鐢宠缁撴灉 */ .argon-fl-result { padding: 15px 20px; border-radius: var(--card-radius); @@ -13664,7 +13697,7 @@ html.darkmode .friend-link-name { border: 1px solid rgba(220, 53, 69, 0.3); } -/* 申请要求 */ +/* 鐢宠瑕佹眰 */ .argon-fl-requirements { background: var(--color-background); padding: 20px; @@ -13683,7 +13716,7 @@ html.darkmode .friend-link-name { padding-left: 20px; } -/* 表单 */ +/* 琛ㄥ崟 */ .argon-fl-form { margin-top: 20px; } @@ -13756,16 +13789,16 @@ html.darkmode .friend-link-name { margin-right: 10px; } -/* 夜间模式 */ +/* 澶滈棿妯″紡 */ html.darkmode .argon-fl-item:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } /* ======================================== - 顶栏增强样式 - Toolbar Enhancement + 椤舵爮澧炲己鏍峰紡 - Toolbar Enhancement ======================================== */ -/* 顶栏基础增强 - 柔和毛玻璃效?*/ +/* 椤舵爮鍩虹澧炲己 - 鏌斿拰姣涚幓鐠冩晥?*/ #navbar-main { -webkit-backdrop-filter: blur(var(--toolbar-blur)) saturate(120%); backdrop-filter: blur(var(--toolbar-blur)) saturate(120%); @@ -13773,7 +13806,7 @@ html.darkmode .argon-fl-item:hover { box-shadow: none; } -/* 顶栏底部柔和过渡伪元?*/ +/* 椤舵爮搴曢儴鏌斿拰杩囨浮浼厓?*/ #navbar-main::after { content: ''; position: absolute; @@ -13790,12 +13823,12 @@ html.darkmode .argon-fl-item:hover { 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%, @@ -13805,14 +13838,14 @@ html.navbar-absolute:not(.no-banner) #navbar-main.navbar-ontop { backdrop-filter: blur(calc(var(--toolbar-blur) / 1.5)); } -/* 顶栏渐变背景模式 */ +/* 椤舵爮娓愬彉鑳屾櫙妯″紡 */ 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, var(--bg-opacity)) !important; -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); @@ -13824,7 +13857,7 @@ html.toolbar-glass.darkmode #navbar-main { background: rgba(0, 0, 0, var(--bg-opacity)) !important; } -/* 顶栏阴影增强 - 更柔?*/ +/* 椤舵爮闃村奖澧炲己 - 鏇存煍?*/ html.toolbar-shadow #navbar-main { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); } @@ -13833,7 +13866,7 @@ 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); } @@ -13842,7 +13875,7 @@ 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; @@ -13853,7 +13886,7 @@ html.toolbar-border.darkmode #navbar-main { transform: scale(1.02); } -/* 顶栏图标增强 */ +/* 椤舵爮鍥炬爣澧炲己 */ .navbar-brand.navbar-icon img { transition: all 0.3s ease; border-radius: 6px; @@ -13864,7 +13897,7 @@ html.toolbar-border.darkmode #navbar-main { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); } -/* 顶栏菜单项增?*/ +/* 椤舵爮鑿滃崟椤瑰?*/ .navbar-nav .nav-link { position: relative; transition: all 0.25s ease; @@ -13888,7 +13921,7 @@ html.toolbar-border.darkmode #navbar-main { width: 60%; } -/* 顶栏下拉菜单增强 */ +/* 椤舵爮涓嬫媺鑿滃崟澧炲己 */ .navbar-nav .dropdown-menu { border: none; border-radius: var(--card-radius); @@ -13922,7 +13955,7 @@ html.toolbar-border.darkmode #navbar-main { padding-left: 24px; } -/* 顶栏搜索框增?*/ +/* 椤舵爮鎼滅储妗嗗?*/ #navbar_search_input_container .input-group { border-radius: 25px; } @@ -13931,7 +13964,7 @@ html.toolbar-border.darkmode #navbar-main { 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; @@ -13942,7 +13975,7 @@ html.toolbar-compact #navbar-main.navbar-ontop { padding-bottom: 0.6rem !important; } -/* 顶栏居中模式 */ +/* 椤舵爮灞呬腑妯″紡 */ html.toolbar-center .navbar-brand.mr-0 { position: absolute; left: 50%; @@ -13961,7 +13994,7 @@ html.toolbar-center .navbar-nav.navbar-nav-hover { } } -/* 移动端顶栏优?*/ +/* 绉诲姩绔《鏍忎紭?*/ @media (max-width: 991px) { #navbar-main { padding-left: 8px; @@ -13982,36 +14015,36 @@ html.toolbar-center .navbar-nav.navbar-nav-hover { Material 3 Design System Enhancement ======================================== */ -/* M3 设计令牌 */ +/* 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; @@ -14030,7 +14063,7 @@ html.darkmode { --m3-state-pressed: rgba(255, 255, 255, 0.12); } -/* M3 卡片样式 */ +/* M3 鍗$墖鏍峰紡 */ .card { border-radius: var(--m3-shape-lg) !important; transition: box-shadow var(--m3-motion-duration-medium) var(--m3-motion-standard), @@ -14041,7 +14074,7 @@ html.darkmode { box-shadow: var(--m3-elevation-1) !important; } -/* M3 文章卡片 */ +/* M3 鏂囩珷鍗$墖 */ article.post.card { overflow: hidden; border: none !important; @@ -14049,7 +14082,7 @@ article.post.card { position: relative; } -/* M3 按钮样式 */ +/* M3 鎸夐挳鏍峰紡 */ .btn { border-radius: var(--m3-shape-xl) !important; font-weight: 500; @@ -14085,7 +14118,7 @@ article.post.card { transform: translateY(-1px); } -/* M3 输入框样?*/ +/* M3 杈撳叆妗嗘牱?*/ .form-control { border-radius: var(--m3-shape-sm) !important; border: 1px solid var(--color-border); @@ -14099,7 +14132,7 @@ article.post.card { outline: none; } -/* M3 侧边栏样式 */ +/* M3 渚ц竟鏍忔牱寮?*/ #leftbar .card { border-radius: var(--m3-shape-lg) !important; overflow: hidden; @@ -14116,7 +14149,7 @@ article.post.card { will-change: transform; } -/* M3 侧边栏菜?*/ +/* M3 渚ц竟鏍忚彍?*/ .leftbar-menu-item>a { border-radius: var(--m3-shape-xl); transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); @@ -14134,7 +14167,7 @@ article.post.card { font-weight: 500; } -/* M3 搜索按钮 */ +/* M3 鎼滅储鎸夐挳 */ #leftbar_search_container { border-radius: var(--m3-shape-xl) !important; transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); @@ -14144,7 +14177,7 @@ article.post.card { background: var(--m3-state-hover) !important; } -/* M3 标签?*/ +/* M3 鏍囩?*/ .nav-pills .nav-link { border-radius: var(--m3-shape-xl); transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); @@ -14156,7 +14189,7 @@ article.post.card { box-shadow: var(--m3-elevation-1); } -/* M3 站点统计 */ +/* M3 绔欑偣缁熻 */ .site-state { display: flex; justify-content: center; @@ -14195,7 +14228,7 @@ article.post.card { margin-top: 2px; } -/* M3 作者链?*/ +/* M3 浣滆€呴摼?*/ .site-author-links { display: flex; justify-content: center; @@ -14223,18 +14256,18 @@ article.post.card { box-shadow: var(--m3-elevation-2); } -/* M3 文章列表 */ +/* M3 鏂囩珷鍒楄〃 */ .article-list article.post { margin-bottom: 16px; } -/* M3 文章预览卡片 */ +/* M3 鏂囩珷棰勮鍗$墖 */ .post-preview-container { border-radius: var(--m3-shape-lg); overflow: hidden; } -/* M3 文章标题 */ +/* M3 鏂囩珷鏍囬 */ .post-title a { transition: color var(--m3-motion-duration-short) var(--m3-motion-standard); } @@ -14243,7 +14276,7 @@ article.post.card { color: var(--themecolor); } -/* M3 标签样式 */ +/* M3 鏍囩鏍峰紡 */ .badge, .tag { border-radius: var(--m3-shape-sm) !important; @@ -14258,7 +14291,7 @@ article.post.card { box-shadow: var(--m3-elevation-1); } -/* M3 分页 */ +/* M3 鍒嗛〉 */ .page-link { border-radius: var(--m3-shape-sm) !important; margin: 0 2px; @@ -14269,7 +14302,7 @@ article.post.card { box-shadow: var(--m3-elevation-1); } -/* M3 评论卡片 */ +/* M3 璇勮鍗$墖 */ #comments.card, #post_comment.card { border-radius: var(--m3-shape-lg) !important; @@ -14286,7 +14319,7 @@ article.post.card { background: var(--m3-surface-1); } -/* M3 评论头像 */ +/* M3 璇勮澶村儚 */ .comment-avatar img { border-radius: var(--m3-shape-xl) !important; transition: transform var(--m3-motion-duration-short) var(--m3-motion-standard); @@ -14296,7 +14329,7 @@ article.post.card { transform: scale(1.05); } -/* M3 浮动按钮 */ +/* M3 娴姩鎸夐挳 */ .float-action-buttons .fabtn { border-radius: var(--card-radius) !important; box-shadow: var(--m3-elevation-2) !important; @@ -14307,7 +14340,7 @@ article.post.card { box-shadow: var(--m3-elevation-3) !important; } -/* M3 模态框 */ +/* M3 妯℃€佹 */ .modal-content { border-radius: var(--m3-shape-xl) !important; border: none; @@ -14324,7 +14357,7 @@ article.post.card { padding: 24px; } -/* M3 下拉菜单 */ +/* M3 涓嬫媺鑿滃崟 */ .dropdown-menu { border-radius: var(--m3-shape-md) !important; border: none; @@ -14356,14 +14389,14 @@ article.post.card { background: var(--m3-state-hover); } -/* M3 Alert 样式 */ +/* M3 Alert 鏍峰紡 */ .alert { border-radius: var(--m3-shape-md) !important; border: none; padding: 16px 20px; } -/* M3 TODO 列表 */ +/* M3 TODO 鍒楄〃 */ .todo-list { border-radius: var(--m3-shape-md); } @@ -14377,13 +14410,13 @@ article.post.card { background: var(--m3-state-hover); } -/* M3 公告卡片 */ +/* M3 鍏憡鍗$墖 */ #leftbar_announcement { border-radius: var(--m3-shape-lg) !important; overflow: hidden; } -/* M3 文章导航 */ +/* M3 鏂囩珷瀵艰埅 */ .post-navigation { border-radius: var(--m3-shape-lg) !important; overflow: hidden; @@ -14397,7 +14430,7 @@ article.post.card { background: var(--m3-surface-1); } -/* M3 相关文章 */ +/* M3 鐩稿叧鏂囩珷 */ .related-posts { border-radius: var(--m3-shape-lg) !important; } @@ -14407,7 +14440,7 @@ article.post.card { transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); } -/* M3 代码?*/ +/* M3 浠g爜?*/ article pre:not(.hljs-codeblock) { border-radius: var(--m3-shape-md) !important; } @@ -14417,7 +14450,7 @@ article pre:not(.hljs-codeblock) { overflow: hidden; } -/* M3 引用?*/ +/* M3 寮曠敤?*/ article .post-content blockquote { border-radius: 0 var(--m3-shape-sm) var(--m3-shape-sm) 0; background: var(--m3-surface-1); @@ -14425,7 +14458,7 @@ article .post-content blockquote { border-left: 4px solid var(--themecolor); } -/* M3 图片 */ +/* M3 鍥剧墖 */ article img { border-radius: var(--m3-shape-sm); } @@ -14434,7 +14467,7 @@ article img { border-radius: var(--m3-shape-md); } -/* M3 表格 */ +/* M3 琛ㄦ牸 */ article table { border-radius: var(--m3-shape-md); overflow: hidden; @@ -14444,7 +14477,7 @@ article table>thead>tr>th { background: var(--m3-surface-2); } -/* M3 滚动?*/ +/* M3 婊氬姩?*/ ::-webkit-scrollbar { width: 8px; height: 8px; @@ -14463,12 +14496,12 @@ article table>thead>tr>th { background: rgba(var(--themecolor-rgbstr), 0.5); } -/* M3 选中文本 */ +/* M3 閫変腑鏂囨湰 */ ::selection { background: rgba(var(--themecolor-rgbstr), 0.2); } -/* M3 链接悬停效果 */ +/* M3 閾炬帴鎮仠鏁堟灉 */ article .post-content a { color: var(--themecolor); text-decoration: none; @@ -14482,7 +14515,7 @@ article .post-content a:hover { background-position: left bottom; } -/* M3 页面过渡动画 */ +/* M3 椤甸潰杩囨浮鍔ㄧ敾 */ @keyframes m3-page-in { from { opacity: 0; @@ -14497,9 +14530,9 @@ article .post-content a:hover { animation: m3-page-in var(--m3-motion-duration-long) var(--m3-motion-emphasized); } -/* M3 卡片进入动画 - 使用原有动画 */ +/* M3 鍗$墖杩涘叆鍔ㄧ敾 - 浣跨敤鍘熸湁鍔ㄧ敾 */ -/* M3 Chip/标签样式 */ +/* M3 Chip/鏍囩鏍峰紡 */ .post-meta .badge, .post-categories a, .post-tags a { @@ -14520,7 +14553,7 @@ article .post-content a:hover { color: #fff; } -/* M3 头像?*/ +/* M3 澶村儚?*/ #leftbar_overview_author_image { border: 3px solid var(--m3-surface-3); transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); @@ -14531,7 +14564,7 @@ article .post-content a:hover { transform: scale(1.05); } -/* M3 响应式优?*/ +/* M3 鍝嶅簲寮忎紭?*/ @media (max-width: 768px) { :root { --m3-shape-lg: 12px; @@ -14547,7 +14580,7 @@ article .post-content a:hover { } } -/* ---------- 评论区响应式优化 ---------- */ +/* ---------- 璇勮鍖哄搷搴斿紡浼樺寲 ---------- */ @media (max-width: 768px) { .comment-item-left-wrapper { width: 36px; @@ -14600,9 +14633,9 @@ article .post-content a:hover { } } -/* ========== 精确修复 ========== */ +/* ========== 绮剧‘淇 ========== */ -/* 1. 搜索按钮动画优化 - 毛玻璃效果和左移滑入动画 */ +/* 1. 鎼滅储鎸夐挳鍔ㄧ敾浼樺寲 - 姣涚幓鐠冩晥鏋滃拰宸︾Щ婊戝叆鍔ㄧ敾 */ #navbar_search_input_container .input-group { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; @@ -14629,7 +14662,7 @@ article .post-content a:hover { transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } -/* 搜索框展开时默认毛玻璃状?*/ +/* 鎼滅储妗嗗睍寮€鏃堕粯璁ゆ瘺鐜荤拑鐘?*/ #navbar_search_input_container.open .input-group { background: rgba(255, 255, 255, 0.15) !important; -webkit-backdrop-filter: blur(var(--card-blur)); @@ -14649,7 +14682,7 @@ article .post-content a:hover { color: rgba(255, 255, 255, 0.6); } -/* hover或有内容时切换为白色背景 */ +/* 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 { @@ -14677,7 +14710,7 @@ article .post-content a:hover { color: #999; } -/* 2. 移动端侧边栏按钮修复 */ +/* 2. 绉诲姩绔晶杈规爮鎸夐挳淇 */ @media screen and (max-width: 900px) { #open_sidebar { -webkit-tap-highlight-color: transparent; @@ -14697,7 +14730,7 @@ article .post-content a:hover { } } -/* 3. Git 徽章样式 */ +/* 3. Git 寰界珷鏍峰紡 */ .git-version-badge { display: inline-flex; align-items: center; @@ -14727,7 +14760,7 @@ article .post-content a:hover { flex-shrink: 0; } -/* 移动端隐藏Git徽章 */ +/* 绉诲姩绔殣钘廏it寰界珷 */ @media screen and (max-width: 576px) { .git-version-badge { display: none; @@ -14739,7 +14772,7 @@ article .post-content a:hover { } } -/* 4. Topbar 自定义链接样?*/ +/* 4. Topbar 鑷畾涔夐摼鎺ユ牱?*/ .navbar-custom-links { display: flex; align-items: center; @@ -14772,7 +14805,7 @@ article .post-content a:hover { } } -/* 6. 防止按钮文字换行 */ +/* 6. 闃叉鎸夐挳鏂囧瓧鎹㈣ */ .btn { white-space: nowrap; } @@ -14789,7 +14822,7 @@ article .post-content a:hover { white-space: nowrap; } -/* 标签和徽章防止换?*/ +/* 鏍囩鍜屽窘绔犻槻姝㈡崲?*/ .badge, .tag, .post-categories a, @@ -14798,12 +14831,12 @@ article .post-content a:hover { } /* ======================================== - 全局视觉优化 - 保持原有风格融入 M3 + 鍏ㄥ眬瑙嗚浼樺寲 - 淇濇寔鍘熸湁椋庢牸铻嶅叆 M3 ======================================== */ -/* 全局平滑滚动?JS 库处理,此处不设?*/ +/* 鍏ㄥ眬骞虫粦婊氬姩?JS 搴撳鐞嗭紝姝ゅ涓嶈?*/ -/* 页面背景微妙纹理 */ +/* 椤甸潰鑳屾櫙寰绾圭悊 */ body { background-image: radial-gradient(circle at 20% 80%, rgba(var(--themecolor-rgbstr), 0.03) 0%, transparent 50%), @@ -14817,7 +14850,7 @@ html.darkmode body { 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: rgba(255, 255, 255, var(--card-opacity)); @@ -14832,7 +14865,7 @@ html.darkmode .card { background-color: rgba(66, 66, 66, var(--card-opacity)); } -/* 文章卡片优化 */ +/* 鏂囩珷鍗$墖浼樺寲 */ article.post.card { border: none; box-shadow: @@ -14846,21 +14879,21 @@ article.post.card:hover { 0 12px 28px rgba(var(--themecolor-rgbstr), 0.08); } -/* 文章导航卡片透明度 */ +/* 鏂囩珷瀵艰埅鍗$墖閫忔槑搴?*/ .post-navigation.card { background: var(--color-foreground); overflow: hidden; will-change: transform; } -/* 相关文章卡片透明度 */ +/* 鐩稿叧鏂囩珷鍗$墖閫忔槑搴?*/ .related-posts.card { background: var(--color-foreground); overflow: hidden; will-change: transform; } -/* 文章标题优化 */ +/* 鏂囩珷鏍囬浼樺寲 */ .post-title a { background: linear-gradient(to right, var(--themecolor), var(--themecolor-light)); -webkit-background-clip: text; @@ -14873,7 +14906,7 @@ article.post.card:hover { filter: brightness(1.1); } -/* 文章预览卡片缩略图优?*/ +/* 鏂囩珷棰勮鍗$墖缂╃暐鍥句紭?*/ .post-thumbnail { transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } @@ -14882,7 +14915,7 @@ article.post.card:hover .post-thumbnail { transform: none; } -/* 侧边栏卡片优?*/ +/* 渚ц竟鏍忓崱鐗囦紭?*/ #leftbar .card, #leftbar_part1, #leftbar_part2 { @@ -14895,7 +14928,7 @@ 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), @@ -14908,7 +14941,7 @@ html.darkmode #leftbar_part2 { 0 8px 24px rgba(var(--themecolor-rgbstr), 0.25); } -/* 按钮优化 - 纯色主题?+ Material 3 动画 */ +/* 鎸夐挳浼樺寲 - 绾壊涓婚?+ Material 3 鍔ㄧ敾 */ .btn-primary { background-color: var(--themecolor); border: none; @@ -14963,7 +14996,7 @@ html.darkmode #leftbar_part2 { border-color: var(--themecolor); } -/* 评论项悬浮效?*/ +/* 璇勮椤规偓娴晥?*/ .comment-body { transition: all 0.25s ease; border-radius: var(--m3-shape-md); @@ -14979,7 +15012,7 @@ html.darkmode .comment-body:hover { background: rgba(255, 255, 255, 0.03); } -/* 输入框聚焦效?*/ +/* 杈撳叆妗嗚仛鐒︽晥?*/ .form-control:focus, textarea.form-control:focus { border-color: var(--themecolor); @@ -14988,7 +15021,7 @@ textarea.form-control:focus { 0 2px 8px rgba(var(--themecolor-rgbstr), 0.08); } -/* 浮动按钮优化 */ +/* 娴姩鎸夐挳浼樺寲 */ #float_action_buttons .fabtn { border: 1px solid rgba(var(--themecolor-rgbstr), 0.1); box-shadow: @@ -15015,7 +15048,7 @@ html.darkmode #float_action_buttons .fabtn:hover { background: var(--themecolor); } -/* Banner 优化 */ +/* Banner 浼樺寲 */ .banner { position: relative; } @@ -15031,14 +15064,14 @@ html.darkmode #float_action_buttons .fabtn:hover { pointer-events: none; } -/* Banner 标题优化 */ +/* 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); @@ -15064,7 +15097,7 @@ html.darkmode .page-link { border-color: rgba(255, 255, 255, 0.08); } -/* 标签优化 */ +/* 鏍囩浼樺寲 */ .badge.badge-secondary, .tag.badge-secondary { background: rgba(var(--themecolor-rgbstr), 0.1); @@ -15078,7 +15111,7 @@ html.darkmode .page-link { color: #fff; } -/* 代码块优?*/ +/* 浠g爜鍧椾紭?*/ article pre, .hljs-codeblock { background: rgba(30, 30, 40, 0.95) !important; @@ -15087,7 +15120,7 @@ article pre, 0 4px 16px rgba(0, 0, 0, 0.15); } -/* 引用块优?*/ +/* 寮曠敤鍧椾紭?*/ article .post-content blockquote { background: linear-gradient(135deg, rgba(var(--themecolor-rgbstr), 0.06) 0%, @@ -15096,7 +15129,7 @@ article .post-content blockquote { box-shadow: inset 0 0 0 1px rgba(var(--themecolor-rgbstr), 0.05); } -/* 目录优化 */ +/* 鐩綍浼樺寲 */ #post_toc a { transition: all 0.2s ease; border-radius: 4px; @@ -15115,7 +15148,7 @@ article .post-content blockquote { font-weight: 500; } -/* 加载动画优化 */ +/* 鍔犺浇鍔ㄧ敾浼樺寲 */ @keyframes skeleton-loading { 0% { background-position: -200% 0; @@ -15135,12 +15168,12 @@ article .post-content blockquote { animation: skeleton-loading 1.5s infinite; } -/* 链接下划线动?*/ +/* 閾炬帴涓嬪垝绾垮姩?*/ a { text-decoration: none; } -/* 图片加载优化 */ +/* 鍥剧墖鍔犺浇浼樺寲 */ article img { opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease; @@ -15150,7 +15183,7 @@ 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); @@ -15167,7 +15200,7 @@ 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); @@ -15185,7 +15218,7 @@ html.darkmode .friend-link-card { border-color: rgba(255, 255, 255, 0.06); } -/* 时间线优?*/ +/* 鏃堕棿绾夸紭?*/ .timeline-item { position: relative; } @@ -15208,20 +15241,20 @@ html.darkmode .friend-link-card { box-shadow: 0 0 0 6px rgba(var(--themecolor-rgbstr), 0.3); } -/* 全局焦点样式 */ +/* 鍏ㄥ眬鐒︾偣鏍峰紡 */ :focus-visible { outline: 2px solid var(--themecolor); outline-offset: 2px; } -/* 平滑字体渲染 */ +/* 骞虫粦瀛椾綋娓叉煋 */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } -/* 响应式优?*/ +/* 鍝嶅簲寮忎紭?*/ @media (max-width: 768px) { .card { -webkit-backdrop-filter: blur(calc(var(--card-blur) / 3)); @@ -15237,7 +15270,7 @@ body { } } -/* 减少动画偏好 */ +/* 鍑忓皯鍔ㄧ敾鍋忓ソ */ @media (prefers-reduced-motion: reduce) { *, @@ -15250,10 +15283,10 @@ body { } /* ======================================== - Apple & Material 3 风格增强 + Apple & Material 3 椋庢牸澧炲己 ======================================== */ -/* 卡片微妙边框光泽 */ +/* 鍗$墖寰杈规鍏夋辰 */ .card { border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: @@ -15276,7 +15309,7 @@ html.darkmode .card { background-color: rgba(66, 66, 66, var(--card-opacity)); } -/* 卡片悬浮提升效果 */ +/* 鍗$墖鎮诞鎻愬崌鏁堟灉 */ article.post.card { transition: transform var(--animation-normal) var(--ease-spring), box-shadow var(--animation-normal) var(--ease-standard); @@ -15296,14 +15329,14 @@ html.darkmode article.post.card { background-color: rgba(66, 66, 66, var(--card-opacity)); } -/* 按钮 Apple + Material 3 融合风格 */ +/* 鎸夐挳 Apple + Material 3 铻嶅悎椋庢牸 */ .btn { font-weight: 500; letter-spacing: -0.01em; transition: all var(--animation-fast) var(--ease-standard); } -/* 涟漪效果 (Ripple Effect) */ +/* 娑熸吉鏁堟灉 (Ripple Effect) */ .btn-ripple { position: relative; overflow: hidden; @@ -15331,7 +15364,7 @@ html.darkmode article.post.card { transition: transform 0s, opacity 0s; } -/* 输入?Apple 风格 */ +/* 杈撳叆?Apple 椋庢牸 */ .form-control { border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); @@ -15350,7 +15383,7 @@ html.darkmode .form-control { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); } -/* 侧边栏卡片光?*/ +/* 渚ц竟鏍忓崱鐗囧厜?*/ #leftbar .card, #leftbar_part1, #leftbar_part2 { @@ -15369,7 +15402,7 @@ html.darkmode #leftbar_part2 { 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: @@ -15385,7 +15418,7 @@ html.darkmode #leftbar_part2 { 0 8px 25px rgba(var(--themecolor-rgbstr), 0.2); } -/* 浮动按钮 Apple 风格 */ +/* 娴姩鎸夐挳 Apple 椋庢牸 */ #float_action_buttons .fabtn { border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: @@ -15410,7 +15443,7 @@ html.darkmode #float_action_buttons .fabtn { 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); @@ -15429,7 +15462,7 @@ html.darkmode #float_action_buttons .fabtn { inset 0 1px 0 rgba(255, 255, 255, 0.2); } -/* 标签胶囊样式 */ +/* 鏍囩鑳跺泭鏍峰紡 */ .badge, .tag { background: rgba(var(--themecolor-rgbstr), 0.1); @@ -15447,7 +15480,7 @@ html.darkmode #float_action_buttons .fabtn { 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); @@ -15464,7 +15497,7 @@ html.darkmode #post_comment.card { 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); @@ -15475,7 +15508,7 @@ html.darkmode #post_comment.card { 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); @@ -15492,7 +15525,7 @@ html.darkmode .related-posts.card { inset 0 1px 0 rgba(255, 255, 255, 0.04); } -/* 下拉菜单 Apple 风格 */ +/* 涓嬫媺鑿滃崟 Apple 椋庢牸 */ .dropdown-menu { border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: @@ -15508,7 +15541,7 @@ html.darkmode .dropdown-menu { border: 1px solid rgba(255, 255, 255, 0.1); } -/* 模态框 Apple 风格 */ +/* 妯℃€佹 Apple 椋庢牸 */ .modal-content { border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: @@ -15524,7 +15557,7 @@ html.darkmode .modal-content { border: 1px solid rgba(255, 255, 255, 0.1); } -/* 代码块优雅阴?*/ +/* 浠g爜鍧椾紭闆呴槾?*/ article pre, .hljs-codeblock { box-shadow: @@ -15532,7 +15565,7 @@ article pre, 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; @@ -15541,7 +15574,7 @@ article .post-content blockquote { 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); @@ -15554,7 +15587,7 @@ article table>thead>tr>th { 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; @@ -15565,7 +15598,7 @@ article .post-content img:hover { 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; @@ -15579,7 +15612,7 @@ article .post-content a:not(.btn):not(.tag):not(.badge):hover { background-position: left bottom; } -/* 滚动条美?*/ +/* 婊氬姩鏉$編?*/ ::-webkit-scrollbar { width: 10px; height: 10px; @@ -15615,13 +15648,13 @@ html.darkmode ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } -/* 选中文本样式 */ +/* 閫変腑鏂囨湰鏍峰紡 */ ::selection { background: rgba(var(--themecolor-rgbstr), 0.25); color: inherit; } -/* 移动端响应式调整 */ +/* 绉诲姩绔搷搴斿紡璋冩暣 */ @media (max-width: 768px) { article.post.card:hover { transform: none; @@ -15629,7 +15662,7 @@ html.darkmode ::-webkit-scrollbar-thumb:hover { } /* ======================================== - Material 3 分段控件 (Segmented Control) + Material 3 鍒嗘鎺т欢 (Segmented Control) ======================================== */ .segmented-control { @@ -15675,8 +15708,8 @@ html.darkmode .segmented-control-item:hover { } /* ======================================== - 主题变体 - 玻璃拟?(Glassmorphism) - 使用 CSS 变量,由站长设置控制 + 涓婚鍙樹綋 - 鐜荤拑鎷?(Glassmorphism) + 浣跨敤 CSS 鍙橀噺锛岀敱绔欓暱璁剧疆鎺у埗 ======================================== */ html.style-glass .card, @@ -15704,7 +15737,7 @@ html.darkmode.style-glass .card:hover { } /* ======================================== - 主题变体 - 新拟?(Neumorphism) + 涓婚鍙樹綋 - 鏂版嫙?(Neumorphism) ======================================== */ html.style-neumorphism .card { @@ -15759,7 +15792,7 @@ html.darkmode.style-neumorphism #fabtn_blog_settings_popup { -8px -8px 16px rgba(255, 255, 255, 0.05); } -/* 样式切换过渡动画 */ +/* 鏍峰紡鍒囨崲杩囨浮鍔ㄧ敾 */ html.style-glass .card, html.style-glass #fabtn_blog_settings_popup, html.style-neumorphism .card, @@ -15771,8 +15804,8 @@ html.style-neumorphism #fabtn_blog_settings_popup { } -/* ========== 玻璃风格下文章页面卡片样式统一 ========== */ -/* 使用 CSS 变量,确保与首页卡片一致 */ +/* ========== 鐜荤拑椋庢牸涓嬫枃绔犻〉闈㈠崱鐗囨牱寮忕粺涓€ ========== */ +/* 浣跨敤 CSS 鍙橀噺锛岀‘淇濅笌棣栭〉鍗$墖涓€鑷?*/ html.style-glass article.post.post-full.card { background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important; -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); @@ -15787,17 +15820,17 @@ html.darkmode.style-glass article.post.post-full.card { 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; @@ -15805,7 +15838,7 @@ html.darkmode.style-glass article.post.post-full.card { -webkit-overflow-scrolling: touch; } - /* ===== 顶部用户信息?===== */ + /* ===== 椤堕儴鐢ㄦ埛淇℃伅?===== */ .leftbar-mobile-profile { padding: 32px 24px 28px; padding-top: calc(32px + env(safe-area-inset-top, 0)); @@ -15813,7 +15846,7 @@ html.darkmode.style-glass article.post.post-full.card { position: relative; } - /* 装饰性背景圆 */ + /* 瑁呴グ鎬ц儗鏅渾 */ .leftbar-mobile-profile::before { content: ""; position: absolute; @@ -15836,7 +15869,7 @@ html.darkmode.style-glass article.post.post-full.card { border-radius: 50%; } - /* 关闭按钮 */ + /* 鍏抽棴鎸夐挳 */ .leftbar-mobile-close { position: absolute; top: calc(16px + env(safe-area-inset-top, 0)); @@ -15865,7 +15898,7 @@ html.darkmode.style-glass article.post.post-full.card { font-size: 14px; } - /* 头像 */ + /* 澶村儚 */ .leftbar-mobile-avatar { width: 72px; height: 72px; @@ -15889,7 +15922,7 @@ html.darkmode.style-glass article.post.post-full.card { object-fit: cover; } - /* 用户信息 */ + /* 鐢ㄦ埛淇℃伅 */ .leftbar-mobile-user-info { text-align: center; position: relative; @@ -15917,7 +15950,7 @@ html.darkmode.style-glass article.post.post-full.card { margin: 0 auto; } - /* 统计数据 */ + /* 缁熻鏁版嵁 */ .leftbar-mobile-stats { display: flex; background: rgba(255, 255, 255, 0.15); @@ -15962,7 +15995,7 @@ html.darkmode.style-glass article.post.post-full.card { font-weight: 500; } - /* ===== 搜索?===== */ + /* ===== 鎼滅储?===== */ .leftbar-mobile-search { padding: 18px 18px 10px; } @@ -16007,7 +16040,7 @@ html.darkmode.style-glass article.post.post-full.card { color: #aaa; } - /* ===== 菜单区域 ===== */ + /* ===== 鑿滃崟鍖哄煙 ===== */ .leftbar-mobile-menu-section { padding: 10px 14px 8px; } @@ -16067,7 +16100,7 @@ html.darkmode.style-glass article.post.post-full.card { transform: rotate(180deg); } - /* 子菜?*/ + /* 瀛愯彍?*/ .leftbar-mobile-submenu { list-style: none; padding: 0; @@ -16100,7 +16133,7 @@ html.darkmode.style-glass article.post.post-full.card { background: rgba(var(--themecolor-rgbstr), 0.08); } - /* ===== 折叠面板 ===== */ + /* ===== 鎶樺彔闈㈡澘 ===== */ .leftbar-mobile-collapse-section { margin: 6px 14px; background: var(--color-background); @@ -16205,7 +16238,7 @@ html.darkmode.style-glass article.post.post-full.card { max-height: 320px; } - /* 目录容器 */ + /* 鐩綍瀹瑰櫒 */ .mobile-catalog-container { padding: 4px 14px 14px; } @@ -16222,7 +16255,7 @@ html.darkmode.style-glass article.post.post-full.card { border-radius: 8px; } - /* TODO 容器 */ + /* TODO 瀹瑰櫒 */ .mobile-todo-container { padding: 4px 14px 14px; } @@ -16339,7 +16372,7 @@ html.darkmode.style-glass article.post.post-full.card { transform: scale(0.9); } - /* ===== 底部操作?===== */ + /* ===== 搴曢儴鎿嶄綔?===== */ .leftbar-mobile-footer { margin-top: auto; padding: 14px 18px 22px; @@ -16392,7 +16425,7 @@ html.darkmode.style-glass article.post.post-full.card { } } -/* ===== 小屏幕适配 ===== */ +/* ===== 灏忓睆骞曢€傞厤 ===== */ @media screen and (max-width: 375px) { #leftbar { width: min(270px, 80vw); @@ -16459,7 +16492,7 @@ html.darkmode.style-glass article.post.post-full.card { } } -/* ========== 移动端玻璃风格文章卡?========== */ +/* ========== 绉诲姩绔幓鐠冮鏍兼枃绔犲崱?========== */ @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; @@ -16474,10 +16507,10 @@ html.darkmode.style-glass article.post.post-full.card { } } -/* ========== 暗色模式移动端目录样式补?========== */ +/* ========== 鏆楄壊妯″紡绉诲姩绔洰褰曟牱寮忚ˉ?========== */ @media screen and (max-width: 900px) { - /* 暗色模式下目录链接颜?*/ + /* 鏆楄壊妯″紡涓嬬洰褰曢摼鎺ラ?*/ html.darkmode #leftbar_mobile_catalog .index-link { color: #bbb; } @@ -16491,40 +16524,40 @@ html.darkmode.style-glass article.post.post-full.card { 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 绉诲姩绔吋瀹规€т慨?========== */ +/* 閽堝涓嶆敮?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; @@ -16547,7 +16580,7 @@ html.darkmode.style-glass article.post.post-full.card { } } - /* 玻璃态顶栏降?*/ + /* 鐜荤拑鎬侀《鏍忛檷?*/ html.toolbar-glass #navbar-main { background: rgba(255, 255, 255, 0.88) !important; } @@ -16556,23 +16589,23 @@ html.darkmode.style-glass article.post.post-full.card { 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 也不支持的情况(部分旧版安卓浏览器) */ +/* 閽堝 -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; @@ -16586,8 +16619,8 @@ html.darkmode.style-glass article.post.post-full.card { } } -/* ========== iOS Safari 特殊处理 ========== */ -/* iOS Safari 需?-webkit- 前缀,且在某些情况下需要强制开启硬件加?*/ +/* ========== iOS Safari 鐗规畩澶勭悊 ========== */ +/* iOS Safari 闇€?-webkit- 鍓嶇紑锛屼笖鍦ㄦ煇浜涙儏鍐典笅闇€瑕佸己鍒跺紑鍚‖浠跺姞?*/ @media screen and (max-width: 900px) { #leftbar, @@ -16598,9 +16631,9 @@ html.darkmode.style-glass article.post.post-full.card { } } -/* ========== Modern UI Enhancements - 现代化布局和动画优?========== */ +/* ========== Modern UI Enhancements - 鐜颁唬鍖栧竷灞€鍜屽姩鐢讳紭?========== */ -/* 1. 增强动画变量 */ +/* 1. 澧炲己鍔ㄧ敾鍙橀噺 */ :root { --micro-duration: 80ms; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); @@ -16625,7 +16658,7 @@ html.darkmode { --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(var(--themecolor-rgbstr), 0.15); } -/* 2. 桌面端卡片悬停效果增?*/ +/* 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); @@ -16654,7 +16687,7 @@ html.darkmode { } } -/* 3. 按钮和链接悬停效?*/ +/* 3. 鎸夐挳鍜岄摼鎺ユ偓鍋滄晥?*/ @media (hover: hover) and (pointer: fine) { .btn { transition: all var(--animation-fast) var(--ease-standard); @@ -16720,7 +16753,7 @@ html.darkmode { } } -/* 4. 滚动入场动画 */ +/* 4. 婊氬姩鍏ュ満鍔ㄧ敾 */ @keyframes modernFadeInUp { from { opacity: 0; @@ -16860,7 +16893,7 @@ html.darkmode { animation-delay: 200ms; } -/* 5. 页面过渡和浮动按钮动?*/ +/* 5. 椤甸潰杩囨浮鍜屾诞鍔ㄦ寜閽姩?*/ #primary.pjax-loading { opacity: 0.6; pointer-events: none; @@ -16888,7 +16921,7 @@ article.post.post-full:not(.no-animation) { /* article.post.post-full transform-origin removed to avoid stacking context breaking backdrop-filter */ -/* ========== 骨架屏 Skeleton Screen (Element Plus Style) ========== */ +/* ========== 楠ㄦ灦灞?Skeleton Screen (Element Plus Style) ========== */ @keyframes el-skeleton-loading { 0% { background-position: 100% 50%; @@ -16904,13 +16937,13 @@ html.darkmode { --skeleton-highlight: rgba(255, 255, 255, 0.1); } -/* 文章骨架屏已移除,不再向文章 DOM 注入骨架元素 */ +/* 鏂囩珷楠ㄦ灦灞忓凡绉婚櫎锛屼笉鍐嶅悜鏂囩珷 DOM 娉ㄥ叆楠ㄦ灦鍏冪礌 */ -/* ========== 长文章 backdrop-filter 修复 ========== - 浏览器 GPU 纹理大小限制导致 backdrop-filter 在超高元素上失效。 - 解决方案:通过 JS 插入视口大小的模糊层,使用 transform 跟随滚动位置。 */ +/* ========== 闀挎枃绔?backdrop-filter 淇 ========== + 娴忚鍣?GPU 绾圭悊澶у皬闄愬埗瀵艰嚧 backdrop-filter 鍦ㄨ秴楂樺厓绱犱笂澶辨晥銆? + 瑙e喅鏂规锛氶€氳繃 JS 鎻掑叆瑙嗗彛澶у皬鐨勬ā绯婂眰锛屼娇鐢?transform 璺熼殢婊氬姩浣嶇疆銆?*/ -/* 移除文章卡片自身的 backdrop-filter,改用 JS 管理的模糊层 */ +/* 绉婚櫎鏂囩珷鍗$墖鑷韩鐨?backdrop-filter锛屾敼鐢?JS 绠$悊鐨勬ā绯婂眰 */ article.post.post-full.card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; @@ -16918,7 +16951,7 @@ article.post.post-full.card { background: transparent !important; } -/* JS 插入的模糊覆盖层 */ +/* JS 鎻掑叆鐨勬ā绯婅鐩栧眰 */ .post-full-blur-overlay { position: absolute; left: 0; @@ -16933,12 +16966,12 @@ article.post.post-full.card { will-change: transform; } -/* 暗色模式 */ +/* 鏆楄壊妯″紡 */ html.darkmode .post-full-blur-overlay { background-color: rgba(66, 66, 66, var(--card-opacity, 0.7)); } -/* 确保文章内容在模糊层之上 */ +/* 纭繚鏂囩珷鍐呭鍦ㄦā绯婂眰涔嬩笂 */ article.post.post-full.card>*:not(.post-full-blur-overlay) { position: relative; z-index: 1; @@ -17001,7 +17034,7 @@ article.post.post-full.card>*:not(.post-full-blur-overlay) { animation-delay: 200ms; } -/* 6. 顶栏和评论区动画 */ +/* 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); } @@ -17066,7 +17099,7 @@ article.post.post-full.card>*:not(.post-full-blur-overlay) { animation: modernCommentSuccess var(--animation-slow) var(--ease-spring); } -/* 7. 图片和表单动?*/ +/* 7. 鍥剧墖鍜岃〃鍗曞姩?*/ article img, .post-thumbnail img { transition: opacity var(--animation-normal) var(--ease-standard); @@ -17116,7 +17149,7 @@ article img:not([loading="lazy"]), color: var(--themecolor); } -/* 8. 滚动条美?*/ +/* 8. 婊氬姩鏉$編?*/ ::-webkit-scrollbar { width: 8px; height: 8px; @@ -17143,7 +17176,7 @@ article img:not([loading="lazy"]), scrollbar-color: rgba(var(--themecolor-rgbstr), 0.3) transparent; } -/* 9. 移动端触摸优?*/ +/* 9. 绉诲姩绔Е鎽镐紭?*/ @media (hover: none) and (pointer: coarse) { article.post.card:hover { transform: none; @@ -17155,7 +17188,7 @@ article img:not([loading="lazy"]), } } -/* 10. 移动端侧边栏动画增强 */ +/* 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); @@ -17218,7 +17251,7 @@ article img:not([loading="lazy"]), } } -/* 11. 骨架屏和加载动画 */ +/* 11. 楠ㄦ灦灞忓拰鍔犺浇鍔ㄧ敾 */ @keyframes modernSkeletonPulse { 0% { background-position: -200% 0; @@ -17237,11 +17270,11 @@ article img:not([loading="lazy"]), } /* ========================================================================== - 现代化页面加载系? + 鐜颁唬鍖栭〉闈㈠姞杞界郴? ========================================================================== */ -/* ---------- 页面加载骨架屏进度条 ---------- */ +/* ---------- 椤甸潰鍔犺浇楠ㄦ灦灞忚繘搴︽潯 ---------- */ @keyframes el-skeleton-loading { 0% { background-position: 100% 50%; @@ -17255,7 +17288,7 @@ article img:not([loading="lazy"]), display: none !important; } -/* ---------- 文章卡片骨架屏 ---------- */ +/* ---------- 鏂囩珷鍗$墖楠ㄦ灦灞?---------- */ @keyframes article-skeleton-pulse { 0% { background-position: 100% 50%; @@ -17281,11 +17314,11 @@ article img:not([loading="lazy"]), content: ''; position: absolute; inset: 0; - background: rgba(255, 255, 255, var(--card-opacity, 1)); + background: var(--color-foreground, #fff); } html.darkmode .article-skeleton::before { - background: rgba(66, 66, 66, var(--card-opacity, 1)); + background: var(--color-foreground, #424242); } .article-skeleton-title, @@ -17324,7 +17357,7 @@ html.darkmode .article-skeleton-thumb { } } -/* 默认布局骨架屏 (content-preview-1) */ +/* 榛樿甯冨眬楠ㄦ灦灞?(content-preview-1) */ .article-skeleton-default { display: flex; flex-direction: column; @@ -17367,7 +17400,7 @@ html.darkmode .article-skeleton-thumb { width: 75%; } -/* Layout2 骨架屏 (左侧缩略图布局) */ +/* Layout2 楠ㄦ灦灞?(宸︿晶缂╃暐鍥惧竷灞€) */ .article-skeleton-layout2 { display: flex; flex-direction: row; @@ -17440,7 +17473,7 @@ html.darkmode .article-skeleton-thumb { } -/* 12. 模态框和下拉菜单动画 */ +/* 12. 妯℃€佹鍜屼笅鎷夎彍鍗曞姩鐢?*/ .modal { transition: opacity var(--animation-normal) var(--ease-standard); } @@ -17494,7 +17527,7 @@ html.darkmode .article-skeleton-thumb { transition: background var(--animation-fast) var(--ease-standard), color var(--animation-fast) var(--ease-standard); } -/* 13. 工具提示、标签、分页动画 */ +/* 13. 宸ュ叿鎻愮ず銆佹爣绛俱€佸垎椤靛姩鐢?*/ .tooltip { opacity: 0; transform: translateY(5px); @@ -17524,7 +17557,7 @@ html.darkmode .article-skeleton-thumb { transform: scale(0.95); } -/* 14. 目录导航动画 */ +/* 14. 鐩綍瀵艰埅鍔ㄧ敾 */ .index-link { transition: all var(--animation-fast) var(--ease-standard); position: relative; @@ -17547,7 +17580,7 @@ html.darkmode .article-skeleton-thumb { transform: translateY(-50%) scaleY(1); } -/* 15. 时间线动画 */ +/* 15. 鏃堕棿绾垮姩鐢?*/ .timeline-item { opacity: 0; transform: translateX(-20px); @@ -17585,7 +17618,7 @@ html.darkmode .article-skeleton-thumb { animation-delay: 500ms; } -/* 16. 友链和代码块动画 */ +/* 16. 鍙嬮摼鍜屼唬鐮佸潡鍔ㄧ敾 */ .friend-link-item { transition: box-shadow var(--animation-normal) var(--ease-standard); } @@ -17607,7 +17640,7 @@ html.darkmode .article-skeleton-thumb { opacity: 1; } -/* 17. 减少动画偏好支持 */ +/* 17. 鍑忓皯鍔ㄧ敾鍋忓ソ鏀寔 */ @media (prefers-reduced-motion: reduce) { *, @@ -17625,7 +17658,7 @@ html.darkmode .article-skeleton-thumb { } } -/* 18. 打印样式优化 */ +/* 18. 鎵撳嵃鏍峰紡浼樺寲 */ @media print { *, @@ -17726,3 +17759,207 @@ html.darkmode .site-rss-btn:hover { background: var(--themecolor); color: #fff !important; } +/* ========================================================================= + Immersive Reading Mode + ========================================================================= */ + +/* ---------- Button in Post Meta ---------- */ +.post-meta-detail-immersive { + transition: color 0.2s ease, transform 0.2s cubic-bezier(0.2, 0, 0, 1); + display: inline-flex; + align-items: center; + position: relative; + user-select: none; + cursor: pointer; +} +.post-meta-detail-immersive:hover { + color: var(--themecolor) !important; +} +.post-meta-detail-immersive.active { + color: var(--themecolor) !important; + font-weight: 600; +} +.post-meta-detail-immersive i.fa { + transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1); +} +.post-meta-detail-immersive:active { + transform: scale(0.95); +} + +/* ---------- Global Element Transitions ---------- */ +/* Snappy, fast transitions: 0.35s duration, sharp material ease-in-out */ +#primary, #leftbar, #rightbar, .post-navigation, .related-posts, #comments, #post_comment, #footer, #toolbar, #banner, .page-information-card-container, #float_action_buttons { + transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), + transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), + max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), + margin 0.35s cubic-bezier(0.4, 0, 0.2, 1), + padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), + max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), + width 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +/* ---------- Immersive Mode Active State ---------- */ + +/* Sidebar Disappears Swiftly */ +html.immersive-read #leftbar, html.immersive-read #rightbar { + opacity: 0 !important; + pointer-events: none !important; + width: 0 !important; + min-width: 0 !important; + max-width: 0 !important; + flex: 0 0 0% !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + transform: scale(0.96) translateX(-10px); +} + +/* Toolbar slides up instantly */ +html.immersive-read #toolbar { + opacity: 0 !important; + pointer-events: none; + transform: translateY(-100%); +} + +/* Banner minimizes gracefully */ +html.immersive-read #banner { + opacity: 0 !important; + max-height: 0 !important; + min-height: 0 !important; + padding: 0 !important; + margin: 0 !important; + overflow: hidden; + pointer-events: none; +} + +/* Non-essential content collapses down firmly */ +html.immersive-read .post-navigation, +html.immersive-read .related-posts, +html.immersive-read #comments, +html.immersive-read #post_comment, +html.immersive-read #footer, +html.immersive-read .page-information-card-container, +html.immersive-read #share_container { + opacity: 0 !important; + pointer-events: none; + max-height: 0 !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + transform: translateY(15px); +} + +/* Drop float action buttons on the right */ +html.immersive-read #float_action_buttons { + opacity: 0 !important; + pointer-events: none; + transform: translateX(15px) scale(0.96); +} + +/* Main Container adjusts crisply */ +html.immersive-read #primary { + width: 100% !important; + max-width: 900px !important; + margin: 0 auto !important; + float: none !important; + padding-top: 20px; +} + +/* Clean up card boundaries */ +html.immersive-read article.post.post-full.card { + box-shadow: none !important; + border: none !important; + background: transparent !important; + backdrop-filter: none !important; + margin-bottom: 20px; +} + +/* Font scale for sharp legibility */ +html.immersive-read .post-content { + font-size: 16.5px; + line-height: 1.85; + letter-spacing: 0.02em; +} + +/* Lock scroll X */ +html.immersive-read body { + overflow-x: hidden !important; +} + +/* Mask disable */ +html.immersive-read #sidebar_mask { + display: none !important; +} + +/* ---------- Exit Hover Button (Replacing the complex FAB) ---------- */ +/* We integrate the exit button cleanly into the floating area styling, using Argon's default button design language */ +.immersive-exit-btn-container { + position: fixed; + top: -50px; + left: 50%; + transform: translateX(-50%); + z-index: 99999; + transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; + opacity: 0; + pointer-events: none; +} + +html.immersive-read .immersive-exit-btn-container.visible { + top: 20px; + opacity: 1; + pointer-events: auto; +} + +html.immersive-read .immersive-exit-btn-container.dimmed { + opacity: 0.15; +} + +html.immersive-read .immersive-exit-btn-container.dimmed:hover { + opacity: 1; +} + +.immersive-exit-btn-fast { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 6px 16px 6px 14px; + border-radius: 20px; + background: var(--color-foreground) !important; + color: var(--color-text) !important; + border: 1px solid var(--color-border); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + user-select: none; +} +.immersive-exit-btn-fast i { + font-size: 12px; + transition: transform 0.2s ease; +} + +.immersive-exit-btn-fast:hover { + background: var(--color-foreground) !important; + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); + border-color: var(--themecolor); + color: var(--themecolor) !important; +} + +.immersive-exit-btn-fast:active { + transform: scale(0.96); +} + +/* Mobile tweak */ +@media screen and (max-width: 900px) { + html.immersive-read #primary { + max-width: 100% !important; + padding-left: 0px; + padding-right: 0px; + padding-top: 10px; + } + html.immersive-read .post-content { + font-size: 16px; + } +}