ref(scss) Variables cleanup (jitsi#13521)

Remove some unused variables Replace variables that are only used once with their value
shark8848 · Jul 4, 2023 · 2c8dedc · 2c8dedc
1 parent f950dc9
commit 2c8dedc
Show file tree

Hide file tree

Showing 24 changed files with 49 additions and 212 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -186,7 +186,7 @@
     }
 
     .google-error {
-        color: $errorColor;
+        color: #c61600;
     }
 
     .google-panel {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;