jiti-meet/css/_variables.scss

174 lines
3.9 KiB
SCSS
Raw Normal View History

2016-10-31 17:21:15 +00:00
@import "themes/light";
2016-09-02 09:53:22 +00:00
/**
* Style variables
*/
$baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
2017-02-16 23:02:40 +00:00
$hangupColor: #bf2117;
$hangupFontSize: 2em;
/**
* Size variables.
*/
2016-09-15 02:20:54 +00:00
// Video layout.
2016-10-26 03:05:32 +00:00
$thumbnailToolbarHeight: 22px;
2017-01-09 21:32:25 +00:00
$thumbnailIndicatorBorder: 2px;
$thumbnailIndicatorSize: $thumbnailToolbarHeight;
$thumbnailVideoMargin: 2px;
2016-11-11 16:52:36 +00:00
$thumbnailsBorder: 2px;
$thumbnailVideoBorder: 2px;
2017-04-06 18:09:05 +00:00
$filmstripToggleButtonWidth: 17px;
2016-11-11 16:52:36 +00:00
2016-09-15 02:20:54 +00:00
2016-09-10 02:26:29 +00:00
/**
2016-09-11 21:54:32 +00:00
* Color variables.
2016-09-10 02:26:29 +00:00
*/
2016-09-12 04:36:15 +00:00
$defaultColor: #F1F1F1;
$defaultSideBarFontColor: #44A5FF;
$defaultSemiDarkColor: #ACACAC;
$defaultDarkColor: #2b3d5c;
2016-09-15 02:20:54 +00:00
2016-10-26 14:52:55 +00:00
/**
* Toolbar
*/
2017-02-16 23:02:40 +00:00
$defaultToolbarSize: 50px;
$newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.15);
$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.2);
2019-02-20 23:35:19 +00:00
$AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
$AOTToolbarButtonToggleColor: rgba(14, 20, 35, 1);
$newToolbarFontSize: 24px;
$newToolbarHangupFontSize: 32px;
$newToolbarSize: 40px;
$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
2017-02-16 23:02:40 +00:00
$toolbarTitleFontSize: 19px;
$overflowMenuBG: initial;
$overflowMenuItemHoverBG: #313D52;
$overflowMenuItemHoverColor: #B8C7E0;
$overflowMenuItemColor: #B8C7E0;
2017-01-15 18:09:02 +00:00
/**
2016-10-26 14:52:55 +00:00
* Video layout
*/
2016-10-28 17:53:50 +00:00
$videoThumbnailHovered: rgba(22, 94, 204, .4);
$videoThumbnailSelected: #165ECC;
2016-09-15 02:20:54 +00:00
$participantNameColor: #fff;
$thumbnailPictogramColor: #fff;
$dominantSpeakerBg: #165ecc;
$raiseHandBg: #D6D61E;
2016-09-28 21:31:40 +00:00
$audioLevelBg: #44A5FF;
$connectionIndicatorBg: #165ecc;
2016-09-29 05:22:05 +00:00
$audioLevelShadow: rgba(9, 36, 77, 0.9);
2016-10-19 12:31:13 +00:00
$videoStateIndicatorColor: $defaultColor;
$videoStateIndicatorBackground: $toolbarBackground;
$videoStateIndicatorSize: 40px;
2019-03-11 15:56:36 +00:00
$remoteVideoMenuIconMargin: initial;
2016-09-15 02:20:54 +00:00
2016-10-18 13:22:56 +00:00
/**
* Feedback Modal
*/
$feedbackContentBg: #fff;
$feedbackInputBg: #fff;
$feedbackTextColor: #000;
$feedbackInputTextColor: #333;
$feedbackInputPlaceholderColor: #777;
2016-09-15 02:20:54 +00:00
/**
* Modals
*/
$modalButtonFontSize: 14px;
$modalMockAKInputBackground: #fafbfc;
$modalMockAKInputBorder: 1px solid #f4f5f7;
$modalTextColor: #333;
2016-09-11 21:54:32 +00:00
/**
* Chat
*/
$chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
$chatInputSeparatorColor: #A4B8D1;
$chatLocalMessageBackgroundColor: rgba(26, 108, 180, 1);
$chatRemoteMessageBackgroundColor: rgba(240, 243, 247, 0.15);
$sidebarWidth: 375px;
/**
2016-09-11 21:54:32 +00:00
* Misc.
*/
2017-01-09 21:32:25 +00:00
$borderRadius: 4px;
$defaultWatermarkLink: '../images/watermark.png';
2016-11-23 10:32:59 +00:00
$popoverMenuPadding: 13px;
$happySoftwareBackground: transparent;
$desktopAppDragBarHeight: 25px;
/**
* Z-indexes. TODO: Replace this by a function.
*/
$zindex0: 0;
$zindex1: 1;
$zindex2: 2;
$zindex3: 3;
2019-02-20 23:35:19 +00:00
$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;
/**
2016-10-26 14:52:55 +00:00
* Font Colors
*/
$defaultFontColor: #777;
$defaultLightFontColor: #F1F1F1;
$defaultDarkFontColor: #000;
2016-09-20 07:59:12 +00:00
/**
* Forms
*/
2016-10-26 14:52:55 +00:00
//inputs
$inputControlEmColor: #f29424;
//buttons
$linkFontColor: #489afe;
2017-01-15 18:09:02 +00:00
$linkHoverFontColor: #287ade;
2017-05-19 15:12:24 +00:00
$formPadding: 16px;
2016-12-22 12:50:20 +00:00
/**
2017-02-07 14:45:51 +00:00
* Unsupported browser
2017-01-13 22:37:53 +00:00
*/
$primaryUnsupportedBrowserButtonBgColor: #0052CC;
$unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
2017-01-19 15:47:22 +00:00
$unsupportedBrowserTextColor: #4a4a4a;
2017-02-07 14:45:51 +00:00
$unsupportedBrowserTextSmallFontSize: 17px;
$unsupportedBrowserTitleColor: #fff;
$unsupportedBrowserTitleFontSize: 24px;
$unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
$unsupportedDesktopBrowserTextFontSize: 21px;
2017-08-30 19:01:41 +00:00
/**
* The size of the default watermark.
*/
$watermarkWidth: 186px;
$watermarkHeight: 74px;
/**
* Welcome page variables.
*/
$welcomePageDescriptionColor: #fff;
$welcomePageFontFamily: inherit;
$welcomePageHeaderBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
$welcomePageTitleColor: #fff;
/**
* Deep-linking page variables.
*/
$deepLinkingMobileLogoHeight: 40px;
$deepLinkingMobileHeaderBackground: #f1f2f5;