tdesktop/Telegram/SourceFiles/media/player/media_player.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 "overview/overview.style";

MediaPlayerButton {
	playPosition: point;
	playOuter: size;
	pausePosition: point;
	pauseOuter: size;
	pauseStroke: pixels;
	cancelPosition: point;
	cancelOuter: size;
	cancelStroke: pixels;

	rippleAreaPosition: point;
	rippleAreaSize: pixels;
	ripple: RippleAnimation;

	duration: int;
}

MediaSpeedButton {
	width: pixels;
	height: pixels;
	font: font;
	icon: icon;
}

MediaSpeedMenu {
	menu: Menu;
	iconFg: color;
	iconFgActive: color;
	textFgActive: color;
	activeCheck: icon;
	activeCheckSkip: pixels;
	sliderStyle: TextStyle;
	sliderPadding: margins;
	sliderWidth: pixels;
	slider: MediaSlider;
}

mediaSpeedButton: MediaSpeedButton {
	width: 24px;
	height: 24px;
	font: font(11px semibold);
	icon: icon{{ "player/player_speed", menuIconFg }};
}

mediaPlayerButton: MediaPlayerButton {
	playPosition: point(2px, 0px);
	playOuter: size(17px, 15px);
	pausePosition: point(1px, 1px);
	pauseOuter: size(15px, 15px);
	pauseStroke: 5px;
	cancelPosition: point(1px, 1px);
	cancelOuter: size(15px, 15px);
	cancelStroke: 3px;

	rippleAreaPosition: point(0px, 5px);
	rippleAreaSize: 25px;
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: lightButtonBgOver;
	}

	duration: 200;
}
mediaPlayerWideWidth: 460px;
mediaPlayerHeight: 35px;
mediaPlayerPadding: 8px;
mediaPlayerNameTop: 22px;
mediaPlayerPlayLeft: 9px;
mediaPlayerPlaySkip: 1px;
mediaPlayerPlayTop: 0px;
mediaPlayerCloseRight: 0px;

mediaPlayerName: FlatLabel(defaultFlatLabel) {
	maxHeight: 20px;
}
mediaPlayerTime: LabelSimple(defaultLabelSimple) {
	textFg: windowSubTextFg;
}

mediaPlayerRepeatButton: IconButton {
	width: 30px;
	height: 34px;

	icon: icon {
		{ "player/player_repeat", mediaPlayerActiveFg }
	};
	iconPosition: point(3px, 6px);

	rippleAreaPosition: point(2px, 5px);
	rippleAreaSize: 26px;
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: lightButtonBgOver;
	}
}
mediaPlayerRepeatDisabledIcon: icon {
	{ "player/player_repeat", menuIconFg }
};
mediaPlayerRepeatDisabledIconOver: icon {
	{ "player/player_repeat", menuIconFgOver }
};
mediaPlayerRepeatOneIcon: icon {
	{ "player/player_repeat_single", mediaPlayerActiveFg }
};
mediaPlayerReverseIcon: icon {
	{ "player/player_order", mediaPlayerActiveFg }
};
mediaPlayerReverseDisabledIcon: icon {
	{ "player/player_order", menuIconFg }
};
mediaPlayerReverseDisabledIconOver: icon {
	{ "player/player_order", menuIconFgOver }
};
mediaPlayerShuffleIcon: icon {
	{ "player/player_shuffle", mediaPlayerActiveFg }
};
mediaPlayerRepeatDisabledRippleBg: windowBgOver;

mediaPlayerPlayButton: IconButton(mediaPlayerRepeatButton) {
	width: 24px;
	icon: icon{
		{ "player/player_play", mediaPlayerActiveFg }
	};
	iconPosition: point(0px, 5px);
	rippleAreaPosition: point(0px, 5px);
	rippleAreaSize: 24px;
}
mediaPlayerPauseIcon: icon{
	{ "player/player_pause", mediaPlayerActiveFg }
};
mediaPlayerCancelIcon: icon{
	{ "player/panel_close", mediaPlayerActiveFg }
};

