1 /* --------------------------------------------------------------------------
2 * Simple default navbar style adjustements to apply the Evergreen color.
3 * TODO: style other components to match EG color scheme
5 #top-navbar.navbar-default {
6 background: -webkit-linear-gradient(#00593d, #007a54);
7 background-color: #007a54;
10 #top-navbar.navbar-default .navbar-nav>li>a {
13 #top-navbar.navbar-default .navbar-nav>li>a:hover {
16 #top-navbar.navbar-default .navbar-nav>.dropdown>a .caret {
17 border-top-color: #fff;
18 border-bottom-color: #fff;
20 #top-navbar.navbar-default .navbar-nav>.dropdown>a:hover .caret {
21 border-top-color: #ddd;
22 border-bottom-color: #ddd;
25 /* status bar along the bottom of the page ------------------------ */
26 /* decrease padding to decrease overall height */
28 /** TODO:move status bar items into navbar config entry (top-right)
29 * to avoid body padding weirdness. Or if we want a permenently
30 * visible status bar, maybe put it just below the navbar.. */
32 /* bottom padding ensures no body content is hidden behind the status
33 * bar. When content reaches the status bar a scroll bar appears */
34 /*body { padding-bottom: 26px; }*/
37 min-height:1.8em !important;
45 #status-bar > li > a {
46 padding-top:5px !important;
47 padding-bottom:5px !important;
49 .status-bar-connected {
50 color: rgb(92, 184, 92); /* success */
53 /* --------------------------------------------------------------------------
54 * Structural modifications
57 #top-content-container {
58 /* allow the primary container to occupy most of the page,
59 * but leave some narrow gutters along the side, much
60 * narrower than the default Bootstrapp container gutters.
66 /* --------------------------------------------------------------------------
67 * Temporaray local CSS required to make angular-ui-bootstrap
68 * version 0.6.0 look right with Bootstrap CSS 3.0
70 .nav, .pagination, .carousel a { cursor: pointer; }
89 /* --------------------------------------------------------------------------
90 /* Form Validation CSS - http://docs.angularjs.org/guide/forms
91 * TODO: these colors are harsh and don't fit the EG color scheme
93 .form-validated input.ng-invalid.ng-dirty {
94 background-color: #FA787E;
96 .form-validated input.ng-valid.ng-dirty {
97 background-color: #78FA89;
100 /* --------------------------------------------------------------------------
104 #splash-nav .panel-body div {
105 padding-bottom: 10px;
108 table.list tr.selected td { /* deprecated? */
110 background-color: #F5F5F5;
113 .pad-horiz {padding : 0px 10px 0px 10px; }
114 .pad-vert {padding : 20px 0px 10px 0px;}
115 .pad-left {padding-left: 10px;}
116 .pad-right {padding-right: 10px;}
117 .pad-all-min {padding : 5px; }
118 .pad-all {padding : 10px; }
120 #print-div { display: none; }
122 /* by default, give all tab panes some top padding */
123 .tab-pane { padding-top: 20px; }
125 .nav-pills-like-tabs {
126 border-bottom:1px solid #CCC;
130 /* sometimes you don't want buttons scrunched together -- add some margin */
158 /* barcode inputs are everywhere. Let's have a consistent style.
159 * In most cases, form-control (etc.) CSS overrides this, so we
160 * still have to use id-based style. */
161 .barcode { width: 16em; }
163 /* bootstrap alerts are heavily padded. use this to reduce */
164 .alert-less-pad {padding: 5px;}
166 /* text displayed inside a <progressbar>, typically the max/progress values */
172 /* ----------------------------------------------------------------------
174 * ---------------------------------------------------------------------- */
176 .eg-grid-primary-label {
181 /* odd/even row styling */
182 .eg-grid-content-body > div:nth-child(odd):not(.eg-grid-row-selected) {
183 background-color: rgb(248, 248, 248);
189 border: 1px solid #ccc;
192 .eg-grid-row:not(.eg-grid-header-row):not(.eg-grid-conf-row) {
193 /* TODO: remove, pretty sure this is no longer needed w/ nowrap */
197 .eg-grid-action-row {
199 /* margin should not have to be this large; something's up */
203 .eg-grid-header-row {
207 .eg-grid-header-row > .eg-grid-cell {
208 border-right: 1px solid #CCC;
211 /* vertically align header cell text by treating
212 each header cell as a vertical flex container */
214 flex-direction:column;
215 justify-content:flex-end;
219 /* avoid text flowing into adjacent cells */
221 text-overflow: ellipsis;
225 /* in config display, make cells more obvious */
226 .eg-grid-as-conf .eg-grid-row {
227 border: 1px solid #777;
229 .eg-grid-as-conf .eg-grid-cell {
230 border-right: 1px solid #777;
233 /* stock columns need fixed-width controls */
234 .eg-grid-cell-stock {
239 /* the conf header must be twice the stock flex */
240 .eg-grid-cell-conf-header {
245 .eg-grid-row-selected {
246 color: rgb(51, 51, 51);
247 background-color: rgb(201, 221, 225);
248 border-bottom: 1px solid #888;
251 /* Improve ::selection styling by only allowing selection on text
252 * content cells within the main body of the grid. Otherwise, the browser
253 * styles row background and text (all dark blue?) when shift-click or
254 * click-drag is used.
256 .eg-grid-content-body .eg-grid-row {
258 -moz-user-select: none;
259 -webkit-user-select: none;
261 .eg-grid-content-body .eg-grid-cell-content {
263 -moz-user-select: text;
264 -webkit-user-select: text;
266 .eg-grid-cell-content::-moz-selection {
267 color: rgb(51, 51, 51);
268 background: rgb(201, 221, 225);
269 border-bottom: 1px solid #888;
271 .eg-grid-cell-content::selection {
272 color: rgb(51, 51, 51);
273 background: rgb(201, 221, 225);
274 border-bottom: 1px solid #888;
277 .eg-grid-conf-cell-entry {
283 .eg-grid-conf-cell-entry:not(:first-child) {
284 border-top:1px solid #ccc;
288 background-color: #dff0d8;
289 border-color: #d6e9c6;
292 .eg-grid-conf-row:first-child {
293 /* alignment fix; account for one missing border */
297 .eg-grid-column-move-handle:hover {
301 .eg-grid-column-move-handle-active,
302 .eg-grid-column-move-handle-active:active {
303 /* similar to label-primary, sans padding */
304 background-color: rgb(66, 139, 202);
309 /* similar to label-success, sans padding */
310 background-color: rgb(92, 184, 92);
314 .eg-grid-column-resize-handle {
317 .eg-grid-column-resize-handle:hover {
321 /* for these to be useful, they would have to be applied
322 * to the dragover targets. not yet done */
323 .eg-grid-column-resize-handle-west {
326 .eg-grid-column-resize-handle-east {
335 /* hack to make the header columns line up with the content columns
336 when the scroll bar is visible along the right side of the content
337 columns. TODO: if this varies enough by browser, we'll need to
338 calculate the width instead. */
340 .eg-grid-scroll > .eg-grid-header-row,
341 .eg-grid-scroll > .eg-grid-conf-row {
344 .eg-grid-scroll > .eg-grid-content-body {
349 .eg-grid-column-picker {
357 /* ----------------------------------------------------------------------
359 * ---------------------------------------------------------------------- */
362 /* simple flex container for consistent-width cell-based structures */
363 .flex-container-striped > .flex-row:nth-child(odd) {
364 background-color: #f5f5f5;
366 .flex-container-bordered .flex-cell {
367 border-bottom: 1px solid #ddd;
372 .flex-row.padded div {
375 .flex-row.left-anchored > div {
380 padding: 4px; /* bootstrap default is much bigger */
383 min-height: 2.5em; /* don't let empty wells scrunch down */
384 margin-bottom: 5px; /* bootstrap default is 20px */
386 .flex-2 { /* meh, convience */
390 /* TODO: match media size to Bootstrap "md" col resizing */
391 @media all and (max-width: 800px) {
393 flex-direction: column;
396 flex-direction: column;