From d0299c3e55c5c62f8786a4f1e17dd0d6f1dcd80d Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Mon, 10 Jun 2024 13:38:58 -0500 Subject: [PATCH 01/18] adding remove layout function --- how-to/web-layout/client/src/provider.ts | 32 +++++++++++++++++-- .../web-layout/public/platform/provider.html | 1 + 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index f40006b..c9de363 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -1,3 +1,4 @@ +/* eslint-disable jsdoc/require-param */ import type OpenFin from "@openfin/core"; import { type WebLayoutSnapshot, connect } from "@openfin/core-web"; import { getDefaultLayout, getSettings } from "./platform/settings"; @@ -43,6 +44,11 @@ async function attachListeners(): Promise { swapButton?.addEventListener("click", async () => { await swapLayout(); }); + + const removeLayoutBtn = document.querySelector("#remove-layout"); + removeLayoutBtn?.addEventListener("click", async () => { + await removeThisLayout("Test"); + }); } /** @@ -103,8 +109,11 @@ function makeOverride(fin: OpenFin.Fin, layoutContainerId: s * @param snapshot The layouts object containing the fixed set of available layouts. */ public async applyLayoutSnapshot(snapshot: WebLayoutSnapshot): Promise { - console.log(`Does this exist? ${Boolean(this.layoutContainer)}`); + console.log(`[Apply Layout] Does this exist? ${Boolean(this.layoutContainer)}`); if (this.layoutContainer !== null && this.layoutContainer !== undefined) { + for (const [key, value] of Object.entries(snapshot.layouts)) { + this.layoutMapArray.push({ layoutName: key, layout: value, container: this.layoutContainer }); + } setTimeout( () => Object.entries(snapshot.layouts).map(async ([layoutName, layout], i) => @@ -112,9 +121,19 @@ function makeOverride(fin: OpenFin.Fin, layoutContainerId: s ), 1000 ); - console.log("Layouts loaded"); + console.log("[Apply Layout] Layouts loaded"); + console.log(`[Apply Layout] Layouts are: ${JSON.stringify(this.layoutMapArray)}`); } } + + /** + * Remove Layout - You guessed it, it removes a layout from the existing array of layouts. + * @param layoutName The name of the layout you want removed. + */ + public async removeLayout({ layoutName }: OpenFin.LayoutIdentity): Promise { + const index = this.layoutMapArray.findIndex((x) => x.layoutName === layoutName); + console.log(`[Remove Layout] Found layout at index ${index}`); + } }; }; } @@ -141,6 +160,15 @@ export async function swapLayout(): Promise { } } + +/** + * Click function to remove a layout by name. + * @param layoutName the name of a layout. + */ +export async function removeThisLayout(layoutName: string): Promise { + const layoutMgr = fin.Platform.Layout.getCurrentLayoutManagerSync(); + await layoutMgr.removeLayout({ layoutName } as OpenFin.LayoutIdentity); +} /** * Initializes the OpenFin Web Broker connection. */ diff --git a/how-to/web-layout/public/platform/provider.html b/how-to/web-layout/public/platform/provider.html index c08fd37..41c92cd 100644 --- a/how-to/web-layout/public/platform/provider.html +++ b/how-to/web-layout/public/platform/provider.html @@ -19,6 +19,7 @@

Web Multiple Layout Example

Demonstrate web interop usage with multiple layouts

