diff --git a/css/_base.scss b/css/_base.scss index 08483f461dc4..6953cb35954f 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -31,8 +31,8 @@ body { font-size: 12px; font-weight: 400; overflow: hidden; - color: $defaultColor; - background: $defaultBackground; + color: #F1F1F1; + background: #040404; // should match DEFAULT_BACKGROUND from interface_config } /** @@ -94,7 +94,7 @@ input[type='text'], input[type='password'], textarea { button { color: #FFF; - background-color: $buttonBackground; + background-color: #44A5FF; border-radius: $borderRadius; &.no-icon { @@ -145,7 +145,7 @@ form { font-size: 11pt; color: rgba(255,255,255,.50); text-decoration: none; - z-index: $poweredByZ; + z-index: 100; } .connected { diff --git a/css/_chat.scss b/css/_chat.scss index 3bddd35fb8c0..c06fdf4fbdf1 100644 --- a/css/_chat.scss +++ b/css/_chat.scss @@ -5,7 +5,7 @@ position: relative; transition: width .16s ease-in-out; width: $sidebarWidth; - z-index: $sideToolbarContainerZ; + z-index: 300; @media (max-width: 580px) { height: 100vh; @@ -253,7 +253,7 @@ .chatmessage { &.localuser { - background-color: $chatLocalMessageBackgroundColor; + background-color: #484A4F; border-radius: 6px 0px 6px 6px; } @@ -324,7 +324,7 @@ #smileysContainer { background-color: $chatBackgroundColor; - border-top: 1px solid $chatInputSeparatorColor; + border-top: 1px solid #A4B8D1; } } @@ -340,7 +340,7 @@ } .smileyContainer:hover { - background-color: $newToolbarButtonToggleColor; + background-color: rgba(255, 255, 255, 0.15); border-radius: 5px; cursor: pointer; } diff --git a/css/_drawer.scss b/css/_drawer.scss index 00c685aec6cc..d57108062e76 100644 --- a/css/_drawer.scss +++ b/css/_drawer.scss @@ -3,17 +3,17 @@ left: 0; right: 0; bottom: 0; - z-index: $drawerZ; + z-index: 351; border-radius: 16px 16px 0 0; &.notification-portal { - z-index: $dropdownZ; + z-index: 901; } } .drawer-portal::after { content: ''; - background-color: $participantsPaneBgColor; + background-color: #141414; margin-bottom: env(safe-area-inset-bottom, 0); } @@ -54,7 +54,7 @@ padding: 12px 16px; align-items: center; - color: $overflowMenuItemColor; + color: #fff; cursor: pointer; display: flex; font-size: 16px; diff --git a/css/_inlay.scss b/css/_inlay.scss index a52d29597536..9e61aace9b59 100644 --- a/css/_inlay.scss +++ b/css/_inlay.scss @@ -3,20 +3,20 @@ @include border-radius(4px); padding: 40px 38px 44px; color: #fff; - background: $inlayColorBg; + background: lighten(#474747, 20%); text-align: center; &__title { margin: 17px 0; padding-bottom: 17px; - color: $popoverFontColor; + color: #ffffff; font-size: 21px; letter-spacing: 0.3px; - border-bottom: 1px solid $inlayBorderColor; + border-bottom: 1px solid lighten(#FFFFFF, 10%); } &__text { - color: $popoverFontColor; + color: #ffffff; display: block; margin-top: 22px; font-size: 16px; diff --git a/css/_participants-pane.scss b/css/_participants-pane.scss index de461afbf49a..583ff31b999f 100644 --- a/css/_participants-pane.scss +++ b/css/_participants-pane.scss @@ -1,5 +1,5 @@ .participants_pane { - background-color: $participantsPaneBgColor; + background-color: #141414; flex-shrink: 0; overflow: hidden; position: relative; diff --git a/css/_popover.scss b/css/_popover.scss index 3dd24973dc57..c1525901a16a 100644 --- a/css/_popover.scss +++ b/css/_popover.scss @@ -1,5 +1,5 @@ .popover { - z-index: $popoverZ; + z-index: 8; .popover-content { position: relative; diff --git a/css/_reactions-menu.scss b/css/_reactions-menu.scss index 25e2d247e31c..ec93589b25cc 100644 --- a/css/_reactions-menu.scss +++ b/css/_reactions-menu.scss @@ -2,7 +2,7 @@ .reactions-menu { width: 280px; - background: $menuBG; + background: #242528; box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25); border-radius: 6px; padding: 16px; diff --git a/css/_recording.scss b/css/_recording.scss index 2b06bf80ec26..5835432c4f4f 100644 --- a/css/_recording.scss +++ b/css/_recording.scss @@ -186,7 +186,7 @@ } .google-error { - color: $errorColor; + color: #c61600; } .google-panel { diff --git a/css/_redirect_page.scss b/css/_redirect_page.scss index 1d3077cca95b..2401fe9d609c 100644 --- a/css/_redirect_page.scss +++ b/css/_redirect_page.scss @@ -5,7 +5,7 @@ font-size: 24px; .thanks-msg { - border-bottom: 1px solid $selectBg; + border-bottom: 1px solid #FFFFFF; padding-left: 30px; padding-right: 30px; p { @@ -28,7 +28,7 @@ width: 120px; height: 86px; margin: 0 auto; - background: $happySoftwareBackground; + background: transparent; } } } diff --git a/css/_toolbars.scss b/css/_toolbars.scss index e771f3d67f12..a90020e29126 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -2,10 +2,10 @@ * Round badge. */ .badge-round { - background-color: $toolbarBadgeBackground; + background-color: #165ECC; border-radius: 50%; box-sizing: border-box; - color: $toolbarBadgeColor; + color: #FFFFFF; // Do not inherit the font-family from the toolbar button, because it's an // icon style. font-family: $baseFontFamily; @@ -192,7 +192,7 @@ div.hangup-menu-button { background: none; &:hover { - background: $newToolbarButtonHoverColor; + background: rgba(255, 255, 255, 0.2); } } diff --git a/css/_transcription-subtitles.scss b/css/_transcription-subtitles.scss index 612cf26422da..9a125a308168 100644 --- a/css/_transcription-subtitles.scss +++ b/css/_transcription-subtitles.scss @@ -13,7 +13,7 @@ 1px 0px 1px rgba(0,0,0,0.3), 0px 0px 1px rgba(0,0,0,0.3); transform: translateX(-50%); - z-index: $subtitlesZ; + z-index: 7; &.lifted { // Lift subtitle above toolbar+dominant speaker box. diff --git a/css/_variables.scss b/css/_variables.scss index ea481108deba..4115044bf860 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -1,5 +1,3 @@ -@import "themes/light"; - /** * Style variables */ @@ -10,83 +8,26 @@ $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica */ // 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; /** * 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; - - -/** - * 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; -$chatLobbyActionsSeparatorColor: #6A50D3; -$chatLocalMessageBackgroundColor: #484A4F; -$chatPrivateMessageBackgroundColor: rgb(153, 69, 77); -$chatRemoteMessageBackgroundColor: #242528; $sidebarWidth: 315px; /** * Misc. */ $borderRadius: 4px; -$happySoftwareBackground: transparent; -$desktopAppDragBarHeight: 25px; $scrollHeight: 7px; /** @@ -96,38 +37,11 @@ $zindex0: 0; $zindex1: 1; $zindex2: 2; $zindex3: 3; -$subtitlesZ: 7; -$popoverZ: 8; -$reloadZ: 20; -$poweredByZ: 100; -$ringingZ: 300; -$sideToolbarContainerZ: 300; $toolbarZ: 250; -$drawerZ: 351; -$dropdownZ: 901; -$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 */ diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index c380eb42a7d8..2b75edd019b6 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -189,7 +189,7 @@ opacity: 0; display: inline-block; @include circle(5px); - background: $audioLevelShadow; + background: rgba(9, 36, 77, 0.9); margin: 1px 0 1px 0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; @@ -205,7 +205,7 @@ border-radius: 50%; -webkit-filter: blur(0.5px); filter: blur(0.5px); - background: $audioLevelBg; + background: #44A5FF; } } @@ -223,7 +223,7 @@ background-clip: padding-box; -webkit-border-radius: 5px; -webkit-background-clip: padding-box; - z-index: $reloadZ; /*The reload button should appear on top of the header!*/ + z-index: 20; /*The reload button should appear on top of the header!*/ } #dominantSpeaker { @@ -365,7 +365,7 @@ } .presence-label { - color: $participantNameColor; + color: #fff; font-size: 12px; font-weight: 100; left: 0; diff --git a/css/_welcome_page.scss b/css/_welcome_page.scss index f401285ce9f7..fcd8f72a3e47 100644 --- a/css/_welcome_page.scss +++ b/css/_welcome_page.scss @@ -63,7 +63,7 @@ body.welcome-page { .insecure-room-name-warning { align-items: center; - color: $defaultWarningColor; + color: rgb(215, 121, 118); font-weight: 600; display: flex; flex-direction: row; @@ -75,7 +75,7 @@ body.welcome-page { margin-right: 15px; svg { - fill: $defaultWarningColor; + fill: rgb(215, 121, 118); & > *:first-child { fill: none !important; diff --git a/css/components/_input-slider.scss b/css/components/_input-slider.scss index 80263c6f9a96..689f108aabad 100644 --- a/css/components/_input-slider.scss +++ b/css/components/_input-slider.scss @@ -19,7 +19,7 @@ input[type=range]:focus { * Include the mixin for a range input style. */ @include slider { - background: $sliderTrackBackground; + background: #474747; border: none; border-radius: 3px; cursor: pointer; @@ -33,9 +33,9 @@ input[type=range]:focus { @include slider-thumb { -webkit-appearance: none; background: white; - border: 1px solid $sliderThumbBackground; + border: 1px solid #3572b0; border-radius: 50%; - box-shadow: 0px 0px 1px $sliderThumbBackground; + box-shadow: 0px 0px 1px #3572b0; cursor: pointer; height: 14px; margin-top: -4px; diff --git a/css/deep-linking/_no-mobile-app.scss b/css/deep-linking/_no-mobile-app.scss index 7398a86e13f4..128ca3c6def2 100644 --- a/css/deep-linking/_no-mobile-app.scss +++ b/css/deep-linking/_no-mobile-app.scss @@ -5,7 +5,7 @@ width: auto; &__title { - border-bottom: 1px solid $inlayBorderColor; + border-bottom: 1px solid lighten(#FFFFFF, 10%); color: $unsupportedBrowserTitleColor; font-weight: 400; letter-spacing: 0.5px; diff --git a/css/filmstrip/_small_video.scss b/css/filmstrip/_small_video.scss index bffd1a50c984..4671a065d801 100644 --- a/css/filmstrip/_small_video.scss +++ b/css/filmstrip/_small_video.scss @@ -2,9 +2,9 @@ display: inline-block; position: relative; background-size: contain; - border: $thumbnailVideoBorder solid transparent; + border: 2px solid transparent; border-radius: $borderRadius; - margin: 0 $thumbnailVideoMargin; + margin: 0 2px; &:hover { cursor: hand; diff --git a/css/modals/_dialog.scss b/css/modals/_dialog.scss index a5f0c5b26c72..4432272d1938 100644 --- a/css/modals/_dialog.scss +++ b/css/modals/_dialog.scss @@ -2,8 +2,8 @@ margin-top: 5px !important; .input-control { - background: $modalMockAKInputBackground; - border: $modalMockAKInputBorder; + background: #fafbfc; + border: 1px solid #f4f5f7; color: inherit; } diff --git a/css/overlay/_overlay.scss b/css/overlay/_overlay.scss index 777c814d510d..67eae8ff3a21 100644 --- a/css/overlay/_overlay.scss +++ b/css/overlay/_overlay.scss @@ -6,12 +6,12 @@ width: 100%; height: 100%; position: fixed; - z-index: $overlayZ; - background: $defaultBackground; + z-index: 1016; + background: #474747; } &__container-light { - @include transparentBg($defaultBackground, 0.7); + @include transparentBg(#474747, 0.7); } &__content { diff --git a/css/reload_overlay/_reload_overlay.scss b/css/reload_overlay/_reload_overlay.scss index fbe6bb974333..1356e4ba89cb 100644 --- a/css/reload_overlay/_reload_overlay.scss +++ b/css/reload_overlay/_reload_overlay.scss @@ -19,7 +19,7 @@ width: 180px; .progress-indicator-fill { - background: $reloadProgressBarBg; + background: #0074E0; height: 100%; transition: width .5s; } diff --git a/css/ringing/_ringing.scss b/css/ringing/_ringing.scss index a0a1e475377a..c05e3fd54768 100644 --- a/css/ringing/_ringing.scss +++ b/css/ringing/_ringing.scss @@ -5,11 +5,11 @@ width: 100%; height: 100%; position: fixed; - z-index: $ringingZ; + z-index: 300; @include transparentBg(#283447, 0.95); &.solidBG { - background: $defaultBackground; + background: #040404; } &__content { diff --git a/css/themes/_light.scss b/css/themes/_light.scss deleted file mode 100644 index 2606648f8524..000000000000 --- a/css/themes/_light.scss +++ /dev/null @@ -1,77 +0,0 @@ -/** - * Base - */ -$baseLight: #FFFFFF; - -/** -* Controls -*/ -$sliderTrackBackground: #474747; -$sliderThumbBackground: #3572b0; - -/** -* Buttons -*/ -$buttonBackground: #44A5FF; -$buttonHoverBackground: #2c4062; -$buttonBorder: transparent; -$buttonHoverBorder: transparent; -$buttonColor: #eceef1; - -$buttonLightBackground: #f5f5f5; -$buttonLightHoverBackground: #e9e9e9; -$buttonLightBorder: #ccc; -$buttonLightHoverBorder: #999; - -$buttonLinkBackground: transparent; -$buttonLinkColor: #0090e8; - -$primaryButtonBackground: #3572b0; -$primaryButtonHoverBackground: #2a67a5; -$primaryButtonColor: $baseLight; -$primaryButtonFontWeight: 400; - -$buttonShadowColor: #192d4f; - -$overlayButtonBg: #0074E0; - -/** -* Color variables -**/ -$defaultBackground: #474747; -$reloadProgressBarBg: #0074E0; - -/** - * Dialog colors - **/ -$dialogErrorText: #344563; - -/** -* Inlay colors -**/ -$inlayColorBg: lighten($defaultBackground, 20%); -$inlayBorderColor: lighten($baseLight, 10%); - -// Main controls -$placeHolderColor: #a7a7a7; -$readOnlyInputColor: #a7a7a7; -$defaultDarkSelectionColor: #ccc; -$buttonFontWeight: 400; -$labelFontWeight: 400; -$linkFontColor: #3572b0; -$linkHoverFontColor: darken(#3572b0, 10%); -$errorColor: #c61600; - - -// Popover colors -$popoverFontColor: #ffffff !important; - -// Toolbar -$toolbarBackground: rgba(0, 0, 0, 0.5); -$toolbarBadgeBackground: #165ECC; -$toolbarBadgeColor: #FFFFFF; - -/** - * Forms - */ -$selectBg: $baseLight; diff --git a/css/unsupported-browser/_unsupported-desktop-browser.scss b/css/unsupported-browser/_unsupported-desktop-browser.scss index 9cd83dc1f30f..ae6a328749c8 100644 --- a/css/unsupported-browser/_unsupported-desktop-browser.scss +++ b/css/unsupported-browser/_unsupported-desktop-browser.scss @@ -25,11 +25,11 @@ } &__link { - color: $linkFontColor; + color: #489afe; @include transition(color .1s ease-out); &:hover { - color: $linkHoverFontColor; + color: #287ade; cursor: pointer; text-decoration: none; diff --git a/react/features/base/dialog/components/native/styles.ts b/react/features/base/dialog/components/native/styles.ts index dad13928e335..42ccdda0b871 100644 --- a/react/features/base/dialog/components/native/styles.ts +++ b/react/features/base/dialog/components/native/styles.ts @@ -192,7 +192,7 @@ export const brandedDialog = { */ ColorSchemeRegistry.register('Dialog', { button: { - backgroundColor: schemeColor('buttonBackground'), + backgroundColor: '#44A5FF', flex: 1, padding: BoxModel.padding * 1.5 },