diff --git a/Dotnet/AppApi/AppApi.cs b/Dotnet/AppApi/AppApi.cs index 5d21afcc..e90d3160 100644 --- a/Dotnet/AppApi/AppApi.cs +++ b/Dotnet/AppApi/AppApi.cs @@ -148,6 +148,11 @@ namespace VRCX VRCXVR.Instance.Restart(); } + public void SetZoom(int zoomLevel) + { + MainForm.Instance.Browser.SetZoomLevel(zoomLevel); + } + /// /// Retrieves an image from the VRChat API and caches it for future use. The function will return the cached image if it already exists. /// diff --git a/html/src/app.scss b/html/src/app.scss index 7372c3e2..ab2909b7 100644 --- a/html/src/app.scss +++ b/html/src/app.scss @@ -258,7 +258,9 @@ hr.x-vertical-divider { translate: 0 -50%; border-radius: 4px; background: #303133; - transition: background-color 0.4s, left 0.2s; + transition: + background-color 0.4s, + left 0.2s; } .el-menu-item.is-active::before { @@ -405,6 +407,15 @@ img.friends-list-avatar { filter: none; } +.x-friend-item > .avatar.active > img, +.x-friend-item > .avatar.online > img, +.x-friend-item > .avatar.joinme > img, +.x-friend-item > .avatar.askme > img, +.x-friend-item > .avatar.busy > img, +.x-friend-item > .avatar.offline > img { + mask-image: url(masks/usercutout.svg); +} + .x-friend-item > .avatar.active::after, .x-friend-item > .avatar.online::after, .x-friend-item > .avatar.joinme::after, @@ -412,13 +423,12 @@ img.friends-list-avatar { .x-friend-item > .avatar.busy::after, .x-friend-item > .avatar.offline::after { position: absolute; - right: 0; - bottom: 0; - width: 8px; - height: 8px; + right: 1px; + bottom: 1px; + width: 9px; + height: 9px; content: ''; background: #909399; - border: 2px solid #fff; border-radius: 50%; } @@ -432,14 +442,17 @@ img.friends-list-avatar { .x-friend-item > .avatar.joinme::after { background: #409eff; + mask-image: url(masks/joinme.svg); } .x-friend-item > .avatar.askme::after { background: #ff9500; + mask-image: url(masks/askme.svg); } .x-friend-item > .avatar.busy::after { background: #ff2c2c; + mask-image: url(masks/busy.svg); } .x-friend-item > .avatar.offline::after { @@ -559,14 +572,17 @@ i.x-user-status.online { i.x-user-status.joinme { background: #409eff; + mask-image: url(masks/joinme.svg); } i.x-user-status.askme { background: #ff9500; + mask-image: url(masks/askme.svg); } i.x-user-status.busy { background: #ff2c2c; + mask-image: url(masks/busy.svg); } .x-tag-friend { @@ -748,7 +764,7 @@ i.x-user-status.busy { .el-dialog, .el-message-box { - border-radius: 10px; + border-radius: 28px; } .el-tabs__nav-wrap::after { diff --git a/html/src/index.pug b/html/src/index.pug index b481b9ef..afd91b9c 100644 --- a/html/src/index.pug +++ b/html/src/index.pug @@ -208,10 +208,10 @@ html div(v-loading="userDialog.loading") div(style="display:flex") el-popover(v-if="userDialog.ref.profilePicOverride" placement="right" width="500px" trigger="click") - img.x-link(slot="reference" v-lazy="userDialog.ref.profilePicOverride" style="flex:none;height:120px;width:213.33px;border-radius:4px;object-fit:cover") + img.x-link(slot="reference" v-lazy="userDialog.ref.profilePicOverride" style="flex:none;height:120px;width:213.33px;border-radius:12px;object-fit:cover") img.x-link(v-lazy="userDialog.ref.profilePicOverride" style="height:400px" @click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)") el-popover(v-else placement="right" width="500px" trigger="click") - img.x-link(slot="reference" v-lazy="userDialog.ref.currentAvatarThumbnailImageUrl" style="flex:none;height:120px;width:160px;border-radius:4px;object-fit:cover") + img.x-link(slot="reference" v-lazy="userDialog.ref.currentAvatarThumbnailImageUrl" style="flex:none;height:120px;width:160px;border-radius:12px;object-fit:cover") img.x-link(v-lazy="userDialog.ref.currentAvatarImageUrl" style="height:500px" @click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)") div(style="flex:1;display:flex;align-items:center;margin-left:15px") div(style="flex:1") @@ -260,7 +260,7 @@ html span(v-text="userDialog.ref.statusDescription" style="font-size:12px") div(v-if="userDialog.ref.userIcon" style="flex:none;margin-right:10px") el-popover(placement="right" width="500px" trigger="click") - img.x-link(slot="reference" v-lazy="userDialog.ref.userIcon" style="flex:none;width:120px;height:120px;border-radius:4px;object-fit:cover") + img.x-link(slot="reference" v-lazy="userDialog.ref.userIcon" style="flex:none;width:120px;height:120px;border-radius:12px;object-fit:cover") img.x-link(v-lazy="userDialog.ref.userIcon" style="height:500px" @click="showFullscreenImageDialog(userDialog.ref.userIcon)") div(style="flex:none") template(v-if="(API.currentUser.id !== userDialog.ref.id && userDialog.isFriend) || userDialog.isFavorite") @@ -620,7 +620,7 @@ html div(v-loading="worldDialog.loading") div(style="display:flex") el-popover(placement="right" width="500px" trigger="click") - img.x-link(slot="reference" v-lazy="worldDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:4px") + img.x-link(slot="reference" v-lazy="worldDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:12px") img.x-link(v-lazy="worldDialog.ref.imageUrl" style="width:500px;height:375px" @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)") div(style="flex:1;display:flex;align-items:center;margin-left:15px") div(style="flex:1") @@ -828,7 +828,7 @@ html div(v-loading="avatarDialog.loading") div(style="display:flex") el-popover(placement="right" width="500px" trigger="click") - img.x-link(slot="reference" v-lazy="avatarDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:4px") + img.x-link(slot="reference" v-lazy="avatarDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:12px") img.x-link(v-lazy="avatarDialog.ref.imageUrl" style="width:500px;height:375px" @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)") div(style="flex:1;display:flex;align-items:center;margin-left:15px") div(style="flex:1") @@ -947,7 +947,7 @@ html .group-body(v-loading="groupDialog.loading") div(style="display:flex") el-popover(placement="right" width="500px" trigger="click") - img.x-link(slot="reference" v-lazy="groupDialog.ref.iconUrl" style="flex:none;width:120px;height:120px;border-radius:4px") + img.x-link(slot="reference" v-lazy="groupDialog.ref.iconUrl" style="flex:none;width:120px;height:120px;border-radius:12px") img.x-link(v-lazy="groupDialog.ref.iconUrl" style="width:500px;height:500px" @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)") div(style="flex:1;display:flex;align-items:center;margin-left:15px") .group-header(style="flex:1") diff --git a/html/src/masks/askme.svg b/html/src/masks/askme.svg new file mode 100644 index 00000000..7422dc1e --- /dev/null +++ b/html/src/masks/askme.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/html/src/masks/busy.svg b/html/src/masks/busy.svg new file mode 100644 index 00000000..c615aacc --- /dev/null +++ b/html/src/masks/busy.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/html/src/masks/joinme.svg b/html/src/masks/joinme.svg new file mode 100644 index 00000000..f3f24f4d --- /dev/null +++ b/html/src/masks/joinme.svg @@ -0,0 +1,10 @@ + + + + + diff --git a/html/src/masks/usercutout.svg b/html/src/masks/usercutout.svg new file mode 100644 index 00000000..c679648d --- /dev/null +++ b/html/src/masks/usercutout.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/html/src/theme.dark.scss b/html/src/theme.dark.scss index efc174de..7df03395 100644 --- a/html/src/theme.dark.scss +++ b/html/src/theme.dark.scss @@ -368,15 +368,6 @@ button { background: #3e3e3e; } -.x-friend-item > .avatar.active::after, -.x-friend-item > .avatar.online::after, -.x-friend-item > .avatar.joinme::after, -.x-friend-item > .avatar.askme::after, -.x-friend-item > .avatar.busy::after, -.x-friend-item > .avatar.offline::after { - border: 2px solid #000; -} - .x-friend-item > .detail > .name { color: #fff; }