tdesktop/Telegram/SourceFiles/dialogs/dialogs.style

624 lines
18 KiB
Plaintext

/*
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 "ui/widgets/widgets.style";
DialogRow {
height: pixels;
padding: margins;
photoSize: pixels;
nameLeft: pixels;
nameTop: pixels;
textLeft: pixels;
textTop: pixels;
topicsSkip: pixels;
topicsSkipBig: pixels;
topicsHeight: pixels;
unreadMarkDiameter: pixels;
}
ThreeStateIcon {
icon: icon;
over: icon;
active: icon;
}
ForumTopicIcon {
size: pixels;
font: font;
textTop: pixels;
}
DialogsMiniIcon {
icon: ThreeStateIcon;
skipText: pixels;
skipMedia: pixels;
}
defaultForumTopicIcon: ForumTopicIcon {
size: 21px;
font: font(bold 11px);
textTop: 2px;
}
largeForumTopicIcon: ForumTopicIcon {
size: 26px;
font: font(bold 13px);
textTop: 3px;
}
infoForumTopicIcon: ForumTopicIcon {
size: 32px;
font: font(bold 15px);
textTop: 4px;
}
dialogsUnreadFont: font(12px bold);
dialogsUnreadHeight: 19px;
dialogsUnreadPadding: 5px;
dialogsRipple: RippleAnimation(defaultRippleAnimation) {
color: dialogsRippleBg;
}
dialogsTextFont: normalFont;
dialogsTextStyle: defaultTextStyle;
dialogsDateFont: font(13px);
dialogsDateSkip: 5px;
dialogsRowHeight: 62px;
dialogsFilterPadding: point(7px, 7px);
dialogsFilterSkip: 4px;
defaultDialogRow: DialogRow {
height: dialogsRowHeight;
padding: margins(10px, 8px, 10px, 8px);
photoSize: 46px;
nameLeft: 68px;
nameTop: 10px;
textLeft: 68px;
textTop: 34px;
}
forumDialogRow: DialogRow(defaultDialogRow) {
height: 80px;
textTop: 32px;
topicsSkip: 8px;
topicsSkipBig: 14px;
topicsHeight: 21px;
}
forumDialogJumpArrow: icon{{ "dialogs/dialogs_topic_arrow", dialogsTextFg }};
forumDialogJumpArrowOver: icon{{ "dialogs/dialogs_topic_arrow", dialogsTextFgOver }};
forumDialogJumpArrowSkip: 8px;
forumDialogJumpArrowPosition: point(3px, 3px);
forumDialogJumpPadding: margins(8px, 3px, 8px, 3px);
forumDialogJumpRadius: 11px;
dialogsOnlineBadgeStroke: 2px;
dialogsOnlineBadgeSize: 10px;
dialogsOnlineBadgeSkip: point(0px, 2px);
dialogsOnlineBadgeDuration: 150;
dialogsCallBadgeSize: 16px;
dialogsCallBadgeSkip: point(-3px, -3px);
dialogsTTLBadgeSize: 20px;
dialogsTTLBadgeInnerMargins: margins(2px, 2px, 2px, 2px);
// Relative to a photo place, not a whole userpic place.
dialogsTTLBadgeSkip: point(1px, 1px);
dialogsSpeakingStrokeNumerator: 16px;
dialogsSpeakingDenominator: 8.;
dialogsImportantBarHeight: 37px;
dialogsWidthDuration: 120;
dialogsTextWidthMin: 150px;
dialogsTextPalette: TextPalette(defaultTextPalette) {
linkFg: dialogsTextFgService;
monoFg: dialogsTextFg;
spoilerFg: dialogsTextFg;
}
dialogsTextPaletteOver: TextPalette(defaultTextPalette) {
linkFg: dialogsTextFgServiceOver;
monoFg: dialogsTextFgOver;
spoilerFg: dialogsTextFgOver;
}
dialogsTextPaletteActive: TextPalette(defaultTextPalette) {
linkFg: dialogsTextFgServiceActive;
monoFg: dialogsTextFgActive;
spoilerFg: dialogsTextFgActive;
}
dialogsTextPaletteDraft: TextPalette(defaultTextPalette) {
linkFg: dialogsDraftFg;
monoFg: dialogsTextFg;
spoilerFg: dialogsTextFg;
}
dialogsTextPaletteDraftOver: TextPalette(defaultTextPalette) {
linkFg: dialogsDraftFgOver;
monoFg: dialogsTextFgOver;
spoilerFg: dialogsTextFgOver;
}
dialogsTextPaletteDraftActive: TextPalette(defaultTextPalette) {
linkFg: dialogsDraftFgActive;
monoFg: dialogsTextFgActive;
spoilerFg: dialogsTextFgActive;
}
dialogsTextPaletteTaken: TextPalette(defaultTextPalette) {
linkFg: boxTextFgGood;
monoFg: dialogsTextFg;
spoilerFg: dialogsTextFg;
}
dialogsTextPaletteTakenOver: TextPalette(defaultTextPalette) {
linkFg: boxTextFgGood;
monoFg: dialogsTextFgOver;
spoilerFg: dialogsTextFgOver;
}
dialogsTextPaletteTakenActive: TextPalette(defaultTextPalette) {
linkFg: dialogsDraftFgActive;
monoFg: dialogsTextFgActive;
spoilerFg: dialogsTextFgActive;
}
dialogsTextPaletteArchive: TextPalette(defaultTextPalette) {
linkFg: dialogsArchiveFg;
monoFg: dialogsArchiveFg;
spoilerFg: dialogsArchiveFg;
}
dialogsTextPaletteArchiveOver: TextPalette(defaultTextPalette) {
linkFg: dialogsArchiveFgOver;
monoFg: dialogsArchiveFgOver;
spoilerFg: dialogsArchiveFgOver;
}
dialogsTextPaletteArchiveActive: TextPalette(defaultTextPalette) {
linkFg: dialogsTextFgActive;
monoFg: dialogsTextFgActive;
spoilerFg: dialogsTextFgActive;
}
dialogsTextPaletteInTopic: TextPalette(defaultTextPalette) {
linkFg: dialogsNameFg;
monoFg: dialogsTextFg;
spoilerFg: dialogsTextFg;
}
dialogsTextPaletteInTopicOver: TextPalette(defaultTextPalette) {
linkFg: dialogsNameFgOver;
monoFg: dialogsTextFgOver;
spoilerFg: dialogsTextFgOver;
}
dialogsTextPaletteInTopicActive: TextPalette(defaultTextPalette) {
linkFg: dialogsNameFgActive;
monoFg: dialogsTextFgActive;
spoilerFg: dialogsTextFgActive;
}
dialogsEmptyHeight: 160px;
dialogsEmptySkip: 2px;
dialogsEmptyLabel: FlatLabel(defaultFlatLabel) {
minWidth: 32px;
align: align(top);
textFg: windowSubTextFg;
}
dialogsMenuToggle: IconButton {
width: 40px;
height: 40px;
icon: icon {{ "dialogs/dialogs_menu", dialogsMenuIconFg }};
iconOver: icon {{ "dialogs/dialogs_menu", dialogsMenuIconFgOver }};
iconPosition: point(-1px, -1px);
rippleAreaPosition: point(0px, 0px);
rippleAreaSize: 40px;
ripple: RippleAnimation(defaultRippleAnimation) {
color: windowBgOver;
}
}
dialogsMenuToggleUnread: icon {
{ "dialogs/dialogs_menu_unread", dialogsMenuIconFg },
{ "dialogs/dialogs_menu_unread_dot", dialogsUnreadBg },
};
dialogsMenuToggleUnreadMuted: icon {
{ "dialogs/dialogs_menu_unread", dialogsMenuIconFg },
{ "dialogs/dialogs_menu_unread_dot", dialogsMenuIconFg },
};
dialogsLock: IconButton {
width: 36px;
height: 38px;
icon: icon {{ "dialogs/dialogs_lock_off", dialogsMenuIconFg }};
iconOver: icon {{ "dialogs/dialogs_lock_off", dialogsMenuIconFgOver }};
iconPosition: point(-1px, -1px);
ripple: emptyRippleAnimation;
}
dialogsUnlockIcon: icon {{ "dialogs/dialogs_lock_on", dialogsMenuIconFg }};
dialogsUnlockIconOver: icon {{ "dialogs/dialogs_lock_on", dialogsMenuIconFgOver }};
dialogsCalendar: IconButton {
width: 32px;
height: 35px;
icon: icon {{ "dialogs/dialogs_calendar", dialogsMenuIconFg }};
iconOver: icon {{ "dialogs/dialogs_calendar", dialogsMenuIconFgOver }};
iconPosition: point(1px, 6px);
}
dialogsSearchFrom: IconButton(dialogsCalendar) {
width: 29px;
icon: icon {{ "dialogs/dialogs_search_from", dialogsMenuIconFg }};
iconOver: icon {{ "dialogs/dialogs_search_from", dialogsMenuIconFgOver }};
}
dialogsSearchForNarrowFilters: IconButton(dialogsMenuToggle) {
icon: icon {{ "top_bar_search", menuIconFg }};
iconOver: icon {{ "top_bar_search", menuIconFgOver }};
iconPosition: point(4px, 4px);
}
dialogsFilter: InputField(defaultInputField) {
textBg: filterInputInactiveBg;
textBgActive: filterInputActiveBg;
textMargins: margins(12px, 8px, 30px, 5px);
placeholderFg: placeholderFg;
placeholderFgActive: placeholderFgActive;
placeholderFgError: placeholderFgActive;
placeholderMargins: margins(5px, 0px, 2px, 0px);
placeholderScale: 0.;
placeholderShift: -50px;
placeholderFont: normalFont;
borderFg: filterInputInactiveBg;
borderFgActive: windowBgRipple;
borderFgError: activeLineFgError;
border: 3px;
borderActive: 2px;
borderRadius: 18px;
borderDenominator: 2;
font: normalFont;
heightMin: 35px;
}
dialogsCancelSearchInPeer: IconButton(dialogsMenuToggle) {
icon: icon {{ "dialogs/dialogs_cancel_search", dialogsMenuIconFg }};
iconOver: icon {{ "dialogs/dialogs_cancel_search", dialogsMenuIconFgOver }};
iconPosition: point(11px, 11px);
rippleAreaPosition: point(3px, 3px);
rippleAreaSize: 34px;
}
dialogsCancelSearch: CrossButton {
width: 35px;
height: 35px;
cross: CrossAnimation {
size: 35px;
skip: 12px;
stroke: 1.5;
minScale: 0.3;
}
crossFg: dialogsMenuIconFg;
crossFgOver: dialogsMenuIconFgOver;
crossPosition: point(0px, 0px);
duration: 150;
loadingPeriod: 1000;
ripple: emptyRippleAnimation;
}
dialogCalendar: IconButton(dialogsMenuToggle) {
icon: icon {{ "dialogs/dialogs_calendar", lightButtonFg }};
iconOver: icon {{ "dialogs/dialogs_calendar", lightButtonFgOver }};
iconPosition: point(8px, 9px);
rippleAreaPosition: point(3px, 3px);
rippleAreaSize: 34px;
}
dialogSearchFrom: IconButton(dialogCalendar) {
icon: icon {{ "dialogs/dialogs_search_from", lightButtonFg }};
iconOver: icon {{ "dialogs/dialogs_search_from", lightButtonFgOver }};
iconPosition: point(9px, 8px);
}
dialogsChatTypeSkip: 3px;
dialogsChatIcon: ThreeStateIcon {
icon: icon {{ "dialogs/dialogs_chat", dialogsChatIconFg, point(1px, 4px) }};
over: icon {{ "dialogs/dialogs_chat", dialogsChatIconFgOver, point(1px, 4px) }};
active: icon {{ "dialogs/dialogs_chat", dialogsChatIconFgActive, point(1px, 4px) }};
}
dialogsChannelIcon: ThreeStateIcon {
icon: icon {{ "dialogs/dialogs_channel", dialogsChatIconFg, point(3px, 4px) }};
over: icon {{ "dialogs/dialogs_channel", dialogsChatIconFgOver, point(3px, 4px) }};
active: icon {{ "dialogs/dialogs_channel", dialogsChatIconFgActive, point(3px, 4px) }};
}
dialogsBotIcon: ThreeStateIcon {
icon: icon {{ "dialogs/dialogs_bot", dialogsChatIconFg, point(1px, 3px) }};
over: icon {{ "dialogs/dialogs_bot", dialogsChatIconFgOver, point(1px, 3px) }};
active: icon {{ "dialogs/dialogs_bot", dialogsChatIconFgActive, point(1px, 3px) }};
}
dialogsForumIcon: ThreeStateIcon {
icon: icon {{ "dialogs/dialogs_forum", dialogsChatIconFg, point(1px, 4px) }};
over: icon {{ "dialogs/dialogs_forum", dialogsChatIconFgOver, point(1px, 4px) }};
active: icon {{ "dialogs/dialogs_forum", dialogsChatIconFgActive, point(1px, 4px) }};
}
dialogsArchiveUserpic: icon {{ "archive_userpic", historyPeerUserpicFg }};
dialogsRepliesUserpic: icon {{ "replies_userpic", historyPeerUserpicFg }};
dialogsInaccessibleUserpic: icon {{ "dialogs/inaccessible_userpic", historyPeerUserpicFg }};
dialogsSendStateSkip: 20px;
dialogsSendingIcon: ThreeStateIcon {
icon: icon {{ "dialogs/dialogs_sending", dialogsSendingIconFg, point(8px, 4px) }};
over: icon {{ "dialogs/dialogs_sending", dialogsSendingIconFgOver, point(8px, 4px) }};
active: icon {{ "dialogs/dialogs_sending", dialogsSendingIconFgActive, point(8px, 4px) }};
}
dialogsSentIcon: ThreeStateIcon {
icon: icon {{ "dialogs/dialogs_sent", dialogsSentIconFg, point(10px, 4px) }};
over: icon {{ "dialogs/dialogs_sent", dialogsSentIconFgOver, point(10px, 4px) }};
active: icon {{ "dialogs/dialogs_sent", dialogsSentIconFgActive, point(10px, 4px) }};
}
dialogsReceivedIcon: ThreeStateIcon {
icon: icon {{ "dialogs/dialogs_received", dialogsSentIconFg, point(5px, 4px) }};
over: icon {{ "dialogs/dialogs_received", dialogsSentIconFgOver, point(5px, 4px) }};
active: icon {{ "dialogs/dialogs_received", dialogsSentIconFgActive, point(5px, 4px) }};
}
dialogsPinnedIcon: ThreeStateIcon {
icon: icon {{ "dialogs/dialogs_pinned", dialogsUnreadBgMuted }};
over: icon {{ "dialogs/dialogs_pinned", dialogsUnreadBgMutedOver }};
active: icon {{ "dialogs/dialogs_pinned", dialogsUnreadBgMutedActive }};
}
dialogsLockIcon: ThreeStateIcon {
icon: icon {{ "emoji/premium_lock", dialogsUnreadBgMuted, point(4px, 0px) }};
over: icon {{ "emoji/premium_lock", dialogsUnreadBgMutedOver, point(4px, 0px) }};
active: icon {{ "emoji/premium_lock", dialogsUnreadBgMutedActive, point(4px, 0px) }};
}
dialogsVerifiedIcon: icon {
{ "dialogs/dialogs_verified_star", dialogsVerifiedIconBg },
{ "dialogs/dialogs_verified_check", dialogsVerifiedIconFg },
};
dialogsVerifiedIconOver: icon {
{ "dialogs/dialogs_verified_star", dialogsVerifiedIconBgOver },
{ "dialogs/dialogs_verified_check", dialogsVerifiedIconFgOver },
};
dialogsVerifiedIconActive: icon {
{ "dialogs/dialogs_verified_star", dialogsVerifiedIconBgActive },
{ "dialogs/dialogs_verified_check", dialogsVerifiedIconFgActive },
};
dialogsPremiumIcon: ThreeStateIcon {
icon: icon {{ "dialogs/dialogs_premium", dialogsVerifiedIconBg }};
over: icon {{ "dialogs/dialogs_premium", dialogsVerifiedIconBgOver }};
active: icon {{ "dialogs/dialogs_premium", dialogsVerifiedIconBgActive }};
}
historySendingIcon: icon {{ "dialogs/dialogs_sending", historySendingOutIconFg, point(5px, 5px) }};
historySendingInvertedIcon: icon {{ "dialogs/dialogs_sending", historySendingInvertedIconFg, point(5px, 5px) }};
historyViewsSendingIcon: icon {{ "dialogs/dialogs_sending", historySendingInIconFg, point(3px, 0px) }};
historyViewsSendingInvertedIcon: icon {{ "dialogs/dialogs_sending", historySendingInvertedIconFg, point(3px, 0px) }};
dialogsUpdateButton: FlatButton {
color: activeButtonFg;
overColor: activeButtonFgOver;
bgColor: activeButtonBg;
overBgColor: activeButtonBgOver;
width: -34px;
height: 46px;
textTop: 14px;
font: semiboldFont;
overFont: semiboldFont;
ripple: RippleAnimation(defaultRippleAnimation) {
color: activeButtonBgRipple;
}
}
dialogsInstallUpdate: icon {{ "install_update", activeButtonFg }};
dialogsInstallUpdateOver: icon {{ "install_update", activeButtonFgOver }};
dialogsLoadMoreButton: FlatButton(dialogsUpdateButton) {
color: lightButtonFg;
overColor: lightButtonFg;
bgColor: lightButtonBg;
overBgColor: lightButtonBgOver;
ripple: RippleAnimation(defaultRippleAnimation) {
color: lightButtonBgRipple;
}
height: 36px;
textTop: 9px;
}
dialogsLoadMore: icon {{ "install_update-flip_vertical", lightButtonFg }};
dialogsLoadMoreLoading: InfiniteRadialAnimation(defaultInfiniteRadialAnimation) {
color: lightButtonFg;
thickness: 3px;
size: size(12px, 12px);
}
dialogsSearchInHeight: 52px;
dialogsSearchInPhotoSize: 36px;
dialogsSearchInPhotoPadding: 10px;
dialogsSearchInSkip: 7px;
dialogsSearchFromStyle: defaultTextStyle;
dialogsSearchFromPalette: TextPalette(defaultTextPalette) {
linkFg: dialogsNameFg;
}
dialogsScamPadding: margins(2px, 0px, 2px, 0px);
dialogsScamFont: font(9px semibold);
dialogsScamSkip: 4px;
dialogsScamRadius: 2px;
dialogsMiniPreviewTop: 1px;
dialogsMiniPreview: 16px;
dialogsMiniPreviewRadius: 2px;
dialogsMiniPreviewSkip: 2px;
dialogsMiniPreviewRight: 3px;
dialogsMiniPlay: icon{{ "dialogs/dialogs_mini_play", videoPlayIconFg }};
dialogsMiniForward: DialogsMiniIcon {
icon: ThreeStateIcon {
icon: icon {{ "mini_forward", dialogsTextFg, point(0px, 1px) }};
over: icon {{ "mini_forward", dialogsTextFgOver, point(0px, 1px) }};
active: icon {{ "mini_forward", dialogsTextFgActive, point(0px, 1px) }};
}
skipText: 1px;
skipMedia: 2px;
}
dialogsMiniReplyStory: DialogsMiniIcon {
icon: ThreeStateIcon {
icon: icon {{ "mini_reply_story", dialogsTextFg, point(0px, 1px) }};
over: icon {{ "mini_reply_story", dialogsTextFgOver, point(0px, 1px) }};
active: icon {{ "mini_reply_story", dialogsTextFgActive, point(0px, 1px) }};
}
skipText: 4px;
skipMedia: 5px;
}
dialogsUnreadMention: ThreeStateIcon {
icon: icon{{ "dialogs/dialogs_mention", dialogsUnreadFg }};
over: icon{{ "dialogs/dialogs_mention", dialogsUnreadFgOver }};
active: icon{{ "dialogs/dialogs_mention", dialogsUnreadFgActive }};
}
dialogsUnreadReaction: ThreeStateIcon {
icon: icon{{ "dialogs/dialogs_reaction", dialogsUnreadFg }};
over: icon{{ "dialogs/dialogs_reaction", dialogsUnreadFgOver }};
active: icon{{ "dialogs/dialogs_reaction", dialogsUnreadFgActive }};
}
downloadBarHeight: 46px;
downloadArrow: icon{{ "fast_to_original", menuIconFg }};
downloadArrowOver: icon{{ "fast_to_original", menuIconFgOver }};
downloadArrowRight: 10px;
downloadTitleLeft: 57px;
downloadTitleTop: 4px;
downloadInfoStyle: TextStyle(defaultTextStyle) {
font: font(12px);
}
downloadInfoLeft: 57px;
downloadInfoTop: 23px;
downloadLoadingLeft: 15px;
downloadLoadingSize: 24px;
downloadLoadingLine: 2px;
downloadIconDocument: icon {{ "dialogs/dialogs_downloads", windowFgActive }};
downloadIconSize: 16px;
downloadIconSizeDone: 20px;
forumTopicRow: DialogRow(defaultDialogRow) {
height: 54px;
padding: margins(8px, 7px, 10px, 7px);
photoSize: 20px;
nameLeft: 39px;
nameTop: 7px;
textLeft: 68px;
textTop: 29px;
unreadMarkDiameter: 8px;
}
forumTopicIconPosition: point(2px, 0px);
editTopicTitleMargin: margins(70px, 2px, 22px, 18px);
editTopicIconPosition: point(24px, 19px);
editTopicMaxHeight: 408px;
chooseTopicListItem: PeerListItem(defaultPeerListItem) {
height: 44px;
photoSize: 20px;
photoPosition: point(16px, 12px);
namePosition: point(55px, 11px);
nameStyle: TextStyle(defaultTextStyle) {
font: font(14px semibold);
}
}
chooseTopicList: PeerList(defaultPeerList) {
item: chooseTopicListItem;
}
DialogsStories {
left: pixels;
height: pixels;
photo: pixels;
photoLeft: pixels;
photoTop: pixels;
shift: pixels;
lineTwice: pixels;
lineReadTwice: pixels;
nameLeft: pixels;
nameRight: pixels;
nameTop: pixels;
nameStyle: TextStyle;
}
DialogsStoriesList {
small: DialogsStories;
full: DialogsStories;
bg: color;
readOpacity: double;
fullClickable: int;
}
dialogsStories: DialogsStories {
left: 4px;
height: 35px;
photo: 21px;
photoTop: 4px;
photoLeft: 4px;
shift: 16px;
lineTwice: 3px;
lineReadTwice: 0px;
nameLeft: 11px;
nameRight: 10px;
nameTop: 3px;
nameStyle: semiboldTextStyle;
}
dialogsStoriesFull: DialogsStories {
left: 4px;
height: 77px;
photo: 42px;
photoLeft: 10px;
photoTop: 9px;
lineTwice: 4px;
lineReadTwice: 2px;
nameLeft: 0px;
nameRight: 0px;
nameTop: 56px;
nameStyle: TextStyle(defaultTextStyle) {
font: font(11px);
}
}
dialogsStoriesList: DialogsStoriesList {
small: dialogsStories;
full: dialogsStoriesFull;
bg: dialogsBg;
readOpacity: 0.6;
fullClickable: 0;
}
dialogsStoriesListInfo: DialogsStoriesList(dialogsStoriesList) {
bg: transparent;
fullClickable: 1;
}
dialogsStoriesListMine: DialogsStoriesList(dialogsStoriesListInfo) {
readOpacity: 1.;
}
dialogsStoriesTooltip: ImportantTooltip(defaultImportantTooltip) {
padding: margins(0px, 0px, 0px, 0px);
}
dialogsStoriesTooltipLabel: defaultImportantTooltipLabel;
dialogsStoriesTooltipMaxWidth: 200px;
dialogsStoriesTooltipHide: IconButton(defaultIconButton) {
width: 34px;
height: 20px;
iconPosition: point(-1px, -1px);
icon: icon {{ "calls/video_tooltip", importantTooltipFg }};
iconOver: icon {{ "calls/video_tooltip", importantTooltipFg }};
ripple: emptyRippleAnimation;
}
searchedBarHeight: 32px;
searchedBarFont: normalFont;
searchedBarPosition: point(17px, 7px);