Bug 23115: Tweak display of totals on 'Fines and charges' page
[koha-equinox.git] / koha-tmpl / opac-tmpl / bootstrap / css / src / opac.scss
index 042406b..b020e9f 100644 (file)
@@ -1,15 +1,8 @@
 @import "mixins";
+@import "fonts";
+@import "common";
 
-body {
-    background-color: #EAEAE6;
-}
-
-/* Sticky footer styles */
-html,
-body {
-    height: 100%;
-    /* The html and body elements cannot have any padding or margin. */
-}
+$footer-height: 45px;
 
 .no-js {
     .dateformat {
@@ -32,30 +25,9 @@ body {
     }
 }
 
-/* Wrapper for page content to push down footer */
-#wrap {
-    height: auto !important;
-    height: 100%;
-    min-height: 100%;
-    /* Negative indent footer by it's height */
-    // margin: 0 auto -60px;
-}
-
 .fa.fa-icon-black,
 .fa.fa-icon-white {
-    color: #FFF;
-}
-
-#changelanguage {
-    /* Set the fixed height of the footer here */
-    // height: 60px;
-    .nav {
-        > .active {
-            > p {
-                padding: 0 15px;
-            }
-        }
-    }
+    color: #000;
 }
 
 .popup {
@@ -102,8 +74,11 @@ a {
     }
 
     &.login-link {
-        color: #A6D8ED;
+        color: #005580;
         font-weight: bold;
+        &.loginModal-trigger {
+            color: #85ca11;
+        }
     }
 
     &.listmenulink {
@@ -135,15 +110,19 @@ a {
         text-decoration: none;
     }
 
+    &.OpenURL img {
+        vertical-align: middle;
+    }
+
     &.addtocart {
         @extend %initial_icon;
-        background-position: -5px -265px; /* Cart */
+        background-position: -5px -262px; /* Cart */
         padding-left: 35px;
     }
 
     &.addtoshelf {
         @extend %initial_icon;
-        background-position: -5px -225px; /* Virtual shelf */
+        background-position: -5px -222px; /* Virtual shelf */
         padding-left: 35px;
     }
 
@@ -187,7 +166,7 @@ a {
 
     &.highlight_toggle {
         @extend %initial_icon;
-        background-position: -5px -841px; /* Highlight */
+        background-position: -5px -836px; /* Highlight */
         display: none;
         padding-left: 35px;
     }
@@ -241,7 +220,7 @@ a {
 
     &.reserve {
         @extend %initial_icon;
-        background-position: -6px -144px; /* Place hold */
+        background-position: -6px -141px; /* Place hold */
         padding-left: 35px;
     }
 
@@ -277,6 +256,7 @@ a {
 h1 {
     font-size: 140%;
     line-height: 150%;
+    color: #727272;
 
     &#libraryname {
         background: transparent url( "../images/logo-koha.png" ) no-repeat scroll 0%;
@@ -301,11 +281,13 @@ h1 {
 }
 
 h2 {
+    color: #727272;
     font-size: 130%;
     line-height: 150%;
 }
 
 h3 {
+    color: #727272;
     font-size: 120%;
     line-height: 150%;
 }
@@ -316,9 +298,11 @@ h4 {
 
 h5 {
     font-size: 100%;
+    color: #727272;
 }
 
 caption {
+    color: #727272;
     font-size: 120%;
     font-weight: bold;
     margin: 0;
@@ -337,6 +321,7 @@ textarea {
 legend {
     font-size: 110%;
     font-weight: bold;
+    color: #727272;
 }
 
 table {
@@ -348,6 +333,12 @@ td {
     background-color: #FFF;
 }
 
+tr {
+    &.outstanding {
+        font-style: italic;
+    }
+}
+
 td {
     img {
         max-width: none;
@@ -357,8 +348,8 @@ td {
         color: #CC3333;
     }
 
-    .sum {
-        background-color: #FFC;
+    &.sum {
+        background-color: #FFFFE5;
         font-weight: bold;
     }
 
@@ -372,7 +363,7 @@ td {
 }
 
 th {
-    background-color: #ECEDE6;
+    background-color: #E2E8E8;
 
     &.sum {
         text-align: right;
@@ -398,9 +389,10 @@ th {
 
     span {
         @include border-radius-all( 3px );
-        background-color: #FFC;
-        color: #000;
+        background-color: #85ca11;
+        color: #FFF;
         display: inline;
+        font-family: 'NotoSans';
         font-size: 80%;
         font-weight: normal;
         margin: 0 0 0 .9em;
@@ -413,7 +405,7 @@ th {
     display: block;
 
     p {
-        color: #EEE;
+        color: #727272;
     }
 
     a {
@@ -425,14 +417,6 @@ th {
     }
 }
 
-#koha_url {
-    p {
-        color: #666666;
-        float: right;
-        margin: 0;
-    }
-}
-
 #moresearches {
     margin: .5em 0;
     padding: 0 .8em;
@@ -460,41 +444,95 @@ th {
 
 #news {
     margin: .5em 0;
+    padding: 1em;
+
+    .newsitem {
+        &:last-child {
+            .newsfooter {
+                border-bottom: 0;
+            }
+        }
+    }
 }
 
 .newscontainer {
     border: 1px solid #DDD;
-    border-bottom-width: 0;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
 }
 
 .newsheader {
-    background-color: #ECEDE6;
-    border-bottom: 1px solid #DDD;
     margin: 0;
-    padding: 8px;
+    padding: 8px 0;
 }
 
 .newsbody {
-    padding: 8px;
+    padding: 8px 0;
 }
 
 .newsfooter {
-    border-bottom: 1px solid #DDD;
-    font-style: italic;
-    padding: 4px 8px;
+    border-bottom: 1px solid #EEE;
+    color: #727272;
+    font-size: 90%;
+    margin-bottom: .5em;
+    padding-bottom: .5em;
+}
+
+#rssnews-container {
+    color: #727272;
+    font-size: 90%;
+}
+
+#rssnews-container {
+    font-size: 90%;
+    padding: .5em 0;
+}
+
+.rsssearchlink {
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+.fa {
+    &.fa-rss {
+        background: linear-gradient(135deg, #DA5E2A 0%, #FA9C39 50%, #DA5E2A 100%);
+        border-radius: 3px;
+        color: #FFF;
+        padding: 2px 3px;
+        text-shadow: 1px 0 1px rgba(0, 0, 0, .25);
+
+        &.rsssearchicon {
+            font-size: 90%;
+        }
+    }
 }
 
 #opacheader {
-    background-color: #DDD;
+    background-color: #fcf9fc;
+}
+
+#numresults {
+    color: #727272;
+}
+
+#selections {
+    color: #727272;
+    font-weight: bold;
+}
+
+#selections-toolbar {
+    background: #e2e8e8 none;
+    border-bottom: none;
+    margin-top: 3px;
 }
 
-#selections,
 .selections {
     font-weight: bold;
 }
 
+.selections-toolbar.toolbar {
+    background: #e2e8e8 none;
+}
+
 .actions {
     a {
         background-repeat: no-repeat;
@@ -504,7 +542,7 @@ th {
 
         &.hold {
             background-image: url( "../images/sprite.png" ); /* Place hold small */
-            background-position: -5px -542px;
+            background-position: -5px -539px;
             padding-left: 21px;
         }
 
@@ -516,13 +554,13 @@ th {
 
         &.addtocart {
             background-image: url( "../images/sprite.png" ); /* Cart small */
-            background-position: -5px -572px;
+            background-position: -5px -570px;
             padding-left: 20px;
         }
 
         &.addtoshelf {
             background-image: url( "../images/sprite.png" ); /* MARC view */
-            background-position: -5px -27px;
+            background-position: -5px -24px;
             padding-left: 20px;
         }
 
@@ -576,12 +614,12 @@ th {
 }
 
 .breadcrumb {
-    @include border-radius-all( 7px );
-    background-color: #F2F2EF;
+    background-color: #F0F3F3;
     font-size: 85%;
     list-style: none outside none;
     margin: 10px 20px;
     padding: 5px 10px;
+    border-radius: 0px;
 }
 
 .buttons-print {
@@ -606,52 +644,87 @@ th {
 }
 
 .main {
-    @include border-radius-all( 7px );
-    @include shadowed;
     background-color: #FFF;
-    border: 1px solid #D2D2CF;
+    border: 1px solid #F0F3F3;
     margin-bottom: .5em;
     margin-top: .5em;
 }
 
 .mastheadsearch {
-    @include border-radius-all( 7px );
-    background: linear-gradient( to bottom, #C7C7C1 38%, #A7A7A2 100% );
+    background: #f0f3f3;
     margin: .5em 0;
     padding: .8em;
 
     label {
+        color: #727272;
         font-size: 115%;
         font-weight: bold;
     }
 }
 
-.navbar-inverse {
-    .brand {
-        color: #9FE1FF;
-        font-weight: bold;
+.btn-primary {
+    background-color: #85ca11;
+    background-image: linear-gradient(to bottom, #85ca11, #77b50f);
+    background-position: 0;
+    font-family: 'NotoSans';
+    &:hover {
+        background-color: #85ca11;
+        background-image: linear-gradient(to bottom, #85ca11, #77b50f);
+        background-position: 0;
     }
-
-    .nav {
-        > li {
-            > a {
-                color: #9FE1FF;
-                font-weight: bold;
-            }
-        }
+    &:active {
+        background-color: #85ca11;
+        background-image: linear-gradient(to bottom, #85ca11, #77b50f);
+        background-position: 0;
+    }
+    &:visited {
+        background-color: #85ca11;
+        background-image: linear-gradient(to bottom, #85ca11, #77b50f);
+        background-position: 0;
+    }
+    &:focus {
+        background-color: #85ca11;
+        background-image: linear-gradient(to bottom, #85ca11, #77b50f);
+        background-position: 0;
     }
 }
 
-.navbar-fixed-bottom {
-    &.navbar-static-bottom {
-        margin-top: .5em;
-        position: static;
-    }
+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)
+ }
+
+[class^="icon-"] {
+    vertical-align: 0;
+}
+[class*=" icon-"] {
+    vertical-align: 0;
 }
 
 .table-striped tbody > tr:nth-child(odd) > td,
 .table-striped tbody > tr:nth-child(odd) > th {
-    background-color: #F4F4F4;
+    background-color: #F0F3F3;
+}
+
+#availability_facet {
+    color: #727272;
+}
+
+#facet-holdings-library {
+    color: #727272;
+}
+
+#toolbar.toolbar {
+    background-color: #f0f3f3;
+    border: 1px solid #f0f3f3;
+    &.clearfix {
+        background-color: #f0f3f3;
+    }
 }
 
 
@@ -670,7 +743,7 @@ th {
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-    font-family: inherit;
+    font-family: 'NotoSans';
     font-size: inherit;
 }
 
@@ -685,7 +758,7 @@ ul {
 .ui-tabs {
     .ui-tabs-nav {
         li {
-            background: #F3F3F3 none;
+            background: #F0F3F3 none;
             border-color: #D8D8D8;
             margin-right: .4em;
 
@@ -695,12 +768,15 @@ ul {
                 border-bottom: 0;
 
                 a {
-                    color: #000;
+                    color: #727272;
                     font-weight: bold;
                 }
 
                 &.ui-state-hover {
                     background: #FFF none;
+                    &.ui-state-active {
+                        background: #FFF none;
+                    }
                 }
             }
 
@@ -754,6 +830,10 @@ ul {
     }
 }
 
+.ui-corner-top {
+    border-radius: 0px;
+}
+
 .statictabs {
     ul {
         background: none repeat scroll 0 0 transparent;
@@ -1282,7 +1362,7 @@ div {
 
 #selections-toolbar,
 .selections-toolbar {
-    background: linear-gradient( top, #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% );
+    background: linear-gradient( #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% );
     margin: 0 0 1em;
     padding-left: 10px;
     padding-top: .5em;
@@ -1415,9 +1495,10 @@ div {
 }
 
 .view {
-    background-color: #F3F3F3;
+    background-color: #F0F3F3;
     border: 1px solid #C9C9C9;
     border-radius: 4px;
+    color: #727272;
     display: inline-block;
     padding: .2em .5em;
     white-space: nowrap;
@@ -1640,7 +1721,7 @@ div {
 
 /* action buttons */
 #action {
-    background-color: #F3F3F3;
+    background-color: #F0F3F3;
     border: 1px solid #E8E8E8;
     margin: .5em 0 0 0;
     padding-bottom: 3px;
@@ -1725,7 +1806,7 @@ input {
 
 .newshelf {
     @extend %initial_icon;
-    background-position: 2px -764px; /* List new */
+    background-position: 2px -761px; /* List new */
     border: 0;
     color: #006699;
     cursor: pointer;
@@ -2038,9 +2119,16 @@ input {
 }
 
 .dropdown-menu {
+    border-radius: 0px;
     > li {
         > a {
             font-size: 90%;
+            &:hover {
+                background: #85ca11 none;
+            }
+            &:focus {
+            background: #85ca11 none;
+            }
         }
     }
 }
@@ -2069,7 +2157,6 @@ input {
 
 #search-facets,
 #menu {
-    @include border-radius-all( 7px );
     border: 1px solid #D2D2CF;
 
     ul {
@@ -2087,10 +2174,9 @@ input {
         text-align: center;
 
         a {
-            background-color: #F2F2EF;
+            background-color: #F0F3F3;
             border-bottom: 1px solid #D8D8D8;
-            border-radius: 8px 8px 0 0;
-            display: block;
+                        display: block;
             font-weight: bold;
             padding: .7em .2em;
             text-decoration: none;
@@ -2136,10 +2222,9 @@ input {
         list-style-type: none;
 
         a {
-            background: #EEEEEE;
+            background-color: #F0F3F3;
             border: 1px solid #D8D8D8;
             border-bottom-color: #999;
-            border-radius: 5px 0 0 5px;
             display: block;
             font-size: 111%;
             margin: .4em 0;
@@ -2199,7 +2284,7 @@ input {
     a {
         &.highlight_toggle {
             background-image: url( "../images/sprite.png" ); /* Highlight */
-            background-position: -11px -841px;
+            background-position: -11px -837px;
             background-repeat: no-repeat;
             display: none;
             font-weight: normal;
@@ -2220,6 +2305,11 @@ input {
             background-color: rgba( 239, 254, 213, .4 );
         }
     }
+
+    .commenter {
+        color: #666;
+        font-size: 85%;
+    }
 }
 
 .commentline .avatar {
@@ -2236,7 +2326,6 @@ input {
 
 /* style for shelving location in catalogsearch */
 .shelvingloc {
-    display: block;
     font-style: italic;
 }
 
@@ -2403,13 +2492,12 @@ button.closebtn {
         width: 100%;
 
         &[type='submit'] {
-            background: #006DCC none;
             font-size: 100%;
             padding: .5em;
             transition: background-color .5s ease;
 
             &:hover {
-                background: #0088CC none;
+                background: #77b50f none;
             }
         }
     }
@@ -2480,9 +2568,9 @@ button.closebtn {
 }
 
 .suggestion {
-    @include border-radius-all( 3px );
-    background-color: #EEEEEB;
-    border: 1px solid #DDDED3;
+    background-color: #F0F3F3;
+    border: 1px solid #F0F3F3;
+    color: #727272;
     margin: 1em auto;
     padding: .5em;
     width: 35%;
@@ -2508,7 +2596,7 @@ button.closebtn {
 }
 
 #logo {
-    background: transparent url( "../images/koha-logo-navbar.png" ) no-repeat scroll 0%;
+    background: transparent url( "../images/koha-green-logo.png" ) no-repeat scroll 0%;
     border: 0;
     float: left !important;
     margin: 0;
@@ -2525,6 +2613,9 @@ button.closebtn {
         padding: 40px 0 0;
         text-decoration: none;
         width: 100px;
+         &:focus {
+        background-color: transparent;
+         }
     }
 }
 
@@ -2543,6 +2634,10 @@ button.closebtn {
     }
 }
 
+#header-region .icon-white {
+    background-image: url(/opac-tmpl/bootstrap/lib/bootstrap/img/glyphicons-halflings.png);
+}
+
 /* Class to be added to toolbar when it starts being fixed at the top of the screen*/
 .floating {
     box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
@@ -2574,17 +2669,17 @@ button.closebtn {
 
 .table {
     .sorting_asc {
-        background: url( "../images/asc.gif" ) no-repeat scroll right center #ECEDE6;
+        background: url( "../images/asc.gif" ) no-repeat scroll 100% 80% #E2E8E8;
         padding-right: 19px;
     }
 
     .sorting_desc {
-        background: url( "../images/desc.gif" ) no-repeat scroll right center #ECEDE6;
+        background: url( "../images/desc.gif" ) no-repeat scroll 100% 80% #E2E8E8;
         padding-right: 19px;
     }
 
     .sorting {
-        background: url( "../images/ascdesc.gif" ) no-repeat scroll right center #ECEDE6;
+        background: url( "../images/ascdesc.gif" ) no-repeat scroll 100% 75% #E2E8E8;
         padding-right: 19px;
     }
 
@@ -2592,7 +2687,7 @@ button.closebtn {
     .nosort.sorting_asc,
     .nosort.sorting_desc,
     .nosort.sorting {
-        background: #ECEDE6 none;
+        background: #E2E8E8 none;
         padding-right: 19px;
     }
 
@@ -2602,6 +2697,26 @@ button.closebtn {
     }
 }
 
+.table-bordered {
+    border-radius: 0;
+    thead:first-child tr:first-child > th {
+        &:last-child {
+        border-radius: 0;
+        }
+        &:first-child {
+        border-radius: 0;
+        }
+    }
+    tbody:last-child tr:last-child > td {
+        &:last-child {
+        border-radius: 0;
+        }
+        &:first-child {
+        border-radius: 0;
+        }
+    }
+}
+
 .tags,
 .shelves {
     ul {
@@ -2619,43 +2734,6 @@ button.closebtn {
     float: right;
 }
 
-#i18nMenu {
-    margin-left: 1em;
-
-    li {
-        font-size: 85%;
-
-        li {
-            font-size: 100%;
-
-            > a {
-                font-size: 100%;
-            }
-
-            &:hover {
-                color: #FFF;
-            }
-        }
-
-        a {
-            color: $links;
-        }
-    }
-
-    .dropdown-menu {
-        li {
-            p {
-                clear: both;
-                display: block;
-                font-weight: normal;
-                line-height: 20px;
-                padding: 3px 20px;
-                white-space: nowrap;
-            }
-        }
-    }
-}
-
 #subjectsList,
 #authorSearch {
     label {
@@ -2992,15 +3070,12 @@ button.closebtn {
 
 #user_summary {
     border: 1px solid #EAEAE6;
-    border-radius: 7px;
     margin-bottom: 1em;
     padding-bottom: .5em;
 
     h3 {
-        background-color: #EAEAE6;
-        border-top-left-radius: 6px;
-        border-top-right-radius: 6px;
-        box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 );
+        background-color: #E2E8E8;
+        color: #727272;
         margin-top: 0;
         padding: .2em 0;
         text-align: center;
@@ -3018,4 +3093,98 @@ button.closebtn {
     }
 }
 
+.adlibris-cover {
+    max-height: 120px;
+}
+
+.adlibris-cover-big {
+    max-height: 200px;
+}
+
+/* jQuery Bar Rating plugin for star ratings */
+
+$star-default: #D2D2D2;
+$star-active: #C24A4A;
+$star-selected: #EDB867;
+
+.br-wrapper {
+    display: inline-block;
+}
+
+.br-theme-fontawesome-stars {
+
+    .br-widget {
+        height: 28px;
+        white-space: nowrap;
+
+        a {
+            -webkit-font-smoothing: antialiased;
+            font: normal normal normal 20px/1 FontAwesome;
+            margin-right: 2px;
+            text-decoration: none;
+            text-rendering: auto;
+
+            &::after {
+                color: $star-default;
+                content: "\f005";
+            }
+
+            &.br-active {
+                &::after {
+                    color: $star-active;
+                }
+            }
+
+            &.br-selected {
+                &::after {
+                    color: $star-selected;
+                }
+            }
+        }
+
+
+        .br-current-rating {
+            display: none;
+        }
+    }
+
+    .br-readonly {
+        a {
+            cursor: default;
+        }
+    }
+
+}
+
+#cancel_rating_text {
+    a {
+        color: #C24A4A;
+    }
+}
+
+@media print {
+    .br-theme-fontawesome-stars {
+
+        .br-widget {
+            a {
+                &::after {
+                    color: #000000;
+                    content: "\f006";
+                }
+
+                &.br-active::after,
+                &.br-selected::after {
+                    color: #000000;
+                    content: "\f005";
+                }
+            }
+
+        }
+
+    }
+}
+
+/* END jQuery Bar Rating plugin for star ratings */
+
+
 @import "responsive";