tdesktop/Telegram/SourceFiles/media/player/media_player.style

/*
This file is part of Telegram Desktop,
the official desktop version of Telegram messaging app, see https://telegram.org

Telegram Desktop is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

It is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

In addition, as a special exception, the copyright holders give permission
to link the code of portions of this program with the OpenSSL library.

Full license: https://github.com/telegramdesktop/tdesktop/blob/master/LICENSE
Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
*/

using "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;
}

mediaPlayerActiveFg: #54b5ed;
mediaPlayerInactiveFg: #dfebf2;

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;
}
mediaPlayerButtonSize: size(25px, 30px);

mediaPlayerButtonPosition: point(5px, 10px);
mediaPlayerSkipIconPosition: point(5px, 12px);

mediaPlayerHeight: 35px;
mediaPlayerPadding: 8px;
mediaPlayerNameTop: 22px;
mediaPlayerPlayLeft: 7px;
mediaPlayerPlaySkip: 1px;
mediaPlayerPlayTop: 0px;
mediaPlayerCloseRight: 0px;

mediaPlayerName: flatLabel(labelDefFlat) {
	maxHeight: 20px;
	textFg: windowTextFg;
}
mediaPlayerTime: LabelSimple(defaultLabelSimple) {
	textFg: windowSubTextFg;
}

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

	icon: icon {
		{ "player_repeat", mediaPlayerActiveFg, point(9px, 11px) }
	};
	iconPosition: point(0px, 0px);
	iconPositionDown: point(0px, 0px);
}
mediaPlayerRepeatDisabledIcon: icon {
	{ "player_repeat", #c8c8c8, point(9px, 11px)}
};
mediaPlayerRepeatInactiveIcon: icon {
	{ "player_repeat", mediaPlayerInactiveFg, point(9px, 11px)}
};

mediaPlayerVolumeIcon0: icon {
	{ "player_volume0", mediaPlayerActiveFg },
};
mediaPlayerVolumeIcon1: icon {
	{ "player_volume1", mediaPlayerActiveFg },
};
mediaPlayerVolumeIcon2: icon {
	{ "player_volume2", mediaPlayerActiveFg },
};
mediaPlayerVolumeIcon3: icon {
	{ "player_volume3", mediaPlayerActiveFg },
};
mediaPlayerVolumeToggle: IconButton {
	width: 31px;
	height: 30px;

	icon: mediaPlayerVolumeIcon0;
	iconPosition: point(8px, 11px);
	iconPositionDown: point(8px, 11px);
}
mediaPlayerVolumeMargin: 10px;
mediaPlayerVolumeSize: size(27px, 100px);

mediaPlayerPanelPinButton: IconButton(mediaPlayerRepeatButton) {
	icon: icon {
		{ "player_panel_pin", mediaPlayerActiveFg, point(9px, 11px) }
	};
}

mediaPlayerNextButton: IconButton(mediaPlayerRepeatButton) {
	width: 25px;
	icon: icon {
		{ "player_next", mediaPlayerActiveFg, mediaPlayerSkipIconPosition },
	};
}
mediaPlayerNextDisabledIcon: icon {
	{ "player_next", mediaPlayerInactiveFg, mediaPlayerSkipIconPosition },
};
mediaPlayerPreviousButton: IconButton(mediaPlayerNextButton) {
	icon: icon {
		{ "player_previous", mediaPlayerActiveFg, mediaPlayerSkipIconPosition },
	};
}
mediaPlayerPreviousDisabledIcon: icon {
	{ "player_previous", mediaPlayerInactiveFg, mediaPlayerSkipIconPosition },
};
mediaPlayerClose: IconButton(mediaPlayerRepeatButton) {
	width: 37px;
	icon: icon {{ "player_close", #c8c8c8, point(10px, 12px) }};
}
mediaPlayerPlayback: FilledSlider {
	fullWidth: 6px;
	lineWidth: 2px;
	activeFg: mediaPlayerActiveFg;
	inactiveFg: mediaPlayerInactiveFg;
	disabledFg: #9dd1ef;
	duration: 150;
}

mediaPlayerButtonTransformDuration: 200;

mediaPlayerPanelButton: MediaPlayerButton {
	playPosition: point(3px, 0px);
	playOuter: size(22px, 18px);
	pausePosition: point(1px, 1px);
	pauseOuter: size(16px, 18px);
	pauseStroke: 5px;
	cancelPosition: point(0px, 1px);
	cancelOuter: size(16px, 18px);
	cancelStroke: 3px;
}
mediaPlayerPanelButtonSize: size(32px, 32px);
mediaPlayerPanelButtonPosition: point(8px, 7px);

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

mediaPlayerPanelClose: IconButton(mediaPlayerClose) {
	width: 43px;
	height: 28px;
	icon: icon {{ "player_close", #c8c8c8, point(16px, 14px) }};
}

mediaPlayerPanelNextButton: IconButton(mediaPlayerRepeatButton) {
	width: 37px;
	icon: icon {{ "player_panel_next", mediaPlayerActiveFg, point(10px, 10px) }};
}
mediaPlayerPanelNextDisabledIcon: icon {
	{ "player_panel_next", mediaPlayerInactiveFg, point(10px, 10px) },
};
mediaPlayerPanelPreviousButton: IconButton(mediaPlayerPanelNextButton) {
	icon: icon {{ "player_panel_previous", mediaPlayerActiveFg, point(10px, 10px) }};
}
mediaPlayerPanelPreviousDisabledIcon: icon {
	{ "player_panel_previous", mediaPlayerInactiveFg, point(10px, 10px) },
};

mediaPlayerPanelPadding: 16px;
mediaPlayerPanelNameTop: 24px;
mediaPlayerPanelPlayLeft: 9px;
mediaPlayerPanelPlaySkip: 7px;
mediaPlayerPanelPlayTop: 58px;
mediaPlayerPanelPlaybackTop: 32px;
mediaPlayerPanelPlaybackPadding: 8px;
mediaPlayerPanelPlayback: MediaSlider {
	width: 3px;
	activeFg: mediaPlayerActiveFg;
	inactiveFg: mediaPlayerInactiveFg;
	activeFgOver: mediaPlayerActiveFg;
	inactiveFgOver: mediaPlayerInactiveFg;
	activeFgDisabled: mediaPlayerInactiveFg;
	inactiveFgDisabled: windowBg;
	seekSize: size(9px, 9px);
	duration: 150;
}

mediaPlayerPanelVolumeTop: 65px;
mediaPlayerPanelVolumeSkip: 3px;
mediaPlayerPanelVolumeWidth: 64px;
mediaPlayerPanelVolumeToggleSkip: 0px;
mediaPlayerPanelVolumeToggleTop: 57px;

mediaPlayerScroll: flatScroll(solidScroll) {
	deltat: 10px;
	deltab: 0px;
}
mediaPlayerListHeightMax: 280px;
mediaPlayerListMarginBottom: 10px;
mediaPlayerScrollShadow: icon {{ "playlist_shadow", #000000 }};

mediaPlayerListMarginTop: 8px;
mediaPlayerListIconFg: #ffffff;
mediaPlayerFileLayout: OverviewFileLayout(overviewFileLayout) {
	maxWidth: 344px;
	songPadding: margins(17px, 7px, 10px, 6px);
	songThumbSize: 36px;
	songNameTop: 7px;
	songStatusTop: 25px;
	songIconBg: mediaPlayerActiveFg;
	songOverBg: mediaPlayerActiveFg;
	songPause: icon {{ "playlist_pause", mediaPlayerListIconFg }};
	songPlay: icon {{ "playlist_play", mediaPlayerListIconFg }};
	songCancel: icon {{ "playlist_cancel", mediaPlayerListIconFg }};
	songDownload: icon {{ "playlist_download", mediaPlayerListIconFg }};
}