www/prive/style_prive_formulaires.html

   1 #CACHE{0}
   2 [(#REM)
   3
   4         Ce squelette definit les styles de l'espace prive
   5
   6         Note: l'entete "Vary:" sert a repousser l'entete par
   7         defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
   8         genant en cas de "rotation du cookie de session" apres
   9         un changement d'IP (effet de clignotement).
  10
  11         ATTENTION: il faut absolument le charset sinon Firefox croit que
  12         c'est du text/html !
  13         <style>
  14 ]
  15 #CACHE{3600*100,cache-client}
  16 #HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
  17 #HTTP_HEADER{Vary: Accept-Encoding}
  18
  19 #SET{claire,##ENV{couleur_claire,edf3fe}}
  20 #SET{foncee,##ENV{couleur_foncee,3874b0}}
  21 #SET{left,#ENV{ltr}|choixsiegal{left,left,right}}
  22 #SET{right,#ENV{ltr}|choixsiegal{left,right,left}}
  23
  24 .entete-formulaire{
  25         background:white;
  26         border:1px solid #GET{foncee};
  27         border-bottom:0;
  28         padding:0.5em;
  29         overflow:auto;
  30         zoom:1; /* correction IE6 */
  31 }
  32 .formulaire_spip .cadre{border: 1px solid #GET{foncee};}
  33
  34 /*
  35         Note sur ecran large et etroit, en [11846]
  36                 large = 540px (ou 600px!)
  37                 etroit = 505px
  38 */
  39
  40
  41 /* elements du formulaire */
  42 .formulaire_spip input.text,
  43 .formulaire_spip input.password,
  44 .formulaire_spip textarea,
  45 .formulaire_spip select
  46 {
  47         /*display: block;*/
  48         font-size:1.05em;
  49         font-family: verdana;
  50         margin:0;
  51         padding: 3px;
  52         width: 100%;
  53         *width: 96%;
  54         box-sizing: border-box;
  55         -webkit-box-sizing: border-box;
  56         -moz-box-sizing: border-box;
  57         -ms-box-sizing: border-box;
  58 }
  59
  60
  61 .formulaire_spip li .erreur_message {
  62         display: block;
  63         border: 1px solid #GET{claire};
  64         border-bottom: 0px;
  65         color: red;
  66         background-color: #fed7d7;
  67         padding: 3px;
  68         width: 100%;
  69         box-sizing: border-box;
  70         -webkit-box-sizing: border-box;
  71         -moz-box-sizing: border-box;
  72         -ms-box-sizing: border-box;
  73 }
  74
  75 .formulaire_spip .reponse_formulaire_erreur,
  76 .formulaire_spip .reponse_formulaire_ok {
  77         font-weight: bold;
  78         margin:10px;
  79 }
  80 .formulaire_spip .reponse_formulaire_erreur {
  81         color: #C30;
  82         border:2px solid #c30;
  83         padding:5px;
  84 }
  85 .formulaire_spip .reponse_formulaire_ok {
  86         color: #53AD20;
  87 }
  88
  89
  90 /* Explications */
  91 .formulaire_spip .explication {
  92         margin: 0px;
  93         display: -moz-inline-box;
  94         display: inline-block;
  95         width: 100%;
  96         *width: 96%;
  97         box-sizing: border-box;
  98         -webkit-box-sizing: border-box;
  99         -moz-box-sizing: border-box;
 100         -ms-box-sizing: border-box;
 101         border: 1px solid #GET{claire};
 102         border-bottom: 0px;
 103         padding: 3px;
 104         font-size:10px;
 105         background-color: #dddddd;
 106 }
 107 .formulaire_spip .explication a {color:[#(#GET{foncee}|couleur_foncer)];}
 108 /* Remarques importantes */
 109 .formulaire_spip em.attention { display: block; margin: 0.5em; font-weight: normal; }
 110
 111
 112 .formulaire_spip textarea {
 113         padding: 10px 5px;
 114         overflow: auto;
 115         font-size: 1.05em;
 116         line-height: 1.4em;
 117 }
 118 .formulaire_spip input.submit,
 119 .formulaire_spip input.reset,
 120 .formulaire_spip input.button {
 121         width: auto;
 122 }
 123
 124 /* sauf dans les petits cf. http://trac.rezo.net/trac/spip/ticket/1484 */
 125 .document .formulaire_spip select {
 126         display: inline;
 127         font-size:0.8em;
 128         margin:0;
 129         width: auto;
 130         border: 1px solid #GET{claire};
 131         padding: 2px;
 132 }
 133
 134 /* icone d'aide */
 135 .formulaire_spip li em.aide {
 136         padding-top: 0px;
 137 }
 138
 139
 140
 141 /* Style des formulaires d'edition
 142 ----------------------------------------------- */
 143 .formulaire_spip {
 144         font-size:11px;
 145         line-height: 1.4em;
 146         padding:0;
 147         clear:both;
 148
 149         border: 1px solid #GET{foncee};
 150         color: #333;
 151         background-color: #f8f8f8;
 152 }
 153
 154 .formulaire_spip form {
 155         margin: 0px;
 156 }
 157
 158 /* ul li */
 159 .formulaire_spip ul {
 160         margin: 0;
 161         padding: 5px 0;
 162         list-style: none;
 163 }
 164 .formulaire_spip ul li ul {
 165         padding-bottom: 0px;
 166 }
 167 .formulaire_spip li {
 168         margin: 0;
 169         padding: 5px 10px;
 170         clear:both;
 171         overflow:hidden;
 172 }
 173
 174 /* annuler les f@@@@ div de sa majeste */
 175 div.edition, div.label {display:inline;}
 176
 177 /* Formulaires alignes a gauche
 178 c'est le par defaut des formulaires de Spip */
 179 .formulaire_spip li,
 180 .formulaire_spip li.gauche {padding-#GET{left}:140px;}
 181
 182 .formulaire_spip li label,
 183 .formulaire_spip li.gauche label {
 184         width: 114px;
 185         float:#GET{left};
 186         margin-#GET{left}:-130px;
 187         text-align: #GET{left};
 188         /*vertical-align: top;*/
 189         /* for IE 6*/
 190         position:relative;
 191         display:inline;
 192
 193         color: #444;
 194         line-height: 11px;
 195         font-family: verdana, arial, helvetica, sans;
 196
 197         padding-top: 4px;
 198         padding-bottom: 6px;
 199 }
 200 .formulaire_spip ul>li label,
 201 .formulaire_spip ul>li.gauche label {
 202         display:block;
 203         position:static;
 204 }
 205
 206 .formulaire_spip li.obligatoire label,
 207 .formulaire_spip li.obligatoire.gauche label {
 208         color: black;
 209         font-weight: bold;
 210 }
 211
 212
 213 /* Formulaires avec label en haut */
 214 /* les cas particuliers des edition pleines largeur */
 215 .formulaire_spip li.editer_parent,
 216 .formulaire_spip li.editer_groupe_mot,
 217 .formulaire_spip li.editer_descriptif,
 218 .formulaire_spip li.editer_chapo,
 219 .formulaire_spip li.editer_texte,
 220 .formulaire_spip li.editer_ps,
 221 .formulaire_spip li.editer_url_zip_plugin2,
 222 .formulaire_spip li.haut {
 223 padding-#GET{left}:10px;
 224 padding-top:10px;
 225 }
 226
 227 .formulaire_spip li.editer_parent label,
 228 .formulaire_spip li.editer_groupe_mot label,
 229 .formulaire_spip li.editer_descriptif label,
 230 .formulaire_spip li.editer_chapo label,
 231 .formulaire_spip li.editer_texte label,
 232 .formulaire_spip li.editer_ps label,
 233 .formulaire_spip li.editer_url_zip_plugin2 label,
 234 .formulaire_spip li.haut label {
 235         display: block;
 236         float: #GET{left};
 237         width:auto;
 238         margin: 0px;
 239         padding-top: 5px;
 240         padding-bottom: 10px;
 241         padding-#GET{right}: 5px;
 242         font-family: verdana, arial, helvetica, sans;
 243         color: #444444;
 244         line-height: 11px;
 245 }
 246
 247 .formulaire_spip li.editer_parent.obligatoire label,
 248 .formulaire_spip li.editer_groupe_mot.obligatoire label,
 249 .formulaire_spip li.editer_descriptif.obligatoire label,
 250 .formulaire_spip li.editer_chapo.obligatoire label,
 251 .formulaire_spip li.editer_texte.obligatoire label,
 252 .formulaire_spip li.editer_ps.obligatoire label,
 253 .formulaire_spip li.editer_url_zip_plugin2.obligatoire label,
 254 .formulaire_spip li.haut.obligatoire label {
 255         color: black;
 256 }
 257
 258 .formulaire_spip li.editer_parent textarea,
 259 .formulaire_spip li.editer_parent select,
 260 .formulaire_spip li.editer_groupe_mot select,
 261 .formulaire_spip li.editer_descriptif textarea,
 262 .formulaire_spip li.editer_chapo textarea,
 263 .formulaire_spip li.editer_texte textarea,
 264 .formulaire_spip li.editer_texte .spip_barre,
 265 .formulaire_spip li.editer_ps textarea,
 266 .formulaire_spip li.haut textarea,
 267 .formulaire_spip li.haut select,
 268 .formulaire_spip li.haut input,
 269 .formulaire_spip li.editer_descriptif .erreur_message,
 270 .formulaire_spip li.editer_chapo .erreur_message,
 271 .formulaire_spip li.editer_texte .erreur_message,
 272 .formulaire_spip li.editer_ps .erreur_message,
 273 .formulaire_spip li.haut .erreur_message {
 274         clear:#GET{left};
 275 }
 276
 277 .formulaire_spip li .erreur_message label {
 278         float:none;
 279         margin:0;
 280         padding:0;
 281         display:inline;
 282         background:none;
 283         font-weight:normal;
 284 }
 285
 286
 287 /* Formulaires obligatoires */
 288 .formulaire_spip li.obligatoire input {
 289         font-weight: bold;
 290         font-size: 110%;
 291 }
 292
 293
 294 /* Fieldset */
 295
 296 .formulaire_spip li.fieldset {padding:0;}
 297 .formulaire_spip fieldset {
 298         margin: 5px 0 0px;
 299         padding: 0px 0 10px 0;
 300         border: 0;
 301         width:auto;
 302         border-top: 1px solid #ccc;
 303 }
 304
 305 .formulaire_editer_article li.editer_liens_sites {
 306         border-bottom: 1px solid #ccc;
 307 }
 308
 309 .formulaire_spip h3.legend,
 310 .formulaire_spip legend
 311  {
 312         display: block;
 313         margin: 0px;
 314         padding-top: 7px;
 315         padding-bottom: 7px;
 316         background-color: #eee;
 317         padding-#GET{left}: 10px;
 318         padding-#GET{right}: 5px;
 319         font-family: verdana, arial, helvetica, sans;
 320         color: black;
 321         font-weight: normal;
 322         font-size: 95%;
 323         line-height: 11px;
 324 }
 325
 326 .formulaire_spip fieldset li label {
 327         color: #444444;
 328 }
 329 .formulaire_spip fieldset li input.text, .formulaire_spip fieldset li textarea.textarea {
 330         border: 1px solid #aaaaaa;
 331 }
 332
 333
 334
 335 /* Extra */
 336
 337 .formulaire_spip extra {
 338         margin: 0px;
 339         padding: 0px;
 340         border: 0px;
 341 }
 342
 343
 344
 345 /* boutons */
 346 .formulaire_spip .boutons {
 347         [background-color: #(#GET{claire}|couleur_eclaircir);]
 348         [border-top: 1px solid (#GET{claire});]
 349         margin:0;
 350         clear:both;
 351         text-align: #GET{right};
 352         padding: 7px 1em;
 353 }
 354 #navigation .formulaire_spip .boutons,#navigation .boutons_formulaire,
 355 #extra .formulaire_spip .boutons,#extra .boutons_formulaire {
 356         padding: 5px;
 357 }
 358
 359
 360
 361
 362 /*
 363 .cadre-formulaire{background:white;padding:0;}
 364 .entete-formulaire{padding:0.5em;}
 365 */
 366
 367
 368
 369 .formulaire_spip li.editer_identification fieldset{
 370         [background-color: #(#GET{claire}|couleur_eclaircir|couleur_eclaircir);]
 371 }
 372
 373 .formulaire_spip li.editer_identification em.attention {
 374         clear: #GET{left};
 375         margin-left: 10px;
 376         margin-right: 10px;
 377         border: 1px solid red;
 378         color: red;
 379         background-color: white;
 380         font-style: normal;
 381         padding: 5px;
 382 }
 383
 384
 385 .formulaire_spip li.editer_parent,
 386 .formulaire_spip li.editer_groupe_mot,
 387 .formulaire_editer_auteur li.editer_statut {
 388         background-color: [#(#ENV{couleur_claire}|couleur_eclaircir)];
 389         margin-top:5px;
 390         padding-bottom:10px;
 391 }
 392 .formulaire_spip li.editer_parent .rubrique_actuelle {clear:#GET{left};}
 393
 394 .formulaire_editer_auteur li.editer_statut {    padding-top:10px;}
 395 .formulaire_editer_auteur li.editer_statut .instituer_auteur {margin-left:-130px;}
 396
 397 .formulaire_spip li.editer_groupe_mots_associer,
 398 .formulaire_spip li.editer_groupe_mots_reglage_avance,
 399 .formulaire_spip li.editer_groupe_mots_editeur {
 400         padding-#GET{left}: 10px;
 401 }
 402
 403 .formulaire_editer_site div.previsu_logo_site{
 404         height:1px;
 405 }
 406
 407 .formulaire_editer_site div.previsu_logo_site img{
 408         position: relative;
 409         #GET{left}: -220px;
 410         top: -60px;
 411 }
 412
 413 /* Inscription du flux RSS */
 414 .formulaire_spip li.editer_referencement_automatise {
 415         border-top: 0px;
 416         [background-color: (#GET{foncee});]
 417         margin-bottom: 10px;
 418 }
 419 .formulaire_spip li.editer_referencement_automatise fieldset {
 420         padding: 0px;
 421         border-bottom: 1px solid #GET{foncee};
 422 }
 423 .formulaire_spip li.editer_referencement_automatise fieldset li {
 424         padding-#GET{left}: 10px;
 425 }
 426 .formulaire_spip li.editer_referencement_automatise p.explication {
 427         width: auto;
 428         border: 0px;
 429 }
 430
 431 .formulaire_spip li.editer_syndication {
 432         padding-#GET{left}: 10px;
 433 }
 434
 435
 436 .formulaire_spip li.editer_parent label,
 437 .formulaire_spip li.editer_groupe_mot label {
 438         color: black;
 439         font-weight: bold;
 440 }
 441
 442
 443 /* barre typo */
 444
 445 .formulaire_spip table.spip_barre {
 446         [background-color: (#GET{claire});]
 447         width: 97.4%;
 448         padding: 5px;
 449         padding-bottom: 0px;
 450         clear:both;
 451 }
 452 .formulaire_spip table.spip_barre tr {
 453         width: 98%;
 454 }
 455 .formulaire_spip table.spip_barre a img {
 456         [(#EVAL{_DIR_IMG_PACK}|concat{fond-fondo.gif}|background_image{[(#ENV{couleur_claire}|couleur_eclaircir)], center center })]
 457         padding: 3px; border: 1px outset #GET{claire};
 458 }
 459 .formulaire_spip table.spip_barre a:hover img { background: #fff; border: 1px solid #cc9; }
 460 .formulaire_spip table.spip_barre input.barre { width: 99%; background: transparent; border: 0; color: #f57900; }
 461
 462
 463 .formulaire_spip li.editer_parent .choix label,
 464 .formulaire_spip .choix label{
 465         float:none;
 466         display:inline;
 467         margin-#GET{left}: 5px;
 468         font-weight:normal;
 469         text-transform: none;
 470         font-size: 1em;
 471         background: none;
 472         padding: 0px;
 473         color: #666666;
 474 }
 475 .formulaire_spip .choix input.radio,
 476 .formulaire_spip .choix input.checkbox {width:auto;}
 477
 478
 479
 480
 481 /*
 482  * Formulaires compactes
 483  */
 484
 485 .formulaire_spip_compact{
 486         font-size: 100%;
 487 }
 488 .formulaire_spip_compact ul li,
 489 #navigation .formulaire_spip li,#extra .formulaire_spip li {
 490         padding: 2px 5px !important;
 491 }
 492
 493 .formulaire_spip_compact li label,
 494 .formulaire_spip_compact li.editer_descriptif label,
 495 #navigation .formulaire_spip li label,#extra .formulaire_spip li label {
 496         text-transform: none;
 497         color: #444444;
 498
 499         -moz-display: inline-box;
 500         display: inline-block;
 501         font-weight: normal;
 502
 503         padding: 0;
 504         padding-top: 3px;
 505         padding-bottom: 3px;
 506         margin-#GET{left}:0;
 507
 508 }
 509
 510 .formulaire_spip_compact select,#navigation .formulaire_spip select,#extra .formulaire_spip select { font-size: 0.95em; width:auto;padding:1px 0;}
 511 .formulaire_spip_compact input,#navigation .formulaire_spip input,#extra .formulaire_spip input {
 512         padding: 1px 0;
 513         font-size: 0.95em;
 514 }
 515 .formulaire_spip_compact textarea, #navigation .formulaire_spip textarea, #extra .formulaire_spip textarea {
 516         padding: 2px;
 517         font-size: 0.95em;
 518 }
 519
 520 /* Bouton de validation */
 521
 522 input[type="file"] {
 523         border: none;
 524         background-color: transparent;
 525 }
 526 /* Pour IE, qui grossit le bouton submit */
 527 input[type="submit"] {
 528         font-size: 1em;
 529 }
 530
 531
 532 .formulaire_spip ul.spip,.formulaire_spip ol.spip {
 533         margin:10px 0;
 534         margin-#GET{left}: 10px;
 535         list-style-type: disc;
 536         list-style-position: outside;
 537 }
 538 .formulaire_spip ol.spip {
 539         list-style-type: decimal;
 540 }
 541
 542 .formulaire_spip ul.spip li,.formulaire_spip ol.spip li {
 543         margin-#GET{left}: 10px;
 544         padding: 0;
 545         overflow:visible;
 546 }