diff --git a/src/app.css b/src/app.css index a60d7710..87df58fa 100644 --- a/src/app.css +++ b/src/app.css @@ -35,309 +35,10 @@ html.dark .x-container { background: var(--sidebar); } -.x-friend-list { - padding: 0 10px; - overflow: hidden auto; -} - -.x-friend-group > .rotation-transition { - transition: transform 0.3s; -} - -.x-dialog .x-friend-list { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - max-height: 300px; -} - -.x-friend-list > .x-friend-group { - padding: 16px 0 5px; - font-size: 12px; -} - -.x-friend-item { - box-sizing: border-box; - display: flex; - align-items: center; - padding: 6px; - font-size: 13px; - cursor: pointer; -} - -.x-friend-item > .avatar { - position: relative; - display: inline-block; - flex: none; - width: 36px; - height: 36px; - margin-right: 10px; - background-color: transparent; -} - -.x-friend-item > img.avatar, -img.friends-list-avatar { - width: unset; - height: 22.5px; - margin-right: 0; - margin-left: 5px; - border-radius: 2px; -} - -.x-friend-item > .avatar > img, -.x-friend-item > .avatar > .avatar > img { - width: 100%; - height: 100%; - border-radius: 50%; - object-fit: cover; - background-color: transparent; -} - -.x-friend-item .active img, -.x-friend-item .offline img { - filter: grayscale(1); -} - -.x-friend-item:hover .active img, -.x-friend-item:hover .offline img { - filter: none; -} - -.x-friend-item .status-icon.mobile img { - mask-image: url(/images/masks/usercutoutmobile.svg); -} - -.x-friend-item .status-icon.mobile::after { - position: absolute; - right: -2px; - bottom: -0.5px; - width: 14px; - height: 14px; - content: ''; - border-radius: 0px; - mask-image: url(/images/masks/phone.svg) !important; -} - -.x-friend-item .status-icon img { - mask-image: url(/images/masks/usercutout.svg); -} - -.x-friend-item .status-icon::after { - position: absolute; - right: 0.75px; - bottom: 0.75px; - width: 9px; - height: 9px; - content: ''; - background: var(--status-offline); - border-radius: 50%; -} - -.x-friend-item .status-icon.active::after { - background: var(--status-active); -} - -.x-friend-item .status-icon.online::after { - background: var(--status-online); -} - -.x-friend-item .status-icon.joinme::after { - background: var(--status-joinme); - mask-image: url(/images/masks/joinme.svg); -} - -.x-friend-item .status-icon.askme::after { - background: var(--status-askme); - mask-image: url(/images/masks/askme.svg); -} - -.x-friend-item .status-icon.busy::after { - background: var(--status-busy); - mask-image: url(/images/masks/busy.svg); -} - -.x-friend-item .status-icon.offline::after { - background: var(--status-offline); -} - -.x-friend-item > .detail { - flex: 1; - overflow: hidden; -} - -.x-friend-item > .detail > .name, -.x-friend-item > .detail > .extra { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.x-friend-item > .detail > .name { - font-weight: 500; - line-height: 18px; -} - -.x-friend-item > .detail > .extra { - font-size: 12px; -} - -.x-friend-item > .detail > .extra > span > span:first-child { - scale: 0.9; - margin-right: 2px; -} - -.x-friend-item:hover { - border-radius: 8px; -} - -.x-friend-item-no-hover:hover { - background: unset !important; -} - -.x-friend-item-border:hover { - border-top-left-radius: 25px; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - border-bottom-left-radius: 25px; -} - -.x-dialog .x-friend-item { - width: 167px; -} - -i.x-user-status, -i.x-status-icon { - display: inline-block; - width: 10px; - height: 10px; - background: var(--status-offline-alt); - border-radius: 50%; -} - -i.x-user-status.active { - background: var(--status-active); -} - -i.x-user-status.online { - background: var(--status-online); -} - -i.x-user-status.joinme { - background: var(--status-joinme); - mask-image: url(/images/masks/joinme.svg); -} - -i.x-user-status.askme { - background: var(--status-askme); - mask-image: url(/images/masks/askme.svg); -} - -i.x-user-status.busy { - background: var(--status-busy); - mask-image: url(/images/masks/busy.svg); -} - -i.x-status-icon.green { - background: var(--status-online); -} - -i.x-status-icon.blue { - background: var(--status-joinme); -} - -i.x-status-icon.orange { - background: var(--status-askme); -} - -i.x-status-icon.red { - background: var(--status-busy); -} - -.x-tag-platform-pc { - color: var(--platform-pc); - border-color: var(--platform-pc) !important; -} - -.x-tag-platform-quest { - color: var(--platform-quest); - border-color: var(--platform-quest) !important; -} - -.x-tag-friend { - color: var(--color-amber-400); - border-color: var(--color-amber-400) !important; -} - -.x-tag-age-verification { - color: #3b82f6; - border-color: #3b82f6 !important; -} - -.x-tag-discord { - color: #7289da; - border-color: #7289da !important; -} - -.x-tag-border-left { - border-left: 0.8px solid; - margin-left: 5px; - padding-left: 5px; - padding-bottom: 0.5px; -} - -.options-container { - margin-top: 30px; - padding: 0 10px 10px 10px; -} - -.options-container .header-bar { - display: flex; - align-items: center; -} - -.options-container .header { - font-weight: bold; - font-size: 20px; -} - -.options-container .sub-header { - font-weight: bold; - font-size: 15px; -} - -.options-container-item { - font-size: 12px; - margin-top: 5px; - display: flex; - align-items: center; -} - -.options-container-item .name { - display: inline-block; - width: 235px; -} - .x-app > .x-container { padding-top: 15px; } -/* Bio diff */ -.x-text-removed { - text-decoration: line-through; - color: #ff0000; - background-color: rgba(255, 0, 0, 0.2); - padding: 2px 2px; - border-radius: 4px; -} - -.x-text-added { - color: rgb(35, 188, 35); - background-color: rgba(76, 255, 80, 0.2); - padding: 2px 2px; - border-radius: 4px; -} - /*FIXME: this is a nasty temporary hack*/ .force-pointer-on-hover a, .force-pointer-on-hover button, diff --git a/src/components/InstanceActionBar.vue b/src/components/InstanceActionBar.vue index 4b8ef0b2..455410e8 100644 --- a/src/components/InstanceActionBar.vue +++ b/src/components/InstanceActionBar.vue @@ -80,11 +80,12 @@

- PC: {{ instance?.platforms?.standalonewindows }} + PC: {{ instance?.platforms?.standalonewindows }} -
- Android: {{ instance?.platforms?.android }} + Android: {{ instance?.platforms?.android }}
iOS: {{ instance?.platforms?.ios }} diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue index e0b4cbb6..4be58114 100644 --- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue +++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue @@ -44,36 +44,36 @@ + > {{ avatarDialog.platformInfo.pc.performanceRating }} {{ avatarDialog.fileAnalysis.standalonewindows._fileSize }} + > {{ avatarDialog.platformInfo.android.performanceRating }} {{ avatarDialog.fileAnalysis.android._fileSize }} @@ -86,22 +86,12 @@ > {{ avatarDialog.platformInfo.ios.performanceRating }} {{ avatarDialog.fileAnalysis.ios._fileSize }} @@ -120,12 +110,14 @@ variant="outline" style="margin-right: 5px; margin-top: 5px" >{{ t('view.favorite.avatars.styles') }} - {{ - avatarDialog.ref.styles.primary - }} + {{ avatarDialog.ref.styles.primary }} {{ avatarDialog.ref.styles.secondary }} @@ -140,7 +132,9 @@ variant="outline" style="margin-right: 5px; margin-top: 5px" >{{ t('dialog.avatar.tags.impostor') }} - v{{ avatarDialog.imposterVersion }} diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue index 35dd0035..d6309eb6 100644 --- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue +++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue @@ -84,7 +84,7 @@ v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus" side="top" :content="t('dialog.user.tags.age_verified')"> - + @@ -97,7 +97,7 @@ v-if="userDialog.isFriend && userDialog.friend" side="top" :content="t('dialog.user.tags.friend_number')"> - + {{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }} @@ -106,7 +106,7 @@ v-if="userDialog.mutualFriendCount" side="top" :content="t('dialog.user.tags.mutual_friends')"> - + {{ userDialog.mutualFriendCount }} @@ -117,7 +117,7 @@ :content="t('dialog.user.tags.open_in_discord')"> {{ t('dialog.user.tags.discord') }} @@ -134,13 +134,13 @@ - - + + - - + + @@ -148,7 +148,7 @@ - + {{ userDialog.ref.$platform }} diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue index e9b481dd..f1cb7735 100644 --- a/src/components/dialogs/WorldDialog/WorldDialog.vue +++ b/src/components/dialogs/WorldDialog/WorldDialog.vue @@ -55,13 +55,13 @@ - + + class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"> {{ worldDialog.fileAnalysis.standalonewindows._fileSize }} @@ -69,13 +69,13 @@ - + + class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"> {{ worldDialog.fileAnalysis.android._fileSize }} @@ -89,12 +89,7 @@ + class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"> {{ worldDialog.fileAnalysis.ios._fileSize }} diff --git a/src/styles/globals.css b/src/styles/globals.css index 703b2f85..9a4c049b 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -11,6 +11,8 @@ @import './animated-emoji.css'; @import './fonts.css'; @import './noty.css'; +@import './status-icon.css'; +@import './options-container.css'; @custom-variant dark (&:is(.dark *)); diff --git a/src/styles/options-container.css b/src/styles/options-container.css new file mode 100644 index 00000000..246c1b5a --- /dev/null +++ b/src/styles/options-container.css @@ -0,0 +1,36 @@ +/* + * Options container layout styles. + * Used in Settings, Tools, and Charts views. + */ + +.options-container { + margin-top: 30px; + padding: 0 10px 10px 10px; +} + +.options-container .header-bar { + display: flex; + align-items: center; +} + +.options-container .header { + font-weight: bold; + font-size: 20px; +} + +.options-container .sub-header { + font-weight: bold; + font-size: 15px; +} + +.options-container-item { + font-size: 12px; + margin-top: 5px; + display: flex; + align-items: center; +} + +.options-container-item .name { + display: inline-block; + width: 235px; +} diff --git a/src/styles/status-icon.css b/src/styles/status-icon.css index 1469ca77..7364fb26 100644 --- a/src/styles/status-icon.css +++ b/src/styles/status-icon.css @@ -67,3 +67,60 @@ border-radius: 0; mask-image: url(/images/masks/phone.svg) !important; } + +/* Inline status dot indicators (used in dialogs and sidebar) */ +i.x-user-status, +i.x-status-icon { + display: inline-block; + width: 10px; + height: 10px; + background: var(--status-offline-alt); + border-radius: 50%; +} + +/* Suppress the ::after pseudo-element on inline status dots. + The ::after is for avatar containers (.status-icon divs), not for dots + which display status via their own background property. */ +i.x-user-status::after, +i.x-status-icon::after { + display: none; +} + +i.x-user-status.active { + background: var(--status-active); +} + +i.x-user-status.online { + background: var(--status-online); +} + +i.x-user-status.joinme { + background: var(--status-joinme); + mask-image: url(/images/masks/joinme.svg); +} + +i.x-user-status.askme { + background: var(--status-askme); + mask-image: url(/images/masks/askme.svg); +} + +i.x-user-status.busy { + background: var(--status-busy); + mask-image: url(/images/masks/busy.svg); +} + +i.x-status-icon.green { + background: var(--status-online); +} + +i.x-status-icon.blue { + background: var(--status-joinme); +} + +i.x-status-icon.orange { + background: var(--status-askme); +} + +i.x-status-icon.red { + background: var(--status-busy); +} diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue index 0272b535..4f28b595 100644 --- a/src/views/Charts/components/MutualFriends.vue +++ b/src/views/Charts/components/MutualFriends.vue @@ -32,7 +32,7 @@ :close-on-select="true" :deselect-on-reselect="true">