clean up element plus css

src/components/AvatarInfo.vue

@@ -5,7 +5,7 @@
             <Unlock v-else-if="avatarType === '(public)'" class="h-4 w-4" />
         </span>
         <span class="mr-2">{{ avatarName }}</span>
-        <span v-if="avatarTags" style="color: var(--el-text-color-secondary); font-size: 12px">{{ avatarTags }}</span>
+        <span v-if="avatarTags" style="font-size: 12px">{{ avatarTags }}</span>
     </div>
 </template>
 

src/components/InstanceInfo.vue

@@ -49,17 +49,13 @@
             >{{ props.instance.userCount }}/{{ props.instance.capacity }}</span
         >
         <span v-if="props.friendcount" style="margin-left: 5px">({{ props.friendcount }})</span>
-        <span
+        <span v-if="state.isValidInstance && !props.instance.hasCapacityForYou" style="margin-left: 5px">{{
-            v-if="state.isValidInstance && !props.instance.hasCapacityForYou"
+            t('dialog.user.info.instance_full')
-            style="margin-left: 5px; color: var(--el-color-danger)"
+        }}</span>
-            >{{ t('dialog.user.info.instance_full') }}</span
-        >
         <span v-if="props.instance.queueSize" style="margin-left: 5px"
             >{{ t('dialog.user.info.instance_queue') }} {{ props.instance.queueSize }}</span
         >
-        <span v-if="state.isAgeGated" style="margin-left: 5px; color: var(--el-color-danger)">{{
+        <span v-if="state.isAgeGated" style="margin-left: 5px">{{ t('dialog.user.info.instance_age_gated') }}</span>
-            t('dialog.user.info.instance_age_gated')
-        }}</span>
     </div>
 </template>
 

src/components/NavMenu.vue

@@ -42,7 +42,9 @@
                             <SidebarMenuItem v-else>
                                 <Collapsible
                                     class="group/collapsible"
-                                    :default-open="activeMenuIndex && item.children?.some((e) => e.index === activeMenuIndex)">
+                                    :default-open="
+                                        activeMenuIndex && item.children?.some((e) => e.index === activeMenuIndex)
+                                    ">
                                     <template #default="{ open }">
                                         <CollapsibleTrigger as-child>
                                             <SidebarMenuButton
@@ -63,9 +65,7 @@
                                         </CollapsibleTrigger>
                                         <CollapsibleContent>
                                             <SidebarMenuSub>
-                                                <SidebarMenuSubItem
+                                                <SidebarMenuSubItem v-for="entry in item.children" :key="entry.index">
-                                                    v-for="entry in item.children"
-                                                    :key="entry.index">
                                                     <SidebarMenuSubButton
                                                         :is-active="activeMenuIndex === entry.index"
                                                         @click="handleSubmenuClick(entry, item.index)">
@@ -93,7 +93,8 @@
                     <DropdownMenu>
                         <DropdownMenuTrigger as-child>
                             <SidebarMenuButton :tooltip="t('nav_tooltip.help_support')">
-                                <i class="ri-question-line inline-flex size-6 items-center justify-center text-[19px]" />
+                                <i
+                                    class="ri-question-line inline-flex size-6 items-center justify-center text-[19px]" />
                                 <span v-show="!isCollapsed">{{ t('nav_tooltip.help_support') }}</span>
                             </SidebarMenuButton>
                         </DropdownMenuTrigger>
@@ -122,7 +123,8 @@
                     <DropdownMenu>
                         <DropdownMenuTrigger as-child>
                             <SidebarMenuButton :tooltip="t('nav_tooltip.manage')">
-                                <i class="ri-settings-3-line inline-flex size-6 items-center justify-center text-[19px]" />
+                                <i
+                                    class="ri-settings-3-line inline-flex size-6 items-center justify-center text-[19px]" />
                                 <span v-show="!isCollapsed">{{ t('nav_tooltip.manage') }}</span>
                             </SidebarMenuButton>
                         </DropdownMenuTrigger>
