diff --git a/frontend/assets/css/historico-scoreboard-detail.css b/frontend/assets/css/historico-scoreboard-detail.css index 709992f..075836f 100644 --- a/frontend/assets/css/historico-scoreboard-detail.css +++ b/frontend/assets/css/historico-scoreboard-detail.css @@ -1,34 +1,155 @@ -.historical-scoreboard-detail { +.historical-summary-grid:has(.historical-scoreboard-layout) { + display: block; +} + +.historical-panel__note:empty { + display: none; +} + +#match-detail-timeline-section[hidden] { + display: none !important; +} + +.historical-scoreboard-layout { display: grid; - grid-template-columns: minmax(0, 1fr) minmax(180px, 280px) minmax(0, 1fr); - align-items: stretch; - gap: 14px; - margin-bottom: 14px; - padding: 18px; - border: 1px solid rgba(210, 182, 118, 0.24); - border-radius: 22px; + gap: 18px; + margin-bottom: 18px; +} + +.historical-scoreboard-layout__main { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) minmax(0, 1fr); + align-items: center; + gap: 22px; + padding: 24px 28px; + border: 1px solid rgba(210, 182, 118, 0.2); + border-radius: 24px; background: - radial-gradient(circle at top center, rgba(210, 182, 118, 0.14), transparent 44%), - linear-gradient(180deg, rgba(29, 34, 24, 0.96), rgba(11, 14, 10, 0.98)); + radial-gradient(circle at 50% 10%, rgba(210, 182, 118, 0.1), transparent 44%), + linear-gradient(180deg, rgba(11, 14, 10, 0.72), rgba(11, 14, 10, 0.94)); box-shadow: var(--shadow-soft); } -.historical-scoreboard-detail__side, -.historical-scoreboard-detail__score { +.historical-scoreboard-side { + display: grid; + grid-template-columns: 76px minmax(0, 1fr); + align-items: center; + gap: 18px; + min-height: 116px; +} + +.historical-scoreboard-side--axis { + grid-template-columns: minmax(0, 1fr) 76px; + text-align: right; +} + +.historical-scoreboard-side--axis .historical-scoreboard-side__emblem { + order: 2; +} + +.historical-scoreboard-side--axis .historical-scoreboard-side__text { + order: 1; +} + +.historical-scoreboard-side__emblem { + width: 76px; + height: 76px; + border-radius: 999px; + object-fit: contain; + padding: 8px; + border: 1px solid rgba(210, 182, 118, 0.26); + background: + radial-gradient(circle at center, rgba(210, 182, 118, 0.15), transparent 60%), + rgba(7, 9, 7, 0.72); +} + +.historical-scoreboard-side__text { + display: grid; + gap: 5px; +} + +.historical-scoreboard-side__text strong { + color: var(--text); + font-size: clamp(1.8rem, 4vw, 3.1rem); + line-height: 0.95; + text-transform: uppercase; +} + +.historical-scoreboard-side__text span { + color: var(--text-soft); + font-size: 0.86rem; + letter-spacing: 0.04em; +} + +.historical-scoreboard-side__text em { + color: var(--accent-strong); + font-style: normal; + font-size: 0.78rem; + font-weight: 900; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.historical-scoreboard-side.is-winner .historical-scoreboard-side__emblem { + border-color: rgba(210, 182, 118, 0.62); + box-shadow: 0 0 26px rgba(210, 182, 118, 0.14); +} + +.historical-scoreboard-center { display: grid; - align-content: center; justify-items: center; - min-height: 142px; - padding: 18px; - border: 1px solid rgba(159, 168, 141, 0.14); - border-radius: 18px; - background: rgba(13, 17, 12, 0.48); + gap: 6px; text-align: center; } -.historical-scoreboard-detail__side span, -.historical-scoreboard-detail__score span, -.historical-match-compact-meta span { +.historical-scoreboard-center__timer { + color: var(--text-soft); + font-size: 0.86rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.historical-scoreboard-center__score { + color: var(--text); + font-size: clamp(4rem, 8vw, 7rem); + line-height: 0.9; + letter-spacing: 0.02em; +} + +.historical-scoreboard-center__map { + color: var(--text); + font-size: 1.05rem; + font-weight: 800; +} + +.historical-scoreboard-center__mode, +.historical-scoreboard-center__winner { + color: var(--text-soft); + font-size: 0.86rem; +} + +.historical-scoreboard-center__winner { + color: var(--accent-strong); + font-weight: 900; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.historical-scoreboard-layout__meta { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); + gap: 12px; +} + +.historical-scoreboard-layout__meta article { + padding: 13px 14px; + border: 1px solid rgba(159, 168, 141, 0.14); + border-radius: 16px; + background: rgba(13, 17, 12, 0.44); +} + +.historical-scoreboard-layout__meta span { + display: block; margin-bottom: 7px; color: var(--muted); font-size: 0.72rem; @@ -36,76 +157,31 @@ text-transform: uppercase; } -.historical-scoreboard-detail__side strong { - color: var(--text); - font-size: clamp(1.35rem, 2.8vw, 2.6rem); - line-height: 1; -} - -.historical-scoreboard-detail__side em, -.historical-scoreboard-detail__score em { - min-height: 1.2em; - margin-top: 10px; - color: var(--accent-strong); - font-style: normal; - font-weight: 800; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.historical-scoreboard-detail__side.is-winner { - border-color: rgba(210, 182, 118, 0.42); - background: - radial-gradient(circle at top, rgba(210, 182, 118, 0.14), transparent 55%), - rgba(25, 24, 16, 0.7); -} - -.historical-scoreboard-detail__score { - border-color: rgba(210, 182, 118, 0.36); - background: - radial-gradient(circle at center, rgba(210, 182, 118, 0.18), transparent 62%), - rgba(11, 14, 10, 0.72); -} - -.historical-scoreboard-detail__score strong { - color: var(--text); - font-size: clamp(3.4rem, 7vw, 6.2rem); - line-height: 0.95; - letter-spacing: 0.02em; -} - -.historical-match-compact-meta { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); - gap: 12px; -} - -.historical-match-compact-meta article { - padding: 13px 14px; - border: 1px solid rgba(159, 168, 141, 0.14); - border-radius: 16px; - background: rgba(13, 17, 12, 0.44); -} - -.historical-match-compact-meta strong { +.historical-scoreboard-layout__meta strong { display: block; color: var(--text); font-size: 1rem; line-height: 1.35; } -@media (max-width: 720px) { - .historical-scoreboard-detail { +@media (max-width: 920px) { + .historical-scoreboard-layout__main { grid-template-columns: 1fr; - padding: 14px; + padding: 20px; } - .historical-scoreboard-detail__side, - .historical-scoreboard-detail__score { - min-height: 112px; - } - - .historical-scoreboard-detail__score { + .historical-scoreboard-center { order: -1; } + + .historical-scoreboard-side, + .historical-scoreboard-side--axis { + grid-template-columns: 70px minmax(0, 1fr); + text-align: left; + } + + .historical-scoreboard-side--axis .historical-scoreboard-side__emblem, + .historical-scoreboard-side--axis .historical-scoreboard-side__text { + order: initial; + } }