@deephaven/golden-layout 0.21.2-beta.2 → 0.21.2-beta.6

package/scss/goldenlayout-dark-theme.scss

@@ -0,0 +1,234 @@
+// Color variables (appears count calculates by raw css)
+$color0: #000000; // Appears 7 times
+$color1: #222222; // Appears 3 times
+$color2: #eeeeee; // Appears 2 times
+$color3: #dddddd; // Appears 2 times
+
+$color4: #cccccc; // Appears 1 time
+$color5: #444444; // Appears 1 time
+$color6: #999999; // Appears 1 time
+$color7: #111111; // Appears 1 time
+$color8: #452500; // Appears 1 time
+$color9: #555555; // Appears 1 time
+$color10: #ffffff; // Appears 2 time
+
+// ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
+
+// Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
+.lm_goldenlayout {
+  background: $color0;
+}
+
+// Single Pane content (area in which final dragged content is contained)
+.lm_content {
+  background: $color1;
+}
+
+// Single Pane content during Drag (style of moving window following mouse)
+.lm_dragProxy {
+  .lm_content {
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
+  }
+}
+
+// Placeholder Container of target position
+.lm_dropTargetIndicator {
+  box-shadow: inset 0 0 30px $color0;
+  outline: 1px dashed $color4;
+  transition: all 200ms ease;
+
+  // Inner Placeholder
+  .lm_inner {
+    background: $color0;
+    opacity: 0.2;
+  }
+}
+
+// Separator line (handle to change pane size)
+.lm_splitter {
+  background: $color0;
+  opacity: 0.001;
+  transition: opacity 200ms ease;
+
+  &:hover, // When hovered by mouse...
+  &.lm_dragging {
+    background: $color5;
+    opacity: 1;
+  }
+}
+
+// Pane Header (container of Tabs for each pane)
+.lm_header {
+  height: 20px;
+  user-select: none;
+
+  &.lm_selectable {
+    cursor: pointer;
+  }
+
+  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
+  .lm_tab {
+    font-family: Arial, sans-serif;
+    font-size: 12px;
+    color: $color6;
+    background: $color7;
+    box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.3);
+    margin-right: 2px;
+    padding-bottom: 2px;
+    padding-top: 2px;
+
+    /*.lm_title         // Present in LIGHT Theme
+    {
+      padding-top:1px;
+    }*/
+
+    // Close Tab Icon
+    .lm_close_tab {
+      width: 11px;
+      height: 11px;
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==);
+      background-position: center center;
+      background-repeat: no-repeat;
+      top: 4px;
+      right: 6px;
+      opacity: 0.4;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    // If Tab is active, so if it's in foreground
+    &.lm_active {
+      border-bottom: none;
+      box-shadow: 0 -2px 2px $color0;
+      padding-bottom: 3px;
+
+      .lm_close_tab {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.lm_dragProxy.lm_bottom,
+.lm_stack.lm_bottom {
+  .lm_header .lm_tab {
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
+    &.lm_active {
+      box-shadow: 0 2px 2px $color0;
+    }
+  }
+}
+
+// If Pane Header (container of Tabs for each pane) is selected (used only if addition of new Contents is made "by selection" and not "by drag")
+.lm_selected {
+  .lm_header {
+    background-color: $color8;
+  }
+}
+
+.lm_tab {
+  &:hover, // If Tab is hovered
+  &.lm_active // If Tab is active, so if it's in foreground
+  {
+    background: $color1;
+    color: $color3;
+  }
+}
+
+.lm_header .lm_tabs .lm_tab.lm_keyboard_active {
+  color: $color0;
+  background: $color3;
+}
+
+// Dropdown arrow for additional tabs when too many to be displayed
+.lm_header .lm_controls .lm_tabdropdown:before {
+  color: $color10;
+}
+
+// Pane controls (popout, maximize, minimize, close)
+.lm_controls {
+  // All Pane controls shares these
+  > li {
+    position: relative;
+    background-position: center center;
+    background-repeat: no-repeat;
+    opacity: 0.4;
+    transition: opacity 300ms ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  // Icon to PopOut Pane, so move it to a different Browser Window
+  .lm_popout {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=);
+  }
+
+  // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
+  .lm_maximise {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
+  }
+
+  // Icon to Close Pane and so remove it from GoldenLayout Container
+  .lm_close {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);
+  }
+
+  .lm_tabnextbutton {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjUGBgEGBg4GBgYGFgYAKTHCARoDgABscAe0vtWukAAAAASUVORK5CYII=);
+  }
+
+  .lm_tabpreviousbutton {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjYGJgYGFg4GBgEGBgUACTHCARoDgABSMAXe2fzqEAAAAASUVORK5CYII=);
+  }
+}
+
+// If a specific Pane is maximized
+.lm_maximised {
+  // Pane Header (container of Tabs for each pane) can have different style when is Maximized
+  .lm_header {
+    background-color: $color0;
+  }
+
+  // Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
+  .lm_controls {
+    .lm_maximise {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);
+    }
+  }
+}
+
+.lm_transition_indicator {
+  background-color: $color0;
+  border: 1px dashed $color9;
+}
+
+// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
+.lm_popin {
+  cursor: pointer;
+
+  // Background of Icon
+  .lm_bg {
+    background: $color10;
+    opacity: 0.3;
+  }
+
+  // Icon to Restore original position in Golden Layout Container
+  .lm_icon {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
+    background-position: center center;
+    background-repeat: no-repeat;
+    border-left: 1px solid $color2;
+    border-top: 1px solid $color2;
+    opacity: 0.7;
+  }
+
+  &:hover {
+    .lm_icon {
+      opacity: 1;
+    }
+  }
+}

