From f91003bde20f08a6e2a1a532a647b5c40538919d Mon Sep 17 00:00:00 2001 From: YeomaiPC Date: Sat, 12 Sep 2026 22:07:26 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../UNIVERSAL_SpineViewer/viewer/spine.html | 22 +++++++++++++------ viewer/spine.html | 22 +++++++++++++------ 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/release/UNIVERSAL_SpineViewer/viewer/spine.html b/release/UNIVERSAL_SpineViewer/viewer/spine.html index 1ccb756..71b5bf1 100644 --- a/release/UNIVERSAL_SpineViewer/viewer/spine.html +++ b/release/UNIVERSAL_SpineViewer/viewer/spine.html @@ -21,6 +21,10 @@ --scroll-thumb-hover: rgba(255, 255, 255, .55); --scroll-thumb-active: rgba(255, 255, 255, .72); --scroll-track: rgba(255, 255, 255, .07); + --panel-glass: rgba(37, 37, 38, .92); /* #toolbar / #animationPanel / #timelineBar 底色 */ + --active-item-fill: rgb(45, 68, 81); /* .animation-item.active 底色 */ + --list-thumb: rgba(157, 157, 157, .58); /* 动画列表滚动条，与预览区各自独立 */ + --list-thumb-hover: rgba(157, 157, 157, .82); } [data-theme="light"] { --bg: #f3f4f6; @@ -36,6 +40,10 @@ --scroll-thumb-hover: rgba(0, 0, 0, .46); --scroll-thumb-active: rgba(0, 0, 0, .62); --scroll-track: rgba(0, 0, 0, .06); + --panel-glass: rgba(255, 255, 255, .92); + --active-item-fill: rgb(204, 228, 246); + --list-thumb: rgba(107, 107, 107, .58); + --list-thumb-hover: rgba(107, 107, 107, .82); } * { box-sizing: border-box; @@ -56,7 +64,7 @@ position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; - background: color-mix(in srgb, var(--panel) 92%, transparent); + background: var(--panel-glass); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 5px 18px rgba(0, 0, 0, .25); backdrop-filter: blur(8px); z-index: 10; @@ -81,7 +89,7 @@ width: max-content; min-width: 128px; max-width: min(260px, 34vw); max-height: calc(100% - var(--toolbar-height) - var(--timeline-height) - 56px); display: none; flex-direction: column; overflow: hidden; - background: color-mix(in srgb, var(--panel) 92%, transparent); + background: var(--panel-glass); border: 1px solid var(--border); border-radius: 7px; box-shadow: 0 5px 18px rgba(0, 0, 0, .28); backdrop-filter: blur(8px); @@ -94,17 +102,17 @@ width: max-content; min-width: 100%; max-width: 100%; min-height: 0; overflow: auto; padding: 5px; scrollbar-width: thin; - scrollbar-color: color-mix(in srgb, var(--text-dim) 58%, transparent) transparent; + scrollbar-color: var(--list-thumb) transparent; } #animationList::-webkit-scrollbar { width: 8px; height: 8px; } #animationList::-webkit-scrollbar-track { background: transparent; } #animationList::-webkit-scrollbar-thumb { min-height: 28px; border: 2px solid transparent; border-radius: 999px; - background: color-mix(in srgb, var(--text-dim) 58%, transparent); + background: var(--list-thumb); background-clip: padding-box; } #animationList::-webkit-scrollbar-thumb:hover { - background: color-mix(in srgb, var(--text-dim) 82%, transparent); + background: var(--list-thumb-hover); background-clip: padding-box; } #animationList::-webkit-scrollbar-corner { background: transparent; } @@ -117,7 +125,7 @@ } .animation-item:hover { background: var(--panel-2); } .animation-item.active { - background: color-mix(in srgb, var(--accent) 20%, var(--panel)); + background: var(--active-item-fill); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } #viewport { position: relative; width: 100%; min-width: 0; flex: 1; overflow: hidden; } @@ -130,7 +138,7 @@ position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 6px 12px; - background: color-mix(in srgb, var(--panel) 92%, transparent); + background: var(--panel-glass); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 -4px 18px rgba(0, 0, 0, .22); backdrop-filter: blur(8px); diff --git a/viewer/spine.html b/viewer/spine.html index 1ccb756..71b5bf1 100644 --- a/viewer/spine.html +++ b/viewer/spine.html @@ -21,6 +21,10 @@ --scroll-thumb-hover: rgba(255, 255, 255, .55); --scroll-thumb-active: rgba(255, 255, 255, .72); --scroll-track: rgba(255, 255, 255, .07); + --panel-glass: rgba(37, 37, 38, .92); /* #toolbar / #animationPanel / #timelineBar 底色 */ + --active-item-fill: rgb(45, 68, 81); /* .animation-item.active 底色 */ + --list-thumb: rgba(157, 157, 157, .58); /* 动画列表滚动条，与预览区各自独立 */ + --list-thumb-hover: rgba(157, 157, 157, .82); } [data-theme="light"] { --bg: #f3f4f6; @@ -36,6 +40,10 @@ --scroll-thumb-hover: rgba(0, 0, 0, .46); --scroll-thumb-active: rgba(0, 0, 0, .62); --scroll-track: rgba(0, 0, 0, .06); + --panel-glass: rgba(255, 255, 255, .92); + --active-item-fill: rgb(204, 228, 246); + --list-thumb: rgba(107, 107, 107, .58); + --list-thumb-hover: rgba(107, 107, 107, .82); } * { box-sizing: border-box; @@ -56,7 +64,7 @@ position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; - background: color-mix(in srgb, var(--panel) 92%, transparent); + background: var(--panel-glass); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 5px 18px rgba(0, 0, 0, .25); backdrop-filter: blur(8px); z-index: 10; @@ -81,7 +89,7 @@ width: max-content; min-width: 128px; max-width: min(260px, 34vw); max-height: calc(100% - var(--toolbar-height) - var(--timeline-height) - 56px); display: none; flex-direction: column; overflow: hidden; - background: color-mix(in srgb, var(--panel) 92%, transparent); + background: var(--panel-glass); border: 1px solid var(--border); border-radius: 7px; box-shadow: 0 5px 18px rgba(0, 0, 0, .28); backdrop-filter: blur(8px); @@ -94,17 +102,17 @@ width: max-content; min-width: 100%; max-width: 100%; min-height: 0; overflow: auto; padding: 5px; scrollbar-width: thin; - scrollbar-color: color-mix(in srgb, var(--text-dim) 58%, transparent) transparent; + scrollbar-color: var(--list-thumb) transparent; } #animationList::-webkit-scrollbar { width: 8px; height: 8px; } #animationList::-webkit-scrollbar-track { background: transparent; } #animationList::-webkit-scrollbar-thumb { min-height: 28px; border: 2px solid transparent; border-radius: 999px; - background: color-mix(in srgb, var(--text-dim) 58%, transparent); + background: var(--list-thumb); background-clip: padding-box; } #animationList::-webkit-scrollbar-thumb:hover { - background: color-mix(in srgb, var(--text-dim) 82%, transparent); + background: var(--list-thumb-hover); background-clip: padding-box; } #animationList::-webkit-scrollbar-corner { background: transparent; } @@ -117,7 +125,7 @@ } .animation-item:hover { background: var(--panel-2); } .animation-item.active { - background: color-mix(in srgb, var(--accent) 20%, var(--panel)); + background: var(--active-item-fill); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } #viewport { position: relative; width: 100%; min-width: 0; flex: 1; overflow: hidden; } @@ -130,7 +138,7 @@ position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 6px 12px; - background: color-mix(in srgb, var(--panel) 92%, transparent); + background: var(--panel-glass); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 -4px 18px rgba(0, 0, 0, .22); backdrop-filter: blur(8px);