123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- *,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%)}
- }
- }
|