285 lines
7.6 KiB
SCSS
285 lines
7.6 KiB
SCSS
@import "themes/light";
|
|
|
|
/**
|
|
* Style variables
|
|
*/
|
|
$baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
$hangupColor: #bf2117;
|
|
$hangupFontSize: 2em;
|
|
|
|
/**
|
|
* Size variables.
|
|
*/
|
|
|
|
// Video layout.
|
|
$thumbnailToolbarHeight: 22px;
|
|
$thumbnailIndicatorBorder: 2px;
|
|
$thumbnailIndicatorSize: $thumbnailToolbarHeight;
|
|
$thumbnailVideoMargin: 2px;
|
|
$thumbnailsBorder: 2px;
|
|
$thumbnailVideoBorder: 2px;
|
|
$filmstripToggleButtonWidth: 17px;
|
|
|
|
|
|
/**
|
|
* Color variables.
|
|
*/
|
|
$defaultColor: #F1F1F1;
|
|
$defaultSideBarFontColor: #44A5FF;
|
|
$defaultSemiDarkColor: #ACACAC;
|
|
$defaultDarkColor: #2b3d5c;
|
|
$defaultWarningColor: rgb(215, 121, 118);
|
|
$presence-available: rgb(110, 176, 5);
|
|
$presence-away: rgb(250, 201, 20);
|
|
$presence-busy: rgb(233, 0, 27);
|
|
$presence-idle: rgb(172, 172, 172);
|
|
|
|
/**
|
|
* Toolbar
|
|
*/
|
|
$newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
|
|
$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.15);
|
|
$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.2);
|
|
$AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
|
|
$AOTToolbarButtonToggleColor: rgba(14, 20, 35, 1);
|
|
$newToolbarFontSize: 24px;
|
|
$newToolbarHangupFontSize: 32px;
|
|
$newToolbarSize: 40px;
|
|
$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
|
|
$toolbarTitleFontSize: 19px;
|
|
$overflowMenuBG: initial;
|
|
$overflowMenuItemHoverBG: #313D52;
|
|
$overflowMenuItemHoverColor: #B8C7E0;
|
|
$overflowMenuItemColor: #B8C7E0;
|
|
|
|
/**
|
|
* Video layout
|
|
*/
|
|
$videoThumbnailHovered: rgba(22, 94, 204, .4);
|
|
$videoThumbnailSelected: #165ECC;
|
|
$participantNameColor: #fff;
|
|
$thumbnailPictogramColor: #fff;
|
|
$dominantSpeakerBg: #165ecc;
|
|
$raiseHandBg: #D6D61E;
|
|
$audioLevelBg: #44A5FF;
|
|
$connectionIndicatorBg: #165ecc;
|
|
$audioLevelShadow: rgba(9, 36, 77, 0.9);
|
|
$videoStateIndicatorColor: $defaultColor;
|
|
$videoStateIndicatorBackground: $toolbarBackground;
|
|
$videoStateIndicatorSize: 40px;
|
|
$remoteVideoMenuIconMargin: initial;
|
|
|
|
/**
|
|
* Feedback Modal
|
|
*/
|
|
$feedbackContentBg: #fff;
|
|
$feedbackInputBg: #fff;
|
|
$feedbackTextColor: #000;
|
|
$feedbackInputTextColor: #333;
|
|
$feedbackInputPlaceholderColor: #777;
|
|
|
|
/**
|
|
* Modals
|
|
*/
|
|
$modalButtonFontSize: 14px;
|
|
$modalMockAKInputBackground: #fafbfc;
|
|
$modalMockAKInputBorder: 1px solid #f4f5f7;
|
|
$modalTextColor: #333;
|
|
|
|
/**
|
|
* Chat
|
|
*/
|
|
$chatActionsSeparatorColor: rgb(173, 105, 112);
|
|
$chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
|
|
$chatInputSeparatorColor: #A4B8D1;
|
|
$chatLocalMessageBackgroundColor: rgb(4, 98, 178);
|
|
$chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
|
|
$chatRemoteMessageBackgroundColor: rgb(86, 101, 114);
|
|
$sidebarWidth: 375px;
|
|
|
|
/**
|
|
* Misc.
|
|
*/
|
|
$borderRadius: 4px;
|
|
$popoverMenuPadding: 13px;
|
|
$happySoftwareBackground: transparent;
|
|
$desktopAppDragBarHeight: 25px;
|
|
$scrollHeight: 7px;
|
|
|
|
/**
|
|
* Z-indexes. TODO: Replace this by a function.
|
|
*/
|
|
$zindex0: 0;
|
|
$zindex1: 1;
|
|
$zindex2: 2;
|
|
$zindex3: 3;
|
|
$toolbarBackgroundZ: 4;
|
|
$filmstripVideosZ: 5;
|
|
$zindex10: 10;
|
|
$reloadZ: 20;
|
|
$poweredByZ: 100;
|
|
$ringingZ: 300;
|
|
$sideToolbarContainerZ: 300;
|
|
$toolbarZ: 350;
|
|
$tooltipsZ: 401;
|
|
$dropdownMaskZ: 900;
|
|
$dropdownZ: 901;
|
|
$centeredVideoLabelZ: 1010;
|
|
$popoverZ: 1015;
|
|
$overlayZ: 1016;
|
|
|
|
|
|
/**
|
|
* Font Colors
|
|
*/
|
|
$defaultFontColor: #777;
|
|
$defaultLightFontColor: #F1F1F1;
|
|
$defaultDarkFontColor: #000;
|
|
|
|
/**
|
|
* Forms
|
|
*/
|
|
//inputs
|
|
$inputControlEmColor: #f29424;
|
|
//buttons
|
|
$linkFontColor: #489afe;
|
|
$linkHoverFontColor: #287ade;
|
|
$formPadding: 16px;
|
|
|
|
/**
|
|
* Unsupported browser
|
|
*/
|
|
$primaryUnsupportedBrowserButtonBgColor: #0052CC;
|
|
$unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
|
|
$unsupportedBrowserTextColor: #4a4a4a;
|
|
$unsupportedBrowserTextSmallFontSize: 17px;
|
|
$unsupportedBrowserTitleColor: #fff;
|
|
$unsupportedBrowserTitleFontSize: 24px;
|
|
$unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
|
|
$unsupportedDesktopBrowserTextFontSize: 21px;
|
|
|
|
/**
|
|
* The size of the default watermark.
|
|
*/
|
|
$watermarkWidth: 186px;
|
|
$watermarkHeight: 74px;
|
|
|
|
$welcomePageWatermarkWidth: 186px;
|
|
$welcomePageWatermarkHeight: 74px;
|
|
|
|
/**
|
|
* Welcome page variables.
|
|
*/
|
|
$welcomePageDescriptionColor: #fff;
|
|
$welcomePageFontFamily: inherit;
|
|
$welcomePageBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
|
|
$welcomePageTitleColor: #fff;
|
|
|
|
$welcomePageHeaderBackground: none;
|
|
$welcomePageHeaderBackgroundSmall: none;
|
|
$welcomePageHeaderBackgroundPosition: none;
|
|
$welcomePageHeaderBackgroundRepeat: none;
|
|
$welcomePageHeaderBackgroundSize: none;
|
|
$welcomePageHeaderPaddingBottom: 0px;
|
|
$welcomePageHeaderMinHeight: fit-content;
|
|
|
|
$welcomePageHeaderTextMarginTop: 35px;
|
|
$welcomePageHeaderTextMarginBottom: 35px;
|
|
$welcomePageHeaderTextDisplay: flex;
|
|
$welcomePageHeaderTextWidth: 650px;
|
|
|
|
$welcomePageHeaderTextTitleMarginBottom: 16px;
|
|
$welcomePageHeaderTextTitleFontSize: 2.5rem;
|
|
$welcomePageHeaderTextTitleFontWeight: 500;
|
|
$welcomePageHeaderTextTitleLineHeight: 1.18;
|
|
$welcomePageHeaderTextTitleOpacity: 1;
|
|
|
|
$welcomePageHeaderTextDescriptionDisplay: inherit;
|
|
$welcomePageHeaderTextDescriptionFontSize: 1rem;
|
|
$welcomePageHeaderTextDescriptionFontWeight: 400;
|
|
$welcomePageHeaderTextDescriptionLineHeight: 24px;
|
|
$welcomePageHeaderTextDescriptionMarginBottom: 20px;
|
|
$welcomePageHeaderTextDescriptionAlignSelf: inherit;
|
|
|
|
$welcomePageEnterRoomDisplay: flex;
|
|
$welcomePageEnterRoomWidth: 680px;
|
|
$welcomePageEnterRoomPadding: 25px 30px;
|
|
$welcomePageEnterRoomBorderRadius: 0px;
|
|
|
|
$welcomePageEnterRoomInputContainerPadding: 0 8px 5px 0px;
|
|
$welcomePageEnterRoomInputContainerBorderWidth: 0px 0px 2px 0px;
|
|
$welcomePageEnterRoomInputContainerBorderStyle: solid;
|
|
$welcomePageEnterRoomInputContainerBorderImage: linear-gradient(to right, #dee1e6, #fff) 1;
|
|
|
|
$welcomePageEnterRoomTitleDisplay: inherit;
|
|
|
|
$welcomePageTabContainerDisplay: flex;
|
|
$welcomePageTabContentDisplay: inherit;
|
|
$welcomePageTabButtonsDisplay: flex;
|
|
$welcomePageTabDisplay: block;
|
|
|
|
$welcomePageButtonWidth: 51px;
|
|
$welcomePageButtonMinWidth: inherit;
|
|
$welcomePageButtonFontSize: 14px;
|
|
$welcomePageButtonHeight: 35px;
|
|
$welcomePageButtonFontWeight: inherit;
|
|
$welcomePageButtonBorderRadius: 4px;
|
|
$welcomePageButtonLineHeight: 35px;
|
|
|
|
/**
|
|
* Deep-linking page variables.
|
|
*/
|
|
$deepLinkingMobileLogoHeight: 40px;
|
|
|
|
$deepLinkingMobileHeaderBackground: #f1f2f5;
|
|
|
|
$deepLinkingMobileLinkColor: inherit;
|
|
$deepLinkingMobileTextFontSize: inherit;
|
|
$deepLinkingMobileTextLineHeight: inherit;
|
|
|
|
$deepLinkingDialInConferenceIdMargin: 10px 0 10px 0;
|
|
$deepLinkingDialInConferenceIdPadding: inherit;
|
|
$deepLinkingDialInConferenceIdBackgroundColor: inherit;
|
|
$deepLinkingDialInConferenceIdBorderRadius: inherit;
|
|
|
|
$deepLinkingDialInConferenceNameFontSize: inherit;
|
|
$deepLinkingDialInConferenceNameLineHeight: inherit;
|
|
$deepLinkingDialInConferenceNameMarginBottom: none;
|
|
$deepLinkingDialInConferenceNameFontWeight: inherit;
|
|
|
|
$deepLinkingDialInConferenceDescriptionFontSize: 0.8em;
|
|
$deepLinkingDialInConferenceDescriptionLineHeight: inherit;
|
|
$deepLinkingDialInConferenceDescriptionMarginBottom: none;
|
|
|
|
$deepLinkingDialInConferencePinFontSize: inherit;
|
|
$deepLinkingDialInConferencePinLineHeight: inherit;
|
|
|
|
$depLinkingMobileHrefLineHeight: 2.2857142857142856em;
|
|
$deepLinkingMobileHrefFontWeight: bolder;
|
|
$deepLinkingMobileHrefFontSize: inherit;
|
|
|
|
$deepLinkingMobileButtonHeight: 2.2857142857142856em;
|
|
$deepLinkingMobileButtonLineHeight: 2.2857142857142856em;
|
|
$deepLinkingMobileButtonMargin: 18px auto 10px;
|
|
$deepLinkingMobileButtonWidth: auto;
|
|
$deepLinkingMobileButtonFontWeight: bold;
|
|
$deepLinkingMobileButtonFontSize: inherit;
|
|
|
|
$primaryDeepLinkingMobileButtonBorderRadius: inherit;
|
|
|
|
/**
|
|
* Chrome extension banner variables.
|
|
*/
|
|
$chromeExtensionBannerDontShowAgainDisplay: flex;
|
|
$chromeExtensionBannerHeight: 128px;
|
|
$chromeExtensionBannerTop: 80px;
|
|
$chromeExtensionBannerRight: 16px;
|
|
$chromeExtensionBannerTopInMeeting: 10px;
|
|
$chromeExtensionBannerRightInMeeeting: 10px;
|
|
|
|
/**
|
|
* media type thresholds
|
|
*/
|
|
$smallScreen: 700px;
|
|
$verySmallScreen: 500px;
|