mirror of
https://github.com/vector-im/element-call.git
synced 2026-08-02 19:49:23 +00:00
move footer related css to InCallFooter.module.css
This commit is contained in:
Timo K
158
src/components/InCallFooter.module.css
Normal file
158
src/components/InCallFooter.module.css
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
/*
|
||||||
|
Copyright 2026 Element Creations Ltd.
|
||||||
|
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||||
|
Please see LICENSE in the repository root for full details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.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";
|
||||||
|
}
|
||||||
|
|
||||||
|
.settingForButtonsBar {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
.settingForBottomLeftCorner {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.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) {
|
||||||
|
.raiseHand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.buttons {
|
||||||
|
gap: var(--cpd-space-4x);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
/*
|
/*
|
||||||
Copyright 2025 New Vector Ltd.
|
Copyright 2026 Element Creations Ltd.
|
||||||
|
|
||||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||||
Please see LICENSE in the repository root for full details.
|
Please see LICENSE in the repository root for full details.
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
/*
|
/*
|
||||||
Copyright 2025 New Vector Ltd.
|
Copyright 2026 Element Creations Ltd.
|
||||||
|
|
||||||
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||||
Please see LICENSE in the repository root for full details.
|
Please see LICENSE in the repository root for full details.
|
||||||
@@ -19,7 +19,7 @@ import {
|
|||||||
ReactionToggleButton,
|
ReactionToggleButton,
|
||||||
LoudspeakerButton,
|
LoudspeakerButton,
|
||||||
} from "../button";
|
} from "../button";
|
||||||
import styles from "../room/InCallView.module.css";
|
import styles from "./InCallFooter.module.css";
|
||||||
import { LayoutToggle } from "../room/LayoutToggle";
|
import { LayoutToggle } from "../room/LayoutToggle";
|
||||||
import {
|
import {
|
||||||
type CallViewModel,
|
type CallViewModel,
|
||||||
|
|||||||
@@ -31,153 +31,12 @@ Please see LICENSE in the repository root for full details.
|
|||||||
background: none;
|
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) {
|
@media (max-width: 320px) {
|
||||||
.invite,
|
.invite {
|
||||||
.raiseHand {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 800px) {
|
|
||||||
.buttons {
|
|
||||||
gap: var(--cpd-space-4x);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixedGrid {
|
.fixedGrid {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inline-size: 100%;
|
inline-size: 100%;
|
||||||
|
|||||||
Reference in New Issue
Block a user