Open-ILS/src/eg2/src/styles.css

   1 /* You can add global styles to this file, and also import other style files */
   2
   3 /* bootstrap CSS only -- JS bits come from ng-bootstrap */
   4 @import '~bootstrap-5-css-only/css/bootstrap.min.css';
   5
   6 /* Locally served material icon fonts  */
   7 @import '~material-design-icons-iconfont/dist/material-design-icons.css';
   8
   9 /* BS default colors lack sufficient contrast for accessibility */
  10 :root {
  11   --blue: #0A58CA; /* $blue-600 in BS5 */
  12   --primary: #0A58CA;
  13   --bs-blue-rgb: 10,88,202;
  14   --bs-primary-rgb: 10,88,202;
  15   --green: #198754; /* $green ($green-500) in BS5 */
  16   --success: #198754;
  17   --bs-green-rgb: 25,135,84;
  18   --bs-success-rgb: 25,135,84;
  19   --cyan: #087990; /* $cyan-700 in BS5 */
  20   --info: #087990;
  21   --bs-cyan-rgb: 8,121,144;
  22   --bs-info-rgb: 8,121,144;
  23 }
  24
  25 /** BS default fonts are huge */
  26 body, .form-control, .btn, .input-group-text {
  27   /* This more or less matches the font size of the angularjs client.
  28    * The default BS4 font of 1rem is comically large.
  29    */
  30   font-size: .88rem;
  31 }
  32 h1 {
  33   font-size: 1.25rem;
  34   font-weight: normal;
  35   margin: 0
  36 }
  37 h2 {
  38   font-size: 1.25rem;
  39   font-weight: 550;
  40   color: #0D7764;
  41 }
  42 h3 {font-size: 1.15rem}
  43 h4 {font-size: 1.05rem}
  44 h5 {font-size: .95rem}
  45
  46 .small-text-1 {font-size: 85%}
  47
  48 /** Use a default link color that achieves WCAG AA
  49  *  color contrast against a white background
  50  */
  51 a {
  52   border-color: #0A58CA;
  53   color: #0A58CA;
  54 }
  55
  56 a:focus,
  57 a:hover {
  58   border-color: #0848A5;
  59   color: #0848A5;
  60 }
  61
  62 .btn-link {
  63   color: #0A58CA;
  64   padding: inherit;
  65 }
  66
  67 .btn-link:focus,
  68 .btn-link:hover {
  69   color: #0848A5;
  70 }
  71
  72 /** Ang5 routes on clicks to href's with no values, so we can't have
  73  * bare href's to force anchor styling.  Use this for anchors w/ no href.
  74  * TODO: should we style all of them?  a:not([href]) ....
  75  * */
  76  .no-href {
  77   color: #0A58CA;
  78   cursor: pointer;
  79 }
  80
  81 .no-href:hover {
  82   border-color: #0848A5;
  83   color: #0848A5;
  84 }
  85
  86 /** BS has flex utility classes, but none for specifying flex widths.
  87  *  BS class="col" is roughly equivelent to flex-1, but col-2 is not
  88  *  equivalent to flex-2, since col-2 really means 2/12 width. */
  89 .flex-1 {flex: 1}
  90 .flex-2 {flex: 2}
  91 .flex-3 {flex: 3}
  92 .flex-4 {flex: 4}
  93 .flex-5 {flex: 5}
  94 .flex-6 {flex: 6}
  95
  96 /** BS deprecated the well, but it's replacement is not quite the same.
  97  * Define our own version and expand it to a full "table".
  98  * */
  99 .well-row {
 100   display: flex;
 101 }
 102 .well-table .well-label {
 103   flex: 1;
 104   display: flex;
 105   align-items: center;
 106   margin: 4px;
 107   padding: 4px;
 108   min-height: 40px;
 109 }
 110
 111 .well-table .well-label-no-flex {
 112   display: flex;
 113   align-items: center;
 114   margin: 4px;
 115   padding: 4px;
 116   min-height: 40px;
 117 }
 118
 119 .well-table .well-value {
 120   flex: 1;
 121   display: flex;
 122   align-items: center;
 123   background-color: #f5f5f5;
 124   border-radius: 5px;
 125   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
 126   padding: 4px;
 127   margin: 4px;
 128   min-height: 40px;
 129 }
 130
 131 .btn.disabled, .btn:disabled {
 132   cursor: not-allowed;
 133 }
 134
 135 /* copies color/border/elements from above sans position elements */
 136 .well-like {
 137   background-color: #f5f5f5;
 138   border-radius: 5px;
 139   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
 140 }
 141
 142 /* usefuf for mat-icon buttons without any background or borders */
 143 .material-icon-button {
 144   /* Transparent background */
 145   border: none;
 146   background-color: rgba(0, 0, 0, 0.0);
 147   padding-left: .25rem;
 148   padding-right: .25rem; /* default .5rem */
 149 }
 150
 151 .mat-icon-in-button {
 152     line-height: inherit;
 153 }
 154
 155 .mat-icon-shrunk-in-button {
 156     line-height: inherit;
 157     font-size: 18px;
 158 }
 159
 160 .material-icons.small {
 161   font-size: 18px;
 162 }
 163
 164 .input-group .mat-icon-in-button {
 165     font-size: .88rem !important; /* useful for buttons that cuddle up with inputs */
 166 }
 167
 168 .material-icons {
 169   /** default is 24px which is pretty chunky */
 170   font-size: 22px;
 171 }
 172
 173 /* allow spans/labels to vertically orient with material icons */
 174 .label-with-material-icon {
 175     display: inline-flex;
 176     vertical-align: middle;
 177     align-items: center;
 178 }
 179
 180 /* dropdown menu link/button with no downward carrot icon */
 181 .no-dropdown-caret::after {
 182     display: none;
 183 }
 184
 185 /* Default .card padding is extreme */
 186 .tight-card .card-body,
 187 .tight-card .list-group-item {
 188   padding: .25rem;
 189 }
 190 .tight-card .card-header {
 191   padding: .5rem;
 192 }
 193
 194 @media all and (min-width: 800px) {
 195     /* scrollable typeahead menus for full-size screens */
 196     ngb-typeahead-window {
 197         height: auto;
 198         max-height: 200px;
 199         overflow-x: hidden;
 200     }
 201 }
 202
 203 /* Limit size of dropdown menus and allow for scrolling */
 204 .scrollable-menu {
 205   height: auto;
 206   max-height: 300px;
 207   overflow-y: auto;
 208   font-size: 99%;
 209 }
 210
 211 /* Items stick to the top of the page once scrolled past,
 212  * leaving room above for the nav bar */
 213 .sticky-top-with-nav {
 214   top: 48px;
 215   position: sticky;
 216   /* Sticky menus display above sticky grid headers */
 217   z-index: 2;
 218 }
 219
 220 /* --------------------------------------------------------------------------
 221 /* Form Validation CSS - https://angular.io/guide/form-validation
 222  * TODO: these colors don't fit the EG color scheme
 223  * Required valid fields are left-border styled in green-ish.
 224  * Invalid fields are left-border styled in red-ish.
 225  */
 226 .form-validated .ng-valid[required]:not(eg-combobox):not(eg-date-select),
 227 .form-validated .ng-valid.required, input[formcontrolname].ng-valid.required {
 228   border-left: 5px solid #78FA89;
 229 }
 230 .form-validated .ng-invalid:not(form):not(eg-combobox):not(eg-date-select),
 231 input[formcontrolname].ng-invalid {
 232   border-left: 5px solid #FA787E;
 233 }
 234
 235 .invalid {
 236   border-left: 5px solid #FA787E;
 237 }
 238
 239 /* Typical form CSS.
 240  * Brings font size down 5% to squeeze a bit more in.
 241  * Bold labels
 242  * Fixes some bootstrap margin funkiness with checkboxes for
 243  * better vertical alignment.
 244  * Optional faint odd or even row striping.
 245  */
 246 .common-form {
 247   font-size: 95%;
 248 }
 249 .common-form .row {
 250   margin: 5px;
 251   padding: 3px;
 252 }
 253
 254 .common-form label {
 255   font-weight: bold;
 256 }
 257
 258 .common-form.striped-even .row:nth-child(even),
 259   .striped-rows-even .row:nth-child(even) {
 260
 261   background-color: rgba(0,0,0,.03);
 262   border-top: 1px solid rgba(0,0,0,.125);
 263   border-bottom: 1px solid rgba(0,0,0,.125);
 264 }
 265
 266 .common-form.striped-odd .row:nth-child(odd),
 267   .striped-rows-odd .row:nth-child(odd) {
 268
 269   background-color: rgba(0,0,0,.03);
 270   border-top: 1px solid rgba(0,0,0,.125);
 271   border-bottom: 1px solid rgba(0,0,0,.125);
 272 }
 273
 274 option[disabled] {
 275   color: rgba(0,0,0,.3);
 276 }
 277
 278 .form-check-input[type=checkbox] {
 279   border-width: 2px;
 280   border-color: rgba(0, 0, 0, .4);
 281   min-width: 1rem;
 282   min-height: 1rem;
 283 }
 284
 285 /**
 286  * Only display the print container when printing
 287  */
 288 #eg-print-container {
 289     display: none;
 290 }
 291 @media print {
 292   head {display: none} /* just to be safe */
 293   body div:not([id="eg-print-container"]) {display: none}
 294   div {display: none}
 295   @page {size: auto} /* work around Bootrap 4's default
 296                         of A3; specifying any paper
 297                         size stops browsers from letting
 298                         the user choose portrait or
 299                         landscape. LP#1986725 */
 300   #eg-print-container {display: block}
 301   #eg-print-container div {display: block}
 302   #eg-print-container pre {border: none}
 303 }
 304
 305 /**
 306  * Make sure that comboboxes (including org select
 307  * are visible, even in nested modals.
 308  *
 309  * See https://github.com/ng-bootstrap/ng-bootstrap/issues/2505
 310  * for the upstream issue that necessitates this.
 311  */
 312 body>.dropdown-menu {z-index: 2100;}
 313
 314 /* Styles for eg-daterange-select that don't work
 315  * in the component's CSS file.
 316  */
 317 .ngb-dp-day:not(.disabled) .daterange-day.focused {
 318   background-color: #e6e6e6;
 319 }
 320 .ngb-dp-day:not(.disabled) .daterange-day.range, .ngb-dp-day:not(.disabled) .daterange-day:hover {
 321   background-color: #129a78;
 322   color: white;
 323   font-size: 1.4em;
 324 }
 325 .ngb-dp-day:not(.disabled) .daterange-day.faded {
 326   background-color: #c9efe4;
 327   color: black;
 328 }
 329
 330 /* Washed out version of the Bootstrap 'info' background.
 331  * Useful for blocking out sections of a page/form without it
 332  * being so intensely colorful */
 333 .bg-faint {
 334   /*background-color: rgb(204, 229, 255, 0.3);*/
 335
 336   /* d9edf7 */
 337   /*background-color: rgb(217, 237, 247, 0.5);*/
 338
 339   background-color: rgba(0,0,0,.03);
 340 }
 341
 342 /* Allow for larger XL dialogs */
 343 @media (min-width: 1300px) { .modal-xl { max-width: 1200px; } }
 344 @media (min-width: 1600px) { .modal-xl { max-width: 1500px; } }
 345 @media (min-width: 1700px) { .modal-xl { max-width: 1600px; } }
 346
 347 /* Default modal background color */
 348 .modal-header {
 349   background-color: var(--info);
 350 }
 351
 352 /* Contrast for dialog titles */
 353 .modal-header .modal-title {
 354   color: #fff;
 355   font-weight: 600;
 356 }
 357
 358 .modal-header .close,
 359 .modal-header .close:hover {
 360   color: #fff;
 361   opacity: 1;
 362   text-shadow: none;
 363 }
 364
 365 .modal-header .close:not(:disabled):not(.disabled):focus,
 366 .modal-header .close:not(:disabled):not(.disabled):hover {
 367   opacity: 1;
 368 }
 369
 370 /**
 371  * Make the acquisitions search form's navigation tabs match
 372  * those of the staff interface. This is a global rule because
 373  * various approaches to doing it local to the acq search component
 374  * don't work:
 375  *
 376  * 1. A rule bound to the container of the acq search tabset
 377  *    would make the entire background be grey.
 378  * 2. ":host ::ng-deep" for a local rule works, but depends on a
 379  *    mechanism that is deprecated.
 380  * 4. ng-tabset provides no hooks for custom styles for the nav-tab
 381  *    background.
 382  * 5. Turning off view encapsulation for the acq search component
 383  *    breaks a lot of styles.
 384  */
 385 #acq-search-page ngbNav .nav.nav-tabs {
 386   background-color: rgb(247, 247, 247);
 387 }
 388
 389 /**
 390  * Similar to the CSS above for the search form, set some
 391  * CSS for the line item worksheet. Ordinarily would be
 392  * preferable to just add the CSS to the worksheet component,
 393  * but untl a well-supported alternative to ng-deep comes along...
 394  */
 395 #worksheet-outlet thead th { font-weight: bold; background-color: #ccc; text-align: center; border-bottom: 1px #000 solid; border-right: 1px #000 solid; padding: 0
 396 6px; }
 397 #worksheet-outlet tbody td { text-align: left; vertical-align: top; border: 1px #999 inset; padding: 0 2px; }
 398
 399 /* style for negative monetary values */
 400 .negative-money-amount {
 401     color: red;
 402 }
 403
 404 input.medium {
 405   width: 6em;
 406 }
 407
 408 input.small {
 409   width: 4em;
 410 }
 411
 412 /*
 413  * Created initially for styled grid rows where full 'bg-danger' CSS is
 414  * intense and not especially readable, more so when rows are stacked.
 415  * http://web-accessibility.carnegiemuseums.org/design/color/
 416  */
 417 .less-intense-alert {
 418   background-color: #f9dede;
 419   color: #212121;
 420 }
 421
 422 /* Accessible button colors */
 423
 424 .btn-warning,
 425 .btn-outline-warning {
 426   border-color: #BB8402;
 427 }
 428
 429 /* other colors' focus state shadows do not need to change */
 430 .btn-warning.focus,
 431 .btn-warning:focus {
 432   border-color: #FFC107;
 433   box-shadow: 0 0 0 .2rem rgba(255, 205, 57,.5);
 434 }
 435
 436 .btn-primary {
 437   background-color: #0A58CA;
 438   border-color: #0A58CA;
 439   color: #fff;
 440 }
 441
 442 .btn-primary:hover,
 443 .btn-primary.hover,
 444 .btn-primary:focus,
 445 .btn-primary.focus {
 446   background-color: #0848A5;
 447   border-color: #0848A5;
 448   color: #fff;
 449 }
 450
 451 .btn-outline-primary {
 452   background-color: #fff;
 453   border-color: #0A58CA;
 454   color: #0A58CA;
 455 }
 456
 457 .btn-outline-primary:hover,
 458 .btn-outline-primary.hover,
 459 .btn-outline-primary:focus,
 460 .btn-outline-primary.focus {
 461   background-color: #fff;
 462   border-color: #0848A5;
 463   color: #0848A5;
 464 }
 465
 466 .btn-primary.disabled,
 467 .btn-primary:disabled {
 468   color: #fff;
 469   background-color: #156EF4;
 470   border-color: #156EF4;
 471 }
 472
 473 .btn-outline-primary.disabled,
 474 .btn-outline-primary:disabled {
 475   color: #156EF4;
 476   background-color: #fff;
 477   border-color: #156EF4;
 478 }
 479
 480 .btn-info {
 481   background-color: #087990;
 482   border-color: #087990;
 483   color: #fff;
 484 }
 485
 486 .btn-info:hover,
 487 .btn-info.hover,
 488 .btn-info:focus,
 489 .btn-info.focus {
 490   background-color: #076376;
 491   border-color: #076376;
 492   color: #fff;
 493 }
 494
 495 .btn-outline-info {
 496   background-color: #fff;
 497   border-color: #087990;
 498   color: #087990;
 499 }
 500
 501 .btn-outline-info:hover,
 502 .btn-outline-info.hover,
 503 .btn-outline-info:focus,
 504 .btn-outline-info.focus,
 505 .btn-check:active+.btn-info,
 506 .btn-check:checked+.btn-info,
 507 .btn-info.active,
 508 .btn-info:active,
 509 .show>.btn-info.dropdown-toggle {
 510   color: #fff;
 511   background-color: #076376;
 512   border-color: #076376;
 513 }
 514
 515 .btn-info.disabled,
 516 .btn-info:disabled {
 517   color: #fff;
 518   background-color: #0A92AE;
 519   border-color: #0A92AE;
 520 }
 521
 522 .btn-outline-info.disabled,
 523 .btn-outline-info:disabled {
 524   color: #0A92AE;
 525   background-color: #fff;
 526   border-color: #0A92AE;
 527 }
 528
 529 .btn-success {
 530   background-color: #198754;
 531   border-color: #198754;
 532   color: #fff;
 533 }
 534
 535 .btn-success:hover,
 536 .btn-success.hover,
 537 .btn-success:focus,
 538 .btn-success.focus {
 539   background-color: #157146;
 540   border-color: #157146;
 541   color: #fff;
 542 }
 543
 544 .btn-outline-success {
 545   background-color: #fff;
 546   border-color: #198754;
 547   color: #198754;
 548 }
 549
 550 .btn-outline-success:hover,
 551 .btn-outline-success.hover,
 552 .btn-outline-success:focus,
 553 .btn-outline-success.focus {
 554   background-color: #fff;
 555   border-color: #157146;
 556   color: #157146;
 557 }
 558
 559 .btn-success.disabled,
 560 .btn-success:disabled {
 561   color: #fff;
 562   background-color: #1D9F63;
 563   border-color: #1D9F63;
 564 }
 565
 566 .btn-outline-success.disabled,
 567 .btn-outline-success:disabled {
 568   color: #1D9F63;
 569   background-color: #fff;
 570   border-color: #1D9F63;
 571 }
 572
 573 /* Less intense, WCAG AAA-compliant badges */
 574 .badge {
 575   font-weight: 400;
 576   font-size: .9em;
 577   line-height: .9em;
 578   padding-top: .15em;
 579 }
 580
 581 .badge-primary,
 582 .badge.text-bg-primary {
 583   background: #cfe2ff;
 584   color: #062C65;
 585 }
 586
 587 .badge-secondary,
 588 .badge.text-bg-secondary {
 589   background: #dee2e6;
 590   color: #212529;
 591 }
 592
 593 .badge-success,
 594 .badge.text-bg-success {
 595   background: #dff0d8;
 596   color: #003B35;
 597 }
 598
 599 .badge-danger,
 600 .badge.text-bg-danger {
 601   background: #f8d7da;
 602   color: #58151c;
 603 }
 604
 605 .badge-warning,
 606 .badge.text-bg-warning {
 607   background: #ffe69c;
 608   color: #723809;
 609 }
 610
 611 .badge-info,
 612 .badge.text-bg-info {
 613   background: #cff4fc;
 614   color: #032830;
 615 }
 616
 617 .badge-light,
 618 .badge.text-bg-light {
 619   background: #e9ecef;
 620   color: #212529;
 621 }
 622
 623 .badge-dark,
 624 .badge.text-bg-dark {
 625   color: #000;
 626   background: #adb5bd;
 627 }
 628
 629 /*
 630  * https://getbootstrap.com/docs/5.0/migration/#content-reboot-etc
 631  * Links are underlined by default.
 632  */
 633 a {
 634   text-decoration: none;
 635 }
 636
 637 .input-group {
 638   flex-wrap: nowrap;
 639 }
 640
 641 .input-group-text label,
 642 .input-group-text button {
 643   border: 0;
 644   margin: 0;
 645   padding: 0;
 646 }
 647
 648 .form-label.input-group-text {
 649   margin-bottom: inherit;
 650 }
 651
 652 .popover-body {
 653   padding: 0;
 654 }
 655
 656 /*
 657    CSS Cursor classes
 658 */
 659 .pointer {
 660   cursor: pointer;
 661 }
 662
 663 /* Fix tooltip link colors */
 664 .tooltip .tooltip-inner a {
 665   color: inherit;
 666 }