Lungo2.0.js/src/stylesheets/less/Lungo.theme.pro.less

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

@import "mixins.less";
@import "Lungo.theme.pro.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;

.app {
    background: @black;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
}
	
/* @group <header> & <footer> & <article> */
header {
	background-color: @theme;
	border-top: 1px solid @theme-light;	
	border-bottom: 1px solid @theme-dark;
	box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
	
footer {
	background: @theme-secondary -webkit-gradient(linear, left top, left bottom, color-stop(0.25, @theme-secondary), color-stop(1, @theme-secondary-dark));	
	border-top: 1px inset @theme-secondary-dark;
}

.title {
	color: @white;
	text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
}

article { 
	background-color: #ededed; 	
	& .title {
    	color: #797979;
    	text-shadow: 0px 1px 0px #fff;
	}
}
/* @end */

/* @group <nav> */
nav a { 
	color: rgba(255,255,255,0.5); 	
	
	&.current, &.active {  color: @white; }
}

.toolbar a {  
	color: rgba(255,255,255,0.2); 
	&.current, &.active {
		background: #1c1c1c;
		box-shadow: inset 0px 0px 8px #101010;
		text-shadow: 0px 1px 4px #000;
	}
}

.groupbar {
    background: #ededed;
    border-bottom: solid 1px rgba(0,0,0,0.1);
    
    & a {
    	color: #6e6e6e;
    	&.current {
			color: #6e6e6e;
			border-bottom: solid 3px @theme-light;
    	}
	}
}
/* @end */

/* @group <aside> */
aside {
    background: #252525;
    
    & .title {
    	background: #101010;
    	border:  none;
	}
    
    & a {
    	color: #fff;
	    text-shadow: 0px 1px 0px #000;    
	    border-bottom: 1px inset #101010;
		border-top: 1px inset #868686;
		
		&.current {
    		background: #1c1c1c;
			box-shadow: inset 0px 0px 8px #101010;
			border-top: 1px inset #1c1c1c;
		}
		
		& .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 {
		background: @theme-highlight;
		color: @theme-highlight-color;
		text-shadow: @theme-highlight-text-shadow;
		border: none;
	}
	
	& .tip { color: #7a7a7a; 
		&.darker {
			background-color: #2c2c2d;	
			color: #fff;
			text-shadow: 0px 1px 0px #000;
			
			& a { color: #fff !important; }
		}
		
		&.dark {
		    background-color: #f4f4f4;
			box-shadow: inset 0px 1px 0px #fff;			
			text-shadow: 0px 1px 0px #fff;
		}
	}	
	
	& .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);
}



/* @group .button */
.button {
	border-bottom: 1px inset rgba(0,0,0,0.2);		
	.border-radius(2px);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 3px rgba(0,0,0,0.2);	
	
	&:active, &.active { 
		-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.2);
		border-bottom-color: rgba(0,0,0,0);
	}
	
	header &:active, footer &:active, 
	header &:active, footer &:active {
    	height: 29px;
		position: relative;
		top:  1px; 
	}
	
	&.default {
    	background: #5a5a5a;    	
    	&:active, &.active { background: #4b4b4b; }
	}
}
/* @end */

/* @group <inputs> */
input, textarea, select {
	border: 1px solid #e1e1e1;
	color: #858585;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
}
	
input:focus, textarea:focus, select:focus { 
	border-color: @theme;
	color:  @theme;
}

label {
	color: @theme;
	text-transform: uppercase;
	font-weight: bold;
}
	
.select:after {
	background: #858585;
	color: white;
}

input[type="checkbox"] + span, input[type="radio"] + span {
	color: #fff;
	background: #a0a0a0;
}
	input[type="checkbox"] + span::before, 
	input[type="radio"] + span::before {
		background: #c1c1c1;
	}
	
	input[type="checkbox"]:checked + span, 
	input[type="radio"]:checked + span {
		background: @theme-dark;
	}
/* @end */

.bubble {
	color: #fff;
	.border-radius(2px);
	text-shadow: none;
	font-weight: bold !important;
}	
	header .bubble.count {background: @theme-secondary;}
	.bubble.count { background: @theme; }
/* @end */