|  | @@ -0,0 +1,99 @@
 | 
	
		
			
				|  |  | +*,html,body {
 | 
	
		
			
				|  |  | +    margin: 0;
 | 
	
		
			
				|  |  | +    padding: 0;
 | 
	
		
			
				|  |  | +    font: 13px/2em Avenir,Arial,sans-serif;
 | 
	
		
			
				|  |  | +    box-sizing:border-box;
 | 
	
		
			
				|  |  | +    // background: #ffffff;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +html,body{width:100%;height:100%;min-width:400px;}
 | 
	
		
			
				|  |  | +body{padding-top:87px}
 | 
	
		
			
				|  |  | +a {
 | 
	
		
			
				|  |  | +    text-decoration: none;
 | 
	
		
			
				|  |  | +    outline: none;
 | 
	
		
			
				|  |  | +    cursor: pointer;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +table {
 | 
	
		
			
				|  |  | +    border-collapse: collapse;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +ol, ul {
 | 
	
		
			
				|  |  | +    list-style: none;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +li {
 | 
	
		
			
				|  |  | +    list-style-type: none;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +.clear {
 | 
	
		
			
				|  |  | +    overflow: auto;
 | 
	
		
			
				|  |  | +    overflow-y: hidden;
 | 
	
		
			
				|  |  | +    zoom: 1;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +.toolbar{
 | 
	
		
			
				|  |  | +    background:#00c3ef;height:82px;position:fixed;top:0;left:0;right:0;box-shadow:0 0px 10px #666;z-index:10;
 | 
	
		
			
				|  |  | +    .connect{
 | 
	
		
			
				|  |  | +        background:darken(#00c3ef,10%);padding:8px 15px;
 | 
	
		
			
				|  |  | +        input{
 | 
	
		
			
				|  |  | +            border:none;text-align:center;float:left;display:inline;width:35%;
 | 
	
		
			
				|  |  | +            &.disabled{background:darken(#00c3ef,20%)}
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        button{
 | 
	
		
			
				|  |  | +            width:30%;float:left;border:none;background:#4ab911;color:#fff;cursor:pointer;
 | 
	
		
			
				|  |  | +            &.disabled{background:#b91111}
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    .filter{
 | 
	
		
			
				|  |  | +        padding:8px 15px;
 | 
	
		
			
				|  |  | +        span{
 | 
	
		
			
				|  |  | +            display:inline-block;background:#50b31d;float:left;cursor:pointer;text-align:right;font-size:10px;color:#fff;position:relative;padding:0 8px 0 20px;margin-right:2px;
 | 
	
		
			
				|  |  | +            &:before{content:"●";text-align:left;position:absolute;left:8px;top:0px;}
 | 
	
		
			
				|  |  | +            &.disabled{
 | 
	
		
			
				|  |  | +                background:#b91111;
 | 
	
		
			
				|  |  | +                &:before{content:"○"}
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        input{height:24px;border:none;text-align:center;float:right;display:inline;font-size:12px;width:65px;}
 | 
	
		
			
				|  |  | +        button{height:24px;border:none;float:right;display:inline;font-size:12px;width:30px;background:darken(#00c3ef,10%);color:#fff}
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +.box{
 | 
	
		
			
				|  |  | +    border-top:1px #eee solid;
 | 
	
		
			
				|  |  | +    &:last-child{border-bottom:1px #eee solid;}
 | 
	
		
			
				|  |  | +    .head{
 | 
	
		
			
				|  |  | +        height:26px;position:relative;
 | 
	
		
			
				|  |  | +        span.line{position:absolute;right:15px;top:0;line-height:26px;}
 | 
	
		
			
				|  |  | +        span.level{position:absolute;left:15px;top:5px;line-height:16px;display:block;width:80px;height:16px;border-radius:20px;font-size:12px;text-align:center;background:#eee}
 | 
	
		
			
				|  |  | +        h2{height:26px;line-height:26px;padding:0 60px 0 100px;overflow:hidden;text-align:right;word-break: break-all;}
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    .content{padding:5px 20px;line-height:24px;word-break: break-all;font-size:14px}
 | 
	
		
			
				|  |  | +    .info{
 | 
	
		
			
				|  |  | +        line-height:18px;font-size:10px;position:relative;padding:5px 0 5px 15px;background:#eee;
 | 
	
		
			
				|  |  | +        span{position:absolute;right:15px;top:5px;line-height:18px;font-size:10px;}
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    &.LOG{
 | 
	
		
			
				|  |  | +        background:#009434;color:#fff;
 | 
	
		
			
				|  |  | +        .head{background:darken(#009434,5%)}
 | 
	
		
			
				|  |  | +        .info{background:darken(#009434,2%)}
 | 
	
		
			
				|  |  | +        span.level{background:darken(#009434,10%)}
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    &.DEBUG{
 | 
	
		
			
				|  |  | +        background:#3f83e8;color:#fff;
 | 
	
		
			
				|  |  | +        .head{background:darken(#3f83e8,5%)}
 | 
	
		
			
				|  |  | +        .info{background:darken(#3f83e8,2%)}
 | 
	
		
			
				|  |  | +        span.level{background:darken(#3f83e8,10%)}
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    &.WARNING{
 | 
	
		
			
				|  |  | +        background:#f7bf21;color:#fff;
 | 
	
		
			
				|  |  | +        .head{background:darken(#f7bf21,5%)}
 | 
	
		
			
				|  |  | +        .info{background:darken(#f7bf21,2%)}
 | 
	
		
			
				|  |  | +        span.level{background:darken(#f7bf21,10%)}
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    &.ERROR{
 | 
	
		
			
				|  |  | +        background:#ca004a;color:#fff;
 | 
	
		
			
				|  |  | +        .head{background:darken(#ca004a,5%)}
 | 
	
		
			
				|  |  | +        .info{background:darken(#ca004a,2%)}
 | 
	
		
			
				|  |  | +        span.level{background:darken(#ca004a,10%)}
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +}
 |