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 /* Default modal background color */
 330 .modal-header {
 331   background-color: var(--info);
 332 }
 333
 334 /* Contrast for dialog titles */
 335 .modal-header .modal-title {
 336   color: #fff;
 337   font-weight: 600;
 338 }
 339
 340 .modal-header .close,
 341 .modal-header .close:hover {
 342   color: #fff;
 343   opacity: 1;
 344   text-shadow: none;
 345 }
 346
 347 .modal-header .close:not(:disabled):not(.disabled):focus,
 348 .modal-header .close:not(:disabled):not(.disabled):hover {
 349   opacity: 1;
 350 }
 351
 352 /**
 353  * Make the acquisitions search form's navigation tabs match
 354  * those of the staff interface. This is a global rule because
 355  * various approaches to doing it local to the acq search component
 356  * don't work:
 357  *
 358  * 1. A rule bound to the container of the acq search tabset
 359  *    would make the entire background be grey.
 360  * 2. ":host ::ng-deep" for a local rule works, but depends on a
 361  *    mechanism that is deprecated.
 362  * 4. ng-tabset provides no hooks for custom styles for the nav-tab
 363  *    background.
 364  * 5. Turning off view encapsulation for the acq search component
 365  *    breaks a lot of styles.
 366  */
 367 #acq-search-page ngbNav .nav.nav-tabs {
 368   background-color: rgb(247, 247, 247);
 369 }
 370
 371 /**
 372  * Similar to the CSS above for the search form, set some
 373  * CSS for the line item worksheet. Ordinarily would be
 374  * preferable to just add the CSS to the worksheet component,
 375  * but untl a well-supported alternative to ng-deep comes along...
 376  */
 377 #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
 378 6px; }
 379 #worksheet-outlet tbody td { text-align: left; vertical-align: top; border: 1px #999 inset; padding: 0 2px; }
 380
 381 /* style for negative monetary values */
 382 .negative-money-amount {
 383     color: red;
 384 }
 385
 386 input.medium {
 387   width: 6em;
 388 }
 389
 390 input.small {
 391   width: 4em;
 392 }
 393
 394 /*
 395  * Created initially for styled grid rows where full 'bg-danger' CSS is
 396  * intense and not especially readable, more so when rows are stacked.
 397  * http://web-accessibility.carnegiemuseums.org/design/color/
 398  */
 399 .less-intense-alert {
 400   background-color: #f9dede;
 401   color: #212121;
 402 }
 403
 404 /* Accessible button colors */
 405
 406 .btn-warning,
 407 .btn-outline-warning {
 408   border-color: #BB8402;
 409 }
 410
 411 /* other colors' focus state shadows do not need to change */
 412 .btn-warning.focus,
 413 .btn-warning:focus {
 414   border-color: #FFC107;
 415   box-shadow: 0 0 0 .2rem rgba(255, 205, 57,.5);
 416 }
 417
 418 .btn-primary {
 419   background-color: #0A58CA;
 420   border-color: #0A58CA;
 421 }
 422
 423 .btn-primary:hover,
 424 .btn-primary.hover,
 425 .btn-primary:focus,
 426 .btn-primary.focus {
 427   background-color: #0848A5;
 428   border-color: #0848A5;
 429 }
 430
 431 .btn-outline-primary {
 432   border-color: #0A58CA;
 433 }
 434
 435 .btn-outline-primary:hover,
 436 .btn-outline-primary.hover,
 437 .btn-outline-primary:focus,
 438 .btn-outline-primary.focus {
 439   border-color: #0848A5;
 440 }
 441
 442 .btn-info {
 443   background-color: #087990;
 444   border-color: #087990;
 445   color: #fff;
 446 }
 447
 448 .btn-info:hover,
 449 .btn-info.hover,
 450 .btn-info:focus,
 451 .btn-info.focus {
 452   background-color: #076376;
 453   border-color: #076376;
 454 }
 455
 456 .btn-outline-info {
 457   border-color: #087990;
 458 }
 459
 460 .btn-outline-info:hover,
 461 .btn-outline-info.hover,
 462 .btn-outline-info:focus,
 463 .btn-outline-info.focus {
 464   border-color: #076376;
 465 }
 466
 467 .btn-success {
 468   background-color: #198754;
 469   border-color: #198754;
 470 }
 471
 472 .btn-success:hover,
 473 .btn-success.hover,
 474 .btn-success:focus,
 475 .btn-success.focus {
 476   background-color: #157146;
 477   border-color: #157146;
 478 }
 479
 480 .btn-outline-success {
 481   border-color: #198754;
 482 }
 483
 484 .btn-outline-success:hover,
 485 .btn-outline-success.hover,
 486 .btn-outline-success:focus,
 487 .btn-outline-success.focus {
 488   border-color: #157146;
 489 }
 490
 491 /* Less intense, WCAG AAA-compliant badges */
 492 .badge {
 493   font-weight: 400;
 494   font-size: .9em;
 495   line-height: .9em;
 496   padding-top: .15em;
 497 }
 498
 499 .badge-primary,
 500 .badge.text-bg-primary {
 501   background: #cfe2ff;
 502   color: #062C65;
 503 }
 504
 505 .badge-secondary,
 506 .badge.text-bg-secondary {
 507   background: #dee2e6;
 508   color: #212529;
 509 }
 510
 511 .badge-success,
 512 .badge.text-bg-success {
 513   background: #dff0d8;
 514   color: #003B35;
 515 }
 516
 517 .badge-danger,
 518 .badge.text-bg-danger {
 519   background: #f8d7da;
 520   color: #58151c;
 521 }
 522
 523 .badge-warning,
 524 .badge.text-bg-warning {
 525   background: #ffe69c;
 526   color: #723809;
 527 }
 528
 529 .badge-info,
 530 .badge.text-bg-info {
 531   background: #cff4fc;
 532   color: #032830;
 533 }
 534
 535 .badge-light,
 536 .badge.text-bg-light {
 537   background: #e9ecef;
 538   color: #212529;
 539 }
 540
 541 .badge-dark,
 542 .badge.text-bg-dark {
 543   color: #000;
 544   background: #adb5bd;
 545 }
 546
 547 /*
 548  * https://getbootstrap.com/docs/5.0/migration/#content-reboot-etc
 549  * Links are underlined by default.
 550  */
 551 a {
 552   text-decoration: none;
 553 }
 554
 555 .input-group {
 556   flex-wrap: nowrap;
 557 }
 558
 559 .input-group-text label,
 560 .input-group-text button {
 561   border: 0;
 562   margin: 0;
 563   padding: 0;
 564 }
 565
 566 .form-label.input-group-text {
 567   margin-bottom: inherit;
 568 }
 569
 570 .popover-body {
 571   padding: 0;
 572 }
 573
 574 /*
 575    CSS Cursor classes
 576 */
 577 .pointer {
 578   cursor: pointer;
 579 }