MediaWiki:Gadget-brackets.css

.bracket-grid { display: grid; grid-auto-flow: column; font-size: 90%; overflow: auto; line-height: 1; }

.bracket-line, .bracket-spacer { text-align: center; height: 100%; }

.bracket-grid-header, .bracket-team { grid-row: span 2; display: table; border: 1px solid var(--interface-border); border-radius: 2px; height: 100%; width: 100%; box-sizing: border-box; }

.bracket-grid-header { background: var(--interface-background); text-align: center; }

.bracket-header-content, .bracket-team-name, .bracket-team-points { display: table-cell; vertical-align: middle; }

.bracket-header-content { position:relative; }

.bracket-toggler { position:absolute; right:5px; top: 50%; margin-top: -0.5em; }

.bracket-team-name { padding: 3px; min-width: 4em; max-width: 0; word-wrap: break-word; }

.bracket-team-points { background: var(--interface-background); width: 2em; min-width: 2em; text-align: center; border-left: 1px solid var(--interface-border); padding-left:0; padding-right:0; }

.bracket-line.reseed { position: relative; }

.bracket-line::after, .bracket-line::before, .bracket-spacer.horizontal::before { width: calc(50% + 2px); height: calc(100% + 2px); box-sizing: border-box; display: inline-block; margin: -1px; border: 0 solid var(--bracket-line-color); }

.bracket-line, .bracket-spacer { --bracket-line-color: var(--body-text-color); }

.bracket-line.loser-advance { --bracket-line-color: #f00; }

.bracket-line.reseed { --bracket-line-color: var(--interface-border); }

.bracket-line.horizontal::before, .bracket-spacer.horizontal::before { content: ""; border-width: 0 0 2px 0; width: calc(100% + 2px); }

.bracket-line.t-down::after { content: ""; border-width: 2px 0 2px 2px; border-radius: 0 0 0 2px; }

.bracket-line.t-down::before { content: ""; border-width: 2px 2px 0 0; border-bottom: 2px solid transparent; }

.bracket-line.t-up::after { content: ""; border-width: 0 0 2px 2px; border-radius: 2px 0 0 0; }

.bracket-line.t-up::before { content: ""; border-width: 2px 2px 2px 0; border-top: 2px solid transparent; }

.bracket-line.z-down::after { content: ""; border-width: 0 0 2px 2px; border-top: 2px solid transparent; border-radius: 0 0 0 2px; }

.bracket-line.z-down::before { content: ""; border-width: 2px 2px 0 0; border-bottom: 2px solid transparent; border-radius: 0 2px 0 0; }

.bracket-line.z-up::after { content: ""; border-width: 2px 0 0 2px; border-bottom: 2px solid transparent; border-radius: 2px 0 0 0; }

.bracket-line.z-up::before { content: ""; border-width: 0 2px 2px 0; border-top: 2px solid transparent; border-radius: 0 0 2px 0; }

.bracket-line.reseed::after { border-width: 2px 0 2px 2px; writing-mode: vertical-lr; position: absolute; right: 0; top: 0; font-size: 90%; text-align: center; }

.bracket-line.reseed::before { content: ""; float: left; border-width: 2px 1px 2px 0; }

.bracket-line.reseed-reseeding::after { content: "Reseeding"; }

.bracket-line.reseed-selection::after { content: "Selection"; }

.bracket-line.l-down::after { content: ""; border-width: 0 0 2px 2px; border-radius: 0 0 0 2px; float: right; }

.bracket-line.l-up::after { content: ""; border-width: 2px 0 0 2px; border-radius: 2px 0 0 0; float: right; }

.bracket-winner { font-weight: bold; }

.round1 { grid-column: 2; }

.round2 { grid-column: 4; }

.round3 { grid-column: 6; }

.round4 { grid-column: 8; }

.round5 { grid-column: 10; }

.round6 { grid-column: 12; }

.round7 { grid-column: 14; }

.round8 { grid-column: 16; }

.round9 { grid-column: 18; }

.round10 { grid-column: 20; }

.bracket-line.round0 { grid-column: 1; }

.bracket-line.round1 { grid-column: 3; }

.bracket-line.round2 { grid-column: 5; }

.bracket-line.round3 { grid-column: 7; }

.bracket-line.round4 { grid-column: 9; }

.bracket-line.round5 { grid-column: 11; }

.bracket-line.round6 { grid-column: 13; }

.bracket-line.round7 { grid-column: 15; }

.bracket-line.round8 { grid-column: 17; }

.bracket-line.round9 { grid-column: 19; }

.bracket-extrainfo { float: right; display: inline-block; }

.qualified.bracket-winner, .qualified.bracket-winner .bracket-team-points { background-color: var(--color-up); }

.bracket-hidden { display: none!important; }

.bracket-bye .bracket-team-name { font-style: italic; background-color: var(--bg-color); }

.bracket-bye .bracket-team-points { background-color: var(--bg-color); }

.bracket-score-winner { font-weight:bold; }

.bracket-score-loser { font-weight:normal; }