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 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. /**
  2. * Style variables
  3. */
  4. $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  5. /**
  6. * Size variables.
  7. */
  8. // Video layout.
  9. $thumbnailsBorder: 2px;
  10. /**
  11. * Toolbar
  12. */
  13. $newToolbarBackgroundColor: #131519;
  14. $newToolbarSize: 48px;
  15. $newToolbarSizeMobile: 60px;
  16. $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
  17. /**
  18. * Chat
  19. */
  20. $chatBackgroundColor: #131519;
  21. $sidebarWidth: 315px;
  22. /**
  23. * Misc.
  24. */
  25. $borderRadius: 4px;
  26. $scrollHeight: 7px;
  27. /**
  28. * Z-indexes. TODO: Replace this by a function.
  29. */
  30. $zindex0: 0;
  31. $zindex1: 1;
  32. $zindex2: 2;
  33. $zindex3: 3;
  34. $toolbarZ: 250;
  35. $watermarkZ: 253;
  36. // Place filmstrip videos over toolbar in order
  37. // to make connection info visible.
  38. $filmstripVideosZ: $toolbarZ + 1;
  39. /**
  40. * Unsupported browser
  41. */
  42. $primaryUnsupportedBrowserButtonBgColor: #0052CC;
  43. $unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
  44. $unsupportedBrowserTextColor: #4a4a4a;
  45. $unsupportedBrowserTextSmallFontSize: 1rem;
  46. $unsupportedBrowserTitleColor: #fff;
  47. $unsupportedBrowserTitleFontSize: 1.5rem;
  48. $unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
  49. $unsupportedDesktopBrowserTextFontSize: 1.25rem;
  50. /**
  51. * The size of the default watermark.
  52. */
  53. $watermarkWidth: 71px;
  54. $watermarkHeight: 32px;
  55. $welcomePageWatermarkWidth: 71px;
  56. $welcomePageWatermarkHeight: 32px;
  57. /**
  58. * Welcome page variables.
  59. */
  60. $welcomePageDescriptionColor: #fff;
  61. $welcomePageFontFamily: inherit;
  62. $welcomePageBackground: none;
  63. $welcomePageTitleColor: #fff;
  64. $welcomePageHeaderBackground: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../images/welcome-background.png');
  65. $welcomePageHeaderBackgroundPosition: center;
  66. $welcomePageHeaderBackgroundRepeat: none;
  67. $welcomePageHeaderBackgroundSize: cover;
  68. $welcomePageHeaderPadding: 1rem;
  69. $welcomePageHeaderTitleMaxWidth: initial;
  70. $welcomePageHeaderTextAlign: center;
  71. $welcomePageButtonBg: #0074E0;
  72. $welcomePageButtonHoverBg: #4687ED;
  73. $welcomePageButtonFocusOutline: #00225A;
  74. $welcomePageHeaderContainerMarginTop: 104px;
  75. $welcomePageHeaderContainerDisplay: flex;
  76. $welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0;
  77. $welcomePageHeaderTextTitleMarginBottom: 0;
  78. $welcomePageHeaderTextTitleFontSize: 2.625rem;
  79. $welcomePageHeaderTextTitleFontWeight: normal;
  80. $welcomePageHeaderTextTitleLineHeight: 50px;
  81. $welcomePageHeaderTextTitleOpacity: 1;
  82. $welcomePageEnterRoomDisplay: flex;
  83. $welcomePageEnterRoomWidth: calc(100% - 32px);
  84. $welcomePageEnterRoomPadding: 4px;
  85. $welcomePageEnterRoomMargin: 0 auto;
  86. $welcomePageTabContainerDisplay: flex;
  87. $welcomePageTabContentDisplay: inherit;
  88. $welcomePageTabButtonsDisplay: flex;
  89. $welcomePageTabDisplay: block;
  90. /**
  91. * Deep-linking page variables.
  92. */
  93. $deepLinkingMobileLogoHeight: 40px;
  94. $deepLinkingMobileHeaderBackground: #f1f2f5;
  95. $deepLinkingMobileLinkColor: inherit;
  96. $deepLinkingMobileTextFontSize: inherit;
  97. $deepLinkingMobileTextLineHeight: inherit;
  98. $deepLinkingDialInConferenceIdMargin: 10px 0 10px 0;
  99. $deepLinkingDialInConferenceIdPadding: inherit;
  100. $deepLinkingDialInConferenceIdBackgroundColor: inherit;
  101. $deepLinkingDialInConferenceIdBorderRadius: inherit;
  102. $deepLinkingDialInConferenceDescriptionFontSize: 0.8em;
  103. $deepLinkingDialInConferenceDescriptionLineHeight: inherit;
  104. $deepLinkingDialInConferenceDescriptionMarginBottom: none;
  105. $deepLinkingDialInConferencePinFontSize: inherit;
  106. $deepLinkingDialInConferencePinLineHeight: inherit;
  107. $depLinkingMobileHrefLineHeight: 2.2857142857142856em;
  108. $deepLinkingMobileHrefFontWeight: bolder;
  109. $deepLinkingMobileHrefFontSize: inherit;
  110. $deepLinkingMobileButtonHeight: 2.2857142857142856em;
  111. $deepLinkingMobileButtonLineHeight: 2.2857142857142856em;
  112. $deepLinkingMobileButtonMargin: 18px auto 10px;
  113. $deepLinkingMobileButtonWidth: auto;
  114. $deepLinkingMobileButtonFontWeight: bold;
  115. $deepLinkingMobileButtonFontSize: inherit;
  116. $primaryDeepLinkingMobileButtonBorderRadius: inherit;
  117. /**
  118. * Chrome extension banner variables.
  119. */
  120. $chromeExtensionBannerDontShowAgainDisplay: flex;
  121. $chromeExtensionBannerHeight: 128px;
  122. $chromeExtensionBannerTop: 80px;
  123. $chromeExtensionBannerRight: 16px;
  124. $chromeExtensionBannerTopInMeeting: 10px;
  125. $chromeExtensionBannerRightInMeeeting: 10px;
  126. /**
  127. * media type thresholds
  128. */
  129. $verySmallScreen: 500px;
  130. /**
  131. * Prejoin / premeeting screen
  132. */
  133. $prejoinDefaultContentWidth: 336px;