tdesktop/Telegram/SourceFiles/chat_helpers/chat_helpers.style

/*
This file is part of Telegram Desktop,
the official desktop application for the Telegram messaging service.

For license and copyright information please follow this link:
https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
*/
using "ui/basic.style";

using "boxes/boxes.style";
using "ui/widgets/widgets.style";

EmojiPan {
	margin: margins;
	padding: margins;
	desiredSize: pixels;
	verticalSizeSub: pixels;
	header: pixels;
	headerLeft: pixels;
	headerLockLeft: pixels;
	headerLockedLeft: pixels;
	headerTop: pixels;
	footer: pixels;
	iconSkip: pixels;
	iconWidth: pixels;
	iconArea: pixels;
	bg: color;
	overBg: color;
	fadeLeft: icon;
	fadeRight: icon;
}

switchPmButton: RoundButton(defaultBoxButton) {
	width: 320px;
	height: 34px;
	textTop: 7px;
}
stickersRestrictedLabel: FlatLabel(defaultFlatLabel) {
	minWidth: 200px;
	align: align(center);
	textFg: noContactsColor;
}

stickersTrendingHeader: 56px;
stickersTrendingSkip: 4px;

stickersTrendingHeaderFont: semiboldFont;
stickersTrendingHeaderFg: windowFg;
stickersTrendingHeaderTop: 11px;
stickersTrendingSubheaderFont: normalFont;
stickersTrendingSubheaderFg: windowSubTextFg;
stickersTrendingSubheaderTop: 31px;

emojiPanButtonRight: 7px;
emojiPanButtonTop: 10px;
emojiPanButton: RoundButton(defaultActiveButton) {
	width: -24px;
	height: 23px;
	textTop: 2px;
}
emojiPanExpand: RoundButton(defaultActiveButton) {
	font: font(12px bold);
	width: -8px;
	height: 19px;
	textTop: 1px;
}

stickersTrendingAddTop: 14px;
stickersTrendingAdd: RoundButton(defaultActiveButton) {
	width: -16px;
	height: 26px;
	textTop: 4px;
}
stickersRemove: IconButton(defaultIconButton) {
	width: 40px;
	height: 40px;

	icon: icon {{ "info/info_media_delete", menuIconFg }};
	iconOver: icon {{ "info/info_media_delete", menuIconFgOver }};

	rippleAreaSize: 40px;
	rippleAreaPosition: point(0px, 0px);
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: windowBgOver;
	}
}
stickersUndoRemove: RoundButton(defaultLightButton) {
	width: -16px;
	height: 26px;
	textTop: 4px;
}
stickersRemoveSkip: 4px;
stickersReorderIcon: icon {{ "stickers_reorder", menuIconFg }};
stickersReorderSkip: 13px;

stickersTabs: defaultTabsSlider;

stickerEmojiSkip: 5px;

stickersFeaturedBadgeFont: font(12px bold);
stickersFeaturedBadgeSize: 15px;
stickersFeaturedBadgeTextTop: -1px;
stickersFeaturedBadgePadding: 4px;
stickersFeaturedBadgeSkip: 4px;
stickersFeaturedBadgeTop: 9px;
stickersFeaturedPen: lightButtonFg;
stickersFeaturedUnreadBg: msgFileInBg;
stickersFeaturedUnreadSize: 5px;
stickersFeaturedUnreadSkip: 5px;
stickersFeaturedUnreadTop: 7px;
stickersFeaturedInstalled: icon {{ "chat/input_save", lightButtonFg }};

stickersMaxHeight: 320px;
stickersPadding: margins(19px, 13px, 19px, 13px);
stickersSize: size(64px, 64px);
emojiSetPadding: margins(12px, 0px, 12px, 0px);
emojiSetMaxHeight: 197px;
emojiSetSize: size(42px, 39px);
stickersScroll: ScrollArea(boxScroll) {
	deltat: 19px;
	deltab: 9px;
}
stickersReorderPadding: margins(0px, 12px, 0px, 12px);
stickersReorderFg: windowSubTextFg;
stickersRowDisabledOpacity: 0.4;
stickersRowDuration: 200;

stickersSettings: icon {{ "emoji/emoji_settings", emojiIconFg }};
stickersTrending: icon {{ "emoji/stickers_add", emojiIconFg }};
stickersTrendingUnread: icon {
	{ "emoji/stickers_add_unread", emojiIconFg },
	{ "emoji/stickers_add_dot", dialogsUnreadBg }
};
stickersRecent: icon {{ "emoji/emoji_recent", emojiIconFg }};
stickersSearch: icon {{ "emoji/stickers_search", emojiIconFg }};
stickersPremium: icon {{ "emoji/stickers_premium", emojiIconFg }};

stickersSettingsUnreadSize: 6px;
stickersSettingsUnreadPosition: point(6px, 10px);

filtersRemove: IconButton(stickersRemove) {
	ripple: defaultRippleAnimation;
}

