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