From 3945c563425bd3084b39ae05016401683ad1bd02 Mon Sep 17 00:00:00 2001
From: Fa_b <zzzazzz@gmail.com>
Date: Thu, 28 Nov 2019 16:47:16 +0100
Subject: [PATCH] =?UTF-8?q?am=C3=A9liorer=20la=20barre=20de=20progression?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inversons la logique actuelle…

Le span passe en absolute et on passe le texte en relative. Ca permet d'avoir la même baseline du texte entre le label et le texte dans la barre (ex: 67% - 8 réponses). Accessoirement ca permet de modifier la taille du texte effet de débord (suppression de la hauteur en px de .progress-bar).

Eclaircir le gris, trop foncé pour y mettre du texte par dessus.

En attendant html5 qui a sa propre balise <progress>
---
 css/formidable_analyse.css.html | 44 +++++++++++++++++----------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/css/formidable_analyse.css.html b/css/formidable_analyse.css.html
index 2ba35b27..5ae8851d 100644
--- a/css/formidable_analyse.css.html
+++ b/css/formidable_analyse.css.html
@@ -2,7 +2,6 @@
 
 .progress-bar {
 	background-color: #f1f1f1;
-	height: 20px;
 	padding: 1px;
 	margin: 2px 0;
 	-moz-border-radius: 5px;
@@ -20,22 +19,25 @@
 	-webkit-moz-text-shadow: 0 1px 1px #fff;
 	-moz-text-shadow: 0 1px 1px #fff;
 	text-shadow: 0 1px 1px #fff;
-	position:absolute;
-	top:2px;
-	left:0;
+	position:relative;
 }
 .progress-bar strong small {font-size:90%; font-weight:normal;}
 
 .progress-bar span {
-	background-color: #bbb;
-	  background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#777));
-	  background-image: -webkit-linear-gradient(top, #bbb, #777);
-	  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);
-	display: inline-block;
-	height: 100%;
+	background-color: #ddd;
+	  background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999));
+	  background-image: -webkit-linear-gradient(top, #ddd, #999);
+	  background-image: -moz-linear-gradient(top, #ddd, #999);
+	  background-image: -ms-linear-gradient(top, #ddd, #999);
+	  background-image: -o-linear-gradient(top, #ddd, #999);
+	  background-image: linear-gradient(top, #ddd, #999);
+	display: block;
+	position: absolute;
+	top: 2px;
+	bottom: 2px;
+	left: 2px;
+	height: calc(100% - 4px);
+	max-width: calc(100% - 4px);
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
@@ -50,13 +52,13 @@
 }
 
 .progress-bar.gray span {
-	background-color: #bbb;
-	  background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#777));
-	  background-image: -webkit-linear-gradient(top, #bbb, #777);
-	  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-color: #ddd;
+	  background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999));
+	  background-image: -webkit-linear-gradient(top, #ddd, #999);
+	  background-image: -moz-linear-gradient(top, #ddd, #999);
+	  background-image: -ms-linear-gradient(top, #ddd, #999);
+	  background-image: -o-linear-gradient(top, #ddd, #999);
+	  background-image: linear-gradient(top, #ddd, #999);
 }
 
 .progress-bar.blue span {
@@ -106,4 +108,4 @@
 .grille_choix td {
 	padding-top: .3462em;
 	padding-bottom: .3462em;
-}
\ No newline at end of file
+}
-- 
GitLab