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 }
  64
  65
  66 /* --------------------------------------------------------------------------
  67  * Temporaray local CSS required to make angular-ui-bootstrap
  68  * version 0.6.0 look right with Bootstrap CSS 3.0
  69  */
  70 .nav, .pagination, .carousel a { cursor: pointer; }
  71 /*
  72 .modal {
  73     display: block;
  74     height: 0;
  75     overflow: visible;
  76 }
  77 .modal-body:before,
  78 .modal-body:after {
  79     display: table;
  80     content: " ";
  81 }
  82 .modal-header:before,
  83 .modal-header:after {
  84     display: table;
  85     content: " ";
  86 }
  87 */
  88
  89 /* --------------------------------------------------------------------------
  90 /* Form Validation CSS - http://docs.angularjs.org/guide/forms
  91  * TODO: these colors are harsh and don't fit the EG color scheme
  92  */
  93 .form-validated input.ng-invalid.ng-dirty {
  94   background-color: #FA787E;
  95 }
  96 .form-validated input.ng-valid.ng-dirty {
  97   background-color: #78FA89;
  98 }
  99
 100 /* --------------------------------------------------------------------------
 101  * Local style
 102  */
 103
 104 #splash-nav .panel-body div {
 105     padding-bottom: 10px;
 106 }
 107
 108 table.list tr.selected td { /* deprecated? */
 109     color: #2a6496;
 110     background-color: #F5F5F5;
 111 }
 112
 113 .pad-horiz {padding : 0px 10px 0px 10px; }
 114 .pad-vert {padding : 20px 0px 10px 0px;}
 115 .pad-left {padding-left: 10px;}
 116 .pad-right {padding-right: 10px;}
 117 .pad-all-min {padding : 5px; }
 118 .pad-all {padding : 10px; }
 119
 120 #print-div { display: none; }
 121
 122 /* by default, give all tab panes some top padding */
 123 .tab-pane { padding-top: 20px; }
 124
 125 .nav-pills-like-tabs {
 126     border-bottom:1px solid #CCC;
 127 }
 128
 129 .btn-pad {
 130   /* sometimes you don't want buttons scrunched together -- add some margin */
 131   margin-left: 10px;
 132 }
 133
 134 .strong-text {
 135   font-weight: bold;
 136 }
 137 .strong-text-1 {
 138   font-size: 110%;
 139   font-weight: bold;
 140 }
 141 .strong-text-2 {
 142   font-size: 120%;
 143   font-weight: bold;
 144 }
 145 .strong-text-3 {
 146   font-size: 130%;
 147   font-weight: bold;
 148 }
 149 .strong-text-4 {
 150   font-size: 140%;
 151   font-weight: bold;
 152 }
 153
 154 .currency-input {
 155   width: 8em;
 156 }
 157
 158 /* barcode inputs are everywhere.  Let's have a consistent style. */
 159 .barcode { width: 16em !important; }
 160
 161 /* bootstrap alerts are heavily padded.  use this to reduce */
 162 .alert-less-pad {padding: 5px;}
 163
 164 /* text displayed inside a <progressbar>, typically the max/progress values */
 165 .progressbar-text {
 166   color:black;
 167   white-space:nowrap;
 168 }
 169
 170 /* embedded UI iframe */
 171 .eg-embed-frame {
 172   width: 100%;
 173 }
 174 .eg-embed-frame iframe {
 175   width: 100%;
 176   border: none;
 177   margin: 0px;
 178   padding: 0px;
 179 }
 180
 181 /* ----------------------------------------------------------------------
 182  * Grid
 183  * ---------------------------------------------------------------------- */
 184
 185 .eg-grid-primary-label {
 186   font-weight: bold;
 187   font-size: 120%;
 188 }
 189
 190 /* odd/even row styling */
 191 .eg-grid-content-body > div:nth-child(odd):not(.eg-grid-row-selected) {
 192   background-color: rgb(248, 248, 248);
 193 }
 194
 195 .eg-grid-row {
 196   width: 100%;
 197   display: flex;
 198   border: 1px solid #ccc;
 199 }
 200
 201 .eg-grid-row:not(.eg-grid-header-row):not(.eg-grid-conf-row) {
 202   /* TODO: remove, pretty sure this is no longer needed w/ nowrap */
 203   /*height: 1.8em;*/
 204 }
 205
 206 .eg-grid-action-row {
 207   border: none;
 208   /* margin should not have to be this large; something's up */
 209   margin-bottom: 12px;
 210 }
 211
 212 .eg-grid-header-row {
 213   font-weight: bold;
 214 }
 215
 216 .eg-grid-header-row > .eg-grid-cell {
 217   border-right: 1px solid #CCC;
 218   text-align: center;
 219
 220   /* vertically align header cell text by treating
 221      each header cell as a vertical flex container */
 222   display:flex;
 223   flex-direction:column;
 224   justify-content:flex-end;
 225 }
 226
 227 .eg-grid-cell {
 228   /* avoid text flowing into adjacent cells */
 229   white-space: nowrap;
 230   text-overflow: ellipsis;
 231   overflow: hidden;
 232 }
 233
 234 /* in config display, make cells more obvious */
 235 .eg-grid-as-conf .eg-grid-row {
 236   border: 1px solid #777;
 237 }
 238 .eg-grid-as-conf .eg-grid-cell {
 239   border-right: 1px solid #777;
 240 }
 241
 242 /* stock columns need fixed-width controls */
 243 .eg-grid-cell-stock {
 244   width: 2.2em;
 245   text-align: center;
 246 }
 247
 248 /* the conf header must be twice the stock flex */
 249 .eg-grid-cell-conf-header {
 250   width: 4.4em;
 251   font-weight: bold;
 252 }
 253
 254 .eg-grid-row-selected {
 255   color: rgb(51, 51, 51);
 256   background-color: rgb(201, 221, 225);
 257   border-bottom: 1px solid #888;
 258 }
 259
 260 /* Improve ::selection styling by only allowing selection on text
 261  * content cells within the main body of the grid.  Otherwise, the browser
 262  * styles row background and text (all dark blue?) when shift-click or
 263  * click-drag is used.
 264  */
 265 .eg-grid-content-body .eg-grid-row {
 266   user-select:none;
 267   -moz-user-select: none;
 268   -webkit-user-select: none;
 269 }
 270 .eg-grid-content-body .eg-grid-cell-content {
 271   user-select:text;
 272   -moz-user-select: text;
 273   -webkit-user-select: text;
 274 }
 275 .eg-grid-cell-content::-moz-selection {
 276   color: rgb(51, 51, 51);
 277   background: rgb(201, 221, 225);
 278   border-bottom: 1px solid #888;
 279 }
 280 .eg-grid-cell-content::selection {
 281   color: rgb(51, 51, 51);
 282   background: rgb(201, 221, 225);
 283   border-bottom: 1px solid #888;
 284 }
 285
 286 .eg-grid-conf-cell-entry {
 287   width:98%;
 288   text-align:center;
 289   padding: 3px;
 290 }
 291
 292 .eg-grid-conf-cell-entry:not(:first-child) {
 293   border-top:1px solid #ccc;
 294 }
 295
 296 .eg-grid-conf-row {
 297   background-color: #dff0d8;
 298   border-color: #d6e9c6;
 299 }
 300
 301 .eg-grid-conf-row:first-child {
 302   /* alignment fix; account for one missing border */
 303   padding-right: 1px;
 304 }
 305
 306 .eg-grid-column-move-handle:hover {
 307   cursor: move;
 308 }
 309
 310 .eg-grid-column-move-handle-active,
 311 .eg-grid-column-move-handle-active:active {
 312   /* similar to label-primary, sans padding */
 313   background-color: rgb(66, 139, 202);
 314   color: #fff;
 315 }
 316
 317 .eg-grid-col-hover {
 318   /* similar to label-success, sans padding */
 319   background-color: rgb(92, 184, 92);
 320   color: #fff;
 321 }
 322
 323 .eg-grid-column-resize-handle {
 324   height: 100%;
 325 }
 326 .eg-grid-column-resize-handle:hover {
 327   cursor: col-resize;
 328 }
 329
 330 /* for these to be useful, they would have to be applied
 331  * to the dragover targets.  not yet done */
 332 .eg-grid-column-resize-handle-west {
 333   cursor: w-resize;
 334 }
 335 .eg-grid-column-resize-handle-east {
 336   cursor: e-resize;
 337 }
 338
 339 .eg-grid-menu-item {
 340   margin-right: 10px;
 341 }
 342
 343
 344 /* hack to make the header columns line up with the content columns
 345    when the scroll bar is visible along the right side of the content
 346    columns. TODO: if this varies enough by browser, we'll need to
 347    calculate the width instead. */
 348 /*
 349 .eg-grid-scroll > .eg-grid-header-row,
 350 .eg-grid-scroll > .eg-grid-conf-row {
 351   padding-right: 15px;
 352 }
 353 .eg-grid-scroll > .eg-grid-content-body {
 354   overflow-y:scroll;
 355   height: 600px;
 356 }
 357 */
 358 .eg-grid-column-picker {
 359   height: auto;
 360   max-height: 400px;
 361   overflow: auto;
 362   box-shadow: none;
 363 }
 364
 365
 366 /* ----------------------------------------------------------------------
 367  * /Grid
 368  * ---------------------------------------------------------------------- */
 369
 370
 371 /* simple flex container for consistent-width cell-based structures */
 372 .flex-container-striped > .flex-row:nth-child(odd) {
 373   background-color: #f5f5f5;
 374 }
 375 .flex-container-bordered .flex-cell {
 376   border-bottom: 1px solid #ddd;
 377 }
 378 .flex-row {
 379   display: flex;
 380 }
 381 .flex-row.padded div {
 382   padding: 5px;
 383 }
 384 .flex-row.left-anchored > div {
 385   margin-right: 10px;
 386 }
 387 .flex-cell {
 388   flex: 1;
 389   padding: 4px; /* bootstrap default is much bigger */
 390 }
 391 .flex-cell.well {
 392   min-height: 2.5em; /* don't let empty wells scrunch down */
 393   margin-bottom: 5px; /* bootstrap default is 20px */
 394 }
 395 .flex-2 { /* meh, convience */
 396   flex: 2;
 397 }
 398
 399 /* TODO: match media size to Bootstrap "md" col resizing */
 400 @media all and (max-width: 800px) {
 401   .flex-row {
 402     flex-direction: column;
 403   }
 404   .eg-grid-row {
 405     flex-direction: column;
 406   }
 407 }
 408
 409
 410 [%#
 411 vim: ft=css
 412 %]