From 3eaef5b06a38b1c9dae07b0da0cbb05cdf1e281c Mon Sep 17 00:00:00 2001 From: User Date: Thu, 12 Mar 2026 15:53:23 +0800 Subject: [PATCH] Fix blur effect, implement skeleton loading, and add Duolingo JWT friend streak feature --- argontheme.js | 2366 +++++++++---------- footer.php | 49 + functions.php | 66 +- settings.php | 16 + sidebar.php | 21 +- style.css | 6071 ++++++++++++++++++++++++++++--------------------- 6 files changed, 4835 insertions(+), 3754 deletions(-) diff --git a/argontheme.js b/argontheme.js index de64085..a93b5cd 100644 --- a/argontheme.js +++ b/argontheme.js @@ -5,115 +5,115 @@ // ========== 兼容性修复 ========== // 确保 Prism 和 autoloader 存在 if (typeof window.Prism === 'undefined') { - window.Prism = { - highlightAll: function() {}, - highlightElement: function() {}, - plugins: {} - }; + window.Prism = { + highlightAll: function () { }, + highlightElement: function () { }, + plugins: {} + }; } if (typeof window.Prism.plugins === 'undefined') { - window.Prism.plugins = {}; + window.Prism.plugins = {}; } if (typeof window.Prism.plugins.autoloader === 'undefined') { - window.Prism.plugins.autoloader = { - languages_path: '', - use_minified: true - }; + window.Prism.plugins.autoloader = { + languages_path: '', + use_minified: true + }; } // 确保 Zoomify 存在 if (typeof window.Zoomify === 'undefined') { - window.Zoomify = function() {}; - window.Zoomify.DEFAULTS = {}; + window.Zoomify = function () { }; + window.Zoomify.DEFAULTS = {}; } // 确保 jQuery 插件存在 if (typeof jQuery !== 'undefined') { - (function($) { - // 确保 easing 函数存在(防止其他插件覆盖 jQuery 后丢失) - if (typeof $.easing === 'undefined') { - $.easing = {}; - } - if (typeof $.easing.easeOutCirc === 'undefined') { - $.easing.easeOutCirc = function(x) { - return Math.sqrt(1 - Math.pow(x - 1, 2)); - }; - } - if (typeof $.easing.easeOutExpo === 'undefined') { - $.easing.easeOutExpo = function(x) { - return x === 1 ? 1 : 1 - Math.pow(2, -10 * x); - }; - } + (function ($) { + // 确保 easing 函数存在(防止其他插件覆盖 jQuery 后丢失) + if (typeof $.easing === 'undefined') { + $.easing = {}; + } + if (typeof $.easing.easeOutCirc === 'undefined') { + $.easing.easeOutCirc = function (x) { + return Math.sqrt(1 - Math.pow(x - 1, 2)); + }; + } + if (typeof $.easing.easeOutExpo === 'undefined') { + $.easing.easeOutExpo = function (x) { + return x === 1 ? 1 : 1 - Math.pow(2, -10 * x); + }; + } - if (!$.fn._argonInit) { - $.fn._argonInit = $.fn.init; - $.fn.init = function(selector, context, root) { - // 修复空选择器、特殊字符和中文标点导致的语法错误 - if (typeof selector === 'string') { - let trimmed = selector.trim(); - // 检查是否为空或只有 # 符号 - if (trimmed === '' || trimmed === '#') { - return new $.fn._argonInit(); - } - // 检查是否包含中文标点(可能导致语法错误) - if (/[;,。:!?]/.test(trimmed)) { - console.warn('[Argon] Invalid selector with Chinese punctuation:', selector); - return new $.fn._argonInit(); - } - // 检查 ID 选择器是否有效(#后面必须有内容) - if (/^#\s*$/.test(trimmed)) { - return new $.fn._argonInit(); - } - } - return $.fn._argonInit.call(this, selector, context, root); - }; - $.fn.init.prototype = $.fn; - } - - // 确保 zoomify 插件存在 - if (typeof $.fn.zoomify === 'undefined') { - $.fn.zoomify = function() { return this; }; - } - - // 确保 fancybox 存在 - if (typeof $.fancybox === 'undefined') { - $.fancybox = { - defaults: { - transitionEffect: 'slide', - buttons: [], - lang: 'zh_CN', - i18n: {} - }, - open: function() {}, - close: function() {} - }; - } - if (typeof $.fancybox.defaults === 'undefined') { - $.fancybox.defaults = { - transitionEffect: 'slide', - buttons: [], - lang: 'zh_CN', - i18n: {} - }; - } - - // 确保 pjax 存在 - if (typeof $.pjax === 'undefined') { - $.pjax = function() {}; - $.pjax.defaults = { - timeout: 10000, - container: [], - fragment: [] - }; - } - if (typeof $.pjax.defaults === 'undefined') { - $.pjax.defaults = { - timeout: 10000, - container: [], - fragment: [] - }; - } - })(jQuery); + if (!$.fn._argonInit) { + $.fn._argonInit = $.fn.init; + $.fn.init = function (selector, context, root) { + // 修复空选择器、特殊字符和中文标点导致的语法错误 + if (typeof selector === 'string') { + let trimmed = selector.trim(); + // 检查是否为空或只有 # 符号 + if (trimmed === '' || trimmed === '#') { + return new $.fn._argonInit(); + } + // 检查是否包含中文标点(可能导致语法错误) + if (/[;,。:!?]/.test(trimmed)) { + console.warn('[Argon] Invalid selector with Chinese punctuation:', selector); + return new $.fn._argonInit(); + } + // 检查 ID 选择器是否有效(#后面必须有内容) + if (/^#\s*$/.test(trimmed)) { + return new $.fn._argonInit(); + } + } + return $.fn._argonInit.call(this, selector, context, root); + }; + $.fn.init.prototype = $.fn; + } + + // 确保 zoomify 插件存在 + if (typeof $.fn.zoomify === 'undefined') { + $.fn.zoomify = function () { return this; }; + } + + // 确保 fancybox 存在 + if (typeof $.fancybox === 'undefined') { + $.fancybox = { + defaults: { + transitionEffect: 'slide', + buttons: [], + lang: 'zh_CN', + i18n: {} + }, + open: function () { }, + close: function () { } + }; + } + if (typeof $.fancybox.defaults === 'undefined') { + $.fancybox.defaults = { + transitionEffect: 'slide', + buttons: [], + lang: 'zh_CN', + i18n: {} + }; + } + + // 确保 pjax 存在 + if (typeof $.pjax === 'undefined') { + $.pjax = function () { }; + $.pjax.defaults = { + timeout: 10000, + container: [], + fragment: [] + }; + } + if (typeof $.pjax.defaults === 'undefined') { + $.pjax.defaults = { + timeout: 10000, + container: [], + fragment: [] + }; + } + })(jQuery); } // ========================================================================== @@ -132,10 +132,10 @@ if (typeof jQuery !== 'undefined') { // ========================================================================== // ========== 原有代码 ========== -if (typeof(argonConfig) == "undefined"){ +if (typeof (argonConfig) == "undefined") { var argonConfig = {}; } -if (typeof(argonConfig.wp_path) == "undefined"){ +if (typeof (argonConfig.wp_path) == "undefined") { argonConfig.wp_path = "/"; } @@ -376,19 +376,19 @@ translation['zh_TW'] = { "全屏": "全屏", "退出全屏": "退出全屏", }; -function __(text){ +function __(text) { let lang = argonConfig.language; - if (typeof(translation[lang]) == "undefined"){ + if (typeof (translation[lang]) == "undefined") { return text; } - if (typeof(translation[lang][text]) == "undefined"){ + if (typeof (translation[lang][text]) == "undefined") { return text; } return translation[lang][text]; } /*根据滚动高度改变顶栏透明度 */ -!function(){ +!function () { let toolbar = document.getElementById("navbar-main"); let $bannerContainer = $("#banner_container"); let $content = $("#content"); @@ -400,26 +400,26 @@ function __(text){ startTransitionHeight = $bannerContainer.offset().top - 75; endTransitionHeight = $content.offset().top - 75; - $(window).resize(function(){ + $(window).resize(function () { startTransitionHeight = $bannerContainer.offset().top - 75; endTransitionHeight = $content.offset().top - 75; }); - function changeToolbarTransparency(){ + function changeToolbarTransparency() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; - if (scrollTop < startTransitionHeight){ + if (scrollTop < startTransitionHeight) { toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0)', 'important'); toolbar.style.setProperty('box-shadow', 'none'); - if (argonConfig.toolbar_blur){ + if (argonConfig.toolbar_blur) { toolbar.style.setProperty('backdrop-filter', 'blur(0px)'); } toolbar.classList.add("navbar-ontop"); return; } - if (scrollTop > endTransitionHeight){ + if (scrollTop > endTransitionHeight) { toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + maxOpacity + ')', 'important'); toolbar.style.setProperty('box-shadow', ''); - if (argonConfig.toolbar_blur){ + if (argonConfig.toolbar_blur) { toolbar.style.setProperty('backdrop-filter', 'blur(16px)'); } toolbar.classList.remove("navbar-ontop"); @@ -428,30 +428,30 @@ function __(text){ let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * maxOpacity; toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important'); toolbar.style.setProperty('box-shadow', ''); - if (argonConfig.toolbar_blur){ - if ((scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) > 0.3){ + if (argonConfig.toolbar_blur) { + if ((scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) > 0.3) { toolbar.style.setProperty('backdrop-filter', 'blur(16px)'); - }else{ + } else { toolbar.style.setProperty('backdrop-filter', 'blur(0px)'); } } toolbar.classList.remove("navbar-ontop"); } - function changeToolbarOnTopClass(){ + function changeToolbarOnTopClass() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; - if (scrollTop < 30){ + if (scrollTop < 30) { toolbar.classList.add("navbar-no-blur"); - }else{ + } else { toolbar.classList.remove("navbar-no-blur"); } } if ($("html").hasClass("no-banner")) { changeToolbarOnTopClass(); // 使用节流优化滚动事件性能 - const throttledChangeToolbarOnTopClass = argonEventManager ? - argonEventManager.throttle(changeToolbarOnTopClass, 16) : + const throttledChangeToolbarOnTopClass = argonEventManager ? + argonEventManager.throttle(changeToolbarOnTopClass, 16) : changeToolbarOnTopClass; - document.addEventListener("scroll", throttledChangeToolbarOnTopClass, {passive: true}); + document.addEventListener("scroll", throttledChangeToolbarOnTopClass, { passive: true }); return; } if (argonConfig.headroom == "absolute") { @@ -461,37 +461,37 @@ function __(text){ if ($("html").hasClass("toolbar-blur")) { argonConfig.toolbar_blur = true; maxOpacity = 0.65; - }else{ + } else { argonConfig.toolbar_blur = false; } changeToolbarTransparency(); // 使用节流优化滚动事件性能 - const throttledChangeToolbarTransparency = argonEventManager ? - argonEventManager.throttle(changeToolbarTransparency, 16) : + const throttledChangeToolbarTransparency = argonEventManager ? + argonEventManager.throttle(changeToolbarTransparency, 16) : changeToolbarTransparency; - document.addEventListener("scroll", throttledChangeToolbarTransparency, {passive: true}); + document.addEventListener("scroll", throttledChangeToolbarTransparency, { passive: true }); }(); /*搜索*/ -function searchPosts(word){ - if ($(".search-result").length > 0){ +function searchPosts(word) { + if ($(".search-result").length > 0) { let url = new URL(window.location.href); url.searchParams.set("s", word); $.pjax({ url: url.href }); - }else{ + } else { $.pjax({ url: argonConfig.wp_path + "?s=" + encodeURI(word) }); } } /*顶栏搜索*/ -$(document).on("click" , "#navbar_search_input_container" , function(){ +$(document).on("click", "#navbar_search_input_container", function () { $(this).addClass("open"); $("#navbar_search_input").focus(); }); -$(document).on("blur" , "#navbar_search_input_container" , function(){ +$(document).on("blur", "#navbar_search_input_container", function () { // 如果有文字则保持has-text类 if ($("#navbar_search_input").val().trim() !== "") { $(this).addClass("has-text"); @@ -501,7 +501,7 @@ $(document).on("blur" , "#navbar_search_input_container" , function(){ $(this).removeClass("open"); }); // 监听输入变化来切换has-text类 -$(document).on("input" , "#navbar_search_input" , function(){ +$(document).on("input", "#navbar_search_input", function () { var container = $("#navbar_search_input_container"); if ($(this).val().trim() !== "") { container.addClass("has-text"); @@ -509,12 +509,12 @@ $(document).on("input" , "#navbar_search_input" , function(){ container.removeClass("has-text"); } }); -$(document).on("keydown" , "#navbar_search_input_container #navbar_search_input" , function(e){ - if (e.keyCode != 13){ +$(document).on("keydown", "#navbar_search_input_container #navbar_search_input", function (e) { + if (e.keyCode != 13) { return; } let word = $(this).val(); - if (word == ""){ + if (word == "") { $("#navbar_search_input_container").blur(); return; } @@ -522,36 +522,36 @@ $(document).on("keydown" , "#navbar_search_input_container #navbar_search_input" searchPosts(word); }); /*顶栏搜索 (Mobile)*/ -$(document).on("keydown" , "#navbar_search_input_mobile" , function(e){ - if (e.keyCode != 13){ +$(document).on("keydown", "#navbar_search_input_mobile", function (e) { + if (e.keyCode != 13) { return; } let word = $(this).val(); $("#navbar_global .collapse-close button").click(); - if (word == ""){ + if (word == "") { return; } let scrolltop = $(document).scrollTop(); searchPosts(word); }); /*侧栏搜索*/ -$(document).on("click" , "#leftbar_search_container" , function(){ +$(document).on("click", "#leftbar_search_container", function () { $(".leftbar-search-button").addClass("open"); $("#leftbar_search_input").removeAttr("readonly").focus(); $("#leftbar_search_input").focus(); $("#leftbar_search_input").select(); return false; }); -$(document).on("blur" , "#leftbar_search_container" , function(){ +$(document).on("blur", "#leftbar_search_container", function () { $(".leftbar-search-button").removeClass("open"); $("#leftbar_search_input").attr("readonly", "readonly"); }); -$(document).on("keydown" , "#leftbar_search_input" , function(e){ - if (e.keyCode != 13){ +$(document).on("keydown", "#leftbar_search_input", function (e) { + if (e.keyCode != 13) { return; } let word = $(this).val(); - if (word == ""){ + if (word == "") { $("#leftbar_search_container").blur(); return; } @@ -559,18 +559,18 @@ $(document).on("keydown" , "#leftbar_search_input" , function(e){ searchPosts(word); }); /*搜索过滤器*/ -$(document).on("change" , ".search-filter" , function(e){ - if (pjaxLoading){ +$(document).on("change", ".search-filter", function (e) { + if (pjaxLoading) { $(this).prop("checked", !$(this).prop("checked")); e.preventDefault(); return; } pjaxLoading = true; let postTypes = []; - $(".search-filter:checked").each(function(){ + $(".search-filter:checked").each(function () { postTypes.push($(this).attr("name")); }); - if (postTypes.length == 0){ + if (postTypes.length == 0) { postTypes = ["none"]; } let url = new URL(document.location.href); @@ -582,24 +582,24 @@ $(document).on("change" , ".search-filter" , function(e){ }); /*左侧栏随页面滚动浮动*/ -!function(){ - if ($("#leftbar").length == 0){ +!function () { + if ($("#leftbar").length == 0) { let contentOffsetTop = $('#content').offset().top; - function changeLeftbarStickyStatusWithoutSidebar(){ + function changeLeftbarStickyStatusWithoutSidebar() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; - if( contentOffsetTop - 10 - scrollTop <= 20 ){ + if (contentOffsetTop - 10 - scrollTop <= 20) { document.body.classList.add('leftbar-can-headroom'); - }else{ + } else { document.body.classList.remove('leftbar-can-headroom'); } } changeLeftbarStickyStatusWithoutSidebar(); // 使用节流优化滚动事件性能 - const throttledChangeLeftbarStickyStatusWithoutSidebar = argonEventManager ? - argonEventManager.throttle(changeLeftbarStickyStatusWithoutSidebar, 16) : + const throttledChangeLeftbarStickyStatusWithoutSidebar = argonEventManager ? + argonEventManager.throttle(changeLeftbarStickyStatusWithoutSidebar, 16) : changeLeftbarStickyStatusWithoutSidebar; - document.addEventListener("scroll", throttledChangeLeftbarStickyStatusWithoutSidebar, {passive: true}); - $(window).resize(function(){ + document.addEventListener("scroll", throttledChangeLeftbarStickyStatusWithoutSidebar, { passive: true }); + $(window).resize(function () { contentOffsetTop = $('#content').offset().top; changeLeftbarStickyStatusWithoutSidebar(); }); @@ -614,9 +614,9 @@ $(document).on("change" , ".search-filter" , function(e){ let part1OffsetTop = $('#leftbar_part1').offset().top; let part1OuterHeight = $('#leftbar_part1').outerHeight(); - function changeLeftbarStickyStatus(){ + function changeLeftbarStickyStatus() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; - if( part1OffsetTop + part1OuterHeight + 10 - scrollTop <= (argonConfig.headroom != "absolute" ? 90 : 18) ){ + if (part1OffsetTop + part1OuterHeight + 10 - scrollTop <= (argonConfig.headroom != "absolute" ? 90 : 18)) { //滚动条在页面中间浮动状态 leftbarPart2.classList.add('sticky'); if (leftbarPart3) { @@ -625,16 +625,16 @@ $(document).on("change" , ".search-filter" , function(e){ let viewportHeight = window.innerHeight; let topOffset = argonConfig.headroom !== 'absolute' ? 90 : 20; let availableHeight = viewportHeight - topOffset - 20; // 20px 底部边距 - + // 获取 part3 的自然高度(不受限制时的高度) leftbarPart3.style.maxHeight = 'none'; let part3NaturalHeight = leftbarPart3.scrollHeight; leftbarPart3.style.maxHeight = ''; - + // 最小高度限制 let minPart2Height = 150; let minPart3Height = 100; - + // 计算分配 let part2Height, part3MaxHeight; if (part3NaturalHeight + minPart2Height <= availableHeight) { @@ -646,49 +646,59 @@ $(document).on("change" , ".search-filter" , function(e){ part2Height = Math.max(minPart2Height, availableHeight * 0.6); part3MaxHeight = Math.max(minPart3Height, availableHeight - part2Height - 10); } - + document.documentElement.style.setProperty('--leftbar-part2-height', leftbarPart2.offsetHeight + 10 + 'px'); document.documentElement.style.setProperty('--leftbar-part3-height', part3MaxHeight + 'px'); document.documentElement.style.setProperty('--leftbar-part3-max-height', part3MaxHeight + 'px'); } - }else{ + } else { //滚动条在顶部 不浮动状态 leftbarPart2.classList.remove('sticky'); if (leftbarPart3) leftbarPart3.classList.remove('sticky'); } - if( part1OffsetTop + part1OuterHeight + 10 - scrollTop <= 20 ){//侧栏下部分是否可以随 Headroom 一起向上移动 + if (part1OffsetTop + part1OuterHeight + 10 - scrollTop <= 20) {//侧栏下部分是否可以随 Headroom 一起向上移动 document.body.classList.add('leftbar-can-headroom'); - }else{ + } else { document.body.classList.remove('leftbar-can-headroom'); } } changeLeftbarStickyStatus(); // 使用节流优化滚动事件性能 - const throttledChangeLeftbarStickyStatus = argonEventManager ? - argonEventManager.throttle(changeLeftbarStickyStatus, 16) : + const throttledChangeLeftbarStickyStatus = argonEventManager ? + argonEventManager.throttle(changeLeftbarStickyStatus, 16) : changeLeftbarStickyStatus; - document.addEventListener("scroll", throttledChangeLeftbarStickyStatus, {passive: true}); - $(window).resize(function(){ + document.addEventListener("scroll", throttledChangeLeftbarStickyStatus, { passive: true }); + $(window).resize(function () { part1OffsetTop = $leftbarPart1.offset().top; part1OuterHeight = $leftbarPart1.outerHeight(); changeLeftbarStickyStatus(); }); - new MutationObserver(function(){ + new MutationObserver(function () { part1OffsetTop = $leftbarPart1.offset().top; part1OuterHeight = $leftbarPart1.outerHeight(); changeLeftbarStickyStatus(); - }).observe(leftbarPart1, {attributes: true, childList: true, subtree: true}); + }).observe(leftbarPart1, { attributes: true, childList: true, subtree: true }); + // 监听 part2 和 part3 的尺寸变化,确保高度变动时重新计算布局 + // 注意:这里必须使用 ResizeObserver 而不是 MutationObserver + // 因为 changeLeftbarStickyStatus 会修改 DOM 属性(classList, style),使用 MuationObserver 会导致无限循环死机 + if (typeof ResizeObserver !== 'undefined') { + const ro = new ResizeObserver(function () { + changeLeftbarStickyStatus(); + }); + if (leftbarPart2) ro.observe(leftbarPart2); + if (leftbarPart3) ro.observe(leftbarPart3); + } }(); /*Headroom*/ -if (argonConfig.headroom == "true"){ - var headroom = new Headroom(document.querySelector("body"),{ - "tolerance" : { - up : 0, - down : 0 +if (argonConfig.headroom == "true") { + var headroom = new Headroom(document.querySelector("body"), { + "tolerance": { + up: 0, + down: 0 }, "offset": 0, - "classes": { + "classes": { "initial": "with-headroom", "pinned": "headroom---pinned", "unpinned": "headroom---unpinned", @@ -706,8 +716,8 @@ function waterflowInit() { if (argonConfig.waterflow_columns == "1") { return; } - $("#main.article-list img").each(function(index, ele){ - ele.onload = function(){ + $("#main.article-list img").each(function (index, ele) { + ele.onload = function () { waterflowInit(); } }); @@ -718,17 +728,17 @@ function waterflowInit() { } else { columns = 2; } - }else{ + } else { columns = parseInt(argonConfig.waterflow_columns); } if ($("#main").outerWidth() < 650 && columns == 2) { columns = 1; - }else if ($("#main").outerWidth() < 800 && columns == 3) { + } else if ($("#main").outerWidth() < 800 && columns == 3) { columns = 1; } let heights = [0, 0, 0]; - function getMinHeightPosition(){ + function getMinHeightPosition() { let res = 0, minn = 2147483647; for (var i = 0; i < columns; i++) { if (heights[i] < minn) { @@ -738,7 +748,7 @@ function waterflowInit() { } return res; } - function getMaxHeight(){ + function getMaxHeight() { let res = 0; for (let i in heights) { res = Math.max(res, heights[i]); @@ -748,7 +758,7 @@ function waterflowInit() { $("#primary").css("transition", "none") .addClass("waterflow"); let $container = $("#main.article-list"); - if (!$container.length){ + if (!$container.length) { return; } let $items = $container.find("article.post:not(.no-results), .shuoshuo-preview-container"); @@ -757,9 +767,9 @@ function waterflowInit() { $container.removeClass("waterflow"); $items.css("transition", "").css("position", "").css("width", "").css("top", "").css("left", "").css("margin", ""); $(".waterflow-placeholder").remove(); - }else{ + } else { $container.addClass("waterflow"); - $items.each(function(index, item) { + $items.each(function (index, item) { let $item = $(item); $item.css("transition", "none") .css("position", "absolute") @@ -773,16 +783,16 @@ function waterflowInit() { } if ($(".waterflow-placeholder").length) { $(".waterflow-placeholder").css("height", getMaxHeight() + "px"); - }else{ - $container.prepend("
"); + } else { + $container.prepend("
"); } } waterflowInit(); if (argonConfig.waterflow_columns != "1") { - $(window).resize(function(){ + $(window).resize(function () { waterflowInit(); }); - new MutationObserver(function(mutations, observer){ + new MutationObserver(function (mutations, observer) { waterflowInit(); }).observe(document.querySelector("#primary"), { 'childList': true @@ -790,10 +800,10 @@ if (argonConfig.waterflow_columns != "1") { } /*移动端文章列表布局切换*/ -!function(){ +!function () { var mobileLayout = argonConfig.article_list_layout_mobile || "1"; var isMobile = window.innerWidth <= 900; - + function applyMobileLayout() { var nowMobile = window.innerWidth <= 900; if (nowMobile) { @@ -802,27 +812,27 @@ if (argonConfig.waterflow_columns != "1") { $("html").removeClass("mobile-layout-1 mobile-layout-2 mobile-layout-3"); } } - + applyMobileLayout(); - $(window).resize(function(){ + $(window).resize(function () { applyMobileLayout(); }); }(); /*浮动按钮栏相关(回顶部)*/ -!function(){ +!function () { // 确保 DOM 和 jQuery 已加载 if (typeof jQuery === 'undefined') { setTimeout(arguments.callee, 50); return; } - + let $fabtns = $('#float_action_buttons'); if ($fabtns.length === 0) { setTimeout(arguments.callee, 50); return; } - + let $backToTopBtn = $('#fabtn_back_to_top'); let $toggleSidesBtn = $('#fabtn_toggle_sides'); let $toggleDarkmode = $('#fabtn_toggle_darkmode'); @@ -834,31 +844,31 @@ if (argonConfig.waterflow_columns != "1") { let $readingProgressBar = $('#fabtn_reading_progress_bar'); let $readingProgressDetails = $('#fabtn_reading_progress_details'); - $backToTopBtn.on("click" , function(){ + $backToTopBtn.on("click", function () { $("body,html").stop().animate({ scrollTop: 0 }, 600); }); - $toggleDarkmode.on("click" , function(){ + $toggleDarkmode.on("click", function () { toggleDarkmode(); }); - $toggleAmoledMode.on("click" , function(){ + $toggleAmoledMode.on("click", function () { toggleAmoledDarkMode(); }) - if ($("#post_comment").length > 0){ + if ($("#post_comment").length > 0) { $("#fabtn_go_to_comment").removeClass("fabtn-hidden"); - }else{ + } else { $("#fabtn_go_to_comment").addClass("fabtn-hidden"); } - $goToComment.on("click" , function(){ + $goToComment.on("click", function () { var commentsArea = $("#comments"); var postCommentArea = $("#post_comment"); var wasCollapsed = commentsArea.hasClass("comments-collapsed"); var toggleBtn = $("#comments_toggle"); - + if (wasCollapsed && toggleBtn.length > 0) { // 折叠状态:先滚动到评论切换按钮位置,再展开 $("body,html").stop().animate({ @@ -868,7 +878,7 @@ if (argonConfig.waterflow_columns != "1") { toggleBtn.find(".btn-inner--text").text("折叠评论"); toggleBtn.addClass("expanded"); commentsArea.removeClass("comments-collapsed"); - setTimeout(function() { + setTimeout(function () { postCommentArea.removeClass("comments-collapsed"); $("#post_comment_content").focus(); }, 150); @@ -881,60 +891,60 @@ if (argonConfig.waterflow_columns != "1") { } }); - if (localStorage['Argon_fabs_Floating_Status'] == "left"){ + if (localStorage['Argon_fabs_Floating_Status'] == "left") { $fabtns.addClass("fabtns-float-left"); } - $toggleSidesBtn.on("click" , function(){ + $toggleSidesBtn.on("click", function () { $fabtns.addClass("fabtns-unloaded"); - setTimeout(function(){ + setTimeout(function () { $fabtns.toggleClass("fabtns-float-left"); - if ($fabtns.hasClass("fabtns-float-left")){ + if ($fabtns.hasClass("fabtns-float-left")) { localStorage['Argon_fabs_Floating_Status'] = "left"; - }else{ + } else { localStorage['Argon_fabs_Floating_Status'] = "right"; } $fabtns.removeClass("fabtns-unloaded"); - } , 300); + }, 300); }); //博客设置 - $toggleBlogSettings.on("click" , function(){ + $toggleBlogSettings.on("click", function () { $("#float_action_buttons").toggleClass("blog_settings_opened"); }); - $("#close_blog_settings").on("click" , function(){ + $("#close_blog_settings").on("click", function () { $("#float_action_buttons").removeClass("blog_settings_opened"); }); - $("#blog_setting_darkmode_switch .custom-toggle-slider").on("click" , function(){ + $("#blog_setting_darkmode_switch .custom-toggle-slider").on("click", function () { toggleDarkmode(); }); //字体 - $("#blog_setting_font_sans_serif").on("click" , function(){ + $("#blog_setting_font_sans_serif").on("click", function () { $("html").removeClass("use-serif"); localStorage['Argon_Use_Serif'] = "false"; }); - $("#blog_setting_font_serif").on("click" , function(){ + $("#blog_setting_font_serif").on("click", function () { $("html").addClass("use-serif"); localStorage['Argon_Use_Serif'] = "true"; }); // 字体设置已在 header.php 中预加载,此处无需重复应用 - + //阴影 - $("#blog_setting_shadow_small").on("click" , function(){ + $("#blog_setting_shadow_small").on("click", function () { $("html").removeClass("use-big-shadow"); localStorage['Argon_Use_Big_Shadow'] = "false"; }); - $("#blog_setting_shadow_big").on("click" , function(){ + $("#blog_setting_shadow_big").on("click", function () { $("html").addClass("use-big-shadow"); localStorage['Argon_Use_Big_Shadow'] = "true"; }); // 阴影设置已在 header.php 中预加载,此处无需重复应用 //滤镜 - function setBlogFilter(name){ - if (name == undefined || name == ""){ + function setBlogFilter(name) { + if (name == undefined || name == "") { name = "off"; } - if (!$("html").hasClass("filter-" + name)){ + if (!$("html").hasClass("filter-" + name)) { $("html").removeClass("filter-sunset filter-darkness filter-grayscale"); - if (name != "off"){ + if (name != "off") { $("html").addClass("filter-" + name); } } @@ -945,17 +955,17 @@ if (argonConfig.waterflow_columns != "1") { // 滤镜设置已在 header.php 中预加载,此处只需设置按钮状态 let currentFilter = localStorage['Argon_Filter'] || 'off'; $("#blog_setting_filters .blog-setting-filter-btn[filter-name='" + currentFilter + "']").addClass("active"); - $(".blog-setting-filter-btn").on("click" , function(){ + $(".blog-setting-filter-btn").on("click", function () { setBlogFilter(this.getAttribute("filter-name")); }); //UI 样式切换 (玻璃拟态/新拟态) - function setUIStyle(style){ - if (style == undefined || style == ""){ + function setUIStyle(style) { + if (style == undefined || style == "") { style = "default"; } $("html").removeClass("style-glass style-neumorphism"); - if (style != "default"){ + if (style != "default") { $("html").addClass("style-" + style); } $(".blog-setting-style-btn").removeClass("active"); @@ -965,60 +975,60 @@ if (argonConfig.waterflow_columns != "1") { // UI 样式设置已在 header.php 中预加载,此处只需设置按钮状态 let currentUIStyle = localStorage['Argon_UI_Style'] || 'default'; $(".blog-setting-style-btn[style-name='" + currentUIStyle + "']").addClass("active"); - $(".blog-setting-style-btn").on("click" , function(){ + $(".blog-setting-style-btn").on("click", function () { setUIStyle(this.getAttribute("style-name")); }); let $window = $(window); - function changefabtnDisplayStatus(){ + function changefabtnDisplayStatus() { //阅读进度 - function hideReadingProgress(){ + function hideReadingProgress() { $readingProgressBtn.addClass("fabtn-hidden"); } - function setReadingProgress(percent){ + function setReadingProgress(percent) { $readingProgressBtn.removeClass("fabtn-hidden"); $readingProgressDetails.html((percent * 100).toFixed(0) + "%"); - $readingProgressBar.css("width" , (percent * 100).toFixed(0) + "%"); + $readingProgressBar.css("width", (percent * 100).toFixed(0) + "%"); } - if ($("article.post.post-full").length == 0){ + if ($("article.post.post-full").length == 0) { hideReadingProgress(); - }else{ + } else { let a = $window.scrollTop() - ($("article.post.post-full").offset().top - 80); let b = $("article.post.post-full").outerHeight() + 50 - $window.height(); - if (b <= 0){ + if (b <= 0) { hideReadingProgress(); - }else{ + } else { readingProgress = a / b; - if (isNaN(readingProgress) || readingProgress < 0 || readingProgress > 1){ + if (isNaN(readingProgress) || readingProgress < 0 || readingProgress > 1) { hideReadingProgress(); - }else{ + } else { setReadingProgress(readingProgress); } } } //是否显示回顶 - if ($(window).scrollTop() >= 400){ + if ($(window).scrollTop() >= 400) { $backToTopBtn.removeClass("fabtn-hidden"); - }else{ + } else { $backToTopBtn.addClass("fabtn-hidden"); } } changefabtnDisplayStatus(); - $(window).scroll(function(){ + $(window).scroll(function () { changefabtnDisplayStatus(); }); - $(window).resize(function(){ + $(window).resize(function () { changefabtnDisplayStatus(); }); $fabtns.removeClass("fabtns-unloaded"); }(); /*卡片圆角大小调整*/ -!function(){ - function setCardRadius(radius, setcookie){ +!function () { + function setCardRadius(radius, setcookie) { document.documentElement.style.setProperty('--card-radius', radius + "px"); - if (setcookie){ + if (setcookie) { setCookie("argon_card_radius", radius, 365); } } @@ -1032,15 +1042,15 @@ if (argonConfig.waterflow_columns != "1") { 'max': [30] } }); - slider.noUiSlider.on('update', function (values){ + slider.noUiSlider.on('update', function (values) { let value = values[0]; setCardRadius(value, false); }); - slider.noUiSlider.on('set', function (values){ + slider.noUiSlider.on('set', function (values) { let value = values[0]; setCardRadius(value, true); }); - $(document).on("click" , "#blog_setting_card_radius_to_default" , function(){ + $(document).on("click", "#blog_setting_card_radius_to_default", function () { slider.noUiSlider.set($("meta[name='theme-card-radius-origin']").attr("content")); setCardRadius($("meta[name='theme-card-radius-origin']").attr("content"), false); setCookie("argon_card_radius", $("meta[name='theme-card-radius-origin']").attr("content"), 0); @@ -1048,15 +1058,15 @@ if (argonConfig.waterflow_columns != "1") { }(); /*评论区 & 发送评论*/ -!function(){ +!function () { //回复评论 - let replying = false , replyID = 0; - + let replying = false, replyID = 0; + /** * 显示回复框 * @param {number} commentID - 评论ID */ - function reply(commentID){ + function reply(commentID) { cancelEdit(false); replying = true; replyID = commentID; @@ -1071,12 +1081,12 @@ if (argonConfig.waterflow_columns != "1") { preview = sourceEl.textContent; } $("#post_comment_reply_preview").text(preview); - if ($("#comment-" + commentID + " .comment-item-title .badge-private-comment").length > 0){ + if ($("#comment-" + commentID + " .comment-item-title .badge-private-comment").length > 0) { $("#post_comment").addClass("post-comment-force-privatemode-on"); - }else{ + } else { $("#post_comment").addClass("post-comment-force-privatemode-off"); } - + // 滚动到评论框(使用原生 scrollTo 避免 jQuery easing 依赖问题) let postComment = $('#post_comment'); if (postComment.length > 0 && postComment.offset()) { @@ -1086,7 +1096,7 @@ if (argonConfig.waterflow_columns != "1") { behavior: 'smooth' }); } - + // 使用 CSS 动画显示回复框 let replyInfo = $('#post_comment_reply_info'); if (replyInfo.length > 0) { @@ -1095,55 +1105,55 @@ if (argonConfig.waterflow_columns != "1") { replyInfo[0].offsetHeight; replyInfo.addClass('reply-entering'); } - - setTimeout(function(){ + + setTimeout(function () { $("#post_comment_content").focus(); }, 300); } - + /** * 取消回复 */ - function cancelReply(){ + function cancelReply() { replying = false; replyID = 0; let replyInfo = $('#post_comment_reply_info'); replyInfo.removeClass('reply-entering').addClass('reply-leaving'); - setTimeout(function(){ + setTimeout(function () { replyInfo.css('display', 'none').removeClass('reply-leaving'); }, 200); $("#post_comment").removeClass("post-comment-force-privatemode-on post-comment-force-privatemode-off"); } - - $(document).on("click" , ".comment-reply" , function(){ + + $(document).on("click", ".comment-reply", function () { reply(this.getAttribute("data-id")); }); - $(document).on("click pjax:click" , "#post_comment_reply_cancel" , function(){ + $(document).on("click pjax:click", "#post_comment_reply_cancel", function () { cancelReply(); }); - $(document).on("pjax:click" , function(){ + $(document).on("pjax:click", function () { replying = false; replyID = 0; $('#post_comment_reply_info').css("display", "none").removeClass('reply-entering reply-leaving'); $("#post_comment").removeClass("post-comment-force-privatemode-on post-comment-force-privatemode-off"); }); //编辑评论 - let editing = false , editID = 0; - function edit(commentID){ + let editing = false, editID = 0; + function edit(commentID) { cancelReply(); editing = true; editID = commentID; $('#post_comment').addClass("editing"); $("#post_comment_content").val($("#comment-" + editID + " .comment-item-source").text()); $("#post_comment_content").trigger("change"); - if ($("#comment-" + editID).data("use-markdown") == true && document.getElementById("comment_post_use_markdown") != null){ + if ($("#comment-" + editID).data("use-markdown") == true && document.getElementById("comment_post_use_markdown") != null) { document.getElementById("comment_post_use_markdown").checked = true; - }else{ + } else { document.getElementById("comment_post_use_markdown").checked = false; } - if ($("#comment-" + commentID + " .comment-item-title .badge-private-comment").length > 0){ + if ($("#comment-" + commentID + " .comment-item-title .badge-private-comment").length > 0) { $("#post_comment").addClass("post-comment-force-privatemode-on"); - }else{ + } else { $("#post_comment").addClass("post-comment-force-privatemode-off"); } // 使用原生 scrollTo 避免 jQuery easing 依赖问题 @@ -1156,7 +1166,7 @@ if (argonConfig.waterflow_columns != "1") { } $("#post_comment_content").focus(); } - function cancelEdit(clear){ + function cancelEdit(clear) { editing = false; editID = 0; $("#post_comment").removeClass("post-comment-force-privatemode-on post-comment-force-privatemode-off"); @@ -1164,10 +1174,10 @@ if (argonConfig.waterflow_columns != "1") { $("#post_comment_content").trigger("change"); $('#post_comment').removeClass("editing"); } - $(document).on("click", ".comment-edit", function(){ + $(document).on("click", ".comment-edit", function () { edit(this.getAttribute("data-id")); }); - $(document).on("click", "#post_comment_edit_cancel", function(){ + $(document).on("click", "#post_comment_edit_cancel", function () { // 使用原生 scrollTo 避免 jQuery easing 依赖问题 let commentEl = document.getElementById("comment-" + editID); if (commentEl) { @@ -1178,46 +1188,46 @@ if (argonConfig.waterflow_columns != "1") { } cancelEdit(true); }); - $(document).on("pjax:click", function(){ + $(document).on("pjax:click", function () { cancelEdit(true); }); - $(document).on("click", ".comment-pin, .comment-unpin", function(){ + $(document).on("click", ".comment-pin, .comment-unpin", function () { toogleCommentPin(this.getAttribute("data-id"), !this.classList.contains("comment-pin")); }); - $(document).on("click", ".comment-delete", function(){ + $(document).on("click", ".comment-delete", function () { deleteComment(this.getAttribute("data-id")); }); - $(document).on("mouseenter", ".comment-parent-info", function(){ + $(document).on("mouseenter", ".comment-parent-info", function () { $("#comment-" + this.getAttribute("data-parent-id")).addClass("highlight"); }); - $(document).on("mouseleave", ".comment-parent-info", function(){ + $(document).on("mouseleave", ".comment-parent-info", function () { $("#comment-" + this.getAttribute("data-parent-id")).removeClass("highlight"); }); //切换评论置顶状态 - function toogleCommentPin(commentID, pinned){ + function toogleCommentPin(commentID, pinned) { $("#comment_pin_comfirm_dialog .modal-title").html(pinned ? __("取消置顶评论") : __("置顶评论")); $("#comment_pin_comfirm_dialog .modal-body").html(pinned ? __("是否要取消置顶评论 #") + commentID + "?" : __("是否要置顶评论 #") + commentID + "?"); $("#comment_pin_comfirm_dialog .btn-comfirm").html(__("确认")).attr("disabled", false); $("#comment_pin_comfirm_dialog .btn-dismiss").html(__("取消")).attr("disabled", false); - $("#comment_pin_comfirm_dialog .btn-comfirm").off("click").on("click", function(){ + $("#comment_pin_comfirm_dialog .btn-comfirm").off("click").on("click", function () { $("#comment_pin_comfirm_dialog .btn-dismiss").attr("disabled", true) $("#comment_pin_comfirm_dialog .btn-comfirm").attr("disabled", true).prepend(__(``)); $.ajax({ type: 'POST', url: argonConfig.wp_path + "wp-admin/admin-ajax.php", - dataType : "json", + dataType: "json", data: { action: "pin_comment", id: commentID, pinned: pinned ? "false" : "true" }, - success: function(result){ + success: function (result) { $("#comment_pin_comfirm_dialog").modal('hide'); - if (result.status == "success"){ - if (pinned){ + if (result.status == "success") { + if (pinned) { $("#comment-" + commentID + " .comment-name .badge-pinned").remove(); $("#comment-" + commentID + " .comment-unpin").removeClass("comment-unpin").addClass("comment-pin").html(__("置顶")); - }else{ + } else { $("#comment-" + commentID + " .comment-name").append(`${__("置顶")}`); $("#comment-" + commentID + " .comment-pin").removeClass("comment-pin").addClass("comment-unpin").html(__("取消置顶")); } @@ -1250,7 +1260,7 @@ if (argonConfig.waterflow_columns != "1") { }); } }, - error: function(result){ + error: function (result) { $("#comment_pin_comfirm_dialog").modal('hide'); iziToast.show({ title: pinned ? __("取消置顶失败") : __("置顶失败"), @@ -1270,13 +1280,13 @@ if (argonConfig.waterflow_columns != "1") { }); $("#comment_pin_comfirm_dialog").modal(null); } - + //删除评论 function deleteComment(commentID) { if (!confirm(__('确定要删除评论 #') + commentID + '?')) { return; } - + $.ajax({ type: 'POST', url: argonConfig.wp_path + 'wp-admin/admin-ajax.php', @@ -1285,14 +1295,14 @@ if (argonConfig.waterflow_columns != "1") { action: 'frontend_delete_comment', id: commentID }, - success: function(result) { + success: function (result) { if (result.status === 'success') { // 移除评论元素 - $('#comment-' + commentID).fadeOut(300, function() { + $('#comment-' + commentID).fadeOut(300, function () { $(this).next('.comment-divider').remove(); $(this).remove(); }); - + iziToast.show({ title: __('删除成功'), message: result.msg, @@ -1322,7 +1332,7 @@ if (argonConfig.waterflow_columns != "1") { }); } }, - error: function() { + error: function () { iziToast.show({ title: __('删除失败'), message: __('未知错误'), @@ -1339,38 +1349,38 @@ if (argonConfig.waterflow_columns != "1") { } }); } - + //显示/隐藏额外输入框(评论者网址) - $(document).on("click" , "#post_comment_toggle_extra_input" , function(){ + $(document).on("click", "#post_comment_toggle_extra_input", function () { $("#post_comment").toggleClass("show-extra-input"); - if ($("#post_comment").hasClass("show-extra-input")){ + if ($("#post_comment").hasClass("show-extra-input")) { $("#post_comment_extra_input").slideDown(250, 'easeOutCirc'); - }else{ + } else { $("#post_comment_extra_input").slideUp(200, 'easeOutCirc'); } }); //输入框细节 - $(document).on("change input keydown keyup propertychange" , "#post_comment_content" , function(){ + $(document).on("change input keydown keyup propertychange", "#post_comment_content", function () { $("#post_comment_content_hidden")[0].innerText = $("#post_comment_content").val() + "\n"; - $("#post_comment_content").css("height" , $("#post_comment_content_hidden").outerHeight()); + $("#post_comment_content").css("height", $("#post_comment_content_hidden").outerHeight()); }); - $(document).on("focus" , "#post_comment_link" , function(){ + $(document).on("focus", "#post_comment_link", function () { $(".post-comment-link-container").addClass("active"); }); - $(document).on("blur" , "#post_comment_link" , function(){ + $(document).on("blur", "#post_comment_link", function () { $(".post-comment-link-container").removeClass("active"); }); - $(document).on("focus" , "#post_comment_captcha" , function(){ + $(document).on("focus", "#post_comment_captcha", function () { $(".post-comment-captcha-container").addClass("active"); }); - $(document).on("blur" , "#post_comment_captcha" , function(){ + $(document).on("blur", "#post_comment_captcha", function () { $(".post-comment-captcha-container").removeClass("active"); }); //发送评论 - window.postComment = function postComment(){ + window.postComment = function postComment() { let commentContent = $("#post_comment_content").val(); let commentName = $("#post_comment_name").val(); let commentEmail = $("#post_comment_email").val(); @@ -1379,13 +1389,13 @@ if (argonConfig.waterflow_columns != "1") { let useMarkdown = false; let privateMode = false; let mailNotice = false; - if ($("#comment_post_use_markdown").length > 0){ + if ($("#comment_post_use_markdown").length > 0) { useMarkdown = $("#comment_post_use_markdown")[0].checked; } - if ($("#comment_post_privatemode").length > 0){ + if ($("#comment_post_privatemode").length > 0) { privateMode = $("#comment_post_privatemode")[0].checked; } - if ($("#comment_post_mailnotice").length > 0){ + if ($("#comment_post_mailnotice").length > 0) { mailNotice = $("#comment_post_mailnotice")[0].checked; } @@ -1396,80 +1406,80 @@ if (argonConfig.waterflow_columns != "1") { let errorMsg = ""; //检查表单合法性 - if (commentContent.match(/^\s*$/)){ + if (commentContent.match(/^\s*$/)) { isError = true; errorMsg += __("评论内容不能为空") + "
"; } - if (!$("#post_comment").hasClass("no-need-name-email")){ - if (commentName.match(/^\s*$/)){ + if (!$("#post_comment").hasClass("no-need-name-email")) { + if (commentName.match(/^\s*$/)) { isError = true; errorMsg += __("昵称不能为空") + "
"; } - if ($("#post_comment").hasClass("enable-qq-avatar")){ - if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail) && !(/^[1-9][0-9]{4,10}$/).test(commentEmail)){ + if ($("#post_comment").hasClass("enable-qq-avatar")) { + if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail) && !(/^[1-9][0-9]{4,10}$/).test(commentEmail)) { isError = true; errorMsg += __("邮箱或QQ 号格式错误") + "
"; } - }else{ - if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail)){ + } else { + if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail)) { isError = true; errorMsg += __("邮箱格式错误") + "
"; } } - }else{ - if (commentEmail.length || (document.getElementById("comment_post_mailnotice") != null && document.getElementById("comment_post_mailnotice").checked == true)){ - if ($("#post_comment").hasClass("enable-qq-avatar")){ - if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail) && !(/^[1-9][0-9]{4,10}$/).test(commentEmail)){ + } else { + if (commentEmail.length || (document.getElementById("comment_post_mailnotice") != null && document.getElementById("comment_post_mailnotice").checked == true)) { + if ($("#post_comment").hasClass("enable-qq-avatar")) { + if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail) && !(/^[1-9][0-9]{4,10}$/).test(commentEmail)) { isError = true; errorMsg += __("邮箱或QQ 号格式错误") + "
"; } - }else{ - if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail)){ + } else { + if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail)) { isError = true; errorMsg += __("邮箱格式错误") + "
"; } } } } - if (commentLink != "" && !(/https?:\/\//).test(commentLink)){ + if (commentLink != "" && !(/https?:\/\//).test(commentLink)) { isError = true; errorMsg += __("网站格式错误 (不是 http(s):// 开头)") + "
"; } - if (!$("#post_comment").hasClass("no-need-captcha")){ + if (!$("#post_comment").hasClass("no-need-captcha")) { // 检查是否使用Geetest验证码 - if ($("#geetest-captcha").length > 0) { - // 检查Geetest库是否加载成功 - if (typeof window.geetestLoadFailed !== 'undefined' && window.geetestLoadFailed) { - isError = true; - errorMsg += __("验证码服务不可用,请刷新页面重试"); - } else if (typeof window.geetestCaptcha === 'undefined' || !window.geetestCaptcha) { - isError = true; - errorMsg += __("验证码未初始化,请稍后重试");; - } else { - // Geetest验证码检查 - let lotNumber = $("#geetest_lot_number").val(); - let captchaOutput = $("#geetest_captcha_output").val(); - let passToken = $("#geetest_pass_token").val(); - let genTime = $("#geetest_gen_time").val(); - - if (!lotNumber || !captchaOutput || !passToken || !genTime) { + if ($("#geetest-captcha").length > 0) { + // 检查Geetest库是否加载成功 + if (typeof window.geetestLoadFailed !== 'undefined' && window.geetestLoadFailed) { isError = true; - errorMsg += __("请完成验证码验证"); + errorMsg += __("验证码服务不可用,请刷新页面重试"); + } else if (typeof window.geetestCaptcha === 'undefined' || !window.geetestCaptcha) { + isError = true; + errorMsg += __("验证码未初始化,请稍后重试");; + } else { + // Geetest验证码检查 + let lotNumber = $("#geetest_lot_number").val(); + let captchaOutput = $("#geetest_captcha_output").val(); + let passToken = $("#geetest_pass_token").val(); + let genTime = $("#geetest_gen_time").val(); + + if (!lotNumber || !captchaOutput || !passToken || !genTime) { + isError = true; + errorMsg += __("请完成验证码验证"); + } } - } - } else { + } else { // 原有的数学验证码验证 - if (commentCaptcha == ""){ + if (commentCaptcha == "") { isError = true; errorMsg += __("验证码未输入"); } - if (commentCaptcha != "" && !(/^[0-9]+$/).test(commentCaptcha)){ + if (commentCaptcha != "" && !(/^[0-9]+$/).test(commentCaptcha)) { isError = true; errorMsg += __("验证码格式错误"); } } } - if (isError){ + if (isError) { // 确保按钮和表单元素处于可用状态 $("#post_comment_send").removeAttr("disabled"); $("#post_comment_content").removeAttr("disabled"); @@ -1481,7 +1491,7 @@ if (argonConfig.waterflow_columns != "1") { $("#post_comment").removeClass("sending"); $("#post_comment_send .btn-inner--icon.hide-on-comment-editing").html(""); $("#post_comment_send .btn-inner--text.hide-on-comment-editing").html(__("发送")); - + iziToast.show({ title: __("评论格式错误"), message: errorMsg, @@ -1500,13 +1510,13 @@ if (argonConfig.waterflow_columns != "1") { //增加 disabled 属性和其他的表单提示 $("#post_comment").addClass("sending"); - $("#post_comment_content").attr("disabled","disabled"); - $("#post_comment_name").attr("disabled","disabled"); - $("#post_comment_email").attr("disabled","disabled"); - $("#post_comment_captcha").attr("disabled","disabled"); - $("#post_comment_link").attr("disabled","disabled"); - $("#post_comment_send").attr("disabled","disabled"); - $("#post_comment_reply_cancel").attr("disabled","disabled"); + $("#post_comment_content").attr("disabled", "disabled"); + $("#post_comment_name").attr("disabled", "disabled"); + $("#post_comment_email").attr("disabled", "disabled"); + $("#post_comment_captcha").attr("disabled", "disabled"); + $("#post_comment_link").attr("disabled", "disabled"); + $("#post_comment_send").attr("disabled", "disabled"); + $("#post_comment_reply_cancel").attr("disabled", "disabled"); $("#post_comment_send .btn-inner--icon.hide-on-comment-editing").html(""); $("#post_comment_send .btn-inner--text.hide-on-comment-editing").html(__("发送中")); @@ -1556,8 +1566,8 @@ if (argonConfig.waterflow_columns != "1") { $("#post_comment_reply_cancel").removeAttr("disabled"); $("#post_comment_send .btn-inner--icon.hide-on-comment-editing").html(""); $("#post_comment_send .btn-inner--text.hide-on-comment-editing").html(__("发送")); - - setTimeout(function() { + + setTimeout(function () { try { iziToast.destroy(); iziToast.error({ @@ -1571,13 +1581,13 @@ if (argonConfig.waterflow_columns != "1") { }, 0); return false; } - + // Geetest验证码参数 - 使用后端期望的参数名 ajaxData.lot_number = $("#geetest_lot_number").val(); ajaxData.captcha_output = $("#geetest_captcha_output").val(); ajaxData.pass_token = $("#geetest_pass_token").val(); ajaxData.gen_time = $("#geetest_gen_time").val(); - + // 验证Geetest参数是否完整 if (!ajaxData.lot_number || !ajaxData.captcha_output || !ajaxData.pass_token || !ajaxData.gen_time) { // 重新启用按钮和表单元素 @@ -1591,9 +1601,9 @@ if (argonConfig.waterflow_columns != "1") { $("#post_comment_reply_cancel").removeAttr("disabled"); $("#post_comment_send .btn-inner--icon.hide-on-comment-editing").html(""); $("#post_comment_send .btn-inner--text.hide-on-comment-editing").html(__("发送")); - + // 使用 setTimeout 确保 iziToast 操作在下一个事件循环中执行 - setTimeout(function() { + setTimeout(function () { try { iziToast.destroy(); iziToast.error({ @@ -1616,9 +1626,9 @@ if (argonConfig.waterflow_columns != "1") { $.ajax({ type: 'POST', url: argonConfig.wp_path + "wp-admin/admin-ajax.php", - dataType : "json", + dataType: "json", data: ajaxData, - success: function(result){ + success: function (result) { $("#post_comment").removeClass("sending"); $("#post_comment_content").removeAttr("disabled"); $("#post_comment_name").removeAttr("disabled"); @@ -1629,14 +1639,14 @@ if (argonConfig.waterflow_columns != "1") { $("#post_comment_send .btn-inner--icon.hide-on-comment-editing").html(""); $("#post_comment_send .btn-inner--text.hide-on-comment-editing").html(__("发送")); $("#post_comment").removeClass("show-extra-input post-comment-force-privatemode-on post-comment-force-privatemode-off"); - if (!result.isAdmin){ + if (!result.isAdmin) { $("#post_comment_captcha").removeAttr("disabled"); } //判断是否有错误 - if (result.status == "failed"){ + if (result.status == "failed") { // 使用 setTimeout 确保 iziToast 操作在下一个事件循环中执行 - setTimeout(function() { + setTimeout(function () { try { iziToast.destroy(); iziToast.show({ @@ -1663,12 +1673,12 @@ if (argonConfig.waterflow_columns != "1") { // 先复位评论表单(确保无论后续操作是否成功都能重置表单) cancelReply(); $("#post_comment_content").val(""); - + // 重置数学验证码 $("#post_comment_captcha_seed").val(result.newCaptchaSeed); $("#post_comment_captcha + style").html(".post-comment-captcha-container:before{content: '" + result.newCaptcha + "';}"); $("#post_comment_captcha").val(""); - + // 清空Geetest验证码隐藏字段并重置验证码实例 if ($("#geetest-captcha").length > 0) { $("#geetest_lot_number").val(""); @@ -1688,9 +1698,9 @@ if (argonConfig.waterflow_columns != "1") { } } } - + // 显示成功提示 - setTimeout(function() { + setTimeout(function () { try { iziToast.destroy(); iziToast.show({ @@ -1710,33 +1720,33 @@ if (argonConfig.waterflow_columns != "1") { ArgonDebug.warn('iziToast error:', e); } }, 0); - + // 插入新评论 try { result.html = result.html.replace(/<(\/).noscript>/g, ""); let parentID = result.parentID; - if (parentID == "" || parentID == null){ + if (parentID == "" || parentID == null) { parentID = 0; } parentID = parseInt(parentID); - if (parentID == 0){ - if ($("#comments > .card-body > ol.comment-list").length == 0){ + if (parentID == 0) { + if ($("#comments > .card-body > ol.comment-list").length == 0) { $("#comments > .card-body").html("

" + __("评论") + "

    "); } - if (result.commentOrder == "asc"){ + if (result.commentOrder == "asc") { $("#comments > .card-body > ol.comment-list").append(result.html); - }else{ + } else { $("#comments > .card-body > ol.comment-list").prepend(result.html); } - }else{ - if ($("#comment-" + parentID + " + .comment-divider + li > ul.children").length > 0){ + } else { + if ($("#comment-" + parentID + " + .comment-divider + li > ul.children").length > 0) { $("#comment-" + parentID + " + .comment-divider + li > ul.children").append(result.html); - }else{ + } else { $("#comment-" + parentID + " + .comment-divider").after("
  1. "); } } calcHumanTimesOnPage(); - + // 滚动到新评论 $("body,html").animate({ scrollTop: $("#comment-" + result.id).offset().top - 100 @@ -1744,8 +1754,8 @@ if (argonConfig.waterflow_columns != "1") { } catch (e) { ArgonDebug.warn('Comment insertion error:', e); } - }, - error: function(result){ + }, + error: function (result) { $("#post_comment").removeClass("sending"); $("#post_comment_content").removeAttr("disabled"); $("#post_comment_name").removeAttr("disabled"); @@ -1756,7 +1766,7 @@ if (argonConfig.waterflow_columns != "1") { $("#post_comment_send .btn-inner--icon.hide-on-comment-editing").html(""); $("#post_comment_send .btn-inner--text.hide-on-comment-editing").html(__("发送")); $("#post_comment").removeClass("show-extra-input post-comment-force-privatemode-on post-comment-force-privatemode-off"); - if (!result.isAdmin){ + if (!result.isAdmin) { $("#post_comment_captcha").removeAttr("disabled"); } @@ -1770,11 +1780,11 @@ if (argonConfig.waterflow_columns != "1") { $("#geetest_gen_time").val(""); // 重置 Geetest 实例,确保下一次生成新的pass_token if (window.geetestCaptcha) { - try { window.geetestCaptcha.reset(); } catch (e) {} + try { window.geetestCaptcha.reset(); } catch (e) { } } // 安全地处理iziToast 操作,防止time 属性错误 - setTimeout(function() { + setTimeout(function () { try { iziToast.destroy(); iziToast.show({ @@ -1799,15 +1809,15 @@ if (argonConfig.waterflow_columns != "1") { }); } //编辑评论 - function editComment(){ + function editComment() { let commentContent = $("#post_comment_content").val(); let isError = false; let errorMsg = ""; - if (commentContent.match(/^\s*$/)){ + if (commentContent.match(/^\s*$/)) { isError = true; errorMsg += __("评论内容不能为空") + "
    "; } - if (isError){ + if (isError) { iziToast.show({ title: __("评论格式错误"), message: errorMsg, @@ -1825,9 +1835,9 @@ if (argonConfig.waterflow_columns != "1") { } //增加 disabled 属性和其他的表单提交 - $("#post_comment_content").attr("disabled","disabled"); - $("#post_comment_send").attr("disabled","disabled"); - $("#post_comment_edit_cancel").attr("disabled","disabled"); + $("#post_comment_content").attr("disabled", "disabled"); + $("#post_comment_send").attr("disabled", "disabled"); + $("#post_comment_edit_cancel").attr("disabled", "disabled"); $("#post_comment_send .btn-inner--icon.hide-on-comment-not-editing").html(""); $("#post_comment_send .btn-inner--text.hide-on-comment-not-editing").html(__("编辑中")); @@ -1849,13 +1859,13 @@ if (argonConfig.waterflow_columns != "1") { $.ajax({ type: 'POST', url: argonConfig.wp_path + "wp-admin/admin-ajax.php", - dataType : "json", + dataType: "json", data: { action: "user_edit_comment", comment: commentContent, id: editID }, - success: function(result){ + success: function (result) { $("#post_comment_content").removeAttr("disabled"); $("#post_comment_send").removeAttr("disabled"); $("#post_comment_edit_cancel").removeAttr("disabled"); @@ -1863,7 +1873,7 @@ if (argonConfig.waterflow_columns != "1") { $("#post_comment_send .btn-inner--text.hide-on-comment-not-editing").html(__("编辑")); //判断是否有错误 - if (result.status == "failed"){ + if (result.status == "failed") { iziToast.destroy(); iziToast.show({ title: __("评论编辑失败"), @@ -1882,13 +1892,13 @@ if (argonConfig.waterflow_columns != "1") { } //发送成功,替换原评论 - result.new_comment = result.new_comment.replace(/<(\/).noscript>/g, ""); + result.new_comment = result.new_comment.replace(/<(\/).noscript>/g, ""); $("#comment-" + editID + " .comment-item-text").html(result.new_comment); $("#comment-" + editID + " .comment-item-source").html(result.new_comment_source); - if ($("#comment-" + editID + " .comment-info .comment-edited").length == 0){ + if ($("#comment-" + editID + " .comment-info .comment-edited").length == 0) { $("#comment-" + editID + " .comment-info").prepend("
    " + __("已编辑") + "
    ") } - if (result.can_visit_edit_history){ + if (result.can_visit_edit_history) { $("#comment-" + editID + " .comment-info .comment-edited").addClass("comment-edithistory-accessible"); } @@ -1915,13 +1925,13 @@ if (argonConfig.waterflow_columns != "1") { $('#post_comment').removeClass("editing post-comment-force-privatemode-on post-comment-force-privatemode-off"); $("#post_comment_content").trigger("change"); }, - error: function(result){ + error: function (result) { $("#post_comment_content").removeAttr("disabled"); $("#post_comment_send").removeAttr("disabled"); $("#post_comment_edit_cancel").removeAttr("disabled"); $("#post_comment_send .btn-inner--icon.hide-on-comment-not-editing").html(""); $("#post_comment_send .btn-inner--text.hide-on-comment-not-editing").html(__("编辑")); - if (result.readyState != 4 || result.status == 0){ + if (result.readyState != 4 || result.status == 0) { iziToast.destroy(); iziToast.show({ title: __("评论编辑失败"), @@ -1941,62 +1951,62 @@ if (argonConfig.waterflow_columns != "1") { } }); } - $(document).on("click" , "#post_comment_send" , function(){ - if ($("#post_comment").hasClass("editing")){ + $(document).on("click", "#post_comment_send", function () { + if ($("#post_comment").hasClass("editing")) { editComment(); - }else{ + } else { // 首先进行基本的表单验证 let commentContent = $("#post_comment_content").val(); let commentName = $("#post_comment_name").val(); let commentEmail = $("#post_comment_email").val(); let commentLink = $("#post_comment_link").val(); - + let isError = false; let errorMsg = ""; // 检查表单合法性 - if (commentContent.match(/^\s*$/)){ + if (commentContent.match(/^\s*$/)) { isError = true; errorMsg += __("评论内容不能为空") + "
    "; } - if (!$("#post_comment").hasClass("no-need-name-email")){ - if (commentName.match(/^\s*$/)){ + if (!$("#post_comment").hasClass("no-need-name-email")) { + if (commentName.match(/^\s*$/)) { isError = true; errorMsg += __("昵称不能为空") + "
    "; } - if ($("#post_comment").hasClass("enable-qq-avatar")){ - if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail) && !(/^[1-9][0-9]{4,10}$/).test(commentEmail)){ + if ($("#post_comment").hasClass("enable-qq-avatar")) { + if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail) && !(/^[1-9][0-9]{4,10}$/).test(commentEmail)) { isError = true; errorMsg += __("邮箱或QQ 号格式错误") + "
    "; } - }else{ - if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail)){ + } else { + if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail)) { isError = true; errorMsg += __("邮箱格式错误") + "
    "; } } - }else{ - if (commentEmail.length || (document.getElementById("comment_post_mailnotice") != null && document.getElementById("comment_post_mailnotice").checked == true)){ - if ($("#post_comment").hasClass("enable-qq-avatar")){ - if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail) && !(/^[1-9][0-9]{4,10}$/).test(commentEmail)){ + } else { + if (commentEmail.length || (document.getElementById("comment_post_mailnotice") != null && document.getElementById("comment_post_mailnotice").checked == true)) { + if ($("#post_comment").hasClass("enable-qq-avatar")) { + if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail) && !(/^[1-9][0-9]{4,10}$/).test(commentEmail)) { isError = true; errorMsg += __("邮箱或QQ 号格式错误") + "
    "; } - }else{ - if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail)){ + } else { + if (!(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(commentEmail)) { isError = true; errorMsg += __("邮箱格式错误") + "
    "; } } } } - if (commentLink != "" && !(/https?:\/\//).test(commentLink)){ + if (commentLink != "" && !(/https?:\/\//).test(commentLink)) { isError = true; errorMsg += __("网站格式错误 (不是 http(s):// 开头") + "
    "; } - + // 如果基本表单验证失败,显示错误信息并返回 - if (isError){ + if (isError) { // 确保按钮和表单元素处于可用状态 $("#post_comment_send").removeAttr("disabled"); $("#post_comment_content").removeAttr("disabled"); @@ -2008,7 +2018,7 @@ if (argonConfig.waterflow_columns != "1") { $("#post_comment").removeClass("sending"); $("#post_comment_send .btn-inner--icon.hide-on-comment-editing").html(""); $("#post_comment_send .btn-inner--text.hide-on-comment-editing").html(__("发送")); - + iziToast.show({ title: __("评论格式错误"), message: errorMsg, @@ -2024,29 +2034,29 @@ if (argonConfig.waterflow_columns != "1") { }); return; } - + // 基本验证通过后,检查验证码 if ($("#geetest-captcha").length > 0) { // 检查Geetest 库是否加载失败 if (window.geetestLoadFailed) { if (typeof loadGeetestScript === 'function' && typeof initGeetestCaptchaCore === 'function') { try { - loadGeetestScript(function(){ + loadGeetestScript(function () { initGeetestCaptchaCore(); - setTimeout(function(){ - if (window.geetestCaptcha) { try { window.geetestCaptcha.showBox(); } catch(e){} } + setTimeout(function () { + if (window.geetestCaptcha) { try { window.geetestCaptcha.showBox(); } catch (e) { } } }, 0); }); - } catch(e) {} + } catch (e) { } } return; } - + // 如果正在自动提交中,防止重复点击 if (window.geetestAutoSubmitting) { return; } - + // 如果使用Geetest,检查验证码是否已完成 if (!window.geetestVerified) { // 验证码未完成,触发验证码显示 @@ -2058,13 +2068,13 @@ if (argonConfig.waterflow_columns != "1") { } else { if (typeof loadGeetestScript === 'function' && typeof initGeetestCaptchaCore === 'function') { try { - loadGeetestScript(function(){ + loadGeetestScript(function () { initGeetestCaptchaCore(); - setTimeout(function(){ - if (window.geetestCaptcha) { try { window.geetestCaptcha.showBox(); } catch(e){} } + setTimeout(function () { + if (window.geetestCaptcha) { try { window.geetestCaptcha.showBox(); } catch (e) { } } }, 0); }); - } catch(e) {} + } catch (e) { } } } return; @@ -2076,15 +2086,15 @@ if (argonConfig.waterflow_columns != "1") { }); }(); /*评论点赞*/ -$(document).on('click', '.comment-upvote', function(){ +$(document).on('click', '.comment-upvote', function () { let $this = $(this); let ID = $this.attr('data-id'); - + // 防止重复点击 if ($this.hasClass('comment-upvoting')) { return; } - + $this.addClass('comment-upvoting'); $.ajax({ url: argonConfig.wp_path + 'wp-admin/admin-ajax.php', @@ -2094,9 +2104,9 @@ $(document).on('click', '.comment-upvote', function(){ action: 'upvote_comment', comment_id: ID, }, - success: function(result){ + success: function (result) { $this.removeClass('comment-upvoting'); - if (result.status === 'success'){ + if (result.status === 'success') { $('.comment-upvote-num', $this).html(result.total_upvote); if (result.upvoted) { $this.addClass('upvoted'); @@ -2119,7 +2129,7 @@ $(document).on('click', '.comment-upvote', function(){ }); } }, - error: function(xhr){ + error: function (xhr) { $this.removeClass('comment-upvoting'); iziToast.show({ title: __('点赞失败'), @@ -2137,30 +2147,30 @@ $(document).on('click', '.comment-upvote', function(){ }); }); /*评论表情面板*/ -function lazyloadStickers(){ +function lazyloadStickers() { // 原生懒加载无需额外处理 } -$(document).on("click" , "#comment_emotion_btn" , function(){ +$(document).on("click", "#comment_emotion_btn", function () { $("#comment_emotion_btn").toggleClass("comment-emotion-keyboard-open"); }); -$(document).on("click" , ".emotion-keyboard .emotion-group-name" , function(){ +$(document).on("click", ".emotion-keyboard .emotion-group-name", function () { $(".emotion-keyboard .emotion-group-name.active").removeClass("active"); $(this).addClass("active"); $(".emotion-keyboard .emotion-group:not(d-none)").addClass("d-none"); $(".emotion-keyboard .emotion-group[index='" + $(this).attr("index") + "']").removeClass("d-none"); }); -function inputInsertText(text, input){ +function inputInsertText(text, input) { $(input).focus(); let isSuccess = document.execCommand("insertText", false, text); if (!isSuccess) { //FF - if (typeof input.setRangeText === "function"){ + if (typeof input.setRangeText === "function") { const start = input.selectionStart; input.setRangeText(text); input.selectionStart = input.selectionEnd = start + input.length; const e = document.createEvent("UIEvent"); e.initEvent("input", true, false); input.dispatchEvent(e); - }else{ + } else { let value = $(input).val(); let startPos = input.selectionStart, endPos = input.selectionEnd; $(input).val(value.substring(0, startPos) + text + value.substring(endPos)); @@ -2170,27 +2180,27 @@ function inputInsertText(text, input){ } $(input).focus(); } -$(document).on("click" , ".emotion-keyboard .emotion-item" , function(){ +$(document).on("click", ".emotion-keyboard .emotion-item", function () { $("#comment_emotion_btn").removeClass("comment-emotion-keyboard-open"); - if ($(this).hasClass("emotion-item-sticker")){ + if ($(this).hasClass("emotion-item-sticker")) { inputInsertText(" :" + $(this).attr("code") + ": ", document.getElementById("post_comment_content")); - }else{ + } else { inputInsertText($(this).attr("text"), document.getElementById("post_comment_content")); } }); -$(document).on("dragstart" , ".emotion-keyboard .emotion-item > img, .comment-sticker" , function(e){ +$(document).on("dragstart", ".emotion-keyboard .emotion-item > img, .comment-sticker", function (e) { e.preventDefault(); }); document.addEventListener('click', (e) => { - if (document.getElementById("comment_emotion_btn") == null){ + if (document.getElementById("comment_emotion_btn") == null) { return; } -  if(e.target.id != "comment_emotion_btn" && e.target.id != "emotion_keyboard" && !document.getElementById("comment_emotion_btn").contains(e.target) && !document.getElementById("emotion_keyboard").contains(e.target)){ + if (e.target.id != "comment_emotion_btn" && e.target.id != "emotion_keyboard" && !document.getElementById("comment_emotion_btn").contains(e.target) && !document.getElementById("emotion_keyboard").contains(e.target)) { $("#comment_emotion_btn").removeClass("comment-emotion-keyboard-open"); -  } + } }) /*查看评论编辑记录*/ -function showCommentEditHistory(id){ +function showCommentEditHistory(id) { let requestID = parseInt(new Date().getTime()); $("#comment_edit_history").data("request-id", requestID); $("#comment_edit_history .modal-title").html(__("评论 #") + id + " " + __("的编辑记录")); @@ -2199,21 +2209,21 @@ function showCommentEditHistory(id){ $.ajax({ type: 'POST', url: argonConfig.wp_path + "wp-admin/admin-ajax.php", - dataType : "json", + dataType: "json", data: { action: "get_comment_edit_history", id: id }, - success: function(result){ - if ($("#comment_edit_history").data("request-id") != requestID){ + success: function (result) { + if ($("#comment_edit_history").data("request-id") != requestID) { return; } $("#comment_edit_history .modal-body").hide(); $("#comment_edit_history .modal-body").html(result.history); $("#comment_edit_history .modal-body").fadeIn(300); }, - error: function(result){ - if ($("#comment_edit_history").data("request-id") != requestID){ + error: function (result) { + if ($("#comment_edit_history").data("request-id") != requestID) { return; } $("#comment_edit_history .modal-body").hide(); @@ -2222,75 +2232,75 @@ function showCommentEditHistory(id){ } }); } -$(document).on("click" , ".comment-edited.comment-edithistory-accessible" , function(){ +$(document).on("click", ".comment-edited.comment-edithistory-accessible", function () { showCommentEditHistory($(this).parent().parent().parent().parent().data("id")); }); /*过长评论折叠*/ -function foldLongComments(){ - if (argonConfig.fold_long_comments == false){ +function foldLongComments() { + if (argonConfig.fold_long_comments == false) { return; } - $(".comment-item-inner").each(function(){ - if ($(this).hasClass("comment-unfolded")){ + $(".comment-item-inner").each(function () { + if ($(this).hasClass("comment-unfolded")) { return; } - if (this.clientHeight > 800){ + if (this.clientHeight > 800) { $(this).addClass("comment-folded"); $(this).append("
    "); } }); } foldLongComments(); -$(document).on("click" , ".show-full-comment" , function(){ +$(document).on("click", ".show-full-comment", function () { $(this).parent().removeClass("comment-folded").addClass("comment-unfolded"); }); /*评论文字头像*/ -function generateCommentTextAvatar(img){ +function generateCommentTextAvatar(img) { let emailHash = ''; - try{ + try { emailHash = img.attr("src").match(/([a-f\d]{32}|[A-F\d]{32})/)[0]; - }catch{ + } catch { emailHash = img.parent().parent().parent().find(".comment-name").text().trim(); - if (emailHash == '' || emailHash == undefined){ + if (emailHash == '' || emailHash == undefined) { emailHash = img.parent().find("*[class*='comment-author']").text().trim(); } } let hash = 0; - for (i in emailHash){ + for (i in emailHash) { hash = (hash * 233 + emailHash.charCodeAt(i)) % 16; } let colors = ['#e25f50', '#f25e90', '#bc67cb', '#9672cf', '#7984ce', '#5c96fa', '#7bdeeb', '#45d0e2', '#48b7ad', '#52bc89', '#9ace5f', '#d4e34a', '#f9d715', '#fac400', '#ffaa00', '#ff8b61', '#c2c2c2', '#8ea3af', '#a1877d', '#a3a3a3', '#b0b6e3', '#b49cde', '#c2c2c2', '#7bdeeb', '#bcaaa4', '#aed77f']; let text = $(".comment-name", img.parent().parent().parent()).text().trim()[0]; - if (text == '' || text == undefined){ + if (text == '' || text == undefined) { text = img.parent().find("*[class*='comment-author']").text().trim()[0]; } let classList = img.attr('class') + " text-avatar"; img.prop('outerHTML', '
    ' + text + '
    '); } -document.addEventListener("error", function(e){ +document.addEventListener("error", function (e) { let img = $(e.target); - if (!img.hasClass("avatar")){ + if (!img.hasClass("avatar")) { return; } generateCommentTextAvatar(img); }, true); -function refreshCommentTextAvatar(){ - $(".comment-item-avatar > img.avatar").each(function(index, img){ - if (!img.complete){ +function refreshCommentTextAvatar() { + $(".comment-item-avatar > img.avatar").each(function (index, img) { + if (!img.complete) { return; } - if (img.naturalWidth !== 0){ + if (img.naturalWidth !== 0) { return false; } generateCommentTextAvatar($(img)); }); } refreshCommentTextAvatar(); -$(window).on("load", function(){ +$(window).on("load", function () { refreshCommentTextAvatar(); }); /*需要密码的文章加载*/ -$(document).on("submit" , ".post-password-form" , function(){ +$(document).on("submit", ".post-password-form", function () { $("input[type='submit']", this).attr("disabled", "disabled"); let url = $(this).attr("action"); $.pjax.form(this, { @@ -2300,16 +2310,16 @@ $(document).on("submit" , ".post-password-form" , function(){ return false; }); /*评论分页加载*/ -!function(){ - $(document).on("click" , "#comments_navigation .page-item > div" , function(){ +!function () { + $(document).on("click", "#comments_navigation .page-item > div", function () { $("#comments").addClass("comments-loading"); NProgress.set(0.618); url = $(this).attr("href"); $.ajax({ type: 'POST', url: url, - dataType : "html", - success : function(result){ + dataType: "html", + success: function (result) { NProgress.done(); $vdom = $(result); $("#comments").html($("#comments", $vdom).html()); @@ -2321,12 +2331,12 @@ $(document).on("submit" , ".post-password-form" , function(){ calcHumanTimesOnPage(); panguInit(); }, - error : function(){ + error: function () { window.location.href = url; } }); }); - $(document).on("click" , "#comments_more" , function(){ + $(document).on("click", "#comments_more", function () { $("#comments_more").attr("disabled", "disabled"); NProgress.set(0.618); url = $(this).attr("href"); @@ -2336,15 +2346,15 @@ $(document).on("submit" , ".post-password-form" , function(){ data: { no_post_view: 'true' }, - dataType : "html", - success : function(result){ + dataType: "html", + success: function (result) { NProgress.done(); $vdom = $(result); $("#comments > .card-body > ol.comment-list").append($("#comments > .card-body > ol.comment-list", $vdom).html()); - if ($("#comments_more", $vdom).length == 0){ + if ($("#comments_more", $vdom).length == 0) { $("#comments_more").remove(); $(".comments-navigation-more").html("
    " + __("没有更多了") + "
    "); - }else{ + } else { $("#comments_more").attr("href", $("#comments_more", $vdom).attr("href")); $("#comments_more").removeAttr("disabled"); } @@ -2352,7 +2362,7 @@ $(document).on("submit" , ".post-password-form" , function(){ calcHumanTimesOnPage(); panguInit(); }, - error : function(){ + error: function () { window.location.href = url; } }); @@ -2360,8 +2370,8 @@ $(document).on("submit" , ".post-password-form" , function(){ }(); /*URL 和# 根据 ID 定位*/ -function gotoHash(hash, durtion, easing = 'easeOutExpo'){ - if (!hash || hash === "#"){ +function gotoHash(hash, durtion, easing = 'easeOutExpo') { + if (!hash || hash === "#") { return; } var target = null; @@ -2381,29 +2391,29 @@ function gotoHash(hash, durtion, easing = 'easeOutExpo'){ return; } } - if (!target){ + if (!target) { return; } - if (durtion == null){ + if (durtion == null) { durtion = 200; } $("body,html").stop().animate({ scrollTop: $(target).offset().top - 80 }, durtion, easing); } -function getHash(url){ +function getHash(url) { return url.substring(url.indexOf('#')); } -!function(){ - $(window).on("hashchange" , function(){ +!function () { + $(window).on("hashchange", function () { gotoHash(window.location.hash); }); $(window).trigger("hashchange"); }(); /*显示文章过时信息 Toast*/ -function showPostOutdateToast(){ - if ($("#primary #post_outdate_toast").length > 0){ +function showPostOutdateToast() { + if ($("#primary #post_outdate_toast").length > 0) { iziToast.show({ title: '', message: $("#primary #post_outdate_toast").data("text"), @@ -2427,24 +2437,24 @@ showPostOutdateToast(); // 全局 Zoomify 实例数组,用于清理 var zoomifyInstances = []; -function zoomifyInit(){ +function zoomifyInit() { // 清理旧的 Zoomify 实例 if (zoomifyInstances.length > 0) { - zoomifyInstances.forEach(function(instance) { + zoomifyInstances.forEach(function (instance) { try { if (instance && typeof instance.destroy === 'function') { instance.destroy(); } - } catch(e) {} + } catch (e) { } }); zoomifyInstances = []; } - - if (argonConfig.zoomify == false){ + + if (argonConfig.zoomify == false) { return; } if (typeof $.fn.zoomify === 'function') { - $("article img:not(.zoomify-initialized)").each(function() { + $("article img:not(.zoomify-initialized)").each(function () { let $img = $(this); $img.addClass('zoomify-initialized'); try { @@ -2452,7 +2462,7 @@ function zoomifyInit(){ if (instance) { zoomifyInstances.push(instance); } - } catch(e) {} + } catch (e) { } }); } } @@ -2512,12 +2522,12 @@ function lazyloadInit() { lazyloadObserver.disconnect(); lazyloadObserver = null; ArgonDebug.log('清理旧的 Lazyload Observer'); - } catch(e) { + } catch (e) { ArgonDebug.warn('清理 Lazyload Observer 失败:', e); lazyloadObserver = null; } } - + // 清理旧的滚动监听器(降级方案) if (lazyloadScrollHandler) { try { @@ -2525,35 +2535,35 @@ function lazyloadInit() { window.removeEventListener('resize', lazyloadScrollHandler); lazyloadScrollHandler = null; ArgonDebug.log('清理旧的滚动监听器'); - } catch(e) { + } catch (e) { ArgonDebug.warn('清理滚动监听器失败:', e); lazyloadScrollHandler = null; } } - + // 检查是否启用懒加载 if (argonConfig.lazyload === false || argonConfig.lazyload === 'false') { // 未启用懒加载时,直接加载所有图片 loadAllImagesImmediately(); return; } - + let images = document.querySelectorAll('img.lazyload[data-src]'); if (images.length === 0) { ArgonDebug.log('没有需要懒加载的图片'); return; } - + let effect = argonConfig.lazyload_effect || 'fadeIn'; let threshold = parseInt(argonConfig.lazyload_threshold) || 800; - + ArgonDebug.log(`初始化懒加载: ${images.length} 张图片, 效果: ${effect}, 阈值: ${threshold}px`); - + // 使用 IntersectionObserver 实现懒加载 if ('IntersectionObserver' in window) { try { - lazyloadObserver = new IntersectionObserver(function(entries) { - entries.forEach(function(entry) { + lazyloadObserver = new IntersectionObserver(function (entries) { + entries.forEach(function (entry) { if (entry.isIntersecting) { let img = entry.target; loadImageOptimized(img, effect); @@ -2563,17 +2573,17 @@ function lazyloadInit() { }, { rootMargin: threshold + 'px 0px' }); - - images.forEach(function(img) { + + images.forEach(function (img) { // 重置图片状态 img.style.opacity = ''; img.style.transform = ''; img.style.transition = ''; lazyloadObserver.observe(img); }); - + ArgonDebug.log('使用 IntersectionObserver 实现懒加载'); - } catch(e) { + } catch (e) { ArgonDebug.error('IntersectionObserver 初始化失败,使用降级方案:', e); lazyloadFallback(images, effect, threshold); } @@ -2599,12 +2609,12 @@ function loadImageOptimized(img, effect) { } return; } - + // 预加载图片 let tempImg = new Image(); - tempImg.onload = function() { + tempImg.onload = function () { // 使用 requestAnimationFrame 优化 DOM 操作 - requestAnimationFrame(function() { + requestAnimationFrame(function () { img.src = src; img.removeAttribute('data-src'); let srcset = img.getAttribute('data-srcset'); @@ -2618,17 +2628,17 @@ function loadImageOptimized(img, effect) { img.removeAttribute('data-sizes'); } img.classList.remove('lazyload'); - + // 移除所有lazyload-style-* 类 img.className = img.className.replace(/\blazyload-style-\d+\b/g, '').trim(); - + // 应用加载效果 applyLoadEffectOptimized(img, effect); }); }; - tempImg.onerror = function() { + tempImg.onerror = function () { // 加载失败时使用降级方案 - requestAnimationFrame(function() { + requestAnimationFrame(function () { img.src = src; img.removeAttribute('data-src'); let srcset = img.getAttribute('data-srcset'); @@ -2643,7 +2653,7 @@ function loadImageOptimized(img, effect) { } img.classList.remove('lazyload'); img.className = img.className.replace(/\blazyload-style-\d+\b/g, '').trim(); - + // 取消 Observer 监听 if (lazyloadObserver) { lazyloadObserver.unobserve(img); @@ -2662,8 +2672,8 @@ function applyLoadEffectOptimized(img, effect) { if (effect === 'fadeIn') { img.style.opacity = '0'; img.style.transition = 'opacity 0.3s ease'; - requestAnimationFrame(function() { - requestAnimationFrame(function() { + requestAnimationFrame(function () { + requestAnimationFrame(function () { img.style.opacity = '1'; }); }); @@ -2671,13 +2681,13 @@ function applyLoadEffectOptimized(img, effect) { img.addEventListener('transitionend', function cleanup() { img.style.transition = ''; img.removeEventListener('transitionend', cleanup); - }, {once: true}); + }, { once: true }); } else if (effect === 'slideDown') { img.style.opacity = '0'; img.style.transform = 'translateY(-20px)'; img.style.transition = 'opacity 0.3s ease, transform 0.3s ease'; - requestAnimationFrame(function() { - requestAnimationFrame(function() { + requestAnimationFrame(function () { + requestAnimationFrame(function () { img.style.opacity = '1'; img.style.transform = 'translateY(0)'; }); @@ -2687,7 +2697,7 @@ function applyLoadEffectOptimized(img, effect) { img.style.transition = ''; img.style.transform = ''; img.removeEventListener('transitionend', cleanup); - }, {once: true}); + }, { once: true }); } } @@ -2700,21 +2710,21 @@ function applyLoadEffectOptimized(img, effect) { */ function lazyloadFallback(images, effect, threshold) { let loadedImages = new Set(); - + function checkImagesInView() { let viewportHeight = window.innerHeight; let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; - - images.forEach(function(img) { + + images.forEach(function (img) { if (loadedImages.has(img)) return; - + let rect = img.getBoundingClientRect(); if (rect.top < viewportHeight + threshold && rect.bottom > -threshold) { loadImageOptimized(img, effect); loadedImages.add(img); } }); - + // 如果所有图片都已加载,清理监听器 if (loadedImages.size === images.length) { if (lazyloadScrollHandler) { @@ -2725,16 +2735,16 @@ function lazyloadFallback(images, effect, threshold) { } } } - + // 使用 eventManager 的节流函数优化性能 - lazyloadScrollHandler = argonEventManager ? - argonEventManager.throttle(checkImagesInView, 100) : + lazyloadScrollHandler = argonEventManager ? + argonEventManager.throttle(checkImagesInView, 100) : checkImagesInView; - + // 绑定事件监听器 - window.addEventListener('scroll', lazyloadScrollHandler, {passive: true}); - window.addEventListener('resize', lazyloadScrollHandler, {passive: true}); - + window.addEventListener('scroll', lazyloadScrollHandler, { passive: true }); + window.addEventListener('resize', lazyloadScrollHandler, { passive: true }); + // 立即检查一次 checkImagesInView(); } @@ -2745,7 +2755,7 @@ function lazyloadFallback(images, effect, threshold) { */ function loadAllImagesImmediately() { let images = document.querySelectorAll('img.lazyload[data-src]'); - images.forEach(function(img) { + images.forEach(function (img) { let src = img.getAttribute('data-src'); if (src) { img.src = src; @@ -2775,34 +2785,34 @@ if (document.readyState === 'loading') { } /*Pangu.js*/ -function panguInit(){ - if (argonConfig.pangu.indexOf("article") >= 0){ +function panguInit() { + if (argonConfig.pangu.indexOf("article") >= 0) { pangu.spacingElementByClassName('post-content'); } - if (argonConfig.pangu.indexOf("comment") >= 0){ + if (argonConfig.pangu.indexOf("comment") >= 0) { pangu.spacingElementById('comments'); } - if (argonConfig.pangu.indexOf("shuoshuo") >= 0){ + if (argonConfig.pangu.indexOf("shuoshuo") >= 0) { pangu.spacingElementByClassName('shuoshuo-content'); } } panguInit(); /*Clamp.js*/ -function clampInit(){ - $(".clamp").each(function(index, dom) { - $clamp(dom, {clamp: dom.getAttribute("clamp-line")}); +function clampInit() { + $(".clamp").each(function (index, dom) { + $clamp(dom, { clamp: dom.getAttribute("clamp-line") }); }); } clampInit(); /*Tippy.js*/ -function tippyInit(){ +function tippyInit() { //Reference Popover tippy('sup.reference[data-content]:not(.tippy-initialized)', { content: (reference) => reference.getAttribute('data-content'), allowHTML: true, - interactive: true,theme: 'light scroll-y', + interactive: true, theme: 'light scroll-y', delay: [100, 250], animation: 'fade' }); @@ -2811,50 +2821,50 @@ function tippyInit(){ tippyInit(); /*Banner 全屏封面相关*/ -if ($("html").hasClass("banner-as-cover")){ - function classInit(){ - if ($("#main").hasClass("article-list-home")){ - if (!$("html").hasClass("is-home")){ +if ($("html").hasClass("banner-as-cover")) { + function classInit() { + if ($("#main").hasClass("article-list-home")) { + if (!$("html").hasClass("is-home")) { $("html").addClass("is-home"); $("html").trigger("resize"); } - }else{ - if ($("html").hasClass("is-home")){ + } else { + if ($("html").hasClass("is-home")) { $("html").removeClass("is-home"); $("html").trigger("resize"); } } } classInit(); - new MutationObserver(function(mutations, observer){ + new MutationObserver(function (mutations, observer) { classInit(); }).observe(document.querySelector("#primary"), { 'childList': true }); - $(".cover-scroll-down").on("click" , function(){ + $(".cover-scroll-down").on("click", function () { gotoHash("#content", 600, 'easeOutCirc'); $("#content").focus(); }); $fabs = $("#float_action_buttons"); $coverScrollDownBtn = $(".cover-scroll-down"); - function changeWidgetsDisplayStatus(){ + function changeWidgetsDisplayStatus() { let scrollTop = $(window).scrollTop(); - if (scrollTop >= window.outerHeight * 0.2){ + if (scrollTop >= window.outerHeight * 0.2) { $fabs.removeClass("hidden"); - }else{ + } else { $fabs.addClass("hidden"); } - if (scrollTop >= window.outerHeight * 0.6){ + if (scrollTop >= window.outerHeight * 0.6) { $coverScrollDownBtn.addClass("hidden"); - }else{ + } else { $coverScrollDownBtn.removeClass("hidden"); } } changeWidgetsDisplayStatus(); - $(window).scroll(function(){ + $(window).scroll(function () { changeWidgetsDisplayStatus(); }); - $(window).resize(function(){ + $(window).resize(function () { changeWidgetsDisplayStatus(); }); } @@ -2880,12 +2890,12 @@ function cleanupLazyloadObserver() { lazyloadObserver.disconnect(); lazyloadObserver = null; ArgonDebug.log('Lazyload Observer 已清理'); - } catch(e) { + } catch (e) { ArgonDebug.warn('清理 Lazyload Observer 失败:', e); lazyloadObserver = null; } } - + // 清理滚动监听器(降级方案) if (lazyloadScrollHandler) { try { @@ -2893,7 +2903,7 @@ function cleanupLazyloadObserver() { window.removeEventListener('resize', lazyloadScrollHandler); lazyloadScrollHandler = null; ArgonDebug.log('Lazyload 滚动监听器已清理'); - } catch(e) { + } catch (e) { ArgonDebug.warn('清理 Lazyload 滚动监听器失败:', e); lazyloadScrollHandler = null; } @@ -2907,13 +2917,13 @@ function cleanupLazyloadObserver() { function cleanupZoomifyInstances() { if (zoomifyInstances && zoomifyInstances.length > 0) { let cleanedCount = 0; - zoomifyInstances.forEach(function(instance) { + zoomifyInstances.forEach(function (instance) { try { if (instance && typeof instance.destroy === 'function') { instance.destroy(); cleanedCount++; } - } catch(e) { + } catch (e) { ArgonDebug.warn('销毁 Zoomify 实例失败:', e); } }); @@ -2931,13 +2941,13 @@ function cleanupZoomifyInstances() { function cleanupTippyInstances() { if (typeof tippy !== 'undefined') { let cleanedCount = 0; - document.querySelectorAll('[data-tippy-root]').forEach(function(el) { + document.querySelectorAll('[data-tippy-root]').forEach(function (el) { try { if (el._tippy && typeof el._tippy.destroy === 'function') { el._tippy.destroy(); cleanedCount++; } - } catch(e) { + } catch (e) { ArgonDebug.warn('销毁 Tippy 实例失败:', e); } }); @@ -2958,12 +2968,12 @@ function cleanupDynamicStyles() { // 只清理标记为动态的样式 const dynamicStyles = document.querySelectorAll('style[data-dynamic="true"]'); if (dynamicStyles.length > 0) { - dynamicStyles.forEach(function(style) { + dynamicStyles.forEach(function (style) { style.remove(); }); ArgonDebug.log(`已清理 ${dynamicStyles.length} 个动态样式`); } - } catch(e) { + } catch (e) { ArgonDebug.warn('清理动态样式失败:', e); } } @@ -2977,12 +2987,12 @@ function cleanupDynamicScripts() { // 只清理标记为动态的脚本 const dynamicScripts = document.querySelectorAll('script[data-dynamic="true"]'); if (dynamicScripts.length > 0) { - dynamicScripts.forEach(function(script) { + dynamicScripts.forEach(function (script) { script.remove(); }); ArgonDebug.log(`已清理 ${dynamicScripts.length} 个动态脚本`); } - } catch(e) { + } catch (e) { ArgonDebug.warn('清理动态脚本失败:', e); } } @@ -2995,11 +3005,11 @@ function cleanupEventListeners() { try { // 注意:大部分事件使用事件委托,不需要手动清理 // 这里只清理特定的非委托事件 - + // Lazyload 滚动监听器已在 cleanupLazyloadObserver() 中清理 - + ArgonDebug.log('事件监听器已清理'); - } catch(e) { + } catch (e) { ArgonDebug.warn('清理事件监听器失败:', e); } } @@ -3020,14 +3030,14 @@ function cleanupEventListeners() { */ function cleanupPjaxResources() { ArgonDebug.log('开始清理 PJAX 资源...'); - + // 按顺序清理各类资源 cleanupLazyloadObserver(); cleanupZoomifyInstances(); - cleanupTippyInstances(); cleanupDynamicStyles(); + cleanupTippyInstances(); cleanupDynamicStyles(); cleanupDynamicScripts(); cleanupEventListeners(); - + ArgonDebug.log('PJAX 资源清理完成'); } @@ -3042,21 +3052,21 @@ function resetGT4Captcha() { // 重置前端状态,避免重复提交阻塞 window.geetestVerified = false; window.geetestAutoSubmitting = false; - + // 清空隐藏字段,防止残留导致pass_token 复用 $('#geetest_lot_number').val(''); $('#geetest_captcha_output').val(''); $('#geetest_pass_token').val(''); $('#geetest_gen_time').val(''); - + // 清空容器,防止重复appendTo 导致多个实例 $('#geetest-captcha').empty(); - + // 若页面脚本已提供初始化方法,则调用以加载验证码 if (typeof initGeetestCaptcha === 'function') { initGeetestCaptcha(); } else if (typeof loadGeetestScript === 'function' && typeof initGeetestCaptchaCore === 'function') { - loadGeetestScript(function() { + loadGeetestScript(function () { initGeetestCaptchaCore(); }); } @@ -3098,24 +3108,24 @@ function executeScript(oldScript) { try { // 创建新的 script 元素 const newScript = document.createElement('script'); - + // 复制脚本内容 if (oldScript.textContent) { newScript.textContent = oldScript.textContent; } - + // 复制所有属性(包括 type, async, defer 等) // 需求 4.5: 尊重 async 和 defer 属性的执行时机 Array.from(oldScript.attributes).forEach(attr => { newScript.setAttribute(attr.name, attr.value); }); - + // 将脚本添加到 head 并立即执行 document.head.appendChild(newScript); - + // 执行后立即移除,避免污染 DOM document.head.removeChild(newScript); - + ArgonDebug.log('Script executed successfully:', oldScript.textContent.substring(0, 50) + '...'); return true; } catch (error) { @@ -3141,20 +3151,20 @@ function executeInlineScripts(container) { if (!container) { container = document; } - + // 需求 4.1: 提取所有 script 标签 const scripts = container.querySelectorAll('script'); - + if (scripts.length === 0) { ArgonDebug.log('No scripts found in new page'); - return {total: 0, success: 0, failed: 0}; + return { total: 0, success: 0, failed: 0 }; } - + let successCount = 0; let failedCount = 0; - + ArgonDebug.log(`Found ${scripts.length} script tags in new page`); - + // 需求 4.3: 按照脚本在 DOM 中的顺序执行 scripts.forEach((script, index) => { if (script.getAttribute('data-pjax-executed') === 'true') { @@ -3167,9 +3177,9 @@ function executeInlineScripts(container) { ArgonDebug.log(`Script ${index + 1}: Empty, skipped`); return; } - + ArgonDebug.log(`Executing inline script ${index + 1}/${scripts.length}`); - + // 需求 4.4: 错误隔离 - 单个脚本失败不影响其他脚本 const success = executeScript(script); if (success) { @@ -3183,19 +3193,19 @@ function executeInlineScripts(container) { ArgonDebug.log(`Script ${index + 1}: External (${script.src}), skipped`); } }); - + const result = { total: scripts.length, success: successCount, failed: failedCount }; - + ArgonDebug.log('Script execution completed:', result); return result; } var pjaxContainerSelectors = ['#primary', '#leftbar_part1_menu', '#leftbar_part2_inner', '.page-information-card-container', '#rightbar', '#wpadminbar']; -var pjaxContainers = pjaxContainerSelectors.filter(function(selector) { +var pjaxContainers = pjaxContainerSelectors.filter(function (selector) { return document.querySelector(selector); }); @@ -3206,7 +3216,7 @@ var pjaxContainers = pjaxContainerSelectors.filter(function(selector) { /** * 页面加载管理器 - 提供智能加载动画和进度追踪 */ -const PageLoader = (function() { +const PageLoader = (function () { // 配置常量 const CONFIG = { OVERLAY_ID: 'page-loader', @@ -3216,7 +3226,7 @@ const PageLoader = (function() { PROGRESS_INTERVAL: 200, // 进度更新间隔 SKELETON_DELAY: 150 // 骨架屏延迟显示 }; - + // 状态管理 let state = { element: null, @@ -3227,7 +3237,7 @@ const PageLoader = (function() { hideTimer: null, skeletonTimer: null }; - + /** * 创建加载动画 HTML */ @@ -3268,7 +3278,7 @@ const PageLoader = (function() { `; } - + /** * 创建加载器元素 */ @@ -3279,7 +3289,7 @@ const PageLoader = (function() { el.innerHTML = createHTML(); return el; } - + /** * 获取或创建元素 */ @@ -3293,34 +3303,34 @@ const PageLoader = (function() { } return state.element; } - + /** * 更新进度环 */ function updateProgress(progress) { const el = state.element; if (!el) return; - + const circle = el.querySelector('.loader-ring-progress'); if (circle) { const circumference = 2 * Math.PI * 45; const offset = circumference - (progress / 100) * circumference; circle.style.strokeDashoffset = offset; } - + state.progress = progress; } - + /** * 自动递增进度 */ function startProgressAnimation() { stopProgressAnimation(); - + state.progress = 0; updateProgress(0); - - state.progressTimer = setInterval(function() { + + state.progressTimer = setInterval(function () { if (state.progress < 90) { // 使用缓动函数,越接近 90% 越慢 const increment = CONFIG.PROGRESS_STEP * (1 - state.progress / 100); @@ -3329,7 +3339,7 @@ const PageLoader = (function() { } }, CONFIG.PROGRESS_INTERVAL); } - + /** * 停止进度动画 */ @@ -3339,7 +3349,7 @@ const PageLoader = (function() { state.progressTimer = null; } } - + /** * 完成进度到 100% */ @@ -3347,7 +3357,7 @@ const PageLoader = (function() { stopProgressAnimation(); updateProgress(100); } - + /** * 显示加载器 */ @@ -3361,57 +3371,57 @@ const PageLoader = (function() { clearTimeout(state.skeletonTimer); state.skeletonTimer = null; } - + const el = getElement(); state.startTime = Date.now(); state.isVisible = true; - + // 移除隐藏类,添加显示类 el.classList.remove('is-hiding'); void el.offsetWidth; // 强制重排 el.classList.add('is-visible'); - + // 启动进度动画 startProgressAnimation(); - + // 延迟显示骨架屏(避免快速加载时闪烁) - state.skeletonTimer = setTimeout(function() { + state.skeletonTimer = setTimeout(function () { if (state.isVisible && el) { el.classList.add('show-skeleton'); } }, CONFIG.SKELETON_DELAY); } - + /** * 隐藏加载器 */ function hide() { if (!state.isVisible) return; - + const el = state.element; if (!el) return; - + // 完成进度 completeProgress(); - + // 计算已显示时间 const elapsedTime = Date.now() - state.startTime; const remainingTime = Math.max(0, CONFIG.MIN_DISPLAY_TIME - elapsedTime); - + // 确保最小显示时间后再隐藏 - state.hideTimer = setTimeout(function() { + state.hideTimer = setTimeout(function () { el.classList.add('is-hiding'); el.classList.remove('show-skeleton'); - + // 动画结束后清理 - setTimeout(function() { + setTimeout(function () { el.classList.remove('is-visible', 'is-hiding'); state.isVisible = false; stopProgressAnimation(); }, CONFIG.FADE_DURATION); }, remainingTime); } - + /** * 设置进度(手动控制) */ @@ -3420,13 +3430,13 @@ const PageLoader = (function() { stopProgressAnimation(); updateProgress(progress); } - + /** * 销毁加载器 */ function destroy() { stopProgressAnimation(); - + if (state.hideTimer) { clearTimeout(state.hideTimer); state.hideTimer = null; @@ -3435,15 +3445,15 @@ const PageLoader = (function() { clearTimeout(state.skeletonTimer); state.skeletonTimer = null; } - + if (state.element && state.element.parentNode) { state.element.parentNode.removeChild(state.element); } - + state.element = null; state.isVisible = false; } - + // 公开 API return { show: show, @@ -3465,20 +3475,20 @@ function hideLoadingOverlay() { } function startPageTransition() { document.documentElement.classList.add('page-transition-enter'); - pjaxContainers.forEach(function(selector) { + pjaxContainers.forEach(function (selector) { var c = document.querySelector(selector); if (c) c.classList.add('page-transition-content'); }); } function activatePageTransition() { - requestAnimationFrame(function() { + requestAnimationFrame(function () { document.documentElement.classList.add('page-transition-active'); }); } function endPageTransition() { document.documentElement.classList.remove('page-transition-active'); document.documentElement.classList.remove('page-transition-enter'); - pjaxContainers.forEach(function(selector) { + pjaxContainers.forEach(function (selector) { var c = document.querySelector(selector); if (c) c.classList.remove('page-transition-content'); }); @@ -3501,151 +3511,151 @@ $.pjax.defaults.fragment = pjaxContainers; * - pjax:end: 需求 1.7 (特定任务处理) */ if (argonConfig.disable_pjax != true && argonConfig.disable_pjax != 'true') { -$(document).pjax( - "a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):not([download]):not(.reference-link):not(.reference-list-backlink):not([href^='#'])", - pjaxContainers.length ? pjaxContainers[0] : '#primary', - { fragment: (pjaxContainers.length ? pjaxContainers : ['#primary']), timeout: $.pjax.defaults.timeout } -) -.on('pjax:click', function(e, f, g){ - NProgress.remove(); - NProgress.start(); - pjaxLoading = true; - showLoadingOverlay(); -}).on('pjax:afterGetContainers', function(e, f, g) { - pjaxScrollTop = 0; - if ($("html").hasClass("banner-as-cover")){ - if (g.is(".page-link")){ - pjaxScrollTop = $("#content").offset().top - 80; - } - } -}).on('pjax:send', function() { - NProgress.set(0.618); - startPageTransition(); -}).on('pjax:beforeReplace', function(e, dom) { - // ========== 需求 1.1-1.4: 清理旧页面的所有资源 ========== - // 调用统一的资源清理管理器 - // 清理内容:Lazyload Observer、Zoomify、Tippy 实例、动态标签 - cleanupPjaxResources(); - - // 更新 UI 状态 - if ($("#post_comment", dom[0]).length > 0){ - $("#fabtn_go_to_comment").removeClass("d-none"); - }else{ - $("#fabtn_go_to_comment").addClass("d-none"); - } - - // 处理滚动位置 - if ($("html").hasClass("banner-as-cover")){ - if (!$("#main").hasClass("article-list-home")){ + $(document).pjax( + "a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):not([download]):not(.reference-link):not(.reference-list-backlink):not([href^='#'])", + pjaxContainers.length ? pjaxContainers[0] : '#primary', + { fragment: (pjaxContainers.length ? pjaxContainers : ['#primary']), timeout: $.pjax.defaults.timeout } + ) + .on('pjax:click', function (e, f, g) { + NProgress.remove(); + NProgress.start(); + pjaxLoading = true; + showLoadingOverlay(); + }).on('pjax:afterGetContainers', function (e, f, g) { pjaxScrollTop = 0; - } - } -}).on('pjax:complete', function() { - // ========== 需求 1.5, 1.6: 重新初始化所有功能模块 ========== - pjaxLoading = false; - NProgress.inc(); - startPageTransition(); - activatePageTransition(); - setTimeout(function() { - hideLoadingOverlay(); - endPageTransition(); - }, 320); - - // ========== 需求 4.1-4.5: 执行新页面中的内联脚本 ========== - try { - pjaxContainers.forEach(function(selector) { - var container = document.querySelector(selector); - if (container) { - executeInlineScripts(container); + if ($("html").hasClass("banner-as-cover")) { + if (g.is(".page-link")) { + pjaxScrollTop = $("#content").offset().top - 80; + } } + }).on('pjax:send', function () { + NProgress.set(0.618); + startPageTransition(); + }).on('pjax:beforeReplace', function (e, dom) { + // ========== 需求 1.1-1.4: 清理旧页面的所有资源 ========== + // 调用统一的资源清理管理器 + // 清理内容:Lazyload Observer、Zoomify、Tippy 实例、动态标签 + cleanupPjaxResources(); + + // 更新 UI 状态 + if ($("#post_comment", dom[0]).length > 0) { + $("#fabtn_go_to_comment").removeClass("d-none"); + } else { + $("#fabtn_go_to_comment").addClass("d-none"); + } + + // 处理滚动位置 + if ($("html").hasClass("banner-as-cover")) { + if (!$("#main").hasClass("article-list-home")) { + pjaxScrollTop = 0; + } + } + }).on('pjax:complete', function () { + // ========== 需求 1.5, 1.6: 重新初始化所有功能模块 ========== + pjaxLoading = false; + NProgress.inc(); + startPageTransition(); + activatePageTransition(); + setTimeout(function () { + hideLoadingOverlay(); + endPageTransition(); + }, 320); + + // ========== 需求 4.1-4.5: 执行新页面中的内联脚本 ========== + try { + pjaxContainers.forEach(function (selector) { + var container = document.querySelector(selector); + if (container) { + executeInlineScripts(container); + } + }); + } catch (err) { + ArgonDebug.error('executeInlineScripts failed:', err); + } + + // MathJax 数学公式渲染 + try { + if (MathJax != undefined) { + if (MathJax.Hub != undefined) { + MathJax.Hub.Typeset(); + } else { + MathJax.typeset(); + } + } + } catch (err) { } + + // KaTeX 数学公式渲染 + try { + if (renderMathInElement != undefined) { + renderMathInElement(document.body, { + delimiters: [ + { left: "$$", right: "$$", display: true }, + { left: "$", right: "$", display: false }, + { left: "\\(", right: "\\)", display: false } + ] + }); + } + } catch (err) { } + + // 初始化各个功能模块(添加错误处理确保单个模块失败不影响其他模块) + try { waterflowInit(); } catch (err) { ArgonDebug.error('waterflowInit failed:', err); } + try { lazyloadInit(); } catch (err) { ArgonDebug.error('lazyloadInit failed:', err); } + try { zoomifyInit(); } catch (err) { ArgonDebug.error('zoomifyInit failed:', err); } + try { highlightJsRender(); } catch (err) { ArgonDebug.error('highlightJsRender failed:', err); } + try { panguInit(); } catch (err) { ArgonDebug.error('panguInit failed:', err); } + try { clampInit(); } catch (err) { ArgonDebug.error('clampInit failed:', err); } + try { tippyInit(); } catch (err) { ArgonDebug.error('tippyInit failed:', err); } + try { getGithubInfoCardContent(); } catch (err) { ArgonDebug.error('getGithubInfoCardContent failed:', err); } + try { showPostOutdateToast(); } catch (err) { ArgonDebug.error('showPostOutdateToast failed:', err); } + try { calcHumanTimesOnPage(); } catch (err) { ArgonDebug.error('calcHumanTimesOnPage failed:', err); } + try { foldLongComments(); } catch (err) { ArgonDebug.error('foldLongComments failed:', err); } + try { foldLongShuoshuo(); } catch (err) { ArgonDebug.error('foldLongShuoshuo failed:', err); } + try { handleHashNavigation(); } catch (err) { ArgonDebug.error('handleHashNavigation failed:', err); } + + $("html").trigger("resize"); + + // 恢复滚动位置 + if (pjaxScrollTop > 0) { + $("body,html").scrollTop(pjaxScrollTop); + pjaxScrollTop = 0; + } + + // 调用用户自定义的 PJAX 加载完成回调 + if (typeof (window.pjaxLoaded) == "function") { + try { + window.pjaxLoaded(); + } catch (err) { + ArgonDebug.error(err); + } + } + + NProgress.done(); + }).on('pjax:error', function () { + hideLoadingOverlay(); + endPageTransition(); + pjaxLoading = false; + }).on('pjax:end', function () { + // ========== 需求 1.7: 执行特定任务 ========== + + // 重置移动端目录状态 + if (typeof window.resetMobileCatalog === 'function') { + try { + window.resetMobileCatalog(); + } catch (err) { + ArgonDebug.warn('resetMobileCatalog failed:', err); + } + } + + // GT4: PJAX 后确保评论页验证码已初始化 + resetGT4Captcha(); }); - } catch (err) { - ArgonDebug.error('executeInlineScripts failed:', err); - } - - // MathJax 数学公式渲染 - try{ - if (MathJax != undefined){ - if (MathJax.Hub != undefined){ - MathJax.Hub.Typeset(); - }else{ - MathJax.typeset(); - } - } - }catch (err){} - - // KaTeX 数学公式渲染 - try{ - if (renderMathInElement != undefined){ - renderMathInElement(document.body,{ - delimiters: [ - {left: "$$", right: "$$", display: true}, - {left: "$", right: "$", display: false}, - {left: "\\(", right: "\\)", display: false} - ] - }); - } - }catch (err){} - - // 初始化各个功能模块(添加错误处理确保单个模块失败不影响其他模块) - try { waterflowInit(); } catch (err) { ArgonDebug.error('waterflowInit failed:', err); } - try { lazyloadInit(); } catch (err) { ArgonDebug.error('lazyloadInit failed:', err); } - try { zoomifyInit(); } catch (err) { ArgonDebug.error('zoomifyInit failed:', err); } - try { highlightJsRender(); } catch (err) { ArgonDebug.error('highlightJsRender failed:', err); } - try { panguInit(); } catch (err) { ArgonDebug.error('panguInit failed:', err); } - try { clampInit(); } catch (err) { ArgonDebug.error('clampInit failed:', err); } - try { tippyInit(); } catch (err) { ArgonDebug.error('tippyInit failed:', err); } - try { getGithubInfoCardContent(); } catch (err) { ArgonDebug.error('getGithubInfoCardContent failed:', err); } - try { showPostOutdateToast(); } catch (err) { ArgonDebug.error('showPostOutdateToast failed:', err); } - try { calcHumanTimesOnPage(); } catch (err) { ArgonDebug.error('calcHumanTimesOnPage failed:', err); } - try { foldLongComments(); } catch (err) { ArgonDebug.error('foldLongComments failed:', err); } - try { foldLongShuoshuo(); } catch (err) { ArgonDebug.error('foldLongShuoshuo failed:', err); } - try { handleHashNavigation(); } catch (err) { ArgonDebug.error('handleHashNavigation failed:', err); } - - $("html").trigger("resize"); - - // 恢复滚动位置 - if (pjaxScrollTop > 0) { - $("body,html").scrollTop(pjaxScrollTop); - pjaxScrollTop = 0; - } - - // 调用用户自定义的 PJAX 加载完成回调 - if (typeof(window.pjaxLoaded) == "function"){ - try{ - window.pjaxLoaded(); - }catch (err){ - ArgonDebug.error(err); - } - } - - NProgress.done(); -}).on('pjax:error', function() { - hideLoadingOverlay(); - endPageTransition(); - pjaxLoading = false; -}).on('pjax:end', function() { - // ========== 需求 1.7: 执行特定任务 ========== - - // 重置移动端目录状态 - if (typeof window.resetMobileCatalog === 'function') { - try { - window.resetMobileCatalog(); - } catch (err) { - ArgonDebug.warn('resetMobileCatalog failed:', err); - } - } - - // GT4: PJAX 后确保评论页验证码已初始化 - resetGT4Captcha(); -}); } -window.addEventListener('hashchange', function() { +window.addEventListener('hashchange', function () { handleHashNavigation(); }); if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', function() { + document.addEventListener('DOMContentLoaded', function () { handleHashNavigation(); }); } else { @@ -3653,10 +3663,10 @@ if (document.readyState === 'loading') { } /*Reference 跳转*/ -$(document).on("click", ".reference-link , .reference-list-backlink" , function(e){ +$(document).on("click", ".reference-link , .reference-list-backlink", function (e) { e.preventDefault(); var href = $(this).attr("href"); - if (!href || href === "#" ) { return; } + if (!href || href === "#") { return; } var $target; try { $target = $(href); @@ -3666,31 +3676,31 @@ $(document).on("click", ".reference-link , .reference-list-backlink" , function( $("body,html").animate({ scrollTop: $target.offset().top - document.body.clientHeight / 2 - 75 }, 500, 'easeOutExpo') - setTimeout(function(){ - if ($target.is("li")){ + setTimeout(function () { + if ($target.is("li")) { $(".space", $target).focus(); - }else{ + } else { $target.focus(); } }, 1); }); /*Tags Dialog pjax 加载后自动关闭 */ -$(document).on("click" , "#blog_tags .tag" , function(){ +$(document).on("click", "#blog_tags .tag", function () { $("#blog_tags button.close").trigger("click"); }); -$(document).on("click" , "#blog_categories .tag" , function(){ +$(document).on("click", "#blog_categories .tag", function () { $("#blog_categories button.close").trigger("click"); }); /*侧栏 & 顶栏菜单手机适配*/ -!function(){ - $(document).on("click" , "#fabtn_open_sidebar, #open_sidebar" , function(){ +!function () { + $(document).on("click", "#fabtn_open_sidebar, #open_sidebar", function () { $("html").addClass("leftbar-opened"); // 侧边栏打开时初始化移动端文章目录 initMobileCatalog(); // 如果有文章目录,默认展开 - setTimeout(function() { + setTimeout(function () { var catalogSection = $("#mobile_catalog_toggle").closest(".leftbar-mobile-collapse-section"); if (catalogSection.length > 0 && !catalogSection.hasClass("expanded")) { catalogSection.addClass("expanded"); @@ -3699,28 +3709,28 @@ $(document).on("click" , "#blog_categories .tag" , function(){ } }, 100); }); - $(document).on("click" , "#sidebar_mask, #leftbar_close_btn" , function(){ + $(document).on("click", "#sidebar_mask, #leftbar_close_btn", function () { $("html").removeClass("leftbar-opened"); // 关闭侧边栏时折叠所有面板 $(".leftbar-mobile-collapse-section.expanded").removeClass("expanded"); }); - $(document).on("click" , "#leftbar a[href]:not([no-pjax]):not([href^='#']):not(.has-submenu)" , function(){ + $(document).on("click", "#leftbar a[href]:not([no-pjax]):not([href^='#']):not(.has-submenu)", function () { $("html").removeClass("leftbar-opened"); // 关闭侧边栏时折叠所有面板 $(".leftbar-mobile-collapse-section.expanded").removeClass("expanded"); }); // 移动端子菜单展开/收起 - $(document).on("click" , ".leftbar-mobile-menu-item.has-children > a.has-submenu" , function(e){ + $(document).on("click", ".leftbar-mobile-menu-item.has-children > a.has-submenu", function (e) { e.preventDefault(); $(this).parent().toggleClass("expanded"); }); // 移动端侧边栏搜索 - $(document).on("keydown" , "#leftbar_mobile_search_input" , function(e){ - if (e.keyCode != 13){ + $(document).on("keydown", "#leftbar_mobile_search_input", function (e) { + if (e.keyCode != 13) { return; } let word = $(this).val(); - if (word == ""){ + if (word == "") { return; } $("html").removeClass("leftbar-opened"); @@ -3728,64 +3738,64 @@ $(document).on("click" , "#blog_categories .tag" , function(){ $(".leftbar-mobile-collapse-section.expanded").removeClass("expanded"); searchPosts(word); }); - $(document).on("click" , "#navbar_global.show .navbar-nav a[href]:not([no-pjax]):not([href^='#'])" , function(){ + $(document).on("click", "#navbar_global.show .navbar-nav a[href]:not([no-pjax]):not([href^='#'])", function () { $("#navbar_global .navbar-toggler").click(); }); - $(document).on("click" , "#navbar_global.show #navbar_search_btn_mobile" , function(){ + $(document).on("click", "#navbar_global.show #navbar_search_btn_mobile", function () { $("#navbar_global .navbar-toggler").click(); }); - + // ========== 移动端折叠面板交互========== - $(document).on("click", ".leftbar-mobile-collapse-header", function(e) { + $(document).on("click", ".leftbar-mobile-collapse-header", function (e) { var section = $(this).closest(".leftbar-mobile-collapse-section"); var header = $(this); var isExpanded = section.hasClass("expanded"); - + // 切换展开状态 section.toggleClass("expanded"); - + // 如果是文章目录面板展开,初始化目录并滚动到当前位置 if (!isExpanded && header.attr("id") === "mobile_catalog_toggle") { initMobileCatalog(); setTimeout(scrollMobileCatalogToActive, 100); } }); - + // ========== 移动端文章目录初始化 ========== window.mobileCatalogInitialized = false; - + function initMobileCatalog() { if (window.mobileCatalogInitialized) return; var $mobileContainer = $("#leftbar_mobile_catalog"); var $postContent = $("#post_content"); if ($mobileContainer.length === 0) return; if ($postContent.length === 0) return; - + // 直接生成目录,不依赖 headIndex 插件 var $headers = $postContent.find('h1, h2, h3, h4, h5, h6'); if ($headers.length === 0) { $mobileContainer.html('
    暂无目录
    '); return; } - + // 构建目录树 var toc = []; var stack = [{ level: 0, children: toc }]; - - $headers.each(function(index) { + + $headers.each(function (index) { var $h = $(this); var level = parseInt(this.tagName.charAt(1)); var text = $h.text().trim(); var id = $h.attr('id'); - + // 确保标题有ID if (!id) { id = 'mobile-heading-' + index; $h.attr('id', id); } - + var item = { id: id, text: text, level: level, children: [] }; - + // 找到合适的父级 while (stack.length > 1 && stack[stack.length - 1].level >= level) { stack.pop(); @@ -3793,7 +3803,7 @@ $(document).on("click" , "#blog_categories .tag" , function(){ stack[stack.length - 1].children.push(item); stack.push({ level: level, children: item.children }); }); - + // 递归生成 HTML function buildHtml(items, isRoot) { if (!items || items.length === 0) return ''; @@ -3810,12 +3820,12 @@ $(document).on("click" , "#blog_categories .tag" , function(){ html += ''; return html; } - + $mobileContainer.html(buildHtml(toc, true)); window.mobileCatalogInitialized = true; - + // 绑定点击事件 - $mobileContainer.off('click.mobileCatalog').on('click.mobileCatalog', '.index-link', function(e) { + $mobileContainer.off('click.mobileCatalog').on('click.mobileCatalog', '.index-link', function (e) { e.preventDefault(); var targetId = $(this).attr('href'); if (targetId) { @@ -3827,7 +3837,7 @@ $(document).on("click" , "#blog_categories .tag" , function(){ scrollTop: $target.offset().top - 80 }, 500, 'easeOutExpo'); // 点击后关闭侧边栏 - setTimeout(function() { + setTimeout(function () { $("html").removeClass("leftbar-opened"); // 关闭侧边栏时折叠所有面板 $(".leftbar-mobile-collapse-section.expanded").removeClass("expanded"); @@ -3835,42 +3845,42 @@ $(document).on("click" , "#blog_categories .tag" , function(){ } } }); - + // 初始化高亮并启动滚动监听 updateMobileCatalogHighlight(); setTimeout(scrollMobileCatalogToActive, 150); } - + // 更新移动端目录高亮 function updateMobileCatalogHighlight() { var $mobileContainer = $("#leftbar_mobile_catalog"); var $postContent = $("#post_content"); if ($mobileContainer.length === 0 || $postContent.length === 0) return; - + var scrollTop = $(window).scrollTop(); var $headers = $postContent.find('h1, h2, h3, h4, h5, h6'); var currentId = null; - - $headers.each(function() { + + $headers.each(function () { var $h = $(this); var top = $h.offset().top - 100; if (scrollTop >= top) { currentId = $h.attr('id'); } }); - + if (currentId) { $mobileContainer.find('.index-item').removeClass('current'); $mobileContainer.find('.index-link[href="#' + currentId + '"]').closest('.index-item').addClass('current'); } } - + // 重置移动端目录状态(由PJAX 调用) - window.resetMobileCatalog = function() { + window.resetMobileCatalog = function () { window.mobileCatalogInitialized = false; $("#leftbar_mobile_catalog").empty(); }; - + // 滚动目录到当前激活项 function scrollMobileCatalogToActive() { var container = $("#leftbar_mobile_catalog"); @@ -3886,27 +3896,28 @@ $(document).on("click" , "#blog_categories .tag" , function(){ }, 300, 'easeOutCubic'); } } - + // 监听页面滚动,实时更新移动端目录高亮并自动滚动 - var mobileCatalogScrollTimer = null; - $(window).on("scroll.mobileCatalog", function() { + var mobileCatalogScrollTicking = false; + $(window).on("scroll.mobileCatalog", function () { if (!window.mobileCatalogInitialized) return; - // 节流处理 - if (mobileCatalogScrollTimer) return; - mobileCatalogScrollTimer = setTimeout(function() { - mobileCatalogScrollTimer = null; + // 使用 rAF 实现实时更新,无延迟 + if (mobileCatalogScrollTicking) return; + mobileCatalogScrollTicking = true; + requestAnimationFrame(function () { + mobileCatalogScrollTicking = false; // 更新高亮状态 updateMobileCatalogHighlight(); // 只在侧边栏打开且目录展开时滚动 - if ($("html").hasClass("leftbar-opened") && + if ($("html").hasClass("leftbar-opened") && $("#mobile_catalog_toggle").closest(".leftbar-mobile-collapse-section").hasClass("expanded")) { scrollMobileCatalogToActive(); } - }, 150); + }); }); - + // 点击目录项后关闭侧边栏(已在 initMobileCatalog 中处理) - + // ========== 移动端TODO交互 ========== function updateMobileTodoCount() { var count = $("#mobile-todo-list .mobile-todo-item:not(.todo-completed)").length; @@ -3914,7 +3925,7 @@ $(document).on("click" , "#blog_categories .tag" , function(){ $("#mobile_todo_count").text(count); // 同步更新桌面端计数 $(".todo-count").text(count); - + // 更新分隔栏的已完成数量 var divider = $("#mobile-todo-collapse-btn"); if (divider.length) { @@ -3926,14 +3937,14 @@ $(document).on("click" , "#blog_categories .tag" , function(){ } } } - + // 移动端折叠/展开已完成任务 - $(document).on("click", "#mobile-todo-collapse-btn", function(e) { + $(document).on("click", "#mobile-todo-collapse-btn", function (e) { e.stopPropagation(); var btn = $(this); var completedItems = $("#mobile-todo-list .mobile-todo-item.todo-completed"); var isCollapsed = btn.hasClass("collapsed"); - + if (isCollapsed) { // 展开 btn.removeClass("collapsed"); @@ -3944,28 +3955,28 @@ $(document).on("click" , "#blog_categories .tag" , function(){ completedItems.addClass("collapsed"); } }); - + // 添加TODO - $(document).on("click", "#mobile-todo-add-btn", function() { + $(document).on("click", "#mobile-todo-add-btn", function () { addMobileTodo(); }); - - $(document).on("keypress", "#mobile-todo-input", function(e) { + + $(document).on("keypress", "#mobile-todo-input", function (e) { if (e.key === "Enter") { addMobileTodo(); } }); - + function addMobileTodo() { if (!window.mobileTodoConfig) return; - + var input = $("#mobile-todo-input"); var content = input.val().trim(); if (!content) return; - + var btn = $("#mobile-todo-add-btn"); btn.prop("disabled", true); - + $.ajax({ url: window.mobileTodoConfig.ajaxUrl, type: "POST", @@ -3974,43 +3985,43 @@ $(document).on("click" , "#blog_categories .tag" , function(){ nonce: window.mobileTodoConfig.nonce, content: content }, - success: function(res) { + success: function (res) { if (res.success) { var list = $("#mobile-todo-list"); list.find(".mobile-todo-empty").remove(); - + var newItem = $('
  2. ' + '' + $("
    ").text(content).html() + '' + '' + '
  3. '); list.prepend(newItem); - + input.val(""); updateMobileTodoCount(); - + // 同步到桌面端 syncTodoToDesktop(res.data.id, content, "add"); } btn.prop("disabled", false); }, - error: function() { + error: function () { btn.prop("disabled", false); } }); } - + // 移动端TODO 验证码相关变量 var mobilePendingUrgeBtn = null; var mobileGeetestCaptchaObj = null; - + // 完成/删除/催促TODO - $(document).on("click", "#mobile-todo-list .mobile-todo-complete-btn, #mobile-todo-list .mobile-todo-delete-btn, #mobile-todo-list .mobile-todo-urge-btn", function() { + $(document).on("click", "#mobile-todo-list .mobile-todo-complete-btn, #mobile-todo-list .mobile-todo-delete-btn, #mobile-todo-list .mobile-todo-urge-btn", function () { if (!window.mobileTodoConfig) return; - + var btn = $(this); var item = btn.closest(".mobile-todo-item"); var id = item.data("id"); - + if (btn.hasClass("mobile-todo-complete-btn")) { btn.prop("disabled", true); $.ajax({ @@ -4021,7 +4032,7 @@ $(document).on("click" , "#blog_categories .tag" , function(){ nonce: window.mobileTodoConfig.nonce, id: id }, - success: function(res) { + success: function (res) { if (res.success) { item.addClass("todo-completed"); btn.replaceWith(''); @@ -4042,10 +4053,10 @@ $(document).on("click" , "#blog_categories .tag" , function(){ nonce: window.mobileTodoConfig.nonce, id: id }, - success: function(res) { + success: function (res) { if (res.success) { item.addClass("todo-completing"); - setTimeout(function() { + setTimeout(function () { item.remove(); updateMobileTodoCount(); if ($("#mobile-todo-list .mobile-todo-item").length === 0) { @@ -4063,24 +4074,24 @@ $(document).on("click" , "#blog_categories .tag" , function(){ if (captchaContainer.length > 0) { captchaContainer.slideDown(200); mobilePendingUrgeBtn = btn; - + if (window.mobileTodoConfig.captchaType === 'geetest') { // 极验验证码 if (!mobileGeetestCaptchaObj && typeof initGeetest4 === 'function') { initGeetest4({ captchaId: window.mobileTodoConfig.geetestId, product: 'bind' - }, function(captcha) { + }, function (captcha) { mobileGeetestCaptchaObj = captcha; - captcha.onReady(function() { + captcha.onReady(function () { captcha.showCaptcha(); - }).onSuccess(function() { + }).onSuccess(function () { var result = captcha.getValidate(); if (result && mobilePendingUrgeBtn) { var urgeId = mobilePendingUrgeBtn.closest(".mobile-todo-item").data("id"); doMobileUrgeGeetest(mobilePendingUrgeBtn, urgeId, result); } - }).onError(function() { + }).onError(function () { captchaContainer.slideUp(200); mobilePendingUrgeBtn = null; }); @@ -4095,39 +4106,39 @@ $(document).on("click" , "#blog_categories .tag" , function(){ return; } } - + // 不需要验证码,直接催促 doMobileUrge(btn, id, ""); } }); - + // 移动端数学验证码提交 - $(document).on("click", "#mobile-todo-captcha-submit", function() { + $(document).on("click", "#mobile-todo-captcha-submit", function () { if (!mobilePendingUrgeBtn) return; - + var captchaInput = $("#mobile-todo-captcha-input"); var captchaValue = captchaInput.val().trim(); - + if (!captchaValue) { captchaInput.focus(); return; } - + var id = mobilePendingUrgeBtn.closest(".mobile-todo-item").data("id"); doMobileUrge(mobilePendingUrgeBtn, id, captchaValue); }); - + // 移动端验证码回车提交 - $(document).on("keypress", "#mobile-todo-captcha-input", function(e) { + $(document).on("keypress", "#mobile-todo-captcha-input", function (e) { if (e.key === "Enter") { $("#mobile-todo-captcha-submit").click(); } }); - + // 执行移动端催促 function doMobileUrge(btn, id, captcha) { btn.prop("disabled", true).html(''); - + $.ajax({ url: window.mobileTodoConfig.ajaxUrl, type: "POST", @@ -4137,19 +4148,19 @@ $(document).on("click" , "#blog_categories .tag" , function(){ id: id, comment_captcha: captcha }, - success: function(res) { + success: function (res) { handleMobileUrgeResponse(btn, res); }, - error: function() { + error: function () { btn.prop("disabled", false).html(''); } }); } - + // 极验验证码催促 function doMobileUrgeGeetest(btn, id, geetestResult) { btn.prop("disabled", true).html(''); - + $.ajax({ url: window.mobileTodoConfig.ajaxUrl, type: "POST", @@ -4162,34 +4173,34 @@ $(document).on("click" , "#blog_categories .tag" , function(){ pass_token: geetestResult.pass_token, gen_time: geetestResult.gen_time }, - success: function(res) { + success: function (res) { handleMobileUrgeResponse(btn, res); if (mobileGeetestCaptchaObj) mobileGeetestCaptchaObj.reset(); }, - error: function() { + error: function () { btn.prop("disabled", false).html(''); } }); } - + // 处理移动端催促响应 function handleMobileUrgeResponse(btn, res) { var captchaContainer = $(".mobile-todo-captcha-container"); - + if (res.success) { btn.addClass("urged").html(''); captchaContainer.slideUp(200); mobilePendingUrgeBtn = null; - + // 更新验证码文本 if (res.data && res.data.captcha) { $(".mobile-todo-captcha-text").text(res.data.captcha); } - + // 同步到桌面端 var id = btn.closest(".mobile-todo-item").data("id"); syncTodoToDesktop(id, "", "urge"); - + // 显示成功提示 if (typeof iziToast !== 'undefined') { iziToast.success({ @@ -4201,7 +4212,7 @@ $(document).on("click" , "#blog_categories .tag" , function(){ } } else { btn.prop("disabled", false).html(''); - + // 显示错误提示 if (typeof iziToast !== 'undefined') { iziToast.error({ @@ -4211,7 +4222,7 @@ $(document).on("click" , "#blog_categories .tag" , function(){ timeout: 3000 }); } - + // 刷新验证码 if (res.data && res.data.captcha) { $(".mobile-todo-captcha-text").text(res.data.captcha); @@ -4219,12 +4230,12 @@ $(document).on("click" , "#blog_categories .tag" , function(){ $("#mobile-todo-captcha-input").val("").focus(); } } - + // 同步TODO操作到桌面端 function syncTodoToDesktop(id, content, action) { var desktopList = $("#todo-list"); if (desktopList.length === 0) return; - + if (action === "add") { desktopList.find(".todo-empty").remove(); var newItem = $('
  4. ' + @@ -4246,51 +4257,51 @@ $(document).on("click" , "#blog_categories .tag" , function(){ }(); /*折叠区块小工具*/ -$(document).on("click" , ".collapse-block .collapse-block-title" , function(){ +$(document).on("click", ".collapse-block .collapse-block-title", function () { let block = $(this).parent(); $(block).toggleClass("collapsed"); let inner = $(".collapse-block-body", block); - if (block.hasClass("collapsed")){ + if (block.hasClass("collapsed")) { inner.stop(true, false).slideUp(250, 'easeOutCirc'); - }else{ + } else { inner.stop(true, false).slideDown(300, 'easeOutCirc'); } $("html").trigger("scroll"); }); /*获得 Github Repo Shortcode 信息卡内容*/ -function getGithubInfoCardContent(){ - $(".github-info-card").each(function(){ - (function($this){ - if ($this.attr("data-getdata") == "backend"){ - $(".github-info-card-description" , $this).html($this.attr("data-description")); - $(".github-info-card-stars" , $this).html($this.attr("data-stars")); - $(".github-info-card-forks" , $this).html($this.attr("data-forks")); +function getGithubInfoCardContent() { + $(".github-info-card").each(function () { + (function ($this) { + if ($this.attr("data-getdata") == "backend") { + $(".github-info-card-description", $this).html($this.attr("data-description")); + $(".github-info-card-stars", $this).html($this.attr("data-stars")); + $(".github-info-card-forks", $this).html($this.attr("data-forks")); return; } - $(".github-info-card-description" , $this).html("Loading..."); - $(".github-info-card-stars" , $this).html("-"); - $(".github-info-card-forks" , $this).html("-"); + $(".github-info-card-description", $this).html("Loading..."); + $(".github-info-card-stars", $this).html("-"); + $(".github-info-card-forks", $this).html("-"); author = $this.attr("data-author"); project = $this.attr("data-project"); $.ajax({ - url : "https://api.github.com/repos/" + author + "/" + project, - type : "GET", - dataType : "json", - success : function(result){ + url: "https://api.github.com/repos/" + author + "/" + project, + type: "GET", + dataType: "json", + success: function (result) { description = result.description; - if (result.homepage != "" && result.homepage != null){ + if (result.homepage != "" && result.homepage != null) { description += " " + result.homepage + "" } - $(".github-info-card-description" , $this).html(description); - $(".github-info-card-stars" , $this).html(result.stargazers_count); - $(".github-info-card-forks" , $this).html(result.forks_count); + $(".github-info-card-description", $this).html(description); + $(".github-info-card-stars", $this).html(result.stargazers_count); + $(".github-info-card-forks", $this).html(result.forks_count); }, - error : function(xhr){ - if (xhr.status == 404){ - $(".github-info-card-description" , $this).html(__("找不到该 Repo")); - }else{ - $(".github-info-card-description" , $this).html(__("获取 Repo 信息失败")); + error: function (xhr) { + if (xhr.status == 404) { + $(".github-info-card-description", $this).html(__("找不到该 Repo")); + } else { + $(".github-info-card-description", $this).html(__("获取 Repo 信息失败")); } } }); @@ -4300,23 +4311,23 @@ function getGithubInfoCardContent(){ getGithubInfoCardContent(); /*说说点赞*/ -$(document).on("click" , ".shuoshuo-upvote" , function(){ +$(document).on("click", ".shuoshuo-upvote", function () { $this = $(this); ID = $this.attr("data-id"); $this.addClass("shuoshuo-upvoting"); $.ajax({ - url : argonConfig.wp_path + "wp-admin/admin-ajax.php", - type : "POST", - dataType : "json", - data : { + url: argonConfig.wp_path + "wp-admin/admin-ajax.php", + type: "POST", + dataType: "json", + data: { action: "upvote_shuoshuo", - shuoshuo_id : ID, + shuoshuo_id: ID, }, - success : function(result){ + success: function (result) { $this.removeClass("shuoshuo-upvoting"); - if (result.status == "success"){ - $(".shuoshuo-upvote-num" , $this).html(result.total_upvote); - $("i.fa-thumbs-o-up" , $this).addClass("fa-thumbs-up").removeClass("fa-thumbs-o-up"); + if (result.status == "success") { + $(".shuoshuo-upvote-num", $this).html(result.total_upvote); + $("i.fa-thumbs-o-up", $this).addClass("fa-thumbs-up").removeClass("fa-thumbs-o-up"); $this.addClass("upvoted"); $this.addClass("shuoshuo-upvoted-animation"); iziToast.show({ @@ -4331,8 +4342,8 @@ $(document).on("click" , ".shuoshuo-upvote" , function(){ icon: 'fa fa-check', timeout: 5000 }); - }else{ - $(".shuoshuo-upvote-num" , $this).html(result.total_upvote); + } else { + $(".shuoshuo-upvote-num", $this).html(result.total_upvote); iziToast.show({ title: result.msg, class: 'shadow-sm', @@ -4347,7 +4358,7 @@ $(document).on("click" , ".shuoshuo-upvote" , function(){ }); } }, - error : function(xhr){ + error: function (xhr) { $this.removeClass("shuoshuo-upvoting"); iziToast.show({ title: __("点赞失败"), @@ -4365,27 +4376,27 @@ $(document).on("click" , ".shuoshuo-upvote" , function(){ }); }); //折叠长说说 -function foldLongShuoshuo(){ - if (argonConfig.fold_long_shuoshuo == false){ +function foldLongShuoshuo() { + if (argonConfig.fold_long_shuoshuo == false) { return; } - $("#main .shuoshuo-foldable > .shuoshuo-content").each(function(){ - if ($(this).hasClass("shuoshuo-unfolded")){ + $("#main .shuoshuo-foldable > .shuoshuo-content").each(function () { + if ($(this).hasClass("shuoshuo-unfolded")) { return; } - if (this.clientHeight > 400){ + if (this.clientHeight > 400) { $(this).addClass("shuoshuo-folded"); $(this).append("
    "); } }); } foldLongShuoshuo(); -$(document).on("click" , ".show-full-shuoshuo" , function(){ +$(document).on("click", ".show-full-shuoshuo", function () { $(this).parent().removeClass("shuoshuo-folded").addClass("shuoshuo-unfolded"); }); //颜色计算 -function rgb2hsl(R,G,B){ +function rgb2hsl(R, G, B) { let r = R / 255; let g = G / 255; let b = B / 255; @@ -4396,13 +4407,13 @@ function rgb2hsl(R,G,B){ let H, S, L = (var_Max + var_Min) / 2; - if (del_Max == 0){ + if (del_Max == 0) { H = 0; S = 0; - }else{ - if (L < 0.5){ + } else { + if (L < 0.5) { S = del_Max / (var_Max + var_Min); - }else{ + } else { S = del_Max / (2 - var_Max - var_Min); } @@ -4410,13 +4421,13 @@ function rgb2hsl(R,G,B){ del_G = (((var_Max - g) / 6) + (del_Max / 2)) / del_Max; del_B = (((var_Max - b) / 6) + (del_Max / 2)) / del_Max; - if (r == var_Max){ + if (r == var_Max) { H = del_B - del_G; } - else if (g == var_Max){ + else if (g == var_Max) { H = (1 / 3) + del_R - del_B; } - else if (b == var_Max){ + else if (b == var_Max) { H = (2 / 3) + del_G - del_R; } if (H < 0) H += 1; @@ -4431,7 +4442,7 @@ function rgb2hsl(R,G,B){ 'L': Math.round(L * 100),//0~100 }; } -function Hue_2_RGB(v1,v2,vH){ +function Hue_2_RGB(v1, v2, vH) { if (vH < 0) vH += 1; if (vH > 1) vH -= 1; if ((6 * vH) < 1) return (v1 + (v2 - v1) * 6 * vH); @@ -4439,18 +4450,18 @@ function Hue_2_RGB(v1,v2,vH){ if ((3 * vH) < 2) return (v1 + (v2 - v1) * ((2 / 3) - vH) * 6); return v1; } -function hsl2rgb(h,s,l){ +function hsl2rgb(h, s, l) { let r, g, b, var_1, var_2; - if (s == 0){ + if (s == 0) { r = l; g = l; b = l; } - else{ - if (l < 0.5){ + else { + if (l < 0.5) { var_2 = l * (1 + s); } - else{ + else { var_2 = (l + s) - (s * l); } var_1 = 2 * l - var_2; @@ -4467,53 +4478,53 @@ function hsl2rgb(h,s,l){ 'b': b }; } -function rgb2hex(r,g,b){ +function rgb2hex(r, g, b) { let hex = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'); let rh, gh, bh; - rh = "", gh ="", bh=""; - while (rh.length < 2){ - rh = hex[r%16] + rh; + rh = "", gh = "", bh = ""; + while (rh.length < 2) { + rh = hex[r % 16] + rh; r = Math.floor(r / 16); } - while (gh.length < 2){ - gh = hex[g%16] + gh; + while (gh.length < 2) { + gh = hex[g % 16] + gh; g = Math.floor(g / 16); } - while (bh.length < 2){ - bh = hex[b%16] + bh; + while (bh.length < 2) { + bh = hex[b % 16] + bh; b = Math.floor(b / 16); } return "#" + rh + gh + bh; } -function hex2rgb(hex){ +function hex2rgb(hex) { //hex: #XXXXXX let dec = { '0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, 'A': 10, 'B': 11, 'C': 12, 'D': 13, 'E': 14, 'F': 15 }; return { - 'R': (dec[hex.substr(1,1)] * 16 + dec[hex.substr(2,1)]),//0~255 - 'G': (dec[hex.substr(3,1)] * 16 + dec[hex.substr(4,1)]), - 'B': (dec[hex.substr(5,1)] * 16 + dec[hex.substr(6,1)]), - 'r': (dec[hex.substr(1,1)] * 16 + dec[hex.substr(2,1)]) / 255,//0~1 - 'g': (dec[hex.substr(3,1)] * 16 + dec[hex.substr(4,1)]) / 255, - 'b': (dec[hex.substr(5,1)] * 16 + dec[hex.substr(6,1)]) / 255 + 'R': (dec[hex.substr(1, 1)] * 16 + dec[hex.substr(2, 1)]),//0~255 + 'G': (dec[hex.substr(3, 1)] * 16 + dec[hex.substr(4, 1)]), + 'B': (dec[hex.substr(5, 1)] * 16 + dec[hex.substr(6, 1)]), + 'r': (dec[hex.substr(1, 1)] * 16 + dec[hex.substr(2, 1)]) / 255,//0~1 + 'g': (dec[hex.substr(3, 1)] * 16 + dec[hex.substr(4, 1)]) / 255, + 'b': (dec[hex.substr(5, 1)] * 16 + dec[hex.substr(6, 1)]) / 255 }; } -function rgb2gray(R,G,B){ +function rgb2gray(R, G, B) { return Math.round(R * 0.299 + G * 0.587 + B * 0.114); } -function hex2gray(hex){ +function hex2gray(hex) { let rgb_array = hex2rgb(hex); return hex2gray(rgb_array['R'], rgb_array['G'], rgb_array['B']); } -function rgb2str(rgb){ +function rgb2str(rgb) { return rgb['R'] + "," + rgb['G'] + "," + rgb['B']; } -function hex2str(hex){ +function hex2str(hex) { return rgb2str(hex2rgb(hex)); } //颜色选择器& 切换主题色 -if ($("meta[name='argon-enable-custom-theme-color']").attr("content") == 'true'){ +if ($("meta[name='argon-enable-custom-theme-color']").attr("content") == 'true') { let themeColorPicker = new Pickr({ el: '#theme-color-picker', container: 'body', @@ -4573,11 +4584,11 @@ if ($("meta[name='argon-enable-custom-theme-color']").attr("content") == 'true') setCookie("argon_custom_theme_color", "", 0); }); } -function pickrObjectToHEX(color){ +function pickrObjectToHEX(color) { let HEXA = color.toHEXA(); return ("#" + HEXA[0] + HEXA[1] + HEXA[2]).toUpperCase(); } -function updateThemeColor(color, setcookie){ +function updateThemeColor(color, setcookie) { let themecolor = color; let themecolor_rgbstr = hex2str(themecolor); let RGB = hex2rgb(themecolor); @@ -4592,58 +4603,58 @@ function updateThemeColor(color, setcookie){ document.documentElement.style.setProperty('--themecolor-L', HSL['L']); - if (rgb2gray(RGB['R'], RGB['G'], RGB['B']) < 50){ + if (rgb2gray(RGB['R'], RGB['G'], RGB['B']) < 50) { $("html").addClass("themecolor-toodark"); - }else{ + } else { $("html").removeClass("themecolor-toodark"); } $("meta[name='theme-color']").attr("content", themecolor); $("meta[name='theme-color-rgb']").attr("content", themecolor_rgbstr); - if (setcookie){ + if (setcookie) { setCookie("argon_custom_theme_color", themecolor, 365); } } /*打字效果*/ -function typeEffect($element, text, now, interval){ - if (now > text.length){ - setTimeout(function(){ +function typeEffect($element, text, now, interval) { + if (now > text.length) { + setTimeout(function () { $element.removeClass("typing-effect"); }, 1000); return; } $element[0].innerText = text.substring(0, now); - setTimeout(function(){typeEffect($element, text, now + 1, interval)}, interval); + setTimeout(function () { typeEffect($element, text, now + 1, interval) }, interval); } -function startTypeEffect($element, text, interval){ +function startTypeEffect($element, text, interval) { $element.addClass("typing-effect"); $element.attr("style", "--animation-cnt: " + Math.ceil(text.length * interval / 1000)); typeEffect($element, text, 1, interval); } -!function(){ - if ($(".banner-title").data("interval") != undefined){ +!function () { + if ($(".banner-title").data("interval") != undefined) { let interval = $(".banner-title").data("interval"); let $title = $(".banner-title-inner"); let $subTitle = $(".banner-subtitle"); startTypeEffect($title, $title.data("text"), interval); - if (!$subTitle.length){ + if (!$subTitle.length) { return; } - setTimeout(function(){startTypeEffect($subTitle, $subTitle.data("text"), interval);}, Math.ceil($title.data("text").length * interval / 1000) * 1000); + setTimeout(function () { startTypeEffect($subTitle, $subTitle.data("text"), interval); }, Math.ceil($title.data("text").length * interval / 1000) * 1000); } }(); /*一言*/ -if ($(".hitokoto").length > 0){ +if ($(".hitokoto").length > 0) { $.ajax({ type: 'GET', url: "https://v1.hitokoto.cn", - success: function(result){ + success: function (result) { $(".hitokoto").text(result.hitokoto); }, - error: function(result){ + error: function (result) { $(".hitokoto").text(__("Hitokoto 获取失败")); } }); @@ -4661,13 +4672,13 @@ function randomString(len) { return res; } var codeOfBlocks = {}; -function getCodeFromBlock(block){ - if (codeOfBlocks[block.id] != undefined){ +function getCodeFromBlock(block) { + if (codeOfBlocks[block.id] != undefined) { return codeOfBlocks[block.id]; } let lines = $(".hljs-ln-code", block); let res = ""; - for (let i = 0; i < lines.length - 1; i++){ + for (let i = 0; i < lines.length - 1; i++) { res += lines[i].innerText; res += "\n"; } @@ -4677,37 +4688,37 @@ function getCodeFromBlock(block){ } -function highlightJsRender(){ - if (typeof(hljs) == "undefined"){ +function highlightJsRender() { + if (typeof (hljs) == "undefined") { return; } - if (typeof(argonConfig.code_highlight.enable) == "undefined"){ + if (typeof (argonConfig.code_highlight.enable) == "undefined") { return; } - if (!argonConfig.code_highlight.enable){ + if (!argonConfig.code_highlight.enable) { return; } - $("article pre.code").each(function(index, block) { - if ($(block).hasClass("no-hljs")){ + $("article pre.code").each(function (index, block) { + if ($(block).hasClass("no-hljs")) { return; } $(block).html("" + $(block).html() + ""); }); - $("article pre > code").each(function(index, block) { - if ($(block).hasClass("no-hljs")){ + $("article pre > code").each(function (index, block) { + if ($(block).hasClass("no-hljs")) { return; } $(block).parent().attr("id", randomString()); hljs.highlightBlock(block); - hljs.lineNumbersBlock(block, {singleLine: true}); + hljs.lineNumbersBlock(block, { singleLine: true }); $(block).parent().addClass("hljs-codeblock"); - if (argonConfig.code_highlight.hide_linenumber){ + if (argonConfig.code_highlight.hide_linenumber) { $(block).parent().addClass("hljs-hide-linenumber"); } - if (argonConfig.code_highlight.break_line){ + if (argonConfig.code_highlight.break_line) { $(block).parent().addClass("hljs-break-line"); } - if (argonConfig.code_highlight.transparent_linenumber){ + if (argonConfig.code_highlight.transparent_linenumber) { $(block).parent().addClass("hljs-transparent-linenumber"); } $(block).attr("hljs-codeblock-inner", ""); @@ -4727,11 +4738,11 @@ function highlightJsRender(){ `); let clipboard = new ClipboardJS("#" + copyBtnID, { - text: function(trigger) { + text: function (trigger) { return getCodeFromBlock($(block).parent()[0]); } }); - clipboard.on('success', function(e) { + clipboard.on('success', function (e) { iziToast.show({ title: __("复制成功"), message: __("代码已复制到剪贴板"), @@ -4746,7 +4757,7 @@ function highlightJsRender(){ timeout: 5000 }); }); - clipboard.on('error', function(e) { + clipboard.on('error', function (e) { iziToast.show({ title: __("复制失败"), message: __("请手动复制代码"), @@ -4763,14 +4774,14 @@ function highlightJsRender(){ }); }); } -$(document).ready(function(){ +$(document).ready(function () { // ========================================================================== // 初始化性能优化模块 // ========================================================================== if (typeof initArgonPerformance === 'function') { // 调用性能优化模块的初始化函数 initArgonPerformance(); - + // 创建各个优化模块的实例 try { // 1. 性能监控模块(最先初始化,用于监控其他模块) @@ -4778,7 +4789,7 @@ $(document).ready(function(){ argonPerformanceMonitor = new ArgonPerformanceMonitor(); ArgonDebug.info('✓ 性能监控模块已初始化'); } - + // 2. DOM 缓存模块 if (typeof ArgonDOMCache !== 'undefined') { argonDOMCache = new ArgonDOMCache(); @@ -4790,31 +4801,31 @@ $(document).ready(function(){ argonDOMCache.init(); ArgonDebug.info('✓ DOM 缓存模块已初始化'); } - + // 3. 事件管理模块 if (typeof ArgonEventManager !== 'undefined') { argonEventManager = new ArgonEventManager(); ArgonDebug.info('✓ 事件管理模块已初始化'); } - + // 4. 资源加载模块 if (typeof ArgonResourceLoader !== 'undefined') { argonResourceLoader = new ArgonResourceLoader(); ArgonDebug.info('✓ 资源加载模块已初始化'); } - + // 5. 渲染优化模块 if (typeof ArgonRenderOptimizer !== 'undefined') { argonRenderOptimizer = new ArgonRenderOptimizer(); ArgonDebug.info('✓ 渲染优化模块已初始化'); } - + // 6. 内存管理模块 if (typeof ArgonMemoryManager !== 'undefined') { argonMemoryManager = new ArgonMemoryManager(); ArgonDebug.info('✓ 内存管理模块已初始化'); } - + ArgonDebug.info('🚀 Argon 性能优化模块全部初始化完成'); } catch (error) { ArgonDebug.error('性能优化模块初始化失败:', error); @@ -4822,27 +4833,27 @@ $(document).ready(function(){ } else { ArgonDebug.warn('性能优化模块未加载,请确保 argon-performance.js 已正确引入'); } - + // ========================================================================== // 原有初始化代码 // ========================================================================== highlightJsRender(); waterflowInit(); }); -$(document).on("click" , ".hljs-control-fullscreen" , function(){ +$(document).on("click", ".hljs-control-fullscreen", function () { let block = $(this).parent().parent(); block.toggleClass("hljs-codeblock-fullscreen"); - if (block.hasClass("hljs-codeblock-fullscreen")){ + if (block.hasClass("hljs-codeblock-fullscreen")) { $("html").addClass("noscroll codeblock-fullscreen"); - }else{ + } else { $("html").removeClass("noscroll codeblock-fullscreen"); } }); -$(document).on("click" , ".hljs-control-toggle-break-line" , function(){ +$(document).on("click", ".hljs-control-toggle-break-line", function () { let block = $(this).parent().parent(); block.toggleClass("hljs-break-line"); }); -$(document).on("click" , ".hljs-control-toggle-linenumber" , function(){ +$(document).on("click", ".hljs-control-toggle-linenumber", function () { let block = $(this).parent().parent(); block.toggleClass("hljs-hide-linenumber"); }); @@ -4925,171 +4936,204 @@ setInterval(function(){ /*Console*/ -!function(){ -void 0; +!function () { + void 0; }(); /* ========== Modern UI Enhancements - 现代化交互动画增强========== */ -(function() { - 'use strict'; +(function () { + 'use strict'; - // 1. 图片加载动画 - function initImageLoadAnimation() { - var images = document.querySelectorAll('article img[loading="lazy"], .post-thumbnail img'); - images.forEach(function(img) { - if (img.dataset.loadAnimInit) return; - img.dataset.loadAnimInit = 'true'; - if (img.complete) { img.classList.add('loaded'); } - else { img.addEventListener('load', function() { this.classList.add('loaded'); }); } - }); - } + // 1. 图片加载动画 + function initImageLoadAnimation() { + var images = document.querySelectorAll('article img[loading="lazy"], .post-thumbnail img'); + images.forEach(function (img) { + if (img.dataset.loadAnimInit) return; + img.dataset.loadAnimInit = 'true'; + if (img.complete) { img.classList.add('loaded'); } + else { img.addEventListener('load', function () { this.classList.add('loaded'); }); } + }); + } - // 3. 滚动入场动画 - function initScrollAnimations() { - if (!('IntersectionObserver' in window)) return; - var animatedElements = document.querySelectorAll('.article-list article.post, .comment-item, .timeline-item, .friend-link-item, #leftbar .card, #rightbar .card'); - var observer = new IntersectionObserver(function(entries) { - entries.forEach(function(entry) { - if (entry.isIntersecting) { entry.target.classList.add('animate-in'); observer.unobserve(entry.target); } - }); - }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); - animatedElements.forEach(function(el) { if (!el.classList.contains('animate-in')) observer.observe(el); }); - } + // 3. 滚动入场动画 + function initScrollAnimations() { + if (!('IntersectionObserver' in window)) return; + var animatedElements = document.querySelectorAll('.article-list article.post, .comment-item, .timeline-item, .friend-link-item, #leftbar .card, #rightbar .card'); + var observer = new IntersectionObserver(function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { entry.target.classList.add('animate-in'); observer.unobserve(entry.target); } + }); + }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); + animatedElements.forEach(function (el) { if (!el.classList.contains('animate-in')) observer.observe(el); }); + } - // 4. 平滑滚动 - function initSmoothScroll() { - document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { - if (anchor.dataset.smoothScrollInit) return; - anchor.dataset.smoothScrollInit = 'true'; - anchor.addEventListener('click', function(e) { - var targetId = this.getAttribute('href'); - if (targetId === '#') return; - var target = document.querySelector(targetId); - if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } - }); - }); - } + // 4. 平滑滚动 + function initSmoothScroll() { + document.querySelectorAll('a[href^="#"]').forEach(function (anchor) { + if (anchor.dataset.smoothScrollInit) return; + anchor.dataset.smoothScrollInit = 'true'; + anchor.addEventListener('click', function (e) { + var targetId = this.getAttribute('href'); + if (targetId === '#') return; + var target = document.querySelector(targetId); + if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } + }); + }); + } - // 5. 页面加载进度条 - function initLoadingBar() { - if (document.getElementById('page-loading-bar')) return; - var bar = document.createElement('div'); - bar.id = 'page-loading-bar'; - bar.style.width = '0%'; - document.body.appendChild(bar); - var progress = 0; - var interval = setInterval(function() { - progress += Math.random() * 10; - if (progress >= 90) { clearInterval(interval); progress = 90; } - bar.style.width = progress + '%'; - }, 100); - var overlay = document.getElementById('article-loading-overlay'); - if (!overlay) { - overlay = document.createElement('div'); - overlay.id = 'article-loading-overlay'; - var inner = document.createElement('div'); - inner.className = 'overlay-content'; - inner.innerHTML = '
    '; - overlay.appendChild(inner); - document.body.appendChild(overlay); - } - overlay.classList.remove('is-hiding'); - requestAnimationFrame(function() { - overlay.classList.add('is-visible'); - }); - window.addEventListener('load', function() { - clearInterval(interval); - bar.style.width = '100%'; - setTimeout(function() { bar.style.opacity = '0'; setTimeout(function() { bar.remove(); }, 300); }, 200); - if (overlay) { - overlay.classList.remove('is-visible'); - overlay.classList.add('is-hiding'); - setTimeout(function() { if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); }, 360); - } - }); - } + // 5. 页面加载进度条 + function initLoadingBar() { + if (document.getElementById('page-loading-bar')) return; + var bar = document.createElement('div'); + bar.id = 'page-loading-bar'; + bar.style.width = '0%'; + document.body.appendChild(bar); + var progress = 0; + var interval = setInterval(function () { + progress += Math.random() * 10; + if (progress >= 90) { clearInterval(interval); progress = 90; } + bar.style.width = progress + '%'; + }, 100); + var overlay = document.getElementById('article-loading-overlay'); + if (!overlay) { + overlay = document.createElement('div'); + overlay.id = 'article-loading-overlay'; + var inner = document.createElement('div'); + inner.className = 'overlay-content'; + inner.innerHTML = '
    '; + overlay.appendChild(inner); + document.body.appendChild(overlay); + } + overlay.classList.remove('is-hiding'); + requestAnimationFrame(function () { + overlay.classList.add('is-visible'); + }); + window.addEventListener('load', function () { + clearInterval(interval); + bar.style.width = '100%'; + setTimeout(function () { bar.style.opacity = '0'; setTimeout(function () { bar.remove(); }, 300); }, 200); + if (overlay) { + overlay.classList.remove('is-visible'); + overlay.classList.add('is-hiding'); + setTimeout(function () { if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); }, 360); + } + }); + } - // 6. PJAX 加载动画 - function initPjaxAnimations() { - if (typeof jQuery === 'undefined') return; - jQuery(document).on('pjax:start', function() { - jQuery('#primary').addClass('pjax-loading'); - var bar = document.getElementById('page-loading-bar'); - if (!bar) { bar = document.createElement('div'); bar.id = 'page-loading-bar'; document.body.appendChild(bar); } - bar.style.opacity = '1'; bar.style.width = '30%'; - setTimeout(function() { bar.style.width = '60%'; }, 200); - var overlay = document.getElementById('article-loading-overlay'); - if (!overlay) { - overlay = document.createElement('div'); - overlay.id = 'article-loading-overlay'; - var inner = document.createElement('div'); - inner.className = 'overlay-content'; - inner.innerHTML = '
    '; - overlay.appendChild(inner); - document.body.appendChild(overlay); - } - overlay.classList.remove('is-hiding'); - requestAnimationFrame(function() { - overlay.classList.add('is-visible'); - }); - }); - jQuery(document).on('pjax:end', function() { - jQuery('#primary').removeClass('pjax-loading'); - var bar = document.getElementById('page-loading-bar'); - if (bar) { bar.style.width = '100%'; setTimeout(function() { bar.style.opacity = '0'; setTimeout(function() { bar.remove(); }, 300); }, 200); } - setTimeout(function() { initImageLoadAnimation(); initScrollAnimations(); initSmoothScroll(); }, 100); - var overlay = document.getElementById('article-loading-overlay'); - if (overlay) { - overlay.classList.remove('is-visible'); - overlay.classList.add('is-hiding'); - setTimeout(function() { if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); }, 360); - } - }); - } + // 6. PJAX 加载动画 + function initPjaxAnimations() { + if (typeof jQuery === 'undefined') return; + jQuery(document).on('pjax:start', function () { + jQuery('#primary').addClass('pjax-loading'); + var bar = document.getElementById('page-loading-bar'); + if (!bar) { bar = document.createElement('div'); bar.id = 'page-loading-bar'; document.body.appendChild(bar); } + bar.style.opacity = '1'; bar.style.width = '30%'; + setTimeout(function () { bar.style.width = '60%'; }, 200); + var overlay = document.getElementById('article-loading-overlay'); + if (!overlay) { + overlay = document.createElement('div'); + overlay.id = 'article-loading-overlay'; + var inner = document.createElement('div'); + inner.className = 'overlay-content'; + inner.innerHTML = '
    '; + overlay.appendChild(inner); + document.body.appendChild(overlay); + } + overlay.classList.remove('is-hiding'); + requestAnimationFrame(function () { + overlay.classList.add('is-visible'); + }); + }); + jQuery(document).on('pjax:end', function () { + jQuery('#primary').removeClass('pjax-loading'); + var bar = document.getElementById('page-loading-bar'); + if (bar) { bar.style.width = '100%'; setTimeout(function () { bar.style.opacity = '0'; setTimeout(function () { bar.remove(); }, 300); }, 200); } + setTimeout(function () { initArticleSkeletons(); initImageLoadAnimation(); initScrollAnimations(); initSmoothScroll(); }, 100); + var overlay = document.getElementById('article-loading-overlay'); + if (overlay) { + overlay.classList.remove('is-visible'); + overlay.classList.add('is-hiding'); + setTimeout(function () { if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); }, 360); + } + }); + } - // 7. 主题切换动画 - 已在 header.php 中通过 setDarkmode 函数处理,此处不再重复 - function initThemeTransition() { - // 移除 MutationObserver 避免无限循环导致内存泄漏 - // 主题切换过渡效果已在 setDarkmode() 函数中实现 - } + // 7. 主题切换动画 - 已在 header.php 中通过 setDarkmode 函数处理,此处不再重复 + function initThemeTransition() { + // 移除 MutationObserver 避免无限循环导致内存泄漏 + // 主题切换过渡效果已在 setDarkmode() 函数中实现 + } - // 8. 减少动画偏好检查 - function checkReducedMotion() { - if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { - document.documentElement.classList.add('reduced-motion'); - } - } + // 7.1 骨架屏加载动画 (Skeleton Screen) + function initArticleSkeletons() { + if (typeof jQuery === 'undefined') return; + var $articles = jQuery('.article-list article.post:not(.skeleton-processed)'); + if ($articles.length === 0) return; - // 初始化 - function init() { - checkReducedMotion(); - initImageLoadAnimation(); - initScrollAnimations(); - initSmoothScroll(); - initPjaxAnimations(); - initThemeTransition(); - } + $articles.each(function () { + var $this = jQuery(this); + $this.addClass('skeleton-processed skeleton-loading'); - if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } - else { init(); } - if (document.readyState !== 'complete') { initLoadingBar(); } + // 构造骨架屏 DOM + var skeletonHtml = + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    '; + + var $skeleton = jQuery(skeletonHtml); + $this.prepend($skeleton); + + setTimeout(function () { + $this.removeClass('skeleton-loading'); + setTimeout(function () { + $skeleton.remove(); + }, 400); // 配合 CSS 的 0.4s transition + }, 800); // 骨架屏显示 800ms + }); + } + + // 8. 减少动画偏好检查 + function checkReducedMotion() { + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + document.documentElement.classList.add('reduced-motion'); + } + } + + // 初始化 + function init() { + initArticleSkeletons(); + checkReducedMotion(); + initImageLoadAnimation(); + initScrollAnimations(); + initSmoothScroll(); + initPjaxAnimations(); + initThemeTransition(); + } + + if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } + else { init(); } + if (document.readyState !== 'complete') { initLoadingBar(); } })(); /* ========== End of Modern UI Enhancements ========== */ // ========== jQuery Easing 备用(确保在所有脚本加载后仍可用)========== -(function() { - if (typeof jQuery === 'undefined') return; - var $ = jQuery; - if (!$.easing) $.easing = {}; - if (!$.easing.easeOutCirc) { - $.easing.easeOutCirc = function(x) { - return Math.sqrt(1 - Math.pow(x - 1, 2)); - }; - } - if (!$.easing.easeOutExpo) { - $.easing.easeOutExpo = function(x) { - return x === 1 ? 1 : 1 - Math.pow(2, -10 * x); - }; - } +(function () { + if (typeof jQuery === 'undefined') return; + var $ = jQuery; + if (!$.easing) $.easing = {}; + if (!$.easing.easeOutCirc) { + $.easing.easeOutCirc = function (x) { + return Math.sqrt(1 - Math.pow(x - 1, 2)); + }; + } + if (!$.easing.easeOutExpo) { + $.easing.easeOutExpo = function (x) { + return x === 1 ? 1 : 1 - Math.pow(2, -10 * x); + }; + } })(); diff --git a/footer.php b/footer.php index 2c36eeb..dd81527 100644 --- a/footer.php +++ b/footer.php @@ -161,6 +161,55 @@ + + + diff --git a/functions.php b/functions.php index ce4ce6e..9f1fa79 100644 --- a/functions.php +++ b/functions.php @@ -5270,15 +5270,31 @@ function argon_get_duolingo_data() { } } - $url = 'https://www.duolingo.com/2017-06-30/users?username=' . urlencode($username) . '&fields=streak,streakData%7BcurrentStreak,previousStreak%7D%7D'; + $url = 'https://www.duolingo.com/2017-06-30/users?username=' . urlencode($username) . '&fields=id,streak,streakData%7BcurrentStreak,previousStreak%7D,quests,friendStreaks,friendships,following'; + $headers = array( + 'User-Agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36' + ); + $jwt = get_option('argon_duolingo_jwt', ''); + if (!empty($jwt)) { + $headers['Authorization'] = 'Bearer ' . $jwt; + } + $response = wp_remote_get($url, array( - 'timeout' => 10, - 'headers' => array( - 'User-Agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' - ) + 'timeout' => 15, + 'headers' => $headers )); + // 如果返回了诸如 401/403 错误(JWT 过期或无效),尝试移除 JWT 重新获取,确保基础连胜可见 + if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) !== 200 && !empty($jwt)) { + unset($headers['Authorization']); + $response = wp_remote_get($url, array( + 'timeout' => 15, + 'headers' => $headers + )); + $jwt = ''; // 标记为无效,后续不请求私有好友连胜数据 + } + if (is_wp_error($response)) { // 请求失败时返回旧缓存(如果有) return $cached !== false ? $cached : false; @@ -5305,10 +5321,48 @@ function argon_get_duolingo_data() { $end_date = isset($user['streakData']['currentStreak']['endDate']) ? $user['streakData']['currentStreak']['endDate'] : ''; $is_today_done = ($end_date === $today); + // 尝试解析好友连胜 (Friend Streak) + $friend_streak = 0; + + // 只有在 JWT 有效时才继续拉取私密接口 + if (!empty($jwt)) { + // 请求额外的好友连胜数据 + $user_id = isset($user['id']) ? $user['id'] : 0; + if ($user_id) { + $friend_url = 'https://www.duolingo.com/2017-06-30/friends/users/' . $user_id . '?fields=friendStreaks'; + $friend_resp = wp_remote_get($friend_url, array('timeout' => 15, 'headers' => $headers)); + if (!is_wp_error($friend_resp)) { + $friend_body = wp_remote_retrieve_body($friend_resp); + $friend_data = json_decode($friend_body, true); + + // 写出诊断日志以便开发者后续找字段 + $debug_info = array('user_api' => $user, 'friend_api' => $friend_data); + file_put_contents(get_template_directory() . '/duolingo_debug.json', json_encode($debug_info, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)); + + // 暂时尝试猜测常用名字 + if (isset($user['friendStreaks'])) { + // 如果是在 user 对象里 + foreach ((array)$user['friendStreaks'] as $fs) { + if (isset($fs['streakLength']) && $fs['streakLength'] > $friend_streak) $friend_streak = $fs['streakLength']; + if (isset($fs['length']) && $fs['length'] > $friend_streak) $friend_streak = $fs['length']; + } + } + if (isset($friend_data['friendStreaks'])) { + // 如果是在 friends 对象里 + foreach ((array)$friend_data['friendStreaks'] as $fs) { + if (isset($fs['streakLength']) && $fs['streakLength'] > $friend_streak) $friend_streak = $fs['streakLength']; + if (isset($fs['length']) && $fs['length'] > $friend_streak) $friend_streak = $fs['length']; + } + } + } + } + } + $result = array( 'streak' => $streak, 'today' => $is_today_done, - 'date' => $today + 'date' => $today, + 'friend_streak' => $friend_streak > 0 ? $friend_streak : '' ); // 如果今日已完成,缓存到明天0点;否则缓存15分钟 diff --git a/settings.php b/settings.php index 675a26b..9f039f0 100644 --- a/settings.php +++ b/settings.php @@ -1529,6 +1529,14 @@ function themeoptions_page(){ + + + + +

    Cookies 里找到 jwt 并填入,用于自动获取友情连胜数据', 'argon');?>

    + + +

    @@ -6882,6 +6890,14 @@ function argon_update_themeoptions(){ argon_update_option('argon_show_duolingo_streak'); argon_update_option('argon_duolingo_username'); + if (isset($_POST['argon_duolingo_jwt'])) { + argon_update_option('argon_duolingo_jwt'); + } + delete_option('argon_duolingo_friend_streak'); + + // Clean up old transient and options + delete_option('argon_duolingo_email'); + delete_transient('argon_duo_login_error'); argon_update_option('argon_banner_title'); diff --git a/sidebar.php b/sidebar.php index 94c9922..d3e47ab 100644 --- a/sidebar.php +++ b/sidebar.php @@ -564,16 +564,17 @@ $author_desc = get_option('argon_sidebar_author_description'); var headIndexInstance = $(document).data('headIndex'); // 添加额外的滚动监听,确保目录跟随 - var scrollTimer = null; + var scrollTicking = false; $(window).on('scroll.desktopCatalog', function() { - if (scrollTimer) { - clearTimeout(scrollTimer); + if (!scrollTicking) { + scrollTicking = true; + requestAnimationFrame(function() { + if (headIndexInstance && typeof headIndexInstance.updateCurrent === 'function') { + headIndexInstance.updateCurrent(); + } + scrollTicking = false; + }); } - scrollTimer = setTimeout(function() { - if (headIndexInstance && typeof headIndexInstance.updateCurrent === 'function') { - headIndexInstance.updateCurrent(); - } - }, 100); }); // PJAX 后重新绑定 @@ -663,8 +664,10 @@ $author_desc = get_option('argon_sidebar_author_description'); $duo_data = argon_get_duolingo_data(); if ($duo_data !== false) : $is_today_done = isset($duo_data['today']) && $duo_data['today']; + $duo_friend_streak = isset($duo_data['friend_streak']) ? $duo_data['friend_streak'] : ''; + $tooltip_attr = !empty($duo_friend_streak) ? ' data-toggle="tooltip" data-placement="bottom" title="' . esc_attr(sprintf(__('友情连胜: %s天', 'argon'), $duo_friend_streak)) . '"' : ''; ?> - + > streak diff --git a/style.css b/style.css index 5551b56..4240342 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ Author URI: https://solstice23.top/ Description: 轻盈、简洁、美观的 Wordpress 主题 -Version: 1.5.0 +Version: 1.5.1 License: GNU General Public License v3.0 @@ -53,7 +53,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html - --color-tint-70: + --color-tint-70: calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.7), @@ -61,7 +61,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.7); - --color-tint-78: + --color-tint-78: calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.78), @@ -69,7 +69,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.78); - --color-tint-80: + --color-tint-80: calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.8), @@ -77,7 +77,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.8); - --color-tint-82: + --color-tint-82: calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.82), @@ -85,7 +85,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.82); - --color-tint-86: + --color-tint-86: calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.86), @@ -93,7 +93,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.86); - --color-tint-92: + --color-tint-92: calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.92), @@ -101,7 +101,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.92); - --color-tint-95: + --color-tint-95: calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.95), @@ -109,7 +109,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.95); - --color-shade-70: + --color-shade-70: calc(30 * 0.7 + var(--themecolor-R) * (1 - 0.7)), @@ -117,7 +117,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(30 * 0.7 + var(--themecolor-B) * (1 - 0.7)); - --color-shade-75: + --color-shade-75: calc(30 * 0.75 + var(--themecolor-R) * (1 - 0.75)), @@ -125,7 +125,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(30 * 0.75 + var(--themecolor-B) * (1 - 0.75)); - --color-shade-80: + --color-shade-80: calc(30 * 0.8 + var(--themecolor-R) * (1 - 0.8)), @@ -133,7 +133,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(30 * 0.8 + var(--themecolor-B) * (1 - 0.8)); - --color-shade-82: + --color-shade-82: calc(30 * 0.82 + var(--themecolor-R) * (1 - 0.82)), @@ -141,7 +141,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(30 * 0.82 + var(--themecolor-B) * (1 - 0.82)); - --color-shade-86: + --color-shade-86: calc(30 * 0.86 + var(--themecolor-R) * (1 - 0.86)), @@ -149,7 +149,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(30 * 0.86 + var(--themecolor-B) * (1 - 0.86)); - --color-shade-90: + --color-shade-90: calc(30 * 0.9 + var(--themecolor-R) * (1 - 0.9)), @@ -157,7 +157,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(30 * 0.9 + var(--themecolor-B) * (1 - 0.9)); - --color-shade-94: + --color-shade-94: calc(30 * 0.94 + var(--themecolor-R) * (1 - 0.94)), @@ -165,7 +165,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(30 * 0.94 + var(--themecolor-B) * (1 - 0.94)); - --color-shade-96: + --color-shade-96: calc(30 * 0.96 + var(--themecolor-R) * (1 - 0.96)), @@ -173,7 +173,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.html calc(30 * 0.96 + var(--themecolor-B) * (1 - 0.96)); - --color-tint-blue: + --color-tint-blue: calc(204 * 0.6 + var(--themecolor-R) * (1 - 0.6)), @@ -341,11 +341,12 @@ html.immersion-color.darkmode body { html { transition: none; } + html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { - transition: + transition: background-color 250ms var(--ease-standard), border-color 250ms var(--ease-standard), color 200ms var(--ease-standard), @@ -584,7 +585,7 @@ article img, } -.shuoshuo-preview-container p + p > img:first-child { +.shuoshuo-preview-container p+p>img:first-child { margin-top: 12px; @@ -764,9 +765,9 @@ html:not(.disable-codeblock-style) article code:not([hljs-codeblock-inner]) { } -html:not(.disable-codeblock-style) article .post-content > code:not([hljs-codeblock-inner]), +html:not(.disable-codeblock-style) article .post-content>code:not([hljs-codeblock-inner]), -article .post-content > p > code:not([hljs-codeblock-inner]) { +article .post-content>p>code:not([hljs-codeblock-inner]) { padding: 2px 5px; @@ -850,17 +851,17 @@ article table { } -article table > tbody > tr > td, +article table>tbody>tr>td, -article table > tbody > tr > th, +article table>tbody>tr>th, -article table > tfoot > tr > td, +article table>tfoot>tr>td, -article table > tfoot > tr > th, +article table>tfoot>tr>th, -article table > thead > tr > td, +article table>thead>tr>td, -article table > thead > tr > th { +article table>thead>tr>th { padding: 1rem; @@ -876,17 +877,17 @@ article table > thead > tr > th { } -article figure.is-style-stripes table > tbody > tr > td, +article figure.is-style-stripes table>tbody>tr>td, -article figure.is-style-stripes table > tbody > tr > th, +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>td, -article figure.is-style-stripes table > tfoot > tr > th, +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>td, -article figure.is-style-stripes table > thead > tr > th { +article figure.is-style-stripes table>thead>tr>th { border: none !important; @@ -1213,11 +1214,11 @@ a.text-primary:hover { color: #fff !important; } -.custom-toggle input:checked + .custom-toggle-slider { +.custom-toggle input:checked+.custom-toggle-slider { border-color: var(--themecolor); } -.custom-toggle input:checked + .custom-toggle-slider:before { +.custom-toggle input:checked+.custom-toggle-slider:before { background-color: var(--themecolor); } @@ -1237,13 +1238,13 @@ a.text-primary:hover { .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; + 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 { +.show>.btn-primary.dropdown-toggle { border-color: var(--themecolor-dark2) !important; background-color: var(--themecolor-dark2) !important; color: #fff !important; @@ -1251,7 +1252,7 @@ a.text-primary:hover { .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, -.show > .btn-primary.dropdown-toggle:focus { +.show>.btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.5) !important; } @@ -1280,7 +1281,7 @@ a.text-primary:hover { .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, -.show > .btn-outline-primary.dropdown-toggle { +.show>.btn-outline-primary.dropdown-toggle { border-color: var(--themecolor) !important; background-color: var(--themecolor) !important; color: #fff !important; @@ -1311,11 +1312,11 @@ a.text-primary:hover { .page-item.active .page-link, -.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, +.custom-checkbox .custom-control-input:checked~.custom-control-label::before, -.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, +.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before, -.custom-control-input:not(:disabled):active ~ .custom-control-label::before { +.custom-control-input:not(:disabled):active~.custom-control-label::before { border-color: var(--themecolor) !important; @@ -1405,21 +1406,11 @@ html.is-home.banner-as-cover #content { #main.site-main { - background-color: rgba(255, 255, 255, calc(var(--card-opacity) * 0.35)); - - -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); - - backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); - border-radius: var(--card-radius); } -html.darkmode #main.site-main { - background-color: rgba(66, 66, 66, calc(var(--card-opacity) * 0.35)); - -} #main.waterflow { @@ -1472,12 +1463,15 @@ html.single-column #leftbar { 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; } @@ -1549,7 +1543,7 @@ html.single-column .page-information-card { } -#rightbar > .card { +#rightbar>.card { margin-left: 10px; @@ -1561,7 +1555,7 @@ html.single-column .page-information-card { } -#rightbar > .card ul { +#rightbar>.card ul { list-style: none; @@ -1569,13 +1563,13 @@ html.single-column .page-information-card { } -#rightbar > .card ul li { +#rightbar>.card ul li { margin-bottom: 5px; } -#rightbar > .card > h6 { +#rightbar>.card>h6 { margin-bottom: 15px; @@ -2108,13 +2102,13 @@ html.banner-mini .banner { } -html.banner-mini .banner > .banner-container { +html.banner-mini .banner>.banner-container { height: unset !important; } -html.banner-mini .banner > .banner-container > .banner-title { +html.banner-mini .banner>.banner-container>.banner-title { position: unset; @@ -2242,7 +2236,7 @@ html:not(.is-home) .cover-scroll-down { } -.leftbar-menu-item:hover > .leftbar-menu-subitem { +.leftbar-menu-item:hover>.leftbar-menu-subitem { opacity: 1; @@ -2302,13 +2296,13 @@ html:not(.is-home) .cover-scroll-down { } -#leftbar_part1_menu > .leftbar-menu-item > .leftbar-menu-subitem { +#leftbar_part1_menu>.leftbar-menu-item>.leftbar-menu-subitem { left: calc(100% + 12px); } -#leftbar_part1_menu > .leftbar-menu-item > .leftbar-menu-subitem:before { +#leftbar_part1_menu>.leftbar-menu-item>.leftbar-menu-subitem:before { width: 12px; @@ -2316,19 +2310,19 @@ html:not(.is-home) .cover-scroll-down { } -.leftbar-menu-subitem > .leftbar-menu-item:first-child a { +.leftbar-menu-subitem>.leftbar-menu-item:first-child a { border-radius: 3px 3px 0 0; } -.leftbar-menu-subitem > .leftbar-menu-item:last-child a { +.leftbar-menu-subitem>.leftbar-menu-item:last-child a { border-radius: 0 0 3px 3px; } -.leftbar-menu-item > a { +.leftbar-menu-item>a { display: block; @@ -2360,15 +2354,15 @@ html:not(.is-home) .cover-scroll-down { } -.leftbar-menu-item > a:hover, +.leftbar-menu-item>a:hover, -.leftbar-menu-item.current > a { +.leftbar-menu-item.current>a { background-color: var(--color-border-on-foreground); } -.leftbar-menu-item > a > i { +.leftbar-menu-item>a>i { margin-right: 8px; @@ -2575,7 +2569,7 @@ html.darkmode #leftbar_tab_catalog::-webkit-scrollbar-thumb { } -.sidebar-tab-switcher > a { +.sidebar-tab-switcher>a { padding-bottom: 5px; @@ -2585,13 +2579,13 @@ html.darkmode #leftbar_tab_catalog::-webkit-scrollbar-thumb { } -.sidebar-tab-switcher > a.active { +.sidebar-tab-switcher>a.active { border-bottom: 1px solid var(--themecolor); } -html.darkmode .sidebar-tab-switcher > a.active { +html.darkmode .sidebar-tab-switcher>a.active { border-bottom: 1px solid var(--themecolor-light); @@ -2665,7 +2659,7 @@ html.darkmode .sidebar-tab-switcher > a.active { } -.site-state-item > a { +.site-state-item>a { cursor: pointer; @@ -2761,7 +2755,7 @@ html.darkmode .sidebar-tab-switcher > a.active { } -.site-author-links-item > a { +.site-author-links-item>a { display: block; @@ -2813,7 +2807,7 @@ html.darkmode .sidebar-tab-switcher > a.active { } -.site-friend-links-item > a { +.site-friend-links-item>a { max-width: 280px; @@ -2901,9 +2895,9 @@ html.darkmode #leftbar_announcement { } -#leftbar_tab_tools > div > h6:first-child, +#leftbar_tab_tools>div>h6:first-child, -#leftbar_tab_tools .wp-block-group__inner-container > h6:first-child { +#leftbar_tab_tools .wp-block-group__inner-container>h6:first-child { font-size: 17px; @@ -2917,9 +2911,9 @@ html.darkmode #leftbar_announcement { } -#leftbar_tab_tools > div > h6:first-child:after, +#leftbar_tab_tools>div>h6:first-child:after, -#leftbar_tab_tools .wp-block-group__inner-container > h6:first-child:after { +#leftbar_tab_tools .wp-block-group__inner-container>h6:first-child:after { content: ""; @@ -3118,7 +3112,7 @@ html.darkmode .wp-block-calendar tbody td { display: flex; flex-direction: column; align-items: center; - transition: + transition: opacity var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard); } @@ -3172,11 +3166,11 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { border-radius: var(--card-radius) !important; background-color: var(--color-foreground) !important; color: var(--themecolor) !important; - box-shadow: + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04); cursor: pointer; - transition: + transition: background-color var(--animation-fast) var(--ease-standard), color var(--animation-fast) var(--ease-standard), transform var(--animation-normal) var(--ease-spring), @@ -3192,7 +3186,7 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { color: #fff !important; background-color: var(--themecolor) !important; transform: translateY(-3px) scale(1.05); - box-shadow: + box-shadow: 0 6px 20px rgba(var(--themecolor-rgbstr), 0.35), 0 12px 28px rgba(var(--themecolor-rgbstr), 0.2) !important; } @@ -3201,7 +3195,7 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { color: #fff !important; background-color: var(--themecolor-dark) !important; transform: translateY(-1px) scale(0.98); - box-shadow: + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.25) !important; } @@ -3321,13 +3315,13 @@ html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { opacity: 0; pointer-events: none; transform: translateX(12px) scale(0.96); - transition: + 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: + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); @@ -3381,7 +3375,7 @@ html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { /* 暗色模式浮动按钮 */ html.darkmode .fabtn { color: #ddd; - box-shadow: + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15); } @@ -3389,13 +3383,13 @@ html.darkmode .fabtn { html.darkmode .fabtn:hover { color: #fff !important; background-color: var(--themecolor) !important; - box-shadow: + 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: + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25); } @@ -3408,7 +3402,7 @@ html.darkmode #fabtn_blog_settings_popup { } /* 设置面板标题样式 */ -.blog-setting-item > div:first-child { +.blog-setting-item>div:first-child { font-weight: 500; color: var(--color-text-deeper); } @@ -3497,7 +3491,9 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { .blog-setting-shadow:hover { - color: #fff /*var(--themecolor)*/; + color: #fff + /*var(--themecolor)*/ + ; /*background-color: transparent !important;*/ @@ -3513,15 +3509,15 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { 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); } @@ -3537,15 +3533,15 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { 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); } @@ -3555,7 +3551,7 @@ 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); } @@ -3565,7 +3561,7 @@ html.use-serif #blog_setting_font_serif { color: #fff; background: var(--themecolor); - + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); } @@ -3575,7 +3571,7 @@ 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); } @@ -3585,7 +3581,7 @@ html.use-big-shadow #blog_setting_shadow_big { color: #fff; background: var(--themecolor); - + box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); } @@ -3607,7 +3603,7 @@ html.use-big-shadow #blog_setting_shadow_big { cursor: pointer; font-size: 12px; - + font-weight: 500; transition: all var(--animation-fast) var(--ease-standard); @@ -3617,7 +3613,7 @@ html.use-big-shadow #blog_setting_shadow_big { .blog-setting-filter-btn:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); - + transform: translateY(-2px); } @@ -4054,7 +4050,7 @@ html.filter-grayscale { } -.post-outdated-info > i { +.post-outdated-info>i { font-size: 20px; @@ -4064,7 +4060,7 @@ html.filter-grayscale { } -.post-header-with-thumbnail + .post-content > .post-outdated-info { +.post-header-with-thumbnail+.post-content>.post-outdated-info { margin-top: -15px; @@ -4092,7 +4088,7 @@ html.filter-grayscale { } -.post-tags > i { +.post-tags>i { margin-right: 5px; @@ -4108,7 +4104,7 @@ html.filter-grayscale { } -.additional-content-after-post + .post-tags { +.additional-content-after-post+.post-tags { margin-top: 12px; @@ -4268,37 +4264,37 @@ sup.reference:focus { } -.tippy-box[data-theme~="light"][data-placement^="top"] > .tippy-arrow:before { +.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 { +.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 { +.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 { +.tippy-box[data-theme~="light"][data-placement^="right"]>.tippy-arrow:before { border-right-color: var(--color-widgets); } -.tippy-box[data-theme~="light"] > .tippy-backdrop { +.tippy-box[data-theme~="light"]>.tippy-backdrop { background-color: var(--color-widgets); } -.tippy-box[data-theme~="light"] > .tippy-svg-arrow { +.tippy-box[data-theme~="light"]>.tippy-svg-arrow { fill: var(--color-widgets); @@ -4386,19 +4382,19 @@ html.darkmode .tippy-box[data-theme~="light"] { } -.reference-list li > div > *:first-child { +.reference-list li>div>*:first-child { margin-right: 5px; } -.reference-list li > div > sup { +.reference-list li>div>sup { margin-left: 1px; } -.reference-list li > div > sup:last-of-type { +.reference-list li>div>sup:last-of-type { margin-right: 5px; @@ -4504,7 +4500,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { } -#leftbar_catalog .index-item.current > .index-link { +#leftbar_catalog .index-item.current>.index-link { color: var(--themecolor); @@ -4546,7 +4542,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { } -.search-filter-wrapper > .custom-control-label { +.search-filter-wrapper>.custom-control-label { line-height: 25px; @@ -4826,7 +4822,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } -.post-donate .donate-btn:focus ~ .donate-qrcode { +.post-donate .donate-btn:focus~.donate-qrcode { transform: translateX(-50%); @@ -4899,8 +4895,9 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } /* 评论折叠功能 - Material 3 动画优化 */ -#comments, #post_comment { - transition: +#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), @@ -4908,7 +4905,8 @@ html.darkmode .has-thumbnail .related-post-title.clamp { will-change: opacity, max-height; } -#comments.comments-collapsed, #post_comment.comments-collapsed { +#comments.comments-collapsed, +#post_comment.comments-collapsed { overflow: hidden; } @@ -4956,7 +4954,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { transform: rotate(360deg); } -#comments > .card-body { +#comments>.card-body { transition: opacity 0.5s ease; @@ -4964,7 +4962,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } -#comments.comments-loading > .card-body { +#comments.comments-loading>.card-body { opacity: 0.5; @@ -4980,7 +4978,8 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } -#comments .comment-item:target:before, #comments .comment-item:before { +#comments .comment-item:target:before, +#comments .comment-item:before { content: ""; @@ -5010,7 +5009,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } -#comments .comment-item:before{ +#comments .comment-item:before { animation: none; @@ -5020,7 +5019,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { } -#comments .comment-item.highlight:before{ +#comments .comment-item.highlight:before { opacity: 0.2; @@ -5113,7 +5112,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { 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); + box-shadow var(--animation-fast, 0.15s) var(--ease-standard, ease); } .comment-item:hover .comment-item-avatar .avatar { @@ -5239,7 +5238,7 @@ html.darkmode .comment-item-avatar .avatar { opacity: 0.6; } -.comment-info > div { +.comment-info>div { display: inline-block; white-space: nowrap; flex-shrink: 0; @@ -5279,7 +5278,7 @@ html.darkmode .comment-item-avatar .avatar { opacity: 0.8; } -.comment-edited > i { +.comment-edited>i { margin-right: 4px; } @@ -5347,7 +5346,7 @@ html.darkmode .comment-operations { opacity: 0.7; } -.comment-useragent > svg { +.comment-useragent>svg { height: 16px; width: 16px; transform: translateY(-1px); @@ -5456,8 +5455,15 @@ html.darkmode .comment-upvote:hover { } @keyframes upvote-pulse { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.2); } + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } } /*评论内容*/ @@ -5822,7 +5828,7 @@ html.darkmode .comment-item-text blockquote { /*评论区页面*/ -.comments-navigation .page-item > div { +.comments-navigation .page-item>div { cursor: pointer; @@ -5961,10 +5967,10 @@ html.darkmode .comment-edit-history-item { border-radius: 16px; padding: 20px; background: var(--color-foreground); - box-shadow: + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); - transition: + transition: box-shadow var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard); } @@ -5974,19 +5980,19 @@ html.darkmode .comment-edit-history-item { } #post_comment.card:hover { - box-shadow: + 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: + 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: + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.2); } @@ -6117,6 +6123,7 @@ html.darkmode .post-comment-reply-preview { opacity: 0; transform: scaleY(0.8) translateY(-10px); } + to { opacity: 1; transform: scaleY(1) translateY(0); @@ -6128,6 +6135,7 @@ html.darkmode .post-comment-reply-preview { opacity: 1; transform: scaleY(1) translateY(0); } + to { opacity: 0; transform: scaleY(0.8) translateY(-10px); @@ -6166,17 +6174,17 @@ html.darkmode .post-comment-reply-preview { 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); } @@ -6378,7 +6386,7 @@ html.darkmode .post-comment-reply-preview { .comment-post-checkbox .custom-control-label { line-height: 26px; - + font-size: 13px; } @@ -6537,7 +6545,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri border-radius: 100px; color: var(--themecolor); - + opacity: 1; } @@ -6576,7 +6584,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -#comment_emotion_btn.comment-emotion-keyboard-open + .emotion-keyboard { +#comment_emotion_btn.comment-emotion-keyboard-open+.emotion-keyboard { opacity: 1; @@ -6632,7 +6640,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.emotion-item > img { +.emotion-item>img { max-height: 60px; @@ -6646,7 +6654,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.emotion-item.emotion-item-sticker:hover > img[src^="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nI"] { +.emotion-item.emotion-item-sticker:hover>img[src^="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nI"] { filter: brightness(2); @@ -6660,11 +6668,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.emotion-group:active - - .emotion-item:hover - - > img:not([src^="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nI"]) { +.emotion-group:active .emotion-item:hover>img:not([src^="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nI"]) { transition: all 0.3s ease; @@ -6866,9 +6870,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.admonition-primary > .admonition-title, +.admonition-primary>.admonition-title, -.collapse-block-primary > .collapse-block-title { +.collapse-block-primary>.collapse-block-title { background: #7889e833; @@ -6882,9 +6886,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.admonition-success > .admonition-title, +.admonition-success>.admonition-title, -.collapse-block-success > .collapse-block-title { +.collapse-block-success>.collapse-block-title { background: #4fd69c33; @@ -6898,9 +6902,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.admonition-danger > .admonition-title, +.admonition-danger>.admonition-title, -.collapse-block-danger > .collapse-block-title { +.collapse-block-danger>.collapse-block-title { background: #f7567633; @@ -6914,9 +6918,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.admonition-info > .admonition-title, +.admonition-info>.admonition-title, -.collapse-block-info > .collapse-block-title { +.collapse-block-info>.collapse-block-title { background: #37d5f233; @@ -6930,9 +6934,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.admonition-warning > .admonition-title, +.admonition-warning>.admonition-title, -.collapse-block-warning > .collapse-block-title { +.collapse-block-warning>.collapse-block-title { background: #fc7c5f33; @@ -6946,9 +6950,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.admonition-default > .admonition-title, +.admonition-default>.admonition-title, -.collapse-block-default > .collapse-block-title { +.collapse-block-default>.collapse-block-title { background: #3c4d6933; @@ -6962,9 +6966,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.admonition-grey > .admonition-title, +.admonition-grey>.admonition-title, -.collapse-block-grey > .collapse-block-title { +.collapse-block-grey>.collapse-block-title { background: #88888833; @@ -7164,7 +7168,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.friend-links-style1 .friend-link-links > a { +.friend-links-style1 .friend-link-links>a { margin-right: 12px; @@ -7260,7 +7264,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.friend-links-style2 .friend-link-links > a { +.friend-links-style2 .friend-link-links>a { margin-right: 15px; @@ -7588,13 +7592,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri } -.argon-tabpanel > .tabpanel-header { +.argon-tabpanel>.tabpanel-header { padding: 0; } -.argon-tabpanel > .tabpanel-body { +.argon-tabpanel>.tabpanel-body { background-color: var(--color-widgets) !important; @@ -7664,7 +7668,7 @@ html.darkmode .argon-tabpanel .nav-pills .nav-link { .argon-tabpanel .nav-pills .nav-link.active, -.argon-tabpanel .nav-pills .show > .nav-link { +.argon-tabpanel .nav-pills .show>.nav-link { background-color: var(--themecolor) !important; @@ -7875,25 +7879,23 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { } -.iziToast > .iziToast-close { +.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: 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 { +.iziToast>.iziToast-body .iziToast-icon { font-size: 18px !important; } -.iziToast > .iziToast-body i.fa-spin:before { +.iziToast>.iziToast-body i.fa-spin:before { animation: fa-spin 2s infinite linear; @@ -8041,9 +8043,9 @@ article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg" } -figure > .fancybox-wrapper, +figure>.fancybox-wrapper, -figure > a > .fancybox-wrapper { +figure>a>.fancybox-wrapper { width: unset; @@ -8057,7 +8059,7 @@ figure > a > .fancybox-wrapper { -.fancybox-wrapper > img { +.fancybox-wrapper>img { cursor: pointer; @@ -8214,7 +8216,7 @@ body.noscroll:before { border-color: var(--themecolor) !important; transform: translateY(0); opacity: 1; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @@ -8239,12 +8241,12 @@ body.noscroll:before { transform: translateY(15px); opacity: 0; pointer-events: none; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 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 > a { +#share>a { opacity: 0; transform: translateY(10px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), @@ -8266,29 +8268,75 @@ body.noscroll:before { } /* 展开时各按钮错落滑入 */ -#share_container.opened #share > a { +#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.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: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 { @@ -8379,12 +8427,12 @@ html.darkmode #share .wechat-qrcode .help { color: var(--color-text); } -#share > a { +#share>a { position: relative; } /* tooltip - 显示在按钮上?*/ -#share > a:before, +#share>a:before, #share_show:before { pointer-events: none; position: absolute; @@ -8406,7 +8454,7 @@ html.darkmode #share .wechat-qrcode .help { opacity: 0; } -#share > a:hover:before, +#share>a:hover:before, #share_show:hover:before { transform: translateX(-50%) translateY(0); opacity: 1; @@ -8453,12 +8501,13 @@ html.darkmode #share .wechat-qrcode .help { /* 移动端分享按钮适配 */ @media (max-width: 576px) { + /* 隐藏 tooltip */ - #share > a:before, + #share>a:before, #share_show:before { display: none !important; } - + /* 二维码弹窗改为左侧显?*/ #share .icon-wechat .wechat-qrcode, #share .icon-copy-link .wechat-qrcode { @@ -8468,12 +8517,12 @@ html.darkmode #share .wechat-qrcode .help { 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%; @@ -8926,7 +8975,7 @@ html[lang] { } -.shuoshuo-content.shuoshuo-folded .show-full-shuoshuo > button { +.shuoshuo-content.shuoshuo-folded .show-full-shuoshuo>button { border-radius: var(--card-radius); @@ -9162,17 +9211,17 @@ html[lang] { /*Highlight.js*/ -article table.hljs-ln > tbody > tr > td, +article table.hljs-ln>tbody>tr>td, -article table.hljs-ln > tbody > tr > th, +article table.hljs-ln>tbody>tr>th, -article table.hljs-ln > tfoot > tr > td, +article table.hljs-ln>tfoot>tr>td, -article table.hljs-ln > tfoot > tr > th, +article table.hljs-ln>tfoot>tr>th, -article table.hljs-ln > thead > tr > td, +article table.hljs-ln>thead>tr>td, -article table.hljs-ln > thead > tr > th { +article table.hljs-ln>thead>tr>th { padding: unset; @@ -9204,9 +9253,7 @@ pre.hljs-codeblock:before { position: absolute; - background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkY1RjU2IiBzdHJva2U9IiNFMDQ0M0UiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iI0ZGQkQyRSIgc3Ryb2tlPSIjREVBMTIzIiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0NiIgY3k9IjYiIHI9IjYiIGZpbGw9IiMyN0M5M0YiIHN0cm9rZT0iIzFBQUIyOSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==) - - no-repeat; + background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkY1RjU2IiBzdHJva2U9IiNFMDQ0M0UiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iI0ZGQkQyRSIgc3Ryb2tlPSIjREVBMTIzIiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0NiIgY3k9IjYiIHI9IjYiIGZpbGw9IiMyN0M5M0YiIHN0cm9rZT0iIzFBQUIyOSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==) no-repeat; background-position-y: center; @@ -9386,7 +9433,7 @@ pre.hljs-codeblock.hljs-codeblock-fullscreen { } -pre.hljs-codeblock.hljs-codeblock-fullscreen > code[hljs-codeblock-inner] { +pre.hljs-codeblock.hljs-codeblock-fullscreen>code[hljs-codeblock-inner] { position: absolute; @@ -9588,7 +9635,7 @@ pre.hljs-codeblock.hljs-codeblock-fullscreen .hljs-control-fullscreen:before { } -pre.hljs-codeblock.hljs-codeblock-fullscreen .hljs-control-fullscreen > i:before { +pre.hljs-codeblock.hljs-codeblock-fullscreen .hljs-control-fullscreen>i:before { content: "\f066"; } @@ -9693,7 +9740,7 @@ html.darkmode ::-webkit-scrollbar-thumb { -html.darkmode .leftbar-menu-item > a { +html.darkmode .leftbar-menu-item>a { color: #eee !important; @@ -9703,9 +9750,9 @@ html.darkmode .leftbar-menu-item > a { html.darkmode .site-state-item-count, -html.darkmode .site-author-links-item > a, +html.darkmode .site-author-links-item>a, -html.darkmode .site-friend-links-item > a { +html.darkmode .site-friend-links-item>a { color: #eee !important; @@ -9743,7 +9790,7 @@ html.darkmode #footer { -html.darkmode .close > span:not(.sr-only) { +html.darkmode .close>span:not(.sr-only) { color: #eee; @@ -9781,7 +9828,7 @@ html.darkmode #leftbar_catalog .index-link { } -html.darkmode #leftbar_catalog .index-item.current > .index-link { +html.darkmode #leftbar_catalog .index-item.current>.index-link { color: var(--themecolor-light); @@ -9930,7 +9977,7 @@ html.darkmode.amoled-dark #content:after { min-height: 100%; background: var(--color-foreground); } - + /* 顶部用户信息?- 增强视觉效果 */ .leftbar-mobile-profile { background: var(--themecolor-gradient); @@ -9939,7 +9986,7 @@ html.darkmode.amoled-dark #content:after { color: #fff; overflow: hidden; } - + /* 背景装饰圆形 */ .leftbar-mobile-profile::before { content: ""; @@ -9952,7 +9999,7 @@ html.darkmode.amoled-dark #content:after { border-radius: 50%; pointer-events: none; } - + .leftbar-mobile-profile::after { content: ""; position: absolute; @@ -9964,7 +10011,7 @@ html.darkmode.amoled-dark #content:after { border-radius: 50%; pointer-events: none; } - + .leftbar-mobile-close { position: absolute; top: 16px; @@ -9985,16 +10032,16 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10007,24 +10054,24 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10036,13 +10083,13 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10056,7 +10103,7 @@ html.darkmode.amoled-dark #content:after { position: relative; z-index: 1; } - + .leftbar-mobile-stat { flex: 1; display: flex; @@ -10064,7 +10111,7 @@ html.darkmode.amoled-dark #content:after { align-items: center; position: relative; } - + .leftbar-mobile-stat:not(:last-child)::after { content: ""; position: absolute; @@ -10075,26 +10122,26 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10105,24 +10152,24 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10131,16 +10178,16 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10150,18 +10197,18 @@ html.darkmode.amoled-dark #content:after { 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 { + + .leftbar-mobile-menu-item>a { display: flex; align-items: center; padding: 14px 16px; @@ -10174,9 +10221,9 @@ html.darkmode.amoled-dark #content:after { position: relative; overflow: hidden; } - + /* 菜单项涟漪效?*/ - .leftbar-mobile-menu-item > a::before { + .leftbar-mobile-menu-item>a::before { content: ""; position: absolute; top: 50%; @@ -10189,23 +10236,23 @@ html.darkmode.amoled-dark #content:after { transition: width 0.4s var(--ease-standard), height 0.4s var(--ease-standard); pointer-events: none; } - - .leftbar-mobile-menu-item > a:active::before { + + .leftbar-mobile-menu-item>a:active::before { width: 200%; height: 200%; } - - .leftbar-mobile-menu-item > a:active { + + .leftbar-mobile-menu-item>a:active { background: rgba(var(--themecolor-rgbstr), 0.1); transform: scale(0.98); } - - .leftbar-mobile-menu-item.current > a { + + .leftbar-mobile-menu-item.current>a { background: rgba(var(--themecolor-rgbstr), 0.1); color: var(--themecolor); } - - .leftbar-mobile-menu-item.current > a::before { + + .leftbar-mobile-menu-item.current>a::before { content: ""; position: absolute; left: 0; @@ -10216,22 +10263,22 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10242,40 +10289,57 @@ html.darkmode.amoled-dark #content:after { 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-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 { + + .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 { + + .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; @@ -10283,13 +10347,13 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10309,7 +10373,7 @@ html.darkmode.amoled-dark #content:after { position: relative; overflow: hidden; } - + /* 底部按钮涟漪效果 */ .leftbar-mobile-action::before { content: ""; @@ -10324,27 +10388,27 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10353,14 +10417,14 @@ html.darkmode.amoled-dark #content:after { 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); + 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; @@ -10372,7 +10436,7 @@ html.darkmode.amoled-dark #content:after { position: relative; overflow: hidden; } - + /* 折叠头部涟漪效果 */ .leftbar-mobile-collapse-header::before { content: ""; @@ -10384,30 +10448,30 @@ html.darkmode.amoled-dark #content:after { 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); + transition: width 0.6s var(--ease-emphasized-decelerate), + height 0.6s var(--ease-emphasized-decelerate), + opacity 0.4s var(--ease-standard); pointer-events: none; opacity: 0; } - + .leftbar-mobile-collapse-header:active::before { width: 300%; height: 300%; opacity: 1; } - + .leftbar-mobile-collapse-header:active { background: rgba(var(--themecolor-rgbstr), 0.04); } - + .collapse-header-left { display: flex; align-items: center; gap: 10px; flex: 1; } - + .collapse-icon { width: 28px; height: 28px; @@ -10420,25 +10484,25 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10453,12 +10517,12 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10471,77 +10535,78 @@ html.darkmode.amoled-dark #content:after { 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 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; @@ -10550,11 +10615,11 @@ html.darkmode.amoled-dark #content:after { text-decoration: none; border-radius: 8px; transition: all var(--animation-fast) var(--ease-standard), - transform var(--animation-fast) var(--ease-spring); + transform var(--animation-fast) var(--ease-spring); position: relative; overflow: hidden; } - + #leftbar_mobile_catalog .index-link::before { content: ""; position: absolute; @@ -10567,46 +10632,46 @@ html.darkmode.amoled-dark #content:after { border-radius: 0 3px 3px 0; transition: transform var(--animation-normal) var(--ease-spring); } - - #leftbar_mobile_catalog .index-item.current > .index-link { + + #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 { + + #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); @@ -10616,21 +10681,21 @@ html.darkmode.amoled-dark #content:after { background: var(--color-foreground); color: var(--color-text-deeper); transition: all var(--animation-fast) var(--ease-standard), - transform var(--animation-fast) var(--ease-spring); + 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; @@ -10647,13 +10712,13 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10661,16 +10726,16 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10679,33 +10744,34 @@ html.darkmode.amoled-dark #content:after { 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); + 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; @@ -10713,7 +10779,7 @@ html.darkmode.amoled-dark #content:after { line-height: 1.4; word-break: break-word; } - + .mobile-todo-complete-btn, .mobile-todo-urge-btn, .mobile-todo-delete-btn { @@ -10730,54 +10796,61 @@ html.darkmode.amoled-dark #content:after { 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); } + + 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; @@ -10791,12 +10864,12 @@ html.darkmode.amoled-dark #content:after { 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; @@ -10804,12 +10877,12 @@ html.darkmode.amoled-dark #content:after { max-height: 500px; overflow: hidden; transition: all var(--animation-normal) var(--ease-emphasized), - max-height var(--animation-normal) var(--ease-emphasized), - margin var(--animation-normal) var(--ease-emphasized), - padding var(--animation-normal) var(--ease-emphasized), - opacity var(--animation-normal) var(--ease-emphasized); + max-height var(--animation-normal) var(--ease-emphasized), + margin var(--animation-normal) var(--ease-emphasized), + padding var(--animation-normal) var(--ease-emphasized), + opacity var(--animation-normal) var(--ease-emphasized); } - + .mobile-todo-item.todo-completed.collapsed { max-height: 0; margin-bottom: 0; @@ -10818,7 +10891,7 @@ html.darkmode.amoled-dark #content:after { opacity: 0; transform: translateY(-10px) scale(0.9); } - + .mobile-todo-item.todo-completing { opacity: 0; transform: translateX(40px) scale(0.85); @@ -10828,14 +10901,14 @@ html.darkmode.amoled-dark #content:after { padding-bottom: 0; transition: all 0.4s var(--ease-emphasized-accelerate); } - + .mobile-todo-empty { text-align: center; color: #bbb; font-size: 12px; padding: 20px 0; } - + .mobile-todo-empty::before { content: "\f0ae"; font-family: FontAwesome; @@ -10844,7 +10917,7 @@ html.darkmode.amoled-dark #content:after { margin-bottom: 8px; opacity: 0.35; } - + /* 移动端折叠已完成按钮 */ .mobile-todo-collapse-btn { display: flex; @@ -10862,26 +10935,26 @@ html.darkmode.amoled-dark #content:after { margin-left: 6px; flex-shrink: 0; } - + .mobile-todo-collapse-btn:active { background: rgba(var(--themecolor-rgbstr), 0.25); transform: scale(0.92); } - + .mobile-todo-collapse-btn i { font-size: 8px; transition: transform var(--animation-fast) var(--ease-standard); } - + .mobile-todo-collapse-btn.collapsed i { transform: rotate(-90deg); } - + .mobile-todo-completed-count { min-width: 10px; text-align: center; } - + /* 移动端已完成任务分隔?*/ .mobile-todo-completed-divider { display: flex; @@ -10898,12 +10971,12 @@ html.darkmode.amoled-dark #content:after { border-bottom: 1px dashed rgba(var(--themecolor-rgbstr), 0.2); list-style: none; } - + .mobile-todo-completed-divider:active { background: rgba(var(--themecolor-rgbstr), 0.08); transform: scale(0.98); } - + .mobile-todo-completed-divider .divider-text { display: flex; align-items: center; @@ -10912,12 +10985,12 @@ html.darkmode.amoled-dark #content:after { font-weight: 600; color: #6c757d; } - + .mobile-todo-completed-divider .divider-text i { color: #28a745; font-size: 10px; } - + .mobile-todo-completed-divider .mobile-todo-completed-count { background: rgba(40, 167, 69, 0.15); color: #28a745; @@ -10928,13 +11001,13 @@ html.darkmode.amoled-dark #content:after { min-width: 16px; text-align: center; } - + .mobile-todo-completed-divider .divider-arrow { font-size: 9px; color: #6c757d; transition: transform var(--animation-fast) var(--ease-standard); } - + .mobile-todo-completed-divider.collapsed .divider-arrow { transform: rotate(-90deg); } @@ -10946,7 +11019,7 @@ html.darkmode.amoled-dark #content:after { #float_action_buttons #fabtn_open_sidebar { display: block; } - + /* 移动端隐藏浮动按钮提示文字 */ #float_action_buttons .fabtn:before { display: none !important; @@ -10974,122 +11047,150 @@ html.darkmode.amoled-dark #content:after { 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; } + + 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 { @@ -11144,7 +11245,7 @@ html.darkmode.amoled-dark #content:after { opacity: 0; visibility: hidden; transition: opacity var(--animation-normal) var(--ease-standard), - visibility var(--animation-normal) var(--ease-standard); + visibility var(--animation-normal) var(--ease-standard); } html.leftbar-opened #sidebar_mask { @@ -11241,7 +11342,7 @@ html.darkmode.amoled-dark #content:after { } - #leftbar_announcement ~ #leftbar_part1 .leftbar-banner { + #leftbar_announcement~#leftbar_part1 .leftbar-banner { background: var(--themecolor) !important; @@ -11251,7 +11352,7 @@ html.darkmode.amoled-dark #content:after { } - html.darkmode #leftbar_announcement ~ #leftbar_part1 .leftbar-banner { + html.darkmode #leftbar_announcement~#leftbar_part1 .leftbar-banner { background: var(--color-border-on-foreground) !important; @@ -11305,45 +11406,45 @@ html.darkmode.amoled-dark #content:after { /* 夜间模式适配 - 移动端侧边栏 */ html.darkmode .leftbar-mobile-profile { - background: linear-gradient(135deg, - rgba(var(--themecolor-rgbstr), 0.8) 0%, - rgba(var(--themecolor-rgbstr), 0.6) 100%); + 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 { + + html.darkmode .leftbar-mobile-submenu .leftbar-mobile-menu-item>a { color: #999; } - + /* ========== 移动端文章卡片独立样?========== */ /* 移动端布局 1: 大图模式 (默认) */ html.mobile-layout-1 article.post-preview-layout-2, @@ -11351,146 +11452,153 @@ html.darkmode.amoled-dark #content:after { 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); } + + 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 { @@ -11498,84 +11606,95 @@ html.darkmode.amoled-dark #content:after { 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); } + + 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 { + .leftbar-mobile-menu-item.current>a { position: relative; } - - .leftbar-mobile-menu-item.current > a::after { + + .leftbar-mobile-menu-item.current>a::after { content: ""; position: absolute; left: 0; @@ -11587,23 +11706,23 @@ html.darkmode.amoled-dark #content:after { 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); + visibility 0.35s var(--ease-emphasized), + backdrop-filter 0.35s var(--ease-emphasized); } - + html.leftbar-opened #sidebar_mask { -webkit-backdrop-filter: blur(calc(var(--toolbar-blur) / 3)); backdrop-filter: blur(calc(var(--toolbar-blur) / 3)); @@ -11700,7 +11819,7 @@ html.darkmode.amoled-dark #content:after { } - #navbar_global.show + #navbar_menu_mask { + #navbar_global.show+#navbar_menu_mask { display: block; @@ -11720,7 +11839,7 @@ html.darkmode.amoled-dark #content:after { } - .navbar-nav:not(#navbar_search_btn_mobile) > .nav-item i:not(.d-lg-none) { + .navbar-nav:not(#navbar_search_btn_mobile)>.nav-item i:not(.d-lg-none) { margin-right: 8px; @@ -11732,7 +11851,7 @@ html.darkmode.amoled-dark #content:after { - .navbar-nav:not(#navbar_search_btn_mobile) > .nav-item i:not(.d-lg-none) { + .navbar-nav:not(#navbar_search_btn_mobile)>.nav-item i:not(.d-lg-none) { margin-right: 8px; @@ -12018,7 +12137,7 @@ html.darkmode.amoled-dark #content:after { } - html > body { + html>body { background-color: white !important; @@ -12064,7 +12183,7 @@ html.no-js .comment-item-text .comment-sticker.lazyload { html.using-safari #float_action_buttons .fabtn:before, -html.using-safari #share > a:before, +html.using-safari #share>a:before, html.using-safari #share_show:before, @@ -12099,7 +12218,7 @@ html.using-safari #share .icon-wechat .wechat-qrcode { } -html.using-safari .post-donate .donate-btn:hover ~ .donate-qrcode { +html.using-safari .post-donate .donate-btn:hover~.donate-qrcode { transform: translateX(-50%); @@ -12132,54 +12251,89 @@ html.using-safari .friend-link-description:after { /* 下面是抄袭萌娘百科的css */ -.huhua{ - color:#9ea3a9 !important; - text-decoration:line-through !important; - text-shadow:none !important; - transition:color .2s ease; +.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: inherit !important; + text-decoration: 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; +.huhua:hover, +.huhua:active { + color: #7f858b !important; } -.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; + +.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; } -.color-curtain:hover a, a:hover .color-curtain, -.color-curtain:active a, a:active .color-curtain { - color: inherit !important; + +.text-blur a { + 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; + +.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; } /* @@ -12201,6 +12355,7 @@ a .heimu, transition: color 0.2s ease, background-color 0.2s ease; cursor: pointer; } + .heimu a { color: inherit !important; transition: inherit; @@ -12214,12 +12369,14 @@ a .heimu, color: white !important; background-color: transparent !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, @@ -12236,6 +12393,7 @@ article .entry-content .heimu, background-color: #252525 !important; color: #252525 !important; } + article .post-content .heimu:hover, article .entry-content .heimu:hover, .article-content .heimu:hover, @@ -12254,14 +12412,17 @@ html.darkmode .heimu a.new { background-color: #1a1a1a !important; color: #1a1a1a !important; } + html.darkmode .heimu:hover, html.darkmode .heimu:active { color: #e0e0e0 !important; background-color: transparent !important; } + html.darkmode .heimu a { color: inherit !important; } + html.darkmode .heimu:hover a, html.darkmode .color-curtain:hover a { color: inherit !important; @@ -12273,6 +12434,7 @@ html.darkmode .comment-content .color-curtain { background-color: #1a1a1a !important; color: #1a1a1a !important; } + html.darkmode .comment-content .heimu:hover, html.darkmode .comment-content .heimu:active, html.darkmode .comment-content .color-curtain:hover, @@ -12368,7 +12530,10 @@ article .post-content .huhua a:before { min-width: 300px; position: relative; z-index: 2; - -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .git-easter-egg-overlay.show .git-easter-egg-modal { @@ -12384,8 +12549,15 @@ article .post-content .huhua a:before { } @keyframes eggBounce { - 0%, 100% { transform: translateY(0) rotate(-5deg); } - 50% { transform: translateY(-12px) rotate(5deg); } + + 0%, + 100% { + transform: translateY(0) rotate(-5deg); + } + + 50% { + transform: translateY(-12px) rotate(5deg); + } } .git-easter-egg-content { @@ -12432,11 +12604,11 @@ article .post-content .huhua a:before { 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; + 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; } @@ -12517,7 +12689,7 @@ html.navbar-absolute #leftbar_part3.sticky { #leftbar_part3.sticky { transform: translateY(-25px); } - + body.leftbar-can-headroom.headroom---unpinned #leftbar_part3.sticky { transform: translateY(-5px); } @@ -12728,6 +12900,7 @@ html.navbar-absolute #leftbar_part3.sticky { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); @@ -12800,8 +12973,15 @@ html.navbar-absolute #leftbar_part3.sticky { } @keyframes urgeSuccess { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.2); } + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } } .todo-urge-btn:disabled, @@ -12832,10 +13012,10 @@ html.navbar-absolute #leftbar_part3.sticky { max-height: 500px; overflow: hidden; transition: all var(--animation-normal) var(--ease-emphasized), - max-height var(--animation-normal) var(--ease-emphasized), - margin var(--animation-normal) var(--ease-emphasized), - padding var(--animation-normal) var(--ease-emphasized), - opacity var(--animation-normal) var(--ease-emphasized); + max-height var(--animation-normal) var(--ease-emphasized), + margin var(--animation-normal) var(--ease-emphasized), + padding var(--animation-normal) var(--ease-emphasized), + opacity var(--animation-normal) var(--ease-emphasized); } .todo-item.todo-completed.collapsed { @@ -12978,10 +13158,13 @@ html.darkmode .todo-add-form input:focus { /* 多邻国火焰动?*/ @keyframes duolingoFlameGlow { - 0%, 100% { + + 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); @@ -12993,6 +13176,7 @@ html.darkmode .todo-add-form input:focus { opacity: 0; transform: translateX(-5px); } + to { opacity: 1; transform: translateX(0); @@ -13008,7 +13192,8 @@ html.darkmode .todo-add-form input:focus { border-radius: 14px; gap: 4px; color: #fff; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(calc(var(--toolbar-blur) / 3)); + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + -webkit-backdrop-filter: blur(calc(var(--toolbar-blur) / 3)); backdrop-filter: blur(calc(var(--toolbar-blur) / 3)); } @@ -13185,339 +13370,339 @@ html.darkmode .friend-link-name { /* 页面头部 */ .argon-fl-header { - margin-bottom: 20px; + margin-bottom: 20px; } .argon-fl-page-title { - font-size: 28px; - margin: 0 0 10px; - color: var(--themecolor); + font-size: 28px; + margin: 0 0 10px; + color: var(--themecolor); } .argon-fl-page-title i { - margin-right: 10px; + margin-right: 10px; } .argon-fl-page-desc { - color: var(--color-text-secondary); - margin-bottom: 15px; + color: var(--color-text-secondary); + margin-bottom: 15px; } .argon-fl-page-desc p:last-child { - margin-bottom: 0; + margin-bottom: 0; } .argon-fl-stats { - display: flex; - gap: 20px; - font-size: 14px; - color: var(--color-text-secondary); + display: flex; + gap: 20px; + font-size: 14px; + color: var(--color-text-secondary); } .argon-fl-stats i { - margin-right: 5px; - color: var(--themecolor); + margin-right: 5px; + color: var(--themecolor); } /* 分类卡片 */ .argon-fl-category-card { - margin-bottom: 20px; + 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; + 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); + 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; + 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; + 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-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; + 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); + 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; + display: none; } /* 头像 */ .argon-fl-avatar { - width: 50px; - height: 50px; - flex-shrink: 0; - margin-right: 15px; - position: relative; + 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); + 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; + 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; + 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; + 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; + 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; + 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; + 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); + opacity: 1; + transform: translateX(0); } /* 空状?*/ .argon-fl-empty { - text-align: center; - padding: 60px 20px; - color: var(--color-text-secondary); + 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); + font-size: 64px; + margin-bottom: 20px; + opacity: 0.3; + color: var(--themecolor); } .argon-fl-empty p { - margin: 0; - font-size: 18px; + margin: 0; + font-size: 18px; } .argon-fl-empty-hint { - font-size: 14px !important; - margin-top: 10px !important; - opacity: 0.7; + font-size: 14px !important; + margin-top: 10px !important; + opacity: 0.7; } /* 申请卡片 */ .argon-fl-apply-card { - margin-top: 10px; + margin-top: 10px; } .argon-fl-apply-title { - font-size: 20px; - margin: 0 0 20px; - color: var(--themecolor); + font-size: 20px; + margin: 0 0 20px; + color: var(--themecolor); } .argon-fl-apply-title i { - margin-right: 10px; + margin-right: 10px; } /* 申请结果 */ .argon-fl-result { - padding: 15px 20px; - border-radius: var(--card-radius); - margin-bottom: 20px; - display: flex; - align-items: center; + 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; + 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); + 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); + 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; + 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; + margin-bottom: 0; } .argon-fl-requirements ul { - margin: 10px 0 0; - padding-left: 20px; + margin: 10px 0 0; + padding-left: 20px; } /* 表单 */ .argon-fl-form { - margin-top: 20px; + margin-top: 20px; } .argon-fl-form-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 20px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; } @media (max-width: 768px) { - .argon-fl-form-grid { - grid-template-columns: 1fr; - } + .argon-fl-form-grid { + grid-template-columns: 1fr; + } } .argon-fl-field { - margin-bottom: 20px; + margin-bottom: 20px; } .argon-fl-field label { - display: block; - margin-bottom: 8px; - font-weight: 500; - font-size: 14px; - color: var(--color-text); + 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; + 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; + 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); + 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; + resize: vertical; + min-height: 100px; } .argon-fl-submit { - text-align: center; - padding-top: 10px; + text-align: center; + padding-top: 10px; } .argon-fl-submit button { - padding: 14px 50px; - font-size: 16px; + padding: 14px 50px; + font-size: 16px; } .argon-fl-submit button i { - margin-right: 10px; + margin-right: 10px; } /* 夜间模式 */ html.darkmode .argon-fl-item:hover { - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } /* ======================================== @@ -13534,44 +13719,41 @@ html.darkmode .argon-fl-item:hover { /* 顶栏底部柔和过渡伪元?*/ #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; + 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; + opacity: 1; } /* 顶栏在顶部时的透明状?*/ html.navbar-absolute:not(.no-banner) #navbar-main.navbar-ontop { - background: linear-gradient(to bottom, - rgba(0, 0, 0, 0.2) 0%, - rgba(0, 0, 0, 0.1) 50%, - transparent 100% - ) !important; - -webkit-backdrop-filter: blur(calc(var(--toolbar-blur) / 1.5)); - backdrop-filter: blur(calc(var(--toolbar-blur) / 1.5)); + background: linear-gradient(to bottom, + rgba(0, 0, 0, 0.2) 0%, + rgba(0, 0, 0, 0.1) 50%, + transparent 100%) !important; + -webkit-backdrop-filter: blur(calc(var(--toolbar-blur) / 1.5)); + 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; + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.88) 0%, + rgba(var(--themecolor-rgbstr), 0.82) 100%) !important; } /* 顶栏玻璃态模?*/ @@ -13581,145 +13763,162 @@ html.toolbar-glass #navbar-main { backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); border-bottom: none; } + 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); + 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); + 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); + 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); + 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; + font-weight: 600; + letter-spacing: 0.5px; + transition: all 0.3s ease; } + .navbar-brand.navbar-title:hover { - transform: scale(1.02); + transform: scale(1.02); } /* 顶栏图标增强 */ .navbar-brand.navbar-icon img { - transition: all 0.3s ease; - border-radius: 6px; + 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); + 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; + 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; + 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%; + 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; + 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); - } + 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; + 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; + background: rgba(var(--themecolor-rgbstr), 0.08); + color: var(--themecolor); + padding-left: 24px; } /* 顶栏搜索框增?*/ #navbar_search_input_container .input-group { - border-radius: 25px; + border-radius: 25px; } + #navbar_search_input_container.open .input-group { - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + 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; + 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; + padding-top: 0.6rem !important; + padding-bottom: 0.6rem !important; } /* 顶栏居中模式 */ html.toolbar-center .navbar-brand.mr-0 { - position: absolute; - left: 50%; - transform: translateX(-50%); + position: absolute; + left: 50%; + transform: translateX(-50%); } + html.toolbar-center .navbar-nav.navbar-nav-hover { - margin-left: auto; + margin-left: auto; } + @media (max-width: 991px) { - html.toolbar-center .navbar-brand.mr-0 { - position: relative; - left: auto; - transform: none; - } + 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; - } + #navbar-main { + padding-left: 8px; + padding-right: 8px; + } + + .navbar-brand.navbar-title { + font-size: 16px; + } + + .navbar-brand.navbar-icon img { + max-height: 32px; + } } @@ -13729,514 +13928,516 @@ html.toolbar-center .navbar-nav.navbar-nav-hover { /* 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; + /* 表面层级 */ + --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-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); + 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; + box-shadow: var(--m3-elevation-1) !important; } /* M3 文章卡片 */ article.post.card { - overflow: hidden; - border: none !important; - will-change: auto; + overflow: hidden; + border: none !important; + will-change: auto; } /* 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; + 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); + 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; + opacity: 0.08; } .btn:active::before { - opacity: 0.12; + opacity: 0.12; } .btn-primary { - box-shadow: var(--m3-elevation-1); + box-shadow: var(--m3-elevation-1); } .btn-primary:hover { - box-shadow: var(--m3-elevation-2); - transform: translateY(-1px); + 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; + 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; + 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; - will-change: transform; + border-radius: var(--m3-shape-lg) !important; + overflow: hidden; + will-change: transform; } #leftbar_part1 { - border-radius: var(--m3-shape-lg) !important; - will-change: transform; + border-radius: var(--m3-shape-lg) !important; + will-change: transform; } #leftbar_part2 { - border-radius: var(--m3-shape-lg) !important; - will-change: transform; + border-radius: var(--m3-shape-lg) !important; + will-change: transform; } /* 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 { + 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>a:hover { + background: var(--m3-state-hover); } -.leftbar-menu-item.current > a { - background: var(--m3-surface-3); - color: var(--themecolor); - font-weight: 500; +.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); + 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; + 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; + 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); + background: var(--themecolor); + box-shadow: var(--m3-elevation-1); } /* M3 站点统计 */ .site-state { - display: flex; - justify-content: center; - gap: 8px; - margin: 16px 0; + display: flex; + justify-content: center; + gap: 8px; + margin: 16px 0; } .site-state-item { - flex: 1; - text-align: center; + 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); + 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); + background: var(--m3-state-hover); } .site-state-item-count { - display: block; - font-size: 20px; - font-weight: 600; - color: var(--themecolor); - line-height: 1.2; + 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; + 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; + 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); + 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); + background: var(--themecolor); + color: #fff; + transform: translateY(-2px); + box-shadow: var(--m3-elevation-2); } /* M3 文章列表 */ .article-list article.post { - margin-bottom: 16px; + margin-bottom: 16px; } /* M3 文章预览卡片 */ .post-preview-container { - border-radius: var(--m3-shape-lg); - overflow: hidden; + border-radius: var(--m3-shape-lg); + overflow: hidden; } /* M3 文章标题 */ .post-title a { - transition: color var(--m3-motion-duration-short) var(--m3-motion-standard); + transition: color var(--m3-motion-duration-short) var(--m3-motion-standard); } .post-title a:hover { - color: var(--themecolor); + 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); + 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); + 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); + 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); + box-shadow: var(--m3-elevation-1); } /* M3 评论卡片 */ #comments.card, #post_comment.card { - border-radius: var(--m3-shape-lg) !important; - overflow: hidden; - will-change: auto; + border-radius: var(--m3-shape-lg) !important; + overflow: hidden; + will-change: auto; } .comment-item { - border-radius: var(--m3-shape-md); - transition: background var(--m3-motion-duration-short) var(--m3-motion-standard); + 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); + 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); + 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); + 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); + 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; + 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; + 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; + border-bottom: 1px solid var(--color-border-on-foreground); + padding: 20px 24px; } .modal-body { - padding: 24px; + 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); + 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); - } + 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); + 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); + background: var(--m3-state-hover); } /* M3 Alert 样式 */ .alert { - border-radius: var(--m3-shape-md) !important; - border: none; - padding: 16px 20px; + border-radius: var(--m3-shape-md) !important; + border: none; + padding: 16px 20px; } /* M3 TODO 列表 */ .todo-list { - border-radius: var(--m3-shape-md); + 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); + 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); + background: var(--m3-state-hover); } /* M3 公告卡片 */ #leftbar_announcement { - border-radius: var(--m3-shape-lg) !important; - overflow: hidden; + border-radius: var(--m3-shape-lg) !important; + overflow: hidden; } /* M3 文章导航 */ .post-navigation { - border-radius: var(--m3-shape-lg) !important; - overflow: hidden; + border-radius: var(--m3-shape-lg) !important; + overflow: hidden; } .post-navigation-item { - transition: background var(--m3-motion-duration-short) var(--m3-motion-standard); + transition: background var(--m3-motion-duration-short) var(--m3-motion-standard); } .post-navigation-item:hover { - background: var(--m3-surface-1); + background: var(--m3-surface-1); } /* M3 相关文章 */ .related-posts { - border-radius: var(--m3-shape-lg) !important; + 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); + border-radius: var(--m3-shape-md); + transition: all var(--m3-motion-duration-short) var(--m3-motion-standard); } /* M3 代码?*/ article pre:not(.hljs-codeblock) { - border-radius: var(--m3-shape-md) !important; + border-radius: var(--m3-shape-md) !important; } .hljs-codeblock { - border-radius: var(--m3-shape-md) !important; - overflow: hidden; + 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); + 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); + border-radius: var(--m3-shape-sm); } .wp-block-image img { - border-radius: var(--m3-shape-md); + border-radius: var(--m3-shape-md); } /* M3 表格 */ article table { - border-radius: var(--m3-shape-md); - overflow: hidden; + border-radius: var(--m3-shape-md); + overflow: hidden; } -article table > thead > tr > th { - background: var(--m3-surface-2); +article table>thead>tr>th { + background: var(--m3-surface-2); } /* M3 滚动?*/ ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 8px; + height: 8px; } ::-webkit-scrollbar-track { - background: transparent; + background: transparent; } ::-webkit-scrollbar-thumb { - background: rgba(var(--themecolor-rgbstr), 0.3); - border-radius: var(--m3-shape-xl); + background: rgba(var(--themecolor-rgbstr), 0.3); + border-radius: var(--m3-shape-xl); } ::-webkit-scrollbar-thumb:hover { - background: rgba(var(--themecolor-rgbstr), 0.5); + background: rgba(var(--themecolor-rgbstr), 0.5); } /* M3 选中文本 */ ::selection { - background: rgba(var(--themecolor-rgbstr), 0.2); + 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); + 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; + background-size: 100% 2px; + background-position: left bottom; } /* M3 页面过渡动画 */ @keyframes m3-page-in { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + + to { + opacity: 1; + } } #primary { - animation: m3-page-in var(--m3-motion-duration-long) var(--m3-motion-emphasized); + animation: m3-page-in var(--m3-motion-duration-long) var(--m3-motion-emphasized); } /* M3 卡片进入动画 - 使用原有动画 */ @@ -14245,48 +14446,48 @@ article .post-content a:hover { .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); + 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; + 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); + 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); + 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; - } + :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; + } } /* ---------- 评论区响应式优化 ---------- */ @@ -14296,12 +14497,12 @@ article .post-content a:hover { margin-right: 12px; min-height: 70px; } - + .comment-item-avatar .avatar { height: 36px; width: 36px; } - + .comment-upvote { height: 28px; line-height: 26px; @@ -14310,16 +14511,16 @@ article .post-content a:hover { 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; @@ -14332,11 +14533,11 @@ article .post-content a:hover { box-shadow: none; justify-content: flex-start; } - + .comment-useragent { display: none; } - + .comment-info { gap: 6px; } @@ -14346,29 +14547,29 @@ article .post-content a:hover { /* 1. 搜索按钮动画优化 - 毛玻璃效果和左移滑入动画 */ #navbar_search_input_container .input-group { - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; + 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); + 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); + 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); } /* 搜索框展开时默认毛玻璃状?*/ @@ -14380,15 +14581,15 @@ article .post-content a:hover { } #navbar_search_input_container.open .input-group .input-group-text { - color: rgba(255, 255, 255, 0.9); + color: rgba(255, 255, 255, 0.9); } #navbar_search_input_container.open .input-group input.form-control { - color: rgba(255, 255, 255, 0.95); + 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); + color: rgba(255, 255, 255, 0.6); } /* hover或有内容时切换为白色背景 */ @@ -14404,131 +14605,131 @@ article .post-content a:hover { #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; + 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; + 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; + 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; - } + #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; + 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; + opacity: 1; } .git-version-badge .git-icon { - width: 11px; - height: 11px; - color: #f05033; - flex-shrink: 0; + 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; - } + .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; + 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; + 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; + background: rgba(255, 255, 255, 0.18); + color: #fff; } .navbar-custom-links a i { - margin-right: 5px; + margin-right: 5px; } @media screen and (max-width: 992px) { - .navbar-custom-links { - display: none; - } + .navbar-custom-links { + display: none; + } } /* 6. 防止按钮文字换行 */ .btn { - white-space: nowrap; + white-space: nowrap; } .btn-inner--text { - white-space: nowrap; + white-space: nowrap; } .nav-link { - white-space: nowrap; + white-space: nowrap; } .navbar-nav .nav-item { - white-space: nowrap; + white-space: nowrap; } /* 标签和徽章防止换?*/ @@ -14536,7 +14737,7 @@ article .post-content a:hover { .tag, .post-categories a, .post-tags a { - white-space: nowrap; + white-space: nowrap; } /* ======================================== @@ -14547,16 +14748,16 @@ article .post-content a:hover { /* 页面背景微妙纹理 */ 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; + 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%); + 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%); } /* 卡片悬浮效果增强 */ @@ -14576,390 +14777,391 @@ html.darkmode .card { /* 文章卡片优化 */ 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); + 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); + 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); - overflow: hidden; - will-change: transform; + background: var(--color-foreground); + overflow: hidden; + will-change: transform; } /* 相关文章卡片透明度 */ .related-posts.card { - background: var(--color-foreground); - overflow: hidden; - will-change: transform; + 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; - background-clip: text; - -webkit-text-fill-color: transparent; - transition: all 0.3s ease; + 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); + filter: brightness(1.1); } /* 文章预览卡片缩略图优?*/ .post-thumbnail { - transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } article.post.card:hover .post-thumbnail { - transform: none; + transform: none; } /* 侧边栏卡片优?*/ #leftbar .card, #leftbar_part1, #leftbar_part2 { - border: 1px solid rgba(var(--themecolor-rgbstr), 0.05); + 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); + 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); + 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); + 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; + 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); + 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); + 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; + 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; + 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; + transform: scaleX(1); + transform-origin: left; } .btn-outline-primary:hover { - color: #fff; - border-color: var(--themecolor); + color: #fff; + border-color: var(--themecolor); } /* 评论项悬浮效?*/ .comment-body { - transition: all 0.25s ease; - border-radius: var(--m3-shape-md); - padding: 12px; - margin: -12px; + 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); + background: rgba(var(--themecolor-rgbstr), 0.03); } html.darkmode .comment-body:hover { - background: rgba(255, 255, 255, 0.03); + 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); + 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); + 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); + 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); + 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); + background: var(--themecolor); } /* Banner 优化 */ .banner { - position: relative; + 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; + 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); + 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; + 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); + 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); + 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); + 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; + 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; + 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); + 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); + 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; + 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); + 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; + 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; - } + 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; + 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; + text-decoration: none; } /* 图片加载优化 */ article img { - opacity: 1; - transition: opacity 0.3s ease, transform 0.3s ease; + opacity: 1; + transition: opacity 0.3s ease, transform 0.3s ease; } article img:hover { - transform: scale(1.01); + 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); + 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>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); +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); + border: 1px solid rgba(var(--themecolor-rgbstr), 0.08); + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .friend-link-card:hover { - box-shadow: - 0 8px 24px rgba(var(--themecolor-rgbstr), 0.12), - 0 16px 48px rgba(0, 0, 0, 0.08); - border-color: rgba(var(--themecolor-rgbstr), 0.2); + 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); + background: rgba(var(--color-darkmode-foreground-rgbstr, 45, 45, 45), 0.85); + border-color: rgba(255, 255, 255, 0.06); } /* 时间线优?*/ .timeline-item { - position: relative; + 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; + 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); + 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; + outline: 2px solid var(--themecolor); + outline-offset: 2px; } /* 平滑字体渲染 */ body { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } /* 响应式优?*/ @@ -14968,11 +15170,11 @@ body { -webkit-backdrop-filter: blur(calc(var(--card-blur) / 3)); backdrop-filter: blur(calc(var(--card-blur) / 3)); } - + article.post.card:hover { transform: none; } - + .banner::after { height: 80px; } @@ -14980,13 +15182,14 @@ body { /* 减少动画偏好 */ @media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } } /* ======================================== @@ -14995,247 +15198,247 @@ body { /* 卡片微妙边框光泽 */ .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); - background-color: rgba(255, 255, 255, var(--card-opacity)); - -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); - backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); - overflow: hidden; - will-change: auto; + 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); + background-color: rgba(255, 255, 255, var(--card-opacity)); + -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); + backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); + overflow: hidden; + will-change: auto; } 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); - background-color: rgba(66, 66, 66, var(--card-opacity)); + 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); + 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); - background-color: rgba(255, 255, 255, var(--card-opacity)); - -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); - backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); + transition: transform var(--animation-normal) var(--ease-spring), + box-shadow var(--animation-normal) var(--ease-standard); + background-color: rgba(255, 255, 255, var(--card-opacity)); + -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); + backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); } article.post.card:hover { - box-shadow: - 0 8px 25px rgba(0, 0, 0, 0.08), - 0 20px 40px rgba(var(--themecolor-rgbstr), 0.06), - inset 0 1px 0 rgba(255, 255, 255, 0.8); + 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 { - background-color: rgba(66, 66, 66, var(--card-opacity)); + background-color: rgba(66, 66, 66, var(--card-opacity)); } /* 按钮 Apple + Material 3 融合风格 */ .btn { - font-weight: 500; - letter-spacing: -0.01em; - transition: all var(--animation-fast) var(--ease-standard); + font-weight: 500; + letter-spacing: -0.01em; + transition: all var(--animation-fast) var(--ease-standard); } /* 涟漪效果 (Ripple Effect) */ .btn-ripple { - position: relative; - overflow: hidden; + 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); + 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; + 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; + 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); + 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); + 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); + 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); + 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); + 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); + 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); + 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); + 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); + 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); + 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); + 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); + 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; + 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); + 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); + 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); + 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); + 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); + 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); + 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); + 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: + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.06); -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate)); @@ -15251,7 +15454,7 @@ html.darkmode .dropdown-menu { /* 模态框 Apple 风格 */ .modal-content { border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: + box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.1); -webkit-backdrop-filter: blur(calc(var(--card-blur) * 1.5)) saturate(calc(var(--card-saturate) * 0.83)); @@ -15260,112 +15463,112 @@ html.darkmode .dropdown-menu { } html.darkmode .modal-content { - background: rgba(40, 40, 40, 0.95); - border: 1px solid rgba(255, 255, 255, 0.1); + 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); + 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%); + 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; + 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 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; + 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); + 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; + 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; + background-size: 100% 1.5px; + background-position: left bottom; } /* 滚动条美?*/ ::-webkit-scrollbar { - width: 10px; - height: 10px; + width: 10px; + height: 10px; } ::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.02); - border-radius: 5px; + 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; + 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; + 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); + background: rgba(255, 255, 255, 0.02); } html.darkmode ::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.2); } html.darkmode ::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.35); + background: rgba(255, 255, 255, 0.35); } /* 选中文本样式 */ ::selection { - background: rgba(var(--themecolor-rgbstr), 0.25); - color: inherit; + background: rgba(var(--themecolor-rgbstr), 0.25); + color: inherit; } /* 移动端响应式调整 */ @media (max-width: 768px) { - article.post.card:hover { - transform: none; - } + article.post.card:hover { + transform: none; + } } /* ======================================== @@ -15373,45 +15576,45 @@ html.darkmode ::-webkit-scrollbar-thumb:hover { ======================================== */ .segmented-control { - display: inline-flex; - background: var(--color-widgets-disabled); - border-radius: 10px; - padding: 3px; - gap: 2px; + 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); + 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); + 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); + 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); + background: rgba(255, 255, 255, 0.08); } html.darkmode .segmented-control-item { - color: rgba(255, 255, 255, 0.9); + color: rgba(255, 255, 255, 0.9); } html.darkmode .segmented-control-item:hover { - background: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.1); } /* ======================================== @@ -15421,26 +15624,26 @@ html.darkmode .segmented-control-item:hover { html.style-glass .card, html.style-glass #fabtn_blog_settings_popup { - background: rgba(255, 255, 255, var(--card-opacity, 0.7)); - -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, var(--card-opacity, 0.7)); + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } html.style-glass .card:hover { - background: rgba(255, 255, 255, calc(var(--card-opacity, 0.7) + 0.1)); + background: rgba(255, 255, 255, calc(var(--card-opacity, 0.7) + 0.1)); } html.darkmode.style-glass .card, html.darkmode.style-glass #fabtn_blog_settings_popup { - background: rgba(66, 66, 66, var(--card-opacity, 0.7)); - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + 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)); + background: rgba(66, 66, 66, calc(var(--card-opacity, 0.7) + 0.1)); } /* ======================================== @@ -15448,55 +15651,55 @@ html.darkmode.style-glass .card:hover { ======================================== */ 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); + 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); + 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); + 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); + 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); + 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); + 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); + 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); + box-shadow: + 8px 8px 16px rgba(0, 0, 0, 0.3), + -8px -8px 16px rgba(255, 255, 255, 0.05); } /* 样式切换过渡动画 */ @@ -15504,158 +15707,159 @@ 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); + transition: + background-color var(--animation-slow) var(--ease-standard), + box-shadow var(--animation-slow) var(--ease-standard), + backdrop-filter var(--animation-slow) var(--ease-standard); } /* ========== 玻璃风格下文章页面卡片样式统一 ========== */ /* 使用 CSS 变量,确保与首页卡片一致 */ html.style-glass article.post.post-full.card { - background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important; - -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important; + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } html.darkmode.style-glass article.post.post-full.card { - background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important; - border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } /* ========== 移动端侧边栏重新设计 ========== */ @media screen and (max-width: 900px) { - /* 侧边栏容?*/ - #leftbar { - width: min(300px, 82vw); - background: var(--color-foreground); - box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); - } - - /* 移动端导航整体布局 */ - .leftbar-mobile-nav { - padding-bottom: env(safe-area-inset-bottom, 0); - overflow-y: auto; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; - } - - /* ===== 顶部用户信息?===== */ - .leftbar-mobile-profile { - padding: 32px 24px 28px; - padding-top: calc(32px + env(safe-area-inset-top, 0)); - background: var(--themecolor-gradient); - position: relative; - } - - /* 装饰性背景圆 */ - .leftbar-mobile-profile::before { - content: ""; - position: absolute; - top: -50px; - right: -50px; - width: 140px; - height: 140px; - background: rgba(255, 255, 255, 0.1); - border-radius: 50%; - } - - .leftbar-mobile-profile::after { - content: ""; - position: absolute; - bottom: -30px; - left: -30px; - width: 100px; - height: 100px; - background: rgba(255, 255, 255, 0.06); - border-radius: 50%; - } - - /* 关闭按钮 */ - .leftbar-mobile-close { - position: absolute; - top: calc(16px + env(safe-area-inset-top, 0)); - right: 16px; - width: 36px; - height: 36px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - background: rgba(255, 255, 255, 0.18); - -webkit-backdrop-filter: blur(calc(var(--card-blur) / 2.5)); - backdrop-filter: blur(calc(var(--card-blur) / 2.5)); - 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 { + width: min(300px, 82vw); + background: var(--color-foreground); + box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); + } + + /* 移动端导航整体布局 */ + .leftbar-mobile-nav { + padding-bottom: env(safe-area-inset-bottom, 0); + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + + /* ===== 顶部用户信息?===== */ + .leftbar-mobile-profile { + padding: 32px 24px 28px; + padding-top: calc(32px + env(safe-area-inset-top, 0)); + background: var(--themecolor-gradient); + position: relative; + } + + /* 装饰性背景圆 */ + .leftbar-mobile-profile::before { + content: ""; + position: absolute; + top: -50px; + right: -50px; + width: 140px; + height: 140px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + } + + .leftbar-mobile-profile::after { + content: ""; + position: absolute; + bottom: -30px; + left: -30px; + width: 100px; + height: 100px; + background: rgba(255, 255, 255, 0.06); + border-radius: 50%; + } + + /* 关闭按钮 */ + .leftbar-mobile-close { + position: absolute; + top: calc(16px + env(safe-area-inset-top, 0)); + right: 16px; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: rgba(255, 255, 255, 0.18); + -webkit-backdrop-filter: blur(calc(var(--card-blur) / 2.5)); + backdrop-filter: blur(calc(var(--card-blur) / 2.5)); + 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; @@ -15667,577 +15871,578 @@ html.darkmode.style-glass article.post.post-full.card { 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; - } + + .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; - } + #leftbar { + width: min(270px, 80vw); + } + + .leftbar-mobile-profile { + padding: 26px 20px 24px; + } + + .leftbar-mobile-avatar { + width: 64px; + height: 64px; + } + + .leftbar-mobile-user-name { + font-size: 20px; + } + + .leftbar-mobile-stats { + padding: 12px 8px; + } + + .leftbar-mobile-stat .stat-num { + font-size: 18px; + } + + .leftbar-mobile-search { + padding: 14px 14px 8px; + } + + .leftbar-mobile-menu-section { + padding: 8px 12px 6px; + } + + .leftbar-mobile-collapse-section { + margin: 5px 12px; + } + + .collapse-icon { + width: 28px; + height: 28px; + font-size: 12px; + } + + .collapse-title { + font-size: 13px; + } + + .leftbar-mobile-footer { + padding: 12px 14px 18px; + } + + .leftbar-mobile-action { + padding: 12px 8px; + max-width: 85px; + } + + .leftbar-mobile-action i { + font-size: 18px; + } + + .leftbar-mobile-action span { + font-size: 10px; + } } /* ========== 移动端玻璃风格文章卡?========== */ @media screen and (max-width: 900px) { - html.style-glass article.post.post-full.card { - background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important; - -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - } - - html.darkmode.style-glass article.post.post-full.card { - background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important; - -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); - } + html.style-glass article.post.post-full.card { + background: rgba(255, 255, 255, var(--card-opacity, 0.7)) !important; + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + } + + html.darkmode.style-glass article.post.post-full.card { + background: rgba(66, 66, 66, var(--card-opacity, 0.7)) !important; + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + } } /* ========== 暗色模式移动端目录样式补?========== */ @media screen and (max-width: 900px) { - /* 暗色模式下目录链接颜?*/ - html.darkmode #leftbar_mobile_catalog .index-link { - color: #bbb; - } - - html.darkmode #leftbar_mobile_catalog .index-item.current > .index-link { - color: var(--themecolor-light); - background: rgba(var(--themecolor-rgbstr), 0.15); - } - - html.darkmode #leftbar_mobile_catalog .index-link:active { - background: rgba(var(--themecolor-rgbstr), 0.18); - } - - /* 暗色模式下子目录边框 */ - html.darkmode #leftbar_mobile_catalog .index-subItem-box { - border-left-color: rgba(255, 255, 255, 0.1); - } - - /* 暗色模式下滚动条 */ - html.darkmode #leftbar_mobile_catalog::-webkit-scrollbar-thumb { - background: rgba(var(--themecolor-rgbstr), 0.35); - } + + /* 暗色模式下目录链接颜?*/ + 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); + } } @@ -16246,264 +16451,781 @@ html.darkmode.style-glass article.post.post-full.card { /* 检测不支持 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); - } + + /* 顶栏降级 */ + 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; - } - } - } + @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); - } + + #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); + --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); + --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 { + transition: transform var(--animation-normal) var(--ease-out-expo), box-shadow var(--animation-normal) var(--ease-standard); + } -article.post.card .post-thumbnail { - transition: transform var(--animation-slow) var(--ease-out-expo); - } - article.post.card:hover .post-thumbnail { - transform: none; - } - .card:not(article):not(.no-hover-effect) { - transition: box-shadow var(--animation-normal) var(--ease-standard); - } - #leftbar .card, #rightbar .card { - transition: box-shadow var(--animation-normal) var(--ease-standard), border-color var(--animation-fast) var(--ease-standard); - } - #leftbar .card:hover, #rightbar .card:hover { - border-color: rgba(var(--themecolor-rgbstr), 0.15); - } + article.post.card .post-thumbnail { + transition: transform var(--animation-slow) var(--ease-out-expo); + } + + article.post.card:hover .post-thumbnail { + transform: none; + } + + .card:not(article):not(.no-hover-effect) { + transition: box-shadow var(--animation-normal) var(--ease-standard); + } + + #leftbar .card, + #rightbar .card { + transition: box-shadow var(--animation-normal) var(--ease-standard), border-color var(--animation-fast) var(--ease-standard); + } + + #leftbar .card:hover, + #rightbar .card:hover { + border-color: rgba(var(--themecolor-rgbstr), 0.15); + } } /* 3. 按钮和链接悬停效?*/ @media (hover: hover) and (pointer: fine) { - .btn { transition: all var(--animation-fast) var(--ease-standard); position: relative; overflow: hidden; } - .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%); opacity: 0; transition: opacity var(--animation-fast) var(--ease-standard); pointer-events: none; } - .btn:hover::after { opacity: 1; } - .btn:active { transform: scale(0.98); transition-duration: var(--micro-duration); } - article .post-content a:not([class*="button"]):not(.no-underline) { background-image: linear-gradient(var(--themecolor), var(--themecolor)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--animation-normal) var(--ease-out-expo); } - article .post-content a:not([class*="button"]):not(.no-underline):hover { background-size: 100% 2px; } - .navbar-nav .nav-link { position: relative; transition: color var(--animation-fast) var(--ease-standard); } - .navbar-nav .nav-link::before { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: currentColor; transition: width var(--animation-normal) var(--ease-out-expo), left var(--animation-normal) var(--ease-out-expo); border-radius: 1px; } - .navbar-nav .nav-link:hover::before { width: 100%; left: 0; } - .comment-item { transition: box-shadow var(--animation-normal) var(--ease-standard); } + .btn { + transition: all var(--animation-fast) var(--ease-standard); + position: relative; + overflow: hidden; + } + + .btn::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%); + opacity: 0; + transition: opacity var(--animation-fast) var(--ease-standard); + pointer-events: none; + } + + .btn:hover::after { + opacity: 1; + } + + .btn:active { + transform: scale(0.98); + transition-duration: var(--micro-duration); + } + + article .post-content a:not([class*="button"]):not(.no-underline) { + background-image: linear-gradient(var(--themecolor), var(--themecolor)); + background-size: 0% 2px; + background-position: 0 100%; + background-repeat: no-repeat; + transition: background-size var(--animation-normal) var(--ease-out-expo); + } + + article .post-content a:not([class*="button"]):not(.no-underline):hover { + background-size: 100% 2px; + } + + .navbar-nav .nav-link { + position: relative; + transition: color var(--animation-fast) var(--ease-standard); + } + + .navbar-nav .nav-link::before { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: currentColor; + transition: width var(--animation-normal) var(--ease-out-expo), left var(--animation-normal) var(--ease-out-expo); + border-radius: 1px; + } + + .navbar-nav .nav-link:hover::before { + width: 100%; + left: 0; + } + + .comment-item { + transition: box-shadow var(--animation-normal) var(--ease-standard); + } } /* 4. 滚动入场动画 */ -@keyframes modernFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } -@keyframes modernFadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } -@keyframes modernSlideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } -@keyframes modernSlideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } -@keyframes modernFadeInOpacity { from { opacity: 0; } to { opacity: 1; } } +@keyframes modernFadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } -.article-list article.post { animation: modernFadeInOpacity var(--animation-slow) var(--ease-emphasized-decelerate) both; transform: none; } -.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; } + to { + opacity: 1; + transform: translateY(0); + } +} -#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; } +@keyframes modernFadeInScale { + from { + opacity: 0; + transform: scale(0.95); + } -#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; } + 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); + } +} + +@keyframes modernFadeInOpacity { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.article-list article.post { + transform: none; + opacity: 1; +} + +.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; pointer-events: none; } -#primary { transition: opacity var(--animation-normal) var(--ease-standard); will-change: opacity; } -@keyframes modernContentFadeIn { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } -article.post.post-full:not(.no-animation) { animation: modernContentFadeIn var(--animation-slow) var(--ease-emphasized-decelerate) both; will-change: opacity, transform; } -article.post.post-full { transform-origin: center top; } +#primary.pjax-loading { + opacity: 0.6; + pointer-events: none; +} -#float_action_buttons { transition: transform var(--animation-normal) var(--ease-back), opacity var(--animation-normal) var(--ease-standard); } -#float_action_buttons .fabtn { transition: background var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard), opacity var(--animation-normal) var(--ease-standard); } -#float_action_buttons .fabtn:active { transform: scale(0.9); transition-duration: var(--micro-duration); } -@keyframes modernFabtnBounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { transform: scale(1.05); } 70% { transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } -#float_action_buttons:not(.fabtns-unloaded) .fabtn:not(.fabtn-hidden) { animation: modernFabtnBounceIn var(--animation-slow) var(--ease-spring) both; } -#float_action_buttons .fabtn:nth-child(1) { animation-delay: 0ms; } -#float_action_buttons .fabtn:nth-child(2) { animation-delay: 50ms; } -#float_action_buttons .fabtn:nth-child(3) { animation-delay: 100ms; } -#float_action_buttons .fabtn:nth-child(4) { animation-delay: 150ms; } -#float_action_buttons .fabtn:nth-child(5) { animation-delay: 200ms; } +#primary { + transition: opacity var(--animation-normal) var(--ease-standard); +} + +@keyframes modernContentFadeIn { + from { + opacity: 0; + transform: translate3d(0, 16px, 0); + } + + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +article.post.post-full:not(.no-animation) { + opacity: 1; +} + +/* article.post.post-full transform-origin removed to avoid stacking context breaking backdrop-filter */ + +/* ========== 骨架屏 Skeleton Screen (Element Plus Style) ========== */ +@keyframes el-skeleton-loading { + 0% { + background-position: 100% 50%; + } + + 100% { + background-position: 0 50%; + } +} + +html.darkmode { + --skeleton-bg: rgba(255, 255, 255, 0.05); + --skeleton-highlight: rgba(255, 255, 255, 0.1); +} + +:root { + --skeleton-bg: #f2f2f2; + --skeleton-highlight: #e6e6e6; +} + +.argon-skeleton { + padding: 24px; + width: 100%; + display: flex; + flex-direction: column; +} + +.argon-skeleton-item { + background: linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-highlight) 37%, var(--skeleton-bg) 63%); + background-size: 400% 100%; + animation: el-skeleton-loading 1.4s ease infinite; + border-radius: 4px; +} + +.argon-skeleton-title { + width: 40%; + height: 28px; + margin: 0 auto 20px; +} + +.argon-skeleton-meta { + width: 70%; + height: 16px; + margin: 0 auto 24px; +} + +.argon-skeleton-line { + width: 100%; + height: 16px; + margin-bottom: 12px; +} + +.argon-skeleton-line.short { + width: 60%; +} + +.article-list article.post.skeleton-loading>*:not(.argon-skeleton) { + opacity: 0; + visibility: hidden; + transition: opacity 0.4s ease; + position: absolute; + /* Preempt layout shift */ +} + +/* ========== 长文章 backdrop-filter 修复 ========== + 浏览器 GPU 纹理大小限制导致 backdrop-filter 在超高元素上失效。 + 解决方案:通过 JS 插入视口大小的模糊层,使用 transform 跟随滚动位置。 */ + +/* 移除文章卡片自身的 backdrop-filter,改用 JS 管理的模糊层 */ +article.post.post-full.card { + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + background-color: transparent !important; + background: transparent !important; +} + +/* JS 插入的模糊覆盖层 */ +.post-full-blur-overlay { + position: absolute; + left: 0; + right: 0; + top: 0; + height: calc(100vh + 800px); + background-color: rgba(255, 255, 255, var(--card-opacity, 0.7)); + -webkit-backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + backdrop-filter: blur(var(--card-blur, 20px)) saturate(var(--card-saturate, 180%)); + pointer-events: none; + z-index: 0; + 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; +} + +#float_action_buttons { + transition: transform var(--animation-normal) var(--ease-back), opacity var(--animation-normal) var(--ease-standard); +} + +#float_action_buttons .fabtn { + transition: background var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard), opacity var(--animation-normal) var(--ease-standard); +} + +#float_action_buttons .fabtn:active { + transform: scale(0.9); + transition-duration: var(--micro-duration); +} + +@keyframes modernFabtnBounceIn { + 0% { + opacity: 0; + transform: scale(0.3); + } + + 50% { + transform: scale(1.05); + } + + 70% { + transform: scale(0.95); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +#float_action_buttons:not(.fabtns-unloaded) .fabtn:not(.fabtn-hidden) { + animation: modernFabtnBounceIn var(--animation-slow) var(--ease-spring) both; +} + +#float_action_buttons .fabtn:nth-child(1) { + animation-delay: 0ms; +} + +#float_action_buttons .fabtn:nth-child(2) { + animation-delay: 50ms; +} + +#float_action_buttons .fabtn:nth-child(3) { + animation-delay: 100ms; +} + +#float_action_buttons .fabtn:nth-child(4) { + animation-delay: 150ms; +} + +#float_action_buttons .fabtn:nth-child(5) { + animation-delay: 200ms; +} /* 6. 顶栏和评论区动画 */ -#navbar-main { transition: background-color var(--animation-normal) var(--ease-standard), padding var(--animation-normal) var(--ease-standard), box-shadow var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard), backdrop-filter var(--animation-normal) var(--ease-standard); } -#navbar-main:not(.navbar-ontop) { box-shadow: var(--shadow-2); } -#navbar_search_input_container .input-group { transition: width var(--animation-normal) var(--ease-out-expo), background var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard); } -#navbar_search_input_container.open .input-group { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } +#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); +} -.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); } +#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; } +article img, +.post-thumbnail img { + transition: opacity var(--animation-normal) var(--ease-standard); +} -.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); } +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; } +::-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; } + 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); } + #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 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); +} + /* ========================================================================== 现代化页面加载系? ========================================================================== */ @@ -16514,6 +17236,7 @@ article img.loaded, .post-thumbnail img.loaded, article img:not([loading="lazy"] transform: rotate(360deg); } } + .loading-spinner { width: 24px; height: 24px; @@ -16548,12 +17271,14 @@ article img.loaded, .post-thumbnail img.loaded, article img:not([loading="lazy"] pointer-events: none; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s; } + .page-loader.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } + .page-loader.is-hiding { opacity: 0; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.6, 1); @@ -16567,6 +17292,7 @@ article img.loaded, .post-thumbnail img.loaded, article img:not([loading="lazy"] -webkit-backdrop-filter: blur(calc(var(--card-blur) * 1.2)) saturate(var(--card-saturate)); backdrop-filter: blur(calc(var(--card-blur) * 1.2)) saturate(var(--card-saturate)); } + html.darkmode .page-loader-backdrop { background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%); } @@ -16582,6 +17308,7 @@ html.darkmode .page-loader-backdrop { opacity: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; } + .page-loader.is-visible .page-loader-content { transform: translateY(0) scale(1); opacity: 1; @@ -16602,12 +17329,14 @@ html.darkmode .page-loader-backdrop { transform: rotate(-90deg); filter: drop-shadow(0 4px 12px rgba(var(--themecolor-rgbstr), 0.2)); } + .loader-ring-bg { fill: none; stroke: var(--color-border); stroke-width: 3; opacity: 0.2; } + .loader-ring-progress { fill: none; stroke: url(#loaderGradient); @@ -16628,10 +17357,14 @@ html.darkmode .page-loader-backdrop { opacity: 0.1; animation: ringGlow 2s ease-in-out infinite; } + @keyframes ringGlow { - 0%, 100% { + + 0%, + 100% { opacity: 0.1; } + 50% { opacity: 0.3; } @@ -16648,21 +17381,27 @@ html.darkmode .page-loader-backdrop { color: var(--themecolor); animation: iconPulse 2s ease-in-out infinite; } + .loader-icon svg { width: 100%; height: 100%; animation: iconRotate 3s linear infinite; } + @keyframes iconPulse { - 0%, 100% { + + 0%, + 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } + 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } } + @keyframes iconRotate { to { transform: rotate(360deg); @@ -16677,12 +17416,14 @@ html.darkmode .page-loader-backdrop { animation: textFadeIn 0.5s ease forwards; animation-delay: 0.3s; } + @keyframes textFadeIn { to { opacity: 1; transform: translateY(0); } } + .loader-title { font-size: 20px; font-weight: 600; @@ -16690,6 +17431,7 @@ html.darkmode .page-loader-backdrop { margin-bottom: 8px; letter-spacing: 0.5px; } + .loader-subtitle { font-size: 14px; color: var(--color-font-sub); @@ -16703,6 +17445,7 @@ html.darkmode .page-loader-backdrop { transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } + .page-loader.show-skeleton .loader-skeleton { opacity: 1; transform: translateY(0); @@ -16716,6 +17459,7 @@ html.darkmode .page-loader-backdrop { overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); } + html.darkmode .skeleton-card { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } @@ -16730,6 +17474,7 @@ html.darkmode .skeleton-card { position: relative; overflow: hidden; } + .skeleton-image::after { content: ''; position: absolute; @@ -16740,18 +17485,24 @@ html.darkmode .skeleton-card { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: shimmerSlide 2s infinite; } + html.darkmode .skeleton-image::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); } + @keyframes shimmerSlide { to { left: 100%; } } + @keyframes skeletonShimmer { - 0%, 100% { + + 0%, + 100% { background-position: 0% 0%; } + 50% { background-position: 100% 0%; } @@ -16761,6 +17512,7 @@ html.darkmode .skeleton-image::after { .skeleton-content { padding: 20px; } + .skeleton-title { height: 24px; width: 70%; @@ -16770,6 +17522,7 @@ html.darkmode .skeleton-image::after { animation: skeletonShimmer 1.5s ease-in-out infinite; margin-bottom: 16px; } + .skeleton-line { height: 14px; border-radius: 7px; @@ -16778,6 +17531,7 @@ html.darkmode .skeleton-image::after { animation: skeletonShimmer 1.5s ease-in-out infinite; margin-bottom: 10px; } + .skeleton-line.short { width: 60%; } @@ -16788,38 +17542,48 @@ html.darkmode .skeleton-image::after { width: 100px; height: 100px; } + .loader-icon { width: 40px; height: 40px; } + .loader-title { font-size: 18px; } + .loader-subtitle { font-size: 13px; } + .skeleton-image { height: 160px; } + .skeleton-content { padding: 16px; } } + @media (max-width: 480px) { .page-loader-content { gap: 24px; } + .loader-ring-container { width: 90px; height: 90px; } + .loader-icon { width: 36px; height: 36px; } + .skeleton-card { width: 92vw; } + .skeleton-image { height: 140px; } @@ -16827,6 +17591,7 @@ html.darkmode .skeleton-image::after { /* ---------- 减少动画(无障碍) ---------- */ @media (prefers-reduced-motion: reduce) { + .page-loader, .page-loader-content, .loader-ring-progress, @@ -16839,6 +17604,7 @@ html.darkmode .skeleton-image::after { animation: none !important; transition: none !important; } + .page-loader.is-visible .page-loader-content { transform: none; opacity: 1; @@ -16847,114 +17613,263 @@ html.darkmode .skeleton-image::after { /* 页面过渡内容容器 */ .page-transition-content { - will-change: opacity; - transition: opacity var(--animation-normal) var(--ease-standard); + transition: opacity var(--animation-normal) var(--ease-standard); } + html.page-transition-enter .page-transition-content { - opacity: 0; + opacity: 0; } + html.page-transition-enter.page-transition-active .page-transition-content { - opacity: 1; + opacity: 1; } @media (prefers-reduced-motion: reduce) { - .page-transition-content, - #article-loading-overlay, - #article-loading-overlay .overlay-content { - transition: none !important; - animation: none !important; - } + + .page-transition-content, + #article-loading-overlay, + #article-loading-overlay .overlay-content { + transition: none !important; + animation: none !important; + } } /* 12. 模态框和下拉菜单动画 */ -.modal { transition: opacity var(--animation-normal) var(--ease-standard); } -.modal.show { opacity: 1; } -.modal-dialog { transition: transform var(--animation-normal) var(--ease-emphasized-decelerate), opacity var(--animation-normal) var(--ease-standard); transform: scale(0.9) translateY(-20px); opacity: 0; } -.modal.show .modal-dialog { transform: scale(1) translateY(0); opacity: 1; } -@media screen and (max-width: 900px) { - .modal-dialog.modal-bottom { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; transform: translateY(100%); border-radius: 20px 20px 0 0; } - .modal.show .modal-dialog.modal-bottom { transform: translateY(0); } +.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); } -.dropdown-menu { opacity: 0; transform: translateY(-10px) scale(0.95); transform-origin: top center; transition: opacity var(--animation-fast) var(--ease-standard), transform var(--animation-fast) var(--ease-emphasized-decelerate), visibility var(--animation-fast); visibility: hidden; } -.dropdown-menu.show { opacity: 1; transform: translateY(0) scale(1); visibility: visible; } -.dropdown-item { transition: background var(--animation-fast) var(--ease-standard), color var(--animation-fast) var(--ease-standard); } /* 13. 工具提示、标签、分页动画 */ -.tooltip { opacity: 0; transform: translateY(5px); transition: opacity var(--animation-fast) var(--ease-standard), transform var(--animation-fast) var(--ease-emphasized-decelerate); } -.tooltip.show { opacity: 1; transform: translateY(0); } -.badge, .tag { transition: background var(--animation-fast) var(--ease-standard); } -.badge:active, .tag:active { transform: scale(0.95); } -.pagination .page-link { transition: all var(--animation-fast) var(--ease-standard); } -.pagination .page-link:active { transform: scale(0.95); } +.tooltip { + opacity: 0; + transform: translateY(5px); + transition: opacity var(--animation-fast) var(--ease-standard), transform var(--animation-fast) var(--ease-emphasized-decelerate); +} + +.tooltip.show { + opacity: 1; + transform: translateY(0); +} + +.badge, +.tag { + transition: background var(--animation-fast) var(--ease-standard); +} + +.badge:active, +.tag:active { + transform: scale(0.95); +} + +.pagination .page-link { + transition: all var(--animation-fast) var(--ease-standard); +} + +.pagination .page-link:active { + transform: scale(0.95); +} /* 14. 目录导航动画 */ -.index-link { transition: all var(--animation-fast) var(--ease-standard); position: relative; } -.index-link::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; background: var(--themecolor); border-radius: 2px; transition: transform var(--animation-normal) var(--ease-spring); } -.index-item.current > .index-link::before { transform: translateY(-50%) scaleY(1); } +.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; } +.timeline-item { + opacity: 0; + transform: translateX(-20px); + animation: modernTimelineSlideIn var(--animation-slow) var(--ease-emphasized-decelerate) forwards; +} + +@keyframes modernTimelineSlideIn { + to { + opacity: 1; + transform: translateX(0); + } +} + +.timeline-item:nth-child(1) { + animation-delay: 0ms; +} + +.timeline-item:nth-child(2) { + animation-delay: 100ms; +} + +.timeline-item:nth-child(3) { + animation-delay: 200ms; +} + +.timeline-item:nth-child(4) { + animation-delay: 300ms; +} + +.timeline-item:nth-child(5) { + animation-delay: 400ms; +} + +.timeline-item:nth-child(n+6) { + animation-delay: 500ms; +} /* 16. 友链和代码块动画 */ -.friend-link-item { transition: box-shadow var(--animation-normal) var(--ease-standard); } -.friend-link-avatar { transition: transform var(--animation-normal) var(--ease-spring); } -.hljs-codeblock { transition: box-shadow var(--animation-normal) var(--ease-standard); } -.code-copy-btn { opacity: 0; transition: opacity var(--animation-fast) var(--ease-standard), background var(--animation-fast) var(--ease-standard); } -.hljs-codeblock:hover .code-copy-btn { opacity: 1; } +.friend-link-item { + transition: box-shadow var(--animation-normal) var(--ease-standard); +} + +.friend-link-avatar { + transition: transform var(--animation-normal) var(--ease-spring); +} + +.hljs-codeblock { + transition: box-shadow var(--animation-normal) var(--ease-standard); +} + +.code-copy-btn { + opacity: 0; + transition: opacity var(--animation-fast) var(--ease-standard), background var(--animation-fast) var(--ease-standard); +} + +.hljs-codeblock:hover .code-copy-btn { + opacity: 1; +} /* 17. 减少动画偏好支持 */ @media (prefers-reduced-motion: reduce) { - *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } - .card, .btn, a { transition: none !important; } + + *, + *::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; } + + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + } } + /* ========== End of Modern UI Enhancements ========== */ .argon-hidden-text { - transition: all 0.3s ease; + transition: all 0.3s ease; } + .argon-hidden-text-background { - background-color: #252525; - color: #252525; - text-shadow: none; - border-radius: 2px; - padding: 0 2px; + background-color: #252525; + color: #252525; + text-shadow: none; + border-radius: 2px; + padding: 0 2px; } -.argon-hidden-text-background:hover, + +.argon-hidden-text-background:hover, .argon-hidden-text-background:active { - color: #fff; + color: #fff; } + html.darkmode .argon-hidden-text-background { - background-color: #ddd; - color: #ddd; + background-color: #ddd; + color: #ddd; } -html.darkmode .argon-hidden-text-background:hover, + +html.darkmode .argon-hidden-text-background:hover, html.darkmode .argon-hidden-text-background:active { - color: #000; + color: #000; } .argon-hidden-text-blur { - filter: blur(5px); - -webkit-filter: blur(5px); - cursor: default; - user-select: none; -} -.argon-hidden-text-blur:hover, -.argon-hidden-text-blur:active { - filter: none; - -webkit-filter: none; - user-select: auto; + filter: blur(5px); + -webkit-filter: blur(5px); + cursor: default; + user-select: none; } +.argon-hidden-text-blur:hover, +.argon-hidden-text-blur:active { + filter: none; + -webkit-filter: none; + user-select: auto; +} \ No newline at end of file