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

29
res/css/views/context_menus/_IconizedContextMenu.pcss
View file

@ -36,26 +36,7 @@ limitations under the License.
/* the notFirst class is for cases where the optionList might be under a header of sorts. */
&:nth-child(n + 2),
.mx_IconizedContextMenu_optionList_notFirst {
/* This is a bit of a hack when we could just use a simple border-top property, */
/* however we have a (kinda) good reason for doing it this way: we need opacity. */
/* To get the right color, we need an opacity modifier which means we have to work */
/* around the problem. PostCSS doesn't support the opacity() function, and if we */
/* use something like postcss-functions we quickly run into an issue where the */
/* function we would define gets passed a CSS variable for custom themes, which */
/* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
//
/* Therefore, we just hack in a line and border the thing ourselves */
&::before {
border-top: 1px solid $primary-content;
opacity: 0.1;
content: "";
/* Counteract the padding problems (width: 100% ignores the 40px padding, */
/* unless we position it absolutely then it does the right thing). */
width: 100%;
position: absolute;
left: 0;
}
border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
}
/* round the top corners of the top button for the hover effect to be bounded */
@ -87,7 +68,7 @@ limitations under the License.
&:hover,
&:focus-visible {
background-color: $menu-selected-color;
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
&.mx_AccessibleButton_disabled {
@ -137,7 +118,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $icon-button-color;
background-color: var(--cpd-color-icon-primary);
}
}
@ -147,7 +128,7 @@ limitations under the License.
}
.mx_IconizedContextMenu_icon::before {
background-color: $alert;
background-color: var(--cpd-color-icon-critical-primary);
}
}
@ -172,7 +153,7 @@ limitations under the License.
&.mx_IconizedContextMenu_compact {
.mx_IconizedContextMenu_optionList > * {
padding: 8px 16px 8px 11px;
padding: 8px 16px 8px 12px;
}
}

1
res/css/views/context_menus/_MessageContextMenu.pcss
View file

@ -29,7 +29,6 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $icon-button-color;
}
}

16
res/css/views/dialogs/_CompoundDialog.pcss
View file

@ -21,7 +21,7 @@ limitations under the License.
/* -------------------------------------------------------------------------------- */
/* Override legacy/default styles for dialogs */
.mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog {
.mx_Dialog_wrapper.mx_CompoundDialog .mx_Dialog {
padding: 0; /* we'll manage it ourselves */
color: $primary-content;
}
@ -41,14 +41,14 @@ limitations under the License.
font-size: $font-24px;
margin: 0; /* managed by header class */
}
}
.mx_CompoundDialog_cancelButton {
@mixin customisedCancelButton;
/* Align with middle of title, 30px from right edge */
position: absolute;
top: 30px;
right: 30px;
}
.mx_CompoundDialog_cancelButton {
@mixin customisedCancelButton;
/* Align with corner radius of dialog */
position: absolute;
top: var(--cpd-space-4x);
right: var(--cpd-space-4x);
}
.mx_CompoundDialog_form {

20
res/css/views/dialogs/_LocationViewDialog.pcss
View file

@ -16,11 +16,6 @@ limitations under the License.
.mx_LocationViewDialog_wrapper .mx_Dialog {
padding: 0px;
/* Unset contain and position to allow the close button
to appear outside the dialog */
contain: unset;
position: unset;
}
.mx_LocationViewDialog {
@ -37,16 +32,13 @@ limitations under the License.
.mx_Dialog_title {
display: none;
}
}
.mx_Dialog_cancelButton {
z-index: 4010;
position: absolute;
right: 5vw;
top: 5vh;
width: 20px;
height: 20px;
background-color: $dialog-close-external-color;
}
.mx_Dialog_cancelButton {
z-index: 4010;
position: absolute;
left: var(--cpd-space-4x);
top: var(--cpd-space-4x);
}
}

4
res/css/views/dialogs/_SettingsDialog.pcss
View file

