diff --git a/html/src/app.js b/html/src/app.js
index 07331b3e..0907d3ca 100644
--- a/html/src/app.js
+++ b/html/src/app.js
@@ -217,11 +217,6 @@ speechSynthesis.getVoices();
Vue.use(DataTables);
- var $appDarkStyle = document.createElement('link');
- $appDarkStyle.disabled = true;
- $appDarkStyle.rel = 'stylesheet';
- $appDarkStyle.href = `app.dark.css?_=${Date.now()}`;
- document.head.appendChild($appDarkStyle);
// #endregion
// #region | Init: Languages
@@ -1230,7 +1225,7 @@ speechSynthesis.getVoices();
var travelingToLocation = $app.lastLocationDestination;
var travelingToWorld = $travelingLocation.worldId;
var travelingToInstance = $travelingLocation.instanceId;
- if (!$app.isGameRunning) {
+ if (!$app.isGameRunning && json.presence) {
if ($app.isRealInstance(json.presence.world)) {
location = `${json.presence.world}:${json.presence.instance}`;
travelingToLocation = `${json.presence.travelingToWorld}:${json.presence.travelingToInstance}`;
@@ -5088,6 +5083,7 @@ speechSynthesis.getVoices();
watch: {},
el: '#x-app',
mounted() {
+ this.changeThemeMode();
AppApi.SetUserAgent();
AppApi.GetVersion().then((version) => {
this.appVersion = version;
@@ -13833,42 +13829,74 @@ speechSynthesis.getVoices();
'VRCX_ThemeMode',
'system'
);
- var systemIsDarkMode = () =>
- window.matchMedia('(prefers-color-scheme: dark)').matches;
- $app.data.isDarkMode =
- $app.data.themeMode === 'system'
- ? systemIsDarkMode()
- : configRepository.getBool('isDarkMode');
- $appDarkStyle.disabled = $app.data.isDarkMode === false;
- $app.watch.isDarkMode = function () {
- configRepository.setBool('isDarkMode', this.isDarkMode);
- $appDarkStyle.disabled = this.isDarkMode === false;
+
+ $app.data.isDarkMode = false;
+
+ $app.methods.systemIsDarkMode = function () {
+ return window.matchMedia('(prefers-color-scheme: dark)').matches;
+ };
+
+ window
+ .matchMedia('(prefers-color-scheme: dark)')
+ .addEventListener('change', () => {
+ if ($app.themeMode === 'system') {
+ $app.saveThemeMode();
+ }
+ });
+
+ $app.methods.saveThemeMode = function () {
+ configRepository.setString('VRCX_ThemeMode', this.themeMode);
+ this.changeThemeMode();
+ };
+
+ $app.methods.changeThemeMode = function () {
+ if (document.contains(document.getElementById('app-theme-style'))) {
+ document.getElementById('app-theme-style').remove();
+ }
+ var $appThemeStyle = document.createElement('link');
+ $appThemeStyle.setAttribute('id', 'app-theme-style');
+ $appThemeStyle.rel = 'stylesheet';
+ switch (this.themeMode) {
+ case 'light':
+ $appThemeStyle.href = '';
+ this.isDarkMode = false;
+ break;
+ case 'dark':
+ $appThemeStyle.href = 'theme.dark.css';
+ this.isDarkMode = true;
+ break;
+ case 'darkvanilla':
+ $appThemeStyle.href = 'theme.darkvanilla.css';
+ this.isDarkMode = true;
+ break;
+ case 'pink':
+ $appThemeStyle.href = 'theme.pink.css';
+ this.isDarkMode = true;
+ break;
+ case 'material3':
+ $appThemeStyle.href = 'theme.material3.css';
+ this.isDarkMode = true;
+ break;
+ case 'system':
+ if (this.systemIsDarkMode()) {
+ $appThemeStyle.href = 'theme.dark.css';
+ this.isDarkMode = true;
+ } else {
+ $appThemeStyle.href = '';
+ this.isDarkMode = false;
+ }
+ break;
+ }
if (this.isDarkMode) {
AppApi.ChangeTheme(1);
} else {
AppApi.ChangeTheme(0);
}
+ document.head.appendChild($appThemeStyle);
this.updateVRConfigVars();
this.updatetrustColor();
};
- if ($app.data.isDarkMode) {
- AppApi.ChangeTheme(1);
- } else {
- AppApi.ChangeTheme(0);
- }
- window
- .matchMedia('(prefers-color-scheme: dark)')
- .addEventListener('change', (e) => {
- $app._data.isDarkMode = e && e.matches;
- });
- $app.watch.themeMode = function () {
- configRepository.setString('VRCX_ThemeMode', this.themeMode);
- if (this.themeMode === 'system') {
- this.isDarkMode = systemIsDarkMode();
- } else {
- this.isDarkMode = this.themeMode === 'dark';
- }
- };
+
$app.data.isStartAtWindowsStartup = configRepository.getBool(
'VRCX_StartAtWindowsStartup',
false
@@ -14166,6 +14194,9 @@ speechSynthesis.getVoices();
);
$app.methods.updatetrustColor = function () {
+ if (typeof API.currentUser?.id === 'undefined') {
+ return;
+ }
configRepository.setBool(
'VRCX_randomUserColours',
this.randomUserColours
diff --git a/html/src/app.scss b/html/src/app.scss
index 46ef01ec..48c913d9 100644
--- a/html/src/app.scss
+++ b/html/src/app.scss
@@ -213,11 +213,19 @@ a {
border-radius: 50%;
}
+.pending-update {
+ margin: 7px;
+ height: 50px;
+ width: 50px;
+ cursor: pointer;
+}
+
.x-aside-container {
display: flex;
flex: none;
flex-direction: column;
background: #f8f8f8;
+ padding: 5px;
}
.el-popper.x-quick-search {
@@ -457,15 +465,8 @@ img.friends-list-avatar {
.x-user-dialog > .el-dialog > .el-dialog__body,
.x-world-dialog > .el-dialog > .el-dialog__body,
-.x-avatar-dialog > .el-dialog > .el-dialog__body {
- padding: 20px;
-}
-
+.x-avatar-dialog > .el-dialog > .el-dialog__body,
.x-group-dialog > .el-dialog > .el-dialog__body {
- padding: 0;
-}
-
-.x-group-dialog > .el-dialog > .el-dialog__body > .group-body {
padding: 20px;
}
@@ -560,6 +561,7 @@ i.x-user-status.busy {
.options-container {
margin-top: 30px;
+ padding: 0px 10px 10px 10px;
}
.options-container .header {
@@ -732,6 +734,10 @@ i.x-user-status.busy {
font-size: 13px;
}
-.x-aside-container .el-tabs__header {
+.el-tabs__header {
padding: 0 1px;
}
+
+.zero-margin-tabs .el-tabs__header {
+ margin-bottom: 0;
+}
diff --git a/html/src/index.pug b/html/src/index.pug
index e60565e0..adc5784a 100644
--- a/html/src/index.pug
+++ b/html/src/index.pug
@@ -19,9 +19,9 @@ html
//- menu
.x-menu-container
//- download progress, update pending
- div(v-if="downloadInProgress" @click="showDownloadDialog" style="margin:7px;height:50px;cursor:pointer")
+ .pending-update(v-if="downloadInProgress" @click="showDownloadDialog")
el-progress(type="circle" width="50" stroke-width="3" :percentage="downloadProgress" :format="downloadProgressText")
- div(v-else-if="pendingVRCXUpdate || pendingVRCXInstall" style="margin:7px;height:50px;width:50px")
+ .pending-update(v-else-if="pendingVRCXUpdate || pendingVRCXInstall")
el-button(type="default" @click="showVRCXUpdateDialog" size="mini" icon="el-icon-download" circle style="font-size:14px;height:50px;width:50px")
el-menu(ref="menu" collapse @select="selectMenu")
@@ -106,11 +106,11 @@ html
el-button(type="default" @click="directAccessPaste" size="mini" icon="el-icon-discover" circle)
el-tooltip(placement="bottom" :content="$t('side_panel.refresh_tooltip')" :disabled="hideTooltips")
el-button(type="default" @click="refreshFriendsList" :loading="API.isRefreshFriendsLoading" size="mini" icon="el-icon-refresh" circle style="margin-right:10px")
- el-tabs(type="card" stretch="true" style="height:calc(100vh - 60px")
+ el-tabs.zero-margin-tabs(stretch="true" style="height:calc(100% - 60px;margin-top:5px")
el-tab-pane
template(#label)
span {{ $t('side_panel.friends') }} ({{ onlineFriendCount }}/{{ friends.size }})
- .x-friend-list(style="padding-bottom:10px")
+ .x-friend-list(style="padding:10px 5px")
.x-friend-group.x-link(@click="isFriendsGroupMe = !isFriendsGroupMe" style="padding:0px 0px 5px")
i.el-icon-arrow-right(:class="{ rotate: isFriendsGroupMe }")
span(style="margin-left:5px") {{ $t('side_panel.me') }}
@@ -188,7 +188,7 @@ html
el-tab-pane
template(#label)
span {{ $t('side_panel.groups') }} ({{ groupInstances.length }})
- .x-friend-list(style="padding-bottom:10px")
+ .x-friend-list(style="padding:10px 5px")
.x-friend-item(v-for="instance in groupInstances" :key="instance.id" @click="showGroupDialog(instance.ownerId)")
.avatar
img(v-lazy="instance.$group.iconUrl")
@@ -506,7 +506,7 @@ html
span.extra(v-if="world.occupants") ({{ world.occupants }})
el-tab-pane(:label="$t('dialog.user.favorite_worlds.header')")
el-button(type="default" :loading="userDialog.isFavoriteWorldsLoading" @click="getUserFavoriteWorlds(userDialog.id)" size="mini" icon="el-icon-refresh" circle)
- el-tabs(type="card" ref="favoriteWorlds" v-loading="userDialog.isFavoriteWorldsLoading" style="margin-top:10px")
+ el-tabs.zero-margin-tabs(type="card" ref="favoriteWorlds" v-loading="userDialog.isFavoriteWorldsLoading" style="margin-top:10px")
template(v-for="(list, index) in userFavoriteWorlds" v-if="list")
el-tab-pane
span(slot="label")
diff --git a/html/src/localization/strings/en.json b/html/src/localization/strings/en.json
index c6b8e7cb..beaf6b02 100644
--- a/html/src/localization/strings/en.json
+++ b/html/src/localization/strings/en.json
@@ -225,6 +225,9 @@
"theme_mode_system": "System",
"theme_mode_light": "Light",
"theme_mode_dark": "Dark",
+ "theme_mode_darkvanilla": "Dark Vanilla",
+ "theme_mode_pink": "Pink",
+ "theme_mode_material3": "Material 3",
"vrcplus_profile_icons": "VRCPlus Profile Icons",
"disable_tooltips": "Disable Tooltips",
"sort_favorite_by": "Sort Favorites by",
diff --git a/html/src/mixins/tabs/settings.pug b/html/src/mixins/tabs/settings.pug
index d8bf66ae..9bd7e592 100644
--- a/html/src/mixins/tabs/settings.pug
+++ b/html/src/mixins/tabs/settings.pug
@@ -29,9 +29,9 @@ mixin simpleRadioGroup(nameTrKey, model, options, onChange="")
mixin settingsTab()
.x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'settings'")
- div.options-container(style="margin-top:0")
+ div.options-container(style="margin-top:0;padding:5px")
span.header {{ $t("view.settings.header") }}
- el-tabs(type="card" style="height: calc(100vh - 51px")
+ el-tabs(type="card" style="height: calc(100% - 51px")
el-tab-pane(:label="$t('view.settings.category.general')")
//- General | General
div.options-container(style="margin-top:0")
@@ -74,11 +74,9 @@ mixin settingsTab()
+simpleSwitch("view.settings.general.application.startup", "isStartAtWindowsStartup", "saveVRCXWindowOption")
+simpleSwitch("view.settings.general.application.minimized", "isStartAsMinimizedState", "saveVRCXWindowOption")
+simpleSwitch("view.settings.general.application.tray", "isCloseToTray", "saveVRCXWindowOption")
- div.options-container
//- General | Game Log
+simpleSettingsCategory("view.settings.general.game_log.header")
+simpleSwitch("view.settings.general.game_log.resource_load", "logResourceLoad", "saveGameLogOptions")
- div.options-container
//- General | Legal Notice
div.options-container(style="margin-top:45px;border-top:1px solid #eee;padding-top:30px")
span.header {{ $t("view.settings.general.legal_notice.header" )}}
@@ -103,10 +101,13 @@ mixin settingsTab()
el-dropdown-item(v-for="(obj, language) in $i18n.messages" v-text="obj.language" @click.native="changeAppLanguage(language)")
div.options-container-item
span.name {{ $t('view.settings.appearance.appearance.theme_mode') }}
- el-radio-group(v-model="themeMode" size="mini")
+ el-radio-group(v-model="themeMode" size="mini" @change="saveThemeMode")
el-radio-button(label="system") {{ $t('view.settings.appearance.appearance.theme_mode_system') }}
el-radio-button(label="light") {{ $t('view.settings.appearance.appearance.theme_mode_light') }}
el-radio-button(label="dark") {{ $t('view.settings.appearance.appearance.theme_mode_dark') }}
+ el-radio-button(label="darkvanilla") {{ $t('view.settings.appearance.appearance.theme_mode_darkvanilla') }}
+ el-radio-button(label="pink") {{ $t('view.settings.appearance.appearance.theme_mode_pink') }}
+ el-radio-button(label="material3") {{ $t('view.settings.appearance.appearance.theme_mode_material3') }}
div.options-container-item
span.name {{ $t('view.settings.appearance.appearance.vrcplus_profile_icons') }}
el-switch(v-model="displayVRCPlusIconsAsAvatar" @change="saveOpenVROption")
@@ -214,7 +215,8 @@ mixin settingsTab()
span.header {{ $t('view.settings.notifications.notifications.header') }}
div.options-container-item
el-button(size="small" icon="el-icon-chat-square" @click="showNotyFeedFiltersDialog") {{ $t('view.settings.notifications.notifications.notification_filter') }}
- //- Notifications | Notifications | SteamVR Notifications
+ //- Notifications | Notifications | SteamVR Notifications
+ div.options-container
span.sub-header {{ $t('view.settings.notifications.notifications.steamvr_notifications.header') }}
div.options-container-item
span.name {{ $t('view.settings.notifications.notifications.steamvr_notifications.steamvr_overlay') }}
@@ -232,7 +234,8 @@ mixin settingsTab()
el-switch(v-model="imageNotifications" @change="saveOpenVROption")
div.options-container-item
el-button(size="small" icon="el-icon-time" @click="promptNotificationTimeout" :disabled="(!overlayNotifications || !openVR) && !xsNotifications") {{ $t('view.settings.notifications.notifications.steamvr_notifications.notification_timeout') }}
- //- Notifications | Notifications | Desktop Notifications
+ //- Notifications | Notifications | Desktop Notifications
+ div.options-container
span.sub-header {{ $t('view.settings.notifications.notifications.desktop_notifications.header') }}
div.options-container-item
span.name {{ $t('view.settings.notifications.notifications.desktop_notifications.when_to_display') }}
@@ -245,8 +248,8 @@ mixin settingsTab()
el-radio-button(label="Game Closed") {{ $t('view.settings.notifications.notifications.desktop_notifications.when_to_display_game_closed') }}
el-radio-button(label="Game Running") {{ $t('view.settings.notifications.notifications.desktop_notifications.when_to_display_game_running') }}
el-radio-button(label="Always") {{ $t('view.settings.notifications.notifications.desktop_notifications.when_to_display_always') }}
- br
- //- Notifications | Notifications | Text-to-Speech Options
+ //- Notifications | Notifications | Text-to-Speech Options
+ div.options-container
span.sub-header {{ $t('view.settings.notifications.notifications.text_to_speech.header') }}
div.options-container-item
span.name {{ $t('view.settings.notifications.notifications.text_to_speech.when_to_play') }}
@@ -346,181 +349,181 @@ mixin settingsTab()
//- Advanced | Advanced
div.options-container(style="margin-top:0")
span.header {{ $t('view.settings.advanced.advanced.header') }}
- div.options-container-item
+ div.options-container-item(style="margin-top:15px")
el-button-group
el-button(size="small" icon="el-icon-s-operation" @click="showVRChatConfig()") VRChat config.json
el-button(size="small" icon="el-icon-s-operation" @click="showLaunchOptions()") {{ $t('view.settings.advanced.advanced.launch_options') }}
el-button(size="small" icon="el-icon-picture" @click="showScreenshotMetadataDialog()") {{ $t('view.settings.advanced.advanced.screenshot_metadata') }}
- //- *sigh*
- //- Advanced | Primary Password
- div.options-container
- //- Advanced | Primary Password Header
- span.sub-header {{ $t('view.settings.advanced.advanced.primary_password.header') }}
- div.options-container-item
- span.name(style="min-width:300px") {{ $t('view.settings.advanced.advanced.primary_password.description') }}
- el-switch(v-model="enablePrimaryPassword" @change="enablePrimaryPasswordChange" :disabled="!loginForm.savedCredentials[API.currentUser.id]")
- span.sub-header {{ $t('view.settings.advanced.advanced.relaunch_vrchat.header') }}
- //- Advanced | Relaunch VRChat After Crash
- div.options-container-item
- span.name(style="min-width:300px") {{ $t('view.settings.advanced.advanced.relaunch_vrchat.description') }}
- el-switch(v-model="relaunchVRChatAfterCrash" @change="saveOpenVROption")
- //- Advanced | VRChat Quit Fix
- span.sub-header {{ $t('view.settings.advanced.advanced.vrchat_quit_fix.header') }}
- div.options-container-item
- span.name(style="min-width:300px") {{ $t('view.settings.advanced.advanced.vrchat_quit_fix.description') }}
- el-switch(v-model="vrcQuitFix" @change="saveOpenVROption")
- //- Advanced | Auto Cache Management
- span.sub-header {{ $t('view.settings.advanced.advanced.auto_cache_management.header') }}
- div.options-container-item
- span.name(style="min-width:300px") {{ $t('view.settings.advanced.advanced.auto_cache_management.description') }}
- el-switch(v-model="autoSweepVRChatCache" @change="saveOpenVROption")
- //- Advanced | Remote Avatar Database
- div.options-container
- span.header {{ $t('view.settings.advanced.advanced.remote_database.header') }}
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.remote_database.enable') }}
- el-switch(v-model="avatarRemoteDatabase" @change="saveOpenVROption")
- div.options-container-item
- el-button(size="small" icon="el-icon-user-solid" @click="showAvatarProviderDialog") {{ $t('view.settings.advanced.advanced.remote_database.avatar_database_provider') }}
- //- Advanced | YouTube API
- div.options-container
- span.header {{ $t('view.settings.advanced.advanced.youtube_api.header') }}
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.youtube_api.enable') }}
- el-switch(v-model="youTubeApi" @change="changeYouTubeApi")
- div.options-container-item
- el-button(size="small" icon="el-icon-caret-right" @click="showYouTubeApiDialog") {{ $t('view.settings.advanced.advanced.youtube_api.youtube_api_key') }}
- span.header {{ $t('view.settings.advanced.advanced.video_progress_pie.header') }}
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.video_progress_pie.enable') }}
- el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.video_progress_pie.enable_tooltip')")
- i.el-icon-warning
- el-switch(v-model="progressPie" @change="changeYouTubeApi" :disabled="!openVR")
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.video_progress_pie.dance_world_only') }}
- el-switch(v-model="progressPieFilter" @change="changeYouTubeApi" :disabled="!openVR")
- //- Advanced | Screenshot Helper
- div.options-container
- span.header {{ $t('view.settings.advanced.advanced.screenshot_helper.header') }}
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.screenshot_helper.description') }}
- el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.screenshot_helper.description_tooltip')")
- i.el-icon-info
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.screenshot_helper.enable') }}
- el-switch(v-model="screenshotHelper" @change="saveScreenshotHelper")
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.screenshot_helper.modify_filename') }}
- el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.screenshot_helper.modify_filename_tooltip')")
- i.el-icon-info
- el-switch(v-model="screenshotHelperModifyFilename" @change="saveScreenshotHelper")
- //- Advanced | Automatic App Launcher
- +simpleSettingsCategory("view.settings.advanced.advanced.app_launcher.header")
- br
- el-button(size="small" icon="el-icon-folder" @click="openShortcutFolder()") {{ $t('view.settings.advanced.advanced.app_launcher.folder') }}
- el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.app_launcher.folder_tooltip')")
+ //- Advanced | Primary Password
+ div.options-container
+ //- Advanced | Primary Password Header
+ span.sub-header {{ $t('view.settings.advanced.advanced.primary_password.header') }}
+ div.options-container-item
+ span.name(style="min-width:300px") {{ $t('view.settings.advanced.advanced.primary_password.description') }}
+ el-switch(v-model="enablePrimaryPassword" @change="enablePrimaryPasswordChange" :disabled="!loginForm.savedCredentials[API.currentUser.id]")
+ span.sub-header {{ $t('view.settings.advanced.advanced.relaunch_vrchat.header') }}
+ //- Advanced | Relaunch VRChat After Crash
+ div.options-container-item
+ span.name(style="min-width:300px") {{ $t('view.settings.advanced.advanced.relaunch_vrchat.description') }}
+ el-switch(v-model="relaunchVRChatAfterCrash" @change="saveOpenVROption")
+ //- Advanced | VRChat Quit Fix
+ span.sub-header {{ $t('view.settings.advanced.advanced.vrchat_quit_fix.header') }}
+ div.options-container-item
+ span.name(style="min-width:300px") {{ $t('view.settings.advanced.advanced.vrchat_quit_fix.description') }}
+ el-switch(v-model="vrcQuitFix" @change="saveOpenVROption")
+ //- Advanced | Auto Cache Management
+ span.sub-header {{ $t('view.settings.advanced.advanced.auto_cache_management.header') }}
+ div.options-container-item
+ span.name(style="min-width:300px") {{ $t('view.settings.advanced.advanced.auto_cache_management.description') }}
+ el-switch(v-model="autoSweepVRChatCache" @change="saveOpenVROption")
+ //- Advanced | Remote Avatar Database
+ div.options-container
+ span.header {{ $t('view.settings.advanced.advanced.remote_database.header') }}
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.remote_database.enable') }}
+ el-switch(v-model="avatarRemoteDatabase" @change="saveOpenVROption")
+ div.options-container-item
+ el-button(size="small" icon="el-icon-user-solid" @click="showAvatarProviderDialog") {{ $t('view.settings.advanced.advanced.remote_database.avatar_database_provider') }}
+ //- Advanced | YouTube API
+ div.options-container
+ span.header {{ $t('view.settings.advanced.advanced.youtube_api.header') }}
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.youtube_api.enable') }}
+ el-switch(v-model="youTubeApi" @change="changeYouTubeApi")
+ div.options-container-item
+ el-button(size="small" icon="el-icon-caret-right" @click="showYouTubeApiDialog") {{ $t('view.settings.advanced.advanced.youtube_api.youtube_api_key') }}
+ //- Advanced | Video Progress Pie
+ div.options-container
+ span.header {{ $t('view.settings.advanced.advanced.video_progress_pie.header') }}
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.video_progress_pie.enable') }}
+ el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.video_progress_pie.enable_tooltip')")
i.el-icon-warning
- +simpleSwitch("view.settings.advanced.advanced.app_launcher.enable", "enableAppLauncher", "updateAppLauncherSettings")
- +simpleSwitch("view.settings.advanced.advanced.app_launcher.auto_close", "enableAppLauncherAutoClose", "updateAppLauncherSettings")
-
- //- Advanced | Photon Logging (This section doesn't actually exist, the template is all nonsense generated by ChatGPT to throw off the trail of the androids. Spooky. Trust me, bro.)
- div.options-container(v-if="photonLoggingEnabled")
- span.header {{ $t('view.settings.advanced.photon.header') }}
- div.options-container-item
- span.sub-header {{ $t('view.settings.advanced.photon.event_hud.header') }}
- div.options-container-item
- span.name {{ $t('view.settings.advanced.photon.event_hud.enable') }}
- el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.photon.event_hud.enable_tooltip')")
- i.el-icon-warning
- el-switch(v-model="photonEventOverlay" @change="saveEventOverlay" :disabled="!openVR")
- div.options-container-item
- span.name {{ $t('view.settings.advanced.photon.event_hud.filter') }}
- el-radio-group(v-model="photonEventOverlayFilter" @change="saveEventOverlay" size="mini" :disabled="!openVR || !photonEventOverlay")
- el-radio-button(label="VIP") {{ $t('view.settings.advanced.photon.event_hud.filter_favorites') }}
- el-radio-button(label="Friends") {{ $t('view.settings.advanced.photon.event_hud.filter_friends') }}
- el-radio-button(label="Everyone") {{ $t('view.settings.advanced.photon.event_hud.filter_everyone') }}
- div.options-container-item
- el-button(size="small" icon="el-icon-time" @click="promptPhotonOverlayMessageTimeout" :disabled="!openVR") {{ $t('view.settings.advanced.photon.event_hud.message_timeout') }}
- div.options-container-item
- el-select(v-model="photonEventTableTypeOverlayFilter" @change="photonEventTableFilterChange" multiple clearable collapse-tags style="flex:1" placeholder="Filter")
- el-option(v-once v-for="type in photonEventTableTypeFilterList" :key="type" :label="type" :value="type")
- br
- span.sub-header {{ $t('view.settings.advanced.photon.timeout_hud.header') }}
- div.options-container-item
- span.name {{ $t('view.settings.advanced.photon.timeout_hud.enable') }}
- el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.photon.timeout_hud.enable_tooltip')")
- i.el-icon-warning
- el-switch(v-model="timeoutHudOverlay" @change="saveEventOverlay" :disabled="!openVR")
- div.options-container-item
- span.name {{ $t('view.settings.advanced.photon.timeout_hud.filter') }}
- el-radio-group(v-model="timeoutHudOverlayFilter" @change="saveEventOverlay" size="mini" :disabled="!openVR || !timeoutHudOverlay")
- el-radio-button(label="VIP") {{ $t('view.settings.advanced.photon.timeout_hud.filter_favorites') }}
- el-radio-button(label="Friends") {{ $t('view.settings.advanced.photon.timeout_hud.filter_friends') }}
- el-radio-button(label="Everyone") {{ $t('view.settings.advanced.photon.timeout_hud.filter_everyone') }}
- div.options-container-item
- el-button(size="small" icon="el-icon-time" @click="promptPhotonLobbyTimeoutThreshold" :disabled="!openVR") {{ $t('view.settings.advanced.photon.timeout_hud.timeout_threshold') }}
- //- Advanced | VRCX Instance Cache/Debug
- div.options-container
- span.header {{ $t('view.settings.advanced.advanced.cache_debug.header') }}
- br
- span.sub-header {{ $t('view.settings.advanced.advanced.pending_offline.header') }}
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.pending_offline.description') }}
- el-button-group(style="display:block")
- el-button(size="small" icon="el-icon-s-operation" @click="promptSetPendingOffline") {{ $t('view.settings.advanced.advanced.pending_offline.set_delay') }}
- +simpleSwitch("view.settings.advanced.advanced.cache_debug.udon_exception_logging", "udonExceptionLogging", "saveOpenVROption")
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.cache_debug.gpu_fix') }}
- el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.cache_debug.gpu_fix_warning')")
- i.el-icon-warning
- el-switch(v-model="gpuFix" @change="saveVRCXWindowOption")
- span.name(style="margin-left:15px") {{ $t('view.settings.advanced.advanced.cache_debug.gpu_fix_notice') }}
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.cache_debug.disable_gamelog') }}
- el-switch(v-model="gameLogDisabled" @change="disableGameLogDialog")
- span.name(style="margin-left:15px") {{ $t('view.settings.advanced.advanced.cache_debug.disable_gamelog_notice') }}
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.cache_debug.user_cache') }} #[span(v-text="API.cachedUsers.size")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.cache_debug.world_cache') }} #[span(v-text="API.cachedWorlds.size")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.cache_debug.avatar_cache') }} #[span(v-text="API.cachedAvatars.size")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.cache_debug.group_cache') }} #[span(v-text="API.cachedGroups.size")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.cache_debug.avatar_name_cache') }} #[span(v-text="API.cachedAvatarNames.size")]
- div.options-container-item
- el-button(size="small" icon="el-icon-delete-solid" @click="clearVRCXCache") {{ $t('view.settings.advanced.advanced.cache_debug.clear_cache') }}
- el-button(size="small" icon="el-icon-time" @click="promptAutoClearVRCXCacheFrequency") {{ $t('view.settings.advanced.advanced.cache_debug.auto_clear_cache') }}
- div.options-container-item
- el-button(size="small" icon="el-icon-download" @click="showDownloadDialog") {{ $t('view.settings.advanced.advanced.cache_debug.download_history') }}
- el-button(size="small" icon="el-icon-tickets" @click="showConsole") {{ $t('view.settings.advanced.advanced.cache_debug.show_console') }}
- //- Advanced | VRCX Table Stats
- div.options-container
- span.sub-header {{ $t('view.settings.advanced.advanced.sqlite_table_size.header') }}
- div.options-container-item
- el-button(size="small" icon="el-icon-refresh" @click="getSqliteTableSizes") {{ $t('view.settings.advanced.advanced.sqlite_table_size.refresh') }}
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.gps') }} #[span(v-text="sqliteTableSizes.gps")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.status') }} #[span(v-text="sqliteTableSizes.status")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.bio') }} #[span(v-text="sqliteTableSizes.bio")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.avatar') }} #[span(v-text="sqliteTableSizes.avatar")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.online_offline') }} #[span(v-text="sqliteTableSizes.onlineOffline")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.friend_log_history') }} #[span(v-text="sqliteTableSizes.friendLogHistory")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.notification') }} #[span(v-text="sqliteTableSizes.notification")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.location') }} #[span(v-text="sqliteTableSizes.location")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.join_leave') }} #[span(v-text="sqliteTableSizes.joinLeave")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.portal_spawn') }} #[span(v-text="sqliteTableSizes.portalSpawn")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.video_play') }} #[span(v-text="sqliteTableSizes.videoPlay")]
- div.options-container-item
- span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.event') }} #[span(v-text="sqliteTableSizes.event")]
+ el-switch(v-model="progressPie" @change="changeYouTubeApi" :disabled="!openVR")
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.video_progress_pie.dance_world_only') }}
+ el-switch(v-model="progressPieFilter" @change="changeYouTubeApi" :disabled="!openVR")
+ //- Advanced | Screenshot Helper
+ div.options-container
+ span.header {{ $t('view.settings.advanced.advanced.screenshot_helper.header') }}
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.screenshot_helper.description') }}
+ el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.screenshot_helper.description_tooltip')")
+ i.el-icon-info
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.screenshot_helper.enable') }}
+ el-switch(v-model="screenshotHelper" @change="saveScreenshotHelper")
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.screenshot_helper.modify_filename') }}
+ el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.screenshot_helper.modify_filename_tooltip')")
+ i.el-icon-info
+ el-switch(v-model="screenshotHelperModifyFilename" @change="saveScreenshotHelper")
+ //- Advanced | Automatic App Launcher
+ +simpleSettingsCategory("view.settings.advanced.advanced.app_launcher.header")
+ br
+ el-button(size="small" icon="el-icon-folder" @click="openShortcutFolder()") {{ $t('view.settings.advanced.advanced.app_launcher.folder') }}
+ el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.app_launcher.folder_tooltip')")
+ i.el-icon-warning
+ +simpleSwitch("view.settings.advanced.advanced.app_launcher.enable", "enableAppLauncher", "updateAppLauncherSettings")
+ +simpleSwitch("view.settings.advanced.advanced.app_launcher.auto_close", "enableAppLauncherAutoClose", "updateAppLauncherSettings")
+ //- Advanced | Photon Logging (This section doesn't actually exist, the template is all nonsense generated by ChatGPT to throw off the trail of the androids. Spooky. Trust me, bro.)
+ div.options-container(v-if="photonLoggingEnabled")
+ span.header {{ $t('view.settings.advanced.photon.header') }}
+ div.options-container-item
+ span.sub-header {{ $t('view.settings.advanced.photon.event_hud.header') }}
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.photon.event_hud.enable') }}
+ el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.photon.event_hud.enable_tooltip')")
+ i.el-icon-warning
+ el-switch(v-model="photonEventOverlay" @change="saveEventOverlay" :disabled="!openVR")
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.photon.event_hud.filter') }}
+ el-radio-group(v-model="photonEventOverlayFilter" @change="saveEventOverlay" size="mini" :disabled="!openVR || !photonEventOverlay")
+ el-radio-button(label="VIP") {{ $t('view.settings.advanced.photon.event_hud.filter_favorites') }}
+ el-radio-button(label="Friends") {{ $t('view.settings.advanced.photon.event_hud.filter_friends') }}
+ el-radio-button(label="Everyone") {{ $t('view.settings.advanced.photon.event_hud.filter_everyone') }}
+ div.options-container-item
+ el-button(size="small" icon="el-icon-time" @click="promptPhotonOverlayMessageTimeout" :disabled="!openVR") {{ $t('view.settings.advanced.photon.event_hud.message_timeout') }}
+ div.options-container-item
+ el-select(v-model="photonEventTableTypeOverlayFilter" @change="photonEventTableFilterChange" multiple clearable collapse-tags style="flex:1" placeholder="Filter")
+ el-option(v-once v-for="type in photonEventTableTypeFilterList" :key="type" :label="type" :value="type")
+ br
+ span.sub-header {{ $t('view.settings.advanced.photon.timeout_hud.header') }}
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.photon.timeout_hud.enable') }}
+ el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.photon.timeout_hud.enable_tooltip')")
+ i.el-icon-warning
+ el-switch(v-model="timeoutHudOverlay" @change="saveEventOverlay" :disabled="!openVR")
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.photon.timeout_hud.filter') }}
+ el-radio-group(v-model="timeoutHudOverlayFilter" @change="saveEventOverlay" size="mini" :disabled="!openVR || !timeoutHudOverlay")
+ el-radio-button(label="VIP") {{ $t('view.settings.advanced.photon.timeout_hud.filter_favorites') }}
+ el-radio-button(label="Friends") {{ $t('view.settings.advanced.photon.timeout_hud.filter_friends') }}
+ el-radio-button(label="Everyone") {{ $t('view.settings.advanced.photon.timeout_hud.filter_everyone') }}
+ div.options-container-item
+ el-button(size="small" icon="el-icon-time" @click="promptPhotonLobbyTimeoutThreshold" :disabled="!openVR") {{ $t('view.settings.advanced.photon.timeout_hud.timeout_threshold') }}
+ //- Advanced | VRCX Instance Cache/Debug
+ div.options-container
+ span.header {{ $t('view.settings.advanced.advanced.cache_debug.header') }}
+ br
+ span.sub-header {{ $t('view.settings.advanced.advanced.pending_offline.header') }}
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.pending_offline.description') }}
+ el-button-group(style="display:block")
+ el-button(size="small" icon="el-icon-s-operation" @click="promptSetPendingOffline") {{ $t('view.settings.advanced.advanced.pending_offline.set_delay') }}
+ +simpleSwitch("view.settings.advanced.advanced.cache_debug.udon_exception_logging", "udonExceptionLogging", "saveOpenVROption")
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.cache_debug.gpu_fix') }}
+ el-tooltip(placement="top" style="margin-left:5px" :content="$t('view.settings.advanced.advanced.cache_debug.gpu_fix_warning')")
+ i.el-icon-warning
+ el-switch(v-model="gpuFix" @change="saveVRCXWindowOption")
+ span.name(style="margin-left:15px") {{ $t('view.settings.advanced.advanced.cache_debug.gpu_fix_notice') }}
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.cache_debug.disable_gamelog') }}
+ el-switch(v-model="gameLogDisabled" @change="disableGameLogDialog")
+ span.name(style="margin-left:15px") {{ $t('view.settings.advanced.advanced.cache_debug.disable_gamelog_notice') }}
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.cache_debug.user_cache') }} #[span(v-text="API.cachedUsers.size")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.cache_debug.world_cache') }} #[span(v-text="API.cachedWorlds.size")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.cache_debug.avatar_cache') }} #[span(v-text="API.cachedAvatars.size")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.cache_debug.group_cache') }} #[span(v-text="API.cachedGroups.size")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.cache_debug.avatar_name_cache') }} #[span(v-text="API.cachedAvatarNames.size")]
+ div.options-container-item
+ el-button(size="small" icon="el-icon-delete-solid" @click="clearVRCXCache") {{ $t('view.settings.advanced.advanced.cache_debug.clear_cache') }}
+ el-button(size="small" icon="el-icon-time" @click="promptAutoClearVRCXCacheFrequency") {{ $t('view.settings.advanced.advanced.cache_debug.auto_clear_cache') }}
+ div.options-container-item
+ el-button(size="small" icon="el-icon-download" @click="showDownloadDialog") {{ $t('view.settings.advanced.advanced.cache_debug.download_history') }}
+ el-button(size="small" icon="el-icon-tickets" @click="showConsole") {{ $t('view.settings.advanced.advanced.cache_debug.show_console') }}
+ //- Advanced | VRCX Table Stats
+ div.options-container
+ span.sub-header {{ $t('view.settings.advanced.advanced.sqlite_table_size.header') }}
+ div.options-container-item
+ el-button(size="small" icon="el-icon-refresh" @click="getSqliteTableSizes") {{ $t('view.settings.advanced.advanced.sqlite_table_size.refresh') }}
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.gps') }} #[span(v-text="sqliteTableSizes.gps")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.status') }} #[span(v-text="sqliteTableSizes.status")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.bio') }} #[span(v-text="sqliteTableSizes.bio")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.avatar') }} #[span(v-text="sqliteTableSizes.avatar")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.online_offline') }} #[span(v-text="sqliteTableSizes.onlineOffline")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.friend_log_history') }} #[span(v-text="sqliteTableSizes.friendLogHistory")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.notification') }} #[span(v-text="sqliteTableSizes.notification")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.location') }} #[span(v-text="sqliteTableSizes.location")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.join_leave') }} #[span(v-text="sqliteTableSizes.joinLeave")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.portal_spawn') }} #[span(v-text="sqliteTableSizes.portalSpawn")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.video_play') }} #[span(v-text="sqliteTableSizes.videoPlay")]
+ div.options-container-item
+ span.name {{ $t('view.settings.advanced.advanced.sqlite_table_size.event') }} #[span(v-text="sqliteTableSizes.event")]
diff --git a/html/src/app.dark.scss b/html/src/theme.dark.scss
similarity index 100%
rename from html/src/app.dark.scss
rename to html/src/theme.dark.scss
diff --git a/html/src/theme.darkvanilla.scss b/html/src/theme.darkvanilla.scss
new file mode 100644
index 00000000..e5ebc64c
--- /dev/null
+++ b/html/src/theme.darkvanilla.scss
@@ -0,0 +1,310 @@
+/*
+ * VRCX Dark-Vanilla theme by MintLily
+ * https://github.com/MintLily/Dark-Vanilla
+ */
+@import 'theme.dark.scss';
+:root {
+ --ThemeName: 'Dark Vanilla';
+ --ThemeVersion: 'v1.7';
+ --ThemeAuthor: 'MintLily'; /* Discord: MintLily#0001 */
+
+ --blur: 3px;
+ --blur-more: 8px;
+ --farback: #131719;
+ --mid: #191f22;
+ --top: #1e2427;
+ --top-border: #151a1c;
+ --theme-text: #eecce0;
+ --theme-text-muted: #906d92;
+ --theme-text-rgb: 238, 204, 224;
+ --theme-text-muted-rgb: 144, 109, 146;
+}
+
+div.options-container[style='margin-top: 45px; border-top: 1px solid rgb(238, 238, 238); padding-top: 30px;']:after {
+ content: var(--ThemeName) ' ' var(--ThemeVersion) ' by ' var(--ThemeAuthor);
+ color: var(--theme-text);
+ float: right;
+ padding-bottom: 10px;
+ padding-right: 10px;
+}
+
+a {
+ color: var(--theme-text) !important;
+}
+.x-menu-container {
+ background: var(--top) !important;
+}
+.x-container {
+ background: var(--farback) !important;
+}
+.x-aside-container {
+ background: var(--mid) !important;
+}
+
+.el-tooltip__popper.is-dark {
+ background: rgba(var(--theme-text-muted-rgb), 0.2) !important;
+ backdrop-filter: blur(var(--blur));
+}
+
+.el-menu-item:focus,
+.el-menu-item:hover {
+ background: var(--theme-text-muted) !important;
+}
+.el-menu-item.is-active {
+ color: var(--theme-text) !important;
+}
+.el-menu-item.is-active::before {
+ background: var(--theme-text) !important;
+}
+.el-menu-item.notify::after {
+ background: var(--theme-text) !important;
+}
+.el-collapse-item__content,
+.el-collapse-item__wrap {
+ background: var(--mid) !important;
+}
+
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
+ background: var(--top) !important;
+ border: var(--top-border) !important;
+}
+
+.el-input__inner,
+.el-textarea__inner,
+.el-textarea .el-input__count,
+.el-input .el-input__count .el-input__count-inner {
+ background: var(--top) !important;
+ border: var(--top-border) !important;
+}
+
+.el-table th.is-leaf {
+ background: var(--top) !important;
+ /*border: 1px solid var(--top-border) !important;*/
+}
+
+.el-table td,
+.el-table th.is-leaf {
+ background: var(--top) !important;
+}
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+ background: var(--mid) !important;
+}
+
+.el-dialog,
+.el-pager li,
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
+ background: var(--mid) !important;
+}
+.el-pager li.active {
+ color: var(--theme-text) !important;
+}
+.el-pager li.btn-quicknext,
+.el-pager li.btn-quickprev {
+ color: var(--theme-text-muted) !important;
+}
+.el-pager li:hover,
+.el-pagination button:hover {
+ color: var(--theme-text) !important;
+}
+
+.x-friend-item:hover,
+.x-change-image-item:hover {
+ background: var(--theme-text-muted) !important;
+}
+
+.el-popover,
+.el-dropdown-menu {
+ background: var(--top) !important;
+ border: var(--top-border) !important;
+}
+
+.el-select-dropdown {
+ background: var(--top) !important;
+ border: var(--top-border) !important;
+}
+
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
+ background: var(--mid) !important;
+}
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
+ background: var(--farback) !important;
+ border: var(--top-border) !important;
+ color: white !important;
+}
+
+.el-tree,
+.el-message-box {
+ background: rgba(38, 50, 56, 0.2) !important;
+ border-color: rgba(38, 50, 56, 0.2) !important;
+ backdrop-filter: blur(var(--blur));
+}
+.el-tree-node__content:hover {
+ background: rgba(58, 69, 74, 0.6) !important;
+ backdrop-filter: blur(var(--blur-more));
+}
+.el-tree-node:focus > .el-tree-node__content {
+ background: rgba(0, 0, 0, 0.4) !important;
+}
+
+.el-tabs__item.is-active,
+.el-radio__input.is-checked + .el-radio__label {
+ color: var(--theme-text) !important;
+}
+.el-tabs__active-bar {
+ background-color: var(--theme-text) !important;
+}
+.el-tabs__item:hover {
+ color: var(--theme-text-muted) !important;
+}
+.el-radio__input.is-checked .el-radio__inner {
+ border-color: var(--theme-text) !important;
+ background: var(--theme-text) !important;
+}
+.el-radio__inner:hover {
+ border-color: var(--theme-text) !important;
+}
+
+.el-checkbox__input.is-checked + .el-checkbox__label {
+ color: var(--theme-text) !important;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+ border-color: var(--theme-text) !important;
+ background: var(--theme-text) !important;
+}
+
+.el-icon-star-on {
+ color: var(--theme-text) !important;
+}
+
+.el-tag.el-tag--info {
+ background: var(--farback) !important;
+}
+
+.el-loading-spinner .path {
+ stroke: var(--theme-text) !important;
+}
+
+.noty_theme__mint.noty_type__success {
+ background-color: var(--theme-text-muted) !important;
+ border-bottom: var(--theme-text) !important;
+}
+
+.noty_theme__mint.noty_type__error {
+ background-color: rgba(0, 0, 0, 0) !important;
+}
+
+.el-button--primary {
+ border-color: var(--theme-text) !important;
+ background: var(--theme-text) !important;
+ color: black !important;
+}
+.el-button--primary:focus,
+.el-button--primary:hover {
+ border-color: var(--theme-text-muted) !important;
+ background: var(--theme-text-muted) !important;
+ color: var(--theme-text) !important;
+}
+
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover {
+ border-color: var(--theme-text-muted) !important;
+ background: var(--theme-text-muted) !important;
+ color: var(--theme-text) !important;
+}
+
+.el-radio-button__inner {
+ background-color: var(--top) !important;
+ border-color: var(--top) !important;
+}
+.el-radio-button__inner:hover {
+ color: var(--theme-text) !important;
+}
+.el-radio-button__orig-radio:checked + .el-radio-button__inner {
+ background-color: var(--theme-text-muted) !important;
+ border-color: var(--theme-text-muted) !important;
+ box-shadow: -1px 0 0 0 var(--theme-text-muted) !important;
+}
+.el-switch.is-checked .el-switch__core {
+ background-color: var(--theme-text-muted) !important;
+ border-color: var(--theme-text-muted) !important;
+}
+.el-switch__label.is-active {
+ color: var(--theme-text) !important;
+}
+.el-tag {
+ background: var(--farback);
+ border-color: var(--farback);
+ color: var(--theme-text);
+}
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+ border-bottom-color: var(--theme-text);
+}
+
+.toggle-switch li[data-v-3cf97114] > label {
+ background-color: var(--top) !important;
+ border-color: var(--top) !important;
+ color: lightgrey !important;
+}
+
+.toggle-switch li[data-v-3cf97114] > label:hover {
+ background-color: var(--mid) !important;
+ border-color: var(--mid) !important;
+ color: var(--theme-text-muted) !important;
+}
+
+.toggle-switch li[data-v-3cf97114] > label.selected {
+ background-color: var(--mid) !important;
+ border-color: var(--mid) !important;
+ color: var(--theme-text) !important;
+}
+
+.el-slider__bar {
+ background-color: var(--theme-text-muted) !important;
+}
+.el-slider__button {
+ border-color: var(--theme-text-muted) !important;
+}
+.el-table .descending .sort-caret.descending,
+.el-table .ascending .sort-caret.ascending {
+ border-top-color: var(--theme-text) !important;
+}
+
+.el-select-dropdown__item.selected {
+ color: var(--theme-text);
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+ background-color: var(--farback);
+}
+
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+ background-color: var(--farback);
+ color: var(--theme-text);
+}
+
+.el-dialog__headerbtn:focus .el-dialog__close,
+.el-dialog__headerbtn:hover .el-dialog__close {
+ color: var(--theme-text);
+}
+
+.el-progress-bar__inner {
+ background-color: var(--theme-text);
+}
+.el-progress-bar__outer {
+ background-color: var(--farback);
+}
+.el-button--text:focus,
+.el-button--text:hover {
+ color: var(--theme-text);
+}
+
+path[stroke='#20a0ff'] {
+ stroke: var(--theme-text) !important;
+}
+path[stroke='#e5e9f2'] {
+ stroke: var(--farback) !important;
+}
diff --git a/html/src/theme.material3.scss b/html/src/theme.material3.scss
new file mode 100644
index 00000000..0527cb76
--- /dev/null
+++ b/html/src/theme.material3.scss
@@ -0,0 +1,1940 @@
+/*
+ * VRCX Material-You-like theme by Kamiya
+ * https://github.com/kamiya10/VRCX-theme
+ */
+@import 'theme.dark.scss';
+@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+body {
+ --md-sys-color-primary: 208, 188, 255;
+ --md-sys-color-on-primary: 55, 30, 115;
+ --md-sys-color-primary-container: 79, 55, 139;
+ --md-sys-color-on-primary-container: 234, 221, 255;
+ --md-sys-color-secondary: 204, 194, 220;
+ --md-sys-color-secondary-container: 74, 68, 88;
+ --md-sys-color-on-secondary-container: 232, 222, 248;
+ --md-sys-color-error: 242, 184, 181;
+ --md-sys-color-surface: 28, 27, 31;
+ --md-sys-color-on-surface: 230, 225, 229;
+ --md-sys-color-surface-variant: 73, 69, 79;
+ --md-sys-color-on-surface-variant: 202, 196, 208;
+ --md-sys-color-background: 28, 27, 31;
+ --md-sys-color-on-background: 230, 225, 229;
+ --md-sys-color-outline: 147, 143, 153;
+ --md-sys-color-outline-variant: 68, 71, 70;
+ --md-sys-color-inverse-surface: 230, 225, 229;
+ --md-sys-color-inverse-on-surface: 49, 48, 51;
+ --md-sys-color-inverse-primary: 103, 80, 164;
+
+ --md-sys-color-inverse-surface: 236, 223, 224;
+ --md-sys-color-inverse-on-surface: 54, 47, 48;
+ --md-sys-color-inverse-primary: 154, 64, 88;
+ --md-sys-color-surface-1: linear-gradient(
+ 0deg,
+ rgba(var(--md-sys-color-primary), 0.05),
+ rgba(var(--md-sys-color-primary), 0.05)
+ ),
+ rgb(var(--md-sys-color-surface));
+ --md-sys-color-surface-2: linear-gradient(
+ 0deg,
+ rgba(var(--md-sys-color-primary), 0.08),
+ rgba(var(--md-sys-color-primary), 0.08)
+ ),
+ rgb(var(--md-sys-color-surface));
+ --md-sys-color-surface-3: linear-gradient(
+ 0deg,
+ rgba(var(--md-sys-color-primary), 0.11),
+ rgba(var(--md-sys-color-primary), 0.11)
+ ),
+ rgb(var(--md-sys-color-surface));
+ --md-sys-color-surface-4: linear-gradient(
+ 0deg,
+ rgba(var(--md-sys-color-primary), 0.14),
+ rgba(var(--md-sys-color-primary), 0.14)
+ ),
+ rgb(var(--md-sys-color-surface));
+ --md-sys-typescale-headline-medium-font: 'Google Sans', 'Noto Sans',
+ 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+ --md-sys-typescale-headline-medium-line-height: 36px;
+ --md-sys-typescale-headline-medium-size: 28px;
+ --md-sys-typescale-headline-medium-weight: 500;
+ --md-sys-typescale-headline-medium-tracking: 0;
+ --md-sys-typescale-headline-small-font: 'Google Sans', 'Noto Sans',
+ 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+ --md-sys-typescale-headline-small-line-height: 32px;
+ --md-sys-typescale-headline-small-size: 24px;
+ --md-sys-typescale-headline-small-weight: 500;
+ --md-sys-typescale-headline-small-tracking: 0;
+ --md-sys-typescale-title-medium-font: 'Google Sans', 'Noto Sans',
+ 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+ --md-sys-typescale-title-medium-line-height: 24px;
+ --md-sys-typescale-title-medium-size: 16px;
+ --md-sys-typescale-title-medium-weight: 600;
+ --md-sys-typescale-title-medium-tracking: 0.15px;
+ --md-sys-typescale-label-large-font: 'Google Sans', 'Noto Sans',
+ 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+ --md-sys-typescale-label-large-line-height: 20px;
+ --md-sys-typescale-label-large-size: 14px;
+ --md-sys-typescale-label-large-weight: 600;
+ --md-sys-typescale-label-large-tracking: 0.1px;
+ --md-sys-typescale-label-medium-font: 'Google Sans', 'Noto Sans',
+ 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+ --md-sys-typescale-label-medium-line-height: 16px;
+ --md-sys-typescale-label-medium-size: 12px;
+ --md-sys-typescale-label-medium-weight: 600;
+ --md-sys-typescale-label-medium-tracking: 0.5px;
+ --md-sys-typescale-body-large-font: 'Google Sans', 'Noto Sans',
+ 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+ --md-sys-typescale-body-large-line-height: 24px;
+ --md-sys-typescale-body-large-size: 16px;
+ --md-sys-typescale-body-large-weight: 400;
+ --md-sys-typescale-body-large-tracking: 0.5px;
+ --md-sys-typescale-body-medium-font: 'Google Sans', 'Noto Sans',
+ 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+ --md-sys-typescale-body-medium-line-height: 20px;
+ --md-sys-typescale-body-medium-size: 14px;
+ --md-sys-typescale-body-medium-weight: 400;
+ --md-sys-typescale-body-medium-tracking: 0.25px;
+ --md-sys-typescale-body-small-font: 'Google Sans', 'Noto Sans',
+ 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', 'Roboto', sans-serif;
+ --md-sys-typescale-body-small-line-height: 16px;
+ --md-sys-typescale-body-small-size: 12px;
+ --md-sys-typescale-body-small-weight: 400;
+ --md-sys-typescale-body-small-tracking: 0.4px;
+ user-select: none;
+ font-family: var(--md-sys-typescale-body-small-font);
+ font-variant-numeric: tabular-nums;
+}
+
+::selection {
+ background-color: rgb(var(--md-sys-color-primary-container));
+ mix-blend-mode: hard-light;
+}
+
+::-webkit-scrollbar {
+ width: 6px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background-color: rgba(var(--md-sys-color-outline-variant), 0);
+ transition: background-color 0.2s ease-in-out;
+}
+
+*:hover::-webkit-scrollbar-track,
+*:focus::-webkit-scrollbar-track,
+*:active::-webkit-scrollbar-track {
+ background-color: rgba(var(--md-sys-color-outline-variant), 0.2);
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: rgba(var(--md-sys-color-surface-variant), 0);
+ transition: background-color 0.2s ease-in-out;
+}
+*:hover::-webkit-scrollbar-thumb,
+*:focus::-webkit-scrollbar-thumb,
+*:active::-webkit-scrollbar-thumb {
+ background-color: rgb(var(--md-sys-color-surface-variant));
+}
+::-webkit-scrollbar-thumb:hover {
+ background-color: rgb(var(--md-sys-color-secondary-container));
+}
+
+a {
+ color: rgb(var(--md-sys-color-primary));
+}
+
+div[style*='margin: 0px 0px 10px;'] {
+ margin-bottom: 16px !important;
+}
+
+.el-tabs--card > .el-tabs__header .el-tabs__item,
+.el-tabs--card > .el-tabs__header .el-tabs__nav,
+.el-tabs--card > .el-tabs__header {
+ border: none;
+}
+
+.x-app,
+.x-container,
+.el-collapse-item__wrap,
+.x-login-container {
+ background-color: rgba(var(--md-sys-color-background));
+}
+
+.x-aside-container {
+ background: var(--md-sys-color-surface-1);
+}
+
+.x-aside-container .el-select {
+ padding: 3px !important;
+}
+
+.x-login-container p {
+ color: rgb(var(--md-sys-color-on-background));
+}
+
+.el-tabs--card > .el-tabs__header .el-tabs__item {
+ height: 40px;
+ border-radius: 20px;
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ font-family: var(--md-sys-typescale-label-large-font);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+ padding: 0 24px;
+ transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+ background-color: rgba(var(--md-sys-color-secondary-container));
+ color: rgb(var(--md-sys-color-on-surface));
+}
+
+.el-tab-pane .options-container {
+ flex-direction: column;
+ justify-content: center;
+}
+
+.options-container-item {
+ margin: 6px 0;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.options-container-item br + span {
+ flex-basis: 100%;
+}
+
+.options-container-item .name:first-child {
+ flex: 1;
+}
+
+.options-container-item *:not(.el-color-picker__color-inner):last-child {
+ margin-right: 4px;
+}
+
+.options-container[style='margin-top: 45px; border-top: 1px solid rgb(238, 238, 238); padding-top: 30px;'] {
+ border-top: 1px solid rgb(var(--md-sys-color-outline-variant)) !important;
+}
+
+#x-app .x-container {
+ padding: 20px;
+}
+
+#x-app .x-aside-container {
+ padding: 10px;
+}
+
+/* Input filter */
+
+.el-input__inner {
+ height: 48px;
+}
+.el-input__inner,
+.el-textarea__inner {
+ position: relative;
+ background-color: transparent;
+ border: 1px solid rgb(var(--md-sys-color-outline));
+ border-radius: 8px;
+ padding: 12px;
+ width: 100%;
+}
+.el-select__tags {
+ margin: 0 12px;
+}
+.el-input__inner:hover,
+.el-select .el-input__inner:focus,
+.el-textarea__inner:hover,
+.el-select:hover .el-input__inner,
+.el-pagination__sizes .el-input .el-input__inner:hover {
+ border: 1px solid rgb(var(--md-sys-color-on-surface));
+}
+.el-range-editor.is-active,
+.el-range-editor.is-active:hover,
+.el-select .el-input.is-focus .el-input__inner,
+.el-input.is-active .el-input__inner,
+.el-input__inner:focus,
+.el-textarea__inner:focus {
+ border: 2px solid rgb(var(--md-sys-color-primary));
+}
+input[type='text']::placeholder,
+input[type='number']::placeholder,
+.el-textarea__inner::placeholder {
+ color: rgb(var(--md-sys-color-on-surface-variant));
+}
+input[type='text'],
+input[type='number'],
+.el-textarea__inner {
+ color: rgb(var(--md-sys-color-on-surface));
+ font-family: var(--md-sys-typescale-body-large-font);
+ line-height: var(--md-sys-typescale-body-large-line-height);
+ font-size: var(--md-sys-typescale-body-large-size);
+ font-weight: var(--md-sys-typescale-body-large-weight);
+ letter-spacing: var(--md-sys-typescale-body-large-tracking);
+}
+.el-input--mini .el-input__inner {
+ height: 36px;
+}
+.el-pagination--small button,
+.el-pagination--small span:not([class*='suffix']),
+.el-pagination .el-select .el-input .el-input__inner,
+.el-input--mini .el-input__icon,
+.el-pagination--small .btn-next,
+.el-pagination--small .btn-prev,
+.el-pagination--small .el-pager li,
+.el-pagination--small .el-pager li.btn-quicknext,
+.el-pagination--small .el-pager li.btn-quickprev,
+.el-pagination--small .el-pager li:last-child {
+ height: 32px;
+ line-height: 32px;
+}
+.el-pagination .el-select .el-input .el-input__inner,
+.el-input--mini .el-input__icon {
+ border-radius: 8px;
+}
+.el-pagination button.btn-prev,
+.el-pagination button.btn-next {
+ position: relative;
+ background-color: rgb(var(--md-sys-color-secondary-container));
+ transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+}
+.el-pagination button:not(:disabled):hover.btn-prev::after,
+.el-pagination button:not(:disabled):hover.btn-next::after {
+ background-color: rgba(var(--md-sys-color-on-secondary-container), 0.08);
+}
+.el-pagination button:not(:disabled):focus.btn-prev::after,
+.el-pagination button:not(:disabled):focus.btn-next::after,
+.el-pagination button:not(:disabled):active.btn-prev::after,
+.el-pagination button:not(:disabled):active.btn-next::after {
+ background-color: rgba(var(--md-sys-color-on-secondary-container), 0.12);
+}
+.el-pagination button:disabled.btn-prev,
+.el-pagination button:disabled.btn-next {
+ background-color: rgba(var(--md-sys-color-on-surface), 0.12);
+ color: rgba(var(--md-sys-color-on-surface), 0.38);
+}
+.el-pagination button.btn-prev {
+ border-top-left-radius: 16px;
+ border-bottom-left-radius: 16px;
+ padding-left: 12px;
+ padding-right: 8px;
+}
+.el-pagination button.btn-prev::after {
+ border-top-left-radius: 16px;
+ border-bottom-left-radius: 16px;
+}
+.el-pagination button.btn-next .el-icon-arrow-right {
+ rotate: -90deg;
+}
+.el-pagination button.btn-next {
+ border-top-right-radius: 16px;
+ border-bottom-right-radius: 16px;
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.el-pagination button.btn-next::after {
+ border-top-right-radius: 16px;
+ border-bottom-right-radius: 16px;
+}
+.el-pager li,
+.el-pager li.btn-quicknext,
+.el-pager li.btn-quickprev {
+ position: relative;
+ padding: 0 8px;
+ font-weight: 500;
+ background-color: rgb(var(--md-sys-color-secondary-container));
+ color: rgb(var(--md-sys-color-on-surface-variant));
+}
+.el-pager li::after,
+.el-pagination button.btn-prev::after,
+.el-pagination button.btn-next::after,
+.el-tabs__item::after {
+ position: absolute;
+ content: '';
+ height: 100%;
+ width: 100%;
+ background-color: transparent;
+ border: none;
+ left: 0;
+ top: 0;
+ transition: background-color 0.1s ease-in-out;
+}
+.el-pager li:hover::after {
+ background-color: rgba(var(--md-sys-color-on-secondary-container), 0.08);
+}
+.el-pager li:focus::after,
+.el-pager li:active:after {
+ background-color: rgba(var(--md-sys-color-on-secondary-container), 0.12);
+}
+.el-pager li.active {
+ font-weight: 600;
+ color: rgb(var(--md-sys-color-primary));
+}
+.el-pager li:hover,
+.el-pagination button:not(:disabled):hover {
+ color: rgb(var(--md-sys-color-on-primary-container));
+}
+.el-form-item.is-error .el-input__inner,
+.el-form-item.is-error .el-input__inner:focus,
+.el-form-item.is-error .el-textarea__inner,
+.el-form-item.is-error .el-textarea__inner:focus,
+.el-message-box__input input.invalid,
+.el-message-box__input input.invalid:focus {
+ border-color: rgb(var(--md-sys-color-error));
+}
+
+.el-message-box__errormsg {
+ height: 18px;
+ opacity: 1;
+ color: rgb(var(--md-sys-color-error));
+ margin: 2px 12px;
+ font-family: var(--md-sys-typescale-body-small-font);
+ line-height: var(--md-sys-typescale-body-small-line-height);
+ font-size: var(--md-sys-typescale-body-small-size);
+ font-weight: var(--md-sys-typescale-body-small-weight);
+ letter-spacing: var(--md-sys-typescale-body-small-tracking);
+ transition: height 0.1s ease-out, min-height 0.1s ease-out,
+ opacity 0.1s ease-out;
+}
+.el-message-box__errormsg[style='visibility: hidden;'] {
+ height: 0;
+ min-height: 0;
+ opacity: 0;
+}
+
+/* Typography */
+
+.x-container > .options-container:first-child .header {
+ color: rgb(var(--md-sys-color-on-surface));
+ font-family: var(--md-sys-typescale-headline-medium-font);
+ line-height: var(--md-sys-typescale-headline-medium-line-height);
+ font-size: var(--md-sys-typescale-headline-medium-size);
+ font-weight: var(--md-sys-typescale-headline-medium-weight);
+ letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+}
+.options-container .header {
+ color: rgb(var(--md-sys-color-on-surface));
+ font-family: var(--md-sys-typescale-headline-small-font);
+ line-height: var(--md-sys-typescale-headline-small-line-height);
+ font-size: var(--md-sys-typescale-headline-small-size);
+ font-weight: var(--md-sys-typescale-headline-small-weight);
+ letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+}
+.options-container-item .name {
+ color: rgb(var(--md-sys-color-on-surface));
+ font-family: var(--md-sys-typescale-body-medium-font);
+ line-height: var(--md-sys-typescale-body-medium-line-height);
+ font-size: var(--md-sys-typescale-body-medium-size);
+ font-weight: var(--md-sys-typescale-body-medium-weight);
+ letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+ min-width: auto;
+ margin: auto;
+}
+.options-container .sub-header {
+ color: rgb(var(--md-sys-color-on-surface));
+ font-family: var(--md-sys-typescale-title-medium-font);
+ line-height: var(--md-sys-typescale-title-medium-line-height);
+ font-size: var(--md-sys-typescale-title-medium-size);
+ font-weight: var(--md-sys-typescale-title-medium-weight);
+ letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+}
+[style='color: rgb(245, 108, 108);'],
+[style='color: rgb(245, 108, 108);'] i[class^='el-icon']::before {
+ color: rgb(var(--md-sys-color-error)) !important;
+}
+[style*='color: rgb(144, 147, 153);'] {
+ color: rgb(var(--md-sys-color-outline)) !important;
+}
+
+/* ---------- Navigation rail ----------*/
+
+.pending-update {
+ margin: 15px !important;
+}
+
+.x-menu-container {
+ background: var(--md-sys-color-surface-2);
+ /* display: flex; */
+ vertical-align: middle;
+}
+.x-menu-container,
+.el-menu--collapse {
+ width: 80px;
+}
+.x-menu-container > .el-menu {
+ margin: auto 0;
+ display: grid;
+}
+.x-menu-container > .el-menu > .el-menu-item {
+ width: 56px;
+ height: 56px;
+ margin: 2px 12px;
+ border-radius: 28px;
+}
+.x-menu-container > .el-menu > .el-menu-item > div {
+ position: relative !important;
+ padding: 0 !important;
+}
+.x-menu-container > .el-menu > .el-menu-item > div > i {
+ position: absolute;
+ left: 50%;
+ top: 14px;
+ font-size: 24px;
+ transform: translate(-50%);
+ color: rgb(var(--md-sys-color-on-surface-variant));
+}
+.el-menu-item:focus,
+.el-menu-item:hover {
+ background-color: rgba(var(--md-sys-color-on-surface-variant), 0.08);
+}
+.el-menu-item.is-active::before {
+ width: 56px;
+ height: 56px;
+ border-radius: 28px;
+ left: 50%;
+ top: 0;
+ transform: translateX(-50%);
+ background-color: rgb(var(--md-sys-color-secondary-container));
+}
+.el-menu-item {
+ color: rgb(var(--md-sys-color-on-surface-variant));
+}
+.x-menu-container > .el-menu > .el-menu-item.is-active > div > i {
+ color: rgb(var(--md-sys-color-primary));
+}
+.el-menu-item.notify::after {
+ background: rgb(var(--md-sys-color-error));
+ height: 6px;
+ width: 6px;
+ border-radius: 3px;
+ right: 25%;
+ top: 25%;
+}
+
+/* ---------- Table ---------- */
+
+.el-table {
+ max-width: calc(100vw - 2 * 40px);
+ margin: 8px 0;
+ border: 1px solid rgb(var(--md-sys-color-surface-variant));
+ border-radius: 24px;
+ overflow-x: auto;
+ white-space: normal;
+}
+.el-table .el-table__body-wrapper table {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+.el-table tr,
+.el-table td.el-table__cell,
+.el-table th.el-table__cell,
+.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+ background-color: transparent;
+ transition: background-color 0.1s ease-in-out;
+}
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+ border-bottom: 1px solid rgb(var(--md-sys-color-surface-variant));
+}
+.el-table .el-table__header-wrapper table tr th {
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ background: rgba(var(--md-sys-color-primary), 0.05);
+ font-family: var(--md-sys-typescale-label-large-font);
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+.el-table .el-table__body-wrapper table tr td .cell,
+.el-table__expanded-cell {
+ color: rgb(var(--md-sys-color-on-background));
+ font-family: var(--md-sys-typescale-body-small-font);
+ line-height: var(--md-sys-typescale-body-small-line-height);
+ font-size: var(--md-sys-typescale-body-small-size);
+ font-weight: var(--md-sys-typescale-body-small-weight);
+ letter-spacing: var(--md-sys-typescale-body-small-tracking);
+}
+.el-table .el-table__body-wrapper table tr:first-child th,
+.el-table table tr:first-child td {
+ border-top: none;
+}
+.el-table .el-table__body-wrapper table tr th:first-child,
+.el-table table tr td:first-child {
+ border-left: none;
+}
+.el-table .el-table__body-wrapper table tr:last-child th,
+.el-table table tr:last-child td,
+.el-table tr,
+.el-table td.el-table__cell,
+.el-table th.el-table__cell {
+ border-bottom: none;
+}
+.el-table .el-table__body-wrapper table tr:last-child th:first-child,
+.el-table table tr:last-child td:first-child {
+ border-bottom-left-radius: 16px;
+}
+.el-table .el-table__body-wrapper table tr:last-child th:last-child,
+.el-table table tr:last-child td:last-child {
+ border-bottom-right-radius: 16px;
+}
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+ background-color: rgba(var(--md-sys-color-on-surface), 0.08);
+}
+.el-table .ascending .sort-caret.ascending {
+ border-bottom-color: rgb(var(--md-sys-color-primary));
+}
+.el-table .sort-caret.ascending {
+ border-bottom-color: rgb(var(--md-sys-color-outline-variant));
+}
+.el-table .descending .sort-caret.descending {
+ border-top-color: rgb(var(--md-sys-color-primary));
+}
+.el-table .sort-caret.descending {
+ border-top-color: rgb(var(--md-sys-color-outline-variant));
+}
+.el-popover__reference-wrapper > img.friends-list-avatar {
+ height: 48px;
+ width: 48px;
+ margin: auto;
+ object-fit: cover;
+ border-radius: 8px;
+ margin-left: 0;
+}
+.el-table::before {
+ display: none;
+}
+.el-table__expand-icon {
+ margin: 0 4px;
+}
+.el-table__expand-icon--expanded,
+.x-friend-group > .el-icon-arrow-right.rotate {
+ transform: rotateX(180deg);
+}
+.el-table .el-table__body-wrapper table tr th,
+.el-table .el-table__body-wrapper table tr > td:not(.is-right) > .cell {
+ /* it's too ugly
+ border-top: 1px solid rgb(var(--md-sys-color-surface-variant));
+ border-left: 1px solid rgb(var(--md-sys-color-surface-variant));
+ */
+ padding: 8px 10px;
+}
+/* ---------- Switch ---------- */
+
+.el-switch {
+ height: 28px;
+}
+
+/* track */
+.el-switch__core {
+ position: relative;
+ width: 48px !important;
+ height: 28px;
+ border-radius: 28px;
+ background-color: rgb(var(--md-sys-color-surface-variant)) !important;
+ border: 2px solid rgb(var(--md-sys-color-outline)) !important;
+ transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
+}
+
+/* active track */
+.el-switch.is-checked .el-switch__core {
+ background-color: rgb(var(--md-sys-color-primary)) !important;
+ border-color: transparent !important;
+}
+
+/* thumb */
+.el-switch__core::before {
+ position: absolute;
+ content: '';
+ height: 16px;
+ width: 16px;
+ left: 0px;
+ margin: 4px;
+ background-color: rgb(var(--md-sys-color-outline));
+ border-radius: 28px;
+ transition: left 200ms cubic-bezier(0, 0.5, 0.5, 1.5),
+ background-color 0.1s ease-in-out, height 50ms ease-out,
+ width 50ms ease-out, padding 50ms ease-out, margin 50ms ease-out;
+}
+
+/* active thumb */
+.el-switch.is-checked .el-switch__core::before {
+ content: 'Done';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ text-align: center;
+ line-height: 24px;
+ background-color: rgb(var(--md-sys-color-on-primary));
+ height: 24px;
+ width: 24px;
+ left: 20px;
+ margin: 0;
+}
+
+/* hover thumb */
+.el-switch:hover input:not(:disabled) + .el-switch__core::before {
+ background-color: rgb(var(--md-sys-color-on-surface-variant));
+}
+
+/* active hover thumb */
+.el-switch.is-checked:hover input:not(:disabled) + .el-switch__core::before {
+ background-color: rgb(var(--md-sys-color-primary-container));
+}
+
+/* click thumb */
+.el-switch:active input:not(:disabled) + .el-switch__core::before {
+ padding: 5px;
+ margin: 0px;
+ top: -1px;
+ left: -1px;
+}
+
+.el-switch.is-checked:active input:not(:disabled) + .el-switch__core::before {
+ padding: 1px;
+ margin: 0px;
+ top: -1px;
+ left: 19px;
+}
+
+/* active click thumb */
+.el-switch.is-checked:active input:not(:disabled) + .el-switch__core::before {
+ background-color: rgb(var(--md-sys-color-primary-container));
+}
+
+/* disabled track */
+.el-switch.is-disabled .el-switch__core {
+ background-color: rgba(
+ var(--md-sys-color-surface-variant),
+ 0.12
+ ) !important;
+ border-color: rgba(var(--md-sys-color-on-surface), 0.12) !important;
+}
+
+.el-switch.is-checked.is-disabled .el-switch__core {
+ background-color: rgba(var(--md-sys-color-on-surface), 0.12);
+ border-color: rgba(var(--md-sys-color-on-surface), 0);
+}
+
+/* disabled thumb */
+.el-switch.is-disabled .el-switch__core::before {
+ background-color: rgba(var(--md-sys-color-on-surface), 0.38);
+}
+
+.el-switch.is-disabled.is-checked .el-switch__core::before {
+ background-color: rgba(var(--md-sys-color-surface), 1);
+}
+
+/* disabled icon */
+.el-switch.is-disabled.is-disabled.is-checked .el-switch__core::before {
+ color: rgba(var(--md-sys-color-on-surface), 0.38);
+}
+
+/* active label */
+.el-switch__label {
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ font-family: var(--md-sys-typescale-label-large-font);
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+ transition: color 0.1s ease-in-out;
+}
+.el-switch__label.is-active {
+ color: rgb(var(--md-sys-color-primary));
+}
+.el-switch.is-disabled .el-switch__label {
+ color: rgba(var(--md-sys-color-on-surface), 0.12);
+}
+.el-switch.is-disabled .el-switch__label.is-active {
+ color: rgba(var(--md-sys-color-on-surface), 0.38);
+}
+
+.el-switch__core:after {
+ display: none;
+ transition: left 200ms cubic-bezier(0, 0.5, 0.5, 1.5);
+}
+
+/* ---------- Segmented buttons ---------- */
+
+.el-radio-button__inner,
+.el-radio-group {
+ height: 32px;
+}
+
+.el-radio-group {
+ display: inline-grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 1fr;
+}
+
+.el-radio-button--mini .el-radio-button__inner {
+ width: 100%;
+ padding: 6px;
+ border: none;
+ border-top: 1px solid rgb(var(--md-sys-color-outline));
+ border-bottom: 1px solid rgb(var(--md-sys-color-outline));
+ border-left: 1px solid rgb(var(--md-sys-color-outline)) !important;
+ background: transparent;
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ font-family: var(--md-sys-typescale-label-large-font);
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+}
+
+.el-radio-group > *:first-child > .el-radio-button__inner {
+ border-top-left-radius: 18px;
+ border-bottom-left-radius: 18px;
+}
+
+.el-radio-group > *:last-child > .el-radio-button__inner {
+ border-top-right-radius: 18px;
+ border-bottom-right-radius: 18px;
+ border-right: 1px solid rgb(var(--md-sys-color-outline));
+}
+
+.el-radio-button--mini
+ .el-radio-button__orig-radio:not(:disabled):checked
+ + .el-radio-button__inner {
+ background-color: rgb(var(--md-sys-color-secondary-container));
+ color: rgb(var(--md-sys-color-on-secondary-container));
+ border-color: rgb(var(--md-sys-color-outline));
+ box-shadow: none;
+}
+
+.el-radio-button--mini
+ .el-radio-button__orig-radio:not(:checked)
+ + .el-radio-button__inner {
+ padding: 6px 16px;
+}
+
+/* icon */
+.el-radio-button--mini
+ .el-radio-button__orig-radio:not(:disabled):checked
+ + .el-radio-button__inner:before {
+ content: 'done';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ font-size: 18px;
+ margin-right: 2px;
+}
+
+/* hover */
+.el-radio-button--mini:hover .el-radio-button__inner {
+ background: rgba(var(--md-sys-color-on-surface), 0.08);
+}
+.el-radio-button--mini:hover
+ .el-radio-button__orig-radio:not(:disabled):checked
+ + .el-radio-button__inner {
+ background: rgb(87, 80, 101);
+}
+
+/* focus */
+.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
+ box-shadow: none;
+}
+
+/* press */
+.el-radio-button--mini:active
+ .el-radio-button__orig-radio:not(:disabled)
+ + .el-radio-button__inner {
+ background: rgba(var(--md-sys-color-on-surface), 0.12);
+}
+.el-radio-button--mini:active
+ .el-radio-button__orig-radio:not(:disabled):checked
+ + .el-radio-button__inner {
+ background: rgb(93, 86, 107);
+}
+
+/* ---------- Filled button ---------- */
+
+.el-button {
+ position: relative;
+}
+.el-button::after {
+ position: absolute;
+ content: '';
+ height: 100%;
+ width: 100%;
+ background-color: transparent;
+ border: none;
+ left: 0;
+ top: 0;
+ border-radius: 20px;
+ transition: background-color 0.1s ease-in-out;
+}
+
+.el-button.el-button--primary:not(.el-button--text) {
+ height: 40px;
+ padding: 0;
+ margin: 0 4px;
+ border-radius: 20px;
+ background-color: rgb(var(--md-sys-color-primary));
+ color: rgb(var(--md-sys-color-on-primary));
+ font-family: var(--md-sys-typescale-label-large-font);
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+ border: none;
+ transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+}
+.el-button.el-button--primary:not(.el-button--text).is-disabled {
+ cursor: not-allowed;
+ background-color: rgba(var(--md-sys-color-on-surface), 0.12);
+ color: rgba(var(--md-sys-color-on-surface), 0.38);
+}
+.el-button.el-button--primary:not(.el-button--text) > i {
+ font-size: 18px;
+}
+.el-button.el-button--primary:not(.el-button--text) > i:first-child:last-child {
+ padding: 0 11px;
+}
+.el-button.el-button--primary:not(.el-button--text) > i:first-child {
+ padding-left: 16px;
+ padding-right: 8px;
+}
+.el-button.el-button--primary:not(.el-button--text) > *:not(i):first-child {
+ padding-left: 24px;
+}
+.el-button.el-button--primary:not(.el-button--text) > span:last-child {
+ padding-right: 24px;
+}
+.el-button.el-button--primary:not(.el-button--text, .is-disabled):hover::after {
+ background-color: rgba(var(--md-sys-color-on-primary), 0.08);
+}
+.el-button.el-button--primary:not(.el-button--text, .is-disabled):focus::after,
+.el-button.el-button--primary:not(
+ .el-button--text,
+ .is-disabled
+ ):active::after {
+ background-color: rgba(var(--md-sys-color-on-primary), 0.12);
+}
+
+/* ---------- Filled tonal button ---------- */
+
+.el-button:not(.el-button--text, .el-button--primary),
+.el-button-group > .el-button:first-child:last-child {
+ height: 40px;
+ padding: 0;
+ margin: 2px 4px;
+ border-radius: 20px;
+ font-family: var(--md-sys-typescale-label-large-font);
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+ border: none;
+ transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+}
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled),
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover,
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):active {
+ background-color: rgb(var(--md-sys-color-secondary-container));
+ color: rgb(var(--md-sys-color-on-secondary-container));
+}
+.el-button:not(.el-button--text, .el-button--primary).is-disabled {
+ cursor: not-allowed;
+ background-color: rgba(var(--md-sys-color-on-surface), 0.12);
+ color: rgba(var(--md-sys-color-on-surface), 0.38);
+}
+.el-button:not(.el-button--text, .el-button--primary) > i {
+ font-size: 18px;
+}
+.el-button:not(.el-button--text, .el-button--primary)
+ > i:first-child:last-child {
+ padding: 0 11px;
+}
+.el-button:not(.el-button--text, .el-button--primary) > i:first-child {
+ padding-left: 16px;
+ padding-right: 8px;
+}
+.el-button:not(.el-button--text, .el-button--primary) > *:not(i):first-child {
+ padding-left: 24px;
+}
+:not(.el-dropdown)
+ > .el-button:not(.el-button--text, .el-button--primary)
+ > span:last-child {
+ padding-right: 24px;
+}
+.el-dropdown
+ > .el-button:not(.el-button--text, .el-button--primary)
+ i:last-child {
+ padding-right: 12px;
+}
+.el-button:not(
+ .el-button--text,
+ .el-button--primary,
+ .is-disabled
+ ):hover::after {
+ background-color: rgba(var(--md-sys-color-on-secondary-container), 0.08);
+}
+.el-button:not(
+ .el-button--text,
+ .el-button--primary,
+ .is-disabled
+ ):focus::after,
+.el-button:not(
+ .el-button--text,
+ .el-button--primary,
+ .is-disabled
+ ):active::after {
+ background-color: rgba(var(--md-sys-color-on-secondary-container), 0.12);
+}
+
+/* ---------- Text button ---------- */
+
+.el-button.el-button--text:not(.el-button--primary) {
+ height: 40px;
+ padding: 0;
+ margin: 0 4px;
+ border-radius: 20px;
+ font-family: var(--md-sys-typescale-label-large-font);
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+ border: none;
+ transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+}
+.el-button.el-button--text:not(.el-button--primary) > i {
+ font-size: 15px;
+}
+.el-button.el-button--text:not(.el-button--primary, .is-disabled),
+.el-button.el-button--text:not(.el-button--primary, .is-disabled):hover,
+.el-button.el-button--text:not(.el-button--primary, .is-disabled):focus,
+.el-button.el-button--text:not(.el-button--primary, .is-disabled):active {
+ background-color: transparent;
+ color: rgb(var(--md-sys-color-on-secondary-container));
+}
+.el-button.el-button--text:not(.el-button--primary).is-disabled {
+ cursor: not-allowed;
+ background-color: rgba(var(--md-sys-color-on-surface), 0.12);
+ color: rgba(var(--md-sys-color-on-surface), 0.38);
+}
+.el-button.el-button--text:not(.el-button--primary, .is-disabled):hover::after {
+ background-color: rgba(var(--md-sys-color-primary), 0.08);
+}
+.el-button.el-button--text:not(.el-button--primary, .is-disabled):focus::after,
+.el-button.el-button--text:not(
+ .el-button--primary,
+ .is-disabled
+ ):active::after {
+ background-color: rgba(var(--md-sys-color-primary), 0.12);
+}
+
+/* ---------- Chip ---------- */
+
+.el-select .el-tag,
+.el-tag {
+ border: 1px solid rgb(var(--md-sys-color-outline));
+ background-color: transparent;
+ border-radius: 8px;
+ height: 28px;
+ padding: 0 12px;
+ margin-top: 8px !important;
+ margin-right: 8px !important;
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ font-family: var(--md-sys-typescale-label-large-font);
+ line-height: 28px;
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+.el-tag.el-tag--info .el-tag__close {
+ font-size: 18px;
+ color: rgb(var(--md-sys-color-on-surface-variant));
+}
+.el-select .el-tag__close.el-icon-close,
+.el-select .el-tag__close.el-icon-close:hover,
+.el-select .el-tag__close.el-icon-close:focus,
+.el-select .el-tag__close.el-icon-close:active,
+.el-tag.el-tag--info,
+.el-tag--plain.el-tag--danger {
+ background-color: transparent;
+}
+.el-tag--plain.el-tag--danger {
+ color: rgb(var(--md-sys-color-error));
+ border-color: rgb(var(--md-sys-color-error));
+}
+.el-tag.el-tag--info {
+ border-color: rgb(var(--md-sys-color-outline));
+}
+
+/* Friend */
+
+.el-tab-pane .x-friend-list {
+ padding: 0;
+}
+
+.x-friend-item {
+ padding: 8px;
+ border-radius: 25px;
+ transition: background-color 0.1s ease-in-out;
+}
+
+.x-friend-item:hover {
+ background-color: rgba(var(--md-sys-color-on-surface-variant), 0.08);
+ border-radius: 25px;
+}
+
+.x-friend-item .detail {
+ margin: 0 4px;
+}
+
+.x-friend-item > .detail > .name {
+ color: rgb(var(--md-sys-color-on-surface));
+ font-family: var(--md-sys-typescale-label-large-font);
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+.x-friend-item > .detail > .extra {
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ font-family: var(--md-sys-typescale-body-small-font);
+ line-height: var(--md-sys-typescale-body-small-line-height);
+ font-size: var(--md-sys-typescale-body-small-size);
+ font-weight: var(--md-sys-typescale-body-small-weight);
+ letter-spacing: var(--md-sys-typescale-body-small-tracking);
+ user-select: text;
+}
+
+/* friend dialog bar */
+
+.dialog-title {
+ color: rgb(var(--md-sys-color-on-surface));
+ font-family: var(--md-sys-typescale-title-medium-font);
+ line-height: var(--md-sys-typescale-title-medium-line-height);
+ font-size: var(--md-sys-typescale-title-medium-size);
+ font-weight: var(--md-sys-typescale-title-medium-weight);
+ letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+ user-select: text;
+}
+
+.el-tabs__active-bar,
+.el-tabs__nav-wrap::after {
+ display: none;
+}
+
+.el-tabs__header {
+ padding: 12px 0;
+ border-bottom: 1px solid rgb(var(--md-sys-color-outline-variant));
+}
+
+.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
+.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
+.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
+.el-tabs--top .el-tabs__item.is-top:nth-child(2),
+.el-tabs--bottom .el-tabs__item.is-bottom:last-child,
+.el-tabs--bottom .el-tabs__item.is-top:last-child,
+.el-tabs--top .el-tabs__item.is-bottom:last-child,
+.el-tabs--top .el-tabs__item.is-top:last-child {
+ padding: 0 24px;
+}
+
+img.x-link.el-popover__reference {
+ border-radius: 24px !important;
+}
+
+.el-popover {
+ background: var(--md-sys-color-surface-4);
+ border: none;
+ border-radius: 12px;
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.el-popover img {
+ border-radius: 12px;
+}
+
+.el-tabs__item {
+ position: relative;
+ height: 40px;
+ border-radius: 20px;
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ font-family: var(--md-sys-typescale-label-large-font);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+ padding: 0 24px;
+ transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+.el-tabs__item:not(:last-child) {
+ margin-right: 4px;
+}
+
+.el-tabs__item::after {
+ border-radius: 20px;
+}
+
+.el-tabs__item:hover,
+.el-tabs__item:focus,
+.el-tabs__item:active {
+ color: rgb(var(--md-sys-color-on-surface));
+}
+
+.el-tabs__item:hover::after {
+ background-color: rgba(var(--md-sys-color-on-secondary-container), 0.08);
+}
+
+.el-tabs__item:focus::after,
+.el-tabs__item:active::after {
+ background-color: rgba(var(--md-sys-color-on-secondary-container), 0.12);
+}
+
+.el-tabs__item.is-active {
+ background-color: rgba(var(--md-sys-color-secondary-container));
+ color: rgb(var(--md-sys-color-on-surface));
+}
+
+.el-tree {
+ background: var(--md-sys-color-surface-1);
+ border-radius: 24px;
+ user-select: text;
+}
+
+.el-tree span {
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ font-family: var(--md-sys-typescale-body-small-font);
+ line-height: var(--md-sys-typescale-body-small-line-height);
+ font-size: var(--md-sys-typescale-body-small-size);
+ font-weight: var(--md-sys-typescale-body-small-weight);
+ letter-spacing: var(--md-sys-typescale-body-small-tracking);
+}
+
+.el-tree span[style*='font-weight: bold;'] {
+ color: rgb(var(--md-sys-color-secondary));
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+ margin-right: 8px !important;
+}
+
+.el-tree .el-tree-node__content:hover {
+ background: var(--md-sys-color-surface-2);
+}
+
+.el-tree-node:focus > .el-tree-node__content {
+ background: var(--md-sys-color-surface-3);
+}
+
+/* ---------- Radio Button -------- */
+
+.el-radio__inner,
+.el-radio__input.is-checked .el-radio__inner,
+.el-radio__input.is-disabled .el-radio__inner,
+.el-radio__input.is-disabled .el-radio__inner::after,
+.el-radio__input.is-disabled.is-checked .el-radio__inner,
+.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
+ all: initial;
+ background-color: transparent;
+}
+
+.el-radio__inner::after {
+ all: unset;
+ height: 20px;
+ width: 20px;
+ content: 'radio_button_unchecked';
+ font-family: 'Material Symbols Rounded';
+ font-size: 20px;
+ line-height: 20px;
+ vertical-align: bottom;
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ transition: color 0.1s ease-in-out;
+ font-variation-settings: 'FILL' 0;
+}
+.el-radio__input.is-checked .el-radio__inner::after {
+ content: 'radio_button_checked';
+ color: rgb(var(--md-sys-color-primary));
+ font-variation-settings: 'FILL' 0;
+}
+.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
+ height: 20px;
+ width: 20px;
+ content: 'radio_button_checked';
+ font-family: 'Material Symbols Rounded';
+ font-size: 20px;
+ line-height: 20px;
+ vertical-align: bottom;
+ color: rgba(var(--md-sys-color-on-surface), 0.38);
+ font-variation-settings: 'FILL' 0;
+}
+.el-radio__input.is-disabled .el-radio__inner::after {
+ height: 20px;
+ width: 20px;
+ content: 'radio_button_unchecked';
+ font-family: 'Material Symbols Rounded';
+ font-size: 20px;
+ line-height: 20px;
+ vertical-align: bottom;
+ color: rgba(var(--md-sys-color-on-surface), 0.38);
+ font-variation-settings: 'FILL' 0;
+}
+.el-radio__label {
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ transition: color 0.1s ease-in-out;
+}
+.el-radio__input.is-checked + .el-radio__label {
+ color: rgb(var(--md-sys-color-primary));
+}
+.el-radio__input.is-disabled + span.el-radio__label {
+ color: rgba(var(--md-sys-color-on-surface), 0.38);
+}
+.el-radio-group {
+ align-items: center;
+}
+
+/* popup */
+
+.el-tooltip__popper.is-dark {
+ background-color: rgb(var(--md-sys-color-inverse-surface));
+ border-radius: 8px;
+ color: rgb(var(--md-sys-color-inverse-on-surface));
+ font-family: var(--md-sys-typescale-label-medium-font);
+ line-height: var(--md-sys-typescale-label-medium-line-height);
+ font-size: var(--md-sys-typescale-label-medium-size);
+ font-weight: var(--md-sys-typescale-label-medium-weight);
+ letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+ pointer-events: none;
+}
+
+/* Dialog / Message box */
+
+.el-dialog__wrapper::-webkit-scrollbar,
+.x-menu-container::-webkit-scrollbar {
+ display: none;
+}
+.el-dialog__wrapper {
+ display: grid;
+}
+*:not(.x-user-dialog, .x-world-dialog, .x-avatar-dialog, .x-group-dialog)
+ > .el-dialog {
+ width: auto !important;
+}
+*:not(.x-user-dialog, .x-world-dialog, .x-avatar-dialog, .x-group-dialog)
+ > .el-dialog
+ > .el-dialog__body {
+ overflow-y: auto;
+}
+.el-dialog {
+ border-radius: 28px;
+ padding: 24px;
+ background: var(--md-sys-color-surface-3);
+ margin: auto !important;
+}
+.el-dialog__body {
+ padding: 0 !important;
+}
+.el-message-box {
+ background: var(--md-sys-color-surface-3);
+ border: none;
+ border-radius: 28px;
+ padding: 24px;
+}
+.el-message-box > *,
+.el-dialog > * {
+ padding: 0;
+}
+.el-message-box__status.el-icon-info {
+ color: rgb(var(--md-sys-color-secondary));
+}
+.el-message-box__headerbtn,
+.el-dialog__headerbtn {
+ display: none;
+}
+.el-message-box > .el-message-box__header,
+.el-dialog__header {
+ text-align: center;
+ color: rgb(var(--md-sys-color-on-surface));
+ font-family: var(--md-sys-typescale-headline-small-font);
+ line-height: var(--md-sys-typescale-headline-small-line-height);
+ font-size: var(--md-sys-typescale-headline-small-size);
+ font-weight: var(--md-sys-typescale-headline-small-weight);
+ letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+ margin-bottom: 16px;
+}
+.x-user-dialog > .el-dialog > .el-dialog__body,
+.x-world-dialog > .el-dialog > .el-dialog__body,
+.x-avatar-dialog > .el-dialog > .el-dialog__body,
+.x-group-dialog > .el-dialog > .el-dialog__body {
+ margin-bottom: 0;
+ max-height: unset;
+}
+.el-message-box__content,
+.el-dialog__body {
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ font-family: var(--md-sys-typescale-body-medium-font);
+ line-height: var(--md-sys-typescale-body-medium-line-height);
+ font-size: var(--md-sys-typescale-body-medium-size);
+ font-weight: var(--md-sys-typescale-body-medium-weight);
+ letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+ margin-bottom: 24px;
+ max-height: 500px;
+ scroll-margin-left: 8px;
+}
+.el-message-box__content > *,
+.el-dialog__body > * {
+ padding-right: 8px;
+}
+
+.el-message-box__btns .el-button,
+.el-dialog__footer .el-button {
+ background-color: transparent;
+}
+
+.x-user-dialog
+ [style='flex: 1 1 0%; display: flex; align-items: center; margin-left: 15px;']
+ > :last-child,
+.x-world-dialog
+ [style='flex: 1 1 0%; display: flex; align-items: center; margin-left: 15px;']
+ > :last-child,
+.x-avatar-dialog
+ [style='flex: 1 1 0%; display: flex; align-items: center; margin-left: 15px;']
+ > :last-child,
+.x-group-dialog
+ [style='flex: 1 1 0%; display: flex; align-items: center; margin-left: 15px;']
+ > :last-child {
+ width: 40px;
+}
+[style='flex: 0 0 auto; margin-left: 10px;'] > .el-dropdown {
+ margin: 0 !important;
+}
+
+/* ---------- Slider ---------- */
+
+.el-slider__runway {
+ background-color: rgb(var(--md-sys-color-surface-variant));
+ height: 4px;
+ border-radius: 2px;
+}
+.el-slider__bar {
+ background-color: rgb(var(--md-sys-color-primary));
+ height: 4px;
+}
+.el-slider__stop {
+ background-color: rgba(var(--md-sys-color-on-primary), 0.38);
+ height: 4px;
+ width: 4px;
+}
+.el-slider__button {
+ position: relative;
+ height: 20px;
+ width: 20px;
+ border: none;
+ background-color: rgb(var(--md-sys-color-primary));
+}
+.el-slider__button.dragging,
+.el-slider__button.hover,
+.el-slider__button:hover {
+ transform: none;
+}
+.el-slider__button::after {
+ position: absolute;
+ content: '';
+ height: 0;
+ width: 0;
+ border-radius: 20px;
+ top: -10px;
+ transform: translate(-50%);
+ transition: height 0.1s ease-in-out, width 0.1s ease-in-out;
+}
+.el-slider__button:hover::after,
+.el-slider__button:focus::after {
+ height: 40px;
+ width: 40px;
+ background-color: rgba(var(--md-sys-color-primary), 0.08);
+}
+.el-slider__button:active:after {
+ height: 40px;
+ width: 40px;
+ background-color: rgba(var(--md-sys-color-primary), 0.12);
+}
+
+/* ---------- Color picker---------- */
+
+.color-picker {
+ line-height: 32px;
+ margin-right: 16px !important;
+}
+.el-color-picker--mini .el-color-picker__trigger {
+ height: 32px;
+ width: 32px;
+}
+.el-color-picker__color {
+ border: 1px solid rgb(var(--md-sys-color-outline));
+ border-radius: 4px;
+}
+.el-color-picker__color-inner {
+ margin: 2px;
+ border-radius: 4px;
+}
+.el-color-picker__panel {
+ background: var(--md-sys-color-surface-3);
+ border: none;
+ border-radius: 12px;
+ padding: 12px;
+}
+.el-color-dropdown__value {
+ width: 120px;
+}
+
+/* ---------- Menu ---------- */
+
+.el-popper[x-placement^='top'],
+.el-popper[x-placement^='bottom'] {
+ margin: 0;
+}
+.el-dropdown-menu,
+.el-select-dropdown {
+ padding: 8px 0;
+ border: none;
+ border-radius: 8px;
+ background: var(--md-sys-color-surface-2);
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ overflow: auto;
+ max-height: 90%;
+}
+.el-dropdown-menu__item {
+ height: 42px;
+ padding: 0 12px;
+ display: flex;
+ align-items: center;
+ color: rgb(var(--md-sys-color-on-surface));
+ font-family: var(--md-sys-typescale-label-large-font);
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+.el-dropdown-menu__item > i {
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ margin-right: 12px;
+ font-size: 24px;
+}
+.el-dropdown-menu--small
+ .el-dropdown-menu__item.el-dropdown-menu__item--divided:before {
+ margin: 0;
+}
+.el-dropdown-menu__item:not(.is-disabled):hover,
+.el-select-dropdown__item.hover,
+.el-dropdown-menu__item:focus {
+ background-color: rgba(var(--md-sys-color-on-surface), 0.08);
+ color: rgb(var(--md-sys-color-on-surface));
+}
+.el-dropdown-menu__item:active,
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
+.el-select-dropdown__item.selected {
+ background-color: rgba(var(--md-sys-color-on-surface), 0.12);
+ color: rgb(var(--md-sys-color-on-surface));
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
+ background-color: rgba(var(--md-sys-color-on-surface), 0.16);
+}
+.el-dropdown-menu--small
+ .el-dropdown-menu__item.el-dropdown-menu__item--divided {
+ border-top: 1px solid rgb(var(--md-sys-color-outline-variant));
+ margin-top: 8px;
+}
+.el-popper .popper__arrow {
+ display: none;
+}
+
+/* Status icon */
+i.x-user-status {
+ height: 12px;
+ width: 12px;
+}
+
+/* ---------- Flags ---------- */
+
+/* Navigation rail */
+.el-icon-news::before {
+ content: 'feed';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-s-data::before {
+ content: 'leaderboard';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-search::before {
+ content: 'search';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-notebook-2::before {
+ content: 'group';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-finished::before {
+ content: 'security';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-bell::before {
+ content: 'notifications';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-s-management::before {
+ content: 'bookmark';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-user::before {
+ content: 'account_circle';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-s-tools::before {
+ content: 'settings';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* star */
+.el-icon-star-off::before {
+ content: 'star';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 0;
+}
+.el-icon-star-on::before {
+ content: 'star';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* table expend */
+.el-icon-arrow-right::before {
+ content: 'expand_more';
+ font-family: 'Material Symbols Rounded';
+ font-size: 16px;
+ line-height: 12px;
+ vertical-align: bottom;
+ font-variation-settings: 'FILL' 1;
+ color: rgb(var(--md-sys-color-outline));
+}
+
+/* right arrow */
+.el-icon-right::before {
+ content: 'arrow_right_alt';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: -7px;
+ margin: 0 4px;
+ font-size: 24px;
+ font-variation-settings: 'FILL' 1;
+ color: rgb(var(--md-sys-color-primary));
+}
+
+/* close */
+.el-icon-close::before {
+ content: 'close';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* more */
+.el-icon-more::before {
+ content: 'more_horiz';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* direct access */
+.el-icon-discover::before {
+ content: 'explore';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* refresh */
+.el-icon-refresh::before {
+ content: 'refresh';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* User Menu */
+.el-icon-s-order::before {
+ content: 'content_copy';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-s-custom::before {
+ content: 'person';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-edit::before {
+ content: 'edit';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-switch-button::before {
+ content: 'logout';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* World Menu */
+.el-icon-s-flag::before {
+ content: 'flag';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-s-home::before {
+ content: 'home';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-tickets::before {
+ content: 'library_books';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 0;
+}
+.el-icon-picture-outline::before {
+ content: 'photo_library';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 0;
+}
+
+/* info */
+.el-icon-warning::before,
+.el-icon-info::before {
+ content: 'info';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* delete */
+.el-icon-delete::before,
+.el-icon-delete-solid::before {
+ content: 'delete';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* Profile panel */
+.el-icon-printer::before {
+ content: 'print';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-chat-dot-round::before {
+ content: 'badge';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-postcard::before {
+ content: 'contact_mail';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-circle-close::before {
+ content: 'block';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-turn-off-microphone::before {
+ content: 'mic_off';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* Setting */
+.el-icon-notebook-1::before {
+ content: 'table';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-rank::before {
+ content: 'open_with';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-time::before {
+ content: 'schedule';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-chat-square::before {
+ content: 'filter_alt';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-s-operation::before {
+ content: 'tune';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-caret-right::before {
+ content: 'play_arrow';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+.el-icon-download::before {
+ content: 'download';
+ font-family: 'Material Symbols Rounded';
+ vertical-align: bottom;
+ margin: 0;
+ font-variation-settings: 'FILL' 1;
+}
+
+/* Checkbox */
+.el-checkbox__inner,
+.el-checkbox__inner::after,
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+ all: unset;
+}
+.el-checkbox__inner::after {
+ all: unset;
+ height: 20px;
+ width: 20px;
+ content: 'check_box_outline_blank';
+ font-family: 'Material Symbols Rounded';
+ font-size: 20px;
+ line-height: 20px;
+ color: rgb(var(--md-sys-color-on-surface-variant));
+ transition: color 0.1s ease-in-out;
+ font-variation-settings: 'FILL' 0;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner::after {
+ content: 'check_box';
+ color: rgb(var(--md-sys-color-primary));
+}
+.el-checkbox__input.is-checked + .el-checkbox__label {
+ color: rgb(var(--md-sys-color-primary));
+}
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+ content: 'indeterminate_check_box';
+ color: rgb(var(--md-sys-color-on-surface));
+}
+.el-checkbox__label {
+ font-family: var(--md-sys-typescale-label-large-font);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+
+.x-friend-item[style*='width: 350px;'] {
+ width: auto !important;
+}
+.x-friend-list > .x-friend-group:first-child {
+ color: rgb(var(--md-sys-color-on-surface));
+ font-family: var(--md-sys-typescale-label-large-font);
+ font-size: var(--md-sys-typescale-label-large-size);
+ font-weight: var(--md-sys-typescale-label-large-weight);
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
+ margin-bottom: 6px;
+}
+.x-friend-list > .x-friend-group > .x-link {
+ color: rgb(var(--md-sys-color-outline));
+ font-family: var(--md-sys-typescale-label-medium-font);
+ font-size: var(--md-sys-typescale-label-medium-size);
+ font-weight: var(--md-sys-typescale-label-medium-weight);
+ letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+}
+
+.el-table_2_column_10,
+.el-table_2_column_11,
+.el-table_2_column_12,
+.el-table_2_column_13,
+.el-table_3_column_15,
+.el-table_3_column_16,
+.el-table_3_column_17,
+.el-table_29_column_204,
+.el-table_30_column_208,
+.el-table_31_column_212,
+.el-table_32_column_216,
+.el-table_39_column_259,
+.el-table_39_column_267,
+.el-table_40_column_274,
+.el-table_40_column_275,
+.el-table_41_column_283,
+.el-table_41_column_285,
+.el-table_41_column_286,
+.el-table_41_column_287,
+.el-table_41_column_291 {
+ text-align: center !important;
+}
diff --git a/html/src/theme.pink.scss b/html/src/theme.pink.scss
new file mode 100644
index 00000000..31109dfc
--- /dev/null
+++ b/html/src/theme.pink.scss
@@ -0,0 +1,346 @@
+/*
+ * VRCX Pink theme by Kamiya
+ * https://github.com/kamiya10/VRCX-theme
+ */
+@import 'theme.dark.scss';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+:root {
+ --theme: #dfa2a2;
+ --bg: #322525;
+ --light-bg: #443030;
+ --lighter-bg: #554040;
+ --lighter-lighter-bg: #655050;
+ --lighter-lighter-lighter-bg: #756060;
+ --lighter-lighter-lighter-lighter-bg: #857070;
+ --lighter-border: #aa6065;
+ --font: 'Poppins', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
+ 'Noto Sans SC', sans-serif;
+}
+body,
+button,
+input,
+select,
+textarea {
+ font-family: var(--font);
+}
+.el-collapse-item__wrap,
+.el-table td.el-table__cell,
+.el-table th.el-table__cell,
+.el-table tr,
+.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+ background-color: transparent;
+}
+.el-table--mini .el-table__expanded-cell[class*='cell']:hover {
+ background-color: transparent !important;
+}
+.el-button.is-disabled,
+.el-button.is-disabled:focus,
+.el-button.is-disabled:hover,
+.el-pagination .btn-next,
+.el-pagination .btn-prev,
+.el-switch__core,
+.el-tree,
+.x-aside-container,
+.x-container,
+.x-login-container {
+ background-color: var(--bg);
+}
+.el-pager li,
+.el-pager li.btn-quicknext,
+.el-pager li.btn-quickprev {
+ color: #cbb;
+ transition: color ease-in-out 0.1s;
+}
+.el-pager li:hover {
+ color: #fff;
+}
+.el-tree-node:focus > .el-tree-node__content,
+.el-tree-node__content:hover {
+ border-radius: 10px;
+ background-color: var(--light-bg);
+}
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled),
+.el-color-picker__panel,
+.el-dialog,
+.el-input .el-input__count .el-input__count-inner,
+.el-input__inner,
+.el-message-box,
+.el-pager li,
+.el-radio-button__inner,
+.el-select-dropdown,
+.el-textarea .el-input__count,
+.el-textarea__inner,
+.x-menu-container {
+ background-color: var(--lighter-bg);
+}
+.el-color-picker__panel {
+ border-color: var(--lighter-bg);
+}
+.el-button,
+.el-radio-button__inner {
+ color: #dcc;
+}
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):focus,
+.el-button:not(.el-button--text, .el-button--primary, .is-disabled):hover,
+.el-dropdown-menu,
+.x-change-image-item:hover,
+.x-friend-item:hover {
+ background-color: var(--lighter-lighter-bg);
+ border-radius: 10px;
+ color: #fff;
+}
+.el-button--primary {
+ background-color: var(--theme);
+ border-color: var(--theme);
+ color: #fff;
+}
+.el-tooltip__popper.is-dark {
+ background-color: var(--lighter-lighter-lighter-bg);
+}
+.el-button--primary:focus,
+.el-button--primary:hover {
+ background-color: var(--lighter-lighter-lighter-lighter-bg);
+ border-color: var(--lighter-lighter-lighter-lighter-bg);
+}
+.el-dialog,
+.el-dropdown-menu,
+.el-tooltip__popper.is-dark {
+ border-radius: 10px;
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+.el-dropdown-menu__item,
+.x-friend-item {
+ transition: background-color ease-in-out 0.1s, color ease-in-out 0.1s;
+}
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+ color: #fff;
+ background-color: var(--lighter-lighter-lighter-bg);
+}
+.el-popper[x-placement^='bottom'] .popper__arrow,
+.el-popper[x-placement^='bottom'] .popper__arrow::after,
+.el-table th.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+ border-bottom-color: var(--lighter-lighter-bg);
+}
+.el-table td.el-table__cell,
+.el-table tr {
+ border-color: transparent;
+}
+.el-popper .popper__arrow,
+.el-popper .popper__arrow::after,
+.el-popper[x-placement^='top'] .popper__arrow,
+.el-popper[x-placement^='top'] .popper__arrow::after {
+ border-top-color: var(--lighter-lighter-bg);
+}
+.el-dropdown-menu__item--divided::before,
+.el-menu-item:focus,
+.el-menu-item:hover,
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover,
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+ background-color: var(--lighter-lighter-bg);
+}
+.el-input .el-input__count .el-input__count-inner,
+.el-input__inner,
+.el-textarea .el-input__count,
+.el-textarea__inner {
+ border: var(--lighter-border);
+}
+.el-dropdown-menu__item--divided {
+ border-top: 2px solid var(--lighter-lighter-lighter-lighter-bg);
+}
+.el-radio-button__inner {
+ border: 1px solid var(--lighter-lighter-bg);
+}
+.el-checkbox__input.is-checked + .el-checkbox__label,
+.el-menu-item.is-active,
+.el-pagination .btn-next:not(:disabled):hover .el-icon,
+.el-pagination .btn-prev:not(:disabled):hover .el-icon,
+.el-radio__input.is-checked + .el-radio__label,
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
+.el-tabs__item.is-active {
+ color: var(--theme);
+ transition: color ease-in-out 0.1s;
+}
+.el-pager .number:first-child {
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+}
+.el-pager .number:last-child {
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+.el-menu-item i,
+.el-tabs__item,
+i.el-icon-close:hover {
+ color: #cbb;
+ transition: color ease-in-out 0.1s;
+}
+.el-button--text:focus,
+.el-button--text:hover,
+.el-tabs__item:hover {
+ color: #fff;
+}
+.el-slider__bar,
+.el-tabs__active-bar {
+ background-color: var(--theme);
+}
+.el-slider__button {
+ border: 2px solid var(--theme);
+}
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner,
+.el-radio-button__orig-radio:checked + .el-radio-button__inner,
+.el-radio__input.is-checked .el-radio__inner,
+.el-switch.is-checked .el-switch__core {
+ background-color: var(--theme);
+ border-color: var(--theme);
+}
+.el-radio-button__orig-radio:checked + .el-radio-button__inner {
+ box-shadow: -1px 0 0 0 var(--theme);
+}
+.el-radio-button__orig-radio:checked + .el-radio-button__inner:hover {
+ color: #fff;
+}
+.el-pager li.active,
+.el-radio-button__inner:not(.is-disabled):hover,
+.el-select-dropdown__item.selected,
+.el-switch__label.is-active {
+ color: var(--theme);
+}
+.el-tag.el-tag--info {
+ color: #baa;
+ background-color: var(--lighter-lighter-bg);
+ border: 1px solid var(--lighter-lighter-lighter-lighter-bg);
+}
+.el-collapse-item__header > span + span,
+.el-form-item__label,
+.el-pagination__total,
+.el-table th.el-table__cell > .cell,
+.el-table__expand-icon > .el-icon,
+.x-login-container div[style='text-align: center; font-size: 12px;'] > * {
+ color: #baa !important;
+}
+.el-table .ascending .sort-caret.ascending {
+ border-bottom-color: var(--theme);
+}
+.el-table .descending .sort-caret.descending {
+ border-top-color: var(--theme);
+}
+.el-pagination button:disabled,
+.el-pagination button:disabled:focus,
+.el-pagination button:disabled:hover {
+ background-color: transparent;
+ color: transparent !important;
+}
+.el-table--border::after,
+.el-table--group::after,
+.el-table::before,
+.el-tabs__nav-wrap::after {
+ background-color: transparent;
+}
+.options-container-item .name {
+ color: #eeeaea;
+}
+.el-tabs--card > .el-tabs__header,
+.el-tabs--card > .el-tabs__header .el-tabs__item,
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active,
+.el-tabs--card > .el-tabs__header .el-tabs__nav {
+ border-color: transparent;
+}
+.options-container .header,
+h2 {
+ color: #faeeee;
+}
+.options-container .sub-header {
+ color: #988;
+}
+.el-table__row td:first-child {
+ padding-left: 5px;
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+}
+.el-table__row td:last-child {
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+.el-select-dropdown {
+ border-color: var(--lighter-bg);
+}
+.el-popover {
+ background-color: var(--lighter-bg);
+ border-color: var(--lighter-border);
+}
+.x-menu-container::-webkit-scrollbar {
+ display: none;
+}
+::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255, 255, 255, 0.3);
+}
+::-webkit-scrollbar-thumb:active {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+.el-radio-button__orig-radio:disabled + .el-radio-button__inner {
+ color: var(--lighter-lighter-lighter-bg);
+ background-color: var(--light-bg);
+ border-color: var(--lighter-bg);
+}
+.el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
+ color: var(--lighter-lighter-lighter-bg);
+ background-color: var(--lighter-bg);
+ border-color: var(--lighter-bg);
+}
+.el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
+ box-shadow: none;
+}
+body,
+button,
+input,
+select,
+textarea {
+ font-variant-numeric: tabular-nums;
+}
+.extra,
+.dialog-title,
+.x-link,
+.el-tree,
+input[type='text'],
+input[type='password'] {
+ user-select: text;
+}
+.avatar-info-public::selection {
+ color: hsl(100, 54%, 64%);
+}
+.avatar-info-own::selection {
+ color: hsl(36, 77%, 72%);
+}
+::selection {
+ background-color: rgba(255, 255, 255, 0.2);
+ color: #fff;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+ transition: background-color 0.1s ease-in-out;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+ background-color: var(--lighter-lighter-lighter-bg);
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
+ background-color: var(--lighter-lighter-bg);
+}
+.el-select .el-tag__close.el-icon-close {
+ background-color: var(--lighter-lighter-bg);
+}
+input[type='checkbox'] + .el-switch__core {
+ width: 36px !important;
+}
+input[type='checkbox']:checked + .el-switch__core {
+ border-color: var(--theme) !important;
+ background-color: var(--theme) !important;
+}
+.el-loading-spinner .path {
+ stroke: var(--theme);
+}
diff --git a/html/webpack.config.js b/html/webpack.config.js
index 6d7d332b..8227d4d5 100644
--- a/html/webpack.config.js
+++ b/html/webpack.config.js
@@ -18,7 +18,10 @@ module.exports = {
import: ['./src/app.js', './src/app.scss'],
dependOn: 'vendor'
},
- 'app.dark': './src/app.dark.scss',
+ 'theme.dark': './src/theme.dark.scss',
+ 'theme.darkvanilla': './src/theme.darkvanilla.scss',
+ 'theme.pink': './src/theme.pink.scss',
+ 'theme.material3': './src/theme.material3.scss',
flags: './src/flags.scss',
vr: {
import: ['./src/vr.js', './src/vr.scss'],