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