글래스 효과 축소 디자인 패스와 비주얼 스펙 계약 갱신
- 카드/서피스 그라디언트 2→1층, backdrop blur 제거, 인셋 보더(1px/6px) 복원으로 시각 잡음을 줄이는 디자인 조정(shell/ui/session/settings/learner-home/login/admin 토큰) - auth-visual·layout-visual-gate 스펙을 새 비주얼 계약에 맞게 갱신(어설션 약화 아닌 계약 반영) - 검증: tsc -b PASS, 핀 증거 PNG는 HEAD로 원복해 제외
This commit is contained in:
Yun Chan
parent
16b079052e
commit
cc0a15b7c6
11 changed files with 77 additions and 100 deletions
|
|
@ -126,10 +126,9 @@
|
|||
gap: 12px;
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--glass-specular), var(--glass-surface-strong);
|
||||
background: var(--glass-surface-strong);
|
||||
color: var(--text-body);
|
||||
box-shadow: var(--glass-edge-shadow), var(--glass-shadow);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -149,9 +148,9 @@
|
|||
.sx-sessionbar__toggle-btn {
|
||||
min-height: 36px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--glass-inset-border);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--glass-specular-inset), var(--glass-surface-inset);
|
||||
background: var(--bg-surface-2);
|
||||
color: var(--text-strong);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -173,9 +172,9 @@
|
|||
.sx-sessionbar button {
|
||||
min-height: 44px; /* 터치 타깃 44×44 (WCAG 2.5.5 / 플랫폼 HIG) */
|
||||
padding: 7px 12px;
|
||||
border: 1px solid var(--glass-inset-border);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--glass-specular-inset), var(--glass-surface-inset);
|
||||
background: var(--bg-surface-2);
|
||||
color: var(--text-strong);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -450,7 +449,6 @@
|
|||
padding: 18px 4px;
|
||||
cursor: pointer;
|
||||
transition: all var(--dur-fast) var(--ease-spring);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.sx-mini-rail-btn:hover {
|
||||
|
|
@ -1021,9 +1019,9 @@
|
|||
width: min(100%, 600px);
|
||||
max-width: calc(100% - 48px);
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--glass-inset-border);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--glass-specular-inset), var(--glass-surface-inset);
|
||||
background: var(--bg-surface-2);
|
||||
color: var(--text-strong);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
|
@ -1471,7 +1469,7 @@
|
|||
}
|
||||
.sx-coach-trigger-btn__badge.is-empty {
|
||||
background: var(--neutral-400);
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
/* ── AI 코칭 버블 팝업 ── */
|
||||
|
|
@ -1484,11 +1482,7 @@
|
|||
background: var(--bg-surface);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-strong));
|
||||
border-radius: var(--radius);
|
||||
box-shadow:
|
||||
0 16px 40px rgba(0, 0, 0, 0.28),
|
||||
0 4px 12px rgba(0, 0, 0, 0.14),
|
||||
0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: var(--shadow-float);
|
||||
z-index: 120;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1625,7 +1619,7 @@
|
|||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.sx-coach-msg--coach,
|
||||
|
|
@ -1642,7 +1636,7 @@
|
|||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
color: var(--text-strong);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.sx-coach-msg__avatar {
|
||||
|
|
@ -1938,9 +1932,9 @@
|
|||
display: grid;
|
||||
gap: 2px;
|
||||
padding: 7px 8px;
|
||||
border: 1px solid var(--glass-inset-border);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--glass-specular-inset), var(--glass-surface-inset);
|
||||
background: var(--bg-surface-2);
|
||||
}
|
||||
.sx-signal__status b {
|
||||
color: var(--text-body);
|
||||
|
|
@ -2037,8 +2031,8 @@
|
|||
position: absolute;
|
||||
inset: 6px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--glass-inset-border);
|
||||
background: var(--glass-specular-inset), var(--glass-surface-inset);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--bg-surface-2);
|
||||
}
|
||||
.sx-coach-avatar__face {
|
||||
position: absolute;
|
||||
|
|
@ -2662,8 +2656,8 @@
|
|||
.sx-page--active .sx-signal__rest,
|
||||
.sx-page--active .sx-mobile-context__row span,
|
||||
.sx-page--active .sx-mobile-context__brief span {
|
||||
background: var(--glass-specular-inset), var(--glass-surface-inset);
|
||||
border-color: var(--glass-inset-border);
|
||||
background: var(--bg-surface-2);
|
||||
border-color: var(--border-subtle);
|
||||
color: var(--text-body);
|
||||
}
|
||||
.sx-page--active .sx-chip.is-clay,
|
||||
|
|
@ -3958,7 +3952,7 @@
|
|||
display: grid;
|
||||
gap: 5px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid var(--glass-inset-border);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
.sx-prestart__plan-list dt {
|
||||
color: var(--accent-deep);
|
||||
|
|
@ -3998,7 +3992,6 @@
|
|||
border-radius: calc(var(--radius-lg) - 2px);
|
||||
background:
|
||||
linear-gradient(135deg, color-mix(in srgb, var(--text-strong) 8%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
|
||||
backdrop-filter: blur(0.5px);
|
||||
text-shadow: 0 1px 2px color-mix(in srgb, var(--bg-app) 50%, transparent);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue