ycc.js/examples/game-super-mario/level-editor/css.css

Mini and powerful canvas engine for creating App or Game.

body{
    font-size: 0;
    position: relative;
}
#log{
    position: fixed;
    left: 0;
    top:0;
    z-index:999;
    width:100%;
    height:300px;
    overflow-y: scroll;
    font-size:12px;
    color:red;
    display: none;
}

button{
    background-color: #5bc0de;
    outline: none;
    border:none;
    padding:5px;
    border-radius: 3px;
}
button:hover{
    background-color:#2a6496;
}
input[type=text],input[type=number],select{
    height: 24px;
    line-height: 24px;
    outline: none;
}



body *{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}


#canvas{
    margin-top: 20px;
    text-align: center;
}

#canvas canvas{
    width:200px;
    border:1px solid #888;
}


#wrap{
    font-size:12px !important;
}
#start{
    margin-top: 20px;
    text-align: center;
    padding-bottom:20px;
}
#start .item{
    width:100px;
    display: inline;
    margin-top: 20px;
}
#level-name,#layerX{
    width:60px;
}

.tool-wrap{
    margin-left: 50%;
}
#tools{
    float: left;
    font-size:12px;
    margin-top:20px;
    margin-left: -360px;
}
#live-ui{
    max-height:200px;
    overflow-y: scroll;
}
#live-ui span{
    color:#2a6496;
    float: right;
    cursor: pointer;
    user-select: none;
}
#live-ui span:hover{
    color:#66afe9;
}

#tools .panel{
    float: left;
    min-height: 230px;
    margin-left: 20px;
}

.panel{
    width:200px;
    background-color: #ccc;
    padding:20px;
}
.panel-title{
    font-size: 14px;
    font-weight: bold;
}







#props{
    display: none;
    position:relative;
}
#props .tool-prop{
    display: none;
    line-height: 30px;
}

#props input{
    width:60px;
    float: right;
}
#props .prop-ctrl-btn{
    position:absolute;
    bottom:20px;
    left:0;
    width:90%;
    text-align: right;
}


#tool-list{
}
#tool-list button{
    display: block;
    text-align: center;
    width:100%;
    margin-top: 1px;
}
#tool-list button[active]{
    background-color: #aaa;
}

#js{
    font-size: 12px;
    clear: both;
    word-break: break-all;
}

.clearfix:after{display:table;content:" ";clear:both;height: 0;visibility: hidden;}


/*********************** 移动端布局 **************************/
@media screen and (max-width:800px) {
    .panel{
        width:120px;
        padding:5px;
    }
    #props input{
        width:28px;
    }
    .tool-wrap{
        margin-left: 0;
    }
    #tools{
        float: left;
        font-size:12px;
        margin-top:5px;
        margin-left: 0;
    }
    #tools .panel{
        margin-left: 5px;
    }
    #live-ui-panel{
        width:90px;
    }
    #tool-list{
        width:60px;
    }
    #level-name, #layerX{
        width:40px;
    }
    #canvas canvas{
        width:150px;
    }
    body{
        padding-bottom:30px;
    }
    #start {
        margin-top: 5px;
        text-align: center;
        padding-bottom: 5px;
    }
    #canvas{
        margin-top: 5px;
    }
}