/**
 * Stylesheet
 *
 * @namespace LUNGO.Theme
 * @class Default
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "constants.less";
@import "mixins.less";
@import "lungo.theme.default.font.css";

@theme:  #05b8e2;
    @theme-light: #05bde9;
    @theme-dark: #07acd0;
    @theme-highlight: #93d6e7;
        @theme-highlight-color: #1b6777;
        @theme-highlight-text-shadow: 0 1px 0 rgba(255,255,255,0.2);

@border-radius-section: 4px;

@color-border: #2566a4;
    @color-border-light: #64b9e2;

@color-main: #2c8bca;
    @color-main-dark: #154f93;

@color-secondary: #353b42;
    @color-secondary-dark: #272a2d;

@background-secondary: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(100%, #272a2d));

.app {
    background: @black;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

/* @group <header> & <footer> & <article> */
section > header {
    .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
    .box-shadow(~"inset 0 1px 0 "@color-border-light~", inset 0 -1px 0 "@color-border);
    .border-radius(@border-radius-section @border-radius-section 0px 0px);
    border-bottom: 1px solid #1a2838;
    z-index: 2;
    & .title {
        color: @white;
        text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
    }
    & .subtitle {
        color: rgba(255,255,255,0.6);
        text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
    }
}

section > footer {
    .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 60%);
    border-top: 1px inset #2A2A2A;
    color: #353b42;
    .border-radius(0px 0px @border-radius-section @border-radius-section);
}

article { 
	background: #efefef; 
	//background: red;
}
/* @end */

/* @group <nav> */
header nav {
    & a {
        color: @white;
        text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    }

    &:not(.plain) {
        & a {
            .box-shadow(~"1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.2)");
            &.accept { background: rgba(0, 255, 0, 0.4); }
            &.cancel { background: rgba(255, 0, 0, 0.4); }
        }
        &.onright a { .box-shadow(~"-1px 0 0 rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2)"); }

        & a:active { .box-shadow(~"inset 1px 0 1px rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 0 42px rgba(0,0,0,0.5)"); }
    }

    &.plain a:active { text-shadow: 0 0 4px rgba(255,255,255,0.5); }
}

.toolbar a {
    color: #cdd9e3;
    .border-radius(4px);

    &.current, &.active {
        background: #111;
        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,1), -1px 0 0 rgba(255,255,255,0.05), 1px 1px 0 rgba(255,255,255,0.05)");
    }
}

.groupbar {
    background: #272a2d;
    border-bottom: solid 1px rgba(0,0,0,1);
    .box-shadow(~"inset 0 1px 8px rgba(0,0,0,0.3)");

    & a {
        color: #6e6e6e;
        &.current {
            color:  #fff;
            border-bottom: solid 3px @color-border;
        }
    }
}
/* @end */

