sid/css/layout.css

291 lines
4.5 KiB
CSS
Raw Normal View History

/*
*
* Positionnement global et mise en page
* -------------------------------------
* 1. Propriétés globales
2015-10-20 20:10:38 +00:00
* 2. HEADER
* 3. MENU
* 4. AUTH(entification)
* 5. CONTAINER
* 6. msgBox
*
*/
/******************************/
/*** 1. Propriétés globales ***/
/******************************/
*{ /* on supprime le margin/padding par défaut */
2015-10-20 20:10:38 +00:00
margin: 0;
padding: 0;
}
2015-10-20 20:10:38 +00:00
a{ text-decoration: none; color: inherit; }
/* on initialise le body avec les valeurs par défaut [compatibilité] */
body{
/* position */
display: block;
position: absolute;
2015-10-20 20:10:38 +00:00
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background */
2015-10-21 08:53:45 +00:00
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';
}
2015-10-21 08:53:45 +00:00
#WRAPPER{
2015-10-20 20:10:38 +00:00
/* position */
display: block;
position: absolute;
width: calc( 100% - 2*50px );
min-height: calc( 100% - 2*50px );
margin: 50px;
/* border */
2015-10-21 08:53:45 +00:00
box-shadow: 0 0 5px #777;
/* background */
background-color: #ecf0f1;
/* scroll */
overflow: hidden;
}
2015-10-21 11:22:34 +00:00
#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;
2015-10-21 11:35:59 +00:00
/* extra */
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
2015-10-21 11:22:34 +00:00
}
2015-10-21 08:53:45 +00:00
#HEADER{
/* position */
2015-10-21 11:22:34 +00:00
display: flex;
2015-10-21 08:53:45 +00:00
position: absolute;
top: 0;
2015-10-21 11:22:34 +00:00
left: 14em;
width: calc( 100% - 14em );
2015-10-21 08:53:45 +00:00
height: 5em;
2015-10-21 11:22:34 +00:00
/* flex */
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
2015-10-21 08:53:45 +00:00
/* border */
border-bottom: 1px solid #e5e5e5;
2015-10-21 08:53:45 +00:00
/* background */
background-color: #fff;
2015-10-21 08:53:45 +00:00
/* Z */
z-index: 9;
}
2015-10-21 08:53:45 +00:00
#SUBHEADER{
/* position */
display: block;
2015-10-21 11:22:34 +00:00
position: relative;
margin-top: 5em;
margin-left: 14em;
width: calc( 100% - 14em );
2015-10-21 08:53:45 +00:00
height: 10em;
/* border */
border-bottom: 1px solid #d2d3d5;
2015-10-21 08:53:45 +00:00
/* background */
background-color: #fff;
2015-10-20 20:10:38 +00:00
2015-10-21 08:53:45 +00:00
/* Z */
z-index: 8;
}
2015-10-20 20:10:38 +00:00
2015-10-21 08:53:45 +00:00
#CONTAINER{
/* position */
display: block;
position: relative;
2015-10-21 11:22:34 +00:00
margin-left: 14em;
width: calc( 100% - 14em );
2015-10-21 08:53:45 +00:00
min-height: calc( 100% - 5em );
2015-10-21 08:53:45 +00:00
/* background */
background-color: #ecf0f1;
2015-10-20 20:10:38 +00:00
2015-10-21 08:53:45 +00:00
/* 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;
}