tdesktop/Telegram/SourceFiles/media/view/media_view.style

406 lines
13 KiB
Plaintext

/*
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 "ui/menu_icons.style";
using "media/player/media_player.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: 49px;
mediaviewPlayProgressTop: 46px;
mediaviewControlsButton: IconButton {
ripple: RippleAnimation(defaultRippleAnimation) {
color: mediaviewPlaybackIconRipple;
}
rippleAreaPosition: point(0px, 0px);
duration: mediaviewOverDuration;
}
mediaviewControllerSize: size(480px, 72px);
mediaviewPlayProgressLabel: LabelSimple(defaultLabelSimple) {
font: font(12px semibold);
textFg: mediaviewPlaybackProgressFg;
}
mediaviewPlayProgressSkip: 10px;
mediaviewPlayProgressLeft: 4px;
mediaviewPlayButtonTop: 2px;
mediaviewPlayButton: IconButton(mediaviewControlsButton) {
width: 40px;
height: 40px;
rippleAreaSize: 40px;
icon: icon {{ "player/player_play_big", mediaviewPlaybackIconFg }};
iconOver: icon {{ "player/player_play_big", mediaviewPlaybackIconFgOver }};
iconPosition: point(8px, 8px);
}
mediaviewPauseIcon: icon {{ "player/player_pause_big", mediaviewPlaybackIconFg }};
mediaviewPauseIconOver: icon {{ "player/player_pause_big", mediaviewPlaybackIconFgOver }};
mediaviewButtonsTop: 6px;
mediaviewButtonsRight: 8px;
mediaviewPipButtonSkip: 4px;
mediaviewPipButton: IconButton(mediaviewControlsButton) {
width: 32px;
height: 32px;
rippleAreaSize: 32px;
icon: icon {{ "player/player_pip", mediaviewPlaybackIconFg }};
iconOver: icon {{ "player/player_pip", mediaviewPlaybackIconFgOver }};
iconPosition: point(4px, 4px);
}
mediaviewFullScreenButtonSkip: 4px;
mediaviewFullScreenButton: IconButton(mediaviewPipButton) {
icon: icon {{ "player/player_fullscreen", mediaviewPlaybackIconFg }};
iconOver: icon {{ "player/player_fullscreen", mediaviewPlaybackIconFgOver }};
}
mediaviewFullScreenOutIcon: icon {{ "player/player_minimize", mediaviewPlaybackIconFg }};
mediaviewFullScreenOutIconOver: icon {{ "player/player_minimize", mediaviewPlaybackIconFgOver }};
mediaviewVolumeWidth: 75px;
mediaviewControllerRadius: 9px;
mediaviewVolumeIcon0: icon {{ "player/player_volume_off", mediaviewPlaybackIconFg }};
mediaviewVolumeIcon0Over: icon {{ "player/player_volume_off", mediaviewPlaybackIconFgOver }};
mediaviewVolumeIcon1: icon {{ "player/player_volume_small", mediaviewPlaybackIconFg }};
mediaviewVolumeIcon1Over: icon {{ "player/player_volume_small", mediaviewPlaybackIconFgOver }};
mediaviewVolumeIcon2: icon {{ "player/player_volume_on", mediaviewPlaybackIconFg }};
mediaviewVolumeIcon2Over: icon {{ "player/player_volume_on", mediaviewPlaybackIconFgOver }};
mediaviewVolumeTop: 6px;
mediaviewVolumeToggleLeft: 6px;
mediaviewVolumeToggle: IconButton(mediaviewControlsButton) {
width: 32px;
height: 32px;
rippleAreaSize: 32px;
icon: mediaviewVolumeIcon0;
iconOver: mediaviewVolumeIcon0Over;
iconPosition: point(4px, 4px);
}
mediaviewVolumeSkip: 3px;
mediaviewLeft: icon {
{ "mediaview/next_shadow-flip_horizontal", windowShadowFg }
{ "mediaview/next-flip_horizontal", mediaviewControlFg }
};
mediaviewRight: icon {
{ "mediaview/next_shadow", windowShadowFg }
{ "mediaview/next", mediaviewControlFg }
};
mediaviewSave: icon {{ "mediaview/download", mediaviewControlFg }};
mediaviewRotate: icon {{ "mediaview/rotate", mediaviewControlFg }};
mediaviewMore: icon {{ "title_menu_dots", 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;
mediaviewMenuSeparator: MenuSeparator(defaultMenuSeparator) {
fg: mediaviewMenuFg;
}
mediaviewMenu: Menu(menuWithIcons) {
itemBg: mediaviewMenuBg;
itemBgOver: mediaviewMenuBgOver;
itemFg: mediaviewMenuFg;
itemFgOver: mediaviewMenuFg;
itemFgDisabled: mediaviewMenuFg;
itemFgShortcut: mediaviewMenuFg;
itemFgShortcutOver: mediaviewMenuFg;
itemFgShortcutDisabled: mediaviewMenuFg;
separator: mediaviewMenuSeparator;
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;
}
}
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: 14px;
mediaviewTextSkip: 10px;
mediaviewHeaderTop: 47px;
mediaviewTextTop: 26px;
mediaviewControlSize: 90px;
mediaviewIconSize: size(46px, 54px);
mediaviewIconOver: 36px;
mediaviewWaitHide: 2000;
mediaviewHideDuration: 1000;
mediaviewShowDuration: 200;
mediaviewFadeDuration: 150;
mediaviewDeltaFromLastAction: 5px;
mediaviewSwipeDistance: 80px;
mediaviewCaptionPadding: margins(11px, 6px, 11px, 6px);
mediaviewCaptionMargin: size(11px, 11px);
mediaviewCaptionRadius: 6px;
mediaviewGroupPadding: margins(0px, 14px, 0px, 14px);
mediaviewGroupHeight: 80px;
mediaviewGroupWidth: 56px;
mediaviewGroupWidthMax: 160px;
mediaviewGroupSkip: 3px;
mediaviewGroupSkipCurrent: 12px;
mediaviewMinWidth: 480px;
mediaviewMinHeight: 360px;
mediaviewDefaultLeft: 160px;
mediaviewDefaultTop: 120px;
mediaviewDefaultWidth: 800px;
mediaviewDefaultHeight: 600px;
mediaviewTitleMinimize: icon{
{ "mediaview/title_viewer_shadow_minimize", windowShadowFg },
{ "mediaview/title_viewer_button_minimize", mediaviewControlFg },
};
mediaviewTitleMaximize: icon{
{ "mediaview/title_viewer_shadow_maximize", windowShadowFg },
{ "mediaview/title_viewer_button_maximize", mediaviewControlFg },
};
mediaviewTitleRestore: icon{
{ "mediaview/title_viewer_shadow_restore", windowShadowFg },
{ "mediaview/title_viewer_button_restore", mediaviewControlFg },
};
mediaviewTitleClose: icon{
{ "mediaview/title_viewer_shadow_close", windowShadowFg },
{ "mediaview/title_viewer_button_close", mediaviewControlFg },
};
mediaviewTitleButton: IconButton(windowTitleButton) {
width: 44px;
height: 32px;
}
mediaviewTitle: WindowTitle(defaultWindowTitle) {
height: 0px;
bg: mediaviewBg;
bgActive: mediaviewBg;
fg: transparent;
fgActive: transparent;
minimize: IconButton(mediaviewTitleButton) {
icon: mediaviewTitleMinimize;
iconOver: mediaviewTitleMinimize;
}
minimizeIconActive: mediaviewTitleMinimize;
minimizeIconActiveOver: mediaviewTitleMinimize;
maximize: IconButton(mediaviewTitleButton) {
icon: mediaviewTitleMaximize;
iconOver: mediaviewTitleMaximize;
}
maximizeIconActive: mediaviewTitleMaximize;
maximizeIconActiveOver: mediaviewTitleMaximize;
restoreIcon: mediaviewTitleRestore;
restoreIconOver: mediaviewTitleRestore;
restoreIconActive: mediaviewTitleRestore;
restoreIconActiveOver: mediaviewTitleRestore;
close: IconButton(mediaviewTitleButton) {
icon: mediaviewTitleClose;
iconOver: mediaviewTitleClose;
}
closeIconActive: mediaviewTitleClose;
closeIconActiveOver: mediaviewTitleClose;
}
mediaviewTitleButtonMac: icon{
{ "mediaview/title_button_shadow_mac", windowShadowFg },
{ "mediaview/title_button_mac", mediaviewControlFg },
};
mediaviewTitleMinimizeMac: icon {{ "mediaview/title_button_minimize_mac", mediaviewBg }};
mediaviewTitleMaximizeMac: icon {{ "mediaview/title_button_maximize_mac", mediaviewBg }};
mediaviewTitleRestoreMac: icon {{ "mediaview/title_button_shrink_mac", mediaviewBg }};
mediaviewTitleCloseMac: icon {{ "mediaview/title_button_close_mac", mediaviewBg }};
mediaviewTitleCloseMacPadding: margins(8px, 4px, 0px, 4px);
mediaviewTitleMinimizeMacPadding: margins(0px, 4px, 0px, 4px);
mediaviewTitleMaximizeMacPadding: margins(0px, 4px, 8px, 4px);
mediaviewShadowTop: icon{{ "mediaview/shadow_top", windowShadowFg }};
mediaviewShadowBottom: icon{{ "mediaview/shadow_bottom", windowShadowFg }};
mediaviewSpeedMenu: MediaSpeedMenu(mediaPlayerSpeedMenu) {
dropdown: DropdownMenu(mediaviewDropdownMenu) {
menu: Menu(mediaviewMenu) {
separator: MenuSeparator(mediaviewMenuSeparator) {
fg: mediaviewMenuBgOver;
padding: margins(0px, 4px, 0px, 4px);
width: 6px;
}
itemPadding: margins(54px, 7px, 54px, 9px);
itemFgDisabled: mediaviewTextLinkFg;
}
}
activeCheck: icon {{ "player/player_check", mediaviewTextLinkFg }};
slider: MediaSlider(defaultContinuousSlider) {
activeFg: mediaviewTextLinkFg;
inactiveFg: mediaviewMenuBgOver;
activeFgOver: mediaviewTextLinkFg;
inactiveFgOver: mediaviewMenuBgOver;
activeFgDisabled: mediaviewMenuBgOver;
receivedTillFg: mediaviewMenuBgOver;
width: 6px;
seekSize: size(6px, 6px);
}
slow: mediaSpeedSlow;
slowActive: mediaSpeedSlowActive;
normal: mediaSpeedNormal;
normalActive: mediaSpeedNormalActive;
medium: mediaSpeedMedium;
mediumActive: mediaSpeedMediumActive;
fast: mediaSpeedFast;
fastActive: mediaSpeedFastActive;
veryFast: mediaSpeedVeryFast;
veryFastActive: mediaSpeedVeryFastActive;
superFast: mediaSpeedSuperFast;
superFastActive: mediaSpeedSuperFastActive;
}
mediaviewSpeedButton: MediaSpeedButton(mediaPlayerSpeedButton) {
size: size(32px, 32px);
padding: margins(0px, 0px, 0px, 0px);
fg: mediaviewPlaybackIconFg;
overFg: mediaviewPlaybackIconFgOver;
activeFg: mediaviewTextLinkFg;
icon: icon{{ "player/player_speed", mediaviewPlaybackIconFg }};
ripple: RippleAnimation(defaultRippleAnimation) {
color: mediaviewPlaybackIconRipple;
}
rippleActiveColor: mediaviewPlaybackIconRipple;
rippleRadius: 16px;
menu: mediaviewSpeedMenu;
menuAlign: align(bottomright);
}
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/player_pip_play", mediaviewPipControlsFg }};
pipPlayIconOver: icon {{ "player/player_pip_play", mediaviewPipControlsFgOver }};
pipPauseIcon: icon {{ "player/player_pip_pause", mediaviewPipControlsFg }};
pipPauseIconOver: icon {{ "player/player_pip_pause", mediaviewPipControlsFgOver }};
pipCloseIcon: icon {{ "player/player_pip_close", mediaviewPipControlsFg }};
pipCloseIconOver: icon {{ "player/player_pip_close", mediaviewPipControlsFgOver }};
pipEnlargeIcon: icon {{ "player/player_pip_enlarge", mediaviewPipControlsFg }};
pipEnlargeIconOver: icon {{ "player/player_pip_enlarge", mediaviewPipControlsFgOver }};
pipVolumeIcon0: icon {{ "player/player_volume_off", mediaviewPipControlsFg }};
pipVolumeIcon0Over: icon {{ "player/player_volume_off", mediaviewPipControlsFgOver }};
pipVolumeIcon1: icon {{ "player/player_volume_small", mediaviewPipControlsFg }};
pipVolumeIcon1Over: icon {{ "player/player_volume_small", mediaviewPipControlsFgOver }};
pipVolumeIcon2: icon {{ "player/player_volume_on", mediaviewPipControlsFg }};
pipVolumeIcon2Over: icon {{ "player/player_volume_on", mediaviewPipControlsFgOver }};
speedSliderDividerSize: size(2px, 8px);