lib_ui/ui/widgets/widgets.style
2020-12-17 18:01:26 +04:00

1567 lines
30 KiB
Text

// 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;
padding: margins;
textTop: pixels;
icon: 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;
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;
}
Menu {
skip: pixels;
itemBg: color;
itemBgOver: color;
itemFg: color;
itemFgOver: color;
itemFgDisabled: color;
itemFgShortcut: color;
itemFgShortcutOver: color;
itemFgShortcutDisabled: color;
itemPadding: margins;
itemIconPosition: point;
itemStyle: TextStyle;
itemToggle: Toggle;
itemToggleOver: Toggle;
itemToggleShift: pixels;
separatorPadding: margins;
separatorWidth: pixels;
separatorFg: color;
arrow: icon;
widthMin: pixels;
widthMax: pixels;
ripple: RippleAnimation;
}
PopupMenu {
shadow: Shadow;
scrollPadding: margins;
animation: PanelAnimation;
menu: Menu;
duration: int;
showDuration: int;
}
FlatInput {
textColor: color;
bgColor: color;
bgActive: color;
width: pixels;
height: pixels;
textMrg: margins;
align: align;
font: font;
icon: icon;
borderWidth: pixels;
borderColor: color;
borderActive: color;
phColor: color;
phFocusColor: color;
phPos: point;
phAlign: align;
phShift: pixels;
phDuration: int;
}
InputField {
textBg: color;
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;
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;
}
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 {
imageRadius: pixels;
imageSmallRadius: pixels;
selectWidth: pixels;
selectFg: color;
selectDuration: int;
check: RoundCheckbox;
}
CrossAnimation {
fg: color;
size: pixels;
skip: pixels;
stroke: pixels;
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;
}
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;
font: font;
rightLabel: FlatLabel;
height: pixels;
padding: margins;
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;
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: 2px;
bottomsh: 2px;
shColor: shadowFg;
duration: 150;
hiding: 1000;
}
defaultSolidScroll: ScrollArea(defaultScrollArea) {
deltax: 5px;
width: 14px;
deltat: 6px;
deltab: 6px;
topsh: 0px;
bottomsh: 0px;
hiding: 0;
}
defaultInputFont: font(17px);
defaultFlatInput: FlatInput {
textColor: windowFg;
bgColor: filterInputInactiveBg;
bgActive: filterInputActiveBg;
width: 210px;
height: 40px;
align: align(left);
textMrg: margins(5px, 5px, 5px, 5px);
font: defaultInputFont;
borderWidth: 2px;
borderColor: filterInputInactiveBg;
borderActive: filterInputBorderFg;
phColor: placeholderFg;
phFocusColor: placeholderFgActive;
phAlign: align(left);
phPos: point(2px, 0px);
phShift: 50px;
phDuration: 100;
}
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;
skip: 65px; // * 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 {{ "dropdown_submenu_arrow", menuSubmenuArrowFg }};
defaultMenuToggle: Toggle(defaultToggle) {
untoggledFg: menuIconFg;
}
defaultMenuToggleOver: Toggle(defaultToggle) {
untoggledFg: menuIconFgOver;
}
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);
itemStyle: defaultTextStyle;
itemToggle: defaultMenuToggle;
itemToggleOver: defaultMenuToggleOver;
itemToggleShift: 0px;
separatorPadding: margins(0px, 5px, 0px, 5px);
separatorWidth: 1px;
separatorFg: menuSeparatorFg;
arrow: defaultMenuArrow;
widthMin: 180px;
widthMax: 300px;
ripple: defaultRippleAnimation;
}
defaultPopupMenu: PopupMenu {
shadow: defaultRoundShadow;
animation: defaultPanelAnimation;
scrollPadding: margins(0px, 8px, 0px, 8px);
menu: defaultMenu;
duration: 150;
showDuration: 200;
}
defaultInputField: InputField {
textBg: windowBg;
textFg: windowFg;
textMargins: margins(0px, 26px, 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;
font: boxTextFont;
menu: defaultPopupMenu;
heightMin: 52px;
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: 2px;
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;
}
fieldSearchIcon: icon {{ "box_search", menuIconFg, point(9px, 8px) }};
boxFieldSearchIcon: icon {{ "box_search", menuIconFg, point(10px, 9px) }};
defaultMultiSelectSearchCancel: CrossButton {
width: 44px;
height: 44px;
cross: CrossAnimation {
size: 36px;
skip: 12px;
stroke: 2px;
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;
}
widgetSlideDuration: 200;
widgetFadeDuration: 200;
SettingsSlider {
height: pixels;
barTop: pixels;
barSkip: pixels;
barStroke: 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;
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 {
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.;
MediaPlayerButton {
playPosition: point;
playOuter: size;
pausePosition: point;
pauseOuter: size;
pauseStroke: pixels;
cancelPosition: point;
cancelOuter: size;
cancelStroke: pixels;
rippleAreaPosition: point;
rippleAreaSize: pixels;
ripple: RippleAnimation;
}
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;
}
InfoTopBar {
height: pixels;
back: IconButton;
title: FlatLabel;
titlePosition: point;
bg: color;
mediaCancel: IconButton;
mediaActionsSkip: pixels;
mediaForward: IconButton;
mediaDelete: IconButton;
search: IconButton;
searchRow: SearchFieldRow;
highlightBg: color;
highlightDuration: int;
}
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;
font: boxTextFont;
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;
}
callMuteMainBlobMinRadius: 57px;
callMuteMainBlobMaxRadius: 63px;
callMuteMinorBlobMinRadius: 64px;
callMuteMinorBlobMaxRadius: 74px;
callMuteMajorBlobMinRadius: 67px;
callMuteMajorBlobMaxRadius: 77px;
callMuteButtonActiveIcon: icon {{ "calls/voice_unmuted_large", groupCallIconFg }};
callMuteButtonActiveInner: IconButton {
width: 136px;
height: 165px;
iconPosition: point(-1px, 50px);
icon: callMuteButtonActiveIcon;
}
callMuteButtonLabel: FlatLabel(defaultFlatLabel) {
textFg: groupCallMembersFg;
style: TextStyle(defaultTextStyle) {
font: font(14px);
linkFont: font(14px);
linkFontOver: font(14px underline);
}
}
callMuteButtonSublabel: FlatLabel(defaultFlatLabel) {
textFg: groupCallMemberNotJoinedStatus;
}
callMuteButtonSublabelSkip: 19px;
callMuteButtonActive: CallButton {
button: callMuteButtonActiveInner;
bg: groupCallLive1;
bgSize: 100px;
bgPosition: point(18px, 18px);
outerRadius: 18px;
outerBg: callAnswerBgOuter;
label: callMuteButtonLabel;
}
callMuteButtonMuted: CallButton(callMuteButtonActive) {
button: IconButton(callMuteButtonActiveInner) {
icon: icon {{ "calls/voice_muted_large", groupCallIconFg }};
}
bg: groupCallMuted1;
label: callMuteButtonLabel;
}
callMuteButtonConnecting: CallButton(callMuteButtonMuted) {
button: IconButton(callMuteButtonActiveInner) {
icon: icon {{ "calls/voice_muted_large", groupCallIconFg }};
}
bg: callIconBg;
label: callMuteButtonLabel;
}
callMuteCrossLine: CrossLineAnimation {
fg: groupCallIconFg;
icon: callMuteButtonActiveIcon;
startPosition: point(7px, 2px);
endPosition: point(34px, 30px);
stroke: 4px;
}
callConnectingRadial: InfiniteRadialAnimation(defaultInfiniteRadialAnimation) {
color: lightButtonFg;
thickness: 4px;
size: size(100px, 100px);
}
shakeShift: 4px;
// Windows specific title
windowTitleButton: IconButton {
width: 24px;
height: 21px;
iconPosition: point(0px, 0px);
}
windowTitleButtonClose: IconButton(windowTitleButton) {
width: 25px;
}
defaultWindowTitle: WindowTitle {
height: 21px;
bg: titleBg;
bgActive: titleBgActive;
fg: titleFg;
fgActive: titleFgActive;
minimize: IconButton(windowTitleButton) {
icon: icon {
{ size(24px, 21px), titleButtonBg },
{ "title_button_minimize", titleButtonFg, point(4px, 4px) },
};
iconOver: icon {
{ size(24px, 21px), titleButtonBgOver },
{ "title_button_minimize", titleButtonFgOver, point(4px, 4px) },
};
}
minimizeIconActive: icon {
{ size(24px, 21px), titleButtonBgActive },
{ "title_button_minimize", titleButtonFgActive, point(4px, 4px) },
};
minimizeIconActiveOver: icon {
{ size(24px, 21px), titleButtonBgActiveOver },
{ "title_button_minimize", titleButtonFgActiveOver, point(4px, 4px) },
};
maximize: IconButton(windowTitleButton) {
icon: icon {
{ size(24px, 21px), titleButtonBg },
{ "title_button_maximize", titleButtonFg, point(4px, 4px) },
};
iconOver: icon {
{ size(24px, 21px), titleButtonBgOver },
{ "title_button_maximize", titleButtonFgOver, point(4px, 4px) },
};
}
maximizeIconActive: icon {
{ size(24px, 21px), titleButtonBgActive },
{ "title_button_maximize", titleButtonFgActive, point(4px, 4px) },
};
maximizeIconActiveOver: icon {
{ size(24px, 21px), titleButtonBgActiveOver },
{ "title_button_maximize", titleButtonFgActiveOver, point(4px, 4px) },
};
restoreIcon: icon {
{ size(24px, 21px), titleButtonBg },
{ "title_button_restore", titleButtonFg, point(4px, 4px) },
};
restoreIconOver: icon {
{ size(24px, 21px), titleButtonBgOver },
{ "title_button_restore", titleButtonFgOver, point(4px, 4px) },
};
restoreIconActive: icon {
{ size(24px, 21px), titleButtonBgActive },
{ "title_button_restore", titleButtonFgActive, point(4px, 4px) },
};
restoreIconActiveOver: icon {
{ size(24px, 21px), titleButtonBgActiveOver },
{ "title_button_restore", titleButtonFgActiveOver, point(4px, 4px) },
};
close: IconButton(windowTitleButtonClose) {
icon: icon {
{ size(25px, 21px), titleButtonCloseBg },
{ "title_button_close", titleButtonCloseFg, point(5px, 4px) },
};
iconOver: icon {
{ size(25px, 21px), titleButtonCloseBgOver },
{ "title_button_close", titleButtonCloseFgOver, point(5px, 4px) },
};
}
closeIconActive: icon {
{ size(25px, 21px), titleButtonCloseBgActive },
{ "title_button_close", titleButtonCloseFgActive, point(5px, 4px) },
};
closeIconActiveOver: icon {
{ size(25px, 21px), titleButtonCloseBgActiveOver },
{ "title_button_close", titleButtonCloseFgActiveOver, point(5px, 4px) },
};
}
windowShadow: icon {{ "window_shadow", windowShadowFg }};
windowShadowShift: 1px;