lp1635386 Items Column & Styles for Bill Item Status
[working/Evergreen.git] / Open-ILS / src / templates / staff / css / style.css.tt2
1 /* Create some padding at bottom of the page for breathing room */
2 body { padding-bottom: 50px; }
3
4 /* --------------------------------------------------------------------------
5  * Simple default navbar style adjustements to apply the Evergreen color.
6  * TODO: style other components to match EG color scheme
7  */
8 #top-navbar.navbar-default {
9     background: -webkit-linear-gradient(#00593d, #007a54);
10     background-color: #007a54;
11     color: #fff;
12 }
13 #top-navbar.navbar-default .navbar-nav>li>a {
14     color: #fff;
15 }
16 #top-navbar.navbar-default .navbar-nav>li>a:hover {
17     color: #ddd;
18 }
19 #top-navbar.navbar-default .navbar-nav > .open > a,
20 #top-navbar.navbar-default .navbar-nav > .open > a:focus,
21 #top-navbar.navbar-default .navbar-nav > .open > a:hover {
22     background-color: #7a7a7a;
23 }
24 #top-navbar.navbar-default .navbar-nav>.dropdown>a .caret {
25     border-top-color: #fff;
26     border-bottom-color: #fff;
27 }
28 #top-navbar.navbar-default .navbar-nav>.dropdown>a:hover .caret {
29     border-top-color: #ddd;
30     border-bottom-color: #ddd;
31 }
32
33 /* Hatch / WebSockets / Etc. connectivity status indicator */
34 .connect-status-ok {
35   color: rgb(92, 184, 92); /* success */
36 }
37
38 body {
39     color: #000; /* note: this is not comprehensive; changing Bootstrap's
40                     default text color from #333 to #000 would require
41                     more work */
42 }
43
44 /* --------------------------------------------------------------------------
45  * Structural modifications
46  */
47
48 #top-content-container {
49     /* allow the primary container to occupy most of the page,
50      * but leave some narrow gutters along the side, much 
51      * narrower than the default Bootstrapp container gutters.
52      */
53     width: 95%;
54     padding-top: 70px;
55 }
56
57
58 /* --------------------------------------------------------------------------
59  * Temporaray local CSS required to make angular-ui-bootstrap
60  * version 0.6.0 look right with Bootstrap CSS 3.0
61  */
62 .nav, .pagination, .carousel a { cursor: pointer; }
63 /*
64 .modal {
65     display: block;
66     height: 0;
67     overflow: visible;
68 }
69 .modal-body:before,
70 .modal-body:after {
71     display: table;
72     content: " ";
73 }
74 .modal-header:before,
75 .modal-header:after {
76     display: table;
77     content: " ";
78 }
79 */
80
81 /* --------------------------------------------------------------------------
82 /* Form Validation CSS - http://docs.angularjs.org/guide/forms
83  * TODO: these colors are harsh and don't fit the EG color scheme
84  */
85 .form-validated input.ng-invalid.ng-dirty {
86   background-color: #FA787E;
87 }
88 .form-validated input.ng-valid.ng-dirty {
89   background-color: #78FA89;
90 }
91 .form-validated textarea.ng-invalid.ng-dirty {
92   background-color: #FA787E;
93 }
94 .form-validated textarea.ng-valid.ng-dirty {
95   background-color: #78FA89;
96 }
97
98 /* --------------------------------------------------------------------------
99  * Local style
100  */
101
102 /* change default link color to provide adequate contrast */
103
104 a {
105    color: #286090;
106 }
107
108
109 /* no bootstrap way to directly disable a link.  */
110 a.disabled {
111   pointer-events: none;
112   cursor: default;
113   color: #888 !important;
114 }
115
116 #splash-nav .panel-body div {
117     padding-bottom: 10px;
118 }
119
120 table.list tr.selected td { /* deprecated? */
121     color: #2a6496;
122     background-color: #F5F5F5;
123 }
124
125 .pad-horiz {padding : 0px 10px 0px 10px; }
126 .pad-vert {padding : 20px 0px 10px 0px;}
127 .pad-left {padding-left: 10px;}
128 .pad-right {padding-right: 10px;}
129 .pad-right-min {padding-right: 5px;}
130 .pad-all-min {padding : 5px; }
131 .pad-all-min2 {padding : 2px; }
132 .pad-all {padding : 10px; }
133
134 #print-div { display: none; }
135
136 /* by default, give all tab panes some top padding */
137 .tab-pane { padding-top: 20px; }
138
139 .nav-pills-like-tabs {
140     border-bottom:1px solid #CCC;
141 }
142
143 .btn-pad {
144   /* sometimes you don't want buttons scrunched together -- add some margin */
145   margin-left: 10px;
146 }
147
148 /* button styling by Cory LaViska from
149    http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
150 */
151 .btn-file {
152     position: relative;
153     overflow: hidden;
154 }
155 .btn-file input[type=file] {
156     position: absolute;
157     top: 0;
158     right: 0;
159     min-width: 100%;
160     min-height: 100%;
161     font-size: 100px;
162     text-align: right;
163     filter: alpha(opacity=0);
164     opacity: 0;
165     outline: none;
166     background: white;
167     cursor: inherit;
168     display: block;
169 }
170
171 .strong-text {
172   font-weight: bold;
173 }
174 .strong-text-1 {
175   font-size: 110%;
176   font-weight: bold;
177 }
178 .strong-text-2 {
179   font-size: 120%;
180   font-weight: bold;
181 }
182 .strong-text-3 {
183   font-size: 130%;
184   font-weight: bold;
185 }
186 .strong-text-4 {
187   font-size: 140%;
188   font-weight: bold;
189 }
190
191 .currency-input {
192   width: 8em;
193 }
194
195 /* barcode inputs are everywhere.  Let's have a consistent style. */
196 .barcode { width: 16em !important; }
197
198 /* use strike-through to mark something that has been acknowledged,
199    e.g., a copy alert */
200 .acknowledged { text-decoration: line-through; }
201
202 /* bootstrap alerts are heavily padded.  use this to reduce */
203 .alert-less-pad {padding: 5px;}
204
205 /* text displayed inside a <progressbar>, typically the max/progress values */
206 .progressbar-text {
207   color:black;
208   white-space:nowrap;
209 }
210
211 /* embedded UI iframe */
212 .eg-embed-frame {
213   width: 100%;
214 }
215 .eg-embed-frame iframe {
216   width: 100%;
217   border: none;
218   margin: 0px;
219   padding: 0px;
220 }
221
222 /* Useful for grid-like things that aren't proper grids.
223  * Mimics the grids color scheme. */
224 .selected-row {
225   background-color: rgb(248, 248, 248);
226 }
227
228 /* Reduces the vertical space added by form-group's.  Especially useful
229  * for tall modal windows.
230  */
231 .tight-vert-form .form-group {
232   margin-bottom: 5px;
233
234
235
236 /* ----------------------------------------------------------------------
237  * Grid
238  * ---------------------------------------------------------------------- */
239
240 .eg-grid-primary-label {
241   font-weight: bold;
242   font-size: 120%;
243   margin-right: 2em;
244 }
245
246 /* odd/even row styling */
247 .eg-grid-content-body > div:nth-child(odd):not(.eg-grid-row-selected) {
248   background-color: rgb(248, 248, 248);
249 }
250
251 .eg-grid-row {
252   width: 100%;
253   display: flex;
254   border: 1px solid #ccc;
255 }
256
257 .eg-grid-row:not(.eg-grid-header-row):not(.eg-grid-conf-row) {
258   /* TODO: remove, pretty sure this is no longer needed w/ nowrap */
259   /*height: 1.8em;*/
260 }
261
262 .eg-grid-action-row {
263   border: none;
264   /* margin should not have to be this large; something's up */
265   margin-bottom: 12px;
266 }
267
268 .eg-grid-header-row { 
269   font-weight: bold; 
270 }
271
272 .eg-grid-header-row > .eg-grid-cell {
273   border-right: 1px solid #CCC;
274   text-align: center;
275
276   /* vertically align header cell text by treating 
277      each header cell as a vertical flex container */
278   display:flex;
279   flex-direction:column;
280   justify-content:flex-end;
281 }
282
283 .eg-grid-cell {
284   /* avoid text flowing into adjacent cells */
285   white-space: nowrap;
286   text-overflow: ellipsis;
287   overflow: hidden;
288 }
289
290 /* in config display, make cells more obvious */
291 .eg-grid-as-conf .eg-grid-row {
292   border: 1px solid #777;
293 }
294 .eg-grid-as-conf .eg-grid-cell {
295   border-right: 1px solid #777;
296 }
297
298 /* stock columns need fixed-width controls */
299 .eg-grid-cell-stock {
300   width: 2.2em;
301   text-align: center;
302 }
303
304 .eg-grid-cell-stock-status {
305   width: 4.4em;
306   text-align: center;
307 }
308
309 /* the conf header must be ~four times the stock flex */
310 .eg-grid-cell-conf-header {
311   width: 4.4em;
312   font-weight: bold;
313 }
314
315 .eg-grid-cell-conf-header-status {
316   width: 8.8em;
317   font-weight: bold;
318 }
319
320 .eg-grid-row-selected {
321   color: #000;
322   background-color: rgb(201, 221, 225);
323   border-bottom: 1px solid #888;
324 }
325
326 /* Improve ::selection styling by only allowing selection on text
327  * content cells within the main body of the grid.  Otherwise, the browser 
328  * styles row background and text (all dark blue?) when shift-click or 
329  * click-drag is used.
330  */
331 .eg-grid-content-body .eg-grid-row {
332   user-select:none;
333   -moz-user-select: none;
334   -webkit-user-select: none;
335 }
336 .eg-grid-content-body .eg-grid-cell-content {
337   user-select:text;
338   -moz-user-select: text;
339   -webkit-user-select: text;
340 }
341 .eg-grid-cell-content::-moz-selection {
342   color: #000;
343   background: rgb(201, 221, 225);
344   border-bottom: 1px solid #888;
345 }
346
347 /* patron bill row-highlighting */
348 .red-row-highlight {
349   color: #FFF;
350   background-color: #FF0000;
351 }
352 .orange-row-highlight {
353   color: #FFF;
354   background-color: #FFA500 ;
355 }
356 .dark-red-row-highlight {
357   color: #FFF;
358   background-color: #800000;
359 }
360 .eg-grid-row-selected .red-row-highlight {
361   background-color: #CF0000;
362 }
363 .eg-grid-row-selected .orange-row-highlight {
364   background-color: #DE9000;
365 }
366 .eg-grid-row-selected .dark-red-row-highlight {
367   background-color: #5C0000;
368 }
369
370 .eg-grid-cell-content::selection {
371   color: #000;
372   background: rgb(201, 221, 225);
373   border-bottom: 1px solid #888;
374 }
375 .eg-grid-cell-content a {
376   text-decoration: underline;
377 }
378
379 .eg-grid-conf-cell-entry {
380   width:98%;
381   text-align:center;
382   padding: 3px;
383 }
384
385 .eg-grid-conf-cell-entry:not(:first-child) {
386   border-top:1px solid #ccc;
387 }
388
389 .eg-grid-conf-row {
390   background-color: #dff0d8;
391   border-color: #d6e9c6;
392 }
393
394 .eg-grid-conf-row:first-child {
395   /* alignment fix; account for one missing border */
396   padding-right: 1px;
397 }
398
399 .eg-grid-column-move-handle:hover {
400   cursor: move;
401 }
402
403 .eg-grid-column-move-handle-active,
404 .eg-grid-column-move-handle-active:active {
405   /* similar to label-primary, sans padding */
406   background-color: rgb(66, 139, 202);
407   color: #fff;
408 }
409
410 .eg-grid-col-hover {
411   /* similar to label-success, sans padding */
412   background-color: rgb(92, 184, 92);
413   color: #fff;
414 }
415
416 .eg-grid-column-resize-handle {
417   height: 100%;
418 }
419 .eg-grid-column-resize-handle:hover {
420   cursor: col-resize;
421 }
422
423 /* for these to be useful, they would have to be applied 
424  * to the dragover targets.  not yet done */
425 .eg-grid-column-resize-handle-west {
426   cursor: w-resize;
427 }
428 .eg-grid-column-resize-handle-east {
429   cursor: e-resize;
430 }
431
432 .eg-grid-column-last-mod {
433   background-color: #78FA89;
434 }
435
436 .eg-grid-menu-item {
437   margin-right: 10px;
438 }
439
440
441 /* hack to make the header columns line up with the content columns
442    when the scroll bar is visible along the right side of the content
443    columns. TODO: if this varies enough by browser, we'll need to
444    calculate the width instead. */
445 /*
446 .eg-grid-scroll > .eg-grid-header-row, 
447 .eg-grid-scroll > .eg-grid-conf-row { 
448   padding-right: 15px;
449 }
450 .eg-grid-scroll > .eg-grid-content-body {
451   overflow-y:scroll; 
452   height: 600px; 
453 }
454 */
455 .eg-grid-column-picker {
456   height: auto;
457   max-height: 400px;
458   overflow: auto;
459   box-shadow: none;
460 }
461
462
463 /* ----------------------------------------------------------------------
464  * /Grid
465  * ---------------------------------------------------------------------- */
466
467
468 /* simple flex container for consistent-width cell-based structures */
469 .flex-container-striped > .flex-row:nth-child(odd) {
470   background-color: #f5f5f5;
471 }
472 .flex-container-bordered .flex-cell {
473   border-bottom: 1px solid #ddd;
474 }
475 .flex-row {
476   display: flex;
477 }
478 .flex-row.padded div {
479   padding: 5px;
480 }
481 .flex-row.left-anchored > div {
482   margin-right: 10px;
483 }
484 .flex-cell {
485   flex: 1;
486   padding: 4px; /* bootstrap default is much bigger */
487 }
488 .flex-cell.well {
489   min-height: 2.5em; /* don't let empty wells scrunch down */
490   margin-bottom: 5px; /* bootstrap default is 20px */
491 }
492 .flex-2 { /* meh, convience */
493   flex: 2;
494 }
495 .flex-3 { /* meh, convience */
496   flex: 3;
497 }
498 .flex-4 { /* meh, convience */
499   flex: 4;
500 }
501
502 /* TODO: match media size to Bootstrap "md" col resizing */
503 @media all and (max-width: 800px) {
504   .flex-row {
505     flex-direction: column;
506   }
507   .eg-grid-row {
508     flex-direction: column;
509   }
510 }
511
512 /* optional class to make 'lg' Bootstrap modals even wider */
513 @media (min-width: 768px) {
514   .eg-wide-modal .modal-lg {
515     width: 95%;
516   }
517 }
518
519 @media all and (min-width: 800px) {
520     /* scrollable menus for full-size screens */
521     .scrollable-menu {
522         height: auto;
523         max-height: 200px;
524         overflow-x: hidden;
525     }
526 }
527
528 .eg-modal-progress progress {
529   width: 100%;
530   height: 25px;
531 }
532
533 .eg-grid-columns-modal-body {
534   max-height: 400px;
535   overflow: scroll;
536 }
537
538 .eg-grid-columns-modal-body .row {
539   padding: 2px 0px 2px 0px;
540   border-bottom: 1px solid #aaa;
541 }
542
543 .eg-grid-columns-modal-body .visible {
544   color: #000;
545   background-color: rgb(201, 221, 225);
546   border-bottom: 1px solid #888;
547 }
548
549
550 eg-grid-field {
551   display: none;
552 }
553
554 [%# 
555 vim: ft=css 
556 %]