html{_background-image:url(about:blank);_background-attachment:fixed;}body{margin:0;padding:0;font:12px/2em "Courier","兰亭黑","微软雅黑","\5B8B\4F53",Arial,sans-serif;background:#fff;}div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p,img,a{padding:0;margin:0;}a{text-decoration:none;outline:none;cursor:pointer;}img{vertical-align:top;}table{border-collapse:collapse;}img,table,fieldset{border:0;}ol,ul{list-style:none;}li{list-style-type:none;}h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal;}.clear{overflow:auto;overflow-y:hidden;zoom:1;} html,body{height:100%;width:100%} #main{ .title{ height:30px;background:#49A3D4;color:#fff;font-size:14px;text-align:center;line-height:30px;position:relative;; span{-webkit-app-region: drag;} a{position:absolute;height:14px;border-radius:10px;width:40px;top:8px;font-size:9px;line-height:12px;display:block;-webkit-app-region: nodrag;} .minimize{background:#F9B148;right:10px;} .close{background:#FF5858;left:10px} } .tabs{ display:flex;flex-flow:row;justify-content:center;align-items:stretch;height:40px; a{ flex-grow:1;text-align:center;font-size:16px;line-height:40px;color:#666;background:#eee; &.on{font-weight:bold;background:#fff;} span{font-size:12px;color:#999} } } .content{position:absolute;bottom:0;left:0;right:0;top:70px;padding:20px;background:#fff;} .tabContent{ display:none;height:100%;box-sizing:border-box;position:relative; &.on{display:block} input.search{display:block;width:100%;box-sizing:border-box;height:36px;border-radius:18px;border:1px solid #ccc;outline:none;padding:0 50px 0 20px;font-size:16px;text-align: center;background:url(../img/search.png) no-repeat;background-position:right 5px center;background-size:24px;color:#999} .list{ position:absolute;top:56px;bottom:0;right:0;left:0;overflow-y:scroll; &:first-child{padding-bottom: 60px;} li{ height:32px;border-bottom:1px dashed #ccc;line-height:32px;position: relative;font-size:16px;padding:0 15px; &:last-child{border:none} &:hover{background:#eee} .btn{position:absolute;right:0;top:0;height:32px;} a{padding:0 5px;font-size:16px;margin:0 5px;} } } .control{} } .loading{display:none;width:100%;height:100%;position: absolute;top:0;left:0;right:0;z-index:100;bottom:0;background:rgba(0,0,0,0.6);justify-content:center;align-items:center; &.on{display:flex} p{color:#fff;line-height:40px;font-size:28px} } .settings{ a.save{display:block;width:100px;height:40px;line-height:40px;background:#ff5858;color:#fff;text-align:center;margin:20px auto} } } #popup{ background:#49A3D4;color:#fff;padding:20px;box-sizing:border-box;overflow:scroll; .info{-webkit-app-region: drag;} .loading{display:none;width:100%;height:100%;position: absolute;top:0;left:0;right:0;z-index:100;bottom:0;background:rgba(0,0,0,0.6);justify-content:center;align-items:center; &.on{display:flex} p{color:#fff;line-height:40px;font-size:16px} } a.close{ position: absolute;right:5px;top:5px;background:#FF5858;font-size:10px;display:block;width:40px;height:14px;border-radius:20px;text-align:center;line-height:12px; } .word{ line-height:20px;height:49px;border-bottom:1px solid #fff;position: relative;margin-bottom:10px;padding-bottom:5px; .w{font-size:24px;line-height:24px} .pron{font-size:14px;} a{ font-size:14px;color:rgba(255,255,255,0.8);margin-left:10px; &:hover{color:#fff} } } .def{ line-height:20px;font-size:12px;border-bottom:1px solid #fff;padding-bottom:10px; } .example{ .ex{ border-bottom:1px dashed #eee;padding:10px 0; &:last-child{border:none;margin-bottom:10px} &:hover{ background:rgba(255,255,255,0.3); p:last-child{ color:rgba(255,255,255,1); &:after{content:''} } } p{line-height:12px;} p:last-child{ padding-top:10px;color:rgba(255,255,255,0);position:relative; &:after{content:'********************';position: absolute;left:0;right:0;top:10px;bottom:0;z-index:10;color:rgba(255,255,255,1);line-height:12px;} } } } .from{ line-height:24px;text-align: center;background:rgba(255,255,255,0.3);border-radius:20px;font-size:12px; a{color:#fff} } }