tdesktop/Telegram/SourceFiles/ui/widgets/widgets.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";

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

LinkButton {
	color: color;
	overColor: color;
	downColor: color;
	font: font;
	overFont: font;
}

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

FlatButton {
	color: color;
	overColor: color;

	bgColor: color;
	overBgColor: color;

	width: pixels;
	height: pixels;

	textTop: pixels;
	overTextTop: pixels;
	downTextTop: pixels;

	font: font;
	overFont: font;
	duration: int;
	cursor: cursor;

	ripple: RippleAnimation;
}

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

	secondaryTextFg: color;
	secondaryTextFgOver: color;
	secondarySkip: pixels;

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

	textTop: pixels;
	downTextTop: pixels;

	icon: icon;

	font: font;

	ripple: RippleAnimation;
}

Checkbox {
	textFg: color;
	textBg: color;

	checkBg: color;
	checkFg: color;
	checkFgOver: color;
	checkFgActive: color;

	width: pixels;
	height: pixels;

	textPosition: point;
	diameter: pixels;
	thickness: pixels;
	checkIcon: icon;

	font: font;
	duration: int;
}

Radiobutton {
	textFg: color;
	textBg: color;

	checkBg: color;
	checkFg: color;
	checkFgOver: color;
	checkFgActive: color;

	width: pixels;
	height: pixels;

	textPosition: point;
	diameter: pixels;
	thickness: pixels;
	checkSkip: pixels;

	font: font;
	duration: int;
}

FlatTextarea {
	textColor: color;
	bgColor: color;
	width: pixels;
	textMrg: margins;
	align: align;
	font: font;
	cursor: cursor;

	phColor: color;
	phFocusColor: color;
	phPos: point;
	phAlign: align;
	phShift: pixels;
	phDuration: int;
}

FlatInput {
	textColor: color;
	bgColor: color;
	bgActive: color;
	width: pixels;
	height: pixels;
	textMrg: margins;
	align: align;
	font: font;
	cursor: cursor;

	icon: icon;

	borderWidth: pixels;
	borderColor: color;
	borderActive: color;
	borderError: color;

	phColor: color;
	phFocusColor: color;
	phPos: point;
	phAlign: align;
	phShift: pixels;
	phDuration: int;
}