@ -20,12 +20,12 @@ limitations under the License.
.mx_SpaceSettingsDialog,
.mx_SpacePreferencesDialog {
width: 90vw;
max-width: 1000px;
max-width: 980px;
/* set the height too since tabbed view scrolls itself. */
height: 80vh;
.mx_TabbedView {
top: 65px;
top: 90px;
}
.mx_TabbedView .mx_SettingsTab {

66
res/css/views/dialogs/_SpotlightDialog.pcss
View file

@ -14,38 +14,46 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SpotlightDialog_wrapper .mx_Dialog {
border-radius: 8px;
overflow-y: initial;
position: relative;
height: 60%;
padding: 0;
contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
.mx_SpotlightDialog_wrapper {
.mx_Dialog_border {
/* Disable the glass border as this dialog wasn't designed with it in mind */
display: contents;
}
#mx_SpotlightDialog_keyboardPrompt {
position: absolute;
padding: $spacing-8;
.mx_Dialog {
width: fit-content;
border-radius: 8px;
background-color: $background;
top: -60px; /* relative to the top of the modal */
left: 50%;
transform: translateX(-50%);
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
overflow-y: initial;
position: relative;
height: 60%;
padding: 0;
contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
kbd {
display: inline-block;
padding: 2px $spacing-4;
margin: 0 $spacing-4;
border-radius: 6px;
background-color: $quinary-content;
vertical-align: middle;
color: $tertiary-content;
/* To avoid any styling inherent with <kbd> elements */
font-family: inherit;
font-weight: inherit;
font-size: inherit;
#mx_SpotlightDialog_keyboardPrompt {
position: absolute;
padding: $spacing-8;
border-radius: 8px;
background-color: $background;
top: -60px; /* relative to the top of the modal */
left: 50%;
transform: translateX(-50%);
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
kbd {
display: inline-block;
padding: 2px $spacing-4;
margin: 0 $spacing-4;
border-radius: 6px;
background-color: $quinary-content;
vertical-align: middle;
color: $tertiary-content;
/* To avoid any styling inherent with <kbd> elements */
font-family: inherit;
font-weight: inherit;
font-size: inherit;
}
}
}
}

2
res/css/views/dialogs/_TermsDialog.pcss
View file

@ -19,7 +19,7 @@ limitations under the License.
* terms dialog sizing when it will appear for the integration manager so that
* it gets the same basic size as the IM's own modal.
*/
.mx_TermsDialog_forIntegrationManager .mx_Dialog {
.mx_TermsDialog_forIntegrationManager .mx_Dialog_border {
width: 60%;
height: 70%;
box-sizing: border-box;

8
res/css/views/messages/_MessageActionBar.pcss
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 {

8
res/css/views/right_panel/_BaseCard.pcss
View file

@ -215,19 +215,19 @@ limitations under the License.
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid $quinary-content;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
}
.mx_ContextualMenu_chevron_top {
left: auto;
right: 22px;
border-bottom-color: $quinary-content;
border-bottom-color: var(--cpd-color-border-interactive-secondary);
&::after {
content: "";
border: inherit;
border-bottom-color: $menu-bg-color;
border-bottom-color: var(--cpd-color-bg-canvas-default);
position: absolute;
top: 1px;
left: -8px;

2
res/css/views/right_panel/_PinnedMessagesCard.pcss
View file

@ -42,7 +42,7 @@ limitations under the License.
background: var(--MessageActionBar-item-hover-background);
border-radius: var(--MessageActionBar-item-hover-borderRadius);
z-index: var(--MessageActionBar-item-hover-zIndex);
color: $primary-content;
color: var(--cpd-color-icon-primary);
}
}

68
res/css/views/rooms/_MessageComposer.pcss
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;

8
res/css/views/rooms/_MessageComposerFormatBar.pcss
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 {

9
res/css/views/settings/_IntegrationManager.pcss
View file

@ -15,16 +15,19 @@ limitations under the License.
*/
.mx_IntegrationManager {
.mx_Dialog {
.mx_Dialog_border {
box-sizing: border-box;
padding: 0;
width: 60%;
height: 70%;
overflow: hidden;
max-width: initial;
max-height: initial;
}
.mx_Dialog {
padding: 0;
overflow: hidden;
}
iframe {
background-color: #fff;
border: 0;