MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 14: / Line 14: @@
    padding: 0.75em 1em;
    margin: 1em 0;
-   border: 2px solid var(--border-color-base);
+   border: 1px solid var(--border-color-base);
    border-radius: 2px;
    background-color: var(--background-color-neutral-subtle);
    color: var(--color-base);
+   display: flex;
-   &p {
-    margin: 0;
-  }
    &.info {
@@ Line 27: / Line 24: @@
      border-color: var(--color-progressive);
      color: var(--color-progressive);
+    .box-icon {
+      mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7"/></svg>');
+      background-color:var(--color-icon-notice,#72777d)
+    }
    }
@@ Line 33: / Line 35: @@
      border-color: var(--color-success);
      color: var(--color-success);
+    .box-icon {
+      mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
+      background-color:var(--color-icon-success,#099979);
+    }
    }
@@ Line 40: / Line 47: @@
      border-color: var(--color-warning);
      color: var(--color-warning);
+    .box-icon {
+      mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>');
+      background-color:var(--color-icon-warning,#ab7f2a)
+    }
    }
@@ Line 46: / Line 58: @@
      border-color: var(--color-destructive);
      color: var(--color-destructive);
+    .box-icon {
+      mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M13.728 1H6.272L1 6.272v7.456L6.272 19h7.456L19 13.728V6.272zM11 15H9v-2h2zm0-4H9V5h2z"/></svg>');
+      background-color:var(--color-icon-error,#f54739)
+    }
    }
@@ Line 53: / Line 70: @@
      border-color: var(--color-warning);
      color: var(--color-warning);
+    .box-icon {
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
+      background-color: var(--color-icon-success,#099979);
+    }
    }
@@ Line 59: / Line 81: @@
      border-color: var(--color-progressive);
      color: var(--color-progressive);
+    .box-icon {
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
+      background-color: var(--color-icon-success,#099979);
+    }
    }
@@ Line 65: / Line 92: @@
      border-color: var(--color-warning);
      color: var(--color-warning);
+    .box-icon {
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
+      background-color: var(--color-icon-success,#099979);
+    }
    }
@@ Line 71: / Line 103: @@
      border-color: var(--color-destructive);
      color: var(--color-destructive);
+    .box-icon {
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
+      background-color: var(--color-icon-success,#099979);
+    }
    }
@@ Line 77: / Line 114: @@
      border-color: var(--color-warning);
      color: var(--color-warning);
+    .box-icon {
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
+      background-color: var(--color-icon-success,#099979);
+    }
    }
+  .box-icon {
+    min-width: 10px;
+    min-height: 10px;
+    width: calc(var(--font-size-medium,1rem) + 4px);
+    /* height: calc(var(--font-size-medium,1rem) + 4px); */
+    display: inline-block;
+    mask-size: max(calc(var(--font-size-medium,1rem) + 4px),10px);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    margin-right: 4px;
+  }
+}
+.box p {
+  margin: 0 !important;
 }
@@ Line 160: / Line 219: @@
 .flex { display: flex; gap: 0.5em; }
 .grid { display: grid; gap: 0.5em; }
+.flex-center {display: flex; gap: 0.5rem; justify-content: center; align-items: center;}