Skip to content

Commit 6258ac0

Browse files
Drarig29Drarig29
committed
Added highlightParticipantOnHover in config
1 parent 63d41ef commit 6258ac0

File tree

5 files changed

+350
-2
lines changed

5 files changed

+350
-2
lines changed

‎demo/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@
1717
matches: data.match,
1818
matchGames: data.match_game,
1919
participants: data.participant,
20+
}, {
21+
participantOriginPlacement: 'before',
22+
showSlotsOrigin: true,
23+
showLowerBracketSlotsOrigin: true,
24+
highlightParticipantOnHover: true,
2025
});
2126
})();
2227
</script>

‎dist/brackets-viewer.min.css

Lines changed: 189 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,190 @@
1-
*,::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: #ddd;--font-color: #212529;--win-color: #50b649;--loss-color: #e61a1a;--hint-color: #a7a7a7;--connector-color: #9e9e9e;--border-color: #d9d9d9;--border-hover-color: #009dff}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:#eceff1;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:200px;position:relative}.match.connect-next::after{content:"";display:block;position:absolute;right:-25px;width:25px;height:50%;border-right:2px solid var(--connector-color)}.match.connect-next:nth-of-type(odd)::after{top:50%;border-top:2px solid var(--connector-color)}.match.connect-next:nth-of-type(even)::after{top:0;border-bottom:2px solid var(--connector-color)}.match.connect-next.straight::after{width:50px;right:-50px;top:0;border-bottom:2px solid var(--connector-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(--hint-color);border-radius:3px}.teams.connect-previous::before{content:"";display:block;position:absolute;left:-25px;width:25px;height:50%;border-bottom:2px solid var(--connector-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:3px 12px;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)}.result{margin-left:10px;text-align:center}.result.win{color:#50b649}.result.loss{color:#e61a1a}
1+
*,
2+
::after,
3+
::before {
4+
box-sizing: border-box; }
5+
6+
#root {
7+
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";
8+
color: var(--font-color);
9+
background-color: var(--primary-background);
10+
text-align: left;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: flex-start;
14+
width: max-content;
15+
margin: 0 auto;
16+
user-select: none;
17+
--primary-background: #fff;
18+
--secondary-background: #eceff1;
19+
--font-color: #212529;
20+
--win-color: #50b649;
21+
--loss-color: #e61a1a;
22+
--label-color: grey;
23+
--hint-color: #a7a7a7;
24+
--connector-color: #9e9e9e;
25+
--border-color: #d9d9d9;
26+
--border-hover-color: #b6b5b5; }
27+
28+
h1,
29+
h2,
30+
h3 {
31+
margin-bottom: 0.5rem;
32+
font-weight: 500;
33+
line-height: 1.2; }
34+
35+
h1 {
36+
font-size: 26px;
37+
margin-bottom: 40px; }
38+
39+
h2 {
40+
font-size: 23px; }
41+
42+
h3 {
43+
text-align: center;
44+
background: var(--secondary-background);
45+
font-size: 16px;
46+
padding: 10px; }
47+
48+
.round-robin {
49+
display: flex; }
50+
.round-robin .group {
51+
text-align: center; }
52+
.round-robin .group:not(:last-of-type) {
53+
margin-right: 50px; }
54+
.round-robin .group h2 {
55+
margin-bottom: 25px; }
56+
.round-robin .group table {
57+
margin-top: 25px;
58+
color: #a7a7a7;
59+
border-collapse: collapse; }
60+
.round-robin .group th {
61+
font-weight: normal;
62+
text-align: start;
63+
cursor: help; }
64+
.round-robin .group td {
65+
border: none;
66+
border-top: 1px solid var(--border-color); }
67+
.round-robin .group td.hover {
68+
background: #eceff1 !important; }
69+
.round-robin .group th,
70+
.round-robin .group td {
71+
padding: 5px; }
72+
.round-robin .group td:nth-of-type(2), .round-robin .group td:last-of-type {
73+
color: black;
74+
font-weight: 500; }
75+
.round-robin .round {
76+
width: fit-content;
77+
margin: 0 auto; }
78+
79+
.bracket {
80+
flex: 1;
81+
display: flex; }
82+
.bracket:not(:last-of-type) {
83+
margin-bottom: 30px; }
84+
.bracket .round {
85+
flex: 1;
86+
display: flex;
87+
flex-direction: column; }
88+
.bracket .round:not(:last-of-type) {
89+
margin-right: 50px; }
90+
91+
.match {
92+
flex: 1;
93+
display: flex;
94+
align-items: center;
95+
margin: 10px 0;
96+
width: 192px;
97+
position: relative; }
98+
.match.connect-next::after {
99+
content: "";
100+
display: block;
101+
position: absolute;
102+
right: -25px;
103+
width: 25px;
104+
height: 50%;
105+
border-right: 2px solid var(--border-color); }
106+
.match.connect-next:nth-of-type(odd)::after {
107+
top: 50%;
108+
border-top: 2px solid var(--border-color); }
109+
.match.connect-next:nth-of-type(even)::after {
110+
top: 0;
111+
border-bottom: 2px solid var(--border-color); }
112+
.match.connect-next.straight::after {
113+
width: 50px;
114+
right: -50px;
115+
top: 0;
116+
border-bottom: 2px solid var(--border-color);
117+
border-top: unset;
118+
border-right: unset; }
119+
120+
.teams {
121+
width: 100%;
122+
position: relative;
123+
border: 1px solid var(--border-color);
124+
border-radius: 0.3rem; }
125+
.teams:hover {
126+
border: 1px solid var(--border-hover-color); }
127+
.teams > span {
128+
position: absolute;
129+
top: -10px;
130+
left: 3px;
131+
font-size: 0.8rem;
132+
background: white;
133+
padding: 0 5px;
134+
color: var(--label-color);
135+
border-radius: 3px; }
136+
.teams.connect-previous::before {
137+
content: "";
138+
display: block;
139+
position: absolute;
140+
left: -25px;
141+
width: 25px;
142+
height: 50%;
143+
border-bottom: 2px solid var(--border-color); }
144+
.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 {
145+
border-left: unset;
146+
left: -50px;
147+
width: 50px; }
148+
.bracket:nth-of-type(1) .teams.connect-previous.straight::before {
149+
content: unset; }
150+
.bracket:nth-of-type(2) .teams.connect-previous.straight::after {
151+
content: unset; }
152+
153+
.team {
154+
display: flex;
155+
justify-content: space-between;
156+
padding: 2px 8px;
157+
background: var(--primary-background); }
158+
.team.hover {
159+
background: var(--secondary-background) !important; }
160+
.team:nth-of-type(1) {
161+
border-bottom: none;
162+
border-top-left-radius: 0.3rem;
163+
border-top-right-radius: 0.3rem;
164+
padding-top: 8px; }
165+
.team:nth-of-type(2) {
166+
border-top: none;
167+
border-bottom-left-radius: 0.3rem;
168+
border-bottom-right-radius: 0.3rem;
169+
padding-bottom: 8px; }
170+
171+
.name {
172+
white-space: nowrap;
173+
overflow: hidden;
174+
text-overflow: ellipsis; }
175+
.name.win {
176+
font-weight: bold; }
177+
.name.hint {
178+
color: var(--hint-color); }
179+
.name > span {
180+
color: var(--hint-color); }
181+
182+
.result {
183+
margin-left: 10px;
184+
width: 15%;
185+
text-align: center; }
186+
.result.win {
187+
color: var(--win-color); }
188+
.result.loss {
189+
color: var(--loss-color); }
2190

0 commit comments

Comments
 (0)