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