From 87209285dfc7258ffd9eb774f6687c5d028d7201 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 22 Mar 2025 14:39:43 +0200
Subject: [PATCH] feat(mermaid): use admonition style for error messages

---
 libraries/ckeditor/ckeditor-content.css       | 16 ++++++------
 .../app/doc_notes/en/User Guide/style.css     | 16 ++++++------
 .../abstract_split_type_widget.ts             |  4 +--
 src/public/stylesheets/style.css              | 26 +++++++++----------
 4 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/libraries/ckeditor/ckeditor-content.css b/libraries/ckeditor/ckeditor-content.css
index 5f00bd7af..0ebbae93d 100644
--- a/libraries/ckeditor/ckeditor-content.css
+++ b/libraries/ckeditor/ckeditor-content.css
@@ -17,7 +17,7 @@
     margin: 0 !important;
 }
 
-.ck-content .admonition {
+.admonition {
     --accent-color: var(--card-border-color);
     border: 1px solid var(--accent-color);
     box-shadow: var(--card-box-shadow);
@@ -29,19 +29,19 @@
     overflow: hidden;
 }
 
-.ck-content .admonition p:last-child {
+.admonition p:last-child {
     margin-bottom: 0;
 }
 
-.ck-content .admonition p, h2 {
+.admonition p, h2 {
     margin-top: 0;
 }
 
-.ck-content .admonition.note { --accent-color: #69c7ff; }
-.ck-content .admonition.tip { --accent-color: #40c025; }
-.ck-content .admonition.important { --accent-color: #9839f7; }
-.ck-content .admonition.caution { --accent-color: #ff2e2e; }
-.ck-content .admonition.warning { --accent-color: #e2aa03; }
+.admonition.note { --accent-color: #69c7ff; }
+.admonition.tip { --accent-color: #40c025; }
+.admonition.important { --accent-color: #9839f7; }
+.admonition.caution { --accent-color: #ff2e2e; }
+.admonition.warning { --accent-color: #e2aa03; }
 
 /*
  * CKEditor 5 (v41.0.0) content styles.
diff --git a/src/public/app/doc_notes/en/User Guide/style.css b/src/public/app/doc_notes/en/User Guide/style.css
index 5f00bd7af..0ebbae93d 100644
--- a/src/public/app/doc_notes/en/User Guide/style.css	
+++ b/src/public/app/doc_notes/en/User Guide/style.css	
@@ -17,7 +17,7 @@
     margin: 0 !important;
 }
 
-.ck-content .admonition {
+.admonition {
     --accent-color: var(--card-border-color);
     border: 1px solid var(--accent-color);
     box-shadow: var(--card-box-shadow);
@@ -29,19 +29,19 @@
     overflow: hidden;
 }
 
-.ck-content .admonition p:last-child {
+.admonition p:last-child {
     margin-bottom: 0;
 }
 
-.ck-content .admonition p, h2 {
+.admonition p, h2 {
     margin-top: 0;
 }
 
-.ck-content .admonition.note { --accent-color: #69c7ff; }
-.ck-content .admonition.tip { --accent-color: #40c025; }
-.ck-content .admonition.important { --accent-color: #9839f7; }
-.ck-content .admonition.caution { --accent-color: #ff2e2e; }
-.ck-content .admonition.warning { --accent-color: #e2aa03; }
+.admonition.note { --accent-color: #69c7ff; }
+.admonition.tip { --accent-color: #40c025; }
+.admonition.important { --accent-color: #9839f7; }
+.admonition.caution { --accent-color: #ff2e2e; }
+.admonition.warning { --accent-color: #e2aa03; }
 
 /*
  * CKEditor 5 (v41.0.0) content styles.
diff --git a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
index fdab20695..c14460fc5 100644
--- a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
+++ b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
@@ -13,7 +13,7 @@ const TPL = `\
 <div class="note-detail-split note-detail-printable">
     <div class="note-detail-split-editor-col">
         <div class="note-detail-split-editor"></div>
-        <div class="note-detail-error-container alert alert-warning hidden-ext"></div>
+        <div class="admonition caution note-detail-error-container hidden-ext"></div>
     </div>
     <div class="note-detail-split-preview-col">
         <div class="note-detail-split-preview"></div>
@@ -42,7 +42,7 @@ const TPL = `\
 
         .note-detail-split .note-detail-error-container {
             font-family: var(--monospace-font-family);
-            margin: 0.1em;
+            margin: 5px;
             white-space: pre-wrap;
             font-size: 0.85em;
         }
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index a5b17f782..4f34130e2 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1722,7 +1722,7 @@ footer.file-footer button {
     margin: 5px;
 }
 
-.ck-content .admonition {
+.admonition {
     --accent-color: var(--card-border-color);
     border: 1px solid var(--accent-color);
     box-shadow: var(--card-box-shadow);
@@ -1735,11 +1735,11 @@ footer.file-footer button {
     overflow: hidden;
 }
 
-.ck-content .admonition p:last-child {
+.admonition p:last-child {
     margin-bottom: 0;
 }
 
-.ck-content .admonition::before {  
+.admonition::before {  
     color: var(--accent-color);
     font-family: boxicons !important;
     position: absolute;
@@ -1747,17 +1747,17 @@ footer.file-footer button {
     left: 1em;
 }
 
-.ck-content .admonition.note { --accent-color: #69c7ff; }
-.ck-content .admonition.tip { --accent-color: #40c025; }
-.ck-content .admonition.important { --accent-color: #9839f7; }
-.ck-content .admonition.caution { --accent-color: #ff2e2e; }
-.ck-content .admonition.warning { --accent-color: #e2aa03; }
+.admonition.note { --accent-color: #69c7ff; }
+.admonition.tip { --accent-color: #40c025; }
+.admonition.important { --accent-color: #9839f7; }
+.admonition.caution { --accent-color: #ff2e2e; }
+.admonition.warning { --accent-color: #e2aa03; }
 
-.ck-content .admonition.note::before { content: "\eb21"; }
-.ck-content .admonition.tip::before { content: "\ea0d"; }
-.ck-content .admonition.important::before { content: "\ea7c"; }
-.ck-content .admonition.caution::before { content: "\eac7"; }
-.ck-content .admonition.warning::before { content: "\eac5"; }
+.admonition.note::before { content: "\eb21"; }
+.admonition.tip::before { content: "\ea0d"; }
+.admonition.important::before { content: "\ea7c"; }
+.admonition.caution::before { content: "\eac7"; }
+.admonition.warning::before { content: "\eac5"; }
 
 /*
  * In-content floating buttons