json-object-editor/css/page-editor-styles.css

JOE the Json Object Editor | Platform Edition

html.jpe-editing jpe-block,
html.jpe-editing jpe-layout,
html.jpe-editing jpe-page{    
    display: block;
    display: -webkit-box;
    position: relative;
    margin: -1px;
    padding: 1px;
    box-sizing: border-box;
    
}

jpe-info{
    display:none;
    
    transition:opacity .25s, background-color .5s ease .2s;
    box-sizing: border-box;
    opacity:0;
    background:none;
    
    border:1px solid #ff8804;
}

jpe-block jpe-info:hover,
jpe-info[data-schema="page"],
jpe-info[data-schema="layout"]
{
    background:rgba(0,0,0,.1);
    opacity:1;
}

html.jpe-editing jpe-block:hover > jpe-info{
    display:block;
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    top:0;
    padding:10px;
}
html.jpe-editing body >  jpe-info{
    display:block;
    position:fixed;
    bottom:0;
    padding:10px;
}
jpe-info[data-schema="page"]{
    width:50%;
    right:0;
}
jpe-info[data-schema="layout"]{
    width:50%;
    left:0;
}
jpe-info-content {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 4px;
    font-size: 14px;
    color: #fff;
    font-family: sans-serif;
    letter-spacing: .1em;
    background: rgba(255, 136, 4, .9);
    border-top: 1px solid #ddd;
    box-sizing:border-box;
    transition:padding .25s ease .2s,max-height .25s ease .2s;
}

jpe-info[data-schema="block"] jpe-info-content{
    max-height:0;
    padding:0px 4px;
    overflow:hidden;
}
jpe-info[data-schema="block"]:hover jpe-info-content{
    max-height:100px;
    padding:4px;
}
joe-editor-menu{
    position:fixed;
    bottom:60px;
    right:30px;
    background:#ff8804;
    width:50px;
    height:50px;
    border-radius:50%;
    border:1px solid #fff;
    box-shadow: 0 0px 2px 1px rgba(0,0,0,.3);
    cursor:pointer;
    transition:.2s;
}
joe-editor-menu:hover{
background:#fff;
}
jpe-edit-btn,.jpe-edit-btn{
    display:block;
    float: right;
    min-height: 40px;
    width: 40px;
    margin: -4px -4px -4px 15px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    background: #eee;
    color: #666;
    transition:.2s;
}
jpe-edit-btn:hover,.jpe-edit-btn:hover{
    box-shadow:0 0 3px 1px rgba(0,0,0,.2);
    color:#ff8804;
    background: #fff;
}

/* ---------- JPE INFO CONTENT ---------- */
jpe-info-cuid {
    font-size: 10px;
    float: right;
}

jpe-info-schema {
    font-size: .9em;
}

jpe-info-name {
    display: block;
    font-weight: bold;
}


/*svg ICONS */
jpe-info-icon {
    width: 50px;
    height: 50px;
    float: left;
    position: relative;
    margin: -10px -3px -10px -10px;
}

jpe-info-icon svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}

/* ---------- SECTION ---------- */
jpe-section {position: relative;display: block; box-sizing: border-box; border: 1px solid transparent;}
html.jpe-editing body  jpe-section:hover {border: 1px solid #007ac2;}

jpe-section-label{
    position: absolute;
    right: 0;
    top: 0;
    background: #007ac2;
    color: #fff;
    padding: 1px 4px;
    opacity:0;
}
html.jpe-editing body  jpe-section:hover jpe-section-label{
    opacity:1;
}

/* ---------- CONTENT ---------- */
jpe-content {position: relative;display: block; box-sizing: border-box; border: 1px solid transparent;}
html.jpe-editing body jpe-content:hover {border: 1px solid #7AC200;}

jpe-content-label{
    position: absolute;
    right: 0;
    top: 0;
    background: #7AC200;
    color: #fff;
    padding: 1px 4px;
    opacity:0;
}
html.jpe-editing body jpe-content:hover jpe-content-label{
    opacity:1;
}