UNPKG

ewuit

Version:

an easy web ui inspect tool

2 lines (1 loc) 6.22 kB
@charset "UTF-8";.ewuit-ui-tool-panel{position:fixed;right:30px;bottom:60px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.2);text-align:center;line-height:40px;z-index:9999;cursor:pointer;transition:all .2s ease-out}.ewuit-ui-tool-panel:before{content:"\1f680"}.ewuit-ui-tool-panel.active{background:rgba(251,243,25,.2)}.ewuit-ui-tool-panel.active:before{content:"\1f389"}.ewuit-ui-tool-panel div{transition:all .2s ease-out}.ewuit-ui-tool-panel.active .attr-btn,.ewuit-ui-tool-panel.active .distance-btn{cursor:pointer;width:40px;height:40px;border-radius:50%;background:rgba(158,158,158,.3);position:absolute;bottom:0px}.ewuit-ui-tool-panel.active .attr-btn.active,.ewuit-ui-tool-panel.active .distance-btn.active{background-color:#1a161a}.ewuit-ui-tool-panel.active .attr-btn.active:before,.ewuit-ui-tool-panel.active .distance-btn.active:before{color:#fff}.ewuit-ui-tool-panel.active .attr-btn{transform:translate(-40px,-30px)}.ewuit-ui-tool-panel.active .attr-btn:before{content:"\5c5e\6027";font-size:12px;color:#000}.ewuit-ui-tool-panel.active .distance-btn{transform:translate(-40px,30px)}.ewuit-ui-tool-panel.active .distance-btn:before{content:"\95f4\8ddd";font-size:12px;color:#000}.ewuit-toast-wrapper{text-align:center;position:fixed;z-index:10000;left:0;top:0;right:0;bottom:0;pointer-events:none}.ewuit-toast-wrapper p{display:block;padding:20px 12px;max-width:252px;background-color:#1a161a;border-radius:10px;color:#fff;margin:0 auto;margin-top:46vh;font-weight:400;font-family:var(--ewuit-font-family);font-size:var(--toast-font-size);text-align:center;transform:scale(var(--toast-scale))}.ewuit-comp-cover{background-color:#c440ff1a;border:var(--cover-border-width) solid var(--cover-first-color);border-radius:var( --cover-attribute-border-radius );position:fixed;z-index:9999;pointer-events:none;display:none;box-sizing:border-box}.ewuit-comp-cover:after,.ewuit-comp-cover:before{position:absolute;display:block;font-weight:400;font-family:var(--ewuit-font-family);font-size:var(--cover-font-size);color:var(--cover-first-color);line-height:var(--cover-font-size);border-radius:2px;z-index:1;background-color:#ffffffb3;padding:5px;box-sizing:border-box;word-break:keep-all;pointer-events:none}.ewuit-comp-cover:before{left:50%;top:var(--ewuit-comp-cover-top);bottom:var( --ewuit-comp-cover-bottom );-webkit-transform:translateX(-50%);transform:translate(-50%);content:attr(data-w);box-sizing:border-box}.ewuit-comp-cover:after{left:var(--ewuit-comp-cover-left);right:var(--ewuit-comp-cover-right);top:50%;transform:translate(calc(100% + 3px)) translateY(-50%);content:attr(data-h)}.ewuit-comp-modal{min-width:var(--modal-max-width);max-width:var(--modal-min-width);position:fixed;z-index:9998;left:100px;pointer-events:none}.ewuit-comp-wrapper{opacity:.95;background:#1a161a;border-radius:var( --modal-border-radius );padding-left:var( --modal-padding-left );padding-right:var( --modal-padding-left );padding-top:var(--modal-padding-top);padding-bottom:var( --modal-padding-top );float:left}.ewuit-comp-modal p{font-weight:400;font-family:var(--ewuit-font-family);font-size:var(--modal-font-size);color:#fff;padding-bottom:var( --modal-padding-top );margin:0}.ewuit-comp-modal p:last-child{padding-bottom:0}.ewuit-comp-modal p span{margin-right:15px}div[class^=ewuit-comp-cover-]{position:fixed;z-index:9999;pointer-events:none;display:none;box-sizing:border-box}div.ewuit-comp-cover-first{background-color:#c440ff1a;border:var(--cover-border-width) solid var(--cover-first-color);border-radius:var( --cover-distance-first-border-radius );pointer-events:none}.ewuit-comp-cover-first:after,.ewuit-comp-cover-first:before{pointer-events:none;position:absolute;display:var(--cover-size-display);font-weight:400;font-family:var(--ewuit-font-family);font-size:var(--cover-font-size);color:var(--cover-first-color);line-height:var(--cover-font-size);border-radius:2px;z-index:1;background-color:#ffffffb3;padding:5px;box-sizing:border-box;word-break:keep-all}.ewuit-comp-cover-first:before{left:50%;top:var(--ewuit-comp-cover-top);bottom:var( --ewuit-comp-cover-bottom );transform:translate(-50%);content:attr(data-w);box-sizing:border-box}.ewuit-comp-cover-first:after{left:var(--ewuit-comp-cover-left);right:var(--ewuit-comp-cover-right);top:50%;transform:translate(calc(100% + 3px)) translateY(-50%);content:attr(data-h)}div.ewuit-comp-cover-second{background-color:#2590ff1a;border:var(--cover-border-width) solid var(--cover-second-color);border-radius:var( --cover-distance-second-border-radius );pointer-events:none}div.ewuit-comp-rulers{display:none}div.ruler{position:fixed;width:100%;height:100%;border:var(--cover-border-width) dashed var(--cover-second-color);z-index:9998;box-sizing:border-box;word-break:keep-all;pointer-events:none}div.ruler.h{border-left:0;border-right:0;left:0}div.ruler.v{border-top:0;border-bottom:0;top:0}div.distance{position:fixed;background:var(--cover-first-color);z-index:9998}div.distance.v{width:var(--cover-border-width)}div.distance.h{height:var(--cover-border-width)}div.distance.h:after,div.distance.v:before{pointer-events:none;word-break:keep-all;content:attr(data-v);position:absolute;font-weight:400;font-family:var(--ewuit-font-family);font-size:var(--distance-font-size);line-height:var( --distance-font-size );color:var(--cover-first-color);background-color:#ffffffb3;padding:5px;display:var( --cover-distance-display )}div.distance.h:after{left:50%;transform:translate(-50%);top:4px}div.distance.v:before{top:50%;left:4px;transform:translateY(-50%)}:root{--ewuit-font-family: PingFangSC-Regular;--toast-font-size: 14px;--toast-scale: 1;--cover-font-size: 8px;--cover-border-width: .75px;--cover-first-color: #b000ff;--cover-second-color: #2590ff;--cover-size-display: none;--cover-distance-display: none;--cover-attribute-border-radius: 0;--cover-distance-first-border-radius: 0;--cover-distance-second-border-radius: 0;--distance-font-size: 8px;--modal-font-size: 12px;--modal-min-width: 180px;--modal-max-width: 220px;--modal-border-radius: 10px;--modal-padding-left: 15px;--modal-padding-top: 12px;--modal-scale: 1;--ewuit-comp-cover-top: 0;--ewuit-comp-cover-bottom: 0;--ewuit-comp-cover-left: 0;--ewuit-comp-cover-right: 0}