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

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;
}
}
}
}