github.com/billybanfield/evergreen@v0.0.0-20170525200750-eeee692790f7/public/static/less/grid.less

@was-success:#01DF01;
@was-fail:#F5A9A9;
@was-system-fail:#9370DB;
@system-failure:#800080;
@undispatched_grey:#ccc;
@started_grey:#ccc;
@success_green: #4AC948;
@fail_red: #FF4040;
@cell_size:20px;
@rowheader_width:10px;
@header_height:60px;
@cell_spacing: 2px;
@rotation: -45deg;

.test-failures {
    padding-left: 10px;
    margin-bottom: 0px;
}

.failure-tab {
    margin-left: 30px;
}

.tablerow {
    margin-left: 40px;
}

.summary {
    margin-left: 0px;
    list-style-type: none;
    margin-bottom: 40px;
}

.nav-tabs {
    border-bottom: 0px;
}

.failure-test {
    font-size: 15px;
    font-family: Akzidenz,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.failure-task {
    font-size: 20px;
    margin-top: 15px;
}

.failure-link {
    color: #000000; 
    text-decoration: none;
}

#popover .popover{
    max-width: 670px;
}

#popover h3.popover-title{
    display: none;
}

.current-task-run{
    font-size: 1.5em;
}

ul.tooltip-tasks{
    list-style: none;
    max-height: 300px;
    overflow: scroll;
    border: 1px solid #eee;

    .test-result{
        width: 515px;
        overflow: hidden;
        white-space: nowrap;

        .gitspec{
            font-family: monospace;
            font-weight: bold;
        }
    }
    .commitmsg{
        padding-left: 5px;
        text-overflow: ellipsis;
    }

    li.tooltip-task{
        margin-top: 1px;
    }
}
.tooltip-task-status{
    width: 15px;
    line-height: 12px;
    display: inline-block;
    border: 1px solid #888;
    margin-right: 3px;
}

.tooltip-task-status.started{
    background-color: #ccc;
    background-image: url('/static/img/15.GIF');
}

.gridtable(@cell_spacing, @cell_size, @rowheader_width, @header_height:60px, @extra_rowspacing:0px){
    .top-header-row.locked {
        background-color: white;
        z-index: 100;
        margin: 0px;
    }
    .tablebody.locked {
        padding-top: @header_height - 30px;
        margin: 0px;
    }
    .top-header-row {
        padding-top: @header_height;
        padding-left: @rowheader_width+38px;
        white-space: nowrap;

        .header-cell {
            font-size: 16px;
            white-space: nowrap;
            margin-left: 0px;
            display: inline-block;
            width: @cell_size + @cell_spacing;
            border-style: none;
            -webkit-transform: rotate(@rotation);
            -moz-transform: rotate(@rotation);
            -ms-transform: rotate(@rotation);
            -o-transform: rotate(@rotation);
            transform: rotate(@rotation);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

            .header-text {
                font-size: .8em;
                font-weight: bold;
                border-bottom: 1px solid #ccc;
            }
        }
        .header-cell.highlighted {
            .header-text {
                background-color: #eee;
            }
        }
    }

    .tablerow {
        white-space: nowrap;
        line-height: @cell_size;
        margin-bottom: @cell_spacing + @extra_rowspacing;
        text-align: right;
        position: relative;
        top: .5em;
        float: left;
        clear: both;

        .header {
            font-size: 16px;
            text-align: right;
            vertical-align: top;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
            width: @rowheader_width - 20px;

            .commit-msg {
                //display: none; // comment this out to show commits: ;
                float: right;
                text-align: right;
                width: 200px;
                font-size: .8em;
                color: #888;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
        .header.highlighted {
            background-color: #eee;
        }
        .cells {
            margin-left: 5px;
            display: inline-block;

            a {
                text-decoration: none;
            }
            .cell {
                //border-radius: @cell_size/2; //uncomment for circular cells;
                margin-right: 2px;
                display: inline-block;
                width: @cell_size;
                height: @cell_size;
            }
        }
    }
}

.gridtable-timeline {
    margin: 0 30px;
}
.gridtable-small {
    .gridtable(2px, 20px, 265px, 60px);
    margin-top: 50px;
}
.gridtable-scroll {
    overflow: scroll;
}
.cell {
    background: transparent;
}
.cell.success {
    background-color: @success_green;
}
.cell.failed {
    background-color: @fail_red;
}
.cell.system-failed {
    background-color: @system-failure;
}
.cell.unstarted {
    background-color: @undispatched_grey;
    border: 1px solid #ccc;
}
.cell.skipped {
    background-color: #fafafa;
    pointer-events: none;
}
.cell.failure {
    background-color: @fail_red;
}
.cell.undispatched {
    background-color: @undispatched_grey;
    border: 1px solid #ccc;
}
.cell.undispatched.active {
    background-color: @undispatched_grey;
    border: 1px solid #ccc;
}
.cell.undispatched.inactive {
    background-color: white;
    border: 1px solid #ccc;
}
.cell.was-success {
    background-color: @was-success;
    opacity: 0.3;
}
.cell.was-failure {
    background-color: @was-fail;
}
.cell.was-system-failed {
    background-color: @was-system-fail;
}
.cell.started {
    background-image: url('/static/img/15.GIF');
}

.task-history-gridtable .cell.started {
    border: 1px solid #ccc;

    &.task-doesnt-match {
        border: 4px solid #fff;
    }
}