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

Refine macOS vibrancy styles and enhance layout structure
Some checks failed
farmcontrol/farmcontrol-ui/pipeline/head There was a failure building this commit
Details

Browse Source 
- Updated CSS for macOS vibrancy, improving background opacity for light and dark modes in main content and sidebar.
- Added styles for selected menu items in light mode to enhance UI consistency.
- Modified DashboardLayout to include a specific class for the main content layout, ensuring better styling application.
This commit is contained in:
Tom Butcher 2026-08-02 12:50:29 +01:00
parent 805361516e
commit 8d9455eaa9
2 changed files with 31 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/stylesheets/App.css
View File

@ -124,12 +124,20 @@ html.macos-vibrancy .main-layout {
background: transparent !important;
}
html.macos-vibrancy .light-mode .ant-layout.main-content-layout {
background: rgba(255, 255, 255, 0.88) !important;
}
html.macos-vibrancy .dark-mode .ant-layout.main-content-layout {
background: rgba(0, 0, 0, 0.88) !important;
}
html.macos-vibrancy .light-mode .ant-layout-sider {
background: rgba(255, 255, 255, 0.7) !important;
background: rgba(244, 244, 244, 0.8) !important;
}
html.macos-vibrancy .dark-mode .ant-layout-sider {
background: rgba(5, 5, 5, 0.7) !important;
background: rgba(10, 10, 10, 0.8) !important;
}
html.macos-vibrancy .light-mode .ant-layout-content {
@ -154,10 +162,30 @@ html.macos-vibrancy
color: color-mix(in srgb, var(--color-primary) 75%, #ffffff);
}
html.macos-vibrancy
.light-mode
.electron-sider
.ant-menu-light
.ant-menu-item-selected {
background-color: color-mix(in srgb, var(--color-primary) 80%, #ffffff3d);
color: #ffffff;
}
html.macos-vibrancy .light-mode .ant-layout.main-content-layout .ant-card {
background: rgba(255, 255, 255, 0.5) !important;
}
html.macos-vibrancy .dark-mode .ant-layout.main-content-layout .ant-card {
background: rgba(31, 31, 31, 0.5) !important;
}
.electron-navigation {
line-height: 40px;
}
.electron-sidebar.ant-menu-inline .ant-menu-item {
padding-left: 20px !important;
}
.electron-navigation .ant-menu-overflow-item-rest {
padding-inline: 10px;
}

2
src/components/Dashboard/Layout.jsx
View File

@ -49,7 +49,7 @@ const DashboardLayout = ({ children }) => {
) : (
<ProductionSidebar /> // Default to production sidebar
)}
<Layout style={{ padding: '24px' }}>
<Layout style={{ padding: '24px' }} className='main-content-layout'>
<Content>
<Flex vertical style={{ height: '100%' }} gap='20px'>
<Flex justify='space-between'>