lib_ui/ui/widgets/widgets.style

// This file is part of Desktop App Toolkit,
// a set of libraries for developing nice desktop applications.
//
// For license and copyright information please follow this link:
// https://github.com/desktop-app/legal/blob/master/LEGAL
//

using "ui/basic.style";

LabelSimple {
	font: font;
	maxWidth: pixels;
	textFg: color;
}

FlatLabel {
	margin: margins;
	minWidth: pixels;
	align: align;
	textFg: color;
	maxHeight: pixels;
	style: TextStyle;
	palette: TextPalette;
}

LinkButton {
	color: color;
	overColor: color;
	font: font;
	overFont: font;
	padding: margins;
}

RippleAnimation {
	color: color;
	showDuration: int;
	hideDuration: int;
}

InfiniteRadialAnimation {
	color: color;
	thickness: pixels;
	size: size;
	linearPeriod: int;
	sinePeriod: int;
	sineDuration: int;
	sineShift: int;
	arcMin: double;
	arcMax: double;
}

defaultInfiniteRadialAnimation: InfiniteRadialAnimation {
	linearPeriod: 1000;
	sinePeriod: 3000;
	sineDuration: 1000;
	sineShift: 1500;
	arcMin: 0.0625;
	arcMax: 0.75;
}

FlatButton {
	color: color;
	overColor: color;

	bgColor: color;
	overBgColor: color;

	width: pixels;
	height: pixels;

	textTop: pixels;

	font: font;
	overFont: font;

	ripple: RippleAnimation;
}

RoundButton {
	textFg: color;
	textFgOver: color;
	textBg: color; // rect of textBg with rounded rect of textBgOver upon it
	textBgOver: color;

	numbersTextFg: color;
	numbersTextFgOver: color;
	numbersSkip: pixels;

	width: pixels;
	height: pixels;
	radius: pixels;
	padding: margins;

	textTop: pixels;

	icon: icon;
	iconOver: icon;
	iconPosition: point;

	font: font;

	ripple: RippleAnimation;
}

Toggle {
	toggledBg: color;
	toggledFg: color;
	untoggledBg: color;
	untoggledFg: color;
	duration: int;
	border: pixels;
	shift: pixels;
	diameter: pixels;
	width: pixels;
	xsize: pixels;
	vsize: pixels;
	vshift: pixels;
	stroke: pixels;
	lockIcon: icon;
	rippleAreaPadding: pixels;
}

Check {
	bg: color;
	untoggledFg: color;
	toggledFg: color;
	diameter: pixels;
	thickness: pixels;
	icon: icon;
	duration: int;
	rippleAreaPadding: pixels;
}

Radio {
	bg: color;
	untoggledFg: color;
	toggledFg: color;
	diameter: pixels;
	thickness: pixels;
	outerSkip: pixels;
	skip: pixels;
	duration: int;
	rippleAreaPadding: pixels;
}

Checkbox {
	textFg: color;
	textFgActive: color;

	width: pixels;
	margin: margins;

	textPosition: point;
	checkPosition: point;

	style: TextStyle;

	rippleAreaPosition: point;
	rippleBg: color;
	rippleBgActive: color;
	ripple: RippleAnimation;

	disabledOpacity: double;
}

ScrollArea {
	bg: color;
	bgOver: color;
	barBg: color;
	barBgOver: color;

	round: pixels;

	width: pixels;
	minHeight: pixels;
	deltax: pixels;
	deltat: pixels;
	deltab: pixels;

	topsh: pixels;
	bottomsh: pixels;
	shColor: color;

	duration: int;
	hiding: int;
}

Shadow {
	left: icon;
	topLeft: icon;
	top: icon;
	topRight: icon;
	right: icon;
	bottomRight: icon;
	bottom: icon;
	bottomLeft: icon;
	extend: margins;
	fallback: color;
}

PanelAnimation {
	startWidth: double;
	widthDuration: double;
	startHeight: double;
	heightDuration: double;
	startOpacity: double;
	opacityDuration: double;
	startFadeTop: double;
	fadeHeight: double;
	fadeOpacity: double;
	fadeBg: color;
	shadow: Shadow;
}

MenuSeparator {
	padding: margins;
	width: pixels;
	fg: color;
}

Menu {
	skip: pixels;

	itemBg: color;
	itemBgOver: color;
	itemFg: color;
	itemFgOver: color;
	itemFgDisabled: color;
	itemFgShortcut: color;
	itemFgShortcutOver: color;
	itemFgShortcutDisabled: color;
	itemPadding: margins;
	itemRightSkip: pixels;
	itemIconPosition: point;
	itemStyle: TextStyle;
	itemToggle: Toggle;
	itemToggleOver: Toggle;
	itemToggleShift: pixels;

	separator: MenuSeparator;

	arrow: icon;

	widthMin: pixels;
	widthMax: pixels;

	ripple: RippleAnimation;
}

PopupMenu {
	shadow: Shadow;
	scrollPadding: margins;
	maxHeight: pixels;
	animation: PanelAnimation;

	menu: Menu;

	radius: pixels;
	duration: int;
	showDuration: int;
}

