94 lines
6.8 KiB
CSS
94 lines
6.8 KiB
CSS
@charset "utf-8";
|
|
|
|
/* ---------- to show ---------- */
|
|
.testing-show{display:none;position:absolute;top:0;right:0;padding:15px;cursor:pointer;}
|
|
.testing-show.show{display:block;}
|
|
.testing-show span{color:@colour-dark;}
|
|
.testing-show[disabled=disabled]{cursor:not-allowed;}
|
|
.testing-show[disabled=disabled] span{color:#999;}
|
|
.testing-show[disabled=disabled] i{display:none;}
|
|
.testing-show[disabled=disabled].on i{display:block;position:absolute;top:35px;right:8px;width:200px;padding:5px 7px;color:#fff;font-size:12px;line-height:18px;background:rgba(0,0,0,.75);border-radius:5px;}
|
|
.testing-show[disabled=disabled].on i:after{display:block;position:absolute;top:-4px;right:32px;width:0;height:0;border-top:8px solid rgba(0,0,0,.75);border-left:8px solid transparent;content:' ';transform:rotate(-45deg);}
|
|
|
|
/* ---------- testing ---------- */
|
|
.testing-box{display:none;position:absolute;top:0;right:0;width:100%;padding:45px;min-height:100%;background-color:#fff;}
|
|
.testing-box h2{position:relative;min-width:320px;padding:2px 10px;margin:5px 0;color:#fff;background-color:@colour-light;}
|
|
.testing-box h2:after{position:absolute;top:0;right:-45px;width:45px;height:100%;content:" ";background-color:@colour-light;}
|
|
.testing-box h2 small{position:absolute;top:0;right:0;font-size:14px;line-height:38px;font-weight:normal;}
|
|
.testing-box h2 svg{display:none;position:absolute;top:9px;right:0;width:17px;height:17px;animation:circle 1s linear infinite;}
|
|
.testing-send{width:100%;max-width:800px;min-width:320px;padding:20px 0 35px 25px;}
|
|
.testing-send input{height:30px;padding:0 3px;font-family:Microsoft YaHei,STXihei,STHeiti,Verdana,Arial,Helvetica,sans-serif;;line-height:30px;}
|
|
.testing-send input:hover{background:#f4f5f9;}
|
|
.testing-send-url{width:75%;color:#000;border:none;border-bottom:1px solid #ccc;}
|
|
.testing-send-type{margin-left:10px;height:30px;line-height:30px;}
|
|
.testing-send h3{padding:25px 0 0;font-weight:normal;line-height:30px;font-size:14px;}
|
|
.testing-param{width:100%;margin-bottom:10px;}
|
|
.testing-params li{list-style:none;padding:10px 0 13px;}
|
|
.testing-params li span{display:block;line-height:16px;color:#999;}
|
|
.testing-params li input{color:#000;background:none;border:none;border-bottom:1px solid #ccc;}
|
|
.testing-param-key{width:35%;max-width:214px;}
|
|
.testing-param-val{width:50%;}
|
|
.testing-params li input + big{visibility:hidden;margin:0 10px;color:red;vertical-align:bottom;font-size:20px;line-height:22px;}
|
|
.testing-params li input[required] + big{visibility:visible;}
|
|
.testing-params li em{display:none;width:20%;margin-top:0;padding:0 3px;font-style:normal;line-height:28px;color:red;}
|
|
.testing-btn{height:30px;padding:20px 0 40px;}
|
|
.testing-btn button{height:30px;padding:0 10px;margin:0 2px;line-height:30px;}
|
|
.testing-btn .testing-btn-send{margin-left:0px;padding:0 20px;}
|
|
.testing-btn2 hr{border-bottom:1px dashed #aaa;}
|
|
.testing-btn2 .testing-btn-param{display:inline-block;height:30px;padding:0 10px 0 0;line-height:30px;cursor:pointer;}
|
|
.testing-btn2 .testing-btn-param span{color:@colour-dark;}
|
|
.testing-response{min-width:320px;padding:20px 0 10px 25px;}
|
|
|
|
/* ---------- global ---------- */
|
|
.testing-global{display:none;position:absolute;top:0;right:0;z-index:100;width:100%;height:100%;background:rgba(0,0,0,.2);}
|
|
.testing-global-param{position:absolute;top:200px;left:50%;width:500px;max-width:90%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background:#fff;box-shadow:rgba(0,0,0,.3) 0px 1px 3px;}
|
|
.testing-global-param .close{position:absolute;top:-20px;right:-20px;width:40px;height:40px;overflow:hidden;line-height:40px;text-align:center;color:#333;font-size:30px;background:#fff;border-radius:50%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
|
|
.testing-global-param .close:hover{color:#ff3333;background:#f8f8f8;}
|
|
.testing-global-param h4{line-height:30px;padding:25px 25px 0;text-indent:2px;}
|
|
.testing-global-param h4 small{margin-left:10px;font-weight:normal;color:#aaa;}
|
|
.testing-global-param ul{padding:15px 25px;list-style:none;}
|
|
.testing-global-param li{position:relative;margin-bottom:10px;padding:10px;border:#eee 1px solid;}
|
|
.testing-global-param input{height:30px;margin-bottom:3px;line-height:30px;border:none;border-bottom:#ccc 1px solid;background:none;}
|
|
.testing-global-param li i{display:block;position:absolute;top:0;right:0;width:30px;height:30px;line-height:30px;font-size:22px;color:#999;text-align:center;background:#f2f2f2;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
|
|
.testing-global-param li i:hover{color:#ff3333;}
|
|
.testing-global-param li big{margin:0 10px;color:red;vertical-align:bottom;font-size:20px;line-height:22px;}
|
|
.testing-global-param .btn{padding:0 25px 25px;text-align:right;}
|
|
.testing-global-param .btn button{height:30px;padding:0 10px;line-height:28px;}
|
|
.testing-global-param .btn .save{padding:0 20px;}
|
|
.testing-global-working{float:left;position:relative;left:2px;width:100px;height:30px;background:#f7f7f7;border:#b8b8b8 1px solid;border-radius:1px;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-ms-transition-duration:.3s;transition-duration:.3s;cursor:pointer;}
|
|
.testing-global-working.off{background:#d1d1d1;}
|
|
.testing-global-working i{position:absolute;top:0;right:0;height:100%;width:50%;background:#fff;border-radius:1px;box-shadow:1px 0px 4px rgba(0,0,0,.3);-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-ms-transition-duration:.3s;transition-duration:.3s;}
|
|
.testing-global-working.off i{right:50%;box-shadow:-1px 0px 4px rgba(0,0,0,.3);}
|
|
.testing-global-working span{float:left;width:50%;line-height:30px;text-align:center;color:@colour-dark;text-shadow:1px 1px rgba(255,255,255,.75);box-shadow:inset 0px 0px 4px rgba(12,60,90,.3);}
|
|
.testing-global-working span:nth-of-type(2){float:right;color:#666;text-shadow:1px 1px rgba(255,255,255,.5);box-shadow:inset 0px 0px 4px rgba(0,0,0,.3);}
|
|
|
|
/* ---------- testing response ---------- */
|
|
@media screen and (max-width:720px){
|
|
.testing-show{position:fixed;top:3px;right:40px;z-index:11000;height:46px;padding:0 10px;line-height:47px;background:#fff;}
|
|
.testing-box{padding:25px;}
|
|
.testing-box h2:after{right:-25px;width:25px;}
|
|
.testing-send{padding:20px 10px 35px;}
|
|
.testing-send-url{width:70%;}
|
|
.testing-param-val{width:45%;}
|
|
.testing-btn button{font-size:12px;padding:0 5px;}
|
|
#testingBtnSend{padding: 0 15px;}
|
|
.testing-response{padding:20px 10px 10px;}
|
|
}
|
|
|
|
/* ---------- keyframes ---------- */
|
|
@-webkit-keyframes circle{
|
|
from{-webkit-transform:rotate(0);}
|
|
to{-webkit-transform:rotate(360deg);}
|
|
}
|
|
@-moz-keyframes circle{
|
|
from{-moz-transform:rotate(0);}
|
|
to{-moz-transform:rotate(360deg);}
|
|
}
|
|
@-ms-keyframes circle{
|
|
from{-ms-transform:rotate(0);}
|
|
to{-ms-transform:rotate(360deg);}
|
|
}
|
|
@keyframes circle{
|
|
from{transform:rotate(0);}
|
|
to{transform:rotate(360deg);}
|
|
} |