flexlayout-react 0.8.19 → 0.9.0

package/style/combined.css

@@ -14,14 +14,16 @@
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;
   --font-family: Roboto, Arial, sans-serif;
+  --font-weight: normal;
+  --splitter-size: 8px;
+  --splitter-active-size: 8px;
+  --splitter-handle-visibility: hidden;
   --color-overflow: gray;
   --color-icon: gray;
   --color-tabset-background: var(--color-background);
   --color-tabset-background-selected: var(--color-1);
   --color-tabset-background-maximized: var(--color-2);
   --color-tabset-divider-line: var(--color-4);
-  --color-tabset-header-background: var(--color-background);
-  --color-tabset-header: var(--color-text);
   --color-border-tab-content: var(--color-background);
   --color-border-background: var(--color-background);
   --color-border-divider-line: var(--color-4);
@@ -39,12 +41,13 @@
   --color-splitter: var(--color-1);
   --color-splitter-hover: var(--color-4);
   --color-splitter-drag: var(--color-4);
+  --color-splitter-handle: var(--color-3);
   --color-drag-rect-border: #ccc;
   --color-drag-rect-background: var(--color-5);
   --color-drag-rect: var(--color-text);
   --color-popup-border: var(--color-6);
   --color-popup-unselected: var(--color-text);
-  --color-popup-unselected-background: white;
+  --color-popup-unselected-background: var(--color-background);
   --color-popup-selected: var(--color-text);
   --color-popup-selected-background: var(--color-3);
   --color-edge-marker: #aaa;
@@ -53,6 +56,7 @@
   --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
   --size-mini-scroll-indicator: 3px;
   --color-toolbar-button-hover: var(--color-3);
+  --color-float-window-header-background: var(--color-tabset-background);
 }
 
 .flexlayout__theme_dark .flexlayout__layout {
@@ -71,14 +75,16 @@
   --color-drag2-background: rgba(128, 128, 128, 0.15);
   --font-size: medium;
   --font-family: Roboto, Arial, sans-serif;
+  --font-weight: normal;
+  --splitter-size: 8px;
+  --splitter-active-size: 8px;
+  --splitter-handle-visibility: hidden;
   --color-overflow: gray;
   --color-icon: gray;
   --color-tabset-background: var(--color-1);
   --color-tabset-background-selected: var(--color-1);
   --color-tabset-background-maximized: var(--color-6);
   --color-tabset-divider-line: var(--color-4);
-  --color-tabset-header-background: var(--color-1);
-  --color-tabset-header: var(--color-text);
   --color-border-tab-content: var(--color-background);
   --color-border-background: var(--color-1);
   --color-border-divider-line: var(--color-4);
@@ -96,6 +102,7 @@
   --color-splitter: var(--color-2);
   --color-splitter-hover: var(--color-4);
   --color-splitter-drag: var(--color-5);
+  --color-splitter-handle: var(--color-3);
   --color-drag-rect-border: var(--color-4);
   --color-drag-rect-background: var(--color-1);
   --color-drag-rect: var(--color-text);
@@ -110,6 +117,7 @@
   --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.8);
   --size-mini-scroll-indicator: 3px;
   --color-toolbar-button-hover: var(--color-4);
