Настройка стилей
Стандартные стили
Стили, выделенные зелёным заголовком, являются стандартными, удалить их нельзя, но можно отредактировать.
Стиль -1 (DELETED) – описывает внешний вид удалённого заказа/блюда.
Стили 0-5 (NEWORDER-TAKEN) – описывают внешний вид заказов с определённым статусом. 0 – новый заказ, 5 – выданный.
Данные стили для конкретного клиента (не затрагивая остальные клиенты сервера) могут быть перегружены с помощью блока «условия-действия» пользовательскими стилями.
Пользовательские стили
Стили с номером 100+ – являются пользовательскими, их можно редактировать, удалять и создавать новые. Количество стилей для одного сервера ограничено номером 999
Принципы работы со стилями
Стили собираются в один файл CSS. Соответственно, все стили должны подчиняться правилам формирования CSS.
Стили собираются в CSS-файл в порядке их нумерации. Важно не изменять номера после создания стиля.
При создании нового стиля – все элементы должны начинаться с .style-new. При сохранении, «new» будет изменено на корректный новый номер. Например:
|
При создании стиля и копировании элемента из другого стиля – номер стиля следует изменить на new, как в предыдущем пункте. При сохранении, «new» будет изменено на корректный новый номер стиля.
При копировании элемента из одного стиля в другой стиль – обязательно следует изменить номер стиля в копируемом элементе на тот, в который копируем. Например, если мы скопируем следующее
|
из 101 в 102 стиль, но номер не изменим – работать такой стиль не будет, т.к. в итоговом CSS-файле стилей просто будет продублирован стиль заголовка для 101 стиля.
Важно: при создании кастомных пользовательских стилей – желательно минимизировать используемое в нём количество элементов и использовать только необходимые. Это связано с тем, что при срабатывании нескольких условий – идёт расчёт, какие стили перекроют друг друга, при этом могут быть перекрыты лишние элементы (получат внешний вид из другого стиля).
Доступные элементы
Некоторые параметры могут быть захардкожены и недоступны для изменения через пользовательские стили
Заголовок заказа
| Элемент | Описание | Настраиваемые свойства |
|---|---|---|
| .header | Заголовок заказа (контейнер) | |
| .header .order-num | Номер заказа | |
| .header .times .ready | Первый таймер заголовка. Он же таймер для simple-заголовка | |
| .header .times .start | Второй таймер заголовка | |
| .header .table-name | Стол | |
| .header .pay-info .icon-coin-dollar | Иконка оплаты | background-image, width, height, max-width, max-height |
| .header .pay-info .pay-img | Изображение оплаты | |
| .header .parking-info .icon-travel-car | Иконка парковки | background-image, width, height, max-width, max-height |
| .header .parking-info .parking-num | Номер парковки | |
| .header .eq-number | Номер электронной очереди | |
| .header .order-type | Тип заказа | |
| .header .order-category | Категория заказа | |
| .header .items-count | Кол-во элементов | padding-top, padding-right |
| .header .guest-count | Кол-во гостей | |
| .header .sub-header .line-value .order-text | Компактное отображение инфо о заказе, однострочный заголовок | |
| .header .header-item | Общий контейнер для элементов заголовка | padding-top, padding-bottom |
| БК-тема | ||
| .bk-header | Заголовок заказа (контейнер) для БК-темы. Для использования вышеперечисленных элементов - меняем .header на .bk-header. Например, .bk-header .order-num | |
| .bk-header-dc | Заголовок заказа (контейнер) для БК-темы, доставка. Для использования вышеперечисленных элементов - меняем .header на .bk-header-dc | |
| .bk-header-yf | Заголовок заказа (контейнер) для БК-темы, Яндекс-еда. Для использования вышеперечисленных элементов - меняем .header на .bk-header-yf | |
| .bk-header.header | Стиль для всего заголовка | |
| .bk-header .order-info | Контейнер для информации о заказе | font-size, padding, line-height, white-space |
| .bk-header .order-type-content | Контейнер для типа заказа | |
| .bk-header .img-container | Контейнер для иконки | |
| .bk-header .order-type-icon | Иконка типа заказа (напр., cash-icon, drive-icon) | background-image, width, height, max-width, max-height |
| .bk-header .order-type-ext | Доп. инфо о типе заказа | |
| .bk-header .order-guest-count | Кол-во гостей | |
| .bk-header .order-time | Время заказа, содержит ready (см. выше) | |
| .bk-header .order-info-simple | Контейнер для упрощённой информации | |
| .bk-header .order-num-item | Номер заказа (в контейнере order-info-simple) | font-size, padding, line-height, white-space |
| .bk-header .order-state-item | Статус заказа (в контейнере order-info-simple) | font-size, padding, line-height, white-space |
| Доставка (БК-тема) | ||
| .bk-header .order-info-delivery | Контейнер информации о доставке | font-size, padding, line-height, white-space |
| .bk-header .extra-info-item | Контейнер доп. данных | font-size, padding, line-height, white-space |
| .bk-header .order-id-item | ID заказа | font-size, padding, line-height, white-space |
| .bk-header .order-sum-item | Сумма заказа | font-size, padding, line-height, white-space |
| .bk-header .order-info-delivery-mobile | Мобильный заказа | font-size, padding, line-height, white-space |
| .bk-header .top-item | Верхняя часть информации | font-size, padding, line-height, white-space |
| .bk-header .bottom-item | Нижняя часть информации | font-size, padding, line-height, white-space |
| Драйв (БК-тема) | ||
| .bk-header .order-info-drive-mp | Контейнер информации о драйве | |
| .bk-header .order-info-drive-mp-parking | Контейнер информации о парковке | |
| .bk-header .order-guest-item | Информация о госте | |
| .bk-header .order-guest-item-content | Контент информации о госте | |
| .bk-header .order-guest-car-info | Информация о машине | |
| .bk-header .car-num | Номер машины | |
| .bk-header .small-drive | Иконка драйв-парковки | |
Настраиваемые свойства (Общие)
|
Элемент заказа
| .item | Элемент заказа (любой - блюдо, модификатор, курс) |
| .dish.level-0 | Блюдо или комбо-заголовок, контейнер |
| .dish.level-1 | Комбо-компонент, контейнер |
| .modifier.level-1 | Модификатор блюда, контейнер |
| .modifier.level-2 | Модификатор комбо-компонента, контейнер |
| .item-cell | Ячейка элемента. Можно использовать, например, как .modifier.level-2 .item-cell |
| .item-cell .item-num | Номер строки |
| .item-cell .item-count | Кол-во |
| .item-cell .item-name | Название блюда/модификатора |
| .item-cell .item-recipe | Индикатор рецепта |
| .item-cell .item-sel-indicator | Индикатор выбора (в окне подтверждения) |
| .item-count | Кол-во |
| .item-name | Название. Использование - например, .item .item-name или .modifier.level-1 .item-name |
| .combo | Комбо-блюдо |
.course | Курс подачи |
.category | Категория |
Настраиваемые свойства
|
Футер заказа
| .footer | Весь футер |
| .footer .extProperties | Контейнер дополнительных свойств |
| .footer .extProperties<N> | Элементы дополнительных свойств. extProperties1...extProperties9 |
| .footer .comment | Комментарий заказа |
| .footer .info | Контейнер для времени и имени официанта |
| .footer .left-time | Таймер |
| .footer .left-time .seconds | Секунды таймера |
.footer .left-time .minutes | Минуты таймера |
| .footer .waiter-name | Официант |
| .footer .multiline-text | Многострочный текст |
Настраиваемые свойства
|
Кнопки действий
Кнопки кроме .action-btn можно описывать в common-разделе
| .action-btn | Кнопка изменения статуса (в стилях 1-5) |
| .parking-btn | Парковка |
| .print-btn | Печать |
| .waiter-btn | Официант |
| .recipe-btn | Рецептура |
| .apply-btn | Применить |
| .action-count | Предупреждение |
| .action-pause | Пауза |
| .action-start | Старт |
Настраиваемые свойства
|
Примеры стилей
Отключить границы между компонентами комбо-блюда
|
