mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2025-12-30 03:12:29 +00:00
91437c50e3
Update video thumbnail design Update design of indicators In filmstrip view move Screen Sharing indicator to the top Removed dominant speaker indicator Use ContextMenu component for the connection stats popover Combine Remove video menu and Meeting participant context menu into one component Moved some styles from SCSS to JSS Fix mobile avatars too big Fix mobile horizontal scroll Created button for Send to breakout room action
261 lines
6.4 KiB
SCSS
261 lines
6.4 KiB
SCSS
@import "themes/light";
|
|
|
|
/**
|
|
* Style variables
|
|
*/
|
|
$baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
$hangupColor:#DD3849;
|
|
$hangupHoverColor: #F25363;
|
|
$hangupFontSize: 2em;
|
|
|
|
/**
|
|
* Size variables.
|
|
*/
|
|
|
|
// Video layout.
|
|
$thumbnailVideoMargin: 2px;
|
|
$thumbnailsBorder: 2px;
|
|
$thumbnailVideoBorder: 2px;
|
|
$filmstripToggleButtonWidth: 17px;
|
|
|
|
|
|
/**
|
|
* Color variables.
|
|
*/
|
|
$defaultColor: #F1F1F1;
|
|
$defaultSideBarFontColor: #44A5FF;
|
|
$defaultSemiDarkColor: #ACACAC;
|
|
$defaultDarkColor: #2b3d5c;
|
|
$defaultWarningColor: rgb(215, 121, 118);
|
|
$participantsPaneBgColor: #141414;
|
|
$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: #131519;
|
|
$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.2);
|
|
$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.15);
|
|
$menuBG:#242528;
|
|
$newToolbarFontSize: 24px;
|
|
$newToolbarHangupFontSize: 32px;
|
|
$newToolbarSize: 48px;
|
|
$newToolbarSizeMobile: 60px;
|
|
$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
|
|
$toolbarTitleFontSize: 19px;
|
|
$overflowMenuItemColor: #fff;
|
|
$overflowMenuItemBackground: #36383C;
|
|
|
|
|
|
/**
|
|
* Video layout
|
|
*/
|
|
$participantNameColor: #fff;
|
|
$audioLevelBg: #44A5FF;
|
|
$audioLevelShadow: rgba(9, 36, 77, 0.9);
|
|
$videoStateIndicatorColor: $defaultColor;
|
|
$videoStateIndicatorBackground: $toolbarBackground;
|
|
$videoStateIndicatorSize: 40px;
|
|
|
|
/**
|
|
* 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);
|
|
$chatBackgroundColor: #131519;
|
|
$chatInputSeparatorColor: #A4B8D1;
|
|
$chatLocalMessageBackgroundColor: #484A4F;
|
|
$chatPrivateMessageBackgroundColor: rgb(153, 69, 77);
|
|
$chatRemoteMessageBackgroundColor: #242528;
|
|
$sidebarWidth: 315px;
|
|
|
|
/**
|
|
* Misc.
|
|
*/
|
|
$borderRadius: 4px;
|
|
$happySoftwareBackground: transparent;
|
|
$desktopAppDragBarHeight: 25px;
|
|
$scrollHeight: 7px;
|
|
|
|
/**
|
|
* Z-indexes. TODO: Replace this by a function.
|
|
*/
|
|
$zindex0: 0;
|
|
$zindex1: 1;
|
|
$zindex2: 2;
|
|
$zindex3: 3;
|
|
$toolbarBackgroundZ: 4;
|
|
$labelsZ: 5;
|
|
$subtitlesZ: 7;
|
|
$popoverZ: 8;
|
|
$reloadZ: 20;
|
|
$poweredByZ: 100;
|
|
$ringingZ: 300;
|
|
$sideToolbarContainerZ: 300;
|
|
$toolbarZ: 250;
|
|
$drawerZ: 351;
|
|
$tooltipsZ: 401;
|
|
$dropdownMaskZ: 900;
|
|
$dropdownZ: 901;
|
|
$centeredVideoLabelZ: 1010;
|
|
$overlayZ: 1016;
|
|
// Place filmstrip videos over toolbar in order
|
|
// to make connection info visible.
|
|
$filmstripVideosZ: $toolbarZ + 1;
|
|
|
|
|
|
/**
|
|
* 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: 71px;
|
|
$watermarkHeight: 32px;
|
|
|
|
$welcomePageWatermarkWidth: 71px;
|
|
$welcomePageWatermarkHeight: 32px;
|
|
|
|
/**
|
|
* Welcome page variables.
|
|
*/
|
|
$welcomePageDescriptionColor: #fff;
|
|
$welcomePageFontFamily: inherit;
|
|
$welcomePageBackground: none;
|
|
$welcomePageTitleColor: #fff;
|
|
|
|
$welcomePageHeaderBackground: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../images/welcome-background.png');
|
|
$welcomePageHeaderBackgroundPosition: center;
|
|
$welcomePageHeaderBackgroundRepeat: none;
|
|
$welcomePageHeaderBackgroundSize: cover;
|
|
$welcomePageHeaderPaddingBottom: 0px;
|
|
$welcomePageHeaderTitleMaxWidth: initial;
|
|
$welcomePageHeaderTextAlign: center;
|
|
|
|
$welcomePageHeaderContainerDisplay: flex;
|
|
$welcomePageHeaderContainerMargin: 104px 32px 0 32px;
|
|
|
|
$welcomePageHeaderTextTitleMarginBottom: 0;
|
|
$welcomePageHeaderTextTitleFontSize: 42px;
|
|
$welcomePageHeaderTextTitleFontWeight: normal;
|
|
$welcomePageHeaderTextTitleLineHeight: 50px;
|
|
$welcomePageHeaderTextTitleOpacity: 1;
|
|
|
|
$welcomePageEnterRoomDisplay: flex;
|
|
$welcomePageEnterRoomWidth: calc(100% - 32px);
|
|
$welcomePageEnterRoomPadding: 4px;
|
|
$welcomePageEnterRoomMargin: 0 auto;
|
|
|
|
$welcomePageTabContainerDisplay: flex;
|
|
$welcomePageTabContentDisplay: inherit;
|
|
$welcomePageTabButtonsDisplay: flex;
|
|
$welcomePageTabDisplay: block;
|
|
|
|
/**
|
|
* 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;
|
|
|
|
/**
|
|
* Prejoin / premeeting screen
|
|
*/
|
|
|
|
$prejoinDefaultContentWidth: 336px;
|