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: #fff;

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

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







/*****************/
/*** 2. HEADER ***/
/*****************/
#HEADER{
	/* position */
	display: flex;
	position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 48px;

	/* flex (as container) */
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;

	/* background */
	background: #1d1d1d;

	/* foreground */
	font-size: 12px;
}





/***************/
/*** 3. MENU ***/
/***************/
#HEADER #MENU{
	/* position */
	display: flex;
	height: 100%;

	/* flex (as container) */
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;

}



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

	/* background */
	background: rgba(0,0,0,.2);

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

#AUTH_FILTER.active{ display: block; }

#AUTH{
	/* position */
	/*display: block;*/ display: none;
	position: fixed;
		top: 30%;
		left: calc( 50% - 250px/2 );
		width: 250px;

	/* z axis */
	z-index: 101;
}

/* style des labels */
#AUTH label{
	/* foreground */
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 3em;
	text-shadow: 1px 1px 0 #666;
}

/* bouton quitter */
#AUTH::after{
	content: 'x';
	display: block;
	position: absolute;
	top: 0;
	left: calc( 100% - 25px );
	width: 25px;
	height: 25px;

	border-radius: 100% / 100%;
	border: 2px solid #aaa;
}


/* message qui dit que les identifiants sont incorrects */
#AUTH .errorbox{
	display: inline-block;
	width: 100%;
	height: 2em;

	font-size: .8em;
	color: #d50c4d;
	line-height: 1em;
}

#AUTH_FILTER.active + #AUTH{ display: block; }

/* tout les INPUT */
#AUTH input{
	/* position */
	display: inline-block;
	position: relative;
		top: 0;
		left: 0;
		width: calc( 100% - 2*.8em );
	margin-bottom: 2em;
	padding: .8em;

	/* border */
	border-radius: 3px;
	border: 1px solid #A1A1A1; 

	/* foreground */
	font-family: inherit;

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


#AUTH input[type=password]{ margin-bottom: 0; }

/* INPUT text/password */
#AUTH input[type=text]:focus,
#AUTH input[type=password]:focus{
	border-color: #21a4a8;
	box-shadow: 0 0 3px #2bccd4;
}

/* SUBMIT */
#AUTH input[type=submit]{
	/* position */
	width: 100%;

	/* foreground */
	color: #fff;
	font-weight: bold;

	/* background */
	background-color: #279cea;

	/* xTra */
	cursor: pointer;
}


#AUTH input[type=submit]:hover{
	background-color: #2494de;
}



/********************/
/*** 5. CONTAINER ***/
/********************/
#CONTAINER{
}


/*****************/
/*** 6. MSGBOX ***/
/*****************/
#MSGBOX{
}