From e7d4ef130a1100f7ced8edab095441887b547f7f Mon Sep 17 00:00:00 2001 From: Claire Gravely Date: Tue, 10 Apr 2018 14:39:07 +0000 Subject: [PATCH] Bug 20554: New OPAC CSS A suggestion for updating the OPAC CSS This patch updates the css styling of the OPAC --- .../opac-tmpl/bootstrap/css/src/_responsive.scss | 2 +- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 338 +++++++++++++++++---- .../bootstrap/en/includes/doc-head-close.inc | 4 + .../opac-tmpl/bootstrap/images/koha-green-logo.png | Bin 0 -> 2125 bytes 4 files changed, 283 insertions(+), 61 deletions(-) create mode 100644 koha-tmpl/opac-tmpl/bootstrap/images/koha-green-logo.png diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 832bbf3..dc7b281 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -240,7 +240,7 @@ } #logo { - background: transparent url( "../lib/bootstrap/img/glyphicons-halflings-white.png" ) no-repeat; + background: transparent url( "../lib/bootstrap/img/glyphicons-halflings.png" ) no-repeat; background-position: 0 -24px; margin: 14px 14px 0 14px; width: 14px; diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index dec3007..2169345 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -1,7 +1,9 @@ @import "mixins"; body { - background-color: #EAEAE6; + background: #FCF9FC none; + font-family: 'NotoSansRegular'; + font-size: 16px; } /* Sticky footer styles */ @@ -37,6 +39,8 @@ body { height: auto !important; height: 100%; min-height: 100%; + padding-right: 40px; + padding-left: 40px; /* Negative indent footer by it's height */ // margin: 0 auto -60px; } @@ -97,8 +101,11 @@ a { } &.login-link { - color: #A6D8ED; + color: #005580; font-weight: bold; + &.loginModal-trigger { + color: #85ca11; + } } &.listmenulink { @@ -132,13 +139,13 @@ a { &.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; } @@ -188,7 +195,7 @@ a { &.highlight_toggle { @extend %initial_icon; - background-position: -5px -841px; /* Highlight */ + background-position: -5px -836px; /* Highlight */ display: none; padding-left: 35px; } @@ -214,7 +221,7 @@ a { &.new { @extend %initial_icon; background-image: url( "../images/sprite.png" ); /* New */ - background-position: -4px -922px; + background-position: -4px -919px; padding-left: 23px; } @@ -226,7 +233,7 @@ a { &.print-large { @extend %initial_icon; - background-position: -5px -186px; /* Toolbar print */ + background-position: -5px -183px; /* Toolbar print */ padding-left: 35px; } @@ -243,7 +250,7 @@ a { &.reserve { @extend %initial_icon; - background-position: -6px -144px; /* Place hold */ + background-position: -6px -141px; /* Place hold */ padding-left: 35px; } @@ -273,6 +280,7 @@ a { h1 { font-size: 140%; line-height: 150%; + color: #727272; &#libraryname { background: transparent url( "../images/logo-koha.png" ) no-repeat scroll 0%; @@ -297,11 +305,13 @@ h1 { } h2 { + color: #727272; font-size: 130%; line-height: 150%; } h3 { + color: #727272; font-size: 120%; line-height: 150%; } @@ -312,9 +322,11 @@ h4 { h5 { font-size: 100%; + color: #727272; } caption { + color: #727272; font-size: 120%; font-weight: bold; margin: 0; @@ -333,6 +345,7 @@ textarea { legend { font-size: 110%; font-weight: bold; + color: #727272; } table { @@ -354,7 +367,7 @@ td { } .sum { - background-color: #FFC; + background-color: #FFFFE5; font-weight: bold; } @@ -368,7 +381,7 @@ td { } th { - background-color: #ECEDE6; + background-color: #E2E8E8; &.sum { text-align: right; @@ -394,9 +407,10 @@ th { span { @include border-radius-all( 3px ); - background-color: #FFC; - color: #000; + background-color: #85ca11; + color: #FFF; display: inline; + font-family: 'NotoSansRegular'; font-size: 80%; font-weight: normal; margin: 0 0 0 .9em; @@ -409,7 +423,7 @@ th { display: block; p { - color: #EEE; + color: #727272; } a { @@ -461,13 +475,12 @@ th { .newscontainer { border: 1px solid #DDD; border-bottom-width: 0; - border-top-left-radius: 5px; - border-top-right-radius: 5px; } .newsheader { - background-color: #ECEDE6; + background-color: #f0f3f3; border-bottom: 1px solid #DDD; + color: #727272; margin: 0; padding: 8px; } @@ -483,12 +496,30 @@ th { } #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; + font-weight: bold; +} + +.selections-toolbar.toolbar { + background: #e2e8e8 none; } .actions { @@ -500,7 +531,7 @@ th { &.hold { background-image: url( "../images/sprite.png" ); /* Place hold small */ - background-position: -5px -542px; + background-position: -5px -539px; padding-left: 21px; } @@ -512,13 +543,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; } @@ -572,12 +603,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; } .form-inline { @@ -592,40 +623,132 @@ 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; } } +.btn-primary { + background-color: #85ca11; + background-image: linear-gradient(to bottom, #85ca11, #77b50f); + background-position: 0; + font-family: 'NotoSansRegular'; + &:hover { + background-color: #85ca11; + background-image: linear-gradient(to bottom, #85ca11, #77b50f); + background-position: 0; + } + &: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; + } +} + +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) + } + .navbar-inverse { .brand { color: #9FE1FF; font-weight: bold; } + .navbar-inner { + background: #fcf9fc none; + border-color: #fcf9fc; + box-shadow: none; + } + .nav { > li { > a { - color: #9FE1FF; + color: #727272; font-weight: bold; + &: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: #fff; + color: #85ca11; + .caret { + border-top-color: #85ca11; + border-bottom-color: #85ca11; + &:hover { + border-top-color: #85ca11; + border-bottom-color: #85ca11; + } + } + } + } + } +} + +.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-inner { + background: #fcf9fc none; } .navbar-fixed-bottom { @@ -633,11 +756,37 @@ th { margin-top: .5em; position: static; } + .navbar-inner { + box-shadow: none; + } +} + +[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; + } } @@ -656,7 +805,7 @@ th { .ui-widget select, .ui-widget textarea, .ui-widget button { - font-family: inherit; + font-family: 'NotoSansRegular'; font-size: inherit; } @@ -671,7 +820,7 @@ ul { .ui-tabs { .ui-tabs-nav { li { - background: #F3F3F3 none; + background: #F0F3F3 none; border-color: #D8D8D8; margin-right: .4em; @@ -681,7 +830,7 @@ ul { border-bottom: 0; a { - color: #000; + color: #727272; font-weight: bold; } @@ -740,6 +889,10 @@ ul { } } +.ui-corner-top { + border-radius: 0px; +} + .statictabs { ul { background: none repeat scroll 0 0 transparent; @@ -1426,9 +1579,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; @@ -1528,6 +1682,41 @@ div { } } +.pagination ul { + box-shadow: none; + border-radius: 0; + > li { + > a { + border: 1px solid #d8d8d8; + border-left-width: 0; + &:focus { + background-color: #f0f3f3; + } + } + + &:first-child > a { + border-radius: 0; + } + + &:last-child > a { + border-radius: 0px; + } + } + > .active > a { + color: #727272; + background-color: #f0f3f3; + } +} + +.pagination-small ul > li { + &:first-child > a { + border-radius: 0; + } + &:last-child > a { + border-radius: 0; + } +} + .nav_results { background-color: #F3F3F3; border: 1px solid #D0D0D0; @@ -1538,7 +1727,7 @@ div { .l_Results { a { - background: #E1E1E1 url( "../images/sprite.png" ) no-repeat 0 -504px; /* Browse results menu */ + background: #E2E2E8 url( "../images/sprite.png" ) no-repeat 0 -507px; /* Browse results menu */ color: #006699; display: block; padding: 8px 28px; @@ -1648,7 +1837,7 @@ div { /* action buttons */ #action { - background-color: #F3F3F3; + background-color: #F0F3F3; border: 1px solid #E8E8E8; margin: .5em 0 0 0; padding-bottom: 3px; @@ -1733,7 +1922,7 @@ input { .newshelf { @extend %initial_icon; - background-position: 2px -764px; /* List new */ + background-position: 2px -761px; /* List new */ border: 0; color: #006699; cursor: pointer; @@ -2042,10 +2231,17 @@ input { } .dropdown-menu { + border-radius: 0px; > li { > a { font-size: 90%; } + &:hover { + background: #85ca11 none; + } + &:focus { + background: #85ca11 none; + } } } @@ -2073,7 +2269,6 @@ input { #search-facets, #menu { - @include border-radius-all( 7px ); border: 1px solid #D2D2CF; ul { @@ -2091,10 +2286,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; @@ -2140,10 +2334,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; @@ -2203,7 +2396,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; @@ -2431,9 +2624,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%; @@ -2459,7 +2652,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; @@ -2476,6 +2669,9 @@ button.closebtn { padding: 40px 0 0; text-decoration: none; width: 100px; + &:focus { + background-color: transparent; + } } } @@ -2483,7 +2679,7 @@ button.closebtn { display: none; .icon-user { - background: transparent url( "../lib/bootstrap/img/glyphicons-halflings-white.png" ) no-repeat; + background: transparent url( "../lib/bootstrap/img/glyphicons-halflings.png" ) no-repeat; background-position: -168px 0; background-repeat: no-repeat; height: 14px; @@ -2500,6 +2696,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 ); @@ -2531,17 +2731,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 right center #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 right center #E2E8E8; padding-right: 19px; } .sorting { - background: url( "../images/ascdesc.gif" ) no-repeat scroll right center #ECEDE6; + background: url( "../images/ascdesc.gif" ) no-repeat scroll right center #E2E8E8; padding-right: 19px; } @@ -2549,7 +2749,7 @@ button.closebtn { .nosort.sorting_asc, .nosort.sorting_desc, .nosort.sorting { - background: #ECEDE6 none; + background: #E2E8E8 none; padding-right: 19px; } @@ -2559,6 +2759,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 { @@ -2948,15 +3168,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; @@ -2974,4 +3191,5 @@ button.closebtn { } } + @import "responsive"; diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc index 8445567..a1ee96f 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc @@ -15,6 +15,10 @@ [% END %] + + + + [% SET opaclayoutstylesheet='opac_' _ KOHA_VERSION _ '.css' UNLESS opaclayoutstylesheet %] [% IF (opaclayoutstylesheet.match('^https?:|^\/')) %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/images/koha-green-logo.png b/koha-tmpl/opac-tmpl/bootstrap/images/koha-green-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..5d08a931ad75030ef12912b2e6f8db825a10b237 GIT binary patch literal 2125 zcmV-T2(tHyP)~lN=GP6nGQm;8$b$( zHEHcoWw3T^r=3>oDE;9$ol(p$`=(?QYe#LVj6=uPUoEZFvC|G!#3EJ%NwVTtinTf_ zRz(W9yFo}~f85hQb{BV-4OmS7==o#!z3;i-bIv{Q-E+@je1f>wFNe<2hq zS6De#Ek-Ay+@sJZFkvhLEf-Y{ituTW`vg{z=AE&!U6K@kD*;zWHUe#@A_|=8X3V$B z@$QzPH#)>5g3pYl z?EpYv(7Q@u*6A2fu~jF6+6H3NPUiR%T-{%{)QDLP8W^9cUGjqkZ;upHdUw?}YTCUC zScKtSlyM^RtB!E|kxG6K;qkQ z8CU=kIVvMlOE^30KBJkyZiEHmrk8bw6U(i!-&fTKdk5;Tt>jm%wC1n2^bCgX6=-sd zw4%}n^6f*}(Dmh<)jNaJC6Ij{;ZlpeI&H?!QV6;+ZzaktD61rEKQMjI2d4?lKFyri zR7Up|0~(Mv0L5$qi1yd}C=0>10gnS~yXL+3a$&r`BUqm`W+RA;bysxEJ#rAByLsp} zRkkX2^@a^NC%V>4^8brP<>`({vgelO#1Pn2K3V4!kG^w9(|9q???D=k=w;n4Lr?k5 z`-UfY$xc+i0n7*Xb+jaQ2eR3~<$|7GN`$}r^Wuj~LRD!6#fWZ>4tRG9c7I1Cc~xG$ z1)#HNe86#jDsZMid&j&3|1P#=goGlKUpcov4Dp=>yl-2bXCVwAss}n-lD|G4l9)M) zg7CLuTO;n#?};*7m516R$rlRv4bwRm9gra4D)NK~YD9Hm*;I#teZUB(5@lQQt-qB3 z=u+UQTD?(_7ds-!p3&%i&j+W8@HHSyApOe|%}X_aakRb!Kf}2gaDd@-Cewc0zhV?! z0bsKFYyn>v!$r9fz##Wj2u1QgoAP5gFONT}=;DrWqP8=VI6Hkb5fqUx18 z^OJiEc-%Hz089b)wMRaD<8rnTpb5yPGnv1T4`?dr9i5T*impiV8Og6D{~|IS;rJtg zfHRNEiFtk68_7SHOhKiv6|Vyn;bwn(?Wl)64#%u+!;;bn~ zjpgh4%iom5B{q`h^-Ec;=-JsY6Q}_O`~`>OkW0$Q1TR^<%u8g|+(Y|Rxcx+puDS9` zvSpKO1yGTwD8B=OuIv7AG~1ectHA0@<+^k#wHR=L*SqE>-z?z0v4)wzxxh=^;Y0r{ z;CJq58jr{oK-R^5xXe*7@2@PmV2u4zKKA3s5hKXMH%#Z)Xn_MbS$U<*$(!jKx1|T*J$!;He}vGo8enaGM7}fWSIU6?MAmp}uHBSQE)*qT}5WDpx`N#z#I;UhRVz2RM z9W3cj0!|=T{8Tmrw9ilORropJ8qMCNirhZXcxKOF=-vXy2+skCk&=^iG*&kkWVyiZ z>P+?8Vx35#KhctISyh(;i0W?vs_gI|-)?HE%IUJX^Oxuu#hh0^QGX3E6|lAS@m)WD zcH#t!tTL%orlj!n#Jq)l+v>c+{cZiB*+@}yC*0i`8QM~wI1$^L`~R@`W?YQ|?*d=w zjd_oz$UFwlFADlpP2eHmU&hMk3Rv&1+D5E-0N9%~c6o88k9l7JH{DuHFES z>QOt+?1>I~4@3vOjaiX?pn+VW{!zL)abtNx@>!V(I+&92PZuD6PBLjlzX}{iS%&C? z#UFzFSqG1ZF>NX`ueaY@A06=4YQ`Nv+3pzTb~g{bR_tOp9-4{B%OLlk(83GrfwUUk zD2DmLP~z5t>bhpqihKp^IqxUDccO#di-@@_eWdO>V^{|`(LwJil-IgihGG>DfW7_R zXA!+sRpue6!e5PYdq+!RTcz=*5#sv#L@x2aDgp-u?*<#tCF{9Wnd|Qs^NHoxqZ}00000NkvXXu0mjf Dv2FQi literal 0 HcmV?d00001 -- 2.1.4