From 937b8d03a49e69c00a4639531e1ddecb2e1ea060 Mon Sep 17 00:00:00 2001 From: John Date: Fri, 15 Nov 2024 11:00:18 +0000 Subject: [PATCH] Update to v20 --- README.md | 12 +- docs/known-issues.md | 4 + how-to/cloud-interop-basic/package.json | 8 +- how-to/cloud-interop/README.md | 2 +- how-to/cloud-interop/package.json | 8 +- .../public/layouts/default.layout.fin.json | 4 +- .../public/style/core-web-styles.css | 888 +++++++++--------- how-to/web-client-api/README.md | 2 +- .../web-client-api/client/src/shim-client.ts | 2 +- how-to/web-client-api/package.json | 6 +- how-to/web-interop-basic/README.md | 2 +- how-to/web-interop-basic/package.json | 6 +- .../README.md | 2 +- .../client/src/platform/apps/apps.ts | 1 - .../package.json | 8 +- .../public/common/apps-contact.json | 30 +- .../public/common/apps-fdc3-2-0.json | 12 +- .../public/common/apps-finance.json | 16 +- .../public/common/apps-interop.json | 12 +- .../public/common/apps-manager.json | 30 +- .../public/layouts/default.layout.fin.json | 34 +- .../public/platform/apps/app-picker.html | 2 +- .../platform/intents/instance-picker.html | 2 +- .../platform/settings/settings-dialog.html | 2 +- .../public/style/core-web-styles.css | 888 +++++++++--------- how-to/web-interop/README.md | 2 +- how-to/web-interop/package.json | 6 +- .../public/layouts/default.layout.fin.json | 4 +- .../public/style/core-web-styles.css | 888 +++++++++--------- how-to/web-layout-basic/README.md | 2 +- how-to/web-layout-basic/package.json | 6 +- .../public/style/core-web-styles.css | 888 +++++++++--------- how-to/web-layout/README.md | 2 +- how-to/web-layout/package.json | 6 +- .../public/layouts/default.layout.fin.json | 6 +- .../public/layouts/secondary.layout.fin.json | 2 +- .../public/style/core-web-styles.css | 888 +++++++++--------- package-lock.json | 92 +- package.json | 2 +- 39 files changed, 2425 insertions(+), 2352 deletions(-) diff --git a/README.md b/README.md index 6265fc2..e3b03b7 100644 --- a/README.md +++ b/README.md @@ -38,9 +38,9 @@ Want to learn how to use our Channel API, Interop API or FDC3 API inside of a de | Web Interop | Description | Live Launch | | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Web Interop Basic](./how-to/web-interop-basic) | This basic how-to provides a way of configuring a a webpage with a number of framed applications that share contextual information. | [Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-interop-basic/platform/provider.html) | -| [Web Interop](./how-to/web-interop) | This example how-to provides a way of configuring a a webpage with a number of framed applications using our layout system as well as a left hand panel so show that you can combine layout and iframe based content. | [Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-interop/platform/provider.html) | -| [Web Interop - Support Context and Intents](./how-to/web-interop-support-context-and-intents) | This is an example of a platform that has utilized the options of having a custom interop broker and a custom layout override to implement a platform that supports FDC3 as well as enhanced layout capabilities.. | [Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-interop-support-context-and-intents/platform/provider.html) | +| [Web Interop Basic](./how-to/web-interop-basic) | This basic how-to provides a way of configuring a a webpage with a number of framed applications that share contextual information. | [Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-interop-basic/platform/provider.html) | +| [Web Interop](./how-to/web-interop) | This example how-to provides a way of configuring a a webpage with a number of framed applications using our layout system as well as a left hand panel so show that you can combine layout and iframe based content. | [Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-interop/platform/provider.html) | +| [Web Interop - Support Context and Intents](./how-to/web-interop-support-context-and-intents) | This is an example of a platform that has utilized the options of having a custom interop broker and a custom layout override to implement a platform that supports FDC3 as well as enhanced layout capabilities.. | [Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-interop-support-context-and-intents/platform/provider.html) | ### Cloud Interop @@ -49,7 +49,7 @@ Want to learn how to use our Cloud Interop to connect your Web Browser based app | Cloud Interop | Description | Live Launch | | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [Cloud Interop Basic](./how-to/cloud-interop-basic) | This basic how-to is based on the [Web Interop Basic](./how-to/web-interop-basic) and extends it by using our @openfin/cloud-interop packages to share context through the cloud. | | -| [Cloud Interop](./how-to/cloud-interop) | This how-to is based on the [Web Interop](./how-to/web-interop) and extends it by using our @openfin/cloud-interop packages to share context through the cloud. | [Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/cloud-interop/platform/provider.html) | +| [Cloud Interop](./how-to/cloud-interop) | This how-to is based on the [Web Interop](./how-to/web-interop) and extends it by using our @openfin/cloud-interop packages to share context through the cloud. | [Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/cloud-interop/platform/provider.html) | ### Web Layout @@ -57,8 +57,8 @@ A number of our examples will use the OpenFin Layout System but the examples bel | Web Layout | Description | Live Launch | | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [Web Layout Basic](./how-to/web-layout-basic) | This basic how-to focuses on the bare minimum to set up an OpenFin Layout. It doesn't provide content examples and simply loads third party content and it gives an example of how you can provide the window.name for your content through your snapshot/layout. | [Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-layout-basic/platform/provider.html) | -| [Web Layout](./how-to/web-layout) | This how-to focuses on the setting up a multi layout web page. It introduces a Layout Manager Override to support multiple layouts and shows a basic button to switch between them. The layouts are available in the public/layouts folder and can be modified. | [Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-layout/platform/provider.html) | +| [Web Layout Basic](./how-to/web-layout-basic) | This basic how-to focuses on the bare minimum to set up an OpenFin Layout. It doesn't provide content examples and simply loads third party content and it gives an example of how you can provide the window.name for your content through your snapshot/layout. | [Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-layout-basic/platform/provider.html) | +| [Web Layout](./how-to/web-layout) | This how-to focuses on the setting up a multi layout web page. It introduces a Layout Manager Override to support multiple layouts and shows a basic button to switch between them. The layouts are available in the public/layouts folder and can be modified. | [Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-layout/platform/provider.html) | ## General diff --git a/docs/known-issues.md b/docs/known-issues.md index acd16e2..94e3126 100644 --- a/docs/known-issues.md +++ b/docs/known-issues.md @@ -4,6 +4,10 @@ ## OpenFin Core Web - Known Issues +### [0.40.31](https://www.npmjs.com/package/@openfin/core-web/v/0.40.31) + +- title is now a supported type. + ### [0.39.21](https://www.npmjs.com/package/@openfin/core-web/v/0.39.21) - If you wish to specify a title for your view when adding it to a layout (so it shows on the tab for the view on the layout) using the new addView API you will need to either cast the view options as unknown and then OpenFin.ViewOptions or use @ts-expect-error. diff --git a/how-to/cloud-interop-basic/package.json b/how-to/cloud-interop-basic/package.json index 66f6ec2..1a3eb16 100644 --- a/how-to/cloud-interop-basic/package.json +++ b/how-to/cloud-interop-basic/package.json @@ -1,6 +1,6 @@ { "name": "openfin-web--cloud-interop-basic", - "version": "19.2.0", + "version": "20.0.0", "description": "OpenFin Web Starter -- Cloud Interop - Basic", "main": "public/platform/provider.bundle.js", "scripts": { @@ -20,11 +20,11 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/cloud-interop": "0.39.21", - "@openfin/core-web": "0.39.21" + "@openfin/cloud-interop": "0.40.31", + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "copy-webpack-plugin": "^12.0.2", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", diff --git a/how-to/cloud-interop/README.md b/how-to/cloud-interop/README.md index eb12733..06c14b3 100644 --- a/how-to/cloud-interop/README.md +++ b/how-to/cloud-interop/README.md @@ -17,7 +17,7 @@ This page has a very simple layout which is made up of four iframes that inherit It also has a left panel which is outside of the OpenFin Layout and represents a platform specific panel which simply uses fdc3 and logs what it receives. This iframe does not inherit interop settings (as it is not part of the OpenFin layout) and uses platform specific settings to connect. -[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/cloud-interop/platform/provider.html) +[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/cloud-interop/platform/provider.html) ![OpenFin Web Interop Example](./docs/web-interop.png) diff --git a/how-to/cloud-interop/package.json b/how-to/cloud-interop/package.json index d72be73..563c2a7 100644 --- a/how-to/cloud-interop/package.json +++ b/how-to/cloud-interop/package.json @@ -1,6 +1,6 @@ { "name": "openfin-web--cloud-interop", - "version": "19.2.0", + "version": "20.0.0", "description": "OpenFin Web Starter -- Cloud Interop", "main": "public/platform/provider.bundle.js", "scripts": { @@ -20,11 +20,11 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21", - "@openfin/cloud-interop": "0.39.21" + "@openfin/core-web": "0.40.31", + "@openfin/cloud-interop": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", diff --git a/how-to/cloud-interop/public/layouts/default.layout.fin.json b/how-to/cloud-interop/public/layouts/default.layout.fin.json index c973477..363e926 100644 --- a/how-to/cloud-interop/public/layouts/default.layout.fin.json +++ b/how-to/cloud-interop/public/layouts/default.layout.fin.json @@ -33,7 +33,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", "name": "internal-generated-view-54a8ef85-a885-4234-be46-9d52e88fcb74" }, "title": "FDC3 Different Domain" @@ -70,7 +70,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/interop-api/context/interop-broadcast-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/interop-api/context/interop-broadcast-view.html", "name": "internal-generated-view-2d9a3624-fd0e-4e0a-b681-a79a9616b871" }, "title": "Interop External Domain" diff --git a/how-to/cloud-interop/public/style/core-web-styles.css b/how-to/cloud-interop/public/style/core-web-styles.css index b760446..3908052 100644 --- a/how-to/cloud-interop/public/style/core-web-styles.css +++ b/how-to/cloud-interop/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,45 @@ 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); } + +.lm_header .lm_tabdropdown_list { + overflow-y: auto; +} + +.lm_tabdropdown_list::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 8px; + background-color: #53565F; +} + +.lm_tabdropdown_list::-webkit-scrollbar { + width: 8px; + background-color: #53565F; +} + +.lm_tabdropdown_list::-webkit-scrollbar-thumb { + border-radius: 8px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); + background-color: #FFFFFF; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-track { + background-color: #C9CBD2; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar { + background-color: #C9CBD2; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-thumb { + background-color: #111214; +} \ No newline at end of file diff --git a/how-to/web-client-api/README.md b/how-to/web-client-api/README.md index f36095e..05d148b 100644 --- a/how-to/web-client-api/README.md +++ b/how-to/web-client-api/README.md @@ -94,7 +94,7 @@ The module supports the following options: This is an FDC3 view similar to the one shown in web-interop and web-interop-basic examples. The only difference is that this one does not import the @openfin/core-web module. The [shim](./client/src/shim.ts) script is referenced in the [fdc3-view.html](./public/views/fdc3-view.html) page which is responsible for bringing in the fin and fdc3 api if the content is running outside of the container. -The content will not run directly as it is not running inside of a layout and the code required to setup a platform and initialize a layout has not been added in order to reduce the amount of code in this example. You can reference the hosted fdc3 example or start the web server and reference the localhost version . +The content will not run directly as it is not running inside of a layout and the code required to setup a platform and initialize a layout has not been added in order to reduce the amount of code in this example. You can reference the hosted fdc3 example or start the web server and reference the localhost version . # Alternatives diff --git a/how-to/web-client-api/client/src/shim-client.ts b/how-to/web-client-api/client/src/shim-client.ts index 1ae72a0..270d7a0 100644 --- a/how-to/web-client-api/client/src/shim-client.ts +++ b/how-to/web-client-api/client/src/shim-client.ts @@ -9,7 +9,7 @@ export async function init(options: ClientOptions): Promise { if (window.fin === undefined) { console.log("Fin is not available. Importing the OpenFin API shim."); const url = - "https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-client-api/js/web.client.api.bundle.js"; + "https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-client-api/js/web.client.api.bundle.js"; const webClient = await import(/* webpackIgnore: true */ url); console.log("OpenFin API shim script imported."); console.log("Checking to see if the document is ready before requesting the API."); diff --git a/how-to/web-client-api/package.json b/how-to/web-client-api/package.json index 5961eaa..2feff70 100644 --- a/how-to/web-client-api/package.json +++ b/how-to/web-client-api/package.json @@ -1,6 +1,6 @@ { "name": "openfin-web--web-client-api", - "version": "19.2.0", + "version": "20.0.0", "description": "OpenFin Web Starter -- Web Client API", "main": "public/js/web.client.api.bundle.js", "scripts": { @@ -19,10 +19,10 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21" + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", diff --git a/how-to/web-interop-basic/README.md b/how-to/web-interop-basic/README.md index f31dd18..8e3a994 100644 --- a/how-to/web-interop-basic/README.md +++ b/how-to/web-interop-basic/README.md @@ -11,7 +11,7 @@ This page has a very simple layout which is made up of two iframes: - An FDC3 View - This uses the FDC3 API to add a context listener and to broadcast a hardcoded context object. - An Interop View - This uses the OpenFin Interop API to add a context listener and to set context using a hardcoded context object. -[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-interop-basic/platform/provider.html) +[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-interop-basic/platform/provider.html) ![OpenFin Web Interop Basic Example](./docs/web-interop-basic.png) diff --git a/how-to/web-interop-basic/package.json b/how-to/web-interop-basic/package.json index 24ea31f..c04644e 100644 --- a/how-to/web-interop-basic/package.json +++ b/how-to/web-interop-basic/package.json @@ -1,6 +1,6 @@ { "name": "openfin-web--web-interop-basic", - "version": "19.2.0", + "version": "20.0.0", "description": "OpenFin Web Starter -- Web Interop - Basic", "main": "public/platform/provider.bundle.js", "scripts": { @@ -20,10 +20,10 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21" + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", diff --git a/how-to/web-interop-support-context-and-intents/README.md b/how-to/web-interop-support-context-and-intents/README.md index 49aa7b4..cd124d9 100644 --- a/how-to/web-interop-support-context-and-intents/README.md +++ b/how-to/web-interop-support-context-and-intents/README.md @@ -35,7 +35,7 @@ To show content in a multi-layout UI we implemented a layoutManagerOverride so t We bring in a number of apps from our workspace platform starter and dev tools. We also include 4 basic apps that support context and intents (using the fdc3 and Interop API). -[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-interop-support-context-and-intents/platform/provider.html) +[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-interop-support-context-and-intents/platform/provider.html) ## Getting Started diff --git a/how-to/web-interop-support-context-and-intents/client/src/platform/apps/apps.ts b/how-to/web-interop-support-context-and-intents/client/src/platform/apps/apps.ts index e412a4f..4f95207 100644 --- a/how-to/web-interop-support-context-and-intents/client/src/platform/apps/apps.ts +++ b/how-to/web-interop-support-context-and-intents/client/src/platform/apps/apps.ts @@ -70,7 +70,6 @@ export async function launch( await window?.fin?.Platform.Layout.getCurrentSync().addView({ name, url: appToLaunch.details.url, - // @ts-expect-error title will be exposed in the next release title: appToLaunch.title }); } else { diff --git a/how-to/web-interop-support-context-and-intents/package.json b/how-to/web-interop-support-context-and-intents/package.json index 72cbdc8..1977614 100644 --- a/how-to/web-interop-support-context-and-intents/package.json +++ b/how-to/web-interop-support-context-and-intents/package.json @@ -1,6 +1,6 @@ { "name": "openfin-web--web-interop-support-context-and-intents", - "version": "19.2.0", + "version": "20.0.0", "description": "OpenFin Web Starter -- Web Interop - Support Context and Intents", "main": "public/platform/provider.bundle.js", "scripts": { @@ -20,11 +20,11 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21", - "@openfin/cloud-interop": "0.39.21" + "@openfin/core-web": "0.40.31", + "@openfin/cloud-interop": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", diff --git a/how-to/web-interop-support-context-and-intents/public/common/apps-contact.json b/how-to/web-interop-support-context-and-intents/public/common/apps-contact.json index 9f16223..7870c93 100644 --- a/how-to/web-interop-support-context-and-intents/public/common/apps-contact.json +++ b/how-to/web-interop-support-context-and-intents/public/common/apps-contact.json @@ -11,12 +11,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/icon-blue.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/icon-blue.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/previews/contact/call-app.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/previews/contact/call-app.png" } ], "contactEmail": "sales@openfin.co", @@ -24,7 +24,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/contact/call-app/index.html" + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/contact/call-app/index.html" }, "interop": { "intents": { @@ -52,12 +52,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/icon-blue.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/icon-blue.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/previews/contact/participant-selection.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/previews/contact/participant-selection.png" } ], "contactEmail": "sales@openfin.co", @@ -65,7 +65,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/contact/participant-selection/index.html" + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/contact/participant-selection/index.html" }, "interop": {} }, @@ -80,12 +80,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/icon-blue.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/icon-blue.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/previews/contact/participant-history.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/previews/contact/participant-history.png" } ], "contactEmail": "sales@openfin.co", @@ -93,7 +93,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/contact/participant-history/index.html" + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/contact/participant-history/index.html" }, "interop": {} }, @@ -108,12 +108,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/icon-blue.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/icon-blue.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/previews/contact/investments-and-models.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/previews/contact/investments-and-models.png" } ], "contactEmail": "sales@openfin.co", @@ -121,7 +121,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/contact/investments-and-models/index.html" + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/contact/investments-and-models/index.html" }, "interop": { "intents": { @@ -145,12 +145,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/icon-blue.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/icon-blue.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/previews/contact/participant-summary-view.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/previews/contact/participant-summary-view.png" } ], "contactEmail": "sales@openfin.co", @@ -158,7 +158,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/contact/participant-summary/index.html" + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/contact/participant-summary/index.html" }, "interop": { "intents": { diff --git a/how-to/web-interop-support-context-and-intents/public/common/apps-fdc3-2-0.json b/how-to/web-interop-support-context-and-intents/public/common/apps-fdc3-2-0.json index 8c4a072..c7e61e7 100644 --- a/how-to/web-interop-support-context-and-intents/public/common/apps-fdc3-2-0.json +++ b/how-to/web-interop-support-context-and-intents/public/common/apps-fdc3-2-0.json @@ -11,12 +11,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/common/favicon-32x32.png" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/common/favicon-32x32.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/images/previews/view-intents-fdc3.png", + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/images/previews/view-intents-fdc3.png", "label": "Intents using FDC3" } ], @@ -25,7 +25,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/fdc3/intent/2-0/fdc3-intent-view.html" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/fdc3/intent/2-0/fdc3-intent-view.html" }, "interop": { "intents": { @@ -89,12 +89,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/common/favicon-32x32.png" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/common/favicon-32x32.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/images/previews/view-context-fdc3.png", + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/images/previews/view-context-fdc3.png", "label": "Contexts using FDC3" } ], @@ -103,7 +103,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html" }, "interop": {} } diff --git a/how-to/web-interop-support-context-and-intents/public/common/apps-finance.json b/how-to/web-interop-support-context-and-intents/public/common/apps-finance.json index c0c4004..19b99b4 100644 --- a/how-to/web-interop-support-context-and-intents/public/common/apps-finance.json +++ b/how-to/web-interop-support-context-and-intents/public/common/apps-finance.json @@ -11,12 +11,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/common/favicon-32x32.png" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/common/favicon-32x32.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/demos/images/preview/preview-finance-chart.jpeg" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/demos/images/preview/preview-finance-chart.jpeg" } ], "contactEmail": "sales@openfin.co", @@ -39,12 +39,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/common/favicon-32x32.png" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/common/favicon-32x32.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/demos/images/preview/preview-finance-summary.jpeg" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/demos/images/preview/preview-finance-summary.jpeg" } ], "contactEmail": "sales@openfin.co", @@ -67,12 +67,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/common/favicon-32x32.png" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/common/favicon-32x32.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/demos/images/preview/preview-finance-portfolio.jpeg" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/demos/images/preview/preview-finance-portfolio.jpeg" } ], "contactEmail": "sales@openfin.co", @@ -95,12 +95,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/common/favicon-32x32.png" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/common/favicon-32x32.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/demos/images/preview/preview-finance-instrument-details.jpeg" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/demos/images/preview/preview-finance-instrument-details.jpeg" } ], "contactEmail": "sales@openfin.co", diff --git a/how-to/web-interop-support-context-and-intents/public/common/apps-interop.json b/how-to/web-interop-support-context-and-intents/public/common/apps-interop.json index 6abf2f1..af6a790 100644 --- a/how-to/web-interop-support-context-and-intents/public/common/apps-interop.json +++ b/how-to/web-interop-support-context-and-intents/public/common/apps-interop.json @@ -11,12 +11,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/common/favicon-32x32.png" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/common/favicon-32x32.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/images/previews/view-context-interop-api.png", + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/images/previews/view-context-interop-api.png", "label": "Intents using FDC3" } ], @@ -25,7 +25,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/interop-api/intent/interop-intent-view.html" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/interop-api/intent/interop-intent-view.html" }, "interop": { "intents": { @@ -89,12 +89,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/common/favicon-32x32.png" + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/common/favicon-32x32.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/images/previews/view-context-interop-api.png", + "src": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/images/previews/view-context-interop-api.png", "label": "Contexts using Interop API" } ], @@ -103,7 +103,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/interop-api/context/interop-broadcast-view.html" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/interop-api/context/interop-broadcast-view.html" }, "interop": {} } diff --git a/how-to/web-interop-support-context-and-intents/public/common/apps-manager.json b/how-to/web-interop-support-context-and-intents/public/common/apps-manager.json index 352c7c7..b22c022 100644 --- a/how-to/web-interop-support-context-and-intents/public/common/apps-manager.json +++ b/how-to/web-interop-support-context-and-intents/public/common/apps-manager.json @@ -11,12 +11,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/icon-blue.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/icon-blue.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/previews/manager/preview-manager-portal-my-team.jpeg" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/previews/manager/preview-manager-portal-my-team.jpeg" } ], "contactEmail": "sales@openfin.co", @@ -24,7 +24,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/my-team/index.html" + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/my-team/index.html" }, "interop": {} }, @@ -39,12 +39,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/icon-blue.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/icon-blue.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/previews/manager/preview-manager-portal-annual-leave.jpeg" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/previews/manager/preview-manager-portal-annual-leave.jpeg" } ], "contactEmail": "sales@openfin.co", @@ -52,7 +52,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/annual-leave/index.html" + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/annual-leave/index.html" }, "interop": {} }, @@ -67,12 +67,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/icon-blue.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/icon-blue.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/previews/manager/preview-manager-portal-manager-paths.jpeg" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/previews/manager/preview-manager-portal-manager-paths.jpeg" } ], "contactEmail": "sales@openfin.co", @@ -80,7 +80,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/manager-paths/index.html" + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/manager-paths/index.html" }, "interop": {} }, @@ -95,12 +95,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/icon-blue.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/icon-blue.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/previews/manager/preview-manager-portal-company-comms.jpeg" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/previews/manager/preview-manager-portal-company-comms.jpeg" } ], "contactEmail": "sales@openfin.co", @@ -108,7 +108,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/company-comms/index.html" + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/company-comms/index.html" }, "interop": {} }, @@ -123,12 +123,12 @@ "lang": "en-US", "icons": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/icon-blue.png" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/icon-blue.png" } ], "screenshots": [ { - "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/images/previews/manager/preview-manager-portal-company-calendar.jpeg" + "src": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/images/previews/manager/preview-manager-portal-company-calendar.jpeg" } ], "contactEmail": "sales@openfin.co", @@ -136,7 +136,7 @@ "publisher": "OpenFin", "type": "web", "details": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/company-cal/index.html" + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/company-cal/index.html" }, "interop": {} } diff --git a/how-to/web-interop-support-context-and-intents/public/layouts/default.layout.fin.json b/how-to/web-interop-support-context-and-intents/public/layouts/default.layout.fin.json index 24372e4..4453b36 100644 --- a/how-to/web-interop-support-context-and-intents/public/layouts/default.layout.fin.json +++ b/how-to/web-interop-support-context-and-intents/public/layouts/default.layout.fin.json @@ -18,7 +18,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", "name": "fdc3-context-view-2-0/e7fe7df3-6f64-4235-899f-4e91af2cb32d" }, @@ -38,7 +38,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/fdc3/intent/2-0/fdc3-intent-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/fdc3/intent/2-0/fdc3-intent-view.html", "name": "fdc3-intent-view-2-0/54a8ef85-a885-4234-be46-9d52e88fcb74" }, @@ -71,7 +71,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/interop-api/context/interop-broadcast-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/interop-api/context/interop-broadcast-view.html", "name": "interop-broadcast-view/64a8efd7-3d92-42ae-8fae-dffcc0fdac97" }, @@ -91,7 +91,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/interop-api/intent/interop-intent-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/interop-api/intent/interop-intent-view.html", "name": "interop-intent-view-2-0/2d9a3624-fd0e-4e0a-b681-a79a9616b871" }, @@ -129,7 +129,7 @@ "componentName": "view", "componentState": { "name": "my-team/b9880bc2-2983-4b3c-a496-77d94783cb7e", - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/my-team/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/my-team/index.html", "componentName": "view" }, "title": "My Team" @@ -151,7 +151,7 @@ "componentName": "view", "componentState": { "name": "internal-generated-view-0dd98149-16fb-4cf0-9b2a-d5bff2519d9b", - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/keeping-track/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/keeping-track/index.html", "componentName": "view" }, "title": "Keeping Track" @@ -161,7 +161,7 @@ "componentName": "view", "componentState": { "name": "annual-leave/ef70ccee-2613-4f99-8a01-8cfba31064ba", - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/annual-leave/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/annual-leave/index.html", "componentName": "view" }, "title": "Annual Leave" @@ -171,7 +171,7 @@ "componentName": "view", "componentState": { "name": "internal-generated-view-f898522a-5d85-4e9e-93eb-378179f0f909", - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/360-feedback/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/360-feedback/index.html", "componentName": "view" }, "title": "360 Feedback" @@ -195,7 +195,7 @@ "componentName": "view", "componentState": { "name": "manager-paths/b38f525a-77a9-48d9-bd02-b895cfbbf074", - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/manager-paths/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/manager-paths/index.html", "componentName": "view" }, "title": "Manager Paths" @@ -211,7 +211,7 @@ "componentName": "view", "componentState": { "name": "company-comms/5292442d-4d19-4d71-bcf1-ca9081ec50b0", - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/company-comms/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/company-comms/index.html", "componentName": "view" }, "title": "Company News" @@ -221,7 +221,7 @@ "componentName": "view", "componentState": { "name": "company-cal/5292442d-4d19-4d71-bcf1-ca9081ec50b1", - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/company-cal/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/company-cal/index.html", "componentName": "view" }, "title": "Company Calendar" @@ -231,7 +231,7 @@ "componentName": "view", "componentState": { "name": "internal-generated-view-935bb258-ded4-4a85-ad92-0f2a742d4d42", - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/manager-portal/franchise-comms/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/manager-portal/franchise-comms/index.html", "componentName": "view" }, "title": "Franchise Comms" @@ -281,7 +281,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/contact/participant-summary/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/contact/participant-summary/index.html", "componentName": "view", "name": "participant-summary-view/f65f3aa0-7499-4d8a-b477-8e04ab7db493" }, @@ -304,7 +304,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/contact/investments-and-models/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/contact/investments-and-models/index.html", "componentName": "view", "name": "investments-and-models/5ad7e692-dd6a-48b8-bbc6-4f284f1bcc3d" }, @@ -327,7 +327,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/contact/call-app/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/contact/call-app/index.html", "name": "call-app/1f458d7d-22a1-40fa-b793-c7eb2d4d84a6" }, "isClosable": true, @@ -365,7 +365,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/contact/participant-history/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/contact/participant-history/index.html", "name": "participant-history/9b0bdbff-3de4-4b86-8abb-be1df6876a66" }, "isClosable": true, @@ -375,7 +375,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v19.2.0/workspace-platform-starter/common/views/contact/participant-selection/index.html", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v20.0.0/workspace-platform-starter/common/views/contact/participant-selection/index.html", "name": "participant-selection/9b0bdbff-3de4-4b86-8abb-be1df6876a36" }, "isClosable": true, diff --git a/how-to/web-interop-support-context-and-intents/public/platform/apps/app-picker.html b/how-to/web-interop-support-context-and-intents/public/platform/apps/app-picker.html index 0aba622..27f86d1 100644 --- a/how-to/web-interop-support-context-and-intents/public/platform/apps/app-picker.html +++ b/how-to/web-interop-support-context-and-intents/public/platform/apps/app-picker.html @@ -7,7 +7,7 @@ - + diff --git a/how-to/web-interop-support-context-and-intents/public/platform/intents/instance-picker.html b/how-to/web-interop-support-context-and-intents/public/platform/intents/instance-picker.html index bd23275..8bfce4a 100644 --- a/how-to/web-interop-support-context-and-intents/public/platform/intents/instance-picker.html +++ b/how-to/web-interop-support-context-and-intents/public/platform/intents/instance-picker.html @@ -7,7 +7,7 @@ - + diff --git a/how-to/web-interop-support-context-and-intents/public/platform/settings/settings-dialog.html b/how-to/web-interop-support-context-and-intents/public/platform/settings/settings-dialog.html index 305e0c2..e03223a 100644 --- a/how-to/web-interop-support-context-and-intents/public/platform/settings/settings-dialog.html +++ b/how-to/web-interop-support-context-and-intents/public/platform/settings/settings-dialog.html @@ -7,7 +7,7 @@ - + diff --git a/how-to/web-interop-support-context-and-intents/public/style/core-web-styles.css b/how-to/web-interop-support-context-and-intents/public/style/core-web-styles.css index b760446..3908052 100644 --- a/how-to/web-interop-support-context-and-intents/public/style/core-web-styles.css +++ b/how-to/web-interop-support-context-and-intents/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,45 @@ 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); } + +.lm_header .lm_tabdropdown_list { + overflow-y: auto; +} + +.lm_tabdropdown_list::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 8px; + background-color: #53565F; +} + +.lm_tabdropdown_list::-webkit-scrollbar { + width: 8px; + background-color: #53565F; +} + +.lm_tabdropdown_list::-webkit-scrollbar-thumb { + border-radius: 8px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); + background-color: #FFFFFF; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-track { + background-color: #C9CBD2; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar { + background-color: #C9CBD2; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-thumb { + background-color: #111214; +} \ No newline at end of file diff --git a/how-to/web-interop/README.md b/how-to/web-interop/README.md index 18df46a..d45f903 100644 --- a/how-to/web-interop/README.md +++ b/how-to/web-interop/README.md @@ -15,7 +15,7 @@ This page has a very simple layout which is made up of four iframes that inherit It also has a left panel which is outside of the OpenFin Layout and represents a platform specific panel which simply uses fdc3 and logs what it receives. This iframe does not inherit interop settings (as it is not part of the OpenFin layout) and uses platform specific settings to connect. -[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-interop/platform/provider.html) +[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-interop/platform/provider.html) ![OpenFin Web Interop Example](./docs/web-interop.png) diff --git a/how-to/web-interop/package.json b/how-to/web-interop/package.json index 203ced7..4c6d3ac 100644 --- a/how-to/web-interop/package.json +++ b/how-to/web-interop/package.json @@ -1,6 +1,6 @@ { "name": "openfin-web--web-interop", - "version": "19.2.0", + "version": "20.0.0", "description": "OpenFin Web Starter -- Web Interop", "main": "public/platform/provider.bundle.js", "scripts": { @@ -20,10 +20,10 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21" + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", diff --git a/how-to/web-interop/public/layouts/default.layout.fin.json b/how-to/web-interop/public/layouts/default.layout.fin.json index c973477..363e926 100644 --- a/how-to/web-interop/public/layouts/default.layout.fin.json +++ b/how-to/web-interop/public/layouts/default.layout.fin.json @@ -33,7 +33,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", "name": "internal-generated-view-54a8ef85-a885-4234-be46-9d52e88fcb74" }, "title": "FDC3 Different Domain" @@ -70,7 +70,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/interop-api/context/interop-broadcast-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/interop-api/context/interop-broadcast-view.html", "name": "internal-generated-view-2d9a3624-fd0e-4e0a-b681-a79a9616b871" }, "title": "Interop External Domain" diff --git a/how-to/web-interop/public/style/core-web-styles.css b/how-to/web-interop/public/style/core-web-styles.css index b760446..3908052 100644 --- a/how-to/web-interop/public/style/core-web-styles.css +++ b/how-to/web-interop/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,45 @@ 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); } + +.lm_header .lm_tabdropdown_list { + overflow-y: auto; +} + +.lm_tabdropdown_list::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 8px; + background-color: #53565F; +} + +.lm_tabdropdown_list::-webkit-scrollbar { + width: 8px; + background-color: #53565F; +} + +.lm_tabdropdown_list::-webkit-scrollbar-thumb { + border-radius: 8px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); + background-color: #FFFFFF; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-track { + background-color: #C9CBD2; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar { + background-color: #C9CBD2; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-thumb { + background-color: #111214; +} \ No newline at end of file diff --git a/how-to/web-layout-basic/README.md b/how-to/web-layout-basic/README.md index 84f2477..f6ccacb 100644 --- a/how-to/web-layout-basic/README.md +++ b/how-to/web-layout-basic/README.md @@ -8,7 +8,7 @@ This is a simple example that has a simple provider web page that acts as the ma This page has a very simple layout which is made up of four iframes loading an external website (example.com). -[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-layout-basic/platform/provider.html) +[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-layout-basic/platform/provider.html) ![OpenFin Web Layout Basic Example](./docs/web-layout-basic.png) diff --git a/how-to/web-layout-basic/package.json b/how-to/web-layout-basic/package.json index 8b054c3..831c00a 100644 --- a/how-to/web-layout-basic/package.json +++ b/how-to/web-layout-basic/package.json @@ -1,6 +1,6 @@ { "name": "openfin-web--web-layout-basic", - "version": "19.2.0", + "version": "20.0.0", "description": "OpenFin Web Starter -- Web Layout Basic", "main": "public/platform/provider.bundle.js", "scripts": { @@ -20,10 +20,10 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21" + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", diff --git a/how-to/web-layout-basic/public/style/core-web-styles.css b/how-to/web-layout-basic/public/style/core-web-styles.css index b760446..3908052 100644 --- a/how-to/web-layout-basic/public/style/core-web-styles.css +++ b/how-to/web-layout-basic/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,45 @@ 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); } + +.lm_header .lm_tabdropdown_list { + overflow-y: auto; +} + +.lm_tabdropdown_list::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 8px; + background-color: #53565F; +} + +.lm_tabdropdown_list::-webkit-scrollbar { + width: 8px; + background-color: #53565F; +} + +.lm_tabdropdown_list::-webkit-scrollbar-thumb { + border-radius: 8px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); + background-color: #FFFFFF; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-track { + background-color: #C9CBD2; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar { + background-color: #C9CBD2; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-thumb { + background-color: #111214; +} \ No newline at end of file diff --git a/how-to/web-layout/README.md b/how-to/web-layout/README.md index ac80c04..95eff4b 100644 --- a/how-to/web-layout/README.md +++ b/how-to/web-layout/README.md @@ -17,7 +17,7 @@ It also has a left panel which is outside of the OpenFin Layout and represents a Using Layouts, this demo also shows off a "Swap Layouts" function, which allows someone to quickly jump from one created layout (via a snapshot JSON definition) to another. -[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v19.2.0/web-layout/platform/provider.html) +[Live Launch Example](https://built-on-openfin.github.io/web-starter/web/v20.0.0/web-layout/platform/provider.html) ![OpenFin Web Multi Layout Example](./docs/web-layout.png) diff --git a/how-to/web-layout/package.json b/how-to/web-layout/package.json index 443065b..cabe6ad 100644 --- a/how-to/web-layout/package.json +++ b/how-to/web-layout/package.json @@ -1,6 +1,6 @@ { "name": "openfin-web--web-layout", - "version": "19.2.0", + "version": "20.0.0", "description": "OpenFin Web Starter -- Web Layout", "main": "public/platform/provider.bundle.js", "scripts": { @@ -20,10 +20,10 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21" + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "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/layouts/default.layout.fin.json b/how-to/web-layout/public/layouts/default.layout.fin.json index 5790813..f28e1d6 100644 --- a/how-to/web-layout/public/layouts/default.layout.fin.json +++ b/how-to/web-layout/public/layouts/default.layout.fin.json @@ -33,7 +33,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html", "name": "internal-generated-view-primary-2" }, "title": "FDC3 Different Domain" @@ -70,7 +70,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/interop-api/context/interop-broadcast-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/interop-api/context/interop-broadcast-view.html", "name": "internal-generated-view-primary-4" }, "title": "Interop External Domain" @@ -116,7 +116,7 @@ "type": "component", "componentName": "view", "componentState": { - "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v19.2.0/interop/interop-api/context/interop-broadcast-view.html", + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/interop-api/context/interop-broadcast-view.html", "name": "internal-generated-view-primary-7" }, "title": "Interop External Domain" 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 6e5d733..545cbb9 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/v19.2.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/v20.0.0/interop/fdc3/context/2-0/fdc3-broadcast-view.html" }, "title": "FDC3 Different Domain", "isClosable": true 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..3908052 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,45 @@ 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); } + +.lm_header .lm_tabdropdown_list { + overflow-y: auto; +} + +.lm_tabdropdown_list::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 8px; + background-color: #53565F; +} + +.lm_tabdropdown_list::-webkit-scrollbar { + width: 8px; + background-color: #53565F; +} + +.lm_tabdropdown_list::-webkit-scrollbar-thumb { + border-radius: 8px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); + background-color: #FFFFFF; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-track { + background-color: #C9CBD2; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar { + background-color: #C9CBD2; +} + +:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-thumb { + background-color: #111214; +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e107e90..3f57e88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "openfin-web-starter", - "version": "19.2.0", + "version": "20.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "openfin-web-starter", - "version": "19.2.0", + "version": "20.0.0", "license": "SEE LICENSE IN LICENSE.MD", "workspaces": [ "how-to/*" @@ -20,15 +20,15 @@ }, "how-to/cloud-interop": { "name": "openfin-web--cloud-interop", - "version": "19.2.0", + "version": "20.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/cloud-interop": "0.39.21", - "@openfin/core-web": "0.39.21" + "@openfin/cloud-interop": "0.40.31", + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", @@ -50,15 +50,15 @@ }, "how-to/cloud-interop-basic": { "name": "openfin-web--cloud-interop-basic", - "version": "19.2.0", + "version": "20.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/cloud-interop": "0.39.21", - "@openfin/core-web": "0.39.21" + "@openfin/cloud-interop": "0.40.31", + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "copy-webpack-plugin": "^12.0.2", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", @@ -81,14 +81,14 @@ }, "how-to/web-client-api": { "name": "openfin-web--web-client-api", - "version": "19.2.0", + "version": "20.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21" + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", @@ -110,14 +110,14 @@ }, "how-to/web-interop": { "name": "openfin-web--web-interop", - "version": "19.2.0", + "version": "20.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21" + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", @@ -139,14 +139,14 @@ }, "how-to/web-interop-basic": { "name": "openfin-web--web-interop-basic", - "version": "19.2.0", + "version": "20.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21" + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", @@ -168,15 +168,15 @@ }, "how-to/web-interop-support-context-and-intents": { "name": "openfin-web--web-interop-support-context-and-intents", - "version": "19.2.0", + "version": "20.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/cloud-interop": "0.39.21", - "@openfin/core-web": "0.39.21" + "@openfin/cloud-interop": "0.40.31", + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", @@ -198,14 +198,14 @@ }, "how-to/web-layout": { "name": "openfin-web--web-layout", - "version": "19.2.0", + "version": "20.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21" + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", @@ -227,14 +227,14 @@ }, "how-to/web-layout-basic": { "name": "openfin-web--web-layout-basic", - "version": "19.2.0", + "version": "20.0.0", "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", - "@openfin/core-web": "0.39.21" + "@openfin/core-web": "0.40.31" }, "devDependencies": { - "@openfin/core": "39.83.21", + "@openfin/core": "40.100.7", "eslint": "8.57.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "18.0.0", @@ -644,21 +644,21 @@ } }, "node_modules/@openfin/cloud-interop": { - "version": "0.39.21", - "resolved": "https://registry.npmjs.org/@openfin/cloud-interop/-/cloud-interop-0.39.21.tgz", - "integrity": "sha512-SpDg4kYCzzif4ySW2f0bzKd5lgXyZALvr19OGIDc/fXB9egIsyvPht1wxUUrjRX7hleiks0Bxbb86fjvCyND+g==", + "version": "0.40.31", + "resolved": "https://registry.npmjs.org/@openfin/cloud-interop/-/cloud-interop-0.40.31.tgz", + "integrity": "sha512-50jg821H4juEDgbNX5erMnOmXtKm/iTPfoq2VR0xuU/cGzWNlDeP2BF4wmiSbFXepZkZ+TDIDrfU46wf9ZgpIQ==", "dependencies": { "axios": "^1.6.2", "mqtt": "^5.3.1" }, "peerDependencies": { - "@openfin/core": "39.83.21" + "@openfin/core": "40.100.7" } }, "node_modules/@openfin/core": { - "version": "39.83.21", - "resolved": "https://registry.npmjs.org/@openfin/core/-/core-39.83.21.tgz", - "integrity": "sha512-C0c1IFP0iFKKI2LY8iC03+0ER+lK+MJrjqqFW67rO8jsR0SIWR1e24hcEcrUxQwX2IlQOkWZ4psLRSZNXRGO1Q==", + "version": "40.100.7", + "resolved": "https://registry.npmjs.org/@openfin/core/-/core-40.100.7.tgz", + "integrity": "sha512-uADuXRyC52aAZaGRbLRhHRVs1aPyCxi+f8pPjC0CxmEYBrvm1uDH8cAFWm+/8y005tHtegW1JsbEEQ1+y/ngEQ==", "dependencies": { "@types/node": "^20.14.2", "lodash": "^4.17.21", @@ -666,9 +666,9 @@ } }, "node_modules/@openfin/core-web": { - "version": "0.39.21", - "resolved": "https://registry.npmjs.org/@openfin/core-web/-/core-web-0.39.21.tgz", - "integrity": "sha512-VJ0EOhry9tKQSm0QWs8s8aDJtYTLlEu7IeU4uP33c562++zF18GH6g3Ih+ub1YeDnLa1+0vFu+U/O6mjLndndA==", + "version": "0.40.31", + "resolved": "https://registry.npmjs.org/@openfin/core-web/-/core-web-0.40.31.tgz", + "integrity": "sha512-A4+xUrptjq3v7Y78G/uxdwgD25vRndBzR51WagVqwXF7r/MzGVXrsaSZQ6rEIVaZ7kfYnWlEsGOIZ4geFBvqxQ==", "dependencies": { "buffer": "6.0.3", "events": "^3.3.0", @@ -676,7 +676,7 @@ "uuid": "^8.3.2" }, "peerDependencies": { - "@openfin/core": "39.83.21" + "@openfin/core": "40.100.7" } }, "node_modules/@pkgjs/parseargs": { @@ -2177,9 +2177,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.5.58", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.58.tgz", - "integrity": "sha512-al2l4r+24ZFL7WzyPTlyD0fC33LLzvxqLCwurtBibVPghRGO9hSTl+tis8t1kD7biPiH/en4U0I7o/nQbYeoVA==", + "version": "1.5.60", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.60.tgz", + "integrity": "sha512-HcraRUkTKJ+8yA3b10i9qvhUlPBRDlKjn1XGek1zDGVfAKcvi8TsUnImGqLiEm9j6ZulxXIWWIo9BmbkbCTGgA==", "dev": true }, "node_modules/emoji-regex": { @@ -2235,9 +2235,9 @@ } }, "node_modules/es-abstract": { - "version": "1.23.4", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.4.tgz", - "integrity": "sha512-HR1gxH5OaiN7XH7uiWH0RLw0RcFySiSoW1ctxmD1ahTw3uGBtkmm/ng0tDU1OtYx5OK6EOL5Y6O21cDflG3Jcg==", + "version": "1.23.5", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.5.tgz", + "integrity": "sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ==", "dev": true, "dependencies": { "array-buffer-byte-length": "^1.0.1", diff --git a/package.json b/package.json index 73e9b3a..9519a2d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "openfin-web-starter", - "version": "19.2.0", + "version": "20.0.0", "description": "OpenFin Web Starter", "scripts": { "build": "node ./scripts/workspaces.mjs build",