Add missing splitpane bar styles

intechstudio · Dec 13, 2024 · 28ba5b4 · 28ba5b4
1 parent 28c0293
commit 28ba5b4
Showing 1 changed file with 64 additions and 3 deletions.
diff --git a/src/WebComponent.svelte b/src/WebComponent.svelte
@@ -27,9 +27,7 @@
     });
 </script>
 
-<profile-cloud-web-component
-    class="dark bg-primary/100 text-white transition duration-200 h-full"
->
+<profile-cloud-web-component class="dark bg-primary/100 text-white transition duration-200 h-full">
     {#if isEditorVersionCompatible}
         <EditorLayout />
     {:else}
@@ -56,4 +54,67 @@
     ::-webkit-scrollbar-corner {
         @apply dark:rounded-md dark:bg-secondary;
     }
+
+    .splitpanes.modern-theme .splitpanes__pane {
+        /*  @apply bg-secondary; */
+        position: relative;
+        overflow: visible;
+    }
+
+    /*betty magic selector*/
+    .splitpanes.modern-theme .splitpanes__pane.leftPane {
+        overflow: hidden;
+    }
+
+    .splitpanes.modern-theme .splitpanes__splitter {
+        background-color: #4c4c4c;
+        position: relative;
+    }
+    .splitpanes.modern-theme .splitpanes__splitter:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        transition: opacity 0.3s;
+        background-color: #2db9d2;
+        width: 200;
+        opacity: 0;
+        z-index: 1;
+    }
+    .splitpanes.modern-theme .splitpanes__splitter:hover:before {
+        opacity: 1;
+    }
+    .splitpanes.modern-theme .splitpanes__splitter.splitpanes__splitter__active {
+        z-index: 2;
+        /* Fix an issue of overlap fighting with a near hovered splitter */
+    }
+    .modern-theme.splitpanes--vertical > .splitpanes__splitter:before {
+        left: -3px;
+        right: -3px;
+        height: 100%;
+        cursor: col-resize;
+    }
+    .modern-theme.splitpanes--horizontal > .splitpanes__splitter:before {
+        top: -3px;
+        bottom: -3px;
+        width: 100%;
+        cursor: row-resize;
+    }
+    .splitpanes.no-splitter .splitpanes__pane {
+        background-color: #0e100f;
+    }
+    .splitpanes.no-splitter .splitpanes__splitter {
+        background-color: #4c4c4c;
+        position: relative;
+    }
+    .no-splitter.splitpanes--horizontal > .splitpanes__splitter:before {
+        width: 0.05rem;
+        pointer-events: none;
+        cursor: none;
+    }
+    .no-splitter.splitpanes--vertical > .splitpanes__splitter:before {
+        height: 0.05rem;
+        pointer-events: none;
+        cursor: none;
+    }
 </style>