mediaPlayerSpeedSize: size(30px, 30px);
mediaPlayerSpeedRadius: 4px;
mediaPlayerSpeedRipple: RippleAnimation(defaultRippleAnimation) {
	color: lightButtonBgOver;
}
mediaPlayerSpeedDisabledRippleBg: windowBgOver;

mediaPlayerMenu: DropdownMenu(defaultDropdownMenu) {
	wrap: InnerDropdown(defaultInnerDropdown) {
		scrollPadding: margins(0px, 4px, 0px, 4px);
		padding: margins(10px, 2px, 10px, 10px);
	}
}
mediaPlayerMenuCheck: icon {{ "player/player_check", mediaPlayerActiveFg }};

mediaSpeedMenu: MediaSpeedMenu {
	menu: Menu(menuWithIcons) {
		separator: MenuSeparator(defaultMenuSeparator) {
			padding: margins(0px, 4px, 0px, 4px);
			width: 6px;
		}
		itemPadding: margins(54px, 7px, 54px, 9px);
		itemFgDisabled: mediaPlayerActiveFg;
	}
	iconFg: menuIconColor;
	iconFgActive: mediaPlayerActiveFg;
	textFgActive: mediaPlayerActiveFg;
	activeCheck: mediaPlayerMenuCheck;
	activeCheckSkip: 8px;
	sliderStyle: TextStyle(defaultTextStyle) {
		font: font(12px semibold);
	}
	sliderPadding: margins(50px, 8px, 12px, 8px);
	sliderWidth: 122px;
	slider: MediaSlider(defaultContinuousSlider) {
		activeFg: mediaPlayerActiveFg;
		inactiveFg: windowBgOver;
		activeFgOver: mediaPlayerActiveFg;
		inactiveFgOver: windowBgOver;
		activeFgDisabled: windowBgOver;
		receivedTillFg: windowBgOver;
		width: 6px;
		seekSize: size(6px, 6px);
	}
}
mediaSpeedSlow: icon {{ "player/speed/audiospeed_menu_0.5", menuIconColor }};
mediaSpeedSlowActive: icon {{ "player/speed/audiospeed_menu_0.5", mediaPlayerActiveFg }};
mediaSpeedNormal: icon {{ "player/speed/audiospeed_menu_1.0", menuIconColor }};
mediaSpeedNormalActive: icon {{ "player/speed/audiospeed_menu_1.0", mediaPlayerActiveFg }};
mediaSpeedMedium: icon {{ "player/speed/audiospeed_menu_1.2", menuIconColor }};
mediaSpeedMediumActive: icon {{ "player/speed/audiospeed_menu_1.2", mediaPlayerActiveFg }};
mediaSpeedFast: icon {{ "player/speed/audiospeed_menu_1.5", menuIconColor }};
mediaSpeedFastActive: icon {{ "player/speed/audiospeed_menu_1.5", mediaPlayerActiveFg }};
mediaSpeedVeryFast: icon {{ "player/speed/audiospeed_menu_1.7", menuIconColor }};
mediaSpeedVeryFastActive: icon {{ "player/speed/audiospeed_menu_1.7", mediaPlayerActiveFg }};
mediaSpeedSuperFast: icon {{ "player/speed/audiospeed_menu_2.0", menuIconColor }};
mediaSpeedSuperFastActive: icon {{ "player/speed/audiospeed_menu_2.0", mediaPlayerActiveFg }};

mediaPlayerVolumeIcon0: icon {
	{ "player/player_mini_off", mediaPlayerActiveFg },
};
mediaPlayerVolumeIcon1: icon {
	{ "player/player_mini_half", mediaPlayerActiveFg },
};
mediaPlayerVolumeToggle: IconButton(mediaPlayerRepeatButton) {
	width: 34px;
	icon: icon {
		{ "player/player_mini_full", mediaPlayerActiveFg },
	};
	iconPosition: point(5px, 6px);
	rippleAreaPosition: point(4px, 5px);
}
mediaPlayerVolumeMargin: 10px;
mediaPlayerVolumeSize: size(27px, 100px);

