www/prive/themes/spip/picker.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{claire,##ENV{couleur_claire,edf3fe}}
  19 #SET{foncee,##ENV{couleur_foncee,3874b0}}
  20 #SET{left,#ENV{ltr}|choixsiegal{left,left,right}}
  21 #SET{right,#ENV{ltr}|choixsiegal{left,right,left}}
  22
  23 /* Ancien selecteur de rubriques */
  24 .selecteur_parent{font-size: 90%; width: 99%; max-height: 24px;} /* appliquee sur le <select> */
  25 option.selec_rub { background-position: [(#GET{left})] center; background-image: url(#CHEMIN_IMAGE{rubrique-12.png}); background-repeat: no-repeat; padding-#GET{left}: 16px; }
  26 option.niveau_1 { font-weight: bold; background: #GET{claire}; background-image: url(#CHEMIN_IMAGE{secteur-12.png}); background-repeat:  no-repeat; color: #444;}
  27 option.niveau_2 { background:#eee; color: #202020; border-bottom: 1px solid #GET{claire}; }
  28 option.niveau_3 { background:#eee; color: #404040; }
  29 option.niveau_4 { background:#eee; color: #606060; }
  30 option.niveau_5 { background:#eee; color: #808080; }
  31 option.niveau_6 { background:#eee; color: #a0a0a0; }
  32
  33
  34 /* plongeur */
  35 div.petite-racine { margin-bottom: -5px; }
  36 div.petite-racine, a.petite-racine { background: [(#ENV{ltr}|choixsiegal{left,1,99})%] no-repeat; background-image: url(#CHEMIN_IMAGE{racine-12.png}); padding-#GET{left}: 15px; background-color: #fff; border: 1px solid #GET{foncee}; border-bottom: 0; width: 134px; }
  37 div.petite-rubrique, a.petite-rubrique { background: [(#ENV{ltr}|choixsiegal{left,1,99})%] no-repeat; background-image: url(#CHEMIN_IMAGE{rubrique-12.png}); padding-#GET{left}: 15px; }
  38 div.petit-secteur, a.petit-secteur { background: [(#ENV{ltr}|choixsiegal{left,1,99})%] no-repeat; background-image: url(#CHEMIN_IMAGE{secteur-12.png}); padding-#GET{left}: 15px; }
  39 div.rub-ouverte, a.rub-ouverte { padding-#GET{right}: 10px; background: url([(#CHEMIN_IMAGE{triangle-droite[(#GET{rtl})].gif})]) [(#GET{right})] center no-repeat; }
  40 /* selecteur ajax */
  41 #choix_parent_principal { background: #fff; border: 1px solid #GET{foncee}; position: relative; height: 170px; overflow: auto; margin-top:5px;}
  42 .recherche_rapide_parent {margin-top: -25px;float:right; }
  43 .rubrique_actuelle {height: 25px; }
  44 #selection_rubrique .informer { background: #fff; }
  45 .informer-auteur { background: #fff; padding: 5px; border-top: 0; }
  46
  47 #choix_parent .item { color: #666; background-color: #fff; }
  48 #choix_parent_principal .item { padding: 2px; display: block; }
  49 #choix_parent .item.on { color: #000; background-color: #ccc; }
  50 #choix_parent .item.on a {color:#000;}
  51 #choix_parent .item:hover a { color: #000; cursor: pointer; }
  52
  53 /* ----- */
  54
  55 /* Les éléments propres à chaque objet */
  56 <BOUCLE_objets(POUR){tableau (#REM|lister_tables_objets_sql)}>
  57 [(#SET{petite_icone, [(#CHEMIN_IMAGE{#VALEUR{icone_objet}-12.png}|sinon{[(#CHEMIN_IMAGE{#VALEUR{icone_objet}-16.png}|image_reduire{12}|extraire_attribut{src})]})]})]
  58 ul.item_picked li.#VALEUR{type} {padding-#GET{left}:15px;background-image:url(#GET{petite_icone});}
  59 .item_picker .[(#VALEUR{table_objet})] .type_objet {padding-#GET{left}:15px; background:url(#GET{petite_icone}) no-repeat[ (#GET{left}) ]center;}
  60 .item_picker .frame ul li.#VALEUR{type} {background:url(#GET{petite_icone}) no-repeat[ (#GET{left}) ]2px;}
  61 </BOUCLE_objets>
  62
  63 /* Styles des éléments déjà sélectionnés */
  64 ul.item_picked,fieldset ul.item_picked {list-style:none;margin:0;padding:0;float:left;}
  65 ul.item_picked li {margin:0 2px 2px;padding:2px;background:#eee;border:1px solid #GET{claire};float:#GET{left};clear:none;background-repeat:no-repeat;background-position: [(#GET{left}) ]center;}
  66 ul.item_picked li span.sep {display:none;}
  67 ul.item_picked li label {margin:0;display:inline;float:none;}
  68 .js ul.item_picked li .checkbox {display: none;}
  69
  70 ul.item_picked.select li {padding:2px 0;border:0;font-weight:bold;background:none;float:none;}
  71 ul.item_picked.select ul > li {float:#GET{left};}
  72 ul.item_picked.changing {}
  73
  74 /* Le bouton pour ouvrir le sélecteur */
  75 .picker_bouton {float:#GET{right};clear:both;}
  76
  77 /* Styles de la partie contenant le sélecteur */
  78 .item_picker {clear:#GET{left};font-size:0.95em;}
  79 .item_picker .navigateur{border:1px solid #GET{claire};padding:0.2em;width:20em;} /* pas trop large pour une meilleure lecture */
  80 .item_picker .chemin {background:#GET{claire}; margin:0 0 0.25em 0;padding:0.3em;clear:both;}
  81 .item_picker .chemin .on {margin:0;}
  82 .item_picker a.choisir_ici {display:block;text-align:center;margin:0.2em 0;}
  83 .item_picker a.choisir_ici span{padding-#GET{left}:18px;background:transparent url('#CHEMIN_IMAGE{ajouter-16.png}') no-repeat [ (#GET{left}) ] center;}
  84 .item_picker .liste {margin:0;max-height:300px;overflow:auto;}
  85 .item_picker .liste .type_objet {margin:0;}
  86 .selecteur_type_unique .item_picker .liste .type_objet{display:none;}
  87 .item_picker .liste ul {list-style:none;margin:0;padding:0;}
  88 .item_picker .liste li {display:block;clear:both;line-height:1.1em;list-style:none;margin:0;padding:0;position:relative;}
  89 .item_picker .liste li:hover {background-color:[#(#GET{claire}|couleur_eclaircir)];}
  90 .item_picker .liste a.ouvrir {color:black;text-decoration:none;display:block;line-height:16px;margin-#GET{right}:20px;padding:0.3em 0;padding-#GET{left}:2px;padding-#GET{right}:20px;background:transparent url('#CHEMIN_IMAGE{fleche-droite-16.png}') no-repeat [ (#GET{right}) ] 0.3em;}
  91 .item_picker .liste a.choisir {display:block;width:16px;height:16px;position:absolute;#GET{right}:0;top:0;padding:0.3em 2px;text-indent:-10000px;background:url('#CHEMIN_IMAGE{ajouter-16.png}') no-repeat center center;}
  92 .item_picker .liste a:hover,.item_picker .liste a:focus {background-color:#GET{claire};}
  93
  94 .item_picker .frame {background:#fff;border:1px solid #GET{foncee};width:159px;height:400px;float:#GET{left};overflow:auto;position:relative;}
  95 .cadre .cadre_padding .item_picker .frame {width:153px;}
  96 .fiche_objet .cadre .cadre_padding .item_picker .frame {width:148px;}
  97 .item_picker .frame.total_3 {margin-#GET{left}:-58px;border-#GET{left}:3px solid #GET{foncee};}
  98 .item_picker .frame.frame_0 {margin-#GET{left}:0;z-index:1000;}
  99 .item_picker .frame.frame_1 {z-index:1010;}
 100 .item_picker .frame.frame_2 {z-index:1020;}
 101 .item_picker .frame.frame_3 {z-index:1030;}
 102 .item_picker .frame.frame_4 {z-index:1040;}
 103
 104 .item_picker .frame .frame_close {float:#GET{right};}
 105 .item_picker .frame h2 {margin:0;padding:5px;background:[#(#GET{claire}|couleur_eclaircir)];font-size:1.3em;}
 106 .item_picker .frame .pagination {font-size:0.9em;}
 107
 108 .item_picker .frame ul {list-style:none;margin:0;padding:0;}
 109 .item_picker .frame ul li {display:block;clear:both;list-style:none;margin:0;padding:0 2px;padding-#GET{left}:15px;padding-#GET{right}:16px;position:relative;}
 110
 111 .item_picker .frame ul li:hover,.item_picker .frame ul li.on {background-color:[#(#GET{claire}|couleur_eclaircir)];}
 112 .item_picker .frame a:hover,.item_picker .frame a:hover .ouvrir,.item_picker .frame a:hover .add {background-color:#GET{claire};}
 113
 114 .item_picker .frame ul li .ouvrir {position:absolute;display:block;top:0px;#GET{right}:0px;}
 115 .item_picker .frame ul >li .add {float:#GET{left};clear:#GET{left};}
 116 .item_picker .frame ul li a {display:block;}
 117 .item_picker .frame a {text-decoration:none;}
 118
 119 .browser .choix_rapide {font-size:0.9em;}
 120 .browser #picker_id {padding:0;margin:0 5px;border:1px solid;}
 121
 122
 123 /*
 124    Selecteurs de rubrique / article
 125    ayant une classe li.selecteur_item
 126    n'ont pas de marge a gauche pour occuper toute la largeur
 127 */
 128 .formulaire_spip li.selecteur_item {
 129         padding-#GET{left}:10px;background:#fff;
 130 }
 131 .formulaire_spip li.selecteur_item label {
 132         margin-#GET{left}:0;display:block;float:left;padding:2px 0;
 133 }
 134