clean up element plus css

2026-04-26 18:23:47 +02:00 · 2026-01-16 20:50:41 +09:00
parent 78f3bc512d
commit 093fe082f2
29 changed files with 108 additions and 1268 deletions
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -739,18 +739,12 @@
        align-items: center;
        justify-content: center;
        margin-top: 100px;
-        color: var(--el-text-color-secondary);
    }
    .divider {
        padding: 0 400px;
        transition: top 0.3s ease;
    }

-    // override el-ui
-    .el-date-editor.el-input,
-    .el-date-editor.el-input__inner {
-        width: 200px;
-    }
    .status-online {
        display: flex;
        justify-content: center;
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -754,7 +754,6 @@
        margin-top: 12px;
        padding: 12px 16px;
        border-radius: 6px;
-        border: 1px solid var(--el-border-color);
        background: transparent;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@@ -784,7 +783,6 @@
        margin-top: 12px;
        padding: 40px;
        text-align: center;
-        border: 1px dashed var(--el-border-color);
        border-radius: 8px;
        flex: 1;
        display: flex;
@@ -794,7 +792,6 @@

    .mutual-graph__force-description {
        margin: 0 0 12px 0;
-        color: var(--el-text-color-regular);
        font-size: 13px;
    }

@@ -817,7 +814,6 @@
    .mutual-graph__helper {
        margin-top: 4px;
        font-size: 12px;
-        color: var(--el-text-color-secondary);
        line-height: 1.4;
    }
 </style>
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -1657,7 +1657,6 @@
    }

    .group-item {
-        border: 1px solid var(--el-border-color);
        border-radius: 8px;
        padding: 8px;
        cursor: pointer;
@@ -1693,7 +1692,6 @@

    .group-item__count {
        font-size: 12px;
-        color: var(--el-text-color-secondary);
    }

    .group-item__bottom {
@@ -1703,11 +1701,6 @@
        gap: 8px;
    }

-    .group-item.is-active {
-        border-color: var(--el-color-primary);
-        background-color: var(--el-color-primary-light-9, rgba(64, 158, 255, 0.12));
-    }
-
    .group-item--placeholder {
        pointer-events: none;
        opacity: 0.7;
@@ -1717,7 +1710,6 @@
        width: 64px;
        height: 18px;
        border-radius: 999px;
-        background-color: var(--el-fill-color);
    }

    .group-item--new {
@@ -1726,7 +1718,6 @@
        align-items: center;
        justify-content: center;
        gap: 6px;
-        color: var(--el-color-primary);
        font-size: 14px;
    }

@@ -1739,13 +1730,8 @@
        width: 100%;
    }

-    .group-item__input :deep(.el-input__wrapper) {
-        width: 100%;
-    }
-
    .group-empty {
        text-align: center;
-        color: var(--el-text-color-secondary);
        font-size: 12px;
        padding: 12px 0;
    }
@@ -1772,21 +1758,12 @@
        align-self: stretch;
    }

-    .favorites-group-menu__item:hover {
-        background-color: var(--el-menu-hover-bg-color);
-    }
-
-    .favorites-group-menu__item--danger {
-        color: var(--el-color-danger);
-    }
-
    .favorites-group-menu__item--submenu {
        padding-right: 8px;
    }

    .favorites-group-menu__arrow {
        margin-left: auto;
-        color: var(--el-text-color-secondary);
        font-size: 12px;
    }

@@ -1812,14 +1789,8 @@
        align-self: stretch;
    }

