Справка по редактированию стилей виджетов

Редактор стилей позволяет изменять цветовую раскраску интерфейсов всех трёх виджетов.
Стили описываются в формате JSON. Для редактирования доступны описываемые ниже параметры.

Стили корзинного виджета

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 { // Основной цвет фона "background": "#fff", // Цвет шрифта "color": "#222", // Цвет фона верхней панели (с городом) "topPanelBackground": "#fff", // Цвет шрифта верхней панели "topPanelColor": "#fff", // Цвет шагов "stepsColor": "#BBB", // Цвет активного шага "stepsActiveColor": "#a22", // Цвет шрифта вкладок блока выбора доставки "tabsColor": "#222", // Цвет фона вкладок блока выбора доставки "tabsBackground": "#fff", // Цвет границ вкладок блока выбора доставки "tabsBorderColor": "#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" }

Если объявленные вами стили не применяются, вероятнее всего, вы допустили синтаксическую ошибку. Информация об ошибке компиляции стилей выводится виджетом в консоль браузера.

Стили карточного виджета

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 { // Основной цвет фона "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" }

Если объявленные вами стили не применяются, вероятнее всего, вы допустили синтаксическую ошибку. Информация об ошибке компиляции стилей выводится виджетом в консоль браузера.

Стили трекинг-виджета

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 { // Основной цвет фона "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" }

Если объявленные вами стили не применяются, вероятнее всего, вы допустили синтаксическую ошибку. Информация об ошибке компиляции стилей выводится виджетом в консоль браузера.