|
@@ -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%)}
|
|
|
|
+ }
|
|
|
|
+}
|