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