diff --git a/src/styles/Extn-SidebarTabs.less b/src/styles/Extn-SidebarTabs.less index 9a79950d70..f16716c215 100644 --- a/src/styles/Extn-SidebarTabs.less +++ b/src/styles/Extn-SidebarTabs.less @@ -22,12 +22,14 @@ #navTabBar { display: none; - align-items: center; - background-color: @bc-ai-sidebar-bg; - height: 2rem; - overflow: hidden; + align-items: stretch; + gap: 2px; + margin: 0.5rem 0.5rem 0.4rem; + padding: 3px; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 7px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); user-select: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); &.has-tabs { display: flex; @@ -37,36 +39,36 @@ .sidebar-tab { display: inline-flex; align-items: center; - gap: 0.35rem; - padding: 0 0.75rem; - height: 100%; + justify-content: center; + flex: 1 1 0; + gap: 0.4rem; + padding: 0.25rem 0.75rem; cursor: pointer; - position: relative; color: @project-panel-text-2; - font-size: 0.85rem; - transition: color 0.15s ease, background-color 0.15s ease; + font-size: 0.8rem; + font-weight: 500; + border-radius: 5px; + transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; i { - font-size: 0.75rem; + font-size: 0.78rem; + opacity: 0.85; } - &:hover { + &:hover:not(.active) { color: @project-panel-text-1; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.04); } &.active { color: @project-panel-text-1; - background-color: rgba(255, 255, 255, 0.04); + background-color: rgba(255, 255, 255, 0.09); + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.05) inset, + 0 1px 2px rgba(0, 0, 0, 0.2); - &::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background-color: @project-panel-text-1; + i { + opacity: 1; } } }