151 lines
2.3 KiB
CSS
Executable File
151 lines
2.3 KiB
CSS
Executable File
/*
|
|
*
|
|
* 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;
|
|
|
|
/* overflow */
|
|
overflow-x: hidden; /* empêche la barre horizontale de scroll [précaution] */
|
|
|
|
/* foreground */
|
|
font: 16px 'Open Sans', 'Helvetica Neue', 'Arial', 'sans-serif';
|
|
}
|
|
|
|
|
|
|
|
#WRAPPER{
|
|
/* position */
|
|
display: block;
|
|
position: absolute;
|
|
width: calc( 100% - 2*100px );
|
|
min-height: calc( 100% - 2*100px );
|
|
margin: 100px;
|
|
|
|
box-shadow: 0 0 5px #777;
|
|
}
|
|
|
|
#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;
|
|
|
|
/* 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;
|
|
} |