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

@ -18,7 +18,7 @@ limitations under the License.
.mx_MessageActionBar {
--MessageActionBar-size-button: 28px;
--MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
--MessageActionBar-item-hover-background: $panel-actions;
--MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
--MessageActionBar-item-hover-borderRadius: 6px;
--MessageActionBar-item-hover-zIndex: 1;
@ -30,7 +30,7 @@ limitations under the License.
line-height: $font-24px;
border-radius: 8px;
background: $background;
border: 1px solid $input-border-color;
border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
top: -32px;
right: 8px;
user-select: none;
@ -96,7 +96,7 @@ limitations under the License.
--MessageActionBar-icon-size: 18px;
width: var(--MessageActionBar-size-button);
height: var(--MessageActionBar-size-button);
color: $secondary-content;
color: var(--cpd-color-icon-secondary);
display: flex;
align-items: center;
justify-content: center;
@ -114,7 +114,7 @@ limitations under the License.
}
&:hover {
color: $primary-content;
color: var(--cpd-color-icon-primary);
}
&.mx_MessageActionBar_downloadButton {