Lungo.js/src/stylesheets/less/Lungo.theme.default.less

/**
 * 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);
	@theme-secondary: #2c2c2d;
		@theme-secondary-dark: #1c1c1c;


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

@background-main: #2c8bca -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bca), color-stop(100%,#154f93));
@background-secondary: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(100%, #272a2d));
	@background-secondary-footer: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(50%, #272a2d));

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

/* @group <header> & <footer> & <article> */
header {
	/*border-top-left-radius: 5px;
	border-top-right-radius: 5px;*/
	border-bottom: 1px solid #1a2838;
	
	background: @background-main;
		
	box-shadow: inset 0 1px 0 @color-border-light, inset 0 -1px 0 @color-border;
	
	position: absolute;
	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);
	}
}

footer {
	background: @background-secondary-footer;
	
	border-top: 1px inset #2A2A2A;
	color: #353b42;
	
	//border-bottom-left-radius: 5px;
	//border-bottom-right-radius: 5px;
}



article {
	background-color: #EBEBEB;
	& .title {
    	color: #797979;
    	text-shadow: 0px 1px 0px #fff;
	}
}
/* @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); }
		&.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);
	font-weight: bold;
		
	&.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> */
aside {
	color: #9faab1;
	
    & .title {
    	background: #252525;
    		}

    & a {
    	color: #9faab1;
		background-color: #2f353a;
		
	    //text-shadow: 0px 1px 0px #000;
	    border-bottom: 1px inset #222;
		border-top: 1px inset rgba(255,255,255,0.1);

		&.current {
    		//background: #1c1c1c;
			//box-shadow: inset 0px 0px 8px #101010;
			//border-top: 1px inset #1c1c1c;
			color: @white;
		}

		& .icon {
    		text-shadow: none;
			color: #7a7a7a;
		}
	}

	& .anchor {
    	background: #101010;
		color:  #7a7a7a;
	}
}

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 {
    & li {
		background: #fff;
		
		border-bottom: 1px inset #e1e1e1;
		
		
		&: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; }
	}

	&.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;
		background: @background-main;
		border: none;
	}

	& .tip { 
		color: #7a7a7a;
		&.theme {
	color: #fff;
			background: @background-main;
			
		}
		&.dark {
			background: @background-secondary;
			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(5px); }
    	& li {
    		&:first-child { .border-radius(5px 5px 0px 0px); }
			&:last-child { 
				.border-radius(0px 0px 5px 5px); 
				box-shadow: 0 1px 0 rgba(0,0,0,0.05);
			}
		}
	}


/* @group .button */
.button {
	.border-radius(@border-radius);
	-webkit-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 { 
		-webkit-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 1px 2px rgba(0, 0, 0, 0.1);
@box-shadow-form-big: inset 0 2px 4px rgba(0, 0, 0, 0.2);

form, .form {
	font-weight: bold;
	
	& li { min-height: 27px; }
	
	

	& label {
		color: #999;
	}
	
}


input, textarea, select {
	border: 1px solid #e1e1e1;
	.border-radius(@border-radius);
	color: #858585;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	box-shadow: @box-shadow-form;
	
	&.underline {
		border:  none;
		box-shadow: none;
		border-bottom: 2px solid #e1e1e1;
	}
}

input:focus, textarea:focus, select:focus {
	color:  @color-border-light;	
	border-color: @color-border-light;
}

.select:after {
	background: #858585;
	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 {
		background: @background-main;		
		.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;
		background: @background-main;
	}
	&::-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 {
			background: @background-main;
			.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(7px);
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
	font-weight: bold !important;
	
	//border: solid 1px @white;
	box-shadow: 0 0 6px #000;	
	
	&.count { background: @background-main; }
}
	header .bubble.count {
		background: @theme-secondary;
	}
/* @end */