Docs: Cleaner admonishment styling

2 files changed, 56 insertions, 4 deletions

diff --git a/docs/refman/templates/notes.mustache b/docs/refman/templates/notes.mustache
index de550c53c..2172aafd5 100644
--- a/docs/refman/templates/notes.mustache
+++ b/docs/refman/templates/notes.mustache
@@ -1,14 +1,25 @@
 {{#notes}}
-<div class="alert alert-info">
-  <strong>Note:</strong>
+<aside class="note note-info">
+<div class="note-topbar note-topbar-info">
+  <span class="glyphicon glyphicon-info-sign"></span>
+  <span class="note-title">Note:</span>
+</div>
+<div class="note-content">
 
 {{&.}}
 </div>
+</aside>
 {{/notes}}
+
 {{#warnings}}
-<div class="alert alert-warning">
-  <strong>Warning:</strong>
+<aside class="note note-warning">
+<div class="note-topbar note-topbar-warning">
+  <span class="glyphicon glyphicon-warning-sign"></span>
+  <span class="note-title">Warning:</span>
+</div>
+<div class="note-content">
 
 {{&.}}
 </div>
+</aside>
 {{/warnings}}
diff --git a/docs/theme/extra/css/notes.css b/docs/theme/extra/css/notes.css
new file mode 100644
index 000000000..a9ef4973a
--- /dev/null
+++ b/docs/theme/extra/css/notes.css
@@ -0,0 +1,41 @@
+.note {
+    border: 0.2rem solid;
+    border-left-width: 0.5rem;
+    border-radius: 0.2rem;
+    margin: 2rem 1rem;
+}
+.note-topbar {
+    padding: 0.4rem 1rem;
+    border-radius: 1rem;
+    position: relative;
+    top: -1rem;
+    left: -1rem;
+    margin-right: auto;
+    min-width: min-content;
+    font-weight: bold;
+    font-size: 120%;
+    color: #fff;
+}
+.note-topbar .glyphicon {
+    top: 2px;
+}
+
+.note-content {
+    padding: 0 1rem;
+    margin-top: -0.5rem;
+}
+
+/* Colors taken from hotdoc_bootstrap_theme */
+.note-info {
+    border-color: #3dced8;
+}
+.note-topbar-info {
+    background-color: #3dced8;
+}
+
+.note-warning {
+    border-color: #e96506;
+}
+.note-topbar-warning {
+    background-color: #e96506;
+}