www/prive/themes/spip/box_skins.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 [(#INCLURE{prive/themes/spip/box.css})]
  19 /* ajustement des marges selon grille verticale en em */
  20 .box{margin:[(#ENV{margin-bottom}|mult{1.5})em] 0;}
  21 .bd {padding:[(#ENV{margin-bottom}|div{2})em] 10px;}
  22 .bd > :first-child,.bd > :first-child > :first-child {margin-top:0;}
  23 .bd > :last-child {margin-bottom:0;}
  24 .hd, .ft {padding:[(#ENV{margin-bottom}|div{2})em] 10px;}
  25 .hd h1,.hd h2,.hd h3,.hd h4,.hd h5,.hd h6 {margin-bottom:0;}
  26
  27 /* **************** BLOCK SKINS ***************** */
  28 /* ====== Contour blocks ====== */
  29 /* remove *background-image:" to default to square corners for IE */
  30 /* ----- simple (extends box) ----- */
  31 .simple .inner {border:1px solid #ccc;background-color:#fcfcfc;color:#333;}
  32 .simple .inner .hd {}
  33 .simple b{}
  34 /* ----- info (extends box) ----- */
  35 .info .inner {border:2px solid #ENV{claire};background:#fcfcfc;}
  36 .info .inner .hd {}
  37 .info b{}
  38 /* ----- note (extends box) ----- */
  39 .note,.note .inner{border:1px solid #c2c2c2;}
  40 .note .inner{border-color:#fff; border-width:4px; background-color:[#(#ENV{claire}|couleur_eclaircir{0.85})];}
  41 .note .inner .hd {}
  42
  43 /* ----- raccourcis (extends box) ----- */
  44 .raccourcis .inner{border:1px solid #ccc;background-color:#eee;}
  45 .note .inner .hd {}
  46
  47 /* ----- important (extends box) ----- */
  48 .important .inner{border: 3px solid [(#ENV{foncee})]; border-bottom-width:10px;background:#fff;}
  49 .important b{}
  50
  51 /* ----- basic (extends box) ----- */
  52 .basic {/*margin-bottom: -1px*/}
  53 .basic .inner {/*padding-bottom: 1px;*/border: 1px solid #aaa;}
  54 .basic .inner .hd {}
  55 .basic b{}
  56
  57 /* ----- error, success, notice (extends box) ----- */
  58 .box.error, .box.success, .box.notice {padding:0;backround-image:none;}
  59 .error .inner,.success .inner,.notice .inner{border:2px solid;font-weight: normal;color:#333;}
  60 .error .bd,.success .bd,.notice .bd {padding-[(#ENV{left})]:40px;min-height:24px;background-repeat:no-repeat;background-position: 2px 5px;}
  61 .box.error .hd,.box.success .hd,.box.notice .hd {padding-[(#ENV{left})]:40px;}
  62 .error .ft,.success .ft,.notice .ft {padding-[(#ENV{left})]:40px;}
  63 .box.error .ft,.box.success .ft,.box.notice .ft {border-color:#ddd;background-color:#eee;}
  64
  65 .success .inner{color: #264409;border-color: #C6D880;background-color:#E6EFC2;}
  66 .success .bd{background-image:url(#CHEMIN_IMAGE{ok-32.png});}
  67 .box.success .hd {background-color:#C6DF61;}
  68 .box.success .hd h1,.box.success .hd h2,.box.success .hd h3,.box.success .hd h4,.box.success .hd h5,.box.success .hd h6 {background-color:#C6DF61;}
  69
  70 .error .inner{color: #8A1F11;border-color: #FBC2C4;background-color:#FBE3E4;}
  71 .error .bd{background-image:url(#CHEMIN_IMAGE{erreur-32.png});}
  72 .box.error .hd {background-color:#DF454F;color:#fff;}
  73 .box.error .hd h1,.box.error .hd h2,.box.error .hd h3,.box.error .hd h4,.box.error .hd h5,.box.error .hd h6 {background-color:#DF454F;color:#fff;}
  74
  75 .notice .inner{color: #514721;border-color: #FFD324;background-color:#FFF6BF;}
  76 .notice .bd{background-image:url(#CHEMIN_IMAGE{warning-32.png});}
  77 .box.notice .hd {background-color:#FFD83F;}
  78 .box.notice .hd h1,.box.notice .hd h2,.box.notice .hd h3,.box.notice .hd h4,.box.notice .hd h5,.box.notice .hd h6 {background-color:#FFD83F;}
  79
  80
  81 /* ====== Background blocks ====== */
  82 .highlight .inner{background-color:#ENV{claire};}
  83 .inverse .inner{background-color:#ENV{foncee};color:#ffffff}
  84
  85 /* ====== Block headers and footers ====== */
  86 .hd.titrem { background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
  87 background-color: [#(#ENV{foncee}|couleur_eclaircir)];color: #4A4A4A; font-size:[(#ENV{line-height}|mult{1})em];position:relative;line-height: 1;}
  88 .hd.titrem h1,.hd.titrem h2,.hd.titrem h3,.hd.titrem h4,.hd.titrem h5,.hd.titrem h6{ font-size: 1em; color:#4A4A4A;}
  89
  90 .section{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
  91 background-color: #ENV{foncee}; color: #4A4A4A;font-size:1.2em;position:relative;}
  92 .section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#4A4A4A;padding:0;margin:0;}
  93
  94 .bam{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
  95 background-color: [#(#ENV{foncee}|couleur_foncer)]; color: #fff;font-size:1.2em; position:relative;}
  96 .bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;margin:0;}
  97
  98 .topper{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
  99 background-color: #fff; color: #4A4A4A;font-size:1.2em; position:relative;}
 100 .topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4A4A4A;padding:0;margin:0;}
 101
 102 .act{   [background-color: #(#ENV{claire}|couleur_eclaircir);]
 103         [border-top: 1px solid (#ENV{claire});]
 104         margin-top:-1px;
 105         clear:both;
 106         text-align: #ENV{right};
 107 }
 108
 109 /* Cas particuliers */
 110 .simple.sous-rub .inner .hd {padding:0}
 111 .simple.sous-rub .inner .hd .logo {float:#ENV{right};margin:4px 5px 0;margin-#ENV{right}:-5px;}
 112 .simple.sous-rub .sous-sous-rub {margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;}
 113
 114 /* vieilles boites depliables/repliables
 115   encore maintenues mais depreciees
 116 */
 117 .titrem { font-weight: bold; }
 118 div.titrem, h3.titrem { display: block; padding-top: [(#ENV{margin-bottom}|div{2})em]; padding-bottom: [(#ENV{margin-bottom}|div{2})em]; background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;}
 119 div.titrem a.titremancre,h3.titrem a.titremancre {padding:15px 0 0 16px;background-position: [(#ENV{left})] top;background-repeat: no-repeat; position:relative;float:[(#ENV{left})];margin-[(#ENV{left})]:-16px;}
 120 /* Deplier / Replier */
 121 .deplie a.titremancre, .deplie a.titremancre, .depliant a.titremancre, .replie a.titremancre { height: 1px; padding-bottom: 0px; }
 122 .replie a.titremancre { background-image: url([(#CHEMIN_IMAGE{deplierhaut[(#ENV{rtl})].gif})]); }
 123 .titrem.hover { background-color: #ENV{claire}; }
 124 .deplie a.titremancre { background-image: url(#CHEMIN_IMAGE{deplierbas.gif}); }
 125 .impliable {}
 126 .js .blocreplie { display: none; }
 127 .js .titrem.blocreplie { display: block; }
 128 .blocdeplie { display: block; background: none; }
 129 .bloc_depliable .pagination{ white-space:normal; }