FrameBeurk File
Fmbk/Module/Zenpa/Style/styleSweets/styleSweets_patronPage.css.php
<?php //FrameBeurk V0.65 Copyright ToolOscope 2016. Licence CeCILL-C.
// Feuille de style Sweets, patron Zenpa
if ($TRANSAC['Responsive']) {
?>
/* écrans de plus de 1048px (desktop) : menu à gauche et contenu à droite */
@media screen and (min-width:1048px) {
#header, #middler, #trailer { width:1020px; margin-left:auto; margin-right:auto; }
#gauche { float:left; width:228px; padding:2px; }
#haut, #gauche1, #gauche2, #gauche3 { width:100%; }
#droite { float:left; width:790px; }
#haut1 { display:inline-block; width:760px; }
#haut2 { float:right; width:260px; }
.ColonneGauche, .ColonneDroite { clear:none; width:50% }
h2 { margin-left:20%; margin-right:20%; }
#boutonTop, #boutonMenu, #boutonContenu, #boutonBas { display:none; }
}
/* écrans de moins de 1048px (tablettes) : menus en haut et contenu à bas */
@media screen and (min-width:720px) and (max-width:1047px) {
#header, #middler, #trailer { width:100%; }
#gauche { width:100%; padding:2px; padding-left:33%; }
#gauche1, #gauche2, #gauche3 { float:left; width:228px; }
#gauche1 {margin-left: -228px; } /* fonctionne de pair avec le padding-left: 33% du conteneur */
#haut { width:100%; }
#haut2 { float:right; width:260px;}
.ColonneGauche, .ColonneDroite { clear:none; width:50% }
h2 { margin-left:10%; margin-right:10%; }
#boutonTop, #boutonMenu, #boutonContenu, #boutonBas { display:block; }
}
/* écrans de moins de 720px (mobiles en payage) : menus ajustés à la largeur*/
@media screen and (min-width:520px) and (max-width:719px) {
#header, #middler, #trailer { width:100%; }
#gauche { width:100%; padding:2px; }
#gauche1, #gauche2, #gauche3 { float:left; width:33%; }
#haut { position:relative; }
#haut1 { width:100%; }
#haut2 { float:right; width:260px; }
.ColonneGauche, .ColonneDroite { clear:none; width:50% }
h2 { margin-left:5%; margin-right:5%; }
#boutonTop, #boutonMenu, #boutonContenu, #boutonBas { display:block; }
}
/* écrans de moins de 520px (mobiles en portrait) : menus les uns en dessous des autres*/
@media screen and (max-width:519px) {
#header, #haut, #middler, #trailer { width:100%; }
#gauche { width:100%; padding:2px; }
#gauche1, #gauche2, #gauche3 { width:99%; }
#haut1, #haut2 { width:100% }
.ColonneGauche, .ColonneDroite { clear:both; width:100% }
h2 { margin-left:2px; margin-right:2px; }
#boutonTop, #boutonMenu, #boutonContenu, #boutonBas { display:block; }
}
/* imprimante */
@media print {
#haut, #gauche, #bas { display:none; }
#boutonTop, #boutonMenu, #boutonContenu, #boutonBas { display:none; }
}
<?php
} else { // non responsive
?>
/* écrans de plus de 1048px (desktop) : menu à gauche et contenu à droite */
#header, #middler, #trailer { width:1020px; margin-left:auto; margin-right:auto; }
#gauche { float:left; width:228px; padding:2px;}
#haut, #gauche1, #gauche2, #gauche3 { width:100%; }
#droite { float:left; width:790px; }
#haut1 { display:inline-block; width:750px; }
#haut2 { display:inline-block; vertical-align:bottom; width:260px; }
.ColonneGauche, .ColonneDroite { clear:none; width:50% }
h2 { margin-left:20%; margin-right:20%; }
#boutonTop, #boutonMenu, #boutonContenu, #boutonBas { display:none; }
<?php
} // éléments indépendants du responsive
?>
.ColonneGauche, .ColonneDroite { float:left; }
#contenu { margin:2px;}
a:link, a:visited {
color:inherit;
text-decoration:none;
}
a:hover {
color:inherit;
text-decoration:underline;
}
a:active {
color:#<?php echo $CONFIG['Controle']['Palette']['_site']['Sweets']['erreur']; ?>;
text-decoration:underline;
}
body {
margin:0px;
background-color:#<?php echo $CONFIG['Controle']['Palette']['_site']['Sweets']['fond1']; ?>;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
line-height:150%;
}
input, select, textarea, button {
font-family:inherit;
font-size:inherit;
}
div {
<?php echo Zenpa_prefixePropriete('box-sizing', 'border-box'); ?>
}
#middler {
background-color:#<?php echo $CONFIG['Controle']['Palette']['_site']['Sweets']['fond2']; ?>;
padding:0px;
<?php echo Zenpa_prefixePropriete('border-radius', '8px'); ?>
<?php echo Zenpa_prefixePropriete('box-shadow', '2px 2px 2px -1px silver, inset 2px 2px 2px -1px white;'); ?>
}
#gauche {
overflow:hidden;
}
#haut1 {
padding-top:12px;
padding-bottom:12px;
font-size:180%;
font-weight:bold;
text-align:center
}
#droite {
overflow:hidden;
padding:2px;
}
#droite1 {
margin:0px
}
#droite2 {
clear:both;
text-align:center;
margin-top:15px;
font-size:80%;
font-style:italic;
}
#droite li {
margin-top:10px;
margin-left
}
#droite ul, #droite ol {
margin-bottom:10px;
margin-left:10px;
padding-left:4%;
}
#droite ul {
list-style-type:disc;
}
#bas1 {
color:#<?php echo $CONFIG['Controle']['Palette']['_site']['Sweets']['infos']; ?>;
}
form {
margin:0px;
padding:0px;
}
fieldset {
margin:0px;
border:0px;
padding:0px;
}
img {
margin:0px;
padding:0px;
border:none;
}
#droite img {
display:block;
margin:5px 3%;
max-width:94%;
}
hr {
width:60%;
margin:auto;
text-align:center; /* pour IE*/
Clear:both;
}
table {
padding:0px;
border:none;
border-spacing:3px;
text-align:left;
vertical-align:top;
}
h1 {
text-align:center;
line-height:120%;
}
h2 {
clear:both;
text-align:center;
margin-top:15px;
margin-bottom:5px;
/* margin left et right en fonction de la taille de l'écran */
padding:5px;
<?php echo Zenpa_prefixePropriete('border-radius', '5px'); ?>
<?php echo Zenpa_prefixePropriete('box-shadow', '2px 2px 2px -1px silver, inset 2px 2px 2px -1px white'); ?>
}
/* rend le fond inaccessible en cas de pop-up*/
#popupBackground{
z-index:1;
position:fixed;
_position:absolute; /* IE6 */
height:100%;
width:100%;
top:0;
left:0;
background-color: rgb(30, 30, 30);
background-color: rgba(30, 30, 30, 0.5);
}
/* table des requêtes SQL (quand $CONFIG['Param']['LogSQLTransac'] est activé) */
table.RequetesSQL {
margin: 0.5%;
}
table.RequetesSQL tr td {
margin:3px;
padding:3px 6px 3px 6px;
<?php echo Zenpa_prefixePropriete('border-radius', '3px'); ?>
<?php echo Zenpa_prefixePropriete('box-shadow', '2px 2px 2px -1px silver, inset 2px 2px 2px -1px white'); ?>
background-color:#<?php echo $CONFIG['Controle']['Palette']['_site']['Sweets']['fond2']; ?>;
}
/* boutons de positionnement rapide */
#boutonTop, #boutonMenu, #boutonContenu, #boutonBas {
position:fixed;
right:0;
font-size:250%;
color: rgb(255, 255, 128);
color: rgba(255, 255, 128, 0.7);
text-shadow: 7px 0px 7px #FFFF80;
text-decoration:none;
}
#boutonTop {
top:10%;
}
#boutonMenu{
top:35%;
}
#boutonContenu{
top:60%;
}
#boutonBas{
top:85%;
}
.niv1 {
display:block;
margin-bottom:10px;
font-size:120%;
font-weight:bold;
text-decoration:underline;
}
.niv2 {
display:block;
font-size:110%;
font-weight:bold;
}