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

Material3 update (#1457)

Browse Source 
* fix

* fix for the fix

* moved smth back to correct place

* Fix when update button isn't visible (Me stupid, didn't check)
This commit is contained in:
poprox24
2025-11-01 16:42:29 +01:00
committed by GitHub
parent d1a891eb12
commit 9a3fcfaed5
1 changed files with 64 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/assets/scss/themes/theme.material3.scss
View File

@@ -496,11 +496,6 @@ input[type='number'],
} }
/* ---------- Navigation rail ----------*/ /* ---------- Navigation rail ----------*/
.pending-update {
margin: 15px !important;
}
.x-menu-container { .x-menu-container {
background: var(--md-sys-color-surface-2); background: var(--md-sys-color-surface-2);
/* display: flex; */ /* display: flex; */
@@ -508,23 +503,20 @@ input[type='number'],
} }
.x-menu-container, .x-menu-container,
.el-menu--collapse { .el-menu--collapse {
width: 80px; width: 70px;
} }
.x-menu-container > .el-menu { .x-menu-container > div > .el-menu {
margin: auto 0; margin: auto 0;
display: grid; display: grid;
} }
.x-menu-container > .el-menu > .el-menu-item { .x-menu-container > div > .el-menu > .el-menu-item {
width: 56px;
height: 56px; height: 56px;
margin: 2px 12px;
border-radius: 28px;
} }
.x-menu-container > .el-menu > .el-menu-item > div { .x-menu-container > div > .el-menu > .el-menu-item > div {
position: relative !important; position: relative !important;
padding: 0 !important; padding: 0 !important;
} }
.x-menu-container > .el-menu > .el-menu-item > div > i { .x-menu-container > div > .el-menu > .el-menu-item > div > i {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 14px; top: 14px;
@@ -536,8 +528,15 @@ input[type='number'],
display: none; display: none;
} }
.el-menu-item:focus, .el-menu-item:focus,
.el-menu-item:hover { .el-menu-item:hover,
background-color: rgba(var(--md-sys-color-on-surface-variant), 0.08); .bottom-button:hover {
background-color: rgba(
var(--md-sys-color-on-surface-variant),
0.08
) !important;
}
.bottom-button {
width: 70px !important;
} }
.el-menu-item.is-active::before { .el-menu-item.is-active::before {
width: 56px; width: 56px;
@@ -548,10 +547,13 @@ input[type='number'],
background-color: rgb(var(--md-sys-color-secondary-container)); background-color: rgb(var(--md-sys-color-secondary-container));
} }
.el-menu-item { .el-menu-item {
color: rgb(var(--md-sys-color-on-surface-variant)); color: rgb(var(--md-sys-color-on-surface-variant)) !important;
} }
.x-menu-container > .el-menu > .el-menu-item.is-active > div > i { .el-menu-item i {
color: rgb(var(--md-sys-color-primary)); color: rgv(var(--md-sys-color-on-surface-variant)) !important;
}
.x-menu-container > div > .el-menu > .el-menu-item.is-active > div > i {
color: rgb(var(--md-sys-color-primary)) !important;
} }
.el-menu-item.notify::after { .el-menu-item.notify::after {
background: rgb(var(--md-sys-color-error)); background: rgb(var(--md-sys-color-error));
@@ -764,7 +766,9 @@ input[type='number'],
left: -1px; left: -1px;
} }
.el-switch.is-checked.is-active input:not(:disabled) + .el-switch__core::before { .el-switch.is-checked.is-active
input:not(:disabled)
+ .el-switch__core::before {
padding: 1px; padding: 1px;
margin: 0px; margin: 0px;
top: -1px; top: -1px;
@@ -772,7 +776,9 @@ input[type='number'],
} }
/* active click thumb */ /* active click thumb */
.el-switch.is-checked.is-active input:not(:disabled) + .el-switch__core::before { .el-switch.is-checked.is-active
input:not(:disabled)
+ .el-switch__core::before {
background-color: rgb(var(--md-sys-color-primary-container)); background-color: rgb(var(--md-sys-color-primary-container));
} }
@@ -831,9 +837,9 @@ input[type='number'],
// Fix the white toggle // Fix the white toggle
.el-switch__action { .el-switch__action {
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
display: none !important; display: none !important;
} }
/* ---------- Segmented buttons ---------- */ /* ---------- Segmented buttons ---------- */
@@ -933,9 +939,13 @@ input[type='number'],
// Override all element-plus theme coloring // Override all element-plus theme coloring
.el-radio-button__inner { .el-radio-button__inner {
--el-radio-button-checked-bg-color: rgb(var(--md-sys-color-secondary-container)); --el-radio-button-checked-bg-color: rgb(
--el-radio-button-checked-text-color: rgb(var(--md-sys-color-on-secondary-container)); var(--md-sys-color-secondary-container)
--el-radio-button-checked-border-color: rgb(var(--md-sys-color-outline)); );
--el-radio-button-checked-text-color: rgb(
var(--md-sys-color-on-secondary-container)
);
--el-radio-button-checked-border-color: rgb(var(--md-sys-color-outline));
} }
/* ---------- Filled button ---------- */ /* ---------- Filled button ---------- */
@@ -1029,6 +1039,21 @@ input[type='number'],
background-color 0.1s ease-in-out, background-color 0.1s ease-in-out,
color 0.1s ease-in-out; color 0.1s ease-in-out;
} }
.pending-update button {
border-radius: 10px !important;
height: 44px !important;
margin: 14px !important;
}
.pending-update button::after {
border-radius: 10px !important;
}
.pending-update {
height: 70px;
}
.el-button:not(.el-button--text, .el-button--primary, .is-disabled), .el-button:not(.el-button--text, .el-button--primary, .is-disabled),
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover, .el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover,
.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus, .el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
@@ -2200,7 +2225,9 @@ div.x-friend-list
.el-calendar { .el-calendar {
background: var(--md-sys-color-surface-3) !important; background: var(--md-sys-color-surface-3) !important;
--el-calendar-selected-bg-color: rgb(56 50 71) !important; --el-calendar-selected-bg-color: rgb(
var(--md-sys-color-secondary-container)
) !important;
} }
.el-calendar__title { .el-calendar__title {
@@ -2208,11 +2235,11 @@ div.x-friend-list
} }
.el-calendar-table td.is-selected { .el-calendar-table td.is-selected {
background-color: rgb(56 50 71) !important; background-color: rgb(var(--md-sys-color-secondary-container));
} }
.el-calendar-table td.is-today { .el-calendar-table td.is-today {
color: #8c4abd; color: rgb(var(--md-sys-color-primary));
} }
.el-card { .el-card {
@@ -2284,9 +2311,9 @@ div.x-friend-list
} }
.el-input__inner { .el-input__inner {
border: none !important; border: none !important;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
} }
.el-table { .el-table {
@@ -2311,14 +2338,15 @@ div.x-friend-list
background-color: rgba(var(--md-sys-color-primary), 0.05) !important; background-color: rgba(var(--md-sys-color-primary), 0.05) !important;
} }
.category-title { .category-title,
color: var(--el-text-color-primary) imporant !important; .tool-name {
color: rgv(var(--md-sys-color-on-surface-variant)) !important;
} }
.tool-icon { .tool-icon {
background-color: rgba(var(--md-sys-color-primary), .05) !important; background-color: rgba(var(--md-sys-color-primary), 0.05) !important;
} }
.tool-icon > * { .tool-icon > * {
color: var(--el-text-color-primary) !important; color: rgv(var(--md-sys-color-on-surface-variant)) !important;
} }