flexlayout-react 0.6.10 → 0.7.2

package/src/view/Layout.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 import { DockLocation } from "../DockLocation";
 import { DragDrop } from "../DragDrop";
 import { DropInfo } from "../DropInfo";
@@ -40,14 +40,16 @@ export type ShowOverflowMenuCallback = (
     onSelect: (item: { index: number; node: TabNode }) => void,
 ) => void;
 export type TabSetPlaceHolderCallback = (node: TabSetNode) => React.ReactNode;
+export type IconFactory = (node: TabNode) => React.ReactNode;
+export type TitleFactory = (node: TabNode) => ITitleObject | React.ReactNode;
 
 export interface ILayoutProps {
     model: Model;
     factory: (node: TabNode) => React.ReactNode;
     font?: IFontValues;
     fontFamily?: string;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => ITitleObject | React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
     icons?: IIcons;
     onAction?: (action: Action) => Action | undefined;
     onRenderTab?: (
@@ -120,7 +122,8 @@ export interface ILayoutState {
     calculatedBorderBarSize: number;
     editingTab?: TabNode;
     showHiddenBorder: DockLocation;
-    portal?: React.ReactNode;
+    portal?: React.ReactPortal;
+    showEdges?: boolean;
 }
 
 export interface IIcons {
@@ -190,7 +193,7 @@ export interface ILayoutCallbacks {
     showPortal: (portal: React.ReactNode, portalDiv: HTMLDivElement) => void;
     hidePortal: () => void;
     getShowOverflowMenu(): ShowOverflowMenuCallback | undefined;
-    getTabSetPlaceHolderCallback() : TabSetPlaceHolderCallback | undefined;
+    getTabSetPlaceHolderCallback(): TabSetPlaceHolderCallback | undefined;
 }
 
 // Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do
@@ -247,22 +250,11 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
     private customDrop: ICustomDropDestination | undefined;
     /** @internal */
     private outlineDiv?: HTMLDivElement;
-
     /** @internal */
     private edgeRectLength = 100;
     /** @internal */
     private edgeRectWidth = 10;
     /** @internal */
-    private edgesShown = false;
-    /** @internal */
-    private edgeRightDiv?: HTMLDivElement;
-    /** @internal */
-    private edgeBottomDiv?: HTMLDivElement;
-    /** @internal */
-    private edgeLeftDiv?: HTMLDivElement;
-    /** @internal */
-    private edgeTopDiv?: HTMLDivElement;
-    /** @internal */
     private fnNewNodeDropped?: (node?: Node, event?: Event) => void;
     /** @internal */
     private currentDocument?: HTMLDocument;
@@ -299,6 +291,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
             calculatedBorderBarSize: 30,
             editingTab: undefined,
             showHiddenBorder: DockLocation.CENTER,
+            showEdges: false,
         };
 
         this.onDragEnter = this.onDragEnter.bind(this);
@@ -494,10 +487,6 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);
         this.renderChildren("", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);
 
-        if (this.edgesShown) {
-            this.repositionEdges(this.state.rect)
-        }
-
         const nextTopIds: string[] = [];
         const nextTopIdsMap: Record<string, string> = {};
 
@@ -517,6 +506,20 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
             }
         }
 
+        const edges: React.ReactNode[] = [];
+        if (this.state.showEdges) {
+            const r = this.centerRect;
+            const length = this.edgeRectLength;
+            const width = this.edgeRectWidth;
+            const offset = this.edgeRectLength / 2;
+            const className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT);
+            const radius = 50;
+            edges.push(<div key="North" style={{ top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }} className={className}></div>)
+            edges.push(<div key="West" style={{ top: r.y + r.height / 2 - offset, left: r.x, width: width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }} className={className}></div>)
+            edges.push(<div key="South" style={{ top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }} className={className}></div>)
+            edges.push(<div key="East" style={{ top: r.y + r.height / 2 - offset, right: r.x, width: width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }} className={className}></div>)
+        }
+
         // this.layoutTime = (Date.now() - this.start);
 
         return (
@@ -527,6 +530,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 })}
                 {borderComponents}
                 {splitterComponents}
+                {edges}
                 {floatingWindows}
                 {this.metricsElements()}
                 {this.state.portal}
