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.

_variables.scss 3.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. @import "themes/light";
  2. /**
  3. * Style variables
  4. */
  5. $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  6. $hangupColor: #bf2117;
  7. $hangupFontSize: 2em;
  8. /**
  9. * Size variables.
  10. */
  11. // Video layout.
  12. $thumbnailToolbarHeight: 22px;
  13. $thumbnailIndicatorBorder: 2px;
  14. $thumbnailIndicatorSize: $thumbnailToolbarHeight;
  15. $thumbnailVideoMargin: 2px;
  16. $thumbnailsBorder: 2px;
  17. $thumbnailVideoBorder: 2px;
  18. $filmstripToggleButtonWidth: 17px;
  19. /**
  20. * Color variables.
  21. */
  22. $defaultColor: #F1F1F1;
  23. $defaultSideBarFontColor: #44A5FF;
  24. $defaultSemiDarkColor: #ACACAC;
  25. $defaultDarkColor: #2b3d5c;
  26. /**
  27. * Toolbar
  28. */
  29. $alwaysOnTopToolbarFontSize: 1em;
  30. $alwaysOnTopToolbarSize: 30px;
  31. $defaultToolbarSize: 50px;
  32. $defaultFilmStripOnlyToolbarSize: 37px;
  33. $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
  34. $newToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
  35. $newToolbarButtonToggleColor: rgba(14, 20, 35, 1);
  36. $newToolbarFontSize: 1.9em;
  37. $newToolbarSize: 50px;
  38. $secToolbarFontSize: 1.9em;
  39. $secToolbarLineHeight: 45px;
  40. $toolbarAvatarPadding: 10px;
  41. $toolbarAvatarSize: 40px;
  42. $toolbarFontSize: 1.9em;
  43. $toolbarTitleFontSize: 19px;
  44. /**
  45. * Main controls
  46. * TODO: looks like we don't use it
  47. */
  48. $inputSemiBackground: rgba(132, 132, 132, .8);
  49. $inputLightBackground: #EBEBEB;
  50. /**
  51. * Video layout
  52. */
  53. $videoThumbnailHovered: rgba(22, 94, 204, .4);
  54. $videoThumbnailSelected: #165ECC;
  55. $participantNameColor: #fff;
  56. $thumbnailPictogramColor: #fff;
  57. $dominantSpeakerBg: #165ecc;
  58. $raiseHandBg: #D6D61E;
  59. $audioLevelBg: #44A5FF;
  60. $connectionIndicatorBg: #165ecc;
  61. $audioLevelShadow: rgba(9, 36, 77, 0.9);
  62. $videoStateIndicatorColor: $defaultColor;
  63. $videoStateIndicatorBackground: $toolbarBackground;
  64. $videoStateIndicatorSize: 40px;
  65. /**
  66. * Feedback Modal
  67. */
  68. $feedbackContentBg: #fff;
  69. $feedbackInputBg: #fff;
  70. $feedbackTextColor: #000;
  71. $feedbackInputTextColor: #333;
  72. $feedbackInputPlaceholderColor: #777;
  73. $rateStarLabelColor: #333;
  74. $rateStarDefault: #ccc;
  75. $rateStarActivity: #165ecc;
  76. $rateStarSize: 34px;
  77. /**
  78. * Modals
  79. */
  80. $modalButtonFontSize: 14px;
  81. $modalMockAKInputBackground: #fafbfc;
  82. $modalMockAKInputBorder: 1px solid #f4f5f7;
  83. $modalTextColor: #333;
  84. /**
  85. * Misc.
  86. */
  87. $borderRadius: 4px;
  88. $defaultWatermarkLink: '../images/watermark.png';
  89. $sidebarWidth: 220px;
  90. $popoverMenuPadding: 13px;
  91. $happySoftwareBackground: transparent;
  92. /**
  93. * Z-indexes. TODO: Replace this by a function.
  94. */
  95. $zindex0: 0;
  96. $zindex1: 1;
  97. $zindex2: 2;
  98. $zindex3: 3;
  99. $filmstripVideosZ: 5;
  100. $zindex10: 10;
  101. $reloadZ: 20;
  102. $poweredByZ: 100;
  103. $ringingZ: 300;
  104. $sideToolbarContainerZ: 300;
  105. $toolbarZ: 350;
  106. $tooltipsZ: 401;
  107. $dropdownMaskZ: 900;
  108. $dropdownZ: 901;
  109. $centeredVideoLabelZ: 1010;
  110. $popoverZ: 1015;
  111. $overlayZ: 1016;
  112. /**
  113. * Font Colors
  114. */
  115. $defaultFontColor: #777;
  116. $defaultLightFontColor: #F1F1F1;
  117. $defaultDarkFontColor: #000;
  118. /**
  119. * Forms
  120. */
  121. //inputs
  122. $inputControlEmColor: #f29424;
  123. //buttons
  124. $linkFontColor: #489afe;
  125. $linkHoverFontColor: #287ade;
  126. $formPadding: 16px;
  127. /**
  128. * Unsupported browser
  129. */
  130. $primaryUnsupportedBrowserButtonBgColor: #0052CC;
  131. $unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
  132. $unsupportedBrowserTextColor: #4a4a4a;
  133. $unsupportedBrowserTextSmallFontSize: 17px;
  134. $unsupportedBrowserTitleColor: #fff;
  135. $unsupportedBrowserTitleFontSize: 24px;
  136. $unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
  137. $unsupportedDesktopBrowserTextFontSize: 21px;
  138. /**
  139. * The size of the default watermark.
  140. */
  141. $watermarkWidth: 186px;
  142. $watermarkHeight: 74px;
  143. /**
  144. * Welcome page variables.
  145. */
  146. $welcomePageDescriptionColor: #fff;
  147. $welcomePageFontFamily: inherit;
  148. $welcomePageHeaderBackground: linear-gradient(#165ecc, #44A5FF);
  149. $welcomePageTitleColor: #fff;