NxTIC/css/header/compact.css

/* [1] COULEURS
=========================================================*/
/* (1) COULEURS DU THEME $DEFAULT */
/* (2) COULEURS DE THEME $DARK */
/* (3) Couleurs du theme pour la timeline */
/* [2] DIMENSIONS
=========================================================*/
/* (1) Layout de base */
/* [3] Mixins
=========================================================*/
/* [4] Functions
=========================================================*/
#WRAPPER > #HEADER { /* [1] Barre de recherche =========================================================*/ /* [2] Informations utilisateur =========================================================*/ /* (0) Conteneur */ /* [3] Menu deroulant pour l'administration du profil =========================================================*/ /* (3) Gestion de l'activation ou non de l'user panel */ }

#WRAPPER > #HEADER > #searchbar { display: inline-block; position: absolute; top: .8em; left: 1em; width: 20em; height: 2em; padding: .2em 1em; border: 0; border-radius: 3px; background-color: #e8e8e8; }

#WRAPPER > #HEADER > #user-data { display: inline-block; position: absolute; top: 0; right: 0; height: calc( 100% - 2*1em); /* (1) Username de l'utilisateur */ /* (2) Image du profil */ /* (3) Icone d'activation */ }

#WRAPPER > #HEADER > #user-data > #user-name { display: block; position: absolute; top: 0; right: calc( 4em*2 - 1em); height: 4em; padding: 0 1em; color: #fff; line-height: 4em; white-space: nowrap; font-weight: bold; cursor: pointer; }

#WRAPPER > #HEADER > #user-data > #user-picture { display: block; position: absolute; top: 1em; right: 4em; width: calc( 4em - 2*1em); height: calc( 4em - 2*1em); border-radius: 50% / 50%; background: #e8e8e8 url("/f/svg/nopic/st/header") center center no-repeat; background-size: auto 80%; cursor: default; align-self: center; }

#WRAPPER > #HEADER > #user-data > #user-picture.active { background-image: url("/f/svg/sample/dy/profile"); background-size: auto 100%; }

#WRAPPER > #HEADER > #user-data:before { content: ''; display: block; position: absolute; top: 0; right: 0; width: 4em; height: 4em; background: url("/f/svg/expand/st/header/ffffff") center center no-repeat; background-size: 1em 1em; cursor: pointer; }

#WRAPPER > #HEADER > .user-panel { display: block; position: absolute; top: calc( 4em - 1em); right: 0; margin: .5em; border-radius: 5px; border: 1px solid #cfcfcf; background-color: #fff; -webkit-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; /* (1) Pour chaque element du menu */ }

#WRAPPER > #HEADER > .user-panel > span { display: block; position: relative; color: #000; padding: .5em 1em; padding-left: 2em; cursor: pointer; }

#WRAPPER > #HEADER > .user-panel > span:not(:last-child) { border-bottom: 1px solid #ddd; }

#WRAPPER > #HEADER > .user-panel > span:hover { background-color: #eee; }

#WRAPPER > #HEADER > #toggle-user-panel { display: none; }

#WRAPPER > #HEADER > #toggle-user-panel + .user-panel { left: 100%; }

#WRAPPER > #HEADER > #toggle-user-panel:checked + .user-panel { left: auto; }

#WRAPPER > #HEADER > #toggle-user-panel:checked + .user-panel:before { left: 7em; }