@@ -724,6 +728,15 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.dragStart(undefined, dragText, TabNode._fromJson(json, this.props.model, false), true, undefined, undefined);
     }
 
+    /**
+     * Move a tab/tabset using drag and drop
+     * @param node the tab or tabset to drag
+     * @param dragText the text to show on the drag panel
+     */
+    moveTabWithDragAndDrop(node: (TabNode | TabSetNode), dragText?: string) {
+        this.dragStart(undefined, dragText, node, true, undefined, undefined);
+    }
+
     /**
      * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you
      * mouse down on the panel
@@ -742,7 +755,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.dragDiv = this.currentDocument!.createElement("div");
         this.dragDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT);
         this.dragDiv.addEventListener("mousedown", this.onDragDivMouseDown);
-        this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown);
+        this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown, { passive: false });
 
         this.dragRectRender(this.dragDivText, undefined, this.newTabJson, () => {
             if (this.dragDiv) {
@@ -798,7 +811,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
             this.dragDiv = undefined;
             this.hidePortal();
-            this.hideEdges(rootdiv);
+            this.setState({ showEdges: false });
             if (this.fnNewNodeDropped != null) {
                 this.fnNewNodeDropped();
                 this.fnNewNodeDropped = undefined;
@@ -883,7 +896,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
     /** @internal */
     showPortal = (control: React.ReactNode, element: HTMLElement) => {
-        const portal = ReactDOM.createPortal(control, element);
+        const portal = createPortal(control, element) as React.ReactPortal;
         this.setState({ portal });
     };
 
@@ -912,7 +925,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         }
         // add edge indicators
         if (this.props.model.getMaximizedTabset() === undefined) {
-            this.showEdges(rootdiv);
+            this.setState({ showEdges: true });
         }
 
         if (this.dragNode !== undefined && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== undefined) {
@@ -974,7 +987,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.dragDiv = undefined;
         this.hidePortal();
 
-        this.hideEdges(rootdiv);
+        this.setState({ showEdges: false });
         DragDrop.instance.hideGlass();
 
         if (this.dropInfo) {
@@ -1116,85 +1129,6 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         }
     }
 
