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