addons/point_of_sale/static/src/css/pos.css

   1
   2 .point-of-sale {
   3     padding: 0;
   4     margin: 0;
   5     background-color: #f0eeee;
   6     font-family: "Lucida Grande", Helvetica, Verdana, Arial;
   7     color: #555555;
   8     font-size: 12px;
   9     position: absolute;
  10     left: 0;
  11     top: 0;
  12     width: 100%;
  13     height: 100%;
  14 }
  15 .point-of-sale table {
  16     border-spacing: 0;
  17     border-collapse: collapse;
  18 }
  19 .point-of-sale td {
  20     border: 1px solid #e9eaec;
  21 }
  22 .point-of-sale input {
  23     color: #555555;
  24 }
  25 .point-of-sale a {
  26     text-decoration: none;
  27     color: #555555;
  28 }
  29 .point-of-sale button, .point-of-sale a.button {
  30     display: inline-block;
  31     cursor: pointer;
  32     padding: 4px 10px;
  33     font-size: 11px;
  34     border: 1px solid #cacaca;
  35     -moz-border-radius: 4px;
  36     -webkit-border-radius: 4px;
  37     border-radius: 4px;
  38     background: #e2e2e2;
  39     background: -moz-linear-gradient(#f0f0f0, #e2e2e2);
  40     background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e2e2e2));
  41 }
  42 .point-of-sale ul, .point-of-sale ol {
  43     padding: 0;
  44     margin: 0;
  45 }
  46 .point-of-sale li {
  47     list-style-type: none;
  48 }
  49 .point-of-sale button img {
  50     vertical-align: bottom;
  51 }
  52 .point-of-sale .pos-rigth-align {
  53     text-align: right;
  54 }
  55 .point-of-sale .pos-rigth-align input {
  56     text-align: right;
  57 }
  58 .point-of-sale #container {
  59     width: 100%;
  60     height: 100%;
  61 }
  62 .point-of-sale #topheader {
  63     width: 100%;
  64     height: 54px;
  65     color: gray;
  66     border-top: solid 1px #d3d3d3;
  67     border-bottom: solid 1px black;
  68     background: #393939;
  69     background: -moz-linear-gradient(#7b7979, #393939);
  70     background: -webkit-gradient(linear, left top, left bottom, from(#7b7979), to(#393939));
  71 }
  72 .point-of-sale #topheader button {
  73     color: black;
  74     border: 1px solid black;
  75     background: #7f82ac;
  76     background: -moz-linear-gradient(#b2b3d7, #7f82ac);
  77     background: -webkit-gradient(linear, left top, left bottom, from(#b2b3d7), to(#7f82ac));
  78 }
  79 .point-of-sale #branding, .point-of-sale #rightheader {
  80     float: left;
  81     overflow: hidden;
  82     height: 35px;
  83     padding: 10px;
  84 }
  85 .point-of-sale #rightheader {
  86     float: none;
  87     margin-left: 440px;
  88 }
  89 .point-of-sale #branding {
  90     border-right: 1px solid #373737;
  91     text-align: left;
  92     width: 419px;
  93 }
  94 .point-of-sale #branding img {
  95     height: 32px;
  96     width: 116px;
  97 }
  98 .point-of-sale #neworder-button {
  99     width: 32px;
 100     padding: 4px 10px;
 101 }
 102 .point-of-sale #loggedas {
 103     float: right;
 104     padding: 5px 9px;
 105     text-align: center;
 106     color: white;
 107     border-left: 1px solid #373737;
 108 }
 109 .point-of-sale #loggedas p {
 110     margin: 0 0 3px 0;
 111 }
 112 .point-of-sale #content {
 113     width: 100%;
 114     position: absolute;
 115     top: 56px;
 116     bottom: 0;
 117 }
 118 .point-of-sale #leftpane {
 119     height: 100%;
 120     width: 440px;
 121     position: relative;
 122     border-right: solid 1px #afafb6;
 123     background-color: white;
 124 }
 125 .point-of-sale #leftpane footer {
 126     position: absolute;
 127     bottom: 0;
 128     left: 0;
 129     width: 100%;
 130     background-color: #e0e0e0;
 131     background-image: url(../img/headerbackground.jpg);
 132     white-space: nowrap;
 133 }
 134 .point-of-sale #current-order {
 135     width: 100%;
 136     position: absolute;
 137     top: 0;
 138     bottom: 271px;
 139     overflow: auto;
 140 }
 141 .point-of-sale #current-order thead {
 142     background-color: #cccccc;
 143     background-image: url(../img/headerbackground.jpg);
 144     border: 0px;
 145     font-size: 12px;
 146     width: 440px;
 147 }
 148 .point-of-sale #current-order thead td {
 149     text-align: center;
 150     padding: 8px 0px;
 151     min-width: 40px;
 152     font-size: 12px;
 153 }
 154 .point-of-sale #current-order td {
 155     padding: 6px 4px;
 156     font-size: 11px;
 157     text-align: right;
 158     min-width: 40px;
 159     white-space: nowrap;
 160 }
 161 .point-of-sale #current-order td:first-child {
 162     width: 320px;
 163     padding: 6px;
 164     text-align: left;
 165     text-overflow: ellipsis;
 166 }
 167 .point-of-sale #current-order td:last-child {
 168     border-right: none;
 169 }
 170 .point-of-sale #current-order tr.selected {
 171     background-color: #e9eaf2;
 172 }
 173 .point-of-sale #current-order tr.selected td {
 174     border-top: 2px solid #d5d6e0;
 175     border-bottom: 1px solid #d5d6e0;
 176     padding-top: 5px;
 177     color: #555555;
 178 }
 179 .point-of-sale #amounts {
 180     background: white;
 181     border-bottom: solid 1px #d2d2d2;
 182     border-top: solid 1px #e9eaec;
 183     font-weight: bold;
 184     text-align: right;
 185     -webkit-margin-before: 0;
 186     -webkit-margin-after: 0;
 187 }
 188 .point-of-sale #amounts li {
 189     display: inline-block;
 190     padding: 8px;
 191     width: 29%;
 192 }
 193 .point-of-sale #paypad {
 194     padding: 8px 4px 8px 8px;
 195     display: inline-block;
 196     text-align: center;
 197     vertical-align: top;
 198 }
 199 .point-of-sale #paypad button {
 200     height: 54px;
 201     width: 208px;
 202     margin: 0 -3px;
 203     font-weight: bold;
 204     vertical-align: middle;
 205     color: #555555;
 206     border-top: 1px solid #efefef;
 207 }
 208 .point-of-sale #paypad button:hover {
 209     color: white;
 210     background: #7f82ac;
 211     background: -moz-linear-gradient(#9d9fc5, #7f82ac);
 212     background: -webkit-gradient(linear, left top, left bottom, from(#9d9fc5), to(#7f82ac));
 213 }
 214 .point-of-sale #numpad {
 215     padding: 8px 8px 8px 4px;
 216     display: inline-block;
 217     text-align: center;
 218 }
 219 .point-of-sale #numpad button {
 220     height: 54px;
 221     width: 54px;
 222     margin: 0 -3px;
 223     font-weight: bold;
 224     vertical-align: middle;
 225     color: #555555;
 226     border-top: 1px solid #efefef;
 227 }
 228 .point-of-sale #numpad button:hover {
 229     color: white;
 230     background: #7f82ac;
 231     background: -moz-linear-gradient(#9d9fc5, #7f82ac);
 232     background: -webkit-gradient(linear, left top, left bottom, from(#9d9fc5), to(#7f82ac));
 233 }
 234 .point-of-sale #numpad .selected-mode {
 235     color: white;
 236     background: #7f82ac;
 237     background: -moz-linear-gradient(#9d9fc5, #7f82ac);
 238     background: -webkit-gradient(linear, left top, left bottom, from(#9d9fc5), to(#7f82ac));
 239 }
 240 .point-of-sale .payment-button {
 241     font-size: 14px;
 242 }
 243 .point-of-sale .input-button {
 244     font-size: 24px;
 245 }
 246 .point-of-sale .mode-button, .point-of-sale #numpad-delete, .point-of-sale #numpad-minus {
 247     font-size: 14px;
 248 }
 249 .point-of-sale #rightpane {
 250     position: absolute;
 251     top: 0;
 252     bottom: 0;
 253     left: 441px;
 254     right: 0;
 255     height: 100%;
 256     vertical-align: top;
 257 }
 258 .point-of-sale #rightpane header {
 259     padding: 0;
 260     height: 32px;
 261     border-bottom: 1px solid #cecbcb;
 262     background: #d3d3d3;
 263     background: -moz-linear-gradient(white, #d3d3d3);
 264     background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d3d3d3));
 265 }
 266 .point-of-sale .product-list {
 267     overflow: auto;
 268     position: absolute;
 269     top: 72px;
 270     bottom: 0;
 271 }
 272 .point-of-sale .breadcrumb li {
 273     float: left;
 274     line-height: 32px;
 275     height: 32px;
 276 }
 277 .point-of-sale .breadcrumb li:last-child {
 278     padding-right: 3px;
 279     border-right: 1px solid #c5c5c5;
 280 }
 281 .point-of-sale .breadcrumb a {
 282     display: inline-block;
 283     padding: 0 9px;
 284     vertical-align: top;
 285     text-shadow: #f7f7f7 0 1px 1px;
 286     color: #555555;
 287     font-weight: bold;
 288 }
 289 .point-of-sale .bc-arrow {
 290     height: 33px;
 291 }
 292 .point-of-sale .homeimg {
 293     width: 19px;
 294     height: 19px;
 295     margin: 6px 0;
 296 }
 297 .point-of-sale .searchbox {
 298     position: absolute;
 299     right: 2px;
 300 }
 301 .point-of-sale .searchbox input {
 302     width: 130px;
 303     -moz-border-radius: 11px;
 304     -webkit-border-radius: 11px;
 305     border-radius: 11px;
 306     border: 1px solid #cecbcb;
 307     padding: 3px 19px;
 308     margin: 6px;
 309     background: url("../img/search.png") no-repeat 5px;
 310     background-color: white;
 311 }
 312 .point-of-sale .search-clear {
 313     position: absolute;
 314     top: 11px;
 315     right: 11px;
 316     cursor: pointer;
 317     display: none;
 318 }
 319 .point-of-sale #categories {
 320     border-bottom: 1px solid #cecbcb;
 321 }
 322 .point-of-sale #categories h4 {
 323     display: inline-block;
 324     margin: 9px 5px;
 325 }
 326 .point-of-sale #categories ol {
 327     display: inline;
 328 }
 329 .point-of-sale #categories li {
 330     display: inline-block;
 331 }
 332 .point-of-sale #categories .button {
 333     padding: 6px 14px;
 334     margin: 4px 0;
 335     font-size: 12px;
 336 }
 337 .point-of-sale .product {
 338     vertical-align: top;
 339     display: inline-block;
 340     font-size: 11px;
 341     margin: 5px;
 342     max-width: 120px;
 343     border: 1px solid lightgray;
 344     -moz-border-radius: 4px;
 345     -webkit-border-radius: 4px;
 346     border-radius: 4px;
 347     -moz-box-shadow: 0px 1px 4px #777777;
 348     -webkit-box-shadow: 0px 1px 4px #777777;
 349     -box-shadow: 0px 1px 4px #777777;
 350 }
 351 .point-of-sale .product-img {
 352     position: relative;
 353     width: 120px;
 354     height: 100px;
 355     background: white;
 356     text-align: center;
 357 }
 358 .point-of-sale .price-tag {
 359     position: absolute;
 360     top: 2px;
 361     right: 2px;
 362     vertical-align: top;
 363     color: white;
 364     background: #7f82ac;
 365     padding: 2px 5px;
 366     -moz-border-radius: 3px;
 367     -webkit-border-radius: 3px;
 368     border-radius: 3px;
 369 }
 370 .point-of-sale .product-name {
 371     padding: 3px;
 372 }
 373 .point-of-sale #login-form label, .point-of-sale #login-form input {
 374     display: block;
 375 }
 376 .point-of-sale #login-form input {
 377     margin: 4px 0 12px;
 378     padding: 4px;
 379     width: 96%;
 380 }
 381 .point-of-sale div#order-selector {
 382     display: inline;
 383 }
 384 .point-of-sale ol#orders {
 385     display: inline;
 386 }
 387 .point-of-sale li.order-selector-button {
 388     display: inline;
 389 }
 390 .point-of-sale li.selected-order button {
 391     font-weight: 900;
 392 }
 393
 394 .point-of-sale .step-screen {
 395     text-align: center;
 396 }
 397 .point-of-sale .step-screen header h2 {
 398     margin-top: 0px;
 399     padding-top: 7px;
 400 }
 401
 402 .point-of-sale .pos-step-container {
 403     display: inline-block;
 404     font-size: 1.5em;
 405 }
 406 .point-of-sale .pos-payment-container {
 407     text-align: left;
 408 }
 409 .point-of-sale .pos-payment-container .payment-due {
 410     display: block;
 411     margin-top: 10px;
 412     margin-bottom: 10px;
 413     padding: 3px 6px 0px 6px;
 414     background-color: white;
 415     border:1px solid grey;
 416     border-radius: 3px;
 417 }
 418 .point-of-sale .pos-payment-container table {
 419     width: 100%;
 420     margin-bottom: 20px;
 421 }
 422 .point-of-sale .pos-payment-container .paymentline-type {
 423     font-size: 0.8em;
 424     font-weight: bold;
 425 }
 426 .point-of-sale .step-screen button {
 427     width: 50%;
 428     text-align: center;
 429     padding: 7px 0 7px 0;
 430     font-size: 0.8em;
 431     font-weight: bold;
 432 }
 433 .point-of-sale .pos-sale-ticket {
 434     text-align: left;
 435     width: 300px;
 436     background-color: white;
 437     margin: 20px;
 438     padding: 10px;
 439     display: inline-block;
 440 }
 441 .point-of-sale .pos-sale-ticket table {
 442     width: 100%;
 443     border: 0;
 444 }
 445 .point-of-sale .pos-sale-ticket table td {
 446     border: 0;
 447 }
 448 .point-of-sale .pos-receipt-container {
 449     font-size: 0.75em;
 450 }
 451
 452 .point-of-sale .oe_pos_synch-notification-button {
 453     color: white;
 454     border: 1px solid black;
 455     border-radius: 3px;
 456     padding: 2px 3px 2px 3px;
 457     background-color: #D92A2A;
 458 }
 459
 460 .receipt-buttons {
 461         white-space: nowrap;
 462 }
 463
 464 .pos-payment-buttons {
 465     white-space: nowrap;
 466 }
 467
 468 @media print {
 469     #oe_header, #oe_menu, .point-of-sale #topheader, .point-of-sale #leftpane {
 470         display: none;
 471     }
 472     .point-of-sale #content {
 473         top: 0px;
 474     }
 475     .point-of-sale #rigthpane {
 476         left: 0px;
 477         background-color: white;
 478     }
 479     #receipt-screen header, .receipt-buttons {
 480         display: none;
 481     }
 482     #receipt-screen {
 483         text-align: left;
 484     }
 485     .pos-sale-ticket {
 486         margin: 0;
 487     }
 488 }
 489