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