Skip to content
Extraits de code Groupes Projets
Valider fb17872e rédigé par RealET's avatar RealET :kissing_cat:
Parcourir les fichiers

Ergonomie : 

* label des formulaires au-dessus des champs (des études ont montré que c'était plus efficace)
* Bouton submit plus gros et plus visible
parent 3eb72719
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
Affichage de
avec 60 ajouts et 205 suppressions
stylessoyezcreateurs.css.html
+ 60
− 205
Voir le fichier @ fb17872e
...@@ -305,7 +305,6 @@ ul.spip li, ol.spip li { margin-bottom: 0.25em; } ...@@ -305,7 +305,6 @@ ul.spip li, ol.spip li { margin-bottom: 0.25em; }
.cadre-formulaire-editer .image_loading {position:absolute;right:0;} .cadre-formulaire-editer .image_loading {position:absolute;right:0;}
.entete-formulaire{ background:white; border:1px solid #GET{c_cadrestexte}; border-bottom:0; padding:.5em 10px; overflow:hidden;} .entete-formulaire{ background:white; border:1px solid #GET{c_cadrestexte}; border-bottom:0; padding:.5em 10px; overflow:hidden;}
.ie6 .entete-formulaire {zoom:1; /* correction IE6 */}
.formulaire_spip .cadre{border: 1px solid #GET{c_cadrestexte};} .formulaire_spip .cadre{border: 1px solid #GET{c_cadrestexte};}
/* dans les formulaires de configuration */ /* dans les formulaires de configuration */
...@@ -328,219 +327,78 @@ h3.titrem {position:relative;} ...@@ -328,219 +327,78 @@ h3.titrem {position:relative;}
.pagination .pagination-item.disabled .pagination-item-label {color:#888; font-weight: normal;} .pagination .pagination-item.disabled .pagination-item-label {color:#888; font-weight: normal;}
.menu_articles .pagination strong {font-size:1rem;} .menu_articles .pagination strong {font-size:1rem;}
/* ul li -----*/ /* Formulaires : variantes et cas particuliers
.formulaire_spip fieldset {padding-left:10px;padding-right:10px;margin-bottom:.25em} ----------------------------------------------- */
.formulaire_spip .editer-groupe {padding: .25em 0;} .formulaire_spip { margin-bottom: 1.5em; }
.formulaire_spip .editer-groupe .editer-groupe,.formulaire_spip .fieldset fieldset {margin:0;} .formulaire_spip label { display: block; }
.formulaire_spip .editer-groupe,
.formulaire_spip fieldset,
.formulaire_spip fieldset .editer-groupe,
.formulaire_spip .boutons,
.formulaire_spip .titrem,
.formulaire_spip .legend {margin-left: -10px;margin-right: -10px;}
.formulaire_spip .editer {padding: .5em 10px;clear:both;overflow:hidden;}
/* label -----*/
/* Formulaires alignes a gauche c'est le par defaut des formulaires de Spip */
.formulaire_spip .editer,
.formulaire_spip .editer.gauche {padding-left:140px;}
.formulaire_spip .editer label,
.formulaire_spip .editer.gauche label {
color: #444;
width: 114px;
float:left;
margin-left:-130px;
text-align: left;
/*vertical-align: top;*/
}
.ie6 .formulaire_spip .editer label,.ie6 .formulaire_spip .editer.gauche label {position:relative;display:inline;}
.formulaire_spip .long_label {padding-left:270px;}
.formulaire_spip .long_label label {width: 250px;margin-left:-260px;}
/* Formulaires avec label en haut */
/* les cas particuliers des edition pleines largeur */
.formulaire_spip .editer_parent,
.formulaire_spip .editer_groupe_mot,
.formulaire_spip .editer_descriptif,
.formulaire_spip .editer_chapo,
.formulaire_spip .editer_texte,
.formulaire_spip .editer_ps,
.formulaire_spip .haut,
.formulaire_spip .pleine_largeur { padding-left:10px;}
.formulaire_spip .editer_parent label,
.formulaire_spip .editer_groupe_mot label,
.formulaire_spip .editer_descriptif label,
.formulaire_spip .editer_chapo label,
.formulaire_spip .editer_texte label,
.formulaire_spip .editer_ps label,
.formulaire_spip .haut label,
.formulaire_spip .pleine_largeur label {display: block;float: none;width:auto;margin-left: 0;}
.formulaire_spip .editer.obligatoire label,
.formulaire_spip .editer.obligatoire.gauche label {color: black;font-weight: bold;}
/* cas exotique d'un label dans une erreur (ie confirmez que vous etes sur ) */
.formulaire_spip .erreur_message label { float:none;display:inline;font-weight:normal;margin-left: 0;}
/* elements du formulaire */
.formulaire_spip input.text,
.formulaire_spip input.email,
.formulaire_spip input.password,
.formulaire_spip textarea,
.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;}
.lte7 .formulaire_spip input.text,
.lte7 .formulaire_spip input.email,
.lte7 .formulaire_spip input.password,
.lte7 .formulaire_spip textarea,
.lte7 .formulaire_spip select { width: 96%;margin:0;display: inline;margin-left:0;}
.lte7 .formulaire_spip textarea {margin-left: 10px;}
.formulaire_spip input.text, .formulaire_spip input.text,
.formulaire_spip input.email, .formulaire_spip select,
.formulaire_spip input.password, .formulaire_spip textarea {
.formulaire_spip input.file, width: 100%;
.formulaire_spip select { font-size: inherit;font-family:inherit} box-sizing: border-box;
.formulaire_spip textarea {padding: .25em 5px;overflow: auto;font-size: inherit;font-family:inherit;line-height: inherit;} padding:.25em;
border:solid 1px #ccc;
.formulaire_spip input.placeholder, border-radius:4px;
.formulaire_spip textarea.placeholder {color:#888;}
.formulaire_spip .editer.obligatoire input.text {font-weight: bold;}
.formulaire_spip .erreur {background-color:#FBE3E4;}
.formulaire_spip .editer .erreur_message { display: block;color: #8A1F11;font-weight:bold;}
.formulaire_spip .erreur input.text,
.formulaire_spip .erreur input.password,
.formulaire_spip .erreur textarea {border:2px solid #FBC2C4;}
/* sous choix */
.formulaire_spip .choix label {font-weight:normal;text-transform: none;float:none;display:inline;margin-left: 5px;color: #666666;}
.formulaire_spip .choix .radio,
.formulaire_spip .choix .checkbox {width:auto;}
/* reponses succes/erreur */
.formulaire_spip .reponse_formulaire,
.error,.success,.notice,.information {border:2px solid;color:#333;font-weight: normal;padding:.5em 10px;padding-left:40px;min-height:24px;background-repeat:no-repeat;background-position: 2px 5px;margin-bottom:1em;margin-top:1em;}
.formulaire_spip .reponse_formulaire_ok, .success {color: #264409;border-color: #C6D880;background-color:#E6EFC2;background-image:url(#CHEMIN_IMAGE{ok-24.png});}
.formulaire_spip .reponse_formulaire_erreur, .error {color: #8A1F11;border-color: #FBC2C4;background-color:#FBE3E4;background-image:url(#CHEMIN_IMAGE{erreur-24.png});}
.notice {color: #514721;border-color: #FFD324;background-color:#FFF6BF;background-image:url(#CHEMIN_IMAGE{warning-24.png});}
.information {color: #1e556b;border-color: #2f96b4;background-color: #e2f6fd;}
/* Explications */
.formulaire_spip p {}
.formulaire_spip .explication {display:block;padding: 5px;background-color: #e9e9e9;}
.formulaire_spip .editer .explication {margin-bottom: 0;margin-top: 0;}
.formulaire_spip .editer .explication>:last-child {margin-bottom: 0}
.formulaire_spip .editer .explication a {}
/* Remarques importantes */
.formulaire_spip .attention { display: block; margin-bottom: 1em; font-weight: normal; }
.formulaire_spip input.submit,
.formulaire_spip input.reset,
.formulaire_spip input.button {
width: auto;
} }
/* icone d'aide */ .formulaire_spip img.ui-datepicker-trigger {
.formulaire_spip .editer .aide {padding-top: 0px;} position:relative;
max-width: 1.5em;
margin-top: -0.25em;
/* Fieldset */ margin-left: -1.75em;
.formulaire_spip .editer.fieldset {padding:0;} }
.formulaire_spip fieldset {border: 0;width:auto;border-top: 1px solid #ccc;margin-top: .25em;padding-bottom:.25em;}
.formulaire_spip h3.legend, .formulaire_spip .choix label {
.formulaire_spip legend {display: block;padding-top: 7px;padding-bottom: 7px;background-color: #eee;color: black;font-weight: normal;padding-left: 10px;padding-right: 5px;margin-bottom:.5em} display: inline;
}
.formulaire_spip .editer fieldset label {color: #444444;} .formulaire_recherche label { display: block; }
.erreur_message { display: block; }
/* boutons */ .formulaire_spip .boutons {
.formulaire_spip .boutons { margin-bottom:0;clear:both;padding: .5em 10px;text-align: right;background-color: transparent; } clear: both;
margin: 0.5em 0;
padding: 0;
text-align: right;
}
.formulaire_spip .submit,.bouton_action_post .submit {
background-color: #GET{c_cadrestexte};
color: #[(#GET{c_cadrestexte}|couleur_extreme|couleur_inverser)];
border-radius:.5em;
padding: .5em 1em;
}
.formulaire_spip .submit:hover,.bouton_action_post .submit:hover,
.formulaire_spip .submit:focus,.bouton_action_post .submit:focus {
background-color: #[(#GET{c_cadrestexte}|couleur_luminance{0.7})];
box-shadow: rgba(0, 0, 0, 0.5) 0 4px 12px;
transform: translateY(-1px);
}
.formulaire_spip .submit:active,.bouton_action_post .submit:active {
background-color: #[(#GET{c_cadrestexte}|couleur_luminance{0.5})];
box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px;
transform: translateY(0);
}
#navigation .formulaire_spip .boutons,
#extra .formulaire_spip .boutons { padding: .25em 5px}
.formulaire_spip .boutons .image_loading {float:none;}
/* Bouton de validation */
input[type="file"] {border: none;background-color: transparent;}
/* Pour IE, qui grossit le bouton submit */
input[type="submit"],input[type="reset"] {font-size: inherit;}
/* Date picker */ .button-6:hover,
#ui-datepicker-div {z-index: 1001 !important;} .button-6:focus {
border-color: rgba(0, 0, 0, 0.15);
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
color: rgba(0, 0, 0, 0.65);
}
/* Chosen */ .button-6:hover {
.chosen-container .chosen-drop { transform: translateY(-1px);
width: max-content;
} }
.formulaire_spip {-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:relative;} .button-6:active {
.formulaire_spip h3.titrem {background-color: #GET{c_cadrestexte};color: white;} background-color: #F0F0F1;
.formulaire_spip input.text, border-color: rgba(0, 0, 0, 0.15);
.formulaire_spip input.email, box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
.formulaire_spip input.password, color: rgba(0, 0, 0, 0.65);
.formulaire_spip textarea {border: 1px solid #ddd;padding: 5px;/*font-size: 1.1em;*/-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;position:relative;z-index:2;} transform: translateY(0);
.formulaire_spip img.ui-datepicker-trigger {-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;position:relative;} }
.formulaire_spip .editer fieldset input.text {border: 1px solid #ddd;}
.formulaire_spip .editer fieldset input.password {border: 1px solid #ddd;}
.formulaire_spip .editer fieldset textarea {border: 1px solid #ddd;}
.formulaire_spip label {color: #666;/*font-size: 90%;line-height: 120%;*/}
.formulaire_spip .editer fieldset label {color: #777;}
.formulaire_spip label[for] {cursor: pointer;}
.formulaire_spip .explication {padding: 5px 10px;font-size: 90%;line-height: 125%;color: #444;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color: #ddd;position:relative;}
.formulaire_spip .explication+.editer-groupe {margin-top:-.5em}
.formulaire_spip .editer .explication {-webkit-border-bottom-left-radius:0px;-moz-border-radius-bottomleft:0px;border-bottom-left-radius:0px;-webkit-border-bottom-right-radius:0px;-moz-border-radius-bottomright:0px;border-bottom-right-radius:0px;}
.formulaire_spip .editer .explication:last-child{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.formulaire_spip .explication + input.text,
.formulaire_spip .explication + textarea,
.formulaire_spip .explication + input.password,
.formulaire_spip .explication +.choix:first-of-type {margin-top: 0px;-webkit-border-top-left-radius:0px;-moz-border-radius-topleft:0px;border-top-left-radius:0px;-webkit-border-top-right-radius:0px;-moz-border-radius-topright:0px;border-top-right-radius:0px;position:relative;}
.formulaire_spip input.text + .explication,
.formulaire_spip input.email + .explication,
.formulaire_spip textarea + .explication,
.formulaire_spip input.password+.explication,
.formulaire_spip select+.explication,
.formulaire_spip .choix:last-of-type+.explication{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-border-top-left-radius:0px;-moz-border-radius-topleft:0px;border-top-left-radius:0px;-webkit-border-top-right-radius:0px;-moz-border-radius-topright:0px;border-top-right-radius:0px;position: relative}
.formulaire_spip input.text + .explication:before,
.formulaire_spip input.email + .explication:before,
.formulaire_spip textarea + .explication:before,
.formulaire_spip input.password+.explication:before,
.formulaire_spip select+.explication:before,
.formulaire_spip .choix:last-of-type+.explication:before{content:"";display: block;position: absolute;top:-5px;height:5px;width:100%;left:0;background:#ddd;}
.formulaire_spip .choix {background-color: white;padding: 3px 10px;border: 1px solid #ddd;-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;border-bottom: 0px}
.formulaire_spip .choix + .choix {padding-top: 0px;border-top: 0px;border-bottom: 0px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.formulaire_spip .choix + .explication {margin-top: 0px;-webkit-border-top-left-radius:0px;-moz-border-radius-topleft:0px;border-top-left-radius:0px;-webkit-border-top-right-radius:0px;-moz-border-radius-topright:0px;border-top-right-radius:0px;position:relative;}
.formulaire_spip .choix:last-of-type,.formulaire_spip .choix:last-child {-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;border-bottom: 1px solid #ddd;position:relative;}
.formulaire_spip .choix:first-of-type {-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;border-top: 1px solid #ddd;position:relative;}
.formulaire_spip span.choix,.formulaire_spip span.choix:first-of-type,.formulaire_spip span.choix:last-of-type,.formulaire_spip span.choix:last-child{display:inline-block;background: transparent;padding: 0;border:0;}
.formulaire_spip .submit,.bouton_action_post .submit {background-color: #GET{c_cadrestexte_bk};color: #[(#GET{c_cadrestexte}|couleur_luminance{0.7})];-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border: 0;padding: 3px 7px;font-size: 90%;position:relative;}
.formulaire_spip .submit:hover,.bouton_action_post .submit:hover {background-color: #GET{c_cadrestexte};color: white;position:relative;}
.formulaire_spip .submit:focus,.bouton_action_post .submit:focus {background-color: #GET{c_cadrestexte};color: white;position:relative;}
.formulaire_spip .submit:active,.bouton_action_post .submit:active {background-color: #[(#GET{c_cadrestexte}|couleur_luminance{0.7})];}
.formulaire_spip .toggle_box_link {-webkit-opacity:0.6;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);;z-index: 1;font-size: 10px;color: #GET{lien};}
.formulaire_spip .toggle_box_link button {font-size: 10px;color: #GET{lien};}
.formulaire_spip:hover .toggle_box_link {-webkit-opacity:1.0;-moz-opacity:1.0;opacity:1.0;filter:alpha(opacity=100);}
.formulaire_editer_liens .associer_mot .submit {margin-top:3px;}
.formulaire_editer_logo .editer_logo_on.logo_upload,
.formulaire_editer_logo .editer_logo_off.logo_upload.open {background: #fff;} [(#REM) https://core.spip.net/issues/2995]
#chemin {}
#chemin .bouton_deplacer {font-size: 10px;color: #GET{lien};-webkit-opacity:0.6;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);}
#chemin:hover .bouton_deplacer {-webkit-opacity:1.0;-moz-opacity:1.0;opacity:1.0;filter:alpha(opacity=100);}
.box {-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.note {border: 0;}
.box.error,.box.success,.box.notice {border: 0;}
/** Dans une modale SPIP */ /** Dans une modale SPIP */
#colorbox .formulaire_spip { margin: 1em 2em; } #colorbox .formulaire_spip { margin: 1em 2em; }
...@@ -3297,9 +3155,6 @@ margin-bottom: 1em; ...@@ -3297,9 +3155,6 @@ margin-bottom: 1em;
width: 1.28571429em; width: 1.28571429em;
text-align: center; text-align: center;
} }
.portailcognac .formulaire_spip .boutons {
text-align: center;
}
/* needed for old browsers */ /* needed for old browsers */
dialog { dialog {
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site