/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiY29tcGFjdC5jc3MiLAoJInNvdXJjZXMiOiBbCgkJIi4uL2hlYWRlci5zY3NzIiwKCQkiLi4vY29uc3RhbnRzLnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSJAaW1wb3J0ICdjb25zdGFudHMnO1xuXG5cbiNXUkFQUEVSID4gI0hFQURFUntcblxuXHQvKiBbMV0gQmFycmUgZGUgcmVjaGVyY2hlXG5cdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG5cdCYgPiAjc2VhcmNoYmFye1xuXHRcdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHR0b3A6IC44ZW07XG5cdFx0XHRsZWZ0OiAxZW07XG5cdFx0XHR3aWR0aDogMjBlbTtcblx0XHRcdGhlaWdodDogMmVtO1xuXG5cdFx0cGFkZGluZzogLjJlbSAxZW07XG5cblx0XHRib3JkZXI6IDA7XG5cdFx0Ym9yZGVyLXJhZGl1czogM3B4O1xuXG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHRoZW1lLWJnO1xuXG5cdH1cblxuXHQvKiBbMl0gSW5mb3JtYXRpb25zIHV0aWxpc2F0ZXVyXG5cdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG5cdC8qICgwKSBDb250ZW5ldXIgKi9cblx0JiA+ICN1c2VyLWRhdGF7XG5cdFx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRcdHRvcDogMDtcblx0XHRcdHJpZ2h0OiAwO1xuXHRcdFx0aGVpZ2h0OiBjYWxjKCAxMDAlIC0gMioxZW0gKTtcblxuXG5cdFx0LyogKDEpIFVzZXJuYW1lIGRlIGwndXRpbGlzYXRldXIgKi9cblx0XHQmID4gI3VzZXItbmFtZXtcblx0ICAgIFx0ZGlzcGxheTogYmxvY2s7XG5cdCAgICBcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0ICAgIFx0XHR0b3A6IDA7XG5cdCAgICBcdFx0cmlnaHQ6IGNhbGMoICN7JGhlYWRlci1oZWlnaHR9KjIgLSAxZW0gKTtcblx0ICAgIFx0XHRoZWlnaHQ6ICRoZWFkZXItaGVpZ2h0O1xuXG5cdCAgICBcdHBhZGRpbmc6IDAgMWVtO1xuXG5cdFx0XHRjb2xvcjogI2ZmZjtcblx0XHRcdGxpbmUtaGVpZ2h0OiAkaGVhZGVyLWhlaWdodDtcblx0XHRcdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdFx0XHRmb250LXdlaWdodDogYm9sZDtcblxuXHRcdFx0Y3Vyc29yOiBwb2ludGVyO1xuXG5cdFx0fVxuXG5cblx0XHQvKiAoMikgSW1hZ2UgZHUgcHJvZmlsICovXG5cdFx0JiA+ICN1c2VyLXBpY3R1cmV7XG5cdFx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRcdFx0dG9wOiAxZW07XG5cdFx0XHRcdHJpZ2h0OiAkaGVhZGVyLWhlaWdodDtcblx0XHRcdFx0d2lkdGg6IGNhbGMoICN7JGhlYWRlci1oZWlnaHR9IC0gMioxZW0gKTtcblx0XHRcdFx0aGVpZ2h0OiBjYWxjKCAjeyRoZWFkZXItaGVpZ2h0fSAtIDIqMWVtICk7XG5cblxuXHRcdFx0Ym9yZGVyLXJhZGl1czogNTAlIC8gNTAlO1xuXG5cdFx0XHRiYWNrZ3JvdW5kOiAkdGhlbWUtYmcgdXJsKCcvZi9zdmcvbm9waWMvc3QvaGVhZGVyJykgY2VudGVyIGNlbnRlciBuby1yZXBlYXQ7XG5cdFx0XHRiYWNrZ3JvdW5kLXNpemU6IGF1dG8gODAlO1xuXG5cdFx0XHQvLyBTaSBvbiBlc3QgY29ubmVjdGVcblx0XHRcdCYuYWN0aXZleyBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJy9mL3N2Zy9zYW1wbGUvZHkvcHJvZmlsZScpOyBiYWNrZ3JvdW5kLXNpemU6IGF1dG8gMTAwJTsgfVxuXG5cdFx0XHRjdXJzb3I6IGRlZmF1bHQ7XG5cblx0XHRcdGFsaWduLXNlbGY6IGNlbnRlcjtcblx0XHR9XG5cblxuXG5cdFx0LyogKDMpIEljb25lIGQnYWN0aXZhdGlvbiAqL1xuXHRcdCY6YmVmb3Jle1xuXHRcdFx0Y29udGVudDogJyc7XG5cdFx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRcdFx0dG9wOiAwO1xuXHRcdFx0XHRyaWdodDogMDtcblx0XHRcdFx0d2lkdGg6ICRoZWFkZXItaGVpZ2h0O1xuXHRcdFx0XHRoZWlnaHQ6ICRoZWFkZXItaGVpZ2h0O1xuXG5cdFx0XHRiYWNrZ3JvdW5kOiB1cmwoJy9mL3N2Zy9leHBhbmQvc3QvaGVhZGVyL2ZmZmZmZicpIGNlbnRlciBjZW50ZXIgbm8tcmVwZWF0O1xuXHRcdFx0YmFja2dyb3VuZC1zaXplOiAxZW0gMWVtO1xuXG5cdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cblx0XHR9XG5cblxuXHR9XG5cblxuXG5cdC8qIFszXSBNZW51IGRlcm91bGFudCBwb3VyIGwnYWRtaW5pc3RyYXRpb24gZHUgcHJvZmlsXG5cdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG5cdCYgPiAudXNlci1wYW5lbHtcbiAgICBcdGRpc3BsYXk6IGJsb2NrO1xuICAgIFx0cG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBcdHRvcDogY2FsYyggI3skaGVhZGVyLWhlaWdodH0gLSAxZW0gKTtcbiAgICAgICAgXHRyaWdodDogMDtcblxuICAgICAgICBtYXJnaW46IC41ZW07XG5cblx0XHRib3JkZXItcmFkaXVzOiA1cHg7XG5cdFx0Ym9yZGVyOiAxcHggc29saWQgZGFya2VuKCR0aGVtZS1iZywgMTApO1xuXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG5cbiAgICAgICAgQGluY2x1ZGUgdHJhbnNpdGlvbiggbGVmdCAuM3MgZWFzZS1pbi1vdXQgKTtcblxuXG4gICAgICAgIC8qICgxKSBQb3VyIGNoYXF1ZSBlbGVtZW50IGR1IG1lbnUgKi9cbiAgICAgICAgJiA+IHNwYW57XG4gICAgICAgIFx0ZGlzcGxheTogYmxvY2s7XG4gICAgICAgIFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdFx0XHQvLyBPbiBham91dGUgdW5lIGxpZ25lIGVuIGRlc3NvdXMgc2F1ZiBwb3VyIGxlIGRlcm5pZXJcblx0XHRcdCY6bm90KDpsYXN0LWNoaWxkKXtcblx0XHRcdFx0Ym9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNkZGQ7XG5cdFx0XHR9XG5cblx0XHRcdGNvbG9yOiAjMDAwO1xuXHRcdFx0cGFkZGluZzogLjVlbSAxZW07XG5cdFx0XHRwYWRkaW5nLWxlZnQ6IDJlbTtcblxuXHRcdFx0Y3Vyc29yOiBwb2ludGVyO1xuXG5cdFx0XHQvLyBAaG92ZXJcblx0X