/* TICKER ANIMATION PIECES */ .tickerv2 .tickerv2_scoreChange { -webkit-animation: tickerv2_scoreChange 1s forwards cubic-bezier(.74,.19,.03,1.17); animation: tickerv2_scoreChange 1s forwards cubic-bezier(.74,.19,.03,1.17); } @-webkit-keyframes tickerv2_scoreChange { 0% { opacity: 1; -webkit-transform: translate(0,0); } 50% { opacity: 0; -webkit-transform: translate(0,-20px); } 51% { opacity: 0; -webkit-transform: translate(0,20px); } 100% { -webkit-transform: translate(0,0); opacity: 1; } } @keyframes tickerv2_scoreChange { 0% { opacity: 1; transform: translate(0,0); } 50% { opacity: 0; transform: translate(0,-20px); } 51% { opacity: 0; transform: translate(0,20px); } 100% { transform: translate(0,0); opacity: 1; } } .tickerv2 .tickerv2_fadeInPill { -webkit-animation: tickerv2_fadeInPill .5s forwards; animation: tickerv2_fadeInPill .5s forwards; opacity: 0; } @-webkit-keyframes tickerv2_fadeInPill { to { opacity: 1; } } @keyframes tickerv2_fadeInPill { to { opacity: 1; } } .tickerv2 .tickerv2_dropInPill { -webkit-animation: tickerv2_dropInPill .5s forwards; animation: tickerv2_dropInPill .5s forwards; -webkit-transform: translate(0,-20px); transform: translate(0,-20px); opacity: 0; } @-webkit-keyframes tickerv2_dropInPill { to { -webkit-transform: translate(0,0); opacity: 1; } } @keyframes tickerv2_dropInPill { to { transform: translate(0,0); opacity: 1; } } .tickerv2 .tickerv2_scoreChangeSvg { -webkit-animation: tickerv2_scoreChangeSvg 4s forwards; animation: tickerv2_scoreChangeSvg 4s forwards; } @-webkit-keyframes tickerv2_scoreChangeSvg { 20% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } } @keyframes tickerv2_scoreChangeSvg { 20% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } } .tickerv2 .tickerv2_scoreChangeLayer { -webkit-animation: tickerv2_scoreChangeLayer 5s .25s forwards; animation: tickerv2_scoreChangeLayer 5s .25s forwards; } @-webkit-keyframes tickerv2_scoreChangeLayer { 0% { opacity: 0; } 5% { opacity: .4; } 10% { opacity: 0; } 15% { opacity: .3; } 20% { opacity: 0; } 25% { opacity: .2; } 100% { opacity: 0; } } @keyframes tickerv2_scoreChangeLayer { 0% { opacity: 0; } 5% { opacity: .4; } 10% { opacity: 0; } 15% { opacity: .3; } 20% { opacity: 0; } 25% { opacity: .2; } 100% { opacity: 0; } } .tickerv2 .tickerv2_loadingPill { -webkit-animation: tickerv2_loadingPill 1s infinite; animation: tickerv2_loadingPill 1s infinite; } @-webkit-keyframes tickerv2_loadingPill { 0% { opacity: .9; } 50% { opacity: .4; } 100% { opacity: .9; } } @keyframes tickerv2_loadingPill { 0% { opacity: .9; } 50% { opacity: .4; } 100% { opacity: .9; } } .tickerv2 .tickerv2_statusChange { -webkit-animation: tickerv2_statusChange 1.5s infinite cubic-bezier(.24,.68,.18,1.36); animation: tickerv2_statusChange 1.5s infinite cubic-bezier(.24,.68,.18,1.36); } @-webkit-keyframes tickerv2_statusChange { 0% { opacity: 1; } 15% { opacity: 1; } 50% { opacity: .7; } 51% { opacity: .7; } 75% { opacity: 1; } 100% { opacity: 1; } } @keyframes tickerv2_statusChange { 0% { opacity: 1; } 15% { opacity: 1; } 50% { opacity: .7; } 51% { opacity: .7; } 75% { opacity: 1; } 100% { opacity: 1; } } .tickerv2 .tickerv2_statusChangeBG { -webkit-animation: tickerv2_statusChangeBG 1.5s forwards; animation: tickerv2_statusChangeBG 1.5s forwards; } @-webkit-keyframes tickerv2_statusChangeBG { 0% { background-color: white; color: black; } 15% { background-color: #E2E2E2; color: #D92822; } 100% { background-color: white; color: black; } } @keyframes tickerv2_statusChangeBG { 0% { background-color: white; color: black; } 15% { background-color: #E2E2E2; color: #D92822; } 100% { background-color: white; color: black; } } .tickerv2 tickerv2_inProgressIndicator { -webkit-animation: tickerv2_inProgressIndicator 2s forwards; animation: tickerv2_inProgressIndicator 2s forwards; } @-webkit-keyframes tickerv2_inProgressIndicator { 0% { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 1; } } @keyframes tickerv2_inProgressIndicator { 0% { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 1; } } /* CONTAINER */ .tickerv2_container { display: none; } .tickerv2 { font-family: 'protipo-narrow'; height: 75px; max-width: 1440px; width: 100%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .tickerv2 .scroller { width: 90%; height: 100%; overflow: hidden; position: relative; } /* TICKER BUTTONS */ .tickerv2 .leftbtn { position: relative; width: 50px; height: 100%; background-color: white; z-index:2; border-right: 1px solid #E2E2E2; cursor: pointer; -webkit-transition: background-color .5s, opacity .5s; transition: background-color .5s, opacity .5s; opacity: .2; /* initially lower opacity incase loaded pills dont overflow - suggests scrolling ability */ } .tickerv2 .leftbtn::before { content: ''; position: absolute; top: 50%; width: 16px; height: 16px; background: transparent; border-top: 4px solid #1C6CAA; border-right: 4px solid #1C6CAA; right: 10px; -webkit-transform: translate(0,-50%) rotate(-135deg); transform: translate(0,-50%) rotate(-135deg); -webkit-transition: -webkit-transform .1s cubic-bezier(.67,.69,.27,1.68); transition: transform .1s cubic-bezier(.67,.69,.27,1.68); } .tickerv2 .leftbtn:hover::before, .tickerv2 .leftbtn:active::before { -webkit-transform: translate(-5px,-50%) rotate(-135deg); transform: translate(-3px,-50%) rotate(-135deg); } .tickerv2 .rightbtn { position: relative; width: 50px; height: 100%; background-color: white; z-index:2; border-left: 1px solid #E2E2E2; cursor: pointer; -webkit-transition: background-color .5s, opacity .5s; transition: background-color .5s, opacity .5s; opacity: .2; /* initially lower opacity incase loaded pills dont overflow - suggests scrolling ability */ } .tickerv2 .rightbtn::before { content: ''; position: absolute; top: 50%; width: 16px; height: 16px; background: transparent; border-top: 4px solid #1C6CAA; border-right: 4px solid #1C6CAA; left: 10px; -webkit-transform: translate(0,-50%) rotate(45deg); transform: translate(0,-50%) rotate(45deg); -webkit-transition: -webkit-transform .1s cubic-bezier(.67,.69,.27,1.68); transition: transform .1s cubic-bezier(.67,.69,.27,1.68); } .tickerv2 .rightbtn:hover::before, .tickerv2 .rightbtn:active::before { -webkit-transform: translate(5px,-50%) rotate(45deg); transform: translate(3px,-50%) rotate(45deg); } .tickerv2 .rightbtn:active, .tickerv2 .leftbtn:active { background-color: #F9F9F9; -webkit-transition: background-color .1s; transition: background-color .1s; } /* ERROR SCREEN */ .tickerv2 .scroller .error_screen { position: absolute; top: 50%; left: 50%; border-radius: 6px; padding: 10px; background-color: rgba(240, 240, 240, 0.95); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 14px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-animation: tickerv2_error 2s infinite linear; animation: tickerv2_error 2s infinite linear; } @-webkit-keyframes tickerv2_error { 0% { background-color: rgba(240, 240, 240, 0.95); } 50% { background-color: rgba(240, 240, 240, 0.75); } 100% { background-color: rgba(240, 240, 240, 0.95); } } @keyframes tickerv2_error { 0% { background-color: rgba(240, 240, 240, 0.95); } 50% { background-color: rgba(240, 240, 240, 0.75); } 100% { background-color: rgba(240, 240, 240, 0.95); } } /* PILLS */ .tickerv2 .scroller .pills { position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 100%; -webkit-transition: -webkit-transform .75s cubic-bezier(.41,-0.18,.23,1.04); transition: transform .75s cubic-bezier(.41,-0.18,.23,1.04); } .tickerv2 .scroller .pills > div:first-of-type { border-left: 1px solid #E2E2E2; } .tickerv2 .scroller .pills > div { border-right: 1px solid #E2E2E2; } .tickerv2 .scroller .pills .game_pill { position: relative; -webkit-flex-basis: 20%; flex-basis: 20%; -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-shrink: 0; flex-shrink: 0; height: 100%; overflow: hidden; } .tickerv2 .scroller .pills .loading_pill { position: relative; -webkit-flex-basis: 20%; flex-basis: 20%; -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-shrink: 0; flex-shrink: 0; height: 100%; border-right: 1px solid #E2E2E2; opacity: .9; } .tickerv2 .scroller .pills .loading_pill .status_cont { height: 19px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0 8px 0 10px; } .tickerv2 .scroller .pills .loading_pill .status_cont .status { height: 7px; width: 60px; background-color: #eeeeee; border-radius: 2px; } .tickerv2 .scroller .pills .loading_pill .status_cont .broadcaster { height: 10px; width: 10px; border-radius: 50%; margin-left: auto; background-color: #eeeeee; } .tickerv2 .scroller .pills .loading_pill .team_cont { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 27.5px; overflow: hidden; } .tickerv2 .scroller .pills .loading_pill .team_cont .logo { width: 16px; height: 16px; border-radius: 50%; margin-left: 10px; background-color: #E2E2E2; } .tickerv2 .scroller .pills .loading_pill .team_cont .text { margin-left: 5px; height: 7px; width: 30px; border-radius: 2px; background-color: #E2E2E2; } .tickerv2 .scroller .pills .loading_pill .team_cont .score { margin-right: 11px; height: 8px; width: 8px; border-radius: 3px; margin-left: auto; background-color: #eeeeee; } .tickerv2 .scroller .pills .league_spacer { -webkit-flex-basis: 10%; flex-basis: 10%; -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-shrink: 0; flex-shrink: 0; height: 100%; background-color: #F9F9F9; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; text-align: center; } .tickerv2 .scroller .pills .league_spacer .title { font-weight: 600; font-size: 11px; line-height: 12px; padding: 0px 8px; } .tickerv2 .scroller .pills .league_spacer .sub { font-weight: 100; font-size: 11px; letter-spacing: -.3px; font-weight: 500; } .tickerv2 .scroller .pills .game_pill.nogames { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; text-align: center; font-size: 14px; cursor: auto !important; /* no need for this if there are no games */ } .tickerv2 .scroller .pills .game_pill .status_cont { border-bottom: 1px solid #E2E2E2; height: 19px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0 10px; font-weight: 500; } .tickerv2 .scroller .pills .game_pill .status_cont .status { font-size: 11px; text-align: left; line-height: 11px; padding-top: 2px; /* center that bad boy */ } .tickerv2 .scroller .pills .game_pill .status_cont img { height: 10px; margin-top: 2px; text-align: right; margin-left: auto; } .tickerv2 .scroller .pills .game_pill .team { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 27.5px; overflow: hidden; } .tickerv2 .scroller .pills .game_pill .tbd_logo { width: 16px; height: 16px; border-radius: 50%; background-color: #d2d2d2; margin-left: 10px; } .tickerv2 .scroller .pills .game_pill .team img { width: 16px; margin-left: 10px; } .tickerv2 .scroller .pills .game_pill .team .team_name { padding-left: 5px; font-size: 14px; line-height: 14px; text-align: left; font-weight: 700; } .tickerv2 .scroller .pills .game_pill .team.loser .team_name { color: #5B6770; font-weight: 500; } .tickerv2 .scroller .pills .game_pill .team .team_score { padding-right: 10px; font-size: 14px; line-height: 14px; text-align: left; font-weight: 700; margin-left: auto; } .tickerv2 .scroller .pills .game_pill .team.loser .team_score { color: #5B6770; font-weight: 500; } .tickerv2 .scroller .pills .game_pill .team .team_odds { padding-right: 8px; font-size: 12px; line-height: 12px; color: #5B6770; } .tickerv2 .scroller .pills .game_pill .team .powerplay { display: none; content: 'PP'; font-size: 12px; line-height: 14px; color: #fff; font-weight: bold; background-color: #515C64; padding: 0px 3px; border-radius: 2px; position: absolute; } .tickerv2 .scroller .pills .game_pill .team .home_powerplay { bottom: 8px; right: 26px; } .tickerv2 .scroller .pills .game_pill .team .visiting_powerplay { top: 26px; right: 26px; } .tickerv2 .scroller .pills .game_pill .svg_cont { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .tickerv2 .scroller .pills .game_pill .svg_cont svg { width: 100%; height: 100%; } .tickerv2 .scroller .pills .game_pill .svg_cont svg rect { opacity: 0; stroke-dasharray: 1000; stroke-dashoffset: 1000; } .tickerv2 .scroller .pills .game_pill .score_layer { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: #1C6CAA; opacity: 0; } .tickerv2 .scroller .pills .game_pill .hover_curtain { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: white; opacity: 0; z-index: -1; -webkit-transition: opacity .5s, z-index 0s .5s; transition: opacity .5s, z-index 0s .5s; } .tickerv2 .scroller .pills .game_pill .hover_curtain .hover_text_cont { height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .tickerv2 .scroller .pills .game_pill .hover_curtain .hover_text_cont .game_status_text { text-transform: uppercase; color: #1C6CAA; font-weight: 700; font-size: 11px; line-height: 11px; position: relative; margin: 0 auto; right: 3px; -webkit-transform: translate(0,10px); transform: translate(0,10px); opacity: 0; -webkit-transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, transform .5s; } .tickerv2 .scroller .pills .game_pill .hover_curtain .hover_text_cont .game_status_text .game_status_chevron { position: absolute; top: calc(50% + 1px); width: 6px; height: 6px; background: transparent; border-top: 2px solid #1C6CAA; border-right: 2px solid #1C6CAA; right: -10px; -webkit-transform: translate(0,-80%) rotate(45deg); transform: translate(0,-80%) rotate(45deg); } .tickerv2 .scroller .pills .game_pill .hover_broadcast_status_cont { height: 33.3333%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; top: 0; background-color: white; position: absolute; left: 0; right: 0; -webkit-align-items: center; align-items: center; border-bottom: 1px solid #E2E2E2; padding-top: 4px; /* to help with centering */ -webkit-transform: translate(-100%,0); transform: translate(-100%,0); -webkit-transition: -webkit-transform .5s, opacity .5s; transition: transform .5s, opacity .5s; opacity: 0; } /* PILL INTERACTION ANIMATION 1 */ .tickerv2 .scroller .pills .game_pill.pill_hover:hover .hover_broadcast_status_cont, .tickerv2 .scroller .pills .game_pill.pill_click .hover_broadcast_status_cont { -webkit-transform: translate(0,0); transform: translate(0,0); -webkit-transition: -webkit-transform .25s, opacity .2s; transition: transform .25s, opacity .2s; opacity: 1; } .tickerv2 .scroller .pills .game_pill .hover_broadcast_status_cont:hover { background-color: #eeeeee; } .tickerv2 .scroller .pills .game_pill .hover_broadcast_status_cont .hover_broadcast_status_text { text-transform: uppercase; color: #1C6CAA; font-weight: 700; font-size: 11px; line-height: 11px; margin-left: 10px; } .tickerv2 .scroller .pills .game_pill .hover_broadcast_status_cont .hover_broadcast_status_chevron { width: 6px; height: 6px; margin-right: 10px; margin-top: 2px; background: transparent; border-top: 2px solid #1C6CAA; border-right: 2px solid #1C6CAA; margin-left: auto; -webkit-transform: translate(0,-50%) rotate(45deg); transform: translate(0,-50%) rotate(45deg); } .tickerv2 .scroller .pills .game_pill .hover_broadcast_img_cont { height: 66.6666%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: absolute; background-color: white; top: 33.3333%; -webkit-align-items: center; align-items: center; -webkit-transform: translate(-100%,0); transform: translate(-100%,0); opacity: 0; -webkit-transition: -webkit-transform .5s .1s, opacity .5s .1s; transition: transform .5s .1s, opacity .5s .1s; } /* PILL INTERACTION ANIMATION 2 */ .tickerv2 .scroller .pills .game_pill.pill_hover:hover .hover_broadcast_img_cont, .tickerv2 .scroller .pills .game_pill.pill_click .hover_broadcast_img_cont { -webkit-transform: translate(0,0); transform: translate(0,0); -webkit-transition: -webkit-transform .25s .1s, opacity .1s; transition: transform .25s .1s, opacity .1s; opacity: 1; } .tickerv2 .scroller .pills .game_pill .hover_broadcast_img_cont:hover { background-color: #eeeeee; } .tickerv2 .scroller .pills .game_pill .hover_broadcast_img_cont .hover_broadcast_img { width: 60%; margin-left: 10px } .tickerv2 .scroller .pills .game_pill .hover_broadcast_img_cont .hover_broadcast_img_chevron { width: 6px; height: 6px; margin-right: 10px; margin-top: 2px; background: transparent; border-top: 2px solid #1C6CAA; border-right: 2px solid #1C6CAA; margin-left: auto; -webkit-transform: translate(0,-50%) rotate(45deg); transform: translate(0,-50%) rotate(45deg); } /* PILL INTERACTION ANIMATION HOVER CURTAIN */ .tickerv2 .scroller .pills .game_pill.pill_hover:hover .hover_curtain, .tickerv2 .scroller .pills .game_pill.pill_click .hover_curtain { opacity: 1; z-index: 2; -webkit-transition: opacity .25s, z-index 0s 0s; transition: opacity .25s, z-index 0s 0s; } /* PILL INTERACTION ANIMATION HOVER CURTAIN */ .tickerv2 .scroller .pills .game_pill.pill_hover:hover .hover_curtain .hover_text_cont .game_status_text, .tickerv2 .scroller .pills .game_pill.pill_click .hover_curtain .hover_text_cont .game_status_text { -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1; -webkit-transition: opacity .25s, -webkit-transform .25s; transition: opacity .25s, transform .25s; } /* PILL INTERACTION ANIMATION HOVER CURTAIN */ .tickerv2 .scroller .pills .game_pill.pill_hover:hover .hover_curtain .hover_text_cont .game_status_text .game_status_chevron, .tickerv2 .scroller .pills .game_pill.pill_click .hover_curtain .hover_text_cont .game_status_text .game_status_chevron { -webkit-animation: tickerv2_moveChevron .25s .1s forwards cubic-bezier(.74,.19,.03,1.17); animation: tickerv2_moveChevron .25s .1s forwards cubic-bezier(.74,.19,.03,1.17); } @-webkit-keyframes tickerv2_moveChevron { 0% { -webkit-transform: translate(0,-80%) rotate(45deg); } 50% { -webkit-transform: translate(2px,-80%) rotate(45deg); } 100% { -webkit-transform: translate(0,-80%) rotate(45deg); } } @keyframes tickerv2_moveChevron { 0% { transform: translate(0,-80%) rotate(45deg); } 50% { transform: translate(2px,-80%) rotate(45deg); } 100% { transform: translate(0,-80%) rotate(45deg); } } .tickerv2 .scroller .pills .game_pill .link, .tickerv2 .scroller .pills .game_pill .gamelink { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 1; /* makes link work */ cursor: pointer; } @media(min-width: 768px) { .tickerv2_container { width: 100%; border-top: 1px solid #E2E2E2; background-color: white; display: block; min-height: 75px; } } @media(min-width: 1300px) { .tickerv2 .scroller .pills .game_pill { -webkit-flex-basis: 10%; flex-basis: 10%; } .tickerv2 .scroller .pills .loading_pill { -webkit-flex-basis: 10%; flex-basis: 10%; } .tickerv2 .scroller .pills .league_spacer { -webkit-flex-basis: 5%; flex-basis: 5%; } } .tickerv2 .scores_button_container { background-color: #F9F9F9; border-left: 1px solid #CECECE; padding: 16px; height: 100%; vertical-align: middle; display: flex; align-items: center; } .tickerv2 .scores_button { align-items: center; background-color: #005EB8; border-radius: 4px; color: #fff; font-size: 14px; display: flex; height: 32px; justify-content: center; width: 76px; } .tickerv2 .scores_button:hover { background-color: #1D6DAA; } .tickerv2 .score_button_url { color: #fff; }