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