+ OpenFin
From 4adafe76bb2a1af846d3d061efcc59b28d4fcde8 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Wed, 12 Jun 2024 12:04:57 -0500 Subject: [PATCH 02/18] adding logic for localstorage saves. --- how-to/web-layout/client/src/provider.ts | 47 ++++++++++++++++++++---- 1 file changed, 39 insertions(+), 8 deletions(-) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index c9de363..20abecb 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -47,7 +47,8 @@ async function attachListeners(): Promise { const removeLayoutBtn = document.querySelector("#remove-layout"); removeLayoutBtn?.addEventListener("click", async () => { - await removeThisLayout("Test"); + console.log("[Remove Layout] Removing Layout X"); + await removeThisLayout("secondary", 1); }); } @@ -123,16 +124,18 @@ function makeOverride(fin: OpenFin.Fin, layoutContainerId: s ); console.log("[Apply Layout] Layouts loaded"); console.log(`[Apply Layout] Layouts are: ${JSON.stringify(this.layoutMapArray)}`); + window.localStorage.setItem("currentLayout", JSON.stringify(this.layoutMapArray)); } } /** * Remove Layout - You guessed it, it removes a layout from the existing array of layouts. - * @param layoutName The name of the layout you want removed. + * @param id The name of the layout you want removed. */ - public async removeLayout({ layoutName }: OpenFin.LayoutIdentity): Promise { - const index = this.layoutMapArray.findIndex((x) => x.layoutName === layoutName); + public async removeLayout(id: OpenFin.LayoutIdentity): Promise { + const index = this.layoutMapArray.findIndex((x) => x.layoutName === id.layoutName); console.log(`[Remove Layout] Found layout at index ${index}`); + // await removeThisLayout(fin, id.layoutName, index); } }; }; @@ -161,13 +164,41 @@ export async function swapLayout(): Promise { } +/** + * Saves the list of layout items to Local Storage. + * @param updatedLayout List of Layouts to save. + */ +export function saveLayout(updatedLayout: LayoutManagerItem[]): void { + window.localStorage.setItem("currentLayout", JSON.stringify(updatedLayout)); +} + +/** + * Reads a list of layouts from Local Storage. + * @returns List of Layouts. + */ +export function readLayouts(): LayoutManagerItem[] { + const currentLayouts = window.localStorage.getItem("currentLayout"); + if (currentLayouts) { + return JSON.parse(currentLayouts) as LayoutManagerItem[]; + } + + return []; +} + + /** * Click function to remove a layout by name. * @param layoutName the name of a layout. */ -export async function removeThisLayout(layoutName: string): Promise { - const layoutMgr = fin.Platform.Layout.getCurrentLayoutManagerSync(); - await layoutMgr.removeLayout({ layoutName } as OpenFin.LayoutIdentity); +export async function removeThisLayout(layoutName: string, index: number): Promise { + // remove layout from state. + const layoutsBefore = readLayouts(); + let layoutsAfter: LayoutManagerItem[] = []; + if (layoutsBefore.length > 0) { + const idx = layoutsBefore.findIndex((x) => x.layoutName === layoutName); + layoutsAfter = layoutsBefore.splice(idx, 1); + saveLayout(layoutsAfter); + } } /** * Initializes the OpenFin Web Broker connection. @@ -210,7 +241,7 @@ async function init(): Promise { connectionInheritance: "enabled", platform: { layoutSnapshot } }); - + window.fin = fin; if (fin) { const layoutManagerOverride = makeOverride(fin, settings.platform.layout.layoutContainerId); // You may now use the `fin` object to initialize the broker and the layout. From 534aee9a8786df907a5e0529a890cc72f2d635e2 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Wed, 12 Jun 2024 12:17:45 -0500 Subject: [PATCH 03/18] so john can see where i was going with this --- how-to/web-layout/client/src/provider.ts | 5 +- .../public/style/core-web-styles.css | 857 +++++++++--------- 2 files changed, 422 insertions(+), 440 deletions(-) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index 20abecb..f735e0e 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -135,7 +135,7 @@ function makeOverride(fin: OpenFin.Fin, layoutContainerId: s public async removeLayout(id: OpenFin.LayoutIdentity): Promise { const index = this.layoutMapArray.findIndex((x) => x.layoutName === id.layoutName); console.log(`[Remove Layout] Found layout at index ${index}`); - // await removeThisLayout(fin, id.layoutName, index); + await removeThisLayout(id.layoutName, index); } }; }; @@ -197,7 +197,8 @@ export async function removeThisLayout(layoutName: string, index: number): Promi if (layoutsBefore.length > 0) { const idx = layoutsBefore.findIndex((x) => x.layoutName === layoutName); layoutsAfter = layoutsBefore.splice(idx, 1); - saveLayout(layoutsAfter); + console.log(`[Remove Layout] Removed this layout: ${JSON.stringify(layoutsAfter)}`); + saveLayout(layoutsBefore); } } /** diff --git a/how-to/web-layout/public/style/core-web-styles.css b/how-to/web-layout/public/style/core-web-styles.css index b760446..d5bf42b 100644 --- a/how-to/web-layout/public/style/core-web-styles.css +++ b/how-to/web-layout/public/style/core-web-styles.css @@ -1,741 +1,722 @@ .lm_root { - position: relative; + position: relative; } .lm_row > .lm_item { - float: left; + float: left; } .lm_content { - overflow: hidden; - position: relative; + overflow: hidden; + position: relative; } .lm_dragging, .lm_dragging * { - cursor: move !important; - -webkit-user-select: none; - user-select: none; + cursor: move !important; + -webkit-user-select: none; + user-select: none; } .lm_maximised { - position: absolute; - top: 0; - left: 0; - z-index: 40; + position: absolute; + top: 0; + left: 0; + z-index: 40; } .lm_maximise_placeholder { - display: none; + display: none; } .lm_splitter { - position: relative; - z-index: 2; - touch-action: none; + position: relative; + z-index: 2; + touch-action: none; } .lm_splitter.lm_vertical .lm_drag_handle { - width: 100%; - position: absolute; - cursor: ns-resize; - touch-action: none; - -webkit-user-select: none; - user-select: none; + width: 100%; + position: absolute; + cursor: ns-resize; + touch-action: none; + -webkit-user-select: none; + user-select: none; } .lm_splitter.lm_horizontal { - float: left; - height: 100%; + float: left; + height: 100%; } .lm_splitter.lm_horizontal .lm_drag_handle { - height: 100%; - position: absolute; - cursor: ew-resize; - touch-action: none; - -webkit-user-select: none; - user-select: none; + height: 100%; + position: absolute; + cursor: ew-resize; + touch-action: none; + -webkit-user-select: none; + user-select: none; } .lm_header { - overflow: visible; - position: relative; - z-index: 1; - -webkit-user-select: none; - user-select: none; + overflow: visible; + position: relative; + z-index: 1; + -webkit-user-select: none; + user-select: none; } -.lm_header [class^='lm_'] { - box-sizing: content-box !important; +.lm_header [class^=lm_] { + box-sizing: content-box !important; } .lm_header .lm_controls { - position: absolute; - right: 3px; - display: flex; + position: absolute; + right: 3px; + display: flex; } .lm_header .lm_controls > * { - cursor: pointer; - float: left; - width: 18px; - height: 18px; - text-align: center; + cursor: pointer; + float: left; + width: 18px; + height: 18px; + text-align: center; } .lm_header .lm_tabs { - position: absolute; - display: flex; + position: absolute; + display: flex; } .lm_header .lm_tab { - cursor: pointer; - float: left; - height: 14px; - margin-top: 1px; - padding: 0px 10px 5px; - padding-right: 25px; - position: relative; - touch-action: none; + cursor: pointer; + float: left; + height: 14px; + margin-top: 1px; + padding: 0px 10px 5px; + padding-right: 25px; + position: relative; + touch-action: none; } .lm_header .lm_tab i { - width: 2px; - height: 19px; - position: absolute; + width: 2px; + height: 19px; + position: absolute; } .lm_header .lm_tab i.lm_left { - top: 0; - left: -2px; + top: 0; + left: -2px; } .lm_header .lm_tab i.lm_right { - top: 0; - right: -2px; + top: 0; + right: -2px; } .lm_header .lm_tab .lm_title { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; } .lm_header .lm_tab .lm_close_tab { - width: 14px; - height: 14px; - position: absolute; - top: 0; - right: 0; - text-align: center; + width: 14px; + height: 14px; + position: absolute; + top: 0; + right: 0; + text-align: center; } .lm_stack { - position: relative; + position: relative; } .lm_stack > .lm_items { - overflow: hidden; + overflow: hidden; } .lm_stack.lm_left > .lm_items { - position: absolute; - left: 20px; - top: 0; + position: absolute; + left: 20px; + top: 0; } .lm_stack.lm_right > .lm_items { - position: absolute; - right: 20px; - top: 0; + position: absolute; + right: 20px; + top: 0; } .lm_stack.lm_right > .lm_header { - position: absolute; - right: 0; - top: 0; + position: absolute; + right: 0; + top: 0; } .lm_stack.lm_bottom > .lm_items { - position: absolute; - bottom: 20px; + position: absolute; + bottom: 20px; } .lm_stack.lm_bottom > .lm_header { - position: absolute; - bottom: 0; + position: absolute; + bottom: 0; } .lm_left.lm_stack .lm_header, .lm_right.lm_stack .lm_header { - height: 100%; + height: 100%; } .lm_left.lm_dragProxy .lm_header, .lm_right.lm_dragProxy .lm_header, .lm_left.lm_dragProxy .lm_items, .lm_right.lm_dragProxy .lm_items { - float: left; + float: left; } .lm_left.lm_dragProxy .lm_header, .lm_right.lm_dragProxy .lm_header, .lm_left.lm_stack .lm_header, .lm_right.lm_stack .lm_header { - width: 20px; - vertical-align: top; + width: 20px; + vertical-align: top; } .lm_left.lm_dragProxy .lm_header .lm_tabs, .lm_right.lm_dragProxy .lm_header .lm_tabs, .lm_left.lm_stack .lm_header .lm_tabs, .lm_right.lm_stack .lm_header .lm_tabs { - transform-origin: left top; - top: 0; - width: 1000px; - /*hack*/ + transform-origin: left top; + top: 0; + width: 1000px; + /*hack*/ } .lm_left.lm_dragProxy .lm_header .lm_controls, .lm_right.lm_dragProxy .lm_header .lm_controls, .lm_left.lm_stack .lm_header .lm_controls, .lm_right.lm_stack .lm_header .lm_controls { - bottom: 0; - flex-flow: column; + bottom: 0; + flex-flow: column; } .lm_dragProxy.lm_left .lm_header .lm_tabs, .lm_stack.lm_left .lm_header .lm_tabs { - transform: rotate(-90deg) scaleX(-1); - left: 0; + transform: rotate(-90deg) scaleX(-1); + left: 0; } .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab, .lm_stack.lm_left .lm_header .lm_tabs .lm_tab { - transform: scaleX(-1); - margin-top: 1px; + transform: scaleX(-1); + margin-top: 1px; } .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list, .lm_stack.lm_left .lm_header .lm_tabdropdown_list { - top: initial; - right: initial; - left: 20px; + top: initial; + right: initial; + left: 20px; } .lm_dragProxy.lm_right .lm_content { - float: left; + float: left; } .lm_dragProxy.lm_right .lm_header .lm_tabs, .lm_stack.lm_right .lm_header .lm_tabs { - transform: rotate(90deg) scaleX(1); - left: 100%; - margin-left: 0; + transform: rotate(90deg) scaleX(1); + left: 100%; + margin-left: 0; } .lm_dragProxy.lm_right .lm_header .lm_controls, .lm_stack.lm_right .lm_header .lm_controls { - left: 3px; + left: 3px; } .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list, .lm_stack.lm_right .lm_header .lm_tabdropdown_list { - top: initial; - right: 20px; + top: initial; + right: 20px; } .lm_dragProxy.lm_bottom .lm_header, .lm_stack.lm_bottom .lm_header { - width: 100%; + width: 100%; } .lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab { - margin-top: 0; - border-top: none; + margin-top: 0; + border-top: none; } .lm_dragProxy.lm_bottom .lm_header .lm_controls, .lm_stack.lm_bottom .lm_header .lm_controls { - top: 3px; + top: 3px; } .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list, .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list { - top: initial; - bottom: 20px; + top: initial; + bottom: 20px; } .lm_drop_tab_placeholder { - float: left; - width: 100px; - visibility: hidden; + float: left; + width: 100px; + visibility: hidden; } .lm_header .lm_controls .lm_tabdropdown:before { - content: ''; - width: 0; - height: 0; - vertical-align: middle; - display: inline-block; - border-top: 5px dashed; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - color: white; + content: ''; + width: 0; + height: 0; + vertical-align: middle; + display: inline-block; + border-top: 5px dashed; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + color: white; } .lm_header .lm_tabdropdown_list { - position: absolute; - top: 20px; - right: 0; - z-index: 5; - overflow: hidden; + position: absolute; + top: 20px; + right: 0; + z-index: 5; + overflow: hidden; } .lm_header .lm_tabdropdown_list .lm_tab { - clear: both; - padding-right: 10px; - margin: 0; + clear: both; + padding-right: 10px; + margin: 0; } .lm_header .lm_tabdropdown_list .lm_tab .lm_title { - width: 100px; + width: 100px; } .lm_header .lm_tabdropdown_list .lm_close_tab { - display: none !important; + display: none !important; } /*********************************** * Drag Proxy ***********************************/ .lm_dragProxy { - position: absolute; - top: 0; - left: 0; - z-index: 30; + position: absolute; + top: 0; + left: 0; + z-index: 30; } .lm_dragProxy .lm_header { - background: transparent; + background: transparent; } .lm_dragProxy .lm_content { - border-top: none; - overflow: hidden; + border-top: none; + overflow: hidden; } .lm_dropTargetIndicator { - display: none; - position: absolute; - z-index: 35; - transition: all 200ms ease; + display: none; + position: absolute; + z-index: 35; + transition: all 200ms ease; } .lm_dropTargetIndicator .lm_inner { - width: 100%; - height: 100%; - position: relative; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: relative; + top: 0; + left: 0; } .lm_transition_indicator { - display: none; - width: 20px; - height: 20px; - position: absolute; - top: 0; - left: 0; - z-index: 20; + display: none; + width: 20px; + height: 20px; + position: absolute; + top: 0; + left: 0; + z-index: 20; } .lm_popin { - width: 20px; - height: 20px; - position: absolute; - bottom: 0; - right: 0; - z-index: 9999; + width: 20px; + height: 20px; + position: absolute; + bottom: 0; + right: 0; + z-index: 9999; } .lm_popin > * { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; } .lm_popin > .lm_bg { - z-index: 10; + z-index: 10; } .lm_popin > .lm_icon { - z-index: 20; + z-index: 20; } :root { - /* Colors used for dark theme */ - --of-default-black: black; - --of-default-charcoal-dark: #111118; - --of-default-charcoal-light: #2a292f; - --of-default-grey-dark: #a5aebd; - --of-default-grey-dark-opacity: #a5aebd2e; - --of-default-grey-light: #f4f5f8; - --of-default-grey-light-opacity: #f4f5f82e; - --of-default-white: white; - --of-dark-theme: #7b7bff; - --of-light-theme: #504cff; - --of-highlight: #958eff; - --of-highlight-opacity: #958eff26; - --of-default-red: red; - --of-default-red-negative: #f55d5f; - --of-positive-green: #29af6f; - - /* Main colors to set from the above list */ - --main-background-color: var(--of-default-charcoal-dark); - --secondary-background-color: var(--of-default-black); - --tab-background-color: var(--of-default-charcoal-light); - --tab-button-hover-color: var(--of-default-grey-dark-opacity); - --tab-button-active-color: var(--of-default-grey-light-opacity); - --tab-border-top-color: var(--of-dark-theme); - --tab-border-top-highlight-color: var(--of-light-theme); - --focused-tab-border-top-color: var(--of-positive-green); - --focused-tab-border-top-highlight-color: #3cf89d; - --tab-font-color: var(--of-default-white); - --top-bar-close-button-color: var(--of-default-red); - --top-bar-close-button-active-color: var(--of-default-red-negative); - --drop-target-border-color: var(--of-highlight); - --drop-target-background-color: var(--of-highlight-opacity); - - /* Colors that default to dependent on Main Colors, but should be uniquely editable */ - --frame-background-color: var(--secondary-background-color); - --body-font-color: var(--tab-font-color); - --splitter-color: var(--secondary-background-color); - --splitter-hover-color: var(--tab-background-color); - --tabs-bar-background-color: var(--secondary-background-color); - --title-bar-background-color: var(--main-background-color); - --color-behind-views: var(--main-background-color); /* only seen if there's a problem with the view */ - --tab-background-active-color: var(--tab-background-color); - --top-bar-button-hover-color: var(--tab-background-color); - --top-bar-button-active-color: var(--tab-button-active-color); - - /* Measurements for various components */ - --title-bar-height: 30px; - --title-bar-border-bottom-height: 1px; - --header-border-bottom-height: 2px; - --corner-radius: 0px; - --splitter-width: 4px; - - --body-container-padding-top: 0px; - --body-container-padding-right: 0px; - --body-container-padding-bottom: 0px; - --body-container-padding-left: 0px; - - --body-container-width: calc( - 100% - var(--body-container-padding-left) - var(--body-container-padding-right) - ); - --body-container-height: calc( - 100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - - var(--body-container-padding-bottom) - ); - --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) - var(--body-container-padding-bottom) var(--body-container-padding-left); - - --layout-container-padding-top: 4px; - --layout-container-padding-right: 4px; - --layout-container-padding-bottom: 4px; - --layout-container-padding-left: 4px; - --layout-container-from-top: calc( - var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top) - ); - - --layout-container-width: calc( - 100% - var(--layout-container-padding-left) - var(--layout-container-padding-right) - ); - --layout-container-height: calc( - 100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - - var(--layout-container-padding-bottom) - ); - --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) - var(--layout-container-padding-bottom) var(--layout-container-padding-left); - - /* Top Bar and Tab Icons */ - --close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); - --minimize-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); - --expand-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg=='); - --tab-close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); - --new-tab-button-url: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJNQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TslXgAAADF0Uk5TAA1Zm8rs+utYJp72//WcJAmM+4oIJdTRIzHq6S8KiQ70DFaYx/lVC5kihtLPB+chLkL8Um8AAAM+SURBVHic7d3rVtNQEEDhlJZwO9xB0CAW2iAiou//dOLCpas2OTNBJtNp9n6COZ+t1T8zRUFERERERERE1FujjfFksyy3JuPtkfcsDu3s7qU/7R8ces/Tc0fHJ2mh8vTMe6Y+O3+Xlrq49J6qv95/WH5/StWV91x9dd74/meBgXwGPjZ8/n9/C4bx98Bx2/tTuvaerY92TtoByiF8CXbb35/S2Hs6+z7t5QCmN97zmbeRe39Kt97zmTfOA8y85zNvkgeYe89n3mYeoPKez7wyD1B7z2de/v0pec9nHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID3fOYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeM9nHgAAAAAAAAAAAAAAAAAAwIoDvOz/lwZe9V59v2Bh/3/0ut8vWNr/H72O9wua9v9Hr8v9gub9/9HT3y9o2/8fPe39gvb9/9FT3i/I7P+Pnup+QW7/f/RU9wuy+/+jp7hfkN//Hz3F/QJh/3/05PsFwv7/6Mn3C4T9/9GT7xcI+/+jJ98vCP//33zy/YLBA2x5j2ib/BUY/F+Cg/8Z3PYe0bY7EWC07z2jZdPPIkBx4D2kZffy+4vDNf4hrL8oAIpT7zHtetC8vzj66j2nVY/fVADFZeU9qU1P33XvL4qrtRR4+qF9//Nn4MJ72rfvUf3n/6uz6zX7LagflN//vx+C8dR76Ldreq/6/funm9vZvKq9Z//f6mo+u1P8+6+3pIG95zMPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwHs+8wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC85zMPAAAAAAAAAAAAAAAAAABgkADCqk55/3/0hPsF8v7/6An3C+T9/9ET7hfI+/+jJ9wvkPf/Ry9/v0Cz/z962fsFmv3/0cvdL9Dt/49e5n6Bbv9/9NrvF2j3/0ev7X6Bfv9/9JrvF3TZ/x+9pvsF3fb/R2/pfkH3/f/RW7hf8Lr9/9F7uV+wcvv/iYiIiIiIiGjt+wlaXmsfieItGAAAAABJRU5ErkJggg=='); + /* Colors used for dark theme */ + --of-default-black: black; + --of-default-charcoal-dark: #111118; + --of-default-charcoal-light: #2A292F; + --of-default-grey-dark: #A5AEBD; + --of-default-grey-dark-opacity: #A5AEBD2E; + --of-default-grey-light: #F4F5F8; + --of-default-grey-light-opacity: #F4F5F82E; + --of-default-white: white; + --of-dark-theme: #7B7BFF; + --of-light-theme: #504CFF; + --of-highlight: #958EFF; + --of-highlight-opacity: #958EFF26; + --of-default-red: red; + --of-default-red-negative: #F55D5F; + --of-positive-green: #29AF6F; + + /* Main colors to set from the above list */ + --main-background-color: var(--of-default-charcoal-dark); + --secondary-background-color: var(--of-default-black); + --tab-background-color: var(--of-default-charcoal-light); + --tab-button-hover-color: var(--of-default-grey-dark-opacity); + --tab-button-active-color: var(--of-default-grey-light-opacity); + --tab-border-top-color: var(--of-dark-theme); + --tab-border-top-highlight-color: var(--of-light-theme); + --focused-tab-border-top-color: var(--of-positive-green); + --focused-tab-border-top-highlight-color: #3cf89d; + --tab-font-color: var(--of-default-white); + --top-bar-close-button-color: var(--of-default-red); + --top-bar-close-button-active-color: var(--of-default-red-negative); + --drop-target-border-color: var(--of-highlight); + --drop-target-background-color: var(--of-highlight-opacity); + + /* Colors that default to dependent on Main Colors, but should be uniquely editable */ + --frame-background-color: var(--secondary-background-color); + --body-font-color: var(--tab-font-color); + --splitter-color: var(--secondary-background-color); + --splitter-hover-color: var(--tab-background-color); + --tabs-bar-background-color: var(--secondary-background-color); + --title-bar-background-color: var(--main-background-color); + --color-behind-views: var(--main-background-color); /* only seen if there's a problem with the view */ + --tab-background-active-color: var(--tab-background-color); + --top-bar-button-hover-color: var(--tab-background-color); + --top-bar-button-active-color: var(--tab-button-active-color); + + /* Measurements for various components */ + --title-bar-height: 30px; + --title-bar-border-bottom-height: 1px; + --header-border-bottom-height: 2px; + --corner-radius: 0px; + --splitter-width: 4px; + + --body-container-padding-top: 0px; + --body-container-padding-right: 0px; + --body-container-padding-bottom: 0px; + --body-container-padding-left: 0px; + + --body-container-width: calc(100% - var(--body-container-padding-left) - var(--body-container-padding-right)); + --body-container-height: calc(100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - var(--body-container-padding-bottom)); + --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) var(--body-container-padding-bottom) var(--body-container-padding-left); + + --layout-container-padding-top: 4px; + --layout-container-padding-right: 4px; + --layout-container-padding-bottom: 4px; + --layout-container-padding-left: 4px; + --layout-container-from-top: calc(var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top)); + + --layout-container-width: calc(100% - var(--layout-container-padding-left) - var(--layout-container-padding-right)); + --layout-container-height: calc(100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - var(--layout-container-padding-bottom)); + --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) var(--layout-container-padding-bottom) var(--layout-container-padding-left); + + /* Top Bar and Tab Icons */ + --close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); + --minimize-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); + --expand-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg=="); + --tab-close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); + --new-tab-button-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJNQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TslXgAAADF0Uk5TAA1Zm8rs+utYJp72//WcJAmM+4oIJdTRIzHq6S8KiQ70DFaYx/lVC5kihtLPB+chLkL8Um8AAAM+SURBVHic7d3rVtNQEEDhlJZwO9xB0CAW2iAiou//dOLCpas2OTNBJtNp9n6COZ+t1T8zRUFERERERERE1FujjfFksyy3JuPtkfcsDu3s7qU/7R8ces/Tc0fHJ2mh8vTMe6Y+O3+Xlrq49J6qv95/WH5/StWV91x9dd74/meBgXwGPjZ8/n9/C4bx98Bx2/tTuvaerY92TtoByiF8CXbb35/S2Hs6+z7t5QCmN97zmbeRe39Kt97zmTfOA8y85zNvkgeYe89n3mYeoPKez7wyD1B7z2de/v0pec9nHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID3fOYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeM9nHgAAAAAAAAAAAAAAAAAAwIoDvOz/lwZe9V59v2Bh/3/0ut8vWNr/H72O9wua9v9Hr8v9gub9/9HT3y9o2/8fPe39gvb9/9FT3i/I7P+Pnup+QW7/f/RU9wuy+/+jp7hfkN//Hz3F/QJh/3/05PsFwv7/6Mn3C4T9/9GT7xcI+/+jJ98vCP//33zy/YLBA2x5j2ib/BUY/F+Cg/8Z3PYe0bY7EWC07z2jZdPPIkBx4D2kZffy+4vDNf4hrL8oAIpT7zHtetC8vzj66j2nVY/fVADFZeU9qU1P33XvL4qrtRR4+qF9//Nn4MJ72rfvUf3n/6uz6zX7LagflN//vx+C8dR76Ldreq/6/funm9vZvKq9Z//f6mo+u1P8+6+3pIG95zMPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwHs+8wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC85zMPAAAAAAAAAAAAAAAAAABgkADCqk55/3/0hPsF8v7/6An3C+T9/9ET7hfI+/+jJ9wvkPf/Ry9/v0Cz/z962fsFmv3/0cvdL9Dt/49e5n6Bbv9/9NrvF2j3/0ev7X6Bfv9/9JrvF3TZ/x+9pvsF3fb/R2/pfkH3/f/RW7hf8Lr9/9F7uV+wcvv/iYiIiIiIiGjt+wlaXmsfieItGAAAAABJRU5ErkJggg=="); } body { - min-height: 100%; - width: 100%; - margin: 0; - padding: 0px; - overflow: hidden; - color: var(--body-font-color); - background-color: var(--main-background-color); + min-height: 100%; + width: 100%; + margin: 0; + padding: 0px; + overflow: hidden; + color: var(--body-font-color); + background-color: var(--main-background-color); } html { - height: 100%; - width: 100%; - padding: 0px; - margin: 0; - overflow: hidden; + height: 100%; + width: 100%; + padding: 0px; + margin: 0; + overflow: hidden; } -body, -select, -button, -li, -span, -div { - font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif; - color: var(--body-font-color); +body, select, button, li, span, div { + font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif; + color: var(--body-font-color); } #of-frame-main { - height: 100%; - width: 100%; - padding: 0px; - margin: 0; - position: absolute; - overflow: hidden; - background-color: var(--frame-background-color); + height: 100%; + width: 100%; + padding: 0px; + margin: 0; + position: absolute; + overflow: hidden; + background-color: var(--frame-background-color); } #title-bar { - background: var(--title-bar-background-color); - width: 100%; - height: var(--title-bar-height); - display: flex; - border-bottom: var(--title-bar-border-bottom-height) solid rgba(255, 255, 255, 0.1); + background: var(--title-bar-background-color); + width: 100%; + height: var(--title-bar-height); + display: flex; + border-bottom: var(--title-bar-border-bottom-height) solid rgba(255, 255, 255, 0.1); } .title-bar-draggable { - position: relative; - flex-grow: 1; - margin: 7px 0 0 7px; /* leave grabbable margin for resize */ - -webkit-app-region: drag; - -webkit-user-select: none; + position: relative; + flex-grow: 1; + margin: 7px 0 0 7px; /* leave grabbable margin for resize */ + -webkit-app-region: drag; + -webkit-user-select: none; } div.wrapper_title { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 3vw; - opacity: 0.5; - color: var(--tab-font-color); /* this is the text you see when a view isn't showing */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 3vw; + opacity: 0.5; + color: var(--tab-font-color); /* this is the text you see when a view isn't showing */ } div.placeholder_image { - opacity: 0.7; - color: var(--tab-background-color); + opacity: 0.7; + color: var(--tab-background-color); } div.placeholder_image img { - height: 100%; - width: 100%; - filter: blur(6px); + height: 100%; + width: 100%; + filter: blur(6px); } #buttons-wrapper { - -webkit-app-region: none; - cursor: pointer; - user-select: none; - display: flex; - justify-content: space-between; - align-items: center; + -webkit-app-region: none; + cursor: pointer; + user-select: none; + display: flex; + justify-content: space-between; + align-items: center; } .button { - -webkit-app-region: no-drag; - vertical-align: middle; - height: 100%; - width: 30px; - background-size: 14px; - background-position: center; - background-repeat: no-repeat; + -webkit-app-region: no-drag; + vertical-align: middle; + height: 100%; + width: 30px; + background-size: 14px; + background-position: center; + background-repeat: no-repeat; } .button:hover { - background-color: var(--top-bar-button-hover-color); + background-color: var(--top-bar-button-hover-color); } .button:active { - background-color: var(--top-bar-button-active-color); + background-color: var(--top-bar-button-active-color); } #close-button:hover { - background-color: var(--top-bar-close-button-color); + background-color: var(--top-bar-close-button-color); } #close-button:active { - background-color: var(--top-bar-close-button-active-color); + background-color: var(--top-bar-close-button-active-color); } #body-container { - height: var(--body-container-height); - width: var(--body-container-width); - padding: var(--body-container-padding); + height: var(--body-container-height); + width: var(--body-container-width); + padding: var(--body-container-padding); } #layout-container { - height: var(--layout-container-height); - width: var(--layout-container-width); - padding: var(--layout-container-padding); + height: var(--layout-container-height); + width: var(--layout-container-width); + padding: var(--layout-container-padding); } .lm_header .lm_tab .lm_close_tab { - background-image: var(--tab-close-button-url); - height: 14px; - width: 14px; - background-size: 12px; - background-position: center; - border-radius: 50%; - position: absolute; /* Must be absolute, otherwise we end up with overflow errors due to inline styles */ - top: 6px; - right: 6px; + background-image: var(--tab-close-button-url); + height: 14px; + width: 14px; + background-size: 12px; + background-position: center; + border-radius: 50%; + position: absolute; /* Must be absolute, otherwise we end up with overflow errors due to inline styles */ + top: 6px; + right: 6px; } .lm_header .lm_tab .lm_close_tab:hover { - background-color: var(--tab-button-hover-color); + background-color: var(--tab-button-hover-color); } .lm_header .lm_tab .lm_close_tab:active { - background-color: var(--tab-button-active-color); + background-color: var(--tab-button-active-color); } #close-button { - background-image: var(--close-button-url); + background-image: var(--close-button-url); } #expand-button { - background-image: var(--expand-button-url); + background-image: var(--expand-button-url); } #minimize-button { - background-image: var(--minimize-button-url); + background-image: var(--minimize-button-url); } .lm_goldenlayout { - background-color: var(--frame-background-color); + background-color: var(--frame-background-color); } .lm_header { - -webkit-app-region: no-drag; - box-shadow: none; - border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color); - height: 25px; - user-select: none; + -webkit-app-region: no-drag; + box-shadow: none; + border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color); + height: 25px; + user-select: none; } .lm_tabs { - -webkit-app-region: no-drag; - background-color: var(--tabs-bar-background-color); - border-top-left-radius: var(--corner-radius); - border-top-right-radius: var(--corner-radius); - width: 100%; + -webkit-app-region: no-drag; + background-color: var(--tabs-bar-background-color); + border-top-left-radius: var(--corner-radius); + border-top-right-radius: var(--corner-radius); + width: 100%; } .lm_header .lm_tab { - border-top-right-radius: var(--corner-radius); - border-top-left-radius: var(--corner-radius); - background-color: var(--tab-background-color); - color: var(--tab-font-color); - height: 100%; - margin-right: 0px; - margin-top: 0px; - white-space: nowrap; - overflow-x: hidden; + border-top-right-radius: var(--corner-radius); + border-top-left-radius: var(--corner-radius); + background-color: var(--tab-background-color); + color: var(--tab-font-color); + height: 100%; + margin-right: 0px; + margin-top: 0px; + white-space: nowrap; + overflow-x: hidden; } .lm_header .lm_tabs .lm_tab { - padding-left: 8px; - padding-top: 2px; - padding-right: 8px; - padding-bottom: 2px; - border-top: 2px solid var(--tab-background-color); - opacity: 60%; - z-index: 100 !important; /* Necessary to make sure that the controls panel doesn't appear above the tabs. This is to overwrite an inline style coming from golden-layouts. */ + padding-left: 8px; + padding-top: 2px; + padding-right: 8px; + padding-bottom: 2px; + border-top: 2px solid var(--tab-background-color); + opacity: 60%; + z-index: 100 !important; /* Necessary to make sure that the controls panel doesn't appear above the tabs. This is to overwrite an inline style coming from golden-layouts. */ } .lm_header .lm_tabs .lm_tab:hover { - border-top: 2px solid var(--tab-border-top-color); /* might be able to take this out */ - opacity: 80%; + border-top: 2px solid var(--tab-border-top-color); /* might be able to take this out */ + opacity: 80%; } .lm_header .lm_tab .lm_title { - margin-right: 10px; - line-height: 25px; - font-size: 12px; - vertical-align: middle; - padding: 0; - white-space: nowrap; - color: var(--tab-font-color); - font-weight: 300; + margin-right: 10px; + line-height: 25px; + font-size: 12px; + vertical-align: middle; + padding: 0; + white-space: nowrap; + color: var(--tab-font-color); + font-weight: 300; } .lm_title { - width: 120px; - white-space: nowrap; + width: 120px; + white-space: nowrap; } .lm_header .lm_tab.lm_active { - border-top: 2px solid var(--tab-border-top-color); - background-color: var(--tab-background-active-color); - opacity: 100%; + border-top: 2px solid var(--tab-border-top-color); + background-color: var(--tab-background-active-color); + opacity: 100%; } .lm_header .lm_tabs .lm_active:hover { - border-color: var(--tab-border-top-highlight-color); - opacity: 90%; + border-color: var(--tab-border-top-highlight-color); + opacity: 90%; } .lm_content { - background-color: var(--color-behind-views); - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; + background-color: var(--color-behind-views); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } .lm_splitter { - background-color: var(--splitter-color); - opacity: 0.001; + background-color: var(--splitter-color); + opacity: 0.001; transition: opacity 200ms ease; } .lm_splitter:hover, .lm_splitter.lm_dragging { - background-color: var(--splitter-hover-color); - opacity: 1; + background-color: var(--splitter-hover-color); + opacity: 1; } .lm_dropTargetIndicator { - box-shadow: none; - outline: none; - transition: all 200ms ease; - background: var(--drop-target-background-color); - border: 1px solid var(--drop-target-border-color); - box-sizing: border-box; - border-radius: 2px; - margin-top: 1px; + box-shadow: none; + outline: none; + transition: all 200ms ease; + background: var(--drop-target-background-color); + border: 1px solid var(--drop-target-border-color); + box-sizing: border-box; + border-radius: 2px; + margin-top: 1px; } .lm_dropTargetIndicator .lm_inner { - background: var(--tab-background-color); - opacity: 0.2; + background: var(--tab-background-color); + opacity: .2 } .lm_tabdropdown_list { - z-index: 101 !important; + z-index: 101 !important; } - + .lm_header .lm_tabdropdown_list .lm_tab { - background-color: var(--secondary-background-color); + background-color: var(--secondary-background-color); } .lm_header .lm_tabdropdown_list .lm_tab:hover { - background-color: var(--main-background-color); + background-color: var(--main-background-color); } -.lm_header .lm_controls li.lm_tabdropdown:before { - color: var(--tab-font-color); +.lm_header .lm_controls li.lm_tabdropdown:before{ + color: var(--tab-font-color) } .lm_controls li { position: relative; background-position: center center; background-repeat: no-repeat; - opacity: 0.4; - transition: opacity 300ms ease; + opacity: .4; + transition: opacity 300ms ease } .lm_controls li:hover { - opacity: 1; + opacity: 1 } .lm_controls .lm_popout { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=) } .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) } .lm_controls .lm_close { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=) } .lm_maximised .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC) } -.lm_header > .lm_tabs > .focused_tab { - border-color: var(--focused-tab-border-top-color); +.lm_header>.lm_tabs>.focused_tab { + border-color: var(--focused-tab-border-top-color); } -.lm_header > .lm_tabs > .focused_tab:hover { - border-color: var(--focused-tab-border-top-highlight-color); +.lm_header>.lm_tabs>.focused_tab:hover { + border-color: var(--focused-tab-border-top-highlight-color); } .tab-icon { - height: 12px; - width: 12px; - vertical-align: baseline; - margin-right: 7px; + height: 12px; + width: 12px; + vertical-align: baseline; + margin-right: 7px; } .lm_tabs .newTabButton { - background-image: var(--new-tab-button-url); - filter: invert(0.3); + background-image: var(--new-tab-button-url); + filter: invert(.3); background-size: cover; width: 12px; height: 12px; @@ -745,12 +726,12 @@ div.placeholder_image img { } .lm_tabs .newTabButton:hover { - filter: invert(0); + filter: invert(0); } :root.light-theme .newTabButton { - filter: invert(0.7); + filter: invert(.7); } :root.light-theme .newTabButton:hover { - filter: invert(1); -} + filter: invert(1); +} \ No newline at end of file From 57cc518dcff375c3e17fed023c91194fa492a084 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Wed, 12 Jun 2024 15:05:29 -0500 Subject: [PATCH 04/18] adding in DOM element removal since removeLayout override doesn't do it? --- how-to/web-layout/client/src/provider.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index f735e0e..ac4ca5b 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -48,7 +48,8 @@ async function attachListeners(): Promise { const removeLayoutBtn = document.querySelector("#remove-layout"); removeLayoutBtn?.addEventListener("click", async () => { console.log("[Remove Layout] Removing Layout X"); - await removeThisLayout("secondary", 1); + const currentLayout = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); + await currentLayout?.removeLayout({ layoutName: "secondary" } as OpenFin.LayoutIdentity); }); } @@ -135,7 +136,7 @@ function makeOverride(fin: OpenFin.Fin, layoutContainerId: s public async removeLayout(id: OpenFin.LayoutIdentity): Promise { const index = this.layoutMapArray.findIndex((x) => x.layoutName === id.layoutName); console.log(`[Remove Layout] Found layout at index ${index}`); - await removeThisLayout(id.layoutName, index); + await removeThisLayout(id.layoutName); } }; }; @@ -190,15 +191,18 @@ export function readLayouts(): LayoutManagerItem[] { * Click function to remove a layout by name. * @param layoutName the name of a layout. */ -export async function removeThisLayout(layoutName: string, index: number): Promise { +export async function removeThisLayout(layoutName: string): Promise { // remove layout from state. const layoutsBefore = readLayouts(); - let layoutsAfter: LayoutManagerItem[] = []; - if (layoutsBefore.length > 0) { + let layoutsRemoved: LayoutManagerItem[] = []; + const layoutNameElement = document.querySelector(`#${layoutName}`); + if (layoutsBefore.length > 0 && layoutNameElement !== null) { const idx = layoutsBefore.findIndex((x) => x.layoutName === layoutName); - layoutsAfter = layoutsBefore.splice(idx, 1); - console.log(`[Remove Layout] Removed this layout: ${JSON.stringify(layoutsAfter)}`); + layoutsRemoved = layoutsBefore.splice(idx, 1); + console.log(`[Remove Layout] Removed this layout: ${JSON.stringify(layoutsRemoved)}`); saveLayout(layoutsBefore); + console.log(`[Remove Layout] Layouts After Removal: ${JSON.stringify(layoutsBefore)}`); + layoutNameElement.remove(); } } /** From 71da15fe4902632550f474535560e03f5ff70e05 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Wed, 12 Jun 2024 16:13:53 -0500 Subject: [PATCH 05/18] updated saveLayout to attempt a re-apply. not working as expected. --- how-to/web-layout/client/src/provider.ts | 29 ++++++++++++++++++------ 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index ac4ca5b..5d98e8a 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -1,6 +1,6 @@ /* eslint-disable jsdoc/require-param */ import type OpenFin from "@openfin/core"; -import { type WebLayoutSnapshot, connect } from "@openfin/core-web"; +import { type WebLayoutSnapshot, connect, type WebLayoutOptions } from "@openfin/core-web"; import { getDefaultLayout, getSettings } from "./platform/settings"; import type { LayoutManager, LayoutManagerConstructor, LayoutManagerItem } from "./shapes/layout-shapes"; import type { Settings } from "./shapes/setting-shapes"; @@ -47,7 +47,6 @@ async function attachListeners(): Promise { const removeLayoutBtn = document.querySelector("#remove-layout"); removeLayoutBtn?.addEventListener("click", async () => { - console.log("[Remove Layout] Removing Layout X"); const currentLayout = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); await currentLayout?.removeLayout({ layoutName: "secondary" } as OpenFin.LayoutIdentity); }); @@ -135,7 +134,8 @@ function makeOverride(fin: OpenFin.Fin, layoutContainerId: s */ public async removeLayout(id: OpenFin.LayoutIdentity): Promise { const index = this.layoutMapArray.findIndex((x) => x.layoutName === id.layoutName); - console.log(`[Remove Layout] Found layout at index ${index}`); + console.log(`[LM Override] Removing Layout ${id.layoutName}`); + console.log(`[LM Override] Found layout at index ${index}`); await removeThisLayout(id.layoutName); } }; @@ -164,13 +164,28 @@ export async function swapLayout(): Promise { } } - /** * Saves the list of layout items to Local Storage. - * @param updatedLayout List of Layouts to save. + * @param updatedLayoutContents List of Layouts to save. */ -export function saveLayout(updatedLayout: LayoutManagerItem[]): void { - window.localStorage.setItem("currentLayout", JSON.stringify(updatedLayout)); +export async function saveLayout(updatedLayoutContents: LayoutManagerItem[]): Promise { + window.localStorage.setItem("[Save Layout] currentLayoutContents:", JSON.stringify(updatedLayoutContents)); + + const layoutsObj: { + [key: string]: WebLayoutOptions; // whatever type of array + } = {}; + + for (const content of updatedLayoutContents) { + layoutsObj[content.layoutName] = content.layout; + } + + const newSnap: WebLayoutSnapshot = { + layouts: {} + }; + // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style + newSnap.layouts = layoutsObj as Record; + const lm = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); + await lm?.applyLayoutSnapshot(newSnap); } /** From f0c22b485bebfe9a8af272e01d5806fccfdba3a5 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Thu, 13 Jun 2024 12:32:52 -0500 Subject: [PATCH 06/18] add function working. --- how-to/web-layout/client/src/provider.ts | 25 ++++++++++++++++--- .../public/layouts/secondary.layout.fin.json | 2 +- .../web-layout/public/platform/provider.html | 1 + 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index 5d98e8a..8a51d24 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -1,7 +1,7 @@ /* eslint-disable jsdoc/require-param */ import type OpenFin from "@openfin/core"; import { type WebLayoutSnapshot, connect, type WebLayoutOptions } from "@openfin/core-web"; -import { getDefaultLayout, getSettings } from "./platform/settings"; +import { getDefaultLayout, getSecondLayout, getSettings } from "./platform/settings"; import type { LayoutManager, LayoutManagerConstructor, LayoutManagerItem } from "./shapes/layout-shapes"; import type { Settings } from "./shapes/setting-shapes"; @@ -50,6 +50,11 @@ async function attachListeners(): Promise { const currentLayout = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); await currentLayout?.removeLayout({ layoutName: "secondary" } as OpenFin.LayoutIdentity); }); + + const addLayoutBtn = document.querySelector("#add-layout"); + addLayoutBtn?.addEventListener("click", async () => { + await addLayout(); + }); } /** @@ -172,7 +177,7 @@ export async function saveLayout(updatedLayoutContents: LayoutManagerItem[]): Pr window.localStorage.setItem("[Save Layout] currentLayoutContents:", JSON.stringify(updatedLayoutContents)); const layoutsObj: { - [key: string]: WebLayoutOptions; // whatever type of array + [key: string]: WebLayoutOptions; } = {}; for (const content of updatedLayoutContents) { @@ -201,6 +206,20 @@ export function readLayouts(): LayoutManagerItem[] { return []; } +/** + * Adds another layout. + */ +export async function addLayout(): Promise { + const secondLayoutToAdd = await getSecondLayout(); + console.log("[Add Layout] Grabbing Secondary layout file..."); + if (secondLayoutToAdd !== undefined) { + const lm = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); + console.log("[Add Layout] Adding layout"); + await lm?.applyLayoutSnapshot(secondLayoutToAdd); + } else { + console.log("[Add Layout] Error adding Layout. No Secondary Layout exists."); + } +} /** * Click function to remove a layout by name. @@ -215,7 +234,7 @@ export async function removeThisLayout(layoutName: string): Promise { const idx = layoutsBefore.findIndex((x) => x.layoutName === layoutName); layoutsRemoved = layoutsBefore.splice(idx, 1); console.log(`[Remove Layout] Removed this layout: ${JSON.stringify(layoutsRemoved)}`); - saveLayout(layoutsBefore); + await saveLayout(layoutsBefore); console.log(`[Remove Layout] Layouts After Removal: ${JSON.stringify(layoutsBefore)}`); layoutNameElement.remove(); } diff --git a/how-to/web-layout/public/layouts/secondary.layout.fin.json b/how-to/web-layout/public/layouts/secondary.layout.fin.json index 921f514..86aa772 100644 --- a/how-to/web-layout/public/layouts/secondary.layout.fin.json +++ b/how-to/web-layout/public/layouts/secondary.layout.fin.json @@ -1,6 +1,6 @@ { "layouts": { - "default": { + "new": { "content": [ { "type": "row", diff --git a/how-to/web-layout/public/platform/provider.html b/how-to/web-layout/public/platform/provider.html index 41c92cd..f3ec295 100644 --- a/how-to/web-layout/public/platform/provider.html +++ b/how-to/web-layout/public/platform/provider.html @@ -19,6 +19,7 @@

Web Multiple Layout Example

Demonstrate web interop usage with multiple layouts

+ OpenFin From 6ee1c4ae0da78b450bf945b8f9bfc614f6ad1d87 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Thu, 13 Jun 2024 12:44:01 -0500 Subject: [PATCH 07/18] removing unnecessary call to apply after saving state. --- how-to/web-layout/client/src/provider.ts | 26 ++++++++++++------------ 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index 8a51d24..c1e79c2 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -176,21 +176,21 @@ export async function swapLayout(): Promise { export async function saveLayout(updatedLayoutContents: LayoutManagerItem[]): Promise { window.localStorage.setItem("[Save Layout] currentLayoutContents:", JSON.stringify(updatedLayoutContents)); - const layoutsObj: { - [key: string]: WebLayoutOptions; - } = {}; + // const layoutsObj: { + // [key: string]: WebLayoutOptions; + // } = {}; - for (const content of updatedLayoutContents) { - layoutsObj[content.layoutName] = content.layout; - } + // for (const content of updatedLayoutContents) { + // layoutsObj[content.layoutName] = content.layout; + // } - const newSnap: WebLayoutSnapshot = { - layouts: {} - }; - // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style - newSnap.layouts = layoutsObj as Record; - const lm = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); - await lm?.applyLayoutSnapshot(newSnap); + // const newSnap: WebLayoutSnapshot = { + // layouts: {} + // }; + // // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style + // newSnap.layouts = layoutsObj as Record; + // const lm = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); + // await lm?.applyLayoutSnapshot(newSnap); } /** From 855f66a325c3535cc3e865a3af1e203d40ca6d3f Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Thu, 13 Jun 2024 12:53:40 -0500 Subject: [PATCH 08/18] linting changes. --- how-to/web-layout/client/src/provider.ts | 2 +- .../public/style/core-web-styles.css | 857 +++++++++--------- 2 files changed, 439 insertions(+), 420 deletions(-) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index c1e79c2..4199440 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -1,6 +1,6 @@ /* eslint-disable jsdoc/require-param */ import type OpenFin from "@openfin/core"; -import { type WebLayoutSnapshot, connect, type WebLayoutOptions } from "@openfin/core-web"; +import { type WebLayoutSnapshot, connect } from "@openfin/core-web"; import { getDefaultLayout, getSecondLayout, getSettings } from "./platform/settings"; import type { LayoutManager, LayoutManagerConstructor, LayoutManagerItem } from "./shapes/layout-shapes"; import type { Settings } from "./shapes/setting-shapes"; diff --git a/how-to/web-layout/public/style/core-web-styles.css b/how-to/web-layout/public/style/core-web-styles.css index d5bf42b..b760446 100644 --- a/how-to/web-layout/public/style/core-web-styles.css +++ b/how-to/web-layout/public/style/core-web-styles.css @@ -1,722 +1,741 @@ .lm_root { - position: relative; + position: relative; } .lm_row > .lm_item { - float: left; + float: left; } .lm_content { - overflow: hidden; - position: relative; + overflow: hidden; + position: relative; } .lm_dragging, .lm_dragging * { - cursor: move !important; - -webkit-user-select: none; - user-select: none; + cursor: move !important; + -webkit-user-select: none; + user-select: none; } .lm_maximised { - position: absolute; - top: 0; - left: 0; - z-index: 40; + position: absolute; + top: 0; + left: 0; + z-index: 40; } .lm_maximise_placeholder { - display: none; + display: none; } .lm_splitter { - position: relative; - z-index: 2; - touch-action: none; + position: relative; + z-index: 2; + touch-action: none; } .lm_splitter.lm_vertical .lm_drag_handle { - width: 100%; - position: absolute; - cursor: ns-resize; - touch-action: none; - -webkit-user-select: none; - user-select: none; + width: 100%; + position: absolute; + cursor: ns-resize; + touch-action: none; + -webkit-user-select: none; + user-select: none; } .lm_splitter.lm_horizontal { - float: left; - height: 100%; + float: left; + height: 100%; } .lm_splitter.lm_horizontal .lm_drag_handle { - height: 100%; - position: absolute; - cursor: ew-resize; - touch-action: none; - -webkit-user-select: none; - user-select: none; + height: 100%; + position: absolute; + cursor: ew-resize; + touch-action: none; + -webkit-user-select: none; + user-select: none; } .lm_header { - overflow: visible; - position: relative; - z-index: 1; - -webkit-user-select: none; - user-select: none; + overflow: visible; + position: relative; + z-index: 1; + -webkit-user-select: none; + user-select: none; } -.lm_header [class^=lm_] { - box-sizing: content-box !important; +.lm_header [class^='lm_'] { + box-sizing: content-box !important; } .lm_header .lm_controls { - position: absolute; - right: 3px; - display: flex; + position: absolute; + right: 3px; + display: flex; } .lm_header .lm_controls > * { - cursor: pointer; - float: left; - width: 18px; - height: 18px; - text-align: center; + cursor: pointer; + float: left; + width: 18px; + height: 18px; + text-align: center; } .lm_header .lm_tabs { - position: absolute; - display: flex; + position: absolute; + display: flex; } .lm_header .lm_tab { - cursor: pointer; - float: left; - height: 14px; - margin-top: 1px; - padding: 0px 10px 5px; - padding-right: 25px; - position: relative; - touch-action: none; + cursor: pointer; + float: left; + height: 14px; + margin-top: 1px; + padding: 0px 10px 5px; + padding-right: 25px; + position: relative; + touch-action: none; } .lm_header .lm_tab i { - width: 2px; - height: 19px; - position: absolute; + width: 2px; + height: 19px; + position: absolute; } .lm_header .lm_tab i.lm_left { - top: 0; - left: -2px; + top: 0; + left: -2px; } .lm_header .lm_tab i.lm_right { - top: 0; - right: -2px; + top: 0; + right: -2px; } .lm_header .lm_tab .lm_title { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; } .lm_header .lm_tab .lm_close_tab { - width: 14px; - height: 14px; - position: absolute; - top: 0; - right: 0; - text-align: center; + width: 14px; + height: 14px; + position: absolute; + top: 0; + right: 0; + text-align: center; } .lm_stack { - position: relative; + position: relative; } .lm_stack > .lm_items { - overflow: hidden; + overflow: hidden; } .lm_stack.lm_left > .lm_items { - position: absolute; - left: 20px; - top: 0; + position: absolute; + left: 20px; + top: 0; } .lm_stack.lm_right > .lm_items { - position: absolute; - right: 20px; - top: 0; + position: absolute; + right: 20px; + top: 0; } .lm_stack.lm_right > .lm_header { - position: absolute; - right: 0; - top: 0; + position: absolute; + right: 0; + top: 0; } .lm_stack.lm_bottom > .lm_items { - position: absolute; - bottom: 20px; + position: absolute; + bottom: 20px; } .lm_stack.lm_bottom > .lm_header { - position: absolute; - bottom: 0; + position: absolute; + bottom: 0; } .lm_left.lm_stack .lm_header, .lm_right.lm_stack .lm_header { - height: 100%; + height: 100%; } .lm_left.lm_dragProxy .lm_header, .lm_right.lm_dragProxy .lm_header, .lm_left.lm_dragProxy .lm_items, .lm_right.lm_dragProxy .lm_items { - float: left; + float: left; } .lm_left.lm_dragProxy .lm_header, .lm_right.lm_dragProxy .lm_header, .lm_left.lm_stack .lm_header, .lm_right.lm_stack .lm_header { - width: 20px; - vertical-align: top; + width: 20px; + vertical-align: top; } .lm_left.lm_dragProxy .lm_header .lm_tabs, .lm_right.lm_dragProxy .lm_header .lm_tabs, .lm_left.lm_stack .lm_header .lm_tabs, .lm_right.lm_stack .lm_header .lm_tabs { - transform-origin: left top; - top: 0; - width: 1000px; - /*hack*/ + transform-origin: left top; + top: 0; + width: 1000px; + /*hack*/ } .lm_left.lm_dragProxy .lm_header .lm_controls, .lm_right.lm_dragProxy .lm_header .lm_controls, .lm_left.lm_stack .lm_header .lm_controls, .lm_right.lm_stack .lm_header .lm_controls { - bottom: 0; - flex-flow: column; + bottom: 0; + flex-flow: column; } .lm_dragProxy.lm_left .lm_header .lm_tabs, .lm_stack.lm_left .lm_header .lm_tabs { - transform: rotate(-90deg) scaleX(-1); - left: 0; + transform: rotate(-90deg) scaleX(-1); + left: 0; } .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab, .lm_stack.lm_left .lm_header .lm_tabs .lm_tab { - transform: scaleX(-1); - margin-top: 1px; + transform: scaleX(-1); + margin-top: 1px; } .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list, .lm_stack.lm_left .lm_header .lm_tabdropdown_list { - top: initial; - right: initial; - left: 20px; + top: initial; + right: initial; + left: 20px; } .lm_dragProxy.lm_right .lm_content { - float: left; + float: left; } .lm_dragProxy.lm_right .lm_header .lm_tabs, .lm_stack.lm_right .lm_header .lm_tabs { - transform: rotate(90deg) scaleX(1); - left: 100%; - margin-left: 0; + transform: rotate(90deg) scaleX(1); + left: 100%; + margin-left: 0; } .lm_dragProxy.lm_right .lm_header .lm_controls, .lm_stack.lm_right .lm_header .lm_controls { - left: 3px; + left: 3px; } .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list, .lm_stack.lm_right .lm_header .lm_tabdropdown_list { - top: initial; - right: 20px; + top: initial; + right: 20px; } .lm_dragProxy.lm_bottom .lm_header, .lm_stack.lm_bottom .lm_header { - width: 100%; + width: 100%; } .lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab { - margin-top: 0; - border-top: none; + margin-top: 0; + border-top: none; } .lm_dragProxy.lm_bottom .lm_header .lm_controls, .lm_stack.lm_bottom .lm_header .lm_controls { - top: 3px; + top: 3px; } .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list, .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list { - top: initial; - bottom: 20px; + top: initial; + bottom: 20px; } .lm_drop_tab_placeholder { - float: left; - width: 100px; - visibility: hidden; + float: left; + width: 100px; + visibility: hidden; } .lm_header .lm_controls .lm_tabdropdown:before { - content: ''; - width: 0; - height: 0; - vertical-align: middle; - display: inline-block; - border-top: 5px dashed; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - color: white; + content: ''; + width: 0; + height: 0; + vertical-align: middle; + display: inline-block; + border-top: 5px dashed; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + color: white; } .lm_header .lm_tabdropdown_list { - position: absolute; - top: 20px; - right: 0; - z-index: 5; - overflow: hidden; + position: absolute; + top: 20px; + right: 0; + z-index: 5; + overflow: hidden; } .lm_header .lm_tabdropdown_list .lm_tab { - clear: both; - padding-right: 10px; - margin: 0; + clear: both; + padding-right: 10px; + margin: 0; } .lm_header .lm_tabdropdown_list .lm_tab .lm_title { - width: 100px; + width: 100px; } .lm_header .lm_tabdropdown_list .lm_close_tab { - display: none !important; + display: none !important; } /*********************************** * Drag Proxy ***********************************/ .lm_dragProxy { - position: absolute; - top: 0; - left: 0; - z-index: 30; + position: absolute; + top: 0; + left: 0; + z-index: 30; } .lm_dragProxy .lm_header { - background: transparent; + background: transparent; } .lm_dragProxy .lm_content { - border-top: none; - overflow: hidden; + border-top: none; + overflow: hidden; } .lm_dropTargetIndicator { - display: none; - position: absolute; - z-index: 35; - transition: all 200ms ease; + display: none; + position: absolute; + z-index: 35; + transition: all 200ms ease; } .lm_dropTargetIndicator .lm_inner { - width: 100%; - height: 100%; - position: relative; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: relative; + top: 0; + left: 0; } .lm_transition_indicator { - display: none; - width: 20px; - height: 20px; - position: absolute; - top: 0; - left: 0; - z-index: 20; + display: none; + width: 20px; + height: 20px; + position: absolute; + top: 0; + left: 0; + z-index: 20; } .lm_popin { - width: 20px; - height: 20px; - position: absolute; - bottom: 0; - right: 0; - z-index: 9999; + width: 20px; + height: 20px; + position: absolute; + bottom: 0; + right: 0; + z-index: 9999; } .lm_popin > * { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; } .lm_popin > .lm_bg { - z-index: 10; + z-index: 10; } .lm_popin > .lm_icon { - z-index: 20; + z-index: 20; } :root { - /* Colors used for dark theme */ - --of-default-black: black; - --of-default-charcoal-dark: #111118; - --of-default-charcoal-light: #2A292F; - --of-default-grey-dark: #A5AEBD; - --of-default-grey-dark-opacity: #A5AEBD2E; - --of-default-grey-light: #F4F5F8; - --of-default-grey-light-opacity: #F4F5F82E; - --of-default-white: white; - --of-dark-theme: #7B7BFF; - --of-light-theme: #504CFF; - --of-highlight: #958EFF; - --of-highlight-opacity: #958EFF26; - --of-default-red: red; - --of-default-red-negative: #F55D5F; - --of-positive-green: #29AF6F; - - /* Main colors to set from the above list */ - --main-background-color: var(--of-default-charcoal-dark); - --secondary-background-color: var(--of-default-black); - --tab-background-color: var(--of-default-charcoal-light); - --tab-button-hover-color: var(--of-default-grey-dark-opacity); - --tab-button-active-color: var(--of-default-grey-light-opacity); - --tab-border-top-color: var(--of-dark-theme); - --tab-border-top-highlight-color: var(--of-light-theme); - --focused-tab-border-top-color: var(--of-positive-green); - --focused-tab-border-top-highlight-color: #3cf89d; - --tab-font-color: var(--of-default-white); - --top-bar-close-button-color: var(--of-default-red); - --top-bar-close-button-active-color: var(--of-default-red-negative); - --drop-target-border-color: var(--of-highlight); - --drop-target-background-color: var(--of-highlight-opacity); - - /* Colors that default to dependent on Main Colors, but should be uniquely editable */ - --frame-background-color: var(--secondary-background-color); - --body-font-color: var(--tab-font-color); - --splitter-color: var(--secondary-background-color); - --splitter-hover-color: var(--tab-background-color); - --tabs-bar-background-color: var(--secondary-background-color); - --title-bar-background-color: var(--main-background-color); - --color-behind-views: var(--main-background-color); /* only seen if there's a problem with the view */ - --tab-background-active-color: var(--tab-background-color); - --top-bar-button-hover-color: var(--tab-background-color); - --top-bar-button-active-color: var(--tab-button-active-color); - - /* Measurements for various components */ - --title-bar-height: 30px; - --title-bar-border-bottom-height: 1px; - --header-border-bottom-height: 2px; - --corner-radius: 0px; - --splitter-width: 4px; - - --body-container-padding-top: 0px; - --body-container-padding-right: 0px; - --body-container-padding-bottom: 0px; - --body-container-padding-left: 0px; - - --body-container-width: calc(100% - var(--body-container-padding-left) - var(--body-container-padding-right)); - --body-container-height: calc(100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - var(--body-container-padding-bottom)); - --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) var(--body-container-padding-bottom) var(--body-container-padding-left); - - --layout-container-padding-top: 4px; - --layout-container-padding-right: 4px; - --layout-container-padding-bottom: 4px; - --layout-container-padding-left: 4px; - --layout-container-from-top: calc(var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top)); - - --layout-container-width: calc(100% - var(--layout-container-padding-left) - var(--layout-container-padding-right)); - --layout-container-height: calc(100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - var(--layout-container-padding-bottom)); - --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) var(--layout-container-padding-bottom) var(--layout-container-padding-left); - - /* Top Bar and Tab Icons */ - --close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); - --minimize-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); - --expand-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg=="); - --tab-close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); - --new-tab-button-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJNQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TslXgAAADF0Uk5TAA1Zm8rs+utYJp72//WcJAmM+4oIJdTRIzHq6S8KiQ70DFaYx/lVC5kihtLPB+chLkL8Um8AAAM+SURBVHic7d3rVtNQEEDhlJZwO9xB0CAW2iAiou//dOLCpas2OTNBJtNp9n6COZ+t1T8zRUFERERERERE1FujjfFksyy3JuPtkfcsDu3s7qU/7R8ces/Tc0fHJ2mh8vTMe6Y+O3+Xlrq49J6qv95/WH5/StWV91x9dd74/meBgXwGPjZ8/n9/C4bx98Bx2/tTuvaerY92TtoByiF8CXbb35/S2Hs6+z7t5QCmN97zmbeRe39Kt97zmTfOA8y85zNvkgeYe89n3mYeoPKez7wyD1B7z2de/v0pec9nHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID3fOYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeM9nHgAAAAAAAAAAAAAAAAAAwIoDvOz/lwZe9V59v2Bh/3/0ut8vWNr/H72O9wua9v9Hr8v9gub9/9HT3y9o2/8fPe39gvb9/9FT3i/I7P+Pnup+QW7/f/RU9wuy+/+jp7hfkN//Hz3F/QJh/3/05PsFwv7/6Mn3C4T9/9GT7xcI+/+jJ98vCP//33zy/YLBA2x5j2ib/BUY/F+Cg/8Z3PYe0bY7EWC07z2jZdPPIkBx4D2kZffy+4vDNf4hrL8oAIpT7zHtetC8vzj66j2nVY/fVADFZeU9qU1P33XvL4qrtRR4+qF9//Nn4MJ72rfvUf3n/6uz6zX7LagflN//vx+C8dR76Ldreq/6/funm9vZvKq9Z//f6mo+u1P8+6+3pIG95zMPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwHs+8wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC85zMPAAAAAAAAAAAAAAAAAABgkADCqk55/3/0hPsF8v7/6An3C+T9/9ET7hfI+/+jJ9wvkPf/Ry9/v0Cz/z962fsFmv3/0cvdL9Dt/49e5n6Bbv9/9NrvF2j3/0ev7X6Bfv9/9JrvF3TZ/x+9pvsF3fb/R2/pfkH3/f/RW7hf8Lr9/9F7uV+wcvv/iYiIiIiIiGjt+wlaXmsfieItGAAAAABJRU5ErkJggg=="); + /* Colors used for dark theme */ + --of-default-black: black; + --of-default-charcoal-dark: #111118; + --of-default-charcoal-light: #2a292f; + --of-default-grey-dark: #a5aebd; + --of-default-grey-dark-opacity: #a5aebd2e; + --of-default-grey-light: #f4f5f8; + --of-default-grey-light-opacity: #f4f5f82e; + --of-default-white: white; + --of-dark-theme: #7b7bff; + --of-light-theme: #504cff; + --of-highlight: #958eff; + --of-highlight-opacity: #958eff26; + --of-default-red: red; + --of-default-red-negative: #f55d5f; + --of-positive-green: #29af6f; + + /* Main colors to set from the above list */ + --main-background-color: var(--of-default-charcoal-dark); + --secondary-background-color: var(--of-default-black); + --tab-background-color: var(--of-default-charcoal-light); + --tab-button-hover-color: var(--of-default-grey-dark-opacity); + --tab-button-active-color: var(--of-default-grey-light-opacity); + --tab-border-top-color: var(--of-dark-theme); + --tab-border-top-highlight-color: var(--of-light-theme); + --focused-tab-border-top-color: var(--of-positive-green); + --focused-tab-border-top-highlight-color: #3cf89d; + --tab-font-color: var(--of-default-white); + --top-bar-close-button-color: var(--of-default-red); + --top-bar-close-button-active-color: var(--of-default-red-negative); + --drop-target-border-color: var(--of-highlight); + --drop-target-background-color: var(--of-highlight-opacity); + + /* Colors that default to dependent on Main Colors, but should be uniquely editable */ + --frame-background-color: var(--secondary-background-color); + --body-font-color: var(--tab-font-color); + --splitter-color: var(--secondary-background-color); + --splitter-hover-color: var(--tab-background-color); + --tabs-bar-background-color: var(--secondary-background-color); + --title-bar-background-color: var(--main-background-color); + --color-behind-views: var(--main-background-color); /* only seen if there's a problem with the view */ + --tab-background-active-color: var(--tab-background-color); + --top-bar-button-hover-color: var(--tab-background-color); + --top-bar-button-active-color: var(--tab-button-active-color); + + /* Measurements for various components */ + --title-bar-height: 30px; + --title-bar-border-bottom-height: 1px; + --header-border-bottom-height: 2px; + --corner-radius: 0px; + --splitter-width: 4px; + + --body-container-padding-top: 0px; + --body-container-padding-right: 0px; + --body-container-padding-bottom: 0px; + --body-container-padding-left: 0px; + + --body-container-width: calc( + 100% - var(--body-container-padding-left) - var(--body-container-padding-right) + ); + --body-container-height: calc( + 100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - + var(--body-container-padding-bottom) + ); + --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) + var(--body-container-padding-bottom) var(--body-container-padding-left); + + --layout-container-padding-top: 4px; + --layout-container-padding-right: 4px; + --layout-container-padding-bottom: 4px; + --layout-container-padding-left: 4px; + --layout-container-from-top: calc( + var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top) + ); + + --layout-container-width: calc( + 100% - var(--layout-container-padding-left) - var(--layout-container-padding-right) + ); + --layout-container-height: calc( + 100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - + var(--layout-container-padding-bottom) + ); + --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) + var(--layout-container-padding-bottom) var(--layout-container-padding-left); + + /* Top Bar and Tab Icons */ + --close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); + --minimize-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); + --expand-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg=='); + --tab-close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); + --new-tab-button-url: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJNQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TslXgAAADF0Uk5TAA1Zm8rs+utYJp72//WcJAmM+4oIJdTRIzHq6S8KiQ70DFaYx/lVC5kihtLPB+chLkL8Um8AAAM+SURBVHic7d3rVtNQEEDhlJZwO9xB0CAW2iAiou//dOLCpas2OTNBJtNp9n6COZ+t1T8zRUFERERERERE1FujjfFksyy3JuPtkfcsDu3s7qU/7R8ces/Tc0fHJ2mh8vTMe6Y+O3+Xlrq49J6qv95/WH5/StWV91x9dd74/meBgXwGPjZ8/n9/C4bx98Bx2/tTuvaerY92TtoByiF8CXbb35/S2Hs6+z7t5QCmN97zmbeRe39Kt97zmTfOA8y85zNvkgeYe89n3mYeoPKez7wyD1B7z2de/v0pec9nHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID3fOYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeM9nHgAAAAAAAAAAAAAAAAAAwIoDvOz/lwZe9V59v2Bh/3/0ut8vWNr/H72O9wua9v9Hr8v9gub9/9HT3y9o2/8fPe39gvb9/9FT3i/I7P+Pnup+QW7/f/RU9wuy+/+jp7hfkN//Hz3F/QJh/3/05PsFwv7/6Mn3C4T9/9GT7xcI+/+jJ98vCP//33zy/YLBA2x5j2ib/BUY/F+Cg/8Z3PYe0bY7EWC07z2jZdPPIkBx4D2kZffy+4vDNf4hrL8oAIpT7zHtetC8vzj66j2nVY/fVADFZeU9qU1P33XvL4qrtRR4+qF9//Nn4MJ72rfvUf3n/6uz6zX7LagflN//vx+C8dR76Ldreq/6/funm9vZvKq9Z//f6mo+u1P8+6+3pIG95zMPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwHs+8wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC85zMPAAAAAAAAAAAAAAAAAABgkADCqk55/3/0hPsF8v7/6An3C+T9/9ET7hfI+/+jJ9wvkPf/Ry9/v0Cz/z962fsFmv3/0cvdL9Dt/49e5n6Bbv9/9NrvF2j3/0ev7X6Bfv9/9JrvF3TZ/x+9pvsF3fb/R2/pfkH3/f/RW7hf8Lr9/9F7uV+wcvv/iYiIiIiIiGjt+wlaXmsfieItGAAAAABJRU5ErkJggg=='); } body { - min-height: 100%; - width: 100%; - margin: 0; - padding: 0px; - overflow: hidden; - color: var(--body-font-color); - background-color: var(--main-background-color); + min-height: 100%; + width: 100%; + margin: 0; + padding: 0px; + overflow: hidden; + color: var(--body-font-color); + background-color: var(--main-background-color); } html { - height: 100%; - width: 100%; - padding: 0px; - margin: 0; - overflow: hidden; + height: 100%; + width: 100%; + padding: 0px; + margin: 0; + overflow: hidden; } -body, select, button, li, span, div { - font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif; - color: var(--body-font-color); +body, +select, +button, +li, +span, +div { + font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif; + color: var(--body-font-color); } #of-frame-main { - height: 100%; - width: 100%; - padding: 0px; - margin: 0; - position: absolute; - overflow: hidden; - background-color: var(--frame-background-color); + height: 100%; + width: 100%; + padding: 0px; + margin: 0; + position: absolute; + overflow: hidden; + background-color: var(--frame-background-color); } #title-bar { - background: var(--title-bar-background-color); - width: 100%; - height: var(--title-bar-height); - display: flex; - border-bottom: var(--title-bar-border-bottom-height) solid rgba(255, 255, 255, 0.1); + background: var(--title-bar-background-color); + width: 100%; + height: var(--title-bar-height); + display: flex; + border-bottom: var(--title-bar-border-bottom-height) solid rgba(255, 255, 255, 0.1); } .title-bar-draggable { - position: relative; - flex-grow: 1; - margin: 7px 0 0 7px; /* leave grabbable margin for resize */ - -webkit-app-region: drag; - -webkit-user-select: none; + position: relative; + flex-grow: 1; + margin: 7px 0 0 7px; /* leave grabbable margin for resize */ + -webkit-app-region: drag; + -webkit-user-select: none; } div.wrapper_title { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 3vw; - opacity: 0.5; - color: var(--tab-font-color); /* this is the text you see when a view isn't showing */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 3vw; + opacity: 0.5; + color: var(--tab-font-color); /* this is the text you see when a view isn't showing */ } div.placeholder_image { - opacity: 0.7; - color: var(--tab-background-color); + opacity: 0.7; + color: var(--tab-background-color); } div.placeholder_image img { - height: 100%; - width: 100%; - filter: blur(6px); + height: 100%; + width: 100%; + filter: blur(6px); } #buttons-wrapper { - -webkit-app-region: none; - cursor: pointer; - user-select: none; - display: flex; - justify-content: space-between; - align-items: center; + -webkit-app-region: none; + cursor: pointer; + user-select: none; + display: flex; + justify-content: space-between; + align-items: center; } .button { - -webkit-app-region: no-drag; - vertical-align: middle; - height: 100%; - width: 30px; - background-size: 14px; - background-position: center; - background-repeat: no-repeat; + -webkit-app-region: no-drag; + vertical-align: middle; + height: 100%; + width: 30px; + background-size: 14px; + background-position: center; + background-repeat: no-repeat; } .button:hover { - background-color: var(--top-bar-button-hover-color); + background-color: var(--top-bar-button-hover-color); } .button:active { - background-color: var(--top-bar-button-active-color); + background-color: var(--top-bar-button-active-color); } #close-button:hover { - background-color: var(--top-bar-close-button-color); + background-color: var(--top-bar-close-button-color); } #close-button:active { - background-color: var(--top-bar-close-button-active-color); + background-color: var(--top-bar-close-button-active-color); } #body-container { - height: var(--body-container-height); - width: var(--body-container-width); - padding: var(--body-container-padding); + height: var(--body-container-height); + width: var(--body-container-width); + padding: var(--body-container-padding); } #layout-container { - height: var(--layout-container-height); - width: var(--layout-container-width); - padding: var(--layout-container-padding); + height: var(--layout-container-height); + width: var(--layout-container-width); + padding: var(--layout-container-padding); } .lm_header .lm_tab .lm_close_tab { - background-image: var(--tab-close-button-url); - height: 14px; - width: 14px; - background-size: 12px; - background-position: center; - border-radius: 50%; - position: absolute; /* Must be absolute, otherwise we end up with overflow errors due to inline styles */ - top: 6px; - right: 6px; + background-image: var(--tab-close-button-url); + height: 14px; + width: 14px; + background-size: 12px; + background-position: center; + border-radius: 50%; + position: absolute; /* Must be absolute, otherwise we end up with overflow errors due to inline styles */ + top: 6px; + right: 6px; } .lm_header .lm_tab .lm_close_tab:hover { - background-color: var(--tab-button-hover-color); + background-color: var(--tab-button-hover-color); } .lm_header .lm_tab .lm_close_tab:active { - background-color: var(--tab-button-active-color); + background-color: var(--tab-button-active-color); } #close-button { - background-image: var(--close-button-url); + background-image: var(--close-button-url); } #expand-button { - background-image: var(--expand-button-url); + background-image: var(--expand-button-url); } #minimize-button { - background-image: var(--minimize-button-url); + background-image: var(--minimize-button-url); } .lm_goldenlayout { - background-color: var(--frame-background-color); + background-color: var(--frame-background-color); } .lm_header { - -webkit-app-region: no-drag; - box-shadow: none; - border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color); - height: 25px; - user-select: none; + -webkit-app-region: no-drag; + box-shadow: none; + border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color); + height: 25px; + user-select: none; } .lm_tabs { - -webkit-app-region: no-drag; - background-color: var(--tabs-bar-background-color); - border-top-left-radius: var(--corner-radius); - border-top-right-radius: var(--corner-radius); - width: 100%; + -webkit-app-region: no-drag; + background-color: var(--tabs-bar-background-color); + border-top-left-radius: var(--corner-radius); + border-top-right-radius: var(--corner-radius); + width: 100%; } .lm_header .lm_tab { - border-top-right-radius: var(--corner-radius); - border-top-left-radius: var(--corner-radius); - background-color: var(--tab-background-color); - color: var(--tab-font-color); - height: 100%; - margin-right: 0px; - margin-top: 0px; - white-space: nowrap; - overflow-x: hidden; + border-top-right-radius: var(--corner-radius); + border-top-left-radius: var(--corner-radius); + background-color: var(--tab-background-color); + color: var(--tab-font-color); + height: 100%; + margin-right: 0px; + margin-top: 0px; + white-space: nowrap; + overflow-x: hidden; } .lm_header .lm_tabs .lm_tab { - padding-left: 8px; - padding-top: 2px; - padding-right: 8px; - padding-bottom: 2px; - border-top: 2px solid var(--tab-background-color); - opacity: 60%; - z-index: 100 !important; /* Necessary to make sure that the controls panel doesn't appear above the tabs. This is to overwrite an inline style coming from golden-layouts. */ + padding-left: 8px; + padding-top: 2px; + padding-right: 8px; + padding-bottom: 2px; + border-top: 2px solid var(--tab-background-color); + opacity: 60%; + z-index: 100 !important; /* Necessary to make sure that the controls panel doesn't appear above the tabs. This is to overwrite an inline style coming from golden-layouts. */ } .lm_header .lm_tabs .lm_tab:hover { - border-top: 2px solid var(--tab-border-top-color); /* might be able to take this out */ - opacity: 80%; + border-top: 2px solid var(--tab-border-top-color); /* might be able to take this out */ + opacity: 80%; } .lm_header .lm_tab .lm_title { - margin-right: 10px; - line-height: 25px; - font-size: 12px; - vertical-align: middle; - padding: 0; - white-space: nowrap; - color: var(--tab-font-color); - font-weight: 300; + margin-right: 10px; + line-height: 25px; + font-size: 12px; + vertical-align: middle; + padding: 0; + white-space: nowrap; + color: var(--tab-font-color); + font-weight: 300; } .lm_title { - width: 120px; - white-space: nowrap; + width: 120px; + white-space: nowrap; } .lm_header .lm_tab.lm_active { - border-top: 2px solid var(--tab-border-top-color); - background-color: var(--tab-background-active-color); - opacity: 100%; + border-top: 2px solid var(--tab-border-top-color); + background-color: var(--tab-background-active-color); + opacity: 100%; } .lm_header .lm_tabs .lm_active:hover { - border-color: var(--tab-border-top-highlight-color); - opacity: 90%; + border-color: var(--tab-border-top-highlight-color); + opacity: 90%; } .lm_content { - background-color: var(--color-behind-views); - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; + background-color: var(--color-behind-views); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } .lm_splitter { - background-color: var(--splitter-color); - opacity: 0.001; + background-color: var(--splitter-color); + opacity: 0.001; transition: opacity 200ms ease; } .lm_splitter:hover, .lm_splitter.lm_dragging { - background-color: var(--splitter-hover-color); - opacity: 1; + background-color: var(--splitter-hover-color); + opacity: 1; } .lm_dropTargetIndicator { - box-shadow: none; - outline: none; - transition: all 200ms ease; - background: var(--drop-target-background-color); - border: 1px solid var(--drop-target-border-color); - box-sizing: border-box; - border-radius: 2px; - margin-top: 1px; + box-shadow: none; + outline: none; + transition: all 200ms ease; + background: var(--drop-target-background-color); + border: 1px solid var(--drop-target-border-color); + box-sizing: border-box; + border-radius: 2px; + margin-top: 1px; } .lm_dropTargetIndicator .lm_inner { - background: var(--tab-background-color); - opacity: .2 + background: var(--tab-background-color); + opacity: 0.2; } .lm_tabdropdown_list { - z-index: 101 !important; + z-index: 101 !important; } - + .lm_header .lm_tabdropdown_list .lm_tab { - background-color: var(--secondary-background-color); + background-color: var(--secondary-background-color); } .lm_header .lm_tabdropdown_list .lm_tab:hover { - background-color: var(--main-background-color); + background-color: var(--main-background-color); } -.lm_header .lm_controls li.lm_tabdropdown:before{ - color: var(--tab-font-color) +.lm_header .lm_controls li.lm_tabdropdown:before { + color: var(--tab-font-color); } .lm_controls li { position: relative; background-position: center center; background-repeat: no-repeat; - opacity: .4; - transition: opacity 300ms ease + opacity: 0.4; + transition: opacity 300ms ease; } .lm_controls li:hover { - opacity: 1 + opacity: 1; } .lm_controls .lm_popout { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=) + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=); } .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); } .lm_controls .lm_close { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=) + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); } .lm_maximised .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC) + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); } -.lm_header>.lm_tabs>.focused_tab { - border-color: var(--focused-tab-border-top-color); +.lm_header > .lm_tabs > .focused_tab { + border-color: var(--focused-tab-border-top-color); } -.lm_header>.lm_tabs>.focused_tab:hover { - border-color: var(--focused-tab-border-top-highlight-color); +.lm_header > .lm_tabs > .focused_tab:hover { + border-color: var(--focused-tab-border-top-highlight-color); } .tab-icon { - height: 12px; - width: 12px; - vertical-align: baseline; - margin-right: 7px; + height: 12px; + width: 12px; + vertical-align: baseline; + margin-right: 7px; } .lm_tabs .newTabButton { - background-image: var(--new-tab-button-url); - filter: invert(.3); + background-image: var(--new-tab-button-url); + filter: invert(0.3); background-size: cover; width: 12px; height: 12px; @@ -726,12 +745,12 @@ div.placeholder_image img { } .lm_tabs .newTabButton:hover { - filter: invert(0); + filter: invert(0); } :root.light-theme .newTabButton { - filter: invert(.7); + filter: invert(0.7); } :root.light-theme .newTabButton:hover { - filter: invert(1); -} \ No newline at end of file + filter: invert(1); +} From b892c97d1ce211a208346a4bfc251ce5f37dc4ed Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Tue, 18 Jun 2024 11:55:22 -0500 Subject: [PATCH 09/18] okay, swap, remove, add work now. --- how-to/web-layout/client/src/provider.ts | 183 ++-- how-to/web-layout/public/common/style/app.css | 27 + .../web-layout/public/platform/provider.html | 9 +- .../public/style/core-web-styles.css | 857 +++++++++--------- 4 files changed, 577 insertions(+), 499 deletions(-) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index 4199440..52289df 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -40,21 +40,129 @@ function setupPanels(settings: Settings): void { * Attach listeners to elements. */ async function attachListeners(): Promise { - const swapButton = document.querySelector("#swap-layouts"); - swapButton?.addEventListener("click", async () => { - await swapLayout(); + const addLayoutBtn = document.querySelector("#add-layout"); + addLayoutBtn?.addEventListener("click", async () => { + await addLayout(); }); +} - const removeLayoutBtn = document.querySelector("#remove-layout"); - removeLayoutBtn?.addEventListener("click", async () => { - const currentLayout = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); - await currentLayout?.removeLayout({ layoutName: "secondary" } as OpenFin.LayoutIdentity); +/** + * Attaches Listeners to Tab Click Events. + * @param tabName the name of the tab to add the event to. + */ +async function attachTabListener(tabName: string): Promise { + const tabBtn = document.querySelector(`#${tabName}`); + tabBtn?.addEventListener("click", async () => { + await selectTab(tabName); }); +} - const addLayoutBtn = document.querySelector("#add-layout"); - addLayoutBtn?.addEventListener("click", async () => { - await addLayout(); +/** + * Creates a new tab in the tab row given a specific tab/layout name. + */ +async function createTabBtn(tabName: string): Promise { + const tabRow = document.querySelector("#tabs"); + const newTab = document.createElement("div"); + newTab.id = `tab-${tabName}`; + newTab.className = "tab"; + newTab.style.display = "block"; + newTab.append(document.createTextNode(`${tabName}`)); + const closeBtn = document.createElement("span"); + closeBtn.className = "close-btn"; + closeBtn.innerHTML = "X"; + closeBtn.addEventListener("click", async (e) => { + await removeTab(tabName); + e.stopPropagation(); }); + newTab.append(closeBtn); + if (tabRow) { + tabRow.append(newTab); + if (document.querySelector(`#tab-${tabName}`)) { + await attachTabListener(newTab.id); + await selectTab(tabName); + } + } +} + +/** + * Makes a layout and tab active. + */ +async function selectTab(tabName: string, removedTabName?: string): Promise { + console.log(`Tab ${tabName} selected`); + let actualName = tabName; + if (tabName.includes("tab")) { + const split = tabName.split("-"); + actualName = split[1]; + } + const currentOrder = window.localStorage.getItem("order"); + if (currentOrder !== "") { + const layoutsArr = currentOrder?.split(","); + if (layoutsArr) { + for (const tab of layoutsArr) { + if (actualName !== removedTabName) { + if (tab === actualName) { + await showTab(tab); + } else { + await hideTab(tab); + } + } + } + } + } +} + +/** + * Makes a layout and tab hidden. + */ +async function showTab(tabName: string): Promise { + console.log(`Tab ${tabName} showing...`); + const currentTab = document.querySelector(`#${tabName}`); + if (currentTab) { + currentTab.style.display = "block"; + } +} + +/** + * Makes a layout and tab hidden. + */ +async function hideTab(tabName: string): Promise { + console.log(`Tab ${tabName} hiding...`); + const currentTab = document.querySelector(`#${tabName}`); + if (currentTab) { + currentTab.style.display = "none"; + } +} + +/** + * Removes a layout & tab from the page. + */ +async function removeTab(tabName: string): Promise { + console.log(`Removing Tab & Layout ${tabName}`); + const lm = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); + await lm?.removeLayout({ layoutName: tabName } as OpenFin.LayoutIdentity); + const tabToRemove = document.querySelector(`#tab-${tabName}`); + tabToRemove?.remove(); + + const currentOrder = window.localStorage.getItem("order"); + if (currentOrder !== "") { + const layouts = currentOrder?.split(","); + const newOrder = layouts?.filter((e) => e !== tabName); + if (newOrder && newOrder.length > 0) { + window.localStorage.setItem("order", newOrder.toString()); + } else { + window.localStorage.setItem("order", ""); + } + + if (newOrder) { + if (newOrder.length > 0) { + await selectTab(newOrder[0], tabName); + } else { + console.log("There are no layouts loaded."); + // eslint-disable-next-line no-alert + alert("There are no layouts loaded. Please add one."); + } + } + } } /** @@ -79,16 +187,14 @@ async function createLayout( // Normally you can use state here, but just tracking the order of layouts in localStorage. const currentOrder = window.localStorage.getItem("order"); - if (!currentOrder) { - window.localStorage.setItem("order", ""); - } let newOrder = ""; - if (order === 0) { + if (!currentOrder || currentOrder === "") { newOrder = layoutName; } else { - newOrder = currentOrder ? currentOrder.concat(",", layoutName) : ""; + newOrder = currentOrder?.concat(",", layoutName); } window.localStorage.setItem("order", newOrder); + // Finally, call the Layout.create() function to apply the snapshot layout to the div we just created. await fin.Platform.Layout.create({ layoutName, layout, container }); } @@ -122,9 +228,10 @@ function makeOverride(fin: OpenFin.Fin, layoutContainerId: s } setTimeout( () => - Object.entries(snapshot.layouts).map(async ([layoutName, layout], i) => - createLayout(fin, layoutName, layout, i) - ), + Object.entries(snapshot.layouts).map(async ([layoutName, layout], i) => { + await createLayout(fin, layoutName, layout, i); + await createTabBtn(layoutName); + }), 1000 ); console.log("[Apply Layout] Layouts loaded"); @@ -147,50 +254,12 @@ function makeOverride(fin: OpenFin.Fin, layoutContainerId: s }; } -/** - * Returns a layout from the settings with a provided name. - * @returns The default layout from the settings. - */ -export async function swapLayout(): Promise { - // Get that order of created div ids from storage, or state, or wherever you want to save them. - const currentOrder = window.localStorage.getItem("order"); - const layouts = currentOrder?.split(","); - // This is a simple swap between two, but you can do this anyway you like. - const firstLayout = document.querySelector(`#${layouts ? layouts[0] : null}`); - const secondLayout = document.querySelector(`#${layouts ? layouts[1] : null}`); - if (firstLayout && secondLayout) { - if (secondLayout.style.display === "block") { - firstLayout.style.display = "block"; - secondLayout.style.display = "none"; - } else { - firstLayout.style.display = "none"; - secondLayout.style.display = "block"; - } - } -} - /** * Saves the list of layout items to Local Storage. * @param updatedLayoutContents List of Layouts to save. */ export async function saveLayout(updatedLayoutContents: LayoutManagerItem[]): Promise { - window.localStorage.setItem("[Save Layout] currentLayoutContents:", JSON.stringify(updatedLayoutContents)); - - // const layoutsObj: { - // [key: string]: WebLayoutOptions; - // } = {}; - - // for (const content of updatedLayoutContents) { - // layoutsObj[content.layoutName] = content.layout; - // } - - // const newSnap: WebLayoutSnapshot = { - // layouts: {} - // }; - // // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style - // newSnap.layouts = layoutsObj as Record; - // const lm = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); - // await lm?.applyLayoutSnapshot(newSnap); + window.localStorage.setItem("currentLayout", JSON.stringify(updatedLayoutContents)); } /** diff --git a/how-to/web-layout/public/common/style/app.css b/how-to/web-layout/public/common/style/app.css index cf6a78d..4cc9c0a 100644 --- a/how-to/web-layout/public/common/style/app.css +++ b/how-to/web-layout/public/common/style/app.css @@ -943,3 +943,30 @@ td, .nowrap { white-space: nowrap; } + +.tabs { + display: inline-flex; + height: 30px; + width: 100%; +} + +.tab { + min-width: 120px; + min-height: 30px; + padding: 5px; + border: 2px solid var(--brand-border); + font-weight: 300; + border-top: 2px solid var(--tab-border-top-color); + background-color: var(--tab-background-active-color); + opacity: 100%; + cursor: pointer; +} + +.close-btn { + float: right; + font-size: 1em; + max-height: 18px; + content: var(--tab-close-button-url); + color: var(--brand-text-secondary); + cursor: pointer; +} \ No newline at end of file diff --git a/how-to/web-layout/public/platform/provider.html b/how-to/web-layout/public/platform/provider.html index f3ec295..32ce721 100644 --- a/how-to/web-layout/public/platform/provider.html +++ b/how-to/web-layout/public/platform/provider.html @@ -19,16 +19,17 @@

Web Multiple Layout Example

Demonstrate web interop usage with multiple layouts

- - - + OpenFin
-
+
+
+
+
diff --git a/how-to/web-layout/public/style/core-web-styles.css b/how-to/web-layout/public/style/core-web-styles.css index b760446..d5bf42b 100644 --- a/how-to/web-layout/public/style/core-web-styles.css +++ b/how-to/web-layout/public/style/core-web-styles.css @@ -1,741 +1,722 @@ .lm_root { - position: relative; + position: relative; } .lm_row > .lm_item { - float: left; + float: left; } .lm_content { - overflow: hidden; - position: relative; + overflow: hidden; + position: relative; } .lm_dragging, .lm_dragging * { - cursor: move !important; - -webkit-user-select: none; - user-select: none; + cursor: move !important; + -webkit-user-select: none; + user-select: none; } .lm_maximised { - position: absolute; - top: 0; - left: 0; - z-index: 40; + position: absolute; + top: 0; + left: 0; + z-index: 40; } .lm_maximise_placeholder { - display: none; + display: none; } .lm_splitter { - position: relative; - z-index: 2; - touch-action: none; + position: relative; + z-index: 2; + touch-action: none; } .lm_splitter.lm_vertical .lm_drag_handle { - width: 100%; - position: absolute; - cursor: ns-resize; - touch-action: none; - -webkit-user-select: none; - user-select: none; + width: 100%; + position: absolute; + cursor: ns-resize; + touch-action: none; + -webkit-user-select: none; + user-select: none; } .lm_splitter.lm_horizontal { - float: left; - height: 100%; + float: left; + height: 100%; } .lm_splitter.lm_horizontal .lm_drag_handle { - height: 100%; - position: absolute; - cursor: ew-resize; - touch-action: none; - -webkit-user-select: none; - user-select: none; + height: 100%; + position: absolute; + cursor: ew-resize; + touch-action: none; + -webkit-user-select: none; + user-select: none; } .lm_header { - overflow: visible; - position: relative; - z-index: 1; - -webkit-user-select: none; - user-select: none; + overflow: visible; + position: relative; + z-index: 1; + -webkit-user-select: none; + user-select: none; } -.lm_header [class^='lm_'] { - box-sizing: content-box !important; +.lm_header [class^=lm_] { + box-sizing: content-box !important; } .lm_header .lm_controls { - position: absolute; - right: 3px; - display: flex; + position: absolute; + right: 3px; + display: flex; } .lm_header .lm_controls > * { - cursor: pointer; - float: left; - width: 18px; - height: 18px; - text-align: center; + cursor: pointer; + float: left; + width: 18px; + height: 18px; + text-align: center; } .lm_header .lm_tabs { - position: absolute; - display: flex; + position: absolute; + display: flex; } .lm_header .lm_tab { - cursor: pointer; - float: left; - height: 14px; - margin-top: 1px; - padding: 0px 10px 5px; - padding-right: 25px; - position: relative; - touch-action: none; + cursor: pointer; + float: left; + height: 14px; + margin-top: 1px; + padding: 0px 10px 5px; + padding-right: 25px; + position: relative; + touch-action: none; } .lm_header .lm_tab i { - width: 2px; - height: 19px; - position: absolute; + width: 2px; + height: 19px; + position: absolute; } .lm_header .lm_tab i.lm_left { - top: 0; - left: -2px; + top: 0; + left: -2px; } .lm_header .lm_tab i.lm_right { - top: 0; - right: -2px; + top: 0; + right: -2px; } .lm_header .lm_tab .lm_title { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; } .lm_header .lm_tab .lm_close_tab { - width: 14px; - height: 14px; - position: absolute; - top: 0; - right: 0; - text-align: center; + width: 14px; + height: 14px; + position: absolute; + top: 0; + right: 0; + text-align: center; } .lm_stack { - position: relative; + position: relative; } .lm_stack > .lm_items { - overflow: hidden; + overflow: hidden; } .lm_stack.lm_left > .lm_items { - position: absolute; - left: 20px; - top: 0; + position: absolute; + left: 20px; + top: 0; } .lm_stack.lm_right > .lm_items { - position: absolute; - right: 20px; - top: 0; + position: absolute; + right: 20px; + top: 0; } .lm_stack.lm_right > .lm_header { - position: absolute; - right: 0; - top: 0; + position: absolute; + right: 0; + top: 0; } .lm_stack.lm_bottom > .lm_items { - position: absolute; - bottom: 20px; + position: absolute; + bottom: 20px; } .lm_stack.lm_bottom > .lm_header { - position: absolute; - bottom: 0; + position: absolute; + bottom: 0; } .lm_left.lm_stack .lm_header, .lm_right.lm_stack .lm_header { - height: 100%; + height: 100%; } .lm_left.lm_dragProxy .lm_header, .lm_right.lm_dragProxy .lm_header, .lm_left.lm_dragProxy .lm_items, .lm_right.lm_dragProxy .lm_items { - float: left; + float: left; } .lm_left.lm_dragProxy .lm_header, .lm_right.lm_dragProxy .lm_header, .lm_left.lm_stack .lm_header, .lm_right.lm_stack .lm_header { - width: 20px; - vertical-align: top; + width: 20px; + vertical-align: top; } .lm_left.lm_dragProxy .lm_header .lm_tabs, .lm_right.lm_dragProxy .lm_header .lm_tabs, .lm_left.lm_stack .lm_header .lm_tabs, .lm_right.lm_stack .lm_header .lm_tabs { - transform-origin: left top; - top: 0; - width: 1000px; - /*hack*/ + transform-origin: left top; + top: 0; + width: 1000px; + /*hack*/ } .lm_left.lm_dragProxy .lm_header .lm_controls, .lm_right.lm_dragProxy .lm_header .lm_controls, .lm_left.lm_stack .lm_header .lm_controls, .lm_right.lm_stack .lm_header .lm_controls { - bottom: 0; - flex-flow: column; + bottom: 0; + flex-flow: column; } .lm_dragProxy.lm_left .lm_header .lm_tabs, .lm_stack.lm_left .lm_header .lm_tabs { - transform: rotate(-90deg) scaleX(-1); - left: 0; + transform: rotate(-90deg) scaleX(-1); + left: 0; } .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab, .lm_stack.lm_left .lm_header .lm_tabs .lm_tab { - transform: scaleX(-1); - margin-top: 1px; + transform: scaleX(-1); + margin-top: 1px; } .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list, .lm_stack.lm_left .lm_header .lm_tabdropdown_list { - top: initial; - right: initial; - left: 20px; + top: initial; + right: initial; + left: 20px; } .lm_dragProxy.lm_right .lm_content { - float: left; + float: left; } .lm_dragProxy.lm_right .lm_header .lm_tabs, .lm_stack.lm_right .lm_header .lm_tabs { - transform: rotate(90deg) scaleX(1); - left: 100%; - margin-left: 0; + transform: rotate(90deg) scaleX(1); + left: 100%; + margin-left: 0; } .lm_dragProxy.lm_right .lm_header .lm_controls, .lm_stack.lm_right .lm_header .lm_controls { - left: 3px; + left: 3px; } .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list, .lm_stack.lm_right .lm_header .lm_tabdropdown_list { - top: initial; - right: 20px; + top: initial; + right: 20px; } .lm_dragProxy.lm_bottom .lm_header, .lm_stack.lm_bottom .lm_header { - width: 100%; + width: 100%; } .lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab { - margin-top: 0; - border-top: none; + margin-top: 0; + border-top: none; } .lm_dragProxy.lm_bottom .lm_header .lm_controls, .lm_stack.lm_bottom .lm_header .lm_controls { - top: 3px; + top: 3px; } .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list, .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list { - top: initial; - bottom: 20px; + top: initial; + bottom: 20px; } .lm_drop_tab_placeholder { - float: left; - width: 100px; - visibility: hidden; + float: left; + width: 100px; + visibility: hidden; } .lm_header .lm_controls .lm_tabdropdown:before { - content: ''; - width: 0; - height: 0; - vertical-align: middle; - display: inline-block; - border-top: 5px dashed; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - color: white; + content: ''; + width: 0; + height: 0; + vertical-align: middle; + display: inline-block; + border-top: 5px dashed; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + color: white; } .lm_header .lm_tabdropdown_list { - position: absolute; - top: 20px; - right: 0; - z-index: 5; - overflow: hidden; + position: absolute; + top: 20px; + right: 0; + z-index: 5; + overflow: hidden; } .lm_header .lm_tabdropdown_list .lm_tab { - clear: both; - padding-right: 10px; - margin: 0; + clear: both; + padding-right: 10px; + margin: 0; } .lm_header .lm_tabdropdown_list .lm_tab .lm_title { - width: 100px; + width: 100px; } .lm_header .lm_tabdropdown_list .lm_close_tab { - display: none !important; + display: none !important; } /*********************************** * Drag Proxy ***********************************/ .lm_dragProxy { - position: absolute; - top: 0; - left: 0; - z-index: 30; + position: absolute; + top: 0; + left: 0; + z-index: 30; } .lm_dragProxy .lm_header { - background: transparent; + background: transparent; } .lm_dragProxy .lm_content { - border-top: none; - overflow: hidden; + border-top: none; + overflow: hidden; } .lm_dropTargetIndicator { - display: none; - position: absolute; - z-index: 35; - transition: all 200ms ease; + display: none; + position: absolute; + z-index: 35; + transition: all 200ms ease; } .lm_dropTargetIndicator .lm_inner { - width: 100%; - height: 100%; - position: relative; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: relative; + top: 0; + left: 0; } .lm_transition_indicator { - display: none; - width: 20px; - height: 20px; - position: absolute; - top: 0; - left: 0; - z-index: 20; + display: none; + width: 20px; + height: 20px; + position: absolute; + top: 0; + left: 0; + z-index: 20; } .lm_popin { - width: 20px; - height: 20px; - position: absolute; - bottom: 0; - right: 0; - z-index: 9999; + width: 20px; + height: 20px; + position: absolute; + bottom: 0; + right: 0; + z-index: 9999; } .lm_popin > * { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; } .lm_popin > .lm_bg { - z-index: 10; + z-index: 10; } .lm_popin > .lm_icon { - z-index: 20; + z-index: 20; } :root { - /* Colors used for dark theme */ - --of-default-black: black; - --of-default-charcoal-dark: #111118; - --of-default-charcoal-light: #2a292f; - --of-default-grey-dark: #a5aebd; - --of-default-grey-dark-opacity: #a5aebd2e; - --of-default-grey-light: #f4f5f8; - --of-default-grey-light-opacity: #f4f5f82e; - --of-default-white: white; - --of-dark-theme: #7b7bff; - --of-light-theme: #504cff; - --of-highlight: #958eff; - --of-highlight-opacity: #958eff26; - --of-default-red: red; - --of-default-red-negative: #f55d5f; - --of-positive-green: #29af6f; - - /* Main colors to set from the above list */ - --main-background-color: var(--of-default-charcoal-dark); - --secondary-background-color: var(--of-default-black); - --tab-background-color: var(--of-default-charcoal-light); - --tab-button-hover-color: var(--of-default-grey-dark-opacity); - --tab-button-active-color: var(--of-default-grey-light-opacity); - --tab-border-top-color: var(--of-dark-theme); - --tab-border-top-highlight-color: var(--of-light-theme); - --focused-tab-border-top-color: var(--of-positive-green); - --focused-tab-border-top-highlight-color: #3cf89d; - --tab-font-color: var(--of-default-white); - --top-bar-close-button-color: var(--of-default-red); - --top-bar-close-button-active-color: var(--of-default-red-negative); - --drop-target-border-color: var(--of-highlight); - --drop-target-background-color: var(--of-highlight-opacity); - - /* Colors that default to dependent on Main Colors, but should be uniquely editable */ - --frame-background-color: var(--secondary-background-color); - --body-font-color: var(--tab-font-color); - --splitter-color: var(--secondary-background-color); - --splitter-hover-color: var(--tab-background-color); - --tabs-bar-background-color: var(--secondary-background-color); - --title-bar-background-color: var(--main-background-color); - --color-behind-views: var(--main-background-color); /* only seen if there's a problem with the view */ - --tab-background-active-color: var(--tab-background-color); - --top-bar-button-hover-color: var(--tab-background-color); - --top-bar-button-active-color: var(--tab-button-active-color); - - /* Measurements for various components */ - --title-bar-height: 30px; - --title-bar-border-bottom-height: 1px; - --header-border-bottom-height: 2px; - --corner-radius: 0px; - --splitter-width: 4px; - - --body-container-padding-top: 0px; - --body-container-padding-right: 0px; - --body-container-padding-bottom: 0px; - --body-container-padding-left: 0px; - - --body-container-width: calc( - 100% - var(--body-container-padding-left) - var(--body-container-padding-right) - ); - --body-container-height: calc( - 100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - - var(--body-container-padding-bottom) - ); - --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) - var(--body-container-padding-bottom) var(--body-container-padding-left); - - --layout-container-padding-top: 4px; - --layout-container-padding-right: 4px; - --layout-container-padding-bottom: 4px; - --layout-container-padding-left: 4px; - --layout-container-from-top: calc( - var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top) - ); - - --layout-container-width: calc( - 100% - var(--layout-container-padding-left) - var(--layout-container-padding-right) - ); - --layout-container-height: calc( - 100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - - var(--layout-container-padding-bottom) - ); - --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) - var(--layout-container-padding-bottom) var(--layout-container-padding-left); - - /* Top Bar and Tab Icons */ - --close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); - --minimize-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); - --expand-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg=='); - --tab-close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); - --new-tab-button-url: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJNQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TslXgAAADF0Uk5TAA1Zm8rs+utYJp72//WcJAmM+4oIJdTRIzHq6S8KiQ70DFaYx/lVC5kihtLPB+chLkL8Um8AAAM+SURBVHic7d3rVtNQEEDhlJZwO9xB0CAW2iAiou//dOLCpas2OTNBJtNp9n6COZ+t1T8zRUFERERERERE1FujjfFksyy3JuPtkfcsDu3s7qU/7R8ces/Tc0fHJ2mh8vTMe6Y+O3+Xlrq49J6qv95/WH5/StWV91x9dd74/meBgXwGPjZ8/n9/C4bx98Bx2/tTuvaerY92TtoByiF8CXbb35/S2Hs6+z7t5QCmN97zmbeRe39Kt97zmTfOA8y85zNvkgeYe89n3mYeoPKez7wyD1B7z2de/v0pec9nHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID3fOYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeM9nHgAAAAAAAAAAAAAAAAAAwIoDvOz/lwZe9V59v2Bh/3/0ut8vWNr/H72O9wua9v9Hr8v9gub9/9HT3y9o2/8fPe39gvb9/9FT3i/I7P+Pnup+QW7/f/RU9wuy+/+jp7hfkN//Hz3F/QJh/3/05PsFwv7/6Mn3C4T9/9GT7xcI+/+jJ98vCP//33zy/YLBA2x5j2ib/BUY/F+Cg/8Z3PYe0bY7EWC07z2jZdPPIkBx4D2kZffy+4vDNf4hrL8oAIpT7zHtetC8vzj66j2nVY/fVADFZeU9qU1P33XvL4qrtRR4+qF9//Nn4MJ72rfvUf3n/6uz6zX7LagflN//vx+C8dR76Ldreq/6/funm9vZvKq9Z//f6mo+u1P8+6+3pIG95zMPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwHs+8wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC85zMPAAAAAAAAAAAAAAAAAABgkADCqk55/3/0hPsF8v7/6An3C+T9/9ET7hfI+/+jJ9wvkPf/Ry9/v0Cz/z962fsFmv3/0cvdL9Dt/49e5n6Bbv9/9NrvF2j3/0ev7X6Bfv9/9JrvF3TZ/x+9pvsF3fb/R2/pfkH3/f/RW7hf8Lr9/9F7uV+wcvv/iYiIiIiIiGjt+wlaXmsfieItGAAAAABJRU5ErkJggg=='); + /* Colors used for dark theme */ + --of-default-black: black; + --of-default-charcoal-dark: #111118; + --of-default-charcoal-light: #2A292F; + --of-default-grey-dark: #A5AEBD; + --of-default-grey-dark-opacity: #A5AEBD2E; + --of-default-grey-light: #F4F5F8; + --of-default-grey-light-opacity: #F4F5F82E; + --of-default-white: white; + --of-dark-theme: #7B7BFF; + --of-light-theme: #504CFF; + --of-highlight: #958EFF; + --of-highlight-opacity: #958EFF26; + --of-default-red: red; + --of-default-red-negative: #F55D5F; + --of-positive-green: #29AF6F; + + /* Main colors to set from the above list */ + --main-background-color: var(--of-default-charcoal-dark); + --secondary-background-color: var(--of-default-black); + --tab-background-color: var(--of-default-charcoal-light); + --tab-button-hover-color: var(--of-default-grey-dark-opacity); + --tab-button-active-color: var(--of-default-grey-light-opacity); + --tab-border-top-color: var(--of-dark-theme); + --tab-border-top-highlight-color: var(--of-light-theme); + --focused-tab-border-top-color: var(--of-positive-green); + --focused-tab-border-top-highlight-color: #3cf89d; + --tab-font-color: var(--of-default-white); + --top-bar-close-button-color: var(--of-default-red); + --top-bar-close-button-active-color: var(--of-default-red-negative); + --drop-target-border-color: var(--of-highlight); + --drop-target-background-color: var(--of-highlight-opacity); + + /* Colors that default to dependent on Main Colors, but should be uniquely editable */ + --frame-background-color: var(--secondary-background-color); + --body-font-color: var(--tab-font-color); + --splitter-color: var(--secondary-background-color); + --splitter-hover-color: var(--tab-background-color); + --tabs-bar-background-color: var(--secondary-background-color); + --title-bar-background-color: var(--main-background-color); + --color-behind-views: var(--main-background-color); /* only seen if there's a problem with the view */ + --tab-background-active-color: var(--tab-background-color); + --top-bar-button-hover-color: var(--tab-background-color); + --top-bar-button-active-color: var(--tab-button-active-color); + + /* Measurements for various components */ + --title-bar-height: 30px; + --title-bar-border-bottom-height: 1px; + --header-border-bottom-height: 2px; + --corner-radius: 0px; + --splitter-width: 4px; + + --body-container-padding-top: 0px; + --body-container-padding-right: 0px; + --body-container-padding-bottom: 0px; + --body-container-padding-left: 0px; + + --body-container-width: calc(100% - var(--body-container-padding-left) - var(--body-container-padding-right)); + --body-container-height: calc(100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - var(--body-container-padding-bottom)); + --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) var(--body-container-padding-bottom) var(--body-container-padding-left); + + --layout-container-padding-top: 4px; + --layout-container-padding-right: 4px; + --layout-container-padding-bottom: 4px; + --layout-container-padding-left: 4px; + --layout-container-from-top: calc(var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top)); + + --layout-container-width: calc(100% - var(--layout-container-padding-left) - var(--layout-container-padding-right)); + --layout-container-height: calc(100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - var(--layout-container-padding-bottom)); + --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) var(--layout-container-padding-bottom) var(--layout-container-padding-left); + + /* Top Bar and Tab Icons */ + --close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); + --minimize-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); + --expand-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg=="); + --tab-close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); + --new-tab-button-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJNQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TslXgAAADF0Uk5TAA1Zm8rs+utYJp72//WcJAmM+4oIJdTRIzHq6S8KiQ70DFaYx/lVC5kihtLPB+chLkL8Um8AAAM+SURBVHic7d3rVtNQEEDhlJZwO9xB0CAW2iAiou//dOLCpas2OTNBJtNp9n6COZ+t1T8zRUFERERERERE1FujjfFksyy3JuPtkfcsDu3s7qU/7R8ces/Tc0fHJ2mh8vTMe6Y+O3+Xlrq49J6qv95/WH5/StWV91x9dd74/meBgXwGPjZ8/n9/C4bx98Bx2/tTuvaerY92TtoByiF8CXbb35/S2Hs6+z7t5QCmN97zmbeRe39Kt97zmTfOA8y85zNvkgeYe89n3mYeoPKez7wyD1B7z2de/v0pec9nHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID3fOYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeM9nHgAAAAAAAAAAAAAAAAAAwIoDvOz/lwZe9V59v2Bh/3/0ut8vWNr/H72O9wua9v9Hr8v9gub9/9HT3y9o2/8fPe39gvb9/9FT3i/I7P+Pnup+QW7/f/RU9wuy+/+jp7hfkN//Hz3F/QJh/3/05PsFwv7/6Mn3C4T9/9GT7xcI+/+jJ98vCP//33zy/YLBA2x5j2ib/BUY/F+Cg/8Z3PYe0bY7EWC07z2jZdPPIkBx4D2kZffy+4vDNf4hrL8oAIpT7zHtetC8vzj66j2nVY/fVADFZeU9qU1P33XvL4qrtRR4+qF9//Nn4MJ72rfvUf3n/6uz6zX7LagflN//vx+C8dR76Ldreq/6/funm9vZvKq9Z//f6mo+u1P8+6+3pIG95zMPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwHs+8wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC85zMPAAAAAAAAAAAAAAAAAABgkADCqk55/3/0hPsF8v7/6An3C+T9/9ET7hfI+/+jJ9wvkPf/Ry9/v0Cz/z962fsFmv3/0cvdL9Dt/49e5n6Bbv9/9NrvF2j3/0ev7X6Bfv9/9JrvF3TZ/x+9pvsF3fb/R2/pfkH3/f/RW7hf8Lr9/9F7uV+wcvv/iYiIiIiIiGjt+wlaXmsfieItGAAAAABJRU5ErkJggg=="); } body { - min-height: 100%; - width: 100%; - margin: 0; - padding: 0px; - overflow: hidden; - color: var(--body-font-color); - background-color: var(--main-background-color); + min-height: 100%; + width: 100%; + margin: 0; + padding: 0px; + overflow: hidden; + color: var(--body-font-color); + background-color: var(--main-background-color); } html { - height: 100%; - width: 100%; - padding: 0px; - margin: 0; - overflow: hidden; + height: 100%; + width: 100%; + padding: 0px; + margin: 0; + overflow: hidden; } -body, -select, -button, -li, -span, -div { - font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif; - color: var(--body-font-color); +body, select, button, li, span, div { + font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif; + color: var(--body-font-color); } #of-frame-main { - height: 100%; - width: 100%; - padding: 0px; - margin: 0; - position: absolute; - overflow: hidden; - background-color: var(--frame-background-color); + height: 100%; + width: 100%; + padding: 0px; + margin: 0; + position: absolute; + overflow: hidden; + background-color: var(--frame-background-color); } #title-bar { - background: var(--title-bar-background-color); - width: 100%; - height: var(--title-bar-height); - display: flex; - border-bottom: var(--title-bar-border-bottom-height) solid rgba(255, 255, 255, 0.1); + background: var(--title-bar-background-color); + width: 100%; + height: var(--title-bar-height); + display: flex; + border-bottom: var(--title-bar-border-bottom-height) solid rgba(255, 255, 255, 0.1); } .title-bar-draggable { - position: relative; - flex-grow: 1; - margin: 7px 0 0 7px; /* leave grabbable margin for resize */ - -webkit-app-region: drag; - -webkit-user-select: none; + position: relative; + flex-grow: 1; + margin: 7px 0 0 7px; /* leave grabbable margin for resize */ + -webkit-app-region: drag; + -webkit-user-select: none; } div.wrapper_title { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 3vw; - opacity: 0.5; - color: var(--tab-font-color); /* this is the text you see when a view isn't showing */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 3vw; + opacity: 0.5; + color: var(--tab-font-color); /* this is the text you see when a view isn't showing */ } div.placeholder_image { - opacity: 0.7; - color: var(--tab-background-color); + opacity: 0.7; + color: var(--tab-background-color); } div.placeholder_image img { - height: 100%; - width: 100%; - filter: blur(6px); + height: 100%; + width: 100%; + filter: blur(6px); } #buttons-wrapper { - -webkit-app-region: none; - cursor: pointer; - user-select: none; - display: flex; - justify-content: space-between; - align-items: center; + -webkit-app-region: none; + cursor: pointer; + user-select: none; + display: flex; + justify-content: space-between; + align-items: center; } .button { - -webkit-app-region: no-drag; - vertical-align: middle; - height: 100%; - width: 30px; - background-size: 14px; - background-position: center; - background-repeat: no-repeat; + -webkit-app-region: no-drag; + vertical-align: middle; + height: 100%; + width: 30px; + background-size: 14px; + background-position: center; + background-repeat: no-repeat; } .button:hover { - background-color: var(--top-bar-button-hover-color); + background-color: var(--top-bar-button-hover-color); } .button:active { - background-color: var(--top-bar-button-active-color); + background-color: var(--top-bar-button-active-color); } #close-button:hover { - background-color: var(--top-bar-close-button-color); + background-color: var(--top-bar-close-button-color); } #close-button:active { - background-color: var(--top-bar-close-button-active-color); + background-color: var(--top-bar-close-button-active-color); } #body-container { - height: var(--body-container-height); - width: var(--body-container-width); - padding: var(--body-container-padding); + height: var(--body-container-height); + width: var(--body-container-width); + padding: var(--body-container-padding); } #layout-container { - height: var(--layout-container-height); - width: var(--layout-container-width); - padding: var(--layout-container-padding); + height: var(--layout-container-height); + width: var(--layout-container-width); + padding: var(--layout-container-padding); } .lm_header .lm_tab .lm_close_tab { - background-image: var(--tab-close-button-url); - height: 14px; - width: 14px; - background-size: 12px; - background-position: center; - border-radius: 50%; - position: absolute; /* Must be absolute, otherwise we end up with overflow errors due to inline styles */ - top: 6px; - right: 6px; + background-image: var(--tab-close-button-url); + height: 14px; + width: 14px; + background-size: 12px; + background-position: center; + border-radius: 50%; + position: absolute; /* Must be absolute, otherwise we end up with overflow errors due to inline styles */ + top: 6px; + right: 6px; } .lm_header .lm_tab .lm_close_tab:hover { - background-color: var(--tab-button-hover-color); + background-color: var(--tab-button-hover-color); } .lm_header .lm_tab .lm_close_tab:active { - background-color: var(--tab-button-active-color); + background-color: var(--tab-button-active-color); } #close-button { - background-image: var(--close-button-url); + background-image: var(--close-button-url); } #expand-button { - background-image: var(--expand-button-url); + background-image: var(--expand-button-url); } #minimize-button { - background-image: var(--minimize-button-url); + background-image: var(--minimize-button-url); } .lm_goldenlayout { - background-color: var(--frame-background-color); + background-color: var(--frame-background-color); } .lm_header { - -webkit-app-region: no-drag; - box-shadow: none; - border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color); - height: 25px; - user-select: none; + -webkit-app-region: no-drag; + box-shadow: none; + border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color); + height: 25px; + user-select: none; } .lm_tabs { - -webkit-app-region: no-drag; - background-color: var(--tabs-bar-background-color); - border-top-left-radius: var(--corner-radius); - border-top-right-radius: var(--corner-radius); - width: 100%; + -webkit-app-region: no-drag; + background-color: var(--tabs-bar-background-color); + border-top-left-radius: var(--corner-radius); + border-top-right-radius: var(--corner-radius); + width: 100%; } .lm_header .lm_tab { - border-top-right-radius: var(--corner-radius); - border-top-left-radius: var(--corner-radius); - background-color: var(--tab-background-color); - color: var(--tab-font-color); - height: 100%; - margin-right: 0px; - margin-top: 0px; - white-space: nowrap; - overflow-x: hidden; + border-top-right-radius: var(--corner-radius); + border-top-left-radius: var(--corner-radius); + background-color: var(--tab-background-color); + color: var(--tab-font-color); + height: 100%; + margin-right: 0px; + margin-top: 0px; + white-space: nowrap; + overflow-x: hidden; } .lm_header .lm_tabs .lm_tab { - padding-left: 8px; - padding-top: 2px; - padding-right: 8px; - padding-bottom: 2px; - border-top: 2px solid var(--tab-background-color); - opacity: 60%; - z-index: 100 !important; /* Necessary to make sure that the controls panel doesn't appear above the tabs. This is to overwrite an inline style coming from golden-layouts. */ + padding-left: 8px; + padding-top: 2px; + padding-right: 8px; + padding-bottom: 2px; + border-top: 2px solid var(--tab-background-color); + opacity: 60%; + z-index: 100 !important; /* Necessary to make sure that the controls panel doesn't appear above the tabs. This is to overwrite an inline style coming from golden-layouts. */ } .lm_header .lm_tabs .lm_tab:hover { - border-top: 2px solid var(--tab-border-top-color); /* might be able to take this out */ - opacity: 80%; + border-top: 2px solid var(--tab-border-top-color); /* might be able to take this out */ + opacity: 80%; } .lm_header .lm_tab .lm_title { - margin-right: 10px; - line-height: 25px; - font-size: 12px; - vertical-align: middle; - padding: 0; - white-space: nowrap; - color: var(--tab-font-color); - font-weight: 300; + margin-right: 10px; + line-height: 25px; + font-size: 12px; + vertical-align: middle; + padding: 0; + white-space: nowrap; + color: var(--tab-font-color); + font-weight: 300; } .lm_title { - width: 120px; - white-space: nowrap; + width: 120px; + white-space: nowrap; } .lm_header .lm_tab.lm_active { - border-top: 2px solid var(--tab-border-top-color); - background-color: var(--tab-background-active-color); - opacity: 100%; + border-top: 2px solid var(--tab-border-top-color); + background-color: var(--tab-background-active-color); + opacity: 100%; } .lm_header .lm_tabs .lm_active:hover { - border-color: var(--tab-border-top-highlight-color); - opacity: 90%; + border-color: var(--tab-border-top-highlight-color); + opacity: 90%; } .lm_content { - background-color: var(--color-behind-views); - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; + background-color: var(--color-behind-views); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } .lm_splitter { - background-color: var(--splitter-color); - opacity: 0.001; + background-color: var(--splitter-color); + opacity: 0.001; transition: opacity 200ms ease; } .lm_splitter:hover, .lm_splitter.lm_dragging { - background-color: var(--splitter-hover-color); - opacity: 1; + background-color: var(--splitter-hover-color); + opacity: 1; } .lm_dropTargetIndicator { - box-shadow: none; - outline: none; - transition: all 200ms ease; - background: var(--drop-target-background-color); - border: 1px solid var(--drop-target-border-color); - box-sizing: border-box; - border-radius: 2px; - margin-top: 1px; + box-shadow: none; + outline: none; + transition: all 200ms ease; + background: var(--drop-target-background-color); + border: 1px solid var(--drop-target-border-color); + box-sizing: border-box; + border-radius: 2px; + margin-top: 1px; } .lm_dropTargetIndicator .lm_inner { - background: var(--tab-background-color); - opacity: 0.2; + background: var(--tab-background-color); + opacity: .2 } .lm_tabdropdown_list { - z-index: 101 !important; + z-index: 101 !important; } - + .lm_header .lm_tabdropdown_list .lm_tab { - background-color: var(--secondary-background-color); + background-color: var(--secondary-background-color); } .lm_header .lm_tabdropdown_list .lm_tab:hover { - background-color: var(--main-background-color); + background-color: var(--main-background-color); } -.lm_header .lm_controls li.lm_tabdropdown:before { - color: var(--tab-font-color); +.lm_header .lm_controls li.lm_tabdropdown:before{ + color: var(--tab-font-color) } .lm_controls li { position: relative; background-position: center center; background-repeat: no-repeat; - opacity: 0.4; - transition: opacity 300ms ease; + opacity: .4; + transition: opacity 300ms ease } .lm_controls li:hover { - opacity: 1; + opacity: 1 } .lm_controls .lm_popout { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=) } .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) } .lm_controls .lm_close { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=) } .lm_maximised .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC) } -.lm_header > .lm_tabs > .focused_tab { - border-color: var(--focused-tab-border-top-color); +.lm_header>.lm_tabs>.focused_tab { + border-color: var(--focused-tab-border-top-color); } -.lm_header > .lm_tabs > .focused_tab:hover { - border-color: var(--focused-tab-border-top-highlight-color); +.lm_header>.lm_tabs>.focused_tab:hover { + border-color: var(--focused-tab-border-top-highlight-color); } .tab-icon { - height: 12px; - width: 12px; - vertical-align: baseline; - margin-right: 7px; + height: 12px; + width: 12px; + vertical-align: baseline; + margin-right: 7px; } .lm_tabs .newTabButton { - background-image: var(--new-tab-button-url); - filter: invert(0.3); + background-image: var(--new-tab-button-url); + filter: invert(.3); background-size: cover; width: 12px; height: 12px; @@ -745,12 +726,12 @@ div.placeholder_image img { } .lm_tabs .newTabButton:hover { - filter: invert(0); + filter: invert(0); } :root.light-theme .newTabButton { - filter: invert(0.7); + filter: invert(.7); } :root.light-theme .newTabButton:hover { - filter: invert(1); -} + filter: invert(1); +} \ No newline at end of file From 3c61c93b717750257f6939a29593624fbc856f81 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Wed, 19 Jun 2024 15:22:59 -0500 Subject: [PATCH 10/18] Adding some context to the add button --- how-to/web-layout/public/platform/provider.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/how-to/web-layout/public/platform/provider.html b/how-to/web-layout/public/platform/provider.html index 32ce721..52693a1 100644 --- a/how-to/web-layout/public/platform/provider.html +++ b/how-to/web-layout/public/platform/provider.html @@ -19,7 +19,7 @@

Web Multiple Layout Example

Demonstrate web interop usage with multiple layouts

- + OpenFin
From 70664accea720e80d91555723019a83c3e3301db Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Tue, 9 Jul 2024 10:56:18 -0500 Subject: [PATCH 11/18] adding destroy to fix layout not being added. --- how-to/web-layout/client/src/provider.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index 52289df..d8aae8e 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -306,6 +306,7 @@ export async function removeThisLayout(layoutName: string): Promise { await saveLayout(layoutsBefore); console.log(`[Remove Layout] Layouts After Removal: ${JSON.stringify(layoutsBefore)}`); layoutNameElement.remove(); + await fin.Platform.Layout.destroy({ layoutName, uuid: fin.me.uuid, name: fin.me.name }); } } /** From 40d17440d230533491f7361fdb711c550226c4bf Mon Sep 17 00:00:00 2001 From: John Date: Wed, 10 Jul 2024 19:22:25 +0100 Subject: [PATCH 12/18] Updated to remove component name so you can add multiple instances of the layout --- how-to/web-layout/public/layouts/secondary.layout.fin.json | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/how-to/web-layout/public/layouts/secondary.layout.fin.json b/how-to/web-layout/public/layouts/secondary.layout.fin.json index 86aa772..7a23160 100644 --- a/how-to/web-layout/public/layouts/secondary.layout.fin.json +++ b/how-to/web-layout/public/layouts/secondary.layout.fin.json @@ -18,8 +18,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "http://localhost:6060/views/fdc3-view.html", - "name": "internal-generated-view-secondary-1" + "url": "http://localhost:6060/views/fdc3-view.html" }, "title": "FDC3 Same Domain" } @@ -33,8 +32,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v18.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", - "name": "internal-generated-view-secondary-2" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v18.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html" }, "title": "FDC3 Different Domain" } From 3acb26de098cf6476e0d3be48007ab8a504a67f1 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Thu, 11 Jul 2024 15:06:41 -0500 Subject: [PATCH 13/18] updating pkgs, playing with CSS layouts. --- how-to/web-layout/package.json | 4 +- how-to/web-layout/public/common/style/app.css | 9 +++- .../public/layouts/secondary.layout.fin.json | 6 ++- .../web-layout/public/platform/provider.html | 4 +- package-lock.json | 42 ++++++++++++++++++- 5 files changed, 56 insertions(+), 9 deletions(-) diff --git a/how-to/web-layout/package.json b/how-to/web-layout/package.json index a0ad49f..c8de738 100644 --- a/how-to/web-layout/package.json +++ b/how-to/web-layout/package.json @@ -20,10 +20,10 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.38.49" + "@openfin/core-web": "0.38.63" }, "devDependencies": { - "@openfin/core": "38.81.49", + "@openfin/core": "38.82.63", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", diff --git a/how-to/web-layout/public/common/style/app.css b/how-to/web-layout/public/common/style/app.css index 4cc9c0a..4bfaf1c 100644 --- a/how-to/web-layout/public/common/style/app.css +++ b/how-to/web-layout/public/common/style/app.css @@ -969,4 +969,11 @@ td, content: var(--tab-close-button-url); color: var(--brand-text-secondary); cursor: pointer; -} \ No newline at end of file +} + +.main-container { + display: flex; + justify-content: stretch; + align-items: stretch; + /* overflow: hidden; */ +} diff --git a/how-to/web-layout/public/layouts/secondary.layout.fin.json b/how-to/web-layout/public/layouts/secondary.layout.fin.json index 86aa772..903076d 100644 --- a/how-to/web-layout/public/layouts/secondary.layout.fin.json +++ b/how-to/web-layout/public/layouts/secondary.layout.fin.json @@ -21,7 +21,8 @@ "url": "http://localhost:6060/views/fdc3-view.html", "name": "internal-generated-view-secondary-1" }, - "title": "FDC3 Same Domain" + "title": "FDC3 Same Domain", + "isClosable": false } ] }, @@ -36,7 +37,8 @@ "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v18.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", "name": "internal-generated-view-secondary-2" }, - "title": "FDC3 Different Domain" + "title": "FDC3 Different Domain", + "isClosable": true } ] } diff --git a/how-to/web-layout/public/platform/provider.html b/how-to/web-layout/public/platform/provider.html index 52693a1..a07a0af 100644 --- a/how-to/web-layout/public/platform/provider.html +++ b/how-to/web-layout/public/platform/provider.html @@ -26,9 +26,9 @@

