sid/css/header.css

252 lines
5.0 KiB
CSS
Executable File

/*
*
* Gestion complète du HEADER
* -------------------------------------
* 1. icon
* 2. connection/inscription
* 3. mot de passe perdu
* 4. ...
*
*/
/* icônes de notifications */
#HEADER .notifbar{
/* position */
display: flex;
/* flex */
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
#HEADER .notifbar div{
/* position */
display: block;
width: 3em;
margin: 0 .1em;
/* background */
background: transparent url(../src/header/notifbar/member.svg) center center no-repeat;
background-size: 40% auto;
cursor: default;
}
#HEADER .notifbar .member { background-image: url(../src/header/notifbar/member.svg); }
#HEADER .notifbar .message { background-image: url(../src/header/notifbar/message.svg); }
#HEADER .notifbar .notification{ background-image: url(../src/header/notifbar/notification.svg); }
/* Gestion du hover sur les notifications */
#HEADER .notifbar .member:hover { background-image: url(../src/header/notifbar/member@hover.svg); }
#HEADER .notifbar .message:hover { background-image: url(../src/header/notifbar/message@hover.svg); }
#HEADER .notifbar .notification:hover{ background-image: url(../src/header/notifbar/notification@hover.svg); }
/* affichage du nombre de notifications */
#HEADER .notifbar div[data-num]::after{
content: attr(data-num);
/* position */
display: block;
position: relative;
top: 1.6em;
left: 2.5em;
width: 1em;
height: 1em;
padding: .35em;
/* border */
border-radius: 100% / 100%;
/* background */
background-color: #da5439;
/* foreground */
color: #fff;
font-size: 11px;
text-align: center;
line-height: 1em;
}
#HEADER .notifbar div[data-num='']::after{ content: '0'; }
/* BOUTON POUR LA DÉCONNECTION */
#HEADER .notifbar #LOGOUT{
/* position */
display: block;
margin-top: calc( 5em/2 - 2.5em/2 - 2px ); /* hauteur/2 - hauteur_bouton/2 - border_bouton/2 */
margin-left: calc( 5em/2 - 2.5em/2 - 2px ); /* hauteur/2 - hauteur_bouton/2 - border_bouton/2 */
width: calc( 2.5em - 2*2px );
height: calc( 2.5em - 2*2px );
/* border */
border-radius: 100% / 100%;
border: 2px solid #2dcc70;
/* background */
background: transparent url(../src/header/logout.svg) center center no-repeat;
background-size: 70% auto;
/* animation */
transition: all .1s ease-in-out, background-size 0s;
-moz-transition: all .1s ease-in-out, background-size 0s;
-webkit-transition: all 0s;
-ms-transition: all .1s ease-in-out, background-size 0s;
-o-transition: all .1s ease-in-out, background-size 0s;
/* extra */
cursor: pointer;
/* Z */
z-index: 1;
}
/* TEXTE INFO */
#HEADER .notifbar #LOGOUT[data-info]:after{
content: attr(data-info);
/* position */
/*display: block;*/ display: none;
position: absolute;
top: 1.5em;
left: 4em;
padding: .3em;
/* border */
border-radius: 3px;
/* background */
background-color: #233342;
/* foreground */
color: #fff;
}
/* BOUTON SURVOL */
#HEADER .notifbar #LOGOUT:hover{
background-color: #2dcc70;
background-image: url(../src/header/logout@hover.svg);
}
/* INFO SURVOL */
#HEADER .notifbar #LOGOUT[data-info]:hover:after{
display: block;
}
/* logo AGAC */
#HEADER .icon{
/* position */
display: block;
width: 5em; /* pour faire un carré */
background: transparent url(../src/header/icon.svg) center center no-repeat;
background-size: 40%;
}
/* barre de recherche */
#HEADER .searchbar{
/* position */
display: block;
position: relative;
margin-top: 1.5em;
margin-right: 2em;
width: 20em;
height: 2.5em;
padding: .2em;
padding-right: 3em;
/* border */
border: 0;
/* background */
background: transparent url(../src/header/search.svg) right 1em center no-repeat;
background-size: 1em auto;
/* foreground */
color: #395873;
line-height: 2.5em;
/* animation */
transition: background-position 0s, all .2s ease-in-out;
-moz-transition: background-position 0s, all .2s ease-in-out;
-webkit-transition: all 0s;
-ms-transition: background-position 0s, all .2s ease-in-out;
-o-transition: background-position 0s, all .2s ease-in-out;
}
#HEADER .searchbar:focus{
background-image: url(../src/header/search@hover.svg);
color: #17232f;
}
/******** SUBHEADER ********/
#SUBHEADER nav{
/* position */
display: flex;
position: absolute;
top: calc( 100% - 2em );
left: 0;
width: 100%;
height: 2em;
/* flex */
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
/* foreground */
font-size: .9em;
font-weight: bold;
text-transform: uppercase;
/* extra */
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}
#SUBHEADER nav > span{
/* position */
margin-left: 3em;
/* border */
border-bottom: 3px solid #fff;
/* animation */
transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
/* extra */
cursor: pointer;
}
#SUBHEADER nav > span:hover,
#SUBHEADER nav > span.active{
border-bottom-color: #2cab5f;
}