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

🆙 Updated infostand & userpofile now mobile friendly and cards as background

Browse Source
This commit is contained in:
duckietm
2026-06-02 15:12:51 +02:00
parent 76ec66932b
commit c9ac6806dd
5 changed files with 177 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/backgrounds/BackgroundsView.css
+58 -10
View File
@@ -1629,9 +1629,6 @@
.infostand-border.border-15 { border-color: #cbd5e1; } /* Silver */
.infostand-border.border-16 { border-color: #1f2937; } /* Black */
/* Image-based borders (17-25). These override the colour-border insets and
strip the CSS border so the artwork sits ~22px outside the card and
stretches to fill the frame area. */
.infostand-border.border-17,
.infostand-border.border-18,
.infostand-border.border-19,
@@ -1662,8 +1659,6 @@
.infostand-border.border-24 { background-image: url('@/assets/images/backgrounds/borders/border_24.webp'); }
.infostand-border.border-25 { background-image: url('@/assets/images/backgrounds/borders/border_25.webp'); }
/* Picker thumbnails inside the BackgroundsView "Borders" tab.
Each thumbnail is a small rounded box outlined in its border colour. */
.profile-border {
width: 60px;
height: 76px;
@@ -1674,9 +1669,7 @@
background: rgba(255, 255, 255, 0.05);
}
/* border-0 = no border (default) — show as a dashed translucent outline */
.profile-border.border-0 { border: 2px dashed rgba(255, 255, 255, 0.25); }
.profile-border.border-1 { border-color: #ef4444; }
.profile-border.border-2 { border-color: #f97316; }
.profile-border.border-3 { border-color: #eab308; }
@@ -1693,8 +1686,6 @@
.profile-border.border-14 { border-color: #d4a020; }
.profile-border.border-15 { border-color: #cbd5e1; }
.profile-border.border-16 { border-color: #1f2937; }
/* Image-border picker thumbnails — drop the CSS frame and show the artwork. */
.profile-border.border-17,
.profile-border.border-18,
.profile-border.border-19,
@@ -1719,4 +1710,61 @@
.profile-border.border-22 { background-image: url('@/assets/images/backgrounds/borders/border_22.webp'); }
.profile-border.border-23 { background-image: url('@/assets/images/backgrounds/borders/border_23.webp'); }
.profile-border.border-24 { background-image: url('@/assets/images/backgrounds/borders/border_24.webp'); }
.profile-border.border-25 { background-image: url('@/assets/images/backgrounds/borders/border_25.webp'); }
.profile-border.border-25 { background-image: url('@/assets/images/backgrounds/borders/border_25.webp'); }
.card-background-2,
.card-background-3,
.card-background-4,
.card-background-5,
.card-background-6,
.card-background-7,
.card-background-12,
.card-background-13,
.card-background-28,
.card-background-30,
.card-background-35,
.card-background-52,
.card-background-55,
.card-background-56,
.card-background-58,
.card-background-60,
.card-background-95,
.card-background-116,
.card-background-122,
.card-background-127,
.card-background-129,
.card-background-131,
.card-background-144,
.card-background-149,
.card-background-150,
.card-background-161,
.card-background-185,
.card-background-187 {
--profile-card-text: #1a1a1a;
--profile-card-shadow: 0 1px 1px rgba(255, 255, 255, 0.65);
}
[class*="card-background-"] .nitro-extended-profile__username .username,
[class*="card-background-"] .nitro-extended-profile__motto,
[class*="card-background-"] .nitro-extended-profile__meta,
[class*="card-background-"] .nitro-extended-profile__meta b,
[class*="card-background-"] .nitro-extended-profile__meta span,
[class*="card-background-"] .nitro-extended-profile__status-text,
[class*="card-background-"] .nitro-extended-profile__relationships-label,
[class*="card-background-"] .nitro-extended-profile__relationship-subcopy,
[class*="card-background-"] .nitro-extended-profile__link,
[class*="card-background-"] .nitro-extended-profile__right > p,
[class*="card-background-"] .nitro-extended-profile__right > p b {
color: var(--profile-card-text, #fff) !important;
text-shadow: var(--profile-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.55));
}
.profile-card-background[class*="card-background-"]:not(.nitro-extended-profile-window__content) {
color: var(--profile-card-text, #fff);
text-shadow: var(--profile-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.55));
}
.profile-card-background[class*="card-background-"]:not(.nitro-extended-profile-window__content) .text-white {
color: var(--profile-card-text, #fff) !important;
}
src/css/user-profile/UserProfileView.css
+107 -11
View File
@@ -250,6 +250,7 @@
transform: translateY(-50%);
overflow: hidden;
}
.nitro-extended-profile__relationship-head .avatar-image {
position: absolute !important;
inset: 0 !important;
@@ -330,6 +331,10 @@
background: #ece8dc;
}
.nitro-extended-profile-window__content.profile-card-background .nitro-extended-profile-window__body {
background: transparent;
}
.nitro-extended-profile-window__body--groups {
min-height: 249px;
}
@@ -377,10 +382,8 @@
.nitro-extended-profile-groups__details {
min-width: 0;
min-height: 236px;
border: 1px solid #9e9e9e;
border-radius: 14px;
background: #bdbbbb;
padding: 11px;
max-height: 100%;
overflow-y: auto;
}
.nitro-extended-profile-group-info {
@@ -389,7 +392,7 @@
gap: 12px;
min-height: 100%;
border: 1px solid #9f9f9f;
border-radius: 10px;
border-radius: 12px;
background: #efede4;
padding: 12px 14px;
}
@@ -407,6 +410,7 @@
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.nitro-extended-profile-group-info__meta {
@@ -457,9 +461,14 @@
margin-top: auto;
}
.nitro-extended-profile-group-info .group-badge .badge-image {
transform: scale(2.1);
transform-origin: center;
.nitro-extended-profile-group-info__badge-wrap .group-badge {
width: 100% !important;
height: 100% !important;
transform: none !important;
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
image-rendering: pixelated;
}
.nitro-extended-profile-window .layout-grid-item.active {
@@ -479,7 +488,94 @@
justify-content: center;
}
.nitro-extended-profile-window .layout-grid-item .badge-image.group-badge {
width: auto !important;
height: auto !important;
.nitro-extended-profile-groups__item {
overflow: hidden;
}
.nitro-extended-profile-groups__item .group-badge {
width: 40px !important;
height: 40px !important;
transform: none !important;
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
image-rendering: pixelated;
}
@media (max-width: 575.98px) {
.nitro-extended-profile-window__content {
overflow-y: auto;
}
.nitro-extended-profile-window__body--groups {
flex: 0 0 auto;
overflow: visible;
}
.nitro-extended-profile-window__panel {
height: auto;
}
.nitro-extended-profile__top {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.nitro-extended-profile__separator {
display: none;
}
.nitro-extended-profile-groups {
display: flex;
flex-direction: column;
gap: 8px;
height: auto;
min-height: 0;
}
.nitro-extended-profile-groups__sidebar {
min-width: 0;
flex: 0 0 auto;
}
.nitro-extended-profile-groups__list {
display: flex;
flex: 0 0 auto;
flex-direction: row;
flex-wrap: nowrap;
gap: 6px;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding-right: 0;
padding-bottom: 6px;
scrollbar-width: thin;
}
.nitro-extended-profile-groups__item {
flex: 0 0 auto;
margin-bottom: 0;
}
.nitro-extended-profile-groups__details {
min-height: 0;
max-height: none;
overflow: visible;
}
.nitro-extended-profile-group-info {
grid-template-columns: 72px minmax(0, 1fr);
gap: 10px;
padding: 10px;
}
.nitro-extended-profile-group-info__badge-wrap {
width: 64px;
height: 64px;
}
.nitro-extended-profile-group-info__button {
min-width: 0;
width: 100%;
}
}