golden-layout
Version:
A multi-screen javascript Layout manager https://golden-layout.com
102 lines (81 loc) • 8.3 kB
CSS
.lm_header,
.lm_header .lm_tab{
background: -webkit-linear-gradient(#dadada, #f6f6f6);
/*background: url(http://subtlepatterns.com/patterns/p2.png);*/
}
.lm_splitter{
background: -webkit-linear-gradient(#fff, #eee);
}
.lm_header{
border-bottom: 1px solid #ccc;
height: 19px ;
}
/*.lm_splitter.lm_vertical{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAIAAAAL5hHIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4ODE4MzdCREUzN0UxMUUzOTgwRjgzQzdFQjU4MDc2MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4ODE4MzdCRUUzN0UxMUUzOTgwRjgzQzdFQjU4MDc2MiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg4MTgzN0JCRTM3RTExRTM5ODBGODNDN0VCNTgwNzYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg4MTgzN0JDRTM3RTExRTM5ODBGODNDN0VCNTgwNzYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ggvUkAAAAB9JREFUeNpiWrRoCZO2tibTz58/mRgYGJhYWFgAAgwARxQFadiTOJ8AAAAASUVORK5CYII=);
background-repeat: repeat-x;
}
*/
.lm_header .lm_tab{
color: #4c4c51;
font-size: 13px;
font-weight: bold;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-bottom: 4px;
font-family: Arial, sans-serif;
}
.lm_header .lm_tab i.lm_left{
left: -2px;
top: 0;
}
.lm_header .lm_tab i.lm_right{
right: -2px;
top: 0;
width: 0;
z-index: 1;
}
.lm_header .lm_tab.active i.lm_right{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNzgxRkU0RUUzN0YxMUUzOUM1QkNCM0Q0NTk3RkM0QyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNzgxRkU0RkUzN0YxMUUzOUM1QkNCM0Q0NTk3RkM0QyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM3ODFGRTRDRTM3RjExRTM5QzVCQ0IzRDQ1OTdGQzRDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM3ODFGRTRERTM3RjExRTM5QzVCQ0IzRDQ1OTdGQzRDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+W9mJfAAAABdJREFUeNpiZmBgMAdiNiBmBOK/AAEGAARHAT/x4eeRAAAAAElFTkSuQmCC);
background-repeat: repeat-y;
width: 4px;
right: -5px;
border:none;
}
.lm_header .lm_tab.active i.lm_left{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NEM4NUE1MkUzN0YxMUUzQkRBN0Q0NjNBMERFMEE1MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NEM4NUE1M0UzN0YxMUUzQkRBN0Q0NjNBMERFMEE1MiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ0Qzg1QTUwRTM3RjExRTNCREE3RDQ2M0EwREUwQTUyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQ0Qzg1QTUxRTM3RjExRTNCREE3RDQ2M0EwREUwQTUyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+MP+X8wAAABdJREFUeNpiZGBgYAViHiAWAGIxgAADAAE1ADnh9skWAAAAAElFTkSuQmCC);
background-repeat: y;
z-index: 1;
width: 4px;
left: -5px;
}
.lm_header .lm_tab.active,
.lm_header .lm_tab:hover{
color: #18181a;
}
.lm_header .lm_tab:hover{
background: #ccc;
}
.lm_header .lm_tab.active{
padding-bottom: 5px;
border-bottom: none;
}
.lm_controls .lm_close,
.lm_header .lm_tab .lm_close_tab{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1QzY0NTY1RUUzN0UxMUUzODRBRkNFOTY5RDY2MkY5NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1QzY0NTY1RkUzN0UxMUUzODRBRkNFOTY5RDY2MkY5NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVDNjQ1NjVDRTM3RTExRTM4NEFGQ0U5NjlENjYyRjk1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVDNjQ1NjVERTM3RTExRTM4NEFGQ0U5NjlENjYyRjk1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+UyI79gAAAMhJREFUeNp8kFEKwjAMhjNb0dsoTPQSG0zBW+hp3CkU3GA32MPQ4V68jbpS/4xmlDkM/EuzfkmaBFG0nRPRDVrSr2mogRZFce2Cu7uo8WMtVBzvpnAPPiulnnDlBB8BZgDqEdDk+aXE8RDgGR3IlYdvcGDFIMdcmdD+5XUQsPXBHh4zY4z1Qba/z4C16Br6lXtQa/3GJQ+zktVh2MaHezDLzrzvIxI+fkKS7Hl1KcMbgCSgVHEJIQYNZHVkrWWdnB9KQanEXwEGANv9aHPUAROlAAAAAElFTkSuQmCC);
}
.lm_header .lm_tab .lm_close_tab{
width: 11px;
height: 11px;
right: 6px;
top: 4px;
background-repeat: no-repeat;
}
.lm_header .lm_tab.active .lm_close_tab,
.lm_controls .lm_close:hover{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozODREQ0I5NEUzN0UxMUUzQkZBNkI2NTkzRDNFMzdCOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozODREQ0I5NUUzN0UxMUUzQkZBNkI2NTkzRDNFMzdCOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM4NERDQjkyRTM3RTExRTNCRkE2QjY1OTNEM0UzN0I4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM4NERDQjkzRTM3RTExRTNCRkE2QjY1OTNEM0UzN0I4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+hJYf/wAAAHpJREFUeNp8UYkNwCAIRKbQdogu5jhu1AkconEMy6WhUYq9BHkOEZB67xTjVkUItpWR45T2Sg9UvzBcYTkOh5zs1q5TVA54QpyJHKGJsAN68arZRIDpH3l0eFXVi7E3jIg7NAasqx4/G8E2cEEGLatPUU6DbqLlbgEGAApchOBS/XO/AAAAAElFTkSuQmCC);
}
.lm_controls .lm_close{
background-position: center center;
background-repeat: no-repeat;
position: relative;
}