-    .group-visibility-menu__item:hover,
-    .group-visibility-menu__item.is-active {
-        background-color: var(--el-menu-hover-bg-color);
-    }
-
    .group-visibility-menu__check {
        font-size: 12px;
-        color: var(--el-color-primary);
    }

    .favorites-content {
@@ -1850,7 +1821,6 @@
    .favorites-content__title small {
        font-size: 12px;
        font-weight: normal;
-        color: var(--el-text-color-secondary);
    }

    .favorites-content__edit {
@@ -1858,7 +1828,6 @@
        align-items: center;
        gap: 8px;
        font-size: 13px;
-        color: var(--el-text-color-regular);
    }

    .favorites-content__edit-actions {
@@ -1874,10 +1843,6 @@
        margin-bottom: 12px;
    }

-    .favorites-content__actions .el-button {
-        margin: 0;
-    }
-
    .favorites-content__list {
        flex: 1;
        min-height: 0;
@@ -1927,11 +1892,9 @@
        display: flex;
        align-items: center;
        box-sizing: border-box;
-        border: 1px solid var(--el-border-color);
        border-radius: calc(8px * var(--favorites-card-scale, 1));
        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
        cursor: pointer;
-        background: var(--el-bg-color);
        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
@@ -1946,11 +1909,6 @@
        transform: translateY(-2px);
    }

-    :deep(.favorites-search-card.is-selected) {
-        border-color: var(--el-color-primary);
-        box-shadow: 0 0 0 1px var(--el-color-primary-light-3, rgba(64, 158, 255, 0.4));
-    }
-
    :deep(.favorites-search-card__content) {
        display: flex;
        align-items: center;
@@ -1964,7 +1922,6 @@
        height: calc(48px * var(--favorites-card-scale, 1));
        border-radius: calc(6px * var(--favorites-card-scale, 1));
        overflow: hidden;
-        background: var(--el-fill-color-lighter);
        flex-shrink: 0;
    }

@@ -2001,7 +1958,6 @@

    :deep(.favorites-search-card__detail .extra) {
        font-size: calc(12px * var(--favorites-card-scale, 1));
-        color: var(--el-text-color-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
@@ -2017,7 +1973,6 @@
        display: inline-flex;
        align-items: center;
        gap: 4px;
-        color: var(--el-text-color-secondary);
        font-size: 14px;
    }

@@ -2070,7 +2025,6 @@
        display: flex;
        align-items: center;
        justify-content: center;
-        color: var(--el-text-color-secondary);
        font-size: 13px;
        height: 100%;
    }
@@ -2082,30 +2036,20 @@
        cursor: default;
    }

-    .favorites-dropdown__control:not(:last-child) {
-        border-bottom: 1px solid var(--el-border-color-lighter);
-    }
-
    .favorites-dropdown__control-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 600;
-        color: var(--el-text-color-primary);
        margin-bottom: 6px;
    }

    .favorites-dropdown__control-value {
        font-size: 12px;
-        color: var(--el-text-color-secondary);
    }

    .favorites-dropdown__slider {
        padding: 0 4px 4px;
    }
