* {
margin:0;
padding:0;
}
li {
list-style-type:none;
}
label {
cursor:pointer;
}
img {
display:inline-block;
}
#wrap {
width:80%;
height:400px;
margin:20px auto;
box-shadow:#272727 0px 0px 5px;
position:relative;
overflow:hidden;
}
.menu {
width:100%;
height:auto;
border-bottom:1px solid #272727;
float:left;
}
.menu > li {
line-height:49px;
height:49px;
float:left;
padding:0 10px;
cursor:pointer;
text-align:center;
position:relative;
}
.menu > li:after {
content:"|";
width:5px;
position:absolute;
right:0;
top:0;
}
.menu > li label {
width:100%;
height:100%;
display:inline-block;
}
.wrap {
width:100%;
height:calc(100% - 50px);
overflow:auto;
position:relative;
}
.edit_wrap {
width:96%;
padding:2%;
height:auto;
overflow:auto;
line-height:1.5;
outline:none;
}
.btnBox {
display:none;
position:absolute;
left:0;
top:49px;
width:100%;
}
.btnBox > li {
width:100%;
height:35px;
line-height:35px;
text-align:center;
background:#fff;
}
input {
border:none;
width:100%;
height:100%;
cursor:pointer;
outline:none;
font-size:16px;
background:inherit;
}
.menu li:hover ul {
display:block;
z-index:20;
}
.btnBox > li:hover,.menu > li:hover {
background:#CCCCCC;
}
.item {
list-style-type:square!important;
margin-left:10px;
}
#dialog {
width:50%;
height:150px;
position:absolute;
top:50%;
left:50%;
margin:-15% 0 0 -25%;
background:#fff;
border-radius:10px 10px 0 0;
overflow:hidden;
box-shadow:0 0 5px #808080;
display:none;
}
#dialog h1 {
width:100%;
height:45px;
background:#03A9F4;
color:#fff;
text-align:center;
line-height:45px;
font-size:20px;
}
#dialog input {
width:90%;
height:30px;
margin:10px auto;
display:block;
background:ghostwhite;
cursor:auto;
}
#dialog span {
display:block;
margin:25px auto;
width:60%;
}
#dialog button {
display:inline-block;
outline:none;
width:40%;
height:30px;
border:solid #03A9F4 1px;
background:#fff;
cursor:pointer;
}
#dialog button:last-child {
float:right;
}
#handleWrap {
position:absolute;
display:none;
}
#handleWrap ul {
width:100%;
height:100%;
position:relative;
border:2px solid #03A9F4;
}
#handleWrap ul li {
width:20px;
height:20px;
position:absolute;
border:1px solid #03A9F4;
background:#03A9F4;
border-radius:60%;
bottom:0;
right:0;
margin:0 -10px -10px 0px;
cursor:move;
}
/*#handleWrap ul li:first-child {
top:0;
left:0;
margin:-10px 0 0 -10px;
cursor:nw-resize;
}
*/
/*#handleWrap ul li:nth-child(2) {
top:0;
right:0;
margin:-10px -10px 0 0;
cursor:ne-resize;
}
*/
/*#handleWrap ul li:nth-child(3) {
bottom:0;
left:0;
margin:0 0 -10px -10px;
cursor:sw-resize;
}
*/
/*#handleWrap ul li:nth-child(4) {
bottom:0;
right:0;
margin:0 -10px -10px 0;
cursor:se-resize;
}
*/
@media only screen and (min-width:510px) and (max-width:939px) {
.wrap {
height:calc(100% - 100px);
}
}@media only screen and (min-width:321px) and (max-width:509px) {
.wrap {
height:calc(100% - 150px);
}
}@media only screen and (min-width:100px) and (max-width:320px) {
.wrap {
height:calc(100% - 200px);
}
}