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

Build user created themes into app

Browse Source
This commit is contained in:
Natsumi
2023-06-09 02:19:28 +12:00
parent 3780d61054
commit c19a7101a6
10 changed files with 2874 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
html/src/app.js
View File

@@ -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

24
html/src/app.scss
View File

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

12
html/src/index.pug
View File

@@ -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")

3
html/src/localization/strings/en.json
View File

@@ -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",

367
html/src/mixins/tabs/settings.pug
View File

@@ -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")]

0
html/src/app.dark.scss → html/src/theme.dark.scss
View File

310
html/src/theme.darkvanilla.scss Normal file
View File

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

1940
html/src/theme.material3.scss Normal file
View File

File diff suppressed because it is too large Load Diff

346
html/src/theme.pink.scss Normal file
View File

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

5
html/webpack.config.js
View File

@@ -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'],