// Copyright 2010-2012 RethinkDB, all rights reserved.
/*
    --------------------
    Visualization styles
    --------------------
*/
#dashboard_container .ops-plot {
    /* GPU acceleration */
    -webkit-transform : translateZ(0); 
    -o-transform : translateZ(0); 
    -moz-transform : translateZ(0); 
    transform : translateZ(0); 
    /* For Safari */
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;

    @plot_height: 300px;

    .ops-plot-legend { 
        float: right;
        color: #a3a3a3;
        font: 15px @serif;
        text-align: right;

        .element { 
            display: inline-block;
            vertical-align: top;
            margin-left: 40px;
            p {
                margin: 0;
                margin-left: 23px;
                line-height: 15px;
            }
        }

        .reads .color { background-color: #729E51; }
        .writes .color { background-color: #983434; }

        /* concentric circles for legend element */
        .color {
            @radius: 4px;
            width: @radius*2;
            height: @radius*2;
            .border-radius(@radius);
            margin: 2px;
        }

        .outer-circle {
            @radius: 6px;
            width: @radius*2;
            height: @radius*2;
            .border-radius(@radius);
            border: thin solid #CCC;
            float: left;
        }

    }
    .plot-container {
        background-color: white;
        border: thin solid #dcdcdc;
        .border-radius(4px);
        padding: 10px;
    }
    .plot {
        position: relative;
        .chart { 
            border: none;
            z-index: 150;
            position: relative;
            overflow: hidden;
            display: inline-block;

            .title { display: none; }
            .value { display: none; }
            canvas { display: block; }
        }

        // make room for the vaxis on the left
        .chart, .haxis, .hgrid, .line { margin-left: 34px; }

        // common styles
        .haxis, .vaxis, .hgrid, .vgrid {
            // NOTE: because the plot is laid out poorly,
            // this font size matter a lot. It will define
            // how aligned the vaxis labels are with the
            // vaxis grid. Adjust according to the font
            // being used. Ugly hack!
            font: 7px @sans;
            line {
                stroke: #dcdcdc;
                shape-rendering: crispEdges;
            }
            opacity: 1;
            line {  opacity: 1; }
        }

        // labels on the axes
        .vaxis text, .haxis text {
            font: 13px @sans;
            fill: #A3A3A3;
            -webkit-transition: fill-opacity 250ms linear;
        }

        // vaxis and vgrid
        .vaxis { 
            margin-top: -1 * (@plot_height + 26px);
            .tick { display: none; }
        }
        .vgrid {
            position: absolute;
            top: 0;
            left: 0px;
        }

        // haxis and hgrid
        .haxis { margin-top: -9px; }
        .hgrid {
            display: none;

            height: @plot_height;
            position: absolute;
            top: -3px;
            left: 0;
        }

        .line {
           background: #000;
           opacity: .2;
           z-index: 2;
        }
    }    
}

#database-view .ops-plot, #table-view .ops-plot, #datacenter-view .ops-plot, #server-view .ops-plot {
    /* GPU acceleration */
    -webkit-transform : translateZ(0); 
    -o-transform : translateZ(0); 
    -moz-transform : translateZ(0); 
    transform : translateZ(0); 
    /* For Safari */
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    @plot_height: 220px;

    .ops-plot-legend { 
        float: right;
        color: #a3a3a3;
        font: 15px @serif;
        text-align: right;

        .element { 
            display: inline-block;
            vertical-align: top;
            margin-left: 40px;
            p {
                margin: 0;
                margin-left: 23px;
                line-height: 15px;
            }
        }

        .reads .color { background-color: #729E51; }
        .writes .color { background-color: #983434; }

        /* concentric circles for legend element */
        .color {
            @radius: 4px;
            width: @radius*2;
            height: @radius*2;
            .border-radius(@radius);
            margin: 2px;
        }

        .outer-circle {
            @radius: 6px;
            width: @radius*2;
            height: @radius*2;
            .border-radius(@radius);
            border: thin solid #CCC;
            float: left;
        }

    }
    .plot-container {
        /* REMOVED */
    }
    .plot {
        position: relative;
        .chart { 
            border: none;
            z-index: 999;
            position: relative;
            overflow: hidden;
            display: inline-block;

            .title { display: none; }
            .value { display: none; }
            canvas { display: block; }
        }

        // make room for the vaxis on the left
        .chart, .haxis, .hgrid, .line { margin-left: 34px; }

        // common styles
        .haxis, .vaxis, .hgrid, .vgrid {
            // NOTE: because the plot is laid out poorly,
            // this font size matter a lot. It will define
            // how aligned the vaxis labels are with the
            // vaxis grid. Adjust according to the font
            // being used. Ugly hack!
            font: 7px @sans;
            line {
                stroke: #dcdcdc;
                shape-rendering: crispEdges;
            }
            opacity: 1;
            line {  opacity: 1; }
        }

        // labels on the axes
        .vaxis text, .haxis text {
            font: 13px @sans;
            fill: #A3A3A3;
            -webkit-transition: fill-opacity 250ms linear;
        }

        // vaxis and vgrid
        .vaxis { 
            margin-top: -1 * (@plot_height + 26px);
            .tick { display: none; }
        }
        .vgrid {
            position: absolute;
            top: 0;
            left: 0px;
        }

        // haxis and hgrid
        .haxis { margin-top: -9px; }
        .hgrid {
            display: none;

            height: @plot_height;
            position: absolute;
            top: -3px;
            left: 0;
        }

        .line {
           background: #000;
           opacity: .2;
           z-index: 2;
        }
    }    
}
