Implement drag-and-drop functionality for split view and refine CSS styles for better layout and visibility

This commit is contained in:
mr. M
2025-03-02 16:45:57 +01:00
parent e065ccb7b7
commit d415bde66c
6 changed files with 177 additions and 24 deletions

View File

@@ -1,8 +1,8 @@
diff --git a/browser/base/content/main-popupset.inc.xhtml b/browser/base/content/main-popupset.inc.xhtml
index e5f3424eaeeec0ba552537f167dd99e912216d94..4bdfcdb23fe9c44ad3d4de273c64f4cc31cb4034 100644
index 959c523b21c642f29353b9de37b3ce6b5505b01b..0d151ad345dde47467432196ed76f4320b4b92cc 100644
--- a/browser/base/content/main-popupset.inc.xhtml
+++ b/browser/base/content/main-popupset.inc.xhtml
@@ -181,6 +181,10 @@
@@ -206,6 +206,10 @@
hidden="true"
tabspecific="true"
aria-labelledby="editBookmarkPanelTitle">
@@ -13,7 +13,7 @@ index e5f3424eaeeec0ba552537f167dd99e912216d94..4bdfcdb23fe9c44ad3d4de273c64f4cc
<box class="panel-header">
<html:h1>
<html:span id="editBookmarkPanelTitle"/>
@@ -206,6 +210,7 @@
@@ -231,6 +235,7 @@
class="footer-button"/>
</html:moz-button-group>
</vbox>
@@ -21,7 +21,7 @@ index e5f3424eaeeec0ba552537f167dd99e912216d94..4bdfcdb23fe9c44ad3d4de273c64f4cc
</panel>
</html:template>
@@ -535,6 +540,8 @@
@@ -565,6 +570,8 @@
#include popup-notifications.inc.xhtml

View File

@@ -248,3 +248,34 @@
outline-color: var(--toolbarbutton-active-outline-color);
}
}
#zen-split-view-fake-browser {
position: absolute;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--zen-native-inner-radius);
box-shadow: var(--zen-big-shadow);
pointer-events: none;
overflow: hidden;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3.5rem;
height: 3.5rem;
background: var(--zen-split-view-fake-icon);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.8;
transition: opacity 0.2s;
transition-delay: 0.1s;
@starting-style {
opacity: 0;
}
}
}

View File

@@ -9,6 +9,7 @@
justify-content: center;
align-items: center;
display: flex;
font-size: x-small;
position: relative;