b20f720244ba0fa90fcc91407dc36ef53031430a
[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 /* bootstrap alerts are heavily padded.  use this to reduce */
183 .alert-less-pad {padding: 5px;}
184
185 /* text displayed inside a <progressbar>, typically the max/progress values */
186 .progressbar-text {
187   color:black;
188   white-space:nowrap;
189 }
190
191 /* embedded UI iframe */
192 .eg-embed-frame {
193   width: 100%;
194 }
195 .eg-embed-frame iframe {
196   width: 100%;
197   border: none;
198   margin: 0px;
199   padding: 0px;
200 }
201
202 /* Useful for grid-like things that aren't proper grids.
203  * Mimics the grids color scheme. */
204 .selected-row {
205   background-color: rgb(248, 248, 248);
206 }
207
208 /* Reduces the vertical space added by form-group's.  Especially useful
209  * for tall modal windows.
210  */
211 .tight-vert-form .form-group {
212   margin-bottom: 5px;
213
214
215
216 /* ----------------------------------------------------------------------
217  * Grid
218  * ---------------------------------------------------------------------- */
219
220 .eg-grid-primary-label {
221   font-weight: bold;
222   font-size: 120%;
223   margin-right: 2em;
224 }
225
226 /* odd/even row styling */
227 .eg-grid-content-body > div:nth-child(odd):not(.eg-grid-row-selected) {
228   background-color: rgb(248, 248, 248);
229 }
230
231 .eg-grid-row {
232   width: 100%;
233   display: flex;
234   border: 1px solid #ccc;
235 }
236
237 .eg-grid-row:not(.eg-grid-header-row):not(.eg-grid-conf-row) {
238   /* TODO: remove, pretty sure this is no longer needed w/ nowrap */
239   /*height: 1.8em;*/
240 }
241
242 .eg-grid-action-row {
243   border: none;
244   /* margin should not have to be this large; something's up */
245   margin-bottom: 12px;
246 }
247
248 .eg-grid-header-row { 
249   font-weight: bold; 
250 }
251
252 .eg-grid-header-row > .eg-grid-cell {
253   border-right: 1px solid #CCC;
254   text-align: center;
255
256   /* vertically align header cell text by treating 
257      each header cell as a vertical flex container */
258   display:flex;
259   flex-direction:column;
260   justify-content:flex-end;
261 }
262
263 .eg-grid-cell {
264   /* avoid text flowing into adjacent cells */
265   white-space: nowrap;
266   text-overflow: ellipsis;
267   overflow: hidden;
268 }
269
270 /* in config display, make cells more obvious */
271 .eg-grid-as-conf .eg-grid-row {
272   border: 1px solid #777;
273 }
274 .eg-grid-as-conf .eg-grid-cell {
275   border-right: 1px solid #777;
276 }
277
278 /* stock columns need fixed-width controls */
279 .eg-grid-cell-stock {
280   width: 2.2em;
281   text-align: center;
282 }
283
284 /* the conf header must be twice the stock flex */
285 .eg-grid-cell-conf-header {
286   width: 4.4em;
287   font-weight: bold;
288 }
289
290 .eg-grid-row-selected {
291   color: rgb(51, 51, 51);
292   background-color: rgb(201, 221, 225);
293   border-bottom: 1px solid #888;
294 }
295
296 /* Improve ::selection styling by only allowing selection on text
297  * content cells within the main body of the grid.  Otherwise, the browser 
298  * styles row background and text (all dark blue?) when shift-click or 
299  * click-drag is used.
300  */
301 .eg-grid-content-body .eg-grid-row {
302   user-select:none;
303   -moz-user-select: none;
304   -webkit-user-select: none;
305 }
306 .eg-grid-content-body .eg-grid-cell-content {
307   user-select:text;
308   -moz-user-select: text;
309   -webkit-user-select: text;
310 }
311 .eg-grid-cell-content::-moz-selection {
312   color: rgb(51, 51, 51);
313   background: rgb(201, 221, 225);
314   border-bottom: 1px solid #888;
315 }
316 .eg-grid-cell-content::selection {
317   color: rgb(51, 51, 51);
318   background: rgb(201, 221, 225);
319   border-bottom: 1px solid #888;
320 }
321
322 .eg-grid-conf-cell-entry {
323   width:98%;
324   text-align:center;
325   padding: 3px;
326 }
327
328 .eg-grid-conf-cell-entry:not(:first-child) {
329   border-top:1px solid #ccc;
330 }
331
332 .eg-grid-conf-row {
333   background-color: #dff0d8;
334   border-color: #d6e9c6;
335 }
336
337 .eg-grid-conf-row:first-child {
338   /* alignment fix; account for one missing border */
339   padding-right: 1px;
340 }
341
342 .eg-grid-column-move-handle:hover {
343   cursor: move;
344 }
345
346 .eg-grid-column-move-handle-active,
347 .eg-grid-column-move-handle-active:active {
348   /* similar to label-primary, sans padding */
349   background-color: rgb(66, 139, 202);
350   color: #fff;
351 }
352
353 .eg-grid-col-hover {
354   /* similar to label-success, sans padding */
355   background-color: rgb(92, 184, 92);
356   color: #fff;
357 }
358
359 .eg-grid-column-resize-handle {
360   height: 100%;
361 }
362 .eg-grid-column-resize-handle:hover {
363   cursor: col-resize;
364 }
365
366 /* for these to be useful, they would have to be applied 
367  * to the dragover targets.  not yet done */
368 .eg-grid-column-resize-handle-west {
369   cursor: w-resize;
370 }
371 .eg-grid-column-resize-handle-east {
372   cursor: e-resize;
373 }
374
375 .eg-grid-column-last-mod {
376   background-color: #78FA89;
377 }
378
379 .eg-grid-menu-item {
380   margin-right: 10px;
381 }
382
383
384 /* hack to make the header columns line up with the content columns
385    when the scroll bar is visible along the right side of the content
386    columns. TODO: if this varies enough by browser, we'll need to
387    calculate the width instead. */
388 /*
389 .eg-grid-scroll > .eg-grid-header-row, 
390 .eg-grid-scroll > .eg-grid-conf-row { 
391   padding-right: 15px;
392 }
393 .eg-grid-scroll > .eg-grid-content-body {
394   overflow-y:scroll; 
395   height: 600px; 
396 }
397 */
398 .eg-grid-column-picker {
399   height: auto;
400   max-height: 400px;
401   overflow: auto;
402   box-shadow: none;
403 }
404
405
406 /* ----------------------------------------------------------------------
407  * /Grid
408  * ---------------------------------------------------------------------- */
409
410
411 /* simple flex container for consistent-width cell-based structures */
412 .flex-container-striped > .flex-row:nth-child(odd) {
413   background-color: #f5f5f5;
414 }
415 .flex-container-bordered .flex-cell {
416   border-bottom: 1px solid #ddd;
417 }
418 .flex-row {
419   display: flex;
420 }
421 .flex-row.padded div {
422   padding: 5px;
423 }
424 .flex-row.left-anchored > div {
425   margin-right: 10px;
426 }
427 .flex-cell {
428   flex: 1;
429   padding: 4px; /* bootstrap default is much bigger */
430 }
431 .flex-cell.well {
432   min-height: 2.5em; /* don't let empty wells scrunch down */
433   margin-bottom: 5px; /* bootstrap default is 20px */
434 }
435 .flex-2 { /* meh, convience */
436   flex: 2;
437 }
438 .flex-3 { /* meh, convience */
439   flex: 3;
440 }
441 .flex-4 { /* meh, convience */
442   flex: 4;
443 }
444
445 /* TODO: match media size to Bootstrap "md" col resizing */
446 @media all and (max-width: 800px) {
447   .flex-row {
448     flex-direction: column;
449   }
450   .eg-grid-row {
451     flex-direction: column;
452   }
453 }
454
455 /* optional class to make 'lg' Bootstrap modals even wider */
456 @media (min-width: 768px) {
457   .eg-wide-modal .modal-lg {
458     width: 95%;
459   }
460 }
461
462 @media all and (min-width: 800px) {
463     /* scrollable menus for full-size screens */
464     .scrollable-menu {
465         height: auto;
466         max-height: 200px;
467         overflow-x: hidden;
468     }
469 }
470
471 .eg-modal-progress progress {
472   width: 100%;
473   height: 25px;
474 }
475
476 .eg-grid-columns-modal-body {
477   max-height: 400px;
478   overflow: scroll;
479 }
480
481 .eg-grid-columns-modal-body .row {
482   padding: 2px 0px 2px 0px;
483   border-bottom: 1px solid #aaa;
484 }
485
486 .eg-grid-columns-modal-body .visible {
487   color: rgb(51, 51, 51);
488   background-color: rgb(201, 221, 225);
489   border-bottom: 1px solid #888;
490 }
491
492
493 eg-grid-field {
494   display: none;
495 }
496
497 [%# 
498 vim: ft=css 
499 %]