xiaoqu/dsh-worktable
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(console): 4 dropdown controls (theme/shape/bg/cols) replacing top pills

Browse Source
This commit is contained in:
Aisland
2026-09-01 02:32:24 +08:00
parent e456296808
commit 8eb92c063d
3 changed files with 158 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01_content/src/client/styles.ts
+20
View File
@@ -411,6 +411,26 @@ export const css = xtermCss + '\n' + [
'@keyframes wtBlob4{from{transform:translate(0,0) scale(1)}to{transform:translate(-10vw,-10vh) scale(1.12)}}',
'.dsh-wt_console[data-wt-theme=light] .dsh-wt_blob{opacity:.28}',
'.dsh-wt_consoleHead,.dsh-wt_consoleGrid{position:relative;z-index:1}',
// 顶部 4 个圆形控制按钮 + 彩色下拉菜单
'.dsh-wt_consoleHead{position:relative;z-index:10}',
'.dsh-wt_consoleCtlWrap{position:relative;display:inline-flex}',
'.dsh-wt_consoleCtl{width:32px;height:32px;padding:0;border:1.5px solid rgba(255,255,255,.72);border-radius:9px;background:rgba(255,255,255,.04);color:var(--wt-text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s ease,background .15s ease}',
'.dsh-wt_consoleCtl:hover{border-color:rgba(255,255,255,.95);background:rgba(255,255,255,.09)}',
'.dsh-wt_consoleCtlOn{border-color:#fff;background:rgba(255,255,255,.14);box-shadow:0 0 10px rgba(255,255,255,.15)}',
'.dsh-wt_dropMask{position:fixed;inset:0;z-index:9;background:transparent;border:none}',
'.dsh-wt_drop{position:absolute;top:calc(100% + 6px);right:0;min-width:124px;padding:5px;border-radius:10px;background:#171c25;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:11;display:flex;flex-direction:column;gap:2px}',
'.dsh-wt_dropTheme{border:1px solid rgba(34,197,94,.65);box-shadow:0 0 14px rgba(34,197,94,.15),0 8px 24px rgba(0,0,0,.4)}',
'.dsh-wt_dropShape{border:1px solid rgba(245,158,11,.65);box-shadow:0 0 14px rgba(245,158,11,.15),0 8px 24px rgba(0,0,0,.4)}',
'.dsh-wt_dropBg{border:1px solid rgba(239,68,68,.65);box-shadow:0 0 14px rgba(239,68,68,.15),0 8px 24px rgba(0,0,0,.4)}',
'.dsh-wt_dropCols{border:1px solid rgba(245,185,66,.65);box-shadow:0 0 14px rgba(245,185,66,.15),0 8px 24px rgba(0,0,0,.4)}',
'.dsh-wt_dropItem{width:100%;padding:6px 9px;border:none;border-radius:7px;background:transparent;color:var(--wt-text2);font:inherit;font-size:12px;line-height:17px;cursor:pointer;display:flex;align-items:center;gap:7px;text-align:left}',
'.dsh-wt_dropItem:hover{background:var(--wt-chip);color:var(--wt-text)}',
'.dsh-wt_dropItemOn{background:var(--wt-chip);color:var(--wt-text);font-weight:600}',
'.dsh-wt_vbar{position:relative;width:26px;height:112px;margin:6px auto;border-radius:999px;background:rgba(255,255,255,.08)}',
'.dsh-wt_vbarFill{position:absolute;left:0;right:0;top:0;border-radius:999px;background:linear-gradient(180deg,#fcd34d,#f5b942);pointer-events:none}',
'.dsh-wt_vbarDot{position:absolute;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;padding:0;border-radius:50%;background:#0f1218;border:2px solid rgba(245,185,66,.85);color:#f5b942;font:inherit;font-size:9px;font-weight:700;cursor:pointer;z-index:2;display:inline-flex;align-items:center;justify-content:center}',
'.dsh-wt_vbarDot:hover{border-color:#fff}',
'.dsh-wt_vbarKnob{position:absolute;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);z-index:3;pointer-events:none}',
// 工作中的卡片流光：光带加长羽化 + 光层超出卡片（移动时不露整齐边缘），每 ~3.2s 从左上斜扫到右下
'.dsh-wt_consoleSweep{position:absolute;inset:-30%;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.01) 0%,rgba(255,255,255,.045) 30%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.045) 70%,rgba(255,255,255,.01) 100%);opacity:0;animation:consoleSweep 3.2s ease-in-out infinite}',
'.dsh-wt_console[data-wt-theme=light] .dsh-wt_consoleSweep{background:linear-gradient(115deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.3) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.3) 70%,rgba(255,255,255,.1) 100%)}',