Demonstrate web interop usage with multiple layouts

-
+
-
+
diff --git a/package-lock.json b/package-lock.json index 93592f8..b580bf1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -172,10 +172,10 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.38.49" + "@openfin/core-web": "0.38.63" }, "devDependencies": { - "@openfin/core": "38.81.49", + "@openfin/core": "38.82.63", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", @@ -224,6 +224,39 @@ "webpack-cli": "^5.1.4" } }, + "how-to/web-layout/node_modules/@openfin/core": { + "version": "38.82.63", + "resolved": "https://registry.npmjs.org/@openfin/core/-/core-38.82.63.tgz", + "integrity": "sha512-Hg0eULz41liypIh0tv3nntfqgGoNq/wV9clWwV1wwiDKgQlUVkMiwjf2irpHpl+QLcN1NV3OqV5NP2Mbuh9Vbg==", + "dependencies": { + "@types/node": "^20.14.2", + "lodash": "^4.17.21", + "ws": "^7.3.0" + } + }, + "how-to/web-layout/node_modules/@openfin/core-web": { + "version": "0.38.63", + "resolved": "https://registry.npmjs.org/@openfin/core-web/-/core-web-0.38.63.tgz", + "integrity": "sha512-mGaHqKOx5I0701en1vNbVmhMs7CJMk6p/Y5kRSa5lf6eFEl+G1vezjry+KDx8aSLskxlbjHoWN/NCvwlLln2wA==", + "dependencies": { + "buffer": "6.0.3", + "events": "^3.3.0", + "golden-layout": "2.6.0", + "lodash": "4.17.21", + "uuid": "^8.3.2" + }, + "peerDependencies": { + "@openfin/core": "38.82.63" + } + }, + "how-to/web-layout/node_modules/@types/node": { + "version": "20.14.10", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz", + "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==", + "dependencies": { + "undici-types": "~5.26.4" + } + }, "node_modules/@babel/code-frame": { "version": "7.24.2", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", @@ -6634,6 +6667,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" + }, "node_modules/unicorn-magic": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz", From f90805b3698843076df0ace59bc865494ea60a22 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Thu, 11 Jul 2024 15:35:16 -0500 Subject: [PATCH 14/18] changed height, now it works! --- how-to/web-layout/public/common/style/app.css | 1 + how-to/web-layout/public/platform/provider.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/how-to/web-layout/public/common/style/app.css b/how-to/web-layout/public/common/style/app.css index 4bfaf1c..eb3a7a1 100644 --- a/how-to/web-layout/public/common/style/app.css +++ b/how-to/web-layout/public/common/style/app.css @@ -975,5 +975,6 @@ td, display: flex; justify-content: stretch; align-items: stretch; + height: 100%; /* overflow: hidden; */ } diff --git a/how-to/web-layout/public/platform/provider.html b/how-to/web-layout/public/platform/provider.html index a07a0af..75609c5 100644 --- a/how-to/web-layout/public/platform/provider.html +++ b/how-to/web-layout/public/platform/provider.html @@ -28,7 +28,7 @@

