/* Компактные формы и таблицы документов — в стиле Material Design 3 */ /* Поле только для отображения (Автор и т.п.) */ .ws-form-compact .ws-readonly { color: var(--ws-text-primary); font-size: 14px; } .ws-form-compact .ws-order-total-row { margin-top: 0.75rem; margin-bottom: 0; font-size: 14px; } /* Подпись слева от поля, в одну строку */ .ws-form-compact .ws-form-group { display: flex; flex-direction: row; align-items: center; gap: 6px 12px; flex-wrap: wrap; } .ws-form-compact .ws-form-group label { margin-bottom: 0; flex-shrink: 0; min-width: 6.5rem; width: 6.5rem; font-size: 12px; color: var(--ws-text-secondary); } .ws-form-compact .ws-form-group input, .ws-form-compact .ws-form-group select { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 8px; height: auto; min-height: 30px; line-height: 1.35; font-size: 14px; } .ws-form-compact .ws-form-group .ws-text-danger { flex-basis: 100%; margin-left: 7.5rem; } .ws-form-compact .ws-form-row { display: grid; gap: 10px; margin-bottom: 6px; align-items: center; } /* Строка Дата + Номер: две равные колонки, чёткая сетка */ .ws-form-compact .ws-form-row-date-number { grid-template-columns: 1fr 1fr; } .ws-form-compact .ws-form-row-date-number .ws-form-group { min-width: 0; } .ws-form-compact .ws-form-row-date-number .ws-field-date input, .ws-form-compact .ws-form-row-date-number .ws-field-number input { flex: 1; min-width: 0; width: 100%; } .ws-form-compact .ws-form-row-date-number .ws-field-date input { min-width: 10rem; } /* Поле даты — кнопка календаря в стиле MD3 */ .ws-form-compact input[type="date"]::-webkit-calendar-picker-indicator { background-color: var(--ws-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; padding: 6px; border-radius: 8px; cursor: pointer; opacity: 1; } .ws-form-compact input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: var(--ws-accent-hover); } .ws-form-compact input[type="date"]::-moz-focus-inner { border: none; } @supports (-moz-appearance: none) { .ws-form-compact input[type="date"] { padding-right: 2.5rem; } } /* Вид заказа, Организация, Клиент, Автор — на всю ширину формы, две колонки */ .ws-form-compact .ws-form-row-2 { grid-template-columns: 1fr 1fr; max-width: 100%; } .ws-form-compact .ws-form-row-2 .ws-form-group input, .ws-form-compact .ws-form-row-2 .ws-form-group select { max-width: 100%; width: 100%; } /* Таблица товаров — компактные колонки, без горизонтального скролла */ .ws-table-wrap { overflow-x: hidden; max-width: 100%; border-radius: 12px; } .ws-table-items { table-layout: fixed; width: 100%; min-width: 0; border-collapse: collapse; } .ws-table-items th, .ws-table-items td { overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; padding: 10px 12px; } .ws-table-items .ws-col-product { width: 45%; } .ws-table-items .ws-col-price { width: 14%; } .ws-table-items .ws-col-currency { width: 12%; } .ws-table-items .ws-col-qty { width: 10%; } .ws-table-items .ws-col-cost { width: 14%; } .ws-table-items .ws-col-del { width: 5%; } /* Кнопка удаления строки (MD3 icon button) */ .ws-table-items .ws-btn-remove-row { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: transparent; color: #ef5350; font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.2s; } .ws-table-items .ws-btn-remove-row:hover { background: rgba(239, 83, 80, 0.12); color: #e53935; } .ws-table-items .ws-col-product select { max-width: 100%; overflow: hidden; text-overflow: ellipsis; border-radius: 8px; } .ws-table-items .ws-col-price input { width: 100% !important; max-width: 100%; text-align: right; font-variant-numeric: tabular-nums; box-sizing: border-box; padding: 8px 12px; border-radius: 8px; } .ws-table-items .ws-col-qty input[type="number"] { -moz-appearance: textfield; border-radius: 8px; } .ws-table-items .ws-col-qty input[type="number"]::-webkit-outer-spin-button, .ws-table-items .ws-col-qty input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ws-table-items .ws-col-currency select { max-width: 100%; border-radius: 8px; } .ws-table-items td.ws-col-qty input, .ws-table-items .ws-col-qty input { width: 4ch !important; max-width: 100%; box-sizing: border-box; }