Bug 7998 - CSS fixes for new interface

Omnibus of changes thus far:

adds slight transparency for news so logo shows through on mainpage..
Fixes purple header gradient in Chrome-based browsers.
remove list from returns.tt options so checkboxes do not have bullets.
fix missing gradient class on returns.tt.
reverse colors of menu div - blue for inactive, grey for active.

turns searchheader blue, rounds corners, improves spacing for sort form.

Adds padding, rounded corners, and a 1px border to the now-blue toolbar.

increase width of intranet nav div to width 40%

add a bit of padding to #searchheader

fieldset.action changes - removed background, added a little padding to make it look better in all of the uses I could find of it.

Bug 7998 - followup - make facets header background blue

bug 7998 - followup - fixing headers on search.pl to be blue, rounded.

bug 7998 - followup - consistency tweaks

match menu borders to the search header tabs (green border)
hover menus a very light grey instead of #eee.
make fieldset.brief have a consistent border with the rest of the fieldsets.

bug 7998 - followup - more tabs/borders updating to fit in new look

boraccount.pl

bug 7998 - followup - add gradient div to prefs-admin-search.inc

Bug 7998 - Change toolbar to be lighter, with barely discernible border

Will need to be applied after the other patch.

Bug 7998 - add gradient to roadtype admin panel

Bug 7998 - adds gradient to patrons-admin-search.tt

Bug 7998 - add gradient to budgets-admin-search.inc

bug 7998 - add gradient to z3950-admin-search.inc

Bug 7998 - add gradient to cities-admin-search.inc

bug 7998 - active tab on checkout table now has green border like side menu

Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css b/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css
index f2f8922..6c7ca1d 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css
@@ -31,9 +31,9 @@
 #area-news h3 {
     /* Title section for the news block : transparency to let the koha logo appear */
     background-color: #EEEEEE;
-    filter:alpha(opacity=50);   /* for IE */
-    -moz-opacity: 0.5;          /* for Firefox before 0.9 */
-    opacity: 0.5;
+    filter:alpha(opacity=70);   /* for IE */
+    -moz-opacity: 0.7;          /* for Firefox before 0.9 */
+    opacity: 0.7;
     padding : .3em; margin: 0;
 }
 
@@ -44,6 +44,10 @@
     border-bottom: 1px solid #EEE;
     background-color : #ffffff;
     border-radius: 6px;
+    filter:alpha(opacity=75);
+    -moz-opacity: 0.75;
+    opacity: .75;
+    font-weight: 600;
     }
 
 .newsfooter {

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
index 338b768..0835187 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -202,7 +202,7 @@ ol li {
         linear,
         left top,
         left bottom,
-        color-stop(0.1, rgb(212,214,255)),
+        color-stop(0.1, rgb(230, 240, 242)),
         color-stop(0.99, rgb(255,255,255))
     );
     display: inline-block;
@@ -426,7 +426,7 @@ div#header_search div.residentsearch {
 }
 
 div#reserves,div#checkouts {
-       border : 1px solid #E8E8E8;
+        border : 1px solid #B9D8D9;
        padding : 1em;
 }
 
@@ -462,8 +462,11 @@ dd {
 }
 
 div#toolbar {
-       background-color : #F3F3F3;
+       background-color : #EDF4F6;
        margin-bottom : .7em;
+     padding: 5px 5px 5px 5px;
+      border-radius: 5px 5px 0 0;
+    border: 1px solid #E6F0F2;
 }
 
 div#toolbar .yui-menu-button button,
@@ -540,7 +543,7 @@ div.patronviews {
 }
 
 fieldset.brief {
-       border : 1px solid #E8E8E8;
+    border : 2px solid #B9D8D9;
 }
 
 fieldset.brief label,