emojiPanMargins: margins(10px, 10px, 10px, 10px);

emojiTabs: SettingsSlider(defaultTabsSlider) {
	height: 55px;
	barTop: 52px;
	labelTop: 19px;
}
emojiScroll: defaultSolidScroll;
emojiRecent: icon {{ "emoji/emoji_recent", emojiIconFg }};
emojiRecentActive: icon {{ "emoji/emoji_recent", emojiSubIconFgActive }};
emojiPeople: icon {{ "emoji/emoji_people", emojiIconFg }};
emojiPeopleActive: icon {{ "emoji/emoji_people", emojiSubIconFgActive }};
emojiNature: icon {{ "emoji/emoji_nature", emojiIconFg }};
emojiNatureActive: icon {{ "emoji/emoji_nature", emojiSubIconFgActive }};
emojiFood: icon {{ "emoji/emoji_food", emojiIconFg }};
emojiFoodActive: icon {{ "emoji/emoji_food", emojiSubIconFgActive }};
emojiActivity: icon {{ "emoji/emoji_activity", emojiIconFg }};
emojiActivityActive: icon {{ "emoji/emoji_activity", emojiSubIconFgActive }};
emojiTravel: icon {{ "emoji/emoji_travel", emojiIconFg }};
emojiTravelActive: icon {{ "emoji/emoji_travel", emojiSubIconFgActive }};
emojiObjects: icon {{ "emoji/emoji_objects", emojiIconFg }};
emojiObjectsActive: icon {{ "emoji/emoji_objects", emojiSubIconFgActive }};
emojiSymbols: icon {{ "emoji/emoji_symbols", emojiIconFg }};
emojiSymbolsActive: icon {{ "emoji/emoji_symbols", emojiSubIconFgActive }};

emojiCategoryIconTop: 6px;
emojiPanAnimation: PanelAnimation(defaultPanelAnimation) {
	fadeBg: emojiPanBg;
}
emojiPanPadding: 12px;
emojiPanWidth: 345px;
emojiPanMinHeight: 278px;
emojiPanMaxHeight: 640px;
emojiPanHeightRatio: 0.75;
emojiPanShowDuration: 200;
emojiPanDuration: 200;
emojiPanHover: windowBgOver;
emojiPanSlideDuration: 200;
emojiPanArea: size(34px, 32px);
emojiPanLeft: 13px;
emojiPanRight: 17px;
emojiPanRadius: 8px;

defaultEmojiPan: EmojiPan {
	margin: margins(roundRadiusSmall, 0px, 14px, 0px);
	padding: margins(13px, 12px, 17px, 12px);
	desiredSize: 39px;
	verticalSizeSub: 2px;
	header: 40px;
	headerLeft: 23px;
	headerLockLeft: 17px;
	headerLockedLeft: 36px;
	headerTop: 12px;
	footer: 46px;
	iconSkip: 4px;
	iconWidth: 35px;
	iconArea: 32px;
	bg: emojiPanBg;
	overBg: emojiPanHover;
	fadeLeft: icon {{ "fade_horizontal-flip_horizontal", emojiPanCategories }};
	fadeRight: icon {{ "fade_horizontal", emojiPanCategories }};
}

inlineResultsMinHeight: 278px;
inlineResultsMaxHeight: 640px;

emojiPanHeaderFont: semiboldFont;
emojiPanRemoveSkip: 10px;

emojiColorsPadding: 5px;
emojiColorsSep: 1px;
emojiColorsSepColor: shadowFg;

emojiSwitchSkip: 27px;
emojiSwitchImgSkip: 21px;
emojiSwitchColor: windowActiveTextFg;
emojiSwitchStickers: icon {{ "emoji/emoji_switch", emojiSwitchColor }};
emojiSwitchEmoji: icon {{ "emoji/emoji_switch-flip_horizontal", emojiSwitchColor }};

emojiIconPadding: 7px;
emojiIconSelectSkip: 3px;
emojiPremiumRequired: icon{{ "emoji/premium_lock", windowSubTextFg }};

hashtagClose: IconButton {
	width: 30px;
	height: 30px;

	icon: smallCloseIcon;
	iconOver: smallCloseIconOver;
	iconPosition: point(10px, 10px);

	rippleAreaPosition: point(5px, 5px);
	rippleAreaSize: 20px;
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: windowBgOver;
	}
}

stickerPanWidthMin: 64px;
stickerPanSize: size(stickerPanWidthMin, stickerPanWidthMin);
stickerPanPadding: 11px;
stickerPanDeleteIconBg: icon {{ "emoji/emoji_delete_bg", stickerPanDeleteBg }};
stickerPanDeleteIconFg: icon {{ "emoji/emoji_delete", stickerPanDeleteFg }};
stickerPanDeleteOpacityBg: 0.3;
stickerPanDeleteOpacityBgOver: 0.5;
stickerPanDeleteOpacityFg: 0.8;
stickerPanDeleteOpacityFgOver: 1.;
stickerPanRemoveSet: hashtagClose;
stickerIconWidth: 42px;
stickerIconPadding: 5px;
stickerIconOpacity: 0.7;
stickerIconSel: 2px;
stickerIconSelColor: emojiIconFgActive;
stickerIconMove: 400;
stickerPreviewDuration: 150;
stickerPreviewMin: 0.1;

