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.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. @import "themes/light";
  2. /**
  3. * Style variables
  4. */
  5. $baseFontFamily: -apple-system, BlinkMacSystemFont, '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. $defaultToolbarSize: 50px;
  30. $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
  31. $newToolbarButtonHoverColor: rgba(255, 255, 255, 0.15);
  32. $newToolbarButtonToggleColor: rgba(255, 255, 255, 0.2);
  33. $AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
  34. $AOTToolbarButtonToggleColor: rgba(14, 20, 35, 1);
  35. $newToolbarFontSize: 24px;
  36. $newToolbarHangupFontSize: 32px;
  37. $newToolbarSize: 40px;
  38. $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
  39. $toolbarTitleFontSize: 19px;
  40. /**
  41. * Video layout
  42. */
  43. $videoThumbnailHovered: rgba(22, 94, 204, .4);
  44. $videoThumbnailSelected: #165ECC;
  45. $participantNameColor: #fff;
  46. $thumbnailPictogramColor: #fff;
  47. $dominantSpeakerBg: #165ecc;
  48. $raiseHandBg: #D6D61E;
  49. $audioLevelBg: #44A5FF;
  50. $connectionIndicatorBg: #165ecc;
  51. $audioLevelShadow: rgba(9, 36, 77, 0.9);
  52. $videoStateIndicatorColor: $defaultColor;
  53. $videoStateIndicatorBackground: $toolbarBackground;
  54. $videoStateIndicatorSize: 40px;
  55. /**
  56. * Feedback Modal
  57. */
  58. $feedbackContentBg: #fff;
  59. $feedbackInputBg: #fff;
  60. $feedbackTextColor: #000;
  61. $feedbackInputTextColor: #333;
  62. $feedbackInputPlaceholderColor: #777;
  63. /**
  64. * Modals
  65. */
  66. $modalButtonFontSize: 14px;
  67. $modalMockAKInputBackground: #fafbfc;
  68. $modalMockAKInputBorder: 1px solid #f4f5f7;
  69. $modalTextColor: #333;
  70. /**
  71. * Misc.
  72. */
  73. $borderRadius: 4px;
  74. $defaultWatermarkLink: '../images/watermark.png';
  75. $sidebarWidth: 220px;
  76. $popoverMenuPadding: 13px;
  77. $happySoftwareBackground: transparent;
  78. /**
  79. * Z-indexes. TODO: Replace this by a function.
  80. */
  81. $zindex0: 0;
  82. $zindex1: 1;
  83. $zindex2: 2;
  84. $zindex3: 3;
  85. $toolbarBackgroundZ: 4;
  86. $filmstripVideosZ: 5;
  87. $zindex10: 10;
  88. $reloadZ: 20;
  89. $poweredByZ: 100;
  90. $ringingZ: 300;
  91. $sideToolbarContainerZ: 300;
  92. $toolbarZ: 350;
  93. $tooltipsZ: 401;
  94. $dropdownMaskZ: 900;
  95. $dropdownZ: 901;
  96. $centeredVideoLabelZ: 1010;
  97. $popoverZ: 1015;
  98. $overlayZ: 1016;
  99. /**
  100. * Font Colors
  101. */
  102. $defaultFontColor: #777;
  103. $defaultLightFontColor: #F1F1F1;
  104. $defaultDarkFontColor: #000;
  105. /**
  106. * Forms
  107. */
  108. //inputs
  109. $inputControlEmColor: #f29424;
  110. //buttons
  111. $linkFontColor: #489afe;
  112. $linkHoverFontColor: #287ade;
  113. $formPadding: 16px;
  114. /**
  115. * Unsupported browser
  116. */
  117. $primaryUnsupportedBrowserButtonBgColor: #0052CC;
  118. $unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
  119. $unsupportedBrowserTextColor: #4a4a4a;
  120. $unsupportedBrowserTextSmallFontSize: 17px;
  121. $unsupportedBrowserTitleColor: #fff;
  122. $unsupportedBrowserTitleFontSize: 24px;
  123. $unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
  124. $unsupportedDesktopBrowserTextFontSize: 21px;
  125. /**
  126. * The size of the default watermark.
  127. */
  128. $watermarkWidth: 186px;
  129. $watermarkHeight: 74px;
  130. /**
  131. * Welcome page variables.
  132. */
  133. $welcomePageDescriptionColor: #fff;
  134. $welcomePageFontFamily: inherit;
  135. $welcomePageHeaderBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
  136. $welcomePageTitleColor: #fff;