/* 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; }