평가 및 화면 구조 정리
This commit is contained in:
Yun Chan
parent
1248ae8ca4
commit
391639c1de
44 changed files with 5816 additions and 4501 deletions
688
apps/web/src/pages/persona-studio.css
Normal file
688
apps/web/src/pages/persona-studio.css
Normal file
|
|
@ -0,0 +1,688 @@
|
|||
.ps-root{
|
||||
display:grid;
|
||||
gap:20px;
|
||||
}
|
||||
.ps-head{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:flex-start;
|
||||
gap:16px;
|
||||
}
|
||||
.ps-head h1{
|
||||
margin:4px 0 0;
|
||||
font-size:clamp(24px,3vw,38px);
|
||||
line-height:1.16;
|
||||
letter-spacing:0;
|
||||
color:var(--text-strong);
|
||||
}
|
||||
.ps-head__actions{
|
||||
display:flex;
|
||||
gap:8px;
|
||||
flex-wrap:wrap;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
.ps-error{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
padding:12px 14px;
|
||||
border:1px solid var(--crit-solid);
|
||||
border-radius:var(--radius);
|
||||
color:var(--crit-text);
|
||||
background:var(--crit-tint);
|
||||
}
|
||||
.ps-layout{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(220px,300px) minmax(460px,1fr) minmax(240px,320px);
|
||||
gap:16px;
|
||||
align-items:start;
|
||||
}
|
||||
.ps-rail,
|
||||
.ps-inspector{
|
||||
position:sticky;
|
||||
top:76px;
|
||||
display:grid;
|
||||
gap:14px;
|
||||
min-width:0;
|
||||
}
|
||||
.ps-rail__head,
|
||||
.ps-editor__top,
|
||||
.ps-workflow,
|
||||
.ps-inspector__block{
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
padding:16px;
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.ps-rail__head,
|
||||
.ps-editor__top{
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
}
|
||||
.ps-rail__head b,
|
||||
.ps-editor__top h2{
|
||||
display:block;
|
||||
margin:4px 0 0;
|
||||
color:var(--text-strong);
|
||||
}
|
||||
.ps-editor__top h2{
|
||||
font-size:22px;
|
||||
line-height:1.25;
|
||||
letter-spacing:0;
|
||||
}
|
||||
.ps-list,
|
||||
.ps-approved,
|
||||
.ps-review-cards,
|
||||
.ps-check{
|
||||
display:grid;
|
||||
gap:8px;
|
||||
}
|
||||
.ps-list-row{
|
||||
width:100%;
|
||||
display:grid;
|
||||
grid-template-columns:42px minmax(0,1fr);
|
||||
gap:10px;
|
||||
align-items:center;
|
||||
padding:10px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
color:inherit;
|
||||
text-align:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
.ps-list-row:hover,
|
||||
.ps-list-row.is-active{
|
||||
border-color:var(--accent);
|
||||
background:var(--accent-tint);
|
||||
}
|
||||
.ps-list-row:disabled{
|
||||
opacity:.55;
|
||||
cursor:not-allowed;
|
||||
}
|
||||
.ps-list-row__code{
|
||||
display:grid;
|
||||
place-items:center;
|
||||
min-width:38px;
|
||||
min-height:34px;
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius-sm);
|
||||
color:var(--accent-deep);
|
||||
background:var(--bg-surface-2);
|
||||
font-weight:760;
|
||||
font-family:var(--font-num);
|
||||
}
|
||||
.ps-list-row__body{
|
||||
min-width:0;
|
||||
}
|
||||
.ps-list-row__body b,
|
||||
.ps-list-row__body small{
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.ps-list-row__body small,
|
||||
.ps-muted,
|
||||
.ps-approved-row span,
|
||||
.ps-review span{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
}
|
||||
.ps-approved{
|
||||
padding:14px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
}
|
||||
.ps-workflow{
|
||||
display:grid;
|
||||
gap:10px;
|
||||
}
|
||||
.ps-workflow-step{
|
||||
display:grid;
|
||||
grid-template-columns:30px minmax(0,1fr);
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
padding:10px;
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface-2);
|
||||
color:var(--text-muted);
|
||||
}
|
||||
.ps-workflow-step > span{
|
||||
display:grid;
|
||||
place-items:center;
|
||||
width:30px;
|
||||
height:30px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:50%;
|
||||
background:var(--bg-surface);
|
||||
color:var(--text-muted);
|
||||
font-family:var(--font-num);
|
||||
font-weight:760;
|
||||
}
|
||||
.ps-workflow-step b,
|
||||
.ps-workflow-step small{
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.ps-workflow-step b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-sm);
|
||||
}
|
||||
.ps-workflow-step small{
|
||||
margin-top:2px;
|
||||
font-size:11px;
|
||||
}
|
||||
.ps-workflow-step.is-current{
|
||||
border-color:var(--accent);
|
||||
background:var(--accent-tint);
|
||||
color:var(--accent-deep);
|
||||
}
|
||||
.ps-workflow-step.is-current > span,
|
||||
.ps-workflow-step.is-done > span{
|
||||
border-color:var(--accent);
|
||||
background:var(--accent);
|
||||
color:var(--text-on-accent);
|
||||
}
|
||||
.ps-approved-row{
|
||||
display:grid;
|
||||
grid-template-columns:38px minmax(0,1fr);
|
||||
gap:8px 10px;
|
||||
align-items:center;
|
||||
padding:8px 0;
|
||||
border-top:1px solid var(--hair);
|
||||
}
|
||||
.ps-approved-row:first-of-type{border-top:0;}
|
||||
.ps-approved-row__code{
|
||||
font-family:var(--font-num);
|
||||
font-size:var(--fs-xs);
|
||||
color:var(--text-muted);
|
||||
}
|
||||
.ps-approved-row__body{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:2px;
|
||||
}
|
||||
.ps-approved-row b{
|
||||
min-width:0;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
font-size:var(--fs-xs);
|
||||
}
|
||||
.ps-approved-row small{
|
||||
min-width:0;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
color:var(--text-muted);
|
||||
font-size:11px;
|
||||
}
|
||||
.ps-approved-row__actions{
|
||||
grid-column:1 / -1;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
gap:6px;
|
||||
}
|
||||
.ps-approved-row__actions .vg-btn{
|
||||
width:100%;
|
||||
}
|
||||
.ps-editor{
|
||||
display:grid;
|
||||
gap:14px;
|
||||
min-width:0;
|
||||
}
|
||||
.ps-source-panel{
|
||||
display:grid;
|
||||
gap:12px;
|
||||
padding:16px;
|
||||
}
|
||||
.ps-source-panel__head,
|
||||
.ps-source-panel__actions{
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
}
|
||||
.ps-source-panel__head b{
|
||||
display:block;
|
||||
margin-top:4px;
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-body);
|
||||
}
|
||||
.ps-source-grid{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(220px,.42fr) minmax(280px,.58fr);
|
||||
gap:12px;
|
||||
}
|
||||
.ps-source-grid .ps-field--wide{
|
||||
grid-column:1 / -1;
|
||||
}
|
||||
.ps-upload-card{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr) auto;
|
||||
align-items:center;
|
||||
gap:14px;
|
||||
padding:16px;
|
||||
border:1px dashed var(--accent);
|
||||
border-radius:var(--radius);
|
||||
background:var(--accent-tint);
|
||||
}
|
||||
.ps-upload-card b,
|
||||
.ps-upload-card span{
|
||||
display:block;
|
||||
}
|
||||
.ps-upload-card b{
|
||||
margin-top:5px;
|
||||
color:var(--text-strong);
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.ps-upload-card span{
|
||||
margin-top:4px;
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
line-height:1.45;
|
||||
}
|
||||
.ps-file-input{
|
||||
display:none;
|
||||
}
|
||||
.ps-source-panel__actions span{
|
||||
min-width:0;
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
line-height:1.45;
|
||||
}
|
||||
.ps-tabs,
|
||||
.ps-segments{
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:6px;
|
||||
}
|
||||
.ps-tabs button,
|
||||
.ps-segments button{
|
||||
min-height:34px;
|
||||
padding:0 12px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface);
|
||||
color:var(--text-body);
|
||||
font-weight:700;
|
||||
cursor:pointer;
|
||||
}
|
||||
.ps-tabs button.is-active,
|
||||
.ps-segments button.is-active{
|
||||
border-color:var(--accent);
|
||||
color:var(--accent-deep);
|
||||
background:var(--accent-tint);
|
||||
}
|
||||
.ps-edit-panel{
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
.ps-guidance{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,.95fr) minmax(260px,.75fr);
|
||||
gap:16px;
|
||||
padding:16px;
|
||||
border-bottom:1px solid var(--hair);
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.ps-guidance b{
|
||||
display:block;
|
||||
margin-top:5px;
|
||||
color:var(--text-strong);
|
||||
line-height:1.35;
|
||||
}
|
||||
.ps-guidance p{
|
||||
margin:6px 0 0;
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
line-height:1.5;
|
||||
}
|
||||
.ps-guidance ul{
|
||||
display:grid;
|
||||
gap:7px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
.ps-guidance li{
|
||||
display:grid;
|
||||
grid-template-columns:8px minmax(0,1fr);
|
||||
align-items:start;
|
||||
gap:8px;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-xs);
|
||||
line-height:1.45;
|
||||
}
|
||||
.ps-guidance li::before{
|
||||
content:"";
|
||||
width:6px;
|
||||
height:6px;
|
||||
margin-top:.55em;
|
||||
border-radius:50%;
|
||||
background:var(--accent);
|
||||
}
|
||||
.ps-form-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
gap:14px;
|
||||
padding:16px;
|
||||
}
|
||||
.ps-number-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(4,minmax(0,1fr));
|
||||
gap:10px;
|
||||
padding:16px;
|
||||
}
|
||||
.ps-field,
|
||||
.ps-numfield{
|
||||
display:grid;
|
||||
gap:7px;
|
||||
min-width:0;
|
||||
}
|
||||
.ps-list-field{
|
||||
display:grid;
|
||||
gap:9px;
|
||||
min-width:0;
|
||||
}
|
||||
.ps-field--wide{
|
||||
grid-column:1 / -1;
|
||||
}
|
||||
.ps-field span,
|
||||
.ps-numfield span,
|
||||
.ps-list-field__head span{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:760;
|
||||
}
|
||||
.ps-list-field__head{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:10px;
|
||||
min-width:0;
|
||||
}
|
||||
.ps-list-field__rows{
|
||||
display:grid;
|
||||
gap:8px;
|
||||
}
|
||||
.ps-list-item{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr) 34px;
|
||||
align-items:start;
|
||||
gap:8px;
|
||||
}
|
||||
.ps-field input,
|
||||
.ps-field select,
|
||||
.ps-field textarea,
|
||||
.ps-list-item textarea,
|
||||
.ps-numfield input{
|
||||
width:100%;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface);
|
||||
color:var(--text-body);
|
||||
font:inherit;
|
||||
}
|
||||
.ps-field input,
|
||||
.ps-field select,
|
||||
.ps-numfield input{
|
||||
min-height:38px;
|
||||
padding:0 10px;
|
||||
}
|
||||
.ps-field textarea,
|
||||
.ps-list-item textarea{
|
||||
min-height:92px;
|
||||
resize:vertical;
|
||||
padding:10px;
|
||||
line-height:1.55;
|
||||
}
|
||||
.ps-list-item textarea{
|
||||
min-height:44px;
|
||||
}
|
||||
.ps-list-item__remove{
|
||||
display:grid;
|
||||
place-items:center;
|
||||
width:34px;
|
||||
height:34px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface);
|
||||
color:var(--text-muted);
|
||||
cursor:pointer;
|
||||
}
|
||||
.ps-list-item__remove:hover{
|
||||
color:var(--danger);
|
||||
border-color:var(--danger);
|
||||
}
|
||||
.ps-field input:focus,
|
||||
.ps-field select:focus,
|
||||
.ps-field textarea:focus,
|
||||
.ps-list-item textarea:focus,
|
||||
.ps-numfield input:focus{
|
||||
outline:2px solid var(--accent);
|
||||
outline-offset:1px;
|
||||
border-color:var(--accent);
|
||||
}
|
||||
.ps-prompt{
|
||||
padding:16px;
|
||||
display:grid;
|
||||
gap:12px;
|
||||
}
|
||||
.ps-prompt-section{
|
||||
display:grid;
|
||||
gap:10px;
|
||||
padding:14px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface);
|
||||
}
|
||||
.ps-prompt-section__head{
|
||||
display:grid;
|
||||
gap:4px;
|
||||
}
|
||||
.ps-prompt-section__head h3{
|
||||
margin:0;
|
||||
color:var(--text-heading);
|
||||
font-size:var(--fs-md);
|
||||
line-height:1.25;
|
||||
}
|
||||
.ps-prompt-section__head p,
|
||||
.ps-prompt-body,
|
||||
.ps-prompt-empty{
|
||||
margin:0;
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.55;
|
||||
}
|
||||
.ps-prompt-rows{
|
||||
display:grid;
|
||||
gap:7px;
|
||||
margin:0;
|
||||
}
|
||||
.ps-prompt-row{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(110px,0.34fr) minmax(0,1fr);
|
||||
gap:10px;
|
||||
align-items:start;
|
||||
padding:8px 0;
|
||||
border-top:1px solid var(--border-faint);
|
||||
}
|
||||
.ps-prompt-row dt{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:760;
|
||||
}
|
||||
.ps-prompt-row dd{
|
||||
margin:0;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.55;
|
||||
white-space:pre-wrap;
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.ps-prompt-list{
|
||||
display:grid;
|
||||
gap:6px;
|
||||
margin:0;
|
||||
padding-left:18px;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.5;
|
||||
}
|
||||
.ps-prompt-list li{
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.ps-actions{
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
gap:8px;
|
||||
}
|
||||
.ps-status{
|
||||
margin:0;
|
||||
padding:10px 12px;
|
||||
border:1px solid var(--accent);
|
||||
border-radius:var(--radius-sm);
|
||||
color:var(--accent-deep);
|
||||
background:var(--accent-tint);
|
||||
font-size:var(--fs-sm);
|
||||
font-weight:700;
|
||||
}
|
||||
.ps-status.is-error{
|
||||
border-color:var(--crit-solid);
|
||||
color:var(--crit-text);
|
||||
background:var(--crit-tint);
|
||||
}
|
||||
.ps-check-row{
|
||||
display:grid;
|
||||
grid-template-columns:12px minmax(0,1fr);
|
||||
gap:8px;
|
||||
align-items:center;
|
||||
min-height:20px;
|
||||
font-size:var(--fs-xs);
|
||||
line-height:1.45;
|
||||
color:var(--text-body);
|
||||
}
|
||||
.ps-check-row .vg-dot{
|
||||
justify-self:center;
|
||||
align-self:center;
|
||||
}
|
||||
.ps-check-row--stack{
|
||||
align-items:start;
|
||||
}
|
||||
.ps-check-row--stack .vg-dot{
|
||||
margin-top:5px;
|
||||
}
|
||||
.ps-check-row--stack span{
|
||||
display:grid;
|
||||
gap:2px;
|
||||
}
|
||||
.ps-check-row--stack b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-xs);
|
||||
}
|
||||
.ps-check-row--stack small{
|
||||
color:var(--text-muted);
|
||||
font-size:11px;
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.ps-evidence{
|
||||
display:grid;
|
||||
gap:5px;
|
||||
padding:9px;
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface-2);
|
||||
color:var(--text-muted);
|
||||
font-size:11px;
|
||||
line-height:1.45;
|
||||
}
|
||||
.ps-evidence b{
|
||||
color:var(--accent-deep);
|
||||
font-family:var(--font-num);
|
||||
}
|
||||
.ps-review{
|
||||
display:grid;
|
||||
gap:8px;
|
||||
padding:10px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
}
|
||||
.ps-review > div:first-child{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:8px;
|
||||
}
|
||||
.ps-review__actions{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:6px;
|
||||
}
|
||||
.ps-review__actions .vg-btn{
|
||||
width:100%;
|
||||
}
|
||||
.ps-empty{
|
||||
display:grid;
|
||||
gap:4px;
|
||||
padding:14px;
|
||||
border:1px dashed var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
color:var(--text-muted);
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.ps-empty b{
|
||||
color:var(--text-strong);
|
||||
}
|
||||
@media (max-width:1180px){
|
||||
.ps-layout{
|
||||
grid-template-columns:minmax(210px,260px) minmax(0,1fr);
|
||||
}
|
||||
.ps-inspector{
|
||||
position:static;
|
||||
grid-column:1 / -1;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.ps-source-grid{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.ps-source-panel__actions{
|
||||
display:grid;
|
||||
}
|
||||
}
|
||||
@media (max-width:860px){
|
||||
.ps-head{
|
||||
display:grid;
|
||||
}
|
||||
.ps-head__actions{
|
||||
justify-content:start;
|
||||
}
|
||||
.ps-layout{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.ps-rail{
|
||||
position:static;
|
||||
}
|
||||
.ps-inspector{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.ps-form-grid,
|
||||
.ps-number-grid{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.ps-guidance,
|
||||
.ps-upload-card{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue