// jTable Metro Style Theme Base
// Created by Halil İbrahim Kalkan
// http://www.jtable.org

// Imports ////////////////////////////////////////////////////////////////////

@import "../jtable_theme_base.less";

// Font definitions ///////////////////////////////////////////////////////////

@font-face
{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}

@font-face
{
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxrsuoFAk0leveMLeqYtnfAY.woff) format('woff');
}

@font-face
{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face
{
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBtIh4imgI8P11RFo6YPCPC0.woff) format('woff');
}

@font-face
{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSha1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}

@font-face
{
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxmWeb5PoA5ztb49yLyUzH1A.woff) format('woff');
}

@font-face
{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzBa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}

@font-face
{
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxoUt79146ZFaIJxILcpzmhI.woff) format('woff');
}

// JTABLE THEME - METRO STYLE BASE ////////////////////////////////////////////

.jtable_metro_base( @theme-folder, @main-theme-color )
{
    .jtable_theme_base; //Inherit from jtable_theme_base

    // Variables //////////////////////////////////////////////////////////////

    @default-font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;

    @default-font-size: 14px;
	@default-line-height: 1.3;

    @table-title-font-size: @default-font-size + 5px;
    @table-header-font-size: @default-font-size + 1px;
	@table-bottom-panel-font-size: @default-font-size - 1px;

    @table-title-background: @main-theme-color - #222;
    @table-header-background: @main-theme-color;
	@table-bottom-panel-background: @main-theme-color - #111;

    // Mixings //////////////////////////////////////////////////////////////////

    .font-light(@size: @default-font-size)
    {
        font-family: @default-font-family;
        font-weight: 300;
        font-size: @size;
    }

    .font-normal(@size: @default-font-size)
    {
        font-family: @default-font-family;
        font-weight: 400;
        font-size: @size;
    }

    .font-semi-bold(@size: @default-font-size)
    {
        font-family: @default-font-family;
        font-weight: 600;
        font-size: @size;
    }

    .font-bold(@size: @default-font-size)
    {
        font-family: @default-font-family;
        font-weight: 700;
        font-size: @size;
    }
    
	// Styles ///////////////////////////////////////////////////////////////////
     
	div.jtable-main-container
    {
        .font-light();
        background: #fff;
		line-height: @default-line-height;

		// Title ---------------------------------------------------------------

        > div.jtable-title
        {
            background-color: @table-title-background;
            padding-left: 10px;			

            div.jtable-title-text
            {
                .font-light(@table-title-font-size);
                line-height: @table-title-font-size + 15px;
                color: #fff;
            }

            .jtable-close-button
            {
                .dock(right, 8px);
                .opacity(0.5);
                background: url('metro/close.png') no-repeat;
                width: 16px;
                height: 16px;

                &:hover
                {
                    .opacity(1);
                }
            }
        }

		// Table ---------------------------------------------------------------

        > table.jtable
        {
            border: 1px solid @main-theme-color;
            border-collapse: collapse;
            border-spacing: 0;

            > thead
            {
                background-color: @table-header-background;

                th
                {
                    .font-light(@table-header-font-size);
                    color: #fff;

                    &.jtable-column-header
                    {
                        @header-container-height: 24px;

                        div.jtable-column-header-container
                        {
                            height: @header-container-height;
                            margin-left: 4px;

                            div.jtable-column-resize-handler
                            {
                                height: @header-container-height + 4px;
                            }

                            span.jtable-column-header-text
                            {
                                margin-top: 2px;
                            }
                        }
                    }

                    &.jtable-column-header-sortable
                    {
                        div.jtable-column-header-container
                        {
                            background: url('metro/column-sortable.png') no-repeat right;
                        }
                    }

                    &.jtable-column-header-sorted-asc
                    {
                        div.jtable-column-header-container
                        {
                            background: url('metro/column-asc.png') no-repeat right;
                        }
                    }

                    &.jtable-column-header-sorted-desc
                    {
                        div.jtable-column-header-container
                        {
                            background: url('metro/column-desc.png') no-repeat right;
                        }
                    }
                }
            }

            > tbody
            {
                > tr
                {
                    background-color: #fff;

					> td
					{
						border: 1px solid #ddd;
					}

					&.jtable-data-row
					{
						> td
						{
							padding: 4px;

							> .jtable-edit-command-button
							{
								background: url('metro/edit.png') no-repeat;
								width: 16px;
								height: 16px;
								opacity: 0.4;

								&:hover
								{
									opacity: 0.8;
								}
							}

							> .jtable-delete-command-button
							{
								background: url('metro/delete.png') no-repeat;
								width: 16px;
								height: 16px;
								opacity: 0.4;

								&:hover
								{
									opacity: 0.8;
								}
							}
						}
					}

					&.jtable-row-even
					{
						background-color: #f9f9f9;
					}

					&:hover
					{
						background: #e8eaef;
					}

                    &.jtable-row-selected
                    {
                        color: #fff;
                        background-color: @main-theme-color + #222;
                    }

                    &.jtable-row-created
                    {
                        background-color: @main-theme-color + #333;
                    }

                    &.jtable-row-updated
                    {
                        background-color: @main-theme-color + #333;
                    }

                    &.jtable-row-deleting
                    {
                        background-color: #e51400;
                        color: #fff;
                    }

                    &.jtable-child-row
                    {
                        > td
                        {
                            padding: 0px;
                            background-color: #fff;
                        }
                    }
                }
            }
        }

		// Footer --------------------------------------------------------------

        > div.jtable-bottom-panel
        {
			@page-number-margin: 1px;
			@page-number-padding-vertical: 2px;
			@page-number-padding-horizontal: 5px;

			@bottom-panel-height: (@table-bottom-panel-font-size * @default-line-height) + (@page-number-margin * 2) + (@page-number-padding-vertical * 2);

            background-color: @table-bottom-panel-background;
            color: #fff;
            min-height: @bottom-panel-height;
            font-size: @table-bottom-panel-font-size;
            border: 1px solid @main-theme-color;
            border-top: none;

            .jtable-page-list
            {
                margin: 1px 0px 0px 0px;

                .jtable-page-number,
                .jtable-page-number-space,
                .jtable-page-number-first,
                .jtable-page-number-last,
                .jtable-page-number-previous,
                .jtable-page-number-next,
                .jtable-page-number-active
                {
                    background-color: @table-bottom-panel-background + #111;
                    margin: @page-number-margin;
                    padding: @page-number-padding-vertical @page-number-padding-horizontal;
                    color: #fff;
                }

                    .jtable-page-number:hover,
                    .jtable-page-number-first:hover,
                    .jtable-page-number-last:hover,
                    .jtable-page-number-previous:hover,
                    .jtable-page-number-next:hover
                    {
                        background-color: @table-bottom-panel-background + #333;
                    }

                .jtable-page-number-active
                {
                    color: #ccc;
                    cursor: default;
                }

                .jtable-page-info
                {
					margin-left: 5px;
					padding: 2px;
                }
            }

            span.jtable-add-record
            {
                margin: 4px;

                a
                {
                    color: #fff;
                }
            }
        }
    }

	// Forms -------------------------------------------------------------------

    form.jtable-dialog-form
    {
        .font-normal();
    }

	// Busy message-------------------------------------------------------------

    div.jtable-busy-message
    {
        .font-light(16px);
        border: 1px solid #fff;
        padding: 5px 5px 5px 58px;
        color: #fff;
        background: url('metro/@{theme-folder}/loading.gif') no-repeat;
        background-color: @main-theme-color - #222;
        background-position: 8px;
    }
}