From 1d64063459045fbb082a7cf6b010463ffeef3f24 Mon Sep 17 00:00:00 2001
From: Jerome Dockes <jerome@dockes.org>
Date: Mon, 1 Jul 2024 16:18:12 +0200
Subject: [PATCH] _

---
 src/skrubview/_data/templates/base.css     | 8 ++++++++
 src/skrubview/_data/templates/top-bar.html | 6 ++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/skrubview/_data/templates/base.css b/src/skrubview/_data/templates/base.css
index cb37c19..a2613e5 100644
--- a/src/skrubview/_data/templates/base.css
+++ b/src/skrubview/_data/templates/base.css
@@ -355,3 +355,11 @@
     padding-block-start: var(--skrubview-huge);
     padding-block-end: var(--skrubview-huge);
 }
+
+{{ report_id_selector }}.skrubview-report .skrubview-important-note {
+    background-color: var(--skrubview-lightgreen);
+    padding: var(--skrubview-small);
+    border-radius: var(--skrubview-radius);
+    margin-top: var(--skrubview-tiny);
+    margin-bottom: var(--skrubview-small);
+}
diff --git a/src/skrubview/_data/templates/top-bar.html b/src/skrubview/_data/templates/top-bar.html
index fcfc9a7..b0288d4 100644
--- a/src/skrubview/_data/templates/top-bar.html
+++ b/src/skrubview/_data/templates/top-bar.html
@@ -17,8 +17,10 @@
         </div>
 
     </div>
-    <div class="skrubview-announcement skrubview-text" id="{{ top_bar_id }}-placeholder">
-        Click on a table cell below to display more information.
+    <div class="skrubview-flex">
+    <div class="skrubview-announcement skrubview-text skrubview-important-note" id="{{ top_bar_id }}-placeholder">
+        Click on a table cell below to display more information about its column.
+    </div>
     </div>
 </div>
 <script>