InputArea {
	textBg: color;
	textFg: color;
	textMargins: margins;

	placeholderFg: color;
	placeholderFgActive: color;
	placeholderMargins: margins;
	placeholderAlign: align;
	placeholderShift: pixels;

	duration: int;

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

	border: pixels;
	borderActive: pixels;
	borderError: pixels;

	font: font;

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

InputField {
	textBg: color;
	textFg: color;
	textMargins: margins;
	textAlign: align;

	placeholderFg: color;
	placeholderFgActive: color;
	placeholderMargins: margins;
	placeholderAlign: align;
	placeholderShift: pixels;

	duration: int;

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

	border: pixels;
	borderActive: pixels;
	borderError: pixels;

	font: font;

	width: pixels;
	height: pixels;
}

OutlineButton {
	outlineWidth: pixels;
	outlineFg: color;
	outlineFgOver: color;

	textBg: color;
	textBgOver: color;

	textFg: color;
	textFgOver: color;

	font: font;
	padding: margins;
}

IconButton {
	width: pixels;
	height: pixels;

	icon: icon;
	iconOver: icon;

	iconPosition: point;
	iconPositionDown: point;

	duration: int;

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

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

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

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

RoundImageCheckbox {
	imageRadius: pixels;
	imageSmallRadius: pixels;
	selectWidth: pixels;
	selectFg: color;
	selectDuration: int;
	checkBorder: color;
	checkBg: color;
	checkRadius: pixels;
	checkSmallRadius: pixels;
	checkIcon: icon;
}

MultiSelectItem {
	padding: margins;
	maxWidth: pixels;
	height: pixels;
	font: font;
	textBg: color;
	textFg: color;
	textActiveBg: color;
	textActiveFg: color;
	deleteFg: color;
	deleteLeft: pixels;
	deleteStroke: pixels;
	duration: int;
	minScale: double;
}

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

	item: MultiSelectItem;
	itemSkip: pixels;

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

Menu {
	skip: pixels;

	itemBg: color;
	itemBgOver: color;
	itemFg: color;
	itemFgOver: color;
	itemFgDisabled: color;
	itemFgShortcut: color;
	itemFgShortcutOver: color;
	itemFgShortcutDisabled: color;
	itemPadding: margins;
	itemIconPosition: point;
	itemFont: font;

	separatorPadding: margins;
	separatorWidth: pixels;
	separatorFg: color;

	arrow: icon;

	widthMin: pixels;
	widthMax: pixels;
}

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

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

	menu: Menu;

	duration: int;
	showDuration: int;
}

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

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

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

DropdownMenu {
	wrap: InnerDropdown;
	menu: Menu;
}

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

defaultLinkButton: LinkButton {
	color: btnYesColor;
	overColor: btnYesColor;
	downColor: btnYesHover;
	font: linkFont;
	overFont: linkOverFont;
}

defaultRippleAnimation: RippleAnimation {
	color: windowOverBg;
	showDuration: 200;
	hideDuration: 200;
}

emptyRippleAnimation: RippleAnimation {
}

defaultActiveButton: RoundButton {
	textFg: activeButtonFg;
	textFgOver: activeButtonFgOver;
	secondaryTextFg: activeButtonSecondaryFg;
	secondaryTextFgOver: activeButtonSecondaryFgOver;
	textBg: activeButtonBg;
	textBgOver: activeButtonBgOver;

	secondarySkip: 7px;

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

	textTop: 8px;
	downTextTop: 8px;

	font: semiboldFont;

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

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

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

defaultInputFont: font(17px);
defaultFlatInput: FlatInput {
	textColor: #000000;
	bgColor: #f2f2f2;
	bgActive: #ffffff;
	width: 210px;
	height: 40px;
	align: align(left);
	textMrg: margins(5px, 5px, 5px, 5px);
	font: defaultInputFont;
	cursor: cursor(text);

	borderWidth: 2px;
	borderColor: #f2f2f2;
	borderActive: #54c3f3;
	borderError: #ed8080;

	phColor: #808080;
	phFocusColor: #aaaaaa;
	phAlign: align(left);
	phPos: point(2px, 0px);
	phShift: 50px;
	phDuration: 100;
}

defaultLeftOutlineButton: OutlineButton {
	outlineWidth: 3px;
	outlineFg: windowBg;
	outlineFgOver: windowActiveBg;

	textBg: windowBg;
	textBgOver: #f2f7fa;

	textFg: windowActiveTextFg;
	textFgOver: windowActiveTextFg;

	font: normalFont;
	padding: margins(11px, 5px, 11px, 5px);
}
attentionLeftOutlineButton: OutlineButton(defaultLeftOutlineButton) {
	outlineFgOver: #e43f3f;

	textBgOver: #faf2f2;

	textFg: #d15948;
	textFgOver: #d15948;
}

defaultInputArea: InputArea {
	textBg: windowBg;
	textFg: windowTextFg;
	textMargins: margins(5px, 6px, 5px, 4px);

	placeholderFg: #999999;
	placeholderFgActive: #aaaaaa;
	placeholderMargins: margins(2px, 0px, 2px, 0px);
	placeholderAlign: align(topleft);
	placeholderShift: 50px;
	duration: 120;

	borderFg: #e0e0e0;
	borderFgActive: #62c0f7;
	borderFgError: #e48383;

	border: 1px;
	borderActive: 2px;
	borderError: 2px;

	font: boxTextFont;

	heightMin: 32px;
	heightMax: 128px;
}

defaultInputField: InputField {
	textBg: windowBg;
	textFg: windowTextFg;
	textMargins: margins(0px, 6px, 0px, 4px);
	textAlign: align(topleft);

	placeholderFg: #999999;
	placeholderFgActive: #aaaaaa;
	placeholderMargins: margins(2px, 0px, 2px, 0px);
	placeholderAlign: align(topleft);
	placeholderShift: 50px;
	duration: 120;

	borderFg: #e0e0e0;
	borderFgActive: #62c0f7;
	borderFgError: #e48383;

	border: 1px;
	borderActive: 2px;
	borderError: 2px;

	font: boxTextFont;

	height: 32px;
}

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

defaultCheckbox: Checkbox {
	textFg: windowTextFg;
	textBg: windowBg;

	checkBg: #ffffff;
	checkFg: #b3b3b3;
	checkFgOver: #b3b3b3;
	checkFgActive: windowActiveBg;

	width: -44px;
	height: 22px;

	textPosition: point(32px, 2px);
	diameter: 22px;
	thickness: 2px;
	checkIcon: defaultCheckboxIcon;

	font: normalFont;
	duration: 120;
}

defaultRadiobutton: Radiobutton {
	textFg: windowTextFg;
	textBg: windowBg;

	checkBg: #ffffff;
	checkFg: #b3b3b3;
	checkFgOver: #bfbfbf;
	checkFgActive: #4eb3ee;

	width: -46px;
	height: 22px;

	textPosition: point(34px, 0px);
	diameter: 22px;
	thickness: 2px;
	checkSkip: 65px; // * 0.1

	font: boxTextFont;
	duration: 120;
}

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

widgetSlideDuration: 200;
widgetFadeDuration: 200;

fieldSearchIcon: icon {{ "box_search", #aaaaaa, point(9px, 8px) }};
boxFieldSearchIcon: icon {{ "box_search", #aaaaaa, point(10px, 9px) }};

discreteSliderHeight: 39px;
discreteSliderTop: 5px;
discreteSliderSkip: 3px;
discreteSliderThickness: 3px;
discreteSliderActiveFg: #4bb5e7;
discreteSliderInactiveFg: #e1eaef;
discreteSliderLabelTop: 17px;
discreteSliderLabelFont: normalFont;
discreteSliderLabelFg: #1485c2;
discreteSliderDuration: 200;

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 {{ "dropdown_submenu_arrow", #373737 }};
defaultMenu: Menu {
	skip: 0px;

	itemBg: windowBg;
	itemBgOver: windowOverBg;
	itemFg: windowTextFg;
	itemFgOver: windowTextFg;
	itemFgDisabled: #cccccc;
	itemFgShortcut: #999999;
	itemFgShortcutOver: #7c99b2;
	itemFgShortcutDisabled: #cccccc;
	itemIconPosition: point(0px, 0px);
	itemPadding: margins(17px, 8px, 17px, 7px);
	itemFont: normalFont;

	separatorPadding: margins(0px, 5px, 0px, 5px);
	separatorWidth: 1px;
	separatorFg: #f1f1f1;

	arrow: defaultMenuArrow;

	widthMin: 180px;
	widthMax: 300px;
}
defaultPopupMenu: PopupMenu {
	shadow: defaultRoundShadow;
	animation: defaultPanelAnimation;

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

	menu: defaultMenu;

	duration: 150;
	showDuration: 200;
}
defaultInnerDropdown: InnerDropdown {
	padding: margins(10px, 10px, 10px, 10px);
	shadow: defaultRoundShadow;
	animation: defaultPanelAnimation;

	duration: 150;
	showDuration: 200;

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

historyToDown: icon {
	{ "history_down_shadow", #00000040 },
	{ "history_down_circle", #ffffff, point(4px, 4px) },
};

contactsAddIcon: icon {
	{ "history_down_shadow", #00000020 },
	{ "history_down_circle", activeButtonBg, point(4px, 4px) },
	{ "contacts_add", activeButtonFg, point(18px, 18px) },
};
contactsAddIconOver: icon {
	{ "history_down_shadow", #00000020 },
	{ "history_down_circle", activeButtonBgOver, point(4px, 4px) },
	{ "contacts_add", activeButtonFg, point(18px, 18px) },
};