mediaPlayerControlsFade: icon {{ "fade_horizontal", mediaPlayerBg }};

mediaPlayerNextButton: IconButton(mediaPlayerPlayButton) {
	icon: icon {
		{ "player/player_forward", mediaPlayerActiveFg },
	};
}
mediaPlayerNextDisabledIcon: icon {
	{ "player/player_forward", mediaPlayerInactiveFg },
};
mediaPlayerPreviousButton: IconButton(mediaPlayerNextButton) {
	icon: icon {
		{ "player/player_backward", mediaPlayerActiveFg },
	};
}
mediaPlayerPreviousDisabledIcon: icon {
	{ "player/player_backward", mediaPlayerInactiveFg },
};

touchBarIconPlayerClose: icon {{ "player/panel_close", windowFg }};
touchBarIconPlayerPlay: icon {{ "media_play", windowFg }};
touchBarIconPlayerPause: icon {{ "media_pause", windowFg }};
touchBarIconPlayerNext: icon {{ "player/player_forward", windowFg }};
touchBarIconPlayerPrevious: icon {{ "player/player_backward", windowFg }};

mediaPlayerClose: IconButton(mediaPlayerRepeatButton) {
	width: 39px;
	icon: icon {{ "player/panel_close", menuIconFg }};
	iconOver: icon {{ "player/panel_close", menuIconFgOver }};
	iconPosition: point(5px, 6px);

	rippleAreaPosition: point(4px, 5px);
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: windowBgOver;
	}
}
mediaPlayerPlayback: FilledSlider {
	fullWidth: 6px;
	lineWidth: 2px;
	activeFg: mediaPlayerActiveFg;
	inactiveFg: mediaPlayerInactiveFg;
	disabledFg: mediaPlayerDisabledFg;
	duration: 150;
}

mediaPlayerPanelMarginLeft: 10px;
mediaPlayerPanelMarginBottom: 10px;
mediaPlayerPanelWidth: 344px;

mediaPlayerPanelNextButton: IconButton(mediaPlayerRepeatButton) {
	width: 37px;
	icon: icon {{ "player/player_forward", mediaPlayerActiveFg, point(6px, 4px) }};
}

mediaPlayerPanelPlaybackPadding: 8px;
mediaPlayerPanelPlayback: defaultContinuousSlider;

mediaPlayerPanelVolumeWidth: 64px;

mediaPlayerScroll: ScrollArea(defaultSolidScroll) {
	deltat: 10px;
	deltab: 10px;
}
mediaPlayerListHeightMax: 280px;
mediaPlayerListMarginBottom: 10px;

mediaPlayerFileLayout: OverviewFileLayout(overviewFileLayout) {
	maxWidth: 344px;
	songIconBg: mediaPlayerActiveFg;
	songOverBg: mediaPlayerActiveFg;
}

mediaPlayerFloatSize: 128px;
mediaPlayerFloatMargin: 12px;

mediaPlayerMenuPosition: point(-2px, -2px);
mediaPlayerOrderMenu: Menu(defaultMenu) {
	itemIconPosition: point(13px, 8px);
	itemPadding: margins(49px, 9px, 17px, 11px);
	itemStyle: boxTextStyle;
}
mediaPlayerOrderMenuActive: Menu(mediaPlayerOrderMenu) {
	itemFg: windowActiveTextFg;
	itemFgOver: windowActiveTextFg;
}
mediaPlayerOrderIconReverse: icon{{ "player/player_order", windowFg }};
mediaPlayerOrderIconReverseActive: icon{{ "player/player_order", windowActiveTextFg }};
mediaPlayerOrderIconShuffle: icon{{ "player/player_shuffle", windowFg }};
mediaPlayerOrderIconShuffleActive: icon{{ "player/player_shuffle", windowActiveTextFg }};