sid/css/layout.css

/*
*
*  Positionnement global et mise en page
*  -------------------------------------
*  1. Propriétés globales
*  2. HEADER
*  3. MENU
*  4. AUTH(entification)
*  5. CONTAINER
*  6. msgBox
*
*/








/******************************/
/*** 1. Propriétés globales ***/
/******************************/
*{ /* on supprime le margin/padding par défaut */
	margin: 0;
	padding: 0;
}

a{ text-decoration: none; color: inherit; }

/* on initialise le body avec les valeurs par défaut [compatibilité] */
body{
	/* position */
	display: block;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100%;

	/* background */
	background: #ecf0f1;
	background: url(../src/wallpaper.jpg) top left no-repeat;
	background-size: cover;
	background-attachment: fixed;

	/* scroll */
	overflow: auto;
	overflow-x: hidden;           /* empêche la barre horizontale de scroll [précaution] */

	/* foreground */
	font: 16px 'Ubuntu', 'Open Sans', 'Helvetica Neue', 'Arial', 'sans-serif';
}

/* @blurred */
*.blurred{
	filter: blur(5px);
	-moz-filter: blur(5px);
	-webkit-filter: blur(5px);
	-ms-filter: blur(5px);
	-o-filter: blur(5px);
}


#LOADER{
	/* position */
	display: block;
	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;

	/* background */
	background-color: #22d135;

	/* z axis */
	z-index: 100;


	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}


#WRAPPER{
	/* position */
	display: block;
	position: absolute;
		width: 100%;
		min-height: 100%;
	/*margin: 50px;*/

	/* border */
	box-shadow: 0 0 5px #555;

	/* background */
	background-color: #ecf0f1;

	/* scroll */
	overflow: hidden;
}

	#MENU{
		/* position */
		display: flex;
		position: fixed;
			top: 0;
			left: 0;
			width: 14em;
			height: 100%;

		/* flex */
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;

		/* background */
		background-color: #34495e;
	
		/* Z */
		z-index: 10;

		/* extra */
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;

	}


	#HEADER{
		/* position */
		display: flex;
		position: absolute;
			top: 0;
			left: 14em;
			width: calc( 100% - 14em );
			height: 5em;

		/* flex */
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;

		/* border */
		border-bottom: 1px solid #d2d3d5;

		/* background */
		background-color: #fff;
	
		/* scroll */
		overflow: hidden;

		/* Z */
		z-index: 9;
	}


	#HEADER nav.subsections{
		/* Z */
		z-index: 8;
	}


	#CONTAINER{
		/* position */
		display: block;
		position: relative;
			margin-top: 5em;
			margin-left: 14em;
			width: calc( 100% - 14em );
			/*min-height: 100%;*/
			height: auto;

		/* background */
		background-color: #ecf0f1;

		/* Z */
		z-index: 7;
	}






/* le formulaire */
#AUTH{
	/* position */
	display: block;
	position: fixed;
		/*top: 10em;*/ top: -150%;
		left: calc( 50% - 25em/2 - 2em );
		width: 25em;
	padding: 2em;

	/* border */
	border-radius: 5px;
	box-shadow: 0 0 .5em #333;

	/* background */
	background-color: #fff;

	/* Z */
	z-index: 101;

	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

/* affichage du formulaire si filtre actif */
#WRAPPER.blurred ~ #AUTH{ top: 10em; }





/* le titre */
#AUTH label{
	display: block;
		margin-bottom: 1em;
		margin-left: 1em;

	font-size: 2em;
}

/* tout les champs du formulaire */
#AUTH input{
	/* position */
	display: block;
	position: relative;
		margin-top: 1em;
		margin-left: 1em;
		width: calc( 100% - 2*2em );
	padding: 1em;

	/* border */
	border-radius: 5px;
	border: 1px solid #b3b3b3;

	/* background */
	background-color: #fff;

	/* foreground */
	font: inherit;
	color: #777;
}

/* le bouton */
#AUTH input[type=button]{
	/* position */
	width: calc( 100% - 2em );
	
	/* border */
	border-color: #3dcc70;
	
	/* foreground */
	color: #3dcc70;
	font-weight: bold;
	text-transform: uppercase;

	/* extra */
	cursor: pointer;

	/* animation */
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}


/* quand on selectionne le texte */
#AUTH input[type=text]:focus,
#AUTH input[type=password]:focus{
	border-color: #3dcc70;
	color: #000;
}


/* quand on a la souris sur le bouton */
#AUTH input[type=button]:focus,
#AUTH input[type=button]:hover{
	background-color: #3dcc70;
	color: #fff;
}


/* errorbox (identifiants incorrects) */
#AUTH span.errorbox{
	/* position */
	display: inline-block;
	position: relative;
	padding-top: 1em;
	padding-left: 1em;


	color: #ff5c5c;
}