diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/sco.css b/koha-tmpl/opac-tmpl/bootstrap/css/sco.css index 38fe877..e8b6d8f 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/sco.css +++ b/koha-tmpl/opac-tmpl/bootstrap/css/sco.css @@ -1,5 +1,74 @@ +@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'); +} + body { - background-color: #EAEAE6; + background: #FCF9FC none; + font-family: 'NotoSans'; + font-size: 16px; +} + +#wrap { + height: auto !important; + height: 100%; + min-height: 100%; + padding-right: 40px; + padding-left: 40px; +} + +#logo { + background: transparent url("../images/koha-green-logo.png") no-repeat scroll 0%; + border: 0; + float: left !important; + margin: 0; + padding: 0; + width: 100px; +} +#logo a { + border: 0; + cursor: pointer; + display: block; + height: 0 !important; + margin: 0; + overflow: hidden; + padding: 40px 0 0; + text-decoration: none; + width: 100px; +} +#logo a:focus { + background-color: transparent; } a, a:visited, @@ -9,20 +78,24 @@ a, a:visited, } a.title { + font-size: 108%; font-weight: bold; } h1 { font-size : 140%; line-height: 150%; + color: #727272; } h2 { + color: #727272; font-size : 130%; line-height: 150%; } h3 { + color: #727272; font-size : 120%; line-height: 150%; } @@ -33,14 +106,21 @@ h4 { h5 { font-size : 100%; + color: #727272; } caption { + color: #727272; font-size: 120%; font-weight: bold; - margin : .5em 0; + margin: 0; text-align: left; } +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, textarea { width: auto; @@ -49,34 +129,119 @@ textarea { legend { font-size: 110%; font-weight: bold; + color: #727272; } th { - background-color: #ECEDE6; + background-color: #E2E8E8; +} +@media only screen and (min-width:768px) +{ + .main { + margin-left:20px; + margin-right:20px; } .main { background-color: #FFF; - border: 1px solid #D2D2CF; - border-radius: 8px 8px 8px 8px; - margin: 0.5em 20px; - padding: 0.8em 0; - -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .2); - box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .2); -} -.navbar-inverse .brand, .navbar-inverse .nav > li > a { - color: #9FE1FF; - font-weight: bold; + border: 1px solid #F0F3F3; + margin-bottom: .5em; + margin-top: .5em; +} + +.navbar .divider-vertical { + border-left-color: #fcf9fc; + border-right-color: #fcf9fc; +} +.navbar .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 .brand { + color: #9fe1ff; + font-weight: bold; +} +.navbar-inverse .navbar-inner { + background: #fcf9fc none; + border-color: #fcf9fc; + box-shadow: none; +} +.navbar-inverse .nav > li > a { + color: #727272; + font-weight: bold; + text-shadow: none; +} +.navbar-inverse .nav > li > a:hover { + color: #85ca11; +} +.navbar-inverse .nav > li > a:focus { + color: #85ca11; +} +.navbar-inverse .nav li.dropdown > a:hover .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-inverse .nav li.dropdown.open > .dropdown-toggle { + background-color: transparent; + color: #85ca11; +} +.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-inner { + background: #fcf9fc none; +} +.navbar-fixed-bottom.navbar-static-bottom { + margin-top: 0.5em; + position: static; +} +.navbar-fixed-bottom .navbar-inner { + box-shadow: none; } .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { - background-color: #F4F4F4; + background-color: #F0F3F3; } + /* Redefine a new style for Bootstrap's class "close" since we use that already */ /* Use × */ -.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;} +.modal-header .closebtn { + margin-top: 2px; +} +.closebtn { + color: #000; + float: right; + font-size: 20px; + font-weight: bold; + line-height: 20px; + opacity: 0.2; + text-shadow: 0 1px 0 #fff; +} +.closebtn:hover { + color: #000; + cursor: pointer; + opacity: 0.4; + text-decoration: none; +} +button.closebtn { + background: transparent; + border: 0; + cursor: pointer; + padding: 0; +} + .btn-group label, .btn-group select { font-size: 13px; @@ -84,56 +249,47 @@ button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit /* 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; + 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: #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; + 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: #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; + background: linear-gradient( to bottom, #F8FFE8 0%, #E3F5AB 4%, #DCF48D 98%, #9EBF28 100% ); + border-color: #9FBA35; color: #333; } + #members p { - color : #EEE; + color : #727272; } #members a { - color: #A6D8ED; + color: #E8583C; font-weight: bold; } #members a.logout { color : #E8583C; + font-weight: bold; padding : 0 .3em 0 .3em; } @@ -177,22 +333,22 @@ i.help { .table .sorting_asc { padding-right: 19px; - background: url("../images/asc.gif") no-repeat scroll right center #EEEEEE; + background: url("../images/asc.gif") no-repeat scroll 100% 80% #E2E8E8; } .table .sorting_desc { padding-right: 19px; - background: url("../images/desc.gif") no-repeat scroll right center #EEEEEE; + background: url("../images/desc.gif") no-repeat scroll 100% 80% #E2E8E8; } .table .sorting { padding-right: 19px; - background: url("../images/ascdesc.gif") no-repeat scroll right center #EEEEEE; + background: url("../images/ascdesc.gif") no-repeat scroll 100% 75% #E2E8E8; } .table .nosort, .table .nosort.sorting_asc, .table .nosort.sorting_desc, .table .nosort.sorting { padding-right: 19px; - background: #EEEEEE none; + background: #E2E8E8 none; } #sci_logout { @@ -205,4 +361,4 @@ i.help { #sci_refresh_button { color: rgb(51, 51, 51); -} \ No newline at end of file +} diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc index 5b18006..b7b4140 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc @@ -5,10 +5,12 @@