From 1267375a3a38beca7efbf18290030676fd8180c9 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 11 Apr 2019 13:50:12 +0000 Subject: [PATCH] Bug 22638: (follow-up) Convert SCI CSS to SCSS This patch makes a number of follow-up changes, including: - Covert remaining icons to Font Awesome - Convert CSS to SCSS - Move SCSS which is common to both the OPAC and SCI into separate files to be including in each during compilation. - Make minor correction to opac.scss to fix SCSS build warning To test, apply the patch and rebuild the OPAC CSS. Clear your browser cache if necessary. - Enable the self checkin module using using the SelfCheckInModule system preference. - Open the self checkin interface and test the checkin process. Everything should look correct. - After submitting barcodes for checkin, the "Finish" button should show a Font Awesome icon instead of an image icon. - Enable multiple translations and set the OpacLangSelectorMode preference to show the language menu in the footer. - Confirm that the language menu looks correct. - View the regular OPAC to make sure the changes to opac.scss didn't result in unintended changes to the interface. Signed-off-by: Liz Rea --- koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 196 ++++++++++++ koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss | 35 +++ koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss | 6 +- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 210 +------------ koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss | 340 +++++++++++++++++++++ .../opac-tmpl/bootstrap/en/modules/sci/sci-main.tt | 6 +- 6 files changed, 582 insertions(+), 211 deletions(-) create mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss create mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss create mode 100644 koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss new file mode 100644 index 0000000000..e182db3e32 --- /dev/null +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss @@ -0,0 +1,196 @@ +// Sticky footer styles +html, +body { + height: 100%; + // The html and body elements cannot have any padding or margin. +} + +body { + background: #FCF9FC none; + font-family: sans-serif; + font-size: 16px; +} + +.fonts-loaded { + body { + font-family: "NotoSans"; + } +} + +.navbar { + .divider-vertical { + border-left-color: #FCF9FC; + border-right-color: #FCF9FC; + } + + .nav { + li { + &.dropdown { + > a { + &:focus { + .caret { + border-bottom-color: #85CA11; + border-top-color: #85CA11; + } + } + + &:hover { + .caret { + border-bottom-color: #85CA11; + border-top-color: #85CA11; + } + } + } + } + } + } +} + +.navbar-inverse { + .brand { + color: #9FE1FF; + font-weight: bold; + } + + .navbar-inner { + background: #FCF9FC none; + border-color: #FCF9FC; + box-shadow: none; + + li { + > a { + color: #727272; + font-weight: bold; + text-shadow: none; + + &:hover { + color: #85CA11; + } + + &:focus { + color: #85CA11; + } + } + + &.dropdown { + > a { + &:hover { + .caret { + border-bottom-color: #85CA11; + border-top-color: #85CA11; + } + } + + &: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-inner { + background: #FCF9FC none; +} + +.navbar-fixed-bottom { + &.navbar-static-bottom { + position: static; + } + + .navbar-inner { + box-shadow: none; + min-height: $footer-height; + } +} + +// Wrapper for page content to push down footer +#wrap { + height: auto !important; + height: 100%; + margin: 0 auto -#{$footer-height + 1}; + // Negative indent footer by its height + min-height: 100%; + padding-left: 40px; + padding-right: 40px; +} + +#changelanguage { + clear: both; + // Set the fixed height of the footer here + min-height: $footer-height; + + .nav { + > .active { + > p { + padding: 0 15px; + } + } + } +} + +#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; + } + } + } +} + +#koha_url { + p { + color: #666666; + float: right; + margin: 0; + } +} \ No newline at end of file diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss new file mode 100644 index 0000000000..b0ebcd45fa --- /dev/null +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss @@ -0,0 +1,35 @@ +@font-face { + font-family: "NotoSans"; + font-style: normal; + font-weight: 400; + src: local("Noto Sans Regular"), + url("fonts/NotoSans-Regular-webfont.woff2") format("woff2"), + url("fonts/NotoSans-Regular-webfont.woff") format("woff"); +} + +@font-face { + font-family: "NotoSans"; + font-style: bold; + font-weight: 700; + src: local("Noto Sans Bold"), + url("fonts/NotoSans-Bold-webfont.woff2") format("woff2"), + url("fonts/NotoSans-Bold-webfont.woff") format("woff"); +} + +@font-face { + font-family: "NotoSans"; + font-style: italic; + font-weight: 400; + src: local("Noto Sans Italic"), + url("fonts/NotoSans-Italic-webfont.woff2") format("woff2"), + url("fonts/NotoSans-Italic-webfont.woff") format("woff"); +} + +@font-face { + font-family: "NotoSans"; + font-style: italic; + font-weight: 700; + src: local("Noto Sans Bold Italic"), + url("fonts/NotoSans-BoldItalic-webfont.woff2") format("woff2"), + url("fonts/NotoSans-BoldItalic-webfont.woff") format("woff"); +} diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss index 73ee84cf1d..3b529af87d 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss @@ -1,5 +1,9 @@ $color: #999999; $links: #0076B2; +$footer-height: 45px; + +$sci-link-color: #0076B6; +$sci-heading-color: #727272; @mixin shadowed { box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 ); @@ -7,4 +11,4 @@ $links: #0076B2; @mixin border-radius-all( $radius: 3px ) { border-radius: $radius; -} \ No newline at end of file +} diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index b0f99c9501..8d6b967829 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -1,60 +1,9 @@ @import "mixins"; - -@font-face { - font-family: 'NotoSans'; - font-style: normal; - font-weight: 400; - src: local('Noto Sans Regular'), - url('fonts/NotoSans-Regular-webfont.woff2') format('woff2'), - url('fonts/NotoSans-Regular-webfont.woff') format('woff'); -} - -@font-face { - font-family: 'NotoSans'; - font-style: bold; - font-weight: 700; - src: local('Noto Sans Bold'), - url('fonts/NotoSans-Bold-webfont.woff2') format('woff2'), - url('fonts/NotoSans-Bold-webfont.woff') format('woff'); -} - -@font-face { - font-family: 'NotoSans'; - font-style: italic; - font-weight: 400; - src: local('Noto Sans Italic'), - url('fonts/NotoSans-Italic-webfont.woff2') format('woff2'), - url('fonts/NotoSans-Italic-webfont.woff') format('woff'); -} - -@font-face { - font-family: 'NotoSans'; - font-style: italic; - font-weight: 700; - src: local('Noto Sans Bold Italic'), - url('fonts/NotoSans-BoldItalic-webfont.woff2') format('woff2'), - url('fonts/NotoSans-BoldItalic-webfont.woff') format('woff'); -} +@import "fonts"; +@import "common"; $footer-height: 45px; -body { - background: #FCF9FC none; - font-family: sans-serif; - font-size: 16px; -} - -.fonts-loaded body { - font-family: 'NotoSans'; -} - -/* Sticky footer styles */ -html, -body { - height: 100%; - /* The html and body elements cannot have any padding or margin. */ -} - .no-js { .dateformat { display: inline; @@ -76,35 +25,11 @@ body { } } -/* Wrapper for page content to push down footer */ -#wrap { - height: auto !important; - height: 100%; - min-height: 100%; - padding-left: 40px; - padding-right: 40px; - /* Negative indent footer by its height */ - margin: 0 auto -#{$footer-height + 1}; -} - .fa.fa-icon-black, .fa.fa-icon-white { color: #000; } -#changelanguage { - clear: both; - /* Set the fixed height of the footer here */ - min-height: $footer-height; - .nav { - > .active { - > p { - padding: 0 15px; - } - } - } -} - .popup { padding-left: 0; padding-right: 0; @@ -482,14 +407,6 @@ th { } } -#koha_url { - p { - color: #666666; - float: right; - margin: 0; - } -} - #moresearches { margin: .5em 0; padding: 0 .8em; @@ -772,90 +689,6 @@ input[type="text"]:focus { box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6) } - .navbar { - .divider-vertical { - border-left-color: #fcf9fc; - border-right-color: #fcf9fc; - } - .nav li.dropdown > a { - &:focus .caret { - border-top-color: #85ca11; - border-bottom-color: #85ca11; - } - &:hover .caret { - border-top-color: #85ca11; - border-bottom-color: #85ca11; - } - } -} - -.navbar-inverse { - .brand { - color: #9FE1FF; - font-weight: bold; - } - - .navbar-inner { - background: #fcf9fc none; - border-color: #fcf9fc; - box-shadow: none; - } - - .nav { - > li { - > a { - color: #727272; - font-weight: bold; - text-shadow: none; - &:hover { - color: #85ca11; - } - &:focus { - color: #85ca11; - } - } - } - li.dropdown { - > a { - &:hover .caret { - border-top-color: #85ca11; - border-bottom-color: #85ca11; - } - &:focus .caret { - border-top-color: #85ca11; - border-bottom-color: #85ca11; - } - } - &.open > .dropdown-toggle { - background-color: transparent; - color: #85ca11; - .caret { - border-top-color: #85ca11; - border-bottom-color: #85ca11; - &:hover { - border-top-color: #85ca11; - border-bottom-color: #85ca11; - } - } - } - } - } -} - -.navbar-inner { - background: #fcf9fc none; -} - -.navbar-fixed-bottom { - &.navbar-static-bottom { - position: static; - } - .navbar-inner { - box-shadow: none; - min-height: $footer-height; - } -} - [class^="icon-"] { vertical-align: 0; } @@ -1519,7 +1352,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; @@ -2886,43 +2719,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 { diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss new file mode 100644 index 0000000000..0454175972 --- /dev/null +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/sci.scss @@ -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 × + .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/en/modules/sci/sci-main.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt index 4e946d9123..3a4adf05b2 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt @@ -54,8 +54,8 @@ @@ -122,7 +122,7 @@
- +
[% ELSE %] -- 2.11.0