www/prive/themes/spip/forms.css.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 /*
  25         Note sur ecran large et etroit, en [11846]
  26         large = 540px (ou 600px!)
  27         etroit = 505px
  28 */
  29
  30
  31 /* Style des formulaires d'edition
  32 ----------------------------------------------- */
  33 .formulaire_spip {
  34         padding:0 10px 0;
  35         border: 1px solid #ENV{foncee};
  36         color: #333;
  37         background-color: #f8f8f8;
  38         margin: [(#ENV{margin-bottom}|strmult{1.5})em] 0;
  39         position:relative; /* pour positionner le ajaxload en automatique */
  40 }
  41
  42 .cadre-formulaire-editer .formulaire_spip { margin-top:0; }
  43 .cadre-formulaire-editer {color: #444; margin-top:[(#ENV{margin-bottom}|strmult{1.5})em];position:relative;}
  44 .cadre-formulaire-editer.popin {margin-top:0}
  45 .cadre-formulaire-editer .image_loading {position:absolute;right:0;}
  46
  47 .entete-formulaire{ background:white; border:1px solid #ENV{foncee}; border-bottom:0; padding:[(#ENV{margin-bottom}|strdiv{2})em] 10px; overflow:hidden;}
  48 .ie6 .entete-formulaire {zoom:1; /* correction IE6 */}
  49 .formulaire_spip .cadre{border: 1px solid #ENV{foncee};}
  50
  51 /* dans les formulaires de configuration */
  52 h3.titrem {position:relative;}
  53 .formulaire_spip h3.titrem {background-color: [#(#ENV{foncee}|couleur_eclaircir)];color: #4A4A4A;}
  54
  55 /* ul li -----*/
  56 .formulaire_spip fieldset {padding-left:10px;padding-right:10px;margin-bottom:[(#ENV{margin-bottom}|strdiv{4})em]}
  57 .formulaire_spip .editer-groupe {padding: [(#ENV{margin-bottom}|strdiv{4})em] 0;}
  58 .formulaire_spip .editer-groupe .editer-groupe,.formulaire_spip .fieldset fieldset {margin:0;}
  59 .formulaire_spip .editer-groupe,
  60 .formulaire_spip fieldset,
  61 .formulaire_spip fieldset .editer-groupe,
  62 .formulaire_spip .boutons,
  63 .formulaire_spip .titrem,
  64 .formulaire_spip .legend {margin-left: -10px;margin-right: -10px;}
  65
  66 .formulaire_spip .editer {padding: [(#ENV{margin-bottom}|strdiv{2})em] 10px;clear:both;overflow:hidden;}
  67
  68 .formulaire_spip .editer-groupe.deux_colonnes {  -webkit-column-count: 2;  -moz-column-count: 2;  column-count: 2; }
  69
  70 /* label -----*/
  71
  72 /* Formulaires alignes a gauche c'est le par defaut des formulaires de Spip */
  73 .formulaire_spip .editer,
  74 .formulaire_spip .editer.gauche {padding-#ENV{left}:140px;}
  75
  76 .formulaire_spip .editer label,
  77 .formulaire_spip .editer.gauche label {
  78         color: #444;
  79         width: 114px;
  80         float:#ENV{left};
  81         margin-#ENV{left}:-130px;
  82         text-align: #ENV{left};
  83         /*vertical-align: top;*/
  84 }
  85 .ie6 .formulaire_spip .editer label,.ie6 .formulaire_spip .editer.gauche label {position:relative;display:inline;}
  86
  87 .formulaire_spip .long_label {padding-#ENV{left}:270px;}
  88 .formulaire_spip .long_label label {width: 250px;margin-#ENV{left}:-260px;}
  89
  90 /* Formulaires avec label en haut */
  91 /* les cas particuliers des edition pleines largeur */
  92 .formulaire_spip .editer_parent,
  93 .formulaire_spip .editer_groupe_mot,
  94 .formulaire_spip .editer_descriptif,
  95 .formulaire_spip .editer_chapo,
  96 .formulaire_spip .editer_texte,
  97 .formulaire_spip .editer_ps,
  98 .formulaire_spip .haut,
  99 .formulaire_spip .pleine_largeur { padding-#ENV{left}:10px;}
 100
 101 .formulaire_spip .editer_parent label,
 102 .formulaire_spip .editer_groupe_mot label,
 103 .formulaire_spip .editer_descriptif label,
 104 .formulaire_spip .editer_chapo label,
 105 .formulaire_spip .editer_texte label,
 106 .formulaire_spip .editer_ps label,
 107 .formulaire_spip .haut label,
 108 .formulaire_spip .pleine_largeur>label {display: block;float: none;width:auto;margin-#ENV{left}: 0;}
 109
 110 .formulaire_spip .editer.obligatoire label,
 111 .formulaire_spip .editer.obligatoire.gauche label {color: black;font-weight: bold;}
 112
 113 /* cas exotique d'un label dans une erreur (ie confirmez que vous etes sur ) */
 114 .formulaire_spip .erreur_message label { float:none;display:inline;font-weight:normal;margin-#ENV{left}: 0;}
 115
 116
 117 /* elements du formulaire */
 118 .formulaire_spip input.text,
 119 .formulaire_spip input.password,
 120 .formulaire_spip textarea,
 121 .formulaire_spip select { font-size:1em;padding: 3px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box;}
 122
 123 .lte7 .formulaire_spip input.text,
 124 .lte7 .formulaire_spip input.password,
 125 .lte7 .formulaire_spip textarea,
 126 .lte7 .formulaire_spip select { width: 96%;margin:0;display: inline;margin-left:0;}
 127 .lte7 .formulaire_spip textarea {margin-left: 10px;}
 128
 129 .formulaire_spip input.text,
 130 .formulaire_spip input.password,
 131 .formulaire_spip input.file,
 132 .formulaire_spip select { font-size: inherit;font-family:inherit}
 133 .formulaire_spip textarea {padding: [(#ENV{margin-bottom}|strdiv{4})em] 5px;overflow: auto;font-size: inherit;font-family:inherit;line-height: inherit;}
 134
 135 .formulaire_spip input.placeholder,
 136 .formulaire_spip textarea.placeholder {color:#888;}
 137 .formulaire_spip .editer.obligatoire input.text {font-weight: bold;}
 138
 139
 140 .formulaire_spip .erreur {background-color:#FBE3E4;}
 141 .formulaire_spip .editer .erreur_message {      display: block;color: #8A1F11;font-weight:bold;}
 142 .formulaire_spip .erreur input.text,
 143 .formulaire_spip .erreur input.password,
 144 .formulaire_spip .erreur textarea {border:2px solid #FBC2C4;}
 145
 146 /* sous choix */
 147 .formulaire_spip .choix>label,
 148 .formulaire_spip .choix :not(.editer)>label {font-weight:normal;text-transform: none;float:none;display:inline;margin-#ENV{left}: 5px;color: #666666;}
 149 .formulaire_spip .choix .radio,
 150 .formulaire_spip .choix .checkbox {width:auto;}
 151
 152 /* reponses succes/erreur */
 153
 154 .formulaire_spip .reponse_formulaire,
 155 .error,.success,.notice,.information {border:2px solid;color:#333;font-weight: normal;padding:[(#ENV{margin-bottom}|strdiv{2})em] 10px;padding-left:40px;min-height:24px;background-repeat:no-repeat;background-position: 2px 5px;margin-bottom:#ENV{margin-bottom};margin-top:#ENV{margin-bottom};}
 156 .formulaire_spip .reponse_formulaire_ok, .success {color: #264409;border-color: #C6D880;background-color:#E6EFC2;background-image:url(#CHEMIN_IMAGE{ok-24.png});}
 157 .formulaire_spip .reponse_formulaire_erreur, .error {color: #8A1F11;border-color: #FBC2C4;background-color:#FBE3E4;background-image:url(#CHEMIN_IMAGE{erreur-24.png});}
 158 .notice {color: #514721;border-color: #FFD324;background-color:#FFF6BF;background-image:url(#CHEMIN_IMAGE{warning-24.png});}
 159 .information {color: #1e556b;border-color: #2f96b4;background-color: #e2f6fd;}
 160
 161 /* Explications */
 162 .formulaire_spip p {}
 163 .formulaire_spip .explication {display:block;padding: 5px;background-color: #e9e9e9;}
 164 .formulaire_spip .editer .explication {margin-bottom: 0;margin-top: 0;}
 165 .formulaire_spip .editer .explication>:last-child {margin-bottom: 0}
 166 .formulaire_spip .editer .explication a {}
 167
 168 /* Remarques importantes */
 169 .formulaire_spip .attention { display: block; margin-bottom: #ENV{margin-bottom}; font-weight: normal; }
 170
 171
 172
 173 .formulaire_spip input.submit,
 174 .formulaire_spip input.reset,
 175 .formulaire_spip input.button {
 176         width: auto;
 177 }
 178
 179 /* icone d'aide */
 180 .formulaire_spip .editer .aide {padding-top: 0px;}
 181
 182
 183 /* Fieldset */
 184 .formulaire_spip .editer.fieldset {padding:0;}
 185 .formulaire_spip fieldset {border: 0;width:auto;border-top: 1px solid #ccc;margin-top: [(#ENV{margin-bottom}|strdiv{4})em];padding-bottom:[(#ENV{margin-bottom}|strdiv{4})em];}
 186
 187 .formulaire_spip h3.legend,
 188 .formulaire_spip legend {display: block;padding-top: 7px;padding-bottom: 7px;background-color: #eee;color: black;font-weight: normal;padding-#ENV{left}: 10px;padding-#ENV{right}: 5px;margin-bottom:[(#ENV{margin-bottom}|strdiv{2})em]}
 189
 190 .formulaire_spip .editer fieldset label {color: #444444;}
 191
 192 /* boutons */
 193 .formulaire_spip .boutons { margin-bottom:0;clear:both;padding: [(#ENV{margin-bottom}|strdiv{2})em] 10px;text-align: #ENV{right};background-color: #[(#ENV{claire}|couleur_eclaircir)];border-top: 1px solid [(#ENV{claire})];}
 194
 195 #navigation .formulaire_spip .boutons,
 196 #extra .formulaire_spip .boutons { padding: [(#ENV{margin-bottom}|strdiv{4})em] 5px}
 197
 198 .formulaire_spip .boutons .image_loading {float:none;}
 199 /* Bouton de validation */
 200 input[type="file"] {border: none;background-color: transparent;}
 201 /* Pour IE, qui grossit le bouton submit */
 202 input[type="submit"],input[type="reset"] {font-size: inherit;}
 203
 204 /* Date picker */
 205 #ui-datepicker-div {z-index: 1001 !important;}
 206
 207
 208 /*
 209  * Formulaires compactes en colonnes laterales
 210  */
 211 .lat .formulaire_spip,.lat .formulaire_spip fieldset {padding:0 5px;}
 212 .lat .formulaire_spip .editer-groupe,.lat .formulaire_spip fieldset,.lat .formulaire_spip .boutons,.lat .formulaire_spip .titrem,.lat .formulaire_spip .legend {margin-left: -5px;margin-right: -5px;}
 213
 214 .lte7 .lat .formulaire_spip input.text,.lte7 .lat .formulaire_spip textarea {margin-left: 5px;} /* BUG IE7 */
 215 .lat .formulaire_spip {}
 216 .lat .formulaire_spip h3.titrem {font-size:1em;/*padding:[(#ENV{margin-bottom}|strdiv{4})em] 5px;*/}
 217
 218 .lat .formulaire_spip .editer {padding: [(#ENV{margin-bottom}|strdiv{4})em] 5px;}
 219
 220 .lat .formulaire_spip .editer label {text-transform: none;color: #444444;display:block;font-weight: normal;float:none;padding: 0;width:auto;margin-#ENV{left}:0;}
 221 .lat .formulaire_spip select { width:auto;padding:1px 0;}
 222 .lat .formulaire_spip input {padding: 1px 0;}
 223 .lat .formulaire_spip textarea {padding: 2px;}
 224 .lat .formulaire_spip input.file {font-size: 0.9em;}
 225
 226 .lat .formulaire_spip .editer .choix label {display:inline;}
 227
 228 /* Champs particuliers, trans-forms */
 229 .formulaire_spip .editer_parent,
 230 .formulaire_spip .editer_groupe_mot,
 231 .formulaire_editer_auteur .editer_statut {background-color: [#(#ENV{couleur_claire}|couleur_eclaircir)];margin-top:5px;padding-bottom:[(#ENV{margin-bottom}|strdiv{2})em];}
 232 .formulaire_spip .editer_parent .rubrique_actuelle {clear:#ENV{left};}
 233
 234 .formulaire_spip .editer.editer_parent label,
 235 .formulaire_spip .editer.editer_groupe_mot label {
 236         color: black;
 237         font-weight: bold;
 238 }
 239
 240
 241 /* Formulaires particuliers ----------------------------------------------------------------*/
 242 .formulaire_editer_article .editer.editer_liens_sites {border-bottom: 1px solid #ccc;}
 243
 244 /* edition d'un auteur */
 245 .formulaire_editer_auteur .editer_identification fieldset{[background-color: #(#ENV{claire}|couleur_eclaircir|couleur_eclaircir);]}
 246 .formulaire_editer_auteur .editer.editer_statut {       padding-top:10px;}
 247 .formulaire_editer_auteur .editer.editer_statut .instituer_auteur {margin-#ENV{left}:-130px;margin-top:10px;}
 248 .formulaire_editer_auteur .editer.editer_statut .rubriques_restreintes > p {margin-#ENV{left}:0;margin-bottom:0;margin-top:10px;}
 249 .formulaire_editer_auteur .editer.editer_statut .rubriques_restreintes label { float: none; width: auto; margin-#ENV{left}: 0; }
 250
 251 .formulaire_spip .toggle_box_link {position:absolute;top:5px;#ENV{right}:5px;}
 252
 253 .formulaire_editer_logo {}
 254 #navigation .formulaire_editer_logo .apercu,#navigation .formulaire_editer_logo .ajouter_survol {text-align: center;}
 255 .formulaire_editer_logo .spip_logo img, #illustrations .vignette img, #documents_joints .image img.spip_logo {
 256                 background: url(#CHEMIN_IMAGE{fond-imgs.png});
 257 }
 258 .formulaire_editer_logo .taille {font-size: 0.9em;}
 259
 260 .formulaire_configurer_multilinguisme #langues_bloquees .choix,
 261 .formulaire_configurer_multilinguisme #langues_proposees .choix { padding:0 5px;margin-#ENV{right}:10px;float:#ENV{left};width:45%;clear:none; background: transparent; border: 0; }
 262 .formulaire_configurer_multilinguisme .traduite label {text-decoration:underline;}
 263 .formulaire_configurer_multilinguisme #langues_bloquees label {color: #ENV{foncee};font-weight: bold; }
 264
 265 /* config/reducteur */
 266 .formulaire_configurer_reducteur .vignette_reducteur {text-align: center; float: #ENV{left};padding:2px; border:2px solid #ddd; width:154px;padding-top:150px;margin:2px;background-position: top center;background-repeat: no-repeat;}
 267 .formulaire_configurer_reducteur .vignette_reducteur:hover {border-color:#bbb;background-color:#ddd;}
 268 .formulaire_configurer_reducteur .vignette_reducteur.on { font-weight: bold; border:2px solid #ENV{claire};background-color:#fff; }
 269 .formulaire_configurer_reducteur .vignette_reducteur.on:hover {border-color:#ENV{foncee};}
 270
 271 /* dater */
 272 .formulaire_dater .editer {padding-bottom:0;padding-top:0;}
 273 .formulaire_dater .editer label {font-weight: bold;text-transform: uppercase;font-size:0.9em;}
 274 .formulaire_dater .aide {float:#GET{right}}
 275 .lte7 .formulaire_dater a.aide {margin-top: -16px;position: relative;display: inline;}
 276 .formulaire_dater .affiche {font-weight: bold;text-transform: uppercase;}
 277 .formulaire_dater .saisie_redac {display:block;}
 278 .formulaire_dater .editer_date_redac .editable .choix{ display:block;}
 279 .formulaire_dater .editer_date_redac .editable label { margin-left:-260px!important; width:240px !important; display:inline-block;}
 280 .formulaire_dater  #sans_redac { vertical-align:top;}
 281
 282 /* editer_liens */
 283 .formulaire_editer_liens .liste-objets {border:0;margin-left:-10px;margin-right:-10px;}
 284 .formulaire_editer_liens .liste-objets-associer .caption {font-size:0.9em;}
 285 .formulaire_editer_liens .liste-objets-associer .caption span.recherche {float:#ENV{right};margin-top:-3px;font-size:0.9em;}
 286 .formulaire_editer_liens .liste-objets-associer .caption span.recherche .tout_voir {font-size:0.8em;}
 287 .formulaire_editer_liens h3,.formulaire_editer_liens .titrem {margin:0 -10px;padding:[(#ENV{margin-bottom}|strdiv{2})em];}
 288 .formulaire_editer_liens .liste-objets-lies {margin-bottom: 0;}
 289 .formulaire_editer_liens .selecteur > .titrem {margin-bottom:0;}
 290 .formulaire_editer_liens .selecteur .tout_voir {visibility:hidden;}
 291 .formulaire_editer_liens .selecteur.filtre .tout_voir {visibility:visible;}
 292 .formulaire_editer_liens.non_editable input,.formulaire_editer_liens.non_editable button {display:none;}
 293 .formulaire_editer_liens .action {text-align: #ENV{right};}
 294 .formulaire_editer_liens .liste-objets tr > .action {text-align: #ENV{right};width:120px;}
 295 .lte7 .formulaire_editer_liens .liste-objets tr > .action button {font-size: 1em;}
 296 .formulaire_editer_liens .liste-objets tr > .action button img {float:#ENV{right};margin-#ENV{left}:5px;}
 297 .lte7 .formulaire_editer_liens .liste-objets tr > .action button img {display: inline;float: none;}
 298
 299 .formulaire_editer_liens .associer_mot.obligatoire.nonvu {background-color:#FFCDAF;}
 300 .formulaire_editer_liens .associer_mot select,.formulaire_editer_liens .associer_mot input.text {width:75%;}
 301 .formulaire_editer_liens .associer_mot .submit {float:#ENV{right};font-weight:normal;}
 302
 303 /* retour visuel a la suppression et a l'ajout */
 304 .remove {background-color:#FFD0BF;}
 305 .append {background-color:#E0FFCF;}
 306
 307 /* formulaire de recherche : */
 308 /* version old style */
 309 .spip_recherche { float: [(#ENV{right})]; border:0;background:none;}
 310 .spip_recherche .recherche { float:[(#ENV{left})];padding:3px;padding-#ENV{right}:30px;width: 186px;/*font-size: 10px;*/ border: 1px solid #fff; background-color: #ENV{foncee}; color: #fff; margin: 0 0 6px; }
 311 .spip_recherche .submit {float: [(#ENV{left})];margin-#ENV{left}:-24px;margin-top:1px;}
 312 /* version moderne */
 313 .formulaire_spip.formulaire_recherche { float: [(#ENV{right})]; border:0;background:none;border: 1px solid #fff; background-color: [#(#ENV{foncee}|couleur_foncer)]; margin: 0 0 6px;position:relative;padding:0;z-index:1;}
 314 .box_mediabox .formulaire_spip.formulaire_recherche {z-index:1} /* focus dans la mediabox */
 315 .largeur .formulaire_spip.formulaire_recherche .text,.box_mediabox .formulaire_spip.formulaire_recherche .text{ float:[(#ENV{left})];padding:3px;width: 200px;background-color:#ENV{foncee};border:none;border-right:1px solid #fff;/*font-size: 10px;*/ color: #fff;  margin:0;min-height:20px;}
 316 .lte8 .largeur .formulaire_spip.formulaire_recherche .text {min-height:14px} /* IE<=8 ne supporte pas -ms-box-sizing:border-box; */
 317 .formulaire_spip.formulaire_recherche .text.cancelable {padding-#ENV{left}:20px}
 318 .formulaire_spip.formulaire_recherche .text::-webkit-input-placeholder { color:#eee; }
 319 .formulaire_spip.formulaire_recherche .text::-moz-placeholder { color:#eee; opacity: 1; }
 320 .formulaire_spip.formulaire_recherche .text.placeholder { color:#eee; }
 321
 322 .formulaire_spip.formulaire_recherche .cancel {float: [(#ENV{left})];line-height:1px;position:absolute;top:2px;left:2px;z-index:2}
 323 .formulaire_spip.formulaire_recherche label {display:none;}
 324 .formulaire_spip.formulaire_recherche .submit,.formulaire_spip.formulaire_recherche .image {float: [(#ENV{left})];margin-top:0px;padding:0 2px; }
 325 .formulaire_spip.formulaire_recherche .image { z-index:2; }
 326
 327 /* formulaire_traduire */
 328 .formulaire_traduire .liste-objets {margin-top:0;margin-bottom:0;}
 329 .formulaire_traduire .liste-objets .first_row {display:none;}
 330 .formulaire_traduire .supprimer_trad {float:#ENV{right};}
 331
 332 /* les boutons action */
 333 form.bouton_action_post, form.bouton_action_post div {display:inline;}
 334 form.bouton_action_post.link button.submit, .formulaire_spip .boutons input.link,.formulaire_spip button.link {margin:0;font-weight:normal;}
 335
 336 .formulaire_spip button {cursor:pointer;}
 337 form.bouton_action_post.link button.submit, .formulaire_spip .boutons input.link,.formulaire_spip button.link {background:none;border:0;cursor:pointer;padding:0 0 1px;color:#444;}
 338 form.bouton_action_post.link button.submit:hover, .formulaire_spip .boutons input.link:hover,.formulaire_spip button.link:hover {border-bottom:1px solid;padding:0;}
 339
 340 /* formulaire_editer_logo */
 341 .formulaire_editer_logo .titrem,.formulaire_editer_logo .ajouter_survol {text-transform: uppercase;}
 342 /* Date picker : passer par dessus des icones et du menu haut */
 343 .ui-datepicker { z-index: 1001 !important;}