koha-tmpl/opac-tmpl/ccsr/en/css/mobile.css

   1 /*
   2     Mobile stylesheet
   3     Frédérick Capovilla, 2012 - Libéo
   4 */
   5
   6 /* Hidden elements */
   7
   8 .mobile-hidden,
   9 body#opac-main #login,
  10 body#opac-main #login~div,
  11 body#opac-main #opacnav,
  12 body#opac-main #opacmainuserblock,
  13 body#results #facetcontainer,
  14 body#opac-detail #ulactioncontainer>:not(#action),
  15 body#opac-detail #ulactioncontainer #action a:not(.reserve),
  16 body#opac-detail #shelfbrowser,
  17 body#opac-detail #views,
  18 body#opac-detail div#bibliodescriptions>ul>li:nth-of-type(n+3),
  19 body#results #userresults .pages:nth-of-type(1),
  20 body#results #userresults>br,
  21 body#results td.select.selectcol,
  22 body#results span.results_summary.actions>:not(.hold),
  23 body#results span.addto,
  24 body#results span#placehold,
  25 body#results span.checkall,
  26 body#results span.clearall,
  27 body#results .searchresults td.resultscontrol,
  28 body#advsearch form div.yui-g:nth-last-of-type(-n+4),
  29 body#opac-readingrecord ul.ui-tabs-nav li,
  30 body#opac-login-page #opac-main-search div#libraryname,
  31 #leftmenus>:not(#menu),
  32 #top-bar #menu-left,
  33 #members>ul>li:nth-child(2),
  34 #moresearches,
  35 #breadcrumbs>p:nth-of-type(1),
  36 #main_footer .colleft,
  37 #opac-main-search a.logo {
  38     display:none !important;
  39 }
  40
  41
  42 /* General */
  43
  44 body{
  45     min-width: 100px;
  46 }
  47
  48 #doc, #doc2, #doc3, #doc4, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5, .yui-t6, .yui-t7 {
  49     min-width: 100px;
  50 }
  51
  52 .yui-ge div.first, .yui-gf .yui-g, .yui-gf .yui-u{
  53     width: 100%;
  54 }
  55
  56 #bd:after, .yui-g:after, .yui-gb:after, .yui-gc:after, .yui-gd:after, .yui-ge:after, .yui-gf:after {
  57     content: "";
  58 }
  59
  60 #container{
  61     border-radius: 0;
  62     margin: 0;
  63     padding: 0;
  64     padding-bottom: 10px;
  65     border: 0;
  66 }
  67
  68 #container #ctn_lt {
  69     padding: 0 10px;
  70     padding-left: auto;
  71 }
  72
  73 #doc3{
  74     margin: 0;
  75     width: 100%;
  76 }
  77
  78 #opac-main-search {
  79     margin: 0 !important;
  80     padding: 0;
  81 }
  82
  83 #main_footer{
  84     margin-bottom: 0;
  85 }
  86
  87 #yui-main .yui-b {
  88     margin: 0 !important;
  89 }
  90
  91 #breadcrumbs{
  92     margin: 0 !important;
  93     padding: 0 !important;
  94 }
  95
  96 body#results #breadcrumbs>*{
  97     padding: 20px !important;
  98 }
  99
 100
 101 /* Main */
 102
 103 body#opac-main #container #ctn_lt{
 104     padding: 15px;
 105 }
 106
 107 body#opac-main #opacmainuserblockmobile {
 108     display: block;
 109 }
 110
 111 #news.container {
 112     display: block;
 113     margin: 0em;
 114 }
 115
 116
 117
 118 /* Results */
 119
 120 body#results div#userresults {
 121     padding: 0;
 122     border: 0;
 123 }
 124
 125 body#results .yui-t1 #yui-main .yui-b {
 126     margin: 0;
 127 }
 128
 129 body#results #container #ctn_lt{
 130     padding: 0;
 131 }
 132
 133 body#results .searchresults td.resultscontrol{
 134     border-radius: 0;
 135 }
 136
 137 body#results .searchresults .resort{
 138     width: 50%;
 139     float:right;
 140 }
 141
 142 body#results .searchresults #sort_by{
 143     width: 100%;
 144 }
 145
 146 body#results .searchresults .cartlist{
 147     width:50%;
 148 }
 149
 150 body#results .results_summary.actions .hold {
 151     font-size: 140%;
 152     font-weight: bold;
 153     margin-left: 0;
 154 }
 155
 156
 157 /* Cancel highlighting */
 158
 159 a .term {
 160     text-decoration: inherit;
 161 }
 162
 163 .term {
 164     background-color: inherit;
 165     color: inherit;
 166 }
 167
 168
 169 /* Details */
 170
 171 body#opac-detail #ctn_lt,
 172 body#opac-marcdetail #ctn_lt,
 173 body#opac-isbddetail #ctn_lt{
 174     margin: 10px;
 175     padding: 0;
 176 }
 177
 178 body#opac-detail #opac-detail-yui-ge {
 179     padding-top: 15px;
 180 }
 181
 182 #views>span {
 183     display:block;
 184 }
 185
 186 body#opac-detail #ulactioncontainer{
 187     position: absolute;
 188     top: 0;
 189     right: 0;
 190 }
 191
 192 body#opac-detail #container {
 193     position: relative;
 194 }
 195
 196 body#opac-detail #ulactioncontainer ul{
 197     margin-top: 0;
 198     padding: 5px;
 199 }
 200
 201 body#opac-detail #ulactioncontainer li{
 202     margin: 0;
 203     padding: 0;
 204 }
 205
 206 /* Logo in the footer */
 207
 208 #opac-main-search div#libraryname {
 209     display: block;
 210     position: absolute;
 211     bottom: -116px;
 212     left: 0;
 213     padding: 0 20px;
 214 }
 215
 216 #opac-main-search div#libraryname img {
 217     display: block;
 218 }
 219
 220 #doc3{
 221     position: relative;
 222 }
 223
 224 #main_footer {
 225     padding-top: 29px;
 226 }
 227
 228 #main_footer .colright,
 229 #main_footer .colleft{
 230     float: none;
 231 }
 232
 233 #main_footer .colright .koha{
 234     float: right;
 235     overflow: hidden;
 236     text-indent: -5000em;
 237     width: 92px;
 238     height: 80px;
 239     background-position: center;
 240 }
 241
 242
 243 /* Login bar */
 244
 245 div#top-bar {
 246     display: block;
 247     position: absolute;
 248     left: 0;
 249     bottom: -29px;
 250     top: auto;
 251     overflow: hidden;
 252     z-index: auto;
 253 }
 254
 255 #members ul{
 256     margin: 0;
 257 }
 258
 259
 260 /* Search bar */
 261
 262 form#searchform {
 263     border-radius: 0;
 264     padding-top: 50px;
 265 }
 266
 267 form#searchform #filters .jqTransformSelectWrapper,
 268 form#searchform #libraries .jqTransformSelectWrapper {
 269     position: relative;
 270     left: 0;
 271     top: 0;
 272     border-radius: 3px;
 273 }
 274
 275 form.multi-libraries #filters .jqTransformSelectWrapper{
 276     width: 49% !important;
 277     float: left;
 278 }
 279
 280 form.multi-libraries #libraries .jqTransformSelectWrapper{
 281     width: 49% !important;
 282     float: right;
 283 }
 284
 285 form.single-library #filters .jqTransformSelectWrapper,
 286 form.multi-libraries.single-field-mobile #filters .jqTransformSelectWrapper,
 287 form.multi-libraries.single-field-mobile #libraries .jqTransformSelectWrapper{
 288     width: 100% !important;
 289     float:left;
 290 }
 291
 292 form.multi-libraries .input-wrapper{
 293     margin: 0;
 294 }
 295
 296 form#searchform .input-wrapper input[type="text"]{
 297     -webkit-box-sizing: border-box;
 298     -moz-box-sizing: border-box;
 299     box-sizing: border-box;
 300     border-radius: 3px;
 301 }
 302
 303 form#searchform .input-wrapper{
 304     -webkit-box-sizing: border-box;
 305     -moz-box-sizing: border-box;
 306     box-sizing: border-box;
 307     position: absolute;
 308     top: 15px;
 309     left: 0;
 310     width: 100%;
 311     padding: 0 10px;
 312     padding-right: 46px;
 313 }
 314
 315 form#searchform input[type="submit"]{
 316     position: absolute;
 317     border-radius: 0;
 318     top: 15px;
 319     right: 10px;
 320 }
 321
 322 .jqTransformSelectWrapper{
 323     margin: 0;
 324 }
 325
 326 .jqTransformSelectWrapper div{
 327     overflow: hidden;
 328 }
 329
 330 .jqTransformSelectWrapper div span{
 331     white-space:nowrap;
 332 }
 333
 334 .jqTransformSelectWrapper div a{
 335     border-left: 5px solid #FFF;
 336     border-right: 5px solid #FFF;
 337     background-color: white;
 338     box-shadow: -3px 0 5px #FFF;
 339     right: 0px;
 340     border-radius: 8px;
 341 }
 342
 343 .jqTransformSelectWrapper ul li a{
 344     padding: 10px 0;
 345 }
 346
 347 #opac-main-search #fluid {
 348     display: block;
 349 }
 350
 351
 352 /* Login screen */
 353
 354 #holds, #opac-auth {
 355     min-width: 0;
 356     width: auto;
 357 }
 358
 359
 360 /* User */
 361
 362 body#opac-user .yui-b,
 363 body#opac-passwd .yui-b,
 364 body#opac-search-history .yui-b,
 365 body#opac-readingrecord .yui-b,
 366 body#opac-userupdate .yui-b,
 367 body#opac-account .yui-b{
 368     width: auto;
 369     float: none;
 370 }
 371
 372 body#opac-user #yui-main ,
 373 body#opac-passwd #yui-main ,
 374 body#opac-search-history #yui-main ,
 375 body#opac-readingrecord #yui-main ,
 376 body#opac-userupdate #yui-main ,
 377 body#opac-account #yui-main {
 378     float: none;
 379     margin: 0;
 380 }
 381
 382 body#opac-userupdate .yui-g .yui-u{
 383     width: 100%;
 384 }
 385
 386 body#opac-passwd fieldset,
 387 body#opac-userupdate fieldset{
 388     margin: 1em 0;
 389 }
 390
 391 .renewals {
 392     display: inline;
 393 }
 394
 395
 396 /* Tables */
 397
 398 body#opac-user #checkoutst td.links,
 399 body#opac-user thead,
 400 body#opac-holds div:not(.calendar) table>tbody>tr:nth-child(1),
 401 body#opac-readingrecord #readingrec tr:nth-child(1),
 402 body#opac-detail #holdingst thead,
 403 body#opac-detail #holdingst td.call_no a{
 404     display: none !important;
 405 }
 406
 407 body#opac-detail table#holdingst,
 408 body#opac-readingrecord table,
 409 body#opac-holds div:not(.calendar) table,
 410 body#opac-user table#holdst,
 411 body#opac-user table#checkoutst{
 412     border-right: none;
 413     border-top: none;
 414     border: none;
 415     counter-reset: item;
 416 }
 417
 418 body#opac-detail #holdingst tr,
 419 body#opac-readingrecord tr,
 420 body#opac-holds div:not(.calendar) tr,
 421 body#opac-user #holdst tr,
 422 body#opac-user #checkoutst tr{
 423     border: none;
 424     display: block;
 425     position: relative;
 426     margin-left: 10px;
 427     margin-bottom: 10px;
 428 }
 429
 430 body#opac-detail #holdingst td,
 431 body#opac-readingrecord td,
 432 body#opac-holds div:not(.calendar) td,
 433 body#opac-user #holdst td,
 434 body#opac-user #checkoutst td{
 435     display: block;
 436     border: 1px solid #DDD;
 437     position: relative;
 438 }
 439
 440 body#opac-user #checkoutst caption {
 441     display: block;
 442 }
 443
 444 body#opac-detail #holdingst tr:before,
 445 body#opac-readingrecord tr:before,
 446 body#opac-holds div:not(.calendar) tr:not(.copiesrow):before,
 447 body#opac-user #holdst tr:before,
 448 body#opac-user #checkoutst tr:before {
 449     font-weight: bold;
 450     content: counter(item) ". ";
 451     counter-increment: item;
 452     display: block;
 453     position: absolute;
 454     left: -13px;
 455     top: 4px;
 456 }
 457
 458 body#opac-detail #holdingst td:before,
 459 body#opac-readingrecord td:before,
 460 body#opac-holds div:not(.calendar) td:before,
 461 body#opac-user #holdst td:before,
 462 body#opac-user #checkoutst td:before {
 463     font-weight: bold;
 464 }
 465
 466 body#opac-detail #holdingst td.itype:before {content: "Item type : ";}
 467 body#opac-detail #holdingst td.location:before {content: "Location : ";}
 468 body#opac-detail #holdingst td.collection:before {content: "Collection : ";}
 469 body#opac-detail #holdingst td.call_no:before {content: "Call Number : ";}
 470 body#opac-detail #holdingst td.vol_info:before {content: "Vol Info : ";}
 471 body#opac-detail #holdingst td.url:before {content: "URL : ";}
 472 body#opac-detail #holdingst td.copynumber:before {content: "Copy Number : ";}
 473 body#opac-detail #holdingst td.status:before {content: "Status : ";}
 474 body#opac-detail #holdingst td.notes:before {content: "Notes : ";}
 475 body#opac-detail #holdingst td.date_due:before {content: "Date Due : ";}
 476 body#opac-detail #holdingst td.barcode:before {content: "Barcode : ";}
 477 body#opac-detail #holdingst td.holds_count:before {content: "Item holds : ";}
 478
 479 body#opac-user #checkoutst td.date_due:before {content: "Date due : ";}
 480 body#opac-user #checkoutst td.call_no:before {content: "Call No. : ";}
 481 body#opac-user #checkoutst td.fines:before {content: "Fines : ";}
 482
 483 body#opac-user #holdst td.reservedate:before {content: "Placed On : ";}
 484 body#opac-user #holdst td.expirationdate:before {content: "Expires On : ";}
 485 body#opac-user #holdst td.branch:before {content: "Pick Up Location : ";}
 486 body#opac-user #holdst td.priority:before {content: "Priority : ";}
 487 body#opac-user #holdst td.status:before {content: "Status : ";}
 488
 489 body#opac-readingrecord #readingrec td:nth-child(3):before {content: "Item Type : ";}
 490 body#opac-readingrecord #readingrec td:nth-child(4):before {content: "Call No. : ";}
 491 body#opac-readingrecord #readingrec td:nth-child(5):before {content: "Date : ";}
 492
 493 body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.hold:before {content: "Hold : ";}
 494 body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.itype:before {content: "Item Type : ";}
 495 body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.priority:before {content: "Priority : ";}
 496 body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.reserve_date:before {content: "Hold Starts On Date : ";}
 497 body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.expiration_date:before {content: "Hold Not Needed After : ";}
 498 body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.place_on_type:before {content: "Place On : ";}
 499 body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.branch:before {content: "Pickup Location : ";}
 500
 501 body#opac-holds #bibitemloop table td.copy:before {content: "Copy : ";}
 502 body#opac-holds #bibitemloop table td.itype:before {content: "Item Type : ";}
 503 body#opac-holds #bibitemloop table td.barcode:before {content: "Barcode : ";}
 504 body#opac-holds #bibitemloop table td.homebranch:before {content: "Home Library : ";}
 505 body#opac-holds #bibitemloop table td.holdingbranch:before {content: "Last Location : ";}
 506 body#opac-holds #bibitemloop table td.call_no:before {content: "Call Number : ";}
 507 body#opac-holds #bibitemloop table td.vol_info:before {content: "Vol Info : ";}
 508 body#opac-holds #bibitemloop table td.information:before {content: "Information : ";}
 509
 510
 511 /* Holds */
 512
 513 body#opac-holds tr.copiesrow {
 514     margin-left: 25px;
 515 }
 516
 517 body#opac-holds tr.copiesrow>td:nth-child(1) {
 518     display: none;
 519 }
 520
 521 body#opac-holds #bibitemloop tr {
 522     margin-bottom: 0;
 523 }
 524
 525
 526 /* User Fines table */
 527
 528 body#opac-account #useraccount th:nth-child(3),
 529 body#opac-account #useraccount td:nth-child(3) {
 530     display: none !important;
 531 }
 532
 533 body#opac-account #useraccount table {
 534     position: relative;
 535     margin-bottom: 50px;
 536 }
 537
 538 body#opac-account #useraccount tfoot {
 539     display: block;
 540     position: absolute;
 541     bottom: 0;
 542     right: 0;
 543     bottom: -23px;
 544 }
 545
 546 body#opac-account #useraccount thead th {
 547     padding: 2px 10px;
 548 }
 549
 550 body#opac-account #useraccount tbody td:nth-child(1) {
 551     min-width: 70px;
 552 }
 553
 554 body#opac-account #useraccount tbody td:nth-child(4) {
 555     text-align: right;
 556 }
 557
 558 body#opac-account #useraccount tfoot th {
 559     display: none;
 560 }
 561
 562 body#opac-account #useraccount tfoot td {
 563     border-right: 1px solid #DDD;
 564 }
 565
 566 body#opac-account #useraccount tfoot td:before {
 567     content: "Total due : "
 568 }
 569
 570
 571 /* User menu */
 572
 573 #leftmenus>#menu ul li.messaging,
 574 #leftmenus>#menu ul li.suggestions,
 575 #leftmenus>#menu ul li.privateshelves,
 576 #leftmenus>#menu {
 577     display: none;
 578 }
 579
 580 .mobile_only {
 581     display: block;
 582 }
 583
 584 body.mobile_menu form#searchform .input-wrapper{
 585     padding-left: 90px;
 586 }
 587
 588 body.mobile_menu_opened #doc3>div,
 589 body.mobile_menu_opened #main_footer>div {
 590     position: relative;
 591     left: 200px;
 592 }
 593
 594 body.mobile_menu_opened #main_footer {
 595     display: none;
 596 }
 597
 598 body.mobile_menu_opened #doc3 {
 599     overflow: hidden;
 600     min-height: 380px;
 601 }
 602
 603 body.mobile_menu_opened #ctn_rb>.ctn_in>.yui-b {
 604     position: static;
 605 }
 606
 607 body.mobile_menu_opened #leftmenus>#menu {
 608     display: block;
 609     position: absolute;
 610     width: 200px;
 611     height: 100%;
 612     top: 0;
 613     left: -201px;
 614     padding: 0;
 615     z-index: 999;
 616 }
 617
 618 #mobile_menu_button {
 619     position: absolute;
 620     cursor: pointer;
 621     background: url(../../images/mobile-menu-button.png) no-repeat scroll 50% 50%;
 622     border: 0px;
 623     font-size: 0;
 624     width: 76px;
 625     height: 38px;
 626     top: 13px;
 627     left: 6px;
 628 }