diff --git a/css/container.css b/css/container.css index 78b9a20..0ab8207 100755 --- a/css/container.css +++ b/css/container.css @@ -1,11 +1,12 @@ #CONTAINER section{ /* position */ display: block; - position: relative; + position: absolute; top: 0; left: 0; width: 100%; - /*min-height: calc( 100vh - 5em );*/ + min-height: calc( 100vh - 5em ); + height: auto; padding: 2em; /* background */ diff --git a/css/header.css b/css/header.css index 4a52993..802c8f8 100755 --- a/css/header.css +++ b/css/header.css @@ -71,6 +71,77 @@ #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 #28B965; + + /* 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: #28B965; + background-image: url(../src/header/logout@hover.svg); +} + +/* INFO SURVOL */ +#HEADER .notifbar #LOGOUT[data-info]:hover:after{ + display: block; +} + + + + + + + + /* logo AGAC */ #HEADER .icon{ /* position */ @@ -178,44 +249,4 @@ #SUBHEADER nav > span:hover, #SUBHEADER nav > span.active{ border-bottom-color: #2cab5f; -} - - - -/* BOUTON POUR LA DÉCONNECTION */ -#SUBHEADER #LOGOUT{ - /* position */ - /*display: block;*/ display: none; - position: absolute; - top: 10px; - left: calc( 100% - 2.5em - 10px ); - width: calc( 2.5em - 2*2px ); - height: calc( 2.5em - 2*2px ); - - /* border */ - border-radius: 100% / 100%; - border: 2px solid #ccc; - - /* 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; -} - -/* BOUTON ACTIVÉ */ -#SUBHEADER #LOGOUT.active{ display: block; } - -/* BOUTON SURVOL */ -#SUBHEADER #LOGOUT:hover{ - border-color: #28B965; - background-image: url(../src/header/logout@hover.svg); } \ No newline at end of file diff --git a/css/menu.css b/css/menu.css index 0213311..89bab2e 100755 --- a/css/menu.css +++ b/css/menu.css @@ -50,12 +50,6 @@ #MENU .userdata.F{ background-image: url(../src/menu/userdata/female.svg); } -/* quand on est connecté, afficher le bouton de déconnection */ -#MENU .userdata.M:hover, -#MENU .userdata.F:hover{ background-image: url(../src/menu/userdata/visitor.svg); } - - - diff --git a/index.php b/index.php index 4721e07..3833cdf 100755 --- a/index.php +++ b/index.php @@ -81,20 +81,36 @@ $notifNotifNum = 5;