평가 및 화면 구조 정리
This commit is contained in:
Yun Chan
parent
1248ae8ca4
commit
391639c1de
44 changed files with 5816 additions and 4501 deletions
914
apps/web/src/pages/professor.css
Normal file
914
apps/web/src/pages/professor.css
Normal file
|
|
@ -0,0 +1,914 @@
|
|||
.pf-root{
|
||||
max-width:1280px;
|
||||
margin:0 auto;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:16px;
|
||||
}
|
||||
.pf-head{
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
justify-content:space-between;
|
||||
gap:var(--sp-4);
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
.pf-head__actions{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:flex-end;
|
||||
gap:8px;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
.pf-head h1{
|
||||
margin:6px 0 0;
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-h2);
|
||||
line-height:1.28;
|
||||
letter-spacing:0;
|
||||
}
|
||||
.pf-head p{
|
||||
margin:6px 0 0;
|
||||
max-width:760px;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-xs);
|
||||
line-height:1.55;
|
||||
}
|
||||
.pf-signal-strip{
|
||||
order:1;
|
||||
display:grid;
|
||||
grid-template-columns:1fr;
|
||||
gap:0;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-triage{
|
||||
display:grid;
|
||||
grid-template-columns:auto minmax(0,1fr) auto;
|
||||
align-items:center;
|
||||
gap:12px;
|
||||
min-width:0;
|
||||
padding:14px 16px;
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.pf-triage.is-active{
|
||||
background:color-mix(in srgb,var(--accent-tint) 42%,var(--bg-surface));
|
||||
}
|
||||
.pf-triage__copy{
|
||||
min-width:0;
|
||||
}
|
||||
.pf-triage__copy .vg-kicker{
|
||||
margin-bottom:4px;
|
||||
}
|
||||
.pf-triage__copy b{
|
||||
display:block;
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-body);
|
||||
line-height:1.35;
|
||||
}
|
||||
.pf-triage__copy span,
|
||||
.pf-triage__meta small{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
}
|
||||
.pf-triage__meta{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
gap:0;
|
||||
min-width:180px;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-radius:var(--radius);
|
||||
background:color-mix(in srgb,var(--bg-surface) 86%,transparent);
|
||||
overflow:hidden;
|
||||
}
|
||||
.pf-triage__meta span{
|
||||
display:grid;
|
||||
align-content:center;
|
||||
gap:2px;
|
||||
padding:9px 12px;
|
||||
}
|
||||
.pf-triage__meta span + span{
|
||||
border-left:1px solid var(--hair);
|
||||
}
|
||||
.pf-triage__meta b{
|
||||
color:var(--text-strong);
|
||||
font-family:var(--font-num);
|
||||
font-size:17px;
|
||||
line-height:1;
|
||||
}
|
||||
.pf-error{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
padding:12px 14px;
|
||||
border-radius:var(--radius);
|
||||
background:var(--crit-tint);
|
||||
color:var(--crit-text);
|
||||
font-size:var(--fs-sm);
|
||||
}
|
||||
.pf-kpis{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(6,minmax(0,1fr));
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius);
|
||||
overflow:hidden;
|
||||
background:var(--bg-surface);
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.pf-kpi{
|
||||
position:relative;
|
||||
min-width:0;
|
||||
padding:14px 16px;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr) auto;
|
||||
gap:4px 10px;
|
||||
}
|
||||
.pf-kpi:nth-child(n+2){border-left:1px solid var(--hair);}
|
||||
.pf-kpi:nth-child(n+4){border-top:0;}
|
||||
.pf-kpi--primary,
|
||||
.pf-kpi--warn{
|
||||
background:color-mix(in srgb,var(--accent-tint) 32%,var(--bg-surface));
|
||||
}
|
||||
.pf-kpi--warn{
|
||||
background:color-mix(in srgb,var(--warn-tint) 36%,var(--bg-surface));
|
||||
}
|
||||
.pf-kpi--primary .pf-kpi__ic{
|
||||
color:var(--text-on-accent);
|
||||
background:var(--accent);
|
||||
}
|
||||
.pf-kpi--warn .pf-kpi__ic{
|
||||
color:var(--warn-text);
|
||||
background:var(--warn-tint);
|
||||
}
|
||||
.pf-kpi__ic{
|
||||
grid-column:2;
|
||||
grid-row:1 / span 3;
|
||||
width:30px;
|
||||
height:30px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
border-radius:var(--radius);
|
||||
color:var(--accent);
|
||||
background:var(--accent-tint);
|
||||
}
|
||||
.pf-kpi__lab{
|
||||
display:block;
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:700;
|
||||
}
|
||||
.pf-kpi b{
|
||||
display:block;
|
||||
color:var(--text-strong);
|
||||
font-family:var(--font-num);
|
||||
font-size:24px;
|
||||
line-height:1;
|
||||
}
|
||||
.pf-kpi small{
|
||||
color:var(--text-muted);
|
||||
font-size:12px;
|
||||
line-height:1.35;
|
||||
}
|
||||
.pf-workspace{
|
||||
order:2;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(320px,390px) minmax(0,1fr);
|
||||
align-items:start;
|
||||
gap:14px;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-queue-stack{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:14px;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-section{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:10px;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-section__head{
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
}
|
||||
.pf-section__head h2{
|
||||
margin:4px 0 0;
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-body);
|
||||
font-weight:700;
|
||||
line-height:1.3;
|
||||
letter-spacing:0;
|
||||
}
|
||||
.pf-panel{
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
.pf-studio-card{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr) auto;
|
||||
gap:14px;
|
||||
align-items:center;
|
||||
padding:14px;
|
||||
background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--accent-tint) 18%,var(--bg-surface)));
|
||||
}
|
||||
.pf-studio-card__copy{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:7px;
|
||||
}
|
||||
.pf-studio-card__copy b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-body);
|
||||
}
|
||||
.pf-studio-card__copy p{
|
||||
margin:0;
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
line-height:1.55;
|
||||
}
|
||||
.pf-studio-card__meta{
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:6px;
|
||||
}
|
||||
.pf-studio-card__meta span{
|
||||
padding:4px 7px;
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius-sm);
|
||||
color:var(--text-body);
|
||||
background:var(--bg-surface-2);
|
||||
font-size:11px;
|
||||
line-height:1.2;
|
||||
}
|
||||
.pf-studio-card__actions{
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
.pf-section--growth{
|
||||
order:3;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-growth-panel{
|
||||
background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--accent-tint) 18%,var(--bg-surface)));
|
||||
}
|
||||
.pf-growth-list{
|
||||
max-height:min(420px,44vh);
|
||||
overflow:auto;
|
||||
scrollbar-gutter:stable;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:12px;
|
||||
padding:12px;
|
||||
}
|
||||
.pf-growth-card{
|
||||
min-width:0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:12px;
|
||||
padding:13px;
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius-sm);
|
||||
background:color-mix(in srgb,var(--bg-surface) 82%,var(--bg-surface-2));
|
||||
box-shadow:none;
|
||||
}
|
||||
.pf-growth-card__top{
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
justify-content:space-between;
|
||||
gap:10px;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-growth-card__id{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:3px;
|
||||
}
|
||||
.pf-growth-card__id b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.35;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-growth-card__id span,
|
||||
.pf-growth-card__metrics small,
|
||||
.pf-growth-point span,
|
||||
.pf-recent__review-state{
|
||||
color:var(--text-muted);
|
||||
font-size:12px;
|
||||
line-height:1.4;
|
||||
}
|
||||
.pf-recent__review-state{
|
||||
display:block;
|
||||
margin-top:3px;
|
||||
line-height:1.2;
|
||||
}
|
||||
.pf-growth-card__metrics{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:8px;
|
||||
}
|
||||
.pf-growth-card__metrics span{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:3px;
|
||||
padding:9px 10px;
|
||||
border:1px solid var(--paper-2);
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.pf-growth-card__metrics b{
|
||||
color:var(--text-strong);
|
||||
font-family:var(--font-num);
|
||||
font-size:15px;
|
||||
line-height:1.15;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-growth-bars{
|
||||
height:82px;
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
gap:6px;
|
||||
padding:8px 8px 6px;
|
||||
border:1px solid var(--paper-2);
|
||||
border-radius:var(--radius-sm);
|
||||
background:color-mix(in srgb,var(--bg-surface-2) 82%,transparent);
|
||||
}
|
||||
.pf-growth-bar{
|
||||
flex:1 1 0;
|
||||
min-width:14px;
|
||||
height:100%;
|
||||
display:grid;
|
||||
grid-template-rows:minmax(0,1fr) 14px;
|
||||
gap:4px;
|
||||
align-items:end;
|
||||
}
|
||||
.pf-growth-bar i{
|
||||
display:block;
|
||||
width:100%;
|
||||
min-height:6px;
|
||||
border-radius:6px 6px 3px 3px;
|
||||
background:linear-gradient(180deg,var(--accent),var(--accent-deep));
|
||||
}
|
||||
.pf-growth-bar.is-empty i{
|
||||
background:repeating-linear-gradient(135deg,var(--paper-2),var(--paper-2) 3px,var(--hair) 3px,var(--hair) 6px);
|
||||
}
|
||||
.pf-growth-bar small{
|
||||
color:var(--text-muted);
|
||||
font-family:var(--font-num);
|
||||
font-size:10px;
|
||||
text-align:center;
|
||||
line-height:1;
|
||||
}
|
||||
.pf-growth-card__tags{
|
||||
min-height:26px;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:6px;
|
||||
align-content:flex-start;
|
||||
}
|
||||
.pf-growth-card__tags span{
|
||||
max-width:100%;
|
||||
padding:4px 7px;
|
||||
border:1px solid var(--paper-2);
|
||||
border-radius:999px;
|
||||
color:var(--text-body);
|
||||
background:var(--bg-surface-2);
|
||||
font-size:11px;
|
||||
line-height:1.2;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-growth-card__points{
|
||||
display:grid;
|
||||
gap:7px;
|
||||
}
|
||||
.pf-growth-point{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
grid-template-columns:minmax(86px,.5fr) minmax(0,1fr);
|
||||
gap:8px;
|
||||
align-items:center;
|
||||
}
|
||||
.pf-growth-point b{
|
||||
color:var(--text-strong);
|
||||
font-size:12px;
|
||||
line-height:1.35;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-growth-point span{
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-empty{
|
||||
min-height:118px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
gap:6px;
|
||||
padding:var(--sp-5);
|
||||
text-align:center;
|
||||
}
|
||||
.pf-empty b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-body);
|
||||
}
|
||||
.pf-empty span{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
}
|
||||
.pf-list{
|
||||
max-height:min(320px,42vh);
|
||||
overflow:auto;
|
||||
scrollbar-gutter:stable;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
.pf-personas{
|
||||
max-height:min(320px,42vh);
|
||||
overflow:auto;
|
||||
scrollbar-gutter:stable;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
.pf-persona{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1fr);
|
||||
gap:8px;
|
||||
align-items:start;
|
||||
padding:12px;
|
||||
border-top:1px solid var(--paper-2);
|
||||
}
|
||||
.pf-persona:first-child{border-top:0;}
|
||||
.pf-persona__main{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
grid-template-columns:40px minmax(0,1fr);
|
||||
gap:10px;
|
||||
align-items:center;
|
||||
}
|
||||
.pf-persona__code{
|
||||
width:40px;
|
||||
height:32px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
border-radius:var(--radius);
|
||||
color:var(--accent-deep);
|
||||
background:var(--accent-tint);
|
||||
font-family:var(--font-num);
|
||||
font-weight:800;
|
||||
font-size:12px;
|
||||
}
|
||||
.pf-persona__main b{
|
||||
display:block;
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.35;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-persona__main span,
|
||||
.pf-persona p,
|
||||
.pf-persona__meta span{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
line-height:1.45;
|
||||
}
|
||||
.pf-persona p{
|
||||
margin:0;
|
||||
min-width:0;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-persona__meta{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
justify-content:space-between;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-persona__actions{
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
gap:8px;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-persona__actions .vg-btn{
|
||||
min-width:72px;
|
||||
padding-inline:10px;
|
||||
}
|
||||
.pf-alerts{
|
||||
max-height:min(300px,38vh);
|
||||
overflow:auto;
|
||||
scrollbar-gutter:stable;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
.pf-alert{
|
||||
display:grid;
|
||||
grid-template-columns:auto minmax(0,1fr) auto;
|
||||
gap:10px;
|
||||
align-items:center;
|
||||
padding:12px;
|
||||
border-top:1px solid var(--paper-2);
|
||||
background:color-mix(in srgb,var(--warn-tint) 34%,transparent);
|
||||
}
|
||||
.pf-alert:first-child{border-top:0;}
|
||||
.pf-alert__ic{
|
||||
width:30px;
|
||||
height:30px;
|
||||
display:grid;
|
||||
place-items:center;
|
||||
border-radius:var(--radius);
|
||||
color:var(--warn-text);
|
||||
background:var(--warn-tint);
|
||||
}
|
||||
.pf-alert__main{
|
||||
min-width:0;
|
||||
display:grid;
|
||||
gap:3px;
|
||||
}
|
||||
.pf-alert__main b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-sm);
|
||||
}
|
||||
.pf-alert__main span,
|
||||
.pf-alert__main code,
|
||||
.pf-alert__resource span{
|
||||
color:var(--text-muted);
|
||||
font-size:12px;
|
||||
}
|
||||
.pf-alert__main code{
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-alert__resource{
|
||||
display:grid;
|
||||
gap:2px;
|
||||
justify-items:end;
|
||||
min-width:86px;
|
||||
}
|
||||
.pf-alert__resource b{
|
||||
color:var(--warn-text);
|
||||
font-family:var(--font-num);
|
||||
font-size:18px;
|
||||
}
|
||||
.pf-session{
|
||||
width:100%;
|
||||
font:inherit;
|
||||
text-align:left;
|
||||
background:transparent;
|
||||
color:inherit;
|
||||
display:grid;
|
||||
grid-template-columns:8px minmax(0,1fr) auto;
|
||||
gap:8px 10px;
|
||||
align-items:start;
|
||||
padding:12px;
|
||||
border:0;
|
||||
border-top:1px solid var(--paper-2);
|
||||
cursor:default;
|
||||
}
|
||||
.pf-session:first-child{border-top:0;}
|
||||
.pf-session--action{
|
||||
cursor:pointer;
|
||||
}
|
||||
.pf-session--action:hover{
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.pf-session--action:focus-visible{
|
||||
outline:2px solid var(--accent);
|
||||
outline-offset:-2px;
|
||||
}
|
||||
.pf-session__dot{
|
||||
width:8px;
|
||||
height:8px;
|
||||
border-radius:50%;
|
||||
background:var(--accent);
|
||||
}
|
||||
.pf-session__main{
|
||||
min-width:0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:3px;
|
||||
}
|
||||
.pf-session__main b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-sm);
|
||||
}
|
||||
.pf-session__main span,.pf-session__main code{
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.pf-session__main code,.pf-recent__learner code{
|
||||
font-family:var(--font-num);
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.pf-session__meta{
|
||||
grid-column:2 / 4;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:8px;
|
||||
color:var(--text-muted);
|
||||
font-family:var(--font-num);
|
||||
font-size:var(--fs-xs);
|
||||
white-space:normal;
|
||||
}
|
||||
.pf-session__open{
|
||||
grid-column:3;
|
||||
grid-row:1;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap:5px;
|
||||
align-self:center;
|
||||
justify-self:end;
|
||||
min-height:30px;
|
||||
padding:0 9px;
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius-sm);
|
||||
color:var(--accent-deep);
|
||||
background:var(--accent-tint);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:760;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-session--action:hover .pf-session__open{
|
||||
border-color:var(--accent);
|
||||
}
|
||||
.pf-recent-list{
|
||||
max-height:min(620px,calc(100vh - 220px));
|
||||
overflow:auto;
|
||||
scrollbar-gutter:stable;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-recent-head,
|
||||
.pf-recent-row{
|
||||
display:grid;
|
||||
grid-template-columns:
|
||||
minmax(128px,1.25fr)
|
||||
minmax(58px,.55fr)
|
||||
minmax(66px,.55fr)
|
||||
minmax(82px,.85fr)
|
||||
minmax(32px,.35fr)
|
||||
minmax(70px,.6fr)
|
||||
minmax(66px,.55fr)
|
||||
minmax(86px,.65fr);
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
min-width:0;
|
||||
}
|
||||
.pf-recent-head{
|
||||
position:sticky;
|
||||
top:0;
|
||||
z-index:1;
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:700;
|
||||
padding:9px 12px;
|
||||
border-bottom:1px solid var(--hair);
|
||||
background:var(--bg-surface);
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-recent-row{
|
||||
width:100%;
|
||||
font:inherit;
|
||||
text-align:left;
|
||||
color:inherit;
|
||||
background:transparent;
|
||||
padding:10px 12px;
|
||||
border:0;
|
||||
border-top:1px solid var(--paper-2);
|
||||
}
|
||||
.pf-recent-row--action{
|
||||
cursor:pointer;
|
||||
}
|
||||
.pf-recent-row--action:hover{
|
||||
background:var(--bg-surface-2);
|
||||
}
|
||||
.pf-recent-row--action:focus-visible{
|
||||
outline:2px solid var(--accent);
|
||||
outline-offset:-2px;
|
||||
}
|
||||
.pf-recent-head + .pf-recent-row{
|
||||
border-top:0;
|
||||
}
|
||||
.pf-recent__learner,
|
||||
.pf-recent__cell{
|
||||
min-width:0;
|
||||
color:var(--text-body);
|
||||
font-size:var(--fs-sm);
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.pf-recent__cell::before{
|
||||
display:none;
|
||||
}
|
||||
.pf-recent__learner{
|
||||
min-width:0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:3px;
|
||||
}
|
||||
.pf-recent__learner b{
|
||||
color:var(--text-strong);
|
||||
font-size:var(--fs-sm);
|
||||
line-height:1.35;
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.pf-recent__learner code{
|
||||
max-width:100%;
|
||||
color:var(--text-muted);
|
||||
font-size:11px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
.pf-recent__cell .vg-badge{
|
||||
justify-self:start;
|
||||
}
|
||||
.pf-recent__cell--open{
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
}
|
||||
.pf-recent__open{
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
gap:4px;
|
||||
min-height:30px;
|
||||
padding:0 7px;
|
||||
border:1px solid var(--hair);
|
||||
border-radius:var(--radius-sm);
|
||||
color:var(--accent-deep);
|
||||
background:var(--accent-tint);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:760;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.pf-recent-row--action:hover .pf-recent__open{
|
||||
border-color:var(--accent);
|
||||
}
|
||||
@media (max-width:1100px){
|
||||
.pf-signal-strip,
|
||||
.pf-workspace{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-triage{
|
||||
grid-template-columns:auto minmax(0,max-content) auto;
|
||||
justify-content:start;
|
||||
}
|
||||
.pf-kpis{
|
||||
grid-template-columns:repeat(4,minmax(0,1fr));
|
||||
}
|
||||
.pf-kpi:nth-child(n+2){border-left:1px solid var(--hair);}
|
||||
.pf-kpi:nth-child(n+4){border-top:0;}
|
||||
.pf-growth-list{
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.pf-list,
|
||||
.pf-personas{
|
||||
max-height:360px;
|
||||
}
|
||||
.pf-recent-list{
|
||||
max-height:460px;
|
||||
}
|
||||
}
|
||||
@media (max-width:860px){
|
||||
.pf-head__actions{
|
||||
width:100%;
|
||||
justify-content:flex-start;
|
||||
}
|
||||
.pf-triage{
|
||||
grid-template-columns:auto minmax(0,1fr);
|
||||
}
|
||||
.pf-triage__meta{
|
||||
grid-column:1 / -1;
|
||||
width:100%;
|
||||
}
|
||||
.pf-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
|
||||
.pf-kpi:nth-child(n+2){border-left:0;}
|
||||
.pf-kpi:nth-child(even){border-left:1px solid var(--hair);}
|
||||
.pf-kpi:nth-child(n+3){border-top:1px solid var(--hair);}
|
||||
.pf-growth-list{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-recent-list{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:10px;
|
||||
padding:10px;
|
||||
background:var(--bg-surface-2);
|
||||
overflow-x:hidden;
|
||||
}
|
||||
.pf-recent-head{
|
||||
display:none;
|
||||
}
|
||||
.pf-recent-row{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
gap:10px 12px;
|
||||
padding:12px;
|
||||
border:1px solid var(--paper-2);
|
||||
border-radius:var(--radius);
|
||||
background:var(--bg-surface);
|
||||
}
|
||||
.pf-recent__learner{
|
||||
grid-column:1 / -1;
|
||||
padding-bottom:10px;
|
||||
border-bottom:1px solid var(--paper-2);
|
||||
}
|
||||
.pf-recent__learner code{
|
||||
white-space:normal;
|
||||
overflow-wrap:anywhere;
|
||||
}
|
||||
.pf-recent__cell{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(74px,.4fr) minmax(0,1fr);
|
||||
gap:8px;
|
||||
align-items:center;
|
||||
}
|
||||
.pf-recent__cell--open{
|
||||
justify-content:stretch;
|
||||
}
|
||||
.pf-recent__cell::before{
|
||||
display:block;
|
||||
content:attr(data-label);
|
||||
color:var(--text-muted);
|
||||
font-size:var(--fs-xs);
|
||||
font-weight:700;
|
||||
line-height:1.35;
|
||||
}
|
||||
.pf-session{
|
||||
grid-template-columns:8px minmax(0,1fr);
|
||||
}
|
||||
.pf-session__meta{
|
||||
grid-column:2;
|
||||
justify-content:flex-start;
|
||||
}
|
||||
.pf-session__open{
|
||||
grid-column:2;
|
||||
grid-row:auto;
|
||||
justify-self:start;
|
||||
}
|
||||
}
|
||||
@media (max-width:520px){
|
||||
.pf-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
|
||||
.pf-kpi,
|
||||
.pf-kpi + .pf-kpi{border-left:0;}
|
||||
.pf-kpi:nth-child(even){border-left:1px solid var(--hair);}
|
||||
.pf-kpi:nth-child(n+3){border-top:1px solid var(--hair);}
|
||||
.pf-persona__actions{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
}
|
||||
.pf-persona__actions .vg-btn{
|
||||
width:100%;
|
||||
}
|
||||
.pf-growth-list{
|
||||
padding:10px;
|
||||
}
|
||||
.pf-growth-card__metrics{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
.pf-growth-point{
|
||||
grid-template-columns:1fr;
|
||||
gap:2px;
|
||||
}
|
||||
.pf-growth-point b,
|
||||
.pf-growth-point span{
|
||||
white-space:normal;
|
||||
}
|
||||
.pf-alert{
|
||||
grid-template-columns:auto minmax(0,1fr);
|
||||
}
|
||||
.pf-alert__resource{
|
||||
grid-column:2;
|
||||
justify-items:start;
|
||||
}
|
||||
.pf-recent-list{
|
||||
padding:8px;
|
||||
}
|
||||
.pf-recent-row{
|
||||
grid-template-columns:1fr;
|
||||
gap:10px;
|
||||
}
|
||||
.pf-recent__cell{
|
||||
grid-template-columns:minmax(64px,.32fr) minmax(0,1fr);
|
||||
}
|
||||
.pf-recent__cell--open .pf-recent__open{
|
||||
justify-self:start;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue