Attachment 9458 Details for Bug 7998 – Bug 7998 - CSS fixes for new interface

[patch] Bug 7998 - CSS fixes for new interface

Bug-7998---CSS-fixes-for-new-interface.patch (text/plain), 12.89 KB, created by Liz Rea on 2012-05-08 15:00:45 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Liz Rea

Created: 2012-05-08 15:00:45 UTC

Size: 12.89 KB

patch

obsolete

>From 1e0d823fb77886253df9716401c8bd6ce88d24dc Mon Sep 17 00:00:00 2001
>From: Liz Rea <wizzyrea@gmail.com>
>Date: Mon, 23 Apr 2012 11:07:51 -0500
>Subject: [PATCH] Bug 7998 - CSS fixes for new interface
>Content-Type: text/plain; charset="utf-8"
>
>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 - round corners of search input box
>
>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
>---
> koha-tmpl/intranet-tmpl/prog/en/css/mainpage.css   |   10 ++-
> .../intranet-tmpl/prog/en/css/staff-global.css     |   89 ++++++++++++--------
> .../prog/en/includes/prefs-admin-search.inc        |    2 +
> .../intranet-tmpl/prog/en/modules/circ/returns.tt  |   13 ++--
> 4 files changed, 70 insertions(+), 44 deletions(-)
>
>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
>--- 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 68523d7..d1ad30c 100644
>--- 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;
>@@ -406,6 +406,7 @@ div#header_search {
> 
> div#header_search input {
> 	font-size : 1.3em;
>+	border-radius : 5px;
> }
> 
> div#header_search ul.link-tabs {
>@@ -462,8 +463,11 @@ dd {
> }
> 
> div#toolbar {
>-	background-color : #F3F3F3;
>+	background-color : #E6F0F2;
> 	margin-bottom : .7em;
>+	padding: 5px 5px 5px 5px;
>+	border-radius: 5px 5px 0 0;
>+	border: 1px solid #B9D8D9
> }
> 
> div#toolbar .yui-menu-button button,
>@@ -540,7 +544,7 @@ div.patronviews {
> }
> 
> fieldset.brief {
>-	border : 1px solid #E8E8E8;
>+	border : 2px solid #B9D8D9;
> }
> 
> fieldset.brief label,
>@@ -712,11 +716,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 {
>@@ -847,22 +850,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 #B9D8D9;
>+	border-right : 1px solid #B9D8D9;
>+	border-left : 1px solid #B9D8D9;
> 	border-bottom : 1px solid #FFF;
> 	margin-top : 0;
>     border-radius : 3px;
> }
> 
> .toptabs .tabs-container {
>-	border : 1px solid #E8E8E8;
>+	border : 1px solid #B9D8D9;
> 	padding : 1em;
> }
> 
>@@ -1362,14 +1368,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;
>@@ -1382,14 +1389,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 {
>@@ -1404,9 +1416,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 {
>@@ -1543,10 +1558,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 */
>@@ -1556,6 +1573,7 @@ html>/**/body #searchheader button, x:-moz-any-link, x:default {
> 
> #searchheader form {
> 	float : right;
>+	padding : 5px 5px 3px 0;
> }
> 
> #searchheader form.fz3950 {
>@@ -1581,12 +1599,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;
>@@ -1723,6 +1743,7 @@ a.yuimenuitemlabel:hover {
> #toplevelnav {
> 	float : left;
> 	margin-left : .5em;
>+	width: 40%;
> }
> 
> ul#toplevelmenu {
>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
>--- 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>
> <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>
> 
>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
>--- 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 %] 
>-                    <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>
>-- 
>1.7.2.5

Actions: View | Diff | Splinter Review

Attachments on bug 7998: 9279 | 9291 | 9300 | 9301 | 9302 | 9303 | 9304 | 9305 | 9371 | 9458 | 9459 | 9460 | 9461 | 9462 | 9463 | 9464 | 9465 | 9532 | 9537