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