46 lines
16 KiB
CSS
46 lines
16 KiB
CSS
|
/* [1] COULEURS
|
||
|
|
=========================================================*/
|
||
|
|
/* (1) COULEURS DU THEME $DEFAULT */
|
||
|
|
/* (2) COULEURS DE THEME $DARK */
|
||
|
|
/* [2] DIMENSIONS
|
||
|
|
=========================================================*/
|
||
|
|
/* (1) Layout de base */
|
||
|
|
#WRAPPER > #CONTAINER { /* [1] Section (contenu) =========================================================*/ }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section { display: none; position: relative; flex-grow: 1; padding: 1em; border-radius: 3px; background-color: #fff; color: #000; font-size: 1em; border: 1px solid #ddd; /* [2] Titres =========================================================*/ /* [3][4] Boutons radio + Checkboxes =========================================================*/ /* [5] Boutons de submit =========================================================*/ /* [6] Images inline =========================================================*/ /* [7] Contour flags =========================================================*/ }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section.active { display: block; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section.charts { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section h6 { color: #848484; font-size: 1.2em; text-transform: uppercase; font-weight: 300; letter-spacing: .2em; margin: 0; padding: 0; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section h6:before { content: '- '; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section h6:after { content: ' -'; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section h6.center { text-align: center; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section input[type="radio"], #WRAPPER > #CONTAINER > section input[type="checkbox"] { display: none; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section input[type="radio"] + label[for], #WRAPPER > #CONTAINER > section input[type="checkbox"] + label[for] { padding-left: .8em; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ user-select: none; /* non-prefixed */ }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section input[type="radio"] + label[for]:before, #WRAPPER > #CONTAINER > section input[type="checkbox"] + label[for]:before { content: ''; display: inline-block; position: relative; top: .1em; left: -.8em; width: calc( 1em - 2*.15em); height: calc( 1em - 2*.15em); border-radius: 50% / 50%; border: 0.15em solid #399ced; background: #fff center center no-repeat; background-image: none; background-size: 70% auto; transition: background .2s ease-in-out; cursor: pointer; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section input[type="radio"]:checked + label[for]:before, #WRAPPER > #CONTAINER > section input[type="checkbox"]:checked + label[for]:before { background-color: #399ced; background-image: url("/f/svg/checked/st/container"); }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section input[type="checkbox"] + label[for]:before { border-radius: 3px; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section input[type="submit"], #WRAPPER > #CONTAINER > section input[type="button"] { margin: .5em 0; padding: .3em .5em; border-radius: 3px; border: 1px solid #515151; color: #515151; background-color: #fff; transition: background .1s ease-in-out, color .1s ease-in-out; /* (1) Animation de @hover */ /* (2) Bouton primaire */ }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section input[type="submit"]:hover, #WRAPPER > #CONTAINER > section input[type="button"]:hover { background-color: #515151; color: #fff; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section input[type="submit"].primary, #WRAPPER > #CONTAINER > section input[type="button"].primary { border-color: #399ced; color: #399ced; background-color: #fff; /* (3) Animation de @hover pour bouton primaire */ }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section input[type="submit"].primary:hover, #WRAPPER > #CONTAINER > section input[type="button"].primary:hover { background-color: #399ced; color: #fff; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section img { margin: 1em; height: 3em; }
|
||
|
|
|
||
|
|
#WRAPPER > #CONTAINER > section .flag { margin: 0 .8em; padding: .2em .8em; border-radius: 5px; border: 1px solid #b5b5b5; color: #555; font-family: 'Inconsolata'; }
|
||
|
|
|
||
|
|
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiY29tcGFjdC5jc3MiLAoJInNvdXJjZXMiOiBbCgkJIi4uL2NvbnRhaW5lci5zY3NzIiwKCQkiLi4vY29uc3RhbnRzLnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSJAaW1wb3J0ICdjb25zdGFudHMuc2Nzcyc7XG5cbiNXUkFQUEVSID4gI0NPTlRBSU5FUntcblxuXHQvKiBbMV0gU2VjdGlvbiAoY29udGVudSlcblx0PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ki9cblx0JiA+IHNlY3Rpb257XG5cdFx0ZGlzcGxheTogbm9uZTtcblxuXHRcdC8vIEdlc3Rpb24gZGUgbCdhY3RpdmF0aW9uIGRlcyBzb3VzLXBhcnRpZXNcblx0XHQmLmFjdGl2ZXsgZGlzcGxheTogYmxvY2s7IH1cblxuXHRcdC8vIEdlc3Rpb24gZCd1bmUgc2VjdGlvbiBjb250ZW5hbnQgZGVzIGdyYXBoaXF1ZXNcblx0XHQmLmNoYXJ0c3tcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cblx0XHRcdGZsZXgtZGlyZWN0aW9uOiByb3c7XG5cdFx0XHRmbGV4LXdyYXA6IHdyYXA7XG5cdFx0XHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDtcblx0XHR9XG5cblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0ZmxleC1ncm93OiAxO1xuXG5cdFx0cGFkZGluZzogMWVtO1xuXG5cdFx0Ym9yZGVyLXJhZGl1czogM3B4O1xuXG5cdFx0YmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcblxuXHRcdGNvbG9yOiAjMDAwO1xuXHRcdGZvbnQtc2l6ZTogMWVtO1xuXG5cdFx0Ym9yZGVyOiAxcHggc29saWQgI2RkZDtcblxuXG5cblx0XHQvKiBbMl0gVGl0cmVzXG5cdFx0PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ki9cblx0XHQmIGg2e1xuXHRcdFx0Y29sb3I6IGxpZ2h0ZW4oJHRoZW1lLWZnLCAyMCk7XG5cdFx0XHRmb250LXNpemU6IDEuMmVtO1xuXHRcdFx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0XHRcdGZvbnQtd2VpZ2h0OiAzMDA7XG5cdFx0XHRsZXR0ZXItc3BhY2luZzogLjJlbTtcblxuXHRcdFx0bWFyZ2luOiAwO1xuXHRcdFx0cGFkZGluZzogMDtcblxuXHRcdFx0JjpiZWZvcmV7Y29udGVudDonLSAnO31cblx0XHRcdCY6YWZ0ZXJ7Y29udGVudDonIC0nO31cblxuXHRcdFx0Ly8gcXVhbmQgY2VudHLDqVxuXHRcdFx0Ji5jZW50ZXJ7XG5cdFx0XHRcdHRleHQtYWxpZ246IGNlbnRlcjtcblx0XHRcdH1cblx0XHR9XG5cblxuXG5cblxuXHRcdC8qIFszXVs0XSBCb3V0b25zIHJhZGlvICsgQ2hlY2tib3hlc1xuXHRcdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG5cdFx0JiBpbnB1dFt0eXBlPVwicmFkaW9cIl0sXG5cdFx0JiBpbnB1dFt0eXBlPVwiY2hlY2tib3hcIl17XG5cdFx0XHRkaXNwbGF5OiBub25lO1xuXHRcdH1cblxuXHRcdC8vIExhYmVsXG5cdFx0JiBpbnB1dFt0eXBlPVwicmFkaW9cIl0gKyBsYWJlbFtmb3JdLFxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdICsgbGFiZWxbZm9yXXtcblx0XHRcdHBhZGRpbmctbGVmdDogLjhlbTtcblxuXHRcdFx0Ly8gUGFzIGRlIHNlbGVjdGlvblxuXHRcdFx0LXdlYmtpdC10b3VjaC1jYWxsb3V0OiBub25lOyAvKiBpT1MgU2FmYXJpICAgICAgICAgICovXG5cdFx0XHQtd2Via2l0LXVzZXItc2VsZWN0OiAgIG5vbmU7IC8qIENocm9tZS9TYWZhcmkvT3BlcmEgKi9cblx0XHRcdC1raHRtbC11c2VyLXNlbGVjdDogICAgbm9uZTsgLyogS29ucXVlcm9yICAgICAgICAgICAqL1xuXHRcdFx0LW1vei11c2VyLXNlbGVjdDogICAgICBub25lOyAvKiBGaXJlZm94ICAgICAgICAgICAgICovXG5cdFx0XHQtbXMtdXNlci1zZWxlY3Q6ICAgICAgIG5vbmU7IC8qIElFL0VkZ2UgICAgICAgICAgICAgKi9cblx0XHRcdHVzZXItc2VsZWN0OiAgICAgICAgICAgbm9uZTsgLyogbm9uLXByZWZpeGVkICAgICAgICAqL1xuXG5cblx0XHRcdC8vIFJlY2VwdGFjbGVcblx0XHRcdCY6YmVmb3Jle1xuXHRcdFx0XHRjb250ZW50OiAnJztcblx0XHRcdFx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRcdFx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0XHRcdFx0dG9wOiAuMWVtO1xuXHRcdFx0XHRcdGxlZnQ6IC0uOGVtO1xuXHRcdFx0XHRcdHdpZHRoOiBjYWxjKCAxZW0gLSAyKi4xNWVtICk7XG5cdFx0XHRcdFx0aGVpZ2h0OiBjYWxjKCAxZW0gLSAyKi4xNWVtICk7XG5cblx0XHRcdFx0Ym9yZGVyLXJhZGl1czogNTAlIC8gNTAlO1xuXHRcdFx0XHRib3JkZXI6IC4xNWVtIHNvbGlkICR0aGVtZS1mZy1wcmltYXJ5O1xuXG5cdFx0XHRcdGJhY2tncm91bmQ6ICNmZmYgY2VudGVyIGNlbnRlciBuby1yZXBlYXQ7XG5cdFx0XHRcdGJhY2tncm91bmQtaW1hZ2U6IG5vbmU7XG5cdFx0XHRcdGJhY2tncm91bmQtc2l6ZTogNzAlIGF1dG87XG5cblx0XHRcdFx0dHJhbnNpdGlvbjogYmFja2dyb3VuZCAuMnMgZWFzZS1pbi1vdXQ7XG5cblx0XHRcdFx0Y3Vyc29yOiBwb2ludGVyO1xuXHRcdFx0fVxuXHRcdH1cblxuXHRcdC8vIFF1YW5kIGFjdGlmXG5cdFx0JiBpbnB1dFt0eXBlPVwicmFkaW9cIl06Y2hlY2tlZCArIGxhYmVsW2Zvcl06YmVmb3JlLFxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdOmNoZWNrZWQgKyBsYWJlbFtmb3JdOmJlZm9yZXtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR0aGVtZS1mZy1wcmltYXJ5O1xuXHRcdFx0YmFja2dyb3VuZC1pbWFnZTogdXJsKCcvZi9zdmcvY2hlY2tlZC9zdC9jb250YWluZXInKTtcblx0XHR9XG5cblxuXHRcdC8vIFNwZWNpZmlxdWUgYSBjaGVja2JveFxuXHRcdCYgaW5wdXRbdHlwZT1cImNoZWNrYm94XCJdICsgbGFiZWxbZm9yXTpiZWZvcmV7XG5cdFx0XHRib3JkZXItcmFkaXVzOiAzcHg7XG5cdFx0fVxuXG5cblxuXG5cblx0XHQvKiBbNV0gQm91dG9ucyBkZSBzdWJtaXRcblx0XHQ9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0qL1xuXHRcdCYgaW5wdXRbdHlwZT1cInN1Ym1pdFwiXSxcb
|