2018-04-02 08:29:19 +02:00
/ * *
* This file is part of Zwii .
*
* For full copyright and license information , please see the LICENSE
* file that was distributed with this source code .
*
* @ author Rémi Jean < remi . jean @ outlook . com >
* @ copyright Copyright ( C ) 2008-2018 , Rémi Jean
* @ license GNU General Public License , version 3
2020-09-01 20:48:40 +02:00
* @ link http : / / zwiicms . fr /
2018-04-02 08:29:19 +02:00
* /
2019-02-24 19:11:01 +01:00
/ * *
* Police des icônes
* /
@ import url ( https : / / use . fontawesome . com / releases / v5 . 7 . 2 / css / all . css ) ;
2019-05-29 22:35:02 +02:00
2018-04-02 08:29:19 +02:00
/ * *
* Éléments génériques
* /
2020-06-16 18:44:26 +02:00
2018-04-02 08:29:19 +02:00
html ,
body {
2020-07-10 18:09:54 +02:00
min-height : 100 % ;
2018-04-02 08:29:19 +02:00
}
2019-02-28 14:50:49 +01:00
2019-03-18 14:12:42 +01:00
2020-02-04 10:17:56 +01:00
@ media ( min-width : 768px ) {
2019-05-29 22:35:02 +02:00
body {
2020-03-15 08:44:24 +01:00
/*margin:0px 10px;*/
margin : 0 ;
2019-05-29 22:35:02 +02:00
}
}
2019-03-18 14:12:42 +01:00
/ * *
* Petits écrans inférieurs à 768px de largeur , on supprime les marges
2020-06-16 18:44:26 +02:00
* /
2019-03-18 14:12:42 +01:00
@ media ( max-width : 768px ) {
body {
2019-06-01 19:07:54 +02:00
margin : 0px ;
2019-03-18 14:12:42 +01:00
}
# site {
2019-05-29 22:35:02 +02:00
margin : 0px auto ;
2019-05-02 13:21:48 +02:00
}
2019-05-29 22:35:02 +02:00
body > header {
margin : 0px 0px ;
2019-05-02 13:21:48 +02:00
}
2019-05-16 20:38:14 +02:00
. tippy-tooltip {
font-size : . 8rem ! important ;
}
2019-05-27 19:03:48 +02:00
section {
2019-05-29 22:35:02 +02:00
padding : 5px ;
2019-05-27 19:03:48 +02:00
}
2019-05-02 13:21:48 +02:00
}
2019-05-16 20:38:14 +02:00
2020-06-16 18:44:26 +02:00
@ media ( max-width : 768px ) {
2019-05-02 13:21:48 +02:00
. siteContainer {
display : flex ;
flex-direction : column ;
}
. siteContainer > # contentLeft {
2019-05-29 22:35:02 +02:00
order : 1 ;
2019-05-02 13:21:48 +02:00
}
. siteContainer > # contentRight {
order : 3 ;
}
. siteContainer > # contentSite {
2019-05-29 22:35:02 +02:00
order : 2 ;
2019-03-18 14:12:42 +01:00
}
}
2018-04-02 08:29:19 +02:00
2019-03-18 14:12:42 +01:00
2018-04-02 08:29:19 +02:00
/ * *
* Éléments spécifiques
* /
/* Liens */
a {
text-decoration : none ;
}
a : hover {
text-decoration : underline ;
}
2020-03-28 18:13:58 +01:00
/* Supprimer les pointillés lors d'un clic Firefox */
a : focus {
outline : none ;
}
a : active {
outline : none ;
}
2018-04-02 08:29:19 +02:00
/* Titres */
h1 {
font-size : 1 . 8em ;
}
h2 {
font-size : 1 . 6em ;
}
h3 {
font-size : 1 . 4em ;
}
h4 {
2018-11-13 18:33:22 +01:00
font-size : 1 . 0em ;
2018-04-02 08:29:19 +02:00
}
/* Listes */
ul {
list-style : square ;
}
li ul {
margin : 0 ;
}
2019-03-17 12:47:58 +01:00
option . inactive {
2019-03-18 16:14:27 +01:00
color : darkorange ;
2019-03-17 12:47:58 +01:00
}
2018-04-02 08:29:19 +02:00
/* Séparateur */
hr {
border : 0 ;
border-top : 1px solid # C5D1D4 ;
}
/* Égalisation des margins */
h1 ,
h2 ,
h3 ,
h4 ,
p ,
hr ,
ul ,
ol {
margin : 15px 0 ;
}
/* Image */
img {
2018-11-13 20:11:51 +01:00
max-width : 100 % ;
height : auto ;
2018-04-02 08:29:19 +02:00
}
img [ align = 'left' ] {
margin-right : 10px ;
}
img [ align = 'right' ] {
margin-left : 10px ;
}
2020-02-10 16:36:57 +01:00
# metaImage {
2020-03-01 17:36:54 +01:00
height : 150px ;
2020-02-10 16:36:57 +01:00
}
2018-11-13 18:33:22 +01:00
/ *
Signature dans les articles blog et news
* /
. signature {
font-size : 0 . 8em ;
font-style : italic ;
text-align : right ;
}
2020-03-15 17:32:08 +01:00
/ *
* Module news
* /
2020-05-06 07:19:51 +02:00
/ *
2020-03-15 17:32:08 +01:00
. newsTitle {
2020-05-06 07:19:51 +02:00
background-color : # ECEFF1 ;
2020-03-15 17:32:08 +01:00
padding : 5px ;
2020-05-06 07:19:51 +02:00
} * /
2020-03-15 17:32:08 +01:00
. newsContent {
clear : left ;
margin-left : 10px ;
2020-05-06 07:19:51 +02:00
/* padding: 5px;*/
2020-03-15 17:32:08 +01:00
}
. newsSignature {
margin-right : 10px ;
float : right ;
font-size : 0 . 8em ;
font-style : italic ;
color : grey ;
}
2018-04-02 08:29:19 +02:00
/* Tableau */
: not ( [ class ^ = "col" ] ) > . tableWrapper {
margin : 10px 0 ;
}
. table {
width : 100 % ;
border-spacing : 0 ;
border-collapse : collapse ;
}
. table thead tr {
background : # 212223 ;
color : # FFF ;
text-align : left ;
}
. table tbody tr {
background : # F6F7F8 ;
transition : background . 3s ease-out ;
}
. table tbody tr : nth-child ( 2n + 2 ) {
background : # ECEFF1 ;
}
. table tbody tr : hover {
background : # FCF2E8 ;
}
. table th {
font-weight : normal ;
2019-05-29 22:35:02 +02:00
padding : 15px 10px ;
2018-04-02 08:29:19 +02:00
}
/* Supprime le padding des cols dans les cellules des tableaux */
td > . col1 ,
td > . col2 ,
td > . col3 ,
td > . col4 ,
td > . col5 ,
td > . col6 ,
td > . col7 ,
td > . col8 ,
td > . col9 ,
td > . col10 ,
td > . col11 ,
td > . col12 {
padding : 0 ! important ;
}
/* Notifications */
# notification {
padding : 14px ;
color : # FFF ;
position : fixed ;
left : 50 % ;
transform : translateX ( -50 % ) ;
max-width : 500px ;
width : 100 % ;
z-index : 20 ;
text-align : center ;
animation : notificationBounce . 5s ;
top : 30px ;
border-radius : 2px ;
}
# notification . notificationSuccess {
background : # 27AE60 ;
}
# notification . notificationError {
background : # E74C3C ;
}
# notification . notificationOther {
background : # F39C12 ;
}
# notificationClose {
cursor : pointer ;
float : right ;
opacity : . 8 ;
}
# notificationProgress {
position : absolute ;
left : 0 ;
bottom : 0 ;
width : 100 % ;
height : 6px ;
border-radius : 2px ;
}
# notification . notificationSuccess # notificationProgress {
background : # 219251 ;
}
# notification . notificationError # notificationProgress {
background : # D62C1A ;
}
# notification . notificationOther # notificationProgress {
background : # D8890B ;
}
# notificationClose : hover {
opacity : 1 ;
}
@ keyframes notificationBounce {
0 % {
transform : translateX ( -50 % ) translateY ( -30px ) ;
}
40 % {
transform : translateX ( -50 % ) translateY ( 10px ) ;
}
60 % {
transform : translateX ( -50 % ) translateY ( -10px ) ;
}
80 % {
transform : translateX ( -50 % ) translateY ( 5px ) ;
}
100 % {
transform : translateX ( -50 % ) translateY ( -5px ) ;
}
}
/* Notice */
. notice {
display : inline-block ;
color : # E74C3C ;
}
/* Container */
. container {
margin : auto ;
}
2018-04-07 23:31:15 +02:00
. container-large {
width : 100 % ;
}
2019-01-24 14:26:54 +01:00
. container-large-fixed {
width : 100 % ;
position : fixed ;
2019-02-07 18:07:27 +01:00
z-index : 15 ;
2019-01-24 14:26:54 +01:00
}
2018-04-02 08:29:19 +02:00
/* Barre de membre */
# bar {
background : # 212223 ;
padding-left : 5px ; /* Pour éviter que le select touche le bord lorsque la fenêtre est redimensionnée */
2020-04-27 18:53:22 +02:00
margin : 0 ; /*-10px;*/
2018-04-02 08:29:19 +02:00
text-align : right ;
2019-02-06 20:40:19 +01:00
position : -webkit-sticky ; /* Safari */
position : sticky ;
top : 0 ;
z-index : 19 ;
2018-04-02 08:29:19 +02:00
}
2019-01-24 15:55:54 +01:00
/* fin barre pour les membres */
2018-04-02 08:29:19 +02:00
# bar : after {
content : " " ;
clear : both ;
display : block ;
}
# bar ul {
padding : 0 ;
margin : 0 ;
list-style : none ;
height : 45px ;
line-height : 45px ;
}
2019-05-29 22:35:02 +02:00
2018-04-02 08:29:19 +02:00
# bar li {
display : inline ;
}
2019-05-29 22:35:02 +02:00
2018-04-02 08:29:19 +02:00
# bar a {
display : inline-block ;
padding : 0 12px ;
color : # FFF ;
transition : background . 3s ease-out ;
}
# bar a : hover {
background : # 191A1A ;
text-decoration : none ;
}
# bar a : active {
background : # 111112 ;
}
# bar select {
width : 250px ;
border : 0 ;
2020-06-16 18:44:26 +02:00
color : # 111112 ;
2020-03-28 17:34:59 +01:00
font-size : 12px ;
2020-06-16 18:44:26 +02:00
background-color : rgba ( 255 , 255 , 255 , 1 ) ;
2018-04-02 08:29:19 +02:00
}
2019-05-29 22:35:02 +02:00
2020-02-04 10:17:56 +01:00
@ media ( min-width : 768px ) {
2019-05-29 22:35:02 +02:00
# bar # barLeft {
float : left ;
2020-06-16 18:44:26 +02:00
}
2019-05-29 22:35:02 +02:00
# bar # barRight {
float : right ;
2020-03-28 17:34:59 +01:00
font-size : 12px ;
2019-05-29 22:35:02 +02:00
}
}
2018-04-02 08:29:19 +02:00
@ media ( max-width : 768px ) {
# bar {
text-align : center ;
2020-10-24 16:59:19 +02:00
padding : 0 1 ;
margin : 0 1 ;
2018-04-02 08:29:19 +02:00
}
# bar ul {
height : auto ;
}
2019-03-31 18:22:07 +02:00
# bar # barSelectPage {
2020-10-24 16:59:19 +02:00
width : 40 % ;
font-size : 1em ;
2018-04-02 08:29:19 +02:00
}
2019-05-27 16:04:07 +02:00
# bar # barLeft {
2020-10-24 16:59:19 +02:00
font-size : 1 . 2em ;
2020-06-16 18:44:26 +02:00
float : none ;
2019-03-30 22:06:19 +01:00
}
2019-05-27 16:04:07 +02:00
# bar # barRight {
2020-10-24 16:59:19 +02:00
font-size : 1 . 4em ;
2020-06-16 18:44:26 +02:00
}
2019-05-27 16:04:07 +02:00
# bar # displayUsername {
2019-03-30 22:19:23 +01:00
display : none ;
}
}
2018-04-02 08:29:19 +02:00
2019-05-27 16:04:07 +02:00
2018-04-02 08:29:19 +02:00
/* Site */
# site {
overflow : hidden ;
}
2019-05-29 22:35:02 +02:00
@ media ( min-width : 769px ) {
2020-06-16 18:44:26 +02:00
# site {
2019-05-29 22:35:02 +02:00
margin : 20px auto ;
}
}
2018-04-02 08:29:19 +02:00
/* Bannière */
2019-05-29 22:35:02 +02:00
@ media ( min-width : 769px ) {
body > header {
2020-04-27 18:53:22 +02:00
margin : 0 ; /*-10px;*/
2019-05-29 22:35:02 +02:00
}
header {
margin : 0 ;
2020-06-16 18:44:26 +02:00
}
2018-04-02 08:29:19 +02:00
}
2019-05-29 22:35:02 +02:00
2018-04-02 08:29:19 +02:00
header {
position : relative ;
2018-09-09 11:47:24 +02:00
padding : 0 ;
2018-04-02 08:29:19 +02:00
}
header span {
display : inline-block ;
vertical-align : middle ;
line-height : 1 . 2 ;
margin : 0 10px ;
}
header . container {
overflow : hidden ;
2020-01-21 08:42:21 +01:00
height : 100 % ;
2019-12-06 18:51:33 +01:00
}
2020-09-22 08:04:32 +02:00
/ * Element du header
2019-12-06 18:51:33 +01:00
# themeHeaderImage {
font-style : italic ;
font-size : 0 . 9em ;
2020-08-12 17:39:43 +02:00
} * /
2018-04-02 08:29:19 +02:00
2020-08-08 17:06:06 +02:00
/ * Menu
2018-04-02 08:29:19 +02:00
body > nav {
2020-07-15 22:56:03 +02:00
margin : 0 -10px ;
2018-04-02 08:29:19 +02:00
}
2020-07-15 22:56:03 +02:00
* /
2019-07-31 19:45:59 +02:00
2018-09-14 02:57:52 +02:00
/* Items du menu */
nav a > img {
margin : -4px 0 ;
vertical-align : middle ;
2019-07-31 19:45:59 +02:00
}
2018-04-02 08:29:19 +02:00
nav # toggle {
cursor : pointer ;
text-align : right ;
display : none ;
font-weight : bold ;
}
2019-12-10 17:36:13 +01:00
2018-04-02 08:29:19 +02:00
nav # toggle span {
display : block ;
}
2019-05-02 13:21:48 +02:00
2019-12-10 17:36:13 +01:00
nav # burgerText {
float : left ;
font-size : 1 . 4em ;
margin : 15px 0 0 10px ;
}
2018-04-02 08:29:19 +02:00
nav ul {
padding : 0 ;
margin : 0 ;
list-style : none ;
}
2019-05-22 21:51:07 +02:00
2018-04-02 08:29:19 +02:00
nav li {
display : inline-block ;
position : relative ;
}
2019-05-02 13:21:48 +02:00
2018-04-02 08:29:19 +02:00
nav li ul {
display : block ;
position : absolute ;
width : 200px ;
z-index : -1 ;
opacity : 0 ;
transition : . 3s ease-out ;
2020-06-16 18:44:26 +02:00
padding-left : 10px ;
2018-04-02 08:29:19 +02:00
}
2019-05-02 13:21:48 +02:00
2018-04-02 08:29:19 +02:00
nav li ul li {
display : block ;
text-align : left ;
}
2019-07-31 17:47:26 +02:00
2020-11-01 20:19:02 +01:00
/ *
nav . navSub a {
background-color : red ! important ;
} * /
2018-04-02 08:29:19 +02:00
nav li : hover ul {
2019-05-22 21:51:07 +02:00
z-index : 8 ;
2018-04-02 08:29:19 +02:00
opacity : 1 ;
}
2019-05-29 22:35:02 +02:00
2018-04-02 08:29:19 +02:00
nav a {
display : inherit ;
transition : background . 3s ease-out ;
}
2019-05-29 22:35:02 +02:00
2018-04-02 08:29:19 +02:00
nav a : hover {
text-decoration : none ;
}
2020-10-14 09:42:14 +02:00
2020-11-01 08:51:23 +01:00
/* Barre de menu */
# menuLeft {
2020-10-31 18:34:55 +01:00
display : inline-flex ;
2020-10-14 09:42:14 +02:00
}
2020-11-01 08:51:23 +01:00
# menuRight {
display : inline-flex ;
2020-10-14 09:42:14 +02:00
float : right ;
}
2020-11-01 08:51:23 +01:00
2020-10-14 09:42:14 +02:00
/* fin barre de menu */
nav :: after {
content : " " ;
clear : both ;
display : flex ;
}
2020-11-01 08:51:23 +01:00
2020-10-14 09:42:14 +02:00
nav :: before {
content : " " ;
clear : left ;
display : flex ;
}
2020-02-04 10:17:56 +01:00
@ media ( min-width : 768px ) {
2019-05-29 22:35:02 +02:00
nav # menu {
display : block ;
}
}
2018-04-02 08:29:19 +02:00
@ media ( max-width : 768px ) {
2019-06-06 21:49:43 +02:00
body > nav {
margin : 0 ;
}
2020-10-24 16:59:19 +02:00
nav # toggle ,
nav # menuLeft {
2018-04-02 08:29:19 +02:00
display : block ;
2020-10-24 16:59:19 +02:00
float : none ;
}
nav # menuLeft {
flex-direction : column ;
float : none ;
}
nav # menuRight {
font-size : 2em ;
2020-06-16 18:44:26 +02:00
}
2018-04-02 08:29:19 +02:00
nav # menu {
display : none ;
2019-05-29 22:35:02 +02:00
text-align : left ;
2018-04-02 08:29:19 +02:00
}
nav li {
display : block ;
}
nav li ul {
z-index : 1 ;
opacity : 1 ;
position : static ;
min-width : inherit ;
width : auto ;
}
2019-05-29 22:35:02 +02:00
/* Taille du menu hamburger */
nav . zwiico-menu {
font-size : 1 . 5em ;
2020-06-16 18:44:26 +02:00
}
2020-03-06 21:18:34 +01:00
nav . zwiico-cancel {
font-size : 1 . 5em ;
}
2018-04-02 08:29:19 +02:00
}
2019-05-02 13:21:48 +02:00
2020-06-16 18:44:26 +02:00
/* Barre de navigation fixe quand le menu est en-dehors du site */
2019-02-07 17:26:39 +01:00
# navfixedlogout {
2019-02-07 18:07:27 +01:00
position : -webkit-sticky ; /* Safari */
position : sticky ;
2019-02-07 17:57:41 +01:00
top : 0px ;
2019-02-07 18:08:55 +01:00
z-index : 10 ;
2019-02-07 14:59:05 +01:00
}
2019-02-07 17:26:39 +01:00
# navfixedconnected {
2019-02-07 17:57:41 +01:00
top : 45px ;
2019-02-07 18:08:55 +01:00
z-index : 10 ;
2019-02-07 17:57:41 +01:00
position : -webkit-sticky ; /* Safari */
position : sticky ;
2019-02-07 14:59:05 +01:00
}
2020-11-01 20:19:02 +01:00
# navfixedconnected . navSub ,
# navfixedlogout . navSub {
2019-07-31 17:47:26 +02:00
pointer-events : none ;
}
2019-02-07 18:07:27 +01:00
2019-05-02 13:21:48 +02:00
/* Menu vertical */
2019-05-31 23:25:31 +02:00
. menuSide , . menuSideChild {
2019-05-02 13:21:48 +02:00
padding-left : 10px ;
margin : 0px ;
list-style : none ;
}
2019-05-31 23:25:31 +02:00
ul . menuSideChild , li . menuSideChild {
2019-05-02 13:21:48 +02:00
padding-left : 10px ;
}
2018-04-02 08:29:19 +02:00
/* Corps */
2019-05-29 22:35:02 +02:00
@ media ( min-width : 769px ) {
section {
padding : 20px ;
}
}
2018-04-02 08:29:19 +02:00
section {
2020-07-10 18:09:54 +02:00
min-height : 450px ;
2018-04-02 08:29:19 +02:00
}
2020-02-02 19:14:57 +01:00
2018-04-02 08:29:19 +02:00
section # sectionTitle {
margin-top : 0 ;
}
2020-02-02 19:14:57 +01:00
2019-05-07 22:07:35 +02:00
. userLogin , . updateForm {
2019-05-05 14:26:01 +02:00
min-height : 0px ;
}
2018-04-02 08:29:19 +02:00
section : after {
content : " " ;
display : table ;
clear : both ;
}
2019-02-14 17:54:02 +01:00
/* Version des modules*/
. moduleVersion {
font-size : 0 . 8em ;
font-style : italic ;
2020-06-16 18:44:26 +02:00
text-align : right ;
2019-02-14 17:54:02 +01:00
}
2018-04-02 08:29:19 +02:00
/* Pied de page */
body > footer {
2020-04-27 18:53:22 +02:00
margin : 0 ; /* -10px;*/
2018-04-02 08:29:19 +02:00
}
2019-07-15 11:54:04 +02:00
/ *
2019-06-19 03:28:52 +02:00
footer {
padding : 1px 20px ;
}
2019-07-15 11:54:04 +02:00
* /
2019-06-19 03:28:52 +02:00
2019-07-15 11:54:04 +02:00
# footerbody , # footersite {
margin : 0 ;
2018-04-02 08:29:19 +02:00
}
2018-09-09 21:28:05 +02:00
2020-02-02 19:14:57 +01:00
. footerbodyFixed {
position : fixed ;
bottom : 0 ;
left : 0 ;
width : 100 % ;
z-index : 50 ;
background-color : inherit ;
padding : inherit ;
}
2019-07-15 11:54:04 +02:00
# footersiteRight , # footersiteLeft , # footersiteCenter ,
# footerbodyRight , # footerbodyLeft , # footerbodyCenter {
vertical-align : middle ;
padding : 0 ;
2019-06-20 07:51:56 +02:00
}
2019-11-12 13:24:37 +01:00
footer # footerbody > div {
margin : 0
}
footer # footersite > div {
padding : 0
}
footer # footerbody > div {
padding : 0
}
2020-02-05 15:23:15 +01:00
# footerText > p {
2020-06-16 18:44:26 +02:00
margin-top : 0 ;
2019-11-12 13:24:37 +01:00
margin-bottom : 0 ;
}
2020-06-16 18:44:26 +02:00
# footerLoginLink ,
# footerDisplayCopyright ,
2019-05-02 13:21:48 +02:00
# footerDisplayVersion ,
2019-05-12 23:25:59 +02:00
# footerDisplaySiteMap ,
2019-06-22 19:44:13 +02:00
# footerDisplayLegal ,
2019-07-03 19:46:53 +02:00
# footerDisplaySearch ,
2019-05-12 23:25:59 +02:00
# footerZwiiCMS {
2019-05-02 13:21:48 +02:00
font-size : inherit ;
2018-09-09 21:28:05 +02:00
}
2019-05-02 13:21:48 +02:00
2019-03-22 21:20:49 +01:00
/* Conserve le pied de page sur une ligne */
2019-05-29 22:35:02 +02:00
@ media ( max-width : 768px ) {
2019-06-06 21:49:43 +02:00
body > footer {
margin : 0 ;
}
2019-03-22 21:20:49 +01:00
footer . col4 {
2019-03-30 22:51:56 +01:00
width : 100 % ;
2019-03-22 21:20:49 +01:00
}
2019-03-31 11:03:27 +02:00
# footerCopyright , # footerText , # footerSocials {
2019-05-29 22:35:02 +02:00
display : flex ;
justify-content : center ;
2019-03-31 11:03:27 +02:00
}
}
2018-04-02 08:29:19 +02:00
footer # footerSocials span {
color : # FFF ;
padding : 9px ;
margin : 0 5px ;
display : inline-block ;
border-radius : 2px ;
transition : background . 3s ease-out ;
}
footer # footerSocials . zwiico-facebook {
background : # 3B5999 ;
}
footer # footerSocials . zwiico-facebook : hover {
background : # 324B80 ;
}
2019-05-02 13:21:48 +02:00
footer # footerSocials . zwiico-linkedin {
background : # 007BB6 ;
2018-04-02 08:29:19 +02:00
}
2019-05-02 13:21:48 +02:00
footer # footerSocials . zwiico-linkedin : hover {
background : # 006881 ;
2018-04-02 08:29:19 +02:00
}
footer # footerSocials . zwiico-instagram {
background : # E4405F ;
}
footer # footerSocials . zwiico-instagram : hover {
background : # E02246 ;
}
footer # footerSocials . zwiico-pinterest {
background : # BD081C ;
}
footer # footerSocials . zwiico-pinterest : hover {
background : # 9C0717 ;
}
footer # footerSocials . zwiico-twitter {
background : # 55ACEE ;
}
footer # footerSocials . zwiico-twitter : hover {
background : # 369DEB ;
}
footer # footerSocials . zwiico-youtube {
background : # CD201F ;
}
footer # footerSocials . zwiico-youtube : hover {
background : # AF1B1B ;
}
2019-06-12 09:45:42 +02:00
footer # footerSocials . zwiico-github {
background : # 000 ;
}
footer # footerSocials . zwiico-github : hover {
background : # 000 ;
}
2018-04-02 08:29:19 +02:00
/* Bulle de dialogue */
. speech {
margin : 16px ;
text-align : center ;
}
. speechMimi {
display : block ;
margin : auto ;
}
. speechBubble {
display : block ;
padding : 20px ;
position : relative ;
max-width : 500px ;
width : 100 % ;
margin : 16px auto ;
text-align : left ;
border-radius : 2px ;
transition : background . 3s ease-out ;
}
. speechBubble : before {
content : " " ;
position : absolute ;
left : 50 % ;
margin-left : -20px ;
bottom : -30px ;
border : 20px solid ;
}
/* Remonter en haut */
# backToTop {
position : fixed ;
z-index : 30 ;
right : 30px ;
bottom : 50px ;
padding : 13px 16px 16px ;
2020-02-13 10:48:56 +01:00
/ *
Paramétré dans le thème ( 9 . 2 . 21 )
2018-04-02 08:29:19 +02:00
background : rgba ( 33 , 34 , 35 , . 8 ) ;
2020-02-13 10:48:56 +01:00
color : # FFF ; * /
2018-04-02 08:29:19 +02:00
cursor : pointer ;
display : none ;
border-radius : 50 % ;
transition : background . 3s ease-out ;
}
# backToTop : hover {
background : rgba ( 33 , 34 , 35 , . 9 ) ;
}
# backToTop : active {
background : rgba ( 33 , 34 , 35 , 1 ) ;
}
2020-12-12 18:40:08 +01:00
/* Message sur les cookies */
# cookieConsent {
width : 80 % ;
margin : auto ;
opacity : . 9 ;
background : # 212223 ;
position : fixed ;
right : 0 ;
bottom : 5 % ;
left : 0 ;
color : # FFF ;
padding : 10px ;
z-index : 60 ;
text-align : center ;
font-size : 1em ;
}
# cookieConsentConfirm , # cookieConsentRefuse {
cursor : pointer ;
margin-left : 10px ;
background : # 666 ;
padding : 4px 8px ;
display : inline-block ;
transition : background . 3s ease-out ;
}
# cookieConsentConfirm : hover , # cookieConsentRefuse : hover {
background : # 777 ;
}
2018-04-02 08:29:19 +02:00
/* Bloc */
. block {
2020-05-18 10:50:43 +02:00
/* border: 1px solid #D8DFE3;*/
2018-04-02 08:29:19 +02:00
padding : 20px 20px 10px ;
margin : 20px 0 ;
word-wrap : break-word ;
border-radius : 2px ;
}
. block : first-of-type {
margin-top : 0 ;
}
. block : last-of-type {
margin-bottom : 0 ;
}
. block h4 {
margin : -20px -20px 10px -20px ;
padding : 10px ;
2020-05-18 10:50:43 +02:00
/* background: #ECEFF1;*/
2018-04-02 08:29:19 +02:00
}
2020-07-15 22:56:03 +02:00
. block h4 . openClose {
display : inline-flex ;
float : right ;
}
2018-04-02 08:29:19 +02:00
/* Aides */
. helpButton {
cursor : help ;
margin : 0 5px ;
-webkit-user-select : none ;
-moz-user-select : none ;
-ms-user-select : none ;
user-select : none ;
}
/* Lightbox */
. lightbox {
background : # FFF ;
width : 100vw ;
max-width : 500px ;
padding : 20px ;
2020-06-16 18:44:26 +02:00
2020-04-04 00:23:20 +02:00
}
. lightbox > span {
color : black ;
2018-04-02 08:29:19 +02:00
}
. lightbox . lightboxButtons {
text-align : center ;
margin-top : 30px ;
}
. lightbox . lightboxButtons . button {
width : 100 % ;
max-width : 80px ;
margin : 0 10px ;
}
/ * *
* Inputs
* /
/* Inputs génériques */
input [ type = 'email' ] ,
input [ type = 'text' ] ,
input [ type = 'password' ] ,
. inputFile ,
select ,
textarea {
padding : 10px ; /* -1px à cause des bordures */
2020-06-17 18:45:02 +02:00
/*background: #FFF;*/
2018-04-02 08:29:19 +02:00
border : 1px solid # D8DFE3 ;
width : 100 % ;
border-radius : 2px ;
font-family : inherit ;
transition : border . 3s ease-out ;
}
select {
padding : 7px ;
}
input [ type = 'email' ] : hover ,
input [ type = 'text' ] : hover ,
input [ type = 'password' ] : hover ,
. inputFile : hover ,
select : hover ,
textarea : hover {
border : 1px solid ;
}
input [ type = 'email' ] . notice ,
input [ type = 'text' ] . notice ,
input [ type = 'password' ] . notice ,
. inputFile . notice ,
select . notice ,
textarea . notice {
border : 1px solid # E74C3C ;
2020-06-16 18:44:26 +02:00
/*background: #FAD7D3;*/
2018-04-02 08:29:19 +02:00
}
input [ type = 'email' ] . notice : hover ,
input [ type = 'text' ] . notice : hover ,
input [ type = 'password' ] . notice : hover ,
. inputFile . notice : hover ,
select . notice : hover ,
textarea . notice : hover {
border : 1px solid # A82315 ;
}
button : disabled ,
input : disabled ,
select : disabled ,
textarea : disabled {
background : # F6F7F8 ! important ;
color : # 94A5B0 ! important ;
}
button : disabled . zwiico-spin {
color : # 50616C ! important /* Icône de soumission unique */
}
button {
width : 100 % ;
padding : 11px ;
border : 0 ;
cursor : pointer ;
font-family : inherit ;
border-radius : 2px ;
transition : background . 3s ease-out ;
}
textarea {
height : 100px ;
resize : vertical ;
}
label {
display : inline-block ;
margin-bottom : 4px ;
}
/* Simule le padding des cols pour les inputs en dehors des cols */
: not ( [ class ^ = "col" ] ) > . inputWrapper {
padding : 10px 0 ;
}
/* Supprime le padding d'une row dans un col */
[ class ^ = "col" ] > . row {
margin : -10px ;
}
/* Bouton */
. button {
width : 100 % ;
display : inline-block ;
padding : 11px ;
text-align : center ;
-webkit-user-select : none ;
-moz-user-select : none ;
-ms-user-select : none ;
user-select : none ;
cursor : pointer ;
border-radius : 2px ;
transition : background . 3s ease-out ;
}
2020-06-16 18:44:26 +02:00
/* Bouton redimensionnable pour le formulaire*/
2019-05-14 20:51:08 +02:00
# formSubmit {
width : max-content ;
float : right ;
}
2018-04-02 08:29:19 +02:00
. button : hover {
text-decoration : none ;
}
. button . disabled {
pointer-events : none ;
cursor : default ;
background : # F6F7F8 ! important ;
color : # 94A5B0 ! important ;
}
/* Upload de fichiers */
. inputFile {
margin : 0 ;
display : inline-block ;
width : 88 % ;
}
. inputFileDelete {
2020-02-10 16:36:57 +01:00
display : block ;
2018-04-02 08:29:19 +02:00
width : 10 % ;
padding : 10px 0 ;
background : # F5F5F5 ;
text-align : center ;
2020-02-10 16:36:57 +01:00
float : right ;
2020-02-11 11:07:08 +01:00
min-height : 100 % ;
2018-04-02 08:29:19 +02:00
}
. inputFile : hover {
text-decoration : none ;
}
2020-08-12 09:21:40 +02:00
/* Empêche le débordement et les sauts de ligne */
2020-08-12 17:39:43 +02:00
. inputFileManagerWrapper {
2020-08-12 09:21:40 +02:00
display : inline ;
}
2020-08-12 17:39:43 +02:00
. inputFileManagerWrapper > . inputFile {
2020-08-12 09:21:40 +02:00
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
}
2018-04-02 08:29:19 +02:00
/* Pagination */
. pagination {
padding : 10px 0 ;
}
. pagination a {
display : inline-block ;
padding : 10px ;
margin : 5px ;
text-align : center ;
}
. pagination a : hover {
text-decoration : none ;
}
. pagination a . disabled {
pointer-events : none ;
cursor : default ;
background : # F6F7F8 ! important ;
color : # 94A5B0 ! important ;
}
. pagination a : first-child {
margin-left : 0 ;
}
. pagination a : last-child {
margin-right : 0 ;
}
/* Cases à cocher (pas de display none sinon le hover ne fonctionne pas sous Chrome) */
input [ type = 'checkbox' ] {
-webkit-appearance : none ;
-moz-appearance : none ;
appearance : none ;
opacity : 0 ;
height : 0 ;
width : 0 ;
}
input [ type = 'checkbox' ] + label {
display : inline-block ;
margin-right : 10px ;
cursor : pointer ;
}
input [ type = 'checkbox' ] + label span {
vertical-align : middle ;
}
input [ type = 'checkbox' ] + label : before {
content : '\2713' ;
display : inline-block ;
text-align : center ;
color : transparent ;
margin-right : 5px ;
width : 20px ;
height : 20px ;
line-height : 20px ;
font-size : 10px ;
font-weight : bold ;
background : # FDFDFD ;
border : 1px solid # D8DFE3 ;
vertical-align : top ;
border-radius : 2px ;
}
input [ type = 'checkbox' ] . notice + label : before {
background : # E74C3C ;
}
input [ type = 'checkbox' ] : hover + label : before ,
input [ type = 'checkbox' ] : checked : active + label : before {
background : # ECEFF1 ;
}
input [ type = 'checkbox' ] : disabled + label : before {
background : # F6F7F8 ! important ;
}
/* Sélecteur de date */
. datepicker {
cursor : text ;
}
. pika-select {
padding : 0 ; /* À cause du padding ajouté aux selects */
}
2019-11-26 19:22:30 +01:00
/* Paramètres de l'étiquette dans form */
. formLabel {
margin-top : 20px ;
}
. formLabel hr {
border : 1px solid ;
margin : 5px 0 5px ;
}
2018-04-02 08:29:19 +02:00
/ * *
* Grille
* /
* ,
* : before ,
* : after {
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
}
. row {
margin : 0 -10px ;
font-size : 0 ; /* Hack whitespace */
}
/* Supprime les margins du premier et du dernier élément d'un col, utile pour les cols générés depuis l'éditeur de texte. (Ne s'applique pas aux rows pour ne pas supprimer les margins négatifs) */
. row > div > : first-child : not ( . row ) {
margin-top : 0 ;
}
. row > div > : last-child : not ( . row ) {
margin-bottom : 0 ;
}
. col1 ,
. col2 ,
. col3 ,
. col4 ,
. col5 ,
. col6 ,
. col7 ,
. col8 ,
. col9 ,
. col10 ,
. col11 ,
. col12 {
vertical-align : top ;
padding : 10px ;
width : 100 % ;
min-height : 1px ;
display : inline-block ;
}
2019-05-29 22:35:02 +02:00
@ media ( min-width : 768px ) {
2018-04-02 08:29:19 +02:00
. col1 {
width : 8 . 33333333 % ;
}
. col2 {
width : 16 . 66666667 % ;
}
. col3 {
width : 25 % ;
}
. col4 {
width : 33 . 33333333 % ;
}
. col5 {
width : 41 . 66666667 % ;
}
. col6 {
width : 50 % ;
}
. col7 {
width : 58 . 33333333 % ;
}
. col8 {
width : 66 . 66666667 % ;
}
. col9 {
width : 75 % ;
}
. col10 {
width : 83 . 33333333 % ;
}
. col11 {
width : 91 . 66666667 % ;
}
. col12 {
width : 100 % ;
}
. offset1 {
margin-left : 8 . 33333333 % ;
}
. offset2 {
margin-left : 16 . 66666667 % ;
}
. offset3 {
margin-left : 25 % ;
}
. offset4 {
margin-left : 33 . 33333333 % ;
}
. offset5 {
margin-left : 41 . 66666667 % ;
}
. offset6 {
margin-left : 50 % ;
}
. offset7 {
margin-left : 58 . 33333333 % ;
}
. offset8 {
margin-left : 66 . 66666667 % ;
}
. offset9 {
margin-left : 75 % ;
}
. offset10 {
margin-left : 83 . 33333333 % ;
}
. offset11 {
margin-left : 91 . 66666667 % ;
}
}
/ * *
* Grille pour tableau
* /
td . col1 ,
th . col1 ,
td . col2 ,
th . col2 ,
td . col3 ,
th . col3 ,
td . col4 ,
th . col4 ,
td . col5 ,
th . col5 ,
td . col6 ,
th . col6 ,
td . col7 ,
th . col7 ,
td . col8 ,
th . col8 ,
td . col9 ,
th . col9 ,
td . col10 ,
th . col10 ,
td . col11 ,
th . col11 ,
td . col12 ,
th . col12 {
vertical-align : inherit ;
width : 100 % ;
min-height : 1px ;
display : table-cell ;
}
td . col1 ,
th . col1 {
width : 8 . 33333333 % ;
}
td . col2 ,
th . col2 {
width : 16 . 66666667 % ;
}
td . col3 ,
th . col3 {
width : 25 % ;
}
td . col4 ,
th . col4 {
width : 33 . 33333333 % ;
}
td . col5 ,
th . col5 {
width : 41 . 66666667 % ;
}
td . col6 ,
th . col6 {
width : 50 % ;
}
td . col7 ,
th . col7 {
width : 58 . 33333333 % ;
}
td . col8 ,
th . col8 {
width : 66 . 66666667 % ;
}
td . col9 ,
th . col9 {
width : 75 % ;
}
td . col10 ,
th . col10 {
width : 83 . 33333333 % ;
}
td . col11 ,
th . col11 {
width : 91 . 66666667 % ;
}
td . col12 ,
th . col12 {
width : 100 % ;
}
2020-07-15 22:56:03 +02:00
2018-04-02 08:29:19 +02:00
/ * *
* Classes rapides
* /
. displayNone {
display : none ;
}
. textAlignCenter {
text-align : center ;
}
. textAlignRight {
text-align : right ;
}
. verticalAlignBottom {
vertical-align : bottom ;
}
. verticalAlignMiddle {
vertical-align : middle ;
}
. clearBoth {
clear : both ;
}
. colorGreen {
color : # 27AE60 ;
}
. colorRed {
color : # E74C3C ;
}
. colorOrange {
color : # F39C12 ;
2019-03-18 22:26:55 +01:00
}
2019-11-28 14:55:02 +01:00
2020-03-12 14:54:53 +01:00
2019-11-28 14:55:02 +01:00
/ *
* Effet accordéon
* /
. accordion {
padding : 0 ;
2020-06-16 18:44:26 +02:00
list-style : none ;
2019-11-28 14:55:02 +01:00
}
. accordion-title {
display : block ;
margin : 0 ;
2019-12-01 14:50:24 +01:00
padding : 0 7px ;
2019-11-28 14:55:02 +01:00
line-height : 34px ;
text-decoration : none ;
cursor : pointer ;
}
. accordion-title : hover {
background : lightgrey ;
}
. accordion-content {
padding : 7px ;
2020-08-11 16:03:48 +02:00
}
/ * Captcha
* /
2020-10-04 16:49:28 +02:00
. captcha img {
2020-09-30 17:21:19 +02:00
height : 30px ;
2020-10-04 16:49:28 +02:00
vertical-align : middle ;
2020-09-30 17:21:19 +02:00
padding-left : 10px ;
padding-right : 10px ;
2020-09-19 18:14:06 +02:00
}
2020-10-04 16:49:28 +02:00
. captcha input [ type = 'text' ] {
width : 4em ;
text-align : center ;
margin : auto auto auto 2em ;
}
2020-10-01 15:50:19 +02:00
2020-09-19 18:14:06 +02:00
/ *
2020-09-22 08:04:32 +02:00
* Couleur des icônes + et -
2020-09-19 18:14:06 +02:00
* /
. zwiico-minus-circled ,
. zwiico-plus-circled {
color : # D8890B ;
2020-09-20 18:57:34 +02:00
font-size : 1 . 3em ! important ;
}
. zwiico-minus-circled ,
. zwiico-plus-circled {
2020-09-20 18:29:44 +02:00
transition : all 1s ease ;
}
. zwiico-minus-circled : hover ,
. zwiico-plus-circled : hover {
-webkit-transform : scale ( 1 . 25 ) ; /* Safari et Chrome */
-moz-transform : scale ( 1 . 25 ) ; /* Firefox */
-ms-transform : scale ( 1 . 25 ) ; /* Internet Explorer 9 */
-o-transform : scale ( 1 . 25 ) ; /* Opera */
transform : scale ( 1 . 25 ) ;
2020-09-22 08:04:32 +02:00
}