Files
octopus/myproject/pos/static/pos/css/terminal.css

146 lines
2.6 KiB
CSS

/* POS Terminal Styles */
body {
background-color: #e9ecef;
}
/* Основной контейнер POS */
.pos-main-container {
position: fixed;
top: 56px; /* высота navbar */
left: 0;
right: 0;
bottom: 0;
background-color: white;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
overflow: hidden;
}
.pos-container {
max-width: 100%;
padding: 1rem;
height: 100%;
}
.product-card {
cursor: pointer;
user-select: none;
transition: all 0.2s;
border-radius: 12px;
border: 1px solid #dee2e6;
background: white;
height: 100%;
min-height: 140px;
}
.product-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.product-card.selected {
background: #e7f3ff;
border-color: #0d6efd;
}
.product-card .card-body {
padding: 1.25rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.product-name {
font-weight: 500;
font-size: 1rem;
margin-bottom: 0.5rem;
color: #495057;
}
.product-stock {
font-size: 0.9rem;
color: #6c757d;
font-style: italic;
}
/* Карточки категорий */
.category-card {
cursor: pointer;
user-select: none;
transition: all 0.2s;
border-radius: 12px;
border: 2px solid #dee2e6;
background: white;
height: 100%;
min-height: 40px;
}
.category-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-color: #0d6efd;
}
.category-card.active {
background: #0d6efd;
border-color: #0d6efd;
color: white;
}
.category-card .card-body {
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.category-name {
font-weight: 600;
font-size: 0.85rem;
}
/* Фиксация правой панели (корзина + кнопки) */
.right-panel-fixed {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 33.333%; /* 4/12 колонок */
overflow-y: auto;
padding: 1rem;
padding-right: 1.5rem;
z-index: 10;
display: flex;
flex-direction: column;
}
@media (max-width: 767.98px) {
.right-panel-fixed {
width: 100%;
left: 0;
}
}
/* Панель кнопок внутри фиксированного блока */
.action-buttons-panel {
margin-top: auto;
}
/* Стили для кнопок в панели действий */
.action-buttons-panel .btn {
font-size: 0.75rem;
line-height: 1.2;
white-space: normal;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem;
}