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: #129a78; /* official color of the Evergreen logo */
  20   text-decoration: underline #129a78;
  21 }
  22 h2.card-header {
  23   text-decoration: none;
  24 }
  25 h3 {font-size: 1.15rem}
  26 h4 {font-size: 1.05rem}
  27 h5 {font-size: .95rem}
  28
  29 .small-text-1 {font-size: 85%}
  30
  31
  32 /** Ang5 routes on clicks to href's with no values, so we can't have
  33  * bare href's to force anchor styling.  Use this for anchors w/ no href.
  34  * TODO: should we style all of them?  a:not([href]) ....
  35  * */
  36 .no-href {
  37   cursor: pointer;
  38   color: #007bff;
  39 }
  40
  41
  42 /** BS has flex utility classes, but none for specifying flex widths.
  43  *  BS class="col" is roughly equivelent to flex-1, but col-2 is not
  44  *  equivalent to flex-2, since col-2 really means 2/12 width. */
  45 .flex-1 {flex: 1}
  46 .flex-2 {flex: 2}
  47 .flex-3 {flex: 3}
  48 .flex-4 {flex: 4}
  49 .flex-5 {flex: 5}
  50
  51 /** BS deprecated the well, but it's replacement is not quite the same.
  52  * Define our own version and expand it to a full "table".
  53  * */
  54 .well-row {
  55   display: flex;
  56 }
  57 .well-table .well-label {
  58   flex: 1;
  59   display: flex;
  60   align-items: center;
  61   margin: 4px;
  62   padding: 4px;
  63   min-height: 40px;
  64 }
  65
  66 .well-table .well-label-no-flex {
  67   display: flex;
  68   align-items: center;
  69   margin: 4px;
  70   padding: 4px;
  71   min-height: 40px;
  72 }
  73
  74 .well-table .well-value {
  75   flex: 1;
  76   display: flex;
  77   align-items: center;
  78   background-color: #f5f5f5;
  79   border-radius: 5px;
  80   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
  81   padding: 4px;
  82   margin: 4px;
  83   min-height: 40px;
  84 }
  85
  86
  87 /* usefuf for mat-icon buttons without any background or borders */
  88 .material-icon-button {
  89   /* Transparent background */
  90   border: none;
  91   background-color: rgba(0, 0, 0, 0.0);
  92   padding-left: .25rem;
  93   padding-right: .25rem; /* default .5rem */
  94 }
  95
  96 .mat-icon-in-button {
  97     line-height: inherit;
  98 }
  99
 100 .mat-icon-shrunk-in-button {
 101     line-height: inherit;
 102     font-size: 18px;
 103 }
 104
 105 .input-group .mat-icon-in-button {
 106     font-size: .88rem !important; /* useful for buttons that cuddle up with inputs */
 107 }
 108
 109 .material-icons {
 110   /** default is 24px which is pretty chunky */
 111   font-size: 22px;
 112 }
 113
 114 /* allow spans/labels to vertically orient with material icons */
 115 .label-with-material-icon {
 116     display: inline-flex;
 117     vertical-align: middle;
 118     align-items: center;
 119 }
 120
 121 /* dropdown menu link/button with no downward carrot icon */
 122 .no-dropdown-caret::after {
 123     display: none;
 124 }
 125
 126 /* Default .card padding is extreme */
 127 .tight-card .card-body,
 128 .tight-card .list-group-item {
 129   padding: .25rem;
 130 }
 131 .tight-card .card-header {
 132   padding: .5rem;
 133 }
 134
 135 @media all and (min-width: 800px) {
 136     /* scrollable typeahead menus for full-size screens */
 137     ngb-typeahead-window {
 138         height: auto;
 139         max-height: 200px;
 140         overflow-x: hidden;
 141     }
 142 }
 143
 144 /* Limit size of dropdown menus and allow for scrolling */
 145 .scrollable-menu {
 146   height: auto;
 147   max-height: 300px;
 148   overflow-y: auto;
 149   font-size: 99%;
 150 }
 151
 152 /* --------------------------------------------------------------------------
 153 /* Form Validation CSS - https://angular.io/guide/form-validation
 154  * TODO: these colors don't fit the EG color scheme
 155  * Required valid fields are left-border styled in green-ish.
 156  * Invalid fields are left-border styled in red-ish.
 157  */
 158 .form-validated .ng-valid[required], .form-validated .ng-valid.required, input[formcontrolname].ng-valid {
 159   border-left: 5px solid #78FA89;
 160 }
 161 .form-validated .ng-invalid:not(form), input[formcontrolname].ng-invalid {
 162   border-left: 5px solid #FA787E;
 163 }
 164
 165 .invalid {
 166   border-left: 5px solid #FA787E;
 167 }
 168
 169 /* Typical form CSS.
 170  * Brings font size down 5% to squeeze a bit more in.
 171  * Bold labels
 172  * Fixes some bootstrap margin funkiness with checkboxes for
 173  * better vertical alignment.
 174  * Optional faint odd or even row striping.
 175  */
 176 .common-form {
 177   font-size: 95%;
 178 }
 179 .common-form .row {
 180   margin: 5px;
 181   padding: 3px;
 182 }
 183
 184 .common-form label {
 185   font-weight: bold;
 186 }
 187
 188 .common-form.striped-even .row:nth-child(even) {
 189   background-color: rgba(0,0,0,.03);
 190   border-top: 1px solid rgba(0,0,0,.125);
 191   border-bottom: 1px solid rgba(0,0,0,.125);
 192 }
 193 .common-form.striped-odd .row:nth-child(odd) {
 194   background-color: rgba(0,0,0,.03);
 195   border-top: 1px solid rgba(0,0,0,.125);
 196   border-bottom: 1px solid rgba(0,0,0,.125);
 197 }
 198
 199
 200 /**
 201  * Only display the print container when printing
 202  */
 203 #eg-print-container {
 204     display: none;
 205 }
 206 @media print {
 207   head {display: none} /* just to be safe */
 208   body div:not([id="eg-print-container"]) {display: none}
 209   div {display: none}
 210   #eg-print-container {display: block}
 211   #eg-print-container div {display: block}
 212   #eg-print-container pre {border: none}
 213 }
 214
 215 /**
 216  * Make sure that comboboxes (including org select
 217  * are visible, even in nested modals.
 218  *
 219  * See https://github.com/ng-bootstrap/ng-bootstrap/issues/2505
 220  * for the upstream issue that necessitates this.
 221  */
 222 body>.dropdown-menu {z-index: 2100;}
 223
 224 /* Styles for eg-daterange-select that don't work
 225  * in the component's CSS file.
 226  */
 227 .ngb-dp-day:not(.disabled) .daterange-day.focused {
 228   background-color: #e6e6e6;
 229 }
 230 .ngb-dp-day:not(.disabled) .daterange-day.range, .ngb-dp-day:not(.disabled) .daterange-day:hover {
 231   background-color: #129a78;
 232   color: white;
 233   font-size: 1.4em;
 234 }
 235 .ngb-dp-day:not(.disabled) .daterange-day.faded {
 236   background-color: #c9efe4;
 237   color: black;
 238 }
 239
 240 /* Washed out version of the Bootstrap 'info' background.
 241  * Useful for blocking out sections of a page/form without it
 242  * being so intensely colorful */
 243 .bg-faint {
 244   /*background-color: rgb(204, 229, 255, 0.3);*/
 245
 246   /* d9edf7 */
 247   /*background-color: rgb(217, 237, 247, 0.5);*/
 248
 249   background-color: rgba(0,0,0,.03);
 250 }
 251
 252 /* Allow for larger XL dialogs */
 253 @media (min-width: 1300px) { .modal-xl { max-width: 1200px; } }
 254 @media (min-width: 1600px) { .modal-xl { max-width: 1500px; } }
 255 @media (min-width: 1700px) { .modal-xl { max-width: 1600px; } }
 256
 257 /**
 258  * Make the acquisitions search form's navigation tabs match
 259  * those of the staff interface. This is a global rule because
 260  * various approaches to doing it local to the acq search component
 261  * don't work:
 262  *
 263  * 1. A rule bound to the container of the acq search tabset
 264  *    would make the entire background be grey.
 265  * 2. ":host ::ng-deep" for a local rule works, but depends on a
 266  *    mechanism that is deprecated.
 267  * 4. ng-tabset provides no hooks for custom styles for the nav-tab
 268  *    background.
 269  * 5. Turning off view encapsulation for the acq search component
 270  *    breaks a lot of styles.
 271  */
 272 #acq-search-page ngb-tabset .nav.nav-tabs {
 273   background-color: rgb(247, 247, 247);
 274 }
 275
 276 /* style for negative monetary values */
 277 .negative-money-amount {
 278     color: red;
 279 }