You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

styles.js 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. import {
  2. BoxModel,
  3. ColorPalette,
  4. createStyleSheet,
  5. fixAndroidViewClipping
  6. } from '../../base/styles';
  7. /**
  8. * The default color of text on the WelcomePage.
  9. */
  10. const TEXT_COLOR = ColorPalette.white;
  11. /**
  12. * The styles of the React <tt>Components</tt> of the feature welcome including
  13. * <tt>WelcomePage</tt> and <tt>BlankPage</tt>.
  14. */
  15. export default createStyleSheet({
  16. /**
  17. * The style of the top-level container of <tt>BlankPage</tt>.
  18. */
  19. blankPage: {
  20. },
  21. /**
  22. * Join button style.
  23. */
  24. button: {
  25. backgroundColor: ColorPalette.white,
  26. borderColor: ColorPalette.white,
  27. borderRadius: 8,
  28. borderWidth: 1,
  29. height: 45,
  30. justifyContent: 'center',
  31. marginBottom: BoxModel.margin,
  32. marginTop: BoxModel.margin
  33. },
  34. /**
  35. * Join button text style.
  36. */
  37. buttonText: {
  38. alignSelf: 'center',
  39. color: '#00ccff',
  40. fontSize: 18
  41. },
  42. /**
  43. * The style of the legal-related content such as (hyper)links to Privacy
  44. * Policy and Terms of Service displayed on the WelcomePage.
  45. */
  46. legaleseContainer: {
  47. alignItems: 'center',
  48. flex: 0,
  49. flexDirection: 'row',
  50. justifyContent: 'center'
  51. },
  52. /**
  53. * The style of a piece of legal-related content such as a (hyper)link to
  54. * Privacy Policy or Terms of Service displayed on the WelcomePage.
  55. */
  56. legaleseItem: {
  57. color: TEXT_COLOR,
  58. fontSize: 12,
  59. margin: BoxModel.margin
  60. },
  61. /**
  62. * The style of the <tt>View</tt> displayed over the local video by
  63. * <tt>LocalVideoTrackUnderlay</tt>. The latter is thought of as the
  64. * background (content). The former is thought of as the foreground
  65. * (content).
  66. */
  67. localVideoTrackOverlay: {
  68. backgroundColor: 'transparent',
  69. bottom: 0,
  70. flex: 1,
  71. flexDirection: 'column',
  72. justifyContent: 'center',
  73. left: 0,
  74. position: 'absolute',
  75. right: 0,
  76. top: 0
  77. },
  78. /**
  79. * The style of the top-level container/<tt>View</tt> of
  80. * <tt>LocalVideoTrackUnderlay</tt>.
  81. */
  82. localVideoTrackUnderlay: fixAndroidViewClipping({
  83. alignItems: 'center',
  84. alignSelf: 'stretch',
  85. backgroundColor: 'transparent',
  86. flex: 1,
  87. justifyContent: 'center'
  88. }),
  89. /**
  90. * Container for room name input box and 'join' button.
  91. */
  92. roomContainer: {
  93. flex: 1,
  94. flexDirection: 'column',
  95. justifyContent: 'center',
  96. margin: 3 * BoxModel.margin
  97. },
  98. /**
  99. * Room input style.
  100. */
  101. textInput: {
  102. backgroundColor: 'transparent',
  103. borderColor: ColorPalette.white,
  104. borderRadius: 8,
  105. borderWidth: 1,
  106. color: TEXT_COLOR,
  107. fontSize: 23,
  108. height: 50,
  109. padding: 4,
  110. textAlign: 'center'
  111. },
  112. /**
  113. * Application title style.
  114. */
  115. title: {
  116. color: TEXT_COLOR,
  117. fontSize: 25,
  118. marginBottom: 2 * BoxModel.margin,
  119. textAlign: 'center'
  120. },
  121. /**
  122. * The style of the top-level container of <tt>WelcomePage</tt>.
  123. */
  124. welcomePage: {
  125. backgroundColor: ColorPalette.blue
  126. }
  127. });