Bug 22274: (follow-up) Use one CSS file for SCO and SCI
authorOwen Leonard <oleonard@myacpl.org>
Thu, 11 Apr 2019 15:12:30 +0000 (15:12 +0000)
committerNick Clemens <nick@bywatersolutions.com>
Wed, 17 Apr 2019 10:24:26 +0000 (10:24 +0000)
This patch makes the self-checkin CSS created in Bug 22638 the CSS for
self-checkout as well. The interfaces have the same requirements.

This patch also replaces some old image-based icons with Font Awesome
icons.

To test, apply the patch and rebuild the OPAC CSS. Clear your browser
cache if necessary.

 - Enable both self checkout (WebBasedSelfCheck) and self checkin
   (SelfCheckInModule).
 - Test both interfaces, confirming that the style is consistent for
   each and looks correct.

Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
koha-tmpl/opac-tmpl/bootstrap/css/sci.css [deleted file]
koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss [deleted file]
koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss [new file with mode: 0644]
koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc
koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/sci.css b/koha-tmpl/opac-tmpl/bootstrap/css/sci.css
deleted file mode 100644 (file)
index a905533..0000000
+++ /dev/null
@@ -1,308 +0,0 @@
-body {
-    background-color: #fcf9fc;
-}
-
-#wrap {
-    padding-right: 40px;
-    padding-left: 40px;
-}
-
-a, a:visited,
-.ui-widget-content a,
-.ui-widget-content a:visited {
-    color: #0076B2;
-}
-
-a.title {
-    font-weight: bold;
-}
-
-h1 {
-    color: #727272;
-    font-size : 140%;
-    line-height: 150%;
-}
-h2 {
-    color: #727272;
-    font-size : 130%;
-    line-height: 150%;
-}
-h3 {
-    color: #727272;
-    font-size : 120%;
-    line-height: 150%;
-}
-h4 {
-    color: #727272;
-    font-size : 110%;
-}
-h5 {
-    color: #727272;
-    font-size : 100%;
-}
-caption {
-    color: #727272;
-    font-size: 120%;
-    font-weight: bold;
-    margin : .5em 0;
-    text-align: left;
-}
-
-input,
-textarea {
-    width: auto;
-}
-
-/*Search bar border glow*/
-input[type="text"]:focus {
-   border-color: #85ca11;
-   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6)
-}
-
-input[type="password"]:focus {
-   border-color: #85ca11;
-   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6)
-}
-
-legend {
-    color: #727272;
-    font-size: 110%;
-    font-weight: bold;
-}
-
-th {
-    background-color: #e2e8e8;
-}
-
-.main {
-    background-color: #FFF;
-    border-color: #f0f3f3;
-    margin: 0.5em 20px;
-    padding: 0.8em 0;
-}
-
-.navbar-inverse .navbar-inner {
-    background: #fcf9fc none;
-    border-color: #fcf9fc;
-    box-shadow: none;
-}
-
-.navbar-inverse .brand, .navbar-inverse .nav > li > a {
-    color: #727272;
-    font-weight: bold;
-}
-
-/*Dropdown menus in Header*/
-.dropdown-menu {
-   border-radius: 0px;
-}
-
-.dropdown-menu > li > a:hover {
-   background: #85ca11 none;
-   color: #FFFFFF;
-}
-
-.dropdown-menu > li > a:focus {
-   background: #85ca11 none;
-   color: #FFFFFF;
-}
-
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret {
-   border-top-color: #85ca11;
-   border-bottom-color: #85ca11;
-}
-
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret:hover {
-   border-top-color: #85ca11;
-   border-bottom-color: #85ca11;
-}
-
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle {
-   background-color: transparent;
-   color: #85ca11;
-}
-
-.navbar-inverse .nav li.dropdown > a:hover .caret {
-   border-top-color: #85ca11;
-   border-bottom-color: #85ca11;
-}
-
-.navbar .nav li.dropdown > a:focus .caret {
-   border-top-color: #85ca11;
-   border-bottom-color: #85ca11;
-}
-
-.navbar-inverse .nav li.dropdown > a:focus .caret {
-   border-top-color: #85ca11;
-   border-bottom-color: #85ca11;
-}
-
-.navbar .nav li.dropdown > a:hover .caret {
-   border-top-color: #85ca11;
-   border-bottom-color: #85ca11;
-}
-
-.navbar-inverse .nav > li > a {
-   color: #727272;
-}
-
-.navbar-inverse .nav > li > a:hover {
-   color: #85ca11;
-}
-
-.navbar-inverse .nav > li > a:focus {
-   color: #85ca11;
-}
-
-.table-striped tbody > tr:nth-child(odd) > td,
-.table-striped tbody > tr:nth-child(odd) > th {
-  background-color: #f0f3f3;
-}
-/* Redefine a new style for Bootstrap's class "close" since we use that already */
-/* Use <a class="closebtn" href="#">&times;</a> */
-.alert .closebtn{position:relative;top:-2px;right:-21px;line-height:20px;}
-.modal-header .closebtn{margin-top:2px;}
-.closebtn{float:right;font-size:20px;font-weight:bold;line-height:20px;color:#000000;text-shadow:0 1px 0 #ffffff;opacity:0.2;filter:alpha(opacity=20);}.closebtn:hover{color:#000000;text-decoration:none;cursor:pointer;opacity:0.4;filter:alpha(opacity=40);}
-button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;}
-.btn-group label,
-.btn-group select {
-    font-size: 13px;
-}
-
-/* Override Bootstrap alert */
-.alert {
-    background: #fffbe5; /* Old browsers */
-    background: -moz-linear-gradient(top,  #fffbe5 0%, #fff0b2 9%, #fff1a8 89%, #f7e665 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffbe5), color-stop(9%,#fff0b2), color-stop(89%,#fff1a8), color-stop(100%,#f7e665)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffbe5', endColorstr='#f7e665',GradientType=0 ); /* IE6-9 */
-    border-color : #D6C43B;
-    color: #333;
-}
-
-/* Override Bootstrap alert.alert-info */
-.alert-info {
-    background: #f4f6fa; /* Old browsers */
-    background: -moz-linear-gradient(top,  #f4f6fa 0%, #eaeef5 4%, #e8edf6 96%, #cddbf2 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f6fa), color-stop(4%,#eaeef5), color-stop(96%,#e8edf6), color-stop(100%,#cddbf2)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f6fa', endColorstr='#cddbf2',GradientType=0 ); /* IE6-9 */
-    border-color : #C5D1E5;
-    color: #333;
-}
-
-/* Override Bootstrap alert.alert-success */
-.alert-success {
-    background: #f8ffe8; /* Old browsers */
-    background: -moz-linear-gradient(top,  #f8ffe8 0%, #e3f5ab 4%, #dcf48d 98%, #9ebf28 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(4%,#e3f5ab), color-stop(98%,#dcf48d), color-stop(100%,#9ebf28)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#9ebf28',GradientType=0 ); /* IE6-9 */
-    border-color : #9FBA35;
-    color: #333;
-}
-
-
-#members a.logout {
-    color : #E8583C;
-    padding : 0 .3em 0 .3em;
-}
-
-.inline {
-    display: inline;
-}
-
-i.icon {
-    background-repeat: no-repeat;
-    display: inline-block;
-    height: 16px;
-    line-height: 16px;
-    margin-right: 3px;
-    vertical-align: text-top;
-    width: 16px;
-}
-
-i.back {
-    background : transparent url("../lib/famfamfam/arrow_left.png") no-repeat 0 0;
-}
-
-i.return {
-    background : transparent url("../lib/famfamfam/book_previous.png") no-repeat 0 0;
-}
-
-i.renew {
-    background : transparent url("../lib/famfamfam/arrow_refresh.png") no-repeat 0 0;
-}
-
-i.cancel {
-    background : transparent url("../lib/famfamfam/cancel.png") no-repeat 0 0;
-}
-
-i.finish {
-    background : transparent url("../lib/famfamfam/stop.png") no-repeat 0 0;
-}
-
-i.help {
-    background : transparent url("../lib/famfamfam/help.png") no-repeat 0 0;
-}
-
-.table .sorting_asc {
-    padding-right: 19px;
-    background: url("../images/asc.gif") no-repeat scroll right center #EEEEEE;
-}
-.table .sorting_desc {
-    padding-right: 19px;
-    background: url("../images/desc.gif") no-repeat scroll right center #EEEEEE;
-}
-.table .sorting {
-    padding-right: 19px;
-    background: url("../images/ascdesc.gif") no-repeat scroll right center #EEEEEE;
-}
-.table .nosort,
-.table .nosort.sorting_asc,
-.table .nosort.sorting_desc,
-.table .nosort.sorting {
-    padding-right: 19px;
-    background: #e2e8e8 none;
-}
-
-.table-bordered {
-    border-radius: 0px;
-}
-
-.table-bordered thead:first-child tr:first-child > th:last-child {
-   border-radius: 0px;
-}
-
-.table-bordered tbody:last-child tr:last-child > td:last-child {
-   border-radius: 0px;
-}
-
-.table-bordered tbody:last-child tr:last-child > td:first-child {
-   border-radius: 0px;
-}
-
-.table-bordered thead:first-child tr:first-child > th:first-child {
-   border-radius: 0px;
-}
-
-#sci_logout {
-    color: #E8583C;
-}
-
-#sci_checkin_button, #sci_refresh_button, #sci_append_button {
-    margin-bottom: 10px;
-}
-
-#sci_refresh_button {
-    color: rgb(51, 51, 51);
-}
diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss
deleted file mode 100644 (file)
index 0454175..0000000
+++ /dev/null
@@ -1,340 +0,0 @@
-@import "mixins";
-@import "fonts";
-@import "common";
-
-body {
-    background-color: #FCF9FC;
-}
-
-a {
-    color: $sci-link-color;
-
-    &:visited {
-        color: $sci-link-color;
-    }
-
-    &.title {
-        font-weight: bold;
-    }
-}
-
-.ui-widget-content {
-    a,
-    a:visited {
-        color: $sci-link-color;
-    }
-}
-
-h1 {
-    color: $sci-heading-color;
-    font-size: 140%;
-    line-height: 150%;
-}
-
-h2 {
-    color: $sci-heading-color;
-    font-size: 130%;
-    line-height: 150%;
-}
-
-h3 {
-    color: $sci-heading-color;
-    font-size: 120%;
-    line-height: 150%;
-}
-
-h4 {
-    color: $sci-heading-color;
-    font-size: 110%;
-}
-
-h5 {
-    color: $sci-heading-color;
-    font-size: 100%;
-}
-
-caption {
-    color: $sci-heading-color;
-    font-size: 120%;
-    font-weight: bold;
-    margin: .5em 0;
-    text-align: left;
-}
-
-input,
-textarea {
-    width: auto;
-}
-
-// Search bar border glow
-input {
-    &[type="text"],
-    &[type="password"] {
-        &:focus {
-            border-color: #85CA11;
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(194, 228, 136, .6);
-        }
-    }
-}
-
-legend {
-    color: $sci-heading-color;
-    font-size: 110%;
-    font-weight: bold;
-}
-
-th {
-    background-color: #E2E8E8;
-}
-
-.main {
-    background-color: #FFF;
-    border-color: #F0F3F3;
-    margin: .5em 20px;
-    padding: .8em 0;
-}
-
-.navbar-inverse {
-    .navbar-inner {
-        background: #FCF9FC none;
-        border-color: #FCF9FC;
-        box-shadow: none;
-    }
-
-    .brand {
-        color: $sci-heading-color;
-        font-weight: bold;
-    }
-
-    .nav {
-        li {
-            a,
-            a:hover,
-            a:focus {
-                color: $sci-heading-color;
-                font-weight: bold;
-            }
-
-            &.dropdown {
-
-                a {
-                    &:hover,
-                    &:focus {
-                        .caret {
-                            border-bottom-color: #85CA11;
-                            border-top-color: #85CA11;
-                        }
-                    }
-                }
-
-                &.open {
-                    &> .dropdown-toggle {
-                        background-color: transparent;
-                        color: #85CA11;
-
-                        .caret {
-                            border-bottom-color: #85CA11;
-                            border-top-color: #85CA11;
-
-                            &:hover {
-                                border-bottom-color: #85CA11;
-                                border-top-color: #85CA11;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.navbar {
-    .nav {
-        li {
-            &.dropdown {
-                &> a {
-                    &:focus,
-                    &:hover {
-                        .caret {
-                            border-bottom-color: #85CA11;
-                            border-top-color: #85CA11;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-// Dropdown menus in Header
-.dropdown-menu {
-    border-radius: 0;
-
-    &> li {
-        &> a {
-            &:hover,
-            &:focus {
-                background: #85CA11 none;
-                color: #FFFFFF;
-            }
-        }
-    }
-}
-
-
-.table-striped tbody > tr:nth-child(odd) > td,
-.table-striped tbody > tr:nth-child(odd) > th {
-    background-color: #F0F3F3;
-}
-
-.modal-header {
-    .closebtn {
-        margin-top: 2px;
-    }
-}
-
-.closebtn {
-    color: #000000;
-    filter: alpha(opacity=20);
-    float: right;
-    font-size: 20px;
-    font-weight: bold;
-    line-height: 20px;
-    opacity: .2;
-    text-shadow: 0 1px 0 #FFFFFF;
-
-    &:hover {
-        color: #000000;
-        cursor: pointer;
-        filter: alpha(opacity=40);
-        opacity: .4;
-        text-decoration: none;
-    }
-}
-
-button {
-    &.closebtn {
-        background: transparent;
-        border: 0;
-        cursor: pointer;
-        padding: 0;
-    }
-}
-
-.btn-group {
-    label,
-    select {
-        font-size: 13px;
-    }
-}
-
-// Override Bootstrap alert
-.alert {
-    background: linear-gradient(to bottom,  #FFFBE5 0%, #FFF0B2 9%, #FFF1A8 89%, #F7E665 100%);
-    border-color: #D6C43B;
-    color: #333;
-
-    // Redefine a new style for Bootstrap's class "close" since we use that already
-    // Use <a class="closebtn" href="#">&times;</a>
-    .closebtn {
-        line-height: 20px;
-        position: relative;
-        right: -21px;
-        top: -2px;
-    }
-}
-
-// Override Bootstrap alert.alert-info
-.alert-info {
-    background: linear-gradient(to bottom,  #F4F6FA 0%, #EAEEF5 4%, #E8EDF6 96%, #CDDBF2 100%);
-    border-color: #C5D1E5;
-    color: #333;
-}
-
-// Override Bootstrap alert.alert-success
-.alert-success {
-    background: linear-gradient(to bottom,  #F8FFE8 0%, #E3F5AB 4%, #DCF48D 98%, #9EBF28 100%);
-    border-color: #9FBA35;
-    color: #333;
-}
-
-
-#members {
-    a {
-        &.logout {
-            color: #E8583C;
-            padding: 0 .3em 0 .3em;
-        }
-    }
-}
-
-.inline {
-    display: inline;
-}
-
-.table {
-    .sorting_asc {
-        background: url("../images/asc.gif") no-repeat scroll right center #EEEEEE;
-        padding-right: 19px;
-    }
-
-    .sorting_desc {
-        background: url("../images/desc.gif") no-repeat scroll right center #EEEEEE;
-        padding-right: 19px;
-    }
-
-    .sorting {
-        background: url("../images/ascdesc.gif") no-repeat scroll right center #EEEEEE;
-        padding-right: 19px;
-    }
-
-    .nosort,
-    .nosort.sorting_asc,
-    .nosort.sorting_desc,
-    .nosort.sorting {
-        background: #E2E8E8 none;
-        padding-right: 19px;
-    }
-}
-
-.table-bordered {
-    border-radius: 0;
-
-    thead {
-        &:first-child {
-            tr {
-                &:first-child {
-                    &> th {
-                        &:first-child,
-                        &:last-child {
-                            border-radius: 0;
-                        }
-                    }
-                }
-
-                &:last-child {
-                    &> th {
-                        &:first-child,
-                        &:last-child {
-                            border-radius: 0;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-#sci_logout {
-    color: #E8583C;
-}
-
-#sci_checkin_button,
-#sci_refresh_button,
-#sci_append_button {
-    margin-bottom: 10px;
-}
-
-#sci_refresh_button {
-    color: rgb(51, 51, 51);
-}
diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss
new file mode 100644 (file)
index 0000000..0454175
--- /dev/null
@@ -0,0 +1,340 @@
+@import "mixins";
+@import "fonts";
+@import "common";
+
+body {
+    background-color: #FCF9FC;
+}
+
+a {
+    color: $sci-link-color;
+
+    &:visited {
+        color: $sci-link-color;
+    }
+
+    &.title {
+        font-weight: bold;
+    }
+}
+
+.ui-widget-content {
+    a,
+    a:visited {
+        color: $sci-link-color;
+    }
+}
+
+h1 {
+    color: $sci-heading-color;
+    font-size: 140%;
+    line-height: 150%;
+}
+
+h2 {
+    color: $sci-heading-color;
+    font-size: 130%;
+    line-height: 150%;
+}
+
+h3 {
+    color: $sci-heading-color;
+    font-size: 120%;
+    line-height: 150%;
+}
+
+h4 {
+    color: $sci-heading-color;
+    font-size: 110%;
+}
+
+h5 {
+    color: $sci-heading-color;
+    font-size: 100%;
+}
+
+caption {
+    color: $sci-heading-color;
+    font-size: 120%;
+    font-weight: bold;
+    margin: .5em 0;
+    text-align: left;
+}
+
+input,
+textarea {
+    width: auto;
+}
+
+// Search bar border glow
+input {
+    &[type="text"],
+    &[type="password"] {
+        &:focus {
+            border-color: #85CA11;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(194, 228, 136, .6);
+        }
+    }
+}
+
+legend {
+    color: $sci-heading-color;
+    font-size: 110%;
+    font-weight: bold;
+}
+
+th {
+    background-color: #E2E8E8;
+}
+
+.main {
+    background-color: #FFF;
+    border-color: #F0F3F3;
+    margin: .5em 20px;
+    padding: .8em 0;
+}
+
+.navbar-inverse {
+    .navbar-inner {
+        background: #FCF9FC none;
+        border-color: #FCF9FC;
+        box-shadow: none;
+    }
+
+    .brand {
+        color: $sci-heading-color;
+        font-weight: bold;
+    }
+
+    .nav {
+        li {
+            a,
+            a:hover,
+            a:focus {
+                color: $sci-heading-color;
+                font-weight: bold;
+            }
+
+            &.dropdown {
+
+                a {
+                    &:hover,
+                    &:focus {
+                        .caret {
+                            border-bottom-color: #85CA11;
+                            border-top-color: #85CA11;
+                        }
+                    }
+                }
+
+                &.open {
+                    &> .dropdown-toggle {
+                        background-color: transparent;
+                        color: #85CA11;
+
+                        .caret {
+                            border-bottom-color: #85CA11;
+                            border-top-color: #85CA11;
+
+                            &:hover {
+                                border-bottom-color: #85CA11;
+                                border-top-color: #85CA11;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.navbar {
+    .nav {
+        li {
+            &.dropdown {
+                &> a {
+                    &:focus,
+                    &:hover {
+                        .caret {
+                            border-bottom-color: #85CA11;
+                            border-top-color: #85CA11;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Dropdown menus in Header
+.dropdown-menu {
+    border-radius: 0;
+
+    &> li {
+        &> a {
+            &:hover,
+            &:focus {
+                background: #85CA11 none;
+                color: #FFFFFF;
+            }
+        }
+    }
+}
+
+
+.table-striped tbody > tr:nth-child(odd) > td,
+.table-striped tbody > tr:nth-child(odd) > th {
+    background-color: #F0F3F3;
+}
+
+.modal-header {
+    .closebtn {
+        margin-top: 2px;
+    }
+}
+
+.closebtn {
+    color: #000000;
+    filter: alpha(opacity=20);
+    float: right;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 20px;
+    opacity: .2;
+    text-shadow: 0 1px 0 #FFFFFF;
+
+    &:hover {
+        color: #000000;
+        cursor: pointer;
+        filter: alpha(opacity=40);
+        opacity: .4;
+        text-decoration: none;
+    }
+}
+
+button {
+    &.closebtn {
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+        padding: 0;
+    }
+}
+
+.btn-group {
+    label,
+    select {
+        font-size: 13px;
+    }
+}
+
+// Override Bootstrap alert
+.alert {
+    background: linear-gradient(to bottom,  #FFFBE5 0%, #FFF0B2 9%, #FFF1A8 89%, #F7E665 100%);
+    border-color: #D6C43B;
+    color: #333;
+
+    // Redefine a new style for Bootstrap's class "close" since we use that already
+    // Use <a class="closebtn" href="#">&times;</a>
+    .closebtn {
+        line-height: 20px;
+        position: relative;
+        right: -21px;
+        top: -2px;
+    }
+}
+
+// Override Bootstrap alert.alert-info
+.alert-info {
+    background: linear-gradient(to bottom,  #F4F6FA 0%, #EAEEF5 4%, #E8EDF6 96%, #CDDBF2 100%);
+    border-color: #C5D1E5;
+    color: #333;
+}
+
+// Override Bootstrap alert.alert-success
+.alert-success {
+    background: linear-gradient(to bottom,  #F8FFE8 0%, #E3F5AB 4%, #DCF48D 98%, #9EBF28 100%);
+    border-color: #9FBA35;
+    color: #333;
+}
+
+
+#members {
+    a {
+        &.logout {
+            color: #E8583C;
+            padding: 0 .3em 0 .3em;
+        }
+    }
+}
+
+.inline {
+    display: inline;
+}
+
+.table {
+    .sorting_asc {
+        background: url("../images/asc.gif") no-repeat scroll right center #EEEEEE;
+        padding-right: 19px;
+    }
+
+    .sorting_desc {
+        background: url("../images/desc.gif") no-repeat scroll right center #EEEEEE;
+        padding-right: 19px;
+    }
+
+    .sorting {
+        background: url("../images/ascdesc.gif") no-repeat scroll right center #EEEEEE;
+        padding-right: 19px;
+    }
+
+    .nosort,
+    .nosort.sorting_asc,
+    .nosort.sorting_desc,
+    .nosort.sorting {
+        background: #E2E8E8 none;
+        padding-right: 19px;
+    }
+}
+
+.table-bordered {
+    border-radius: 0;
+
+    thead {
+        &:first-child {
+            tr {
+                &:first-child {
+                    &> th {
+                        &:first-child,
+                        &:last-child {
+                            border-radius: 0;
+                        }
+                    }
+                }
+
+                &:last-child {
+                    &> th {
+                        &:first-child,
+                        &:last-child {
+                            border-radius: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#sci_logout {
+    color: #E8583C;
+}
+
+#sci_checkin_button,
+#sci_refresh_button,
+#sci_append_button {
+    margin-bottom: 10px;
+}
+
+#sci_refresh_button {
+    color: rgb(51, 51, 51);
+}
index 73d64b7..bc65bdb 100644 (file)
@@ -8,7 +8,7 @@
                 <a class="brand" href="/cgi-bin/koha/sco/sco-main.pl"><img src="[% interface | html %]/[% theme | html %]/images/koha-green-logo.png" alt=""></a>
                 <div id="checkouthelp">
                     <ul class="nav pull-right">
-                        <li><a href="/cgi-bin/koha/sco/help.pl"><i class="icon help"></i> Help</a></li>
+                        <li><a href="/cgi-bin/koha/sco/help.pl"><i class="fa fa-info-circle"></i> Help</a></li>
                     </ul>
                 </div>
 
index 3a4adf0..8d794a5 100644 (file)
@@ -33,7 +33,7 @@
 [% Asset.css("lib/bootstrap/css/bootstrap.min.css") | $raw %]
 [% Asset.css("lib/jquery/jquery-ui.css") | $raw %]
 [% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
-[% Asset.css("css/sci.css") | $raw %]
+[% Asset.css("css/sco.css") | $raw %]
 [% IF ( Koha.Preference('OPACUserCSS') ) %]<style>[% Koha.Preference('OPACUserCSS') | $raw %]</style>[% END %]
 [% IF ( Koha.Preference('SelfCheckInUserCSS') ) %]<style>[% Koha.Preference('SelfCheckInUserCSS') | $raw %]</style>[% END %]
 <!--[if lt IE 9]>
index 4408459..8f9e38d 100644 (file)
@@ -12,6 +12,7 @@
 <link rel="shortcut icon" href="[% IF ( Koha.Preference('OpacFavicon') ) %][% Koha.Preference('OpacFavicon') | url %][% ELSE %][% interface | html %]/[% theme | html %]/images/favicon.ico[% END %]" type="image/x-icon" />
 [% Asset.css("lib/bootstrap/css/bootstrap.min.css") | $raw %]
 [% Asset.css("lib/jquery/jquery-ui.css") | $raw %]
+[% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
 [% Asset.css("css/sco.css") | $raw %]
 [% IF ( Koha.Preference('OPACUserCSS') ) %]<style>[% Koha.Preference('OPACUserCSS') | $raw %]</style>[% END %]
 [% IF ( Koha.Preference('SCOUserCSS') ) %]<style>[% Koha.Preference('SCOUserCSS') | $raw %]</style>[% END %]
@@ -87,7 +88,7 @@
                                     <input type="hidden" name="patronid" value="[% patronid | html %]" />
                                     <input type="hidden" name="barcode" value="[% barcode | html %]" />
                                     <input type="hidden" name="newissues" value="[% newissues | html %]" />
-                                    <button type="submit" name="returnbook" class="btn"><i class="return"></i> Return this item</button>
+                                    <button type="submit" name="returnbook" class="btn"><i class="fa fa-undo"></i> Return this item</button>
                                 </form>
                             [% END %]
 
                                     <input type="hidden" name="barcode" value="[% barcode | html %]" />
                                     <input type="hidden" name="confirmed" value="" />
                                     <input type="hidden" name="newissues" value="[% newissues | html %]" />
-                                    <button type="submit" name="returnbook" class="btn"><i class="icon return"></i> Return this item</button>
+                                    <button type="submit" name="returnbook" class="btn"><i class="fa fa-undo"></i> Return this item</button>
                                 </form>
                             [% END %]
 
                                     <input type="hidden" name="barcode" value="[% barcode | html %]" />
                                     <input type="hidden" name="confirmed" value="1" />
                                     <input type="hidden" name="newissues" value="[% newissues | html %]" />
-                                    <button type="submit" name="confirm" class="btn"><i class="icon renew"></i> Renew item</button>
+                                    <button type="submit" name="confirm" class="btn"><i class="fa fa-refresh"></i> Renew item</button>
                                   </form>
                             [% ELSE %]
                                 <form action="/cgi-bin/koha/sco/sco-main.pl" name="confirmForm" class="inline" method="post">
                                     <input type="hidden" name="barcode" value="[% barcode | html %]" />
                                     <input type="hidden" name="confirmed" value="1" />
                                     <input type="hidden" name="newissues" value="[% newissues | html %]" />
-                                    <button type="submit" class="btn"><i class="icon renew"></i> Renew item</button>
+                                    <button type="submit" class="btn"><i class="fa fa-refresh"></i> Renew item</button>
                                 </form>
                             [% END %]
 
                                 <input type="hidden" name="op" value="" />
                                 <input type="hidden" name="patronid" value="[% patronid | html %]" />
                                 <input type="hidden" name="newissues" value="[% newissues | html %]" />
-                                <button type="submit" class="btn"><i class="icon cancel"></i> Cancel</button>
+                                <button type="submit" class="btn"><i class="fa fa-cancel"></i> Cancel</button>
                             </form>
                         </div>
                     [% END # / IF confirm %]
 
                                 <div>
                                     <form method="post" action="#" id="logout_form">
-                                        <button type="submit" class="btn"><i class="icon finish"></i> Finish</button>
+                                        <button type="submit" class="btn"><i class="fa fa-check"></i> Finish</button>
                                     </form>
                                 </div>
                             </div> <!-- / #newcheckout -->
                 </div> <!-- / .span12/12 -->
                 [% IF ( display_patron_image ) %]
                     <div class="span2">
-                        <img src="/cgi-bin/koha/sco/sco-patron-image.pl?borrowernumber=[% borrowernumber | html %]&csrf_token=[% csrf_token | html %]" alt="" />
+                        <img src="/cgi-bin/koha/sco/sco-patron-image.pl?borrowernumber=[% borrowernumber | uri %]&csrf_token=[% csrf_token | uri %]" alt="" />
                     </div>
                 [% END %]
             </div> <!-- / .row-fluid -->