kpsul/kfet/static/kfet/css/kpsul.css
2017-04-04 00:51:49 +02:00

430 lines
6.8 KiB
CSS

input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#account, #checkout, #article_selection, #history, #basket, #basket_rel, #previous_op, #articles_data {
background:#fff;
}
@keyframes colorchange {
0% { background: yellow; }
50% { background: #660066; }
100% { background: yellow; }
}
/*
* Top row
*/
.row.kpsul_top {
padding:0 15px;
color:#000;
}
.row.kpsul_top > div {
margin-top:15px;
}
/* Account */
#account {
color:black;
height:120px;
}
#account[data_balance="ok"] #account_form input { background:#009011; color:#FFF;}
#account[data_balance="low"] #account_form input { background:#EC6400; color:#FFF; }
#account[data_balance="neg"] #account_form input { background:#C8102E; color:#FFF; }
#account[data_balance="frozen"] #account_form input { background:#000FBA; color:#FFF; }
#account_form {
padding:0;
height:100%;
}
#account_form input {
width:100%;
height:100%;
padding:0;
padding-bottom:10px;
border:0;
border-radius:0;
background:#f3f3f3;
font-family:'Roboto Mono';
font-size:50px;
font-weight:bold;
text-align:center;
text-transform:uppercase;
}
#account_data {
height:100%;
}
#account_data .data_line {
line-height:16px;
font-family:'Roboto Mono';
font-size:12px;
}
#account_data #account-balance_ukf {
height:40px;
line-height:40px;
font-size:35px;
font-weight:bold;
}
#account-name {
font-weight:bold;
}
#account-is_cof {
font-weight:bold;
}
#account .buttons {
position:absolute;
bottom:0;
right:0;
}
@media (min-width: 600px) {
#account_form input { font-size:60px; }
@media (min-width: 768px) {
#account{ height:160px; }
#account_form input { font-size: 70px; }
#account_name { font-size:60px; }
#account_data .data_line {
font-size:14px;
line-height:24px;
}
#account_data #account-balance_ukf {
font-size:50px;
line-height:60px;
height:60px;
}
#account { margin-right:0; }
#account_form input { font-size:85px; }
@media (min-width: 992px) {
#account_form input { font-size:100px; }
}
}
}
/* Checkout */
#checkout {
padding:0;
height:160px;
font-family:'Roboto Mono';
}
#checkout_form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor:pointer;
outline:none;
border:0;
width:100%;
height:50px;
padding:0 15px;
background:#c8102e;
color:#fff;
font-weight:bold;
font-size:18px;
}
#checkout_form select option {
height:25px;
padding:0 15px;
line-height:25px;
font-weight:normal;
font-size:14px;
background-color:rgba(255,255,255,0.1);
}
#checkout_data {
padding:0 15px;
}
#checkout_data .buttons {
position:absolute;
bottom:0;
right:0;
}
#addcost {
position:absolute;
bottom:0;
left:0;
height:32px;
line-height:32px;
padding:0 10px;
background:#c8102e;
color:#fff;
font-weight:bold;
animation: blink 1.5s steps(1) infinite;
}
@keyframes blink { 50% { visibility: hidden; } }
/*
* Second part
*/
.row.kpsul_middle {
margin:15px 0;
font-family:'Roboto Mono';
color:#000;
}
.row.kpsul_middle > div {
padding:0;
height:100%;
}
.row.kpsul_middle > div:first-child > div {
margin-right:0;
}
.row.kpsul_middle > div+div {
margin-top:15px;
}
@media (min-width:768px) {
.row.kpsul_middle > div:first-child > div {
margin-right:15px
}
.row.kpsul_middle > div {
margin-top:0 !important;
}
}
/* Special operations */
#special_operations {
height:40px;
}
#special_operations button {
height:100%;
width:25%;
float:left;
background:#c8102e;
color:#FFF;
font-size:18px;
font-weight:bold;
}
#special_operations button:focus, #special_operations button:hover {
outline:none;
background:#000;
color:#fff;
}
/* Article autocomplete */
#article_selection {
height:40px;
width:100%;
}
#article_selection input, #article_selection span {
height:100%;
float:left;
border:0;
border-right:1px solid #c8102e;
border-bottom:1px solid #c8102e;
border-radius:0;
font-size:16px;
font-weight:bold;
}
#article_selection input+input #article_selection input+span {
border-right:0;
}
#article_autocomplete {
width:80%;
padding-left:10px;
}
#article_number {
width:10%;
text-align:center;
}
#article_stock {
width:10%;
line-height:38px;
text-align:center;
}
@media (min-width:1200px) {
#article_autocomplete {
width:84%
}
#article_number {
width:8%;
}
#article_stock {
width:8%;
}
}
/* Article data */
#articles_data {
overflow:auto;
max-height:500px;
}
#articles_data table {
width: 100%;
}
#articles_data table tr.article {
height:25px;
font-size:14px;
}
#articles_data table tr.article>td:first-child {
padding-left:10px;
}
#articles_data table tr.category {
height:35px;
background-color:#c8102e;
font-size:16px;
color:#FFF;
font-weight:bold;
}
#articles_data table tr.category>td:first-child {
padding-left:20px;
}
#articles_data .article.low-stock {
background:rgba(236,100,0,0.3);
}
#articles_data .article:hover {
background:rgba(200,16,46,0.3);
cursor:pointer;
}
/* Second part - Left - bottom */
.kpsul_middle_left_bottom {
margin:15px 0 0;
}
.kpsul_middle_left_bottom > div {
height:160px;
padding:0;
}
#basket, #basket_rel, #previous_op {
height:100%;
}
#basket_rel, #previous_op {
border-top:1px solid #C8102E;
padding-left: 3px;
}
#basket {
overflow:auto;
}
@media (min-width:768px) {
#basket {
margin-right:7px;
}
#basket_rel {
border-top:0;
margin-left:7px;
margin-right:7px;
}
#previous_op {
border-top:0;
margin-left:7px;
}
}
#basket table {
width:100%;
}
#basket table tr {
height:25px;
font-size:14px;
}
#basket tr .amount {
width:70px;
padding-right:15px;
text-align:right;
}
#basket tr .number {
width:50px;
padding-right:15px;
text-align:right;
}
#basket tr .lowstock {
display:none;
padding-right:15px;
}
#basket tr.ui-selected, #basket tr.ui-selecting {
background-color:rgba(200,16,46,0.6);
color:#FFF;
}
/* History */
#previous_op .trigramme {
width:100%;
background-color:rgba(200,16,46,0.85);
color:#FFF;
font-weight:bold;
padding:3px;
margin-left: -3px;
margin-bottom: 3px;
}
.kpsul_middle_right_col {
overflow:auto;
}