94 lines
1.8 KiB
CSS
94 lines
1.8 KiB
CSS
.pa-page{
|
|
min-height:100dvh;
|
|
display:grid;
|
|
place-items:center;
|
|
padding:clamp(18px,5vw,56px);
|
|
background:var(--bg-app);
|
|
color:var(--text-body);
|
|
}
|
|
.pa-panel{
|
|
width:min(100%,620px);
|
|
display:grid;
|
|
gap:var(--sp-4);
|
|
padding:clamp(24px,5vw,44px);
|
|
border:1px solid var(--border-subtle);
|
|
border-radius:var(--radius);
|
|
background:color-mix(in srgb,var(--bg-surface) 92%,white 8%);
|
|
box-shadow:0 18px 50px rgba(28,43,40,.10);
|
|
}
|
|
.pa-mark{
|
|
width:62px;
|
|
height:62px;
|
|
display:grid;
|
|
place-items:center;
|
|
border-radius:var(--radius);
|
|
background:var(--accent-tint);
|
|
color:var(--accent-deep);
|
|
border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
|
|
}
|
|
.pa-kicker{
|
|
margin:0;
|
|
color:var(--accent-deep);
|
|
font-size:12px;
|
|
font-weight:820;
|
|
}
|
|
.pa-panel h1{
|
|
margin:0;
|
|
color:var(--text-strong);
|
|
font-size:clamp(30px,5vw,46px);
|
|
line-height:1.17;
|
|
letter-spacing:0;
|
|
}
|
|
.pa-copy{
|
|
margin:0;
|
|
color:var(--text-muted);
|
|
font-size:15px;
|
|
line-height:1.7;
|
|
}
|
|
.pa-copy b{
|
|
color:var(--text-strong);
|
|
font-weight:760;
|
|
}
|
|
.pa-status{
|
|
min-width:0;
|
|
display:grid;
|
|
grid-template-columns:auto minmax(0,1fr);
|
|
gap:12px;
|
|
align-items:center;
|
|
padding:14px;
|
|
border:1px solid var(--border-subtle);
|
|
border-radius:var(--radius);
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pa-status > span{
|
|
width:10px;
|
|
height:10px;
|
|
border-radius:50%;
|
|
background:#d89a2b;
|
|
box-shadow:0 0 0 5px rgba(216,154,43,.14);
|
|
}
|
|
.pa-status b{
|
|
display:block;
|
|
color:var(--text-strong);
|
|
font-size:14px;
|
|
}
|
|
.pa-status small{
|
|
display:block;
|
|
margin-top:3px;
|
|
color:var(--text-muted);
|
|
font-size:12.5px;
|
|
line-height:1.45;
|
|
}
|
|
.pa-actions{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:10px;
|
|
}
|
|
@media (max-width:560px){
|
|
.pa-panel{
|
|
border-radius:var(--radius);
|
|
}
|
|
.pa-actions .vg-btn{
|
|
width:100%;
|
|
}
|
|
}
|