Demonstrate web interop usage with multiple layouts

-
+
From c5e97469bbde3b517fc8bc6be956186ce22484e0 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Fri, 12 Jul 2024 12:45:25 -0500 Subject: [PATCH 15/18] adding disable add btn on add --- how-to/web-layout/client/src/provider.ts | 10 ++++++++++ how-to/web-layout/public/common/style/app.css | 7 ++++++- how-to/web-layout/public/platform/provider.html | 8 +++++--- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/how-to/web-layout/client/src/provider.ts b/how-to/web-layout/client/src/provider.ts index d8aae8e..41bd125 100644 --- a/how-to/web-layout/client/src/provider.ts +++ b/how-to/web-layout/client/src/provider.ts @@ -288,6 +288,10 @@ export async function addLayout(): Promise { } else { console.log("[Add Layout] Error adding Layout. No Secondary Layout exists."); } + const addBtn = document.querySelector("#add-layout"); + if (addBtn) { + addBtn.setAttribute("disabled", "disabled"); + } } /** @@ -307,6 +311,12 @@ export async function removeThisLayout(layoutName: string): Promise { console.log(`[Remove Layout] Layouts After Removal: ${JSON.stringify(layoutsBefore)}`); layoutNameElement.remove(); await fin.Platform.Layout.destroy({ layoutName, uuid: fin.me.uuid, name: fin.me.name }); + if (layoutName === "new") { + const addBtn = document.querySelector("#add-layout"); + if (addBtn) { + addBtn.removeAttribute("disabled"); + } + } } } /** diff --git a/how-to/web-layout/public/common/style/app.css b/how-to/web-layout/public/common/style/app.css index eb3a7a1..e656995 100644 --- a/how-to/web-layout/public/common/style/app.css +++ b/how-to/web-layout/public/common/style/app.css @@ -71,6 +71,7 @@ body { margin: 0; background-color: var(--brand-background); color: var(--brand-text); + width: 100%; } body.border { @@ -705,6 +706,10 @@ em { flex: 2; } +.fill_3 { + flex: 3; +} + .scroll { overflow: auto; } @@ -976,5 +981,5 @@ td, justify-content: stretch; align-items: stretch; height: 100%; - /* overflow: hidden; */ + width: 100%; } diff --git a/how-to/web-layout/public/platform/provider.html b/how-to/web-layout/public/platform/provider.html index 75609c5..fc91b44 100644 --- a/how-to/web-layout/public/platform/provider.html +++ b/how-to/web-layout/public/platform/provider.html @@ -24,9 +24,11 @@

