@genesis-community/golden-layout 2.6.0

package/dist/less/themes/goldenlayout-soda-theme.less

@@ -0,0 +1,211 @@
+// 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 fade(@color0,90%);
+  }
+}
+
+// Placeholder Container of target position
+.lm_dropTargetIndicator {
+  box-shadow: inset 0 0 30px @color0;
+  outline: 1px dashed @color8;
+
+  // 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;
+
+  // 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_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
+  > * {
+    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;
+    }
+  }
+}

package/dist/less/themes/goldenlayout-translucent-theme.less

@@ -0,0 +1,237 @@
+// Color variables (appears count calculates by raw css)
+@color0: #ffffff; // Appears 7 times
+
+@color1: #5555ff; // Appears 1 time
+@color2: #000000; // Appears 1 time
+@color3: dodgerblue; // Appears 1 time
+@color4: palevioletred; // 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: @color3;
+  background: linear-gradient(to right bottom, @color3, @color4);
+}
+
+// Single Pane content (area in which final dragged content is contained)
+.lm_content {
+  background: fade(@color0,10%);
+  box-shadow: 0 0 15px 2px fade(@color2,10%);
+  color: whitesmoke;
+}
+
+// Single Pane content during Drag (style of moving window following mouse)
+.lm_dragProxy {
+  .lm_content {
+    box-shadow: 2px 2px 4px fade(@color2,90%);
+  }
+}
+
+// Placeholder Container of target position
+.lm_dropTargetIndicator {
+  box-shadow: inset 0 0 20px fade(@color0,50%);
+  outline: 1px dashed @color0;
+
+  // Inner Placeholder (Used in other Themes but actually not here)
+  /*.lm_inner
+  {
+    background:@color0;
+    opacity:0.1;
+  }*/
+}
+
+// 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: @color0;
+    opacity: 0.4;
+  }
+}
+
+// Pane Header (container of Tabs for each pane)
+.lm_header {
+  height: 20px;
+  
+  // 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;
+    color: @color0;
+    background: fade(@color0,10%);
+    margin-right: 2px;
+    padding-bottom: 4px;
+
+    // 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;
+      box-shadow: 2px -2px 2px -2px fade(@color2,20%);
+      padding-bottom: 5px;
+
+      .lm_close_tab {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.lm_dragProxy,
+.lm_stack {
+  &.lm_right {
+    .lm_header .lm_tab {
+      &.lm_active {
+        box-shadow: 2px -2px 2px -2px fade(@color2,20%);
+      }
+    }  
+  }
+  
+  &.lm_bottom {
+    .lm_header .lm_tab {
+      &.lm_active {
+        box-shadow: 2px 2px 2px -2px fade(@color2,20%);
+      }
+    }
+  }
+}
+  
+// 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 {
+  // (Used in other Themes but actually not here)
+  /*.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: fade(@color0,30%);
+    color: @color0;
+  }
+}
+
+// Dropdown arrow for additional tabs when too many to be displayed
+// (Used in other Themes but actually not here)
+/*
+.lm_header .lm_controls .lm_tabdropdown:before 
+{
+  color:@color1;
+}*/
+
+// Pane controls (popout, maximize, minimize, close)
+.lm_controls {
+  // All Pane controls shares these
+  > * {
+    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
+// (Used in other Themes but actually not here)
+/*
+.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=);
+        }
+    }
+}
+*/
+
+// (Used in other Themes but actually not here)
+/*
+.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
+  // (Used in other Themes but actually not here)
+  /*
+  .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;
+    }
+  }
+}
+
+// Present only in this Theme
+
+.lm_item {
+  box-shadow: 2px 2px 2px fade(@color2,10%);
+}