tdesktop/Telegram/SourceFiles/media/view/media_view.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";

mediaviewOverDuration: 150;

mediaviewPlayback: MediaSlider {
	width: 3px;
	activeFg: mediaviewPlaybackActive;
	inactiveFg: mediaviewPlaybackInactive;
	activeFgOver: mediaviewPlaybackActiveOver;
	inactiveFgOver: mediaviewPlaybackInactive;
	activeFgDisabled: mediaviewPlaybackActive;
	inactiveFgDisabled: mediaviewPlaybackInactive;
	receivedTillFg: mediaviewPlaybackInactiveOver;
	seekSize: size(12px, 12px);
	duration: mediaviewOverDuration;
}
mediaviewPlaybackTop: 52px;

mediaviewControlsButton: IconButton {
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: mediaviewPlaybackIconRipple;
	}
	rippleAreaPosition: point(0px, 0px);
	duration: mediaviewOverDuration;
}

mediaviewControllerSize: size(481px, 75px);
mediaviewPlayProgressLabel: LabelSimple(defaultLabelSimple) {
	font: semiboldFont;
	textFg: mediaviewPlaybackProgressFg;
}
mediaviewPlayProgressSkip: 8px;
mediaviewPlayProgressLeft: 8px;
mediaviewPlayButtonTop: 5px;
mediaviewPlayButton: IconButton(mediaviewControlsButton) {
	width: 42px;
	height: 42px;
	rippleAreaSize: 42px;

	icon: icon {{ "player_play", mediaviewPlaybackIconFg }};
	iconOver: icon {{ "player_play", mediaviewPlaybackIconFgOver }};
	iconPosition: point(9px, 9px);
}
mediaviewPauseIcon: icon {{ "player_pause", mediaviewPlaybackIconFg }};
mediaviewPauseIconOver: icon {{ "player_pause", mediaviewPlaybackIconFgOver }};

mediaviewButtonsTop: 7px;

mediaviewMenuToggleSkip: 4px;
mediaviewMenuToggle: IconButton(mediaviewControlsButton) {
	width: 34px;
	height: 34px;
	rippleAreaSize: 34px;
	icon: icon {{ "player_more", mediaviewPlaybackIconFg }};
	iconOver: icon {{ "player_more", mediaviewPlaybackIconFgOver }};
	iconPosition: point(5px, 5px);
}

mediaviewPipButtonSkip: 5px;
mediaviewPipButton: IconButton(mediaviewMenuToggle) {
	icon: icon {{ "player_pip", mediaviewPlaybackIconFg }};
	iconOver: icon {{ "player_pip", mediaviewPlaybackIconFgOver }};
}

mediaviewFullScreenButtonSkip: 8px;
mediaviewFullScreenButton: IconButton(mediaviewMenuToggle) {
	icon: icon {{ "player_fullscreen", mediaviewPlaybackIconFg }};
	iconOver: icon {{ "player_fullscreen", mediaviewPlaybackIconFgOver }};
}
mediaviewFullScreenOutIcon: icon {{ "player_minimize", mediaviewPlaybackIconFg }};
mediaviewFullScreenOutIconOver: icon {{ "player_minimize", mediaviewPlaybackIconFgOver }};

mediaviewVolumeWidth: 75px;
mediaviewControllerRadius: 9px;

mediaviewVolumeIcon0: icon {{ "player_volume_off", mediaviewPlaybackIconFg }};
mediaviewVolumeIcon0Over: icon {{ "player_volume_off", mediaviewPlaybackIconFgOver }};
mediaviewVolumeIcon1: icon {{ "player_volume_small", mediaviewPlaybackIconFg }};
mediaviewVolumeIcon1Over: icon {{ "player_volume_small", mediaviewPlaybackIconFgOver }};
mediaviewVolumeIcon2: icon {{ "player_volume_on", mediaviewPlaybackIconFg }};
mediaviewVolumeIcon2Over: icon {{ "player_volume_on", mediaviewPlaybackIconFgOver }};
mediaviewVolumeTop: 10px;
mediaviewVolumeToggleSkip: 11px;
mediaviewVolumeToggle: IconButton(mediaviewControlsButton) {
	width: 30px;
	height: 30px;
	rippleAreaSize: 30px;
	icon: mediaviewVolumeIcon0;
	iconOver: mediaviewVolumeIcon0Over;
	iconPosition: point(3px, 3px);
}
mediaviewVolumeSkip: 4px;