InputField {
	textBg: color;
	textBgActive: color; // Used only with borderRadius.
	textFg: color;
	textMargins: margins;
	textAlign: align;

	placeholderFg: color;
	placeholderFgActive: color;
	placeholderFgError: color;
	placeholderMargins: margins;
	placeholderAlign: align;
	placeholderScale: double;
	placeholderShift: pixels;
	placeholderFont: font;

	duration: int;

	borderFg: color;
	borderFgActive: color;
	borderFgError: color;

	border: pixels;
	borderActive: pixels;
	borderRadius: pixels;

	font: font;
	menu: PopupMenu;

	width: pixels;
	heightMin: pixels;
	heightMax: pixels;
}

OutlineButton {
	textBg: color;
	textBgOver: color;

	textFg: color;
	textFgOver: color;

	font: font;
	padding: margins;

	ripple: RippleAnimation;
}

IconButton {
	width: pixels;
	height: pixels;

	icon: icon;
	iconOver: icon;
	iconPosition: point;

	duration: int;

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

IconButtonWithText {
	iconButton: IconButton;
	height: pixels;

	textFg: color;
	textFgOver: color;
	textPadding: margins;
	textAlign: align;

	font: font;
}

MediaSlider {
	width: pixels;
	activeFg: color;
	inactiveFg: color;
	activeFgOver: color;
	inactiveFgOver: color;
	activeFgDisabled: color;
	inactiveFgDisabled: color;
	receivedTillFg: color;
	seekSize: size;
	duration: int;
}

FilledSlider {
	fullWidth: pixels;
	lineWidth: pixels;
	activeFg: color;
	inactiveFg: color;
	disabledFg: color;
	duration: int;
}

RoundCheckbox {
	border: color;
	bgInactive: color;
	bgActive: color;
	width: pixels;
	size: pixels;
	sizeSmall: double;
	duration: int;
	bgDuration: double;
	fgDuration: double;
	check: icon;
}

RoundImageCheckbox {
	selectExtendTwice: pixels;
	imageRadius: pixels;
	imageSmallRadius: pixels;
	selectWidth: pixels;
	selectFg: color;
	selectDuration: int;
	check: RoundCheckbox;
}

CrossAnimation {
	fg: color;
	size: pixels;
	skip: pixels;
	stroke: double;
	minScale: double;
}

CrossButton {
	width: pixels;
	height: pixels;

	cross: CrossAnimation;
	crossFg: color;
	crossFgOver:color;
	crossPosition: point;
	duration: int;
	loadingPeriod: int;

	ripple: RippleAnimation;
}

CrossLineAnimation {
	fg: color;
	icon: icon;
	startPosition: point;
	endPosition: point;
	stroke: pixels;
	strokeDenominator: int;
}

ArcsAnimation {
	fg: color;
	stroke: pixels;
	space: pixels;
	duration: int;
	deltaAngle: int;
	deltaHeight: pixels;
	deltaWidth: pixels;
	startHeight: pixels;
	startWidth: pixels;
}

MultiSelectItem {
	padding: margins;
	maxWidth: pixels;
	height: pixels;
	style: TextStyle;
	textBg: color;
	textFg: color;
	textActiveBg: color;
	textActiveFg: color;
	duration: int;
	deleteFg: color;
	deleteCross: CrossAnimation;
	minScale: double;
}

MultiSelect {
	bg: color;
	padding: margins;
	maxHeight: pixels;
	scroll: ScrollArea;

	item: MultiSelectItem;
	itemSkip: pixels;

	field: InputField;
	fieldMinWidth: pixels;
	fieldIcon: icon;
	fieldIconSkip: pixels;
	fieldCancel: CrossButton;
	fieldCancelSkip: pixels;
}

CallButton {
	button: IconButton;
	bg: color;
	bgSize: pixels;
	bgPosition: point;
	angle: double;
	outerRadius: pixels;
	outerBg: color;
	label: FlatLabel;
}

InnerDropdown {
	padding: margins;
	shadow: Shadow;
	animation: PanelAnimation;

	duration: int;
	showDuration: int;
	width: pixels;

	bg: color;
	scroll: ScrollArea;
	scrollMargin: margins;
	scrollPadding: margins;
}

DropdownMenu {
	wrap: InnerDropdown;
	menu: Menu;
}

Tooltip {
	textBg: color;
	textFg: color;
	textStyle: TextStyle;
	textBorder: color;
	textPadding: margins;

	shift: point;
	skip: pixels;

	widthMax: pixels;
	linesMax: int;
}

ImportantTooltip {
	bg: color;
	margin: margins;
	padding: margins;
	radius: pixels;
	arrow: pixels;
	arrowSkipMin: pixels;
	arrowSkip: pixels;
	shift: pixels;
	duration: int;
}

SettingsButton {
	textFg: color;
	textFgOver: color;
	textBg: color;
	textBgOver: color;

	style: TextStyle;
	rightLabel: FlatLabel;

	height: pixels;
	padding: margins;
	iconLeft: pixels;

	toggle: Toggle;
	toggleOver: Toggle;
	toggleSkip: pixels;

	ripple: RippleAnimation;
}

SettingsCountButton {
	button: SettingsButton;
	icon: icon;
	iconPosition: point;
	label: FlatLabel;
	labelPosition: point;
}

PassportScanRow {
	padding: margins;
	size: pixels;
	textLeft: pixels;
	nameTop: pixels;
	statusTop: pixels;
	border: pixels;
	borderFg: color;
	remove: IconButton;
	restore: RoundButton;
}

WindowTitle {
	height: pixels;
	bg: color;
	bgActive: color;
	fg: color;
	fgActive: color;
	style: TextStyle;
	minimize: IconButton;
	minimizeIconActive: icon;
	minimizeIconActiveOver: icon;
	maximize: IconButton;
	maximizeIconActive: icon;
	maximizeIconActiveOver: icon;
	restoreIcon: icon;
	restoreIconOver: icon;
	restoreIconActive: icon;
	restoreIconActiveOver: icon;
	close: IconButton;
	closeIconActive: icon;
	closeIconActiveOver: icon;
}

SideBarButton {
	icon: icon;
	iconActive: icon;
	iconPosition: point;
	textTop: pixels;
	textSkip: pixels;
	minTextWidth: pixels;
	minHeight: pixels;
	style: TextStyle;
	badgeStyle: TextStyle;
	badgeSkip: pixels;
	badgeHeight: pixels;
	badgeStroke: pixels;
	badgePosition: point;
	textBg: color;
	textBgActive: color;
	textFg: color;
	textFgActive: color;
	badgeBg: color;
	badgeBgMuted: color;
	badgeFg: color;
	ripple: RippleAnimation;
}

Toast {
	style: TextStyle;
	icon: icon;
	iconPosition: point;
	palette: TextPalette;
	padding: margins;
	margin: margins;
	minWidth: pixels;
	maxWidth: pixels;
	durationFadeIn: int;
	durationFadeOut: int;
	durationSlide: int;
}

defaultLabelSimple: LabelSimple {
	font: normalFont;
	maxWidth: 0px;
	textFg: windowFg;
}

defaultFlatLabel: FlatLabel {
	minWidth: 0px;
	maxHeight: 0px;
	align: align(left);
	textFg: windowFg;
	style: defaultTextStyle;
	palette: defaultTextPalette;
}

defaultLinkButton: LinkButton {
	color: windowActiveTextFg;
	overColor: windowActiveTextFg;
	font: linkFont;
	overFont: linkOverFont;
}

defaultRippleAnimation: RippleAnimation {
	color: windowBgRipple;
	showDuration: 650;
	hideDuration: 200;
}

emptyRippleAnimation: RippleAnimation {
}

buttonRadius: 4px;

defaultActiveButton: RoundButton {
	textFg: activeButtonFg;
	textFgOver: activeButtonFgOver;
	numbersTextFg: activeButtonSecondaryFg;
	numbersTextFgOver: activeButtonSecondaryFgOver;
	textBg: activeButtonBg;
	textBgOver: activeButtonBgOver;

	numbersSkip: 7px;

	width: -34px;
	height: 34px;
	padding: margins(0px, 0px, 0px, 0px);

	textTop: 8px;

	iconPosition: point(0px, 0px);

	font: semiboldFont;

	ripple: RippleAnimation(defaultRippleAnimation) {
		color: activeButtonBgRipple;
	}
}

defaultLightButton: RoundButton(defaultActiveButton) {
	textFg: lightButtonFg;
	textFgOver: lightButtonFgOver;
	numbersTextFg: lightButtonFg;
	numbersTextFgOver: lightButtonFgOver;
	textBg: lightButtonBg;
	textBgOver: lightButtonBgOver;

	ripple: RippleAnimation(defaultRippleAnimation) {
		color: lightButtonBgRipple;
	}
}

defaultScrollArea: ScrollArea {
	bg: scrollBg;
	bgOver: scrollBgOver;
	barBg: scrollBarBg;
	barBgOver: scrollBarBgOver;

	round: 2px;

	width: 10px;
	minHeight: 20px;
	deltax: 3px;
	deltat: 3px;
	deltab: 3px;

	topsh: 0px;
	bottomsh: 0px;
	shColor: shadowFg;

	duration: 150;
	hiding: 1000;
}

defaultSolidScroll: ScrollArea(defaultScrollArea) {
	deltax: 5px;
	width: 14px;
	deltat: 6px;
	deltab: 6px;

	hiding: 0;
}

defaultCheckboxIcon: icon {{ "default_checkbox_check", overviewCheckFgActive, point(4px, 7px) }};

defaultCheck: Check {
	bg: transparent;
	untoggledFg: checkboxFg;
	toggledFg: windowBgActive;
	diameter: 22px;
	thickness: 2px;
	icon: defaultCheckboxIcon;
	duration: 120;
	rippleAreaPadding: 8px;
}
defaultRadio: Radio {
	bg: transparent;
	untoggledFg: checkboxFg;
	toggledFg: windowBgActive;
	diameter: 22px;
	thickness: 2px;
	outerSkip: 10px; // * 0.1
	skip: 60px; // * 0.1
	duration: 120;
	rippleAreaPadding: 8px;
}
defaultToggle: Toggle {
	toggledBg: windowBg;
	toggledFg: windowBgActive;
	untoggledBg: windowBg;
	untoggledFg: checkboxFg;
	duration: 120;
	border: 2px;
	shift: 1px;
	diameter: 16px;
	width: 14px;
	xsize: 0px;
	vsize: 0px;
	vshift: 0px;
	stroke: 0px;
	rippleAreaPadding: 8px;
}
defaultCheckbox: Checkbox {
	textFg: windowFg;
	textFgActive: windowFg;

	width: -44px;
	margin: margins(8px, 8px, 8px, 8px);

	textPosition: point(10px, 2px);
	checkPosition: point(8px, 8px);

	style: defaultTextStyle;

	rippleAreaPosition: point(-8px, -8px);
	rippleBg: windowBgOver;
	rippleBgActive: lightButtonBgOver;
	ripple: defaultRippleAnimation;

	disabledOpacity: 0.5;
}

defaultRoundShadow: Shadow {
	left: icon {{ "round_shadow_left", windowShadowFg }};
	topLeft: icon {{ "round_shadow_top_left", windowShadowFg }};
	top: icon {{ "round_shadow_top", windowShadowFg }};
	topRight: icon {{ "round_shadow_top_left-flip_horizontal", windowShadowFg }};
	right: icon {{ "round_shadow_left-flip_horizontal", windowShadowFg }};
	bottomRight: icon {{ "round_shadow_bottom_left-flip_horizontal", windowShadowFg }};
	bottom: icon {{ "round_shadow_bottom", windowShadowFg }};
	bottomLeft: icon {{ "round_shadow_bottom_left", windowShadowFg }};
	extend: margins(3px, 2px, 3px, 4px);
	fallback: windowShadowFgFallback;
}
defaultEmptyShadow: Shadow {
	fallback: windowBg;
}

defaultPanelAnimation: PanelAnimation {
	startWidth: 0.5;
	widthDuration: 0.6;
	startHeight: 0.3;
	heightDuration: 0.9;
	startOpacity: 0.2;
	opacityDuration: 0.3;
	startFadeTop: 0.;
	fadeHeight: 0.2;
	fadeOpacity: 1.0;
	fadeBg: menuBg;
	shadow: defaultRoundShadow;
}

defaultMenuArrow: icon {{ "menu/submenu_arrow", windowBoldFg }};
defaultMenuToggle: Toggle(defaultToggle) {
	untoggledFg: menuIconFg;
}
defaultMenuToggleOver: Toggle(defaultToggle) {
	untoggledFg: menuIconFgOver;
}
defaultMenuSeparator: MenuSeparator {
	padding: margins(0px, 5px, 0px, 5px);
	width: 1px;
	fg: menuSeparatorFg;
}
defaultMenu: Menu {
	skip: 0px;

	itemBg: windowBg;
	itemBgOver: windowBgOver;
	itemFg: windowFg;
	itemFgOver: windowFgOver;
	itemFgDisabled: menuFgDisabled;
	itemFgShortcut: windowSubTextFg;
	itemFgShortcutOver: windowSubTextFgOver;
	itemFgShortcutDisabled: menuFgDisabled;
	itemIconPosition: point(0px, 0px);
	itemPadding: margins(17px, 8px, 17px, 7px);
	itemRightSkip: 6px;
	itemStyle: defaultTextStyle;
	itemToggle: defaultMenuToggle;
	itemToggleOver: defaultMenuToggleOver;
	itemToggleShift: 0px;

	separator: defaultMenuSeparator;

	arrow: defaultMenuArrow;

	widthMin: 156px;
	widthMax: 300px;

	ripple: defaultRippleAnimation;
}
defaultPopupMenu: PopupMenu {
	shadow: defaultRoundShadow;
	animation: defaultPanelAnimation;

	scrollPadding: margins(0px, 8px, 0px, 8px);
	maxHeight: 0px;

	menu: defaultMenu;

	radius: 3px;
	duration: 150;
	showDuration: 200;
}

defaultInputField: InputField {
	textBg: windowBg;
	textBgActive: windowBg;
	textFg: windowFg;
	textMargins: margins(0px, 28px, 0px, 4px);
	textAlign: align(topleft);

	placeholderFg: windowSubTextFg;
	placeholderFgActive: windowActiveTextFg;
	placeholderFgError: attentionButtonFg;
	placeholderMargins: margins(0px, 0px, 0px, 0px);
	placeholderAlign: align(topleft);
	placeholderScale: 0.9;
	placeholderShift: -20px;
	placeholderFont: font(semibold 14px);
	duration: 150;

	borderFg: inputBorderFg;
	borderFgActive: activeLineFg;
	borderFgError: activeLineFgError;

	border: 1px;
	borderActive: 2px;
	borderRadius: 0px;

	font: boxTextFont;
	menu: defaultPopupMenu;

	heightMin: 55px;
	heightMax: 148px;
}

defaultIconButton: IconButton {
	iconPosition: point(-1px, -1px);
}

defaultMultiSelectItem: MultiSelectItem {
	padding: margins(6px, 7px, 12px, 0px);
	maxWidth: 128px;
	height: 32px;
	style: defaultTextStyle;
	textBg: contactsBgOver;
	textFg: windowFg;
	textActiveBg: activeButtonBg;
	textActiveFg: activeButtonFg;
	deleteFg: activeButtonFg;
	deleteCross: CrossAnimation {
		size: 32px;
		skip: 10px;
		stroke: 1.5;
		minScale: 0.3;
	}
	duration: 150;
	minScale: 0.3;
}

defaultMultiSelectSearchField: InputField(defaultInputField) {
	textBg: transparent;
	textMargins: margins(2px, 7px, 2px, 0px);

	placeholderFg: placeholderFg;
	placeholderFgActive: placeholderFgActive;
	placeholderFgError: placeholderFgActive;
	placeholderMargins: margins(2px, 0px, 2px, 0px);
	placeholderScale: 0.;
	placeholderFont: normalFont;

	border: 0px;
	borderActive: 0px;

	heightMin: 32px;

	font: normalFont;
}

boxFieldSearchIcon: icon {{ "box_search", menuIconFg, point(10px, 9px) }};

defaultMultiSelectSearchCancel: CrossButton {
	width: 44px;
	height: 44px;

	cross: CrossAnimation {
		size: 36px;
		skip: 12px;
		stroke: 1.5;
		minScale: 0.3;
	}
	crossFg: boxTitleCloseFg;
	crossFgOver: boxTitleCloseFgOver;
	crossPosition: point(4px, 4px);

	duration: 150;
	loadingPeriod: 1000;
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: windowBgOver;
	}
}
defaultMultiSelect: MultiSelect {
	bg: boxSearchBg;
	padding: margins(8px, 6px, 8px, 6px);
	maxHeight: 104px;
	scroll: ScrollArea(defaultSolidScroll) {
		deltat: 3px;
		deltab: 3px;
		round: 1px;
		width: 8px;
		deltax: 3px;
		hiding: 1000;
	}

	item: defaultMultiSelectItem;
	itemSkip: 8px;

	field: defaultMultiSelectSearchField;
	fieldMinWidth: 42px;
	fieldIcon: boxFieldSearchIcon;
	fieldIconSkip: 36px;

	fieldCancel: defaultMultiSelectSearchCancel;
	fieldCancelSkip: 40px;
}

