Fix wrap-plugin styling

css/base.less

@@ -459,6 +459,8 @@ nav > ul {
     --color-dark-secondary: var(--color-krypton-300);
     --color-dark-error: var(--color-red-500);
     --color-dark-success: var(--color-green-500);
+    --color-dark-warning: #efb100;
+    --color-dark-highlight: #efb10060;
     --color-dark-accent-1: #60a5f9;
     --color-dark-accent-2: #d381f7;
     --color-dark-accent-3: #ff7975;
@@ -469,10 +471,16 @@ nav > ul {
     --color-light-shade-2: var(--color-neutral-200);
     --color-light-shade-3: var(--color-neutral-300);
     --color-light-shade-4: var(--color-neutral-400);
+    --color-light-text-1: var(--color-neutral-800);
+    --color-light-text-2: var(--color-neutral-700);
+    --color-light-text-3: var(--color-neutral-600);
+    --color-light-text-4: var(--color-neutral-500);
     --color-light-primary: var(--color-argon-600);
     --color-light-secondary: var(--color-krypton-500);
     --color-light-error: var(--color-red-600);
     --color-light-success: var(--color-green-600);
+    --color-light-warning: #d08700;
+    --color-light-highlight: #d0870060;
     --color-light-accent-1: #303EC0;
     --color-light-accent-2: #6c366c;
     --color-light-accent-3: #932f0a;
@@ -568,6 +576,8 @@ nav > ul {
         --color-secondary: var(--color-dark-secondary);
         --color-error: var(--color-dark-error);
         --color-success: var(--color-dark-success);
+        --color-warning: var(--color-dark-warning);
+        --color-highlight: var(--color-dark-highlight);
         --color-accent-1: var(--color-dark-accent-1);
         --color-accent-2: var(--color-dark-accent-2);
         --color-accent-3: var(--color-dark-accent-3);
@@ -607,6 +617,8 @@ nav > ul {
         --color-secondary: var(--color-light-secondary);
         --color-error: var(--color-light-error);
         --color-success: var(--color-light-success);
+        --color-warning: var(--color-light-warning);
+        --color-highlight: var(--color-light-highlight);
         --color-accent-1: var(--color-light-accent-1);
         --color-accent-2: var(--color-light-accent-2);
         --color-accent-3: var(--color-light-accent-3);

css/plugins/wrap.less

@@ -0,0 +1,126 @@
+.dokuwiki {
+  span.wrap_em {
+    color: var(--color-error);
+  }
+
+  span.wrap_hi {
+    background-color: var(--color-highlight);
+    color: var(--color-foreground);
+  }
+
+  span.wrap_lo {
+    color: var(--color-text-2);
+  }
+
+  div.plugin_wrap {
+    &.wrap_box {
+      background-color: var(--color-shade-1);
+      color: var(--color-foreground);
+    }
+
+    &.wrap_info,
+    &.wrap_tip,
+    &.wrap_important,
+    &.wrap_alert,
+    &.wrap_help,
+    &.wrap_download,
+    &.wrap_todo {
+      @media @screen_max-md {
+        flex-direction: column;
+      }
+
+      display: flex;
+      align-items: start;
+      gap: 1rem;
+      border: none;
+      border-left: solid 0.5rem var(--color-shade-4);
+      border-radius: 0.5rem;
+      padding: 1em;
+      background-image: none;
+      background-color: var(--color-shade-1);
+
+      p {
+        margin: 0;
+        max-width: calc(~"100% - 2.5rem");
+      }
+
+      &::before {
+        content: "";
+        flex-shrink: 0;
+        margin-top: 0.3em;
+        width: 2em;
+        height: 2em;
+        mask-size: contain;
+        mask-position: center top;
+        mask-repeat: no-repeat;
+      }
+    }
+
+    &.wrap_info {
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: currentColor;
+        mask-image: url(img/info.svg);
+      }
+    }
+
+    &.wrap_tip {
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: currentColor;
+        mask-image: url(img/lightbulb.svg);
+      }
+    }
+
+    &.wrap_important {
+      border-left-color: var(--color-warning);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-warning);
+        mask-image: url(img/warning.svg);
+      }
+    }
+
+    &.wrap_alert {
+      border-left-color: var(--color-error);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-error);
+        mask-image: url(img/power.svg);
+      }
+    }
+
+    &.wrap_help {
+      border-left-color: var(--color-accent-1);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-accent-1);
+        mask-image: url(img/question.svg);
+      }
+    }
+
+    &.wrap_download {
+      border-left-color: var(--color-success);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-success);
+        mask-image: url(img/arrow_down.svg);
+      }
+    }
+
+    &.wrap_todo {
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: currentColor;
+        mask-image: url(img/tick_small.svg);
+      }
+    }
+  }
+}

style.ini

@@ -118,6 +118,7 @@ css/plugins/data.less                 = all
 css/plugins/fastwiki.less             = all
 css/plugins/tplinc.less               = all
 css/plugins/translation.less          = all
+css/plugins/wrap.less                 = all
 
 
 ; _____________  print styles  _____________