Deltacms/core/layout/mediaqueries.css

/**
 * This file is part of DeltaCMS.
 * For full copyright and license information, please see the LICENSE
 * file that was distributed with this source code.
 * @author Sylvain Lelièvre <lelievresylvain@free.fr>
 * @copyright Copyright (C) 2021-2022, Sylvain Lelièvre
 * @license GNU General Public License, version 3
 * @link https://deltacms.fr/
 *
 * Delta was created from version 11.2.00.24 of ZwiiCMS
 * @author Rémi Jean <remi.jean@outlook.com>
 * @copyright Copyright (C) 2008-2018, Rémi Jean
 * @author Frédéric Tempez <frederic.tempez@outlook.com>
 * @copyright Copyright (C) 2018-2021, Frédéric Tempez
 */

/*					Ecrans >= 800px					*/

@media (min-width: 800px) {
	body {
	   margin: 0;
	}
/* Barre de membre */
	#bar #barLeft {
	   float: left;
	}
	#bar #barRight {
	   float: right;
	   font-size: 12px;
	}
/* Bannière */
	body > header {
	   margin: 0;
	}
	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;
	}
}

/*					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;
	}
}