@openfin/core-web 0.46.65 → 0.46.69

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/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: #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;
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: #7B7BFF;
334
- --of-light-theme: #504CFF;
335
- --of-highlight: #958EFF;
336
- --of-highlight-opacity: #958EFF26;
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: #F55D5F;
339
- --of-positive-green: #29AF6F;
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(100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - var(--body-container-padding-bottom));
394
- --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) var(--body-container-padding-bottom) var(--body-container-padding-left);
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(var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top));
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(100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - var(--layout-container-padding-bottom));
404
- --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) var(--layout-container-padding-bottom) var(--layout-container-padding-left);
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("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K");
408
- --minimize-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K");
409
- --expand-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg==");
410
- --tab-close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K");
411
- --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==");
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, select, button, li, span, div {
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
  }
@@ -645,7 +660,7 @@ div.placeholder_image img {
645
660
  .lm_splitter {
646
661
  background-color: var(--splitter-color);
647
662
  opacity: 0.001;
648
- transition: opacity 200ms ease;
663
+ transition: opacity 200ms ease;
649
664
  }
650
665
 
651
666
  .lm_splitter:hover,
@@ -694,7 +709,7 @@ div.placeholder_image img {
694
709
 
695
710
  .lm_dropTargetIndicator .lm_inner {
696
711
  background: var(--tab-background-color);
697
- opacity: .2
712
+ opacity: 0.2;
698
713
  }
699
714
 
700
715
  .lm_tabdropdown_list {
@@ -710,7 +725,7 @@ div.placeholder_image img {
710
725
  }
711
726
 
712
727
  .lm_header .lm_controls .lm_tabdropdown:before {
713
- color: var(--tab-font-color)
728
+ color: var(--tab-font-color);
714
729
  }
715
730
 
716
731
  .lm_controls {
@@ -723,7 +738,7 @@ div.placeholder_image img {
723
738
  position: relative;
724
739
  background-position: center center;
725
740
  background-repeat: no-repeat;
726
- opacity: .4;
741
+ opacity: 0.4;
727
742
  transition: opacity 300ms ease;
728
743
  width: 18px;
729
744
  height: 100% !important;
@@ -731,30 +746,30 @@ div.placeholder_image img {
731
746
  }
732
747
 
733
748
  .lm_controls > *:hover {
734
- opacity: 1
749
+ opacity: 1;
735
750
  }
736
751
 
737
752
  .lm_controls .lm_popout {
738
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=)
753
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=);
739
754
  }
740
755
 
741
756
  .lm_controls .lm_maximise {
742
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==)
757
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
743
758
  }
744
759
 
745
760
  .lm_controls .lm_close {
746
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=)
761
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);
747
762
  }
748
763
 
749
764
  .lm_maximised .lm_controls .lm_maximise {
750
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC)
765
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);
751
766
  }
752
767
 
