From 86fb9162ad13cb245daf64a78cece05a58471d61 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Fri, 21 Aug 2026 19:53:37 +0100
Subject: [PATCH] Update CSS Styles for Enhanced Visual Consistency and Shadow
 Effects

- Added new styles for submenu titles in the electron sidebar to improve layout.
- Adjusted drop shadow properties for keyboard elements in both light and dark modes for better visual depth.
- Increased border radius and modified box-shadow values for keyboard elements to enhance aesthetics and user experience.
---
 assets/stylesheets/App.css | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index ef43de58..5ad660dc 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -234,7 +234,8 @@ html.macos-vibrancy .dark-mode .ant-layout.main-content-layout .ant-card {
   line-height: 40px;
 }
 
-.electron-sidebar.ant-menu-inline .ant-menu-item {
+.electron-sidebar.ant-menu-inline .ant-menu-item,
+.electron-sidebar.ant-menu-inline.ant-menu-root .ant-menu-submenu-title {
   padding-left: 20px !important;
 }
 
@@ -365,7 +366,7 @@ html:has(.light-mode) {
   --kbd-inset: #e8e8e8;
   --kbd-edge: #c3c3c3;
   --kbd-ridge: #c9c9c9;
-  --kbd-drop-shadow: #333333;
+  --kbd-drop-shadow: rgb(51 51 51 / 40%);
   --kbd-text-shadow: #f6f6f6;
 }
 
@@ -376,7 +377,7 @@ html:has(.dark-mode) {
   --kbd-inset: #323232;
   --kbd-edge: #1c1c1c;
   --kbd-ridge: #141414;
-  --kbd-drop-shadow: #000000;
+  --kbd-drop-shadow: rgb(0 0 0 / 45%);
   --kbd-text-shadow: #111111;
 }
 
@@ -389,11 +390,12 @@ html:has(.dark-mode) {
   padding: 3px 7px;
   margin: 5px 3px;
   border-radius: 4px;
+  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
   box-shadow:
     inset 0 0 25px var(--kbd-inset),
     0 1px 0 var(--kbd-edge),
-    0 2px 0 var(--kbd-ridge),
-    0 2px 3px var(--kbd-drop-shadow);
+    0 3px 0 var(--kbd-ridge),
+    0 4px 8px var(--kbd-drop-shadow);
   text-shadow: 0 1px 0 var(--kbd-text-shadow);
 }
 
@@ -401,12 +403,12 @@ html:has(.dark-mode) {
   padding: 4.5px 10.5px;
   margin: 7.5px 3.5px;
   font-size: 110%;
-  border-radius: 6px;
+  border-radius: 10px;
   box-shadow:
     inset 0 0 37.5px var(--kbd-inset),
     0 1.5px 0 var(--kbd-edge),
-    0 3px 0 var(--kbd-ridge),
-    0 3px 4.5px var(--kbd-drop-shadow);
+    0 4.5px 0 var(--kbd-ridge),
+    0 6px 12px var(--kbd-drop-shadow);
   text-shadow: 0 1.5px 0 var(--kbd-text-shadow);
 }
 
@@ -418,8 +420,8 @@ html:has(.dark-mode) {
   box-shadow:
     inset 0 0 50px var(--kbd-inset),
     0 2px 0 var(--kbd-edge),
-    0 4px 0 var(--kbd-ridge),
-    0 4px 6px var(--kbd-drop-shadow);
+    0 6px 0 var(--kbd-ridge),
+    0 8px 16px var(--kbd-drop-shadow);
   text-shadow: 0 2px 0 var(--kbd-text-shadow);
 }
 
@@ -431,8 +433,8 @@ html:has(.dark-mode) {
   box-shadow:
     inset 0 0 75px var(--kbd-inset),
     0 3px 0 var(--kbd-edge),
-    0 6px 0 var(--kbd-ridge),
-    0 6px 9px var(--kbd-drop-shadow);
+    0 9px 0 var(--kbd-ridge),
+    0 12px 24px var(--kbd-drop-shadow);
   text-shadow: 0 3px 0 var(--kbd-text-shadow);
 }