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

@ -22,7 +22,7 @@ limitations under the License.
cursor: pointer;
border-radius: 8px;
background-color: $background;
border: 1px solid $input-border-color;
border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
user-select: none;
/* equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) */
/* but as it appears after them in the DOM, will appear on top. */
@ -48,7 +48,7 @@ limitations under the License.
border: none;
&:hover {
background: $panel-actions;
background: var(--cpd-color-bg-subtle-secondary);
border-radius: 6px;
z-index: 1;
}
@ -63,11 +63,11 @@ limitations under the License.
width: 100%;
mask-repeat: no-repeat;
mask-position: center;
background-color: $secondary-content;
background-color: var(--cpd-color-icon-secondary);
}
.mx_MessageComposerFormatBar_button:hover::after {
background-color: $primary-content;
background-color: var(--cpd-color-icon-primary);
}
.mx_MessageComposerFormatBar_buttonIconBold::after {