@openfin/core-web 0.45.110 → 0.45.112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/out/api-client.cjs.js +1 -1
- package/out/api-client.d.ts +9 -11
- package/out/api-client.esm.js +1 -1
- package/out/docs/types/_openfin_core_web.WebLayoutComponent.html +2 -2
- package/out/docs/types/_openfin_core_web.WebLayoutOptions.html +1 -1
- package/out/docs/types/_openfin_core_web.WebLayoutSettings.html +2 -2
- package/out/main-03a7f9dc.js +1 -0
- package/out/main-16ae17ab.js +3 -0
- package/out/main-95f3d55b.js +1 -0
- package/out/main-cfb54be3.js +3 -0
- package/out/shared-worker.js +1 -1
- package/out/styles.css +319 -109
- package/package.json +2 -2
- package/out/main-43ea761d.js +0 -1
- package/out/main-7cfa05a3.js +0 -1
- package/out/main-87e1b3de.js +0 -3
- package/out/main-f0a521ab.js +0 -3
package/out/styles.css
CHANGED
|
@@ -324,19 +324,19 @@
|
|
|
324
324
|
/* Colors used for dark theme */
|
|
325
325
|
--of-default-black: black;
|
|
326
326
|
--of-default-charcoal-dark: #111118;
|
|
327
|
-
--of-default-charcoal-light: #
|
|
328
|
-
--of-default-grey-dark: #
|
|
329
|
-
--of-default-grey-dark-opacity: #
|
|
330
|
-
--of-default-grey-light: #
|
|
331
|
-
--of-default-grey-light-opacity: #
|
|
327
|
+
--of-default-charcoal-light: #2a292f;
|
|
328
|
+
--of-default-grey-dark: #a5aebd;
|
|
329
|
+
--of-default-grey-dark-opacity: #a5aebd2e;
|
|
330
|
+
--of-default-grey-light: #f4f5f8;
|
|
331
|
+
--of-default-grey-light-opacity: #f4f5f82e;
|
|
332
332
|
--of-default-white: white;
|
|
333
|
-
--of-dark-theme: #
|
|
334
|
-
--of-light-theme: #
|
|
335
|
-
--of-highlight: #
|
|
336
|
-
--of-highlight-opacity: #
|
|
333
|
+
--of-dark-theme: #7b7bff;
|
|
334
|
+
--of-light-theme: #504cff;
|
|
335
|
+
--of-highlight: #958eff;
|
|
336
|
+
--of-highlight-opacity: #958eff26;
|
|
337
337
|
--of-default-red: red;
|
|
338
|
-
--of-default-red-negative: #
|
|
339
|
-
--of-positive-green: #
|
|
338
|
+
--of-default-red-negative: #f55d5f;
|
|
339
|
+
--of-positive-green: #29af6f;
|
|
340
340
|
|
|
341
341
|
/* Main colors to set from the above list */
|
|
342
342
|
--main-background-color: var(--of-default-charcoal-dark);
|
|
@@ -390,25 +390,35 @@
|
|
|
390
390
|
--body-container-padding-left: 0px;
|
|
391
391
|
|
|
392
392
|
--body-container-width: calc(100% - var(--body-container-padding-left) - var(--body-container-padding-right));
|
|
393
|
-
--body-container-height: calc(
|
|
394
|
-
|
|
393
|
+
--body-container-height: calc(
|
|
394
|
+
100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) -
|
|
395
|
+
var(--body-container-padding-bottom)
|
|
396
|
+
);
|
|
397
|
+
--body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right)
|
|
398
|
+
var(--body-container-padding-bottom) var(--body-container-padding-left);
|
|
395
399
|
|
|
396
400
|
--layout-container-padding-top: 4px;
|
|
397
401
|
--layout-container-padding-right: 4px;
|
|
398
402
|
--layout-container-padding-bottom: 4px;
|
|
399
403
|
--layout-container-padding-left: 4px;
|
|
400
|
-
--layout-container-from-top: calc(
|
|
404
|
+
--layout-container-from-top: calc(
|
|
405
|
+
var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top)
|
|
406
|
+
);
|
|
401
407
|
|
|
402
408
|
--layout-container-width: calc(100% - var(--layout-container-padding-left) - var(--layout-container-padding-right));
|
|
403
|
-
--layout-container-height: calc(
|
|
404
|
-
|
|
409
|
+
--layout-container-height: calc(
|
|
410
|
+
100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) -
|
|
411
|
+
var(--layout-container-padding-bottom)
|
|
412
|
+
);
|
|
413
|
+
--layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right)
|
|
414
|
+
var(--layout-container-padding-bottom) var(--layout-container-padding-left);
|
|
405
415
|
|
|
406
416
|
/* Top Bar and Tab Icons */
|
|
407
|
-
--close-button-url: url(
|
|
408
|
-
--minimize-button-url: url(
|
|
409
|
-
--expand-button-url: url(
|
|
410
|
-
--tab-close-button-url: url(
|
|
411
|
-
--new-tab-button-url: url(
|
|
417
|
+
--close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K');
|
|
418
|
+
--minimize-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K');
|
|
419
|
+
--expand-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg==');
|
|
420
|
+
--tab-close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K');
|
|
421
|
+
--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==');
|
|
412
422
|
}
|
|
413
423
|
|
|
414
424
|
body {
|
|
@@ -429,7 +439,12 @@ html {
|
|
|
429
439
|
overflow: hidden;
|
|
430
440
|
}
|
|
431
441
|
|
|
432
|
-
body,
|
|
442
|
+
body,
|
|
443
|
+
select,
|
|
444
|
+
button,
|
|
445
|
+
li,
|
|
446
|
+
span,
|
|
447
|
+
div {
|
|
433
448
|
font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif;
|
|
434
449
|
color: var(--body-font-color);
|
|
435
450
|
}
|
|
@@ -566,9 +581,11 @@ div.placeholder_image img {
|
|
|
566
581
|
|
|
567
582
|
.lm_header {
|
|
568
583
|
-webkit-app-region: no-drag;
|
|
584
|
+
/* Match GL1 jQuery .height() under host border-box resets (MTP / Core-Web). */
|
|
585
|
+
box-sizing: content-box !important;
|
|
569
586
|
box-shadow: none;
|
|
570
587
|
border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color);
|
|
571
|
-
height:
|
|
588
|
+
height: 27px;
|
|
572
589
|
user-select: none;
|
|
573
590
|
}
|
|
574
591
|
|
|
@@ -643,7 +660,7 @@ div.placeholder_image img {
|
|
|
643
660
|
.lm_splitter {
|
|
644
661
|
background-color: var(--splitter-color);
|
|
645
662
|
opacity: 0.001;
|
|
646
|
-
|
|
663
|
+
transition: opacity 200ms ease;
|
|
647
664
|
}
|
|
648
665
|
|
|
649
666
|
.lm_splitter:hover,
|
|
@@ -652,7 +669,35 @@ div.placeholder_image img {
|
|
|
652
669
|
opacity: 1;
|
|
653
670
|
}
|
|
654
671
|
|
|
672
|
+
/* HTML5 desktop drag uses display:none on the proxy; keep opacity for Core-Web pointer drag. */
|
|
673
|
+
.lm_dragProxy {
|
|
674
|
+
position: absolute;
|
|
675
|
+
top: 0;
|
|
676
|
+
left: 0;
|
|
677
|
+
z-index: 30;
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
.lm_dragProxy .lm_header {
|
|
681
|
+
background: transparent;
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
.lm_dragProxy .lm_content {
|
|
685
|
+
border-top: none;
|
|
686
|
+
overflow: hidden;
|
|
687
|
+
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
.lm_drop_tab_placeholder {
|
|
691
|
+
float: left;
|
|
692
|
+
width: 100px;
|
|
693
|
+
height: 100%;
|
|
694
|
+
visibility: hidden;
|
|
695
|
+
}
|
|
696
|
+
|
|
655
697
|
.lm_dropTargetIndicator {
|
|
698
|
+
display: none;
|
|
699
|
+
position: absolute;
|
|
700
|
+
z-index: 35;
|
|
656
701
|
box-shadow: none;
|
|
657
702
|
outline: none;
|
|
658
703
|
transition: all 200ms ease;
|
|
@@ -660,18 +705,17 @@ div.placeholder_image img {
|
|
|
660
705
|
border: 1px solid var(--drop-target-border-color);
|
|
661
706
|
box-sizing: border-box;
|
|
662
707
|
border-radius: 2px;
|
|
663
|
-
margin-top: 1px;
|
|
664
708
|
}
|
|
665
709
|
|
|
666
710
|
.lm_dropTargetIndicator .lm_inner {
|
|
667
711
|
background: var(--tab-background-color);
|
|
668
|
-
opacity: .2
|
|
712
|
+
opacity: 0.2;
|
|
669
713
|
}
|
|
670
714
|
|
|
671
715
|
.lm_tabdropdown_list {
|
|
672
716
|
z-index: 101 !important;
|
|
673
717
|
}
|
|
674
|
-
|
|
718
|
+
|
|
675
719
|
.lm_header .lm_tabdropdown_list .lm_tab {
|
|
676
720
|
background-color: var(--secondary-background-color);
|
|
677
721
|
}
|
|
@@ -680,48 +724,52 @@ div.placeholder_image img {
|
|
|
680
724
|
background-color: var(--main-background-color);
|
|
681
725
|
}
|
|
682
726
|
|
|
683
|
-
.lm_header .lm_controls
|
|
684
|
-
color: var(--tab-font-color)
|
|
727
|
+
.lm_header .lm_controls .lm_tabdropdown:before {
|
|
728
|
+
color: var(--tab-font-color);
|
|
685
729
|
}
|
|
686
730
|
|
|
687
731
|
.lm_controls {
|
|
688
732
|
height: 100%;
|
|
689
733
|
}
|
|
690
734
|
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
735
|
+
/* GL2 HeaderButton creates <div> elements; GL1 used <li>. Also styles renderCustomHeaderControls kids. */
|
|
736
|
+
.lm_controls > * {
|
|
737
|
+
cursor: pointer;
|
|
738
|
+
position: relative;
|
|
739
|
+
background-position: center center;
|
|
740
|
+
background-repeat: no-repeat;
|
|
741
|
+
opacity: 0.4;
|
|
742
|
+
transition: opacity 300ms ease;
|
|
743
|
+
width: 18px;
|
|
744
|
+
height: 100% !important;
|
|
745
|
+
text-align: center;
|
|
698
746
|
}
|
|
699
747
|
|
|
700
|
-
.lm_controls
|
|
701
|
-
|
|
748
|
+
.lm_controls > *:hover {
|
|
749
|
+
opacity: 1;
|
|
702
750
|
}
|
|
703
751
|
|
|
704
752
|
.lm_controls .lm_popout {
|
|
705
|
-
|
|
753
|
+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=);
|
|
706
754
|
}
|
|
707
755
|
|
|
708
756
|
.lm_controls .lm_maximise {
|
|
709
|
-
|
|
757
|
+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
|
|
710
758
|
}
|
|
711
759
|
|
|
712
760
|
.lm_controls .lm_close {
|
|
713
|
-
|
|
761
|
+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);
|
|
714
762
|
}
|
|
715
763
|
|
|
716
764
|
.lm_maximised .lm_controls .lm_maximise {
|
|
717
|
-
|
|
765
|
+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);
|
|
718
766
|
}
|
|
719
767
|
|
|
720
|
-
.lm_header
|
|
768
|
+
.lm_header > .lm_tabs > .focused_tab {
|
|
721
769
|
border-color: var(--focused-tab-border-top-color);
|
|
722
770
|
}
|
|
723
771
|
|
|
724
|
-
.lm_header
|
|
772
|
+
.lm_header > .lm_tabs > .focused_tab:hover {
|
|
725
773
|
border-color: var(--focused-tab-border-top-highlight-color);
|
|
726
774
|
}
|
|
727
775
|
|
|
@@ -730,17 +778,18 @@ div.placeholder_image img {
|
|
|
730
778
|
width: 12px;
|
|
731
779
|
vertical-align: baseline;
|
|
732
780
|
margin-right: 7px;
|
|
781
|
+
pointer-events: none;
|
|
733
782
|
}
|
|
734
783
|
|
|
735
784
|
.lm_header .newTabButton {
|
|
736
785
|
background-image: var(--new-tab-button-url);
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
786
|
+
filter: invert(0.3);
|
|
787
|
+
background-size: cover;
|
|
788
|
+
width: 12px;
|
|
789
|
+
height: 12px;
|
|
790
|
+
float: left;
|
|
791
|
+
margin: 6px 5px 0 8px;
|
|
792
|
+
cursor: pointer;
|
|
744
793
|
}
|
|
745
794
|
|
|
746
795
|
.lm_header .newTabButton:hover {
|
|
@@ -748,8 +797,9 @@ div.placeholder_image img {
|
|
|
748
797
|
}
|
|
749
798
|
|
|
750
799
|
:root.light-theme .newTabButton {
|
|
751
|
-
filter: invert(.7);
|
|
800
|
+
filter: invert(0.7);
|
|
752
801
|
}
|
|
802
|
+
|
|
753
803
|
:root.light-theme .newTabButton:hover {
|
|
754
804
|
filter: invert(1);
|
|
755
805
|
}
|
|
@@ -757,30 +807,30 @@ div.placeholder_image img {
|
|
|
757
807
|
.lm_header .lm_tabdropdown_list {
|
|
758
808
|
overflow-y: auto;
|
|
759
809
|
}
|
|
760
|
-
|
|
810
|
+
|
|
761
811
|
.lm_tabdropdown_list::-webkit-scrollbar-track {
|
|
762
812
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
763
813
|
border-radius: 8px;
|
|
764
|
-
background-color: #
|
|
814
|
+
background-color: #53565f;
|
|
765
815
|
}
|
|
766
816
|
|
|
767
817
|
.lm_tabdropdown_list::-webkit-scrollbar {
|
|
768
818
|
width: 8px;
|
|
769
|
-
background-color: #
|
|
819
|
+
background-color: #53565f;
|
|
770
820
|
}
|
|
771
821
|
|
|
772
822
|
.lm_tabdropdown_list::-webkit-scrollbar-thumb {
|
|
773
823
|
border-radius: 8px;
|
|
774
|
-
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
|
775
|
-
background-color: #
|
|
824
|
+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
825
|
+
background-color: #ffffff;
|
|
776
826
|
}
|
|
777
827
|
|
|
778
828
|
:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-track {
|
|
779
|
-
background-color: #
|
|
829
|
+
background-color: #c9cbd2;
|
|
780
830
|
}
|
|
781
831
|
|
|
782
832
|
:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar {
|
|
783
|
-
background-color: #
|
|
833
|
+
background-color: #c9cbd2;
|
|
784
834
|
}
|
|
785
835
|
|
|
786
836
|
:root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-thumb {
|
|
@@ -789,40 +839,31 @@ div.placeholder_image img {
|
|
|
789
839
|
|
|
790
840
|
/**
|
|
791
841
|
* Tab Overflow Scroll Animation System
|
|
792
|
-
*
|
|
793
|
-
*
|
|
794
|
-
*
|
|
795
|
-
*
|
|
796
|
-
*
|
|
797
|
-
*
|
|
798
|
-
*
|
|
799
|
-
*
|
|
800
|
-
*
|
|
801
|
-
*
|
|
802
|
-
|
|
803
|
-
*
|
|
804
|
-
*
|
|
805
|
-
*
|
|
806
|
-
*
|
|
807
|
-
*
|
|
808
|
-
*
|
|
809
|
-
*
|
|
810
|
-
*
|
|
811
|
-
*
|
|
812
|
-
*
|
|
813
|
-
*
|
|
814
|
-
*
|
|
815
|
-
*
|
|
816
|
-
*
|
|
817
|
-
* - As the mask reveals transparency, the shadow background becomes visible through the fade
|
|
818
|
-
* - This creates a visual indicator showing there's more content to scroll
|
|
819
|
-
*
|
|
820
|
-
* 5. DYNAMIC TAB SIZING:
|
|
821
|
-
* - Uses --layout-tab-width and --layout-tab-min-width for flexible tab dimensions
|
|
822
|
-
* - Internal variables provide defaults while allowing user overrides
|
|
823
|
-
* - Possible gotchas when modifying:
|
|
824
|
-
- If a user wants to use container-queries for tab width, `lm_tab.width` must be set to an absolute value for lm_tab to be sized properly with the `container` property. This is why have the --layout-tab-width variable.
|
|
825
|
-
- The tab drop preview has no content so it needs to be initialized to something other than fit-content.
|
|
842
|
+
*
|
|
843
|
+
* 1. @property: --layout-tab-overflow-fade-left/-right are animatable numbers driving the edge fade
|
|
844
|
+
* masks (0 = no fade, 1 = full fade).
|
|
845
|
+
*
|
|
846
|
+
* 2. Fades: view timelines on two sentinels (.lm_tabs::before/::after) pinned over the first and last
|
|
847
|
+
* --layout-tab-overflow-fade-size of the scroll content. Ranges `exit` (left) and `entry` (right)
|
|
848
|
+
* measure pixels of scroll, so fade strength tracks how much content is actually hidden.
|
|
849
|
+
* A scroll timeline can't be used: once finished at 100% it pins a hold time that outlives the
|
|
850
|
+
* timeline (web-animations-1 § 4.5.12), so the left fade stuck on when a header widened or tabs
|
|
851
|
+
* closed. The JS `data-scrollable` gate and the pause/reflow kick existed to hide that.
|
|
852
|
+
*
|
|
853
|
+
* 3. --layout-tabs-overflowing: public [space toggle](https://css-tricks.com/the-css-custom-property-toggle-trick/),
|
|
854
|
+
* empty while overflowing, for environments without if() (ie core-web on safari). Only a scroll
|
|
855
|
+
* timeline reports overflow as such (it is active exactly then), so it keeps --tab-scroll. It must
|
|
856
|
+
* never reach its after phase, hence range end past 100% *and* `none` fill: if an engine clamps
|
|
857
|
+
* the range, `none` costs at most an unset toggle at max scroll, where `both` would stick forever.
|
|
858
|
+
*
|
|
859
|
+
* 4. Mask: unconditional -- both fades are 0 when the strip cannot scroll, making it a no-op.
|
|
860
|
+
*
|
|
861
|
+
* 5. Shadow reveal: .lm_tabs_scroll_shadow's background (--layout-tab-overflow-shadow-color) shows
|
|
862
|
+
* through the mask's transparency, indicating there is more to scroll.
|
|
863
|
+
*
|
|
864
|
+
* 6. Tab sizing: --layout-tab-width / --layout-tab-min-width, with _internal vars supplying defaults.
|
|
865
|
+
* Gotchas: lm_tab.width must be absolute to use lm_tab as a query container; the drop preview has
|
|
866
|
+
* no content, so it cannot be fit-content.
|
|
826
867
|
*/
|
|
827
868
|
|
|
828
869
|
/** Define as global properties so that they can be used in the animation */
|
|
@@ -838,28 +879,33 @@ div.placeholder_image img {
|
|
|
838
879
|
initial-value: 0;
|
|
839
880
|
}
|
|
840
881
|
|
|
841
|
-
@keyframes
|
|
842
|
-
|
|
843
|
-
/* Space toggle. Whitespace can be used as true/false Unused by us directly but should be exposed for environments that don't support if() (ie core-web on safari) */
|
|
844
|
-
--layout-tabs-overflowing: ;
|
|
882
|
+
@keyframes tabOverflowFadeLeft {
|
|
883
|
+
from {
|
|
845
884
|
--layout-tab-overflow-fade-left: 0;
|
|
846
885
|
}
|
|
847
|
-
|
|
886
|
+
to {
|
|
848
887
|
--layout-tab-overflow-fade-left: 1;
|
|
849
888
|
}
|
|
889
|
+
}
|
|
850
890
|
|
|
851
|
-
|
|
891
|
+
@keyframes tabOverflowFadeRight {
|
|
892
|
+
from {
|
|
852
893
|
--layout-tab-overflow-fade-right: 1;
|
|
853
894
|
}
|
|
895
|
+
to {
|
|
896
|
+
--layout-tab-overflow-fade-right: 0;
|
|
897
|
+
}
|
|
898
|
+
}
|
|
854
899
|
|
|
900
|
+
@keyframes tabOverflowToggle {
|
|
901
|
+
/* Space toggle; set at both ends so it holds wherever progress lands. */
|
|
902
|
+
0%,
|
|
855
903
|
100% {
|
|
856
|
-
/* Space toggle. Whitespace can be used as true/false */
|
|
857
904
|
--layout-tabs-overflowing: ;
|
|
858
|
-
--layout-tab-overflow-fade-right: 0;
|
|
859
905
|
}
|
|
860
906
|
}
|
|
861
907
|
|
|
862
|
-
.lm_goldenlayout[data-settings-tab-overflow=
|
|
908
|
+
.lm_goldenlayout[data-settings-tab-overflow='scroll'] {
|
|
863
909
|
/* Defining separate _internal variables because we need defaults but our drop preview needs to know if the user set styles */
|
|
864
910
|
--_internal-tab-width: var(--layout-tab-width, fit-content);
|
|
865
911
|
--_internal-tab-min-width: var(--layout-tab-min-width, var(--_internal-tab-width));
|
|
@@ -867,16 +913,89 @@ div.placeholder_image img {
|
|
|
867
913
|
.lm_tab {
|
|
868
914
|
width: var(--_internal-tab-width);
|
|
869
915
|
min-width: var(--_internal-tab-min-width);
|
|
916
|
+
display: flex;
|
|
917
|
+
flex-direction: row;
|
|
918
|
+
align-items: center;
|
|
919
|
+
gap: 6px;
|
|
920
|
+
float: none;
|
|
921
|
+
height: unset;
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
.lm_tabs {
|
|
925
|
+
display: flex;
|
|
926
|
+
}
|
|
927
|
+
|
|
928
|
+
.lm_header .lm_tabs .lm_tab {
|
|
929
|
+
padding-top: 0;
|
|
930
|
+
padding-bottom: 0;
|
|
931
|
+
}
|
|
932
|
+
|
|
933
|
+
.lm_header .lm_tab .lm_title {
|
|
934
|
+
flex: 1 1 auto;
|
|
935
|
+
min-width: 0;
|
|
936
|
+
display: block;
|
|
937
|
+
margin-right: 0;
|
|
938
|
+
line-height: 1;
|
|
939
|
+
overflow: hidden;
|
|
940
|
+
text-overflow: ellipsis;
|
|
941
|
+
vertical-align: unset;
|
|
942
|
+
}
|
|
943
|
+
|
|
944
|
+
.tab-icon {
|
|
945
|
+
flex: 0 0 auto;
|
|
946
|
+
vertical-align: unset;
|
|
947
|
+
margin-right: 0;
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
.lm_header .lm_tab > .lm_tab_icon {
|
|
951
|
+
flex: 0 0 auto;
|
|
952
|
+
margin-right: 0;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
.lm_tab_custom_control {
|
|
956
|
+
flex: 0 0 auto;
|
|
957
|
+
display: flex;
|
|
958
|
+
align-items: center;
|
|
959
|
+
justify-content: center;
|
|
960
|
+
width: var(--layout-tab-custom-control-size, 20px);
|
|
961
|
+
height: var(--layout-tab-custom-control-size, 20px);
|
|
962
|
+
/* Beat `.lm_header [class^=lm_] { box-sizing: content-box !important }` in goldenlayout-base.css */
|
|
963
|
+
box-sizing: border-box !important;
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
.lm_header .lm_tab .lm_close_tab {
|
|
967
|
+
flex: 0 0 auto;
|
|
968
|
+
display: flex;
|
|
969
|
+
align-items: center;
|
|
970
|
+
justify-content: center;
|
|
971
|
+
width: 20px;
|
|
972
|
+
height: 20px;
|
|
973
|
+
background-repeat: no-repeat;
|
|
974
|
+
position: static;
|
|
975
|
+
top: auto;
|
|
976
|
+
right: auto;
|
|
977
|
+
margin: 0;
|
|
978
|
+
padding: 0;
|
|
979
|
+
line-height: 0;
|
|
870
980
|
}
|
|
871
981
|
|
|
872
982
|
.lm_tabs_scroll_shadow {
|
|
873
983
|
width: unset;
|
|
984
|
+
height: 100%;
|
|
874
985
|
display: flex;
|
|
875
986
|
position: relative;
|
|
876
987
|
flex: 0 1 auto;
|
|
877
988
|
overflow: hidden;
|
|
878
989
|
background: var(--layout-tab-overflow-shadow-color);
|
|
879
990
|
|
|
991
|
+
/*
|
|
992
|
+
Per-strip scope: the names are declared on pseudo-elements inside .lm_tabs and lookup only
|
|
993
|
+
walks ancestors. Must be an ancestor (on .lm_tabs itself works in Chromium, not WebKit), and
|
|
994
|
+
must not be hoisted higher -- identical names sharing one scope are ambiguous and silently
|
|
995
|
+
kill every strip's timelines.
|
|
996
|
+
*/
|
|
997
|
+
timeline-scope: --tab-fade-start, --tab-fade-end;
|
|
998
|
+
|
|
880
999
|
.lm_tabs {
|
|
881
1000
|
position: unset;
|
|
882
1001
|
--layout-tabs-overflowing: initial;
|
|
@@ -885,21 +1004,64 @@ div.placeholder_image img {
|
|
|
885
1004
|
scrollbar-width: none;
|
|
886
1005
|
-ms-overflow-style: none;
|
|
887
1006
|
scroll-timeline: --tab-scroll x;
|
|
888
|
-
animation: tabScrollFade linear both;
|
|
889
|
-
animation-timeline: --tab-scroll;
|
|
890
1007
|
display: flex;
|
|
891
1008
|
|
|
892
|
-
mask-image: linear-gradient(
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
1009
|
+
mask-image: linear-gradient(
|
|
1010
|
+
to right,
|
|
1011
|
+
rgba(0, 0, 0, calc(1 - var(--layout-tab-overflow-fade-left))) 0,
|
|
1012
|
+
rgba(0, 0, 0, 1) var(--layout-tab-overflow-fade-size),
|
|
1013
|
+
rgba(0, 0, 0, 1) calc(100% - var(--layout-tab-overflow-fade-size)),
|
|
1014
|
+
rgba(0, 0, 0, calc(1 - var(--layout-tab-overflow-fade-right))) 100%
|
|
1015
|
+
);
|
|
897
1016
|
mask-mode: alpha;
|
|
898
1017
|
}
|
|
1018
|
+
|
|
1019
|
+
/*
|
|
1020
|
+
Sentinels. Each is one fade-size wide and cancels that width with a negative margin, so it
|
|
1021
|
+
overlays the edge tab without affecting layout or the scroll range it measures.
|
|
1022
|
+
Pseudo-elements keep them invisible to :nth-child and to GL's tab bookkeeping.
|
|
1023
|
+
*/
|
|
1024
|
+
.lm_tabs::before,
|
|
1025
|
+
.lm_tabs::after {
|
|
1026
|
+
content: '';
|
|
1027
|
+
flex: 0 0 var(--layout-tab-overflow-fade-size);
|
|
1028
|
+
align-self: stretch;
|
|
1029
|
+
pointer-events: none;
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
.lm_tabs::before {
|
|
1033
|
+
view-timeline: --tab-fade-start x;
|
|
1034
|
+
margin-right: calc(-1 * var(--layout-tab-overflow-fade-size));
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
.lm_tabs::after {
|
|
1038
|
+
view-timeline: --tab-fade-end x;
|
|
1039
|
+
margin-left: calc(-1 * var(--layout-tab-overflow-fade-size));
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
/*
|
|
1043
|
+
Guarded: unsupported engines would otherwise run these as 0s animations and fill to a
|
|
1044
|
+
permanent fade. Skipped, the registered initial value of 0 applies and neither edge fades.
|
|
1045
|
+
animation-timeline/-range are reset-only in the `animation` shorthand, so they follow it.
|
|
1046
|
+
*/
|
|
1047
|
+
@supports (animation-timeline: --tab-fade-start) {
|
|
1048
|
+
.lm_tabs {
|
|
1049
|
+
animation:
|
|
1050
|
+
tabOverflowFadeLeft linear both,
|
|
1051
|
+
tabOverflowFadeRight linear both,
|
|
1052
|
+
tabOverflowToggle linear;
|
|
1053
|
+
animation-timeline: --tab-fade-start, --tab-fade-end, --tab-scroll;
|
|
1054
|
+
animation-range:
|
|
1055
|
+
exit 0% exit 100%,
|
|
1056
|
+
entry 0% entry 100%,
|
|
1057
|
+
normal 110%;
|
|
1058
|
+
}
|
|
1059
|
+
}
|
|
899
1060
|
}
|
|
900
1061
|
|
|
901
1062
|
.lm_header {
|
|
902
1063
|
display: flex;
|
|
1064
|
+
align-items: center;
|
|
903
1065
|
}
|
|
904
1066
|
|
|
905
1067
|
.lm_header .lm_controls {
|
|
@@ -916,10 +1078,58 @@ div.placeholder_image img {
|
|
|
916
1078
|
float: unset;
|
|
917
1079
|
}
|
|
918
1080
|
|
|
1081
|
+
.lm_header .newTabButton {
|
|
1082
|
+
flex: 0 0 auto;
|
|
1083
|
+
margin: 0 5px 0 8px;
|
|
1084
|
+
}
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
/**
|
|
1088
|
+
* GL2 DROPDOWN OVERFLOW — CSS-first flex layout
|
|
1089
|
+
*
|
|
1090
|
+
* Mirrors the scroll mode's flex structure but uses overflow:hidden instead of
|
|
1091
|
+
* overflow-x:auto. A ResizeObserver in tabs-container.ts moves overflowing tabs
|
|
1092
|
+
* into/out of the dropdown list by checking scrollWidth > clientWidth.
|
|
1093
|
+
*/
|
|
1094
|
+
.lm_goldenlayout[data-settings-tab-overflow='dropdown'] {
|
|
1095
|
+
--_internal-tab-width: var(--layout-tab-width, fit-content);
|
|
1096
|
+
--_internal-tab-min-width: var(--layout-tab-min-width, var(--_internal-tab-width));
|
|
1097
|
+
|
|
1098
|
+
.lm_tab {
|
|
1099
|
+
width: var(--_internal-tab-width);
|
|
1100
|
+
min-width: var(--_internal-tab-min-width);
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
.lm_header {
|
|
1104
|
+
display: flex;
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
.lm_tabs {
|
|
1108
|
+
position: unset;
|
|
1109
|
+
display: flex;
|
|
1110
|
+
flex: 0 1 auto;
|
|
1111
|
+
width: auto;
|
|
1112
|
+
min-width: 0;
|
|
1113
|
+
overflow: hidden;
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
.lm_header .lm_controls {
|
|
1117
|
+
position: unset;
|
|
1118
|
+
flex: 0 0 auto;
|
|
1119
|
+
margin-left: auto;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
.lm_drop_tab_placeholder {
|
|
1123
|
+
width: var(--layout-tab-width, 100px);
|
|
1124
|
+
min-width: var(--layout-tab-min-width, 100px);
|
|
1125
|
+
float: unset;
|
|
1126
|
+
}
|
|
1127
|
+
|
|
919
1128
|
.lm_header .newTabButton {
|
|
920
1129
|
flex: 0 0 auto;
|
|
921
1130
|
}
|
|
922
1131
|
}
|
|
1132
|
+
|
|
923
1133
|
.lm_close {
|
|
924
1134
|
display: none;
|
|
925
1135
|
}
|