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