golden-layout
Version:
A multi-screen javascript Layout manager https://golden-layout.com
134 lines (109 loc) • 11.7 kB
CSS
.lm_goldenlayout{
background: #000;
background-repeat: repeat;
background: -webkit-linear-gradient(#000, #222);
}
.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 #000;
outline: 1px dashed #ccc;
transition: all 200ms ease;
}
.lm_dropTargetIndicator .lm_inner{
background: #000;
opacity: 0.2;
filter: alpha(opacity=40); /** bit darker to compensate for lack of box shadow **/
}
.lm_splitter{
background: #000;
opacity: 0.001;
transition: opacity 200ms ease;
}
.lm_splitter:hover, .lm_splitter.lm_dragging{
opacity: 1;
background: #444;
}
.lm_header{
height: 28px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNEMyNTYwNTM0MDAxMUU0OENDMTlEMkNBRTJGQTE5OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowNEMyNTYwNjM0MDAxMUU0OENDMTlEMkNBRTJGQTE5OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA0QzI1NjAzMzQwMDExRTQ4Q0MxOUQyQ0FFMkZBMTk4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA0QzI1NjA0MzQwMDExRTQ4Q0MxOUQyQ0FFMkZBMTk4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+um2R4AAAADRJREFUeNpi0NbWZgIBRkZGOGZgYIDTyGx8Ysj0v3//wOyfP38yaWlpsbx58wYsBuQDBBgACokP6kE3oX4AAAAASUVORK5CYII=);
}
.lm_header.lm_selectable{
cursor: pointer;
}
.lm_selected .lm_header{
background-color: #452500;
}
.lm_maximised .lm_header{
background-color: #000;
}
.lm_header .lm_tab{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENTQ0RjgyMDMzRkYxMUU0OTNBRTgyRDg3NTdBQzBGNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENTQ0RjgyMTMzRkYxMUU0OTNBRTgyRDg3NTdBQzBGNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ1NDRGODFFMzNGRjExRTQ5M0FFODJEODc1N0FDMEY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ1NDRGODFGMzNGRjExRTQ5M0FFODJEODc1N0FDMEY2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0oQNrwAAADdJREFUeNpitrCwYGJjYwNjBgYGnPj///8YbGQaC5tZQECASUtLi+XNmzdM//79Y/r58ydAgAEATLgfS3hbXWQAAAAASUVORK5CYII=);
color: #999;
font-size: 13px;
padding-bottom: 4px;
font-family: Arial, sans-serif;
height: 22px;
margin: 0;
}
.lm_tab.lm_active,
.lm_tab:hover{
color: #eee;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpERDgyOEQwRDMzRkQxMUU0ODk2NzlGNjA3RDYyNUUwQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpERDgyOEQwRTMzRkQxMUU0ODk2NzlGNjA3RDYyNUUwQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkREODI4RDBCMzNGRDExRTQ4OTY3OUY2MDdENjI1RTBCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkREODI4RDBDMzNGRDExRTQ4OTY3OUY2MDdENjI1RTBCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Qa1dywAAACxJREFUeNpi8vLyYuLm5mZiYGBg+v//P5xGZ2PjE1KDzP737x/Tz58/AQIMACXnOeodZuHuAAAAAElFTkSuQmCC);
}
.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_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==);
}
.lm_transition_indicator{
background-color: #000;
border: 1px dashed #555;
}