@times-components/ts-components 1.145.1-82bc6796129e892c1eb22c6257c5e3809c159767.3 → 1.145.1-b32ea924749bafdf12e3e8515023538fa20e7808.3

package/src/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.tsx

@@ -1,761 +0,0 @@
-import styled from 'styled-components';
-import { colours, fonts } from '@times-components/ts-styleguide';
-import { TeamColor } from '../../shared/types';
-import {
-  backgroundColor,
-  darkBackgroundColor,
-  darkTextColor,
-  borderColor,
-  textColor,
-  maxMDBreakpoint,
-  darkBorderColor
-} from '../../shared/styles';
-
-export const WidgetContainer = styled.div<{
-  isApp: boolean;
-  homeTeamColor: TeamColor;
-  awayTeamColor: TeamColor;
-}>`
-  ${props =>
-    props.isApp &&
-    `
-    @media(prefers-color-scheme: dark) {
-      background-color: ${darkBackgroundColor} !important;
-      color: ${darkTextColor} !important;
-    }
-  `} .Opta-Cf.Opta-js-main {
-    ${props =>
-      props.isApp &&
-      `
-    @media(prefers-color-scheme: dark) {
-      background-color: ${darkBackgroundColor};
-    }
-  `};
-  }
-
-  .Opta > .Opta_W {
-    margin-top: 0px !important;
-    margin-bottom: 0px !important;
-  }
-
-  .Opta-Cf {
-    display: flex;
-    flex-direction: column;
-
-    ${props =>
-      props.isApp &&
-      `
-      @media(prefers-color-scheme: dark) {
-        background-color: ${darkBackgroundColor} !important;
-        color: ${darkTextColor} !important;
-      }
-  `};
-  }
-
-  .Opta-Score,
-  .Opta-Divider {
-    display: none !important;
-  }
-
-  // Move match data to top
-  .Opta-Matchdata {
-    order: -1;
-    margin-top: 8px !important;
-    margin-bottom: 0px !important;
-    border-top: 1px solid ${borderColor};
-    border-bottom: 1px solid ${borderColor};
-    background-color: ${backgroundColor} !important;
-
-    dd,
-    dt {
-      font-family: Roboto, sans-serif;
-      font-weight: 400;
-      line-height: 150%;
-      color: #333;
-    }
-
-    ${props =>
-      props.isApp &&
-      `
-      @media(prefers-color-scheme: dark) {
-        background-color: ${darkBackgroundColor} !important;
-        border-top: 1px solid ${darkBorderColor};
-        border-bottom: 1px solid ${darkBorderColor};
-        dd, dt {
-          color: ${darkTextColor};
-        }
-      }
-    `};
-  }
-
-  .Opta-MatchHeader {
-    margin-bottom: 0;
-    tr {
-      display: flex;
-      gap: 20px;
-      align-items: center;
-      padding: 16px;
-    }
-
-    .Opta-Team {
-      font-family: Roboto, sans-serif;
-      font-weight: 700;
-      font-size: 20px;
-      line-height: 150%;
-      color: ${textColor};
-      display: flex;
-      align-items: center;
-      ${props =>
-        props.isApp &&
-        `
-        @media(prefers-color-scheme: dark) {
-          color: ${darkTextColor};
-        }
-      `};
-
-      &.Opta-Home {
-        order: 2;
-      }
-
-      &.Opta-Away {
-        order: 5;
-      }
-    }
-
-    .Opta-Crest {
-      display: contents;
-
-      .Opta-Image-Team img {
-        height: 48px;
-        width: 48px;
-      }
-
-      .Opta-TeamFormation {
-        font-family: Roboto, sans-serif;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 150%;
-        letter-spacing: 0.08px;
-        color: ${textColor};
-        ${props =>
-          props.isApp &&
-          `
-        @media(prefers-color-scheme: dark) {
-          color: ${darkTextColor};
-        }
-      `};
-      }
-
-      &:first-of-type {
-        .Opta-Image-Team {
-          order: 1;
-        }
-        .Opta-TeamFormation {
-          order: 3;
-          margin: 0;
-          margin-right: auto;
-        }
-      }
-
-      &:last-of-type {
-        .Opta-Image-Team {
-          order: 6;
-        }
-        .Opta-TeamFormation {
-          order: 4;
-          margin: 0;
-          margin-left: auto;
-        }
-      }
-    }
-  }
-
-  .Opta-FootballPitch {
-    margin-inline: 16px;
-    margin-bottom: 16px;
-    border-radius: 8px;
-    background: none !important;
-    background-image: repeating-linear-gradient(
-      90deg,
-      #d4e3db 0,
-      #d4e3db 28px,
-      #e5f0ea 28px,
-      #e5f0ea 56px
-    ) !important;
-    background-size: 56px 100% !important;
-
-    circle {
-      stroke: none !important;
-      &.Opta-Home {
-        fill: ${props => props.homeTeamColor.light} !important;
-      }
-      &.Opta-Away {
-        fill: ${props => props.awayTeamColor.light} !important;
-      }
-    }
-
-    .Opta-JerseyNumber {
-      font-family: ${fonts.headline};
-      font-weight: 800;
-      font-size: 16px;
-      line-height: 112.99999%;
-      transform: translateY(-1px);
-    }
-
-    .Opta-PlayerName {
-      fill: ${textColor} !important;
-      filter: none;
-      font-family: Roboto, sans-serif;
-      font-weight: 600;
-      font-size: 13px;
-      line-height: 100%;
-    }
-  }
-
-  .Opta-Subs-Wrap {
-    border-top: 1px solid ${borderColor};
-    ${props =>
-      props.isApp &&
-      `
-        @media(prefers-color-scheme: dark) {
-          border-top: 1px solid ${darkBorderColor};
-        }
-      `};
-    thead {
-      th {
-        background-color: ${backgroundColor} !important;
-        color: ${textColor};
-        font-family: Roboto, sans-serif;
-        font-weight: 500;
-        font-size: 18px;
-        line-height: 112.999%;
-        padding-block: 32px;
-        ${props =>
-          props.isApp &&
-          `
-            @media(prefers-color-scheme: dark) {
-              background-color: ${darkBackgroundColor} !important;
-              color: ${darkTextColor};
-            }
-        `};
-      }
-    }
-
-    .Opta-FootballPitch-Subplayers {
-      margin: 0;
-      tr {
-        display: flex;
-        justify-content: center;
-      }
-      td {
-        display: flex;
-        flex-direction: column;
-        height: auto;
-
-        .Opta-Sub {
-          display: flex;
-          align-items: center;
-
-          &.Opta-Home {
-            span.Opta-Circle {
-              border: 2px solid ${props => props.homeTeamColor.light};
-              color: ${props => props.homeTeamColor.light};
-            }
-          }
-
-          &.Opta-Away {
-            span.Opta-Circle {
-              border: 2px solid ${props => props.awayTeamColor.light};
-              color: ${props => props.awayTeamColor.light} !important;
-            }
-          }
-
-          ${props =>
-            props.isApp &&
-            `
-              @media(prefers-color-scheme: dark) {
-                &.Opta-Home {
-                  span.Opta-Circle {
-                    border: 2px solid ${props.homeTeamColor.dark};
-                    color: ${props.homeTeamColor.dark};
-                  }
-                }
-
-                &.Opta-Away {
-                  span.Opta-Circle {
-                    border: 2px solid ${props.awayTeamColor.dark};
-                    color: ${props.awayTeamColor.dark} !important;
-                  }
-                }
-              }
-            `};
-
-          &.Opta-Unused {
-            opacity: 1;
-          }
-
-          span.Opta-Circle {
-            background-color: ${backgroundColor};
-            font-family: ${fonts.headline};
-            font-weight: 800;
-            font-size: 16px;
-            line-height: 112.99999%;
-            margin-bottom: 0;
-            min-width: 32px;
-            margin-right: 12px;
-
-            ${props =>
-              props.isApp &&
-              `
-                @media(prefers-color-scheme: dark) {
-                  background-color: ${darkBackgroundColor};
-                }
-            `};
-
-            & + span.Opta-PlayerName {
-              padding-right: 4px;
-              width: max-content;
-              font-size: 14px !important;
-              white-space: nowrap;
-
-              & + span.Opta-PlayerName {
-                width: max-content;
-                font-size: 14px !important;
-              }
-            }
-          }
-
-          span.Opta-PlayerName {
-            font-family: Roboto, sans-serif;
-            font-weight: 500;
-            font-size: 14px !important;
-            line-height: 100%;
-          }
-
-          span.Opta-MatcheventsIcons {
-            display: flex;
-            gap: 4px;
-            margin-top: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .Opta-Overlay {
-    border-radius: 8px;
-    overflow: hidden;
-    border: none !important;
-    .Opta-Cf {
-      ul {
-        background-color: #e5f0ea;
-        margin: 0 !important;
-        padding: 16px;
-        display: flex !important;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-
-        .Opta-Circle {
-          font-family: ${fonts.headline} !important;
-          font-weight: 800 !important;
-          font-size: 20px !important;
-          line-height: 112.99999% !important;
-          color: ${colours.functional.white};
-          height: 48px !important;
-          width: 48px !important;
-          display: flex !important;
-          align-items: center;
-          justify-content: center;
-          margin-bottom: 16px !important;
-          &.Opta-Home {
-            background-color: ${props => props.homeTeamColor.light} !important;
-          }
-
-          &.Opta-Away {
-            background-color: ${props => props.awayTeamColor.light} !important;
-          }
-
-          & + li {
-            color: ${textColor};
-            font-family: Roboto, sans-serif;
-            font-weight: 600;
-            font-size: 20px;
-            line-height: 100%;
-            margin-bottom: 16px;
-
-            & + li {
-              color: ${textColor} !important;
-              font-family: Roboto, sans-serif;
-              font-weight: 500;
-              font-size: 16px;
-              margin-bottom: 8px;
-            }
-          }
-        }
-
-        .Opta-MatchEvent {
-          display: flex;
-          align-items: center;
-
-          .Opta-Icon {
-            &.Opta-IconGoal {
-              margin-top: 2px;
-            }
-            &.Opta-IconOff,
-            &.Opta-IconOn {
-              margin-top: 6px;
-            }
-          }
-
-          span {
-            color: ${textColor} !important;
-            font-family: Roboto, sans-serif !important;
-            font-weight: 400 !important;
-            font-size: 16px !important;
-          }
-        }
-      }
-    }
-
-    .Opta-Flex {
-      display: grid;
-      grid-template-rows: 1fr;
-      padding-inline: 32px;
-      padding-block: 32px;
-      padding-bottom: 16px;
-      ${props =>
-        props.isApp &&
-        `
-          @media(prefers-color-scheme: dark) {
-            background-color: ${darkBackgroundColor} !important;
-            color: ${darkTextColor} !important;
-          }
-      `};
-    }
-
-    .Opta-Flex-Group {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 16px;
-    }
-
-    .Opta-Flex-Item {
-      display: flex !important;
-      width: 100% !important;
-      height: 100% !important;
-      padding: 0 !important;
-      padding-bottom: 16px !important;
-    }
-
-    .Opta-Stat {
-      flex-grow: 1 !important;
-      background-color: #e5f0ea !important;
-      border-radius: 8px;
-      padding-block: 16px;
-      padding-inline: 8px;
-      margin: 0 !important;
-      .Opta-Value {
-        color: ${textColor} !important;
-        font-family: ${fonts.headline} !important;
-        font-weight: 800;
-        font-size: 28px;
-        line-height: 112.999%;
-        padding-bottom: 4px;
-      }
-      .Opta-Label {
-        color: ${textColor} !important;
-        font-family: Roboto, sans-serif !important;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 112.999%;
-      }
-    }
-
-    .Opta-Close {
-      background: none !important;
-      top: 16px !important;
-      right: 16px !important;
-      position: relative;
-      &::before {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        content: '\\00D7';
-        font-size: 32px;
-        color: ${textColor};
-      }
-    }
-  }
-
-  // Mobile styles
-  @media (max-width: ${maxMDBreakpoint}px) {
-    // General Styles
-    .Opta-Cf {
-      display: flex;
-      flex-direction: column;
-      ${props =>
-        props.isApp &&
-        `
-          @media(prefers-color-scheme: dark) {
-            background-color: ${darkBackgroundColor} !important;
-            color: ${darkTextColor} !important;
-          }
-      `};
-
-      // Formations
-      .Opta-MatchHeader {
-        order: 1;
-        border-top: 1px solid ${borderColor};
-        border-bottom: 1px solid ${borderColor};
-        ${props =>
-          props.isApp &&
-          `
-            @media(prefers-color-scheme: dark) {
-              border-top: 1px solid ${darkBorderColor};
-              border-bottom: 1px solid ${darkBorderColor};
-            }
-        `};
-
-        tr {
-          justify-content: center;
-        }
-
-        .Opta-Team {
-          // Hide team name
-          font-size: 0;
-          padding: 0;
-        }
-
-        .Opta-TeamFormation {
-          font-family: Roboto, sans-serif;
-          font-weight: 700;
-          font-size: 16px;
-          line-height: 150%;
-
-          &::before {
-            content: 'Formation: ';
-            font-size: 16px;
-            font-family: Roboto, sans-serif;
-            font-weight: 400;
-            line-height: 150%;
-          }
-
-          ${props =>
-            props.isApp &&
-            `
-            @media(prefers-color-scheme: dark) {
-             color: ${darkTextColor};
-             &::before {
-               color: ${darkTextColor};
-             }
-            }
-        `};
-        }
-      }
-
-      // Pitch
-      .Opta-FootballPitch {
-        order: 2;
-        margin: 0;
-        border-radius: 0;
-        background: none !important;
-        background-image: repeating-linear-gradient(
-          0deg,
-          #d4e3db 0,
-          #d4e3db 56px,
-          #e5f0ea 56px,
-          #e5f0ea 112px
-        ) !important;
-
-        // Resize player elements
-        .Opta-PlayerNumber {
-          circle {
-            stroke: #ffffff !important;
-            stroke-width: 3px !important;
-            r: 26px !important;
-            border: 2px solid ${colours.functional.white} !important;
-            -webkit-tap-highlight-color: transparent;
-          }
-          .Opta-JerseyNumber {
-            font-size: 32px;
-            -webkit-tap-highlight-color: transparent;
-          }
-        }
-        .Opta-PlayerName {
-          font-size: 18px;
-          transform: translateY(14px);
-          & + .Opta-PlayerName {
-            transform: translateY(20px);
-            & + .Opta-Icon {
-              transform: translateY(30px);
-            }
-          }
-        }
-        .Opta-Icon {
-          transform: translateY(20px);
-        }
-      }
-
-      // Referee
-      .Opta-Matchdata {
-        order: 3;
-        margin: 0 !important;
-        padding: 16px !important;
-        border-bottom: none !important;
-        dt {
-          font-family: Roboto, sans-serif;
-          font-weight: 400;
-          font-size: 16px;
-          line-height: 150%;
-        }
-        dd {
-          font-family: Roboto, sans-serif;
-          font-weight: 700;
-          font-size: 16px;
-          line-height: 150%;
-        }
-
-        ${props =>
-          props.isApp &&
-          `
-            @media(prefers-color-scheme: dark) {
-              background-color: ${darkBackgroundColor} !important;
-              dt, dd {
-                color: ${darkTextColor};
-              }
-            }
-        `};
-      }
-
-      // Substitutions
-      .Opta-Subs-Wrap {
-        order: 4;
-        thead {
-          th {
-            font-family: ${fonts.headline};
-            font-size: 24px;
-            font-weight: 800;
-            padding-block: 40px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            ${props =>
-              props.isApp &&
-              `
-              @media(prefers-color-scheme: dark) {
-                color: ${darkTextColor};
-                background-color: ${darkBackgroundColor} !important;
-              }
-          `};
-          }
-        }
-        tbody {
-          tr {
-            justify-content: flex-start;
-
-            td {
-              padding: 0;
-            }
-
-            .Opta-Sub {
-              display: flex;
-              flex-direction: row;
-              align-items: center;
-              margin-top: 0;
-              margin-left: 16px;
-              margin-bottom: 16px;
-
-              .Opta-Circle {
-                aspect-ratio: 1 / 1;
-                height: 30px !important;
-                width: 30px !important;
-                font-size: 16px !important;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-right: 8px;
-                border-width: 1px !important;
-                padding-top: 3px;
-                -webkit-tap-highlight-color: transparent;
-              }
-
-              .Opta-PlayerName {
-                padding-right: 4px !important;
-                white-space: nowrap;
-                font-size: 16px !important;
-              }
-
-              .Opta-MatcheventsIcons {
-                margin-top: 0;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .Opta-Overlay {
-      .Opta-Circle {
-        padding-top: 3px;
-      }
-    }
-
-    // Need to override specific styles due to higher specificity in mobile view
-    .Opta-Subs-Wrap
-      .Opta-FootballPitch-Subplayers
-      td
-      .Opta-Sub
-      span.Opta-Circle {
-      color: ${textColor} !important;
-      border-color: ${textColor} !important;
-      ${props =>
-        props.isApp &&
-        `
-          @media(prefers-color-scheme: dark) {
-            color: ${darkTextColor} !important;
-            border-color: ${darkTextColor} !important;
-          }
-      `};
-    }
-    .Opta-Subs-Wrap
-      .Opta-FootballPitch-Subplayers
-      td
-      .Opta-Sub.Opta-Away
-      span.Opta-Circle {
-      color: ${textColor} !important;
-      border-color: ${textColor} !important;
-      ${props =>
-        props.isApp &&
-        `
-          @media(prefers-color-scheme: dark) {
-            color: ${darkTextColor} !important;
-            border-color: ${darkTextColor} !important;
-          }
-      `};
-    }
-
-    // Home team styles
-    &.home-widget-container {
-      .Opta-MatchHeader {
-        .Opta-Away {
-          display: none;
-        }
-      }
-    }
-
-    // Away team styles
-    &.away-widget-container {
-      .Opta-MatchHeader {
-        .Opta-Home {
-          display: none;
-        }
-      }
-    }
-  }
-`;