-    /** @internal */
-    showEdges(rootdiv: HTMLElement) {
-        if (this.props.model.isEnableEdgeDock()) {
-            const length = this.edgeRectLength + "px";
-            const radius = "50px";
-            const width = this.edgeRectWidth + "px";
-
-            this.edgeTopDiv = this.currentDocument!.createElement("div");
-            this.edgeTopDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT);
-            this.edgeTopDiv.style.width = length;
-            this.edgeTopDiv.style.height = width;
-            this.edgeTopDiv.style.borderBottomLeftRadius = radius;
-            this.edgeTopDiv.style.borderBottomRightRadius = radius;
-
-            this.edgeLeftDiv = this.currentDocument!.createElement("div");
-            this.edgeLeftDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT);
-            this.edgeLeftDiv.style.width = width;
-            this.edgeLeftDiv.style.height = length;
-            this.edgeLeftDiv.style.borderTopRightRadius = radius;
-            this.edgeLeftDiv.style.borderBottomRightRadius = radius;
-
-            this.edgeBottomDiv = this.currentDocument!.createElement("div");
-            this.edgeBottomDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT);
-            this.edgeBottomDiv.style.width = length;
-            this.edgeBottomDiv.style.height = width;
-            this.edgeBottomDiv.style.borderTopLeftRadius = radius;
-            this.edgeBottomDiv.style.borderTopRightRadius = radius;
-
-            this.edgeRightDiv = this.currentDocument!.createElement("div");
-            this.edgeRightDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__EDGE_RECT);
-            this.edgeRightDiv.style.width = width;
-            this.edgeRightDiv.style.height = length;
-            this.edgeRightDiv.style.borderTopLeftRadius = radius;
-            this.edgeRightDiv.style.borderBottomLeftRadius = radius;
-
-            this.repositionEdges(this.state.rect);
-
-            rootdiv.appendChild(this.edgeTopDiv);
-            rootdiv.appendChild(this.edgeLeftDiv);
-            rootdiv.appendChild(this.edgeBottomDiv);
-            rootdiv.appendChild(this.edgeRightDiv);
-
-            this.edgesShown = true;
-        }
-    }
-
-    /** @internal */
-    repositionEdges(domRect: Rect) {
-        if (this.props.model.isEnableEdgeDock()) {
-            const r = this.centerRect!;
-
-            this.edgeTopDiv!.style.top = r.y + "px";
-            this.edgeTopDiv!.style.left = r.x + (r.width - this.edgeRectLength) / 2 + "px";
-
-            this.edgeLeftDiv!.style.top = r.y + (r.height - this.edgeRectLength) / 2 + "px";
-            this.edgeLeftDiv!.style.left = r.x + "px";
-
-            this.edgeBottomDiv!.style.bottom = domRect.height - r.getBottom() + "px";
-            this.edgeBottomDiv!.style.left = r.x + (r.width - this.edgeRectLength) / 2 + "px";
-
-            this.edgeRightDiv!.style.top = r.y + (r.height - this.edgeRectLength) / 2 + "px";
-            this.edgeRightDiv!.style.right = domRect.width - r.getRight() + "px";
-        }
-    }
-
-    /** @internal */
-    hideEdges(rootdiv: HTMLElement) {
-        if (this.props.model.isEnableEdgeDock()) {
-            try {
-                rootdiv.removeChild(this.edgeTopDiv!);
-                rootdiv.removeChild(this.edgeLeftDiv!);
-                rootdiv.removeChild(this.edgeBottomDiv!);
-                rootdiv.removeChild(this.edgeRightDiv!);
-            } catch (e) { }
-        }
-
-        this.edgesShown = false;
-    }
-
     /** @internal */
     maximize(tabsetNode: TabSetNode) {
         this.doAction(Actions.maximizeToggle(tabsetNode.getId()));

package/src/view/TabButton.tsx

@@ -4,7 +4,7 @@ import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
 import { Rect } from "../Rect";
-import { IIcons, ILayoutCallbacks } from "./Layout";
+import { IconFactory, IIcons, ILayoutCallbacks, TitleFactory } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
 import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
@@ -14,8 +14,8 @@ export interface ITabButtonProps {
     layout: ILayoutCallbacks;
     node: TabNode;
     selected: boolean;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
     icons: IIcons;
     path: string;
 }

package/src/view/TabButtonStamp.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { TabNode } from "../model/TabNode";
-import { ILayoutCallbacks } from "./Layout";
+import { IconFactory, ILayoutCallbacks, TitleFactory } from "./Layout";
 import { CLASSES } from "../Types";
 import { getRenderStateEx } from "./Utils";
 
@@ -8,8 +8,8 @@ import { getRenderStateEx } from "./Utils";
 export interface ITabButtonStampProps {
     node: TabNode;
     layout: ILayoutCallbacks;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
 }
 
 /** @internal */

package/src/view/TabSet.tsx

@@ -4,7 +4,7 @@ import { Actions } from "../model/Actions";
 import { TabNode } from "../model/TabNode";
 import { TabSetNode } from "../model/TabSetNode";
 import { showPopup } from "../PopupMenu";
-import { IIcons, ILayoutCallbacks } from "./Layout";
+import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
 import { TabButton } from "./TabButton";
 import { useTabOverflow } from "./TabOverflowHook";
 import { Orientation } from "../Orientation";
@@ -15,8 +15,8 @@ import { hideElement, isAuxMouseEvent } from "./Utils";
 export interface ITabSetProps {
     layout: ILayoutCallbacks;
     node: TabSetNode;
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined;
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined;
+    iconFactory?: (node: TabNode) => (React.ReactNode | undefined);
+    titleFactory?: (node: TabNode) => (ITitleObject | React.ReactNode | undefined);
     icons: IIcons;
     editingTab?: TabNode;
     path?: string;
@@ -146,9 +146,11 @@ export const TabSet = (props: ITabSetProps) => {
                     titleFactory={titleFactory}
                     icons={icons}
                 />);
-                tabs.push(
-                    <div  key={"divider" + i} className={cm(CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER)}></div>
-                );
+                if (i < node.getChildren().length-1) {
+                    tabs.push(
+                        <div  key={"divider" + i} className={cm(CLASSES.FLEXLAYOUT__TABSET_TAB_DIVIDER)}></div>
+                    );
+                }
         }
     }
 