widgetFadeDuration: 200;

SettingsSlider {
	height: pixels;
	barTop: pixels;
	barSkip: pixels;
	barStroke: pixels;
	barRadius: pixels;
	barFg: color;
	barFgActive: color;
	labelTop: pixels;
	labelStyle: TextStyle;
	labelFg: color;
	labelFgActive: color;
	duration: int;
	rippleBottomSkip: pixels;
	rippleBg: color;
	rippleBgActive: color;
	ripple: RippleAnimation;
}

defaultSettingsSlider: SettingsSlider {
	height: 39px;
	barTop: 5px;
	barSkip: 3px;
	barStroke: 3px;
	barRadius: 1px;
	barFg: sliderBgInactive;
	barFgActive: sliderBgActive;
	labelTop: 17px;
	labelStyle: defaultTextStyle;
	labelFg: windowActiveTextFg;
	labelFgActive: windowActiveTextFg;
	duration: 150;
}

defaultTabsSlider: SettingsSlider(defaultSettingsSlider) {
	height: 53px;
	barTop: 50px;
	barSkip: 0px;
	barFg: transparent;
	labelTop: 19px;
	labelStyle: semiboldTextStyle;
	labelFg: windowSubTextFg;
	labelFgActive: lightButtonFg;
	rippleBottomSkip: 1px;
	rippleBg: windowBgOver;
	rippleBgActive: lightButtonBgOver;
	ripple: defaultRippleAnimation;
}

