golden-layout/dist/less/themes/goldenlayout-soda-theme.less

A multi-screen javascript Layout manager

// 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=);
  }
  
  // Icon to toggle Pane Docking at mouse hover 
  .lm_dock {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QQLEyI6TJPB/QAAAXdJREFUOMul08uKE2EQhuGnMj0m4gk1C3Wj4lZRUXDhSsSb0Cvwbty7de0diAvxcBEqiIgndDBRnJlMutzUQJvEJGBB0w1/1ft/VfV1mInM7OMohthAdp4JvkTEaLauMR+HcA83MCpAiyP1/TAzn0dEuwo0xTH8xBNsYROXca3OYx1FLcbYxkt8qMKDOIutiJjOFvUWgHbxqVQ01UIPx0vljwU186CI2KnZDDDMzKhWz5Wy3bVAmXkSJ/YVVU6LnUo5lZkHloIycxNXcAev8SYiphHxHc8KfguHVyka4m5t5hG+ZWZTCl7gKW7j6j+3lpm9ammIr7iOSx1TRsek5zNzEBHbc6CIaDNzUi2dwc0y4emaz+dy9qjefy9pZkZNFTbYw0Xcxys8LsAEv8pP7UJDRsQe3hd0o0w4Ll+9i4jfmRkRkesYch86rYuiYwGLIEtBnfNpQdpVicviIy5gHBGT/wH1S1E/MwfLEpsVoAke4G3nF1kYfwAzNYI/6q7lywAAAABJRU5ErkJggg==);
  }
}

.lm_stack.lm_docked {
  .lm_controls .lm_dock {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QQLExoPDb+5JQAAAKZJREFUOMvV0tENgjAUhWFGYBQ20FG6iYzgBo4gG8gIbAAbyAafD5akwWIATYz3sWn+e/qfFsUvBsevQDzn8gmkRI8a3W4YGjQJdD0MFQ44YUQ5S/geFgF99NFhyEmOz5QtIG4a0aYJMneuSwvmiUaEhebu0Vm51s8LLKaotzY1OQjJWbvpUyJESD0li26g2goJs2feMOyCZJxVuyFp7WvTnJcg/zkPjGQks0ox9/8AAAAASUVORK5CYII=);
  }
  
  > .lm_items {
    border-color: @color4;
    border-image: linear-gradient(to right, @color4 1%, @color6 100%);
  }
}

// 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;
    }
  }
}