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

JOE the Json Object Editor | Platform Edition

body,html{
    margin:0;
    padding:0;
    background:#0099aa;
    background: #066;
}
a,.clickable{
    cursor:pointer;
    transition:.2s;
}
a:hover,.clickable:hover{
    background:rgba(0,0,0,.1);
}
report-type{
    float:right;
    padding:5px 10px;
    font-size: .8em;
}
joe-report,report-header,report-title,report-content,report-section,report-subtitle,report-content-item,.report-block{
    display:block;
    position:relative;
    box-sizing:border-box;
}
a.report-link {
    float: right;
    text-align: center;
    padding: 10px 10px;
    z-index: 10;
    text-decoration: none;
    border-radius: 50%;
    height: 50px;
    width:50px;
    margin-right:10px;
    line-height: 1em;
    border:1px solid #068;
    color:#068;
}
a.report-link:hover {
    color:#fff;
    background:#068 !important;
}
    report-section.marginless{
        margin:0 -10px;
    }
joe-report{
    background-color: #eee;
    font-family: Helvetica,Arial,sans-serif;
    /*margin: 4px;*/
    margin:0 5px;
    border:1px solid #fff;
    font-size:14px;
    letter-spacing: .1em;
    line-height: 1.5em;
    color:#424242;

}
report-header{
    background-color:#fff;
    line-height:1.25;
    padding: 5px 0;
}

report-header::after{
    display:block;
    height:0;
    width:100%;
    clear:both;
    content:'';
}
report-title{
    font-size:1.1em;
    font-weight:bold;
        padding: 0px 10px 4px 10px;
}
report-subtitle{
    font-size:.9em;
        padding: 0px 10px 2px 10px;
}

report-icon {
    float: left;
    height: 50px;
    width: 50px;
    padding-right: 5px;
    opacity: .6;
}

report-status{
    padding:5px 20px;
    font-weight:bold;
}
report-content{
    padding:0 10px;
}

report-content-item,.report-content-item{
    padding:10px;
    display:block;
    text-decoration: inherit;
    color: inherit;
}

/*REPORT LIST ITEM */
report-list-item {
    position:relative;
    padding:4px;
    min-height:40px;
    display:block;
    text-decoration: none;
    color: inherit;
    border-bottom:1px solid #ccc;
}
report-list-item.card{
    padding: 10px;
 
    color: inherit;
    background: #fff;
    box-shadow: 0 0px 2px 0px rgb(0 0 0 / 20%);
    box-sizing: border-box;
    margin: 5px 0;
}
report-list-item[toggleable]{
    cursor:pointer;
}
report-list-item.shaded {
    background:#eee;
}
report-list-item.strikethrough {
    opacity: .5;
}
report-list-item.strikethrough > joe-title{
    text-decoration: line-through;
}
report-list-item > joe-title{
    font-size:1.25em;
}

report-section {
    clear:both;
}

report-section-label {
    display: block;
    background: #fff9;
    padding: 10px;
    margin: 0px -10px 5px -10px;
    font-weight: bold;
    border-left: 10px solid #fff;
}


report-section-sublabel {
    display: block;
    padding: 4px 10px;
    margin: 5px -10px;
    /* font-weight:bold; */
    border-bottom: 1px solid rgba(0,0,0,.2);
}
report-section-sublabel.dark{
    border-bottom: none;
    background:rgba(0,0,0,.1);;
}

report-subsection{
    margin: 10px 0;
    padding: 10px;
    border:1px solid #fcfcfc;
    display: block;
}

report-subsection.white{
    background: #fcfcfc;
}

.complete-true{
    text-decoration: line-through;
    font-weight: normal;
    opacity: .5;
    background:url(/JsonObjectEditor/img/svgs/check-button.svg) 1px center no-repeat;
    background-size: 24px;
}
.complete-false{
    background:url(/JsonObjectEditor/img/svgs/check-button-disabled.svg) 1px center no-repeat;
    background-size: 24px;
}
report-subtask{
    font-family: 'Segoe UI Semibold','Helvetica Neue', sans-serif;
    font-size: 1.1em;
    display: block;
    padding: 5px 5px 5px 35px;
    height: 45px;
    box-sizing: border-box;
    background-size: 24px;
    line-height:34px;
}
report-subtask input[type=checkbox]{
    margin-left: -10px;
    margin-right: 10px;
}