From 29257dfce2eedd1e4ad603f15fe538920c91cbde Mon Sep 17 00:00:00 2001 From: nanhaoluo <3075912108@qq.com> Date: Tue, 20 Jan 2026 16:26:20 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BB=8E=200dba91c=20=E6=81=A2=E5=A4=8D?= =?UTF-8?q?=20style.css=20=E5=92=8C=20argontheme.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 完全恢复到问题出现前的版本 - 确保浮动按钮正常工作 --- argontheme.js | 224 ++--- style.css | 2224 +++++++++++++++++++++++++++++++++++++------------ 2 files changed, 1752 insertions(+), 696 deletions(-) diff --git a/argontheme.js b/argontheme.js index edcabf9..22290f7 100644 --- a/argontheme.js +++ b/argontheme.js @@ -587,18 +587,10 @@ $(document).on("change" , ".search-filter" , function(e){ part1OuterHeight = $leftbarPart1.outerHeight(); changeLeftbarStickyStatus(); }); - - // 防抖处理 MutationObserver - let leftbarMutationTimer = null; new MutationObserver(function(){ - if (leftbarMutationTimer) { - clearTimeout(leftbarMutationTimer); - } - leftbarMutationTimer = setTimeout(function() { - part1OffsetTop = $leftbarPart1.offset().top; - part1OuterHeight = $leftbarPart1.outerHeight(); - changeLeftbarStickyStatus(); - }, 150); + part1OffsetTop = $leftbarPart1.offset().top; + part1OuterHeight = $leftbarPart1.outerHeight(); + changeLeftbarStickyStatus(); }).observe(leftbarPart1, {attributes: true, childList: true, subtree: true}); }(); @@ -624,56 +616,15 @@ if (argonConfig.headroom == "true"){ } /*瀑布流布局*/ -let waterflowTimer = null; -let waterflowImagesLoaded = false; - function waterflowInit() { if (argonConfig.waterflow_columns == "1") { return; } - - // 防抖处理，避免频繁重新计算 - if (waterflowTimer) { - clearTimeout(waterflowTimer); - } - - waterflowTimer = setTimeout(function() { - waterflowRender(); - }, 100); -} - -function waterflowRender() { - // 检查图片是否已加载 - if (!waterflowImagesLoaded) { - let images = $("#main.article-list img"); - let loadedCount = 0; - let totalImages = images.length; - - if (totalImages > 0) { - images.each(function(index, ele){ - if (ele.complete) { - loadedCount++; - } else { - ele.onload = function(){ - loadedCount++; - if (loadedCount === totalImages) { - waterflowImagesLoaded = true; - waterflowRender(); - } - }; - } - }); - - // 如果所有图片已加载 - if (loadedCount === totalImages) { - waterflowImagesLoaded = true; - } else { - // 等待图片加载 - return; - } + $("#main.article-list img").each(function(index, ele){ + ele.onload = function(){ + waterflowInit(); } - } - + }); let columns; if (argonConfig.waterflow_columns == "2and3") { if ($("#main").outerWidth() > 1000) { @@ -708,62 +659,45 @@ function waterflowRender() { } return res; } - + $("#primary").css("transition", "none") + .addClass("waterflow"); let $container = $("#main.article-list"); if (!$container.length){ return; } - let $items = $container.find("article.post:not(.no-results), .shuoshuo-preview-container"); columns = Math.max(Math.min(columns, $items.length), 1); - - // 使用 requestAnimationFrame 优化性能 - requestAnimationFrame(function() { - $("#primary").css("transition", "none").addClass("waterflow"); - - if (columns == 1) { - $container.removeClass("waterflow"); - $items.css("transition", "").css("position", "").css("width", "").css("top", "").css("left", "").css("margin", ""); - $(".waterflow-placeholder").remove(); - }else{ - $container.addClass("waterflow"); - $items.each(function(index, item) { - let $item = $(item); - $item.css("transition", "none") - .css("position", "absolute") - .css("width", "calc(" + (100 / columns) + "% - " + (10 * (columns - 1) / columns) + "px)").css("margin", 0); - let itemHeight = $item.outerHeight() + 10; - let pos = getMinHeightPosition(); - $item.css("top", heights[getMinHeightPosition()] + "px") - .css("left", (pos * $item.outerWidth() + 10 * pos) + "px"); - heights[pos] += itemHeight; - }); - } - - if ($(".waterflow-placeholder").length) { - $(".waterflow-placeholder").css("height", getMaxHeight() + "px"); - }else{ - $container.prepend("
"); - } - }); + if (columns == 1) { + $container.removeClass("waterflow"); + $items.css("transition", "").css("position", "").css("width", "").css("top", "").css("left", "").css("margin", ""); + $(".waterflow-placeholder").remove(); + }else{ + $container.addClass("waterflow"); + $items.each(function(index, item) { + let $item = $(item); + $item.css("transition", "none") + .css("position", "absolute") + .css("width", "calc(" + (100 / columns) + "% - " + (10 * (columns - 1) / columns) + "px)").css("margin", 0); + let itemHeight = $item.outerHeight() + 10; + let pos = getMinHeightPosition(); + $item.css("top", heights[getMinHeightPosition()] + "px") + .css("left", (pos * $item.outerWidth() + 10 * pos) + "px"); + heights[pos] += itemHeight; + }); + } + if ($(".waterflow-placeholder").length) { + $(".waterflow-placeholder").css("height", getMaxHeight() + "px"); + }else{ + $container.prepend("
"); + } } waterflowInit(); if (argonConfig.waterflow_columns != "1") { $(window).resize(function(){ waterflowInit(); }); - - // 防抖处理 MutationObserver - let waterflowMutationTimer = null; new MutationObserver(function(mutations, observer){ - if (waterflowMutationTimer) { - clearTimeout(waterflowMutationTimer); - } - waterflowMutationTimer = setTimeout(function() { - // 重置图片加载状态，以便重新检查 - waterflowImagesLoaded = false; - waterflowInit(); - }, 150); + waterflowInit(); }).observe(document.querySelector("#primary"), { 'childList': true }); @@ -990,18 +924,8 @@ if (argonConfig.waterflow_columns != "1") { } } changefabtnDisplayStatus(); - - // 节流处理滚动事件 - let fabtnScrollTimer = null; - let fabtnScrollTicking = false; $(window).scroll(function(){ - if (!fabtnScrollTicking) { - window.requestAnimationFrame(function() { - changefabtnDisplayStatus(); - fabtnScrollTicking = false; - }); - fabtnScrollTicking = true; - } + changefabtnDisplayStatus(); }); $(window).resize(function(){ changefabtnDisplayStatus(); @@ -2407,31 +2331,29 @@ function loadImage(img, effect) { // 移除所有 lazyload-style-* 类 img.className = img.className.replace(/\blazyload-style-\d+\b/g, '').trim(); - // 应用加载效果（使用 requestAnimationFrame 优化性能） - requestAnimationFrame(function() { - if (effect === 'fadeIn') { - img.style.opacity = '0'; - img.style.transition = 'opacity 0.3s ease'; - requestAnimationFrame(function() { - img.style.opacity = '1'; - }); - setTimeout(function() { - img.style.transition = ''; - }, 310); - } 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() { - img.style.opacity = '1'; - img.style.transform = 'translateY(0)'; - }); - setTimeout(function() { - img.style.transition = ''; - img.style.transform = ''; - }, 310); - } - }); + // 应用加载效果 + if (effect === 'fadeIn') { + img.style.opacity = '0'; + img.style.transition = 'opacity 0.3s ease'; + setTimeout(function() { + img.style.opacity = '1'; + }, 10); + setTimeout(function() { + img.style.transition = ''; + }, 310); + } else if (effect === 'slideDown') { + img.style.opacity = '0'; + img.style.transform = 'translateY(-20px)'; + img.style.transition = 'opacity 0.3s ease, transform 0.3s ease'; + setTimeout(function() { + img.style.opacity = '1'; + img.style.transform = 'translateY(0)'; + }, 10); + setTimeout(function() { + img.style.transition = ''; + img.style.transform = ''; + }, 310); + } }; tempImg.onerror = function() { // 加载失败时使用原始 src @@ -2495,16 +2417,8 @@ if ($("html").hasClass("banner-as-cover")){ } } classInit(); - - // 防抖处理 MutationObserver - let classInitTimer = null; new MutationObserver(function(mutations, observer){ - if (classInitTimer) { - clearTimeout(classInitTimer); - } - classInitTimer = setTimeout(function() { - classInit(); - }, 150); + classInit(); }).observe(document.querySelector("#primary"), { 'childList': true }); @@ -2528,17 +2442,8 @@ if ($("html").hasClass("banner-as-cover")){ } } changeWidgetsDisplayStatus(); - - // 节流处理滚动事件 - let widgetsScrollTicking = false; $(window).scroll(function(){ - if (!widgetsScrollTicking) { - window.requestAnimationFrame(function() { - changeWidgetsDisplayStatus(); - widgetsScrollTicking = false; - }); - widgetsScrollTicking = true; - } + changeWidgetsDisplayStatus(); }); $(window).resize(function(){ changeWidgetsDisplayStatus(); @@ -3886,15 +3791,8 @@ void 0; ripple.className = 'touch-ripple'; var oldRipple = element.querySelector('.touch-ripple'); if (oldRipple) oldRipple.remove(); - // 只在元素没有 position 样式时才设置，避免布局突变 - var computedStyle = window.getComputedStyle(element); - if (computedStyle.position === 'static') { - element.style.position = 'relative'; - } - // 只在元素没有 overflow 样式时才设置，避免内容换行 - if (computedStyle.overflow === 'visible') { - element.style.overflow = 'hidden'; - } + element.style.position = 'relative'; + element.style.overflow = 'hidden'; element.appendChild(ripple); setTimeout(function() { ripple.remove(); }, 600); } diff --git a/style.css b/style.css index 34648dd..2bcd4ea 100644 --- a/style.css +++ b/style.css @@ -50,6 +50,7 @@ Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应, --themecolor-dark3: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 15%), 0%)); --themecolor-light: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), min(calc(var(--themecolor-L) * 1% + 10%), 100%)); + --themecolor-gradient: linear-gradient(150deg, var(--themecolor-light) 15%, var(--themecolor) 70%, var(--themecolor-dark0) 94%); @@ -185,13 +186,21 @@ Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应, --color-background: #f4f5f7; + --color-foreground: #fff; + --color-widgets: #fff; + --color-widgets-disabled: #e9ecef; + --color-border: #dce0e5; + --color-border-on-foreground: #f3f3f3; + --color-border-on-foreground-deeper: #eee; + --color-text-deeper: #212529; + --color-selection: #cce2ff; /* ========== 统一动画系统 - 桌面端和移动端一致 ========== */ @@ -225,15 +234,25 @@ Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应, html.darkmode body { --color-background: #282828; + --color-foreground: #424242; + --color-widgets: #555; + --color-widgets-disabled: #474747; + --color-border: #777; + --color-border-on-foreground: #555; + --color-border-on-foreground-deeper: #777; + --color-text-deeper: #eee; + --color-darkmode-toolbar: 33, 33, 33; + --color-darkmode-banner: #212121; + --color-selection: #607799; } @@ -243,18 +262,27 @@ html.darkmode.amoled-dark body, html.darkmode.amoled-dark.immersion-color body { --color-background: #111; + --color-foreground: #000; + --color-widgets: #151515; + --color-widgets-disabled: #000; + --color-border: #222; + --color-border-on-foreground: #181818; + --color-border-on-foreground-deeper: #252525; + --color-text-deeper: #eee; + --color-selection: #607799; --color-darkmode-toolbar: 0, 0, 0; + --color-darkmode-banner: #131313; } @@ -264,13 +292,21 @@ html.darkmode.amoled-dark.immersion-color body { html.immersion-color body { --color-background: rgb(var(--color-tint-86)); + --color-foreground: rgb(var(--color-tint-92)); + --color-widgets: rgb(var(--color-tint-95)); + --color-widgets-disabled: rgb(var(--color-tint-86)); + --color-border: rgb(var(--color-tint-78)); + --color-border-on-foreground: rgb(var(--color-tint-86)); + --color-border-on-foreground-deeper: rgb(var(--color-tint-80)); + --color-text-deeper: rgb(var(--color-shade-82)); + --color-selection: rgb(var(--color-tint-70)); } @@ -278,18 +314,27 @@ html.immersion-color body { html.immersion-color.darkmode body { --color-background: rgb(var(--color-shade-94)); + --color-foreground: rgb(var(--color-shade-90)); + --color-widgets: rgb(var(--color-shade-86)); + --color-widgets-disabled: rgb(var(--color-shade-82)); + --color-border: rgb(var(--color-shade-80)); + --color-border-on-foreground: rgb(var(--color-shade-82)); + --color-border-on-foreground-deeper: rgb(var(--color-shade-75)); + --color-text-deeper: rgb(var(--color-tint-82)); + --color-selection: rgb(var(--color-shade-70)); --color-darkmode-toolbar: var(--color-shade-90); + --color-darkmode-banner: rgb(var(--color-shade-96)); } @@ -381,8 +426,8 @@ html.theme-transitioning *::after { :root { - --card-radius-sm: calc(var(--card-radius) * 0.75); - --card-radius-lg: calc(var(--card-radius) * 1.5); + --card-radius: 4px; + --font: "Open Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; @@ -392,6 +437,7 @@ html.theme-transitioning *::after { html.themecolor-toodark.darkmode { --themecolor: #5e72e4 !important; + --themecolor-light: #8a98eb !important; } @@ -399,9 +445,13 @@ html.themecolor-toodark.darkmode { body { + background: var(--color-background) !important; + font-family: var(--font); + overflow: overlay; + } a { @@ -411,22 +461,31 @@ a { } audio, + canvas, + progress, + video { + display: inline-block; + vertical-align: baseline; + } article .post-content { - margin-top: 4px; + margin-top: 6px; } article .post-content p { + line-height: 1.8; + word-wrap: break-word; + } article h1, @@ -448,13 +507,21 @@ article strong { } article h1, + article h2, + article h3, + article h4, + article h5, + article h6 { + margin-top: 18px !important; + margin-bottom: 15px; + } article h1 { @@ -494,15 +561,23 @@ article h6 { } article figcaption { + text-align: center; + opacity: 0.65; + margin-top: 10px; + } article img, + .shuoshuo-preview-container img { + max-width: 100%; + height: auto; + } .shuoshuo-preview-container img { @@ -522,7 +597,9 @@ article .wp-block-image figcaption, .shuoshuo-preview-container .wp-block-image figcaption { text-align: center; + font-size: 14px; + opacity: 0.6; } @@ -532,6 +609,7 @@ article video, .shuoshuo-preview-container video { max-width: 100%; + outline: none; } @@ -553,15 +631,25 @@ article .post-content a { article .post-content a:before { content: " "; + position: absolute; + top: auto; + bottom: 0px; + left: 0; + width: 100%; + height: 1px; + background-color: var(--themecolor); + transition: all 0.2s; + transform: scaleX(0); + backface-visibility: hidden; } @@ -591,19 +679,33 @@ html:not(.disable-codeblock-style) article pre:not(.hljs-codeblock) { "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; + font-size: 14px; + line-height: 1.375; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + tab-size: 4; + hyphens: none; + color: #5e6687; + background: var(--color-border-on-foreground); + direction: ltr; + border: 1px solid var(--color-border-on-foreground-deeper); + padding: 14px; + border-radius: 3px; } @@ -611,8 +713,11 @@ html:not(.disable-codeblock-style) article pre:not(.hljs-codeblock) { article .post-content blockquote { padding-left: 1em; + margin: 1em 3em 1em 0; + font-weight: 400; + border-left: 4px solid var(--color-border-on-foreground-deeper); } @@ -620,8 +725,11 @@ article .post-content blockquote { article .post-content mark { padding: 2px; + margin: 0 5px; + background: #fffdd1; + border-bottom: 1px solid #ffedce; } @@ -631,6 +739,7 @@ article .post-content u, article .post-content ins { text-decoration: none; + border-bottom: 1px solid; } @@ -642,11 +751,17 @@ html:not(.disable-codeblock-style) article code:not([hljs-codeblock-inner]) { "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; + color: #5e6687; + background: var(--color-border-on-foreground); + border: 1px solid var(--color-border-on-foreground-deeper); + direction: ltr; + border-radius: 3px; + padding: 0 4px; } @@ -662,7 +777,9 @@ article .post-content > p > code:not([hljs-codeblock-inner]) { article .post-content abbr[title] { text-decoration: none; + cursor: help; + border-bottom: 1px dotted; } @@ -670,9 +787,13 @@ article .post-content abbr[title] { article .post-content kbd { padding: 2px 6px; + font-size: 90%; + color: #fff; + background-color: #333; + border-radius: 3px; } @@ -698,8 +819,11 @@ article .wp-block-gallery.is-cropped .blocks-gallery-image .fancybox-wrapper, article .wp-block-gallery.is-cropped .blocks-gallery-item .fancybox-wrapper { height: 100%; + flex: 1; + -o-object-fit: cover; + object-fit: cover; } @@ -723,6 +847,7 @@ article .wp-block-cover .wp-block-cover__inner-container { article table { max-width: 100%; + word-break: break-word; } @@ -740,7 +865,9 @@ article table > thead > tr > td, article table > thead > tr > th { padding: 1rem; + vertical-align: top; + border: 1px solid var(--color-border-on-foreground-deeper); } @@ -778,6 +905,7 @@ article hr, article .wp-block-separator { border-top: 0.0625rem solid var(--color-border-on-foreground-deeper); + border-bottom: none; } @@ -785,7 +913,9 @@ article .wp-block-separator { ::-webkit-scrollbar { width: 10px; + height: 8px; + background-color: rgba(0, 0, 0, 0); } @@ -799,8 +929,11 @@ article .wp-block-separator { ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.25); + border-radius: 100px; + border: 2px solid transparent; + background-clip: content-box; } @@ -878,13 +1011,21 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h3:after { content: ""; + display: block; + position: absolute; + background: var(--themecolor); + opacity: 0.25; + pointer-events: none; + border-radius: 15px; + left: -2px; + bottom: 0px; } @@ -892,6 +1033,7 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h1:after { width: 45px; + height: 13px; } @@ -899,6 +1041,7 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h2:after { width: 40px; + height: 11px; } @@ -906,6 +1049,7 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h3:after { width: 30px; + height: 9px; } @@ -935,6 +1079,7 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h3[class*="text-align-center"]:after { left: 50%; + transform: translateX(-50%); } @@ -964,6 +1109,7 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h3[class*="text-align-right"]:after { left: unset; + right: -2px; } @@ -975,13 +1121,21 @@ html.use-big-shadow *.shadow-sm { .article-header-style-2 article h3:before { content: ""; + display: inline-block; + background: var(--themecolor); + opacity: 1; + pointer-events: none; + border-radius: 15px; + width: 6px; + vertical-align: middle; + margin-right: 15px; } @@ -989,6 +1143,7 @@ html.use-big-shadow *.shadow-sm { .article-header-style-2 article h1:before { height: 25px; + transform: translateY(-1px); } @@ -996,6 +1151,7 @@ html.use-big-shadow *.shadow-sm { .article-header-style-2 article h2:before { height: 20px; + transform: translateY(-2px); } @@ -1003,6 +1159,7 @@ html.use-big-shadow *.shadow-sm { .article-header-style-2 article h3:before { height: 16px; + transform: translateY(-1px); } @@ -1070,24 +1227,19 @@ a.text-primary:hover { border-color: var(--themecolor) !important; background-color: var(--themecolor) !important; color: #fff !important; - border-radius: var(--card-radius-sm); - box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.25); - transition: all var(--animation-fast) var(--ease-standard); } .btn-primary:hover { border-color: var(--themecolor-dark) !important; background-color: var(--themecolor-dark) !important; color: #fff !important; - box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.35); - transform: translateY(-1px); } .btn-primary.focus, .btn-primary:focus { border-color: var(--themecolor) !important; background-color: var(--themecolor) !important; - box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08), 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.2) !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; } @@ -1097,42 +1249,35 @@ a.text-primary:hover { border-color: var(--themecolor-dark2) !important; background-color: var(--themecolor-dark2) !important; color: #fff !important; - transform: scale(0.98); } .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.2) !important; + box-shadow: 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.5) !important; } .btn-outline-primary { border-color: var(--themecolor) !important; color: var(--themecolor) !important; background-color: transparent !important; - border-radius: var(--card-radius-sm); - border-width: 1.5px; - transition: all var(--animation-fast) var(--ease-standard); } .btn-outline-primary:hover { border-color: var(--themecolor) !important; background-color: var(--themecolor) !important; color: #fff !important; - box-shadow: 0 4px 12px rgba(var(--themecolor-rgbstr), 0.25); - transform: translateY(-1px); } .btn-outline-primary.focus, .btn-outline-primary:focus { - box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.15) !important; + box-shadow: 0 0 0 0 rgba(var(--themecolor-rgbstr), 0.5) !important; } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--themecolor) !important; background-color: transparent !important; - opacity: 0.5; } .btn-outline-primary:not(:disabled):not(.disabled).active, @@ -1141,14 +1286,12 @@ a.text-primary:hover { border-color: var(--themecolor) !important; background-color: var(--themecolor) !important; color: #fff !important; - transform: scale(0.98); } .btn-primary:active, .btn-outline-primary:active { border-color: var(--themecolor-dark2) !important; background-color: var(--themecolor-dark2) !important; - transform: scale(0.98); } /* 链接按钮和中性按钮主题色覆盖 */ @@ -1177,6 +1320,7 @@ a.text-primary:hover { .custom-control-input:not(:disabled):active ~ .custom-control-label::before { border-color: var(--themecolor) !important; + background-color: var(--themecolor); } @@ -1186,8 +1330,11 @@ a.text-primary:hover { #content { padding: 0 5px; + max-width: 1200px; + margin: auto; + margin-top: -30vh; } @@ -1229,6 +1376,7 @@ html.is-home.banner-as-cover #content { #primary { width: calc(100% - 280px); + float: right; } @@ -1236,9 +1384,13 @@ html.is-home.banner-as-cover #content { #leftbar { padding-left: 20px; + padding-right: 20px; + width: 280px; + float: left; + margin-bottom: 25px; } @@ -1246,7 +1398,9 @@ html.is-home.banner-as-cover #content { #main { padding: 0 20px; + overflow: visible; + position: relative; } @@ -1316,8 +1470,11 @@ html.single-column #leftbar { html.single-column #primary { width: 100%; + float: none; + max-width: 1200px; + margin: auto; } @@ -1344,8 +1501,11 @@ html.single-column #main { html.single-column .page-information-card { width: 100%; + max-width: 1200px; + margin-left: auto; + margin-right: auto; } @@ -1362,9 +1522,13 @@ html.single-column .page-information-card { #rightbar { padding-left: 0; + padding-right: 0; + width: 280px; + float: right; + margin-bottom: 25px; } @@ -1372,8 +1536,11 @@ html.single-column .page-information-card { #rightbar > .card { margin-left: 10px; + margin-right: 20px; + margin-bottom: 15px; + padding: 20px 25px; } @@ -1381,6 +1548,7 @@ html.single-column .page-information-card { #rightbar > .card ul { list-style: none; + padding-inline-start: 0; } @@ -1457,7 +1625,7 @@ html.triple-column #content { opacity: 0; - transform: scale(0.96) translateY(12px); + transform: scale(0.95) translateY(8px); } @@ -1480,9 +1648,8 @@ html.triple-column #content { .card { animation: card-show var(--animation-normal) var(--ease-emphasized-decelerate); + transform-origin: center top; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); - transition: box-shadow var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard); } @@ -1492,12 +1659,6 @@ html.triple-column #content { } -html.darkmode .card { - - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4); - -} - /*顶栏和 Banner 部分*/ #navbar-main { @@ -1571,6 +1732,7 @@ html.darkmode #navbar-main { .navbar-brand { text-transform: none; + vertical-align: middle; } @@ -1592,9 +1754,13 @@ html.darkmode #navbar-main { #navbar-main { transition: background 0s, padding 0.15s ease; + background-color: var(--toolbar-color) !important; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + transition: all var(--animation-normal) var(--ease-standard); } @@ -1602,6 +1768,7 @@ html.darkmode #navbar-main { #navbar-main.navbar-ontop { padding-top: 1rem; + padding-bottom: 1rem; } @@ -1623,8 +1790,11 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container .input-group { box-shadow: none; + border-radius: 20px; + overflow: hidden; + transition: all var(--animation-normal) var(--ease-standard); } @@ -1644,7 +1814,9 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container.open .input-group { background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); } @@ -1654,6 +1826,7 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container.open .input-group:focus-within { background: rgba(255, 255, 255, 0.95); + backdrop-filter: none; } @@ -1661,6 +1834,7 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container:not(.open) .input-group-text { background: transparent; + color: #fff; } @@ -1668,7 +1842,9 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container.open .input-group-text { background: transparent; + color: #fff; + transition: color var(--animation-normal) var(--ease-standard); } @@ -1690,7 +1866,9 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container:not(.open) input.form-control { width: 0 !important; + padding: 0 !important; + background: transparent; } @@ -1698,7 +1876,9 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container.open input.form-control { background: transparent; + color: #fff; + transition: color var(--animation-normal) var(--ease-standard); } @@ -1706,6 +1886,7 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container.open input.form-control::placeholder { color: rgba(255, 255, 255, 0.7); + transition: color var(--animation-normal) var(--ease-standard); } @@ -1741,6 +1922,7 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container input.form-control { width: 200px; + transition: all 0.5s cubic-bezier(0.4, 0, 0, 1); } @@ -1766,6 +1948,7 @@ html.navbar-absolute #navbar-main { html.navbar-absolute:not(.no-banner) #navbar-main { background-color: transparent; + box-shadow: none; } @@ -1779,6 +1962,7 @@ html.no-banner #navbar-main { html.no-banner.toolbar-blur #navbar-main { background-color: rgba(var(--themecolor-rgbstr), 0.6) !important; + backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); @@ -1787,6 +1971,7 @@ html.no-banner.toolbar-blur #navbar-main { html.no-banner.toolbar-blur #navbar-main.navbar-no-blur { background-color: rgba(var(--themecolor-rgbstr), 0.85) !important; + backdrop-filter: blur(0px); } @@ -1794,10 +1979,15 @@ html.no-banner.toolbar-blur #navbar-main.navbar-no-blur { .banner { margin-bottom: 25px; + height: 71.8vh; + overflow: hidden; + background-position: center; + background-repeat: no-repeat; + background-size: cover; } @@ -1811,11 +2001,17 @@ html.no-banner.toolbar-blur #navbar-main.navbar-no-blur { .banner-title { font-size: 1.8em; + vertical-align: middle; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 100%; + left: 0; } @@ -1823,7 +2019,9 @@ html.no-banner.toolbar-blur #navbar-main.navbar-no-blur { .banner-subtitle { margin-top: 10px; + font-size: 16px; + opacity: 0.9; } @@ -1833,13 +2031,21 @@ html.no-banner.toolbar-blur #navbar-main.navbar-no-blur { .banner-subtitle.typing-effect:after { content: ""; + width: 0px; + height: 30px; + display: inline-block; + transform: translateX(5px) translateY(5px); + animation: cursor-flash-effect 1s; + animation-fill-mode: forwards; + outline: 1px solid #fff; + animation-iteration-count: var(--animation-cnt); } @@ -1847,8 +2053,11 @@ html.no-banner.toolbar-blur #navbar-main.navbar-no-blur { .banner-subtitle.typing-effect:after { height: 16px; + transform: translateX(5px) translateY(2px); + outline: 0.5px solid #fff; + opacity: 0.9; } @@ -1908,7 +2117,9 @@ html.banner-mini .banner > .banner-container { html.banner-mini .banner > .banner-container > .banner-title { position: unset; + top: unset; + transform: unset; } @@ -1928,14 +2139,23 @@ html.is-home.banner-as-cover.banner-as-cover .banner-container { .cover-scroll-down { display: block; + width: max-content; + color: #fff; + position: absolute; + left: 50%; + bottom: 10px; + transform: translateX(-50%); + cursor: pointer; + font-size: 36px; + transition: opacity 0.3s ease; } @@ -1943,6 +2163,7 @@ html.is-home.banner-as-cover.banner-as-cover .banner-container { html:not(.is-home) .cover-scroll-down { opacity: 0; + pointer-events: none; } @@ -1950,6 +2171,7 @@ html:not(.is-home) .cover-scroll-down { .cover-scroll-down.hidden { opacity: 0; + pointer-events: none; } @@ -1963,7 +2185,9 @@ html:not(.is-home) .cover-scroll-down { /*background: linear-gradient(150deg,#7795f8 15%,#6772e5 70%,#555abf 94%);*/ background: var(--themecolor-gradient); + text-align: center; + border-radius: var(--card-radius) var(--card-radius) 0 0; } @@ -1971,6 +2195,7 @@ html:not(.is-home) .cover-scroll-down { .leftbar-banner-title { font-size: 20px; + display: block; } @@ -1978,9 +2203,13 @@ html:not(.is-home) .cover-scroll-down { .leftbar-banner-subtitle { margin-top: 15px; + margin-bottom: 8px; + font-size: 13px; + opacity: 0.8; + display: block; } @@ -1990,8 +2219,11 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu { margin-top: 10px; + margin-left: 0; + margin-right: 0; + padding: 0; } @@ -1999,9 +2231,13 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu-item { height: 36px; + line-height: 36px; + list-style: none; + padding: 0; + position: relative; } @@ -2009,7 +2245,9 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu-item:hover > .leftbar-menu-subitem { opacity: 1; + transform: none; + pointer-events: unset; } @@ -2017,18 +2255,31 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu-subitem { position: absolute; + left: calc(100% + 8px); + top: 0; + background: var(--color-foreground); + width: max-content; + min-width: 150px; + z-index: 1; + height: unset; + border-radius: 3px; + padding: 6px 0; + opacity: 0; + transform: translateX(-8px); + pointer-events: none; + transition: all 0.3s ease; } @@ -2036,11 +2287,17 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu-subitem:before { content: ""; + width: 8px; + height: calc(100% + 12px); + display: block; + position: absolute; + top: 0; + left: -8px; } @@ -2054,6 +2311,7 @@ html:not(.is-home) .cover-scroll-down { #leftbar_part1_menu > .leftbar-menu-item > .leftbar-menu-subitem:before { width: 12px; + left: -12px; } @@ -2073,18 +2331,31 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu-item > a { display: block; + height: 100%; + width: 100%; + margin: 0; + padding: 0 20px; + overflow-wrap: break-word; + word-wrap: break-word; + background-color: transparent; + color: #32325d !important; + text-decoration: none; + outline: none; + cursor: pointer; + font-size: 14px; + transition: background var(--animation-fast) var(--ease-standard); } @@ -2100,7 +2371,9 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu-item > a > i { margin-right: 8px; + width: 15px; + text-align: center; } @@ -2108,18 +2381,31 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu-item.leftbar-menu-item-haschildren:after { content: "\f0da"; + font: normal normal normal 14px/1 FontAwesome; + font-size: 14px; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: absolute; + right: 16px; + top: 0; + line-height: 36px; + opacity: 0.6; + transform: translateY(1px); + transition: all 0.3s ease; + pointer-events: none; } @@ -2129,6 +2415,7 @@ html:not(.is-home) .cover-scroll-down { .leftbar-search-button { padding-top: 0; + transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); } @@ -2136,6 +2423,7 @@ html:not(.is-home) .cover-scroll-down { .leftbar-search-button.open { padding: 0 15px 18px 15px; + margin-top: -9px; } @@ -2145,10 +2433,15 @@ html:not(.is-home) .cover-scroll-down { transition: width var(--animation-normal) var(--ease-emphasized), height var(--animation-normal) var(--ease-emphasized), box-shadow var(--animation-fast) var(--ease-standard), transform var(--animation-fast) var(--ease-standard); + height: 30px; + transform: unset !important; + text-transform: capitalize; + background-color: var(--color-border-on-foreground-deeper); + color: var(--color-text-deeper); } @@ -2174,13 +2467,21 @@ html.darkmode.amoled-dark #leftbar_search_container { #leftbar_search_input { position: absolute; + left: -1px; + top: -1px; + width: calc(100% + 2px); + height: calc(100% + 2px); + transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); + opacity: 0; + cursor: pointer; + user-select: none; } @@ -2188,8 +2489,11 @@ html.darkmode.amoled-dark #leftbar_search_container { .leftbar-search-button.open #leftbar_search_input { opacity: 1; + cursor: text; + user-select: all; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } @@ -2199,6 +2503,7 @@ html.darkmode.amoled-dark #leftbar_search_container { #leftbar_part2 { margin-top: 10px; + transition: all var(--animation-normal) var(--ease-standard); } @@ -2206,7 +2511,9 @@ html.darkmode.amoled-dark #leftbar_search_container { #leftbar_part2.sticky { position: fixed; + width: 240px; + top: 80px; } @@ -2244,6 +2551,7 @@ html.navbar-absolute #leftbar_part2.sticky { #leftbar_part2_inner::-webkit-scrollbar-thumb { border-width: 1px; + background-color: rgba(0, 0, 0, 0.2); } @@ -2251,6 +2559,7 @@ html.navbar-absolute #leftbar_part2.sticky { html.darkmode #leftbar_part2_inner::-webkit-scrollbar-thumb { border-width: 1px; + background-color: rgba(255, 255, 255, 0.2); } @@ -2258,6 +2567,7 @@ html.darkmode #leftbar_part2_inner::-webkit-scrollbar-thumb { #leftbar_part2_inner::-webkit-scrollbar-button { height: 5px; + pointer-events: none; } @@ -2265,6 +2575,7 @@ html.darkmode #leftbar_part2_inner::-webkit-scrollbar-thumb { .sidebar-tab-switcher { font-size: 13px; + padding: 0 !important; } @@ -2272,7 +2583,9 @@ html.darkmode #leftbar_part2_inner::-webkit-scrollbar-thumb { .sidebar-tab-switcher > a { padding-bottom: 5px; + border-bottom: 1px solid transparent; + transition: border-bottom var(--animation-fast) var(--ease-standard); } @@ -2294,11 +2607,17 @@ html.darkmode .sidebar-tab-switcher > a.active { #leftbar_overview_author_image { width: 100px; + height: 100px; + margin: auto; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-color: rgba(127, 127, 127, 0.1); } @@ -2306,6 +2625,7 @@ html.darkmode .sidebar-tab-switcher > a.active { #leftbar_overview_author_name { margin-top: 15px; + font-size: 18px; } @@ -2313,7 +2633,9 @@ html.darkmode .sidebar-tab-switcher > a.active { #leftbar_overview_author_description { font-size: 14px; + margin-top: -4px; + opacity: 0.8; } @@ -2321,9 +2643,13 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-state { overflow: hidden; + line-height: 1.4; + white-space: nowrap; + text-align: center; + margin-top: 15px; } @@ -2331,7 +2657,9 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-state-item { display: inline-block; + border-left: 1px solid var(--color-border-on-foreground-deeper); + padding: 0 10px; } @@ -2351,9 +2679,13 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-state-item-count { display: block; + text-align: center; + color: #32325d; + font-weight: bold; + font-size: 16px; } @@ -2361,19 +2693,27 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-state-item-name { font-size: 13px; - color: #3d4a6b; + + color: #525f82; } .tag.badge { font-size: 14px; + text-transform: none; + transition: background var(--animation-fast) var(--ease-standard); + background: var(--color-border-on-foreground); + border: 1px solid var(--color-border-on-foreground-deeper); + padding: 5px 10px; + margin-right: 12px; + margin-bottom: 15px; } @@ -2387,6 +2727,7 @@ html.darkmode .sidebar-tab-switcher > a.active { .tag-num { font-size: 12px; + opacity: 0.7; } @@ -2394,8 +2735,11 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-author-links { display: flex; + flex-wrap: wrap; + justify-content: left; + margin-top: 15px; } @@ -2403,10 +2747,15 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-author-links-item { display: inline-block; + width: 50%; + border-radius: 4px; + margin-top: 5px; + transition: background var(--animation-fast) var(--ease-standard); + background: transparent; } @@ -2420,13 +2769,21 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-author-links-item > a { display: block; + width: 100%; + padding: 2px 8px; + font-size: 15px; + color: #32325d !important; + text-align: left; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } @@ -2434,7 +2791,9 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-friend-links-title { margin-top: 25px; + border-top: 1px dotted var(--color-border-on-foreground-deeper); + padding-top: 15px; } @@ -2442,6 +2801,7 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-friend-links-ul { margin-top: 8px; + padding: 3px 0 0; } @@ -2449,8 +2809,11 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-friend-links-item { margin: 0; + padding: 0; + list-style: none; + margin-bottom: 3px; } @@ -2458,13 +2821,21 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-friend-links-item > a { max-width: 280px; + box-sizing: border-box; + display: inline-block; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #32325d; + border-bottom: 1px solid #999; } @@ -2472,6 +2843,7 @@ html.darkmode .sidebar-tab-switcher > a.active { #leftbar_announcement { margin-bottom: 10px; + background: var(--themecolor-gradient); } @@ -2485,6 +2857,7 @@ html.darkmode #leftbar_announcement { .leftbar-announcement-body { padding: 15px 1.2em; + padding-bottom: 22px; } @@ -2498,8 +2871,11 @@ html.darkmode #leftbar_announcement { .leftbar-announcement-content { font-size: 15px; + line-height: 1.8; + padding-top: 8px; + opacity: 0.9; } @@ -2509,6 +2885,7 @@ html.darkmode #leftbar_announcement { #leftbar_tab_tools ol { list-style: none; + padding: 0; } @@ -2516,7 +2893,9 @@ html.darkmode #leftbar_announcement { #leftbar_tab_tools ul li { padding-top: 10px; + padding-bottom: 10px; + border-bottom: var(--color-border-on-foreground) solid 1px; } @@ -2532,9 +2911,13 @@ html.darkmode #leftbar_announcement { #leftbar_tab_tools .wp-block-group__inner-container > h6:first-child { font-size: 17px; + font-weight: 600; + position: relative; + display: block; + width: max-content; } @@ -2544,15 +2927,25 @@ html.darkmode #leftbar_announcement { #leftbar_tab_tools .wp-block-group__inner-container > h6:first-child:after { content: ""; + display: block; + background: var(--themecolor); + width: 30px; + height: 9px; + position: absolute; + left: 0; + bottom: -1px; + border-radius: 10px; + opacity: 0.25; + pointer-events: none; } @@ -2560,7 +2953,9 @@ html.darkmode #leftbar_announcement { .wp-calendar-table caption { font-size: 14px; + text-align: center; + opacity: 0.7; } @@ -2568,8 +2963,11 @@ html.darkmode #leftbar_announcement { .wp-block-calendar table * { background: transparent !important; + border: none !important; + padding-top: 5px; + padding-bottom: 8px; } @@ -2583,6 +2981,7 @@ html.darkmode #leftbar_announcement { .wp-block-calendar tbody td a { position: relative; + text-decoration: none; } @@ -2590,14 +2989,23 @@ html.darkmode #leftbar_announcement { .wp-block-calendar tbody td a:before { content: ""; + display: block; + background: var(--themecolor); + position: absolute; + width: 25px; + height: 25px; + border-radius: 20px; + opacity: 0.2; + transform: translateX(-2px); + z-index: 0; } @@ -2607,12 +3015,19 @@ html.darkmode #leftbar_announcement { .wp-calendar-nav-next a { text-decoration: none !important; + border: 1px solid var(--themecolor); + color: var(--themecolor); + padding: 1px 8px; + border-radius: 19px; + font-size: 14px; + transition: all var(--animation-normal) var(--ease-standard); + user-select: none; } @@ -2622,7 +3037,9 @@ html.darkmode #leftbar_announcement { .wp-calendar-nav-next a:hover { background-color: var(--themecolor); + color: #fff !important; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } @@ -2630,11 +3047,17 @@ html.darkmode #leftbar_announcement { .wp-calendar-nav { padding-bottom: 12px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + align-content: center; } @@ -2652,17 +3075,29 @@ html.darkmode .wp-block-calendar tbody td { #footer { background: var(--themecolor-gradient); + color: #fff; + width: 100%; + float: right; + margin-bottom: 25px; + text-align: center; + padding: 3px 20px 20px; + line-height: 1.8; + transition: none; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } @@ -2684,7 +3119,7 @@ html.darkmode .wp-block-calendar tbody td { position: fixed; bottom: 35px; right: 20px; - z-index: 10002; + z-index: 1000; display: flex; flex-direction: column; align-items: center; @@ -2696,7 +3131,6 @@ html.darkmode .wp-block-calendar tbody td { #float_action_buttons.fabtns-float-left { left: 20px; right: auto; - align-items: center; } #float_action_buttons.fabtns-float-left .fabtn-show-on-right { @@ -2721,161 +3155,152 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { } /* 基础按钮样式 - 重置所有 Bootstrap 样式 */ -.fabtn { - width: 42px; - height: 42px; - padding: 0; +#float_action_buttons .fabtn, +#float_action_buttons .fabtn.btn, +#float_action_buttons .fabtn.btn-icon, +#float_action_buttons .fabtn.btn-neutral, +#float_action_buttons button.fabtn { + width: 44px !important; + height: 44px !important; + min-width: 44px !important; + min-height: 44px !important; + max-width: 44px !important; + max-height: 44px !important; + padding: 0 !important; + margin: 5px 0 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + position: relative; overflow: visible; - display: block; - margin-top: 8px; border: none !important; - transition: all var(--animation-normal) var(--ease-standard); + border-radius: var(--card-radius) !important; background-color: var(--color-foreground) !important; color: var(--themecolor) !important; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.08), + 0 4px 16px rgba(0, 0, 0, 0.04); + cursor: pointer; + transition: + background-color var(--animation-fast) var(--ease-standard), + color var(--animation-fast) var(--ease-standard), + transform var(--animation-normal) var(--ease-spring), + box-shadow var(--animation-normal) var(--ease-standard), + opacity var(--animation-fast) var(--ease-standard); } -.fabtn:hover { +#float_action_buttons .fabtn:first-child { + margin-top: 0 !important; +} + +#float_action_buttons .fabtn:hover { color: #fff !important; background-color: var(--themecolor) !important; + transform: translateY(-3px) scale(1.05); + box-shadow: + 0 6px 20px rgba(var(--themecolor-rgbstr), 0.35), + 0 12px 28px rgba(var(--themecolor-rgbstr), 0.2) !important; } -.fabtn:active { +#float_action_buttons .fabtn:active { color: #fff !important; background-color: var(--themecolor-dark) !important; + transform: translateY(-1px) scale(0.98); + box-shadow: + 0 2px 8px rgba(var(--themecolor-rgbstr), 0.25) !important; } -.fabtn.fabtn-hidden { +/* 按钮内图标居中 */ +#float_action_buttons .fabtn .btn-inner--icon { + display: flex !important; + align-items: center !important; + justify-content: center !important; + width: 100%; + height: 100%; +} + +#float_action_buttons .fabtn i { + font-size: 16px; + line-height: 1; +} + +/* 隐藏状态 */ +#float_action_buttons .fabtn.fabtn-hidden { + width: 0 !important; height: 0 !important; - opacity: 0; - margin-top: 0; - box-shadow: none; - pointer-events: none; + min-width: 0 !important; + min-height: 0 !important; + max-width: 0 !important; + max-height: 0 !important; + opacity: 0 !important; + margin: 0 !important; + padding: 0 !important; + box-shadow: none !important; + pointer-events: none !important; + transform: scale(0) !important; + overflow: hidden !important; } -#fabtn_toggle_sides { - height: 30px !important; - transform: translateY(8px); - opacity: 0; +/* 左右切换按钮 - 尺寸较小 */ +#float_action_buttons #fabtn_toggle_sides, +#float_action_buttons #fabtn_toggle_sides.btn { + width: 32px !important; + height: 32px !important; + min-width: 32px !important; + min-height: 32px !important; + max-width: 32px !important; + max-height: 32px !important; + border-radius: var(--card-radius) !important; + opacity: 0.6; + font-size: 11px; } -#float_action_buttons:hover #fabtn_toggle_sides { - height: 30px !important; - transform: translateY(0px); +#float_action_buttons #fabtn_toggle_sides:hover { opacity: 1; } -#fabtn_reading_progress { - height: 30px; +/* 阅读进度按钮 */ +#float_action_buttons #fabtn_reading_progress { + overflow: visible; + font-size: 11px; + font-weight: 600; } #float_action_buttons #fabtn_reading_progress_bar { position: absolute; left: 0; top: 0; + width: 0; height: 100%; - border-radius: 4px; + border-radius: var(--card-radius); background: var(--themecolor); - opacity: 0.08; + opacity: 0.12; + transition: width var(--animation-fast) var(--ease-standard); + pointer-events: none; } -#fabtn_toggle_darkmode i.fa { +#float_action_buttons #fabtn_reading_progress_details { + position: relative; + z-index: 1; +} + +/* 夜间模式按钮图标切换 */ +#float_action_buttons #fabtn_toggle_darkmode i.fa { margin: 0; } -#fabtn_toggle_darkmode i.fa-lightbulb-o { +#float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { display: none; } -html.darkmode #fabtn_toggle_darkmode i.fa-moon-o { +html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-moon-o { display: none; } -html.darkmode #fabtn_toggle_darkmode i.fa-lightbulb-o { +html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { display: inline-block; } -/* ---------- Tooltip 提示文字 ---------- */ -#float_action_buttons .fabtn:before { - pointer-events: none; - position: absolute; - top: 50%; - right: 52px; - transform: translateY(-50%) translateX(5px); - line-height: 22px; - font-weight: normal; - color: #fff; - background: #32325d; - padding: 3px 10px; - font-size: 12px; - border-radius: 3px; - transition: all 0.3s ease; - opacity: 0; - width: max-content; - width: -moz-max-content; - text-transform: none; - white-space: nowrap; -} - -#float_action_buttons .fabtn.fabtn-hidden:before { - opacity: 0 !important; -} - -#float_action_buttons.fabtns-float-left .fabtn:before { - left: 52px; - right: unset; - transform: translateY(-50%) translateX(-5px); -} - -#float_action_buttons .fabtn:hover:before { - transform: translateY(-50%) translateX(0px); - opacity: 0.7; -} - -#float_action_buttons.fabtns-float-left .fabtn:hover:before { - transform: translateY(-50%) translateX(0px); -} - -/* Tooltip 内容 */ -#float_action_buttons #fabtn_toggle_sides:before { - content: attr(tooltip-move-to-left); -} - -#float_action_buttons.fabtns-float-left #fabtn_toggle_sides:before { - content: attr(tooltip-move-to-right); -} - -#float_action_buttons #fabtn_back_to_top:before { - content: attr(tooltip); -} - -#float_action_buttons #fabtn_reading_progress:before { - content: attr(tooltip); -} - -#float_action_buttons #fabtn_open_sidebar:before { - content: attr(tooltip); -} - -#float_action_buttons #fabtn_go_to_comment:before { - content: attr(tooltip); -} - -#float_action_buttons #fabtn_toggle_darkmode:before { - content: attr(tooltip-darkmode); -} - -html.amoled-dark #float_action_buttons #fabtn_toggle_darkmode:before { - content: attr(tooltip-blackmode); -} - -html.darkmode #float_action_buttons #fabtn_toggle_darkmode:before { - content: attr(tooltip-lightmode); -} - -#float_action_buttons #fabtn_toggle_blog_settings_popup:before { - content: attr(tooltip); -} - /* 侧边栏打开按钮（移动端） */ #float_action_buttons #fabtn_open_sidebar { display: none; @@ -2913,7 +3338,6 @@ html.darkmode #float_action_buttons #fabtn_toggle_darkmode:before { backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); overflow-y: auto; - z-index: 10003; } #float_action_buttons.fabtns-float-left #fabtn_blog_settings_popup { @@ -3015,21 +3439,37 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode span:first-of-t #blog_setting_toggle_darkmode_and_amoledarkmode:before { content: attr(tooltip-switch-to-blackmode); + position: absolute; + top: -32px; + left: 50%; + line-height: 22px; + font-weight: normal; + color: #fff; + background: #32325d; + padding: 3px 10px; + font-size: 12px; + border-radius: 3px; + transition: all 0.3s ease; + transform: translateX(-50%) translateY(5px); + opacity: 0; + width: max-content; + width: -moz-max-content; + pointer-events: none; } @@ -3043,6 +3483,7 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { #blog_setting_toggle_darkmode_and_amoledarkmode:hover:before { transform: translateX(-50%); + opacity: 0.7; } @@ -3052,6 +3493,7 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { .blog-setting-shadow { text-transform: none; + padding: 3px 10px; } @@ -3070,8 +3512,11 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { .blog-setting-selector-left { margin-right: 0 !important; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + transform: none !important; border-radius: 8px 0 0 8px; @@ -3089,9 +3534,13 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { .blog-setting-selector-right { border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: 0 !important; + transform: none !important; + border-left: 0; border-radius: 0 8px 8px 0; @@ -3109,6 +3558,7 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { 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); @@ -3118,6 +3568,7 @@ html:not(.use-serif) #blog_setting_font_sans_serif { html.use-serif #blog_setting_font_serif { color: #fff; + background: var(--themecolor); box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); @@ -3127,6 +3578,7 @@ html.use-serif #blog_setting_font_serif { 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); @@ -3136,6 +3588,7 @@ html:not(.use-big-shadow) #blog_setting_shadow_small { html.use-big-shadow #blog_setting_shadow_big { color: #fff; + background: var(--themecolor); box-shadow: 0 2px 6px rgba(var(--themecolor-rgbstr), 0.3); @@ -3145,15 +3598,23 @@ html.use-big-shadow #blog_setting_shadow_big { .blog-setting-filter-btn { border-radius: 12px; + outline: none !important; + border: 2px solid transparent; + height: 44px; + width: 44px; + margin-left: 6px; + cursor: pointer; + font-size: 12px; font-weight: 500; + transition: all var(--animation-fast) var(--ease-standard); } @@ -3169,6 +3630,7 @@ html.use-big-shadow #blog_setting_shadow_big { #blog_setting_filter_off { background: rgba(var(--themecolor-rgbstr), 0.05); + color: var(--themecolor); } @@ -3176,6 +3638,7 @@ html.use-big-shadow #blog_setting_shadow_big { #blog_setting_filter_sunset { background: rgba(255, 255, 200, 1); + color: #6e5a00; } @@ -3183,6 +3646,7 @@ html.use-big-shadow #blog_setting_shadow_big { #blog_setting_filter_darkness { background: rgba(80, 80, 80, 0.7); + color: #eee; } @@ -3190,6 +3654,7 @@ html.use-big-shadow #blog_setting_shadow_big { #blog_setting_filter_grayscale { background: rgba(200, 200, 200, 0.8); + color: #333; } @@ -3268,15 +3733,25 @@ html.filter-sunset { html.filter-darkness #primary:after { content: ""; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + height: 100vh; + width: 100vw; + background: rgba(0, 0, 0, 0.4); + z-index: 999999999; + pointer-events: none; } @@ -3296,21 +3771,37 @@ html.filter-grayscale { #blog_setting_card_radius_to_default:before { content: attr(tooltip); + position: absolute; + top: -30px; + left: 50%; + line-height: 15px; + font-weight: normal; + color: #fff; + background: #32325d; + padding: 3px 10px; + font-size: 12px; + border-radius: 3px; + transition: all 0.3s ease; + transform: translateX(-50%) translateY(5px); + opacity: 0; + width: max-content; + width: -moz-max-content; + pointer-events: none; } @@ -3318,6 +3809,7 @@ html.filter-grayscale { #blog_setting_card_radius_to_default:hover:before { transform: translateX(-50%); + opacity: 0.7; } @@ -3327,10 +3819,15 @@ html.filter-grayscale { .pagination { width: max-content; + width: -moz-max-content; + padding-top: 15px; + padding-bottom: 15px; + margin: auto; + margin-bottom: 25px; } @@ -3353,9 +3850,11 @@ html.filter-grayscale { .post { - margin-bottom: 16px; - padding: 24px 24px; - padding-bottom: 28px; + margin-bottom: 25px; + + padding: 30px 30px; + + padding-bottom: 35px; } @@ -3368,7 +3867,9 @@ html.filter-grayscale { .post-preview .loading-css-animation { padding-top: 20px; + padding-bottom: 10px; + width: 100%; } @@ -3382,6 +3883,7 @@ html.filter-grayscale { .post-list-pjax-loading .post-preview { opacity: 0; + pointer-events: none; } @@ -3389,7 +3891,9 @@ html.filter-grayscale { .post-title { font-size: 26px; + letter-spacing: 0.5px; + transition: all var(--animation-normal) var(--ease-standard); } @@ -3403,6 +3907,7 @@ html.filter-grayscale { #main.waterflow .post-title { transition: all var(--animation-normal) var(--ease-standard); + display: inline-block; } @@ -3410,28 +3915,33 @@ html.filter-grayscale { #main.waterflow .post-title:hover { letter-spacing: 0.5px; + transform: scale(1.02); + text-rendering: optimizeLegibility; } .post-header { - margin-bottom: 16px; + margin-bottom: 20px; } .post-meta { - margin-top: 6px; + margin-top: 10px; } .post-meta-detail { font-size: 14.5px; + line-height: 24px; + opacity: 0.8; + display: inline-block; } @@ -3445,11 +3955,17 @@ html.filter-grayscale { .post-meta-devide { display: inline-block; + font-size: 14.5px; + line-height: 24px; + margin-left: 3px; + margin-right: 3px; + opacity: 0.5; + user-select: none; } @@ -3457,15 +3973,19 @@ html.filter-grayscale { .post-meta-detail-categories-space { margin-left: 2px; + margin-right: 2px; } .post-header.post-header-with-thumbnail { - margin: -24px -24px 28px -24px; + margin: -30px -30px 35px -30px; + border-radius: var(--card-radius) var(--card-radius) 0 0; + overflow: hidden; + position: relative; } @@ -3473,9 +3993,13 @@ html.filter-grayscale { .post-thumbnail { width: 100%; + min-height: 250px; + max-height: 25vh; + object-fit: cover; + pointer-events: none; } @@ -3490,6 +4014,7 @@ html.filter-grayscale { .page .post-thumbnail { max-height: 30vh; + min-height: 250px; } @@ -3497,14 +4022,23 @@ html.filter-grayscale { .post-header.post-header-with-thumbnail .post-header-text-container { position: absolute; + bottom: 0; + left: 0; + width: 100%; + color: #fff; + opacity: 0.9; - padding-bottom: 28px; - padding-top: 28px; + + padding-bottom: 35px; + + padding-top: 35px; + background: rgba(0, 0, 0, 0.05); + background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0)); } @@ -3528,10 +4062,15 @@ html.filter-grayscale { .post-outdated-info { color: var(--themecolor); + border-left: 2px solid var(--themecolor); + padding: 5px 20px; + margin-top: 10px; - margin-bottom: 20px; + + margin-bottom: 25px; + background: rgba(var(--themecolor-rgbstr), 0.1); } @@ -3539,7 +4078,9 @@ html.filter-grayscale { .post-outdated-info > i { font-size: 20px; + margin-right: 15px; + transform: translateY(2px); } @@ -3552,8 +4093,9 @@ html.filter-grayscale { .post-content { - line-height: 1.7; - margin-bottom: 8px; + line-height: 1.8; + + margin-bottom: 10px; } @@ -3565,7 +4107,8 @@ html.filter-grayscale { .post-tags { - margin-top: 12px; + margin-top: 15px; + margin-bottom: -4px; } @@ -3579,7 +4122,9 @@ html.filter-grayscale { .tag.post-meta-detail-tag { margin-bottom: 4px; + margin-right: 7px; + font-size: 12px; } @@ -3595,9 +4140,13 @@ html.filter-grayscale { article.post-preview-layout-2 { display: flex; + flex-direction: row; + padding: 0; + min-height: 200px; + overflow: visible; } @@ -3605,11 +4154,17 @@ article.post-preview-layout-2 { article.post-preview-layout-2 .post-header.post-header-with-thumbnail { margin: 0; + border-radius: var(--card-radius) 0 0 var(--card-radius); + text-align: left; + width: 300px; + height: 200px; + flex-shrink: 0; + overflow: hidden; } @@ -3617,20 +4172,29 @@ article.post-preview-layout-2 .post-header.post-header-with-thumbnail { article.post-preview-layout-2 .post-thumbnail { width: 100%; + height: 200px !important; + max-height: 200px !important; + object-fit: cover; + object-position: center center; } article.post-preview-layout-2 .post-content-container { - padding: 18px 24px; + padding: 20px 28px; + flex: 1; + display: flex; + flex-direction: column; + max-width: 100%; + overflow: hidden; } @@ -3638,10 +4202,15 @@ article.post-preview-layout-2 .post-content-container { article.post-preview-layout-2 .post-content { flex: 1; - margin-top: 6px; + + margin-top: 10px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; } @@ -3655,6 +4224,7 @@ article.post-preview-layout-2 .post-title { article.post-preview-layout-2 .loading-css-animation { position: absolute; + bottom: -8px; } @@ -3663,13 +4233,13 @@ article.post-preview-layout-2 .loading-css-animation { article.post-preview-layout-3 .post-header { - margin-bottom: 8px; + margin-bottom: 10px; } article.post-preview-layout-3 .post-header.post-header-with-thumbnail { - margin-bottom: 20px; + margin-bottom: 25px; } @@ -3684,7 +4254,9 @@ article.post-preview-layout-3 .post-thumbnail { sup.reference { white-space: nowrap; + transition: box-shadow 0.3s ease; + border-radius: 1px; } @@ -3692,6 +4264,7 @@ sup.reference { sup.reference:focus { box-shadow: 0 0 0 2px var(--color-widgets), 0 0 0 4px rgba(var(--themecolor-rgbstr), 0.3); + outline: none; } @@ -3699,6 +4272,7 @@ sup.reference:focus { .tippy-box[data-theme~="scroll-y"] .tippy-content { max-height: 200px; + overflow-y: auto; } @@ -3750,6 +4324,7 @@ sup.reference:focus { html.darkmode .tippy-box[data-theme~="light"] { color: #eee; + background-color: var(--color-widgets); } @@ -3757,8 +4332,11 @@ html.darkmode .tippy-box[data-theme~="light"] { .reference-list { padding-left: 0; + list-style: inside none; + counter-reset: ol; + margin-bottom: 0; } @@ -3766,7 +4344,9 @@ html.darkmode .tippy-box[data-theme~="light"] { .reference-list li { font-size: 14px; + position: relative; + display: flex; } @@ -3780,15 +4360,25 @@ html.darkmode .tippy-box[data-theme~="light"] { .reference-list li .space:before { content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: block; + border-radius: 3px; + transition: background 0.3s ease; + pointer-events: none; + background: transparent; } @@ -3802,8 +4392,11 @@ html.darkmode .tippy-box[data-theme~="light"] { .reference-list li:before { text-align: right; + counter-increment: ol; + content: counter(ol) ". "; + white-space: pre; } @@ -3831,6 +4424,7 @@ html.darkmode .tippy-box[data-theme~="light"] { .post-password-form { margin-top: 45px; + margin-bottom: 55px; } @@ -3838,6 +4432,7 @@ html.darkmode .tippy-box[data-theme~="light"] { .post-password-form-text { margin: auto; + margin-bottom: 15px; } @@ -3845,6 +4440,7 @@ html.darkmode .tippy-box[data-theme~="light"] { .post-password-form-input { margin: auto; + margin-bottom: 20px; } @@ -3852,7 +4448,9 @@ html.darkmode .tippy-box[data-theme~="light"] { .post-password-hint { margin-top: 10px; + color: var(--themecolor); + opacity: 0.9; } @@ -3892,9 +4490,13 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { #leftbar_catalog .index-link { width: 100%; + display: block; + color: #32325d; + text-decoration: none; + box-sizing: border-box; } @@ -3902,11 +4504,17 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { #leftbar_catalog .index-link { font-size: 15px; + padding: 4px 8px 4px 8px; + cursor: pointer; + transition: background-color 0.3s ease, border-left-color 0.3s ease, color 0.3s ease; + border-left: 3px solid transparent; + word-break: break-all; + border-radius: 3px; } @@ -3914,6 +4522,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { #leftbar_catalog .index-item.current > .index-link { color: var(--themecolor); + font-weight: bold; } @@ -3937,7 +4546,9 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .page-information-card { margin: 30px 20px; + margin-top: 0px; + background: var(--color-foreground) !important; } @@ -3945,6 +4556,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .search-filter-wrapper { display: inline-block; + margin-right: 12px; } @@ -3961,10 +4573,14 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .post-navigation { - margin-bottom: 16px; - padding: 24px 20px; - padding-top: 20px; + margin-bottom: 25px; + + padding: 30px 25px; + + padding-top: 25px; + font-size: 18px; + display: block !important; } @@ -3972,7 +4588,9 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .post-navigation-item { width: calc(50%); + display: inline-block; + vertical-align: top; } @@ -3980,8 +4598,11 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .page-navigation-extra-text { font-size: 22px; + opacity: 0.85; + display: block; + margin-bottom: 15px; } @@ -4007,6 +4628,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .post-navigation-next { padding-left: 10px; + text-align: right; } @@ -4016,9 +4638,13 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-posts { display: block; + white-space: nowrap; + margin-bottom: 25px; + padding: 0; + padding-bottom: 0; } @@ -4026,16 +4652,27 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-card { display: inline-block; + height: 105px; + width: 180px; + border-radius: 5px; + margin-right: 10px; + font-size: 16px; + line-height: 27px; + white-space: normal; + transition: all 0.3s ease; + position: relative; + background: var(--themecolor-gradient); + overflow: hidden; } @@ -4043,7 +4680,9 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-card:hover { filter: brightness(0.9); + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + border-color: transparent; } @@ -4057,10 +4696,15 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-card-container { position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + padding: 10px 15px; } @@ -4068,7 +4712,9 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-card-container.has-thumbnail { background: rgba(0, 0, 0, 0.2); + color: #fff; + transition: all 0.3s ease; } @@ -4082,6 +4728,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-title { max-height: 81px; + overflow: hidden; } @@ -4089,9 +4736,13 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-arrow { position: absolute; + right: 15px; + bottom: 15px; + font-size: 15px; + pointer-events: none; } @@ -4099,7 +4750,9 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-thumbnail { width: 100%; + height: 100%; + object-fit: cover; } @@ -4119,7 +4772,9 @@ img.related-post-thumbnail { html.darkmode a.related-post-card { background: var(--color-border-on-foreground-deeper); + opacity: 0.7; + border-radius: 5px; } @@ -4141,6 +4796,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .post-donate { text-align: center; + position: relative; } @@ -4158,17 +4814,29 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .post-donate .donate-qrcode { width: max-content; + width: -moz-max-content; + position: absolute; + left: 50%; + bottom: 100px; + padding: 25px; + z-index: 2; + transition: all 0.3s ease; + transform: translate(-50%, 10px) scale(0.9); + transform-origin: bottom; + opacity: 0; + pointer-events: none; + background-color: var(--color-widgets) !important; } @@ -4176,6 +4844,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .post-donate .donate-btn:focus ~ .donate-qrcode { transform: translateX(-50%); + opacity: 1; } @@ -4183,7 +4852,9 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .post-donate .donate-btn { margin-right: 0; + margin-top: 20px; + margin-bottom: 30px; } @@ -4191,17 +4862,29 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .post-donate .donate-qrcode:before { position: absolute; + z-index: 3; + bottom: 0; + left: 50%; + display: block; + width: 16px; + height: 16px; + content: ""; + transform: translate(-50%, 8px) rotate(-45deg); + border-radius: 0.2rem; + background: var(--color-widgets); + z-index: 1; + box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.1); } @@ -4211,9 +4894,13 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .additional-content-after-post { border-left: 3px solid var(--themecolor); + padding: 15px 20px; + background: rgba(var(--themecolor-rgbstr), 0.1); + border-radius: 3px; + margin-top: 10px; } @@ -4222,7 +4909,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments { - margin-bottom: 16px; + margin-bottom: 25px; } @@ -4287,6 +4974,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments > .card-body { transition: opacity 0.5s ease; + overflow: visible; } @@ -4294,6 +4982,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments.comments-loading > .card-body { opacity: 0.5; + pointer-events: none; } @@ -4301,6 +4990,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments li { list-style: none; + position: relative; } @@ -4308,17 +4998,29 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments .comment-item:target:before, #comments .comment-item:before { content: ""; + display: block; + position: absolute; + left: -10px; + right: -10px; + top: 0; + bottom: 0; + background-color: var(--themecolor); + opacity: 0.15; + border-radius: var(--card-radius); + pointer-events: none; + animation: comment-focus-breath 2s linear; + animation-fill-mode: forwards; } @@ -4326,7 +5028,9 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments .comment-item:before{ animation: none; + opacity: 0; + transition: opacity 0.25s ease; } @@ -4386,7 +5090,9 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .comment-item { margin-bottom: 1px; + display: flex; + overflow: visible; } @@ -4774,8 +5480,11 @@ html.darkmode .comment-upvote:hover { .comment-item-text .comment-sticker { max-height: 60px; + transition: all 0.3s ease; + transition-delay: 0s; + transform: none; } @@ -4783,8 +5492,11 @@ html.darkmode .comment-upvote:hover { .comment-item-text .comment-sticker:active { transition-delay: 0.3s; + transform: scale(2); + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15); + background: var(--color-widgets); } @@ -4798,8 +5510,11 @@ html.darkmode .comment-upvote:hover { .comment-item-text .comment-image { color: var(--themecolor) !important; + cursor: pointer; + user-select: none; + position: relative; } @@ -4813,15 +5528,25 @@ html.darkmode .comment-upvote:hover { .comment-item-text .comment-image.comment-image-preview-zoomed .comment-image-preview-mask { display: block; + background: transparent; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100vw; + height: 100vh; + z-index: 1501; + cursor: zoom-out; } @@ -4829,17 +5554,25 @@ html.darkmode .comment-upvote:hover { .comment-item-text .comment-image .comment-image-preview { width: 22px; + height: 22px; + position: absolute; + left: 0; + opacity: 0; - pointer-events: none; + + /*pointer-events: none;*/ + } .comment-item-text .comment-image.comment-image-preview-zoomed .comment-image-preview { z-index: 1502; + opacity: 1; + pointer-events: unset; } @@ -4849,6 +5582,7 @@ html.darkmode .comment-upvote:hover { .comment-item-text strong { font-weight: 600; + opacity: 0.78; } @@ -4860,20 +5594,35 @@ html.darkmode .comment-upvote:hover { "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; + font-size: 14px; + line-height: 1.375; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + tab-size: 4; + hyphens: none; + color: #5e6687; + background: var(--color-widgets); + direction: ltr; + border: 1px solid var(--color-border-on-foreground); + padding: 14px; + border-radius: 3px; + margin-top: 15px; } @@ -4887,8 +5636,11 @@ html.darkmode .comment-item-text pre { .comment-item-text blockquote { padding-left: 1.2em; + margin: 1em 3em 1em 0; + font-weight: 400; + border-left: 3px solid rgba(0, 0, 0, 0.12); } @@ -4938,10 +5690,15 @@ html.darkmode .comment-item-text blockquote { .comment-item-text h6 { font-weight: 600; + opacity: 0.6; + font-size: inherit; + margin-top: 10px; + margin-bottom: 5px; + transition: opacity 0.3s ease; } @@ -4959,6 +5716,7 @@ html.darkmode .comment-item-text blockquote { .comment-item-text:hover h6 { font-weight: 600; + opacity: 0.8; } @@ -5004,6 +5762,7 @@ html.darkmode .comment-item-text blockquote { .comment-item-inner.comment-folded { max-height: 200px; + overflow: hidden; } @@ -5011,13 +5770,21 @@ html.darkmode .comment-item-text blockquote { .comment-item-inner.comment-folded:after { content: ""; + display: block; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 80px; + background: linear-gradient(180deg, transparent 0%, var(--color-foreground) 100%); + pointer-events: none; } @@ -5031,16 +5798,27 @@ html.darkmode .comment-item-text blockquote { .comment-item-inner.comment-folded .show-full-comment { position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 35px; + color: var(--themecolor); + z-index: 2; + text-align: left; + cursor: pointer; + user-select: none; + opacity: 0.6; + transition: opacity 0.25s ease; } @@ -5070,8 +5848,11 @@ html.darkmode .comment-item-text blockquote { #comments_more { width: 52px; + height: 52px; + display: block; + margin: 30px auto 10px auto; } @@ -5107,8 +5888,11 @@ html.darkmode .comment-item-text blockquote { .comments-navigation-more .comments-navigation-nomore { text-align: center; + margin-top: 30px; + margin-bottom: 10px; + opacity: 0.6; } @@ -5118,9 +5902,13 @@ html.darkmode .comment-item-text blockquote { .comment-edit-history-item { border-bottom: 1px solid #e9ecef; + margin-bottom: 22px; + padding-bottom: 30px; + padding-left: 5px; + padding-right: 5px; } @@ -5140,7 +5928,9 @@ html.darkmode .comment-edit-history-item { .comment-edit-history-id { font-size: 22px; + font-weight: bold; + display: inline-block; } @@ -5148,7 +5938,9 @@ html.darkmode .comment-edit-history-item { .comment-edit-history-title .badge { transform: translateY(-3px); + margin-left: 8px; + display: inline-block; } @@ -5156,7 +5948,9 @@ html.darkmode .comment-edit-history-item { .comment-edit-history-time { opacity: 0.6; + font-size: 15px; + margin-bottom: 12px; } @@ -5164,6 +5958,7 @@ html.darkmode .comment-edit-history-item { #comment_edit_history .modal-body .comment-edit-history-item:last-child { border: navajowhite; + padding-bottom: 0; } @@ -5172,7 +5967,7 @@ html.darkmode .comment-edit-history-item { #post_comment { - margin-bottom: 16px; + margin-bottom: 25px; } @@ -5372,12 +6167,19 @@ html.darkmode .post-comment-reply-preview { #post_comment_content { transition: height 0.15s ease, box-shadow var(--animation-normal) var(--ease-standard), border-color var(--animation-normal) var(--ease-standard); + overflow: hidden; + min-height: 80px; + resize: none; + white-space: pre-wrap; + word-wrap: break-word; + margin-bottom: 12px; + margin-top: 0; border-radius: 10px; @@ -5437,16 +6239,27 @@ html.darkmode .post-comment-reply-preview { #post_comment_content_hidden { font-family: inherit !important; + font-weight: 400; + line-height: 1.5; + font-size: 14px; + padding: 0.625rem 0.75rem; + width: calc(100% - 30px); + overflow: hidden; + white-space: pre-wrap; + word-wrap: break-word; + position: absolute; + pointer-events: none; + opacity: 0; } @@ -5460,21 +6273,37 @@ html.darkmode .post-comment-reply-preview { .comment-post-checkbox:before { pointer-events: none; + position: absolute; + top: -35px; + left: 0px; + line-height: 25px; + font-weight: normal; + color: #fff; + background: #32325d; + padding: 3px 10px; + font-size: 14px; + border-radius: 3px; + z-index: 3; + transition: all 0.3s ease; + transform: translateY(5px); + opacity: 0; + width: max-content; + width: -moz-max-content; } @@ -5492,6 +6321,7 @@ html.darkmode .post-comment-reply-preview { .comment-post-checkbox:hover:before { transform: translateY(0); + opacity: 0.7; } @@ -5505,6 +6335,7 @@ html.darkmode .post-comment-reply-preview { #post_comment_toggle_extra_input:before { content: attr(tooltip-show-extra-field); + text-transform: none; } @@ -5518,6 +6349,7 @@ html.darkmode .post-comment-reply-preview { #post_comment_toggle_extra_input { border-radius: 100px; + padding: 5px 20px; } @@ -5539,7 +6371,9 @@ html.darkmode .post-comment-reply-preview { #post_comment.logged #post_comment_email { opacity: 1; + background-color: var(--color-widgets-disabled); + pointer-events: none; } @@ -5547,8 +6381,11 @@ html.darkmode .post-comment-reply-preview { .comment-post-checkbox { display: inline-block; + margin-top: 8px; + height: 28px; + margin-right: 8px; } @@ -5564,6 +6401,7 @@ html.darkmode .post-comment-reply-preview { #post_comment.post-comment-force-privatemode-on .comment-post-privatemode { opacity: 0.6; + pointer-events: none; } @@ -5571,8 +6409,11 @@ html.darkmode .post-comment-reply-preview { #post_comment.post-comment-force-privatemode-on .comment-post-privatemode .custom-control-label::before { border-color: var(--themecolor); + background-color: var(--themecolor); + color: #fff; + box-shadow: none; } @@ -5586,6 +6427,7 @@ html.darkmode .post-comment-reply-preview { #post_comment.post-comment-force-privatemode-off .comment-post-privatemode { opacity: 0.6; + pointer-events: none; } @@ -5599,6 +6441,7 @@ html.darkmode .post-comment-reply-preview { html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-privatemode .custom-control-label::before { background: #555; + border-color: #666; } @@ -5624,6 +6467,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri #post_comment.sending .comment-post-checkbox { opacity: 0.6; + pointer-events: none; } @@ -5631,6 +6475,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .comment-btn { margin-top: 0; + margin-right: 8px; } @@ -5652,6 +6497,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri #post_comment.editing .comment-post-use-markdown { pointer-events: none; + opacity: 0.6; } @@ -5667,18 +6513,31 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri #comment_emotion_btn { border-radius: 100px; + width: 38px; + height: 38px; + padding: 0; + font-size: 22px; + background: transparent !important; + box-shadow: none; + color: inherit; + border: none; + transform: none; + opacity: 0.7; + margin-top: 0; + margin-right: 8px; + transition: all 0.3s ease; } @@ -5691,6 +6550,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri #comment_emotion_btn.comment-emotion-keyboard-open { border-radius: 100px; + color: var(--themecolor); opacity: 1; @@ -5700,19 +6560,33 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-keyboard { max-width: min(500px, calc(100vw - 40px)); + min-width: min(300px, calc(100vw - 40px)); + display: flex; + height: 300px; + flex-direction: column; + overflow: hidden; + position: absolute; + z-index: 2; + right: 0; + bottom: -10px; + transform: translateY(100%) scale(0.9); + transform-origin: top; + transition: all 0.3s ease; + opacity: 0; + pointer-events: none; } @@ -5720,7 +6594,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri #comment_emotion_btn.comment-emotion-keyboard-open + .emotion-keyboard { opacity: 1; + transform: translateY(100%); + pointer-events: all; } @@ -5728,6 +6604,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-keyboard-content { flex: 1; + overflow-y: auto; } @@ -5735,6 +6612,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-group { padding: 15px 15px; + padding-bottom: 10px; } @@ -5742,13 +6620,21 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-item { display: inline-block; + background: var(--color-border-on-foreground); + border-radius: 5px; + user-select: none; + margin-right: 12px; + margin-bottom: 12px; + padding: 2px 10px; + cursor: pointer; + transition: all 0.3s ease; } @@ -5756,6 +6642,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-item.emotion-item-sticker { padding: 2px; + background: rgba(126, 126, 126, 0.15); } @@ -5763,9 +6650,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-item > img { max-height: 60px; + border-radius: 3px; + transition: filter 0.3s ease, transform 0.3s ease; + transition-delay: 0s; + background: var(--color-widgets); } @@ -5779,6 +6670,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-item:hover { background: var(--themecolor); + color: #fff; } @@ -5790,8 +6682,11 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri > img:not([src^="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nI"]) { transition: all 0.3s ease; + transition-delay: 0.3s; + transform: scale(1.5); + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15); } @@ -5799,7 +6694,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-group-description { text-align: right; + font-size: 14px; + opacity: 0.6; } @@ -5807,8 +6704,11 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-keyboard-bar { overflow-x: auto; + white-space: nowrap; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06); + transform: scaleY(-1); } @@ -5828,6 +6728,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-keyboard-bar::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); + border: none; } @@ -5841,11 +6742,17 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-group-name { display: inline-block; + padding: 10px 20px; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + user-select: none; + transform: scaleY(-1); } @@ -5859,12 +6766,19 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-group-name.active:after { content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + background: var(--themecolor); + height: 3px; + pointer-events: none; } @@ -5876,6 +6790,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .shortcode-todo { cursor: default; + margin: 3px 0; } @@ -5895,7 +6810,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .shortcode-todo .custom-control-label span { transform: translateY(-2.5px); + display: block; + cursor: text !important; } @@ -5903,6 +6820,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .shortcode-todo.inline { display: inline-block; + margin-right: 10px; } @@ -5916,9 +6834,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .collapse-block { border-radius: 3px; + border-left-width: 3px; + border-left-style: solid; + margin-bottom: 20px; + background-color: var(--color-widgets) !important; } @@ -5940,9 +6862,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .collapse-block .collapse-icon { position: absolute; + right: 15px; + bottom: 15px; + transform: rotateZ(180deg); + transition: all 0.2s ease; } @@ -5958,6 +6884,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .collapse-block-title { padding: 10px 15px; + font-weight: bold; } @@ -5965,6 +6892,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .collapse-block-title-inner { max-width: calc(100% - 20px); + display: inline-block; } @@ -5972,6 +6900,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .collapse-block-title { cursor: pointer; + position: relative; } @@ -5981,6 +6910,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .collapse-block-body { padding: 20px 15px; + padding-bottom: 20px; } @@ -6104,9 +7034,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-simple .friend-category-title { font-size: 22px; + text-align: center; + font-weight: bold; + margin-top: 20px; + margin-bottom: 25px; } @@ -6132,6 +7066,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-simple .link .card img { border: none; + max-width: unset; } @@ -6139,7 +7074,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-simple .link .friend-link-title { font-size: 17px; + font-weight: bold; + margin-bottom: 5px; } @@ -6157,7 +7094,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links .link { padding-left: 10px; + padding-right: 10px; + padding-bottom: 15px; } @@ -6165,8 +7104,11 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links .friend-link-container { display: block; + overflow: hidden; + white-space: nowrap; + background-color: var(--color-widgets) !important; } @@ -6182,10 +7124,15 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style1 .friend-link-avatar { display: inline-block; + width: 125px; + height: 140px; + border-radius: 0 65px 65px 0; + object-fit: cover; + pointer-events: none; } @@ -6193,10 +7140,15 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style1 .friend-link-content { display: inline-block; + width: calc(100% - 125px); + height: 140px; + vertical-align: middle; + padding: 10px 15px 10px 15px; + white-space: normal; } @@ -6210,10 +7162,15 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style1 .friend-link-title { font-weight: bold; + font-size: 18px; + height: 36px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } @@ -6221,8 +7178,11 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style1 .friend-link-description { height: 50px; + overflow: hidden; + line-height: 25px; + position: relative; } @@ -6230,13 +7190,21 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style1 .friend-link-description:after { content: ""; + width: 45px; + height: 22px; + display: block; + position: absolute; + right: 0; + top: 25px; + pointer-events: none; + background: linear-gradient(90deg, transparent 0%, var(--color-widgets) 100%); } @@ -6244,8 +7212,11 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style1 .friend-link-links { height: 32px; + overflow: hidden; + font-size: 18px; + margin-top: 2px; } @@ -6261,6 +7232,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style1.friend-links-style1-square .friend-link-avatar { border-radius: 0; + width: 130px; } @@ -6282,9 +7254,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style2 .friend-link-avatar { display: block; + width: 100%; + height: 160px; + object-fit: cover; + pointer-events: none; } @@ -6292,7 +7268,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style2 .friend-link-content { display: block; + width: 100%; + padding: 10px 15px 12px 15px; } @@ -6300,10 +7278,15 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style2 .friend-link-title { font-weight: bold; + font-size: 18px; + height: 36px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } @@ -6311,9 +7294,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style2 .friend-link-description { height: 25px; + line-height: 25px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } @@ -6321,8 +7308,11 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style2 .friend-link-links { height: 30px; + overflow: hidden; + font-size: 18px; + margin-top: 8px; } @@ -6338,7 +7328,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-style2.friend-links-style2-big .friend-link-avatar { height: calc(100vw * 0.2); + min-height: 200px; + max-height: 250px; } @@ -6368,10 +7360,15 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-timeline { margin-left: 110px; + border-left: 3px solid rgba(var(--themecolor-rgbstr), 0.2); + padding-left: 25px; + position: relative; + padding-top: 30px; + padding-bottom: 10px; } @@ -6379,11 +7376,17 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-timeline-time { position: absolute !important; + left: -110px; + margin-top: 12px; + width: 85px; + text-align: right; + font-size: 15px; + line-height: 26px; } @@ -6391,7 +7394,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-timeline-card { margin-bottom: 35px; + padding: 18px 25px; + background: var(--color-widgets) !important; } @@ -6399,12 +7404,19 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-timeline-card:before { content: ""; + position: absolute; + left: -35px; + top: 17px; + background: var(--themecolor); + width: 14px; + height: 14px; + border-radius: 50%; } @@ -6412,7 +7424,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-timeline-title { font-size: 17px; + font-weight: bold; + margin-bottom: 5px; } @@ -6442,7 +7456,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-hidden-text.argon-hidden-text-background { background: #000; + color: transparent; + border-radius: 1px; } @@ -6450,7 +7466,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-hidden-text.argon-hidden-text-background:hover { background: transparent; + color: inherit; + border-radius: 0px; } @@ -6462,9 +7480,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card { background: #24292e !important; + margin-top: 20px; + margin-bottom: 20px; + padding: 20px 25px; + color: #eee; } @@ -6484,6 +7506,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card-header a { color: #eee !important; + font-size: 16px; } @@ -6515,6 +7538,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card-bottom .github-info-card-meta { margin-right: 10px; + opacity: 0.7; } @@ -6530,9 +7554,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card-mini { display: flex; + flex-direction: row; + white-space: nowrap; + align-items: center; + padding: 15px 20px; } @@ -6540,7 +7568,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card-mini .github-info-card-name-a { display: inline-block; + margin-right: 12px; + font-size: 19px; } @@ -6548,9 +7578,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card-mini .github-info-card-description { white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + word-break: break-all; + display: inline-block; } @@ -6558,9 +7592,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card-mini .github-info-card-body { flex: 1; + white-space: nowrap; + overflow: hidden; + display: flex; + align-items: center; } @@ -6568,7 +7606,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card-mini .github-info-card-bottom { display: inline-block; + margin-top: 0; + margin-left: 10px; } @@ -6576,6 +7616,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card-mini .github-info-card-header { margin-right: 7px; + margin-bottom: 0; } @@ -6583,7 +7624,9 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card-mini .github-info-card-header a i { font-size: 19px; + transform: translateY(2px); + margin-right: 2px; } @@ -6633,8 +7676,11 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-tabpanel .nav { display: flex; + justify-content: flex-start; + align-content: center; + flex-wrap: wrap; } @@ -6642,8 +7688,11 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-tabpanel .nav-pills .nav-item { padding: 0; + flex: 0; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + margin-bottom: 0; } @@ -6651,12 +7700,19 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-tabpanel .nav-pills .nav-link { box-shadow: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + background-color: var(--color-widgets); + border: solid 1px var(--color-border-on-foreground); + border-bottom: none; + padding: 8px 16px; + white-space: nowrap; } @@ -6702,15 +7758,25 @@ html.darkmode .argon-tabpanel .nav-pills .nav-link { .noUi-handle:before { content: attr(aria-valuenow) " px"; + position: absolute; + left: -36px; + top: -20px; + font-size: 10px; + display: block; + width: 90px; + text-align: center; + transition: opacity 0.15s ease; + opacity: 0; + pointer-events: none; } @@ -6740,11 +7806,17 @@ html.darkmode .argon-tabpanel .nav-pills .nav-link { #nprogress .bar { background: rgba(255, 255, 255, 0.67); + position: fixed; + z-index: 1031; + top: 0; + left: 0; + width: 100%; + height: 2px; } @@ -6758,14 +7830,23 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { #nprogress .peg { display: block; + position: absolute; + right: 0px; + width: 100px; + height: 100%; + box-shadow: 0 0 10px rgba(255, 255, 255, 0.67), 0 0 5px rgba(255, 255, 255, 0.67); + opacity: 1; + -webkit-transform: rotate(3deg) translate(0px, -4px); + -ms-transform: rotate(3deg) translate(0px, -4px); + transform: rotate(3deg) translate(0px, -4px); } @@ -6773,9 +7854,13 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { #nprogress .spinner { display: block; + position: fixed; + z-index: 1031; + top: 15px; + right: 15px; } @@ -6783,13 +7868,21 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { #nprogress .spinner-icon { width: 18px; + height: 18px; + box-sizing: border-box; + border: solid 2px transparent; + border-top-color: rgba(255, 255, 255, 0.67); + border-left-color: rgba(255, 255, 255, 0.67); + border-radius: 50%; + -webkit-animation: nprogress-spinner 400ms linear infinite; + animation: nprogress-spinner 400ms linear infinite; } @@ -6797,6 +7890,7 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { .nprogress-custom-parent { overflow: hidden; + position: relative; } @@ -6854,6 +7948,7 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { .iziToast > .iziToast-close { opacity: 0.9 !important; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTcwODgxMzc1MTA3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0MTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik05NTQuMzA0IDE5MC4zMzZhMTUuNTUyIDE1LjU1MiAwIDAgMSAwIDIxLjk1MmwtMzAwLjAzMiAzMDAuMDMyIDI5OC41NiAyOTguNTZhMTUuNjE2IDE1LjYxNiAwIDAgMSAwIDIyLjAxNmwtMTIwLjk2IDEyMC44OTZhMTUuNTUyIDE1LjU1MiAwIDAgMS0yMS45NTIgMEw1MTEuMzYgNjU1LjIzMiAyMTQuMjcyIDk1Mi4zMmExNS41NTIgMTUuNTUyIDAgMCAxLTIxLjk1MiAwbC0xMjAuODk2LTEyMC44OTZhMTUuNDg4IDE1LjQ4OCAwIDAgMSAwLTIxLjk1MmwyOTcuMTUyLTI5Ny4xNTJMNjkuODg4IDIxMy43NmExNS41NTIgMTUuNTUyIDAgMCAxIDAtMjEuOTUybDEyMC44OTYtMTIwLjg5NmExNS41NTIgMTUuNTUyIDAgMCAxIDIxLjk1MiAwTDUxMS4zNiAzNjkuNDcybDMwMC4wOTYtMzAwLjAzMmExNS4zNiAxNS4zNiAwIDAgMSAyMS45NTIgMGwxMjAuODk2IDEyMC44OTZ6IiBwLWlkPSIzNDExIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+) no-repeat 50% 50% !important; @@ -6871,6 +7966,7 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { .iziToast > .iziToast-body i.fa-spin:before { animation: fa-spin 2s infinite linear; + display: inline-block; } @@ -6892,8 +7988,11 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { #MathJax_Zoom { background: var(--color-widgets) !important; + border: var(--color-border-on-foreground-deeper) solid 1px !important; + border-radius: 3px !important; + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important; } @@ -6901,7 +8000,9 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { .CtxtMenu_Menu { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; + border: none !important; + border-radius: 5px !important; } @@ -6913,9 +8014,13 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"] { width: 100%; + max-height: 60vh; + background-color: var(--color-border-on-foreground); + background-repeat: no-repeat; + background-position: 50% 50%; } @@ -6923,6 +8028,7 @@ article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg" article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg"]:not([srcset]) { height: 500px; + pointer-events: none; } @@ -7000,6 +8106,7 @@ article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg" .fancybox-wrapper { width: max-content; + max-width: 100%; } @@ -7023,7 +8130,9 @@ figure > a > .fancybox-wrapper { .fancybox-wrapper > img { cursor: pointer; + cursor: -webkit-zoom-in; + cursor: zoom-in; } @@ -7033,7 +8142,9 @@ figure > a > .fancybox-wrapper { .zoomify { cursor: pointer; + cursor: -webkit-zoom-in; + cursor: zoom-in; } @@ -7041,13 +8152,21 @@ figure > a > .fancybox-wrapper { .zoomify.zoomed { cursor: -webkit-zoom-out; + cursor: zoom-out; + padding: 0; + margin: 0; + border: none; + border-radius: 0; + box-shadow: none; + position: relative; + z-index: 1501; } @@ -7055,15 +8174,25 @@ figure > a > .fancybox-wrapper { .zoomify-shadow { position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + display: block; + z-index: 1500; + background: rgba(0, 0, 0, 0.3); + opacity: 0; } @@ -7071,8 +8200,11 @@ figure > a > .fancybox-wrapper { .zoomify-shadow.zoomed { opacity: 1; + cursor: pointer; + cursor: -webkit-zoom-out; + cursor: zoom-out; } @@ -7176,21 +8308,17 @@ body.noscroll:before { gap: 6px; transform: translateY(15px); opacity: 0; - visibility: hidden; pointer-events: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), - opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), - visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1); + opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* 分享渠道按钮初始状态 */ #share > a { opacity: 0; transform: translateY(10px); - pointer-events: none; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), - opacity 0.2s ease-out, - pointer-events 0s 0.2s; + opacity 0.2s ease-out; } /* 展开状态 - 分享按钮上滑淡出 */ @@ -7204,7 +8332,6 @@ body.noscroll:before { #share_container.opened #share { transform: translateY(0); opacity: 1; - visibility: visible; pointer-events: auto; } @@ -7212,8 +8339,6 @@ body.noscroll:before { #share_container.opened #share > a { opacity: 1; transform: translateY(0); - pointer-events: auto; - transition-delay: 0s; } #share_container.opened #share > a:nth-child(1) { transition-delay: 30ms; } @@ -7226,10 +8351,6 @@ body.noscroll:before { #share_container.opened #share > a:nth-child(8) { transition-delay: 240ms; } /* 收起时各按钮错落滑出 */ -#share_container:not(.opened) #share > a { - pointer-events: none !important; -} - #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; } @@ -7318,7 +8439,7 @@ body.noscroll:before { } #share .wechat-qrcode .help { - color: #555; + color: #666; padding-top: 10px; padding-bottom: 0; font-size: 12px; @@ -7460,12 +8581,19 @@ html.darkmode #share .wechat-qrcode .help { #wpadminbar:after { content: "\f105"; + font: normal normal normal 20px/1 FontAwesome; + position: absolute; + top: 50%; + transform: translateY(calc(-50% - 2px)); + right: 10px; + transition: all 0.3s ease; + color: #fff; } @@ -7497,12 +8625,19 @@ html[lang] { .shuoshuo-meta { text-align: center; + background: var(--color-foreground); + border-radius: 5px 5px 0 0; + width: max-content; + width: -moz-max-content; + padding: 3px 15px; + font-size: 15px; + opacity: 0.95; } @@ -7524,6 +8659,7 @@ html[lang] { .shuoshuo-main { border-top-left-radius: 0; + padding: 20px 20px; } @@ -7531,11 +8667,17 @@ html[lang] { .shuoshuo-title { font-size: 18px; + color: #555; + font-weight: bold; + margin-bottom: 10px; + width: max-content; + width: -moz-max-content; + max-width: 100%; } @@ -7549,6 +8691,7 @@ html[lang] { .shuoshuo-content p { margin-bottom: 0; + line-height: 1.8; } @@ -7562,7 +8705,9 @@ html[lang] { .shuoshuo-comments { font-size: 14px; + opacity: 0.85; + margin-top: 10px; } @@ -7586,6 +8731,7 @@ html[lang] { .shuoshuo-comment-item-title .badge-unapproved { transform: translateY(-2px); + padding: 3px 5px; } @@ -7593,7 +8739,9 @@ html[lang] { .shuoshuo-comments .comment-item-inner { margin-top: 2px; + padding-bottom: 3px; + border: none !important; } @@ -7607,8 +8755,11 @@ html[lang] { .shuoshuo-operations { margin-top: 5px; + margin-left: auto; + width: max-content; + width: -moz-max-content; } @@ -7622,8 +8773,11 @@ html[lang] { .shuoshuo-operations button.upvoted { color: #fff; + border-color: var(--themecolor); + background-color: var(--themecolor); + pointer-events: none; } @@ -7671,6 +8825,7 @@ html[lang] { .shuoshuo-upvote.shuoshuo-upvoting { opacity: 0.8; + pointer-events: none; } @@ -7680,7 +8835,9 @@ html[lang] { .shuoshuo-preview-container { margin-bottom: 20px; + padding: 25px 35px; + transition: opacity 0.5s ease; } @@ -7688,19 +8845,31 @@ html[lang] { .shuoshuo-preview-container:before { content: ""; + display: block; + position: absolute; + left: -20px; + top: -10px; + width: 40px; + height: 30px; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTgzNDIzNDcwNTE4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMwOTciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzc1Ljk5MTUxIDQzNy43MjYzOWM0OC4xMzEyMDctNzQuODg3NTk0IDExNi4yODY0Ny0xMzguMjQ5NjkxIDE4My4wMzg3OC0xODMuNTU2NTczbC03NS4xMzQyMTEtNzkuNDAxMzk4Yy0xNzIuNDgwMzA2IDY3LjY0MDU0LTMzNi43ODMzNzMgMjQyLjYxMTU3My0zMzYuNzgzMzczIDQ0OC40MzkzODJsMS4zMjcyMjggMGMtMC41Njg5NTggNi4yMzE5MzUtMC44NzQ5MjcgMTIuNTQwNjE3LTAuODc0OTI3IDE4LjkyMDkzMiAwIDExMy41ODU5NjUgOTIuMDc3MDkyIDIwNS42NjMwNTYgMjA1LjY2MzA1NiAyMDUuNjYzMDU2IDExMy41ODE4NzEgMCAyMDUuNjYzMDU2LTkyLjA3NzA5MiAyMDUuNjYzMDU2LTIwNS42NjMwNTZDOTU4Ljg5MjE0MyA1MzYuMjM5MDU0IDg3OC44NjAzODkgNDQ5LjA1NTQxMiA3NzUuOTkxNTEgNDM3LjcyNjM5ek00NzIuOTE2ODY2IDI1NC4xNjk4MTdsLTc1LjEzNDIxMS03OS40MDEzOThjLTE3Mi40ODAzMDYgNjcuNjQwNTQtMzM2Ljc4MzM3MyAyNDIuNjExNTczLTMzNi43ODMzNzMgNDQ4LjQzOTM4MmwxLjMyNzIyOCAwYy0wLjU2ODk1OCA2LjIzMTkzNS0wLjg3NDkyNyAxMi41NDA2MTctMC44NzQ5MjcgMTguOTIwOTMyIDAgMTEzLjU4NTk2NSA5Mi4wNzcwOTIgMjA1LjY2MzA1NiAyMDUuNjYzMDU2IDIwNS42NjMwNTZzMjA1LjY2MzA1Ni05Mi4wNzcwOTIgMjA1LjY2MzA1Ni0yMDUuNjYzMDU2YzAtMTA1Ljg5MDcwMi04MC4wMjg2ODUtMTkzLjA3NTM2Ny0xODIuOTAwNjMzLTIwNC40MDMzNjdDMzM4LjAwODI3IDM2Mi44Mzg3OTUgNDA2LjE2MzUzMyAyOTkuNDc2Njk5IDQ3Mi45MTY4NjYgMjU0LjE2OTgxN3oiIHAtaWQ9IjMwOTgiIGZpbGw9IiNmZmZmZmYiIGRhdGEtc3BtLWFuY2hvci1pZD0iYTMxM3guNzc4MTA2OS4wLmkyIiBjbGFzcz0ic2VsZWN0ZWQiPjwvcGF0aD48L3N2Zz4=); background-color: var(--themecolor); + background-position: 40% 35%; + border-radius: 20px; + background-size: 32%; + background-repeat: no-repeat; + transition: all 0.3s ease; } @@ -7708,12 +8877,19 @@ html[lang] { .shuoshuo-preview-container:hover:before { left: -20px; + top: -10px; + width: 40px; + height: 40px; + background-position: 45% 45%; + border-radius: 20px; + background-size: 40%; + background-repeat: no-repeat; } @@ -7721,8 +8897,11 @@ html[lang] { .shuoshuo-preview-meta { font-size: 14px; + opacity: 0.6; + transition: all 0.3s ease; + margin-top: 10px; } @@ -7744,9 +8923,13 @@ html[lang] { .shuoshuo-preview-link { position: absolute; + right: 20px; + bottom: 25px; + opacity: 0; + transition: all 0.3s ease; } @@ -7760,6 +8943,7 @@ html[lang] { .post-list-pjax-loading .shuoshuo-preview-container { opacity: 0; + pointer-events: none; } @@ -7767,7 +8951,9 @@ html[lang] { .shuoshuo-content.shuoshuo-folded { position: relative; + max-height: 400px; + overflow: hidden; } @@ -7775,13 +8961,21 @@ html[lang] { .shuoshuo-content.shuoshuo-folded:after { content: ""; + display: block; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 150px; + background: linear-gradient(180deg, transparent 0%, var(--color-foreground) 100%); + pointer-events: none; } @@ -7789,14 +8983,23 @@ html[lang] { .shuoshuo-content.shuoshuo-folded .show-full-shuoshuo { position: absolute; + bottom: 10px; + right: 50%; + transform: translateX(50%); + color: var(--themecolor); + z-index: 2; + text-align: left; + cursor: pointer; + user-select: none; + opacity: 1; } @@ -7804,7 +9007,9 @@ html[lang] { .shuoshuo-content.shuoshuo-folded .show-full-shuoshuo > button { border-radius: var(--card-radius); + padding: 5px 20px; + opacity: 0.8; } @@ -7834,12 +9039,19 @@ html[lang] { .archive-timeline-title { box-shadow: none; + border: none; + background: transparent !important; + font-size: 18px; + padding: 0; + margin-left: 1px; + margin-bottom: 25px; + padding-top: 7px; } @@ -7847,8 +9059,11 @@ html[lang] { .archive-timeline-year { font-size: 30px; + color: var(--themecolor); + margin-top: 12px !important; + margin-bottom: 0; } @@ -7856,10 +9071,15 @@ html[lang] { .archive-timeline-month { font-size: 24px; + color: var(--themecolor); + opacity: 0.8; + margin-top: 12px !important; + margin-bottom: 0; + font-weight: unset; } @@ -7867,6 +9087,7 @@ html[lang] { .archive-timeline-year + .archive-timeline-title { height: 50px; + margin-top: 30px; } @@ -7874,8 +9095,11 @@ html[lang] { .archive-timeline *:not(.archive-timeline-year) + .archive-timeline-title:before { width: 12px; + height: 12px; + left: -34px; + top: 18px; } @@ -7895,6 +9119,7 @@ html[lang] { .archive-timeline-title > a { width: max-content; + max-width: 100%; } @@ -7936,12 +9161,19 @@ html[lang] { .loading-dot { display: inline-block; + background: var(--themecolor); + height: 6px; + width: 6px; + opacity: 0; + border-radius: 50%; + transform: translateX(-300px); + animation: loading-animation 4s infinite ease; } @@ -8029,12 +9261,19 @@ html[lang] { .spinner-border { display: inline-block; + width: 2rem; + height: 2rem; + vertical-align: text-bottom; + border: 0.25em solid currentColor; + border-right-color: transparent; + border-radius: 50%; + animation: spin 0.75s linear infinite; } @@ -8042,7 +9281,9 @@ html[lang] { .spinner-border-sm { width: 1rem; + height: 1rem; + border-width: 0.2em; } @@ -8068,12 +9309,19 @@ html[lang] { .spinner-grow { display: inline-block; + width: 2rem; + height: 2rem; + vertical-align: text-bottom; + background-color: currentColor; + border-radius: 50%; + opacity: 0; + animation: grow 0.75s linear infinite; } @@ -8081,6 +9329,7 @@ html[lang] { .spinner-grow-sm { width: 1rem; + height: 1rem; } @@ -8100,7 +9349,9 @@ article table.hljs-ln > thead > tr > td, article table.hljs-ln > thead > tr > th { padding: unset; + vertical-align: unset; + border: unset !important; } @@ -8114,7 +9365,9 @@ article table.hljs-ln > thead > tr > th { pre.hljs-codeblock { overflow: visible; + position: relative; + tab-size: 4; } @@ -8122,17 +9375,25 @@ pre.hljs-codeblock { pre.hljs-codeblock:before { content: ""; + position: absolute; + background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkY1RjU2IiBzdHJva2U9IiNFMDQ0M0UiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iI0ZGQkQyRSIgc3Ryb2tlPSIjREVBMTIzIiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0NiIgY3k9IjYiIHI9IjYiIGZpbGw9IiMyN0M5M0YiIHN0cm9rZT0iIzFBQUIyOSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==) no-repeat; background-position-y: center; + top: 22px; + left: 20px; + height: 14px; + width: 54px; + margin-left: 5px; + display: block; } @@ -8140,13 +9401,21 @@ pre.hljs-codeblock:before { code[hljs-codeblock-inner] { line-height: 1.5; + font-size: 16px; + padding: 22px 20px !important; + border-radius: 8px; + box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; + margin-top: 15px !important; + margin-bottom: 15px !important; + padding-top: 55px !important; + display: block; } @@ -8154,19 +9423,33 @@ code[hljs-codeblock-inner] { .hljs-ln-numbers { -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + text-align: center; + vertical-align: top; + padding-right: 12px !important; + position: absolute; + left: 20px; + width: 30px; + overflow-x: visible !important; + white-space: nowrap; + transition: all 0.3s ease; } @@ -8174,10 +9457,15 @@ code[hljs-codeblock-inner] { .hljs-ln-numbers:before { content: ""; + position: absolute; + left: -20px; + width: 20px; + height: 100%; + background: inherit; } @@ -8191,6 +9479,7 @@ pre.hljs-codeblock.hljs-transparent-linenumber .hljs-ln-numbers { .hljs-ln-code { padding-left: 30px !important; + transition: all 0.3s ease; } @@ -8198,6 +9487,7 @@ pre.hljs-codeblock.hljs-transparent-linenumber .hljs-ln-numbers { pre.hljs-codeblock.hljs-break-line .hljs-ln-code { line-break: anywhere; + white-space: break-spaces; } @@ -8211,6 +9501,7 @@ pre.hljs-codeblock:not(.hljs-break-line) .hljs-ln-code { code[hljs-codeblock-inner]::-webkit-scrollbar-track { border: none; + background: transparent !important; } @@ -8218,9 +9509,13 @@ code[hljs-codeblock-inner]::-webkit-scrollbar-track { code[hljs-codeblock-inner]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3) !important; + box-shadow: none !important; + border: none !important; + border-radius: 10px; + transition: background 0.3s ease; } @@ -8234,6 +9529,7 @@ code[hljs-codeblock-inner]::-webkit-scrollbar-thumb:hover { code[hljs-codeblock-inner]::-webkit-scrollbar { background: transparent; + height: 6px; } @@ -8247,12 +9543,19 @@ code[hljs-codeblock-inner] *::selection { pre.hljs-codeblock.hljs-codeblock-fullscreen { position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 10000; + margin: 0 !important; + animation: codeblock-fullscreen 0.5s cubic-bezier(0.18, 0.89, 0.37, 1.12); } @@ -8260,11 +9563,17 @@ pre.hljs-codeblock.hljs-codeblock-fullscreen { pre.hljs-codeblock.hljs-codeblock-fullscreen > code[hljs-codeblock-inner] { position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border-radius: 0; + margin: 0 !important; } @@ -8298,6 +9607,7 @@ pre.hljs-codeblock.hljs-codeblock-fullscreen:before { pre.hljs-codeblock.hljs-hide-linenumber .hljs-ln-numbers.hljs { width: 0px; + opacity: 0; } @@ -8311,16 +9621,27 @@ pre.hljs-codeblock.hljs-hide-linenumber .hljs-ln-code { pre.hljs-codeblock .hljs-control { display: block; + position: absolute; + top: 16px !important; + right: 20px !important; + user-select: none; + opacity: 0; + transition: all 0.2s ease; + white-space: nowrap; + overflow: visible; + background: transparent; + padding: 0; + margin: 0; } @@ -8346,11 +9667,17 @@ pre.hljs-codeblock .hljs-control i.fa { .hljs-control .hljs-control-btn { display: inline-block; + opacity: 0.8; + transition: all 0.2s ease; + cursor: pointer; + margin-left: 15px; + width: 12px; + position: relative; } @@ -8364,14 +9691,23 @@ pre.hljs-codeblock .hljs-control i.fa { .hljs-control-btn:before { position: absolute; + top: 22px; + left: -40px; + width: 92px; + text-align: center; + opacity: 0; + pointer-events: none; + transition: all 0.2s ease; + font-size: 12px; + font-family: sans-serif; } @@ -8379,6 +9715,7 @@ pre.hljs-codeblock .hljs-control i.fa { .hljs-control-btn:hover:before { opacity: 1; + top: 25px; } @@ -8446,16 +9783,27 @@ html.darkmode body { html.darkmode body:before { content: ""; + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + height: 100vh; + width: 100vw; + background: rgba(0, 0, 0, 0.2); + z-index: 999999999; + pointer-events: none; + transition: background 0.3s ease; } @@ -8665,6 +10013,7 @@ html.darkmode #blog_setting_darkmode_switch .custom-toggle-slider { html.darkmode #blog_setting_darkmode_switch .custom-toggle-slider:before { transform: translateX(1.625rem); + background-color: var(--themecolor); } @@ -8720,6 +10069,7 @@ html.darkmode.amoled-dark .leftbar-banner { html.darkmode.amoled-dark .github-info-card { background: #000 !important; + border: 1px solid #222; } @@ -8741,190 +10091,143 @@ html.darkmode.amoled-dark #content:after { display: block; } -/* ========================================================================== - 移动端样式重构 - Mobile Responsive Design - 基于 Material Design 3 + iOS 设计语言 - ========================================================================== */ +/*==========Style-Mobile==========*/ @media screen and (max-width: 900px) { - /* ---------- 移动端基础布局 ---------- */ - - /* 隐藏桌面端侧边栏内容 */ + /* 移动端隐藏桌面端侧边栏内容，只显示移动端导航 */ .leftbar-desktop-content { display: none !important; } - /* 移动端侧边栏容器 */ + /* 移动端侧边栏 - 优化设计 */ .leftbar-mobile-nav { display: flex; flex-direction: column; min-height: 100%; background: var(--color-foreground); - position: relative; - overflow: hidden; } - /* ---------- 移动端用户信息区 ---------- */ - - /* 顶部用户信息区 - 渐变背景 + 装饰元素 */ + /* 顶部用户信息区 - 增强视觉效果 */ .leftbar-mobile-profile { - background: linear-gradient(135deg, - var(--themecolor) 0%, - var(--themecolor-dark) 100%); - padding: 32px 20px 28px; + background: var(--themecolor-gradient); + padding: 28px 20px 24px; position: relative; color: #fff; overflow: hidden; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } - /* 背景装饰圆形 - 增强层次感 */ + /* 背景装饰圆形 */ .leftbar-mobile-profile::before { content: ""; position: absolute; - top: -80px; - right: -80px; - width: 200px; - height: 200px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%); + top: -60px; + right: -60px; + width: 160px; + height: 160px; + background: rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none; - animation: profileCircle1 8s ease-in-out infinite; - } - - @keyframes profileCircle1 { - 0%, 100% { transform: translate(0, 0) scale(1); } - 50% { transform: translate(-10px, 10px) scale(1.05); } } .leftbar-mobile-profile::after { content: ""; position: absolute; - bottom: -60px; - left: -60px; - width: 160px; - height: 160px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); + bottom: -40px; + left: -40px; + width: 120px; + height: 120px; + background: rgba(255, 255, 255, 0.05); border-radius: 50%; pointer-events: none; - animation: profileCircle2 10s ease-in-out infinite; } - @keyframes profileCircle2 { - 0%, 100% { transform: translate(0, 0) scale(1); } - 50% { transform: translate(10px, -10px) scale(1.08); } - } - - /* 关闭按钮 - 优化触摸区域 */ .leftbar-mobile-close { position: absolute; - top: 20px; - right: 20px; - width: 40px; - height: 40px; + top: 16px; + right: 16px; + width: 36px; + height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; - background: rgba(255, 255, 255, 0.18); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); cursor: pointer; - transition: all var(--animation-fast) var(--ease-spring); + transition: all var(--animation-fast) var(--ease-standard); color: #fff; - z-index: 10; - border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + z-index: 1; } .leftbar-mobile-close:active { - background: rgba(255, 255, 255, 0.3); - transform: scale(0.9); - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.25); + transform: scale(0.92); } .leftbar-mobile-close i { - font-size: 16px; - transition: transform var(--animation-fast) var(--ease-standard); + font-size: 15px; } - .leftbar-mobile-close:active i { - transform: rotate(90deg); - } - - /* 头像 - 增强触摸反馈 */ .leftbar-mobile-avatar { - width: 80px; - height: 80px; + width: 72px; + height: 72px; border-radius: 50%; overflow: hidden; - border: 4px solid rgba(255, 255, 255, 0.3); - margin-bottom: 16px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); + border: 3px solid rgba(255, 255, 255, 0.35); + margin-bottom: 14px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); position: relative; z-index: 1; transition: all var(--animation-normal) var(--ease-spring); } .leftbar-mobile-avatar:active { - transform: scale(0.92); - border-color: rgba(255, 255, 255, 0.5); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); + transform: scale(0.95); + border-color: rgba(255, 255, 255, 0.6); } .leftbar-mobile-avatar img { width: 100%; height: 100%; object-fit: cover; - transition: transform var(--animation-normal) var(--ease-standard); } - .leftbar-mobile-avatar:active img { - transform: scale(1.05); - } - - /* 用户信息 */ .leftbar-mobile-user-info { - margin-bottom: 20px; + margin-bottom: 18px; position: relative; z-index: 1; - text-align: center; } .leftbar-mobile-user-name { - font-size: 24px; + font-size: 22px; font-weight: 700; - margin-bottom: 8px; + margin-bottom: 6px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; - gap: 6px; - letter-spacing: -0.5px; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + gap: 4px; + letter-spacing: -0.3px; } .leftbar-mobile-user-desc { - font-size: 14px; - opacity: 0.92; - line-height: 1.5; - text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); + font-size: 13px; + opacity: 0.9; + line-height: 1.4; } - /* 统计数据卡片 */ .leftbar-mobile-stats { display: flex; gap: 0; - background: rgba(255, 255, 255, 0.15); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border-radius: 18px; - padding: 14px 10px; + background: rgba(255, 255, 255, 0.12); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 16px; + padding: 12px 8px; position: relative; z-index: 1; - border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .leftbar-mobile-stat { @@ -8933,11 +10236,6 @@ html.darkmode.amoled-dark #content:after { flex-direction: column; align-items: center; position: relative; - transition: transform var(--animation-fast) var(--ease-spring); - } - - .leftbar-mobile-stat:active { - transform: scale(0.95); } .leftbar-mobile-stat:not(:last-child)::after { @@ -8947,33 +10245,26 @@ html.darkmode.amoled-dark #content:after { top: 50%; transform: translateY(-50%); width: 1px; - height: 28px; - background: linear-gradient(to bottom, - transparent, - rgba(255, 255, 255, 0.3) 50%, - transparent); + height: 24px; + background: rgba(255, 255, 255, 0.2); } .leftbar-mobile-stat .stat-num { - font-size: 22px; + font-size: 20px; font-weight: 700; line-height: 1.2; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .leftbar-mobile-stat .stat-label { font-size: 11px; - opacity: 0.85; - margin-top: 4px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; + opacity: 0.75; + margin-top: 3px; + font-weight: 500; } - /* ---------- 移动端搜索框 ---------- */ - + /* 搜索框 - 优化样式 */ .leftbar-mobile-search { - padding: 18px 16px 10px; + padding: 16px 16px 8px; background: var(--color-foreground); } @@ -8981,30 +10272,28 @@ html.darkmode.amoled-dark #content:after { display: flex; align-items: center; background: var(--color-background); - border-radius: 16px; - padding: 13px 18px; + border-radius: 14px; + padding: 12px 16px; gap: 12px; - transition: all var(--animation-normal) var(--ease-emphasized); - border: 2px solid transparent; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + transition: all var(--animation-fast) var(--ease-standard); + border: 1px solid transparent; } .leftbar-mobile-search-inner:focus-within { - border-color: var(--themecolor); + border-color: rgba(var(--themecolor-rgbstr), 0.3); background: var(--color-foreground); - box-shadow: 0 4px 16px rgba(var(--themecolor-rgbstr), 0.15); - transform: translateY(-2px); + 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: 16px; - transition: all var(--animation-fast) var(--ease-standard); + font-size: 15px; + transition: color var(--animation-fast) var(--ease-standard); } .leftbar-mobile-search-inner:focus-within i { color: var(--themecolor); - transform: scale(1.1); } .leftbar-mobile-search-inner input { @@ -9014,29 +10303,25 @@ html.darkmode.amoled-dark #content:after { font-size: 15px; color: var(--color-text-deeper); outline: none; - font-weight: 500; } .leftbar-mobile-search-inner input::placeholder { color: #aaa; - font-weight: 400; } - /* ---------- 移动端导航菜单 ---------- */ - + /* 导航菜单区域 - 优化间距和样式 */ .leftbar-mobile-menu-section { - padding: 14px 12px 10px; + padding: 12px 12px 8px; } .leftbar-mobile-section-title { font-size: 11px; - font-weight: 800; - color: #888; + font-weight: 700; + color: #999; text-transform: uppercase; - letter-spacing: 1.5px; - padding: 10px 14px 14px; + letter-spacing: 1.2px; + padding: 8px 12px 12px; margin-bottom: 0; - opacity: 0.8; } .leftbar-mobile-menu { @@ -9046,30 +10331,21 @@ html.darkmode.amoled-dark #content:after { } .leftbar-mobile-menu-item { - margin-bottom: 6px; + margin-bottom: 4px; } .leftbar-mobile-menu-item > a { display: flex; align-items: center; - padding: 15px 18px; + padding: 14px 16px; color: var(--color-text-deeper); text-decoration: none; - border-radius: 16px; - transition: all var(--animation-normal) var(--ease-emphasized); + border-radius: 14px; + transition: all var(--animation-fast) var(--ease-standard); font-size: 15px; font-weight: 500; position: relative; overflow: hidden; - gap: 12px; - } - - /* 菜单项图标 */ - .leftbar-mobile-menu-item > a i { - font-size: 18px; - width: 24px; - text-align: center; - transition: transform var(--animation-fast) var(--ease-spring); } /* 菜单项涟漪效果 */ @@ -9080,55 +10356,38 @@ html.darkmode.amoled-dark #content:after { left: 50%; width: 0; height: 0; - background: rgba(var(--themecolor-rgbstr), 0.2); + background: rgba(var(--themecolor-rgbstr), 0.15); border-radius: 50%; transform: translate(-50%, -50%); - transition: width 0.5s var(--ease-emphasized-decelerate), - height 0.5s var(--ease-emphasized-decelerate); + transition: width 0.4s var(--ease-standard), height 0.4s var(--ease-standard); pointer-events: none; - opacity: 0; } .leftbar-mobile-menu-item > a:active::before { - width: 250%; - height: 250%; - opacity: 1; + width: 200%; + height: 200%; } .leftbar-mobile-menu-item > a:active { - background: rgba(var(--themecolor-rgbstr), 0.08); - transform: scale(0.96); + background: rgba(var(--themecolor-rgbstr), 0.1); + transform: scale(0.98); } - .leftbar-mobile-menu-item > a:active i { - transform: scale(1.15); - } - - /* 当前激活菜单项 */ .leftbar-mobile-menu-item.current > a { - background: linear-gradient(135deg, - rgba(var(--themecolor-rgbstr), 0.12) 0%, - rgba(var(--themecolor-rgbstr), 0.08) 100%); + background: rgba(var(--themecolor-rgbstr), 0.1); color: var(--themecolor); - font-weight: 600; - box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.15); } - .leftbar-mobile-menu-item.current > a::after { + .leftbar-mobile-menu-item.current > a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; - height: 24px; + height: 20px; background: var(--themecolor); border-radius: 0 4px 4px 0; - box-shadow: 2px 0 8px rgba(var(--themecolor-rgbstr), 0.4); - } - - .leftbar-mobile-menu-item.current > a i { - color: var(--themecolor); } .leftbar-mobile-menu-item .menu-text { @@ -9137,7 +10396,7 @@ html.darkmode.amoled-dark #content:after { .leftbar-mobile-menu-item .submenu-arrow { font-size: 12px; - color: #666; + color: #999; transition: transform var(--animation-normal) var(--ease-standard); margin-left: 8px; } @@ -9181,7 +10440,7 @@ html.darkmode.amoled-dark #content:after { padding: 11px 14px; font-size: 14px; font-weight: 400; - color: #555; + color: #666; border-radius: 10px; } @@ -9190,43 +10449,38 @@ html.darkmode.amoled-dark #content:after { background: rgba(var(--themecolor-rgbstr), 0.08); } - /* ---------- 移动端底部操作区 ---------- */ - + /* 底部操作区 - 优化设计 */ .leftbar-mobile-footer { margin-top: auto; - padding: 16px 16px 24px; + padding: 12px 16px 20px; border-top: 1px solid var(--color-border-on-foreground-deeper); background: var(--color-foreground); - box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04); } .leftbar-mobile-actions { display: flex; justify-content: center; - gap: 10px; + gap: 8px; } .leftbar-mobile-action { flex: 1; - max-width: 110px; + max-width: 100px; display: flex; flex-direction: column; align-items: center; - gap: 8px; - padding: 16px 14px; + gap: 6px; + padding: 14px 12px; border: none; background: var(--color-background); color: #666; font-size: 11px; - font-weight: 600; + font-weight: 500; cursor: pointer; - border-radius: 16px; - transition: all var(--animation-normal) var(--ease-emphasized); + border-radius: 14px; + transition: all var(--animation-fast) var(--ease-standard); position: relative; overflow: hidden; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); - text-transform: uppercase; - letter-spacing: 0.5px; } /* 底部按钮涟漪效果 */ @@ -9237,35 +10491,31 @@ html.darkmode.amoled-dark #content:after { left: 50%; width: 0; height: 0; - background: rgba(var(--themecolor-rgbstr), 0.25); + background: rgba(var(--themecolor-rgbstr), 0.2); border-radius: 50%; transform: translate(-50%, -50%); - transition: width 0.4s var(--ease-emphasized-decelerate), - height 0.4s var(--ease-emphasized-decelerate); + transition: width 0.35s var(--ease-standard), height 0.35s var(--ease-standard); pointer-events: none; - opacity: 0; } .leftbar-mobile-action:active::before { - width: 200%; - height: 200%; - opacity: 1; + width: 180%; + height: 180%; } .leftbar-mobile-action:active { - background: rgba(var(--themecolor-rgbstr), 0.1); + background: rgba(var(--themecolor-rgbstr), 0.12); color: var(--themecolor); - transform: scale(0.94); - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); + transform: scale(0.96); } .leftbar-mobile-action i { - font-size: 22px; - transition: transform var(--animation-normal) var(--ease-spring); + font-size: 20px; + transition: transform var(--animation-fast) var(--ease-spring); } .leftbar-mobile-action:active i { - transform: scale(1.2) rotate(5deg); + transform: scale(1.1); } /* ========== 移动端折叠面板样式 - Material 3 & iOS 风格 ========== */ @@ -9407,7 +10657,7 @@ html.darkmode.amoled-dark #content:after { .collapse-arrow { font-size: 11px; - color: #888; + color: #aaa; transition: all var(--animation-normal) var(--ease-emphasized); width: 20px; height: 20px; @@ -9492,7 +10742,7 @@ html.darkmode.amoled-dark #content:after { display: block; padding: 8px 10px; font-size: 13px; - color: #555; + color: #666; text-decoration: none; border-radius: 8px; transition: all var(--animation-fast) var(--ease-standard), @@ -9573,7 +10823,7 @@ html.darkmode.amoled-dark #content:after { } .mobile-todo-add-form input::placeholder { - color: #888; + color: #aaa; font-size: 12px; } @@ -9757,7 +11007,7 @@ html.darkmode.amoled-dark #content:after { .mobile-todo-empty { text-align: center; - color: #888; + color: #bbb; font-size: 12px; padding: 20px 0; } @@ -10923,7 +12173,9 @@ html.using-safari .comment-time-details, html.using-safari #share .icon-wechat .wechat-qrcode { -webkit-transform: translate3d(0, 0, 0) !important; + width: unset !important; + white-space: nowrap; } @@ -10941,6 +12193,7 @@ html.using-safari #share .icon-wechat .wechat-qrcode { html.using-safari .post-donate .donate-btn:hover ~ .donate-qrcode { transform: translateX(-50%); + opacity: 1; } @@ -10956,6 +12209,7 @@ html.using-safari #blog_setting_toggle_darkmode_and_amoledarkmode:before, html.using-safari #blog_setting_card_radius_to_default:before { transform: translate3d(-50%, 0, 0) !important; + white-space: nowrap; } @@ -11616,42 +12870,26 @@ html.darkmode .todo-add-form input:focus { font-size: 14px; font-weight: 700; color: #FF9600; - padding: 2px 8px 2px 4px; - background: rgba(255, 150, 0, 0.1); - border-radius: 12px; margin-left: 6px; vertical-align: middle; animation: duolingoFadeIn 0.5s var(--ease-emphasized-decelerate) both; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - transition: all var(--animation-fast) var(--ease-standard); -} - -.duolingo-streak:hover { - background: rgba(255, 150, 0, 0.15); - transform: translateY(-1px); } .duolingo-streak.not-done { - color: #666; - background: rgba(0, 0, 0, 0.08); + color: #999; text-shadow: none; } -.duolingo-streak.not-done:hover { - background: rgba(0, 0, 0, 0.12); -} - .duolingo-flame { width: 14px; height: 17px; animation: duolingoFlameGlow 2s ease-in-out infinite; - filter: drop-shadow(0 0 2px rgba(255, 150, 0, 0.3)); } .duolingo-streak.not-done .duolingo-flame { animation: none; - opacity: 0.5; - filter: grayscale(1) opacity(0.6); + opacity: 0.6; } /* 多邻国火焰动画 */ @@ -11661,8 +12899,8 @@ html.darkmode .todo-add-form input:focus { transform: scale(1); } 50% { - filter: drop-shadow(0 0 8px rgba(255, 150, 0, 0.9)) drop-shadow(0 0 4px rgba(255, 100, 0, 0.6)); - transform: scale(1.08); + filter: drop-shadow(0 0 6px rgba(255, 150, 0, 0.8)); + transform: scale(1.05); } } @@ -11681,66 +12919,26 @@ html.darkmode .todo-add-form input:focus { .leftbar-mobile-user-name .duolingo-streak { font-size: 15px; margin-left: 8px; - padding: 4px 12px 4px 8px; - background: linear-gradient(135deg, rgba(255, 150, 0, 0.25) 0%, rgba(255, 100, 0, 0.2) 100%); - border-radius: 16px; + padding: 3px 10px 3px 6px; + background: rgba(0, 0, 0, 0.25); + border-radius: 14px; gap: 4px; color: #fff; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - box-shadow: 0 2px 8px rgba(255, 150, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 150, 0, 0.3); + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); } .leftbar-mobile-user-name .duolingo-streak.not-done { - background: rgba(0, 0, 0, 0.25); - color: rgba(255, 255, 255, 0.85); - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); + background: rgba(0, 0, 0, 0.2); + color: rgba(255, 255, 255, 0.7); + text-shadow: none; } .leftbar-mobile-user-name .duolingo-flame { width: 16px; height: 19px; - filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3)); -} - -.leftbar-mobile-user-name .duolingo-streak.not-done .duolingo-flame { - filter: grayscale(1) opacity(0.5) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); -} - -/* 夜间模式多邻国徽章 */ -html.darkmode .duolingo-streak { - background: rgba(255, 150, 0, 0.15); - color: #FFB84D; -} - -html.darkmode .duolingo-streak:hover { - background: rgba(255, 150, 0, 0.2); -} - -html.darkmode .duolingo-streak.not-done { - color: #aaa; - background: rgba(255, 255, 255, 0.08); -} - -html.darkmode .duolingo-streak.not-done:hover { - background: rgba(255, 255, 255, 0.12); -} - -html.darkmode .leftbar-mobile-user-name .duolingo-streak { - background: linear-gradient(135deg, rgba(255, 150, 0, 0.3) 0%, rgba(255, 100, 0, 0.25) 100%); - border: 1px solid rgba(255, 150, 0, 0.4); - box-shadow: 0 2px 8px rgba(255, 150, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15); -} - -html.darkmode .leftbar-mobile-user-name .duolingo-streak.not-done { - background: rgba(255, 255, 255, 0.12); - border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); - color: rgba(255, 255, 255, 0.75); + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); } @@ -11884,7 +13082,7 @@ img { .friend-link-desc { font-size: 12px; - color: #666; + color: #999; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; @@ -12519,8 +13717,7 @@ html.darkmode { } .card:hover { - box-shadow: var(--m3-elevation-1) !important; - transform: none; + box-shadow: var(--m3-elevation-2) !important; } /* M3 文章卡片 */ @@ -12530,8 +13727,8 @@ article.post.card { } article.post.card:hover { - box-shadow: var(--m3-elevation-1) !important; - transform: none; + transform: translateY(-2px); + box-shadow: var(--m3-elevation-3) !important; } /* M3 按钮样式 */ @@ -12673,7 +13870,7 @@ article.post.card:hover { .site-state-item-name { display: block; font-size: 12px; - color: #666; + color: #888; margin-top: 2px; } @@ -13159,7 +14356,7 @@ article .post-content a:hover { #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: #777; + color: #999; } /* 2. 移动端侧边栏按钮修复 */ @@ -13323,9 +14520,8 @@ article.post.card { article.post.card:hover { box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.04), - 0 1px 2px rgba(0, 0, 0, 0.06); - transform: none; + 0 4px 12px rgba(0, 0, 0, 0.06), + 0 12px 28px rgba(var(--themecolor-rgbstr), 0.08); } /* 文章导航卡片透明度 */ @@ -13351,6 +14547,15 @@ article.post.card:hover { filter: brightness(1.1); } +/* 文章预览卡片缩略图优化 */ +.post-thumbnail { + transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +article.post.card:hover .post-thumbnail { + transform: scale(1.03); +} + /* 侧边栏卡片优化 */ #leftbar .card, #leftbar_part1, @@ -13746,10 +14951,12 @@ html.darkmode .card { /* 卡片悬浮提升效果 */ article.post.card { - transition: box-shadow var(--animation-normal) var(--ease-standard); + transition: transform var(--animation-normal) var(--ease-spring), + box-shadow var(--animation-normal) var(--ease-standard); } article.post.card:hover { + transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 20px 40px rgba(var(--themecolor-rgbstr), 0.06), @@ -13798,39 +15005,6 @@ html.darkmode article.post.card:hover { transition: transform 0s, opacity 0s; } -/* 触摸涟漪效果样式 */ -.touch-ripple { - position: absolute; - border-radius: 50%; - background: rgba(255, 255, 255, 0.4); - transform: scale(0); - animation: touch-ripple-animation 0.6s ease-out; - pointer-events: none; -} - -@keyframes touch-ripple-animation { - to { - transform: scale(4); - opacity: 0; - } -} - -/* 为涟漪效果目标元素预设样式，防止触摸时布局突变 */ -.btn, -.card:not(article.post):not(#comments):not(#post_comment):not(.related-posts):not(.post-navigation):not(#footer), -.nav-link, -.dropdown-item, -.page-link, -.leftbar-mobile-menu-item > a, -.leftbar-mobile-action, -.fabtn, -.comment-reply, -.tag, -.badge { - position: relative; - overflow: hidden; -} - /* 输入框 Apple 风格 */ .form-control { border: 1px solid rgba(0, 0, 0, 0.1); @@ -14124,7 +15298,7 @@ html.darkmode ::-webkit-scrollbar-thumb:hover { /* 移动端响应式调整 */ @media (max-width: 768px) { article.post.card:hover { - transform: none; + transform: translateY(-2px); } } @@ -15124,11 +16298,18 @@ html.darkmode { /* 2. 桌面端卡片悬停效果增强 */ @media (hover: hover) and (pointer: fine) { article.post.card { - transition: box-shadow var(--animation-normal) var(--ease-standard); + transition: transform var(--animation-normal) var(--ease-out-expo), box-shadow var(--animation-normal) var(--ease-standard); } article.post.card:hover { + transform: translateY(-6px) scale(1.005); box-shadow: var(--shadow-hover); } + article.post.card .post-thumbnail { + transition: transform var(--animation-slow) var(--ease-out-expo); + } + article.post.card:hover .post-thumbnail { + transform: scale(1.05); + } .card:not(article):not(.no-hover-effect) { transition: transform var(--animation-normal) var(--ease-standard), box-shadow var(--animation-normal) var(--ease-standard); } @@ -15230,34 +16411,11 @@ article img, .post-thumbnail img { transition: opacity var(--animation-normal) v 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), transform var(--animation-fast) var(--ease-standard); - border-radius: var(--card-radius-sm); -} -.form-control:focus { - box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.15), 0 1px 3px rgba(0, 0, 0, 0.08); - border-color: var(--themecolor); - transform: translateY(-1px); -} +.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: #777; - background: var(--color-foreground); - padding: 0 4px; - border-radius: 2px; -} -.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); - font-weight: 600; -} +.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; } @@ -15268,7 +16426,7 @@ article img.loaded, .post-thumbnail img.loaded, article img:not([loading="lazy"] /* 9. 移动端触摸优化 */ @media (hover: none) and (pointer: coarse) { - article.post.card:hover { box-shadow: var(--shadow-1); } + article.post.card:hover { transform: none; box-shadow: var(--shadow-1); } * { -webkit-tap-highlight-color: transparent; } }