1/*
2This file is part of Telegram Desktop,
3the official desktop application for the Telegram messaging service.
4
5For license and copyright information please follow this link:
6https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
7*/
8
9using "ui/basic.style";
10using "ui/widgets/widgets.style";
11using "overview/overview.style";
12
13mediaPlayerButton: MediaPlayerButton {
14	playPosition: point(2px, 0px);
15	playOuter: size(17px, 15px);
16	pausePosition: point(1px, 1px);
17	pauseOuter: size(15px, 15px);
18	pauseStroke: 5px;
19	cancelPosition: point(1px, 1px);
20	cancelOuter: size(15px, 15px);
21	cancelStroke: 3px;
22
23	rippleAreaPosition: point(0px, 5px);
24	rippleAreaSize: 25px;
25	ripple: RippleAnimation(defaultRippleAnimation) {
26		color: lightButtonBgOver;
27	}
28}
29mediaPlayerButtonSize: size(25px, 30px);
30
31mediaPlayerButtonPosition: point(5px, 10px);
32mediaPlayerSkipIconPosition: point(5px, 12px);
33
34mediaPlayerHeight: 35px;
35mediaPlayerPadding: 8px;
36mediaPlayerNameTop: 22px;
37mediaPlayerPlayLeft: 7px;
38mediaPlayerPlaySkip: 1px;
39mediaPlayerPlayTop: 0px;
40mediaPlayerCloseRight: 0px;
41
42mediaPlayerName: FlatLabel(defaultFlatLabel) {
43	maxHeight: 20px;
44}
45mediaPlayerTime: LabelSimple(defaultLabelSimple) {
46	textFg: windowSubTextFg;
47}
48
49mediaPlayerRepeatButton: IconButton {
50	width: 31px;
51	height: 30px;
52
53	icon: icon {
54		{ "player_repeat", mediaPlayerActiveFg, point(9px, 11px) }
55	};
56	iconPosition: point(0px, 0px);
57
58	rippleAreaPosition: point(3px, 5px);
59	rippleAreaSize: 25px;
60	ripple: RippleAnimation(defaultRippleAnimation) {
61		color: lightButtonBgOver;
62	}
63}
64mediaPlayerRepeatDisabledIcon: icon {
65	{ "player_repeat", menuIconFg, point(9px, 11px)}
66};
67mediaPlayerRepeatDisabledIconOver: icon {
68	{ "player_repeat", menuIconFgOver, point(9px, 11px)}
69};
70mediaPlayerRepeatDisabledRippleBg: windowBgOver;
71mediaPlayerRepeatInactiveIcon: icon {
72	{ "player_repeat", mediaPlayerInactiveFg, point(9px, 11px)}
73};
74
75mediaPlayerSpeedButton: IconButton {
76	width: 31px;
77	height: 30px;
78
79	icon: icon {
80		{ "voice_speed/voice_speed2", mediaPlayerActiveFg }
81	};
82	iconPosition: point(3px, 10px);
83
84	rippleAreaPosition: point(3px, 5px);
85	rippleAreaSize: 25px;
86	ripple: RippleAnimation(defaultRippleAnimation) {
87		color: lightButtonBgOver;
88	}
89}
90mediaPlayerSpeedDisabledIcon: icon {
91	{ "voice_speed/voice_speed2", menuIconFg }
92};
93mediaPlayerSpeedDisabledIconOver: icon {
94	{ "voice_speed/voice_speed2", menuIconFgOver }
95};
96mediaPlayerSpeedSlowIcon: icon {
97	{ "voice_speed/voice_speed0.5", mediaPlayerActiveFg }
98};
99mediaPlayerSpeedSlowDisabledIcon: icon {
100	{ "voice_speed/voice_speed0.5", menuIconFg }
101};
102mediaPlayerSpeedSlowDisabledIconOver: icon {
103	{ "voice_speed/voice_speed0.5", menuIconFgOver }
104};
105mediaPlayerSpeedFastIcon: icon {
106	{ "voice_speed/voice_speed1.5", mediaPlayerActiveFg }
107};
108mediaPlayerSpeedFastDisabledIcon: icon {
109	{ "voice_speed/voice_speed1.5", menuIconFg }
110};
111mediaPlayerSpeedFastDisabledIconOver: icon {
112	{ "voice_speed/voice_speed1.5", menuIconFgOver }
113};
114mediaPlayerSpeedDisabledRippleBg: windowBgOver;
115
116mediaPlayerPopupMenu: PopupMenu(defaultPopupMenu) {
117	menu: Menu(defaultMenu) {
118		itemIconPosition: point(6px, 5px);
119		itemPadding: margins(34px, 8px, 17px, 7px);
120	}
121}
122mediaPlayerMenuCheck: icon {{ "player_check", mediaPlayerActiveFg }};
123
124mediaPlayerVolumeIcon0: icon {
125	{ "player_volume0", mediaPlayerActiveFg },
126};
127mediaPlayerVolumeIcon1: icon {
128	{ "player_volume1", mediaPlayerActiveFg },
129};
130mediaPlayerVolumeIcon2: icon {
131	{ "player_volume2", mediaPlayerActiveFg },
132};
133mediaPlayerVolumeIcon3: icon {
134	{ "player_volume3", mediaPlayerActiveFg },
135};
136mediaPlayerVolumeToggle: IconButton {
137	width: 31px;
138	height: 30px;
139
140	icon: mediaPlayerVolumeIcon0;
141	iconPosition: point(8px, 11px);
142
143	rippleAreaPosition: point(3px, 5px);
144	rippleAreaSize: 25px;
145	ripple: RippleAnimation(defaultRippleAnimation) {
146		color: lightButtonBgOver;
147	}
148}
149mediaPlayerVolumeMargin: 10px;
150mediaPlayerVolumeSize: size(27px, 100px);
151
152mediaPlayerPanelPinButton: IconButton(mediaPlayerRepeatButton) {
153	icon: icon {
154		{ "player_panel_pin", mediaPlayerActiveFg, point(9px, 11px) }
155	};
156}
157
158mediaPlayerNextButton: IconButton(mediaPlayerRepeatButton) {
159	width: 25px;
160	icon: icon {
161		{ "player_next", mediaPlayerActiveFg, mediaPlayerSkipIconPosition },
162	};
163
164	rippleAreaPosition: point(0px, 5px);
165}
166mediaPlayerNextDisabledIcon: icon {
167	{ "player_next", mediaPlayerInactiveFg, mediaPlayerSkipIconPosition },
168};
169mediaPlayerPreviousButton: IconButton(mediaPlayerNextButton) {
170	icon: icon {
171		{ "player_next-flip_horizontal", mediaPlayerActiveFg, mediaPlayerSkipIconPosition },
172	};
173	rippleAreaPosition: point(1px, 5px);
174}
175mediaPlayerPreviousDisabledIcon: icon {
176	{ "player_next-flip_horizontal", mediaPlayerInactiveFg, mediaPlayerSkipIconPosition },
177};
178
179touchBarIconPlayerClose: icon {{ "player_close", windowFg }};
180touchBarIconPlayerPlay: icon {{ "media_play", windowFg }};
181touchBarIconPlayerPause: icon {{ "media_pause", windowFg }};
182touchBarIconPlayerNext: icon {{ "player_next", windowFg }};
183touchBarIconPlayerPrevious: icon {{ "player_next-flip_horizontal", windowFg }};
184
185mediaPlayerClose: IconButton(mediaPlayerRepeatButton) {
186	width: 37px;
187	icon: icon {{ "player_close", menuIconFg, point(10px, 12px) }};
188	iconOver: icon {{ "player_close", menuIconFgOver, point(10px, 12px) }};
189
190	rippleAreaPosition: point(3px, 5px);
191	ripple: RippleAnimation(defaultRippleAnimation) {
192		color: windowBgOver;
193	}
194}
195mediaPlayerPlayback: FilledSlider {
196	fullWidth: 6px;
197	lineWidth: 2px;
198	activeFg: mediaPlayerActiveFg;
199	inactiveFg: mediaPlayerInactiveFg;
200	disabledFg: mediaPlayerDisabledFg;
201	duration: 150;
202}
203
204mediaPlayerButtonTransformDuration: 200;
205
206mediaPlayerPanelButton: MediaPlayerButton {
207	playPosition: point(3px, 0px);
208	playOuter: size(22px, 18px);
209	pausePosition: point(1px, 1px);
210	pauseOuter: size(16px, 18px);
211	pauseStroke: 5px;
212	cancelPosition: point(0px, 1px);
213	cancelOuter: size(16px, 18px);
214	cancelStroke: 3px;
215}
216mediaPlayerPanelButtonSize: size(32px, 32px);
217mediaPlayerPanelButtonPosition: point(8px, 7px);
218
219mediaPlayerPanelMarginLeft: 10px;
220mediaPlayerPanelMarginBottom: 10px;
221mediaPlayerPanelWidth: 344px;
222mediaPlayerCoverHeight: 102px;
223
224mediaPlayerPanelClose: IconButton(mediaPlayerClose) {
225	width: 43px;
226	height: 28px;
227	icon: icon {{ "player_close", menuIconFg, point(16px, 14px) }};
228	iconOver: icon {{ "player_close", menuIconFgOver, point(16px, 14px) }};
229}
230
231mediaPlayerPanelNextButton: IconButton(mediaPlayerRepeatButton) {
232	width: 37px;
233	icon: icon {{ "player_panel_next", mediaPlayerActiveFg, point(10px, 10px) }};
234}
235mediaPlayerPanelNextDisabledIcon: icon {
236	{ "player_panel_next", mediaPlayerInactiveFg, point(10px, 10px) },
237};
238mediaPlayerPanelPreviousButton: IconButton(mediaPlayerPanelNextButton) {
239	icon: icon {{ "player_panel_next-flip_horizontal", mediaPlayerActiveFg, point(10px, 10px) }};
240}
241mediaPlayerPanelPreviousDisabledIcon: icon {
242	{ "player_panel_next-flip_horizontal", mediaPlayerInactiveFg, point(10px, 10px) },
243};
244
245mediaPlayerPanelPadding: 16px;
246mediaPlayerPanelNameTop: 24px;
247mediaPlayerPanelPlayLeft: 9px;
248mediaPlayerPanelPlaySkip: 7px;
249mediaPlayerPanelPlayTop: 58px;
250mediaPlayerPanelPlaybackTop: 32px;
251mediaPlayerPanelPlaybackPadding: 8px;
252mediaPlayerPanelPlayback: defaultContinuousSlider;
253
254mediaPlayerPanelVolumeTop: 65px;
255mediaPlayerPanelVolumeSkip: 3px;
256mediaPlayerPanelVolumeWidth: 64px;
257mediaPlayerPanelVolumeToggleSkip: 0px;
258mediaPlayerPanelVolumeToggleTop: 57px;
259
260mediaPlayerScroll: ScrollArea(defaultSolidScroll) {
261	deltat: 10px;
262	deltab: 10px;
263}
264mediaPlayerListHeightMax: 280px;
265mediaPlayerListMarginBottom: 10px;
266mediaPlayerScrollShadow: Shadow {
267	bottom: icon {{ "playlist_shadow", windowShadowFg }};
268	extend: margins(2px, 2px, 2px, 2px);
269}
270
271mediaPlayerListMarginTop: 8px;
272mediaPlayerFileLayout: OverviewFileLayout(overviewFileLayout) {
273	maxWidth: 344px;
274	songIconBg: mediaPlayerActiveFg;
275	songOverBg: mediaPlayerActiveFg;
276}
277
278mediaPlayerFloatSize: 128px;
279mediaPlayerFloatMargin: 12px;
280