/* 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"; using "ui/layers/layers.style"; using "ui/chat/chat.style"; // GroupCallUserpics using "info/info.style"; // ShortInfoCover using "window/window.style"; CallSignalBars { width: pixels; radius: pixels; skip: pixels; min: pixels; max: pixels; color: color; inactiveOpacity: double; } callWidthMin: 300px; callHeightMin: 440px; callWidth: 720px; callHeight: 540px; callBottomControlsHeight: 87px; CallBodyLayout { height: pixels; photoTop: pixels; photoSize: pixels; nameTop: pixels; statusTop: pixels; muteStroke: pixels; muteSize: pixels; mutePosition: point; } callBodyLayout: CallBodyLayout { height: 284px; photoTop: 21px; photoSize: 160px; nameTop: 221px; statusTop: 254px; muteStroke: 3px; muteSize: 36px; mutePosition: point(142px, 135px); } callBodyWithPreview: CallBodyLayout { height: 185px; photoTop: 21px; photoSize: 100px; nameTop: 132px; statusTop: 163px; muteStroke: 3px; muteSize: 0px; mutePosition: point(90px, 84px); } callMutedPeerIcon: icon {{ "calls/calls_mute_userpic", callIconFg }}; callOutgoingPreviewMin: size(360px, 120px); callOutgoingPreview: size(540px, 180px); // default, for height == callHeight. callOutgoingPreviewMax: size(1620px, 540px); callOutgoingDefaultSize: size(160px, 110px); callInnerPadding: 12px; callFingerprintPadding: margins(10px, 4px, 8px, 5px); callFingerprintSkip: 4px; callFingerprintSignalBarsSkip: 2px; callSignalBarsPadding: margins(8px, 9px, 11px, 5px); callFingerprintTop: 8px; callFingerprintBottom: -16px; callTooltipMutedIcon: icon{{ "calls/calls_mute_tooltip", videoPlayIconFg }}; callTooltipMutedIconPosition: point(10px, 5px); callTooltipPadding: margins(41px, 7px, 15px, 8px); callButton: IconButton { width: 68px; height: 79px; iconPosition: point(-1px, 16px); rippleAreaPosition: point(12px, 12px); rippleAreaSize: 44px; ripple: defaultRippleAnimation; } callButtonLabel: FlatLabel(defaultFlatLabel) { textFg: callNameFg; style: TextStyle(defaultTextStyle) { font: font(11px); linkFont: font(11px); linkFontOver: font(11px underline); } } callAnswer: CallButton { button: IconButton(callButton) { icon: icon {{ "calls/call_answer", callIconFg }}; ripple: RippleAnimation(defaultRippleAnimation) { color: callAnswerRipple; } } bg: callAnswerBg; bgSize: 44px; bgPosition: point(12px, 12px); angle: 135.; outerRadius: 12px; outerBg: callAnswerBgOuter; label: callButtonLabel; } callHangup: CallButton(callAnswer) { button: IconButton(callButton) { icon: icon {{ "calls/call_discard", callIconFg }}; ripple: RippleAnimation(defaultRippleAnimation) { color: callHangupRipple; } } bg: callHangupBg; outerBg: callHangupBg; label: callButtonLabel; } callCancel: CallButton(callAnswer) { button: IconButton(callButton) { icon: icon {{ "calls/call_cancel", callIconFgActive }}; ripple: RippleAnimation(defaultRippleAnimation) { color: callIconActiveRipple; } } bg: callIconBgActive; outerBg: callIconBgActive; label: callButtonLabel; } callMicrophoneMute: CallButton(callAnswer) { button: IconButton(callButton) { icon: icon {{ "calls/call_record_active", callIconFg }}; ripple: RippleAnimation(defaultRippleAnimation) { color: callMuteRipple; } } bg: callIconBg; outerBg: callMuteRipple; label: callButtonLabel; } callMicrophoneUnmute: CallButton(callMicrophoneMute) { button: IconButton(callButton) { icon: icon {{ "calls/call_record_muted", callIconFgActive }}; ripple: RippleAnimation(defaultRippleAnimation) { color: callIconActiveRipple; } } bg: callIconBgActive; } callCameraMute: CallButton(callMicrophoneMute) { button: IconButton(callButton) { icon: icon {{ "calls/call_camera_active", callIconFg }}; ripple: RippleAnimation(defaultRippleAnimation) { color: callMuteRipple; } } } callCameraUnmute: CallButton(callMicrophoneUnmute) { button: IconButton(callButton) { icon: icon {{ "calls/call_camera_muted", callIconFgActive }}; ripple: RippleAnimation(defaultRippleAnimation) { color: callIconActiveRipple; } } } callScreencastOn: CallButton(callMicrophoneMute) { button: IconButton(callButton) { icon: icon {{ "calls/calls_present", callIconFg }}; iconPosition: point(-1px, 22px); ripple: RippleAnimation(defaultRippleAnimation) { color: callMuteRipple; } } } callScreencastOff: CallButton(callMicrophoneUnmute) { button: IconButton(callButton) { icon: icon {{ "calls/calls_present", callIconFgActive }}; iconPosition: point(-1px, 22px); ripple: RippleAnimation(defaultRippleAnimation) { color: callIconActiveRipple; } } } callBottomShadowSize: 124px; CallMuteButton { active: CallButton; muted: CallButton; labelAdditional: pixels; sublabel: FlatLabel; labelsSkip: pixels; sublabelSkip: pixels; lottieSize: size; lottieTop: pixels; } callMuteButtonLabel: FlatLabel(defaultFlatLabel) { textFg: groupCallMembersFg; style: TextStyle(defaultTextStyle) { font: font(14px); linkFont: font(14px); linkFontOver: font(14px underline); } } callMuteButtonActiveInner: IconButton { width: 112px; height: 138px; } callMuteButtonSmallActiveInner: IconButton { width: 68px; height: 68px; } callMuteButtonActive: CallButton { button: callMuteButtonActiveInner; bg: groupCallLive1; bgSize: 77px; bgPosition: point(18px, 18px); outerRadius: 18px; outerBg: callAnswerBgOuter; label: callMuteButtonLabel; } callMuteButton: CallMuteButton { active: callMuteButtonActive; muted: CallButton(callMuteButtonActive) { bg: groupCallMuted1; label: callMuteButtonLabel; } labelAdditional: 5px; sublabel: FlatLabel(defaultFlatLabel) { textFg: groupCallMemberNotJoinedStatus; } labelsSkip: 8px; sublabelSkip: 14px; lottieSize: size(54px, 54px); lottieTop: 31px; } callMuteButtonSmallActive: CallButton(callMuteButtonActive) { button: callMuteButtonSmallActiveInner; bgSize: 42px; bgPosition: point(13px, 13px); outerRadius: 13px; label: callButtonLabel; } callMuteButtonSmall: CallMuteButton(callMuteButton) { active: callMuteButtonSmallActive; muted: CallButton(callMuteButtonSmallActive) { bg: groupCallMuted1; label: callButtonLabel; } labelsSkip: 0px; sublabelSkip: 0px; lottieSize: size(36px, 36px); lottieTop: 17px; } callMuteMinorBlobMinRadius: 64px; callMuteMinorBlobMaxRadius: 74px; callMuteMajorBlobMinRadius: 67px; callMuteMajorBlobMaxRadius: 77px; callMuteBlobRadiusForDiameter: 100px; callConnectingRadial: InfiniteRadialAnimation(defaultInfiniteRadialAnimation) { color: lightButtonFg; thickness: 4px; } callName: FlatLabel(defaultFlatLabel) { minWidth: 260px; maxHeight: 30px; textFg: callNameFg; align: align(top); style: TextStyle(defaultTextStyle) { font: font(21px semibold); linkFont: font(21px semibold); linkFontOver: font(21px semibold underline); } } callStatus: FlatLabel(defaultFlatLabel) { minWidth: 260px; maxHeight: 20px; textFg: callStatusFg; align: align(top); style: TextStyle(defaultTextStyle) { font: font(14px); linkFont: font(14px); linkFontOver: font(14px underline); } } callRemoteAudioMute: FlatLabel(callStatus) { minWidth: 0px; textFg: videoPlayIconFg; style: TextStyle(defaultTextStyle) { font: font(12px); linkFont: font(12px); linkFontOver: font(12px underline); } } callRemoteAudioMuteSkip: 12px; callBarHeight: 38px; callBarMuteToggle: IconButton { width: 41px; height: 38px; icon: icon {{ "calls/call_record_active", callBarFg }}; iconPosition: point(3px, 2px); ripple: RippleAnimation(defaultRippleAnimation) { color: callBarMuteRipple; } rippleAreaPosition: point(5px, 3px); rippleAreaSize: 32px; } callBarUnmuteIcon: icon {{ "calls/call_record_muted", callBarFg }}; callBarRightSkip: 12px; callBarSkip: 10px; callBarHangup: IconButton(callBarMuteToggle) { icon: icon {{ "calls/call_discard", callBarFg }}; iconPosition: point(3px, 1px); } callBarLabel: LabelSimple(defaultLabelSimple) { font: semiboldFont; textFg: callBarFg; } callBarInfoLabel: FlatLabel(defaultFlatLabel) { maxHeight: 28px; align: align(top); textFg: callBarFg; style: TextStyle(defaultTextStyle) { font: semiboldFont; } } callBarLabelTop: 10px; callArrowPosition: point(-2px, 1px); callArrowIn: icon {{ "calls/call_arrow_in", callArrowFg }}; callArrowOut: icon {{ "calls/call_arrow_out", callArrowFg }}; callArrowMissed: icon {{ "calls/call_arrow_in", callArrowMissedFg }}; callArrowSkip: 4px; callReDial: IconButton { width: 40px; height: 56px; icon: icon {{ "calls/call_answer", menuIconFg }}; iconOver: icon {{ "calls/call_answer", menuIconFgOver }}; iconPosition: point(-1px, -1px); ripple: defaultRippleAnimation; rippleAreaPosition: point(0px, 8px); rippleAreaSize: 40px; } callCameraReDial: IconButton(callReDial) { icon: icon {{ "calls/call_camera_active", menuIconFg }}; iconOver: icon {{ "calls/call_camera_active", menuIconFgOver }}; } callRatingPadding: margins(24px, 12px, 24px, 0px); callRatingStar: IconButton { width: 36px; height: 36px; icon: icon {{ "calls/call_rating", windowSubTextFg }}; iconPosition: point(-1px, -1px); ripple: RippleAnimation(defaultRippleAnimation) { color: windowBgOver; } rippleAreaPosition: point(0px, 0px); rippleAreaSize: 36px; } callRatingStarFilled: icon {{ "calls/call_rating_filled", lightButtonFg }}; callRatingStarTop: 4px; callRatingComment: InputField(defaultInputField) { textMargins: margins(1px, 26px, 1px, 4px); heightMax: 135px; } callRatingCommentTop: 8px; callDebugPadding: margins(24px, 0px, 24px, 0px); callDebugLabel: FlatLabel(defaultFlatLabel) { margin: callDebugPadding; } callPanelDuration: 150; callPanelSignalBars: CallSignalBars { width: 2px; radius: 1px; skip: 2px; min: 4px; max: 10px; color: callNameFg; inactiveOpacity: 0.5; } callBarSignalBars: CallSignalBars(callPanelSignalBars) { width: 3px; skip: 1px; min: 3px; max: 12px; color: callBarFg; } callTitleButton: IconButton { width: 34px; height: 30px; iconPosition: point(0px, 0px); } callTitleMinimizeIcon: icon { { "calls/calls_minimize_shadow", windowShadowFg }, { "calls/calls_minimize_main", callNameFg }, }; callTitleMinimizeIconOver: icon { { size(34px, 30px), callBgButton }, { size(34px, 30px), callMuteRipple }, { "calls/calls_minimize_shadow", windowShadowFg }, { "calls/calls_minimize_main", callNameFg }, }; callTitleMaximizeIcon: icon { { "calls/calls_maximize_shadow", windowShadowFg }, { "calls/calls_maximize_main", callNameFg }, }; callTitleMaximizeIconOver: icon { { size(34px, 30px), callBgButton }, { size(34px, 30px), callMuteRipple }, { "calls/calls_maximize_shadow", windowShadowFg }, { "calls/calls_maximize_main", callNameFg }, }; callTitleRestoreIcon: icon { { "calls/calls_restore_shadow", windowShadowFg }, { "calls/calls_restore_main", callNameFg }, }; callTitleRestoreIconOver: icon { { size(34px, 30px), callBgButton }, { size(34px, 30px), callMuteRipple }, { "calls/calls_restore_shadow", windowShadowFg }, { "calls/calls_restore_main", callNameFg }, }; callTitleCloseIcon: icon { { "calls/calls_close_shadow", windowShadowFg }, { "calls/calls_close_main", callNameFg }, }; callTitleCloseIconOver: icon { { size(34px, 30px), titleButtonCloseBgOver }, { "calls/calls_close_shadow", windowShadowFg }, { "calls/calls_close_main", titleButtonCloseFgOver }, }; callTitle: WindowTitle(defaultWindowTitle) { height: 0px; bg: callBgOpaque; bgActive: callBgOpaque; fg: transparent; fgActive: transparent; minimize: IconButton(callTitleButton) { icon: callTitleMinimizeIcon; iconOver: callTitleMinimizeIconOver; } minimizeIconActive: callTitleMinimizeIcon; minimizeIconActiveOver: callTitleMinimizeIconOver; maximize: IconButton(callTitleButton) { icon: callTitleMaximizeIcon; iconOver: callTitleMaximizeIconOver; } maximizeIconActive: callTitleMaximizeIcon; maximizeIconActiveOver: callTitleMaximizeIconOver; restoreIcon: callTitleRestoreIcon; restoreIconOver: callTitleRestoreIconOver; restoreIconActive: callTitleRestoreIcon; restoreIconActiveOver: callTitleRestoreIconOver; close: IconButton(callTitleButton) { icon: callTitleCloseIcon; iconOver: callTitleCloseIconOver; } closeIconActive: callTitleCloseIcon; closeIconActiveOver: callTitleCloseIconOver; } callTitleShadowRight: icon {{ "calls/calls_shadow_controls", windowShadowFg }}; callTitleShadowLeft: icon {{ "calls/calls_shadow_controls-flip_horizontal", windowShadowFg }}; callErrorToast: Toast(defaultToast) { minWidth: 240px; } groupCallWidth: 380px; groupCallHeight: 580px; groupCallRipple: RippleAnimation(defaultRippleAnimation) { color: groupCallMembersBgRipple; } groupCallMenu: Menu(defaultMenu) { itemBg: groupCallMenuBg; itemBgOver: groupCallMenuBgOver; itemFg: groupCallMembersFg; itemFgOver: groupCallMembersFg; itemFgDisabled: groupCallMemberNotJoinedStatus; itemFgShortcut: groupCallMemberNotJoinedStatus; itemFgShortcutOver: groupCallMemberNotJoinedStatus; itemFgShortcutDisabled: groupCallMemberNotJoinedStatus; separatorFg: groupCallMenuBgOver; separatorPadding: margins(0px, 4px, 0px, 4px); arrow: icon {{ "dropdown_submenu_arrow", groupCallMemberNotJoinedStatus }}; ripple: RippleAnimation(defaultRippleAnimation) { color: groupCallMenuBgRipple; } } groupCallFinishMenu: Menu(groupCallMenu) { itemFg: groupCallMemberMutedIcon; itemFgOver: groupCallMemberMutedIcon; } groupCallMenuShadow: Shadow(defaultEmptyShadow) { fallback: groupCallMenuBg; } groupCallPanelAnimation: PanelAnimation(defaultPanelAnimation) { fadeBg: groupCallMenuBg; shadow: groupCallMenuShadow; } groupCallPopupMenu: PopupMenu(defaultPopupMenu) { shadow: groupCallMenuShadow; menu: groupCallMenu; animation: groupCallPanelAnimation; } groupCallPopupMenuWithVolume: PopupMenu(groupCallPopupMenu) { scrollPadding: margins(0px, 3px, 0px, 8px); menu: Menu(groupCallMenu) { widthMin: 210px; } } groupCallPopupVolumeMenu: Menu(groupCallMenu) { widthMin: 210px; itemBgOver: groupCallMenuBg; } groupCallMenuCoverSize: 240px; groupCallPopupCoverMenu: Menu(groupCallMenu) { widthMin: groupCallMenuCoverSize; widthMax: groupCallMenuCoverSize; itemBgOver: groupCallMenuBg; } groupCallPopupMenuWithCover: PopupMenu(groupCallPopupMenu) { scrollPadding: margins(0px, 0px, 0px, 8px); menu: Menu(groupCallMenu) { widthMin: groupCallMenuCoverSize; widthMax: groupCallMenuCoverSize; } } groupCallMenuCover: ShortInfoCover(shortInfoCover) { size: groupCallMenuCoverSize; namePosition: point(17px, 28px); statusPosition: point(17px, 8px); } groupCallMenuAbout: FlatLabel(defaultFlatLabel) { textFg: groupCallMemberNotJoinedStatus; palette: TextPalette(defaultTextPalette) { linkFg: groupCallActiveFg; } minWidth: 200px; maxHeight: 92px; } groupCallRecordingTimerPadding: margins(0px, 4px, 0px, 4px); groupCallRecordingTimerFont: font(12px); groupCallInnerDropdown: InnerDropdown(defaultInnerDropdown) { shadow: groupCallMenuShadow; animation: groupCallPanelAnimation; bg: groupCallMenuBg; scroll: defaultSolidScroll; scrollPadding: margins(0px, 4px, 0px, 4px); } groupCallDropdownMenu: DropdownMenu(defaultDropdownMenu) { wrap: groupCallInnerDropdown; menu: groupCallMenu; } groupCallMembersListCheck: RoundCheckbox(defaultPeerListCheck) { border: groupCallMembersBg; bgActive: groupCallActiveFg; check: icon {{ "default_checkbox_check", groupCallMembersFg, point(3px, 6px) }}; } groupCallMembersListCheckbox: RoundImageCheckbox(defaultPeerListCheckbox) { selectFg: groupCallActiveFg; check: groupCallMembersListCheck; } groupCallMembersListItem: PeerListItem(defaultPeerListItem) { button: OutlineButton(defaultPeerListButton) { textBg: groupCallMembersBg; textBgOver: groupCallMembersBgOver; textFg: groupCallMemberInactiveStatus; textFgOver: groupCallMemberInactiveStatus; font: normalFont; padding: margins(11px, 5px, 11px, 5px); ripple: groupCallRipple; } disabledCheckFg: groupCallMemberNotJoinedStatus; checkbox: groupCallMembersListCheckbox; height: 52px; photoPosition: point(12px, 6px); namePosition: point(63px, 7px); statusPosition: point(63px, 26px); photoSize: 40px; nameFg: groupCallMembersFg; nameFgChecked: groupCallMembersFg; statusFg: groupCallMemberInactiveStatus; statusFgOver: groupCallMemberInactiveStatus; statusFgActive: groupCallMemberActiveStatus; } groupCallNarrowMembersListItem: PeerListItem(groupCallMembersListItem) { statusFg: groupCallMemberNotJoinedStatus; statusFgOver: groupCallMemberNotJoinedStatus; statusFgActive: groupCallMemberActiveStatus; } groupCallMembersList: PeerList(defaultPeerList) { bg: groupCallMembersBg; about: FlatLabel(defaultPeerListAbout) { textFg: groupCallMemberNotJoinedStatus; } item: groupCallMembersListItem; } groupCallInviteDividerLabel: FlatLabel(defaultFlatLabel) { textFg: groupCallMemberNotJoinedStatus; } groupCallInviteDividerPadding: margins(17px, 7px, 17px, 7px); groupCallInviteMembersListItem: PeerListItem(groupCallMembersListItem) { statusFg: groupCallMemberNotJoinedStatus; statusFgOver: groupCallMemberNotJoinedStatus; statusFgActive: groupCallMemberInactiveStatus; } groupCallInviteMembersList: PeerList(groupCallMembersList) { padding: margins(0px, 10px, 0px, 10px); item: groupCallInviteMembersListItem; } groupCallJoinAsList: PeerList(groupCallInviteMembersList) { item: PeerListItem(groupCallInviteMembersListItem) { height: 56px; checkbox: RoundImageCheckbox(groupCallMembersListCheckbox) { check: RoundCheckbox(groupCallMembersListCheck) { size: 0px; } imageRadius: 19px; imageSmallRadius: 15px; selectFg: groupCallMemberInactiveStatus; } photoSize: 38px; photoPosition: point(24px, 9px); namePosition: point(73px, 9px); statusPosition: point(73px, 28px); } } peerListJoinAsList: PeerList(peerListBox) { item: PeerListItem(peerListBoxItem) { height: 56px; checkbox: RoundImageCheckbox(defaultPeerListCheckbox) { check: RoundCheckbox(defaultRoundCheckbox) { size: 0px; } imageRadius: 19px; imageSmallRadius: 15px; } photoSize: 38px; photoPosition: point(24px, 9px); namePosition: point(73px, 9px); statusPosition: point(73px, 28px); } } groupCallMultiSelect: MultiSelect(defaultMultiSelect) { bg: groupCallMembersBg; item: MultiSelectItem(defaultMultiSelectItem) { textBg: groupCallMembersBgRipple; textFg: groupCallMembersFg; textActiveBg: groupCallActiveFg; textActiveFg: groupCallMembersFg; deleteFg: groupCallMembersFg; } field: InputField(defaultMultiSelectSearchField) { textFg: groupCallMembersFg; placeholderFg: groupCallMemberNotJoinedStatus; placeholderFgActive: groupCallMemberNotJoinedStatus; placeholderFgError: groupCallMemberNotJoinedStatus; menu: groupCallPopupMenu; } fieldIcon: icon {{ "box_search", groupCallMemberNotJoinedStatus, point(10px, 9px) }}; fieldCancel: CrossButton(defaultMultiSelectSearchCancel) { crossFg: groupCallMemberNotJoinedStatus; crossFgOver: groupCallMemberNotJoinedStatus; ripple: groupCallRipple; } } groupCallField: InputField(defaultInputField) { textMargins: margins(2px, 7px, 2px, 0px); textBg: transparent; textFg: groupCallMembersFg; placeholderFg: groupCallMemberNotJoinedStatus; placeholderFgActive: groupCallMemberNotJoinedStatus; placeholderFgError: groupCallMemberNotJoinedStatus; placeholderMargins: margins(0px, 0px, 0px, 0px); placeholderScale: 0.; placeholderFont: normalFont; heightMin: 32px; borderFg: inputBorderFg; borderFgActive: groupCallMemberInactiveStatus; borderFgError: activeLineFgError; menu: groupCallPopupMenu; } groupCallShareBoxComment: InputField(groupCallField) { textMargins: margins(8px, 8px, 8px, 6px); heightMin: 36px; heightMax: 72px; placeholderMargins: margins(2px, 0px, 2px, 0px); border: 0px; borderActive: 0px; } groupCallShareBoxList: PeerList(groupCallMembersList) { item: PeerListItem(groupCallMembersListItem) { checkbox: RoundImageCheckbox(groupCallMembersListCheckbox) { imageRadius: 28px; imageSmallRadius: 24px; } } } groupCallMembersTop: 51px; groupCallTitleTop: 8px; groupCallSubtitleTop: 26px; groupCallWideVideoTop: 24px; groupCallAddMember: SettingsButton(defaultSettingsButton) { textFg: groupCallMemberNotJoinedStatus; textFgOver: groupCallMemberNotJoinedStatus; textBg: groupCallMembersBg; textBgOver: groupCallMembersBgOver; font: semiboldFont; height: 22px; padding: margins(63px, 17px, 22px, 11px); ripple: groupCallRipple; } groupCallAddMemberIcon: icon {{ "info_add_member", groupCallMemberInactiveIcon, point(0px, 3px) }}; groupCallAddMemberIconLeft: 16px; groupCallSubtitleLabel: FlatLabel(defaultFlatLabel) { maxHeight: 18px; textFg: groupCallMemberNotJoinedStatus; } groupCallTitleLabel: FlatLabel(groupCallSubtitleLabel) { textFg: groupCallMembersFg; style: TextStyle(defaultTextStyle) { font: font(semibold 14px); linkFont: font(semibold 14px); linkFontOver: font(semibold 14px); } } groupCallVideoLimitLabel: FlatLabel(defaultFlatLabel) { align: align(top); textFg: groupCallMemberNotJoinedStatus; style: semiboldTextStyle; minWidth: 96px; } groupCallAddButtonPosition: point(10px, 7px); groupCallMembersWidthMax: 480px; groupCallRecordingMark: 6px; groupCallRecordingMarkSkip: 4px; groupCallRecordingMarkTop: 8px; groupCallMenuTogglePosition: point(13px, 8px); groupCallMenuToggle: IconButton { width: 36px; height: 36px; icon: icon {{ "info/edit/dotsmini", groupCallMemberInactiveIcon }}; iconOver: icon {{ "info/edit/dotsmini", groupCallMemberInactiveIcon }}; iconPosition: point(6px, 6px); rippleAreaPosition: point(3px, 3px); rippleAreaSize: 30px; ripple: RippleAnimation(defaultRippleAnimation) { color: groupCallMembersBg; } } groupCallJoinAsToggle: UserpicButton(defaultUserpicButton) { size: size(36px, 36px); photoSize: 30px; photoPosition: point(3px, 3px); } groupCallMenuPosition: point(-1px, 29px); groupCallWideMenuPosition: point(-2px, 28px); groupCallActiveButton: IconButton { width: 36px; height: 52px; icon: icon {{ "calls/group_calls_unmuted", groupCallMemberInactiveIcon }}; iconOver: icon {{ "calls/group_calls_unmuted", groupCallMemberInactiveIcon }}; iconPosition: point(-1px, -1px); ripple: groupCallRipple; rippleAreaPosition: point(0px, 8px); rippleAreaSize: 36px; } groupCallMemberButtonSkip: 10px; groupCallMemberInactiveCrossLine: CrossLineAnimation { fg: groupCallMemberInactiveIcon; icon: icon {{ "calls/group_calls_unmuted", groupCallMemberInactiveIcon }}; startPosition: point(5px, 2px); endPosition: point(20px, 17px); stroke: 2px; } groupCallMemberColoredCrossLine: CrossLineAnimation(groupCallMemberInactiveCrossLine) { fg: groupCallMemberMutedIcon; icon: icon {{ "calls/group_calls_unmuted", groupCallMemberActiveIcon }}; } groupCallMemberInvited: icon {{ "calls/group_calls_invited", groupCallMemberInactiveIcon }}; groupCallMemberInvitedPosition: point(2px, 12px); groupCallMemberRaisedHand: icon {{ "calls/group_calls_raised_hand", groupCallMemberInactiveStatus }}; groupCallSettingsInner: IconButton(callButton) { iconPosition: point(-1px, 22px); icon: icon {{ "calls/calls_settings", groupCallIconFg }}; ripple: RippleAnimation(defaultRippleAnimation) { color: callMuteRipple; } } groupCallShareInner: IconButton(groupCallSettingsInner) { icon: icon {{ "calls/group_calls_share", groupCallIconFg }}; } groupCallVideoInner: IconButton(groupCallSettingsInner) { icon: icon {{ "calls/call_camera_muted", groupCallIconFg }}; iconPosition: point(-1px, 16px); } groupCallHangupInner: IconButton(callButton) { icon: icon {{ "calls/call_discard", groupCallIconFg }}; ripple: RippleAnimation(defaultRippleAnimation) { color: groupCallLeaveBgRipple; } } groupCallSettings: CallButton(callMicrophoneMute) { button: groupCallSettingsInner; } groupCallShare: CallButton(groupCallSettings) { button: groupCallShareInner; } groupCallVideo: CallButton(groupCallSettings) { button: groupCallVideoInner; } groupCallVideoInnerActive: IconButton(groupCallVideoInner) { icon: icon {{ "calls/call_camera_active", groupCallIconFg }}; } groupCallVideoActive: CallButton(groupCallVideo) { button: groupCallVideoInnerActive; } groupCallHangup: CallButton(callHangup) { button: groupCallHangupInner; bg: groupCallLeaveBg; outerBg: groupCallLeaveBg; label: callButtonLabel; } groupCallSettingsSmall: CallButton(groupCallSettings) { button: IconButton(groupCallSettingsInner) { width: 60px; height: 68px; rippleAreaPosition: point(8px, 12px); } bgPosition: point(8px, 12px); } groupCallHangupSmall: CallButton(groupCallHangup) { button: IconButton(groupCallHangupInner) { width: 60px; height: 68px; rippleAreaPosition: point(8px, 12px); } bgPosition: point(8px, 12px); } groupCallVideoSmall: CallButton(groupCallSettingsSmall) { button: IconButton(groupCallVideoInner) { width: 60px; height: 68px; rippleAreaPosition: point(8px, 12px); } } groupCallVideoActiveSmall: CallButton(groupCallVideoSmall) { button: IconButton(groupCallVideoInnerActive) { width: 60px; height: 68px; rippleAreaPosition: point(8px, 12px); } } groupCallScreenShareSmall: CallButton(groupCallSettingsSmall) { button: IconButton(groupCallSettingsInner) { icon: icon {{ "calls/calls_present", groupCallIconFg }}; width: 60px; height: 68px; rippleAreaPosition: point(8px, 12px); } } groupCallMenuToggleSmall: CallButton(groupCallSettingsSmall) { button: IconButton(groupCallSettingsInner) { icon: icon {{ "calls/calls_more", groupCallIconFg }}; width: 60px; height: 68px; rippleAreaPosition: point(8px, 12px); } } groupCallButtonSkip: 40px; groupCallButtonSkipSmall: 5px; groupCallButtonBottomSkip: 113px; groupCallButtonBottomSkipSmall: 95px; groupCallButtonBottomSkipWide: 108px; groupCallControlsBackMargin: margins(10px, 0px, 10px, 0px); groupCallControlsBackRadius: 12px; groupCallMuteBottomSkip: 116px; groupCallMembersMargin: margins(16px, 16px, 16px, 60px); groupCallMembersTopSkip: 6px; groupCallMembersBottomSkip: 80px; groupCallMembersShadowHeight: 160px; groupCallMembersFadeSkip: 10px; groupCallMembersFadeHeight: 100px; groupCallTopBarUserpics: GroupCallUserpics { size: 28px; shift: 8px; stroke: 2px; align: align(left); } groupCallTopBarJoin: RoundButton(defaultActiveButton) { width: -26px; height: 26px; textTop: 4px; } groupCallTopBarOpen: RoundButton(groupCallTopBarJoin) { ripple: RippleAnimation(defaultRippleAnimation) { color: shadowFg; } } groupCallBoxButton: RoundButton(defaultBoxButton) { textFg: groupCallActiveFg; textFgOver: groupCallActiveFg; numbersTextFg: groupCallActiveFg; numbersTextFgOver: groupCallActiveFg; textBg: groupCallMembersBg; textBgOver: groupCallMembersBgOver; ripple: groupCallRipple; } groupCallBox: Box(defaultBox) { button: groupCallBoxButton; margin: margins(0px, 56px, 0px, 10px); bg: groupCallMembersBg; title: FlatLabel(boxTitle) { textFg: groupCallMembersFg; } titleAdditionalFg: groupCallMemberNotJoinedStatus; } groupCallLayerBox: Box(groupCallBox) { buttonPadding: margins(8px, 8px, 8px, 8px); } groupCallLevelMeter: LevelMeter(defaultLevelMeter) { height: 18px; lineWidth: 3px; lineSpacing: 5px; lineCount: 44; activeFg: groupCallActiveFg; inactiveFg: groupCallMembersBgRipple; } groupCallCheckboxIcon: icon {{ "default_checkbox_check", groupCallMembersFg, point(4px, 7px) }}; groupCallCheck: Check(defaultCheck) { untoggledFg: groupCallMemberNotJoinedStatus; toggledFg: groupCallActiveFg; icon: groupCallCheckboxIcon; } groupCallRadio: Radio(defaultRadio) { untoggledFg: groupCallMemberNotJoinedStatus; toggledFg: groupCallActiveFg; } groupCallCheckbox: Checkbox(defaultBoxCheckbox) { textFg: groupCallMembersFg; textFgActive: groupCallMembersFg; rippleBg: groupCallMembersBgRipple; rippleBgActive: groupCallMembersBgRipple; } groupCallSettingsToggle: Toggle(defaultToggle) { toggledBg: groupCallMembersBg; toggledFg: groupCallActiveFg; untoggledBg: groupCallMembersBg; untoggledFg: groupCallMemberNotJoinedStatus; } groupCallSettingsButton: SettingsButton(defaultSettingsButton) { textFg: groupCallMembersFg; textFgOver: groupCallMembersFg; textBg: groupCallMembersBg; textBgOver: groupCallMembersBgOver; rightLabel: FlatLabel(defaultSettingsRightLabel) { textFg: groupCallActiveFg; } toggle: groupCallSettingsToggle; toggleOver: groupCallSettingsToggle; ripple: groupCallRipple; } groupCallSettingsAttentionButton: SettingsButton(groupCallSettingsButton) { textFg: attentionButtonFg; textFgOver: attentionButtonFgOver; } groupCallBoxLabel: FlatLabel(boxLabel) { textFg: groupCallMembersFg; } groupCallJoinAsLabel: FlatLabel(defaultFlatLabel) { minWidth: 272px; textFg: groupCallMembersFg; } groupCallJoinAsWidth: 330px; groupCallJoinAsTextTop: 4px; groupCallJoinAsNameTop: 23px; groupCallJoinAsPadding: margins(12px, 8px, 12px, 7px); groupCallJoinAsPhotoSize: 30px; groupCallRowBlobMinRadius: 27px; groupCallRowBlobMaxRadius: 29px; groupCallDelayLabel: LabelSimple(defaultLabelSimple) { textFg: groupCallMembersFg; font: boxTextFont; } groupCallDelayLabelMargin: margins(22px, 10px, 20px, 5px); groupCallDelaySlider: MediaSlider(defaultContinuousSlider) { seekSize: size(15px, 15px); activeFg: groupCallActiveFg; inactiveFg: groupCallMemberNotJoinedStatus; activeFgOver: groupCallActiveFg; inactiveFgOver: groupCallMemberNotJoinedStatus; activeFgDisabled: groupCallActiveFg; inactiveFgDisabled: groupCallMemberNotJoinedStatus; receivedTillFg: groupCallMemberNotJoinedStatus; } groupCallDelayMargin: margins(22px, 5px, 20px, 10px); groupCallTitleButton: IconButton { width: 24px; height: 21px; iconPosition: point(0px, 0px); } groupCallTitleMinimizeIcon: icon { { "title_button_minimize", groupCallMemberNotJoinedStatus, point(4px, 4px) }, }; groupCallTitleMinimizeIconOver: icon { { size(24px, 21px), groupCallMembersBgOver }, { "title_button_minimize", groupCallMembersFg, point(4px, 4px) }, }; groupCallTitleMaximizeIcon: icon { { "title_button_maximize", groupCallMemberNotJoinedStatus, point(4px, 4px) }, }; groupCallTitleMaximizeIconOver: icon { { size(24px, 21px), groupCallMembersBgOver }, { "title_button_maximize", groupCallMembersFg, point(4px, 4px) }, }; groupCallTitleRestoreIcon: icon { { "title_button_restore", groupCallMemberNotJoinedStatus, point(4px, 4px) }, }; groupCallTitleRestoreIconOver: icon { { size(24px, 21px), groupCallMembersBgOver }, { "title_button_restore", groupCallMembersFg, point(4px, 4px) }, }; groupCallTitleCloseIcon: icon { { "title_button_close", groupCallMemberNotJoinedStatus, point(4px, 4px) }, }; groupCallTitleCloseIconOver: icon { { size(24px, 21px), titleButtonCloseBgOver }, { "title_button_close", titleButtonCloseFgOver, point(4px, 4px) }, }; groupCallTitle: WindowTitle(defaultWindowTitle) { height: 0px; bg: groupCallBg; bgActive: groupCallBg; fg: transparent; fgActive: transparent; minimize: IconButton(groupCallTitleButton) { icon: groupCallTitleMinimizeIcon; iconOver: groupCallTitleMinimizeIconOver; } minimizeIconActive: groupCallTitleMinimizeIcon; minimizeIconActiveOver: groupCallTitleMinimizeIconOver; maximize: IconButton(groupCallTitleButton) { icon: groupCallTitleMaximizeIcon; iconOver: groupCallTitleMaximizeIconOver; } maximizeIconActive: groupCallTitleMaximizeIcon; maximizeIconActiveOver: groupCallTitleMaximizeIconOver; restoreIcon: groupCallTitleRestoreIcon; restoreIconOver: groupCallTitleRestoreIconOver; restoreIconActive: groupCallTitleRestoreIcon; restoreIconActiveOver: groupCallTitleRestoreIconOver; close: IconButton(groupCallTitleButton) { icon: groupCallTitleCloseIcon; iconOver: groupCallTitleCloseIconOver; } closeIconActive: groupCallTitleCloseIcon; closeIconActiveOver: groupCallTitleCloseIconOver; } groupCallMajorBlobIdleRadius: 2px; groupCallMajorBlobMaxRadius: 4px; groupCallMinorBlobIdleRadius: 3px; groupCallMinorBlobMaxRadius: 12px; groupCallMuteCrossLine: CrossLineAnimation { fg: groupCallIconFg; icon: icon {{ "calls/volume/speaker", groupCallIconFg }}; startPosition: point(2px, 5px); endPosition: point(16px, 19px); stroke: 2px; } groupCallMenuSpeakerArcsSkip: 1px; groupCallMenuVolumeSkip: 5px; groupCallMenuVolumePadding: margins(17px, 6px, 17px, 5px); groupCallMenuVolumeMargin: margins(55px, 0px, 15px, 0px); groupCallMenuVolumeSlider: MediaSlider(defaultContinuousSlider) { activeFg: groupCallMembersFg; inactiveFg: groupCallMembersBgOver; activeFgOver: groupCallMembersFg; inactiveFgOver: groupCallMembersBgOver; activeFgDisabled: groupCallMembersBgOver; receivedTillFg: groupCallMembersBgOver; width: 7px; seekSize: size(7px, 7px); } groupCallSpeakerArcsAnimation: ArcsAnimation { fg: groupCallIconFg; stroke: 2px; space: 4px; duration: 200; deltaAngle: 60; deltaHeight: 6px; deltaWidth: 7px; startHeight: 3px; startWidth: 0px; } groupCallStatusSpeakerIcon: icon {{ "calls/volume/speaker_small", groupCallIconFg }}; groupCallStatusSpeakerArcsSkip: 3px; groupCallStatusSpeakerArcsAnimation: ArcsAnimation(groupCallSpeakerArcsAnimation) { deltaAngle: 68; space: 3px; deltaHeight: 5px; deltaWidth: 4px; startHeight: 1px; } groupCallShareMutedMargin: margins(16px, 16px, 16px, 8px); callTopBarMuteCrossLine: CrossLineAnimation { fg: callBarFg; icon: icon {{ "calls/call_record_active", callBarFg }}; startPosition: point(11px, 8px); endPosition: point(26px, 23px); stroke: 2px; } groupCallStartsIn: FlatLabel(defaultFlatLabel) { style: TextStyle(defaultTextStyle) { font: font(20px semibold); linkFont: font(20px semibold); linkFontOver: font(20px semibold underline); } textFg: groupCallMembersFg; } groupCallScheduledBodyHeight: 200px; groupCallStartsWhen: groupCallStartsIn; groupCallStartsInTop: 10px; groupCallStartsWhenTop: 160px; groupCallCountdownFont: font(64px semibold); groupCallCountdownTop: 52px; desktopCaptureMargins: margins(12px, 8px, 12px, 6px); desktopCaptureSourceSize: size(235px, 165px); desktopCaptureSourceSkips: size(2px, 10px); desktopCaptureSourceTitle: WindowTitle(groupCallTitle) { bg: groupCallMembersBgOver; bgActive: groupCallMembersBgOver; height: 21px; } desktopCapturePadding: margins(7px, 7px, 7px, 33px); desktopCaptureLabelBottom: 7px; desktopCaptureLabel: FlatLabel(defaultFlatLabel) { minWidth: 200px; maxHeight: 20px; textFg: groupCallMembersFg; style: semiboldTextStyle; } desktopCaptureCancel: RoundButton(defaultBoxButton) { textFg: groupCallActiveFg; textFgOver: groupCallActiveFg; numbersTextFg: groupCallActiveFg; numbersTextFgOver: groupCallActiveFg; textBg: groupCallMembersBg; textBgOver: groupCallMembersBgOver; ripple: groupCallRipple; } desktopCaptureFinish: RoundButton(desktopCaptureCancel) { textFg: groupCallMemberMutedIcon; textFgOver: groupCallMemberMutedIcon; } desktopCaptureSubmit: RoundButton(desktopCaptureCancel) { textFg: groupCallIconFg; textFgOver: groupCallIconFg; numbersTextFg: groupCallIconFg; numbersTextFgOver: groupCallIconFg; textBg: groupCallMuted1; textBgOver: groupCallMuted1; ripple: RippleAnimation(groupCallRipple) { color: shadowFg; } } desktopCaptureWithAudio: Checkbox(defaultCheckbox) { textFg: groupCallMembersFg; textFgActive: groupCallMembersFg; rippleBg: groupCallMembersBgRipple; rippleBgActive: groupCallMembersBgRipple; style: semiboldTextStyle; } desktopCaptureWithAudioCheck: Check(defaultCheck) { untoggledFg: groupCallActiveFg; } groupCallNarrowSkip: 9px; groupCallNarrowMembersWidth: 204px; groupCallNarrowVideoHeight: 120px; groupCallWideModeWidthMin: 600px; groupCallWideModeSize: size(960px, 580px); groupCallNarrowInactiveCrossLine: CrossLineAnimation { fg: groupCallMemberNotJoinedStatus; icon: icon {{ "calls/video_mini_mute", groupCallMemberNotJoinedStatus }}; startPosition: point(3px, 0px); endPosition: point(13px, 12px); stroke: 3px; strokeDenominator: 2; } groupCallNarrowColoredCrossLine: CrossLineAnimation(groupCallNarrowInactiveCrossLine) { fg: groupCallMemberNotJoinedStatus; icon: icon {{ "calls/video_mini_mute", groupCallMemberActiveStatus }}; } groupCallNarrowRaisedHand: icon {{ "calls/video_mini_speak", groupCallMemberInactiveStatus }}; groupCallNarrowCameraIcon: icon {{ "calls/video_mini_video", groupCallMemberNotJoinedStatus }}; groupCallNarrowScreenIcon: icon {{ "calls/video_mini_screencast", groupCallMemberNotJoinedStatus }}; groupCallNarrowInvitedIcon: icon {{ "calls/video_mini_invited", groupCallMemberNotJoinedStatus }}; groupCallNarrowIconPosition: point(-4px, 2px); groupCallNarrowIconSkip: 15px; groupCallOutline: 2px; groupCallVideoCrossLine: CrossLineAnimation(groupCallMemberColoredCrossLine) { fg: groupCallVideoTextFg; icon: icon {{ "calls/video_over_mute", groupCallVideoTextFg }}; } GroupCallVideoTile { shadowHeight: pixels; namePosition: point; pin: CrossLineAnimation; pinPosition: point; pinPadding: margins; pinTextPosition: point; back: icon; iconPosition: point; } groupCallVideoTile: GroupCallVideoTile { shadowHeight: 40px; namePosition: point(15px, 8px); pin: CrossLineAnimation { fg: groupCallVideoTextFg; icon: icon {{ "calls/video_over_pin", groupCallVideoTextFg }}; startPosition: point(7px, 4px); endPosition: point(17px, 14px); stroke: 3px; strokeDenominator: 2; } pinPosition: point(18px, 18px); pinPadding: margins(6px, 2px, 12px, 1px); pinTextPosition: point(1px, 3px); back: icon {{ "calls/video_back", groupCallVideoTextFg }}; iconPosition: point(10px, 5px); } groupCallVideoSmallSkip: 4px; groupCallVideoLargeSkip: 6px; groupCallVideoPlaceholderHeight: 212px; groupCallVideoPlaceholderIconTop: 50px; groupCallVideoPlaceholderTextTop: 120px; groupCallTooltip: Tooltip(defaultTooltip) { textBg: groupCallMembersBg; textFg: groupCallMembersFg; textBorder: groupCallMembersBgOver; } groupCallNiceTooltip: ImportantTooltip(defaultImportantTooltip) { bg: importantTooltipBg; padding: margins(10px, 3px, 10px, 5px); radius: 4px; arrow: 4px; } groupCallNiceTooltipLabel: FlatLabel(defaultImportantTooltipLabel) { style: TextStyle(defaultTextStyle) { font: font(11px); linkFont: font(11px); linkFontOver: font(11px underline); } } groupCallStickedTooltip: ImportantTooltip(groupCallNiceTooltip) { padding: margins(10px, 1px, 6px, 3px); } groupCallStickedTooltipClose: IconButton(defaultIconButton) { width: 20px; height: 20px; iconPosition: point(4px, 3px); icon: icon {{ "calls/video_tooltip", importantTooltipFg }}; iconOver: icon {{ "calls/video_tooltip", importantTooltipFg }}; ripple: emptyRippleAnimation; } groupCallNiceTooltipTop: 4px; groupCallPaused: icon {{ "calls/video_large_paused", groupCallVideoTextFg }}; groupCallRecordingSubLabel: FlatLabel(boxDividerLabel) { margin: margins(0px, 0px, 0px, 0px); textFg: groupCallMemberNotJoinedStatus; align: align(top); } groupCallRecordingInfoMargins: margins(0px, 22px, 0px, 22px); groupCallRecordingSubLabelMargins: margins(8px, 22px, 8px, 22px); groupCallRecordingAudioSkip: 23px; groupCallRecordingSelectWidth: 2px; groupCallRecordingInfoHeight: 204px;