@@ -720,11 +723,10 @@ fieldset.rows label.yesno {
 fieldset.action, div.action {
        clear : both;
        float : none;
-    background-color:#ffffff;
-       border : none;
-       margin : 0;
-       padding : 1em 0 .3em 0;
-       width : auto;
+    border : 0px;
+  margin: 0;
+     padding: .4em .4em .4em .1em;
+  width: auto;
 }
 
 div.rows {
@@ -855,22 +857,25 @@ fieldset.rows .inputnote {
 }
 
 .toptabs .ui-tabs-nav li a, .toptabs .ui-tabs-nav li span.a {
-       background-color : #F3F3F3;
-       border : 1px solid #E8E8E8;
+       background-color : #E6F0F2;
+    border : 1px solid #B9D8D9;
        text-align : center;
        text-decoration : none;
-    border-radius : 3px;
+    border-radius : 3px 3px 0 0;
 }
 
 .toptabs .ui-tabs-nav li.ui-tabs-selected a, .toptabs .ui-tabs-nav li.ui-tabs-selected span.a {
        background-color : #FFF;
+       border-top : 1px solid #85CA11;
+        border-right : 1px solid #85CA11;
+      border-left : 1px solid #85CA11;
        border-bottom : 1px solid #FFF;
        margin-top : 0;
     border-radius : 3px;
 }
 
 .toptabs .tabs-container {
-       border : 1px solid #E8E8E8;
+      border : 1px solid #B9D8D9;
        padding : 1em;
 }
 
@@ -1370,14 +1375,15 @@ div#menu {
 div#menu li a {
        text-decoration: none;
        display: block;
-       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 */
+
+              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 */
        -moz-border-top-left-radius: 5px;
        border-top-left-radius: 5px;
        -moz-border-bottom-left-radius: 5px;
@@ -1390,14 +1396,19 @@ div#menu li a {
 }
 
 div#menu li a:hover {
-       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 */
+
+
+     background: #fff; /* Old browsers */
+   background: -moz-linear-gradient(left, #FAFAFA 0%, #FAFAFA 96%, #e6e6e6 97%, #cccccc 99%, #c1c1c1 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#FAFAFA), color-stop(96%,#FAFAFA), color-stop(97%,#e6e6e6), color-stop(99%,#cccccc), color-stop(100%,#c1c1c1)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(left, #FAFAFA 0%,#FAFAFA 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* Chrome10+,Safari5.1+ */
+     background: -o-linear-gradient(left, #FAFAFA 0%,#FAFAFA 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* Opera11.10+ */
+   background: -ms-linear-gradient(left, #FAFAFA 0%,#FAFAFA 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, #FAFAFA 0%,#fff 96%,#e6e6e6 97%,#cccccc 99%,#c1c1c1 100%); /* W3C */
+    border-left: 1px solid #85CA11;
+    border-top: 1px solid #85CA11;
+    border-bottom: 1px solid #85CA11;
 }
 
 div#menu li.active a:hover {
@@ -1412,9 +1423,12 @@ div#menu li.active a:hover {
 #menu ul li.active a {
        background-color: #FFF;
        background-image : none;
-       border-right: 0;
        font-weight: bold;
     color:#000000;
+    border-left: 1px solid #85CA11;
+    border-top: 1px solid #85CA11;
+    border-bottom: 1px solid #85CA11;
+    border-right: 0;
 }
 
 ul.error {
@@ -1551,10 +1565,12 @@ li.email {
 }
 
 #searchheader {
-       background-color : #f3f3f3;
+     background-color : #E6F0F2;
        font-size : 80%;
        margin : 0 0 .5em -1px;
-       padding : .1em 0 .1em 1em;
+ padding : .1em 0 .4em 1em;
+     border-radius : 5px 5px 0 0;
+   border : 1px solid #B9D8D9;
 }
 
 /* Hack just for Firefox */
@@ -1564,6 +1580,7 @@ html>/**/body #searchheader button, x:-moz-any-link, x:default {
 
 #searchheader form {
        float : right;
+  padding : 5px 5px 3px 0;
 }
 
 #searchheader form.fz3950 {
@@ -1589,12 +1606,14 @@ html>/**/body #searchheader button, x:-moz-any-link, x:default {
 }
 
 #search-facets {
-       border : 1px solid #e8e8e8;
+    border : 1px solid #B9D8D9;
+    border-radius: 5px 5px 0 0;
 }
 
 #search-facets h4 {