defaultContinuousSlider: MediaSlider {
	width: 3px;
	activeFg: mediaPlayerActiveFg;
	inactiveFg: mediaPlayerInactiveFg;
	activeFgOver: mediaPlayerActiveFg;
	inactiveFgOver: mediaPlayerInactiveFg;
	activeFgDisabled: mediaPlayerInactiveFg;
	inactiveFgDisabled: windowBg;
	receivedTillFg: mediaPlayerInactiveFg;
	seekSize: size(9px, 9px);
	duration: 150;
}

defaultRoundCheckbox: RoundCheckbox {
	border: windowBg;
	bgActive: windowBgActive;
	width: 2px;
	duration: 160;
	bgDuration: 0.75;
	fgDuration: 1.;
}
defaultPeerListCheckIcon: icon {{
	"default_checkbox_check",
	overviewCheckFgActive,
	point(3px, 6px)
}};
defaultPeerListCheck: RoundCheckbox(defaultRoundCheckbox) {
	size: 20px;
	sizeSmall: 0.3;
	bgInactive: overviewCheckBg;
	bgActive: overviewCheckBgActive;
	check: defaultPeerListCheckIcon;
}
defaultPeerListCheckbox: RoundImageCheckbox {
	selectExtendTwice: 0px;
	imageRadius: 21px;
	imageSmallRadius: 18px;
	selectWidth: 2px;
	selectFg: windowBgActive;
	selectDuration: 150;
	check: defaultPeerListCheck;
}

