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