Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-27 00:48:06 +08:00
Code Issues Packages Projects Releases Wiki Activity
b3e725fcac
element-call-Github/src/Modal.module.css

141 lines
2.9 KiB
CSS
Raw Normal View History

Fix copyright pt. 2: CSS files
2023-01-04 00:58:38 +08:00
/*
Update file headers copyright and change licence to AGPL-3.0-only
2024-09-06 16:22:13 +08:00
Copyright 2022-2024 New Vector Ltd.
Fix copyright pt. 2: CSS files
2023-01-04 00:58:38 +08:00
Update file headers copyright and change licence to AGPL-3.0-only
2024-09-06 16:22:13 +08:00
SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
Fix copyright pt. 2: CSS files
2023-01-04 00:58:38 +08:00
*/
Add invite modal
2021-12-04 03:45:29 +08:00
.modal {
Fix select input styles
2021-12-15 07:28:54 +08:00
display: flex;
flex-direction: column;
Add invite modal
2021-12-04 03:45:29 +08:00
}
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
.dialog {
box-sizing: border-box;
Hand raise feature (#2542) * Initial support for Hand Raise feature Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Refactored to use reaction and redaction events Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Replacing button svg with raised hand emoji Signed-off-by: Milton Moura <miltonmoura@gmail.com> * SpotlightTile should not duplicate the raised hand Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Update src/room/useRaisedHands.tsx Element Call recently changed to AGPL-3.0 * Use relations to load existing reactions when joining the call Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Links to sha commit of matrix-js-sdk that exposes the call membership event id and refactors some async code Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Removing RaiseHand.svg * Check for reaction & redaction capabilities in widget mode Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Fix failing GridTile test Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Center align hand raise. * Add support for displaying the duration of a raised hand. * Add a sound for when a hand is raised. * Refactor raised hand indicator and add tests. * lint * Refactor into own files. * Redact the right thing. * Tidy up useEffect * Lint tests * Remove extra layer * Add better sound. (woosh) * Add a small mode for spotlight * Fix timestamp calculation on relaod. * Fix call border resizing video * lint * Fix and update tests * Allow timer to be configurable. * Add preferences tab for choosing to enable timer. * Drop border from raised hand icon * Handle cases when a new member event happens. * Prevent infinite loop * Major refactor to support various state problems. * Tidy up and finish test rewrites * Add some explanation comments. * Even more comments. * Use proper duration formatter * Remove rerender * Fix redactions not working because they pick up events in transit. * More tidying * Use deferred value * linting * Add tests for cases where we got a reaction from someone else. * Be even less brittle. * Transpose border to GridTile. * lint --------- Signed-off-by: Milton Moura <miltonmoura@gmail.com> Co-authored-by: fkwp <fkwp@users.noreply.github.com> Co-authored-by: Half-Shot <will@half-shot.uk> Co-authored-by: Will Hunt <github@half-shot.uk>
2024-11-04 17:54:13 +08:00
inline-size: 580px;
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
max-inline-size: 90%;
max-block-size: 600px;
}
.content {
Add invite modal
2021-12-04 03:45:29 +08:00
display: flex;
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
flex-direction: column;
overflow: hidden;
Fix dropdowns in settings still being cut off on mobile
2023-09-19 22:21:11 +08:00
flex-grow: 1;
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
}
.dialog .content {
background: var(--cpd-color-bg-canvas-default);
}
.drawer .content {
overflow: auto;
}
.drawer {
background: var(--cpd-color-bg-canvas-default);
inset-block-end: 0;
inset-inline: max(0px, calc((100% - 520px) / 2));
max-block-size: 90%;
Tweak drawer appearance to better match native system components
2023-09-19 00:17:31 +08:00
border-start-start-radius: var(--border-radius);
border-start-end-radius: var(--border-radius);
/* Drawer comes in the Android style by default */
--border-radius: 28px;
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
--handle-block-size: 4px;
--handle-inline-size: 32px;
--handle-inset-block-start: var(--cpd-space-4x);
--handle-inset-block-end: var(--cpd-space-4x);
}
body[data-platform="ios"] .drawer {
Tweak drawer appearance to better match native system components
2023-09-19 00:17:31 +08:00
--border-radius: 10px;
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
--handle-block-size: 5px;
--handle-inline-size: 36px;
--handle-inset-block-start: var(--cpd-space-1-5x);
--handle-inset-block-end: calc(var(--cpd-space-1x) / 4);
Add invite modal
2021-12-04 03:45:29 +08:00
}
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
.close {
cursor: pointer;
color: var(--cpd-color-icon-secondary);
border-radius: var(--cpd-radius-pill-effect);
padding: var(--cpd-space-1x);
background: var(--cpd-color-bg-subtle-secondary);
border: none;
}
.close svg {
display: block;
}
@media (hover: hover) {
.close:hover {
background: var(--cpd-color-bg-subtle-primary);
color: var(--cpd-color-icon-primary);
}
}
.close:active {
background: var(--cpd-color-bg-subtle-primary);
color: var(--cpd-color-icon-primary);
}
.header {
background: var(--cpd-color-bg-subtle-secondary);
display: grid;
}
.dialog .header {
padding-block-start: var(--cpd-space-4x);
grid-template-columns:
var(--cpd-space-10x) 1fr minmax(var(--cpd-space-6x), auto)
var(--cpd-space-4x);
grid-template-rows: auto minmax(var(--cpd-space-4x), auto);
/* TODO: Support tabs */
grid-template-areas: ". title close ." "tabs tabs tabs tabs";
align-items: center;
}
.dialog .header h2 {
grid-area: title;
Add invite modal
2021-12-04 03:45:29 +08:00
margin: 0;
}
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
.drawer .header {
grid-template-areas: "tabs";
Add invite modal
2021-12-04 03:45:29 +08:00
position: relative;
}
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
.close {
grid-area: close;
Add invite modal
2021-12-04 03:45:29 +08:00
}
Fix dropdowns in settings being cut off
2023-09-19 05:34:24 +08:00
.body {
flex-grow: 1;
}
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
.dialog .body {
padding-inline: var(--cpd-space-10x);
padding-block: var(--cpd-space-10x) var(--cpd-space-12x);
overflow: auto;
Add invite modal
2021-12-04 03:45:29 +08:00
}
Fix mobile styles
2021-12-11 02:54:18 +08:00
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
.drawer .body {
padding-inline: var(--cpd-space-4x);
padding-block: var(--cpd-space-9x) var(--cpd-space-10x);
}
Update tabs for mobile
2022-01-22 07:43:03 +08:00
Replace remaining React ARIA components with Compound components (#2576) * Fix issues detected by Knip Including cleaning up some unused code and dependencies, using a React hook that we unintentionally stopped using, and also adding some previously undeclared dependencies. * Replace remaining React ARIA components with Compound components * fix button position * disable scrollbars to resolve overlapping button --------- Co-authored-by: Timo <toger5@hotmail.de>
2024-08-28 20:44:39 +08:00
.modal.tabbed .body {
padding-block-start: 0;
}
Start using the new modal component This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.
2023-09-18 02:35:35 +08:00
.handle {
content: "";
position: absolute;
block-size: var(--handle-block-size);
inset-inline: calc((100% - var(--handle-inline-size)) / 2);
inset-block-start: var(--handle-inset-block-start);
background: var(--cpd-color-icon-secondary);
border-radius: var(--cpd-radius-pill-effect);
Fix mobile styles
2021-12-11 02:54:18 +08:00
}
Reference in New Issue Copy Permalink