move footer related css to InCallFooter.module.css

src/room/InCallView.module.css

@@ -31,153 +31,12 @@ Please see LICENSE in the repository root for full details.
   background: none;
 }
 
-.footer {
-  position: sticky;
-  inset-block-end: 0;
-  z-index: var(--call-view-header-footer-layer);
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-areas: ". buttons layout";
-  align-items: center;
-  gap: var(--cpd-space-3x);
-  padding: var(--cpd-space-10x) var(--cpd-space-6x);
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    var(--cpd-color-bg-canvas-default) 100%
-  );
-}
-
-.footer.hidden {
-  display: none;
-}
-
-.footer.overlay {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0;
-  opacity: 1;
-  transition: opacity 0.15s;
-}
-
-.footer.overlay.hidden {
-  display: grid;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.footer.overlay:has(:focus-visible) {
-  opacity: 1;
-  pointer-events: initial;
-}
-
-.settingsLogoContainer {
-  display: flex;
-  gap: var(--cpd-space-4x);
-  flex-direction: row;
-}
-
-.logo {
-  justify-self: start;
-  display: flex;
-  align-items: center;
-  gap: var(--cpd-space-2x);
-  padding-inline-start: var(--cpd-space-1x);
-}
-
-.buttons {
-  grid-area: buttons;
-  justify-self: center;
-  display: flex;
-  gap: var(--cpd-space-3x);
-}
-
-.layout {
-  grid-area: layout;
-  justify-self: end;
-}
-
-/*First hide the logo*/
-@media (max-width: 660px) {
-  .logo {
-    display: none;
-  }
-}
-
-.settingForButtonsBar {
-  /*
-  never show the settings button for the buttons bar
-  show the settings button in the Buttons bar on width < 500px
-  */
-  display: none;
-}
-.settingForBottomLeftCorner {
-  /*
-  show the left corener by default (will be hidden on width < 500px)
-  */
-  display: inherit;
-}
-
-/*
-With the logo hidden >500px is enough space to show overflow, buttons, layout.
-Once we exceed 500 we hide everything except the buttons.
-*/
-@media (max-width: 500px) {
-  .footer {
-    grid-template-areas: "buttons buttons buttons";
-  }
-
-  /*.settingsLogoContainer {
-    display: none;
-  }*/
-
-  .layout {
-    display: none !important;
-  }
-}
-
-@media (max-height: 800px) {
-  .footer {
-    padding-block: var(--cpd-space-8x);
-  }
-}
-
-@media (max-height: 400px) {
-  .footer {
-    padding-block: var(--cpd-space-4x);
-  }
-}
-
-@media (max-width: 370px) {
-  .shareScreen {
-    display: none;
-  }
-
-  /* PIP custom css */
-  @media (max-height: 400px) {
-    .shareScreen {
-      display: flex;
-    }
-    .footer {
-      padding-block-start: var(--cpd-space-3x);
-      padding-block-end: var(--cpd-space-2x);
-    }
-  }
-}
-
 @media (max-width: 320px) {
-  .invite,
-  .raiseHand {
+  .invite {
     display: none;
   }
 }
 
-@media (min-width: 800px) {
-  .buttons {
-    gap: var(--cpd-space-4x);
-  }
-}
-
 .fixedGrid {
   position: absolute;
   inline-size: 100%;