Open-ILS/src/templates/staff/css/circ.css.tt2

   1
   2 /* push the patron summary up to compensate for the extra
   3  * padding required to support the fixed navigation */
   4 .patron-summary-grid-wrapper {
   5   margin-top: 20px;
   6 }
   7
   8 /** style to make a grid look like a striped table */
   9 #patron-summary-grid div.row {padding: 3px; border-right: 2px solid rgb(248, 248, 248);}
  10 #patron-summary-grid div.row:nth-child(odd) {background-color: rgb(248, 248, 248);}
  11
  12 /* there are bootstrap tyles for error, warning, etc.,
  13 but the ones I'm finding aren't quite cutting it..*/
  14 .patron-summary-alert {color: red; font-weight:bold}
  15 .patron-summary-alert-small {color: red; background-color: white;}
  16 .patron-summary-divider { border-top: 1px solid #CCC}
  17 .patron-summary-act-link {font-size: .8em;}
  18 .patron-summary-has-notes:hover, .patron-summary-has-notes:visited{ text-decoration: none; }
  19
  20 .patron-summary-pref-name {
  21   padding-left: 6px;
  22   color: #5cb85c;
  23 }
  24
  25 /* Tag icon used for name keywords shouldn't look like a link */
  26
  27 .glyphicon-tags, .glyphicon-tags:hover, .glyphicon-tags:focus {
  28   color: #333;
  29   text-decoration: none;
  30 }
  31
  32 /* FIXME: use .barcode instead */
  33 #patron-checkout-barcode,
  34 #patron-renewal-barcode,
  35 #patron-checkin-barcode { width: 16em; }
  36
  37 #patron-search-form div.form-group {
  38   margin-bottom: 5px;
  39 }
  40
  41 #patron-fixed-tabs {
  42     z-index: 4;
  43     background-color: rgba(255,255,255,1);
  44 }
  45
  46 .patron-name-header {
  47   margin-top: 20px;
  48 }
  49
  50 /* let search form elements fill their containers w/ slight padding */
  51 #patron-search-form input:not([type="checkbox"]) { width: 100%; }
  52 #patron-search-form .eg-org-selector,
  53 #patron-search-form .eg-org-selector button,
  54 #patron-search-form .patron-search-selector,
  55   #patron-search-form .patron-search-selector button {
  56   width: 100%;
  57   text-align: left
  58 }
  59
  60 .patron-search-container {
  61   container-type: inline-size;
  62 }
  63
  64 /* mobile-first layout: flexbox */
  65 .patron-search-form {
  66   display: flex;
  67   flex-wrap: wrap;
  68   align-items: start;
  69   gap: 0.5rem;
  70 }
  71
  72 /* Bootstrap sm breakpoint */
  73 @container (min-width: 576px) {
  74   .patron-search-form > * {
  75     flex-basis: 40%;
  76   }
  77
  78   .actions-more {
  79     position: absolute;
  80     right: 0;
  81     top: 0;
  82   }
  83 }
  84
  85 /* not a Bootstrap breakpoint, but where col-lg-9 can break */
  86 @container (min-width: 680px) {
  87   .patron-search-form {
  88     display: grid;
  89     grid-template-columns: repeat(5, 1fr) max-content;
  90     grid-template-rows: repeat(5, auto);
  91   }
  92
  93   .actions-more {
  94     position: revert;
  95   }
  96 }
  97
  98 /* place in the next to last column, first row */
  99 .actions-search {
 100   grid-row: 1;
 101   grid-column: 5;
 102 }
 103
 104 /* place in the next to last column, second row */
 105 .actions-reset {
 106   grid-row: 2;
 107   grid-column: 5;
 108 }
 109
 110 /* place in the last column, spanning all rows */
 111 .actions-more {
 112   grid-column: 6;
 113   grid-row: 1 / 5;
 114 }
 115
 116 #patron-payments-spreadsheet {
 117   margin-top: 10px;
 118   padding-top: 10px;
 119   border-top: 1px solid #aaa;
 120 }
 121
 122 #patron-payments-spreadsheet .flex-cell {
 123   margin: 2px;
 124 }
 125
 126 #patron-payments-spreadsheet .flex-cell.well {
 127   min-height: 1.5em;
 128   margin-bottom: 0px; /* bootstrap default is 20px */
 129 }
 130
 131 #hold-notify-settings div.row { margin-top: 12px; }
 132 #hold-notify-settings div.row:not(.header-row):nth-child(odd) {
 133   background-color: rgb(248, 248, 248);
 134 }
 135 #hold-notify-settings div.row:not(.header-row) {
 136   border-bottom: 1px solid #CCC;
 137 }
 138
 139 /* -- patron registration -- */
 140
 141 /* make all input widgets the same width, i.e. fill their column */
 142
 143 .reg-field-input {font-weight: 700; }
 144 .reg-field-input input:not([type="checkbox"]) { width: 100%; }
 145
 146 /* selector contents float left to allow depth-based left-padding */
 147 .reg-field-input .eg-org-selector,
 148 .reg-field-input .btn-group {
 149   width: 100%;
 150   text-align: left;
 151 }
 152
 153 /* selector button labels float right */
 154 .reg-field-input .eg-org-selector button,
 155 .reg-field-input .btn-group > button {
 156   width: 100%;
 157   text-align: right;
 158 }
 159
 160 /* floating div along top-right with field documentation */
 161 #reg-alert-pane {
 162     position: fixed;
 163     top:160px;
 164     right:20px;
 165     /*
 166     border:2px dashed #d9e8f9;
 167     -moz-border-radius: 10px;
 168     */
 169     font-weight: bold;
 170     padding: 20px;
 171     margin-top: 20px;
 172 }
 173
 174 #reg-dupe-links {
 175                 margin-bottom: 10px;
 176 }
 177
 178
 179 #reg-field-doc legend {
 180     /* otherwise the font size is quite large */
 181     font-size: 100%;
 182 }
 183
 184 .reg-field-row {
 185     padding-bottom: 3px;
 186 }
 187
 188 .reg-field-row label {
 189     font-weight: normal;
 190 }
 191
 192 .patron-reg-fixed-bar {
 193     position: fixed;
 194     top:50px;
 195     right: 20px;
 196     left: 20px;
 197     padding-top: 20px;
 198     padding-bottom: 10px;
 199     z-index: 1;
 200     background-color: rgba(255,255,255,1);
 201 }
 202
 203 .patron-reg-actions-bar {
 204   padding: 5px;
 205 }
 206 .patron-reg-actions-bar span {
 207   font-weight: bold;
 208 }
 209
 210 .patron-reg-barcodes > .header {
 211   font-weight: bold;
 212 }
 213
 214 /* Bootstrap alert panes are too stylized/padded/etc. in this case,
 215  * but consider revisiting. */
 216 .patron-reg-validation-alert {
 217   font-weight: bold;
 218   color: red;
 219 }
 220
 221 /* Angular applies these classes based on the field's
 222  * required and pattern settings */
 223 #patron-notes-container .ng-invalid-required,
 224 #patron-reg-container .ng-invalid,
 225 #patron-reg-container .ng-invalid-required,
 226 #patron-pay-by-credit-form .ng-invalid {
 227   background-color: yellow;
 228   color: red;
 229 }
 230
 231 .patron-reg-names-separator {
 232   margin-top: 3px;
 233   margin-bottom: 3px;
 234 }
 235
 236 .patron-reg-pref-names {
 237   background-color: rgb(215, 215, 215);
 238 }
 239
 240 .patron-reg-pending-address {
 241   border:2px dashed #d9e8f9;
 242   -moz-border-radius: 10px;
 243   padding: 10px;
 244   margin-bottom: 5px;
 245 }
 246
 247 #no-edit-alert-container {
 248   position: absolute;
 249   bottom: -200px;
 250   z-index: 10;
 251 }
 252
 253 /* -- end patron registration -- */
 254
 255 [%#
 256 vim: ft=css
 257 %]