fix #557: guide permission-driven VPD flow
This commit is contained in:
devmrko
@@ -213,7 +213,7 @@ body {
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
margin-bottom: 1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -1508,3 +1508,323 @@ body {
|
||||
padding-right: .65rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Guided permission journey (#557) */
|
||||
.guided-hero {
|
||||
max-width: 920px;
|
||||
}
|
||||
|
||||
.guided-hero h1 {
|
||||
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
|
||||
line-height: 1.18;
|
||||
margin-top: .35rem;
|
||||
}
|
||||
|
||||
.guided-hero p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.65;
|
||||
max-width: 850px;
|
||||
}
|
||||
|
||||
.journey-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.journey-card {
|
||||
align-items: flex-start;
|
||||
background: var(--rw-surface);
|
||||
border: 1px solid var(--rw-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--rw-shadow);
|
||||
color: inherit;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
padding: 1.15rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.journey-card:hover {
|
||||
border-color: var(--rw-primary);
|
||||
color: inherit;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.journey-number {
|
||||
align-items: center;
|
||||
background: var(--rw-primary-soft);
|
||||
border-radius: 999px;
|
||||
color: var(--rw-primary);
|
||||
display: inline-flex;
|
||||
flex: 0 0 2.2rem;
|
||||
font-weight: 800;
|
||||
height: 2.2rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.journey-card h2 {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 800;
|
||||
margin: .1rem 0 .35rem;
|
||||
}
|
||||
|
||||
.journey-card p {
|
||||
color: var(--rw-muted);
|
||||
line-height: 1.5;
|
||||
margin: 0 0 .75rem;
|
||||
}
|
||||
|
||||
.journey-card strong {
|
||||
color: var(--rw-primary);
|
||||
font-size: .88rem;
|
||||
}
|
||||
|
||||
.macro-micro-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.macro-micro-grid > div {
|
||||
background: var(--rw-surface-muted);
|
||||
border: 1px solid var(--rw-border);
|
||||
border-radius: 8px;
|
||||
min-width: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.macro-micro-grid h2,
|
||||
.macro-micro-grid h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
margin: .3rem 0 .45rem;
|
||||
}
|
||||
|
||||
.macro-micro-grid p {
|
||||
color: var(--rw-muted);
|
||||
line-height: 1.55;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.guided-check-intro {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.guided-check-intro h2 {
|
||||
margin: .25rem 0 .4rem;
|
||||
}
|
||||
|
||||
.guided-check-intro p {
|
||||
color: var(--rw-muted);
|
||||
margin: 0;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.probe-form {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.probe-submit {
|
||||
min-height: 2.8rem;
|
||||
}
|
||||
|
||||
.empty-result-guide {
|
||||
color: var(--rw-muted);
|
||||
}
|
||||
|
||||
.empty-result-guide ol {
|
||||
margin: .65rem 0 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.probe-result-flow {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.probe-result-flow > .section-heading {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.probe-summary {
|
||||
color: var(--rw-text);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
border-top: 1px solid var(--rw-border);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.result-section h3,
|
||||
.next-action-card h3,
|
||||
.probe-exchange h3 {
|
||||
font-size: .92rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result-metrics {
|
||||
display: grid;
|
||||
gap: .75rem;
|
||||
grid-template-columns: minmax(120px, .5fr) minmax(0, 1.5fr);
|
||||
}
|
||||
|
||||
.result-metrics > div {
|
||||
background: var(--rw-surface-muted);
|
||||
border: 1px solid var(--rw-border);
|
||||
border-radius: 8px;
|
||||
padding: .8rem;
|
||||
}
|
||||
|
||||
.result-metrics span {
|
||||
color: var(--rw-muted);
|
||||
display: block;
|
||||
font-size: .76rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.result-metrics strong {
|
||||
display: block;
|
||||
margin-top: .25rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.next-action-card {
|
||||
background: var(--rw-primary-soft);
|
||||
border: 1px solid rgba(122, 62, 47, .2);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.next-action-card p {
|
||||
line-height: 1.55;
|
||||
margin: .45rem 0 .8rem;
|
||||
}
|
||||
|
||||
.technical-details,
|
||||
.advanced-details {
|
||||
border: 1px solid var(--rw-border);
|
||||
border-radius: 8px;
|
||||
padding: .8rem;
|
||||
}
|
||||
|
||||
.technical-details > summary,
|
||||
.advanced-details > summary {
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.issued-token-card {
|
||||
background: var(--rw-primary-soft);
|
||||
border: 1px solid rgba(122, 62, 47, .25);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--rw-shadow);
|
||||
margin-bottom: 1rem;
|
||||
padding: 1.15rem;
|
||||
}
|
||||
|
||||
.issued-token-card h2 {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 800;
|
||||
margin: .3rem 0 .65rem;
|
||||
}
|
||||
|
||||
.issued-token-card .token-value {
|
||||
background: var(--rw-surface);
|
||||
border: 1px solid var(--rw-border);
|
||||
border-radius: 8px;
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.default-vpd-form {
|
||||
grid-template-columns: minmax(220px, 1.2fr) minmax(260px, 1.5fr) auto;
|
||||
}
|
||||
|
||||
.default-policy-summary,
|
||||
.protected-function-card {
|
||||
background: var(--rw-surface-muted);
|
||||
border: 1px solid var(--rw-border);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
gap: .2rem;
|
||||
min-width: 0;
|
||||
padding: .7rem .85rem;
|
||||
}
|
||||
|
||||
.default-policy-summary span,
|
||||
.protected-function-card span {
|
||||
color: var(--rw-muted);
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.advanced-guidance {
|
||||
background: #fff8e8;
|
||||
border: 1px solid #e7d29c;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.advanced-guidance h2 {
|
||||
margin-bottom: .6rem;
|
||||
}
|
||||
|
||||
.advanced-guidance p {
|
||||
margin: .3rem 0 0;
|
||||
}
|
||||
|
||||
.advanced-guidance ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.advanced-guidance li + li {
|
||||
margin-top: .45rem;
|
||||
}
|
||||
|
||||
.protected-function-card {
|
||||
grid-template-columns: auto minmax(180px, auto) 1fr;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.filter-replace-form {
|
||||
display: grid;
|
||||
gap: .4rem;
|
||||
grid-template-columns: minmax(150px, .8fr) minmax(220px, 1fr) auto;
|
||||
min-width: 520px;
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.journey-grid,
|
||||
.macro-micro-grid,
|
||||
.default-vpd-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.guided-check-intro {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.protected-function-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.journey-card {
|
||||
padding: .9rem;
|
||||
}
|
||||
|
||||
.result-metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user