From 630eb5ac8d96c9503b1532cbcbeb4c543cbe868e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 16 Feb 2025 15:47:44 +0200
Subject: [PATCH] style(next): restyle the alert bar

---
 src/public/stylesheets/theme-next-dark.css  |  2 ++
 src/public/stylesheets/theme-next-light.css |  2 ++
 src/public/stylesheets/theme-next/shell.css | 25 ++++++++++++++++++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css
index 43a06dc49..965c7d274 100644
--- a/src/public/stylesheets/theme-next-dark.css
+++ b/src/public/stylesheets/theme-next-dark.css
@@ -142,6 +142,8 @@
     --inactive-tab-hover-background-color: #ffffff0f;
     --inactive-tab-text-color: #7c7c7c;
 
+    --alert-bar-background: #6b6b6b3b;
+
     --right-pane-item-hover-background: #ffffff26;
     --right-pane-item-hover-color: white;
 
diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css
index 02ab8ae68..c67c93274 100644
--- a/src/public/stylesheets/theme-next-light.css
+++ b/src/public/stylesheets/theme-next-light.css
@@ -136,6 +136,8 @@
     --inactive-tab-hover-background-color: #00000016;
     --inactive-tab-text-color: #4e4e4e;
 
+    --alert-bar-background: #32637b29;
+
     --new-tab-button-background: #d8d8d8;
     --new-tab-button-color: #3a3a3a;
     --new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index fad5accc4..68751a534 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1806,4 +1806,27 @@ div.bookmark-folder-widget .note-link .bx {
 .note-icon-widget .icon-list span:hover {
     background: var(--hover-item-background-color);
     color: var(--hover-item-text-color);
-}
\ No newline at end of file
+}
+
+/* Alert bar */
+
+@keyframes alert-show {
+    from {
+        opacity: 0;
+    } to {
+        opacity: 1;
+    }
+}
+
+#center-pane div.alert {
+    position: relative;
+    margin: 8px 0 0 0;
+    border: unset;
+    border-radius: 0;
+    padding: 8px 16px;
+    background: var(--alert-bar-background) !important;
+    font-size: .9em;
+    font-weight: normal;
+    animation: alert-show 300ms ease-in;
+    border-bottom: 2px solid #0000001c !important;
+}