Skip to content

Instantly share code, notes, and snippets.

@nathanaelnsmith

nathanaelnsmith/brackets.css

Created November 20, 2012 23:16
Show Gist options
  • Save nathanaelnsmith/4121926 to your computer and use it in GitHub Desktop.
Save nathanaelnsmith/4121926 to your computer and use it in GitHub Desktop.
Download ZIP
A Mixin for generating tournament bracket spacing.
Raw
brackets.css
.brackets-wrapper {
width: 980px;
margin: 0 auto;
position: relative;
float: left;
z-index: 2;
}
.brackets-wrapper ul {
position: relative;
float: left;
width: 100px;
list-style: none;
padding: 0;
margin: 0;
}
.brackets-wrapper ul ul {
position: absolute;
left: -90px;
right: auto;
top: 0px;
border: 3px solid rgba(68, 68, 68, 0.45);
border-left: 0;
}
.brackets-wrapper ul ul li {
position: absolute;
right: 30px;
z-index: 1;
}
.brackets-wrapper ul li {
width: 175px;
height: 64px;
}
.brackets-wrapper ul li a {
display: block;
padding: 10px;
text-transform: uppercase;
font: bold 11px/11px Verdana;
height: 11px;
color: #00f0ff;
text-decoration: none;
position: relative;
z-index: 9;
background: #0b1215;
border: 1px solid rgba(255, 255, 255, 0.17);
border-top: 1px solid #202527;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.brackets-wrapper ul li a:first-child {
border-bottom: 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.brackets-wrapper ul li a.winner {
background-color: #9C090F;
background-image: -moz-linear-gradient(top, #c50b13, #5f0508);
background-image: -ms-linear-gradient(top, #c50b13, #5f0508);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#c50b13), to(#5f0508));
background-image: -webkit-linear-gradient(top, #c50b13, #5f0508);
background-image: -o-linear-gradient(top, #c50b13, #5f0508);
background-image: linear-gradient(top, #c50b13, #5f0508);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c50b13', endColorstr='#5f0508', GradientType=0);
border-color: #5F0508 #5F0508 #160102;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.brackets-wrapper ul li a.champion {
background-color: #17242C;
background-image: -moz-linear-gradient(top, #152b37, #191a1b);
background-image: -ms-linear-gradient(top, #152b37, #191a1b);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#152b37), to(#191a1b));
background-image: -webkit-linear-gradient(top, #152b37, #191a1b);
background-image: -o-linear-gradient(top, #152b37, #191a1b);
background-image: linear-gradient(top, #152b37, #191a1b);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#152b37', endColorstr='#191a1b', GradientType=0);
border-color: #191A1B #191A1B black;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.brackets-wrapper ul.player64 {
height: 3840px;
width: 1365px;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
height: 116px;
z-index: -1;
top: -25px;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li > ul > li > ul {
height: 232px;
z-index: -1;
top: -83px;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li > ul {
height: 464px;
z-index: -1;
top: -199px;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul {
height: 928px;
z-index: -1;
top: -431px;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player64 > li > ul > li > ul {
height: 1856px;
z-index: -1;
top: -895px;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player64 > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player32 {
height: 1920px;
width: 1170px;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
height: 58px;
z-index: -1;
top: --4px;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li > ul > li > ul {
height: 116px;
z-index: -1;
top: -25px;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li > ul {
height: 232px;
z-index: -1;
top: -83px;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul {
height: 464px;
z-index: -1;
top: -199px;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player32 > li > ul > li > ul {
height: 928px;
z-index: -1;
top: -431px;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player32 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
display: none;
}
.brackets-wrapper ul.player16 {
height: 960px;
width: 975px;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
height: 29px;
z-index: -1;
top: --18.5px;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul > li > ul {
height: 58px;
z-index: -1;
top: --4px;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul {
height: 116px;
z-index: -1;
top: -25px;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul {
height: 232px;
z-index: -1;
top: -83px;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player16 > li > ul > li > ul {
height: 464px;
z-index: -1;
top: -199px;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
.brackets-wrapper ul.player16 > li > ul > li > ul > li > ul > li > ul > li > ul {
display: none;
}
.brackets-wrapper ul.player8 {
height: 480px;
width: 780px;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
height: 14.5px;
z-index: -1;
top: --25.75px;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul > li > ul {
height: 29px;
z-index: -1;
top: --18.5px;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul {
height: 58px;
z-index: -1;
top: --4px;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul {
height: 116px;
z-index: -1;
top: -25px;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player8 > li > ul > li > ul {
height: 232px;
z-index: -1;
top: -83px;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul > li > ul,
.brackets-wrapper ul.player8 > li > ul > li > ul > li > ul > li > ul {
display: none;
}
.brackets-wrapper ul.player4 {
height: 240px;
width: 585px;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
height: 7.25px;
z-index: -1;
top: --29.375px;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul > li > ul {
height: 14.5px;
z-index: -1;
top: --25.75px;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul {
height: 29px;
z-index: -1;
top: --18.5px;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul {
height: 58px;
z-index: -1;
top: --4px;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player4 > li > ul > li > ul {
height: 116px;
z-index: -1;
top: -25px;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li {
bottom: -34px;
top: auto;
z-index: 1;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li:first-child {
top: -34px;
bottom: auto;
}
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul > li > ul,
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul > li > ul,
.brackets-wrapper ul.player4 > li > ul > li > ul > li > ul {
display: none;
}
.brackets-wrapper > ul > li {
position: absolute;
width: 175px;
left: auto;
right: 0px;
top: 50%;
margin-top: -19px;
height: 32px;
}
.brackets-wrapper > ul > li:first-child > a {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.17);
}
.brackets-wrapper > ul > li > ul {
height: 0px;
border-top: 0px;
top: 50%;
z-index: 0;
}
.brackets-wrapper > ul > li > ul > li.finale:first-child {
top: -31px;
z-index: 1;
}
Raw
brackets.html
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="brackets.css">
</head>
<body>
<div class="brackets-wrapper">
<ul class="player16">
<li><a href="#" class="champion">winner</a>
<ul>
<li class="finale"><a href="#">1st Tier 1<span>1</span></a><a href="#">1st Tier 2<span>1</span></a>
<ul>
<li><a href="#" class="winner">2nd Tier 1<span>1</span></a><a href="#">2nd Tier 2<span>1</span></a>
<ul>
<li><a href="#">3rd Tier 1</a><a href="#">3rd Tier 2</a>
<ul>
<li><a href="#">4th Tier 1</a><a href="#">4th Tier 1</a>
<ul>
<li><a href="#">5th Tier 1</a><a href="#">5th Tier 1</a>
<ul>
<li><a href="#">6th Tier 1</a><a href="#">6th Tier 2</a></li>
<li><a href="#">6th Tier 3</a><a href="#">6th Tier 4</a></li>
</ul>
</li>
<li>5th Tier 2
<ul>
<li><a href="#">6th Tier 5</a><a href="#">6th Tier 6</a></li>
<li><a href="#">6th Tier 7</a><a href="#">6th Tier 8</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">4th Tier 1</a><a href="#">4th Tier 1</a>
<ul>
<li>5th Tier 3
<ul>
<li>6th Tier 5</li>
<li>6th Tier 6</li>
</ul>
</li>
<li>5th Tier 4
<ul>
<li>6th Tier 7</li>
<li>6th Tier 8</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">3rd Tier 3</a><a href="#">3rd Tier 4</a>
<ul>
<li><a href="#">4th Tier 1</a><a href="#">4th Tier 1</a>
<ul>
<li>5th Tier 5
<ul>
<li>6th Tier 9</li>
<li>6th Tier 10</li>
</ul>
</li>
<li>5th Tier 6
<ul>
<li>6th Tier 11</li>
<li>6th Tier 12</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">4th Tier 1</a><a href="#">4th Tier 1</a>
<ul>
<li>5th Tier 7
<ul>
<li>6th Tier 13</li>
<li>6th Tier 14</li>
</ul>
</li>
<li>5th Tier 8
<ul>
<li>6th Tier 15</li>
<li>6th Tier 16</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">2nd Tier 3<span>1</span></a><a href="#">2nd Tier 4<span>1</span></a>
<ul>
<li><a href="#">3rd Tier 5<span>1</span></a><a href="#">3rd Tier 6<span>1</span></a>
<ul>
<li><a href="#">4th Tier 1</a><a href="#">4th Tier 1</a>
<ul>
<li>5th Tier 9
<ul>
<li>6th Tier 17</li>
<li>6th Tier 18</li>
</ul>
</li>
<li>5th Tier 10
<ul>
<li>6th Tier 19</li>
<li>6th Tier 20</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">4th Tier 1</a><a href="#">4th Tier 1</a>
<ul>
<li>5th Tier 11
<ul>
<li>6th Tier 21</li>
<li>6th Tier 22</li>
</ul>
</li>
<li>5th Tier 12
<ul>
<li>6th Tier 23</li>
<li>6th Tier 24</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">3rd Tier 7</a><a href="#">3rd Tier 8</a>
<ul>
<li><a href="#">4th Tier 1</a><a href="#">4th Tier 1</a>
<ul>
<li>5th Tier 13
<ul>
<li>6th Tier 25</li>
<li>6th Tier 26</li>
</ul>
</li>
<li>5th Tier 14
<ul>
<li>6th Tier 27</li>
<li>6th Tier 28</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">4th Tier 1</a><a href="#">4th Tier 1</a>
<ul>
<li>5th Tier 15
<ul>
<li>6th Tier 29</li>
<li>6th Tier 30</li>
</ul>
</li>
<li>5th Tier 16
<ul>
<li>6th Tier 31</li>
<li>6th Tier 32</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Raw
brackets.less
@selector32: e('> ul > li > ul > li > ul > li > ul > li > ul > li > ul');
@selector16: e('> ul > li > ul > li > ul > li > ul > li > ul');
@selector8: e('> ul > li > ul > li > ul > li > ul');
@selector4: e('> ul > li > ul > li > ul');
@selector2: e('> ul > li > ul');
.brackets(@max, @num:32) when (@num > 1) {
@selector: ~"@{selector@{num}}";
@height: (50px * (@max / @num)) + (66px * (@max / @num));
@top: (@height / 2px - 33px);
> li @{selector} {
height: @height;
z-index: -1;
top: ~"-@{top}px";
> li {
bottom: -34px;
top: auto;
z-index: 1;
&:first-child {
top: -34px;
bottom: auto;
}
}
}
.brackets(@max, floor(@num / 2));
}
.brackets(@max,1){}
.brackets-wrapper {
width: 980px;
margin: 0 auto;
position: relative;
float: left;
z-index: 2;
ul {
position: relative;
float: left;
width: 100px;
list-style: none;
padding: 0;
margin: 0;
ul {
position: absolute;
left: -90px;
right: auto;
top: 0px;
border: 3px solid rgba(68,68,68,0.45);
border-left: 0;
li {
position: absolute;
right: 30px;
z-index: 1;
}
}
li {
width: 175px;
height: 64px;
a {
display: block;
padding: 10px;
text-transform: uppercase;
font: bold 11px/11px Verdana;
height: 11px;
color: #00f0ff;
text-decoration: none;
position: relative;
z-index: 9;
background: rgba(11,18,21, 1);
border: 1px solid rgba(255,255,255,0.17);
border-top: 1px solid #202527;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
a:first-child {
border-bottom: 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
a.winner {
background-color: #9C090F;
background-image: -moz-linear-gradient(top,#C50B13,#5F0508);
background-image: -ms-linear-gradient(top,#C50B13,#5F0508);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#C50B13),to(#5F0508));
background-image: -webkit-linear-gradient(top,#C50B13,#5F0508);
background-image: -o-linear-gradient(top,#C50B13,#5F0508);
background-image: linear-gradient(top,#C50B13,#5F0508);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c50b13',endColorstr='#5f0508',GradientType=0);
border-color: #5F0508 #5F0508 #160102;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
a.champion {
background-color: #17242C;
background-image: -moz-linear-gradient(top,#152B37,#191A1B);
background-image: -ms-linear-gradient(top,#152B37,#191A1B);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#152B37),to(#191A1B));
background-image: -webkit-linear-gradient(top,#152B37,#191A1B);
background-image: -o-linear-gradient(top,#152B37,#191A1B);
background-image: linear-gradient(top,#152B37,#191A1B);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#152b37',endColorstr='#191a1b',GradientType=0);
border-color: #191A1B #191A1B black;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
}
&.player64 {
.brackets(32);
height: (32px * 120px);
width: (7px * 195px);
}
&.player32 {
.brackets(16);
height: (16px * 120px);
width: (6px * 195px);
> li @{selector32} {
display: none;
}
}
&.player16 {
.brackets(8);
height: (8px * 120px);
width: (5px * 195px);
> li @{selector32}, > li @{selector16} {
display: none;
}
}
&.player8 {
.brackets(4);
height: (4px * 120px);
width: (4px * 195px);
> li @{selector32}, > li @{selector16}, > li @{selector8} {
display: none;
}
}
&.player4 {
.brackets(2);
height: (2px * 120px);
width: (3px * 195px);
> li @{selector32}, > li @{selector16}, > li @{selector8}, > li @{selector4} {
display: none;
}
}
}
> ul > li {
position: absolute;
width: 175px;
left: auto;
right: 0px;
top: 50%;
margin-top: -19px;
height: 32px;
&:first-child > a {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.17);
}
}
> ul > li > ul {
height: 0px;
border-top: 0px;
top: 50%;
z-index: 0;
> li.finale:first-child {
top: -31px;
z-index: 1;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment