Add "steps" list CSS

docs/src/markdown/extensions/magiclink.md

@@ -453,19 +453,24 @@ control over specifics, so if this is sufficient for your needs, then it give it
 
 To specify a custom provider, you simply need to specify them via the `custom` option.
 
+/// html | div.steps
 1. Simply specify the name to identify the provider (must only contain alphanumeric characters). Provider name is used
    when manually specifying a provider (`@provider:user`) and will be used to generate custom CSS classes
    `magiclink-provider`.
+
 2. Specify the `type`. Is this a private `github`, `gitlab`, or `bitbucket` provider.
-3. Specify the `label` for tooltips.
-4. Specify the `host` for your private repository.
+
+3. Specify the `host` for your private repository.
+
+4. Specify the `label` for tooltips.
+///
 
 ```js
 'custom': {
     'test': {
+        'type': 'github',
         'host': 'http://test.com',
         'label': 'Test',
-        'type': 'github'
     }
 }
 ```

docs/src/scss/extensions/_steps.scss

@@ -0,0 +1,43 @@
+@use "../utilities/convert";
+
+.md-typeset div.steps > ol {
+  counter-reset: item;
+
+  li {
+    position: relative;
+    padding-left: 1em;
+    list-style: none;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      display: block;
+      width: 1.75em;
+      height: 1.75em;
+      margin-left: -1.25em;
+      color: var(--md-steps-fg-color);
+      font-weight: 600;
+      font-size: 0.9em;
+      text-align: center;
+      background-color: var(--md-steps-bg-color);
+      border: 1px solid var(--md-steps-border-color);
+      border-radius: 100px;
+      content: counter(item);
+      counter-increment: item;
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: -0.36em;
+      display: block;
+      width: 1px;
+      margin-top: 2em;
+      border-left: 1px solid var(--md-steps-border-color);
+      content: '';
+    }
+  }
+}

docs/src/scss/extra.scss

@@ -16,5 +16,6 @@
 @use "extensions/tasklist";
 @use "extensions/toc";
 @use "extensions/superfences";
+@use "extensions/steps";
 
 @use "material";

docs/src/scss/palette/_colors.scss

@@ -24,6 +24,11 @@
   --md-code-hl-builtin-color: var(--md-code-hl-constant-color);
   --md-code-hl-class-color: var(--md-code-hl-function-color);
 
+  // List steps
+  --md-steps-bg-color: var(--md-code-bg-color);
+  --md-steps-fg-color: var(--md-code-fg-color);
+  --md-steps-border-color: hsla(0, 0%, 75%, 1);
+
   // Various Material related color variables
   --md-typeset-a-color: #{material_color.$clr-cyan-500};
 
@@ -48,6 +53,9 @@
     --md-code-special-bg-color: #{color.adjust(hsl(232, 15%, 15%), $lightness: 5%)};
     --md-default-bg-color--trans: hsla(232,15%,15%, 0);
 
+    // List steps
+    --md-steps-border-color: hsla(225, 15%, 30%, 1);
+
     // Keys colors
     --md-typeset-kbd-color: var(--md-default-fg-color--lightest);
     --md-typeset-kbd-border-color: #{color.adjust(rgb(46, 48, 62), $lightness: -9%)};
@@ -114,6 +122,9 @@
     --md-code-alternate-bg-color: #{color_tools.tint(dracula.$drac-bg, 10%)};
     --md-code-link-bg-color: #{color.mix(dracula.$drac-cyan, dracula.$drac-bg, 15%)};
 
+    // List steps
+    --md-steps-border-color: #{color.adjust(dracula.$drac-bg, $lightness: 10%)};
+
     // Various Material related color variables
     --md-typeset-a-color: #{dracula.$drac-cyan};
     --md-typeset-mark-color: #{color.mix(dracula.$drac-yellow, dracula.$drac-bg, 35%)};

mkdocs.yml

@@ -239,7 +239,7 @@ extra:
       link: /~https://github.com/facelessuser
 extra_css:
   # - https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css
-  - assets/pymdownx-extras/extra-add764b01e.css
+  - assets/pymdownx-extras/extra-3005714f37.css
 extra_javascript:
   - https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.min.js
   # - https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js