sid/css/layout.css

307 lines
4.7 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%;
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';
}
#DRAGNDROP{
/* position */
/*display: block;*/ display: none;
position: fixed;
width: 10px;
height: 10px;
/* border */
border-radius: 100% / 100%;
/* Z */
z-index: 100;
}
#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: 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 #d2d3d5;
/* background */
background-color: #fff;
/* 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;
}
#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]: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;
}