diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css index bfce1c54..c7ee4f90 100644 --- a/assets/stylesheets/App.css +++ b/assets/stylesheets/App.css @@ -226,6 +226,17 @@ html.macos-vibrancy .light-mode .ant-layout-sider { 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 { background: rgba(10, 10, 10, 0.82) !important; } @@ -3554,7 +3565,19 @@ body.objectKanbanColumnResizing * { margin-bottom: -1px; padding-bottom: 5px; border-color: transparent; + position: relative; 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); } @@ -3578,7 +3601,7 @@ body.objectKanbanColumnResizing * { .dashboard-tab-item-corner { --tab-corner-size: 22px; - --tab-corner-radius: 15.5px; + --tab-corner-radius: 16px; --tab-corner-inset: 1px; --tab-corner-center: calc( var(--tab-corner-size) - var(--tab-corner-inset) - var(--tab-corner-radius) @@ -3602,10 +3625,7 @@ body.objectKanbanColumnResizing * { .dashboard-tab-item-corner-fill { position: absolute; - top: 1px; - left: 2px; - right: 2px; - bottom: -1px; + inset: 0; background: var(--color-layout-background); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @@ -3613,33 +3633,27 @@ body.objectKanbanColumnResizing * { .dashboard-tab-item-corner-left .dashboard-tab-item-corner-fill { -webkit-mask-image: radial-gradient( - circle var(--tab-corner-radius) at var(--tab-corner-center) - var(--tab-corner-center), - transparent var(--tab-corner-radius), - #000 var(--tab-corner-radius) + circle at var(--tab-corner-center) var(--tab-corner-center), + transparent calc(var(--tab-corner-radius) - 0.5px), + #000 calc(var(--tab-corner-radius) - 0.5px) ); mask-image: radial-gradient( - circle var(--tab-corner-radius) at var(--tab-corner-center) - var(--tab-corner-center), - transparent var(--tab-corner-radius), - #000 var(--tab-corner-radius) + circle at var(--tab-corner-center) var(--tab-corner-center), + transparent calc(var(--tab-corner-radius) - 0.5px), + #000 calc(var(--tab-corner-radius) - 0.5px) ); } .dashboard-tab-item-corner-right .dashboard-tab-item-corner-fill { -webkit-mask-image: radial-gradient( - circle var(--tab-corner-radius) at - calc(var(--tab-corner-radius) + var(--tab-corner-inset)) - var(--tab-corner-center), - transparent var(--tab-corner-radius), - #000 var(--tab-corner-radius) + circle at calc(100% - var(--tab-corner-center)) var(--tab-corner-center), + transparent calc(var(--tab-corner-radius) - 0.5px), + #000 calc(var(--tab-corner-radius) - 0.5px) ); mask-image: radial-gradient( - circle var(--tab-corner-radius) at - calc(var(--tab-corner-radius) + var(--tab-corner-inset)) - var(--tab-corner-center), - transparent var(--tab-corner-radius), - #000 var(--tab-corner-radius) + circle at calc(100% - var(--tab-corner-center)) var(--tab-corner-center), + transparent calc(var(--tab-corner-radius) - 0.5px), + #000 calc(var(--tab-corner-radius) - 0.5px) ); }