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