defaultInnerDropdown: InnerDropdown {
	padding: margins(10px, 10px, 10px, 10px);
	shadow: defaultRoundShadow;
	animation: defaultPanelAnimation;

	duration: 150;
	showDuration: 200;

	bg: menuBg;
	scroll: defaultSolidScroll;
}
defaultDropdownMenu: DropdownMenu {
	wrap: InnerDropdown(defaultInnerDropdown) {
		scrollPadding: margins(0px, 8px, 0px, 8px);
	}
	menu: defaultMenu;
}

defaultTooltip: Tooltip {
	textBg: tooltipBg;
	textFg: tooltipFg;
	textStyle: defaultTextStyle;
	textBorder: tooltipBorderFg;
	textPadding: margins(5px, 2px, 5px, 2px);

	shift: point(-20px, 20px);
	skip: 10px;

	widthMax: 800px;
	linesMax: 12;
}

defaultImportantTooltip: ImportantTooltip {
	bg: importantTooltipBg;
	margin: margins(4px, 4px, 4px, 4px);
	padding: margins(13px, 9px, 13px, 10px);
	radius: 6px;
	arrow: 9px;
	arrowSkipMin: 24px;
	arrowSkip: 66px;
	shift: 12px;
	duration: 200;
}

defaultImportantTooltipLabel: FlatLabel(defaultFlatLabel) {
	style: TextStyle(defaultTextStyle) {
		font: font(14px);
		linkFont: font(14px);
		linkFontOver: font(14px underline);
	}
	textFg: importantTooltipFg;
	palette: TextPalette(defaultTextPalette) {
		linkFg: importantTooltipFgLink;
		selectLinkFg: importantTooltipFgLink;
	}
}

