1388 lines
26 KiB
Text
1388 lines
26 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;
|
|
}
|
|
|
|
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;
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
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;
|
|
}
|
|
|
|
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;
|
|
angle: double;
|
|
outerRadius: pixels;
|
|
outerBg: color;
|
|
label: FlatLabel;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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: 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;
|
|
|
|
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 {
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
|
|
heightMin: 52px;
|
|
heightMax: 148px;
|
|
}
|
|
|
|
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;
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
widgetSlideDuration: 200;
|
|
widgetFadeDuration: 200;
|
|
|
|
fieldSearchIcon: icon {{ "box_search", menuIconFg, point(9px, 8px) }};
|
|
boxFieldSearchIcon: icon {{ "box_search", menuIconFg, point(10px, 9px) }};
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
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;
|
|
statusPosition: point;
|
|
photoSize: pixels;
|
|
maximalWidth: pixels;
|
|
|
|
button: OutlineButton;
|
|
checkbox: RoundImageCheckbox;
|
|
statusFg: color;
|
|
statusFgOver: color;
|
|
statusFgActive: color;
|
|
}
|
|
|
|
PeerList {
|
|
padding: margins;
|
|
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;
|
|
}
|
|
statusPosition: point(68px, 31px);
|
|
photoSize: 46px;
|
|
button: defaultPeerListButton;
|
|
checkbox: defaultPeerListCheckbox;
|
|
statusFg: windowSubTextFg;
|
|
statusFgOver: windowSubTextFgOver;
|
|
statusFgActive: windowActiveTextFg;
|
|
}
|
|
|
|
defaultPeerList: PeerList {
|
|
padding: margins(0px, 0px, 0px, 0px);
|
|
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;
|
|
}
|
|
defaultSettingsButton: SettingsButton {
|
|
textFg: windowBoldFg;
|
|
textFgOver: windowBoldFgOver;
|
|
textBg: windowBg;
|
|
textBgOver: windowBgOver;
|
|
|
|
font: boxTextFont;
|
|
|
|
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;
|
|
}
|
|
|
|
// 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;
|