-
-    .favorites-dropdown__slider :deep(.el-slider__runway) {
-        margin: 0;
-    }
 </style>
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -947,7 +947,6 @@
    }

    .group-item {
-        border: 1px solid var(--el-border-color);
        border-radius: 8px;
        padding: 8px;
        cursor: pointer;
@@ -976,7 +975,6 @@

    .group-item__count {
        font-size: 12px;
-        color: var(--el-text-color-secondary);
    }

    .group-item__bottom {
@@ -987,13 +985,10 @@
    }

    .group-item.is-active {
-        border-color: var(--el-color-primary);
-        background-color: var(--el-color-primary-light-9, rgba(64, 158, 255, 0.12));
    }

    .group-empty {
        text-align: center;
-        color: var(--el-text-color-secondary);
        font-size: 12px;
        padding: 12px 0;
    }
@@ -1021,11 +1016,9 @@
    }

    .favorites-group-menu__item:hover {
-        background-color: var(--el-menu-hover-bg-color);
    }

    .favorites-group-menu__item--danger {
-        color: var(--el-color-danger);
    }

    .favorites-group-menu__item--submenu {
@@ -1034,7 +1027,6 @@

    .favorites-group-menu__arrow {
        margin-left: auto;
-        color: var(--el-text-color-secondary);
        font-size: 12px;
    }

@@ -1062,12 +1054,10 @@

    .group-visibility-menu__item:hover,
    .group-visibility-menu__item.is-active {
-        background-color: var(--el-menu-hover-bg-color);
    }

    .group-visibility-menu__check {
        font-size: 12px;
-        color: var(--el-color-primary);
    }

    .favorites-content {
@@ -1098,7 +1088,6 @@
    .favorites-content__title small {
        font-size: 12px;
        font-weight: normal;
-        color: var(--el-text-color-secondary);
    }

    .favorites-content__edit {
@@ -1106,7 +1095,6 @@
        align-items: center;
        gap: 8px;
        font-size: 13px;
-        color: var(--el-text-color-regular);
    }

    .favorites-content__edit-actions {
@@ -1122,10 +1110,6 @@
        margin-bottom: 12px;
    }

-    .favorites-content__actions .el-button {
-        margin: 0;
-    }
-
    .favorites-content__list {
        flex: 1;
        min-height: 0;
@@ -1175,11 +1159,9 @@
        display: flex;
        align-items: center;
        box-sizing: border-box;
-        border: 1px solid var(--el-border-color);
        border-radius: calc(8px * var(--favorites-card-scale, 1));
        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
        cursor: pointer;
-        background: var(--el-bg-color);
        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
@@ -1195,8 +1177,6 @@
    }

    :deep(.favorites-search-card.is-selected) {
-        border-color: var(--el-color-primary);
-        box-shadow: 0 0 0 1px var(--el-color-primary-light-3, rgba(64, 158, 255, 0.4));
    }

    :deep(.favorites-search-card__content) {
@@ -1212,7 +1192,6 @@
        height: calc(48px * var(--favorites-card-scale, 1));
        border-radius: calc(6px * var(--favorites-card-scale, 1));
        overflow: hidden;
-        background: var(--el-fill-color-lighter);
        flex-shrink: 0;
    }

@@ -1249,7 +1228,6 @@

    :deep(.favorites-search-card__detail .extra) {
        font-size: calc(12px * var(--favorites-card-scale, 1));
-        color: var(--el-text-color-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
@@ -1265,7 +1243,6 @@
        display: inline-flex;
        align-items: center;
        gap: 4px;
-        color: var(--el-text-color-secondary);
        font-size: 14px;
    }

@@ -1316,7 +1293,6 @@

    :deep(.favorites-search-card__location) {
        font-size: 12px;
-        color: var(--el-text-color-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
@@ -1326,7 +1302,6 @@
        display: flex;
        align-items: center;
        justify-content: center;
-        color: var(--el-text-color-secondary);
        font-size: 13px;
        height: 100%;
    }
@@ -1339,7 +1314,6 @@
    }

    .favorites-dropdown__control:not(:last-child) {
-        border-bottom: 1px solid var(--el-border-color-lighter);
    }

    .favorites-dropdown__control-header {
@@ -1348,20 +1322,14 @@
        justify-content: space-between;
        font-size: 13px;
        font-weight: 600;
-        color: var(--el-text-color-primary);
        margin-bottom: 6px;
    }

    .favorites-dropdown__control-value {
        font-size: 12px;
-        color: var(--el-text-color-secondary);
    }

    .favorites-dropdown__slider {
        padding: 0 4px 4px;
    }
-
-    .favorites-dropdown__slider :deep(.el-slider__runway) {
-        margin: 0;
-    }
 </style>
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -1420,7 +1420,6 @@
    }

    .group-item {
-        border: 1px solid var(--el-border-color);
        border-radius: 8px;
        padding: 8px;
        cursor: pointer;
@@ -1455,7 +1454,6 @@

    .group-item__count {
        font-size: 12px;
-        color: var(--el-text-color-secondary);
    }

    .group-item__bottom {
@@ -1466,8 +1464,6 @@
    }

    .group-item.is-active {
-        border-color: var(--el-color-primary);
-        background-color: var(--el-color-primary-light-9, rgba(64, 158, 255, 0.12));
    }

    .group-item--placeholder {
@@ -1479,7 +1475,6 @@
        width: 64px;
        height: 18px;
        border-radius: 999px;
-        background-color: var(--el-fill-color);
    }

    .group-item--new {
@@ -1488,7 +1483,6 @@
        align-items: center;
        justify-content: center;
        gap: 6px;
-        color: var(--el-color-primary);
        font-size: 14px;
    }

@@ -1496,13 +1490,8 @@
        width: 100%;
    }

-    .group-item__input :deep(.el-input__wrapper) {
-        width: 100%;
-    }
-
    .group-empty {
        text-align: center;
-        color: var(--el-text-color-secondary);
        font-size: 12px;
        padding: 12px 0;
    }
@@ -1529,11 +1518,9 @@
        align-self: stretch;
    }
    .favorites-group-menu__item:hover {
-        background-color: var(--el-menu-hover-bg-color);
    }

    .favorites-group-menu__item--danger {
-        color: var(--el-color-danger);
    }

    .favorites-group-menu__item--submenu {
@@ -1542,7 +1529,6 @@

    .favorites-group-menu__arrow {
        margin-left: auto;
-        color: var(--el-text-color-secondary);
        font-size: 12px;
    }

@@ -1570,12 +1556,10 @@

    .group-visibility-menu__item:hover,
    .group-visibility-menu__item.is-active {
-        background-color: var(--el-menu-hover-bg-color);
    }

    .group-visibility-menu__check {
        font-size: 12px;
-        color: var(--el-color-primary);
    }

    .favorites-content {
@@ -1606,7 +1590,6 @@
    .favorites-content__title small {
        font-size: 12px;
        font-weight: normal;
-        color: var(--el-text-color-secondary);
    }

    .favorites-content__edit {
@@ -1614,7 +1597,6 @@
        align-items: center;
        gap: 8px;
        font-size: 13px;
-        color: var(--el-text-color-regular);
    }

    .favorites-content__edit-actions {
@@ -1630,10 +1612,6 @@
        margin-bottom: 12px;
    }

-    .favorites-content__actions .el-button {
-        margin: 0;
-    }
-
    .favorites-content__list {
        flex: 1;
        min-height: 0;
@@ -1683,11 +1661,9 @@
        display: flex;
        align-items: center;
        box-sizing: border-box;
-        border: 1px solid var(--el-border-color);
        border-radius: calc(8px * var(--favorites-card-scale, 1));
        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
        cursor: pointer;
-        background: var(--el-bg-color);
        transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
@@ -1703,8 +1679,6 @@
    }

    :deep(.favorites-search-card.is-selected) {
-        border-color: var(--el-color-primary);
-        box-shadow: 0 0 0 1px var(--el-color-primary-light-3, rgba(64, 158, 255, 0.4));
    }

    :deep(.favorites-search-card__content) {
@@ -1720,7 +1694,6 @@
        height: calc(48px * var(--favorites-card-scale, 1));
        border-radius: calc(6px * var(--favorites-card-scale, 1));
        overflow: hidden;
-        background: var(--el-fill-color-lighter);
        flex-shrink: 0;
    }

@@ -1757,7 +1730,6 @@

    :deep(.favorites-search-card__detail .extra) {
        font-size: calc(12px * var(--favorites-card-scale, 1));
-        color: var(--el-text-color-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
@@ -1773,7 +1745,6 @@
        display: inline-flex;
        align-items: center;
        gap: 4px;
-        color: var(--el-text-color-secondary);
        font-size: 14px;
    }

@@ -1826,7 +1797,6 @@
        display: flex;
        align-items: center;
        justify-content: center;
-        color: var(--el-text-color-secondary);
        font-size: 13px;
        height: 100%;
    }
@@ -1839,7 +1809,6 @@
    }

    .favorites-dropdown__control:not(:last-child) {
-        border-bottom: 1px solid var(--el-border-color-lighter);
    }

    .favorites-dropdown__control-header {
@@ -1848,20 +1817,14 @@
        justify-content: space-between;
        font-size: 13px;
        font-weight: 600;
-        color: var(--el-text-color-primary);
        margin-bottom: 6px;
    }

    .favorites-dropdown__control-value {
        font-size: 12px;
-        color: var(--el-text-color-secondary);
    }

    .favorites-dropdown__slider {
        padding: 0 4px 4px;
    }
-
-    .favorites-dropdown__slider :deep(.el-slider__runway) {
-        margin: 0;
-    }
 </style>
--- a/src/views/FriendsLocations/FriendsLocations.vue
+++ b/src/views/FriendsLocations/FriendsLocations.vue
@@ -770,7 +770,6 @@

    .friend-view__toolbar--loading {
        justify-content: flex-end;
-        color: var(--el-text-color-secondary);
        font-size: 13px;
        font-weight: 500;
    }
@@ -786,7 +785,6 @@
        flex: 1;
        flex-wrap: wrap;
        justify-content: flex-end;
-        color: var(--el-text-color-regular);
    }

    .friend-view__virtual {
@@ -836,7 +834,6 @@
    .friend-view__scale-value {
        font-size: 12px;
        font-weight: 600;
-        color: var(--el-text-color-secondary);
        min-width: 42px;
        text-align: right;
    }
@@ -859,7 +856,6 @@
        display: grid;
        place-items: center;
        min-height: 240px;
-        color: var(--el-text-color-secondary);
    }

    .friend-view__grid {
@@ -892,7 +888,6 @@
        margin: 5px 10px;
        font-weight: 600;
        font-size: 13px;
-        color: var(--el-text-color-primary);
    }

    .friend-view__divider {
@@ -900,7 +895,6 @@
        align-items: center;
        gap: 12px;
        margin: 16px 4px;
-        color: var(--el-text-color-regular);
        font-size: 13px;
        font-weight: 600;
    }
@@ -910,7 +904,6 @@
        content: '';
        flex: 1;
        height: 1px;
-        background: var(--el-border-color);
    }

    .friend-view__divider-text {
@@ -919,14 +912,12 @@

    .friend-view__instance-count {
        font-size: 12px;
-        color: var(--el-text-color-secondary);
    }

    .friend-view__empty {
        display: grid;
        place-items: center;
        min-height: 240px;
-        color: var(--el-text-color-secondary);
        font-size: 15px;
        letter-spacing: 0.5px;
    }
@@ -937,7 +928,6 @@
        justify-content: center;
        gap: 8px;
        padding: 18px 0 12px;
-        color: var(--el-text-color-secondary);
        font-size: 14px;
    }

