petits affinages de style sur fancy et thickbox pour mieux gerer les boutons start/pause dont le caractere unicode ne s'affiche pas partout pareil. On fait un rendu css du coup, et on en profite pour ajouter des changement de couleur au hover/focus/active

lity/skins/fancybox/lity.css

@@ -37,7 +37,7 @@
 
 /* focus */
 .box_mediabox button[class*="lity-"]:focus{
-	outline: 2px dotted #ccc;
+	outline: 1px dotted #ccc;
 }
 
 /* Close button */
@@ -59,6 +59,11 @@
 	border-radius: 50%;
 	border: 0.175rem solid #fff;
 }
+.lity-close:hover,
+.lity-close:active,
+.lity-close:focus {
+	color: #eee;
+}
 
 /* Group navigation */
 .lity-group-caption .lity-group-current {
@@ -102,15 +107,36 @@
 	color: #fff;
 	border-radius: 50%;
 	border: 0.175rem solid #fff;
+	z-index: 5;
+}
+
+.lity-group-start-stop button:active,
+.lity-group-start-stop button:hover,
+.lity-group-start-stop button:focus {
+	color:#eee;
 }
+
+
 .lity-group-start-stop button b {
 }
 
 .lity-group-start-stop .lity-start {
-	font-size: 0.65em;
+	font-size: 1px;
+	text-indent: -5px;
 	display: block;
-	margin: 0.1em auto;
+	margin: 0.1rem auto;
+	margin-left: 0.12rem;
+	border: 0.5rem solid transparent;
+	border-left-color: #fff;
+	width: 1rem;
+	height: 1rem;
+}
+.lity-group-start-stop .lity-start:active,
+.lity-group-start-stop .lity-start:hover,
+.lity-group-start-stop .lity-start:focus {
+	border-left-color: #eee;
 }
+
 .lity-group-start-stop .lity-stop {
 	display: none;
 }
@@ -118,11 +144,22 @@
 	display: none;
 }
 .lity-slideshow .lity-group-start-stop .lity-stop {
+	font-size: 1px;
+	text-indent: -5px;
 	display: block;
-	margin-top: -0.15em;
-	margin-left: -0.1em;
+	margin: 0.1rem auto;
+	width: 0.7rem;
+	height: 0.7rem;
+	margin-left: -0.05rem;
+	background: #fff;
+}
+.lity-group-start-stop .lity-stop:active,
+.lity-group-start-stop .lity-stop:hover,
+.lity-group-start-stop .lity-stop:focus {
+	background: #eee;
 }
 
+
 /* Next, prev */
 .lity-next, .lity-previous {
 	display: block;

lity/skins/thickbox/lity.css

@@ -45,6 +45,11 @@
 	color: #888;
 	overflow:hidden;
 }
+.lity-close:hover,
+.lity-close:active,
+.lity-close:focus {
+	color: #666;
+}
 
 /* Group navigation */
 .lity-group-caption {
@@ -85,6 +90,8 @@
 .lity-group-start-stop {
 	order:2;
 	display: block;
+	width: 2rem;
+	text-align: center;
 }
 .lity-group-start-stop button {
 	display: block;
@@ -95,6 +102,22 @@
 	color:inherit;
 }
 .lity-group-start-stop button b {
+	margin: auto;
+}
+
+.lity-group-start-stop .lity-start {
+	font-size: 1px;
+	text-indent: -5px;
+	display: block;
+	border: 0.5rem solid transparent;
+	border-left-color: #888;
+	width: 1rem;
+	height: 1rem;
+}
+.lity-group-start-stop .lity-start:active,
+.lity-group-start-stop .lity-start:hover,
+.lity-group-start-stop .lity-start:focus {
+	border-left-color: #666;
 }
 
 .lity-group-start-stop .lity-stop {
@@ -104,8 +127,19 @@
 	display: none;
 }
 .lity-slideshow .lity-group-start-stop .lity-stop {
-	display: inline-block;
+	display: block;
+	font-size: 1px;
+	text-indent: -5px;
+	width: 0.7rem;
+	height: 0.7rem;
+	background: #888;
 }
+.lity-group-start-stop .lity-stop:active,
+.lity-group-start-stop .lity-stop:hover,
+.lity-group-start-stop .lity-stop:focus {
+	background: #666;
+}
+
 
 /* Next, prev */
 .lity-group-next-prev {
@@ -128,6 +162,11 @@
 .lity-next[disabled], .lity-previous[disabled] {
 	visibility: hidden;
 }
+.lity-next:active, .lity-previous:active,
+.lity-next:hover, .lity-previous:hover,
+.lity-next:focus, .lity-previous:focus {
+	color: #666;
+}
 
 .lity-next b, .lity-previous b {
 	display: inline-block;