golden-layout/src/css/goldenlayout-translucent-theme.css

A multi-screen javascript Layout manager https://golden-layout.com

.lm_goldenlayout{
	background: #dodgerblue;
	background: linear-gradient(to right bottom, dodgerblue, palevioletred);
}

.lm_content{
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
	color: whitesmoke;
}

.lm_dragProxy .lm_content{
	box-shadow: 2px 2px 4px rgba( 0, 0, 0, 0.9 );
}

.lm_splitter{
	background: #fff;
	opacity: 0.001;
	transition: opacity 200ms ease;
}

.lm_splitter:hover, .lm_splitter.lm_dragging{
	opacity: 0.4;
	background: #fff;
}

.lm_header .lm_tab{
	background: rgba( 255, 255, 255, 0.1 );
	color: #FFF;
	font-size: 13px;
	padding-bottom: 4px;
	font-family: Arial, sans-serif;
	margin-right: 2px;
}

.lm_tab.lm_active, 
.lm_tab:hover{
	color: #FFF;
	background: rgba( 255, 255, 255, 0.3 );
}


.lm_header .lm_tab.lm_active{
	padding-bottom: 5px;
	border-bottom: none;
}

.lm_header .lm_tab .lm_close_tab{
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0.4;
	filter: alpha(opacity=40);
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFQ0EwQjYyQ0YzOUExMUUzODEzRUM2RjIwMjQwNUVGMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFQ0EwQjYyREYzOUExMUUzODEzRUM2RjIwMjQwNUVGMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVDQTBCNjJBRjM5QTExRTM4MTNFQzZGMjAyNDA1RUYzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVDQTBCNjJCRjM5QTExRTM4MTNFQzZGMjAyNDA1RUYzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+71iVHAAAAE5JREFUeNpsTQkKwDAIS6Uf8P9/1CdkKtp1MCFqDgjMjAGQ/CB1AbACdHfMxM/Ud/MJ1G0OUVXcgTHKzNUBXoHSVpZPB94pLj/GqXgEGAC1mzL201rjRgAAAABJRU5ErkJggg==);
}

.lm_header .lm_tab .lm_close_tab{
	width: 11px;
	height: 11px;
	right: 6px;
	top: 4px;
	background-repeat: no-repeat;
}

.lm_header .lm_tab .lm_close_tab:hover,
.lm_header .lm_tab.lm_active .lm_close_tab{
	opacity: 1;
	filter: alpha(opacity=100);
}

.lm_controls > li{
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	opacity: 0.4;
	filter: alpha(opacity=40);
	-webkit-transition: opacity 300ms ease;
	-o-transition: opacity 300ms ease;
	-ms-transition: opacity 300ms ease;
	-moz-transition: opacity 300ms ease;
	transition: opacity 300ms ease;
}

.lm_controls > li:hover{
	opacity: 1;
	filter: alpha(opacity=100);
}

.lm_dropTargetIndicator{
	box-shadow: inset 0 0 20px rgba( 255, 255, 255, 0.5 );
	border: 1px dashed #FFF;
}

.lm_item{
	box-shadow: 2px 2px 2px rgba( 0,0,0,0.1);
}

.lm_controls .lm_popout{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjOWFlODE3Zi0zMjcxLWJkNDItOTY0Mi03MDJiZjVkNGJmOWEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDlDNzcyMkJGQjYyMTFFM0IzQUE4RkIyQzNDRDI0MDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDlDNzcyMkFGQjYyMTFFM0IzQUE4RkIyQzNDRDI0MDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmM5YWU4MTdmLTMyNzEtYmQ0Mi05NjQyLTcwMmJmNWQ0YmY5YSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpjOWFlODE3Zi0zMjcxLWJkNDItOTY0Mi03MDJiZjVkNGJmOWEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5u9IgFAAAAPElEQVR42mL8//8/AxTAGeiABY3PiEXNfyYGIgALmjX/sZnMgs8aGIOQdf+xOZwBm3VEOxxvGIEAQIABAAoJChZkbRwFAAAAAElFTkSuQmCC);
}


.lm_controls .lm_maximise{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjOWFlODE3Zi0zMjcxLWJkNDItOTY0Mi03MDJiZjVkNGJmOWEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDlDQ0YxNUVGQjYyMTFFM0IzQUE4RkIyQzNDRDI0MDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDlDNzcyMzJGQjYyMTFFM0IzQUE4RkIyQzNDRDI0MDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmM5YWU4MTdmLTMyNzEtYmQ0Mi05NjQyLTcwMmJmNWQ0YmY5YSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpjOWFlODE3Zi0zMjcxLWJkNDItOTY0Mi03MDJiZjVkNGJmOWEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5DFX8LAAAAJklEQVR42mL8DwQMBAATAxGABUoz4lHznyiTBqMimO/whhVAgAEAMIEGEQk8OGQAAAAASUVORK5CYII=);
}

.lm_controls .lm_close{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjOWFlODE3Zi0zMjcxLWJkNDItOTY0Mi03MDJiZjVkNGJmOWEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDlDQ0YxNjZGQjYyMTFFM0IzQUE4RkIyQzNDRDI0MDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDlDQ0YxNjVGQjYyMTFFM0IzQUE4RkIyQzNDRDI0MDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmM5YWU4MTdmLTMyNzEtYmQ0Mi05NjQyLTcwMmJmNWQ0YmY5YSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpjOWFlODE3Zi0zMjcxLWJkNDItOTY0Mi03MDJiZjVkNGJmOWEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6rmsrNAAAAQ0lEQVR42nTOUQ4AMAQDUHr/O3dbIgtN+cMTTd6KiIy9iALcwNujGgf/B7RhhyMC5DoVOET3Gi6DQrgMCrGAAY8AAwDe6xQOLXhdxAAAAABJRU5ErkJggg==);
}