--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -95,9 +95,6 @@
        display: grid;
        gap: calc(14px * var(--card-scale) * var(--card-spacing));
        border-radius: 8px;
-        background: var(--el-bg-color-overlay);
-        border: 1px solid var(--el-border-color);
-        box-shadow: var(--el-box-shadow-lighter);
        transition:
            box-shadow 0.2s ease,
            transform 0.2s ease;
@@ -105,7 +102,6 @@
        min-width: var(--friend-card-min-width, 220px);

        &:hover {
-            box-shadow: var(--el-box-shadow-light);
            transform: translateY(calc(-2px * var(--card-scale)));
        }
    }
@@ -123,8 +119,6 @@
    }

    .friend-card__avatar {
-        border: 1px solid var(--el-border-color);
-        box-shadow: var(--el-box-shadow-lighter);
    }

    .friend-card__status-dot {
@@ -134,8 +128,6 @@
        inline-size: calc(12px * var(--card-scale));
        block-size: calc(12px * var(--card-scale));
        border-radius: 999px;
-        border: calc(2px * var(--card-scale)) solid var(--el-bg-color-overlay);
-        box-shadow: var(--el-box-shadow-lighter);
        pointer-events: none;
    }

@@ -171,7 +163,6 @@
    .friend-card__name {
        font-size: calc(17px * var(--card-scale));
        font-weight: 600;
-        color: var(--el-text-color-primary);
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
@@ -181,7 +172,6 @@
    .friend-card__signature {
        margin-top: calc(6px * var(--card-spacing));
        font-size: calc(13px * var(--card-scale));
-        color: var(--el-text-color-secondary);
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
@@ -197,7 +187,6 @@
        min-height: calc(40px * var(--card-scale));
        padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale));
        border-radius: calc(10px * var(--card-scale));
