케이스 이어하기 UI와 공통 탭·이미지 복구를 반영
This commit is contained in:
Yun Chan
parent
72353ecd82
commit
f1b80676c1
38 changed files with 3581 additions and 455 deletions
|
|
@ -94,27 +94,32 @@
|
|||
padding:8px 12px;
|
||||
border:1px solid transparent;
|
||||
border-radius:var(--radius-pill);
|
||||
background:transparent;
|
||||
background-color:transparent;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
font-weight:650;
|
||||
cursor:pointer;
|
||||
min-height:42px;
|
||||
transition:all var(--dur-fast) var(--ease-spring);
|
||||
min-height:44px;
|
||||
transition:
|
||||
background-color var(--dur-fast) var(--ease-spring),
|
||||
border-color var(--dur-fast) var(--ease-spring),
|
||||
box-shadow var(--dur-fast) var(--ease-spring),
|
||||
color var(--dur-fast) var(--ease-spring),
|
||||
transform var(--dur-fast) var(--ease-spring);
|
||||
}
|
||||
.lh-tabs button:active{
|
||||
transform:scale(0.96);
|
||||
}
|
||||
.lh-tabs button:hover{
|
||||
color:var(--text-strong);
|
||||
background:color-mix(in srgb,var(--text-strong) 5%,transparent);
|
||||
background-color:color-mix(in srgb,var(--text-strong) 5%,transparent);
|
||||
}
|
||||
.lh-tabs button:focus-visible{
|
||||
outline:2px solid var(--focus-ring);
|
||||
outline-offset:1px;
|
||||
}
|
||||
.lh-tabs button.is-active{
|
||||
background:var(--bg-surface);
|
||||
background-color:var(--bg-surface);
|
||||
border-color:var(--border-strong);
|
||||
color:var(--text-strong);
|
||||
box-shadow:var(--shadow-sm);
|
||||
|
|
@ -1019,10 +1024,12 @@
|
|||
.lh-practice-launch-intent dl{
|
||||
grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
|
||||
}
|
||||
.lh-practice-launch-intent__details{
|
||||
.lh-practice-launch-intent__details,
|
||||
.lh-continuity__memory{
|
||||
min-width:0;
|
||||
}
|
||||
.lh-practice-launch-intent__details summary{
|
||||
.lh-practice-launch-intent__details summary,
|
||||
.lh-continuity__memory summary{
|
||||
min-width:0;
|
||||
min-height:44px;
|
||||
display:grid;
|
||||
|
|
@ -1037,15 +1044,18 @@
|
|||
cursor:pointer;
|
||||
list-style:none;
|
||||
}
|
||||
.lh-practice-launch-intent__details summary::-webkit-details-marker{
|
||||
.lh-practice-launch-intent__details summary::-webkit-details-marker,
|
||||
.lh-continuity__memory summary::-webkit-details-marker{
|
||||
display:none;
|
||||
}
|
||||
.lh-practice-launch-intent__details summary span{
|
||||
.lh-practice-launch-intent__details summary span,
|
||||
.lh-continuity__memory summary span{
|
||||
color:var(--accent-deep);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:760;
|
||||
}
|
||||
.lh-practice-launch-intent__details summary b{
|
||||
.lh-practice-launch-intent__details summary b,
|
||||
.lh-continuity__memory summary b{
|
||||
min-width:0;
|
||||
overflow:hidden;
|
||||
color:var(--text-strong);
|
||||
|
|
@ -1054,19 +1064,62 @@
|
|||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.lh-practice-launch-intent__details summary svg{
|
||||
.lh-practice-launch-intent__details summary svg,
|
||||
.lh-continuity__memory summary svg{
|
||||
transition:transform var(--dur-base) var(--ease-out);
|
||||
}
|
||||
.lh-practice-launch-intent__details[open] summary svg{
|
||||
.lh-practice-launch-intent__details[open] summary svg,
|
||||
.lh-continuity__memory[open] summary svg{
|
||||
transform:rotate(90deg);
|
||||
}
|
||||
.lh-practice-launch-intent__details summary:focus-visible{
|
||||
.lh-practice-launch-intent__details summary:focus-visible,
|
||||
.lh-continuity__memory summary:focus-visible{
|
||||
outline:2px solid var(--border-focus);
|
||||
outline-offset:2px;
|
||||
}
|
||||
.lh-practice-launch-intent__details dl{
|
||||
margin-top:var(--sp-2);
|
||||
}
|
||||
.lh-continuity__memory-body{
|
||||
margin-top:var(--sp-2);
|
||||
}
|
||||
.lh-continuity__memory-body > p{
|
||||
margin:0;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.55;
|
||||
word-break:keep-all;
|
||||
}
|
||||
.lh-continuity__memory-body dl{
|
||||
display:grid;
|
||||
gap:var(--sp-2);
|
||||
margin:0;
|
||||
}
|
||||
.lh-continuity__memory-body dl > div{
|
||||
min-width:0;
|
||||
padding-top:var(--sp-2);
|
||||
border-top:1px solid var(--border-subtle);
|
||||
}
|
||||
.lh-continuity__memory-body dt{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:760;
|
||||
}
|
||||
.lh-continuity__memory-body dd{
|
||||
margin:5px 0 0;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.55;
|
||||
white-space:pre-wrap;
|
||||
word-break:keep-all;
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.lh-continuity__memory-body ul{
|
||||
display:grid;
|
||||
gap:4px;
|
||||
margin:0;
|
||||
padding-left:18px;
|
||||
}
|
||||
.lh-practice-layout{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
|
|
@ -1357,6 +1410,139 @@
|
|||
text-align:right;
|
||||
word-break:keep-all;
|
||||
}
|
||||
.lh-launch-mode{
|
||||
width:min(100%,340px);
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
}
|
||||
.lh-launch-mode legend{
|
||||
margin:0 0 6px;
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:760;
|
||||
}
|
||||
.lh-launch-mode > div{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
gap:8px;
|
||||
}
|
||||
.lh-launch-mode label{
|
||||
position:relative;
|
||||
min-width:0;
|
||||
display:block;
|
||||
}
|
||||
.lh-launch-mode input{
|
||||
position:absolute;
|
||||
width:1px;
|
||||
height:1px;
|
||||
margin:-1px;
|
||||
overflow:hidden;
|
||||
clip:rect(0 0 0 0);
|
||||
white-space:nowrap;
|
||||
}
|
||||
.lh-launch-mode label > span{
|
||||
min-width:0;
|
||||
min-height:44px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
padding:8px 10px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface-2);
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
font-weight:740;
|
||||
line-height:1.25;
|
||||
word-break:keep-all;
|
||||
cursor:pointer;
|
||||
}
|
||||
.lh-launch-mode label:hover input:not(:disabled) + span{
|
||||
border-color:var(--border-strong);
|
||||
background:var(--bg-surface);
|
||||
color:var(--text-strong);
|
||||
}
|
||||
.lh-launch-mode input:checked + span{
|
||||
border-color:var(--accent);
|
||||
background:var(--accent-tint);
|
||||
color:var(--accent-deep);
|
||||
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
|
||||
}
|
||||
.lh-launch-mode input:focus-visible + span{
|
||||
outline:2px solid var(--focus-ring);
|
||||
outline-offset:2px;
|
||||
}
|
||||
.lh-launch-mode input:disabled + span{
|
||||
cursor:not-allowed;
|
||||
opacity:.58;
|
||||
}
|
||||
.lh-continuity{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:var(--sp-3);
|
||||
padding:var(--sp-4);
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.lh-continuity__notice,
|
||||
.lh-continuity__head{
|
||||
min-width:0;
|
||||
}
|
||||
.lh-continuity__notice p,
|
||||
.lh-continuity__head p,
|
||||
.lh-continuity__status{
|
||||
margin:7px 0 0;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.55;
|
||||
word-break:keep-all;
|
||||
}
|
||||
.lh-continuity__status.is-error{
|
||||
color:var(--warn-text);
|
||||
}
|
||||
.lh-continuity__head{
|
||||
display:flex;
|
||||
align-items:start;
|
||||
justify-content:space-between;
|
||||
gap:var(--sp-3);
|
||||
}
|
||||
.lh-continuity__head > span{
|
||||
flex:none;
|
||||
color:var(--accent-deep);
|
||||
font-family:var(--font-num);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:800;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.lh-continuity__case-select{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:6px;
|
||||
}
|
||||
.lh-continuity__case-select > span{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:760;
|
||||
}
|
||||
.lh-continuity__case-select select{
|
||||
width:100%;
|
||||
min-height:44px;
|
||||
padding:8px 10px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface);
|
||||
color:var(--text-strong);
|
||||
font:inherit;
|
||||
}
|
||||
.lh-continuity__case-select select:focus-visible{
|
||||
outline:2px solid var(--focus-ring);
|
||||
outline-offset:2px;
|
||||
}
|
||||
.lh-continuity__case-select select:disabled{
|
||||
cursor:not-allowed;
|
||||
opacity:.72;
|
||||
}
|
||||
.lh-summary{
|
||||
min-width:0;
|
||||
padding:var(--sp-4);
|
||||
|
|
@ -1406,13 +1592,15 @@
|
|||
gap:var(--sp-4);
|
||||
padding:var(--sp-5);
|
||||
}
|
||||
.lh-activity__stats{
|
||||
.lh-activity__stats,
|
||||
.lh-continuity__stats{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:8px;
|
||||
}
|
||||
.lh-activity__stats span{
|
||||
.lh-activity__stats span,
|
||||
.lh-continuity__stats span{
|
||||
min-width:0;
|
||||
min-height:58px;
|
||||
display:grid;
|
||||
|
|
@ -1423,13 +1611,15 @@
|
|||
border-radius:var(--radius);
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.lh-activity__stats b{
|
||||
.lh-activity__stats b,
|
||||
.lh-continuity__stats b{
|
||||
color:var(--text-strong);
|
||||
font-family:var(--font-num);
|
||||
font-size:22px;
|
||||
line-height:1;
|
||||
}
|
||||
.lh-activity__stats small{
|
||||
.lh-activity__stats small,
|
||||
.lh-continuity__stats small{
|
||||
color:var(--text-muted);
|
||||
font-size:12px;
|
||||
font-weight:720;
|
||||
|
|
@ -1912,6 +2102,7 @@
|
|||
.lh-list-pane,
|
||||
.lh-preview__main,
|
||||
.lh-activity,
|
||||
.lh-continuity,
|
||||
.lh-persona-progress,
|
||||
.lh-history-main,
|
||||
.lh-archive-note{
|
||||
|
|
@ -1975,16 +2166,27 @@
|
|||
margin:0;
|
||||
max-width:70%;
|
||||
}
|
||||
.lh-activity__stats{
|
||||
.lh-activity__stats,
|
||||
.lh-continuity__stats{
|
||||
gap:6px;
|
||||
}
|
||||
.lh-activity__stats span{
|
||||
.lh-activity__stats span,
|
||||
.lh-continuity__stats span{
|
||||
min-height:46px;
|
||||
padding:8px 4px;
|
||||
text-align:center;
|
||||
}
|
||||
.lh-activity__stats b{font-size:17px;}
|
||||
.lh-activity__stats small{font-size:11px;}
|
||||
.lh-activity__stats b,
|
||||
.lh-continuity__stats b{font-size:17px;}
|
||||
.lh-activity__stats small,
|
||||
.lh-continuity__stats small{font-size:11px;}
|
||||
.lh-launch-mode{
|
||||
width:100%;
|
||||
}
|
||||
.lh-continuity__head{
|
||||
display:grid;
|
||||
gap:6px;
|
||||
}
|
||||
.lh-session-list li{
|
||||
grid-template-columns:1fr;
|
||||
gap:10px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue