样式修改
This commit is contained in:
Yeomai committed
1 parent
90e5a2b81e
commit
f91003bde2
2 files changed
+30
-14
No files matched your search
@@ -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);
|
||||
|
||||
+15
-7
@@ -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);
|
||||
|
||||
Reference in new issue
Block a user