Шаблон:Bracket/styles.css

Материал из Наро-Фоминский Футбол
Перейти к навигации Перейти к поиску
/* ===== Турнирная сетка ({{Bracket}}) ===== */
.bracket { overflow-x: auto; padding: 8px 4px; }
.bracket-inner { display: flex; align-items: stretch; }

/* Колонка этапа */
.bracket-round { flex: 0 0 240px; display: flex; flex-direction: column; }
.bracket-round:not(:last-child) { margin-right: 32px; }   /* ширина «коридора» линий */

.bracket-roundtitle {
    background: #e8ebf0; border: 1px solid #b9c2cd; color: #333;
    font-weight: bold; text-align: center; padding: 4px 10px; margin-bottom: 12px;
}
.bracket-roundbody { flex: 1; display: flex; flex-direction: column; }

/* Слот игры и разделители */
.bracket-slot { flex: 0 0 auto; display: flex; justify-content: center; }
.bracket-gap  { flex: 1 1 0; min-height: 14px; position: relative; }

/* Игра */
.bracket-match { position: relative; width: 240px; }
.bracket-matchmeta { font-size: 11px; color: #666; margin: 0 0 2px 1px; white-space: nowrap; }
.bracket-matchteams { width: 100%; border-collapse: collapse; background: #f7f9fb; font-size: 13px; }
.bracket-matchteams td { border: 1px solid #b9c2cd; padding: 3px 8px; }
.bracket-score { width: 52px; text-align: center; white-space: nowrap; }
.bracket-note { font-size: 11px; color: #777; }
.bracket-winner td { font-weight: bold; color: #0b4da2; background: #eaf2fb; }

/* Линии. Все отрезки — в 32px коридоре между колонками (x: right/left −32) */
.bracket-round:not(:last-child) .bracket-m-solo::after,
.bracket-round:not(:last-child) .bracket-m-up::after,
.bracket-round:not(:last-child) .bracket-m-lo::after {
    content: ""; position: absolute; right: -32px; width: 32px;
}
/* Одиночная игра: просто горизонтальный отрезок от середины */
.bracket-m-solo::after { top: 50%; border-top: 2px solid #9db8d2; }
/* Верхняя игра пары: отрезок + спуск вниз */
.bracket-m-up::after { top: 50%; height: 50%; border-top: 2px solid #9db8d2; border-right: 2px solid #9db8d2; }
/* Нижняя игра пары: спуск сверху + отрезок */
.bracket-m-lo::after { top: 0; height: 50%; border-bottom: 2px solid #9db8d2; border-right: 2px solid #9db8d2; }
/* Вертикаль внутри пары — в разделителе между играми (top/bottom: 0 всегда работают) */
.bracket-gapline::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: -32px; width: 32px;
    border-right: 2px solid #9db8d2;
}
/* Входящая линия у игр со 2-го этапа */
.bracket-round:not(:first-child) .bracket-match::before {
    content: ""; position: absolute; left: -32px; width: 32px; top: 50%;
    border-top: 2px solid #9db8d2;
}

/* Матч за третье место */
.bracket-third { margin-top: 18px; }
.bracket-thirdtitle { width: 240px; margin: 0 auto 10px; }
.bracket-third .bracket-match { margin: 0 auto; }

/* Тёмная тема (Vector-2022) */
.skin-theme-clientpref-night .bracket-roundtitle { background: #3a4048; border-color: #565e68; color: #eaecf0; }
.skin-theme-clientpref-night .bracket-matchteams { background: #27292d; }
.skin-theme-clientpref-night .bracket-matchteams td { border-color: #565e68; }
.skin-theme-clientpref-night .bracket-winner td { color: #6fb3ff; background: #1d3247; }