koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss

   1 /* Bootstrap variable customizations */
   2 $headings-color: #727272;
   3 $headings-font-weight: 600;
   4 $enable-gradients: false;
   5
   6 $info:#2679cc;
   7 $danger: rgb(185, 32, 32);
   8
   9 $font-size-base: 1rem;
  10 $h1-font-size: $font-size-base * 1.5;
  11 $h2-font-size: $font-size-base * 1.4;
  12 $h3-font-size: $font-size-base * 1.3;
  13 $h4-font-size: $font-size-base * 1.2;
  14 $h5-font-size: $font-size-base * 1.1;
  15 $h6-font-size: $font-size-base;
  16
  17 $base-theme-color: #548300;
  18
  19 $color: #999999;
  20 $links: #0074AD;
  21 $links-hover: #005580;
  22 $footer-height: 45px;
  23
  24 $sci-link-color: #0076B6;
  25 $sci-heading-color: #727272;
  26
  27 $high-contrast-grey: #666666;
  28
  29 @mixin shadowed {
  30     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
  31 }
  32
  33 @mixin border-radius-all($radius: 3px) {
  34     border-radius: $radius;
  35 }
  36
  37 @mixin input-focus {
  38     border-color: $base-theme-color;
  39     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(194, 228, 136, .6);
  40 }
  41
  42 /* Bootstrap imports */
  43 @import "../../../../../node_modules/bootstrap/scss/functions";
  44 @import "../../../../../node_modules/bootstrap/scss/variables";
  45 @import "../../../../../node_modules/bootstrap/scss/mixins";
  46 @import "../../../../../node_modules/bootstrap/scss/alert";
  47 // @import "../../../../../node_modules/bootstrap/scss/badge";
  48 @import "../../../../../node_modules/bootstrap/scss/breadcrumb";
  49 @import "../../../../../node_modules/bootstrap/scss/button-group";
  50 @import "../../../../../node_modules/bootstrap/scss/buttons";
  51 @import "../../../../../node_modules/bootstrap/scss/card";
  52 // @import "../../../../../node_modules/bootstrap/scss/carousel";
  53 @import "../../../../../node_modules/bootstrap/scss/close";
  54 // @import "../../../../../node_modules/bootstrap/scss/code";
  55 @import "../../../../../node_modules/bootstrap/scss/custom-forms";
  56 @import "../../../../../node_modules/bootstrap/scss/dropdown";
  57 @import "../../../../../node_modules/bootstrap/scss/forms";
  58 @import "../../../../../node_modules/bootstrap/scss/grid";
  59 // @import "../../../../../node_modules/bootstrap/scss/images";
  60 @import "../../../../../node_modules/bootstrap/scss/input-group";
  61 // @import "../../../../../node_modules/bootstrap/scss/jumbotron";
  62 // @import "../../../../../node_modules/bootstrap/scss/list-group";
  63 // @import "../../../../../node_modules/bootstrap/scss/media";
  64 @import "../../../../../node_modules/bootstrap/scss/modal";
  65 @import "../../../../../node_modules/bootstrap/scss/navbar";
  66 @import "../../../../../node_modules/bootstrap/scss/nav";
  67 @import "../../../../../node_modules/bootstrap/scss/pagination";
  68 // @import "../../../../../node_modules/bootstrap/scss/popover";
  69 @import "../../../../../node_modules/bootstrap/scss/print";
  70 // @import "../../../../../node_modules/bootstrap/scss/progress";
  71 @import "../../../../../node_modules/bootstrap/scss/reboot";
  72 @import "../../../../../node_modules/bootstrap/scss/root";
  73 // @import "../../../../../node_modules/bootstrap/scss/spinners";
  74 @import "../../../../../node_modules/bootstrap/scss/tables";
  75 // @import "../../../../../node_modules/bootstrap/scss/toasts";
  76 @import "../../../../../node_modules/bootstrap/scss/tooltip";
  77 @import "../../../../../node_modules/bootstrap/scss/transitions";
  78 @import "../../../../../node_modules/bootstrap/scss/type";
  79 @import "../../../../../node_modules/bootstrap/scss/utilities";
  80
  81 /* Koha imports */
  82 @import "fonts";
  83
  84 // Sticky footer styles
  85 html,
  86 body {
  87     height: 100%;
  88     // The html and body elements cannot have any padding or margin.
  89 }
  90
  91 body {
  92     background: #FCF9FC none;
  93     display: flex;
  94     height: 100%;
  95     flex-direction: column;
  96 }
  97
  98 a {
  99     &:link,
 100     &:visited {
 101         color: $links;
 102     }
 103 }
 104
 105 a,
 106 button {
 107     &:hover,
 108     &:active {
 109         color: $links-hover;
 110     }
 111 }
 112
 113 caption {
 114     caption-side: top;
 115     color: #727272;
 116     font-size: 110%;
 117     font-weight: bold;
 118     margin: 0;
 119     text-align: left;
 120 }
 121
 122 .dropdown-menu-right {
 123     left: auto;
 124     right: 0;
 125 }
 126
 127 .fa {
 128     &.fa-icon-black,
 129     &.fa-icon-white {
 130         color: #000;
 131     }
 132
 133     &.danger {
 134         color: #C00;
 135     }
 136 }
 137
 138 .navbar-nav {
 139     margin-right: 0;
 140
 141     & > li {
 142         & > a {
 143             color: $high-contrast-grey;
 144             font-weight: bold;
 145         }
 146
 147         & > .dropdown-menu {
 148             &.dropdown-menu-right {
 149                 &::after {
 150                     left: unset;
 151                     right: 10px;
 152                 }
 153
 154                 &::before {
 155                     left: unset;
 156                     right: 9px;
 157                 }
 158             }
 159         }
 160     }
 161
 162 }
 163
 164 .main {
 165     background-color: #FFF;
 166     border: 1px solid #F0F3F3;
 167     margin: 15px;
 168     padding: 1rem 0;
 169 }
 170
 171
 172 .alert {
 173     &.alert-info,
 174     &.alert-warning {
 175         color: #000;
 176     }
 177
 178     &.alert-error {
 179         @extend .alert-warning
 180     }
 181 }
 182
 183 .btn-primary {
 184     background-color: $base-theme-color;
 185     border: 1px solid darken($base-theme-color, 10%);
 186     color: #FFF;
 187
 188     &:link,
 189     &:visited {
 190         color: #FFF;
 191     }
 192
 193     &:hover,
 194     &:active {
 195         background-color: $base-theme-color;
 196         border-color: lighten($base-theme-color, 5%);
 197         box-shadow: 0 0 0 1px lighten(saturate($base-theme-color, 0.5), 4);
 198         color: #FFF;
 199     }
 200
 201     &:focus {
 202         box-shadow: 0 0 0 2px lighten($base-theme-color, 10%);
 203     }
 204 }
 205
 206 .btn-danger {
 207     $base-bg: #B92020;
 208     background-color: $base-bg;
 209     background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
 210     background-position: 0;
 211     border: 1px solid darken( $base-bg, 5% );
 212     color: #FFF;
 213
 214     &:link,
 215     &:visited {
 216         color: #FFF;
 217     }
 218
 219     &:hover,
 220     &:active {
 221         $base-bg: darken( $base-bg, 2);
 222         background-color: $base-bg;
 223         background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
 224         color: #FFF;
 225     }
 226
 227     &:focus {
 228         box-shadow: 0 0 0 2px lighten($base-bg, 10%);
 229     }
 230 }
 231
 232 .btn-default,
 233 .btn-secondary {
 234     $base-bg: #e6e6e6;
 235     background-color: $base-bg;
 236     background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg);
 237     background-position: 0;
 238     border: 1px solid darken($base-bg, 20%);
 239     color: #000;
 240
 241     &:link,
 242     &:visited {
 243         color: #000;
 244     }
 245
 246     &:hover,
 247     &:active {
 248         $base-bg: darken($base-bg, 2);
 249         background-color: $base-bg;
 250         background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg);
 251         color: #000;
 252     }
 253
 254     &:focus {
 255         box-shadow: 0 0 0 2px darken($base-bg, 10%);
 256     }
 257
 258     &:not(:disabled):not(.disabled):active,
 259     &:not(:disabled):not(.disabled).active {
 260         color: #000;
 261     }
 262 }
 263
 264 input[type="text"],
 265 input[type="password"],
 266 select,
 267 textarea,
 268 .form-control {
 269     &:focus {
 270         border-color: $base-theme-color;
 271         box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6)
 272     }
 273 }
 274
 275 .dt-buttons {
 276     display: flex;
 277     flex-wrap: wrap;
 278 }
 279
 280 .dt-button {
 281     background-color: transparent;
 282     border: 0;
 283     color: lighten( $links, 1.2 );
 284     line-height: 20px;
 285     padding: 4px 12px;
 286     text-align: center;
 287     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 288     vertical-align: middle;
 289
 290     &:hover {
 291         color: $links-hover;
 292
 293         &::before {
 294             color: #338468;
 295         }
 296     }
 297
 298     &::before {
 299         color: #4466AE;
 300         font-family: FontAwesome;
 301         display: inline-block;
 302         padding-right: .5em;
 303     }
 304
 305     &.disabled {
 306         color: #333;
 307         opacity: .65;
 308         pointer-events: none;
 309
 310         &:hover {
 311             color: #333;
 312             filter: alpha(opacity=65);
 313             opacity: 0.65;
 314         }
 315
 316         i {
 317
 318             &.fa,
 319             &.fa:hover {
 320                 color: #333;
 321                 filter: alpha(opacity=65);
 322                 opacity: 0.65;
 323             }
 324         }
 325     }
 326 }
 327
 328 div.dt-button-collection button.dt-button,
 329 div.dt-button-collection div.dt-button,
 330 div.dt-button-collection a.dt-button {
 331     position: relative;
 332     left: 0;
 333     right: 0;
 334     width: 100%;
 335     display: block;
 336     float: none;
 337     margin-bottom: 4px;
 338     margin-right: 0;
 339 }
 340
 341 div.dt-button-collection {
 342     width: auto
 343 }
 344
 345 div.dt-button-collection button.dt-button {
 346     border-radius: 2px;
 347     text-align: left
 348 }
 349
 350 div.dt-button-collection button.dt-button.buttons-collection {
 351     border: 0
 352 }
 353
 354 div.dt-button-collection button.dt-button.buttons-columnVisibility {
 355     background: #fff none;
 356     border: 1px solid #eee;
 357     box-shadow: none;
 358     font-size: 1em;
 359     margin: 0 0 4px;
 360     padding: .3em .7em;
 361     text-shadow: none
 362 }
 363
 364 div.dt-button-collection button.dt-button.buttons-columnVisibility:before {
 365     color: #c00;
 366     content: "\f00d";
 367     display: inline-block;
 368     font-family: FontAwesome;
 369     margin-right: .5em;
 370     width: 1em
 371 }
 372
 373 div.dt-button-collection button.dt-button.buttons-columnVisibility:hover {
 374     background: #ffc none;
 375     border: 1px solid #999;
 376     box-shadow: none
 377 }
 378
 379 div.dt-button-collection button.dt-button.buttons-columnVisibility:hover:before {
 380     color: #538200;
 381     content: "\f00c";
 382     display: inline-block;
 383     font-family: FontAwesome;
 384     margin-right: .5em;
 385     width: 1em
 386 }
 387
 388 div.dt-button-collection button.dt-button.buttons-columnVisibility:active:not(.disabled):hover:not(.disabled) {
 389     background: transparent none;
 390     box-shadow: none
 391 }
 392
 393 div.dt-button-collection button.dt-button.buttons-columnVisibility.active {
 394     background: #e6f0f2 none;
 395     border-color: #999;
 396     box-shadow: none
 397 }
 398
 399 div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover {
 400     background: #ffc none
 401 }
 402
 403 div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover:before {
 404     color: #c00;
 405     content: "\f00d";
 406     display: inline-block;
 407     font-family: FontAwesome;
 408     margin-right: .5em;
 409     width: 1em
 410 }
 411
 412 div.dt-button-collection button.dt-button.buttons-columnVisibility.active:not(.disabled):hover:not(.disabled) {
 413     background: transparent none;
 414     box-shadow: none
 415 }
 416
 417 div.dt-button-collection button.dt-button.buttons-columnVisibility.active:before {
 418     color: $base-theme-color;
 419     content: "\f00c";
 420     display: inline-block;
 421     font-family: FontAwesome;
 422     margin-right: .5em;
 423     width: 1em;
 424 }
 425
 426 div.dt-button-collection button.dt-button.buttons-html5,
 427 div.dt-button-collection button.dt-button.buttons-print {
 428     background: #fff none;
 429     border: 1px solid #eee;
 430     box-shadow: none;
 431     font-size: 1.2em;
 432     margin: 0 0 4px;
 433     padding: .3em .7em;
 434     text-shadow: none
 435 }
 436
 437 div.dt-button-collection button.dt-button.buttons-html5:hover,
 438 div.dt-button-collection button.dt-button.buttons-print:hover {
 439     background: #ffc none
 440 }
 441
 442 div.dt-button-collection button.dt-button.buttons-html5:not(.disabled):before {
 443     color: #222bac;
 444     display: inline-block;
 445     font-family: FontAwesome;
 446     margin-right: .5em;
 447     width: 1em
 448 }
 449
 450 div.dt-button-collection button.dt-button.buttons-excel:not(.disabled):before {
 451     content: "\f1c3"
 452 }
 453
 454 div.dt-button-collection button.dt-button.buttons-csv:not(.disabled):before {
 455     content: "\f0ce"
 456 }
 457
 458 div.dt-button-collection button.dt-button.buttons-copy:not(.disabled):before {
 459     content: "\f0c5"
 460 }
 461
 462 div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before {
 463     color: #222bac;
 464     content: "\f02f";
 465     display: inline-block;
 466     font-family: FontAwesome;
 467     margin-right: .5em;
 468     width: 1em
 469 }
 470
 471 .dt-button-info {
 472     position: fixed;
 473     top: 50%;
 474     left: 50%;
 475     width: 400px;
 476     margin-top: -100px;
 477     margin-left: -200px;
 478     background-color: #FFF;
 479     border: 2px solid $links-hover;
 480     box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
 481     border-radius: 3px;
 482     text-align: center;
 483     z-index: 21;
 484
 485     h2 {
 486         padding: 0.5em;
 487         margin: 0;
 488         font-weight: normal;
 489         border-bottom: 1px solid #ddd;
 490         background-color: #f3f3f3;
 491     }
 492
 493     &>div {
 494         padding: 1em;
 495     }
 496 }
 497
 498 .buttons-print {
 499     &::before {
 500         content: "\f02f";
 501     }
 502 }
 503
 504 .buttons-csv {
 505     &::before {
 506         content: "\f0ce";
 507     }
 508 }
 509
 510 .buttons-copy {
 511     &::before {
 512         content: "\f0c5";
 513     }
 514 }
 515
 516 .buttons-ical {
 517     &::before {
 518         content: "\f073";
 519     }
 520
 521     &:hover {
 522         text-decoration: none;
 523     }
 524 }
 525
 526 .buttons-renew,
 527 .buttons-renewall {
 528     &:hover {
 529         i.fa {
 530             color: #338468;
 531         }
 532     }
 533 }
 534
 535 .buttons-colvis {
 536     &::before {
 537         content: "\f013";
 538     }
 539 }
 540
 541 .table_controls {
 542     display: flex;
 543
 544     .dataTables_filter {
 545         label {
 546             input {
 547                 margin-left: 5px;
 548             }
 549         }
 550
 551         input {
 552             @extend .form-control;
 553             @extend .form-control-sm;
 554             display: inline-block;
 555             width: auto;
 556
 557             &:focus {
 558                 @include input-focus;
 559             }
 560         }
 561     }
 562 }
 563
 564 .table_entries {
 565     margin-left: 5px;
 566     padding: 5px 0;
 567     font-size: 90%;
 568     color: #797979;
 569 }
 570
 571 [class^="icon-"] {
 572     vertical-align: 0;
 573 }
 574 [class*=" icon-"] {
 575     vertical-align: 0;
 576 }
 577
 578 .table {
 579     .sorting_asc {
 580         background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+") no-repeat scroll 100% 80% #E2E8E8;
 581         padding-right: 19px;
 582     }
 583
 584     .sorting_desc {
 585         background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=") no-repeat scroll 100% 80% #E2E8E8;
 586         padding-right: 19px;
 587     }
 588
 589     .sorting {
 590         background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==") no-repeat scroll 100% 75% #E2E8E8;
 591         padding-right: 19px;
 592     }
 593
 594     .nosort,
 595     .nosort.sorting_asc,
 596     .nosort.sorting_desc,
 597     .nosort.sorting {
 598         background: #E2E8E8 none;
 599         padding-right: 19px;
 600     }
 601
 602     th,
 603     td {
 604         line-height: 135%;
 605     }
 606 }
 607
 608 /* jQuery UI standard tabs */
 609 .ui-tabs-nav .ui-tabs-active a,
 610 .ui-tabs-nav a:hover,
 611 .ui-tabs-nav a:focus,
 612 .ui-tabs-nav a:active,
 613 .ui-tabs-nav span.a {
 614     background: none repeat scroll 0 0 transparent;
 615     outline: 0 none;
 616 }
 617
 618 .ui-widget,
 619 .ui-widget a,
 620 .ui-widget input,
 621 .ui-widget select,
 622 .ui-widget textarea,
 623 .ui-widget button {
 624     font-family: 'NotoSans';
 625     font-size: inherit;
 626 }
 627
 628 ul {
 629     &.ui-tabs-nav {
 630         li {
 631             list-style: none;
 632         }
 633     }
 634 }
 635
 636 .ui-tabs {
 637     .ui-tabs-nav {
 638         li {
 639             background: #F0F3F3 none;
 640             border-color: #D8D8D8;
 641             margin-right: .4em;
 642
 643             &.ui-tabs-active {
 644                 background-color: #FFF;
 645                 border: 1px solid #D8D8D8;
 646                 border-bottom: 0;
 647
 648                 a {
 649                     color: #727272;
 650                     font-weight: bold;
 651                 }
 652
 653                 &.ui-state-hover {
 654                     background: #FFF none;
 655                     &.ui-state-active {
 656                         background: #FFF none;
 657                     }
 658                 }
 659             }
 660
 661             &.ui-state-default.ui-state-hover {
 662                 background: #F3F3F3 none;
 663             }
 664         }
 665     }
 666
 667     .ui-tabs-panel {
 668         border: 1px solid #D8D8D8;
 669         margin-bottom: 1em;
 670     }
 671
 672     &.ui-widget-content {
 673         background: transparent none;
 674         border: 0;
 675     }
 676
 677     .ui-state-default {
 678         a {
 679             &:link {
 680                 color: #006699;
 681             }
 682
 683             &:visited {
 684                 color: #006699;
 685             }
 686         }
 687     }
 688
 689     .ui-state-hover a {
 690         &:link {
 691             color: #990033;
 692         }
 693
 694         &:visited {
 695             color: #990033;
 696         }
 697     }
 698 }
 699
 700 .ui-tabs-nav {
 701     &.ui-widget-header {
 702         background: none;
 703         border: 0;
 704     }
 705 }
 706
 707 .ui-corner-top {
 708     border-radius: 0px;
 709 }
 710
 711 .statictabs {
 712     ul {
 713         background: none repeat scroll 0 0 transparent;
 714         border: 0 none;
 715         border-bottom-left-radius: 4px;
 716         border-bottom-right-radius: 4px;
 717         border-top-left-radius: 4px;
 718         border-top-right-radius: 4px;
 719         color: #222222;
 720         font-size: 100%;
 721         font-weight: bold;
 722         line-height: 1.3;
 723         list-style: none outside none;
 724         margin: 0;
 725         outline: 0 none;
 726         padding: .2em .2em 0;
 727         text-decoration: none;
 728
 729         &::before {
 730             content: "";
 731             display: table;
 732         }
 733
 734         &::after {
 735             clear: both;
 736             content: "";
 737             display: table;
 738         }
 739     }
 740
 741     li {
 742         background: none repeat scroll 0 0 #E6F0F2;
 743         border: 1px solid #B9D8D9;
 744         border-bottom: 0 none !important;
 745         border-top-left-radius: 4px;
 746         border-top-right-radius: 4px;
 747         color: #555555;
 748         float: left;
 749         font-weight: normal;
 750         list-style: none outside none;
 751         margin-bottom: 0;
 752         margin-right: .4em;
 753         padding: 0;
 754         position: relative;
 755         top: 1px;
 756         white-space: nowrap;
 757
 758         &.active {
 759             background-color: #FFFFFF;
 760             color: #212121;
 761             font-weight: normal;
 762             padding-bottom: 1px;
 763
 764             a {
 765                 background: none repeat scroll 0 0 transparent;
 766                 color: #000000;
 767                 cursor: text;
 768                 font-weight: bold;
 769                 outline: 0 none;
 770             }
 771         }
 772
 773         a {
 774             color: darken( $links, 5% );
 775             cursor: pointer;
 776             float: left;
 777             padding: .5em 1em;
 778             text-decoration: none;
 779
 780             &:hover {
 781                 background-color: #EDF4F5;
 782                 border-top-left-radius: 4px;
 783                 border-top-right-radius: 4px;
 784                 color: #538200;
 785             }
 786         }
 787     }
 788
 789     .tabs-container {
 790         background: none repeat scroll 0 0 transparent;
 791         border: 1px solid #B9D8D9;
 792         border-bottom-left-radius: 4px;
 793         border-bottom-right-radius: 4px;
 794         color: #222222;
 795         display: block;
 796         padding: 1em 1.4em;
 797     }
 798 }
 799
 800 /* End jQueryUI tab styles */
 801
 802 /* jQuery UI Datepicker */
 803
 804 .ui-datepicker {
 805     @include shadowed;
 806     table {
 807         border: 0;
 808         border-collapse: collapse;
 809         font-size: .9em;
 810         margin: 0 0 .4em;
 811         width: 100%;
 812     }
 813
 814     th {
 815         background: transparent none;
 816         border: 0;
 817         font-weight: bold;
 818         padding: .7em .3em;
 819         text-align: center;
 820     }
 821 }
 822
 823 .ui-datepicker-trigger {
 824     margin: 0 3px;
 825     vertical-align: middle;
 826 }
 827
 828 /* End jQueryUI datepicker styles */
 829
 830
 831 /* jQueryUI Core */
 832
 833 .ui-widget-content {
 834     background: #FFFFFF none;
 835     border: 1px solid #AAA;
 836     color: #222222;
 837 }
 838
 839 .ui-widget-header {
 840     background: #E6F0F2 none;
 841     border: 1px solid #AAA;
 842     color: #222222;
 843     font-weight: bold;
 844 }
 845
 846 .ui-state-default,
 847 .ui-widget-content .ui-state-default,
 848 .ui-widget-header .ui-state-default {
 849     background: #F4F8F9 none;
 850     border: 1px solid #AAA;
 851     color: #555555;
 852     font-weight: normal;
 853 }
 854
 855 .ui-state-hover,
 856 .ui-widget-content .ui-state-hover,
 857 .ui-widget-header .ui-state-hover,
 858 .ui-state-focus,
 859 .ui-widget-content .ui-state-focus,
 860 .ui-widget-header .ui-state-focus {
 861     background: #E6F0F2 none;
 862     border: 1px solid #AAA;
 863     color: #212121;
 864     font-weight: normal;
 865 }
 866
 867 .ui-state-active,
 868 .ui-widget-content .ui-state-active,
 869 .ui-widget-header .ui-state-active {
 870     background: #FFFFFF none;
 871     border: 1px solid #AAAAAA;
 872     color: #212121;
 873     font-weight: normal;
 874 }
 875
 876 .ui-state-highlight,
 877 .ui-widget-content .ui-state-highlight,
 878 .ui-widget-header .ui-state-highlight {
 879     background: #FBF9EE;
 880     border: 1px solid #FCEFA1;
 881     color: #363636;
 882 }
 883
 884 .ui-state-error,
 885 .ui-widget-content .ui-state-error,
 886 .ui-widget-header .ui-state-error {
 887     background: #FEF1EC;
 888     border: 1px solid #CD0A0A;
 889     color: #CD0A0A;
 890 }
 891
 892 /* end jQueryUI core */
 893
 894 .close {
 895     color: #0088CC;
 896     filter: none;
 897     float: none;
 898     font-size: inherit;
 899     font-weight: normal;
 900     opacity: inherit;
 901     position: inherit;
 902     right: auto;
 903     text-shadow: none;
 904     top: auto;
 905 }
 906
 907 .close:hover {
 908     color: $links-hover;
 909     filter: inherit;
 910     font-size: inherit;
 911     opacity: inherit;
 912 }
 913
 914 /* Redefine a new style for Bootstrap's class "close" since we use that already */
 915 /* Use <a class="closebtn" href="#">&times;</a> */
 916
 917 .modal-header .closebtn {
 918     margin-top: 2px;
 919 }
 920
 921 .closebtn {
 922     color: #000000;
 923     float: right;
 924     font-size: 20px;
 925     font-weight: bold;
 926     line-height: 20px;
 927     opacity: .2;
 928     text-shadow: 0 1px 0 #FFFFFF;
 929
 930     &:hover {
 931         color: #000000;
 932         cursor: pointer;
 933         opacity: .4;
 934         text-decoration: none;
 935     }
 936 }
 937
 938 button {
 939     &.closebtn {
 940         background: transparent;
 941         border: 0;
 942         cursor: pointer;
 943         padding: 0;
 944     }
 945
 946     &.remove {
 947         &:hover {
 948             color: #900;
 949
 950             i {
 951                 &.fa {
 952                     color: #c60000;
 953                 }
 954             }
 955         }
 956     }
 957 }
 958
 959 .btn-link {
 960     color: $links;
 961
 962     &:focus,
 963     &:hover {
 964         text-decoration: none;
 965     }
 966
 967     &:focus {
 968         box-shadow: 0 0 0 1px lighten($links, 20%);
 969     }
 970
 971     &.btn-lg {
 972         font-size: 100%;
 973     }
 974 }
 975
 976 .btn.disabled,
 977 .btn[disabled] {
 978     &:hover {
 979         color: #333;
 980         filter: alpha(opacity=65);
 981         opacity: 0.65;
 982     }
 983     i {
 984         &.fa,
 985         &.fa:hover {
 986             color: #333;
 987             filter: alpha(opacity=65);
 988             opacity: 0.65;
 989         }
 990     }
 991 }
 992
 993 .modal {
 994     form {
 995         margin: 0;
 996     }
 997 }
 998
 999 .nav-link {
1000     &.active {
1001         font-weight: bold;
1002     }
1003 }
1004
1005 .tab-content {
1006     padding: 15px 0;
1007 }
1008
1009 #logo {
1010     background: transparent url( "../images/koha-green-logo.svg" ) no-repeat scroll 0%;
1011     border: 0;
1012     float: left !important;
1013     margin: 0;
1014     padding: 0;
1015     width: 100px;
1016
1017     a {
1018         border: 0;
1019         cursor: pointer;
1020         display: block;
1021         height: 0 !important;
1022         margin: 0;
1023         overflow: hidden;
1024         padding: 40px 0 0;
1025         text-decoration: none;
1026         width: 100px;
1027         &:focus {
1028             background-color: transparent;
1029         }
1030     }
1031 }
1032
1033 #changelanguage {
1034     background-color: #FFF;
1035     border-top: 1px solid #EEE;
1036     padding: 0 1rem;
1037     flex-shrink: 0;
1038
1039     .navbar-text {
1040         font-weight: bold;
1041     }
1042 }
1043
1044 .fonts-loaded {
1045     body,
1046     button,
1047     input,
1048     optgroup,
1049     option,
1050     select,
1051     textarea {
1052         font-family: "NotoSans", sans-serif;
1053     }
1054 }
1055
1056 .navbar {
1057     .divider-vertical {
1058         border-left-color: #FCF9FC;
1059         border-right-color: #FCF9FC;
1060     }
1061
1062     .nav {
1063         li {
1064             &.dropdown {
1065                 > a {
1066                     &:focus {
1067                         .caret {
1068                             border-bottom-color: $base-theme-color;
1069                             border-top-color: $base-theme-color;
1070                         }
1071                     }
1072
1073                     &:hover {
1074                         .caret {
1075                             border-bottom-color: $base-theme-color;
1076                             border-top-color: $base-theme-color;
1077                         }
1078                     }
1079                 }
1080             }
1081         }
1082     }
1083 }
1084
1085 .navbar-inverse {
1086     .brand {
1087         color: #9FE1FF;
1088         font-weight: bold;
1089     }
1090
1091     .navbar-inner {
1092         background: #FCF9FC none;
1093         border-color: #FCF9FC;
1094         box-shadow: none;
1095
1096         ul {
1097             &.dropdown-menu {
1098                 a {
1099                     &:hover {
1100                         color: #FFF;
1101                     }
1102                 }
1103             }
1104         }
1105
1106         li {
1107             > a {
1108                 color: #727272;
1109                 font-weight: bold;
1110                 text-shadow: none;
1111
1112                 &:hover {
1113                     color: $base-theme-color;
1114                 }
1115
1116                 &:focus {
1117                     color: $base-theme-color;
1118                 }
1119             }
1120
1121             &.dropdown {
1122                 > a {
1123                     &:hover {
1124                         .caret {
1125                             border-bottom-color: $base-theme-color;
1126                             border-top-color: $base-theme-color;
1127                         }
1128                     }
1129
1130                     &:focus {
1131                         .caret {
1132                             border-bottom-color: $base-theme-color;
1133                             border-top-color: $base-theme-color;
1134                         }
1135                     }
1136                 }
1137
1138                 &.open {
1139                     > .dropdown-toggle {
1140                         background-color: transparent;
1141                         color: $base-theme-color;
1142
1143                         .caret {
1144                             border-bottom-color: $base-theme-color;
1145                             border-top-color: $base-theme-color;
1146
1147                             &:hover {
1148                                 border-bottom-color: $base-theme-color;
1149                                 border-top-color: $base-theme-color;
1150                             }
1151                         }
1152                     }
1153                 }
1154             }
1155         }
1156     }
1157 }
1158
1159 .navbar-inner {
1160     background: #FCF9FC none;
1161 }
1162
1163 .navbar-fixed-bottom {
1164     &.navbar-static-bottom {
1165         position: static;
1166     }
1167
1168     .navbar-inner {
1169         box-shadow: none;
1170         min-height: $footer-height;
1171     }
1172 }
1173
1174 // Wrapper for page content to push down footer
1175 #wrap {
1176     height: auto !important;
1177     height: 100%;
1178     margin: 0 auto -#{$footer-height + 1};
1179     // Negative indent footer by its height
1180     min-height: 100%;
1181     padding-left: 40px;
1182     padding-right: 40px;
1183 }
1184
1185 #changelanguage {
1186     clear: both;
1187     // Set the fixed height of the footer here
1188     min-height: $footer-height;
1189
1190     .nav {
1191         > .active {
1192             > p {
1193                 padding: 0 15px;
1194             }
1195         }
1196     }
1197 }
1198
1199 #i18nMenu {
1200     margin-left: 1em;
1201
1202     li {
1203         font-size: 85%;
1204
1205         a {
1206             &:hover {
1207                 color: $base-theme-color;
1208             }
1209         }
1210
1211         li {
1212             font-size: 100%;
1213
1214             > a {
1215                 font-size: 100%;
1216
1217                 &:hover {
1218                     color: #FFF;
1219                 }
1220             }
1221
1222         }
1223
1224         a {
1225             color: $links;
1226         }
1227     }
1228
1229     .dropdown-menu {
1230         li {
1231             p {
1232                 clear: both;
1233                 display: block;
1234                 font-weight: normal;
1235                 line-height: 20px;
1236                 padding: 3px 20px;
1237                 white-space: nowrap;
1238             }
1239         }
1240     }
1241 }
1242
1243 .dropdown-menu {
1244     border-radius: 0px;
1245     > li {
1246         > a {
1247             font-size: 90%;
1248             &:hover {
1249                 background: $base-theme-color none;
1250             }
1251             &:focus {
1252                 background: $base-theme-color none;
1253             }
1254         }
1255     }
1256 }
1257
1258 .dropdown-item:active {
1259     background-color: $links;
1260 }
1261
1262 #koha_url {
1263     p {
1264         color: $high-contrast-grey;
1265         float: right;
1266         margin: 0;
1267     }
1268 }
1269
1270 #wrapper {
1271     flex: 1 0 auto;
1272     padding-left: 40px;
1273     padding-right: 40px;
1274 }