137 lines
7.7 KiB
HTML
137 lines
7.7 KiB
HTML
[(#REM)
|
|
|
|
Ce squelette definit les styles de l'espace prive
|
|
|
|
Note: l'entete "Vary:" sert a repousser l'entete par
|
|
defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
|
|
genant en cas de "rotation du cookie de session" apres
|
|
un changement d'IP (effet de clignotement).
|
|
|
|
ATTENTION: il faut absolument le charset sinon Firefox croit que
|
|
c'est du text/html !
|
|
<style>
|
|
]
|
|
#CACHE{3600*100,cache-client}
|
|
#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
|
|
#HTTP_HEADER{Vary: Accept-Encoding}
|
|
|
|
#SET{iconfontsize,0.9em}
|
|
|
|
/* * Style des icones */
|
|
/* structure html : <span class="icone danger horizontale s24 left"><a><img><b>texte</b></span> */
|
|
.icone { display:block; margin:0;padding:0;text-align: center;position:relative;z-index:2; /*font-size: 10px;*/}
|
|
.icone a,.icone .submit {display:block;margin:0 auto;width:72px;padding: 5px 0;border:0;cursor:hand;cursor:pointer; }
|
|
.icone a:hover {text-decoration:none;}
|
|
.icone a img,.icone .submit img {margin: 0 auto; display: inline; padding: 4px; background-color: #eee; border: 2px solid #ENV{foncee}; background-repeat:no-repeat;background-position: center center;}
|
|
.icone a:hover img,.icone .submit:hover img { background-color: #fff; border-color: #666; }
|
|
.icone a b,.box .icone a b,.icone .submit b,.box .icone .submit b { font-weight: bold; color: #ENV{foncee}; display: block; margin: 2px auto; width: 100%; font-size:#GET{iconfontsize};height: [(#ENV{line-height}|strmult{2}|strdiv{#GET{iconfontsize}})em];line-height:1; }
|
|
.icone a:hover b,.icone .submit:hover b { color: #000;}
|
|
|
|
/*form.bouton_action_post.icone,form.bouton_action_post.icone div,form.bouton_action_post.icone .submit {display:block;}*/
|
|
|
|
|
|
/* alignement */
|
|
.icone.left {float:#ENV{left};}
|
|
.icone.right {float:#ENV{right};}
|
|
.icone.center {clear:both;}
|
|
.icone.center a,.icone.center .submit {margin:0 auto;}
|
|
.icone.clearleft {clear:#ENV{left};}
|
|
.icone.clearright {clear:#ENV{right};}
|
|
|
|
/* icone verticale : precision necessaire pour IEx */
|
|
.lte7 .icone.verticale.left,.lte7 .icone.verticale.right {width:72px;}
|
|
|
|
/* icone horizontale */
|
|
.icone.horizontale {}
|
|
.icone.horizontale { display:block; clear: both;position:relative;margin:0;padding:2px;text-align: #ENV{left};padding-#ENV{left}:32px;}
|
|
.icone.horizontale a,.icone.horizontale .submit {display:inline;width:auto;padding:0;position: static}
|
|
.lte7 .icone.horizontale a,.lte7 .icone.horizontale .submit{display:block;padding:5px 0;height: auto;}
|
|
/* pour les navigateurs modernes */
|
|
.icone.horizontale a,.icone.horizontale .submit {display:table-cell;vertical-align:middle;height:28px;}
|
|
.icone.horizontale.right {text-align: #ENV{right};padding-#ENV{right}:32px;padding-#ENV{left}:2px;}
|
|
.icone.horizontale a img,.icone.horizontale .submit img {padding:0;border:0;background:none;position:absolute;#ENV{left}:4px;top:50%;margin-top:-12px;}
|
|
.icone.horizontale a b,.icone.horizontale .submit b {color:#666;display:inline;}
|
|
.icone.horizontale a:hover b,.icone.horizontale .submit:hover b { color: #000;}
|
|
|
|
/* variantes sans texte ou sans image */
|
|
.icones_img .icone.verticale b {display:none;}
|
|
.icones_texte .icone img {display:none;}
|
|
|
|
.icones_texte .icone.horizontale {padding:2px;}
|
|
.icones_texte .icone.horizontale a,.icones_texte .icone.horizontale .submit {display:block;padding:7px;height:auto;color: #606060;border: 1px solid #ddd; background-color: #f0f0f0;}
|
|
.icones_texte .icone.horizontale a:hover,.icones_texte .icone.horizontale .submit:hover { text-decoration: none; color: #000; border-#ENV{right}: solid 1px #fff; border-bottom: solid 1px #fff; border-#ENV{left}: solid 1px #666; border-top: solid 1px #666; background-color: #eee; }
|
|
|
|
/* danger */
|
|
.icone.danger {background:none;}
|
|
.icone.danger a,.icone.danger .submit { background: url(#CHEMIN_IMAGE{rayures-sup.gif}); }
|
|
.icone.danger a img,.icone.danger .submit img { background-color: #fff; border-color: #ff9999; }
|
|
.icone.danger a:hover img,.icone.danger .submit:hover img { background-color: #fff; border-color: red; }
|
|
.icone.horizontale.danger a,.icone.horizontale.danger .submit { background: none; }
|
|
.icone.horizontale.danger a img,.icone.horizontale.danger .submit img { background: none; }
|
|
.icone.horizontale.danger { background: url(#CHEMIN_IMAGE{rayures-sup.gif}); }
|
|
.icones_texte .icone.horizontale.danger {background:none;}
|
|
.icones_texte .icone.horizontale.danger a,.icones_texte .icone.horizontale.danger .submit { background: url(#CHEMIN_IMAGE{rayures-sup.gif}); }
|
|
|
|
/* cas particuliers */
|
|
.icone.verticale.historique-24 { width: 90px; }
|
|
.icone.verticale.suivi-forum-24 { width: 100px; }
|
|
|
|
.icone.verticale.edition_deja,.icone.verticale.edition_deja a,.icone.verticale.edition_deja a b {width: 100px;}
|
|
.icone.verticale.edition_deja a b {height: [(#ENV{line-height}|strmult{3}|strdiv{#GET{iconfontsize}})em];}
|
|
|
|
/* icone en bord haut du cadre */
|
|
.cadre-icone {position: absolute; top: -16px; #ENV{left}: 10px;z-index:1;}
|
|
|
|
|
|
/* barre onglet historique
|
|
<div class='barre_onglet'><ul class='clearfix'>
|
|
<li><strong></strong><li><a></a></li>
|
|
</ul></div>
|
|
*/
|
|
/* * Style des onglets historiques */
|
|
|
|
.barre_onglet {padding:7px;clear:both;text-align:center;}
|
|
.barre_onglet ul {
|
|
display:-moz-inline-stack;
|
|
display:inline-block;
|
|
zoom:1;
|
|
*display:inline;
|
|
margin:0 auto;text-align:#ENV{left};padding:0;list-style:none;}
|
|
.barre_onglet li {float:#ENV{left};border: 1px solid #ENV{foncee};margin:0;padding:0;margin-#ENV{right}: 3px;position:relative;list-style:none;}
|
|
.barre_onglet .cadre-icone {top:-8px;#ENV{left}:4px;}
|
|
.barre_onglet a,.barre_onglet strong {display:block;font-weight: bold;padding: 5px 8px;text-decoration: none;background-color:#fff;}
|
|
.barre_onglet .cadre-icone+a,.barre_onglet .cadre-icone+strong {padding-#ENV{left}:32px;}
|
|
|
|
.barre_onglet strong {background-color: #ENV{foncee}; color: #fff;}
|
|
.barre_onglet a:hover {background-color: #ENV{claire}; color: #fff;text-decoration: none;}
|
|
|
|
|
|
/* onglets simple 1er et second niveau
|
|
<div class='onglets_simple clearfix'><ul><li><strong></strong></li><li><a></a></li></ul></div>
|
|
<div class='onglets_simple second clearfix'><ul><li><strong></strong></li><li><a></a></li></ul></div>
|
|
*/
|
|
.onglets_simple { margin:1em 0;clear:#ENV{left};border-bottom:1px solid #ENV{foncee};padding-#ENV{left}:5px;}
|
|
.onglets_simple ul {list-style:none;margin-#ENV{left}:1px;padding:0;}
|
|
.onglets_simple ul li {float:#ENV{left};padding:0;margin:0;margin-bottom:-1px;}
|
|
|
|
.onglets_simple ul li strong,.onglets_simple ul li a {display:block;float:#ENV{left};padding:4px 7px;border:1px solid #ENV{foncee};margin-#ENV{left}:5px;background-color:#eee;background-position:center #ENV{left};background-repeat:no-repeat;}
|
|
.onglets_simple ul li strong,.onglets_simple ul li a:hover {background-color:#f8f7f3;}
|
|
.onglets_simple ul li a:hover {cursor:hand;cursor:pointer;}
|
|
.onglets_simple ul li strong {border-bottom:1px solid #f8f7f3;color:#555;}
|
|
.onglets_simple .cadre-icone {display: none;}
|
|
|
|
.onglets_simple.second {font-size:0.9em;border:0;padding-#ENV{left}:0;}
|
|
.onglets_simple.second ul li strong,.onglets_simple.second ul li a {margin-#ENV{left}:0px;margin-#ENV{right}:5px;margin-bottom:5px;}
|
|
.onglets_simple.second ul li strong {border:1px solid #ENV{foncee};}
|
|
.onglets_simple.second ul li strong,.onglets_simple.second ul li a:hover {background-color:#fff;}
|
|
|
|
|
|
.iconeoff { padding: 3px; margin: 1px; border: 1px dashed #ccc; background-color: #f0f0f0; }
|
|
.iconeon { cursor: pointer; padding: 3px; margin: 1px; border-#ENV{right}: solid 1px #fff; border-bottom: solid 1px #fff; border-#ENV{left}: solid 1px #666; border-top: solid 1px #666; background-color: #eee; }
|
|
.iconedanger { padding: 3px; margin: 1px; border: 1px dashed #000; background: url(#CHEMIN_IMAGE{rayures-sup.gif}); }
|
|
|
|
/* OLDIES anciennes icones issues de php */
|
|
td.icone table {}
|
|
td.icone a { color: #000; text-decoration: none; font-size: 10px; font-weight: bold; }
|
|
td.icone a:hover { text-decoration: none; }
|
|
td.icone a img { border: 0; }
|