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

Enhance Dashboard Styles with New Background and Corner Adjustments

Browse Source 
- Added a new background style for the main content layout in light mode under macOS vibrancy for improved visual depth.
- Introduced additional styling for active dashboard tab items, including a new after pseudo-element for better visual distinction.
- Refined corner radius properties for dashboard tab items to enhance alignment and aesthetics.
- Simplified corner fill positioning using the inset property for more consistent layout behavior across components.
This commit is contained in:
Tom Butcher 2026-09-18 01:42:15 +01:00
parent 65417f75b8
commit 5cc74bca18
1 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
assets/stylesheets/App.css
View File

@ -226,6 +226,17 @@ html.macos-vibrancy .light-mode .ant-layout-sider {
background: rgba(244, 244, 244, 0.82) !important; background: rgba(244, 244, 244, 0.82) !important;
} }
html.macos-vibrancy .light-mode .ant-layout.main-content-layout:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.85) !important;
z-index: -1;
}
html.macos-vibrancy .dark-mode .ant-layout-sider { html.macos-vibrancy .dark-mode .ant-layout-sider {
background: rgba(10, 10, 10, 0.82) !important; background: rgba(10, 10, 10, 0.82) !important;
} }
@ -3554,7 +3565,19 @@ body.objectKanbanColumnResizing * {
margin-bottom: -1px; margin-bottom: -1px;
padding-bottom: 5px; padding-bottom: 5px;
border-color: transparent; border-color: transparent;
position: relative;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
}
.dashboard-tab-item-active:after {
content: '';
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: -1px;
border-radius: 9px 9px 0 0;
z-index: -2;
background: var(--color-layout-background); background: var(--color-layout-background);
} }
@ -3578,7 +3601,7 @@ body.objectKanbanColumnResizing * {
.dashboard-tab-item-corner { .dashboard-tab-item-corner {
--tab-corner-size: 22px; --tab-corner-size: 22px;
--tab-corner-radius: 15.5px; --tab-corner-radius: 16px;
--tab-corner-inset: 1px; --tab-corner-inset: 1px;
--tab-corner-center: calc( --tab-corner-center: calc(
var(--tab-corner-size) - var(--tab-corner-inset) - var(--tab-corner-radius) var(--tab-corner-size) - var(--tab-corner-inset) - var(--tab-corner-radius)
@ -3602,10 +3625,7 @@ body.objectKanbanColumnResizing * {
.dashboard-tab-item-corner-fill { .dashboard-tab-item-corner-fill {
position: absolute; position: absolute;
top: 1px; inset: 0;
left: 2px;
right: 2px;
bottom: -1px;
background: var(--color-layout-background); background: var(--color-layout-background);
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; mask-repeat: no-repeat;
@ -3613,33 +3633,27 @@ body.objectKanbanColumnResizing * {
.dashboard-tab-item-corner-left .dashboard-tab-item-corner-fill { .dashboard-tab-item-corner-left .dashboard-tab-item-corner-fill {
-webkit-mask-image: radial-gradient( -webkit-mask-image: radial-gradient(
circle var(--tab-corner-radius) at var(--tab-corner-center) circle at var(--tab-corner-center) var(--tab-corner-center),
var(--tab-corner-center), transparent calc(var(--tab-corner-radius) - 0.5px),
transparent var(--tab-corner-radius), #000 calc(var(--tab-corner-radius) - 0.5px)
#000 var(--tab-corner-radius)
); );
mask-image: radial-gradient( mask-image: radial-gradient(
circle var(--tab-corner-radius) at var(--tab-corner-center) circle at var(--tab-corner-center) var(--tab-corner-center),
var(--tab-corner-center), transparent calc(var(--tab-corner-radius) - 0.5px),
transparent var(--tab-corner-radius), #000 calc(var(--tab-corner-radius) - 0.5px)
#000 var(--tab-corner-radius)
); );
} }
.dashboard-tab-item-corner-right .dashboard-tab-item-corner-fill { .dashboard-tab-item-corner-right .dashboard-tab-item-corner-fill {
-webkit-mask-image: radial-gradient( -webkit-mask-image: radial-gradient(
circle var(--tab-corner-radius) at circle at calc(100% - var(--tab-corner-center)) var(--tab-corner-center),
calc(var(--tab-corner-radius) + var(--tab-corner-inset)) transparent calc(var(--tab-corner-radius) - 0.5px),
var(--tab-corner-center), #000 calc(var(--tab-corner-radius) - 0.5px)
transparent var(--tab-corner-radius),
#000 var(--tab-corner-radius)
); );
mask-image: radial-gradient( mask-image: radial-gradient(
circle var(--tab-corner-radius) at circle at calc(100% - var(--tab-corner-center)) var(--tab-corner-center),
calc(var(--tab-corner-radius) + var(--tab-corner-inset)) transparent calc(var(--tab-corner-radius) - 0.5px),
var(--tab-corner-center), #000 calc(var(--tab-corner-radius) - 0.5px)
transparent var(--tab-corner-radius),
#000 var(--tab-corner-radius)
); );
} }