brackets-viewer/dist/brackets-viewer.min.css

A simple library to display tournament brackets (round-robin, single elimination, double elimination)

.brackets-viewer{--primary-background: #fff;--secondary-background: #eceff1;--match-background: var(--primary-background);--font-color: #212529;--win-color: #50b649;--loss-color: #e61a1a;--label-color: grey;--hint-color: #a7a7a7;--connector-color: #9e9e9e;--border-color: #d9d9d9;--border-hover-color: #b6b5b5;--border-selected-color: rgb(60, 60, 60);--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: 0.3em;--participant-image-size: 1em}.brackets-viewer{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";background:var(--primary-background);color:var(--font-color);font-size:var(--text-size);text-align:left;display:flex;flex-direction:column;align-items:flex-start;overflow:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:0 auto;padding:10px 50px}.brackets-viewer:empty{display:none}.brackets-viewer *,.brackets-viewer ::after,.brackets-viewer ::before{box-sizing:border-box}.brackets-viewer h1,.brackets-viewer h2,.brackets-viewer h3{margin-bottom:.5em;font-weight:500;line-height:1.2}.brackets-viewer h1{font-size:2em;margin-top:30px;margin-bottom:20px}.brackets-viewer h2{font-size:1.7em}.brackets-viewer h3{text-align:center;background:var(--secondary-background);font-size:1.1em;padding:10px 0px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:var(--match-width)}.brackets-viewer .round-robin{display:flex;flex-wrap:wrap;justify-content:center;row-gap:24px}.brackets-viewer .round-robin h1{flex-basis:100%}.brackets-viewer .round-robin h2{text-align:center}.brackets-viewer .round-robin .group:not(:last-of-type){margin-right:var(--round-margin)}.brackets-viewer .round-robin .group h2{margin:0 0 25px 0}.brackets-viewer .round-robin .group table{font-size:1em;margin:30px 0 20px 0;color:#a7a7a7;border-collapse:collapse}.brackets-viewer .round-robin .group th{font-weight:normal;text-align:start;cursor:help;border-bottom:var(--match-border-width) solid var(--border-color)}.brackets-viewer .round-robin .group td.hover{background:var(--secondary-background)}.brackets-viewer .round-robin .group th,.brackets-viewer .round-robin .group td{padding:5px}.brackets-viewer .round-robin .group td:nth-of-type(2),.brackets-viewer .round-robin .group td:last-of-type{color:var(--font-color);font-weight:500}.brackets-viewer .round-robin .round{width:-moz-fit-content;width:fit-content;margin:0 auto}.brackets-viewer .bracket h2{font-size:1.5em;color:gray}.brackets-viewer .bracket .rounds{display:flex}.brackets-viewer .bracket .rounds:not(:last-of-type){margin-bottom:15px}.brackets-viewer .bracket .rounds .round{display:flex;flex-direction:column}.brackets-viewer .bracket .rounds .round:not(:last-of-type){margin-right:var(--round-margin)}.brackets-viewer .match{flex:1;display:flex;align-items:center;margin:10px 0;width:var(--match-width);position:relative}.brackets-viewer .match.connect-next::after{content:"";display:block;position:absolute;right:calc(-1 * var(--round-margin)/2);width:calc(var(--round-margin)/2);height:50%;border-right:var(--connector-border-width) solid var(--connector-color)}.brackets-viewer .match.connect-next:nth-of-type(odd)::after{top:50%;border-top:var(--connector-border-width) solid var(--connector-color)}.brackets-viewer .match.connect-next:nth-of-type(even)::after{top:0;border-bottom:var(--connector-border-width) solid var(--connector-color)}.brackets-viewer .match.connect-next.straight::after{width:var(--round-margin);right:calc(-1*var(--round-margin));top:0;border-bottom:var(--connector-border-width) solid var(--connector-color);border-top:unset;border-right:unset}.brackets-viewer .opponents{width:100%;position:relative;border:var(--match-border-width) solid var(--border-color);border-radius:var(--match-border-radius);background:var(--match-background)}.brackets-viewer .opponents:hover{border:1px solid var(--border-hover-color)}.brackets-viewer .opponents.popover-selected{border:1px solid var(--border-selected-color)}.brackets-viewer .opponents>span{position:absolute;top:-10px;font-size:.8em;padding:0 5px;color:var(--label-color);background:var(--primary-background);border-radius:3px}.brackets-viewer .opponents>span:nth-of-type(1){left:3px}.brackets-viewer .opponents>span:nth-of-type(2){right:3px}.brackets-viewer .opponents.connect-previous::before{content:"";display:block;position:absolute;left:calc(-1 * var(--round-margin)/2);width:calc(var(--round-margin)/2);height:50%;border-bottom:var(--connector-border-width) solid var(--connector-color)}.bracket:nth-of-type(2) .brackets-viewer .opponents.connect-previous .opponents.connect-previous.straight::before,.bracket:nth-of-type(1) .brackets-viewer .opponents.connect-previous .opponents.connect-previous.straight::after{border-left:unset;left:var(--round-margin);width:var(--round-margin)}.bracket:nth-of-type(1) .brackets-viewer .opponents.connect-previous.straight::before{content:unset}.bracket:nth-of-type(2) .brackets-viewer .opponents.connect-previous.straight::after{content:unset}.brackets-viewer .participant{display:flex;justify-content:space-between;padding:2px var(--match-horizontal-padding);background:var(--match-background)}.brackets-viewer .participant.hover{background:var(--secondary-background) !important}.brackets-viewer .participant:nth-of-type(1){border-bottom:none;border-top-left-radius:var(--match-border-radius);border-top-right-radius:var(--match-border-radius);padding-top:var(--match-vertical-padding)}.brackets-viewer .participant:nth-of-type(2){border-top:none;border-bottom-left-radius:var(--match-border-radius);border-bottom-right-radius:var(--match-border-radius);padding-bottom:var(--match-vertical-padding)}.brackets-viewer .participant .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:80%}.brackets-viewer .participant .name.hint{color:var(--hint-color)}.brackets-viewer .participant .name>img{width:var(--participant-image-size);height:var(--participant-image-size);margin-right:4px;-o-object-fit:cover;object-fit:cover;border-radius:4px;vertical-align:middle;position:relative;bottom:1px}.brackets-viewer .participant .name>span{color:var(--hint-color);font-size:.9em;font-weight:initial}.brackets-viewer .participant .result{margin-left:10px;width:15%;text-align:center}.brackets-viewer .participant.win .name{font-weight:bold}.brackets-viewer .participant.win .result{color:var(--win-color)}.brackets-viewer .participant.loss .result{color:var(--loss-color)}.brackets-viewer [popover]{padding:0 14px 10px 14px}.brackets-viewer [popover] h4{font-size:1.1em;margin-bottom:24px}.brackets-viewer [popover] .match:not(:last-of-type){margin-bottom:20px}