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

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

*,::after,::before{box-sizing:border-box}#root{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";color:var(--font-color);background-color:var(--primary-background);text-align:left;display:flex;flex-direction:column;align-items:flex-start;width:max-content;margin:0 auto;user-select:none;--primary-background: #fff;--secondary-background: #eceff1;--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}h1,h2,h3{margin-bottom:0.5rem;font-weight:500;line-height:1.2}h1{font-size:26px;margin-bottom:40px}h2{font-size:23px}h3{text-align:center;background:var(--secondary-background);font-size:16px;padding:10px}.round-robin{display:flex}.round-robin .group{text-align:center}.round-robin .group:not(:last-of-type){margin-right:50px}.round-robin .group h2{margin-bottom:25px}.round-robin .group table{margin-top:25px;color:#a7a7a7;border-collapse:collapse}.round-robin .group th{font-weight:normal;text-align:start;cursor:help}.round-robin .group td{border:none;border-top:1px solid var(--border-color)}.round-robin .group td.hover{background:#eceff1 !important}.round-robin .group th,.round-robin .group td{padding:5px}.round-robin .group td:nth-of-type(2),.round-robin .group td:last-of-type{color:black;font-weight:500}.round-robin .round{width:fit-content;margin:0 auto}.bracket{flex:1;display:flex}.bracket:not(:last-of-type){margin-bottom:30px}.bracket .round{flex:1;display:flex;flex-direction:column}.bracket .round:not(:last-of-type){margin-right:50px}.match{flex:1;display:flex;align-items:center;margin:10px 0;width:192px;position:relative}.match.connect-next::after{content:"";display:block;position:absolute;right:-25px;width:25px;height:50%;border-right:2px solid var(--border-color)}.match.connect-next:nth-of-type(odd)::after{top:50%;border-top:2px solid var(--border-color)}.match.connect-next:nth-of-type(even)::after{top:0;border-bottom:2px solid var(--border-color)}.match.connect-next.straight::after{width:50px;right:-50px;top:0;border-bottom:2px solid var(--border-color);border-top:unset;border-right:unset}.teams{width:100%;position:relative;border:1px solid var(--border-color);border-radius:.3rem}.teams:hover{border:1px solid var(--border-hover-color)}.teams>span{position:absolute;top:-10px;left:3px;font-size:0.8rem;background:white;padding:0 5px;color:var(--label-color);border-radius:3px}.teams.connect-previous::before{content:"";display:block;position:absolute;left:-25px;width:25px;height:50%;border-bottom:2px solid var(--border-color)}.teams.connect-previous .bracket:nth-of-type(1) .teams.connect-previous.straight::after,.bracket:nth-of-type(1) .teams.connect-previous .teams.connect-previous.straight::after,.teams.connect-previous .bracket:nth-of-type(2) .teams.connect-previous.straight::before,.bracket:nth-of-type(2) .teams.connect-previous .teams.connect-previous.straight::before{border-left:unset;left:-50px;width:50px}.bracket:nth-of-type(1) .teams.connect-previous.straight::before{content:unset}.bracket:nth-of-type(2) .teams.connect-previous.straight::after{content:unset}.team{display:flex;justify-content:space-between;padding:2px 8px;background:var(--primary-background)}.team.hover{background:var(--secondary-background) !important}.team:nth-of-type(1){border-bottom:none;border-top-left-radius:.3rem;border-top-right-radius:.3rem;padding-top:8px}.team:nth-of-type(2){border-top:none;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;padding-bottom:8px}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.name.win{font-weight:bold}.name.hint{color:var(--hint-color)}.name>span{color:var(--hint-color);font-size:0.9rem;font-weight:initial}.result{margin-left:10px;width:15%;text-align:center}.result.win{color:var(--win-color)}.result.loss{color:var(--loss-color)}