From ee4a050898a1e932da21d91ab696f9375a464f42 Mon Sep 17 00:00:00 2001
From: Sridhar Ratnakumar <srid@srid.ca>
Date: Mon, 17 Feb 2025 13:35:40 -0500
Subject: [PATCH] templates/callouts: Move more styles to tailwind

---
 emanote/default/templates/filters/callout.tpl |  6 ++++--
 emanote/default/templates/styles.tpl          | 12 +-----------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/emanote/default/templates/filters/callout.tpl b/emanote/default/templates/filters/callout.tpl
index c41cf326..d978e43d 100644
--- a/emanote/default/templates/filters/callout.tpl
+++ b/emanote/default/templates/filters/callout.tpl
@@ -1,9 +1,11 @@
 <div data-callout-metadata="" data-callout-fold="" data-callout="${callout:type}"
-  class="callout bg-opacity-10 bg-[#f5f5f5] p-4 pt-4 pb-2 rounded-lg mb-4" role="note">
+  class="callout bg-opacity-10 bg-[#f5f5f5] p-4 pt-4 pb-2 rounded-lg mb-4" role="note"
+  style="background-color: rgba(var(--callout-color), 0.1);">
   <path
     d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z">
   </path>
-  <div class="callout-title flex items-center mb-2 emanoteBold">
+  <div class="callout-title flex items-center mb-2 emanoteBold"
+    style="color: rgb(var(--callout-color));">
     <div class="callout-icon">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
diff --git a/emanote/default/templates/styles.tpl b/emanote/default/templates/styles.tpl
index 8f87c1fb..402df6ab 100644
--- a/emanote/default/templates/styles.tpl
+++ b/emanote/default/templates/styles.tpl
@@ -24,9 +24,7 @@
 </style>
 
 <style data-category="callout">
-  /* Callouts */
-
-
+  /* Define colour variables */
   .callout[data-callout="note"] {
     --callout-color: 8, 109, 221;
   }
@@ -56,14 +54,6 @@
     color: inherit;
     text-decoration: underline;
   }
-
-  div.callout {
-    background-color: rgba(var(--callout-color), 0.1);
-  }
-
-  .callout .callout-title {
-    color: rgb(var(--callout-color));
-  }
 </style>
 
 <style data-category="toc">