Refine styles of menus, toasts, popovers, and modals (#12332)

* Refine styles of menus, toasts, popovers, and modals

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12247, with the difference that modal styles have now been refreshed as well.

* Restore the fixed heights of some dialogs

* Fix formatting and flaky screenshot
This commit is contained in:
Robin 2024-03-13 09:38:32 -04:00 committed by GitHub
parent 0f251d8a55
commit 80c4c3c28c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
65 changed files with 323 additions and 414 deletions

View file

@ -314,74 +314,6 @@ limitations under the License.
}
}
.mx_MessageComposer_formatting {
cursor: pointer;
margin: 0 11px;
width: 24px;
height: 18px;
}
.mx_MessageComposer_formatbar_wrapper {
width: 100%;
background-color: $menu-bg-color;
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
}
.mx_MessageComposer_formatbar {
margin: auto;
display: flex;
height: 30px;
box-sizing: border-box;
padding-left: 62px;
flex-direction: row;
align-items: center;
font-size: $font-10px;
color: $info-plinth-fg-color;
* {
margin-right: 4px;
}
}
.mx_MessageComposer_format_button,
.mx_MessageComposer_formatbar_cancel,
.mx_MessageComposer_formatbar_markdown {
cursor: pointer;
}
.mx_MessageComposer_formatbar_cancel {
margin-right: 22px;
}
.mx_MessageComposer_formatbar_markdown {
height: 17px;
width: 30px;
margin-right: 64px;
}
.mx_MessageComposer_input_markdownIndicator {
height: 10px;
width: 12px;
padding: 4px 4px 4px 0;
}
.mx_MessageComposer_formatbar_markdown,
.mx_MessageComposer_input_markdownIndicator {
cursor: pointer;
mask-image: url("$(res)/img/markdown.svg");
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: $icon-button-color;
&.mx_MessageComposer_markdownDisabled {
opacity: 0.2;
}
}
.mx_MatrixChat_useCompactLayout {
.mx_MessageComposer_input {
min-height: 50px;