From 54a4d14da46571586293d72738a42077a728b0df Mon Sep 17 00:00:00 2001 From: LC Date: Tue, 10 Jan 2023 20:15:45 +0100 Subject: [PATCH] =?UTF-8?q?Nouveau=20seuil=20=C3=A0=20800px=20et=20mise=20?= =?UTF-8?q?aux=20normes=20du=20W3C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fichier débarrassé des commentaires superflus, des lignes vides, des espaces inutiles, des règles, pseudo-éléments, pseudo-classes et propriétés propriétaires (obsolètes et donc parfaitement inutiles) ou qui n'existent pas --- core/layout/common.css | 2165 +++++++++++++++------------------------- 1 file changed, 794 insertions(+), 1371 deletions(-) diff --git a/core/layout/common.css b/core/layout/common.css index c119ce6..4de9df6 100644 --- a/core/layout/common.css +++ b/core/layout/common.css @@ -13,1822 +13,1245 @@ * @author Frédéric Tempez * @copyright Copyright (C) 2018-2021, Frédéric Tempez */ - - -/** - * Éléments génériques - */ - - -html, +html, body { +min-height : 100%; +} +@media screen and (min-width: 800px) { body { - min-height: 100%; - /*min-height: 100vh;*/ +margin : 0; } - - -@media screen and (min-width: 769px) { - body { - /*margin:0px 10px;*/ - margin: 0; - } } - - - -/** -* Petits écrans inférieurs à 768px de largeur, on supprime les marges -*/ -@media screen and (max-width: 768px) { - body { - margin: 0 auto !important; - } - - #site { - margin-top: 0 !important; - } - - body>header { - margin: 0 auto !important; - } - - .tippy-tooltip { - font-size: .8rem !important; - } - - section { - padding: 10px !important; - } +/* Petits écrans inférieurs à 800px de largeur, on supprime les marges */ +@media screen and (max-width: 799px) { +body { +margin : 0 auto !important ; +} +#site { +margin-top : 0 !important ; +} +body > header { +margin : 0 auto !important ; +} +.tippy-tooltip { +font-size : 0.8rem !important ; +} +section { +padding : 10px !important ; +} +} +@media screen and (max-width: 799px) { +.siteContainer { +display : flex; +flex-direction : column; +} +.siteContainer > #contentLeft { +order : 1; +} +.siteContainer > #contentRight { +order : 3; +} +.siteContainer > #contentSite { +order : 2; } - - - -@media screen and (max-width: 768px) { - .siteContainer { - display: flex; - flex-direction: column; - } - - .siteContainer>#contentLeft { - order: 1; - } - - .siteContainer>#contentRight { - order: 3; - } - - .siteContainer>#contentSite { - order: 2; - } } - - - -/** - * Éléments spécifiques - */ - /* Liens */ a { - text-decoration: none; +text-decoration : none; } - a:hover { - text-decoration: underline; +text-decoration : underline; } - /* Supprimer les pointillés lors d'un clic Firefox */ a:focus { - outline: none; +outline : none; } - a:active { - outline: none; +outline : none; } - /* pour rendre toute la bannière cliquable */ a.headertitle { - display: block; +display : block; } - /* Titres */ h1 { - font-size: 1.8em; +font-size : 1.8em; } - h2 { - font-size: 1.6em; +font-size : 1.6em; } - h3 { - font-size: 1.4em; +font-size : 1.4em; } - h4 { - font-size: 1.0em; +font-size : 1.0em; } - /* Listes */ ul { - list-style: square; +list-style : square; } - li ul { - margin: 0; +margin : 0; } - option.pageInactive { - color: orange; - font-weight: bold; +color : orange; +font-weight : bold; } option.pageHidden { - color: red; - font-style: italic; +color : red; +font-style : italic; } - /* Séparateur */ hr { - border: 0; - border-top: 1px solid #C5D1D4; +border : 0; +border-top : 1px solid #C5D1D4; } - /* Égalisation des margins */ -h1, -h2, -h3, -h4, -p, -hr, -ul, -ol { - margin: 15px 0; +h1, h2, h3, h4, p, hr, ul, ol { +margin : 15px 0; } - /* Image */ img { - max-width: 100%; - height: auto; +max-width : 100%; +height : auto; } - -img[align='left'] { - margin-right: 10px; +img[align="left"] { +margin-right : 10px; } - -img[align='right'] { - margin-left: 10px; +img[align="right"] { +margin-left : 10px; } - #metaImage { - height: 150px; +height : 150px; } -/* -Signature dans les articles blog et news -*/ - +/* Signature dans les articles blog et news */ .signature { - font-size: 0.8em; - font-style: italic; - text-align: right; +font-size : 0.8em; +font-style : italic; +text-align : right; } - - /* Tableau */ -:not([class^="col"])>.tableWrapper { - margin: 10px 0; +:not([class^="col"]) > .tableWrapper { +margin : 10px 0; } - .table { - width: 100%; - border-spacing: 0; - border-collapse: collapse; +width : 100%; +border-spacing : 0; +border-collapse : collapse; } - .table thead tr { - /*background: #212223; - color: #FFF;*/ - text-align: left; +text-align : left; } - .table tbody tr { - background: #F6F7F8; - transition: background .3s ease-out; +background : #F6F7F8; +transition : background 0.3s ease-out; } - -.table tbody tr:nth-child(2n + 2) { - background: #ECEFF1; +.table tbody tr:nth-child(2n+2) { +background : #ECEFF1; } - .table tbody tr:hover { - background: #FCF2E8; +background : #FCF2E8; } - .table th { - font-weight: normal; - padding: 15px 10px; +font-weight : normal; +padding : 15px 10px; } - /* 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; +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 ; } - /* Tableau sur les écrans de petites tailles */ -@media screen and (max-width: 768px) { - .table thead { - font-size: 0.8em; - } +@media screen and (max-width: 799px) { +.table thead { +font-size : 0.8em; +} } @media screen and (max-width: 668px) { - .table thead { - display:none; - } +.table thead { +display : none; +} } - /* 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; +padding : 14px; +color : #FFF; +position : fixed; +left : 50%; +transform : translateX(-50%); +max-width : 500px; +width : 100%; +z-index : 20; +text-align : center; +animation : notificationBounce 0.5s; +top : 30px; +border-radius : 2px; } - #notification.notificationSuccess { - background: #27AE60; +background : #27AE60; } - #notification.notificationError { - background: #E74C3C; +background : #E74C3C; } - #notification.notificationOther { - background: #F39C12; +background : #F39C12; } - #notificationClose { - cursor: pointer; - float: right; - opacity: .8; +cursor : pointer; +float : right; +opacity : 0.8; } - #notificationProgress { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 6px; - border-radius: 2px; +position : absolute; +left : 0; +bottom : 0; +width : 100%; +height : 6px; +border-radius : 2px; } - #notification.notificationSuccess #notificationProgress { - background: #219251; +background : #219251; } - #notification.notificationError #notificationProgress { - background: #D62C1A; +background : #D62C1A; } - #notification.notificationOther #notificationProgress { - background: #D8890B; +background : #D8890B; } - #notificationClose:hover { - opacity: 1; +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); - } +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; +display : inline-block; +color : #E74C3C; } -/* Mauvaise position dans les champs File*/ +/* Mauvaise position dans les champs File */ .inputFile.notice { - display: block; +display : block; } - /* Container */ .container { - margin: auto; +margin : auto; } - .container-large { - width: 100%; +width : 100%; } - .container-large-fixed { - width: 100%; - position: fixed; - z-index: 15; +width : 100%; +position : fixed; +z-index : 15; } - /* Barre de membre */ #bar { - background: #212223; - padding-left: 5px; - /* Pour éviter que le select touche le bord lorsque la fenêtre est redimensionnée */ - margin: 0; - /*-10px;*/ - text-align: right; - position: -webkit-sticky; - /* Safari */ - position: sticky; - top: 0; - z-index: 19; +background : #212223; +padding-left : 5px; +margin : 0; +text-align : right; +position : sticky; +top : 0; +z-index : 19; } - /* fin barre pour les membres */ #bar:after { - content: " "; - clear: both; - display: block; +content : " "; +clear : both; +display : block; } - #bar ul { - padding: 0; - margin: 0; - list-style: none; - height: 45px; - line-height: 45px; +padding : 0; +margin : 0; +list-style : none; +height : 45px; +line-height : 45px; } - #bar li { - display: inline; +display : inline; } - #bar a { - display: inline-block; - padding: 0 12px; - color: #FFF; - transition: background .3s ease-out; +display : inline-block; +padding : 0 12px; +color : #FFF; +transition : background 0.3s ease-out; } - #bar a:hover { - background: #191A1A; - text-decoration: none; +background : #191A1A; +text-decoration : none; } - #bar a:active { - background: #111112; +background : #111112; } - #bar select { - width: 250px; - border: 0; - color: #111112; - font-size: 12px; - background-color: rgba(255, 255, 255, 1); +width : 250px; +border : 0; +color : #111112; +font-size : 12px; +background-color : rgb(255, 255, 255, 1); } - -@media screen and (min-width: 769px) { - #bar #barLeft { - float: left; - } - - #bar #barRight { - float: right; - font-size: 12px; - } +@media screen and (min-width: 800px) { +#bar #barLeft { +float : left; +} +#bar #barRight { +float : right; +font-size : 12px; +} +} +@media screen and (max-width: 799px) { +#bar { +text-align : center; +margin : 0 auto !important ; +} +#bar ul { +height : auto; +} +#bar #barSelectPage { +width : 40%; +font-size : 1em; +} +#bar #barLeft { +font-size : 1.2em; +float : none; +} +#bar #barRight { +font-size : 1.4em; +} +#bar #displayUsername { +display : none; } - -@media screen and (max-width: 768px) { - #bar { - text-align: center; - /*padding: 0 1;*/ - margin: 0 auto !important; - } - - #bar ul { - height: auto; - } - - #bar #barSelectPage { - width: 40%; - font-size: 1em; - } - - #bar #barLeft { - font-size: 1.2em; - float: none; - } - - #bar #barRight { - font-size: 1.4em; - } - - #bar #displayUsername { - display: none; - } } - - /* Site */ #site { - overflow: hidden; +overflow : hidden; } -/* Dans theme.css -@media screen and (min-width:769px) { - #site { - margin: 20px auto; - } -} -*/ - /* Bannière */ - -@media screen and (min-width:769px) { - body>header { - margin: 0; - /*-10px;*/ - } - - header { - margin: 0; - } +@media screen and (min-width: 800px) { +body > header { +margin : 0; } - header { - position: relative; - padding: 0; +margin : 0; +} +} +header { +position : relative; +padding : 0; } - header span { - display: inline-block; - /*vertical-align: middle; - line-height: 1.2;*/ - margin: 0 10px; +display : inline-block; +margin : 0 10px; } - header .container { - overflow: hidden; - height: 100%; +overflow : hidden; +height : 100%; } - -/* Marges au cotenu de la bannière personnalisée -header:not(.container) #featureContent { - margin: 0 10px; -}*/ - header #featureContent { - overflow: hidden; - margin: 0 10px; +overflow : hidden; +margin : 0 10px; } - - - -/* Element du header - -#themeHeaderImage { - font-style: italic; - font-size: 0.9em; -}*/ - -/* Menu -body > nav { - margin: 0 -10px; -} -*/ - /* Items du menu */ -nav a>img { - margin: -4px 0; - vertical-align: middle; +nav a > img { +margin : -4px 0; +vertical-align : middle; } - nav #toggle { - cursor: pointer; - text-align: right; - display: none; - font-weight: bold; +cursor : pointer; +text-align : right; +display : none; +font-weight : bold; } - nav #toggle span { - display: block; +display : block; } - nav #burgerText { - float: left; - font-size: 1.4em; - margin: 15px 0 0 10px; +float : left; +font-size : 1.4em; +margin : 15px 0 0 10px; } - nav #burgerLogo { - float: left; - margin: 2px 0 0 5px; +float : left; +margin : 2px 0 0 5px; } - nav ul { - padding: 0; - margin: 0; - list-style: none; +padding : 0; +margin : 0; +list-style : none; } - nav li { - display: inline-block; - position: relative; +display : inline-block; +position : relative; } - nav li ul { - display: block; - position: absolute; - z-index: -1; - opacity: 0; - transition: .3s ease-out; - overflow: hidden; +display : block; +position : absolute; +z-index : -1; +opacity : 0; +transition : 0.3s ease-out; +overflow : hidden; } - nav li ul li { - display: block; - text-align: left; +display : block; +text-align : left; } - -nav .navSub a{ - text-align: left; +nav .navSub a { +text-align : left; } - nav li:hover ul { - z-index: 8; - opacity: 1; +z-index : 8; +opacity : 1; } - nav a { - display: inherit; - transition: background .3s ease-out; +display : inherit; +transition : background 0.3s ease-out; } - nav a:hover { - text-decoration: none; +text-decoration : none; } - - -/* Barre de menu */ -/* -#menuLeft { - display: inline-flex; -} - -#menuRight { - display: inline-flex ; - float: right; -} -*/ -/* fin barre de menu */ - #menuSpace { - width: 20px; +width : 20px; } - nav::after { - content: " "; - clear: both; - display: flex; +content : " "; +clear : both; +display : flex; } - nav::before { - content: " "; - clear: left; - display: flex; +content : " "; +clear : left; +display : flex; +} +@media screen and (min-width: 800px) { +.smallScreenFlags { +display : none; +} +nav #menu { +display : block; +} +} +@media screen and (max-width: 799px) { +body > nav { +margin : 0 auto !important ; +} +nav #toggle, nav #menuLeft { +display : block; +float : none; +} +nav #menuLeft { +flex-direction : column; +float : none; +} +nav #menuRight { +font-size : 2em; +} +nav #menu { +display : none; +text-align : left; +} +nav li { +display : block; +} +nav li ul { +z-index : 1; +opacity : 1; +position : static; +min-width : inherit; +padding-left : 20px; } -@media screen and (min-width: 769px) { - .smallScreenFlags{ - display : none; - } - nav #menu { - display: block; - } +/* Taille du menu hamburger */ +nav .zwiico-menu { +font-size : 1.5em; +} +nav .zwiico-cancel { +font-size : 1.5em; } - -@media screen and (max-width: 768px) { - body>nav { - margin: 0 auto !important; - } - - nav #toggle, - nav #menuLeft { - display: block; - float: none; - } - - nav #menuLeft { - flex-direction: column; - float: none; - } - - nav #menuRight { - font-size: 2em; - } - - nav #menu { - display: none; - text-align: left; - } - - nav li { - display: block; - } - - nav li ul { - z-index: 1; - opacity: 1; - position: static; - min-width: inherit; - padding-left: 20px; - } - - /* Taille du menu hamburger */ - nav .zwiico-menu { - font-size: 1.5em; - } - - nav .zwiico-cancel { - font-size: 1.5em; - } } - - /* Barre de navigation fixe quand le menu est en-dehors du site */ #navfixedlogout { - position: -webkit-sticky; - /* Safari */ - position: sticky; - top: 0px; - z-index: 10; +position : sticky; +top : 0; +z-index : 10; } - #navfixedconnected { - top: 45px; - z-index: 10; - position: -webkit-sticky; - /* Safari */ - position: sticky; +top : 45px; +z-index : 10; +position : sticky; } - -#navfixedconnected .navSub, -#navfixedlogout .navSub { - pointer-events: none; -} - - /* Menu vertical */ - -.menuSide, -.menuSideChild { - padding-left: 10px; - margin: 0px; - list-style: none; +.menuSide, .menuSideChild { +padding-left : 10px; +margin : 0; +list-style : none; } - -ul .menuSideChild, -li .menuSideChild { - padding-left: 10px; +ul .menuSideChild, li .menuSideChild { +padding-left : 10px; } - /* Drapeaux */ - .i18nFlag { - width: 70%; +width : 70%; } - .i18nFlagSelected { - width: 100%; +width : 100%; +} +/* Position du bloc dans le site sur les petits écrans */ +@media screen and (max-width: 799px) { +.smallScreenFlags { +display : inline-block; +position : relative; +left : 10px; +} +.smallScreenInline { +display : inline-block; +} +.i18nFlag { +width : 25px; +margin : 0 10px 0 -10px; +} +.i18nFlagSelected { +width : 30px; +margin : 0 10px 0 -10px; +} +.zwiico-login { +margin-right : 20px; +} } - - -/* -* Position du bloc dans le site sur les petits écrans -*/ - - -@media screen and (max-width:768px){ - .smallScreenFlags{ - display : inline-block; - position: relative; - left : 10px; - } - - .smallScreenInline{ - display: inline-block; - } - - .i18nFlag { - width: 25px; - margin: 0 10px 0 -10px; - } - - .i18nFlagSelected { - width: 30px; - margin: 0 10px 0 -10px; - } - - .zwiico-login{ - margin-right: 20px; - } - - } - - - /* Corps */ -@media screen and (min-width:769px) { - section { - padding: 20px; - } -} - +@media screen and (min-width: 800px) { section { - /*min-height: 100%;*/ - min-height: 65vh; +padding : 20px; +} +} +section { +min-height : 65vh; } - section #sectionTitle { - margin-top: 0; +margin-top : 0; } - -.userLogin, -.updateForm { - min-height: 0px; +.userLogin, .updateForm { +min-height : 0; } - section:after { - content: " "; - display: table; - clear: both; +content : " "; +display : table; +clear : both; } - -/* Version des modules*/ +/* Version des modules */ .moduleVersion { - font-size: 0.8em; - font-style: italic; - text-align: right; +font-size : 0.8em; +font-style : italic; +text-align : right; } - /* Pied de page */ -body>footer { - margin: 0; - /* -10px;*/ +body > footer { +margin : 0; } - -/* -footer { - padding: 1px 20px; +#footerbody, #footersite { +margin : 0; } -*/ - -#footerbody, -#footersite { - margin: 0; -} - .footerbodyFixed { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - z-index: 50; - background-color: inherit; - padding: inherit; +position : fixed; +bottom : 0; +left : 0; +width : 100%; +z-index : 50; +background-color : inherit; +padding : inherit; } - -#footersiteRight, -#footersiteLeft, -#footersiteCenter, -#footerbodyRight, -#footerbodyLeft, -#footerbodyCenter { - vertical-align: middle; - padding: 0; +#footersiteRight, #footersiteLeft, #footersiteCenter, #footerbodyRight, #footerbodyLeft, #footerbodyCenter { +vertical-align : middle; +padding : 0; } - -footer #footerbody>div { - margin: 0 +footer #footerbody > div { +margin : 0; } - -footer #footersite>div { - padding: 0 +footer #footersite > div { +padding : 0; } - -footer #footerbody>div { - padding: 0 +footer #footerbody > div { +padding : 0; } - -#footerText>p { - margin-top: 0; - margin-bottom: 0; +#footerText > p { +margin-top : 0; +margin-bottom : 0; } - -#footerLoginLink, -#footerDisplayCopyright, -#footerDisplayVersion, -#footerDisplaySiteMap, -#footerDisplayLegal, -#footerDisplayCookie, -#footerDisplaySearch, -#footerDeltaCMS { - font-size: inherit; +#footerLoginLink, #footerDisplayCopyright, #footerDisplayVersion, #footerDisplaySiteMap, #footerDisplayLegal, #footerDisplayCookie, #footerDisplaySearch, #footerDeltaCMS { +font-size : inherit; } - /* Conserve le pied de page sur une ligne */ -@media screen and (max-width: 768px) { - body>footer { - margin: 0 auto !important; - } - - footer .col4 { - width: 100%; - } - - #footerCopyright, - #footerText, - #footerSocials { - display: flex; - justify-content: center; - } +@media screen and (max-width: 799px) { +body > footer { +margin : 0 auto !important ; } - +footer .col4 { +width : 100%; +} +#footerCopyright, #footerText, #footerSocials { +display : flex; +justify-content : center; +} +} +/* Réseaux sociaux */ footer #footerSocials span { - color: #FFF; - padding: 9px; - margin: 0 5px; - display: inline-block; - border-radius: 2px; - transition: background .3s ease-out; +color : #FFF; +padding : 9px; +margin : 0 5px; +display : inline-block; +border-radius : 2px; +transition : background 0.3s ease-out; } - footer #footerSocials .zwiico-facebook { - background: #3B5999; +background : #3B5999; } - footer #footerSocials .zwiico-facebook:hover { - background: #324B80; +background : #324B80; } - footer #footerSocials .zwiico-linkedin { - background: #007BB6; +background : #007BB6; } - footer #footerSocials .zwiico-linkedin:hover { - background: #006881; +background : #006881; } - footer #footerSocials .zwiico-instagram { - background: #E4405F; +background : #E4405F; } - footer #footerSocials .zwiico-instagram:hover { - background: #E02246; +background : #E02246; } - footer #footerSocials .zwiico-pinterest { - background: #BD081C; +background : #BD081C; } - footer #footerSocials .zwiico-pinterest:hover { - background: #9C0717; +background : #9C0717; } - footer #footerSocials .zwiico-twitter { - background: #55ACEE; +background : #55ACEE; } - footer #footerSocials .zwiico-twitter:hover { - background: #369DEB; +background : #369DEB; } - footer #footerSocials .zwiico-youtube { - background: #CD201F; +background : #CD201F; } - footer #footerSocials .zwiico-youtube:hover { - background: #AF1B1B; +background : #AF1B1B; } - footer #footerSocials .zwiico-github { - background: #000; +background : #000; } - footer #footerSocials .zwiico-github:hover { - background: #000; +background : #000; } - /* Bulle de dialogue */ .speech { - margin: 16px; - text-align: center; +margin : 16px; +text-align : center; } - .speechMimi { - display: block; - margin: auto; +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; +display : block; +padding : 20px; +position : relative; +max-width : 500px; +width : 100%; +margin : 16px auto; +text-align : left; +border-radius : 2px; +transition : background 0.3s ease-out; } - .speechBubble:before { - content: " "; - position: absolute; - left: 50%; - margin-left: -20px; - bottom: -30px; - border: 20px solid; +content : " "; +position : absolute; +left : 50%; +margin-left : -20px; +bottom : -30px; +border : solid 20px; } - /* Remonter en haut */ #backToTop { - position: fixed; - z-index: 50; - right: 30px; - bottom: 100px; - padding: 13px 16px 16px; - /* - Paramétré dans le thème (9.2.21) - background: rgba(33, 34, 35, .8); - color: #FFF;*/ - cursor: pointer; - display: none; - border-radius: 50%; - transition: background .3s ease-out; +position : fixed; +z-index : 50; +right : 30px; +bottom : 100px; +padding : 13px 16px 16px; +cursor : pointer; +display : none; +border-radius : 50%; +transition : background 0.3s ease-out; } - #backToTop:hover { - background: rgba(33, 34, 35, .9); +background : rgb(33, 34, 35, 0.9); } - #backToTop:active { - background: rgba(33, 34, 35, 1); +background : rgb(33, 34, 35, 1); } - /* Message sur les cookies */ #cookieConsent { - width: 60%; - margin: auto; - /* background: #212223; dans theme.css via core.php */ - position: fixed; - right: 0; - bottom: 5%; - left: 0; - /* color: #FFF; dans theme.css via core.php */ - padding: 10px; - z-index: 60; - text-align: center; - font-size: 1em; +width : 60%; +margin : auto; +position : fixed; +right : 0; +bottom : 5%; +left : 0; +padding : 10px; +z-index : 60; +text-align : center; +font-size : 1em; +} +@media screen and (max-width: 799px) { +#cookieConsent { +width : 90%; } - -@media screen and (max-width:768px) { - #cookieConsent { - width: 90%; - } } - #cookieConsentConfirm { - cursor: pointer; - margin-left: 10px; - padding: 4px 8px; - display: inline-block; - transition: background .3s ease-out; - /* background-color: green; dans theme.css via core.php */ +cursor : pointer; +margin-left : 10px; +padding : 4px 8px; +display : inline-block; +transition : background 0.3s ease-out; } - #cookieConsentConfirm:hover { - filter: grayscale(100%); +filter : grayscale(100%); } - .cookieTop { - display: flex; - justify-content: space-between; +display : flex; +justify-content : space-between; } - .cookieImage { - width: 20%; +width : 20%; } - .cookieTitle { - padding-top: 5%; - padding-right: 5%; - width: 70%; - font-size: 22px; +padding-top : 5%; +padding-right : 5%; +width : 70%; +font-size : 22px; } - .cookieClose { - width: 10%; - font-size: 1.5em; - cursor: pointer; +width : 10%; +font-size : 1.5em; +cursor : pointer; } - - /* Bloc */ .block { - padding: 20px 20px 10px; - margin: 20px 0; - word-wrap: break-word; - border-radius: 2px; +padding : 20px 20px 10px; +margin : 20px 0; +overflow-wrap : break-word; +border-radius : 2px; } - .block:first-of-type { - margin-top: 0; +margin-top : 0; } - .block:last-of-type { - margin-bottom: 0; +margin-bottom : 0; } - .block > h4, .blockTitle { - margin: -20px -20px 10px; - padding: 5px; +margin : -20px -20px 10px; +padding : 5px; } .blockTitle * { - margin: 0; +margin : 0; } - /* Aides */ .helpButton { - cursor: help; - margin: 0 5px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +cursor : help; +margin : 0 5px; +user-select : none; } - - /* Lightbox */ .lightbox { - background: #FFF; - width: 100vw; - max-width: 500px; - padding: 20px; - +background : #FFF; +width : 100vw; +max-width : 500px; +padding : 20px; } - -.lightbox>span { - color: black; +.lightbox > span { +color : black; } - .lightbox .lightboxButtons { - text-align: center; - margin-top: 30px; +text-align : center; +margin-top : 30px; } - .lightbox .lightboxButtons .button { - width: 100%; - max-width: 80px; - margin: 0 10px; +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: 9px; - /* -1px à cause des bordures */ - /*background: #FFF;*/ - border: 1px solid #D8DFE3; - width: 100%; - border-radius: 2px; - font-family: inherit; - transition: border .3s ease-out; +input[type="email"], input[type="text"], input[type="password"], .inputFile, select, textarea { +padding : 9px; +border : #D8DFE3 solid 1px; +width : 100%; +border-radius : 2px; +font-family : inherit; +transition : border 0.3s ease-out; } - select { - padding: 9px; +padding : 9px; } - -input[type='email']:hover, -input[type='text']:hover, -input[type='password']:hover, -.inputFile:hover, -select:hover, -textarea:hover { - border: 1px solid; +input[type="email"]:hover, input[type="text"]:hover, input[type="password"]:hover, .inputFile:hover, select:hover, textarea:hover { +border : solid 1px; } - -input[type='email'].notice, -input[type='text'].notice, -input[type='password'].notice, -.inputFile.notice, -select.notice, -textarea.notice { - border: 1px solid #E74C3C; - /*background: #FAD7D3;*/ +input[type="email"].notice, input[type="text"].notice, input[type="password"].notice, .inputFile.notice, select.notice, textarea.notice { +border : #E74C3C solid 1px; } - -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; +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 : #A82315 solid 1px; } - -button:disabled, -input:disabled, -select:disabled, -textarea:disabled { - background: #F6F7F8 !important; - color: #94A5B0 !important; +button:disabled, input:disabled, select:disabled, textarea:disabled { +background : #F6F7F8 !important ; +color : #94A5B0 !important ; } - +/* Icône de soumission unique */ button:disabled .zwiico-spin { - color: #50616C !important - /* Icône de soumission unique */ +color : #50616C !important ; } - button { - width: 100%; - padding: 11px; - border: 0; - cursor: pointer; - font-family: inherit; - border-radius: 2px; - transition: background .3s ease-out; +width : 100%; +padding : 11px; +border : 0; +cursor : pointer; +font-family : inherit; +border-radius : 2px; +transition : background 0.3s ease-out; } - textarea { - height: 100px; - resize: vertical; +height : 100px; +resize : vertical; } - label { - display: block; - margin-bottom: 4px; +display : block; +margin-bottom : 4px; } - .captcha label { - display:inline-block; +display : inline-block; } - /* Simule le padding des cols pour les inputs en dehors des cols */ -:not([class^="col"])>.inputWrapper { - padding: 10px 0; +:not([class^="col"]) > .inputWrapper { +padding : 10px 0; } - /* Supprime le padding d'une row dans un col */ -[class^="col"]>.row { - margin: -10px; +[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; +width : 100%; +display : inline-block; +padding : 11px; +text-align : center; +user-select : none; +cursor : pointer; +border-radius : 2px; +transition : background 0.3s ease-out; } - -/* Bouton redimensionnable pour le formulaire*/ +/* Bouton redimensionnable pour le formulaire */ #formSubmit { - width: max-content; - float: right; +width : max-content; +float : right; } - .button:hover { - text-decoration: none; +text-decoration : none; } - .button.disabled { - pointer-events: none; - cursor: default; - background: #F6F7F8 !important; - color: #94A5B0 !important; +cursor : default; +background : #F6F7F8 !important ; +color : #94A5B0 !important ; } - /* Upload de fichiers */ .inputFile, .datepicker { - margin: 0; - display: inline-block; - width: 88% !important; +margin : 0; +display : inline-block; +width : 88% !important ; } - .inputFileDelete, .inputDateDelete { - display: block; - width: 10%; - padding: 10px 0; - background: #F5F5F5; - text-align: center; - float: right; - /* min-height: 100% */ - height: 35px; +display : block; +width : 10%; +padding : 10px 0; +background : #F5F5F5; +text-align : center; +float : right; +height : 35px; } - .inputFile:hover { - text-decoration: none; +text-decoration : none; } - /* Empêche le débordement et les sauts de ligne */ .inputFileManagerWrapper, .inputDateManagerWrapper { - display: inline; +display : inline; } - -.inputFileManagerWrapper>.inputFile, .inputDateManagerWrapper>.inputFile { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +.inputFileManagerWrapper > .inputFile, .inputDateManagerWrapper > .inputFile { +white-space : nowrap; +overflow : hidden; +text-overflow : ellipsis; } - /* Pagination */ .pagination { - padding: 10px 0; +padding : 10px 0; } - .pagination a { - display: inline-block; - padding: 10px; - margin: 5px; - text-align: center; +display : inline-block; +padding : 10px; +margin : 5px; +text-align : center; } - .pagination a:hover { - text-decoration: none; +text-decoration : none; } - .pagination a.disabled { - pointer-events: none; - cursor: default; - background: #F6F7F8 !important; - color: #94A5B0 !important; +cursor : default; +background : #F6F7F8 !important ; +color : #94A5B0 !important ; } - .pagination a:first-child { - margin-left: 0; +margin-left : 0; } - .pagination a:last-child { - margin-right: 0; +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"] { +appearance : none; +opacity : 0; +height : 0; +width : 0; } - -input[type='checkbox']+label { - display: inline-block; - margin-right: 10px; - cursor: pointer; +input[type="checkbox"] + label { +display : inline-block; +margin-right : 10px; +cursor : pointer; } - -input[type='checkbox']+label span { - vertical-align: middle; +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"] + 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 : #D8DFE3 solid 1px; +vertical-align : top; +border-radius : 2px; } - -input[type='checkbox'].notice+label:before { - background: #E74C3C; +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"]:hover + label:before, input[type="checkbox"]:checked:active + label:before { +background : #ECEFF1; } - -input[type='checkbox']:disabled+label:before { - background: #F6F7F8 !important; +input[type="checkbox"]:disabled + label:before { +background : #F6F7F8 !important ; } - /* Sélecteur de date */ .datepicker { - cursor: text; +cursor : text; } - +/* Ànnulation du padding ajouté aux selects */ .pika-select { - padding: 0; - /* À cause du padding ajouté aux selects */ +padding : 0; } - /* Paramètres de l'étiquette dans form */ .formLabel { - margin-top: 20px; +margin-top : 20px; } - .formLabel hr { - border: 1px solid; - margin: 5px 0 5px; +border : solid 1px; +margin : 5px 0 5px; } - -/* Paramètres de Input File dans form */ -.formInputFile { - +/* Grille */ +*, *:before, *:after { +box-sizing : border-box; } - - -/** - * Grille - */ - -*, -*:before, -*:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - .row { - margin: 0 -10px; - font-size: 0; +margin : 0 -10px; +font-size : 0; } - /* 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 > :first-child:not(.row) { +margin-top : 0; } - -.row>div> :last-child:not(.row) { - margin-bottom: 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; +} +@media screen and (min-width: 800px) { +.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%; } - -.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; +width : 100%; } - -@media screen and (min-width: 769px) { - .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%; - } +.offset1 { +margin-left : 8.33333333%; } - -/** - * 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; +.offset2 { +margin-left : 16.66666667%; } - -td.col1, -th.col1 { - width: 8.33333333%; +.offset3 { +margin-left : 25%; } - -td.col2, -th.col2 { - width: 16.66666667%; +.offset4 { +margin-left : 33.33333333%; } - -td.col3, -th.col3 { - width: 25%; +.offset5 { +margin-left : 41.66666667%; } - -td.col4, -th.col4 { - width: 33.33333333%; +.offset6 { +margin-left : 50%; } - -td.col5, -th.col5 { - width: 41.66666667%; +.offset7 { +margin-left : 58.33333333%; } - -td.col6, -th.col6 { - width: 50%; +.offset8 { +margin-left : 66.66666667%; } - -td.col7, -th.col7 { - width: 58.33333333%; +.offset9 { +margin-left : 75%; } - -td.col8, -th.col8 { - width: 66.66666667%; +.offset10 { +margin-left : 83.33333333%; } - -td.col9, -th.col9 { - width: 75%; +.offset11 { +margin-left : 91.66666667%; } - -td.col10, -th.col10 { - width: 83.33333333%; } - -td.col11, -th.col11 { - width: 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.col12, -th.col12 { - width: 100%; +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%; } - /* Tableau sur les écrans de très petites tailles */ -@media screen and (max-width: 480px){ - .table tr{ - display: block; - margin-bottom: 10px; - } - .table td { - display: block; - text-align: right; - width: auto; - } +@media screen and (max-width: 480px) { +.table tr { +display : block; +margin-bottom : 10px; } - -/** - * Classes rapides - */ - +.table td { +display : block; +text-align : right; +width : auto; +} +} +/* Classes rapides */ .displayNone { - display: none; +display : none; } - .textAlignCenter { - text-align: center; +text-align : center; } - .textAlignRight { - text-align: right; +text-align : right; } - .verticalAlignBottom { - vertical-align: bottom; +vertical-align : bottom; } - .verticalAlignMiddle { - vertical-align: middle; +vertical-align : middle; } - .clearBoth { - clear: both; +clear : both; } - .colorGreen { - color: #27AE60; +color : #27AE60; } - .colorRed { - color: #E74C3C; +color : #E74C3C; } - .colorOrange { - color: #F39C12; +color : #F39C12; } - - - -/* -* Effet accordéon -*/ - +/* Effet accordéon */ .accordion { - padding: 0; - list-style: none; +padding : 0; +list-style : none; } - .accordion-title { - display: block; - margin: 0; - padding: 0 7px; - line-height: 34px; - text-decoration: none; - cursor: pointer; +display : block; +margin : 0; +padding : 0 7px; +line-height : 34px; +text-decoration : none; +cursor : pointer; } - .accordion-title:hover { - background: lightgrey; +background : lightgrey; } - .accordion-content { - padding: 7px; +padding : 7px; } - -/* Captcha -*/ - -.captchaNum, .captchaAlpha { - vertical-align: middle; - padding-left: 10px; - padding-right: 10px; +/* Captcha */ +.captcha input[type="text"] { +width : 4em; +text-align : center; +margin : auto auto auto 2em; } - -.captchaNum { - height: 5em; +/* Couleur des icônes + et - */ +.zwiico-minus-circled, .zwiico-plus-circled { +color : #D8890B; +font-size : 1.3em !important ; } - -.captchaAlpha { - height: 2em; +.zwiico-minus-circled, .zwiico-plus-circled { +transition : all 1s ease; } - -.captcha input[type='text'] { - width: 4em; - text-align: center; - margin: auto auto auto 2em; +.zwiico-minus-circled:hover, .zwiico-plus-circled:hover { +transform : scale(1.25); } - -/* -* Couleur des icônes + et - -*/ -.zwiico-minus-circled, -.zwiico-plus-circled { - color: #D8890B; - font-size: 1.3em !important; -} - -.zwiico-minus-circled, -.zwiico-plus-circled { - 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); - } - - /* Emplacement des conditions d'utilisation */ #googTransLogo { - float: right; +float : right; } #googTransLogo img { - width: 60%; +width : 60%; } - /* Système d'aide */ - .helpDisplayContent { - display: none; - width: 100%; - padding: 10px 10px; - -webkit-box-shadow: 5px 5px 11px 0px #222222; - box-shadow: 5px 5px 11px 0px #222222; - border-radius: 5px; - z-index: 30; +display : none; +width : 100%; +padding : 10px 10px; +box-shadow : 5px 5px 11px 0 #222222; +border-radius : 5px; +z-index : 30; } - .helpDisplayContent, .helpDisplayButton { - cursor: pointer; +cursor : pointer; } - /* Bouton screenshot */ .buttonScreenshot { - position: absolute; - padding: 0px; - background-color: rgba(255,255,255,0); - bottom: 30px; - right: 30px; - width: 100px; - height: 68px; +position : absolute; +padding : 0; +background-color : rgb(255, 255, 255, 0); +bottom : 30px; +right : 30px; +width : 100px; +height : 68px; } - .buttonScreenshot:active { - width: 90px; +width : 90px; +} +/* Bannière masquable en petit écran */ +@media screen and (max-width: 799px) { +.bannerDisplay { +display : none; } - -/* Bannière masquable en petit écran*/ -@media screen and (max-width: 768px) { - .bannerDisplay{ - display : none; - } } - /* Option image avec titre dans tinymce */ figure.image { - display: inline-block; - border: 1px solid; - margin: 0 6px; +display : inline-block; +border : solid 1px; +margin : 0 6px; } - figure.align-center { - display: table; - margin:auto; +display : table; +margin : auto; } - figure.align-left { - float: left; +float : left; } - figure.align-right { - float: right; +float : right; } - figure.image img { - margin: 0; +margin : 0; } - figure.image figcaption { - margin: 4px; - text-align: center; +margin : 4px; +text-align : center; }