189 lines
3.4 KiB
CSS
Executable File
189 lines
3.4 KiB
CSS
Executable File
/*
|
|
*
|
|
* Positionnement global et mise en page
|
|
* -------------------------------------
|
|
* 1. Propriétés globales
|
|
* 2. MENU
|
|
* 3. CONTAINER
|
|
* 4. msgBox
|
|
*
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/******************************/
|
|
/*** 1. Propriétés globales ***/
|
|
/******************************/
|
|
*{ /* on supprime le margin/padding par défaut */
|
|
margin : 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/* 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: 18px 'Lato', 'Helvetica', 'Arial', 'sans-serif';
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/***************/
|
|
/*** 2. MENU ***/
|
|
/***************/
|
|
#MENU{
|
|
/* position */
|
|
display: flex;
|
|
position: fixed;
|
|
top : 0;
|
|
left : 0;
|
|
width : 5.5em;
|
|
height: 100%;
|
|
|
|
/* flex */
|
|
flex-direction : column;
|
|
justify-content: flex-start;
|
|
flex-wrap: nowrap; /* default, une seule colonne */
|
|
|
|
|
|
/* background */
|
|
/*background: #424c54 url(https://www.iut-tlse3.fr/static/ui/v1/icons/iut/iut.png) bottom .9em center no-repeat;*/
|
|
background: #424c54;
|
|
|
|
/* foreground */
|
|
/*font-size: 1.7vh;*/
|
|
|
|
/* z axis */
|
|
z-index: 2;
|
|
|
|
/* list */
|
|
list-style-type: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/********************/
|
|
/*** 3. CONTAINER ***/
|
|
/********************/
|
|
#CONTAINER{
|
|
/* position */
|
|
display: block;
|
|
position: absolute;
|
|
top : 0;
|
|
left : 5.5em;
|
|
width : calc( 100% - 5.5em );
|
|
min-height: 100%;
|
|
|
|
/* background */
|
|
background: #fff;
|
|
|
|
/* foreground */
|
|
/*font-size: 1.7vh;*/
|
|
|
|
/* border < inherit < hgroup */
|
|
border-color: #fff;
|
|
|
|
/* z axis */
|
|
z-index: 0;
|
|
}
|
|
|
|
|
|
/*****************/
|
|
/*** 4. MSGBOX ***/
|
|
/*****************/
|
|
#MSGBOX{
|
|
/* position */
|
|
display: block;
|
|
position: fixed;
|
|
top: calc( 100% - 2*1em - 1em - 1em ); /* 100% - padding - taille - marge */
|
|
left: 30%;
|
|
width: 40%;
|
|
height: 1em;
|
|
padding: 1em;
|
|
|
|
/* border */
|
|
border-radius: 3px;
|
|
border: 1px solid transparent;
|
|
|
|
/* background */
|
|
background-color: #f64b2f;
|
|
|
|
/* foreground */
|
|
color: #fff;
|
|
text-shadow: 1px 1px 1px #d33e27;
|
|
line-height: 1em;
|
|
|
|
transition: all 0s ease 0s, top .3s ease-in-out;
|
|
-moz-transition: all 0s ease 0s, top .3s ease-in-out;
|
|
-webkit-transition: all 0s ease 0s, top .3s ease-in-out;
|
|
-ms-transition: all 0s ease 0s, top .3s ease-in-out;
|
|
-o-transition: all 0s ease 0s, top .3s ease-in-out;
|
|
}
|
|
|
|
/* LES DIFFERENTES CLASSES */
|
|
|
|
/* validation ou réussite */
|
|
#MSGBOX.success{
|
|
border-color: #689525;
|
|
background-color: #7eb62e;
|
|
text-shadow: 1px 1px 1px #689525;
|
|
}
|
|
|
|
/* information */
|
|
#MSGBOX.info{
|
|
border-color: #278fd0;
|
|
background-color: #2fa9f6;
|
|
text-shadow: 1px 1px 1px #278fd0;
|
|
}
|
|
|
|
/* avertissement */
|
|
#MSGBOX.warning{
|
|
border-color: #d87620;
|
|
background-color: #f68725;
|
|
text-shadow: 1px 1px 1px #d87620;
|
|
}
|
|
|
|
/* notice */
|
|
#MSGBOX.error{
|
|
border-color: #d33e27;
|
|
background-color: #f64b2f;
|
|
text-shadow: 1px 1px 1px #d33e27;
|
|
}
|
|
|
|
/* LORSQUE PAS ACTIVE */
|
|
#MSGBOX:not( [class] ), /* si n'a pas de classe */
|
|
#MSGBOX[class='']{ /* ou qu'elle est vide */
|
|
top: 100%;
|
|
|
|
transition: all 0s ease .3s, top .3s ease-in-out;
|
|
-moz-transition: all 0s ease .3s, top .3s ease-in-out;
|
|
-webkit-transition: all 0s ease .3s, top .3s ease-in-out;
|
|
-ms-transition: all 0s ease .3s, top .3s ease-in-out;
|
|
-o-transition: all 0s ease .3s, top .3s ease-in-out;
|
|
} |