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