package/scss/goldenlayout-light-theme.scss

@@ -0,0 +1,242 @@
+// Color variables (appears count calculates by raw css)
+$color0: #e1e1e1; // Appears 3 times
+$color1: #000000; // Appears 4 times
+$color2: #cccccc; // Appears 3 times
+$color3: #777777; // Appears 2 times
+
+$color4: #ffffff; // Appears 1 time
+$color5: #555555; // Appears 1 time
+$color6: #452500; // Appears 1 time
+$color7: #fafafa; // Appears 1 time
+$color8: #999999; // Appears 1 time
+$color9: #bbbbbb; // Appears 1 time
+$color10: #888888; // Appears 1 time
+
+// ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
+
+// Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
+.lm_goldenlayout {
+  //background:$color0;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAGFBMVEX29vb19fXw8PDy8vL09PTz8/Pv7+/x8fGKuegbAAAAyUlEQVR42pXRQQ7CMBRDwST9pfe/MahEmgURbt7WmpVb6+vG0dd9REnn66xRy/qXiCgmEIIJhGACIZhACCYQgvlDCDFIEAwSBIMEwSBBMEgQDBIEgwTBIEEwCJEMQiSDENFMQmQzCZEbNyGemd6KeGZ6u4hnXe2qbdLHFjhf1XqNLXHev4wdMd9nspiEiWISJgqECQJhgkCYIBAmCIQJAmGCQJggECYJhAkCEUMEwhCBMEQgDJEIQ2RSg0iEIRJhiB/S+rrjqvXQ3paIJUgPBXxiAAAAAElFTkSuQmCC);
+}
+
+// Single Pane content (area in which final dragged content is contained)
+.lm_content {
+  background: $color0;
+  border: 1px solid $color2;
+}
+
+// Single Pane content during Drag (style of moving window following mouse)
+.lm_dragProxy {
+  .lm_content {
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+  }
+}
+
+// Placeholder Container of target position
+.lm_dropTargetIndicator {
+  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
+  outline: 1px dashed $color2;
+  margin: 1px;
+  transition: all 200ms ease;
+
+  // Inner Placeholder
+  .lm_inner {
+    background: $color1;
+    opacity: 0.1;
+  }
+}
+
+// Separator line (handle to change pane size)
+.lm_splitter {
+  background: $color8;
+  opacity: 0.001;
+  transition: opacity 200ms ease;
+
+  &:hover, // When hovered by mouse...
+  &.lm_dragging {
+    background: $color9;
+    opacity: 1;
+  }
+}
+
+// Pane Header (container of Tabs for each pane)
+.lm_header {
+  height: 20px;
+  //user-select:none;       // Present in DARK Theme
+
+  &.lm_selectable {
+    cursor: pointer;
+  }
+
+  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
+  .lm_tab {
+    font-family: Arial, sans-serif;
+    font-size: 12px;
+    color: $color10;
+    background: $color7;
+    margin-right: 2px;
+    padding-bottom: 4px;
+    border: 1px solid $color2;
+    border-bottom: none;
+
+    .lm_title {
+      padding-top: 1px;
+    }
+
+    // Close Tab Icon
+    .lm_close_tab {
+      width: 11px;
+      height: 11px;
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAIklEQVR4nGNgYGD4z4Ad/Mdg4ODDBXCZRFgCp5EEHQMXBwAQAgz0SVCcggAAAABJRU5ErkJggg==);
+      background-position: center center;
+      background-repeat: no-repeat;
+      right: 6px;
+      top: 4px;
+      opacity: 0.4;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    // If Tab is active, so if it's in foreground
+    &.lm_active {
+      border-bottom: none;
+      box-shadow: 2px -2px 2px -2px rgba(0, 0, 0, 0.2);
+      padding-bottom: 5px;
+
+      &.lm_focusin {
+        box-shadow: inset 0px 1px $color1;
+      }
+
+      .lm_close_tab {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.lm_window_blur .lm_tab.lm_active.lm_focusin {
+  box-shadow: none;
+}
+
+.lm_dragProxy.lm_bottom,
+.lm_stack.lm_bottom {
+  .lm_header .lm_tab {
+    &.lm_active {
+      box-shadow: 2px 2px 2px -2px rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+// If Pane Header (container of Tabs for each pane) is selected (used only if addition of new Contents is made "by selection" and not "by drag")
+.lm_selected {
+  .lm_header {
+    background-color: $color6;
+  }
+}
+
+.lm_tab {
+  &:hover, // If Tab is hovered
+  &.lm_active // If Tab is active, so if it's in foreground
+  {
+    background: $color0;
+    color: $color3;
+  }
+}
+
+.lm_header .lm_tabs .lm_tab.lm_keyboard_active {
+  color: $color0;
+  background: $color3;
+}
+
+// Dropdown arrow for additional tabs when too many to be displayed
+.lm_header .lm_controls .lm_tabdropdown:before {
+  color: $color1;
+}
+
+// Pane controls (popout, maximize, minimize, close)
+.lm_controls {
+  // All Pane controls shares these
+  > li {
+    position: relative;
+    background-position: center center;
+    background-repeat: no-repeat;
+    opacity: 0.4;
+    transition: opacity 300ms ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  // Icon to PopOut Pane, so move it to a different Browser Window
+  .lm_popout {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANUlEQVR4nI2QMQoAMAwCz5L/f9mOzZIaN0E9UDyZhaaQz6atgBHgambEJ5wBKoS0WaIvfT+6K2MIECN19MAAAAAASUVORK5CYII=);
+  }
+
+  // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
+  .lm_maximise {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAIklEQVR4nGNkYGD4z0AAMBFSAAOETPpPlEmDUREjAxHhBABPvAQLFv3qngAAAABJRU5ErkJggg==);
+  }
+
+  // Icon to Close Pane and so remove it from GoldenLayout Container
+  .lm_close {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVR4nGNgYGD4z4Af/Mdg4FKASwCnDf8JKSBoAtEmEXQTQd8RDCcA6+4Q8OvIgasAAAAASUVORK5CYII=);
+  }
+
+  .lm_tabnextbutton {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABxJREFUCNdjUGBgEGBg4GBgYGFgYAKTHCARoDgABscAe0vtWukAAAAASUVORK5CYII=);
+  }
+
+  .lm_tabpreviousbutton {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABxJREFUCNdjYGJgYGFg4GBgEGBgUACTHCARoDgABSMAXe2fzqEAAAAASUVORK5CYII=);
+  }
+}
+
+// If a specific Pane is maximized
+.lm_maximised {
+  // Pane Header (container of Tabs for each pane) can have different style when is Maximized
+  .lm_header {
+    background-color: $color4;
+  }
+
+  // Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
+  .lm_controls {
+    .lm_maximise {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);
+    }
+  }
+}
+
+.lm_transition_indicator {
+  background-color: $color1;
+  border: 1px dashed $color5;
+}
+
+// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
+.lm_popin {
+  cursor: pointer;
+
+  // Background of Icon
+  .lm_bg {
+    background: $color1;
+    opacity: 0.7;
+  }
+
+  // Icon to Restore original position in Golden Layout Container
+  .lm_icon {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
+    background-position: center center;
+    background-repeat: no-repeat;
+    opacity: 0.7;
+  }
+
+  &:hover {
+    .lm_icon {
+      opacity: 1;
+    }
+  }
+}

package/scss/goldenlayout-soda-theme.scss

@@ -0,0 +1,213 @@
+// Color variables (appears count calculates by raw css)
+$color0: #000000; // Appears 7 times
+$color1: #eeeeee; // Appears 3 times
+$color2: #444444; // Appears 2 times
+$color3: #222222; // Appears 1 time
+$color4: #555555; // Appears 1 time
+$color5: #452500; // Appears 1 time
+$color6: #999999; // Appears 1 time
+$color7: #272822; // Appears 1 time
+$color8: #cccccc; // Appears 1 time
+
+// ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
+
+// Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
+.lm_goldenlayout {
+  background: $color0;
+  background: linear-gradient($color0, $color1);
+  background-repeat: repeat;
+}
+
+// Single Pane content (area in which final dragged content is contained)
+.lm_content {
+  background: $color7;
+}
+
+// Single Pane content during Drag (style of moving window following mouse)
+.lm_dragProxy {
+  .lm_content {
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
+  }
+}
+
+// Placeholder Container of target position
+.lm_dropTargetIndicator {
+  box-shadow: inset 0 0 30px $color0;
+  outline: 1px dashed $color8;
+  transition: all 200ms ease;
+
+  // Inner Placeholder
+  .lm_inner {
+    background: $color0;
+    opacity: 0.2;
+  }
+}
+
+// Separator line (handle to change pane size)
+.lm_splitter {
+  background: $color0;
+  opacity: 0.001;
+  transition: opacity 200ms ease;
+
+  &:hover, // When hovered by mouse...
+  &.lm_dragging {
+    background: $color2;
+    opacity: 1;
+  }
+}
+
+// Pane Header (container of Tabs for each pane)
+.lm_header {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAANElEQVR4nH2IsQ0AMAyDHM5J/v8qD3ixulWdOiAQmhkAquoi6frt33udBEnYprvZXZJg+wAKcQ/o96fYNQAAAABJRU5ErkJggg==);
+  height: 28px;
+  //user-select:none;       // Present in DARK Theme
+
+  &.lm_selectable {
+    cursor: pointer;
+  }
+
+  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
+  .lm_tab {
+    font-family: Arial, sans-serif;
+    font-size: 13px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAANklEQVR4nHXGsQ0AMAgDQcuFh2EC9p+HhpIGaCMlKV5/cHdKoiQC+DYzl8+/nJk0M0YEu5tVtXqyIehfJSkOAAAAAElFTkSuQmCC);
+    color: $color6;
+    margin: 0;
+    padding-bottom: 4px;
+
+    // (Used in other Themes but actually not here)
+    /*
+    .lm_title
+    {
+      padding-top:1px;
+    }*/
+
+    // Close Tab Icon
+    .lm_close_tab {
+      width: 11px;
+      height: 11px;
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==);
+      background-position: center center;
+      background-repeat: no-repeat;
+      right: 6px;
+      top: 4px;
+      opacity: 0.4;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    // If Tab is active, so if it's in foreground
+    &.lm_active {
+      border-bottom: none;
+      padding-bottom: 5px;
+
+      .lm_close_tab {
+        opacity: 1;
+      }
+    }
+  }
+}
+.lm_stack.lm_left,
+.lm_stack.lm_right {
+  .lm_header {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAABCAIAAABCJ1mGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QQHEjUmFgXMqwAAADBJREFUCNdth7ENADAMwkjOIf9/xQMsqEPVTPVg2TUz3V0PANcb310nAWCbpKQktg/HHA+z1P+XmwAAAABJRU5ErkJggg==);
+  }
+}
+// If Pane Header (container of Tabs for each pane) is selected (used only if addition of new Contents is made "by selection" and not "by drag")
+.lm_selected {
+  .lm_header {
+    background-color: $color5;
+  }
+}
+
+.lm_tab {
+  &:hover, // If Tab is hovered
+  &.lm_active // If Tab is active, so if it's in foreground
+  {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAKUlEQVR4nGPw8vJi4ubmZmJgYGD6//8/nEZnY+MTUoPM/vfvH9PPnz8BJQc56Apw2moAAAAASUVORK5CYII=);
+    color: $color1;
+  }
+}
+
+// Dropdown arrow for additional tabs when too many to be displayed
+.lm_header .lm_controls .lm_tabdropdown:before {
+  color: $color1;
+}
+
+// Pane controls (popout, maximize, minimize, close)
+.lm_controls {
+  // All Pane controls shares these
+  > li {
+    position: relative;
+    background-position: center center;
+    background-repeat: no-repeat;
+    opacity: 0.4;
+    transition: opacity 300ms ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  // Icon to PopOut Pane, so move it to a different Browser Window
+  .lm_popout {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=);
+  }
+
+  // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
+  .lm_maximise {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
+  }
+
+  // Icon to Close Pane and so remove it from GoldenLayout Container
+  .lm_close {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);
+  }
+}
+
+// If a specific Pane is maximized
+.lm_maximised {
+  // Pane Header (container of Tabs for each pane) can have different style when is Maximized
+  .lm_header {
+    background-color: $color0;
+  }
+
+  // Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
+  .lm_controls {
+    .lm_maximise {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);
+    }
+  }
+}
+
+.lm_transition_indicator {
+  background-color: $color0;
+  border: 1px dashed $color4;
+}
+
+// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
+.lm_popin {
+  cursor: pointer;
+
+  // Background of Icon
+  .lm_bg {
+    background: $color1;
+    opacity: 0.7;
+  }
+
+  // Icon to Restore original position in Golden Layout Container
+  .lm_icon {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
+    background-position: center center;
+    background-repeat: no-repeat;
+    opacity: 0.7;
+  }
+
+  &:hover {
+    .lm_icon {
+      opacity: 1;
+    }
+  }
+}