운영 화면과 회기 리뷰 UI 갱신
This commit is contained in:
Yun Chan
parent
e7ebb38177
commit
3a9f70a97b
18 changed files with 2210 additions and 137 deletions
|
|
@ -544,8 +544,8 @@
|
|||
}
|
||||
.sx-page--active .sx-stage {
|
||||
background:
|
||||
radial-gradient(circle at 28% 50%, rgba(145, 200, 189, 0.18), transparent 42%),
|
||||
linear-gradient(135deg, rgba(11, 22, 20, 0.96), rgba(31, 43, 39, 0.93)),
|
||||
radial-gradient(circle at 28% 50%, rgba(197, 222, 214, 0.26), transparent 42%),
|
||||
linear-gradient(135deg, rgba(24, 42, 38, 0.94), rgba(48, 65, 59, 0.9)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
border-color: rgba(255, 255, 255, 0.11);
|
||||
box-shadow: 0 18px 44px rgba(7, 16, 14, 0.28);
|
||||
|
|
@ -949,6 +949,33 @@
|
|||
.sx-utt.is-partial .sx-utt__line {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.sx-utt.is-thinking .sx-utt__line {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-muted);
|
||||
border: 1px dashed color-mix(in srgb, var(--clay-deep) 24%, transparent);
|
||||
}
|
||||
.sx-utt__dots {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
flex: none;
|
||||
}
|
||||
.sx-utt__dots i {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.35;
|
||||
animation: sxThinkingDot 900ms var(--ease-in-out) infinite;
|
||||
}
|
||||
.sx-utt__dots i:nth-child(2) {
|
||||
animation-delay: 120ms;
|
||||
}
|
||||
.sx-utt__dots i:nth-child(3) {
|
||||
animation-delay: 240ms;
|
||||
}
|
||||
.sx-utt__caret {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
|
|
@ -961,6 +988,10 @@
|
|||
@keyframes sxCaret {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
@keyframes sxThinkingDot {
|
||||
0%, 100% { opacity: 0.25; transform: translateY(0); }
|
||||
50% { opacity: 0.9; transform: translateY(-2px); }
|
||||
}
|
||||
|
||||
/* "최신으로" 칩 (위로 스크롤 시) */
|
||||
.sx-transcript__jump {
|
||||
|
|
@ -1642,6 +1673,10 @@
|
|||
background: rgba(204, 143, 119, 0.12);
|
||||
color: #edf5f2;
|
||||
}
|
||||
.sx-page--active .sx-utt.is-thinking .sx-utt__line {
|
||||
color: rgba(234, 240, 241, 0.62);
|
||||
border-color: rgba(229, 173, 149, 0.22);
|
||||
}
|
||||
.sx-page--active .sx-utt.is-learner .sx-utt__line {
|
||||
background: rgba(111, 179, 164, 0.13);
|
||||
color: #edf5f2;
|
||||
|
|
@ -1731,6 +1766,36 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.sx-voice-skip {
|
||||
flex: none;
|
||||
height: 34px;
|
||||
padding: 0 11px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--bg-surface-2);
|
||||
color: var(--text-body);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sx-voice-skip:hover {
|
||||
border-color: var(--border-focus);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.sx-page--active .sx-voice-skip {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
color: rgba(238, 244, 242, 0.86);
|
||||
}
|
||||
.sx-page--active .sx-voice-skip:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.sx-cb-sep {
|
||||
width: 1px;
|
||||
|
|
@ -2336,6 +2401,72 @@
|
|||
background: rgba(204, 143, 119, 0.17);
|
||||
color: #f0bda9;
|
||||
}
|
||||
.sx-theory {
|
||||
width: min(100%, 520px);
|
||||
margin: var(--sp-4) 0 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.sx-theory legend {
|
||||
padding: 0;
|
||||
color: rgba(238, 244, 242, 0.54);
|
||||
font-size: 11.5px;
|
||||
font-weight: 760;
|
||||
}
|
||||
.sx-theory__seg {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(6, 15, 14, 0.26);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.sx-theory__seg button {
|
||||
min-width: 0;
|
||||
min-height: 56px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 3px;
|
||||
padding: 8px 7px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: calc(var(--radius-sm) - 2px);
|
||||
background: transparent;
|
||||
color: rgba(238, 244, 242, 0.72);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sx-theory__seg button:hover {
|
||||
border-color: rgba(145, 200, 189, 0.3);
|
||||
color: #f4f8f7;
|
||||
}
|
||||
.sx-theory__seg button:focus-visible {
|
||||
outline: 2px solid rgba(145, 200, 189, 0.7);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.sx-theory__seg button.is-selected {
|
||||
background: rgba(145, 200, 189, 0.18);
|
||||
border-color: rgba(145, 200, 189, 0.46);
|
||||
color: #f4f8f7;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.sx-theory__seg span,
|
||||
.sx-theory__seg small {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.sx-theory__seg span {
|
||||
font-size: 13px;
|
||||
font-weight: 760;
|
||||
}
|
||||
.sx-theory__seg small {
|
||||
color: rgba(238, 244, 242, 0.56);
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
}
|
||||
.sx-prestart__note {
|
||||
max-width: 460px;
|
||||
font-size: 12.5px;
|
||||
|
|
@ -2431,16 +2562,21 @@
|
|||
.sx-stage.is-paused::after {
|
||||
content: "일시정지";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
inset: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-on-accent);
|
||||
background: color-mix(in srgb, var(--bg-stage) 62%, transparent);
|
||||
backdrop-filter: blur(1px);
|
||||
color: #f4faf7;
|
||||
border: 1px solid rgba(203, 227, 220, 0.14);
|
||||
border-radius: calc(var(--radius-lg) - 2px);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(238, 244, 242, 0.08), rgba(145, 200, 189, 0.06));
|
||||
backdrop-filter: blur(0.5px);
|
||||
text-shadow: 0 1px 2px rgba(7, 16, 14, 0.5);
|
||||
}
|
||||
|
||||
/* ── 반응형 ── */
|
||||
|
|
@ -2918,6 +3054,23 @@
|
|||
.sx-page--prestart .sx-prestart__chips {
|
||||
display: none;
|
||||
}
|
||||
.sx-page--prestart .sx-theory {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.sx-page--prestart .sx-theory__seg {
|
||||
gap: 4px;
|
||||
padding: 3px;
|
||||
}
|
||||
.sx-page--prestart .sx-theory__seg button {
|
||||
min-height: 50px;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
.sx-page--prestart .sx-theory__seg span {
|
||||
font-size: 12px;
|
||||
}
|
||||
.sx-page--prestart .sx-theory__seg small {
|
||||
font-size: 10.5px;
|
||||
}
|
||||
.sx-page--prestart .sx-prestart__plan {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2971,6 +3124,14 @@
|
|||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.sx-voice-skip span {
|
||||
display: none;
|
||||
}
|
||||
.sx-voice-skip {
|
||||
width: 34px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
|
|
@ -3246,6 +3407,7 @@
|
|||
.sx-orb,
|
||||
.sx-mic.is-on::after,
|
||||
.sx-utt__caret,
|
||||
.sx-utt__dots i,
|
||||
.sx-transcript__live-dot.is-live {
|
||||
animation: none !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue