diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css index b02c2f20..dfedae6e 100644 --- a/assets/stylesheets/App.css +++ b/assets/stylesheets/App.css @@ -158,19 +158,32 @@ html.macos-vibrancy .main-layout { } html.macos-vibrancy .light-mode { - --color-layout-background: rgba(255, 255, 255, 0.88); + --color-layout-background: rgba(255, 255, 255, 0.3); } html.macos-vibrancy .dark-mode { - --color-layout-background: rgba(0, 0, 0, 0.88); + --color-layout-background: rgba(0, 0, 0, 0.3); } html.macos-vibrancy .light-mode .ant-layout.main-content-layout { background: var(--color-layout-background) !important; + position: relative; } html.macos-vibrancy .dark-mode .ant-layout.main-content-layout { background: var(--color-layout-background) !important; + position: relative; +} + +html.macos-vibrancy .dark-mode .ant-layout.main-content-layout:before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(10, 10, 10, 0.85) !important; + z-index: -1; } html.macos-vibrancy .light-mode .ant-layout-sider { @@ -213,11 +226,11 @@ html.macos-vibrancy } html.macos-vibrancy .dark-mode .electron-navigation-wrapper { - background: rgba(10, 10, 10, 0.9) !important; + background: rgba(10, 10, 10, 0.85) !important; } html.macos-vibrancy .light-mode .electron-navigation-wrapper { - background: rgba(255, 255, 255, 0.9) !important; + background: rgba(255, 255, 255, 0.85) !important; } html.macos-vibrancy .electron-navigation { @@ -1913,7 +1926,7 @@ body.objectKanbanColumnResizing * { .electron-body .ant-modal-wrap, .electron-body .ant-modal-mask, .electron-body .ant-drawer { - top: 41px; + top: 42px; } @keyframes h-progress-macos-wave { @@ -3372,6 +3385,7 @@ body.objectKanbanColumnResizing * { flex: 1; min-width: 0; align-self: stretch; + height: 42px; } .dashboard-tabs-wrap { @@ -3387,6 +3401,9 @@ body.objectKanbanColumnResizing * { .dashboard-tabs-inner { width: max-content; height: 100%; + min-width: fit-content; + width: 100%; + overflow: hidden; align-items: flex-start; box-sizing: border-box; } @@ -3396,19 +3413,19 @@ body.objectKanbanColumnResizing * { display: flex; align-items: flex-start; gap: 4px; - padding-inline: 12px; + padding-left: 12px; height: 100%; max-height: 42px; } .dashboard-tab-item-container { - height: 43px; + height: 42px; position: relative; } .dashboard-tab-item-container-active { border-bottom: none; - height: 43px; + height: 42px; } .dashboard-tab-item-container:before { @@ -3421,12 +3438,22 @@ body.objectKanbanColumnResizing * { border-bottom: 1px solid var(--color-header-border); } +.dashboard-tab-item-container:first-child:before { + left: -12px; +} + +.dashboard-tab-item-container:last-child:before { + right: -20px; +} + .dashboard-tab-item-container-active + .dashboard-tab-item-container:before { left: 16px; } -.dashboard-tabs-list:has(+ .dashboard-tab-item-container-active):before { - right: 9.5px; +.dashboard-tab-item-container:has( + + .dashboard-tab-item-container-active + ):before { + right: 16px; } .dashboard-tab-item-container-active:before { @@ -3453,10 +3480,6 @@ body.objectKanbanColumnResizing * { color: inherit; box-shadow: none; outline: none; - - transition: - background 0.3s ease, - border-color 0.3s ease; } .dashboard-tab-item-icon { @@ -3473,6 +3496,12 @@ body.objectKanbanColumnResizing * { outline-offset: 2px; } +.dashboard-tab-item:not(.dashboard-tab-item-active) { + transition: + background 0.3s ease, + border-color 0.3s ease; +} + .dashboard-tab-item:not(.dashboard-tab-item-active):hover { background: var(--color-button-background); border: 1px solid @@ -3490,7 +3519,7 @@ body.objectKanbanColumnResizing * { padding-bottom: 5px; border-color: transparent; border-radius: 12px 12px 0 0; - background: transparent; + background: var(--color-layout-background); } .dashboard-tab-item-outline-container { @@ -3509,18 +3538,22 @@ body.objectKanbanColumnResizing * { border-radius: 12px 12px 0 0; pointer-events: none; opacity: 0; - transition: opacity 0.3s ease; } .dashboard-tab-item-corner { + --tab-corner-size: 22px; + --tab-corner-radius: 15.5px; + --tab-corner-inset: 1px; + --tab-corner-center: calc( + var(--tab-corner-size) - var(--tab-corner-inset) - var(--tab-corner-radius) + ); position: absolute; bottom: -2px; - width: 22px; - height: 22px; + width: var(--tab-corner-size); + height: var(--tab-corner-size); overflow: hidden; pointer-events: none; opacity: 0; - transition: opacity 0.3s ease; } .dashboard-tab-item-corner-left { @@ -3531,23 +3564,75 @@ body.objectKanbanColumnResizing * { right: -21px; } +.dashboard-tab-item-corner-fill { + position: absolute; + top: 1px; + left: 2px; + right: 2px; + bottom: -1px; + background: var(--color-layout-background); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} + +.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) + ); + 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) + ); +} + +.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) + ); + 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) + ); +} + .dashboard-tab-item-corner-inner { position: absolute; width: 48px; height: 48px; box-sizing: border-box; - border: 1px solid var(--color-header-border); - border-radius: 15.5px; + border-radius: var(--tab-corner-radius); + padding: 1px; + background: var(--color-header-border); + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + mask-composite: exclude; } .dashboard-tab-item-corner-left .dashboard-tab-item-corner-inner { - bottom: 1px; - right: 1px; + bottom: var(--tab-corner-inset); + right: var(--tab-corner-inset); } .dashboard-tab-item-corner-right .dashboard-tab-item-corner-inner { - bottom: 1px; - left: 1px; + bottom: var(--tab-corner-inset); + left: var(--tab-corner-inset); } .dashboard-tab-item-active .dashboard-tab-item-outline, @@ -3557,10 +3642,11 @@ body.objectKanbanColumnResizing * { .dashboard-tabs-label { max-width: 280px; - margin-top: -2px; } .dashboard-tabs-close { + position: relative; + z-index: 1; display: inline-flex; align-items: center; justify-content: center; @@ -3570,6 +3656,14 @@ body.objectKanbanColumnResizing * { border-radius: 8px; color: var(--color-text-secondary, inherit); opacity: 0.7; + cursor: pointer; + flex-shrink: 0; +} + +.dashboard-tabs-close::before { + content: ''; + position: absolute; + inset: -8px -8px -8px -6px; } .dashboard-tabs-close:hover { @@ -3583,6 +3677,21 @@ body.objectKanbanColumnResizing * { margin-top: 2px; } +.dashboard-tabs-add-button-container { + flex-grow: 1; + height: 42px; + position: relative; +} + +.dashboard-tabs-add-button-container:before { + content: ''; + position: absolute; + left: 12px; + right: 0; + bottom: 0; + border-bottom: 1px solid var(--color-header-border); +} + .dashboard-tab-item-dragging { opacity: 0.4; } diff --git a/src/components/Dashboard/common/DashboardNavigation.jsx b/src/components/Dashboard/common/DashboardNavigation.jsx index 60155357..92b3eb11 100644 --- a/src/components/Dashboard/common/DashboardNavigation.jsx +++ b/src/components/Dashboard/common/DashboardNavigation.jsx @@ -473,7 +473,11 @@ const DashboardNavigation = () => { className={`electron-navigation-wrapper ${electronDragClass}`} style={{ lineHeight: '40px', padding: '0 2px 0 2px' }} > - + {navigationLeading} {showControls && !isMobile ? menu : null} {showControls && !isMobile ? ( @@ -481,8 +485,8 @@ const DashboardNavigation = () => { type='vertical' style={{ margin: showNavigationLabels - ? '3px 16px 0 4px' - : '3px 16px 0 0', + ? '3px 1px 0 4px' + : '3px 1px 0 0', height: '14px' }} /> diff --git a/src/components/Dashboard/common/DashboardTabs.jsx b/src/components/Dashboard/common/DashboardTabs.jsx index 4eff3515..3ec0d658 100644 --- a/src/components/Dashboard/common/DashboardTabs.jsx +++ b/src/components/Dashboard/common/DashboardTabs.jsx @@ -22,12 +22,14 @@ const DashboardTabChrome = () => ( className='dashboard-tab-item-corner dashboard-tab-item-corner-left' aria-hidden='true' > +