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