sendou.ink/app/features/tournament-bracket/brackets-viewer.css
2023-05-19 11:41:34 +03:00

59 lines
1.3 KiB
CSS

.brackets-viewer {
/* Colors */
--primary-background: var(--bg);
--secondary-background: var(--bg-lightest);
--match-background: var(--bg-lighter);
--font-color: var(--text);
--win-color: #50b649;
--loss-color: #e61a1a;
--label-color: grey;
--hint-color: #a7a7a7;
/* TODO: mimicking border without transparent but not pretty in light mode */
--connector-color: #1c1b35;
--border-color: var(--primary-background);
--border-hover-color: transparent;
/* Sizes */
--text-size: 12px;
--round-margin: 40px;
--match-width: 150px;
--match-horizontal-padding: 8px;
--match-vertical-padding: 6px;
--connector-border-width: 2px;
--match-border-width: 1px;
--match-border-radius: var(--rounded-sm);
font-family: Lexend, sans-serif !important;
font-weight: var(--semi-bold) !important;
}
.brackets-viewer .opponents.connect-previous::before {
height: 52%;
}
.brackets-viewer .match.connect-next.straight::after {
top: 1px;
}
.brackets-viewer h3 {
border-radius: var(--rounded-sm);
}
.brackets-viewer .bracket h2 {
color: transparent;
}
.brackets-viewer h1 {
display: none;
}
.brackets-viewer .opponents > span {
background-color: var(--bg-light-variation);
top: -11px;
color: var(--text-lighter);
}
.bye {
color: var(--text-lighter);
}