Enhance split view functionality and styling improvements

This commit is contained in:
mr. M
2025-03-01 19:19:22 +01:00
parent 595aa9b062
commit 86390bde02
6 changed files with 92 additions and 54 deletions

View File

@@ -34,6 +34,7 @@
margin-left: 0 !important;
position: absolute !important;
overflow: hidden;
transition: inset 0.1s;
}
#tabbrowser-tabpanels[zen-split-view='true']:not([zen-split-resizing]) > [zen-split-anim='true'] {

View File

@@ -13,14 +13,21 @@ tab-group[split-view-group] {
align-items: center;
--zen-split-view-active-tab-bg: color-mix(in srgb, var(--zen-toolbar-element-bg), transparent 40%);
:root:not([zen-sidebar-expanded='true']) & {
padding: 2px 0;
}
& > .tabbrowser-tab {
--tab-min-height: 28px;
--tab-selected-bgcolor: var(--zen-split-view-active-tab-bg);
--tab-hover-background-color: transparent;
--tab-selected-shadow: none;
--border-radius-medium: var(--tab-border-radius);
--zen-active-tab-scale: 1;
:root[zen-sidebar-expanded='true'] & {
--tab-min-height: 28px;
}
flex: 1 !important;
&:not(:last-child)::after {
@@ -33,6 +40,15 @@ tab-group[split-view-group] {
top: 50%;
transform: translateY(-50%);
}
:root:not([zen-sidebar-expanded='true']) &:not(:last-child)::after {
width: 16px;
height: 1px;
top: auto;
bottom: 0;
right: 50%;
transform: translateX(50%);
}
}
&:has(> tab[visuallyselected]) {
@@ -42,7 +58,7 @@ tab-group[split-view-group] {
& > .tabbrowser-tab {
--tab-hover-background-color: var(--zen-split-view-active-tab-bg);
& .tab-background {
background-color: var(--zen-split-view-active-tab-bg);
background-color: var(--zen-split-view-active-tab-bg) !important;
}
&::after {
@@ -70,6 +86,12 @@ tab-group[split-view-group] {
}
}
:root:not([zen-sidebar-expanded='true']) {
tab-group {
flex-direction: column;
}
}
tab-group[split-view-group] .tabbrowser-tab {
width: 100%;
max-width: unset;

View File

@@ -391,7 +391,7 @@
max-height: unset !important;
& .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
background: transparent !important;
background: transparent;
}
& .tabbrowser-tab .tab-content {
@@ -872,7 +872,7 @@
display: block;
width: 2.5px;
height: 16px;
background: light-dark(rgba(88, 79, 79, 0.02), rgba(255, 255, 255, 0.3));
background: light-dark(rgba(66, 61, 61, 0.3), rgba(255, 255, 255, 0.3));
position: absolute;
right: 0;
top: 50%;