duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Fix avatar in friends and profile

Browse Source
This commit is contained in:
duckietm
2026-06-02 10:25:33 +02:00
parent 827c17dc8b
commit ef23526bf7
2 changed files with 13 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/friends/FriendsView.css
+7 -25
View File
@@ -1,4 +1,3 @@
/* ── Friends spritesheet icons ── */
.nitro-friends-spritesheet {
background: url('@/assets/images/friends/friends-spritesheet.png') transparent no-repeat;
@@ -176,9 +175,6 @@
border: 0 !important;
}
/* The header title is rendered by the shared <Text> component, which is a
<div> (not a <span>) — so target the div too, otherwise it keeps the app
default size and shows as oversized "testoni". */
& .nitro-card-accordion-set-header span,
& .nitro-card-accordion-set-header > div {
font-size: 12px !important;
@@ -807,20 +803,9 @@
}
}
/* ------------------------------------------------------------------ *
* Flat (non-nested) overrides. The rules above live inside a nested
* `.nitro-friends { & ... }` block; these are written flat so they
* apply reliably and win by source order. They fix two things the
* nested rules didn't: the oversized/overflowing friend-list heads and
* the oversized accordion section titles ("testoni").
* ------------------------------------------------------------------ */
/* Friend-list avatar: clip a small box and centre the head, same proven
recipe as the messenger head. `inset: auto` cancels the component's
`inset-0`, otherwise the 130px head fills the row and overflows. */
.nitro-friends .friends-list-avatar {
position: relative !important;
width: 34px;
width: 32px;
height: 36px;
flex-shrink: 0;
overflow: hidden;
@@ -828,18 +813,15 @@
.nitro-friends .friends-list-avatar .avatar-image {
position: absolute !important;
inset: auto !important;
left: 50% !important;
top: 56% !important;
width: 54px !important;
height: 54px !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
background-position: center center !important;
transform: translate(-50%, -50%) scale(.95) !important;
background-size: 66px auto !important;
background-position: -16px -21px !important;
transform: none !important;
}
/* Accordion section titles are rendered by <Text> (a <div>, not a <span>),
so size the div too — otherwise they show oversized. */
.nitro-friends .nitro-card-accordion-set-header > div,
.nitro-friends .nitro-card-accordion-set-header span {
font-size: 12px !important;
src/css/user-profile/UserProfileView.css
+6 -16
View File
@@ -46,11 +46,6 @@
gap: 10px;
}
/* Mirror the room infostand exactly: a 68x135 flex column (= profile-background)
that centres the avatar horizontally and clips it; the stand/overlay sit on
top as absolute layers. The avatar keeps its component default classes
(relative w-[90px] h-[130px] left-[-2px]) so it lines up with bg + stand and
isn't crooked. Do NOT absolutely position or force width/height on it. */
.nitro-extended-profile__avatar-shell {
width: 68px;
height: 135px;
@@ -255,20 +250,15 @@
transform: translateY(-50%);
overflow: hidden;
}
/* Same proven recipe as the messenger head: clip a small box and centre a
54x54 avatar in it. `inset: auto` cancels the component's `inset-0` so the
width/position take effect (otherwise the head overflows huge). */
.nitro-extended-profile__relationship-head .avatar-image {
position: absolute !important;
inset: auto !important;
left: 50% !important;
top: 54% !important;
width: 50px !important;
height: 50px !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
background-position: center center !important;
transform: translate(-50%, -50%) scale(.95) !important;
background-size: 60px auto !important;
background-position: -14px -21px !important;
transform: none !important;
}
.nitro-extended-profile__relationship-subcopy {