Open-ILS/src/templates/staff/css/style.css.tt2

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