intro.style 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /*
  2. This file is part of Telegram Desktop,
  3. the official desktop application for the Telegram messaging service.
  4. For license and copyright information please follow this link:
  5. https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
  6. */
  7. using "ui/basic.style";
  8. using "ui/widgets/widgets.style";
  9. countryRipple: defaultRippleAnimation;
  10. introCoverHeight: 208px;
  11. introCoverMaxWidth: 880px;
  12. introCoverIconsMinSkip: 120px;
  13. introCoverLeft: icon {{ "intro_left", introCoverIconsFg }};
  14. introCoverRight: icon {{ "intro_right", introCoverIconsFg }};
  15. introCoverIcon: icon {
  16. { "intro_plane_trace", introCoverPlaneTrace },
  17. { "intro_plane_inner", introCoverPlaneInner },
  18. { "intro_plane_outer", introCoverPlaneOuter },
  19. { "intro_plane_top", introCoverPlaneTop },
  20. };
  21. introCoverIconLeft: 50px;
  22. introCoverIconTop: 46px;
  23. introSettingsSkip: 10px;
  24. introPhotoTop: 10px;
  25. introCoverTitle: FlatLabel(defaultFlatLabel) {
  26. textFg: introTitleFg;
  27. align: align(center);
  28. style: TextStyle(defaultTextStyle) {
  29. font: font(22px semibold);
  30. }
  31. }
  32. introCoverTitleTop: 136px;
  33. introCoverDescription: FlatLabel(defaultFlatLabel) {
  34. textFg: introDescriptionFg;
  35. align: align(center);
  36. style: TextStyle(defaultTextStyle) {
  37. font: font(15px);
  38. lineHeight: 24px;
  39. }
  40. }
  41. introCoverDescriptionTop: 174px;
  42. introTitle: FlatLabel(defaultFlatLabel) {
  43. textFg: introTitleFg;
  44. style: TextStyle(defaultTextStyle) {
  45. font: font(17px semibold);
  46. }
  47. }
  48. introTitleTop: 1px;
  49. introDescription: FlatLabel(defaultFlatLabel) {
  50. minWidth: 300px;
  51. textFg: introDescriptionFg;
  52. style: TextStyle(defaultTextStyle) {
  53. lineHeight: 20px;
  54. }
  55. }
  56. introDescriptionTop: 34px;
  57. introLink: defaultLinkButton;
  58. introPlaneWidth: 48px;
  59. introPlaneHeight: 38px;
  60. introHeight: 406px;
  61. introStepTopMin: 76px;
  62. introStepWidth: 380px;
  63. introNextTop: 266px;
  64. introNextSlide: 200px;
  65. introStepHeight: 384px;
  66. introContentTopAdd: 30px;
  67. introStepHeightFull: 590px;
  68. introSlideDuration: 200;
  69. introCoverDuration: 200;
  70. introNextButton: RoundButton(defaultActiveButton) {
  71. width: 300px;
  72. height: 42px;
  73. radius: 6px;
  74. textTop: 11px;
  75. style: TextStyle(semiboldTextStyle) {
  76. font: font(boxFontSize semibold);
  77. }
  78. }
  79. introFragmentIcon: icon{{ "fragment", activeButtonFg }};
  80. introFragmentIconOver: icon{{ "fragment", activeButtonFgOver }};
  81. introFragmentButton: RoundButton(introNextButton) {
  82. icon: introFragmentIcon;
  83. iconOver: introFragmentIconOver;
  84. iconPosition: point(-10px, 9px);
  85. }
  86. introStepFieldTop: 96px;
  87. introPhoneTop: 6px;
  88. introLinkTop: 24px;
  89. introCountry: InputField(defaultInputField) {
  90. textMargins: margins(3px, 27px, 3px, 6px);
  91. style: TextStyle(defaultTextStyle) {
  92. font: font(16px);
  93. }
  94. width: 300px;
  95. heightMin: 61px;
  96. }
  97. introCountryCode: InputField(introCountry) {
  98. width: 64px;
  99. textAlign: align(top);
  100. }
  101. introPhone: InputField(introCountry) {
  102. textMargins: margins(12px, 27px, 12px, 6px);
  103. width: 225px;
  104. }
  105. introQrLoginLinkTop: 368px;
  106. introCode: introCountry;
  107. introName: introCountry;
  108. introPassword: introCountry;
  109. introPasswordTop: 74px;
  110. introPasswordHintTop: 151px;
  111. introCodeDigitFont: font(20px);
  112. introCodeDigitHeight: 50px;
  113. introCodeDigitBorderWidth: 4px;
  114. introCodeDigitSkip: 10px;
  115. introPasswordHint: FlatLabel(introDescription) {
  116. textFg: windowFg;
  117. }
  118. introResetButton: RoundButton(defaultLightButton) {
  119. textFg: attentionButtonFg;
  120. textFgOver: attentionButtonFgOver;
  121. textBgOver: attentionButtonBgOver;
  122. ripple: RippleAnimation(defaultRippleAnimation) {
  123. color: attentionButtonBgRipple;
  124. }
  125. }
  126. introResetBottom: 20px;
  127. introTermsLabel: FlatLabel(defaultFlatLabel) {
  128. align: align(top);
  129. }
  130. introTermsBottom: 20px;
  131. introCountryIcon: icon {{ "intro_country_dropdown", menuIconFg }};
  132. introCountryIconPosition: point(8px, 37px);
  133. introErrorTop: 235px;
  134. introErrorBelowLinkTop: 220px;
  135. introError: FlatLabel(introDescription) {
  136. }
  137. introErrorCentered: FlatLabel(introError) {
  138. align: align(center);
  139. }
  140. introBackButton: IconButton(defaultIconButton) {
  141. width: 56px;
  142. height: 56px;
  143. icon: backButtonIcon;
  144. iconOver: backButtonIconOver;
  145. rippleAreaPosition: point(8px, 8px);
  146. rippleAreaSize: 40px;
  147. ripple: defaultRippleAnimationBgOver;
  148. }
  149. introQrTop: -18px;
  150. introQrPixel: 50px; // large enough
  151. introQrMaxSize: 180px;
  152. introQrBackgroundSkip: 12px;
  153. introQrBackgroundRadius: 8px;
  154. introQrLabelsWidth: 292px;
  155. introQrTitleWidth: 320px;
  156. introQrTitle: FlatLabel(defaultFlatLabel) {
  157. textFg: introTitleFg;
  158. align: align(top);
  159. minWidth: introQrTitleWidth;
  160. style: TextStyle(defaultTextStyle) {
  161. font: font(20px semibold);
  162. }
  163. }
  164. introQrErrorTop: 336px;
  165. introQrTitleTop: 196px;
  166. introQrStep: FlatLabel(defaultFlatLabel) {
  167. minWidth: 200px;
  168. }
  169. introQrStepsTop: 232px;
  170. introQrStepMargins: margins(20px, 8px, 0px, 0px);
  171. introQrSkipTop: 360px;
  172. introQrCenterSize: 44px;
  173. introQrPlane: icon {{ "intro_qr_plane", activeButtonFg }};