@@ -166,17 +168,24 @@
                                         <DropdownMenuSubTrigger>
                                             <span>{{ t('view.settings.appearance.theme_color.header') }}</span>
                                         </DropdownMenuSubTrigger>
-                                        <DropdownMenuSubContent side="right" align="start" class="w-72 max-h-80 overflow-auto">
+                                        <DropdownMenuSubContent
+                                            side="right"
+                                            align="start"
+                                            class="w-72 max-h-80 overflow-auto">
                                             <DropdownMenuItem
                                                 v-for="color in colorFamilies"
                                                 :key="color.name"
                                                 :disabled="isApplyingPrimaryColor"
                                                 @click="handleThemeColorSelect(color)">
                                                 <span class="flex items-center gap-2 min-w-0 flex-1">
-                                                    <span class="h-3 w-3 shrink-0 rounded-sm" :style="{ backgroundColor: color.base }" />
+                                                    <span
+                                                        class="h-3 w-3 shrink-0 rounded-sm"
+                                                        :style="{ backgroundColor: color.base }" />
                                                     <span class="truncate">{{ color.name }}</span>
                                                 </span>
-                                                <span v-if="currentPrimary === color.base" class="text-muted-foreground">✓</span>
+                                                <span v-if="currentPrimary === color.base" class="text-muted-foreground"
+                                                    >✓</span
+                                                >
                                             </DropdownMenuItem>
                                         </DropdownMenuSubContent>
                                     </DropdownMenuSub>
@@ -213,26 +222,6 @@
 </template>
 
 <script setup>
-    import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
-    import dayjs from 'dayjs';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-    import { useRouter } from 'vue-router';
-
-    import { ChevronRight } from 'lucide-vue-next';
-
-    import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-    import {
-        DropdownMenu,
-        DropdownMenuContent,
-        DropdownMenuItem,
-        DropdownMenuLabel,
-        DropdownMenuSeparator,
-        DropdownMenuSub,
-        DropdownMenuSubContent,
-        DropdownMenuSubTrigger,
-        DropdownMenuTrigger
-    } from '@/components/ui/dropdown-menu';
     import {
         Sidebar,
         SidebarContent,
@@ -247,6 +236,25 @@
         SidebarMenuSubItem,
         SidebarRail
     } from '@/components/ui/sidebar';
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuLabel,
+        DropdownMenuSeparator,
+        DropdownMenuSub,
+        DropdownMenuSubContent,
+        DropdownMenuSubTrigger,
+        DropdownMenuTrigger
+    } from '@/components/ui/dropdown-menu';
+    import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
+    import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+    import { ChevronRight } from 'lucide-vue-next';
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
+    import { useRouter } from 'vue-router';
+
+    import dayjs from 'dayjs';
 
     import {
         useAppearanceSettingsStore,
@@ -258,7 +266,6 @@
     } from '../stores';
     import { THEME_CONFIG, links, navDefinitions } from '../shared/constants';
     import { openExternalLink } from '../shared/utils';
-    import { useThemePrimaryColor } from '../composables/useElementTheme';
 
     import configRepository from '../service/config';
 
@@ -388,14 +395,14 @@
 
     const themes = computed(() => Object.keys(THEME_CONFIG));
 
-    const {
+    // const {
-        currentPrimary,
+    //     currentPrimary,
-        isApplying: isApplyingPrimaryColor,
+    //     isApplying: isApplyingPrimaryColor,
-        applyCustomPrimaryColor,
+    //     applyCustomPrimaryColor,
-        initPrimaryColor,
+    //     initPrimaryColor,
-        colorFamilies,
+    //     colorFamilies,
-        selectPaletteColor
+    //     selectPaletteColor
-    } = useThemePrimaryColor();
+    // } = useThemePrimaryColor();
 
     watch(
         () => locale.value,
@@ -495,9 +502,9 @@
         appearanceSettingsStore.setThemeMode(theme);
     };
 
