www/prive/themes/spip/icons.css.html

   1 [(#REM)
   2
   3         Ce squelette definit les styles de l'espace prive
   4
   5         Note: l'entete "Vary:" sert a repousser l'entete par
   6         defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
   7         genant en cas de "rotation du cookie de session" apres
   8         un changement d'IP (effet de clignotement).
   9
  10         ATTENTION: il faut absolument le charset sinon Firefox croit que
  11         c'est du text/html !
  12         <style>
  13 ]
  14 #CACHE{3600*100,cache-client}
  15 #HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
  16 #HTTP_HEADER{Vary: Accept-Encoding}
  17
  18 #SET{iconfontsize,0.9em}
  19
  20 /* * Style des icones */
  21 /* structure html : <span class="icone danger horizontale s24 left"><a><img><b>texte</b></span> */
  22 .icone { display:block; margin:0;padding:0;text-align: center;position:relative;z-index:2; /*font-size: 10px;*/}
  23 .icone a,.icone .submit {display:block;margin:0 auto;width:72px;padding: 5px 0;border:0;cursor:hand;cursor:pointer; }
  24 .icone a:hover {text-decoration:none;}
  25 .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;}
  26 .icone a:hover img,.icone .submit:hover img  { background-color: #fff; border-color: #666; }
  27 .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}|mult{2}|div{#GET{iconfontsize}})em];line-height:1; }
  28 .icone a:hover b,.icone .submit:hover b { color: #000;}
  29
  30 /*form.bouton_action_post.icone,form.bouton_action_post.icone div,form.bouton_action_post.icone .submit {display:block;}*/
  31
  32
  33 /* alignement */
  34 .icone.left {float:#ENV{left};}
  35 .icone.right {float:#ENV{right};}
  36 .icone.center a,.icone.center .submit {margin:0 auto;}
  37 .icone.clearleft {clear:#ENV{left};}
  38 .icone.clearright {clear:#ENV{right};}
  39
  40 /* icone verticale : precision necessaire pour IEx */
  41 .lte7 .icone.verticale.left,.lte7 .icone.verticale.right {width:72px;}
  42
  43 /* icone horizontale */
  44 .icone.horizontale {}
  45 .icone.horizontale { display:block; clear: both;position:relative;margin:0;padding:2px;text-align: #ENV{left};padding-#ENV{left}:32px;}
  46 .icone.horizontale a,.icone.horizontale .submit {display:inline;width:auto;padding:0;}
  47 .lte7 .icone.horizontale a,.lte7 .icone.horizontale .submit{display:block;padding:5px 0;height: auto;}
  48 /* pour les navigateurs modernes */
  49 .icone.horizontale a,.icone.horizontale .submit {display:table-cell;vertical-align:middle;height:28px;}
  50 .icone.horizontale.right {text-align: #ENV{right};padding-#ENV{right}:32px;padding-#ENV{left}:2px;}
  51 .icone.horizontale a img,.icone.horizontale .submit img {padding:0;border:0;background:none;position:absolute;#ENV{left}:4px;top:50%;margin-top:-12px;}
  52 .icone.horizontale a b,.icone.horizontale .submit b {color:#666;display:inline;}
  53 .icone.horizontale a:hover b,.icone.horizontale .submit:hover b { color: #000;}
  54
  55 /* variantes sans texte ou sans image */
  56 .icones_img .icone.verticale b {display:none;}
  57 .icones_texte .icone img {display:none;}
  58
  59 .icones_texte .icone.horizontale {padding:2px;}
  60 .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;}
  61 .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; }
  62
  63 /* danger */
  64 .icone.danger {background:none;}
  65 .icone.danger a,.icone.danger .submit { background: url(#CHEMIN_IMAGE{rayures-sup.gif}); }
  66 .icone.danger a img,.icone.danger .submit img { background-color: #fff; border-color: #ff9999; }
  67 .icone.danger a:hover img,.icone.danger .submit:hover img { background-color: #fff; border-color: red; }
  68 .icone.horizontale.danger a,.icone.horizontale.danger .submit { background: none; }
  69 .icone.horizontale.danger a img,.icone.horizontale.danger .submit img { background: none; }
  70 .icone.horizontale.danger { background: url(#CHEMIN_IMAGE{rayures-sup.gif}); }
  71 .icones_texte .icone.horizontale.danger {background:none;}
  72 .icones_texte .icone.horizontale.danger a,.icones_texte .icone.horizontale.danger .submit { background: url(#CHEMIN_IMAGE{rayures-sup.gif}); }
  73
  74 /* cas particuliers */
  75 .icone.verticale.historique-24 { width: 90px; }
  76 .icone.verticale.suivi-forum-24 { width: 100px; }
  77
  78 .icone.verticale.edition_deja,.icone.verticale.edition_deja a,.icone.verticale.edition_deja a b {width: 100px;}
  79 .icone.verticale.edition_deja a b {height: [(#ENV{line-height}|mult{3}|div{#GET{iconfontsize}})em];}
  80
  81 /* icone en bord haut du cadre */
  82 .cadre-icone {position: absolute; top: -16px; #ENV{left}: 10px;z-index:1;}
  83
  84
  85 /* barre onglet historique
  86 <div class='barre_onglet'><ul class='clearfix'>
  87 <li><strong></strong><li><a></a></li>
  88 </ul></div>
  89 */
  90 /* * Style des onglets historiques */
  91
  92 .barre_onglet {padding:7px;clear:both;text-align:center;}
  93 .barre_onglet ul {
  94         display:-moz-inline-stack;
  95         display:inline-block;
  96         zoom:1;
  97         *display:inline;
  98         margin:0 auto;text-align:#ENV{left};padding:0;list-style:none;}
  99 .barre_onglet li {float:#ENV{left};border: 1px solid #ENV{foncee};margin:0;padding:0;margin-#ENV{right}: 3px;position:relative;list-style:none;}
 100 .barre_onglet .cadre-icone {top:-8px;#ENV{left}:4px;}
 101 .barre_onglet a,.barre_onglet strong {display:block;font-weight: bold;padding: 5px;text-decoration: none;padding-#ENV{left}:32px;background-color:#fff;}
 102 .barre_onglet strong {background-color: #ENV{foncee}; color: #fff;}
 103 .barre_onglet a:hover {background-color: #ENV{claire}; color: #fff;text-decoration: none;}
 104
 105
 106 /* onglets simple 1er et second niveau
 107 <div class='onglets_simple clearfix'><ul><li><strong></strong></li><li><a></a></li></ul></div>
 108 <div class='onglets_simple second clearfix'><ul><li><strong></strong></li><li><a></a></li></ul></div>
 109 */
 110 .onglets_simple { margin:1em 0;clear:#ENV{left};border-bottom:1px solid #ENV{foncee};padding-#ENV{left}:5px;}
 111 .onglets_simple ul {list-style:none;margin-#ENV{left}:1px;padding:0;}
 112 .onglets_simple ul li {float:#ENV{left};padding:0;margin:0;margin-bottom:-1px;}
 113
 114 .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 left;background-repeat:no-repeat;}
 115 .onglets_simple ul li strong,.onglets_simple ul li a:hover {background-color:#f8f7f3;}
 116 .onglets_simple ul li a:hover {cursor:hand;cursor:pointer;}
 117 .onglets_simple ul li strong {border-bottom:1px solid #f8f7f3;color:#555;}
 118 .onglets_simple .cadre-icone {display: none;}
 119
 120 .onglets_simple.second {font-size:0.9em;border:0;padding-#ENV{left}:0;}
 121 .onglets_simple.second ul li strong,.onglets_simple.second ul li a {margin-#ENV{left}:0px;margin-#ENV{right}:5px;margin-bottom:5px;}
 122 .onglets_simple.second ul li strong {border:1px solid #ENV{foncee};}
 123 .onglets_simple.second ul li strong,.onglets_simple.second ul li a:hover {background-color:#fff;}
 124
 125
 126 .iconeoff { padding: 3px; margin: 1px; border: 1px dashed #ccc; background-color: #f0f0f0; }
 127 .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; }
 128 .iconedanger { padding: 3px; margin: 1px; border: 1px dashed #000; background: url(#CHEMIN_IMAGE{rayures-sup.gif}); }
 129
 130 /* OLDIES anciennes icones issues de php */
 131 td.icone table {}
 132 td.icone a { color: #000; text-decoration: none; font-size: 10px; font-weight: bold; }
 133 td.icone a:hover { text-decoration: none; }
 134 td.icone a img { border: 0; }