Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-10-03 08:38:42 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Move app to apps/web-react in pnpm workspace layout

Browse Source
This commit is contained in:
Kalle
2026-08-16 09:20:33 +03:00
parent 7e365ccfcf
commit bbc8ea57af
2913 changed files with 227 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
apps/web-react/app/features/user-page/components/Widget.module.css Normal file
View File

@@ -0,0 +1,344 @@
.widget {
background-color: var(--color-bg);
border-radius: var(--radius-box);
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--s-2);
border-bottom: 2px solid var(--color-bg-higher);
}
.headerText {
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
color: var(--color-text-high);
}
.headerLink {
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-accent);
}
.content {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding-block: var(--s-4);
}
.memberships {
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.membership {
display: flex;
align-items: center;
gap: var(--s-3);
color: var(--color-text);
margin-block-end: var(--s-1);
border-radius: var(--radius-field);
transition: background-color 0.2s;
}
.membershipInfo {
display: flex;
flex-direction: column;
gap: var(--s-0-5);
}
.membershipName {
font-weight: var(--weight-semi);
}
.membershipRole {
font-size: var(--font-2xs);
color: var(--color-text-high);
}
.peakValue {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-1);
}
.widgetValueMain {
font-size: var(--font-xl);
font-weight: var(--weight-semi);
color: var(--color-text);
}
.widgetValueFooter {
font-size: var(--font-2xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.highlightedResults {
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.result {
display: flex;
align-items: center;
gap: var(--s-3);
}
.resultPlacement {
flex-shrink: 0;
}
.resultInfo {
display: flex;
flex-direction: column;
gap: var(--s-0-5);
flex: 1;
line-height: 1.25;
}
.resultName {
font-weight: var(--weight-semi);
}
.tournamentName {
display: flex;
align-items: center;
gap: var(--s-1);
max-width: 100%;
overflow: hidden;
& a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 175px;
}
}
.resultDate {
font-size: var(--font-2xs);
color: var(--color-text-high);
}
.videos {
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.weaponGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
gap: var(--s-2);
justify-items: center;
}
.weaponCount {
margin-top: var(--s-3);
text-align: center;
font-size: var(--font-xs);
font-weight: var(--weight-semi);
color: var(--color-text-high);
}
.weaponCountComplete {
color: var(--color-success);
}
.lfgPosts {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.lfgPost {
color: var(--color-text);
font-size: var(--font-sm);
border-radius: var(--radius-field);
padding: var(--s-2);
transition: background-color 0.2s;
background-color: var(--color-bg-high);
&:hover {
background-color: var(--color-bg-higher);
}
}
.xRankPeaks {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
justify-content: center;
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.xRankPeakMode {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-1);
}
.xRankPeakModeIconWrapper {
position: relative;
width: 24px;
height: 24px;
}
.xRankPeakDivision {
position: absolute;
bottom: -2px;
right: -2px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-higher);
border-radius: 50%;
padding: 1px;
}
.placementResults {
display: flex;
gap: var(--s-4);
justify-content: center;
align-items: center;
}
.placementResult {
display: flex;
align-items: center;
gap: var(--s-1);
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.builds {
display: flex;
gap: var(--s-3);
overflow-x: auto;
padding-block: var(--s-2);
}
.artGrid {
display: flex;
gap: var(--s-3);
overflow-x: auto;
padding-block: var(--s-2);
}
.artThumbnail {
height: 300px;
object-fit: contain;
flex-shrink: 0;
}
.socialLinks {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.socialLink {
font-size: var(--font-sm);
display: flex;
gap: var(--s-2);
align-items: center;
word-break: break-all;
overflow-wrap: break-word;
& svg {
width: 18px;
}
}
.socialLinkIconContainer {
background-color: var(--color-bg-higher);
display: grid;
place-items: center;
border-radius: var(--radius-box);
padding: var(--s-2);
flex-shrink: 0;
& svg {
width: 18px;
height: 18px;
fill: var(--color-text);
}
&.twitch svg {
fill: #9146ff;
}
&.youtube svg {
fill: #f00;
}
&.bsky path {
fill: #1285fe;
}
&.discord svg {
fill: #5865f2;
}
}
.socialLinksIcons {
display: flex;
gap: var(--s-2);
justify-content: center;
flex-wrap: wrap;
}
.gameBadgeGrid {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
justify-content: center;
}
.gameBadgeButton {
padding: 0;
}
.gameBadgeImage {
width: 48px;
height: 48px;
object-fit: contain;
}
.friendsList {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.friendLink {
padding: var(--s-0-5) var(--s-1);
border-radius: var(--radius-field);
&:hover {
background-color: var(--color-bg-higher);
}
}