@times-components/ts-components 1.146.2-be27d508c972211ad80599875cd69c63bf67d4b1.45 → 1.146.2-e5795a0ef59e2adb61ba52aeb7332fda4405cb7a.4

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

@@ -0,0 +1,767 @@
+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-Overlayer {
+    background-color: rgb(229 240 234 / 50%);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+
+  .Opta-Overlay {
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid #696969 !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: 24px;
+            -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;
+        }
+      }
+    }
+  }
+`;