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