tdesktop/Telegram/SourceFiles/calls/calls.style

653 lines
18 KiB
Plaintext

/*
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 "window/window.style";
CallSignalBars {
width: pixels;
radius: pixels;
skip: pixels;
min: pixels;
max: pixels;
color: color;
inactiveOpacity: double;
}
callRadius: 6px;
callShadow: Shadow {
left: icon {{ "calls/call_shadow_left", windowShadowFg }};
topLeft: icon {{ "calls/call_shadow_top_left", windowShadowFg }};
top: icon {{ "calls/call_shadow_top", windowShadowFg }};
topRight: icon {{ "calls/call_shadow_top_left-flip_horizontal", windowShadowFg }};
right: icon {{ "calls/call_shadow_left-flip_horizontal", windowShadowFg }};
bottomRight: icon {{ "calls/call_shadow_top_left-flip_vertical-flip_horizontal", windowShadowFg }};
bottom: icon {{ "calls/call_shadow_top-flip_vertical", windowShadowFg }};
bottomLeft: icon {{ "calls/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/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;
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;
}
callTitleShadow: icon {{ "calls/calls_shadow_controls", windowShadowFg }};
callErrorToast: Toast(defaultToast) {
minWidth: 240px;
}
groupCallWidth: 380px;
groupCallHeight: 580px;
groupCallRipple: RippleAnimation(defaultRippleAnimation) {
color: groupCallMembersBgRipple;
}
groupCallMenu: Menu(defaultMenu) {
itemBg: groupCallMembersBgOver;
itemBgOver: groupCallMembersBgRipple;
itemFg: groupCallMembersFg;
itemFgOver: groupCallMembersFg;
itemFgDisabled: groupCallMemberNotJoinedStatus;
itemFgShortcut: groupCallMemberNotJoinedStatus;
itemFgShortcutOver: groupCallMemberNotJoinedStatus;
itemFgShortcutDisabled: groupCallMemberNotJoinedStatus;
separatorFg: groupCallMemberNotJoinedStatus;
arrow: icon {{ "dropdown_submenu_arrow", groupCallMemberNotJoinedStatus }};
ripple: groupCallRipple;
}
groupCallMenuShadow: Shadow(defaultEmptyShadow) {
fallback: groupCallMembersBgOver;
}
groupCallPanelAnimation: PanelAnimation(defaultPanelAnimation) {
fadeBg: groupCallMembersBgOver;
shadow: groupCallMenuShadow;
}
groupCallPopupMenu: PopupMenu(defaultPopupMenu) {
shadow: groupCallMenuShadow;
menu: groupCallMenu;
animation: groupCallPanelAnimation;
}
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: RoundImageCheckbox(defaultPeerListCheckbox) {
selectFg: groupCallActiveFg;
check: RoundCheckbox(defaultPeerListCheck) {
border: groupCallMembersBg;
bgActive: groupCallActiveFg;
check: icon {{ "default_checkbox_check", groupCallMembersFg, point(3px, 6px) }};
}
}
height: 52px;
photoPosition: point(12px, 6px);
namePosition: point(68px, 7px);
statusPosition: point(68px, 26px);
photoSize: 40px;
nameFg: groupCallMembersFg;
nameFgChecked: groupCallMembersFg;
statusFg: groupCallMemberInactiveStatus;
statusFgOver: groupCallMemberInactiveStatus;
statusFgActive: groupCallMemberActiveStatus;
}
groupCallMembersList: PeerList(defaultPeerList) {
bg: groupCallMembersBg;
about: FlatLabel(defaultPeerListAbout) {
textFg: groupCallMemberInactiveStatus;
}
item: groupCallMembersListItem;
}
groupCallInviteMembersList: PeerList(groupCallMembersList) {
item: PeerListItem(groupCallMembersListItem) {
statusFg: groupCallMemberNotJoinedStatus;
statusFgOver: groupCallMemberNotJoinedStatus;
statusFgActive: groupCallMemberInactiveStatus;
}
}
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;
}
}
groupCallMembersHeader: 47px;
groupCallMembersMargin: margins(16px, 16px, 16px, 28px);
groupCallAddMember: IconButton(defaultIconButton) {
width: 36px;
height: 36px;
iconPosition: point(3px, 5px);
icon: icon {{ "info_add_member", groupCallMemberInactiveIcon }};
iconOver: icon {{ "info_add_member", groupCallMemberInactiveIcon }};
rippleAreaPosition: point(0px, 0px);
rippleAreaSize: 36px;
ripple: groupCallRipple;
}
groupCallHeaderPosition: point(16px, 16px);
groupCallHeaderLabel: FlatLabel(defaultFlatLabel) {
maxHeight: 18px;
textFg: groupCallMembersFg;
style: TextStyle(defaultTextStyle) {
font: semiboldFont;
linkFont: semiboldFont;
linkFontOver: semiboldFont;
}
}
groupCallAddButtonPosition: point(10px, 7px);
groupCallMembersWidthMax: 360px;
groupCallInactiveButton: IconButton {
width: 36px;
height: 52px;
icon: icon {{ "calls/group_calls_muted", groupCallMemberInactiveIcon }};
iconOver: icon {{ "calls/group_calls_muted", groupCallMemberInactiveIcon }};
iconPosition: point(-1px, -1px);
ripple: groupCallRipple;
rippleAreaPosition: point(0px, 8px);
rippleAreaSize: 36px;
}
groupCallActiveButton: IconButton(groupCallInactiveButton) {
icon: icon {{ "calls/group_calls_unmuted", groupCallMemberActiveIcon }};
iconOver: icon {{ "calls/group_calls_unmuted", groupCallMemberActiveIcon }};
}
groupCallMutedButton: IconButton(groupCallInactiveButton) {
icon: icon {{ "calls/group_calls_muted", groupCallMemberMutedIcon }};
iconOver: icon {{ "calls/group_calls_muted", groupCallMemberMutedIcon }};
}
groupCallMemberButtonSkip: 10px;
groupCallSettings: CallButton(callMicrophoneMute) {
button: IconButton(callButton) {
iconPosition: point(-1px, 22px);
icon: icon {{ "calls/call_settings", callIconFg }};
ripple: RippleAnimation(defaultRippleAnimation) {
color: callMuteRipple;
}
}
bg: callIconBg;
outerBg: callMuteRipple;
label: callButtonLabel;
}
groupCallButtonSkip: 43px;
groupCallButtonBottomSkip: 134px;
groupCallMuteBottomSkip: 149px;
groupCallTopBarUserpicSize: 28px;
groupCallTopBarUserpicShift: 8px;
groupCallTopBarUserpicStroke: 2px;
groupCallTopBarJoin: RoundButton(defaultActiveButton) {
width: -30px;
height: 28px;
textTop: 5px;
}
groupCallBox: Box(defaultBox) {
button: RoundButton(defaultBoxButton) {
textFg: groupCallActiveFg;
textFgOver: groupCallActiveFg;
numbersTextFg: groupCallActiveFg;
numbersTextFgOver: groupCallActiveFg;
textBg: groupCallMembersBg;
textBgOver: groupCallMembersBgOver;
ripple: groupCallRipple;
}
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: groupCallMemberNotJoinedStatus;
}
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;
}
groupCallSettingsButton: SettingsButton {
textFg: groupCallMembersFg;
textFgOver: groupCallMembersFg;
textBg: groupCallMembersBg;
textBgOver: groupCallMembersBgOver;
font: boxTextFont;
rightLabel: FlatLabel(defaultSettingsRightLabel) {
textFg: groupCallActiveFg;
}
height: 20px;
padding: margins(22px, 10px, 22px, 8px);
ripple: groupCallRipple;
}
groupCallSettingsAttentionButton: SettingsButton(groupCallSettingsButton) {
textFg: attentionButtonFg;
textFgOver: attentionButtonFgOver;
}
groupCallBoxLabel: FlatLabel(boxLabel) {
textFg: groupCallMembersFg;
}