Fixing CSS for details and admonition to use the theme colors.

orcephrye · Nov 7, 2023 · 552ec34 · 552ec34
1 parent 3aa6a9f
commit 552ec34
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 21 deletions.
diff --git a/src/wiki/static/wiki/bootstrap/css/wiki-bootstrap.min.css b/src/wiki/static/wiki/bootstrap/css/wiki-bootstrap.min.css
diff --git a/src/wiki/static/wiki/bootstrap/scss/_admonition.scss b/src/wiki/static/wiki/bootstrap/scss/_admonition.scss
@@ -1,42 +1,72 @@
-@mixin admon-color($color) {
-  color: darken($color, 15%);
+@mixin admonition_colors_default($color) {
+  color: darken($color, 40%);
   background-color: lighten($color, 25%);
   border-color: $color;
 }
 
+@mixin admon-color($background, $border, $color) {
+  color: $color;
+  @include gradient-bg($background);
+  border-color: $border;
+
+  hr {
+    border-top-color: darken($border, 5%);
+  }
+
+  .alert-link {
+    color: darken($color, 10%);
+  }
+}
+
 .admonition {
   padding: 0 15px;
   margin-bottom: 20px;
   border: 1px solid transparent;
   border-radius: 4px;
   text-align: left;
-  @include admon-color($gray-600);
+  @include admonition_colors_default($gray-600);
   &-title {
     font-weight: bold;
     text-align: left;
   }
-  &.note {
-    @include admon-color($cyan);
+    &.primary, &.important {
+    @include admon-color(theme-color-level("primary", $alert-bg-level),
+      theme-color-level("primary", $alert-border-level),
+      theme-color-level("primary", $alert-color-level));
   }
-  &.attention {
-    @include admon-color($warning);
+  &.secondary, &.attention {
+    @include admon-color(theme-color-level("secondary", $alert-bg-level),
+      theme-color-level("secondary", $alert-border-level),
+      theme-color-level("secondary", $alert-color-level));
   }
-  &.caution {
-    @include admon-color($red);
+  &.success, &.tip {
+    @include admon-color(theme-color-level("success", $alert-bg-level),
+      theme-color-level("success", $alert-border-level),
+      theme-color-level("success", $alert-color-level));
   }
-  &.critical {
-    @include admon-color($orange);
+  &.info, &.note, &.hint {
+    @include admon-color(theme-color-level("info", $alert-bg-level),
+      theme-color-level("info", $alert-border-level),
+      theme-color-level("info", $alert-color-level));
   }
-  &.danger{
-    @include admon-color($danger);
+  &.warning, &.caution {
+    @include admon-color(theme-color-level("warning", $alert-bg-level),
+      theme-color-level("warning", $alert-border-level),
+      theme-color-level("warning", $alert-color-level));
   }
-  &.tips {
-    @include admon-color($info);
+  &.danger, &.critical {
+    @include admon-color(theme-color-level("danger", $alert-bg-level),
+      theme-color-level("danger", $alert-border-level),
+      theme-color-level("danger", $alert-color-level));
   }
-  &.warning{
-    @include admon-color($warning);
+  &.light {
+    @include admon-color(theme-color-level("light", $alert-bg-level),
+      theme-color-level("light", $alert-border-level),
+      theme-color-level("light", $alert-color-level));
   }
-  &.important {
-    @include admon-color($pink);
+  &.dark {
+    @include admon-color(theme-color-level("dark", $alert-bg-level),
+      theme-color-level("dark", $alert-border-level),
+      theme-color-level("dark", $alert-color-level));
   }
 }
diff --git a/src/wiki/static/wiki/bootstrap/scss/_details.scss b/src/wiki/static/wiki/bootstrap/scss/_details.scss
@@ -1,8 +1,68 @@
+@mixin detail_colors_default($color) {
+  color: darken($color, 40%);
+  background-color: lighten($color, 25%);
+  border-color: $color;
+}
+
+@mixin details-color($background, $border, $color) {
+  color: $color;
+  @include gradient-bg($background);
+  border-color: $border;
+
+  hr {
+    border-top-color: darken($border, 5%);
+  }
+
+  .alert-link {
+    color: darken($color, 10%);
+  }
+}
+
 details {
   border: 1px solid #aaa;
   border-radius: 4px;
   padding: 0.5em 0.5em 0;
-  background-color: #f8f9fa;
+  @include detail_colors_default($gray-600);
+  &.primary, &.important {
+    @include details-color(theme-color-level("primary", $alert-bg-level),
+      theme-color-level("primary", $alert-border-level),
+      theme-color-level("primary", $alert-color-level));
+  }
+  &.secondary, &.attention {
+    @include details-color(theme-color-level("secondary", $alert-bg-level),
+      theme-color-level("secondary", $alert-border-level),
+      theme-color-level("secondary", $alert-color-level));
+  }
+  &.success, &.tip {
+    @include details-color(theme-color-level("success", $alert-bg-level),
+      theme-color-level("success", $alert-border-level),
+      theme-color-level("success", $alert-color-level));
+  }
+  &.info, &.note, &.hint {
+    @include details-color(theme-color-level("info", $alert-bg-level),
+      theme-color-level("info", $alert-border-level),
+      theme-color-level("info", $alert-color-level));
+  }
+  &.warning, &.caution {
+    @include details-color(theme-color-level("warning", $alert-bg-level),
+      theme-color-level("warning", $alert-border-level),
+      theme-color-level("warning", $alert-color-level));
+  }
+  &.danger, &.critical {
+    @include details-color(theme-color-level("danger", $alert-bg-level),
+      theme-color-level("danger", $alert-border-level),
+      theme-color-level("danger", $alert-color-level));
+  }
+  &.light {
+    @include details-color(theme-color-level("light", $alert-bg-level),
+      theme-color-level("light", $alert-border-level),
+      theme-color-level("light", $alert-color-level));
+  }
+  &.dark {
+    @include details-color(theme-color-level("dark", $alert-bg-level),
+      theme-color-level("dark", $alert-border-level),
+      theme-color-level("dark", $alert-color-level));
+  }
 }
 
 summary {