Bug 6865 - Replace image-based gradient backgrounds with CSS3 gradients
authorOwen Leonard <oleonard@myacpl.org>
Tue, 13 Sep 2011 12:16:13 +0000 (08:16 -0400)
committerPaul Poulain <paul.poulain@biblibre.com>
Tue, 13 Dec 2011 15:04:16 +0000 (16:04 +0100)
Replaces image-based gradients in:

OPAC search bar
OPAC submit buttons
OPAC lists menu background
OPAC alert and message boxes
OPAC user menu tabs
Staff client alert and message boxes
Staff client side menu tabs

Removes obsoleted background image files.

Cross-browser background-gradients created using:
http://www.colorzilla.com/gradient-editor/

Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Signed-off-by: Paul Poulain <paul.poulain@biblibre.com>
17 files changed:
koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
koha-tmpl/intranet-tmpl/prog/img/alert-bg.gif [deleted file]
koha-tmpl/intranet-tmpl/prog/img/bg-tab.png [deleted file]
koha-tmpl/intranet-tmpl/prog/img/button-bg.gif [deleted file]
koha-tmpl/intranet-tmpl/prog/img/dialog-bg.gif [deleted file]
koha-tmpl/intranet-tmpl/prog/img/fade-butt.png [deleted file]
koha-tmpl/intranet-tmpl/prog/img/message-bg.gif [deleted file]
koha-tmpl/intranet-tmpl/prog/img/side-tab-gradient-hover.gif [deleted file]
koha-tmpl/intranet-tmpl/prog/img/side-tab-gradient.gif [deleted file]
koha-tmpl/opac-tmpl/prog/en/css/opac.css
koha-tmpl/opac-tmpl/prog/images/alert-bg.gif [deleted file]
koha-tmpl/opac-tmpl/prog/images/listmenu-container-bg.gif [deleted file]
koha-tmpl/opac-tmpl/prog/images/menu-background.gif [deleted file]
koha-tmpl/opac-tmpl/prog/images/message-bg.gif [deleted file]
koha-tmpl/opac-tmpl/prog/images/side-tab-gradient-hover.gif [deleted file]
koha-tmpl/opac-tmpl/prog/images/side-tab-gradient.gif [deleted file]
koha-tmpl/opac-tmpl/prog/images/submit-bg.gif [deleted file]

index 6581c00..9eb7fa2 100644 (file)
@@ -1115,12 +1115,14 @@ div.first fieldset {
 }
 
 .dialog {
-  border: 1px solid #bcbcbc;
+       -moz-border-radius : 2px;
+       border-radius : 2px;
        padding : .5em;
        margin : 1em auto;
-  width: 65%;
-  }
-  
+       text-align : center;
+       width: 65%;
+}
+
 .dialog table {
        margin : .5em auto;
 }
@@ -1194,20 +1196,27 @@ td input.approve {
        background-color : #ffc;
  }
 
