.pl1-ranking-card { padding: 1.25rem; border: 1px solid var(--pl1-slate-200); border-radius: 1rem; background: var(--pl1-white); box-shadow: 0 12px 30px rgba(15, 23, 42, .08); } .pl1-ranking-card-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; } .pl1-ranking-card-heading h2 { margin: 0; color: var(--pl1-slate-950); font-size: 1.2rem; font-weight: 900; } .pl1-ranking-card-heading p { margin: .3rem 0 0; color: var(--pl1-slate-500); font-size: .8rem; } .pl1-ranking-filter { width: 14rem; flex: 0 0 auto; margin: 0; } .pl1-ranking-filter > span { display: block; margin-bottom: .35rem; color: var(--pl1-slate-500); font-size: .68rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; } .pl1-ranking-select { width: 100%; min-height: 2.55rem; padding: .5rem 2.1rem .5rem .75rem; border: 1px solid var(--pl1-slate-300); border-radius: .65rem; color: var(--pl1-slate-700); background-color: var(--pl1-white); font: inherit; } .pl1-ranking-select:focus { border-color: var(--pl1-blue-500); outline: 3px solid rgba(59, 130, 246, .18); outline-offset: 1px; } .pl1-ranking-table-scroll { overflow-x: auto; border: 1px solid var(--pl1-slate-200); border-radius: .85rem; } .pl1-ranking-table-scroll:focus { outline: 3px solid rgba(59, 130, 246, .18); outline-offset: 2px; } .pl1-ranking-table { width: 100%; min-width: 42rem; margin: 0; border-collapse: collapse; color: var(--pl1-slate-700); font-size: .8rem; } .pl1-ranking-table.is-average { min-width: 45rem; } .pl1-ranking-table th, .pl1-ranking-table td { padding: .72rem .65rem; border-bottom: 1px solid var(--pl1-slate-200); text-align: right; vertical-align: middle; white-space: nowrap; } .pl1-ranking-table th { background: var(--pl1-slate-50); color: var(--pl1-slate-500); font-size: .68rem; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; } .pl1-ranking-table th abbr { border: 0; text-decoration: none; } .pl1-ranking-table tbody tr:last-child td { border-bottom: 0; } .pl1-ranking-table tbody tr[role="button"] { cursor: pointer; } .pl1-ranking-table tbody tr[role="button"]:hover td { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .28); } .pl1-ranking-table tbody tr[role="button"]:focus { outline: 3px solid rgba(59, 130, 246, .25); outline-offset: -3px; } .pl1-ranking-table td.is-position, .pl1-ranking-table td.is-points { color: var(--pl1-slate-950); font-size: .92rem; font-weight: 900; } .pl1-ranking-table .is-team { min-width: 13rem; text-align: left; } .pl1-ranking-team-layout { display: flex; min-width: 0; align-items: center; gap: .65rem; } .pl1-ranking-team-layout > img { width: 1.85rem; height: 1.85rem; flex: 0 0 auto; object-fit: contain; } .pl1-ranking-team-copy { display: grid; gap: .08rem; } .pl1-ranking-team-copy strong { color: var(--pl1-slate-950); font-weight: 850; } .pl1-ranking-team-copy small { color: var(--pl1-slate-500); font-size: .66rem; font-weight: 700; } .pl1-ranking-table .is-home { background: #f0fdf4; } .pl1-ranking-table .is-away { background: #fff7ed; } .pl1-ranking-table-groups th { text-align: center; } .pl1-ranking-table tr.is-green-strong td { background: #bbf7d0; } .pl1-ranking-table tr.is-green td { background: #dcfce7; } .pl1-ranking-table tr.is-green-soft td { background: #f0fdf4; } .pl1-ranking-table tr.is-blue td { background: #dbeafe; } .pl1-ranking-table tr.is-blue-soft td { background: #eff6ff; } .pl1-ranking-table tr.is-red-soft td { background: #fff1f2; } .pl1-ranking-table tr.is-red td { background: #fee2e2; } .pl1-ranking-table tr.is-green-strong td:first-child { box-shadow: inset 4px 0 0 #16a34a; } .pl1-ranking-table tr.is-green td:first-child { box-shadow: inset 4px 0 0 #22c55e; } .pl1-ranking-table tr.is-green-soft td:first-child { box-shadow: inset 4px 0 0 #4ade80; } .pl1-ranking-table tr.is-blue td:first-child { box-shadow: inset 4px 0 0 #2563eb; } .pl1-ranking-table tr.is-blue-soft td:first-child { box-shadow: inset 4px 0 0 #60a5fa; } .pl1-ranking-table tr.is-red-soft td:first-child { box-shadow: inset 4px 0 0 #fb7185; } .pl1-ranking-table tr.is-red td:first-child { box-shadow: inset 4px 0 0 #dc2626; } .pl1-ranking-average-score { display: inline-flex; min-width: 2.75rem; justify-content: center; padding: .22rem .48rem; border-radius: 999px; } .pl1-ranking-average-score.is-positive { background: #dcfce7; } .pl1-ranking-average-score.is-negative { background: #fee2e2; } .pl1-ranking-average-score.is-neutral { background: var(--pl1-slate-100); } .pl1-ranking-empty { padding: 2rem !important; color: var(--pl1-slate-500); text-align: center !important; } .pl1-ranking-legend, .pl1-ranking-average-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; margin-top: 1rem; color: var(--pl1-slate-500); font-size: .72rem; } .pl1-ranking-legend[hidden], .pl1-ranking-average-legend[hidden] { display: none !important; } .pl1-ranking-legend span, .pl1-ranking-average-legend span { display: inline-flex; align-items: center; gap: .4rem; } .pl1-ranking-swatch { width: .72rem; height: .72rem; flex: 0 0 auto; border: 1px solid rgba(15, 23, 42, .12); border-radius: 50%; } .pl1-ranking-swatch.is-green-strong { background: #bbf7d0; } .pl1-ranking-swatch.is-green { background: #dcfce7; } .pl1-ranking-swatch.is-green-direct { background: linear-gradient(90deg, #bbf7d0 0 50%, #dcfce7 50% 100%); } .pl1-ranking-swatch.is-green-soft { background: #f0fdf4; } .pl1-ranking-swatch.is-blue { background: #dbeafe; } .pl1-ranking-swatch.is-blue-soft { background: #eff6ff; } .pl1-ranking-swatch.is-red-soft { background: #fff1f2; } .pl1-ranking-swatch.is-red { background: #fee2e2; } .pl1-ranking-average-legend { padding: .8rem; border-radius: .7rem; background: var(--pl1-slate-50); } .pl1-ranking-average-legend strong { color: var(--pl1-slate-950); } .pl1-ranking-average-legend small { flex-basis: 100%; } @media (max-width: 991.98px) { .pl1-football-page .pl1-ranking-table, .pl1-football-page .pl1-ranking-table.is-average { min-width: 0; table-layout: fixed; font-size: .72rem; } .pl1-football-page .pl1-ranking-table th, .pl1-football-page .pl1-ranking-table td { padding: .55rem .3rem; } .pl1-football-page .pl1-ranking-table .is-position { width: 2.8rem; } .pl1-football-page .pl1-ranking-table .is-points { width: 3.3rem; } .pl1-football-page .pl1-ranking-table .is-team { width: 30%; min-width: 0; } .pl1-football-page .pl1-ranking-table.is-average .pl1-ranking-col-position { width: 2.8rem; } .pl1-football-page .pl1-ranking-table.is-average .pl1-ranking-col-team { width: 30%; } .pl1-football-page .pl1-ranking-table.is-average .pl1-ranking-col-average { width: 3.3rem; } .pl1-football-page .pl1-ranking-team-layout { gap: .4rem; } .pl1-football-page .pl1-ranking-team-layout > img { width: 1.5rem; height: 1.5rem; } .pl1-football-page .pl1-ranking-team-copy { min-width: 0; } .pl1-football-page .pl1-ranking-team-copy strong, .pl1-football-page .pl1-ranking-team-copy small { overflow-wrap: break-word; white-space: normal; } .pl1-football-page .pl1-ranking-average-score { min-width: 0; padding: .18rem .3rem; } } @media (max-width: 640px) { .pl1-ranking-card { padding: .85rem; } .pl1-ranking-card-heading { align-items: stretch; flex-direction: column; } .pl1-ranking-filter { width: 100%; } .pl1-football-page .pl1-ranking-card { padding: .55rem; } .pl1-football-page .pl1-ranking-table, .pl1-football-page .pl1-ranking-table.is-average { font-size: .64rem; } .pl1-football-page .pl1-ranking-table th, .pl1-football-page .pl1-ranking-table td { padding: .4rem .12rem; } .pl1-football-page .pl1-ranking-table th { font-size: .58rem; letter-spacing: 0; } .pl1-football-page .pl1-ranking-table .is-position { width: 2rem; } .pl1-football-page .pl1-ranking-table .is-points { width: 2.5rem; } .pl1-football-page .pl1-ranking-table td.is-position, .pl1-football-page .pl1-ranking-table td.is-points { font-size: .7rem; } .pl1-football-page .pl1-ranking-table .is-team { width: 31%; } .pl1-football-page .pl1-ranking-table.is-average .pl1-ranking-col-position { width: 2rem; } .pl1-football-page .pl1-ranking-table.is-average .pl1-ranking-col-team { width: 31%; } .pl1-football-page .pl1-ranking-table.is-average .pl1-ranking-col-average { width: 2.5rem; } .pl1-football-page .pl1-ranking-team-layout { gap: .22rem; } .pl1-football-page .pl1-ranking-team-layout > img { width: 1.2rem; height: 1.2rem; } .pl1-football-page .pl1-ranking-team-copy { line-height: 1.1; } .pl1-football-page .pl1-ranking-team-copy small { display: none; } .pl1-football-page .pl1-ranking-table-groups th { font-size: .54rem; white-space: normal; } }