/* 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 "basic.style"; LabelSimple { font: font; maxWidth: pixels; textFg: color; } FlatLabel { margin: margins; minWidth: pixels; align: align; textFg: color; maxHeight: pixels; style: TextStyle; palette: TextPalette; } LinkButton { color: color; overColor: color; font: font; overFont: font; padding: margins; } RippleAnimation { color: color; showDuration: int; hideDuration: int; } InfiniteRadialAnimation { color: color; thickness: pixels; size: size; linearPeriod: int; sinePeriod: int; sineDuration: int; sineShift: int; arcMin: double; arcMax: double; } defaultInfiniteRadialAnimation: InfiniteRadialAnimation { linearPeriod: 1000; sinePeriod: 3000; sineDuration: 1000; sineShift: 1500; arcMin: 0.0625; arcMax: 0.75; } FlatButton { color: color; overColor: color; bgColor: color; overBgColor: color; width: pixels; height: pixels; textTop: pixels; font: font; overFont: font; ripple: RippleAnimation; } RoundButton { textFg: color; textFgOver: color; textBg: color; // rect of textBg with rounded rect of textBgOver upon it textBgOver: color; numbersTextFg: color; numbersTextFgOver: color; numbersSkip: pixels; width: pixels; height: pixels; padding: margins; textTop: pixels; icon: icon; iconPosition: point; font: font; ripple: RippleAnimation; } Toggle { toggledBg: color; toggledFg: color; untoggledBg: color; untoggledFg: color; duration: int; border: pixels; shift: pixels; diameter: pixels; width: pixels; xsize: pixels; vsize: pixels; vshift: pixels; stroke: pixels; rippleAreaPadding: pixels; } Check { bg: color; untoggledFg: color; toggledFg: color; diameter: pixels; thickness: pixels; icon: icon; duration: int; rippleAreaPadding: pixels; } Radio { bg: color; untoggledFg: color; toggledFg: color; diameter: pixels; thickness: pixels; skip: pixels; duration: int; rippleAreaPadding: pixels; } Checkbox { textFg: color; textFgActive: color; width: pixels; margin: margins; textPosition: point; checkPosition: point; style: TextStyle; rippleAreaPosition: point; rippleBg: color; rippleBgActive: color; ripple: RippleAnimation; disabledOpacity: double; } ScrollArea { bg: color; bgOver: color; barBg: color; barBgOver: color; round: pixels; width: pixels; minHeight: pixels; deltax: pixels; deltat: pixels; deltab: pixels; topsh: pixels; bottomsh: pixels; shColor: color; duration: int; hiding: int; } FlatInput { textColor: color; bgColor: color; bgActive: color; width: pixels; height: pixels; textMrg: margins; align: align; font: font; icon: icon; borderWidth: pixels; borderColor: color; borderActive: color; phColor: color; phFocusColor: color; phPos: point; phAlign: align; phShift: pixels; phDuration: int; } InputField { textBg: color; textFg: color; textMargins: margins; textAlign: align; placeholderFg: color; placeholderFgActive: color; placeholderFgError: color; placeholderMargins: margins; placeholderAlign: align; placeholderScale: double; placeholderShift: pixels; placeholderFont: font; duration: int; borderFg: color; borderFgActive: color; borderFgError: color; border: pixels; borderActive: pixels; font: font; width: pixels; heightMin: pixels; heightMax: pixels; } OutlineButton { outlineWidth: pixels; outlineFg: color; outlineFgOver: color; textBg: color; textBgOver: color; textFg: color; textFgOver: color; font: font; padding: margins; ripple: RippleAnimation; } IconButton { width: pixels; height: pixels; icon: icon; iconOver: icon; iconPosition: point; duration: int; rippleAreaPosition: point; rippleAreaSize: pixels; ripple: RippleAnimation; } Shadow { left: icon; topLeft: icon; top: icon; topRight: icon; right: icon; bottomRight: icon; bottom: icon; bottomLeft: icon; extend: margins; fallback: color; } MediaSlider { width: pixels; activeFg: color; inactiveFg: color; activeFgOver: color; inactiveFgOver: color; activeFgDisabled: color; inactiveFgDisabled: color; seekSize: size; duration: int; } FilledSlider { fullWidth: pixels; lineWidth: pixels; activeFg: color; inactiveFg: color; disabledFg: color; duration: int; } RoundCheckbox { border: color; bgInactive: color; bgActive: color; width: pixels; size: pixels; sizeSmall: double; duration: int; bgDuration: double; fgDuration: double; check: icon; } RoundImageCheckbox { imageRadius: pixels; imageSmallRadius: pixels; selectWidth: pixels; selectFg: color; selectDuration: int; check: RoundCheckbox; } CrossAnimation { fg: color; size: pixels; skip: pixels; stroke: pixels; minScale: double; } CrossButton { width: pixels; height: pixels; cross: CrossAnimation; crossFg: color; crossFgOver:color; crossPosition: point; duration: int; loadingPeriod: int; ripple: RippleAnimation; } MultiSelectItem { padding: margins; maxWidth: pixels; height: pixels; style: TextStyle; textBg: color; textFg: color; textActiveBg: color; textActiveFg: color; duration: int; deleteFg: color; deleteCross: CrossAnimation; minScale: double; } MultiSelect { bg: color; padding: margins; maxHeight: pixels; scroll: ScrollArea; item: MultiSelectItem; itemSkip: pixels; field: InputField; fieldMinWidth: pixels; fieldIcon: icon; fieldIconSkip: pixels; fieldCancel: CrossButton; fieldCancelSkip: pixels; } CallButton { button: IconButton; bg: color; angle: double; outerRadius: pixels; outerBg: color; } Menu { skip: pixels; itemBg: color; itemBgOver: color; itemFg: color; itemFgOver: color; itemFgDisabled: color; itemFgShortcut: color; itemFgShortcutOver: color; itemFgShortcutDisabled: color; itemPadding: margins; itemIconPosition: point; itemFont: font; itemToggle: Toggle; itemToggleOver: Toggle; itemToggleShift: pixels; separatorPadding: margins; separatorWidth: pixels; separatorFg: color; arrow: icon; widthMin: pixels; widthMax: pixels; ripple: RippleAnimation; } PanelAnimation { startWidth: double; widthDuration: double; startHeight: double; heightDuration: double; startOpacity: double; opacityDuration: double; startFadeTop: double; fadeHeight: double; fadeOpacity: double; fadeBg: color; shadow: Shadow; } PopupMenu { shadow: Shadow; scrollPadding: margins; animation: PanelAnimation; menu: Menu; duration: int; showDuration: int; } InnerDropdown { padding: margins; shadow: Shadow; animation: PanelAnimation; duration: int; showDuration: int; width: pixels; bg: color; scroll: ScrollArea; scrollMargin: margins; scrollPadding: margins; } DropdownMenu { wrap: InnerDropdown; menu: Menu; } Tooltip { textBg: color; textFg: color; textStyle: TextStyle; textBorder: color; textPadding: margins; shift: point; skip: pixels; widthMax: pixels; linesMax: int; } ImportantTooltip { bg: color; margin: margins; padding: margins; radius: pixels; arrow: pixels; arrowSkipMin: pixels; arrowSkip: pixels; shift: pixels; duration: int; } UserpicButton { size: size; photoSize: pixels; photoPosition: point; changeButton: RoundButton; changeIcon: icon; changeIconPosition: point; duration: int; uploadHeight: pixels; uploadBg: color; uploadIcon: icon; uploadIconPosition: point; } FeedUserpicButton { size: size; innerSize: pixels; innerPosition: point; innerPart: UserpicButton; } InfoProfileButton { textFg: color; textFgOver: color; textBg: color; textBgOver: color; font: font; height: pixels; padding: margins; toggle: Toggle; toggleOver: Toggle; toggleSkip: pixels; ripple: RippleAnimation; } PassportScanRow { padding: margins; size: pixels; textLeft: pixels; nameTop: pixels; statusTop: pixels; border: pixels; borderFg: color; remove: IconButton; restore: RoundButton; } defaultLabelSimple: LabelSimple { font: normalFont; maxWidth: 0px; textFg: windowFg; } defaultFlatLabel: FlatLabel { minWidth: 0px; maxHeight: 0px; align: align(left); textFg: windowFg; style: defaultTextStyle; palette: defaultTextPalette; } defaultLinkButton: LinkButton { color: windowActiveTextFg; overColor: windowActiveTextFg; font: linkFont; overFont: linkOverFont; } defaultRippleAnimation: RippleAnimation { color: windowBgRipple; showDuration: 650; hideDuration: 200; } emptyRippleAnimation: RippleAnimation { } defaultActiveButton: RoundButton { textFg: activeButtonFg; textFgOver: activeButtonFgOver; numbersTextFg: activeButtonSecondaryFg; numbersTextFgOver: activeButtonSecondaryFgOver; textBg: activeButtonBg; textBgOver: activeButtonBgOver; numbersSkip: 7px; width: -34px; height: 34px; padding: margins(0px, 0px, 0px, 0px); textTop: 8px; iconPosition: point(0px, 0px); font: semiboldFont; ripple: RippleAnimation(defaultRippleAnimation) { color: activeButtonBgRipple; } } defaultLightButton: RoundButton(defaultActiveButton) { textFg: lightButtonFg; textFgOver: lightButtonFgOver; numbersTextFg: lightButtonFg; numbersTextFgOver: lightButtonFgOver; textBg: lightButtonBg; textBgOver: lightButtonBgOver; ripple: RippleAnimation(defaultRippleAnimation) { color: lightButtonBgRipple; } } defaultScrollArea: ScrollArea { bg: scrollBg; bgOver: scrollBgOver; barBg: scrollBarBg; barBgOver: scrollBarBgOver; round: 2px; width: 10px; minHeight: 20px; deltax: 3px; deltat: 3px; deltab: 3px; topsh: 2px; bottomsh: 2px; shColor: shadowFg; duration: 150; hiding: 1000; } defaultSolidScroll: ScrollArea(defaultScrollArea) { deltax: 5px; width: 14px; deltat: 6px; deltab: 6px; topsh: 0px; bottomsh: 0px; hiding: 0; } defaultInputFont: font(17px); defaultFlatInput: FlatInput { textColor: windowFg; bgColor: filterInputInactiveBg; bgActive: filterInputActiveBg; width: 210px; height: 40px; align: align(left); textMrg: margins(5px, 5px, 5px, 5px); font: defaultInputFont; borderWidth: 2px; borderColor: filterInputInactiveBg; borderActive: filterInputBorderFg; phColor: placeholderFg; phFocusColor: placeholderFgActive; phAlign: align(left); phPos: point(2px, 0px); phShift: 50px; phDuration: 100; } defaultLeftOutlineButton: OutlineButton { outlineWidth: 3px; outlineFg: outlineButtonBg; outlineFgOver: outlineButtonOutlineFg; textBg: outlineButtonBg; textBgOver: outlineButtonBgOver; textFg: windowActiveTextFg; textFgOver: windowActiveTextFg; font: normalFont; padding: margins(11px, 5px, 11px, 5px); ripple: RippleAnimation(defaultRippleAnimation) { color: outlineButtonBgRipple; } } attentionLeftOutlineButton: OutlineButton(defaultLeftOutlineButton) { outlineFgOver: attentionButtonFg; textBgOver: attentionButtonBgOver; textFg: attentionButtonFg; textFgOver: attentionButtonFgOver; ripple: RippleAnimation(defaultRippleAnimation) { color: attentionButtonBgRipple; } } defaultInputField: InputField { textBg: windowBg; textFg: windowFg; textMargins: margins(0px, 26px, 0px, 4px); textAlign: align(topleft); placeholderFg: windowSubTextFg; placeholderFgActive: windowActiveTextFg; placeholderFgError: attentionButtonFg; placeholderMargins: margins(0px, 0px, 0px, 0px); placeholderAlign: align(topleft); placeholderScale: 0.9; placeholderShift: -20px; placeholderFont: font(semibold 14px); duration: 150; borderFg: inputBorderFg; borderFgActive: activeLineFg; borderFgError: activeLineFgError; border: 1px; borderActive: 2px; font: boxTextFont; heightMin: 52px; heightMax: 148px; } defaultCheckboxIcon: icon {{ "default_checkbox_check", windowFgActive, point(4px, 7px) }}; defaultCheck: Check { bg: transparent; untoggledFg: checkboxFg; toggledFg: windowBgActive; diameter: 22px; thickness: 2px; icon: defaultCheckboxIcon; duration: 120; rippleAreaPadding: 8px; } defaultRadio: Radio { bg: transparent; untoggledFg: checkboxFg; toggledFg: windowBgActive; diameter: 22px; thickness: 2px; skip: 65px; // * 0.1 duration: 120; rippleAreaPadding: 8px; } defaultToggle: Toggle { toggledBg: windowBg; toggledFg: windowBgActive; untoggledBg: windowBg; untoggledFg: checkboxFg; duration: 120; border: 2px; shift: 1px; diameter: 16px; width: 14px; xsize: 0px; vsize: 0px; vshift: 0px; stroke: 0px; rippleAreaPadding: 8px; } defaultCheckbox: Checkbox { textFg: windowFg; width: -44px; margin: margins(8px, 8px, 8px, 8px); textPosition: point(10px, 2px); checkPosition: point(8px, 8px); style: defaultTextStyle; rippleAreaPosition: point(-8px, -8px); rippleBg: windowBgOver; rippleBgActive: lightButtonBgOver; ripple: defaultRippleAnimation; disabledOpacity: 0.5; } defaultIconButton: IconButton { iconPosition: point(-1px, -1px); } defaultMultiSelectItem: MultiSelectItem { padding: margins(6px, 7px, 12px, 0px); maxWidth: 128px; height: 32px; style: defaultTextStyle; textBg: contactsBgOver; textFg: windowFg; textActiveBg: activeButtonBg; textActiveFg: activeButtonFg; deleteFg: activeButtonFg; deleteCross: CrossAnimation { size: 32px; skip: 10px; stroke: 2px; minScale: 0.3; } duration: 150; minScale: 0.3; } widgetSlideDuration: 200; widgetFadeDuration: 200; fieldSearchIcon: icon {{ "box_search", menuIconFg, point(9px, 8px) }}; boxFieldSearchIcon: icon {{ "box_search", menuIconFg, point(10px, 9px) }}; SettingsSlider { height: pixels; barTop: pixels; barSkip: pixels; barStroke: pixels; barFg: color; barFgActive: color; labelTop: pixels; labelFont: font; labelFg: color; labelFgActive: color; duration: int; rippleBottomSkip: pixels; rippleBg: color; rippleBgActive: color; ripple: RippleAnimation; } defaultSettingsSlider: SettingsSlider { height: 39px; barTop: 5px; barSkip: 3px; barStroke: 3px; barFg: sliderBgInactive; barFgActive: sliderBgActive; labelTop: 17px; labelFont: normalFont; labelFg: windowActiveTextFg; labelFgActive: windowActiveTextFg; duration: 150; } defaultTabsSlider: SettingsSlider(defaultSettingsSlider) { height: 53px; barTop: 50px; barSkip: 0px; barFg: transparent; labelTop: 19px; labelFont: semiboldFont; labelFg: windowSubTextFg; labelFgActive: lightButtonFg; rippleBottomSkip: 1px; rippleBg: windowBgOver; rippleBgActive: lightButtonBgOver; ripple: defaultRippleAnimation; } defaultRoundShadow: Shadow { left: icon {{ "round_shadow_left", windowShadowFg }}; topLeft: icon {{ "round_shadow_top_left", windowShadowFg }}; top: icon {{ "round_shadow_top", windowShadowFg }}; topRight: icon {{ "round_shadow_top_left-flip_horizontal", windowShadowFg }}; right: icon {{ "round_shadow_left-flip_horizontal", windowShadowFg }}; bottomRight: icon {{ "round_shadow_bottom_left-flip_horizontal", windowShadowFg }}; bottom: icon {{ "round_shadow_bottom", windowShadowFg }}; bottomLeft: icon {{ "round_shadow_bottom_left", windowShadowFg }}; extend: margins(3px, 2px, 3px, 4px); fallback: windowShadowFgFallback; } defaultEmptyShadow: Shadow { fallback: windowBg; } defaultPanelAnimation: PanelAnimation { startWidth: 0.5; widthDuration: 0.6; startHeight: 0.3; heightDuration: 0.9; startOpacity: 0.2; opacityDuration: 0.3; startFadeTop: 0.; fadeHeight: 0.2; fadeOpacity: 1.0; fadeBg: menuBg; shadow: defaultRoundShadow; } defaultContinuousSlider: MediaSlider { width: 3px; activeFg: mediaPlayerActiveFg; inactiveFg: mediaPlayerInactiveFg; activeFgOver: mediaPlayerActiveFg; inactiveFgOver: mediaPlayerInactiveFg; activeFgDisabled: mediaPlayerInactiveFg; inactiveFgDisabled: windowBg; seekSize: size(9px, 9px); duration: 150; } defaultRoundCheckbox: RoundCheckbox { border: windowBg; bgActive: windowBgActive; width: 2px; duration: 160; bgDuration: 0.75; fgDuration: 1.; } defaultMenuArrow: icon {{ "dropdown_submenu_arrow", menuSubmenuArrowFg }}; defaultMenuToggle: Toggle(defaultToggle) { untoggledFg: menuIconFg; } defaultMenuToggleOver: Toggle(defaultToggle) { untoggledFg: menuIconFgOver; } defaultMenu: Menu { skip: 0px; itemBg: windowBg; itemBgOver: windowBgOver; itemFg: windowFg; itemFgOver: windowFgOver; itemFgDisabled: menuFgDisabled; itemFgShortcut: windowSubTextFg; itemFgShortcutOver: windowSubTextFgOver; itemFgShortcutDisabled: menuFgDisabled; itemIconPosition: point(0px, 0px); itemPadding: margins(17px, 8px, 17px, 7px); itemFont: normalFont; itemToggle: defaultMenuToggle; itemToggleOver: defaultMenuToggleOver; itemToggleShift: 0px; separatorPadding: margins(0px, 5px, 0px, 5px); separatorWidth: 1px; separatorFg: menuSeparatorFg; arrow: defaultMenuArrow; widthMin: 180px; widthMax: 300px; ripple: defaultRippleAnimation; } defaultPopupMenu: PopupMenu { shadow: defaultRoundShadow; animation: defaultPanelAnimation; scrollPadding: margins(0px, 8px, 0px, 8px); menu: defaultMenu; duration: 150; showDuration: 200; } defaultInnerDropdown: InnerDropdown { padding: margins(10px, 10px, 10px, 10px); shadow: defaultRoundShadow; animation: defaultPanelAnimation; duration: 150; showDuration: 200; bg: menuBg; scroll: defaultSolidScroll; } defaultDropdownMenu: DropdownMenu { wrap: InnerDropdown(defaultInnerDropdown) { scrollPadding: margins(0px, 8px, 0px, 8px); } menu: defaultMenu; } defaultTooltip: Tooltip { textBg: tooltipBg; textFg: tooltipFg; textStyle: defaultTextStyle; textBorder: tooltipBorderFg; textPadding: margins(5px, 2px, 5px, 2px); shift: point(-20px, 20px); skip: 10px; widthMax: 800px; linesMax: 12; } defaultImportantTooltip: ImportantTooltip { bg: importantTooltipBg; margin: margins(4px, 4px, 4px, 4px); padding: margins(13px, 9px, 13px, 10px); radius: 6px; arrow: 9px; arrowSkipMin: 24px; arrowSkip: 66px; shift: 12px; duration: 200; } defaultImportantTooltipLabel: FlatLabel(defaultFlatLabel) { style: TextStyle(defaultTextStyle) { font: font(14px); linkFont: font(14px); linkFontOver: font(14px underline); } textFg: importantTooltipFg; palette: TextPalette(defaultTextPalette) { linkFg: importantTooltipFgLink; selectLinkFg: importantTooltipFgLink; } } defaultChangeUserpicIcon: icon {{ "new_chat_photo", activeButtonFg }}; defaultUploadUserpicIcon: icon {{ "upload_chat_photo", msgDateImgFg }}; defaultUserpicButton: UserpicButton { size: size(76px, 76px); photoSize: 76px; photoPosition: point(-1px, -1px); changeButton: defaultActiveButton; changeIcon: defaultChangeUserpicIcon; changeIconPosition: point(23px, 25px); duration: 500; uploadHeight: 24px; uploadBg: msgDateImgBgOver; uploadIcon: defaultUploadUserpicIcon; uploadIconPosition: point(-1px, 1px); } defaultFeedUserpicButton: FeedUserpicButton { size: size(76px, 76px); innerSize: 76px; innerPosition: point(-1px, -1px); innerPart: defaultUserpicButton; } historyToDownBelow: icon { { "history_down_shadow", historyToDownShadow }, { "history_down_circle", historyToDownBg, point(4px, 4px) }, }; historyToDownBelowOver: icon { { "history_down_shadow", historyToDownShadow }, { "history_down_circle", historyToDownBgOver, point(4px, 4px) }, }; contactsAddIconBelow: icon { { "history_down_shadow", historyToDownShadow }, { "history_down_circle", activeButtonBg, point(4px, 4px) }, }; contactsAddIconBelowOver: icon { { "history_down_shadow", historyToDownShadow }, { "history_down_circle", activeButtonBgOver, point(4px, 4px) }, }; BotKeyboardButton { margin: pixels; padding: pixels; height: pixels; textTop: pixels; ripple: RippleAnimation; } TwoIconButton { width: pixels; height: pixels; iconBelow: icon; iconAbove: icon; iconBelowOver: icon; iconAboveOver: icon; iconPosition: point; rippleAreaPosition: point; rippleAreaSize: pixels; ripple: RippleAnimation; } historySendActionTypingDuration: 800; historySendActionTypingHalfPeriod: 320; historySendActionTypingDeltaTime: 150; historySendActionTypingPosition: point(4px, -4px); historySendActionTypingDelta: 6px; historySendActionTypingLargeNumerator: 28px; historySendActionTypingSmallNumerator: 16px; historySendActionTypingDenominator: 12.; historySendActionRecordDuration: 500; historySendActionRecordPosition: point(1px, -4px); historySendActionRecordDelta: 4px; historySendActionRecordStrokeNumerator: 16px; historySendActionRecordDenominator: 8.; historySendActionUploadDuration: 500; historySendActionUploadPosition: point(0px, -4px); historySendActionUploadDelta: 5px; historySendActionUploadStrokeNumerator: 16px; historySendActionUploadSizeNumerator: 32px; historySendActionUploadDenominator: 8.; MediaPlayerButton { playPosition: point; playOuter: size; pausePosition: point; pauseOuter: size; pauseStroke: pixels; cancelPosition: point; cancelOuter: size; cancelStroke: pixels; rippleAreaPosition: point; rippleAreaSize: pixels; ripple: RippleAnimation; } PeerListItem { left: pixels; bottom: pixels; height: pixels; photoPosition: point; namePosition: point; nameStyle: TextStyle; statusPosition: point; photoSize: pixels; maximalWidth: pixels; button: OutlineButton; statusFg: color; statusFgOver: color; statusFgActive: color; } PeerList { padding: margins; item: PeerListItem; } defaultPeerListButton: OutlineButton { outlineWidth: 0px; textBg: windowBg; textBgOver: windowBgOver; textFg: windowSubTextFg; textFgOver: windowSubTextFgOver; font: normalFont; padding: margins(11px, 5px, 11px, 5px); ripple: defaultRippleAnimation; } defaultPeerListItem: PeerListItem { height: 58px; photoPosition: point(12px, 6px); namePosition: point(68px, 11px); nameStyle: TextStyle(defaultTextStyle) { font: semiboldFont; linkFont: semiboldFont; linkFontOver: semiboldFont; } statusPosition: point(68px, 31px); photoSize: 46px; button: defaultPeerListButton; statusFg: windowSubTextFg; statusFgOver: windowSubTextFgOver; statusFgActive: windowActiveTextFg; } defaultPeerList: PeerList { padding: margins(0px, 0px, 0px, 0px); item: defaultPeerListItem; } SearchFieldRow { height: pixels; padding: margins; field: InputField; fieldIcon: icon; fieldIconSkip: pixels; fieldCancel: CrossButton; fieldCancelSkip: pixels; } InfoTopBar { height: pixels; back: IconButton; title: FlatLabel; titlePosition: point; bg: color; mediaCancel: IconButton; mediaActionsSkip: pixels; mediaForward: IconButton; mediaDelete: IconButton; search: IconButton; searchRow: SearchFieldRow; highlightBg: color; highlightDuration: int; }