-    const handleThemeColorSelect = async (colorFamily) => {
+    // const handleThemeColorSelect = async (colorFamily) => {
-        await selectPaletteColor(colorFamily);
+    //     await selectPaletteColor(colorFamily);
-    };
+    // };
 
     const openGithub = () => {
         openExternalLink('https://github.com/vrcx-team/VRCX');
@@ -680,7 +687,7 @@
     };
 
     onMounted(async () => {
-        await initPrimaryColor();
+        // await initPrimaryColor();
         await loadNavMenuConfig();
     });
 </script>
@@ -712,7 +719,6 @@
             inline-size: 14px;
             block-size: 14px;
             border-radius: 4px;
-            border: 1px solid var(--el-border-color-lighter);
             flex: none;
         }
 
@@ -726,7 +732,6 @@
 
         .nav-menu-theme__custom-label {
             font-size: 13px;
-            color: var(--el-text-color-regular);
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;

src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue

@@ -79,12 +79,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="avatarTagStrings.get(avatar.id)"></span>

src/components/dialogs/CustomNavDialog.vue

@@ -548,7 +548,6 @@
     }
 
     .custom-nav-entry {
-        border: 1px solid var(--el-border-color);
         border-radius: 8px;
         padding: 10px 12px;
         display: flex;
@@ -606,7 +605,6 @@
 
     .custom-nav-entry__folder-empty {
         font-size: 12px;
-        color: var(--el-text-color-secondary);
     }
 
     .custom-nav-dialog__footer {
@@ -645,13 +643,11 @@
     }
 
     .folder-editor__column {
-        border: 1px solid var(--el-border-color);
         border-radius: 8px;
         padding: 10px;
         min-height: 220px;
         display: flex;
         flex-direction: column;
-        background: var(--el-fill-color-blank);
     }
 
     .folder-editor__column-title {
@@ -665,7 +661,6 @@
         align-items: center;
         justify-content: center;
         font-size: 12px;
-        color: var(--el-text-color-secondary);
         text-align: center;
     }
 
@@ -692,7 +687,6 @@
         align-items: center;
         gap: 12px;
         padding: 6px 0;
-        border-bottom: 1px solid var(--el-border-color-light);
     }
 
     .folder-editor__selected-item:last-child {

src/components/dialogs/UserDialog/UserDialog.vue

@@ -410,13 +410,10 @@
                                 <div class="x-friend-item" @click="toggleAvatarCopying">
                                     <div class="detail">
                                         <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
-                                        <span
+                                        <span v-if="currentUser.allowAvatarCopying" class="extra">{{
-                                            v-if="currentUser.allowAvatarCopying"
+                                            t('dialog.user.info.avatar_cloning_allow')
-                                            class="extra"
+                                        }}</span>
-                                            style="color: var(--el-color-success)"
+                                        <span v-else class="extra">{{
-                                            >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
-                                        >
-                                        <span v-else class="extra" style="color: var(--el-color-danger)">{{
                                             t('dialog.user.info.avatar_cloning_deny')
                                         }}</span>
                                     </div>
@@ -424,13 +421,10 @@
                                 <div class="x-friend-item" @click="toggleAllowBooping">
                                     <div class="detail">
                                         <span class="name">{{ t('dialog.user.info.booping') }}</span>
-                                        <span
+                                        <span v-if="currentUser.isBoopingEnabled" class="extra">{{
-                                            v-if="currentUser.isBoopingEnabled"
+                                            t('dialog.user.info.avatar_cloning_allow')
-                                            class="extra"
+                                        }}</span>
-                                            style="color: var(--el-color-success)"
+                                        <span v-else class="extra">{{
-                                            >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
-                                        >
-                                        <span v-else class="extra" style="color: var(--el-color-danger)">{{
                                             t('dialog.user.info.avatar_cloning_deny')
                                         }}</span>
                                     </div>
@@ -438,13 +432,10 @@
                                 <div class="x-friend-item" @click="toggleSharedConnectionsOptOut">
                                     <div class="detail">
                                         <span class="name">{{ t('dialog.user.info.show_mutual_friends') }}</span>
-                                        <span
+                                        <span v-if="!currentUser.hasSharedConnectionsOptOut" class="extra">{{
-                                            v-if="!currentUser.hasSharedConnectionsOptOut"
+                                            t('dialog.user.info.avatar_cloning_allow')
-                                            class="extra"
+                                        }}</span>
-                                            style="color: var(--el-color-success)"
+                                        <span v-else class="extra">{{
-                                            >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
-                                        >
-                                        <span v-else class="extra" style="color: var(--el-color-danger)">{{
                                             t('dialog.user.info.avatar_cloning_deny')
                                         }}</span>
                                     </div>
@@ -454,13 +445,10 @@
                                 <div class="x-friend-item" style="cursor: default">
                                     <div class="detail">
                                         <span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
-                                        <span
+                                        <span v-if="userDialog.ref.allowAvatarCopying" class="extra">{{
-                                            v-if="userDialog.ref.allowAvatarCopying"
+                                            t('dialog.user.info.avatar_cloning_allow')
-                                            class="extra"
+                                        }}</span>
-                                            style="color: var(--el-color-success)"
+                                        <span v-else class="extra">{{
-                                            >{{ t('dialog.user.info.avatar_cloning_allow') }}</span
-                                        >
-                                        <span v-else class="extra" style="color: var(--el-color-danger)">{{
                                             t('dialog.user.info.avatar_cloning_deny')
                                         }}</span>
                                     </div>
@@ -622,7 +610,7 @@
                                     <span
                                         style="
                                             margin-left: 10px;
-                                            color: var(--el-text-color-secondary);
+
                                             font-size: 10px;
                                         "
                                         >{{ t('dialog.user.groups.hold_shift') }}</span
@@ -849,7 +837,7 @@
                                                 size="icon-sm"
                                                 variant="outline"
                                                 v-if="shiftHeld"
-                                                style="color: var(--el-color-danger); margin-left: 5px"
+                                                style="margin-left: 5px"
                                                 @click.stop="leaveGroup(group.id)">
                                                 <LogOut />
                                             </Button>
@@ -871,8 +859,7 @@
                                     <span style="font-weight: bold; font-size: 16px">{{
                                         t('dialog.user.groups.own_groups')
                                     }}</span>
-                                    <span
+                                    <span style="font-size: 12px; margin-left: 5px"
-                                        style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px"
                                         >{{ userGroups.ownGroups.length }}/{{
                                             cachedConfig?.constants?.GROUPS?.MAX_OWNED
                                         }}</span
@@ -918,10 +905,9 @@
                                     <span style="font-weight: bold; font-size: 16px">{{
                                         t('dialog.user.groups.mutual_groups')
                                     }}</span>
-                                    <span
+                                    <span style="font-size: 12px; margin-left: 5px">{{
-                                        style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px"
+                                        userGroups.mutualGroups.length
-                                        >{{ userGroups.mutualGroups.length }}</span
+                                    }}</span>
-                                    >
                                     <div
                                         class="x-friend-list"
                                         style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
@@ -963,12 +949,7 @@
                                     <span style="font-weight: bold; font-size: 16px">{{
                                         t('dialog.user.groups.groups')
                                     }}</span>
-                                    <span
+                                    <span style="font-size: 12px; margin-left: 5px">
-                                        style="
-                                            color: var(--el-text-color-secondary);
-                                            font-size: 12px;
-                                            margin-left: 5px;
-                                        ">
                                         {{ userGroups.remainingGroups.length }}
                                         <template v-if="currentUser.id === userDialog.id">
                                             /
@@ -1125,12 +1106,7 @@
                                             :class="userFavoriteWorldsStatus(list[1])">
                                         </i>
                                         <span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
-                                        <span
+                                        <span style="font-size: 10px; margin-left: 5px"
-                                            style="
-                                                color: var(--el-text-color-secondary);
-                                                font-size: 10px;
-                                                margin-left: 5px;
-                                            "
                                             >{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
                                         >
                                     </span>
@@ -1266,13 +1242,11 @@
                                     <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>

src/composables/useElementTheme.js

@@ -5,7 +5,7 @@ import colors from 'tailwindcss/colors';
 import configRepository from '../service/config';
 
 // Tailwind indigo-500 in OKLCH
-export const DEFAULT_PRIMARY_COLOR = 'oklch(58.5% 0.233 277.117)';
+const DEFAULT_PRIMARY_COLOR = 'oklch(58.5% 0.233 277.117)';
 const DARK_WEIGHT = 0.2;
 const CONFIG_KEY = 'VRCX_elPrimaryColor';
 const STYLE_ID = 'el-dynamic-theme';

src/plugin/ui.js

@@ -1,10 +1,10 @@
 import {
-    changeAppDarkStyle,
+    // changeAppDarkStyle,
     changeAppThemeStyle,
     changeHtmlLangAttribute,
     getThemeMode,
-    refreshCustomCss,
+    refreshCustomCss
-    setLoginContainerStyle
+    // setLoginContainerStyle
 } from '../shared/utils/base/ui';
 import { i18n, loadLocalizedStrings } from './i18n';
 
@@ -23,7 +23,7 @@ export async function initUi() {
 
         const { initThemeMode, isDarkMode } =
             await getThemeMode(configRepository);
-        setLoginContainerStyle(isDarkMode);
+        // setLoginContainerStyle(isDarkMode);
         changeAppThemeStyle(initThemeMode);
     } catch (error) {
         console.error('Error initializing locale and theme:', error);

src/shared/utils/base/ui.js

@@ -260,53 +260,11 @@ function formatJsonVars(ref) {
     return sortedRef;
 }
 
-function getNextDialogIndex() {
-    let z = 2000;
-    document.querySelectorAll('.el-overlay,.el-modal-dialog').forEach((v) => {
-        // @ts-ignore
-        if (v.style.display === 'none') {
-            return;
-        }
-        // @ts-ignore
-        const _z = Number(v.style.zIndex) || 0;
-        if (_z > z) {
-            z = _z;
-        }
-    });
-    return z + 1;
-}
-
 function changeHtmlLangAttribute(language) {
     const htmlElement = document.documentElement;
     htmlElement.setAttribute('lang', language);
 }
 
-// prevent flicker on login page
-function setLoginContainerStyle(isDarkMode) {
-    const loginContainerStyle = document.createElement('style');
-    loginContainerStyle.id = 'login-container-style';
-    loginContainerStyle.type = 'text/css';
-
-    const backgroundFallback = isDarkMode ? '#101010' : '#ffffff';
-    const inputBackgroundFallback = isDarkMode ? '#1f1f1f' : '#ffffff';
-    const borderFallback = isDarkMode ? '#3b3b3b' : '#DCDFE6';
-
-    loginContainerStyle.innerHTML = `
-    .x-login-container {
-        background-color: var(--el-bg-color-page, ${backgroundFallback}) !important;
-        transition: background-color 0.3s ease;
-    }
-
-    .x-login-container .el-input__wrapper {
-        background-color: var(--el-bg-color, ${inputBackgroundFallback}) !important;
-        border: 1px solid var(--el-border-color, ${borderFallback}) !important;
-        transition: background-color 0.3s ease, border-color 0.3s ease;
-    }
-        `;
-
-    document.head.insertBefore(loginContainerStyle, document.head.firstChild);
-}
-
 async function getThemeMode(configRepository) {
     const initThemeMode = await configRepository.getString(
         'VRCX_ThemeMode',
@@ -340,9 +298,7 @@ export {
     HueToHex,
     HSVtoRGB,
     formatJsonVars,
-    getNextDialogIndex,
     changeHtmlLangAttribute,
-    setLoginContainerStyle,
     getThemeMode,
     redirectToToolsTab
 };

src/stores/settings/appearance.js

@@ -13,7 +13,6 @@ import { database } from '../../service/database';
 import { getNameColour } from '../../shared/utils';
 import { languageCodes } from '../../localization';
 import { loadLocalizedStrings } from '../../plugin';
-import { useElementTheme } from '../../composables/useElementTheme';
 import { useFeedStore } from '../feed';
 import { useGameLogStore } from '../gameLog';
 import { useModalStore } from '../modal';
@@ -42,7 +41,7 @@ export const useAppearanceSettingsStore = defineStore(
 
         const MAX_TABLE_PAGE_SIZE = 1000;
         const DEFAULT_TABLE_PAGE_SIZES = [10, 15, 20, 25, 50, 100];
-        const { initPrimaryColor } = useElementTheme();
+        // const { initPrimaryColor } = useElementTheme();
 
         const appLanguage = ref('en');
         const themeMode = ref('');
@@ -204,7 +203,7 @@ export const useAppearanceSettingsStore = defineStore(
 
             themeMode.value = themeModeConfig;
             setThemeMode(themeModeConfig);
-            await initPrimaryColor();
+            // await initPrimaryColor();
 
             displayVRCPlusIconsAsAvatar.value =
                 displayVRCPlusIconsAsAvatarConfig;

src/styles/globals.css

@@ -4,15 +4,14 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-    --primary: var(--el-color-primary);
+
-    --ring: var(--el-color-primary);
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    /* --primary: oklch(0.205 0 0); */
+    --primary: oklch(0.205 0 0);
     --primary-foreground: oklch(0.985 0 0);
     --secondary: oklch(0.97 0 0);
     --secondary-foreground: oklch(0.205 0 0);
@@ -24,7 +23,7 @@
     --destructive-foreground: oklch(0.577 0.245 27.325);
     --border: oklch(0.922 0 0);
     --input: oklch(0.922 0 0);
-    /* --ring: oklch(0.708 0 0); */
+    --ring: oklch(0.708 0 0);
     --chart-1: oklch(0.646 0.222 41.116);
     --chart-2: oklch(0.6 0.118 184.704);
     --chart-3: oklch(0.398 0.07 227.392);
@@ -42,15 +41,13 @@
 }
 
 .dark {
-    --primary: var(--el-color-primary);
-    --ring: var(--el-color-primary);
     --background: oklch(0.145 0 0);
     --foreground: oklch(0.985 0 0);
     --card: oklch(0.145 0 0);
     --card-foreground: oklch(0.985 0 0);
     --popover: oklch(0.145 0 0);
     --popover-foreground: oklch(0.985 0 0);
-    /* --primary: oklch(0.985 0 0); */
+    --primary: oklch(0.985 0 0);
     --primary-foreground: oklch(0.205 0 0);
     --secondary: oklch(0.269 0 0);
     --secondary-foreground: oklch(0.985 0 0);
@@ -62,7 +59,7 @@
     --destructive-foreground: oklch(0.637 0.237 25.331);
     --border: oklch(0.269 0 0);
     --input: oklch(0.269 0 0);
-    /* --ring: oklch(0.439 0 0); */
+    --ring: oklch(0.439 0 0);
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);
     --chart-3: oklch(0.769 0.188 70.08);

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;

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>

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>

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>

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>

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

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;

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;

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)">
+                    <span>Desktop&nbsp;</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)">
+                    <span>Android&nbsp;</span>
-                        Android&nbsp;
-                    </span>
                 ) : null}
                 <span
                     class="x-link"

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>

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

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

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>

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

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>

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

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