mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-17 15:21:53 +00:00
Enhance split view functionality and styling improvements
This commit is contained in:
@@ -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'] {
|
||||
|
@@ -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;
|
||||
|
@@ -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%;
|
||||
|
Reference in New Issue
Block a user