+div.dialog {
+       border: 1px solid #bcbcbc;
+}
+
 div.alert {
-  background : #FFC url(../../img/alert-bg.gif) repeat-x left 0;
-  text-align : center;
+       background: #fef8d3; /* Old browsers */
+       background: -moz-linear-gradient(top, #fef8d3 0%, #ffec91 9%, #ffed87 89%, #f9dc00 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fef8d3), color-stop(9%,#ffec91), color-stop(89%,#ffed87), color-stop(100%,#f9dc00)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(top, #fef8d3 0%,#ffec91 9%,#ffed87 89%,#f9dc00 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(top, #fef8d3 0%,#ffec91 9%,#ffed87 89%,#f9dc00 100%); /* Opera11.10+ */
+       background: -ms-linear-gradient(top, #fef8d3 0%,#ffec91 9%,#ffed87 89%,#f9dc00 100%); /* IE10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef8d3', endColorstr='#f9dc00',GradientType=0 ); /* IE6-9 */
+       background: linear-gradient(top, #fef8d3 0%,#ffec91 9%,#ffed87 89%,#f9dc00 100%); /* W3C */
+         text-align : center;
+       border: 1px solid #E0C726;
 }
 
 div.alert strong {
        color : #900;
 }
 
-div.dialog {
-  background : #FFC url(../../img/dialog-bg.gif) repeat-x left 0;
-  text-align : center;
-}
-
 a.document {
        background-position : left middle;
        background-repeat : no-repeat;
@@ -1227,7 +1236,14 @@ a.xml {
 }
 
 div.message {
-       background : white url("../../img/message-bg.gif") repeat-x left 0;
+       background: #ffffff; /* Old browsers */
+       background: -moz-linear-gradient(top, #ffffff 0%, #f4f6fa 2%, #eaeef5 23%, #e8edf6 94%, #cddbf2 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(2%,#f4f6fa), color-stop(23%,#eaeef5), color-stop(94%,#e8edf6), color-stop(100%,#cddbf2)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(top, #ffffff 0%,#f4f6fa 2%,#eaeef5 23%,#e8edf6 94%,#cddbf2 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(top, #ffffff 0%,#f4f6fa 2%,#eaeef5 23%,#e8edf6 94%,#cddbf2 100%); /* Opera11.10+ */
+       background: -ms-linear-gradient(top, #ffffff 0%,#f4f6fa 2%,#eaeef5 23%,#e8edf6 94%,#cddbf2 100%); /* IE10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cddbf2',GradientType=0 ); /* IE6-9 */
+       background: linear-gradient(top, #ffffff 0%,#f4f6fa 2%,#eaeef5 23%,#e8edf6 94%,#cddbf2 100%); /* W3C */
        border : 1px solid #bcbcbc;
        text-align: center;
        width : 55%;
@@ -1309,7 +1325,14 @@ div#menu {
 div#menu li a {
        text-decoration: none;
        display: block;
-       background : #EEE url(../../img/side-tab-gradient.gif) repeat-y top right;
+       background: #eeeeee; /* Old browsers */
+       background: -moz-linear-gradient(left, #eeeeee 0%, #eeeeee 96%, #e6e6e6 97%, #cccccc 99%, #c1c1c1 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eeeeee), color-stop(96%,#eeeeee), color-stop(97%,#e6e6e6), color-stop(99%,#cccccc), color-stop(100%,#c1c1c1)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(left, #eeeeee 0%,#eeeeee 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(left, #eeeeee 0%,#eeeeee 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* Opera11.10+ */
+       background: -ms-linear-gradient(left, #eeeeee 0%,#eeeeee 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* IE10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#c1c1c1',GradientType=1 ); /* IE6-9 */
+       background: linear-gradient(left, #eeeeee 0%,#eeeeee 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* W3C */
        border: 1px solid #000;
        font-size: 111%;
        margin: .5em 0;
@@ -1318,7 +1341,14 @@ div#menu li a {
 }
 
 div#menu li a:hover {
-       background : #E8F0F6 url(../../img/side-tab-gradient-hover.gif) repeat-y top right;
+       background: #e8f0f6; /* Old browsers */
+       background: -moz-linear-gradient(left, #e8f0f6 0%, #e8f0f6 96%, #c1c1c1 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e8f0f6), color-stop(96%,#e8f0f6), color-stop(100%,#c1c1c1)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(left, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(left, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* Opera11.10+ */
+       background: -ms-linear-gradient(left, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* IE10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8f0f6', endColorstr='#c1c1c1',GradientType=1 ); /* IE6-9 */
+       background: linear-gradient(left, #e8f0f6 0%,#e8f0f6 96%,#c1c1c1 100%); /* W3C */
 }
 
 div#menu li.active a:hover {
@@ -1607,8 +1637,16 @@ input[type=submit], input[type=reset], input[type=button], input.submit, button.
        border: 1px outset #999999;
        border-top-color: #666;
        border-left-color: #666;
+       -moz-border-radius : 2px;
        padding: 0.25em;
-       background : #E8E8E8 url(../../img/button-bg.gif) top left repeat-x;
+       background: #ffffff; /* Old browsers */
+       background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 35%, #e0e0e0 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(35%,#f7f7f7), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* Opera11.10+ */
+       background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* IE10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
+       background: linear-gradient(top, #ffffff 0%,#f7f7f7 35%,#e0e0e0 100%); /* W3C */
        color: #333333;
 }
 
diff --git a/koha-tmpl/intranet-tmpl/prog/img/alert-bg.gif b/koha-tmpl/intranet-tmpl/prog/img/alert-bg.gif
deleted file mode 100644 (file)
index 44625a2..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/img/alert-bg.gif and /dev/null differ
diff --git a/koha-tmpl/intranet-tmpl/prog/img/bg-tab.png b/koha-tmpl/intranet-tmpl/prog/img/bg-tab.png
deleted file mode 100644 (file)
index 18554b0..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/img/bg-tab.png and /dev/null differ
diff --git a/koha-tmpl/intranet-tmpl/prog/img/button-bg.gif b/koha-tmpl/intranet-tmpl/prog/img/button-bg.gif
deleted file mode 100644 (file)
index a63f487..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/img/button-bg.gif and /dev/null differ
diff --git a/koha-tmpl/intranet-tmpl/prog/img/dialog-bg.gif b/koha-tmpl/intranet-tmpl/prog/img/dialog-bg.gif
deleted file mode 100644 (file)
index b70cf23..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/img/dialog-bg.gif and /dev/null differ
diff --git a/koha-tmpl/intranet-tmpl/prog/img/fade-butt.png b/koha-tmpl/intranet-tmpl/prog/img/fade-butt.png
deleted file mode 100644 (file)
index 42f08b7..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/img/fade-butt.png and /dev/null differ
diff --git a/koha-tmpl/intranet-tmpl/prog/img/message-bg.gif b/koha-tmpl/intranet-tmpl/prog/img/message-bg.gif
deleted file mode 100644 (file)
index 553546f..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/img/message-bg.gif and /dev/null differ
diff --git a/koha-tmpl/intranet-tmpl/prog/img/side-tab-gradient-hover.gif b/koha-tmpl/intranet-tmpl/prog/img/side-tab-gradient-hover.gif
deleted file mode 100644 (file)
index 9fcdc96..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/img/side-tab-gradient-hover.gif and /dev/null differ
diff --git a/koha-tmpl/intranet-tmpl/prog/img/side-tab-gradient.gif b/koha-tmpl/intranet-tmpl/prog/img/side-tab-gradient.gif
deleted file mode 100644 (file)
index af3addb..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/img/side-tab-gradient.gif and /dev/null differ
index c6a837c..21dc08f 100755 (executable)
@@ -220,9 +220,21 @@ h6 {
        font-size : 100%;
 }
 
-input[type=submit], input[type=button], input[type=reset] {
-       background : #b8d0e6 url(../../images/submit-bg.gif) repeat-x 0 0;
-       background-color : #b8d0e6;
+input[type=submit],
+input[type=button],
+input[type=reset],
+fieldset.brief input[type=submit],
+fieldset.brief input[type=button],
+fieldset.brief input[type=reset]
+{
+       background: #f4f9fc; /* Old browsers */
+       background: -moz-linear-gradient(top, #f4f9fc 0%, #dfeefa 4%, #bfd5ea 93%, #a1c4e2 97%, #b8d0e6 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f9fc), color-stop(4%,#dfeefa), color-stop(93%,#bfd5ea), color-stop(97%,#a1c4e2), color-stop(100%,#b8d0e6)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(top, #f4f9fc 0%,#dfeefa 4%,#bfd5ea 93%,#a1c4e2 97%,#b8d0e6 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(top, #f4f9fc 0%,#dfeefa 4%,#bfd5ea 93%,#a1c4e2 97%,#b8d0e6 100%); /* Opera11.10+ */
+       background: -ms-linear-gradient(top, #f4f9fc 0%,#dfeefa 4%,#bfd5ea 93%,#a1c4e2 97%,#b8d0e6 100%); /* IE10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f9fc', endColorstr='#b8d0e6',GradientType=0 ); /* IE6-9 */
+       background: linear-gradient(top, #f4f9fc 0%,#dfeefa 4%,#bfd5ea 93%,#a1c4e2 97%,#b8d0e6 100%); /* W3C */
        border-top: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
        border-right: 1px solid #eeeeee;
@@ -233,7 +245,7 @@ input[type=submit], input[type=button], input[type=reset] {
        padding : 4px;
 }
 
-input[type=submit]:active, input[type=button], input[type=reset] {
+input[type=submit]:active, input[type=button]:active, input[type=reset]:active {
        border: 1px inset #666666;
 }
 
@@ -760,10 +772,14 @@ body#advsearch #listsmenulink {
 }
 
 #opac-main-search {
-       background-image : url( ../../images/menu-background.gif);
-       background-repeat : repeat-x;
-       background-color : #739ACF;
-       background-position : -10px top;
+       background: #8fb4e8; /* Old browsers */
+       background: -moz-linear-gradient(top, #8fb4e8 0%, #8cb1e5 19%, #80a8dc 48%, #7da5d8 52%, #7198cf 83%, #618ac0 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fb4e8), color-stop(19%,#8cb1e5), color-stop(48%,#80a8dc), color-stop(52%,#7da5d8), color-stop(83%,#7198cf), color-stop(100%,#618ac0)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(top, #8fb4e8 0%,#8cb1e5 19%,#80a8dc 48%,#7da5d8 52%,#7198cf 83%,#618ac0 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(top, #8fb4e8 0%,#8cb1e5 19%,#80a8dc 48%,#7da5d8 52%,#7198cf 83%,#618ac0 100%); /* Opera 11.10+ */
+       background: -ms-linear-gradient(top, #8fb4e8 0%,#8cb1e5 19%,#80a8dc 48%,#7da5d8 52%,#7198cf 83%,#618ac0 100%); /* IE10+ */
+       background: linear-gradient(top, #8fb4e8 0%,#8cb1e5 19%,#80a8dc 48%,#7da5d8 52%,#7198cf 83%,#618ac0 100%); /* W3C */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fb4e8', endColorstr='#618ac0',GradientType=0 ); /* IE6-9 */
        border-top : 1px solid #335599;
        border-bottom : 1px solid #335599;
        margin-left : -10px;
@@ -1340,8 +1356,15 @@ padding-left : .4em;
   }
  
 div.alert {
-  background : #FFC url(../../images/alert-bg.gif) repeat-x left 0;
-  text-align : center;
+       background: #fef8d3; /* Old browsers */
+       background: -moz-linear-gradient(top, #fef8d3 0%, #ffec91 9%, #ffed87 89%, #f9dc00 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fef8d3), color-stop(9%,#ffec91), color-stop(89%,#ffed87), color-stop(100%,#f9dc00)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(top, #fef8d3 0%,#ffec91 9%,#ffed87 89%,#f9dc00 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(top, #fef8d3 0%,#ffec91 9%,#ffed87 89%,#f9dc00 100%); /* Opera11.10+ */
+       background: -ms-linear-gradient(top, #fef8d3 0%,#ffec91 9%,#ffed87 89%,#f9dc00 100%); /* IE10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef8d3', endColorstr='#f9dc00',GradientType=0 ); /* IE6-9 */
+       background: linear-gradient(top, #fef8d3 0%,#ffec91 9%,#ffed87 89%,#f9dc00 100%); /* W3C */
+       text-align : center;
 }
 
 div.alert strong {
@@ -1349,8 +1372,15 @@ div.alert strong {
 }
 
 div.message {
-       background : white url("../../images/message-bg.gif") repeat-x left 0;
-   border : 1px solid #bcbcbc;
+       background: #ffffff; /* Old browsers */
+       background: -moz-linear-gradient(top, #ffffff 0%, #f4f6fa 2%, #eaeef5 23%, #e8edf6 94%, #cddbf2 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(2%,#f4f6fa), color-stop(23%,#eaeef5), color-stop(94%,#e8edf6), color-stop(100%,#cddbf2)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(top, #ffffff 0%,#f4f6fa 2%,#eaeef5 23%,#e8edf6 94%,#cddbf2 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(top, #ffffff 0%,#f4f6fa 2%,#eaeef5 23%,#e8edf6 94%,#cddbf2 100%); /* Opera11.10+ */
+       background: -ms-linear-gradient(top, #ffffff 0%,#f4f6fa 2%,#eaeef5 23%,#e8edf6 94%,#cddbf2 100%); /* IE10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cddbf2',GradientType=0 ); /* IE6-9 */
+       background: linear-gradient(top, #ffffff 0%,#f4f6fa 2%,#eaeef5 23%,#e8edf6 94%,#cddbf2 100%); /* W3C */
+       border : 1px solid #bcbcbc;
        width : 55%;
 }
 
@@ -1388,11 +1418,15 @@ div.message {
 }
 
 #opac-main-search #listsmenu .bd {
-       background-color : #f3f3f3;
+       background: #eef4fe; /* Old browsers */
+       background: -moz-linear-gradient(left, #eef4fe 0%, #eef4fe 88%, #f6f9fe 98%, #ffffff 99%, #a5c2f6 99%, #e6eefe 100%, #cbdefe 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eef4fe), color-stop(88%,#eef4fe), color-stop(98%,#f6f9fe), color-stop(99%,#ffffff), color-stop(99%,#a5c2f6), color-stop(100%,#e6eefe), color-stop(100%,#cbdefe)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(left, #eef4fe 0%,#eef4fe 88%,#f6f9fe 98%,#ffffff 99%,#a5c2f6 99%,#e6eefe 100%,#cbdefe 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(left, #eef4fe 0%,#eef4fe 88%,#f6f9fe 98%,#ffffff 99%,#a5c2f6 99%,#e6eefe 100%,#cbdefe 100%); /* Opera11.10+ */
+       background: -ms-linear-gradient(left, #eef4fe 0%,#eef4fe 88%,#f6f9fe 98%,#ffffff 99%,#a5c2f6 99%,#e6eefe 100%,#cbdefe 100%); /* IE10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eef4fe', endColorstr='#cbdefe',GradientType=1 ); /* IE6-9 */
+       background: linear-gradient(left, #eef4fe 0%,#eef4fe 88%,#f6f9fe 98%,#ffffff 99%,#a5c2f6 99%,#e6eefe 100%,#cbdefe 100%); /* W3C */
        border : 1px solid #739acf;
-       background-image : url("../../images/listmenu-container-bg.gif");
-       background-position : top right;
-       background-repeat : repeat-y;
        padding : .3em 1em 0 0;
 }
 
@@ -1478,12 +1512,21 @@ div.lang{
 }
 
 #opac-main-search input.submit {
-       background : #b8d0e6 url(../../images/submit-bg.gif) repeat-x 0 0;
-       background-color : #b8d0e6;
-       border-top: 1px solid #cccccc;
-       border-left: 1px solid #cccccc;
-       border-right: 1px solid #eeeeee;
-       border-bottom: 1px solid #eeeeee;
+       background: #e6f3fe; /* Old browsers */
+       background: -moz-linear-gradient(top, #e6f3fe 0%, #dfeefa 8%, #bfd5ea 49%, #b8d0e6 52%, #b8d0e6 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f3fe), color-stop(8%,#dfeefa), color-stop(49%,#bfd5ea), color-stop(52%,#b8d0e6), color-stop(100%,#b8d0e6)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(top, #e6f3fe 0%,#dfeefa 8%,#bfd5ea 49%,#b8d0e6 52%,#b8d0e6 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(top, #e6f3fe 0%,#dfeefa 8%,#bfd5ea 49%,#b8d0e6 52%,#b8d0e6 100%); /* Opera11.10+ */
+       background: -ms-linear-gradient(top, #e6f3fe 0%,#dfeefa 8%,#bfd5ea 49%,#b8d0e6 52%,#b8d0e6 100%); /* IE10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f3fe', endColorstr='#b8d0e6',GradientType=0 ); /* IE6-9 */
+       background: linear-gradient(top, #e6f3fe 0%,#dfeefa 8%,#bfd5ea 49%,#b8d0e6 52%,#b8d0e6 100%); /* W3C */
+       -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+       border-radius: 4px;
+       -webkit-box-shadow: 1px 1px 1px 1px , , .3);
+       -moz-box-shadow: 1px 1px 1px 1px , , .3);
+       box-shadow: 1px 1px 1px 1px , , .3);
+
        color : #333;
        font-weight : normal;
        font-size : 80%;
@@ -1499,9 +1542,16 @@ div#menu {
 }
 
 div#menu li a {
+       background: #eeeeee; /* Old browsers */
+       background: -moz-linear-gradient(left, #eeeeee 0%, #eeeeee 96%, #e6e6e6 97%, #cccccc 99%, #c1c1c1 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eeeeee), color-stop(96%,#eeeeee), color-stop(97%,#e6e6e6), color-stop(99%,#cccccc), color-stop(100%,#c1c1c1)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(left, #eeeeee 0%,#eeeeee 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(left, #eeeeee 0%,#eeeeee 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* Opera 11.10+ */
+       background: -ms-linear-gradient(left, #eeeeee 0%,#eeeeee 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* IE10+ */
+       background: linear-gradient(left, #eeeeee 0%,#eeeeee 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* W3C */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#c1c1c1',GradientType=1 ); /* IE6-9 */
        text-decoration : none;
        display : block;
-       background : #EEE url(../../images/side-tab-gradient.gif) repeat-y top right;
        border : 1px solid #979797;
        font-size : 111%;
        margin : .5em 0;
@@ -1510,7 +1560,14 @@ div#menu li a {
 }
 
 div#menu li a:hover {
-       background : #E8F0F6 url(../../images/side-tab-gradient-hover.gif) repeat-y top right;
+       background: #eaeef5; /* Old browsers */
+       background: -moz-linear-gradient(left, #eaeef5 0%, #dee6f4 96%, #c4d5ef 98%, #a2bee8 100%); /* FF3.6+ */
+       background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eaeef5), color-stop(96%,#dee6f4), color-stop(98%,#c4d5ef), color-stop(100%,#a2bee8)); /* Chrome,Safari4+ */
+       background: -webkit-linear-gradient(left, #eaeef5 0%,#dee6f4 96%,#c4d5ef 98%,#a2bee8 100%); /* Chrome10+,Safari5.1+ */
+       background: -o-linear-gradient(left, #eaeef5 0%,#dee6f4 96%,#c4d5ef 98%,#a2bee8 100%); /* Opera 11.10+ */
+       background: -ms-linear-gradient(left, #eaeef5 0%,#dee6f4 96%,#c4d5ef 98%,#a2bee8 100%); /* IE10+ */
+       background: linear-gradient(left, #eaeef5 0%,#dee6f4 96%,#c4d5ef 98%,#a2bee8 100%); /* W3C */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeef5', endColorstr='#a2bee8',GradientType=1 ); /* IE6-9 */
 }
 
 div#menu li.active a:hover {
diff --git a/koha-tmpl/opac-tmpl/prog/images/alert-bg.gif b/koha-tmpl/opac-tmpl/prog/images/alert-bg.gif
deleted file mode 100644 (file)
index 44625a2..0000000
Binary files a/koha-tmpl/opac-tmpl/prog/images/alert-bg.gif and /dev/null differ
diff --git a/koha-tmpl/opac-tmpl/prog/images/listmenu-container-bg.gif b/koha-tmpl/opac-tmpl/prog/images/listmenu-container-bg.gif
deleted file mode 100644 (file)
index bdeb1aa..0000000
Binary files a/koha-tmpl/opac-tmpl/prog/images/listmenu-container-bg.gif and /dev/null differ
diff --git a/koha-tmpl/opac-tmpl/prog/images/menu-background.gif b/koha-tmpl/opac-tmpl/prog/images/menu-background.gif
deleted file mode 100644 (file)
index 7d0743f..0000000
Binary files a/koha-tmpl/opac-tmpl/prog/images/menu-background.gif and /dev/null differ
diff --git a/koha-tmpl/opac-tmpl/prog/images/message-bg.gif b/koha-tmpl/opac-tmpl/prog/images/message-bg.gif
deleted file mode 100644 (file)
index 553546f..0000000
Binary files a/koha-tmpl/opac-tmpl/prog/images/message-bg.gif and /dev/null differ
diff --git a/koha-tmpl/opac-tmpl/prog/images/side-tab-gradient-hover.gif b/koha-tmpl/opac-tmpl/prog/images/side-tab-gradient-hover.gif
deleted file mode 100644 (file)
index 9fcdc96..0000000
Binary files a/koha-tmpl/opac-tmpl/prog/images/side-tab-gradient-hover.gif and /dev/null differ
diff --git a/koha-tmpl/opac-tmpl/prog/images/side-tab-gradient.gif b/koha-tmpl/opac-tmpl/prog/images/side-tab-gradient.gif
deleted file mode 100644 (file)
index af3addb..0000000
Binary files a/koha-tmpl/opac-tmpl/prog/images/side-tab-gradient.gif and /dev/null differ
diff --git a/koha-tmpl/opac-tmpl/prog/images/submit-bg.gif b/koha-tmpl/opac-tmpl/prog/images/submit-bg.gif
deleted file mode 100644 (file)
index ef5635b..0000000
Binary files a/koha-tmpl/opac-tmpl/prog/images/submit-bg.gif and /dev/null differ