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