package/src/view/Utils.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { TabNode } from "../model/TabNode";
-import { ILayoutCallbacks, ITitleObject } from "./Layout";
+import { IconFactory, ILayoutCallbacks, ITitleObject, TitleFactory } from "./Layout";
 
 /** @internal */
 export function getRenderStateEx(
     layout: ILayoutCallbacks,
     node: TabNode,
-    iconFactory?: (node: TabNode) => React.ReactNode | undefined,
-    titleFactory?: (node: TabNode) => React.ReactNode | undefined
+    iconFactory?: IconFactory,
+    titleFactory?: TitleFactory
 ) {
     let leadingContent = iconFactory ? iconFactory(node) : undefined;
     let titleContent: React.ReactNode = node.getName();

package/style/_base.scss

@@ -327,7 +327,7 @@
             &_sticky_buttons_container {
                 display: flex;
                 gap: 0.3em;
-                padding-left: 2px;
+                padding-left: 5px;
                 align-items: center;
             }
         }

package/style/dark.css

@@ -8,13 +8,14 @@
   --color-4: #333333;
   --color-5: #404040;
   --color-6: #4d4d4d;
-  --color-drag1: #cfe8ff;
-  --color-drag2: #b7d1b5;
+  --color-drag1: rgb(207, 232, 255);
+  --color-drag2: rgb(183, 209, 181);
   --color-drag1-background: rgba(128, 128, 128, 0.15);
   --color-drag2-background: rgba(128, 128, 128, 0.15);
   --font-size: medium;
   --font-family: Roboto, Arial, sans-serif;
   --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);
