MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 14:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update Material 3 Theme (#709)

Browse Source 
* fixed issues with avatar tag setter, viewing images and message box dialog overflowing out of view

* fixed other elements being corrupted by previous changes

* made table text selectable, fixed padding with buttons.

* fixed notification selection menu being compressed

* fixed queue messages padding and coloring.

* fixed padding issues with group ID copy button being missing, fixes issues with text boxes being misaligned with secondary elements such as delete buttons

* more changes fixes issues relating towards text boxes overflowing off of screen into overlay areas, I hate using !Important but its a necessary evil.

* fix previous instance user width being affected by changes to notification wide

* fixed unreadable text in bulk unfriend selection message.
This commit is contained in:
Myrkur
2024-01-09 05:20:24 -05:00
committed by GitHub
parent f6a6e1da18
commit 581d5fe418
1 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
html/src/theme.material3.scss
View File

@@ -18,7 +18,7 @@ body {
--md-sys-color-surface: 28, 27, 31; --md-sys-color-surface: 28, 27, 31;
--md-sys-color-on-surface: 230, 225, 229; --md-sys-color-on-surface: 230, 225, 229;
--md-sys-color-surface-variant: 73, 69, 79; --md-sys-color-surface-variant: 73, 69, 79;
--md-sys-color-on-surface-variant: 202, 196, 208; --md-sys-color-on-surface-variant: 220, 213, 227;
--md-sys-color-background: 28, 27, 31; --md-sys-color-background: 28, 27, 31;
--md-sys-color-on-background: 230, 225, 229; --md-sys-color-on-background: 230, 225, 229;
--md-sys-color-outline: 147, 143, 153; --md-sys-color-outline: 147, 143, 153;
@@ -228,6 +228,12 @@ div[style*='margin: 0px 0px 10px;'] {
/* Input filter */ /* Input filter */
.el-input--small,
.el-input__inner{
height: 45px !important;
line-height: 45px !important;
}
.el-input__inner { .el-input__inner {
height: 48px; height: 48px;
} }
@@ -286,8 +292,8 @@ input[type='number'],
.el-pagination--small .el-pager li.btn-quicknext, .el-pagination--small .el-pager li.btn-quicknext,
.el-pagination--small .el-pager li.btn-quickprev, .el-pagination--small .el-pager li.btn-quickprev,
.el-pagination--small .el-pager li:last-child { .el-pagination--small .el-pager li:last-child {
height: 32px; height: 32px !important;
line-height: 32px; line-height: 32px !important;
} }
.el-pagination .el-select .el-input .el-input__inner, .el-pagination .el-select .el-input .el-input__inner,
.el-input--mini .el-input__icon { .el-input--mini .el-input__icon {
@@ -402,6 +408,15 @@ input[type='number'],
min-height: 0; min-height: 0;
opacity: 0; opacity: 0;
} }
.vrc-instance-queue-message {
padding: 10px !important;
background: #f0f9eb !important;
}
.el-message.is-closable .el-message__content {
padding-right: 16px;
}
/* Typography */ /* Typography */
@@ -1085,7 +1100,7 @@ input[type='number'],
} }
.x-friend-item .detail { .x-friend-item .detail {
margin: 0 4px; margin: 0 -2px;
} }
.x-friend-item > .detail > .name { .x-friend-item > .detail > .name {
@@ -1316,10 +1331,14 @@ img.x-link.el-popover__reference {
.el-dialog__wrapper { .el-dialog__wrapper {
display: grid; display: grid;
} }
*:not(.x-user-dialog, .x-world-dialog, .x-avatar-dialog, .x-group-dialog)
> .el-dialog { /* Notification position box (for some reason?!) */
width: auto !important;
// this is awful never do this
*:not(.x-user-dialog, .x-world-dialog, .x-avatar-dialog, .x-group-dialog)
> .el-dialog:not([aria-label*="Notification Position"]) {
max-width: 1125px !important; max-width: 1125px !important;
width: 1125px !important;
} }
*:not(.x-user-dialog, .x-world-dialog, .x-avatar-dialog, .x-group-dialog) *:not(.x-user-dialog, .x-world-dialog, .x-avatar-dialog, .x-group-dialog)
> .el-dialog > .el-dialog
@@ -1384,10 +1403,11 @@ img.x-link.el-popover__reference {
margin-bottom: 24px; margin-bottom: 24px;
max-height: 500px; max-height: 500px;
scroll-margin-left: 8px; scroll-margin-left: 8px;
word-break: break-word;
} }
.el-message-box__content > *, .el-message-box__content > *,
.el-dialog__body > * { .el-dialog__body > * {
padding-right: 8px; height: 0% !important;
} }
.el-message-box__btns .el-button, .el-message-box__btns .el-button,