MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-05 14:26:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

adjust status icon shadow and add description for age gated instances setting

Browse Source
This commit is contained in:
pa
2026-03-18 21:39:40 +09:00
parent 6151faf64b
commit ed584a29a3
3 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/localization/en.json
+1
View File
@@ -838,6 +838,7 @@
"show_instance_id": "Show Instance ID", "show_instance_id": "Show Instance ID",
"show_status_bar": "Show Status Bar", "show_status_bar": "Show Status Bar",
"age_gated_instances": "Age Gated Instances", "age_gated_instances": "Age Gated Instances",
"age_gated_instances_description": "Hide age-restricted instances. Friends in these instances will be shown as restricted.",
"nicknames": "Memo Nicknames", "nicknames": "Memo Nicknames",
"sort_favorite_by": "Sort Favorites by", "sort_favorite_by": "Sort Favorites by",
"sort_favorite_by_name": "Name", "sort_favorite_by_name": "Name",
src/styles/status-icon.css
+10 -6
View File
@@ -11,42 +11,46 @@
content: ''; content: '';
background: var(--status-offline); background: var(--status-offline);
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 0 1px var(--background); box-shadow: 0 0 0 2px var(--background);
} }
.status-icon.active::after { .status-icon.active::after {
background: var(--status-active); background: var(--status-active);
box-shadow: 0 0 0 1px var(--background); box-shadow: 0 0 0 2px var(--background);
} }
.status-icon.online::after { .status-icon.online::after {
background: var(--status-online); background: var(--status-online);
box-shadow: box-shadow:
0 0 0 1px var(--background), 0 0 0 2px var(--background),
0 0 4px color-mix(in oklch, var(--status-online) 50%, transparent); 0 0 4px color-mix(in oklch, var(--status-online) 50%, transparent);
} }
.status-icon.joinme::after { .status-icon.joinme::after {
background: var(--status-joinme); background: var(--status-joinme);
box-shadow: box-shadow:
0 0 0 1px var(--background), 0 0 0 2px var(--background),
0 0 4px color-mix(in oklch, var(--status-joinme) 50%, transparent); 0 0 4px color-mix(in oklch, var(--status-joinme) 50%, transparent);
} }
.status-icon.askme::after { .status-icon.askme::after {
background: var(--status-askme); background: var(--status-askme);
box-shadow: box-shadow:
0 0 0 1px var(--background), 0 0 0 2px var(--background),
0 0 4px color-mix(in oklch, var(--status-askme) 50%, transparent); 0 0 4px color-mix(in oklch, var(--status-askme) 50%, transparent);
} }
.status-icon.busy::after { .status-icon.busy::after {
background: var(--status-busy); background: var(--status-busy);
box-shadow: box-shadow:
0 0 0 1px var(--background), 0 0 0 2px var(--background),
0 0 4px color-mix(in oklch, var(--status-busy) 50%, transparent); 0 0 4px color-mix(in oklch, var(--status-busy) 50%, transparent);
} }
.accessible-status-indicators .status-icon::after {
box-shadow: none;
}
.accessible-status-indicators .status-icon.joinme::after { .accessible-status-indicators .status-icon.joinme::after {
mask-image: url(/images/masks/joinme.svg); mask-image: url(/images/masks/joinme.svg);
} }
src/views/Settings/components/Tabs/InterfaceTab.vue
+2 -1
View File
@@ -119,7 +119,8 @@
" /> " />
</SettingsItem> </SettingsItem>
<SettingsItem :label="t('view.settings.appearance.appearance.age_gated_instances')"> <SettingsItem :label="t('view.settings.appearance.appearance.age_gated_instances')"
:description="t('view.settings.appearance.appearance.age_gated_instances_description')">
<Switch <Switch
:model-value="isAgeGatedInstancesVisible" :model-value="isAgeGatedInstancesVisible"
@update:modelValue="setIsAgeGatedInstancesVisible" /> @update:modelValue="setIsAgeGatedInstancesVisible" />