753
- .lm_header>.lm_tabs>.focused_tab {
768
+ .lm_header > .lm_tabs > .focused_tab {
754
769
  border-color: var(--focused-tab-border-top-color);
755
770
  }
756
771
 
757
- .lm_header>.lm_tabs>.focused_tab:hover {
772
+ .lm_header > .lm_tabs > .focused_tab:hover {
758
773
  border-color: var(--focused-tab-border-top-highlight-color);
759
774
  }
760
775
 
@@ -768,7 +783,7 @@ div.placeholder_image img {
768
783
 
769
784
  .lm_header .newTabButton {
770
785
  background-image: var(--new-tab-button-url);
771
- filter: invert(.3);
786
+ filter: invert(0.3);
772
787
  background-size: cover;
773
788
  width: 12px;
774
789
  height: 12px;
@@ -782,7 +797,7 @@ div.placeholder_image img {
782
797
  }
783
798
 
784
799
  :root.light-theme .newTabButton {
785
- filter: invert(.7);
800
+ filter: invert(0.7);
786
801
  }
787
802
 
788
803
  :root.light-theme .newTabButton:hover {
@@ -796,26 +811,26 @@ div.placeholder_image img {
796
811
  .lm_tabdropdown_list::-webkit-scrollbar-track {
797
812
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
798
813
  border-radius: 8px;
799
- background-color: #53565F;
814
+ background-color: #53565f;
800
815
  }
801
816
 
802
817
  .lm_tabdropdown_list::-webkit-scrollbar {
803
818
  width: 8px;
804
- background-color: #53565F;
819
+ background-color: #53565f;
805
820
  }
806
821
 
807
822
  .lm_tabdropdown_list::-webkit-scrollbar-thumb {
808
823
  border-radius: 8px;
809
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
810
- background-color: #FFFFFF;
824
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
825
+ background-color: #ffffff;
811
826
  }
812
827
 
813
828
  :root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-track {
814
- background-color: #C9CBD2;
829
+ background-color: #c9cbd2;
815
830
  }
816
831
 
817
832
  :root.light-theme .lm_tabdropdown_list::-webkit-scrollbar {
818
- background-color: #C9CBD2;
833
+ background-color: #c9cbd2;
819
834
  }
820
835
 
821
836
  :root.light-theme .lm_tabdropdown_list::-webkit-scrollbar-thumb {
@@ -824,40 +839,31 @@ div.placeholder_image img {
824
839
 
825
840
  /**
826
841
  * Tab Overflow Scroll Animation System
827
- *
828
- * This CSS implements a scroll-driven animation system for overflowing tabs with dynamic fade effects.
829
- *
830
- * How it works:
831
- *
832
- * 1. CUSTOM PROPERTIES (@property):
833
- * - Defines --layout-tab-overflow-fade-left and --layout-tab-overflow-fade-right as animatable numbers
834
- * - These properties control the intensity of fade masks on each side (0 = no fade, 1 = full fade)
835
- *
836
- * 2. SCROLL-DRIVEN ANIMATION (tabScrollFade):
837
- - see https://css-tricks.com/modern-scroll-shadows-using-scroll-driven-animations/
838
- * - Uses CSS scroll-timeline to trigger animation based on scroll position
839
- * - At scroll start (0%): Left fade is 0 (no fade), right fade is 1 (active)
840
- * - During scroll (10%-90%): Both fades are active (1)
841
- * - At scroll end (100%): Right fade is 0 (no fade), left fade is 1 (active)
842
- * - --layout-tabs-overflowing acts as a [space-toggle](https://css-tricks.com/the-css-custom-property-toggle-trick/) boolean for overflow state detection
843
- *
844
- * 3. MASK APPLICATION (.lm_tabs):
845
- * - linear-gradient mask creates transparent-to-opaque transitions on left/right edges
846
- * - Variables control the fade intensity.
847
- * - When fade value is 0, that side has no fade (fully opaque)
848
- * - When fade value is 1, that side fades from transparent to opaque over the fade-size distance
849
- *
850
- * 4. SHADOW REVEAL:
851
- * - .lm_tabs_scroll_shadow has a background color (--layout-tab-overflow-shadow-color)
852
- * - As the mask reveals transparency, the shadow background becomes visible through the fade
853
- * - This creates a visual indicator showing there's more content to scroll
854
- *
855
- * 5. DYNAMIC TAB SIZING:
856
- * - Uses --layout-tab-width and --layout-tab-min-width for flexible tab dimensions
857
- * - Internal variables provide defaults while allowing user overrides
858
- * - Possible gotchas when modifying:
859
- - 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.
860
- - 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.
861
867
  */
862
868
 
863
869
  /** Define as global properties so that they can be used in the animation */
@@ -873,28 +879,33 @@ div.placeholder_image img {
873
879
  initial-value: 0;
874
880
  }
875
881
 
876
- @keyframes tabScrollFade {
877
- 0% {
878
- /* 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) */
879
- --layout-tabs-overflowing: ;
882
+ @keyframes tabOverflowFadeLeft {
883
+ from {
880
884
  --layout-tab-overflow-fade-left: 0;
881
885
  }
882
- 10%, 100% {
886
+ to {
883
887
  --layout-tab-overflow-fade-left: 1;
884
888
  }
889
+ }
885
890
 
886
- 0%, 90% {
891
+ @keyframes tabOverflowFadeRight {
892
+ from {
887
893
  --layout-tab-overflow-fade-right: 1;
888
894
  }
895
+ to {
896
+ --layout-tab-overflow-fade-right: 0;
897
+ }
898
+ }
889
899
 
900
+ @keyframes tabOverflowToggle {
901
+ /* Space toggle; set at both ends so it holds wherever progress lands. */
902
+ 0%,
890
903
  100% {
891
- /* Space toggle. Whitespace can be used as true/false */
892
904
  --layout-tabs-overflowing: ;
893
- --layout-tab-overflow-fade-right: 0;
894
905
  }
895
906
  }
896
907
 
897
- .lm_goldenlayout[data-settings-tab-overflow="scroll"] {
908
+ .lm_goldenlayout[data-settings-tab-overflow='scroll'] {
898
909
  /* Defining separate _internal variables because we need defaults but our drop preview needs to know if the user set styles */
899
910
  --_internal-tab-width: var(--layout-tab-width, fit-content);
900
911
  --_internal-tab-min-width: var(--layout-tab-min-width, var(--_internal-tab-width));
@@ -902,16 +913,89 @@ div.placeholder_image img {
902
913
  .lm_tab {
903
914
  width: var(--_internal-tab-width);
904
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;
905
980
  }
906
981
 
907
982
  .lm_tabs_scroll_shadow {
908
983
  width: unset;
984
+ height: 100%;
909
985
  display: flex;
910
986
  position: relative;
911
987
  flex: 0 1 auto;
912
988
  overflow: hidden;
913
989
  background: var(--layout-tab-overflow-shadow-color);
914
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
+
915
999
  .lm_tabs {
916
1000
  position: unset;
917
1001
  --layout-tabs-overflowing: initial;
@@ -920,21 +1004,64 @@ div.placeholder_image img {
920
1004
  scrollbar-width: none;
921
1005
  -ms-overflow-style: none;
922
1006
  scroll-timeline: --tab-scroll x;
923
- animation: tabScrollFade linear both;
924
- animation-timeline: --tab-scroll;
925
1007
  display: flex;
926
1008
 
927
- mask-image: linear-gradient(to right,
928
- rgba(0, 0, 0, calc(1 - var(--layout-tab-overflow-fade-left))) 0,
929
- rgba(0, 0, 0, 1) var(--layout-tab-overflow-fade-size),
930
- rgba(0, 0, 0, 1) calc(100% - var(--layout-tab-overflow-fade-size)),
931
- rgba(0, 0, 0, calc(1 - var(--layout-tab-overflow-fade-right))) 100%);
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
+ );
932
1016
  mask-mode: alpha;
933
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
+ }
934
1060
  }
935
1061
 
936
1062
  .lm_header {
937
1063
  display: flex;
1064
+ align-items: center;
938
1065
  }
939
1066
 
940
1067
  .lm_header .lm_controls {
@@ -953,6 +1080,7 @@ div.placeholder_image img {
953
1080
 
954
1081
  .lm_header .newTabButton {
955
1082
  flex: 0 0 auto;
1083
+ margin: 0 5px 0 8px;
956
1084
  }
957
1085
  }
958
1086
 
@@ -963,7 +1091,7 @@ div.placeholder_image img {
963
1091
  * overflow-x:auto. A ResizeObserver in tabs-container.ts moves overflowing tabs
964
1092
  * into/out of the dropdown list by checking scrollWidth > clientWidth.
965
1093
  */
966
- .lm_goldenlayout[data-settings-tab-overflow="dropdown"] {
1094
+ .lm_goldenlayout[data-settings-tab-overflow='dropdown'] {
967
1095
  --_internal-tab-width: var(--layout-tab-width, fit-content);
968
1096
  --_internal-tab-min-width: var(--layout-tab-min-width, var(--_internal-tab-width));
969
1097
 
@@ -1001,6 +1129,7 @@ div.placeholder_image img {
1001
1129
  flex: 0 0 auto;
1002
1130
  }
1003
1131
  }
1132
+
1004
1133
  .lm_close {
1005
1134
  display: none;
1006
1135
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openfin/core-web",
3
- "version": "0.46.65",
3
+ "version": "0.46.69",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "publishConfig": {
@@ -38,7 +38,7 @@
38
38
  "tslib": "2.8.1"
39
39
  },
40
40
  "peerDependencies": {
41
- "@openfin/core": "46.100.68"
41
+ "@openfin/core": "46.100.72"
42
42
  },
43
43
  "scripts": {
44
44
  "prebuild": "rimraf out",