Редактор стилей позволяет изменять цветовую раскраску интерфейсов всех трёх виджетов.
Стили описываются в формате JSON. Для редактирования доступны описываемые ниже параметры.
{
// Основной цвет фона
"background": "#fff",
// Цвет шрифта
"color": "#222",
// Цвет фона верхней панели (с городом)
"topPanelBackground": "#fff",
// Цвет шрифта верхней панели
"topPanelColor": "#fff",
// Цвет шагов
"stepsColor": "#BBB",
// Цвет активного шага
"stepsActiveColor": "#a22",
// Цвет шрифта вкладок блока выбора доставки
"tabsColor": "#222",
// Цвет фона вкладок блока выбора доставки
"tabsBackground": "#fff",
// Цвет границ вкладок блока выбора доставки
"tabBorderColor": "#777",
// Цвет шрифта выбранной вкладки
"selectedTabColor": "#444",
// Цвет фона выбранной вкладки
"selectedTabBackground": "#fff",
// Цвет границы выбранной вкладки
"selectedTabBorderColor": "555",
// Радиус скругления углов вкладок
"tabsBorderRadius": "7px",
// Цвет фона при наведении на список курьерских доставок, групп ПВЗ, отдельных ПВЗ
"deliveryListHover": "#F4F4F4",
// Цвет горизонтальных разделителей в списках курьерских доставок, групп ПВЗ, отдельных ПВЗ,
// а также цвет рамок списков
"deliveryListSeparators": "#F4F4F4",
// Цвет фона выбранного способа доставки
"selectedDeliveryBackground": "#F4F4F4",
// Цвет полоски слева у выбранного способа доставки
"selectedDeliveryLineColor": "#a22",
// Цвет выделения лучшего предложения по цене или сроку
"bestVariantColor": "#67C23A",
// Цвет фона панели фильтров
"filtersBackground": "#FFF",
// Цвет границы поля ввода
"inputBorderColor": "#dcdfe6",
// Цвет границы поля ввода при ошибке валидации (и текста сообщения об ошибке)
"invalidInputBorderColor": "#a22",
// Цвет фона поля ввода
"inputBackground": "#fff",
// Цвет шрифта в поле ввода
"inputColor": "#222",
// Радиус скругления углов поля ввода
"inputBorderRadius": "7px",
// Цвет фона всплывающего календаря
"datepickerBackground": "#fff",
// Цвет шрифта всплывающего календаря
"datepickerColor": "#222",
// Цвет выбранного дня во всплывающем календаре
"datepickerSelectedColor": "#a22",
// Радиус скругления углов всплывающего календаря
"datepickerBorderRadius": "7px",
// Цвета переключателей-чекбоксов и слайдеров
"switchAndSliderActiveColor": "#a22",
"switchAndSliderInactiveColor": "#BBB",
"switchAndSliderSecondColor": "#FFF",
// Цвет радиопереключателя
"radioColor": "#fff",
// Цвет выбранного варианта в радиопереключателе
"radioCheckedColor": "#a22",
// Цвет фона выпадающего списка
"dropdownBackground": "#fff",
// Цвет шрифта выпадающего списка
"dropdownColor": "#222",
// Цвет шрифта выбранного варианта в выпадающем списке
"dropdownSelectedColor": "#40a9ff",
// Цвет фона выпадающего списка при наведении на вариант
"dropdownHoverBackground": "#eee",
// Цвет шрифта выпадающего списка при наведении на вариант
"dropdownHoverColor": "#222",
// Цвет горизонтальных разделителей в выпадающем списке
"dropdownSeparatorsColor": "#999",
// Цвет шрифта тегов
"dropdownTagsColor": "#222",
// Цвет тегов
"dropdownTagsBackgroundColor": "#eee",
// Радиус скругления углов выпадающего списка и тегов
"dropdownBorderRadius": "7px",
// Цвет основных (красных) кнопок
"buttonBackground": "#474747",
// Цвет шрифта основных кнопок
"buttonColor": "#fff",
// Цвет дополнительных кнопок
"secondaryButtonBackground": "#474747",
// Цвет шрифта дополнительных кнопок
"secondaryButtonColor": "#fff",
// Радиус скругления углов всех кнопок
"buttonBorderRadius": "7px",
// Цвет иконок доставки
"deliveryIconsColor": "#444",
// Цвет ссылок и кнопок-ссылок
"linkColor": "#a22",
// Цвет всплывающих подсказок
"tooltipBackground": "#222",
// Цвет шрифта всплывающих подсказок
"tooltipColor": "#fff",
// Радиус скругления углов всплывающих подсказок
"tooltipBorderRadius": "7px",
// Цвет фона всплывающих окон
"modalBackground": "#fff",
// Цвет крестика закрытия всплывающих окон
"modalCloseColor": "#a22",
// Цвет знаков (?) возле цен (подсказки с ценами в доп. валюте)
"altCurrencyHintColor": "#eee",
// Цвет заголовков в шапке таблицы (график работы)
"theadColor": "#777",
// Цвет границ ячеек таблицы (график работы)
"tableBorderColor": "#ebeef5",
// Цвет индикатора начальной загрузки виджета (спиннера)
"loaderColor": "#40a9ff",
// Цвет фона нижней панели с индикатором загрузки способов доставки
"deliveryLoaderBackgroundColor": "#fff",
// Цвет фона нотификаций об ошибках и уведомления об отсутствии осмотра вложения
"notificationBackground": "#A22",
// Цвет шрифта нотификаций об ошибках и уведомления об отсутствии осмотра вложения
"notificationColor": "#A22",
// Радиус скругления углов нотификаций об ошибках и уведомления об отсутствии осмотра вложения
"notificationBorderRadius": "8px"
}
Если объявленные вами стили не применяются, вероятнее всего, вы допустили синтаксическую ошибку. Информация об ошибке компиляции стилей выводится виджетом в консоль браузера.
{
// Основной цвет фона
"background": "#fff",
// Цвет шрифта
"color": "#222",
// Цвет фона верхней панели (с городом)
"topPanelBackground": "#fff",
// Цвет шрифта верхней панели
"topPanelColor": "#fff",
// Цвет границы поля ввода
"inputBorderColor": "#dcdfe6",
// Цвет фона поля ввода
"inputBackground": "#fff",
// Цвет шрифта в поле ввода
"inputColor": "#222",
// Радиус скругления углов поля ввода
"inputBorderRadius": "7px",
// Цвет фона списка населённых пунктов
"dropdownBackground": "#eee",
// Цвет шрифта списка населённых пунктов
"dropdownColor": "#222",
// Цвет фона при наведении на элемент списка
"dropdownHoverBackground": "#ddd",
// Цвет шрифта при наведении на элемент списка
"dropdownHoverColor": "#333",
// Цвет горизонтальных разделителей в списке
"dropdownSeparatorsColor": "#999",
// Радиус скругления углов списка
"dropdownBorderRadius": "7px",
// Цвет всплывающих подсказок
"tooltipBackground": "#222",
// Цвет шрифта всплывающих подсказок
"tooltipColor": "#fff",
// Радиус скругления углов всплывающих подсказок
"tooltipBorderRadius": "7px",
// Цвет основных (красных) кнопок
"buttonBackground": "#474747",
// Цвет шрифта основных кнопок
"buttonColor": "#fff",
// Цвет дополнительных (серых) кнопок
"secondaryButtonBackground": "#474747",
// Цвет шрифта дополнительных кнопок
"secondaryButtonColor": "#fff",
// Радиус скругления углов всех кнопок
"buttonBorderRadius": "7px",
// Цвет фона всплывающих окон
"modalBackground": "#fff",
// Цвет знаков (?) возле цен (подсказки с ценами в доп. валюте)
"altCurrencyHintColor": "#eee",
// Цвет заголовков в шапке таблицы
"theadColor": "#777",
// Цвет границ таблицы
"tableBorderColor": "#ebeef5",
// Цвет индикатора загрузки
"loaderColor": "#40a9ff"
}
Если объявленные вами стили не применяются, вероятнее всего, вы допустили синтаксическую ошибку. Информация об ошибке компиляции стилей выводится виджетом в консоль браузера.
{
// Основной цвет фона
"background": "#fff",
// Цвет шрифта
"color": "#222",
// Цвет фона верхней панели
"topPanelBackground": "#fff",
// Цвет переключателя
"radioColor": "#fff",
// Цвет выбранного варианта в переключателе
"radioCheckedColor": "#a22",
// Цвет границы поля ввода
"inputBorderColor": "#dcdfe6",
// Цвет границы поля ввода при ошибке валидации (и текста сообщения об ошибке)
"invalidInputBorderColor": "#a22",
// Цвет фона поля ввода
"inputBackground": "#fff",
// Цвет шрифта в поле ввода
"inputColor": "#222",
// Радиус скругления углов поля ввода
"inputBorderRadius": "7px",
// Цвет основных (красных) кнопок
"buttonBackground": "#474747",
// Цвет шрифта основных кнопок
"buttonColor": "#fff",
// Цвет дополнительных (серых) кнопок
"secondaryButtonBackground": "#474747",
// Цвет шрифта дополнительных кнопок
"secondaryButtonColor": "#fff",
// Радиус скругления углов всех кнопок
"buttonBorderRadius": "7px",
// Цвет всплывающих подсказок
"tooltipBackground": "#222",
// Цвет шрифта всплывающих подсказок
"tooltipColor": "#fff",
// Радиус скругления углов всплывающих подсказок
"tooltipBorderRadius": "7px",
// Цвет фона всплывающих окон
"modalBackground": "#fff",
// Цвет крестика закрытия всплывающих окон
"modalCloseColor": "#a22",
// Цвет таймлайна истории статусов
"timelineColor": "#777",
// Цвет ссылки
"linkColor": "#a22",
// Цвет фона нотификаций об ошибках
"notificationBackground": "#A22",
// Цвет шрифта нотификаций об ошибках
"notificationColor": "#A22",
// Радиус скругления углов нотификаций об ошибках
"notificationBorderRadius": "8px"
}
Если объявленные вами стили не применяются, вероятнее всего, вы допустили синтаксическую ошибку. Информация об ошибке компиляции стилей выводится виджетом в консоль браузера.