tdesktop/Telegram/SourceFiles/calls/calls.style

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

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

using "ui/widgets/widgets.style";
using "ui/layers/layers.style";
using "ui/chat/chat.style"; // GroupCallUserpics
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;
		}
	}
}
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;
	}
}

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);
	}
}
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: groupCallMemberInactiveIcon;
	activeFgOver: groupCallMembersFg;
	inactiveFgOver: groupCallMemberInactiveIcon;
	activeFgDisabled: groupCallMemberInactiveIcon;
	receivedTillFg: groupCallMemberInactiveIcon;
	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;
	}
}

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 }};
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, 1px, 10px, 3px);
	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 }};