BotKeyboardButton {
	margin: pixels;
	padding: pixels;
	height: pixels;
	textTop: pixels;
	ripple: RippleAnimation;
}

TwoIconButton {
	width: pixels;
	height: pixels;

	iconBelow: icon;
	iconAbove: icon;
	iconBelowOver: icon;
	iconAboveOver: icon;
	iconPosition: point;

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

historySendActionTypingDuration: 800;
historySendActionTypingHalfPeriod: 320;
historySendActionTypingDeltaTime: 150;
historySendActionTypingPosition: point(4px, -4px);
historySendActionTypingDelta: 6px;
historySendActionTypingLargeNumerator: 28px;
historySendActionTypingSmallNumerator: 16px;
historySendActionTypingDenominator: 12.;

historySendActionRecordDuration: 500;
historySendActionRecordPosition: point(1px, -4px);
historySendActionRecordDelta: 4px;
historySendActionRecordStrokeNumerator: 16px;
historySendActionRecordDenominator: 8.;

historySendActionUploadDuration: 500;
historySendActionUploadPosition: point(0px, -4px);
historySendActionUploadDelta: 5px;
historySendActionUploadStrokeNumerator: 16px;
historySendActionUploadSizeNumerator: 32px;
historySendActionUploadDenominator: 8.;

historySendActionChooseStickerDuration: 2000;
historySendActionChooseStickerPosition: point(1px, -10px);
historySendActionChooseStickerEyeWidth: 7px;
historySendActionChooseStickerEyeHeight: 11px;
historySendActionChooseStickerEyeStep: 2px;

PeerListItem {
	left: pixels;
	bottom: pixels;
	height: pixels;
	photoPosition: point;
	namePosition: point;
	nameStyle: TextStyle;
	nameFg: color;
	nameFgChecked: color;
	statusPosition: point;
	photoSize: pixels;
	maximalWidth: pixels;

	button: OutlineButton;
	checkbox: RoundImageCheckbox;
	disabledCheckFg: color;
	statusFg: color;
	statusFgOver: color;
	statusFgActive: color;
}

PeerList {
	padding: margins;
	bg: color;
	about: FlatLabel;
	item: PeerListItem;
}

defaultPeerListButton: OutlineButton {
	textBg: windowBg;
	textBgOver: windowBgOver;

	textFg: windowSubTextFg;
	textFgOver: windowSubTextFgOver;

	font: normalFont;
	padding: margins(11px, 5px, 11px, 5px);

	ripple: defaultRippleAnimation;
}

defaultPeerListItem: PeerListItem {
	height: 58px;
	photoPosition: point(12px, 6px);
	namePosition: point(68px, 11px);
	nameStyle: TextStyle(defaultTextStyle) {
		font: semiboldFont;
		linkFont: semiboldFont;
		linkFontOver: semiboldFont;
	}
	nameFg: contactsNameFg;
	nameFgChecked: windowActiveTextFg;
	statusPosition: point(68px, 31px);
	photoSize: 46px;
	button: defaultPeerListButton;
	checkbox: defaultPeerListCheckbox;
	disabledCheckFg: menuIconFg;
	statusFg: windowSubTextFg;
	statusFgOver: windowSubTextFgOver;
	statusFgActive: windowActiveTextFg;
}

boxTextStyle: TextStyle(defaultTextStyle) {
	font: font(boxFontSize);
	linkFont: font(boxFontSize);
	linkFontOver: font(boxFontSize underline);
}

defaultPeerListAbout: FlatLabel(defaultFlatLabel) {
	minWidth: 240px;
	textFg: membersAboutLimitFg;
	align: align(top);
	style: TextStyle(boxTextStyle) {
		lineHeight: 22px;
	}
}

defaultPeerList: PeerList {
	padding: margins(0px, 0px, 0px, 0px);
	bg: contactsBg;
	about: defaultPeerListAbout;
	item: defaultPeerListItem;
}

SearchFieldRow {
	height: pixels;
	padding: margins;
	field: InputField;
	fieldIcon: icon;
	fieldIconSkip: pixels;
	fieldCancel: CrossButton;
	fieldCancelSkip: pixels;
}

LevelMeter {
	height: pixels;
	lineWidth: pixels;
	lineSpacing: pixels;
	lineCount: int;
	activeFg: color;
	inactiveFg: color;
}

defaultLevelMeter: LevelMeter {
	height: 18px;
	lineWidth: 3px;
	lineSpacing: 5px;
	lineCount: 44;
	activeFg: mediaPlayerActiveFg;
	inactiveFg: mediaPlayerInactiveFg;
}

menuToggleIcon: icon {{ "title_menu_dots", menuIconFg }};
menuToggleIconOver: icon {{ "title_menu_dots", menuIconFgOver }};
menuToggle: IconButton {
	width: 40px;
	height: 40px;

	icon: menuToggleIcon;
	iconOver: menuToggleIconOver;
	iconPosition: point(16px, 10px);

	rippleAreaPosition: point(0px, 0px);
	rippleAreaSize: 40px;
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: windowBgOver;
	}
}

