IE < 10 does not support gradients.

Since the new imgdiff UI heavily used gradients, this leaves IE9 and
IE8 users with a complete disfunctional UI.

Replaced all gradients by simpler means:

* Vertical handle: instead of 2px wide gradient, use a 1px background
  and a white border-right

* Opacity slider: No gradient but a simple border and background-color

* All radial-gradients replaced by small pre-computed PNGs

* Checkerboard background done with a small repeated PNG

With these changes, the imgdiff UI is fully functional even in IE 8.
Visual changes in other browsers are barely discernible.

diff --git a/src/main/resources/gitblit.css b/src/main/resources/gitblit.css
index 5a62de0b35df58630ab864987b0396bba15f8a7c..e0570ceb4017fe999e548d38425e3ec48ff56958 100644 (file)
--- a/src/main/resources/gitblit.css
+++ b/src/main/resources/gitblit.css
@@ -1440,6 +1440,8 @@ div.diff > table {
 \r
 /* Image diffs. */\r
 \r
+/* Note: can't use gradients; IE < 10 doesn't support them. Use pre-created pngs with transparency instead. */\r
+\r
 /* Set on body during mouse tracking. */\r
 .no-select {\r
        -webkit-touch-callout:none;\r
@@ -1460,10 +1462,14 @@ div.imgdiff {
        position:relative;\r
        display: inline-block;\r
        /* Checkerboard background to reveal transparency. */\r
-    background-color: white;\r
-    background-image: linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD), linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD);\r
-    background-size:16px 16px;\r
-    background-position:0 0, 8px 8px;\r
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAK0lEQVQoz2O8e/cuAzagpKSEVZyJgUQwqoEYwPj//3+sEvfu3RsNJfppAACQZwizxs5QrAAAAABJRU5ErkJggg==);\r
+    background-repeat: repeat;\r
+       /* Same with CSS:\r
+       background-color: white;\r
+       background-image: linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD), linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD);\r
+       background-size:16px 16px;\r
+       background-position:0 0, 8px 8px;\r
+       */\r
 }\r
 \r
 div.imgdiff-left {\r
@@ -1490,9 +1496,8 @@ img.imgdiff-old {
        margin: 12px 35px;\r
        padding: 0;\r
        position: relative;\r
-       border-left: 1px solid #888;\r
-       border-right: 1px solid #888;\r
-       background: linear-gradient(to bottom, #888, #EEE 50%, #888);\r
+       border: 1px solid #888;\r
+       background-color: #DDD;\r
 }\r
 \r
 .imgdiff-opa-container:before {\r
@@ -1502,7 +1507,8 @@ img.imgdiff-old {
        top: -4px;\r
        width : 12px;\r
        height: 12px;\r
-       background-image: radial-gradient(6px at 50% 50%, rgba(255, 255, 255, 255) 50%, rgba(255, 255, 255, 0) 6px);\r
+       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA7klEQVQoz13STUrDMRAF8N+02fQDhCpqNyJIvUEXXfYCXtlFsZeQLpRCpYJ01RakxM38IRgIQyZv3rx5SchVaw1c4xm36OEb7/jqcJHgPuZYYopx3h2xwwrriPgtyTzHCx5xg1ESnvJ8lR1fS8pYJvgBEwyywwlD9LGotX6W1DxNpknutkPgnGSzkgOOEzRoogY8zPx9L7VFa0Ku//lAlLTumO1PjYxuhnMT9yV93uUMw2Q+NwU/OGCL95KPskrr+o3mruCAD7xhU1LjOpkX6caoGXib4HVEXKLWKiK67/GEGe6SYJ+SNxFxqbX2/gBxKkhxx1tQIAAAAABJRU5ErkJggg==);\r
+       /* With CSS: background-image: radial-gradient(6px at 50% 50%, rgba(255, 255, 255, 255) 50%, rgba(255, 255, 255, 0) 6px); */\r
 }\r
 \r
 .imgdiff-opa-container:after {\r
@@ -1512,7 +1518,8 @@ img.imgdiff-old {
        top: -4px;\r
        width : 12px;\r
        height: 12px;\r
-       background-image: radial-gradient(6px at 50% 50%, #888, #888 1px, transparent 6px);\r
+       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAABlklEQVQoz02Rr45TYRTE5/z7ynebYNBIFFuLXV2FQRIgWcUDkN3bBNnbR0CQJvsGGLCbIEFgSCrgGXCw7b3fOT2ILQm/ZJIRI2YyhBObzaZm5kVmvszMs8wkJtoR0ZZUr/vLyz/DMBCdwg+PcfzUvC3cHRGBTICZUYpBVb+KyPO+73/SZrOpEccv03hYHMbRp9bk6EEJQITTzFqttZjZ59ls9kwz88K9LQ7j6IfDXsdxgrcGEEFEqJRSAAQzn7fWXmtmvnJ3tNZkHCfc3t5iahOQgJWCBKCq1FqDiDzVzHwcEYgIcndMU8N+v0dmogNQzODufLcrzxiZhAQyEwBASGSedPL/wyDaMTNEJEUEpRi6rkPXdShWoKoQkWBmENGOmWhrxWBmrZSCe7ViPp9jPp+j1opSSpoZmxmY+YOS6rVmvqi1PgEQqkruzgAgImFmXGslVb1h5u2/4x65+/uIOG+tISLu+jLDzKCqN6r6pu/7bzIMA61Wq1/L5fIjgN8ict/MHphZmNl3VX1nJm+vrvof6/Xa/gJuQtCzTqj1dQAAAABJRU5ErkJggg==);\r
+       /* With CSS: background-image: radial-gradient(6px at 50% 50%, #888, #888 1px, transparent 6px); */\r
 }\r
 \r
 .imgdiff-opa-slider {\r
@@ -1529,7 +1536,8 @@ img.imgdiff-old {
        height: 10px;\r
        position: absolute;\r
        top: -3px;\r
-       background-image: radial-gradient(5px at 50% 50%, #444, #888, transparent 5px);\r
+       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAABMklEQVQY022OsU7CUBRA723fpTS0NcVBJuOoQUed0MSJhOiP0IHK6g84ShoM/2HE1TjZxeCA0UF3RW2tLQ73mesgLuiZT3IOwoww7FSLYrrDzHUAMInUbblsX0RR9NJsNgEBAIIg2EjT9DDP8y2ttSsiqEhlTsW58TzvaDAYxBiGB9XJ5PkkSZJdZvZFRAEAIKImUm+et3BVqy11VFHkjTzPN2cS/a6ICDHrxWlR1N+zjz2DmddnOQVziIjJWnuaedUAAENEEP4iPweIImIYRDQmogwR9T+SVkplpVLpzrBt+9KpVEaK6BUReU6a2LY9dl33zIzj+LOx3XgUkRUQsADwSylzalnWk+M4I9/3o36/f42t/RYMT4fQ7XaX0zRpMes1ADAU0b3nuee9495DO2ib37s7ktpA7ddzAAAAAElFTkSuQmCC);\r
+       /* With CSS: background-image: radial-gradient(5px at 50% 50%, #444, #888, transparent 5px); */\r
 }\r
 \r
 .imgdiff-ovr-slider {\r
@@ -1541,10 +1549,11 @@ img.imgdiff-old {
 }\r
 \r
 .imgdiff-ovr-handle {\r
-       width : 2px;\r
+       width : 1px;\r
        height: 100%;\r
        top: 0px;\r
-       background: linear-gradient(to right, #444, #FFF);\r
+       background-color: #444;\r
+       border-right: 1px solid #FFF;\r
 }\r
 \r
 .imgdiff-ovr-handle:before {\r
@@ -1554,7 +1563,8 @@ img.imgdiff-old {
        bottom: -5px;\r
        width : 10px;\r
        height: 10px;\r
-       background-image: radial-gradient(5px at 50% 50%, #444, #888, transparent 5px);\r
+       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAABMklEQVQY022OsU7CUBRA723fpTS0NcVBJuOoQUed0MSJhOiP0IHK6g84ShoM/2HE1TjZxeCA0UF3RW2tLQ73mesgLuiZT3IOwoww7FSLYrrDzHUAMInUbblsX0RR9NJsNgEBAIIg2EjT9DDP8y2ttSsiqEhlTsW58TzvaDAYxBiGB9XJ5PkkSZJdZvZFRAEAIKImUm+et3BVqy11VFHkjTzPN2cS/a6ICDHrxWlR1N+zjz2DmddnOQVziIjJWnuaedUAAENEEP4iPweIImIYRDQmogwR9T+SVkplpVLpzrBt+9KpVEaK6BUReU6a2LY9dl33zIzj+LOx3XgUkRUQsADwSylzalnWk+M4I9/3o36/f42t/RYMT4fQ7XaX0zRpMes1ADAU0b3nuee9495DO2ib37s7ktpA7ddzAAAAAElFTkSuQmCC);\r
+       /* With CSS: background-image: radial-gradient(5px at 50% 50%, #444, #888, transparent 5px); */\r
 }\r
 \r
 .imgdiff-ovr-handle:after {\r
@@ -1564,8 +1574,8 @@ img.imgdiff-old {
        top: -5px;\r
        width : 10px;\r
        height: 10px;\r
-       /* border: 1px solid red; */\r
-       background-image: radial-gradient(5px at 50% 50%, #444, #888, transparent 5px);\r
+       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAABMklEQVQY022OsU7CUBRA723fpTS0NcVBJuOoQUed0MSJhOiP0IHK6g84ShoM/2HE1TjZxeCA0UF3RW2tLQ73mesgLuiZT3IOwoww7FSLYrrDzHUAMInUbblsX0RR9NJsNgEBAIIg2EjT9DDP8y2ttSsiqEhlTsW58TzvaDAYxBiGB9XJ5PkkSZJdZvZFRAEAIKImUm+et3BVqy11VFHkjTzPN2cS/a6ICDHrxWlR1N+zjz2DmddnOQVziIjJWnuaedUAAENEEP4iPweIImIYRDQmogwR9T+SVkplpVLpzrBt+9KpVEaK6BUReU6a2LY9dl33zIzj+LOx3XgUkRUQsADwSylzalnWk+M4I9/3o36/f42t/RYMT4fQ7XaX0zRpMes1ADAU0b3nuee9495DO2ib37s7ktpA7ddzAAAAAElFTkSuQmCC);\r
+       /* With CSS: background-image: radial-gradient(5px at 50% 50%, #444, #888, transparent 5px); */\r
 }\r
 \r
 /* End image diffs */\r