mediaviewLeft: icon {{ "mediaview_next-flip_horizontal", mediaviewControlFg }};
mediaviewRight: icon {{ "mediaview_next", mediaviewControlFg }};
mediaviewClose: icon {{ "mediaview_close", mediaviewControlFg }};
mediaviewSave: icon {{ "mediaview_download", mediaviewControlFg }};
mediaviewRotate: icon {{ "mediaview_rotate", mediaviewControlFg }};
mediaviewMore: icon {{ "mediaview_more", mediaviewControlFg }};

mediaviewFileRed: icon {
	{ size(25px, 25px), mediaviewFileBg },
	{ "mediaview_file_corner", mediaviewFileRedCornerFg },
};
mediaviewFileYellow: icon {
	{ size(25px, 25px), mediaviewFileBg },
	{ "mediaview_file_corner", mediaviewFileYellowCornerFg },
};
mediaviewFileGreen: icon {
	{ size(25px, 25px), mediaviewFileBg },
	{ "mediaview_file_corner", mediaviewFileGreenCornerFg },
};
mediaviewFileBlue: icon {
	{ size(25px, 25px), mediaviewFileBg },
	{ "mediaview_file_corner", mediaviewFileBlueCornerFg },
};

mediaviewFilePadding: 18px;
mediaviewFileSize: size(340px, 116px);
mediaviewFileNameTop: 4px;
mediaviewFileNameFont: font(semibold 14px);
mediaviewFileSizeTop: 29px;
mediaviewFileExtTop: 35px;
mediaviewFileExtFont: font(semibold 18px);
mediaviewFileExtPadding: 10px;
mediaviewFileLinksTop: 57px;
mediaviewFileIconSize: 80px;

mediaviewFileLink: defaultLinkButton;

mediaviewMenu: Menu(defaultMenu) {
	itemBg: mediaviewMenuBg;
	itemBgOver: mediaviewMenuBgOver;
	itemFg: mediaviewMenuFg;
	itemFgOver: mediaviewMenuFg;
	itemFgDisabled: mediaviewMenuFg;
	itemFgShortcut: mediaviewMenuFg;
	itemFgShortcutOver: mediaviewMenuFg;
	itemFgShortcutDisabled: mediaviewMenuFg;

	separatorFg: mediaviewMenuFg;

	ripple: RippleAnimation(defaultRippleAnimation) {
		color: mediaviewMenuBgRipple;
	}
}
mediaviewMenuShadow: Shadow(defaultEmptyShadow) {
	fallback: mediaviewMenuBg;
}
mediaviewPanelAnimation: PanelAnimation(defaultPanelAnimation) {
	fadeBg: mediaviewMenuBg;
	shadow: mediaviewMenuShadow;
}
mediaviewPopupMenu: PopupMenu(defaultPopupMenu) {
	shadow: mediaviewMenuShadow;
	menu: mediaviewMenu;
	animation: mediaviewPanelAnimation;
}
mediaviewDropdownMenu: DropdownMenu(defaultDropdownMenu) {
	menu: mediaviewMenu;
	wrap: InnerDropdown(defaultInnerDropdown) {
		bg: mediaviewMenuBg;
		animation: mediaviewPanelAnimation;
		scrollPadding: margins(0px, 8px, 0px, 8px);
		shadow: mediaviewMenuShadow;
	}
}

mediaviewControlsMenu: Menu(defaultMenu) {
	itemBg: mediaviewSaveMsgBg;
	itemBgOver: mediaviewPlaybackIconRipple;
	itemFg: mediaviewPlaybackProgressFg;
	itemFgOver: mediaviewPlaybackProgressFg;
	itemFgDisabled: mediaviewPlaybackProgressFg;
	itemFgShortcut: mediaviewPlaybackProgressFg;
	itemFgShortcutOver: mediaviewPlaybackProgressFg;
	itemFgShortcutDisabled: mediaviewPlaybackProgressFg;

	separatorFg: mediaviewPlaybackIconRipple;

	arrow: icon {{ "dropdown_submenu_arrow", mediaviewPlaybackProgressFg }};

	ripple: RippleAnimation(defaultRippleAnimation) {
		color: mediaviewPlaybackIconRipple;
	}
}
mediaviewControlsMenuShadow: Shadow(defaultEmptyShadow) {
	fallback: mediaviewSaveMsgBg;
}
mediaviewControlsPanelAnimation: PanelAnimation(defaultPanelAnimation) {
	fadeBg: mediaviewSaveMsgBg;
	shadow: mediaviewControlsMenuShadow;
}
mediaviewControlsPopupMenu: PopupMenu(defaultPopupMenu) {
	shadow: mediaviewControlsMenuShadow;
	menu: mediaviewControlsMenu;
	animation: mediaviewControlsPanelAnimation;
}
mediaviewMenuCheck: icon {{ "player_check", mediaviewPlaybackProgressFg }};

