Plugin formidable : ProgressBar/formulaire_analyse : quelques retouches de formidable/v3.5.6/css/formidable_analyse.css.html

Bonsoir,

Je réalise quelques modifications pour l'affichage public des
statistiques issues de questionnaires Formidables.

En cherchant à comprendre le fonctionnement des styles appliqués à la
balise
`<formulaire_analyse` mon EDI m'a indiqué quelques usages de
propriétés ou d'attributs CSS non existants dans le CSS de
formidable/v3.5.6/css/formidable_analyse.css.html.

Le "patch" ci dessous :

@@ -285,9 +285,7 @@ button { /* joli rendu sous IE:
www.viget.com/inspire/styling-the-button-element
 
 .progress-bar strong {
   color: #000;
-  padding: 0 .5em;
-  -webkit-moz-text-shadow: 0 1px 1px #fff;
-  -moz-text-shadow: 0 1px 1px #fff;
+  padding: 0 0.5em;
   text-shadow: 0 1px 1px #fff;
   position: absolute;
   top: 2px;
@@ -306,19 +304,17 @@ button { /* joli rendu sous IE:
www.viget.com/inspire/styling-the-button-element
   background-image: -moz-linear-gradient(top, #bbb, #777);
   background-image: -ms-linear-gradient(top, #bbb, #777);
   background-image: -o-linear-gradient(top, #bbb, #777);
-  background-image: linear-gradient(top, #bbb, #777);
+  background-image: linear-gradient(to top, #bbb, #777);
   display: inline-block;
   height: 100%;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
-  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
+  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
   -webkit-transition: width 2s ease-in-out;
   -moz-transition: width 2s ease-in-out;
-  -ms-transition: width 2s ease-in-out;
-  -o-transition: width 2s ease-in-out;
   transition: width 2s ease-in-out;
 }
 
@@ -329,17 +325,17 @@ button { /* joli rendu sous IE:
www.viget.com/inspire/styling-the-button-element
   background-image: -moz-linear-gradient(top, #bbb, #777);
   background-image: -ms-linear-gradient(top, #bbb, #777);
   background-image: -o-linear-gradient(top, #bbb, #777);
-  background-image: linear-gradient(top, #bbb, #777);
+  background-image: linear-gradient(to top, #bbb, #777);
 }
 
 .progress-bar.blue span {
   background-color: #34c2e3;
-  background-image: -webkit-gradient(linear, left top, left bottom,
from(#34c2e3), to(#13ACD1));
-  background-image: -webkit-linear-gradient(top, #34c2e3, #13ACD1);
-  background-image: -moz-linear-gradient(top, #34c2e3, #13ACD1);
-  background-image: -ms-linear-gradient(top, #34c2e3, #13ACD1);
-  background-image: -o-linear-gradient(top, #34c2e3, #13ACD1);
-  background-image: linear-gradient(top, #34c2e3, #13ACD1);
+  background-image: -webkit-gradient(linear, left top, left bottom,
from(#34c2e3), to(#13acd1));
+  background-image: -webkit-linear-gradient(top, #34c2e3, #13acd1);
+  background-image: -moz-linear-gradient(top, #34c2e3, #13acd1);
+  background-image: -ms-linear-gradient(top, #34c2e3, #13acd1);
+  background-image: -o-linear-gradient(top, #34c2e3, #13acd1);
+  background-image: linear-gradient(to top, #34c2e3, #13acd1);
 }
 
 .progress-bar.orange span {
@@ -349,7 +345,7 @@ button { /* joli rendu sous IE:
www.viget.com/inspire/styling-the-button-element
   background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
   background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
   background-image: -o-linear-gradient(top, #fecf23, #fd9215);
-  background-image: linear-gradient(top, #fecf23, #fd9215);
+  background-image: linear-gradient(to top, #fecf23, #fd9215);
 }
 
 .progress-bar.green span {
@@ -359,5 +355,5 @@ button { /* joli rendu sous IE:
www.viget.com/inspire/styling-the-button-element
   background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
   background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
   background-image: -o-linear-gradient(top, #a5df41, #4ca916);
-  background-image: linear-gradient(top, #a5df41, #4ca916);
+  background-image: linear-gradient(to top, #a5df41, #4ca916); 
 }

Cordialement,

Eric

Le patch complet (je n'ai pas modifier l'indentation ...) :

diff --git
a/plugins/auto/formidable/v3.5.6/css/formidable_analyse.css.html
b/plugins/auto/formidable/v3.5.6/css/formidable_analyse.css.html
index 3a82a97..1a670c9 100755
--- a/plugins/auto/formidable/v3.5.6/css/formidable_analyse.css.html
+++ b/plugins/auto/formidable/v3.5.6/css/formidable_analyse.css.html
@@ -16,9 +16,7 @@
 
 .progress-bar strong {
 	color:#000;
-	padding:0 .5em;
-	-webkit-moz-text-shadow: 0 1px 1px #fff;
-	-moz-text-shadow: 0 1px 1px #fff;
+	padding:0 0.5em;
 	text-shadow: 0 1px 1px #fff;
 	position:absolute;
 	top:2px;
@@ -33,20 +31,19 @@
 	  background-image: -moz-linear-gradient(top, #bbb, #777);
 	  background-image: -ms-linear-gradient(top, #bbb, #777);
 	  background-image: -o-linear-gradient(top, #bbb, #777);
-	  background-image: linear-gradient(top, #bbb, #777); 
+	  background-image: linear-gradient(to top, #bbb, #777);
 	display: inline-block;
 	height: 100%;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
-	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
+	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
         -webkit-transition: width 2s ease-in-out;
         -moz-transition: width 2s ease-in-out;
-        -ms-transition: width 2s ease-in-out;
         -o-transition: width 2s ease-in-out;
-        transition: width 2s ease-in-out;    
+        transition: width 2s ease-in-out;
 }
 
 .progress-bar.gray span {
@@ -56,17 +53,17 @@
 	  background-image: -moz-linear-gradient(top, #bbb, #777);
 	  background-image: -ms-linear-gradient(top, #bbb, #777);
 	  background-image: -o-linear-gradient(top, #bbb, #777);
-	  background-image: linear-gradient(top, #bbb, #777); 
+	  background-image: linear-gradient(to top, #bbb, #777);
 }
 
 .progress-bar.blue span {
 	background-color: #34c2e3;
-	  background-image: -webkit-gradient(linear, left top, left
bottom, from(#34c2e3), to(#13ACD1));
-	  background-image: -webkit-linear-gradient(top, #34c2e3,
#13ACD1);
-	  background-image: -moz-linear-gradient(top, #34c2e3,
#13ACD1);
-	  background-image: -ms-linear-gradient(top, #34c2e3,
#13ACD1);
-	  background-image: -o-linear-gradient(top, #34c2e3, #13ACD1);
-	  background-image: linear-gradient(top, #34c2e3, #13ACD1);  
+	  background-image: -webkit-gradient(linear, left top, left
bottom, from(#34c2e3), to(#13acd1));
+	  background-image: -webkit-linear-gradient(top, #34c2e3,
#13acd1);
+	  background-image: -moz-linear-gradient(top, #34c2e3,
#13acd1);
+	  background-image: -ms-linear-gradient(top, #34c2e3,
#13acd1);
+	  background-image: -o-linear-gradient(top, #34c2e3, #13acd1);
+	  background-image: linear-gradient(to top, #34c2e3, #13acd1);
 }
 
 .progress-bar.orange span {
@@ -76,7 +73,7 @@
 	  background-image: -moz-linear-gradient(top, #fecf23,
#fd9215);
 	  background-image: -ms-linear-gradient(top, #fecf23,
#fd9215);
 	  background-image: -o-linear-gradient(top, #fecf23, #fd9215);
-	  background-image: linear-gradient(top, #fecf23, #fd9215);  
+	  background-image: linear-gradient(to top, #fecf23, #fd9215);
 }	
 
 .progress-bar.green span {
@@ -86,5 +83,5 @@
 	  background-image: -moz-linear-gradient(top, #a5df41,
#4ca916);
 	  background-image: -ms-linear-gradient(top, #a5df41,
#4ca916);
 	  background-image: -o-linear-gradient(top, #a5df41, #4ca916);
-	  background-image: linear-gradient(top, #a5df41, #4ca916);  
+	  background-image: linear-gradient(to top, #a5df41, #4ca916);
 }