stickerGroupCategorySize: 28px;
stickerGroupCategoryAbout: defaultTextStyle;
stickerGroupCategoryAddMargin: margins(0px, 10px, 0px, 5px);
stickerGroupCategoryAdd: stickersTrendingAdd;

stickersToast: Toast(defaultToast) {
	minWidth: 340px;
	maxWidth: 340px;
	padding: margins(16px, 13px, 16px, 12px);
}

stickersEmpty: icon {{ "stickers_empty", windowSubTextFg }};

inlineBotsScroll: ScrollArea(defaultSolidScroll) {
	deltat: stickerPanPadding;
	deltab: stickerPanPadding;
}

gifsSearchField: defaultMultiSelectSearchField;
gifsSearchFieldPosition: point(42px, 7px);
gifsSearchCancel: defaultMultiSelectSearchCancel;
gifsSearchCancelPosition: point(1px, 1px);
gifsSearchIcon: boxFieldSearchIcon;
gifsSearchIconPosition: point(6px, 7px);

emojiSuggestionsDropdown: InnerDropdown(defaultInnerDropdown) {
	scrollMargin: margins(0px, emojiColorsPadding, 0px, emojiColorsPadding);
	scrollPadding: margins(0px, 0px, 0px, 0px);
}
emojiSuggestionSize: 40px;
emojiSuggestionsScrolledWidth: 240px;
emojiSuggestionsPadding: margins(emojiColorsPadding, 0px, emojiColorsPadding, 0px);
emojiSuggestionsFadeAfter: 20px;

mentionHeight: 40px;
mentionPadding: margins(8px, 5px, 8px, 5px);
mentionTop: 11px;
mentionFont: linkFont;
mentionNameFg: windowFg;
mentionNameFgOver: windowFgOver;
mentionPhotoSize: 33px;
mentionBg: windowBg;
mentionBgOver: windowBgOver;
mentionFg: windowSubTextFg;
mentionFgOver: windowSubTextFgOver;
mentionFgActive: windowActiveTextFg;
mentionFgOverActive: windowActiveTextFg;

autocompleteSearchPadding: margins(16px, 5px, 16px, 5px);
autocompleteRowPadding: margins(16px, 5px, 16px, 5px);
autocompleteRowTitle: semiboldTextStyle;
autocompleteRowKeys: defaultTextStyle;
autocompleteRowAnswer: defaultTextStyle;

manageEmojiPreview: 22px;
manageEmojiPreviewWidth: 48px;
manageEmojiPreviewHeight: 48px;
manageEmojiPreviewPadding: margins(22px, 9px, 19px, 9px);
manageEmojiMarginRight: 21px;
manageEmojiNameTop: 3px;
manageEmojiStatusTop: 25px;

inlineRadialSize: 44px;
inlineFileSize: 44px;

stickersPremiumLock: icon{{ "emoji/premium_lock", premiumButtonFg }};

reactStripExtend: margins(21px, 49px, 39px, 0px);
reactStripHeight: 40px;
reactStripSize: 32px;
reactStripMinWidth: 60px;
reactStripImage: 26px;
reactStripSkip: 7px;
reactStripBubble: icon{
	{ "chat/reactions_bubble_shadow", windowShadowFg },
	{ "chat/reactions_bubble", windowBg },
};
reactStripBubbleRight: 20px;
reactPanelEmojiPan: EmojiPan(defaultEmojiPan) {
	margin: margins(reactStripSkip, 0px, reactStripSkip, 0px);
	padding: margins(reactStripSkip, 0px, reactStripSkip, reactStripSkip);
	desiredSize: reactStripSize;
	verticalSizeSub: 0px;
	headerLeft: 13px;
	headerLockLeft: 7px;
	headerLockedLeft: 26px;
	footer: 42px;
	iconSkip: 6px;
	iconWidth: 33px;
	iconArea: 30px;
	overBg: transparent;
	fadeLeft: icon {{ "fade_horizontal-flip_horizontal", windowBg }};
	fadeRight: icon {{ "fade_horizontal", windowBg }};
}
reactPanelScroll: ScrollArea(defaultSolidScroll) {
	deltat: 3px;
	deltab: 3px;
	round: 1px;
	width: 7px;
	deltax: 2px;
	hiding: 0;
}

emojiSuggestionsFadeLeft: icon {{ "fade_horizontal-flip_horizontal", boxBg }};
emojiSuggestionsFadeRight: icon {{ "fade_horizontal", boxBg }};