Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-05 20:56:13 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Tourney styling

Browse Source
This commit is contained in:
hfcRed 2026-01-03 15:04:54 +01:00
parent d72197aba1
commit a4527ef2ea
18 changed files with 107 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/InfoPopover.module.css
View File

@ -5,8 +5,8 @@
color: var(--color-text);
font-size: var(--fonts-md);
padding: var(--s-0-5);
width: 28px;
height: 28px;
width: var(--input-height);
height: var(--input-height);
display: flex;
align-items: center;
justify-content: center;
@ -18,7 +18,7 @@
}
.triggerTiny {
width: 20px;
height: 20px;
width: var(--input-height-smaller);
height: var(--input-height-smaller);
font-size: var(--fonts-xs);
}

5
app/components/MapPoolSelector.module.css
View File

@ -57,6 +57,11 @@
color: var(--color-accent);
opacity: 1 !important;
outline: initial;
&:focus-visible {
outline: var(--input-focus-ring);
outline-offset: 2px;
}
}
.modeButton.selected {

2
app/components/MapPoolSelector.tsx
View File

@ -252,7 +252,7 @@ export function MapPoolStages({
return (
<button
key={mode}
className={clsx(styles.modeButton, "outline-theme", {
className={clsx(styles.modeButton, {
[styles.selected]: selected,
[styles.preselected]: preselected,
invisible:

10
app/components/layout/index.module.css
View File

@ -83,14 +83,14 @@
.hamburger.fab {
display: grid;
position: fixed;
right: 27.5px;
bottom: 105px;
right: var(--input-height-large);
bottom: var(--input-height-large);
border-radius: 100%;
width: 3.75rem;
height: 3.75rem;
width: var(--input-height-large);
height: var(--input-height-large);
backdrop-filter: var(--backdrop-filter);
background-color: transparent;
border-color: var(--color-accent-low);
border-color: var(--color-text-accent);
}
.hamburger.fab svg {

1
app/features/calendar/routes/calendar.$id.report-winners.tsx
View File

@ -259,7 +259,6 @@ function Players({
size="small"
variant="minimal"
onPress={() => handlePlayerInputTypeChange(i)}
className="outline-theme"
>
{asPlainInput
? t("forms.team.player.addAsUser")

3
app/features/chat/components/Chat.module.css
View File

@ -4,8 +4,6 @@
}
.messages {
border: 2px solid var(--color-bg-high);
border-radius: 0 0 var(--rounded) var(--rounded);
padding: var(--s-2-5) 0 0 0;
display: flex;
flex-direction: column;
@ -94,6 +92,7 @@
.roomButton {
border: 0;
border-bottom: 2px solid var(--color-border);
background-color: transparent;
color: var(--color-text-high);
border-radius: var(--rounded) var(--rounded) 0 0;

14
app/features/sendouq/components/GroupCard.module.css
View File

@ -68,13 +68,18 @@
font-size: var(--fonts-xs);
background-color: var(--color-bg);
border-radius: var(--rounded);
padding: var(--s-0-5) var(--s-1-5);
padding: 0 var(--s-1-5);
width: max-content;
display: flex;
align-items: center;
gap: var(--s-1);
font-weight: var(--semi-bold);
min-height: 24px;
height: 24px;
& img {
height: 24px;
width: 24px;
}
}
.extraInfoButton {
@ -89,7 +94,7 @@
font-weight: var(--semi-bold);
color: var(--color-text);
border: none;
min-height: 24px;
height: 24px;
}
.addNoteButton {
@ -100,7 +105,8 @@
font-weight: var(--semi-bold);
background-color: var(--color-bg);
white-space: nowrap;
height: stretch;
height: 100%;
border-radius: var(--rounded);
}
.addNoteButtonEdit > svg {

25
app/features/tournament-bracket/components/Bracket/bracket.module.css
View File

@ -17,6 +17,7 @@
border: 2px solid var(--color-border);
border-radius: var(--rounded-sm);
overflow: scroll;
user-select: none;
}
.matchHeader {
@ -210,6 +211,18 @@ a.match:hover {
padding-block: var(--s-2);
}
.standingsDividerLine {
flex: 1;
height: 2px;
background-color: var(--color-border);
}
.standingsDividerText {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
white-space: nowrap;
}
.standingsDividerQualified .standingsDividerLine {
background-color: var(--color-success);
}
@ -225,15 +238,3 @@ a.match:hover {
.standingsDividerEliminated .standingsDividerText {
color: var(--color-error);
}
.standingsDividerLine {
flex: 1;
height: 2px;
background-color: var(--color-border);
}
.standingsDividerText {
font-size: var(--fonts-xxs);
font-weight: var(--bold);
white-space: nowrap;
}

6
app/features/tournament-bracket/components/MatchRosters.tsx
View File

@ -6,8 +6,6 @@ import { tournamentTeamPage, userPage } from "~/utils/urls";
import type { TournamentMatchLoaderData } from "../loaders/to.$id.matches.$mid.server";
import styles from "../tournament-bracket.module.css";
const INACTIVE_PLAYER_CSS =
"tournament__team-with-roster__member__inactive text-lighter-important";
export function MatchRosters({
teams,
}: {
@ -77,7 +75,7 @@ export function MatchRosters({
<Link
to={userPage(p)}
className={clsx("stack horizontal sm items-center", {
[INACTIVE_PLAYER_CSS]:
[styles.inactivePlayer]:
teamOneParticipatedPlayers.length > 0 &&
teamOneParticipatedPlayers.every(
(participatedPlayer) =>
@ -135,7 +133,7 @@ export function MatchRosters({
<Link
to={userPage(p)}
className={clsx("stack horizontal sm items-center", {
[INACTIVE_PLAYER_CSS]:
[styles.inactivePlayer]:
teamTwoParticipatedPlayers.length > 0 &&
teamTwoParticipatedPlayers.every(
(participatedPlayer) =>

7
app/features/tournament-bracket/components/MatchTimer.module.css
View File

@ -2,7 +2,7 @@
position: relative;
width: 100%;
height: 18px;
background-color: var(--bg-light);
background-color: var(--color-accent-low);
}
.progressBar {
@ -10,7 +10,7 @@
left: 0;
top: 0;
height: 100%;
background-color: var(--color-accent-low);
background-color: var(--color-accent);
transition:
width 0.5s ease-in-out,
background-color 0.3s ease;
@ -33,7 +33,7 @@
.gameMarkerLine {
width: 2px;
height: 100%;
background-color: var(--color-text-high);
background-color: var(--color-text);
opacity: 0.6;
}
@ -54,7 +54,6 @@
.gameMarkerText {
font-size: var(--fonts-xxxs);
font-weight: var(--semi-bold);
color: var(--color-text-high);
white-space: nowrap;
}

7
app/features/tournament-bracket/components/StartedMatch.tsx
View File

@ -197,6 +197,8 @@ export function StartedMatch({
<SubmitButton
_action="UNDO_REPORT_SCORE"
className={styles.stageBannerUndoButton}
variant="destructive"
size="miniscule"
testId="undo-score-button"
>
{t("tournament:match.action.undoLastScore")}
@ -212,6 +214,8 @@ export function StartedMatch({
<SubmitButton
_action="REOPEN_MATCH"
className={styles.stageBannerUndoButton}
variant="destructive"
size="miniscule"
testId="reopen-match-button"
>
{t("tournament:match.action.reopenMatch")}
@ -871,11 +875,12 @@ function EndSetPopover({
placement="top"
trigger={
<SendouButton
variant="minimal"
className={clsx(
styles.stageBannerUndoButton,
styles.stageBannerEndSetButton,
)}
size="miniscule"
variant="destructive"
>
{t("tournament:match.action.endSet")}
</SendouButton>

6
app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
View File

@ -415,11 +415,7 @@ function EndedEarlyMessage() {
{tournament.isOrganizer(user) &&
tournament.matchCanBeReopened(data.match.id) ? (
<Form method="post" className="contents">
<SubmitButton
_action="REOPEN_MATCH"
className={styles.stageBannerUndoButton}
testId="reopen-match-button"
>
<SubmitButton _action="REOPEN_MATCH" testId="reopen-match-button">
Reopen match
</SubmitButton>
</Form>

78
app/features/tournament-bracket/tournament-bracket.module.css
View File

@ -40,7 +40,7 @@
.lockedBanner {
width: 100%;
height: 10rem;
background-color: var(--color-bg-higher);
background-color: var(--color-bg-high);
border-start-end-radius: var(--rounded);
border-start-start-radius: var(--rounded);
grid-area: img;
@ -74,12 +74,12 @@
display: flex;
justify-content: space-between;
padding: var(--s-2);
backdrop-filter: blur(5px);
backdrop-filter: var(--backdrop-filter);
background: rgb(0 0 0 / 40%);
border-start-end-radius: var(--rounded);
border-start-start-radius: var(--rounded);
color: var(--color-text-high);
font-size: var(--fonts-xs);
color: #fff;
}
.stageBannerBottomBar {
@ -89,12 +89,6 @@
}
.stageBannerUndoButton {
border: 0;
background-color: var(--color-error);
color: var(--color-text);
font-size: var(--fonts-xxs);
padding-block: var(--s-1);
padding-inline: var(--s-2);
position: absolute;
right: 8px;
bottom: 8px;
@ -128,8 +122,8 @@
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
width: var(--input-height-smaller);
height: var(--input-height-smaller);
border-radius: 50%;
font-weight: bold;
font-size: var(--fonts-sm);
@ -259,37 +253,40 @@
outline-offset: 2px;
}
.duringMatchActionsCheckbox {
.duringMatchActionsCheckbox.duringMatchActionsCheckbox {
all: unset;
width: 40% !important;
height: 1.5rem !important;
appearance: none;
background-color: var(--color-accent-low);
background-color: var(--color-bg-higher);
border-end-start-radius: var(--rounded);
border-start-start-radius: var(--rounded);
cursor: pointer;
}
.duringMatchActionsCheckbox:checked {
background-color: var(--color-accent);
}
.duringMatchActionsCheckbox::after {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
color: var(--color-text-high);
content: "Inactive";
font-size: var(--fonts-xxs);
font-weight: var(--bold);
letter-spacing: 0.4px;
padding-block-end: 1px;
}
.duringMatchActionsCheckbox:checked::after {
color: var(--color-text-inverse);
content: "Playing";
&::after {
all: unset;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
color: var(--color-text-high);
content: "Inactive";
padding-block-end: 1px;
}
&:checked {
background-color: var(--color-text-accent);
&::after {
display: flex;
color: var(--color-text-inverse);
content: "Playing";
}
}
}
.duringMatchActionsPlayerName {
@ -319,7 +316,7 @@
.duringMatchActionsSeed {
font-size: var(--fonts-xxs);
color: var(--color-accent);
color: var(--color-text-accent);
}
.duringMatchActionsTeamName {
@ -347,6 +344,11 @@
align-items: center;
}
.inactivePlayer {
color: var(--color-text-high);
text-decoration: line-through;
}
@media screen and (min-width: 640px) {
.rosters {
justify-content: space-evenly;
@ -384,15 +386,15 @@
.modeProgressImageNotable {
background-color: var(--color-bg-higher);
border: none;
outline: 2px solid var(--color-bg-higher);
outline: 2px solid transparent;
}
.modeProgressImageTeamOneWin {
outline: 2px solid var(--color-accent);
outline: 2px solid var(--color-info);
}
.modeProgressImageTeamTwoWin {
outline: 2px solid var(--color-accent);
outline: 2px solid var(--color-error);
}
.modeProgressImageSelected {
@ -414,14 +416,14 @@
.teamOneDot {
border-radius: 100%;
background-color: var(--color-accent);
background-color: var(--color-info);
width: 8px;
height: 8px;
}
.teamTwoDot {
border-radius: 100%;
background-color: var(--color-accent);
background-color: var(--color-error);
width: 8px;
height: 8px;
}

4
app/features/tournament/tournament.module.css
View File

@ -63,7 +63,7 @@
display: grid;
grid-template-columns: max-content max-content max-content max-content;
border-radius: var(--rounded);
border: 2px solid var(--color-accent);
border: 2px solid var(--color-text-accent);
width: max-content;
margin: 0 auto;
overflow: hidden;
@ -74,7 +74,7 @@
}
.teamWithRosterMapPoolModeInfo {
background-color: var(--color-bg);
background-color: var(--color-bg-high);
display: flex;
font-size: var(--fonts-xxs);
justify-content: center;

5
app/features/user-page/routes/u.$identifier.seasons.tsx
View File

@ -62,6 +62,7 @@ import {
} from "../loaders/u.$identifier.seasons.server";
import type { UserPageLoaderData } from "../loaders/u.$identifier.server";
import styles from "../user-page.module.css";
import { mainStyles } from "~/components/Main";
export { loader };
export const handle: SendouRouteHandle = {
@ -83,7 +84,7 @@ export default function UserSeasonsPage() {
if (data.results.value.length === 0) {
return (
<div className="stack lg half-width">
<div className={clsx(mainStyles.narrow, "stack lg")}>
<SeasonHeader
seasonViewed={data.season}
seasonsParticipatedIn={data.seasonsParticipatedIn}
@ -99,7 +100,7 @@ export default function UserSeasonsPage() {
`?info=${tab}&page=${data.results.currentPage}&season=${data.season}`;
return (
<div className="stack lg half-width">
<div className={clsx(mainStyles.narrow, "stack lg")}>
<SeasonHeader
seasonViewed={data.season}
seasonsParticipatedIn={data.seasonsParticipatedIn}

2
app/features/vods/routes/vods.new.tsx
View File

@ -269,7 +269,7 @@ function PovFormField() {
size="small"
variant="minimal"
onPress={toggleInputType}
className="outline-theme mt-2"
className="mt-2"
>
{asPlainInput
? t("calendar:forms.team.player.addAsUser")

10
app/styles/common.css
View File

@ -159,6 +159,11 @@ input[type="checkbox"] {
display: block;
}
}
/* Hacky selector to remove the margin bottom from the container from Label.tsx */
&:has(+ div > label) + div {
margin-bottom: 0;
}
}
input[type="radio"] {
@ -199,6 +204,11 @@ input[type="radio"] {
background-color: var(--color-text-accent);
}
}
/* Hacky selector to remove the margin bottom from the container from Label.tsx */
&:has(+ div > label) + div {
margin-bottom: 0;
}
}
[list]::-webkit-calendar-picker-indicator {

4
app/styles/utils.css
View File

@ -470,10 +470,6 @@
all: unset;
}
.outline-theme:focus {
outline: 2px solid var(--color-accent);
}
.focus-text-decoration:focus-visible {
outline: none !important;
text-decoration: underline;