mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Render dropZone when dragging.

Browse Source
This commit is contained in:
brahim
2024-10-05 03:30:24 +02:00
parent e429d0317d
commit a870d7eb42
2 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/browser/base/content/zen-splitview-overlay.inc.xhtml
View File

@@ -1,5 +1,5 @@
<hbox id="zen-splitview-overlay">
<hbox id="zen-splitview-splitterbox">
<hbox id="zen-splitview-overlay-wrapper">
<hbox id="zen-splitview-overlay">
<hbox id ="zen-splitview-dropzone"></hbox>
</hbox>
</hbox>

21
src/browser/base/content/zen-styles/zen-decks.css
View File

@@ -15,6 +15,14 @@
flex: 0;
margin: 0;
}
#zen-splitview-dropzone {
background: red;
opacity: .5;
position: absolute;
margin: calc(var(--zen-split-column-gap) / 2) calc(var(--zen-split-row-gap) / 2);
border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
transition: all ease-out .1s;
}
#tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'] {
flex: 1;
@@ -35,7 +43,7 @@
--zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
}
#tabbrowser-tabpanels:has(> [zen-split='true']), #zen-splitview-splitterbox {
#tabbrowser-tabpanels:has(> [zen-split='true']), #zen-splitview-overlay {
margin-right: calc(var(--zen-element-separation) - var(--zen-split-row-gap)/2);
margin-bottom: calc(var(--zen-element-separation) - var(--zen-split-column-gap)/2);
margin-top: calc(var(--zen-split-row-gap)/-2);
@@ -50,15 +58,14 @@ margin-left: calc(-var(--zen-split-row-gap)/2);
}
}
#zen-splitview-overlay {
#zen-splitview-overlay-wrapper {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
padding: inherit;
inset: 0;
}
#zen-splitview-splitterbox {
#zen-splitview-overlay {
position: relative;
flex: 1;
padding-right: var(--zen-element-separation);
@@ -76,12 +83,12 @@ margin-left: calc(-var(--zen-split-row-gap)/2);
.zen-split-view-splitter[orient='vertical'] {
width: var(--zen-split-row-gap);
margin-left: calc(var(--zen-split-row-gap) * -1);
margin-left: calc(var(--zen-split-row-gap) / -2);
}
.zen-split-view-splitter[orient='horizontal'] {
height: var(--zen-split-column-gap);
margin-top: calc(var(--zen-split-column-gap) * -1);
margin-top: calc(var(--zen-split-column-gap) / -2);
cursor: n-resize;
}