imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

7
res/css/structures/_ContextualMenu.pcss
View file

@ -30,9 +30,10 @@ limitations under the License.
}
.mx_ContextualMenu {
border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
border-radius: 12px;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
background-color: var(--cpd-color-bg-canvas-default);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
color: $primary-content;
position: absolute;
z-index: 5001;

8
res/css/structures/_QuickSettingsButton.pcss
View file

@ -62,7 +62,7 @@ limitations under the License.
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
color: var(--cpd-color-text-secondary);
margin: 0 0 16px;
}
@ -76,7 +76,7 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-15px;
text-transform: uppercase;
color: $tertiary-content;
color: var(--cpd-color-text-secondary);
margin: 20px 0 12px;
}
@ -97,7 +97,7 @@ limitations under the License.
margin-left: 6px;
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-content;
color: var(--cpd-color-text-primary);
}
}
@ -106,7 +106,7 @@ limitations under the License.
margin-left: 22px;
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-content;
color: var(--cpd-color-text-primary);
position: relative;
margin-bottom: 16px;
}

2
res/css/structures/_TabbedView.pcss
View file

@ -18,7 +18,7 @@ limitations under the License.
.mx_TabbedView {
margin: 0;
padding: 0 0 0 16px;
padding: 0 0 0 var(--cpd-space-8x);
display: flex;
flex-direction: column;
inset: 0;

9
res/css/structures/_ToastContainer.pcss
View file

@ -36,16 +36,17 @@ limitations under the License.
.mx_Toast_toast {
grid-row: 1 / 3;
grid-column: 1;
background-color: $system;
background-color: var(--cpd-color-bg-canvas-default);
color: $primary-content;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
border-radius: 12px;
overflow: hidden;
display: grid;
grid-template-columns: 22px 1fr;
column-gap: 8px;
row-gap: 4px;
padding: 8px;
padding: var(--cpd-space-3x);
&.mx_Toast_hasIcon {
&::before,