模板:ProcessSteps/styles.css:修订间差异
来自MUC Wiki
更多操作
Maintenance script(留言 | 贡献) Add MUC Wiki visual modernization templates |
Maintenance script(留言 | 贡献) Refine reusable process steps component styles |
||
| 第3行: | 第3行: | ||
display: grid; | display: grid; | ||
gap: .75rem; | gap: .75rem; | ||
margin: 1rem 0; | |||
} | } | ||
.process-steps > * { | |||
.process-steps__header { | |||
color: #0f172a; | |||
font-size: 1.08rem; | |||
font-weight: 800; | |||
} | |||
.process-steps ol { | |||
display: grid; | |||
gap: .7rem; | |||
margin: 0; | |||
padding: 0; | |||
list-style: none; | |||
} | |||
.process-steps li, | |||
.process-steps > ol > li, | |||
.process-steps > *:not(.process-steps__header):not(ol) { | |||
counter-increment: step; | counter-increment: step; | ||
position: relative; | |||
padding: . | min-height: 3.1rem; | ||
background: # | padding: .82rem 1rem .82rem 3.05rem; | ||
border: 1px solid #d9e1ec; | |||
border-radius: 12px; | |||
background: #fff; | |||
color: #253044; | |||
line-height: 1.62; | |||
box-shadow: 0 8px 24px rgba(37, 55, 82, .045); | |||
} | } | ||
.process-steps > *::before { | |||
.process-steps li::before, | |||
.process-steps > ol > li::before, | |||
.process-steps > *:not(.process-steps__header):not(ol)::before { | |||
content: counter(step); | content: counter(step); | ||
position: absolute; | |||
top: .78rem; | |||
left: .9rem; | |||
display: inline-grid; | display: inline-grid; | ||
place-items: center; | |||
width: 1.55rem; | |||
height: 1.55rem; | |||
border-radius: 999px; | border-radius: 999px; | ||
color: #fff; | color: #fff; | ||
background: # | background: #315f9e; | ||
font-weight: | font-size: .86rem; | ||
font-weight: 800; | |||
line-height: 1; | |||
} | |||
@media (max-width: 560px) { | |||
.process-steps li, | |||
.process-steps > ol > li, | |||
.process-steps > *:not(.process-steps__header):not(ol) { | |||
padding-right: .85rem; | |||
} | |||
} | } | ||
2026年6月4日 (四) 03:42的最新版本
.process-steps {
counter-reset: step;
display: grid;
gap: .75rem;
margin: 1rem 0;
}
.process-steps__header {
color: #0f172a;
font-size: 1.08rem;
font-weight: 800;
}
.process-steps ol {
display: grid;
gap: .7rem;
margin: 0;
padding: 0;
list-style: none;
}
.process-steps li,
.process-steps > ol > li,
.process-steps > *:not(.process-steps__header):not(ol) {
counter-increment: step;
position: relative;
min-height: 3.1rem;
padding: .82rem 1rem .82rem 3.05rem;
border: 1px solid #d9e1ec;
border-radius: 12px;
background: #fff;
color: #253044;
line-height: 1.62;
box-shadow: 0 8px 24px rgba(37, 55, 82, .045);
}
.process-steps li::before,
.process-steps > ol > li::before,
.process-steps > *:not(.process-steps__header):not(ol)::before {
content: counter(step);
position: absolute;
top: .78rem;
left: .9rem;
display: inline-grid;
place-items: center;
width: 1.55rem;
height: 1.55rem;
border-radius: 999px;
color: #fff;
background: #315f9e;
font-size: .86rem;
font-weight: 800;
line-height: 1;
}
@media (max-width: 560px) {
.process-steps li,
.process-steps > ol > li,
.process-steps > *:not(.process-steps__header):not(ol) {
padding-right: .85rem;
}
}