LP#1789747: tweak disabling the offline circulation link
[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 .disabled {
116   cursor: not-allowed;
117 }
118
119 #splash-nav .panel-body div {
120     padding-bottom: 10px;
121 }
122
123 table.list tr.selected td { /* deprecated? */
124     color: #2a6496;
125     background-color: #F5F5F5;
126 }
127
128 .pad-horiz {padding : 0px 10px 0px 10px; }
129 .pad-vert {padding : 20px 0px 10px 0px;}
130 .pad-left {padding-left: 10px;}
131 .pad-right {padding-right: 10px;}
132 .pad-right-min {padding-right: 5px;}
133 .pad-all-min {padding : 5px; }
134 .pad-all-min2 {padding : 2px; }
135 .pad-all {padding : 10px; }
136
137 #print-div { display: none; }
138
139 /* by default, give all tab panes some top padding */
140 .tab-pane { padding-top: 20px; }
141
142 .nav-pills-like-tabs {
143     border-bottom:1px solid #CCC;
144 }
145
146 .btn-pad {
147   /* sometimes you don't want buttons scrunched together -- add some margin */
148   margin-left: 10px;
149 }
150
151 /* button styling by Cory LaViska from
152    http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
153 */
154 .btn-file {
155     position: relative;
156     overflow: hidden;
157 }
158 .btn-file input[type=file] {
159     position: absolute;
160     top: 0;
161     right: 0;
162     min-width: 100%;
163     min-height: 100%;
164     font-size: 100px;
165     text-align: right;
166     filter: alpha(opacity=0);
167     opacity: 0;
168     outline: none;
169     background: white;
170     cursor: inherit;
171     display: block;
172 }
173
174 .strong-text {
175   font-weight: bold;
176 }
177 .strong-text-1 {
178   font-size: 110%;
179   font-weight: bold;
180 }
181 .strong-text-2 {
182   font-size: 120%;
183   font-weight: bold;
184 }
185 .strong-text-3 {
186   font-size: 130%;
187   font-weight: bold;
188 }
189 .strong-text-4 {
190   font-size: 140%;
191   font-weight: bold;
192 }
193
194 .currency-input {
195   width: 8em;
196 }
197
198 /* barcode inputs are everywhere.  Let's have a consistent style. */
199 .barcode { width: 16em !important; }
200
201 /* use strike-through to mark something that has been acknowledged,
202    e.g., a item alert */
203 .acknowledged { text-decoration: line-through; }
204
205 /* bootstrap alerts are heavily padded.  use this to reduce */
206 .alert-less-pad {padding: 5px;}
207
208 /* text displayed inside a <progressbar>, typically the max/progress values */
209 .progressbar-text {
210   color:black;
211   white-space:nowrap;
212 }
213
214 /* embedded UI iframe */
215 .eg-embed-frame {
216   width: 100%;
217 }
218 .eg-embed-frame iframe {
219   width: 100%;
220   border: none;
221   margin: 0px;
222   padding: 0px;
223 }
224
225 /* Useful for grid-like things that aren't proper grids.
226  * Mimics the grids color scheme. */
227 .selected-row {
228   background-color: rgb(248, 248, 248);
229 }
230
231 /* Reduces the vertical space added by form-group's.  Especially useful
232  * for tall modal windows.
233  */
234 .tight-vert-form .form-group {
235   margin-bottom: 5px;
236
237
238
239 /* ----------------------------------------------------------------------
240  * Grid
241  * ---------------------------------------------------------------------- */
242
243 .eg-grid-primary-label {
244   font-weight: bold;
245   font-size: 120%;
246   margin-right: 2em;
247 }
248
249 /* odd/even row styling */
250 .eg-grid-content-body > div:nth-child(odd):not(.eg-grid-row-selected) {
251   background-color: rgb(248, 248, 248);
252 }
253
254 .eg-grid-row {
255   width: 100%;
256   display: flex;
257   border: 1px solid #ccc;
258 }
259
260 .eg-grid-row:not(.eg-grid-header-row):not(.eg-grid-conf-row) {
261   /* TODO: remove, pretty sure this is no longer needed w/ nowrap */
262   /*height: 1.8em;*/
263 }
264
265 .eg-grid-action-row {
266   border: none;
267   /* margin should not have to be this large; something's up */
268   margin-bottom: 12px;
269 }
270
271 .eg-grid-header-row { 
272   font-weight: bold; 
273 }
274
275 .eg-grid-header-row > .eg-grid-cell {
276   border-right: 1px solid #CCC;
277   text-align: center;
278
279   /* vertically align header cell text by treating 
280      each header cell as a vertical flex container */
281   display:flex;
282   flex-direction:column;
283   justify-content:flex-end;
284 }
285
286 .eg-grid-cell {
287   /* avoid text flowing into adjacent cells */
288   white-space: nowrap;
289   text-overflow: ellipsis;
290   overflow: hidden;
291 }
292
293 /* in config display, make cells more obvious */
294 .eg-grid-as-conf .eg-grid-row {
295   border: 1px solid #777;
296 }
297 .eg-grid-as-conf .eg-grid-cell {
298   border-right: 1px solid #777;
299 }
300
301 /* stock columns need fixed-width controls */
302 .eg-grid-cell-stock {
303   width: 2.2em;
304   text-align: center;
305 }
306
307 /* the conf header must be twice the stock flex */
308 .eg-grid-cell-conf-header {
309   width: 4.4em;
310   font-weight: bold;
311 }
312
313 .eg-grid-cell-stock-status {
314   width: 4.4em;
315   text-align: center;
316 }
317
318 /* the conf header must be 4x the stock width when status is present */
319 .eg-grid-cell-conf-header-status {
320   width: 8.8em;
321   font-weight: bold;
322 }
323
324 .eg-grid-row-selected {
325   color: #000;
326   background-color: rgb(201, 221, 225);
327   border-bottom: 1px solid #888;
328 }
329
330 /* Improve ::selection styling by only allowing selection on text
331  * content cells within the main body of the grid.  Otherwise, the browser 
332  * styles row background and text (all dark blue?) when shift-click or 
333  * click-drag is used.
334  */
335 .eg-grid-content-body .eg-grid-row {
336   user-select:none;
337   -moz-user-select: none;
338   -webkit-user-select: none;
339 }
340 .eg-grid-content-body .eg-grid-cell-content {
341   user-select:text;
342   -moz-user-select: text;
343   -webkit-user-select: text;
344 }
345 .eg-grid-cell-content::-moz-selection {
346   color: #000;
347   background: rgb(201, 221, 225);
348   border-bottom: 1px solid #888;
349 }
350
351 /* patron bill row-highlighting */
352 .overdue-row {
353   color: #FFF;
354   background-color: #EB0000 !important;
355 }
356 .overdue-row a:link, .lost-row a:link {
357   color: #B8ECFF;
358 }
359 .longoverdue-row {
360   color: #000;
361   background-color: #FFE1A8 !important;
362 }
363 .lost-row {
364   color: #FFF;
365   background-color: #800000 !important;
366
367 }
368 .eg-grid-row-selected.overdue-row {
369   background-color: #CF0000 !important;
370 }
371 .eg-grid-row-selected.longoverdue-row {
372   background-color: #FFCF75 !important;
373 }
374 .eg-grid-row-selected.lost-row {
375   background-color: #5C0000 !important;
376 }
377
378 .eg-grid-cell-content::selection {
379   color: #000;
380   background: rgb(201, 221, 225);
381   border-bottom: 1px solid #888;
382 }
383 .eg-grid-cell-content a {
384   text-decoration: underline;
385 }
386
387 .eg-grid-conf-cell-entry {
388   width:98%;
389   text-align:center;
390   padding: 3px;
391 }
392
393 .eg-grid-conf-cell-entry:not(:first-child) {
394   border-top:1px solid #ccc;
395 }
396
397 .eg-grid-conf-row {
398   background-color: #dff0d8;
399   border-color: #d6e9c6;
400 }
401
402 .eg-grid-conf-row:first-child {
403   /* alignment fix; account for one missing border */
404   padding-right: 1px;
405 }
406
407 .eg-grid-column-move-handle:hover {
408   cursor: move;
409 }
410
411 .eg-grid-column-move-handle-active,
412 .eg-grid-column-move-handle-active:active {
413   /* similar to label-primary, sans padding */
414   background-color: rgb(66, 139, 202);
415   color: #fff;
416 }
417
418 .eg-grid-col-hover {
419   /* similar to label-success, sans padding */
420   background-color: rgb(92, 184, 92);
421   color: #fff;
422 }
423
424 .eg-grid-column-resize-handle {
425   height: 100%;
426 }
427 .eg-grid-column-resize-handle:hover {
428   cursor: col-resize;
429 }
430
431 /* for these to be useful, they would have to be applied 
432  * to the dragover targets.  not yet done */
433 .eg-grid-column-resize-handle-west {
434   cursor: w-resize;
435 }
436 .eg-grid-column-resize-handle-east {
437   cursor: e-resize;
438 }
439
440 .eg-grid-column-last-mod {
441   background-color: #78FA89;
442 }
443
444 .eg-grid-menu-item {
445   margin-right: 10px;
446 }
447
448
449 /* hack to make the header columns line up with the content columns
450    when the scroll bar is visible along the right side of the content
451    columns. TODO: if this varies enough by browser, we'll need to
452    calculate the width instead. */
453 /*
454 .eg-grid-scroll > .eg-grid-header-row, 
455 .eg-grid-scroll > .eg-grid-conf-row { 
456   padding-right: 15px;
457 }
458 .eg-grid-scroll > .eg-grid-content-body {
459   overflow-y:scroll; 
460   height: 600px; 
461 }
462 */
463 .eg-grid-column-picker {
464   height: auto;
465   max-height: 400px;
466   overflow: auto;
467   box-shadow: none;
468 }
469
470 .eg-grid-tooltip {
471   font-size: 110%;
472 }
473 /* avoid visited "blue" links over black background */
474 .eg-grid-tooltip a {
475   color: white;
476 }
477
478
479 /* ----------------------------------------------------------------------
480  * /Grid
481  * ---------------------------------------------------------------------- */
482
483
484 /* simple flex container for consistent-width cell-based structures */
485 .flex-container-striped > .flex-row:nth-child(odd) {
486   background-color: #f5f5f5;
487 }
488 .flex-container-bordered .flex-cell {
489   border-bottom: 1px solid #ddd;
490 }
491 .flex-row {
492   display: flex;
493 }
494 .flex-row.padded div {
495   padding: 5px;
496 }
497 .flex-row.left-anchored > div {
498   margin-right: 10px;
499 }
500 .flex-cell {
501   flex: 1;
502   padding: 4px; /* bootstrap default is much bigger */
503 }
504 .flex-cell.well {
505   min-height: 2.5em; /* don't let empty wells scrunch down */
506   margin-bottom: 5px; /* bootstrap default is 20px */
507 }
508 .flex-2 { /* meh, convience */
509   flex: 2;
510 }
511 .flex-3 { /* meh, convience */
512   flex: 3;
513 }
514 .flex-4 { /* meh, convience */
515   flex: 4;
516 }
517
518 /* TODO: match media size to Bootstrap "md" col resizing */
519 @media all and (max-width: 800px) {
520   .flex-row {
521     flex-direction: column;
522   }
523   .eg-grid-row {
524     flex-direction: column;
525   }
526 }
527
528 /* optional class to make 'lg' Bootstrap modals even wider */
529 @media (min-width: 768px) {
530   .eg-wide-modal .modal-lg {
531     width: 95%;
532   }
533 }
534
535 @media all and (min-width: 800px) {
536     /* scrollable menus for full-size screens */
537     .scrollable-menu {
538         height: auto;
539         max-height: 200px;
540         overflow-x: hidden;
541     }
542 }
543
544 .eg-modal-progress progress {
545   width: 100%;
546   height: 25px;
547 }
548
549 .eg-grid-columns-modal-body {
550   max-height: 400px;
551   overflow: scroll;
552 }
553
554 .eg-grid-columns-modal-body .row {
555   padding: 2px 0px 2px 0px;
556   border-bottom: 1px solid #aaa;
557 }
558
559 .eg-grid-columns-modal-body .visible {
560   color: #000;
561   background-color: rgb(201, 221, 225);
562   border-bottom: 1px solid #888;
563 }
564
565
566 eg-grid-field {
567   display: none;
568 }
569
570 .eg-grid-tooltip .tooltip-inner {
571   max-width: 400px;
572 }
573
574 [%# 
575 vim: ft=css 
576 %]