-        color: var(--el-text-color-regular);
        font-size: calc(12px * var(--card-scale));
        line-height: 1.3;
        box-sizing: border-box;
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -499,9 +499,7 @@
    .button-pd-0 {
        padding: 0;
    }
-    .ml-5 {
-        margin-left: 5px !important; /* due to ".el-button + .el-button" */
-    }
+
    .notification-image {
        flex: none;
        height: 30px;
--- a/src/views/PlayerList/components/photonEventColumns.jsx
+++ b/src/views/PlayerList/components/photonEventColumns.jsx
@@ -169,15 +169,11 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
        return (
            <>
                {r.platform === 'Desktop' ? (
-                    <span style="color: var(--el-color-primary)">
-                        Desktop&nbsp;
-                    </span>
+                    <span>Desktop&nbsp;</span>
                ) : r.platform === 'VR' ? (
-                    <span style="color: var(--el-color-primary)">VR&nbsp;</span>
+                    <span>VR&nbsp;</span>
                ) : r.platform === 'Quest' ? (
-                    <span style="color: var(--el-color-success)">
-                        Android&nbsp;
-                    </span>
+                    <span>Android&nbsp;</span>
                ) : null}
                <span
                    class="x-link"
--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -263,12 +263,10 @@
                                <span
                                    v-if="avatar.releaseStatus === 'public'"
                                    class="extra"
-                                    style="color: var(--el-color-success)"
                                    v-text="avatar.releaseStatus"></span>
                                <span
                                    v-else-if="avatar.releaseStatus === 'private'"
                                    class="extra"
-                                    style="color: var(--el-color-danger)"
                                    v-text="avatar.releaseStatus"></span>
                                <span v-else class="extra" v-text="avatar.releaseStatus"></span>
                                <span class="extra" v-text="avatar.authorName"></span>
--- a/src/views/Sidebar/Sidebar.vue
+++ b/src/views/Sidebar/Sidebar.vue
@@ -179,7 +179,6 @@

 <style scoped>
    .sidebar-tab-count {
-        color: var(--el-text-color-secondary);
        font-size: 12px;
        margin-left: 10px;
    }
--- a/src/views/Tools/Gallery.vue
+++ b/src/views/Tools/Gallery.vue
@@ -1198,13 +1198,11 @@
    }

    .gallery-tab-count {
-        color: var(--el-text-color-secondary);
        font-size: 12px;
        margin-left: 5px;
    }

    .gallery-meta {
-        color: var(--el-text-color-secondary);
        font-family: monospace;
        display: block;
    }
--- a/src/views/Tools/ScreenshotMetadata.vue
+++ b/src/views/Tools/ScreenshotMetadata.vue
@@ -7,7 +7,7 @@
            <span class="header">{{ t('dialog.screenshot_metadata.header') }}</span>
        </div>
        <div v-loading="screenshotMetadataDialog.loading" @dragover.prevent @dragenter.prevent @drop="handleDrop">
-            <span style="margin-left: 5px; color: var(--el-text-color-secondary); font-family: monospace">{{
+            <span>{{
                t('dialog.screenshot_metadata.drag')
            }}</span>
            <br />
@@ -101,7 +101,7 @@
                v-if="screenshotMetadataDialog.metadata.author"
                :userid="screenshotMetadataDialog.metadata.author.id"
                :hint="screenshotMetadataDialog.metadata.author.displayName"
-                style="color: var(--el-text-color-secondary); font-family: monospace" />
+            />
            <br />
            <div class="my-2 w-[90%] ml-17">
                <Carousel :opts="{ loop: false }" @init-api="handleScreenshotMetadataCarouselInit">
@@ -146,7 +146,6 @@
                <span class="x-link" @click="lookupUser(user)" v-text="user.displayName"></span>
                <span
                    v-if="user.pos"
-                    style="margin-left: 5px; color: var(--el-text-color-secondary); font-family: monospace"
                    v-text="'(' + user.pos.x + ', ' + user.pos.y + ', ' + user.pos.z + ')'"></span>
                <br />
            </span>
--- a/src/views/Tools/Tools.vue
+++ b/src/views/Tools/Tools.vue
@@ -323,14 +323,12 @@
            transition: all 0.2s ease;

            &:hover {
-                background-color: var(--el-color-primary-light-9);
            }

            .rotation-transition {
                font-size: 14px;
                margin-right: 8px;
                transition: transform 0.3s;
-                color: var(--el-color-primary);
            }

            .category-title {
@@ -358,7 +356,6 @@

        &:hover {
            transform: translateY(-2px);
-            box-shadow: var(--el-box-shadow-light);
        }

        .tool-content {
@@ -372,14 +369,11 @@
                display: flex;
                align-items: center;
                justify-content: center;
-                background-color: var(--el-color-primary-light-9);
                border-radius: 12px;
                margin-right: 20px;
-                box-shadow: var(--el-box-shadow-lighter);

                i {
                    font-size: 28px;
-                    color: var(--el-color-primary);
                }
            }

@@ -389,13 +383,11 @@
                .tool-name {
                    font-size: 18px;
                    font-weight: 600;
-                    color: var(--el-text-color-primary);
                    margin-bottom: 4px;
                }

                .tool-description {
                    font-size: 14px;
-                    color: var(--el-text-color-secondary);
                    opacity: 0.8;
                }
            }
--- a/src/views/Tools/components/GroupCalendarEventCard.vue
+++ b/src/views/Tools/components/GroupCalendarEventCard.vue
@@ -24,7 +24,7 @@
                        @mouseleave="scheduleCloseEventPopover">
                        <div class="flex items-baseline justify-between gap-3 text-xs">
                            <div class="text-[13px] font-semibold">{{ event.title }}</div>
-                            <div class="whitespace-nowrap text-[var(--el-text-color-regular)]">
+                            <div class="whitespace-nowrap">
                                {{ formatTimeRange(event.startsAt, event.endsAt) }}
                            </div>
                        </div>
@@ -42,19 +42,19 @@
                                </Button>
                            </div>
                            <div class="flex min-w-0 flex-col gap-1">
-                                <div class="text-[var(--el-text-color-regular)]">
+                                <div>
                                    {{ t('dialog.group_calendar.event_card.category') }}
                                </div>
                                <div class="font-medium">{{ capitalizeFirst(event.category) }}</div>
                            </div>
                            <div class="flex min-w-0 flex-col gap-1">
-                                <div class="text-[var(--el-text-color-regular)]">
+                                <div>
                                    {{ t('dialog.group_calendar.event_card.interested_user') }}
                                </div>
                                <div class="font-medium">{{ event.interestedUserCount }}</div>
                            </div>
                            <div class="flex min-w-0 flex-col gap-1">
-                                <div class="text-[var(--el-text-color-regular)]">
+                                <div>
                                    {{ t('dialog.group_calendar.event_card.close_time') }}
                                </div>
                                <div class="font-medium">
@@ -62,7 +62,7 @@
                                </div>
                            </div>
                            <div class="flex min-w-0 flex-col gap-1">
-                                <div class="text-[var(--el-text-color-regular)]">
+                                <div>
                                    {{ t('dialog.group_calendar.event_card.created') }}
                                </div>
                                <div class="font-medium">
@@ -70,7 +70,7 @@
                                </div>
                            </div>
                            <div class="col-span-2 flex min-w-0 flex-col gap-1">
-                                <div class="text-[var(--el-text-color-regular)]">
+                                <div>
                                    {{ t('dialog.group_calendar.event_card.description') }}
                                </div>
                                <div class="whitespace-pre-wrap break-words font-normal leading-snug">
@@ -263,7 +263,6 @@

    .event-card:hover {
        transform: translateY(-2px);
-        box-shadow: var(--el-box-shadow-light);
    }

    .event-card.grouped-card {
@@ -312,14 +311,10 @@
        height: 24px;
        gap: 4px;
        border-radius: 50%;
-        background-color: var(--el-text-color-regular);
-        color: var(--el-bg-color);
-        box-shadow: var(--el-box-shadow-lighter);
        cursor: pointer;
    }

    .event-card .badges .following-badge.is-following {
-        background-color: var(--group-calendar-badge-following, var(--el-color-success));
    }

    .event-card .badges .share-badge {
@@ -330,9 +325,6 @@
        height: 24px;
        gap: 4px;
        border-radius: 50%;
-        background-color: var(--el-text-color-regular);
-        color: var(--el-bg-color);
-        box-shadow: var(--el-box-shadow-lighter);
        cursor: pointer;
        margin-right: 5px;
    }
@@ -378,7 +370,6 @@
    }

    .event-card .event-title-content:hover {
-        color: var(--el-color-primary);
    }

    .event-card .event-info {
@@ -393,11 +384,9 @@

    .grid-view .event-card .event-info {
        font-size: 11px;
-        color: var(--el-text-color-regular);
    }

    .event-card .event-time {
        font-weight: 500;
-        color: var(--el-color-primary);
    }
 </style>
--- a/src/views/Tools/components/GroupCalendarMonth.vue
+++ b/src/views/Tools/components/GroupCalendarMonth.vue
@@ -187,7 +187,6 @@
    }

    .calendar-date-content.has-events {
-        background-color: var(--group-calendar-event-bg, color-mix(in oklch, var(--el-color-primary) 10%, transparent));
    }

    .calendar-event-badge {
@@ -197,23 +196,19 @@
        min-width: 14px;
        height: 14px;
        border-radius: 9px;
-        color: var(--el-color-white, #fff);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
-        box-shadow: var(--el-box-shadow-lighter);
        z-index: 10;
        padding: 0 5px;
        line-height: 14px;
    }

    .calendar-event-badge.has-following {
-        background-color: var(--group-calendar-badge-following, var(--el-color-success));
    }

    .calendar-event-badge.no-following {
-        background-color: var(--group-calendar-badge-normal, var(--el-color-primary));
    }

    .calendar-event-dot {
@@ -225,7 +220,6 @@
        height: 6px;
        border-radius: 9999px;
        background-color: var(--group-calendar-event-dot, #ef4444);
-        box-shadow: var(--el-box-shadow-lighter);
        z-index: 5;
        pointer-events: none;
    }
--- a/src/views/Tools/dialogs/GroupCalendarDialog.vue
+++ b/src/views/Tools/dialogs/GroupCalendarDialog.vue
@@ -446,12 +446,6 @@

 <style scoped>
    .x-dialog {
-        :deep(.el-dialog) {
-            max-height: 750px;
-            .el-dialog__body {
-                height: 680px;
-            }
-        }
        .top-content {
            height: 640px;
            position: relative;
@@ -478,7 +472,6 @@
                    .timeline-timestamp {
                        font-size: 13px;
                        font-weight: 600;
-                        color: var(--el-text-color-secondary);
                        margin-bottom: 8px;
                    }

@@ -487,7 +480,6 @@
                        display: flex;
                        align-items: center;
                        justify-content: center;
-                        color: var(--el-text-color-secondary);
                    }
                    .time-group-container {
                        display: flex;
@@ -516,7 +508,6 @@
                            &.has-events {
                                background-color: var(
                                    --group-calendar-event-bg,
-                                    color-mix(in oklch, var(--el-color-primary) 10%, transparent)
                                );
                            }
                            .calendar-event-badge {
@@ -526,21 +517,17 @@
                                min-width: 16px;
                                height: 16px;
                                border-radius: 8px;
-                                color: var(--el-color-white, #fff);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 10px;
                                font-weight: bold;
-                                box-shadow: var(--el-box-shadow-lighter);
                                z-index: 10;
                                padding: 0 4px;
                                line-height: 16px;
                                &.has-following {
-                                    background-color: var(--group-calendar-badge-following, var(--el-color-success));
                                }
                                &.no-following {
-                                    background-color: var(--group-calendar-badge-normal, var(--el-color-primary));
                                }
                            }
                        }
@@ -603,7 +590,6 @@
        flex-direction: column;
        .search-container {
            padding: 2px 20px 12px 20px;
-            border-bottom: 1px solid var(--el-border-color-lighter);
            display: flex;
            justify-content: flex-end;
            .search-input {
@@ -623,7 +609,6 @@
                    .group-header {
                        font-size: 16px;
                        font-weight: bold;
-                        color: var(--el-text-color-primary);
                        padding: 4px 12px 10px 12px;
                        cursor: pointer;
                        border-radius: 4px;
@@ -635,7 +620,6 @@
                            font-size: 14px;
                            margin-right: 8px;
                            transition: transform 0.3s;
-                            color: var(--el-color-primary);
                        }
                    }
                    .events-row {
@@ -652,7 +636,6 @@
                align-items: center;
                height: 200px;
                font-size: 16px;
-                color: var(--el-text-color-secondary);
            }
        }
    }