backButtonIcon: icon {{ "box_button_back", menuIconFg }};
backButtonIconOver: icon {{ "box_button_back", menuIconFgOver }};
backButton: IconButton(defaultIconButton) {
	width: 40px;
	height: 40px;

	icon: backButtonIcon;
	iconOver: backButtonIconOver;

	rippleAreaPosition: point(0px, 0px);
	rippleAreaSize: 40px;
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: windowBgOver;
	}
}

defaultSettingsToggle: Toggle(defaultToggle) {
	untoggledFg: menuIconFg;
}
defaultSettingsToggleOver: Toggle(defaultSettingsToggle) {
	untoggledFg: menuIconFgOver;
}
defaultSettingsRightLabel: FlatLabel(defaultFlatLabel) {
	textFg: windowActiveTextFg;
	style: boxTextStyle;
	maxHeight: 20px;
}
defaultSettingsButton: SettingsButton {
	textFg: windowBoldFg;
	textFgOver: windowBoldFgOver;
	textBg: windowBg;
	textBgOver: windowBgOver;

	style: boxTextStyle;
	rightLabel: defaultSettingsRightLabel;

	height: 20px;
	padding: margins(22px, 10px, 22px, 8px);

	toggle: defaultSettingsToggle;
	toggleOver: defaultSettingsToggleOver;
	toggleSkip: 22px;

	ripple: defaultRippleAnimation;
}

defaultSideBarButton: SideBarButton {
	textBg: sideBarBg;
	textBgActive: sideBarBgActive;
	textFg: sideBarTextFg;
	textFgActive: sideBarTextFgActive;
	badgeBg: sideBarBadgeBg;
	badgeBgMuted: sideBarBadgeBgMuted;
	badgeFg: sideBarBadgeFg;
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: sideBarBgRipple;
	}
}

defaultToast: Toast {
	style: defaultTextStyle;
	palette: TextPalette(defaultTextPalette) {
		linkFg: mediaviewTextLinkFg;
		monoFg: mediaviewCaptionFg;
	}
	padding: margins(19px, 13px, 19px, 12px);
	margin: margins(13px, 13px, 13px, 13px);
	maxWidth: 480px;
	durationFadeIn: 200;
	durationFadeOut: 1000;
	durationSlide: 160;
}

defaultMultilineToast: Toast(defaultToast) {
	minWidth: 160px;
}

shakeShift: 4px;

// Windows specific title

windowTitleButtonWidth: 36px;
windowTitleHeight: 24px;
windowTitleButton: IconButton {
	width: windowTitleButtonWidth;
	height: windowTitleHeight;
	iconPosition: point(0px, 0px);
}
windowTitleButtonClose: IconButton(windowTitleButton) {
	width: windowTitleButtonWidth;
}

