mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-05-13 22:42:38 -05:00
e7bbb565be
* Tables * Clocks * Maplist preference selector * Fix SSR * Nav icon * RankedOrScrim * Map pool * Create group * Redirect logic * Persist map pool * Advance from preparing page * Rename query * Fix merge * Fix migration order * Seed groups * Find looking groups SQL * Renders something * More UI work * Back to 30min * Likes/dislikes * Always return own group * Fix like order * 3 tc/rm/cb -> 2 * Show only 3 weapons * Pass group size * Handle both liked and liked by same group * Fix SQL * Group preference frontend work * Morphing * Styling * Don't show group controls if not manager * Give/remove manager * Leave group * Leave with confirm * Delete likes when morphing groups * Clocks consistency * Remove bad invariant * Persist settings to local storage * Fix initial value flashing * Fix never resolving loading indicator * REFRESH_GROUP * Flip animations * Tweaks * Auto refresh logic * Groups of 4 seed * Reduce throwing * Load full groups initial * Create match * Match UI initial * Score reporter initial * Push footer down on match page * Score reporter knows when set ended * Score reporting untested * Show score after report * Align better * Look again with same group functionality * More migrations * Team on match page * Show confirmer before reporting score * Report weapons * Report weapos again by admin + skill changing * Handle no tiebreaker given to MapPool * Remove unranked * Remove support for "team id skill" * no-wrap -> nowrap * Preparing page work * Use common GroupCard component * Add some metas * MemberAdder in looking page * Fix GroupCard actions * Fix SZ only map list including other modes * Add season info * Prompt login * Joining team * Manage group on preparing page * Manage group on preparing page * Seed past matches * Add to seed * No map list preference when full group + fix expiry * Fix skill matchesCount calculation * Tiers initial work * Some progress on tiers * Tiering logic * MMR in group cards * Name to challenge * Team MMR * Big team rank icons * Adjust todos * Match score report with confirm * Allow regular members to report score * Handle reporting weapons edge cases * Add tier images * Improve GroupCard spacing * Refactor looking page * Looking mobile UI * Calculate skill only for current season * Divide groups visually when reporting weapons * Fix match page weapons sorting * Add cache to user skills+tier calculation * Admin report match score * Initial leaderboard * Cached leaderboard * Weapon category lb's * Populate SkillTeamUser in SendouQ * Team leaderboard filtered down * Add TODOs * Seasons initlal * Season weapons initial * Weapons stylized * Show rest weapons as + * Hide peak if same as current * Load matches SQL initial * Season matches UI initial * Take user id in account * Add weapons * Paginated matches * Fix pages count logic * Scroll top on data change * Day headers for matches * Link from user page to user seasons page * Summarize maps + ui initial * Map stats * Player info tabs * MMR chart * Chart adjustments * Handle basing team MMR on player MMR * Set initial MMR * Add info about discord to match page * Season support to tournaments * Get tournament skills as well for the graph * WIP * New team rating logic + misc other * tiered -> tiered.server * Update season starting time * TODOs * Add rules page * Hide elements correctly when off-season * Fix crash when only one player with skill * How-to video * Fix StartRank showing when not logged in * Make user leaderboard the default * Make Skill season non-nullable * Add suggested pass to match * Add rule * identifierToUserIds helper * Fix tiers not showing
389 lines
6.6 KiB
CSS
389 lines
6.6 KiB
CSS
.u__container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-6);
|
|
}
|
|
|
|
.u__avatar-container {
|
|
display: grid;
|
|
justify-content: center;
|
|
column-gap: var(--s-2-5);
|
|
grid-template-areas: "avatar name" "avatar team" "avatar ." "avatar ." "socials .";
|
|
}
|
|
|
|
.u__avatar {
|
|
min-width: 125px;
|
|
grid-area: avatar;
|
|
}
|
|
|
|
.u__team {
|
|
display: flex;
|
|
color: var(--text-lighter);
|
|
font-weight: var(--bold);
|
|
gap: var(--s-1-5);
|
|
grid-area: team;
|
|
}
|
|
|
|
.u__name {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
grid-area: name;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.u__discriminator {
|
|
color: var(--text-lighter);
|
|
margin-inline-end: var(--s-2);
|
|
}
|
|
|
|
.u__country-name {
|
|
color: var(--text-lighter);
|
|
font-weight: var(--bold);
|
|
}
|
|
|
|
.u__socials {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--s-1-5);
|
|
grid-area: socials;
|
|
padding-block-start: var(--s-2-5);
|
|
}
|
|
|
|
.u__social-link {
|
|
padding: var(--s-1);
|
|
border: 1px solid;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.u__extra-info__heading > svg {
|
|
width: 0.8rem;
|
|
}
|
|
|
|
.u__social-link > svg {
|
|
width: 0.9rem;
|
|
}
|
|
|
|
.u__social-link.youtube {
|
|
border-color: #f00;
|
|
background-color: #ff00002f;
|
|
}
|
|
|
|
.u__social-link.youtube > svg {
|
|
fill: #f00;
|
|
}
|
|
|
|
.u__social-link.twitter {
|
|
border-color: #1da1f2;
|
|
background-color: #1da0f22f;
|
|
}
|
|
|
|
.u__social-link.twitter > svg {
|
|
fill: #1da1f2;
|
|
}
|
|
|
|
.u__social-link.twitch {
|
|
border-color: #9146ff;
|
|
background-color: #9146ff2f;
|
|
}
|
|
|
|
.u__social-link.twitch > svg {
|
|
fill: #9146ff;
|
|
}
|
|
|
|
.u__extra-infos {
|
|
display: flex;
|
|
max-width: 24rem;
|
|
flex-wrap: wrap;
|
|
gap: var(--s-2-5);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.u__extra-info {
|
|
padding: var(--s-1) var(--s-1-5);
|
|
border-radius: var(--rounded);
|
|
background-color: var(--bg-darker);
|
|
font-size: var(--fonts-xxs);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s-1);
|
|
}
|
|
|
|
.u__extra-info__heading {
|
|
color: var(--theme);
|
|
font-weight: var(--bold);
|
|
}
|
|
|
|
.u__badges {
|
|
display: flex;
|
|
max-width: 24rem;
|
|
align-items: center;
|
|
padding: var(--s-2);
|
|
border-radius: var(--rounded);
|
|
background-color: var(--bg-badge);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.u__small-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
gap: var(--s-3);
|
|
}
|
|
|
|
.u__badge-explanation {
|
|
color: var(--text-lighter);
|
|
font-size: var(--fonts-xs);
|
|
text-align: center;
|
|
}
|
|
|
|
.u__small-badge-container {
|
|
position: relative;
|
|
}
|
|
|
|
.u__small-badge-count {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin-top: -8px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
color: var(--theme-vibrant);
|
|
font-size: var(--fonts-xxxs);
|
|
font-weight: var(--bold);
|
|
}
|
|
|
|
.u__results-table-wrapper {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.u__results-table-highlights {
|
|
border: var(--s-2) solid var(--bg-lighter);
|
|
padding-inline: 0 !important;
|
|
}
|
|
|
|
.u__results-table-highlights > legend {
|
|
margin-inline-start: var(--s-2);
|
|
padding-inline: var(--s-1);
|
|
}
|
|
|
|
.u__results-players {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0;
|
|
gap: var(--s-3);
|
|
list-style: none;
|
|
}
|
|
|
|
.u-search__container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-12);
|
|
}
|
|
|
|
.u-search__users {
|
|
display: flex;
|
|
width: 325px;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
gap: var(--s-6);
|
|
}
|
|
|
|
.u-search__user {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text);
|
|
font-weight: var(--body);
|
|
gap: var(--s-4);
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
.u-search__ign {
|
|
color: var(--text-lighter);
|
|
font-size: var(--fonts-sm);
|
|
font-weight: var(--body);
|
|
}
|
|
|
|
.u-search__users > li {
|
|
list-style: none;
|
|
}
|
|
|
|
.u-search__input {
|
|
height: 40px !important;
|
|
margin: 0 auto;
|
|
font-size: var(--fonts-lg);
|
|
}
|
|
|
|
.u-search__icon {
|
|
height: 25px;
|
|
margin: auto;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.u-search__info {
|
|
color: var(--text-lighter);
|
|
font-size: var(--fonts-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
.u__weapon {
|
|
padding: var(--s-2);
|
|
border-radius: 100%;
|
|
background-color: var(--bg-lighter);
|
|
}
|
|
|
|
.u__build-form {
|
|
--input-width: min(18rem, 75vw);
|
|
}
|
|
|
|
.u__build-form__weapon {
|
|
--input-width: 16rem;
|
|
}
|
|
|
|
.u__build-filter-button {
|
|
padding: 0 var(--s-1-5) !important;
|
|
gap: var(--s-1);
|
|
}
|
|
|
|
.u__placements {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: var(--s-4);
|
|
border-radius: var(--rounded);
|
|
margin: 0 auto;
|
|
background-color: var(--bg-lighter);
|
|
color: var(--text);
|
|
gap: var(--s-6);
|
|
transition: 0.1s ease-in-out background-color;
|
|
}
|
|
|
|
.u__placements:hover {
|
|
background-color: var(--theme-transparent);
|
|
}
|
|
|
|
.u__placements__mode {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: var(--fonts-xs);
|
|
font-weight: var(--semi-bold);
|
|
gap: var(--s-1-5);
|
|
}
|
|
|
|
@media screen and (min-width: 480px) {
|
|
.u__placements {
|
|
gap: var(--s-10);
|
|
}
|
|
|
|
.u__placements__mode {
|
|
font-size: var(--fonts-sm);
|
|
}
|
|
}
|
|
|
|
.u__season__weapon-container {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--fonts-sm);
|
|
flex-direction: column;
|
|
font-weight: var(--bold);
|
|
position: relative;
|
|
width: 60px;
|
|
}
|
|
|
|
.u__season__weapon-border__outer {
|
|
--degree: 80deg;
|
|
--smoothing: 0.5deg;
|
|
--color: var(--theme);
|
|
|
|
display: block;
|
|
content: "";
|
|
height: 60px;
|
|
width: 60px;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
var(--color) var(--degree),
|
|
transparent calc(var(--degree) + var(--smoothing)) 100%
|
|
);
|
|
position: absolute;
|
|
}
|
|
|
|
.u__season__weapon-border__outer-static {
|
|
height: 60px;
|
|
width: 60px;
|
|
background-color: var(--bg-lighter);
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.u__season__weapon-border__inner {
|
|
height: 84%;
|
|
width: 84%;
|
|
top: 8%;
|
|
left: 8%;
|
|
position: relative;
|
|
border-radius: 50%;
|
|
background: var(--bg);
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.u__season__weapon-count {
|
|
margin-top: 62px;
|
|
}
|
|
|
|
.u__season__player-name {
|
|
width: 64px;
|
|
font-size: var(--fonts-xs);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
font-weight: var(--semi-bold);
|
|
}
|
|
|
|
.u__season__match {
|
|
background-color: var(--bg-lighter);
|
|
border-radius: var(--rounded);
|
|
padding: var(--s-2) var(--s-2-5);
|
|
color: var(--text);
|
|
transition: ease-in 0.2s background-color;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-4);
|
|
}
|
|
|
|
.u__season__match:hover {
|
|
background-color: var(--theme-transparent);
|
|
}
|
|
|
|
.u__season__match__user {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: var(--fonts-xs);
|
|
width: 65px;
|
|
align-items: center;
|
|
}
|
|
|
|
.u__season__match__user__name {
|
|
max-width: 60px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.u__season__match__score {
|
|
font-size: var(--fonts-xl);
|
|
font-weight: var(--bold);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.u__season__info-container {
|
|
background-color: var(--bg-lighter);
|
|
padding: var(--s-2-5) var(--s-2);
|
|
border-radius: var(--rounded);
|
|
}
|