Бабблы
Десктопная версия
Мобильная версия
Бабблы
 | Мой баббл | #FF8C00 rgb (255, 140, 0) |
 | Ответный баббл | #E6E6E6 rgb (230, 230, 230) |
Стили текста:
— Bubble M (My) — Body M 500 (Normal) белый;
— Bubble M (Not mine) — Body M 300 (Normal) черный;
— Bubble S (My) — Body S 300 (Normal) белый;
— Bubble S (Not mine) — Body S 300 (Normal) серый;
Десктопная версия
Виджет чата вначале появляется в разделе истории. После того, как пользователь нажал на кнопку «Написать», чат открывается в отдельном модальном окне.
Виджет
Включает в себя:
— заголовок уровня H5;
— пояснение Body S 300 (Normal) серое;
—баббл в размере Bubble S;
— белый разделитель толщиной в 1px;
— Simple button в размере Minor.
Модальное окно
Выравнивается по центру экрана. Располагается на белом фоне #FFF с непрозрачностью 96%, rgba (255, 255, 255, 96).
Цвет фона в чате — #F5F5F5, rgb (245, 245, 245).
Включает в себя:
— заголовок уровня H4;
— пояснение Body S 300 (Normal) серое;
— баббл в размере Bubble M;
— дату переписки Body S 300 (Normal) серую;
— время отправки Body S 300 (Normal) серое;
— стандартное поле ввода;
— Brand button с иконкой в размере 40×40px.
К модальному окну добавляется тень уровня Z 4,
К сендбару и шапке — тень уровня Z 2.
Мобильная версия
Виджет чата вначале появляется в разделе истории. После того, как пользователь нажал на кнопку «Написать», чат открывается в отдельном модальном окне.
Виджет
Включает в себя:
— заголовок уровня H4 (Mobile);
— пояснение Body S 300 (Normal) серое;
— баббл в размере Bubble S;
— Simple button (Mobile) в размере Accent.
Модальное окно
Включает в себя:
— заголовок шапки Body L 500 (Compact) черный;
— пояснение Body S 300 (Normal) серое;
— баббл в размере Bubble S;
— дату переписки Body S 300 (Normal) серую;
— время отправки Body S 300 (Normal) серое;
— плейсхолдер Body M 300 (Normal) серый;
— введенный текст Body M 500 (Normal) черный;
— иконку 24×24px.
К сендбару и шапке добавляется тень уровня Z 1.