windowTitleButtonSize: size(windowTitleButtonWidth, windowTitleHeight);
defaultWindowTitle: WindowTitle {
	height: windowTitleHeight;
	bg: titleBg;
	bgActive: titleBgActive;
	fg: titleFg;
	fgActive: titleFgActive;
	style: TextStyle(defaultTextStyle) {
		font: font(semibold 12px);
		linkFont: font(semibold 12px);
		linkFontOver: font(semibold 12px underline);
	}
	minimize: IconButton(windowTitleButton) {
		icon: icon {
			{ windowTitleButtonSize, titleButtonBg },
			{ "title_button_minimize", titleButtonFg },
		};
		iconOver: icon {
			{ windowTitleButtonSize, titleButtonBgOver },
			{ "title_button_minimize", titleButtonFgOver },
		};
	}
	minimizeIconActive: icon {
		{ windowTitleButtonSize, titleButtonBgActive },
		{ "title_button_minimize", titleButtonFgActive },
	};
	minimizeIconActiveOver: icon {
		{ windowTitleButtonSize, titleButtonBgActiveOver },
		{ "title_button_minimize", titleButtonFgActiveOver },
	};
	maximize: IconButton(windowTitleButton) {
		icon: icon {
			{ windowTitleButtonSize, titleButtonBg },
			{ "title_button_maximize", titleButtonFg },
		};
		iconOver: icon {
			{ windowTitleButtonSize, titleButtonBgOver },
			{ "title_button_maximize", titleButtonFgOver },
		};
	}
	maximizeIconActive: icon {
		{ windowTitleButtonSize, titleButtonBgActive },
		{ "title_button_maximize", titleButtonFgActive },
	};
	maximizeIconActiveOver: icon {
		{ windowTitleButtonSize, titleButtonBgActiveOver },
		{ "title_button_maximize", titleButtonFgActiveOver },
	};
	restoreIcon: icon {
		{ windowTitleButtonSize, titleButtonBg },
		{ "title_button_restore", titleButtonFg },
	};
	restoreIconOver: icon {
		{ windowTitleButtonSize, titleButtonBgOver },
		{ "title_button_restore", titleButtonFgOver },
	};
	restoreIconActive: icon {
		{ windowTitleButtonSize, titleButtonBgActive },
		{ "title_button_restore", titleButtonFgActive },
	};
	restoreIconActiveOver: icon {
		{ windowTitleButtonSize, titleButtonBgActiveOver },
		{ "title_button_restore", titleButtonFgActiveOver },
	};
	close: IconButton(windowTitleButtonClose) {
		icon: icon {
			{ windowTitleButtonSize, titleButtonCloseBg },
			{ "title_button_close", titleButtonCloseFg },
		};
		iconOver: icon {
			{ windowTitleButtonSize, titleButtonCloseBgOver },
			{ "title_button_close", titleButtonCloseFgOver },
		};
	}
	closeIconActive: icon {
		{ windowTitleButtonSize, titleButtonCloseBgActive },
		{ "title_button_close", titleButtonCloseFgActive },
	};
	closeIconActiveOver: icon {
		{ windowTitleButtonSize, titleButtonCloseBgActiveOver },
		{ "title_button_close", titleButtonCloseFgActiveOver },
	};
}

windowShadow: icon {{ "window_shadow", windowShadowFg }};
windowShadowShift: 1px;

callRadius: 6px;
callShadow: Shadow {
	left: icon {{ "calls/call_shadow_left", windowShadowFg }};
	topLeft: icon {{ "calls/call_shadow_top_left", windowShadowFg }};
	top: icon {{ "calls/call_shadow_top", windowShadowFg }};
	topRight: icon {{ "calls/call_shadow_top_left-flip_horizontal", windowShadowFg }};
	right: icon {{ "calls/call_shadow_left-flip_horizontal", windowShadowFg }};
	bottomRight: icon {{ "calls/call_shadow_top_left-flip_vertical-flip_horizontal", windowShadowFg }};
	bottom: icon {{ "calls/call_shadow_top-flip_vertical", windowShadowFg }};
	bottomLeft: icon {{ "calls/call_shadow_top_left-flip_vertical", windowShadowFg }};
	extend: margins(9px, 8px, 9px, 10px);
	fallback: windowShadowFgFallback;
}

sideBarButtonLockArcOffset: 2px;
sideBarButtonLockSize: size(9px, 10px);
sideBarButtonLockArcHeight: 3px;
sideBarButtonLockBlockHeight: 5px;
sideBarButtonLockPenWidth: 3px;
sideBarButtonLockPenWidthDivider: 2;

menuIconColor: windowBoldFg;
menuIconAttentionColor: attentionButtonFg;

menuIconSubmenuArrow: defaultMenuArrow;

menuWithIcons: Menu(defaultMenu) {
	itemIconPosition: point(15px, 5px);
	itemPadding: margins(54px, 8px, 17px, 8px);

	arrow: menuIconSubmenuArrow;
}
menuWithIconsAttention: Menu(menuWithIcons) {
	itemFg: attentionButtonFg;
	itemFgOver: attentionButtonFgOver;
}
popupMenuWithIcons: PopupMenu(defaultPopupMenu) {
	scrollPadding: margins(0px, 5px, 0px, 5px);
	menu: menuWithIcons;
}
dropdownMenuWithIcons: DropdownMenu(defaultDropdownMenu) {
	wrap: InnerDropdown(defaultInnerDropdown) {
		scrollPadding: margins(0px, 5px, 0px, 5px);
	}
	menu: menuWithIcons;
}

universalRippleAnimation: RippleAnimation(defaultRippleAnimation) {
	color: shadowFg;
}