+  --color-float-window-header-background: var(--color-tabset-background);
 }
 
 .flexlayout__theme_gray .flexlayout__layout {
@@ -128,14 +136,16 @@
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;
   --font-family: Roboto, Arial, sans-serif;
+  --font-weight: normal;
+  --splitter-size: 8px;
+  --splitter-active-size: 8px;
+  --splitter-handle-visibility: hidden;
   --color-overflow: gray;
   --color-icon: gray;
   --color-tabset-background: var(--color-1);
   --color-tabset-background-selected: var(--color-1);
   --color-tabset-background-maximized: var(--color-6);
   --color-tabset-divider-line: var(--color-3);
-  --color-tabset-header-background: var(--color-1);
-  --color-tabset-header: var(--color-text);
   --color-border-tab-content: var(--color-background);
   --color-border-background: var(--color-1);
   --color-border-divider-line: var(--color-3);
@@ -153,12 +163,13 @@
   --color-splitter: var(--color-2);
   --color-splitter-hover: var(--color-4);
   --color-splitter-drag: var(--color-5);
+  --color-splitter-handle: var(--color-3);
   --color-drag-rect-border: var(--color-4);
   --color-drag-rect-background: var(--color-3);
   --color-drag-rect: var(--color-text);
   --color-popup-border: var(--color-6);
   --color-popup-unselected: var(--color-text);
-  --color-popup-unselected-background: white;
+  --color-popup-unselected-background: var(--color-background);
   --color-popup-selected: var(--color-text);
   --color-popup-selected-background: var(--color-3);
   --color-edge-marker: #aaa;
@@ -167,6 +178,7 @@
   --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
   --size-mini-scroll-indicator: 3px;
   --color-toolbar-button-hover: var(--color-4);
+  --color-float-window-header-background: var(--color-tabset-background);
 }
 
 .flexlayout__theme_underline .flexlayout__layout {
@@ -185,14 +197,16 @@
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;
   --font-family: Roboto, Arial, sans-serif;
+  --font-weight: normal;
+  --splitter-size: 8px;
+  --splitter-active-size: 8px;
+  --splitter-handle-visibility: hidden;
   --color-overflow: gray;
   --color-icon: gray;
   --color-tabset-background: var(--color-background);
   --color-tabset-background-selected: var(--color-1);
   --color-tabset-background-maximized: var(--color-6);
   --color-tabset-divider-line: var(--color-3);
-  --color-tabset-header-background: var(--color-background);
-  --color-tabset-header: var(--color-text);
   --color-border-tab-content: var(--color-background);
   --color-border-background: var(--color-background);
   --color-border-divider-line: var(--color-3);
@@ -210,12 +224,13 @@
   --color-splitter: var(--color-1);
   --color-splitter-hover: var(--color-4);
   --color-splitter-drag: var(--color-4);
+  --color-splitter-handle: var(--color-3);
   --color-drag-rect-border: var(--color-6);
   --color-drag-rect-background: var(--color-4);
   --color-drag-rect: var(--color-text);
   --color-popup-border: var(--color-6);
   --color-popup-unselected: var(--color-text);
-  --color-popup-unselected-background: white;
+  --color-popup-unselected-background: var(--color-background);
   --color-popup-selected: var(--color-text);
   --color-popup-selected-background: var(--color-3);
   --color-edge-marker: #aaa;
@@ -227,11 +242,12 @@
   --color-mini-scroll-indicator-hovered: rgba(128, 128, 128, 0.7);
   --size-mini-scroll-indicator: 4px;
   --color-toolbar-button-hover: var(--color-3);
+  --color-float-window-header-background: var(--color-tabset-background);
 }
 
 .flexlayout__theme_rounded .flexlayout__layout {
   --color-text: black;
-  --color-background: #f2f6fb;
+  --color-background: #e9eef6;
   --color-base: #f2f6fb;
   --color-1: rgb(230.3, 237.9, 247.4);
   --color-2: rgb(218.6, 229.8, 243.8);
@@ -240,19 +256,21 @@
   --color-5: rgb(183.5, 205.5, 233);
   --color-6: rgb(171.8, 197.4, 229.4);
   --color-drag1: rgb(95, 134, 196);
-  --color-drag2: rgb(95, 134, 196);
+  --color-drag2: var(--color-drag1);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
-  --color-drag2-background: rgba(95, 134, 196, 0.1);
+  --color-drag2-background: var(--color-drag1-background);
   --font-size: medium;
   --font-family: Roboto, Arial, sans-serif;
+  --font-weight: normal;
+  --splitter-size: 8px;
+  --splitter-active-size: 8px;
+  --splitter-handle-visibility: hidden;
   --color-overflow: #999db2;
   --color-icon: #999db2;
   --color-tabset-background: white;
   --color-tabset-background-selected: white;
   --color-tabset-background-maximized: white;
   --color-tabset-divider-line: white;
-  --color-tabset-header-background: var(--color-background);
-  --color-tabset-header: var(--color-text);
   --color-border-tab-content: white;
   --color-border-background: var(--color-background);
   --color-border-divider-line: var(--color-background);
@@ -270,12 +288,13 @@
   --color-splitter: var(--color-background);
   --color-splitter-hover: var(--color-2);
   --color-splitter-drag: var(--color-2);
+  --color-splitter-handle: var(--color-3);
   --color-drag-rect-border: #ccc;
   --color-drag-rect-background: var(--color-5);
   --color-drag-rect: var(--color-text);
   --color-popup-border: var(--color-6);
   --color-popup-unselected: var(--color-text);
-  --color-popup-unselected-background: #f2f6fb;
+  --color-popup-unselected-background: var(--color-background);
   --color-popup-selected: var(--color-text);
   --color-popup-selected-background: var(--color-3);
   --color-edge-marker: #a6bbdf;
@@ -284,6 +303,199 @@
   --color-mini-scroll-indicator-hovered: rgba(180, 200, 230, 0.7);
   --size-mini-scroll-indicator: 4px;
   --color-toolbar-button-hover: var(--color-2);
+  --tab-button-radius: 10px;
+  --border-button-radius: 10px;
+  --color-float-window-header-background: var(--color-tabset-background);
+}
+
+.flexlayout__theme_alpha_light .flexlayout__layout {
+  --color-text: black;
+  --color-background: #ffffff;
+  --color-base: #f9fafb;
+  --color-1: #ededee;
+  --color-2: #e5e7eb;
+  --color-3: #d1d5db;
+  --color-4: #9ca3af;
+  --color-5: #6b7280;
+  --color-6: #4b5563;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
+  --color-drag1-background: rgba(59, 130, 246, 0.1);
+  --color-drag2-background: rgba(16, 185, 129, 0.075);
+  --font-size: medium;
+  --font-family: system-ui, -apple-system, Arial, sans-serif;
+  --font-weight: 500;
+  --splitter-size: 8px;
+  --splitter-active-size: 8px;
+  --splitter-handle-visibility: hidden;
+  --color-overflow: var(--color-5);
+  --color-icon: var(--color-5);
+  --color-tabset-background: var(--color-1);
+  --color-tabset-background-selected: var(--color-1);
+  --color-tabset-background-maximized: var(--color-1);
+  --color-tabset-divider-line: var(--color-2);
+  --color-border-tab-content: var(--color-1);
+  --color-border-background: var(--color-1);
+  --color-border-divider-line: var(--color-2);
+  --color-tab-content: var(--color-background);
+  --color-tab-selected: #3b7de7;
+  --color-tab-selected-background: var(--color-background);
+  --color-tab-unselected: var(--color-5);
+  --color-tab-unselected-background: transparent;
+  --color-tab-textbox: var(--color-text);
+  --color-tab-textbox-background: var(--color-background);
+  --color-border-tab-selected: #3b7de7;
+  --color-border-tab-selected-background: var(--color-background);
+  --color-border-tab-unselected: var(--color-5);
+  --color-border-tab-unselected-background: var(--color-1);
+  --color-splitter: var(--color-1);
+  --color-splitter-hover: var(--color-4);
+  --color-splitter-drag: var(--color-4);
+  --color-splitter-handle: var(--color-3);
+  --color-drag-rect-border: var(--color-3);
+  --color-drag-rect-background: var(--color-background);
+  --color-drag-rect: var(--color-text);
+  --color-popup-border: var(--color-2);
+  --color-popup-unselected: var(--color-text);
+  --color-popup-unselected-background: var(--color-background);
+  --color-popup-selected: var(--color-drag1);
+  --color-popup-selected-background: var(--color-1);
+  --color-edge-marker: var(--color-3);
+  --color-edge-icon: var(--color-6);
+  --color-mini-scroll-indicator: rgba(0, 0, 0, 0.1);
+  --color-mini-scroll-indicator-hovered: rgba(0, 0, 0, 0.3);
+  --size-mini-scroll-indicator: 4px;
+  --color-toolbar-button-hover: var(--color-2);
+  --tab-button-radius: 10px;
+  --border-button-radius: 5px;
+  --color-float-window-header-background: var(--color-tabset-background);
+}
+
+.flexlayout__theme_alpha_dark .flexlayout__layout {
+  --color-text: white;
+  --color-background: black;
+  --color-base: #121212;
+  --color-1: #1c1c1c;
+  --color-2: #383838;
+  --color-3: #404040;
+  --color-4: #525252;
+  --color-5: #737373;
+  --color-6: #a3a3a3;
+  --color-drag1: #93c5fd;
+  --color-drag2: #6ee7b7;
+  --color-drag1-background: rgba(147, 197, 253, 0.15);
+  --color-drag2-background: rgba(110, 231, 183, 0.1);
+  --font-size: medium;
+  --font-family: system-ui, -apple-system, Arial, sans-serif;
+  --font-weight: 500;
+  --splitter-size: 8px;
+  --splitter-active-size: 8px;
+  --splitter-handle-visibility: hidden;
+  --color-overflow: gray;
+  --color-icon: gray;
+  --color-tabset-background: var(--color-1);
+  --color-tabset-background-selected: var(--color-1);
+  --color-tabset-background-maximized: var(--color-1);
+  --color-tabset-divider-line: var(--color-2);
+  --color-border-tab-content: var(--color-1);
+  --color-border-background: var(--color-1);
+  --color-border-divider-line: var(--color-2);
+  --color-tab-content: var(--color-background);
+  --color-tab-selected: #e5e7eb;
+  --color-tab-selected-background: var(--color-background);
+  --color-tab-unselected: var(--color-5);
+  --color-tab-unselected-background: transparent;
+  --color-tab-textbox: var(--color-text);
+  --color-tab-textbox-background: var(--color-background);
+  --color-border-tab-selected: #e5e7eb;
+  --color-border-tab-selected-background: var(--color-background);
+  --color-border-tab-unselected: var(--color-5);
+  --color-border-tab-unselected-background: var(--color-1);
+  --color-splitter: var(--color-1);
+  --color-splitter-hover: var(--color-3);
+  --color-splitter-drag: var(--color-4);
+  --color-splitter-handle: var(--color-3);
+  --color-drag-rect-border: var(--color-3);
+  --color-drag-rect-background: var(--color-background);
+  --color-drag-rect: var(--color-text);
+  --color-popup-border: var(--color-2);
+  --color-popup-unselected: var(--color-text);
+  --color-popup-unselected-background: var(--color-background);
+  --color-popup-selected: #f9fafb;
+  --color-popup-selected-background: var(--color-1);
+  --color-edge-marker: var(--color-3);
+  --color-edge-icon: gray;
+  --color-mini-scroll-indicator: rgba(255, 255, 255, 0.1);
+  --color-mini-scroll-indicator-hovered: rgba(255, 255, 255, 0.3);
+  --size-mini-scroll-indicator: 4px;
+  --color-toolbar-button-hover: var(--color-2);
+  --tab-button-radius: 10px;
+  --border-button-radius: 5px;
+  --color-float-window-header-background: var(--color-tabset-background);
+}
+
+.flexlayout__theme_alpha_rounded .flexlayout__layout {
+  --color-text: black;
+  --color-background: #e9eef6;
+  --color-base: #ffffff;
+  --color-1: #f1f5f9;
+  --color-2: #e2e8f0;
+  --color-3: #cbd5e1;
+  --color-4: #94a3b8;
+  --color-5: #64748b;
+  --color-6: #475569;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
+  --color-drag1-background: rgba(59, 130, 246, 0.1);
+  --color-drag2-background: rgba(16, 185, 129, 0.075);
+  --font-size: medium;
+  --font-family: system-ui, -apple-system, Arial, sans-serif;
+  --font-weight: 500;
+  --splitter-size: 8px;
+  --splitter-active-size: 8px;
+  --splitter-handle-visibility: hidden;
+  --color-overflow: var(--color-4);
+  --color-icon: var(--color-4);
+  --color-tabset-background: white;
+  --color-tabset-background-selected: white;
+  --color-tabset-background-maximized: white;
+  --color-tabset-divider-line: white;
+  --color-border-tab-content: white;
+  --color-border-background: var(--color-background);
+  --color-border-divider-line: var(--color-background);
+  --color-tab-content: white;
+  --color-tab-selected: #3b7de7;
+  --color-tab-selected-background: var(--color-2);
+  --color-tab-unselected: var(--color-4);
+  --color-tab-unselected-background: var(--color-1);
+  --color-tab-textbox: var(--color-text);
+  --color-tab-textbox-background: var(--color-3);
+  --color-border-tab-selected: #3b7de7;
+  --color-border-tab-selected-background: var(--color-2);
+  --color-border-tab-unselected: var(--color-4);
+  --color-border-tab-unselected-background: var(--color-1);
+  --color-splitter: var(--color-background);
+  --color-splitter-hover: var(--color-3);
+  --color-splitter-drag: var(--color-3);
+  --color-splitter-handle: var(--color-3);
+  --color-drag-rect-border: var(--color-3);
+  --color-drag-rect-background: var(--color-base);
+  --color-drag-rect: var(--color-text);
+  --color-popup-border: var(--color-2);
+  --color-popup-unselected: var(--color-text);
+  --color-popup-unselected-background: var(--color-base);
+  --color-popup-selected: var(--color-drag1);
+  --color-popup-selected-background: var(--color-1);
+  --color-edge-marker: var(--color-3);
+  --color-edge-icon: var(--color-6);
+  --color-mini-scroll-indicator: rgba(0, 0, 0, 0.1);
+  --color-mini-scroll-indicator-hovered: rgba(0, 0, 0, 0.2);
+  --size-mini-scroll-indicator: 4px;
+  --color-toolbar-button-hover: var(--color-1);
+  --color-float-window-header-background: var(--color-tabset-background);
+  --tab-button-radius: 16px;
+  --border-button-radius: 16px;
+  --color-float-window-header-background: var(--color-tabset-background);
 }
 
 /*
@@ -313,7 +525,7 @@
   z-index: 100;
   display: flex;
   flex-direction: column;
-  align-items: start;
+  align-items: flex-start;
 }
 .flexlayout__layout_moveables {
   visibility: hidden;
@@ -351,6 +563,37 @@
   background-color: var(--color-splitter);
   touch-action: none;
   z-index: 10;
+  position: relative;
+}
+.flexlayout__splitter_horz {
+  width: var(--splitter-size);
+  min-width: var(--splitter-size);
+}
+.flexlayout__splitter_horz::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /* Center the hit area over the thin line */
+  left: 50%;
+  width: var(--splitter-active-size);
+  transform: translateX(-50%);
+  z-index: 1;
+}
+.flexlayout__splitter_vert {
+  height: var(--splitter-size);
+  min-height: var(--splitter-size);
+}
+.flexlayout__splitter_vert::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  /* Center the hit area over the thin line */
+  top: 50%;
+  height: var(--splitter-active-size);
+  transform: translateY(-50%);
+  z-index: 1;
 }
 @media (hover: hover) {
   .flexlayout__splitter:hover {
@@ -370,8 +613,9 @@
   background-color: var(--color-splitter-drag);
 }
 .flexlayout__splitter_handle {
-  background-color: #ccc;
+  background-color: var(--color-splitter-handle);
   border-radius: 3px;
+  visibility: var(--splitter-handle-visibility);
 }
 .flexlayout__splitter_handle_horz {
   width: 3px;
@@ -469,25 +713,15 @@
 .flexlayout__tabset_leading {
   display: flex;
 }
-.flexlayout__tabset_header {
-  display: flex;
-  align-items: center;
-  padding: 3px 3px 3px 5px;
-  box-sizing: border-box;
-  border-bottom: 1px solid var(--color-tabset-divider-line);
-  color: var(--color-tabset-header);
-  background-color: var(--color-tabset-header-background);
-  font-size: var(--font-size);
-}
-.flexlayout__tabset_header_content {
-  flex-grow: 1;
-}
 .flexlayout__tabset_tabbar_outer {
   box-sizing: border-box;
   background-color: var(--color-tabset-background);
   overflow: hidden;
   display: flex;
+  align-items: center;
+  min-height: 1.5em;
   font-size: var(--font-size);
+  font-weight: var(--font-weight);
 }
 .flexlayout__tabset_tabbar_outer_top {
   padding: 0px 2px 0px 2px;
@@ -514,6 +748,7 @@
   padding-right: 4px;
   box-sizing: border-box;
   white-space: nowrap;
+  align-items: center;
 }
 .flexlayout__tabset_tabbar_inner_tab_container_top {
   border-top: 2px solid transparent;
@@ -558,12 +793,23 @@
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.2392156863);
 }
+.flexlayout__tab_layout_container {
+  position: relative;
+  height: 100%;
+  box-sizing: border-box;
+}
+.flexlayout__tab_layout_container_user {
+  position: relative;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
 .flexlayout__tab_button {
   display: flex;
   gap: 0.3em;
   align-items: center;
   box-sizing: border-box;
   padding: 3px 0.5em;
+  font-weight: var(--font-weight);
   cursor: pointer;
 }
 .flexlayout__tab_button_stretch {
@@ -607,6 +853,7 @@
   border: none;
   font-family: var(--font-family);
   font-size: var(--font-size);
+  font-weight: var(--font-weight);
   color: var(--color-tab-textbox);
   background-color: var(--color-tab-textbox-background);
   border: 1px inset var(--color-1);
@@ -681,8 +928,9 @@
   box-sizing: border-box;
   overflow: hidden;
   display: flex;
-  font-size: var(--font-size);
   font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
   color: var(--color-border);
   background-color: var(--color-border-background);
 }
@@ -726,6 +974,7 @@
 .flexlayout__border_inner_tab_container {
   white-space: nowrap;
   display: flex;
+  align-items: center;
   padding-left: 2px;
   padding-right: 2px;
   box-sizing: border-box;
@@ -752,6 +1001,7 @@
   margin: 2px 0px;
   box-sizing: border-box;
   white-space: nowrap;
+  font-weight: var(--font-weight);
 }
 .flexlayout__border_button--selected {
   background-color: var(--color-border-tab-selected-background);
@@ -824,6 +1074,7 @@
 .flexlayout__popup_menu {
   font-size: var(--font-size);
   font-family: var(--font-family);
+  font-weight: var(--font-weight);
 }
 .flexlayout__popup_menu_item {
   padding: 2px 0.5em;
@@ -848,12 +1099,43 @@
   background: var(--color-popup-unselected-background);
   border-radius: 3px;
   position: absolute;
-  z-index: 1000;
+  z-index: 3000;
   max-height: 50%;
   min-width: 100px;
   overflow: auto;
   padding: 2px;
 }
+.flexlayout__float_window {
+  box-sizing: border-box;
+  background-color: var(--color-tabset-background);
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 2000;
+}
+.flexlayout__float_window_header {
+  display: flex;
+  align-items: center;
+  padding: 2px 8px;
+  background-color: var(--color-float-window-header-background);
+  border-bottom: 1px solid var(--color-tabset-divider-line);
+  cursor: move;
+  user-select: none;
+  font-family: var(--font-family);
+  font-size: 0.8em;
+  min-height: 15px;
+}
+.flexlayout__float_window_content {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  margin: 5px;
+}
 .flexlayout__floating_window _body {
   height: 100%;
 }
@@ -884,6 +1166,7 @@
   padding-bottom: 5px;
   font-size: var(--font-size);
   font-family: var(--font-family);
+  font-weight: var(--font-weight);
 }
 .flexlayout__mini_scrollbar {
   position: absolute;
@@ -924,9 +1207,6 @@
       dark theme overrides 
   */
 }
-.flexlayout__theme_dark .flexlayout__tabset_header {
-  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
-}
 .flexlayout__theme_dark .flexlayout__tabset-selected {
   background-image: linear-gradient(var(--color-background), var(--color-4));
 }
@@ -956,9 +1236,6 @@
 .flexlayout__theme_gray .flexlayout__tabset-selected {
   background-image: linear-gradient(var(--color-background), var(--color-4));
 }
-.flexlayout__theme_gray .flexlayout__tabset_header {
-  box-shadow: inset 0 0 3px 0 rgba(136, 136, 136, 0.54);
-}
 .flexlayout__theme_gray .flexlayout__tabset-selected {
   background-image: linear-gradient(var(--color-background), var(--color-3));
 }
@@ -1005,8 +1282,9 @@
 }
 .flexlayout__theme_underline .flexlayout__tabset_tab_divider, .flexlayout__theme_underline .flexlayout__border_tab_divider {
   width: 1px;
-  margin: 4px 6px 4px 6px;
-  border-left: 1px solid #ddd;
+  height: 0.8em;
+  margin: 0px 6px 0px 6px;
+  background-color: #ddd;
 }
 .flexlayout__theme_underline .flexlayout__tab_button_textbox {
   border: none;
@@ -1033,8 +1311,12 @@
 .flexlayout__theme_rounded .flexlayout__border_tab_contents {
   border-radius: 10px;
 }
-.flexlayout__theme_rounded .flexlayout__tab_button, .flexlayout__theme_rounded .flexlayout__border_button {
-  border-radius: 10px;
+.flexlayout__theme_rounded .flexlayout__tab_button {
+  border-radius: var(--tab-button-radius);
+  padding: 2px 0.8em;
+}
+.flexlayout__theme_rounded .flexlayout__border_button {
+  border-radius: var(--border-button-radius);
   padding: 2px 0.8em;
 }
 .flexlayout__theme_rounded .flexlayout__tabset_tabbar_outer_top {
@@ -1057,4 +1339,246 @@
   background-color: var(--color-3);
 }
 
+.flexlayout__theme_alpha_light .flexlayout__tab {
+  border: 5px solid var(--color-background);
+  border-radius: 5px;
+}
+.flexlayout__theme_alpha_light .flexlayout__splitter_border .flexlayout__splitter_handle {
+  visibility: visible;
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_top {
+  border-bottom: unset;
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_bottom {
+  border-top: unset;
+}
+.flexlayout__theme_alpha_light .flexlayout__tab_button {
+  border-bottom: 2px solid transparent;
+  padding: 4px 12px;
+}
+.flexlayout__theme_alpha_light .flexlayout__tab_button--selected:hover {
+  background-color: var(--color-background);
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_top .flexlayout__tab_button--selected {
+  border-top-left-radius: var(--tab-button-radius);
+  border-top-right-radius: var(--tab-button-radius);
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tab_button--selected {
+  border-bottom-left-radius: var(--tab-button-radius);
+  border-bottom-right-radius: var(--tab-button-radius);
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tab_spacer {
+  width: 12px;
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tab_divider, .flexlayout__theme_alpha_light .flexlayout__border_tab_divider {
+  width: 2px;
+  border-radius: 2px;
+  height: 0.8em;
+  margin: 0px 5px 0px 5px;
+  background-color: #ddd;
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tab_divider_selected_before, .flexlayout__theme_alpha_light .flexlayout__tabset_tab_divider_selected_after {
+  width: 12px;
+  height: 100%;
+  margin: unset;
+  border-radius: unset;
+  background-color: var(--color-tab-selected-background);
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tab_divider_inner {
+  height: 100%;
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset-selected {
+  --tab-divider-bg: var(--color-tabset-background-selected);
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset-maximized {
+  --tab-divider-bg: var(--color-tabset-background-maximized);
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_top .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
+  border-bottom-right-radius: var(--tab-button-radius);
+  background-color: var(--tab-divider-bg, var(--color-tabset-background));
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_top .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
+  border-bottom-left-radius: var(--tab-button-radius);
+  background-color: var(--tab-divider-bg, var(--color-tabset-background));
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
+  border-top-right-radius: var(--tab-button-radius);
+  background-color: var(--tab-divider-bg, var(--color-tabset-background));
+}
+.flexlayout__theme_alpha_light .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
+  border-top-left-radius: var(--tab-button-radius);
+  background-color: var(--tab-divider-bg, var(--color-tabset-background));
+}
+.flexlayout__theme_alpha_light .flexlayout__border_button {
+  border-radius: var(--border-button-radius);
+  margin: 3px;
+  padding: 3px 8px;
+}
+.flexlayout__theme_alpha_light .flexlayout__border_button--selected {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.flexlayout__theme_alpha_light .flexlayout__border_sizer {
+  padding-bottom: 8px;
+}
+.flexlayout__theme_alpha_light .flexlayout__popup_menu_container {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--color-2);
+  padding: 4px;
+}
+.flexlayout__theme_alpha_light .flexlayout__popup_menu_item {
+  border-radius: 4px;
+  padding: 6px 8px;
+}
+.flexlayout__theme_alpha_light .flexlayout__popup_menu_item:hover {
+  background-color: var(--color-1);
+}
+
+.flexlayout__theme_alpha_dark .flexlayout__tab {
+  border: 5px solid var(--color-background);
+  border-radius: 5px;
+}
+.flexlayout__theme_alpha_dark .flexlayout__splitter_border .flexlayout__splitter_handle {
+  visibility: visible;
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_top {
+  border-bottom: unset;
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_bottom {
+  border-top: unset;
+}
+.flexlayout__theme_alpha_dark .flexlayout__tab_button {
+  border-bottom: 2px solid transparent;
+  padding: 4px 12px;
+}
+.flexlayout__theme_alpha_dark .flexlayout__tab_button--selected:hover {
+  background-color: var(--color-background);
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_top .flexlayout__tab_button--selected {
+  border-top-left-radius: var(--tab-button-radius);
+  border-top-right-radius: var(--tab-button-radius);
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tab_button--selected {
+  border-bottom-left-radius: var(--tab-button-radius);
+  border-bottom-right-radius: var(--tab-button-radius);
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tab_spacer {
+  width: 12px;
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tab_divider, .flexlayout__theme_alpha_dark .flexlayout__border_tab_divider {
+  width: 2px;
+  border-radius: 2px;
+  height: 0.8em;
+  margin: 0px 5px 0px 5px;
+  background-color: #333;
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tab_divider_selected_before, .flexlayout__theme_alpha_dark .flexlayout__tabset_tab_divider_selected_after {
+  width: 12px;
+  height: 100%;
+  margin: unset;
+  border-radius: unset;
+  background-color: var(--color-tab-selected-background);
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tab_divider_inner {
+  height: 100%;
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset-selected {
+  --tab-divider-bg: var(--color-tabset-background-selected);
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset-maximized {
+  --tab-divider-bg: var(--color-tabset-background-maximized);
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_top .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
+  border-bottom-right-radius: var(--tab-button-radius);
+  background-color: var(--tab-divider-bg, var(--color-tabset-background));
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_top .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
+  border-bottom-left-radius: var(--tab-button-radius);
+  background-color: var(--tab-divider-bg, var(--color-tabset-background));
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tabset_tab_divider_selected_before .flexlayout__tabset_tab_divider_inner {
+  border-top-right-radius: var(--tab-button-radius);
+  background-color: var(--tab-divider-bg, var(--color-tabset-background));
+}
+.flexlayout__theme_alpha_dark .flexlayout__tabset_tabbar_outer_bottom .flexlayout__tabset_tab_divider_selected_after .flexlayout__tabset_tab_divider_inner {
+  border-top-left-radius: var(--tab-button-radius);
+  background-color: var(--tab-divider-bg, var(--color-tabset-background));
+}
+.flexlayout__theme_alpha_dark .flexlayout__splitter {
+  transition: background-color 0.2s;
+}
+.flexlayout__theme_alpha_dark .flexlayout__splitter:hover {
+  border-radius: 0;
+}
+.flexlayout__theme_alpha_dark .flexlayout__border_button {
+  border-radius: var(--border-button-radius);
+  margin: 3px;
+  padding: 3px 8px;
+}
+.flexlayout__theme_alpha_dark .flexlayout__border_button--selected {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+.flexlayout__theme_alpha_dark .flexlayout__border_sizer {
+  padding-bottom: 8px;
+}
+.flexlayout__theme_alpha_dark .flexlayout__popup_menu_container {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--color-2);
+  padding: 4px;
+}
+.flexlayout__theme_alpha_dark .flexlayout__popup_menu_item {
+  border-radius: 4px;
+  padding: 6px 8px;
+}
+.flexlayout__theme_alpha_dark .flexlayout__popup_menu_item:hover {
+  background-color: var(--color-1);
+}
+
+.flexlayout__theme_alpha_rounded .flexlayout__tabset {
+  padding: 2px;
+  border-radius: 12px;
+}
+.flexlayout__theme_alpha_rounded .flexlayout__splitter_border .flexlayout__splitter_handle {
+  visibility: visible;
+}
+.flexlayout__theme_alpha_rounded .flexlayout__float_window {
+  background-color: var(--color-2);
+}
+.flexlayout__theme_alpha_rounded .flexlayout__float_window_header {
+  background-color: var(--color-2);
+  border-bottom: none;
+}
+.flexlayout__theme_alpha_rounded .flexlayout__tab_border {
+  border-radius: 12px;
+  background-color: var(--color-background);
+}
+.flexlayout__theme_alpha_rounded .flexlayout__border_tab_contents {
+  border-radius: var(--tab-button-radius);
+}
+.flexlayout__theme_alpha_rounded .flexlayout__tab_button {
+  border-radius: var(--tab-button-radius);
+  padding: 4px 12px;
+  margin: 2px;
+}
+.flexlayout__theme_alpha_rounded .flexlayout__border_button {
+  border-radius: var(--border-button-radius);
+  padding: 4px 12px;
+  margin: 2px;
+}
+.flexlayout__theme_alpha_rounded .flexlayout__border_sizer {
+  padding-bottom: 10px;
+}
+.flexlayout__theme_alpha_rounded .flexlayout__popup_menu_container {
+  border-radius: 8px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--color-2);
+  padding: 6px;
+}
+.flexlayout__theme_alpha_rounded .flexlayout__popup_menu_item {
+  border-radius: 6px;
+  padding: 8px 12px;
+}
+.flexlayout__theme_alpha_rounded .flexlayout__popup_menu_item:hover {
+  background-color: var(--color-1);
+}
+
 /*# sourceMappingURL=combined.css.map */