Skip to content

Commit 3bb49b9

Browse files
AparenciaAparencia
committed
fix(tokens): 材质类层叠顺序 - 深色段移至浅色段后，修复深色主题错误显示浅色材质
1 parent 553bfab commit 3bb49b9

1 file changed

Lines changed: 76 additions & 76 deletions

File tree

‎client/src/styles/tokens.css‎

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,82 @@
340340
/* ============================================
341341
双光源材质（按钮质感） - 环境光 + 自发光 + 微噪点 + 按压点亮
342342
============================================ */
343+
:root .kb-btn-primary-material,
344+
:root .kb-btn-ai-material {
345+
position: relative;
346+
overflow: hidden;
347+
}
348+
/* 浅色 · 主按钮：晨光（顶部受光）+ 琥珀自发光 */
349+
:root .kb-btn-primary-material {
350+
background: linear-gradient(180deg, #C97A22 0%, #B05E12 55%, #A3550E 100%);
351+
box-shadow:
352+
inset 0 1px 0 rgba(255, 255, 255, 0.28),
353+
inset 0 -1px 0 rgba(0, 0, 0, 0.12),
354+
0 2px 6px rgba(154, 79, 12, 0.22);
355+
transition:
356+
box-shadow 150ms var(--kb-ease-smooth),
357+
background 150ms var(--kb-ease-smooth),
358+
transform 150ms var(--kb-ease-out);
359+
}
360+
:root .kb-btn-primary-material:hover {
361+
background: linear-gradient(180deg, #D88A2E 0%, #C06A15 55%, #B05E12 100%);
362+
box-shadow:
363+
inset 0 1px 0 rgba(255, 255, 255, 0.32),
364+
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
365+
0 4px 10px rgba(154, 79, 12, 0.28);
366+
}
367+
:root .kb-btn-primary-material:active {
368+
background: linear-gradient(180deg, #B05E12 0%, #9A4F0C 55%, #8A450A 100%);
369+
box-shadow:
370+
inset 0 2px 6px rgba(0, 0, 0, 0.18),
371+
inset 0 1px 0 rgba(255, 255, 255, 0.2),
372+
0 1px 3px rgba(154, 79, 12, 0.2);
373+
transform: scale(0.97);
374+
}
375+
/* 浅色 · AI 按钮：磷光蓝 */
376+
:root .kb-btn-ai-material {
377+
background: linear-gradient(180deg, #3B6FA8 0%, #2B5F9E 55%, #24517F 100%);
378+
box-shadow:
379+
inset 0 1px 0 rgba(255, 255, 255, 0.22),
380+
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
381+
0 2px 6px rgba(43, 95, 158, 0.22);
382+
transition:
383+
box-shadow 150ms var(--kb-ease-smooth),
384+
background 150ms var(--kb-ease-smooth),
385+
transform 150ms var(--kb-ease-out);
386+
}
387+
:root .kb-btn-ai-material:hover {
388+
background: linear-gradient(180deg, #4A7DB0 0%, #3B6FA8 55%, #2B5F9E 100%);
389+
box-shadow:
390+
inset 0 1px 0 rgba(255, 255, 255, 0.26),
391+
inset 0 -1px 0 rgba(0, 0, 0, 0.08),
392+
0 4px 10px rgba(43, 95, 158, 0.28);
393+
}
394+
:root .kb-btn-ai-material:active {
395+
background: linear-gradient(180deg, #2B5F9E 0%, #24517F 55%, #1E4366 100%);
396+
box-shadow:
397+
inset 0 2px 6px rgba(0, 0, 0, 0.18),
398+
inset 0 1px 0 rgba(255, 255, 255, 0.18),
399+
0 1px 3px rgba(43, 95, 158, 0.2);
400+
transform: scale(0.97);
401+
}
402+
/* 浅色微噪点（晨光实体表面，更淡） */
403+
:root .kb-btn-primary-material::after,
404+
:root .kb-btn-ai-material::after {
405+
content: '';
406+
position: absolute;
407+
inset: 0;
408+
pointer-events: none;
409+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
410+
background-size: 120px 120px;
411+
opacity: 0.025;
412+
transition: opacity 150ms ease;
413+
}
414+
:root .kb-btn-primary-material:hover::after,
415+
:root .kb-btn-ai-material:hover::after {
416+
opacity: 0.05;
417+
}
418+
343419
[data-theme="dark"] .kb-btn-primary-material,
344420
[data-theme="dark"] .kb-btn-ai-material {
345421
position: relative;
@@ -423,82 +499,6 @@
423499
[data-theme="dark"] .kb-btn-ai-material:hover::after {
424500
opacity: 0.06;
425501
}
426-
427-
:root .kb-btn-primary-material,
428-
:root .kb-btn-ai-material {
429-
position: relative;
430-
overflow: hidden;
431-
}
432-
/* 浅色 · 主按钮：晨光（顶部受光）+ 琥珀自发光 */
433-
:root .kb-btn-primary-material {
434-
background: linear-gradient(180deg, #C97A22 0%, #B05E12 55%, #A3550E 100%);
435-
box-shadow:
436-
inset 0 1px 0 rgba(255, 255, 255, 0.28),
437-
inset 0 -1px 0 rgba(0, 0, 0, 0.12),
438-
0 2px 6px rgba(154, 79, 12, 0.22);
439-
transition:
440-
box-shadow 150ms var(--kb-ease-smooth),
441-
background 150ms var(--kb-ease-smooth),
442-
transform 150ms var(--kb-ease-out);
443-
}
444-
:root .kb-btn-primary-material:hover {
445-
background: linear-gradient(180deg, #D88A2E 0%, #C06A15 55%, #B05E12 100%);
446-
box-shadow:
447-
inset 0 1px 0 rgba(255, 255, 255, 0.32),
448-
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
449-
0 4px 10px rgba(154, 79, 12, 0.28);
450-
}
451-
:root .kb-btn-primary-material:active {
452-
background: linear-gradient(180deg, #B05E12 0%, #9A4F0C 55%, #8A450A 100%);
453-
box-shadow:
454-
inset 0 2px 6px rgba(0, 0, 0, 0.18),
455-
inset 0 1px 0 rgba(255, 255, 255, 0.2),
456-
0 1px 3px rgba(154, 79, 12, 0.2);
457-
transform: scale(0.97);
458-
}
459-
/* 浅色 · AI 按钮：磷光蓝 */
460-
:root .kb-btn-ai-material {
461-
background: linear-gradient(180deg, #3B6FA8 0%, #2B5F9E 55%, #24517F 100%);
462-
box-shadow:
463-
inset 0 1px 0 rgba(255, 255, 255, 0.22),
464-
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
465-
0 2px 6px rgba(43, 95, 158, 0.22);
466-
transition:
467-
box-shadow 150ms var(--kb-ease-smooth),
468-
background 150ms var(--kb-ease-smooth),
469-
transform 150ms var(--kb-ease-out);
470-
}
471-
:root .kb-btn-ai-material:hover {
472-
background: linear-gradient(180deg, #4A7DB0 0%, #3B6FA8 55%, #2B5F9E 100%);
473-
box-shadow:
474-
inset 0 1px 0 rgba(255, 255, 255, 0.26),
475-
inset 0 -1px 0 rgba(0, 0, 0, 0.08),
476-
0 4px 10px rgba(43, 95, 158, 0.28);
477-
}
478-
:root .kb-btn-ai-material:active {
479-
background: linear-gradient(180deg, #2B5F9E 0%, #24517F 55%, #1E4366 100%);
480-
box-shadow:
481-
inset 0 2px 6px rgba(0, 0, 0, 0.18),
482-
inset 0 1px 0 rgba(255, 255, 255, 0.18),
483-
0 1px 3px rgba(43, 95, 158, 0.2);
484-
transform: scale(0.97);
485-
}
486-
/* 浅色微噪点（晨光实体表面，更淡） */
487-
:root .kb-btn-primary-material::after,
488-
:root .kb-btn-ai-material::after {
489-
content: '';
490-
position: absolute;
491-
inset: 0;
492-
pointer-events: none;
493-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
494-
background-size: 120px 120px;
495-
opacity: 0.025;
496-
transition: opacity 150ms ease;
497-
}
498-
:root .kb-btn-primary-material:hover::after,
499-
:root .kb-btn-ai-material:hover::after {
500-
opacity: 0.05;
501-
}
502502
/* reduced-motion：动效退化（按压点亮仅保留纯色变化） */
503503
@media (prefers-reduced-motion: reduce) {
504504
.kb-btn-primary-material,

0 commit comments

Comments
 (0)