Deltacms/core/layout/mediaqueries_ok.css

336 lines
5.2 KiB
CSS

/**
* 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;
}
nav li:hover ul {
z-index: 8;
opacity: 1;
}
/* Barre de navigation fixe quand le menu est en-dehors du site et fixe*/
#navfixedlogout {
position: sticky;
top: 0;
z-index: 10;
}
#navfixedconnected {
top: 45px;
z-index: 10;
position: sticky;
}
/* 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 ;
}
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 a.disabled-link {
text-decoration:line-through;
}
nav{
padding: 0;
}
/*bandeau flex*/
nav #toggle {
display: flex;
align-items: center;
float: none;
}
nav #toggle #burgerIcon{
flex-basis:20%;
text-align: right;
}
nav #toggle #burgerText{
flex-basis:80%;
text-align: left;
margin-left: 10px;
}
nav #toggle #burgerIcon1, nav #toggle #burgerIcon2 {
flex-basis:40%;
text-align: left;
margin-left: 10px;
}
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;
width: 100%;
height: auto;
max-height: 80vh;
float: left;
overflow-x: hidden;
overflow-y: auto;
}
nav li {
display: block;
}
.navfixedburgerconnected {
position: fixed;
z-index: 11;
top: 90px;
padding: 0px;
/*pour fixed*/
width:100%;
}
.navfixedburgerlogout{
position: fixed;
z-index: 10;
top: 0;
padding: 0px;
/*pour fixed*/
width:100%;
}
.navfixedburgerconnected #menu, .navburgerconnected #menu{
height: auto;
max-height: 60vh;
}
.navfixedburgerconnected #menu a, .navfixedburgerlogout #menu a{
padding: 10px 10px;
}
/* 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 */
nav ul li span.zwiico-margin-left{
padding-left: 30px;
}
.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;
}
}
/* Menu burger sur très petit écran */
@media (max-width: 373px) {
.navfixedburgerconnected {
top: 135px;
}
}