38 lines
11 KiB
CSS
38 lines
11 KiB
CSS
|
/* [1] COULEURS
|
||
|
|
=========================================================*/
|
||
|
|
/* (1) COULEURS DU THEME $DEFAULT */
|
||
|
|
/* (2) COULEURS DE THEME $DARK */
|
||
|
|
/* [2] DIMENSIONS
|
||
|
|
=========================================================*/
|
||
|
|
/* (1) Layout de base */
|
||
|
|
#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; transition: left .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+ICN1c2VyLXBpY3R1cmV7XG5cdFx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRcdFx0dG9wOiAxZW07XG5cdFx0XHRcdHJpZ2h0OiAkaGVhZGVyLWhlaWdodDtcblx0XHRcdFx0d2lkdGg6IGNhbGMoICN7JGhlYWRlci1oZWlnaHR9IC0gMioxZW0gKTtcblx0XHRcdFx0aGVpZ2h0OiBjYWxjKCAjeyRoZWFkZXItaGVpZ2h0fSAtIDIqMWVtICk7XG5cblxuXHRcdFx0Ym9yZGVyLXJhZGl1czogNTAlIC8gNTAlO1xuXG5cdFx0XHRiYWNrZ3JvdW5kOiAkdGhlbWUtYmcgdXJsKCcvZi9zdmcvbm9waWMvc3QvaGVhZGVyJykgY2VudGVyIGNlbnRlciBuby1yZXBlYXQ7XG5cdFx0XHRiYWNrZ3JvdW5kLXNpemU6IGF1dG8gODAlO1xuXG5cdFx0XHQvLyBTaSBvbiBlc3QgY29ubmVjdGVcblx0XHRcdCYuYWN0aXZleyBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJy9mL3N2Zy9zYW1wbGUvZHkvcHJvZmlsZScpOyBiYWNrZ3JvdW5kLXNpemU6IGF1dG8gMTAwJTsgfVxuXG5cdFx0XHRjdXJzb3I6IGRlZmF1bHQ7XG5cblx0XHRcdGFsaWduLXNlbGY6IGNlbnRlcjtcblx0XHR9XG5cblxuXG5cdFx0LyogKDMpIEljb25lIGQnYWN0aXZhdGlvbiAqL1xuXHRcdCY6YmVmb3Jle1xuXHRcdFx0Y29udGVudDogJyc7XG5cdFx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHRcdFx0dG9wOiAwO1xuXHRcdFx0XHRyaWdodDogMDtcblx0XHRcdFx0d2lkdGg6ICRoZWFkZXItaGVpZ2h0O1xuXHRcdFx0XHRoZWlnaHQ6ICRoZWFkZXItaGVpZ2h0O1xuXG5cdFx0XHRiYWNrZ3JvdW5kOiB1cmwoJy9mL3N2Zy9leHBhbmQvc3QvaGVhZGVyL2ZmZmZmZicpIGNlbnRlciBjZW50ZXIgbm8tcmVwZWF0O1xuXHRcdFx0YmFja2dyb3VuZC1zaXplOiAxZW0gMWVtO1xuXG5cdFx0XHRjdXJzb3I6IHBvaW50ZXI7XG5cblx0XHR9XG5cblxuXHR9XG5cblxuXG5cdC8qIFszXSBNZW51IGRlcm91bGFudCBwb3VyIGwnYWRtaW5pc3RyYXRpb24gZHUgcHJvZmlsXG5cdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG5cdCYgPiAudXNlci1wYW5lbHtcbiAgICBcdGRpc3BsYXk6IGJsb2NrO1xuICAgIFx0cG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBcdHRvcDogY2FsYyggI3skaGVhZGVyLWhlaWdodH0gLSAxZW0gKTtcbiAgICAgICAgXHRyaWdodDogMDtcblxuICAgICAgICBtYXJnaW46IC41ZW07XG5cblx0XHRib3JkZXItcmFkaXVzOiA1cHg7XG5cdFx0Ym9yZGVyOiAxcHggc29saWQgZGFya2VuKCR0aGVtZS1iZywgMTApO1xuXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG5cbiAgICAgICAgdHJhbnNpdGlvbjogbGVmdCAuM3MgZWFzZS1pbi1vdXQ7XG5cblxuICAgICAgICAvKiAoMSkgUG91ciBjaGFxdWUgZWxlbWVudCBkdSBtZW51ICovXG4gICAgICAgICYgPiBzcGFue1xuICAgICAgICBcdGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRcdFx0Ly8gT24gYWpvdXRlIHVuZSBsaWduZSBlbiBkZXNzb3VzIHNhdWYgcG91ciBsZSBkZXJuaWVyXG5cdFx0XHQmOm5vdCg6bGFzdC1jaGlsZCl7XG5cdFx0XHRcdGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZGRkO1xuXHRcdFx0fVxuXG5cdFx0XHRjb2xvcjogIzAwMDtcblx0XHRcdHBhZGRpbmc6IC41ZW0gMWVtO1xuXHRcdFx0cGFkZGluZy1sZWZ0OiAyZW07XG5cblx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblxuXHRcdFx0Ly8gQGhvdmVyXG5cdFx0XHQmOmhvdmVye
|