golden-layout
Version:
A multi-screen javascript Layout manager
137 lines (136 loc) • 5.53 kB
CSS
.lm_goldenlayout {
background: #000000;
background: linear-gradient(#000000, #eeeeee);
background-repeat: repeat;
}
.lm_content {
background: #272822;
}
.lm_dragProxy .lm_content {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}
.lm_dropTargetIndicator {
box-shadow: inset 0 0 30px #000000;
outline: 1px dashed #cccccc;
}
.lm_dropTargetIndicator .lm_inner {
background: #000000;
opacity: 0.2;
}
.lm_splitter {
background: #000000;
opacity: 0.001;
transition: opacity 200ms ease;
}
.lm_splitter:hover,
.lm_splitter.lm_dragging {
background: #444444;
opacity: 1;
}
.lm_header {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAANElEQVR4nH2IsQ0AMAyDHM5J/v8qD3ixulWdOiAQmhkAquoi6frt33udBEnYprvZXZJg+wAKcQ/o96fYNQAAAABJRU5ErkJggg==);
height: 28px;
}
.lm_header .lm_tab {
font-family: Arial, sans-serif;
font-size: 13px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAANklEQVR4nHXGsQ0AMAgDQcuFh2EC9p+HhpIGaCMlKV5/cHdKoiQC+DYzl8+/nJk0M0YEu5tVtXqyIehfJSkOAAAAAElFTkSuQmCC);
color: #999999;
margin: 0;
padding-bottom: 4px;
/*
.lm_title
{
padding-top:1px;
}*/
}
.lm_header .lm_tab .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;
}
.lm_header .lm_tab .lm_close_tab:hover {
opacity: 1;
}
.lm_header .lm_tab.lm_active {
border-bottom: none;
padding-bottom: 5px;
}
.lm_header .lm_tab.lm_active .lm_close_tab {
opacity: 1;
}
.lm_stack.lm_left .lm_header,
.lm_stack.lm_right .lm_header {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAABCAIAAABCJ1mGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QQHEjUmFgXMqwAAADBJREFUCNdth7ENADAMwkjOIf9/xQMsqEPVTPVg2TUz3V0PANcb310nAWCbpKQktg/HHA+z1P+XmwAAAABJRU5ErkJggg==);
}
.lm_selected .lm_header {
background-color: #452500;
}
.lm_tab:hover,
.lm_tab.lm_active {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAKUlEQVR4nGPw8vJi4ubmZmJgYGD6//8/nEZnY+MTUoPM/vfvH9PPnz8BJQc56Apw2moAAAAASUVORK5CYII=);
color: #eeeeee;
}
.lm_header .lm_controls .lm_tabdropdown:before {
color: #eeeeee;
}
.lm_controls > * {
position: relative;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.4;
transition: opacity 300ms ease;
}
.lm_controls > *:hover {
opacity: 1;
}
.lm_controls .lm_popout {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=);
}
.lm_controls .lm_maximise {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
}
.lm_controls .lm_close {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);
}
.lm_controls .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_stack.lm_docked > .lm_items {
border-color: #555555;
border-image: linear-gradient(to right, #555555 1%, #999999 100%);
}
.lm_maximised .lm_header {
background-color: #000000;
}
.lm_maximised .lm_controls .lm_maximise {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);
}
.lm_transition_indicator {
background-color: #000000;
border: 1px dashed #555555;
}
.lm_popin {
cursor: pointer;
}
.lm_popin .lm_bg {
background: #eeeeee;
opacity: 0.7;
}
.lm_popin .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;
}
.lm_popin:hover .lm_icon {
opacity: 1;
}