diff --git a/package.json b/package.json index 3ccb2ac..dc7b08a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tallynote", - "version": "1.1.36", + "version": "1.1.37", "private": true, "type": "module", "packageManager": "pnpm@9.0.6", diff --git a/web-next/src/styles/theme.css b/web-next/src/styles/theme.css index 4398b6b..2e589c7 100644 --- a/web-next/src/styles/theme.css +++ b/web-next/src/styles/theme.css @@ -766,6 +766,8 @@ input:focus-visible, textarea:focus-visible, select:focus-visible { } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } + /* Active loading indicators must retain continuous movement so users know tasks are progressing */ + .tn-beam-bar::after, .tn-spin { animation-duration: 2s !important; animation-iteration-count: infinite !important; } } /* ========================================================================== @@ -1647,7 +1649,7 @@ input:focus-visible, textarea:focus-visible, select:focus-visible { flex-direction: column !important; align-items: center !important; justify-content: center !important; - gap: 16px !important; + gap: 14px !important; padding: 40px 20px !important; width: 100% !important; height: 100% !important; @@ -1657,49 +1659,51 @@ input:focus-visible, textarea:focus-visible, select:focus-visible { } .tn-beam-bar { width: 140px; - height: 4px; - background: #e2e8f0; - border-radius: 4px; + height: 5px; + background: var(--td-brand-color-1, #e8f0ff); + border-radius: 9999px; overflow: hidden; position: relative; + display: block; + margin: 0 auto; + box-shadow: inset 0 1px 2px rgba(23, 92, 211, 0.08); } .tn-beam-bar::after { content: ""; position: absolute; top: 0; - left: -60px; - width: 60px; + left: 0; + width: 50%; height: 100%; - background: linear-gradient(90deg, transparent, var(--tn-blue-600), transparent); - border-radius: 4px; - animation: tn-beam-flow 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite; + background: linear-gradient(90deg, rgba(23, 92, 211, 0) 0%, rgba(61, 123, 229, 0.95) 45%, var(--td-brand-color, #175cd3) 70%, rgba(23, 92, 211, 0) 100%); + box-shadow: 0 0 10px rgba(23, 92, 211, 0.55), 0 0 4px rgba(61, 123, 229, 0.9); + border-radius: 9999px; + animation: tn-beam-flow 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; + will-change: transform; } .tn-beam-bar-sm { width: 60px !important; - height: 3px !important; - display: inline-block; + height: 3.5px !important; + display: inline-block !important; vertical-align: middle; + margin: 0 6px !important; } .tn-beam-bar-sm::after { - width: 30px; - animation: tn-beam-flow-sm 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite; + width: 50%; + animation: tn-beam-flow 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes tn-beam-flow { - 0% { left: -60px; } - 100% { left: 140px; } -} - -@keyframes tn-beam-flow-sm { - 0% { left: -30px; } - 100% { left: 60px; } + 0% { transform: translateX(-150%); } + 100% { transform: translateX(280%); } } .tn-beam-text { font-size: 13.5px; - color: var(--tn-text-secondary); - letter-spacing: 0.4px; + color: var(--tn-navy-700, #344054); + font-weight: 500; + letter-spacing: 0.3px; } /* 彻底隐去 TDesign 默认圆环旋转圈圈,统一切换为沉稳光流 */