From 5aa457dcf38a2094e6d974e11d7a8df23b4a057f Mon Sep 17 00:00:00 2001
From: Sergey Kolesnik <sergey.s.kolesnik@gmail.com>
Date: Mon, 19 Aug 2024 15:34:38 +0300
Subject: [PATCH] fix(sidebars): changed styles for right sidebar background &
 headers

---
 src/base.css        | 53 +++++++++++++++++++++++++++++----------------
 src/dark-black.css  |  5 +++--
 src/dark-coffee.css |  5 +++--
 src/light-sepia.css |  5 +++--
 src/light-white.css |  5 +++--
 5 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/src/base.css b/src/base.css
index 1f26d10..7cbe2b9 100644
--- a/src/base.css
+++ b/src/base.css
@@ -114,25 +114,48 @@ body[data-page=whiteboard] #app-container {
 }
 
 
-/* ------------- */
-/* SIDEBARS      */
-/* ------------- */
+/**
+/* MENUS & SIDEBARS
+**/
 
 /* right sidebar */
 
 #right-sidebar .cp__right-sidebar-topbar {
     background: none;
-}
 
-#right-sidebar .button:hover {
-    background-color: var(--ls-menu-hover-color);
+    .button {
+        background-color: var(--bujo-left-sidebar-background);
+    }
+    .button:hover {
+        background-color: var(--ls-menu-hover-color);
+    }
 }
 
-#right-sidebar .sidebar-item-list {
-    background: none;
-}
-#right-sidebar .sidebar-item-header {
-    background-color: var(--bujo-right-sidebar-item-header-background);
+#right-sidebar {
+    .cp__right-sidebar-inner {
+        background-color: var(--bujo-left-sidebar-background);
+
+        /* apply border to right sidebar as with left sidebar */
+        border-left: 1px solid var(--ls-left-sidebar-border-color, var(--lx-gray-03, var(--ls-tertiary-background-color)));
+    }
+
+    .sidebar-item-list {
+        background: none;
+    }
+
+    .sidebar-item-list > .sidebar-item {
+        &.collapsed {
+            box-shadow: none;
+        }
+
+        /* &:is(.item-type-block, .item-type-page, .item-type-contents, .item-type-page-slide-view, .item-type-page-graph, .item-type-help) { */
+        & .sidebar-item-header {
+            background: linear-gradient(0deg, var(--bujo-right-sidebar-item-header-background2), var(--bujo-right-sidebar-item-header-background1));
+        }
+        &.collapsed .sidebar-item-header {
+            background: var(--bujo-right-sidebar-item-header-background1);
+        }
+    }
 }
 
 #right-sidebar .sidebar-item {
@@ -184,14 +207,6 @@ body[data-page=whiteboard] #app-container {
     color: var(--ls-link-ref-text-hover-color);
 }
 
-#right-sidebar {
-    .cp__right-sidebar-inner { /* apply border to right sidebar as with left sidebar */
-        border-left: 1px solid var(--ls-left-sidebar-border-color,var(--lx-gray-03,var(--ls-tertiary-background-color)));
-    }
-    .sidebar-item-list > .sidebar-item {
-        box-shadow: none;
-    }
-}
 
 /* left sidebar */
 
diff --git a/src/dark-black.css b/src/dark-black.css
index 9e3c94c..5b31584 100644
--- a/src/dark-black.css
+++ b/src/dark-black.css
@@ -88,6 +88,9 @@
     --bujo-left-sidebar-page-icon: var(--ls-primary-text-color);
     --bujo-left-sidebar-page-text: var(--ls-primary-text-color);
 
+    --bujo-right-sidebar-item-header-background1: var(--bujo-background3);
+    --bujo-right-sidebar-item-header-background2: var(--bujo-background2);
+
     --ls-slide-background-color: var(--ls-primary-background-color);
 
 
@@ -196,8 +199,6 @@
 
 
     /* scrollbars, table header and various ui borders */
-    --bujo-right-sidebar-item-header-background: var(--color-level-2);
-
     --ls-table-tr-even-background-color: var(--bujo-fill1);
     --bujo-right-sidebar-table-even-background: var(--ls-table-tr-even-background-color);
 
diff --git a/src/dark-coffee.css b/src/dark-coffee.css
index 3a7bf5d..828df48 100644
--- a/src/dark-coffee.css
+++ b/src/dark-coffee.css
@@ -90,6 +90,9 @@
     --bujo-left-sidebar-page-icon: var(--ls-primary-text-color);
     --bujo-left-sidebar-page-text: var(--ls-primary-text-color);
 
+    --bujo-right-sidebar-item-header-background1: var(--bujo-background4);
+    --bujo-right-sidebar-item-header-background2: var(--bujo-background3);
+
     --ls-slide-background-color: var(--ls-primary-background-color);
 
 
@@ -198,8 +201,6 @@
 
 
     /* scrollbars, table header and various ui borders */
-    --bujo-right-sidebar-item-header-background: var(--color-level-2);
-
     --ls-table-tr-even-background-color: var(--bujo-background4);
     --bujo-right-sidebar-table-even-background: var(--bujo-background4);
 
diff --git a/src/light-sepia.css b/src/light-sepia.css
index 7e082ab..96b2644 100644
--- a/src/light-sepia.css
+++ b/src/light-sepia.css
@@ -97,6 +97,9 @@
     --bujo-left-sidebar-page-icon: var(--ls-primary-text-color);
     --bujo-left-sidebar-page-text: var(--ls-primary-text-color);
 
+    --bujo-right-sidebar-item-header-background1: var(--bujo-background6);
+    --bujo-right-sidebar-item-header-background2: var(--bujo-background4);
+
     --ls-slide-background-color: var(--ls-primary-background-color);
 
 
@@ -204,8 +207,6 @@
 
 
     /* scrollbars, table header and various ui borders */
-    --bujo-right-sidebar-item-header-background: var(--color-level-2);
-
     --ls-table-tr-even-background-color: var(--bujo-background4);
     --bujo-right-sidebar-table-even-background: var(--bujo-background4);
 
diff --git a/src/light-white.css b/src/light-white.css
index 78ced68..0969fc8 100644
--- a/src/light-white.css
+++ b/src/light-white.css
@@ -114,6 +114,9 @@
     --bujo-left-sidebar-page-icon: var(--ls-primary-text-color);
     --bujo-left-sidebar-page-text: var(--ls-primary-text-color);
 
+    --bujo-right-sidebar-item-header-background1: var(--bujo-background3);
+    --bujo-right-sidebar-item-header-background2: var(--bujo-background2);
+
     --ls-slide-background-color: var(--ls-primary-background-color);
 
 
@@ -221,8 +224,6 @@
 
 
     /* scrollbars, table header and various ui borders */
-    --bujo-right-sidebar-item-header-background: var(--bujo-background3);
-
     --ls-table-tr-even-background-color: var(--bujo-background3);
     --bujo-right-sidebar-table-even-background: var(--bujo-background3);