www/plugins/auto/spip-bonux/spip20/style_prive_formulaires.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 [(#REM)
  24         En attendant que tous les formulaires soient ecrits avec la syntaxe reecommandee
  25         ce style permet d eviter d avoir une police surdimensionnee dans les textarea de cfg
  26 ]
  27 textarea {
  28         width: 97%;
  29         font-size:1em;
  30         margin:0;
  31 }
  32 .entete-formulaire{
  33         background:white;
  34         border:1px solid #GET{foncee};
  35         border-bottom:0;
  36         padding:0.5em;
  37         overflow:auto;
  38         zoom:1; /* correction IE6 */
  39 }
  40 .formulaire_spip .cadre{border: 1px solid #GET{foncee};}
  41
  42 .entete-formulaire p {margin:0 0 0.5em;}
  43
  44 /*
  45         Note sur ecran large et etroit, en [11846]
  46                 large = 540px (ou 600px!)
  47                 etroit = 505px
  48 */
  49
  50 /* Style des formulaires d'edition
  51 ----------------------------------------------- */
  52 .formulaire_spip {
  53         font-size:11px;
  54         line-height: 1.4em;
  55         padding:0;
  56         clear:both;
  57
  58         border: 1px solid #GET{foncee};
  59         color: #333;
  60         background: #fff [url((#CHEMIN{images/formulaire-editer.jpg}|image_sepia{#[(#GET{claire}|couleur_eclaircir)]}|image_aplatir{jpg}|extraire_attribut{src})) repeat-x bottom];
  61 }
  62
  63
  64 /*
  65 .cadre-formulaire{background:white;padding:0;}
  66 .entete-formulaire{padding:0.5em;}
  67 */
  68
  69 /* ul li */
  70 .formulaire_spip ul {
  71         margin: 0;
  72         padding: 0;
  73         list-style: none;
  74 }
  75 .formulaire_spip li {
  76         margin: 0;
  77         padding: 10px 10px 10px 10px;
  78         padding-#GET{left}:130px;
  79         clear:both;
  80         overflow:hidden;
  81         border-top: 1px solid #[(#GET{foncee}|couleur_eclaircir|couleur_eclaircir)];
  82 }
  83 /* Pour les cases à cocher */
  84 .formulaire_spip li.choix,
  85 .formulaire_spip li.editer_groupe_mots_associer,
  86 .formulaire_spip li.editer_groupe_mots_reglage_avance,
  87 .formulaire_spip li.editer_groupe_mots_editeur{
  88         padding-#GET{left}:10px;
  89 }
  90 .formulaire_spip li fieldset li {border:0; padding-top:5px; padding-bottom:5px;}
  91
  92 /* elements du formulaire */
  93 .formulaire_spip input.text,
  94 .formulaire_spip input.password,
  95 .formulaire_spip textarea,
  96 .formulaire_spip select {
  97         width: 97%;
  98         font-size:1em;
  99         margin:0;
 100 }
 101 .formulaire_spip input.submit,
 102 .formulaire_spip input.reset,
 103 .formulaire_spip input.button {
 104         width: auto;
 105 }
 106
 107 /* intitules (label) */
 108 .formulaire_spip li label {
 109         width: 120px;
 110         float:#GET{left};
 111         margin-#GET{left}:-125px;
 112         text-align: #GET{left};
 113         vertical-align: top;
 114         color:#555;
 115         font-weight:bold;
 116         /* pour IE6 */
 117         position:relative;
 118         display:inline;
 119 }
 120 /* pour les autres */
 121 .formulaire_spip ul>li label {
 122         display:block;
 123         position:static;
 124 }
 125
 126 .formulaire_spip li p {
 127         margin-top:0;
 128         margin-bottom:0;
 129 }
 130
 131 /* fieldset */
 132 .formulaire_spip li.fieldset {padding:0;}
 133 .formulaire_spip fieldset {
 134         margin:0;
 135         padding:0 0 5px 0;
 136         border:0;
 137 }
 138 .formulaire_spip li fieldset {
 139         border-top:1px solid #GET{claire};
 140         border-bottom:1px solid #GET{claire};
 141         background:transparent;
 142 }
 143 .formulaire_spip fieldset legend {
 144         padding:0.5em;
 145         font-weight:bold;
 146         font-style:italic;
 147         font-size:1.2em;
 148 }
 149 .formulaire_spip li fieldset legend {
 150         font-style:normal;
 151         font-size:1em;
 152         margin-#GET{left}:0px;
 153         line-height:0.6em;
 154         background:#fff; /* ie 6*/
 155 }
 156 .formulaire_spip li fieldset >legend {
 157         background:none; /* others */
 158 }
 159 .formulaire_spip li fieldset h3.legend {
 160         font-size:1.1em;
 161         color:#333;
 162         margin-top:0;
 163         background:#GET{claire};
 164         padding:2px 5px;
 165 }
 166
 167 /* champ des radio/checkbox
 168 *  on annule les decalages de label/champs
 169 *  lorsqu'ils sont inclus dans une class .champ
 170 *
 171 *  La liste par defaut est verticale
 172 *  pour l'avoir horizontale, il faut specifier :
 173 *  .formulaire_spip .formulaire_editer .editer_qqc .champ{display:inline;}
 174 */
 175 .formulaire_spip .choix label {float:none; margin-#GET{left}:5px; display:inline;color:#555 !important;font-weight:normal !important;width:auto;}
 176 .formulaire_spip .choix label input {vertical-align:middle;}
 177 .formulaire_spip .choix input.radio,
 178 .formulaire_spip .choix input.checkbox {width:auto;}
 179
 180 /* icone d'aide */
 181 /*.formulaire_spip li em.aide { float:#GET{right};margin-#GET{right}:-10px;}*/
 182
 183 /* boutons */
 184 .formulaire_spip .boutons,.boutons_formulaire {
 185         margin:0; clear:both;
 186         text-align: #GET{right};
 187         font-size: 1.2em;
 188         padding: 7px 1em;
 189         margin:0;
 190 }
 191 #navigation .formulaire_spip .boutons,.boutons_formulaire,#extra .formulaire_spip .boutons,.boutons_formulaire {
 192         padding: 5px;
 193 }
 194
 195 .boutons_formulaire {font-size:1em;}
 196 .formulaire_spip .boutons input.submit,.boutons_formulaire input.submit {
 197         margin-#GET{left}: 1em;
 198         padding: 0 1em;
 199         font-weight:normal;
 200 }
 201
 202
 203 /* obligatoire */
 204 .formulaire_spip li.obligatoire {
 205         background-color:[ #(#GET{claire}|couleur_eclaircir)];
 206 }
 207 .formulaire_spip li.obligatoire label {
 208         font-weight: bold;
 209         color:#000;
 210 }
 211
 212
 213 /* erreur */
 214 .formulaire_spip .erreur input.text,
 215 .formulaire_spip .erreur textarea {
 216         background-color: #FFCCCC;
 217         border-style: solid;
 218         border-color: #C30;
 219 }
 220 .formulaire_spip .erreur .erreur_message,
 221 .formulaire_spip em.attention {
 222         color: #C30;
 223         font-weight: bold;
 224 }
 225 .formulaire_spip .erreur_message{
 226         display:block;
 227 }
 228
 229 .formulaire_spip .reponse_formulaire{
 230         margin-#GET{left}:0.5em;
 231         margin-#GET{right}:0.5em;
 232         font-weight: bold;
 233         border:1px solid black;
 234         padding:5px;
 235 }
 236 /* message reussite ? */
 237 .formulaire_spip .reponse_formulaire_ok{
 238         border-color: #53AD20;
 239         background:#E0FFCF;
 240 }
 241 .formulaire_spip .reponse_formulaire_erreur{
 242         border-color: #C30;
 243         background:#FFD0BF;
 244 }
 245
 246 /* commentaires */
 247 .formulaire_spip .explication{  font-size:10px; padding:10px;}
 248 .formulaire_spip li >.explication{ padding:0;}
 249
 250 /* remarques importantes */
 251 .formulaire_spip em.attention{
 252         display:block;
 253         margin:0.5em;
 254         font-weight:normal;
 255 }
 256
 257
 258 /* barre d'outil */
 259 .formulaire_spip table.spip_barre{
 260         background:#aaa;
 261         border: 1px solid #666;
 262         width:90%; /* pour mettre a la meme taille que les champs de formulaire */
 263         background:none; border:0; margin:0; padding:0;/**/
 264 }
 265 .formulaire_spip table.spip_barre a img {
 266         background-color:#ccc;
 267         padding: 2px;
 268         border: 1px solid #666;
 269         margin-right:1px;
 270 }
 271 .formulaire_spip table.spip_barre a:hover img{
 272         background:white;
 273 }
 274
 275 /*
 276  * Formulaires compactes
 277  */
 278 .formulaire_spip_compact li,#navigation .formulaire_spip li,#extra .formulaire_spip li {padding:2px 5px;border:none;}
 279 .formulaire_spip_compact li label,#navigation .formulaire_spip li label,#extra .formulaire_spip li label {float:none;margin-#GET{left}:0;width:auto;}
 280 .formulaire_spip .editer_date select {width:auto;}
 281
 282
 283
 284 /*
 285  * Cas particuliers
 286  */
 287
 288 /* annuler les f@@@@ div de sa majeste */
 289 div.edition, div.label {display:inline;}
 290
 291 /* accepter la classe 'haut' pour mettre les blocs
 292    sur toute la largeur du formulaire comme la css du core... */
 293 .formulaire_spip li.haut {padding-left:5px;}
 294 .formulaire_spip li.haut label {margin-left:0px;margin-bottom:5px; display:block; float:none;width:auto;}
 295 .formulaire_spip li.haut textarea {width:98%;}
 296
 297
 298 .formulaire_editer .editer_parent {background:#eee;}
 299 .formulaire_editer .editer_parent #choix_parent {}
 300 .formulaire_editer .editer_parent #choix_parent_principal,
 301 .formulaire_editer .editer_parent #choix_parent_selection {margin-#GET{left}:-120px;}
 302
 303 #contenu .formulaire_editer .editer_titre input,
 304 #contenu .formulaire_editer .editer_nom input{font-size:1.2em; font-weight:bold;}
 305 .formulaire_editer .editer_chapo textarea{height:12em;}
 306
 307 /* le brouteur de rubrique en cas de petit ecran doit etre aussi plus petit ! */
 308 .etroit .formulaire_editer .editer_parent #titreparent{width:50% !important;}
 309
 310 /* pour mettre les text-area en grand...*/
 311 .formulaire_editer .editer_texte,
 312 .formulaire_editer .editer_chapo,
 313 .formulaire_editer .editer_descriptif {padding-left:5px;}
 314 .formulaire_editer .editer_texte label,
 315 .formulaire_editer .editer_chapo label,
 316 .formulaire_editer .editer_descriptif label {margin-left:0px;margin-bottom:5px; display:block; float:none;width:auto;}
 317 .formulaire_editer .editer_texte textarea,
 318 .formulaire_editer .editer_chapo textarea,
 319 .formulaire_editer .editer_descriptif textarea {width:98%;}
 320 .formulaire_editer .editer_texte table.spip_barre {width:98%;}
 321 /* */
 322
 323
 324 /* auteur */
 325 .formulaire_editer_auteur .editer_statut ul{margin:0; }
 326 .formulaire_editer_auteur .editer_statut li{list-style-position:inside; padding:0;}
 327 .formulaire_editer_auteur .editer_statut input[type=submit]{width:auto;}
 328
 329 .formulaire_editer_auteur li.editer_statut .instituer_auteur {margin-top:15px;margin-left:-125px;}
 330
 331 .formulaire_editer .editer_redacteurs_connectes p.explication{margin:0.5em;}
 332
 333 /* si on enleve le: ul fieldset{margin-left:-125px;} il faut remettre ceci : * /
 334 .formulaire_editer .editer_identification{padding-left:5px;}
 335 .formulaire_editer .editer_redacteurs_connectes{padding-left:5px;}
 336 .formulaire_editer .editer_referencement_automatise {padding-left:5px;}
 337 .formulaire_editer .editer_syndications {padding-left:5px;}
 338 .formulaire_editer .editer_liens_sites {padding-left:5px;}
 339 /* */
 340
 341 /* sites */
 342 .formulaire_editer .editer_referencement_automatise label {margin-left:0px;}
 343 .formulaire_editer .editer_referencement_automatise li {padding-left:5px;}
 344 .formulaire_editer .editer_referencement_automatise li label {display:block; float:none; width:auto;}
 345
 346
 347 /* breves */
 348 .formulaire_editer_breve .editer_statut{padding-#GET{left}:250px;}
 349 .formulaire_editer_breve .editer_statut label{width:240px;margin-#GET{left}:-245px;}
 350
 351
 352 /* navigateur de rubrique */
 353 .confirmer_deplacement input {
 354         float: #GET{left};
 355         margin-#GET{left}: -20px;
 356 }
 357
 358 /* barre typo */
 359
 360 table.spip_barre {
 361         background-color: #GET{foncee};
 362         border-left: 1px solid #GET{claire};
 363         border-right: 1px solid #GET{claire};
 364         padding: 3px;
 365         padding-bottom: 0px;
 366 }
 367
 368 table.spip_barre a img {padding: 3px; border: 1px outset #GET{claire}; }
 369 table.spip_barre a:hover img { background: #FFF; border: 1px solid #CC9; }
 370 table.spip_barre input.barre { width: 99%; background: transparent; border: 0; color: #F57900; }
 371
 372 /* retablir les ul.spip dans les explications */
 373
 374 .formulaire_spip ul.spip,.formulaire_spip ol.spip {
 375         margin:10px 0;
 376         margin-#GET{left}: 10px;
 377         list-style-type: disc;
 378         list-style-position: outside;
 379 }
 380 .formulaire_spip ol.spip {
 381         list-style-type: decimal;
 382 }
 383 .formulaire_spip ul.spip li {
 384         margin-#GET{left}: 10px;
 385         padding: 0;
 386         overflow:visible;
 387 }
 388
 389 .formulaire_spip a {color:[#(#GET{foncee}|couleur_foncer)];text-decoration:underline;}
 390
 391
 392 /* Style des formulaires de configuration
 393 ----------------------------------------------- */
 394 .formulaire_configurer {margin:2em 0;}
 395