farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Update CSS Styles for Enhanced Visual Consistency and Shadow Effects

Browse Source 
- 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.
This commit is contained in:
Tom Butcher 2026-08-21 19:53:37 +01:00
parent e1fbd6070a
commit 86fb9162ad
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
assets/stylesheets/App.css
View File

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