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 "window/window.style";

CallSignalBars {
	width: pixels;
	radius: pixels;
	skip: pixels;
	color: color;
	inactiveOpacity: double;
}

callRadius: 6px;
callShadow: Shadow {
	left: icon {{ "call_shadow_left", windowShadowFg }};
	topLeft: icon {{ "call_shadow_top_left", windowShadowFg }};
	top: icon {{ "call_shadow_top", windowShadowFg }};
	topRight: icon {{ "call_shadow_top_left-flip_horizontal", windowShadowFg }};
	right: icon {{ "call_shadow_left-flip_horizontal", windowShadowFg }};
	bottomRight: icon {{ "call_shadow_top_left-flip_vertical-flip_horizontal", windowShadowFg }};
	bottom: icon {{ "call_shadow_top-flip_vertical", windowShadowFg }};
	bottomLeft: icon {{ "call_shadow_top_left-flip_vertical", windowShadowFg }};
	extend: margins(9px, 8px, 9px, 10px);
	fallback: windowShadowFgFallback;
}

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_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(9px, 4px, 9px, 5px);
callFingerprintTop: 11px;
callFingerprintSkip: 3px;
callFingerprintBottom: -16px;

callTooltipMutedIcon: icon{{ "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 {{ "call_answer", callIconFg }};
		ripple: RippleAnimation(defaultRippleAnimation) {
			color: callAnswerRipple;
		}
	}
	bg: callAnswerBg;
	angle: 135.;
	outerRadius: 12px;
	outerBg: callAnswerBgOuter;
	label: callButtonLabel;
}
callHangup: CallButton {
	button: IconButton(callButton) {
		icon: icon {{ "call_discard", callIconFg }};
		ripple: RippleAnimation(defaultRippleAnimation) {
			color: callHangupRipple;
		}
	}
	bg: callHangupBg;
	outerBg: callHangupBg;
	label: callButtonLabel;
}
callCancel: CallButton {
	button: IconButton(callButton) {
		icon: icon {{ "call_cancel", callIconFgActive }};
		ripple: RippleAnimation(defaultRippleAnimation) {
			color: callIconActiveRipple;
		}
	}
	bg: callIconBgActive;
	outerBg: callIconBgActive;
	label: callButtonLabel;
}
callMicrophoneMute: CallButton {
	button: IconButton(callButton) {
		icon: icon {{ "call_record_active", callIconFg }};
		ripple: RippleAnimation(defaultRippleAnimation) {
			color: callMuteRipple;
		}
	}
	bg: callIconBg;
	outerBg: callMuteRipple;
	label: callButtonLabel;
}
callMicrophoneUnmute: CallButton(callMicrophoneMute) {
	button: IconButton(callButton) {
		icon: icon {{ "call_record_muted", callIconFgActive }};
		ripple: RippleAnimation(defaultRippleAnimation) {
			color: callIconActiveRipple;
		}
	}
	bg: callIconBgActive;
}
callCameraMute: CallButton(callMicrophoneMute) {
	button: IconButton(callButton) {
		icon: icon {{ "call_camera_active", callIconFg }};
		ripple: RippleAnimation(defaultRippleAnimation) {
			color: callMuteRipple;
		}
	}
}
callCameraUnmute: CallButton(callMicrophoneUnmute) {
	button: IconButton(callButton) {
		icon: icon {{ "call_camera_muted", callIconFgActive }};
		ripple: RippleAnimation(defaultRippleAnimation) {
			color: callIconActiveRipple;
		}
	}
}
callBottomShadowSize: 124px;

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 {{ "call_record_active", callBarFg }};
	iconPosition: point(3px, 2px);

	ripple: RippleAnimation(defaultRippleAnimation) {
		color: callBarMuteRipple;
	}
	rippleAreaPosition: point(5px, 3px);
	rippleAreaSize: 32px;
}
callBarUnmuteIcon: icon {{ "call_record_muted", callBarFg }};
callBarRightSkip: 12px;
callBarSkip: 10px;
callBarHangup: IconButton(callBarMuteToggle) {
	icon: icon {{ "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 {{ "call_arrow_in", callArrowFg }};
callArrowOut: icon {{ "call_arrow_out", callArrowFg }};
callArrowMissed: icon {{ "call_arrow_in", callArrowMissedFg }};
callArrowSkip: 4px;
callReDial: IconButton {
	width: 40px;
	height: 56px;

	icon: mainMenuCalls;
	iconOver: mainMenuCallsOver;
	iconPosition: point(-1px, -1px);

	ripple: defaultRippleAnimation;
	rippleAreaPosition: point(0px, 8px);
	rippleAreaSize: 40px;
}

callRatingPadding: margins(24px, 12px, 24px, 0px);
callRatingStar: IconButton {
	width: 36px;
	height: 36px;

	icon: icon {{ "call_rating", windowSubTextFg }};
	iconPosition: point(-1px, -1px);

	ripple: RippleAnimation(defaultRippleAnimation) {
		color: windowBgOver;
	}
	rippleAreaPosition: point(0px, 0px);
	rippleAreaSize: 36px;
}
callRatingStarFilled: icon {{ "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: 3px;
	radius: 1px;
	skip: 1px;
	color: callNameFg;
	inactiveOpacity: 0.5;
}
callBarSignalBars: CallSignalBars(callPanelSignalBars) {
	color: callBarFg;
}
callSignalMargin: 8px;
callSignalPadding: 4px;

callTitleButton: IconButton {
	width: 34px;
	height: 30px;
	iconPosition: point(0px, 0px);
}
callTitleMinimizeIcon: icon {
	{ "calls_minimize_shadow", windowShadowFg },
	{ "calls_minimize_main", callNameFg },
};
callTitleMinimizeIconOver: icon {
	{ size(34px, 30px), callBgButton },
	{ size(34px, 30px), callMuteRipple },
	{ "calls_minimize_shadow", windowShadowFg },
	{ "calls_minimize_main", callNameFg },
};
callTitleMaximizeIcon: icon {
	{ "calls_maximize_shadow", windowShadowFg },
	{ "calls_maximize_main", callNameFg },
};
callTitleMaximizeIconOver: icon {
	{ size(34px, 30px), callBgButton },
	{ size(34px, 30px), callMuteRipple },
	{ "calls_maximize_shadow", windowShadowFg },
	{ "calls_maximize_main", callNameFg },
};
callTitleRestoreIcon: icon {
	{ "calls_restore_shadow", windowShadowFg },
	{ "calls_restore_main", callNameFg },
};
callTitleRestoreIconOver: icon {
	{ size(34px, 30px), callBgButton },
	{ size(34px, 30px), callMuteRipple },
	{ "calls_restore_shadow", windowShadowFg },
	{ "calls_restore_main", callNameFg },
};
callTitleCloseIcon: icon {
	{ "calls_close_shadow", windowShadowFg },
	{ "calls_close_main", callNameFg },
};
callTitleCloseIconOver: icon {
	{ size(34px, 30px), titleButtonCloseBgOver },
	{ "calls_close_shadow", windowShadowFg },
	{ "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;
}
callTitleShadow: icon {{ "calls_shadow_controls", windowShadowFg }};