b70887b987d771f1a60cf43683f596bc90ffd133
[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 /* the conf header must be twice the stock flex */
305 .eg-grid-cell-conf-header {
306   width: 4.4em;
307   font-weight: bold;
308 }
309
310 .eg-grid-row-selected {
311   color: #000;
312   background-color: rgb(201, 221, 225);
313   border-bottom: 1px solid #888;
314 }
315
316 /* Improve ::selection styling by only allowing selection on text
317  * content cells within the main body of the grid.  Otherwise, the browser 
318  * styles row background and text (all dark blue?) when shift-click or 
319  * click-drag is used.
320  */
321 .eg-grid-content-body .eg-grid-row {
322   user-select:none;
323   -moz-user-select: none;
324   -webkit-user-select: none;
325 }
326 .eg-grid-content-body .eg-grid-cell-content {
327   user-select:text;
328   -moz-user-select: text;
329   -webkit-user-select: text;
330 }
331 .eg-grid-cell-content::-moz-selection {
332   color: #000;
333   background: rgb(201, 221, 225);
334   border-bottom: 1px solid #888;
335 }
336 .eg-grid-cell-content::selection {
337   color: #000;
338   background: rgb(201, 221, 225);
339   border-bottom: 1px solid #888;
340 }
341 .eg-grid-cell-content a {
342   text-decoration: underline;
343 }
344
345 .eg-grid-conf-cell-entry {
346   width:98%;
347   text-align:center;
348   padding: 3px;
349 }
350
351 .eg-grid-conf-cell-entry:not(:first-child) {
352   border-top:1px solid #ccc;
353 }
354
355 .eg-grid-conf-row {
356   background-color: #dff0d8;
357   border-color: #d6e9c6;
358 }
359
360 .eg-grid-conf-row:first-child {
361   /* alignment fix; account for one missing border */
362   padding-right: 1px;
363 }
364
365 .eg-grid-column-move-handle:hover {
366   cursor: move;
367 }
368
369 .eg-grid-column-move-handle-active,
370 .eg-grid-column-move-handle-active:active {
371   /* similar to label-primary, sans padding */
372   background-color: rgb(66, 139, 202);
373   color: #fff;
374 }
375
376 .eg-grid-col-hover {
377   /* similar to label-success, sans padding */
378   background-color: rgb(92, 184, 92);
379   color: #fff;
380 }
381
382 .eg-grid-column-resize-handle {
383   height: 100%;
384 }
385 .eg-grid-column-resize-handle:hover {
386   cursor: col-resize;
387 }
388
389 /* for these to be useful, they would have to be applied 
390  * to the dragover targets.  not yet done */
391 .eg-grid-column-resize-handle-west {
392   cursor: w-resize;
393 }
394 .eg-grid-column-resize-handle-east {
395   cursor: e-resize;
396 }
397
398 .eg-grid-column-last-mod {
399   background-color: #78FA89;
400 }
401
402 .eg-grid-menu-item {
403   margin-right: 10px;
404 }
405
406
407 /* hack to make the header columns line up with the content columns
408    when the scroll bar is visible along the right side of the content
409    columns. TODO: if this varies enough by browser, we'll need to
410    calculate the width instead. */
411 /*
412 .eg-grid-scroll > .eg-grid-header-row, 
413 .eg-grid-scroll > .eg-grid-conf-row { 
414   padding-right: 15px;
415 }
416 .eg-grid-scroll > .eg-grid-content-body {
417   overflow-y:scroll; 
418   height: 600px; 
419 }
420 */
421 .eg-grid-column-picker {
422   height: auto;
423   max-height: 400px;
424   overflow: auto;
425   box-shadow: none;
426 }
427
428
429 /* ----------------------------------------------------------------------
430  * /Grid
431  * ---------------------------------------------------------------------- */
432
433
434 /* simple flex container for consistent-width cell-based structures */
435 .flex-container-striped > .flex-row:nth-child(odd) {
436   background-color: #f5f5f5;
437 }
438 .flex-container-bordered .flex-cell {
439   border-bottom: 1px solid #ddd;
440 }
441 .flex-row {
442   display: flex;
443 }
444 .flex-row.padded div {
445   padding: 5px;
446 }
447 .flex-row.left-anchored > div {
448   margin-right: 10px;
449 }
450 .flex-cell {
451   flex: 1;
452   padding: 4px; /* bootstrap default is much bigger */
453 }
454 .flex-cell.well {
455   min-height: 2.5em; /* don't let empty wells scrunch down */
456   margin-bottom: 5px; /* bootstrap default is 20px */
457 }
458 .flex-2 { /* meh, convience */
459   flex: 2;
460 }
461 .flex-3 { /* meh, convience */
462   flex: 3;
463 }
464 .flex-4 { /* meh, convience */
465   flex: 4;
466 }
467
468 /* TODO: match media size to Bootstrap "md" col resizing */
469 @media all and (max-width: 800px) {
470   .flex-row {
471     flex-direction: column;
472   }
473   .eg-grid-row {
474     flex-direction: column;
475   }
476 }
477
478 /* optional class to make 'lg' Bootstrap modals even wider */
479 @media (min-width: 768px) {
480   .eg-wide-modal .modal-lg {
481     width: 95%;
482   }
483 }
484
485 @media all and (min-width: 800px) {
486     /* scrollable menus for full-size screens */
487     .scrollable-menu {
488         height: auto;
489         max-height: 200px;
490         overflow-x: hidden;
491     }
492 }
493
494 .eg-modal-progress progress {
495   width: 100%;
496   height: 25px;
497 }
498
499 .eg-grid-columns-modal-body {
500   max-height: 400px;
501   overflow: scroll;
502 }
503
504 .eg-grid-columns-modal-body .row {
505   padding: 2px 0px 2px 0px;
506   border-bottom: 1px solid #aaa;
507 }
508
509 .eg-grid-columns-modal-body .visible {
510   color: #000;
511   background-color: rgb(201, 221, 225);
512   border-bottom: 1px solid #888;
513 }
514
515
516 eg-grid-field {
517   display: none;
518 }
519
520 [%# 
521 vim: ft=css 
522 %]