ref(scss) Variables cleanup (#13521)

Remove some unused variables Replace variables that are only used once with their value
2 years ago · 2c8dedcb85
parent f950dc90b9
commit 2c8dedcb85
24 changed files with 49 additions and 212 deletions
--- 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 {
--- 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;
 }
--- 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;
--- 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;
--- 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;
--- a/css/_popover.scss
+++ b/css/_popover.scss
@ -1,5 +1,5 @@
 .popover {
-    z-index: $popoverZ;
+    z-index: 8;

    .popover-content {
        position: relative;
--- 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;
--- a/css/_recording.scss
+++ b/css/_recording.scss
@ -186,7 +186,7 @@
    }

    .google-error {
-        color: $errorColor;
+        color: #c61600;
    }

    .google-panel {
--- 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;
        }
    }
 }
--- 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);
        }
    }

--- 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.
--- 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
 */
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
    }

--- 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 {
--- 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;
    }
--- 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 {
--- a/css/themes/_light.scss
+++ b/css/themes/_light.scss
@ -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;
--- 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;

--- 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
    },