mediaviewSaveMsgCheck: icon {{ "mediaview_save_check", mediaviewSaveMsgFg }};
mediaviewSaveMsgPadding: margins(55px, 19px, 29px, 20px);
mediaviewSaveMsgCheckPos: point(23px, 21px);
mediaviewSaveMsgShowing: 200;
mediaviewSaveMsgShown: 2000;
mediaviewSaveMsgHiding: 2500;
mediaviewSaveMsgStyle: TextStyle(defaultTextStyle) {
	font: font(16px);
	linkFont: font(16px);
	linkFontOver: font(16px underline);
}
mediaviewTextPalette: TextPalette(defaultTextPalette) {
	linkFg: mediaviewTextLinkFg;
	monoFg: mediaviewCaptionFg;
}

mediaviewCaptionStyle: defaultTextStyle;

mediaviewThickFont: semiboldFont;
mediaviewFont: normalFont;
mediaviewTextStyle: defaultTextStyle;

mediaviewTextLeft: 16px;
mediaviewTextSkip: 10px;
mediaviewHeaderTop: 48px;
mediaviewTextTop: 24px;
mediaviewTextOpacity: 0.5;
mediaviewTextOverOpacity: 1;

mediaviewIconOpacity: 0.45;
mediaviewIconOverOpacity: 1;
mediaviewControlBgOpacity: 0.3;
mediaviewControlMargin: 0px;
mediaviewControlSize: 90px;
mediaviewIconSize: size(60px, 56px);

mediaviewWaitHide: 2000;
mediaviewHideDuration: 1000;
mediaviewShowDuration: 200;
mediaviewFadeDuration: 150;

mediaviewDeltaFromLastAction: 5px;
mediaviewSwipeDistance: 80px;

mediaviewCaptionPadding: margins(18px, 10px, 18px, 10px);
mediaviewCaptionMargin: size(11px, 11px);
mediaviewCaptionRadius: 2px;

mediaviewGroupPadding: margins(0px, 14px, 0px, 14px);
mediaviewGroupHeight: 80px;
mediaviewGroupWidth: 56px;
mediaviewGroupWidthMax: 160px;
mediaviewGroupSkip: 3px;
mediaviewGroupSkipCurrent: 12px;

themePreviewSize: size(903px, 584px);
themePreviewBg: windowBg;
themePreviewOverlayOpacity: 0.8;
themePreviewMargin: margins(36px, 72px, 36px, 88px);
themePreviewTitleTop: 24px;
themePreviewTitleFg: windowBoldFg;
themePreviewTitleFont: font(17px semibold);
themePreviewLoadingFont: font(16px);
themePreviewLoadingFg: windowSubTextFg;
themePreviewApplyButton: RoundButton(defaultActiveButton) {
	height: 38px;
	font: font(15px semibold);
}
themePreviewCancelButton: RoundButton(defaultLightButton) {
	height: 38px;
	font: font(15px semibold);
}
themePreviewButtonsSkip: 20px;
themePreviewDialogsWidth: 312px;

pipDefaultSize: 320px;
pipMinimalSize: 120px;
pipBorderSkip: 20px;
pipBorderSnapArea: 16px;
pipResizeArea: 10px;
pipControlSkip: 6px;
pipPlaybackWidth: 2px;
pipPlaybackWide: 4px;
pipPlaybackSkip: 4px;
pipPlaybackTextSkip: 6px;
pipPlaybackFont: font(11px);
pipPlayIcon: icon {{ "player_pip_play", mediaviewPipControlsFg }};
pipPlayIconOver: icon {{ "player_pip_play", mediaviewPipControlsFgOver }};
pipPauseIcon: icon {{ "player_pip_pause", mediaviewPipControlsFg }};
pipPauseIconOver: icon {{ "player_pip_pause", mediaviewPipControlsFgOver }};
pipCloseIcon: icon {{ "player_pip_close", mediaviewPlaybackIconFg }};
pipCloseIconOver: icon {{ "player_pip_close", mediaviewPlaybackIconFgOver }};
pipEnlargeIcon: icon {{ "player_pip_enlarge", mediaviewPlaybackIconFg }};
pipEnlargeIconOver: icon {{ "player_pip_enlarge", mediaviewPlaybackIconFgOver }};