/* @group <aside> */
a {
	//background-color: #333;
}
aside {
    color:  #fff;
    background: #272727;
    background: #333;
		
    & header, footer {
		.box-shadow(~"inset 0 1px 0 rgba(0,0,0,0.1), inset 0 -1px 0 rgba(255,255,255,0.1)");
    	background: #272727;
	}
	
	& article {
		background: none;
	}
	
	& .list {
		& ul {
			background: none;
		}
		
		& li {
			color: #F0F0F0;
			border-bottom: 1px solid #2f2f2f;
	        
	   		& strong {
				text-shadow: 0 1px 1px black;
				color: #fff;
			}
			
			& small {
				color:  rgba(255,255,255,0.3);
			}
		}
	}
	
	& a.current { background: #2f2f2f; }		
}

section.aside {
    .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
    &.onright { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
}

@media handheld, only screen and (min-width: 768px) {
    section.current, section.show {
        .box-shadow(~"-4px 0 8px rgba(0,0,0,0.5)");
        &.onright { .box-shadow(~"4px 0 8px rgba(0,0,0,0.5)"); }
    }
}
/* @end */

/* @group .list */
.list, .list li:not(.toolbar) a { color: #2a2a2a; }

.list {
	& ul {
		background: #fff;
	}
    & li {
        //background: #fff;
        border-bottom: 1px inset #f8f8f8;
        &:last-child { border-bottom: none; }

        &.selectable:active {
            background: @theme-highlight;
            color: @theme-highlight-color;
            text-shadow: @theme-highlight-text-shadow;

            & small, & .onright:not(.bubble) {
                color: @white;
                text-shadow: none;
            }
        }

        & small, & .onright:not(.bubble) { color: #888; }
        
        & strong {
			color: #134c81;
		}
    }

    &.indented li {
        border-left: solid 1px #e1e1e1;
        border-right: solid 1px #e1e1e1;

        &:first-child { border-top: solid 1px #e1e1e1; }
        &:last-child { border-bottom: solid 1px  #e1e1e1; }
    }

    & .anchor {
        color: @white;
        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
        border: none;
    }

    & .tip {
        color: #7a7a7a;
        &.theme {
            color: #fff;
            .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
        }
        &.dark {
            .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
            color: #fff;
            text-shadow: 0px -1px 0px rgba(0,0,0,0.5);

            & a { color: #fff !important; }
        }
    }

    & .toolbar {
        border-bottom-color: rgba(0,0,0,0.2);

        & .toolbar a {
            .box-shadow(~"1px 0px 0px #d9d9d9");

            &:last-child { .box-shadow(none); }
            &.current {
                background: transparent;
                color: #333;
                text-shadow: none !important;
            }

        }
    }
}
/* @end */

/* @group widgets */
.splash {
    background: @theme-dark;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
}

&.indented {
    & ul { .border-radius(3px); }
    & li {
        &:first-child { .border-radius(3px 3px 0px 0px); }
        &:last-child {
            .border-radius(0px 0px 3px 3px);
            .box-shadow(0 1px 1px rgba(0,0,0,0.05));
        }
    }
}


/* @group .button */
.button {
    .border-radius(@border-radius);
    .box-shadow(~"inset 1px 0 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.1), inset -1px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 -3px 0 rgba(255,255,255, 0.05), 0 1px 2px rgba(0,0,0,0.3)");

    font-weight: bold;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);

    &:active { .box-shadow(~"inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.3)"); }

    &.default {
        background: #2c4579;
        &:active, &.active { background: #213761;}
    }
}
/* @end */

/* @group <form> */
@box-shadow-form: ~'inset 0 2px 1px rgba(0,0,0,0.1)';
@box-shadow-form-active: ~'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef';
@box-shadow-form-big: inset 0 2px 4px rgba(0, 0, 0, 0.2);

@border-radius-form: 2px;

form, .form {
    & label { 
    	color: #999; 
    }
}
input, textarea, select {
    border: 1px solid #ccc;
    .border-radius(@border-radius-form);
    color: #858585;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    .box-shadow(@box-shadow-form);
    
    &:focus {
		color: #000;
    	border-color: @color-border-light;
    	.box-shadow(0 0 6px @color-border-light);
	}
}

.select:after {
    background: #ccc;
    color: white;
    border-top-right-radius: @border-radius;
    border-bottom-right-radius: @border-radius;
}

/* @group .range */
input[type="checkbox"] + span, input[type="radio"] + span {
    color: #fff;
    background: #a0a0a0;
    .border-radius(@border-radius);
}
    input[type="checkbox"] + span::before,
    input[type="radio"] + span::before {
        background: #c1c1c1;
        .border-radius(@border-radius);
    }

    input[type="checkbox"]:checked + span,
    input[type="radio"]:checked + span {
        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);

        .border-radius(@border-radius);
    }
/* @end */



/* @group range */
input[type="range"] {
    background-color: #c7c7c7;
    .border-radius(@border-radius);
    .box-shadow(@box-shadow-form-big);


    &:active {
        .box-shadow(none);
        .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
    }
    &::-webkit-slider-thumb {
        //border: solid 7px rgba(255,255,255, 0.5);
        .box-shadow(0 0 4px #333);
        background: #fff;
    }
    &:active::-webkit-slider-thumb {
        .box-shadow(0px 0px 4px #34b7dc);
    }
}
/* @end */

/* @group .progress */
.progress {
    .labels {
        font-size: 12px;
        font-weight: bold;
        line-height: 18px;
        color: #858585;
    }

    & .bar {
        background: #c7c7c7;
        .box-shadow(@box-shadow-form-big);
        .border-radius(@border-radius);

        & .value {
            .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%);
            .border-radius(@border-radius);

            & .label {
                float: right;
                margin-right: 3px;
                font-weight: bold;
                color: rgba(0,0,0,0.6);
                text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
                font-size: 12px;
            }
        }
    }
}
/* @end */


/* @end */
.bubble {
    color: #fff;
    .border-radius(8px);
    text-shadow: 0 0 1px rgba(0,0,0,1);

    &.count { 
    	.linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%); 
    	.box-shadow(0 0 2px rgba(0,0,0,0.5);
    }
}
    header .bubble.count {
        .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
    }
	
    article .list .bubble{
		.box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
	}
	
	
	aside .list .bubble {
		background: rgba(0,0,0,0.25);
				.box-shadow(~'inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56');
		.box-shadow(~'inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2)');
	}
		
/* @end */