Séparation des mediaqueries
This commit is contained in:
LC
parent
b6756fc606
commit
3e20879856
|
|
@ -13,47 +13,11 @@
|
|||
* @author Frédéric Tempez <frederic.tempez@outlook.com>
|
||||
* @copyright Copyright (C) 2018-2021, Frédéric Tempez
|
||||
*/
|
||||
html, body {
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
@media screen and (min-width: 800px) {
|
||||
body {
|
||||
margin : 0;
|
||||
}
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
/* Liens */
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -83,7 +47,7 @@ h3 {
|
|||
font-size: 1.4em;
|
||||
}
|
||||
h4 {
|
||||
font-size : 1.0em;
|
||||
font-size: 1em;
|
||||
}
|
||||
/* Listes */
|
||||
ul {
|
||||
|
|
@ -103,10 +67,17 @@ font-style : italic;
|
|||
/* Séparateur */
|
||||
hr {
|
||||
border: 0;
|
||||
border-top : 1px solid #C5D1D4;
|
||||
border-top: 1px solid #c5d1d4;
|
||||
}
|
||||
/* Égalisation des margins */
|
||||
h1, h2, h3, h4, p, hr, ul, ol {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
hr,
|
||||
ul,
|
||||
ol {
|
||||
margin: 15px 0;
|
||||
}
|
||||
/* Image */
|
||||
|
|
@ -123,7 +94,6 @@ margin-left : 10px;
|
|||
#metaImage {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
/* Signature dans les articles blog et news */
|
||||
.signature {
|
||||
font-size: 0.8em;
|
||||
|
|
@ -143,38 +113,38 @@ border-collapse : collapse;
|
|||
text-align: left;
|
||||
}
|
||||
.table tbody tr {
|
||||
background : #F6F7F8;
|
||||
background: #f6f7f8;
|
||||
transition: background 0.3s ease-out;
|
||||
}
|
||||
.table tbody tr:nth-child(2n + 2) {
|
||||
background : #ECEFF1;
|
||||
background: #eceff1;
|
||||
}
|
||||
.table tbody tr:hover {
|
||||
background : #FCF2E8;
|
||||
background: #fcf2e8;
|
||||
}
|
||||
.table th {
|
||||
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 {
|
||||
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: 799px) {
|
||||
.table thead {
|
||||
font-size : 0.8em;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 668px) {
|
||||
.table thead {
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
/* Notifications */
|
||||
#notification {
|
||||
padding: 14px;
|
||||
color : #FFF;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
|
@ -187,13 +157,13 @@ 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;
|
||||
|
|
@ -212,10 +182,10 @@ border-radius : 2px;
|
|||
background: #219251;
|
||||
}
|
||||
#notification.notificationError #notificationProgress {
|
||||
background : #D62C1A;
|
||||
background: #d62c1a;
|
||||
}
|
||||
#notification.notificationOther #notificationProgress {
|
||||
background : #D8890B;
|
||||
background: #d8890b;
|
||||
}
|
||||
#notificationClose:hover {
|
||||
opacity: 1;
|
||||
|
|
@ -240,7 +210,7 @@ transform : translateX(-50%) translateY(-5px);
|
|||
/* Notice */
|
||||
.notice {
|
||||
display: inline-block;
|
||||
color : #E74C3C;
|
||||
color: #e74c3c;
|
||||
}
|
||||
/* Mauvaise position dans les champs File */
|
||||
.inputFile.notice {
|
||||
|
|
@ -268,7 +238,6 @@ position : sticky;
|
|||
top: 0;
|
||||
z-index: 19;
|
||||
}
|
||||
/* fin barre pour les membres */
|
||||
#bar:after {
|
||||
content: " ";
|
||||
clear: both;
|
||||
|
|
@ -287,11 +256,11 @@ display : inline;
|
|||
#bar a {
|
||||
display: inline-block;
|
||||
padding: 0 12px;
|
||||
color : #FFF;
|
||||
color: #fff;
|
||||
transition: background 0.3s ease-out;
|
||||
}
|
||||
#bar a:hover {
|
||||
background : #191A1A;
|
||||
background: #191a1a;
|
||||
text-decoration: none;
|
||||
}
|
||||
#bar a:active {
|
||||
|
|
@ -304,51 +273,11 @@ color : #111112;
|
|||
font-size: 12px;
|
||||
background-color: rgb(255, 255, 255, 1);
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
/* Site */
|
||||
#site {
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Bannière */
|
||||
@media screen and (min-width: 800px) {
|
||||
body > header {
|
||||
margin : 0;
|
||||
}
|
||||
header {
|
||||
margin : 0;
|
||||
}
|
||||
}
|
||||
header {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
|
@ -436,52 +365,6 @@ 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;
|
||||
}
|
||||
|
||||
/* 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: sticky;
|
||||
|
|
@ -494,12 +377,14 @@ z-index : 10;
|
|||
position: sticky;
|
||||
}
|
||||
/* Menu vertical */
|
||||
.menuSide, .menuSideChild {
|
||||
.menuSide,
|
||||
.menuSideChild {
|
||||
padding-left: 10px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
ul .menuSideChild, li .menuSideChild {
|
||||
ul .menuSideChild,
|
||||
li .menuSideChild {
|
||||
padding-left: 10px;
|
||||
}
|
||||
/* Drapeaux */
|
||||
|
|
@ -509,41 +394,15 @@ width : 70%;
|
|||
.i18nFlagSelected {
|
||||
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;
|
||||
}
|
||||
}
|
||||
/* Corps */
|
||||
@media screen and (min-width: 800px) {
|
||||
section {
|
||||
padding : 20px;
|
||||
}
|
||||
}
|
||||
section {
|
||||
min-height: 65vh;
|
||||
}
|
||||
section #sectionTitle {
|
||||
margin-top: 0;
|
||||
}
|
||||
.userLogin, .updateForm {
|
||||
.userLogin,
|
||||
.updateForm {
|
||||
min-height: 0;
|
||||
}
|
||||
section:after {
|
||||
|
|
@ -561,7 +420,8 @@ text-align : right;
|
|||
body > footer {
|
||||
margin: 0;
|
||||
}
|
||||
#footerbody, #footersite {
|
||||
#footerbody,
|
||||
#footersite {
|
||||
margin: 0;
|
||||
}
|
||||
.footerbodyFixed {
|
||||
|
|
@ -573,7 +433,12 @@ z-index : 50;
|
|||
background-color: inherit;
|
||||
padding: inherit;
|
||||
}
|
||||
#footersiteRight, #footersiteLeft, #footersiteCenter, #footerbodyRight, #footerbodyLeft, #footerbodyCenter {
|
||||
#footersiteRight,
|
||||
#footersiteLeft,
|
||||
#footersiteCenter,
|
||||
#footerbodyRight,
|
||||
#footerbodyLeft,
|
||||
#footerbodyCenter {
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -590,25 +455,19 @@ padding : 0;
|
|||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#footerLoginLink, #footerDisplayCopyright, #footerDisplayVersion, #footerDisplaySiteMap, #footerDisplayLegal, #footerDisplayCookie, #footerDisplaySearch, #footerDeltaCMS {
|
||||
#footerLoginLink,
|
||||
#footerDisplayCopyright,
|
||||
#footerDisplayVersion,
|
||||
#footerDisplaySiteMap,
|
||||
#footerDisplayLegal,
|
||||
#footerDisplayCookie,
|
||||
#footerDisplaySearch,
|
||||
#footerDeltaCMS {
|
||||
font-size: inherit;
|
||||
}
|
||||
/* Conserve le pied de page sur une ligne */
|
||||
@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;
|
||||
color: #fff;
|
||||
padding: 9px;
|
||||
margin: 0 5px;
|
||||
display: inline-block;
|
||||
|
|
@ -616,40 +475,40 @@ 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;
|
||||
}
|
||||
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;
|
||||
|
|
@ -716,11 +575,6 @@ z-index : 60;
|
|||
text-align: center;
|
||||
font-size: 1em;
|
||||
}
|
||||
@media screen and (max-width: 799px) {
|
||||
#cookieConsent {
|
||||
width : 90%;
|
||||
}
|
||||
}
|
||||
#cookieConsentConfirm {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
|
|
@ -762,7 +616,8 @@ margin-top : 0;
|
|||
.block:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.block > h4, .blockTitle {
|
||||
.block > h4,
|
||||
.blockTitle {
|
||||
margin: -20px -20px 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
@ -777,7 +632,7 @@ user-select : none;
|
|||
}
|
||||
/* Lightbox */
|
||||
.lightbox {
|
||||
background : #FFF;
|
||||
background: #fff;
|
||||
width: 100vw;
|
||||
max-width: 500px;
|
||||
padding: 20px;
|
||||
|
|
@ -795,9 +650,14 @@ max-width : 80px;
|
|||
margin: 0 10px;
|
||||
}
|
||||
/* Inputs génériques */
|
||||
input[type="email"], input[type="text"], input[type="password"], .inputFile, select, textarea {
|
||||
input[type="email"],
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
.inputFile,
|
||||
select,
|
||||
textarea {
|
||||
padding: 9px;
|
||||
border : #D8DFE3 solid 1px;
|
||||
border: #d8dfe3 solid 1px;
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
font-family: inherit;
|
||||
|
|
@ -806,22 +666,40 @@ transition : border 0.3s ease-out;
|
|||
select {
|
||||
padding: 9px;
|
||||
}
|
||||
input[type="email"]:hover, input[type="text"]:hover, input[type="password"]:hover, .inputFile:hover, select:hover, textarea:hover {
|
||||
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 : #E74C3C solid 1px;
|
||||
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 : #A82315 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: #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 ;
|
||||
color: #50616c !important ;
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
|
|
@ -872,20 +750,22 @@ text-decoration : none;
|
|||
}
|
||||
.button.disabled {
|
||||
cursor: default;
|
||||
background : #F6F7F8 !important ;
|
||||
color : #94A5B0 !important ;
|
||||
background: #f6f7f8 !important ;
|
||||
color: #94a5b0 !important ;
|
||||
}
|
||||
/* Upload de fichiers */
|
||||
.inputFile, .datepicker {
|
||||
.inputFile,
|
||||
.datepicker {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
width: 88% !important ;
|
||||
}
|
||||
.inputFileDelete, .inputDateDelete {
|
||||
.inputFileDelete,
|
||||
.inputDateDelete {
|
||||
display: block;
|
||||
width: 10%;
|
||||
padding: 10px 0;
|
||||
background : #F5F5F5;
|
||||
background: #f5f5f5;
|
||||
text-align: center;
|
||||
float: right;
|
||||
height: 35px;
|
||||
|
|
@ -894,10 +774,12 @@ height : 35px;
|
|||
text-decoration: none;
|
||||
}
|
||||
/* Empêche le débordement et les sauts de ligne */
|
||||
.inputFileManagerWrapper, .inputDateManagerWrapper {
|
||||
.inputFileManagerWrapper,
|
||||
.inputDateManagerWrapper {
|
||||
display: inline;
|
||||
}
|
||||
.inputFileManagerWrapper > .inputFile, .inputDateManagerWrapper > .inputFile {
|
||||
.inputFileManagerWrapper > .inputFile,
|
||||
.inputDateManagerWrapper > .inputFile {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -917,8 +799,8 @@ text-decoration : none;
|
|||
}
|
||||
.pagination a.disabled {
|
||||
cursor: default;
|
||||
background : #F6F7F8 !important ;
|
||||
color : #94A5B0 !important ;
|
||||
background: #f6f7f8 !important ;
|
||||
color: #94a5b0 !important ;
|
||||
}
|
||||
.pagination a:first-child {
|
||||
margin-left: 0;
|
||||
|
|
@ -942,7 +824,7 @@ input[type="checkbox"] + label span {
|
|||
vertical-align: middle;
|
||||
}
|
||||
input[type="checkbox"] + label:before {
|
||||
content : '\2713';
|
||||
content: "\2713";
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: transparent;
|
||||
|
|
@ -952,19 +834,20 @@ height : 20px;
|
|||
line-height: 20px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
background : #FDFDFD;
|
||||
border : #D8DFE3 solid 1px;
|
||||
background: #fdfdfd;
|
||||
border: #d8dfe3 solid 1px;
|
||||
vertical-align: top;
|
||||
border-radius: 2px;
|
||||
}
|
||||
input[type="checkbox"].notice + label:before {
|
||||
background : #E74C3C;
|
||||
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 ;
|
||||
background: #f6f7f8 !important ;
|
||||
}
|
||||
/* Sélecteur de date */
|
||||
.datepicker {
|
||||
|
|
@ -983,7 +866,9 @@ border : solid 1px;
|
|||
margin: 5px 0 5px;
|
||||
}
|
||||
/* Grille */
|
||||
*, *:before, *:after {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.row {
|
||||
|
|
@ -997,139 +882,102 @@ margin-top : 0;
|
|||
.row > div > :last-child:not(.row) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
|
||||
.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%;
|
||||
}
|
||||
.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 {
|
||||
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 {
|
||||
td.col1,
|
||||
th.col1 {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
td.col2, th.col2 {
|
||||
td.col2,
|
||||
th.col2 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
td.col3, th.col3 {
|
||||
td.col3,
|
||||
th.col3 {
|
||||
width: 25%;
|
||||
}
|
||||
td.col4, th.col4 {
|
||||
td.col4,
|
||||
th.col4 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
td.col5, th.col5 {
|
||||
td.col5,
|
||||
th.col5 {
|
||||
width: 41.66666667%;
|
||||
}
|
||||
td.col6, th.col6 {
|
||||
td.col6,
|
||||
th.col6 {
|
||||
width: 50%;
|
||||
}
|
||||
td.col7, th.col7 {
|
||||
td.col7,
|
||||
th.col7 {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
td.col8, th.col8 {
|
||||
td.col8,
|
||||
th.col8 {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
td.col9, th.col9 {
|
||||
td.col9,
|
||||
th.col9 {
|
||||
width: 75%;
|
||||
}
|
||||
td.col10, th.col10 {
|
||||
td.col10,
|
||||
th.col10 {
|
||||
width: 83.33333333%;
|
||||
}
|
||||
td.col11, th.col11 {
|
||||
td.col11,
|
||||
th.col11 {
|
||||
width: 91.66666667%;
|
||||
}
|
||||
td.col12, th.col12 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
/* Classes rapides */
|
||||
.displayNone {
|
||||
display: none;
|
||||
|
|
@ -1150,13 +998,13 @@ vertical-align : middle;
|
|||
clear: both;
|
||||
}
|
||||
.colorGreen {
|
||||
color : #27AE60;
|
||||
color: #27ae60;
|
||||
}
|
||||
.colorRed {
|
||||
color : #E74C3C;
|
||||
color: #e74c3c;
|
||||
}
|
||||
.colorOrange {
|
||||
color : #F39C12;
|
||||
color: #f39c12;
|
||||
}
|
||||
/* Effet accordéon */
|
||||
.accordion {
|
||||
|
|
@ -1184,14 +1032,17 @@ text-align : center;
|
|||
margin: auto auto auto 2em;
|
||||
}
|
||||
/* Couleur des icônes + et - */
|
||||
.zwiico-minus-circled, .zwiico-plus-circled {
|
||||
color : #D8890B;
|
||||
.zwiico-minus-circled,
|
||||
.zwiico-plus-circled {
|
||||
color: #d8890b;
|
||||
font-size: 1.3em !important ;
|
||||
}
|
||||
.zwiico-minus-circled, .zwiico-plus-circled {
|
||||
.zwiico-minus-circled,
|
||||
.zwiico-plus-circled {
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.zwiico-minus-circled:hover, .zwiico-plus-circled:hover {
|
||||
.zwiico-minus-circled:hover,
|
||||
.zwiico-plus-circled:hover {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
/* Emplacement des conditions d'utilisation */
|
||||
|
|
@ -1210,7 +1061,8 @@ box-shadow : 5px 5px 11px 0 #222222;
|
|||
border-radius: 5px;
|
||||
z-index: 30;
|
||||
}
|
||||
.helpDisplayContent, .helpDisplayButton {
|
||||
.helpDisplayContent,
|
||||
.helpDisplayButton {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Bouton screenshot */
|
||||
|
|
@ -1226,12 +1078,6 @@ height : 68px;
|
|||
.buttonScreenshot:active {
|
||||
width: 90px;
|
||||
}
|
||||
/* Bannière masquable en petit écran */
|
||||
@media screen and (max-width: 799px) {
|
||||
.bannerDisplay {
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
/* Option image avec titre dans tinymce */
|
||||
figure.image {
|
||||
display: inline-block;
|
||||
|
|
|
|||
Loading…
Reference in New Issue