From 5264a8df6dae7077abefcf6f716baa39941add47 Mon Sep 17 00:00:00 2001 From: nanhaoluo <3075912108@qq.com> Date: Tue, 20 Jan 2026 16:18:35 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style.css | 2240 +++++++++++++---------------------------------------- 1 file changed, 542 insertions(+), 1698 deletions(-) diff --git a/style.css b/style.css index 2bcd4ea..6a7690b 100644 --- a/style.css +++ b/style.css @@ -50,7 +50,6 @@ 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%); @@ -186,21 +185,13 @@ 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; /* ========== 统一动画系统 - 桌面端和移动端一致 ========== */ @@ -234,25 +225,15 @@ 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; } @@ -262,27 +243,18 @@ 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; } @@ -292,21 +264,13 @@ 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)); } @@ -314,27 +278,18 @@ 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)); } @@ -426,8 +381,8 @@ html.theme-transitioning *::after { :root { - --card-radius: 4px; - + --card-radius-sm: calc(var(--card-radius) * 0.75); + --card-radius-lg: calc(var(--card-radius) * 1.5); --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; @@ -437,7 +392,6 @@ html.theme-transitioning *::after { html.themecolor-toodark.darkmode { --themecolor: #5e72e4 !important; - --themecolor-light: #8a98eb !important; } @@ -445,13 +399,9 @@ html.themecolor-toodark.darkmode { body { - background: var(--color-background) !important; - font-family: var(--font); - overflow: overlay; - } a { @@ -461,31 +411,22 @@ a { } audio, - canvas, - progress, - video { - display: inline-block; - vertical-align: baseline; - } article .post-content { - margin-top: 6px; + margin-top: 4px; } article .post-content p { - line-height: 1.8; - word-wrap: break-word; - } article h1, @@ -507,21 +448,13 @@ article strong { } article h1, - article h2, - article h3, - article h4, - article h5, - article h6 { - margin-top: 18px !important; - margin-bottom: 15px; - } article h1 { @@ -561,23 +494,15 @@ 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 { @@ -597,9 +522,7 @@ article .wp-block-image figcaption, .shuoshuo-preview-container .wp-block-image figcaption { text-align: center; - font-size: 14px; - opacity: 0.6; } @@ -609,7 +532,6 @@ article video, .shuoshuo-preview-container video { max-width: 100%; - outline: none; } @@ -631,25 +553,15 @@ 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; } @@ -679,33 +591,19 @@ 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; } @@ -713,11 +611,8 @@ 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); } @@ -725,11 +620,8 @@ article .post-content blockquote { article .post-content mark { padding: 2px; - margin: 0 5px; - background: #fffdd1; - border-bottom: 1px solid #ffedce; } @@ -739,7 +631,6 @@ article .post-content u, article .post-content ins { text-decoration: none; - border-bottom: 1px solid; } @@ -751,17 +642,11 @@ 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; } @@ -777,9 +662,7 @@ article .post-content > p > code:not([hljs-codeblock-inner]) { article .post-content abbr[title] { text-decoration: none; - cursor: help; - border-bottom: 1px dotted; } @@ -787,13 +670,9 @@ article .post-content abbr[title] { article .post-content kbd { padding: 2px 6px; - font-size: 90%; - color: #fff; - background-color: #333; - border-radius: 3px; } @@ -819,11 +698,8 @@ 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; } @@ -847,7 +723,6 @@ article .wp-block-cover .wp-block-cover__inner-container { article table { max-width: 100%; - word-break: break-word; } @@ -865,9 +740,7 @@ article table > thead > tr > td, article table > thead > tr > th { padding: 1rem; - vertical-align: top; - border: 1px solid var(--color-border-on-foreground-deeper); } @@ -905,7 +778,6 @@ article hr, article .wp-block-separator { border-top: 0.0625rem solid var(--color-border-on-foreground-deeper); - border-bottom: none; } @@ -913,9 +785,7 @@ article .wp-block-separator { ::-webkit-scrollbar { width: 10px; - height: 8px; - background-color: rgba(0, 0, 0, 0); } @@ -929,11 +799,8 @@ 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; } @@ -1011,21 +878,13 @@ 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; } @@ -1033,7 +892,6 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h1:after { width: 45px; - height: 13px; } @@ -1041,7 +899,6 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h2:after { width: 40px; - height: 11px; } @@ -1049,7 +906,6 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h3:after { width: 30px; - height: 9px; } @@ -1079,7 +935,6 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h3[class*="text-align-center"]:after { left: 50%; - transform: translateX(-50%); } @@ -1109,7 +964,6 @@ html.use-big-shadow *.shadow-sm { .article-header-style-1 article h3[class*="text-align-right"]:after { left: unset; - right: -2px; } @@ -1121,21 +975,13 @@ 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; } @@ -1143,7 +989,6 @@ html.use-big-shadow *.shadow-sm { .article-header-style-2 article h1:before { height: 25px; - transform: translateY(-1px); } @@ -1151,7 +996,6 @@ html.use-big-shadow *.shadow-sm { .article-header-style-2 article h2:before { height: 20px; - transform: translateY(-2px); } @@ -1159,7 +1003,6 @@ html.use-big-shadow *.shadow-sm { .article-header-style-2 article h3:before { height: 16px; - transform: translateY(-1px); } @@ -1227,19 +1070,24 @@ 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 0 rgba(var(--themecolor-rgbstr), 0.5) !important; + box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08), 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.2) !important; color: #fff !important; } @@ -1249,35 +1097,42 @@ 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 0 rgba(var(--themecolor-rgbstr), 0.5) !important; + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.2) !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 0 rgba(var(--themecolor-rgbstr), 0.5) !important; + box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.15) !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, @@ -1286,12 +1141,14 @@ 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); } /* 链接按钮和中性按钮主题色覆盖 */ @@ -1320,7 +1177,6 @@ a.text-primary:hover { .custom-control-input:not(:disabled):active ~ .custom-control-label::before { border-color: var(--themecolor) !important; - background-color: var(--themecolor); } @@ -1330,11 +1186,8 @@ a.text-primary:hover { #content { padding: 0 5px; - max-width: 1200px; - margin: auto; - margin-top: -30vh; } @@ -1376,7 +1229,6 @@ html.is-home.banner-as-cover #content { #primary { width: calc(100% - 280px); - float: right; } @@ -1384,13 +1236,9 @@ html.is-home.banner-as-cover #content { #leftbar { padding-left: 20px; - padding-right: 20px; - width: 280px; - float: left; - margin-bottom: 25px; } @@ -1398,9 +1246,7 @@ html.is-home.banner-as-cover #content { #main { padding: 0 20px; - overflow: visible; - position: relative; } @@ -1470,11 +1316,8 @@ html.single-column #leftbar { html.single-column #primary { width: 100%; - float: none; - max-width: 1200px; - margin: auto; } @@ -1501,11 +1344,8 @@ html.single-column #main { html.single-column .page-information-card { width: 100%; - max-width: 1200px; - margin-left: auto; - margin-right: auto; } @@ -1522,13 +1362,9 @@ html.single-column .page-information-card { #rightbar { padding-left: 0; - padding-right: 0; - width: 280px; - float: right; - margin-bottom: 25px; } @@ -1536,11 +1372,8 @@ html.single-column .page-information-card { #rightbar > .card { margin-left: 10px; - margin-right: 20px; - margin-bottom: 15px; - padding: 20px 25px; } @@ -1548,7 +1381,6 @@ html.single-column .page-information-card { #rightbar > .card ul { list-style: none; - padding-inline-start: 0; } @@ -1625,7 +1457,7 @@ html.triple-column #content { opacity: 0; - transform: scale(0.95) translateY(8px); + transform: scale(0.96) translateY(12px); } @@ -1648,8 +1480,9 @@ 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); } @@ -1659,6 +1492,12 @@ 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 { @@ -1732,7 +1571,6 @@ html.darkmode #navbar-main { .navbar-brand { text-transform: none; - vertical-align: middle; } @@ -1754,13 +1592,9 @@ 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); } @@ -1768,7 +1602,6 @@ html.darkmode #navbar-main { #navbar-main.navbar-ontop { padding-top: 1rem; - padding-bottom: 1rem; } @@ -1790,11 +1623,8 @@ 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); } @@ -1814,9 +1644,7 @@ 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); } @@ -1826,7 +1654,6 @@ 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; } @@ -1834,7 +1661,6 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container:not(.open) .input-group-text { background: transparent; - color: #fff; } @@ -1842,9 +1668,7 @@ 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); } @@ -1866,9 +1690,7 @@ 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; } @@ -1876,9 +1698,7 @@ 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); } @@ -1886,7 +1706,6 @@ 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); } @@ -1922,7 +1741,6 @@ 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); } @@ -1948,7 +1766,6 @@ html.navbar-absolute #navbar-main { html.navbar-absolute:not(.no-banner) #navbar-main { background-color: transparent; - box-shadow: none; } @@ -1962,7 +1779,6 @@ 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%); @@ -1971,7 +1787,6 @@ 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); } @@ -1979,15 +1794,10 @@ 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; } @@ -2001,17 +1811,11 @@ 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; } @@ -2019,9 +1823,7 @@ html.no-banner.toolbar-blur #navbar-main.navbar-no-blur { .banner-subtitle { margin-top: 10px; - font-size: 16px; - opacity: 0.9; } @@ -2031,21 +1833,13 @@ 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); } @@ -2053,11 +1847,8 @@ 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; } @@ -2117,9 +1908,7 @@ html.banner-mini .banner > .banner-container { html.banner-mini .banner > .banner-container > .banner-title { position: unset; - top: unset; - transform: unset; } @@ -2139,23 +1928,14 @@ 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; } @@ -2163,7 +1943,6 @@ html.is-home.banner-as-cover.banner-as-cover .banner-container { html:not(.is-home) .cover-scroll-down { opacity: 0; - pointer-events: none; } @@ -2171,7 +1950,6 @@ html:not(.is-home) .cover-scroll-down { .cover-scroll-down.hidden { opacity: 0; - pointer-events: none; } @@ -2185,9 +1963,7 @@ 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; } @@ -2195,7 +1971,6 @@ html:not(.is-home) .cover-scroll-down { .leftbar-banner-title { font-size: 20px; - display: block; } @@ -2203,13 +1978,9 @@ html:not(.is-home) .cover-scroll-down { .leftbar-banner-subtitle { margin-top: 15px; - margin-bottom: 8px; - font-size: 13px; - opacity: 0.8; - display: block; } @@ -2219,11 +1990,8 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu { margin-top: 10px; - margin-left: 0; - margin-right: 0; - padding: 0; } @@ -2231,13 +1999,9 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu-item { height: 36px; - line-height: 36px; - list-style: none; - padding: 0; - position: relative; } @@ -2245,9 +2009,7 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu-item:hover > .leftbar-menu-subitem { opacity: 1; - transform: none; - pointer-events: unset; } @@ -2255,31 +2017,18 @@ 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; } @@ -2287,17 +2036,11 @@ 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; } @@ -2311,7 +2054,6 @@ html:not(.is-home) .cover-scroll-down { #leftbar_part1_menu > .leftbar-menu-item > .leftbar-menu-subitem:before { width: 12px; - left: -12px; } @@ -2331,31 +2073,18 @@ 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); } @@ -2371,9 +2100,7 @@ html:not(.is-home) .cover-scroll-down { .leftbar-menu-item > a > i { margin-right: 8px; - width: 15px; - text-align: center; } @@ -2381,31 +2108,18 @@ 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; } @@ -2415,7 +2129,6 @@ html:not(.is-home) .cover-scroll-down { .leftbar-search-button { padding-top: 0; - transition: all 0.3s cubic-bezier(0.4, 0, 0, 1); } @@ -2423,7 +2136,6 @@ html:not(.is-home) .cover-scroll-down { .leftbar-search-button.open { padding: 0 15px 18px 15px; - margin-top: -9px; } @@ -2433,15 +2145,10 @@ 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); } @@ -2467,21 +2174,13 @@ 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; } @@ -2489,11 +2188,8 @@ 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); } @@ -2503,7 +2199,6 @@ html.darkmode.amoled-dark #leftbar_search_container { #leftbar_part2 { margin-top: 10px; - transition: all var(--animation-normal) var(--ease-standard); } @@ -2511,9 +2206,7 @@ html.darkmode.amoled-dark #leftbar_search_container { #leftbar_part2.sticky { position: fixed; - width: 240px; - top: 80px; } @@ -2551,7 +2244,6 @@ html.navbar-absolute #leftbar_part2.sticky { #leftbar_part2_inner::-webkit-scrollbar-thumb { border-width: 1px; - background-color: rgba(0, 0, 0, 0.2); } @@ -2559,7 +2251,6 @@ 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); } @@ -2567,7 +2258,6 @@ html.darkmode #leftbar_part2_inner::-webkit-scrollbar-thumb { #leftbar_part2_inner::-webkit-scrollbar-button { height: 5px; - pointer-events: none; } @@ -2575,7 +2265,6 @@ html.darkmode #leftbar_part2_inner::-webkit-scrollbar-thumb { .sidebar-tab-switcher { font-size: 13px; - padding: 0 !important; } @@ -2583,9 +2272,7 @@ 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); } @@ -2607,17 +2294,11 @@ 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); } @@ -2625,7 +2306,6 @@ html.darkmode .sidebar-tab-switcher > a.active { #leftbar_overview_author_name { margin-top: 15px; - font-size: 18px; } @@ -2633,9 +2313,7 @@ html.darkmode .sidebar-tab-switcher > a.active { #leftbar_overview_author_description { font-size: 14px; - margin-top: -4px; - opacity: 0.8; } @@ -2643,13 +2321,9 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-state { overflow: hidden; - line-height: 1.4; - white-space: nowrap; - text-align: center; - margin-top: 15px; } @@ -2657,9 +2331,7 @@ 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; } @@ -2679,13 +2351,9 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-state-item-count { display: block; - text-align: center; - color: #32325d; - font-weight: bold; - font-size: 16px; } @@ -2693,27 +2361,19 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-state-item-name { font-size: 13px; - - color: #525f82; + color: #3d4a6b; } .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; } @@ -2727,7 +2387,6 @@ html.darkmode .sidebar-tab-switcher > a.active { .tag-num { font-size: 12px; - opacity: 0.7; } @@ -2735,11 +2394,8 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-author-links { display: flex; - flex-wrap: wrap; - justify-content: left; - margin-top: 15px; } @@ -2747,15 +2403,10 @@ 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; } @@ -2769,21 +2420,13 @@ 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; } @@ -2791,9 +2434,7 @@ 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; } @@ -2801,7 +2442,6 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-friend-links-ul { margin-top: 8px; - padding: 3px 0 0; } @@ -2809,11 +2449,8 @@ html.darkmode .sidebar-tab-switcher > a.active { .site-friend-links-item { margin: 0; - padding: 0; - list-style: none; - margin-bottom: 3px; } @@ -2821,21 +2458,13 @@ 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; } @@ -2843,7 +2472,6 @@ html.darkmode .sidebar-tab-switcher > a.active { #leftbar_announcement { margin-bottom: 10px; - background: var(--themecolor-gradient); } @@ -2857,7 +2485,6 @@ html.darkmode #leftbar_announcement { .leftbar-announcement-body { padding: 15px 1.2em; - padding-bottom: 22px; } @@ -2871,11 +2498,8 @@ html.darkmode #leftbar_announcement { .leftbar-announcement-content { font-size: 15px; - line-height: 1.8; - padding-top: 8px; - opacity: 0.9; } @@ -2885,7 +2509,6 @@ html.darkmode #leftbar_announcement { #leftbar_tab_tools ol { list-style: none; - padding: 0; } @@ -2893,9 +2516,7 @@ html.darkmode #leftbar_announcement { #leftbar_tab_tools ul li { padding-top: 10px; - padding-bottom: 10px; - border-bottom: var(--color-border-on-foreground) solid 1px; } @@ -2911,13 +2532,9 @@ 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; } @@ -2927,25 +2544,15 @@ 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; } @@ -2953,9 +2560,7 @@ html.darkmode #leftbar_announcement { .wp-calendar-table caption { font-size: 14px; - text-align: center; - opacity: 0.7; } @@ -2963,11 +2568,8 @@ html.darkmode #leftbar_announcement { .wp-block-calendar table * { background: transparent !important; - border: none !important; - padding-top: 5px; - padding-bottom: 8px; } @@ -2981,7 +2583,6 @@ html.darkmode #leftbar_announcement { .wp-block-calendar tbody td a { position: relative; - text-decoration: none; } @@ -2989,23 +2590,14 @@ 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; } @@ -3015,19 +2607,12 @@ 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; } @@ -3037,9 +2622,7 @@ 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; } @@ -3047,17 +2630,11 @@ 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; } @@ -3075,29 +2652,17 @@ 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; } @@ -3117,20 +2682,22 @@ html.darkmode .wp-block-calendar tbody td { /* 容器样式 */ #float_action_buttons { position: fixed; + top: auto; bottom: 35px; right: 20px; - z-index: 1000; + left: auto; display: flex; flex-direction: column; align-items: center; - transition: - opacity var(--animation-normal) var(--ease-standard), - transform var(--animation-normal) var(--ease-standard); + gap: 8px; + z-index: 10002; + transition: all var(--animation-normal) var(--ease-standard); } #float_action_buttons.fabtns-float-left { left: 20px; right: auto; + align-items: center; } #float_action_buttons.fabtns-float-left .fabtn-show-on-right { @@ -3155,152 +2722,162 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { } /* 基础按钮样式 - 重置所有 Bootstrap 样式 */ -#float_action_buttons .fabtn, -#float_action_buttons .fabtn.btn, -#float_action_buttons .fabtn.btn-icon, -#float_action_buttons .fabtn.btn-neutral, -#float_action_buttons button.fabtn { - width: 44px !important; - height: 44px !important; - min-width: 44px !important; - min-height: 44px !important; - max-width: 44px !important; - max-height: 44px !important; - padding: 0 !important; - margin: 5px 0 !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - position: relative; +.fabtn { + width: 42px; + height: 42px; + padding: 0; overflow: visible; + display: block; + margin: 0; + flex-shrink: 0; border: none !important; - border-radius: var(--card-radius) !important; + transition: all var(--animation-normal) var(--ease-standard); background-color: var(--color-foreground) !important; color: var(--themecolor) !important; - box-shadow: - 0 2px 8px rgba(0, 0, 0, 0.08), - 0 4px 16px rgba(0, 0, 0, 0.04); - cursor: pointer; - transition: - background-color var(--animation-fast) var(--ease-standard), - color var(--animation-fast) var(--ease-standard), - transform var(--animation-normal) var(--ease-spring), - box-shadow var(--animation-normal) var(--ease-standard), - opacity var(--animation-fast) var(--ease-standard); } -#float_action_buttons .fabtn:first-child { - margin-top: 0 !important; -} - -#float_action_buttons .fabtn:hover { +.fabtn:hover { color: #fff !important; background-color: var(--themecolor) !important; - transform: translateY(-3px) scale(1.05); - box-shadow: - 0 6px 20px rgba(var(--themecolor-rgbstr), 0.35), - 0 12px 28px rgba(var(--themecolor-rgbstr), 0.2) !important; } -#float_action_buttons .fabtn:active { +.fabtn:active { color: #fff !important; background-color: var(--themecolor-dark) !important; - transform: translateY(-1px) scale(0.98); - box-shadow: - 0 2px 8px rgba(var(--themecolor-rgbstr), 0.25) !important; } -/* 按钮内图标居中 */ -#float_action_buttons .fabtn .btn-inner--icon { - display: flex !important; - align-items: center !important; - justify-content: center !important; - width: 100%; - height: 100%; -} - -#float_action_buttons .fabtn i { - font-size: 16px; - line-height: 1; -} - -/* 隐藏状态 */ -#float_action_buttons .fabtn.fabtn-hidden { - width: 0 !important; +.fabtn.fabtn-hidden { height: 0 !important; - min-width: 0 !important; - min-height: 0 !important; - max-width: 0 !important; - max-height: 0 !important; - opacity: 0 !important; - margin: 0 !important; - padding: 0 !important; - box-shadow: none !important; - pointer-events: none !important; - transform: scale(0) !important; - overflow: hidden !important; + opacity: 0; + margin-top: 0; + box-shadow: none; + pointer-events: none; } -/* 左右切换按钮 - 尺寸较小 */ -#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; +#fabtn_toggle_sides { + height: 30px !important; + transform: translateY(8px); + opacity: 0; } -#float_action_buttons #fabtn_toggle_sides:hover { +#float_action_buttons:hover #fabtn_toggle_sides { + height: 30px !important; + transform: translateY(0px); opacity: 1; } -/* 阅读进度按钮 */ -#float_action_buttons #fabtn_reading_progress { - overflow: visible; - font-size: 11px; - font-weight: 600; +#fabtn_reading_progress { + height: 30px; } #float_action_buttons #fabtn_reading_progress_bar { position: absolute; left: 0; top: 0; - width: 0; height: 100%; - border-radius: var(--card-radius); + border-radius: 4px; background: var(--themecolor); - opacity: 0.12; - transition: width var(--animation-fast) var(--ease-standard); - pointer-events: none; + opacity: 0.08; } -#float_action_buttons #fabtn_reading_progress_details { - position: relative; - z-index: 1; -} - -/* 夜间模式按钮图标切换 */ -#float_action_buttons #fabtn_toggle_darkmode i.fa { +#fabtn_toggle_darkmode i.fa { margin: 0; } -#float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { +#fabtn_toggle_darkmode i.fa-lightbulb-o { display: none; } -html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-moon-o { +html.darkmode #fabtn_toggle_darkmode i.fa-moon-o { display: none; } -html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { +html.darkmode #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; @@ -3338,6 +2915,7 @@ html.darkmode #float_action_buttons #fabtn_toggle_darkmode i.fa-lightbulb-o { 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 { @@ -3439,37 +3017,21 @@ 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; } @@ -3483,7 +3045,6 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { #blog_setting_toggle_darkmode_and_amoledarkmode:hover:before { transform: translateX(-50%); - opacity: 0.7; } @@ -3493,7 +3054,6 @@ html.amoled-dark #blog_setting_toggle_darkmode_and_amoledarkmode:before { .blog-setting-shadow { text-transform: none; - padding: 3px 10px; } @@ -3512,11 +3072,8 @@ 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; @@ -3534,13 +3091,9 @@ 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; @@ -3558,7 +3111,6 @@ 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); @@ -3568,7 +3120,6 @@ 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); @@ -3578,7 +3129,6 @@ 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); @@ -3588,7 +3138,6 @@ 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); @@ -3598,23 +3147,15 @@ 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); } @@ -3630,7 +3171,6 @@ html.use-big-shadow #blog_setting_shadow_big { #blog_setting_filter_off { background: rgba(var(--themecolor-rgbstr), 0.05); - color: var(--themecolor); } @@ -3638,7 +3178,6 @@ html.use-big-shadow #blog_setting_shadow_big { #blog_setting_filter_sunset { background: rgba(255, 255, 200, 1); - color: #6e5a00; } @@ -3646,7 +3185,6 @@ html.use-big-shadow #blog_setting_shadow_big { #blog_setting_filter_darkness { background: rgba(80, 80, 80, 0.7); - color: #eee; } @@ -3654,7 +3192,6 @@ html.use-big-shadow #blog_setting_shadow_big { #blog_setting_filter_grayscale { background: rgba(200, 200, 200, 0.8); - color: #333; } @@ -3733,25 +3270,15 @@ 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; } @@ -3771,37 +3298,21 @@ 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; } @@ -3809,7 +3320,6 @@ html.filter-grayscale { #blog_setting_card_radius_to_default:hover:before { transform: translateX(-50%); - opacity: 0.7; } @@ -3819,15 +3329,10 @@ html.filter-grayscale { .pagination { width: max-content; - width: -moz-max-content; - padding-top: 15px; - padding-bottom: 15px; - margin: auto; - margin-bottom: 25px; } @@ -3850,11 +3355,9 @@ html.filter-grayscale { .post { - margin-bottom: 25px; - - padding: 30px 30px; - - padding-bottom: 35px; + margin-bottom: 16px; + padding: 24px 24px; + padding-bottom: 28px; } @@ -3867,9 +3370,7 @@ html.filter-grayscale { .post-preview .loading-css-animation { padding-top: 20px; - padding-bottom: 10px; - width: 100%; } @@ -3883,7 +3384,6 @@ html.filter-grayscale { .post-list-pjax-loading .post-preview { opacity: 0; - pointer-events: none; } @@ -3891,9 +3391,7 @@ html.filter-grayscale { .post-title { font-size: 26px; - letter-spacing: 0.5px; - transition: all var(--animation-normal) var(--ease-standard); } @@ -3907,7 +3405,6 @@ html.filter-grayscale { #main.waterflow .post-title { transition: all var(--animation-normal) var(--ease-standard); - display: inline-block; } @@ -3915,33 +3412,28 @@ html.filter-grayscale { #main.waterflow .post-title:hover { letter-spacing: 0.5px; - transform: scale(1.02); - text-rendering: optimizeLegibility; } .post-header { - margin-bottom: 20px; + margin-bottom: 16px; } .post-meta { - margin-top: 10px; + margin-top: 6px; } .post-meta-detail { font-size: 14.5px; - line-height: 24px; - opacity: 0.8; - display: inline-block; } @@ -3955,17 +3447,11 @@ 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; } @@ -3973,19 +3459,15 @@ html.filter-grayscale { .post-meta-detail-categories-space { margin-left: 2px; - margin-right: 2px; } .post-header.post-header-with-thumbnail { - margin: -30px -30px 35px -30px; - + margin: -24px -24px 28px -24px; border-radius: var(--card-radius) var(--card-radius) 0 0; - overflow: hidden; - position: relative; } @@ -3993,13 +3475,9 @@ html.filter-grayscale { .post-thumbnail { width: 100%; - min-height: 250px; - max-height: 25vh; - object-fit: cover; - pointer-events: none; } @@ -4014,7 +3492,6 @@ html.filter-grayscale { .page .post-thumbnail { max-height: 30vh; - min-height: 250px; } @@ -4022,23 +3499,14 @@ 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: 35px; - - padding-top: 35px; - + padding-bottom: 28px; + padding-top: 28px; background: rgba(0, 0, 0, 0.05); - background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0)); } @@ -4062,15 +3530,10 @@ html.filter-grayscale { .post-outdated-info { color: var(--themecolor); - border-left: 2px solid var(--themecolor); - padding: 5px 20px; - margin-top: 10px; - - margin-bottom: 25px; - + margin-bottom: 20px; background: rgba(var(--themecolor-rgbstr), 0.1); } @@ -4078,9 +3541,7 @@ html.filter-grayscale { .post-outdated-info > i { font-size: 20px; - margin-right: 15px; - transform: translateY(2px); } @@ -4093,9 +3554,8 @@ html.filter-grayscale { .post-content { - line-height: 1.8; - - margin-bottom: 10px; + line-height: 1.7; + margin-bottom: 8px; } @@ -4107,8 +3567,7 @@ html.filter-grayscale { .post-tags { - margin-top: 15px; - + margin-top: 12px; margin-bottom: -4px; } @@ -4122,9 +3581,7 @@ html.filter-grayscale { .tag.post-meta-detail-tag { margin-bottom: 4px; - margin-right: 7px; - font-size: 12px; } @@ -4140,13 +3597,9 @@ html.filter-grayscale { article.post-preview-layout-2 { display: flex; - flex-direction: row; - padding: 0; - min-height: 200px; - overflow: visible; } @@ -4154,17 +3607,11 @@ 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; } @@ -4172,29 +3619,20 @@ 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: 20px 28px; - + padding: 18px 24px; flex: 1; - display: flex; - flex-direction: column; - max-width: 100%; - overflow: hidden; } @@ -4202,15 +3640,10 @@ article.post-preview-layout-2 .post-content-container { article.post-preview-layout-2 .post-content { flex: 1; - - margin-top: 10px; - + margin-top: 6px; display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; } @@ -4224,7 +3657,6 @@ article.post-preview-layout-2 .post-title { article.post-preview-layout-2 .loading-css-animation { position: absolute; - bottom: -8px; } @@ -4233,13 +3665,13 @@ article.post-preview-layout-2 .loading-css-animation { article.post-preview-layout-3 .post-header { - margin-bottom: 10px; + margin-bottom: 8px; } article.post-preview-layout-3 .post-header.post-header-with-thumbnail { - margin-bottom: 25px; + margin-bottom: 20px; } @@ -4254,9 +3686,7 @@ article.post-preview-layout-3 .post-thumbnail { sup.reference { white-space: nowrap; - transition: box-shadow 0.3s ease; - border-radius: 1px; } @@ -4264,7 +3694,6 @@ 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; } @@ -4272,7 +3701,6 @@ sup.reference:focus { .tippy-box[data-theme~="scroll-y"] .tippy-content { max-height: 200px; - overflow-y: auto; } @@ -4324,7 +3752,6 @@ sup.reference:focus { html.darkmode .tippy-box[data-theme~="light"] { color: #eee; - background-color: var(--color-widgets); } @@ -4332,11 +3759,8 @@ html.darkmode .tippy-box[data-theme~="light"] { .reference-list { padding-left: 0; - list-style: inside none; - counter-reset: ol; - margin-bottom: 0; } @@ -4344,9 +3768,7 @@ html.darkmode .tippy-box[data-theme~="light"] { .reference-list li { font-size: 14px; - position: relative; - display: flex; } @@ -4360,25 +3782,15 @@ 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; } @@ -4392,11 +3804,8 @@ html.darkmode .tippy-box[data-theme~="light"] { .reference-list li:before { text-align: right; - counter-increment: ol; - content: counter(ol) ". "; - white-space: pre; } @@ -4424,7 +3833,6 @@ html.darkmode .tippy-box[data-theme~="light"] { .post-password-form { margin-top: 45px; - margin-bottom: 55px; } @@ -4432,7 +3840,6 @@ html.darkmode .tippy-box[data-theme~="light"] { .post-password-form-text { margin: auto; - margin-bottom: 15px; } @@ -4440,7 +3847,6 @@ html.darkmode .tippy-box[data-theme~="light"] { .post-password-form-input { margin: auto; - margin-bottom: 20px; } @@ -4448,9 +3854,7 @@ html.darkmode .tippy-box[data-theme~="light"] { .post-password-hint { margin-top: 10px; - color: var(--themecolor); - opacity: 0.9; } @@ -4490,13 +3894,9 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { #leftbar_catalog .index-link { width: 100%; - display: block; - color: #32325d; - text-decoration: none; - box-sizing: border-box; } @@ -4504,17 +3904,11 @@ 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; } @@ -4522,7 +3916,6 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { #leftbar_catalog .index-item.current > .index-link { color: var(--themecolor); - font-weight: bold; } @@ -4546,9 +3939,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .page-information-card { margin: 30px 20px; - margin-top: 0px; - background: var(--color-foreground) !important; } @@ -4556,7 +3947,6 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .search-filter-wrapper { display: inline-block; - margin-right: 12px; } @@ -4573,14 +3963,10 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .post-navigation { - margin-bottom: 25px; - - padding: 30px 25px; - - padding-top: 25px; - + margin-bottom: 16px; + padding: 24px 20px; + padding-top: 20px; font-size: 18px; - display: block !important; } @@ -4588,9 +3974,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .post-navigation-item { width: calc(50%); - display: inline-block; - vertical-align: top; } @@ -4598,11 +3982,8 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .page-navigation-extra-text { font-size: 22px; - opacity: 0.85; - display: block; - margin-bottom: 15px; } @@ -4628,7 +4009,6 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .post-navigation-next { padding-left: 10px; - text-align: right; } @@ -4638,13 +4018,9 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-posts { display: block; - white-space: nowrap; - margin-bottom: 25px; - padding: 0; - padding-bottom: 0; } @@ -4652,27 +4028,16 @@ 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; } @@ -4680,9 +4045,7 @@ 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; } @@ -4696,15 +4059,10 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-card-container { position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - padding: 10px 15px; } @@ -4712,9 +4070,7 @@ 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; } @@ -4728,7 +4084,6 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-title { max-height: 81px; - overflow: hidden; } @@ -4736,13 +4091,9 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-arrow { position: absolute; - right: 15px; - bottom: 15px; - font-size: 15px; - pointer-events: none; } @@ -4750,9 +4101,7 @@ html.darkmode #leftbar_catalog::-webkit-scrollbar-thumb { .related-post-thumbnail { width: 100%; - height: 100%; - object-fit: cover; } @@ -4772,9 +4121,7 @@ img.related-post-thumbnail { html.darkmode a.related-post-card { background: var(--color-border-on-foreground-deeper); - opacity: 0.7; - border-radius: 5px; } @@ -4796,7 +4143,6 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .post-donate { text-align: center; - position: relative; } @@ -4814,29 +4160,17 @@ 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; } @@ -4844,7 +4178,6 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .post-donate .donate-btn:focus ~ .donate-qrcode { transform: translateX(-50%); - opacity: 1; } @@ -4852,9 +4185,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .post-donate .donate-btn { margin-right: 0; - margin-top: 20px; - margin-bottom: 30px; } @@ -4862,29 +4193,17 @@ 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); } @@ -4894,13 +4213,9 @@ 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; } @@ -4909,7 +4224,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments { - margin-bottom: 25px; + margin-bottom: 16px; } @@ -4974,7 +4289,6 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments > .card-body { transition: opacity 0.5s ease; - overflow: visible; } @@ -4982,7 +4296,6 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments.comments-loading > .card-body { opacity: 0.5; - pointer-events: none; } @@ -4990,7 +4303,6 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments li { list-style: none; - position: relative; } @@ -4998,29 +4310,17 @@ 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; } @@ -5028,9 +4328,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { #comments .comment-item:before{ animation: none; - opacity: 0; - transition: opacity 0.25s ease; } @@ -5090,9 +4388,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp { .comment-item { margin-bottom: 1px; - display: flex; - overflow: visible; } @@ -5480,11 +4776,8 @@ html.darkmode .comment-upvote:hover { .comment-item-text .comment-sticker { max-height: 60px; - transition: all 0.3s ease; - transition-delay: 0s; - transform: none; } @@ -5492,11 +4785,8 @@ 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); } @@ -5510,11 +4800,8 @@ html.darkmode .comment-upvote:hover { .comment-item-text .comment-image { color: var(--themecolor) !important; - cursor: pointer; - user-select: none; - position: relative; } @@ -5528,25 +4815,15 @@ 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; } @@ -5554,25 +4831,17 @@ 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; } @@ -5582,7 +4851,6 @@ html.darkmode .comment-upvote:hover { .comment-item-text strong { font-weight: 600; - opacity: 0.78; } @@ -5594,35 +4862,20 @@ 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; } @@ -5636,11 +4889,8 @@ 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); } @@ -5690,15 +4940,10 @@ 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; } @@ -5716,7 +4961,6 @@ html.darkmode .comment-item-text blockquote { .comment-item-text:hover h6 { font-weight: 600; - opacity: 0.8; } @@ -5762,7 +5006,6 @@ html.darkmode .comment-item-text blockquote { .comment-item-inner.comment-folded { max-height: 200px; - overflow: hidden; } @@ -5770,21 +5013,13 @@ 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; } @@ -5798,27 +5033,16 @@ 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; } @@ -5848,11 +5072,8 @@ html.darkmode .comment-item-text blockquote { #comments_more { width: 52px; - height: 52px; - display: block; - margin: 30px auto 10px auto; } @@ -5888,11 +5109,8 @@ html.darkmode .comment-item-text blockquote { .comments-navigation-more .comments-navigation-nomore { text-align: center; - margin-top: 30px; - margin-bottom: 10px; - opacity: 0.6; } @@ -5902,13 +5120,9 @@ 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; } @@ -5928,9 +5142,7 @@ html.darkmode .comment-edit-history-item { .comment-edit-history-id { font-size: 22px; - font-weight: bold; - display: inline-block; } @@ -5938,9 +5150,7 @@ html.darkmode .comment-edit-history-item { .comment-edit-history-title .badge { transform: translateY(-3px); - margin-left: 8px; - display: inline-block; } @@ -5948,9 +5158,7 @@ html.darkmode .comment-edit-history-item { .comment-edit-history-time { opacity: 0.6; - font-size: 15px; - margin-bottom: 12px; } @@ -5958,7 +5166,6 @@ html.darkmode .comment-edit-history-item { #comment_edit_history .modal-body .comment-edit-history-item:last-child { border: navajowhite; - padding-bottom: 0; } @@ -5967,7 +5174,7 @@ html.darkmode .comment-edit-history-item { #post_comment { - margin-bottom: 25px; + margin-bottom: 16px; } @@ -6167,19 +5374,12 @@ 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; @@ -6239,27 +5439,16 @@ 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; } @@ -6273,37 +5462,21 @@ 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; } @@ -6321,7 +5494,6 @@ html.darkmode .post-comment-reply-preview { .comment-post-checkbox:hover:before { transform: translateY(0); - opacity: 0.7; } @@ -6335,7 +5507,6 @@ html.darkmode .post-comment-reply-preview { #post_comment_toggle_extra_input:before { content: attr(tooltip-show-extra-field); - text-transform: none; } @@ -6349,7 +5520,6 @@ html.darkmode .post-comment-reply-preview { #post_comment_toggle_extra_input { border-radius: 100px; - padding: 5px 20px; } @@ -6371,9 +5541,7 @@ html.darkmode .post-comment-reply-preview { #post_comment.logged #post_comment_email { opacity: 1; - background-color: var(--color-widgets-disabled); - pointer-events: none; } @@ -6381,11 +5549,8 @@ html.darkmode .post-comment-reply-preview { .comment-post-checkbox { display: inline-block; - margin-top: 8px; - height: 28px; - margin-right: 8px; } @@ -6401,7 +5566,6 @@ html.darkmode .post-comment-reply-preview { #post_comment.post-comment-force-privatemode-on .comment-post-privatemode { opacity: 0.6; - pointer-events: none; } @@ -6409,11 +5573,8 @@ 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; } @@ -6427,7 +5588,6 @@ html.darkmode .post-comment-reply-preview { #post_comment.post-comment-force-privatemode-off .comment-post-privatemode { opacity: 0.6; - pointer-events: none; } @@ -6441,7 +5601,6 @@ 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; } @@ -6467,7 +5626,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri #post_comment.sending .comment-post-checkbox { opacity: 0.6; - pointer-events: none; } @@ -6475,7 +5633,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .comment-btn { margin-top: 0; - margin-right: 8px; } @@ -6497,7 +5654,6 @@ 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; } @@ -6513,31 +5669,18 @@ 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; } @@ -6550,7 +5693,6 @@ 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; @@ -6560,33 +5702,19 @@ 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; } @@ -6594,9 +5722,7 @@ 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; } @@ -6604,7 +5730,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-keyboard-content { flex: 1; - overflow-y: auto; } @@ -6612,7 +5737,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-group { padding: 15px 15px; - padding-bottom: 10px; } @@ -6620,21 +5744,13 @@ 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; } @@ -6642,7 +5758,6 @@ 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); } @@ -6650,13 +5765,9 @@ 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); } @@ -6670,7 +5781,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-item:hover { background: var(--themecolor); - color: #fff; } @@ -6682,11 +5792,8 @@ 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); } @@ -6694,9 +5801,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .emotion-group-description { text-align: right; - font-size: 14px; - opacity: 0.6; } @@ -6704,11 +5809,8 @@ 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); } @@ -6728,7 +5830,6 @@ 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; } @@ -6742,17 +5843,11 @@ 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); } @@ -6766,19 +5861,12 @@ 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; } @@ -6790,7 +5878,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .shortcode-todo { cursor: default; - margin: 3px 0; } @@ -6810,9 +5897,7 @@ 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; } @@ -6820,7 +5905,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .shortcode-todo.inline { display: inline-block; - margin-right: 10px; } @@ -6834,13 +5918,9 @@ 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; } @@ -6862,13 +5942,9 @@ 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; } @@ -6884,7 +5960,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .collapse-block-title { padding: 10px 15px; - font-weight: bold; } @@ -6892,7 +5967,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .collapse-block-title-inner { max-width: calc(100% - 20px); - display: inline-block; } @@ -6900,7 +5974,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .collapse-block-title { cursor: pointer; - position: relative; } @@ -6910,7 +5983,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .collapse-block-body { padding: 20px 15px; - padding-bottom: 20px; } @@ -7034,13 +6106,9 @@ 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; } @@ -7066,7 +6134,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links-simple .link .card img { border: none; - max-width: unset; } @@ -7074,9 +6141,7 @@ 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; } @@ -7094,9 +6159,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .friend-links .link { padding-left: 10px; - padding-right: 10px; - padding-bottom: 15px; } @@ -7104,11 +6167,8 @@ 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; } @@ -7124,15 +6184,10 @@ 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; } @@ -7140,15 +6195,10 @@ 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; } @@ -7162,15 +6212,10 @@ 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; } @@ -7178,11 +6223,8 @@ 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; } @@ -7190,21 +6232,13 @@ 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%); } @@ -7212,11 +6246,8 @@ 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; } @@ -7232,7 +6263,6 @@ 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; } @@ -7254,13 +6284,9 @@ 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; } @@ -7268,9 +6294,7 @@ 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; } @@ -7278,15 +6302,10 @@ 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; } @@ -7294,13 +6313,9 @@ 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; } @@ -7308,11 +6323,8 @@ 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; } @@ -7328,9 +6340,7 @@ 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; } @@ -7360,15 +6370,10 @@ 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; } @@ -7376,17 +6381,11 @@ 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; } @@ -7394,9 +6393,7 @@ 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; } @@ -7404,19 +6401,12 @@ 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%; } @@ -7424,9 +6414,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .argon-timeline-title { font-size: 17px; - font-weight: bold; - margin-bottom: 5px; } @@ -7456,9 +6444,7 @@ 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; } @@ -7466,9 +6452,7 @@ 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; } @@ -7480,13 +6464,9 @@ 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; } @@ -7506,7 +6486,6 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri .github-info-card-header a { color: #eee !important; - font-size: 16px; } @@ -7538,7 +6517,6 @@ 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; } @@ -7554,13 +6532,9 @@ 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; } @@ -7568,9 +6542,7 @@ 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; } @@ -7578,13 +6550,9 @@ 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; } @@ -7592,13 +6560,9 @@ 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; } @@ -7606,9 +6570,7 @@ 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; } @@ -7616,7 +6578,6 @@ 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; } @@ -7624,9 +6585,7 @@ 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; } @@ -7676,11 +6635,8 @@ 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; } @@ -7688,11 +6644,8 @@ 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; } @@ -7700,19 +6653,12 @@ 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; } @@ -7758,25 +6704,15 @@ 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; } @@ -7806,17 +6742,11 @@ 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; } @@ -7830,23 +6760,14 @@ 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); } @@ -7854,13 +6775,9 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { #nprogress .spinner { display: block; - position: fixed; - z-index: 1031; - top: 15px; - right: 15px; } @@ -7868,21 +6785,13 @@ 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; } @@ -7890,7 +6799,6 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { .nprogress-custom-parent { overflow: hidden; - position: relative; } @@ -7948,7 +6856,6 @@ 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; @@ -7966,7 +6873,6 @@ body.leftbar-can-headroom.headroom---unpinned #nprogress .bar { .iziToast > .iziToast-body i.fa-spin:before { animation: fa-spin 2s infinite linear; - display: inline-block; } @@ -7988,11 +6894,8 @@ 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; } @@ -8000,9 +6903,7 @@ 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; } @@ -8014,13 +6915,9 @@ 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%; } @@ -8028,7 +6925,6 @@ 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; } @@ -8106,7 +7002,6 @@ article img.lazyload[src^="data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg" .fancybox-wrapper { width: max-content; - max-width: 100%; } @@ -8130,9 +7025,7 @@ figure > a > .fancybox-wrapper { .fancybox-wrapper > img { cursor: pointer; - cursor: -webkit-zoom-in; - cursor: zoom-in; } @@ -8142,9 +7035,7 @@ figure > a > .fancybox-wrapper { .zoomify { cursor: pointer; - cursor: -webkit-zoom-in; - cursor: zoom-in; } @@ -8152,21 +7043,13 @@ 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; } @@ -8174,25 +7057,15 @@ 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; } @@ -8200,11 +7073,8 @@ figure > a > .fancybox-wrapper { .zoomify-shadow.zoomed { opacity: 1; - cursor: pointer; - cursor: -webkit-zoom-out; - cursor: zoom-out; } @@ -8308,17 +7178,21 @@ 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); + opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), + visibility 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; + opacity 0.2s ease-out, + pointer-events 0s 0.2s; } /* 展开状态 - 分享按钮上滑淡出 */ @@ -8332,6 +7206,7 @@ body.noscroll:before { #share_container.opened #share { transform: translateY(0); opacity: 1; + visibility: visible; pointer-events: auto; } @@ -8339,6 +7214,8 @@ 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; } @@ -8351,6 +7228,10 @@ 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; } @@ -8439,7 +7320,7 @@ body.noscroll:before { } #share .wechat-qrcode .help { - color: #666; + color: #555; padding-top: 10px; padding-bottom: 0; font-size: 12px; @@ -8581,19 +7462,12 @@ 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; } @@ -8625,19 +7499,12 @@ 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; } @@ -8659,7 +7526,6 @@ html[lang] { .shuoshuo-main { border-top-left-radius: 0; - padding: 20px 20px; } @@ -8667,17 +7533,11 @@ 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%; } @@ -8691,7 +7551,6 @@ html[lang] { .shuoshuo-content p { margin-bottom: 0; - line-height: 1.8; } @@ -8705,9 +7564,7 @@ html[lang] { .shuoshuo-comments { font-size: 14px; - opacity: 0.85; - margin-top: 10px; } @@ -8731,7 +7588,6 @@ html[lang] { .shuoshuo-comment-item-title .badge-unapproved { transform: translateY(-2px); - padding: 3px 5px; } @@ -8739,9 +7595,7 @@ html[lang] { .shuoshuo-comments .comment-item-inner { margin-top: 2px; - padding-bottom: 3px; - border: none !important; } @@ -8755,11 +7609,8 @@ html[lang] { .shuoshuo-operations { margin-top: 5px; - margin-left: auto; - width: max-content; - width: -moz-max-content; } @@ -8773,11 +7624,8 @@ html[lang] { .shuoshuo-operations button.upvoted { color: #fff; - border-color: var(--themecolor); - background-color: var(--themecolor); - pointer-events: none; } @@ -8825,7 +7673,6 @@ html[lang] { .shuoshuo-upvote.shuoshuo-upvoting { opacity: 0.8; - pointer-events: none; } @@ -8835,9 +7682,7 @@ html[lang] { .shuoshuo-preview-container { margin-bottom: 20px; - padding: 25px 35px; - transition: opacity 0.5s ease; } @@ -8845,31 +7690,19 @@ 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; } @@ -8877,19 +7710,12 @@ 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; } @@ -8897,11 +7723,8 @@ html[lang] { .shuoshuo-preview-meta { font-size: 14px; - opacity: 0.6; - transition: all 0.3s ease; - margin-top: 10px; } @@ -8923,13 +7746,9 @@ html[lang] { .shuoshuo-preview-link { position: absolute; - right: 20px; - bottom: 25px; - opacity: 0; - transition: all 0.3s ease; } @@ -8943,7 +7762,6 @@ html[lang] { .post-list-pjax-loading .shuoshuo-preview-container { opacity: 0; - pointer-events: none; } @@ -8951,9 +7769,7 @@ html[lang] { .shuoshuo-content.shuoshuo-folded { position: relative; - max-height: 400px; - overflow: hidden; } @@ -8961,21 +7777,13 @@ 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; } @@ -8983,23 +7791,14 @@ 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; } @@ -9007,9 +7806,7 @@ html[lang] { .shuoshuo-content.shuoshuo-folded .show-full-shuoshuo > button { border-radius: var(--card-radius); - padding: 5px 20px; - opacity: 0.8; } @@ -9039,19 +7836,12 @@ 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; } @@ -9059,11 +7849,8 @@ html[lang] { .archive-timeline-year { font-size: 30px; - color: var(--themecolor); - margin-top: 12px !important; - margin-bottom: 0; } @@ -9071,15 +7858,10 @@ html[lang] { .archive-timeline-month { font-size: 24px; - color: var(--themecolor); - opacity: 0.8; - margin-top: 12px !important; - margin-bottom: 0; - font-weight: unset; } @@ -9087,7 +7869,6 @@ html[lang] { .archive-timeline-year + .archive-timeline-title { height: 50px; - margin-top: 30px; } @@ -9095,11 +7876,8 @@ html[lang] { .archive-timeline *:not(.archive-timeline-year) + .archive-timeline-title:before { width: 12px; - height: 12px; - left: -34px; - top: 18px; } @@ -9119,7 +7897,6 @@ html[lang] { .archive-timeline-title > a { width: max-content; - max-width: 100%; } @@ -9161,19 +7938,12 @@ 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; } @@ -9261,19 +8031,12 @@ 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; } @@ -9281,9 +8044,7 @@ html[lang] { .spinner-border-sm { width: 1rem; - height: 1rem; - border-width: 0.2em; } @@ -9309,19 +8070,12 @@ 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; } @@ -9329,7 +8083,6 @@ html[lang] { .spinner-grow-sm { width: 1rem; - height: 1rem; } @@ -9349,9 +8102,7 @@ article table.hljs-ln > thead > tr > td, article table.hljs-ln > thead > tr > th { padding: unset; - vertical-align: unset; - border: unset !important; } @@ -9365,9 +8116,7 @@ article table.hljs-ln > thead > tr > th { pre.hljs-codeblock { overflow: visible; - position: relative; - tab-size: 4; } @@ -9375,25 +8124,17 @@ 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; } @@ -9401,21 +8142,13 @@ 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; } @@ -9423,33 +8156,19 @@ 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; } @@ -9457,15 +8176,10 @@ code[hljs-codeblock-inner] { .hljs-ln-numbers:before { content: ""; - position: absolute; - left: -20px; - width: 20px; - height: 100%; - background: inherit; } @@ -9479,7 +8193,6 @@ pre.hljs-codeblock.hljs-transparent-linenumber .hljs-ln-numbers { .hljs-ln-code { padding-left: 30px !important; - transition: all 0.3s ease; } @@ -9487,7 +8200,6 @@ 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; } @@ -9501,7 +8213,6 @@ pre.hljs-codeblock:not(.hljs-break-line) .hljs-ln-code { code[hljs-codeblock-inner]::-webkit-scrollbar-track { border: none; - background: transparent !important; } @@ -9509,13 +8220,9 @@ 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; } @@ -9529,7 +8236,6 @@ code[hljs-codeblock-inner]::-webkit-scrollbar-thumb:hover { code[hljs-codeblock-inner]::-webkit-scrollbar { background: transparent; - height: 6px; } @@ -9543,19 +8249,12 @@ 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); } @@ -9563,17 +8262,11 @@ 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; } @@ -9607,7 +8300,6 @@ pre.hljs-codeblock.hljs-codeblock-fullscreen:before { pre.hljs-codeblock.hljs-hide-linenumber .hljs-ln-numbers.hljs { width: 0px; - opacity: 0; } @@ -9621,27 +8313,16 @@ 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; } @@ -9667,17 +8348,11 @@ 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; } @@ -9691,23 +8366,14 @@ 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; } @@ -9715,7 +8381,6 @@ pre.hljs-codeblock .hljs-control i.fa { .hljs-control-btn:hover:before { opacity: 1; - top: 25px; } @@ -9783,27 +8448,16 @@ 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; } @@ -10013,7 +8667,6 @@ 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); } @@ -10069,7 +8722,6 @@ html.darkmode.amoled-dark .leftbar-banner { html.darkmode.amoled-dark .github-info-card { background: #000 !important; - border: 1px solid #222; } @@ -10091,143 +8743,190 @@ html.darkmode.amoled-dark #content:after { display: block; } -/*==========Style-Mobile==========*/ +/* ========================================================================== + 移动端样式重构 - Mobile Responsive Design + 基于 Material Design 3 + iOS 设计语言 + ========================================================================== */ @media screen and (max-width: 900px) { - /* 移动端隐藏桌面端侧边栏内容，只显示移动端导航 */ + /* ---------- 移动端基础布局 ---------- */ + + /* 隐藏桌面端侧边栏内容 */ .leftbar-desktop-content { display: none !important; } - /* 移动端侧边栏 - 优化设计 */ + /* 移动端侧边栏容器 */ .leftbar-mobile-nav { display: flex; flex-direction: column; min-height: 100%; background: var(--color-foreground); - } - - /* 顶部用户信息区 - 增强视觉效果 */ - .leftbar-mobile-profile { - background: var(--themecolor-gradient); - padding: 28px 20px 24px; position: relative; - color: #fff; overflow: hidden; } - /* 背景装饰圆形 */ + /* ---------- 移动端用户信息区 ---------- */ + + /* 顶部用户信息区 - 渐变背景 + 装饰元素 */ + .leftbar-mobile-profile { + background: linear-gradient(135deg, + var(--themecolor) 0%, + var(--themecolor-dark) 100%); + padding: 32px 20px 28px; + 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: -60px; - right: -60px; - width: 160px; - height: 160px; - background: rgba(255, 255, 255, 0.08); + top: -80px; + right: -80px; + width: 200px; + height: 200px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%); 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: -40px; - left: -40px; - width: 120px; - height: 120px; - background: rgba(255, 255, 255, 0.05); + bottom: -60px; + left: -60px; + width: 160px; + height: 160px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); 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: 16px; - right: 16px; - width: 36px; - height: 36px; + top: 20px; + right: 20px; + width: 40px; + height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; - background: rgba(255, 255, 255, 0.15); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); + background: rgba(255, 255, 255, 0.18); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); cursor: pointer; - transition: all var(--animation-fast) var(--ease-standard); + transition: all var(--animation-fast) var(--ease-spring); color: #fff; - z-index: 1; + z-index: 10; + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .leftbar-mobile-close:active { - background: rgba(255, 255, 255, 0.25); - transform: scale(0.92); + background: rgba(255, 255, 255, 0.3); + transform: scale(0.9); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .leftbar-mobile-close i { - font-size: 15px; + font-size: 16px; + transition: transform var(--animation-fast) var(--ease-standard); } + .leftbar-mobile-close:active i { + transform: rotate(90deg); + } + + /* 头像 - 增强触摸反馈 */ .leftbar-mobile-avatar { - width: 72px; - height: 72px; + width: 80px; + height: 80px; border-radius: 50%; overflow: hidden; - border: 3px solid rgba(255, 255, 255, 0.35); - margin-bottom: 14px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); + border: 4px solid rgba(255, 255, 255, 0.3); + margin-bottom: 16px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); position: relative; z-index: 1; transition: all var(--animation-normal) var(--ease-spring); } .leftbar-mobile-avatar:active { - transform: scale(0.95); - border-color: rgba(255, 255, 255, 0.6); + transform: scale(0.92); + border-color: rgba(255, 255, 255, 0.5); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .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: 18px; + margin-bottom: 20px; position: relative; z-index: 1; + text-align: center; } .leftbar-mobile-user-name { - font-size: 22px; + font-size: 24px; font-weight: 700; - margin-bottom: 6px; + margin-bottom: 8px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; - gap: 4px; - letter-spacing: -0.3px; + gap: 6px; + letter-spacing: -0.5px; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .leftbar-mobile-user-desc { - font-size: 13px; - opacity: 0.9; - line-height: 1.4; + font-size: 14px; + opacity: 0.92; + line-height: 1.5; + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } + /* 统计数据卡片 */ .leftbar-mobile-stats { display: flex; gap: 0; - background: rgba(255, 255, 255, 0.12); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border-radius: 16px; - padding: 12px 8px; + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-radius: 18px; + padding: 14px 10px; 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 { @@ -10236,6 +8935,11 @@ 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 { @@ -10245,26 +8949,33 @@ html.darkmode.amoled-dark #content:after { top: 50%; transform: translateY(-50%); width: 1px; - height: 24px; - background: rgba(255, 255, 255, 0.2); + height: 28px; + background: linear-gradient(to bottom, + transparent, + rgba(255, 255, 255, 0.3) 50%, + transparent); } .leftbar-mobile-stat .stat-num { - font-size: 20px; + font-size: 22px; 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.75; - margin-top: 3px; - font-weight: 500; + opacity: 0.85; + margin-top: 4px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; } - /* 搜索框 - 优化样式 */ + /* ---------- 移动端搜索框 ---------- */ + .leftbar-mobile-search { - padding: 16px 16px 8px; + padding: 18px 16px 10px; background: var(--color-foreground); } @@ -10272,28 +8983,30 @@ html.darkmode.amoled-dark #content:after { display: flex; align-items: center; background: var(--color-background); - border-radius: 14px; - padding: 12px 16px; + border-radius: 16px; + padding: 13px 18px; gap: 12px; - transition: all var(--animation-fast) var(--ease-standard); - border: 1px solid transparent; + transition: all var(--animation-normal) var(--ease-emphasized); + border: 2px solid transparent; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .leftbar-mobile-search-inner:focus-within { - border-color: rgba(var(--themecolor-rgbstr), 0.3); + border-color: var(--themecolor); background: var(--color-foreground); - box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); - transform: scale(1.02); + box-shadow: 0 4px 16px rgba(var(--themecolor-rgbstr), 0.15); + transform: translateY(-2px); } .leftbar-mobile-search-inner i { color: #999; - font-size: 15px; - transition: color var(--animation-fast) var(--ease-standard); + font-size: 16px; + transition: all 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 { @@ -10303,25 +9016,29 @@ 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: 12px 12px 8px; + padding: 14px 12px 10px; } .leftbar-mobile-section-title { font-size: 11px; - font-weight: 700; - color: #999; + font-weight: 800; + color: #888; text-transform: uppercase; - letter-spacing: 1.2px; - padding: 8px 12px 12px; + letter-spacing: 1.5px; + padding: 10px 14px 14px; margin-bottom: 0; + opacity: 0.8; } .leftbar-mobile-menu { @@ -10331,21 +9048,30 @@ html.darkmode.amoled-dark #content:after { } .leftbar-mobile-menu-item { - margin-bottom: 4px; + margin-bottom: 6px; } .leftbar-mobile-menu-item > a { display: flex; align-items: center; - padding: 14px 16px; + padding: 15px 18px; color: var(--color-text-deeper); text-decoration: none; - border-radius: 14px; - transition: all var(--animation-fast) var(--ease-standard); + border-radius: 16px; + transition: all var(--animation-normal) var(--ease-emphasized); 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); } /* 菜单项涟漪效果 */ @@ -10356,38 +9082,55 @@ html.darkmode.amoled-dark #content:after { left: 50%; width: 0; height: 0; - background: rgba(var(--themecolor-rgbstr), 0.15); + background: rgba(var(--themecolor-rgbstr), 0.2); border-radius: 50%; transform: translate(-50%, -50%); - transition: width 0.4s var(--ease-standard), height 0.4s var(--ease-standard); + transition: width 0.5s var(--ease-emphasized-decelerate), + height 0.5s var(--ease-emphasized-decelerate); pointer-events: none; + opacity: 0; } .leftbar-mobile-menu-item > a:active::before { - width: 200%; - height: 200%; + width: 250%; + height: 250%; + opacity: 1; } .leftbar-mobile-menu-item > a:active { - background: rgba(var(--themecolor-rgbstr), 0.1); - transform: scale(0.98); + background: rgba(var(--themecolor-rgbstr), 0.08); + transform: scale(0.96); } + .leftbar-mobile-menu-item > a:active i { + transform: scale(1.15); + } + + /* 当前激活菜单项 */ .leftbar-mobile-menu-item.current > a { - background: rgba(var(--themecolor-rgbstr), 0.1); + background: linear-gradient(135deg, + rgba(var(--themecolor-rgbstr), 0.12) 0%, + rgba(var(--themecolor-rgbstr), 0.08) 100%); color: var(--themecolor); + font-weight: 600; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.15); } - .leftbar-mobile-menu-item.current > a::before { + .leftbar-mobile-menu-item.current > a::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; - height: 20px; + height: 24px; 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 { @@ -10396,7 +9139,7 @@ html.darkmode.amoled-dark #content:after { .leftbar-mobile-menu-item .submenu-arrow { font-size: 12px; - color: #999; + color: #666; transition: transform var(--animation-normal) var(--ease-standard); margin-left: 8px; } @@ -10440,7 +9183,7 @@ html.darkmode.amoled-dark #content:after { padding: 11px 14px; font-size: 14px; font-weight: 400; - color: #666; + color: #555; border-radius: 10px; } @@ -10449,38 +9192,43 @@ html.darkmode.amoled-dark #content:after { background: rgba(var(--themecolor-rgbstr), 0.08); } - /* 底部操作区 - 优化设计 */ + /* ---------- 移动端底部操作区 ---------- */ + .leftbar-mobile-footer { margin-top: auto; - padding: 12px 16px 20px; + padding: 16px 16px 24px; 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: 8px; + gap: 10px; } .leftbar-mobile-action { flex: 1; - max-width: 100px; + max-width: 110px; display: flex; flex-direction: column; align-items: center; - gap: 6px; - padding: 14px 12px; + gap: 8px; + padding: 16px 14px; border: none; background: var(--color-background); color: #666; font-size: 11px; - font-weight: 500; + font-weight: 600; cursor: pointer; - border-radius: 14px; - transition: all var(--animation-fast) var(--ease-standard); + border-radius: 16px; + transition: all var(--animation-normal) var(--ease-emphasized); position: relative; overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + text-transform: uppercase; + letter-spacing: 0.5px; } /* 底部按钮涟漪效果 */ @@ -10491,31 +9239,35 @@ 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.25); border-radius: 50%; transform: translate(-50%, -50%); - transition: width 0.35s var(--ease-standard), height 0.35s var(--ease-standard); + transition: width 0.4s var(--ease-emphasized-decelerate), + height 0.4s var(--ease-emphasized-decelerate); pointer-events: none; + opacity: 0; } .leftbar-mobile-action:active::before { - width: 180%; - height: 180%; + width: 200%; + height: 200%; + opacity: 1; } .leftbar-mobile-action:active { - background: rgba(var(--themecolor-rgbstr), 0.12); + background: rgba(var(--themecolor-rgbstr), 0.1); color: var(--themecolor); - transform: scale(0.96); + transform: scale(0.94); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } .leftbar-mobile-action i { - font-size: 20px; - transition: transform var(--animation-fast) var(--ease-spring); + font-size: 22px; + transition: transform var(--animation-normal) var(--ease-spring); } .leftbar-mobile-action:active i { - transform: scale(1.1); + transform: scale(1.2) rotate(5deg); } /* ========== 移动端折叠面板样式 - Material 3 & iOS 风格 ========== */ @@ -10657,7 +9409,7 @@ html.darkmode.amoled-dark #content:after { .collapse-arrow { font-size: 11px; - color: #aaa; + color: #888; transition: all var(--animation-normal) var(--ease-emphasized); width: 20px; height: 20px; @@ -10742,7 +9494,7 @@ html.darkmode.amoled-dark #content:after { display: block; padding: 8px 10px; font-size: 13px; - color: #666; + color: #555; text-decoration: none; border-radius: 8px; transition: all var(--animation-fast) var(--ease-standard), @@ -10823,7 +9575,7 @@ html.darkmode.amoled-dark #content:after { } .mobile-todo-add-form input::placeholder { - color: #aaa; + color: #888; font-size: 12px; } @@ -11007,7 +9759,7 @@ html.darkmode.amoled-dark #content:after { .mobile-todo-empty { text-align: center; - color: #bbb; + color: #888; font-size: 12px; padding: 20px 0; } @@ -12173,9 +10925,7 @@ 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; } @@ -12193,7 +10943,6 @@ html.using-safari #share .icon-wechat .wechat-qrcode { html.using-safari .post-donate .donate-btn:hover ~ .donate-qrcode { transform: translateX(-50%); - opacity: 1; } @@ -12209,7 +10958,6 @@ 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; } @@ -12870,26 +11618,42 @@ 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: #999; + color: #666; + background: rgba(0, 0, 0, 0.08); 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.6; + opacity: 0.5; + filter: grayscale(1) opacity(0.6); } /* 多邻国火焰动画 */ @@ -12899,8 +11663,8 @@ html.darkmode .todo-add-form input:focus { transform: scale(1); } 50% { - filter: drop-shadow(0 0 6px rgba(255, 150, 0, 0.8)); - transform: scale(1.05); + 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); } } @@ -12919,26 +11683,66 @@ html.darkmode .todo-add-form input:focus { .leftbar-mobile-user-name .duolingo-streak { font-size: 15px; margin-left: 8px; - padding: 3px 10px 3px 6px; - background: rgba(0, 0, 0, 0.25); - border-radius: 14px; + 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; gap: 4px; color: #fff; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(4px); - -webkit-backdrop-filter: blur(4px); + 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); } .leftbar-mobile-user-name .duolingo-streak.not-done { - background: rgba(0, 0, 0, 0.2); - color: rgba(255, 255, 255, 0.7); - text-shadow: none; + 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); } .leftbar-mobile-user-name .duolingo-flame { width: 16px; height: 19px; - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); + 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); } @@ -13082,7 +11886,7 @@ img { .friend-link-desc { font-size: 12px; - color: #999; + color: #666; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; @@ -13717,7 +12521,8 @@ html.darkmode { } .card:hover { - box-shadow: var(--m3-elevation-2) !important; + box-shadow: var(--m3-elevation-1) !important; + transform: none; } /* M3 文章卡片 */ @@ -13727,8 +12532,8 @@ article.post.card { } article.post.card:hover { - transform: translateY(-2px); - box-shadow: var(--m3-elevation-3) !important; + box-shadow: var(--m3-elevation-1) !important; + transform: none; } /* M3 按钮样式 */ @@ -13870,7 +12675,7 @@ article.post.card:hover { .site-state-item-name { display: block; font-size: 12px; - color: #888; + color: #666; margin-top: 2px; } @@ -14356,7 +13161,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: #999; + color: #777; } /* 2. 移动端侧边栏按钮修复 */ @@ -14520,8 +13325,9 @@ article.post.card { article.post.card:hover { box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.06), - 0 12px 28px rgba(var(--themecolor-rgbstr), 0.08); + 0 2px 8px rgba(0, 0, 0, 0.04), + 0 1px 2px rgba(0, 0, 0, 0.06); + transform: none; } /* 文章导航卡片透明度 */ @@ -14547,15 +13353,6 @@ 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, @@ -14951,12 +13748,10 @@ html.darkmode .card { /* 卡片悬浮提升效果 */ article.post.card { - transition: transform var(--animation-normal) var(--ease-spring), - box-shadow var(--animation-normal) var(--ease-standard); + transition: 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), @@ -15005,6 +13800,39 @@ 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); @@ -15298,7 +14126,7 @@ html.darkmode ::-webkit-scrollbar-thumb:hover { /* 移动端响应式调整 */ @media (max-width: 768px) { article.post.card:hover { - transform: translateY(-2px); + transform: none; } } @@ -16298,18 +15126,11 @@ html.darkmode { /* 2. 桌面端卡片悬停效果增强 */ @media (hover: hover) and (pointer: fine) { article.post.card { - transition: transform var(--animation-normal) var(--ease-out-expo), box-shadow var(--animation-normal) var(--ease-standard); + transition: 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); } @@ -16411,11 +15232,34 @@ 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); } -.form-control:focus { box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.15); border-color: var(--themecolor); } +.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-group.floating-label { position: relative; } -.form-group.floating-label label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); transition: all var(--animation-fast) var(--ease-standard); pointer-events: none; color: #999; background: var(--color-foreground); padding: 0 4px; } -.form-group.floating-label .form-control:focus ~ label, .form-group.floating-label .form-control:not(:placeholder-shown) ~ label { top: 0; font-size: 12px; color: var(--themecolor); } +.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; +} /* 8. 滚动条美化 */ ::-webkit-scrollbar { width: 8px; height: 8px; } @@ -16426,7 +15270,7 @@ article img.loaded, .post-thumbnail img.loaded, article img:not([loading="lazy"] /* 9. 移动端触摸优化 */ @media (hover: none) and (pointer: coarse) { - article.post.card:hover { transform: none; box-shadow: var(--shadow-1); } + article.post.card:hover { box-shadow: var(--shadow-1); } * { -webkit-tap-highlight-color: transparent; } }