681 lines
11 KiB
CSS
681 lines
11 KiB
CSS
/* Основные стили согласно ТЗ */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Calibri', sans-serif;
|
||
background-color: #F5F5F5; /* белый дым */
|
||
color: #333;
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* Шапка */
|
||
header {
|
||
background-color: #696969; /* темно-серый */
|
||
color: white;
|
||
padding: 15px 0;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
header .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.logo img {
|
||
height: 50px;
|
||
width: auto;
|
||
}
|
||
|
||
.logo h1 {
|
||
font-size: 1.8rem;
|
||
font-weight: 500;
|
||
color: white;
|
||
}
|
||
|
||
/* Навигация */
|
||
nav ul {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: 20px;
|
||
}
|
||
|
||
nav ul li a {
|
||
color: white;
|
||
text-decoration: none;
|
||
padding: 8px 15px;
|
||
border-radius: 4px;
|
||
transition: background-color 0.3s;
|
||
font-weight: 500;
|
||
}
|
||
|
||
nav ul li a:hover {
|
||
background-color: #E0E0E0; /* светло-серый */
|
||
color: #696969;
|
||
}
|
||
|
||
nav ul li a.active {
|
||
background-color: #E0E0E0;
|
||
color: #696969;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.btn-add {
|
||
background-color: #E0E0E0;
|
||
color: #696969 !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Поиск */
|
||
.search-bar {
|
||
flex: 1;
|
||
max-width: 400px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.search-bar form {
|
||
display: flex;
|
||
gap: 5px;
|
||
}
|
||
|
||
.search-bar input,
|
||
.search-bar select {
|
||
padding: 8px 12px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-family: 'Calibri', sans-serif;
|
||
}
|
||
|
||
.search-bar input {
|
||
flex: 1;
|
||
}
|
||
|
||
.search-bar button {
|
||
padding: 8px 15px;
|
||
background-color: #E0E0E0;
|
||
color: #696969;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.search-bar button:hover {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Основной контент */
|
||
main {
|
||
flex: 1;
|
||
padding: 30px 0;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.page-header h2 {
|
||
font-size: 2rem;
|
||
color: #696969;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* Кнопки */
|
||
.btn-export,
|
||
.btn-import,
|
||
.btn-view,
|
||
.btn-edit,
|
||
.btn-back,
|
||
.btn-submit {
|
||
display: inline-block;
|
||
padding: 8px 16px;
|
||
text-decoration: none;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
transition: all 0.3s;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-family: 'Calibri', sans-serif;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.btn-export {
|
||
background-color: #696969;
|
||
color: white;
|
||
}
|
||
|
||
.btn-import {
|
||
background-color: #E0E0E0;
|
||
color: #696969;
|
||
}
|
||
|
||
.btn-view {
|
||
background-color: #F5F5F5;
|
||
color: #696969;
|
||
border: 1px solid #E0E0E0;
|
||
}
|
||
|
||
.btn-edit {
|
||
background-color: #E0E0E0;
|
||
color: #696969;
|
||
}
|
||
|
||
.btn-back {
|
||
background-color: #F5F5F5;
|
||
color: #696969;
|
||
border: 1px solid #E0E0E0;
|
||
}
|
||
|
||
.btn-submit {
|
||
background-color: #696969;
|
||
color: white;
|
||
padding: 12px 30px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.btn-export:hover,
|
||
.btn-submit:hover {
|
||
background-color: #555;
|
||
}
|
||
|
||
.btn-import:hover,
|
||
.btn-edit:hover {
|
||
background-color: #D0D0D0;
|
||
}
|
||
|
||
/* Карточки заказов */
|
||
.orders-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||
gap: 25px;
|
||
}
|
||
|
||
.order-card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
transition: transform 0.3s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.order-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.order-header {
|
||
background-color: #E0E0E0;
|
||
padding: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.order-header h3 {
|
||
font-size: 1.2rem;
|
||
color: #696969;
|
||
}
|
||
|
||
.order-status {
|
||
padding: 3px 8px;
|
||
border-radius: 3px;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-новый {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
}
|
||
|
||
.status-в_обработке {
|
||
background-color: #FFC107;
|
||
color: #333;
|
||
}
|
||
|
||
.status-завершен {
|
||
background-color: #2196F3;
|
||
color: white;
|
||
}
|
||
|
||
.order-body {
|
||
padding: 15px;
|
||
flex: 1;
|
||
}
|
||
|
||
.order-body p {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.order-items-preview {
|
||
margin: 15px 0;
|
||
padding: 10px;
|
||
background-color: #F5F5F5;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.order-items-preview ul {
|
||
margin-top: 5px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.order-total {
|
||
margin-top: 15px;
|
||
padding-top: 10px;
|
||
border-top: 2px solid #E0E0E0;
|
||
}
|
||
|
||
.subtotal {
|
||
font-size: 0.95rem;
|
||
color: #666;
|
||
}
|
||
|
||
.discount {
|
||
color: #4CAF50;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.total {
|
||
font-size: 1.2rem;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.order-footer {
|
||
padding: 15px;
|
||
background-color: #F5F5F5;
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* Таблицы */
|
||
.items-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.items-table thead {
|
||
background-color: #696969;
|
||
color: white;
|
||
}
|
||
|
||
.items-table th,
|
||
.items-table td {
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
}
|
||
|
||
.items-table tbody tr {
|
||
border-bottom: 1px solid #E0E0E0;
|
||
}
|
||
|
||
.items-table tbody tr:hover {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.items-table tfoot {
|
||
background-color: #E0E0E0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.items-table .total-row {
|
||
background-color: #696969;
|
||
color: white;
|
||
}
|
||
|
||
.text-right {
|
||
text-align: right;
|
||
}
|
||
|
||
/* Формы */
|
||
.order-form {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 25px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.form-section {
|
||
margin-bottom: 30px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #E0E0E0;
|
||
}
|
||
|
||
.form-section h3 {
|
||
color: #696969;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
color: #555;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid #E0E0E0;
|
||
border-radius: 4px;
|
||
font-family: 'Calibri', sans-serif;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group select:focus,
|
||
.form-group textarea:focus {
|
||
outline: none;
|
||
border-color: #696969;
|
||
}
|
||
|
||
.item-row {
|
||
margin-bottom: 15px;
|
||
padding: 15px;
|
||
background-color: #F5F5F5;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.item-fields {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr 1fr auto;
|
||
gap: 10px;
|
||
align-items: end;
|
||
}
|
||
|
||
.item-total {
|
||
padding-bottom: 10px;
|
||
font-weight: 600;
|
||
color: #696969;
|
||
}
|
||
|
||
.btn-add-item,
|
||
.btn-remove-item {
|
||
padding: 8px 12px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.btn-add-item {
|
||
background-color: #696969;
|
||
color: white;
|
||
width: 100%;
|
||
padding: 12px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.btn-remove-item {
|
||
background-color: #ff6b6b;
|
||
color: white;
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.btn-add-item:hover {
|
||
background-color: #555;
|
||
}
|
||
|
||
.btn-remove-item:hover {
|
||
background-color: #ff5252;
|
||
}
|
||
|
||
.form-actions {
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
/* Карточки товаров и поставщиков */
|
||
.products-grid,
|
||
.suppliers-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.product-card,
|
||
.supplier-card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.product-card:hover,
|
||
.supplier-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.product-header,
|
||
.supplier-header {
|
||
background-color: #E0E0E0;
|
||
padding: 15px;
|
||
}
|
||
|
||
.product-header h3,
|
||
.supplier-header h3 {
|
||
color: #696969;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.product-body,
|
||
.supplier-body {
|
||
padding: 15px;
|
||
}
|
||
|
||
.product-body p,
|
||
.supplier-body p {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.in-stock {
|
||
color: #4CAF50;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.out-of-stock {
|
||
color: #ff6b6b;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.product-footer,
|
||
.supplier-footer {
|
||
padding: 15px;
|
||
background-color: #F5F5F5;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Результаты поиска */
|
||
.search-results {
|
||
list-style: none;
|
||
}
|
||
|
||
.search-result-item {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.search-result-item:hover {
|
||
transform: translateX(5px);
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.result-type {
|
||
display: inline-block;
|
||
padding: 3px 8px;
|
||
border-radius: 3px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.result-type.order {
|
||
background-color: #2196F3;
|
||
color: white;
|
||
}
|
||
|
||
.result-type.product {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
}
|
||
|
||
.result-type.supplier {
|
||
background-color: #FF9800;
|
||
color: white;
|
||
}
|
||
|
||
/* Уведомления */
|
||
.alert {
|
||
padding: 12px 20px;
|
||
border-radius: 4px;
|
||
margin-bottom: 20px;
|
||
animation: slideIn 0.3s;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateY(-20px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.alert-success {
|
||
background-color: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
|
||
.alert-error {
|
||
background-color: #f8d7da;
|
||
color: #721c24;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
|
||
.alert-warning {
|
||
background-color: #fff3cd;
|
||
color: #856404;
|
||
border: 1px solid #ffeeba;
|
||
}
|
||
|
||
/* Пустое состояние */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.empty-state p {
|
||
font-size: 1.2rem;
|
||
color: #666;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Футер */
|
||
footer {
|
||
background-color: #696969;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
margin-top: auto;
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 768px) {
|
||
header .container {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
nav ul {
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.search-bar {
|
||
max-width: 100%;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.orders-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.item-fields {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.page-header {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.items-table {
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.items-table th,
|
||
.items-table td {
|
||
padding: 8px 10px;
|
||
}
|
||
} |