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 fonts are huge */
  10 body, .form-control, .btn, .input-group-text {
  11   /* This more or less matches the font size of the angularjs client.
  12    * The default BS4 font of 1rem is comically large.
  13    */
  14   font-size: .88rem;
  15 }
  16 h2 {
  17   font-size: 1.25rem;
  18   font-weight: 550;
  19   color: #0D7764;
  20 }
  21 h3 {font-size: 1.15rem}
  22 h4 {font-size: 1.05rem}
  23 h5 {font-size: .95rem}
  24
  25 .small-text-1 {font-size: 85%}
  26
  27 /** Use a default link color that achieves WCAG AAA
  28  *  color contrast against a white background
  29  */
  30 a {
  31   color: #255a88;
  32 }
  33
  34 /** Ang5 routes on clicks to href's with no values, so we can't have
  35  * bare href's to force anchor styling.  Use this for anchors w/ no href.
  36  * TODO: should we style all of them?  a:not([href]) ....
  37  * */
  38 .no-href {
  39   cursor: pointer;
  40   color: #007bff;
  41 }
  42
  43
  44 /** BS has flex utility classes, but none for specifying flex widths.
  45  *  BS class="col" is roughly equivelent to flex-1, but col-2 is not
  46  *  equivalent to flex-2, since col-2 really means 2/12 width. */
  47 .flex-1 {flex: 1}
  48 .flex-2 {flex: 2}
  49 .flex-3 {flex: 3}
  50 .flex-4 {flex: 4}
  51 .flex-5 {flex: 5}
  52 .flex-6 {flex: 6}
  53
  54 /** BS deprecated the well, but it's replacement is not quite the same.
  55  * Define our own version and expand it to a full "table".
  56  * */
  57 .well-row {
  58   display: flex;
  59 }
  60 .well-table .well-label {
  61   flex: 1;
  62   display: flex;
  63   align-items: center;
  64   margin: 4px;
  65   padding: 4px;
  66   min-height: 40px;
  67 }
  68
  69 .well-table .well-label-no-flex {
  70   display: flex;
  71   align-items: center;
  72   margin: 4px;
  73   padding: 4px;
  74   min-height: 40px;
  75 }
  76
  77 .well-table .well-value {
  78   flex: 1;
  79   display: flex;
  80   align-items: center;
  81   background-color: #f5f5f5;
  82   border-radius: 5px;
  83   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
  84   padding: 4px;
  85   margin: 4px;
  86   min-height: 40px;
  87 }
  88
  89 .btn.disabled, .btn:disabled {
  90   cursor: not-allowed;
  91 }
  92
  93 /* copies color/border/elements from above sans position elements */
  94 .well-like {
  95   background-color: #f5f5f5;
  96   border-radius: 5px;
  97   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
  98 }
  99
 100 /* usefuf for mat-icon buttons without any background or borders */
 101 .material-icon-button {
 102   /* Transparent background */
 103   border: none;
 104   background-color: rgba(0, 0, 0, 0.0);
 105   padding-left: .25rem;
 106   padding-right: .25rem; /* default .5rem */
 107 }
 108
 109 .mat-icon-in-button {
 110     line-height: inherit;
 111 }
 112
 113 .mat-icon-shrunk-in-button {
 114     line-height: inherit;
 115     font-size: 18px;
 116 }
 117
 118 .material-icons.small {
 119   font-size: 18px;
 120 }
 121
 122 .input-group .mat-icon-in-button {
 123     font-size: .88rem !important; /* useful for buttons that cuddle up with inputs */
 124 }
 125
 126 .material-icons {
 127   /** default is 24px which is pretty chunky */
 128   font-size: 22px;
 129 }
 130
 131 /* allow spans/labels to vertically orient with material icons */
 132 .label-with-material-icon {
 133     display: inline-flex;
 134     vertical-align: middle;
 135     align-items: center;
 136 }
 137
 138 /* dropdown menu link/button with no downward carrot icon */
 139 .no-dropdown-caret::after {
 140     display: none;
 141 }
 142
 143 /* Default .card padding is extreme */
 144 .tight-card .card-body,
 145 .tight-card .list-group-item {
 146   padding: .25rem;
 147 }
 148 .tight-card .card-header {
 149   padding: .5rem;
 150 }
 151
 152 @media all and (min-width: 800px) {
 153     /* scrollable typeahead menus for full-size screens */
 154     ngb-typeahead-window {
 155         height: auto;
 156         max-height: 200px;
 157         overflow-x: hidden;
 158     }
 159 }
 160
 161 /* Limit size of dropdown menus and allow for scrolling */
 162 .scrollable-menu {
 163   height: auto;
 164   max-height: 300px;
 165   overflow-y: auto;
 166   font-size: 99%;
 167 }
 168
 169 /* Items stick to the top of the page once scrolled past,
 170  * leaving room above for the nav bar */
 171 .sticky-top-with-nav {
 172   top: 48px;
 173   position: sticky;
 174   /* Sticky menus display above sticky grid headers */
 175   z-index: 2;
 176 }
 177
 178 /* --------------------------------------------------------------------------
 179 /* Form Validation CSS - https://angular.io/guide/form-validation
 180  * TODO: these colors don't fit the EG color scheme
 181  * Required valid fields are left-border styled in green-ish.
 182  * Invalid fields are left-border styled in red-ish.
 183  */
 184 .form-validated .ng-valid[required]:not(eg-combobox):not(eg-date-select),
 185 .form-validated .ng-valid.required, input[formcontrolname].ng-valid {
 186   border-left: 5px solid #78FA89;
 187 }
 188 .form-validated .ng-invalid:not(form):not(eg-combobox):not(eg-date-select),
 189 input[formcontrolname].ng-invalid {
 190   border-left: 5px solid #FA787E;
 191 }
 192
 193 .invalid {
 194   border-left: 5px solid #FA787E;
 195 }
 196
 197 /* Typical form CSS.
 198  * Brings font size down 5% to squeeze a bit more in.
 199  * Bold labels
 200  * Fixes some bootstrap margin funkiness with checkboxes for
 201  * better vertical alignment.
 202  * Optional faint odd or even row striping.
 203  */
 204 .common-form {
 205   font-size: 95%;
 206 }
 207 .common-form .row {
 208   margin: 5px;
 209   padding: 3px;
 210 }
 211
 212 .common-form label {
 213   font-weight: bold;
 214 }
 215
 216 .common-form.striped-even .row:nth-child(even),
 217   .striped-rows-even .row:nth-child(even) {
 218
 219   background-color: rgba(0,0,0,.03);
 220   border-top: 1px solid rgba(0,0,0,.125);
 221   border-bottom: 1px solid rgba(0,0,0,.125);
 222 }
 223
 224 .common-form.striped-odd .row:nth-child(odd),
 225   .striped-rows-odd .row:nth-child(odd) {
 226
 227   background-color: rgba(0,0,0,.03);
 228   border-top: 1px solid rgba(0,0,0,.125);
 229   border-bottom: 1px solid rgba(0,0,0,.125);
 230 }
 231
 232 /**
 233  * Only display the print container when printing
 234  */
 235 #eg-print-container {
 236     display: none;
 237 }
 238 @media print {
 239   head {display: none} /* just to be safe */
 240   body div:not([id="eg-print-container"]) {display: none}
 241   div {display: none}
 242   @page {size: auto} /* work around Bootrap 4's default
 243                         of A3; specifying any paper
 244                         size stops browsers from letting
 245                         the user choose portrait or
 246                         landscape. LP#1986725 */
 247   #eg-print-container {display: block}
 248   #eg-print-container div {display: block}
 249   #eg-print-container pre {border: none}
 250 }
 251
 252 /**
 253  * Make sure that comboboxes (including org select
 254  * are visible, even in nested modals.
 255  *
 256  * See https://github.com/ng-bootstrap/ng-bootstrap/issues/2505
 257  * for the upstream issue that necessitates this.
 258  */
 259 body>.dropdown-menu {z-index: 2100;}
 260
 261 /* Styles for eg-daterange-select that don't work
 262  * in the component's CSS file.
 263  */
 264 .ngb-dp-day:not(.disabled) .daterange-day.focused {
 265   background-color: #e6e6e6;
 266 }
 267 .ngb-dp-day:not(.disabled) .daterange-day.range, .ngb-dp-day:not(.disabled) .daterange-day:hover {
 268   background-color: #129a78;
 269   color: white;
 270   font-size: 1.4em;
 271 }
 272 .ngb-dp-day:not(.disabled) .daterange-day.faded {
 273   background-color: #c9efe4;
 274   color: black;
 275 }
 276
 277 /* Washed out version of the Bootstrap 'info' background.
 278  * Useful for blocking out sections of a page/form without it
 279  * being so intensely colorful */
 280 .bg-faint {
 281   /*background-color: rgb(204, 229, 255, 0.3);*/
 282
 283   /* d9edf7 */
 284   /*background-color: rgb(217, 237, 247, 0.5);*/
 285
 286   background-color: rgba(0,0,0,.03);
 287 }
 288
 289 /* Allow for larger XL dialogs */
 290 @media (min-width: 1300px) { .modal-xl { max-width: 1200px; } }
 291 @media (min-width: 1600px) { .modal-xl { max-width: 1500px; } }
 292 @media (min-width: 1700px) { .modal-xl { max-width: 1600px; } }
 293
 294 /* Contrast for dialog titles */
 295 .modal-header .modal-title {
 296   color: #fff;
 297   font-weight: 600;
 298 }
 299
 300 .modal-header .close,
 301 .modal-header .close:hover {
 302   color: #fff;
 303   opacity: 1;
 304   text-shadow: none;
 305 }
 306
 307 .modal-header .close:not(:disabled):not(.disabled):focus,
 308 .modal-header .close:not(:disabled):not(.disabled):hover {
 309   opacity: 1;
 310 }
 311
 312 /**
 313  * Make the acquisitions search form's navigation tabs match
 314  * those of the staff interface. This is a global rule because
 315  * various approaches to doing it local to the acq search component
 316  * don't work:
 317  *
 318  * 1. A rule bound to the container of the acq search tabset
 319  *    would make the entire background be grey.
 320  * 2. ":host ::ng-deep" for a local rule works, but depends on a
 321  *    mechanism that is deprecated.
 322  * 4. ng-tabset provides no hooks for custom styles for the nav-tab
 323  *    background.
 324  * 5. Turning off view encapsulation for the acq search component
 325  *    breaks a lot of styles.
 326  */
 327 #acq-search-page ngbNav .nav.nav-tabs {
 328   background-color: rgb(247, 247, 247);
 329 }
 330
 331 /**
 332  * Similar to the CSS above for the search form, set some
 333  * CSS for the line item worksheet. Ordinarily would be
 334  * preferable to just add the CSS to the worksheet component,
 335  * but untl a well-supported alternative to ng-deep comes along...
 336  */
 337 #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
 338 6px; }
 339 #worksheet-outlet tbody td { text-align: left; vertical-align: top; border: 1px #999 inset; padding: 0 2px; }
 340
 341 /* style for negative monetary values */
 342 .negative-money-amount {
 343     color: red;
 344 }
 345
 346 input.medium {
 347   width: 6em;
 348 }
 349
 350 input.small {
 351   width: 4em;
 352 }
 353
 354 /*
 355  * Created initially for styled grid rows where full 'bg-danger' CSS is
 356  * intense and not especially readable, more so when rows are stacked.
 357  * http://web-accessibility.carnegiemuseums.org/design/color/
 358  */
 359 .less-intense-alert {
 360   background-color: #f9dede;
 361   color: #212121;
 362 }