calls.style 42 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486
  1. /*
  2. This file is part of Telegram Desktop,
  3. the official desktop application for the Telegram messaging service.
  4. For license and copyright information please follow this link:
  5. https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
  6. */
  7. using "ui/basic.style";
  8. using "ui/widgets/widgets.style";
  9. using "ui/layers/layers.style";
  10. using "ui/chat/chat.style"; // GroupCallUserpics
  11. using "info/info.style"; // ShortInfoCover
  12. using "window/window.style";
  13. using "settings/settings.style"; // defaultSubsectionTitle
  14. CallSignalBars {
  15. width: pixels;
  16. radius: pixels;
  17. skip: pixels;
  18. min: pixels;
  19. max: pixels;
  20. color: color;
  21. inactiveOpacity: double;
  22. }
  23. callWidthMin: 300px;
  24. callHeightMin: 440px;
  25. callWidth: 720px;
  26. callHeight: 540px;
  27. callBottomControlsHeight: 87px;
  28. CallBodyLayout {
  29. height: pixels;
  30. photoTop: pixels;
  31. photoSize: pixels;
  32. nameTop: pixels;
  33. statusTop: pixels;
  34. muteStroke: pixels;
  35. muteSize: pixels;
  36. mutePosition: point;
  37. }
  38. callBodyLayout: CallBodyLayout {
  39. height: 284px;
  40. photoTop: 21px;
  41. photoSize: 160px;
  42. nameTop: 221px;
  43. statusTop: 254px;
  44. muteStroke: 3px;
  45. muteSize: 36px;
  46. mutePosition: point(142px, 135px);
  47. }
  48. callBodyWithPreview: CallBodyLayout {
  49. height: 185px;
  50. photoTop: 21px;
  51. photoSize: 100px;
  52. nameTop: 132px;
  53. statusTop: 163px;
  54. muteStroke: 3px;
  55. muteSize: 0px;
  56. mutePosition: point(90px, 84px);
  57. }
  58. callMutedPeerIcon: icon {{ "calls/calls_mute_userpic", callIconFg }};
  59. callOutgoingPreviewMin: size(360px, 120px);
  60. callOutgoingPreview: size(540px, 180px); // default, for height == callHeight.
  61. callOutgoingPreviewMax: size(1620px, 540px);
  62. callOutgoingDefaultSize: size(160px, 110px);
  63. callInnerPadding: 12px;
  64. callFingerprintPadding: margins(10px, 4px, 8px, 5px);
  65. callFingerprintSkip: 4px;
  66. callFingerprintSignalBarsSkip: 2px;
  67. callSignalBarsPadding: margins(8px, 9px, 11px, 5px);
  68. callFingerprintTop: 8px;
  69. callFingerprintBottom: -16px;
  70. callTooltipMutedIcon: icon{{ "calls/calls_mute_tooltip", videoPlayIconFg }};
  71. callTooltipMutedIconPosition: point(10px, 5px);
  72. callTooltipPadding: margins(41px, 7px, 15px, 8px);
  73. callButton: IconButton {
  74. width: 68px;
  75. height: 79px;
  76. iconPosition: point(-1px, 16px);
  77. rippleAreaPosition: point(12px, 12px);
  78. rippleAreaSize: 44px;
  79. ripple: defaultRippleAnimation;
  80. }
  81. callButtonLabel: FlatLabel(defaultFlatLabel) {
  82. textFg: callNameFg;
  83. style: TextStyle(defaultTextStyle) {
  84. font: font(11px);
  85. }
  86. }
  87. callAnswer: CallButton {
  88. button: IconButton(callButton) {
  89. icon: icon {{ "calls/call_answer", callIconFg }};
  90. ripple: RippleAnimation(defaultRippleAnimation) {
  91. color: callAnswerRipple;
  92. }
  93. }
  94. bg: callAnswerBg;
  95. bgSize: 44px;
  96. bgPosition: point(12px, 12px);
  97. angle: 135.;
  98. outerRadius: 12px;
  99. outerBg: callAnswerBgOuter;
  100. label: callButtonLabel;
  101. }
  102. callStartVideo: CallButton(callAnswer) {
  103. button: IconButton(callButton) {
  104. icon: icon {{ "calls/call_camera_active", callIconFg }};
  105. ripple: RippleAnimation(defaultRippleAnimation) {
  106. color: callAnswerRipple;
  107. }
  108. }
  109. }
  110. callHangup: CallButton(callAnswer) {
  111. button: IconButton(callButton) {
  112. icon: icon {{ "calls/call_discard", callIconFg }};
  113. ripple: RippleAnimation(defaultRippleAnimation) {
  114. color: callHangupRipple;
  115. }
  116. }
  117. bg: callHangupBg;
  118. outerBg: callHangupBg;
  119. label: callButtonLabel;
  120. }
  121. callCancel: CallButton(callAnswer) {
  122. button: IconButton(callButton) {
  123. icon: icon {{ "calls/call_cancel", callIconFgActive }};
  124. ripple: RippleAnimation(defaultRippleAnimation) {
  125. color: callIconActiveRipple;
  126. }
  127. }
  128. bg: callIconBgActive;
  129. outerBg: callIconBgActive;
  130. label: callButtonLabel;
  131. }
  132. callMicrophoneMute: CallButton(callAnswer) {
  133. button: IconButton(callButton) {
  134. icon: icon {{ "calls/call_record_active", callIconFg }};
  135. ripple: RippleAnimation(defaultRippleAnimation) {
  136. color: callMuteRipple;
  137. }
  138. }
  139. bg: callIconBg;
  140. outerBg: callMuteRipple;
  141. label: callButtonLabel;
  142. cornerButtonPosition: point(40px, 4px);
  143. cornerButtonBorder: 2px;
  144. }
  145. callMicrophoneUnmute: CallButton(callMicrophoneMute) {
  146. button: IconButton(callButton) {
  147. icon: icon {{ "calls/call_record_muted", callIconFgActive }};
  148. ripple: RippleAnimation(defaultRippleAnimation) {
  149. color: callIconActiveRipple;
  150. }
  151. }
  152. bg: callIconBgActive;
  153. }
  154. callCameraMute: CallButton(callMicrophoneMute) {
  155. button: IconButton(callButton) {
  156. icon: icon {{ "calls/call_camera_active", callIconFg }};
  157. ripple: RippleAnimation(defaultRippleAnimation) {
  158. color: callMuteRipple;
  159. }
  160. }
  161. }
  162. callCameraUnmute: CallButton(callMicrophoneUnmute) {
  163. button: IconButton(callButton) {
  164. icon: icon {{ "calls/call_camera_muted", callIconFgActive }};
  165. ripple: RippleAnimation(defaultRippleAnimation) {
  166. color: callIconActiveRipple;
  167. }
  168. }
  169. }
  170. callCornerButtonInner: IconButton {
  171. width: 20px;
  172. height: 20px;
  173. iconPosition: point(-1px, -1px);
  174. rippleAreaPosition: point(0px, 0px);
  175. rippleAreaSize: 20px;
  176. ripple: defaultRippleAnimation;
  177. }
  178. callCornerButton: CallButton(callMicrophoneMute) {
  179. button: IconButton(callCornerButtonInner) {
  180. icon: icon {{ "calls/mini_calls_arrow", callIconFg }};
  181. ripple: RippleAnimation(defaultRippleAnimation) {
  182. color: callMuteRipple;
  183. }
  184. }
  185. bgSize: 20px;
  186. bgPosition: point(0px, 0px);
  187. }
  188. callCornerButtonInactive: CallButton(callMicrophoneUnmute, callCornerButton) {
  189. button: IconButton(callCornerButtonInner) {
  190. icon: icon {{ "calls/mini_calls_arrow", callIconFgActive }};
  191. ripple: RippleAnimation(defaultRippleAnimation) {
  192. color: callIconActiveRipple;
  193. }
  194. }
  195. }
  196. callScreencastOn: CallButton(callMicrophoneMute) {
  197. button: IconButton(callButton) {
  198. icon: icon {{ "calls/calls_present", callIconFg }};
  199. iconPosition: point(-1px, 22px);
  200. ripple: RippleAnimation(defaultRippleAnimation) {
  201. color: callMuteRipple;
  202. }
  203. }
  204. }
  205. callScreencastOff: CallButton(callMicrophoneUnmute) {
  206. button: IconButton(callButton) {
  207. icon: icon {{ "calls/calls_present", callIconFgActive }};
  208. iconPosition: point(-1px, 22px);
  209. ripple: RippleAnimation(defaultRippleAnimation) {
  210. color: callIconActiveRipple;
  211. }
  212. }
  213. }
  214. callBottomShadowSize: 124px;
  215. CallMuteButton {
  216. active: CallButton;
  217. muted: CallButton;
  218. labelAdditional: pixels;
  219. sublabel: FlatLabel;
  220. labelsSkip: pixels;
  221. sublabelSkip: pixels;
  222. lottieSize: size;
  223. lottieTop: pixels;
  224. }
  225. callMuteButtonLabel: FlatLabel(defaultFlatLabel) {
  226. textFg: groupCallMembersFg;
  227. style: TextStyle(defaultTextStyle) {
  228. font: font(14px);
  229. }
  230. }
  231. callMuteButtonActiveInner: IconButton {
  232. width: 112px;
  233. height: 138px;
  234. }
  235. callMuteButtonSmallActiveInner: IconButton {
  236. width: 68px;
  237. height: 68px;
  238. }
  239. callMuteButtonActive: CallButton {
  240. button: callMuteButtonActiveInner;
  241. bg: groupCallLive1;
  242. bgSize: 77px;
  243. bgPosition: point(18px, 18px);
  244. outerRadius: 18px;
  245. outerBg: callAnswerBgOuter;
  246. label: callMuteButtonLabel;
  247. }
  248. callMuteButton: CallMuteButton {
  249. active: callMuteButtonActive;
  250. muted: CallButton(callMuteButtonActive) {
  251. bg: groupCallMuted1;
  252. label: callMuteButtonLabel;
  253. }
  254. labelAdditional: 5px;
  255. sublabel: FlatLabel(defaultFlatLabel) {
  256. textFg: groupCallMemberNotJoinedStatus;
  257. }
  258. labelsSkip: 8px;
  259. sublabelSkip: 14px;
  260. lottieSize: size(54px, 54px);
  261. lottieTop: 31px;
  262. }
  263. callMuteButtonSmallActive: CallButton(callMuteButtonActive) {
  264. button: callMuteButtonSmallActiveInner;
  265. bgSize: 42px;
  266. bgPosition: point(13px, 13px);
  267. outerRadius: 13px;
  268. label: callButtonLabel;
  269. }
  270. callMuteButtonSmall: CallMuteButton(callMuteButton) {
  271. active: callMuteButtonSmallActive;
  272. muted: CallButton(callMuteButtonSmallActive) {
  273. bg: groupCallMuted1;
  274. label: callButtonLabel;
  275. }
  276. labelsSkip: 0px;
  277. sublabelSkip: 0px;
  278. lottieSize: size(36px, 36px);
  279. lottieTop: 17px;
  280. }
  281. callMuteMinorBlobMinRadius: 64px;
  282. callMuteMinorBlobMaxRadius: 74px;
  283. callMuteMajorBlobMinRadius: 67px;
  284. callMuteMajorBlobMaxRadius: 77px;
  285. callMuteBlobRadiusForDiameter: 100px;
  286. callMuteToFullScreen: icon {{ "player/player_fullscreen", groupCallIconFg }};
  287. callMuteFromFullScreen: icon {{ "player/player_minimize", groupCallIconFg }};
  288. callConnectingRadial: InfiniteRadialAnimation(defaultInfiniteRadialAnimation) {
  289. color: lightButtonFg;
  290. thickness: 4px;
  291. }
  292. callName: FlatLabel(defaultFlatLabel) {
  293. minWidth: 260px;
  294. maxHeight: 30px;
  295. textFg: callNameFg;
  296. align: align(top);
  297. style: TextStyle(defaultTextStyle) {
  298. font: font(21px semibold);
  299. }
  300. }
  301. callStatus: FlatLabel(defaultFlatLabel) {
  302. minWidth: 260px;
  303. maxHeight: 60px;
  304. textFg: callStatusFg;
  305. align: align(top);
  306. style: TextStyle(defaultTextStyle) {
  307. font: font(14px);
  308. }
  309. }
  310. callRemoteAudioMute: FlatLabel(callStatus) {
  311. minWidth: 0px;
  312. textFg: videoPlayIconFg;
  313. style: TextStyle(defaultTextStyle) {
  314. font: font(12px);
  315. }
  316. }
  317. callRemoteAudioMuteSkip: 12px;
  318. callBarHeight: 38px;
  319. callBarMuteToggle: IconButton {
  320. width: 41px;
  321. height: 38px;
  322. icon: icon {{ "calls/call_record_active", callBarFg }};
  323. iconPosition: point(3px, 2px);
  324. ripple: RippleAnimation(defaultRippleAnimation) {
  325. color: callBarMuteRipple;
  326. }
  327. rippleAreaPosition: point(5px, 3px);
  328. rippleAreaSize: 32px;
  329. }
  330. callBarRightSkip: 12px;
  331. callBarSkip: 10px;
  332. callBarHangup: IconButton(callBarMuteToggle) {
  333. icon: icon {{ "calls/call_discard", callBarFg }};
  334. iconPosition: point(3px, 1px);
  335. }
  336. callBarLabel: LabelSimple(defaultLabelSimple) {
  337. font: semiboldFont;
  338. textFg: callBarFg;
  339. }
  340. callBarInfoLabel: FlatLabel(defaultFlatLabel) {
  341. maxHeight: 28px;
  342. align: align(top);
  343. textFg: callBarFg;
  344. style: TextStyle(defaultTextStyle) {
  345. font: semiboldFont;
  346. }
  347. }
  348. callBarLabelTop: 10px;
  349. callArrowPosition: point(-2px, 1px);
  350. callArrowIn: icon {{ "calls/call_arrow_in", callArrowFg }};
  351. callArrowOut: icon {{ "calls/call_arrow_out", callArrowFg }};
  352. callArrowMissed: icon {{ "calls/call_arrow_in", callArrowMissedFg }};
  353. callArrowSkip: 4px;
  354. callReDial: IconButton {
  355. width: 40px;
  356. height: 56px;
  357. icon: icon {{ "calls/call_answer", menuIconFg }};
  358. iconOver: icon {{ "calls/call_answer", menuIconFgOver }};
  359. iconPosition: point(-1px, -1px);
  360. ripple: defaultRippleAnimation;
  361. rippleAreaPosition: point(0px, 8px);
  362. rippleAreaSize: 40px;
  363. }
  364. callCameraReDial: IconButton(callReDial) {
  365. icon: icon {{ "calls/call_camera_active", menuIconFg }};
  366. iconOver: icon {{ "calls/call_camera_active", menuIconFgOver }};
  367. }
  368. callGroupCall: IconButton(callCameraReDial) {
  369. icon: icon {{ "top_bar_group_call", menuIconFg }};
  370. iconOver: icon {{ "top_bar_group_call", menuIconFgOver }};
  371. }
  372. callRatingPadding: margins(24px, 12px, 24px, 0px);
  373. callRatingStar: IconButton {
  374. width: 36px;
  375. height: 36px;
  376. icon: icon {{ "calls/call_rating", windowSubTextFg }};
  377. iconPosition: point(-1px, -1px);
  378. ripple: defaultRippleAnimationBgOver;
  379. rippleAreaPosition: point(0px, 0px);
  380. rippleAreaSize: 36px;
  381. }
  382. callRatingStarFilled: icon {{ "calls/call_rating_filled", lightButtonFg }};
  383. callRatingStarTop: 4px;
  384. callRatingComment: InputField(defaultInputField) {
  385. textMargins: margins(1px, 26px, 1px, 4px);
  386. heightMax: 135px;
  387. }
  388. callRatingCommentTop: 8px;
  389. callDebugPadding: margins(24px, 0px, 24px, 0px);
  390. callDebugLabel: FlatLabel(defaultFlatLabel) {
  391. margin: callDebugPadding;
  392. }
  393. callPanelDuration: 150;
  394. callPanelSignalBars: CallSignalBars {
  395. width: 2px;
  396. radius: 1px;
  397. skip: 2px;
  398. min: 4px;
  399. max: 10px;
  400. color: callNameFg;
  401. inactiveOpacity: 0.5;
  402. }
  403. callBarSignalBars: CallSignalBars(callPanelSignalBars) {
  404. width: 3px;
  405. skip: 1px;
  406. min: 3px;
  407. max: 12px;
  408. color: callBarFg;
  409. }
  410. callTitleButton: windowTitleButton;
  411. callTitleMinimizeIcon: icon {
  412. { "title_shadow_minimize", windowShadowFg },
  413. { "title_button_minimize", callNameFg },
  414. };
  415. callTitleMinimizeIconOver: icon {
  416. { windowTitleButtonSize, callBgButton },
  417. { windowTitleButtonSize, callMuteRipple },
  418. { "title_shadow_minimize", windowShadowFg },
  419. { "title_button_minimize", callNameFg },
  420. };
  421. callTitleMaximizeIcon: icon {
  422. { "title_shadow_maximize", windowShadowFg },
  423. { "title_button_maximize", callNameFg },
  424. };
  425. callTitleMaximizeIconOver: icon {
  426. { windowTitleButtonSize, callBgButton },
  427. { windowTitleButtonSize, callMuteRipple },
  428. { "title_shadow_maximize", windowShadowFg },
  429. { "title_button_maximize", callNameFg },
  430. };
  431. callTitleRestoreIcon: icon {
  432. { "title_shadow_restore", windowShadowFg },
  433. { "title_button_restore", callNameFg },
  434. };
  435. callTitleRestoreIconOver: icon {
  436. { windowTitleButtonSize, callBgButton },
  437. { windowTitleButtonSize, callMuteRipple },
  438. { "title_shadow_restore", windowShadowFg },
  439. { "title_button_restore", callNameFg },
  440. };
  441. callTitleCloseIcon: icon {
  442. { "title_shadow_close", windowShadowFg },
  443. { "title_button_close", callNameFg },
  444. };
  445. callTitleCloseIconOver: icon {
  446. { windowTitleButtonSize, titleButtonCloseBgOver },
  447. { "title_shadow_close", windowShadowFg },
  448. { "title_button_close", titleButtonCloseFgOver },
  449. };
  450. callTitle: WindowTitle(defaultWindowTitle) {
  451. height: 0px;
  452. bg: callBgOpaque;
  453. bgActive: callBgOpaque;
  454. fg: transparent;
  455. fgActive: transparent;
  456. minimize: IconButton(callTitleButton) {
  457. icon: callTitleMinimizeIcon;
  458. iconOver: callTitleMinimizeIconOver;
  459. }
  460. minimizeIconActive: callTitleMinimizeIcon;
  461. minimizeIconActiveOver: callTitleMinimizeIconOver;
  462. maximize: IconButton(callTitleButton) {
  463. icon: callTitleMaximizeIcon;
  464. iconOver: callTitleMaximizeIconOver;
  465. }
  466. maximizeIconActive: callTitleMaximizeIcon;
  467. maximizeIconActiveOver: callTitleMaximizeIconOver;
  468. restoreIcon: callTitleRestoreIcon;
  469. restoreIconOver: callTitleRestoreIconOver;
  470. restoreIconActive: callTitleRestoreIcon;
  471. restoreIconActiveOver: callTitleRestoreIconOver;
  472. close: IconButton(callTitleButton) {
  473. icon: callTitleCloseIcon;
  474. iconOver: callTitleCloseIconOver;
  475. }
  476. closeIconActive: callTitleCloseIcon;
  477. closeIconActiveOver: callTitleCloseIconOver;
  478. }
  479. callTitleShadowRight: icon {{ "calls/calls_shadow_controls", windowShadowFg }};
  480. callTitleShadowLeft: icon {{ "calls/calls_shadow_controls-flip_horizontal", windowShadowFg }};
  481. callErrorToast: Toast(defaultToast) {
  482. minWidth: 240px;
  483. }
  484. groupCallWidth: 380px;
  485. groupCallHeight: 580px;
  486. groupCallWidthRtmp: 720px;
  487. groupCallWidthRtmpMin: 240px;
  488. groupCallHeightRtmp: 580px;
  489. groupCallHeightRtmpMin: 160px;
  490. groupCallRipple: RippleAnimation(defaultRippleAnimation) {
  491. color: groupCallMembersBgRipple;
  492. }
  493. groupCallMenu: Menu(defaultMenu) {
  494. itemBg: groupCallMenuBg;
  495. itemBgOver: groupCallMenuBgOver;
  496. itemFg: groupCallMembersFg;
  497. itemFgOver: groupCallMembersFg;
  498. itemFgDisabled: groupCallMemberNotJoinedStatus;
  499. itemFgShortcut: groupCallMemberNotJoinedStatus;
  500. itemFgShortcutOver: groupCallMemberNotJoinedStatus;
  501. itemFgShortcutDisabled: groupCallMemberNotJoinedStatus;
  502. separator: MenuSeparator(defaultMenuSeparator) {
  503. padding: margins(0px, 4px, 0px, 4px);
  504. fg: groupCallMenuBgOver;
  505. }
  506. arrow: icon {{ "menu/submenu_arrow", groupCallMemberNotJoinedStatus }};
  507. ripple: RippleAnimation(defaultRippleAnimation) {
  508. color: groupCallMenuBgRipple;
  509. }
  510. }
  511. groupCallFinishMenu: Menu(groupCallMenu) {
  512. itemFg: groupCallMemberMutedIcon;
  513. itemFgOver: groupCallMemberMutedIcon;
  514. }
  515. groupCallMenuShadow: Shadow(defaultEmptyShadow) {
  516. fallback: groupCallMenuBg;
  517. }
  518. groupCallPanelAnimation: PanelAnimation(defaultPanelAnimation) {
  519. fadeBg: groupCallMenuBg;
  520. shadow: groupCallMenuShadow;
  521. }
  522. groupCallPopupMenu: PopupMenu(defaultPopupMenu) {
  523. shadow: groupCallMenuShadow;
  524. menu: groupCallMenu;
  525. animation: groupCallPanelAnimation;
  526. }
  527. groupCallPopupMenuWithVolume: PopupMenu(groupCallPopupMenu) {
  528. scrollPadding: margins(0px, 3px, 0px, 8px);
  529. menu: Menu(groupCallMenu) {
  530. widthMin: 210px;
  531. }
  532. }
  533. groupCallPopupVolumeMenu: Menu(groupCallMenu) {
  534. widthMin: 210px;
  535. itemBgOver: groupCallMenuBg;
  536. }
  537. groupCallMenuCoverSize: 240px;
  538. groupCallPopupCoverMenu: Menu(groupCallMenu) {
  539. widthMin: groupCallMenuCoverSize;
  540. widthMax: groupCallMenuCoverSize;
  541. itemBgOver: groupCallMenuBg;
  542. }
  543. groupCallPopupMenuWithCover: PopupMenu(groupCallPopupMenu) {
  544. scrollPadding: margins(0px, 0px, 0px, 8px);
  545. menu: Menu(groupCallMenu) {
  546. widthMin: groupCallMenuCoverSize;
  547. widthMax: groupCallMenuCoverSize;
  548. }
  549. }
  550. groupCallMenuCover: ShortInfoCover(shortInfoCover) {
  551. radius: roundRadiusSmall;
  552. size: groupCallMenuCoverSize;
  553. namePosition: point(17px, 28px);
  554. statusPosition: point(17px, 8px);
  555. }
  556. groupCallMenuAbout: FlatLabel(defaultFlatLabel) {
  557. textFg: groupCallMemberNotJoinedStatus;
  558. palette: TextPalette(defaultTextPalette) {
  559. linkFg: groupCallActiveFg;
  560. }
  561. minWidth: 200px;
  562. maxHeight: 92px;
  563. }
  564. callDeviceSelectionLabel: FlatLabel(defaultSubsectionTitle) {
  565. textFg: groupCallActiveFg;
  566. minWidth: 200px;
  567. maxHeight: 20px;
  568. }
  569. callDeviceSelectionMenu: PopupMenu(groupCallPopupMenu) {
  570. scrollPadding: margins(0px, 3px, 0px, 8px);
  571. menu: Menu(groupCallMenu) {
  572. widthMin: 240px;
  573. itemPadding: margins(17px, 8px, 17px, 7px);
  574. }
  575. }
  576. groupCallRecordingTimerPadding: margins(0px, 4px, 0px, 4px);
  577. groupCallRecordingTimerFont: font(12px);
  578. groupCallInnerDropdown: InnerDropdown(defaultInnerDropdown) {
  579. shadow: groupCallMenuShadow;
  580. animation: groupCallPanelAnimation;
  581. bg: groupCallMenuBg;
  582. scroll: defaultSolidScroll;
  583. scrollPadding: margins(0px, 4px, 0px, 4px);
  584. }
  585. groupCallDropdownMenu: DropdownMenu(defaultDropdownMenu) {
  586. wrap: groupCallInnerDropdown;
  587. menu: groupCallMenu;
  588. }
  589. groupCallMembersListCheck: RoundCheckbox(defaultPeerListCheck) {
  590. border: groupCallMembersBg;
  591. bgActive: groupCallActiveFg;
  592. check: icon {{ "default_checkbox_check", groupCallMembersFg, point(3px, 6px) }};
  593. }
  594. groupCallMembersListCheckbox: RoundImageCheckbox(defaultPeerListCheckbox) {
  595. selectFg: groupCallActiveFg;
  596. check: groupCallMembersListCheck;
  597. }
  598. groupCallMembersListItem: PeerListItem(defaultPeerListItem) {
  599. button: OutlineButton(defaultPeerListButton) {
  600. textBg: groupCallMembersBg;
  601. textBgOver: groupCallMembersBgOver;
  602. textFg: groupCallMemberInactiveStatus;
  603. textFgOver: groupCallMemberInactiveStatus;
  604. font: normalFont;
  605. padding: margins(11px, 5px, 11px, 5px);
  606. ripple: groupCallRipple;
  607. }
  608. disabledCheckFg: groupCallMemberNotJoinedStatus;
  609. checkbox: groupCallMembersListCheckbox;
  610. height: 52px;
  611. photoPosition: point(12px, 6px);
  612. namePosition: point(63px, 7px);
  613. statusPosition: point(63px, 26px);
  614. photoSize: 40px;
  615. nameFg: groupCallMembersFg;
  616. nameFgChecked: groupCallMembersFg;
  617. statusFg: groupCallMemberInactiveStatus;
  618. statusFgOver: groupCallMemberInactiveStatus;
  619. statusFgActive: groupCallMemberActiveStatus;
  620. }
  621. groupCallNarrowMembersListItem: PeerListItem(groupCallMembersListItem) {
  622. statusFg: groupCallMemberNotJoinedStatus;
  623. statusFgOver: groupCallMemberNotJoinedStatus;
  624. statusFgActive: groupCallMemberActiveStatus;
  625. }
  626. groupCallMembersList: PeerList(defaultPeerList) {
  627. bg: groupCallMembersBg;
  628. about: FlatLabel(defaultPeerListAbout) {
  629. textFg: groupCallMemberNotJoinedStatus;
  630. }
  631. item: groupCallMembersListItem;
  632. }
  633. groupCallInviteDividerPadding: margins(17px, 7px, 17px, 7px);
  634. groupCallInviteMembersListItem: PeerListItem(groupCallMembersListItem) {
  635. statusFg: groupCallMemberNotJoinedStatus;
  636. statusFgOver: groupCallMemberNotJoinedStatus;
  637. statusFgActive: groupCallMemberInactiveStatus;
  638. }
  639. groupCallInviteMembersList: PeerList(groupCallMembersList) {
  640. padding: margins(0px, 10px, 0px, 10px);
  641. item: groupCallInviteMembersListItem;
  642. }
  643. groupCallJoinAsList: PeerList(groupCallInviteMembersList) {
  644. item: PeerListItem(groupCallInviteMembersListItem) {
  645. height: 56px;
  646. checkbox: RoundImageCheckbox(groupCallMembersListCheckbox) {
  647. check: RoundCheckbox(groupCallMembersListCheck) {
  648. size: 0px;
  649. }
  650. imageRadius: 19px;
  651. imageSmallRadius: 15px;
  652. selectFg: groupCallMemberInactiveStatus;
  653. }
  654. photoSize: 38px;
  655. photoPosition: point(24px, 9px);
  656. namePosition: point(73px, 9px);
  657. statusPosition: point(73px, 28px);
  658. }
  659. }
  660. peerListJoinAsList: PeerList(peerListBox) {
  661. item: PeerListItem(peerListBoxItem) {
  662. height: 56px;
  663. checkbox: RoundImageCheckbox(defaultPeerListCheckbox) {
  664. check: RoundCheckbox(defaultRoundCheckbox) {
  665. size: 0px;
  666. }
  667. imageRadius: 19px;
  668. imageSmallRadius: 15px;
  669. }
  670. photoSize: 38px;
  671. photoPosition: point(24px, 9px);
  672. namePosition: point(73px, 9px);
  673. statusPosition: point(73px, 28px);
  674. }
  675. }
  676. groupCallMultiSelect: MultiSelect(defaultMultiSelect) {
  677. bg: groupCallMembersBg;
  678. item: MultiSelectItem(defaultMultiSelectItem) {
  679. textBg: groupCallMembersBgRipple;
  680. textFg: groupCallMembersFg;
  681. textActiveBg: groupCallActiveFg;
  682. textActiveFg: groupCallMembersFg;
  683. deleteFg: groupCallMembersFg;
  684. }
  685. field: InputField(defaultMultiSelectSearchField) {
  686. textFg: groupCallMembersFg;
  687. placeholderFg: groupCallMemberNotJoinedStatus;
  688. placeholderFgActive: groupCallMemberNotJoinedStatus;
  689. placeholderFgError: groupCallMemberNotJoinedStatus;
  690. menu: groupCallPopupMenu;
  691. }
  692. fieldIcon: icon {{ "box_search", groupCallMemberNotJoinedStatus, point(10px, 9px) }};
  693. fieldCancel: CrossButton(defaultMultiSelectSearchCancel) {
  694. crossFg: groupCallMemberNotJoinedStatus;
  695. crossFgOver: groupCallMemberNotJoinedStatus;
  696. ripple: groupCallRipple;
  697. }
  698. }
  699. groupCallField: InputField(defaultInputField) {
  700. textMargins: margins(2px, 7px, 2px, 0px);
  701. textBg: transparent;
  702. textFg: groupCallMembersFg;
  703. placeholderFg: groupCallMemberNotJoinedStatus;
  704. placeholderFgActive: groupCallMemberNotJoinedStatus;
  705. placeholderFgError: groupCallMemberNotJoinedStatus;
  706. placeholderMargins: margins(0px, 0px, 0px, 0px);
  707. placeholderScale: 0.;
  708. placeholderFont: normalFont;
  709. heightMin: 32px;
  710. borderFg: inputBorderFg;
  711. borderFgActive: groupCallMemberInactiveStatus;
  712. borderFgError: activeLineFgError;
  713. menu: groupCallPopupMenu;
  714. }
  715. groupCallShareBoxComment: InputField(groupCallField) {
  716. textMargins: margins(8px, 8px, 8px, 6px);
  717. heightMin: 36px;
  718. heightMax: 72px;
  719. placeholderMargins: margins(2px, 0px, 2px, 0px);
  720. border: 0px;
  721. borderActive: 0px;
  722. }
  723. groupCallShareBoxList: PeerList(groupCallMembersList) {
  724. item: PeerListItem(groupCallMembersListItem) {
  725. nameStyle: TextStyle(defaultTextStyle) {
  726. font: font(11px);
  727. }
  728. checkbox: RoundImageCheckbox(groupCallMembersListCheckbox) {
  729. imageRadius: 28px;
  730. imageSmallRadius: 24px;
  731. }
  732. }
  733. }
  734. groupCallMembersTop: 51px;
  735. groupCallTitleTop: 8px;
  736. groupCallSubtitleTop: 26px;
  737. groupCallWideVideoTop: 24px;
  738. groupCallAddMember: SettingsButton(defaultSettingsButton) {
  739. textFg: groupCallMemberNotJoinedStatus;
  740. textFgOver: groupCallMemberNotJoinedStatus;
  741. textBg: groupCallMembersBg;
  742. textBgOver: groupCallMembersBgOver;
  743. style: semiboldTextStyle;
  744. height: 22px;
  745. padding: margins(63px, 17px, 22px, 11px);
  746. iconLeft: 16px;
  747. ripple: groupCallRipple;
  748. }
  749. groupCallAddMemberIcon: icon {{ "info/info_add_member", groupCallMemberInactiveIcon, point(0px, 3px) }};
  750. groupCallSubtitleLabel: FlatLabel(defaultFlatLabel) {
  751. maxHeight: 18px;
  752. textFg: groupCallMemberNotJoinedStatus;
  753. }
  754. groupCallTitleLabel: FlatLabel(groupCallSubtitleLabel) {
  755. textFg: groupCallMembersFg;
  756. style: TextStyle(defaultTextStyle) {
  757. font: font(semibold 14px);
  758. }
  759. }
  760. groupCallTitleSeparator: 4px;
  761. groupCallVideoLimitLabel: FlatLabel(defaultFlatLabel) {
  762. align: align(top);
  763. textFg: groupCallMemberNotJoinedStatus;
  764. style: semiboldTextStyle;
  765. minWidth: 96px;
  766. }
  767. groupCallMembersWidthMax: 480px;
  768. groupCallRecordingMark: 6px;
  769. groupCallRecordingMarkSkip: 4px;
  770. groupCallRecordingMarkTop: 8px;
  771. groupCallMenuTogglePosition: point(13px, 8px);
  772. groupCallMenuToggle: IconButton {
  773. width: 36px;
  774. height: 36px;
  775. icon: icon {{ "info/edit/dotsmini", groupCallMemberInactiveIcon }};
  776. iconOver: icon {{ "info/edit/dotsmini", groupCallMemberInactiveIcon }};
  777. iconPosition: point(2px, 2px);
  778. rippleAreaPosition: point(3px, 3px);
  779. rippleAreaSize: 30px;
  780. ripple: RippleAnimation(defaultRippleAnimation) {
  781. color: groupCallMembersBg;
  782. }
  783. }
  784. groupCallJoinAsToggle: UserpicButton(defaultUserpicButton) {
  785. size: size(36px, 36px);
  786. photoSize: 30px;
  787. photoPosition: point(3px, 3px);
  788. }
  789. groupCallMenuPosition: point(-1px, 29px);
  790. groupCallWideMenuPosition: point(-2px, 28px);
  791. groupCallActiveButton: IconButton {
  792. width: 36px;
  793. height: 52px;
  794. icon: icon {{ "calls/group_calls_unmuted", groupCallMemberInactiveIcon }};
  795. iconOver: icon {{ "calls/group_calls_unmuted", groupCallMemberInactiveIcon }};
  796. iconPosition: point(-1px, -1px);
  797. ripple: groupCallRipple;
  798. rippleAreaPosition: point(0px, 8px);
  799. rippleAreaSize: 36px;
  800. }
  801. groupCallMemberButtonSkip: 10px;
  802. groupCallMemberInactiveCrossLine: CrossLineAnimation {
  803. fg: groupCallMemberInactiveIcon;
  804. icon: icon {{ "calls/group_calls_unmuted", groupCallMemberInactiveIcon }};
  805. startPosition: point(5px, 2px);
  806. endPosition: point(20px, 17px);
  807. stroke: 2px;
  808. }
  809. groupCallMemberColoredCrossLine: CrossLineAnimation(groupCallMemberInactiveCrossLine) {
  810. fg: groupCallMemberMutedIcon;
  811. icon: icon {{ "calls/group_calls_unmuted", groupCallMemberActiveIcon }};
  812. }
  813. groupCallMemberInvited: icon {{ "calls/group_calls_invited", groupCallMemberInactiveIcon }};
  814. groupCallMemberInvitedPosition: point(2px, 12px);
  815. groupCallMemberRaisedHand: icon {{ "calls/group_calls_raised_hand", groupCallMemberInactiveStatus }};
  816. groupCallSettingsInner: IconButton(callButton) {
  817. iconPosition: point(-1px, 22px);
  818. icon: icon {{ "calls/calls_settings", groupCallIconFg }};
  819. ripple: RippleAnimation(defaultRippleAnimation) {
  820. color: callMuteRipple;
  821. }
  822. }
  823. groupCallShareInner: IconButton(groupCallSettingsInner) {
  824. icon: icon {{ "calls/group_calls_share", groupCallIconFg }};
  825. }
  826. groupCallVideoInner: IconButton(groupCallSettingsInner) {
  827. icon: icon {{ "calls/call_camera_muted", groupCallIconFg }};
  828. iconPosition: point(-1px, 16px);
  829. }
  830. groupCallHangupInner: IconButton(callButton) {
  831. icon: icon {{ "calls/call_discard", groupCallIconFg }};
  832. ripple: RippleAnimation(defaultRippleAnimation) {
  833. color: groupCallLeaveBgRipple;
  834. }
  835. }
  836. groupCallSettings: CallButton(callMicrophoneMute) {
  837. button: groupCallSettingsInner;
  838. }
  839. groupCallShare: CallButton(groupCallSettings) {
  840. button: groupCallShareInner;
  841. }
  842. groupCallVideo: CallButton(groupCallSettings) {
  843. button: groupCallVideoInner;
  844. }
  845. groupCallVideoInnerActive: IconButton(groupCallVideoInner) {
  846. icon: icon {{ "calls/call_camera_active", groupCallIconFg }};
  847. }
  848. groupCallVideoActive: CallButton(groupCallVideo) {
  849. button: groupCallVideoInnerActive;
  850. }
  851. groupCallHangup: CallButton(callHangup) {
  852. button: groupCallHangupInner;
  853. bg: groupCallLeaveBg;
  854. outerBg: groupCallLeaveBg;
  855. label: callButtonLabel;
  856. }
  857. groupCallSettingsSmall: CallButton(groupCallSettings) {
  858. button: IconButton(groupCallSettingsInner) {
  859. width: 60px;
  860. height: 68px;
  861. rippleAreaPosition: point(8px, 12px);
  862. }
  863. bgPosition: point(8px, 12px);
  864. }
  865. groupCallHangupSmall: CallButton(groupCallHangup) {
  866. button: IconButton(groupCallHangupInner) {
  867. width: 60px;
  868. height: 68px;
  869. rippleAreaPosition: point(8px, 12px);
  870. }
  871. bgPosition: point(8px, 12px);
  872. }
  873. groupCallVideoSmall: CallButton(groupCallSettingsSmall) {
  874. button: IconButton(groupCallVideoInner) {
  875. width: 60px;
  876. height: 68px;
  877. rippleAreaPosition: point(8px, 12px);
  878. }
  879. }
  880. groupCallVideoActiveSmall: CallButton(groupCallVideoSmall) {
  881. button: IconButton(groupCallVideoInnerActive) {
  882. width: 60px;
  883. height: 68px;
  884. rippleAreaPosition: point(8px, 12px);
  885. }
  886. }
  887. groupCallScreenShareSmall: CallButton(groupCallSettingsSmall) {
  888. button: IconButton(groupCallSettingsInner) {
  889. icon: icon {{ "calls/calls_present", groupCallIconFg }};
  890. width: 60px;
  891. height: 68px;
  892. rippleAreaPosition: point(8px, 12px);
  893. }
  894. }
  895. groupCallMenuToggleSmall: CallButton(groupCallSettingsSmall) {
  896. button: IconButton(groupCallSettingsInner) {
  897. icon: icon {{ "calls/calls_more", groupCallIconFg }};
  898. width: 60px;
  899. height: 68px;
  900. rippleAreaPosition: point(8px, 12px);
  901. }
  902. }
  903. groupCallButtonSkip: 40px;
  904. groupCallButtonSkipSmall: 5px;
  905. groupCallButtonBottomSkip: 113px;
  906. groupCallButtonBottomSkipWide: 108px;
  907. groupCallControlsBackMargin: margins(10px, 0px, 10px, 0px);
  908. groupCallControlsBackRadius: 12px;
  909. groupCallMuteBottomSkip: 116px;
  910. groupCallMembersMargin: margins(16px, 16px, 16px, 60px);
  911. groupCallMembersTopSkip: 6px;
  912. groupCallMembersBottomSkip: 80px;
  913. groupCallMembersShadowHeight: 160px;
  914. groupCallMembersFadeSkip: 10px;
  915. groupCallMembersFadeHeight: 100px;
  916. groupCallTopBarUserpics: GroupCallUserpics {
  917. size: 28px;
  918. shift: 8px;
  919. stroke: 2px;
  920. align: align(left);
  921. }
  922. groupCallTopBarJoin: RoundButton(defaultActiveButton) {
  923. width: -26px;
  924. height: 26px;
  925. textTop: 4px;
  926. }
  927. groupCallTopBarOpen: RoundButton(groupCallTopBarJoin) {
  928. ripple: universalRippleAnimation;
  929. }
  930. groupCallBoxButton: RoundButton(defaultBoxButton) {
  931. textFg: groupCallActiveFg;
  932. textFgOver: groupCallActiveFg;
  933. numbersTextFg: groupCallActiveFg;
  934. numbersTextFgOver: groupCallActiveFg;
  935. textBg: groupCallMembersBg;
  936. textBgOver: groupCallMembersBgOver;
  937. ripple: groupCallRipple;
  938. }
  939. groupCallBox: Box(defaultBox) {
  940. button: groupCallBoxButton;
  941. margin: margins(0px, 56px, 0px, 10px);
  942. bg: groupCallMembersBg;
  943. title: FlatLabel(boxTitle) {
  944. textFg: groupCallMembersFg;
  945. }
  946. titleAdditionalFg: groupCallMemberNotJoinedStatus;
  947. }
  948. groupCallLayerBox: Box(groupCallBox) {
  949. buttonPadding: margins(8px, 8px, 8px, 8px);
  950. }
  951. groupCallLevelMeter: LevelMeter(defaultLevelMeter) {
  952. height: 18px;
  953. lineWidth: 3px;
  954. lineSpacing: 5px;
  955. lineCount: 44;
  956. activeFg: groupCallActiveFg;
  957. inactiveFg: groupCallMembersBgRipple;
  958. }
  959. groupCallCheckboxIcon: icon {{ "default_checkbox_check", groupCallMembersFg, point(4px, 7px) }};
  960. groupCallCheck: Check(defaultCheck) {
  961. untoggledFg: groupCallMemberNotJoinedStatus;
  962. toggledFg: groupCallActiveFg;
  963. icon: groupCallCheckboxIcon;
  964. }
  965. groupCallRadio: Radio(defaultRadio) {
  966. untoggledFg: groupCallMemberNotJoinedStatus;
  967. toggledFg: groupCallActiveFg;
  968. }
  969. groupCallCheckbox: Checkbox(defaultBoxCheckbox) {
  970. textFg: groupCallMembersFg;
  971. textFgActive: groupCallMembersFg;
  972. rippleBg: groupCallMembersBgRipple;
  973. rippleBgActive: groupCallMembersBgRipple;
  974. }
  975. groupCallSettingsToggle: Toggle(defaultToggle) {
  976. toggledBg: groupCallMembersBg;
  977. toggledFg: groupCallActiveFg;
  978. untoggledBg: groupCallMembersBg;
  979. untoggledFg: groupCallMemberNotJoinedStatus;
  980. }
  981. groupCallSettingsButton: SettingsButton(defaultSettingsButton) {
  982. padding: margins(24px, 10px, 24px, 8px);
  983. textFg: groupCallMembersFg;
  984. textFgOver: groupCallMembersFg;
  985. textBg: groupCallMembersBg;
  986. textBgOver: groupCallMembersBgOver;
  987. rightLabel: FlatLabel(defaultSettingsRightLabel) {
  988. textFg: groupCallActiveFg;
  989. }
  990. toggle: groupCallSettingsToggle;
  991. toggleOver: groupCallSettingsToggle;
  992. ripple: groupCallRipple;
  993. }
  994. groupCallSettingsAttentionButton: SettingsButton(groupCallSettingsButton) {
  995. textFg: attentionButtonFg;
  996. textFgOver: attentionButtonFgOver;
  997. }
  998. groupCallBoxLabel: FlatLabel(boxLabel) {
  999. minWidth: 200px;
  1000. textFg: groupCallMembersFg;
  1001. }
  1002. groupCallJoinAsLabel: FlatLabel(defaultFlatLabel) {
  1003. minWidth: 272px;
  1004. textFg: groupCallMembersFg;
  1005. }
  1006. groupCallJoinAsWidth: 330px;
  1007. groupCallJoinAsTextTop: 4px;
  1008. groupCallJoinAsNameTop: 23px;
  1009. groupCallJoinAsPadding: margins(12px, 8px, 12px, 7px);
  1010. groupCallJoinAsPhotoSize: 30px;
  1011. groupCallRowBlobMinRadius: 27px;
  1012. groupCallRowBlobMaxRadius: 29px;
  1013. groupCallDelayLabel: LabelSimple(defaultLabelSimple) {
  1014. textFg: groupCallMembersFg;
  1015. font: boxTextFont;
  1016. }
  1017. groupCallDelayLabelMargin: margins(22px, 10px, 20px, 5px);
  1018. groupCallDelaySlider: MediaSlider(defaultContinuousSlider) {
  1019. seekSize: size(15px, 15px);
  1020. activeFg: groupCallActiveFg;
  1021. inactiveFg: groupCallMemberNotJoinedStatus;
  1022. activeFgOver: groupCallActiveFg;
  1023. inactiveFgOver: groupCallMemberNotJoinedStatus;
  1024. activeFgDisabled: groupCallActiveFg;
  1025. inactiveFgDisabled: groupCallMemberNotJoinedStatus;
  1026. receivedTillFg: groupCallMemberNotJoinedStatus;
  1027. }
  1028. groupCallDelayMargin: margins(22px, 5px, 20px, 10px);
  1029. groupCallTitleButton: IconButton {
  1030. width: windowTitleButtonWidth;
  1031. height: windowTitleHeight;
  1032. iconPosition: point(0px, 0px);
  1033. }
  1034. groupCallTitleMinimizeIcon: icon {
  1035. { "title_button_minimize", groupCallMemberNotJoinedStatus },
  1036. };
  1037. groupCallTitleMinimizeIconOver: icon {
  1038. { windowTitleButtonSize, groupCallMembersBgOver },
  1039. { "title_button_minimize", groupCallMembersFg },
  1040. };
  1041. groupCallTitleMaximizeIcon: icon {
  1042. { "title_button_maximize", groupCallMemberNotJoinedStatus },
  1043. };
  1044. groupCallTitleMaximizeIconOver: icon {
  1045. { windowTitleButtonSize, groupCallMembersBgOver },
  1046. { "title_button_maximize", groupCallMembersFg },
  1047. };
  1048. groupCallTitleRestoreIcon: icon {
  1049. { "title_button_restore", groupCallMemberNotJoinedStatus },
  1050. };
  1051. groupCallTitleRestoreIconOver: icon {
  1052. { windowTitleButtonSize, groupCallMembersBgOver },
  1053. { "title_button_restore", groupCallMembersFg },
  1054. };
  1055. groupCallTitleCloseIcon: icon {
  1056. { "title_button_close", groupCallMemberNotJoinedStatus },
  1057. };
  1058. groupCallTitleCloseIconOver: icon {
  1059. { windowTitleButtonSize, titleButtonCloseBgOver },
  1060. { "title_button_close", titleButtonCloseFgOver },
  1061. };
  1062. groupCallTitle: WindowTitle(defaultWindowTitle) {
  1063. height: 0px;
  1064. bg: groupCallBg;
  1065. bgActive: groupCallBg;
  1066. fg: transparent;
  1067. fgActive: transparent;
  1068. oneSideControls: true;
  1069. minimize: IconButton(groupCallTitleButton) {
  1070. icon: groupCallTitleMinimizeIcon;
  1071. iconOver: groupCallTitleMinimizeIconOver;
  1072. }
  1073. minimizeIconActive: groupCallTitleMinimizeIcon;
  1074. minimizeIconActiveOver: groupCallTitleMinimizeIconOver;
  1075. maximize: IconButton(groupCallTitleButton) {
  1076. icon: groupCallTitleMaximizeIcon;
  1077. iconOver: groupCallTitleMaximizeIconOver;
  1078. }
  1079. maximizeIconActive: groupCallTitleMaximizeIcon;
  1080. maximizeIconActiveOver: groupCallTitleMaximizeIconOver;
  1081. restoreIcon: groupCallTitleRestoreIcon;
  1082. restoreIconOver: groupCallTitleRestoreIconOver;
  1083. restoreIconActive: groupCallTitleRestoreIcon;
  1084. restoreIconActiveOver: groupCallTitleRestoreIconOver;
  1085. close: IconButton(groupCallTitleButton) {
  1086. icon: groupCallTitleCloseIcon;
  1087. iconOver: groupCallTitleCloseIconOver;
  1088. }
  1089. closeIconActive: groupCallTitleCloseIcon;
  1090. closeIconActiveOver: groupCallTitleCloseIconOver;
  1091. }
  1092. groupCallPinOnTop: IconButton(groupCallTitleButton) {
  1093. icon: icon{{ "calls/navbar_pin", groupCallMemberNotJoinedStatus }};
  1094. iconOver: icon{{ "calls/navbar_pin", groupCallMembersFg }};
  1095. iconPosition: point(0px, 2px);
  1096. }
  1097. groupCallPinnedOnTop: icon{{ "calls/navbar_pin_filled", groupCallMembersFg }};
  1098. groupCallMajorBlobMaxRadius: 4px;
  1099. groupCallMinorBlobIdleRadius: 3px;
  1100. groupCallMinorBlobMaxRadius: 12px;
  1101. groupCallMuteCrossLine: CrossLineAnimation {
  1102. fg: groupCallIconFg;
  1103. icon: icon {{ "calls/volume/speaker", groupCallIconFg }};
  1104. startPosition: point(2px, 5px);
  1105. endPosition: point(16px, 19px);
  1106. stroke: 2px;
  1107. }
  1108. groupCallMenuSpeakerArcsSkip: 1px;
  1109. groupCallMenuVolumePadding: margins(17px, 6px, 17px, 5px);
  1110. groupCallMenuVolumeMargin: margins(55px, 0px, 15px, 0px);
  1111. groupCallMenuVolumeSlider: MediaSlider(defaultContinuousSlider) {
  1112. activeFg: groupCallMembersFg;
  1113. inactiveFg: groupCallMembersBgOver;
  1114. activeFgOver: groupCallMembersFg;
  1115. inactiveFgOver: groupCallMembersBgOver;
  1116. activeFgDisabled: groupCallMembersBgOver;
  1117. receivedTillFg: groupCallMembersBgOver;
  1118. width: 7px;
  1119. seekSize: size(7px, 7px);
  1120. }
  1121. groupCallSpeakerArcsAnimation: ArcsAnimation {
  1122. fg: groupCallIconFg;
  1123. stroke: 2px;
  1124. space: 4px;
  1125. duration: 200;
  1126. deltaAngle: 60;
  1127. deltaHeight: 6px;
  1128. deltaWidth: 7px;
  1129. startHeight: 3px;
  1130. startWidth: 0px;
  1131. }
  1132. groupCallStatusSpeakerIcon: icon {{ "calls/volume/speaker_small", groupCallIconFg }};
  1133. groupCallStatusSpeakerArcsSkip: 3px;
  1134. groupCallStatusSpeakerArcsAnimation: ArcsAnimation(groupCallSpeakerArcsAnimation) {
  1135. deltaAngle: 68;
  1136. space: 3px;
  1137. deltaHeight: 5px;
  1138. deltaWidth: 4px;
  1139. startHeight: 1px;
  1140. }
  1141. groupCallShareMutedMargin: margins(16px, 16px, 16px, 8px);
  1142. callTopBarMuteCrossLine: CrossLineAnimation {
  1143. fg: callBarFg;
  1144. icon: icon {{ "calls/call_record_active", callBarFg }};
  1145. startPosition: point(11px, 8px);
  1146. endPosition: point(26px, 23px);
  1147. stroke: 2px;
  1148. }
  1149. groupCallStartsIn: FlatLabel(defaultFlatLabel) {
  1150. style: TextStyle(defaultTextStyle) {
  1151. font: font(20px semibold);
  1152. }
  1153. textFg: groupCallMembersFg;
  1154. }
  1155. groupCallScheduledBodyHeight: 200px;
  1156. groupCallStartsWhen: groupCallStartsIn;
  1157. groupCallStartsInTop: 10px;
  1158. groupCallStartsWhenTop: 160px;
  1159. groupCallCountdownFont: font(64px semibold);
  1160. groupCallCountdownTop: 52px;
  1161. desktopCaptureMargins: margins(12px, 8px, 12px, 6px);
  1162. desktopCaptureSourceSize: size(235px, 165px);
  1163. desktopCaptureSourceSkips: size(2px, 10px);
  1164. desktopCaptureSourceTitle: WindowTitle(groupCallTitle) {
  1165. bg: groupCallMembersBgOver;
  1166. bgActive: groupCallMembersBgOver;
  1167. height: windowTitleHeight;
  1168. }
  1169. desktopCapturePadding: margins(7px, 7px, 7px, 33px);
  1170. desktopCaptureLabelBottom: 7px;
  1171. desktopCaptureLabel: FlatLabel(defaultFlatLabel) {
  1172. minWidth: 200px;
  1173. maxHeight: 20px;
  1174. textFg: groupCallMembersFg;
  1175. style: semiboldTextStyle;
  1176. }
  1177. desktopCaptureCancel: RoundButton(defaultBoxButton) {
  1178. textFg: groupCallActiveFg;
  1179. textFgOver: groupCallActiveFg;
  1180. numbersTextFg: groupCallActiveFg;
  1181. numbersTextFgOver: groupCallActiveFg;
  1182. textBg: groupCallMembersBg;
  1183. textBgOver: groupCallMembersBgOver;
  1184. ripple: groupCallRipple;
  1185. }
  1186. desktopCaptureFinish: RoundButton(desktopCaptureCancel) {
  1187. textFg: groupCallMemberMutedIcon;
  1188. textFgOver: groupCallMemberMutedIcon;
  1189. }
  1190. desktopCaptureSubmit: RoundButton(desktopCaptureCancel) {
  1191. textFg: groupCallIconFg;
  1192. textFgOver: groupCallIconFg;
  1193. numbersTextFg: groupCallIconFg;
  1194. numbersTextFgOver: groupCallIconFg;
  1195. textBg: groupCallMuted1;
  1196. textBgOver: groupCallMuted1;
  1197. ripple: universalRippleAnimation;
  1198. }
  1199. desktopCaptureWithAudio: Checkbox(defaultCheckbox) {
  1200. textFg: groupCallMembersFg;
  1201. textFgActive: groupCallMembersFg;
  1202. rippleBg: groupCallMembersBgRipple;
  1203. rippleBgActive: groupCallMembersBgRipple;
  1204. style: semiboldTextStyle;
  1205. }
  1206. groupCallNarrowSkip: 9px;
  1207. groupCallNarrowMembersWidth: 204px;
  1208. groupCallNarrowVideoHeight: 120px;
  1209. groupCallWideModeWidthMin: 600px;
  1210. groupCallWideModeSize: size(960px, 580px);
  1211. groupCallNarrowInactiveCrossLine: CrossLineAnimation {
  1212. fg: groupCallMemberNotJoinedStatus;
  1213. icon: icon {{ "calls/video_mini_mute", groupCallMemberNotJoinedStatus }};
  1214. startPosition: point(3px, 0px);
  1215. endPosition: point(13px, 12px);
  1216. stroke: 3px;
  1217. strokeDenominator: 2;
  1218. }
  1219. groupCallNarrowColoredCrossLine: CrossLineAnimation(groupCallNarrowInactiveCrossLine) {
  1220. fg: groupCallMemberNotJoinedStatus;
  1221. icon: icon {{ "calls/video_mini_mute", groupCallMemberActiveStatus }};
  1222. }
  1223. groupCallNarrowRaisedHand: icon {{ "calls/video_mini_speak", groupCallMemberInactiveStatus }};
  1224. groupCallNarrowCameraIcon: icon {{ "calls/video_mini_video", groupCallMemberNotJoinedStatus }};
  1225. groupCallNarrowScreenIcon: icon {{ "calls/video_mini_screencast", groupCallMemberNotJoinedStatus }};
  1226. groupCallNarrowInvitedIcon: icon {{ "calls/video_mini_invited", groupCallMemberNotJoinedStatus }};
  1227. groupCallNarrowIconPosition: point(-4px, 2px);
  1228. groupCallNarrowIconSkip: 15px;
  1229. groupCallOutline: 2px;
  1230. groupCallVideoCrossLine: CrossLineAnimation(groupCallMemberColoredCrossLine) {
  1231. fg: groupCallVideoTextFg;
  1232. icon: icon {{ "calls/video_over_mute", groupCallVideoTextFg }};
  1233. }
  1234. GroupCallVideoTile {
  1235. shadowHeight: pixels;
  1236. namePosition: point;
  1237. pin: CrossLineAnimation;
  1238. pinPosition: point;
  1239. pinPadding: margins;
  1240. pinTextPosition: point;
  1241. back: icon;
  1242. iconPosition: point;
  1243. }
  1244. groupCallVideoTile: GroupCallVideoTile {
  1245. shadowHeight: 40px;
  1246. namePosition: point(15px, 8px);
  1247. pin: CrossLineAnimation {
  1248. fg: groupCallVideoTextFg;
  1249. icon: icon {{ "calls/video_over_pin", groupCallVideoTextFg }};
  1250. startPosition: point(7px, 4px);
  1251. endPosition: point(17px, 14px);
  1252. stroke: 3px;
  1253. strokeDenominator: 2;
  1254. }
  1255. pinPosition: point(18px, 18px);
  1256. pinPadding: margins(6px, 2px, 12px, 1px);
  1257. pinTextPosition: point(1px, 3px);
  1258. back: icon {{ "calls/video_back", groupCallVideoTextFg }};
  1259. iconPosition: point(10px, 5px);
  1260. }
  1261. groupCallVideoSmallSkip: 4px;
  1262. groupCallVideoLargeSkip: 6px;
  1263. groupCallVideoPlaceholderHeight: 212px;
  1264. groupCallVideoPlaceholderIconTop: 50px;
  1265. groupCallVideoPlaceholderTextTop: 120px;
  1266. groupCallTooltip: Tooltip(defaultTooltip) {
  1267. textBg: groupCallMembersBg;
  1268. textFg: groupCallMembersFg;
  1269. textBorder: groupCallMembersBgOver;
  1270. }
  1271. groupCallNiceTooltip: ImportantTooltip(defaultImportantTooltip) {
  1272. bg: importantTooltipBg;
  1273. padding: margins(10px, 3px, 10px, 5px);
  1274. radius: 4px;
  1275. arrow: 4px;
  1276. }
  1277. groupCallNiceTooltipLabel: defaultImportantTooltipLabel;
  1278. groupCallStickedTooltip: ImportantTooltip(groupCallNiceTooltip) {
  1279. padding: margins(10px, 1px, 6px, 3px);
  1280. }
  1281. groupCallStickedTooltipClose: IconButton(defaultIconButton) {
  1282. width: 20px;
  1283. height: 20px;
  1284. iconPosition: point(4px, 3px);
  1285. icon: icon {{ "calls/video_tooltip", importantTooltipFg }};
  1286. iconOver: icon {{ "calls/video_tooltip", importantTooltipFg }};
  1287. ripple: emptyRippleAnimation;
  1288. }
  1289. groupCallNiceTooltipTop: 4px;
  1290. groupCallPaused: icon {{ "calls/video_large_paused", groupCallVideoTextFg }};
  1291. groupCallRecordingSubLabel: FlatLabel(boxDividerLabel) {
  1292. margin: margins(0px, 0px, 0px, 0px);
  1293. textFg: groupCallMemberNotJoinedStatus;
  1294. align: align(top);
  1295. }
  1296. groupCallRecordingInfoMargins: margins(0px, 22px, 0px, 22px);
  1297. groupCallRecordingSubLabelMargins: margins(8px, 22px, 8px, 22px);
  1298. groupCallRecordingAudioSkip: 23px;
  1299. groupCallRecordingSelectWidth: 2px;
  1300. groupCallRecordingInfoHeight: 204px;
  1301. groupCallRtmpCopyButton: RoundButton(defaultActiveButton) {
  1302. height: 32px;
  1303. width: -26px;
  1304. textTop: 7px;
  1305. }
  1306. groupCallRtmpCopyButtonTopSkip: 12px;
  1307. groupCallRtmpCopyButtonBottomSkip: 15px;
  1308. groupCallRtmpShowButton: IconButton(defaultIconButton) {
  1309. width: 32px;
  1310. height: 32px;
  1311. icon: icon {{ "menu/show_in_chat", menuIconFg }};
  1312. iconOver: icon {{ "menu/show_in_chat", menuIconFgOver }};
  1313. iconPosition: point(4px, 4px);
  1314. rippleAreaPosition: point(0px, 0px);
  1315. rippleAreaSize: 32px;
  1316. ripple: defaultRippleAnimationBgOver;
  1317. }
  1318. groupCallSettingsRtmpShowButton: IconButton(groupCallRtmpShowButton) {
  1319. ripple: groupCallRipple;
  1320. }
  1321. groupCallSubsectionTitle: FlatLabel(defaultSubsectionTitle) {
  1322. textFg: groupCallActiveFg;
  1323. }
  1324. groupCallAttentionBoxButton: RoundButton(groupCallBoxButton) {
  1325. textFg: attentionButtonFg;
  1326. textFgOver: attentionButtonFgOver;
  1327. }
  1328. groupCallRtmpUrlSkip: 1px;
  1329. groupCallRtmpKeySubsectionTitleSkip: 8px;
  1330. groupCallRtmpSubsectionTitleAddPadding: margins(0px, -1px, 0px, -4px);
  1331. groupCallRtmpShowButtonPosition: point(21px, -5px);
  1332. groupCallDividerBg: groupCallMembersBgRipple;
  1333. groupCallScheduleDateField: InputField(groupCallField) {
  1334. textMargins: margins(2px, 0px, 2px, 0px);
  1335. placeholderScale: 0.;
  1336. heightMin: 30px;
  1337. textAlign: align(top);
  1338. }
  1339. groupCallScheduleTimeField: InputField(groupCallScheduleDateField) {
  1340. textBg: groupCallMembersBg;
  1341. border: 0px;
  1342. borderActive: 0px;
  1343. heightMin: 28px;
  1344. placeholderFont: font(14px);
  1345. }
  1346. groupCallVolumeSettings: Menu(groupCallPopupVolumeMenu) {
  1347. widthMin: 210px;
  1348. itemBg: groupCallMembersBg;
  1349. itemBgOver: groupCallMembersBgOver;
  1350. }
  1351. groupCallVolumeSettingsPadding: margins(24px, 8px, 24px, 6px);
  1352. groupCallVolumeSettingsSlider: MediaSlider(groupCallMenuVolumeSlider) {
  1353. activeFg: groupCallMenuBg;
  1354. inactiveFg: groupCallMenuBg;
  1355. activeFgOver: groupCallMenuBg;
  1356. inactiveFgOver: groupCallMenuBg;
  1357. }
  1358. //
  1359. groupCallCalendarPreviousDisabled: icon {{ "calendar_down-flip_vertical", groupCallMemberNotJoinedStatus }};
  1360. groupCallCalendarNextDisabled: icon {{ "calendar_down", groupCallMemberNotJoinedStatus }};
  1361. groupCallCalendarPrevious: IconButton(calendarPrevious) {
  1362. icon: icon {{ "calendar_down-flip_vertical", groupCallMembersFg }};
  1363. ripple: RippleAnimation(defaultRippleAnimation) {
  1364. color: groupCallMembersBgRipple;
  1365. }
  1366. }
  1367. groupCallCalendarNext: IconButton(groupCallCalendarPrevious) {
  1368. icon: icon {{ "calendar_down", groupCallMembersFg }};
  1369. }
  1370. groupCallCalendarColors: CalendarColors {
  1371. dayTextColor: groupCallMembersFg;
  1372. dayTextGrayedOutColor: groupCallMemberNotJoinedStatus;
  1373. iconButtonNext: groupCallCalendarNext;
  1374. iconButtonNextDisabled: groupCallCalendarNextDisabled;
  1375. iconButtonPrevious: groupCallCalendarPrevious;
  1376. iconButtonPreviousDisabled: groupCallCalendarPreviousDisabled;
  1377. iconButtonRippleColorDisabled: groupCallMembersBgRipple;
  1378. rippleColor: groupCallMembersBgRipple;
  1379. rippleColorHighlighted: groupCallMembersBgRipple;
  1380. rippleGrayedOutColor: groupCallMembersBgRipple;
  1381. titleTextColor: groupCallMembersFg;
  1382. }
  1383. //