@perspective-dev/workspace 4.2.0 → 4.4.0

package/dist/esm/workspace/workspace.d.ts

@@ -83,7 +83,7 @@ export declare class PerspectiveWorkspace extends SplitPanel {
     _maximize(widget: PerspectiveViewerWidget): void;
     _unmaximize(): void;
     toggleSingleDocument(widget: PerspectiveViewerWidget): void;
-    _filterViewer(viewer: HTMLPerspectiveViewerElement, filters: [string, string, string][], candidates: Set<string>): Promise<void>;
+    _filterViewer(viewer: HTMLPerspectiveViewerElement, removeFilters: psp.Filter[], insertFilters: psp.Filter[], candidates: Set<string>): Promise<void>;
     onPerspectiveSelect(event: CustomEvent): Promise<void>;
     makeMaster(widget: PerspectiveViewerWidget): Promise<void>;
     makeDetail(widget: PerspectiveViewerWidget): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/workspace",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "description": "Perspective Workspace",
   "files": [
     "dist/**/*",
@@ -41,10 +41,11 @@
   },
   "devDependencies": {
     "@perspective-dev/viewer": "",
-    "@prospective.co/procss": "0.1.18",
+    "lightningcss": "^1.29.0",
     "@perspective-dev/esbuild-plugin": "",
     "@perspective-dev/test": "",
     "@types/lodash": "^4.17.20",
+    "@types/react": ">17 <20",
     "typescript": ">=5 <6",
     "zx": ">=8 <9"
   },

package/src/css/dockpanel.css

@@ -0,0 +1,110 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+:host {
+    .lm-DockPanel {
+        overflow: var(--dock-panel--overflow, hidden);
+        position: absolute;
+        background-color: var(--detail--background-color, transparent);
+        padding: var(--psp-workspace--spacing);
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        &[data-mode="single-document"] {
+            padding: 0px;
+        }
+    }
+
+    .lm-Widget,
+    .lm-Widget {
+        cursor: inherit;
+    }
+
+    .lm-DockPanel.ew,
+    .lm-DockPanel.ew .lm-Widget,
+    .lm-SplitPanel.ew,
+    .lm-SplitPanel.ew .lm-Widget {
+        cursor: ew-resize !important;
+    }
+
+    .lm-DockPanel.ns,
+    .lm-DockPanel.ns .lm-Widget,
+    .lm-SplitPanel.ns,
+    .lm-SplitPanel.ns .lm-Widget {
+        cursor: ns-resize !important;
+    }
+
+    .workspace-master-widget {
+        min-width: 100px !important;
+    }
+
+    .lm-DockPanel.resizing ::slotted(perspective-viewer),
+    .lm-SplitPanel.resizing ::slotted(perspective-viewer) {
+        pointer-events: none;
+    }
+
+    .widget-blur ::slotted(perspective-viewer) {
+        opacity: 0.5;
+    }
+
+    .lm-DockPanel-handle.resizing {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .perspective-scroll-panel {
+        overflow: auto !important;
+    }
+
+    .lm-Panel {
+        min-height: 100%;
+    }
+
+    .lm-DockPanel-handle {
+        background-color: none;
+    }
+
+    .lm-SplitPanel-handle {
+        background-color: var(
+            --psp-workspace--split-panel-handle--background-color
+        );
+    }
+
+    .lm-SplitPanel-handle,
+    .lm-DockPanel-handle {
+        transition: background-color 0.3s ease-out;
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+    }
+
+    .lm-DockPanel-handle[data-orientation="horizontal"] {
+        width: 10px !important;
+        margin-left: -5px;
+    }
+
+    .lm-DockPanel-handle[data-orientation="vertical"] {
+        height: 10px !important;
+        margin-top: -5px;
+    }
+
+    .lm-DockPanel-overlay {
+        background: rgba(75, 75, 75, 0.2);
+        border: 1px dashed #666;
+        border-radius: 6px;
+        transition-property: top, left, right, bottom;
+        transition-duration: 50ms;
+        transition-timing-function: linear;
+        margin: 0px;
+    }
+}

package/src/{less/injected.less → css/injected.css}

@@ -1,14 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
-@import "./viewer.less";
-@import "./menu.less";
+@import "./viewer.css";
+@import "./menu.css";

package/src/css/menu.css

@@ -0,0 +1,130 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+@import "@lumino/widgets/style/menu.css";
+
+:host {
+    .lm-Menu {
+        font-size: 12px;
+        padding: 8px;
+        background-color: var(--psp--background-color);
+        color: var(--psp--color);
+        border: 1px solid var(--psp-inactive--color);
+        border-radius: 3px;
+        max-width: 350px;
+        top: 0;
+        left: 0;
+    }
+
+    .lm-Menu.perspective-workspace-menu {
+        .lm-Menu-item {
+            padding-left: 37px !important;
+        }
+    }
+
+    .lm-Menu-item.lm-mod-active {
+        background-color: var(--psp--color);
+        color: var(--psp--background-color);
+    }
+
+    .lm-Menu-item.lm-mod-disabled {
+        opacity: 0.5;
+    }
+
+    .lm-Menu-itemIcon {
+        width: 24px;
+        height: 12px;
+        margin-right: 4px;
+    }
+
+    .lm-Menu-itemLabel {
+        flex: 1 1;
+        padding: 4px 2px 4px 2px;
+    }
+
+    .lm-Menu-itemMnemonic {
+        text-decoration: underline;
+    }
+
+    .lm-Menu-itemShortcut {
+        padding: 4px 0px;
+    }
+
+    .lm-Menu-itemSubmenuIcon {
+        width: 24px;
+        height: 18px;
+    }
+
+    .lm-Menu-item {
+        display: flex;
+        align-items: center;
+        outline: none;
+
+        margin: 0 -8px;
+        padding: 0 8px;
+    }
+
+    .lm-Menu-item[data-type="separator"] > div {
+        padding: 0;
+        height: 9px;
+    }
+
+    .lm-Menu-item[data-type="separator"] > div::after {
+        content: "";
+        display: block;
+        position: relative;
+        top: 4px;
+        border-top: 1px solid;
+    }
+
+    .lm-MenuBar-menu {
+        transform: translateY(-1px);
+    }
+
+    .lm-MenuBar-item {
+        padding: 10px 32px;
+        border-left: 1px solid transparent;
+        border-right: 1px solid transparent;
+        color: #737373 !important;
+    }
+
+    .lm-MenuBar-item.lm-mod-active {
+        background: rgba(0, 0, 0, 0.2);
+    }
+
+    .lm-MenuBar.lm-mod-active .lm-MenuBar-item.lm-mod-active {
+        z-index: 10001;
+        background: rgba(0, 0, 0, 0.2);
+        /* border-left: 1px solid #c0c0c0; */
+        /* border-right: 1px solid #c0c0c0; */
+    }
+
+    .lm-Menu-itemIcon:before {
+        content: attr(content);
+        font-family:
+            "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+            "Liberation Mono", monospace;
+    }
+
+    [data-type="submenu"] .lm-Menu-itemSubmenuIcon:before {
+        content: ">";
+        font-family:
+            "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+            "Liberation Mono", monospace;
+        height: 18px;
+    }
+
+    .lm-mod-drag-image.lm-TabBar-tab {
+        display: none;
+    }
+}

package/src/css/tabbar.css

@@ -0,0 +1,378 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+:host {
+    .lm-TabBar-tabLabel {
+        background-color: transparent;
+        border: none;
+        color: var(--psp--color, #666);
+        cursor: pointer;
+        padding: 0px 6px;
+        margin: 0;
+        margin-left: 15.5px;
+        margin-right: auto;
+        flex: 0 1 auto;
+        border-radius: 3px;
+        &:hover {
+            background-color: var(--psp--color);
+            color: var(--psp--background-color);
+        }
+    }
+
+    /* .p-TabBar-tabLabel[value="[untitled]"] { */
+    /*     color: #ddd !important; */
+    /* } */
+
+    .lm-TabBar-tabLabel:focus {
+        outline: none;
+        color: var(--workspace-secondary--color, #666) !important;
+        cursor: text;
+    }
+
+    .lm-TabBar-tab.lm-mod-closable > .lm-TabBar-tabCloseIcon:before {
+        content: var(--close-button--content, "\2715");
+    }
+
+    .lm-TabBar-tab > .lm-TabBar-tabConfigIcon:before {
+        content: var(--open-settings-button--content, "\1F527");
+        font-family: var(--settings--font-family, "Arial");
+        transition: color 0.5s ease;
+    }
+
+    .lm-TabBar-tab.lm-mod-current.settings_open
+        > .lm-TabBar-tabConfigIcon:before {
+        content: var(--close-settings-button--content, "\1F527");
+    }
+
+    .lm-TabBar-tab.lm-mod-current.linked > .lm-TabBar-tabConfigIcon:before {
+        color: #22a0ce;
+    }
+
+    .lm-TabBar-tab > .lm-TabBar-tabConfigIcon {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .lm-TabBar-tab.lm-mod-current > .lm-TabBar-tabConfigIcon {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    .lm-mod-current {
+        .lm-TabBar-tabConfigIcon,
+        .lm-TabBar-tabCloseIcon {
+            color: inherit;
+            transition: color 0.2s ease-out;
+        }
+
+        .lm-TabBar-tabConfigIcon:hover,
+        .lm-TabBar-tabCloseIcon:hover {
+            color: #1a7da1;
+            transition: color 0.2s ease-out;
+        }
+    }
+
+    .lm-BoxPanel {
+        overflow: scroll !important;
+    }
+
+    .lm-TabBar,
+    .lm-TabBar-tab {
+        position: relative;
+
+        overflow: visible !important;
+    }
+
+    .lm-TabBar-tabLabel:empty::after {
+        content: "untitled";
+        color: #aaa;
+    }
+
+    .lm-mod-current .lm-TabBar-tabLabel:empty::after {
+        color: #ddd;
+    }
+
+    .lm-TabBar-tabLabel:empty::after {
+        content: "untitled";
+    }
+
+    .divider {
+        left: 32px;
+        bottom: 0;
+        position: absolute;
+        right: 32px;
+
+        height: 1px;
+        background-color: var(--psp-workspace--tabbar--border-color);
+        margin-bottom: 0px;
+    }
+
+    .lm-TabBar-tab .drag-handle {
+        pointer-events: all;
+        height: 12px;
+        width: 14px;
+        -webkit-mask-image: var(--psp-icon--column-drag-handle--mask-image);
+        mask-image: var(--psp-icon--column-drag-handle--mask-image);
+        padding: 12px 0 12px 12px;
+        background-repeat: no-repeat;
+        background-color: var(--psp--color, red);
+        content: "";
+        display: inline-block;
+        -webkit-mask-size: cover;
+        mask-size: auto;
+        mask-position: center;
+        mask-repeat: no-repeat;
+    }
+
+    .lm-TabBar {
+        /* z-index: -1; */
+        pointer-events: none;
+        .lm-TabBar-tabCloseIcon {
+            pointer-events: all;
+        }
+
+        .bookmarks-button {
+            pointer-events: all;
+        }
+    }
+
+    .lm-TabBar-tab.lm-mod-hidden {
+        display: flex !important;
+        opacity: 0.5;
+    }
+
+    .lm-TabBar-tab.lm-mod-current .divider {
+        display: block;
+    }
+
+    .pfm-button-base {
+        background: white !important;
+    }
+
+    .pfm-button-base:active {
+        background: #016bc6 !important;
+    }
+
+    .lm-TabBar-content {
+        padding: 0px;
+        border-bottom: 0px solid #fff !important;
+        border-left: #eaeaea;
+        border-right: #eaeaea;
+    }
+
+    .lm-TabBar-tab.lm-mod-current {
+        .shadow {
+            margin: -1px;
+            position: absolute;
+            width: calc(100% + 2px);
+            height: 200%;
+            pointer-events: none;
+            left: 0px;
+        }
+
+        &.settings_open .shadow {
+            box-shadow: none;
+        }
+    }
+
+    .lm-TabBar-tab {
+        /* margin: 0px 4px; */
+        border-color: #eaeaea;
+        align-items: center;
+    }
+
+    .lm-TabBar-content.inactive-blur > .lm-TabBar-tab {
+        background-color: var(
+            --workspace-inactive-blur--background-color,
+            transparent
+        );
+    }
+
+    .condensed .lm-TabBar-content {
+        & > .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabConfigIcon {
+            display: block;
+        }
+
+        & > .lm-TabBar-tab.lm-mod-current.settings_open {
+            .lm-TabBar-tabLabel {
+                margin-left: 0px;
+            }
+        }
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.settings_open {
+        border-width: 1px 1px 0px 1px !important;
+        border-color: var(--psp-workspace--tabbar--border-color, #ddd);
+
+        .lm-TabBar-tabToolbar {
+            display: flex;
+        }
+
+        .divider {
+            height: 1px;
+            margin-bottom: 0px;
+            background-color: var(--psp-workspace--tabbar--border-color, #ddd);
+        }
+
+        &:last-child:first-child .divider {
+            transition: none;
+        }
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.perspective_updating {
+        .lm-TabBar-tabConfigIcon {
+            display: none;
+        }
+
+        .lm-TabBar-tabLoadingIcon {
+            display: block;
+        }
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab {
+        max-width: 100000px !important;
+        flex: 0 1 100000px !important;
+        background: none;
+        color: #737373;
+        height: 40px !important;
+        max-height: 40px !important;
+        margin-bottom: -40px;
+        transform: none !important;
+        transition: color 0.2s ease-out;
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab {
+        color: #ccc;
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab {
+        color: #ccc;
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab:hover {
+        color: #ccc;
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current {
+        color: var(--workspace-secondary--color, #666);
+    }
+
+    .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabLabel {
+        white-space: nowrap !important;
+    }
+
+    .lm-TabBar-tabLabel {
+        font-family: inherit;
+        font-size: 12px;
+        line-height: 22px;
+        text-align: start;
+        white-space: normal !important;
+        word-break: break-all;
+    }
+
+    .lm-TabBar-tabCloseIcon,
+    .lm-TabBar-tabConfigIcon {
+        cursor: pointer !important;
+        line-height: 22px !important;
+        padding-right: 16.5px !important;
+    }
+
+    .lm-TabBar-tabConfigIcon {
+        padding-left: 8px;
+        padding-right: 8px !important;
+    }
+
+    .lm-TabBar-tabLoadingIcon {
+        padding-left: 11px;
+        padding-right: 12px;
+    }
+
+    .bottom .lm-TabBar-tab {
+        flex-basis: 10000px !important;
+        max-width: 10000px !important;
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current {
+        color: var(--workspace-tabbar--color, #666) !important;
+        /* border: var(--psp-workspace--tabbar--border, 1px solid #ddd); */
+        /* border-width: var(--psp-workspace--tabbar-tab--border-width); */
+        /* box-shadow: 0 13px 0 -12px var(--psp-inactive--border-color); */
+        /* border-radius: var(--psp-workspace--tabbar--border-radius, 6px) */
+        /*     var(--psp-workspace--tabbar--border-radius, 6px) 0 0; */
+        /* background-color: var(--workspace-tabbar--background-color, white); */
+        background: none;
+        height: 40px !important;
+        max-height: 40px !important;
+        margin-bottom: -40px;
+        border: 0 solid transparent;
+        border-width: 1px 1px 0px 1px;
+    }
+
+    .bottom .lm-TabBar-tab.lm-mod-current {
+        border: none;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: #ccc;
+    }
+
+    .perspective-workspace.context-menu * .lm-TabBar.context-focus {
+        opacity: 1;
+    }
+
+    .perspective-workspace.context-menu * .lm-TabBar,
+    .perspective-workspace.context-menu
+        .lm-Widget.workspace-widget:not(.context-focus)
+        .viewer-container {
+        opacity: 0.2;
+    }
+
+    .bookmarks-button {
+        margin-left: 11px;
+        margin-right: -13px;
+        height: 20px;
+        border-radius: 3px;
+        border: 1px solid var(--psp-inactive--color);
+        background-color: var(--psp--background-color);
+
+        &:hover {
+            background-color: var(--psp--color);
+            border-color: var(--psp--color);
+        }
+    }
+
+    .bookmarks {
+        background-repeat: no-repeat;
+        background-color: var(--psp--color);
+        content: "";
+        display: inline-block;
+        -webkit-mask-size: cover;
+        mask-size: cover;
+        cursor: pointer;
+        width: 20px;
+        height: 12px;
+        -webkit-mask-image: var(--psp-icon--bookmarks--mask-image);
+        mask-image: var(--psp-icon--bookmarks--mask-image);
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-size: auto;
+        mask-size: auto;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        padding: 4px 6px;
+
+        &:hover {
+            background-color: var(--psp--background-color);
+        }
+    }
+}