@@ -307,7 +308,7 @@
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   gap: 0.3em;
-  padding-left: 2px;
+  padding-left: 5px;
   align-items: center;
 }
 .flexlayout__tab_floating {

package/style/dark.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["dark.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AClEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;ED+HR;;AC5HI;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;ED7BR;;ACgCQ;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;EDhFR;;ACoFI;EACI;EDjFR;;ACsFA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;ED9HR;EACA;EACA;;ACgIQ;ED5HR;EACA;EACA;;AC8HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDtIZ;;AC8IQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID9KhB;;;ACgMQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ED5SR;EACA;;AC8SQ;EACI;EACA;;AAGJ;EACI;IACI;IACA;ID5ShB;;;ACiTQ;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDtVZ;;AC8VQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID/XhB;;;ACuYY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"dark.css"}
+{"version":3,"sourceRoot":"","sources":["dark.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;;;ACnEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;EDgIR;;AC7HI;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;ED5BR;;AC+BQ;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;ED/ER;;ACmFI;EACI;EDhFR;;ACqFA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;ED7HR;EACA;EACA;;AC+HQ;ED3HR;EACA;EACA;;AC6HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDrIZ;;AC6IQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID7KhB;;;AC+LQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ED3SR;EACA;;AC6SQ;EACI;EACA;;AAGJ;EACI;IACI;IACA;ID3ShB;;;ACgTQ;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDrVZ;;AC6VQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID9XhB;;;ACsYY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"dark.css"}

package/style/dark.scss

@@ -35,6 +35,7 @@ $font-family: Roboto, Arial, sans-serif !default;
         --font-family: #{$font_family};
 
         --color-overflow: gray;
+        --color-icon: gray;
 
         --color-tabset-background: var(--color-1);
         --color-tabset-background-selected: var(--color-1);

package/style/gray.css

@@ -8,13 +8,14 @@
   --color-4: #cccccc;
   --color-5: #bfbfbf;
   --color-6: #b3b3b3;
-  --color-drag1: #5f86c4;
-  --color-drag2: #77a677;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;
   --font-family: Roboto, Arial, sans-serif;
   --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);
@@ -299,7 +300,7 @@
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   gap: 0.3em;
-  padding-left: 2px;
+  padding-left: 5px;
   align-items: center;
 }
 .flexlayout__tab_floating {

package/style/gray.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["gray.scss","_base.scss"],"names":[],"mappings":"AAiBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;;;ACjEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;ED8HR;;AC3HI;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;ED3BR;;AC8BQ;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;ED9ER;;ACkFI;EACI;ED/ER;;ACoFA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;ED5HR;EACA;EACA;;AC8HQ;ED1HR;EACA;EACA;;AC4HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AASJ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAoBJ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ED5SR;EACA;;AC8SQ;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AASJ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAUA;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"gray.css"}
+{"version":3,"sourceRoot":"","sources":["gray.scss","_base.scss"],"names":[],"mappings":"AAiBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AClEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;ED+HR;;AC5HI;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;ED1BR;;AC6BQ;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;ED7ER;;ACiFI;EACI;ED9ER;;ACmFA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;ED3HR;EACA;EACA;;AC6HQ;EDzHR;EACA;EACA;;AC2HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AASJ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAoBJ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ED3SR;EACA;;AC6SQ;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AASJ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAUA;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"gray.css"}

package/style/gray.scss

@@ -34,6 +34,7 @@ $font_family: Roboto, Arial, sans-serif !default;
         --font-family: #{$font_family};
 
         --color-overflow: gray;
+        --color-icon: gray;
 
         --color-tabset-background: var(--color-1);
         --color-tabset-background-selected: var(--color-1);

package/style/light.css

@@ -8,13 +8,14 @@
   --color-4: #e2e2e2;
   --color-5: #dbdbdb;
   --color-6: #d4d4d4;
-  --color-drag1: #5f86c4;
-  --color-drag2: #77a677;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;
   --font-family: Roboto, Arial, sans-serif;
   --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);
@@ -294,7 +295,7 @@
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   gap: 0.3em;
-  padding-left: 2px;
+  padding-left: 5px;
   align-items: center;
 }
 .flexlayout__tab_floating {

package/style/light.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["light.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AClEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;EDtHZ;;ACkIQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDtJZ;;AC8JQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID9LhB;;;ACgNQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDtWZ;;AC8WQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID/YhB;;;ACuZY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"light.css"}
+{"version":3,"sourceRoot":"","sources":["light.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;;;ACnEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAIJ;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;EDrHZ;;ACiIQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDrJZ;;AC6JQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID7LhB;;;AC+MQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;IACI;IACA;;;AAKR;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDrWZ;;AC6WQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID9YhB;;;ACsZY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"light.css"}

package/style/light.scss

@@ -35,6 +35,7 @@ $font-family: Roboto, Arial, sans-serif !default;
         --font-family: #{$font_family};
 
         --color-overflow: gray;
+        --color-icon: gray;
 
         --color-tabset-background: var(--color-background);
         --color-tabset-background-selected: var(--color-1);

package/style/underline.css

@@ -8,13 +8,14 @@
   --color-4: #e6e6e6;
   --color-5: #e0e0e0;
   --color-6: #d9d9d9;
-  --color-drag1: #5f86c4;
-  --color-drag2: #77a677;
+  --color-drag1: rgb(95, 134, 196);
+  --color-drag2: rgb(119, 166, 119);
   --color-drag1-background: rgba(95, 134, 196, 0.1);
   --color-drag2-background: rgba(119, 166, 119, 0.075);
   --font-size: medium;
   --font-family: Roboto, Arial, sans-serif;
   --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);
@@ -47,6 +48,7 @@
   --color-edge-marker: gray;
   --color-underline: rgb(65, 105, 225);
   --color-underline-hover: #aaa;
+  --underline_height: 3px;
 }
 
 .flexlayout__layout {
@@ -216,23 +218,25 @@
   box-sizing: border-box;
   padding: 3px 0.5em;
   cursor: pointer;
+  padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
 }
 .flexlayout__tab_button--selected {
   background-color: var(--color-tab-selected-background);
   color: var(--color-tab-selected);
-  border-bottom: 3px solid var(--color-underline);
+  border-bottom: var(--underline_height) solid var(--color-underline);
 }
 @media (hover: hover) {
   .flexlayout__tab_button:hover {
     background-color: var(--color-tab-selected-background);
     color: var(--color-tab-selected);
-    border-bottom: 3px solid var(--color-underline-hover);
+    border-bottom: var(--underline_height) solid var(--color-underline-hover);
   }
 }
 .flexlayout__tab_button--unselected {
   background-color: var(--color-tab-unselected-background);
   color: var(--color-tab-unselected);
   color: gray;
+  border-bottom: var(--underline_height) solid transparent;
 }
 .flexlayout__tab_button_leading {
   display: flex;
@@ -301,7 +305,7 @@
 .flexlayout__tab_toolbar_sticky_buttons_container {
   display: flex;
   gap: 0.3em;
-  padding-left: 2px;
+  padding-left: 5px;
   align-items: center;
 }
 .flexlayout__tab_floating {
@@ -397,22 +401,24 @@
   margin: 2px 0px;
   box-sizing: border-box;
   white-space: nowrap;
+  padding: 2px 0.5em calc(4px - var(--underline_height)) 0.5em;
 }
 .flexlayout__border_button--selected {
   background-color: var(--color-border-tab-selected-background);
   color: var(--color-border-tab-selected);
-  border-bottom: 3px solid var(--color-underline);
+  border-bottom: var(--underline_height) solid var(--color-underline);
 }
 @media (hover: hover) {
   .flexlayout__border_button:hover {
     background-color: var(--color-border-tab-selected-background);
     color: var(--color-border-tab-selected);
-    border-bottom: 3px solid var(--color-underline-hover);
+    border-bottom: var(--underline_height) solid var(--color-underline-hover);
   }
 }
 .flexlayout__border_button--unselected {
   background-color: var(--color-border-tab-unselected-background);
   color: var(--color-border-tab-unselected);
+  border-bottom: var(--underline_height) solid transparent;
 }
 .flexlayout__border_button_leading {
   display: flex;

package/style/underline.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["underline.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;;;ACrEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EDuDR;EACA;EACA;;ACrDI;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EDzGZ;;AC4GQ;EACI;IACI;IACA;IDvGhB;;;AC4GQ;EACI;EACA;EDlHZ;;AC8HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDjJZ;;ACyJQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDzLhB;;;AC2MQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EDxQR;EACA;EACA;;AC0QI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;EDtTZ;;ACyTQ;EACI;IACI;IACA;IDrThB;;;AC0TQ;EACI;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;EDjWZ;;ACyWQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;ID1YhB;;;ACkZY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;AD3cR;EACI","file":"underline.css"}
+{"version":3,"sourceRoot":"","sources":["underline.scss","_base.scss"],"names":[],"mappings":"AAkBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;;;ACvEJ;EARA;EACA;EACA;EACA;EACA;EAMI;;AAGJ;EACI;;AAGA;EACI;IACI;IACA;IACA;;;AAIR;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;ED6DR;EACA;EACA;;AC3DI;EACI;EACA;EACA;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAKJ;EAEI;EACA;EACA;EACA;;AAIJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAMhB;EACI;;AAIJ;EACI;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EAEA;EDrGR;;ACwGQ;EACI;EACA;EDtGZ;;ACyGQ;EACI;IACI;IACA;IDnGhB;;;ACwGQ;EACI;EACA;ED/GZ;EACA;;AC0HQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;ED7IZ;;ACqJQ;EACI;IACI;;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDrLhB;;;ACuMQ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAKZ;EACI;EDlQR;EACA;EACA;;ACoQI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDhTR;;ACmTQ;EACI;EACA;EDjTZ;;ACoTQ;EACI;IACI;IACA;ID/ShB;;;ACoTQ;EACI;EACA;ED1TZ;;AC8TQ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AACA;ED7VZ;;ACqWQ;EACI;IACI;;;AAIR;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAGJ;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;IDtYhB;;;AC8YY;EACI;EACA;EACA;EACA;EACA;EACA;;AAchB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;IACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAGJ;EArkBJ;EACA;EACA;EACA;EACA;;AAqkBI;EACI;EA1kBR;EACA;EACA;EACA;EACA;EAykBQ;EACA;EACA;;AAIR;EAnlBA;EACA;EACA;EACA;EACA;EAilBI;EACA;;AAEJ;EACI;EACA;;AAOJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;ADrcR;EACI","file":"underline.css"}