Szablon:Nux/test teambracket/8tpl-lines.css

/* settings *
:root {
	--line-color: red;
	--line-width: 5px;
	--line-thick: 2px;
	--team-col-gap: calc(var(--line-width) * 2);
	--team-row-gap: .5em;
}

/* make room for lines */
.teambracket-8 {
	grid-template-columns: repeat(3, 1fr 2px);
	column-gap: calc(5px * 2);
}

/* horizontal lines common */
.pair {
	position: relative;
}
.pair::before,
.pair::after {
	content: "";
	position: absolute;
	height: 2px;
	background: red;
}
/* line back from pair (left) */
.pair::before {
	top: 50%;
	left: 0%;
	transform: translate(-100%, -50%);
	width: calc(5px + .5 * calc(5px * 2));
}
.pair.rd-1::before {
	display: none;
}

/* line to front of pair (right) */
.pair::after {
	top: 50%;
	left: calc(100% + calc(5px + .5 * calc(5px * 2) + 2px));
	transform: translate(-100%, -50%);
	width: calc(5px + .5 * calc(5px * 2) + 2px);
}
.pair.rd-3::after {
	display: none;
}

/* vertical lines */
.line {
	background: red;
}
.line.rd-1 { grid-column: 2;}
.line.rd-2 { grid-column: 4;}

.line.r-2 { grid-row: 2;}
.line.r-3 { grid-row: 3;}
.line.r-4 { grid-row: 4;}
.line.r-5 { grid-row: 5;}
.line.r-6 { grid-row: 6;}
.line.r-7 { grid-row: 7;}
.line.r-8 { grid-row: 8;}

/* unwanted cells */
.line.rd-1.r-5 { display: none; }

.line.rd-2.r-2 { display: none; }
.line.rd-2.r-8 { display: none; }

/* middle lines higher */
.line.rd-1.r-3,
.line.rd-1.r-7,
.line.rd-2.r-4,
.line.rd-2.r-5,
.line.rd-2.r-6
{
	height: calc(100% + .5em * 2 + 2px);
	transform: translate(0, calc(-1 * .5em - 1px));
}

/* top lines half */
.line.rd-1.r-2,
.line.rd-1.r-6,
.line.rd-2.r-3
{
	height: 50%;
	transform: translate(0, 100%);
}

/* bottom lines half */
.line.rd-1.r-4,
.line.rd-1.r-8,
.line.rd-2.r-7
{
	height: 50%;
	transform: translate(0, 0%);
}