FrameBeurk File
Fmbk/Module/Zenpa/Style/styleSnow/styleSnow_patronPage.css.php
<?php //FrameBeurk V0.65 Copyright ToolOscope 2016. Licence CeCILL-C.
// Feuille de style Snow, patron Zenpa
if ($TRANSAC['Responsive']) {
?>
/* écrans de plus de 1048px (desktop) : menu à gauche et contenu à droite */
@media screen and (min-width:1048px) {
#header { width:100%; }
#gauche { float:left; width:228px; padding-left:10px; }
#haut, #gauche1, #gauche2, #gauche3 { width:100%; }
#haut1 { display:inline-block; width:770px; }
#haut2 { float:right; width:260px; } /* display:inline-block; vertical-align:bottom; width:260px; } */
#droite { margin-left:228px; min-width:800px; }
.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-left: 33%; }
#gauche1, #gauche2, #gauche3 { float:left; width:232px; }
#gauche1 {margin-left: -228px; } /* fonctionne de pair avec le padding-left: 33% du conteneur */
#haut { width:100%; position:relative; }
#haut2 { float:right; width:260px; }
#droite { width:auto; }
.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%; }
#gauche1, #gauche2, #gauche3 { float:left; width:33%; }
#haut { position:relative; }
#haut1 { width:100%; }
#haut2 { float:right; width:260px; }
#droite { width:auto; }
.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, #middler, #trailer { width:100%; }
#haut, #gauche { width:100%; }
#gauche1, #gauche2, #gauche3 { width:auto;}
#haut1, #haut2 { width:100% }
#droite { width:auto; }
.ColonneGauche, .ColonneDroite { clear:both; width:100% }
h2 { margin-left:2px; margin-right:2px; } /* { margin-left:5px; margin-right:auto; } */
#boutonTop, #boutonMenu, #boutonContenu, #boutonBas { display:block; }
}
/* imprimante */
@media print {
#haut, #gauche, #bas { display:none; }
#boutonTop, #boutonMenu, #boutonContenu, #boutonBas { display:none; }
}
<?php
} else { // non responsive
?>
#gauche { float:left; width:228px; }
#haut, #gauche1, #gauche2, #gauche3 { width:100%; }
#droite { margin-left:228px; min-width:800px; }
#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
?>
#header, #middler, #trailer { float:left; clear:both; }
.ColonneGauche, .ColonneDroite { float:left; padding-left:2px; padding-right: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']['Snow']['erreur']; ?>;
text-decoration:underline;
}
body {
margin:0px;
background-color:#<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['fond0']; ?>;
color:#000000;
font-family:Arial,sans-serif;
line-height:150%;
}
input, select, textarea, button {
font-family:inherit;
font-size:inherit;
}
div {
<?php echo Zenpa_prefixePropriete('box-sizing', 'border-box'); ?>
}
#header {
background-color:#<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['fondMenu1']; ?>;
color:<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['encreMenu']; ?>;
text-shadow: 2px 2px 3px #<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['fond2']; ?>;
/*<?php echo Zenpa_prefixeValeurPropriete('background-image', 'linear-gradient',
'(to bottom, #' . $CONFIG['Controle']['Palette']['_site']['Snow']['fondMenu1'] . ', #' . $CONFIG['Controle']['Palette']['_site']['Snow']['fondMenu2'] . ', #' . $CONFIG['Controle']['Palette']['_site']['Snow']['fondMenu2'] . ')');
?>*/
}
#middler {
padding:0px;
color:#000000;
/*float:left;*/
}
#haut, #haut1, #haut2, #haut3 {
overflow:hidden;
}
#haut1 {
padding-left:5px;
padding-top:12px;
padding-bottom:12px;
font-size:180%;
font-weight:bold;
text-align:center;
}
#gauche {
overflow:hidden;
vertical-align:top;
background-color:#<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['fondMenu1']; ?>;
color:<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['encreMenu']; ?>;
/*<?php echo Zenpa_prefixeValeurPropriete('background-image', 'linear-gradient',
'(to bottom, #' . $CONFIG['Controle']['Palette']['_site']['Snow']['fondMenu2']
. ', #' . $CONFIG['Controle']['Palette']['_site']['Snow']['fondMenu2']
. ', #' . $CONFIG['Controle']['Palette']['_site']['Snow']['fondMenu1'] . ')');
?>*/
}
#gauche1, #gauche2, #gauche3 {
margin-top:6px;
border-right:2px solid #<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['fond2']; ?>;
}
#droite1 {
margin:0px
}
#droite {
overflow:hidden;
margin-top:2px;
margin-bottom:2px;
margin-right:0px;
padding:2px;
}
#droite2 {
clear:both;
text-align:center;
font-size:80%;
font-style:italic;
margin-top:15px;
margin-left:auto;
margin-right:auto;
padding-top:3px;
width:80%;
}
#droite li {
margin-top:10px;
}
#droite ul, #droite ol {
margin-bottom:10px;
padding-left:4%;
}
#droite ul {
list-style-type:disc;
}
#trailer {
padding-left:2%;
}
#bas1 {
color:#<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['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%;
text-shadow: 2px 2px 3px #<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['fond3']; ?>;
}
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;
}
/* 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;
background-color:#<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['fondMenu1']; ?>;
color:<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['encreMenu']; ?>;
text-shadow: 1px 1px 3px #<?php echo $CONFIG['Controle']['Palette']['_site']['Snow']['fond0']; ?>;
<?php echo Zenpa_prefixeValeurPropriete('background-image', 'linear-gradient',
'(to bottom, #' . $CONFIG['Controle']['Palette']['_site']['Snow']['fond1'] . ', #' . $CONFIG['Controle']['Palette']['_site']['Snow']['fond2'] . ', #' . $CONFIG['Controle']['Palette']['_site']['Snow']['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;
}
