/* Shared "scoreboard graph" widget: one row per team/entrant, ranked, each with a horizontal bar and an optional click-to-expand breakdown. Used by comp's team scores page (comp/comp_scores.html) and surreyleague's season page (surreyleague/season.html) - keep both in sync with this file rather than duplicating these rules locally. All sizes are in px, not rem: the two host sites set different root font-sizes (comp's Bootstrap 4 base uses the standard 16px; surreyleague's Bootstrap 3 base uses 10px), so rem-based sizes here would render at two different physical sizes depending on which site loaded the file. px keeps this widget pixel-identical everywhere regardless of the host page's root font-size. */ .graph-row { display: flex; align-items: center; margin-bottom: 8px; } .graph-row:last-child { margin-bottom: 0; } .graph-row.clickable { cursor: pointer; transition: background 0.2s; } .graph-row.clickable:hover { background: rgba(0,0,0,0.03); } .graph-row.clickable .fa-chevron-down { display: inline-block; line-height: 1; vertical-align: middle; transition: transform 0.3s; font-size: 11px; opacity: 0.3; } .graph-row.clickable.active .fa-chevron-down { transform: rotate(180deg); opacity: 0.6; } .graph-label { width: 246px; display: flex; align-items: center; padding-right: 20px; color: #444; } .graph-rank { width: 28px; flex-shrink: 0; text-align: left; font-weight: 700; color: #888; font-size: 17px; margin-right: 4px; } .graph-row.rank-1 .graph-rank { color: #a8860b; } .graph-row.rank-2 .graph-rank { color: #888; } .graph-row.rank-3 .graph-rank { color: #a05a2c; } .graph-flag-box { width: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .graph-flag-box i { width: 36px; height: 24px; line-height: 24px; text-align: center; border: 1px solid #ddd; border-radius: 2px; background: #f8f9fa; box-sizing: border-box; } .graph-label span:not(.graph-rank) { flex-grow: 1; text-align: right; font-weight: 600; font-size: 15px; } .graph-bar-container { flex-grow: 1; height: 28px; background: #f0f0f0; border-radius: 6px; position: relative; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); } .graph-bar { height: 100%; background-color: var(--blue, #0274BD); background-image: linear-gradient(45deg, rgba(255,255,255,.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.1) 75%, transparent 75%, transparent); background-size: 16px 16px; border-radius: 6px; transition: width 1s cubic-bezier(0.17, 0.67, 0.83, 0.67); } .graph-value { position: absolute; right: 10px; top: 0; line-height: 28px; font-size: 14px; font-weight: bold; color: #444; } .graph-flag, .graph-flag-color { height: 24px; width: 36px; /* 3:2 ratio */ border: 1px solid #ddd; border-radius: 2px; object-fit: cover; } @media (max-width: 767px) { .graph-label { width: 108px; font-size: 12px; padding-right: 8px; } .graph-rank { width: 18px; font-size: 13px; margin-right: 2px; } .graph-flag-box { width: 28px; } .graph-flag, .graph-flag-color, .graph-flag-box i { height: 16px; width: 24px; line-height: 16px; } .graph-bar-container { height: 24px; } .graph-value { line-height: 24px; } } /* Podium Highlighting */ .graph-row.rank-1 .graph-bar { background-color: #FFD700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); } .graph-row.rank-2 .graph-bar { background-color: #C0C0C0; box-shadow: 0 0 10px rgba(192, 192, 192, 0.1); } .graph-row.rank-3 .graph-bar { background-color: #CD7F32; box-shadow: 0 0 10px rgba(205, 127, 50, 0.1); } .graph-detail { display: none; padding: 0 15px 16px 240px; flex-wrap: wrap; gap: 6px; margin-top: -5px; margin-bottom: 5px; } .graph-detail.always-show, .graph-detail.open { display: flex; } .event-badge { background: #f8f9fa; border: 1px solid #dee2e6; padding: 2px 10px; border-radius: 12px; font-size: 12px; color: #666; display: flex; align-items: center; cursor: pointer; transition: all 0.2s; } .event-badge:hover { filter: brightness(0.95); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .event-badge strong { color: #333; margin-left: 3px; } @media (max-width: 767px) { .graph-detail { padding-left: 0; padding-right: 0; } .event-badge { font-size: 10px; } } /* "See all" for tables with more than ~10 rows */ .graph-row-extra { display: none !important; } .scoreboard-graph.show-all .graph-row.graph-row-extra { display: flex !important; } .graph-show-more { display: none; margin-top: 15px; padding-top: 10px; border-top: 1px solid #eee; }