Demonstrate web interop usage with multiple layouts

-
- -
+
+ +
From 9746c652cd902551bffcdb1e94524e058a21eecf Mon Sep 17 00:00:00 2001 From: John Date: Fri, 12 Jul 2024 20:13:17 +0100 Subject: [PATCH 16/18] updating version number --- how-to/web-layout/public/layouts/secondary.layout.fin.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/how-to/web-layout/public/layouts/secondary.layout.fin.json b/how-to/web-layout/public/layouts/secondary.layout.fin.json index 3c0741b..67bf81e 100644 --- a/how-to/web-layout/public/layouts/secondary.layout.fin.json +++ b/how-to/web-layout/public/layouts/secondary.layout.fin.json @@ -33,7 +33,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v18.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html" }, "title": "FDC3 Different Domain", "isClosable": true From 13b7d9d5286a795af7ff14710167b129420a0a83 Mon Sep 17 00:00:00 2001 From: Joe Ransegnola Date: Fri, 12 Jul 2024 14:14:00 -0500 Subject: [PATCH 17/18] fixing conflict. --- how-to/web-layout/public/layouts/secondary.layout.fin.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/how-to/web-layout/public/layouts/secondary.layout.fin.json b/how-to/web-layout/public/layouts/secondary.layout.fin.json index 3c0741b..b34e529 100644 --- a/how-to/web-layout/public/layouts/secondary.layout.fin.json +++ b/how-to/web-layout/public/layouts/secondary.layout.fin.json @@ -33,7 +33,8 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v18.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v18.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", + "name": "internal-generated-view-secondary-2" }, "title": "FDC3 Different Domain", "isClosable": true From 167008a20887090bed1ca5ffdffacdfad78b2feb Mon Sep 17 00:00:00 2001 From: John Date: Fri, 12 Jul 2024 20:18:23 +0100 Subject: [PATCH 18/18] Update package lock --- how-to/web-layout/public/common/style/app.css | 10 +- .../public/style/core-web-styles.css | 857 +++++++++--------- package-lock.json | 71 +- 3 files changed, 462 insertions(+), 476 deletions(-) diff --git a/how-to/web-layout/public/common/style/app.css b/how-to/web-layout/public/common/style/app.css index e656995..94c2abf 100644 --- a/how-to/web-layout/public/common/style/app.css +++ b/how-to/web-layout/public/common/style/app.css @@ -957,13 +957,13 @@ td, .tab { min-width: 120px; - min-height: 30px; - padding: 5px; - border: 2px solid var(--brand-border); + min-height: 30px; + padding: 5px; + border: 2px solid var(--brand-border); font-weight: 300; border-top: 2px solid var(--tab-border-top-color); - background-color: var(--tab-background-active-color); - opacity: 100%; + background-color: var(--tab-background-active-color); + opacity: 100%; cursor: pointer; } diff --git a/how-to/web-layout/public/style/core-web-styles.css b/how-to/web-layout/public/style/core-web-styles.css index d5bf42b..b760446 100644 --- a/how-to/web-layout/public/style/core-web-styles.css +++ b/how-to/web-layout/public/style/core-web-styles.css @@ -1,722 +1,741 @@ .lm_root { - position: relative; + position: relative; } .lm_row > .lm_item { - float: left; + float: left; } .lm_content { - overflow: hidden; - position: relative; + overflow: hidden; + position: relative; } .lm_dragging, .lm_dragging * { - cursor: move !important; - -webkit-user-select: none; - user-select: none; + cursor: move !important; + -webkit-user-select: none; + user-select: none; } .lm_maximised { - position: absolute; - top: 0; - left: 0; - z-index: 40; + position: absolute; + top: 0; + left: 0; + z-index: 40; } .lm_maximise_placeholder { - display: none; + display: none; } .lm_splitter { - position: relative; - z-index: 2; - touch-action: none; + position: relative; + z-index: 2; + touch-action: none; } .lm_splitter.lm_vertical .lm_drag_handle { - width: 100%; - position: absolute; - cursor: ns-resize; - touch-action: none; - -webkit-user-select: none; - user-select: none; + width: 100%; + position: absolute; + cursor: ns-resize; + touch-action: none; + -webkit-user-select: none; + user-select: none; } .lm_splitter.lm_horizontal { - float: left; - height: 100%; + float: left; + height: 100%; } .lm_splitter.lm_horizontal .lm_drag_handle { - height: 100%; - position: absolute; - cursor: ew-resize; - touch-action: none; - -webkit-user-select: none; - user-select: none; + height: 100%; + position: absolute; + cursor: ew-resize; + touch-action: none; + -webkit-user-select: none; + user-select: none; } .lm_header { - overflow: visible; - position: relative; - z-index: 1; - -webkit-user-select: none; - user-select: none; + overflow: visible; + position: relative; + z-index: 1; + -webkit-user-select: none; + user-select: none; } -.lm_header [class^=lm_] { - box-sizing: content-box !important; +.lm_header [class^='lm_'] { + box-sizing: content-box !important; } .lm_header .lm_controls { - position: absolute; - right: 3px; - display: flex; + position: absolute; + right: 3px; + display: flex; } .lm_header .lm_controls > * { - cursor: pointer; - float: left; - width: 18px; - height: 18px; - text-align: center; + cursor: pointer; + float: left; + width: 18px; + height: 18px; + text-align: center; } .lm_header .lm_tabs { - position: absolute; - display: flex; + position: absolute; + display: flex; } .lm_header .lm_tab { - cursor: pointer; - float: left; - height: 14px; - margin-top: 1px; - padding: 0px 10px 5px; - padding-right: 25px; - position: relative; - touch-action: none; + cursor: pointer; + float: left; + height: 14px; + margin-top: 1px; + padding: 0px 10px 5px; + padding-right: 25px; + position: relative; + touch-action: none; } .lm_header .lm_tab i { - width: 2px; - height: 19px; - position: absolute; + width: 2px; + height: 19px; + position: absolute; } .lm_header .lm_tab i.lm_left { - top: 0; - left: -2px; + top: 0; + left: -2px; } .lm_header .lm_tab i.lm_right { - top: 0; - right: -2px; + top: 0; + right: -2px; } .lm_header .lm_tab .lm_title { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; } .lm_header .lm_tab .lm_close_tab { - width: 14px; - height: 14px; - position: absolute; - top: 0; - right: 0; - text-align: center; + width: 14px; + height: 14px; + position: absolute; + top: 0; + right: 0; + text-align: center; } .lm_stack { - position: relative; + position: relative; } .lm_stack > .lm_items { - overflow: hidden; + overflow: hidden; } .lm_stack.lm_left > .lm_items { - position: absolute; - left: 20px; - top: 0; + position: absolute; + left: 20px; + top: 0; } .lm_stack.lm_right > .lm_items { - position: absolute; - right: 20px; - top: 0; + position: absolute; + right: 20px; + top: 0; } .lm_stack.lm_right > .lm_header { - position: absolute; - right: 0; - top: 0; + position: absolute; + right: 0; + top: 0; } .lm_stack.lm_bottom > .lm_items { - position: absolute; - bottom: 20px; + position: absolute; + bottom: 20px; } .lm_stack.lm_bottom > .lm_header { - position: absolute; - bottom: 0; + position: absolute; + bottom: 0; } .lm_left.lm_stack .lm_header, .lm_right.lm_stack .lm_header { - height: 100%; + height: 100%; } .lm_left.lm_dragProxy .lm_header, .lm_right.lm_dragProxy .lm_header, .lm_left.lm_dragProxy .lm_items, .lm_right.lm_dragProxy .lm_items { - float: left; + float: left; } .lm_left.lm_dragProxy .lm_header, .lm_right.lm_dragProxy .lm_header, .lm_left.lm_stack .lm_header, .lm_right.lm_stack .lm_header { - width: 20px; - vertical-align: top; + width: 20px; + vertical-align: top; } .lm_left.lm_dragProxy .lm_header .lm_tabs, .lm_right.lm_dragProxy .lm_header .lm_tabs, .lm_left.lm_stack .lm_header .lm_tabs, .lm_right.lm_stack .lm_header .lm_tabs { - transform-origin: left top; - top: 0; - width: 1000px; - /*hack*/ + transform-origin: left top; + top: 0; + width: 1000px; + /*hack*/ } .lm_left.lm_dragProxy .lm_header .lm_controls, .lm_right.lm_dragProxy .lm_header .lm_controls, .lm_left.lm_stack .lm_header .lm_controls, .lm_right.lm_stack .lm_header .lm_controls { - bottom: 0; - flex-flow: column; + bottom: 0; + flex-flow: column; } .lm_dragProxy.lm_left .lm_header .lm_tabs, .lm_stack.lm_left .lm_header .lm_tabs { - transform: rotate(-90deg) scaleX(-1); - left: 0; + transform: rotate(-90deg) scaleX(-1); + left: 0; } .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab, .lm_stack.lm_left .lm_header .lm_tabs .lm_tab { - transform: scaleX(-1); - margin-top: 1px; + transform: scaleX(-1); + margin-top: 1px; } .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list, .lm_stack.lm_left .lm_header .lm_tabdropdown_list { - top: initial; - right: initial; - left: 20px; + top: initial; + right: initial; + left: 20px; } .lm_dragProxy.lm_right .lm_content { - float: left; + float: left; } .lm_dragProxy.lm_right .lm_header .lm_tabs, .lm_stack.lm_right .lm_header .lm_tabs { - transform: rotate(90deg) scaleX(1); - left: 100%; - margin-left: 0; + transform: rotate(90deg) scaleX(1); + left: 100%; + margin-left: 0; } .lm_dragProxy.lm_right .lm_header .lm_controls, .lm_stack.lm_right .lm_header .lm_controls { - left: 3px; + left: 3px; } .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list, .lm_stack.lm_right .lm_header .lm_tabdropdown_list { - top: initial; - right: 20px; + top: initial; + right: 20px; } .lm_dragProxy.lm_bottom .lm_header, .lm_stack.lm_bottom .lm_header { - width: 100%; + width: 100%; } .lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab { - margin-top: 0; - border-top: none; + margin-top: 0; + border-top: none; } .lm_dragProxy.lm_bottom .lm_header .lm_controls, .lm_stack.lm_bottom .lm_header .lm_controls { - top: 3px; + top: 3px; } .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list, .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list { - top: initial; - bottom: 20px; + top: initial; + bottom: 20px; } .lm_drop_tab_placeholder { - float: left; - width: 100px; - visibility: hidden; + float: left; + width: 100px; + visibility: hidden; } .lm_header .lm_controls .lm_tabdropdown:before { - content: ''; - width: 0; - height: 0; - vertical-align: middle; - display: inline-block; - border-top: 5px dashed; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - color: white; + content: ''; + width: 0; + height: 0; + vertical-align: middle; + display: inline-block; + border-top: 5px dashed; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + color: white; } .lm_header .lm_tabdropdown_list { - position: absolute; - top: 20px; - right: 0; - z-index: 5; - overflow: hidden; + position: absolute; + top: 20px; + right: 0; + z-index: 5; + overflow: hidden; } .lm_header .lm_tabdropdown_list .lm_tab { - clear: both; - padding-right: 10px; - margin: 0; + clear: both; + padding-right: 10px; + margin: 0; } .lm_header .lm_tabdropdown_list .lm_tab .lm_title { - width: 100px; + width: 100px; } .lm_header .lm_tabdropdown_list .lm_close_tab { - display: none !important; + display: none !important; } /*********************************** * Drag Proxy ***********************************/ .lm_dragProxy { - position: absolute; - top: 0; - left: 0; - z-index: 30; + position: absolute; + top: 0; + left: 0; + z-index: 30; } .lm_dragProxy .lm_header { - background: transparent; + background: transparent; } .lm_dragProxy .lm_content { - border-top: none; - overflow: hidden; + border-top: none; + overflow: hidden; } .lm_dropTargetIndicator { - display: none; - position: absolute; - z-index: 35; - transition: all 200ms ease; + display: none; + position: absolute; + z-index: 35; + transition: all 200ms ease; } .lm_dropTargetIndicator .lm_inner { - width: 100%; - height: 100%; - position: relative; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: relative; + top: 0; + left: 0; } .lm_transition_indicator { - display: none; - width: 20px; - height: 20px; - position: absolute; - top: 0; - left: 0; - z-index: 20; + display: none; + width: 20px; + height: 20px; + position: absolute; + top: 0; + left: 0; + z-index: 20; } .lm_popin { - width: 20px; - height: 20px; - position: absolute; - bottom: 0; - right: 0; - z-index: 9999; + width: 20px; + height: 20px; + position: absolute; + bottom: 0; + right: 0; + z-index: 9999; } .lm_popin > * { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; } .lm_popin > .lm_bg { - z-index: 10; + z-index: 10; } .lm_popin > .lm_icon { - z-index: 20; + z-index: 20; } :root { - /* Colors used for dark theme */ - --of-default-black: black; - --of-default-charcoal-dark: #111118; - --of-default-charcoal-light: #2A292F; - --of-default-grey-dark: #A5AEBD; - --of-default-grey-dark-opacity: #A5AEBD2E; - --of-default-grey-light: #F4F5F8; - --of-default-grey-light-opacity: #F4F5F82E; - --of-default-white: white; - --of-dark-theme: #7B7BFF; - --of-light-theme: #504CFF; - --of-highlight: #958EFF; - --of-highlight-opacity: #958EFF26; - --of-default-red: red; - --of-default-red-negative: #F55D5F; - --of-positive-green: #29AF6F; - - /* Main colors to set from the above list */ - --main-background-color: var(--of-default-charcoal-dark); - --secondary-background-color: var(--of-default-black); - --tab-background-color: var(--of-default-charcoal-light); - --tab-button-hover-color: var(--of-default-grey-dark-opacity); - --tab-button-active-color: var(--of-default-grey-light-opacity); - --tab-border-top-color: var(--of-dark-theme); - --tab-border-top-highlight-color: var(--of-light-theme); - --focused-tab-border-top-color: var(--of-positive-green); - --focused-tab-border-top-highlight-color: #3cf89d; - --tab-font-color: var(--of-default-white); - --top-bar-close-button-color: var(--of-default-red); - --top-bar-close-button-active-color: var(--of-default-red-negative); - --drop-target-border-color: var(--of-highlight); - --drop-target-background-color: var(--of-highlight-opacity); - - /* Colors that default to dependent on Main Colors, but should be uniquely editable */ - --frame-background-color: var(--secondary-background-color); - --body-font-color: var(--tab-font-color); - --splitter-color: var(--secondary-background-color); - --splitter-hover-color: var(--tab-background-color); - --tabs-bar-background-color: var(--secondary-background-color); - --title-bar-background-color: var(--main-background-color); - --color-behind-views: var(--main-background-color); /* only seen if there's a problem with the view */ - --tab-background-active-color: var(--tab-background-color); - --top-bar-button-hover-color: var(--tab-background-color); - --top-bar-button-active-color: var(--tab-button-active-color); - - /* Measurements for various components */ - --title-bar-height: 30px; - --title-bar-border-bottom-height: 1px; - --header-border-bottom-height: 2px; - --corner-radius: 0px; - --splitter-width: 4px; - - --body-container-padding-top: 0px; - --body-container-padding-right: 0px; - --body-container-padding-bottom: 0px; - --body-container-padding-left: 0px; - - --body-container-width: calc(100% - var(--body-container-padding-left) - var(--body-container-padding-right)); - --body-container-height: calc(100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - var(--body-container-padding-bottom)); - --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) var(--body-container-padding-bottom) var(--body-container-padding-left); - - --layout-container-padding-top: 4px; - --layout-container-padding-right: 4px; - --layout-container-padding-bottom: 4px; - --layout-container-padding-left: 4px; - --layout-container-from-top: calc(var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top)); - - --layout-container-width: calc(100% - var(--layout-container-padding-left) - var(--layout-container-padding-right)); - --layout-container-height: calc(100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - var(--layout-container-padding-bottom)); - --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) var(--layout-container-padding-bottom) var(--layout-container-padding-left); - - /* Top Bar and Tab Icons */ - --close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); - --minimize-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); - --expand-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg=="); - --tab-close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); - --new-tab-button-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJNQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TslXgAAADF0Uk5TAA1Zm8rs+utYJp72//WcJAmM+4oIJdTRIzHq6S8KiQ70DFaYx/lVC5kihtLPB+chLkL8Um8AAAM+SURBVHic7d3rVtNQEEDhlJZwO9xB0CAW2iAiou//dOLCpas2OTNBJtNp9n6COZ+t1T8zRUFERERERERE1FujjfFksyy3JuPtkfcsDu3s7qU/7R8ces/Tc0fHJ2mh8vTMe6Y+O3+Xlrq49J6qv95/WH5/StWV91x9dd74/meBgXwGPjZ8/n9/C4bx98Bx2/tTuvaerY92TtoByiF8CXbb35/S2Hs6+z7t5QCmN97zmbeRe39Kt97zmTfOA8y85zNvkgeYe89n3mYeoPKez7wyD1B7z2de/v0pec9nHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID3fOYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeM9nHgAAAAAAAAAAAAAAAAAAwIoDvOz/lwZe9V59v2Bh/3/0ut8vWNr/H72O9wua9v9Hr8v9gub9/9HT3y9o2/8fPe39gvb9/9FT3i/I7P+Pnup+QW7/f/RU9wuy+/+jp7hfkN//Hz3F/QJh/3/05PsFwv7/6Mn3C4T9/9GT7xcI+/+jJ98vCP//33zy/YLBA2x5j2ib/BUY/F+Cg/8Z3PYe0bY7EWC07z2jZdPPIkBx4D2kZffy+4vDNf4hrL8oAIpT7zHtetC8vzj66j2nVY/fVADFZeU9qU1P33XvL4qrtRR4+qF9//Nn4MJ72rfvUf3n/6uz6zX7LagflN//vx+C8dR76Ldreq/6/funm9vZvKq9Z//f6mo+u1P8+6+3pIG95zMPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwHs+8wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC85zMPAAAAAAAAAAAAAAAAAABgkADCqk55/3/0hPsF8v7/6An3C+T9/9ET7hfI+/+jJ9wvkPf/Ry9/v0Cz/z962fsFmv3/0cvdL9Dt/49e5n6Bbv9/9NrvF2j3/0ev7X6Bfv9/9JrvF3TZ/x+9pvsF3fb/R2/pfkH3/f/RW7hf8Lr9/9F7uV+wcvv/iYiIiIiIiGjt+wlaXmsfieItGAAAAABJRU5ErkJggg=="); + /* Colors used for dark theme */ + --of-default-black: black; + --of-default-charcoal-dark: #111118; + --of-default-charcoal-light: #2a292f; + --of-default-grey-dark: #a5aebd; + --of-default-grey-dark-opacity: #a5aebd2e; + --of-default-grey-light: #f4f5f8; + --of-default-grey-light-opacity: #f4f5f82e; + --of-default-white: white; + --of-dark-theme: #7b7bff; + --of-light-theme: #504cff; + --of-highlight: #958eff; + --of-highlight-opacity: #958eff26; + --of-default-red: red; + --of-default-red-negative: #f55d5f; + --of-positive-green: #29af6f; + + /* Main colors to set from the above list */ + --main-background-color: var(--of-default-charcoal-dark); + --secondary-background-color: var(--of-default-black); + --tab-background-color: var(--of-default-charcoal-light); + --tab-button-hover-color: var(--of-default-grey-dark-opacity); + --tab-button-active-color: var(--of-default-grey-light-opacity); + --tab-border-top-color: var(--of-dark-theme); + --tab-border-top-highlight-color: var(--of-light-theme); + --focused-tab-border-top-color: var(--of-positive-green); + --focused-tab-border-top-highlight-color: #3cf89d; + --tab-font-color: var(--of-default-white); + --top-bar-close-button-color: var(--of-default-red); + --top-bar-close-button-active-color: var(--of-default-red-negative); + --drop-target-border-color: var(--of-highlight); + --drop-target-background-color: var(--of-highlight-opacity); + + /* Colors that default to dependent on Main Colors, but should be uniquely editable */ + --frame-background-color: var(--secondary-background-color); + --body-font-color: var(--tab-font-color); + --splitter-color: var(--secondary-background-color); + --splitter-hover-color: var(--tab-background-color); + --tabs-bar-background-color: var(--secondary-background-color); + --title-bar-background-color: var(--main-background-color); + --color-behind-views: var(--main-background-color); /* only seen if there's a problem with the view */ + --tab-background-active-color: var(--tab-background-color); + --top-bar-button-hover-color: var(--tab-background-color); + --top-bar-button-active-color: var(--tab-button-active-color); + + /* Measurements for various components */ + --title-bar-height: 30px; + --title-bar-border-bottom-height: 1px; + --header-border-bottom-height: 2px; + --corner-radius: 0px; + --splitter-width: 4px; + + --body-container-padding-top: 0px; + --body-container-padding-right: 0px; + --body-container-padding-bottom: 0px; + --body-container-padding-left: 0px; + + --body-container-width: calc( + 100% - var(--body-container-padding-left) - var(--body-container-padding-right) + ); + --body-container-height: calc( + 100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - + var(--body-container-padding-bottom) + ); + --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) + var(--body-container-padding-bottom) var(--body-container-padding-left); + + --layout-container-padding-top: 4px; + --layout-container-padding-right: 4px; + --layout-container-padding-bottom: 4px; + --layout-container-padding-left: 4px; + --layout-container-from-top: calc( + var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top) + ); + + --layout-container-width: calc( + 100% - var(--layout-container-padding-left) - var(--layout-container-padding-right) + ); + --layout-container-height: calc( + 100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - + var(--layout-container-padding-bottom) + ); + --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) + var(--layout-container-padding-bottom) var(--layout-container-padding-left); + + /* Top Bar and Tab Icons */ + --close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); + --minimize-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); + --expand-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg=='); + --tab-close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); + --new-tab-button-url: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJNQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TslXgAAADF0Uk5TAA1Zm8rs+utYJp72//WcJAmM+4oIJdTRIzHq6S8KiQ70DFaYx/lVC5kihtLPB+chLkL8Um8AAAM+SURBVHic7d3rVtNQEEDhlJZwO9xB0CAW2iAiou//dOLCpas2OTNBJtNp9n6COZ+t1T8zRUFERERERERE1FujjfFksyy3JuPtkfcsDu3s7qU/7R8ces/Tc0fHJ2mh8vTMe6Y+O3+Xlrq49J6qv95/WH5/StWV91x9dd74/meBgXwGPjZ8/n9/C4bx98Bx2/tTuvaerY92TtoByiF8CXbb35/S2Hs6+z7t5QCmN97zmbeRe39Kt97zmTfOA8y85zNvkgeYe89n3mYeoPKez7wyD1B7z2de/v0pec9nHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID3fOYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeM9nHgAAAAAAAAAAAAAAAAAAwIoDvOz/lwZe9V59v2Bh/3/0ut8vWNr/H72O9wua9v9Hr8v9gub9/9HT3y9o2/8fPe39gvb9/9FT3i/I7P+Pnup+QW7/f/RU9wuy+/+jp7hfkN//Hz3F/QJh/3/05PsFwv7/6Mn3C4T9/9GT7xcI+/+jJ98vCP//33zy/YLBA2x5j2ib/BUY/F+Cg/8Z3PYe0bY7EWC07z2jZdPPIkBx4D2kZffy+4vDNf4hrL8oAIpT7zHtetC8vzj66j2nVY/fVADFZeU9qU1P33XvL4qrtRR4+qF9//Nn4MJ72rfvUf3n/6uz6zX7LagflN//vx+C8dR76Ldreq/6/funm9vZvKq9Z//f6mo+u1P8+6+3pIG95zMPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwHs+8wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC85zMPAAAAAAAAAAAAAAAAAABgkADCqk55/3/0hPsF8v7/6An3C+T9/9ET7hfI+/+jJ9wvkPf/Ry9/v0Cz/z962fsFmv3/0cvdL9Dt/49e5n6Bbv9/9NrvF2j3/0ev7X6Bfv9/9JrvF3TZ/x+9pvsF3fb/R2/pfkH3/f/RW7hf8Lr9/9F7uV+wcvv/iYiIiIiIiGjt+wlaXmsfieItGAAAAABJRU5ErkJggg=='); } body { - min-height: 100%; - width: 100%; - margin: 0; - padding: 0px; - overflow: hidden; - color: var(--body-font-color); - background-color: var(--main-background-color); + min-height: 100%; + width: 100%; + margin: 0; + padding: 0px; + overflow: hidden; + color: var(--body-font-color); + background-color: var(--main-background-color); } html { - height: 100%; - width: 100%; - padding: 0px; - margin: 0; - overflow: hidden; + height: 100%; + width: 100%; + padding: 0px; + margin: 0; + overflow: hidden; } -body, select, button, li, span, div { - font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif; - color: var(--body-font-color); +body, +select, +button, +li, +span, +div { + font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif; + color: var(--body-font-color); } #of-frame-main { - height: 100%; - width: 100%; - padding: 0px; - margin: 0; - position: absolute; - overflow: hidden; - background-color: var(--frame-background-color); + height: 100%; + width: 100%; + padding: 0px; + margin: 0; + position: absolute; + overflow: hidden; + background-color: var(--frame-background-color); } #title-bar { - background: var(--title-bar-background-color); - width: 100%; - height: var(--title-bar-height); - display: flex; - border-bottom: var(--title-bar-border-bottom-height) solid rgba(255, 255, 255, 0.1); + background: var(--title-bar-background-color); + width: 100%; + height: var(--title-bar-height); + display: flex; + border-bottom: var(--title-bar-border-bottom-height) solid rgba(255, 255, 255, 0.1); } .title-bar-draggable { - position: relative; - flex-grow: 1; - margin: 7px 0 0 7px; /* leave grabbable margin for resize */ - -webkit-app-region: drag; - -webkit-user-select: none; + position: relative; + flex-grow: 1; + margin: 7px 0 0 7px; /* leave grabbable margin for resize */ + -webkit-app-region: drag; + -webkit-user-select: none; } div.wrapper_title { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 3vw; - opacity: 0.5; - color: var(--tab-font-color); /* this is the text you see when a view isn't showing */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 3vw; + opacity: 0.5; + color: var(--tab-font-color); /* this is the text you see when a view isn't showing */ } div.placeholder_image { - opacity: 0.7; - color: var(--tab-background-color); + opacity: 0.7; + color: var(--tab-background-color); } div.placeholder_image img { - height: 100%; - width: 100%; - filter: blur(6px); + height: 100%; + width: 100%; + filter: blur(6px); } #buttons-wrapper { - -webkit-app-region: none; - cursor: pointer; - user-select: none; - display: flex; - justify-content: space-between; - align-items: center; + -webkit-app-region: none; + cursor: pointer; + user-select: none; + display: flex; + justify-content: space-between; + align-items: center; } .button { - -webkit-app-region: no-drag; - vertical-align: middle; - height: 100%; - width: 30px; - background-size: 14px; - background-position: center; - background-repeat: no-repeat; + -webkit-app-region: no-drag; + vertical-align: middle; + height: 100%; + width: 30px; + background-size: 14px; + background-position: center; + background-repeat: no-repeat; } .button:hover { - background-color: var(--top-bar-button-hover-color); + background-color: var(--top-bar-button-hover-color); } .button:active { - background-color: var(--top-bar-button-active-color); + background-color: var(--top-bar-button-active-color); } #close-button:hover { - background-color: var(--top-bar-close-button-color); + background-color: var(--top-bar-close-button-color); } #close-button:active { - background-color: var(--top-bar-close-button-active-color); + background-color: var(--top-bar-close-button-active-color); } #body-container { - height: var(--body-container-height); - width: var(--body-container-width); - padding: var(--body-container-padding); + height: var(--body-container-height); + width: var(--body-container-width); + padding: var(--body-container-padding); } #layout-container { - height: var(--layout-container-height); - width: var(--layout-container-width); - padding: var(--layout-container-padding); + height: var(--layout-container-height); + width: var(--layout-container-width); + padding: var(--layout-container-padding); } .lm_header .lm_tab .lm_close_tab { - background-image: var(--tab-close-button-url); - height: 14px; - width: 14px; - background-size: 12px; - background-position: center; - border-radius: 50%; - position: absolute; /* Must be absolute, otherwise we end up with overflow errors due to inline styles */ - top: 6px; - right: 6px; + background-image: var(--tab-close-button-url); + height: 14px; + width: 14px; + background-size: 12px; + background-position: center; + border-radius: 50%; + position: absolute; /* Must be absolute, otherwise we end up with overflow errors due to inline styles */ + top: 6px; + right: 6px; } .lm_header .lm_tab .lm_close_tab:hover { - background-color: var(--tab-button-hover-color); + background-color: var(--tab-button-hover-color); } .lm_header .lm_tab .lm_close_tab:active { - background-color: var(--tab-button-active-color); + background-color: var(--tab-button-active-color); } #close-button { - background-image: var(--close-button-url); + background-image: var(--close-button-url); } #expand-button { - background-image: var(--expand-button-url); + background-image: var(--expand-button-url); } #minimize-button { - background-image: var(--minimize-button-url); + background-image: var(--minimize-button-url); } .lm_goldenlayout { - background-color: var(--frame-background-color); + background-color: var(--frame-background-color); } .lm_header { - -webkit-app-region: no-drag; - box-shadow: none; - border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color); - height: 25px; - user-select: none; + -webkit-app-region: no-drag; + box-shadow: none; + border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color); + height: 25px; + user-select: none; } .lm_tabs { - -webkit-app-region: no-drag; - background-color: var(--tabs-bar-background-color); - border-top-left-radius: var(--corner-radius); - border-top-right-radius: var(--corner-radius); - width: 100%; + -webkit-app-region: no-drag; + background-color: var(--tabs-bar-background-color); + border-top-left-radius: var(--corner-radius); + border-top-right-radius: var(--corner-radius); + width: 100%; } .lm_header .lm_tab { - border-top-right-radius: var(--corner-radius); - border-top-left-radius: var(--corner-radius); - background-color: var(--tab-background-color); - color: var(--tab-font-color); - height: 100%; - margin-right: 0px; - margin-top: 0px; - white-space: nowrap; - overflow-x: hidden; + border-top-right-radius: var(--corner-radius); + border-top-left-radius: var(--corner-radius); + background-color: var(--tab-background-color); + color: var(--tab-font-color); + height: 100%; + margin-right: 0px; + margin-top: 0px; + white-space: nowrap; + overflow-x: hidden; } .lm_header .lm_tabs .lm_tab { - padding-left: 8px; - padding-top: 2px; - padding-right: 8px; - padding-bottom: 2px; - border-top: 2px solid var(--tab-background-color); - opacity: 60%; - z-index: 100 !important; /* Necessary to make sure that the controls panel doesn't appear above the tabs. This is to overwrite an inline style coming from golden-layouts. */ + padding-left: 8px; + padding-top: 2px; + padding-right: 8px; + padding-bottom: 2px; + border-top: 2px solid var(--tab-background-color); + opacity: 60%; + z-index: 100 !important; /* Necessary to make sure that the controls panel doesn't appear above the tabs. This is to overwrite an inline style coming from golden-layouts. */ } .lm_header .lm_tabs .lm_tab:hover { - border-top: 2px solid var(--tab-border-top-color); /* might be able to take this out */ - opacity: 80%; + border-top: 2px solid var(--tab-border-top-color); /* might be able to take this out */ + opacity: 80%; } .lm_header .lm_tab .lm_title { - margin-right: 10px; - line-height: 25px; - font-size: 12px; - vertical-align: middle; - padding: 0; - white-space: nowrap; - color: var(--tab-font-color); - font-weight: 300; + margin-right: 10px; + line-height: 25px; + font-size: 12px; + vertical-align: middle; + padding: 0; + white-space: nowrap; + color: var(--tab-font-color); + font-weight: 300; } .lm_title { - width: 120px; - white-space: nowrap; + width: 120px; + white-space: nowrap; } .lm_header .lm_tab.lm_active { - border-top: 2px solid var(--tab-border-top-color); - background-color: var(--tab-background-active-color); - opacity: 100%; + border-top: 2px solid var(--tab-border-top-color); + background-color: var(--tab-background-active-color); + opacity: 100%; } .lm_header .lm_tabs .lm_active:hover { - border-color: var(--tab-border-top-highlight-color); - opacity: 90%; + border-color: var(--tab-border-top-highlight-color); + opacity: 90%; } .lm_content { - background-color: var(--color-behind-views); - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; + background-color: var(--color-behind-views); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } .lm_splitter { - background-color: var(--splitter-color); - opacity: 0.001; + background-color: var(--splitter-color); + opacity: 0.001; transition: opacity 200ms ease; } .lm_splitter:hover, .lm_splitter.lm_dragging { - background-color: var(--splitter-hover-color); - opacity: 1; + background-color: var(--splitter-hover-color); + opacity: 1; } .lm_dropTargetIndicator { - box-shadow: none; - outline: none; - transition: all 200ms ease; - background: var(--drop-target-background-color); - border: 1px solid var(--drop-target-border-color); - box-sizing: border-box; - border-radius: 2px; - margin-top: 1px; + box-shadow: none; + outline: none; + transition: all 200ms ease; + background: var(--drop-target-background-color); + border: 1px solid var(--drop-target-border-color); + box-sizing: border-box; + border-radius: 2px; + margin-top: 1px; } .lm_dropTargetIndicator .lm_inner { - background: var(--tab-background-color); - opacity: .2 + background: var(--tab-background-color); + opacity: 0.2; } .lm_tabdropdown_list { - z-index: 101 !important; + z-index: 101 !important; } - + .lm_header .lm_tabdropdown_list .lm_tab { - background-color: var(--secondary-background-color); + background-color: var(--secondary-background-color); } .lm_header .lm_tabdropdown_list .lm_tab:hover { - background-color: var(--main-background-color); + background-color: var(--main-background-color); } -.lm_header .lm_controls li.lm_tabdropdown:before{ - color: var(--tab-font-color) +.lm_header .lm_controls li.lm_tabdropdown:before { + color: var(--tab-font-color); } .lm_controls li { position: relative; background-position: center center; background-repeat: no-repeat; - opacity: .4; - transition: opacity 300ms ease + opacity: 0.4; + transition: opacity 300ms ease; } .lm_controls li:hover { - opacity: 1 + opacity: 1; } .lm_controls .lm_popout { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=) + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=); } .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); } .lm_controls .lm_close { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=) + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); } .lm_maximised .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC) + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); } -.lm_header>.lm_tabs>.focused_tab { - border-color: var(--focused-tab-border-top-color); +.lm_header > .lm_tabs > .focused_tab { + border-color: var(--focused-tab-border-top-color); } -.lm_header>.lm_tabs>.focused_tab:hover { - border-color: var(--focused-tab-border-top-highlight-color); +.lm_header > .lm_tabs > .focused_tab:hover { + border-color: var(--focused-tab-border-top-highlight-color); } .tab-icon { - height: 12px; - width: 12px; - vertical-align: baseline; - margin-right: 7px; + height: 12px; + width: 12px; + vertical-align: baseline; + margin-right: 7px; } .lm_tabs .newTabButton { - background-image: var(--new-tab-button-url); - filter: invert(.3); + background-image: var(--new-tab-button-url); + filter: invert(0.3); background-size: cover; width: 12px; height: 12px; @@ -726,12 +745,12 @@ div.placeholder_image img { } .lm_tabs .newTabButton:hover { - filter: invert(0); + filter: invert(0); } :root.light-theme .newTabButton { - filter: invert(.7); + filter: invert(0.7); } :root.light-theme .newTabButton:hover { - filter: invert(1); -} \ No newline at end of file + filter: invert(1); +} diff --git a/package-lock.json b/package-lock.json index 3f02785..7d5b0b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "openfin-web-starter", - "version": "18.0.0", + "version": "19.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "openfin-web-starter", - "version": "18.0.0", + "version": "19.0.0", "license": "SEE LICENSE IN LICENSE.MD", "workspaces": [ "how-to/*" @@ -20,7 +20,7 @@ }, "how-to/cloud-interop": { "name": "openfin-web--cloud-interop", - "version": "18.0.0", + "version": "19.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", @@ -50,7 +50,7 @@ }, "how-to/cloud-interop-basic": { "name": "openfin-web--cloud-interop-basic", - "version": "18.0.0", + "version": "19.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", @@ -81,7 +81,7 @@ }, "how-to/web-client-api": { "name": "openfin-web--web-client-api", - "version": "18.0.0", + "version": "19.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", @@ -110,7 +110,7 @@ }, "how-to/web-interop": { "name": "openfin-web--web-interop", - "version": "18.0.0", + "version": "19.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", @@ -139,7 +139,7 @@ }, "how-to/web-interop-basic": { "name": "openfin-web--web-interop-basic", - "version": "18.0.0", + "version": "19.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", @@ -168,7 +168,7 @@ }, "how-to/web-interop-support-context-and-intents": { "name": "openfin-web--web-interop-support-context-and-intents", - "version": "18.0.0", + "version": "19.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", @@ -198,7 +198,7 @@ }, "how-to/web-layout": { "name": "openfin-web--web-layout", - "version": "18.0.0", + "version": "19.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", @@ -227,7 +227,7 @@ }, "how-to/web-layout-basic": { "name": "openfin-web--web-layout-basic", - "version": "18.0.0", + "version": "19.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", @@ -254,39 +254,6 @@ "webpack-cli": "^5.1.4" } }, - "how-to/web-layout/node_modules/@openfin/core": { - "version": "38.82.63", - "resolved": "https://registry.npmjs.org/@openfin/core/-/core-38.82.63.tgz", - "integrity": "sha512-Hg0eULz41liypIh0tv3nntfqgGoNq/wV9clWwV1wwiDKgQlUVkMiwjf2irpHpl+QLcN1NV3OqV5NP2Mbuh9Vbg==", - "dependencies": { - "@types/node": "^20.14.2", - "lodash": "^4.17.21", - "ws": "^7.3.0" - } - }, - "how-to/web-layout/node_modules/@openfin/core-web": { - "version": "0.38.63", - "resolved": "https://registry.npmjs.org/@openfin/core-web/-/core-web-0.38.63.tgz", - "integrity": "sha512-mGaHqKOx5I0701en1vNbVmhMs7CJMk6p/Y5kRSa5lf6eFEl+G1vezjry+KDx8aSLskxlbjHoWN/NCvwlLln2wA==", - "dependencies": { - "buffer": "6.0.3", - "events": "^3.3.0", - "golden-layout": "2.6.0", - "lodash": "4.17.21", - "uuid": "^8.3.2" - }, - "peerDependencies": { - "@openfin/core": "38.82.63" - } - }, - "how-to/web-layout/node_modules/@types/node": { - "version": "20.14.10", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz", - "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==", - "dependencies": { - "undici-types": "~5.26.4" - } - }, "node_modules/@babel/code-frame": { "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz", @@ -396,9 +363,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz", - "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==", + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz", + "integrity": "sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -2348,9 +2315,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.825", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.825.tgz", - "integrity": "sha512-OCcF+LwdgFGcsYPYC5keEEFC2XT0gBhrYbeGzHCx7i9qRFbzO/AqTmc/C/1xNhJj+JA7rzlN7mpBuStshh96Cg==", + "version": "1.4.827", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.827.tgz", + "integrity": "sha512-VY+J0e4SFcNfQy19MEoMdaIcZLmDCprqvBtkii1WTCTQHpRvf5N8+3kTYCgL/PcntvwQvmMJWTuDPsq+IlhWKQ==", "dev": true }, "node_modules/emoji-regex": { @@ -6915,9 +6882,9 @@ } }, "node_modules/webpack": { - "version": "5.92.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.1.tgz", - "integrity": "sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==", + "version": "5.93.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz", + "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.3",