/** * This file is part of DeltaCMS. */ /* Ecrans >= 800px */ @media (min-width: 800px) { /* Barre de membre */ #bar #barLeft { float: left; } #bar #barRight { float: right; font-size: 12px; } /* Bannière */ header { margin: 0; } /* Items du menu */ .smallScreenFlags { display: none; } nav #menu { display: block; } /* Corps */ section { padding: 20px; } /* Grille */ .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%; } } /* Ecrans < 800px */ @media (max-width: 799px) { /* Suppression des marges */ 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 ; } /* siteContainer */ .siteContainer { display: flex; flex-direction: column; } .siteContainer > #contentLeft { order: 1; } .siteContainer > #contentRight { order: 3; } .siteContainer > #contentSite { order: 2; } /* Tableaux */ .table thead { font-size: 0.8em; } /* Barre de membre */ #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; } /* Items du menu */ 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; } /* Position du bloc dans le site sur les petits écrans */ .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; } /* Conserve le pied de page sur une ligne */ body > footer { margin: 0 auto !important ; } footer .col4 { width: 100%; } #footerCopyright, #footerText, #footerSocials { display: flex; justify-content: center; } /* Message sur les cookies */ #cookieConsent { width: 90%; } /* Bannière masquable en petit écran */ .bannerDisplay { display: none; } /* Largeur du menu */ .navBodyWidth { width: 100%; } } /* Autres tailles d'écrans */ /* Tableau sur les écrans de petites tailles */ @media (max-width: 668px) { .table thead { display: none; } } /* Tableau sur les écrans de très petites tailles */ @media (max-width: 480px) { .table tr { display: block; margin-bottom: 10px; } .table td { display: block; text-align: right; width: auto; } }