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%;
		height: 100%;

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

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

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



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

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

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

	/* scroll */
	overflow: hidden;
}

	#MENU{
		/* position */
		display: flex;
		position: absolute;
			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 #e5e5e5;

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

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


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

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

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

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


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

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

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


#AUTH_FILTER{
	/* position */
	display: none;
	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	/* background */
	background-color: rgba(0, 0, 0,.5);

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

/* affichage du filtre si actif */
#AUTH_FILTER.active{ display: block; }






/* 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 */
#AUTH_FILTER.active + #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]:hover{
	background-color: #3dcc70;
	color: #fff;
}