/*
 * Copyright (c) 2016-2018 the original author or authors.
 *
 * Licensed under the MIT License (the "License");
 * you may not use this file except in compliance with the License. 
 * You may obtain a copy of the License at
 *
 *     http://www.opensource.org/licenses/mit-license.php
 *
 * Unless required by applicable law or agreed to in writing, 
 * software distributed under the License is distributed on an 
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 
 * either express or implied. See the License for the specific 
 * language governing permissions and limitations under the License. 
 */

/* Theme: charcoal */

@import "../../../vendor/lesselements/_elements.less";
@import "../common/variables.less";

/* Variables */
@color: #efefef;
@pageBackgroundColor: #152029;
@widgetBackgroundColor: #3d454c;
@widgetBackgroundAccentColor: darken(#565F67, 5%);
@widgetBackgroundAccentBorderColor: lighten(@widgetBackgroundAccentColor, 10%);

@linkColor: lighten(@color, 15%);
@headerColor: #353B41;
@tableRowHoverBackgroundColor: lighten(@widgetBackgroundColor, 20%);
@tableBorderColor: #ccc;
@tableHeaderBorderBottom: 0;

@fontFamily: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Dashboard Styles */
.dashboard.dashboard-charcoal {
    background-color: @pageBackgroundColor;
    
    .dashboard-page-background {
        background-color: @pageBackgroundColor;
    }

    @sidebar-outline-color: #666;
    @sidebar-expander-color: #ddd;
    @sidebar-header-color: @color;
    @sidebar-header-background-color: lighten(@pageBackgroundColor, 1%);
    @sidebar-iconbar-color: lighten(@color, 10%);
    @sidebar-iconbar-background-color: @widgetBackgroundColor; //lighten(@pageBackgroundColor, 8%);
    @sidebar-heading-color: @color;
    @sidebar-heading-background-color: lighten(@pageBackgroundColor, 15%);;
    @sidebar-heading-border-bottom: 1px solid @widgetBackgroundColor;
    @sidebar-panel-color: @widgetBackgroundColor;
    @sidebar-panel-background-color: lighten(@pageBackgroundColor, 70%);
    @sidebar-footer-color: @color;
    @sidebar-footer-background-color: lighten(@pageBackgroundColor, 1%);

    /* Dashboard elements */
    @import "../dashboards/_sidebar.less";
}

.dashboard-page {
    /* Well style, normal only */
    &.normal {
        .dashboard-charcoal.dashboard-widgetwrapper > .dashboard-widget {
            padding: 0px;
        }
    }

    /* Page styles */
    &.dashboard-charcoal {
        color: @color;
        background-color: @pageBackgroundColor;
    }
}

/* Widget styles */
.dashboard-widgetwrapper.dashboard-charcoal {

    color: @color;

    > .tooltip {
        .tooltip-inner {
            background-color: @pageBackgroundColor;
            color: @color;
        }
        .tooltip-arrow {
            border-top-color: @pageBackgroundColor;
            border-bottom-color: @pageBackgroundColor;
        }
    }

    > .dashboard-widget {

        .widget-body {
            box-sizing: border-box;
            margin: 10px;
        }

        font-family: @fontFamily;

        background-color: @widgetBackgroundColor;

        h1,h2,h3,h4,h5,h6 {
            color: White;
        }

        button,
        input,
        optgroup,
        select,
        textarea {
            color: black;
        }

        a {
            color: @linkColor;
            text-decoration: none;
            border-bottom: 1px dotted #888;

            &:hover {
                color: lighten(@color, 30%);
            }
        }
    }

    /* Import widget styles, using the theme variables */
    @import "../_widgets.less";

    /* Extra styles */
    h1.title {
        box-sizing: border-box;
        background-color: @widgetBackgroundAccentColor;
        font-family: @fontFamily;

        line-height: 3rem;
        padding-left: 1rem;

        > .tooltip {
            .tooltip-inner {
                background-color: @pageBackgroundColor;
                color: @color;
            }
            .tooltip-arrow {
                border-top-color: @pageBackgroundColor;
                border-bottom-color: @pageBackgroundColor;
            }
        }
    }

    .header-widget {
        padding: 10px;
        .parameters {
            .header-parameter, button {
                .rounded(4px);
            }
        }
    }
}

/* Transparent Variant */
.dashboard-widgetwrapper.dashboard-charcoal.theme-variant-transparent {
    > .dashboard-widget {
        background-color: transparent;
        color: #ddd;
    }
}

/* Transparent-Unpadded Variant */
.dashboard-widgetwrapper.dashboard-charcoal.theme-variant-transparent-unpadded {
    > .dashboard-widget {
        padding: 0 !important;
        background-color: transparent;
        color: #ddd;

        .widget-body {
            margin: 0;
        }
    }
}

.dashboard-charcoal.dashboard-controls {
    color: @color;
    a { color: @color; }
    background-color: @pageBackgroundColor;
}
