fix(plugin-md-power): improve steps styles, close #422 (#432)

pengzhanbo · Jan 21, 2025 · 9c796c2 · 9c796c2
1 parent 1dba45f
commit 9c796c2
Showing 1 changed file with 10 additions and 16 deletions.
diff --git a/plugins/plugin-md-power/src/client/styles/steps.css b/plugins/plugin-md-power/src/client/styles/steps.css
@@ -2,22 +2,20 @@
   margin: 16px 0;
 }
 
-.vp-doc .vp-steps > ol,
-.vp-doc .vp-steps > ul {
+.vp-doc .vp-steps > :where(ol,ul) {
   padding-inline-start: 0;
   list-style: none;
 }
 
-.vp-doc .vp-steps > ol > li,
-.vp-doc .vp-steps > ul > li {
+.vp-doc .vp-steps > :where(ol,ul) > li {
   position: relative;
-  min-height: 22px;
+  min-height: 28px;
   padding-bottom: 1px;
   padding-left: 44px;
+  line-height: 28px;
 }
 
-.vp-doc .vp-steps > ol > li::before,
-.vp-doc .vp-steps > ul > li::before {
+.vp-doc .vp-steps > :where(ol,ul) > li::before {
   position: absolute;
   inset-inline-start: 0;
   top: 0;
@@ -36,8 +34,7 @@
   transition-property: color, background-color, border-color;
 }
 
-.vp-doc .vp-steps > ol > li:not(:last-of-type)::after,
-.vp-doc .vp-steps > ul > li:not(:last-of-type)::after {
+.vp-doc .vp-steps > :where(ol,ul) > li:not(:last-of-type)::after {
   position: absolute;
   inset-inline-start: 14px;
   top: 34px;
@@ -48,22 +45,19 @@
   transition: background-color var(--vp-t-color);
 }
 
-.vp-doc .vp-steps > ol > li > :first-child,
-.vp-doc .vp-steps > ul > li > :first-child {
+.vp-doc .vp-steps > :where(ol,ul) > li > :first-child {
   margin-top: 0;
 }
 
-.vp-doc .vp-steps > ol > li > :first-child:where(h1,h2,h3,h4,h5,h6),
-.vp-doc .vp-steps > ul > li > :first-child:where(h1,h2,h3,h4,h5,h6) {
+.vp-doc .vp-steps > :where(ol,ul) > li > :first-child:where(h1,h2,h3,h4,h5,h6) {
   padding-top: 0;
   border-top: none;
 }
 
-.vp-doc .vp-steps > ol > li > :first-child:where(p) {
+.vp-doc .vp-steps > :where(ol,ul) > li > :first-child:where(p) {
   line-height: 28px;
 }
 
-.vp-doc .vp-steps > ol > li + li,
-.vp-doc .vp-steps > ul > li + li {
+.vp-doc .vp-steps > :where(ol,ul) > li + li {
   margin-top: 1px;
 }