-       background-color : #F3F3F3;
-       border-bottom : 1px solid #e8e8e8;
+     background-color : #E6F0F2;
+    border-bottom : 1px solid #B9D8D9;
+     border-radius: 5px 5px 0 0;
        font-size : 90%;
        margin : 0;
        padding : .4em .2em;
@@ -1731,6 +1750,7 @@ a.yuimenuitemlabel:hover {
 #toplevelnav {
        float : left;
        margin-left : .5em;
+     width: 40%;
 }
 
 ul#toplevelmenu {

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
index 09432a3..6f79e71 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
@@ -1,4 +1,4 @@
-
+<div id="header" class="gradient">
 <h1 id="logo"><a href="/cgi-bin/koha/mainpage.pl">[% LibraryName %]</a></h1><!-- Begin Fund Admin Resident Search Box -->
 [% IF ( CAN_user_circulate ) %][% IF ( CircAutocompl ) %]<script type="text/javascript">
 //<![CDATA[
@@ -104,4 +104,5 @@ YAHOO.util.Event.onContentReady("header_search", function() {
             [% IF ( CAN_user_catalogue ) %]<li><a href="/cgi-bin/koha/catalogue/search.pl#catalog_search">Search the catalog</a></li>[% END %]
                        </ul>   
 </div>
+</div>
 <!-- End Suggestions Resident Search Box -->

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/cities-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/cities-admin-search.inc
index 54e2802..81a0fbd 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/cities-admin-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/cities-admin-search.inc
@@ -1,4 +1,4 @@
-
+<div id="header" class="gradient">
 <h1 id="logo"><a href="/cgi-bin/koha/mainpage.pl">[% LibraryName %]</a></h1><!-- Begin Cities Resident Search Box -->
 [% IF ( CAN_user_circulate ) %][% IF ( CircAutocompl ) %]<script type="text/javascript">
 //<![CDATA[
@@ -88,4 +88,5 @@ YAHOO.util.Event.onContentReady("header_search", function() {
             [% IF ( CAN_user_catalogue ) %]<li><a href="/cgi-bin/koha/catalogue/search.pl#catalog_search">Search the catalog</a></li>[% END %]
                        </ul>   
 </div>
+</div>
 <!-- End Cities Resident Search Box -->

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/patrons-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/patrons-admin-search.inc
index b27464c..ca22d07 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/patrons-admin-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/patrons-admin-search.inc
@@ -1,4 +1,4 @@
-
+<div id="header" class="gradient">
 <h1 id="logo"><a href="/cgi-bin/koha/mainpage.pl">[% LibraryName %]</a></h1><!-- Begin Patrons Admin Resident Search Box -->
 <div id="header_search">
        <div id="patron_category_search" class="residentsearch">
@@ -23,4 +23,5 @@
             [% IF ( CAN_user_catalogue ) %]<li><a href="/cgi-bin/koha/catalogue/search.pl#catalog_search">Search the catalog</a></li>[% END %]
                        </ul>   
 </div>
+</div>
 <!-- End Patrons Admin Resident Search Box -->

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-admin-search.inc
index 841ffe5..7950abf 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-admin-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-admin-search.inc
@@ -1,3 +1,4 @@
+<div class="gradient">
 <h1 id="logo"><a href="/cgi-bin/koha/mainpage.pl">[% LibraryName %]</a></h1><!-- Begin Stopwords Resident Search Box -->
 <div id="header_search">
        <div id="syspref_search" class="residentsearch">
@@ -25,4 +26,5 @@
             [% IF ( CAN_user_catalogue ) %]<li><a href="/cgi-bin/koha/catalogue/search.pl#catalog_search">Search the catalog</a></li>[% END %]
                        </ul>
 </div>
+</div>
 <!-- End Stopwords Resident Search Box -->

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/roadtype-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/roadtype-admin-search.inc
index f6776e8..00169dc 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/roadtype-admin-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/roadtype-admin-search.inc
@@ -1,4 +1,5 @@
 
+<div id="header" class="gradient">
 <h1 id="logo"><a href="/cgi-bin/koha/mainpage.pl">[% LibraryName %]</a></h1><!-- Begin Roads Resident Search Box -->
 [% IF ( CAN_user_circulate ) %][% IF ( CircAutocompl ) %]<script type="text/javascript">
 //<![CDATA[
@@ -45,8 +46,8 @@ YAHOO.util.Event.onContentReady("header_search", function() {
 //]]>
 </script>[% END %][% END %]
 <div id="header_search">
-       <div id="roadtype_search" class="residentsearch">
-    <p class="tip">Road type search:</p>
+     <div id="roadtype_search" class="residentsearch ui-tabs-panel">
+        <p class="tip">Road type search:</p>
                <form action="[% script_name %]" method="post">
                <input type="text" name="road_type" value="[% searchfield %]" size="40" />
                <input type="submit" name="submit" value="OK" class="submit" />
@@ -83,6 +84,7 @@ YAHOO.util.Event.onContentReady("header_search", function() {
                                <input type="submit" value="Submit"  class="submit" />
                </form>
        </div>
+
        [% END %]
                        <ul>
             <li><a href="/cgi-bin/koha/admin/roadtype.pl#roadtype_search">Search road types</a></li>
@@ -90,4 +92,5 @@ YAHOO.util.Event.onContentReady("header_search", function() {
             [% IF ( CAN_user_catalogue ) %]<li><a href="/cgi-bin/koha/catalogue/search.pl#catalog_search">Search the catalog</a></li>[% END %]
                        </ul>   
 </div>
+</div>
 <!-- End Roads Resident Search Box -->

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/z3950-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/z3950-admin-search.inc
index 24a8e9f..18e1beb 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/z3950-admin-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/z3950-admin-search.inc
@@ -1,4 +1,4 @@
-
+<div id="header" class="gradient">
 <h1 id="logo"><a href="/cgi-bin/koha/mainpage.pl">[% LibraryName %]</a></h1><!-- Begin z3950 Admin Resident Search Box -->
 [% IF ( CAN_user_circulate ) %][% IF ( CircAutocompl ) %]<script type="text/javascript">
 //<![CDATA[
@@ -90,4 +90,5 @@ YAHOO.util.Event.onContentReady("header_search", function() {
             [% IF ( CAN_user_catalogue ) %]<li><a href="/cgi-bin/koha/catalogue/search.pl#catalog_search">Search the catalog</a></li>[% END %]
                        </ul>   
 </div>
+</div>
 <!-- End Members Resident Search Box -->

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
index cebcb09..d5e1b98 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
@@ -43,8 +43,10 @@ function Dopop(link) {
 </script>
 </head>
 <body id="circ_returns" class="circ">
+<div id="header" class="gradient">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'checkin-search.inc' %]
+</div>
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a> &rsaquo; Check in</div>
 
@@ -379,27 +381,24 @@ function Dopop(link) {
             <div class="yui-u">
             <fieldset id="checkin_options">
                 <legend>Options</legend>
-
-                <ul>
                     [% IF ( overduecharges ) %]
-                    <li>
+                    <p>
                         [% IF ( exemptfine ) %]
                         <input type="checkbox" id="exemptcheck" name="exemptfine" value="exemptfine" checked="checked" />
                         [% ELSE %]
                         <input type="checkbox" id="exemptcheck" name="exemptfine" value="exemptfine" />
                         [% END %]
                         <label for="exemptcheck">Forgive overdue charges</label>
-                    </li>
+                    </p>
                     [% END %] <!-- overduecharges -->
-                    <li>
+                    <p>
                         [% IF ( dropboxmode ) %]
                         <input type="checkbox" id="dropboxcheck" name="dropboxmode" value="dropboxmode" checked="checked" />
                         [% ELSE %]
                         <input type="checkbox" id="dropboxcheck" name="dropboxmode" value="dropboxmode" />
                         [% END %]
                         <label for="dropboxcheck">Dropbox mode</label>
-                    </li>
-                </ul>
+                    </p>
             </fieldset>
         </div>
     </form>