feat(coach): AI 코칭 버튼 및 버블 팝업 대화형 조언 기능 구현
This commit is contained in:
Yun Chan
parent
8a34dd2afc
commit
70d7cb34a3
36 changed files with 4521 additions and 1264 deletions
|
|
@ -75,48 +75,35 @@
|
|||
min-width:0;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(4,minmax(0,1fr));
|
||||
gap:10px;
|
||||
gap:12px;
|
||||
}
|
||||
/* 중간 폭 이하 전용 가로 탭 — 데스크톱에서는 숨김(리뷰 화면 sr-tabs와 동일 패턴) */
|
||||
.lh-tabs{
|
||||
display:none;
|
||||
gap:6px;
|
||||
gap:4px;
|
||||
padding:4px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
border-radius:var(--radius-pill);
|
||||
background:var(--bg-surface-2);
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.lh-tabs button{
|
||||
position:relative;
|
||||
flex:1 1 0;
|
||||
min-width:0;
|
||||
padding:9px 12px;
|
||||
padding:8px 12px;
|
||||
border:1px solid transparent;
|
||||
border-radius:calc(var(--radius) - 2px);
|
||||
border-radius:var(--radius-pill);
|
||||
background:transparent;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
font-weight:700;
|
||||
font-weight:650;
|
||||
cursor:pointer;
|
||||
min-height:44px;
|
||||
min-height:42px;
|
||||
transition:all var(--dur-fast) var(--ease-spring);
|
||||
}
|
||||
/* D6(탭 구분 강화): 비활성 탭이 배경과 같아 "여러 개 중 하나"로 안 읽혔다.
|
||||
비활성 탭 사이에만 세로 구분선을 넣는다. 활성 탭은 자체 배경/테두리로
|
||||
이미 구분되므로 활성 탭에 붙는 구분선은 숨겨 이중 경계선을 막는다. */
|
||||
.lh-tabs button + button::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
left:-4px;
|
||||
top:22%;
|
||||
bottom:22%;
|
||||
width:1px;
|
||||
background:var(--border-strong);
|
||||
opacity:.55;
|
||||
pointer-events:none;
|
||||
}
|
||||
.lh-tabs button.is-active::before,
|
||||
.lh-tabs button.is-active + button::before{
|
||||
opacity:0;
|
||||
.lh-tabs button:active{
|
||||
transform:scale(0.96);
|
||||
}
|
||||
.lh-tabs button:hover{
|
||||
color:var(--text-strong);
|
||||
|
|
@ -131,6 +118,7 @@
|
|||
border-color:var(--border-strong);
|
||||
color:var(--text-strong);
|
||||
box-shadow:var(--shadow-sm);
|
||||
font-weight:750;
|
||||
}
|
||||
.lh-dashboard-side{
|
||||
min-width:0;
|
||||
|
|
@ -448,7 +436,7 @@
|
|||
inset:0 auto 0 0;
|
||||
width:var(--lh-stage-progress,0%);
|
||||
border-radius:inherit;
|
||||
background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#f2c36b));
|
||||
background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 72%,var(--warn-solid)));
|
||||
}
|
||||
.lh-recap__quote{
|
||||
min-width:0;
|
||||
|
|
@ -1798,19 +1786,19 @@
|
|||
[data-theme="dark"] .lh-compact-list li,
|
||||
[data-theme="dark"] .lh-persona,
|
||||
[data-theme="dark"] .lh-persona-progress__row{
|
||||
border-color:rgba(203,227,220,.11);
|
||||
background:rgba(255,255,255,.045);
|
||||
border-color:color-mix(in srgb, var(--accent) 11%, transparent);
|
||||
background:color-mix(in srgb, var(--text-strong) 4.5%, transparent);
|
||||
}
|
||||
[data-theme="dark"] .lh-recommend-card{
|
||||
border-color:rgba(111,179,164,.22);
|
||||
border-color:color-mix(in srgb, var(--accent) 22%, transparent);
|
||||
background:
|
||||
linear-gradient(135deg,rgba(111,179,164,.12),transparent 62%),
|
||||
rgba(255,255,255,.052);
|
||||
linear-gradient(135deg,color-mix(in srgb, var(--accent) 12%, transparent),transparent 62%),
|
||||
color-mix(in srgb, var(--text-strong) 5.2%, transparent);
|
||||
}
|
||||
[data-theme="dark"] .lh-persona.is-selected,
|
||||
[data-theme="dark"] .lh-persona-progress__row.is-selected{
|
||||
border-color:rgba(111,179,164,.66);
|
||||
background:rgba(111,179,164,.13);
|
||||
border-color:color-mix(in srgb, var(--accent) 66%, transparent);
|
||||
background:color-mix(in srgb, var(--accent) 13%, transparent);
|
||||
}
|
||||
@keyframes lhSkel{0%{background-position:120% 0}100%{background-position:-80% 0}}
|
||||
/* 중간 폭(1181~1420px): 우측 사이드는 유지하되 리캡+코치 2열은 세로 스택으로.
|
||||
|
|
@ -1939,9 +1927,14 @@
|
|||
.lh-recap__facts{
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.lh-dashboard-status{
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
gap:10px;
|
||||
}
|
||||
.lh-metric-card{
|
||||
min-height:0;
|
||||
padding:12px;
|
||||
padding:14px;
|
||||
border-radius:var(--radius);
|
||||
}
|
||||
.lh-personas{
|
||||
display:flex;
|
||||
|
|
@ -2175,7 +2168,7 @@
|
|||
/* ═══ 학습 대시보드 보태니컬 시안 적용 ═══
|
||||
카드 광원은 좌상단, 황금 기운은 헤어라인과 가장자리에서만 아주 옅게 사용한다. */
|
||||
.vg-shell--learner-dashboard .lh-root {
|
||||
--lh-gold: #b5975d;
|
||||
--lh-gold: var(--clay-deep);
|
||||
--lh-botanical-hair: color-mix(in srgb, var(--lh-gold) 34%, var(--border-subtle));
|
||||
--lh-botanical-line: color-mix(in srgb, var(--lh-gold) 17%, var(--border-subtle));
|
||||
gap: clamp(18px, 2vw, 28px);
|
||||
|
|
@ -2187,7 +2180,7 @@
|
|||
.vg-shell--learner-dashboard .lh-head__status {
|
||||
border-color: var(--lh-botanical-hair);
|
||||
background: var(--glass-surface-inset);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
|
||||
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 62%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-dashboard-status {
|
||||
|
|
@ -2261,7 +2254,7 @@
|
|||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: radial-gradient(circle at 100% 0%, rgba(187, 156, 97, 0.06), transparent 22rem);
|
||||
background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--clay) 6%, transparent), transparent 22rem);
|
||||
pointer-events: none;
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-work-cluster > * {
|
||||
|
|
@ -2298,7 +2291,7 @@
|
|||
background:var(--accent);
|
||||
border-color:color-mix(in srgb,var(--accent-deep) 78%,var(--lh-gold));
|
||||
color:var(--text-on-accent);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 28%, transparent);
|
||||
}
|
||||
.vg-shell--learner-dashboard .lh-coach-card__cta:hover:not(:disabled) {
|
||||
background:var(--accent-deep);
|
||||
|
|
@ -2311,12 +2304,12 @@
|
|||
}
|
||||
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-root {
|
||||
--lh-gold: #bca579;
|
||||
--lh-gold: var(--clay);
|
||||
--lh-botanical-hair: color-mix(in srgb, var(--lh-gold) 27%, var(--border-subtle));
|
||||
--lh-botanical-line: color-mix(in srgb, var(--lh-gold) 16%, var(--border-subtle));
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-head__status {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 245, 222, 0.055);
|
||||
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--clay-tint) 5.5%, transparent);
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-metric-card {
|
||||
--lh-card-art: url("/design-elements/learner-dashboard/card-leaf-sprig.png");
|
||||
|
|
@ -2336,8 +2329,8 @@
|
|||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-work-cluster::before {
|
||||
background:
|
||||
linear-gradient(105deg, rgba(203, 184, 139, 0.025), transparent 38%),
|
||||
radial-gradient(circle at 100% 0%, rgba(187, 156, 97, 0.055), transparent 22rem);
|
||||
linear-gradient(105deg, color-mix(in srgb, var(--clay) 2.5%, transparent), transparent 38%),
|
||||
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--clay) 5.5%, transparent), transparent 22rem);
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-coach-card::after {
|
||||
background-image: url("/design-elements/learner-dashboard/card-paired-leaves.png");
|
||||
|
|
@ -2600,11 +2593,11 @@
|
|||
}
|
||||
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-root {
|
||||
--text-strong: #eee8dc;
|
||||
--text-body: #c3beb2;
|
||||
--text-muted: #928f86;
|
||||
--lh-botanical-hair: rgba(184, 160, 110, 0.31);
|
||||
--lh-botanical-line: rgba(184, 160, 110, 0.22);
|
||||
--text-strong: var(--ink-0);
|
||||
--text-body: var(--ink-2);
|
||||
--text-muted: var(--ink-3);
|
||||
--lh-botanical-hair: color-mix(in srgb, var(--clay) 31%, transparent);
|
||||
--lh-botanical-line: color-mix(in srgb, var(--clay) 22%, transparent);
|
||||
}
|
||||
[data-theme="dark"] .vg-shell--learner-dashboard .lh-recap__avatar {
|
||||
border: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue