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

Tidy up views.

Browse Source
This commit is contained in:
Half-Shot 2024-11-14 12:24:15 +00:00
parent d2d1a3b280
commit f48c2b3d38
1 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/button/ReactionToggleButton.module.css
View File

@ -9,14 +9,31 @@
.reactionPopupMenuModal { .reactionPopupMenuModal {
width: fit-content !important; width: fit-content !important;
top: 82vh !important; top: 82vh !important;
overflow-y: none;
} }
.reactionPopupMenuModal > div > div { .reactionPopupMenuModal > div > div {
padding-inline: var(--cpd-space-6x) !important; padding-inline: var(--cpd-space-6x) !important;
padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important; padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important;
} }
.reactionPopupMenu section {
height: fit-content;
}
.reactionPopupMenu menu { .reactionPopupMenuItem {
list-style: none;
}
:root {
--reaction-button-padding: 1em;
--reaction-button-size: 1.4em;
--reaction-button-fontsize: 1.6em;
}
.reactionsMenu {
min-height: calc(
var(--reaction-button-size) + var(--reaction-button-padding)
);
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
@ -24,38 +41,24 @@
gap: var(--cpd-separator-spacing); gap: var(--cpd-separator-spacing);
max-height: 10em; max-height: 10em;
max-width: 22.5em; max-width: 22.5em;
} overflow-y: auto;
.reactionPopupMenu section {
height: fit-content;
margin-top: auto;
margin-bottom: auto;
}
.reactionPopupMenuItem {
list-style: none;
}
.reactionsMenu {
min-height: 3em;
} }
.reactionButton { .reactionButton {
padding: 1em; padding: var(--reaction-button-padding);
font-size: 1.6em; font-size: 1.6em;
width: 1.4em; width: var(--reaction-button-size);
height: 1.4em; height: var(--reaction-button-size);
border-radius: var(--cpd-radius-pill-effect); border-radius: var(--cpd-radius-pill-effect);
font-size: var(--reaction-button-fontsize);
min-block-size: unset;
border: none; border: none;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.reactionPopupMenuModal .reactionButton { :root {
padding: 1em; --reaction-button-size: 1em;
font-size: 1em; --reaction-button-fontsize: 1em;
width: 1em;
height: 1em;
min-block-size: unset;
} }
} }
@ -66,6 +69,7 @@
margin-left: var(--cpd-separator-spacing); margin-left: var(--cpd-separator-spacing);
margin-right: var(--cpd-separator-spacing); margin-right: var(--cpd-separator-spacing);
} }
.alert { .alert {
margin-bottom: var(--cpd-space-3x); margin-bottom: var(--cpd-space-3x);
animation: grow-in 200ms; animation: grow-in 200ms;