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

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